/* ION Live Science, redesign v5
   Direction: "the object, large" (hero) + "the specimen catalogue" (range).
   Look borrowed from Apple's DESIGN.md: one ink, a tone-step surface, a single action blue,
   pill buttons, no shadows or gradients on chrome. Field colour is sampled from the bottle photo. */
:root{
 --ground:#ffffff;--tone:#f5f5f7;--tone-2:#ebebef;--field:#d1ebf9;--deep:#0c2236;
 --ink:#1d1d1f;--ink-2:#47474c;--on-deep:#f5f5f7;--on-deep-2:#b7cadb;
 --accent:#0058b3;--accent-press:#00488f;--on-accent:#ffffff;--link:#0058b3;
 --field-ink:#0d2236;--input:#86868b;--ok:#0b6b35;--ok-bg:#e3f4ea;--warn:#a1261c;--warn-bg:#fbe9e7;
 --font:'Inter','Noto Sans Bengali',system-ui,-apple-system,'Segoe UI',sans-serif;
 --t-display:clamp(3rem,8.2vw,8.75rem);--t-h2:clamp(2.25rem,4.8vw,4.75rem);--t-h3:clamp(1.25rem,1.6vw,1.5rem);--t-body:1.125rem;--t-small:.9375rem;
 --gutter:clamp(16px,2.6vw,40px);--section:clamp(96px,12vw,200px);
 --ease:cubic-bezier(.22,1,.36,1);--fast:160ms;--mid:420ms;--slow:900ms;
 color-scheme:light;
}
:root[data-theme="dark"]{
 --ground:#0b0c0f;--tone:#16181d;--tone-2:#1f2229;--deep:#081827;
 --ink:#f5f5f7;--ink-2:#b9bcc4;--link:#5aa9ff;--accent:#0a66d0;--accent-press:#0858b5;
 --input:#6e7380;--ok:#7bd8a0;--ok-bg:#10281b;--warn:#ff9c90;--warn-bg:#331513;
 color-scheme:dark;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
 --ground:#0b0c0f;--tone:#16181d;--tone-2:#1f2229;--deep:#081827;
 --ink:#f5f5f7;--ink-2:#b9bcc4;--link:#5aa9ff;--accent:#0a66d0;--accent-press:#0858b5;
 --input:#6e7380;--ok:#7bd8a0;--ok-bg:#10281b;--warn:#ff9c90;--warn-bg:#331513;color-scheme:dark}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{margin:0;min-width:320px;background:var(--ground);color:var(--ink);font:400 var(--t-body)/1.55 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background-color var(--mid),color var(--mid)}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.035em;line-height:1;text-wrap:balance;color:var(--ink)}
h1{font-size:var(--t-display);letter-spacing:-.05em;line-height:.94}
h2{font-size:var(--t-h2);line-height:.98}
h3{font-size:var(--t-h3);letter-spacing:-.02em;line-height:1.15}
p{margin:0 0 1em;max-width:62ch}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
svg{width:22px;height:22px;flex:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation}
:focus-visible{outline:3px solid var(--link);outline-offset:3px;border-radius:4px}
::selection{background:var(--field);color:var(--field-ink)}
[lang="bn"]{font-family:'Noto Sans Bengali','Inter',system-ui,sans-serif;line-height:1.75}
.shell{width:min(1360px,100% - 2*var(--gutter));margin-inline:auto}
.skip{position:absolute;left:12px;top:-60px;z-index:999;background:var(--ink);color:var(--ground);padding:12px 18px;border-radius:999px;transition:top var(--fast)}
.skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
main:focus{outline:none}
.section-pad{padding-block:clamp(48px,6vw,96px) var(--section)}

/* ---------- buttons & links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 24px;border:0;border-radius:999px;font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;line-height:1;white-space:nowrap;transition:background-color var(--fast),color var(--fast),transform var(--fast) var(--ease);text-decoration:none}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-press)}
.btn-light{background:#fff;color:#0c2236}
.btn-light:hover{background:var(--field)}
.btn-quiet{background:var(--tone-2);color:var(--ink)}
.btn-quiet:hover{background:var(--field);color:var(--field-ink)}
.btn-danger{color:var(--warn)}
.btn-small{min-height:40px;padding:8px 18px;font-size:var(--t-small);background:var(--tone-2);color:var(--ink)}
.btn-small:hover{background:var(--accent);color:var(--on-accent)}
.btn-large{min-height:56px;padding:16px 32px;font-size:1.125rem}
.btn.wide{width:100%}
.btn:disabled,.btn.disabled{opacity:.42;pointer-events:none}
.btn.is-busy{pointer-events:none}
.busy-orb{width:20px;height:20px;display:block}
.text-link{display:inline-flex;align-items:center;gap:8px;color:var(--link);font-weight:600;min-height:44px}
.text-link svg{width:18px;height:18px;transition:transform var(--fast) var(--ease)}
.text-link:hover svg{transform:translateX(4px)}
.text-link:hover{text-decoration:underline;text-underline-offset:4px}
.small-link{display:inline-block;margin-top:14px;color:var(--link);font-size:var(--t-small);min-height:44px;padding-top:12px}
main a:not(.btn):not(.text-link):not(.product-name):not(.specimen-name):not(.person):not(.team-card):not(.article-card):not(.product-image):hover{text-decoration:underline;text-underline-offset:3px}
.legal a,.filter-note a,.auth-switch a,.faq-more a,.contact-side a,.panel p a,.empty a:not(.btn),.description a{color:var(--link)}

/* ---------- header ---------- */
.site-nav{position:sticky;top:0;z-index:100;background:var(--ground);transition:background-color var(--mid)}
.page-home .site-nav{background:var(--field)}
:root[data-theme="dark"] .page-home .site-nav{background:var(--ground)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px}
.brand{display:flex;align-items:baseline;gap:10px;color:var(--ink);flex:none}
.page-home .brand,.page-home .desktop-links a,.page-home .nav-actions{color:var(--field-ink)}
:root[data-theme="dark"] .page-home .brand,:root[data-theme="dark"] .page-home .desktop-links a,:root[data-theme="dark"] .page-home .nav-actions{color:var(--ink)}
.brand-mark{font-size:2rem;font-weight:800;letter-spacing:-.07em;line-height:1;color:var(--accent)}
:root[data-theme="dark"] .brand-mark{color:var(--link)}
.brand-name{font-size:var(--t-small);font-weight:600}
.desktop-links{display:flex;gap:4px}
.desktop-links a{padding:10px 14px;border-radius:999px;font-size:var(--t-small);font-weight:500;transition:background-color var(--fast)}
.desktop-links a:hover{background:rgba(127,127,140,.14)}
.desktop-links a[aria-current="page"]{font-weight:700;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.nav-actions{display:flex;align-items:center;gap:4px}
.icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;border:0;border-radius:999px;background:transparent;color:inherit;transition:background-color var(--fast),transform var(--fast)}
.icon-btn:hover{background:rgba(127,127,140,.14)}
.icon-btn:active{transform:scale(.94)}
.theme-toggle .i-sun{display:none}
:root[data-theme="dark"] .theme-toggle .i-sun{display:block}
:root[data-theme="dark"] .theme-toggle .i-moon{display:none}
.bag-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 8px 8px 16px;margin-left:6px;border-radius:999px;background:var(--ink);color:var(--ground);font-size:var(--t-small);font-weight:600;transition:transform var(--fast)}
.bag-link span{display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 6px;border-radius:999px;background:var(--ground);color:var(--ink);font-variant-numeric:tabular-nums}
.bag-link:active{transform:scale(.97)}
.menu-toggle{display:none}
.menu-toggle path{transition:transform var(--fast) var(--ease);transform-origin:center}
.menu-toggle[aria-expanded="true"] .l1{transform:translateY(4px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .l2{transform:translateY(-4px) rotate(-45deg)}
.mobile-links{background:var(--ground);padding:8px 0 28px;box-shadow:0 24px 40px rgba(0,0,0,.14)}
.mobile-links .shell{display:flex;flex-direction:column}
.mobile-links a{font-size:1.75rem;font-weight:700;letter-spacing:-.03em;padding:8px 0;color:var(--ink)}
.mobile-sub{display:flex;flex-wrap:wrap;gap:4px 20px;margin-top:16px}
.mobile-sub a{font-size:1rem;font-weight:500;color:var(--ink-2)}

/* ---------- flash ---------- */
.flash-wrapper{position:fixed;z-index:150;left:50%;top:84px;transform:translateX(-50%);width:min(560px,calc(100% - 32px));pointer-events:none}
.notice{pointer-events:auto;padding:16px 20px;border-radius:14px;background:var(--ok-bg);color:var(--ok);font-weight:600;box-shadow:0 18px 40px rgba(0,0,0,.16);animation:toast 4.5s var(--ease) forwards}
.notice.warn{background:var(--warn-bg);color:var(--warn)}
@keyframes toast{0%{opacity:0;transform:translateY(-12px)}6%,88%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-8px);visibility:hidden}}

/* ---------- entrances ---------- */
html.motion .rise{opacity:0;transform:translateY(24px);transition:opacity var(--slow) var(--ease),transform var(--slow) var(--ease);transition-delay:var(--d,0ms)}
html.motion .rise.in{opacity:1;transform:none}

/* ---------- shared blocks ---------- */
.page-head{padding-block:clamp(56px,8vw,128px) clamp(32px,4vw,64px)}
.page-head h1{font-size:clamp(2.75rem,6.4vw,6.5rem);max-width:16ch}
.page-head p{margin-top:24px;font-size:clamp(1.125rem,1.4vw,1.375rem);color:var(--ink-2);max-width:52ch}
.page-head .btn{margin-top:24px}
.section-head{margin-bottom:clamp(32px,4vw,56px)}
.section-head p{color:var(--ink-2);margin-top:16px}
.panel{background:var(--tone);padding:clamp(24px,3vw,44px);border-radius:0}
.panel h2{font-size:clamp(1.75rem,2.4vw,2.25rem);margin-bottom:24px}
.panel h3{margin:32px 0 16px}
.narrow-panel{max-width:620px}
.empty{padding:clamp(32px,5vw,64px);background:var(--tone)}
.empty h2{font-size:clamp(1.75rem,3vw,2.75rem);margin-bottom:12px}
.empty p{color:var(--ink-2)}
.button-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* ---------- forms ---------- */
.form-grid{display:grid;gap:18px}
.field{display:grid;gap:8px}
.field>span{font-size:var(--t-small);font-weight:600}
.field>span i{font-style:normal;font-weight:400;color:var(--ink-2)}
input:not([type=radio]):not([type=checkbox]):not([type=hidden]),select,textarea{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--input);border-radius:10px;background:var(--ground);color:var(--ink);font-size:1rem;transition:border-color var(--fast),box-shadow var(--fast)}
textarea{resize:vertical;min-height:140px}
input:focus,select,textarea:focus{outline:none}
input:focus-visible,select:focus-visible,textarea:focus-visible{border-color:var(--link);box-shadow:0 0 0 3px color-mix(in srgb,var(--link) 30%,transparent)}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{font-size:var(--t-small);font-weight:600;padding:0;margin-bottom:10px}
.checkbox-row{display:flex;gap:24px}
.checkbox-row label{display:flex;gap:8px;align-items:center;min-height:44px}
input[type=checkbox],input[type=radio]{width:20px;height:20px;accent-color:var(--accent)}
.hint{font-size:var(--t-small);color:var(--ink-2);margin:16px 0}

/* ================= HOME ================= */
.hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);min-height:calc(100svh - 72px);background:var(--field);color:var(--field-ink);overflow:hidden}
:root[data-theme="dark"] .hero{background:var(--ground);color:var(--ink)}
.hero-copy{width:auto;margin:0;padding:clamp(40px,6vw,96px) var(--gutter) clamp(32px,4vw,64px) max(var(--gutter),calc((100vw - 1360px)/2));display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.hero h1{color:inherit;max-width:9.5ch}
.hero-lede{font-size:clamp(1.125rem,1.5vw,1.375rem);line-height:1.45;max-width:36ch;margin:0}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.page-home .hero .text-link{color:#0d2236}
:root[data-theme="dark"] .page-home .hero .text-link{color:var(--link)}
.hero-facts{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:clamp(24px,4vw,64px);margin:0}
.hero-facts div{display:flex;flex-direction:column-reverse;gap:4px}
.hero-facts dt{font-size:var(--t-small);font-weight:500}
.hero-facts dd{margin:0;font-size:clamp(1.75rem,2.6vw,2.5rem);font-weight:700;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.hero-photo{margin:0;background:var(--field);display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.hero-photo img{width:100%;height:100%;max-height:calc(100svh - 72px);object-fit:contain;object-position:50% 100%;transform-origin:50% 100%}
html.motion .hero-photo img{animation:settle 1.6s var(--ease) both}
@keyframes settle{from{transform:translateY(6%) scale(1.06);opacity:0}to{transform:none;opacity:1}}

.range{padding-block:var(--section)}
.range-intro{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px 64px;align-items:end;margin-bottom:clamp(56px,7vw,112px)}
.range-intro p{color:var(--ink-2);font-size:clamp(1.125rem,1.4vw,1.3rem);margin:0}
.family{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,88px);align-items:start}
.family+.family{margin-top:clamp(80px,9vw,144px)}
.family-side{position:sticky;top:96px}
.family-photo{margin:0 0 28px;background:var(--tone);aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden}
.family-photo img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.family:hover .family-photo img{transform:scale(1.03)}
.family-side h3{font-size:clamp(2rem,3.2vw,3.25rem);letter-spacing:-.04em;margin-bottom:14px}
.family-side p{color:var(--ink-2)}
.specimens{list-style:none;margin:0;padding:0}
.specimen{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"name price add" "note price add";align-items:center;gap:2px 24px;padding:18px 20px;transition:background-color var(--fast)}
.specimen:nth-child(odd){background:var(--tone)}
.specimen:hover{background:var(--field);color:var(--field-ink)}
.specimen:hover .specimen-note{color:var(--field-ink)}
.specimen-name{grid-area:name;font-size:clamp(1.125rem,1.4vw,1.3125rem);font-weight:600;letter-spacing:-.015em}
.specimen-name:hover{text-decoration:underline;text-underline-offset:4px}
.specimen-note{grid-area:note;font-size:var(--t-small);color:var(--ink-2)}
.specimen .price{grid-area:price}
.specimen .inline-cart{grid-area:add}
.price{font-size:1.25rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}

.planner{background:var(--deep);color:var(--on-deep);padding-block:var(--section)}
.planner h2{color:var(--on-deep);max-width:17ch}
.planner-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:48px clamp(24px,3vw,48px);align-items:start}
.planner-copy{grid-column:1/8}
.planner-copy p{color:var(--on-deep-2);margin-top:28px;font-size:clamp(1.125rem,1.4vw,1.3rem)}
.planner-form{grid-column:1/7;display:grid;gap:36px}
.planner legend{color:var(--on-deep);font-size:1rem}
.stepper{display:flex;align-items:center;gap:12px}
.stepper legend{width:100%}
.step{width:56px;height:56px;border:0;border-radius:999px;background:rgba(255,255,255,.12);color:var(--on-deep);font-size:1.75rem;line-height:1;transition:background-color var(--fast),transform var(--fast)}
.step:hover{background:rgba(255,255,255,.22)}
.step:active{transform:scale(.92)}
.planner input#people{width:96px;text-align:center;font-size:2.25rem;font-weight:700;letter-spacing:-.04em;min-height:64px;background:transparent;border:0;color:var(--on-deep);font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.planner input#people::-webkit-inner-spin-button{-webkit-appearance:none}
.use{display:grid;gap:8px}
.use label{display:flex;align-items:center;gap:14px;min-height:56px;padding:12px 18px;border-radius:14px;background:rgba(255,255,255,.07);cursor:pointer;transition:background-color var(--fast)}
.use label:hover{background:rgba(255,255,255,.13)}
.use label:has(input:checked){background:#fff;color:#0c2236}
.use b{font-variant-numeric:tabular-nums;margin-right:6px}
.planner-result{grid-column:7/13;grid-row:2;align-self:end}
.jars{margin:0;display:flex;flex-direction:column}
.jars #jarCount{font-size:clamp(7rem,17vw,16rem);font-weight:800;letter-spacing:-.07em;line-height:.8;font-variant-numeric:tabular-nums;color:var(--field);display:inline-block}
.jars #jarCount.jar-tick{animation:tick .45s var(--ease)}
@keyframes tick{0%{transform:translateY(10px);opacity:.3}100%{transform:none;opacity:1}}
.jars-unit{font-size:clamp(1.5rem,2.4vw,2.25rem);font-weight:700;letter-spacing:-.03em;margin-top:18px}
.jars-detail{color:var(--on-deep-2);margin:14px 0 28px;font-variant-numeric:tabular-nums}
.jars-detail strong{color:var(--on-deep)}

.place{padding-bottom:var(--section)}
.place-photo{margin:0;height:min(78svh,820px);overflow:hidden;background:var(--tone)}
.place-photo img{width:100%;height:118%;object-fit:cover;will-change:transform}
.place-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px clamp(24px,3vw,48px);margin-top:clamp(48px,6vw,96px)}
.place-grid h2{grid-column:1/7}
.place-copy{grid-column:8/13;font-size:clamp(1.125rem,1.4vw,1.3rem)}
.place-inset{grid-column:8/13;margin:0;aspect-ratio:16/9;overflow:hidden}
.place-inset img{width:100%;height:100%;object-fit:cover}

.research{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:48px clamp(24px,3vw,48px);padding-bottom:var(--section);align-items:start}
.research-photo{grid-column:1/6;margin:0;position:sticky;top:96px;aspect-ratio:4/5;overflow:hidden;background:var(--deep)}
.research-photo img{width:100%;height:100%;object-fit:cover}
.research-copy{grid-column:7/13}
.research-copy>p{font-size:clamp(1.125rem,1.4vw,1.3rem);color:var(--ink-2);margin-top:28px}
.years{list-style:none;margin:48px 0 32px;padding:0;display:grid;gap:8px}
.years li{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:28px;align-items:baseline;padding:24px 0}
.years b{font-size:clamp(2.75rem,5vw,4.75rem);font-weight:800;letter-spacing:-.06em;line-height:.9;font-variant-numeric:tabular-nums;min-width:3.3ch}
.years span{font-size:1.125rem;max-width:34ch}

.people{padding-bottom:var(--section)}
.people-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 64px;align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.people-head p{color:var(--ink-2);margin:0}
.people-head .text-link{grid-column:2}
.people-row{display:grid;grid-template-columns:1fr 1.5fr 1fr 1fr;gap:clamp(12px,1.6vw,24px);align-items:end}
.person{display:block}
.person img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;background:var(--tone);margin-bottom:16px;filter:saturate(.9);transition:filter var(--mid)}
.person:hover img{filter:saturate(1.05)}
.person b{display:block;font-size:1.0625rem;letter-spacing:-.01em;line-height:1.3}
.person span{display:block;font-size:var(--t-small);color:var(--ink-2)}
.person:hover b{text-decoration:underline;text-underline-offset:3px}
.person-lead b{font-size:1.375rem}

.ordering{background:var(--tone);padding-block:var(--section)}
.ordering-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px clamp(32px,6vw,112px);align-items:start}
.how{list-style:none;padding:0;margin:40px 0;display:grid;gap:22px;counter-reset:how}
.how li{font-size:1.1875rem;max-width:38ch}
.how b{display:block;font-size:clamp(1.375rem,2vw,1.75rem);letter-spacing:-.03em;margin-bottom:4px}
.faq-item{background:var(--ground);margin-bottom:8px}
.ordering .faq-item{background:var(--ground)}
.faq-list .faq-item,.panel .faq-item{background:var(--tone)}
.panel .faq-item{background:var(--ground)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 24px;font-weight:600;font-size:1.0625rem;min-height:56px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"";width:12px;height:12px;flex:none;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(45deg) translate(-3px,-3px);transition:transform var(--fast) var(--ease)}
.faq-item[open] summary::after{transform:rotate(225deg) translate(-3px,-3px)}
.faq-item>p,.faq-item>form{padding:0 24px 24px;margin:0}
.faq-short .text-link{margin-top:12px}

/* ================= SHOP ================= */
.shop-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:start;padding-bottom:var(--section)}
.filters{position:sticky;top:96px;display:grid;gap:20px}
.filters form{display:grid;gap:22px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips legend{width:100%}
.chips a{display:inline-flex;align-items:center;min-height:40px;padding:8px 16px;border-radius:999px;background:var(--tone);font-size:var(--t-small);font-weight:500;transition:background-color var(--fast)}
.chips a:hover{background:var(--tone-2);text-decoration:none!important}
.chips a[aria-current="true"]{background:var(--ink);color:var(--ground)}
.filter-note{font-size:var(--t-small);color:var(--ink-2)}
.results-line{color:var(--ink-2);margin-bottom:20px}
.results-line strong{color:var(--ink)}
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:clamp(24px,2.4vw,40px) clamp(14px,1.6vw,24px)}
.product-card{display:flex;flex-direction:column}
.product-image{display:block;background:var(--field);aspect-ratio:1;overflow:hidden;margin-bottom:16px}
.product-image img,.cart-line img,.detail-gallery img{mix-blend-mode:multiply}
.product-image img{width:100%;height:100%;object-fit:contain;transition:transform var(--slow) var(--ease)}
.product-card:hover .product-image img{transform:scale(1.04)}
.product-name{font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.product-name:hover{text-decoration:underline;text-underline-offset:3px}
.product-note{font-size:var(--t-small);color:var(--ink-2);margin:4px 0 0}
.product-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:14px}
.stock-out{font-size:var(--t-small);color:var(--ink-2)}

/* ================= PRODUCT ================= */
.detail-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,5vw,96px);padding-block:clamp(32px,4vw,64px) var(--section);align-items:start}
.detail-gallery{background:var(--field);position:sticky;top:88px;aspect-ratio:1;display:grid;place-items:center;overflow:hidden}
.detail-gallery img{width:100%;height:100%;object-fit:contain}
.crumbs{font-size:var(--t-small);color:var(--ink-2);margin-bottom:28px}
.crumbs a{color:var(--link)}
.detail-info h1{font-size:clamp(2.5rem,4.6vw,4.5rem);letter-spacing:-.045em;line-height:.98}
.detail-note{font-size:1.25rem;color:var(--ink-2);margin:18px 0 0}
.detail-price{font-size:clamp(2rem,3vw,2.75rem);font-weight:700;letter-spacing:-.04em;margin:32px 0 4px;font-variant-numeric:tabular-nums}
.detail-price del{font-size:1.25rem;color:var(--ink-2);font-weight:500}
.detail-stock{color:var(--ink-2);font-size:var(--t-small)}
.detail-actions{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin:32px 0}
.buy-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.buy-form label{width:100%;font-size:var(--t-small);font-weight:600}
.buy-form input{width:96px!important}
.detail-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;margin:0 0 40px;background:var(--ground)}
.detail-facts div{background:var(--tone);padding:18px 20px}
.detail-facts dt{font-size:var(--t-small);color:var(--ink-2)}
.detail-facts dd{margin:4px 0 0;font-weight:600}
.detail-info{min-width:0}
.description{font-size:1.0625rem;max-width:62ch;color:var(--ink);overflow-wrap:anywhere}

/* ================= CART / CHECKOUT ================= */
.basket-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:clamp(24px,4vw,56px);align-items:start;padding-bottom:var(--section)}
.cart-line{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:20px;align-items:center;padding:16px;background:var(--tone);margin-bottom:8px}
.cart-line img{width:96px;height:96px;object-fit:contain;background:var(--field)}
.cart-line>div{display:grid;gap:4px}
.cart-line span{font-size:var(--t-small);color:var(--ink-2)}
.cart-line label{display:flex;align-items:center;gap:10px;font-size:var(--t-small);margin-top:6px}
.cart-line label input{width:88px!important;min-height:40px!important}
.cart-line>strong{font-variant-numeric:tabular-nums;font-size:1.125rem}
.summary-card{background:var(--tone);padding:clamp(24px,2.6vw,36px);position:sticky;top:96px}
.summary-card h2{font-size:1.75rem;margin-bottom:20px}
.total-line{display:flex;justify-content:space-between;gap:16px;padding:10px 0;font-variant-numeric:tabular-nums}
.total-line span{color:var(--ink-2)}
.total-line.grand{font-size:1.375rem;font-weight:700;margin:12px 0 22px;padding-top:18px;border-top:2px solid var(--ink)}
.total-line.grand span{color:var(--ink)}
.payment-note{display:grid;gap:4px;padding:18px 20px;background:var(--field);color:var(--field-ink)}
.payment-note span{font-size:var(--t-small)}

/* ================= AUTH / ACCOUNT ================= */
.auth-shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:calc(100svh - 72px)}
.auth-photo{margin:0;overflow:hidden;background:var(--deep)}
.auth-photo img{width:100%;height:100%;object-fit:cover}
.auth-form{padding:clamp(40px,7vw,120px) var(--gutter);max-width:620px;width:100%;align-self:center}
.auth-form h1{font-size:clamp(2.75rem,5vw,4.75rem);margin-bottom:16px}
.auth-form>p{color:var(--ink-2);margin-bottom:32px}
.auth-form form{display:grid;gap:18px}
.auth-switch{margin-top:20px;font-size:var(--t-small)}
.dashboard-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start;padding-bottom:var(--section)}
.account-links{display:grid;gap:2px;position:sticky;top:96px}
.account-links a,.account-links button{display:flex;align-items:center;min-height:48px;padding:10px 16px;background:var(--tone);border:0;text-align:left;font-weight:500;width:100%;transition:background-color var(--fast)}
.account-links a:hover,.account-links button:hover{background:var(--tone-2);text-decoration:none!important}
.account-links a[aria-current="page"]{background:var(--ink);color:var(--ground)}
.account-links form{margin-top:16px}
.account-links button{color:var(--warn)}
.profile-top{display:flex;gap:20px;align-items:center;margin-bottom:24px}
.profile-top h2{margin:0 0 4px}
.profile-top p{margin:0;color:var(--ink-2)}
.avatar-circle{width:72px;height:72px;border-radius:999px;display:grid;place-items:center;background:var(--accent);color:#fff;font-size:2rem;font-weight:700;flex:none}
.address-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-bottom:24px}
.address-tile{display:flex;flex-direction:column;justify-content:space-between;gap:16px}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:14px 12px;border-bottom:1px solid var(--tone-2)}
th{font-size:var(--t-small);color:var(--ink-2);font-weight:600}
td a{color:var(--link);font-weight:600}
.table-scroller{overflow-x:auto}
.tracking-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0}
.tracking-row+.tracking-row{border-top:1px solid var(--tone-2)}
.tracking-row p{margin:4px 0 0;color:var(--ink-2)}
.order-delivery{margin-top:24px}
.order-delivery h3{margin:0 0 8px}
.success-page{padding-block:clamp(56px,8vw,128px) var(--section)}
.success-page .panel{text-align:left}
.success-mark{width:64px;height:64px;margin-bottom:24px}
.success-mark circle{fill:var(--ok)}
.success-mark path{stroke:#fff}
.success-page h1{font-size:clamp(2.5rem,5vw,4.5rem);margin-bottom:20px}

/* ================= ABOUT / TEAM / CONTENT ================= */
.about-hero figure{margin:0;height:min(70svh,720px);overflow:hidden}
.about-hero img{width:100%;height:100%;object-fit:cover}
.about-hero .shell{padding-block:clamp(48px,6vw,96px) 0;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px 64px;align-items:end}
.about-hero h1{font-size:clamp(3rem,7vw,7rem)}
.about-hero p{font-size:clamp(1.125rem,1.4vw,1.3rem);color:var(--ink-2);margin:0}
.story-long{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,112px);padding-block:var(--section);align-items:start}
.story-photos{display:grid;gap:16px;position:sticky;top:96px}
.story-photos img{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--tone)}
.story-photos img+img{width:62%;justify-self:end;object-fit:contain;background:#fff}
.readable-copy{margin-top:32px;font-size:1.125rem;max-width:62ch;overflow-wrap:anywhere}
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:clamp(28px,3vw,48px) clamp(14px,1.6vw,24px)}
.team-card img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;background:var(--tone);margin-bottom:16px}
.team-card h2,.team-card h3{font-size:1.1875rem;letter-spacing:-.015em;line-height:1.25}
.team-card p{font-size:var(--t-small);color:var(--ink-2);margin:4px 0 0}
a.team-card:hover h3{text-decoration:underline;text-underline-offset:3px}
.faq-list{max-width:900px}
.faq-more{margin-top:32px}
.legal{max-width:760px;padding-bottom:var(--section);font-size:1.125rem}
.article-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:32px}
.article-card img{aspect-ratio:3/2;object-fit:cover;width:100%;margin-bottom:16px}
.article-card span{font-size:var(--t-small);color:var(--ink-2)}
.article-card h2{font-size:1.5rem;margin:6px 0 10px}
.journal-empty{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;padding:0;background:var(--tone)}
.journal-empty img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.journal-empty>div{padding:clamp(24px,4vw,56px)}
.article-content{padding-bottom:var(--section)}
.article-content>img{width:100%;max-height:70svh;object-fit:cover;margin-bottom:32px}
.contact-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,5vw,96px);padding-bottom:var(--section);align-items:start}
.contact-side dl{margin:0 0 40px;display:grid;gap:28px}
.contact-side dt{font-size:var(--t-small);color:var(--ink-2)}
.contact-side dd{margin:4px 0 0;font-size:clamp(1.25rem,2vw,1.75rem);font-weight:700;letter-spacing:-.03em;overflow-wrap:anywhere}
.contact-side img{width:100%;aspect-ratio:16/10;object-fit:cover}

/* ================= ADMIN ================= */
.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:32px}
.stat-grid div{background:var(--ground);padding:18px}
.stat-grid span{display:block;font-size:var(--t-small);color:var(--ink-2)}
.stat-grid strong{font-size:2.25rem;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.admin-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;flex-wrap:wrap}
.admin-row+.admin-row{border-top:1px solid var(--tone-2)}
.admin-row p{margin:2px 0;font-size:var(--t-small);color:var(--ink-2)}
.inline-admin{display:flex;gap:8px;flex-wrap:wrap}
.inline-admin select{width:auto}
.admin-form{padding:0 24px 24px}
.message{padding:18px 0}
.message+.message{border-top:1px solid var(--tone-2)}
.message small{display:block;color:var(--ink-2)}

/* ================= COMPANY PROFILE ================= */
.cp-hero-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px 64px;align-items:end;padding-block:clamp(56px,8vw,128px) clamp(40px,5vw,72px)}
.cp-hero h1{font-size:clamp(3rem,7vw,7.25rem)}
.cp-hero-grid p{font-size:clamp(1.125rem,1.4vw,1.3rem);color:var(--ink-2);margin:0}
.cp-hero-photo{margin:0;height:min(72svh,760px);overflow:hidden}
.cp-hero-photo img{width:100%;height:100%;object-fit:cover}
.cp-timeline{padding-block:var(--section)}
.cp-timeline h2{max-width:12ch;margin-bottom:clamp(48px,6vw,96px)}
.cp-years{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,32px)}
.cp-years li{background:var(--tone);padding:clamp(20px,2vw,32px);display:flex;flex-direction:column;min-height:340px}
.cp-years li:nth-child(4){background:var(--deep);color:var(--on-deep)}
.cp-years li:nth-child(4) h3{color:var(--on-deep)}
.cp-years b{font-size:clamp(3rem,5vw,5rem);font-weight:800;letter-spacing:-.06em;line-height:.9;margin-bottom:auto;padding-bottom:40px;font-variant-numeric:tabular-nums}
.cp-years h3{margin-bottom:10px}
.cp-years p{margin:0;font-size:1rem}
.cp-bio{background:var(--tone);padding-block:var(--section)}
.cp-bio-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,6vw,112px);align-items:start}
.cp-founder{margin:0;position:sticky;top:96px}
.cp-founder img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;margin-bottom:16px}
.cp-founder b{display:block;font-size:1.25rem;letter-spacing:-.02em}
.cp-founder span{color:var(--ink-2);font-size:var(--t-small)}
.cp-bio-intro{color:var(--ink-2);margin:24px 0 40px;font-size:1.125rem}
.cp-bio-bn{font-size:1.125rem;max-width:64ch}
.cp-bio-bn p{max-width:none;margin-bottom:1.2em}
.cp-campus figure{margin:0;height:min(70svh,720px);overflow:hidden}
.cp-campus img{width:100%;height:100%;object-fit:cover}
.cp-campus-copy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 64px;padding-block:clamp(48px,6vw,96px) var(--section);align-items:end}
.cp-campus-copy p{font-size:clamp(1.125rem,1.4vw,1.3rem);margin:0}
.cp-leaders{padding-bottom:var(--section)}
.cp-leaders-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(40px,5vw,72px)}
.cp-leaders-head h2{max-width:13ch}
.cp-leader-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,24px)}
.cp-end{background:var(--field);color:var(--field-ink);overflow:hidden}
.cp-end h2,.cp-end p{color:var(--field-ink)}
.cp-end-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:32px;align-items:end;padding-top:clamp(72px,9vw,144px)}
.cp-end-grid>div{padding-bottom:clamp(72px,9vw,144px)}
.cp-end p{font-size:1.25rem;margin-top:24px}
.cp-end .btn-quiet{background:rgba(13,34,54,.1);color:var(--field-ink)}
.cp-end-bottle{width:100%;max-width:520px;justify-self:end}

