/* ==========================================================================
   MiYOSMART Malaysia - "See More. Explore More."
   Design system: Modern Editorial x Child-Friendly Healthcare x Premium Lifestyle
   Palette authority: MamWzrokOk reference - royal blue / amber yellow /
   cream-sand / white, adapted for MiYOSMART Malaysia.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root{
  /* Colour - blue leads, yellow accents, cream-sand supports, white carries */
  --blue: #0c50c8;
  --blue-deep: #0a3fa3;
  --blue-dark: #072f78;
  --blue-ink: #2e5da6;
  --blue-soft: #e7eefc;
  --blue-mist: #f3f7fe;

  --sun: #f9b233;
  --sun-deep: #ec9f16;
  --sun-dark: #c9820a;
  --sun-soft: #fbce87;
  --sun-mist: #fef3e0;

  --sand: #e9d5b8;
  --cream: #f6efe4;
  --cream-deep: #ecdfcb;

  --paper: #ffffff;
  --white: #ffffff;
  --ink: #0e1c38;
  --ink-80: #33436a;
  --ink-60: #5c6a8c;
  --ink-40: #8d97ae;
  --line: #dfe5ef;
  --line-soft: #eef2f8;
  --hoya-blue: #005ca6; /* reserved for the corporate logo only */

  /* Type */
  --font-display: "Galano Grotesque", "Galano Grotesque Alt", Arial, sans-serif;
  --font-body: Arial, sans-serif;

  --fs-hero: clamp(2.65rem, 6vw, 4.6rem);
  --fs-h1: clamp(2.25rem, 5vw, 3.5rem);
  --fs-h2: clamp(1.95rem, 4vw, 2.85rem);
  --fs-h3: clamp(1.4rem, 2.1vw, 1.75rem);
  --fs-h4: 1.25rem;
  --fs-lead: clamp(1.0625rem, 1.35vw, 1.1875rem);
  --fs-body: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-stat: clamp(3.5rem, 8vw, 6rem);

  /* Space scale */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;
  --s9: 6rem;
  --s10: 8rem;
  --eyebrow-gap: clamp(0.9rem, 1.4vw, 1.25rem); /* eyebrow -> title, one value site-wide */
  --section-y: clamp(3.25rem, 6vw, 5.75rem);
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --maxw: 1340px;
  --maxw-narrow: 780px;

  /* Shape - squared throughout: every corner is a sharp 90deg corner */
  --r-sm: 0;
  --r: 0;
  --r-lg: 0;
  --r-xl: 0;
  --r-pill: 0;

  /* Depth - cool blue-cast, never neutral grey */
  --shadow-sm: 0 2px 10px rgba(11, 37, 89, 0.06);
  --shadow-md: 0 14px 38px rgba(11, 37, 89, 0.1);
  --shadow-lg: 0 28px 70px rgba(11, 37, 89, 0.15);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.68, 0.28, 1);
  --t-fast: 0.18s var(--ease);
  --t: 0.32s var(--ease);
  --t-slow: 0.7s var(--ease);

  --header-h: 78px;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
:root:root:root body *, :root:root:root body *::before, :root:root:root body *::after{ box-sizing: border-box; }

html{
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

:root:root:root body h1, :root:root:root body h2, :root:root:root body h3, :root:root:root body h4{
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin: 0 0 var(--s4);
}

/* Wrapping: titles balance into even lines, prose avoids orphans */
:root:root:root body h1, :root:root:root body h2, :root:root:root body h3, :root:root:root body h4, :root:root:root body h5, :root:root:root body h6{ text-wrap: balance; }
:root:root:root body p, :root:root:root body li, :root:root:root body blockquote, :root:root:root body figcaption, :root:root:root body dd, :root:root:root body dt{ text-wrap: pretty; }

:root:root:root body h1{ font-size: var(--fs-h1); color: var(--blue); }
:root:root:root body h2{ font-size: var(--fs-h2); color: var(--blue); }
:root:root:root body h3{ font-size: var(--fs-h3); line-height: 1.18; letter-spacing: -0.015em; color: var(--blue); }
:root:root:root body h4{ font-size: var(--fs-h4); line-height: 1.3; letter-spacing: -0.01em; }

:root:root:root body p{ margin: 0 0 var(--s4); max-width: 45.384em; }
:root:root:root body figure{ margin: 0; }
:root:root:root body p:last-child{ margin-bottom: 0; }

:root:root:root body a{ color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }

:root:root:root body img, :root:root:root body svg, :root:root:root body picture, :root:root:root body video{ max-width: 100%; display: block; }
:root:root:root body img{ height: auto; }

:root:root:root body ul, :root:root:root body ol{ margin: 0 0 var(--s4); padding-left: 1.15rem; }
:root:root:root body li{ margin-bottom: var(--s2); }

:root:root:root body button{ font: inherit; color: inherit; cursor: pointer; }

:root:root:root body :focus-visible{
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 0;
}

:root:root:root body ::selection{ background: var(--sun); color: var(--blue-ink); }

:root:root:root body .skip-link{
  position: absolute;
  left: var(--s4);
  top: -100px;
  z-index: 200;
  background: var(--blue);
  color: var(--white);
  padding: 0.75rem 1.25rem;
  border-radius: var(--r-sm);
  font-weight: 600;
  transition: top var(--t);
}
:root:root:root body .skip-link:focus{ top: var(--s4); }

:root:root:root body .visually-hidden{
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
:root:root:root body .wrap{
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

:root:root:root body .wrap--narrow{ max-width: calc(var(--maxw-narrow) + var(--gutter) * 2); }

:root:root:root body .section{ padding-block: var(--section-y); position: relative; }
:root:root:root body .section--tight{ padding-block: clamp(2.25rem, 4vw, 3.5rem); }
/* Two halves of what reads as one section. The contact page is cut in two so
   the enquiry card can be an Elementor Form widget; without these the join
   would carry a bottom and a top helping of --section-y. */
:root:root:root body .section--flushb{ padding-bottom: 0; }
:root:root:root body .section--flusht{ padding-top: 0; }
:root:root:root body .section--cream{ background: var(--cream); }
:root:root:root body .section--paper{ background: var(--paper); }
:root:root:root body .section--ink{ background: var(--blue); color: var(--white); }
:root:root:root body .section--sun{ background: var(--sun); }

:root:root:root body .section--ink h2, :root:root:root body .section--ink h3, :root:root:root body .section--ink h4{ color: var(--white); }
:root:root:root body .section--ink p:not(.eyebrow){ color: rgba(255, 255, 255, 0.82); }

:root:root:root body .stack > * + *{ margin-top: var(--s4); }

/* Every section head starts on the same left edge and shares one rhythm */
:root:root:root body .section-head{ max-width: 780px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
:root:root:root body .section-head--center{ margin-inline: auto; text-align: center; }

/* Sized so the two sentences take one line each. Measured at 19px: the copy
   needs 849px, a third line appears below 852px, and above 911px the second
   sentence's first word rides up onto line one. 880px sits mid-window. */
:root:root:root body .section-head--twoline{ max-width: 880px; }
:root:root:root body .section-head--twoline p:not(.eyebrow){ max-width: none; }
/* Wider measure for a headline that is a full sentence rather than a phrase */
:root:root:root body .section-head--wide{ max-width: 1040px; }
:root:root:root body .section-head--center p{ margin-inline: auto; }
:root:root:root body .section-head p:not(.eyebrow){ font-size: var(--fs-lead); color: var(--ink-60); margin-bottom: 0; }
:root:root:root body .section--ink .section-head p:not(.eyebrow){ color: rgba(255, 255, 255, 0.78); }

:root:root:root body .section-head h2{ margin-bottom: var(--s4); }

/* Eyebrow: an amber flag rule, then the label - squared, like every other
   corner on the site. The .section-head pairing keeps `.section-head p`
   from winning on specificity and flattening the label back to body size. */
:root:root:root body .eyebrow, :root:root:root body .section-head .eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue-deep);
  margin: 0 0 var(--eyebrow-gap);
}
:root:root:root body .eyebrow::before{
  content: "";
  width: 3px;
  height: 1.15em;
  border-radius: 0;
  background: var(--sun);
  flex: none;
}
/* On blue and photo-over-blue panels the label goes white, the flag stays amber */
:root:root:root body .section--ink .eyebrow, :root:root:root body .section--navy .eyebrow, :root:root:root body .why .eyebrow, :root:root:root body .darkcta .eyebrow{ color: rgba(255, 255, 255, 0.92); }

/* On the yellow panel the flag inverts to blue so it still reads */
:root:root:root body .section--sun .eyebrow{ color: var(--blue-dark); }
:root:root:root body .section--sun .eyebrow::before{ background: var(--blue); }

/* Yellow marker behind a word */
:root:root:root body .mark{
  background-image: linear-gradient(var(--sun), var(--sun));
  background-repeat: no-repeat;
  background-size: 100% 0.34em;
  background-position: 0 82%;
  padding-inline: 0.08em;
}

:root:root:root body .lead{ font-size: var(--fs-lead); color: var(--ink-60); }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
:root:root:root body .btn{
  --btn-bg: var(--blue);
  --btn-fg: var(--white);
  --btn-bd: var(--blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.75rem;
  min-height: 52px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 2px solid var(--btn-bd);
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast),
              color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
:root:root:root body .btn:hover{
  --btn-bg: var(--blue-deep);
  --btn-bd: var(--blue-deep);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
:root:root:root body .btn:active{ transform: translateY(0); }

:root:root:root body .btn svg{ width: 18px; height: 18px; flex: none; }

/* Amber secondary - the reference pairs it beside the blue primary */
:root:root:root body .btn--sun{ --btn-bg: var(--sun); --btn-fg: var(--blue-ink); --btn-bd: var(--sun); }
:root:root:root body .btn--sun:hover{ --btn-bg: var(--sun-deep); --btn-bd: var(--sun-deep); --btn-fg: var(--blue-ink); }

:root:root:root body .btn--outline{ --btn-bg: transparent; --btn-fg: var(--blue); --btn-bd: var(--blue); }
:root:root:root body .btn--outline:hover{ --btn-bg: var(--blue); --btn-fg: var(--white); --btn-bd: var(--blue); }

:root:root:root body .btn--ink{ --btn-bg: var(--blue-ink); --btn-fg: var(--white); --btn-bd: var(--blue-ink); }
:root:root:root body .btn--ink:hover{ --btn-bg: var(--blue-dark); --btn-bd: var(--blue-dark); }

:root:root:root body .btn--light{ --btn-bg: var(--white); --btn-fg: var(--blue); --btn-bd: var(--white); }
:root:root:root body .btn--light:hover{ --btn-bg: var(--sun); --btn-bd: var(--sun); --btn-fg: var(--blue-ink); }

:root:root:root body .btn--onink{ --btn-bg: transparent; --btn-fg: var(--white); --btn-bd: rgba(255, 255, 255, 0.5); }
:root:root:root body .btn--onink:hover{ --btn-bg: var(--white); --btn-fg: var(--blue); --btn-bd: var(--white); }

:root:root:root body .btn--sm{ padding: 0.65rem 1.25rem; min-height: 44px; font-size: var(--fs-sm); }

:root:root:root body .btn-row{
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  align-items: center;
}

/* Button row carrying a note alongside the button: the row's default --s3 gap
   sits the text too close to a large solid button, so it is widened here.
   Tightened after review — the earlier clamp(2rem, 4.5vw, 3.5rem) opened too
   wide a channel on desktop; this keeps the note visibly separate from the
   button without the two reading as unrelated. Row gap also covers the wrapped
   (stacked) case, so no margin is needed on the note itself. */
:root:root:root body .btn-row--note{ gap: clamp(1rem, 1.8vw, 1.5rem); }

/* The note itself. Same size as .field__hint but heavier and darker — at
   --ink-40 (2.93:1 on white) it read as disabled text next to the button.
   --ink-60 is 5.39:1, and 600 gives it presence without shouting. */
:root:root:root body .btn-row__note{
  flex: 1 1 19.032em;
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.6;
  color: var(--ink-60);
}

/* Text link with arrow */
:root:root:root body .link-arrow{
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-display);
  font-weight: 700;
  text-decoration: none;
  color: var(--blue);
  border-bottom: 2px solid var(--sun);
  padding-bottom: 2px;
  transition: gap var(--t-fast), border-color var(--t-fast);
}
:root:root:root body .link-arrow:hover{ gap: 0.85rem; border-color: var(--blue); }
:root:root:root body .link-arrow svg{ width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   5. Decorative graphics - dot-screen circles, discs and rings
   -------------------------------------------------------------------------- */
:root:root:root body .dots{
  position: absolute;
  pointer-events: none;
  background-image: radial-gradient(var(--sun) 2.6px, transparent 2.7px);
  background-size: 18px 18px;
  opacity: 0.9;
  z-index: 0;
}

:root:root:root body .blob{
  position: absolute;
  pointer-events: none;
  background: var(--sun);
  border-radius: 0;
  z-index: 0;
}
:root:root:root body .blob--soft{ background: var(--sun-soft); }
:root:root:root body .blob--cream{ background: var(--cream); }
:root:root:root body .blob--blue{ background: var(--blue); }

:root:root:root body .ring{
  position: absolute;
  pointer-events: none;
  border: 2px solid var(--sun);
  border-radius: 50%;
  z-index: 0;
}

/* Reference-style shape cluster: dotted amber disc, sand petal, solid blue half */
:root:root:root body .shape{
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
:root:root:root body .shape--dotdisc{
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.55) 1.4px, transparent 1.5px) 0 0 / 7px 7px,
    var(--sun);
}
:root:root:root body .shape--petal{
  background: var(--sun-soft);
  border-radius: 0;
}
:root:root:root body .shape--half{
  background: var(--blue);
  border-radius: 0;
}
:root:root:root body .shape--sand{
  background: var(--sand);
  border-radius: var(--r);
}

/* --------------------------------------------------------------------------
   6. Header / navigation
   -------------------------------------------------------------------------- */
:root:root:root body .site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent; /* at rest the hero wash runs behind the bar */
  border-bottom: 1px solid transparent;
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
:root:root:root body .site-header.is-stuck{
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom-color: var(--line);
  box-shadow: 0 4px 20px rgba(11, 37, 89, 0.06);
}

:root:root:root body .nav{
  display: flex;
  align-items: center;
  gap: var(--s5);
  min-height: var(--header-h);
}

:root:root:root body .brand{
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  flex: none;
  margin-right: auto;
}
:root:root:root body .brand__logo{ width: 92px; height: auto; }
/* Official MiYOSMART wordmark, set to read at the same optical weight as the
   HOYA mark beside it rather than the same box height */
:root:root:root body .brand__product{ width: 128px; height: auto; }
:root:root:root body .brand__divider{
  width: 1px;
  height: 26px;
  background: var(--line);
  flex: none;
}
:root:root:root body .brand__name{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1875rem;
  letter-spacing: -0.02em;
  color: var(--blue);
  line-height: 1;
}
:root:root:root body .brand__name span{ color: var(--sun-deep); }

:root:root:root body .nav__menu{
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
:root:root:root body .nav__menu li{ margin: 0; }

:root:root:root body .nav__link{
  display: inline-block;
  padding: 0.55rem 0.8rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  color: var(--ink-80);
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
}
:root:root:root body .nav__link:hover{ background: var(--blue-soft); color: var(--blue); }
:root:root:root body .nav__link[aria-current="page"]{
  color: var(--blue);
  background: var(--blue-soft);
}

/* Non-clickable nav / footer items (Event and Blog) */
:root:root:root body .nav__link.is-disabled, :root:root:root body .footer__col a.is-disabled{
  cursor: default;
  pointer-events: none;
  opacity: 0.55;
}

:root:root:root body .nav__cta{ flex: none; }

/* --- Dropdown menus ------------------------------------------------------
   The parent stays a real link, so the section is reachable without ever
   opening the menu. The chevron is a separate button that owns the
   expanded state; hover and keyboard focus open the panel as well. */
:root:root:root body .nav__item--menu{ position: relative; display: flex; align-items: center; }

:root:root:root body .nav__disclosure{
  display: inline-grid;
  place-items: center;
  width: 24px; height: 24px;
  margin-left: -0.5rem;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--ink-40);
  transition: transform var(--t-fast), color var(--t-fast);
}
:root:root:root body .nav__disclosure svg{ width: 13px; height: 13px; }
:root:root:root body .nav__item--menu:hover .nav__disclosure{ color: var(--blue); }
:root:root:root body .nav__disclosure[aria-expanded="true"]{ color: var(--blue); transform: rotate(180deg); }

:root:root:root body .nav__submenu{
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 210px;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
  z-index: 5;
}
:root:root:root body .nav__item--menu:hover .nav__submenu, :root:root:root body .nav__item--menu:focus-within .nav__submenu, :root:root:root body .nav__submenu.is-open{ opacity: 1; visibility: visible; transform: none; }

:root:root:root body .nav__sublink{
  display: block;
  padding: 0.6rem 0.7rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-80);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
}
:root:root:root body .nav__sublink:hover, :root:root:root body .nav__sublink[aria-current="page"]{ background: var(--blue-soft); color: var(--blue); }

/* Menu entries whose page does not exist yet. Rendered as <span>, not an empty
   <a href="#">, so nothing in the header is a dead link. Swap the element for
   an anchor and drop this class once the destination exists. */
:root:root:root body .nav__sublink--pending{
  color: var(--ink-60);   /* muted, but still 5.4:1 on white - --ink-40 fails AA */
  cursor: default;
}
:root:root:root body .nav__sublink--pending:hover{ background: none; color: var(--ink-60); }

/* --- Log in --------------------------------------------------------------- */
:root:root:root body .nav__login{
  display: inline-grid;
  place-items: center;
  width: 50px; height: 50px;
  flex: none;
  border-radius: 50%;
  /* Solid blue by default, inverting to a blue-outlined white disc on hover */
  border: 1px solid var(--blue);
  background: var(--blue);
  color: var(--white);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
:root:root:root body .nav__login svg{ width: 24px; height: 24px; stroke-width: 1.7; }
:root:root:root body .nav__login:hover, :root:root:root body .nav__login:focus-visible{ background: var(--white); border-color: var(--blue); color: var(--blue); }

:root:root:root body .nav__toggle{
  display: none;
  width: 46px; height: 46px;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  flex: none;
}
:root:root:root body .nav__toggle span{
  position: relative;
  display: block;
  width: 18px; height: 2px;
  background: var(--blue);
  border-radius: 0;
  transition: background var(--t-fast);
}
:root:root:root body .nav__toggle span::before, :root:root:root body .nav__toggle span::after{
  content: "";
  position: absolute;
  left: 0;
  width: 18px; height: 2px;
  background: var(--blue);
  border-radius: 0;
  transition: transform var(--t);
}
:root:root:root body .nav__toggle span::before{ top: -6px; }
:root:root:root body .nav__toggle span::after{ top: 6px; }
:root:root:root body .nav__toggle[aria-expanded="true"] span{ background: transparent; }
:root:root:root body .nav__toggle[aria-expanded="true"] span::before{ transform: translateY(6px) rotate(45deg); }
:root:root:root body .nav__toggle[aria-expanded="true"] span::after{ transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
:root:root:root body .hero{
  position: relative;
  overflow: hidden;
  background: var(--paper);
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3.5rem, 7vw, 6rem);
}

:root:root:root body .hero__grid{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.03fr 0.97fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

:root:root:root body .hero__title{
  font-size: var(--fs-hero);
  font-weight: 800;
  letter-spacing: -0.038em;
  line-height: 0.98;
  margin-bottom: var(--s5);
}

:root:root:root body .hero__copy{
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  color: var(--ink-60);
  max-width: 33.672em;
  margin-bottom: var(--s6);
}

:root:root:root body .hero__reassure{
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: var(--s6);
  font-size: var(--fs-sm);
  color: var(--ink-60);
}
:root:root:root body .hero__reassure svg{ width: 20px; height: 20px; color: var(--sun-dark); flex: none; }

:root:root:root body .hero__media{ position: relative; }

/* Sand panel behind the photograph, as the reference sets its portraits on a block */
:root:root:root body .hero__media::before{
  content: "";
  position: absolute;
  z-index: 1;
  left: 18%;
  right: -5%;
  top: 14%;
  bottom: -5%;
  background: var(--sand);
  border-radius: var(--r);
}

:root:root:root body .hero__frame{
  position: relative;
  z-index: 2;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 4.4;
  background: var(--cream);
}
:root:root:root body .hero__frame img{ width: 100%; height: 100%; object-fit: cover; }

/* Directional, text-safe overlay - image stays 85%+ readable (Rule 2.6.2) */
:root:root:root body .hero__frame::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(7, 25, 60, 0.62) 0%,
    rgba(7, 25, 60, 0.24) 24%,
    rgba(7, 25, 60, 0) 44%
  );
}

:root:root:root body .hero__badge{
  position: absolute;
  z-index: 3;
  left: clamp(1rem, 2.5vw, 1.75rem);
  bottom: clamp(1rem, 2.5vw, 1.75rem);
  right: clamp(1rem, 2.5vw, 1.75rem);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

:root:root:root body .hero__chip{
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--white);
  border-radius: var(--r-pill);
  padding: 0.7rem 1.15rem 0.7rem 0.7rem;
  box-shadow: var(--shadow-md);
}
:root:root:root body .hero__chip-num{
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--sun);
  color: var(--blue-ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  flex: none;
}
:root:root:root body .hero__chip-txt{
  font-size: var(--fs-xs);
  line-height: 1.35;
  color: var(--ink-60);
  max-width: 10.98em;
}
:root:root:root body .hero__chip-txt strong{ display: block; color: var(--blue); font-size: var(--fs-sm); }
:root:root:root body .hero__chip--tl{ bottom: 20%; left: -6%; top: auto; }
:root:root:root body .hero__chip--br{ top: 8%; right: -5%; }

/* Shape cluster over the top-left of the portrait */
:root:root:root body .hero__cluster{
  position: absolute;
  z-index: 3;
  top: -5%;
  left: -5%;
  width: clamp(140px, 15vw, 196px);
  aspect-ratio: 1.55;
}
:root:root:root body .hero__cluster .shape{ top: 0; bottom: 0; }
/* Three overlapping shapes, amber disc reading in front */
:root:root:root body .hero__cluster .shape--dotdisc{ left: 0; width: 64%; z-index: 3; border-radius: 50%; }
:root:root:root body .hero__cluster .shape--petal{ left: 40%; width: 30%; z-index: 1; }
:root:root:root body .hero__cluster .shape--half{ left: 58%; width: 30%; z-index: 2; }

:root:root:root body .hero__blob-1{ width: 40vw; max-width: 520px; aspect-ratio: 1; top: -36%; right: -14%; background: var(--cream); }
:root:root:root body .hero__dots-1{ width: 126px; height: 108px; bottom: 12%; left: 0; }

/* Trust strip under hero */
:root:root:root body .trustbar{
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--blue-mist);
}
:root:root:root body .trustbar__inner{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
}
:root:root:root body .trustbar__item{
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 0.9rem;
  align-items: start;
}
:root:root:root body .trustbar__item-ico{
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--sun-soft);
  color: var(--blue);
}
:root:root:root body .trustbar__item svg{ width: 22px; height: 22px; }
:root:root:root body .trustbar__item strong{
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--blue);
  margin-bottom: 0.15rem;
}
:root:root:root body .trustbar__item span{ display: block; font-size: var(--fs-xs); color: var(--ink-60); line-height: 1.45; }

/* --------------------------------------------------------------------------
   8. Myopia simulator (Section 02)
   -------------------------------------------------------------------------- */
:root:root:root body .sim{ position: relative; overflow: hidden; }

:root:root:root body .sim__layout{
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}

:root:root:root body .sim__scenes{
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
:root:root:root body .sim__scenes li{ margin: 0; }

:root:root:root body .sim__scene-btn{
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  padding: 0.85rem 1rem;
  background: transparent;
  border: 2px solid transparent;
  border-radius: var(--r);
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--ink-60);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
:root:root:root body .sim__scene-btn:hover{ background: var(--white); color: var(--blue); }
:root:root:root body .sim__scene-btn[aria-selected="true"]{
  background: var(--white);
  border-color: var(--blue);
  color: var(--blue);
  box-shadow: var(--shadow-sm);
}
:root:root:root body .sim__scene-ico{
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue);
  flex: none;
  transition: background var(--t-fast);
}
:root:root:root body .sim__scene-ico svg{ width: 19px; height: 19px; }
:root:root:root body .sim__scene-btn[aria-selected="true"] .sim__scene-ico{ background: var(--sun); color: var(--blue-ink); }

:root:root:root body .sim__stage{
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--blue-ink);
  aspect-ratio: 16 / 10.5;
  box-shadow: var(--shadow-md);
}
:root:root:root body .sim__img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: filter 0.45s var(--ease), opacity var(--t);
  will-change: filter;
}
:root:root:root body .sim__stage.is-swapping .sim__img{ opacity: 0; }

:root:root:root body .sim__caption{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2rem) clamp(1.1rem, 2.5vw, 1.5rem);
  background: linear-gradient(to top, rgba(7, 25, 60, 0.92) 0%, rgba(7, 25, 60, 0.62) 55%, rgba(7, 25, 60, 0) 100%);
  color: var(--white);
}
:root:root:root body .sim__caption strong{
  display: block;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  margin-bottom: 0.2rem;
}
:root:root:root body .sim__caption span{ font-size: var(--fs-sm); color: rgba(255,255,255,.82); }

:root:root:root body .sim__level-tag{
  position: absolute;
  top: var(--s4); right: var(--s4);
  z-index: 2;
  background: var(--sun);
  color: var(--blue-ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  padding: 0.42rem 0.85rem;
  border-radius: var(--r-pill);
}

:root:root:root body .sim__control{
  margin-top: var(--s5);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
}
:root:root:root body .sim__control-head{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s4);
  margin-bottom: var(--s4);
}
:root:root:root body .sim__control-head label{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
}
:root:root:root body .sim__control-head output{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.0625rem;
  color: var(--blue);
}

:root:root:root body input[type="range"].sim__range{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: var(--r-pill);
  background: linear-gradient(to right, var(--sun) 0%, var(--sun) var(--fill, 0%), var(--blue-soft) var(--fill, 0%), var(--blue-soft) 100%);
  margin: 0;
}
:root:root:root body input[type="range"].sim__range::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--blue);
  border: 4px solid var(--white);
  box-shadow: var(--shadow-sm);
  cursor: grab;
}
:root:root:root body input[type="range"].sim__range::-moz-range-thumb{
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--blue);
  border: 4px solid var(--white);
  box-shadow: var(--shadow-sm);
  cursor: grab;
}

:root:root:root body .sim__ticks{
  display: flex;
  justify-content: space-between;
  margin-top: 0.7rem;
  font-size: var(--fs-xs);
  color: var(--ink-40);
  font-weight: 600;
}

:root:root:root body .sim__note{
  margin-top: var(--s4);
  font-size: var(--fs-xs);
  color: var(--ink-40);
  line-height: 1.5;
}

:root:root:root body .sim__blob{ width: 420px; aspect-ratio: 1; top: -20%; left: -18%; background: var(--blue-soft); }

