/* ==========================================================================
   AST VisionCare — Design System
   Phase 1 prototype. CSS variables + components. Maps to a WordPress theme
   (this file becomes the theme style.css). Brand primary: #1E5A8D (logo).
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');

/* ---------- Design tokens ---------- */
:root {
  /* Brand */
  --ast-blue:        #1E5A8D;   /* primary (from AST_Logo_Blue.svg) */
  --ast-blue-700:    #184a76;
  --ast-blue-800:    #133a5d;
  --ast-blue-900:    #0e2c47;
  --ast-blue-300:    #6a97bf;
  --ast-blue-100:    #e8f0f7;
  --ast-blue-050:    #f4f8fc;
  --ast-accent:      #00a4b4;   /* restrained teal accent for CTAs/links */
  --ast-accent-700:  #00808d;

  /* Neutrals */
  --ink:        #14202b;
  --ink-soft:   #45525e;
  --muted:      #6c7884;
  --line:       #e2e8ee;
  --surface:    #ffffff;
  --surface-2:  #f6f9fc;
  --surface-3:  #eef3f8;

  /* Feedback */
  --warn-bg:    #fff7e6;
  --warn-line:  #f0c36d;

  /* Type */
  --font-sans: "Montserrat", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Montserrat", -apple-system, "Segoe UI", sans-serif;

  /* Layout */
  --container: 1200px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-btn: 6px;
  --shadow-sm: 0 1px 2px rgba(16,44,71,.06), 0 1px 3px rgba(16,44,71,.05);
  --shadow:    0 6px 24px rgba(16,44,71,.08);
  --shadow-lg: 0 18px 50px rgba(16,44,71,.14);
  --header-h: 120px;

  --ease: cubic-bezier(.16,.84,.44,1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--surface);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; height: auto; }
/* Form controls default to the system UI font — force them onto Montserrat too */
input, select, textarea, button, optgroup { font-family: var(--font-sans); }
a { color: var(--ast-blue); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--ast-accent-700); }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.05; color: var(--ink); font-weight: 700; letter-spacing: -.022em; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 1.55rem + 4.6vw, 4.7rem); font-weight: 800; }
h2 { font-size: clamp(1.9rem, 1.25rem + 2.7vw, 3.15rem); font-weight: 800; }
h3 { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); font-weight: 700; }
h4 { font-weight: 700; }
p  { margin: 0 0 1rem; color: var(--ink-soft); text-wrap: pretty; }
ul, ol { color: var(--ink-soft); }
:focus-visible { outline: 3px solid var(--ast-accent); outline-offset: 2px; border-radius: 4px; }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(3.5rem, 2rem + 6vw, 6.5rem); }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4rem); }
.section--alt { background: var(--surface-2); }
.section--ink { background: var(--ast-blue-900); color: #dfe8f1; }
.section--ink h2, .section--ink h3 { color: #fff; }
.section--ink p { color: #b9cad9; }
.eyebrow {
  display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ast-accent-700); margin-bottom: .9rem;
}
.section--ink .eyebrow { color: var(--ast-blue-300); }
.lead { font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); color: var(--ink-soft); max-width: 60ch; }
.story-dna { font-family: var(--font-display); font-size: clamp(1.05rem, 1rem + .35vw, 1.22rem);
  font-weight: 600; color: var(--ast-blue); margin-top: 1.4rem; }
.milestones { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.milestones li { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: baseline;
  padding: 1.1rem 1.2rem; background: var(--surface-2); border: 1px solid var(--line);
  border-left: 3px solid var(--ast-blue); border-radius: var(--radius-sm); }
.milestones .m-year { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem;
  color: var(--ast-blue); line-height: 1; }
.milestones .m-text { color: var(--ink-soft); }
.refs { margin: 1.6rem 0 0; padding-left: 1.1rem; font-size: .8rem; color: var(--muted); }
.refs li { margin: .2rem 0; }
.ref-link { white-space: nowrap; font-weight: 600; color: var(--ast-blue); text-decoration: none; }
.ref-link:hover { text-decoration: underline; }

/* Clinical evidence — per-lens study groups */
.evidence-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, .6rem + 1.4vw, 1.6rem);
  align-items: start; }
