/* ==========================================================================
   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
   -------------------------------------------------------------------------- */
*,
*::before,
*::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;
}

h1, h2, h3, 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 */
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
p, li, blockquote, figcaption, dd, dt { text-wrap: pretty; }

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

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

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

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

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

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

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

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

.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);
}
.skip-link:focus { top: var(--s4); }

.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
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(2.25rem, 4vw, 3.5rem); }
.section--cream { background: var(--cream); }
.section--paper { background: var(--paper); }
.section--ink { background: var(--blue); color: var(--white); }
.section--sun { background: var(--sun); }

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

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

/* Every section head starts on the same left edge and shares one rhythm */
.section-head { max-width: 780px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.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. */
.section-head--twoline { max-width: 880px; }
.section-head--twoline p:not(.eyebrow) { max-width: none; }
/* Wider measure for a headline that is a full sentence rather than a phrase */
.section-head--wide { max-width: 1040px; }
.section-head--center p { margin-inline: auto; }
.section-head p:not(.eyebrow) { font-size: var(--fs-lead); color: var(--ink-60); margin-bottom: 0; }
.section--ink .section-head p:not(.eyebrow) { color: rgba(255, 255, 255, 0.78); }

.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. */
.eyebrow,
.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);
}
.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 */
.section--ink .eyebrow,
.section--navy .eyebrow,
.why .eyebrow,
.darkcta .eyebrow { color: rgba(255, 255, 255, 0.92); }

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

/* Yellow marker behind a word */
.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;
}

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

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.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);
}
.btn:hover {
  --btn-bg: var(--blue-deep);
  --btn-bd: var(--blue-deep);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn:active { transform: translateY(0); }

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

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

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

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

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

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

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

.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. */
.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. */
.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 */
.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);
}
.link-arrow:hover { gap: 0.85rem; border-color: var(--blue); }
.link-arrow svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   5. Decorative graphics - dot-screen circles, discs and rings
   -------------------------------------------------------------------------- */
.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;
}

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

.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 */
.shape {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.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);
}
.shape--petal {
  background: var(--sun-soft);
  border-radius: 0;
}
.shape--half {
  background: var(--blue);
  border-radius: 0;
}
.shape--sand {
  background: var(--sand);
  border-radius: var(--r);
}

/* --------------------------------------------------------------------------
   6. Header / navigation
   -------------------------------------------------------------------------- */
.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);
}
.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);
}

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

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  flex: none;
  margin-right: auto;
}
.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 */
.brand__product { width: 128px; height: auto; }
.brand__divider {
  width: 1px;
  height: 26px;
  background: var(--line);
  flex: none;
}
.brand__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1875rem;
  letter-spacing: -0.02em;
  color: var(--blue);
  line-height: 1;
}
.brand__name span { color: var(--sun-deep); }

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

.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);
}
.nav__link:hover { background: var(--blue-soft); color: var(--blue); }
.nav__link[aria-current="page"] {
  color: var(--blue);
  background: var(--blue-soft);
}

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

.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. */
.nav__item--menu { position: relative; display: flex; align-items: center; }

.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);
}
.nav__disclosure svg { width: 13px; height: 13px; }
.nav__item--menu:hover .nav__disclosure { color: var(--blue); }
.nav__disclosure[aria-expanded="true"] { color: var(--blue); transform: rotate(180deg); }

.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;
}
.nav__item--menu:hover .nav__submenu,
.nav__item--menu:focus-within .nav__submenu,
.nav__submenu.is-open { opacity: 1; visibility: visible; transform: none; }

.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);
}
.nav__sublink:hover,
.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. */
.nav__sublink--pending {
  color: var(--ink-60);   /* muted, but still 5.4:1 on white - --ink-40 fails AA */
  cursor: default;
}
.nav__sublink--pending:hover { background: none; color: var(--ink-60); }

/* --- Log in --------------------------------------------------------------- */
.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);
}
.nav__login svg { width: 24px; height: 24px; stroke-width: 1.7; }
.nav__login:hover,
.nav__login:focus-visible { background: var(--white); border-color: var(--blue); color: var(--blue); }

.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;
}
.nav__toggle span {
  position: relative;
  display: block;
  width: 18px; height: 2px;
  background: var(--blue);
  border-radius: 0;
  transition: background var(--t-fast);
}
.nav__toggle span::before,
.nav__toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px; height: 2px;
  background: var(--blue);
  border-radius: 0;
  transition: transform var(--t);
}
.nav__toggle span::before { top: -6px; }
.nav__toggle span::after { top: 6px; }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

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

.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;
}

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

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

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

.hero__media { position: relative; }

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

.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);
}
.hero__frame img { width: 100%; height: 100%; object-fit: cover; }

/* Directional, text-safe overlay - image stays 85%+ readable (Rule 2.6.2) */
.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%
  );
}

.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);
}

.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);
}
.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;
}
.hero__chip-txt {
  font-size: var(--fs-xs);
  line-height: 1.35;
  color: var(--ink-60);
  max-width: 10.98em;
}
.hero__chip-txt strong { display: block; color: var(--blue); font-size: var(--fs-sm); }
.hero__chip--tl { bottom: 20%; left: -6%; top: auto; }
.hero__chip--br { top: 8%; right: -5%; }

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

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

/* Trust strip under hero */
.trustbar {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--blue-mist);
}
.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);
}
.trustbar__item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 0.9rem;
  align-items: start;
}
.trustbar__item-ico {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--sun-soft);
  color: var(--blue);
}
.trustbar__item svg { width: 22px; height: 22px; }
.trustbar__item strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--blue);
  margin-bottom: 0.15rem;
}
.trustbar__item span { display: block; font-size: var(--fs-xs); color: var(--ink-60); line-height: 1.45; }

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

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

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

.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);
}
.sim__scene-btn:hover { background: var(--white); color: var(--blue); }
.sim__scene-btn[aria-selected="true"] {
  background: var(--white);
  border-color: var(--blue);
  color: var(--blue);
  box-shadow: var(--shadow-sm);
}
.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);
}
.sim__scene-ico svg { width: 19px; height: 19px; }
.sim__scene-btn[aria-selected="true"] .sim__scene-ico { background: var(--sun); color: var(--blue-ink); }

.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);
}
.sim__img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: filter 0.45s var(--ease), opacity var(--t);
  will-change: filter;
}
.sim__stage.is-swapping .sim__img { opacity: 0; }

.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);
}
.sim__caption strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  margin-bottom: 0.2rem;
}
.sim__caption span { font-size: var(--fs-sm); color: rgba(255,255,255,.82); }

.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);
}

.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);
}
.sim__control-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s4);
  margin-bottom: var(--s4);
}
.sim__control-head label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
}
.sim__control-head output {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.0625rem;
  color: var(--blue);
}

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;
}
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;
}
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;
}

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

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

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

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

.explain__media { position: relative; }
.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);
}
.explain__dots { width: 108px; height: 108px; top: -26px; right: -22px; }

.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);
}
.eye-diagram svg { width: 100%; height: auto; }
.eye-diagram figcaption {
  font-size: var(--fs-xs);
  color: var(--ink-60);
  margin-top: var(--s3);
  line-height: 1.5;
}

.qa-list { display: grid; gap: var(--s5); }
.qa {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s4);
  align-items: start;
}
.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;
}
.qa h3 { margin-bottom: 0.35rem; font-size: 1.1875rem; }
.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. */
.qa-list--row { grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); }
@media (max-width: 1080px) {
  .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. */
.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. */
.split-head__action { margin: 0; justify-self: end; }
@media (max-width: 1080px) {
  .split-head__action { justify-self: start; }
}

/* --------------------------------------------------------------------------
   10. Spot the signs (Section 04)
   -------------------------------------------------------------------------- */
.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 */
.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);
}
.sign:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.sign:has(input:checked) { background: var(--blue-deep); border-color: var(--sun); }
.sign:focus-within { outline: 3px solid var(--sun); outline-offset: 3px; }

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

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

.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);
}
.sign__body h3 {
  font-size: 1.125rem;
  color: var(--white);
  margin-bottom: 0.45rem;
}
.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 */
.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);
}
.sign__badge svg { width: 22px; height: 22px; }
.sign:has(input:checked) .sign__badge { background: var(--sun); }