/* --------------------------------------------------------------------------
   9. Myopia explained (Section 03)
   -------------------------------------------------------------------------- */
:root:root:root body .explain__grid{
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

:root:root:root body .explain__media{ position: relative; }
:root:root:root body .explain__media img{
  border-radius: var(--r-lg);
  width: 100%;
  aspect-ratio: 4 / 3.4;
  object-fit: cover;
  object-position: 50% 30%;
  box-shadow: var(--shadow-md);
}
:root:root:root body .explain__dots{ width: 108px; height: 108px; top: -26px; right: -22px; }

:root:root:root body .eye-diagram{
  background: var(--white);
  border: 1px solid var(--blue-soft);
  border-radius: var(--r);
  padding: clamp(1.1rem, 2.4vw, 1.5rem);
  margin-top: var(--s5);
  box-shadow: var(--shadow-sm);
}
:root:root:root body .eye-diagram svg{ width: 100%; height: auto; }
:root:root:root body .eye-diagram figcaption{
  font-size: var(--fs-xs);
  color: var(--ink-60);
  margin-top: var(--s3);
  line-height: 1.5;
}

:root:root:root body .qa-list{ display: grid; gap: var(--s5); }
:root:root:root body .qa{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s4);
  align-items: start;
}
:root:root:root body .qa__num{
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--sun);
  color: var(--blue-ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  flex: none;
}
:root:root:root body .qa h3{ margin-bottom: 0.35rem; font-size: 1.1875rem; }
:root:root:root body .qa p{ color: var(--ink-60); font-size: var(--fs-sm); margin: 0; }

/* Row variant: the three points run across the full width instead of stacking
   in a narrow column beside a much shorter intro, which left a void under it.
   Each .qa keeps its number-beside-text layout, so below 1080px the columns
   would squeeze the copy too narrow - they stack there instead. */
:root:root:root body .qa-list--row{ grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); }
@media (max-width: 1080px) {
  :root:root:root body .qa-list--row{ grid-template-columns: 1fr; }
}

/* Boxed variant: each point sits in the standard card (white, hairline border,
   square corners) so the three read as discrete items rather than floating
   text. Grid stretch keeps the boxes equal height across the row. */
:root:root:root body .qa-list--boxed .qa{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.4rem, 2.8vw, 2rem);
}

/* The action sits opposite the heading in a split head; `align-items: end`
   drops it onto the heading's baseline, and justifying it to the end keeps it
   flush with the content edge instead of stranded mid-row. */
:root:root:root body .split-head__action{ margin: 0; justify-self: end; }
@media (max-width: 1080px) {
  :root:root:root body .split-head__action{ justify-self: start; }
}

/* --------------------------------------------------------------------------
   10. Spot the signs (Section 04)
   -------------------------------------------------------------------------- */
:root:root:root body .signs__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}

/* Solid blue symptom cards with an amber icon badge - the reference pattern */
:root:root:root body .sign{
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--blue);
  border: 3px solid var(--blue);
  border-radius: var(--r);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--t-fast), transform var(--t-fast),
              box-shadow var(--t-fast), background var(--t-fast);
}
:root:root:root body .sign:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
:root:root:root body .sign:has(input:checked){ background: var(--blue-deep); border-color: var(--sun); }
:root:root:root body .sign:focus-within{ outline: 3px solid var(--sun); outline-offset: 3px; }

:root:root:root body .sign input{ position: absolute; opacity: 0; pointer-events: none; }

:root:root:root body .sign__img{
  aspect-ratio: 16 / 10;
  width: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}
:root:root:root body .sign:hover .sign__img{ transform: scale(1.04); }

:root:root:root body .sign__body{
  position: relative;
  flex: 1;
  padding: clamp(1.5rem, 2.6vw, 1.85rem) clamp(1.15rem, 2.2vw, 1.5rem) clamp(1.25rem, 2.2vw, 1.5rem);
}
:root:root:root body .sign__body h3{
  font-size: 1.125rem;
  color: var(--white);
  margin-bottom: 0.45rem;
}
:root:root:root body .sign__body p{ font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.86); margin: 0; }

/* Amber eye badge straddling the photo / card boundary */
:root:root:root body .sign__badge{
  position: absolute;
  top: 0;
  left: clamp(1.15rem, 2.2vw, 1.5rem);
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--sun-soft);
  color: var(--blue-ink);
  box-shadow: var(--shadow-sm);
}
:root:root:root body .sign__badge svg{ width: 22px; height: 22px; }
:root:root:root body .sign:has(input:checked) .sign__badge{ background: var(--sun); }

:root:root:root body .sign__check{
  position: absolute;
  top: var(--s3); right: var(--s3);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-sm);
  color: var(--ink-40);
  transition: background var(--t-fast), color var(--t-fast);
}
:root:root:root body .sign__check svg{ width: 17px; height: 17px; }
:root:root:root body .sign:has(input:checked) .sign__check{ background: var(--sun); color: var(--blue-ink); }

:root:root:root body .signs__tally{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s5);
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--blue-ink);
  color: var(--white);
  border-radius: var(--r);
}
:root:root:root body .signs__tally-num{
  display: grid;
  place-items: center;
  width: 74px; height: 74px;
  border-radius: 50%;
  background: var(--sun);
  color: var(--blue-ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.75rem;
  flex: none;
}
:root:root:root body .signs__tally-txt{ flex: 1 1 260px; }
:root:root:root body .signs__tally-txt strong{
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin-bottom: 0.2rem;
}
:root:root:root body .signs__tally-txt span{ font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.78); }

/* --------------------------------------------------------------------------
   11. Meet MiYOSMART (Section 05)
   -------------------------------------------------------------------------- */
:root:root:root body .product{ position: relative; overflow: hidden; }

:root:root:root body .product__grid{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

:root:root:root body .lens{
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  max-width: 520px;
  margin-inline: auto;
  width: 100%;
}
:root:root:root body .lens__disc{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffffff 0%, var(--blue-mist) 44%, var(--blue-soft) 100%);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(12, 80, 200, 0.1);
}
:root:root:root body .lens__svg{ position: relative; width: 88%; height: auto; }

:root:root:root body .lens__hot{
  cursor: pointer;
  transition: opacity var(--t-fast);
}
:root:root:root body .lens__hot circle, :root:root:root body .lens__hot ellipse{ transition: fill var(--t-fast), stroke var(--t-fast); }
:root:root:root body .lens__hot:hover{ opacity: 0.92; }

:root:root:root body .lens__pin{
  position: absolute;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--sun);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.875rem;
  border: 3px solid var(--white);
  box-shadow: var(--shadow-md);
  transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast);
}
:root:root:root body .lens__pin:hover{ transform: scale(1.1); }
:root:root:root body .lens__pin[aria-pressed="true"]{ background: var(--sun); color: var(--blue-ink); }
:root:root:root body .lens__pin--1{ top: 44%; left: 44%; }
:root:root:root body .lens__pin--2{ top: 20%; left: 70%; }
:root:root:root body .lens__pin--3{ bottom: 15%; left: 22%; }

:root:root:root body .lens-info{
  background: var(--blue-mist);
  border: 1px solid var(--blue-soft);
  border-left: 5px solid var(--sun);
  border-radius: var(--r);
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  margin-top: var(--s5);
  min-height: 132px;
}
:root:root:root body .lens-info h3{ font-size: 1.1875rem; margin-bottom: 0.35rem; }
:root:root:root body .lens-info p{ font-size: var(--fs-sm); color: var(--ink-60); margin: 0; }

:root:root:root body .product__pillars{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s4);
  margin-top: var(--s6);
}
:root:root:root body .pillar{
  background: var(--blue-mist);
  border: 1px solid var(--blue-soft);
  border-radius: var(--r);
  padding: clamp(1.1rem, 2.4vw, 1.5rem);
}
:root:root:root body .pillar svg{ width: 30px; height: 30px; color: var(--blue); margin-bottom: 0.7rem; }
:root:root:root body .pillar h4{ font-size: 1.0625rem; margin-bottom: 0.3rem; color: var(--blue); }
:root:root:root body .pillar p{ font-size: var(--fs-sm); color: var(--ink-60); margin: 0; }

:root:root:root body .product__figure{
  margin: var(--s6) 0 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1rem, 2.2vw, 1.5rem);
}
:root:root:root body .product__figure img{ margin-inline: auto; max-height: 240px; width: auto; }
:root:root:root body .product__figure figcaption{
  margin-top: var(--s3);
  font-size: var(--fs-xs);
  color: var(--ink-60);
  text-align: center;
}

:root:root:root body .product__blob{ width: 460px; aspect-ratio: 1; bottom: -30%; right: -16%; background: var(--cream); }

/* --------------------------------------------------------------------------
   12. Why MiYOSMART - yellow block (Section 06)
   -------------------------------------------------------------------------- */
:root:root:root body .why{ position: relative; overflow: hidden; background: var(--blue); }
:root:root:root body .why h2{ color: var(--white); }
:root:root:root body .why .eyebrow{ color: rgba(255, 255, 255, 0.92); }
:root:root:root body .why .section-head p:not(.eyebrow){ color: rgba(255, 255, 255, 0.8); }

:root:root:root body .why__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
}

:root:root:root body .benefit{ position: relative; padding-top: var(--s5); border-top: 3px solid rgba(255, 255, 255, 0.35); }
:root:root:root body .benefit__num{
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 4.5vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: var(--s3);
  color: var(--sun);
}
:root:root:root body .benefit svg{ width: 34px; height: 34px; margin-bottom: var(--s3); color: var(--sun-soft); }
:root:root:root body .benefit h3{ font-size: 1.25rem; margin-bottom: 0.45rem; color: var(--white); }
:root:root:root body .benefit p{ font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.8); margin: 0; }

:root:root:root body .why__dots{
  width: 150px; height: 130px;
  top: 12%; right: 3%;
  background-image: radial-gradient(rgba(255, 255, 255, 0.28) 2.6px, transparent 2.7px);
}
@media (max-width: 1080px) {
  :root:root:root body .why__dots{ top: 4%; right: 4%; width: 120px; height: 104px; }
}
@media (max-width: 720px) {
  :root:root:root body .why__dots{ display: none; }
}

/* --------------------------------------------------------------------------
   13. Science & trust (Section 07)
   -------------------------------------------------------------------------- */
:root:root:root body .stats__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

/* Evidence band: the argument on the left, the figures stacked beside it as
   rows rather than three columns under a centred heading. */
:root:root:root body .evidence{
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
:root:root:root body .evidence__intro h2{ color: var(--white); }
:root:root:root body .evidence__intro > p{ color: rgba(255, 255, 255, 0.82); }
:root:root:root body .evidence__intro .eyebrow{ color: rgba(255, 255, 255, 0.78); }

:root:root:root body .stats__grid.stats__grid--rows{
  grid-template-columns: 1fr;
  gap: 0;
  margin-bottom: 0;
}
/* Figure and copy share a row; the numeral column is wide enough for "150+" */
:root:root:root body .stats__grid.stats__grid--rows .stat{
  display: grid;
  grid-template-columns: minmax(0, 11.5rem) 1fr;   /* holds "15 million" on one line */
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: start;   /* tops level; baseline would tower the numeral above the heading */
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  padding: clamp(1.4rem, 2.8vw, 2rem) 0;
}
:root:root:root body .stats__grid.stats__grid--rows .stat:last-child{ border-bottom: 1px solid rgba(255, 255, 255, 0.28); }
:root:root:root body .stats__grid.stats__grid--rows .stat__num{
  margin-bottom: 0;
  font-size: clamp(2.4rem, 4.4vw, 3.5rem);
  /* Line box pulled close to the cap height so the numeral's cap sits level
     with the heading's rather than a half-leading below it */
  line-height: 0.75;
}
/* Unit word set small beside the numeral, so the figure keeps its weight and
   the pair still fits the column */
:root:root:root body .stat__unit{
  /* Inline, not inline-block: an inline-block carries its own line box, whose
     baseline dropped below the numeral's once line-height was tightened */
  display: inline;
  vertical-align: baseline;
  margin-left: 0.28em;
  font-size: 0.42em;
  letter-spacing: -0.01em;
}
:root:root:root body .stats__grid.stats__grid--rows .stat__body p{ color: rgba(255, 255, 255, 0.8); }
/* Source footnote under a figure, set quieter than the body line above it */
/* Selector carries the row-variant prefix because `.stat p` (0,1,1) and
   `.stats__grid--rows .stat__body p` (0,3,1) both outrank a lone class and
   were holding the footnote at body size. */
:root:root:root body .stats__grid.stats__grid--rows .stat__body p.stat__note{
  margin-top: var(--s3);
  font-size: 0.6875rem;      /* 11px: footnote scale, a step under --fs-xs */
  line-height: 1.5;
  letter-spacing: 0.005em;
  color: rgba(255, 255, 255, 0.66);   /* lifted slightly to hold up at 11px */
}

/* --- MiYOSMART iQ film + the two supporting statements beneath it ---------
   Native controls rather than a custom overlay: the poster carries the brand
   frame, and the browser's own play affordance needs no JS to stay reliable. */
/* Sits between the result note and the brief, so it needs air on both sides */
:root:root:root body .filmbox{ margin: clamp(2.5rem, 5vw, 4rem) 0; }
:root:root:root body .filmbox__video{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--blue-ink);
}
/* --- Video testimonials: one stage plus a rail of poster thumbnails --------
   Same reasoning as .filmbox — native controls, no custom overlay. The rail is
   a column beside the stage on desktop and a scrollable row once they stack. */
:root:root:root body .vfilm{
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(11rem, 20%, 17rem);
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: start;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
/* No radius anywhere: the theme's corners are all square (--r-* are 0) */
:root:root:root body .vfilm__stage{ overflow: hidden; }
:root:root:root body .vfilm__video{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--blue-ink);
  /* The posters (1280x701, 1280x709) and the films are a shade wider than 16/9, so
     letterbox bars appeared above and below the picture and pushed it out of line
     with the rail beside it. Fill the box instead: the crop is under 1% a side. */
  object-fit: cover;
  object-position: center;
}
:root:root:root body .vfilm__rail{
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
}
:root:root:root body .vfilm__thumb{
  /* A button, so it needs the usual control resets before it can be a poster */
  display: block;
  padding: 0;
  border: 0;
  background: none;
  overflow: hidden;
  cursor: pointer;
  /* The band is dark, so an unselected poster is dimmed rather than outlined */
  opacity: 0.62;
  transition: opacity var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
:root:root:root body .vfilm__thumb img{ width: 100%; height: auto; }
:root:root:root body .vfilm__thumb:hover, :root:root:root body .vfilm__thumb:focus-visible{ opacity: 1; transform: translateY(-2px); }
:root:root:root body .vfilm__thumb.is-active{
  opacity: 1;
  box-shadow: 0 0 0 3px var(--sun);
}

@media (max-width: 900px) {
  :root:root:root body .vfilm{ grid-template-columns: minmax(0, 1fr); }
  /* Horizontal strip below the stage: two posters side by side, scrollable if
     the list ever grows past what the viewport can hold. */
  :root:root:root body .vfilm__rail{
    grid-auto-flow: column;
    grid-auto-columns: minmax(9rem, 1fr);
    overflow-x: auto;
    padding-bottom: var(--s3);
  }
}

:root:root:root body .brief-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 5vw, 4.5rem);
  /* The block above is usually a card grid or a figure, neither of which carries a
     bottom margin, so these headings sat flush against the card boxes. Same step as
     .split-head / .section-head, so the section keeps one vertical rhythm. Collapses
     with any bottom margin the previous block does have, so it never doubles up. */
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
:root:root:root body .brief h3{
  font-size: var(--fs-h3);
  color: var(--blue);
  /* was 0: the removed ::after rule supplied the gap below the heading */
  margin-bottom: var(--s5);
  text-wrap: balance;
}
:root:root:root body .brief p{ color: var(--ink-60); margin: 0; max-width: 38.064em; }

:root:root:root body .result-note--inline{
  max-width: none;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  text-align: left;
}

:root:root:root body .stat{ border-top: 2px solid rgba(255, 255, 255, 0.28); padding-top: var(--s5); }
:root:root:root body .stat__num{
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-stat);
  line-height: 0.92;
  letter-spacing: -0.045em;
  color: var(--sun);
  margin-bottom: var(--s3);
}
:root:root:root body .stat__num sup{ font-size: 0.42em; top: -0.85em; margin-left: 0.06em; color: rgba(255, 255, 255, 0.6); }
:root:root:root body .stat h3{ font-size: 1.125rem; margin-bottom: 0.35rem; }
:root:root:root body .stat p{ font-size: var(--fs-sm); margin: 0; }

:root:root:root body .awards{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
:root:root:root body .award{
  display: flex;
  gap: var(--s5);
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r);
  padding: clamp(1rem, 2.2vw, 1.5rem);
}
:root:root:root body .award img{ width: 84px; height: auto; flex: none; }
:root:root:root body .award h4{ font-size: 1.0625rem; margin-bottom: 0.25rem; color: var(--white); }
:root:root:root body .award p{ font-size: var(--fs-xs); margin: 0; }

:root:root:root body .disclaimer{
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: var(--s5);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78) !important;
  max-width: 64.416em;
}
:root:root:root body .disclaimer a{ color: var(--sun-soft); }

/* --------------------------------------------------------------------------
   14. Childhood without limits (Section 08)
   -------------------------------------------------------------------------- */
:root:root:root body .life__grid{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: clamp(150px, 15.5vw, 220px);
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
}
:root:root:root body .life__cell{
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--cream-deep);
}
:root:root:root body .life__cell img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--t-slow); }
:root:root:root body .life__cell:hover img{ transform: scale(1.05); }
:root:root:root body .life__cell figcaption{
  position: absolute;
  left: var(--s4); bottom: var(--s4);
  background: var(--white);
  border-radius: var(--r-pill);
  padding: 0.4rem 0.95rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
  color: var(--blue);
  box-shadow: var(--shadow-sm);
}
:root:root:root body .life__cell--a{ grid-column: span 3; grid-row: span 2; }
:root:root:root body .life__cell--b{ grid-column: span 3; }
:root:root:root body .life__cell--c{ grid-column: span 3; }
:root:root:root body .life__cell--d{ grid-column: span 2; }
:root:root:root body .life__cell--e{ grid-column: span 2; }
:root:root:root body .life__cell--f{ grid-column: span 2; }

:root:root:root body .life__pull{
  grid-column: 1 / -1;
  grid-row: span 1;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 1.6fr 1fr;
  align-items: center;
  align-content: center;
  gap: var(--s3);
  background: var(--sun);
  border-radius: var(--r);
  padding: clamp(1.4rem, 2.8vw, 2.1rem);
}
:root:root:root body .life__pull strong{
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--blue-ink);
}
:root:root:root body .life__pull span{ font-size: var(--fs-sm); color: rgba(11, 37, 89, 0.78); }

/* --------------------------------------------------------------------------
   15. Find a specialist (Section 09)
   -------------------------------------------------------------------------- */
:root:root:root body .finder{ position: relative; overflow: hidden; }

:root:root:root body .finder__panel{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--blue);
  color: var(--white);
  box-shadow: var(--shadow-lg);
}
:root:root:root body .finder__body{ padding: clamp(2rem, 4.5vw, 3.75rem); }
:root:root:root body .finder__body h2, :root:root:root body .finder__body h3{ color: var(--white); }
:root:root:root body .finder__body h3{ font-size: var(--fs-h2); }
:root:root:root body .finder__body p{ color: rgba(255, 255, 255, 0.82); }

:root:root:root body .finder__steps{
  display: grid;
  gap: var(--s4);
  margin: var(--s6) 0;
  padding: 0;
  list-style: none;
  counter-reset: fs;
}
:root:root:root body .finder__steps li{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s4);
  align-items: center;
  margin: 0;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.85);
}
:root:root:root body .finder__steps li::before{
  counter-increment: fs;
  content: counter(fs, decimal-leading-zero);
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: var(--sun);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-xs);
}

:root:root:root body .finder__media{ position: relative; min-height: 340px; }
:root:root:root body .finder__media img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

:root:root:root body .finder__blob{ width: 380px; aspect-ratio: 1; top: -20%; left: -14%; background: var(--sand); }

/* --------------------------------------------------------------------------
   16. Parent education (Section 10)
   -------------------------------------------------------------------------- */
:root:root:root body .guides__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

:root:root:root body .guide{
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  text-decoration: none;
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
:root:root:root body .guide:hover{ transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--blue-soft); }
:root:root:root body .guide__img{ aspect-ratio: 16 / 10; width: 100%; object-fit: cover; }
:root:root:root body .guide__body{ padding: clamp(1.25rem, 2.4vw, 1.75rem); display: flex; flex-direction: column; flex: 1; }
:root:root:root body .guide__tag{
  display: inline-block;
  align-self: flex-start;
  background: var(--sun-soft);
  color: var(--blue-ink);
  border-radius: var(--r-pill);
  padding: 0.28rem 0.75rem;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: var(--s3);
}
:root:root:root body .guide h3{ font-size: 1.25rem; margin-bottom: 0.5rem; }
:root:root:root body .guide p{ font-size: var(--fs-sm); color: var(--ink-60); margin-bottom: var(--s4); }
:root:root:root body .guide__more{
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  transition: gap var(--t-fast);
}
:root:root:root body .guide:hover .guide__more{ gap: 0.8rem; }
:root:root:root body .guide__more{ color: var(--blue); }
:root:root:root body .guide__more svg{ width: 15px; height: 15px; }

/* Full-width lead card, so the remaining cards form two clean rows of three */
:root:root:root body .guide--feature{ grid-column: 1 / -1; flex-direction: row; }
:root:root:root body .guide--feature .guide__img{ aspect-ratio: 16 / 9; width: 42%; }
:root:root:root body .guide--feature .guide__body{
  width: 58%;
  justify-content: center;
  padding: clamp(1.75rem, 3.4vw, 2.75rem);
}
:root:root:root body .guide--feature h3{ font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
:root:root:root body .guide--feature p{ max-width: 40.992em; }

/* --------------------------------------------------------------------------
   17. FAQ (Section 11)
   -------------------------------------------------------------------------- */
:root:root:root body .faq{ max-width: 880px; margin-inline: auto; }

:root:root:root body .faq__item{
  border-bottom: 1px solid var(--line);
}
:root:root:root body .faq__item:first-child{ border-top: 1px solid var(--line); }

/* The question button is wrapped in an <h3> for document outline. The global
   h1–h4 rule gives it margin-bottom: var(--s4), which lands between the button
   and the item's bottom border — so every closed question sat 1rem closer to
   the line above it than the line below. Zero it here and hand that 1rem to the
   open panel instead, so the closed rhythm is symmetric and the open state is
   spaced exactly as before. */
:root:root:root body .faq__item > h3{ margin: 0; }

:root:root:root body .faq__q{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s5);
  width: 100%;
  padding: clamp(1.25rem, 2.5vw, 1.65rem) 0;
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.0625rem, 1.7vw, 1.25rem);
  letter-spacing: -0.015em;
  color: var(--blue);
  transition: color var(--t-fast);
}
:root:root:root body .faq__q:hover{ color: var(--blue-deep); }

:root:root:root body .faq__icon{
  position: relative;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--sun-soft);
  flex: none;
  transition: background var(--t-fast), transform var(--t);
}
:root:root:root body .faq__icon::before, :root:root:root body .faq__icon::after{
  content: "";
  position: absolute;
  background: var(--blue-ink);
  border-radius: 0;
  transition: transform var(--t), opacity var(--t-fast);
}
:root:root:root body .faq__icon::before{ width: 14px; height: 2px; }
:root:root:root body .faq__icon::after{ width: 2px; height: 14px; }
:root:root:root body .faq__q[aria-expanded="true"] .faq__icon{ background: var(--sun); }
:root:root:root body .faq__q[aria-expanded="true"] .faq__icon::after{ transform: scaleY(0); opacity: 0; }

:root:root:root body .faq__a{
  overflow: hidden;
  height: 0;
  transition: height var(--t);
}
:root:root:root body .faq__a-inner{ padding: var(--s4) clamp(2rem, 5vw, 4rem) clamp(1.35rem, 2.6vw, 1.85rem) 0; }
:root:root:root body .faq__a-inner p{ font-size: var(--fs-sm); color: var(--ink-60); }
:root:root:root body .faq__a-inner p:last-child{ margin-bottom: 0; }

/* --------------------------------------------------------------------------
   18. Final CTA (Section 12)
   -------------------------------------------------------------------------- */
:root:root:root body .final{
  position: relative;
  overflow: hidden;
  min-height: clamp(460px, 62vh, 640px);
  display: grid;
  align-items: center;
  background: var(--cream);
}
:root:root:root body .final__bg{ position: absolute; inset: 0; z-index: 0; }
:root:root:root body .final__bg img{ width: 100%; height: 100%; object-fit: cover; object-position: 32% 45%; }

/* Directional overlay: solid only behind the copy (Rule 2.6.2) */
:root:root:root body .final__bg::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to left,
    rgba(246, 239, 228, 0.96) 0%,
    rgba(246, 239, 228, 0.93) 29%,
    rgba(246, 239, 228, 0.4) 37%,
    rgba(246, 239, 228, 0.12) 49%,
    rgba(246, 239, 228, 0) 64%
  );
}

:root:root:root body .final__inner{ position: relative; z-index: 2; padding-block: clamp(3.5rem, 8vw, 6rem); }
:root:root:root body .final__card{ max-width: 520px; margin-left: auto; }
:root:root:root body .final__title{
  font-size: clamp(2.5rem, 5.6vw, 4.25rem);
  font-weight: 800;
  letter-spacing: -0.038em;
  line-height: 1;
  margin-bottom: var(--s5);
}
:root:root:root body .final__card p:not(.eyebrow){ font-size: var(--fs-lead); color: var(--ink-80); margin-bottom: var(--s6); }
:root:root:root body .final__ring{ width: 220px; height: 220px; top: 10%; left: 6%; border-color: rgba(249, 178, 51, 0.95); }
:root:root:root body .final__dots{ width: 120px; height: 110px; bottom: 12%; left: 26%; }

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */
:root:root:root body .site-footer{
  background: var(--blue);
  color: rgba(255, 255, 255, 0.85);
  padding-block: clamp(3rem, 6vw, 5rem) var(--s6);
  font-size: var(--fs-sm);
}