.evidence-group { position: relative; padding: 1.7rem; border-top: 3px solid var(--accent, var(--ast-blue));
  transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.evidence-group:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.evidence-group .eg-head { display: flex; align-items: center; gap: .9rem; }
.evidence-group .eg-head h3 { margin: 0; }
.eg-thumb { flex: none; width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center;
  background: #f3f8fc; border: 1px solid var(--line); }
.eg-thumb img { width: 42px; height: 42px; object-fit: contain; }
.eg-count { position: absolute; top: 1.4rem; right: 2.6rem; font-size: .72rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
/* collapsible groups (accordion) */
.evidence-group .eg-head { cursor: pointer; }
.evidence-group .eg-head::after { content: ""; margin-left: auto; flex: none; width: 10px; height: 10px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg);
  transition: transform .2s var(--ease); position: relative; top: -3px; }
.evidence-group:not(.is-collapsed) .eg-head::after { transform: rotate(225deg); top: 2px; }
.evidence-group.is-collapsed .pub-list { display: none; }
.evidence-group.is-collapsed > .small { display: none; }
/* Congress year cards are NOT collapsible here (the accordion handler only runs
   in the Publications tab), so drop the dropdown chevron + pointer that made them
   look like an expandable "desplegable", and style the per-year ESCRS link. */
#congressGrid .eg-head { cursor: default; }
#congressGrid .eg-head::after { display: none; }
/* per-abstract DOI / ESCRS link under each communication's citation */
#congressGrid .pub-doi { display: inline-flex; align-items: center; gap: .35rem; margin-top: .35rem;
  font-size: .76rem; font-weight: 700; letter-spacing: .01em; color: var(--ast-blue); text-decoration: none; }
#congressGrid .pub-doi:hover { text-decoration: underline; }
.resource.is-pending { opacity: .72; cursor: default; }
/* technology cards: pills listing which lenses use each technology, tinted per
   card via --tl (falls back to brand blue) */
.tech-lenses { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 1rem 0 0;
  padding-top: .85rem; border-top: 1px solid rgba(12,40,65,.08); }
.tech-lenses .tl-label { width: 100%; font-size: .64rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .14em; color: var(--muted); }
.tech-lenses .tl-pill { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
  font-size: .74rem; font-weight: 600; color: var(--tl, var(--ast-blue)); text-decoration: none;
  background: #fff; border: 1px solid rgba(12,40,65,.16);
  border-color: color-mix(in srgb, var(--tl, #1E5A8D) 34%, #fff); border-radius: 999px;
  padding: .24rem .64rem .24rem .52rem; box-shadow: 0 2px 6px rgba(12,40,65,.07);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.tech-lenses .tl-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--tl, var(--ast-blue)); flex: none; }
.tech-lenses .tl-pill:hover { transform: translateY(-1px);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--tl, #1E5A8D) 22%, transparent); }
/* arrow cue so it reads as a link through to the lens page */
.tech-lenses a.tl-pill::after { content: "\2192"; margin-left: .15rem; font-weight: 700;
  transition: transform .18s var(--ease); }
.tech-lenses a.tl-pill:hover::after { transform: translateX(2px); }
/* upcoming lens: same pill, not a link — softened, with a small "coming soon" tag */
.tech-lenses .tl-pill--soon { opacity: .8; }
.tech-lenses .tl-pill--soon:hover { transform: none; box-shadow: 0 2px 6px rgba(12,40,65,.07); }
.tech-lenses .tl-pill--soon em { font-style: normal; font-size: .58rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
  border-left: 1px solid rgba(12,40,65,.16); padding-left: .45rem; }
@media (max-width: 760px) { .evidence-grid { grid-template-columns: 1fr; } }

/* Global presence map with pulsing location markers */
.global-map { position: relative; background: #fff; }
.global-map img { display: block; width: 100%; height: auto; }
.map-pulse { position: absolute; width: clamp(26px, 2.4vw, 40px); aspect-ratio: 1;
  transform: translate(-50%, -50%); pointer-events: none; --pc: var(--ast-blue); }
.map-pulse::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid var(--pc); animation: mapPing 2.4s cubic-bezier(.2,.6,.3,1) infinite;
  animation-delay: inherit; }
.map-pulse--blue   { --pc: #1c74e0; }  /* distribution (blue, matches map markers) */
.map-pulse--green  { --pc: #3da45c; }  /* production (green, matches map markers) */
.map-pulse--navy   { --pc: #123a66; }  /* headquarters */
@keyframes mapPing { 0% { transform: scale(.35); opacity: 1; } 70% { opacity: .35; }
  100% { transform: scale(1.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .map-pulse { display: none; } }

/* Distribution markets list */
.market-list { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.market-list li { display: flex; align-items: center; gap: .55rem; font-weight: 600; color: var(--ink);
  font-size: .95rem; padding: .65rem .9rem; background: var(--ast-blue-050); border: 1px solid var(--ast-blue-100);
  border-radius: 10px; }
.market-list li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ast-blue); box-shadow: 0 0 0 3px rgba(31,89,141,.16); }
@media (max-width: 520px) { .market-list { grid-template-columns: 1fr; } }

/* Availability note (clear / yellow, toric) */
.avail-note { display: flex; align-items: flex-start; gap: .55rem; margin: .9rem 0 0; font-size: .92rem;
  color: var(--ink-soft); }
.avail-note .ico { flex: none; width: 18px; height: 18px; margin-top: .12rem; fill: none; stroke: var(--ast-blue);
  stroke-width: 2; }
.avail-note strong { color: var(--ink); }

/* Quick-access tiles (premium, colour-accented — no color-mix for Safari) */
.qtiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, .6rem + 1.2vw, 1.5rem); }
.qtile { position: relative; display: flex; align-items: center; gap: 1.1rem; padding: 1.5rem 1.5rem;
  background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  box-shadow: 0 4px 16px rgba(12,40,65,.06);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); }
.qtile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); }
.qtile:hover { transform: translateY(-5px); box-shadow: 0 24px 48px rgba(12,40,65,.16); border-color: transparent; }
.qt-ico { flex: none; width: 56px; height: 56px; border-radius: 15px; display: grid; place-items: center;
  background: linear-gradient(140deg, rgba(255,255,255,.24), rgba(255,255,255,0)), var(--accent);
  box-shadow: 0 10px 22px rgba(12,40,65,.20); }
.qt-ico svg { width: 27px; height: 27px; fill: none; stroke: #fff; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round; }
.qt-text { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.qt-text strong { font-size: 1.08rem; color: var(--ink); font-family: var(--font-display); letter-spacing: -.01em; }
.qt-text span { font-size: .85rem; color: var(--ink-soft); }
.qt-go { margin-left: auto; flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid;
  place-items: center; background: var(--ast-blue-050); color: var(--accent);
  transition: transform .2s var(--ease), background .2s var(--ease); }
.qt-go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round; }
.qtile:hover .qt-go { transform: translateX(3px); }
.qtiles--2 { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
@media (max-width: 820px) { .qtiles { grid-template-columns: 1fr; } }

/* Evidence tabs */
.ev-tabs { display: flex; flex-wrap: wrap; gap: .4rem; border-bottom: 1px solid var(--line); }
.ev-tab { display: inline-flex; align-items: center; gap: .55rem; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 600; font-size: .98rem; color: var(--ink-soft); padding: .9rem 1.1rem;
  border-bottom: 3px solid transparent; margin-bottom: -1px; transition: color .15s var(--ease); }
.ev-tab .ico { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.ev-tab:hover { color: var(--ast-blue); }
.ev-tab.is-active { color: var(--ast-blue); border-bottom-color: var(--ast-blue); }
[data-panel][hidden] { display: none; }

/* Library title with leading icon */
.lib-title { display: flex; align-items: center; gap: .6rem; }
.lib-title .ico { width: 26px; height: 26px; color: var(--ast-blue); fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Library toolbar: search + filter chips */
.lib-toolbar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
  margin-bottom: 1.8rem; }
.lib-search { position: relative; flex: 1 1 280px; max-width: 440px; }
.lib-search .ico { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); width: 18px;
  height: 18px; color: var(--muted); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
  stroke-linejoin: round; pointer-events: none; }
.lib-search input { width: 100%; padding: .72rem 1rem .72rem 2.5rem; border: 1px solid var(--line);
  border-radius: 999px; font: inherit; font-size: .92rem; background: #fff; }
.lib-search input:focus { outline: none; border-color: var(--ast-blue); box-shadow: 0 0 0 3px var(--ast-blue-100); }
.lib-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { border: 1px solid var(--line); background: #fff; color: var(--ink-soft); border-radius: 999px;
  padding: .45rem .95rem; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); }
.chip:hover { border-color: var(--ast-blue-300); color: var(--ast-blue); }
.chip.is-active { background: var(--ast-blue); border-color: var(--ast-blue); color: #fff; }

/* Publication entries inside each lens card */
.pub-list { list-style: none; margin: 1.2rem 0 0; padding: 0; }
.pub { display: flex; gap: .8rem; padding: .95rem 0; border-top: 1px solid var(--line); }
.pub:first-child { border-top: 0; padding-top: .4rem; }
.pub[hidden] { display: none; }
.pub-ico { flex: none; color: var(--accent, var(--ast-blue)); line-height: 0; margin-top: .15rem; }
.pub-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; }
.pub-title { margin: 0; font-size: .95rem; font-weight: 600; line-height: 1.35; color: var(--ink); }
.pub-meta { margin: .3rem 0 .45rem; font-size: .82rem; color: var(--muted); }
.pub-link { font-size: .83rem; font-weight: 600; color: var(--ast-blue); text-decoration: none;
  display: inline-flex; align-items: center; gap: .2rem; }
.pub-link:hover { text-decoration: underline; }

/* Lens selection guide cards */
.choose-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, .6rem + 1.4vw, 1.6rem); }
.choose-card { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--accent);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(1.4rem, 1rem + 1vw, 1.9rem);
  display: flex; flex-direction: column; gap: .5rem; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.choose-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(12,40,65,.16); }
.choose-card .ch-ico { width: 52px; height: 52px; border-radius: 13px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 13%, #fff); color: var(--accent); margin-bottom: .3rem; }
.choose-card .ch-ico svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; }
.choose-card h3 { margin: 0; font-size: 1.2rem; }
.choose-card > p { margin: 0; color: var(--ink-soft); font-size: .92rem; }
.choose-card .ch-rec { margin-top: auto; padding-top: .8rem; border-top: 1px dashed var(--line); font-size: .9rem;
  color: var(--ink); }
.choose-card .ch-rec span { color: var(--ink-soft); font-size: .82rem; }
@media (max-width: 820px) { .choose-grid { grid-template-columns: 1fr; } }

/* Patient comparison table */
.compare-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); background: #fff; }
.compare-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 760px; }
.compare-table th, .compare-table td { padding: .8rem 1rem; text-align: center; vertical-align: middle;
  border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.compare-table th:last-child, .compare-table td:last-child { border-right: 0; }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-table thead th { color: #fff; font-size: .98rem; font-weight: 700; line-height: 1.2; }
.compare-table thead th span { display: block; font-weight: 500; font-size: .72rem; opacity: .92; margin-top: .25rem; }
.compare-table thead th:not(:first-child) { background: var(--accent, var(--ast-blue)); }
.compare-table thead th:first-child { background: transparent; border: 0; }
.compare-table tbody th { text-align: left; font-weight: 600; color: var(--ink); background: var(--surface-2);
  width: 28%; }
.compare-table tbody th .sub { display: block; font-weight: 400; font-size: .76rem; color: var(--muted); }
.compare-table .yes { color: var(--ast-blue); font-weight: 800; font-size: 1.05rem; }
.compare-table .no { color: var(--muted); }
.compare-table .note { display: block; font-weight: 400; font-size: .72rem; color: var(--ink-soft); margin-top: .15rem; }

/* Commitments sub-headings (combined ESG + MDR) */
.commit-sub { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.55rem); font-family: var(--font-display);
  letter-spacing: -.01em; margin: 0 0 1.2rem; color: var(--ink); }
.commit-sub .label { display: block; margin-bottom: .45rem; }
.commit-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: start; }
.esg--stacked .esg-row { grid-template-columns: 1fr; gap: .7rem; padding: .9rem 0; }
.commit-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.commit-points li { display: flex; gap: .9rem; align-items: flex-start; }
.commit-points .cp-ico { flex: none; width: 44px; height: 44px; border-radius: 11px; display: grid;
  place-items: center; background: var(--ast-blue-050); color: var(--ast-blue); }
.commit-points .cp-ico svg { width: 23px; height: 23px; }
.commit-points strong { display: block; color: var(--ink); font-size: 1.02rem; }
.commit-points p { margin: .15rem 0 0; font-size: .9rem; color: var(--ink-soft); }
@media (max-width: 880px) { .commit-grid { grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 3rem); } }

/* Sustainability / ESG + SDG tiles */
.esg { display: grid; gap: 0; }
.esg-row { display: grid; grid-template-columns: 220px 1fr; gap: clamp(1rem, 2vw, 2.2rem); align-items: center;
  padding: clamp(1.1rem, .8rem + 1vw, 1.6rem) 0; border-top: 1px solid var(--line); }
.esg-row:first-child { border-top: 0; }
.esg-cat { display: flex; align-items: center; gap: .8rem; font-size: 1.25rem; font-weight: 700; color: var(--ink);
  font-family: var(--font-display); letter-spacing: -.01em; }