.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);
}
.sign__check svg { width: 17px; height: 17px; }
.sign:has(input:checked) .sign__check { background: var(--sun); color: var(--blue-ink); }

.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);
}
.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;
}
.signs__tally-txt { flex: 1 1 260px; }
.signs__tally-txt strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin-bottom: 0.2rem;
}
.signs__tally-txt span { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.78); }

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

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

.lens {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  max-width: 520px;
  margin-inline: auto;
  width: 100%;
}
.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);
}
.lens__svg { position: relative; width: 88%; height: auto; }

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

.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);
}
.lens__pin:hover { transform: scale(1.1); }
.lens__pin[aria-pressed="true"] { background: var(--sun); color: var(--blue-ink); }
.lens__pin--1 { top: 44%; left: 44%; }
.lens__pin--2 { top: 20%; left: 70%; }
.lens__pin--3 { bottom: 15%; left: 22%; }

.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;
}
.lens-info h3 { font-size: 1.1875rem; margin-bottom: 0.35rem; }
.lens-info p { font-size: var(--fs-sm); color: var(--ink-60); margin: 0; }

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

.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);
}
.product__figure img { margin-inline: auto; max-height: 240px; width: auto; }
.product__figure figcaption {
  margin-top: var(--s3);
  font-size: var(--fs-xs);
  color: var(--ink-60);
  text-align: center;
}

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

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

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

.benefit { position: relative; padding-top: var(--s5); border-top: 3px solid rgba(255, 255, 255, 0.35); }
.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);
}
.benefit svg { width: 34px; height: 34px; margin-bottom: var(--s3); color: var(--sun-soft); }
.benefit h3 { font-size: 1.25rem; margin-bottom: 0.45rem; color: var(--white); }
.benefit p { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.8); margin: 0; }

.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) {
  .why__dots { top: 4%; right: 4%; width: 120px; height: 104px; }
}
@media (max-width: 720px) {
  .why__dots { display: none; }
}

/* --------------------------------------------------------------------------
   13. Science & trust (Section 07)
   -------------------------------------------------------------------------- */
.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. */
.evidence {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.evidence__intro h2 { color: var(--white); }
.evidence__intro > p { color: rgba(255, 255, 255, 0.82); }
.evidence__intro .eyebrow { color: rgba(255, 255, 255, 0.78); }

.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+" */
.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;
}
.stats__grid.stats__grid--rows .stat:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.28); }
.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 */
.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;
}
.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. */
.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 */
.filmbox { margin: clamp(2.5rem, 5vw, 4rem) 0; }
.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. */
.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) */
.vfilm__stage { overflow: hidden; }
.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;
}
.vfilm__rail {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
}
.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);
}
.vfilm__thumb img { width: 100%; height: auto; }
.vfilm__thumb:hover,
.vfilm__thumb:focus-visible { opacity: 1; transform: translateY(-2px); }
.vfilm__thumb.is-active {
  opacity: 1;
  box-shadow: 0 0 0 3px var(--sun);
}

@media (max-width: 900px) {
  .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. */
  .vfilm__rail {
    grid-auto-flow: column;
    grid-auto-columns: minmax(9rem, 1fr);
    overflow-x: auto;
    padding-bottom: var(--s3);
  }
}

.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);
}
.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;
}
.brief p { color: var(--ink-60); margin: 0; max-width: 38.064em; }

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

.stat { border-top: 2px solid rgba(255, 255, 255, 0.28); padding-top: var(--s5); }
.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);
}
.stat__num sup { font-size: 0.42em; top: -0.85em; margin-left: 0.06em; color: rgba(255, 255, 255, 0.6); }
.stat h3 { font-size: 1.125rem; margin-bottom: 0.35rem; }
.stat p { font-size: var(--fs-sm); margin: 0; }

.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);
}
.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);
}
.award img { width: 84px; height: auto; flex: none; }
.award h4 { font-size: 1.0625rem; margin-bottom: 0.25rem; color: var(--white); }
.award p { font-size: var(--fs-xs); margin: 0; }

.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;
}
.disclaimer a { color: var(--sun-soft); }

/* --------------------------------------------------------------------------
   14. Childhood without limits (Section 08)
   -------------------------------------------------------------------------- */
.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);
}
.life__cell {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--cream-deep);
}
.life__cell img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--t-slow); }
.life__cell:hover img { transform: scale(1.05); }
.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);
}
.life__cell--a { grid-column: span 3; grid-row: span 2; }
.life__cell--b { grid-column: span 3; }
.life__cell--c { grid-column: span 3; }
.life__cell--d { grid-column: span 2; }
.life__cell--e { grid-column: span 2; }
.life__cell--f { grid-column: span 2; }

.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);
}
.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);
}
.life__pull span { font-size: var(--fs-sm); color: rgba(11, 37, 89, 0.78); }

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

.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);
}
.finder__body { padding: clamp(2rem, 4.5vw, 3.75rem); }
.finder__body h2,
.finder__body h3 { color: var(--white); }
.finder__body h3 { font-size: var(--fs-h2); }
.finder__body p { color: rgba(255, 255, 255, 0.82); }

.finder__steps {
  display: grid;
  gap: var(--s4);
  margin: var(--s6) 0;
  padding: 0;
  list-style: none;
  counter-reset: fs;
}
.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);
}
.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);
}

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

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

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

.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);
}
.guide:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--blue-soft); }
.guide__img { aspect-ratio: 16 / 10; width: 100%; object-fit: cover; }
.guide__body { padding: clamp(1.25rem, 2.4vw, 1.75rem); display: flex; flex-direction: column; flex: 1; }
.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);
}
.guide h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.guide p { font-size: var(--fs-sm); color: var(--ink-60); margin-bottom: var(--s4); }
.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);
}
.guide:hover .guide__more { gap: 0.8rem; }
.guide__more { color: var(--blue); }
.guide__more svg { width: 15px; height: 15px; }

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

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

.faq__item {
  border-bottom: 1px solid var(--line);
}
.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. */
.faq__item > h3 { margin: 0; }

.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);
}
.faq__q:hover { color: var(--blue-deep); }

.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);
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  background: var(--blue-ink);
  border-radius: 0;
  transition: transform var(--t), opacity var(--t-fast);
}
.faq__icon::before { width: 14px; height: 2px; }
.faq__icon::after { width: 2px; height: 14px; }
.faq__q[aria-expanded="true"] .faq__icon { background: var(--sun); }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: scaleY(0); opacity: 0; }

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

/* --------------------------------------------------------------------------
   18. Final CTA (Section 12)
   -------------------------------------------------------------------------- */
.final {
  position: relative;
  overflow: hidden;
  min-height: clamp(460px, 62vh, 640px);
  display: grid;
  align-items: center;
  background: var(--cream);
}
.final__bg { position: absolute; inset: 0; z-index: 0; }
.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) */
.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%
  );
}

.final__inner { position: relative; z-index: 2; padding-block: clamp(3.5rem, 8vw, 6rem); }
.final__card { max-width: 520px; margin-left: auto; }
.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);
}
.final__card p:not(.eyebrow) { font-size: var(--fs-lead); color: var(--ink-80); margin-bottom: var(--s6); }
.final__ring { width: 220px; height: 220px; top: 10%; left: 6%; border-color: rgba(249, 178, 51, 0.95); }
.final__dots { width: 120px; height: 110px; bottom: 12%; left: 26%; }

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */
.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);
}

.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);
}
.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. */
.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);
}
.footer__signup-copy h4 { margin-bottom: 0.35rem; }
.footer__signup .newsletter__note { margin: 0; }
.footer__signup .newsletter__row { margin: 0; }

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

/* HOYA wordmark alone - knocked out to white for the dark footer */
.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 */
.footer__brand img { width: 92px; height: auto; filter: brightness(0) invert(1); }

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

/* Sits under the brand intro, closing the first column */
.footer__social { display: flex; gap: 0.6rem; margin-top: auto; padding-top: var(--s5); }
.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);
}
.footer__social a:hover { background: var(--sun); color: var(--blue-ink); border-color: var(--sun); }
.footer__social svg { width: 18px; height: 18px; }

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

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

.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);
}
.footer__bottom a { color: rgba(255, 255, 255, 0.82); }

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

/* --------------------------------------------------------------------------
   20. Sticky mobile CTA
   -------------------------------------------------------------------------- */
.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);
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta .btn { flex: 1; }