:root:root:root body .footer__top{
  display: grid;
  /* Four columns carrying roughly equal weight: the brand block holds the
     social row so it is not left short, and the two link columns run four
     items each instead of six against two. */
  grid-template-columns: 1.25fr 0.8fr 0.8fr 1.15fr;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
:root:root:root body .footer__brandcol{ display: flex; flex-direction: column; align-items: flex-start; }

/* Sign-up and social on one strip, so no link column is left with a hole
   under it and the form gets a usable width */
/* Sign-up strip: label and note on the left, the field on the right, both
   stretching, so the row fills its width instead of leaving a hole in the
   middle the way a left-aligned form and far-right icons did. */
:root:root:root body .footer__signup{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
  align-items: center;
  gap: clamp(1.25rem, 3vw, 3rem);
  margin: 0;
  padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
:root:root:root body .footer__signup-copy h4{ margin-bottom: 0.35rem; }
:root:root:root body .footer__signup .newsletter__note{ margin: 0; }
:root:root:root body .footer__signup .newsletter__row{ margin: 0; }

@media (max-width: 860px) {
  :root:root:root body .footer__signup{ grid-template-columns: 1fr; }
}

/* HOYA wordmark alone - knocked out to white for the dark footer */
:root:root:root body .footer__brand{ display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; margin-bottom: var(--s5); }
/* Matches the header mark: same 92px width, inverted to read white on navy */
:root:root:root body .footer__brand img{ width: 92px; height: auto; filter: brightness(0) invert(1); }

:root:root:root body .footer__intro{ max-width: 24.888em; margin-bottom: var(--s5); }

/* Sits under the brand intro, closing the first column */
:root:root:root body .footer__social{ display: flex; gap: 0.6rem; margin-top: auto; padding-top: var(--s5); }
:root:root:root body .footer__social a{
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: rgba(255, 255, 255, 0.88);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
:root:root:root body .footer__social a:hover{ background: var(--sun); color: var(--blue-ink); border-color: var(--sun); }
:root:root:root body .footer__social svg{ width: 18px; height: 18px; }

:root:root:root body .footer__col h4{
  color: var(--white);
  font-size: 0.8125rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: var(--s4);
}
:root:root:root body .footer__col ul{ list-style: none; margin: 0; padding: 0; }
:root:root:root body .footer__col li{ margin-bottom: 0.65rem; }
:root:root:root body .footer__col a{
  text-decoration: none;
  color: rgba(255, 255, 255, 0.85);
  transition: color var(--t-fast);
}
:root:root:root body .footer__col a:hover{ color: var(--sun-soft); }

:root:root:root body .footer__contact li{
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  line-height: 1.55;
}
:root:root:root body .footer__contact svg{ width: 17px; height: 17px; color: var(--sun); flex: none; margin-top: 4px; }

:root:root:root body .footer__bottom{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s4);
  padding-top: var(--s6);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.82);
}
:root:root:root body .footer__bottom a{ color: rgba(255, 255, 255, 0.82); }

:root:root:root body .footer__legal{ display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* --------------------------------------------------------------------------
   20. Sticky mobile CTA
   -------------------------------------------------------------------------- */
:root:root:root body .sticky-cta{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  gap: 0.6rem;
  padding: 0.7rem var(--gutter) calc(0.7rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform var(--t);
}
:root:root:root body .sticky-cta.is-visible{ transform: translateY(0); }
:root:root:root body .sticky-cta .btn{ flex: 1; }

/* --------------------------------------------------------------------------
   21. Inner-page components
   -------------------------------------------------------------------------- */
:root:root:root body .page-hero{
  position: relative;
  overflow: hidden;
  background: var(--cream);
  padding-block: clamp(3rem, 6.5vw, 5.5rem);
}
:root:root:root body .page-hero__inner{ position: relative; z-index: 2; max-width: 760px; }
/* Product mark leading the hero, standing in for the eyebrow: the logo already
   names the subject, so a "Technology" label above it would only repeat the
   breadcrumb directly above. */
:root:root:root body .page-hero__mark{
  display: block;
  width: auto;
  height: clamp(26px, 2.9vw, 36px);
  /* Sits nearer the h1 than the breadcrumb above, so it groups with the title
     rather than floating between the two */
  margin: clamp(0.6rem, 1.5vw, 1.1rem) 0 clamp(0.85rem, 1.6vw, 1.15rem);
}
:root:root:root body .page-hero h1{ margin-bottom: var(--s4); }
/* Wordmark-as-title: the h1 carries only the semantics, the image its own spacing */
:root:root:root body .page-hero__mark-title{ margin: 0; }

/* Product wordmark standing in for the page title. The heading keeps its
   semantics; the name lives in the image's alt text. */
:root:root:root body .page-hero__logo img{
  display: block;
  width: clamp(230px, 34vw, 430px);
  height: auto;
}
:root:root:root body .page-hero p:not(.eyebrow){ font-size: var(--fs-lead); color: var(--ink-60); }
/* Heroes carry no buttons by default; where one does (Club -> log in) the row
   needs its own top gap, since .btn-row is margin-free everywhere else. */
:root:root:root body .page-hero__inner .btn-row{ margin-top: var(--s5); }
/* Page heroes borrow the homepage's shape vocabulary: a dotted disc overlapped
   by a half-round, rather than a flat rectangle */
:root:root:root body .page-hero__disc{ width: clamp(200px, 22vw, 300px); aspect-ratio: 1; top: -22%; right: 6%; opacity: .85; }
:root:root:root body .page-hero__half{
  width: clamp(120px, 13vw, 180px);
  aspect-ratio: 1 / 2;
  top: 12%; right: 0;
  background: var(--blue);
  border-radius: 999px 0 0 999px;
  opacity: .9;
}
@media (max-width: 720px) {
  :root:root:root body .page-hero__disc, :root:root:root body .page-hero__half{ display: none; }
}

/* A product illustration pinned to the claim it evidences, so the picture
   reads as proof of the spec rather than decoration beside it. */
:root:root:root body .spec-figure{
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: clamp(1rem, 2.4vw, 1.6rem);
  align-items: center;
  margin: var(--s5) 0 0;
  padding: clamp(1.1rem, 2.4vw, 1.5rem);
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: var(--r);
}
:root:root:root body .spec-figure img{ display: block; width: 100%; height: auto; }
:root:root:root body .spec-figure figcaption{
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink-60);
}
@media (max-width: 420px) {
  :root:root:root body .spec-figure{ grid-template-columns: 1fr; justify-items: start; }
  :root:root:root body .spec-figure img{ max-width: 104px; }
}

/* Hero carrying a key visual: the photograph replaces the abstract shapes,
   which would otherwise compete with it for the same right-hand space. */
/* Full-bleed hero: the photograph fills the section and the copy sits on a
   directional scrim over its empty side, so the blue wordmark keeps its
   contrast without a flat veil over the whole picture. */
:root:root:root body .page-hero--full{
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(400px, 48vw, 600px);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  background: var(--cream);
}
:root:root:root body .page-hero--full .page-hero__bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 45%;
  z-index: 0;
}
:root:root:root body .page-hero--full::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* full strength past the copy (which reaches ~47%), then a quick fall-off */
  background: linear-gradient(100deg,
    rgba(246, 239, 228, 0.97) 0%,
    rgba(246, 239, 228, 0.95) 44%,
    rgba(246, 239, 228, 0.60) 60%,
    rgba(246, 239, 228, 0) 78%);
}
:root:root:root body .page-hero--full > .wrap{ position: relative; z-index: 2; }
:root:root:root body .page-hero--full .page-hero__inner{ max-width: 32.208em; }
:root:root:root body .page-hero--full .page-hero__disc, :root:root:root body .page-hero--full .page-hero__half{ display: none; }

@media (max-width: 900px) {
  /* narrow: the copy needs the whole width, so the scrim runs top to bottom */
  :root:root:root body .page-hero--full{ min-height: 0; }
  :root:root:root body .page-hero--full .page-hero__bg{ object-position: 68% 40%; }
  :root:root:root body .page-hero--full::after{
    background: linear-gradient(to bottom,
      rgba(246, 239, 228, 0.97) 0%,
      rgba(246, 239, 228, 0.94) 55%,
      rgba(246, 239, 228, 0.72) 100%);
  }
  :root:root:root body .page-hero--full .page-hero__inner{ max-width: none; }
}

:root:root:root body .page-hero--media .page-hero__disc, :root:root:root body .page-hero--media .page-hero__half{ display: none; }
:root:root:root body .page-hero__grid{
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
:root:root:root body .page-hero--media .page-hero__inner{ max-width: none; }
:root:root:root body .page-hero__media{ position: relative; z-index: 2; }
:root:root:root body .page-hero__media img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r);
}
@media (max-width: 900px) {
  :root:root:root body .page-hero__grid{ grid-template-columns: 1fr; }
  :root:root:root body .page-hero__media{ max-width: 520px; }
}

:root:root:root body .breadcrumb{
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  list-style: none;
  margin: 0 0 var(--s5);
  padding: 0;
  font-size: var(--fs-xs);
  color: var(--ink-40);
}
:root:root:root body .breadcrumb li{ margin: 0; display: flex; align-items: center; gap: 0.45rem; }
:root:root:root body .breadcrumb li + li::before{ content: "/"; color: var(--ink-40); }
:root:root:root body .breadcrumb a{ color: var(--ink-60); text-decoration: none; }
:root:root:root body .breadcrumb a:hover{ color: var(--blue); text-decoration: underline; }

:root:root:root body .prose{ max-width: 49.776em; }
:root:root:root body .prose h2{ margin-top: var(--s8); }
:root:root:root body .prose h2:first-child{ margin-top: 0; }
:root:root:root body .prose h3{ margin-top: var(--s6); }
:root:root:root body .prose ul{ padding-left: 1.35rem; }
:root:root:root body .prose li{ color: var(--ink-80); }

:root:root:root body .callout{
  background: var(--sun-mist);
  border: 1px solid var(--sun-soft);
  border-left: 5px solid var(--sun);
  border-radius: var(--r);
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  margin-block: var(--s6);
}
:root:root:root body .callout h3{ font-size: 1.125rem; margin-bottom: 0.4rem; }
:root:root:root body .callout p{ font-size: var(--fs-sm); color: var(--ink-80); margin: 0; }

/* Empty state that carries its own next step in the space to the right. */
:root:root:root body .callout--split{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  padding: clamp(1.4rem, 3vw, 2.1rem);
}
:root:root:root body .callout--split .callout__copy p{ max-width: 42.456em; }
:root:root:root body .callout__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-self: end;
}
@media (max-width: 900px) {
  :root:root:root body .callout--split{ grid-template-columns: 1fr; }
  :root:root:root body .callout__actions{ justify-self: start; }
}
@media (max-width: 420px) {
  :root:root:root body .callout__actions .btn{ flex: 1 1 100%; justify-content: center; }
}

/* --- Practice locator: search panel beside a clustered map ---------------- */
:root:root:root body .locator{
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 1px;                       /* the hairline between panel and map */
  margin-top: clamp(2rem, 4vw, 3rem);
  background: var(--line);
  border: 1px solid var(--line);
  /* A fixed frame is what lets the result list scroll inside the panel
     instead of stretching the map to the height of 959 rows. */
  height: clamp(560px, 74vh, 760px);
}
:root:root:root body .locator__panel{
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  background: var(--white);
  min-height: 0;
}

:root:root:root body .locator__search{ display: flex; gap: 0; }
:root:root:root body .locator__search input{
  flex: 1;
  min-width: 0;
  min-height: 52px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-right: 0;
  background: var(--white);
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--ink);
}
:root:root:root body .locator__search input:focus{ outline: 2px solid var(--blue); outline-offset: -2px; }
:root:root:root body .locator__submit{
  display: grid;
  place-items: center;
  width: 52px;
  min-height: 52px;
  flex: none;
  border: 1px solid var(--blue);
  background: var(--blue);
  color: var(--white);
  transition: background var(--t-fast);
}
:root:root:root body .locator__submit:hover{ background: var(--blue-deep); border-color: var(--blue-deep); }
:root:root:root body .locator__submit svg{ width: 20px; height: 20px; }

:root:root:root body .locator__filters{ display: flex; gap: var(--s3); }
:root:root:root body .locator__filters select{
  flex: 1;
  min-width: 0;
  min-height: 44px;
  /* The native arrow sits hard against the border, so it is replaced with a
     chevron inset from the edge. The right padding keeps long state names
     clear of it. */
  appearance: none;
  -webkit-appearance: none;
  padding: 0.5rem 2.75rem 0.5rem 0.9rem;
  border: 1px solid var(--line);
  background-color: var(--white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.5 7 7.5 13 1.5' stroke='%235c6a8c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.95rem center;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--ink-80);
}
:root:root:root body .locator__filters select:focus{ outline: 2px solid var(--blue); outline-offset: -2px; }
:root:root:root body .locator__near{
  flex: none;
  min-height: 44px;
  padding: 0.5rem 1rem;
  border: 1px solid var(--blue);
  background: transparent;
  color: var(--blue);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  transition: background var(--t-fast), color var(--t-fast);
}
:root:root:root body .locator__near:hover{ background: var(--blue); color: var(--white); }
:root:root:root body .locator__near:disabled{ opacity: 0.6; }

:root:root:root body .locator__count{
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin: 0;
}

/* The selected practice, mirrored from whichever view was clicked */
:root:root:root body .locator__detail{
  border-left: 4px solid var(--sun);
  background: var(--blue-mist);
  padding: clamp(0.9rem, 1.8vw, 1.25rem);
}
:root:root:root body .locator__detail-label{
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sun-dark);
  margin: 0 0 0.35rem;
}
:root:root:root body .locator__detail h3{ font-size: 1.0625rem; margin: 0 0 0.35rem; }
/* Matches the address size in the result list, so selecting a practice does not
   suddenly enlarge the same text */
:root:root:root body .locator__detail-address{
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--ink-60);
  margin: 0 0 var(--s3);
}
/* Phone and directions sit on one row, wrapping only if the panel is narrow */
:root:root:root body .locator__detail-line{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem clamp(1rem, 2vw, 1.75rem);
  margin: 0.25rem 0 0;
  font-size: var(--fs-sm);
}

:root:root:root body .locator__list{
  flex: 1 1 auto;
  min-height: 120px;
  overflow-y: auto;
  border-top: 1px solid var(--line);
  overscroll-behavior: contain;
}
:root:root:root body .locator__item{
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--s4) 0;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: none;
  transition: background var(--t-fast), padding-left var(--t-fast);
}
:root:root:root body .locator__item:hover{ background: var(--blue-mist); padding-left: var(--s3); }
:root:root:root body .locator__item.is-selected{
  background: var(--blue-mist);
  padding-left: var(--s3);
  box-shadow: inset 4px 0 0 var(--blue);
}
:root:root:root body .locator__item-name{
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--blue-ink);
  margin-bottom: 0.2rem;
}
:root:root:root body .locator__item-address{
  display: block;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--ink-60);
}
:root:root:root body .locator__item-distance{
  display: block;
  margin-top: 0.3rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--sun-dark);
}
:root:root:root body .locator__more{
  align-self: flex-start;
  padding: 0.6rem 1rem;
  border: 1px solid var(--line);
  background: var(--white);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--blue);
}
:root:root:root body .locator__more:hover{ border-color: var(--blue); }

/* Leaflet's own panes and controls carry z-index values up to 1000, which is
   above the sticky header (100). `isolation` makes the map its own stacking
   context, so all of that stays contained and the header always paints over
   the map when the page scrolls past it. */
:root:root:root body .locator__map{
  height: 100%;
  min-height: 0;
  background: var(--blue-mist);
  position: relative;
  z-index: 0;
  isolation: isolate;
}
:root:root:root body .locator__note, :root:root:root body .locator__source{
  grid-column: 1 / -1;
  /* clears the base p { max-width: 45.384em } so the note runs the full wrap width */
  max-width: none;
  font-size: var(--fs-xs);
  color: var(--ink-40);
}
:root:root:root body .locator__note{ background: var(--white); padding: var(--s4); margin: 0; }
:root:root:root body .locator__source{ margin: var(--s4) 0 0; }

/* The winners section and the CTA section that follows it are both untinted,
   so their two full --section-y paddings read as one oversized void under the
   map. Trimming the winners section's bottom padding closes it without
   touching the CTA band's own breathing room. Scoped to this one section id
   (miyosmart-expert-award.html); every other .section keeps the site rhythm. */
:root:root:root body #find-an-expert{ padding-bottom: clamp(1.5rem, 2.6vw, 2.5rem); }

/* Map furniture, restyled to the site palette.

   Both selectors are doubled up with .leaflet-marker-icon on purpose. Leaflet's
   own stylesheet loads after this one and sets `.leaflet-marker-icon {display:
   block}` at the same specificity, which would otherwise win and leave the
   count sitting at the top-left of the disc instead of centred in it. */
:root:root:root body .leaflet-marker-icon.locator__pin{
  display: grid;
  place-items: center;
}
:root:root:root body .locator__pin span{
  display: block;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 3px solid var(--white);
  background: var(--blue);
  box-shadow: 0 1px 4px rgba(11, 37, 89, 0.45);
}
:root:root:root body .leaflet-marker-icon.locator__cluster{
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(12, 80, 200, 0.85);
  border: 3px solid rgba(255, 255, 255, 0.85);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.8125rem;
  line-height: 1;
  text-align: center;
}
:root:root:root body .locator__cluster span{ display: block; }
:root:root:root body .leaflet-container{ font: inherit; }
:root:root:root body .leaflet-popup-content{ font-size: var(--fs-sm); line-height: 1.55; }
:root:root:root body .leaflet-popup-content strong{ font-family: var(--font-display); color: var(--blue-ink); }

:root:root:root body .tile-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
:root:root:root body .tile{
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.4rem, 2.8vw, 2rem);
}
/* Trailing action in a tile: pinned to the bottom so the buttons across a row
   sit on one line however much copy each card carries. Needs to outrank the
   `.tile p { margin: 0 }` rule further down, hence the compound selector. */
:root:root:root body .tile .tile__action{
  margin: auto 0 0;
  padding-top: var(--s4);
}
/* Stacked variant: the same cards read down one column beside a photograph */
:root:root:root body .tile-grid--stack{
  grid-template-columns: 1fr;
  gap: clamp(0.85rem, 1.6vw, 1.15rem);
  align-content: start;
}
/* Direct child only: a descendant selector here also caught the arrow inside
   a .btn, painting it blue-on-blue at 32px and inflating the button. */
:root:root:root body .tile > svg{ width: 32px; height: 32px; color: var(--blue); margin-bottom: var(--s4); }
/* Illustration tiles: each icon carries a small scene rather than a single
   glyph, so 32px would lose the detail. */
:root:root:root body .tile--illus > svg{ width: 56px; height: 56px; }
/* Supplied artwork sits on the same baseline as the drawn icons beside it */
/* align-self keeps the auto-width image from stretching across the flex
   column, which made object-fit centre the artwork instead of ranging left */
:root:root:root body .tile__ico{ width: auto; height: 34px; object-fit: contain; align-self: flex-start; margin-bottom: var(--s4); }
/* Illustration tiles carry HOYA's own scene artwork, which needs the same room
   as the drawn icons it sits beside */
:root:root:root body .tile--illus .tile__ico{ height: 56px; }
:root:root:root body .tile h3{ font-size: 1.1875rem; margin-bottom: 0.45rem; }
:root:root:root body .tile p{ font-size: var(--fs-sm); color: var(--ink-60); margin: 0; }

:root:root:root body .timeline{ list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s6); }
:root:root:root body .timeline li{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s5);
  margin: 0;
  align-items: start;
}
:root:root:root body .timeline__num{
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--sun);
  color: var(--blue-ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  flex: none;
}

/* --- Examination schedule: a cream panel, head across the top, a contained
       photograph beside the checklist ------------------------------------- */
:root:root:root body .exam-panel{
  background: var(--blue-mist);
  padding: clamp(1.75rem, 4vw, 3.5rem);
}
:root:root:root body .exam-panel__lead{
  font-size: var(--fs-lead);
  color: var(--ink-60);
  max-width: 45.384em;
  margin: 0;
}
:root:root:root body .exam-panel__body{
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  /* same step as .section-head, so the panel opens like every other section */
  margin-top: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}
/* Held to a 4:3 crop and to the top of the row, so the picture supports the
   list instead of growing to its height */
:root:root:root body .exam-panel__media{ margin: 0; align-self: start; }
:root:root:root body .exam-panel__media img{
  display: block;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 30%;
}

:root:root:root body .check-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.1rem, 2.2vw, 1.75rem) clamp(1.5rem, 3vw, 2.5rem);
}
:root:root:root body .check-list li{
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: var(--s4);
  align-items: start;
  margin: 0;
}
:root:root:root body .check-list__mark{
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--sun);
  color: var(--blue);
}
:root:root:root body .check-list__mark svg{ width: 18px; height: 18px; }
:root:root:root body .check-list h3{ font-size: 1.0625rem; color: var(--blue); margin-bottom: 0.2rem; }
:root:root:root body .check-list p{ font-size: var(--fs-sm); color: var(--ink-60); margin: 0; }

/* Connected variant: a rule runs between the badges so a list of parallel
   habits reads as one continuous track rather than five loose rows */
:root:root:root body .timeline--linked li{ position: relative; }
:root:root:root body .timeline--linked li:not(:last-child)::before{
  content: "";
  position: absolute;
  left: 27px;                                   /* centre of the 56px badge */
  top: 56px;
  height: calc(100% - 56px + var(--s6));        /* bridges the row gap */
  width: 2px;
  background: var(--sun-soft);
}

:root:root:root body .timeline h3{ font-size: 1.1875rem; margin-bottom: 0.35rem; }
:root:root:root body .timeline p{ font-size: var(--fs-sm); color: var(--ink-60); margin: 0; }


/* Section head paired with a supporting photograph, above a full-width stepper */
:root:root:root body .join-head{
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
:root:root:root body .join-head .section-head{ margin-bottom: 0; max-width: 23.424em; }
:root:root:root body .join-head__media{ margin: 0; }
:root:root:root body .join-head__media img{
  width: 100%;
  aspect-ratio: 2.2 / 1; /* a wide letterbox rather than a standard 16:9 block */
  object-fit: cover;
  object-position: 50% 30%;
}

/* Stepper: the same numbered sequence read left to right as four cards, with a
   rule running between the discs so the order stays obvious across the row. */
:root:root:root body .steps{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
:root:root:root body .steps__item{
  position: relative;
  margin: 0;
  padding: clamp(1.35rem, 2.4vw, 1.9rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--sun);
  box-shadow: var(--shadow-sm);
}
/* the connector picks up in the gap between one card and the next */
:root:root:root body .steps__item:not(:last-child)::after{
  content: "";
  position: absolute;
  top: calc(clamp(1.35rem, 2.4vw, 1.9rem) + 28px);
  left: 100%;
  width: clamp(1rem, 2vw, 1.5rem);
  height: 1px;
  background: var(--sun-soft);
}
:root:root:root body .steps__num{
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--sun);
  color: var(--blue-ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  margin-bottom: var(--s4);
}
:root:root:root body .steps h3{ font-size: 1.1875rem; margin-bottom: 0.4rem; }
:root:root:root body .steps p{ font-size: var(--fs-sm); color: var(--ink-60); margin: 0; }

/* Pale-blue band - a third neutral so consecutive sections never repeat */
:root:root:root body .section--mist{ background: var(--blue-mist); }

/* Deep navy band - the darkest step in the section rhythm */
/* Brand blue, not the muted ink tone the rest of the dark panels use */
:root:root:root body .section--navy{ background: var(--blue); color: var(--white); }
:root:root:root body .section--navy h2, :root:root:root body .section--navy h3, :root:root:root body .section--navy h4{ color: var(--white); }
:root:root:root body .section--navy p:not(.eyebrow){ color: rgba(255, 255, 255, 0.9); }
:root:root:root body .section--navy .eyebrow{ color: rgba(255, 255, 255, 0.92); }
:root:root:root body .section--navy .section-head p:not(.eyebrow){ color: rgba(255, 255, 255, 0.78); }

/* Four-up tile row (falls back to the shared .tile-grid breakpoints below) */
/* --- Visual hygiene: intro held to the left, the five habits stacked right --
   Replaces the single-column timeline, which left the right half of the band
   empty. The intro sticks while the list scrolls past it. */
:root:root:root body .habits{
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
:root:root:root body .habits__intro{ position: sticky; top: calc(var(--header-h) + 2rem); }
:root:root:root body .habits__intro h2{ margin-bottom: var(--s4); }
:root:root:root body .habits__intro p:not(.eyebrow){ color: var(--ink-60); margin: 0; }

:root:root:root body .habits__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(0.75rem, 1.6vw, 1.15rem);
  counter-reset: habit;
}
:root:root:root body .habit{
  counter-increment: habit;
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: clamp(1rem, 2.2vw, 1.5rem);
  align-items: start;
  margin: 0;
  background: var(--white);
  border: 1px solid var(--line);
  padding: clamp(1.25rem, 2.6vw, 1.75rem);
}
:root:root:root body .habit__ico{
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  background: var(--blue-soft);
  color: var(--blue);
}
:root:root:root body .habit__ico svg{ width: 26px; height: 26px; }
/* Counter sits with the heading rather than in its own column, so the card
   stays a clean two-column block */
:root:root:root body .habit__body h3{
  font-size: 1.1875rem;
  color: var(--blue);
  margin-bottom: 0.35rem;
}
:root:root:root body .habit__body h3::before{
  content: counter(habit, decimal-leading-zero);
  margin-right: 0.6rem;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--sun-dark);
  vertical-align: 0.12em;
}
:root:root:root body .habit__body p{ font-size: var(--fs-sm); color: var(--ink-60); margin: 0; }

/* --- Who to see: three role cards plus a closing note, on the blue band ----
   Cards are white on --ink, so the section's white-text inversion has to be
   undone inside them or the copy disappears. */
:root:root:root body .roles{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: stretch;
}
:root:root:root body .role{
  background: var(--white);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
}
:root:root:root body .role__head{
  display: flex;
  align-items: center;
  gap: var(--s4);
  font-size: var(--fs-h3);
  margin-bottom: var(--s5);
}
:root:root:root body .section--ink .role__head{ color: var(--ink); }
:root:root:root body .role__ico{
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  flex: none;
}
:root:root:root body .role__ico svg{ width: 22px; height: 22px; }

:root:root:root body .role__list{ list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
:root:root:root body .role__list li{
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 0.85rem;
  align-items: start;
  margin: 0;
}
:root:root:root body .section--ink .role__list li{
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.5;
  color: var(--blue);
}
:root:root:root body .role__tick{
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--sun);
  color: var(--blue-ink);
  margin-top: 0.05rem;
}
:root:root:root body .role__tick svg{ width: 15px; height: 15px; }

/* Closing note takes the amber ground rather than a fourth white card */
:root:root:root body .role--note{ background: var(--sun); }
:root:root:root body .role__ico--onsun{ margin-bottom: var(--s5); }
:root:root:root body .section--ink .role--note p{
  color: var(--blue-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: 1.45;
  margin: 0;
}

/* --- Everyday wear: the two feature cards, then the coating benefits -------
   Cards sit on white against the section's mist ground, matching the card
   treatment used elsewhere on the site. */
:root:root:root body .wear-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: stretch;   /* both cards run to the same depth */
}
:root:root:root body .wear{
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
}
:root:root:root body .wear h3{ font-size: var(--fs-h3); color: var(--blue); margin-bottom: var(--s4); text-wrap: balance; }
:root:root:root body .wear p{ color: var(--ink-60); margin-bottom: var(--s4); }
/* The expanded acronym reads as a subtitle to the heading above it */
:root:root:root body .wear__expand{ color: var(--ink) !important; font-weight: 600; }
/* Pushed to the foot of the card, so the two images line up on their baseline
   however much copy sits above them */
:root:root:root body .wear__figure{ margin: auto 0 0; padding-top: var(--s5); }
:root:root:root body .wear__figure img{
  display: block;
  width: 100%;
  aspect-ratio: 16 / 11;   /* one box for both, so neither card sets the height */
  object-fit: cover;
}
/* The coating cutaway is a diagram on white: contain it so no label is cropped,
   and the padding disappears against the card */
:root:root:root body .wear__figure--diagram img{ object-fit: contain; }

/* Coating benefits: all five shown at once on a blue band, discs joined by a
   rule so they read as one run rather than five loose items */
:root:root:root body .spark-band{
  margin-top: clamp(1.75rem, 4vw, 3rem);
  background: var(--blue);
  padding: clamp(2rem, 4.5vw, 3.25rem) clamp(1.25rem, 3vw, 2.5rem);
}
:root:root:root body .spark-band h3{
  font-size: var(--fs-h3);
  color: var(--white);
  text-align: center;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
  text-wrap: balance;
}
:root:root:root body .spark-steps{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  --spark-gap: clamp(0.75rem, 2vw, 1.5rem);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--spark-gap);
}
:root:root:root body .spark-step{
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* Connector: edge of one disc to the edge of the next. The right offset has to
   subtract the grid gap too -- percentages resolve against this column alone,
   so without it every line stops a gap short of the disc it is reaching for
   and the run reads as broken segments rather than one thread. */
:root:root:root body .spark-step:not(:last-child)::after{
  content: "";
  position: absolute;
  top: 31px;
  left: calc(50% + 34px);
  right: calc(-50% + 34px - var(--spark-gap));
  height: 2px;
  background: rgba(255, 255, 255, 0.45);
}
/* Each step is a button so the highlight can be moved by click or keyboard */
:root:root:root body .spark-step__btn{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
}
:root:root:root body .spark-step__disc{
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  border-radius: 50%;
  border: 2px solid var(--white);
  color: var(--white);
  margin-bottom: var(--s4);
  flex: none;
  transition: background var(--t-fast), border-color var(--t-fast),
              color var(--t-fast), transform var(--t-fast);
}
:root:root:root body .spark-step__disc svg{ width: 28px; height: 28px; }
/* Hover previews the accent without committing to it */
:root:root:root body .spark-step__btn:hover .spark-step__disc{ background: rgba(255, 255, 255, 0.16); }
:root:root:root body .spark-step__btn:focus-visible{ outline: 2px solid var(--sun); outline-offset: 6px; }
/* The chosen step takes the accent — first in the run by default */
:root:root:root body .spark-step__btn[aria-pressed="true"] .spark-step__disc{
  background: var(--sun);
  border-color: var(--sun);
  color: var(--blue-ink);
  transform: scale(1.06);
}
:root:root:root body .spark-step__label{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--white);
  text-wrap: pretty;
}
:root:root:root body .spark-step__label .ref-mark{ color: var(--sun); }
/* --- D.I.M.S. TED: annotated lens diagram beside the construction panel ----
   The diagram is inline SVG so its labels stay real text and it holds its edge
   at any size; colours come from the tokens rather than being baked in. */