.esg-letter { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: var(--ast-blue); color: #fff; font-size: 1.45rem; font-weight: 800; }
.sdg-tiles { display: flex; flex-wrap: wrap; gap: .8rem; }
.sdg { width: 116px; min-height: 116px; background: var(--sdg, var(--ast-blue)); color: #fff; border-radius: 9px;
  padding: .6rem .65rem; display: flex; flex-direction: column; gap: .35rem;
  transition: transform .2s var(--ease); }
.sdg:hover { transform: translateY(-3px); }
.sdg-n { font-size: 1.5rem; font-weight: 800; font-family: var(--font-display); line-height: 1; }
.sdg-t { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; line-height: 1.25;
  margin-top: auto; }
@media (max-width: 680px) { .esg-row { grid-template-columns: 1fr; gap: .8rem; }
  .sdg { width: calc(50% - .4rem); min-height: 130px; } }

/* Embedded map */
.map-frame { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line);
  box-shadow: var(--shadow); min-height: 320px; }
.map-frame iframe { display: block; width: 100%; height: 100%; min-height: 320px; border: 0; }

/* Numbered process steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.2rem, .8rem + 1.6vw, 2rem); }
.steps li { display: flex; flex-direction: column; gap: .7rem; }
.steps .step-n { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem;
  height: 2.6rem; border-radius: 50%; background: var(--ast-blue); color: #fff; font-weight: 700;
  font-size: 1.1rem; font-family: var(--font-display); }
.steps h3 { margin: 0 0 .15rem; font-size: 1.08rem; }
.steps p { margin: 0; font-size: .9rem; color: var(--ink-soft); }
.steps--img .step-img { width: 100%; aspect-ratio: 452 / 428; object-fit: cover; border-radius: var(--radius);
  border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow); }
.steps--img .step-head { display: flex; align-items: center; gap: .7rem; margin-top: .2rem; }
.steps--img .step-head h3 { margin: 0; }

/* Procedure highlights row */
.proc-highlights { list-style: none; margin: clamp(2rem, 1.4rem + 2vw, 3rem) 0 0; padding: clamp(1.6rem,1.2rem+1.5vw,2.2rem) 0 0;
  border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, .8rem + 1.6vw, 2rem); }
.proc-highlights li { display: flex; align-items: center; gap: .9rem; }
.proc-highlights .ph-ico { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid;
  place-items: center; background: var(--ast-blue-050); color: var(--ast-blue); }
.proc-highlights .ph-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.proc-highlights strong { display: block; color: var(--ink); font-size: 1rem; }
.proc-highlights span { font-size: .86rem; color: var(--ink-soft); }
@media (max-width: 680px) { .proc-highlights { grid-template-columns: 1fr; gap: 1rem; } }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; } }
sup { font-size: .62em; vertical-align: super; line-height: 0; }
.center { text-align: center; }
.center .lead, .center .section-head { margin-inline: auto; }
.section-head { max-width: 64ch; margin-bottom: 2.75rem; }
.grid { display: grid; gap: clamp(1.1rem, .6rem + 1.6vw, 2rem); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--ast-blue); --btn-fg: #fff; --btn-bd: var(--ast-blue);
  display: inline-flex; align-items: center; gap: .55rem; cursor: pointer;
  font: inherit; font-weight: 600; line-height: 1; padding: .95rem 1.6rem; letter-spacing: -.01em;
  border-radius: var(--radius-btn); border: 1.5px solid var(--btn-bd);
  background: var(--btn-bg); color: var(--btn-fg); text-decoration: none;
  transition: transform .15s var(--ease), box-shadow .2s var(--ease), background .2s, color .2s, border-color .2s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: var(--btn-fg); }