/* --------------------------------------------------------------------------
   21. Inner-page components
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--cream);
  padding-block: clamp(3rem, 6.5vw, 5.5rem);
}
.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. */
.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);
}
.page-hero h1 { margin-bottom: var(--s4); }
/* Wordmark-as-title: the h1 carries only the semantics, the image its own spacing */
.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. */
.page-hero__logo img {
  display: block;
  width: clamp(230px, 34vw, 430px);
  height: auto;
}
.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. */
.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 */
.page-hero__disc { width: clamp(200px, 22vw, 300px); aspect-ratio: 1; top: -22%; right: 6%; opacity: .85; }
.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) {
  .page-hero__disc, .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. */
.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);
}
.spec-figure img { display: block; width: 100%; height: auto; }
.spec-figure figcaption {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink-60);
}
@media (max-width: 420px) {
  .spec-figure { grid-template-columns: 1fr; justify-items: start; }
  .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. */
.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);
}
.page-hero--full .page-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 45%;
  z-index: 0;
}
.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%);
}
.page-hero--full > .wrap { position: relative; z-index: 2; }
.page-hero--full .page-hero__inner { max-width: 32.208em; }
.page-hero--full .page-hero__disc,
.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 */
  .page-hero--full { min-height: 0; }
  .page-hero--full .page-hero__bg { object-position: 68% 40%; }
  .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%);
  }
  .page-hero--full .page-hero__inner { max-width: none; }
}

.page-hero--media .page-hero__disc,
.page-hero--media .page-hero__half { display: none; }
.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;
}
.page-hero--media .page-hero__inner { max-width: none; }
.page-hero__media { position: relative; z-index: 2; }
.page-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r);
}
@media (max-width: 900px) {
  .page-hero__grid { grid-template-columns: 1fr; }
  .page-hero__media { max-width: 520px; }
}

.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);
}
.breadcrumb li { margin: 0; display: flex; align-items: center; gap: 0.45rem; }
.breadcrumb li + li::before { content: "/"; color: var(--ink-40); }
.breadcrumb a { color: var(--ink-60); text-decoration: none; }
.breadcrumb a:hover { color: var(--blue); text-decoration: underline; }

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

.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);
}
.callout h3 { font-size: 1.125rem; margin-bottom: 0.4rem; }
.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. */
.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);
}
.callout--split .callout__copy p { max-width: 42.456em; }
.callout__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-self: end;
}
@media (max-width: 900px) {
  .callout--split { grid-template-columns: 1fr; }
  .callout__actions { justify-self: start; }
}
@media (max-width: 420px) {
  .callout__actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* --- Practice locator: search panel beside a clustered map ---------------- */
.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);
}
.locator__panel {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  background: var(--white);
  min-height: 0;
}

.locator__search { display: flex; gap: 0; }
.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);
}
.locator__search input:focus { outline: 2px solid var(--blue); outline-offset: -2px; }
.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);
}
.locator__submit:hover { background: var(--blue-deep); border-color: var(--blue-deep); }
.locator__submit svg { width: 20px; height: 20px; }

.locator__filters { display: flex; gap: var(--s3); }
.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);
}
.locator__filters select:focus { outline: 2px solid var(--blue); outline-offset: -2px; }
.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);
}
.locator__near:hover { background: var(--blue); color: var(--white); }
.locator__near:disabled { opacity: 0.6; }

.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 */
.locator__detail {
  border-left: 4px solid var(--sun);
  background: var(--blue-mist);
  padding: clamp(0.9rem, 1.8vw, 1.25rem);
}
.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;
}
.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 */
.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 */
.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);
}

.locator__list {
  flex: 1 1 auto;
  min-height: 120px;
  overflow-y: auto;
  border-top: 1px solid var(--line);
  overscroll-behavior: contain;
}
.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);
}
.locator__item:hover { background: var(--blue-mist); padding-left: var(--s3); }
.locator__item.is-selected {
  background: var(--blue-mist);
  padding-left: var(--s3);
  box-shadow: inset 4px 0 0 var(--blue);
}
.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;
}
.locator__item-address {
  display: block;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--ink-60);
}
.locator__item-distance {
  display: block;
  margin-top: 0.3rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--sun-dark);
}
.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);
}
.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. */
.locator__map {
  height: 100%;
  min-height: 0;
  background: var(--blue-mist);
  position: relative;
  z-index: 0;
  isolation: isolate;
}
.locator__note,
.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);
}
.locator__note { background: var(--white); padding: var(--s4); margin: 0; }
.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. */
#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. */
.leaflet-marker-icon.locator__pin {
  display: grid;
  place-items: center;
}
.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);
}
.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;
}
.locator__cluster span { display: block; }
.leaflet-container { font: inherit; }
.leaflet-popup-content { font-size: var(--fs-sm); line-height: 1.55; }
.leaflet-popup-content strong { font-family: var(--font-display); color: var(--blue-ink); }

.tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.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. */
.tile .tile__action {
  margin: auto 0 0;
  padding-top: var(--s4);
}
/* Stacked variant: the same cards read down one column beside a photograph */
.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. */
.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. */
.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 */
.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 */
.tile--illus .tile__ico { height: 56px; }
.tile h3 { font-size: 1.1875rem; margin-bottom: 0.45rem; }
.tile p { font-size: var(--fs-sm); color: var(--ink-60); margin: 0; }

.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s6); }
.timeline li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s5);
  margin: 0;
  align-items: start;
}
.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 ------------------------------------- */
.exam-panel {
  background: var(--blue-mist);
  padding: clamp(1.75rem, 4vw, 3.5rem);
}
.exam-panel__lead {
  font-size: var(--fs-lead);
  color: var(--ink-60);
  max-width: 45.384em;
  margin: 0;
}
.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 */
.exam-panel__media { margin: 0; align-self: start; }
.exam-panel__media img {
  display: block;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 30%;
}

.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);
}
.check-list li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: var(--s4);
  align-items: start;
  margin: 0;
}
.check-list__mark {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--sun);
  color: var(--blue);
}
.check-list__mark svg { width: 18px; height: 18px; }
.check-list h3 { font-size: 1.0625rem; color: var(--blue); margin-bottom: 0.2rem; }
.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 */
.timeline--linked li { position: relative; }
.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);
}

.timeline h3 { font-size: 1.1875rem; margin-bottom: 0.35rem; }
.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 */
.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);
}
.join-head .section-head { margin-bottom: 0; max-width: 23.424em; }
.join-head__media { margin: 0; }
.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. */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.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 */
.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);
}
.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);
}
.steps h3 { font-size: 1.1875rem; margin-bottom: 0.4rem; }
.steps p { font-size: var(--fs-sm); color: var(--ink-60); margin: 0; }

/* Pale-blue band - a third neutral so consecutive sections never repeat */
.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 */
.section--navy { background: var(--blue); color: var(--white); }
.section--navy h2,
.section--navy h3,
.section--navy h4 { color: var(--white); }
.section--navy p:not(.eyebrow) { color: rgba(255, 255, 255, 0.9); }
.section--navy .eyebrow { color: rgba(255, 255, 255, 0.92); }
.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. */
.habits {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.habits__intro { position: sticky; top: calc(var(--header-h) + 2rem); }
.habits__intro h2 { margin-bottom: var(--s4); }
.habits__intro p:not(.eyebrow) { color: var(--ink-60); margin: 0; }

.habits__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(0.75rem, 1.6vw, 1.15rem);
  counter-reset: habit;
}
.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);
}
.habit__ico {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  background: var(--blue-soft);
  color: var(--blue);
}
.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 */
.habit__body h3 {
  font-size: 1.1875rem;
  color: var(--blue);
  margin-bottom: 0.35rem;
}
.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;
}
.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. */
.roles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: stretch;
}
.role {
  background: var(--white);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
}
.role__head {
  display: flex;
  align-items: center;
  gap: var(--s4);
  font-size: var(--fs-h3);
  margin-bottom: var(--s5);
}
.section--ink .role__head { color: var(--ink); }
.role__ico {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  flex: none;
}
.role__ico svg { width: 22px; height: 22px; }

.role__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
.role__list li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 0.85rem;
  align-items: start;
  margin: 0;
}
.section--ink .role__list li {
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.5;
  color: var(--blue);
}
.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;
}
.role__tick svg { width: 15px; height: 15px; }

