/* Thames Valley FibroScan — holding page
   Base styles, hover/focus states and responsive rules.
   Layout/visual styles are inline in index.html (from the approved design). */

/* Montserrat, self-hosted. 07/08/2026.
   Previously loaded from fonts.googleapis.com, which sent every visitor's IP
   address to Google before they had clicked anything, on a healthcare site,
   undisclosed in the privacy policy. Self-hosting removes that transfer and
   also removes two DNS lookups and two TLS connections from the critical path.
   Only the five weights the pages actually use are shipped: the Google request
   was also pulling 300 and an italic that nothing on the site references.
   Source: the Montserrat v31 latin TTFs installed on Jordan's machine,
   converted to woff2. 94 KB for the set. */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/montserrat-400.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/montserrat-500.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/montserrat-600.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/montserrat-700.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/montserrat-800.woff2') format('woff2'); }

/* akoca credit strip, ported from the akoca-site-tools mu-plugin, 07/08/2026.
   Source of truth for the mark and the font is the Shared Drive, at
   operations/themes-plugins/05 - Custom - akoca mu-plugins and code/
   02 - SOURCE - edit here, then rebuild the zip/akoca-site-tools/
   This is a static site with no WordPress, so the plugin's PHP output is
   reproduced as plain markup. If the mu-plugin's styling changes, this copy
   does not follow automatically and has to be updated by hand.
   Permitted by clause 20.1, which allows a modest footer credit link unless
   Waleed asks in writing for it to be removed. */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/poppins-600.woff2') format('woff2'); }