:root:root:root body .ted-split{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: stretch;   /* figure and panel run to the same depth */
}
/* Column of its own: the picture grows to fill whatever height the panel
   opposite sets, and the caption stays pinned beneath it */
:root:root:root body .ted-figure{
  margin: 0;
  display: flex;
  flex-direction: column;
}
:root:root:root body .ted-figure picture{
  display: block;
  flex: 1;
  min-height: 300px;
}
:root:root:root body .ted-diagram{
  display: block;
  width: 100%;
  height: 100%;
  /* The artwork is an annotated diagram, so it must be shown whole — cropping
     would cut the callout labels off at the edges. */
  object-fit: contain;
  object-position: center;
}
:root:root:root body .ted-diagram__segments{ opacity: 0.62; }
/* The figure now carries a photograph rather than a drawn key, so the caption
   names the two zones in words instead of colour swatches. */
:root:root:root body .ted-figure__caption{
  flex: none;
  max-width: 32.208em;
  margin: var(--s5) auto 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-60);
  text-align: center;
}
:root:root:root body .ted-figure__key{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s3) var(--s6);
  margin-top: var(--s5);
}
:root:root:root body .ted-key{
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--blue);
}
:root:root:root body .ted-key__swatch{ width: 16px; height: 16px; border-radius: 50%; flex: none; }
:root:root:root body .ted-key__swatch--clear{ background: var(--white); border: 2.5px solid var(--sun); }
:root:root:root body .ted-key__swatch--treat{ background: var(--blue); opacity: 0.62; }

/* Construction panel: sand ground with the two zones as cards on top */
:root:root:root body .lens-panel{
  background: var(--cream);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  text-align: center;
}
:root:root:root body .lens-panel__ico{
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  margin: 0 auto var(--s4);
  border-radius: 50%;
  background: var(--sun-soft);
  color: var(--blue-ink);
}
:root:root:root body .lens-panel__ico svg{ width: 26px; height: 26px; }
:root:root:root body .lens-panel h3{ font-size: var(--fs-h3); color: var(--blue); margin-bottom: var(--s3); }
:root:root:root body .lens-panel__lead{ color: var(--blue); margin-bottom: var(--s5); }
:root:root:root body .lens-zone{
  background: var(--white);
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  text-align: left;
}
:root:root:root body .lens-zone + .lens-zone{ margin-top: var(--s4); }
:root:root:root body .lens-zone h4{ font-size: 1.125rem; color: var(--blue); margin-bottom: 0.4rem; }
:root:root:root body .lens-zone p{ font-size: var(--fs-sm); color: var(--ink-60); margin: 0; }

:root:root:root body .tile-grid--4{ grid-template-columns: repeat(4, 1fr); }
:root:root:root body .tile-grid--3{ grid-template-columns: repeat(3, 1fr); }
:root:root:root body .tile-grid--2{ grid-template-columns: repeat(2, 1fr); }

/* Numbered tiles: the three Triple Enhanced Design upgrades read as a sequence,
   so they take a counter in place of the usual icon */
:root:root:root body .tile__num{
  display: inline-block;
  margin-bottom: var(--s3);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--sun-dark);
}
:root:root:root body .tile h4{ font-size: 1.125rem; margin-bottom: 0.45rem; color: var(--blue); }
/* Sub-head introducing a grid inside a section that already has its own h2 */
:root:root:root body .proven__sub{
  margin: clamp(2.5rem, 5vw, 4rem) 0 clamp(1.25rem, 2.5vw, 1.75rem);
  font-size: var(--fs-h3);
  color: var(--blue);
}

/* Recommended tile */
:root:root:root body .tile--lead{
  position: relative;
  border-color: var(--sun);
  box-shadow: var(--shadow-md);
}
:root:root:root body .tile__tag{
  position: absolute;
  top: clamp(1.4rem, 2.8vw, 2rem);
  right: clamp(1.4rem, 2.8vw, 2rem);
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-pill);
  background: var(--sun-mist);
  color: var(--sun-dark);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Treatment options: three equal cards on one row. The description that used
   to sit inside one card has moved into the section intro, so no card has to
   grow taller than its neighbours and none is left half empty. */
:root:root:root body .options{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
:root:root:root body .option{
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.35rem);
  margin: 0;
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--line);
}
/* The option icons are HOYA's own artwork, drawn in white on transparent, so
   the well carries a blue fill for them to read against. --blue-ink (#2e5da6)
   is the exact backdrop the live HOYA site sets behind this same artwork; the
   brighter --blue washes out the pale lens graphic. */
/* Same seal as the feature cards on the About page: pale disc, blue artwork */
:root:root:root body .option__ico{
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue);
  flex: none;
}
:root:root:root body .option__ico img{ width: 34px; height: 34px; object-fit: contain; }
:root:root:root body .option__body{ min-width: 0; }
:root:root:root body .option__ico svg{ width: 28px; height: 28px; }
:root:root:root body .option h3{ font-size: 1.1875rem; margin-bottom: 0; }

/* The recommended option is marked by an amber edge, a warm icon well and a
   one-line note - not by extra height */
:root:root:root body .option--lead{
  border-color: var(--sun-soft);
  border-top-color: var(--sun);
  box-shadow: var(--shadow-md);
}
/* The recommended option keeps its amber border and note; its icon well stays
   blue like the others so all three read consistently. */
:root:root:root body .option__note{
  margin: 0.2rem 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sun-dark);
}

/* Section-level link, below the row rather than inside one card */
:root:root:root body .options__more{ margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; }

/* Centred variant, for a button sitting under a .section-head--center block.
   text-align alone is not enough: the base `p { max-width: 45.384em }` caps
   this paragraph and leaves it flush left, so the button centres inside that
   narrow box rather than inside the section. Releasing the cap and centring
   the box itself is what actually puts the button on the section's axis. */
:root:root:root body .options__more--center{
  max-width: none;
  margin-inline: auto;
  text-align: center;
}

:root:root:root body .option__link{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--blue);
  text-decoration: none;
  transition: gap var(--t-fast);
}
:root:root:root body .option__link:hover{ gap: 0.85rem; }
:root:root:root body .option__link svg{ width: 16px; height: 16px; }

/* Icon standing in for a number in an ink stat block */
:root:root:root body .stat__ico{
  display: grid;
  place-items: center;
  width: 66px; height: 66px;
  border-radius: 50%;
  background: rgba(249, 178, 51, 0.16);
  color: var(--sun);
  margin-bottom: var(--s4);
}
:root:root:root body .stat__ico svg{ width: 32px; height: 32px; }

/* Feature chips */
:root:root:root body .chip-list{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
}
:root:root:root body .chip-list li{
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.5rem 1rem;
  border-radius: var(--r-pill);
  background: var(--white);
  border: 1px solid var(--line);
  font-size: var(--fs-sm);
  font-weight: 600;
}
:root:root:root body .chip-list svg{ width: 16px; height: 16px; flex: none; color: var(--sun-dark); }

/* Split block: short intro beside a numbered list */
:root:root:root body .split-block{
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}
:root:root:root body .split-block__intro h3{ font-size: var(--fs-h3); margin-bottom: var(--s4); }
@media (max-width: 900px) {
  :root:root:root body .split-block{ grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   First steps: three numbered cards on a cream band, the last one inverted so
   the booking step reads as the destination.
   -------------------------------------------------------------------------- */
:root:root:root body .steps-band{
  position: relative;
  overflow: hidden;
  background: var(--cream);
}
:root:root:root body .steps-band > .wrap{ position: relative; z-index: 1; }

/* Amber dot ornaments on both edges, cropped by the band's overflow so they
   read as a pattern running off the page rather than floating graphics. The
   left copy is mirrored, so the pair fans outwards from the centred heading. */
:root:root:root body .steps-band__ornament{
  position: absolute;
  top: 50%;
  width: clamp(96px, 12vw, 200px);
  height: auto;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
/* The mirror on the left has to carry the centring translate too, or the
   second transform would replace it. */
:root:root:root body .steps-band__ornament--right{ right: 0; transform: translateY(-50%); }
:root:root:root body .steps-band__ornament--left{ left: 0; transform: translateY(-50%) scaleX(-1); }

@media (max-width: 900px) {
  :root:root:root body .steps-band__ornament{ display: none; }
}
:root:root:root body .steps-cards{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: stretch;
}
:root:root:root body .steps-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 0;
  padding: clamp(1.75rem, 3.2vw, 2.5rem);
  background: var(--white);
}
:root:root:root body .steps-card__num{
  display: grid;
  place-items: center;
  width: clamp(56px, 6vw, 72px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--blue);
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1;
  margin-bottom: var(--s5);
}
:root:root:root body .steps-card h3{ font-size: 1.1875rem; margin-bottom: var(--s3); }
:root:root:root body .steps-card p{
  font-size: var(--fs-sm);
  color: var(--ink-60);
  margin: 0 0 clamp(1.5rem, 3vw, 2rem);
}
:root:root:root body .steps-card__cta{
  width: 100%;
  justify-content: center;
  margin-top: auto;
}

/* The booking step is the one that matters most, so it inverts */
:root:root:root body .steps-card--lead{ background: var(--blue); }
:root:root:root body .steps-card--lead .steps-card__num{ background: var(--sun); color: var(--blue); }
:root:root:root body .steps-card--lead h3{ color: var(--white); }
:root:root:root body .steps-card--lead p{ color: rgba(255, 255, 255, 0.9); }

@media (max-width: 900px) {
  :root:root:root body .steps-cards{ grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
}

/* --------------------------------------------------------------------------
   Lens comparison: the same grid seen through each lens, side by side, on a
   cream plate so the line art keeps its contrast against the page.
   -------------------------------------------------------------------------- */
:root:root:root body .lens-compare{
  /* The diagrams once carried a flat #f1d4a5 ground and the plate was matched to
     it, which made this panel jump to a saturated tan mid-page. They are
     transparent now, so the plate uses the palette's warm neutral. */
  --lens-plate: var(--cream);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  padding: clamp(1.75rem, 4vw, 3rem);
  background: var(--lens-plate);
}

/* Plate header: feature icon and name over a rule that runs the full width */
:root:root:root body .lens-compare__mark{
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  width: 100%;
  max-width: none;   /* the base `p { max-width: 45.384em }` would clip the rule */
  margin: 0 0 clamp(0.25rem, 1vw, 0.75rem);
  padding-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
  border-bottom: 1px solid rgba(14, 28, 56, 0.14);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h4);
  color: var(--ink);
}
:root:root:root body .lens-compare__mark img{ width: 56px; height: auto; flex: none; }

/* Each lens sits on its own white card, so the two are read as a pair of
   specimens rather than two drawings floating on a tint */
:root:root:root body .lens-compare__item{
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--line);
}
/* The MiYOSMART side is the answer, so it carries the brand rule */
:root:root:root body .lens-compare__item--lead{ border-top-color: var(--blue); }

/* Label first: you know which lens you are looking at before you look */
:root:root:root body .lens-compare__tag{
  order: -1;
  margin: 0 0 clamp(0.75rem, 2vw, 1.25rem);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  color: var(--blue);
  max-width: none;
}
:root:root:root body .lens-compare__tag--plain{ color: var(--ink-60); }

:root:root:root body .lens-compare__item img{
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin-inline: auto;
}
:root:root:root body .lens-compare figcaption{ margin-top: clamp(1rem, 2vw, 1.4rem); }
/* Scoped to the caption: an unscoped `.lens-compare p` also caught the header
   mark, capping its rule at 27.816em instead of the full plate width */
:root:root:root body .lens-compare figcaption p{
  font-size: var(--fs-sm);
  color: var(--ink-60);
  max-width: 27.816em;
  margin: 0 auto;
}

@media (max-width: 720px) {
  :root:root:root body .lens-compare{ grid-template-columns: 1fr; }
  :root:root:root body .lens-compare__item img{ max-width: 260px; }
  :root:root:root body .lens-compare__mark img{ width: 44px; }
}

/* --------------------------------------------------------------------------
   Product spec block, the way HOYA lays these out: the feature artwork beside
   its explanation, a rule, then the detail underneath - either a diagram with
   its parts called out on leader rules, or a row of capability icons.
   -------------------------------------------------------------------------- */
:root:root:root body .spec{
  display: grid;
  grid-template-columns: minmax(0, 0.32fr) minmax(0, 0.68fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
:root:root:root body .spec__art{ margin: 0; }
:root:root:root body .spec__art img, :root:root:root body .spec__art svg{
  display: block;
  width: 100%;
  height: auto;
  margin-inline: auto;
}
:root:root:root body .spec__art--lens img, :root:root:root body .spec__art--lens svg{ max-width: 132px; }
/* capped at the artwork's native 255px so it is never upscaled */
:root:root:root body .spec__art--layers img{ max-width: 255px; }
:root:root:root body .spec__art--layers svg{ max-width: 300px; }
:root:root:root body .spec__art--shield img{ max-width: 116px; }

/* The rule between the introduction and the layer diagram */
:root:root:root body .spec__split{
  border: 0;
  border-top: 1px solid var(--line);
  margin: clamp(2.25rem, 4.5vw, 3.5rem) 0 0;
}
:root:root:root body .spec--detail{ margin-top: clamp(1.5rem, 3.5vw, 2.75rem); }

:root:root:root body .spec__legend{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
}
/* Each entry is led in by the same short rule that connects it to the diagram */
:root:root:root body .spec__legend li{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: start;
  margin: 0;
}
/* Long enough to read as a leader reaching back to the lens artwork, rather
   than a decorative dash sitting beside the label. The negative start pulls it
   into the column gap so it points at the diagram instead of stopping short. */
:root:root:root body .spec__legend li::before{
  content: "";
  width: clamp(56px, 15vw, 210px);
  height: 2px;
  margin-top: 0.8rem;
  margin-left: calc(-1 * clamp(0rem, 2.5vw, 2.25rem));
  background: var(--blue);
}
@media (max-width: 900px) {
  /* stacked: nothing to point at, so the leader goes back to a short rule */
  :root:root:root body .spec__legend li::before{ width: clamp(40px, 6vw, 64px); margin-left: 0; }
}
:root:root:root body .spec__legend h3{ font-size: 1.1875rem; margin-bottom: 0.3rem; }
:root:root:root body .spec__legend p{ font-size: var(--fs-sm); color: var(--ink-60); margin: 0; }

/* Capability row: one icon and label per column, divided as on the HOYA sheet */
:root:root:root body .spec-grid{
  list-style: none;
  margin: clamp(1.75rem, 3.5vw, 2.75rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  text-align: center;
}
:root:root:root body .spec-grid li{
  margin: 0;
  padding-inline: clamp(0.5rem, 1.5vw, 1.5rem);
  display: grid;
  align-content: start;
  justify-items: center;
}
:root:root:root body .spec-grid__ico{
  width: auto;
  height: clamp(52px, 6vw, 70px);
  object-fit: contain;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}
:root:root:root body .spec-grid h3{ font-size: 1rem; margin: 0; }

/* The dividers only make sense while all five sit on one row */
@media (min-width: 901px) {
  :root:root:root body .spec-grid li + li{ border-left: 2px dotted var(--line); }
}

/* Small print carrying the standard behind the claim above it */
/* Footnote to the icon row above. Full container width so its rule closes the
   row the way .spec__split opens it, and so the text runs the whole measure
   instead of stopping short. */
:root:root:root body .spec__note{
  margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0;
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--ink-40);
  max-width: none;
  text-wrap: pretty;
}
:root:root:root body .spec__note a{ color: var(--ink-60); }

@media (max-width: 900px) {
  :root:root:root body .spec{ grid-template-columns: 1fr; }
  /* Stacked, the intro block reads better title-first; the detail block keeps
     its diagram on top because the legend beneath points at it */
  :root:root:root body .spec:not(.spec--detail) .spec__art{ order: 2; }
  :root:root:root body .spec__art--lens img, :root:root:root body .spec__art--lens svg{ max-width: 104px; margin-inline: 0; }
  /* Smaller, so the diagram sits closer in scale to the labels it belongs to */
  :root:root:root body .spec__art--layers img{ max-width: 168px; margin-inline: 0; }
  :root:root:root body .spec__art--layers svg{ max-width: 260px; margin-inline: 0; }
  :root:root:root body .spec__art--shield img{ max-width: 96px; margin-inline: 0; }
  :root:root:root body .spec-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: clamp(1.75rem, 4vw, 2.5rem); }
}

@media (max-width: 560px) {
  :root:root:root body .spec-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   Photo panel: the photograph fills the band and the copy sits on a white card
   over it, the way HOYA presents this section.
   -------------------------------------------------------------------------- */
:root:root:root body .photo-panel{
  position: relative;
  overflow: hidden;
  background: var(--blue-mist);
  /* Enough height for the photograph to read, whatever the card measures */
  min-height: clamp(440px, 42vw, 640px);
  display: grid;
  align-items: center;
}
:root:root:root body .photo-panel__bg{
  position: absolute;
  top: 0; bottom: 0; left: 0; right: auto;
  /* The band is wider than the photograph's own ratio, so no horizontal crop
     happens and object-position alone cannot move the subject. Oversizing the
     image from the left edge slides the child clear of the card instead. */
  width: 118%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
}
:root:root:root body .photo-panel .wrap{ position: relative; z-index: 2; }
:root:root:root body .photo-panel__card{
  max-width: 540px;
  padding: clamp(1.75rem, 3.6vw, 3rem);
  background: var(--white);
  border-radius: var(--r);
}
/* Same rule the section heads carry, sized for the card */
:root:root:root body .photo-panel__card h2{ margin-bottom: var(--s4); }
:root:root:root body .photo-panel__card p:last-child{ margin-bottom: 0; }

/* Stacked: the photograph becomes a band above the copy, so no text sits on it */
@media (max-width: 900px) {
  :root:root:root body .photo-panel{ padding-block: 0 var(--section-y); min-height: 0; display: block; }
  :root:root:root body .photo-panel__bg{
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    margin-bottom: clamp(1.5rem, 5vw, 2.5rem);
  }
  :root:root:root body .photo-panel__card{ max-width: none; }
}

/* --------------------------------------------------------------------------
   "Why is this important" panel: the claim and copy beside the portrait, with
   the lens comparison laid out as a table underneath, as HOYA presents it.
   -------------------------------------------------------------------------- */
:root:root:root body .matters{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(1.75rem, 4vw, 3.5rem);
  background: var(--cream);
  border-radius: var(--r);
}
:root:root:root body .matters__copy p:last-child{ margin-bottom: 0; }
/* The headline claim, set in the amber block the brand uses for emphasis */
:root:root:root body .matters__claim{
  display: block;
  padding: clamp(1rem, 2.2vw, 1.5rem) clamp(1.1rem, 2.4vw, 1.75rem);
  background: var(--sun);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.35;
  max-width: none;
  margin-bottom: 0;
}
/* Blue rule between the claim and the explanation */
:root:root:root body .matters__claim + p{ margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
:root:root:root body .matters__media{ margin: 0; }
/* Capped so the cutout sits beside the copy rather than dominating the panel;
   400px keeps it at or under the artwork's own 516px, so it never upscales. */
:root:root:root body .matters__media img{
  width: 100%;
  max-width: clamp(240px, 28vw, 400px);
  height: auto;
  display: block;
  margin-inline: auto;
}

/* Comparison table spans the full width of the panel */
:root:root:root body .matters-table{
  grid-column: 1 / -1;
  width: 100%;
  border-collapse: collapse;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  font-size: var(--fs-sm);
}
:root:root:root body .matters-table th{
  background: var(--blue);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 600;
  text-align: center;
  padding: clamp(0.75rem, 1.6vw, 1.05rem) clamp(0.75rem, 1.6vw, 1.25rem);
}
:root:root:root body .matters-table th strong{ font-weight: 800; }
:root:root:root body .matters-table td{
  background: var(--paper);
  color: var(--ink-80);
  text-align: center;
  padding: clamp(0.7rem, 1.5vw, 1rem) clamp(0.75rem, 1.6vw, 1.25rem);
  border: 1px solid var(--line);
  width: 50%;
}

@media (max-width: 900px) {
  :root:root:root body .matters{ grid-template-columns: 1fr; }
  /* Portrait first, so the copy stays next to the table it introduces */
  :root:root:root body .matters__media{ grid-row: 1; max-width: 380px; margin-inline: auto; }
  :root:root:root body .matters-table{ font-size: var(--fs-xs); }
}

/* --------------------------------------------------------------------------
   Proof band: three figures under blue icon discs, with the brand's halftone
   dots running off both edges.
   -------------------------------------------------------------------------- */
/* The cream panel above already ends on generous padding, so this band opens
   on roughly half the usual section lead-in rather than stacking two full ones */
:root:root:root body .proof-band{ position: relative; overflow: hidden; padding-top: clamp(2.75rem, 5vw, 4.5rem); }
:root:root:root body .proof-band .wrap{ position: relative; z-index: 1; }
:root:root:root body .proof-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}
:root:root:root body .proof{
  display: grid;
  justify-items: center;
  text-align: center;
}
:root:root:root body .proof__ico{
  display: grid;
  place-items: center;
  width: clamp(64px, 6.5vw, 88px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
:root:root:root body .proof__ico svg{ width: 46%; height: 46%; }
:root:root:root body .proof__num{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.25rem, 4.2vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--blue);          /* the brand blue, not the muted --blue-ink */
  margin: 0 0 var(--s4);
}
:root:root:root body .proof__label{
  font-size: var(--fs-sm);
  color: var(--ink-60);
  margin: 0;
  max-width: 21.96em;
}

@media (max-width: 720px) {
  :root:root:root body .proof-grid{ grid-template-columns: 1fr; }
}

/* Reference markers and the reference list */
/* Bracketed source marker, as the original page numbers its footnotes. Set in
   the link blue rather than the amber used by .ref-mark: amber reads at only
   2.9:1 on the mist ground these notes sit on. */
:root:root:root body .note-mark{
  font-size: 0.7em;
  font-weight: 600;
  vertical-align: 0.15em;
  color: var(--blue);
  text-decoration: none;
  white-space: nowrap;
  padding-left: 0.15em;
}
:root:root:root body .note-mark:hover, :root:root:root body .note-mark:focus-visible{ text-decoration: underline; }

:root:root:root body .ref-mark{
  font-size: 0.62em;
  font-weight: 700;
  vertical-align: super;
  line-height: 0;
  color: var(--sun-dark);
  text-decoration: none;
}
:root:root:root body .section--ink .ref-mark{ color: var(--sun); }
/* Consecutive citations read as one number without a separator ("12" for 1 and
   2), so adjacent markers get a comma. */
:root:root:root body .ref-mark + .ref-mark::before{ content: ","; }

:root:root:root body .refs h2{ font-size: var(--fs-h3); margin-bottom: var(--s5); }
:root:root:root body .refs ol{ padding-left: 1.35rem; max-width: 73.2em; }
:root:root:root body .refs li{
  font-size: var(--fs-xs);
  line-height: 1.65;
  color: var(--ink-60);
  margin-bottom: var(--s3);
  scroll-margin-top: calc(var(--header-h) + 2rem);
}
:root:root:root body .refs a{ color: var(--ink-60); }
/* Standing disclaimer under a reference list */
:root:root:root body .refs__note{
  max-width: 73.2em;
  margin: var(--s6) 0 0;
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--ink-60);
}

/* --- Tick list: the band's checked-list treatment, reusable in body copy --- */
:root:root:root body .ticklist{ list-style: none; margin: var(--s4) 0; padding: 0; display: grid; gap: 0.7rem; }
:root:root:root body .ticklist li{
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 0.7rem;
  align-items: start;
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink-80);
}
:root:root:root body .ticklist svg{ width: 18px; height: 18px; color: var(--blue); margin-top: 2px; }
/* Row variant: the five coating benefits read across rather than as a column */
:root:root:root body .ticklist--row{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
}
:root:root:root body .ticklist--row li{ margin: 0; }

:root:root:root body .ticklist li.is-no{ color: var(--ink-60); }

/* Filled amber disc behind each tick */
:root:root:root body .ticklist--disc li{ grid-template-columns: 24px 1fr; }
:root:root:root body .ticklist--disc svg{
  width: 24px; height: 24px;
  margin-top: -1px;
  padding: 5px;
  border-radius: 50%;
  background: var(--sun);
  color: var(--white);
}
:root:root:root body .ticklist li.is-no svg{ color: var(--ink-40); }

/* --- Methods band: the photograph runs behind, under a blue veil ---------- */
:root:root:root body .methods-band{ position: relative; overflow: hidden; }
:root:root:root body .methods-band > .wrap{ position: relative; z-index: 2; }

:root:root:root body .methods-band__bg{ position: absolute; inset: 0; z-index: 0; margin: 0; }
:root:root:root body .methods-band__bg img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 34%;
}
/* Half-strength veil over most of the frame, a little denser at the top so the
   heading clears AA against the brightest part of the photograph. */
:root:root:root body .methods-band__bg::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(12, 80, 200, 0.68) 0%,
    rgba(12, 80, 200, 0.56) 22%,
    rgba(12, 80, 200, 0.5) 46%,
    rgba(12, 80, 200, 0.5) 100%
  );
}