/* Closing note takes the amber ground rather than a fourth white card */
.role--note { background: var(--sun); }
.role__ico--onsun { margin-bottom: var(--s5); }
.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. */
.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 */
}
.wear {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
}
.wear h3 { font-size: var(--fs-h3); color: var(--blue); margin-bottom: var(--s4); text-wrap: balance; }
.wear p { color: var(--ink-60); margin-bottom: var(--s4); }
/* The expanded acronym reads as a subtitle to the heading above it */
.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 */
.wear__figure { margin: auto 0 0; padding-top: var(--s5); }
.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 */
.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 */
.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);
}
.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;
}
.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);
}
.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. */
.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 */
.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;
}
.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);
}
.spark-step__disc svg { width: 28px; height: 28px; }
/* Hover previews the accent without committing to it */
.spark-step__btn:hover .spark-step__disc { background: rgba(255, 255, 255, 0.16); }
.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 */
.spark-step__btn[aria-pressed="true"] .spark-step__disc {
  background: var(--sun);
  border-color: var(--sun);
  color: var(--blue-ink);
  transform: scale(1.06);
}
.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;
}
.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. */
.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 */
.ted-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.ted-figure picture {
  display: block;
  flex: 1;
  min-height: 300px;
}
.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;
}
.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. */
.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;
}
.ted-figure__key {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s3) var(--s6);
  margin-top: var(--s5);
}
.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);
}
.ted-key__swatch { width: 16px; height: 16px; border-radius: 50%; flex: none; }
.ted-key__swatch--clear { background: var(--white); border: 2.5px solid var(--sun); }
.ted-key__swatch--treat { background: var(--blue); opacity: 0.62; }

/* Construction panel: sand ground with the two zones as cards on top */
.lens-panel {
  background: var(--cream);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  text-align: center;
}
.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);
}
.lens-panel__ico svg { width: 26px; height: 26px; }
.lens-panel h3 { font-size: var(--fs-h3); color: var(--blue); margin-bottom: var(--s3); }
.lens-panel__lead { color: var(--blue); margin-bottom: var(--s5); }
.lens-zone {
  background: var(--white);
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  text-align: left;
}
.lens-zone + .lens-zone { margin-top: var(--s4); }
.lens-zone h4 { font-size: 1.125rem; color: var(--blue); margin-bottom: 0.4rem; }
.lens-zone p { font-size: var(--fs-sm); color: var(--ink-60); margin: 0; }

.tile-grid--4 { grid-template-columns: repeat(4, 1fr); }
.tile-grid--3 { grid-template-columns: repeat(3, 1fr); }
.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 */
.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);
}
.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 */
.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 */
.tile--lead {
  position: relative;
  border-color: var(--sun);
  box-shadow: var(--shadow-md);
}
.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. */
.options {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.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 */
.option__ico {
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue);
  flex: none;
}
.option__ico img { width: 34px; height: 34px; object-fit: contain; }
.option__body { min-width: 0; }
.option__ico svg { width: 28px; height: 28px; }
.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 */
.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. */
.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 */
.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. */
.options__more--center {
  max-width: none;
  margin-inline: auto;
  text-align: center;
}

.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);
}
.option__link:hover { gap: 0.85rem; }
.option__link svg { width: 16px; height: 16px; }

/* Icon standing in for a number in an ink stat block */
.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);
}
.stat__ico svg { width: 32px; height: 32px; }

/* Feature chips */
.chip-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
}
.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;
}
.chip-list svg { width: 16px; height: 16px; flex: none; color: var(--sun-dark); }

/* Split block: short intro beside a numbered list */
.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);
}
.split-block__intro h3 { font-size: var(--fs-h3); margin-bottom: var(--s4); }
@media (max-width: 900px) {
  .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.
   -------------------------------------------------------------------------- */
.steps-band {
  position: relative;
  overflow: hidden;
  background: var(--cream);
}
.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. */
.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. */
.steps-band__ornament--right { right: 0; transform: translateY(-50%); }
.steps-band__ornament--left { left: 0; transform: translateY(-50%) scaleX(-1); }

@media (max-width: 900px) {
  .steps-band__ornament { display: none; }
}
.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;
}
.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);
}
.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);
}
.steps-card h3 { font-size: 1.1875rem; margin-bottom: var(--s3); }
.steps-card p {
  font-size: var(--fs-sm);
  color: var(--ink-60);
  margin: 0 0 clamp(1.5rem, 3vw, 2rem);
}
.steps-card__cta {
  width: 100%;
  justify-content: center;
  margin-top: auto;
}

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

@media (max-width: 900px) {
  .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.
   -------------------------------------------------------------------------- */
.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 */
.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);
}
.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 */
.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 */
.lens-compare__item--lead { border-top-color: var(--blue); }

/* Label first: you know which lens you are looking at before you look */
.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;
}
.lens-compare__tag--plain { color: var(--ink-60); }

.lens-compare__item img {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin-inline: auto;
}
.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 */
.lens-compare figcaption p {
  font-size: var(--fs-sm);
  color: var(--ink-60);
  max-width: 27.816em;
  margin: 0 auto;
}

@media (max-width: 720px) {
  .lens-compare { grid-template-columns: 1fr; }
  .lens-compare__item img { max-width: 260px; }
  .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.
   -------------------------------------------------------------------------- */
.spec {
  display: grid;
  grid-template-columns: minmax(0, 0.32fr) minmax(0, 0.68fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.spec__art { margin: 0; }
.spec__art img,
.spec__art svg {
  display: block;
  width: 100%;
  height: auto;
  margin-inline: auto;
}
.spec__art--lens img,
.spec__art--lens svg { max-width: 132px; }
/* capped at the artwork's native 255px so it is never upscaled */
.spec__art--layers img { max-width: 255px; }
.spec__art--layers svg { max-width: 300px; }
.spec__art--shield img { max-width: 116px; }

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

.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 */
.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. */
.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 */
  .spec__legend li::before { width: clamp(40px, 6vw, 64px); margin-left: 0; }
}
.spec__legend h3 { font-size: 1.1875rem; margin-bottom: 0.3rem; }
.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 */
.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;
}
.spec-grid li {
  margin: 0;
  padding-inline: clamp(0.5rem, 1.5vw, 1.5rem);
  display: grid;
  align-content: start;
  justify-items: center;
}
.spec-grid__ico {
  width: auto;
  height: clamp(52px, 6vw, 70px);
  object-fit: contain;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}
.spec-grid h3 { font-size: 1rem; margin: 0; }

/* The dividers only make sense while all five sit on one row */
@media (min-width: 901px) {
  .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. */
.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;
}
.spec__note a { color: var(--ink-60); }

@media (max-width: 900px) {
  .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 */
  .spec:not(.spec--detail) .spec__art { order: 2; }
  .spec__art--lens img,
  .spec__art--lens svg { max-width: 104px; margin-inline: 0; }
  /* Smaller, so the diagram sits closer in scale to the labels it belongs to */
  .spec__art--layers img { max-width: 168px; margin-inline: 0; }
  .spec__art--layers svg { max-width: 260px; margin-inline: 0; }
  .spec__art--shield img { max-width: 96px; margin-inline: 0; }
  .spec-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: clamp(1.75rem, 4vw, 2.5rem); }
}

@media (max-width: 560px) {
  .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.
   -------------------------------------------------------------------------- */
.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;
}
.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%;
}
.photo-panel .wrap { position: relative; z-index: 2; }
.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 */
.photo-panel__card h2 { margin-bottom: var(--s4); }
.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) {
  .photo-panel { padding-block: 0 var(--section-y); min-height: 0; display: block; }
  .photo-panel__bg {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    margin-bottom: clamp(1.5rem, 5vw, 2.5rem);
  }
  .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.
   -------------------------------------------------------------------------- */
.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);
}
.matters__copy p:last-child { margin-bottom: 0; }
/* The headline claim, set in the amber block the brand uses for emphasis */
.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 */
.matters__claim + p { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
.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. */
.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 */
.matters-table {
  grid-column: 1 / -1;
  width: 100%;
  border-collapse: collapse;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  font-size: var(--fs-sm);
}
.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);
}
.matters-table th strong { font-weight: 800; }
.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) {
  .matters { grid-template-columns: 1fr; }
  /* Portrait first, so the copy stays next to the table it introduces */
  .matters__media { grid-row: 1; max-width: 380px; margin-inline: auto; }
  .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 */
.proof-band { position: relative; overflow: hidden; padding-top: clamp(2.75rem, 5vw, 4.5rem); }
.proof-band .wrap { position: relative; z-index: 1; }
.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}
.proof {
  display: grid;
  justify-items: center;
  text-align: center;
}
.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);
}
.proof__ico svg { width: 46%; height: 46%; }
.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);
}
.proof__label {
  font-size: var(--fs-sm);
  color: var(--ink-60);
  margin: 0;
  max-width: 21.96em;
}

