/* Celvive staging v2. Tokens, primitives, components, pages. Sans for product and interface, serif for editorial headlines only. */
/* fonts: one face per script (unicode-range), so a page downloads only the scripts it contains (tools/build_fonts.py) */
@font-face{font-family:"Cormorant";src:url("../fonts/cormorant-v3-latin.woff2") format("woff2");font-weight:500 600;font-display:optional;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant";src:url("../fonts/cormorant-v3-latinext.woff2") format("woff2");font-weight:500 600;font-display:optional;unicode-range:U+0100-02AF,U+0218-021B,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant";src:url("../fonts/cormorant-v3-cyrillic.woff2") format("woff2");font-weight:500 600;font-display:optional;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Inter";src:url("../fonts/inter-v3-latin.woff2") format("woff2");font-weight:400 600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";src:url("../fonts/inter-v3-latinext.woff2") format("woff2");font-weight:400 600;font-display:swap;unicode-range:U+0100-02AF,U+0218-021B,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";src:url("../fonts/inter-v3-cyrillic.woff2") format("woff2");font-weight:400 600;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Inter";src:url("../fonts/inter-v3-greek.woff2") format("woff2");font-weight:400 600;font-display:swap;unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-v3-latin.woff2") format("woff2");font-weight:400 500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-v3-latinext.woff2") format("woff2");font-weight:400 500;font-display:swap;unicode-range:U+0100-02AF,U+0218-021B,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-v3-cyrillic.woff2") format("woff2");font-weight:400 500;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-v3-greek.woff2") format("woff2");font-weight:400 500;font-display:swap;unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
/* Cormorant has no Greek: Noto Serif Display (OFL) carries the Greek of the display serif, scaled toward Cormorant's proportions */
@font-face{font-family:"Cormorant";src:url("../fonts/serifgreek-v3.woff2") format("woff2");font-weight:500 600;font-display:optional;size-adjust:80%;unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:"Inter Fallback";src:local("Arial"),local("Helvetica Neue"),local("Liberation Sans");size-adjust:107%;ascent-override:90%;descent-override:22%;line-gap-override:0%}

:root{
  --paper:#F6F3EE;--paper2:#EEE9E1;--paper3:#E4DED3;--line:#D9D2C7;--line2:#C3BBAD;--white:#FFFFFF;
  --ink:#1B2A52;--ink2:#3F4C73;--ink3:#5C6483;--navy:#152147;--navy2:#1E2D5C;--navy3:#0E1733;
  --verd:#1F7A6D;--verd2:#165C52;--verd-soft:#DDEBE6;--verd-ink:#9FD5CB;
  --warn:#A3561B;--warn-soft:#F3E4D3;--err:#B3261E;--err-soft:#F6DDDA;--ok:#1F7A6D;
  --font-text:"Inter","Inter Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-display:"Cormorant","Cormorant Garamond",Georgia,serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* motion tokens, "precision in motion": three durations, three curves; everything on the site uses these */
  --m-1:150ms;            /* control feedback: hover, press, selection */
  --m-2:280ms;            /* menus, drawers, small transitions */
  --m-3:600ms;            /* section choreography, settles */
  --e-out:cubic-bezier(.2,.7,.2,1);     /* default: quick start, soft landing */
  --e-settle:cubic-bezier(.16,1,.3,1);  /* long tail, for things coming to rest */
  --e-inout:cubic-bezier(.65,0,.35,1);  /* travel between two resting states */
  --ease:var(--e-out);--t-state:var(--m-1);--t-enter:var(--m-2);--t-hero:var(--m-3);
  --maxw:1280px;--gutter:clamp(20px,4vw,48px);--r:4px;--r-lg:8px;
  --header-h:64px;--shadow:0 1px 2px rgba(21,33,71,.06),0 12px 32px -16px rgba(21,33,71,.18);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);background:var(--paper)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font:400 16px/1.55 var(--font-text);color:var(--ink);background:var(--paper);min-height:100vh;display:flex;flex-direction:column;font-feature-settings:"ss01","cv11";text-rendering:optimizeLegibility}