/* --- Treatment methods: white cards on a blue band ------------------------ */
:root:root:root body .methods{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
:root:root:root body .methods__card, :root:root:root body .methods__note{
  background: var(--white);
  padding: clamp(1.5rem, 3.2vw, 2.75rem);
}
:root:root:root body .methods__note{ grid-column: 1 / -1; }

/* The band paints its own text white; inside the cards it returns to ink */
:root:root:root body .methods__card h3{ color: var(--blue); margin-bottom: var(--s5); }
:root:root:root body .methods__card .ticklist{ margin: 0; gap: 0.9rem; }
:root:root:root body .methods__card .ticklist li{ color: var(--ink-80); }
/* .section--ink p:not(.eyebrow) paints the band's copy white, so match its
   specificity to bring the text inside the white card back to ink. */
:root:root:root body .methods .methods__note p{ color: var(--ink-80); font-weight: 600; max-width: 67.344em; }
:root:root:root body .methods .methods__note p + p{ margin-top: var(--s4); }
:root:root:root body .methods__note .btn{ margin-top: var(--s5); }

@media (max-width: 860px) {
  :root:root:root body .methods{ grid-template-columns: 1fr; }
}

/* --- Lens variants: three photo-led cards, read side by side --------------
   The section promises a comparison, so all three sit in one view rather than
   as stacked full-width panels the reader has to hold in memory. */
/* auto-fit rather than a fixed three: empty tracks collapse, so however many
   variants are listed they share the full width instead of leaving a gap */
:root:root:root body .variant-list{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: stretch;
}
:root:root:root body .variant{
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--blue);
  border-radius: var(--r);
  overflow: hidden;
}
:root:root:root body .variant__media{
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--blue-mist);
}
:root:root:root body .variant__media img{
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}

:root:root:root body .variant__body{
  display: flex;
  flex-direction: column;
  flex: 1;                        /* so the trailing link can bottom-align */
  padding: clamp(1.35rem, 2.6vw, 1.9rem);
}
:root:root:root body .variant .compare__tag{ align-self: flex-start; margin-bottom: var(--s3); }
:root:root:root body .variant__body h3{ font-size: clamp(1.15rem, 1.8vw, 1.4rem); margin: 0 0 var(--s2); }
:root:root:root body .variant__kind{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  margin: 0 0 var(--s4);
}

/* Tick discs come from .ticklist--disc; only the spacing is panel-specific */
:root:root:root body .variant .ticklist{ margin: 0 0 var(--s5); gap: 0.7rem; }
:root:root:root body .variant .ticklist li{ font-size: var(--fs-sm); }
/* Pushed to the card foot so all three links sit on one line across the row */
:root:root:root body .variant .btn{ margin-top: auto; align-self: flex-start; }

@media (max-width: 720px) {
  /* Wider crop keeps stacked cards from running tall; biased upward because
     the subject's face sits in the top half of all three photographs */
  :root:root:root body .variant__media{ aspect-ratio: 16 / 9; }
  :root:root:root body .variant__media img{ object-position: 50% 30%; }
}

/* --- Side-by-side comparison cards -------------------------------------- */
:root:root:root body .compare{ display: flex; flex-direction: column; }
:root:root:root body .compare h3{ margin-bottom: var(--s2); }
:root:root:root body .compare .ticklist{ margin-top: var(--s4); }
:root:root:root body .compare__tag{
  align-self: flex-start;   /* column flex would stretch the chip full width */
  margin-bottom: var(--s3);
  padding: 0.25rem 0.65rem;
  border-radius: var(--r-pill);
  background: var(--blue-soft);
  color: var(--blue-deep);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
:root:root:root body .compare--lead{ border-color: var(--sun-soft); border-top: 3px solid var(--sun); }
:root:root:root body .compare--lead .compare__tag{ background: var(--sun-mist); color: var(--sun-dark); }
:root:root:root body .compare__tag--plain{ background: var(--line-soft, #eef1f7); color: var(--ink-60); }

/* Footnote qualifying the headline figure on a dark band */
/* Light by default; the dark-section overrides below flip it when needed, so
   the note travels between backgrounds without hard-coded white */
:root:root:root body .result-note{
  max-width: 67.344em;
  margin: clamp(1.75rem, 3.5vw, 2.75rem) auto 0;
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--ink-60);
  text-align: center;
}
/* Plain variant: no rule above it, for a note that already reads as the
   closing line of its section */
:root:root:root body .result-note--plain{ border-top: 0; padding-top: 0; }

:root:root:root body .section--navy .result-note, :root:root:root body .section--ink .result-note{
  border-top-color: rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.78);
}

/* Specialist locator */
:root:root:root body .locator__controls{
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-bottom: var(--s6);
}

:root:root:root body .field{ display: grid; gap: 0.4rem; }
:root:root:root body .field label{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
}
:root:root:root body .field input, :root:root:root body .field select, :root:root:root body .field textarea{
  width: 100%;
  padding: 0.85rem 1rem;
  min-height: 52px;
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ink);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
:root:root:root body .field textarea{ min-height: 130px; resize: vertical; line-height: 1.6; }
:root:root:root body .field input:focus, :root:root:root body .field select:focus, :root:root:root body .field textarea:focus{
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 4px var(--sun-soft);
}
:root:root:root body .field input[aria-invalid="true"], :root:root:root body .field select[aria-invalid="true"], :root:root:root body .field textarea[aria-invalid="true"]{ border-color: #c0392b; }
:root:root:root body .field__error{
  font-size: var(--fs-xs);
  color: #c0392b;
  min-height: 1.1em;
  font-weight: 600;
}
:root:root:root body .field__hint{ font-size: var(--fs-xs); color: var(--ink-40); }

/* Submit row: the privacy/phone note sits beside the button rather than under
   it, and drops below on narrow screens where there is no room alongside. */
:root:root:root body .form-submit{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 1.75rem);
}
:root:root:root body .form-submit .btn{ flex: none; }
:root:root:root body .form-submit .field__hint{
  flex: 1 1 16.104em;
  margin: 0;
  font-weight: 700;
  /* Stepped up from --ink-40, which sits at 2.93:1 on white. Bold weight alone
     does not carry text this small over the AA threshold; --ink-60 is 5.39:1. */
  color: var(--ink-60);
}
:root:root:root body .form-submit .field__hint a{
  color: var(--blue);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

:root:root:root body .form-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s4);
}
:root:root:root body .form-grid .field--full{ grid-column: 1 / -1; }

:root:root:root body .form-card{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  box-shadow: var(--shadow-sm);
}

:root:root:root body .form-status{
  margin-top: var(--s5);
  padding: var(--s5);
  border-radius: var(--r);
  background: var(--sun-mist);
  border: 1px solid var(--sun-soft);
  font-size: var(--fs-sm);
}
:root:root:root body .form-status[hidden]{ display: none; }
:root:root:root body .form-status h3{ font-size: 1.125rem; margin-bottom: 0.35rem; }
:root:root:root body .form-status p{ margin: 0; color: var(--ink-80); }