@media (max-width: 720px) {
  .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. */
.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;
}
.note-mark:hover,
.note-mark:focus-visible { text-decoration: underline; }

.ref-mark {
  font-size: 0.62em;
  font-weight: 700;
  vertical-align: super;
  line-height: 0;
  color: var(--sun-dark);
  text-decoration: none;
}
.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. */
.ref-mark + .ref-mark::before { content: ","; }

.refs h2 { font-size: var(--fs-h3); margin-bottom: var(--s5); }
.refs ol { padding-left: 1.35rem; max-width: 73.2em; }
.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);
}
.refs a { color: var(--ink-60); }
/* Standing disclaimer under a reference list */
.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 --- */
.ticklist { list-style: none; margin: var(--s4) 0; padding: 0; display: grid; gap: 0.7rem; }
.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);
}
.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 */
.ticklist--row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
}
.ticklist--row li { margin: 0; }

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

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

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

.methods-band__bg { position: absolute; inset: 0; z-index: 0; margin: 0; }
.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. */
.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 ------------------------ */
.methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.methods__card,
.methods__note {
  background: var(--white);
  padding: clamp(1.5rem, 3.2vw, 2.75rem);
}
.methods__note { grid-column: 1 / -1; }

/* The band paints its own text white; inside the cards it returns to ink */
.methods__card h3 { color: var(--blue); margin-bottom: var(--s5); }
.methods__card .ticklist { margin: 0; gap: 0.9rem; }
.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. */
.methods .methods__note p { color: var(--ink-80); font-weight: 600; max-width: 67.344em; }
.methods .methods__note p + p { margin-top: var(--s4); }
.methods__note .btn { margin-top: var(--s5); }

@media (max-width: 860px) {
  .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 */
.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;
}
.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;
}
.variant__media {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--blue-mist);
}
.variant__media img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}

.variant__body {
  display: flex;
  flex-direction: column;
  flex: 1;                        /* so the trailing link can bottom-align */
  padding: clamp(1.35rem, 2.6vw, 1.9rem);
}
.variant .compare__tag { align-self: flex-start; margin-bottom: var(--s3); }
.variant__body h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); margin: 0 0 var(--s2); }
.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 */
.variant .ticklist { margin: 0 0 var(--s5); gap: 0.7rem; }
.variant .ticklist li { font-size: var(--fs-sm); }
/* Pushed to the card foot so all three links sit on one line across the row */
.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 */
  .variant__media { aspect-ratio: 16 / 9; }
  .variant__media img { object-position: 50% 30%; }
}

/* --- Side-by-side comparison cards -------------------------------------- */
.compare { display: flex; flex-direction: column; }
.compare h3 { margin-bottom: var(--s2); }
.compare .ticklist { margin-top: var(--s4); }
.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;
}
.compare--lead { border-color: var(--sun-soft); border-top: 3px solid var(--sun); }
.compare--lead .compare__tag { background: var(--sun-mist); color: var(--sun-dark); }
.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 */
.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 */
.result-note--plain { border-top: 0; padding-top: 0; }

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

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

.field { display: grid; gap: 0.4rem; }
.field label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
}
.field input,
.field select,
.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);
}
.field textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 4px var(--sun-soft);
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: #c0392b; }
.field__error {
  font-size: var(--fs-xs);
  color: #c0392b;
  min-height: 1.1em;
  font-weight: 600;
}
.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. */
.form-submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 1.75rem);
}
.form-submit .btn { flex: none; }
.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);
}
.form-submit .field__hint a {
  color: var(--blue);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

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

.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);
}

.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);
}
.form-status[hidden] { display: none; }
.form-status h3 { font-size: 1.125rem; margin-bottom: 0.35rem; }
.form-status p { margin: 0; color: var(--ink-80); }

.clinic-list { display: grid; gap: var(--s4); }
.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);
}
.clinic h3 { font-size: 1.125rem; margin-bottom: 0.25rem; }
.clinic__meta { font-size: var(--fs-sm); color: var(--ink-60); margin: 0 0 0.5rem; }
.clinic__links { display: flex; flex-wrap: wrap; gap: 1rem; font-size: var(--fs-sm); }
.clinic__links a { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--ink-80); }
.clinic__links svg { width: 15px; height: 15px; color: var(--sun-dark); }
.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;
}
.locator__empty { color: var(--ink-60); font-size: var(--fs-sm); }

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

/* --------------------------------------------------------------------------
   22. Scroll reveal
   -------------------------------------------------------------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }
.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. */
.journey {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.journey .timeline { gap: clamp(1.5rem, 2.6vw, 2rem); }

.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);
}
.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%;
}
.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);
}
.journey__note-ico {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: none;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue);
}
.journey__note-ico svg { width: 19px; height: 19px; }

@media (max-width: 900px) {
  .journey { grid-template-columns: 1fr; gap: var(--s6); }
  .journey__media { position: static; max-width: 520px; }
  .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. */
.band--cta .band h2,
.band--cta h2 { margin-bottom: var(--s4); }
.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 */
.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. */
.control__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}
.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;
}
.control__copy > * { max-width: 43.92em; }

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

.control__list {
  list-style: none;
  margin: clamp(1.5rem, 3vw, 2rem) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(1rem, 2vw, 1.4rem);
}
.control__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  align-items: start;
  margin: 0;
}
.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;
}
.control__tick svg { width: 16px; height: 16px; }
.control__list h3 {
  font-size: 1.0625rem;
  color: var(--blue);
  margin: 0 0 0.2rem;
}
.control__list p { font-size: var(--fs-sm); color: var(--ink-60); margin: 0; }

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

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

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

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

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

  .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;
  }
  .nav__menu.is-open .nav__link {
    display: block;
    padding: 0.9rem 0.75rem;
    border-radius: var(--r-sm);
    font-size: 1.0625rem;
  }
  .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 */
  .nav__item--menu { display: block; }
  .nav__disclosure { display: none; }
  .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;
  }
  .nav__sublink { padding: 0.75rem; font-size: 1rem; color: var(--ink-60); }

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

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

  .sim__layout { grid-template-columns: 1fr; }
  .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%);
  }
  .sim__scenes li:last-child { padding-right: var(--s5); }
  .sim__scene-btn {
    white-space: nowrap;
    padding: 0.7rem 0.95rem;
    font-size: var(--fs-sm);
    scroll-snap-align: start;
  }

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

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

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

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

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

  .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. */
  .sticky-cta { display: flex; }

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

  .btn { width: 100%; }
  .btn-row { gap: 0.65rem; }
  .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. */
  .btn-row--note { gap: 1rem; }
  .sticky-cta .btn { width: auto; }
  .clinic__links .btn,
  .locator__controls .btn { width: auto; }

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

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

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

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

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

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

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

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

  .guides__grid,
  .tile-grid,
  .contact-strip,
  .form-grid { grid-template-columns: 1fr; }
  .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. */
  .tile-grid--rowhead .tile {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.85rem;
    align-items: center;
  }
  .tile-grid--rowhead .tile > svg { margin-bottom: 0; }
  .tile-grid--rowhead .tile h3 { margin-bottom: 0; }
  .tile-grid--rowhead .tile p { grid-column: 1 / -1; margin-top: 0.7rem; }

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

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

  .final { min-height: auto; background: var(--cream); }
  .final__bg { inset: 0 0 auto 0; height: 64vw; }
  .final__bg img { height: 100%; object-position: 34% 50%; }
  .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%
    );
  }
  .final__inner { padding-block: calc(64vw + 0.75rem) var(--s8); }
  .final__card { margin-left: 0; max-width: none; }
  .final__ring, .final__dots { display: none; }

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

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

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

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


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

