@charset "UTF-8";
/* ==========================================================================
   8 SKYN — app.css
   Design tokens, layout and motion. Authored to the approved v2 handoff spec.
   Order: fonts · tokens · reset · type · layout · controls · chrome ·
          hero · sections · product · editorial · forms · motion · a11y
   ========================================================================== */

/* --------------------------------------------------------------- 1. fonts */
@font-face{font-family:'Bodoni Moda';src:url('../fonts/bodoni-400-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,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:'Bodoni Moda';src:url('../fonts/bodoni-400-latin-ext.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Bodoni Moda';src:url('../fonts/bodoni-500-latin.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,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:'Bodoni Moda';src:url('../fonts/bodoni-400-italic-latin.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,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:'Jost';src:url('../fonts/jost-300-latin.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,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:'Jost';src:url('../fonts/jost-400-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,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:'Jost';src:url('../fonts/jost-400-latin-ext.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Jost';src:url('../fonts/jost-500-latin.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* -------------------------------------------------------------- 2. tokens */
:root{
  /* ground + ink */
  --ink:#1A1008;
  --brown:#755240;
  --tan:#A88465;
  --sand:#C9A484;
  --clay:#EFE2D4;
  --cream:#F7F1E9;
  --page:#FDFAF6;
  --white:#FFFFFF;

  /* derived — text roles. tan is decorative only (3.4:1), never body copy. */
  --text:#1A1008;
  --text-soft:#5E4232;
  --text-muted:#755240;
  --on-dark:#F7F1E9;
  --on-dark-soft:#D8C3AE;

  --rule:rgba(26,16,8,.13);
  --rule-soft:rgba(26,16,8,.07);
  --rule-dark:rgba(247,241,233,.22);

  --bronze:linear-gradient(140deg,#C9A484 0%,#8A6349 46%,#D8B694 100%);

  /* type */
  --f-display:'Bodoni Moda',"Didot","Times New Roman",serif;
  --f-ui:'Jost',system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-display:clamp(34px,5vw,104px);
  --fs-h2:clamp(29px,3.5vw,60px);
  --fs-h3:clamp(23px,2.1vw,40px);
  --fs-body:clamp(14px,1.02vw,15px);
  --fs-lead:clamp(16px,1.35vw,20px);
  --label:600 10px/1 var(--f-ui);
  --track-label:.34em;

  /* space */
  --gutter:clamp(24px,7vw,120px);
  --section:clamp(84px,11vw,170px);
  --maxw:1680px;

  /* motion */
  --ease:cubic-bezier(.2,.7,.2,1);
  --t-reveal:1s;
  --t-hover:300ms;
  --t-nav:400ms;
  --t-img:900ms;

  --header-h:76px;
}

/* --------------------------------------------------------------- 3. reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--page);color:var(--text);
  font:300 var(--fs-body)/1.8 var(--f-ui);
  letter-spacing:.012em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
ul,ol{margin:0;padding:0;list-style:none}
/* wp_nav_menu( items_wrap: '%3$s' ) emits bare <li> with no <ul>, so the
   rule above never reaches them and each menu item drew a bullet. */
.nav li,.drawer li,.ftr li,.ftr__bottom nav li{list-style:none}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
hr{border:0;border-top:1px solid var(--rule);margin:0}
::selection{background:var(--sand);color:var(--ink)}
:focus-visible{outline:2px solid var(--brown);outline-offset:3px;border-radius:2px}

/* ----------------------------------------------------------------- 4. type */
.display{
  font:400 var(--fs-display)/1.02 var(--f-display);
  letter-spacing:-.02em;text-wrap:balance;
}
.h2{font:400 var(--fs-h2)/1.06 var(--f-display);letter-spacing:-.018em;text-wrap:balance}
.h3{font:400 var(--fs-h3)/1.12 var(--f-display);letter-spacing:-.012em;text-wrap:pretty}
/* serif floor — hairlines disappear below 19px */
.serif-sm{font:400 clamp(19px,1.5vw,23px)/1.35 var(--f-display);letter-spacing:-.008em}
.quiet{font:400 clamp(19px,2vw,30px)/1.3 var(--f-display);font-style:italic;color:var(--text-muted)}
.label{
  font:var(--label);letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--text-muted);display:block;
}
.label--light{color:var(--on-dark-soft)}
.lead{font-size:var(--fs-lead);line-height:1.65;color:var(--text-soft);font-weight:300;text-wrap:pretty}
.prose p{margin:0 0 1.3em;max-width:68ch}
.prose p:last-child{margin-bottom:0}
.prose a{border-bottom:1px solid var(--sand);transition:border-color var(--t-hover) var(--ease)}
.prose a:hover{border-color:var(--brown)}
.prose h2{font:400 var(--fs-h3)/1.15 var(--f-display);margin:1.8em 0 .5em}
.prose h3{font:400 clamp(20px,1.7vw,28px)/1.2 var(--f-display);margin:1.6em 0 .4em}
.prose ul{margin:0 0 1.3em;padding-left:1.1em;list-style:disc}
.prose li{margin:0 0 .4em}
.prose blockquote{
  margin:2em 0;padding-left:clamp(18px,2vw,32px);border-left:1px solid var(--sand);
  font:400 clamp(19px,1.9vw,27px)/1.4 var(--f-display);font-style:italic;color:var(--text-muted);
}

/* --------------------------------------------------------------- 5. layout */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:960px}
.wrap--mid{max-width:1240px}
.section{padding-block:var(--section)}
.section--tight{padding-block:calc(var(--section) * .62)}
.section--cream{background:var(--cream)}
.section--clay{background:var(--clay)}
.section--ink{background:var(--ink);color:var(--on-dark)}
.section--ink .label{color:var(--on-dark-soft)}
.section--ink .lead{color:var(--on-dark-soft)}
.bleed{width:100%}
.stack>*+*{margin-top:var(--s,18px)}
.grid{display:grid;gap:clamp(18px,2.2vw,34px)}
/* reflow without breakpoints */
.grid--cards{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
/* four products must sit four-across on a wide screen, not three-plus-orphan */
.grid--products{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.section-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:24px;margin-bottom:clamp(34px,4vw,64px)}
/* the heading column must be allowed to grow, or a three-word display line
   shrinks to the trailing link's leftovers and breaks one word per line */
.section-head__t{flex:1 1 560px;max-width:34ch;min-width:0}
.section-head>:not(.section-head__t){flex:0 0 auto}

/* frame — every image sits in a fixed square-cornered frame that crops */
.frame{position:relative;overflow:hidden;background:var(--clay)}
.frame>img{width:100%;height:100%;object-fit:cover;display:block}
.frame--45{aspect-ratio:4/5}
.frame--34{aspect-ratio:3/4}
.frame--11{aspect-ratio:1/1}
.frame--32{aspect-ratio:3/2}
.frame--169{aspect-ratio:16/9}
.frame--219{aspect-ratio:21/9}

/* ------------------------------------------------------------- 6. controls */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  padding:15px 30px;border-radius:999px;
  font:500 11px/1 var(--f-ui);letter-spacing:.2em;text-transform:uppercase;
  border:1px solid transparent;cursor:pointer;
  transition:background var(--t-hover) var(--ease),color var(--t-hover) var(--ease),
             border-color var(--t-hover) var(--ease),transform var(--t-hover) var(--ease);
  will-change:transform;
}
.btn:active{transform:scale(.985)}
.btn--solid{background:var(--ink);color:var(--cream)}
.btn--solid:hover{background:var(--brown)}
.btn--line{border-color:var(--rule);color:var(--ink)}
.btn--line:hover{border-color:var(--ink);background:var(--ink);color:var(--cream)}
.btn--light{border-color:var(--rule-dark);color:var(--on-dark)}
.btn--light:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.btn--cream{background:var(--cream);color:var(--ink)}
.btn--cream:hover{background:var(--white)}
.btn__ig{width:14px;height:14px;flex:none}

/* text link with a rule that wipes in */
.tlink{
  display:inline-flex;align-items:center;gap:.55em;position:relative;
  font:500 11px/1 var(--f-ui);letter-spacing:.2em;text-transform:uppercase;
  padding-bottom:7px;
}
.tlink::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform var(--t-hover) var(--ease);
}
.tlink:hover::after{transform:scaleX(1);transform-origin:left}
.tlink__arr{transition:transform var(--t-hover) var(--ease)}
.tlink:hover .tlink__arr{transform:translateX(4px)}

.chip{
  display:inline-flex;align-items:center;padding:9px 18px;border-radius:999px;
  border:1px solid var(--rule);background:transparent;
  font:400 11px/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);
  transition:all var(--t-hover) var(--ease);white-space:nowrap;
}
.chip:hover{border-color:var(--brown);color:var(--ink)}
.chip[aria-pressed="true"],.chip.is-on{background:var(--ink);border-color:var(--ink);color:var(--cream)}

.badge{
  display:inline-block;padding:6px 13px;border-radius:999px;background:var(--clay);
  font:500 9px/1 var(--f-ui);letter-spacing:.24em;text-transform:uppercase;color:var(--brown);
}

/* --------------------------------------------------------------- 7. chrome */
.skip{position:absolute;left:-9999px;top:0;z-index:200;padding:14px 22px;background:var(--ink);color:var(--cream)}
.skip:focus{left:12px;top:12px}

.hdr{
  position:fixed;inset:0 0 auto;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:var(--header-h);padding-inline:var(--gutter);
  background:transparent;
  transition:background var(--t-nav) var(--ease),backdrop-filter var(--t-nav) var(--ease),
             box-shadow var(--t-nav) var(--ease),color var(--t-nav) var(--ease);
}
.hdr.is-stuck{
  background:rgba(247,241,233,.86);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--rule-soft);
}
/* over a dark hero the nav starts light, then inverts once stuck */
.hdr--over-dark:not(.is-stuck){color:var(--cream)}
.hdr--over-dark:not(.is-stuck) .mark__word{color:var(--cream)}
.hdr--over-dark:not(.is-stuck) .nav a{color:var(--cream)}
.hdr--over-dark:not(.is-stuck) .burger span{background:var(--cream)}