@media (min-width:900px){body{font-size:17px}}
main{flex:1}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:var(--verd);text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--verd2)}
h1,h2,h3,h4{margin:0 0 .5em;color:var(--ink);line-height:1.12;letter-spacing:-.015em;font-family:var(--font-text);font-weight:600}
h1{font-size:clamp(32px,4.4vw,52px)}
h2{font-size:clamp(26px,3vw,36px)}
h3{font-size:clamp(19px,1.8vw,22px)}
.serif{font-family:var(--font-display);font-weight:500;letter-spacing:-.012em;line-height:1.05}
h1.serif{font-size:clamp(40px,4.9vw,68px)}
h2.serif{font-size:clamp(34px,4vw,52px)}
.h-sm{font-size:19px;font-weight:600;margin:0}
p{margin:0 0 1em}
.lead{font-size:clamp(17px,1.5vw,20px);color:var(--ink2);max-width:60ch;line-height:1.5}
.mono,.price,.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.eyebrow{font:500 12px/1.2 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin:0 0 14px}
.muted{color:var(--ink3)}
.small{font-size:14px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:min(100% - 2*var(--gutter),var(--maxw));margin-inline:auto}
.section{padding-block:clamp(56px,7vw,104px)}
.section--tight{padding-block:clamp(36px,5vw,64px)}
.section--white{background:var(--white)}
.section--paper2{background:var(--paper2)}
.section--navy{background:var(--navy);color:var(--paper)}
.section--navy h1,.section--navy h2,.section--navy h3{color:var(--paper)}
.section--navy .eyebrow{color:#B6BED6}
.section--navy .lead{color:#C9D0E6}
.section--navy a{color:var(--verd-ink)}
.section-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 32px;margin-bottom:clamp(22px,3vw,36px)}
.section-head h2{margin:0}
.section-head .lead{margin:0}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
.section--navy :focus-visible,.hero :focus-visible{outline-color:#F6F3EE}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:var(--paper);padding:10px 14px;z-index:100;border-radius:var(--r)}
.skip:focus{top:12px}
[hidden]{display:none!important}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:var(--r);border:1px solid transparent;font:500 15px/1 var(--font-text);text-decoration:none;cursor:pointer;transition:background var(--t-state) var(--ease),color var(--t-state) var(--ease),transform var(--t-state) var(--ease),border-color var(--t-state) var(--ease),box-shadow var(--t-state) var(--ease);white-space:nowrap}
.btn .ic{width:18px;height:18px}
.btn--primary{background:var(--verd);color:#fff;border-color:var(--verd)}
.btn--primary:hover{background:var(--verd2);border-color:var(--verd2);color:#fff;transform:translateY(-1px);box-shadow:0 6px 16px -8px rgba(22,92,82,.6)}
.btn--secondary{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--secondary:hover{background:var(--ink);color:var(--paper)}
.section--navy .btn--secondary,.hero .btn--secondary{color:var(--paper);border-color:rgba(246,243,238,.6)}
.section--navy .btn--secondary:hover,.hero .btn--secondary:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line2)}
.btn--ghost:hover{border-color:var(--ink)}
.btn--white{background:var(--white);color:var(--ink);border-color:var(--line)}
.btn--white:hover{border-color:var(--ink)}
.btn--block{width:100%}
.btn--sm{min-height:40px;padding:0 16px;font-size:14px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn--primary.is-done{background:var(--ink);border-color:var(--ink)}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:500;text-decoration:none;color:var(--ink)}
.link-arrow .ic{width:18px;height:18px;transition:transform var(--t-state) var(--ease)}
.link-arrow:hover{color:var(--verd)}
.link-arrow:hover .ic{transform:translateX(3px)}
.section--navy .link-arrow{color:var(--paper)}
.section--navy .link-arrow:hover{color:var(--verd-ink)}
.icon-btn{display:inline-flex;align-items:center;gap:8px;min-width:44px;min-height:44px;padding:0 8px;background:none;border:0;color:var(--ink);cursor:pointer;border-radius:var(--r);font:500 14px var(--font-text);text-decoration:none;position:relative}
.icon-btn:hover{color:var(--verd)}
.icon-btn .ic{width:22px;height:22px}
.icon-btn__label{display:none}
@media (min-width:900px){.icon-btn__label{display:inline}}

/* forms */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.field label,.field legend{font-weight:500;font-size:14px}
.field .hint{font-size:13px;color:var(--ink3)}
.input,.select,.textarea{width:100%;min-height:48px;padding:10px 14px;border:1px solid var(--line2);border-radius:var(--r);background:#fff;color:var(--ink);font:400 16px var(--font-text);transition:border-color var(--t-state) var(--ease)}
.textarea{min-height:140px;resize:vertical;line-height:1.5}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B2A52' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:18px;padding-right:40px}
.input:focus,.select:focus,.textarea:focus{outline:2px solid var(--ink);outline-offset:2px;border-color:var(--ink)}
.input[aria-invalid="true"],.select[aria-invalid="true"],.textarea[aria-invalid="true"]{border-color:var(--err)}
.field-error{font-size:13px;color:var(--err);min-height:1.2em}
.form-grid{display:grid;grid-template-columns:1fr;gap:0 20px}
@media (min-width:640px){.form-grid{grid-template-columns:1fr 1fr}.form-grid .span2{grid-column:1/-1}}
.check{display:flex;gap:12px;align-items:flex-start;font-size:15px}
.check input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--verd);flex:none}

/* notices */
.notice{display:flex;gap:12px;padding:14px 16px;background:var(--paper2);border-left:3px solid var(--verd);border-radius:var(--r);font-size:15px;margin:0 0 20px}
.notice .ic{width:20px;height:20px;flex:none;margin-top:2px;color:var(--verd)}
.notice--warn{border-left-color:var(--warn);background:var(--warn-soft)}
.notice--warn .ic{color:var(--warn)}
.notice--err{border-left-color:var(--err);background:var(--err-soft)}
.notice--err .ic{color:var(--err)}
.notice p:last-child{margin:0}

/* header */
.ruo-bar{display:flex;justify-content:center;gap:24px;padding:7px var(--gutter);background:var(--navy3);color:#C9D0E6;font:500 11.5px/1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;text-align:center}
.ruo-bar__staging{color:#F6F3EE;opacity:.6}
@media (max-width:640px){.ruo-bar{font-size:10.5px;gap:12px}.ruo-bar__staging{display:none}}
.site-header{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-header__row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;min-height:var(--header-h)}
@media (min-width:900px){.site-header__row{grid-template-columns:auto auto 1fr auto}}
.menu-btn{margin-left:-8px}
@media (min-width:900px){.menu-btn{display:none}}
.brand{display:inline-flex;align-items:center;text-decoration:none;color:var(--ink)}
.wordmark{font-family:var(--font-display);font-weight:600;font-size:26px;letter-spacing:.14em;line-height:1;color:currentColor}
.brand--small .wordmark{font-size:20px}
.brand--footer .wordmark{font-size:30px}
.primary-nav{display:none;gap:4px;justify-self:center}
@media (min-width:900px){.primary-nav{display:flex}}
.primary-nav a{position:relative;padding:10px 12px;font-size:14.5px;font-weight:500;color:var(--ink);text-decoration:none;border-radius:2px}
.primary-nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;background:var(--verd);transform:scaleX(0);transform-origin:left;transition:transform var(--t-state) var(--ease)}
.primary-nav a:hover::after,.primary-nav a[aria-current="page"]::after{transform:scaleX(1)}
.site-header__tools{display:flex;justify-content:end;gap:2px;margin-right:-6px}
.cart-count{position:absolute;top:4px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--verd);color:#fff;font:600 11px/18px var(--font-mono);text-align:center}
@media (min-width:900px){.cart-count{position:static;margin-left:2px}}
.cart-count.bump{animation:bump 360ms var(--ease)}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}

/* overlays */
.mobile-menu{position:fixed;inset:0;z-index:60}
.mobile-menu__scrim,.drawer__scrim,.dialog__scrim{position:absolute;inset:0;background:rgba(14,23,51,.5);opacity:0;transition:opacity var(--t-state) var(--ease)}
.mobile-menu__panel{position:absolute;top:0;bottom:0;left:0;width:min(88vw,360px);background:var(--paper);padding:12px 20px 32px;display:flex;flex-direction:column;gap:2px;overflow:auto;transform:translateX(-100%);transition:transform var(--t-enter) var(--ease)}
.mobile-menu__head{display:flex;justify-content:space-between;align-items:center;margin:0 -8px 12px 0;min-height:52px}
.mobile-menu__panel a{display:block;padding:14px 4px;font-size:20px;font-weight:500;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.mobile-menu__ruo{margin-top:auto;padding-top:24px;font:500 12px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.mobile-menu.is-open .mobile-menu__scrim,.drawer.is-open .drawer__scrim,.dialog.is-open .dialog__scrim{opacity:1}
.mobile-menu.is-open .mobile-menu__panel{transform:none}
.drawer{position:fixed;inset:0;z-index:70}
.drawer__panel{position:absolute;top:0;right:0;bottom:0;width:min(100vw,440px);background:var(--paper);display:flex;flex-direction:column;transform:translateX(100%);transition:transform var(--t-enter) var(--ease);box-shadow:-1px 0 0 var(--line)}
.drawer.is-open .drawer__panel{transform:none}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 12px 24px;border-bottom:1px solid var(--line)}
.drawer__body{flex:1;overflow:auto;padding:8px 24px}
.drawer__foot{padding:16px 24px 24px;border-top:1px solid var(--line);background:var(--paper2)}
.cart-line{display:grid;grid-template-columns:64px 1fr auto;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);align-items:start}
.cart-line__img{width:64px;height:80px;background:#D8D4D0;border-radius:var(--r);overflow:hidden}
.cart-line__img img{width:100%;height:100%;object-fit:cover}
.cart-line__name{font-weight:600;margin:0;line-height:1.3}
.cart-line__meta{font-size:13px;color:var(--ink3);margin:2px 0 8px}
.cart-line__price{text-align:right;font-weight:500}
.cart-line__remove{background:none;border:0;padding:4px 0;color:var(--ink3);font:400 13px var(--font-text);cursor:pointer;text-decoration:underline;text-underline-offset:.15em}
.cart-line__remove:hover{color:var(--err)}
.cart-line.is-leaving{opacity:0;transform:translateX(16px);transition:opacity var(--t-state) var(--ease),transform var(--t-state) var(--ease)}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line2);border-radius:var(--r);background:#fff}
.stepper button{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:none;border:0;color:var(--ink);cursor:pointer;border-radius:var(--r)}
.stepper button:hover{background:var(--paper2)}
.stepper button .ic{width:18px;height:18px}
.stepper input{width:44px;height:44px;border:0;text-align:center;font:500 16px var(--font-mono);color:var(--ink);background:transparent;-moz-appearance:textfield}
.stepper input::-webkit-inner-spin-button,.stepper input::-webkit-outer-spin-button{appearance:none;margin:0}
.stepper--sm button,.stepper--sm input{width:36px;height:36px}
.totals{display:grid;gap:8px;font-size:15px}
.totals div{display:flex;justify-content:space-between;gap:12px}
.totals .is-total{font-weight:600;font-size:17px;padding-top:8px;border-top:1px solid var(--line2)}
.empty{text-align:center;padding:48px 16px;color:var(--ink2)}
.empty .ic{width:40px;height:40px;margin:0 auto 12px;color:var(--ink3)}
.empty h2,.empty h3{margin-bottom:6px}
.dialog{position:fixed;inset:0;z-index:70}
.dialog__panel{position:absolute;left:50%;top:min(12vh,96px);transform:translate(-50%,8px);width:min(100% - 24px,680px);background:var(--paper);border-radius:var(--r-lg);box-shadow:0 24px 64px rgba(14,23,51,.3),0 0 0 1px var(--line);opacity:0;transition:opacity var(--t-state) var(--ease),transform var(--t-enter) var(--ease);max-height:min(76vh,640px);display:flex;flex-direction:column}
.dialog.is-open .dialog__panel{opacity:1;transform:translate(-50%,0)}
.search-form{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 18px;border-bottom:1px solid var(--line)}
.search-form .ic{width:22px;height:22px;color:var(--ink3)}
.search-form input{flex:1;min-height:52px;border:0;background:none;font:400 18px var(--font-text);color:var(--ink);outline:0}
.search-results{overflow:auto;padding:8px}
.search-results__group{padding:10px 12px 4px;font:500 11px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.search-hit{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:8px 12px;border-radius:var(--r);color:var(--ink);text-decoration:none}
.search-hit:hover,.search-hit:focus-visible,.search-hit.is-active{background:var(--paper2)}
.search-hit img{height:44px;width:36px;object-fit:cover;border-radius:2px;margin:auto}
.search-hit b{display:block;font-weight:600}
.search-hit span{font-size:13px;color:var(--ink3)}
.search-hit .price{font-size:14px}
.search-hint{padding:16px 12px;color:var(--ink3);font-size:14px}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);z-index:80;background:var(--navy3);color:var(--paper);padding:12px 18px;border-radius:var(--r);font-size:15px;opacity:0;transition:opacity var(--t-state) var(--ease),transform var(--t-enter) var(--ease);display:flex;gap:10px;align-items:center;max-width:calc(100% - 32px);box-shadow:0 12px 32px -8px rgba(14,23,51,.5)}
.toast .ic{width:18px;height:18px;color:var(--verd-ink)}
.toast.is-on{opacity:1;transform:translate(-50%,0)}
@media (max-width:899px){.page-product .toast{bottom:84px}}