.akoca-strip { background: #fff; padding: 8px 0; }
.site-credit { font-family: 'Poppins', sans-serif; display: flex; align-items: center; gap: 10px; justify-content: center; }
.site-credit img { max-width: 20px; height: auto; }
.site-credit a { color: #152a43; font-size: 16px; font-weight: 600; text-decoration: none; }
.site-credit a:hover { color: #c93939; text-decoration: none; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  color: #14314F;
  background: #FFFFFF;
  -webkit-font-smoothing: antialiased;
}
a { color: #1C8C8C; text-decoration: none; }
a:hover { color: #14314F; }
p { line-height: 1.75; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: #14314F; color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* Buttons and link hovers (replaces the design's style-hover attributes) */
.btn-teal { transition: background 0.15s ease; }
.btn-teal:hover { background: #166f6f !important; color: #FFFFFF !important; }
.btn-teal-light:hover { background: #4FB3A6 !important; color: #FFFFFF !important; }
.footer-link:hover { color: #FFFFFF !important; }

/* Form fields (replaces style-focus) */
.field {
  width: 100%; padding: 13px 14px; border: 1px solid #D6E0E4; border-radius: 9px;
  font-family: 'Montserrat', sans-serif; font-size: 15px; color: #14314F; background: #FFFFFF;
}
.field:focus { border-color: #1C8C8C; outline: none; }
textarea.field { resize: vertical; }

/* Contact email can be a long unbreakable token; let it wrap on narrow screens */
.contact-email { flex-wrap: wrap; min-width: 0; overflow-wrap: anywhere; word-break: break-word; max-width: 100%; }
@media (max-width: 380px) { .contact-email { font-size: 14px !important; } }

/* Honeypot — hidden from humans, visible to bots */
.hp-field {
  position: absolute !important; left: -9999px !important;
  height: 1px; width: 1px; overflow: hidden;
}

/* Form status message */
.form-status { display: none; margin-top: 16px; font-size: 15px; font-weight: 500; }
.form-status.ok { display: block; color: #166f6f; }
.form-status.error { display: block; color: #B4232A; }

/* Carebit booking embed */
.carebit-wrap {
  width: 100%; height: 760px;
  border: 1px solid #E4ECEE; border-radius: 16px;
  overflow: hidden; background: #F7FAFB;
}
.carebit-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Accordion */
.acc-body { display: none; }
.acc-item.open .acc-body { display: block; }

/* Mobile nav */
.mobile-menu { display: none; }
.mobile-menu.open { display: flex; }

/* Responsive (from the approved design) */
@media (max-width: 900px) {
  [data-nav-desktop] { display: none !important; }
  [data-nav-toggle] { display: block !important; }
  [data-hero-grid] { grid-template-columns: 1fr !important; gap: 40px !important; padding-top: 56px !important; }
  [data-hero-visual] { min-height: 0 !important; }
  [data-trust-grid] { grid-template-columns: 1fr !important; gap: 18px !important; }
  [data-why-copy], [data-combine-grid], [data-measure-grid], [data-benefit-grid], [data-form-row] { grid-template-columns: 1fr !important; }
  [data-loc-grid] { grid-template-columns: 1fr !important; }
  [data-about-grid] { grid-template-columns: 1fr !important; gap: 32px !important; text-align: center; }
  [data-contact-grid] { grid-template-columns: 1fr !important; gap: 36px !important; }
  [data-footer-grid] { grid-template-columns: 1fr !important; }
  [data-sticky-book] { display: block !important; }
  .carebit-wrap { height: 820px; border-radius: 12px; }
  body { padding-bottom: 76px; } /* room for the sticky book bar */
}
@media (max-width: 560px) {
  h1 { font-size: 38px !important; }
}

/* Logo. Uses the web variant whose THAMES VALLEY line is scaled 1.25x. That
   puts the top line at ~8.4px cap height, which reads for older eyes; at the
   original ratio and 56px it was 5.2px and effectively illegible. FibroScan
   lands ~25px, well up on the 15.4px text wordmark it replaced (Waleed asked
   for more emphasis, 29/07 call). Header padding drops to 12px to offset the
   taller logo.

   Sized by WIDTH not height, 06/08/2026. The v4.0 mark is proportionally
   taller than v3.0 (aspect 3.059 against 3.384), so the previous 72px height
   would have rendered it 232px wide, NARROWER than the 244px that was live,
   the opposite of the increase Waleed asked for.

   96px on desktop, 07/08/2026, after Waleed asked again for the logo to be
   larger "in proportion to the rest of the screen". That gives 294px wide, up
   from 244px before round 3, so a 20% increase in width and ~45% in area.
   Deliberately NOT carried to the small breakpoints: at 96px the lockup is
   294px wide, which on a 390px phone would leave no room for the menu button.

   The inline `height` that used to sit on these images in index.html and
   privacy.html was removed on 07/08. It beat the class rule, so every media
   query below was dead and the logo held its desktop height on every screen.
   It was left alone during the round-3 delivery because changing mobile
   rendering mid-sign-off was the wrong risk to take; now that Waleed has
   approved the logo and asked for it bigger, the queries need to work so
   desktop can grow without dragging the phone sizes with it. */
.site-logo { height: 96px; width: auto; }
.footer-logo { height: 100px; width: auto; }
.site-header-inner { padding-top: 12px !important; padding-bottom: 12px !important; }
@media (max-width: 900px) {
  .site-logo { height: 80px; }
  .footer-logo { height: 84px; }
}
@media (max-width: 480px) {
  .site-logo { height: 66px; }
  .footer-logo { height: 70px; }
}
@media (max-width: 380px) {
  .site-logo { height: 56px; }
  .footer-logo { height: 60px; }
}

/* Narrow phones, down to 320px: stop fixed-width elements overflowing and
   shrink the oversized headings. */
@media (max-width: 480px) {
  [data-hero-grid] { padding-left: 22px !important; padding-right: 22px !important; }
  [data-hero-visual] > div { width: 258px !important; height: 258px !important; }
  [data-about-grid] > div:first-child > div { width: 240px !important; height: 240px !important; }
  .cta-heading { font-size: 24px !important; line-height: 1.35 !important; }
  #contact-form { padding: 24px !important; }
}
@media (max-width: 380px) {
  h1 { font-size: 30px !important; }
  [data-hero-visual] > div { width: 216px !important; height: 216px !important; }
  [data-hero-visual] > div > div:nth-child(4) { padding: 22px !important; }
  [data-about-grid] > div:first-child > div { width: 208px !important; height: 208px !important; }
  .cta-heading { font-size: 22px !important; }
}