:root:root:root body .clinic-list{ display: grid; gap: var(--s4); }
:root:root:root body .clinic{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s5);
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
}
:root:root:root body .clinic h3{ font-size: 1.125rem; margin-bottom: 0.25rem; }
:root:root:root body .clinic__meta{ font-size: var(--fs-sm); color: var(--ink-60); margin: 0 0 0.5rem; }
:root:root:root body .clinic__links{ display: flex; flex-wrap: wrap; gap: 1rem; font-size: var(--fs-sm); }
:root:root:root body .clinic__links a{ display: inline-flex; align-items: center; gap: 0.35rem; color: var(--ink-80); }
:root:root:root body .clinic__links svg{ width: 15px; height: 15px; color: var(--sun-dark); }
:root:root:root body .clinic__state{
  align-self: start;
  background: var(--sun-soft);
  border-radius: var(--r-pill);
  padding: 0.3rem 0.8rem;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
:root:root:root body .locator__empty{ color: var(--ink-60); font-size: var(--fs-sm); }

:root:root:root body .contact-strip{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
:root:root:root body .contact-card{
  background: var(--cream);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 2.8vw, 2rem);
}
:root:root:root body .contact-card svg{ width: 30px; height: 30px; color: var(--sun-dark); margin-bottom: var(--s4); }
:root:root:root body .contact-card h3{ font-size: 1.125rem; margin-bottom: 0.35rem; }
:root:root:root body .contact-card p{ font-size: var(--fs-sm); color: var(--ink-60); margin-bottom: 0.65rem; }
:root:root:root body .contact-card a{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   22. Scroll reveal
   -------------------------------------------------------------------------- */
:root:root:root.js body .reveal{
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
:root:root:root.js body .reveal.is-in{ opacity: 1; transform: none; }
:root:root:root body .reveal[data-delay="1"]{ transition-delay: 0.08s; }
:root:root:root body .reveal[data-delay="2"]{ transition-delay: 0.16s; }
:root:root:root body .reveal[data-delay="3"]{ transition-delay: 0.24s; }
:root:root:root body .reveal[data-delay="4"]{ transition-delay: 0.32s; }
:root:root:root body .reveal[data-delay="5"]{ transition-delay: 0.4s; }

/* --- Care journey: steps beside a sticky photo ----------------------------
   The five steps only ever filled the left half of the row, so the list now
   sits in its own column with supporting media alongside. The photo pins as
   the reader works down the sequence. */
:root:root:root body .journey{
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
:root:root:root body .journey .timeline{ gap: clamp(1.5rem, 2.6vw, 2rem); }

:root:root:root body .journey__media{
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
:root:root:root body .journey__media img{
  display: block;
  width: 100%;
  /* Sized so the photo plus its caption lands close to the height of the five
     steps beside it, rather than overshooting and reopening the empty gap */
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: 50% 32%;
}
:root:root:root body .journey__note{
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: clamp(1rem, 2vw, 1.35rem);
  background: var(--white);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
}
:root:root:root body .journey__note-ico{
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: none;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue);
}
:root:root:root body .journey__note-ico svg{ width: 19px; height: 19px; }

@media (max-width: 900px) {
  :root:root:root body .journey{ grid-template-columns: 1fr; gap: var(--s6); }
  :root:root:root body .journey__media{ position: static; max-width: 520px; }
  :root:root:root body .journey__media img{ aspect-ratio: 16 / 10; }
}

/* --- Band used as a closing call to action -------------------------------
   Same panel as the editorial band, minus the tick list, so the lead needs no
   rule above it and the heading sits closer to the copy it introduces. */
:root:root:root body .band--cta .band h2, :root:root:root body .band--cta h2{ margin-bottom: var(--s4); }
:root:root:root body .band__lead{
  margin: 0 0 var(--s6);
  font-size: var(--fs-lead);
  color: var(--ink-60);
  max-width: 30.744em;
}
/* <picture> must not sit between the figure's flex box and the image */
:root:root:root body .band__media--cutout picture{ display: contents; }

/* Wide photo band closing a section, sitting under both columns so neither
   one is left taller than the other */

/* --- Effective control: copy panel beside a full-bleed portrait -----------
   Runs edge to edge rather than inside .wrap, so the photograph reaches the
   viewport edge the way the reference sheet does. The copy side carries its
   own padding instead. */
:root:root:root body .control__inner{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}
:root:root:root body .control__copy{
  background: var(--cream);
  padding: clamp(2.25rem, 5vw, 4.5rem) clamp(1.5rem, 5vw, 5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
:root:root:root body .control__copy > *{ max-width: 43.92em; }

/* Short rule under the heading, as on the reference */

:root:root:root body .control__list{
  list-style: none;
  margin: clamp(1.5rem, 3vw, 2rem) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(1rem, 2vw, 1.4rem);
}
:root:root:root body .control__list li{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  align-items: start;
  margin: 0;
}
:root:root:root body .control__tick{
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--sun);
  color: var(--blue-ink);
  margin-top: 0.1rem;
}
:root:root:root body .control__tick svg{ width: 16px; height: 16px; }
:root:root:root body .control__list h3{
  font-size: 1.0625rem;
  color: var(--blue);
  margin: 0 0 0.2rem;
}
:root:root:root body .control__list p{ font-size: var(--fs-sm); color: var(--ink-60); margin: 0; }

:root:root:root body .control__close{ margin-top: clamp(1.5rem, 3vw, 2rem); }

:root:root:root body .control__media{ margin: 0; }
:root:root:root body .control__media img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
}

@media (max-width: 900px) {
  :root:root:root body .control__inner{ grid-template-columns: 1fr; }
  :root:root:root body .control__media img{ aspect-ratio: 4 / 3; height: auto; }
}

/* --------------------------------------------------------------------------
   23. Responsive - tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  :root{ --header-h: 72px; }

  :root:root:root body .nav__menu{ display: none; }
  :root:root:root body .nav__toggle{ display: inline-flex; }
  :root:root:root body .nav{ gap: var(--s3); }

  :root:root:root body .nav__menu.is-open{
    display: flex;
    position: absolute;
    left: 0; right: 0;
    top: var(--header-h);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s4) var(--gutter) var(--s6);
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  :root:root:root body .nav__menu.is-open .nav__link{
    display: block;
    padding: 0.9rem 0.75rem;
    border-radius: var(--r-sm);
    font-size: 1.0625rem;
  }
  :root:root:root body .nav__menu.is-open > li + li{ border-top: 1px solid var(--line-soft); }

  /* Stacked menu: submenus are always open and simply indented, so there is
     no second layer of tapping to get at them */
  :root:root:root body .nav__item--menu{ display: block; }
  :root:root:root body .nav__disclosure{ display: none; }
  :root:root:root body .nav__submenu{
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    padding: 0 0 0.4rem 0.75rem;
    background: none;
    border: 0;
    box-shadow: none;
  }
  :root:root:root body .nav__sublink{ padding: 0.75rem; font-size: 1rem; color: var(--ink-60); }

  :root:root:root body .hero__grid{ grid-template-columns: 1fr; gap: var(--s7); }
  :root:root:root body .hero__media{ max-width: 560px; margin-inline: auto; width: 100%; }
  :root:root:root body .hero__frame{ aspect-ratio: 4 / 3.5; }
  /* Reset the opposite offset, or the chip stretches between both edges */
  :root:root:root body .hero__chip--tl{ left: 0; bottom: 10%; top: auto; }
  :root:root:root body .hero__chip--br{ right: 0; top: 6%; bottom: auto; }

  :root:root:root body .trustbar__inner{ grid-template-columns: repeat(2, 1fr); gap: var(--s5); }

  :root:root:root body .sim__layout{ grid-template-columns: 1fr; }
  :root:root:root body .sim__scenes{
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(to right, #000 0, #000 92%, transparent 100%);
  }
  :root:root:root body .sim__scenes li:last-child{ padding-right: var(--s5); }
  :root:root:root body .sim__scene-btn{
    white-space: nowrap;
    padding: 0.7rem 0.95rem;
    font-size: var(--fs-sm);
    scroll-snap-align: start;
  }

  :root:root:root body .explain__grid, :root:root:root body .product__grid, :root:root:root body .finder__panel{ grid-template-columns: 1fr; }
  :root:root:root body .finder__media{ min-height: 300px; order: -1; }

  :root:root:root body .signs__grid, :root:root:root body .why__grid, :root:root:root body .guides__grid, :root:root:root body .tile-grid, :root:root:root body .contact-strip{ grid-template-columns: repeat(2, 1fr); }

  :root:root:root body .guide--feature{ grid-column: span 2; flex-direction: column; }
  :root:root:root body .guide--feature .guide__img{ width: 100%; aspect-ratio: 16 / 9; }
  :root:root:root body .guide--feature .guide__body{ width: 100%; }

  :root:root:root body .stats__grid{ grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
  :root:root:root body .evidence{ grid-template-columns: 1fr; }
  :root:root:root body .awards{ grid-template-columns: 1fr; }

  :root:root:root body .life__grid{ grid-template-columns: repeat(4, 1fr); }
  :root:root:root body .life__cell--a{ grid-column: span 4; grid-row: span 1; }
  :root:root:root body .life__cell--b, :root:root:root body .life__cell--c, :root:root:root body .life__cell--d, :root:root:root body .life__cell--e, :root:root:root body .life__cell--f{ grid-column: span 2; }
  :root:root:root body .life__pull{ grid-column: 1 / -1; grid-template-columns: 1fr; gap: var(--s2); }

  :root:root:root body .footer__top{ grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------------------------
   24. Responsive - mobile (reorganised, not shrunk)
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  :root{
    --fs-body: 1rem;
    --section-y: clamp(2.5rem, 8vw, 3.5rem);
    --header-h: 66px;
  }

  /* No bottom reservation for the sticky CTA: it hides itself 260px before the
     end of the page (see toggleSticky in main.js), so it never covers the
     footer. Padding here only showed as a white band under the footer. */
  :root:root:root body .sticky-cta{ display: flex; }

  /* header and footer marks step down together */
  :root:root:root body .brand__logo, :root:root:root body .footer__brand img{ width: 76px; }
  :root:root:root body .brand__name{ font-size: 0.9375rem; }
  :root:root:root body .nav__cta{ display: none; }

  :root:root:root body .btn{ width: 100%; }
  :root:root:root body .btn-row{ gap: 0.65rem; }
  :root:root:root body .btn-row .btn{ flex: 1 1 100%; }
  /* Keep the note clear of the full-width button when the row stacks —
     the 0.65rem above would otherwise undo .btn-row--note on mobile. */
  :root:root:root body .btn-row--note{ gap: 1rem; }
  :root:root:root body .sticky-cta .btn{ width: auto; }
  :root:root:root body .clinic__links .btn, :root:root:root body .locator__controls .btn{ width: auto; }

  :root:root:root body .hero{ padding-block: var(--s6) var(--s8); }
  :root:root:root body .hero__title{ font-size: clamp(2.5rem, 11.5vw, 3.4rem); }
  :root:root:root body .hero__frame{ aspect-ratio: 4 / 4.2; }
  :root:root:root body .hero__chip--tl{ display: none; }
  :root:root:root body .hero__chip--br{ right: 4%; top: 4%; bottom: auto; }
  :root:root:root body .hero__blob-1{ width: 90vw; top: -8%; right: -30%; }

  :root:root:root body .trustbar__inner{ grid-template-columns: 1fr; gap: var(--s4); }

  :root:root:root body .sim__stage{ aspect-ratio: 4 / 3.4; }
  :root:root:root body .sim__caption{ padding-bottom: 1.1rem; }

  :root:root:root body .signs__grid{ grid-template-columns: 1fr; }
  :root:root:root body .sign__img{ aspect-ratio: 16 / 9; }
  :root:root:root body .signs__tally{ flex-direction: column; align-items: flex-start; text-align: left; }
  :root:root:root body .signs__tally .btn{ width: 100%; }

  :root:root:root body .why__grid{ grid-template-columns: 1fr; gap: var(--s6); }
  :root:root:root body .benefit__num{ font-size: 2.75rem; }

  :root:root:root body .stats__grid{ grid-template-columns: 1fr; gap: var(--s6); }
  :root:root:root body .stat__num{ font-size: clamp(3.25rem, 18vw, 4.5rem); }

  :root:root:root body .award{ flex-direction: column; align-items: flex-start; text-align: left; }

  :root:root:root body .life__grid{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(150px, auto); }
  :root:root:root body .life__cell--a{ grid-column: span 2; grid-row: span 1; }
  :root:root:root body .life__cell--b, :root:root:root body .life__cell--c, :root:root:root body .life__cell--d, :root:root:root body .life__cell--e, :root:root:root body .life__cell--f{ grid-column: span 1; }
  :root:root:root body .life__pull{ grid-column: 1 / -1; grid-template-columns: 1fr; gap: var(--s2); }

  :root:root:root body .guides__grid, :root:root:root body .tile-grid, :root:root:root body .contact-strip, :root:root:root body .form-grid{ grid-template-columns: 1fr; }
  :root:root:root body .guide--feature{ grid-column: span 1; }

  /* Mobile only: icon and title share a row, the description runs full width
     underneath. Stacked, these cards were three tall blocks with a lot of
     vertical travel; pairing the icon with its title tightens each one. */
  :root:root:root body .tile-grid--rowhead .tile{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.85rem;
    align-items: center;
  }
  :root:root:root body .tile-grid--rowhead .tile > svg{ margin-bottom: 0; }
  :root:root:root body .tile-grid--rowhead .tile h3{ margin-bottom: 0; }
  :root:root:root body .tile-grid--rowhead .tile p{ grid-column: 1 / -1; margin-top: 0.7rem; }

  :root:root:root body .finder__body{ padding: var(--s6) var(--s5); }
  :root:root:root body .finder__media{ min-height: 230px; }

  :root:root:root body .faq__q{ font-size: 1.0625rem; gap: var(--s4); }
  :root:root:root body .faq__a-inner{ padding-right: var(--s5); }

  :root:root:root body .final{ min-height: auto; background: var(--cream); }
  :root:root:root body .final__bg{ inset: 0 0 auto 0; height: 64vw; }
  :root:root:root body .final__bg img{ height: 100%; object-position: 34% 50%; }
  :root:root:root body .final__bg::after{
    background: linear-gradient(
      to bottom,
      rgba(248, 241, 226, 0) 0%,
      rgba(248, 241, 226, 0) 52%,
      rgba(248, 241, 226, 0.7) 84%,
      rgba(248, 241, 226, 1) 100%
    );
  }
  :root:root:root body .final__inner{ padding-block: calc(64vw + 0.75rem) var(--s8); }
  :root:root:root body .final__card{ margin-left: 0; max-width: none; }
  :root:root:root body .final__ring, :root:root:root body .final__dots{ display: none; }

  :root:root:root body .clinic{ grid-template-columns: 1fr; gap: var(--s4); }
  :root:root:root body .clinic__state{ justify-self: start; }

  :root:root:root body .footer__top{ grid-template-columns: 1fr; gap: var(--s6); }
  /* Stacked: the form must not flex-grow down the column axis */
  :root:root:root body .footer__signup{ flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--s5); }
  :root:root:root body .footer__signup .newsletter{ flex: none; max-width: none; width: 100%; }
  :root:root:root body .footer__bottom{ flex-direction: column; gap: var(--s3); }

  :root:root:root body .locator__controls .field{ flex: 1 1 100%; }
}

@media (max-width: 380px) {
  :root:root:root body .hero__chip--br{ display: none; }
}


/* Nav: the in-menu specialist link is a mobile-only duplicate of the header CTA */
@media (min-width: 1081px) {
  :root:root:root body .nav__mobile-cta{ display: none; }
}

/* Lifestyle grid row spans (paired with the definite row height above) */
@media (max-width: 1080px) {
  :root:root:root body .life__grid{ grid-auto-rows: clamp(150px, 22vw, 210px); }
}
@media (max-width: 720px) {
  :root:root:root body .life__grid{ grid-auto-rows: clamp(140px, 38vw, 190px); }
  :root:root:root body .life__pull{ grid-auto-rows: auto; min-height: 170px; }
}


/* Mobile-only refinements (never applied above 720px) */
@media (max-width: 720px) {
  /* Two narrow columns of body copy read badly at this width */
  :root:root:root body .product__pillars{ grid-template-columns: 1fr; }

  /* Keep diagram labels legible: scroll the diagram, never the page */
  :root:root:root body .product__figure, :root:root:root body .eye-diagram{ overflow-x: auto; }
  :root:root:root body .product__figure > svg, :root:root:root body .eye-diagram > svg{ min-width: 440px; }

  :root:root:root body .lens{ max-width: 340px; }
  :root:root:root body .lens__pin{ width: 34px; height: 34px; font-size: 0.8125rem; }

  :root:root:root body .breadcrumb{ font-size: 0.75rem; }
  :root:root:root body .timeline li{ gap: var(--s4); }
  :root:root:root body .timeline__num{ width: 48px; height: 48px; font-size: 0.9375rem; }
  :root:root:root body .timeline--linked li:not(:last-child)::before{ left: 23px; top: 48px; height: calc(100% - 48px + var(--s6)); }

  /* Edge-hugging dot grids read as clipping errors at this width */
  :root:root:root body .hero__dots-1, :root:root:root body .explain__dots, :root:root:root body .final__dots{ display: none; }
}

/* --------------------------------------------------------------------------
   Alignment guards
   -------------------------------------------------------------------------- */
/* A grid item's default min-width:auto lets wide content (a diagram, a long
   URL) push its track past the viewport. Pinning every layout grid child to 0
   keeps columns on the page so nothing escapes its container. */
:root:root:root body .hero__wrap > *, :root:root:root body .sim__layout > *, :root:root:root body .explain__grid > *, :root:root:root body .diagram-split > *, :root:root:root body .product__grid > *, :root:root:root body .signs__grid > *, :root:root:root body .why__grid > *, :root:root:root body .stats__grid > *, :root:root:root body .guides__grid > *, :root:root:root body .tile-grid > *, :root:root:root body .trustbar__inner > *, :root:root:root body .footer__top > *, :root:root:root body .finder__panel > *, :root:root:root body .life__grid > *, :root:root:root body .qa, :root:root:root body .timeline li, :root:root:root body .finder__steps li{ min-width: 0; }

/* Long unbroken strings must wrap rather than widen their column */
:root:root:root body .qa p, :root:root:root body .tile p, :root:root:root body .guide p, :root:root:root body .timeline p, :root:root:root body .sign__body p, :root:root:root body .refs li{ overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   25. Motion & print preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html{ scroll-behavior: auto; }
  :root:root:root body *, :root:root:root body *::before, :root:root:root body *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  :root:root:root.js body .reveal{ opacity: 1; transform: none; }
}

@media print {
  :root:root:root body .site-header, :root:root:root body .sticky-cta, :root:root:root body .site-footer, :root:root:root body .blob, :root:root:root body .dots, :root:root:root body .ring{ display: none !important; }
  body{ background: #fff; }
}

/* ==========================================================================
   26. Homepage layout blocks
   Structure follows the supplied reference arrangement; every colour, type
   token, radius and shadow comes from the HOYA system defined above.
   ========================================================================== */

/* --- 01 Header: nav centred on the bar ------------------------------------ */
/* Auto margins alone cannot centre the menu here: the brand's `margin-right:
   auto` and the menu's own two auto margins split the free space three ways,
   which pushes the menu off-centre by roughly half the difference between the
   logo and the login button. A three-column grid (1fr | menu | 1fr) centres
   the menu on the bar itself, so the two sides can be any width.
   Below 1080px the menu becomes an absolutely-positioned dropdown and the
   toggle appears, so the bar reverts to the original flex row. */
@media (min-width: 1081px) {
  :root:root:root body .nav{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }
  :root:root:root body .brand{ margin-right: 0; }
  :root:root:root body .nav__menu--center{ justify-self: center; margin-inline: 0; }
  :root:root:root body .nav__login{ justify-self: end; }
}

/* --- 02 Hero: full-bleed wash, centred headline, composed corners ---------- */
:root:root:root body .hero{
  position: relative;
  isolation: isolate;
  margin-top: calc(-1 * var(--header-h)); /* the wash runs behind the sticky header */
  padding-top: calc(var(--header-h) + clamp(1.5rem, 4vw, 3.25rem));
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
  background:
    radial-gradient(75% 60% at 50% 34%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(85% 70% at 8% 4%, var(--blue-soft) 0%, transparent 60%),
    radial-gradient(80% 70% at 96% 10%, var(--sun-mist) 0%, transparent 58%),
    radial-gradient(90% 80% at 88% 96%, var(--blue-mist) 0%, transparent 62%),
    var(--cream);
}
:root:root:root body .hero__wrap{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(1rem, 2vw, 1.75rem);
  row-gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

/* Halftone field filling the open right-hand side of the hero. Drawn in CSS
   rather than shipped as artwork: one dot grid, faded out towards the copy so
   it never crowds the text, with a solid disc breaking its edge. */
:root:root:root body .hero__ornament{
  position: absolute;
  top: 25%;
  right: 0; /* flush with the right edge of the hero */
  width: clamp(110px, 14vw, 219px);
  height: auto;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
/* Hero label: the same amber flag, sized for a two-line label */
:root:root:root body .hero__eyebrow{
  grid-column: 1 / 4;
  grid-row: 1;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.55;
  color: var(--blue-deep);
  border-left: 3px solid var(--sun);
  padding-left: 0.7rem;
  margin: clamp(0.5rem, 2vw, 1.75rem) 0 0;
}
:root:root:root body .hero__title{
  grid-column: 1 / -1;
  grid-row: 2;
  text-align: center;
  font-size: clamp(2.6rem, 8vw, 6.25rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.045em;
  color: var(--blue);
  margin: 0;
}

:root:root:root body .hero__figure{ grid-column: 1 / 6; grid-row: 3; margin: 0; }
:root:root:root body .hero__figure img{
  width: 100%;
  aspect-ratio: 4 / 4.2;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: var(--r-lg);
}
:root:root:root body .hero__copy{ grid-column: 6 / -1; grid-row: 3; }
:root:root:root body .hero__lead{
  font-size: clamp(1.0625rem, 1.35vw, 1.1875rem);
  color: var(--ink-60);
  max-width: 40.992em;
  margin: 0 0 var(--s5);
}
/* The strapline sits in the copy column rather than the display headline, so it
   carries the display face at a size between the headline and body copy */
:root:root:root body .hero__lead--tagline{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink);
  max-width: 13.12em;
  margin-bottom: var(--s4);   /* a description now follows it, so tighten the gap */
}
:root:root:root body .hero__shot{ grid-column: 1 / 5; grid-row: 4; margin: 0; }
/* The photograph is square (iq-girl-tree-square.jpg, cropped in close on the
   girl), so the frame is square too - the whole picture shows, nothing crops. */
:root:root:root body .hero__shot img{
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: var(--r);
  box-shadow: var(--shadow-md);
}
:root:root:root body .hero__stats{
  grid-column: 5 / 8;
  grid-row: 4;
  display: flex;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-self: end;
}
:root:root:root body .hero__stat strong{
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 4.6vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--blue);
}
:root:root:root body .hero__stat span{ display: block; margin-top: 0.45rem; font-size: var(--fs-xs); color: var(--ink-60); }
/* The hero card links to the MiYOSMART video, so it needs link resets */
:root:root:root body .hero__card{ text-decoration: none; color: inherit; }
:root:root:root body .hero__card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); }
:root:root:root body .hero__card{ transition: transform var(--t), box-shadow var(--t); }

:root:root:root body .hero__card{
  grid-column: 8 / -1;
  grid-row: 4;
  align-self: end;
  background: var(--white);
  border-radius: var(--r-lg);
  padding: clamp(1.35rem, 2.4vw, 2rem);
  box-shadow: var(--shadow-md);
}
:root:root:root body .hero__card-badge{
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 var(--s3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
}
:root:root:root body .hero__card-ico{
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--sun-soft);
  color: var(--blue-ink);
  flex: none;
}
:root:root:root body .hero__card-ico svg{ width: 18px; height: 18px; }
:root:root:root body .hero__card h2{
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  line-height: 1.2;
  margin: 0 0 var(--s3);
}
:root:root:root body .hero__card p{ font-size: var(--fs-sm); color: var(--ink-60); margin: 0; }

/* Desktop: the photograph sits clear below the headline, the copy beside it, and
   the stats, shot and card close the composition along the bottom edge. */
@media (min-width: 1081px) {
  :root:root:root body .hero{ padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
  :root:root:root body .hero__wrap{ row-gap: clamp(1rem, 2vw, 1.75rem); }
  :root:root:root body .hero__title{ position: relative; }
  :root:root:root body .hero__figure{
    grid-column: 1 / 5;
    grid-row: 3;
    align-self: start;
    margin-top: clamp(0.5rem, 1.5vw, 1.25rem); /* never crosses the headline */
  }
  :root:root:root body .hero__figure img{ aspect-ratio: 4 / 4.6; }
  /* Desktop only: tighter crop on the subject. The scale happens inside the frame,
     which clips it, so the picture box keeps exactly the same shape, position
     and size — only what is visible through it changes. Origin sits high so the
     zoom pulls in on the face rather than the centre of the frame. */
  :root:root:root body .hero__figure{ overflow: hidden; border-radius: var(--r-lg); }
  :root:root:root body .hero__figure img{
    /* Retuned for iq-girl-portrait.jpg. The old numbers (object-position 100%,
       translateX -6.94%) were measured against the boy photo, who sat well right
       of centre; the girl sits at ~53%, so that correction dragged her hard left.
       Neutral crop plus a small nudge now: cover leaves 15% horizontal slack, the
       centred crop puts her at 53.5% of the frame, the 1.24 zoom about the frame
       centre widens that to 4.3%, which is exactly what the translate takes back. */
    object-position: 50% 20%;
    transform: scale(1.24) translateX(-4.3%);
    transform-origin: 50% 22%;
  }
  /* Column 5, not 6: the photograph ends at column 4, so starting a column
     later left an entire empty track between the two. The small inset keeps
     the text off the photo edge without reopening that gap. */
  :root:root:root body .hero__copy{
    grid-column: 5 / 12;
    grid-row: 3;
    align-self: center;
    padding-left: clamp(1.5rem, 5vw, 4.5rem);
  }
  :root:root:root body .hero__stats{
    grid-column: 1 / 5;
    grid-row: 4;
    align-self: end;
    padding-bottom: clamp(0.5rem, 1.5vw, 1rem);
  }
  /* Desktop: a small square, exactly as tall as the "Inside MiYOSMART iQ" card
     beside it. The figure stretches to the row, but the picture is taken out of
     flow so it adds no height of its own — the card alone sizes the row, and the
     square then takes that height with width:auto, so both boxes share a top and
     a bottom edge. Sat slightly left of centre in its four-column track — the
     extra -12% on the translate is 12% of the picture's own width, so the nudge
     stays proportional at any viewport instead of drifting with a fixed pixel
     offset. */
  :root:root:root body .hero__shot{
    grid-column: 5 / 9;
    grid-row: 4;
    align-self: stretch;
    position: relative;
    width: 100%;
    min-height: 0;
  }
  :root:root:root body .hero__shot img{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(calc(-50% - 12%));
    height: 100%;
    width: auto;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: 50% 50%;
  }
  :root:root:root body .hero__card{
    grid-column: 9 / -1;
    grid-row: 4;
    align-self: end;
  }
}

/* --- 04 Feature strip + brand row ----------------------------------------- */
:root:root:root body .strip{
  display: grid;
  grid-template-columns: 0.92fr 1.28fr;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: stretch;
}

/* Left column - photo mosaic: shot + proof card above a wide tagged photo */
:root:root:root body .strip__mosaic{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  gap: clamp(0.75rem, 1.5vw, 1.15rem);
}
:root:root:root body .strip__shot{ margin: 0; border-radius: var(--r); overflow: hidden; }
:root:root:root body .strip__shot img{
  width: 100%; height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  /* The boy sits at about 70% across a 3:2 frame, so a centred crop pushes him
     to the right of this square. Pinning the crop to the right edge and zooming
     a touch brings his head to the middle. */
  object-position: 100% 38%;
  transform: scale(1.05);
  transform-origin: 100% 38%;
  display: block;
}
:root:root:root body .strip__stat{
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.1rem, 2vw, 1.5rem);
  box-shadow: var(--shadow-sm);
}
:root:root:root body .strip__stat-num{
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 auto;
}
:root:root:root body .strip__stat-num svg{ width: 26px; height: 26px; color: var(--sun-deep); flex: none; }
:root:root:root body .strip__stat-label{
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin: var(--s5) 0 0.4rem;
}
:root:root:root body .strip__stat-note{ font-size: var(--fs-sm); color: var(--ink-60); margin: 0; }

:root:root:root body .strip__wide{
  grid-column: 1 / -1;
  position: relative;
  margin: 0;
  border-radius: var(--r);
  overflow: hidden;
}
:root:root:root body .strip__wide img{
  width: 100%;
  height: 100%;
  min-height: clamp(230px, 24vw, 340px);
  object-fit: cover;
  display: block;
}
:root:root:root body .strip__tags{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: clamp(0.9rem, 1.8vw, 1.25rem);
  background: linear-gradient(to top, rgba(46, 93, 166, 0.35), rgba(46, 93, 166, 0));
}
:root:root:root body .strip__tags li{
  background: var(--white);
  color: var(--blue);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
}

/* Right column - features beside a photo, recognition row beneath both */
/* The right column is stretched to match the taller photo mosaic beside it, so
   it always carries some slack. `margin-top: auto` on the feature list pushes
   that slack above the list, seating it low in the column, and the fixed
   bottom margin is the only gap left underneath. Tune that one value to raise
   or lower the block. */
:root:root:root body .strip__side{
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2.25rem);
}
:root:root:root body .strip__list{ margin-top: auto; margin-bottom: clamp(0.75rem, 1.6vw, 1.25rem); }
:root:root:root body .strip__img{ border-radius: var(--r); overflow: hidden; margin: 0; }
:root:root:root body .strip__img img{
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;          /* wide banner crop, not a tall portrait */
  object-fit: cover;
  object-position: center 12%;  /* keeps the child's face inside the wide crop */
  display: block;
  /* The source is a wide environmental shot, so the child reads small in the
     banner crop. Scaling inside the clipped figure pushes in on her without
     touching the box: a transform never affects layout or spacing. Her face
     sits at 44% / 51% of this crop (measured from the red frames in the
     source); scaling 2x about 38% / 52% lands it dead centre of the frame,
     since a point p maps to o + (p - o) * scale. */
  transform: scale(2);
  transform-origin: 38% 52%;
}
:root:root:root body .strip__list{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
:root:root:root body .strip__item{ display: block; }
:root:root:root body .strip__item + .strip__item{
  border-left: 1px solid var(--line);
  padding-left: clamp(1.25rem, 2.5vw, 2rem);
}
:root:root:root body .strip__item-ico{
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-bottom: var(--s3);
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue);
}
:root:root:root body .strip__item-ico svg{ width: 22px; height: 22px; }
:root:root:root body .strip__item h3{ font-size: 1.1875rem; margin-bottom: 0.35rem; }
:root:root:root body .strip__item p{ font-size: var(--fs-sm); color: var(--ink-60); margin: 0; }

:root:root:root body .brandrow{
  grid-column: 1 / -1;
  margin-top: clamp(0.75rem, 2vw, 1.5rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--line);
}
:root:root:root body .brandrow__label{
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem);
  max-width: 30.176em;
}
:root:root:root body .brandrow__marks{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
:root:root:root body .brandrow__marks img{ max-height: 64px; width: auto; }
:root:root:root body .brandrow__marks .brandrow__wordmark{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: 0.02em;
  color: var(--ink-40);
}

/* --- Split head: title left, supporting copy right ------------------------ */
:root:root:root body .split-head{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: end;
  /* same step as .section-head, so both heading blocks open a section identically */
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
:root:root:root body .split-head h2{ margin-bottom: 0; }
:root:root:root body .split-head p:not(.eyebrow){ font-size: var(--fs-lead); color: var(--ink-60); margin: 0; }
:root:root:root body .section--ink .split-head p:not(.eyebrow){ color: rgba(255, 255, 255, 0.8); }

/* --- Split head, intro variant: title + lead left, briefs stacked right ----
   Used by the "Find a MiYOSMART Expert" section. The plain .split-head puts one
   short sentence beside the title and leaves the supporting copy in a separate
   two-column .brief-grid below, which left a wide gap under that sentence. Here
   the lead joins the title in the left column and the two briefs stack in the
   right one, so both columns run to a similar depth and the section reads as a
   single block. Scoped to the modifier — the shared .split-head is unchanged. */
:root:root:root body .split-head--intro{ align-items: start; }
/* The title runs up to --fs-h2 (2.85rem) on two lines here, so a flat --s5 read as
   cramped against it. Scale the gap with the viewport instead, so it opens up at the
   widths where the heading is biggest. The current values sit between the old flat
   1.5rem (too tight) and the first scaled attempt of 1.75–2.5rem (too loose).
   NOTE the `p.` — `.split-head p:not(.eyebrow)` above sets `margin: 0` and scores
   (0,2,1) because :not()'s argument counts. A classes-only selector here loses to it
   and the gap silently stays at zero. Keep the element qualifier on both rules. */
:root:root:root body .split-head--intro p.split-head__lead{ margin-top: clamp(1.15rem, 1.5vw, 1.6rem); }
:root:root:root body .brief-stack{ display: grid; gap: clamp(1.75rem, 3.5vw, 2.75rem); }
/* The right-hand copy starts level with the TITLE, not with the eyebrow above it,
   so the two columns read as one block instead of the paragraph floating a line
   high. The offset is the eyebrow's own height (font-size x its line-height) plus
   the site-wide eyebrow-to-title gap, so it stays correct if either changes.

   The last term is an OPTICAL correction and the reason the two columns still did
   not look level. The two terms above align the BOXES, but the first line of text
   does not sit in the same place inside each box: the h2 runs at --fs-h2 (~45px)
   with line-height 1.06, so its cap-top is pushed down by the font's own ascender
   space, while the brief paragraph runs at --fs-body (17px) and starts much closer
   to its box top. Net result was the paragraph reading ~6-7px HIGH against the
   title. 0.4rem pushes it back down onto the same line.

   Why a flat value and not a formula: --fs-h2 clamps at 4vw, and this two-column
   layout only exists above 1080px, where the heading is already at or within 5% of
   its 2.85rem maximum. The required correction only varies between ~5.7px and
   ~6.8px across that whole range, so 0.4rem is inside 1px everywhere it applies. */
:root:root:root body .split-head--intro .brief-stack{
  margin-top: calc(var(--fs-xs) * 1.25 + var(--eyebrow-gap) + 0.4rem);
}
/* .split-head's own paragraph rule is more specific than .brief p, so the brief
   copy would otherwise inherit the larger lead size. Put it back to body size. */
:root:root:root body .split-head--intro .brief p{ font-size: var(--fs-body); max-width: none; }

@media (max-width: 1080px) {
  /* Stacked by the .split-head collapse above; the lead no longer needs to hold
     a column open, so it sits closer to the title. */
  :root:root:root body .split-head--intro p.split-head__lead{ margin-top: clamp(0.9rem, 2.2vw, 1.25rem); }
  /* One column now: there is no eyebrow beside the copy to align away from. */
  :root:root:root body .split-head--intro .brief-stack{ margin-top: 0; }
}

/* --- Locator title -------------------------------------------------------- */
/* A short instruction line sitting directly above the expert locator. It is a
   full sentence rather than a label, so it runs a step under the h3 scale, and
   the locator's own top margin is replaced by a tighter one so the title reads
   as belonging to the map beneath it. */
:root:root:root body .locator-title{
  font-size: clamp(1.25rem, 2.1vw, 1.6rem);
  line-height: 1.3;
  margin: 0;
  max-width: 34em;
}
:root:root:root body .locator-title + .locator{ margin-top: clamp(1rem, 2vw, 1.5rem); }

/* --- 05 Service cards ----------------------------------------------------- */
:root:root:root body .svc-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
:root:root:root body .svc{
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(430px, 44vw, 620px);
  background: var(--blue-ink);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
/* Photo fills the whole card; the copy block sits on top of it */
:root:root:root body .svc__media{ position: absolute; inset: 0; margin: 0; }
:root:root:root body .svc__media img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-slow);
}
:root:root:root body .svc:hover .svc__media img{ transform: scale(1.045); }
/* Light scrim so the dark copy stays legible over any photograph */
:root:root:root body .svc__media::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
              var(--white) 0%,
              var(--white) 30%,
              rgba(255, 255, 255, 0.95) 42%,
              rgba(255, 255, 255, 0.66) 55%,
              rgba(255, 255, 255, 0) 74%);
  pointer-events: none;
}
:root:root:root body .svc__body{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
}
:root:root:root body .svc__title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 var(--s3);
}
:root:root:root body .svc__body p{ font-size: var(--fs-sm); color: var(--ink-60); margin-bottom: var(--s5); }
:root:root:root body .svc__body .btn{
  margin-top: auto;
  width: 100%;
  justify-content: space-between;
  text-align: left;
}
:root:root:root body .svc__body .btn svg{ color: var(--sun); }

/* --- 05b Diagram split: anatomy artwork left, explainer copy right ---------
   The artwork is line art on a transparent ground, so it sits directly on the
   section rather than in a photo frame - no crop, no shadow, no radius. */
:root:root:root body .diagram-split{
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
:root:root:root body .diagram-split__figure{ margin: 0; }
:root:root:root body .diagram-split__figure img{
  width: 100%;
  height: auto;
  max-width: 620px;
  margin-inline: auto;
}

/* --- Diagram split, flush variant ----------------------------------------
   The default centres a naturally-sized photograph beside the copy, so its top
   and bottom edges sit inside the text column. This variant makes the picture
   run the full depth of the copy instead — top edge level with the eyebrow,
   bottom edge level with the last thing in the column — and crops rather than
   stretches to fill it. Used by the MiYOSMART Expert Award page; the shared
   .diagram-split is untouched. */
:root:root:root body .diagram-split--flush{ align-items: stretch; }
:root:root:root body .diagram-split--flush .diagram-split__figure, :root:root:root body .diagram-split--flush .diagram-split__figure picture{ display: flex; }
:root:root:root body .diagram-split--flush .diagram-split__figure picture{
  width: 100%;
  max-width: 620px;
  margin-inline: auto;
}
:root:root:root body .diagram-split--flush .diagram-split__figure img{
  width: 100%;
  height: auto;
  max-width: none;
  align-self: stretch;
  min-height: 0;
  /* Off-centre so the crop keeps the child's face rather than the mirror edge */
  object-fit: cover;
  object-position: 35% center;
}
/* --- Myths: a cream lead-in over two solid panels ------------------------
   The claim itself carries the colour, so a parent scanning the page meets the
   myth as a statement first and the correction immediately under it. */
:root:root:root body .myths__intro{
  display: grid;
  /* Photograph capped rather than proportional, so the panel is sized by the
     copy it holds instead of by a nearly square image */
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: end;
  background: var(--cream);
  padding: clamp(1.75rem, 4vw, 3.25rem);
  padding-bottom: 0;              /* the photograph meets the panel's lower edge */
}
:root:root:root body .myths__copy{ align-self: center; padding-bottom: clamp(1.75rem, 4vw, 3.25rem); }
:root:root:root body .myths__copy p{ color: var(--ink-80); margin-bottom: var(--s4); }
:root:root:root body .myths__copy p:last-child{ margin-bottom: 0; }
:root:root:root body .myths__media{ margin: 0; align-self: end; }
:root:root:root body .myths__media img{ display: block; width: 100%; height: auto; }

/* A hairline of page ground between the panels, as on the reference */
:root:root:root body .myths__grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
}
:root:root:root body .myth{
  background: var(--blue);
  color: var(--white);
  padding: clamp(1.75rem, 4vw, 3rem);
}
:root:root:root body .myth__label{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--white);
  margin: 0 0 var(--s3);
}
/* Body face at a regular weight: the display face is only loaded from 600 up,
   which would set the claim heavier than the label above it */
:root:root:root body .myth__claim{
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.2rem, 2.1vw, 1.55rem);
  line-height: 1.3;
  color: var(--white);
  margin: 0 0 var(--s4);
  padding-left: clamp(0.85rem, 1.8vw, 1.15rem);
  border-left: 4px solid var(--sun);
  text-wrap: balance;
}
:root:root:root body .myth > p:not(.myth__label){
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--fs-sm);
  margin: 0;
}

@media (max-width: 860px) {
  :root:root:root body .myths__intro{ grid-template-columns: 1fr; padding-bottom: 0; }
  :root:root:root body .myths__media{ max-width: 380px; margin-inline: auto; }
  :root:root:root body .myths__grid{ grid-template-columns: 1fr; }
}

/* --- D.I.M.S. section, following the original page: the technology mark and
   its three statements sit above a rule, with the two explanatory diagrams
   ranged below. -------------------------------------------------------- */
:root:root:root body .dims-intro{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  max-width: 62rem;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line);
}
:root:root:root body .dims-intro__mark{ width: clamp(72px, 8vw, 108px); height: auto; }
:root:root:root body .dims-intro__copy p{ color: var(--ink-60); margin-bottom: var(--s4); }
:root:root:root body .dims-intro__copy p:last-child{ margin-bottom: 0; }

/* The face-on lens and the eye cross-section read as one pair, as on the
   original: the first shows where the segments sit, the second what they do */
:root:root:root body .dims-figures{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
:root:root:root body .dims-figures figure{ margin: 0; }
:root:root:root body .dims-figures img{ display: block; width: 100%; height: auto; margin-inline: auto; }
:root:root:root body .dims-figures__lens img{ max-width: 320px; }
:root:root:root body .dims-figures__eye img{ max-width: 560px; }

@media (max-width: 860px) {
  :root:root:root body .dims-intro{ grid-template-columns: 1fr; }
  /* Stacked above the copy rather than beside it, so it centres on its own
     row; the paragraphs stay ranged left */
  :root:root:root body .dims-intro__mark{ justify-self: center; }
  :root:root:root body .dims-figures{ grid-template-columns: 1fr; }
  :root:root:root body .dims-figures__eye img{ max-width: 480px; }
}

/* Body copy, so it takes the site body size rather than the larger lead size */
:root:root:root body .diagram-split__copy > p:not(.eyebrow){
  color: var(--ink-60);
  max-width: 35.136em;
  margin-bottom: var(--s4);
}
:root:root:root body .diagram-split__copy h3{
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
  margin-bottom: var(--s4);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--line);
}
/* That divider marks a new subject in the prose flow; a heading inside a boxed
   callout is already separated by the box, so it keeps the component's own rhythm */
:root:root:root body .diagram-split__copy .callout h3{
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
:root:root:root body .diagram-split__actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.25rem);
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

/* --- 06 Action band ------------------------------------------------------- */
:root:root:root body .band{
  --band-pad: clamp(2rem, 4.2vw, 3.5rem);
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background:
    radial-gradient(70% 90% at 100% 20%, var(--sun-mist) 0%, transparent 62%),
    radial-gradient(85% 110% at 4% 0%, var(--blue-soft) 0%, transparent 58%),
    linear-gradient(115deg, var(--blue-mist) 0%, var(--cream) 62%, var(--sun-mist) 100%);
  padding: 0; /* the photograph bleeds to the edges; the copy carries the padding */
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  align-items: stretch;
}
:root:root:root body .band__copy{
  padding: var(--band-pad);
  align-self: center;
}

:root:root:root body .band__checks{ list-style: none; margin: 0; padding: 0 0 var(--s5); display: grid; gap: 0.9rem; }
:root:root:root body .band__checks li{
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 0.85rem;
  align-items: start;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink);
}
:root:root:root body .band__tick{
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  margin-top: 0.1rem;
}
:root:root:root body .band__tick svg{ width: 16px; height: 16px; }

:root:root:root body .band__note{
  margin: 0 0 var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid rgba(46, 93, 166, 0.18);
  font-size: var(--fs-sm);
  color: var(--ink-60);
}

:root:root:root body .band__cta{
  --btn-bg: none;
  --btn-bd: transparent;
  --btn-fg: var(--blue-ink);
  background-image: linear-gradient(95deg, var(--sun-soft) 0%, var(--sun) 55%, var(--sun-deep) 100%);
}
:root:root:root body .band__cta:hover{
  --btn-bd: transparent;
  --btn-fg: var(--blue-ink);
  background-image: linear-gradient(95deg, var(--sun) 0%, var(--sun-deep) 60%, var(--sun-dark) 100%);
}

/* Media fills the panel and bleeds off its bottom edge */
:root:root:root body .band__media{
  position: relative;
  align-self: stretch;
  margin: 0;
  min-width: 0;
}
:root:root:root body .band__media img{
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: 0; /* the band clips it, so the photo meets three edges flush */
}

/* Cut-out artwork: shown whole on the band gradient, standing on the bottom edge */
:root:root:root body .band__media--cutout{
  display: flex;
  align-items: flex-end;      /* the artwork stands on the band's bottom edge */
  justify-content: flex-end;  /* and bleeds off its right edge, as the photo did */
  padding: var(--s5) 0 0 var(--s4);
}
:root:root:root body .band__media--cutout img{
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 560px;
  min-height: 0;
  object-fit: contain;
}

/* Button and phone number share one row at the foot of the copy */
:root:root:root body .band__actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.25rem);
}
:root:root:root body .band__call{ min-width: 0; }
:root:root:root body .band__call-label{
  margin: 0 0 0.2rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 1.2;
  color: var(--ink-60);
}
:root:root:root body .band__call-num{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
  color: var(--blue);
  text-decoration: none;
}
:root:root:root body .band__call-num:hover{ color: var(--blue-deep); text-decoration: underline; }
:root:root:root body .band__call-num svg{ width: 17px; height: 17px; flex: none; }

/* --- 07 About ------------------------------------------------------------- */
:root:root:root body .about-grid{
  display: grid;
  grid-template-columns: 0.98fr 1.02fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: stretch;
}
/* The photograph runs the full height of the row; the copy centres against it
   rather than riding its top edge */