.mark{display:inline-flex;align-items:center;gap:11px;flex:none}
.mark__sigil{
  width:34px;height:34px;border-radius:50%;background:var(--bronze);
  display:grid;place-items:center;flex:none;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.45),inset 0 -2px 5px rgba(26,16,8,.28);
}
.mark__sigil svg{width:20px;height:20px}
/* the supplied brand mark is a complete bronze disc — it replaces the
   gradient rather than sitting on top of it */
.mark__sigil--img{background:none;box-shadow:none;overflow:hidden}
.mark__sigil--img img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.mark__word{
  font:400 16px/1 var(--f-display);letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink);transition:color var(--t-nav) var(--ease);padding-left:.28em;
}

.nav{display:flex;align-items:center;gap:clamp(20px,2.4vw,42px)}
.nav a{
  font:400 11px/1 var(--f-ui);letter-spacing:.22em;text-transform:uppercase;
  color:var(--text);position:relative;padding-block:6px;
  transition:color var(--t-hover) var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform var(--t-hover) var(--ease);
}
.nav a:hover::after,.nav .current-menu-item>a::after{transform:scaleX(1);transform-origin:left}
.hdr__cta{display:flex;align-items:center;gap:14px;flex:none}
.hdr__cta .btn{padding:12px 22px}