/* Lifestyle grid row spans (paired with the definite row height above) */
@media (max-width: 1080px) {
  .life__grid { grid-auto-rows: clamp(150px, 22vw, 210px); }
}
@media (max-width: 720px) {
  .life__grid { grid-auto-rows: clamp(140px, 38vw, 190px); }
  .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 */
  .product__pillars { grid-template-columns: 1fr; }

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

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

  .breadcrumb { font-size: 0.75rem; }
  .timeline li { gap: var(--s4); }
  .timeline__num { width: 48px; height: 48px; font-size: 0.9375rem; }
  .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 */
  .hero__dots-1,
  .explain__dots,
  .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. */
.hero__wrap > *,
.sim__layout > *,
.explain__grid > *,
.diagram-split > *,
.product__grid > *,
.signs__grid > *,
.why__grid > *,
.stats__grid > *,
.guides__grid > *,
.tile-grid > *,
.trustbar__inner > *,
.footer__top > *,
.finder__panel > *,
.life__grid > *,
.qa,
.timeline li,
.finder__steps li { min-width: 0; }

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

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

@media print {
  .site-header, .sticky-cta, .site-footer, .blob, .dots, .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) {
  .nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }
  .brand { margin-right: 0; }
  .nav__menu--center { justify-self: center; margin-inline: 0; }
  .nav__login { justify-self: end; }
}

/* --- 02 Hero: full-bleed wash, centred headline, composed corners ---------- */
.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);
}
.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. */
.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 */
.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;
}
.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;
}

.hero__figure { grid-column: 1 / 6; grid-row: 3; margin: 0; }
.hero__figure img {
  width: 100%;
  aspect-ratio: 4 / 4.2;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: var(--r-lg);
}
.hero__copy { grid-column: 6 / -1; grid-row: 3; }
.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 */
.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 */
}
.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. */
.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);
}
.hero__stats {
  grid-column: 5 / 8;
  grid-row: 4;
  display: flex;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-self: end;
}
.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);
}
.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 */
.hero__card { text-decoration: none; color: inherit; }
.hero__card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.hero__card { transition: transform var(--t), box-shadow var(--t); }

.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);
}
.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);
}
.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;
}
.hero__card-ico svg { width: 18px; height: 18px; }
.hero__card h2 {
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  line-height: 1.2;
  margin: 0 0 var(--s3);
}
.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) {
  .hero { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
  .hero__wrap { row-gap: clamp(1rem, 2vw, 1.75rem); }
  .hero__title { position: relative; }
  .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 */
  }
  .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. */
  .hero__figure { overflow: hidden; border-radius: var(--r-lg); }
  .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. */
  .hero__copy {
    grid-column: 5 / 12;
    grid-row: 3;
    align-self: center;
    padding-left: clamp(1.5rem, 5vw, 4.5rem);
  }
  .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. */
  .hero__shot {
    grid-column: 5 / 9;
    grid-row: 4;
    align-self: stretch;
    position: relative;
    width: 100%;
    min-height: 0;
  }
  .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%;
  }
  .hero__card {
    grid-column: 9 / -1;
    grid-row: 4;
    align-self: end;
  }
}

/* --- 04 Feature strip + brand row ----------------------------------------- */
.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 */
.strip__mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  gap: clamp(0.75rem, 1.5vw, 1.15rem);
}
.strip__shot { margin: 0; border-radius: var(--r); overflow: hidden; }
.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;
}
.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);
}
.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;
}
.strip__stat-num svg { width: 26px; height: 26px; color: var(--sun-deep); flex: none; }
.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;
}
.strip__stat-note { font-size: var(--fs-sm); color: var(--ink-60); margin: 0; }

.strip__wide {
  grid-column: 1 / -1;
  position: relative;
  margin: 0;
  border-radius: var(--r);
  overflow: hidden;
}
.strip__wide img {
  width: 100%;
  height: 100%;
  min-height: clamp(230px, 24vw, 340px);
  object-fit: cover;
  display: block;
}
.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));
}
.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. */
.strip__side {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2.25rem);
}
.strip__list { margin-top: auto; margin-bottom: clamp(0.75rem, 1.6vw, 1.25rem); }
.strip__img { border-radius: var(--r); overflow: hidden; margin: 0; }
.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%;
}
.strip__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.strip__item { display: block; }
.strip__item + .strip__item {
  border-left: 1px solid var(--line);
  padding-left: clamp(1.25rem, 2.5vw, 2rem);
}
.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);
}
.strip__item-ico svg { width: 22px; height: 22px; }
.strip__item h3 { font-size: 1.1875rem; margin-bottom: 0.35rem; }
.strip__item p { font-size: var(--fs-sm); color: var(--ink-60); margin: 0; }

.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);
}
.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;
}
.brandrow__marks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.brandrow__marks img { max-height: 64px; width: auto; }
.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 ------------------------ */
.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);
}
.split-head h2 { margin-bottom: 0; }
.split-head p:not(.eyebrow) { font-size: var(--fs-lead); color: var(--ink-60); margin: 0; }
.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. */
.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. */
.split-head--intro p.split-head__lead { margin-top: clamp(1.15rem, 1.5vw, 1.6rem); }
.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. */
.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. */
.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. */
  .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. */
  .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. */
.locator-title {
  font-size: clamp(1.25rem, 2.1vw, 1.6rem);
  line-height: 1.3;
  margin: 0;
  max-width: 34em;
}
.locator-title + .locator { margin-top: clamp(1rem, 2vw, 1.5rem); }

/* --- 05 Service cards ----------------------------------------------------- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.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 */
.svc__media { position: absolute; inset: 0; margin: 0; }
.svc__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-slow);
}
.svc:hover .svc__media img { transform: scale(1.045); }
/* Light scrim so the dark copy stays legible over any photograph */
.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;
}
.svc__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
}
.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);
}
.svc__body p { font-size: var(--fs-sm); color: var(--ink-60); margin-bottom: var(--s5); }
.svc__body .btn {
  margin-top: auto;
  width: 100%;
  justify-content: space-between;
  text-align: left;
}
.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. */
.diagram-split {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.diagram-split__figure { margin: 0; }
.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. */
.diagram-split--flush { align-items: stretch; }
.diagram-split--flush .diagram-split__figure,
.diagram-split--flush .diagram-split__figure picture { display: flex; }
.diagram-split--flush .diagram-split__figure picture {
  width: 100%;
  max-width: 620px;
  margin-inline: auto;
}
.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. */
.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 */
}
.myths__copy { align-self: center; padding-bottom: clamp(1.75rem, 4vw, 3.25rem); }
.myths__copy p { color: var(--ink-80); margin-bottom: var(--s4); }
.myths__copy p:last-child { margin-bottom: 0; }
.myths__media { margin: 0; align-self: end; }
.myths__media img { display: block; width: 100%; height: auto; }

/* A hairline of page ground between the panels, as on the reference */
.myths__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
}
.myth {
  background: var(--blue);
  color: var(--white);
  padding: clamp(1.75rem, 4vw, 3rem);
}
.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 */
.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;
}
.myth > p:not(.myth__label) {
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--fs-sm);
  margin: 0;
}

@media (max-width: 860px) {
  .myths__intro { grid-template-columns: 1fr; padding-bottom: 0; }
  .myths__media { max-width: 380px; margin-inline: auto; }
  .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. -------------------------------------------------------- */
.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);
}
.dims-intro__mark { width: clamp(72px, 8vw, 108px); height: auto; }
.dims-intro__copy p { color: var(--ink-60); margin-bottom: var(--s4); }
.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 */
.dims-figures {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.dims-figures figure { margin: 0; }
.dims-figures img { display: block; width: 100%; height: auto; margin-inline: auto; }
.dims-figures__lens img { max-width: 320px; }
.dims-figures__eye img { max-width: 560px; }

@media (max-width: 860px) {
  .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 */
  .dims-intro__mark { justify-self: center; }
  .dims-figures { grid-template-columns: 1fr; }
  .dims-figures__eye img { max-width: 480px; }
}

/* Body copy, so it takes the site body size rather than the larger lead size */
.diagram-split__copy > p:not(.eyebrow) {
  color: var(--ink-60);
  max-width: 35.136em;
  margin-bottom: var(--s4);
}
.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 */
.diagram-split__copy .callout h3 {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.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 ------------------------------------------------------- */
.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;
}
.band__copy {
  padding: var(--band-pad);
  align-self: center;
}

.band__checks { list-style: none; margin: 0; padding: 0 0 var(--s5); display: grid; gap: 0.9rem; }
.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);
}
.band__tick {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  margin-top: 0.1rem;
}
.band__tick svg { width: 16px; height: 16px; }