.btn:active { transform: translateY(0); }
.btn--accent { --btn-bg: var(--ast-accent); --btn-bd: var(--ast-accent); }
.btn--accent:hover { --btn-bg: var(--ast-accent-700); --btn-bd: var(--ast-accent-700); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ast-blue); }
.btn--ghost:hover { --btn-bg: var(--ast-blue); --btn-fg: #fff; }
.btn--on-dark { --btn-bg: #fff; --btn-fg: var(--ast-blue-900); --btn-bd: #fff; }
.btn--ghost-on-dark { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.5); }
.btn--ghost-on-dark:hover { --btn-bg: #fff; --btn-fg: var(--ast-blue-900); --btn-bd:#fff; }
.btn--sm { padding: .6rem 1.05rem; font-size: .9rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; }
.arrow-link { font-weight: 600; display: inline-flex; align-items: center; gap: .4rem; }
.arrow-link::after { content: "→"; transition: transform .2s var(--ease); }
.arrow-link:hover::after { transform: translateX(4px); }

/* ==========================================================================
   Header / navigation
   ========================================================================== */
.utility-bar {
  background: var(--ast-blue-900); color: #c6d6e5; font-size: .82rem;
}
.utility-bar .container { display: flex; align-items: center; justify-content: flex-end; gap: 1.3rem; min-height: 40px; }
.utility-bar a { color: #c6d6e5; }
.utility-bar a:hover { color: #fff; }
.utility-bar .util-sep { opacity: .35; }
.audience-pill {
  display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .7rem;
  border: 1px solid rgba(255,255,255,.25); border-radius: 999px; color: #fff; font-weight: 600;
}
.audience-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ast-accent); }
.audience-pill[data-audience="patient"] .dot { background: #7fd1c4; }

.site-header { position: sticky; top: 0; z-index: 60;
  background: linear-gradient(180deg, #17395a 0%, #0c2841 100%);
  border-bottom: 1px solid rgba(255,255,255,.10); }
.nav { display: flex; align-items: center; gap: 1.5rem; min-height: 76px; }
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { height: 38px; width: auto; }
.nav-links { display: flex; align-items: center; gap: .25rem; flex: 1; margin-left: 1.25rem; list-style: none; padding: 0; }
.nav-links > li > a:not(.btn) {
  display: inline-block; padding: .6rem .8rem; border-radius: 8px; color: #fff;
  font-weight: 600; font-size: .96rem;
}
.nav-links > li > a:not(.btn):hover, .nav-links > li > a:not(.btn)[aria-current="page"] { background: rgba(255,255,255,.15); color: #fff; }
.nav-cta { margin-left: auto; }
/* CTA button sits on the blue bar → white button with blue text */
.nav-cta .btn { background: #fff; color: var(--ast-blue); border-color: #fff; }
.nav-cta .btn:hover { background: #e7f0f9; color: var(--ast-blue); border-color: #e7f0f9; }
/* hamburger lines white on the blue bar */
.nav-toggle { border-color: rgba(255,255,255,.45); }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { background: #fff; }
/* Dropdown (Professionals) */
.nav-has-sub { position: relative; }
.nav-has-sub > a { display: inline-flex; align-items: center; }
.nav-caret { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round; margin-left: .3rem; opacity: .65; transition: transform .2s var(--ease); }
.nav-has-sub:hover .nav-caret, .nav-has-sub:focus-within .nav-caret { transform: rotate(180deg); }
.nav-sub { position: absolute; top: 100%; left: 0; min-width: 234px; list-style: none; margin: 0; padding: .4rem;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); z-index: 80;
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s var(--ease), transform .18s var(--ease); }
.nav-has-sub:hover .nav-sub, .nav-has-sub:focus-within .nav-sub { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-sub > li > a { display: block; padding: .6rem .8rem; border-radius: 8px; color: var(--ink);
  font-weight: 600; font-size: .92rem; white-space: nowrap; }
.nav-sub > li > a:hover { background: var(--ast-blue-050); color: var(--ast-blue); }
.nav-toggle { display: none; margin-left: auto; background: none; border: 1.5px solid var(--line);
  border-radius: 10px; width: 46px; height: 42px; cursor: pointer; align-items: center; justify-content: center; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 22px; height: 2px; background: var(--ink); position: relative; transition: .2s; }
.nav-toggle span::before { position: absolute; top: -7px; }
.nav-toggle span::after  { position: absolute; top: 7px; }

@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: fixed; inset: 0 0 0 auto; width: min(86vw, 360px); flex-direction: column;
    align-items: stretch; gap: .2rem; background: #fff; padding: 1.5rem 1.1rem; margin: 0;
    box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform .28s var(--ease);
    overflow-y: auto; z-index: 70;
  }
  body.nav-open .nav-links { transform: translateX(0); }
  /* off-canvas panel is white → restore dark links and blue CTA button */
  .nav-links > li > a:not(.btn) { padding: .85rem .7rem; font-size: 1.05rem; color: var(--ink); }
  .nav-links > li > a:not(.btn):hover, .nav-links > li > a:not(.btn)[aria-current="page"] { background: var(--ast-blue-050); color: var(--ast-blue); }
  .nav-cta .btn { background: var(--ast-blue); color: #fff; border-color: var(--ast-blue); }
  .nav-cta .btn:hover { background: var(--ast-blue-700, var(--ast-blue)); color: #fff; }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { background: #fff; }
  /* Dropdown collapses to a static, indented list inside the off-canvas menu */
  .nav-sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
    border: 0; padding: 0 0 .3rem .9rem; min-width: 0; }
  .nav-sub > li > a { font-size: 1rem; padding: .7rem .7rem; }
  .nav-caret { display: none; }
  .nav-cta { margin: .6rem 0 0; }
  .nav-cta .btn { width: 100%; justify-content: center; }
  .nav-backdrop { position: fixed; inset: 0; background: rgba(14,44,71,.4); opacity: 0; visibility: hidden;
    transition: .25s; z-index: 55; }
  body.nav-open .nav-backdrop { opacity: 1; visibility: visible; }
}

/* ==========================================================================
   Hero — full-bleed, image-backed, dark
   ========================================================================== */
.hero { position: relative; color: #eaf2fa; overflow: hidden;
  background: #0b2a47 url("../img/hero-bg.svg") center / cover no-repeat; }
.hero::after { /* gentle vignette for text legibility */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, rgba(7,24,42,.78) 0%, rgba(7,24,42,.45) 42%, rgba(7,24,42,0) 70%); }
.hero .container { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
  padding-block: clamp(1.25rem, 0.5rem + 2vw, 2.5rem); min-height: calc(100svh - var(--header-h)); }
.hero-copy h1 { color: #fff; margin-bottom: .7rem; text-shadow: 0 2px 30px rgba(0,0,0,.25); }
.hero-copy .lead { color: #c4d8ea; margin-bottom: 1.9rem; }
.hero-visual { position: relative; display: grid; place-items: center; }
/* Unified hero: pattern aura behind, the three-product family in front, anchored nameplate */
.hero-visual .hero-products { position: relative; width: min(680px, 100%); margin: 0 auto; }
.hero .hero-field { position: absolute; z-index: 0; top: 50%; left: 60%;
  width: min(1400px, 132%); aspect-ratio: 1; transform: translate(-50%, -50%);
  opacity: .5; mix-blend-mode: screen; pointer-events: none; }
.hero-visual .hero-row { position: relative; z-index: 1; display: flex;
  align-items: flex-end; justify-content: center; }
.hero-visual .hero-row .box { display: block; flex: none; filter: drop-shadow(0 26px 46px rgba(0,0,0,.55)); }
.hero-visual .hero-row .box-center { width: 46%; z-index: 3; }
.hero-visual .hero-row .box-left  { width: 36%; z-index: 1; margin-right: -9%; transform: translateY(5%); }
.hero-visual .hero-row .box-right { width: 36%; z-index: 2; margin-left: -9%;  transform: translateY(5%); }
.hero-visual .hero-tag { position: absolute; z-index: 4; left: 50%; bottom: -14px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
  padding: .5rem .95rem; border-radius: 999px; background: rgba(9,26,44,.62);
  border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(8px);
  color: #dbeafa; font-size: .85rem; font-weight: 600; letter-spacing: .01em;
  box-shadow: 0 10px 26px rgba(0,0,0,.4); }
.hero-visual .hero-tag__rings { color: var(--ast-blue-300, #7fd6e4); flex: none; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.hero-badge { display: inline-flex; align-items: center; gap: .5rem; background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(6px); border-radius: 999px;
  padding: .4rem .9rem; font-size: .85rem; font-weight: 600; color: #d6e7f5; margin-bottom: 1.5rem; }
.hero-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ast-accent);
  box-shadow: 0 0 0 4px rgba(0,164,180,.25); }
.hero-trust { display: flex; flex-wrap: wrap; gap: 1.6rem; margin-top: 2.2rem; padding-top: 1.6rem;
  border-top: 1px solid rgba(255,255,255,.14); }
.hero-trust div { font-size: .85rem; color: #9fbad4; }
.hero-trust b { display: block; color: #fff; font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; }
@media (max-width: 860px) { .hero .container { grid-template-columns: 1fr; text-align: center; }
  .hero-badge, .hero-trust { justify-content: center; }
  .hero .btn-row { justify-content: center; }
  .hero-visual { order: -1; max-width: 360px; margin-inline: auto; } }

/* ==========================================================================
   Cards
   ========================================================================== */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem; box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; }
.card--link:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--ast-blue-300); }
.card h3 { margin-bottom: .4rem; }
.card .icon { width: 52px; height: 52px; border-radius: 12px; background: var(--ast-blue-050);
  color: var(--ast-blue); display: grid; place-items: center; margin-bottom: 1.1rem; }
.card .icon svg { width: 26px; height: 26px; }

/* Line-icon base */
svg.ico { width: 24px; height: 24px; display: inline-block; vertical-align: middle; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Product card */
.product-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.product-card .pc-media { position: relative; background: linear-gradient(160deg, var(--surface-3), var(--ast-blue-050));
  padding: 1.6rem; display: grid; place-items: center; aspect-ratio: 4/3; overflow: hidden; }
.product-card .pc-media::before { content: ""; position: absolute; inset: 0;
  background: url("../img/optical-rings.svg") 130% -30% / 90% no-repeat; opacity: .5; }
.product-card .pc-media img { position: relative; z-index: 1; max-height: 100%; object-fit: contain;
  filter: drop-shadow(0 14px 26px rgba(16,44,71,.22)); transition: transform .3s var(--ease); }
.product-card.card--link:hover .pc-media img { transform: scale(1.04) translateY(-2px); }
.product-card .pc-body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.product-card .pc-body h3 { margin-bottom: .35rem; }
.product-card .pc-tag { font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ast-accent-700); margin-bottom: .6rem; }
.product-card .pc-foot { margin-top: auto; padding-top: 1rem; }

/* Audience split */
.audience-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem,3vw,2rem); }
@media (max-width: 760px){ .audience-split { grid-template-columns: 1fr; } }
.audience-card { position: relative; border-radius: var(--radius); padding: 2.2rem; overflow: hidden;
  border: 1px solid var(--line); display: flex; flex-direction: column; min-height: 260px; }
.audience-card::after { content: ""; position: absolute; right: -120px; bottom: -120px; width: 320px; height: 320px;
  background: url("../img/optical-rings.svg") center / contain no-repeat; opacity: .5; pointer-events: none; }
.audience-card > * { position: relative; z-index: 1; }
.audience-card.patient { background: linear-gradient(150deg, #eafaf7, #f4fbfd); }
.audience-card.pro { background: linear-gradient(150deg, var(--ast-blue-100), #eef4fa); }
.audience-card .ac-icon { width: 56px; height: 56px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 1.1rem; }
.audience-card .ac-icon svg { width: 28px; height: 28px; }
.audience-card.patient .ac-icon { background: rgba(0,164,180,.13); color: var(--ast-accent-700); }
.audience-card.pro .ac-icon { background: var(--ast-blue-100); color: var(--ast-blue); }
.audience-card h3 { font-size: 1.6rem; }
.audience-card .btn-row { margin-top: auto; padding-top: 1.4rem; }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; text-align: center; }
@media (max-width: 760px){ .stats { grid-template-columns: repeat(2,1fr); } }

/* Stats band — coloured strip of key figures */
.stats-band { background: linear-gradient(135deg, var(--ast-blue) 0%, #17395a 100%);
  padding: clamp(1.8rem, 1.3rem + 1.6vw, 2.8rem) 0; }
.stats-band .stat { position: relative; }
.stats-band .stat + .stat::before { content: ""; position: absolute; left: -.75rem; top: 50%;
  transform: translateY(-50%); width: 1px; height: 56px; background: rgba(255,255,255,.16); }
@media (max-width: 760px){ .stats-band .stat + .stat::before { display: none; } }
.stat .num { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); font-weight: 800; color: #fff; letter-spacing: -.02em; }
.stat .lbl { color: #aebfce; font-size: .9rem; }

/* Feature list with check */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.checklist li { position: relative; padding-left: 2rem; }
.checklist li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 1.4rem; height: 1.4rem;
  background: var(--ast-blue-100); color: var(--ast-blue); border-radius: 50%; display: grid; place-items: center;
  font-size: .8rem; font-weight: 800; }

/* Positioning — "what we offer": checklist + differentiators with icons */
.offer-col .offer-h { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--ink);
  margin: 0 0 1.2rem; padding-bottom: .75rem; border-bottom: 1px solid var(--line); letter-spacing: -.01em; }
.feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.feature-list li { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start; }
.feature-list .icon { width: 48px; height: 48px; border-radius: 12px; background: var(--ast-blue-050);
  color: var(--ast-blue); display: grid; place-items: center; flex: none; }
.feature-list .icon svg { width: 24px; height: 24px; }
.feature-list strong { display: block; color: var(--ink); font-size: 1rem; margin-bottom: .25rem; }
.feature-list p { margin: 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.5; }
@media (max-width: 760px){ .feature-list .icon { width: 42px; height: 42px; } }

/* Professional resources band (home) */
.res-band { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1.5rem, 1rem + 2vw, 3rem); flex-wrap: wrap; padding: clamp(1.8rem, 1.2rem + 2vw, 3rem);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(150deg, var(--ast-blue-100), #eef4fa); }
.res-band::after { content: ""; position: absolute; right: -90px; bottom: -120px; width: 320px; height: 320px;
  background: url("../img/optical-rings.svg") center / contain no-repeat; opacity: .5; pointer-events: none; }
.res-band > * { position: relative; z-index: 1; }
.res-band-text { max-width: 640px; }
.res-band-text h2 { margin: .25rem 0 .6rem; }
.res-band-text p { color: var(--ink-soft); margin: 0; }
.res-band .btn { flex: none; }
@media (max-width: 640px){ .res-band { flex-direction: column; align-items: flex-start; } }

/* Asqelio Family — packaging boxes row (home) */
.family-packs { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.6rem); margin-top: 1.6rem; }
@media (max-width: 760px){ .family-packs { grid-template-columns: repeat(2, 1fr); } }
.family-packs .fp { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem;
  padding: 1.8rem 1rem 1.4rem; background: linear-gradient(170deg, #fff, var(--ast-blue-050)); border: 1px solid var(--line);
  border-radius: var(--radius); text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.family-packs .fp:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--ast-blue-300); }
.family-packs .fp img { height: clamp(120px, 9vw, 160px); object-fit: contain;
  filter: drop-shadow(0 14px 24px rgba(16,44,71,.18)); }
.family-packs .fp .fp-name { font-family: var(--font-display); font-weight: 700; font-size: .95rem; color: var(--ink); }

/* Timeline (mission past/present/future) */
.timeline { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
@media (max-width: 800px){ .timeline { grid-template-columns: 1fr; } }
.timeline .tl-step { padding-top: 1.4rem; border-top: 3px solid var(--ast-blue-100); }
.timeline .tl-step .tl-k { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ast-accent-700); }

/* ==========================================================================
   Page hero (interior)
   ========================================================================== */
.page-hero { position: relative; overflow: hidden; color: #eaf2fa;
  background: #0b2a47 url("../img/hero-bg.svg") center / cover no-repeat;
  border-bottom: 1px solid rgba(255,255,255,.08); }
.page-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, rgba(7,24,42,.82) 0%, rgba(7,24,42,.4) 58%, rgba(7,24,42,.1) 100%); }
/* banner variant: the photo already carries its own brand-blue field for the copy,
   so reinforce only the left for legibility instead of the full dark scrim, and
   give the band a bit more height so the composition reads like the home cover */
/* one standard banner height for EVERY inner-page hero, so pages don't jump
   in size as you navigate; content centres vertically inside the band */
.page-hero, .prod-hero, .about-hero {
  /* a CONSTANT banner shape (same proportion on every screen width) so the photo
     is composed identically on small, normal and ultra-wide monitors instead of
     collapsing into a thin cropped strip on wide screens */
  width: 100%; aspect-ratio: 16 / 5; min-height: 300px; max-height: 600px; display: flex; align-items: center; }
.page-hero .container, .prod-hero .container, .about-hero .container {
  padding-block: 2.2rem; }
/* mobile: long copy was inflating some banners (About, Portfolio) well past the rest —
   tighten the block so every page lands near the same band height */
@media (max-width: 760px) {
  .page-hero, .prod-hero, .about-hero { aspect-ratio: auto; min-height: 348px; max-height: none; }
  .page-hero .container, .prod-hero .container, .about-hero .container { padding-block: 1.3rem; }
  .page-hero h1, .prod-hero h1, .about-hero h1 { font-size: 1.5rem; }
  .page-hero .lead, .prod-hero .lead, .about-hero .lead { font-size: .95rem; }
}
.page-hero--banner::after {
  background: linear-gradient(98deg, rgba(8,22,58,.74) 0%, rgba(8,22,58,.40) 40%, rgba(8,22,58,0) 64%); }
/* keep the copy in the left brand-blue field, clear of the couple on the right */
.page-hero--banner h1 { max-width: 15ch; }
.page-hero--banner .lead { max-width: 44ch; color: #eef5fc; text-shadow: 0 1px 10px rgba(6,18,42,.55); }
@media (max-width: 720px) {
  .page-hero--banner::after { background: linear-gradient(180deg, rgba(9,26,66,.78), rgba(9,26,66,.5)); }
  .page-hero--banner h1, .page-hero--banner .lead { max-width: none; }
}
.page-hero .container { position: relative; z-index: 1; padding-block: 2.2rem; }
.page-hero h1 { color: #fff; margin-bottom: .5rem; text-shadow: 0 2px 24px rgba(0,0,0,.25); }
/* inner-page banner headlines sit below the home cover in hierarchy — noticeably
   smaller than the "One Platform / All Solutions" hero (which tops out at 3.9rem) */
.page-hero h1, .prod-hero h1, .about-hero h1 { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); }
.page-hero .lead { color: #c4d8ea; margin: 0; }
.page-hero .eyebrow { color: #7fd6e4; }
.breadcrumbs { font-size: .98rem; color: #9fbad4; margin-bottom: 1rem; }
.breadcrumbs a { color: #c6d6e5; }
.breadcrumbs a:hover { color: #fff; }
/* Product render floating on the dark hero */
.hero-shot { filter: drop-shadow(0 26px 55px rgba(0,0,0,.55)); margin-inline: auto; }
@media (max-width: 760px) { .page-hero .grid--2 { text-align: center; } .hero-shot { max-width: 300px; } }

/* ==========================================================================
   Spec / data tables  (gated for HCP)
   ========================================================================== */
.spec-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.spec-table th, .spec-table td { text-align: left; padding: .85rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec-table th { width: 42%; color: var(--ink); font-weight: 600; background: var(--surface-2); }
.spec-table tr:last-child td, .spec-table tr:last-child th { border-bottom: 0; }
.table-wrap { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }

/* ==========================================================================
   HCP gating
   ========================================================================== */
/* Content visible only to professionals; hidden by default until body has the flag */
[data-audience-only="pro"] { display: none; }
body.is-pro [data-audience-only="pro"] { display: revert; }
[data-audience-only="patient"] { display: none; }
body.is-patient [data-audience-only="patient"] { display: revert; }

.gate-lock {
  border: 1px dashed var(--ast-blue-300); background: var(--ast-blue-050); border-radius: var(--radius);
  padding: 2rem; text-align: center;
}
body.is-pro .gate-lock { display: none; }
.gate-lock .lock-ico { width: 58px; height: 58px; margin: 0 auto; border-radius: 50%; background: #fff;
  border: 1px solid var(--ast-blue-100); color: var(--ast-blue); display: grid; place-items: center; }
.gate-lock .lock-ico svg { width: 26px; height: 26px; }
.gate-lock h3 { margin: .8rem 0 .4rem; }

/* Pro disclaimer banner */
.pro-banner { background: var(--warn-bg); border-bottom: 1px solid var(--warn-line); font-size: .85rem; }
.pro-banner .container { padding-block: .5rem; display: flex; gap: .6rem; align-items: center; justify-content: center; color: #7a5a18; }
body:not(.is-pro) .pro-banner { display: none; }

/* Gate modal */
.gate { position: fixed; inset: 0; z-index: 200; display: none; }
.gate.open { display: grid; place-items: center; }
.gate-overlay { position: absolute; inset: 0; background: rgba(10,28,46,.62); backdrop-filter: blur(3px); }
.gate-dialog { position: relative; width: min(540px, 92vw); background: #fff; border-radius: 18px;
  box-shadow: var(--shadow-lg); padding: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); text-align: center;
  animation: gate-in .3s var(--ease); }
@keyframes gate-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity:1; transform:none; } }
.gate-dialog .gate-logo { height: 34px; width: auto; margin: 0 auto 1.3rem; }
.gate-dialog h2 { font-size: 1.5rem; margin-bottom: .5rem; }
.gate-dialog p { margin-bottom: 1.6rem; }
.gate-actions { display: grid; gap: .7rem; }
.gate-fine { font-size: .78rem; color: var(--muted); margin: 1.3rem 0 0; }

/* ==========================================================================
   Forms
   ========================================================================== */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 640px){ .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field.full { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: .9rem; }
.field input, .field select, .field textarea {
  font: inherit; padding: .8rem .9rem; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ast-blue); box-shadow: 0 0 0 3px var(--ast-blue-100); outline: none; }
.field textarea { min-height: 130px; resize: vertical; }
.form-note { font-size: .8rem; color: var(--muted); }

/* ==========================================================================
   Resource / download list
   ========================================================================== */
.resource { display: flex; align-items: center; gap: 1.1rem; padding: 1.1rem 1.3rem; border: 1px solid var(--line);
  border-radius: var(--radius); background: #fff; transition: border-color .2s, box-shadow .2s; }
.resource:hover { border-color: var(--ast-blue-300); box-shadow: var(--shadow-sm); }
.resource .r-ico { flex-shrink: 0; width: 44px; height: 44px; border-radius: 10px; background: var(--ast-blue-050);
  color: var(--ast-blue); display: grid; place-items: center; font-weight: 700; font-size: .8rem; }
.resource .r-meta { flex: 1; }
.resource .r-meta h4 { margin: 0 0 .15rem; font-size: 1.02rem; }
.resource .r-meta span { font-size: .82rem; color: var(--muted); }

/* News */
.news-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.news-card .nc-media { position: relative; aspect-ratio: 16/9; overflow: hidden;
  background: linear-gradient(135deg, var(--ast-blue) 0%, var(--ast-blue-800) 100%); }
.news-card .nc-media::after { content: ""; position: absolute; inset: 0;
  background: url("../img/optical-rings.svg") -30% 120% / 150% no-repeat; opacity: .35; }
.news-card:nth-child(3n+2) .nc-media { background: linear-gradient(135deg, var(--ast-accent-700) 0%, var(--ast-blue-800) 100%); }
.news-card:nth-child(3n+3) .nc-media { background: linear-gradient(135deg, var(--ast-blue-700) 0%, var(--ast-blue-900) 100%); }
/* photo variant: the image fills the media box; the rings overlay is replaced by
   a bottom scrim so the category label stays readable over any photo */
.news-card .nc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.news-card .nc-media.has-img::after { background: linear-gradient(180deg, rgba(7,22,38,0) 45%, rgba(7,22,38,.6) 100%); opacity: 1; }
.news-card .nc-media .nc-cat { position: absolute; left: 1rem; bottom: .85rem; z-index: 1; color: #fff;
  font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .92; }
.news-card .nc-body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.news-card .nc-date { font-size: .8rem; color: var(--ast-accent-700); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.news-card h3 { font-size: 1.2rem; margin: .35rem 0 .5rem; }
.news-card .nc-foot { margin-top: auto; padding-top: 1rem; }
.tag { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  background: var(--ast-blue-050); color: var(--ast-blue); padding: .25rem .6rem; border-radius: 999px; }

/* CTA band */
.cta-band { background: linear-gradient(120deg, var(--ast-blue) 0%, var(--ast-blue-800) 100%); color: #fff; border-radius: 20px;
  padding: clamp(3rem, 2.2rem + 3.5vw, 5rem) clamp(1.5rem, 1rem + 3vw, 4rem); text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #cfe0ef; max-width: 56ch; margin-inline: auto; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--ast-blue-900); color: #c2d2e1; padding-top: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); }
.site-footer a { color: #c6d6e5; }
.site-footer a:hover { color: #fff; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,.1); }
@media (max-width: 900px){ .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-top { grid-template-columns: 1fr; } }
.footer-brand img { height: 34px; margin-bottom: 1rem; }
.footer-brand p { color: #a6bacb; font-size: .92rem; max-width: 34ch; }
.footer-col h4 { color: #fff; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1rem; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; font-size: .94rem; color: #c2d2e1; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  padding-block: 1.5rem; font-size: .82rem; color: #87a; }
.footer-bottom { color: #8aa0b4; }
.footer-bottom .fb-links { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.footer-social { display: flex; gap: .6rem; }
.footer-social a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  color: #cdddec; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.footer-social a:hover { background: var(--ast-blue); color: #fff; border-color: var(--ast-blue);
  transform: translateY(-2px); }
.footer-social svg { width: 18px; height: 18px; fill: currentColor; }
.footer-social svg[stroke] { fill: none; stroke: currentColor; }
.disclaimer { font-size: .78rem; color: #6d8499; padding-bottom: 2rem; max-width: 90ch; }

/* ==========================================================================
   Editorial components (sector-grade)
   ========================================================================== */
/* Eyebrow with rule line */
.label { display: inline-flex; align-items: center; gap: .65rem; font-size: .78rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--ast-accent-700); margin-bottom: 1.1rem; }
.label::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.section--ink .label, .hero .label, .page-hero .label { color: var(--ast-blue-300); }
.cta-band .label { color: #bfe0f4; }

/* Header row: title left, supporting text/link right */
.head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem 2.5rem;
  flex-wrap: wrap; margin-bottom: 2.75rem; }
.head-row .lead { margin: 0; max-width: 46ch; }
.head-row h2 { margin: 0; max-width: 18ch; }

/* Section intro: title with supporting text stacked below it */
.prod-intro { margin-bottom: 2.75rem; max-width: 70ch; }
.prod-intro h2 { margin: .2rem 0 0; }
.prod-intro .lead { margin: .8rem 0 0; max-width: 62ch; }

/* Three thematic pillars (Alcon-style) */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 1rem + 2vw, 2.6rem); }
.pillar { display: grid; grid-template-columns: auto 1fr; column-gap: .7rem; row-gap: .35rem;
  align-items: center; padding-top: 1rem; border-top: 2px solid var(--ast-blue); }
.pillar .p-ico { color: var(--ast-blue); margin: 0; line-height: 0; }
.pillar .p-ico svg { width: 24px; height: 24px; }
.pillar h3 { font-size: 1.1rem; margin: 0; }
.pillar p { grid-column: 1 / -1; font-size: .9rem; margin: 0; }
.section--ink .pillar { border-top-color: var(--ast-accent); }
.section--ink .pillar .p-ico { color: var(--ast-blue-300); }
@media (max-width: 640px) { .pillars { grid-template-columns: 1fr; } }

/* Feature tiles — image quick-access row (Alcon-style, AST design) */
.section--tiles { padding-top: clamp(2.4rem, 1.6rem + 3vw, 4rem); padding-bottom: 0; }
.feature-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, .6rem + 1.4vw, 1.6rem); }
.ftile { position: relative; display: block; overflow: hidden; border-radius: var(--radius);
  min-height: clamp(300px, 24vw, 380px); box-shadow: var(--shadow); isolation: isolate; }
.ftile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease); }
.ftile-scrim { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,40,65,0) 28%, rgba(12,40,65,.42) 56%, rgba(8,28,45,.88) 100%); }
.ftile-body { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(1.3rem, 1rem + 1vw, 1.9rem);
  color: #fff; display: flex; flex-direction: column; gap: .35rem; }
.ftile-label { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ast-blue-300); }
.ftile-body h3 { color: #fff; margin: .1rem 0 0; font-size: clamp(1.2rem, 1.05rem + .5vw, 1.5rem);
  letter-spacing: -.01em; }
.ftile-body p { color: rgba(255,255,255,.82); font-size: .92rem; margin: .2rem 0 0;
  max-height: 0; opacity: 0; overflow: hidden; transform: translateY(6px);
  transition: max-height .4s var(--ease), opacity .35s var(--ease), transform .35s var(--ease); }
.ftile-link { display: inline-flex; align-items: center; gap: .45rem; margin-top: .7rem;
  font-size: .85rem; font-weight: 600; color: #fff; }
.ftile-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.ftile:hover img { transform: scale(1.06); }
.ftile:hover .ftile-body p { max-height: 6rem; opacity: 1; transform: none; }
.ftile:hover .ftile-link svg { transform: translateX(4px); }
.ftile:focus-visible { outline: 3px solid var(--ast-blue-300); outline-offset: 3px; }
@media (max-width: 860px) { .feature-tiles { grid-template-columns: 1fr; }
  .ftile { min-height: 260px; }
  .ftile-body p { max-height: 6rem; opacity: 1; transform: none; } }

/* Professional tools hub (J&J "empowering your practice") */
.tool-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.tool { display: flex; flex-direction: column; gap: .85rem; padding: 1.6rem; border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.03); color: #dfe8f1;
  transition: transform .2s var(--ease), background .2s, border-color .2s; }
.tool:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.34); transform: translateY(-4px); color: #fff; }
.tool .t-ico { color: var(--ast-blue-300); }
.tool .t-ico svg { width: 28px; height: 28px; }
.tool h4 { color: #fff; margin: .2rem 0 0; font-size: 1.08rem; font-family: var(--font-display); letter-spacing: -.01em; }
.tool span { font-size: .85rem; color: #9fbad4; }
.tool .t-go { margin-top: auto; font-size: .85rem; font-weight: 600; color: var(--ast-blue-300); }
.tool:hover .t-go { color: #fff; }
@media (max-width: 820px) { .tool-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .tool-grid { grid-template-columns: 1fr; } }

/* Display font for big numerals */
.stat .num, .hero-trust b { font-family: var(--font-display); }

/* Feature row: large flagship product beside copy */
.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.feature-row .fr-media { position: relative; border-radius: var(--radius); overflow: hidden;
  background: radial-gradient(120% 120% at 70% 20%, var(--ast-blue-100), var(--surface-3)); padding: clamp(1.5rem,4vw,3rem);
  display: grid; place-items: center; min-height: 320px; }
.feature-row .fr-media::before { content: ""; position: absolute; inset: 0;
  background: url("../img/optical-rings.svg") 120% -20% / 80% no-repeat; opacity: .55; }
.feature-row .fr-media img { position: relative; z-index: 1; max-height: 380px; object-fit: contain;
  filter: drop-shadow(0 22px 42px rgba(16,44,71,.28)); }
@media (max-width: 820px) { .feature-row { grid-template-columns: 1fr; } .feature-row .fr-media { order: -1; } }

/* Editorial explainer (term + definition, replaces boxed callouts) */
.explainer { display: grid; grid-template-columns: minmax(0, 22rem) 1fr; gap: clamp(1.5rem, 1rem + 4vw, 4.5rem);
  align-items: start; padding-top: clamp(1.5rem, 1rem + 1.5vw, 2.4rem); border-top: 2px solid var(--ast-blue); }
.explainer .ex-head h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); margin: .2rem 0 0; }
.explainer .ex-body { max-width: 64ch; }
.explainer .ex-body p:first-of-type { font-size: 1.12rem; color: var(--ink); }
@media (max-width: 760px) { .explainer { grid-template-columns: 1fr; gap: 1rem; } }

/* Vision-range comparison board (bespoke IOL component) */
.range-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.range-col { display: flex; flex-direction: column; padding: clamp(1.5rem, 1rem + 1.4vw, 2.2rem);
  border-right: 1px solid var(--line); color: var(--ink); text-decoration: none;
  transition: background .2s var(--ease); }
.range-col:last-child { border-right: 0; }
.range-col:hover { background: var(--ast-blue-050); }
.range-col .rc-media { position: relative; aspect-ratio: 4/3; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(120% 120% at 70% 12%, var(--ast-blue-100), var(--surface-3));
  border-radius: 10px; margin-bottom: 1.4rem; }
.range-col .rc-media::before { content: ""; position: absolute; inset: 0;
  background: url("../img/optical-rings.svg") 130% -20% / 75% no-repeat; opacity: .5; }
.range-col .rc-media img { position: relative; z-index: 1; max-height: 80%; object-fit: contain;
  filter: drop-shadow(0 12px 24px rgba(16,44,71,.22)); transition: transform .3s var(--ease); }
.range-col:hover .rc-media img { transform: translateY(-3px) scale(1.03); }
.range-col .rc-tag { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ast-accent-700); }
.range-col h3 { font-size: 1.4rem; margin: .35rem 0 0; }
/* Patient category descriptor (colour-coded per lens) */
.range-col .rc-cat { font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  color: var(--accent, var(--ast-blue)); margin: .6rem 0 .1rem; }
.range-col .rc-cat .rc-rule { display: block; height: 2px; border-radius: 2px; margin-top: .55rem; position: relative;
  background: linear-gradient(90deg, var(--accent, var(--ast-blue)) 70%, color-mix(in srgb, var(--accent, var(--ast-blue)) 25%, transparent)); }
.range-col .rc-cat .rc-rule::after { content: ""; position: absolute; right: 0; top: 50%; transform: translate(2px,-50%);
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent, var(--ast-blue)); }
.range-col > p { font-size: .92rem; margin: .7rem 0 1rem; color: var(--ink-soft); }
.range-col .rc-stat { margin: 0 0 .2rem; font-size: .82rem; color: var(--ink-soft); }
.range-col .rc-stat strong { font-size: 1.5rem; font-weight: 800; color: var(--ast-blue); margin-right: .3rem; }
.range-col .rc-stat span { display: block; font-size: .76rem; margin-top: .1rem; }
.range-col .opt-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .65rem 0 1.3rem; padding: 0; list-style: none; }
.range-col .opt-chips li { font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ast-blue); background: rgba(30,90,141,.07); border: 1px solid rgba(30,90,141,.2);
  padding: .2rem .5rem; border-radius: 4px; }
.range-col .rc-foot { margin-top: auto; }
/* Patient-context pages hide professional-only nav items (Downloads, IOL Calculator) */
body[data-context="patient"] .nav-pro { display: none; }

/* Patient outcomes — big percentage list on a light background */
.outcomes { list-style: none; margin: 1.2rem 0 1rem; padding: 0; display: grid; gap: .9rem; }
.outcomes li { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1.1rem;
  padding: 1rem 1.2rem; background: #fff; border: 1px solid var(--line);
  border-left: 3px solid var(--ast-blue); border-radius: 10px; box-shadow: var(--shadow);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.outcomes li:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(16,44,71,.12); }
.outcomes .oc-num { font-family: var(--font-display); font-size: clamp(2.1rem, 1.6rem + 1.8vw, 2.8rem);
  font-weight: 800; line-height: 1; color: var(--ast-blue); letter-spacing: -.02em; }
.outcomes .oc-text { font-size: .9rem; color: var(--ink-soft); }
.outcomes .oc-text strong { display: block; color: var(--ink); font-size: .98rem; margin-bottom: .15rem; }

/* single non-preloaded delivery card */
.delivery-single { max-width: 560px; margin-inline: auto; }
.delivery-single .product-card { display: grid; grid-template-columns: 1fr 1.25fr; align-items: center; }
@media (max-width: 620px) { .delivery-single .product-card { grid-template-columns: 1fr; } }

/* Global contact CTA banner (full-bleed, above footer on every page) */
.contact-cta { background: var(--ast-blue); color: #fff;
  background-image: linear-gradient(120deg, var(--ast-blue) 0%, #17456e 100%); }
.contact-cta .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.2rem 2rem; padding-block: clamp(2rem, 1.4rem + 2.4vw, 3.4rem); }
.contact-cta .cc-text { display: flex; flex-direction: column; gap: .3rem; }
.contact-cta .label { color: #bcd6ef; margin: 0; }
.contact-cta .label::before { background: #6fa8d6; }
.contact-cta h2 { margin: 0; color: #fff; font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.3rem); }
@media (max-width: 560px) { .contact-cta .container { flex-direction: column; align-items: flex-start; } }

/* About — full-bleed presentation hero (image/video + slogan) */
.about-hero { position: relative;
  overflow: hidden; color: var(--ink); }
.about-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: right center; z-index: 0; }
.about-hero-scrim { position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(90deg, #fff 0%, rgba(255,255,255,.94) 30%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 70%); }
.about-hero .container { position: relative; z-index: 2; }
.about-hero .breadcrumbs, .about-hero .breadcrumbs a { color: var(--ast-blue); }
.about-hero .label { color: var(--ast-blue); }
.about-hero h1 { color: var(--ink); max-width: 18ch; margin-top: .5rem; }
.about-hero .lead { color: var(--ink-soft); max-width: 54ch; }
@media (max-width: 700px) {
  .about-hero-scrim { background:
    linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.7) 50%, rgba(255,255,255,.9) 100%); }
}

/* About — in-house manufacturing band */
.mfg-band { position: relative; overflow: hidden; display: flex; align-items: center;
  min-height: clamp(360px, 52vh, 520px); }
.mfg-band-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: right center; z-index: 0; }
.mfg-band-scrim { position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(90deg, #fff 0%, rgba(255,255,255,.92) 32%, rgba(255,255,255,.45) 54%, rgba(255,255,255,0) 72%); }
.mfg-band .container { position: relative; z-index: 2; }
.mfg-copy { max-width: 42ch; }
.mfg-copy h2 { margin-top: .4rem; }
.mfg-copy p { color: var(--ink-soft); margin-top: .6rem; }
@media (max-width: 700px) {
  .mfg-band-scrim { background:
    linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.7) 52%, rgba(255,255,255,.92) 100%); }
}

/* About — global-presence world map */
.world-map { border-radius: 14px; padding: clamp(1rem, 2vw, 2rem);
  background: linear-gradient(180deg, #f6f9fc, #eaf2fa); border: 1px solid var(--line); }
.world-map img { display: block; width: 100%; height: auto; }

/* Products — full-bleed photo hero */
.prod-hero { position: relative;
  overflow: hidden; color: #fff; }
/* the individual lens pages (plain .prod-hero, no --anim/--float) use lifestyle
   photos that are ~3:2; the shared 16:5 bander cropped them too hard (subject
   looked zoomed in and cut off). Give just those heroes a taller shape so the
   photo shows more and crops less. */
.prod-hero:not(.prod-hero--anim):not(.prod-hero--float) {
  aspect-ratio: 16 / 7; max-height: 680px; }
.prod-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
@keyframes heroKenBurns { 0% { transform: scale(1.05) translate(1.2%, .5%); }
  100% { transform: scale(1.14) translate(-1.6%, -1.2%); } }
.prod-hero--anim .prod-hero-img { transform-origin: 70% 50%;
  animation: heroKenBurns 24s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .prod-hero--anim .prod-hero-img { animation: none; } }
@keyframes heroFloat { 0% { transform: scale(1) translateX(0); } 100% { transform: scale(1.035) translateX(-1%); } }
.prod-hero--float .prod-hero-img { transform-origin: right center;
  animation: heroFloat 20s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .prod-hero--float .prod-hero-img { animation: none; } }
/* About banner: feather the image into the navy on the left, top and bottom */
.about-banner .prod-hero-img { object-fit: cover; object-position: right center;
  -webkit-mask-image: linear-gradient(90deg, transparent 18%, #000 50%),
                      linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  mask-image: linear-gradient(90deg, transparent 18%, #000 50%),
              linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%); }
.prod-hero-scrim { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(115deg, rgba(7,28,49,.9) 0%, rgba(7,28,49,.58) 50%, rgba(7,28,49,.3) 100%); }
/* the three Asqelio lens renders staggered on the right of the portfolio hero */
.hero-lenses { position: absolute; z-index: 2; right: clamp(1rem, 5vw, 5.5rem); top: 50%;
  transform: translateY(-50%); display: flex; align-items: center; pointer-events: none; }
.hero-lenses img { height: clamp(170px, 21vw, 300px); width: auto;
  filter: drop-shadow(0 18px 34px rgba(4,16,30,.55)) drop-shadow(0 0 12px rgba(190,215,245,.22)); }
.hero-lenses img:nth-child(1) { transform: translateX(34%) rotate(-9deg) scale(.82); opacity: .9; }
.hero-lenses img:nth-child(2) { z-index: 1; transform: translateX(12%) rotate(-4deg) scale(.9); opacity: .96; }
.hero-lenses img:nth-child(3) { z-index: 2; transform: translateX(-12%) rotate(4deg) scale(.96); }
.hero-lenses img:nth-child(4) { z-index: 3; transform: translateX(-34%) rotate(9deg); }
@media (max-width: 980px) { .hero-lenses { display: none; } }
/* On phones the left-to-right navy scrim hides the photo — switch to a vertical
   scrim so the image stays visible behind the copy (overrides inline scrims). */
@media (max-width: 760px) {
  .prod-hero-scrim { background: linear-gradient(180deg, rgba(8,28,46,.62) 0%, rgba(8,28,46,.42) 48%, rgba(8,28,46,.74) 100%) !important; }
  .prod-hero h1 { max-width: none; }
}
.prod-hero .container { position: relative; z-index: 2; }
.prod-hero .breadcrumbs, .prod-hero .breadcrumbs a, .prod-hero .label { color: #bcd6ef; }
.prod-hero h1 { color: #fff; max-width: 16ch; margin-top: .5rem; }
.prod-hero .lead { color: #e6eef7; max-width: 54ch; }
/* Unified inner-page hero copy: SAME lead size and width on every hero
   (portfolio, innovations, professionals, patients, about, downloads…) so the
   banners read consistently and the copy always stays in the dark left field.
   Placed after the per-hero rules above so it wins on source order. */
.page-hero .lead, .prod-hero .lead, .about-hero .lead {
  max-width: 44ch;
  font-size: clamp(.95rem, .9rem + .22vw, 1.08rem);
}
@media (max-width: 720px) {
  .page-hero .lead, .prod-hero .lead, .about-hero .lead { max-width: none; }
}
.prod-hero-pack { position: absolute; z-index: 2; right: clamp(1.5rem, 4vw, 5rem); bottom: 0;
  height: clamp(180px, 30vw, 330px); width: auto; filter: drop-shadow(0 18px 36px rgba(0,0,0,.45)); }
@media (max-width: 760px) { .prod-hero-pack { display: none; } }

/* Products — range gallery cards (colour-coded by product) */
.range-gallery { display: grid; gap: clamp(1rem, 2vw, 1.6rem); grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); }
.range-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden; border-top: 4px solid var(--accent, var(--ast-blue));
  text-decoration: none; color: inherit; transition: transform .25s ease, box-shadow .25s ease; }
/* loading-method identifier chip, pinned to the top-right corner of a card */
.range-card .rg-badge { position: absolute; top: .75rem; left: .75rem; z-index: 2; display: inline-flex;
  align-items: center; gap: .35rem; font-size: .62rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; padding: .3rem .62rem; border-radius: 999px; line-height: 1; }
.range-card .rg-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.range-card .rg-badge--preloaded { background: var(--accent, #1E5A8D); color: #fff; box-shadow: 0 4px 10px rgba(6,22,38,.2); }
.range-card .rg-badge--manual { background: #fff; color: #55636e; border: 1px solid rgba(12,40,65,.18); box-shadow: 0 2px 6px rgba(6,22,38,.08); }
a.range-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(6,22,38,.12); }
.range-card .rg-media { display: flex; align-items: center; justify-content: center; padding: 1.6rem 1.4rem;
  min-height: 170px; background: linear-gradient(180deg, #fff, #f3f8fc); }
/* explicit image height (not % of an aspect-ratio box) so Safari/WebKit does not
   crop the packaging boxes; smaller and centred */
.range-card .rg-media img { height: clamp(120px, 13vw, 158px); width: auto; max-width: 86%;
  object-fit: contain; margin: 0 auto; filter: drop-shadow(0 12px 22px rgba(6,22,38,.18)); }
.range-card .rg-body { padding: 1.1rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.range-card .rg-tag { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent, var(--ast-blue)); }
.range-card h3 { margin: 0; font-size: 1.3rem; }
.range-card p { margin: .2rem 0 0; font-size: .92rem; color: var(--ink-soft); }
.range-card .rg-foot { margin-top: auto; padding-top: .7rem; }
/* focal-range meter */
.vision-range { margin: 1rem 0 .2rem; }
.vr-label { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .5rem; }
.vr-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; }
.vr-seg { font-size: .72rem; font-weight: 600; text-align: center; padding: .45rem .2rem; border-radius: 6px;
  border: 1px solid var(--line); color: var(--muted); background: var(--surface-2); }
.vr-seg[data-on] { background: var(--ast-blue); color: #fff; border-color: var(--ast-blue); }
@media (max-width: 760px) { .range-board { grid-template-columns: 1fr; }
  .range-col { border-right: 0; border-bottom: 1px solid var(--line); }
  .range-col:last-child { border-bottom: 0; } }

/* ---------- utilities ---------- */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}
.muted{color:var(--muted)}.small{font-size:.85rem}
.hidden{display:none !important}
.reveal{opacity:0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease);}
.reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){ * { animation: none !important; transition: none !important; } .reveal{opacity:1;transform:none;} html{scroll-behavior:auto;} }
/* Exception: the home hero effect (travelling lens + brand slide) is meant to run
   for everyone, including machines with "reduce motion" on — re-enable its
   transitions/animations so it never looks frozen. */
@media (prefers-reduced-motion: reduce){
  .hero-brand-frame { transition: opacity .9s cubic-bezier(.4,0,.2,1) !important; }
  .hero--lens .hbf-inner img { transition: opacity .7s ease .15s, transform 1.2s cubic-bezier(.2,.7,.2,1) .15s, filter 1.2s cubic-bezier(.2,.7,.2,1) .15s !important; }
  .hero--lens .hbf-tagline { transition: opacity .7s ease .55s, transform 1s cubic-bezier(.2,.7,.2,1) .55s !important; }
  .hero-packs-group { animation: packsRise 1s cubic-bezier(.2,.7,.2,1) .7s both !important; }
  .hero-packs-title { animation: titleGlow 4.5s ease-in-out infinite !important; }
  .hero-packs img { transition: filter .35s ease !important; }
}

/* ===== region geo popup (Spain -> international / Spanish site) ===== */
.region-pop { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1.2rem;
  background: rgba(6,18,36,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; }
.region-pop.open { opacity: 1; visibility: visible; }
.region-pop-card { position: relative; background: #fff; border-radius: 16px; width: 100%; max-width: 460px;
  padding: clamp(1.7rem, 1rem + 2vw, 2.5rem); text-align: center; box-shadow: 0 30px 70px rgba(6,18,36,.42);
  transform: translateY(14px) scale(.98); transition: transform .28s cubic-bezier(.2,.7,.2,1); }
.region-pop.open .region-pop-card { transform: none; }
.region-x { position: absolute; top: .55rem; right: .85rem; background: none; border: 0; font-size: 1.7rem;
  line-height: 1; color: var(--muted, #5b6f88); cursor: pointer; padding: .2rem .4rem; }
.region-x:hover { color: var(--ink); }
.region-globe { width: 58px; height: 58px; margin: 0 auto 1rem; color: var(--ast-blue);
  background: var(--ast-blue-050, #eef4fb); border-radius: 50%; display: grid; place-items: center; }
.region-globe svg { width: 32px; height: 32px; stroke-linecap: round; stroke-linejoin: round; }
.region-pop-card h2 { margin: 0 0 .55rem; font-size: 1.45rem; color: var(--ink); }
.region-lead { margin: 0 0 1.5rem; color: var(--ink-soft, #5b6f88); font-size: .98rem; line-height: 1.55; }
.region-btns { display: flex; flex-direction: column; gap: .6rem; }
.region-btns .btn { width: 100%; justify-content: center; font-size: .95rem; }
.region-flag { margin-right: .55rem; font-size: 1.1em; line-height: 1; }