.burger{display:none;width:40px;height:40px;place-items:center;gap:5px;flex-direction:column;flex:none}
.burger span{display:block;width:19px;height:1px;background:var(--ink);transition:transform var(--t-nav) var(--ease),opacity var(--t-nav) var(--ease)}
body.nav-open .burger span:nth-child(1){transform:translateY(3px) rotate(45deg)}
body.nav-open .burger span:nth-child(2){opacity:0}
body.nav-open .burger span:nth-child(3){transform:translateY(-3px) rotate(-45deg)}

.drawer{
  position:fixed;inset:0;z-index:99;background:var(--cream);
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:var(--header-h) var(--gutter) 0;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--t-nav) var(--ease),transform var(--t-nav) var(--ease),visibility var(--t-nav);
}
body.nav-open .drawer{opacity:1;visibility:visible;transform:none}
/* Scoped to the nav: an unscoped `.drawer a` also caught the Instagram
   button and rendered it at display size. */
.drawer nav a{
  display:block;
  font:400 clamp(28px,6.4vw,46px)/1.22 var(--f-display);letter-spacing:-.015em;
  padding-block:10px;opacity:0;transform:translateY(14px);
}
body.nav-open .drawer nav a{opacity:1;transform:none;transition:opacity .5s var(--ease) calc(var(--i,0)*60ms + 90ms),transform .5s var(--ease) calc(var(--i,0)*60ms + 90ms)}
.drawer__foot{opacity:0;transform:translateY(14px)}
body.nav-open .drawer__foot{opacity:1;transform:none;transition:opacity .5s var(--ease) .34s,transform .5s var(--ease) .34s}
.drawer__foot{margin-top:clamp(28px,5vh,48px);display:flex;flex-wrap:wrap;gap:12px}

/* With the drawer open the header sits on the cream panel, but on the front
   page it is still in its over-dark palette — which rendered the wordmark and
   the close icon cream-on-cream, i.e. invisible. */
body.nav-open .hdr.hdr--over-dark .mark__word,
body.nav-open .hdr.hdr--over-dark .nav a{color:var(--ink)}
body.nav-open .hdr.hdr--over-dark .burger span{background:var(--ink)}
body.nav-open .hdr{background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}

/* ----------------------------------------------------------------- 8. hero */
/* ACT I — the pull-back.
   Default (no JS / reduced motion) renders the FINISHED frame: stage at
   scale 1, the last layer on top, all copy visible. `.skyn-motion` opts into
   the animated opening. */
.hero{position:relative;background:var(--ink)}
.hero__sticky{
  position:sticky;top:0;overflow:hidden;
  display:grid;align-items:end;
  /* dvh, not svh: svh is the height with the address bar SHOWING, so the
     moment the bar retracts this panel stops covering the viewport and the
     section's ink background shows through as a brown band. */
  height:100svh;height:100dvh;
}
.hero__stage{position:absolute;inset:0;z-index:0;transform-origin:50% 44%}
.hero__layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__scrim{
  position:absolute;inset:0;z-index:1;opacity:.5;
  /* Two gradients, not one. The vertical pass sets the mood; the horizontal
     pass exists solely so the copy block bottom-left keeps its contrast over
     a bright frame of the pull-back — dimming the whole photograph to achieve
     the same thing would flatten the image. */
  background:
    linear-gradient(180deg,rgba(26,16,8,.52) 0%,rgba(26,16,8,.2) 34%,rgba(26,16,8,.88) 100%),
    linear-gradient(100deg,rgba(26,16,8,.78) 0%,rgba(26,16,8,.5) 30%,rgba(26,16,8,.06) 66%);
}
/* A gradient alone cannot rescue copy over an unpredictable frame of a moving
   image, so the type also carries its own shadow. Cheap, and it survives any
   photograph the brand swaps in later. */
.hero__title,.hero__sub,.hero__eyebrow{text-shadow:0 1px 22px rgba(26,16,8,.55),0 1px 3px rgba(26,16,8,.35)}
.hero__inner{
  position:relative;z-index:2;width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:clamp(90px,16vh,200px) var(--gutter) clamp(56px,8vh,110px);
}
/* A global scrim dims the whole photograph to rescue one corner of copy. This
   wash is confined to the band the copy occupies, so the headline survives even
   the palest frame of the pull-back while the rest of the image stays open.
   It lives on a pseudo-element so its top edge can be feathered with a mask —
   painting it straight onto .hero__inner drew a hard horizontal line across
   the photograph. */