/* reveal: content starts visible; JS only adds a settle to elements still below the fold at load.
   A revealed block moves as one; its eyebrow, heading and lead follow 70 ms apart (set by motion.js as --i). */
.reveal{transition:opacity 480ms var(--e-settle),transform 480ms var(--e-settle);transition-delay:var(--d,0ms)}
html.js .reveal.pending{opacity:0;transform:translateY(14px)}
html.js .reveal.in{opacity:1;transform:none}
html.js .reveal.pending .rv-item{opacity:0;transform:translateY(10px)}
html.js .reveal.in .rv-item{opacity:1;transform:none;transition:opacity 480ms var(--e-settle),transform 480ms var(--e-settle);transition-delay:calc(var(--d,0ms) + var(--i,0)*60ms)}
/* fast scrolling (set by app.js from scroll velocity): whatever enters the viewport is simply there */
html.js .reveal.is-instant,html.js .reveal.is-instant .rv-item,html.js .reveal.is-instant .list-rules li,html.js .reveal.is-instant img{transition:none!important}
html.js .reveal.pending :is(.split__media,.format__img,.research-row__media,.area-head__media) img{transform:scale(1.04)}
html.js .reveal.in :is(.split__media,.format__img,.research-row__media,.area-head__media) img{transform:none;transition:transform 1000ms var(--e-settle);transition-delay:var(--d,0ms)}
@media (prefers-reduced-motion:reduce){.reveal,.reveal .rv-item{transform:none!important;opacity:1!important;transition:none}}

