/* Self-hosted web fonts (Latin and Latin-ext subsets), SIL Open Font License 1.1.
 * DM Sans, DM Mono, Manrope and Archivo are from Google Fonts (fonts.google.com); files are served from /assets/fonts/ so no third-party
 * request is made. Regenerate with scripts/fetch-fonts.mjs. font-display: swap keeps text visible while a font loads. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-stretch:62%;font-display:swap;src:url(/assets/fonts/archivo-700-w62-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-stretch:62%;font-display:swap;src:url(/assets/fonts/archivo-700-w62-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/dm-mono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/dm-mono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/dm-mono-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/dm-mono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/dm-sans-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/dm-sans-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/dm-sans-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/dm-sans-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200;font-display:swap;src:url(/assets/fonts/manrope-200-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200;font-display:swap;src:url(/assets/fonts/manrope-200-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:300;font-display:swap;src:url(/assets/fonts/manrope-200-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:300;font-display:swap;src:url(/assets/fonts/manrope-200-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/manrope-200-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/manrope-200-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* =====================================================================
Concept 05 — Fluid Optical Science · tokens (mirrors docs/design/concept-05-tokens.css)
===================================================================== */
:root{
/* Light white-and-blue theme (client feedback 2026-11-07; Refero reference: Alveos "blue-sky science").
   Canvas is cool off-white; ice-blue surfaces separate sections; navy is for text only; one medium-blue accent. */
--surface:#F7FAFC; --current:#F3F8FC; --trench:#EAF2F9; --deep:#E2EDF7; --abyss:#D6E6F4;
--paper:#FFFFFF; --canvas:#F7FAFC; --ice-bg:#EEF5FB; --sky:#DCEBF8; --sky-2:#BBD7F2;
--cyan:#1C6DB6; --cyan-ink:#FFFFFF; --ice:#1E5A92; --accent-hover:#155C9C;
--glass:#FFFFFF; --glass-2:#F2F7FC; --glass-b:rgba(14,40,72,.12);
--hair:rgba(14,40,72,.10); --text:#0E2440; --text-2:#3F5A75; --text-3:#57718C; --flag:#8A5A00;
--fam-soft:#1A6FA6; --fam-rigid:#4A6D91; --fam-spec:#4458B8; --fam-care:#0E7262;
--f-display:"Manrope",system-ui,sans-serif; --f-text:"DM Sans",system-ui,sans-serif; --f-mono:"DM Mono",ui-monospace,monospace;
--r-card:8px; --r-glass:20px; --r-pill:999px;
--m:clamp(16px,6.667vw,96px); --g:24px; --sec:112px;
--shadow:0 1px 2px rgba(14,40,72,.05),0 10px 30px -18px rgba(14,40,72,.22);
--ease:cubic-bezier(.22,1,.36,1); --drift:cubic-bezier(.45,0,.55,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--text);font:400 16px/1.6 var(--f-text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,svg{display:block;max-width:100%}
:where(img[width][height]){height:auto}
.skip{position:absolute;left:12px;top:-60px;z-index:1000;padding:10px 16px;border-radius:8px;background:var(--cyan);color:var(--cyan-ink);font-weight:500;text-decoration:none}.skip:focus{top:12px}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ---------- mockup toolbar (not part of the design) ---------- */
/* ---------- boards ---------- */
.board{display:none}
.board.is-active{display:block}
/* ---------- type ---------- */
.d-96,.d-76,.d-56,.d-40,.d-28,.d-22{font-family:var(--f-display);font-weight:200;letter-spacing:-.025em;line-height:1.02}
.d-96{font-size:clamp(46px,6.667vw,96px)}
.d-76{font-size:clamp(40px,5.28vw,76px)}
.d-56{font-size:clamp(34px,3.89vw,56px);line-height:1.05}
.d-40{font-size:clamp(28px,2.78vw,40px);line-height:1.1;font-weight:300}
.d-28{font-size:28px;line-height:1.15;font-weight:300}
.d-22{font-size:22px;line-height:1.25;font-weight:300;letter-spacing:-.01em}
.lead{font-size:18px;line-height:1.6;color:var(--text-2)}
.body-2{font-size:14px;line-height:1.6;color:var(--text-2)}
.tag{font:500 12px/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ice)}
.mono{font-family:var(--f-mono)}
.cy{color:var(--cyan)}
.muted{color:var(--text-2)}
em.mc{font-style:normal;color:var(--ice)}
/* ---------- layout ---------- */
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--m);position:relative}
.row{display:flex;gap:var(--g);align-items:flex-start}
.c3{flex:0 0 calc(3*(100% - 11*24px)/12 + 2*24px)}
.c4{flex:0 0 calc(4*(100% - 11*24px)/12 + 3*24px)}
.c5{flex:0 0 calc(5*(100% - 11*24px)/12 + 4*24px)}
.c6{flex:0 0 calc(6*(100% - 11*24px)/12 + 5*24px)}
.c7{flex:0 0 calc(7*(100% - 11*24px)/12 + 6*24px)}
.c8{flex:0 0 calc(8*(100% - 11*24px)/12 + 7*24px)}
.push1{margin-left:calc((100% - 11*24px)/12 + 24px)}
.sec{padding:var(--sec) 0;position:relative}
.stack-8>*+*{margin-top:8px}.stack-16>*+*{margin-top:16px}.stack-24>*+*{margin-top:24px}.stack-32>*+*{margin-top:32px}
.sec-label{display:flex;align-items:center;gap:12px;margin-bottom:32px}
.sec-label .tag{color:var(--cyan)}
.sec-label::after{content:"";flex:0 0 64px;height:1px;background:var(--glass-b)}
.sec-label .depth{color:var(--text-3)}
/* ---------- glass ---------- */
.glass{background:var(--glass);border:1px solid var(--glass-b);border-radius:var(--r-glass);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.08);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);position:relative}
.glass-flat{background:var(--glass);border:1px solid var(--glass-b);border-radius:var(--r-glass)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(160deg,rgba(110,152,190,.10),transparent 38%)}
/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 24px;border-radius:var(--r-pill);font:500 15px/1 var(--f-text);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background var(--ease) 240ms,border-color 240ms,transform 240ms var(--ease),box-shadow 240ms;white-space:nowrap}
.btn svg{width:16px;height:16px;flex:0 0 auto}
.btn-primary{background:var(--cyan);color:var(--cyan-ink);box-shadow:0 0 0 0 rgba(28,109,182,.0),0 10px 30px -10px rgba(28,109,182,.6)}
.btn-primary:hover{background:#5BE0EE;transform:translateY(-1px)}
.btn-ghost{background:var(--glass);border-color:var(--glass-b);color:var(--text);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.btn-ghost:hover{background:var(--glass-2);border-color:rgba(110,152,190,.34)}
.btn-sm{height:38px;padding:0 18px;font-size:14px}
.btn-link{display:inline-flex;align-items:center;gap:8px;font:500 14px/1 var(--f-text);color:var(--cyan);text-decoration:none;padding:6px 0;border-bottom:1px solid rgba(28,109,182,.35)}
.btn-link:hover{border-bottom-color:var(--cyan)}
/* ---------- chips / badges / flags ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:var(--r-pill);border:1px solid var(--glass-b);background:rgba(110,152,190,.05);font:400 12px/1 var(--f-mono);color:var(--ice);white-space:nowrap}
.chip b{font-weight:500;color:var(--text)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.flag{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px 0 7px;border-radius:var(--r-pill);border:1px solid rgba(242,196,107,.45);background:rgba(242,196,107,.08);color:var(--flag);font:500 10.5px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;vertical-align:middle}
.flag::before{content:"";width:9px;height:10px;background:currentColor;clip-path:polygon(0 0,100% 0,72% 40%,100% 80%,14% 80%,14% 100%,0 100%)}
.flagged{color:var(--text-3)}
.pro{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 12px 0 9px;border-radius:var(--r-pill);background:var(--ice);color:var(--deep);font:500 11px/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.pro svg{width:12px;height:12px}
.imglabel{position:absolute;left:10px;bottom:10px;z-index:3;font:400 10px/1.3 var(--f-mono);letter-spacing:.04em;color:var(--ice);background:rgba(20,66,126,.72);border:1px solid var(--hair);padding:4px 7px;border-radius:4px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.vidcap{position:absolute;right:10px;bottom:10px;z-index:3;font:400 10px/1.3 var(--f-mono);letter-spacing:.04em;color:var(--deep);background:var(--ice);padding:4px 7px;border-radius:4px}
.ph{position:relative;display:flex;align-items:flex-end;justify-content:flex-start;border:1px dashed rgba(110,152,190,.28);border-radius:var(--r-card);background:repeating-linear-gradient(135deg,rgba(110,152,190,.035) 0 1px,transparent 1px 14px),radial-gradient(120% 90% at 30% 10%,rgba(28,109,182,.14),transparent 60%),var(--trench);overflow:hidden}
.ph span{margin:14px;font:400 11px/1.4 var(--f-mono);color:var(--ice);letter-spacing:.03em;background:rgba(20,66,126,.6);padding:5px 8px;border-radius:4px}
/* ---------- header / glass capsule nav ---------- */
.hdr{position:fixed;top:20px;left:0;right:0;z-index:200;pointer-events:none}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.hdr .wrap>*{pointer-events:auto}
.logo-plate{display:inline-flex;align-items:center;height:48px;padding:0 18px;background:#fff;border-radius:var(--r-pill);box-shadow:var(--shadow)}
.logo-plate img{height:24px;width:auto}
.hdr .logo-plate{height:60px;padding:0 22px}
.hdr .logo-plate img{height:34px}
@media (max-width:980px){.hdr .logo-plate{height:52px;padding:0 18px}.hdr .logo-plate img{height:29px}}
.capsule{display:flex;align-items:center;gap:2px;height:48px;padding:0 6px;border-radius:var(--r-pill);background:rgba(27,82,150,.38);border:1px solid var(--glass-b);-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);box-shadow:var(--shadow);transition:background 400ms}
.hdr.is-scrolled .capsule{background:rgba(20,66,126,.72)}
.capsule>a,.capsule>.nav-dd>button{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 16px;border-radius:var(--r-pill);font:400 14px/1 var(--f-text);color:var(--text);text-decoration:none;background:none;border:0;cursor:pointer}
.capsule>a:hover,.capsule>.nav-dd>button:hover,.capsule [aria-current="page"],.nav-dd.is-open>button{background:rgba(110,152,190,.1)}
.capsule [aria-current="page"]{box-shadow:inset 0 -2px 0 var(--cyan)}
.nav-dd{position:relative}
.nav-dd>button svg{width:10px;height:10px;transition:transform 240ms}
.nav-dd.is-open>button svg{transform:rotate(180deg)}
.dd-sheet{position:absolute;top:58px;left:50%;width:720px;margin-left:-360px;padding:12px;display:flex;gap:8px;border-radius:var(--r-glass);background:rgba(20,66,126,.78);border:1px solid var(--glass-b);-webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%);box-shadow:var(--shadow);opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity 300ms var(--ease),transform 300ms var(--ease)}
.nav-dd.is-open .dd-sheet{opacity:1;transform:none;pointer-events:auto}
.fam-tile{flex:1 1 0;display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:12px;text-decoration:none;border:1px solid transparent;transition:background 240ms,border-color 240ms}
.fam-tile:hover,.fam-tile:focus-visible{background:rgba(110,152,190,.06);border-color:var(--hair)}
.fam-well{height:96px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:radial-gradient(60% 70% at 50% 60%,color-mix(in srgb,var(--fam) 40%,transparent),transparent 70%),radial-gradient(120% 120% at 50% 0%,rgba(110,152,190,.08),transparent),var(--trench);overflow:hidden}
.fam-well svg{width:70px;height:70px}
.fam-tile strong{font:400 15px/1.2 var(--f-text)}
.fam-tile small{font:400 11px/1.3 var(--f-mono);color:var(--text-2)}
.hdr-cta{display:flex;align-items:center;gap:8px}
.hdr .menu-btn{display:none}
@media (max-width:980px){.capsule{display:none}.hdr .menu-btn{display:flex}.hdr-cta .btn-primary{display:none}}
/* ---------- mobile menu drawer (opened by .menu-btn) ---------- */
.hdr .menu-btn[aria-expanded="true"]{background:var(--cyan);color:var(--cyan-ink);border-color:var(--cyan)}
.hdr .menu-btn:not([aria-expanded="true"]){background:rgba(27,82,150,.72);color:#fff;border-color:rgba(235,246,252,.3)}
body.nav-open{overflow:hidden}
.mnav{position:fixed;inset:0;z-index:190;display:flex;flex-direction:column;gap:4px;padding:96px var(--m) calc(var(--dock) + 24px + env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain;background:radial-gradient(80% 50% at 80% 0,rgba(28,109,182,.18),transparent 60%),rgba(20,66,126,.97);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity 300ms var(--ease),transform 300ms var(--ease),visibility 0s linear 300ms}
.mnav.is-open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.mnav .mi{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 4px;border:0;border-bottom:1px solid var(--hair);background:none;cursor:pointer;text-align:left;text-decoration:none;color:var(--text);font:200 clamp(28px,8.5vw,36px)/1 var(--f-display);letter-spacing:-.02em}
.mnav .mi small{font:400 11px var(--f-mono);color:var(--text-3);letter-spacing:.08em}
.mnav .mi svg{width:14px;height:14px;color:var(--text-2);transition:transform 240ms}
.mnav .grp.is-open>.mi svg{transform:rotate(180deg);color:var(--cyan)}
.mnav .sub{display:none;flex-direction:column;gap:6px;padding:8px 0 14px 4px;border-bottom:1px solid var(--hair)}
.mnav .grp.is-open .sub{display:flex}
.mnav .sub a{display:flex;align-items:center;gap:12px;min-height:44px;text-decoration:none;font:400 16px var(--f-text);color:var(--text-2)}
.mnav .sub a i{width:8px;height:8px;border-radius:50%;background:var(--fam)}
.mnav .mnav-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding-top:28px}
.mnav .mnav-foot .btn{justify-content:center}
@media (min-width:981px){.mnav{display:none}}
@media (prefers-reduced-motion:reduce){.mnav{transition:none}}
/* ---------- depth rail ---------- */
.rail{position:fixed;left:28px;top:50%;transform:translateY(-50%);z-index:150;display:none;flex-direction:column;align-items:flex-start;gap:0}
body[data-board="home"] .rail{display:flex}
.rail .line{position:absolute;left:3px;top:6px;bottom:6px;width:1px;background:var(--glass-b)}
.rail .fill{position:absolute;left:3px;top:6px;width:1px;background:var(--cyan);height:0;transform-origin:top}
.rail button{position:relative;display:flex;align-items:center;gap:10px;height:30px;background:none;border:0;padding:0;cursor:pointer;font:400 10px/1 var(--f-mono);letter-spacing:.08em;color:var(--text-3)}
.rail button i{width:7px;height:7px;border-radius:50%;border:1px solid var(--glass-b);background:var(--deep);flex:0 0 auto;transition:all 300ms}
.rail button span{opacity:0;transform:translateX(-4px);transition:all 300ms var(--ease)}
.rail button.is-on{color:var(--cyan)}
.rail button.is-on i{background:var(--cyan);border-color:var(--cyan);box-shadow:0 0 0 4px rgba(28,109,182,.15)}
.rail:hover button span{opacity:1;transform:none}
.rail-k{font:400 10px/1 var(--f-mono);color:var(--text-3);letter-spacing:.1em;margin:0 0 10px -2px;writing-mode:vertical-rl;transform:rotate(180deg)}
@media (max-width:1279px){body[data-board="home"] .rail{display:none}}
/* ---------- reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(24px);filter:blur(8px);transition:opacity 700ms var(--ease),transform 700ms var(--ease),filter 700ms var(--ease)}
[data-reveal].is-in{opacity:1;transform:none;filter:none}
/* ---------- ambient water ---------- */
.waves{position:absolute;left:0;right:0;pointer-events:none;overflow:hidden}
.waves svg{width:200%;max-width:none;height:100%;animation:wave 24s linear infinite}
.waves svg+svg{position:absolute;inset:0;animation-duration:36s;animation-direction:reverse;opacity:.6}
@keyframes wave{to{transform:translateX(-50%)}}
.caustic{position:absolute;pointer-events:none;background:
radial-gradient(40% 30% at 30% 40%,rgba(28,109,182,.20),transparent 70%),
radial-gradient(30% 24% at 70% 30%,rgba(110,152,190,.16),transparent 70%),
radial-gradient(28% 22% at 55% 70%,rgba(28,109,182,.12),transparent 70%);filter:blur(10px);animation:caust 18s var(--drift) infinite alternate}
@keyframes caust{0%{transform:translate3d(-2%,0,0) scale(1)}100%{transform:translate3d(3%,2%,0) scale(1.08)}}
/* =====================================================================
HOME
===================================================================== */
#home{background:linear-gradient(180deg,var(--surface) 0,var(--current) 2400px,var(--trench) 4200px,var(--deep) 6200px,var(--abyss) 100%)}
.hero-pin{height:250vh;max-height:2600px;position:relative}
.hero-stage{position:sticky;top:0;height:100vh;min-height:720px;max-height:1000px;overflow:hidden}
.h-bg{position:absolute;inset:0;background:radial-gradient(90% 70% at 70% 0%,rgba(28,109,182,.22),transparent 60%),linear-gradient(180deg,#3F8AD2 0%,var(--surface) 30%,var(--current) 100%)}
.h-bg::after{content:"";position:absolute;left:0;right:0;top:0;height:240px;background:linear-gradient(180deg,#3F8AD2,rgba(63,138,210,0))} /* continues the M4 hero's closing band into the water surface */
.h-dim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,66,126,.35),rgba(20,66,126,.9));opacity:0;pointer-events:none}
.h-caust{inset:-10% -10% 30% -10%}
.h-surface{position:absolute;left:0;right:0;top:0;height:180px;pointer-events:none}
.h-surface .waves{inset:0}
.h-rays{position:absolute;left:46%;top:-10%;width:60%;height:120%;pointer-events:none;background:repeating-linear-gradient(100deg,transparent 0 46px,rgba(110,152,190,.045) 46px 50px,transparent 50px 120px);-webkit-mask:linear-gradient(180deg,#000,transparent 75%);mask:linear-gradient(180deg,#000,transparent 75%);transform-origin:top}
.h-grid{position:relative;z-index:2;height:100%;display:flex;align-items:center;padding-top:72px}
.h-grid .wrap{width:100%;display:flex;gap:var(--g);align-items:center}
.h-copy{position:relative;z-index:3;padding-top:40px;transform-origin:0 50%}
.h-copy h1,.h-copy h2{margin:20px 0 24px;font-size:clamp(44px,5.4vw,80px);width:132%;line-height:1}
.h-copy .lead{max-width:470px}
.h-ctas{display:flex;gap:12px;margin-top:36px;flex-wrap:wrap}
.h-optic{position:relative;height:min(78vh,700px)}
.h-panel{position:absolute;left:4%;top:7%;width:72%;height:80%;border-radius:var(--r-glass);overflow:hidden;border:1px solid var(--glass-b);box-shadow:var(--shadow)}
.h-panel img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;filter:grayscale(1) contrast(1.15) brightness(.62)}
.h-panel::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(38,108,184,.75),rgba(20,66,126,.85));mix-blend-mode:multiply}
.h-panel .tint{position:absolute;inset:0;background:var(--surface);mix-blend-mode:color;z-index:1}
.h-lens{position:absolute;left:30%;top:4%;width:62%;aspect-ratio:1;z-index:2;will-change:transform}
.h-lens .tilt{position:absolute;inset:0;transform-origin:50% 50%}
.h-lens .see{position:absolute;inset:3%;border-radius:50%;-webkit-backdrop-filter:brightness(1.32) contrast(1.06) saturate(1.05);backdrop-filter:brightness(1.32) contrast(1.06) saturate(1.05)}
.h-lens svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.h-focus{position:absolute;left:40%;top:66%;width:44%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(28,109,182,.55),rgba(28,109,182,.12) 60%,transparent);filter:blur(6px);z-index:1}
.h-rings{position:absolute;inset:-9%;transform-origin:50% 50%;opacity:0}
.h-specimen{position:absolute;right:0;bottom:2%;z-index:4;width:270px;padding:18px 20px;border-radius:16px}
.h-specimen dl{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.h-specimen dl div{display:flex;justify-content:space-between;gap:12px;font:400 12px/1.4 var(--f-mono);color:var(--text-2);border-top:1px solid var(--hair);padding-top:6px}
.h-specimen dd{color:var(--text)}
.h-read{position:absolute;z-index:5;display:flex;flex-direction:column;gap:4px;min-width:190px;opacity:0}
.h-read .tag{color:var(--text-2);font-size:11px}
.h-read b{font:200 34px/1 var(--f-display);letter-spacing:-.02em;color:var(--text)}
.h-read b small{font:400 13px/1 var(--f-mono);color:var(--cyan);margin-left:6px;letter-spacing:0}
.h-read em{font:400 10.5px/1.3 var(--f-mono);color:var(--text-3);font-style:normal}
.h-read::before{content:"";position:absolute;height:1px;width:56px;background:linear-gradient(90deg,var(--cyan),transparent);top:-10px;left:0}
.r1{left:-2%;top:6%}.r2{right:-4%;top:10%;text-align:right;align-items:flex-end}.r2::before{left:auto;right:0;background:linear-gradient(270deg,var(--cyan),transparent)}
.r3{left:-2%;bottom:16%}.r4{right:-4%;bottom:8%;text-align:right;align-items:flex-end}.r4::before{left:auto;right:0;background:linear-gradient(270deg,var(--cyan),transparent)}
.h-progress{position:absolute;left:var(--m);bottom:36px;z-index:4;display:flex;align-items:center;gap:12px;font:400 11px/1 var(--f-mono);letter-spacing:.08em;color:var(--text-2)}
.h-progress .bar{width:120px;height:1px;background:var(--glass-b);position:relative;overflow:hidden}
.h-progress .bar i{position:absolute;inset:0;background:var(--cyan);transform-origin:left;transform:scaleX(0)}
.h-scrollcue{display:inline-block;width:1px;height:28px;background:linear-gradient(var(--cyan),transparent);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
/* positioning */
.pos-statement{font-family:var(--f-display);font-weight:200;font-size:clamp(30px,3.6vw,52px);line-height:1.12;letter-spacing:-.02em}
.pos-statement strong{font-weight:300;color:var(--cyan)}
.curvefam{width:100%;height:auto}
.curvefam text{font:400 10.5px var(--f-mono);fill:var(--text-2);letter-spacing:.04em}
/* categories */
.cats{display:flex;gap:var(--g)}
.cat{flex:1 1 0;display:flex;flex-direction:column;text-decoration:none;border-radius:var(--r-glass);overflow:hidden;transition:transform 600ms var(--ease),border-color 300ms}
.cat:hover{transform:translateY(-4px);border-color:rgba(110,152,190,.34)}
.cat-well{height:240px;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(55% 45% at 50% 62%,color-mix(in srgb,var(--fam) 38%,transparent),transparent 72%),radial-gradient(90% 60% at 50% 0,rgba(110,152,190,.10),transparent 70%),linear-gradient(180deg,rgba(38,108,184,.4),rgba(20,66,126,.5));overflow:hidden;border-bottom:1px solid var(--hair)}
.cat-well::after{content:"";position:absolute;inset:0;background:repeating-radial-gradient(circle at 50% 62%,transparent 0 22px,rgba(110,152,190,.04) 22px 23px);pointer-events:none}
.cat-well svg{width:150px;height:150px;position:relative;z-index:1}
.cat-body{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1}
.cat-body .idx{display:flex;justify-content:space-between}
.cat-body .read{margin-top:auto;padding-top:16px;border-top:1px solid var(--hair);display:flex;justify-content:space-between;font:400 12px/1.3 var(--f-mono);color:var(--text-2)}
.cat-body .read b{color:var(--text);font-weight:400}
/* featured */
.feat{display:flex;flex-wrap:wrap;gap:var(--g)}
.pcard{display:flex;flex-direction:column;border-radius:var(--r-glass);overflow:hidden;text-decoration:none;transition:transform 600ms var(--ease),border-color 300ms}
.pcard:hover{transform:translateY(-4px);border-color:rgba(110,152,190,.34)}
.pcard .well{position:relative;height:260px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(60% 55% at 50% 60%,color-mix(in srgb,var(--fam,#1C6DB6) 30%,transparent),transparent 70%),linear-gradient(180deg,rgba(38,108,184,.35),rgba(17,58,112,.6));border-bottom:1px solid var(--hair)}
.pcard .well>svg{width:170px;height:170px}
.pcard .well>img,.pcard .well>video{width:100%;height:100%;object-fit:cover}
.pcard .pbody{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1}
.pcard .pbody p{font-size:15px;color:var(--text-2);line-height:1.55}
.pcard .pfoot{margin-top:auto;padding-top:14px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.pcard.big .well{height:420px}
.feat .c7,.feat .c5{flex-basis:calc(7*(100% - 11*24px)/12 + 6*24px)}
.feat .c5{flex-basis:calc(5*(100% - 11*24px)/12 + 4*24px)}
.feat .c3{flex-basis:calc(3*(100% - 11*24px)/12 + 2*24px)}
.irises{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;padding:20px}
.iris{width:62px;height:62px;border-radius:50%;overflow:hidden;border:1px solid var(--glass-b);box-shadow:0 0 0 4px rgba(110,152,190,.05)}
.iris{position:relative}.iris img{position:absolute;left:50%;top:50%;width:400%;max-width:none;height:auto;transform:translate(-50%,-37%)}.iris.n16 img{width:720%;transform:translate(-51%,-62%)}
.cartons{display:flex;align-items:flex-end;justify-content:center;gap:0;height:100%;padding:28px 10px 0}
.cartons img{height:150px;width:auto;filter:drop-shadow(0 16px 20px rgba(0,0,0,.45));margin:0 -8px}
.cartons img:nth-child(2){height:178px;position:relative;z-index:2}
/* manufacturing */
.film{border-radius:var(--r-glass);overflow:hidden;position:relative;aspect-ratio:1456/760;border:1px solid var(--glass-b);box-shadow:var(--shadow)}
.film video,.film img{width:100%;height:100%;object-fit:cover}
.film::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(20,66,126,.6));pointer-events:none}
/* about · team photo (media left / text right) */
.team-fig{position:relative;margin:0;border-radius:var(--r-glass);overflow:hidden;border:1px solid var(--glass-b);box-shadow:var(--shadow);aspect-ratio:4/3;background:var(--trench)}
.team-fig img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.team-fig::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(20,66,126,.08),transparent 28%,transparent 78%,rgba(20,66,126,.28))}
.ranges{display:flex;flex-direction:column;gap:16px}
.rpanel{padding:24px;border-radius:var(--r-glass)}
.rrow{display:flex;align-items:center;gap:16px;padding:12px 0;border-top:1px solid var(--hair)}
.rrow:first-of-type{border-top:0}
.rrow .k{flex:0 0 120px;font:400 12px/1.3 var(--f-mono);color:var(--text-2);letter-spacing:.03em}
.rrow .v{flex:0 0 170px;font:400 14px/1.3 var(--f-mono);color:var(--text)}
.rrow .scale{flex:1;height:18px;position:relative}
.rrow .scale::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--glass-b)}
.rrow .scale i{position:absolute;top:50%;height:5px;margin-top:-2px;border-radius:3px;background:linear-gradient(90deg,var(--cyan),var(--ice));box-shadow:0 0 12px rgba(28,109,182,.5)}
.quote-rd{font:300 22px/1.4 var(--f-display);letter-spacing:-.01em;color:var(--text)}
/* material lab */
.lab{border-radius:28px;padding:40px;display:flex;gap:40px;align-items:stretch;overflow:hidden}
.lab-vis{flex:0 0 46%;position:relative;border-radius:16px;background:radial-gradient(70% 60% at 50% 30%,rgba(28,109,182,.10),transparent 70%),linear-gradient(180deg,rgba(17,58,112,.2),rgba(17,58,112,.7));border:1px solid var(--hair);min-height:440px;overflow:hidden}
.lab-vis svg{width:100%;height:100%;position:absolute;inset:0}
.lab-side{flex:1;display:flex;flex-direction:column;gap:20px}
.mat-tabs{display:flex;flex-wrap:wrap;gap:8px}
.mat-tabs button{height:36px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--glass-b);background:transparent;cursor:pointer;font:400 13px/1 var(--f-text);color:var(--text-2);transition:all 240ms}
.mat-tabs button:hover{color:var(--text);border-color:rgba(110,152,190,.34)}
.mat-tabs button[aria-pressed="true"]{background:var(--cyan);border-color:var(--cyan);color:var(--cyan-ink)}
.mat-read{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--hair)}
.mat-read>div{flex:1 1 33%;padding:14px 16px 14px 0;border-bottom:1px solid var(--hair)}
.mat-read dt{font:400 11px/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.mat-read dd{font:200 30px/1.15 var(--f-display);letter-spacing:-.02em;margin-top:4px}
.mat-read dd small{font:400 12px var(--f-mono);color:var(--cyan);margin-left:4px;letter-spacing:0}
.bars{display:flex;flex-direction:column;gap:6px}
.bars .bh{display:flex;justify-content:space-between;font:400 11px/1 var(--f-mono);color:var(--text-2);letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
.bar-row{display:flex;align-items:center;gap:16px;font:400 13px/1 var(--f-text);color:var(--text-2);cursor:pointer;border-radius:6px;padding:5px 0;transition:color 240ms}
.bar-row:hover{color:var(--text)}
.bar-row .nm{flex:0 0 112px}
.bar-row .tr{flex:1;height:6px;position:relative;border-radius:3px;background:var(--hair);overflow:hidden}
.bar-row .tr i{position:absolute;inset:0;display:block;border-radius:3px;transform-origin:left;transition:transform 700ms var(--ease),background 300ms}
.bar-row .tr i.w{background:rgba(28,109,182,.4)}
.bar-row.is-on{color:var(--text)}
.bar-row.is-on .tr i.w{background:var(--cyan)}
.bar-row .val{flex:0 0 108px;display:flex;justify-content:space-between;font:400 12px/1 var(--f-mono)}
.bar-row .val b{font-weight:500;color:inherit}
.bar-row .val em{font-style:normal;color:var(--text-3);min-width:42px;text-align:right}
.legend{display:flex;gap:44px;font:400 11px/1 var(--f-mono);color:var(--text-2)}
.bars .bh .legend{flex:0 0 108px;gap:0;justify-content:space-between}
/* light surface: re-points the shared tokens so every component inside adapts */
.sec-light{--text:#0F2A4A;--text-2:#46607A;--text-3:#5B7690;--glass:#fff;--glass-2:#F3F8FC;--glass-b:rgba(15,42,74,.14);--hair:rgba(15,42,74,.12);--cyan:#0A8CA8;--ice:#1B4F86;--flag:#8A5A00;color:var(--text);background:linear-gradient(180deg,#EAF2F9 0,#F4F8FC 14%,#F4F8FC 86%,#EAF2F9 100%);position:relative}
.sec-light::before,.sec-light::after{content:"";position:absolute;left:0;right:0;height:140px;pointer-events:none;z-index:0}
.sec-light::before{top:-139px;background:linear-gradient(180deg,transparent,#EAF2F9)}
.sec-light::after{bottom:-139px;background:linear-gradient(0deg,transparent,#EAF2F9)}
.sec-light>.wrap{z-index:1}
/* partners carousel */
.pt{display:flex;align-items:center;gap:16px}
.pt-viewport{flex:1;min-width:0;overflow:hidden}
.pt-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain;padding:4px 2px 6px;-webkit-overflow-scrolling:touch}
.pt-track::-webkit-scrollbar{display:none}
.pt-item{flex:0 0 calc((100% - 4*20px)/5);scroll-snap-align:start;display:flex;flex-direction:column;gap:12px;min-width:0}
.pt-logo{height:108px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:14px;padding:18px 22px;border:1px solid var(--hair)}
.pt-logo img{width:100%;height:100%;object-fit:contain}
.pt-logo.on-dark{background:#14295a}
.pt-name{font:400 12px/1.4 var(--f-mono);letter-spacing:.02em;color:var(--text-2);text-align:center;text-wrap:balance}
.pt-btn[disabled]{opacity:.35;cursor:default}
.pt-foot{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:20px;flex-wrap:wrap}
.pt-note{margin:0;text-align:center}
.pt-track.pt-auto{scroll-snap-type:none;scroll-behavior:auto}
@media (max-width:1100px){.pt-item{flex-basis:calc((100% - 3*20px)/4)}}
@media (max-width:900px){.pt-item{flex-basis:calc((100% - 2*20px)/3)}}
@media (max-width:720px){.pt{flex-wrap:wrap;justify-content:center}.pt-viewport{order:-1;flex:0 0 100%}.pt-item{flex-basis:calc((100% - 14px)/2)}.pt-track{gap:14px}.pt-logo{height:92px;padding:14px 16px}}
@media (prefers-reduced-motion:reduce){.pt-track{scroll-behavior:auto}}
/* company */
.co-img{height:520px;border-radius:var(--r-glass)}
.addr{font:400 13px/1.7 var(--f-mono);color:var(--text-2)}
address.addr{font-style:normal;overflow-wrap:anywhere}
.ftr-addr strong{display:block;font:500 11px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ice);margin-bottom:4px}
.ftr-addr+.ftr-addr{margin-top:18px}
/* capabilities */
.caps{display:flex;flex-direction:column}
.cap{display:flex;align-items:center;gap:32px;padding:28px 0;border-top:1px solid var(--hair)}
.cap:last-child{border-bottom:1px solid var(--hair)}
.cap .n{flex:0 0 40px;font:400 12px var(--f-mono);color:var(--text-3)}
.cap .ico{flex:0 0 72px;height:72px}
.cap .ico svg{width:72px;height:72px}
.cap h3{flex:0 0 38%}
.cap p{flex:1;color:var(--text-2);font-size:15px}
.svc-q{padding:32px;border-radius:var(--r-glass)}
/* collaboration + reviews */
.pend-cards{display:flex;gap:var(--g)}
.pend{flex:1;min-height:260px;padding:24px;border-radius:var(--r-glass);border:1px dashed rgba(110,152,190,.26);background:linear-gradient(180deg,rgba(110,152,190,.04),rgba(110,152,190,.01));display:flex;flex-direction:column;gap:14px}
.pend>.flag,.feat-list .flag,.opt .flag{align-self:flex-start}
.pend .ring{width:56px;height:56px;border-radius:50%;border:1px dashed rgba(110,152,190,.3);display:flex;align-items:center;justify-content:center}
.pend .ring svg{width:26px;height:26px}
.rev{flex:1;min-height:220px;padding:24px;border-radius:var(--r-glass);border:1px dashed rgba(110,152,190,.24);display:flex;flex-direction:column;gap:12px}
.rev .skel{height:8px;border-radius:4px;background:rgba(110,152,190,.06)}
.rev .qm{font:200 64px/0.6 var(--f-display);color:rgba(110,152,190,.18);height:30px}
.rev .who{margin-top:auto;display:flex;align-items:center;gap:10px}
.rev .who i{width:32px;height:32px;border-radius:50%;border:1px dashed rgba(110,152,190,.3)}
/* ---------- reviews carousel (Google reviews, auto-scrolling marquee) ---------- */
:root{--star:#F6C75A}
.rv-meta{display:flex;align-items:center;justify-content:flex-end;gap:20px;flex-wrap:wrap}
.rv-score{display:flex;align-items:center;gap:10px;font:400 13px var(--f-mono);color:var(--text-2)}
.rv-score b{font:200 44px/1 var(--f-display);color:var(--text);letter-spacing:-.02em}
.rv-stars,.rv-st{display:inline-flex;gap:2px;color:var(--star)}
.rv-stars svg,.rv-st svg{width:14px;height:14px}
.rv-st svg.off{opacity:.22}
.rv{--rw:clamp(280px,84vw,380px);position:relative}
.rv-viewport{overflow:hidden;touch-action:pan-y;cursor:grab;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.rv-viewport.is-drag{cursor:grabbing;user-select:none;-webkit-user-select:none}
.rv-track{display:flex;gap:20px;padding:6px 0 10px;will-change:transform}
.rv-card{flex:0 0 var(--rw);width:var(--rw);height:304px;padding:24px;display:flex;flex-direction:column;gap:14px;border-radius:var(--r-glass);border:1px solid var(--glass-b);background:linear-gradient(160deg,rgba(110,152,190,.10),rgba(110,152,190,.04) 55%),rgba(27,82,150,.55);box-shadow:0 12px 32px -16px rgba(1,10,26,.6),inset 0 1px 0 rgba(255,255,255,.08)}
.rv-top{display:flex;align-items:center;gap:12px}
.rv-av{flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:radial-gradient(circle at 30% 25%,rgba(28,109,182,.5),rgba(28,109,182,.12));border:1px solid var(--glass-b);font:300 18px/1 var(--f-display);color:var(--text)}
.rv-id{display:flex;flex-direction:column;min-width:0;flex:1}
.rv-id strong{font:500 15px/1.3 var(--f-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rv-id small{font:400 10.5px/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.rv-tx{font:400 15px/1.6 var(--f-text);color:var(--text-2);display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.rv-more{margin-top:auto;align-self:flex-start;background:none;border:0;padding:6px 0;cursor:pointer;font:500 14px/1 var(--f-text);color:var(--cyan);border-bottom:1px solid rgba(28,109,182,.35)}
.rv-more:hover{border-bottom-color:var(--cyan)}
.rv-ctl{display:flex;align-items:center;gap:10px;margin-top:24px;flex-wrap:wrap}
.rv-btn{width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--glass-b);background:var(--glass);cursor:pointer;transition:background 240ms,border-color 240ms}
.rv-btn:hover{background:var(--glass-2);border-color:rgba(110,152,190,.34)}
.rv-btn svg{width:16px;height:16px}
.rv-pp{height:44px;padding:0 18px;border-radius:var(--r-pill);border:1px solid var(--glass-b);background:var(--glass);cursor:pointer;font:500 12px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ice)}
.rv-pp:hover{background:var(--glass-2)}
.rv-ctl .note-src{margin-left:8px}
.rv-dlg{color-scheme:dark;width:min(640px,calc(100vw - 32px));max-height:min(80vh,760px);padding:0;border:1px solid var(--glass-b);border-radius:var(--r-glass);background:rgba(20,66,126,.96);color:var(--text);box-shadow:var(--shadow);overflow:auto}
.rv-dlg::backdrop{background:rgba(17,58,112,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.rv-dlg-in{padding:28px;display:flex;flex-direction:column;gap:20px;position:relative}
.rv-dlg .rv-top{padding-right:44px}
.rv-x{position:absolute;top:20px;right:20px;width:36px;height:36px;border-radius:50%;border:1px solid var(--glass-b);background:var(--glass);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.rv-x svg{width:14px;height:14px}
.rv-full{font:400 16px/1.7 var(--f-text);color:var(--text-2);white-space:pre-line}
@media (max-width:900px){.rv-meta{justify-content:flex-start}}
@media (max-width:480px){.rv-card{height:324px}.rv-top{flex-wrap:wrap;row-gap:10px}.rv-st{order:3;flex-basis:100%}}
@media (prefers-reduced-motion:reduce){.rv-viewport{cursor:auto}}
/* enquiry */
.enq{border-radius:32px;padding:88px 72px;overflow:hidden;display:flex;align-items:flex-end;justify-content:space-between;gap:48px;background:radial-gradient(70% 120% at 85% 120%,rgba(28,109,182,.28),transparent 60%),radial-gradient(60% 80% at 10% -20%,rgba(38,108,184,.8),transparent 70%),rgba(27,82,150,.55)}
.enq>div:last-child{flex:0 0 auto}
.enq .waves{inset:auto 0 0 0;height:140px;opacity:.5}
.enq h2{max-width:760px}
/* footer */
.ftr{background:linear-gradient(180deg,rgba(17,58,112,0),var(--abyss) 120px);padding:96px 0 48px;border-top:1px solid var(--hair);position:relative}
.ftr .cols{display:flex;gap:var(--g);flex-wrap:wrap}
.ftr h3{font:500 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-bottom:16px}
.ftr li{margin-bottom:10px}
.ftr a{text-decoration:none;color:var(--text-2);font-size:14px}
.ftr a:hover{color:var(--cyan)}
.ftr .base{display:flex;justify-content:space-between;gap:16px;margin-top:72px;padding-top:24px;border-top:1px solid var(--hair);font:400 12px/1.4 var(--f-mono);color:var(--text-3);flex-wrap:wrap}
/* =====================================================================
PAGES (products / detail / care)
===================================================================== */
.page{background:linear-gradient(180deg,var(--surface) 0,var(--current) 900px,var(--trench) 2200px,var(--deep) 3600px)}
.page-hero{padding:168px 0 72px;position:relative;overflow:hidden}
.page-hero .caustic{inset:-30% -10% 20% 20%}
.crumbs{display:flex;gap:8px;font:400 12px/1 var(--f-mono);color:var(--text-2);letter-spacing:.04em;margin-bottom:28px}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--cyan)}
.filter{display:flex;gap:8px;flex-wrap:wrap}
.filter button{height:40px;padding:0 18px;border-radius:var(--r-pill);border:1px solid var(--glass-b);background:var(--glass);color:var(--text-2);cursor:pointer;font:400 14px/1 var(--f-text);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.filter button[aria-pressed="true"]{background:var(--cyan);color:var(--cyan-ink);border-color:var(--cyan)}
.filter button span{font:400 11px var(--f-mono);margin-left:6px;opacity:.75}
.group{padding:56px 0 24px}
.group-h{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding-bottom:24px;margin-bottom:32px;border-bottom:1px solid var(--hair);flex-wrap:wrap}
.group-h .chips{justify-content:flex-end}
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g)}
.pgrid .pcard .well{height:200px}
.pgrid .pcard .well>svg{width:132px;height:132px}
.pgrid .pcard .pbody{padding:20px;gap:8px}
.pgrid .pcard .pbody p{font-size:14px}
.pgrid .pcard.star{grid-column:span 2}
.pgrid .pcard.star .well{height:260px}
.star-mark{color:var(--cyan)}
.note-src{font:400 11px/1.4 var(--f-mono);color:var(--text-3)}
/* detail hero */
.dhero{padding:150px 0 96px;position:relative;overflow:hidden}
.optic-well{position:relative;border-radius:28px;aspect-ratio:1/0.86;overflow:hidden;background:radial-gradient(60% 55% at 50% 50%,rgba(28,109,182,.18),transparent 70%),radial-gradient(120% 90% at 50% 0,rgba(110,152,190,.08),transparent 60%),linear-gradient(180deg,rgba(38,108,184,.5),rgba(17,58,112,.6))}
.optic-well svg.axis{position:absolute;inset:0;width:100%;height:100%}
.t1{display:flex;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.t1>div{flex:1;padding:16px 16px 16px 0}
.t1>div+div{padding-left:16px;border-left:1px solid var(--hair)}
.t1 dt{font:400 11px/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.t1 dd{font:200 30px/1.1 var(--f-display);letter-spacing:-.02em;margin-top:6px}
.t1 dd small{font:400 12px var(--f-mono);color:var(--cyan);margin-left:4px;letter-spacing:0}
.feat-list{display:flex;flex-wrap:wrap;gap:var(--g)}
.feat-list li{flex:1 1 calc(33.333% - 16px);padding:24px;border-radius:16px;display:flex;flex-direction:column;gap:14px;min-height:150px}
.feat-list li .n{font:400 11px var(--f-mono);color:var(--cyan)}
.feat-list li.is-flagged .d-22{color:var(--text-3)}
/* spec */
.spec{border-radius:var(--r-glass);overflow:hidden}
.spec details{border-top:1px solid var(--hair)}
.spec details:first-of-type{border-top:0}
.spec summary{list-style:none;display:flex;align-items:center;gap:16px;padding:22px 28px;cursor:pointer}
.spec summary::-webkit-details-marker{display:none}
.spec summary .pm{margin-left:auto;width:28px;height:28px;border-radius:50%;border:1px solid var(--glass-b);position:relative;flex:0 0 auto;transition:background 240ms}
.spec summary .pm::before,.spec summary .pm::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1px;background:var(--ice);transform:translate(-50%,-50%)}
.spec summary .pm::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform 300ms var(--ease)}
.spec details[open] summary .pm::after{transform:translate(-50%,-50%) rotate(0)}
.spec details[open] summary .pm{background:rgba(28,109,182,.12);border-color:rgba(28,109,182,.5)}
.spec summary .cnt{font:400 11px var(--f-mono);color:var(--text-3)}
.spec table{width:100%;border-collapse:collapse;font-size:14px}
.spec .tbl{padding:0 28px 20px}
.spec tr{border-top:1px solid var(--hair)}
.spec th{text-align:left;font:400 12px/1.4 var(--f-mono);letter-spacing:.03em;color:var(--text-2);padding:13px 16px 13px 0;width:34%;vertical-align:top}
.spec td{font:400 14px/1.5 var(--f-mono);color:var(--text);padding:13px 0;vertical-align:top}
.spec td .u{color:var(--text-3);margin-left:4px}
.spec tr:nth-child(even){background:rgba(110,152,190,.02)}
.spec .on-req{color:var(--text-3)}
.spec-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 28px;border-top:1px solid var(--hair);background:rgba(17,58,112,.3);flex-wrap:wrap}
.keyoptics{padding:28px;border-radius:var(--r-glass);display:flex;flex-direction:column;gap:16px}
.keyoptics svg{width:100%;height:auto}
.keyoptics svg text{font:400 10.5px var(--f-mono);fill:var(--text-2)}
.disc{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:12px;border:1px solid rgba(242,196,107,.28);background:rgba(242,196,107,.05);font-size:14px;color:var(--text-2)}
.dl{display:flex;align-items:center;gap:20px;padding:22px 24px;border-radius:16px;text-decoration:none;transition:border-color 240ms,background 240ms}
.dl:hover{border-color:rgba(28,109,182,.5)}
.dl .ic{flex:0 0 48px;height:48px;border-radius:12px;border:1px solid var(--glass-b);display:flex;align-items:center;justify-content:center;color:var(--cyan)}
.dl .ic svg{width:20px;height:20px}
.dl .meta{font:400 12px var(--f-mono);color:var(--text-3)}
.dl .go{margin-left:auto;color:var(--cyan);font:500 14px var(--f-text)}
.rel{display:flex;gap:var(--g)}
.rel .pcard{flex:1}
.rel .pcard .well{height:180px}
.rel .pcard .well>svg{width:120px;height:120px}
/* KG hero pin */
.kg-pin{height:260vh;max-height:2700px;position:relative}
.kg-stage{position:sticky;top:0;height:100vh;min-height:720px;max-height:1000px;overflow:hidden;display:flex;align-items:center}
.kg-stage .wrap{display:flex;gap:var(--g);align-items:center;width:100%}
.kg-bg{position:absolute;inset:0;background:radial-gradient(70% 70% at 70% 55%,rgba(28,109,182,.14),transparent 60%),linear-gradient(180deg,var(--surface),var(--current) 60%,var(--trench))}
.kg-dim{position:absolute;inset:0;background:var(--deep);opacity:0;pointer-events:none}
.kg-copy{position:relative;z-index:3}
.kg-logo{height:46px;width:auto}
.kg-vis{position:relative;aspect-ratio:760/560}
.kg-vis svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.kg-vis text{font:400 12px var(--f-mono);fill:var(--text-2);letter-spacing:.03em}
.kg-vis text.v{font:300 22px var(--f-display);fill:var(--text);letter-spacing:-.01em}
.kg-steps{position:absolute;left:0;bottom:-6px;display:flex;gap:18px;font:400 11px var(--f-mono);letter-spacing:.06em;color:var(--text-3)}
.kg-steps span{display:flex;align-items:center;gap:8px;transition:color 300ms}
.kg-steps span i{width:18px;height:1px;background:currentColor}
.kg-steps span.is-on{color:var(--cyan)}
.opts{display:flex;flex-wrap:wrap;gap:12px}
.opt{flex:1 1 calc(25% - 12px);display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:16px;min-height:160px}
.opt svg{width:64px;height:40px}
.variants{display:flex;gap:var(--g)}
.var{flex:1;border-radius:var(--r-glass);overflow:hidden}
.var .vw{height:170px;position:relative;background:linear-gradient(180deg,#e9f4f8,#c9dde6);display:flex;align-items:center;justify-content:center;overflow:hidden}
.var .vw img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.var .vb{padding:18px 20px}
.zones-tbl{display:flex;flex-direction:column}
.zr{display:flex;align-items:center;gap:16px;padding:16px 0;border-top:1px solid var(--hair)}
.zr .sw{flex:0 0 14px;height:14px;border-radius:50%;border:1px solid var(--ice)}
.zr .zn{flex:1;font:300 20px var(--f-display)}
.zr .zv{font:400 14px var(--f-mono);color:var(--text)}
.zr .zs{font:400 11px var(--f-mono);color:var(--text-3);flex:0 0 120px;text-align:right}
.res{display:flex;gap:var(--g);flex-wrap:wrap}
.res>*{flex:1 1 calc(50% - 12px)}
/* lens care */
.compat{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.seg{display:inline-flex;padding:4px;border-radius:var(--r-pill);gap:4px}
.seg button{height:40px;padding:0 20px;border-radius:var(--r-pill);border:0;background:transparent;color:var(--text-2);cursor:pointer;font:500 14px/1 var(--f-text);display:inline-flex;align-items:center;gap:8px}
.seg button svg{width:16px;height:16px}
.seg button[aria-pressed="true"]{background:var(--cyan);color:var(--cyan-ink)}
.matrix{border-radius:var(--r-glass);overflow:hidden}
.matrix table{width:100%;border-collapse:collapse}
.matrix th,.matrix td{padding:14px 20px;text-align:left;border-top:1px solid var(--hair);font-size:14px}
.matrix thead th{border-top:0;font:500 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);background:rgba(17,58,112,.35)}
.matrix td.c,.matrix th.c{text-align:center;width:110px}
.matrix tr{transition:opacity 400ms var(--ease),background 300ms}
.matrix tr.is-dim{opacity:.32}
.matrix tr.is-hit{background:rgba(28,109,182,.06)}
.dot{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px rgba(28,109,182,.6)}
.dot.o{background:transparent;border:1px solid var(--text-3);box-shadow:none}
.dot.h{background:linear-gradient(90deg,var(--cyan) 50%,transparent 50%);border:1px solid var(--cyan);box-shadow:none}
.care-grid{display:flex;flex-wrap:wrap;gap:var(--g)}
.care{flex:1 1 calc(33.333% - 16px);border-radius:var(--r-glass);overflow:hidden;display:flex;flex-direction:column;transition:opacity 400ms var(--ease),transform 400ms var(--ease),border-color 300ms}
.care.is-dim{opacity:.3;transform:scale(.985)}
.care.is-hit{border-color:rgba(28,109,182,.55)}
.care .cw{height:280px;position:relative;display:flex;align-items:flex-end;justify-content:center;padding-top:28px;background:radial-gradient(50% 40% at 50% 85%,color-mix(in srgb,var(--fam) 34%,transparent),transparent 70%),linear-gradient(180deg,rgba(38,108,184,.3),rgba(17,58,112,.5));border-bottom:1px solid var(--hair);overflow:hidden}
.care .cw img{height:240px;width:auto;max-width:80%;object-fit:contain;filter:drop-shadow(0 18px 22px rgba(0,0,0,.45));margin-bottom:-6px}
.care .cw .crop{height:240px;width:120px;overflow:hidden;margin-bottom:-6px}
.care .cw .crop img{height:auto;width:120px;max-width:none}
.care .cb{padding:22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.care .fits{display:flex;gap:6px;flex-wrap:wrap}
.care details{margin-top:auto;border-top:1px solid var(--hair);padding-top:4px}
.care summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;padding:10px 0;font:500 13px var(--f-text);color:var(--ice)}
.care summary::-webkit-details-marker{display:none}
.care summary::after{content:"+";font:300 20px/1 var(--f-display);color:var(--cyan)}
.care details[open] summary::after{content:"–"}
.care details ul{display:flex;flex-direction:column;gap:8px;padding:4px 0 12px}
.care details li{font-size:13px;line-height:1.5;color:var(--text-2);padding-left:14px;position:relative}
.care details li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--flag)}
.care details li.dir::before{background:var(--cyan)}
.care details .wh{font:500 10.5px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-top:6px}
.pro-band{border-radius:28px;padding:40px;background:repeating-linear-gradient(135deg,rgba(110,152,190,.025) 0 1px,transparent 1px 12px),rgba(17,58,112,.55);border:1px solid rgba(110,152,190,.22)}
.pro-band .care{flex:1 1 calc(50% - 12px)}
.pro-band .care .cw{--fam:#6E98BE}
/* =====================================================================
MOBILE BOARD
===================================================================== */
#mobile{background:#0d1620;padding:56px 20px 96px}
.mb-intro{max-width:1100px;margin:0 auto 40px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;color:#cfdae3;flex-wrap:wrap}
.mb-intro h1{font:300 32px/1.1 var(--f-display);letter-spacing:-.02em;color:#fff}
.mb-intro p{font:400 13px/1.5 var(--f-mono);max-width:420px;color:#9fb0bf}
.mb-row{display:flex;justify-content:center;gap:56px;align-items:flex-start;flex-wrap:wrap}
.device{width:390px;flex:0 0 390px;border-radius:52px;padding:12px;background:#05070a;box-shadow:0 0 0 1px #2a3440,0 40px 80px rgba(0,0,0,.6)}
.screen{border-radius:40px;overflow:clip;position:relative;background:linear-gradient(180deg,var(--surface) 0,var(--current) 1400px,var(--trench) 3600px,var(--deep) 6000px)}
.sbar{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 28px 0 32px;font:600 15px/1 -apple-system,system-ui,sans-serif;color:#fff;position:relative;z-index:5}
.sbar .isl{position:absolute;left:50%;top:11px;width:120px;height:34px;margin-left:-60px;background:#000;border-radius:20px}
.sbar .sig{display:flex;gap:6px;align-items:center}
.sbar .sig i{display:block;width:17px;height:11px;border-radius:3px;border:1.5px solid #fff;position:relative}
.sbar .sig i::after{content:"";position:absolute;inset:1.5px;right:4px;background:#fff;border-radius:1px}
.m-hdr{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:rgba(27,82,150,.55);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid var(--hair)}
.m-hdr .logo-plate{height:38px;padding:0 12px}
.m-hdr .logo-plate img{height:18px}
.m-menu{width:44px;height:44px;border-radius:50%;border:1px solid var(--glass-b);background:var(--glass);display:flex;align-items:center;justify-content:center;cursor:pointer}
.m-menu svg{width:18px;height:18px}
.m-pad{padding:0 16px}
.m-hero{position:relative;padding:20px 0 36px;overflow:hidden}
.m-hero .m-optic{position:relative;height:300px;margin:0 -16px 8px}
.m-hero .m-optic .h-panel{left:6%;top:6%;width:62%;height:84%}
.m-hero .m-optic .m-lens{position:absolute;right:-8%;top:2%;width:78%;aspect-ratio:1}
.m-hero h1{font:200 44px/1.03 var(--f-display);letter-spacing:-.03em;margin:14px 0 16px}
.m-hero .lead{font-size:16px}
.m-ctas{display:flex;flex-direction:column;gap:10px;margin-top:24px}
.m-ctas .btn{justify-content:center}
.m-sec{padding-top:56px;padding-bottom:56px;position:relative}
.m-sec .sec-label{margin-bottom:20px}
.m-cats{display:flex;flex-direction:column;gap:12px}
.m-cat{display:flex;align-items:center;gap:16px;padding:14px;border-radius:16px;text-decoration:none}
.m-cat .fam-well{flex:0 0 76px;height:76px}
.m-cat .fam-well svg{width:54px;height:54px}
.m-cat div{flex:1}
.m-cat strong{display:block;font:300 20px/1.2 var(--f-display)}
.m-cat small{font:400 11px var(--f-mono);color:var(--text-2)}
.m-cards{display:flex;flex-direction:column;gap:14px}
.m-cards .pcard .well{height:200px}
.m-cards .pcard .well>svg{width:130px;height:130px}
.m-cards .pcard .pbody{padding:18px}
.m-acc{border-radius:16px;overflow:hidden}
.m-acc details{border-top:1px solid var(--hair)}
.m-acc details:first-child{border-top:0}
.m-acc summary{list-style:none;padding:16px 18px;display:flex;justify-content:space-between;align-items:center;font:500 15px var(--f-text);cursor:pointer}
.m-acc summary::-webkit-details-marker{display:none}
.m-acc summary::after{content:"+";font:300 22px/1 var(--f-display);color:var(--cyan)}
.m-acc details[open] summary::after{content:"–"}
.m-acc .rrow{padding:10px 18px;gap:10px}
.m-acc .rrow .k{flex:0 0 96px;font-size:11px}
.m-acc .rrow .v{flex:1;font-size:13px}
.m-sticky{position:sticky;bottom:14px;z-index:30;display:flex;justify-content:center;padding:0 16px;margin-top:-36px;pointer-events:none}
.m-sticky .btn{pointer-events:auto;width:100%;justify-content:center;height:52px;box-shadow:0 12px 30px -6px rgba(0,0,0,.55),0 0 0 6px rgba(20,66,126,.35)}
.m-ftr{padding:40px 16px 96px;background:var(--abyss);border-top:1px solid var(--hair);font-size:13px;color:var(--text-2)}
.mb-side{display:flex;flex-direction:column;gap:28px;align-items:flex-start;flex:0 0 300px}
.mb-side .device{transform:scale(.78);transform-origin:top left;margin-bottom:-190px}
.mb-cap{font:400 12px/1.5 var(--f-mono);color:#9fb0bf;max-width:300px}
.mb-cap b{color:#fff;font-weight:500}
.m-menu-sheet{min-height:780px;padding:8px 20px 28px;display:flex;flex-direction:column;gap:6px;background:radial-gradient(80% 50% at 80% 0,rgba(28,109,182,.18),transparent 60%),rgba(20,66,126,.96)}
.m-menu-sheet .mi{display:flex;align-items:center;justify-content:space-between;padding:18px 4px;border-bottom:1px solid var(--hair);font:200 32px/1 var(--f-display);letter-spacing:-.02em;text-decoration:none}
.m-menu-sheet .mi small{font:400 11px var(--f-mono);color:var(--text-3);letter-spacing:.08em}
.m-menu-sheet .sub{display:flex;flex-direction:column;gap:8px;padding:12px 0 8px 4px}
.m-menu-sheet .sub a{display:flex;align-items:center;gap:12px;text-decoration:none;font:400 16px var(--f-text);color:var(--text-2)}
.m-menu-sheet .sub a i{width:8px;height:8px;border-radius:50%;background:var(--fam)}
/* =====================================================================
DESIGN SYSTEM + STORYBOARDS
===================================================================== */
.ds{background:var(--deep)}
.ds-sec{padding:72px 0;border-top:1px solid var(--hair)}
.ds-sec h2{margin-bottom:8px}
.ds-sec>.wrap>.body-2{margin-bottom:32px;max-width:640px}
.sw-row{display:flex;flex-wrap:wrap;gap:16px}
.sw{flex:1 1 110px;border-radius:12px;overflow:hidden;border:1px solid var(--hair)}
.sw .c{height:110px}
.sw .t{padding:12px 14px;display:flex;flex-direction:column;gap:3px;font:400 12px/1.35 var(--f-mono);color:var(--text-2)}
.sw .t b{font:500 13px var(--f-text);color:var(--text)}
.ts-row{display:flex;align-items:baseline;gap:32px;padding:18px 0;border-top:1px solid var(--hair)}
.ts-row .meta{flex:0 0 220px;font:400 12px/1.5 var(--f-mono);color:var(--text-2)}
.sp-row{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap}
.sp{display:flex;flex-direction:column;gap:8px;align-items:flex-start;font:400 11px var(--f-mono);color:var(--text-2)}
.sp i{display:block;background:var(--cyan);opacity:.75;height:24px}
.rad-row{display:flex;gap:24px;flex-wrap:wrap}
.rad{width:150px;height:110px;border:1px solid var(--glass-b);background:var(--glass);display:flex;align-items:flex-end;padding:12px;font:400 11px var(--f-mono);color:var(--text-2)}
.cmp-row{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start}
.cmp{display:flex;flex-direction:column;gap:12px}
.cmp>.tag{color:var(--text-3)}
.field{display:flex;flex-direction:column;gap:8px;width:360px}
.field label{font:500 13px var(--f-text)}
.field input,.field select,.field textarea{height:48px;padding:0 16px;border-radius:12px;border:1px solid var(--glass-b);background:rgba(17,58,112,.5);color:var(--text);font:400 15px var(--f-text)}
.field textarea{height:96px;padding:12px 16px;resize:none}
.field input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 4px rgba(28,109,182,.15)}
.field .hint{font:400 12px var(--f-mono);color:var(--text-3)}
.field.err input{border-color:#FF8A8A}
.field.err .hint{color:#FFB0B0}
.mo-grid{display:flex;gap:var(--g);flex-wrap:wrap}
.mo{flex:1 1 calc(25% - 18px);padding:22px;border-radius:16px;display:flex;flex-direction:column;gap:12px}
.mo svg{width:100%;height:70px}
.mo .v{font:400 12px var(--f-mono);color:var(--cyan)}
.sb{background:#0a1520;padding:96px 0 96px;min-height:100vh}.sb .wrap{max-width:1600px;padding:0 48px}
.sb-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:40px;flex-wrap:wrap}
.sb-frames{display:flex;gap:20px}
.sb-f{flex:1;min-width:0}
.sb-f .fh{display:flex;justify-content:space-between;font:400 12px var(--f-mono);color:var(--text-2);margin-bottom:10px;letter-spacing:.04em}
.sb-f .fh b{color:var(--text);font-weight:500}
.mini{position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;border:1px solid var(--glass-b);background:linear-gradient(180deg,#3F8AD2,var(--surface) 30%,var(--current))}
.mini .dimx{position:absolute;inset:0;background:var(--deep)}
.mini .mcopy{position:absolute;left:6%;top:30%;width:38%}
.mini .mcopy .l1{font:200 22px/1.02 var(--f-display);letter-spacing:-.02em}
.mini .mcopy .l2{height:5px;border-radius:3px;background:rgba(110,152,190,.25);margin-top:10px}
.mini .mcopy .l3{display:flex;gap:6px;margin-top:12px}
.mini .mcopy .l3 i{width:56px;height:16px;border-radius:9px;background:var(--cyan)}
.mini .mcopy .l3 i+i{background:var(--glass-2);border:1px solid var(--glass-b)}
.mini .mnav{position:absolute;top:5%;left:50%;width:36%;height:7%;margin-left:-18%;border-radius:99px;background:rgba(110,152,190,.1);border:1px solid var(--glass-b)}
.mini svg.ms{position:absolute;inset:0;width:100%;height:100%}
.co{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--flag);color:#2a1a00;font:600 11px/22px var(--f-mono);text-align:center;box-shadow:0 0 0 3px rgba(242,196,107,.25);z-index:5}
.anno{margin-top:16px;display:flex;flex-direction:column;gap:10px}
.anno li{display:flex;gap:10px;font-size:13px;line-height:1.5;color:var(--text-2)}
.anno li b{flex:0 0 20px;height:20px;border-radius:50%;background:var(--flag);color:#2a1a00;font:600 10px/20px var(--f-mono);text-align:center}
.anno li strong{color:var(--text);font-weight:500}
.sb-meta{display:flex;gap:var(--g);margin-top:48px}
.sb-meta>div{flex:1;padding:24px;border-radius:16px}
.timeline{position:relative;height:64px;margin-top:40px;border-radius:12px;border:1px solid var(--hair);overflow:hidden}
.timeline .tseg{position:absolute;top:0;bottom:0;display:flex;align-items:center;padding:0 12px;font:400 11px var(--f-mono);color:var(--text);border-right:1px solid var(--hair);background:rgba(28,109,182,.08)}
/* storyboard clones */
.mini-host{position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;border:1px solid var(--glass-b);background:var(--deep)}
.mini-scale{position:absolute;left:0;top:0;width:1440px;height:900px;transform-origin:0 0;--m:96px;overflow:hidden;pointer-events:none}
.mini-scale .hero-stage,.mini-scale .kg-stage{position:absolute;inset:0;height:900px;min-height:0;max-height:none}
.mini-scale .hdr{position:absolute}
.mini-scale .h-copy h1,.mini-scale .h-copy h2{font-size:78px}.mini-scale .d-76{font-size:76px}.mini-scale .h-optic{height:700px}
.mini-scale .capsule{display:flex}.mini-scale .menu-btn{display:none}
.mini-host .co{z-index:6}
/* ---------- WhatsApp assist ----------
Placement (Refero: Mailchimp contact + DocuSign company pages): chat launchers sit fixed bottom-right, in the thumb
zone. Resting state is the 56px icon-only circle (DocuSign pattern), which fits the 96px right gutter at 1440 so it never
covers content; the label expands leftwards on hover/focus. The depth rail owns the left margin.
--dock is the 36px mockup toolbar; set it to 0 when the toolbar is removed for production. */
:root{--wa:#25D366;--dock:0px}
.wa{position:fixed;z-index:180;right:max(20px,env(safe-area-inset-right));bottom:calc(var(--dock) + 20px + env(safe-area-inset-bottom,0px));display:inline-flex;align-items:center;height:56px;padding:6px;border-radius:var(--r-pill);text-decoration:none;color:var(--text);background:rgba(27,82,150,.58);border:1px solid var(--glass-b);-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);box-shadow:var(--shadow);opacity:0;transform:translateY(12px);transition:opacity 500ms var(--ease),transform 500ms var(--ease),background 300ms,border-color 300ms}
.wa[hidden]{display:none}
.wa.is-ready{opacity:1;transform:none}
.wa:hover,.wa:focus-visible{background:rgba(27,82,150,.86);border-color:rgba(110,152,190,.34)}
.wa-ic,.m-wa{background:var(--wa);color:#fff}
.wa-ic{flex:0 0 42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px -6px rgba(37,211,102,.7)}
.wa-ic svg{width:24px;height:24px}
.wa-lbl{display:flex;flex-direction:column;gap:2px;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;padding:0;font:500 14px/1.2 var(--f-text);transition:max-width 420ms var(--ease),padding 420ms var(--ease),opacity 300ms}
.wa-lbl small{font:400 10.5px/1.2 var(--f-mono);color:var(--text-2);letter-spacing:.04em}
.wa:hover .wa-lbl,.wa:focus-visible .wa-lbl{max-width:200px;padding:0 18px 0 12px;opacity:1}
.wa-ic{position:relative}
.wa-ic::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;animation:waPulse 2.4s var(--ease) 1.8s 3}
@keyframes waPulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}80%,100%{box-shadow:0 0 0 16px rgba(37,211,102,0)}}
@media (prefers-reduced-motion:reduce){.wa-ic::after{animation:none}.wa,.wa-lbl{transition:none}}
.btn .wa-g{color:var(--wa)}
.m-wa{pointer-events:auto;flex:0 0 52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px -6px rgba(0,0,0,.55),0 0 0 6px rgba(20,66,126,.35)}
.m-wa svg{width:26px;height:26px}
.m-sticky{gap:10px}
.m-sticky .btn{width:auto;flex:1}
.ftr .base{padding-right:96px}
@media (max-width:720px){
.wa{right:16px;bottom:calc(var(--dock) + 16px + env(safe-area-inset-bottom,0px))}
.wa .wa-lbl{display:none}
}
/* ---------- about ---------- */
.br-tag{font:500 12px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cyan)}
.br-tag::before{content:"[ ";color:var(--text-3)}.br-tag::after{content:" ]";color:var(--text-3)}
.facts dd{font-size:22px;line-height:1.25;font-weight:300;letter-spacing:-.01em}
.vision{border-radius:28px;padding:64px 56px;overflow:hidden;background:radial-gradient(70% 120% at 90% 120%,rgba(28,109,182,.2),transparent 60%),radial-gradient(60% 80% at 5% -20%,rgba(38,108,184,.8),transparent 70%),rgba(27,82,150,.5)}
.prin{display:flex;gap:var(--g);margin-top:56px}
.prin>div{flex:1;padding-top:20px;border-top:1px solid var(--glass-b);display:flex;flex-direction:column;gap:12px;position:relative}
.prin .n{font:400 11px var(--f-mono);color:var(--cyan);letter-spacing:.08em}
.rg{display:flex;flex-direction:column}
.rg-row{display:flex;align-items:center;gap:32px;padding:26px 0;border-top:1px solid var(--hair);text-decoration:none;transition:background 300ms}
.rg-row:last-child{border-bottom:1px solid var(--hair)}
.rg-row:hover{background:rgba(110,152,190,.03)}
.rg-row .k{flex:0 0 30%;display:flex;align-items:center;gap:14px}
.rg-row .k i{width:10px;height:10px;border-radius:50%;background:var(--fam);box-shadow:0 0 12px var(--fam)}
.rg-row .chips{flex:1}
.rg-row .go{color:var(--cyan);flex:0 0 auto}
.rg-row .go svg{width:16px;height:16px}
.reach{border-radius:28px;padding:48px;display:flex;gap:48px;align-items:stretch;overflow:hidden;background:radial-gradient(70% 120% at 85% 120%,rgba(28,109,182,.2),transparent 60%),rgba(27,82,150,.5)}
.reach>div:first-child{flex:0 0 38%;display:flex;flex-direction:column;gap:20px;justify-content:space-between}
.reach dl{flex:1}
.reach dl>div{display:flex;gap:24px;justify-content:space-between;padding:14px 0;border-top:1px solid var(--hair);font:400 14px/1.5 var(--f-mono)}
.reach dl>div:last-child{border-bottom:1px solid var(--hair)}
.reach dt{color:var(--text-3);flex:0 0 130px;text-transform:uppercase;font-size:11px;letter-spacing:.08em;padding-top:2px}
.reach dd{color:var(--text);text-align:right}
.reach dd a{text-decoration:none}.reach dd a:hover{color:var(--cyan)}
@media (max-width:900px){
.vision{padding:40px 24px}.prin{flex-direction:column;gap:32px}
.rg-row{flex-wrap:wrap;gap:12px}.rg-row .k{flex-basis:100%}
.about .film{height:auto!important;min-height:0!important;aspect-ratio:1/1!important}
.reach{flex-direction:column;padding:32px 24px;gap:28px}.reach>div:first-child{flex-basis:auto}
.reach dl>div{flex-direction:column;gap:4px}.reach dd{text-align:left}
}
/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
.waves svg,.caustic,.h-scrollcue{animation:none!important}
[data-reveal]{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
.hero-pin,.kg-pin{height:auto}
.hero-stage,.kg-stage{position:relative;height:auto;min-height:100vh}
*{scroll-behavior:auto!important}
}
/* ---------- responsive fallbacks for desktop boards ---------- */
@media (max-width:1100px){
.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
.cats{flex-wrap:wrap}.cat{flex:1 1 calc(50% - 12px)}
}
@media (max-width:900px){
.row,.h-grid .wrap,.kg-stage .wrap,.lab,.enq,.pend-cards,.rel,.variants,.sb-frames,.sb-meta{flex-direction:column}
.row>*,.h-grid .wrap>*,.kg-stage .wrap>*{flex-basis:auto!important;width:100%}
.push1{margin-left:0}
.feat>*{flex-basis:100%!important}
.cap{flex-wrap:wrap;gap:16px}.cap h3,.cap p{flex:1 1 100%}
.lab-vis{flex-basis:auto;min-height:340px}
.enq{padding:48px 24px;align-items:flex-start}
.pgrid{grid-template-columns:1fr}.pgrid .pcard.star{grid-column:auto}
.cat{flex-basis:100%}
.care,.opt,.feat-list li,.mo{flex-basis:100%}
.t1{flex-wrap:wrap}.t1>div{flex:1 1 45%}
.h-optic{height:420px}
.hero-stage{height:auto;min-height:100vh;padding:120px 0 60px}
.h-grid{height:auto}
.dd-sheet{display:none}
.rrow{flex-wrap:wrap}.rrow .scale{flex-basis:100%}
.ts-row{flex-direction:column;gap:6px}
.field{width:100%}
.ftr .cols>*{flex-basis:100%!important}
.h-read{display:none}
.h-copy{min-width:0;max-width:100%}.h-copy h1,.h-copy h2{width:auto;font-size:44px}
.h-lens{left:22%;width:72%}
.wrap{min-width:0}.row>*,.cats>*,.feat>*{min-width:0}
}
.o2dot{animation:rise 4.8s linear infinite;transition:opacity 600ms}
@keyframes rise{0%{transform:translateY(0)}100%{transform:translateY(-320px)}}
@media (prefers-reduced-motion:reduce){.o2dot{animation:none}}
/* =====================================================================
M4 HERO · "Manufacturing in Motion" imported from archive/mockups/concept-04.html
Static composition: the end state of M4's pinned hero (shutters closed, framed footage window, stage pill and info card).
No scroll listeners, no pinning. The only motion is a time-based entrance. Colours re-mapped to the M5 blue ramp.
===================================================================== */
:root{--f-cond:"Archivo","Arial Narrow",system-ui,sans-serif}
.m4{--pad:120px;position:relative;isolation:isolate;overflow:hidden;min-height:clamp(660px,92svh,880px);display:flex;flex-direction:column;background:var(--current)}
.m4-media{position:absolute;top:0;bottom:0;left:-14vw;right:-14vw;transform:translateX(12.5vw)}
.m4-media picture,.m4-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
/* The poster image is the hero's paint: the video (same first frame) is a 1px-inset enhancement layered on top once it has loaded, so the poster, not the later video frame, is the largest contentful paint. */
.m4-media video{position:absolute;top:1px;bottom:1px;left:0;width:100%;height:calc(100% - 2px);object-fit:cover;object-position:50% 50%}
.m4-mul{position:absolute;inset:0;background:var(--abyss);mix-blend-mode:multiply;opacity:.4}
.m4-tint{position:absolute;inset:0;opacity:.45;background:linear-gradient(90deg,rgba(18,58,110,.9) 0%,rgba(18,58,110,.66) 34%,rgba(18,58,110,.05) 60%,rgba(18,58,110,.12) 100%),linear-gradient(0deg,rgba(18,58,110,.85) 0%,rgba(18,58,110,0) 26%)}
.m4-sh{position:absolute;z-index:2;background:var(--current)}
.m4-sh-l{left:0;top:0;bottom:0;width:56vw;background:linear-gradient(90deg,var(--current) 0%,var(--current) 82%,#2A6DB4 100%)}
.m4-sh-r{right:0;top:0;bottom:0;width:var(--m)}
.m4-sh-t{left:0;right:0;top:0;height:var(--pad)}
.m4-sh-b{left:0;right:0;bottom:0;height:var(--pad)}
.m4::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(90% 70% at 70% 0,rgba(28,109,182,.16),transparent 60%)}
.m4::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--pad);z-index:3;pointer-events:none;background:linear-gradient(180deg,rgba(77,148,214,0),#4D94D6)}
.m4-win{position:absolute;z-index:4;left:56vw;right:var(--m);top:var(--pad);bottom:var(--pad);border:1px solid rgba(220,242,249,.42);pointer-events:none;animation:m4Fade .9s var(--ease) .45s both}
.m4 .crop{position:absolute;width:14px;height:14px;border:0 solid var(--ice);z-index:3;pointer-events:none}
.m4 .crop.tl{top:-1px;left:-1px;border-width:1px 0 0 1px}.m4 .crop.tr{top:-1px;right:-1px;border-width:1px 1px 0 0}
.m4 .crop.bl{bottom:-1px;left:-1px;border-width:0 0 1px 1px}.m4 .crop.br{bottom:-1px;right:-1px;border-width:0 1px 1px 0}
.m4-pill{position:absolute;top:20px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;white-space:nowrap;background:rgba(18,58,110,.82);border:1px solid var(--glass-b);border-radius:4px;padding:8px 14px;font:500 12px/1 var(--f-mono);letter-spacing:.08em;color:var(--text);animation:m4Drop .8s var(--ease) .75s both}
.m4-pill i{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px rgba(28,109,182,.2)}
.m4-card{position:absolute;right:20px;bottom:20px;width:272px;background:rgba(23,70,131,.92);border:1px solid var(--glass-b);padding:16px 18px;animation:m4Rise .8s var(--ease) .95s both}
.m4-mono{font:400 11px/16px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.m4-card .m4-mono{display:flex;justify-content:space-between;gap:8px}
.m4 .w{color:var(--text)}
.m4-card p{font-size:14px;line-height:20px;margin-top:8px;color:var(--text)}
.m4-copy{position:relative;z-index:5;width:100%;max-width:1440px;margin:0 auto;padding:max(136px,16vh) var(--m) calc(var(--pad) + 8px);display:flex;flex-direction:column}
.m4-copy>*{max-width:min(640px,46vw)}
.m4-eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:22px;font:400 12px/18px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.m4-eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--cyan)}
.m4-h1{margin:0;font-family:var(--f-cond);font-stretch:62%;font-weight:700;text-transform:uppercase;letter-spacing:-.01em;line-height:.92;font-size:clamp(44px,6.67vw,96px);color:#fff}
.m4-h1 .ln{display:block;overflow:hidden}
.m4-h1 .ln>span{display:block;animation:m4Ln .9s cubic-bezier(.7,0,.2,1) both}
.m4-h1 .ln:nth-child(2)>span{animation-delay:.08s}.m4-h1 .ln:nth-child(3)>span{animation-delay:.16s}.m4-h1 .ln:nth-child(4)>span{animation-delay:.24s}
.m4-sub{margin-top:28px;animation:m4Rise .9s var(--ease) .35s both}
.m4-sub p{font-size:18px;line-height:28px;color:#DCEBF5;max-width:540px}
.m4-sub .m4-india{display:flex;align-items:center;gap:12px;margin-bottom:10px;font:500 12px/18px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}
.m4-india-dot{display:inline-block;width:28px;height:1px;background:var(--cyan)}
.m4-ctas{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.m4-rail{position:absolute;z-index:6;left:0;right:0;bottom:0;height:var(--pad);display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:1440px;margin:0 auto;padding:0 var(--m)}
.m4-rail-l{text-decoration:none;display:inline-flex;gap:8px;transition:color 240ms}.m4-rail-l:hover{color:var(--text)}
.m4-count{font:400 12px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.m4-segs{display:flex;gap:6px;align-items:center}
.m4-segs b{display:block;width:52px;height:2px;background:rgba(235,246,252,.55)}
.m4-segs b.act{background:var(--cyan)}
@keyframes m4Ln{from{transform:translateY(105%)}to{transform:none}}
@keyframes m4Fade{from{opacity:0}to{opacity:1}}
@keyframes m4Drop{from{opacity:0;transform:translate(-50%,-16px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes m4Rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media (max-width:900px){
.m4{min-height:clamp(620px,92svh,820px)}
.m4-media{left:0;right:0;transform:none}
.m4-tint{opacity:1;background:linear-gradient(180deg,rgba(39,103,174,.5) 0%,rgba(33,94,163,.74) 45%,rgba(35,100,171,.9) 100%)}
.m4-mul{opacity:.28}
.m4-sh,.m4-win{display:none}
.m4::after{height:90px}
.m4-copy{padding:112px var(--m) 96px}
.m4-copy>*{max-width:none}
.m4-rail{--pad:80px;height:80px}
.m4-segs{display:none}
.m4-count{display:none}
.m4-ctas .btn{flex:1 1 auto;justify-content:center}
}
@media (max-width:520px){.m4-h1{font-size:clamp(40px,12.6vw,64px)}}
@media (prefers-reduced-motion:reduce){.m4-win,.m4-pill,.m4-card,.m4-sub,.m4-h1 .ln>span{animation:none!important}}
/* =====================================================================
PROCESS · five stages (from M4 "ManufacturingStages")
All five stages are real, readable content in the page. The monitor (desktop) follows the stage in view and answers the rail buttons;
nothing is hidden until a scroll position is reached. On narrow screens each stage carries its own still instead of the monitor.
===================================================================== */
.proc-body{display:flex;gap:56px;align-items:flex-start}
.proc-mon{position:sticky;top:96px;flex:0 0 52%;display:flex;flex-direction:column;gap:16px}
.mon-scr{position:relative;aspect-ratio:4/3.1;max-height:calc(100vh - 200px);width:100%;border-radius:var(--r-glass);overflow:hidden;border:1px solid var(--glass-b);background:var(--trench);box-shadow:var(--shadow)}
.mon-lay{position:absolute;inset:0;overflow:hidden;transform:translateX(101%);transition:transform .6s cubic-bezier(.7,0,.2,1);isolation:isolate}
.mon-lay>.in{position:absolute;inset:0;transform:translateX(-101%);transition:transform .6s cubic-bezier(.7,0,.2,1)}
.mon-lay.on,.mon-lay.on>.in{transform:none}
.mon-lay[data-l="1"]{z-index:1}.mon-lay[data-l="2"]{z-index:2}.mon-lay[data-l="3"]{z-index:3}.mon-lay[data-l="4"]{z-index:4}.mon-lay[data-l="5"]{z-index:5}
.mon-lay video,.mon-lay img{width:100%;height:100%;object-fit:cover}
.mon-geom{display:flex;align-items:center;justify-content:center;background-color:var(--trench);background-image:radial-gradient(60% 55% at 50% 55%,rgba(28,109,182,.14),transparent 70%),linear-gradient(rgba(110,152,190,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(110,152,190,.07) 1px,transparent 1px);background-size:auto,40px 40px,40px 40px}
.mon-geom svg{width:78%;height:auto}
.tinted{position:relative;overflow:hidden;background:var(--trench)}
.tinted>img,.tinted>video{width:100%;height:100%;object-fit:cover}
.tinted::after{content:"";position:absolute;inset:0;background:var(--surface);mix-blend-mode:multiply;opacity:.5;pointer-events:none}
.duo>img{filter:grayscale(1) contrast(1.12) brightness(.95)}
.duo::after{opacity:.92}
.mon-pill{position:absolute;z-index:9;top:18px;left:18px;display:flex;align-items:center;gap:10px;background:rgba(18,58,110,.85);border:1px solid var(--glass-b);border-radius:4px;padding:9px 14px;font:500 12px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text)}
.mon-pill i{width:8px;height:8px;border-radius:50%;background:var(--cyan)}
.mon-pill .cnt{display:inline-block;overflow:hidden;height:12px;vertical-align:top}
.mon-pill .cnt span{display:block;transition:transform .4s cubic-bezier(.7,0,.2,1)}
.mon-rail{display:flex;gap:6px}
.mon-rail button{flex:1;display:flex;flex-direction:column;gap:10px;text-align:left;padding:6px 0 4px;background:none;border:0;cursor:pointer}
.mon-rail button i{display:block;height:2px;background:var(--glass-b);position:relative;overflow:hidden}
.mon-rail button i::after{content:"";position:absolute;inset:0;background:var(--text-2);transform:scaleX(0);transform-origin:0 50%;transition:transform .4s cubic-bezier(.7,0,.2,1)}
.mon-rail button.past i::after{transform:scaleX(1)}
.mon-rail button.on i::after{transform:scaleX(1);background:var(--cyan)}
.mon-rail button span{font:400 11px/14px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.mon-rail button.on span{color:var(--text)}
.proc-steps{flex:1;min-width:0}
.step{min-height:max(420px,58vh);padding:56px 0 64px;border-top:1px solid var(--hair);display:flex;flex-direction:column;gap:20px}
.step:first-child{border-top:0;padding-top:0}
.step .num{position:relative;height:clamp(64px,8vw,112px);font:200 clamp(64px,8vw,112px)/1 var(--f-display);letter-spacing:-.04em}
.step .num span{position:absolute;left:0;top:0;transition:opacity .4s}
.step .num .o{color:transparent;-webkit-text-stroke:1px var(--glass-b)}
.step .num .f{color:var(--text);opacity:0}
.step.on .num .f{opacity:1}
.step .body-2{font-size:15px}
.step-fig{display:none;margin:0;position:relative;overflow:hidden;border-radius:16px;border:1px solid var(--glass-b);aspect-ratio:16/10;background:var(--trench)}
.step-fig img{width:100%;height:100%;object-fit:cover}
.step-fig.mon-geom{display:none}
.q{margin:0;border-left:2px solid var(--glass-b);padding:4px 0 4px 20px;font:300 18px/1.55 var(--f-text);color:var(--text)}
.q cite{display:block;margin-top:10px;font:400 11px/16px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);font-style:normal}
.prange{border-top:1px solid var(--hair)}
.prange-h{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0}
.prange-r{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;border-top:1px solid var(--hair)}
.prange-r span{font:400 12px/1.3 var(--f-mono);letter-spacing:.04em;color:var(--text-2)}
.prange-r b{font:300 26px/1 var(--f-display);letter-spacing:-.02em;white-space:nowrap;color:var(--text)}
.proc-links{border-top:1px solid var(--hair)}
.proc-links a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid var(--hair);text-decoration:none;transition:color 240ms}
.proc-links a:hover{color:var(--cyan)}
.proc-links .tag{color:var(--text-3)}
@media (max-width:900px){
.proc-body{flex-direction:column;gap:0}
.proc-mon{display:none}
.proc-steps{width:100%}
.step{min-height:0;padding:44px 0 48px}
.step .num{height:56px;font-size:56px}
.step .num .f{opacity:1}
.step-fig{display:block}
.step-fig.mon-geom{display:flex}
.prange-r b{font-size:22px}
}
@media (prefers-reduced-motion:reduce){.mon-lay,.mon-lay>.in,.mon-pill .cnt span,.mon-rail button i::after{transition:none!important}}
/* =====================================================================
LENS CARE · slogan + single professional-use card
===================================================================== */
.care-slogan{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 56px;padding-bottom:40px;margin-bottom:44px;border-bottom:1px solid var(--hair)}
.slogan{margin:0;font:200 clamp(34px,4.6vw,66px)/1.02 var(--f-display);letter-spacing:-.03em;text-wrap:balance}
.slogan strong{font-weight:300;color:var(--cyan)}
.care-slogan .body-2{flex:0 0 min(380px,36%);padding-bottom:6px}
.pro-band .care:only-child{flex:1 1 100%;flex-direction:row}
.pro-band .care:only-child .cw{flex:0 0 38%;height:auto;min-height:300px;border-bottom:0;border-right:1px solid var(--hair)}
@media (max-width:900px){
.care-slogan{flex-direction:column;align-items:flex-start;padding-bottom:28px;margin-bottom:32px}
.care-slogan .body-2{flex:0 1 auto;padding-bottom:0}
.pro-band .care:only-child{flex-direction:column}
.pro-band .care:only-child .cw{flex:0 0 auto;height:280px;min-height:0;border-right:0;border-bottom:1px solid var(--hair)}
}
/* footer company line */
.ftr-desc{margin-top:18px;max-width:300px;font-size:14px;line-height:1.55;color:var(--text-2)}
/* zone strip: central / intermediate / peripheral vault slit-lamp views (from D2, "Specialist" section) */
.zstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0 4px}
.zstrip figure{position:relative;margin:0;aspect-ratio:3/4;border-radius:14px;overflow:hidden;border:1px solid var(--hair);background:var(--glass)}
.zstrip img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.zstrip figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:3px;padding:32px 12px 11px;background:linear-gradient(180deg,rgba(10,32,66,0),rgba(10,32,66,.86))}
.zstrip figcaption .tag{color:var(--cyan);font-size:10px;letter-spacing:.04em}
.zstrip figcaption b{font-weight:600;font-size:clamp(14px,1.5vw,19px);line-height:1.1;color:#fff}
.zstrip.is-compact{gap:8px;margin:6px 0 2px}
.zstrip.is-compact figure{aspect-ratio:1/1;border-radius:10px}
.zstrip.is-compact figcaption{padding:18px 8px 6px;gap:1px}
.zstrip.is-compact figcaption .tag{font-size:9px;letter-spacing:.06em}
.zstrip.is-compact figcaption b{font-size:11px}
@media (max-width:520px){.zstrip figcaption{padding:26px 8px 8px}.zstrip figcaption b{font-size:13px}}

/* ===== Catalogue layer: category pages, product families, carousels, FAQ, Why Us, footer social =====
 * Appended to site.css at build time (scripts/build.mjs). Uses the existing tokens (--fam-*, --glass, --hair …). */

/* ---------- category hero: Kerato Genius hero engine, per-family scene ---------- */
.cat-hero .kg-bg{background:radial-gradient(70% 70% at 70% 55%,color-mix(in srgb,var(--fam,#1C6DB6) 22%,transparent),transparent 62%),linear-gradient(180deg,var(--surface),var(--current) 60%,var(--trench))}
.cat-hero .kg-copy{gap:22px}
.kg-vis [data-t]{transform-box:fill-box;transform-origin:center}
.kg-vis .pv{transform-box:view-box}
/* Soft and Rigid heroes: the drawing is turned on its side, so it is portrait (640 x 760). Width is capped so the hero does not grow too tall;
 * on phones its labels are set larger (about 360 px wide there) so they stay readable. */
.kg-vis.port text{font-size:14px}
.kg-vis.port text.v{font-size:24px}
.kg-vis.port{aspect-ratio:640/760;max-width:560px;margin-inline:auto;margin-bottom:44px}
.kg-vis.port .kg-steps{bottom:-34px;flex-wrap:wrap;row-gap:6px}
@media (max-width:900px){.kg-vis.port{margin-bottom:56px}.kg-vis.port .kg-steps{bottom:-48px;gap:6px 14px}}
@media (max-width:560px){.kg-vis.port text{font-size:17px;letter-spacing:0}.kg-vis.port text.v{font-size:28px}}
.logo-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.fam-logo{height:46px;width:auto;max-width:100%}
.fam-logo.plate{height:52px;padding:6px 12px;border-radius:12px;background:#fff;box-shadow:0 8px 24px rgba(8,30,66,.25)}
.cust-note{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:var(--r-pill);border:1px solid rgba(157,187,255,.5);background:rgba(157,187,255,.12);font:500 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text)}
.cust-note::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--fam-spec)}
.cat-hero .t1 dd{font-size:32px}

/* ---------- intro / why us strip ---------- */
.cat-intro .why-mini{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--hair)}
.why-mini li{display:flex;gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--hair)}
.why-mini b{flex:0 0 170px;font:500 12px/1.4 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--cyan)}
.why-mini span{font-size:15px;color:var(--text-2);line-height:1.5}
.why-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g)}
.why-grid li{padding:24px;border-radius:var(--r-glass);display:flex;flex-direction:column;gap:10px}
.why-grid .n{font:400 12px var(--f-mono);color:var(--cyan);letter-spacing:.08em}
.why-grid li:nth-child(7){grid-column:span 2}

/* ---------- product families ---------- */
.famnav{display:flex;gap:8px;flex-wrap:wrap}
.famnav a{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:var(--r-pill);border:1px solid var(--glass-b);background:var(--glass);text-decoration:none;font-size:14px;color:var(--text-2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.famnav a:hover{border-color:var(--cyan);color:var(--text)}
.famnav a span{font:400 11px var(--f-mono);opacity:.75}
.fam{padding:56px 0 8px;scroll-margin-top:90px}
.fam-h{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-bottom:22px;margin-bottom:28px;border-bottom:1px solid var(--hair)}
.fam-h .ttl{display:flex;flex-direction:column;gap:12px;max-width:720px}
.fam-h .ttl p{color:var(--text-2);font-size:15px;line-height:1.55}
.fam-h .fam-logo{height:40px}
.fam-h .fam-logo.plate{height:44px}
.fam-meta{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}

/* product card (catalogue) */
.pc{min-width:0}
.pc .well{height:198px}
.pc .well>svg{width:120px;height:120px}
.pc .well>img.cover{width:100%;height:100%;object-fit:cover}
.pc .well>img.contain{width:auto;max-width:74%;height:68%;margin-top:30px;object-fit:contain;filter:drop-shadow(0 14px 18px rgba(0,0,0,.4))}
.pc .pbody{padding:20px;gap:8px}
.pc .pbody .d-22{font-size:21px;line-height:1.2;overflow-wrap:anywhere}
.pc .pbody p{font-size:14px;line-height:1.55;color:var(--text-2)}
.pc .cb{display:inline-flex;align-self:flex-start;align-items:center;gap:6px;padding:3px 9px;border-radius:var(--r-pill);font:500 10.5px/1.3 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;border:1px solid var(--glass-b);color:var(--text-2)}
.pc .cb.custom{border-color:rgba(157,187,255,.6);color:#fff;background:rgba(157,187,255,.16)}
.pc .chips{margin-top:2px}
.pc .pfoot{padding-top:10px}
.pc .gen{width:100%;height:100%;display:flex;align-items:center;justify-content:center}

/* grids / carousel
 * Up to four products: a grid. More than four: a carousel at EVERY width (client 2026-11-11). The track is a horizontally
 * scrolling flex row (so touch and trackpad scrolling work natively); src/js/catalogue.js moves it slowly on its own, loops it
 * with inert clones, and stops it on hover, keyboard focus, touch and the Pause button. With reduced motion nothing moves on
 * its own and the track snaps card by card. --n is how many cards are visible at once. */
.plist{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g)}
.plist.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.plist.n2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:calc(50% + 12px)}
.plist.n1{grid-template-columns:minmax(0,1fr);max-width:calc(25% + 0px)}
.car{--n:4;--cgap:var(--g);position:relative}
.car-track{display:flex;align-items:stretch;gap:var(--cgap);overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:4px 2px 18px;margin:0 -2px;outline-offset:-2px}
.car-track::-webkit-scrollbar{display:none}
.car-track>.pc{flex:0 0 calc((100% - (var(--n) - 1)*var(--cgap))/var(--n));min-width:0}
.car.is-manual .car-track{scroll-snap-type:x mandatory}
.car.is-manual .car-track>.pc{scroll-snap-align:start}
.car-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.car-count{font:400 12px var(--f-mono);color:var(--text-2);letter-spacing:.04em}
.car-btns{display:flex;align-items:center;gap:8px}
.car-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--glass-b);background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--text);transition:background 200ms,border-color 200ms,color 200ms,opacity 200ms}
.car-btn:hover:not(:disabled){background:var(--cyan);border-color:var(--cyan);color:#fff}
.car-btn:disabled{opacity:.35;cursor:default}
.car-btn svg{width:16px;height:16px}
.car-prev svg{transform:rotate(180deg)}
.car-pp{height:44px;padding:0 18px;border-radius:var(--r-pill);border:1px solid var(--glass-b);background:#fff;font:500 12px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text);cursor:pointer;transition:background 200ms,border-color 200ms,color 200ms}
.car-pp:hover{border-color:var(--cyan);color:var(--cyan)}
.car-pp[hidden]{display:none}
.car-track:focus-visible,.car-btn:focus-visible,.car-pp:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
@media (max-width:1279px){
.plist,.plist.n3,.plist.n2,.plist.n1{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}
.car{--n:3}
}
@media (max-width:900px){.car{--n:2}}
@media (max-width:640px){
.plist,.plist.n3,.plist.n2,.plist.n1{grid-template-columns:minmax(0,1fr)}
.car{--n:1.15;--cgap:14px}
.car-pp{padding:0 14px}
}

/* family tag: small text tag at the top-left of every product card (src/css/theme.css restyles it for the light theme) */
.pc .well .ftag{position:absolute;left:14px;top:14px;z-index:2;max-width:calc(100% - 28px);padding:5px 11px;border-radius:var(--r-pill);background:#fff;border:1px solid var(--glass-b);box-shadow:0 2px 8px rgba(14,40,72,.06);font:600 12px/1.25 var(--f-text);letter-spacing:.01em;color:var(--cyan);overflow-wrap:anywhere}

/* ---------- spec / range tables ---------- */
.rng{border-radius:var(--r-glass);overflow:hidden}
.rng table{width:100%;border-collapse:collapse;font-size:14px}
.rng th,.rng td{padding:14px 20px;text-align:left;vertical-align:top;border-top:1px solid var(--hair)}
.rng thead th{border-top:0;font:500 11px/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);background:rgba(8,30,66,.18)}
.rng tbody th{font-weight:400;color:var(--text);width:30%}
.rng td{color:var(--text-2)}
.rng .scroll{overflow-x:auto}
.rng .scroll table{min-width:640px}

/* ---------- related categories ---------- */
.relcat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g)}
.relcat a{display:flex;flex-direction:column;gap:8px;padding:24px;border-radius:var(--r-glass);text-decoration:none;transition:transform 400ms var(--ease),border-color 300ms}
.relcat a:hover{transform:translateY(-3px);border-color:rgba(110,152,190,.34)}
.relcat p{font-size:14px;color:var(--text-2)}

/* ---------- products hub ---------- */
.hub{display:flex;flex-direction:column;gap:var(--g)}
.hub-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--g);border-radius:var(--r-glass);overflow:hidden;text-decoration:none;transition:transform 500ms var(--ease),border-color 300ms}
.hub-row:hover{transform:translateY(-3px);border-color:rgba(110,152,190,.34)}
.hub-well{min-height:240px;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(55% 55% at 50% 60%,color-mix(in srgb,var(--fam) 38%,transparent),transparent 72%),linear-gradient(180deg,rgba(38,108,184,.35),rgba(17,58,112,.6))}
.hub-well svg{width:140px;height:140px}
.hub-well img{max-height:180px;width:auto;max-width:80%;object-fit:contain;filter:drop-shadow(0 14px 18px rgba(0,0,0,.4))}
.hub-body{padding:28px 28px 28px 8px;display:flex;flex-direction:column;gap:12px}
.hub-fams{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:8px}

/* ---------- FAQ ---------- */
.faq-grp{padding:40px 0 0}
.faq-grp h2{margin-bottom:20px}
.faq details{border:1px solid var(--glass-b);border-radius:16px;background:var(--glass);margin-bottom:10px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 24px;font:300 20px/1.3 var(--f-display);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:0 0 12px;height:12px;border-right:1.5px solid var(--cyan);border-bottom:1.5px solid var(--cyan);transform:rotate(45deg) translateY(-3px);transition:transform 300ms var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.faq .ans{padding:0 24px 22px;font-size:16px;line-height:1.65;color:var(--text-2);max-width:820px}
.faq-note{font:400 12px/1.5 var(--f-mono);color:var(--text-3)}

/* ---------- footer: social + India line ---------- */
.soc{display:flex;gap:10px;margin-top:18px}
.soc a{width:42px;height:42px;border-radius:50%;border:1px solid var(--glass-b);background:var(--glass);display:grid;place-items:center;color:var(--text);transition:background 200ms,color 200ms,border-color 200ms}
.soc a:hover{background:var(--cyan);color:var(--cyan-ink);border-color:var(--cyan)}
.soc svg{width:19px;height:19px;fill:currentColor}
.ftr .india{display:inline-flex;align-items:center;gap:8px;font:400 12px var(--f-mono);letter-spacing:.06em;color:var(--text-2)}

.ftr .cols .c3{flex:0 0 calc(3*(100% - 11*24px)/12 + 2*24px)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
.why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.why-grid li:nth-child(7){grid-column:auto}
.relcat{grid-template-columns:1fr}
.hub-row{grid-template-columns:1fr}.hub-body{padding:8px 24px 24px}
}
@media (max-width:900px){
.why-mini li{flex-direction:column;gap:4px}.why-mini b{flex-basis:auto}
.cat-hero .kg-vis{margin-top:16px}
.fam-meta{justify-content:flex-start}
}
@media (max-width:640px){.why-grid{grid-template-columns:1fr}.rng th,.rng td{padding:12px 14px}}

/* ---------- products dropdown: eight entries on two rows ---------- */
.dd-sheet{width:min(880px,92vw);margin-left:calc(min(880px,92vw)/-2);flex-wrap:wrap}
.dd-sheet .fam-tile{flex:1 1 calc(25% - 8px);min-width:0}
.dd-sheet .fam-well{height:72px}
.dd-sheet .fam-well svg{width:52px;height:52px}
.m-cat .sw-row,.sw-row{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;align-items:center;padding:14px}
.sw-row img{width:46px;height:46px;border-radius:50%;border:1px solid var(--glass-b);object-fit:cover;box-shadow:0 0 0 3px rgba(110,152,190,.06)}
.hub-well .sw-row img{width:64px;height:64px}

/* ---------- home category grid: seven cards on two rows ---------- */
.cats{flex-wrap:wrap}
.cats .cat{flex:1 1 calc(25% - 18px);min-width:240px}

/* ---------- about: timeline ---------- */
.tl{display:flex;flex-direction:column;border-top:1px solid var(--hair)}
.tl li{display:flex;gap:24px;padding:20px 0;border-bottom:1px solid var(--hair)}
.tl b{flex:0 0 150px;font:500 12px/1.5 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cyan)}
.tl span{font-size:16px;line-height:1.6;color:var(--text-2)}
@media (max-width:900px){.tl li{flex-direction:column;gap:6px}.tl b{flex-basis:auto}}
.matrix .dash{color:var(--text-3);font:400 14px var(--f-mono)}

/* ---------- carton rows: scale to the card, never clip ----------
 * The Lens Care cards show three cartons side by side. They had fixed heights (150/178/150 px) with negative margins inside an
 * overflow:hidden well, so in narrow cards (home featured card at ~1280px and below, tablets) the third carton, Pro Saline Max,
 * was cut off at the card edge and read as a half image. Widths now derive from the card, and object-fit keeps the artwork whole. */
.cartons{box-sizing:border-box;container-type:inline-size;width:100%;max-width:100%;padding-left:6px;padding-right:6px}
.cartons img{width:auto;max-width:none;min-width:0;height:min(150px,45cqw);max-height:none;object-fit:contain;margin:0 -3%}
.cartons img:nth-child(2){height:min(178px,53cqw)}
.cartons img:only-child{height:min(150px,60cqw);margin:0}
.well:has(>.cartons){overflow:hidden}
.dd-sheet{background:rgba(20,66,126,.96)}
.fam-logo{width:auto;object-fit:contain}
.cust-note{line-height:1.4}
.fam-h .ttl .fam-logo{align-self:flex-start}

/* =====================================================================
LIGHT THEME · component layer (client feedback 2026-11-07)
Appended last by scripts/build.mjs. Colours come from the :root tokens in site.css; this file only re-points the
components that hard-coded dark-blue glass surfaces in the earlier "deep water" concept.
Reference lock (Refero): Alveos "blue-sky science" — cool off-white canvas, ice-blue chapter surfaces, navy used for
text only, one medium-blue accent (--cyan), flat white cards with a hairline border and a soft shadow, no glass blur.
Rejected: dark navy section backgrounds, heavy gradients, glassmorphism, glow shadows.
===================================================================== */

/* ---------- surfaces & primitives ---------- */
#home,.page{background:var(--canvas)}
.glass{background:var(--paper);border:1px solid var(--glass-b);box-shadow:var(--shadow);-webkit-backdrop-filter:none;backdrop-filter:none}
.glass::before{display:none}
.caustic,.waves,.kg-dim,.h-dim,.h-rays,.h-surface,.h-focus{display:none!important}
[data-reveal]{filter:none;transition:opacity 600ms var(--ease),transform 600ms var(--ease)}
.btn-primary{box-shadow:0 6px 16px -10px rgba(28,109,182,.8)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-ghost{background:var(--paper);border-color:var(--glass-b);color:var(--text);-webkit-backdrop-filter:none;backdrop-filter:none}
.btn-ghost:hover{background:var(--glass-2);border-color:rgba(14,40,72,.24)}
.btn-link{border-bottom-color:rgba(28,109,182,.35)}
.chip{background:var(--ice-bg);border-color:rgba(14,40,72,.06);color:var(--text-2)}
.chip b{color:var(--text)}
.tag{color:var(--ice)}
.sec-label .tag{color:var(--cyan)}
.sec-label .depth{color:var(--text-3)}
:focus-visible{outline-color:var(--cyan)}
.note-src{color:var(--text-3)}
.pos-statement strong,.slogan strong{color:var(--cyan)}

/* section rhythm: subtle alternation between the canvas, white and ice blue */
.sec.on-paper{background:var(--paper)}
.sec.on-ice{background:var(--ice-bg)}
.sec-light{background:var(--paper)}
.sec-light::before,.sec-light::after{display:none}

/* ---------- header / nav ---------- */
.logo-plate{box-shadow:0 1px 2px rgba(14,40,72,.06);border:1px solid var(--glass-b)}
.hdr .logo-plate img{height:30px}
.capsule{background:rgba(255,255,255,.9);border-color:var(--glass-b);box-shadow:var(--shadow)}
.hdr.is-scrolled .capsule{background:rgba(255,255,255,.97)}
.capsule>a:hover,.capsule>.nav-dd>button:hover,.capsule [aria-current="page"],.nav-dd.is-open>button{background:var(--ice-bg)}
.dd-sheet{background:#fff;border-color:var(--glass-b);-webkit-backdrop-filter:none;backdrop-filter:none}
.fam-tile:hover,.fam-tile:focus-visible{background:var(--ice-bg);border-color:var(--hair)}
.fam-well{background:radial-gradient(60% 70% at 50% 60%,color-mix(in srgb,var(--fam) 20%,transparent),transparent 70%),var(--ice-bg)}
.hdr .menu-btn:not([aria-expanded="true"]){background:#fff;color:var(--text);border-color:var(--glass-b)}
.mnav{background:var(--canvas);-webkit-backdrop-filter:none;backdrop-filter:none}
@media (max-width:980px){.hdr .logo-plate img{height:26px}}

/* ---------- left section index (home): flat, no depth ---------- */
.rail .line{background:var(--hair)}
.rail button{color:var(--text-3)}
.rail button i{background:var(--canvas);border-color:rgba(14,40,72,.22);box-shadow:none}
.rail button.is-on{color:var(--cyan)}
.rail button.is-on i{background:var(--cyan);border-color:var(--cyan);box-shadow:none}
.rail-k{color:var(--text-3)}

/* ---------- cards ---------- */
.cat-well,.pcard .well,.hub-well{background:radial-gradient(55% 50% at 50% 60%,color-mix(in srgb,var(--fam,#2B8CC9) 14%,transparent),transparent 72%),linear-gradient(180deg,var(--ice-bg),#FAFCFE)}
.cat-well::after{background:repeating-radial-gradient(circle at 50% 62%,transparent 0 22px,rgba(14,40,72,.035) 22px 23px)}
.cat:hover,.pcard:hover,.relcat a:hover,.hub-row:hover{border-color:rgba(28,109,182,.38)}
.pc .well>img.contain,.cartons img,.hub-well img{filter:drop-shadow(0 12px 14px rgba(14,40,72,.16))}
.pc .cbs{display:flex;gap:6px;flex-wrap:wrap}
.pc .cb{border-color:var(--glass-b);color:var(--text-2)}
.pc .cb.custom{color:#3B50AE;border-color:rgba(76,99,196,.35);background:rgba(76,99,196,.07)}
.pc .cb.cast{color:#0D6A5A;border-color:rgba(22,144,122,.35);background:rgba(22,144,122,.08)}
.cust-note{border-color:rgba(76,99,196,.3);background:rgba(76,99,196,.06);color:var(--text)}
.fam-logo.plate{box-shadow:none;border:1px solid var(--glass-b)}
.sw-row img,.iris{box-shadow:none}
.rng thead th,.matrix thead th{background:var(--ice-bg);color:var(--text-2)}
.car-track{scrollbar-color:rgba(14,40,72,.25) transparent}

/* ---------- media frames ---------- */
.film::after,.team-fig::after,.tinted::after{display:none}
.team-fig,.film{background:var(--ice-bg)}

/* ---------- reviews ---------- */
.rv-card{background:#fff;box-shadow:var(--shadow)}
.rv-av{background:var(--sky);color:var(--text)}
.rv-dlg{color-scheme:light;background:#fff}
.rv-dlg::backdrop{background:rgba(14,40,72,.35)}

/* ---------- enquiry / vision / contact blocks ---------- */
.enq,.vision,.reach{background:linear-gradient(135deg,var(--sky) 0%,var(--ice-bg) 55%,#fff 100%);border:1px solid var(--glass-b);box-shadow:none}
.rg-row:hover{background:var(--ice-bg)}

/* ---------- footer: light, text name instead of the logo image ---------- */
.ftr{background:var(--paper);border-top:1px solid var(--hair)}
.ftr-name{margin:0;font:400 24px/1.2 var(--f-display);letter-spacing:-.015em;color:var(--text)}
.ftr-addr strong{color:var(--ice)}
.ftr .india{color:var(--text-2);gap:10px}
.ftr .india .tri{width:21px;height:14px;flex:0 0 auto;border-radius:1px}
.soc a{background:#fff;color:var(--text)}

/* ---------- product detail / KG heroes ---------- */
.kg-bg,.cat-hero .kg-bg{background:radial-gradient(60% 60% at 72% 55%,color-mix(in srgb,var(--fam,#1C6DB6) 10%,transparent),transparent 62%),linear-gradient(180deg,#fff,var(--canvas))}
.optic-well{background:radial-gradient(60% 55% at 50% 50%,rgba(28,109,182,.08),transparent 70%),var(--ice-bg);border:1px solid var(--glass-b)}
.spec-foot{background:var(--ice-bg)}
.kg-vis text{fill:var(--text-2)}
.kg-vis text.v{fill:var(--text)}

/* ---------- lens care ---------- */
.dot{box-shadow:none}
.care .cw{background:radial-gradient(50% 40% at 50% 85%,color-mix(in srgb,var(--fam) 14%,transparent),transparent 70%),linear-gradient(180deg,var(--ice-bg),#fff)}
.care .cw img{filter:drop-shadow(0 14px 16px rgba(14,40,72,.18))}
.care summary{color:var(--ice)}
.pro-band{background:var(--ice-bg);border-color:var(--glass-b)}
.pro-band .care .cw{--fam:#6E98BE}
.seg{background:#fff}

/* ---------- WhatsApp launcher ---------- */
.wa{background:#fff;border-color:var(--glass-b);-webkit-backdrop-filter:none;backdrop-filter:none}
.wa:hover,.wa:focus-visible{background:#fff;border-color:rgba(28,109,182,.35)}

/* ---------- zone strip captions sit on photos: keep light text ---------- */
.zstrip figcaption .tag{color:#BFE3FF}

/* =====================================================================
HOME
===================================================================== */
/* first hero (M4 footage): dark scrim over video, so its own text tokens stay light */
.m4{--text:#FFFFFF;--text-2:#DCEBF5;--text-3:#BFD6EA;--cyan:#8FD0F5;--cyan-ink:#0E2440;--accent-hover:#A9DCF8;--glass:rgba(255,255,255,.12);--glass-2:rgba(255,255,255,.2);--glass-b:rgba(255,255,255,.38);--hair:rgba(255,255,255,.2);--ice:#DCEBF5;background:#1E4F86}
.m4 .btn-ghost{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.45);color:#fff}
.m4 .btn-ghost:hover{background:rgba(255,255,255,.22)}
.m4::after{display:none}
/* Proudly Made in India: the national flag, correct colours and 3:2 proportions, on a white pill */
.m4-sub .m4-india{display:inline-flex;align-items:center;gap:10px;margin-bottom:14px;padding:6px 14px 6px 7px;border-radius:var(--r-pill);background:#fff;color:#0E2440;font:500 12px/18px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;box-shadow:0 6px 18px -10px rgba(0,0,0,.5)}
.m4-tricolour{width:27px;height:18px;flex:0 0 auto;border-radius:2px}

/* process: McAsfeer explanation, film, four stages */
.mcas{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--g);align-items:stretch;margin-bottom:40px}
.mcas-txt{padding:32px;border-radius:var(--r-glass);background:#fff;border:1px solid var(--glass-b)}
.mcas-txt .lead{color:var(--text)}
.mcas-fig{margin:0;padding:24px 28px;border-radius:var(--r-glass);background:#fff;border:1px solid var(--glass-b);display:flex;flex-direction:column;gap:12px;justify-content:center}
.mcas-fig figcaption{display:flex;flex-direction:column;gap:6px}
.mcas-fig figcaption .tag{align-self:flex-start;padding:4px 10px;border-radius:var(--r-pill);background:var(--ice-bg);color:var(--cyan)}
.curvefam text{font:500 10.5px var(--f-mono);letter-spacing:.06em}
.film-wrap{margin-bottom:40px}
.pfilm{margin:0;position:relative;aspect-ratio:16/9;border-radius:var(--r-glass);overflow:hidden;background:#0E2440;border:1px solid var(--glass-b);box-shadow:var(--shadow)}
.pfilm video{width:100%;height:100%;object-fit:contain;background:#0E2440}
.pfilm-ctl{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:14px}
.pstages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g);counter-reset:none}
.pstages li{padding:24px;border-radius:var(--r-glass);background:#fff;border:1px solid var(--glass-b);display:flex;flex-direction:column;gap:10px}
.pstages .n{font:500 12px var(--f-mono);letter-spacing:.08em;color:var(--cyan)}
@media (max-width:1100px){.pstages{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.mcas{grid-template-columns:1fr}.mcas-txt{padding:24px}}
@media (max-width:560px){.pstages{grid-template-columns:1fr}}

/* FAQ teaser */
#s-faq .faq details{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}

/* =====================================================================
LENS CARE
===================================================================== */
.lc-hero{padding:140px 0 72px;background:radial-gradient(50% 60% at 80% 40%,rgba(28,109,182,.08),transparent 70%),linear-gradient(180deg,#fff,var(--canvas))}
.lc-vis{position:relative;height:540px}
.lc-photo{position:absolute;right:0;top:0;width:60%;height:100%;margin:0;border-radius:24px;overflow:hidden;border:1px solid var(--glass-b);background:#CFE3F2;box-shadow:var(--shadow)}
.lc-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.lc-packs{position:absolute;left:0;bottom:32px;display:flex;align-items:flex-end;gap:6px;padding:20px 22px 16px;border-radius:20px;background:#fff;border:1px solid var(--glass-b);box-shadow:var(--shadow);z-index:2}
.lc-packs img{height:150px;width:auto;object-fit:contain;filter:drop-shadow(0 10px 12px rgba(14,40,72,.18))}
.lc-packs img:nth-child(2){height:176px}
.care .cn{position:absolute;left:16px;top:14px;font:500 12px var(--f-mono);letter-spacing:.08em;color:var(--text-3)}
.matrix .scroll{overflow-x:auto}
.matrix table{min-width:720px}
.matrix td .pro{margin-left:8px;vertical-align:middle}
.pro{background:var(--ice-bg);color:var(--text)}
@media (max-width:900px){.lc-hero{padding:120px 0 48px}.lc-vis{height:440px;margin-top:24px}.lc-photo{width:72%}.lc-packs{padding:14px 14px 10px}.lc-packs img{height:104px}.lc-packs img:nth-child(2){height:122px}}
@media (max-width:480px){.lc-vis{height:400px}.lc-photo{width:80%}}

/* =====================================================================
CATEGORY HEROES: not pinned (client 2026-11-07). The stage is an ordinary block, so the following section can never
rise into the hero artwork, whatever the viewport height.
===================================================================== */
.kg-pin.cat-hero{height:auto;max-height:none}
.cat-hero .kg-stage{position:relative;height:auto;min-height:0;max-height:none;padding:120px 0 64px;overflow:visible}
.cat-hero .kg-stage>.wrap{padding-top:0!important}
.cat-hero .kg-vis{margin-bottom:28px}
@media (max-width:900px){.cat-hero .kg-stage{padding:104px 0 40px}}
.ok-photo{position:relative;margin:0;border-radius:24px;overflow:hidden;border:1px solid var(--glass-b);box-shadow:var(--shadow);background:#140F08;aspect-ratio:1400/1054}
.ok-photo img{width:100%;height:100%;object-fit:cover}
.ok-photo figcaption{position:absolute;left:14px;bottom:14px;right:14px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 14px;border-radius:12px;background:none;font-size:13px;line-height:1.45;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.85),0 0 14px rgba(0,0,0,.6)}
.ok-photo figcaption .tag{color:#fff;font-weight:600}
.ok-diagram{border-radius:var(--r-glass);background:#fff;border:1px solid var(--glass-b);padding:12px}
.ok-diagram .kg-vis{margin:0}

/* =====================================================================
ABOUT
===================================================================== */
.ab-hero{padding-bottom:56px;background:linear-gradient(180deg,#fff,var(--canvas))}
.ab-photo{margin:48px 0 0;border-radius:24px;overflow:hidden;border:1px solid var(--glass-b);box-shadow:var(--shadow);aspect-ratio:1600/736;background:var(--ice-bg)}
.ab-photo img{width:100%;height:100%;object-fit:cover;object-position:40% 50%}
.ab-hero .facts{margin-top:32px}
@media (max-width:767px){.ab-photo{aspect-ratio:800/758}}

/* =====================================================================
SILVER 11
===================================================================== */
#silver-11 .dhero{padding-top:132px;background:linear-gradient(180deg,#fff,var(--canvas))}
#silver-11 .optic-well{aspect-ratio:600/520}
/* hero text starts level with the top of the figure instead of floating at the vertical centre of the tall left column (client 2026-11-11) */
#silver-11 .dhero .row{align-items:flex-start}
#silver-11 .dhero .row>.c5{padding-top:6px}
.s11-key{margin-top:16px;padding:20px 22px;border-radius:var(--r-glass);background:#fff;border:1px solid var(--glass-b)}
.s11-key ul{display:flex;flex-direction:column;margin-top:10px}
.s11-key li{display:flex;gap:16px;padding:10px 0;border-top:1px solid var(--hair)}
.s11-key b{flex:0 0 150px;font:500 12px/1.5 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text)}
.s11-key span{font-size:14px;line-height:1.55;color:var(--text-2)}
@media (max-width:640px){.s11-key li{flex-direction:column;gap:4px}.s11-key b{flex-basis:auto}}
/* material chips wrap inside narrow product cards */
.pc .chips .chip{white-space:normal;height:auto;min-height:28px;padding:5px 12px;line-height:1.35;align-items:baseline;flex-wrap:wrap;max-width:100%}
/* Naturelle shade tiles: photo + its own label, no overflow */
.hub-well .hub-well .pc .chips .chip{display:inline-block}
.ok-diagram{overflow:hidden}
@media (max-width:900px){
#silver-11 .dhero{padding-top:104px}
#silver-11 .dhero .row>.c5{order:-1;margin-bottom:24px}
#silver-11 .optic-well{aspect-ratio:auto;overflow:visible;padding:8px}
#silver-11 .optic-well svg.axis{position:relative;inset:auto;height:auto;aspect-ratio:600/520}
#silver-11 }
@media (max-width:640px){
.matrix table{min-width:0}
.matrix th:nth-child(2),.matrix td:nth-child(2){display:none}
.matrix th,.matrix td{padding:12px 8px;font-size:13px}
.matrix td.c,.matrix th.c{width:52px}
.matrix td .pro{display:none}
}

/* =====================================================================
2026-11-10 · LIGHT-BLUE-TO-WHITE GRADIENT THEME (client: "too white"; keep it light, premium, optical)
Reference lock (Refero): primary Alveos "blue-sky human science" (cool canvas, ice-blue chapters, navy text, one medium-blue
accent); borrowed from Letters "cloudborne" the sky-to-white stage gradient reserved for focal moments (heroes, enquiry island),
and from Bevel "daylight" the pale opening sky (#D2E5FF family) that dissolves into white. White cards with a hairline and a
soft cool shadow sit on the tinted chapters. Rejected: dark navy chapters, saturated blue, strong multi-hue gradients, glass
blur, heavy shadows. Partner (MOU) cards stay pure white. All colours below are tokens; sections only reference them.
===================================================================== */
:root{
--sky-top:#D3E5F6; --sky-mid:#E5F0FA; --sky-low:#F3F8FD; --mist:#E9F2FB; --blue-grey:#C9D9E8;
--grad-page:linear-gradient(180deg,#EAF3FB 0%,#F2F7FC 22%,#EDF4FB 60%,#F3F8FD 100%);
--grad-hero:radial-gradient(60% 70% at 78% 30%,rgba(28,109,182,.10),transparent 65%),linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 46%,var(--sky-low) 100%);
--grad-chapter:linear-gradient(180deg,#F3F8FD 0%,#FFFFFF 32%,#F2F7FC 100%);
--grad-chapter-ice:linear-gradient(180deg,#F2F7FC 0%,#E4EFFA 50%,#F2F7FC 100%);
--grad-island:linear-gradient(160deg,#CBE0F4 0%,#E3EEF9 48%,#FFFFFF 100%);
--grad-footer:linear-gradient(180deg,#F4F8FD 0%,#E3EEF8 100%);
--shadow-card:0 1px 2px rgba(14,40,72,.05),0 14px 34px -20px rgba(16,55,132,.28);
}
body{background:#EEF5FB}
#home,.page{background:var(--grad-page)}
.sec.on-paper{background:var(--grad-chapter)}
.sec.on-ice{background:var(--grad-chapter-ice)}
.glass,.pstages li,.mcas-txt,.mcas-fig,.rv-card{box-shadow:var(--shadow-card)}
/* heroes: pale sky at the top, dissolving to near-white */
.kg-bg,.cat-hero .kg-bg,.ab-hero,#silver-11 .dhero,.page-hero{background:var(--grad-hero)}
.page-hero{position:relative}
.enq,.vision,.reach{background:var(--grad-island);border-color:rgba(28,109,182,.14)}
.ftr{background:var(--grad-footer);border-top-color:rgba(14,40,72,.08)}
.mnav{background:linear-gradient(180deg,var(--sky-mid),#fff)}
.chip{background:#fff;border-color:rgba(14,40,72,.08)}
.cat-well,.pcard .well,.hub-well{background:radial-gradient(55% 50% at 50% 60%,color-mix(in srgb,var(--fam,#2B8CC9) 16%,transparent),transparent 72%),linear-gradient(180deg,var(--mist),#FFFFFF)}
/* partners (MOU): clean pure-white cards, distinct from the tinted chapter */
#s07 .pt-logo:not(.on-dark){background:#FFFFFF;border-color:rgba(14,40,72,.08);box-shadow:var(--shadow-card)}
#s07 .pt-logo.on-dark{box-shadow:var(--shadow-card)}
#s07 .pt-name{color:var(--text)}

/* ---------- home hero: rail removed (client 2026-11-10), so no reserved band under the copy ---------- */
.m4{--pad:56px}
@media (max-width:767px){.m4{--pad:40px}.m4-ctas .btn{flex:0 0 auto}}

/* ---------- process: McAsfeer* geometry figure ---------- */
.mcas-txt h3{color:var(--text);font-weight:300}
.mcas-geo{width:100%;height:auto}
.mcas-geo text{font:500 10px var(--f-mono);letter-spacing:.06em}
.b2l{margin:40px 0 0;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--g);align-items:center}
.b2l picture{display:block;border-radius:var(--r-glass);overflow:hidden;background:#fff;border:1px solid var(--glass-b);box-shadow:var(--shadow-card)}
.b2l img{width:100%;height:auto;aspect-ratio:1672/720;object-fit:cover;object-position:50% 64%}
.b2l figcaption{display:flex;flex-direction:column;gap:10px;padding:8px 8px 8px 0}
.b2l figcaption .tag{color:var(--cyan)}
@media (max-width:900px){.b2l{grid-template-columns:1fr}.b2l img{aspect-ratio:836/470;object-position:50% 50%}}

/* ---------- FAQ: topic index + contextual subsets ---------- */
.faq-toc{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px}
.faq-toc a{padding:8px 14px;border-radius:var(--r-pill);background:#fff;border:1px solid var(--glass-b);font:500 12px/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);text-decoration:none}
.faq-toc a:hover,.faq-toc a:focus-visible{border-color:rgba(28,109,182,.4);color:var(--cyan)}
.faq-grp{scroll-margin-top:96px}
.ctx-faq .faq details,.faq details{background:#fff}

/* ---------- technical literature ---------- */
.lit-list{display:flex;flex-direction:column;gap:16px}
.lit-card{display:flex;gap:24px;align-items:flex-start;padding:24px 28px;border-radius:var(--r-glass);background:#fff;border:1px solid var(--glass-b);box-shadow:var(--shadow-card)}
.lit-ic{position:relative;flex:0 0 64px;height:76px;display:flex;align-items:center;justify-content:center;border-radius:14px;background:linear-gradient(180deg,var(--mist),#fff);color:var(--cyan)}
.lit-ic svg{width:34px;height:42px}
.lit-ic b{position:absolute;bottom:8px;right:6px;padding:1px 5px;border-radius:4px;background:var(--cyan);color:#fff;font:500 9px/1.4 var(--f-mono);letter-spacing:.06em}
.lit-body{display:flex;flex-direction:column;gap:8px;min-width:0}
.lit-body .tag{color:var(--cyan)}
.lit-meta{font:400 12px var(--f-mono);letter-spacing:.04em;color:var(--text-3)}
.lit-dl{align-self:flex-start;margin-top:6px}
.lit-dl svg{width:14px;height:14px}
@media (max-width:560px){.lit-card{flex-direction:column;padding:20px}}

/* ---------- lens care: self-running hero loop (no scroll link, no photo) ---------- */
.lc-anim-hero .kg-stage{padding-top:120px}
.lc-loop svg{overflow:visible}
.lc-loop .lc-bottle,.lc-loop .lc-drop,.lc-loop .lc-fill,.lc-loop .lc-rip,.lc-loop .lc-case-fill{transform-box:view-box}
.lc-loop .lc-case-fill{animation:lcCase 6.4s var(--ease) infinite}
.lc-loop .lc-bottle{animation:lcBottle 6.4s var(--drift) infinite}
.lc-loop .lc-drop{transform-origin:380px 224px;animation:lcDrop 6.4s cubic-bezier(.45,0,.55,1) infinite}
.lc-loop .lc-fill{animation:lcFill 6.4s var(--ease) infinite}
.lc-loop .lc-rip{transform-origin:380px 404px;opacity:0;animation:lcRip 6.4s cubic-bezier(.2,.7,.3,1) infinite}
.lc-loop .lc-rip.r2{animation-name:lcRip2}
@keyframes lcBottle{0%,100%{transform:translateY(-6px)}30%{transform:translateY(0)}52%{transform:translateY(-3px)}}
@keyframes lcDrop{0%{transform:translateY(0) scale(.15);opacity:0}6%{opacity:1}30%{transform:translateY(0) scale(1)}36%{transform:translateY(5px) scale(.96,1.06)}49%{transform:translateY(150px) scale(.9,1.12);opacity:1}51%{transform:translateY(158px) scale(1.2,.6);opacity:0}100%{transform:translateY(0) scale(.15);opacity:0}}
@keyframes lcFill{0%,48%{transform:translateY(14px);opacity:.16}62%{transform:translateY(0);opacity:.36}88%{transform:translateY(0);opacity:.36}100%{transform:translateY(14px);opacity:.16}}
/* the case fills after the drop lands (about 52% of the loop), stays full, then fades with the rest of the loop */
@keyframes lcCase{0%,50%{transform:translateY(100px);opacity:0}54%{opacity:1}78%{transform:translateY(0);opacity:1}90%{transform:translateY(0);opacity:1}100%{transform:translateY(0);opacity:0}}
@keyframes lcRip{0%,49%{transform:scale(.3);opacity:0}51%{transform:scale(.35);opacity:.9}82%,100%{transform:scale(2.3);opacity:0}}
@keyframes lcRip2{0%,55%{transform:scale(.3);opacity:0}57%{transform:scale(.35);opacity:.7}90%,100%{transform:scale(1.9);opacity:0}}
.lc-steps span{animation:6.4s steps(1,end) infinite}
.lc-steps span:nth-child(1){animation-name:lcS1}.lc-steps span:nth-child(2){animation-name:lcS2}.lc-steps span:nth-child(3){animation-name:lcS3}.lc-steps span:nth-child(4){animation-name:lcS4}
@keyframes lcS1{0%{color:var(--cyan)}30%,100%{color:var(--text-3)}}
@keyframes lcS2{0%{color:var(--text-3)}30%{color:var(--cyan)}49%,100%{color:var(--text-3)}}
@keyframes lcS3{0%{color:var(--text-3)}49%{color:var(--cyan)}66%,100%{color:var(--text-3)}}
@keyframes lcS4{0%{color:var(--text-3)}66%{color:var(--cyan)}100%{color:var(--text-3)}}
/* reduced motion (and ?final): the composed final frame, no movement */
@media (prefers-reduced-motion:reduce){
.lc-loop .lc-bottle,.lc-loop .lc-drop,.lc-loop .lc-fill,.lc-loop .lc-rip,.lc-loop .lc-case-fill,.lc-steps span{animation:none!important}
.lc-loop .lc-case-fill{opacity:1;transform:none}
.lc-loop .lc-drop{opacity:0}
.lc-loop .lc-fill{opacity:.36;transform:none}
.lc-loop .lc-rip.r1{opacity:.45;transform:scale(1.5)}
.lc-steps span:nth-child(4){color:var(--cyan)}
}
@media (max-width:900px){.lc-anim-hero .kg-stage{padding-top:104px}}
/* KeratoGenius scleral hero: the existing white logo artwork, unchanged, on a deep-blue plate so it reads on the light sky */
#keratogenius-scleral .kg-logo{width:auto;height:44px;padding:9px 14px;border-radius:14px;background:linear-gradient(160deg,#1E5A92,#1C6DB6);box-shadow:var(--shadow-card);object-fit:contain;box-sizing:content-box}
/* Products menu (client 2026-11-10): six category tiles in a 3 + 3 grid (the "All products" tile was removed with the hub) */
.dd-sheet{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:min(720px,92vw);margin-left:calc(min(720px,92vw)/-2)}
.dd-sheet .fam-tile{flex:none;min-width:0}
@media (max-width:980px){.dd-sheet{display:none}}
/* small screens: the 760-unit illustration scales to ~45%, so its labels are enlarged to stay readable (~7.5 px at 390 px) */
@media (max-width:560px){#keratogenius-scleral .kg-vis text,.lc-loop text{font-size:17px;letter-spacing:.02em}}

/* ================= 2026-11-10 (second round) ================= */
/* Home: featured product (KeratoGenius Ortho-K, fluorescein film). Replaces the category-card grid. */
/* two featured products side by side (client 2026-11-11): Ortho-K film and the scleral slit-lamp photograph in equal 4:3 frames */
.feat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--g)*2);align-items:stretch}
.feat-card{display:flex;flex-direction:column;gap:28px;min-width:0}
.feat-card .feat-copy{flex:1;display:flex;flex-direction:column}
.feat-card .h-ctas{margin-top:auto;padding-top:24px}
.feat-film img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.feat-film{position:relative;margin:0;border-radius:24px;overflow:hidden;background:#140F08;aspect-ratio:1280/964;border:1px solid var(--glass-b);box-shadow:var(--shadow-card)}
.feat-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.feat-film figcaption{position:absolute;left:14px;right:14px;bottom:14px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 14px;border-radius:12px;background:none;font-size:13px;line-height:1.45;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.85),0 0 14px rgba(0,0,0,.6)}
.feat-film figcaption .tag{color:#fff;font-weight:600}
.feat-logo img{display:block;width:auto;height:40px;padding:9px 14px;border-radius:14px;background:linear-gradient(160deg,#1E5A92,#1C6DB6);box-shadow:var(--shadow-card);box-sizing:content-box;object-fit:contain}
.feat-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-left:0;margin-right:0;margin-bottom:0;border-radius:16px;overflow:hidden;background:var(--hair);border:1px solid var(--hair)}
.feat-facts div{background:#fff;padding:14px 16px}
.feat-facts dt{font:500 11px/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.feat-facts dd{margin:6px 0 0;font-size:18px;font-weight:600;color:var(--text)}
.feat .h-ctas{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:900px){.feat{grid-template-columns:1fr;gap:56px}.feat-card .feat-copy{max-width:640px}}
@media (max-width:560px){.feat-film{border-radius:18px}.feat-film figcaption{position:static;border-radius:0;background:#fff;color:var(--text-2);text-shadow:none}.feat-film figcaption .tag{color:var(--cyan)}.feat-film{aspect-ratio:auto}.feat-film video{position:static;aspect-ratio:1280/964;height:auto}.feat-film img{position:static;aspect-ratio:1400/1050;height:auto}}
/* Ortho-K hero: the fluorescein film plays over the still (same framing); the still stays for reduced motion / Save-Data */
.ok-photo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Cosmetic page (client 2026-11-11): real eye photographs from the Naturelle Eyes literature replace the drawn eye. Hero: two rows of
 * photographs gliding slowly in opposite directions (CSS only). Product cards: a tidy mosaic of the same photographs. */
.kg-vis.cos-vis{aspect-ratio:auto;margin-bottom:0;min-width:0}
.cat-hero .kg-stage>.wrap>.c7{min-width:0}
.cos-board{display:flex;flex-direction:column;gap:30px}
.cos-row{display:flex;flex-direction:column;gap:12px;min-width:0}
.cos-cap{margin:0;font:500 12px/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cyan)}
.cos-win{overflow:hidden;padding:4px 0 6px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.cos-track{display:flex;width:max-content;animation:cosSlide 66s linear infinite}
.cos-row.cos-r .cos-track{animation-direction:reverse;animation-duration:58s}
.cos-board:hover .cos-track,.cos-board:focus-within .cos-track{animation-play-state:paused}
.cos-tile{margin:0 14px 0 0;flex:0 0 252px;display:flex;flex-direction:column;gap:9px}
.cos-tile img{display:block;width:100%;height:auto;aspect-ratio:640/372;object-fit:cover;border-radius:16px;border:1px solid var(--glass-b);box-shadow:var(--shadow-card);background:var(--mist)}
.cos-tile figcaption{font:500 11px/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
@keyframes cosSlide{to{transform:translateX(-50%)}}
@media (max-width:900px){.cos-tile{flex-basis:210px}}
@media (prefers-reduced-motion:reduce){
.cos-track{animation:none;width:auto}
.cos-win{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
.cos-tile[aria-hidden="true"]{display:none}
}
/* product cards: the well is a mosaic of the same photographs, shade names as small labels */
.cos-mosaic{position:absolute;inset:0;display:grid;gap:2px;background:#fff}
.cos-mosaic.n6{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
.cos-mosaic.n5{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
.cos-mosaic.n5 .cos-cell:nth-child(-n+3){grid-column:span 2}
.cos-mosaic.n5 .cos-cell:nth-child(n+4){grid-column:span 3}
.cos-mosaic.n2{grid-template-rows:repeat(2,minmax(0,1fr))}
.cos-cell{position:relative;overflow:hidden;min-width:0;min-height:0}
.cos-cell img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.cos-cell b{position:absolute;left:0;right:0;bottom:0;padding:12px 7px 4px;font:500 9.5px/1.2 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:#fff;background:linear-gradient(180deg,transparent,rgba(14,30,52,.62))}
.pc .well>img.mark{width:auto;height:84px;max-width:70%;object-fit:contain;margin-top:26px}

/* MOU / partnership cards (client 2026-11-11): every institution shows its name and, under it, "City, State" in one format.
 * The white card backgrounds and the carousel are unchanged. */
.pt-name{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:4px}
.pt-name b{display:block;font-weight:600;color:var(--text)}
.pt-name .pt-loc{display:block;margin-top:auto;padding-top:3px;font:400 11.5px/1.35 var(--f-mono);letter-spacing:.02em;color:var(--text-3)}
.lit-inline{margin-top:40px;padding-top:28px;border-top:1px solid var(--hair)}
.lit-inline .lit-sec>.stack-24{margin-bottom:16px}
.lit-inline .lit-sec{padding-bottom:0}

/* About, "Who we are" (client 2026-11-11): no dark frame, border, shadow or caption card round the photograph. The picture sits
 * directly on the light-blue page with softly rounded corners and a plain caption line under it; the text column is unchanged. */
.ab-fig{margin:0;display:flex;flex-direction:column;gap:14px}
.ab-fig img{display:block;width:100%;height:auto;aspect-ratio:2000/1091;object-fit:cover;object-position:58% 50%;border-radius:20px}
.ab-fig .ab-cap{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;font-size:14px;line-height:1.5;color:var(--text-2)}
.ab-fig .ab-cap .tag{color:var(--cyan)}
@media (max-width:767px){.ab-fig img{aspect-ratio:1/1}}