.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);
}

.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%);
}
.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 */
.band__media {
  position: relative;
  align-self: stretch;
  margin: 0;
  min-width: 0;
}
.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 */
.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);
}
.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 */
.band__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.25rem);
}
.band__call { min-width: 0; }
.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);
}
.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;
}
.band__call-num:hover { color: var(--blue-deep); text-decoration: underline; }
.band__call-num svg { width: 17px; height: 17px; flex: none; }

/* --- 07 About ------------------------------------------------------------- */
.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. */
.about-grid__copy {
  align-self: center;
  position: relative;
  top: clamp(0.5rem, 1.2vw, 1.25rem);
}
.about-media { position: relative; align-self: stretch; }
.about-media > picture { display: block; height: 100%; }
.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 */
.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. */
.about-media--fit {
  max-width: 88%;
  justify-self: end;
  align-self: center;
}
.about-media--fit img {
  min-height: 0;
  height: auto;
  aspect-ratio: 1 / 1;
}

@media (max-width: 900px) {
  .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. */
.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) {
  .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;
  }
}
.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);
}
.about-media__note-body {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 0.85rem;
  align-items: start;
}
.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);
}
.about-media__note-ico svg { width: 18px; height: 18px; }
.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 */
.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);
}
.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);
}
.about-stats__num span { color: var(--sun); font-size: 0.6em; letter-spacing: -0.02em; }
.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. */
.about-stats--trio {
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.1rem, 2.2vw, 1.75rem);
}
.about-stats--trio .about-stats__num { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.about-stats--trio .about-stats__label { font-size: var(--fs-sm); max-width: none; }

/* --- 08 Four-up profile cards --------------------------------------------- */
.people-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}
.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);
}
.person:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--blue-soft); }
.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. */
.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;
}
.person h3 { font-size: 1.0625rem; margin: var(--s4) 0 0.15rem; }
.person__role { font-size: var(--fs-xs); color: var(--sun-dark); font-weight: 700; margin: 0 0 var(--s3); }
.person__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.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;
}
.person__points svg { width: 16px; height: 16px; color: var(--blue); margin-top: 2px; }

/* --- 09 Dark bento -------------------------------------------------------- */
.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(232px, auto);
  gap: clamp(0.85rem, 1.6vw, 1.25rem);
}
.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);
}
.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);
}
.bento__card h3 { font-size: 1.125rem; color: var(--white); margin: var(--s4) 0 0.35rem; }
.bento__card p { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.92); margin: 0; }
.bento__img { border-radius: var(--r); overflow: hidden; }
.bento__img img { width: 100%; height: 100%; object-fit: cover; }
.bento__card--wide { grid-column: span 2; }

/* --- 10 Testimonial ------------------------------------------------------- */
.voice {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.voice__col { --voice-indent: calc(62px + clamp(1rem, 2.2vw, 1.75rem)); }
.voice__col h2 { margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.voice__quote {
  display: flex;
  gap: clamp(1rem, 2.2vw, 1.75rem);
  margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
}
.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 */
}
.voice blockquote {
  margin: 0;
  font-size: clamp(1.125rem, 1.85vw, 1.5rem);
  line-height: 1.55;
  color: var(--ink-60);
}
.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);
}
.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;
}
.voice__where {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0;
}
.voice__actions { margin-left: var(--voice-indent); }
.voice__media { position: relative; }
.voice__media img { width: 100%; aspect-ratio: 4 / 4.2; object-fit: cover; border-radius: var(--r-lg); }
.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;
}
.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;
}
.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;
}
.voice__float-ico svg { width: 19px; height: 19px; }

/* --- 11 Certifications ---------------------------------------------------- */
.cert-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}
.cert {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  text-align: center;
}
.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);
}
.cert__seal svg { width: 28px; height: 28px; }
.cert__seal--art { width: 78px; height: 78px; background: none; }
.cert__seal--art img { width: 100%; height: 100%; object-fit: contain; }
.cert h3 { font-size: 1rem; margin-bottom: 0.35rem; }
.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. */
.cert-grid--2 { grid-template-columns: repeat(2, 1fr); }
.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. */
.cert--icon { padding: clamp(1.8rem, 3vw, 2.5rem) clamp(1.25rem, 2.4vw, 1.75rem); }
.cert--icon .cert__seal { width: 92px; height: 92px; margin-bottom: var(--s5); }
.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 */
.cert__img { width: 44px; height: 44px; object-fit: contain; }
.cert--icon h3 { font-size: 1.0625rem; margin-bottom: 0; }

.cert--feature {
  --cert-pad: clamp(1.6rem, 3vw, 2.5rem);
  text-align: left;
  padding: var(--cert-pad);
  display: flex;
  flex-direction: column;
}
.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. */
.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);
}
.cert--feature .cert__seal--art img {
  width: auto;
  max-width: 100%;
  height: clamp(155px, 16vw, 210px);
  object-fit: contain;
}
.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;
}
.cert--feature h3 { font-size: var(--fs-h3); margin-bottom: var(--s4); }
.cert--feature p { font-size: var(--fs-sm); color: var(--ink-80); margin-bottom: var(--s4); }
.cert--feature p:last-child { margin-bottom: 0; }
.cert--feature .cert__lead { color: var(--ink); font-weight: 600; }

/* Research paper: document card with a download action pinned to the bottom. */
.paper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s4);
}
.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. */
.paper-list { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }

.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;
}
.paper--doc .paper__intro { display: grid; justify-items: start; }
.paper--doc .cert__seal { margin: 0 0 var(--s5); }
.paper--doc .paper__intro .btn { margin-top: var(--s5); }

.paper__doc {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--blue-mist);
}
.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 */
.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) {
  .paper--doc { grid-template-columns: 1fr; }
  .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) {
  .paper__doc { display: none; }
}

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

/* --- 12 Dark call-to-action band ------------------------------------------ */
.darkcta {
  position: relative;
  overflow: hidden;
  background: var(--blue-ink);
  text-align: center;
}
.darkcta__bg { position: absolute; inset: 0; z-index: 0; }
.darkcta__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.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%);
}
.darkcta__inner {
  position: relative;
  z-index: 2;
  max-width: 700px;
  margin-inline: auto;
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}
.darkcta h2 { color: var(--white); }
.darkcta p:not(.eyebrow) { color: rgba(255, 255, 255, 0.92); margin-inline: auto; margin-bottom: var(--s6); }
.darkcta .btn-row { justify-content: center; }
/* the blue veil is lighter now, so the copy carries its own soft shadow */
.darkcta .eyebrow,
.darkcta h2,
.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. */
.darkcta--split { text-align: left; }
.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;
}
.darkcta--split .btn-row { justify-content: flex-start; }
.darkcta--split p:not(.eyebrow) { margin-inline: 0; }
.darkcta--split .eyebrow,
.darkcta--split h2,
.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. */
.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%);
}
.darkcta--soft h2 { color: var(--blue); }
.darkcta--soft p:not(.eyebrow) { color: var(--ink-80); }
.darkcta--soft .eyebrow { color: var(--blue-deep); }

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

/* --- 13 Article cards ----------------------------------------------------- */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.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);
}
.post:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--blue-soft); }
.post img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.post__body { display: flex; flex-direction: column; flex: 1; padding: clamp(1.25rem, 2.4vw, 1.6rem); }
.post__meta {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-bottom: var(--s3);
}
.post h3 { font-size: 1.125rem; margin-bottom: var(--s4); }
.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);
}
.post:hover .post__more { gap: 0.8rem; }
.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. */
.is-paged-out { display: none; }

.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);
}
.pager__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pager__list li { margin: 0; }

.pager__num,
.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);
}
.pager__num:hover,
.pager__step:hover:not([disabled]) { background: var(--blue-soft); border-color: var(--blue-soft); }

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

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