.hero__inner::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(95deg,
    rgba(26,16,8,.74) 0%,
    rgba(26,16,8,.52) 42%,
    rgba(26,16,8,0) 80%);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,#000 34%,#000 100%);
          mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,#000 34%,#000 100%);
}
.hero__inner>*{position:relative;z-index:1}
.hero__eyebrow{color:var(--on-dark-soft);margin-bottom:clamp(18px,2.4vw,30px)}
.hero__title{color:var(--cream);max-width:15ch}
.hero__title em{font-style:italic;color:var(--sand)}
.hero__sub{margin-top:clamp(16px,1.8vw,26px);max-width:46ch;color:var(--on-dark-soft);font-size:var(--fs-lead);font-weight:300;line-height:1.6}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(28px,3.4vw,46px)}
.hero__cue{
  position:absolute;right:var(--gutter);bottom:clamp(56px,8vh,110px);z-index:2;
  display:flex;align-items:center;gap:12px;color:var(--on-dark-soft);
  font:400 10px/1 var(--f-ui);letter-spacing:var(--track-label);text-transform:uppercase;
}
.hero__cue i{display:block;width:1px;height:52px;background:linear-gradient(var(--sand),transparent);position:relative;overflow:hidden}
.hero__cue i::after{content:"";position:absolute;inset:0;background:var(--cream);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* The oversized floating mark is gone: it read as a stray disc in the middle
   of the photograph, and hiding the nav logo until it handed over left the
   header with no logo at all on the home page. The logo now simply lives in
   the header, on every page, like any other site. */

/* --- animated states, JS only --- */
/* 190svh gave barely one screen of scroll before the hero released.
   340svh lets the pull-back actually play. */
.skyn-motion .hero{height:340svh}
.skyn-motion .hero__stage{transform:scale(3.2);will-change:transform}
.skyn-motion .hero__layer:not(:first-child){opacity:0}
.skyn-motion .hero__scrim{opacity:.15}

/* page hero — interior pages */
.phero{padding:calc(var(--header-h) + clamp(60px,9vw,130px)) 0 clamp(40px,5vw,74px);background:var(--cream)}
.phero__title{max-width:18ch}
.phero__sub{margin-top:20px;max-width:56ch}


/* ------------------------------------------------------------- 9. marquee */
.marquee{
  overflow:hidden;border-block:1px solid var(--rule-soft);
  padding-block:clamp(16px,1.7vw,24px);background:var(--page);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.marquee__track{display:flex;width:max-content;animation:slide 42s linear infinite}
.marquee__track>span{
  display:inline-flex;align-items:center;gap:clamp(26px,3.4vw,58px);padding-right:clamp(26px,3.4vw,58px);
  font:400 clamp(19px,1.6vw,25px)/1 var(--f-display);color:var(--text-muted);white-space:nowrap;
}
.marquee__track em{font-style:normal;color:var(--sand);font-size:.7em}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}

/* ------------------------------------------------------------ 10. product */
/* flex column so a two-line product name does not drop that card's "View"
   link below its neighbours' */
.pcard{display:flex;position:relative}
.pcard>a{display:flex;flex-direction:column;width:100%}
.pcard__frame{position:relative;overflow:hidden;background:var(--clay);aspect-ratio:4/5}
.pcard__frame img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-img) var(--ease)}
.pcard:hover .pcard__frame img{transform:scale(1.05)}
.pcard__no{
  position:absolute;top:16px;left:16px;z-index:2;
  font:400 11px/1 var(--f-ui);letter-spacing:.2em;color:var(--cream);
  text-shadow:0 1px 8px rgba(26,16,8,.5);
}
.pcard__flag{position:absolute;top:14px;right:14px;z-index:2}
.pcard__body{padding-top:20px;display:flex;flex-direction:column;gap:7px;flex:1}
.pcard__name{font:400 clamp(20px,1.6vw,27px)/1.18 var(--f-display);letter-spacing:-.01em}
.pcard__meta{font-size:13px;color:var(--text-soft);line-height:1.55}
.pcard__cta{margin-top:auto;padding-top:5px;color:var(--text-muted);align-self:flex-start}

/* filter bar */
.filters{
  position:sticky;top:var(--header-h);z-index:40;
  background:rgba(253,250,246,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule-soft);
}
.filters__row{display:flex;gap:10px;overflow-x:auto;padding:16px var(--gutter);scrollbar-width:none;max-width:var(--maxw);margin-inline:auto}
.filters__row::-webkit-scrollbar{display:none}

/* single product — scrolling media column + sticky info panel */
.pdp{display:grid;grid-template-columns:1.18fr 1fr;gap:clamp(28px,4vw,80px);align-items:start}
.pdp__media{display:grid;gap:clamp(10px,1.2vw,18px);min-width:0}
.pdp__info{position:sticky;top:calc(var(--header-h) + clamp(24px,4vw,56px));padding-block:clamp(8px,2vw,28px);min-width:0}
.pdp__title{margin:14px 0 12px}
.pdp__batch{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px;font-size:12px;color:var(--text-muted);letter-spacing:.04em}
.stars{color:var(--brown);letter-spacing:.14em;font-size:13px}

.sizes{display:flex;flex-wrap:wrap;gap:9px;margin-top:10px}
.size{
  padding:12px 21px;border-radius:999px;border:1px solid var(--rule);
  font:400 12px/1 var(--f-ui);letter-spacing:.08em;color:var(--text-soft);
  transition:all var(--t-hover) var(--ease);
}
.size:hover{border-color:var(--brown);color:var(--ink)}
.size[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--cream)}

.enquire-box{margin-top:clamp(24px,3vw,38px);padding-top:clamp(22px,2.6vw,32px);border-top:1px solid var(--rule)}
.enquire-box .btn{width:100%}
.enquire-box__note{margin-top:14px;font-size:13px;color:var(--text-soft);line-height:1.6;max-width:44ch}

/* accordion */
.acc{border-top:1px solid var(--rule);margin-top:clamp(26px,3vw,40px)}
.acc__item{border-bottom:1px solid var(--rule)}
.acc__btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:19px 0;text-align:left;
  font:400 14px/1.4 var(--f-ui);letter-spacing:.04em;color:var(--ink);
  transition:color var(--t-hover) var(--ease);
}
.acc__btn:hover{color:var(--brown)}
.acc__sign{position:relative;width:12px;height:12px;flex:none}
.acc__sign::before,.acc__sign::after{
  content:"";position:absolute;background:currentColor;left:50%;top:50%;
  transition:transform var(--t-nav) var(--ease);
}
.acc__sign::before{width:12px;height:1px;transform:translate(-50%,-50%)}
.acc__sign::after{width:1px;height:12px;transform:translate(-50%,-50%)}
.acc__btn[aria-expanded="true"] .acc__sign::after{transform:translate(-50%,-50%) scaleY(0)}
.acc__panel{overflow:hidden;height:0;transition:height var(--t-nav) var(--ease)}
.acc__panel>div{padding:0 0 22px;max-width:62ch;font-size:14px;line-height:1.8;color:var(--text-soft);opacity:0;transition:opacity var(--t-nav) var(--ease)}
.acc__panel.is-open>div{opacity:1}