/* ================= FOOTER ================= */
.footer{background:#111214;color:#f5f5f7;padding-top:clamp(72px,8vw,128px);overflow:hidden}
.footer h2{color:#f5f5f7;font-size:var(--t-small);letter-spacing:0;margin-bottom:14px}
.footer-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.8fr);gap:48px clamp(32px,5vw,96px)}
.footer-mail{display:inline-block;margin-top:8px;color:var(--field);font-weight:600;min-height:44px;padding-top:10px;overflow-wrap:anywhere}
.footer-mail:hover{text-decoration:underline;text-underline-offset:4px}
.footer-line{font-size:clamp(1.25rem,1.8vw,1.625rem);font-weight:600;letter-spacing:-.02em;line-height:1.3;max-width:24ch}
.footer-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.footer-cols a{display:block;padding:6px 0;color:#c7c9cf;font-size:var(--t-small);overflow-wrap:anywhere}
.footer-cols a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.footer-mark{margin:clamp(48px,6vw,96px) 0 0;font-size:clamp(9rem,38vw,40rem);font-weight:800;letter-spacing:-.085em;line-height:.72;color:var(--field);text-align:center;max-width:none;user-select:none;transform:translateY(4%)}
.footer-end{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;padding-block:24px 32px;font-size:var(--t-small);color:#a8abb3;position:relative}

/* ================= RESPONSIVE ================= */
@media (max-width:1100px){
 .desktop-links{display:none}
 .menu-toggle{display:inline-grid}
 .desktop-account{display:none}
 .planner-copy{grid-column:1/-1}
 .planner-form{grid-column:1/7}
 .footer-top{grid-template-columns:1fr}
}
@media (max-width:900px){
 :root{--t-body:1.0625rem}
 .hero{grid-template-columns:1fr;min-height:0}
 .hero-copy{padding:40px var(--gutter) 32px;gap:28px}
 .hero h1{max-width:10ch}
 .hero-photo{height:min(92vw,560px);order:2}
 .hero-photo img{max-height:none}
 .range-intro,.people-head,.ordering-grid,.place-grid,.research,.about-hero .shell,.story-long,.contact-layout,.cp-hero-grid,.cp-campus-copy,.cp-bio-grid,.cp-end-grid{grid-template-columns:1fr}
 .people-head .text-link{grid-column:1}
 .family{grid-template-columns:1fr;gap:24px}
 .family-side{position:static}
 .family-photo{aspect-ratio:16/9}
 .planner-grid{grid-template-columns:1fr}
 .planner-copy,.planner-form,.planner-result{grid-column:1;grid-row:auto}
 .place-grid h2,.place-copy,.place-inset{grid-column:1}
 .place-photo{height:62vw}
 .research-photo{grid-column:1;position:static;aspect-ratio:16/10}
 .research-copy{grid-column:1}
 .people-row{grid-template-columns:repeat(2,minmax(0,1fr))}
 .shop-layout,.detail-layout,.basket-layout,.dashboard-grid,.auth-shell{grid-template-columns:1fr}
 .filters,.detail-gallery,.summary-card,.account-links,.story-photos,.cp-founder{position:static}
 .auth-photo{height:38vw}
 .account-links{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
 .account-links form{margin-top:0}
 .cp-years{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cp-years li{min-height:260px}
 .cp-founder{max-width:420px}
 .cp-end-bottle{justify-self:center;max-width:360px}
 .footer-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
 .journal-empty{grid-template-columns:1fr}
 .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
 .nav-inner{height:64px;gap:8px}
 .brand-name{display:none}
 .hero-facts{grid-template-columns:repeat(2,auto);gap:20px 32px}
 .hero-facts div:nth-child(3){grid-column:1/-1}
 .hero-cta .btn{width:100%}
 .specimen{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name add" "note add" "price add";padding:14px 16px;gap:2px 16px}
 .specimen .price{font-size:1.125rem;margin-top:4px}
 .planner h2{font-size:2rem}
 .people-row{gap:12px}
 .person-lead b{font-size:1.0625rem}
 .years li{grid-template-columns:1fr;gap:6px;padding:16px 0}
 .cp-years{grid-template-columns:1fr}
 .cp-years li{min-height:0}
 .cp-years b{padding-bottom:20px}
 .cp-leader-row{grid-template-columns:1fr 1fr}
 .cp-leader-row .person:first-child{grid-column:1/-1}
 .cart-line{grid-template-columns:72px minmax(0,1fr);}
 .cart-line img{width:72px;height:72px}
 .cart-line>strong{grid-column:2}
 .detail-facts{grid-template-columns:1fr}
 .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .product-bottom{flex-direction:column;align-items:flex-start}
 .product-bottom .inline-cart,.product-bottom .btn{width:100%}
 .footer-mark{font-size:46vw}
 .team-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px}
 .team-card h2,.team-card h3{font-size:1rem}
 .stepper{gap:8px}
}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}
 html.motion .rise{opacity:1;transform:none}
 .place-photo img{transform:none!important;height:100%}
}

/* ================= STORE MANAGER (admin) ================= */
.page-admin .footer-top,.page-admin .footer-mark{display:none}
.page-admin .footer{padding-top:0}
.erp{display:grid;grid-template-columns:272px minmax(0,1fr);min-height:calc(100svh - 72px);background:var(--ground)}
.erp-side{background:var(--ground);padding:20px 16px 48px;position:sticky;top:72px;height:calc(100svh - 72px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.erp-toggle{display:none;width:100%}
.erp-nav{display:grid;gap:2px}
.erp-single,.erp-group summary{display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 12px;border-radius:10px;font-weight:500;font-size:.96875rem;color:var(--ink);cursor:pointer;list-style:none;transition:background-color var(--fast)}
.erp-group summary::-webkit-details-marker{display:none}
.erp-single svg,.erp-group summary svg{width:20px;height:20px;color:var(--accent)}
:root[data-theme="dark"] .erp-single svg,:root[data-theme="dark"] .erp-group summary svg{color:var(--link)}
.erp-single:hover,.erp-group summary:hover{background:var(--tone)}
.erp-single.is-active{background:var(--ink);color:var(--ground)}
.erp-single.is-active svg{color:var(--ground)}
.erp-group summary span{flex:1}
.erp-group summary i{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform var(--fast) var(--ease);opacity:.6}
.erp-group[open] summary i{transform:rotate(225deg) translate(-2px,-2px)}
.erp-group[open] summary{color:var(--accent);font-weight:600}
:root[data-theme="dark"] .erp-group[open] summary{color:var(--link)}
.erp-group ul{list-style:none;margin:4px 0 10px;padding:8px 6px;background:var(--tone);border-radius:12px}
.erp-group li a{display:flex;align-items:center;min-height:38px;padding:6px 18px;border-radius:8px;font-size:.90625rem;color:var(--ink-2);transition:background-color var(--fast),color var(--fast)}
.erp-group li a:hover{background:var(--tone-2);color:var(--ink);text-decoration:none!important}
.erp-group li a.is-active{background:var(--ground);color:var(--ink);font-weight:600;box-shadow:inset 3px 0 0 var(--accent)}
.erp-main{background:var(--tone);padding:clamp(20px,3vw,40px);min-width:0}
.erp-head{margin-bottom:24px}
.erp-crumb{font-size:var(--t-small);color:var(--ink-2);margin:0 0 6px}
.erp-head h1{font-size:clamp(2rem,3.4vw,3rem);letter-spacing:-.04em;line-height:1}
.erp-body{display:grid;gap:16px}
.erp-card{background:var(--ground);padding:clamp(18px,2.2vw,28px);border-radius:14px;min-width:0}
.erp-card.narrow{max-width:760px}
.erp-card h2{font-size:1.25rem;letter-spacing:-.02em;margin-bottom:16px}
.erp-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:16px;align-items:start}
.erp-form{display:grid;gap:16px}
.erp-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px 16px}
.erp-fields.one{grid-template-columns:1fr}
.erp-fields .field:has(textarea){grid-column:1/-1}
.erp-form>.field textarea{min-height:110px}
.erp-split .erp-fields{grid-template-columns:1fr}
.check{display:flex;align-items:center;gap:10px;min-height:48px;font-size:var(--t-small);font-weight:600;align-self:end}
.erp-actions,.erp-toolbar,.erp-quick{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.erp-toolbar .erp-search,.erp-toolbar .erp-chips{margin-left:auto}
.erp-tablebar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap;font-size:var(--t-small);color:var(--ink-2)}
.erp-search{display:flex;gap:8px}
.erp-search input{min-width:200px;min-height:44px!important}
.erp-chips{display:flex;flex-wrap:wrap;gap:6px}
.erp-chips a{display:inline-flex;align-items:center;min-height:36px;padding:6px 14px;border-radius:999px;background:var(--ground);font-size:var(--t-small)}
.erp-chips a[aria-current="true"]{background:var(--ink);color:var(--ground)}
.erp-filter{display:flex;flex-wrap:wrap;align-items:end;gap:12px;background:var(--ground);padding:16px 20px;border-radius:14px}
.erp-filter .field{min-width:180px}
.erp-empty{padding:28px;background:var(--tone);border-radius:10px;color:var(--ink-2);text-align:center}
.erp-card .erp-empty{background:var(--tone)}
.erp-main>.erp-body>.erp-empty{background:var(--ground)}
.erp-empty a{color:var(--link)}
.erp-foot{margin:0}
.erp table{font-size:var(--t-small)}
.erp th{white-space:nowrap}
.erp td{vertical-align:top}
.erp tr.total td{font-weight:700;border-bottom:0}
.row-actions{white-space:nowrap;text-align:right}
.row-actions form{display:inline}
.row-actions a,.link-danger,.link{color:var(--link);font-weight:600;background:none;border:0;padding:6px 8px;min-height:32px;font-size:var(--t-small)}
.link-danger{color:var(--warn)}
.tag{display:inline-block;font-size:.8125rem;color:var(--ink-2);font-weight:500}
.erp .admin-row{background:var(--ground);padding:16px 20px;border-radius:12px;border:0}
.erp .admin-row+.admin-row{border:0}
.erp .admin-row p a{color:var(--link)}
.erp-item{background:var(--ground)!important;border-radius:12px;margin-bottom:6px}
.erp-item summary small{font-weight:400;color:var(--ink-2);margin-left:6px}
.erp-item .admin-form{padding:0 24px 24px;display:grid;gap:14px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.kpi{display:flex;flex-direction:column;gap:4px;background:var(--ground);padding:18px 18px 16px;border-radius:14px;transition:transform var(--fast) var(--ease)}
.kpi:hover{transform:translateY(-2px);text-decoration:none!important}
.kpi span{font-size:var(--t-small);color:var(--ink-2)}
.kpi b{font-size:clamp(1.25rem,1.7vw,1.75rem);letter-spacing:-.04em;line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap}
.kpi small{font-size:.8125rem;color:var(--ink-2)}
.kpi-lead{background:var(--deep);color:var(--on-deep)}
.kpi-lead span,.kpi-lead small{color:var(--on-deep-2)}
.kpi-lead b{color:var(--field)}
.erp-bars{display:grid;gap:8px}
.bar-row{display:grid;grid-template-columns:minmax(80px,180px) minmax(0,1fr) auto;gap:12px;align-items:center;font-size:var(--t-small)}
.bar-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}
.bar-track{height:14px;background:var(--tone);border-radius:999px;overflow:hidden}
.bar{display:block;height:100%;background:var(--accent);border-radius:999px;transform-origin:left;animation:grow .8s var(--ease) both}
@keyframes grow{from{transform:scaleX(0)}}
.bar-val{font-variant-numeric:tabular-nums;font-weight:600;min-width:70px;text-align:right}
.erp-rank{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:4px}
.erp-rank li{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;background:var(--tone);border-radius:8px;font-size:var(--t-small)}
.erp-totals{display:flex;flex-wrap:wrap;gap:24px;margin:0 0 16px}
.erp-totals dt{font-size:var(--t-small);color:var(--ink-2)}
.erp-totals dd{margin:0;font-size:1.5rem;font-weight:700;letter-spacing:-.03em}
.labels{display:grid;grid-template-columns:repeat(var(--per-row,4),minmax(0,1fr));gap:10px;background:var(--ground);padding:16px;border-radius:14px}
.label{display:grid;gap:4px;justify-items:center;text-align:center;padding:12px 10px;background:#fff;color:#000;border:1px dashed #b5b5b5;font-size:.8125rem}
.label b{font-size:.8125rem;line-height:1.2}
.label .barcode{width:100%;height:46px;fill:#000}
.erp-doc{background:#fff;color:#111;padding:clamp(20px,4vw,48px);border-radius:14px;max-width:860px}
.erp-doc *{color:#111}
.erp-doc header{display:flex;justify-content:space-between;gap:24px;margin-bottom:28px;flex-wrap:wrap}
.erp-doc header>div{display:flex;gap:14px;align-items:flex-start}
.erp-doc header span{font-size:var(--t-small)}
.doc-brand{font-size:2.25rem;font-weight:800;letter-spacing:-.07em;line-height:1;color:#0058b3!important}
.erp-doc h2{font-size:1.5rem;margin-bottom:6px}
.erp-doc table td,.erp-doc table th{border-bottom:1px solid #ddd}
.doc-total{font-size:1.25rem;font-weight:700;text-align:right;margin-top:16px;max-width:none}
.erp-doc footer{display:flex;justify-content:space-between;margin-top:64px;font-size:var(--t-small)}
.erp-doc footer span{border-top:1px solid #111;padding-top:8px;min-width:180px;text-align:center}
.receipt{max-width:420px}
.pos{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);gap:16px;align-items:start}
.pos-side{position:sticky;top:96px;display:grid;gap:14px}
.pos-side h2{margin:0}
.pos-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:4px;max-height:70svh;overflow-y:auto}
.pos-list li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;background:var(--tone)}
.pos-list li.has-qty{background:var(--field);color:var(--field-ink)}
.pos-list li.has-qty small{color:var(--field-ink)}
.pos-list li[hidden]{display:none}
.pos-list b{display:block;font-size:.9375rem}
.pos-list small{color:var(--ink-2);font-size:.8125rem}
.qty{display:flex;align-items:center;gap:4px;flex:none}
.qty input{width:64px!important;min-height:40px!important;text-align:center;padding:6px!important}
.step-s{width:40px;height:40px;border:0;border-radius:999px;background:var(--ground);font-size:1.25rem;line-height:1;color:var(--ink)}
.step-s:active{transform:scale(.92)}
.pos-total{display:flex;justify-content:space-between;align-items:baseline;margin:6px 0 0;max-width:none}
.pos-total b{font-size:2rem;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.doc-text{max-width:820px}
.doc-text p{max-width:68ch}
.erp code{font-size:.9em;background:var(--tone);padding:1px 6px;border-radius:4px}

@media (max-width:1000px){
 .erp{grid-template-columns:1fr}
 .erp-side{position:static;height:auto;padding:12px var(--gutter);border-bottom:0;background:var(--tone)}
 .js .erp-toggle{display:inline-flex}
 .js .erp-nav{display:none;margin-top:12px}
 .js .erp-side.open .erp-nav{display:grid}
 .erp-split,.pos{grid-template-columns:1fr}
 .pos-side{position:static}
}
@media (max-width:560px){
 .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
 .erp-main{padding:16px}
 .erp-toolbar .erp-search,.erp-toolbar .erp-chips{margin-left:0;width:100%}
 .erp-search input{min-width:0;flex:1}
 .bar-row{grid-template-columns:90px minmax(0,1fr) auto}
 .labels{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media print{
 .site-nav,.footer,.erp-side,.erp-head,.erp-toolbar,.erp-filter,.skip,.flash-wrapper,.hint,.erp-quick{display:none!important}
 body,.erp,.erp-main{background:#fff!important;color:#000}
 .erp{display:block}.erp-main{padding:0}
 .erp-card,.labels,.erp-doc{border-radius:0;padding:0;background:#fff}
 .label{break-inside:avoid}
}
.erp-body>*,.erp-split>*,.pos>*{min-width:0}
.erp td{overflow-wrap:break-word}
.erp td:first-child{white-space:nowrap}
.admin-gate{display:grid;place-items:center;min-height:calc(100svh - 72px);padding-block:48px}
.admin-gate-card{width:min(460px,100%);background:var(--tone);padding:clamp(28px,4vw,44px);border-radius:18px;display:grid;gap:16px}
.admin-gate-card .brand-mark{font-size:2.5rem}
.admin-gate-card h1{font-size:clamp(2rem,4vw,2.75rem)}
.admin-gate-card p{margin:0;color:var(--ink-2)}
.admin-gate-card .notice{box-shadow:none}
.admin-gate code{font-size:.9em;background:var(--tone-2);padding:1px 6px;border-radius:4px}
.erp-signout{margin-top:12px}
.erp-signout button{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:8px 12px;border:0;border-radius:10px;background:transparent;color:var(--warn);font-weight:500;text-align:left}
.erp-signout button:hover{background:var(--tone)}
.erp-signout svg{width:20px;height:20px}
.table-scroller{position:relative}
/* ---- dashboard ---- */
.dash-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px}
.dash-period{margin:0;font-size:var(--t-small);color:var(--ink-2);max-width:none}
.delta{font-size:.8125rem;font-weight:600}
.delta.up{color:var(--ok)}.delta.down{color:var(--warn)}
.kpi-lead .delta.up{color:#8fe0b0}.kpi-lead .delta.down{color:#ffb4aa}
.neg{color:var(--warn)!important}
.dash-grid{display:grid;gap:16px;align-items:start}
.dash-grid>*{min-width:0}
.dash-a{grid-template-columns:minmax(0,2fr) minmax(280px,1fr)}
.dash-b{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.dash-c{grid-template-columns:repeat(3,minmax(0,1fr))}
.dash-col{display:grid;gap:16px}
.card-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.card-head h2{margin:0}
.legend{display:flex;align-items:center;gap:8px;font-size:.8125rem;color:var(--ink-2)}
.legend i{display:inline-block;width:14px;height:4px;border-radius:2px;background:var(--accent)}
.legend i.lg-purch{background:var(--ink-2);margin-left:10px}
.trend{width:100%;height:auto;display:block;overflow:visible}
.trend .grid{stroke:var(--tone-2);stroke-width:1}
.trend .ylab,.trend .xlab{font-size:11px;fill:var(--ink-2);font-family:var(--font)}
.trend .area{fill:var(--accent);opacity:.1}
.trend .ln-sales{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.trend .ln-purch{fill:none;stroke:var(--ink-2);stroke-width:2;stroke-dasharray:5 5;stroke-linejoin:round}
.trend .pt circle{fill:var(--ground);stroke:var(--accent);stroke-width:2;opacity:0;transition:opacity var(--fast)}
.trend .pt rect{fill:transparent}
.trend .pt:hover circle{opacity:1}
html.motion .trend .ln-sales,html.motion .trend .ln-purch{stroke-dasharray:2000;stroke-dashoffset:2000;animation:draw 1.4s var(--ease) forwards}
html.motion .trend .ln-purch{animation-delay:.15s}
@keyframes draw{to{stroke-dashoffset:0}}
.as-table{margin-top:10px;font-size:var(--t-small)}
.as-table summary{cursor:pointer;color:var(--link);font-weight:600;min-height:32px}
.big-num{font-size:2.25rem;font-weight:800;letter-spacing:-.05em;line-height:1;margin:0 0 14px;font-variant-numeric:tabular-nums}
.meter{height:12px;background:var(--tone);border-radius:999px;overflow:hidden}
.meter span{display:block;height:100%;background:var(--ok);border-radius:999px;transform-origin:left;animation:grow .9s var(--ease) both}
.pipe{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.pipe a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 4px;background:var(--tone);border-radius:10px;text-align:center;transition:background-color var(--fast)}
.pipe a:hover{background:var(--field);color:var(--field-ink);text-decoration:none!important}
.pipe b{font-size:1.5rem;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.pipe span{font-size:.75rem;line-height:1.2;color:var(--ink-2)}
.alerts{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.alerts a{display:block;padding:12px 14px;border-radius:10px;background:var(--tone);font-size:var(--t-small);box-shadow:inset 4px 0 0 var(--link)}
.alerts .warn a{box-shadow:inset 4px 0 0 var(--warn)}
.alerts a:hover{background:var(--tone-2);text-decoration:none!important}
.alerts b{font-size:1.0625rem;margin-right:4px}
.note-add{display:grid;grid-template-columns:minmax(0,1fr) 150px auto;gap:8px;margin-bottom:12px}
.note-add input{min-height:44px!important}
.notes{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.notes li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px 8px 6px 6px;background:var(--tone);border-radius:10px;font-size:var(--t-small)}
.notes li.done span{text-decoration:line-through;color:var(--ink-2)}
.notes small{color:var(--ink-2);margin-left:6px}
.notes small.over{color:var(--warn);font-weight:600}
.tick{width:32px;height:32px;border-radius:999px;border:2px solid var(--input);background:var(--ground);display:grid;place-items:center;transition:background-color var(--fast),border-color var(--fast)}
.tick[aria-pressed="true"]{background:var(--ok);border-color:var(--ok)}
.tick[aria-pressed="true"]::after{content:"";width:10px;height:6px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.tick:hover{border-color:var(--ok)}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 10px}
.facts.two{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:12px}
.facts div{background:var(--tone);padding:12px;border-radius:10px;min-width:0}
.facts dt{font-size:.8125rem;color:var(--ink-2)}
.facts dd{margin:2px 0 0;font-weight:700;font-size:1.0625rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.facts dd a{color:inherit}
.erp-rank li a{color:var(--link);font-weight:500}
.feed{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.feed li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:baseline;padding:9px 4px;font-size:var(--t-small)}
.feed li+li{border-top:1px solid var(--tone-2)}
.feed a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feed time{color:var(--ink-2);font-size:.75rem;white-space:nowrap}
.feed .tag{background:var(--tone);padding:2px 8px;border-radius:999px;white-space:nowrap}
@media (max-width:1280px){.dash-c{grid-template-columns:repeat(2,minmax(0,1fr))}.dash-c>:last-child{grid-column:1/-1}}
@media (max-width:1000px){.dash-a,.dash-b,.dash-c{grid-template-columns:1fr}.dash-c>:last-child{grid-column:auto}}
@media (max-width:560px){.note-add{grid-template-columns:1fr 1fr}.note-add input[type=text]{grid-column:1/-1}.pipe{grid-template-columns:repeat(3,minmax(0,1fr))}.facts{grid-template-columns:1fr 1fr}.dash-bar .erp-search{width:100%}.dash-bar .erp-search input{flex:1;min-width:0}}
.kpis{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.facts{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.feed li{grid-template-columns:auto minmax(0,1fr);row-gap:2px}
.feed time{grid-column:2}
.feed a{white-space:normal;overflow-wrap:anywhere}
@media (max-width:560px){.trend .ylab,.trend .xlab{font-size:24px}.trend .ln-sales{stroke-width:4}.trend .ln-purch{stroke-width:3}}
.erp-version{margin:16px 12px 0;font-size:.8125rem;color:var(--ink-2);max-width:none}

/* =====================================================================
   v4 PREMIUM LAYER, cinematic, deep-water navy stage in ION's own blues.
   Borrowed feel: floating pill navigation, very tight bold display type,
   tall picture reel, stats row, numbered steps, size cards, closing call.
   ===================================================================== */
:root{
 --ground:#ffffff;--tone:#f2f6fa;--tone-2:#e3ebf3;--deep:#08213a;--ink:#0b1a2b;--ink-2:#45566a;
 --accent:#0058b3;--accent-press:#004793;--link:#0058b3;--line:rgba(11,26,43,.09);--glow:rgba(0,88,179,.16);
 --r-xl:32px;--r-lg:24px;--r-md:16px;--section:clamp(88px,10vw,168px);
}
:root[data-theme="dark"]{
 --ground:#061423;--tone:#0c1f33;--tone-2:#152c45;--deep:#0a2742;--ink:#eef5fb;--ink-2:#a6bbce;
 --accent:#1f74d6;--accent-press:#1964bd;--link:#72b8ff;--line:rgba(214,234,251,.09);--glow:rgba(56,140,240,.30);
 --on-deep-2:#b4c9dc;
}
h1{font-size:clamp(3.25rem,7.4vw,7.75rem);font-weight:800;letter-spacing:-.058em;line-height:.9}
h2{font-size:clamp(2.4rem,4.9vw,4.75rem);font-weight:800;letter-spacing:-.05em;line-height:.95}
h3{letter-spacing:-.03em}
.btn{gap:10px}.btn svg{width:18px;height:18px;transition:transform var(--fast) var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-ghost{background:color-mix(in srgb,var(--ink) 7%,transparent);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn-ghost:hover{background:color-mix(in srgb,var(--ink) 13%,transparent)}
.btn-primary{box-shadow:0 10px 30px -12px var(--glow)}

/* floating pill nav */
.site-nav,.page-home .site-nav,:root[data-theme="dark"] .page-home .site-nav{background:transparent;top:12px;padding-top:12px;margin-top:-12px}
.nav-inner{height:64px;padding:0 8px 0 22px;border-radius:999px;background:color-mix(in srgb,var(--tone) 74%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:inset 0 0 0 1px var(--line),0 18px 40px -24px rgba(0,0,0,.45)}
.page-home .brand,.page-home .desktop-links a,.page-home .nav-actions,:root[data-theme="dark"] .page-home .brand,:root[data-theme="dark"] .page-home .desktop-links a,:root[data-theme="dark"] .page-home .nav-actions{color:var(--ink)}
.brand-mark{color:var(--accent)}:root[data-theme="dark"] .brand-mark{color:#4aa3ff}
.desktop-links a{color:var(--ink-2)}.desktop-links a:hover,.desktop-links a[aria-current="page"]{color:var(--ink)}
.bag-link{background:var(--ink);color:var(--ground)}
.mobile-links{margin:10px auto 0;width:min(1360px,100% - 2*var(--gutter));border-radius:var(--r-lg);background:var(--tone);box-shadow:inset 0 0 0 1px var(--line),0 30px 60px -20px rgba(0,0,0,.5);padding:16px 0 20px}
.flash-wrapper{top:96px}
.notice{border-radius:var(--r-md)}

/* hero */
.hero,:root[data-theme="dark"] .hero{display:block;min-height:0;background:transparent;color:var(--ink);overflow:visible;position:relative;padding:clamp(40px,6vw,96px) 0 0;margin-bottom:var(--section);isolation:isolate}
.hero::before{content:"";position:absolute;z-index:-1;inset:-120px 0 auto 0;height:900px;pointer-events:none;background:radial-gradient(55% 45% at 78% 30%,var(--glow),transparent 70%),radial-gradient(35% 30% at 10% 10%,color-mix(in srgb,var(--glow) 50%,transparent),transparent 70%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(32px,4vw,64px);align-items:center}
.hero-copy{padding:0;margin:0;display:block;width:auto}
.hero h1{max-width:9ch;color:var(--ink)}
.hero-lede{margin:28px 0 36px;font-size:clamp(1.125rem,1.4vw,1.3125rem);line-height:1.5;color:var(--ink-2);max-width:38ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.reel{display:flex;gap:10px;height:clamp(440px,66svh,660px)}
.reel .panel{position:relative;flex:1 1 0;min-width:56px;border-radius:var(--r-lg);overflow:hidden;background:var(--tone);box-shadow:inset 0 0 0 1px var(--line);transition:flex .75s var(--ease);text-decoration:none!important}
.reel .panel.on,.reel .panel:hover,.reel .panel:focus-visible{flex:6}
.reel:hover .panel.on:not(:hover),.reel:focus-within .panel.on:not(:focus-visible):not(:hover){flex:1}
.reel .panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.reel .panel:hover img{transform:scale(1.04)}
.fit-contain-field{background:#d1ebf9}.fit-contain-field img{object-fit:contain;object-position:50% 100%}
.fit-contain-white{background:#fff}.fit-contain-white img{object-fit:contain;padding:8%}
.reel .panel::after{content:"";position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(to top,rgba(4,12,22,.78),rgba(4,12,22,0));pointer-events:none}
.panel-tab{position:absolute;left:50%;bottom:22px;transform:translateX(-50%) rotate(180deg);writing-mode:vertical-rl;white-space:nowrap;color:#fff;font-weight:700;font-size:.9375rem;letter-spacing:-.01em;z-index:1;transition:opacity .3s}
.panel-cap{position:absolute;left:24px;right:24px;bottom:22px;z-index:1;color:#fff;display:grid;gap:2px;opacity:0;transform:translateY(10px);transition:opacity .35s,transform .5s var(--ease)}
.panel-cap b{font-size:1.625rem;letter-spacing:-.03em;line-height:1.1}
.panel-cap small{font-size:.9375rem;color:#dbe8f4}
.panel.on .panel-cap,.panel:hover .panel-cap,.panel:focus-visible .panel-cap{opacity:1;transform:none;transition-delay:.15s}
.panel.on .panel-tab,.panel:hover .panel-tab,.panel:focus-visible .panel-tab{opacity:0}
.reel:hover .panel.on:not(:hover) .panel-cap{opacity:0;transition-delay:0s}
.reel:hover .panel.on:not(:hover) .panel-tab{opacity:1}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:clamp(40px,5vw,72px) auto 0;padding-top:28px;box-shadow:inset 0 1px 0 var(--line)}
.stats div{display:flex;flex-direction:column-reverse;gap:6px}
.stats dt{font-size:var(--t-small);color:var(--ink-2)}
.stats dd{margin:0;font-size:clamp(1.625rem,2.6vw,2.5rem);font-weight:800;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}

/* shared section head */
.sec-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px 64px;align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.sec-head p{margin:0;color:var(--ink-2);font-size:clamp(1.0625rem,1.3vw,1.25rem)}
.sec-head p a{color:var(--link)}
.sizes,.range,.process,.place,.research,.people,.faq-home{padding:0 0 var(--section)}

/* sizes */
.size-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,24px)}
.size-card{position:relative;display:flex;flex-direction:column;gap:6px;padding:14px 14px 22px;border-radius:var(--r-xl);background:var(--tone);box-shadow:inset 0 0 0 1px var(--line);transition:transform .5s var(--ease)}
.size-card:hover{transform:translateY(-4px)}
.size-card.best{box-shadow:inset 0 0 0 2px var(--accent),0 30px 60px -30px var(--glow)}
.size-flag{position:absolute;z-index:1;top:26px;left:26px;margin:0;padding:7px 14px;border-radius:999px;background:var(--accent);color:#fff;font-size:.8125rem;font-weight:700}
.size-photo{margin:0 0 14px;aspect-ratio:4/3;border-radius:calc(var(--r-xl) - 10px);overflow:hidden;background:#d1ebf9}
.size-photo.white{background:#fff}
.size-photo img{width:100%;height:100%;object-fit:contain;object-position:50% 100%;mix-blend-mode:multiply}
.size-photo.white img{object-position:50% 50%;padding:6%}
.size-card h3{font-size:clamp(2.5rem,4vw,3.75rem);font-weight:800;letter-spacing:-.06em;line-height:1;padding:0 10px}
.size-name{margin:0;padding:0 10px;color:var(--ink-2);font-size:var(--t-small)}
.size-price{margin:14px 0 16px;padding:0 10px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.size-price strong{font-size:1.625rem;letter-spacing:-.03em}
.size-price span{color:var(--ink-2);font-size:var(--t-small)}
.size-card .inline-cart{padding:0 10px;margin-top:auto}
.size-card .inline-cart .btn{width:100%}

/* range */
.family-photo{aspect-ratio:4/3;border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px var(--line)}
.family-photo img{width:100%;height:100%;object-fit:cover}
.family-photo.fit-contain-field img{object-fit:contain;object-position:50% 100%}
.family-photo.fit-contain-white img{object-fit:contain;padding:6%}
.specimens{display:grid;gap:6px}
.specimen,.specimen:nth-child(odd){background:var(--tone);border-radius:var(--r-md);box-shadow:inset 0 0 0 1px var(--line)}
.specimen:hover{background:var(--tone-2);color:var(--ink)}
.specimen:hover .specimen-note{color:var(--ink-2)}

/* planner */
.planner{margin:0 var(--gutter) var(--section);border-radius:clamp(24px,3vw,44px);background:var(--deep);position:relative;overflow:hidden;isolation:isolate;box-shadow:inset 0 0 0 1px var(--line)}
.planner::before{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(50% 60% at 85% 80%,rgba(80,160,255,.22),transparent 70%)}
.use label{border-radius:var(--r-md)}

/* process */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.steps li{background:var(--tone);border-radius:var(--r-lg);padding:24px 22px 28px;box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column;gap:10px;min-height:250px}
.step-no{font-size:3rem;font-weight:800;letter-spacing:-.06em;line-height:1;color:var(--accent);margin-bottom:auto;font-variant-numeric:tabular-nums}
:root[data-theme="dark"] .step-no{color:#4aa3ff}
.steps h3{font-size:1.5rem}
.steps p{margin:0;color:var(--ink-2);font-size:1rem}

/* place, wide photos shown at their real 1090 × 460 shape */
.place-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,24px);margin-bottom:28px}
.wide-photo{margin:0}
.wide-photo img{width:100%;aspect-ratio:1090/460;object-fit:cover;border-radius:var(--r-lg);background:var(--tone)}
.wide-photo figcaption{margin-top:12px;font-size:var(--t-small);color:var(--ink-2)}

/* research, people */
.research-photo{aspect-ratio:601/528;border-radius:var(--r-lg)}
.people-row{grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;margin-bottom:28px}
.person img{aspect-ratio:4/5;border-radius:var(--r-lg)}
.person-lead b{font-size:1.0625rem}

/* faq + closer */
.faq-home{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:32px clamp(32px,6vw,112px);align-items:start}
.faq-home .sec-head{display:block;margin:0}
.faq-home .sec-head p{margin-top:20px}
.faq-item{border-radius:var(--r-md);background:var(--tone);box-shadow:inset 0 0 0 1px var(--line)}
.ordering .faq-item,.faq-list .faq-item{background:var(--tone)}
.closer{margin:0 var(--gutter) var(--section);border-radius:clamp(24px,3vw,44px);background:var(--deep);color:var(--on-deep);position:relative;overflow:hidden;isolation:isolate;text-align:center}
.closer::before{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(60% 90% at 50% 120%,rgba(80,160,255,.35),transparent 70%)}
.closer-inner{padding:clamp(72px,9vw,150px) 0;display:grid;justify-items:center;gap:18px}
.closer h2{color:#f2f7fb;max-width:14ch}
.closer p{color:#b9cde0;font-size:1.25rem;margin:0}
.closer .btn-ghost{color:#f2f7fb;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.closer .hero-cta{justify-content:center;margin-top:12px}

/* footer in ION navy */
.footer{background:var(--deep);border-radius:clamp(24px,3vw,44px) clamp(24px,3vw,44px) 0 0;margin-top:0}
:root:not([data-theme="dark"]) .footer{background:#08213a}

/* ---- picture sizes on the inner pages ---- */
.about-hero figure,.cp-hero-photo,.cp-campus figure{width:min(1360px,100% - 2*var(--gutter));margin:24px auto 0;height:auto;aspect-ratio:1090/460;border-radius:var(--r-xl);overflow:hidden}
.about-hero figure img,.cp-hero-photo img,.cp-campus figure img{width:100%;height:100%;object-fit:cover}
.story-photos img{aspect-ratio:1090/460;border-radius:var(--r-lg)}
.story-photos img+img{aspect-ratio:1;width:46%;border-radius:var(--r-lg)}
.contact-side img{aspect-ratio:1090/460;border-radius:var(--r-lg)}
.auth-photo{margin:24px;align-self:center;aspect-ratio:640/426;height:auto!important;border-radius:var(--r-xl)}
.auth-photo img{width:100%;height:100%;object-fit:cover}
.product-image,.detail-gallery{border-radius:var(--r-lg)}
.detail-gallery{border-radius:var(--r-xl)}
.cart-line,.summary-card,.panel,.empty,.payment-note,.detail-facts div,.journal-empty{border-radius:var(--r-lg)}
.cart-line img{border-radius:12px}
.team-card img,.cp-founder img{border-radius:var(--r-lg)}
.article-card img,.journal-empty img{border-radius:var(--r-lg)}
.cp-years li{border-radius:var(--r-lg)}
.cp-end{margin:0 var(--gutter) var(--section);border-radius:clamp(24px,3vw,44px)}
input:not([type=radio]):not([type=checkbox]):not([type=hidden]),select,textarea{border-radius:12px}

@media (max-width:1100px){.steps{grid-template-columns:repeat(3,minmax(0,1fr))}.size-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){
 .hero-grid,.sec-head,.faq-home{grid-template-columns:1fr}
 .hero h1{max-width:10ch}
 .reel{height:auto;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin-inline:calc(-1*var(--gutter));padding:0 var(--gutter);scrollbar-width:none}
 .reel::-webkit-scrollbar{display:none}
 .reel .panel,.reel .panel.on,.reel .panel:hover{flex:0 0 74%;height:440px;scroll-snap-align:start}
 .panel-tab{display:none}
 .panel .panel-cap,.reel:hover .panel.on:not(:hover) .panel-cap{opacity:1;transform:none}
 .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
 .size-grid{grid-template-columns:1fr;max-width:520px}
 .place-pair{grid-template-columns:1fr}
 .people-row{grid-template-columns:repeat(2,minmax(0,1fr))}
 .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
 .auth-photo{margin:16px var(--gutter) 0}
}
@media (max-width:560px){
 .nav-inner{height:58px;padding-left:16px}
 .steps{grid-template-columns:1fr}.steps li{min-height:0}.step-no{margin-bottom:12px}
 .reel .panel,.reel .panel.on,.reel .panel:hover{flex-basis:84%;height:400px}
 .stats dd{font-size:1.5rem}
 .closer h2{font-size:2.5rem}
}
@media (prefers-reduced-motion:reduce){.panel{transition:none}.panel:hover img{transform:none}}
/* v4 picture-size fixes: every framed photo fills its box exactly */
.family-photo,.size-photo,.wide-photo,.research-photo{position:relative;display:block}
.family-photo img,.size-photo img{position:absolute;inset:0;width:100%;height:100%}
.reel .fit-contain-field img{object-fit:cover;object-position:50% 60%}
.reel .fit-contain-white img{padding:0;object-fit:contain;object-position:50% 50%}
.research-photo img{width:100%;height:100%;object-fit:cover}
.size-photo img{object-fit:contain}
/* bottle photos already sit on the same pale blue: no blending (it darkened them into visible bands) */
.product-image img,.cart-line img,.detail-gallery img,.size-photo img{mix-blend-mode:normal}
img[src*="thumb_20241211113759"]{mix-blend-mode:multiply}
.size-photo.white img,.fit-contain-white img{mix-blend-mode:normal}
.reel .fit-contain-field img{object-position:38% 60%}
.about-hero figure,.cp-hero-photo{margin-top:clamp(16px,2.5vw,32px)}
.auth-photo{margin-top:clamp(16px,2.5vw,32px)}
@media (max-width:900px){.about-hero figure{margin-top:16px}}
/* v4.1 official logo */
.brand{align-items:center;gap:10px}
.brand-logo{height:38px;width:auto;display:block}
.brand-name{font-weight:700;letter-spacing:-.02em}
.footer-mark{line-height:0;transform:none;display:flex;justify-content:center;margin:clamp(40px,5vw,80px) 0 clamp(24px,3vw,40px)}
.footer-mark img{width:clamp(180px,26vw,380px);height:auto}
.gate-logo{width:96px;height:auto}
.doc-logo{width:72px;height:auto}
@media (max-width:560px){.brand-logo{height:34px}.brand-name{display:inline;font-size:.875rem}}
.brand-name{white-space:nowrap}
@media (max-width:400px){.brand-name{font-size:.8125rem}.brand{gap:8px}.brand-logo{height:30px}}
@media (max-width:340px){.brand-name{display:none}}
@media (max-width:400px){.nav-inner{padding:0 6px 0 12px;gap:4px}.nav-actions{gap:0}.bag-link{font-size:0;padding:6px;margin-left:2px;gap:0}.bag-link span{font-size:.875rem}.icon-btn{width:40px}}

/* =====================================================================
   v4.2 MOTION, all guarded by html.anim (added only without reduced motion)
   ===================================================================== */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .22s ease both}
::view-transition-new(root){animation:vt-in .38s var(--ease) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(8px)}}

.scroll-progress{position:fixed;z-index:300;left:0;top:0;width:100%;height:3px;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
:root[data-theme="dark"] .scroll-progress{background:#4aa3ff}

/* nav slides in */
html.anim .nav-inner{animation:nav-in .9s var(--ease) both}
@keyframes nav-in{from{opacity:0;transform:translateY(-18px) scale(.98)}}

/* word-by-word headlines */
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em .1em;margin:0 -.02em -.1em}
.split .w>span{display:inline-block;transform:translateY(108%);transition:transform 1s var(--ease);transition-delay:var(--wd,0ms)}
.split.words-in .w>span{transform:none}
html.motion .rise.split,html.motion .split{opacity:1}

/* hero reel: panels rise in one after another, the open one slowly zooms */
html.anim .reel .panel{animation:panel-in 1.1s var(--ease) both;animation-delay:calc(var(--i,0) * 90ms + 250ms)}
@keyframes panel-in{from{opacity:0;transform:translateY(40px) scale(.96)}}
html.anim .reel .panel.on img{animation:kenburns 9s ease-out both}
@keyframes kenburns{from{transform:scale(1.14)}to{transform:scale(1)}}
.reel-ctrl{grid-column:2;justify-self:end;display:inline-flex;align-items:center;gap:10px;min-height:40px;margin-top:-14px;padding:6px 16px 6px 10px;border:0;border-radius:999px;background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink-2);font-size:.8125rem;font-weight:600;cursor:pointer;transition:background-color var(--fast),color var(--fast)}
.reel-ctrl:hover{background:color-mix(in srgb,var(--ink) 14%,transparent);color:var(--ink)}
.i-pause{width:20px;height:20px;border-radius:999px;background:var(--ink);position:relative}
.i-pause::before,.i-pause::after{content:"";position:absolute;top:6px;width:2.5px;height:8px;background:var(--ground);border-radius:2px}
.i-pause::before{left:7px}.i-pause::after{left:10.5px}
.reel-ctrl.is-paused .i-pause::before{left:8px;top:6px;width:0;height:0;background:none;border-left:7px solid var(--ground);border-top:4px solid transparent;border-bottom:4px solid transparent;border-radius:0}
.reel-ctrl.is-paused .i-pause::after{display:none}
.hero-grid{position:relative}

/* bubbles */
.bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.closer .bubbles,.planner .bubbles{z-index:0}
.closer-inner,.planner-grid{position:relative;z-index:1}
.bubbles span{position:absolute;left:var(--x);bottom:-40px;width:var(--s);height:var(--s);border-radius:50%;background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.55),rgba(120,190,255,.14) 45%,rgba(120,190,255,0) 70%);box-shadow:inset 0 0 0 1px rgba(160,210,255,.22);opacity:0;animation:bubble var(--d) linear infinite;animation-delay:var(--del)}
:root:not([data-theme="dark"]) .hero .bubbles span{background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.9),rgba(0,110,220,.12) 45%,rgba(0,110,220,0) 70%);box-shadow:inset 0 0 0 1px rgba(0,88,179,.16)}
@keyframes bubble{0%{transform:translate(0,0) scale(.6);opacity:0}10%{opacity:.9}50%{transform:translate(var(--drift),-55vh) scale(1)}90%{opacity:.7}100%{transform:translate(calc(var(--drift) * -1),-110vh) scale(1.1);opacity:0}}

/* ripple */
.btn,.step,.step-s{position:relative;overflow:hidden;isolation:isolate}
.ripple{position:absolute;z-index:-1;border-radius:50%;background:currentColor;opacity:.22;transform:scale(0);animation:ripple .7s ease-out forwards;pointer-events:none}
@keyframes ripple{to{transform:scale(1);opacity:0}}

/* tilt + light on size cards and dashboard tiles */
html.anim .size-card,html.anim .kpi{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .35s var(--ease),box-shadow .35s}
html.anim .size-card:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px)}
html.anim .size-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(400px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.10),transparent 45%)}
html.anim .size-card:hover::after{opacity:1}
html.anim .size-card .size-photo img{transition:transform 1s var(--ease)}
html.anim .size-card:hover .size-photo img{transform:scale(1.05)}

/* parallax photos */
.parallax{transform:scale(1.12);will-change:transform}
.wide-photo{overflow:hidden;border-radius:var(--r-lg)}
.wide-photo img{display:block}

/* photos fade in */
html.anim img.fade-img{opacity:0;transition:opacity .9s ease}
html.anim img.fade-img.loaded{opacity:1}

/* process steps pop in, numbers fill */
html.anim .steps li.in .step-no{animation:pop .7s var(--ease) both;animation-delay:calc(var(--d,0ms) + 150ms)}
@keyframes pop{from{transform:scale(.6);opacity:0}}
html.anim .steps li{transition:transform .35s var(--ease),background-color .35s}
html.anim .steps li:hover{transform:translateY(-4px);background:var(--tone-2)}

/* specimen rows slide on hover */
html.anim .specimen{transition:background-color var(--fast),transform .35s var(--ease)}
html.anim .specimen:hover{transform:translateX(6px)}

/* bag count bump */
.bag-link span.bump{animation:bump .8s var(--ease) 2}
@keyframes bump{0%,100%{transform:scale(1)}40%{transform:scale(1.35)}}

/* footer logo floats */
html.anim .footer-mark img{animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(-1.5deg)}}

/* jar planner number + glow breathe */
html.anim .planner::before{animation:breathe 8s ease-in-out infinite}
html.anim .closer::before{animation:breathe 10s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}

/* store manager: tiles and cards settle in on load */
html.anim .erp-body>*{animation:settle-in .7s var(--ease) both}
html.anim .erp-body>*:nth-child(2){animation-delay:60ms}html.anim .erp-body>*:nth-child(3){animation-delay:120ms}
html.anim .erp-body>*:nth-child(4){animation-delay:180ms}html.anim .erp-body>*:nth-child(5){animation-delay:240ms}
html.anim .erp-body>*:nth-child(n+6){animation-delay:300ms}
html.anim .kpis .kpi{animation:settle-in .7s var(--ease) both}
html.anim .kpis .kpi:nth-child(2){animation-delay:50ms}html.anim .kpis .kpi:nth-child(3){animation-delay:100ms}html.anim .kpis .kpi:nth-child(4){animation-delay:150ms}html.anim .kpis .kpi:nth-child(5){animation-delay:200ms}html.anim .kpis .kpi:nth-child(6){animation-delay:250ms}
@keyframes settle-in{from{opacity:0;transform:translateY(14px)}}
html.anim .admin-gate-card{animation:settle-in .8s var(--ease) both}

@media (max-width:900px){.reel-ctrl{display:none}}
@media (prefers-reduced-motion:reduce){
 .bubbles,.scroll-progress,.reel-ctrl{display:none!important}
 ::view-transition-old(root),::view-transition-new(root){animation:none}
 .split .w>span{transform:none!important}
 .parallax{transform:none!important}
}
.bubbles span{background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.75) 0 10%,rgba(150,205,255,.14) 28%,rgba(150,205,255,.05) 62%,rgba(150,205,255,0) 72%);box-shadow:inset 0 0 0 1px rgba(175,220,255,.38),inset 0 0 10px rgba(140,200,255,.22),0 0 12px rgba(90,170,255,.12)}
.hero-grid,.hero .stats{position:relative;z-index:1}

/* =====================================================================
   v4.3 HERO, the water stage
   ===================================================================== */
.hero,:root[data-theme="dark"] .hero{padding:clamp(28px,4vw,64px) 0 0;margin-bottom:clamp(56px,6vw,96px);background:radial-gradient(70% 60% at 72% 40%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%),linear-gradient(to bottom,transparent,color-mix(in srgb,var(--deep) 60%,transparent));overflow:hidden}
:root:not([data-theme="dark"]) .hero{background:radial-gradient(70% 60% at 72% 40%,rgba(0,110,220,.14),transparent 70%),linear-gradient(to bottom,#ffffff,#e7f2fb)}
.hero::before{display:none}
.hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);min-height:min(78svh,760px);align-items:center;position:relative;z-index:1}
.hero h1{max-width:9ch}
.hero-proof{list-style:none;margin:32px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px;color:var(--ink-2);font-size:var(--t-small);font-weight:500}
.hero-proof li{display:flex;align-items:center;gap:8px}
.hero-proof svg{width:18px;height:18px;padding:3px;border-radius:999px;background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--link)}

.stage{position:relative;justify-self:center;width:min(100%,560px);aspect-ratio:1;display:grid;place-items:center}
.stage .defs{position:absolute}
.big-ph{position:absolute;inset:auto 0 50% 0;transform:translateY(50%);text-align:center;font-size:clamp(10rem,24vw,22rem);font-weight:800;letter-spacing:-.08em;line-height:.8;color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--ink) 14%,transparent);user-select:none;pointer-events:none}
.drop{position:relative;width:62%;aspect-ratio:.84;filter:drop-shadow(0 40px 60px rgba(0,40,90,.45))}
.drop img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 55%;clip-path:url(#dropClip);background:#d1ebf9}
.drop-glow{position:absolute;inset:-14%;border-radius:50%;background:radial-gradient(circle,rgba(90,170,255,.45),transparent 62%);filter:blur(10px)}
.drop-shine{position:absolute;inset:0;clip-path:url(#dropClip);background:linear-gradient(120deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 30%,rgba(255,255,255,0) 70%,rgba(255,255,255,.18) 100%);mix-blend-mode:screen;pointer-events:none}
.ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ring text{font-size:15px;font-weight:600;letter-spacing:.06em;fill:color-mix(in srgb,var(--ink) 55%,transparent)}
.ripples{position:absolute;left:50%;bottom:6%;width:78%;aspect-ratio:4/1;transform:translateX(-50%)}
.ripples i{position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--link) 55%,transparent);opacity:0}
.chips{list-style:none;margin:0;padding:0;position:absolute;inset:0;pointer-events:none}
.chip{position:absolute;display:grid;gap:2px;padding:12px 16px 12px 14px;border-radius:18px;background:color-mix(in srgb,var(--tone) 78%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px var(--line),0 20px 40px -20px rgba(0,0,0,.5);pointer-events:auto}
.chip b{font-size:1.25rem;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}
.chip span{font-size:.8125rem;color:var(--ink-2)}
.chip.c1{left:51%;top:16%}
.chip.c2{right:0;top:44%}
.chip.c3{left:55%;bottom:12%}

.hero-wave{display:block;width:200%;height:clamp(60px,8vw,120px);margin-top:clamp(8px,2vw,24px)}
.hero-wave .w1{fill:color-mix(in srgb,var(--accent) 16%,transparent)}
.hero-wave .w2{fill:var(--ground)}
.marquee{background:var(--ground);overflow:hidden;padding:6px 0 0;mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;width:max-content}
.marquee-set{display:flex;align-items:center;gap:22px;padding-right:22px;white-space:nowrap}
.marquee a{font-size:clamp(1.125rem,1.6vw,1.5rem);font-weight:700;letter-spacing:-.03em;color:var(--ink-2);transition:color var(--fast)}
.marquee a:hover{color:var(--ink);text-decoration:none!important}
.marquee i{width:8px;height:10px;background:var(--link);clip-path:path('M4 0C5 2 8 5 8 7A4 3.5 0 0 1 0 7C0 5 3 2 4 0Z');opacity:.7}

/* motion for the stage */
html.anim .ring{animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
html.anim .ripples i{animation:ripple-out 4.5s ease-out infinite}
html.anim .ripples i:nth-child(2){animation-delay:1.5s}html.anim .ripples i:nth-child(3){animation-delay:3s}
@keyframes ripple-out{0%{transform:scale(.35);opacity:0}15%{opacity:.9}100%{transform:scale(1.25);opacity:0}}
html.anim .drop{animation:drop-in 1.4s var(--ease) both .2s,bob 7s ease-in-out infinite 1.6s}
@keyframes drop-in{from{opacity:0;transform:translateY(-60px) scale(.85)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
html.anim .drop-shine{animation:shine 6s ease-in-out infinite}
@keyframes shine{0%,100%{opacity:.7}50%{opacity:1}}
html.anim .big-ph{animation:ph-in 1.6s var(--ease) both}
@keyframes ph-in{from{opacity:0;transform:translateY(60%) scale(.92)}}
html.anim .chip{animation:chip-in .9s var(--ease) both,bob 6s ease-in-out infinite}
html.anim .chip.c1{animation-delay:.7s,1.6s}html.anim .chip.c2{animation-delay:.85s,2.4s}html.anim .chip.c3{animation-delay:1s,3.2s}
@keyframes chip-in{from{opacity:0;transform:translateY(20px) scale(.9)}}
html.anim .hero-wave{animation:wave 16s linear infinite}
html.anim .hero-wave .w1{animation:wave 11s linear infinite reverse;transform-box:fill-box}
@keyframes wave{to{transform:translateX(-50%)}}
html.anim .marquee-track{animation:marquee 60s linear infinite}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}

@media (max-width:900px){
 .hero-grid{grid-template-columns:1fr;min-height:0;gap:20px}
 .stage{width:min(100%,420px);margin-top:8px}
 .chips{position:static;display:flex;flex-wrap:wrap;gap:8px}
 .chip{position:static}
 html.anim .chip{animation:chip-in .9s var(--ease) both}
}
@media (max-width:560px){.big-ph{font-size:12rem}.ring text{font-size:17px}.hero-proof{gap:8px 16px}}

/* =====================================================================
   v4.3 FOOTER
   ===================================================================== */
.footer,:root:not([data-theme="dark"]) .footer{background:transparent;border-radius:0;padding:0;margin-top:clamp(40px,5vw,80px);color:var(--on-deep);overflow:hidden}
.page-admin .footer{margin-top:0}
.foot-wave{display:block;width:100%;height:clamp(40px,5vw,80px);margin-bottom:-1px}
.foot-wave path{fill:#071c31}
.foot-body{background:#071c31;padding-top:clamp(32px,4vw,56px);position:relative;isolation:isolate}
.foot-body::before{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(50% 40% at 80% 0%,rgba(60,140,240,.18),transparent 70%)}
.footer h2{color:#f2f7fb;font-size:var(--t-small);letter-spacing:0;margin-bottom:14px}
.foot-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px clamp(32px,6vw,112px);padding-bottom:clamp(40px,5vw,64px);box-shadow:inset 0 -1px 0 rgba(214,234,251,.09)}
.foot-logo{display:inline-flex;align-items:center;gap:14px;color:#f2f7fb;font-size:1.375rem;font-weight:800;letter-spacing:-.03em}
.foot-logo img{height:56px;width:auto;filter:brightness(0) invert(1);opacity:.98}
.foot-brand>p{color:#b4c9dc;font-size:1.0625rem;margin:20px 0 26px;max-width:44ch}
.foot-contact{display:flex;flex-wrap:wrap;gap:16px 36px;margin:0}
.foot-contact dt{font-size:.8125rem;color:#8ea7bd}
.foot-contact dd{margin:2px 0 0;color:#f2f7fb;font-weight:600}
.foot-contact a{color:#9fd0ff}
.foot-news{align-self:end;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(214,234,251,.1);border-radius:var(--r-lg);padding:clamp(20px,2.4vw,32px)}
.foot-news h2{font-size:clamp(1.5rem,2.4vw,2.25rem);letter-spacing:-.04em;line-height:1;margin-bottom:10px}
.foot-news p{color:#b4c9dc;font-size:var(--t-small);margin:0 0 18px}
.news-row{display:flex;gap:8px}
.news-row input{flex:1;min-width:0;background:rgba(255,255,255,.06)!important;border-color:rgba(214,234,251,.22)!important;color:#f2f7fb!important;border-radius:999px!important;padding-inline:18px!important}
.news-row input::placeholder{color:#8ea7bd}
.foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;padding-block:clamp(40px,5vw,64px)}
.foot-cols a{display:block;padding:6px 0;color:#c3d4e3;font-size:var(--t-small);width:fit-content;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:color var(--fast),background-size .35s var(--ease)}
.foot-cols a:hover{color:#fff;background-size:100% 1px;text-decoration:none!important}
.foot-word{margin:0;padding:0 var(--gutter);display:flex;justify-content:space-between;gap:.25em;font-size:clamp(3rem,10.6vw,12.5rem);font-weight:800;letter-spacing:-.065em;line-height:.82;white-space:nowrap;max-width:none;color:rgba(209,235,249,.10);user-select:none}
.foot-word span:first-child{color:rgba(90,170,255,.55)}
.foot-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;padding-block:22px 28px;font-size:.8125rem;color:#8ea7bd}
.to-top{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 16px;border-radius:999px;background:rgba(255,255,255,.07);color:#f2f7fb;font-weight:600;transition:background-color var(--fast)}
.to-top:hover{background:rgba(255,255,255,.14);text-decoration:none!important}
.to-top svg{width:16px;height:16px;transition:transform var(--fast) var(--ease)}
.to-top:hover svg{transform:translateY(-3px)}
html.anim .foot-word span{display:inline-block;transition:transform 1.1s var(--ease),opacity 1.1s;transform:translateY(40%);opacity:0}
html.anim .foot-word.in span{transform:none;opacity:1}
html.anim .foot-word.in span:nth-child(2){transition-delay:.08s}html.anim .foot-word.in span:nth-child(3){transition-delay:.16s}
@media (max-width:900px){.foot-top{grid-template-columns:1fr}.foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.news-row{flex-direction:column}.news-row .btn{width:100%}.foot-bar{flex-direction:column;align-items:flex-start}}
@media (prefers-reduced-motion:reduce){.foot-word span{opacity:1!important;transform:none!important}}
.chip.c1{left:47%;top:4%}
.chip.c2{right:-8px;top:52%}
.chip.c3{left:49%;bottom:2%}
.foot-word{justify-content:center;gap:.22em;font-size:clamp(3rem,12.2vw,15rem)}
@media (max-width:900px){.foot-word{font-size:12.6vw}}

/* =====================================================================
   v4.4 HERO, "the object, large". The photo's own pale blue is the whole field,
   so the bottle stands on it with no box and runs off the right edge.
   The label's vertical イオン is the second voice. Same in both themes.
   ===================================================================== */
.hero-object{--ho-field:#d1ebf9;--ho-ink:#0b1a2b;--ho-ink-2:#33465c;background:var(--ho-field);color:var(--ho-ink);margin-top:-88px;padding-top:88px;margin-bottom:var(--section);overflow:hidden;position:relative}
.ho-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto 1fr auto;column-gap:clamp(16px,2vw,32px);min-height:calc(100svh - 88px);max-height:920px;padding-left:max(var(--gutter),calc((100vw - 1360px)/2));position:relative}
.ho-copy{grid-column:1/7;grid-row:1;padding-top:clamp(32px,5vw,88px);position:relative;z-index:2}
.hero-object h1{color:var(--ho-ink);font-size:clamp(3.25rem,7.2vw,7.5rem);max-width:8.6ch}
.ho-lede{margin:28px 0 34px;font-size:clamp(1.125rem,1.35vw,1.3125rem);line-height:1.5;color:var(--ho-ink);max-width:34ch}
.ho-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.btn-ink{background:var(--ho-ink);color:#fff}
.btn-ink:hover{background:#0058b3}
.ho-link{display:inline-flex;align-items:center;min-height:44px;color:var(--ho-ink);font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.ho-link:hover{color:#0058b3}
.ho-facts{grid-column:1/8;grid-row:3;display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:clamp(24px,3.4vw,56px);margin:0;padding:0 0 clamp(28px,3.5vw,52px);position:relative;z-index:2}
.ho-facts div{display:flex;flex-direction:column-reverse;gap:6px}
.ho-facts dt{font-size:var(--t-small);color:var(--ho-ink-2);font-weight:500}
.ho-facts dd{margin:0;font-size:clamp(1.75rem,2.7vw,2.625rem);font-weight:800;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums;color:var(--ho-ink)}
.ho-kana{grid-column:7/8;grid-row:1/3;margin:0;align-self:start;padding-top:clamp(40px,6vw,100px);display:flex;flex-direction:column;align-items:flex-start;gap:20px;position:relative;z-index:2}
.ho-kana span{writing-mode:vertical-rl;font-family:'Noto Sans JP','IPAGothic','Hiragino Sans','Yu Gothic',sans-serif;font-weight:800;font-size:clamp(4.5rem,8.4vw,9rem);line-height:1;letter-spacing:-.02em;color:#0058b3}
.ho-kana figcaption{font-size:.875rem;line-height:1.45;color:var(--ho-ink-2);max-width:18ch}
.ho-kana figcaption b{display:block;color:var(--ho-ink)}
.ho-object{grid-column:8/13;grid-row:1/4;margin-right:calc(-1 * max(var(--gutter),(100vw - 1360px)/2) - 1px);align-self:end;position:relative;z-index:1;display:flex;justify-content:flex-end;align-items:flex-end;height:100%}
.ho-object img{display:block;height:min(100%,calc(100svh - 88px),860px);width:auto;max-width:none;object-fit:contain;object-position:100% 100%}
/* dark theme: the hero stays the photo's pale blue, a lit field in a dark page */
:root[data-theme="dark"] .hero-object .btn-ink{background:#0b1a2b;color:#fff}
/* motion: the bottle rises onto its floor, then drifts on scroll */
html.anim .ho-object img{animation:ho-rise 1.5s var(--ease) both .15s}
@keyframes ho-rise{from{transform:translateY(14%);opacity:0}}
html.anim .ho-kana>span{animation:ho-kana 1.3s var(--ease) both .45s}
@keyframes ho-kana{from{transform:translateY(-18%);opacity:0}}
@media (max-width:1100px){
 .ho-copy{grid-column:1/8}.ho-kana{grid-column:8/9}.ho-object{grid-column:8/13}
 .ho-facts{grid-column:1/9;grid-template-columns:repeat(2,auto)}
}
@media (max-width:900px){
 .hero-object{margin-top:-82px;padding-top:82px}
 .ho-grid{display:block;min-height:0;max-height:none;padding:0}
 .ho-copy{padding:28px var(--gutter) 0}
 .hero-object h1{font-size:clamp(3rem,13vw,5.5rem)}
 .ho-object{margin:28px 0 0;height:auto;justify-content:center;position:relative}
 .ho-object img{width:100%;height:auto;max-height:none;object-fit:cover;aspect-ratio:601/600;object-position:50% 100%}
 .ho-kana{position:absolute;right:var(--gutter);top:auto;padding:0;margin-top:-6px;z-index:3}
 .ho-kana span{font-size:3.5rem}
 .ho-kana figcaption{display:none}
 .ho-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px;padding:28px var(--gutter) 36px}
}
@media (prefers-reduced-motion:reduce){.ho-object img,.ho-kana span{animation:none}}
/* v4.4 critique fixes */
/* 1. hide the seam of the photo's baked backdrop: feather its left and top edges into the field */
.ho-object img{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 14%),linear-gradient(to bottom,transparent 0,#000 12%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 14%),linear-gradient(to bottom,transparent 0,#000 12%);mask-composite:intersect}
/* 2. the caption gets a readable measure */
.ho-kana{grid-column:7/9}
.ho-kana figcaption{max-width:24ch}
@media (max-width:1100px){.ho-kana{grid-column:8/10}}
/* 3. phone: a real grid; the katakana sits in the top-right of the photo, clear of every text block */
@media (max-width:900px){
 .ho-grid{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto auto;grid-template-areas:"copy" "facts" "object"}
 .ho-copy{grid-area:copy}
 .ho-facts{grid-area:facts;grid-column:auto;grid-row:auto}
 .ho-object{grid-area:object;grid-column:auto;grid-row:auto;margin:0}
 .ho-kana{grid-area:object;grid-column:auto;grid-row:auto;position:relative;right:auto;justify-self:end;align-self:start;margin:28px var(--gutter) 0 0;padding:0}
 .ho-kana span{font-size:clamp(3rem,13vw,5rem)}
 .ho-object img{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%);mask-image:linear-gradient(to bottom,transparent 0,#000 18%);-webkit-mask-composite:source-over;mask-composite:add}
}
@media (min-width:901px) and (max-width:1199px){.ho-kana{grid-column:7/8}.ho-kana figcaption{display:none}.ho-kana span{font-size:clamp(4rem,7vw,6rem)}}
@media (max-width:900px){
 .ho-copy,.ho-facts,.ho-object,.ho-kana{grid-column:1;grid-row:auto}
 .ho-copy{grid-row:1}.ho-facts{grid-row:2}.ho-object{grid-row:3}.ho-kana{grid-row:3}
}

/* =====================================================================
   v4.4 HERO MOTION, a choreographed opening, then a living loop.
   Timeline (s): 0 water rises · .35 イオン drops in · .5 headline swings up ·
   .8 bottle surfaces · 1.1 copy · 1.3 button · 1.5 prices count up.
   ===================================================================== */
.ho-water{position:absolute;left:0;bottom:-1px;width:200%;height:clamp(44px,5vw,80px);z-index:1;pointer-events:none}
.ho-water .hw1{fill:#bfe1f5}.ho-water .hw2{fill:#a9d5ef}
.ho-bubbles{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ho-bubbles span{position:absolute;left:var(--x);bottom:-30px;width:var(--s);height:var(--s);border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.85);opacity:0;animation:ho-bubble var(--d) linear infinite;animation-delay:var(--del)}
@keyframes ho-bubble{0%{transform:translate(0,0);opacity:0}12%{opacity:.9}100%{transform:translate(var(--drift),-90vh);opacity:0}}
.ho-object,.ho-kana{transition:translate .6s var(--ease)}

/* 1. the water rises to fill the screen */
html.anim .hero-object{background:transparent}
html.anim .hero-object::before{content:"";position:absolute;inset:0;z-index:0;background:var(--ho-field);animation:ho-fill 1s cubic-bezier(.7,0,.2,1) both}
@keyframes ho-fill{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
html.anim .ho-water{animation:ho-water-in 1.2s var(--ease) both .2s,ho-wave 14s linear infinite 1.4s}
html.anim .ho-water .hw1{animation:ho-wave-r 9s linear infinite}
@keyframes ho-water-in{from{transform:translateY(100%)}}
@keyframes ho-wave{to{transform:translateX(-50%)}}
@keyframes ho-wave-r{from{transform:translateX(-50%)}to{transform:translateX(0)}}
/* 2. イオン drops in, one character at a time */
html.anim .ho-kana>span{animation:none}
.kana-ch{display:inline-block}
html.anim .kana-ch{animation:kana-drop .9s cubic-bezier(.2,1.4,.4,1) both;animation-delay:calc(.35s + var(--k) * 120ms)}
@keyframes kana-drop{from{transform:translateY(-60%) rotate(-12deg);opacity:0}}
html.anim .ho-kana figcaption{animation:settle-in .8s var(--ease) both .95s}
/* 3. the headline swings up word by word */
.hero-object h1.split .w>span{transform:translateY(112%) rotate(7deg);transform-origin:0 100%;transition:transform 1.1s cubic-bezier(.2,1.1,.3,1);transition-delay:calc(var(--wd,0ms) * 1.3 + 500ms)}
.hero-object h1.split.words-in .w>span{transform:none}
/* 4. the bottle surfaces with a little overshoot, then floats */
html.anim .ho-object img{animation:ho-surface 1.5s cubic-bezier(.2,1.25,.35,1) both .8s,ho-bob 6.5s ease-in-out infinite 2.4s}
@keyframes ho-surface{0%{transform:translateY(28%) scale(.94);opacity:0}60%{opacity:1}}
@keyframes ho-bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-1.6%) rotate(-.6deg)}}
/* 5. copy, action and prices follow */
html.motion .hero-object .ho-lede{transition-delay:1.1s!important}
html.motion .hero-object .ho-cta{transition-delay:1.3s!important}
html.motion .hero-object .ho-facts{transition-delay:1.5s!important}
html.motion .hero-object .ho-kana{transition-delay:0s!important}
html.motion .hero-object h1.rise{transition-delay:.45s!important}
html.anim .ho-cta .btn-ink{animation:cta-pulse 3.2s ease-in-out infinite 3s}
@keyframes cta-pulse{0%,100%{box-shadow:0 0 0 0 rgba(11,26,43,.25)}50%{box-shadow:0 0 0 10px rgba(11,26,43,0)}}
.ho-facts dd{transition:transform .3s var(--ease)}
.ho-facts div:hover dd{transform:translateY(-3px)}
@media (max-width:900px){.ho-water{height:40px}}
@media (prefers-reduced-motion:reduce){
 .hero-object::before{display:none}.hero-object{background:var(--ho-field)!important}
 .ho-bubbles{display:none}.ho-water,.ho-water .hw1,.ho-object img,.kana-ch,.ho-cta .btn-ink{animation:none!important}
 .hero-object h1.split .w>span{transform:none!important}
}
html.anim .ho-kana>span:not(.split-k){opacity:0}
html.anim .hero-object .ho-lede,html.anim .hero-object .ho-cta,html.anim .hero-object .ho-facts{opacity:0}
html.anim .hero-object .ho-lede.in,html.anim .hero-object .ho-cta.in,html.anim .hero-object .ho-facts.in{opacity:1}

/* =====================================================================
   v4.5 HERO, motion-patterns tokens · ui-ux-pro-max pause control ·
   Apple DESIGN.md single action-blue pill.
   ===================================================================== */
:root{
 /* motion tokens (motion-patterns): durations, easings, springs as CSS linear() curves */
 --dur-instant:.08s;--dur-fast:.18s;--dur-normal:.35s;--dur-slow:.6s;--dur-crawl:1s;
 --ease-smooth:cubic-bezier(.22,1,.36,1);--ease-sharp:cubic-bezier(.4,0,.2,1);--ease-bounce:cubic-bezier(.34,1.56,.64,1);
 --spring-snappy:linear(0, .046, .151, .28, .413, .537, .645, .735, .808, .865, .908, .94, .963, .979, .99, .997, 1.001, 1.003, 1.004, 1.004, 1.003, 1.002, 1);--spring-snappy-t:.46s;
 --spring-gentle:linear(0, .083, .269, .484, .684, .844, .957, 1.028, 1.063, 1.074, 1.068, 1.055, 1.039, 1.024, 1.012, 1.004, .998, .995, .995, .996, .998, .999, 1);--spring-gentle-t:.99s;
 --spring-bouncy:linear(0, .496, 1.229, 1.435, 1.158, .86, .818, .959, 1.075, 1.073, 1.006, .963, .972, 1.002, 1.017, 1.01, .997, .992, .997, 1.002, 1.003, 1.001, 1);--spring-bouncy-t:1.38s;
 --stagger:80ms;--dist-md:16px;--dist-lg:24px;
}
/* Apple DESIGN.md: one Action Blue pill for the primary action */
.btn-action{background:#0058b3;color:#fff;transition:background-color var(--dur-fast) var(--ease-sharp),transform var(--spring-snappy-t) var(--spring-snappy)}
.btn-action:hover{background:#004793}
.hero-object .btn-large:hover{transform:scale(1.04)}
.hero-object .btn-large:active{transform:scale(.95);transition-duration:var(--dur-instant)}
.ho-link{transition:color var(--dur-fast) var(--ease-sharp)}
/* retime the opening with tokens: water (crawl) → katakana (bouncy, staggered) → headline (gentle, staggered) → bottle (gentle) */
html.anim .hero-object::before{animation-duration:var(--dur-crawl)}
html.anim .kana-ch{animation:kana-drop var(--spring-bouncy-t) var(--spring-bouncy) both;animation-delay:calc(var(--dur-normal) + var(--k) * var(--stagger))}
@keyframes kana-drop{from{transform:translateY(-40%);opacity:0}40%{opacity:1}}
.hero-object h1.split .w>span{transform:translateY(110%);transition:transform var(--spring-gentle-t) var(--spring-gentle);transition-delay:calc(var(--wd,0ms) / 70 * 80 + 500ms)}
html.anim .ho-object img{animation:ho-surface calc(var(--spring-gentle-t) * 1.4) var(--spring-gentle) both .8s,ho-bob 6.5s ease-in-out infinite 2.4s}
@keyframes ho-surface{from{transform:translateY(var(--dist-lg)) translateY(14%);opacity:0}}
html.motion .hero-object .ho-lede,html.motion .hero-object .ho-cta,html.motion .hero-object .ho-facts{transition:opacity var(--dur-slow) var(--ease-smooth),transform var(--dur-slow) var(--ease-smooth)!important}
html.motion .hero-object .ho-lede{transition-delay:1.1s!important}
html.motion .hero-object .ho-cta{transition-delay:calc(1.1s + var(--stagger))!important}
html.motion .hero-object .ho-facts{transition-delay:calc(1.1s + var(--stagger) * 2)!important}
html.anim .ho-cta .btn-action{animation:cta-pulse 3.2s ease-in-out infinite 3s}
@keyframes cta-pulse{0%,100%{box-shadow:0 0 0 0 rgba(0,88,179,.35)}50%{box-shadow:0 0 0 10px rgba(0,88,179,0)}}

/* ui-ux-pro-max: moving content that lasts over 5 seconds gets a visible pause control */
.ho-pause{position:absolute;z-index:3;right:max(var(--gutter),calc((100vw - 1360px)/2));bottom:clamp(14px,2vw,26px);display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:6px 16px 6px 10px;border:0;border-radius:999px;background:rgba(11,26,43,.78);color:#fff;font-size:.8125rem;font-weight:600;cursor:pointer;transition:background-color var(--dur-fast) var(--ease-sharp),transform var(--spring-snappy-t) var(--spring-snappy)}
.ho-pause:hover{background:#0b1a2b}
.ho-pause:active{transform:scale(.95)}
.ho-pause:focus-visible{outline:3px solid #0058b3;outline-offset:3px}
.ho-pause .i-pause{background:#fff}
.ho-pause .i-pause::before,.ho-pause .i-pause::after{background:#0b1a2b}
.ho-pause.is-paused .i-pause::before{left:8px;top:6px;width:0;height:0;background:none;border-left:7px solid #0b1a2b;border-top:4px solid transparent;border-bottom:4px solid transparent;border-radius:0}
.ho-pause.is-paused .i-pause::after{display:none}
.hero-object.is-paused *,.hero-object.is-paused::before{animation-play-state:paused!important}
.hero-object .ho-object,.hero-object .ho-kana{transition:translate var(--dur-slow) var(--ease-smooth)}
@media (max-width:900px){.ho-pause{right:var(--gutter);bottom:14px}}
/* motion-patterns: reduced motion = opacity-only, ≤ .2s */
@media (prefers-reduced-motion:reduce){
 .ho-pause{display:none!important}
 html.motion .hero-object .rise{transition:opacity .2s linear!important;transform:none!important}
}

/* =====================================================================
   v5.0 HERO, cinematic dark stage. Same in both themes: a launch stage.
   The photo's pale-blue backdrop becomes the light behind the bottle.
   ===================================================================== */
.hero-stage{--st-bg:#040d18;--st-ink:#f2f7fb;--st-ink-2:#b4c9dc;--st-word:#0d2742;
 position:relative;isolation:isolate;overflow:hidden;margin-top:-88px;padding-top:88px;margin-bottom:var(--section);
 min-height:max(680px,min(100svh,1000px));display:grid;grid-template-rows:minmax(0,1fr) auto;justify-items:center;
 background:radial-gradient(60% 55% at 50% 42%,#0b2442 0%,#061528 45%,var(--st-bg) 80%);color:var(--st-ink)}
.hs-scene{position:absolute;inset:0;z-index:0;pointer-events:none}
.hs-beams{position:absolute;left:50%;top:-30%;width:180vmax;height:180vmax;transform:translateX(-50%);opacity:.5;
 background:conic-gradient(from 180deg at 50% 50%,transparent 0deg,rgba(120,190,255,.10) 8deg,transparent 18deg,transparent 40deg,rgba(120,190,255,.07) 48deg,transparent 60deg,transparent 300deg,rgba(120,190,255,.07) 312deg,transparent 322deg,transparent 340deg,rgba(120,190,255,.10) 352deg,transparent 360deg);
 -webkit-mask-image:radial-gradient(closest-side,#000 20%,transparent 70%);mask-image:radial-gradient(closest-side,#000 20%,transparent 70%)}
.hs-word{position:absolute;left:0;right:0;top:44%;transform:translateY(-50%);margin:0;max-width:none;display:flex;justify-content:center;gap:.02em;
 font-size:clamp(9rem,33vw,30rem);font-weight:800;letter-spacing:-.06em;line-height:.8;user-select:none}
.hs-word span{display:inline-block;color:var(--st-word);background:linear-gradient(to bottom,#163a60 0%,#0b2340 55%,#071a30 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hs-motes{position:absolute;inset:0}
.hs-motes i{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;background:#bfe2ff;opacity:0;box-shadow:0 0 8px rgba(160,210,255,.8);animation:mote var(--d) ease-in-out infinite;animation-delay:var(--del)}
@keyframes mote{0%,100%{opacity:0;transform:translate(0,0)}30%{opacity:.8}70%{opacity:.5}50%{transform:translate(var(--dx),-40px)}}
.hs-floor{position:absolute;left:50%;top:70%;width:min(70vw,900px);height:120px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(110,180,255,.30),transparent);filter:blur(6px)}

.hs-product{position:relative;z-index:1;grid-row:1;align-self:center;width:min(86vw,52svh,540px);aspect-ratio:1;margin-top:clamp(8px,2svh,24px)}
.hs-light{position:absolute;inset:0;border-radius:50%}
.hs-light::before{content:"";position:absolute;inset:-18%;border-radius:50%;background:radial-gradient(closest-side,rgba(150,210,255,.55),rgba(80,150,240,.18) 55%,transparent 75%);z-index:-1}
.hs-light img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:42% 58%;
 -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 50%,rgba(0,0,0,.6) 60%,transparent 71%);mask-image:radial-gradient(circle at 50% 50%,#000 50%,rgba(0,0,0,.6) 60%,transparent 71%)}

.hs-copy{position:relative;z-index:2;grid-row:2;text-align:center;padding:0 var(--gutter) clamp(56px,9svh,104px);display:grid;justify-items:center}
.hero-stage h1{color:var(--st-ink);font-size:clamp(2.75rem,5.6vw,5.75rem);max-width:none;white-space:normal;text-wrap:balance}
.hs-lede{margin:18px 0 28px;font-size:clamp(1.0625rem,1.3vw,1.25rem);color:var(--st-ink-2);max-width:46ch}
.hs-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.btn-glass{background:rgba(255,255,255,.08);color:var(--st-ink);box-shadow:inset 0 0 0 1px rgba(214,234,251,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn-glass:hover{background:rgba(255,255,255,.15)}
.hero-stage .btn-large:hover{transform:scale(1.04)}.hero-stage .btn-large:active{transform:scale(.95)}
.hero-stage .btn{transition:background-color var(--dur-fast) var(--ease-sharp),transform var(--spring-snappy-t) var(--spring-snappy)}

.hs-spec{position:absolute;z-index:2;top:50%;transform:translateY(-50%);margin:0;display:grid;gap:28px}
.hs-spec-l{left:max(var(--gutter),calc((100vw - 1360px)/2))}
.hs-spec-r{right:max(var(--gutter),calc((100vw - 1360px)/2));text-align:right}
.hs-spec div{display:flex;flex-direction:column-reverse;gap:4px}
.hs-spec dt{font-size:var(--t-small);color:var(--st-ink-2)}
.hs-spec dd{margin:0;font-size:clamp(1.75rem,2.6vw,2.75rem);font-weight:800;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.hs-pause{position:absolute;z-index:3;right:max(var(--gutter),calc((100vw - 1360px)/2));bottom:24px;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:6px 16px 6px 10px;border:0;border-radius:999px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(214,234,251,.18);color:var(--st-ink);font-size:.8125rem;font-weight:600;cursor:pointer}
.hs-pause:hover{background:rgba(255,255,255,.15)}
.hs-pause .i-pause{background:#fff}.hs-pause .i-pause::before,.hs-pause .i-pause::after{background:var(--st-bg)}
.hs-pause.is-paused .i-pause::before{left:8px;top:6px;width:0;height:0;background:none;border-left:7px solid var(--st-bg);border-top:4px solid transparent;border-bottom:4px solid transparent;border-radius:0}
.hs-pause.is-paused .i-pause::after{display:none}
.hs-scroll{position:absolute;z-index:2;left:max(var(--gutter),calc((100vw - 1360px)/2));bottom:24px;display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--st-ink-2);font-size:.8125rem;font-weight:600}
.hs-scroll i{width:22px;height:34px;border-radius:999px;box-shadow:inset 0 0 0 1.5px rgba(214,234,251,.5);position:relative}
.hs-scroll i::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;border-radius:2px;background:#fff;transform:translateX(-50%)}
.hs-scroll:hover{color:#fff;text-decoration:none!important}

/* ---- choreography (motion tokens) ---- */
html.anim .hs-beams{animation:hs-lights 1.6s var(--ease-smooth) both .1s,hs-spin 40s linear infinite}
@keyframes hs-lights{from{opacity:0}}
@keyframes hs-spin{to{transform:translateX(-50%) rotate(360deg)}}
html.anim .hs-floor{animation:hs-lights 1.6s var(--ease-smooth) both .4s,hs-breathe 7s ease-in-out infinite 2s}
@keyframes hs-breathe{0%,100%{opacity:1}50%{opacity:.65}}
html.anim .hs-word span{animation:hs-letter calc(var(--spring-gentle-t) * 1.3) var(--spring-gentle) both;animation-delay:calc(.3s + var(--i,0) * var(--stagger))}
.hs-word span:nth-child(1){--i:0}.hs-word span:nth-child(2){--i:1}.hs-word span:nth-child(3){--i:2}
@keyframes hs-letter{from{transform:translateY(38%);opacity:0}}
html.anim .hs-light{animation:hs-focus 1.6s var(--ease-smooth) both .6s}
@keyframes hs-focus{from{opacity:0;transform:scale(1.18);filter:blur(14px)}}
html.anim .hs-light img{animation:hs-zoom 14s ease-in-out infinite alternate 2.2s}
@keyframes hs-zoom{to{transform:scale(1.05)}}
html.anim .hs-light::before{animation:hs-glow 6s ease-in-out infinite 2.2s}
@keyframes hs-glow{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}
.hero-stage h1.split .w>span{transform:translateY(110%);transition:transform var(--spring-gentle-t) var(--spring-gentle);transition-delay:calc(var(--wd,0ms) / 70 * 80 + 1.15s)}
.hero-stage h1.split.words-in .w>span{transform:none}
html.anim .hs-lede{animation:settle-in var(--dur-slow) var(--ease-smooth) both 1.55s}
html.anim .hs-cta{animation:settle-in var(--dur-slow) var(--ease-smooth) both 1.65s}
html.anim .hs-spec{animation:hs-spec-in var(--dur-slow) var(--ease-smooth) both 1.8s}
@keyframes hs-spec-in{from{opacity:0}}
html.anim .hs-scroll,html.anim .hs-pause{animation:hs-spec-in var(--dur-slow) var(--ease-smooth) both 2.1s}
html.anim .hs-scroll i::after{animation:hs-wheel 1.8s var(--ease-smooth) infinite 2.4s}
@keyframes hs-wheel{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,12px)}}
.hs-product,.hs-word{transition:translate var(--dur-slow) var(--ease-smooth)}
.hero-stage.is-paused *,.hero-stage.is-paused *::before,.hero-stage.is-paused *::after{animation-play-state:paused!important}

@media (max-width:900px){
 .hero-stage{margin-top:-82px;padding-top:82px;min-height:0}
 .hs-product{width:min(82vw,420px);margin-top:20px}
 .hs-word{top:30%;font-size:44vw}
 .hs-spec{position:static;transform:none;grid-row:3;display:flex;gap:28px;justify-content:center;padding:0 var(--gutter) 88px;text-align:center}
 .hs-spec-r{grid-row:4;margin-top:-64px}
 .hs-spec div{align-items:center}
 .hs-copy{padding-bottom:40px}
 .hs-scroll{display:none}
 .hs-pause{right:50%;transform:translateX(50%)}
}
@media (prefers-reduced-motion:reduce){
 .hs-pause,.hs-motes{display:none!important}
 .hero-stage *{animation:none!important}
 .hero-stage h1.split .w>span{transform:none!important}
}
/* v5.0 polish: a bigger, more luminous spotlight; ION with more presence */
.hs-product{width:min(86vw,60svh,620px)}
.hs-light::before{inset:-24%;background:radial-gradient(closest-side,rgba(170,220,255,.62),rgba(90,160,245,.24) 52%,rgba(40,110,220,.08) 68%,transparent 78%)}
.hs-light img{-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 54%,rgba(0,0,0,.55) 63%,transparent 72%);mask-image:radial-gradient(circle at 50% 50%,#000 54%,rgba(0,0,0,.55) 63%,transparent 72%)}
.hs-word span{background:linear-gradient(to bottom,#1f4f82 0%,#0f2e52 50%,#081d35 100%);-webkit-background-clip:text;background-clip:text}
@media (max-width:900px){.hs-product{width:min(86vw,440px);margin-top:36px}}
.hs-product{width:min(86vw,54svh,600px);margin-top:clamp(20px,3svh,40px)}@media (max-width:900px){.hs-product{width:min(86vw,440px);margin-top:36px}}

/* =====================================================================
   v6.1 HERO FILM, a motion-graphics film. The red dot from the ION logo is
   the protagonist. Every frame is computed by one timeline in ion.js
   (transform / opacity only), so motion is continuous and scrubbable.
   ===================================================================== */
@font-face{font-family:'Jost';src:url('/assets/fonts/jost-var.woff') format('woff');font-weight:100 900;font-display:swap}
@font-face{font-family:'Newsreader';src:url('/assets/fonts/newsreader-var.woff') format('woff');font-weight:200 800;font-display:swap}
@font-face{font-family:'Newsreader';src:url('/assets/fonts/newsreader-italic-var.woff') format('woff');font-weight:200 800;font-style:italic;font-display:swap}
.hero-film{--f-deep:#0d4a96;--f-pale:#dcefff;--f-white:#ffffff;--f-ink:#0b1a2b;--f-dot:#e8232a;--f-bg:var(--f-deep);--f-fg:var(--f-pale);
 position:relative;isolation:isolate;overflow:hidden;margin-top:-88px;padding-top:88px;margin-bottom:var(--section);
 min-height:max(640px,min(100svh,980px));display:grid;place-items:center;background:var(--f-bg);color:var(--f-fg);font-family:'Jost','Inter',system-ui,sans-serif;
 -webkit-font-smoothing:antialiased}
.hero-film[data-scene="alkaline"],.hero-film[data-scene="stack"],.hero-film[data-scene="wipe"]{--f-bg:var(--f-pale);--f-fg:var(--f-deep)}
.hero-film[data-scene="simple"]{--f-bg:var(--f-white);--f-fg:var(--f-ink)}
.hf-intro{position:absolute;inset:88px 0 0;z-index:1;pointer-events:none;contain:layout}
.hf-intro>*{position:absolute;opacity:0;visibility:hidden}
.tgt{display:block;position:absolute;width:.19em;height:.19em;border-radius:50%;background:var(--f-dot)}
.ti{position:relative;display:inline-block}
.ti .tgt{left:50%;top:.13em;transform:translateX(-50%)}
.hfw{display:inline-block;white-space:nowrap}
.hfc{display:inline-block;will-change:transform,opacity}
.hf-bl{display:inline-block;width:0;height:0}
.hf-word{left:0;right:0;top:50%;transform:translateY(-50%);margin:0;max-width:none;text-align:center;font-weight:600;font-size:clamp(4rem,12vw,12rem);letter-spacing:-.035em;line-height:1.1;color:var(--f-fg)}
.w-sci{color:var(--f-pale)}
.w-sim{font-family:'Newsreader',Georgia,serif;font-weight:500;letter-spacing:-.02em;color:var(--f-ink)}
.w-sim .ti .tgt{top:.05em;width:.16em;height:.16em}
.w-sim small{display:block;margin-top:.1em;font-size:.16em;font-style:italic;font-weight:400;letter-spacing:0;line-height:1.3}
.hf-draw{left:50%;top:50%;width:min(58vmin,440px);height:auto;transform:translate(-50%,-50%);overflow:visible}
.hf-draw path{fill:none;stroke:var(--f-pale);stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1}
.hf-lines{inset:0;width:100%;height:100%;overflow:visible}
.hf-lines path{fill:none;stroke:var(--f-deep);stroke-width:2;stroke-linecap:round}
.hf-grid{inset:0}
.hf-grid i{position:absolute;background:rgba(220,239,255,.2)}
.hf-grid .v{top:26%;bottom:26%;width:1px;transform-origin:50% 0;transform:scaleY(0)}
.hf-grid .v:nth-child(1){left:14%}.hf-grid .v:nth-child(2){left:27%}.hf-grid .v:nth-child(3){left:41%}.hf-grid .v:nth-child(4){left:58%}.hf-grid .v:nth-child(5){left:72%}.hf-grid .v:nth-child(6){left:86%}
.hf-grid .h{left:5%;right:5%;height:1px;transform-origin:0 50%;transform:scaleX(0)}
.hf-grid .h:nth-child(7){top:39%}.hf-grid .h:nth-child(8){top:53.5%}.hf-grid .h:nth-child(9){top:61%}
.hf-stack{right:max(var(--gutter),calc((100vw - 1360px)/2 + 40px));top:50%;margin:0;padding:0;list-style:none;text-align:right;font-weight:600;font-size:clamp(2.75rem,7vw,7rem);letter-spacing:-.035em;line-height:1.08}
.hf-stack li{color:var(--f-deep);will-change:opacity}
.hf-stack .tgt{position:relative;display:inline-block;margin-left:.04em;vertical-align:baseline}
.hf-wipe{left:0;top:0;width:200px;height:200px;margin:-100px 0 0 -100px;border-radius:50%;background:var(--f-deep);box-shadow:0 0 18px 4px var(--f-deep);will-change:transform}
.hf-dot{position:absolute;z-index:3;left:0;top:0;width:100px;height:100px;margin:-50px 0 0 -50px;border-radius:50%;background:var(--f-dot);pointer-events:none;visibility:hidden;will-change:transform}

/* final frame (also the no-script / reduced-motion state) */
.hf-final{position:relative;z-index:2;display:grid;justify-items:center;text-align:center;padding:clamp(24px,5svh,56px) var(--gutter)}
.hero-film h1{font-family:'Jost','Inter',sans-serif;font-weight:600;font-size:clamp(3.25rem,8.2vw,8.75rem);letter-spacing:-.04em;line-height:.98;color:var(--f-pale);max-width:12ch;text-wrap:balance}
.hf-period{position:relative;display:inline-block;width:.19em;height:.19em;margin-left:.015em}
.hf-period .tgt{inset:0;width:auto;height:auto}
.hf-tag{position:relative;margin:28px 0 30px;font-size:clamp(1.125rem,1.5vw,1.375rem);font-weight:400;color:var(--f-pale);max-width:40ch}
.hf-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.btn-pale{background:var(--f-pale);color:var(--f-deep)}
.btn-pale:hover{background:#fff}
.btn-line{background:transparent;color:var(--f-pale);box-shadow:inset 0 0 0 1.5px rgba(220,239,255,.55)}
.btn-line:hover{background:rgba(220,239,255,.1)}
.hero-film .btn{font-family:'Jost','Inter',sans-serif;font-weight:600;min-height:52px;transition:background-color var(--dur-fast) var(--ease-sharp),transform var(--spring-snappy-t) var(--spring-snappy)}
.hero-film .btn:hover{transform:scale(1.04)}.hero-film .btn:active{transform:scale(.95)}
.hf-facts{margin:26px 0 0;font-size:.9375rem;color:rgba(220,239,255,.85);max-width:none}
.hf-thread{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}
.hf-thread path{fill:none;stroke:rgba(220,239,255,.7);stroke-width:1.25;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1}
.hf-skip{position:absolute;z-index:4;right:max(var(--gutter),calc((100vw - 1360px)/2));bottom:clamp(16px,3svh,32px);min-height:44px;padding:8px 18px;border:0;border-radius:999px;background:transparent;color:var(--f-fg);font:600 .875rem 'Jost','Inter',sans-serif;cursor:pointer;box-shadow:inset 0 0 0 1.5px currentColor;opacity:.7;transition:opacity var(--dur-fast),color 0s}
.hf-skip:hover,.hf-skip:focus-visible{opacity:1}

/* while the film plays the engine owns every moving part */
.hero-film.playing .hf-final{visibility:hidden}
.hero-film.playing.at-final .hf-final{visibility:visible}
.hero-film.playing .hf-dot,.hero-film.docking .hf-dot{visibility:visible}
.hero-film.playing .ti .tgt,.hero-film.playing .hf-period .tgt,.hero-film.docking .hf-period .tgt{opacity:0}
.hero-film.playing .hf-intro>.on{opacity:1;visibility:visible}
@media (max-width:900px){.hero-film{margin-top:-82px;padding-top:82px}.hf-intro{inset:82px 0 0}.hf-word{font-size:clamp(3.5rem,17vw,7rem)}.hf-stack{font-size:clamp(2.4rem,11vw,4.5rem)}}
@media (prefers-reduced-motion:reduce){.hf-intro,.hf-dot,.hf-skip{display:none!important}}
.hero-film:not(.playing) .hfc{will-change:auto}
.hf-iris{position:absolute;z-index:0;left:0;top:0;width:200px;height:200px;margin:-100px 0 0 -100px;border-radius:50%;pointer-events:none;visibility:hidden;will-change:transform;box-shadow:0 0 0 0 transparent}
.hero-film.playing{transition:none}

/* v6.3 marquee band under the hero */
.hero-film{margin-bottom:0}
.band{--b-bg:#dcefff;--b-ink:#0d4a96;background:var(--b-bg);color:var(--b-ink);overflow:hidden;padding:22px 0;border-block:1px solid rgba(13,74,150,.14);margin-bottom:var(--section)}
.band-track{display:flex;width:max-content;animation:band-slide 55s linear infinite;font-family:'Jost','Inter',system-ui,sans-serif;font-weight:700;font-size:clamp(1.625rem,3.6vw,2.75rem);letter-spacing:-.03em;line-height:1.1}
.band-group{display:flex;flex:none}
.band-group span{display:flex;align-items:center;white-space:nowrap}
.band-group span::after{content:"";flex:none;width:.3em;height:.3em;margin:0 .9em;border-radius:50%;background:#e8232a}
.band:hover .band-track{animation-play-state:paused}
@keyframes band-slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.band-track{animation:none}}

/* v7.0 store manager: product photo, delete, website editor */
.erp-photo{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px;margin-bottom:8px}
.erp-photo img{width:96px;height:96px;object-fit:contain;border-radius:12px;background:var(--tone)}
.erp-photo .field{flex:1 1 260px}
.erp-delete{display:flex;justify-content:flex-end;padding:0 0 18px;margin-top:-6px}
.erp-delete .btn-danger,.btn-danger{min-height:44px;padding:0 18px;border-radius:999px;border:0;background:transparent;color:#d92d2a;box-shadow:inset 0 0 0 1.5px currentColor;font-weight:600;cursor:pointer}
.erp-delete .btn-danger:hover{background:#d92d2a;color:#fff}
.web-editor{display:grid;gap:18px}
.web-editor fieldset{border:0;margin:0;min-width:0}
.web-editor legend{font-size:1.125rem;font-weight:700;padding:0 0 12px;float:left;width:100%}
.web-editor legend+*{clear:both}
.web-editor textarea{resize:vertical;font:inherit}
input[type=file]{font:inherit;font-size:var(--t-small);padding:10px 0}
/* the store manager is a separate app: no site header, menu or footer */
body.admin-app{background:var(--ground)}
body.admin-app .erp{min-height:100svh}
body.admin-app .erp-side{top:0;height:100svh}
body.admin-app .admin-gate{min-height:100svh}
body.admin-app #main{outline:0}
.erp-brand{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 4px 18px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.erp-logo{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;min-width:0}
.erp-logo img{width:40px;height:auto;flex:none}
.erp-logo span{display:grid;line-height:1.2;min-width:0}
.erp-logo b{font-size:.9375rem;white-space:nowrap}
.erp-logo small{font-size:.75rem;color:var(--ink-2)}
.erp-brand-tools{display:flex;gap:2px}
.erp-brand-tools .icon-btn{width:40px;height:40px}
@media (max-width:900px){.erp-brand{border-bottom:0;margin-bottom:0;padding-bottom:10px}}
.erp-logo{flex:1 1 auto}
.erp-logo b{font-size:.875rem;overflow:hidden;text-overflow:ellipsis}
.erp-brand-tools{flex:none;gap:0}
.erp-brand-tools .icon-btn{width:40px;height:40px;min-width:40px;margin:0;padding:0}
.erp-logo{gap:8px}.erp-logo img{width:34px}

/* store manager keeps the original v3 white & dark themes (light by default,
   own toggle memory "ion_admin_theme"), independent of the site's navy look */
:root.admin-theme{
 --ground:#ffffff;--tone:#f5f5f7;--tone-2:#ebebef;--deep:#0c2236;
 --ink:#1d1d1f;--ink-2:#47474c;--on-deep:#f5f5f7;--on-deep-2:#b7cadb;
 --accent:#0058b3;--accent-press:#00488f;--on-accent:#ffffff;--link:#0058b3;
 --input:#86868b;--ok:#0b6b35;--ok-bg:#e3f4ea;--warn:#a1261c;--warn-bg:#fbe9e7;
 --line:rgba(0,0,0,.08);--glow:rgba(0,88,179,.14);color-scheme:light;
}
:root.admin-theme[data-theme="dark"]{
 --ground:#0b0c0f;--tone:#16181d;--tone-2:#1f2229;--deep:#081827;
 --ink:#f5f5f7;--ink-2:#b9bcc4;--link:#5aa9ff;--accent:#0a66d0;--accent-press:#0858b5;
 --input:#6e7380;--ok:#7bd8a0;--ok-bg:#10281b;--warn:#ff9c90;--warn-bg:#331513;
 --line:rgba(255,255,255,.08);--glow:rgba(90,169,255,.22);color-scheme:dark;
}
.admin-theme body.admin-app{background:var(--ground)}
.admin-theme .erp-main{background:var(--tone)}
.admin-theme .erp-side{background:var(--ground)}
.admin-theme h1,.admin-theme h2{font-weight:700;letter-spacing:-.035em}
.admin-theme .admin-gate{background:var(--tone)}
.admin-theme .admin-gate-card{background:var(--ground)}
.erp-brand{justify-content:flex-start}
.erp-logo b{overflow:visible;white-space:nowrap;font-size:.9375rem}
.erp-logo img{width:38px}
.erp-tools{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:18px 4px 0;padding-top:14px;border-top:1px solid var(--line)}
.erp-tool{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border-radius:12px;color:var(--ink);text-decoration:none;font-size:var(--t-small);font-weight:600}
.erp-tool svg{width:20px;height:20px}
.erp-tool:hover{background:var(--tone)}
.erp-tools .theme-toggle{width:44px;height:44px}

/* =====================================================================
   v8.0 LIGHT RESEARCH LOOK, client brief 2026-10: white and bright,
   no deep blue; pale-blue (#f5faff) grounds like thecareersup.com.
   ===================================================================== */
:root:not(.admin-theme){
 --ground:#ffffff;--tone:#f5faff;--tone-2:#e8f2fd;--field:#e6f3ff;--field-ink:#0b1a2b;
 --deep:#0f74e0;--on-deep:#ffffff;--on-deep-2:#e3f0ff;
 --ink:#0b1a2b;--ink-2:#4a5b6e;--accent:#0a6fd6;--accent-press:#085cb3;--link:#0a6fd6;
 --line:rgba(10,111,214,.12);--glow:rgba(10,111,214,.16);--red:#e8232a;--sky:#28a8ef;--mint:#16b88a;
}
/* top contact bar */
.topbar{background:var(--tone);border-bottom:1px solid var(--line);font-size:.875rem;color:var(--ink-2);position:relative;z-index:101}
.tb-inner{display:flex;align-items:center;justify-content:space-between;gap:8px 24px;min-height:44px;flex-wrap:wrap;padding-block:4px}
.tb-right{display:flex;gap:4px 22px;flex-wrap:wrap}
.tb-item{display:inline-flex;align-items:center;gap:8px;min-height:36px;color:inherit;text-decoration:none;min-width:0}
.tb-item svg{width:17px;height:17px;flex:none;color:var(--accent)}
.tb-item b{color:var(--ink);font-weight:600;margin-right:2px}
.tb-item span{overflow-wrap:anywhere}
.tb-item:hover{color:var(--accent)}
.tb-hot svg{color:var(--red)}
@media (max-width:700px){.topbar{font-size:.8125rem}.tb-loc{display:none}.tb-inner{justify-content:center}}

/* light hero */
.hero-light{position:relative;overflow:hidden;margin-top:-88px;padding:calc(88px + clamp(32px,5vw,72px)) 0 clamp(48px,6vw,96px);margin-bottom:0;
 background:radial-gradient(60% 70% at 85% 30%,#d9eeff 0%,rgba(217,238,255,0) 60%),radial-gradient(40% 50% at 10% 90%,#e9fbf4 0%,rgba(233,251,244,0) 70%),linear-gradient(#f5faff,#ffffff)}
.hl-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,88px);align-items:center}
.hl-eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 22px;padding:8px 16px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--line),0 6px 20px rgba(10,111,214,.08);font-size:.875rem;font-weight:600;color:var(--ink-2);max-width:none}
.hl-dot{width:9px;height:9px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px rgba(232,35,42,.14)}
.hl-title{font-size:clamp(2.9rem,6.6vw,6.5rem);font-weight:800;letter-spacing:-.05em;line-height:.95;color:var(--ink);max-width:13ch;margin:0;text-wrap:balance}
.hl-sub{margin:24px 0 32px;font-size:clamp(1.125rem,1.5vw,1.375rem);color:var(--ink-2);max-width:40ch}
.hl-cta{display:flex;flex-wrap:wrap;gap:12px}
.hl-facts{display:flex;flex-wrap:wrap;gap:12px 36px;margin:40px 0 0;padding:0;list-style:none}
.hl-facts li{display:grid;line-height:1.2}
.hl-facts b{font-size:1.375rem;letter-spacing:-.02em;color:var(--ink)}
.hl-facts span{font-size:.875rem;color:var(--ink-2)}
.hl-photo{position:relative;margin:0;border-radius:32px;overflow:visible;aspect-ratio:601/664;max-height:640px;justify-self:center;width:min(100%,520px)}
.hl-photo img{width:100%;height:100%;object-fit:cover;border-radius:32px;box-shadow:0 30px 80px rgba(10,111,214,.18)}
.hl-chip{position:absolute;display:grid;gap:2px;padding:12px 16px;border-radius:16px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);box-shadow:0 10px 30px rgba(11,26,43,.12);font-size:.8125rem;color:var(--ink-2)}
.hl-chip b{font-size:.9375rem;color:var(--ink)}
.hl-chip-a{left:-28px;top:14%}.hl-chip-b{right:-24px;bottom:12%}
html.anim .hl-chip{animation:float 6s ease-in-out infinite}html.anim .hl-chip-b{animation-delay:-3s}
html.anim .hl-title{animation:settle-in .9s var(--ease) both}
@media (max-width:900px){.hero-light{margin-top:-82px;padding-top:calc(82px + 28px)}.hl-grid{grid-template-columns:1fr}.hl-photo{width:min(100%,420px)}.hl-chip-a{left:-8px}.hl-chip-b{right:-8px}}
:root[data-theme="dark"]:not(.admin-theme) .hero-light{background:linear-gradient(#0b1622,#0b0c0f)}

/* band: bright, not deep */
.band{--b-bg:#e6f3ff;--b-ink:#0a6fd6}

/* water test highlight */
.test200{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:center;padding-block:clamp(72px,9vw,140px)}
.t2-kicker{margin:0 0 14px;font-size:.8125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.test200 h2{font-size:clamp(2rem,3.6vw,3.5rem);line-height:1.02;max-width:18ch}

.t2-copy>p{color:var(--ink-2);margin:20px 0 28px;max-width:46ch}
.t2-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.t2-stats div{background:var(--tone);border-radius:18px;padding:16px 18px}
.t2-stats dt{font-size:.8125rem;color:var(--ink-2)}
.t2-stats dd{margin:4px 0 0;font-size:clamp(1.75rem,3vw,2.5rem);font-weight:800;letter-spacing:-.04em;color:var(--ink)}
.t2-stats .good{background:#e8f8f1}.t2-stats .good dd{color:var(--mint)}
.t2-map-card{position:relative;display:grid;gap:18px;align-self:start;padding:clamp(20px,2.2vw,28px);background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(233,245,255,.95));border-radius:32px;overflow:hidden;box-shadow:0 24px 80px rgba(136,166,192,.16)}
.t2-map-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 14% 88%,rgba(190,232,255,.45),transparent 28%),radial-gradient(circle at 88% 20%,rgba(195,236,255,.4),transparent 28%);pointer-events:none}
.t2-map{position:relative;z-index:1;width:100%;height:auto;display:block}
.bd-map-shadow{fill:#dff3ff}
.bd-map-fill{fill:url(#bdFill);stroke:#fff;stroke-width:6;stroke-linejoin:round;fill-rule:evenodd}
.bd-map-outline{fill:none;stroke:#ffffff;stroke-width:3;stroke-linejoin:round;stroke-linecap:round;opacity:.98}
.bd-test-dot{fill:rgba(255,255,255,.96)}
html.anim .bd-test-dot{opacity:0;transform:scale(.35);transform-origin:center;animation:bdDotIn .45s var(--ease) forwards;animation-delay:calc(var(--k) * 5ms)}
@keyframes bdDotIn{to{opacity:1;transform:scale(1)}}
.bd-map-connector{fill:none;stroke:#184f96;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}
.bd-pin path{stroke:#fff;stroke-width:3.2}
.bd-pin.is-source path{fill:#25c68b}
.bd-pin.is-selected path{fill:#f0ae10}
.bd-pin-core{fill:#fff}
.bd-ripple{fill:none;stroke:#4fb2ef;stroke-width:4;opacity:.6}
.bd-ripple-1{animation:t2-ring 2.4s ease-out infinite}
.bd-ripple-2{animation:t2-ring 2.4s ease-out .6s infinite}
@keyframes t2-ring{0%{opacity:.6;transform:scale(.92);transform-origin:center}100%{opacity:0;transform:scale(1.45);transform-origin:center}}
.t2-callout{position:absolute;top:22px;right:20px;z-index:2;min-width:min(100%,250px);padding:0;border-radius:24px;background:#fff;box-shadow:0 20px 40px rgba(56,100,140,.18);overflow:hidden;border:4px solid #194f96}
.t2-callout__title{display:block;padding:12px 20px 10px;background:#194f96;color:#fff;font-size:2rem;font-weight:800;letter-spacing:-.04em;line-height:1;text-align:center}
.t2-callout__sub{display:flex;align-items:center;gap:12px;padding:16px 18px 18px;font-size:1.08rem;font-weight:700;line-height:1.25;color:#113964}
.t2-callout__sub::before{content:"";width:46px;height:46px;flex:0 0 46px;border-radius:16px;background:#eaf1ff;box-shadow:inset 0 0 0 2px rgba(25,79,150,.12);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none'%3E%3Cpath d='M8 48h48M12 48V24h14v24M30 48V16h22v32' stroke='%23194f96' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18 31h3M18 37h3M36 24h3M36 30h3M36 36h3M46 24h3M46 30h3M46 36h3' stroke='%23194f96' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:28px}
.t2-map-legend{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 24px;padding:16px 18px;background:rgba(255,255,255,.78);border-radius:22px;color:#21415d;font-size:.975rem;font-weight:600}
.t2-map-legend span{display:flex;align-items:center;gap:10px}
.source-key{display:inline-block;width:14px;height:14px;border-radius:50%;background:#d7ebf8;box-shadow:0 0 0 6px rgba(255,255,255,.65)}
.source-key--alkaline{background:#25c68b;box-shadow:0 0 0 6px rgba(37,198,139,.18)}
.source-key--selected{background:#f0ae10;box-shadow:0 0 0 6px rgba(240,174,16,.18)}
@media (max-width:1100px){.t2-callout{position:static;margin:0 auto 8px;max-width:340px;width:100%}}
@media (max-width:900px){.test200{grid-template-columns:1fr}.t2-stats{grid-template-columns:repeat(3,minmax(0,1fr))}.t2-map-card{padding:18px}.t2-map{max-height:none}}
@media (max-width:640px){.t2-callout__title{font-size:1.55rem}.t2-callout__sub{font-size:.95rem;padding:14px 15px 16px}.t2-map-legend{justify-content:flex-start;font-size:.9rem;padding:14px}.source-key{width:12px;height:12px}}
@media (max-width:480px){.t2-stats dd{font-size:1.5rem}.t2-stats div{padding:12px}.t2-map-card{border-radius:24px}.t2-callout{border-width:3px}.t2-callout__sub::before{width:40px;height:40px;flex-basis:40px}}


/* why alkaline */
.why{padding-bottom:clamp(72px,9vw,140px)}
.why-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.why-card{background:var(--tone);border-radius:24px;padding:clamp(22px,2.6vw,36px);display:grid;align-content:start;gap:10px}
.why-n{font-size:.875rem;font-weight:800;color:var(--accent);letter-spacing:.04em}
.why-card h3{font-size:clamp(1.25rem,1.8vw,1.625rem)}
.why-card p{margin:0;color:var(--ink-2)}
@media (max-width:900px){.why-grid{grid-template-columns:1fr}}

/* clients */
.clients{padding-bottom:clamp(56px,7vw,110px)}
.client-row{display:flex;flex-wrap:wrap;gap:14px;margin:0;padding:0;list-style:none}
.client-row li{flex:1 1 160px;max-width:240px;min-height:96px;display:grid;place-items:center;background:var(--tone);border-radius:18px;padding:16px}
.client-row img{max-width:100%;max-height:56px;object-fit:contain;filter:grayscale(1);opacity:.8;transition:filter .3s,opacity .3s}
.client-row li:hover img{filter:none;opacity:1}
.client-row span{font-weight:700;color:var(--ink-2);text-align:center}

/* research fund teaser + page */
.fund-teaser{padding-bottom:clamp(56px,7vw,110px)}
.ft-card{display:flex;align-items:center;justify-content:space-between;gap:24px 48px;flex-wrap:wrap;padding:clamp(28px,4vw,56px);border-radius:32px;background:linear-gradient(120deg,#e6f3ff,#eafaf4)}
.ft-card h2{font-size:clamp(2rem,3.6vw,3.25rem);margin:0 0 12px}
.ft-card p{margin:0;color:var(--ink-2);max-width:56ch}
.doc-list{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.doc{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;padding:18px 22px;border-radius:20px;background:var(--tone)}
.doc-ico{display:grid;place-items:center;width:54px;height:64px;border-radius:10px;background:#fff;color:var(--red);font-weight:800;font-size:.8125rem;box-shadow:0 0 0 1px var(--line)}
.doc h2{font-size:1.25rem;letter-spacing:-.02em;margin:0}
.doc p{margin:4px 0 0;color:var(--ink-2)}
.doc small{color:var(--ink-2)}
@media (max-width:640px){.doc{grid-template-columns:auto minmax(0,1fr)}.doc .btn{grid-column:1/-1}}

/* blog insights */
.insights{padding-bottom:clamp(72px,9vw,140px)}
.insight-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.insight{display:grid;align-content:start;gap:10px;padding:22px;border-radius:24px;background:var(--tone);color:inherit;text-decoration:none;transition:transform .3s var(--ease),box-shadow .3s}
.insight:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(10,111,214,.12)}
.insight img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:16px}
.insight-tag{justify-self:start;padding:4px 12px;border-radius:999px;background:#fff;color:var(--accent);font-size:.75rem;font-weight:700;box-shadow:0 0 0 1px var(--line)}
.insight h3{font-size:1.25rem;line-height:1.2}
.insight p{margin:0;color:var(--ink-2);font-size:var(--t-small)}
.insight-more{font-weight:700;color:var(--accent);font-size:var(--t-small)}
@media (max-width:900px){.insight-grid{grid-template-columns:1fr}}

/* footer socials + WhatsApp float */
.foot-social{display:flex;flex-wrap:wrap;gap:10px;padding-block:8px 32px}
.soc{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px 0 16px;border-radius:999px;color:#fff;text-decoration:none;font-weight:600;font-size:.9375rem;transition:transform .2s var(--ease),filter .2s}
.soc svg{width:22px;height:22px}
.soc:hover{transform:translateY(-2px);filter:brightness(1.08)}
.soc-fb{background:#1877f2}.soc-yt{background:#e62117}.soc-wa{background:#1fa855}
.wa-float{position:fixed;z-index:120;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 20px 0 14px;border-radius:999px;background:#1fa855;color:#fff;font-weight:700;font-size:.9375rem;text-decoration:none;box-shadow:0 12px 30px rgba(31,168,85,.35);transition:transform .2s var(--ease)}
.wa-float svg{width:26px;height:26px}
.wa-float:hover{transform:translateY(-2px)}
@media (max-width:600px){.wa-float span{display:none}.wa-float{padding:0;width:56px;height:56px;justify-content:center}}
.band{margin-bottom:0}
.closer .btn-primary,.planner .btn-primary{background:#fff;color:var(--accent)}
.closer .btn-primary:hover,.planner .btn-primary:hover{background:#eef6ff}
.closer .btn-ghost{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)}
@media (max-width:700px){.tb-inner{min-height:38px;flex-wrap:nowrap}.tb-right{flex-wrap:nowrap;gap:14px;justify-content:center;width:100%}.tb-item b{display:none}.tb-item{min-height:34px;gap:6px;font-size:.78rem;white-space:nowrap}}
.tb-hot a{color:inherit;text-decoration:none}.tb-hot a:hover{color:var(--accent);text-decoration:underline}
@media (max-width:700px){.tb-hot{white-space:normal;text-align:center}}

/* v8.1 Certified, tested & approved, from the client's scroll-story design */
.certs{padding-block:clamp(72px,9vw,140px)}
.cert-head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);align-items:end;gap:clamp(28px,6vw,96px)}
.cert-head h2{font-size:clamp(2.4rem,5.4vw,5.25rem);line-height:.95;letter-spacing:-.055em;max-width:14ch}
.cert-intro{margin:0 0 .35rem;color:var(--ink-2);font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.7;max-width:46ch}
.cert-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:clamp(40px,6vw,80px)}
.cert-card{position:relative;display:grid;grid-template-columns:clamp(104px,11vw,150px) minmax(0,1fr);align-items:center;gap:clamp(20px,2.6vw,36px);padding:clamp(20px,2.4vw,32px);overflow:hidden;border:1px solid var(--line);border-radius:28px;background:linear-gradient(180deg,#f5faff,#eef6ff);box-shadow:inset 0 1px 0 #fff,0 18px 45px rgba(28,80,142,.05);transition:transform .55s cubic-bezier(.22,1,.36,1),border-color .35s,box-shadow .55s}
.cert-card::after{content:"";position:absolute;width:180px;height:180px;right:-85px;bottom:-95px;border-radius:50%;background:radial-gradient(circle,rgba(10,111,214,.14),transparent 68%);opacity:0;transition:opacity .4s;pointer-events:none}
.cert-card:hover{transform:translateY(-6px);border-color:rgba(10,111,214,.24);box-shadow:inset 0 1px 0 #fff,0 28px 70px rgba(28,80,142,.12)}
.cert-card:hover::after{opacity:1}
.cert-frame{aspect-ratio:1;display:grid;place-items:center;padding:clamp(12px,1.8vw,22px);overflow:hidden;border:1px solid rgba(11,26,43,.08);border-radius:22px;background:#fff;box-shadow:0 12px 30px rgba(12,55,110,.07)}
.cert-frame img{width:100%;height:100%;object-fit:contain;transition:transform .55s cubic-bezier(.22,1,.36,1)}
.cert-card:hover .cert-frame img{transform:scale(1.055)}
.cert-type{margin:0 0 8px;color:var(--accent);font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.cert-card h3{margin:0 0 8px;font-size:clamp(1.3rem,1.9vw,1.875rem);line-height:1.05;letter-spacing:-.035em}
.cert-card div>p:last-child{margin:0;color:var(--ink-2);font-size:.94rem;line-height:1.55}
@media (max-width:980px){.cert-head{grid-template-columns:1fr;align-items:start}.cert-grid{grid-template-columns:1fr}}
@media (max-width:620px){.cert-card{grid-template-columns:88px minmax(0,1fr);gap:16px;padding:16px;border-radius:22px}.cert-frame{border-radius:16px;padding:9px}.cert-card h3{font-size:1.2rem}.cert-card div>p:last-child{font-size:.84rem}.cert-type{font-size:.6rem;letter-spacing:.12em}}
:root[data-theme="dark"]:not(.admin-theme) .cert-card{background:var(--tone)}

/* v8.1 Our clients, 3D coverflow carousel */
.clients-sec{position:relative;overflow:hidden;padding-block:clamp(80px,10vw,150px);margin-bottom:clamp(40px,5vw,80px);background:radial-gradient(circle at 12% 18%,rgba(10,111,214,.1),transparent 32%),linear-gradient(180deg,#eef6ff,#dcecfd)}
.clients-sec::before{content:"";position:absolute;width:min(60vw,780px);aspect-ratio:1;right:-23%;bottom:-38%;border-radius:50%;background:radial-gradient(circle,rgba(10,111,214,.12),transparent 66%);pointer-events:none}
.cl-layout{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);align-items:center;gap:clamp(28px,5vw,80px)}
.cl-head h2{font-size:clamp(2.6rem,5vw,5.75rem);line-height:.92;letter-spacing:-.055em;max-width:12ch}
.cl-intro{margin:clamp(20px,2.6vw,36px) 0 0;color:var(--ink-2);font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.7;max-width:42ch}
.cl-show{--bgc:#e4f0fe;position:relative;min-height:clamp(470px,44vw,600px);display:grid;grid-template-rows:1fr auto;overflow:hidden;color:#0b2b60;outline:none;isolation:isolate;border-radius:24px;min-width:0}
.cl-show:focus-visible{box-shadow:0 0 0 3px rgba(10,111,214,.3)}
.cl-viewport{position:relative;min-height:420px;display:grid;place-items:center;overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;perspective:1300px}
.cl-viewport.is-dragging{cursor:grabbing}
.cl-viewport::before,.cl-viewport::after{content:"";position:absolute;top:0;bottom:0;z-index:14;width:clamp(36px,9vw,140px);pointer-events:none}
.cl-viewport::before{left:0;background:linear-gradient(90deg,var(--bgc) 4%,rgba(228,240,254,.85) 38%,transparent)}
.cl-viewport::after{right:0;background:linear-gradient(-90deg,var(--bgc) 4%,rgba(228,240,254,.85) 38%,transparent)}
.cl-track{position:relative;width:100%;height:clamp(380px,40vw,500px);transform-style:preserve-3d}
.cl-slide{position:absolute;left:50%;top:50%;width:clamp(210px,21vw,290px);aspect-ratio:.77;display:grid;grid-template-rows:minmax(0,1fr) auto;overflow:hidden;border:1px solid rgba(255,255,255,.4);border-radius:clamp(22px,2.4vw,30px);color:#0b1630;background:var(--slide-bg,#fff);box-shadow:0 30px 70px rgba(18,60,120,.22),inset 0 1px 0 rgba(255,255,255,.7);transform:translate3d(-50%,-50%,0);will-change:transform,opacity,filter;transition:transform .46s cubic-bezier(.22,1,.36,1),opacity .38s,filter .38s,box-shadow .38s;pointer-events:none}
.cl-viewport.is-dragging .cl-slide{transition:none}
.cl-slide.is-active{pointer-events:auto;box-shadow:0 38px 90px rgba(18,60,120,.3),0 0 0 1px rgba(255,255,255,.5),0 0 58px color-mix(in srgb,var(--slide-accent) 24%,transparent)}
.cl-slide--dark{color:#fff}
.cl-visual{position:relative;min-height:0;display:grid;place-items:center;padding:clamp(20px,2.8vw,40px);overflow:hidden;background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--slide-accent) 13%,transparent),transparent 52%),var(--slide-bg,#fff)}
.cl-visual::after{content:"";position:absolute;inset:auto 11% 0;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--slide-accent) 52%,transparent),transparent)}
.cl-visual img{width:82%;height:82%;object-fit:contain;filter:drop-shadow(0 18px 22px rgba(0,0,0,.12));transform:scale(.96);transition:transform .46s cubic-bezier(.22,1,.36,1);pointer-events:none}
.cl-visual--wide img{width:95%;height:72%}
.cl-visual b{font-size:1.25rem;text-align:center}
.cl-slide.is-active .cl-visual img{transform:scale(1.03)}
.cl-meta{position:relative;z-index:3;min-height:88px;display:grid;align-content:center;gap:5px;padding:16px 20px 18px;background:color-mix(in srgb,var(--slide-bg) 92%,#fff 8%);border-top:1px solid color-mix(in srgb,var(--slide-accent) 18%,transparent)}
.cl-slide--dark .cl-meta{background:color-mix(in srgb,var(--slide-bg) 92%,#000 8%)}
.cl-meta span{color:color-mix(in srgb,var(--slide-accent) 74%,#55627b 26%);font-size:.6rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.cl-meta h3{margin:0;font-size:clamp(1rem,1.4vw,1.25rem);line-height:1.08;letter-spacing:-.035em;color:inherit}
.cl-foot{position:relative;z-index:20;display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;padding:0 clamp(16px,3vw,40px) clamp(10px,1.6vw,18px)}
.cl-controls{display:flex;align-items:center;justify-content:center;gap:12px;justify-self:center}
.cl-arrow{width:44px;height:44px;display:grid;place-items:center;padding:0;border:1px solid rgba(11,43,96,.16);border-radius:12px;color:rgba(11,43,96,.7);background:rgba(255,255,255,.6);cursor:pointer;transition:transform .22s,color .22s,border-color .22s,background .22s}
.cl-arrow:hover{transform:translateY(-1px);color:var(--accent);border-color:rgba(10,111,214,.35);background:#fff}
.cl-arrow svg{width:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cl-dots{display:flex;align-items:center;gap:6px;max-width:min(34vw,250px)}
.cl-dot{width:13px;height:3px;padding:0;border:0;border-radius:999px;background:rgba(11,43,96,.2);cursor:pointer;transition:width .35s cubic-bezier(.22,1,.36,1),background .3s;position:relative}
.cl-dot::before{content:"";position:absolute;inset:-12px -3px}
.cl-dot.is-active{width:25px;background:var(--red)}
.cl-counter{justify-self:end;display:flex;align-items:baseline;gap:5px;color:rgba(11,43,96,.45);font-size:.7rem;font-weight:700;letter-spacing:.14em}
.cl-counter strong{color:#0b2b60;font-size:.86rem;font-variant-numeric:tabular-nums}
@media (max-width:1100px){.cl-layout{grid-template-columns:1fr}.cl-head h2{max-width:16ch}}
@media (max-width:620px){.cl-show{min-height:490px}.cl-viewport{min-height:400px}.cl-track{height:400px}.cl-slide{width:min(64vw,245px);border-radius:22px}.cl-foot{padding-inline:12px}.cl-controls{justify-self:start;gap:8px}.cl-dots{max-width:40vw;gap:4px;overflow:hidden}.cl-dot{width:7px}.cl-dot.is-active{width:19px}}
@media (max-width:390px){.cl-dots{display:none}}
@media (prefers-reduced-motion:reduce){.cl-slide,.cl-visual img,.cl-arrow,.cl-dot{transition:none}}
:root[data-theme="dark"]:not(.admin-theme) .clients-sec{background:linear-gradient(180deg,#0c1622,#0b0c0f)}
:root[data-theme="dark"]:not(.admin-theme) .cl-show{--bgc:#0c131c}
/* v8.1 polish: certifications */
.cert-head{align-items:end}
.cert-sum,.cl-sum{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.cert-sum li,.cl-sum li{display:inline-flex;align-items:baseline;gap:6px;padding:8px 14px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--line),0 6px 16px rgba(10,111,214,.06);font-size:.8125rem;font-weight:600;color:var(--ink-2)}
.cert-sum b,.cl-sum b{color:var(--ink);font-weight:800}
.cert-feature{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:clamp(40px,6vw,72px)}
.cert-card--big{min-height:clamp(200px,18vw,250px);background:linear-gradient(135deg,#ffffff 0%,#eef6ff 60%,#e6f3ff 100%);box-shadow:inset 0 1px 0 #fff,0 24px 60px rgba(28,80,142,.09)}
.cert-card--big .cert-frame{box-shadow:0 16px 40px rgba(12,55,110,.1)}
.cert-badge{position:absolute;top:18px;right:18px;display:inline-flex;align-items:center;gap:6px;padding:6px 12px 6px 9px;border-radius:999px;background:#e8f8f1;color:#0d8a66;font-size:.75rem;font-weight:800;letter-spacing:.02em}
.cert-badge svg{width:15px;height:15px}
.cert-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:16px}
.cert-grid .cert-card{grid-template-columns:1fr;align-content:start;gap:16px;padding:20px;border-radius:24px}
.cert-grid .cert-frame{width:96px;border-radius:18px;padding:12px}
.cert-grid .cert-card h3{font-size:1.25rem}
.cert-grid .cert-card div>p:last-child{font-size:.875rem}
html.anim .cert-grid .cert-card.rise{transition-delay:var(--d,0ms)}
@media (max-width:1100px){.cert-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:980px){.cert-feature{grid-template-columns:1fr}}
@media (max-width:620px){.cert-grid{grid-template-columns:1fr}.cert-grid .cert-card{grid-template-columns:72px minmax(0,1fr);align-items:center;padding:14px}.cert-grid .cert-frame{width:72px;padding:8px;border-radius:14px}.cert-badge{top:12px;right:12px;font-size:.68rem}.cert-card--big{padding-top:44px}}
/* v8.1 polish: clients */
.cl-viewport::before,.cl-viewport::after{display:none}
.cl-viewport{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
.cl-show{background:none;border-radius:0}
.cl-cta{margin-top:28px}
.cl-sum li{background:rgba(255,255,255,.75)}
.cl-slide{box-shadow:0 26px 60px rgba(18,60,120,.18),inset 0 1px 0 rgba(255,255,255,.7)}
.cl-foot{padding-top:6px}
:root[data-theme="dark"]:not(.admin-theme) .cert-card--big{background:var(--tone)}
:root[data-theme="dark"]:not(.admin-theme) .cert-sum li,:root[data-theme="dark"]:not(.admin-theme) .cl-sum li{background:var(--tone)}

/* =====================================================================
   v9.0 APPLE GLASS, Apple DESIGN.md tokens (parchment #f5f5f7, ink
   #1d1d1f, single Action Blue #0066cc, SF Pro/system stack, weight 600
   headlines with tight tracking, 17px body, 18px cards, pill CTAs with a
   0.95 press) rendered as frosted glass (saturate(180%) blur(20px)) over a
   soft ION-blue light field. Public site only; the dashboard is untouched.
   ===================================================================== */
:root:not(.admin-theme){
 --ground:#f5f5f7;--tone:#f5f5f7;--tone-2:#e8e8ed;--ink:#1d1d1f;--ink-2:#6e6e73;--field-ink:#1d1d1f;
 --accent:#0066cc;--accent-press:#0058b0;--link:#0066cc;--on-accent:#fff;--line:rgba(0,0,0,.08);--glow:rgba(0,102,204,.18);
 --glass:rgba(255,255,255,.58);--glass-strong:rgba(255,255,255,.74);--glass-edge:rgba(255,255,255,.7);--glass-line:rgba(0,0,0,.06);
 --glass-blur:saturate(180%) blur(20px);--glass-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 8px 32px rgba(15,40,80,.08);
 --r-card:18px;--r-panel:28px;
 --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Inter","Noto Sans Bengali",system-ui,sans-serif;
 --deep:#1d1d1f;--on-deep:#f5f5f7;--on-deep-2:#a1a1a6;
}
:root[data-theme="dark"]:not(.admin-theme){
 --ground:#000;--tone:#1c1c1e;--tone-2:#2c2c2e;--ink:#f5f5f7;--ink-2:#a1a1a6;--accent:#2997ff;--link:#2997ff;--line:rgba(255,255,255,.1);
 --glass:rgba(28,28,30,.55);--glass-strong:rgba(28,28,30,.72);--glass-edge:rgba(255,255,255,.12);--glass-line:rgba(255,255,255,.08);
 --glass-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 8px 32px rgba(0,0,0,.4);--deep:#1c1c1e;
}
:root:not(.admin-theme) body{background:var(--ground);font-family:var(--font);font-size:1.0625rem;letter-spacing:-.022em;line-height:1.47}
/* the light field the glass floats over */
:root:not(.admin-theme) body::before{content:"";position:fixed;inset:-10vmax;z-index:-1;pointer-events:none;
 background:radial-gradient(40vmax 36vmax at 10% 12%,rgba(64,156,255,.34),transparent 70%),radial-gradient(36vmax 32vmax at 92% 28%,rgba(90,200,250,.32),transparent 70%),radial-gradient(42vmax 36vmax at 62% 88%,rgba(52,199,169,.22),transparent 70%),radial-gradient(28vmax 26vmax at 22% 72%,rgba(255,105,120,.12),transparent 70%),radial-gradient(30vmax 26vmax at 50% 50%,rgba(120,170,255,.16),transparent 70%),#eef1f6}
:root[data-theme="dark"]:not(.admin-theme) body::before{background:radial-gradient(38vmax 34vmax at 12% 8%,rgba(10,132,255,.22),transparent 70%),radial-gradient(34vmax 30vmax at 92% 22%,rgba(100,210,255,.14),transparent 70%),radial-gradient(40vmax 36vmax at 70% 92%,rgba(48,209,88,.08),transparent 70%),#000}
html.anim:not(.admin-theme) body::before{animation:field-drift 28s ease-in-out infinite alternate}
@keyframes field-drift{to{transform:translate3d(2vmax,-2vmax,0) scale(1.04)}}
@media (prefers-reduced-motion:reduce){html:not(.admin-theme) body::before{animation:none}}
/* type: Apple weight 600, tight */
:root:not(.admin-theme) h1,:root:not(.admin-theme) h2{font-weight:600;letter-spacing:-.035em}
:root:not(.admin-theme) h3{font-weight:600;letter-spacing:-.02em}
.hl-title{font-weight:600;letter-spacing:-.045em;line-height:1.02}
/* glass surfaces */
:root:not(.admin-theme) :is(.why-card,.cert-card,.t2-grid,.t2-stats div,.insight,.size-card,.specimen,.steps li,.faq-item,.doc,.panel,.summary-card,.cart-line,.empty,.detail-facts div,.facts div,.account-links a,.cp-bio,.ordering,.chips a,.cert-sum li,.cl-sum li,.hl-chip,.hl-eyebrow,.insight-tag,.team-card,.person,.contact-side,.ft-card,.foot-news){
 background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow)}
:root:not(.admin-theme) :is(.why-card,.cert-card,.insight,.size-card,.steps li,.doc,.panel,.summary-card,.team-card){border-radius:var(--r-card)}
:root:not(.admin-theme) :is(.t2-grid,.ft-card,.cert-card--big){border-radius:var(--r-panel)}
:root:not(.admin-theme) .cert-card--big{background:var(--glass-strong)}
:root:not(.admin-theme) .cert-frame{background:#fff;border-color:rgba(0,0,0,.05);box-shadow:none}
:root:not(.admin-theme) .t2-stats .good{background:rgba(52,199,169,.16)}
:root:not(.admin-theme) .specimen:nth-child(odd){background:var(--glass)}
/* nav + top bar: frosted like Apple's sub-nav */
:root:not(.admin-theme) .topbar{background:rgba(255,255,255,.42);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-bottom:1px solid var(--glass-line)}
:root[data-theme="dark"]:not(.admin-theme) .topbar{background:rgba(28,28,30,.45)}
:root:not(.admin-theme) .nav-inner{background:var(--glass-strong);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:inset 0 0 0 1px var(--glass-edge),0 10px 30px rgba(15,40,80,.08)}
:root:not(.admin-theme) .desktop-links a{font-size:.875rem;font-weight:400;letter-spacing:-.016em}
:root:not(.admin-theme) .bag-link{background:#1d1d1f;color:#fff;border-radius:999px}
/* buttons: Action Blue pills, glass secondary, 0.95 press */
:root:not(.admin-theme) .btn{font-weight:400;font-size:1.0625rem;letter-spacing:-.022em;transition:background-color .2s,transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s}
:root:not(.admin-theme) .btn:active{transform:scale(.95)}
:root:not(.admin-theme) .btn:focus-visible{outline:2px solid #0071e3;outline-offset:3px}
:root:not(.admin-theme) .btn-primary{background:var(--accent);color:#fff;box-shadow:none}
:root:not(.admin-theme) .btn-primary:hover{background:#0071e3}
:root:not(.admin-theme) :is(.btn-quiet,.btn-ghost,.btn-line){background:var(--glass-strong);color:var(--accent);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:inset 0 0 0 1px var(--glass-edge)}
:root:not(.admin-theme) .btn-large{font-size:1.125rem;font-weight:400;min-height:52px;padding:14px 28px}
:root:not(.admin-theme) .text-link{color:var(--accent);font-weight:400}
/* hero sits on the field */
:root:not(.admin-theme) .hero-light,:root[data-theme="dark"]:not(.admin-theme) .hero-light{background:transparent}
:root:not(.admin-theme) .hl-photo img{box-shadow:rgba(0,0,0,.22) 3px 5px 30px 0}
:root:not(.admin-theme) .hl-chip{border-radius:var(--r-card)}
:root:not(.admin-theme) .hl-facts b{font-weight:600}
/* band: glass strip */
:root:not(.admin-theme) .band{--b-bg:transparent;--b-ink:#1d1d1f;background:rgba(255,255,255,.4);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-block:1px solid var(--glass-line)}
:root:not(.admin-theme) .band-track{font-weight:600;font-family:var(--font);letter-spacing:-.035em}
:root[data-theme="dark"]:not(.admin-theme) .band{--b-ink:#f5f5f7;background:rgba(28,28,30,.4)}
/* water-test dots */
:root:not(.admin-theme) .t2-grid i{background:rgba(0,0,0,.12)}
html.anim:not(.admin-theme) .t2-grid.in i:not(.g){background:rgba(0,0,0,.1)}
:root:not(.admin-theme) .t2-grid i.g{background:#30c48d}
:root:not(.admin-theme) .t2-kicker,:root:not(.admin-theme) .cert-type,:root:not(.admin-theme) .why-n{color:var(--accent)}
/* Apple dark tiles: planner + closer, as dark glass */
:root:not(.admin-theme) :is(.planner,.closer){background:rgba(29,29,31,.86);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);color:#f5f5f7;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 30px 80px rgba(0,0,0,.18)}
:root:not(.admin-theme) :is(.planner,.closer) h2{color:#f5f5f7}
:root:not(.admin-theme) :is(.closer,.planner) .btn-primary{background:var(--accent);color:#fff}
:root:not(.admin-theme) :is(.closer,.planner) .btn-primary:hover{background:#0071e3}
:root:not(.admin-theme) .closer .btn-ghost{background:rgba(255,255,255,.1);color:#2997ff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
/* clients + fund on the field */
:root:not(.admin-theme) .clients-sec{background:transparent}
:root:not(.admin-theme) .clients-sec::before{display:none}
:root:not(.admin-theme) .cl-dot.is-active{background:var(--accent)}
:root:not(.admin-theme) .cl-arrow{background:var(--glass-strong);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-color:var(--glass-edge);border-radius:999px;color:var(--ink)}
:root:not(.admin-theme) .cl-counter strong{color:var(--ink)}
:root:not(.admin-theme) .ft-card{background:var(--glass-strong)}
/* footer: Apple near-black glass tile (layout unchanged) */
:root:not(.admin-theme) .foot-wave path{fill:rgba(29,29,31,.92)}
:root:not(.admin-theme) .foot-body{background:rgba(29,29,31,.92);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
:root:not(.admin-theme) .foot-body::before{background:radial-gradient(50% 40% at 80% 0%,rgba(41,151,255,.14),transparent 70%)}
:root:not(.admin-theme) .foot-news{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);box-shadow:none}
:root:not(.admin-theme) .foot-word span:first-child{color:rgba(41,151,255,.55)}
:root:not(.admin-theme) .foot-cols a{color:#d2d2d7}
/* inputs: Apple pill search / soft fields */
:root:not(.admin-theme) :is(input[type=text],input[type=email],input[type=search],input[type=tel],input[type=password],select,textarea){border-radius:12px;background:var(--glass-strong);border:1px solid var(--line)}
:root:not(.admin-theme) input[type=search]{border-radius:999px}
/* WhatsApp float keeps its brand green, glass edge */
.wa-float{box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 12px 30px rgba(31,168,85,.3)}
/* browsers without backdrop-filter: solid fallbacks */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 :root:not(.admin-theme){--glass:rgba(255,255,255,.92);--glass-strong:#fff}
 :root[data-theme="dark"]:not(.admin-theme){--glass:#1c1c1e;--glass-strong:#2c2c2e}
}
:root:not(.admin-theme) .foot-news p,:root:not(.admin-theme) .foot-brand>p{color:#a1a1a6}
:root:not(.admin-theme) .foot-news input{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#f5f5f7}
/* v9.0.1 newsletter card in the dark footer: dark glass, readable text.
   (The shared glass rule's :is() carries extra specificity, so this is scoped through .footer.) */
:root:not(.admin-theme) .footer .foot-news{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
:root:not(.admin-theme) .footer .foot-news h2{color:#f5f5f7}
:root:not(.admin-theme) .footer .foot-news p{color:#c7c7cc}
:root:not(.admin-theme) .footer .foot-news input[type=email]{background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.18);color:#f5f5f7;border-radius:999px}
:root:not(.admin-theme) .footer .foot-news input[type=email]::placeholder{color:#8e8e93;opacity:1}
:root:not(.admin-theme) .footer .foot-news input[type=email]:focus{outline:2px solid #0071e3;outline-offset:2px;border-color:transparent}

/* v9.1 the client's bottle cutout (650 mL, transparent) */
.hl-photo{display:grid;place-items:center;aspect-ratio:4/5;max-height:620px;border-radius:32px;background:radial-gradient(60% 55% at 50% 45%,rgba(255,255,255,.9),rgba(255,255,255,.35) 70%),linear-gradient(160deg,rgba(64,156,255,.22),rgba(90,200,250,.14) 55%,rgba(52,199,169,.14));-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.75),0 30px 80px rgba(15,40,80,.12);overflow:visible}
.hl-photo .hl-bottle{width:auto;height:min(86%,500px);max-width:none;object-fit:contain;border-radius:0;box-shadow:none;filter:drop-shadow(3px 22px 26px rgba(0,40,90,.22));position:relative;z-index:1}
:root:not(.admin-theme) .hl-photo img.hl-bottle{box-shadow:none}
.hl-ring{position:absolute;left:50%;top:50%;width:62%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(41,151,255,.18),transparent 66%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
html.anim .hl-bottle{animation:bottle-float 6.5s ease-in-out infinite}
@keyframes bottle-float{50%{transform:translateY(-12px) rotate(-1.2deg)}}
@media (prefers-reduced-motion:reduce){.hl-bottle{animation:none!important}}
:root[data-theme="dark"]:not(.admin-theme) .hl-photo{background:radial-gradient(60% 55% at 50% 45%,rgba(255,255,255,.14),rgba(255,255,255,.04) 70%),linear-gradient(160deg,rgba(10,132,255,.2),rgba(100,210,255,.08))}
.size-photo img[src*="ion-bottle"]{mix-blend-mode:normal;object-position:50% 50%;padding:6% 0;filter:drop-shadow(2px 12px 14px rgba(0,40,90,.18))}
.family-photo.fit-contain-bottle{background:radial-gradient(60% 60% at 50% 45%,#fff,rgba(230,242,255,.6))}
.family-photo.fit-contain-bottle img{object-fit:contain;padding:6% 0;filter:drop-shadow(3px 16px 20px rgba(0,40,90,.2))}
.family:hover .family-photo.fit-contain-bottle img{transform:translateY(-6px)}
:is(.product-image,.detail-gallery,.cart-line) img[src*="ion-bottle"]{mix-blend-mode:normal;padding:8% 0;filter:drop-shadow(2px 14px 16px rgba(0,40,90,.18))}
:root:not(.admin-theme) .product-image,:root:not(.admin-theme) .detail-gallery{background:radial-gradient(60% 60% at 50% 45%,#fff,rgba(225,238,252,.7))}
/* v9.1 fix: an old hero rule for ".chips" (absolute overlay) was also hitting the shop's filter chips */
fieldset.chips{position:static;inset:auto;pointer-events:auto;display:flex;flex-wrap:wrap;gap:8px;border:0;margin:0;padding:0;min-width:0}
fieldset.chips legend{width:100%;padding:0;margin-bottom:10px;font-size:var(--t-small);font-weight:600}
:root:not(.admin-theme) .chips a[aria-current="true"]{background:#1d1d1f;color:#fff;border-color:#1d1d1f}
:root[data-theme="dark"]:not(.admin-theme) .chips a[aria-current="true"]{background:#f5f5f7;color:#1d1d1f}
/* v9.1 centred hero, no product picture */
.hl-grid.hl-center{grid-template-columns:1fr;justify-items:center;text-align:center}
.hl-center .hl-copy{display:grid;justify-items:center;max-width:980px}
.hl-center .hl-title{max-width:16ch;font-size:clamp(3rem,7.4vw,7.25rem);margin-inline:auto}
.hl-center .hl-sub{max-width:44ch;margin-inline:auto}
.hl-center .hl-cta,.hl-center .hl-facts{justify-content:center}
.hl-center .hl-facts li{justify-items:center}
.hero-light{padding-bottom:clamp(56px,7vw,110px)}
@media (min-width:901px){.hero-light{min-height:min(86svh,860px);display:grid;align-items:center}}
@media (max-width:560px){.hl-center .hl-cta{flex-direction:column;align-items:stretch;width:100%}.hl-center .hl-cta .btn{width:100%}}
/* v9.1 bag button: icon + count badge on phones (no heavy black ring) */
.bag-ico{display:none;width:22px;height:22px}
.bag-word{font-weight:inherit}
@media (max-width:700px){
 :root .bag-link,:root:not(.admin-theme) .bag-link{position:relative;width:44px;height:44px;min-height:44px;padding:0;margin-left:2px;gap:0;justify-content:center;border-radius:50%;font-size:0;background:transparent;color:var(--ink);box-shadow:none}
 .bag-link .bag-ico{display:block}
 .bag-link .bag-word{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
 .bag-link span{position:absolute;top:3px;right:1px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--accent);color:#fff;font-size:.6875rem;font-weight:700;line-height:18px;box-shadow:0 0 0 2px var(--glass-strong,#fff)}
 :root .bag-link:hover{background:rgba(0,0,0,.05)}
}
@media (max-width:900px){.hero-light{padding-top:calc(82px + 44px)}}
/* v9.1.1 jar planner: number no longer overlaps its label; calmer glass layout */
.planner .bubbles{display:none}
:root:not(.admin-theme) .planner-grid{align-items:stretch}
:root:not(.admin-theme) .planner-result{align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding:clamp(24px,3vw,40px);border-radius:24px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
:root:not(.admin-theme) .jars{display:flex;flex-direction:column;gap:6px}
:root:not(.admin-theme) .jars #jarCount{display:block;font-size:clamp(5.5rem,11vw,10rem);font-weight:600;letter-spacing:-.05em;line-height:1;color:#f5f5f7;-webkit-text-fill-color:currentColor}
:root:not(.admin-theme) .jars-unit{display:block;margin-top:0;font-size:clamp(1.375rem,2vw,1.875rem);font-weight:600;color:#f5f5f7}
:root:not(.admin-theme) .jars-detail{color:#a1a1a6;margin:14px 0 24px}
:root:not(.admin-theme) .jars-detail strong{color:#f5f5f7}
:root:not(.admin-theme) .planner-add .btn{align-self:flex-start}
:root:not(.admin-theme) .planner .step{background:rgba(255,255,255,.1);color:#f5f5f7}
:root:not(.admin-theme) .planner .step:hover{background:rgba(255,255,255,.18)}
:root:not(.admin-theme) .use label{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);color:#f5f5f7}
:root:not(.admin-theme) .use label:has(input:checked){background:#f5f5f7;color:#1d1d1f;box-shadow:none}
:root:not(.admin-theme) .use input{accent-color:#0066cc}
@media (max-width:900px){:root:not(.admin-theme) .planner-result{padding:22px}}

/* v9.2 "A water for every need" — specimen-catalogue switcher.
   One family at a time on its own flat colour; tone steps, no lines, no shadows, no glass. */
.range{padding-block:clamp(88px,10vw,168px)}
.rg-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:24px clamp(32px,6vw,96px);align-items:end;margin-bottom:clamp(32px,4vw,56px)}
.rg-head h2{font-size:clamp(2.75rem,6vw,5.75rem);line-height:.95;letter-spacing:-.045em;max-width:12ch;margin:0}
.rg-head p{margin:0;color:var(--ink-2);font-size:clamp(1.0625rem,1.3vw,1.25rem);max-width:40ch}
.rg-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.rg-tab{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 18px 0 20px;border-radius:999px;background:rgba(0,0,0,.05);color:var(--ink);font-size:1.0625rem;font-weight:500;text-decoration:none!important;transition:background-color .25s,color .25s,transform .2s}
.rg-tab span{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:var(--fam);color:#1d1d1f;font-size:.8125rem;font-weight:600;font-variant-numeric:tabular-nums}
.rg-tab:hover{background:rgba(0,0,0,.09)}
.rg-tab:active{transform:scale(.96)}
.rg-tab[aria-selected="true"]{background:#1d1d1f;color:#fff}
.rg-tab:focus-visible{outline:2px solid #0071e3;outline-offset:3px}
.rg-panel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-height:clamp(460px,40vw,580px);border-radius:28px;background:var(--fam);color:#1d1d1f;overflow:hidden;margin-bottom:16px}
html.js .rg-panel:not(.is-on){display:none}
html.js .rg-panel{margin-bottom:0}
.rg-visual{margin:0;position:relative;display:grid;place-items:center;min-height:320px}
.rg-visual img{display:block}
.rg-cut .rg-visual img{height:min(84%,460px);width:auto;max-width:70%;object-fit:contain}
.rg-jar .rg-visual img{width:82%;height:auto;max-height:80%;object-fit:contain;mix-blend-mode:multiply}
.rg-photo .rg-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rg-body{display:flex;flex-direction:column;justify-content:center;gap:0;padding:clamp(28px,4vw,64px) clamp(24px,4vw,64px) clamp(28px,4vw,64px) clamp(8px,2vw,32px)}
.rg-photo .rg-body{padding-left:clamp(24px,4vw,64px)}
.rg-body h3{font-size:clamp(2.25rem,4vw,3.75rem);line-height:1;letter-spacing:-.04em;margin:0 0 12px;color:#1d1d1f}
.rg-body>p{margin:0 0 28px;color:#3a3a3f;font-size:1.0625rem;max-width:46ch}
.rg-sizes{display:grid;gap:8px;margin:0 0 24px;padding:0;list-style:none}
.rg-sizes li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:16px;min-height:76px;padding:10px 10px 10px 22px;border-radius:18px;background:rgba(255,255,255,.62);transition:background-color .2s}
.rg-sizes li:hover{background:rgba(255,255,255,.85)}
.rg-size{display:grid;gap:2px;color:#1d1d1f;text-decoration:none!important;min-width:0}
.rg-size b{font-size:clamp(1.375rem,2vw,1.75rem);font-weight:600;letter-spacing:-.03em;line-height:1.05}
.rg-size span{font-size:.9375rem;color:#55555b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rg-price{display:grid;justify-items:end;line-height:1.15}
.rg-price strong{font-size:1.125rem;font-weight:600;font-variant-numeric:tabular-nums}
.rg-price small{font-size:.8125rem;color:#55555b;font-variant-numeric:tabular-nums}
.rg-sizes .inline-cart .btn{min-height:44px;padding:0 20px;border-radius:999px;background:#0066cc;color:#fff;font-size:1rem}
.rg-sizes .inline-cart .btn:hover{background:#0071e3}
.rg-sizes .inline-cart .btn[disabled]{background:rgba(0,0,0,.08);color:#6e6e73}
.rg-body .text-link{align-self:flex-start;color:#0058b0}
/* switching: picture rises, rows follow */
html.anim .rg-panel.is-on .rg-visual img{animation:rg-in .7s cubic-bezier(.22,1,.36,1) both}
html.anim .rg-panel.is-on .rg-body>*{animation:rg-in .6s cubic-bezier(.22,1,.36,1) both}
html.anim .rg-panel.is-on .rg-body>h3{animation-delay:60ms}html.anim .rg-panel.is-on .rg-body>p{animation-delay:120ms}
html.anim .rg-panel.is-on .rg-sizes{animation-delay:180ms}html.anim .rg-panel.is-on .rg-body>.text-link{animation-delay:240ms}
@keyframes rg-in{from{opacity:0;transform:translateY(24px)}}
@media (prefers-reduced-motion:reduce){html.anim .rg-panel.is-on *{animation:none!important}}
:root[data-theme="dark"]:not(.admin-theme) .rg-tab{background:rgba(255,255,255,.08);color:#f5f5f7}
:root[data-theme="dark"]:not(.admin-theme) .rg-tab[aria-selected="true"]{background:#f5f5f7;color:#1d1d1f}
@media (max-width:900px){
 .rg-head{grid-template-columns:1fr}
 .rg-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scroll-snap-type:x proximity}
 .rg-tabs::-webkit-scrollbar{display:none}
 .rg-tab{flex:none;scroll-snap-align:start}
 .rg-panel{grid-template-columns:1fr;min-height:0;border-radius:24px}
 .rg-visual{min-height:260px;height:62vw;max-height:340px}
 .rg-cut .rg-visual img{height:86%}
 .rg-body{padding:24px 16px 24px}
 .rg-photo .rg-body{padding-left:16px}
 .rg-sizes li{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"s b" "p b";row-gap:2px;padding:12px 10px 12px 16px}
 .rg-size{grid-area:s}.rg-price{grid-area:p;justify-items:start}.rg-sizes .inline-cart{grid-area:b}
}
.rg-panel{min-height:clamp(520px,44vw,600px)}
.rg-cut .rg-visual img{height:clamp(300px,32vw,460px);max-height:none}
@media (max-width:900px){.rg-panel{min-height:0}.rg-visual{height:auto;min-height:0;max-height:none;padding:28px 0 4px}.rg-cut .rg-visual img{height:230px}.rg-jar .rg-visual img{width:72%;max-height:none}.rg-photo .rg-visual{height:240px;padding:0}}
.rg-panel{min-height:clamp(560px,46vw,660px)}
@media (max-width:900px){
 .rg-panel{min-height:0}
 .rg-cut .rg-visual img{height:200px}
 .rg-photo .rg-visual{height:200px}
 .rg-body h3{font-size:2rem;margin-bottom:8px}
 .rg-body>p{font-size:1rem;margin-bottom:20px}
 .rg-sizes li{min-height:0;padding:12px 10px 12px 16px;border-radius:16px}
 .rg-size b{font-size:1.25rem}
 .rg-price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
 .rg-price strong{font-size:1rem}
 .rg-price small::before{content:"· "}
 .rg-sizes .inline-cart .btn{min-height:44px;padding:0 18px}
 .rg-tab{min-height:44px;padding:0 14px 0 16px;font-size:1rem}
}
@media (max-width:900px){.rg-jar .rg-visual img{width:58%}.rg-tabs{scroll-padding-inline:var(--gutter)}}
/* v9.2.1 scroll progress = the dock's outline, drawn clockwise from the left end */
.nav-inner{position:relative}
.dock-ring{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:2}
.dock-ring path{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;opacity:0;transition:opacity .3s}
.dock-ring.on path{opacity:1}
:root[data-theme="dark"] .dock-ring path{stroke:#2997ff}
/* v9.2.2 footer: wave and body are one solid colour, so no seam shows where they meet */
:root:not(.admin-theme) .foot-wave{display:block;margin-bottom:-2px}
:root:not(.admin-theme) .foot-wave path{fill:#1d1d1f}
:root:not(.admin-theme) .foot-body{background:#1d1d1f;-webkit-backdrop-filter:none;backdrop-filter:none}
:root:not(.admin-theme) .foot-body::before{display:none}
:root[data-theme="dark"]:not(.admin-theme) .foot-wave path,:root[data-theme="dark"]:not(.admin-theme) .foot-body{fill:#1c1c1e;background:#1c1c1e}
:root[data-theme="dark"]:not(.admin-theme) .foot-wave path{fill:#1c1c1e}
/* close the sub-pixel gap between the wave and the footer body at odd phone widths */
:root:not(.admin-theme) .foot-body{box-shadow:0 -3px 0 #1d1d1f}
:root[data-theme="dark"]:not(.admin-theme) .foot-body{box-shadow:0 -3px 0 #1c1c1e}
/* v9.2.2 hero headline: bold, always two lines (split after the comma) */
:root:not(.admin-theme) .hl-center .hl-title{font-weight:800;letter-spacing:-.05em;line-height:.98;max-width:none;font-size:clamp(2rem,10vw,7.25rem)}
.hl-title>span{display:block;white-space:nowrap}

/* v9.2.4 alignment pass: every section head uses the same two-column grid
   (heading left, intro right, bottoms aligned), and card text gets its own inset. */
.rg-head,.cert-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px 64px;align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.rg-head p,.cert-head p.cert-intro,.cert-head>div:last-child{max-width:none;margin:0}
.cert-head>div:last-child .cert-intro{margin:0}
.rg-head p,.cert-intro,.sec-head p{font-size:clamp(1.0625rem,1.3vw,1.25rem);line-height:1.55;color:var(--ink-2);text-wrap:pretty}
.cert-head h2,.rg-head h2{max-width:13ch}
.sec-head h2{margin:0}
@media (max-width:900px){.rg-head,.cert-head{grid-template-columns:1fr;gap:16px}}
/* person / team cards: picture runs edge to edge, the text sits inside the card */
:root:not(.admin-theme) :is(.person,.team-card){overflow:hidden;padding:0 0 18px;text-decoration:none}
:root:not(.admin-theme) :is(.person,.team-card) img{display:block;margin:0 0 14px;border-radius:0}
:root:not(.admin-theme) :is(.person b,.person span,.team-card h2,.team-card h3,.team-card p){padding-inline:18px}
@media (max-width:560px){:root:not(.admin-theme) :is(.person b,.person span,.team-card h2,.team-card h3,.team-card p){padding-inline:12px}}
/* lists of numbers line up */
.rg-price,.size-price,.price,.t2-stats dd,.hl-facts b{font-variant-numeric:tabular-nums}
:root:not(.admin-theme) :is(.person,.team-card){border-radius:18px}

/* 9.2.6 Bengali video corrections */
@media(max-width:900px){
 .band{padding-block:10px}
 .band-track{font-size:1rem;line-height:1.2;letter-spacing:-.015em}
 .band-group span::after{width:.22em;height:.22em;margin-inline:.7em}
}
.source-key{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none}
.source-key--alkaline{background:var(--mint)}
.source-key--selected{background:#b98209;margin-left:12px}
.cert-all{margin-top:24px}
.page-certifications .certs{padding-top:0}
.page-certifications .cert-grid{margin-bottom:32px}
/* Written brief: real plant hero, one selector, accessible cards and checkout. */
.hero-light{background:#091b2c!important;color:#fff}
.hero-facility{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero-facility img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}

.hero-light .hl-grid{position:relative;z-index:1}
.hero-light .hl-title,.hero-light .hl-facts b{color:#fff}
.hero-light .hl-sub,.hero-light .hl-facts span{color:#f2f6fa}
.hero-light .hl-eyebrow{color:#fff;background:rgba(4,16,28,.65);border-color:rgba(255,255,255,.5)}
.hero-light .btn-primary{background:#0058ad;color:#fff}
.hero-light .btn-quiet{background:rgba(4,16,28,.6);color:#fff;border:1px solid rgba(255,255,255,.7)}
.hero-light .btn:hover{filter:brightness(1.1)}
.hero-light .hl-facts{border-color:rgba(255,255,255,.35)}
.why-card{padding:0!important;overflow:hidden;transition:transform .2s,box-shadow .2s}
.why-card-link{display:flex;flex-direction:column;height:100%;padding:clamp(22px,3vw,36px);color:inherit;text-decoration:none}
.why-card-link p{flex:1}
.why-read{display:inline-flex;align-items:center;gap:8px;color:var(--link);font-weight:600;margin-top:20px}
.why-read svg{width:18px;height:18px}
.why-card:focus-within{outline:3px solid var(--accent);outline-offset:4px}
@media(hover:hover){.why-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,42,80,.12)}}
.why-card:active{transform:scale(.985)}
.test200{row-gap:24px}
#checkoutForm input{font-size:16px;min-height:48px;scroll-margin-block:100px}
#checkoutForm .field-error{display:block;min-height:0;font-size:.875rem;color:#a91b24;margin-top:4px}
#checkoutForm .field-error:empty{display:none}
#checkoutForm [aria-invalid=true]{border:2px solid #a91b24}
:root[data-theme=dark] #checkoutForm .field-error{color:#ffabb2}
#checkoutForm button[type=submit]{min-height:52px;scroll-margin-bottom:32px}
.cl-arrow,.cl-dot,.cl-dot.is-active{min-width:44px;min-height:44px}
.cl-dot,.cl-dot.is-active{width:44px;height:44px;flex:0 0 44px;background:transparent!important;position:relative}
.cl-dot::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--ink-2);left:50%;top:50%;transform:translate(-50%,-50%)}
.cl-dot.is-active::after{width:19px;background:var(--accent)}
.cl-dots{overflow-x:auto;scrollbar-width:none}
a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
@media(max-width:600px){.hero-facility img{object-position:58% 50%}.hero-light .hl-title{font-size:clamp(30px,8vw,44px)}}
@media(prefers-reduced-motion:reduce){.why-card{transition:none}.why-card:hover,.why-card:active{transform:none}}

/* 9.2.7: research flow and bounded carousel pagination. */
.research-photo{position:relative;top:auto;align-self:start;margin:0}
.research-photo img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.research-copy{min-width:0}
.cl-foot{grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:12px 0 8px}
.cl-controls{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:10px;width:100%;min-width:0;justify-self:stretch}
.cl-controls .cl-arrow{width:44px;height:44px;min-width:44px;min-height:44px;justify-self:center}
.cl-dots{display:flex;justify-content:center;gap:6px;width:100%;max-width:none;min-width:0;overflow:hidden}
.cl-dot,.cl-dot.is-active{width:44px;height:44px;min-width:44px;min-height:44px;flex:0 0 44px}
.cl-dot[hidden]{display:none}
.cl-dot::before{content:none}
.cl-counter{white-space:nowrap}
@media(max-width:900px){
 .research{row-gap:24px}
 .research-photo{grid-column:1;position:relative;top:auto;aspect-ratio:16/10}
 .research-copy{grid-column:1}
}
@media(max-width:620px){
 .clients-sec{padding-block:40px 24px;margin-bottom:24px}
 .cl-show{min-height:0;grid-template-rows:auto auto}
 .cl-viewport{min-height:0;height:clamp(300px,100vw,380px)}
 .cl-track{height:100%}
 .cl-foot{grid-template-columns:minmax(0,1fr);gap:4px;padding:8px 0 0}
 .cl-counter{justify-self:center;min-height:24px;align-items:center}
}

/* 9.2.8: loading placeholders follow actual page/image readiness. */
#ionPageSkeleton{display:none;position:fixed;inset:var(--ion-skeleton-top,104px) 0 0;z-index:60;background:var(--ground);overflow:auto;overscroll-behavior:contain;padding:28px 0 max(32px,env(safe-area-inset-bottom))}
html.ion-boot-loading #ionPageSkeleton,html.ion-page-loading #ionPageSkeleton{display:block}
html.ion-boot-loading #main,html.ion-page-loading #main,html.ion-boot-loading .footer,html.ion-page-loading .footer{visibility:hidden}
.ion-skeleton-layout{display:grid;gap:18px;max-width:1120px}
.ion-skeleton-line,.ion-skeleton-media,img.ion-image-loading{background-color:var(--tone-2);background-image:linear-gradient(100deg,transparent 25%,color-mix(in srgb,var(--ground) 65%,transparent) 48%,transparent 70%);background-size:220% 100%;animation:ion-skeleton-shimmer 1.5s linear infinite}
.ion-skeleton-line{height:14px;border-radius:8px;width:100%}
.ion-skeleton-line--title{height:38px;max-width:540px;margin-bottom:4px}
.ion-skeleton-line--intro{max-width:720px}
.ion-skeleton-line--short{width:65%}
.ion-skeleton-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:20px}
.ion-skeleton-card{display:grid;align-content:start;gap:14px;min-width:0}
.ion-skeleton-media{aspect-ratio:4/3;border-radius:20px;margin-bottom:4px}
img.ion-image-loading{color:transparent}
@keyframes ion-skeleton-shimmer{from{background-position:140% 0}to{background-position:-80% 0}}
@media(max-width:620px){#ionPageSkeleton{padding-top:24px}.ion-skeleton-cards{grid-template-columns:1fr;gap:28px}.ion-skeleton-line--title{height:32px;width:90%}.ion-skeleton-media{aspect-ratio:16/10}}
@media(prefers-reduced-motion:reduce){.ion-skeleton-line,.ion-skeleton-media,img.ion-image-loading{animation:none}}

/* 9.2.9: supplied hero film, with a still-frame fallback. */
.hero-background-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;opacity:0;transition:opacity .35s ease;pointer-events:none}
.hero-background-video.is-playing{opacity:1}

.hero-video-toggle{position:absolute;right:20px;bottom:12px;z-index:3;min-height:44px;padding:8px 16px;border:1px solid rgba(255,255,255,.7);border-radius:999px;background:rgba(3,13,24,.8);color:#fff;font:600 .8125rem/1.3 var(--font);cursor:pointer}
.hero-video-toggle[hidden]{display:none}
.hero-video-toggle:hover{background:#03101c}
.hero-video-toggle:focus-visible{outline:3px solid #fff;outline-offset:3px}
.hero-light{padding-bottom:clamp(76px,7vw,116px)}
@media(max-width:600px){.hero-facility img,.hero-background-video{object-position:72% 50%}.hero-video-toggle{right:16px;bottom:10px}}
@media(prefers-reduced-motion:reduce){.hero-background-video{transition:none}}

/* 9.2.12: restored centered hero, full viewport on PC. */
.hero-facility{z-index:0}
.hero-facility::after{content:"";display:block;position:absolute;inset:0;z-index:1;background:rgba(3,13,24,.48);pointer-events:none}
.hero-facility img,.hero-background-video{filter:none}
.hero-light .hl-center .hl-copy{display:grid;justify-items:center;width:min(100%,980px);min-width:0;max-width:980px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;text-align:center}
.hero-light .hl-center .hl-title{color:#fff;text-shadow:0 2px 5px rgba(0,0,0,.85),0 0 18px rgba(0,0,0,.35)}
.hero-light .hl-center .hl-sub,.hero-light .hl-center .hl-facts{color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.95),0 0 10px rgba(0,0,0,.6)}
.hero-light .hl-center .hl-facts b,.hero-light .hl-center .hl-facts span{color:#fff}
@media(min-width:901px){
 .page-home .site-nav{position:fixed;top:12px;inset-inline:0;width:100%;padding-top:0;margin-top:0}
 .page-home .hero-light{margin-top:0;box-sizing:border-box;width:100%;height:100vh;min-height:100vh;height:100svh;min-height:100svh;padding:clamp(104px,12svh,144px) 0 76px;display:grid;align-items:center}
 .hero-light .hl-center .hl-title{font-size:clamp(48px,min(7.5vw,10.5svh),116px)}
 .hero-light .hl-center .hl-facts{margin-top:28px}
}
@media(min-width:901px) and (max-height:600px){
 .page-home .hero-light{height:auto;min-height:100vh;min-height:100svh;padding-top:100px;padding-bottom:72px}
 .hero-light .hl-center .hl-eyebrow{margin-bottom:14px}
 .hero-light .hl-center .hl-sub{margin-block:16px 22px}
}

/* 9.2.15: complete catalogue and unpriced product enquiries. */
.product-bottom{flex-wrap:wrap;gap:12px}
.price.price-request{font-size:1rem;line-height:1.4;letter-spacing:normal}

.preorder-label{display:inline-block;margin:8px 0 0;color:var(--accent);font-size:.8125rem;font-weight:600}
.size-price strong{overflow-wrap:anywhere}

/* Case-based pre-order enquiries */
.delivery-policy{padding:1rem 1.2rem;border:1px solid var(--line, #b9d5e8);border-radius:16px;line-height:1.6;margin-block:1rem;overflow-wrap:anywhere}
.preorder-form{display:grid;gap:1rem;flex:1 1 100%;min-width:0;scroll-margin-top:140px}
.preorder-form .delivery-policy,.preorder-form [data-preorder-delivery]{margin:0}
.preorder-form input,.preorder-form select{font-size:16px;min-height:48px;width:100%;max-width:100%;box-sizing:border-box}
.preorder-form button{min-height:48px;white-space:normal}

.doc-actions{display:flex;flex-wrap:wrap;gap:10px}
.doc-actions .btn{min-height:44px;white-space:normal}
.doc-preview,.research-call{grid-column:1/-1;min-width:0}
.doc-preview summary{cursor:pointer;padding:12px 0;min-height:44px;box-sizing:border-box}
.doc-preview iframe{display:block;width:100%;height:70vh;min-height:360px;max-height:900px;border:1px solid var(--line);border-radius:12px;background:#fff}
.doc-preview p{font-size:.9rem}
.research-call{border-top:1px solid var(--line);padding-top:24px;line-height:1.75;overflow-wrap:anywhere}
.research-call h2{font-size:clamp(1.5rem,3vw,2rem)}
.research-call h3{font-size:1.15rem;margin:1.6rem 0 .5rem}
.research-call ul{padding-left:1.5rem}
.research-call li+li{margin-top:.4rem}
.research-call .eyebrow{font-size:.8rem}
.fund-documents-heading{margin-bottom:1.5rem}
@media(max-width:640px){.doc-actions{grid-column:1/-1}.doc-actions .btn{flex:1 1 130px}.doc-preview iframe{height:55vh;min-height:280px}.doc{padding:18px 16px}.research-call{font-size:1rem}}

.research-full-text{white-space:pre-line;line-height:1.8;overflow-wrap:anywhere;max-width:82ch}

/* 9.2.19: supplied transparent product artwork, consistently contained. */
:is(.product-image,.size-photo,.detail-gallery,.cart-line) img[src*="/products/catalogue/"]{object-fit:contain;object-position:center;mix-blend-mode:normal;padding:3%;filter:none}
.product-body .preorder-label{display:block;width:fit-content;margin:8px 0 10px}

/* 9.2.20: category introductions from the supplied English catalogue. */
.category-guide{border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);border-radius:24px;padding:clamp(24px,3.2vw,44px);background:color-mix(in srgb,var(--ground) 80%,transparent);margin-top:-16px;margin-bottom:48px}
.category-guide-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-bottom:28px}
.category-guide-eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--link);margin:0}
.category-guide-detail{font-size:.75rem;line-height:1.6;color:var(--ink-2);padding:7px 13px;border-radius:999px;background:var(--tone)}
.category-guide-columns{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px)}
.category-guide-columns>div{min-width:0}.category-guide h2{font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.25;letter-spacing:-.025em;margin-bottom:12px}
.category-guide-columns p{font-size:1rem;line-height:1.8;color:var(--ink-2);margin:0;max-width:60ch;overflow-wrap:anywhere}
.category-guide footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent);padding-top:20px;margin-top:28px;font-size:.75rem;line-height:1.7;color:var(--ink-2)}
.category-guide footer a{display:inline-flex;align-items:center;gap:16px;min-height:44px;color:var(--link);text-decoration:underline;text-underline-offset:4px}
@media(max-width:640px){.category-guide{border-radius:18px;margin-top:0;margin-bottom:32px;padding:24px 20px}.category-guide-heading{margin-bottom:24px;gap:10px}.category-guide-columns{grid-template-columns:1fr;gap:24px}.category-guide-columns p{font-size:.93rem}.category-guide-detail{font-size:.68rem}.category-guide footer{font-size:.7rem;margin-top:24px;padding-top:16px;gap:6px}.category-guide footer a{min-height:44px}}

.mrp-note{display:block;font-size:.7rem;font-weight:400;color:var(--ink-2);flex-basis:100%}.case-order-form{scroll-margin-top:120px;margin-top:24px}.case-order-form h2{font-size:1.5rem}.case-order-form input,.case-order-form select{font-size:16px;min-height:48px}.case-order-form .delivery-policy{margin:0}.erp-card input[type=number]{min-width:110px;min-height:44px}
/* 9.2.30: contain the client stack and keep its controls grouped beneath it. */
.clients-sec{padding-block:clamp(40px,5vw,76px);margin-bottom:0;overflow:clip}
.clients-sec .cl-layout{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:center;max-width:1360px}
.clients-sec .cl-head{min-width:0;padding:0}
.clients-sec .cl-head h2{font-size:clamp(2.5rem,4.6vw,4.75rem);line-height:1.02;max-width:15ch;overflow-wrap:break-word}
.clients-sec .cl-intro{max-width:42ch;margin-top:24px}
.clients-sec .cl-show{min-width:0;min-height:0;width:100%;grid-template-rows:auto auto;overflow:clip}
.clients-sec .cl-viewport{height:clamp(340px,32vw,440px);min-height:0;width:100%;overflow:clip}
.clients-sec .cl-track{width:100%;height:100%;min-width:0}
.clients-sec .cl-slide{width:clamp(210px,20vw,276px);max-height:calc(100% - 32px)}
.clients-sec .cl-foot{display:flex;align-items:center;justify-content:center;gap:16px;padding:8px 0 0;min-width:0}
.clients-sec .cl-controls{display:flex;align-items:center;justify-content:center;gap:8px;width:auto;min-width:0;justify-self:auto}
.clients-sec .cl-dots{display:flex;justify-content:center;gap:6px;width:clamp(144px,18vw,244px);max-width:244px;flex:0 1 auto;overflow:hidden}
.clients-sec .cl-counter{justify-self:auto;align-items:center;gap:5px;letter-spacing:.06em;flex-shrink:0;min-height:44px}
.clients-sec .cl-sum{gap:8px}.clients-sec .cl-sum li{max-width:100%;white-space:normal}
@media(max-width:1100px){.clients-sec .cl-layout{grid-template-columns:1fr}.clients-sec .cl-head h2{max-width:18ch}.clients-sec .cl-show{max-width:760px;margin-inline:auto}.clients-sec .cl-viewport{height:390px}.clients-sec .cl-slide{width:250px}}
@media(max-width:620px){.clients-sec{padding-block:40px 32px}.clients-sec .cl-layout{gap:24px}.clients-sec .cl-head h2{font-size:clamp(2.25rem,9vw,3rem);max-width:16ch}.clients-sec .cl-intro{margin-top:18px}.clients-sec .cl-show{margin:0}.clients-sec .cl-viewport{height:330px}.clients-sec .cl-slide{width:min(62vw,225px);max-height:calc(100% - 28px)}.clients-sec .cl-foot{flex-direction:column;gap:0;padding-top:4px}.clients-sec .cl-controls{gap:8px}.clients-sec .cl-dots{display:flex;width:144px;max-width:144px}.clients-sec .cl-counter{min-height:28px}.clients-sec .cl-cta{margin-top:22px}}
.clients-sec .cl-cta{max-width:100%;white-space:normal;text-align:center;line-height:1.25}
@media(max-width:390px){.clients-sec .cl-cta{font-size:.9375rem;padding-inline:18px;gap:8px}}

/* 9.2.31: fixed round dots, one for every client, with stable click targets. */
.clients-sec .cl-controls{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:8px;width:min(440px,100%);min-width:0}
.clients-sec .cl-dots{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:center;gap:0;width:100%;max-width:none;min-width:0;overflow:visible}
.clients-sec .cl-dot,.clients-sec .cl-dot.is-active{display:block;width:100%;height:44px;min-width:0;min-height:44px;margin:0;padding:0;border:0;border-radius:0;background:transparent!important;transition:none}
.clients-sec .cl-dot::after,.clients-sec .cl-dot.is-active::after{width:8px;height:8px;border-radius:50%;background:var(--ink-2);transform:translate(-50%,-50%);transition:background-color .18s,transform .18s}
.clients-sec .cl-dot.is-active::after{background:var(--accent);transform:translate(-50%,-50%) scale(1.25)}
.clients-sec .cl-dot:focus-visible{outline:2px solid var(--accent);outline-offset:-3px;border-radius:8px}
@media(max-width:620px){.clients-sec .cl-foot{display:block;position:relative;padding-top:4px}.clients-sec .cl-controls{width:100%;grid-template-rows:44px 44px;gap:0}.clients-sec .cl-dots{grid-column:1/-1;grid-row:2;display:grid;width:100%;max-width:none}.clients-sec [data-client-prev]{grid-column:1;grid-row:1}.clients-sec [data-client-next]{grid-column:3;grid-row:1}.clients-sec .cl-counter{position:absolute;top:4px;left:50%;transform:translateX(-50%);height:44px;min-height:44px;pointer-events:none}}
@media(prefers-reduced-motion:reduce){.clients-sec .cl-dot::after{transition:none}}

/* Geographic Bangladesh map refinement, national border + authentic delta/coast. */
.bd-land{isolation:isolate}
.bd-map-river{fill:none;stroke:rgba(255,255,255,.35);stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
.bd-island{stroke-width:3}
.bd-island-outline{stroke-width:1.5}
.t2-map-card{background:linear-gradient(145deg,rgba(252,254,255,.95),rgba(221,243,254,.95))}
.t2-callout{right:14px;top:18px}
.t2-map{overflow:visible}
@media(max-width:1100px){.t2-callout{position:static;right:auto;top:auto;margin:0 0 -6px auto;min-width:unset;max-width:265px}}


/* ION Bangladesh research map — responsive UI refinement (v4).
   Geography is the real vector boundary. Data dots and two green markers are illustrative. */
.page-home .test200{
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(30px,4.5vw,72px);align-items:center;
}
.page-home .test200 .t2-copy{min-width:0}
.page-home .test200 h2{max-width:16ch;text-wrap:balance}
.page-home .test200 .t2-stats{gap:10px}
.page-home .test200 .t2-stats div{min-width:0;border-radius:18px;padding:16px 15px;border:1px solid rgba(255,255,255,.65);box-shadow:0 12px 30px rgba(29,71,105,.05)}
.page-home .test200 .t2-stats dt{font-size:clamp(.7rem,.84vw,.83rem);line-height:1.4}
.page-home .t2-map-card{
  position:relative;box-sizing:border-box;display:flex;flex-direction:column;gap:12px;
  min-width:0;width:100%;max-width:610px;align-self:center;justify-self:center;
  padding:clamp(12px,1.6vw,20px);
  background:linear-gradient(148deg,rgba(250,254,255,.98) 0%,#e7f7ff 48%,#d6effe 100%);
  border:1px solid rgba(255,255,255,.96);border-radius:30px;
  box-shadow:0 24px 72px rgba(45,105,156,.14),inset 0 1px 0 #fff;
  overflow:hidden;isolation:isolate
}
.page-home .t2-map-card::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 63% 46%,rgba(68,179,246,.16),transparent 61%),radial-gradient(ellipse at 8% 85%,rgba(255,255,255,.72),transparent 52%)}
.page-home .t2-map-stage{position:relative;z-index:1;width:100%;min-width:0;line-height:0}
.page-home .t2-map-stage .t2-map{display:block;width:100%!important;height:auto!important;max-width:100%;min-width:0;aspect-ratio:auto;overflow:visible}
.page-home .t2-map .bd-map-fill{stroke-width:5;stroke-linejoin:round}
.page-home .t2-map .bd-map-outline{stroke-width:2;opacity:.95}
.page-home .t2-map .bd-map-river{stroke-width:1.25;opacity:.85}
.page-home .t2-map .bd-test-dot{r:3.7;opacity:.96}
.page-home .t2-map .bd-map-connector{stroke:#205e9b;stroke-width:3.1;stroke-linecap:round}
.page-home .t2-map-card .t2-callout{
  position:absolute;z-index:3;top:clamp(14px,2vw,23px);right:clamp(14px,2vw,23px);
  box-sizing:border-box;display:flex;flex-direction:column;gap:0;
  width:clamp(172px,18vw,216px);min-width:0;max-width:42%;margin:0;
  border-radius:18px;overflow:hidden;border:2px solid #164d91;
  background:rgba(255,255,255,.98);box-shadow:0 14px 34px rgba(17,72,125,.19);
}
.page-home .t2-map-card .t2-callout__title{display:block;background:#164d91;color:#fff;text-align:center;
  font-size:clamp(1.15rem,1.8vw,1.55rem);font-weight:800;letter-spacing:-.035em;line-height:1.13;padding:10px 12px}
.page-home .t2-map-card .t2-callout__sub{display:flex;align-items:center;gap:9px;padding:11px 12px;color:#143e70;
  font-size:clamp(.72rem,.94vw,.85rem);font-weight:700;line-height:1.38}
.page-home .t2-map-card .t2-callout__sub::before{content:'';flex:0 0 34px;width:34px;height:34px;border-radius:10px;
  background:#edf5ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='none' stroke='%23164f94' stroke-width='3' stroke-linejoin='round' stroke-linecap='round' d='M4 40h40M9 40V21h15v19M28 40V10h11v30M14 27h5m-5 6h5m18-17h-3m3 7h-3m3 7h-3'/%3E%3C/svg%3E") center / 24px no-repeat;
  box-shadow:inset 0 0 0 1px #dbe9ff}
.page-home .t2-map-card .t2-map-legend{
  position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;margin:0;padding:12px 6px;box-sizing:border-box;
  background:rgba(255,255,255,.91);border:1px solid rgba(255,255,255,.9);border-radius:17px;
  color:#31536f;line-height:1.3;font-size:clamp(.69rem,.85vw,.79rem);font-weight:650;
  box-shadow:0 6px 18px rgba(71,140,177,.05)
}
.page-home .t2-map-card .t2-map-legend span{
  display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;
  padding:3px 7px;white-space:normal;text-align:left
}
.page-home .t2-map-card .t2-map-legend span+span{border-left:1px solid #e4edf5}
.page-home .t2-map-card .source-key{display:inline-block;flex:0 0 10px;width:10px;height:10px;box-shadow:0 0 0 3px rgba(79,165,214,.13)}
.page-home .t2-map-card .source-key--alkaline{background:#1abc8f;box-shadow:0 0 0 3px rgba(22,185,142,.16)}
.page-home .t2-map-card .source-key--selected{background:#e5a30a;box-shadow:0 0 0 3px rgba(229,163,10,.17)}
@media(max-width:1100px){
 .page-home .test200{gap:clamp(20px,3vw,42px)}
 .page-home .t2-map-card .t2-callout{width:190px;right:12px;top:12px;max-width:43%}
}
@media(max-width:900px){
 .page-home .test200{grid-template-columns:minmax(0,1fr);row-gap:24px;padding-block:clamp(48px,8vw,72px)}
 .page-home .test200 .t2-copy{max-width:700px}
 .page-home .t2-map-card{max-width:560px;width:100%;justify-self:center}
 .page-home .test200 h2{max-width:18ch}
}
@media(max-width:600px){
 .page-home .test200{padding-block:42px 54px;row-gap:22px}
 .page-home .test200 h2{font-size:clamp(1.9rem,8.4vw,2.75rem);max-width:16ch;line-height:1.06;letter-spacing:-.046em}
 .page-home .test200 .t2-copy>p{margin:14px 0 20px;font-size:clamp(.93rem,3.8vw,1.01rem);line-height:1.56}
 .page-home .test200 .t2-stats{gap:8px}
 .page-home .test200 .t2-stats div{padding:12px 10px;border-radius:13px}
 .page-home .test200 .t2-stats dt{font-size:.68rem;line-height:1.25;min-height:2.6em}
 .page-home .test200 .t2-stats dd{font-size:clamp(1.55rem,7vw,2rem);margin-top:3px}
 .page-home .t2-map-card{padding:12px;gap:10px;border-radius:22px}
 .page-home .t2-map-card .t2-callout{
   position:relative;inset:auto;width:100%;max-width:none;min-width:0;
   display:grid;grid-template-columns:minmax(85px,31%) minmax(0,1fr);align-items:stretch;
   margin:0;order:2;border-width:1.5px;border-radius:14px;
   box-shadow:0 7px 21px rgba(23,82,144,.08)
 }
 .page-home .t2-map-card .t2-callout__title{display:flex;align-items:center;justify-content:center;
   font-size:clamp(1.02rem,4.5vw,1.3rem);padding:11px 8px}
 .page-home .t2-map-card .t2-callout__sub{font-size:clamp(.72rem,3.05vw,.83rem);padding:10px 10px;gap:8px;line-height:1.28}
 .page-home .t2-map-card .t2-callout__sub::before{flex-basis:28px;width:28px;height:28px;background-size:21px}
 .page-home .t2-map-stage{order:1}
 .page-home .t2-map .bd-map-connector{display:none}
 .page-home .t2-map-card .t2-map-legend{order:3;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;
   padding:0;border:none;background:transparent;box-shadow:none;border-radius:0;font-size:.73rem}
 .page-home .t2-map-card .t2-map-legend span{border-radius:11px;padding:10px 9px;background:rgba(255,255,255,.85);
   border:1px solid rgba(255,255,255,.96);justify-content:flex-start;line-height:1.25}
 .page-home .t2-map-card .t2-map-legend span+span{border-left:1px solid rgba(255,255,255,.96)}
 .page-home .t2-map-card .t2-map-legend span:last-child{grid-column:1/-1}
}
@media(max-width:360px){
 .page-home .test200 .t2-stats{gap:6px}
 .page-home .test200 .t2-stats div{padding:10px 7px}
 .page-home .test200 .t2-stats dt{font-size:.63rem}
 .page-home .t2-map-card{padding:9px}
 .page-home .t2-map-card .t2-callout__sub{font-size:.71rem}
}
@media(prefers-reduced-motion:reduce){.page-home .t2-map .bd-ripple{animation:none}}


/* ===== ION LAB / REFERENCE-STYLE LEFT COLUMN, v5 ===== */
.page-home .test200{grid-template-columns:minmax(0,1.09fr) minmax(0,.91fr);align-items:center;gap:clamp(24px,2.8vw,52px);padding-block:clamp(48px,5vw,84px)}
.page-home .test200 .t2-copy{width:100%;max-width:none;min-width:0;align-self:center;display:flex;flex-direction:column;align-items:stretch}
.page-home .test200 .t2-copy .t2-kicker{display:flex;align-items:center;gap:15px;margin:0 0 16px;color:#0866d6;font-size:clamp(.79rem,.9vw,.96rem);font-weight:800;letter-spacing:.055em;text-transform:uppercase}
.page-home .test200 .t2-copy .t2-kicker::after{content:"";display:block;width:54px;height:2px;background:#0876db;border-radius:8px}
.page-home .test200 .t2-copy .t2-reference-title{max-width:none;margin:0;color:#092659;font-family:Inter,"Jost",system-ui,sans-serif;font-size:clamp(2.05rem,2.95vw,3.15rem);font-weight:800;line-height:1.075;letter-spacing:-.047em;text-wrap:normal}
.page-home .test200 .t2-copy .t2-title-line{display:block}
.page-home .test200 .t2-copy .t2-title-line em{color:#096bdd;font-style:normal;font-weight:850}
.page-home .test200 .t2-copy .t2-title-line .t2-natore-label{display:inline-block;max-width:100%;padding:.015em .24em .1em;border-radius:.48em;background:linear-gradient(130deg,#0875ef,#064bb9);box-shadow:0 3px 0 rgba(5,74,169,.06);font-weight:800;line-height:1.05;letter-spacing:-.045em;color:#fff;vertical-align:baseline;white-space:nowrap}
.page-home .test200 .t2-copy .t2-description{max-width:62ch;margin:18px 0 20px;color:#16365b;font-size:clamp(.94rem,1.12vw,1.08rem);font-weight:450;line-height:1.5}
.page-home .test200 .t2-copy .t2-ref-stats{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;align-items:stretch}
.page-home .test200 .t2-copy .t2-ref-stats .t2-stat{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;min-height:164px;padding:16px 8px 14px;border:1px solid rgba(255,255,255,.9);border-radius:20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 10px 24px rgba(42,114,171,.045);text-align:center}
.page-home .test200 .t2-copy .t2-ref-stats .t2-stat--blue{background:linear-gradient(135deg,#e1f3ff,#b4e1fc);color:#0355ca}
.page-home .test200 .t2-copy .t2-ref-stats .t2-stat--green{background:linear-gradient(135deg,#e0ffe5,#bff4ca);color:#0aa869}
.page-home .test200 .t2-copy .t2-ref-stats .t2-stat--gold{background:linear-gradient(135deg,#fff5d5,#ffe5a0);color:#e69800}
.page-home .test200 .t2-copy .t2-ref-stats dt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.page-home .test200 .t2-copy .t2-ref-stats .t2-stat-icon{width:38px;height:38px;display:block;margin:0 0 1px}
.page-home .test200 .t2-copy .t2-ref-stats .t2-stat-icon svg{width:100%;height:100%;display:block}
.page-home .test200 .t2-copy .t2-ref-stats .t2-stat dd{display:flex;flex-direction:column;gap:2px;margin:0;align-items:center;line-height:1.12}
.page-home .test200 .t2-copy .t2-ref-stats .t2-stat .t2-stat-num{color:inherit;font-size:clamp(1.7rem,2.6vw,2.9rem);font-weight:850;line-height:1.06;letter-spacing:-.045em;white-space:nowrap;font-variant-numeric:tabular-nums}
.page-home .test200 .t2-copy .t2-ref-stats .t2-stat dd>span{color:#082b63;font-size:clamp(.77rem,1.12vw,1.02rem);font-weight:700;line-height:1.16}
.page-home .test200 .t2-copy .t2-factory-photo{position:relative;width:calc(100% + 24px);margin:12px -12px -4px;overflow:hidden;max-height:320px;pointer-events:none;isolation:isolate}
.page-home .test200 .t2-copy .t2-factory-photo img{display:block;width:100%;aspect-ratio:1090/460;max-height:320px;height:auto;object-fit:cover;object-position:center 54%;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 16%,#000 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 16%,#000 100%)}
@media(max-width:1250px){
 .page-home .test200{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr)}
 .page-home .test200 .t2-copy .t2-reference-title{font-size:clamp(1.95rem,3.1vw,2.85rem)}
 .page-home .test200 .t2-copy .t2-ref-stats{gap:8px}
 .page-home .test200 .t2-copy .t2-ref-stats .t2-stat{min-height:148px;padding:13px 6px}
 .page-home .test200 .t2-copy .t2-ref-stats .t2-stat-icon{width:31px;height:31px}
}
@media(max-width:900px){
 .page-home .test200{grid-template-columns:minmax(0,1fr);gap:12px;padding-block:clamp(36px,7vw,62px)}
 .page-home .test200 .t2-copy{max-width:700px;margin-inline:auto}
 .page-home .test200 .t2-copy .t2-reference-title{font-size:clamp(2rem,5vw,3.3rem)}
 .page-home .test200 .t2-copy .t2-ref-stats .t2-stat{min-height:155px}
 .page-home .test200 .t2-copy .t2-factory-photo{max-height:340px}
 .page-home .test200 .t2-copy .t2-factory-photo img{max-height:340px}
}
@media(max-width:600px){
 .page-home .test200{gap:16px;padding-block:38px 50px}
 .page-home .test200 .t2-copy .t2-kicker{font-size:.75rem;margin-bottom:14px}
 .page-home .test200 .t2-copy .t2-kicker::after{width:40px}
 .page-home .test200 .t2-copy .t2-reference-title{font-size:clamp(1.63rem,6.1vw,2.15rem);line-height:1.1;letter-spacing:-.04em}
 .page-home .test200 .t2-copy .t2-description{font-size:.91rem;line-height:1.52;margin:14px 0 18px}
 .page-home .test200 .t2-copy .t2-ref-stats{gap:7px}
 .page-home .test200 .t2-copy .t2-ref-stats .t2-stat{min-height:130px;border-radius:14px;padding:10px 3px}
 .page-home .test200 .t2-copy .t2-ref-stats .t2-stat-icon{width:28px;height:28px;margin:0}
 .page-home .test200 .t2-copy .t2-ref-stats .t2-stat .t2-stat-num{font-size:clamp(1.3rem,5vw,1.9rem)}
 .page-home .test200 .t2-copy .t2-ref-stats .t2-stat dd>span{font-size:clamp(.65rem,2.65vw,.8rem);line-height:1.17}
 .page-home .test200 .t2-copy .t2-factory-photo{margin:8px -6px 0;width:calc(100% + 12px)}
 .page-home .test200 .t2-copy .t2-factory-photo img{aspect-ratio:2/1;max-height:230px;object-position:50% 48%}
}
@media(max-width:350px){
 .page-home .test200 .t2-copy .t2-reference-title{font-size:1.57rem}
 .page-home .test200 .t2-copy .t2-ref-stats{gap:5px}
 .page-home .test200 .t2-copy .t2-ref-stats .t2-stat{min-height:120px;padding:10px 1px}
 .page-home .test200 .t2-copy .t2-ref-stats .t2-stat .t2-stat-num{font-size:1.2rem}
 .page-home .test200 .t2-copy .t2-ref-stats .t2-stat dd>span{font-size:.61rem}
}
@media(prefers-reduced-motion:reduce){.page-home .test200 .t2-factory-photo img{transition:none}}

/* Final color/readability polish for research statistic tiles. */
.page-home .test200 .t2-copy .t2-ref-stats .t2-stat--blue dd{color:#0755c5}
.page-home .test200 .t2-copy .t2-ref-stats .t2-stat--green dd{color:#08a76d}
.page-home .test200 .t2-copy .t2-ref-stats .t2-stat--gold dd{color:#e39a00}
.page-home .test200 .t2-copy .t2-ref-stats .t2-stat dd>span{letter-spacing:0;font-weight:750}
.page-home .test200 .t2-copy .t2-factory-photo img{-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 13%,#000 82%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 13%,#000 82%,transparent 100%)}
@media(max-width:350px){
 .page-home .test200 .t2-copy .t2-ref-stats .t2-stat dd>span{font-size:.675rem;letter-spacing:-.01em}
}


/* ION / Our Clients: logo-only circular center-focus carousel (Nov 2026).
   Designed from the client's five-circle sketch, not an image asset.
   Keep the original logo artwork and per-client background colors. */
.clients-sec .cl-show{--logo-outline:rgba(31,97,157,.12);overflow:hidden;isolation:isolate}
.clients-sec .cl-viewport{
  height:clamp(295px,31vw,396px);min-height:0;
  position:relative;display:block;overflow:hidden;
  -webkit-mask-image:none;mask-image:none;
  touch-action:pan-y;
}
.clients-sec .cl-viewport::before,.clients-sec .cl-viewport::after{display:none}
.clients-sec .cl-track{position:relative;width:100%;height:calc(100% - 64px);min-width:0;transform-style:flat}
.clients-sec .cl-slide{
  position:absolute;left:50%;top:50%;display:block;
  width:clamp(192px,19vw,232px);height:auto;max-height:none;
  aspect-ratio:1/1;min-width:0;
  border-radius:50%;overflow:hidden;
  border:2px solid rgba(255,255,255,.9);
  background:var(--slide-bg,#fff);
  box-shadow:0 14px 42px rgba(32,75,110,.14),0 0 0 1px var(--logo-outline);
  transform:translate3d(-50%,-50%,0);
  transition:transform .76s cubic-bezier(.22,1,.36,1),opacity .6s ease,box-shadow .5s ease;
  will-change:transform,opacity;
  pointer-events:none;
}
.clients-sec .cl-slide.is-active{
  box-shadow:0 24px 64px rgba(33,82,133,.22),0 0 0 7px rgba(255,255,255,.76),0 0 0 9px color-mix(in srgb,var(--slide-accent) 18%,transparent);
}
.clients-sec .cl-slide .cl-visual,
.clients-sec .cl-slide .cl-visual--wide{
  width:100%;height:100%;min-height:0;
  display:grid;place-items:center;
  overflow:hidden;border-radius:inherit;
  padding:15%;background:transparent;
}
.clients-sec .cl-slide .cl-visual::after{display:none}
.clients-sec .cl-slide .cl-visual img,
.clients-sec .cl-slide .cl-visual--wide img{
  display:block;width:100%;height:100%;max-width:100%;max-height:100%;
  object-fit:contain;filter:none;transform:none;
}
.clients-sec .cl-slide.is-active .cl-visual img{transform:none}
.clients-sec .cl-slide .cl-visual b{font-size:clamp(.85rem,1.4vw,1.2rem);line-height:1.1;text-align:center;color:var(--slide-accent,#1c3551)}
.clients-sec .cl-slide .cl-meta{display:none}
.clients-sec .cl-viewport.is-dragging .cl-slide{transition:none}
.clients-sec .cl-focused{
  position:absolute;bottom:4px;left:12px;right:12px;min-height:52px;
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;
  text-align:center;pointer-events:none;color:var(--ink);
}
.clients-sec .cl-focused-tag{
  display:block;font-size:.64rem;font-weight:750;letter-spacing:.15em;
  text-transform:uppercase;color:var(--accent);line-height:1.2;
}
.clients-sec .cl-focused strong{
  display:block;max-width:100%;font-size:clamp(1rem,1.65vw,1.25rem);
  line-height:1.15;letter-spacing:-.02em;font-weight:750;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.clients-sec .cl-foot{margin-top:4px}
.clients-sec .cl-dots{grid-template-columns:repeat(var(--cl-count,13),minmax(0,1fr))}
:root[data-theme="dark"]:not(.admin-theme) .clients-sec .cl-slide{
  border-color:rgba(255,255,255,.21);
  box-shadow:0 14px 42px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.13)
}
:root[data-theme="dark"]:not(.admin-theme) .clients-sec .cl-slide.is-active{
  box-shadow:0 18px 54px rgba(0,0,0,.4),0 0 0 7px rgba(255,255,255,.13),0 0 0 9px rgba(255,255,255,.09)
}
@media(max-width:1100px){
  .clients-sec .cl-viewport{height:370px}
  .clients-sec .cl-slide{width:226px}
}
@media(max-width:620px){
  .clients-sec .cl-viewport{height:clamp(246px,74vw,306px)}
  .clients-sec .cl-track{height:calc(100% - 56px)}
  .clients-sec .cl-slide{width:clamp(152px,44vw,194px);border-width:1.5px}
  .clients-sec .cl-slide.is-active{
    box-shadow:0 18px 45px rgba(33,82,133,.19),0 0 0 4px rgba(255,255,255,.85),0 0 0 6px color-mix(in srgb,var(--slide-accent) 16%,transparent)
  }
  .clients-sec .cl-slide .cl-visual{padding:16%}
  .clients-sec .cl-focused{bottom:0;min-height:48px}
  .clients-sec .cl-focused strong{font-size:1.04rem}
  .clients-sec .cl-focused-tag{font-size:.6rem}
}
@media(max-width:360px){
  .clients-sec .cl-slide{width:148px}
  .clients-sec .cl-viewport{height:246px}
}
@media(prefers-reduced-motion:reduce){
  .clients-sec .cl-slide{transition:none!important}
}

/* 2026-11-03: five complete client circles, no fading/cropping at horizontal edges. */
.clients-sec .cl-viewport,
.clients-sec .cl-track { -webkit-mask-image:none!important;mask-image:none!important; }
.clients-sec .cl-viewport { overflow:hidden; }
.clients-sec .cl-show { overflow:visible; }
.clients-sec .cl-dots { grid-template-columns:repeat(var(--cl-count, 15),minmax(0,1fr)); }
.clients-sec .cl-slide .cl-visual:not(:has(img)) {display:grid;place-items:center;padding:12px;text-align:center;}
.clients-sec .cl-slide .cl-visual>b {font-size:clamp(.95rem,1.5vw,1.2rem);line-height:1.16;letter-spacing:-.025em;color:#7c122e;}
@media(max-width:620px){.clients-sec .cl-viewport {overflow:hidden;}.clients-sec .cl-slide .cl-visual>b {font-size:.88rem;}}

/* ION glass-bottle additions: layout works on all viewport sizes. */
.size-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.size-card--glass{background:linear-gradient(150deg,#f8fdff,#e9f6fd);border:1px solid rgba(54,144,197,.13)}
.size-card--glass .size-photo{background:radial-gradient(circle at 50% 34%,#fff 0%,#e8f6ff 68%,#d6eaf9 100%)}
.size-card--glass .size-photo img{object-fit:contain;object-position:center;padding:3% 6%;mix-blend-mode:normal;filter:drop-shadow(0 12px 12px rgba(20,79,124,.11))}
.size-card--glass .size-flag--glass{position:relative;display:inline-block;align-self:flex-start;margin:2px 8px 6px;padding:6px 10px;border-radius:999px;font-size:.75rem;font-weight:700;color:#0d638f;background:#def4ff}
.size-card--glass .size-glass-detail{display:block;margin-top:3px;color:var(--ink-2);font-size:.87rem;font-weight:500}
.size-glass-action{margin:12px 10px 0;justify-content:center;text-align:center}
@media(max-width:1000px){.size-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.size-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none;gap:12px}.size-card{padding:10px 9px 14px}.size-card h3{font-size:clamp(1.8rem,7vw,2.5rem);padding:0 5px}.size-card .size-name,.size-card .size-price{padding-inline:5px}.size-glass-action{font-size:.82rem;padding:10px 5px;margin:8px 3px 0}.size-card--glass .size-flag--glass{font-size:.65rem;margin:0 4px 5px}.size-photo{margin-bottom:9px}}
@media(max-width:370px){.size-grid{grid-template-columns:1fr;max-width:390px;margin-inline:auto}.size-card{padding:12px 12px 18px}.size-card h3{font-size:2.25rem}}
/* Blog manager */
.ion-blog-admin{max-width:1500px;margin:auto}.ion-blog-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:22px}.ion-blog-summary>div{display:flex;flex-direction:column;padding:18px 20px;border-radius:18px;background:var(--tone);border:1px solid var(--line)}.ion-blog-summary strong{font-size:2rem;color:var(--ink);font-weight:800}.ion-blog-summary span{font-size:.88rem;color:var(--ink-2)}
.ion-blog-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start;gap:18px}.ion-blog-head{display:flex;justify-content:space-between;align-items:start;gap:16px;margin-bottom:20px}.ion-blog-head h2{margin:0 0 6px}.ion-blog-eyebrow{color:var(--accent);font-size:.72rem;font-weight:800;letter-spacing:.1em;margin:0 0 6px}.ion-blog-editor{min-width:0}.ion-blog-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}.ion-blog-editor-bar{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:9px}.ion-blog-editor-bar button{border:1px solid var(--line);border-radius:9px;background:var(--tone);color:var(--ink);cursor:pointer;padding:7px 12px;font-size:.8rem}.ion-blog-editor-bar button:hover{border-color:var(--accent)}.ion-blog-controls{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}.ion-blog-existing{display:block;width:min(100%,210px);height:105px;object-fit:cover;border-radius:12px;margin-bottom:12px}.ion-blog-preview{margin-top:16px;padding:20px;border:1px solid var(--line);border-radius:14px;line-height:1.7;background:var(--ground);white-space:normal}.ion-blog-preview h2,.ion-blog-preview h3,.ion-blog-preview h4{margin:16px 0 8px}.ion-blog-preview p{margin:0 0 10px}.ion-blog-search{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:11px;background:var(--ground);color:var(--ink);margin-bottom:14px}.ion-blog-list{display:grid;gap:10px}.ion-blog-row{display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;padding:12px;border:1px solid var(--line);border-radius:14px;min-width:0}.ion-blog-row>img{width:92px;height:92px;object-fit:cover;border-radius:10px}.ion-blog-row h3{font-size:.96rem;line-height:1.35;margin:5px 0;overflow-wrap:anywhere}.ion-blog-row p{font-size:.78rem;color:var(--ink-2);margin:0 0 10px}.ion-blog-status{display:inline-flex;color:#8b6517;background:#fff1c8;border-radius:20px;font-size:.7rem;padding:3px 8px}.ion-blog-status.is-published{background:#d8f6e9;color:#126642}.ion-blog-actions{display:flex;gap:11px;align-items:center;flex-wrap:wrap}.ion-blog-actions a,.ion-blog-actions button{padding:0;border:none;background:none;font:inherit;font-size:.8rem;font-weight:700;color:var(--accent);cursor:pointer}.ion-blog-actions form{margin:0}.ion-blog-actions .ion-blog-delete{color:#b53d45}.ion-article-source{font-size:.875rem;color:var(--ink-2);margin-top:28px}.ion-article-source a{color:var(--accent)}
@media(max-width:1100px){.ion-blog-layout{grid-template-columns:1fr}}@media(max-width:650px){.ion-blog-summary>div{padding:12px}.ion-blog-summary strong{font-size:1.45rem}.ion-blog-summary span{font-size:.7rem}.ion-blog-two{grid-template-columns:1fr}.ion-blog-row{grid-template-columns:72px minmax(0,1fr)}.ion-blog-row>img{width:72px;height:72px}.ion-blog-head{flex-wrap:wrap}}

/* 2026-11-03: pinned Blog Manager shortcut in Admin */
.erp-blog-shortcut{background:linear-gradient(110deg,rgba(8,117,191,.1),rgba(25,179,174,.06));border:1px solid rgba(14,124,191,.2);font-weight:750!important;margin-bottom:8px}
.erp-blog-shortcut svg{color:#1473ba}
.erp-blog-shortcut:hover,.erp-blog-shortcut.is-active{background:rgba(10,111,189,.18)!important;color:var(--ink)!important}
@media(max-width:1100px){.erp-blog-shortcut{min-height:48px}}

/* Keep Blog Manager accessible on narrow admin screens when the sidebar is collapsed. */
.erp-blog-mobile-link{display:none}
@media(max-width:900px){
 .erp-blog-mobile-link{display:flex;align-items:center;gap:10px;min-height:44px;margin:10px 0 4px;padding:8px 14px;border:1px solid rgba(14,124,191,.25);border-radius:12px;background:rgba(10,111,189,.10);color:var(--ink);font-weight:700;text-decoration:none}
 .erp-blog-mobile-link svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8}
 .erp-blog-mobile-link[aria-current="page"]{background:rgba(10,111,189,.2)}
}


/* ION Home: educational alkaline-water section, Nov 2026 */
.page-home .ion-why-science{padding-block:clamp(56px,7vw,110px)}
.ion-why-science .ion-why-header{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,.9fr);gap:clamp(22px,4vw,76px);align-items:center;margin-bottom:26px}
.ion-why-science .ion-why-eyebrow,.ion-why-science .ion-why-subtitle{font-size:.75rem;font-weight:750;letter-spacing:.11em;color:#0865b0}
.ion-why-science .ion-why-eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:15px}
.ion-why-science .ion-why-spark{height:9px;width:9px;border-radius:50%;background:#0b85d1;box-shadow:0 0 0 5px rgba(11,133,209,.14)}
.ion-why-science h2{font-size:clamp(2.3rem,4.7vw,4.3rem);line-height:1.05;letter-spacing:-.055em;max-width:13ch;margin:0 0 20px;text-wrap:balance}
.ion-why-science .ion-why-intro>p{font-size:clamp(1rem,1.2vw,1.2rem);line-height:1.65;color:var(--ink-2);max-width:52ch;margin:0 0 22px}
.ion-why-science .ion-why-outline-link{display:inline-flex;align-items:center;gap:8px;color:var(--link);font-weight:650;text-decoration:none}
.ion-why-science .ion-why-outline-link svg,.ion-why-science .ion-why-card-link svg{width:17px;height:17px}
.ion-why-science .ion-why-ph{min-width:0;background:linear-gradient(140deg,#0c2744,#124b83 75%,#1966a0);color:#fff;border-radius:28px;padding:clamp(24px,3vw,38px);box-shadow:0 20px 54px rgba(12,58,101,.2)}
.ion-why-science .ion-why-ph-overline{font-size:.7rem;letter-spacing:.12em;font-weight:700;color:#cde5f8}
.ion-why-science .ion-why-ph-summary{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:18px 0 36px}
.ion-why-science .ion-why-ph-summary>div{display:flex;align-items:center;gap:15px}
.ion-why-science .ion-why-ph-summary strong{font-size:clamp(3.3rem,6vw,5.2rem);line-height:1;letter-spacing:-.06em;font-weight:720}
.ion-why-science .ion-why-ph-summary div span{font-size:.9rem;line-height:1.4;color:#d2e9fa}
.ion-why-science .ion-why-ph-pill{font-size:.75rem;white-space:nowrap;padding:8px 12px;border:1px solid rgba(255,255,255,.27);border-radius:99px;color:#e5f7ff;background:rgba(255,255,255,.1)}
.ion-why-science .ion-why-scale{margin-bottom:23px}
.ion-why-science .ion-why-scale-bar{height:12px;border-radius:99px;position:relative;background:linear-gradient(90deg,#f59e55 0%,#ecdf64 35%,#77dcaa 50%,#24c2c9 64%,#4c92ff 82%,#9e7ee4 100%)}
.ion-why-science .ion-why-scale-pin{position:absolute;left:60.714%;bottom:0;transform:translate(-50%,0);height:29px;border-left:2px solid #fff}
.ion-why-science .ion-why-scale-pin b{position:absolute;top:-27px;left:50%;transform:translateX(-50%);font-size:.85rem;border-radius:6px;padding:2px 7px;color:#0a2840;background:#fff;line-height:1.5}
.ion-why-science .ion-why-scale-labels{display:flex;justify-content:space-between;margin-top:11px;font-size:.75rem;font-weight:650;color:#dcf0ff}
.ion-why-science .ion-why-ph>p{margin:0;color:#cfe7fa;font-size:.9rem;line-height:1.55}
.ion-why-science .ion-why-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:28px 0}
.ion-why-science .ion-why-card{display:flex;flex-direction:column;min-width:0;padding:clamp(20px,2.1vw,28px);border:1px solid rgba(25,112,179,.11);border-radius:22px;background:rgba(255,255,255,.76);box-shadow:0 8px 30px rgba(32,92,140,.055);backdrop-filter:blur(12px)}
.ion-why-science .ion-why-card--quality{background:linear-gradient(160deg,#edf8fc,#e2f3ee)}
.ion-why-science .ion-why-card-head{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:24px}
.ion-why-science .ion-why-card-icon{display:grid;place-items:center;height:40px;width:40px;border-radius:13px;font-size:.87rem;font-weight:800;background:#e5f2ff;color:#175c9c}
.ion-why-science .ion-why-card-type{font-size:.66rem;letter-spacing:.08em;color:#54809e;font-weight:750;text-align:right}
.ion-why-science .ion-why-card h3{font-size:clamp(1.15rem,1.5vw,1.4rem);line-height:1.25;margin:0 0 14px;color:#153e62}
.ion-why-science .ion-why-card>p{color:#476174;font-size:.945rem;line-height:1.65;margin:0}
.ion-why-science .ion-why-card .ion-why-card-note{font-size:.83rem;margin-top:auto;padding-top:20px;color:#0f6195;font-weight:600}
.ion-why-science .ion-why-card-link{display:inline-flex;align-items:center;gap:5px;color:#086ab2;font-size:.84rem;font-weight:680;margin-top:auto;padding-top:20px;text-decoration:none}
.ion-why-science .ion-why-bottom{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(270px,.8fr);gap:24px;padding:clamp(23px,3vw,40px);border:1px solid rgba(31,92,141,.1);border-radius:26px;background:rgba(237,246,254,.65)}
.ion-why-science .ion-why-bottom h3{margin:11px 0 22px;font-size:clamp(1.4rem,2.2vw,1.9rem);line-height:1.2;color:#173e61}
.ion-why-science .ion-why-faqs details{border-top:1px solid rgba(20,79,119,.16);padding:15px 0}
.ion-why-science .ion-why-faqs details:last-child{border-bottom:1px solid rgba(20,79,119,.16)}
.ion-why-science .ion-why-faqs summary{cursor:pointer;font-weight:650;color:#184a70;padding-right:14px;line-height:1.4}
.ion-why-science .ion-why-faqs details p{color:#436479;font-size:.92rem;line-height:1.6;margin:10px 0 1px}
.ion-why-science .ion-why-trust{display:flex;flex-direction:column;align-items:flex-start;background:#fff;border:1px solid rgba(33,106,155,.12);border-radius:22px;padding:clamp(20px,2.4vw,32px)}
.ion-why-science .ion-why-trust p{font-size:.98rem;line-height:1.6;color:#476174;margin:0 0 24px}
.ion-why-science .ion-why-trust .btn{font-size:.92rem;min-height:46px;margin-top:auto}
.ion-why-science .ion-why-secondary{margin-top:14px;color:#12619c;text-decoration:none;font-weight:600;font-size:.9rem}
.ion-why-science .ion-why-sources{font-size:.79rem;line-height:1.6;color:var(--ink-2);margin:18px 2px 0}
.ion-why-science .ion-why-sources a{color:var(--link);text-decoration:underline;text-underline-offset:3px}
@media(max-width:1120px){.ion-why-science .ion-why-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:840px){.ion-why-science .ion-why-header,.ion-why-science .ion-why-bottom{grid-template-columns:1fr}.ion-why-science .ion-why-header{gap:24px}.ion-why-science .ion-why-ph{max-width:none}}
@media(max-width:520px){.page-home .ion-why-science{padding-block:56px}.ion-why-science h2{font-size:clamp(2.1rem,11vw,3.4rem)}.ion-why-science .ion-why-ph{padding:22px;border-radius:22px}.ion-why-science .ion-why-ph-summary{align-items:flex-start;flex-wrap:wrap;gap:14px;margin-bottom:33px}.ion-why-science .ion-why-ph-summary strong{font-size:3.4rem}.ion-why-science .ion-why-ph-pill{font-size:.73rem}.ion-why-science .ion-why-cards{grid-template-columns:1fr;gap:12px}.ion-why-science .ion-why-card{padding:23px}.ion-why-science .ion-why-bottom{padding:16px;gap:22px}.ion-why-science .ion-why-trust{padding:20px}.ion-why-science .ion-why-trust .btn{width:100%;text-align:center}.ion-why-science .ion-why-scale-labels{font-size:.7rem}}
:root[data-theme="dark"] .ion-why-science .ion-why-card,:root[data-theme="dark"] .ion-why-science .ion-why-trust{background:#1d2933;border-color:#39566b}
:root[data-theme="dark"] .ion-why-science .ion-why-card--quality{background:#203637}
:root[data-theme="dark"] .ion-why-science :is(.ion-why-card h3,.ion-why-bottom h3,.ion-why-faqs summary){color:#eef7ff}
:root[data-theme="dark"] .ion-why-science :is(.ion-why-card>p,.ion-why-faqs details p,.ion-why-trust p){color:#c6d9e4}
:root[data-theme="dark"] .ion-why-science .ion-why-bottom{background:#17232c;border-color:#365063}
@media(prefers-reduced-motion:reduce){.ion-why-science *{transition:none!important}}

/* Prevent 320px horizontal overflow in the FAQ / trust grid. */
.ion-why-science .ion-why-faqs,.ion-why-science .ion-why-trust{min-width:0}
@media(max-width:840px){.ion-why-science .ion-why-bottom{grid-template-columns:minmax(0,1fr)}}
.ion-why-science .ion-why-trust .btn{white-space:normal;max-width:100%;overflow-wrap:anywhere}


/* ION laboratory report: a first-party data presentation of a submitted test report.
   The measurements here are sample-specific, not universal product claims. */
.ion-why-science .ion-lab-report{margin:clamp(25px,4vw,48px) 0;padding:clamp(21px,2.8vw,38px);border:1px solid rgba(30,103,160,.13);border-radius:28px;background:linear-gradient(130deg,#f3faff 0%,#edf7fe 52%,#f8fcff 100%);box-shadow:0 16px 50px rgba(24,86,136,.065);min-width:0}
.ion-why-science .ion-lab-report-heading{display:flex;justify-content:space-between;gap:25px;align-items:start;margin-bottom:25px}
.ion-why-science .ion-lab-report-heading__copy{min-width:0;max-width:65ch}
.ion-why-science .ion-lab-report-heading h3{margin:10px 0 12px;color:#123c63;font-size:clamp(1.65rem,2.7vw,2.55rem);line-height:1.12;letter-spacing:-.042em}
.ion-why-science .ion-lab-report-heading p{margin:0;font-size:.98rem;line-height:1.65;color:#486b82}
.ion-why-science .ion-lab-report-heading p strong{color:#173e61}
.ion-why-science .ion-lab-report-meta{display:flex;align-items:center;gap:12px;flex-shrink:0;max-width:250px;background:#fff;padding:15px 18px;border:1px solid #dbe9f5;border-radius:19px;box-shadow:0 5px 22px rgba(43,105,158,.08)}
.ion-why-science .ion-lab-report-meta__icon{display:grid;place-items:center;flex:none;width:34px;height:34px;font-weight:900;font-size:1rem;background:#e0f7ed;color:#0e865d;border-radius:50%}
.ion-why-science .ion-lab-report-meta div{display:grid;gap:3px}
.ion-why-science .ion-lab-report-meta strong{color:#0c426c;font-size:.87rem}
.ion-why-science .ion-lab-report-meta span:not(.ion-lab-report-meta__icon){font-size:.9rem;font-weight:700;color:#205777}
.ion-why-science .ion-lab-report-meta small{font-size:.72rem;color:#6b8191;line-height:1.35}
.ion-why-science .ion-lab-metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.ion-why-science .ion-lab-metric{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid #dceaf4;border-radius:18px;padding:clamp(15px,1.65vw,21px);box-shadow:0 5px 18px rgba(14,87,148,.045)}
.ion-why-science .ion-lab-metric--ph{background:linear-gradient(150deg,#164c80,#1871aa);border-color:transparent}
.ion-why-science .ion-lab-metric-label{color:#23506e;font-size:.91rem;line-height:1.32;font-weight:750;min-height:43px}
.ion-why-science .ion-lab-metric-label span{display:block;font-size:.71rem;font-weight:500;margin-top:3px;color:#718b9a}
.ion-why-science .ion-lab-metric-measured{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;margin:18px 0 21px}
.ion-why-science .ion-lab-metric-measured strong{color:#124971;font-size:clamp(1.5rem,2.2vw,2.35rem);letter-spacing:-.055em;font-weight:800;line-height:1}
.ion-why-science .ion-lab-metric-measured span{font-size:.77rem;color:#637f8f}
.ion-why-science .ion-lab-metric-ref{display:grid;gap:5px;margin-top:auto;border-top:1px solid #dceaf4;padding-top:12px}
.ion-why-science .ion-lab-metric-ref span{color:#708898;font-size:.72rem;line-height:1.4}
.ion-why-science .ion-lab-metric-ref b{font-size:.83rem;color:#216d71;font-weight:750;line-height:1.35}
.ion-why-science .ion-lab-metric--ph :is(.ion-lab-metric-label,.ion-lab-metric-measured strong,.ion-lab-metric-ref b){color:#fff}
.ion-why-science .ion-lab-metric--ph :is(.ion-lab-metric-label span,.ion-lab-metric-measured span,.ion-lab-metric-ref span){color:#cee6fa}
.ion-why-science .ion-lab-metric--ph .ion-lab-metric-ref{border-color:rgba(255,255,255,.3)}
.ion-why-science .ion-lab-explainer{display:flex;align-items:flex-start;gap:14px;background:#e0f2ff;border:1px solid #c8e3f7;border-radius:17px;margin-top:18px;padding:16px 19px}
.ion-why-science .ion-lab-explainer__icon{width:27px;height:27px;border:2px solid #2577ad;border-radius:50%;display:grid;place-items:center;flex:none;color:#2577ad;font-weight:800;font-style:italic}
.ion-why-science .ion-lab-explainer p{margin:0;font-size:.91rem;line-height:1.6;color:#315c7b}
.ion-why-science .ion-lab-explainer strong{color:#124771}
.ion-why-science .ion-lab-footnote{font-size:.75rem;color:#648297;line-height:1.5;margin:14px 2px 0}
@media(max-width:1120px){.ion-why-science .ion-lab-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.ion-why-science .ion-lab-report-heading{flex-direction:column;gap:17px}.ion-why-science .ion-lab-report-meta{max-width:none}.ion-why-science .ion-lab-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.ion-why-science .ion-lab-report{padding:17px 13px;border-radius:22px;margin:24px 0}.ion-why-science .ion-lab-report-heading{padding:2px 3px 0}.ion-why-science .ion-lab-report-heading h3{font-size:1.75rem}.ion-why-science .ion-lab-report-heading p{font-size:.91rem}.ion-why-science .ion-lab-metrics{gap:8px}.ion-why-science .ion-lab-metric{padding:15px 12px;border-radius:15px}.ion-why-science .ion-lab-metric-measured{margin:15px 0}.ion-why-science .ion-lab-metric-measured strong{font-size:1.75rem}.ion-why-science .ion-lab-metric-label{font-size:.83rem}.ion-why-science .ion-lab-metric-label span{font-size:.68rem}.ion-why-science .ion-lab-metric-ref b{font-size:.75rem}.ion-why-science .ion-lab-metric:last-child{grid-column:span 2}.ion-why-science .ion-lab-explainer{padding:14px;gap:10px}.ion-why-science .ion-lab-explainer p{font-size:.84rem}}
@media(max-width:340px){.ion-why-science .ion-lab-metrics{grid-template-columns:1fr}.ion-why-science .ion-lab-metric:last-child{grid-column:auto}.ion-why-science .ion-lab-metric-measured{margin:10px 0}.ion-why-science .ion-lab-metric-label{min-height:0}}
:root[data-theme="dark"] .ion-why-science .ion-lab-report{background:#142736;border-color:#2f536a}
:root[data-theme="dark"] .ion-why-science .ion-lab-metric:not(.ion-lab-metric--ph),:root[data-theme="dark"] .ion-why-science .ion-lab-report-meta{background:#203441;border-color:#385368}
:root[data-theme="dark"] .ion-why-science :is(.ion-lab-report-heading h3,.ion-lab-metric-label,.ion-lab-metric-measured strong,.ion-lab-report-meta strong,.ion-lab-report-meta span:not(.ion-lab-report-meta__icon)){color:#eff8ff}
:root[data-theme="dark"] .ion-why-science :is(.ion-lab-report-heading p,.ion-lab-metric-label span,.ion-lab-metric-measured span,.ion-lab-metric-ref span,.ion-lab-footnote){color:#b7cede}
:root[data-theme="dark"] .ion-why-science .ion-lab-metric-ref b{color:#7bdbbf}
:root[data-theme="dark"] .ion-why-science .ion-lab-explainer{background:#213f52;border-color:#406682}
:root[data-theme="dark"] .ion-why-science .ion-lab-explainer p{color:#cce2f0}
:root[data-theme="dark"] .ion-why-science .ion-lab-explainer strong{color:#fff}

/* v9.2.33 — bilingual EN / বাংলা language switch: matches the glass dock. */
:root:not(.admin-theme) .ion-lang-switch{
  display:inline-flex;align-items:center;justify-content:center;gap:2px;
  flex-shrink:0;min-width:91px;height:36px;padding:3px;
  border:1px solid var(--line);border-radius:999px;
  background:color-mix(in srgb,var(--tone) 78%,transparent);
  color:var(--ink);cursor:pointer;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  transition:border-color .2s,background .2s;
}
:root:not(.admin-theme) .ion-lang-switch:hover{border-color:var(--accent)}
:root:not(.admin-theme) .ion-lang-switch:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
:root:not(.admin-theme) .ion-lang-opt{
  display:grid;place-items:center;min-width:33px;height:28px;padding:0 5px;
  font-family:Inter,'Noto Sans Bengali',sans-serif;
  font-size:11px;font-weight:700;line-height:1;white-space:nowrap;
  border-radius:999px;transition:background .2s,color .2s,box-shadow .2s;
}
:root:not(.admin-theme) .ion-lang-bn{font-family:'Noto Sans Bengali',sans-serif;font-size:11px}
:root[data-ion-lang="en"] .ion-lang-en,:root[data-ion-lang="bn"] .ion-lang-bn{
  background:var(--ink);color:var(--ground);box-shadow:0 2px 7px rgba(0,0,0,.11)
}
:root[data-ion-lang="bn"]:not(.admin-theme) body{font-family:'Noto Sans Bengali',Inter,sans-serif;line-height:1.65}
:root[data-ion-lang="bn"]:not(.admin-theme) h1,:root[data-ion-lang="bn"]:not(.admin-theme) h2,:root[data-ion-lang="bn"]:not(.admin-theme) h3,:root[data-ion-lang="bn"]:not(.admin-theme) h4{letter-spacing:normal;line-height:1.35;overflow-wrap:break-word}
:root[data-ion-lang="bn"]:not(.admin-theme) .desktop-links a,:root[data-ion-lang="bn"]:not(.admin-theme) .mobile-links a{letter-spacing:normal}
:root[data-ion-lang="bn"]:not(.admin-theme) .btn{letter-spacing:normal}
@media (max-width:1100px){:root:not(.admin-theme) .ion-lang-switch{min-width:84px}}
@media (max-width:560px){
  :root:not(.admin-theme) .brand-name{display:none}
  :root:not(.admin-theme) .ion-lang-switch{min-width:77px;height:34px}
  :root:not(.admin-theme) .ion-lang-opt{min-width:29px;padding:0 4px;font-size:10px;height:26px}
  :root:not(.admin-theme) .ion-lang-bn{font-size:10px}
}
@media (max-width:350px){
  :root:not(.admin-theme) .ion-lang-switch{min-width:73px}
  :root:not(.admin-theme) .nav-actions{gap:0}
  :root:not(.admin-theme) .theme-toggle{width:34px}
}
/* Keep the certifications CTA inside extra-narrow phones in both languages. */
@media (max-width:360px){
  :root:not(.admin-theme) .cert-all{max-width:100%;white-space:normal;text-align:center;overflow-wrap:anywhere;line-height:1.45}
}