/* --- 14 Footer newsletter ------------------------------------------------- */
.newsletter { margin-top: var(--s5); }
.newsletter h4 {
  color: var(--white);
  font-size: 0.8125rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: var(--s3);
}
.newsletter__row { display: flex; gap: 0.5rem; }
.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);
}
.newsletter__row input::placeholder { color: rgba(255, 255, 255, 0.5); }
.newsletter__row input:focus {
  outline: none;
  border-color: var(--sun);
  background: rgba(255, 255, 255, 0.12);
}
.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);
}
.newsletter__row button:hover { background: var(--sun-deep); }
.newsletter__row svg { width: 18px; height: 18px; }
.newsletter__note { margin-top: 0.6rem; font-size: 0.75rem; color: rgba(255, 255, 255, 0.55); }

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

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

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

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

  .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 */
  .strip__list { margin-top: 0; margin-bottom: 0; }

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

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

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

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

  .band,
  .about-grid,
  .diagram-split,
  .voice { grid-template-columns: 1fr; }
  /* Photo above the checklist once the two columns no longer fit */
  .exam-panel__body { grid-template-columns: 1fr; }
  .exam-panel__media img { max-width: 100%; aspect-ratio: 16 / 9; }
  .about-grid__copy { top: 0; }   /* stacked: no optical offset to make up */
  .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. */
  .diagram-split--flush .diagram-split__figure,
  .diagram-split--flush .diagram-split__figure picture { display: block; }
  .diagram-split--flush .diagram-split__figure picture { max-width: 520px; }
  .diagram-split--flush .diagram-split__figure img { max-width: 520px; object-fit: fill; }
  .darkcta--split .darkcta__inner { grid-template-columns: 1fr; }
  .darkcta__figure img { max-width: 380px; }
  /* Stacked: the photograph becomes a full-width band under the copy */
  .band { grid-template-areas: "media" "copy"; }
  .band__media { grid-area: media; }
  .band__copy { grid-area: copy; }
  .band__media img { aspect-ratio: 16 / 9; height: auto; min-height: 0; }
  .band__media--cutout { padding-bottom: 0; }
  .band__media--cutout img { aspect-ratio: auto; max-height: 400px; }
  .voice__media { max-width: 460px; margin-inline: auto; width: 100%; }
  .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. */
  .about-media { max-width: 520px; margin-inline: auto; width: 100%; align-self: start; }
  .about-media > picture { height: auto; }
  .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. */
  .about-media:not(.about-media--wide) > picture img {
    aspect-ratio: auto;
    object-fit: contain;
  }
  .about-media--wide img { aspect-ratio: 4 / 3; }

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

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

  /* Single file, still one compact row each */
  .options { grid-template-columns: 1fr; }
  .option__ico { width: 48px; height: 48px; }
  .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 */
  .tile-grid--stack .tile {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    column-gap: var(--s4);
    align-items: start;
  }
  .tile-grid--stack .tile > svg {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
  }
  .tile-grid--stack .tile h3 {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin-bottom: 0;
  }
  .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. */
  .steps { grid-template-columns: 1fr; }
  .steps__item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: var(--s4);
    align-items: start;
  }
  .steps__item::after { display: none; }
  .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;
  }
  .steps__item h3 { grid-column: 2; grid-row: 1; align-self: center; }
  .steps__item p { grid-column: 2; grid-row: 2; }

  /* Mobile: one column, headline first, the small shot and ornament drop */
  .hero__shot,
  .hero__ornament { display: none; }
  .hero__eyebrow,
  .hero__title,
  .hero__figure,
  .hero__copy,
  .hero__stats,
  .hero__card { grid-column: 1 / -1; grid-row: auto; }
  .hero__eyebrow { margin-top: 0; }
  .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%. */
  .hero__figure img {
    aspect-ratio: 4 / 3.4;
    border-radius: var(--r);
    transform: scale(1.24) translateX(-3.7%);
    transform-origin: 50% 28%;
  }
  .hero__stats { justify-content: space-between; gap: var(--s4); }
  .hero__card { border-radius: var(--r); }

  .strip,
  .strip__side,
  .strip__list { grid-template-columns: 1fr; }
  .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. */
  .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. */
  .strip__img img { aspect-ratio: 16 / 10; transform-origin: 38% 38%; }
  .strip__item + .strip__item {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--line);
    padding-top: clamp(1.25rem, 2.5vw, 2rem);
  }
  .brandrow__marks { justify-content: flex-start; }

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

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

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

  .voice__col { --voice-indent: 0px; }
  .voice__quote { gap: var(--s4); }
  .voice__mark { width: 52px; height: 52px; font-size: 2.1rem; padding-top: 0.6rem; }
  .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.
   -------------------------------------------------------------------------- */
.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 */
.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. */
.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. */
.quiz__notice,
.quiz__intro,
.quiz__stage,
.quiz__result {
  max-width: var(--quiz-measure);
  margin-inline: auto;
}

/* --- attention notice ----------------------------------------------------- */
.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. */
.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;
}
.quiz__notice > * { grid-column: 2; }
.quiz__notice-title {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--blue);
}
.quiz__notice p:last-child { margin: 0; font-size: var(--fs-sm); color: var(--ink-80); }

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

/* --- progress ------------------------------------------------------------- */
.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);
}
.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. */
.quiz__dots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.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);
}
.quiz__dot.is-done { border-color: var(--blue); color: var(--blue); }
.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. */
.quiz__bar { flex: 1 1 100%; height: 4px; background: var(--blue-soft); overflow: hidden; }
.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. */
.quiz__ask {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--s4);
}
.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;
}
.quiz__question:focus-visible { outline: 2px solid var(--blue); outline-offset: 6px; }

.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;
}
.quiz__hint-toggle svg { width: 100%; height: 100%; display: block; }
.quiz__hint-toggle:hover { color: var(--blue-deep); }
.quiz__hint-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.quiz__hint-toggle[aria-expanded="true"] { color: var(--blue-deep); }

.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 -------------------------------------------------------------- */
.quiz__answers {
  display: grid;
  gap: 0.75rem;
  margin-bottom: var(--s5);
}
.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" */
.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);
}
.quiz__answer:hover { border-color: var(--blue); background: var(--blue-mist); }
.quiz__answer:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.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. */
.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;
}

.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. */
.quiz__nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s4);
  margin-top: clamp(1.5rem, 3vw, 2rem);
}
.quiz__back { grid-column: 1; justify-self: end; }
.quiz__next { grid-column: 2; min-width: 11rem; }
.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 */
.quiz__back[disabled] { visibility: hidden; }

/* --- result --------------------------------------------------------------- */
.quiz__result { text-align: center; }
.quiz__result .btn-row { justify-content: center; }
.quiz__result-title { font-size: var(--fs-h3); margin-bottom: var(--s3); }
.quiz__result-title:focus-visible { outline: 2px solid var(--blue); outline-offset: 6px; }
.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;
}
.quiz__meter {
  height: 8px;
  border-radius: 0;
  background: var(--blue-soft);
  overflow: hidden;
  margin: 0 auto var(--s5);
  max-width: 28rem;
}
.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. */
.quiz__result-body {
  max-width: 40.992em;
  margin-inline: auto;
  text-align: left;
}
.quiz__result-body p { color: var(--ink-60); font-size: var(--fs-sm); }
.quiz__result-body p:last-child { margin-bottom: var(--s5); }
.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 */
.quiz[data-risk="low"] .quiz__result-title { color: var(--blue); }
.quiz[data-risk="moderate"] .quiz__result-title,
.quiz[data-risk="high"] .quiz__result-title,
.quiz[data-risk="very-high"] .quiz__result-title { color: var(--sun-dark); }
.quiz[data-risk="moderate"] .quiz__meter-fill { background: var(--sun); }
.quiz[data-risk="high"] .quiz__meter-fill,
.quiz[data-risk="very-high"] .quiz__meter-fill { background: var(--sun-deep); }

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

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

/* Buttons inside the card follow --quiz-r, which is 0 - square like the rest
   of the site. */
.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.
   -------------------------------------------------------------------------- */
.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);
}
.article-figure img { width: 100%; height: auto; }
.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. */
.prose a:not(.link-arrow):not(.btn) { color: var(--blue); text-decoration: underline; }
.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.
   -------------------------------------------------------------------------- */
.article-page .prose { max-width: none; }
.article-page .prose p,
.article-page .prose li,
.article-page .callout p,
.article-page .ticklist li,
.article-page .refs ol,
.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. */
.article-page .article-figure { max-width: none; }
.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. */
.nav__link,
.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;
   }
   -------------------------------------------------------------------------- */