/* composition breakdown */
.comp{display:grid;gap:1px;background:var(--rule);border-block:1px solid var(--rule)}
.comp__row{display:grid;grid-template-columns:minmax(88px,.5fr) minmax(0,1.3fr) minmax(0,2fr);gap:clamp(14px,2vw,40px);background:var(--page);padding:clamp(20px,2.4vw,34px) 0;align-items:baseline}
.comp__pct{font:400 clamp(24px,2.6vw,42px)/1 var(--f-display);color:var(--brown)}
.comp__name{font:400 clamp(19px,1.4vw,23px)/1.25 var(--f-display)}
.comp__note{font-size:13.5px;line-height:1.75;color:var(--text-soft)}

/* ----------------------------------------------------------- 11. editorial */
/* full-bleed band with parallax */
.band{position:relative;overflow:hidden;min-height:clamp(400px,62vh,720px);display:grid;place-items:center;background:var(--ink)}
.band__media{position:absolute;inset:-12%;z-index:0;will-change:transform}
.band__media img{width:100%;height:100%;object-fit:cover}
.band__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(26,16,8,.52),rgba(26,16,8,.3) 50%,rgba(26,16,8,.62))}
.band__inner{position:relative;z-index:2;text-align:center;padding:clamp(60px,9vw,110px) var(--gutter);max-width:900px}
.band__t{color:var(--cream);font:500 clamp(30px,4.4vw,62px)/1.1 var(--f-display);letter-spacing:.03em;text-transform:uppercase}
.band__p{margin-top:20px;color:var(--on-dark-soft);font-size:var(--fs-lead);line-height:1.6;font-weight:300}
.band__actions{margin-top:34px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap}

/* editorial split */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(28px,4vw,86px);align-items:center}
.split--wide{grid-template-columns:1.05fr .95fr}
.split__body{max-width:52ch}
.split__body>*+*{margin-top:clamp(14px,1.6vw,22px)}

/* numbered ritual steps */
.steps{counter-reset:s}
.step{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,74px);align-items:center;padding-block:clamp(34px,4.4vw,70px);border-top:1px solid var(--rule)}
.step:nth-child(even) .step__media{order:2}
.step__no{font:400 clamp(30px,3vw,50px)/1 var(--f-display);color:var(--tan);display:block;margin-bottom:16px}
.step__body{max-width:46ch}
.step__t{margin-bottom:12px}

/* ingredient tiles */
.ing{display:block;position:relative;overflow:hidden}
.ing__frame{aspect-ratio:1/1;overflow:hidden;background:var(--clay)}
.ing__frame img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-img) var(--ease)}
.ing:hover .ing__frame img{transform:scale(1.05)}
.ing__body{padding-top:16px}
.ing__latin{font:400 italic clamp(19px,1.4vw,23px)/1.3 var(--f-display);margin-bottom:6px}
.ing__note{font-size:13px;line-height:1.7;color:var(--text-soft)}
.ing__in{margin-top:10px;font:400 10px/1 var(--f-ui);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-muted)}

/* never-list */
.never{display:flex;flex-wrap:wrap;gap:10px}
.never li{
  padding:11px 20px;border:1px solid var(--rule-dark);border-radius:999px;
  font-size:12.5px;letter-spacing:.06em;color:var(--on-dark-soft);position:relative;
}
.never li::before{content:"";position:absolute;left:16px;right:16px;top:50%;height:1px;background:currentColor;opacity:.42}

/* journal */
.jcard__frame{aspect-ratio:3/2;overflow:hidden;background:var(--clay)}
.jcard__frame img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-img) var(--ease)}
.jcard:hover .jcard__frame img{transform:scale(1.05)}
.jcard__body{padding-top:18px}
.jcard__kicker{margin-bottom:10px}
.jcard__t{font:400 clamp(20px,1.6vw,28px)/1.22 var(--f-display);letter-spacing:-.01em;text-wrap:pretty}
.jcard__x{margin-top:9px;font-size:13.5px;line-height:1.7;color:var(--text-soft)}

/* reviews */
.rev{padding:clamp(24px,2.6vw,34px);background:var(--page);border:1px solid var(--rule-soft);height:100%;display:flex;flex-direction:column;gap:14px}
.rev__q{font:400 clamp(19px,1.35vw,22px)/1.45 var(--f-display);color:var(--text)}
.rev__by{margin-top:auto;font:400 10px/1 var(--f-ui);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-muted)}

/* contact cards */
.ccard{padding:clamp(26px,3vw,44px);border:1px solid var(--rule);display:flex;flex-direction:column;gap:14px;background:var(--page);transition:border-color var(--t-hover) var(--ease)}
.ccard:hover{border-color:var(--sand)}
.ccard--pref{background:var(--ink);color:var(--on-dark);border-color:var(--ink)}
.ccard--pref .label{color:var(--sand)}
.ccard--pref .ccard__x{color:var(--on-dark-soft)}
.ccard__x{font-size:14px;line-height:1.75;color:var(--text-soft);max-width:40ch}
.ccard .btn{align-self:flex-start;margin-top:6px}