/* The artwork carries ~40px of transparent margin above the tan card (the
   decorative discs sit in it), so the card's optical centre is lower than the
   image box centre. A small offset lands the copy on the card, not the box. */
:root:root:root body .about-grid__copy{
  align-self: center;
  position: relative;
  top: clamp(0.5rem, 1.2vw, 1.25rem);
}
:root:root:root body .about-media{ position: relative; align-self: stretch; }
:root:root:root body .about-media > picture{ display: block; height: 100%; }
:root:root:root body .about-media img{
  width: 100%;
  height: 100%;
  min-height: 480px;
  object-fit: cover;
  object-position: 50% 40%;
  border-radius: var(--r);
}

/* Landscape source: stretches with the column like the base variant so both
   sides of the row start and finish together, framed a little higher so the
   faces survive the taller crop */
:root:root:root body .about-media--wide img{ object-position: 50% 35%; }

/* Match-the-copy variant: drops the 480px floor so the row is sized purely by
   the text column. Held a little narrower than its grid column and centred
   against the copy, so the photograph supports the text rather than dominating
   the row. The source is square, so sizing by aspect ratio also removes the
   crop that stretching to the copy height used to force. */
:root:root:root body .about-media--fit{
  max-width: 88%;
  justify-self: end;
  align-self: center;
}
:root:root:root body .about-media--fit img{
  min-height: 0;
  height: auto;
  aspect-ratio: 1 / 1;
}

@media (max-width: 900px) {
  :root:root:root body .about-media--fit{ max-width: 100%; }
}

/* Reassurance card tucked into the bottom-left corner of the photograph */
/* In flow by default and lifted out only on wide screens. Written this way
   round so that a missed override can never leave the card floating over the
   content below it -- the overlap only exists where it is explicitly asked for. */
:root:root:root body .about-media__note{
  position: static;
  width: auto;
  margin-top: var(--s4);
  padding: clamp(1.1rem, 2.2vw, 1.5rem);
  border-radius: var(--r-sm);
  background: var(--white);
  box-shadow: var(--shadow-lg);
}
@media (min-width: 1081px) {
  :root:root:root body .about-media__note{
    position: absolute;
    z-index: 2;
    left: clamp(1rem, 2vw, 1.75rem);
    bottom: clamp(1rem, 2.5vw, 2.25rem);
    width: min(80%, 340px);
    margin-top: 0;
  }
}
:root:root:root body .about-media__note-label{
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sun-dark);
  margin: 0 0 var(--s3);
}
:root:root:root body .about-media__note-body{
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 0.85rem;
  align-items: start;
}
:root:root:root body .about-media__note-ico{
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  color: var(--blue);
}
:root:root:root body .about-media__note-ico svg{ width: 18px; height: 18px; }
:root:root:root body .about-media__note-body p{
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--ink-60);
  margin: 0;
}

/* Outsized figures, unit set in the accent - no rule above them */
:root:root:root body .about-stats{
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: clamp(2rem, 5vw, 4.5rem);
  margin-top: clamp(2rem, 4.5vw, 3.25rem);
}
:root:root:root body .about-stats__num{
  display: flex;
  align-items: baseline;
  gap: 0.12em;
  margin: 0 0 var(--s3);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.75rem, 5.6vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--blue-ink);
}
:root:root:root body .about-stats__num span{ color: var(--sun); font-size: 0.6em; letter-spacing: -0.02em; }
:root:root:root body .about-stats__label{ font-size: var(--fs-body); color: var(--ink-60); margin: 0; max-width: 16.104em; }

/* Three findings side by side inside the narrower copy column: the pair sizing
   above is too large to fit a third figure, so the trio steps the numerals
   down a notch. Collapses to one column with the base rule below 720px. */
:root:root:root body .about-stats--trio{
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.1rem, 2.2vw, 1.75rem);
}
:root:root:root body .about-stats--trio .about-stats__num{ font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
:root:root:root body .about-stats--trio .about-stats__label{ font-size: var(--fs-sm); max-width: none; }

/* --- 08 Four-up profile cards --------------------------------------------- */
:root:root:root body .people-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}
:root:root:root body .person{
  --person-pad: clamp(0.9rem, 1.8vw, 1.15rem);
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--person-pad);
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
:root:root:root body .person:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--blue-soft); }
:root:root:root body .person__chip{
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: var(--s3);
  padding: 0.3rem 0.75rem;
  border-radius: var(--r-pill);
  background: var(--blue-soft);
  color: var(--blue);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
/* Photograph bleeds to the card's left and right edges - squared off there,
   with the padding still holding it clear of the top and bottom. */
:root:root:root body .person img{
  width: calc(100% + var(--person-pad) * 2);
  margin-inline: calc(var(--person-pad) * -1);
  max-width: none;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0;
}
:root:root:root body .person h3{ font-size: 1.0625rem; margin: var(--s4) 0 0.15rem; }
:root:root:root body .person__role{ font-size: var(--fs-xs); color: var(--sun-dark); font-weight: 700; margin: 0 0 var(--s3); }
:root:root:root body .person__points{ list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
:root:root:root body .person__points li{
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 0.5rem;
  align-items: start;
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--ink-60);
  line-height: 1.45;
}
:root:root:root body .person__points svg{ width: 16px; height: 16px; color: var(--blue); margin-top: 2px; }

/* --- 09 Dark bento -------------------------------------------------------- */
:root:root:root body .bento{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(232px, auto);
  gap: clamp(0.85rem, 1.6vw, 1.25rem);
}
:root:root:root body .bento__card{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--r);
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
}
:root:root:root body .bento__num{
  align-self: flex-start;
  margin-bottom: auto;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 2.6vw, 2.375rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--sun-soft);
}
:root:root:root body .bento__card h3{ font-size: 1.125rem; color: var(--white); margin: var(--s4) 0 0.35rem; }
:root:root:root body .bento__card p{ font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.92); margin: 0; }
:root:root:root body .bento__img{ border-radius: var(--r); overflow: hidden; }
:root:root:root body .bento__img img{ width: 100%; height: 100%; object-fit: cover; }
:root:root:root body .bento__card--wide{ grid-column: span 2; }

/* --- 10 Testimonial ------------------------------------------------------- */
:root:root:root body .voice{
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
:root:root:root body .voice__col{ --voice-indent: calc(62px + clamp(1rem, 2.2vw, 1.75rem)); }
:root:root:root body .voice__col h2{ margin-bottom: clamp(2rem, 4vw, 3.25rem); }
:root:root:root body .voice__quote{
  display: flex;
  gap: clamp(1rem, 2.2vw, 1.75rem);
  margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
}
:root:root:root body .voice__mark{
  flex: none;
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--blue-ink);
  color: var(--sun);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.5rem;
  line-height: 1;
  padding-top: 0.7rem; /* optical centring of the quote glyph */
}
:root:root:root body .voice blockquote{
  margin: 0;
  font-size: clamp(1.125rem, 1.85vw, 1.5rem);
  line-height: 1.55;
  color: var(--ink-60);
}
:root:root:root body .voice__by{
  margin-left: var(--voice-indent);
  padding-top: clamp(1.5rem, 2.5vw, 2rem);
  border-top: 1px solid var(--line);
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
:root:root:root body .voice__who{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  color: var(--ink);
  margin-bottom: 0.3rem;
}
:root:root:root body .voice__where{
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0;
}
:root:root:root body .voice__actions{ margin-left: var(--voice-indent); }
:root:root:root body .voice__media{ position: relative; }
:root:root:root body .voice__media img{ width: 100%; aspect-ratio: 4 / 4.2; object-fit: cover; border-radius: var(--r-lg); }
:root:root:root body .voice__floats{
  position: absolute;
  right: clamp(-1rem, -1.2vw, 0rem);
  bottom: clamp(1.5rem, 4vw, 2.75rem);
  display: grid;
  gap: 0.65rem;
  justify-items: end;
}
:root:root:root body .voice__float{
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.4rem 0.4rem 0.4rem 1.15rem;
  border-radius: var(--r-pill);
  background: var(--white);
  box-shadow: var(--shadow-md);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--ink);
  white-space: nowrap;
}
:root:root:root body .voice__float-ico{
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--sun-soft);
  color: var(--blue-ink);
  flex: none;
}
:root:root:root body .voice__float-ico svg{ width: 19px; height: 19px; }

/* --- 11 Certifications ---------------------------------------------------- */
:root:root:root body .cert-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}
:root:root:root body .cert{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  text-align: center;
}
:root:root:root body .cert__seal{
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  margin: 0 auto var(--s4);
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue);
}
:root:root:root body .cert__seal svg{ width: 28px; height: 28px; }
:root:root:root body .cert__seal--art{ width: 78px; height: 78px; background: none; }
:root:root:root body .cert__seal--art img{ width: 100%; height: 100%; object-fit: contain; }
:root:root:root body .cert h3{ font-size: 1rem; margin-bottom: 0.35rem; }
:root:root:root body .cert p{ font-size: var(--fs-xs); color: var(--ink-60); margin: 0; }

/* Feature variant: the same card, sized to carry a full award write-up rather
   than a one-line summary. Left-aligned, larger seal, body at reading size. */
:root:root:root body .cert-grid--2{ grid-template-columns: repeat(2, 1fr); }
:root:root:root body .cert-grid--3{ grid-template-columns: repeat(3, 1fr); }

/* Icon-and-label card: the feature icons carry more detail than a single glyph
   (laurel leaves, defocus segments, a face), so the standard 28px seal loses
   them. Larger seal, and the label is the only other content. */
:root:root:root body .cert--icon{ padding: clamp(1.8rem, 3vw, 2.5rem) clamp(1.25rem, 2.4vw, 1.75rem); }
:root:root:root body .cert--icon .cert__seal{ width: 92px; height: 92px; margin-bottom: var(--s5); }
:root:root:root body .cert--icon .cert__seal svg{ width: 46px; height: 46px; }

/* Supplied feature icons, shipped as artwork in the brand blue so they need no
   masking or filters to read on the pale seal */
:root:root:root body .cert__img{ width: 44px; height: 44px; object-fit: contain; }
:root:root:root body .cert--icon h3{ font-size: 1.0625rem; margin-bottom: 0; }

:root:root:root body .cert--feature{
  --cert-pad: clamp(1.6rem, 3vw, 2.5rem);
  text-align: left;
  padding: var(--cert-pad);
  display: flex;
  flex-direction: column;
}
:root:root:root body .cert--feature .cert__seal{ margin: 0 0 var(--s5); }
/* The award artwork leads the card from its own tinted plate, run full-bleed to
   the card edges with negative margins. Geneva is a wide medal-and-diplomas
   composition, SILMO a single round seal; a fixed image height plus
   `object-fit: contain` sizes both to the same visual weight. The height is set
   in absolute units because a percentage cannot resolve inside a centred grid
   item, which would let the artwork overflow the plate. */
:root:root:root body .cert--feature .cert__seal--art{
  width: auto;
  height: auto;
  border-radius: 0;   /* the base seal is a circle; the plate is a full-bleed band */
  min-height: clamp(215px, 22vw, 290px);
  margin: calc(-1 * var(--cert-pad)) calc(-1 * var(--cert-pad)) var(--s5);
  padding: var(--cert-pad);
  background: var(--blue-mist);
  border-bottom: 1px solid var(--line);
}
:root:root:root body .cert--feature .cert__seal--art img{
  width: auto;
  max-width: 100%;
  height: clamp(155px, 16vw, 210px);
  object-fit: contain;
}
:root:root:root body .cert--feature .cert__year{
  align-self: flex-start;   /* column flex would otherwise stretch the chip */
  margin-bottom: var(--s3);
  padding: 0.25rem 0.65rem;
  border-radius: var(--r-pill);
  background: var(--sun-mist);
  color: var(--sun-dark);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
:root:root:root body .cert--feature h3{ font-size: var(--fs-h3); margin-bottom: var(--s4); }
:root:root:root body .cert--feature p{ font-size: var(--fs-sm); color: var(--ink-80); margin-bottom: var(--s4); }
:root:root:root body .cert--feature p:last-child{ margin-bottom: 0; }
:root:root:root body .cert--feature .cert__lead{ color: var(--ink); font-weight: 600; }

/* Research paper: document card with a download action pinned to the bottom. */
:root:root:root body .paper{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s4);
}
:root:root:root body .paper .cert__seal{ margin: 0; }
/* --- Research papers read in place ---------------------------------------
   The PDFs are served from HOYA's own asset host and embedded here, so the
   papers can be read on the page instead of bouncing the reader to a journal
   site. The fallback paragraph shows only when the frame cannot render. */
:root:root:root body .paper-list{ display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }

:root:root:root body .paper--doc{
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
:root:root:root body .paper--doc .paper__intro{ display: grid; justify-items: start; }
:root:root:root body .paper--doc .cert__seal{ margin: 0 0 var(--s5); }
:root:root:root body .paper--doc .paper__intro .btn{ margin-top: var(--s5); }

:root:root:root body .paper__doc{
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--blue-mist);
}
:root:root:root body .paper__doc iframe{
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: clamp(420px, 58vh, 620px);
  border: 0;
  background: var(--white);
}
/* Sits behind the frame, so it is only visible if the frame paints nothing */
:root:root:root body .paper__doc-fallback{
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  align-content: center;
  margin: 0;
  padding: var(--s6);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--ink-60);
}

@media (max-width: 900px) {
  :root:root:root body .paper--doc{ grid-template-columns: 1fr; }
  :root:root:root body .paper__doc iframe{ height: clamp(360px, 70vh, 560px); }
}

/* Phones: no embedded reader. A PDF in an iframe is unusable at this width and
   costs a heavy download, so the card keeps its summary and its open-in-a-new-tab
   button instead. */
@media (max-width: 720px) {
  :root:root:root body .paper__doc{ display: none; }
}

:root:root:root body .paper h3{ font-size: 1.125rem; margin: 0; }
:root:root:root body .paper p{ margin: 0; }
:root:root:root body .paper .btn{ margin-top: auto; }
:root:root:root body .paper__pending{
  font-size: var(--fs-xs);
  color: var(--ink-60);
  margin-top: auto;
  font-style: italic;
}

/* --- 12 Dark call-to-action band ------------------------------------------ */
:root:root:root body .darkcta{
  position: relative;
  overflow: hidden;
  background: var(--blue-ink);
  text-align: center;
}
:root:root:root body .darkcta__bg{ position: absolute; inset: 0; z-index: 0; }
:root:root:root body .darkcta__bg img{ width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
:root:root:root body .darkcta__bg::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(46, 93, 166, 0.62) 0%, rgba(46, 93, 166, 0.82) 100%);
}
:root:root:root body .darkcta__inner{
  position: relative;
  z-index: 2;
  max-width: 700px;
  margin-inline: auto;
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}
:root:root:root body .darkcta h2{ color: var(--white); }
:root:root:root body .darkcta p:not(.eyebrow){ color: rgba(255, 255, 255, 0.92); margin-inline: auto; margin-bottom: var(--s6); }
:root:root:root body .darkcta .btn-row{ justify-content: center; }
/* the blue veil is lighter now, so the copy carries its own soft shadow */
:root:root:root body .darkcta .eyebrow, :root:root:root body .darkcta h2, :root:root:root body .darkcta p{ text-shadow: 0 1px 14px rgba(9, 30, 72, 0.45); }

/* Split variant: a cut-out graphic stands beside the copy instead of behind it.
   A light artwork under the blue veil would only wash out, so this variant
   drops the veil and lets the blue band carry the contrast on its own. */
:root:root:root body .darkcta--split{ text-align: left; }
:root:root:root body .darkcta--split .darkcta__inner{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  max-width: var(--maxw);
  padding-block: clamp(3rem, 5.5vw, 4.5rem) 0;
}
:root:root:root body .darkcta--split .btn-row{ justify-content: flex-start; }
:root:root:root body .darkcta--split p:not(.eyebrow){ margin-inline: 0; }
:root:root:root body .darkcta--split .eyebrow, :root:root:root body .darkcta--split h2, :root:root:root body .darkcta--split p{ text-shadow: none; }
/* Soft variant: the same split CTA carried on the light band gradient instead
   of the flat blue. The background flips from dark to light, so every colour
   the dark variant sets for white-on-blue has to be reset here - heading,
   body, eyebrow and the outline button all step back to the ink/blue scale.
   Scoped to a modifier so the blue CTA elsewhere is untouched. */
:root:root:root body .darkcta--soft{
  background:
    radial-gradient(70% 90% at 100% 20%, var(--sun-mist) 0%, transparent 62%),
    radial-gradient(85% 110% at 4% 0%, var(--blue-soft) 0%, transparent 58%),
    linear-gradient(115deg, var(--blue-mist) 0%, var(--cream) 62%, var(--sun-mist) 100%);
}
:root:root:root body .darkcta--soft h2{ color: var(--blue); }
:root:root:root body .darkcta--soft p:not(.eyebrow){ color: var(--ink-80); }
:root:root:root body .darkcta--soft .eyebrow{ color: var(--blue-deep); }

:root:root:root body .darkcta__figure{ margin: 0; align-self: end; }
:root:root:root body .darkcta__figure img{
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  margin-inline: auto;
}

/* --- 13 Article cards ----------------------------------------------------- */
:root:root:root body .post-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
:root:root:root body .post{
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  text-decoration: none;
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
:root:root:root body .post:hover{ transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--blue-soft); }
:root:root:root body .post img{ width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
:root:root:root body .post__body{ display: flex; flex-direction: column; flex: 1; padding: clamp(1.25rem, 2.4vw, 1.6rem); }
:root:root:root body .post__meta{
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-bottom: var(--s3);
}
:root:root:root body .post h3{ font-size: 1.125rem; margin-bottom: var(--s4); }
:root:root:root body .post__more{
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--blue);
  transition: gap var(--t-fast);
}
:root:root:root body .post:hover .post__more{ gap: 0.8rem; }
:root:root:root body .post__more svg{ width: 15px; height: 15px; }

/* --- Pagination ----------------------------------------------------------
   Cards on another page leave the flow entirely, so the grid never keeps a
   gap for them. The control itself is built by script - see js/main.js. */
:root:root:root body .is-paged-out{ display: none; }

:root:root:root body .pager{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 1.5vw, 1rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
:root:root:root body .pager__list{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
:root:root:root body .pager__list li{ margin: 0; }

:root:root:root body .pager__num, :root:root:root body .pager__step{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--blue);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
:root:root:root body .pager__num:hover, :root:root:root body .pager__step:hover:not([disabled]){ background: var(--blue-soft); border-color: var(--blue-soft); }

:root:root:root body .pager__num[aria-current="page"]{
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
  cursor: default;
}
:root:root:root body .pager__step[disabled]{
  color: var(--ink-40);
  border-color: var(--line-soft);
  cursor: default;
}
:root:root:root body .pager__step-ico{ display: inline-flex; }
:root:root:root body .pager__step-ico--prev{ transform: rotate(180deg); }
:root:root:root body .pager__step svg{ width: 16px; height: 16px; }

:root:root:root body .pager__gap{
  display: inline-flex;
  justify-content: center;
  min-width: 28px;
  color: var(--ink-40);
}

/* --- 14 Footer newsletter ------------------------------------------------- */
:root:root:root body .newsletter{ margin-top: var(--s5); }
:root:root:root body .newsletter h4{
  color: var(--white);
  font-size: 0.8125rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: var(--s3);
}
:root:root:root body .newsletter__row{ display: flex; gap: 0.5rem; }
:root:root:root body .newsletter__row input{
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 0.7rem 1rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
}
:root:root:root body .newsletter__row input::placeholder{ color: rgba(255, 255, 255, 0.5); }
:root:root:root body .newsletter__row input:focus{
  outline: none;
  border-color: var(--sun);
  background: rgba(255, 255, 255, 0.12);
}
:root:root:root body .newsletter__row button{
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: var(--sun);
  color: var(--blue-ink);
  transition: background var(--t-fast);
}
:root:root:root body .newsletter__row button:hover{ background: var(--sun-deep); }
:root:root:root body .newsletter__row svg{ width: 18px; height: 18px; }
:root:root:root body .newsletter__note{ margin-top: 0.6rem; font-size: 0.75rem; color: rgba(255, 255, 255, 0.55); }

/* --- References strip ----------------------------------------------------- */
:root:root:root body .refs-strip{ background: var(--blue-mist); }
:root:root:root body .refs-strip h2{ font-size: var(--fs-h3); margin-bottom: var(--s4); }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1080px) {
  :root:root:root body .nav__menu--center{ margin-inline: 0; }

  /* Locator: map first, then the panel with a capped, scrolling result list */
  :root:root:root body .locator{ grid-template-columns: 1fr; height: auto; }
  :root:root:root body .locator__map{ height: 420px; }
  :root:root:root body .locator__panel{ order: 1; }
  :root:root:root body .locator__list{ max-height: 420px; }

  /* Tablet: headline still leads, everything below it runs in half-width pairs */
  :root:root:root body .hero__eyebrow{ grid-column: 1 / 7; }
  :root:root:root body .hero__figure{ grid-column: 1 / 7; }
  :root:root:root body .hero__copy{ grid-column: 7 / -1; }
  :root:root:root body .hero__shot{ grid-column: 1 / 7; grid-row: 4; }
  :root:root:root body .hero__stats{ grid-column: 7 / -1; grid-row: 4; align-self: center; }
  :root:root:root body .hero__card{ grid-column: 1 / -1; grid-row: 5; border-radius: var(--r-lg); }

  :root:root:root body .strip{ grid-template-columns: 1fr; }
  /* Stacked from here down: no column-height difference to take up, so the
     list drops its offset and the plain gap does the spacing */
  :root:root:root body .strip__list{ margin-top: 0; margin-bottom: 0; }

  /* Two-by-two: the connector only makes sense between cards on the same row */
  :root:root:root body .steps{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root:root:root body .steps__item:nth-child(2n)::after{ display: none; }

  :root:root:root body .join-head{ grid-template-columns: 1fr; }
  :root:root:root body .join-head .section-head{ max-width: none; }
  :root:root:root body .join-head__media img{ aspect-ratio: 21 / 9; }

  :root:root:root body .split-head{ grid-template-columns: 1fr; align-items: start; }
  :root:root:root body .ted-split{ grid-template-columns: 1fr; }
  /* Stacked: no panel alongside to match, so the photo keeps its own shape */
  :root:root:root body .ted-figure picture{ flex: none; min-height: 0; }
  :root:root:root body .ted-diagram{ height: auto; }
  :root:root:root body .wear-grid{ grid-template-columns: 1fr; }
  :root:root:root body .roles{ grid-template-columns: 1fr; }
  :root:root:root body .habits{ grid-template-columns: 1fr; }
  /* Nothing to scroll past once stacked */
  :root:root:root body .habits__intro{ position: static; }
  :root:root:root body .spark-steps{ grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s6); }
  /* Rows wrap, so a connector would point at nothing */
  :root:root:root body .spark-step:not(:last-child)::after{ display: none; }
  :root:root:root body .brief-grid{ grid-template-columns: 1fr; }

  :root:root:root body .svc-grid, :root:root:root body .people-grid, :root:root:root body .cert-grid, :root:root:root body .post-grid{ grid-template-columns: repeat(2, 1fr); }
  :root:root:root body .svc{ min-height: 460px; }

  :root:root:root body .band, :root:root:root body .about-grid, :root:root:root body .diagram-split, :root:root:root body .voice{ grid-template-columns: 1fr; }
  /* Photo above the checklist once the two columns no longer fit */
  :root:root:root body .exam-panel__body{ grid-template-columns: 1fr; }
  :root:root:root body .exam-panel__media img{ max-width: 100%; aspect-ratio: 16 / 9; }
  :root:root:root body .about-grid__copy{ top: 0; }   /* stacked: no optical offset to make up */
  :root:root:root body .diagram-split__figure img{ max-width: 520px; }
  /* Stacked: nothing beside the photograph to match, so it goes back to its own
     proportions instead of being cropped to a copy column that no longer exists. */
  :root:root:root body .diagram-split--flush .diagram-split__figure, :root:root:root body .diagram-split--flush .diagram-split__figure picture{ display: block; }
  :root:root:root body .diagram-split--flush .diagram-split__figure picture{ max-width: 520px; }
  :root:root:root body .diagram-split--flush .diagram-split__figure img{ max-width: 520px; object-fit: fill; }
  :root:root:root body .darkcta--split .darkcta__inner{ grid-template-columns: 1fr; }
  :root:root:root body .darkcta__figure img{ max-width: 380px; }
  /* Stacked: the photograph becomes a full-width band under the copy */
  :root:root:root body .band{ grid-template-areas: "media" "copy"; }
  :root:root:root body .band__media{ grid-area: media; }
  :root:root:root body .band__copy{ grid-area: copy; }
  :root:root:root body .band__media img{ aspect-ratio: 16 / 9; height: auto; min-height: 0; }
  :root:root:root body .band__media--cutout{ padding-bottom: 0; }
  :root:root:root body .band__media--cutout img{ aspect-ratio: auto; max-height: 400px; }
  :root:root:root body .voice__media{ max-width: 460px; margin-inline: auto; width: 100%; }
  :root:root:root body .voice__floats{
    position: static;
    justify-items: start;
    margin-top: var(--s5);
  }
  /* Stacked: the picture must size to the image, not stretch to the row.
     Left at height:100% it filled the whole cell, leaving a gap under the photo
     and pushing the note card out of the box and over the copy below. */
  :root:root:root body .about-media{ max-width: 520px; margin-inline: auto; width: 100%; align-self: start; }
  :root:root:root body .about-media > picture{ height: auto; }
  :root:root:root body .about-media img{ aspect-ratio: 1 / 0.94; height: auto; min-height: 0; }
  /* The cut-out artwork is a composed graphic, not a croppable photo: its
     discs sit in the transparent margin, so imposing a ratio and covering
     slices them off the top. Let it keep its own proportions. */
  :root:root:root body .about-media:not(.about-media--wide) > picture img{
    aspect-ratio: auto;
    object-fit: contain;
  }
  :root:root:root body .about-media--wide img{ aspect-ratio: 4 / 3; }

  :root:root:root body .bento{ grid-template-columns: repeat(2, 1fr); }
  :root:root:root body .bento__card--wide{ grid-column: span 2; }
}

@media (max-width: 720px) {
  :root:root:root body .check-list{ grid-template-columns: 1fr; }
  :root:root:root body .locator__map{ height: 340px; }
  :root:root:root body .locator__filters{ flex-wrap: wrap; }
  :root:root:root body .locator__near{ width: 100%; }

  /* Single file, still one compact row each */
  :root:root:root body .options{ grid-template-columns: 1fr; }
  :root:root:root body .option__ico{ width: 48px; height: 48px; }
  :root:root:root body .option__ico svg{ width: 24px; height: 24px; }

  /* Club benefit cards: icon beside the title, copy beneath — the same compact
     pairing the registration steps use on a narrow screen */
  :root:root:root body .tile-grid--stack .tile{
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    column-gap: var(--s4);
    align-items: start;
  }
  :root:root:root body .tile-grid--stack .tile > svg{
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
  }
  :root:root:root body .tile-grid--stack .tile h3{
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin-bottom: 0;
  }
  :root:root:root body .tile-grid--stack .tile p{
    grid-column: 2;
    grid-row: 2;
    margin-top: var(--s3);
  }

  /* Single file: the connector would have nothing to span, so it goes. The
     number moves beside the copy rather than sitting above it, which keeps
     each card compact on a narrow screen. */
  :root:root:root body .steps{ grid-template-columns: 1fr; }
  :root:root:root body .steps__item{
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: var(--s4);
    align-items: start;
  }
  :root:root:root body .steps__item::after{ display: none; }
  :root:root:root body .steps__num{
    grid-column: 1;
    grid-row: 1;          /* row 1 holds circle + title, so they centre on each other */
    width: 48px; height: 48px;
    font-size: 0.9375rem;
    margin-bottom: 0;
  }
  :root:root:root body .steps__item h3{ grid-column: 2; grid-row: 1; align-self: center; }
  :root:root:root body .steps__item p{ grid-column: 2; grid-row: 2; }

  /* Mobile: one column, headline first, the small shot and ornament drop */
  :root:root:root body .hero__shot, :root:root:root body .hero__ornament{ display: none; }
  :root:root:root body .hero__eyebrow, :root:root:root body .hero__title, :root:root:root body .hero__figure, :root:root:root body .hero__copy, :root:root:root body .hero__stats, :root:root:root body .hero__card{ grid-column: 1 / -1; grid-row: auto; }
  :root:root:root body .hero__eyebrow{ margin-top: 0; }
  :root:root:root body .hero__figure{ overflow: hidden; border-radius: var(--r); }
  /* Same centring problem as desktop, different arithmetic: at this landscape crop
     the cover fit leaves no horizontal slack at all, so object-position has nothing
     to move. The picture is scaled inside the clipped frame and nudged left instead.
     Retuned for the girl photo (~53% across, not the boy's ~58%): the zoom widens
     her 3% offset to 3.7%, so the translate is 3.7%, not the old 10%. */
  :root:root:root body .hero__figure img{
    aspect-ratio: 4 / 3.4;
    border-radius: var(--r);
    transform: scale(1.24) translateX(-3.7%);
    transform-origin: 50% 28%;
  }
  :root:root:root body .hero__stats{ justify-content: space-between; gap: var(--s4); }
  :root:root:root body .hero__card{ border-radius: var(--r); }

  :root:root:root body .strip, :root:root:root body .strip__side, :root:root:root body .strip__list{ grid-template-columns: 1fr; }
  :root:root:root body .strip__mosaic{ grid-template-columns: 1fr; }
  /* Keeps the square crop here too: a wide band puts the boy back off to the
     right, because a landscape frame leaves nothing to crop horizontally. */
  :root:root:root body .strip__shot img{ aspect-ratio: 1 / 1; }
  /* Taller crop here, so the face lands at 44% / 43% of the box and needs
     its own origin to stay centred under the same 2x zoom. */
  :root:root:root body .strip__img img{ aspect-ratio: 16 / 10; transform-origin: 38% 38%; }
  :root:root:root body .strip__item + .strip__item{
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--line);
    padding-top: clamp(1.25rem, 2.5vw, 2rem);
  }
  :root:root:root body .brandrow__marks{ justify-content: flex-start; }

  :root:root:root body .svc-grid, :root:root:root body .people-grid, :root:root:root body .cert-grid, :root:root:root body .post-grid, :root:root:root body .bento{ grid-template-columns: 1fr; }
  :root:root:root body .spark-steps{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root:root:root body .svc{ min-height: 420px; }
  :root:root:root body .bento__card--wide{ grid-column: span 1; }
  :root:root:root body .bento{ grid-auto-rows: minmax(190px, auto); }

  :root:root:root body .band{ --band-pad: var(--s5); border-radius: var(--r); }
  :root:root:root body .band__actions{ gap: var(--s5); }
  :root:root:root body .band__cta{ width: 100%; justify-content: center; }
  :root:root:root body .band__media img{ aspect-ratio: 4 / 3; }
  :root:root:root body .band__media--cutout img{ aspect-ratio: auto; max-height: 300px; }

  :root:root:root body .about-stats{ grid-template-columns: 1fr; gap: var(--s6); }

  :root:root:root body .voice__col{ --voice-indent: 0px; }
  :root:root:root body .voice__quote{ gap: var(--s4); }
  :root:root:root body .voice__mark{ width: 52px; height: 52px; font-size: 2.1rem; padding-top: 0.6rem; }
  :root:root:root body .voice__float{ white-space: normal; font-size: var(--fs-xs); }
}

/* --------------------------------------------------------------------------
   Myopia risk test (homepage, "Where it starts")
   Uses the site tokens only - blue leads, amber accents, squared corners.
   -------------------------------------------------------------------------- */
:root:root:root body .quiz{
  --quiz-r: 0;                 /* squared corners throughout, matching the rest of
                                  the site (--r: 0). Client asked for sharp corners
                                  everywhere in the quiz - do not reintroduce a radius. */
  margin-top: clamp(2.5rem, 5vw, 4rem);
  background: var(--blue-mist);
  border: 1px solid var(--line);
  padding: clamp(1rem, 3vw, 2.25rem);
}

/* Inner white sheet - the test itself sits on paper inside the tinted frame */
:root:root:root body .quiz__panel{
  --quiz-measure: 40rem;       /* the single column everything inside lines up to */
  position: relative;
  overflow: hidden;            /* keeps the brand rule inside the sheet */
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--quiz-r);
  box-shadow: 0 10px 30px rgba(11, 37, 89, 0.08);
  padding: clamp(1.9rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem);
  max-width: 52rem;
  margin-inline: auto;
}