/* hero: boxed and centred; the artwork and its caption are one figure; the blend lives in empty background only */
.hero{position:relative;background:#081024;color:var(--paper);overflow:hidden}
.hero__box{position:relative;width:min(100% - 2*clamp(16px,3vw,48px),1440px);margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr);align-items:center}
@media (min-width:900px){.hero__box{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(16px,3vw,48px);min-height:min(72vh,620px)}}
.hero__copy{position:relative;z-index:2;max-width:560px;padding:clamp(36px,5vw,64px) 0 clamp(36px,5vw,64px) clamp(0px,1.5vw,24px)}
.hero__copy .eyebrow{color:var(--verd-ink)}
.hero__copy h1{color:var(--paper);margin-bottom:16px;text-wrap:balance;max-width:11.5em}
.hero__copy .lead{color:#C9D0E6;margin-bottom:24px;max-width:40ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center}
.hero__link{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:#C9D0E6;text-decoration:none;font-weight:500;font-size:15px}
.hero__link .ic{width:16px;height:16px}
.hero__link:hover{color:var(--paper);text-decoration:underline;text-underline-offset:.2em}
.hero__figure{margin:0;position:relative;display:flex;flex-direction:column;align-items:flex-end;min-width:0}
.hero__art{position:relative;height:min(62vh,560px);width:100%;overflow:hidden}
/* the scene (photograph + its blend) is one unit: the pointer-depth transform lives here, so vials, reflections and shadows move together */
.hero__scene{position:absolute;inset:0;transform:translate3d(var(--px,0px),var(--py,0px),0) scale(1.02);transition:transform 480ms var(--e-out);will-change:transform}
.hero__art img{position:absolute;right:0;top:0;height:100%;width:auto;max-width:none}
/* products start at 55 percent of the artwork width; the blend stops well before them */
.hero__blend{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#081024 0%,rgba(8,16,36,.85) 18%,rgba(8,16,36,0) 42%)}
/* right edge: the lit tabletop cannot match the flat navy, so the last 6 percent (table surface only, the nearest vial ends at 10 percent) dissolves into it */
@media (min-width:900px){.hero__art::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(270deg,#081024 0%,rgba(8,16,36,.7) 2.5%,rgba(8,16,36,0) 6.5%)}}
.hero__caption{align-self:flex-end;padding:10px 4px 0;font:400 11px/1.3 var(--font-mono);color:#9AA3C2;letter-spacing:.04em;text-align:right}
.hero__caption--m{display:none}
@media (min-width:900px) and (max-width:1199px){.hero__art{height:min(56vh,480px)}}
@media (max-width:899px){
  .hero__box{display:flex;flex-direction:column;align-items:stretch;width:min(100% - 32px,100%)}
  .hero__copy{padding:22px 0 4px;max-width:none}
  .hero__copy h1{font-size:clamp(34px,9.6vw,44px);margin-bottom:10px;max-width:none}
  .hero__copy .lead{font-size:16px;margin-bottom:16px}
  .hero__copy .eyebrow{margin-bottom:10px}
  .hero__figure{align-items:stretch}
  .hero__art{height:auto;aspect-ratio:5/6;width:100%}
  .hero__scene{transform:none;transition:none;will-change:auto}
  .hero__art img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 70%}
  /* vertical seam only, through the artwork's own dark top; the product sits well below it */
  .hero__blend{background:linear-gradient(180deg,#081024 0%,rgba(8,16,36,0) 10%)}
  .hero__caption{text-align:right;padding:8px 2px 12px;font-size:10.5px}
  .hero__caption--d{display:none}.hero__caption--m{display:inline}
}
/* facts strip */
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border-block:1px solid var(--line)}
@media (min-width:900px){.facts{grid-template-columns:repeat(4,minmax(0,1fr))}}
.fact{padding:22px 20px;background:var(--paper)}
.fact b{display:block;font:500 clamp(20px,2.2vw,26px)/1.1 var(--font-mono);color:var(--ink);margin-bottom:6px;letter-spacing:-.02em}
.fact span{font-size:14px;color:var(--ink3)}

/* research areas: one vertical sequence on phones (unchanged); two-column cards on tablets from 700 px; three columns on desktop from 1100 px */
.areas{display:grid;grid-template-columns:1fr;gap:10px}
.area{display:grid;grid-template-columns:30px minmax(0,1fr) 84px;grid-template-areas:"mark text art" "mark meta art";gap:6px 12px;align-items:center;padding:14px 14px 14px 16px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);color:var(--ink);text-decoration:none;position:relative;overflow:hidden}
.area .mark{grid-area:mark;width:26px;height:26px;color:var(--verd);align-self:start;margin-top:3px;transition:color var(--t-state) var(--ease)}
.area__text{grid-area:text;min-width:0}
.area b{display:block;font-size:16px;font-weight:600;margin-bottom:2px;line-height:1.25}
.area span.d{font-size:13.5px;color:var(--ink3);display:block;line-height:1.4}
.area__meta{grid-area:meta;display:flex;justify-content:space-between;align-items:center;gap:10px}
.area .num{font-size:12px;color:var(--ink3);display:inline-block}
.area__cta{display:inline-flex;align-items:center;gap:6px;font-weight:500;font-size:14px;color:var(--verd)}
.area__cta .ic{width:16px;height:16px;transition:transform var(--m-2) var(--e-out)}
.area__art{grid-area:art;display:block;aspect-ratio:1;border-radius:var(--r);overflow:hidden;background:var(--paper2);align-self:center}
.area__art img{width:100%;height:100%;object-fit:cover;transition:transform var(--m-3) var(--e-settle)}
/* card layout from 700 px: artwork across the top, mark beside the name, description, then count and Explore pinned to
   an aligned bottom row; rows of the grid stretch, so cards in a row share a height and their links line up */
@media (min-width:700px){
  .areas{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .area{grid-template-columns:28px minmax(0,1fr);grid-template-rows:auto 1fr auto;grid-template-areas:"art art" "mark text" "meta meta";gap:14px 12px;align-items:start;padding:0 20px 18px}
  .area .mark{width:28px;height:28px;align-self:start;margin-top:2px}
  .area b{font-size:17px;margin-bottom:4px}
  .area span.d{font-size:14px}
  .area__meta{align-self:end;padding-top:12px;border-top:1px solid var(--line);transition:border-color var(--m-2) var(--e-out)}
  .area:hover .area__meta,.area:focus-visible .area__meta{border-color:#2A3868}
  .area__art{aspect-ratio:2.2/1;border-radius:0;margin:0 -20px 2px;align-self:start}
}
@media (min-width:1100px){
  .areas{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .area{padding:0 22px 20px;gap:16px 12px}
  .area__art{margin:0 -22px 4px}
}
.area:hover,.area:focus-visible{background:var(--navy);border-color:var(--navy);color:var(--paper)}
.area:hover .mark,.area:focus-visible .mark{color:var(--verd-ink)}
.area:hover span.d,.area:hover .num,.area:focus-visible span.d,.area:focus-visible .num{color:#C9D0E6}
.area:hover .area__cta,.area:focus-visible .area__cta{color:var(--verd-ink)}
.area:hover .area__cta .ic,.area:focus-visible .area__cta .ic{transform:translateX(3px)}
.area:hover .area__art img{transform:scale(1.04)}

/* product cards */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px}
@media (min-width:760px){.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 22px}}
@media (min-width:1100px){.grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 24px}.grid--6{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{position:relative;display:flex;flex-direction:column;gap:10px;min-height:100%}
.card:hover .card__name a,.card:focus-within .card__name a{color:var(--verd)}
.card__media{position:relative;display:block;background:#D8D4D0;border-radius:6px;overflow:hidden;aspect-ratio:3/4}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform 500ms var(--ease)}
.card:hover .card__media img{transform:scale(1.02)}
.card__media--pen{aspect-ratio:2/1}.card__media--pen img{object-fit:cover}
@media (min-width:760px){.card__media--pen{aspect-ratio:3/4}.card__media--pen img{object-fit:contain;background:#D8D4D0}}
.card__media a::after{content:"";position:absolute;inset:0}
.card__body{display:flex;flex-direction:column;gap:3px;flex:1;padding:2px 2px 0}
.card__kind{font:500 10.5px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.card__name{font-size:16px;font-weight:600;line-height:1.25;margin:0;letter-spacing:-.01em}
@media (min-width:760px){.card__name{font-size:17px}}
.card__name a{color:var(--ink);text-decoration:none;transition:color var(--t-state) var(--ease)}
.card__name a::after{content:"";position:absolute;inset:0;border-radius:6px}
.card__short{font-size:13px;color:var(--ink2);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0}
.card__opts{font:400 12px var(--font-mono);color:var(--ink3);margin-top:2px}
.card__foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:auto;padding-top:8px;flex-wrap:wrap}
@media (max-width:520px){.card__foot{flex-direction:column;align-items:flex-start;gap:6px}.card__act--add{align-self:stretch;justify-content:center;min-height:40px}}
.card__price{font-weight:500;font-size:15px;white-space:nowrap}
.card__price small{font:400 11.5px var(--font-text);color:var(--ink3)}
.card__act{position:relative;z-index:2;min-height:36px;padding:0 4px;font-size:13.5px;border-radius:var(--r);display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--ink);cursor:pointer;text-decoration:none;font-weight:500;transition:color var(--t-state) var(--ease)}
.card__act:hover{color:var(--verd)}
.card__act:hover .ic{transform:translateX(2px)}
.card__act .ic{transition:transform var(--t-state) var(--ease)}
.card__act--add{background:var(--verd);color:#fff;padding:0 14px}
.card__act--add:hover{background:var(--verd2);color:#fff}
.card__act .ic{width:15px;height:15px}
.card--out .card__media img{opacity:.5}
.card.is-hidden{display:none}
.badge{display:inline-block;padding:3px 8px;border-radius:2px;font:500 11px/1.4 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;background:var(--paper2);color:var(--ink2)}
.badge--ok{background:var(--verd-soft);color:var(--verd2)}
.badge--warn{background:var(--warn-soft);color:var(--warn)}
/* list view: same cards, reflowed */
.grid.is-list{grid-template-columns:1fr;gap:0;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);overflow:hidden}
.grid.is-list .card__body{padding:0}
.grid.is-list .card{flex-direction:row;align-items:center;gap:16px;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:10px 14px;min-height:0;transform:none;box-shadow:none}
.grid.is-list .card:last-child{border-bottom:0}
.grid.is-list .card__media{height:64px;width:52px;flex:none;aspect-ratio:auto;border-radius:3px}
.grid.is-list .card__media--pen{width:96px;height:48px}
.grid.is-list .card__media img{object-fit:cover}
.grid.is-list .card__body{flex-direction:row;align-items:center;gap:16px;flex:1;min-width:0}
.grid.is-list .card__kind{order:2;min-width:120px}
.grid.is-list .card__name{flex:0 0 200px;font-size:15px}
.grid.is-list .card__short{display:none}
.grid.is-list .card__opts{margin:0;flex:1}
.grid.is-list .card__foot{margin:0;padding:0;border:0;gap:16px}
@media (max-width:759px){.grid.is-list .card{align-items:flex-start}.grid.is-list .card__body{display:grid;grid-template-columns:1fr auto;gap:2px 12px}.grid.is-list .card__kind{display:none}.grid.is-list .card__name{flex:none;grid-column:1}.grid.is-list .card__opts{grid-column:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.grid.is-list .card__foot{grid-column:2;grid-row:1/3;flex-direction:column;align-items:flex-end;gap:6px}}

/* catalog */
.catalog-head{padding-block:clamp(22px,3vw,34px) 14px}
.catalog-head h1{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;font-size:clamp(26px,3vw,34px)}
.catalog-head__count{font:400 14px var(--font-mono);color:var(--ink3);letter-spacing:0}
.catalog-layout{display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:1000px){.catalog-layout{grid-template-columns:230px 1fr;gap:40px;align-items:start}}
.filters{position:sticky;top:calc(var(--header-h) + 12px)}
@media (max-width:999px){.filters{position:static}}
.filters__group{padding:14px 0;border-top:1px solid var(--line)}
.filters__group:first-child{border-top:0}
.filters__group legend,.filters__group h2{font:500 11.5px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin:0 0 10px;padding:0}
.filters fieldset{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border:1px solid var(--line2);border-radius:18px;background:var(--white);font-size:13.5px;color:var(--ink);cursor:pointer;transition:background var(--t-state) var(--ease),border-color var(--t-state) var(--ease),color var(--t-state) var(--ease);text-decoration:none}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip:hover{border-color:var(--ink)}
.chip.is-on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip:has(:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
.chip .num{font-size:12px;opacity:.7}
.catalog-toolbar{display:flex;flex-wrap:wrap;gap:10px 16px;justify-content:space-between;align-items:center;padding:0 0 14px}
.catalog-toolbar .count{font:400 13px var(--font-mono);color:var(--ink3)}
.catalog-toolbar .select{min-height:40px;width:auto;padding-block:6px;font-size:14px}
.catalog-search{display:flex;align-items:center;gap:8px;border:1px solid var(--line2);border-radius:var(--r);background:#fff;padding:0 10px}
.catalog-search .ic{width:18px;height:18px;color:var(--ink3)}
.catalog-search input{border:0;min-height:40px;width:min(52vw,240px);font:400 15px var(--font-text);background:none;color:var(--ink);outline:0}
.view-toggle{display:inline-flex;border:1px solid var(--line2);border-radius:var(--r);overflow:hidden;background:#fff}
.view-toggle button{min-height:40px;min-width:44px;padding:0 10px;border:0;background:none;color:var(--ink3);cursor:pointer;display:inline-flex;align-items:center;gap:6px;font:500 13px var(--font-text)}
.view-toggle button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.view-toggle .ic{width:16px;height:16px}
.active-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-bottom:14px}
.active-filters .chip{min-height:30px;font-size:12.5px}
.filters-toggle{display:inline-flex}
@media (min-width:1000px){.filters-toggle{display:none}}
@media (max-width:999px){.filters[data-collapsed="true"] .filters__groups{display:none}.filters__groups{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:4px 16px;margin-top:10px}}
.catalog-empty{padding:48px 24px;text-align:center;border:1px dashed var(--line2);border-radius:var(--r-lg);color:var(--ink2)}
.catalog-empty h2{margin-bottom:6px;font-size:22px}

/* product page */
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--ink3);padding:14px 0 4px;list-style:none;margin:0}
.crumbs a{color:var(--ink3);text-decoration:none}
.crumbs a:hover{color:var(--verd);text-decoration:underline}
.crumbs li+li::before{content:"/";margin-right:6px;opacity:.6}
.pdp{display:grid;grid-template-columns:1fr;gap:20px;padding-block:8px 40px}
@media (min-width:900px){.pdp{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:start}.pdp__head{display:contents}.pdp__head--d{display:block}}
.pdp__head h1{margin-bottom:6px;font-size:clamp(28px,3.4vw,44px)}
.pdp__head .eyebrow{margin-bottom:10px}
.pdp__tag{font-size:16px;color:var(--ink2);margin:0 0 8px;max-width:48ch}
@media (max-width:899px){.pdp__head--d{display:none}.pdp__tag{font-size:15.5px}}
@media (min-width:900px){.pdp__head--m{display:none}}
.pdp__gallery{position:sticky;top:calc(var(--header-h) + 16px)}
@media (max-width:899px){.pdp__gallery{position:static}}
.pdp__stage{position:relative;background:#D8D4D0;border-radius:var(--r-lg);aspect-ratio:1;overflow:hidden}
.pdp__stage img{width:100%;height:100%;object-fit:cover}
/* variant change: the outgoing image stays on top (ghost) while the new one sits underneath, then the ghost dissolves. No empty frame. */
.pdp__ghost{position:absolute;inset:0;opacity:1;pointer-events:none}
.pdp__ghost.is-fading{opacity:0;transition:opacity 320ms var(--e-out)}
.pdp__stage [data-stage-img].is-incoming{animation:stageIn 480ms var(--e-settle) both}
@keyframes stageIn{from{transform:scale(1.015)}to{transform:none}}
/* a change of shape (vial to pen): the old silhouette leaves first, the new one arrives through the shared backdrop, so labels never double */
.pdp__ghost.is-fading.is-fast{transition-duration:200ms}
.pdp__stage [data-stage-img].is-incoming-seq{animation:stageInSeq 300ms var(--e-out) 90ms both}
@keyframes stageInSeq{from{opacity:0;transform:scale(1.01)}to{opacity:1;transform:none}}
.pdp__stage--pen{aspect-ratio:2/1}
@media (max-width:899px){.pdp__stage{aspect-ratio:4/3;max-height:320px;padding:4% 0}.pdp__stage img{object-fit:contain}.pdp__stage--pen{aspect-ratio:2/1;max-height:200px;padding:3% 2%}}
.pdp__thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.pdp__thumb{width:60px;height:72px;border:1px solid var(--line);background:#D8D4D0;padding:0;cursor:pointer;border-radius:var(--r);display:flex;align-items:center;justify-content:center;overflow:hidden}
.pdp__thumb img{width:100%;height:100%;object-fit:cover}
.pdp__thumb--pen{width:96px;height:48px}
.pdp__thumb.is-on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.pdp__caption{font:400 12px var(--font-mono);color:var(--ink3);margin-top:8px}
.pdp__price{display:flex;align-items:baseline;gap:10px;margin:4px 0 2px}
.pdp__price .price{font-size:28px;font-weight:500}
.pdp__price small{color:var(--ink3);font-size:14px}
.opts{margin:18px 0 0}
.opts__label{display:flex;justify-content:space-between;font-size:14px;font-weight:500;margin-bottom:10px}
.opts__label span{color:var(--ink3);font-weight:400}
.pills{display:flex;flex-wrap:wrap;gap:8px;border:0;padding:0;margin:0}
.pill{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 14px;border:1px solid var(--line2);border-radius:var(--r);background:#fff;color:var(--ink);font-size:14.5px;cursor:pointer;transition:border-color var(--t-state) var(--ease),background var(--t-state) var(--ease),color var(--t-state) var(--ease),transform var(--t-state) var(--ease)}
.pill input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.pill:hover{border-color:var(--ink)}
.pill.is-on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.pill:has(:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
.pill .price{font-size:13px;opacity:.75}
.pill .ic{width:16px;height:16px}
.pill--out{color:var(--ink3);border-style:dashed}
.buy-row{display:flex;gap:12px;align-items:stretch;margin:18px 0 10px}
.buy-row .btn{flex:1}
.stock{display:inline-flex;align-items:center;gap:8px;font-size:14px;margin:4px 0 0}
.stock::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok)}
.stock.is-out::before{background:var(--err)}
.pdp__meta{border-top:1px solid var(--line);padding:16px 0 0;display:grid;gap:10px;font-size:14px;margin-top:8px}
.pdp__meta div{display:flex;gap:12px;align-items:start}
.pdp__meta .ic{width:20px;height:20px;flex:none;color:var(--verd);margin-top:1px}
.pdp__meta a{color:var(--ink)}
.pdp__gap{display:flex;gap:10px;align-items:start;padding:12px 14px;background:var(--warn-soft);border-left:3px solid var(--warn);border-radius:var(--r);font-size:14px;margin:12px 0 0}
.pdp__gap .ic{width:18px;height:18px;flex:none;color:var(--warn);margin-top:2px}
.spec{width:100%;border-collapse:collapse;font-size:15px;margin:0 0 8px}
.spec th,.spec td{text-align:left;padding:10px 0;border-bottom:1px solid var(--line);vertical-align:top}
.spec th{font-weight:500;width:36%;color:var(--ink2);padding-right:16px}
.spec td{font-family:var(--font-text);font-size:15px}
.spec td.mono{font-family:var(--font-mono);font-size:14px}
.spec td .pending{color:var(--warn);font-weight:500}
.pdp__sections{padding-block:8px 64px;display:grid;gap:clamp(32px,5vw,56px)}
@media (min-width:900px){.pdp__sections{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px}}
.pdp__section h2{font-size:clamp(22px,2.2vw,28px);margin-bottom:14px}
.pdp__section ul{padding-left:18px;margin:0 0 1em}
.pdp__section li{margin-bottom:6px}
.refs{list-style:none;padding:0;margin:0}
.refs li{padding:10px 0;border-top:1px solid var(--line);font-size:14.5px;line-height:1.45}
.refs li:last-child{border-bottom:1px solid var(--line)}
.refs a{color:var(--ink);text-decoration:none;font-weight:500}
.refs a:hover{color:var(--verd);text-decoration:underline}
.refs .src{display:block;font:400 12.5px var(--font-mono);color:var(--ink3);margin-top:2px}
.related{padding-block:0 clamp(56px,8vw,96px)}
.sticky-buy{position:fixed;left:0;right:0;bottom:0;z-index:35;display:flex;gap:10px;align-items:center;padding:10px var(--gutter);padding-bottom:max(10px,env(safe-area-inset-bottom));background:color-mix(in srgb,var(--paper) 96%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--line);transform:translateY(100%);transition:transform var(--t-enter) var(--ease)}
.sticky-buy.is-on{transform:none}
.sticky-buy__info{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.sticky-buy__info b{font:600 14px var(--font-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sticky-buy__info span{font:400 12px var(--font-mono);color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sticky-buy .price{font-size:15px;font-weight:500}
@media (min-width:900px){.sticky-buy{display:none}}
@media (max-width:899px){.page-product main{padding-bottom:72px}}
@media (prefers-reduced-motion:reduce){.sticky-buy{transition:none}}

/* editorial blocks */
.split{display:grid;grid-template-columns:1fr;gap:28px;align-items:center}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr;gap:64px}}
.split--rev>:first-child{order:2}
@media (max-width:899px){.split--rev>:first-child{order:0}}
.split__media{border-radius:var(--r-lg);overflow:hidden;background:var(--paper2)}
.split__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2}
.split__text h2{margin-bottom:14px}
.list-rules{list-style:none;padding:0;margin:0}
.list-rules{--rule:var(--line)}
.list-rules li{padding:14px 0;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;background:linear-gradient(var(--rule),var(--rule)) left top/100% 1px no-repeat}
.list-rules li:last-child{border-bottom:1px solid var(--rule)}
/* rules draw into place, 90 ms apart, when the list reveals */
html.js .reveal.pending .list-rules li{background-size:0 1px}
html.js .reveal.in .list-rules li{background-size:100% 1px;transition:background-size 700ms var(--e-inout);transition-delay:calc(var(--d,0ms) + 120ms + var(--i,0)*90ms)}
.list-rules .ic{width:22px;height:22px;color:var(--verd);margin-top:2px}
.list-rules b{display:block;font-weight:600;margin-bottom:2px}
.list-rules span{color:var(--ink2);font-size:15px}
.section--navy .list-rules{--rule:#2A3868}
.section--navy .list-rules b{color:var(--paper)}
.section--navy .list-rules span{color:#C9D0E6}
.section--navy .list-rules .ic{color:var(--verd-ink)}
.cols-3{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:760px){.cols-3{grid-template-columns:repeat(3,1fr);gap:20px}}
.cols-3>div,.cols-3>a{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 22px;color:var(--ink);text-decoration:none;display:flex;flex-direction:column;gap:8px}
.cols-3>a:hover{border-color:var(--ink)}
.cols-3 h3{margin:0}
.cols-3 p{color:var(--ink2);font-size:15px;margin:0}
.cols-3 .link-arrow{margin-top:auto;font-size:14px;padding-top:8px}
.section--navy .cols-3>div,.section--navy .cols-3>a{background:var(--navy2);border-color:#2A3868;color:var(--paper)}
.section--navy .cols-3>a:hover{border-color:var(--verd-ink)}
.section--navy .cols-3 p{color:#C9D0E6}
.formats{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:760px){.formats{grid-template-columns:1fr 1fr;gap:20px}}
.format{display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:center;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px}
.format__img{height:120px;background:#D8D4D0;border-radius:var(--r);overflow:hidden}
.format__img img{width:100%;height:100%;object-fit:cover}
.format h3{margin:0 0 4px;font-size:18px}
.format p{margin:0;font-size:14.5px;color:var(--ink2)}
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:16px 0;font-weight:500;font-size:16.5px}
.acc summary::-webkit-details-marker{display:none}
.acc summary .ic{width:20px;height:20px;flex:none;transition:transform var(--t-state) var(--ease);color:var(--ink3)}
.acc details[open] summary .ic{transform:rotate(45deg)}
.acc .acc__body{padding:0 0 18px;color:var(--ink2);max-width:70ch}
.toc{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}
.prose{max-width:66ch}
.prose h2{font-size:clamp(22px,2.2vw,28px);margin-top:1.6em}
.prose h2:first-child{margin-top:0}
.prose ol,.prose ul{padding-left:20px}
.prose li{margin-bottom:.5em}
.page-head{padding-block:clamp(40px,6vw,72px) clamp(24px,3vw,40px)}
.page-head h1{margin-bottom:12px}
.page-head .lead{margin:0}
.page-head--art{display:grid;grid-template-columns:1fr;gap:28px;align-items:end}
@media (min-width:900px){.page-head--art{grid-template-columns:7fr 5fr;gap:56px}}
.page-head--navy{background:var(--navy);color:var(--paper);margin-bottom:clamp(32px,5vw,56px)}
.page-head--navy h1{color:var(--paper)}
.page-head--navy .lead{color:#C9D0E6}
.page-head--navy .eyebrow{color:#B6BED6}
.page-head--navy .link-arrow{color:var(--paper)}
.page-head--navy .link-arrow:hover{color:var(--verd-ink)}
table.plain{width:100%;border-collapse:collapse;font-size:15px}
table.plain th,table.plain td{text-align:left;padding:12px 10px 12px 0;border-bottom:1px solid var(--line);vertical-align:top}
table.plain th{font-weight:500;color:var(--ink2);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;font-family:var(--font-mono)}
table.plain td.mono{font-size:14px}
.panel{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,3vw,32px)}

/* cart page + checkout */
.cart-layout{display:grid;grid-template-columns:1fr;gap:28px;padding-bottom:64px}
@media (min-width:900px){.cart-layout{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:start}}
.cart-summary{position:sticky;top:calc(var(--header-h) + 16px);background:var(--white);padding:24px;border:1px solid var(--line);border-radius:var(--r-lg)}
@media (max-width:899px){.cart-summary{position:static}}
.cart-summary h2{font-size:22px;margin-bottom:16px}
.checkout-steps{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px;font:500 12px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.checkout-steps b{color:var(--ink);font-weight:500}
.checkout-steps span::after{content:"/";margin-left:8px;opacity:.5}
.checkout-steps span:last-child::after{content:""}
fieldset.group{border:0;padding:0;margin:0 0 28px}
fieldset.group legend{font-size:20px;font-weight:600;margin-bottom:12px;padding:0}
.pay-option{display:flex;gap:12px;align-items:start;padding:14px 16px;border:1px solid var(--ink);border-radius:var(--r);background:#fff}
.pay-option input{margin-top:4px;accent-color:var(--verd)}
.pay-option b{display:block;font-weight:600}
.pay-option span{font-size:14px;color:var(--ink2)}
.order-lines{list-style:none;padding:0;margin:0 0 16px;font-size:14px}
.order-lines li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.order-lines li span:first-child{color:var(--ink2)}
.placed{max-width:640px;padding-block:clamp(48px,8vw,96px)}
.placed .ic{width:48px;height:48px;color:var(--verd);margin-bottom:16px}
.ref{font:500 20px var(--font-mono);letter-spacing:.04em}

/* research index + area head */
.research-list{display:grid;gap:14px}
.research-row{display:grid;grid-template-columns:1fr;gap:14px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;color:var(--ink);text-decoration:none;transition:border-color var(--t-state) var(--ease),box-shadow var(--t-enter) var(--ease)}
@media (min-width:900px){.research-row{grid-template-columns:240px 1fr auto;align-items:center;gap:28px;padding:16px 24px 16px 16px}}
.research-row:hover{border-color:var(--line2);box-shadow:var(--shadow)}
.research-row__media{aspect-ratio:3/2;overflow:hidden;border-radius:var(--r);background:var(--paper2)}
.research-row__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-hero) var(--ease)}
.research-row:hover .research-row__media img{transform:scale(1.03)}
.research-row h2{font-size:22px;margin:0 0 6px;display:flex;align-items:center;gap:10px}
.research-row h2 .mark{width:24px;height:24px;color:var(--verd)}
.research-row p{margin:0 0 8px;color:var(--ink2)}
.research-row .names{font-size:13px;color:var(--ink3)}
.research-row .num{font-size:14px;color:var(--ink3);white-space:nowrap}
.area-head{display:grid;grid-template-columns:1fr;gap:20px;align-items:end;padding-block:clamp(28px,5vw,56px) 20px}
@media (min-width:900px){.area-head{grid-template-columns:7fr 5fr;gap:48px}}
.area-head__media{aspect-ratio:3/1.6;overflow:hidden;border-radius:var(--r-lg)}
.area-head__media img{width:100%;height:100%;object-fit:cover}
.area-head h1{display:flex;align-items:center;gap:14px}
.area-head h1 .mark{width:34px;height:34px;color:var(--verd)}

/* footer */
.site-footer{background:var(--navy3);color:#C9D0E6;margin-top:auto}
.site-footer__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px;padding-block:clamp(40px,6vw,72px) 32px}
@media (min-width:900px){.site-footer__grid{grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:48px}}
.site-footer__brand{grid-column:1/-1;max-width:420px}
@media (min-width:900px){.site-footer__brand{grid-column:auto}}
.site-footer__brand .brand{color:var(--paper);margin-bottom:12px}
.site-footer__brand p{font-size:14.5px}
.site-footer__ruo{font:500 11.5px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--verd-ink)}
.site-footer__h{font:500 12px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:#8E97B8;margin:0 0 12px}
.site-footer a{display:block;color:var(--paper);text-decoration:none;padding:5px 0;font-size:15px}
.site-footer a:hover{color:var(--verd-ink);text-decoration:underline}
.site-footer__base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-block:18px 28px;border-top:1px solid #2A3868;font-size:13px;color:#8E97B8}

.page-404 main{display:flex;align-items:center}
.notfound{padding-block:96px;max-width:560px}
@media print{.site-header,.site-footer,.ruo-bar,.sticky-buy,.drawer,.dialog,.toast{display:none!important}}

/* cart presence decided in head.js: no swap after load, so no layout shift */
html.js.no-cart [data-checkout-form],html.js.no-cart [data-cart-has]{display:none}
html.js.has-cart [data-checkout-empty],html.js.has-cart [data-cart-none]{display:none}

/* FAQ head: compact image beside the title; search field */
.page-head--faq{align-items:start}
@media (min-width:900px){.page-head--faq{grid-template-columns:7fr 3fr}}
.split__media--faq{max-width:300px;justify-self:end}
.split__media--faq img{aspect-ratio:4/5}
@media (max-width:899px){.split__media--faq{max-width:none;justify-self:stretch;width:100%}.split__media--faq img{aspect-ratio:1/1;object-position:50% 60%}}
.faq-search{margin:18px 0 16px}
.faq-search label{display:block;font-weight:500;font-size:14px;margin-bottom:6px}
.faq-search__field{max-width:520px}
.faq-search__field input{width:100%;min-height:44px}
.faq-body{max-width:72ch}
.faq-group{margin-bottom:40px}
.faq-group[hidden]{display:none}

/* ============================================================================
   MOTION SYSTEM (v7), "precision in motion"
   Durations: --m-1 150 ms controls, --m-2 280 ms menus, --m-3 600 ms sections, hero sequence about 1.1 s.
   Everything decorative is transform or opacity; the only layout animation is the accordion (measured).
   ============================================================================ */

/* 1. Hero opening. Timed by CSS from first paint, so it never waits for a script and never hides the page.
      eyebrow 0 ms > headline lines from 140 ms, 90 ms apart (whole headline at 300 ms if the lines were not split in time)
      > lead 420 ms > actions 520 / 600 ms > caption 780 ms. The scene settles over 1100 ms with a 3.5 percent scale change. */
html.js .hero__copy .eyebrow{animation:rise 520ms var(--e-settle) 0ms both}
html.js .hero__copy h1{animation:rise 560ms var(--e-settle) 300ms both}
html.js .hero__copy h1.is-split{animation:none;opacity:1;transform:none}
.hl{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.hl__in{display:block;transform:translateY(108%);animation:lineUp 760ms var(--e-settle) both}
html.js .hero__copy .lead{animation:rise 560ms var(--e-settle) 420ms both}
html.js .hero__actions>*{animation:rise 520ms var(--e-settle) both}
html.js .hero__actions>:nth-child(1){animation-delay:520ms}
html.js .hero__actions>:nth-child(2){animation-delay:600ms}
html.js .hero__art img{animation:sceneIn 1100ms var(--e-settle) 60ms both}
html.js .hero__caption{animation:fade 480ms var(--e-out) 780ms both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes lineUp{to{transform:none}}
/* the photograph is never faded: it is visible the moment it is painted (it is the largest paint on every page) and only settles in scale */
@keyframes sceneIn{from{transform:scale(1.035)}to{transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* 2. Hero depth after the entrance: fine pointers only. The whole scene (photograph and blend together) drifts up to
      10 x 5 px against the cursor and eases back to rest when the pointer leaves. Touch devices get nothing. */
.hero:not(.is-tracking) .hero__scene{transition-duration:900ms;transition-timing-function:var(--e-settle)}

/* 3. Research areas: accent rail draws down the left edge, the mark draws itself, the arrow moves, the artwork settles;
      keyboard focus behaves like hover; on touch a pressed state only, the first tap navigates */
.area{transition:background var(--m-2) var(--e-out),border-color var(--m-2) var(--e-out),color var(--m-1) var(--e-out),transform var(--m-2) var(--e-out)}
.area::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:2px;background:var(--verd-ink);transform:scaleY(0);transform-origin:top;transition:transform var(--m-2) var(--e-out)}
.area:hover::before,.area:focus-visible::before{transform:none}
.area .mark :is(path,circle){stroke-dasharray:1;stroke-dashoffset:0}
.area:hover .mark :is(path,circle),.area:focus-visible .mark :is(path,circle){animation:draw 560ms var(--e-inout) both}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.area:active{transform:scale(.995);transition-duration:80ms}
@media (hover:none){.area:active{background:var(--navy);border-color:var(--navy);color:var(--paper)}.area:active .mark,.area:active .area__cta{color:var(--verd-ink)}.area:active span.d,.area:active .num{color:#C9D0E6}}

/* 4. Product discovery */
.card__media img{transition:transform var(--m-3) var(--e-settle)}
.card:hover .card__media img{transform:scale(1.035)}
.card__name a{background:linear-gradient(currentColor,currentColor) left calc(100% - 1px)/0 1px no-repeat;transition:color var(--m-1) var(--e-out),background-size var(--m-2) var(--e-out)}
.card:hover .card__name a,.card:focus-within .card__name a{background-size:100% 1px}
.card__act .ic{transition:transform var(--m-2) var(--e-out)}
.card__act:hover .ic{transform:translateX(3px)}
.card.is-entering{animation:cardIn 320ms var(--e-out) both}
@keyframes cardIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.grid{transition:opacity var(--m-2) var(--e-out)}
.grid.is-switching{opacity:.35;transition:none}
.chip{transition:background var(--m-2) var(--e-out),border-color var(--m-1) var(--e-out),color var(--m-1) var(--e-out),transform var(--m-1) var(--e-out)}
html.motion-live [data-filter] .chip.is-on{animation:select 240ms var(--e-out)}
html.motion-live .pill.is-on{animation:select 240ms var(--e-out)}
@keyframes select{0%{transform:scale(1)}45%{transform:scale(1.045)}100%{transform:scale(1)}}
.view-toggle button{transition:background var(--m-1) var(--e-out),color var(--m-1) var(--e-out)}
.catalog-toolbar .count{transition:opacity var(--m-1)}

/* 5. Pressed feedback, everywhere, 80 ms down and the token back up */
.btn:not([disabled]):not([aria-disabled="true"]):active{transform:scale(.98);box-shadow:none;transition-duration:80ms}
.chip:active,.pill:active,.card__act:active,.view-toggle button:active,.pdp__thumb:active{transform:scale(.97);transition-duration:80ms}
.icon-btn .ic{transition:transform var(--m-1) var(--e-out)}
.icon-btn:active .ic{transform:scale(.88)}
.stepper button{transition:background var(--m-1) var(--e-out)}
.stepper button:active{background:var(--paper3)}
.link-arrow .ic{transition:transform var(--m-2) var(--e-out)}
.hero__link .ic{transition:transform var(--m-2) var(--e-out)}
.hero__link:hover .ic{transform:translateX(3px)}

/* 6. Variant change: the price and specifications swap in place (never counting), the ghost image dissolves, and
      the hairline above the product notes sweeps once to say "updated" (the rule motif from the vial label). */
.pdp__price .price{transition:opacity var(--m-1) var(--e-out)}
.rule-sweep{position:relative}
.rule-sweep::after{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;pointer-events:none;opacity:0;background:linear-gradient(90deg,rgba(31,122,109,0) 0%,var(--verd) 50%,rgba(31,122,109,0) 100%) no-repeat;background-size:40% 100%;background-position:-67% 0}
.rule-sweep--bottom::after{top:auto;bottom:-1px}
.rule-sweep.is-sweep::after{animation:sweep 820ms var(--e-inout)}
@keyframes sweep{0%{opacity:0;background-position:-67% 0}12%{opacity:1}88%{opacity:1}100%{opacity:0;background-position:167% 0}}

/* 7. Cart */
.drawer__panel{transition:transform 240ms var(--e-inout)}
.drawer.is-open .drawer__panel{transition:transform 340ms var(--e-out)}
.drawer__scrim,.dialog__scrim,.mobile-menu__scrim{transition:opacity var(--m-2) var(--e-out)}
.cart-line{transition:opacity var(--m-2) var(--e-out),transform var(--m-2) var(--e-out)}
.cart-line.is-new{animation:lineNew 1400ms var(--e-out) both}
@keyframes lineNew{0%{background:var(--verd-soft);transform:translateX(6px)}25%{transform:none}100%{background:transparent}}

/* 8. Navigation and controls */
.site-header{transition:box-shadow var(--m-2) var(--e-out)}
.site-header.is-scrolled{box-shadow:0 8px 24px -18px rgba(21,33,71,.35)}
.primary-nav a::after{transform-origin:right;transition:transform var(--m-2) var(--e-out)}
.primary-nav a:hover::after,.primary-nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.mobile-menu__panel{transition:transform 320ms var(--e-out)}
.mobile-menu:not(.is-open) .mobile-menu__panel{transition:transform 240ms var(--e-inout)}
.mobile-menu__panel a{opacity:0;transform:translateX(-10px);transition:opacity 120ms var(--e-out),transform 120ms var(--e-out)}
.mobile-menu.is-open .mobile-menu__panel a{opacity:1;transform:none;transition:opacity var(--m-2) var(--e-out),transform var(--m-2) var(--e-out);transition-delay:calc(60ms + var(--i,0)*35ms)}
.mobile-menu__panel a:nth-of-type(2){--i:1}.mobile-menu__panel a:nth-of-type(3){--i:2}.mobile-menu__panel a:nth-of-type(4){--i:3}.mobile-menu__panel a:nth-of-type(5){--i:4}.mobile-menu__panel a:nth-of-type(6){--i:5}.mobile-menu__panel a:nth-of-type(7){--i:6}.mobile-menu__panel a:nth-of-type(8){--i:7}
.dialog__panel{transition:opacity var(--m-1) var(--e-out),transform var(--m-2) var(--e-settle)}
.search-results.is-fresh>*{animation:fade 200ms var(--e-out) both}
.input,.select,.textarea{transition:border-color var(--m-1) var(--e-out),box-shadow var(--m-2) var(--e-out)}
.field-error{transition:opacity var(--m-2) var(--e-out),transform var(--m-2) var(--e-out)}
.field-error:empty{opacity:0;transform:translateY(-3px)}
.notice[data-contact-ok],.notice[data-doc-ok]{animation:rise 480ms var(--e-settle) both}
.acc summary .ic{transition:transform var(--m-2) var(--e-out)}
.toast{transition:opacity var(--m-2) var(--e-out),transform var(--m-2) var(--e-settle)}

/* 9. Reduced motion: every state is kept, every movement is removed */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0ms!important;scroll-behavior:auto!important}
  .hero__scene{transform:none!important}
  .hl__in{transform:none}
  .card:hover .card__media img,.research-row:hover .research-row__media img{transform:none}
}
/* an overlay on its way out must not catch clicks meant for the page (quick close then reopen) */
.drawer:not(.is-open),.dialog:not(.is-open),.mobile-menu:not(.is-open){pointer-events:none}

/* ============================================================================
   LANGUAGES (v10): selector, continue prompt, and wrapping rules that apply to translated pages only, so the approved
   English layout is untouched while longer words and labels wrap naturally instead of overflowing or shrinking.
   ============================================================================ */
/* desktop: the language control lives in the top utility bar, so the approved header is untouched; phones: globe in the header */
.ruo-bar{position:relative}
.ruo-bar__lang{display:none}
@media (min-width:900px){
  .ruo-bar__lang{position:absolute;right:max(var(--gutter),calc((100vw - var(--maxw))/2));top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 6px;border:0;border-radius:var(--r);background:none;color:#C9D0E6;font:500 11.5px/1 var(--font-mono);letter-spacing:.06em;cursor:pointer;transition:color var(--m-1) var(--e-out),background var(--m-1) var(--e-out)}
  .ruo-bar__lang:hover{color:#F6F3EE;background:rgba(246,243,238,.08)}
  .ruo-bar__lang:focus-visible{outline:2px solid #F6F3EE;outline-offset:1px}
  .ruo-bar__lang .ic{width:14px;height:14px}
  .ruo-bar__lang .ic:last-child{width:12px;height:12px;opacity:.7}
  .lang-btn{display:none}
}
@media (min-width:900px) and (max-width:1100px){.ruo-bar{justify-content:flex-start;padding-right:180px}}
.lang-btn{gap:4px;padding:0 8px}
.lang-btn .ic{width:20px;height:20px}
.lang-btn__code{font:500 12px/1 var(--font-mono);letter-spacing:.06em}
.lang-menu{position:fixed;inset:0;z-index:72}
.lang-menu:not(.is-open){pointer-events:none}
.lang-menu__scrim{position:absolute;inset:0;background:rgba(14,23,51,.32);opacity:0;transition:opacity var(--m-2) var(--e-out)}
.lang-menu.is-open .lang-menu__scrim{opacity:1}
.lang-menu__panel{position:absolute;right:max(16px,calc((100vw - var(--maxw))/2));top:calc(var(--header-h) + 36px);width:min(100% - 32px,560px);max-height:calc(100vh - var(--header-h) - 60px);overflow:auto;background:var(--paper);border-radius:var(--r-lg);box-shadow:0 24px 64px rgba(14,23,51,.28),0 0 0 1px var(--line);padding:8px 8px 12px;opacity:0;transform:translateY(-6px);transition:opacity var(--m-1) var(--e-out),transform var(--m-2) var(--e-settle)}
.lang-menu.is-open .lang-menu__panel{opacity:1;transform:none}
.lang-menu__head{display:flex;justify-content:space-between;align-items:center;padding:4px 4px 6px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.lang-menu__title{font:500 12px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin:0}
.lang-menu__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}
@media (max-width:640px){.lang-menu__list{grid-template-columns:repeat(2,minmax(0,1fr))}.lang-menu__panel{left:16px;right:16px;width:auto;top:calc(var(--header-h) + 30px)}}
.lang-menu__item{display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 10px;border-radius:var(--r);color:var(--ink);text-decoration:none;font-size:15px;transition:background var(--m-1) var(--e-out),color var(--m-1) var(--e-out)}
.lang-menu__item:hover,.lang-menu__item:focus-visible{background:var(--paper2);color:var(--ink)}
.lang-menu__item:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.lang-menu__name{flex:1;min-width:0}
.lang-menu__code{font:500 11px var(--font-mono);letter-spacing:.06em;color:var(--ink3)}
.lang-menu__item .ic{width:16px;height:16px;color:var(--verd)}
.lang-menu__item.is-current{background:var(--verd-soft);font-weight:600}
.mobile-menu__lang{display:flex;align-items:center;gap:10px;width:100%;margin-top:14px;padding:12px 4px;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:none;color:var(--ink);font:500 15px var(--font-text);text-align:left;cursor:pointer}
.mobile-menu__lang .ic{width:20px;height:20px;color:var(--verd)}
.mobile-menu__lang span{color:var(--ink3);font-size:13px}
.mobile-menu__lang b{margin-left:auto;font-weight:600}
.lang-hint{display:flex;justify-content:center;align-items:center;gap:12px;padding:8px var(--gutter);background:var(--verd-soft);color:var(--ink);font-size:14px;border-bottom:1px solid var(--line)}
.lang-hint a{font-weight:600;color:var(--verd2)}
.lang-hint button{border:0;background:none;color:var(--ink3);cursor:pointer;min-width:32px;min-height:32px;border-radius:var(--r)}
/* grid tracks are minmax(0,1fr) so a long word can never widen a column; on translated pages such words break */
html:not([lang="en"]) body{overflow-wrap:break-word}
html:not([lang="en"]) :is(.fact span,.card__short,.list-rules span,.spec td,td){hyphens:auto}
html:not([lang="en"]) .btn{white-space:normal;text-align:center;line-height:1.25;padding-block:10px}
html:not([lang="en"]) .btn--sm{padding-block:8px}
/* headings and leads never hyphenate (it looks wrong at display sizes); a word that cannot fit still breaks */
html:not([lang="en"]) :is(h1,h2,h3,.lead,.card__name,.area b,.chip,.pill,.primary-nav a,.lang-menu__name){overflow-wrap:break-word;hyphens:manual}
html:not([lang="en"]) .chip{white-space:normal;height:auto;min-height:36px;padding-block:6px;text-align:left}
html:not([lang="en"]) .card__act{white-space:normal;text-align:left}
html:not([lang="en"]) .catalog-search input{width:min(52vw,280px)}
/* long navigation labels: the desktop bar switches to the menu button until there is room for them */
@media (min-width:900px) and (max-width:1279px){html.nav-long .primary-nav,html.nav-xlong .primary-nav{display:none}html:is(.nav-long,.nav-xlong) .menu-btn{display:inline-flex}html:is(.nav-long,.nav-xlong) .site-header__row{grid-template-columns:auto 1fr auto}}
@media (min-width:1280px) and (max-width:1439px){html.nav-xlong .primary-nav{display:none}html.nav-xlong .menu-btn{display:inline-flex}html.nav-xlong .site-header__row{grid-template-columns:auto 1fr auto}}
@media (prefers-reduced-motion:reduce){.lang-menu__panel,.lang-menu__scrim{transition:none}}

/* ---------- v11: privacy choices, partner storefronts, partner code ---------- */
.site-footer__btn{display:block;background:none;border:0;padding:5px 0;font:inherit;font-size:15px;color:var(--paper);cursor:pointer;text-align:left}
.site-footer__btn:hover{color:var(--verd-ink);text-decoration:underline}
.consent{position:fixed;z-index:60;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:12px;max-width:760px;margin:0 auto;background:var(--white);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:16px 18px;display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.consent[hidden]{display:none}
.consent p{margin:0;font-size:14px;line-height:1.5;color:var(--ink2)}
.consent p b{color:var(--ink)}
.consent__row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.consent__row a{font-size:14px;margin-left:auto}
@media (min-width:760px){.consent{grid-template-columns:minmax(0,1fr) auto;align-items:center}.consent__row a{margin-left:8px}}
.sf-demo{background:#5C2B0B;color:#FBE9DA;text-align:center;font:500 13px/1.4 var(--font-text);padding:8px 16px}
.sf-demo--preview{background:#3F2B6B;color:#ECE5FB}
.sf-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);min-width:0}
.sf-logo{height:36px;width:auto;max-width:160px;object-fit:contain}
.sf-name{font:600 18px/1.1 var(--font-text);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:22ch}
.site-footer .sf-brand{color:var(--paper)}
.sf-seller{background:var(--paper2);border-bottom:1px solid var(--line);font-size:13.5px;color:var(--ink2)}
.sf-seller .wrap{display:flex;gap:10px;align-items:flex-start;padding-block:9px}
.sf-seller .ic{width:18px;height:18px;flex:none;margin-top:1px;color:var(--verd)}
.sf-seller p{margin:0}
.sf-hero{padding:clamp(32px,5vw,72px) 0 clamp(28px,4vw,56px)}
.sf-hero__grid{display:grid;gap:clamp(24px,4vw,56px);grid-template-columns:minmax(0,1fr);align-items:center}
@media (min-width:900px){.sf-hero__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
.sf-hero__art{margin:0;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;background:var(--paper2)}
.sf-hero__art img{width:100%;height:100%;object-fit:cover}
.sf-hero h1{max-width:18ch;overflow-wrap:break-word}
.sf-facts{margin-bottom:clamp(24px,3vw,40px)}
.sf-facts .fact b{font:600 13px/1.2 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.sf-facts .fact span{font-size:15px;color:var(--ink2)}
.promo{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:6px}
.promo__msg{grid-column:1/-1;font-size:14px;margin:0;min-height:1.4em}
.promo__msg.is-ok{color:var(--verd2)}.promo__msg.is-err{color:var(--err)}
.sf-hero .hero__link{color:var(--ink2)}
.sf-hero .hero__link:hover{color:var(--verd)}