/* ---------------------------------------------------------------12. forms */
.field{display:flex;flex-direction:column;gap:9px}
.field label{font:400 10px/1 var(--f-ui);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-muted)}
.field input,.field textarea,.field select{
  width:100%;padding:15px 17px;background:var(--page);
  border:1px solid var(--rule);border-radius:0;
  font:300 15px/1.5 var(--f-ui);color:var(--ink);
  transition:border-color var(--t-hover) var(--ease);
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--brown)}
.field textarea{min-height:150px;resize:vertical}
.notice{padding:16px 20px;border:1px solid var(--sand);background:var(--cream);font-size:14px;line-height:1.65}
.notice--err{border-color:#A3402B;color:#7C2D1C}

/* --------------------------------------------------------------13. footer */
.ftr{background:var(--ink);color:var(--on-dark);padding-block:clamp(48px,5.5vw,80px) 30px}
.ftr a{color:var(--on-dark-soft);transition:color var(--t-hover) var(--ease)}
.ftr a:hover{color:var(--cream)}
/* `repeat(auto-fit, minmax(150px,1fr))` cannot resolve next to a sibling `fr`
   track — the whole template collapsed to a single 1238px column, which is why
   the footer stacked into one narrow ribbon 1220px tall. Explicit tracks. */
.ftr__grid{
  display:grid;
  grid-template-columns:1.7fr 1fr 1fr 1.1fr;
  gap:clamp(24px,3vw,56px);
  padding-bottom:clamp(36px,4vw,60px);
}
@media (max-width:1080px){.ftr__grid{grid-template-columns:1.4fr 1fr 1fr}}
@media (max-width:760px){.ftr__grid{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.ftr__grid{grid-template-columns:1fr}}
.ftr__mark .mark__word{color:var(--cream)}
.ftr__blurb{margin-top:20px;max-width:34ch;font-size:14px;line-height:1.75;color:var(--on-dark-soft)}
.ftr__h{margin-bottom:18px;color:var(--sand)}
.ftr__list li+li{margin-top:6px}
.ftr__list a{font-size:14px}
.ftr__bottom{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;padding-top:30px;border-top:1px solid var(--rule-dark);font-size:12px;color:var(--on-dark-soft)}
.ftr__bottom nav{display:flex;gap:20px;flex-wrap:wrap}

/* --------------------------------------------------------------14. motion */
/* base reveal — fade + 30px rise. staggered by --i on siblings. */
.skyn-motion [data-reveal]{opacity:0;transform:translateY(30px);will-change:opacity,transform}
.skyn-motion [data-reveal="img"]{transform:none}
.skyn-motion [data-reveal="img"] img,.skyn-motion [data-reveal="img"]>.frame>img{transform:scale(1.06);transition:transform 1.3s var(--ease)}
.skyn-motion .is-in[data-reveal]{opacity:1;transform:none;transition:opacity var(--t-reveal) var(--ease) calc(var(--i,0)*100ms),transform var(--t-reveal) var(--ease) calc(var(--i,0)*100ms)}
.skyn-motion .is-in[data-reveal="img"] img,.skyn-motion .is-in[data-reveal="img"]>.frame>img{transform:scale(1)}

/* hero load — eyebrow fades, headline and sub rise with 180ms stagger */
.skyn-motion .hero__eyebrow,.skyn-motion .hero__sub,.skyn-motion .hero__actions,.skyn-motion .hero__cue{opacity:0}
.skyn-motion .hero.is-ready .hero__eyebrow{animation:fadeIn .9s var(--ease) .15s forwards}
.skyn-motion .hero.is-ready .hero__sub{animation:riseIn 1.15s var(--ease) .51s forwards}
.skyn-motion .hero.is-ready .hero__actions{animation:riseIn 1.15s var(--ease) .69s forwards}
.skyn-motion .hero.is-ready .hero__cue{animation:fadeIn 1s var(--ease) 1.1s forwards}
@keyframes fadeIn{to{opacity:1}}
@keyframes riseIn{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}

/* ------------------------------------------------- 14b. acts + viewers */

/* =========================================================== ACT II
   The four, pinned. Default layout is a plain readable stack, so with no JS
   (or reduced motion) all four products are simply laid out down the page.
   `.skyn-motion` converts it into the pinned, one-at-a-time sequence. */
.actfour{position:relative;background:var(--ink);color:var(--on-dark)}
.actfour__sticky{position:relative}
.actfour__ground,.actfour__rail,.actfour__counter{display:none}
.actfour__stage{display:grid;gap:clamp(40px,6vw,90px);padding-block:var(--section)}

.beat{display:grid;gap:clamp(24px,4vw,64px);align-items:center;
      grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
      max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);width:100%}
.beat__media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--brown)}
.beat__media img{width:100%;height:100%;object-fit:cover}
.beat__body{min-width:0}
.beat__no{font:400 clamp(26px,2.4vw,40px)/1 var(--f-display);color:var(--sand);display:block;margin-bottom:14px}
.beat__name{font:400 clamp(30px,4vw,66px)/1.04 var(--f-display);letter-spacing:-.02em;color:var(--cream);text-wrap:balance}
.beat__sub{margin-top:14px;color:var(--on-dark-soft);font-size:var(--fs-lead);line-height:1.6;max-width:38ch}
.beat__labels{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(20px,2.4vw,30px)}
.beat__labels li{
  padding:9px 16px;border:1px solid var(--rule-dark);border-radius:999px;
  font:400 11px/1 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-soft);
}
.beat__cta{margin-top:clamp(22px,2.6vw,32px);display:inline-flex}