/* HOYA brand rule across the top of the sheet - blue leading into the amber
   accent, the same order the buttons and section headings use. */
:root:root:root body .quiz__panel::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, var(--blue) 0%, var(--blue) 62%, var(--sun) 62%, var(--sun) 100%);
}

/* Every block in the sheet shares one centred column, so the notice, the
   question, the answer rows, the buttons and the footnote all sit on the same
   axis instead of drifting to the left of a wide card. */
:root:root:root body .quiz__notice, :root:root:root body .quiz__intro, :root:root:root body .quiz__stage, :root:root:root body .quiz__result{
  max-width: var(--quiz-measure);
  margin-inline: auto;
}

/* --- attention notice ----------------------------------------------------- */
:root:root:root body .quiz__notice{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 0.9rem;
  border: 1px solid var(--sun);
  border-radius: var(--quiz-r);
  background: var(--sun-mist);
  padding: clamp(1rem, 2.5vw, 1.4rem) clamp(1.1rem, 3vw, 1.6rem);
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
  text-align: left;
}
/* Amber "!" badge - the notice is an advisory, so it is flagged rather than
   left as a bare paragraph. Explicit tracks: the badge spans both text rows. */
:root:root:root body .quiz__notice::before{
  content: "!";
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 0;
  background: var(--sun);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1;
}
:root:root:root body .quiz__notice > *{ grid-column: 2; }
:root:root:root body .quiz__notice-title{
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--blue);
}
:root:root:root body .quiz__notice p:last-child{ margin: 0; font-size: var(--fs-sm); color: var(--ink-80); }

/* --- intro ---------------------------------------------------------------- */
:root:root:root body .quiz__intro{ text-align: center; }
:root:root:root body .quiz__title{
  font-size: var(--fs-h3);
  margin-bottom: var(--s4);
  max-width: 19.68em;
  margin-inline: auto;
}
:root:root:root body .quiz__lead{
  font-size: var(--fs-sm);
  color: var(--ink-60);
  max-width: 33.672em;
  margin-inline: auto;
}
:root:root:root body .quiz__intro > p:last-child{ margin-bottom: 0; }
/* forced break after "what it means," — only where the line is wide enough to need it */
:root:root:root body .quiz__lead-break{ display: none; }
@media (min-width: 721px) { :root:root:root body .quiz__lead-break{ display: inline; } }

/* --- progress ------------------------------------------------------------- */
:root:root:root body .quiz__progress{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
}
:root:root:root body .quiz__step{
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-60);
}

/* Numbered step markers - current is solid blue, answered steps outlined blue,
   steps not yet reached stay grey. Decorative: the live count is the text and
   the progressbar, so the list is aria-hidden. */
:root:root:root body .quiz__dots{
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
:root:root:root body .quiz__dot{
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0;
  border: 1px solid var(--line);
  background: var(--paper);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink-40);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
:root:root:root body .quiz__dot.is-done{ border-color: var(--blue); color: var(--blue); }
:root:root:root body .quiz__dot.is-current{
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}

/* The bar is kept for the screen-reader progressbar and as a thin fallback cue
   on narrow screens where the dots wrap. */
:root:root:root body .quiz__bar{ flex: 1 1 100%; height: 4px; background: var(--blue-soft); overflow: hidden; }
:root:root:root body .quiz__bar-fill{
  display: block;
  height: 100%;
  width: 0;
  background: var(--blue);
  transition: width var(--t);
}

/* --- question ------------------------------------------------------------- */
/* Three tracks so the question is dead-centre whether or not the "?" toggle is
   showing - a plain centred flex row would shift the heading left by half the
   toggle every time a question carries a hint. */
:root:root:root body .quiz__ask{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--s4);
}
:root:root:root body .quiz__question{
  grid-column: 2;
  font-size: var(--fs-h3);
  color: var(--blue);
  margin: 0;
  max-width: 19.68em;
  text-align: center;
  text-wrap: balance;
}
:root:root:root body .quiz__question:focus-visible{ outline: 2px solid var(--blue); outline-offset: 6px; }

:root:root:root body .quiz__hint-toggle{
  appearance: none;
  grid-column: 3;
  justify-self: start;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--blue);
  cursor: pointer;
  align-self: center;
}
:root:root:root body .quiz__hint-toggle svg{ width: 100%; height: 100%; display: block; }
:root:root:root body .quiz__hint-toggle:hover{ color: var(--blue-deep); }
:root:root:root body .quiz__hint-toggle:focus-visible{ outline: 2px solid var(--blue); outline-offset: 3px; }
:root:root:root body .quiz__hint-toggle[aria-expanded="true"]{ color: var(--blue-deep); }

:root:root:root body .quiz__hint{
  margin: 0 0 var(--s5);
  padding: var(--s4) var(--s5);
  background: var(--blue-mist);
  border-left: 3px solid var(--blue);
  border-radius: 0 var(--quiz-r) var(--quiz-r) 0;
  font-size: var(--fs-sm);
  color: var(--ink-60);
}

/* --- answers -------------------------------------------------------------- */
:root:root:root body .quiz__answers{
  display: grid;
  gap: 0.75rem;
  margin-bottom: var(--s5);
}
:root:root:root body .quiz__answer{
  appearance: none;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 1.0625rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--quiz-r);
  padding: clamp(0.9rem, 2.4vw, 1.25rem) clamp(1rem, 3vw, 1.5rem);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
/* The radio mark is drawn, not a real input - the buttons carry role="radio" */
:root:root:root body .quiz__answer::before{
  content: "";
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 0;
  border: 2px solid var(--blue);
  background: var(--paper);
  box-shadow: inset 0 0 0 0.32rem var(--paper);
  transition: box-shadow var(--t-fast), background var(--t-fast);
}
:root:root:root body .quiz__answer:hover{ border-color: var(--blue); background: var(--blue-mist); }
:root:root:root body .quiz__answer:focus-visible{ outline: 2px solid var(--blue); outline-offset: 3px; }
:root:root:root body .quiz__answer.is-selected{
  border-color: var(--blue);
  background: var(--blue-mist);
  box-shadow: inset 0 0 0 1px var(--blue);
  font-weight: 600;
}
/* Selected reads as a tick, not a filled dot: the box floods blue and a white
   checkmark is drawn into it as a background SVG (the box is already ::before, and
   ::after is not free on a <button> that also carries the label text). The inset
   shadow that hollowed out the empty box has to go, or it covers the mark. */
:root:root:root body .quiz__answer.is-selected::before{
  background-color: var(--blue);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.4 8.4l3.1 3.1 6.1-6.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 82%;
  box-shadow: none;
}

:root:root:root body .quiz__note{
  background: var(--sun-mist);
  border-left: 3px solid var(--sun);
  border-radius: 0 var(--quiz-r) var(--quiz-r) 0;
  padding: var(--s4) var(--s5);
  margin: 0 0 var(--s5);
  font-size: var(--fs-sm);
  color: var(--ink-80);
}

/* --- navigation ----------------------------------------------------------- */
/* Next is the centre track, Back hugs it from an equal-width side track, so the
   primary button sits on the page centre line on every question - including the
   first, where Back is hidden. A centred flex row pushed it off to the right. */
:root:root:root body .quiz__nav{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s4);
  margin-top: clamp(1.5rem, 3vw, 2rem);
}
:root:root:root body .quiz__back{ grid-column: 1; justify-self: end; }
:root:root:root body .quiz__next{ grid-column: 2; min-width: 11rem; }
:root:root:root body .quiz__nav .btn:disabled{ opacity: 0.45; pointer-events: none; }
/* Back on the first question stays in place so the Next button does not jump */
:root:root:root body .quiz__back[disabled]{ visibility: hidden; }

/* --- result --------------------------------------------------------------- */
:root:root:root body .quiz__result{ text-align: center; }
:root:root:root body .quiz__result .btn-row{ justify-content: center; }
:root:root:root body .quiz__result-title{ font-size: var(--fs-h3); margin-bottom: var(--s3); }
:root:root:root body .quiz__result-title:focus-visible{ outline: 2px solid var(--blue); outline-offset: 6px; }
:root:root:root body .quiz__score{
  display: inline-block;
  margin: 0 0 var(--s3);
  background: var(--blue-soft);
  color: var(--blue-deep);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.35rem 0.85rem;
}
:root:root:root body .quiz__meter{
  height: 8px;
  border-radius: 0;
  background: var(--blue-soft);
  overflow: hidden;
  margin: 0 auto var(--s5);
  max-width: 28rem;
}
:root:root:root body .quiz__meter-fill{
  display: block;
  height: 100%;
  width: 0;
  border-radius: 0;
  background: var(--blue);
  transition: width var(--t);
}
/* Heading, score and buttons centre; the explanation stays left-aligned inside
   the same centred column - centred body copy of this length is hard to read. */
:root:root:root body .quiz__result-body{
  max-width: 40.992em;
  margin-inline: auto;
  text-align: left;
}
:root:root:root body .quiz__result-body p{ color: var(--ink-60); font-size: var(--fs-sm); }
:root:root:root body .quiz__result-body p:last-child{ margin-bottom: var(--s5); }
:root:root:root body .quiz__disclaimer{
  margin: var(--s5) auto 0;
  max-width: 33.672em;
  font-size: var(--fs-xs);
  color: var(--ink-40);
  text-align: center;
}

/* The result heading and meter pick up the severity of the band */
:root:root:root body .quiz[data-risk="low"] .quiz__result-title{ color: var(--blue); }
:root:root:root body .quiz[data-risk="moderate"] .quiz__result-title, :root:root:root body .quiz[data-risk="high"] .quiz__result-title, :root:root:root body .quiz[data-risk="very-high"] .quiz__result-title{ color: var(--sun-dark); }
:root:root:root body .quiz[data-risk="moderate"] .quiz__meter-fill{ background: var(--sun); }
:root:root:root body .quiz[data-risk="high"] .quiz__meter-fill, :root:root:root body .quiz[data-risk="very-high"] .quiz__meter-fill{ background: var(--sun-deep); }

@media (max-width: 720px) {
  :root:root:root body .quiz{ padding: 0; border: 0; background: none; }
  :root:root:root body .quiz__panel{ padding: clamp(1.25rem, 5vw, 1.75rem); }
  :root:root:root body .quiz__dot{ width: 2rem; height: 2rem; font-size: 0.8rem; }
  /* One column on phones: Next on top as the primary action, Back beneath it */
  :root:root:root body .quiz__nav{ grid-template-columns: 1fr; gap: var(--s3); }
  :root:root:root body .quiz__next{ grid-column: 1; grid-row: 1; min-width: 0; }
  :root:root:root body .quiz__back{ grid-column: 1; grid-row: 2; justify-self: stretch; }
  :root:root:root body .quiz__nav .btn{ width: 100%; justify-content: center; }
  /* Next already leads on its own row, so a hidden Back can leave entirely */
  :root:root:root body .quiz__back[disabled]{ display: none; }
}

/* Native buttons carrying .btn inside the quiz need the pointer cursor back */
:root:root:root body .quiz button.btn{ cursor: pointer; }

/* Buttons inside the card follow --quiz-r, which is 0 - square like the rest
   of the site. */
:root:root:root body .quiz .btn{ border-radius: var(--quiz-r); }

/* --------------------------------------------------------------------------
   Blog article pages

   Long-form article bodies reuse .prose, .callout, .ticklist and .refs, which
   already exist. The only thing the site had no treatment for is a captioned
   image sitting inside a prose column, so that is all this block adds.
   -------------------------------------------------------------------------- */
:root:root:root body .article-figure{
  max-width: 49.776em;
  margin-block: clamp(2rem, 4vw, 3rem);
  background: var(--white);
  border: 1px solid var(--blue-soft);
  border-radius: var(--r);
  padding: clamp(1.1rem, 2.4vw, 1.5rem);
  box-shadow: var(--shadow-sm);
}
:root:root:root body .article-figure img{ width: 100%; height: auto; }
:root:root:root body .article-figure figcaption{
  margin-top: var(--s3);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--ink-60);
}

/* The article's own inline links read as body copy, not as nav items. */
:root:root:root body .prose a:not(.link-arrow):not(.btn){ color: var(--blue); text-decoration: underline; }
:root:root:root body .prose a:not(.link-arrow):not(.btn):hover{ color: var(--blue-ink); }

/* --------------------------------------------------------------------------
   Article body at header width (.article-page on <body>)

   The article sections use the same `.wrap` as the header, so the body copy
   starts and ends on the same vertical lines as the logo and the nav links.
   Those `.wrap` containers already line up; what has to be released here are
   the reading-width caps that would otherwise keep the text narrow inside
   them - `.prose`'s 49.776em, and the base `p { max-width: 45.384em }`.

   Scoped to .article-page so no other page's measure changes.
   -------------------------------------------------------------------------- */
:root:root:root body.article-page .prose{ max-width: none; }
:root:root:root body.article-page .prose p, :root:root:root body.article-page .prose li, :root:root:root body.article-page .callout p, :root:root:root body.article-page .ticklist li, :root:root:root body.article-page .refs ol, :root:root:root body.article-page .refs li{ max-width: none; }

/* The captioned figure spans the full measure too, but the diagram itself is
   only 809px wide - upscaling it would just make it soft, so it sits centred
   at its natural size inside the card. */
:root:root:root body.article-page .article-figure{ max-width: none; }
:root:root:root body.article-page .article-figure img{ max-width: 809px; margin-inline: auto; }

/* --------------------------------------------------------------------------
   Font swap: Galano Grotesque (display) + Arial (body)

   Requested 2026-09-02. The old stacks were Outfit / Avenir Next / Segoe UI
   for display and Plus Jakarta Sans / Helvetica Neue for body; both are
   replaced in the two tokens at the top of this file, and the Google Fonts
   request has been removed from every page because nothing loads from it any
   more.

   Galano Grotesque is a licensed font - Google Fonts does not serve it, so it
   renders only where it is installed, or once the licensed web files are
   dropped in (see the @font-face block at the bottom of this file).
   Everywhere else the stack falls through to Arial, which is what the body
   copy uses in any case.

   Nothing but the family changes. Sizes, weights, letter-spacing, line-height
   and every measure stay exactly as they were in the approved design - an
   earlier pass relaxed the tracking and opened the heading leading to suit the
   new faces, and that was reverted on request (2026-09-02): the layout and
   spacing must match the previous version line for line.

   One thing did have to be repaired rather than left alone. The stylesheet
   sized ~35 text columns in `ch`, and `ch` is the advance width of the glyph
   "0" in whatever font the element is using - so those columns are only stable
   while the font is. Measured off the font files themselves:

       Plus Jakarta Sans (old body)     "0" = 0.732 em
       Outfit            (old display)  "0" = 0.656 em
       Arial             (new)          "0" = 0.556 em

   which quietly pulled every paragraph in by about 24%. Each of those measures
   is now written as the em value it resolved to under the old font
   (62ch -> 45.384em for body copy, x0.656 for the handful set in the display
   face), so the columns are pixel-identical to the previous version and can no
   longer move when the font changes again - including when the licensed Galano
   Grotesque files arrive.
   -------------------------------------------------------------------------- */

/* Arial ships only Regular and Bold, so a 500 falls back to Regular and a 600
   jumps to Bold. The nav sat at 600 in a semibold Plus Jakarta Sans; in Arial
   that reads heavier than the old design, so the links move to the display
   family, which keeps a true semibold wherever Galano Grotesque is present. */
:root:root:root body .nav__link, :root:root:root body .nav__sublink{ font-family: var(--font-display); }

/* --------------------------------------------------------------------------
   Self-hosting Galano Grotesque

   Uncomment the four rules below and drop the licensed .woff2 files into
   assets/fonts/ to serve the font to every visitor, rather than only to
   machines that already have it installed. Nothing else needs to change - the
   family name is already the first entry in --font-display.

   @font-face {
     font-family: "Galano Grotesque";
     src: url("../assets/fonts/GalanoGrotesque-Regular.woff2") format("woff2");
     font-weight: 400; font-style: normal; font-display: swap;
   }
   @font-face {
     font-family: "Galano Grotesque";
     src: url("../assets/fonts/GalanoGrotesque-SemiBold.woff2") format("woff2");
     font-weight: 600; font-style: normal; font-display: swap;
   }
   @font-face {
     font-family: "Galano Grotesque";
     src: url("../assets/fonts/GalanoGrotesque-Bold.woff2") format("woff2");
     font-weight: 700; font-style: normal; font-display: swap;
   }
   @font-face {
     font-family: "Galano Grotesque";
     src: url("../assets/fonts/GalanoGrotesque-ExtraBold.woff2") format("woff2");
     font-weight: 800; font-style: normal; font-display: swap;
   }
   -------------------------------------------------------------------------- */

/* ---- Added by build-0844.py: repairs for what WordPress changes ------------
   Elementor's `.elementor a{text-decoration:none}` outranks the browser default
   that the design leaves in place for body links — it only tunes the thickness
   and offset — so every prose and footer link lost its underline. Leaflet's own
   link colours lose to `a{color:inherit}` once that is anchored, which turned
   the map's zoom glyphs and attribution link navy. */
:root:root:root body a { text-decoration: underline; }
:root:root:root body .leaflet-container a { color: #0078a8; }
:root:root:root body .leaflet-bar a { color: #000; text-decoration: none; }

/* ---- The header, sticky again ---------------------------------------------
   `.site-header{position:sticky;top:0}` is in the design already, but inside
   WordPress the bar is wrapped in Elementor's own <header class="elementor-
   location-header">, and a sticky element can only travel inside its parent's
   box — which here is exactly the height of the bar. Sticking the wrapper, a
   direct child of <body>, gives it the whole document to travel in. */
:root:root:root body .elementor-location-header { position: sticky; top: 0; z-index: 100; }

/* ---- The contact form, as an Elementor Form widget -------------------------
   29 Sep, Wei Xuen: "this form need use the elementor form widget". The card
   keeps the design's own .section / .wrap / .form-card boxes; only the fields
   inside it are Elementor's, so they are dressed here to match .field. */
:root:root:root body .form-card--split { margin-top: clamp(2rem, 4vw, 3rem); }
:root:root:root body .form-card .elementor-field-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--ink);
  padding-bottom: 0.4rem;
}
:root:root:root body .form-card .elementor-field-textual {
  width: 100%;
  padding: 0.85rem 1rem;
  min-height: 52px;
  height: auto;
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--ink);
  box-shadow: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
:root:root:root body .form-card textarea.elementor-field-textual {
  min-height: 130px;
  line-height: 1.6;
  resize: vertical;
}
:root:root:root body .form-card .elementor-field-textual:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 4px var(--sun-soft);
}
:root:root:root body .form-card .elementor-field-textual::placeholder { color: var(--ink-40); }

/* Button, submit row and messages. The submit group is pulled ahead of the
   HTML field holding the privacy note so the two sit side by side the way
   .form-submit does on the static page. */
:root:root:root body .form-card .elementor-form-fields-wrapper > .elementor-field-group { order: 1; }
:root:root:root body .form-card .elementor-form-fields-wrapper > .e-form__buttons { order: 2; align-items: center; }
/* 29 Sep, Wei Xuen: "make this text at center not top". The note's own group is as
   tall as the submit row beside it, and Elementor's wrapper lets the paragraph sit
   at the top of it. `align-items` alone was not enough: the group wraps, so a single
   full-width line is packed to the start by `align-content`. nowrap plus both axes
   settled, and `align-self` on the paragraph itself, leaves nowhere for it to ride up. */
:root:root:root body .form-card .elementor-form-fields-wrapper > .elementor-field-type-html {
  order: 3;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
}
:root:root:root body .form-card .elementor-form-fields-wrapper > .elementor-field-type-html > * {
  align-self: center;
}
:root:root:root body .form-card .elementor-button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.75rem;
  min-height: 52px;
  width: auto;
  background: var(--blue);
  color: var(--white);
  border: 2px solid var(--blue);
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  transition: background var(--t-fast), border-color var(--t-fast),
              color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
:root:root:root body .form-card .elementor-button[type="submit"]:hover {
  background: var(--blue-deep);
  border-color: var(--blue-deep);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
:root:root:root body .form-card .elementor-button[type="submit"]:active { transform: translateY(0); }
/* Elementor stretches the submit across its column; the design's .btn hugs its
   label. The arrow is the sprite's #i-arrow redrawn as a mask, because the
   button's label is plain text — there is nowhere to put a <use>. */
:root:root:root body .form-card .e-form__buttons .elementor-button[type="submit"] {
  flex-basis: auto;
  align-self: flex-start;
}
:root:root:root body .form-card .elementor-button[type="submit"]::after {
  content: "";
  width: 18px;
  height: 18px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h13M12 5l7 7-7 7'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h13M12 5l7 7-7 7'/></svg>") center / contain no-repeat;
}
:root:root:root body .form-card .elementor-field-type-html .field__hint {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-60);
}
:root:root:root body .form-card .elementor-field-type-html .field__hint a {
  color: var(--blue);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
:root:root:root body .form-card .elementor-message {
  margin-top: var(--s5);
  padding: var(--s5);
  border-radius: var(--r);
  background: var(--sun-mist);
  border: 1px solid var(--sun-soft);
  font-size: var(--fs-sm);
  color: var(--ink-80);
}
:root:root:root body .form-card .elementor-message.elementor-message-danger {
  background: #fdecea;
  border-color: #e7b4ae;
  color: #8d2a1c;
}
:root:root:root body .form-card .elementor-field-group > .elementor-error .elementor-form-help-inline {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: #c0392b;
}
@media (max-width: 720px) {
  :root:root:root body .form-card .elementor-form-fields-wrapper > .elementor-field-group { width: 100%; }
}