/* --- pinned variant --- */
.skyn-motion .actfour{height:calc(var(--beats,4) * 95svh + 40svh)}
.skyn-motion .actfour__sticky{position:sticky;top:0;height:100svh;height:100dvh;overflow:hidden;display:grid;place-items:center}
.skyn-motion .actfour__ground{display:block;position:absolute;inset:0;z-index:0;background:var(--ink)}
.skyn-motion .actfour__stage{position:absolute;inset:0;z-index:1;padding:0;display:block}
.skyn-motion .beat{
  position:absolute;inset:0;opacity:0;
  align-content:center;padding-block:calc(var(--header-h) + 24px) 80px;
  will-change:transform,opacity;
}
.skyn-motion .beat__body{opacity:var(--bodyO,1)}
.skyn-motion .beat__labels li{opacity:0;transform:translateY(10px)}
.skyn-motion .beat.is-on .beat__labels li{
  opacity:1;transform:none;
  transition:opacity .5s var(--ease) calc(var(--li,0)*90ms + 120ms),transform .5s var(--ease) calc(var(--li,0)*90ms + 120ms);
}
.skyn-motion .actfour__rail{
  display:block;position:absolute;right:var(--gutter);top:28vh;bottom:28vh;width:1px;
  background:var(--rule-dark);z-index:2;
}
.skyn-motion .actfour__rail i{display:block;height:100%;background:var(--cream);transform:scaleY(0);transform-origin:top}
.skyn-motion .actfour__counter{
  display:block;position:absolute;right:var(--gutter);top:calc(28vh - 34px);z-index:2;
  transform:translateX(calc(50% - .5px));
  font:400 11px/1 var(--f-ui);letter-spacing:.2em;color:var(--on-dark-soft);
}
.skyn-motion .actfour__counter b{font-weight:400;color:var(--cream)}

/* Mobile typography floor. Body copy was rendering at 14px with 11-12px
   supporting text, under the 16px readability minimum for small screens. */
@media (max-width:880px){
  :root{
    --fs-body:16px;
    --fs-lead:17px;
    --label:600 11px/1 var(--f-ui);
  }
  .pcard__meta,.jcard__x,.ing__note,.comp__note,.ccard__x,.rstep__x,
  .enquire-box__note,.ftr__blurb,.ftr__list a{font-size:15px;line-height:1.72}
  .beat__sub{font-size:16px}
  .size{font-size:14px}
  .chip{font-size:12px}
  /* chips and the legal line are the only sub-12px text a reader actually
     parses; the remaining 11px items are tracked labels and a decorative
     counter, where 11px is legitimate. */
  .beat__labels li{font-size:12px}
  .ftr__bottom,.ftr__bottom nav a{font-size:13px}
  .btn{font-size:12px}
  .nav a,.acc__btn{font-size:14px}
}

@media (max-width:880px){
  /* portrait composition: image full-bleed, copy over it. same beats. */
  .skyn-motion .beat{grid-template-columns:1fr;gap:0;padding-inline:0}
  .skyn-motion .beat__media{position:absolute;inset:0;aspect-ratio:auto}
  .skyn-motion .beat__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,16,8,.35),rgba(26,16,8,.85))}
  .skyn-motion .beat__body{position:relative;z-index:1;align-self:end;padding:0 var(--gutter) 14svh}
  .skyn-motion .actfour__rail{right:auto;left:var(--gutter);top:20vh;bottom:20vh}
  .skyn-motion .actfour__counter{right:auto;left:var(--gutter);top:calc(20vh - 34px);transform:none}
}

/* =========================================================== ACT III
   The ritual line. Ground and foreground are driven by custom properties the
   engine interpolates, with static fallbacks baked in. */
.ritual{background:var(--cream);color:var(--text);position:relative}
/* the cream-to-ink hand-off, carrying no text of its own */
.ritual__seam{height:clamp(90px,18svh,210px);background:linear-gradient(180deg,var(--cream) 0%,var(--ink) 100%)}
.rline{position:relative;max-width:1100px;margin-inline:auto;padding-inline:var(--gutter)}
.rline__track,.rline__fill{position:absolute;top:0;bottom:0;left:var(--gutter);width:1px;background:currentColor}
.rline__track{opacity:.18}
.rline__fill{transform-origin:top}
.rstep{position:relative;padding-left:clamp(34px,5vw,70px);padding-block:clamp(30px,3.6vw,54px)}
.rstep__dot{position:absolute;left:0;margin-left:-4.5px;top:50%;translate:0 -50%;
            width:9px;height:9px;border-radius:50%;background:currentColor}
.rstep__no{font:400 clamp(24px,2.2vw,38px)/1 var(--f-display);opacity:.5;display:block;margin-bottom:10px}
.rstep__t{font:400 clamp(26px,3vw,46px)/1.1 var(--f-display);letter-spacing:-.015em;margin-bottom:8px}
.rstep__when{font:400 10px/1 var(--f-ui);letter-spacing:var(--track-label);text-transform:uppercase;opacity:.62;display:block;margin-bottom:16px}
.rstep__x{line-height:1.85;max-width:46ch;opacity:.82}
.rstep__media{margin-top:clamp(22px,2.6vw,34px);aspect-ratio:3/2;overflow:hidden;max-width:560px}
.rstep__media img{width:100%;height:100%;object-fit:cover}

/* A centred, alternating timeline looked elegant in the abstract but each
   step then occupies only half the width, so the section ran to 3000px with
   most of it empty. The rail stays on the left and every step uses the FULL
   width, copy one side and image the other, alternating. Same mechanic, half
   the height, no dead space. */
@media (min-width:881px){
  .rstep{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:clamp(30px,4vw,74px);
    align-items:center;
  }
  .rstep__body{grid-column:2}
  .rstep__media{grid-column:1;margin-top:0;max-width:none;aspect-ratio:1/1}
  /* alternate which side the photograph sits on */
  .rstep:nth-child(even) .rstep__body{grid-column:1}
  .rstep:nth-child(even) .rstep__media{grid-column:2}
}

.skyn-motion .rline__fill{transform:scaleY(0)}
.skyn-motion .rstep{opacity:0;transform:translateY(26px)}
.skyn-motion .rstep.is-on{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}
/* the line appears to cut each image open rather than fade it in */
.skyn-motion .rstep__media{clip-path:inset(0 100% 0 0)}
.skyn-motion .rstep.is-on .rstep__media{clip-path:inset(0 0 0 0);transition:clip-path 1.05s var(--ease) .15s}
@media (min-width:881px){
  /* images on the left open leftward, so the reveal always travels away from
     the rail rather than toward it */
  .skyn-motion .rstep:nth-child(odd) .rstep__media{clip-path:inset(0 0 0 100%)}
  .skyn-motion .rstep:nth-child(odd).is-on .rstep__media{clip-path:inset(0 0 0 0)}
}

/* ==================================================== PDP sticky viewer */
.pdp__frame{position:relative;overflow:hidden;background:var(--clay)}
.pdp__shot img{width:100%;height:100%;object-fit:cover;display:block}
.pdp__shot+.pdp__shot{margin-top:clamp(10px,1.2vw,18px)}
.skyn-motion .pdp__shot+.pdp__shot{margin-top:0}
.pdp__dots{position:absolute;right:14px;bottom:14px;z-index:2;display:none;gap:7px}
.pdp__dot{width:6px;height:6px;border-radius:50%;background:rgba(247,241,233,.45);transition:background var(--t-hover) var(--ease),transform var(--t-hover) var(--ease)}
.pdp__dot.is-on{background:var(--cream);transform:scale(1.35)}

.skyn-motion .pdp__media{position:relative;min-height:calc(var(--shots,4) * 62svh)}
.skyn-motion .pdp__frame{position:sticky;top:calc(var(--header-h) + 12px);height:calc(100svh - var(--header-h) - 24px);height:calc(100dvh - var(--header-h) - 24px)}
.skyn-motion .pdp__shot{position:absolute;inset:0;opacity:0;will-change:transform,opacity}
.skyn-motion .pdp__shot:first-child{opacity:1}
.skyn-motion .pdp__dots{display:flex}
@media (max-width:1080px){
  .skyn-motion .pdp__media{min-height:calc(var(--shots,4) * 44svh)}
  .skyn-motion .pdp__frame{height:78svh;height:78dvh}
}

/* ============================================== composition assembling */
.comp__bar{display:block;height:1px;background:var(--rule);margin-top:14px;grid-column:1/-1;overflow:hidden}
.comp__bar i{display:block;height:100%;background:var(--brown);transform:scaleX(0);transform-origin:left}
.skyn-motion .comp__bar i{transition:transform 1s var(--ease) .1s}
.skyn-motion .comp__row{opacity:0;transform:translateY(18px)}
.skyn-motion .comp__row.is-in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}

/* ================================================ per-line headline wipe */
.ln{display:inline-block;overflow:hidden;vertical-align:top}
.ln__i{display:inline-block}
.skyn-motion .ln__i{transform:translateY(105%)}
.skyn-motion .is-in .ln__i,.skyn-motion .hero.is-ready .ln__i{
  transform:none;
  transition:transform .95s var(--ease) calc(var(--l,0)*90ms + var(--d,0ms));
}

/* ------------------------------------------------------------15. responsive */
@media (max-width:1080px){
  .pdp{grid-template-columns:1fr;gap:clamp(28px,4vw,48px)}
  .pdp__info{position:static}
  .split--wide{grid-template-columns:1fr}
  .step{grid-template-columns:1fr;gap:24px}
  .step:nth-child(even) .step__media{order:0}
  .comp__row{grid-template-columns:minmax(70px,.5fr) 1fr;row-gap:8px}
  .comp__note{grid-column:1/-1}
}
@media (max-width:880px){
  :root{--header-h:66px}
  .nav,.hdr__cta .btn--line{display:none}
  .burger{display:flex}
  .hero{min-height:92svh;min-height:92dvh}
  .hero__cue{display:none}
  .ftr__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .ftr__grid{grid-template-columns:1fr}
  .hero__actions .btn{width:100%}
  .btn{padding:14px 24px}
}

/* -------------------------------------------------------------16. a11y */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Touch targets. 10px uppercase labels and 14px footer links render well
   under the 24x24 minimum (WCAG 2.5.8) as bare text, so anything that is
   also a link gets padded out into a tappable box. */
a.label{padding-block:8px;width:fit-content}
.ftr__list a,.ftr__bottom nav a{display:inline-block;padding-block:4px}
.nav a{padding-block:10px}
.size{min-height:44px;display:inline-flex;align-items:center}
/* 'See the product' was a 22px-tall hit area. 44px without pushing the
   underline away from the text. */
.tlink{min-height:44px;padding-block:11px 13px}
.tlink::after{bottom:13px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* drop parallax and reveals, keep opacity */
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  [data-reveal]{opacity:1;transform:none}
  [data-reveal="img"] img,[data-reveal="img"]>.frame>img{transform:none}
  .hero__media,.band__media{transform:none!important;inset:0}
  .hero__eyebrow,.hero__title,.hero__sub,.hero__actions,.hero__cue{opacity:1}
  .marquee__track{animation:none}
  .hero__cue i::after{display:none}
  .pcard:hover .pcard__frame img,.ing:hover .ing__frame img,.jcard:hover .jcard__frame img{transform:none}
}

@media print{
  .hdr,.drawer,.hero__cue,.marquee,.ftr,.filters{display:none}
  body{background:#fff;color:#000}
}