/* ============================================================
   TOKENS  ·  a single light palette, as the reference has no dark mode
   ============================================================ */
:root{
  --bg:#F7F7F7;
  --surface:#FFFFFF;
  --surface-2:#EEEEEC;
  --ink:#2E2E2E;
  --ink-2:#454545;
  --muted:#595959;

  --line:rgba(46,46,46,.14);
  --line-soft:rgba(46,46,46,.075);

  /* gold survives at label size only, as the single brand trace */
  --gold:#B08A4A;
  --gold-text:#7C5C24;

  /* the one dark field on the page carries the brand colour */
  --dk-bg:#14332F;
  --dk-ink:#F2F2F0;
  --dk-muted:#A3A3A0;
  /* footer greys need to clear 4.5:1 on petrol, which #898989 does not */
  --ft-muted:#9DAAA5;
  --dk-line:rgba(242,242,240,.20);
  --dk-gold:#CBA362;

  --cta-bg:#14332F;
  --cta-fg:#F7F7F7;
  --cta-bg-h:#0E2622;

  --veil:247,247,247;
  --veil-top:.34;

  /* the reference runs a 9-column grid with 4px gutters, images to the edge */
  --gut:4px;
  --edge:clamp(10px,1.1vw,15px);
  --tx:clamp(22px,6vw,160px);
  --sec:clamp(84px,9.4vw,128px);

  /* the reference's own stack. Helvetica Now is licensed Monotype software and
     cannot be redistributed, so Helvetica Neue carries it on macOS and Arial
     elsewhere, exactly as the reference itself falls back. */
  --f:"Helvetica Now Display","Helvetica Now","Helvetica Neue",Helvetica,Arial,sans-serif;
}

/* ============================================================
   BASE
   ============================================================ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f);
  font-size:16px;
  font-weight:400;
  line-height:1.40;
  letter-spacing:.0094em;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.skip{position:absolute;left:-9999px;top:0;background:#14332F;color:#F7F7F7;padding:12px 18px;z-index:100;font-size:14px}
.skip:focus{left:12px;top:12px}

.full{padding-inline:var(--edge)}
.tx{padding-inline:var(--tx)}
.sec{padding-block:var(--sec)}
.sec + .sec{padding-top:0}

/* ============================================================
   TYPE  ·  measured off the reference. Every display size is
   weight 400; only labels and card names step up to 500.
   ============================================================ */
.h1{font-size:clamp(2.4rem,4.4vw,4rem);line-height:1.10;letter-spacing:-.023em}
.h2{font-size:clamp(1.9rem,3.3vw,3rem);line-height:1.20;letter-spacing:-.010em}
.h3{font-size:2rem;line-height:1.20;letter-spacing:0}
.h4{font-size:1.5rem;line-height:1.20;letter-spacing:0}
.lg{font-size:1.25rem;line-height:1.40;letter-spacing:.0075em}
.md{font-size:1.125rem;line-height:1.40;letter-spacing:.0083em}
.sub{font-size:1.125rem;font-weight:500;line-height:1.40;letter-spacing:.0083em}
.sm{font-size:.875rem;line-height:1.40;letter-spacing:.0107em;color:var(--muted)}
.lede{font-size:1rem;line-height:1.40;letter-spacing:.0094em;color:var(--muted)}
.p{color:var(--muted)}
.meas{max-width:848px;text-wrap:pretty}
.meas-c{max-width:780px;margin-inline:auto;text-wrap:pretty}

/* the eyebrow: 18px medium in sentence case, not a tracked-out micro label */
.lab{font-size:1.125rem;font-weight:500;line-height:1.40;letter-spacing:.0083em;color:var(--gold-text)}
.cap{font-size:1rem;line-height:1.40;letter-spacing:.0094em;color:var(--muted)}
.center{text-align:center}
.center .lab{display:block;margin-bottom:18px}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:9px;border-radius:0;
  font-size:15px;font-weight:500;padding:14px 24px;text-decoration:none;
  border:1px solid transparent;white-space:nowrap;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.btn{position:relative;overflow:hidden}
.btn .lbl{display:grid;overflow:hidden;height:1.4em}
.btn .lbl span{display:flex;align-items:center;gap:9px;grid-area:1/1;transition:transform .34s cubic-bezier(.4,0,.2,1)}
.btn .lbl span+span{transform:translateY(100%)}
.btn:hover .lbl span{transform:translateY(-100%)}
.btn:hover .lbl span+span{transform:translateY(0)}
.btn .ar{font-weight:400}
.btn-d{background:var(--cta-bg);color:var(--cta-fg);border-color:var(--cta-bg)}
.btn-d:hover{background:var(--cta-bg-h);border-color:var(--cta-bg-h)}
.btn-l{background:#FFFFFF;color:#2E2E2E;border-color:#FFFFFF}
.btn-l:hover{background:#2A2A2A;color:#FFFFFF;border-color:#2A2A2A}
.btn-glass{background:rgba(255,255,255,.15);color:#FFFFFF;border-color:transparent;backdrop-filter:blur(6px)}
.btn-glass:hover{background:#FFFFFF;color:#2E2E2E}
.btn-gh{background:transparent;color:#F2F2F0;border-color:rgba(242,242,240,.42)}
.btn-gh:hover{border-color:#F2F2F0;background:rgba(242,242,240,.10)}
.btn-sm{padding:11px 17px;font-size:14px}

.tlink{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-size:1.125rem;letter-spacing:.0083em;
  color:var(--gold-text);padding-bottom:3px;border-bottom:1px solid rgba(176,138,74,.45);
  transition:gap .2s ease,border-color .2s ease;
}
.tlink:hover{gap:12px;border-bottom-color:currentColor}

/* ============================================================
   HEADER  ·  fixed and transparent, gains a ground on scroll
   ============================================================ */
.hd{position:fixed;top:0;left:0;right:0;z-index:60;border-bottom:1px solid transparent;transition:background .3s ease,border-color .3s ease}
/* over the light page the header inverts to ink on an opaque plate, so content
   scrolling underneath never collides with the logo. Over the hero, the photo
   band and the footer there is no plate: white type with a soft shadow. */
.hd.solid:not(.over-dark){background:var(--bg);border-bottom-color:var(--line-soft)}
.hd.solid:not(.over-dark) .brand,
.hd.solid:not(.over-dark) .burger{color:var(--ink);text-shadow:none}
.hd-in{display:flex;align-items:center;gap:clamp(14px,2.4vw,38px);height:84px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;color:#FFFFFF;transition:color .3s ease,text-shadow .3s ease}
.hd.over-dark .brand{text-shadow:0 1px 14px rgba(0,0,0,.5)}


.logo{height:34px;width:auto;display:block;fill:currentColor}
.ft .logo{height:26px}
/* on a phone the wordmark and the burger label would otherwise meet mid-header */
@media (max-width:520px){.hd .logo{height:25px}}
/* the logo keeps its own setting: Extor's mark is wide-tracked uppercase */
/* the links show on desktop in every header state; the burger only exists on narrow screens */
.hd-right{position:relative;margin-left:auto;display:flex;align-items:center;min-height:34px}
.nav{display:flex;align-items:center;gap:clamp(16px,2vw,30px);transition:opacity .35s ease,transform .35s ease}
.nav a:not(.btn){font-size:1rem;letter-spacing:.0094em;text-decoration:none;color:#FFFFFF;transition:opacity .2s}
.hd.over-dark .nav a:not(.btn){text-shadow:0 1px 14px rgba(0,0,0,.5)}
@media (hover:hover){.nav a:not(.btn):hover{opacity:.68}}
.hd.solid:not(.over-dark) .nav a:not(.btn){color:var(--ink)}
.hd.solid:not(.over-dark) .nav .btn-l{background:var(--cta-bg);border-color:var(--cta-bg);color:#FFFFFF}
.hd.solid:not(.over-dark) .nav .btn-l:hover{background:var(--cta-bg-h);border-color:var(--cta-bg-h)}

.burger{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;gap:12px;white-space:nowrap;
  background:none;border:0;padding:6px 0;cursor:pointer;
  font:inherit;font-size:1.0625rem;letter-spacing:.0094em;
  color:#FFFFFF;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .35s ease,color .3s ease;
}
.hd.over-dark .burger{text-shadow:0 1px 14px rgba(0,0,0,.5)}
.burger .bars{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.burger i{display:block;height:2px;width:28px;background:currentColor;transition:width .25s ease}
.burger i:last-child{width:19px}
@media (hover:hover){.burger:hover i:last-child{width:28px}}

/* no room for inline links on a narrow screen: the burger carries it from the top */
@media (max-width:980px){
  .nav{display:none}
  .burger{opacity:1;visibility:visible;pointer-events:auto}
}
/* the translated labels run longer (German most), so those languages hand over to the burger sooner */
.nav a,.nav .lang-btn{white-space:nowrap}
@media (max-width:1240px){
  html:not([lang="en"]) .nav{display:none}
  html:not([lang="en"]) .burger{opacity:1;visibility:visible;pointer-events:auto}
}

.scrim{
  position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.42);
  opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s;
}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:80;width:min(487px,100%);
  background:#FFFFFF;color:var(--ink);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(28px,3.4vw,44px) clamp(28px,3.4vw,48px) clamp(32px,3.6vw,48px);
  transform:translateX(100%);transition:transform .55s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;
}
body.menu-open .scrim{opacity:1;visibility:visible}
body.menu-open .drawer{transform:none}
body.menu-open{overflow:hidden}
.drawer-close{
  position:absolute;top:clamp(20px,2.4vw,30px);right:clamp(24px,2.8vw,36px);
  width:34px;height:34px;background:none;border:0;padding:0;cursor:pointer;color:var(--ink);
}
.drawer-close::before,.drawer-close::after{
  content:"";position:absolute;left:6px;right:6px;top:50%;height:1.5px;background:currentColor;
}
.drawer-close::before{transform:rotate(45deg)}
.drawer-close::after{transform:rotate(-45deg)}
.drawer-nav{display:flex;flex-direction:column;gap:2px;margin-top:clamp(30px,4vw,48px)}
.drawer-nav a{
  font-size:2rem;line-height:1.20;text-decoration:none;color:var(--ink);
  padding:4px 0;transition:opacity .2s ease;
}
.drawer-nav a:hover{opacity:.55}
.drawer-cta{display:flex;flex-direction:column;gap:20px;padding-top:32px}
.drawer-cta p{font-size:1.25rem;line-height:1.40;letter-spacing:.0075em}
.drawer-cta .btns{display:flex;flex-wrap:wrap;gap:4px}
@media (prefers-reduced-motion:reduce){.drawer,.scrim{transition:none}}

/* everything after the hero rides over it on its own opaque layer */
main > :not(.hero){position:relative;z-index:1;background:var(--bg)}
.ft-outer{position:relative;z-index:1;background:var(--bg)}

/* ============================================================
   1 · HERO  ·  full-bleed image, eyebrow and headline bottom-left,
                buttons bottom-right, as on the reference
   ============================================================ */
.hero{position:sticky;top:0;z-index:0;min-height:93vh;display:flex;overflow:hidden}
.hero-media{position:absolute;inset:0;background:var(--dk-bg)}
/* the mill film, cover-cropped. Dimmed by a measured amount so the white
   type holds over the pale weave that fills half of the footage. */
.hero-media video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:56% 58%;
  filter:brightness(.88) saturate(.94);
  opacity:0;transition:opacity 1.1s ease;
}
.hero-media video.on{opacity:1}
/* the reference's own gradient, plus a short scrim at the very top so the white
   logo and burger hold on a pale slide as well as a dark one */
.hero::after{content:"";position:absolute;inset:0;z-index:3;
  background:
    radial-gradient(ellipse 68% 62% at 50% 48%, rgba(0,0,0,.50), rgba(0,0,0,0) 74%),
    linear-gradient(rgba(0,0,0,.60),rgba(0,0,0,.38) 10%,rgba(0,0,0,0) 22%),
    linear-gradient(rgba(0,0,0,0) 24%,rgba(0,0,0,.14) 46%,rgba(0,0,0,.40) 72%,rgba(0,0,0,.66))}
/* a quiet nudge that there is more below */
.scroll-hint{
  position:absolute;left:50%;bottom:26px;z-index:4;transform:translateX(-50%);
  width:1px;height:52px;overflow:hidden;background:rgba(255,255,255,.28);
}
.scroll-hint i{display:block;width:1px;height:20px;background:#FFFFFF;transform:translateY(-20px)}
.js-anim .scroll-hint i{animation:hintRun 2.4s cubic-bezier(.6,0,.4,1) infinite}
@keyframes hintRun{
  0%{transform:translateY(-20px)}
  55%{transform:translateY(52px)}
  100%{transform:translateY(52px)}
}
@media (max-width:860px){.scroll-hint{display:none}}
@media (prefers-reduced-motion:reduce){.js-anim .scroll-hint i{animation:none;transform:none}}

.hero-in{
  position:relative;z-index:4;align-self:center;margin-inline:auto;width:100%;max-width:52rem;
  padding-block:clamp(96px,11vw,128px) clamp(40px,5vw,64px);
  color:#FFFFFF;text-align:center;text-shadow:0 1px 3px rgba(0,0,0,.30),0 2px 24px rgba(0,0,0,.30);
  display:flex;flex-direction:column;align-items:center;gap:clamp(18px,2vw,24px);
}
.hero .lab{display:block;color:var(--dk-gold);font-size:clamp(1.25rem,1.6vw,1.6rem)}
.hero h1{max-width:16ch;color:#FFFFFF}
.hero h1 .brk{display:none}
.hero .lede{max-width:46ch;color:rgba(255,255,255,.90);margin:0}

/* the hero-wide text-shadow is for legibility straight on the photograph;
   a button label sits on its own background (white, or translucent dark
   behind the glass button) and does not need it. Left on, it read as a
   soft blur around "Request a sample" on the white pill. */
.hero-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:clamp(4px,1vw,10px);text-shadow:none}
@media (min-width:861px){
  .hero-in{max-width:84rem}
  .hero h1{max-width:38ch}
  .hero h1 .brk{display:inline}
}



/* a single datasheet bar under the hero, ruled top and bottom */
.specbar{border-bottom:1px solid var(--line)}
.specbar ul{display:flex;flex-wrap:wrap}
.specbar li{
  flex:1 1 auto;padding:clamp(18px,2vw,26px) clamp(16px,1.8vw,26px);
  border-left:1px solid var(--line-soft);
  font-size:1rem;letter-spacing:.0094em;color:var(--muted);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.specbar li:first-child{border-left:0;padding-left:0}
.specbar b{color:var(--ink);font-weight:500}
@media (max-width:820px){
  .specbar ul{display:grid;grid-template-columns:1fr 1fr}
  /* the base rule sets nowrap for the single-row desktop layout; on a two-column
     grid a long label like "Different cut lengths possible" cannot shrink below
     its own text width, so the grid track (and the page) is forced wider than
     the viewport. min-width:0 lets a grid item shrink past its content size;
     normal lets that text wrap instead of forcing the column open. */
  .specbar li{border-left:0;border-top:1px solid var(--line-soft);padding-inline:0 16px;
    white-space:normal;min-width:0}
  .specbar li:nth-child(-n+2){border-top:0}
  .specbar li:first-child{padding-left:0}
}


/* screen-reader only */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tlink .ext{display:inline-block;transition:transform .22s ease}
.tlink:hover .ext{transform:translate(2px,-2px)}

@media (hover:hover) and (pointer:fine){
  /* collection cards: the weave lifts, the scrim deepens, the label steps up */
  .svc-card img{transition:transform .8s cubic-bezier(.22,.61,.36,1),filter .5s ease}
  .svc-card:hover img{transform:scale(1.05);filter:brightness(1.04)}
  .svc-card .ov{transition:background .45s ease}
  .svc-card:hover .ov{background:linear-gradient(180deg,transparent 22%,rgba(0,0,0,.28) 50%,rgba(0,0,0,.66) 76%,rgba(0,0,0,.88) 100%)}
  .svc-card .nm,.svc-card .ds{transition:transform .45s cubic-bezier(.22,.61,.36,1)}
  .svc-card:hover .nm,.svc-card:hover .ds{transform:translateY(-4px)}
  .svc-card .vw{transition:transform .45s cubic-bezier(.22,.61,.36,1),opacity .35s ease}
  .svc-card:hover .vw{transform:translateY(-4px);opacity:1}
  .svc-card .vw span{display:inline-block;transition:transform .35s ease}
  .svc-card:hover .vw span{transform:translate(3px,-3px)}

  /* accordion rows answer the pointer before they are opened */
  .adv-head:hover h3{opacity:.85}
  .adv-item.on .adv-head:hover h3{opacity:1}
  .adv-head:hover .n{border-color:var(--muted);color:var(--ink)}
  .faq-list summary:hover .pm{transform:scale(1.15)}
  .faq-list .pm{transition:transform .25s ease}

  /* the logo dims very slightly, so it reads as a link */
  .brand{transition:opacity .2s ease}
  .brand:hover{opacity:.72}

  /* partner names are not links, but the showroom row should not look dead */
}

/* ============================================================
   MADE TO MEASURE  ·  the three colourways carry the promise
   ============================================================ */
.cw{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut);margin-top:clamp(40px,5vw,72px)}
.cw figure{margin:0}
.cw img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.cw figcaption{
  display:flex;align-items:baseline;gap:10px;
  padding-top:16px;font-size:1.125rem;line-height:1.40;letter-spacing:.0083em;
}
.cw figcaption span::before{content:"\00b7";margin-right:10px;color:var(--line)}
.cw figcaption b{font-weight:500}
.cw figcaption span{color:var(--muted)}
@media (max-width:760px){
  .cw{grid-template-columns:1fr;gap:clamp(26px,4vw,40px)}
  .cw img{aspect-ratio:3/2}
}

/* technical quality: the claims stacked beside a photograph that takes
   its height from the list */
.tq{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(34px,4.6vw,72px);align-items:stretch;margin-top:clamp(44px,5.4vw,76px)}
/* the photograph takes its height from the list beside it, so neither column
   leaves a void */
/* the image is taken out of flow, so the list alone sets the row height and the
   figure stretches to exactly that */
.tq-img{margin:0;position:relative;overflow:hidden}
.tq-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  /* the weaver sits right of centre, so a narrow column crops from the left */
  object-position:66% 42%}
.tq-grid{display:flex;flex-direction:column}
.tq-grid li{display:grid;grid-template-columns:clamp(104px,11vw,150px) 1fr;gap:clamp(18px,2.4vw,36px);
  align-items:start;padding:clamp(18px,2vw,26px) 0;border-top:1px solid var(--line)}
.tq-grid li:last-child{border-bottom:1px solid var(--line)}
.tq-grid .sm{padding-top:4px;overflow-wrap:break-word}
.tq-grid p{margin-top:8px;max-width:56ch;color:var(--muted)}
@media (max-width:900px){
  .tq{grid-template-columns:1fr;gap:36px}
  .tq-img{aspect-ratio:16/10}
}
@media (max-width:600px){
  .tq-grid li{grid-template-columns:1fr;gap:6px}
  .tq-grid .sm{padding-top:0}
}

/* the architect card leads with a photograph */
/* the photograph absorbs whatever height the text leaves, so the card matches
   the column beside it instead of running past it */
.aside-img{margin:0 0 4px;position:relative;overflow:hidden;flex:1 1 0;min-height:200px}
.aside-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,.61,.36,1)}
@media (hover:hover){.aside:hover .aside-img img{transform:scale(1.04)}}

/* ============================================================
   3 · SERVICES CAROUSEL  ·  the reference builds a 3D cylinder:
   perspective 5000px on the stage, cards at rotateY(i·step)
   translateZ(R), and the ring itself turns with scroll.
   ============================================================ */
.svc-stage{
  position:relative;margin-top:clamp(44px,5.4vw,80px);
  perspective:5000px;height:clamp(330px,33vw,475px);
  cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;
}
.svc-stage.dragging{cursor:grabbing}
.svc-stage.dragging .svc-card{pointer-events:none}
.svc-hint{
  display:flex;align-items:center;gap:10px;margin-top:22px;
  font-size:.875rem;letter-spacing:.0107em;color:var(--muted);
}
.svc-hint span{display:inline-block;width:26px;height:1px;background:var(--line)}
@media (hover:none){.svc-stage{cursor:default}}
.svc-ring{
  position:absolute;inset:0;transform-style:preserve-3d;
  transform:translateZ(calc(var(--R,930px) * -1)) rotateY(var(--rot,0deg));
  will-change:transform;
}
.svc-card{
  position:absolute;top:0;left:50%;
  width:var(--cardW,475px);height:100%;margin-left:calc(var(--cardW,475px) / -2);
  transform:rotateY(calc(var(--i) * var(--step,30deg))) translateZ(var(--R,930px));
  backface-visibility:hidden;overflow:hidden;text-decoration:none;display:block;
}
.svc-card img{width:100%;height:100%;object-fit:cover}
.svc-card .ov{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:26px;gap:6px;color:#FFFFFF;
  background:linear-gradient(180deg,transparent 34%,rgba(0,0,0,.20) 56%,rgba(0,0,0,.56) 78%,rgba(0,0,0,.82) 100%);
}
.svc-card .ds{font-size:1.125rem;font-weight:500;line-height:1.40;letter-spacing:.0083em;opacity:.86}
.svc-card .nm{font-size:2rem;font-weight:500;line-height:1.20}
.svc-card .vw{margin-top:10px;font-size:1.125rem;letter-spacing:.0083em;display:inline-flex;align-items:center;gap:8px;opacity:.9}
/* no 3D on a phone: the ring flattens into a swipe row */
@media (max-width:760px){
  .svc-stage{perspective:none;height:auto;display:grid;grid-auto-flow:column;
    grid-auto-columns:minmax(240px,78vw);gap:var(--gut);overflow-x:auto;scroll-snap-type:x proximity;
    padding-inline:var(--edge)}
  .svc-ring{position:static;transform:none;display:contents}
  .svc-card{position:relative;left:auto;top:auto;width:auto;margin:0;transform:none;
    aspect-ratio:475/424;height:auto;scroll-snap-align:start}
  .svc-card:nth-child(n+5){display:none}
}

/* ============================================================
   3 · COLLECTION CARDS (grid, no longer used)  ·  name set large over the weave
   ============================================================ */
.coll{
  display:grid;grid-auto-flow:column;grid-auto-columns:443px;gap:var(--gut);
  margin-top:clamp(44px,5.4vw,80px);overflow-x:auto;scroll-snap-type:x proximity;
  scroll-padding-left:var(--edge);
}
.coll a{position:relative;display:block;text-decoration:none;overflow:hidden;aspect-ratio:443/532;scroll-snap-align:start}
.coll img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.coll a:hover img{transform:scale(1.04)}
.coll .ov{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:26px;gap:6px;color:#FFFFFF;
  background:linear-gradient(180deg,transparent 34%,rgba(0,0,0,.20) 56%,rgba(0,0,0,.56) 78%,rgba(0,0,0,.80) 100%);
}
.coll .ds{font-size:1.125rem;font-weight:500;line-height:1.40;letter-spacing:.0083em;color:#FFFFFF;opacity:.86}
.coll .nm{font-size:2rem;font-weight:500;line-height:1.20}
.coll .vw{margin-top:12px;font-size:1.125rem;letter-spacing:.0083em;display:inline-flex;align-items:center;gap:8px;opacity:.9}
@media (max-width:700px){.coll{grid-auto-columns:78vw}.coll .nm{font-size:1.6rem}}

/* ============================================================
   4 · STATS ROW
   ============================================================ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,48px);margin-top:clamp(48px,6vw,88px)}
.stats li{padding-top:22px;border-top:1px solid var(--line)}
.stats .v{font-size:2rem;line-height:1.20;letter-spacing:0;font-variant-numeric:tabular-nums}
.stats .k{font-size:1.25rem;line-height:1.40;letter-spacing:.0075em;color:var(--muted);margin-top:8px}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   5 · ADVANTAGES  ·  measured off the reference: two 627px columns
   with a 4px gutter, the left one a white panel padded 64/64/40 with
   the heading at the top and the list pushed to the bottom, and the
   image filling the right column. The section pins while it scrolls.
   ============================================================ */
/* the panel and its image sit on the same text grid as every other section */
.adv-sec{padding-inline:var(--tx)}
/* ============================================================
   7 · WHY WHOLESALERS PICK US · a clean 4x2 grid, cards on the
   same 4px gutter as the collection swatches.
   ============================================================ */
.wy-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gut);margin-top:clamp(34px,4vw,56px)}
.wy-grid>li{background:var(--surface);padding:clamp(24px,2.4vw,32px) clamp(22px,2.2vw,28px);display:flex;flex-direction:column;gap:10px}
.wy-grid .n{font-size:.8125rem;letter-spacing:.06em;color:var(--gold-text)}
.wy-grid h3{font-size:1.0625rem;font-weight:500;line-height:1.3}
.wy-grid p{color:var(--muted);margin:0;line-height:1.5;font-size:.9375rem}
@media (max-width:900px){
  .wy-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .wy-grid{grid-template-columns:1fr}
}
.adv{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut);align-items:stretch;width:100%;min-height:clamp(480px,48vw,600px)}
.adv-panel{background:var(--surface);display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(34px,4.4vw,60px) clamp(30px,4.4vw,64px) clamp(28px,3.2vw,44px)}
.adv-col{display:flex;flex-direction:column}
.adv-item{border-bottom:1px solid var(--line-soft)}
.adv-item:first-child{border-top:1px solid var(--line-soft)}
.adv-head{
  display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;width:100%;
  background:none;border:0;padding:14px 0;margin:0;cursor:pointer;font:inherit;color:inherit;text-align:left;
}
.adv-head .n{
  display:flex;align-items:center;justify-content:center;width:45px;height:50px;
  border:1px solid #EFEFEF;font-size:1rem;letter-spacing:.0094em;color:var(--muted);
  font-variant-numeric:tabular-nums;flex-shrink:0;transition:border-color .3s ease,color .3s ease;
}
.adv-item.on .adv-head .n{border-color:var(--line);color:var(--ink)}
.adv-head h3{transition:opacity .3s ease;opacity:.55}
.adv-item.on .adv-head h3{opacity:1}
.adv-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.4,0,.2,1)}
.adv-item.on .adv-body{grid-template-rows:1fr}
.adv-body>div{overflow:hidden}
.adv-body p{color:var(--muted);padding:0 0 20px 65px}
.adv-media{position:relative;overflow:hidden;background:var(--surface-2)}
.adv-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s ease}
.adv-media img.on{opacity:1}
@media (max-width:900px){
  .adv{grid-template-columns:1fr;min-height:0}
  .adv-panel{padding-top:clamp(26px,5vw,40px)}
  .adv-media{aspect-ratio:4/3;order:-1}
  .adv-panel{padding:clamp(26px,5vw,40px) 0 0}
  .adv-body p{padding-left:0}
}

/* ============================================================
   6 · TECHNICAL QUALITY
   ============================================================ */
.tech{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3.2vw,52px);margin-top:clamp(46px,5.6vw,84px)}
.tech li{display:flex;flex-direction:column;gap:10px;padding-top:22px;border-top:1px solid var(--line)}
.tech p{color:var(--muted)}
@media (max-width:1040px){.tech{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.tech{grid-template-columns:1fr}}

/* ============================================================
   7 · MADE TO MEASURE
   ============================================================ */
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3.4vw,60px);margin-top:clamp(30px,3.4vw,44px)}
.two p{color:var(--muted)}
.two p b{color:var(--ink);font-weight:500}
@media (max-width:760px){.two{grid-template-columns:1fr}}

/* ============================================================
   8 · PARTNERSHIP
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(38px,5.6vw,96px);align-items:stretch}
@media (max-width:900px){
  .split{grid-template-columns:1fr;gap:40px}
  .aside{height:auto}
  .aside-img{flex:0 0 auto;aspect-ratio:16/10}
}
.look-for{font-size:1.25rem;font-weight:500;color:var(--ink,inherit)}
.crit{margin-top:clamp(26px,3vw,38px)}
/* no rules here. The tick already separates one criterion from the next, and
   this list sits between four other ruled lists on the same page. */
.crit li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding:9px 0}
.crit .ck{width:16px;height:16px;margin-top:5px;color:var(--gold-text)}
/* min-width:0 undoes the default min-width:auto every grid/flex item carries.
   .aside-img bleeds past this card's own padding on negative margins, and
   without this override that negative margin inflated .aside's min-content
   contribution enough to force the whole grid track (and the section) about
   45px past a 320px viewport, the one width narrow enough for it to bite. */
.aside{background:var(--surface);display:flex;flex-direction:column;gap:16px;height:100%;min-width:0;
  padding:0 clamp(28px,3.2vw,44px) clamp(28px,3.2vw,44px)}
.aside>.lab{margin-top:clamp(24px,2.6vw,32px)}
.aside-img{margin-inline:calc(clamp(28px,3.2vw,44px) * -1);margin-top:0}
.aside p{color:var(--muted)}



/* ============================================================
   CONVERSION BAND  ·  the form sits on the photograph, so the
   page has one unmistakable place to act rather than two weak ones
   ============================================================ */
.contact-band{position:relative;overflow:hidden}
.contact-band > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.contact-band::after{content:"";position:absolute;inset:0;
  background:linear-gradient(92deg,rgba(10,24,21,.92) 0%,rgba(10,24,21,.84) 34%,rgba(10,24,21,.52) 72%,rgba(10,24,21,.34) 100%)}
.contact-band > .split{position:relative;z-index:2;align-items:center}
.contact-band .lab{color:var(--dk-gold)}
.contact-band h2{color:#FFFFFF}
.contact-band .lede.on-dark{color:#D8E1DD}
.contact-band .next .n{color:#9DAAA5}
.contact-band .next span:last-child{color:#EDF1EF}
@media (max-width:900px){.contact-band > .split{align-items:start}}

/* ============================================================
   CONTACT FORM  ·  one form for both funnels, the purpose
   switch decides which extra fields appear
   ============================================================ */
.form-wrap{background:var(--surface);padding:clamp(28px,3.4vw,48px)}
.fieldset{border:0;padding:0;margin:0 0 clamp(22px,2.6vw,30px)}
.fieldset legend{padding:0;margin-bottom:12px;font-size:.875rem;letter-spacing:.0107em;color:var(--muted)}
.pills{display:flex;flex-wrap:wrap;gap:4px}
.pill{position:relative}
.pill input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.pill span{
  display:block;padding:12px 20px;border:1px solid var(--line);
  font-size:1rem;letter-spacing:.0094em;transition:border-color .2s ease,background .2s ease,color .2s ease;
}
.pill input:checked + span{border-color:var(--cta-bg);background:var(--cta-bg);color:var(--cta-fg)}
.pill input:focus-visible + span{outline:2px solid var(--gold);outline-offset:2px}
@media (hover:hover){.pill input:not(:checked):hover + span{border-color:var(--muted)}}

.fields{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,24px)}
.field{display:flex;flex-direction:column;gap:7px}
.field-wide{grid-column:1 / -1}
.field label{font-size:.875rem;letter-spacing:.0107em;color:var(--muted)}
.field label .req{color:var(--gold-text)}
.field input,.field select,.field textarea{
  font:inherit;font-size:1rem;letter-spacing:.0094em;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:10px 0;border-radius:0;transition:border-color .2s ease;
}
.field textarea{resize:vertical;min-height:92px}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 12px) calc(50% + 2px),calc(100% - 7px) calc(50% + 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:26px}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-bottom-color:var(--ink)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.field input:user-invalid,.field select:user-invalid{border-bottom-color:#B4453C}
.field .err{font-size:.875rem;color:#B4453C;display:none}
.field input:user-invalid ~ .err,.field select:user-invalid ~ .err{display:block}

.designs{display:flex;flex-wrap:wrap;gap:4px}
.check{position:relative}
.check input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.check span{display:block;padding:10px 16px;border:1px solid var(--line);font-size:1rem;transition:border-color .2s,background .2s,color .2s}
.check input:checked + span{border-color:var(--cta-bg);background:var(--cta-bg);color:var(--cta-fg)}
.check input:focus-visible + span{outline:2px solid var(--gold);outline-offset:2px}
[hidden]{display:none !important}

.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:clamp(24px,3vw,34px)}
.form-note{font-size:.875rem;line-height:1.5;letter-spacing:.0107em;color:var(--muted);max-width:38ch}
.form-status{
  margin-top:20px;padding:16px 18px;border:1px solid var(--gold-line, rgba(176,138,74,.45));
  background:var(--surface-2);font-size:1rem;line-height:1.5;
}
.form-status:empty{display:none}

.next{margin-top:clamp(28px,3.4vw,40px)}
/* the numbers do the separating */
.next li{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:9px 0}
.next .n{font-size:1rem;letter-spacing:.0094em;color:var(--muted);font-variant-numeric:tabular-nums}
.next span:last-child{font-size:1rem;letter-spacing:.0094em}
@media (max-width:760px){.fields{grid-template-columns:1fr}}

/* samples: when the visitor asks for swatches, the designs come up large on the
   left so they can see what they are ticking */
.samples{margin-top:clamp(26px,3vw,36px)}
.samples-lead{font-size:1rem;letter-spacing:.0094em;color:#D8E1DD;margin-bottom:clamp(18px,2.2vw,26px);max-width:44ch}
.sw-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gut)}
.sw{position:relative;display:block;cursor:pointer;overflow:hidden;aspect-ratio:16/11}
.sw input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.sw img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.sw::after{content:"";position:absolute;inset:0;background:rgba(10,24,21,.34);transition:background .3s ease}
.sw-tx{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px 18px;display:flex;flex-direction:column;gap:2px;color:#FFFFFF;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.62))}
.sw-tx b{font-weight:500;font-size:1.125rem;letter-spacing:.0083em}
.sw-tx em{font-style:normal;font-size:.875rem;letter-spacing:.0107em;color:#CFD8D4}
.sw-tick{position:absolute;top:14px;right:14px;z-index:2;width:24px;height:24px;border:1px solid rgba(255,255,255,.6);
  transition:background .25s ease,border-color .25s ease}
.sw-tick::after{content:"";position:absolute;left:7px;top:11px;width:9px;height:5px;
  border-left:1.5px solid #14332F;border-bottom:1.5px solid #14332F;transform:rotate(-45deg) scale(.4);opacity:0;
  transition:opacity .2s ease,transform .2s ease}
.sw:has(input:checked)::after{background:rgba(10,24,21,.06)}
.sw:has(input:checked) .sw-tick{background:#FFFFFF;border-color:#FFFFFF}
.sw:has(input:checked) .sw-tick::after{opacity:1;transform:rotate(-45deg) scale(1)}
.sw input:focus-visible ~ .sw-tick{outline:2px solid var(--gold);outline-offset:3px}
@media (hover:hover){.sw:hover img{transform:scale(1.05)}.sw:hover::after{background:rgba(10,24,21,.18)}}
@media (max-width:560px){.sw-grid{grid-template-columns:1fr}.sw{aspect-ratio:16/9}}

/* a quiet callout for the question buyers keep asking */
.callout{margin-top:clamp(26px,3vw,38px);padding-top:clamp(22px,2.6vw,30px);border-top:1px solid var(--line);display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.callout p{color:var(--muted);max-width:62ch}
.callout b{color:var(--ink);font-weight:500}
.field .hint{font-size:.875rem;letter-spacing:.0107em;color:var(--muted)}
.field .fl{font-size:.875rem;letter-spacing:.0107em;color:var(--muted)}
.file-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}
.file-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.file-btn{
  font-size:1rem;letter-spacing:.0094em;padding:11px 18px;cursor:pointer;
  border:1px solid var(--line);color:var(--ink);transition:border-color .2s ease;
}
@media (hover:hover){.file-btn:hover{border-color:var(--ink)}}
.file-input:focus-visible + .file-row .file-btn{outline:2px solid var(--gold);outline-offset:3px}
.file-name{font-size:.9375rem;letter-spacing:.0107em;color:var(--muted)}

/* ============================================================
   9 · FAQ  ·  heading left, questions right
   ============================================================ */
.faq{display:grid;grid-template-columns:.72fr 1fr;gap:clamp(34px,5vw,88px);align-items:start}
@media (max-width:900px){.faq{grid-template-columns:1fr;gap:32px}}
.faq-list{border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{
  list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:20px;
  align-items:center;padding:24px 0;font-size:1rem;font-weight:500;letter-spacing:.0094em;
  transition:color .2s ease;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:hover{color:var(--gold-text)}
.faq-list .pm{position:relative;width:14px;height:14px;flex-shrink:0}
.faq-list .pm::before,.faq-list .pm::after{content:"";position:absolute;background:currentColor;transition:transform .25s ease,opacity .25s ease}
.faq-list .pm::before{left:0;right:0;top:6.5px;height:1px}
.faq-list .pm::after{top:0;bottom:0;left:6.5px;width:1px}
.faq-list details[open] .pm::after{transform:scaleY(0);opacity:0}
.faq-list .an{padding:0 0 30px;font-size:1.25rem;line-height:1.45;letter-spacing:.0075em;color:var(--ink);max-width:56ch}

/* ============================================================
   10 · DARK FOOTER  ·  the page's single dark field
   ============================================================ */
.ft-outer{padding:0}
.ft{background:var(--dk-bg);color:var(--dk-ink);padding:clamp(56px,6.4vw,88px) var(--tx) clamp(28px,3vw,36px)}
.ft-cta{display:flex;flex-direction:column;gap:28px;align-items:flex-start}
.ft-cta h2{color:#FFFFFF;max-width:14ch}
.ft-cta .lab{color:var(--dk-gold);display:block;margin-bottom:16px}
.ft-cta p{display:none}
.ft-btns{display:flex;flex-wrap:wrap;gap:10px}

.ft-grid{display:grid;grid-template-columns:1.5fr .8fr .8fr 1.1fr;gap:clamp(26px,4vw,52px)}
.ft .brand{color:var(--dk-ink)}
.ft .brand .mk{color:var(--dk-gold)}
.ft h4{font-weight:400;font-size:.875rem;line-height:1.40;letter-spacing:.0107em;color:var(--ft-muted);margin-bottom:18px}
.ft ul{display:flex;flex-direction:column;gap:10px}
.ft a:not(.btn){color:#FFFFFF;text-decoration:none;font-size:1rem;letter-spacing:.0094em;transition:opacity .2s;opacity:.88}
.ft a:not(.btn):hover{opacity:1}
.ft .tag{font-size:1rem;letter-spacing:.0094em;color:var(--ft-muted);margin-top:18px;max-width:30ch}
.ft-markets{
  display:grid;grid-template-columns:1.9fr 1.1fr;gap:clamp(30px,4vw,64px);
  margin-top:clamp(40px,5vw,64px);padding-top:clamp(30px,3.4vw,44px);
  border-top:1px solid var(--dk-line);
}
.ft .ft-mk{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,34px)}
.ft .ft-loc{grid-template-columns:1fr 1fr}
.ft-mk li{display:flex;flex-direction:column;gap:3px}
.ft-mk b{font-weight:500;font-size:1rem;letter-spacing:.0094em;color:var(--dk-ink)}
.ft-mk span{font-size:.875rem;line-height:1.45;letter-spacing:.0107em;color:var(--ft-muted)}
@media (max-width:900px){
  .ft-markets{grid-template-columns:1fr;gap:34px}
  .ft .ft-mk{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){.ft .ft-mk,.ft .ft-loc{grid-template-columns:1fr}}
.ft-fit{display:block;width:clamp(120px,12vw,150px);margin-top:clamp(32px,4vw,48px);background:#FFFFFF;line-height:0}
.ft-fit img{width:100%;height:auto}
.ft-fit + .ft-base{margin-top:clamp(24px,3vw,36px)}
.ft-base{margin-top:clamp(40px,5vw,64px);padding-top:22px;border-top:1px solid var(--dk-line);display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;font-size:.75rem;line-height:1.40;letter-spacing:.033em;color:#DFDFDF}
@media (max-width:860px){.ft-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.ft-grid{grid-template-columns:1fr}}

/* ============================================================
   MOTION  ·  masked line reveals on headings, a staggered rise
   on blocks, and the reference's hover reveal on project tiles.
   Everything is gated behind .js-anim, which the script only
   adds once it has run, so nothing can be left invisible.
   ============================================================ */
.line-mask{display:block;overflow:clip;padding-bottom:.04em;margin-bottom:-.04em}
.js-anim .line{display:block;transform:translateY(112%);transition:transform .95s cubic-bezier(.22,.61,.36,1)}
.js-anim .line:nth-child(1){transition-delay:0s}
.js-anim .splitlines.in .line{transform:none}
.js-anim .splitlines .line-mask:nth-child(2) .line{transition-delay:.08s}
.js-anim .splitlines .line-mask:nth-child(3) .line{transition-delay:.16s}
.js-anim .splitlines .line-mask:nth-child(4) .line{transition-delay:.24s}

.js-anim [data-rise]{opacity:0;transform:translateY(20px);
  transition:opacity .85s cubic-bezier(.22,.61,.36,1),transform .85s cubic-bezier(.22,.61,.36,1)}
.js-anim [data-rise].in{opacity:1;transform:none}

/* project tiles: label masked until hover, overlay fading in with it */
.mos figure a,.mos figure{position:relative}
.mos .ov{position:absolute;inset:0;background:#000;opacity:0;transition:opacity .5s ease;pointer-events:none;z-index:2}
.mos figure:hover .ov{opacity:.22}
.mos figcaption{z-index:3}
.mos figcaption .mask{display:block;overflow:hidden}
.mos figcaption .mask>span{display:block;transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.js-anim.can-hover .mos figcaption .mask>span{transform:translateY(110%)}
.js-anim.can-hover .mos figure:hover figcaption .mask>span{transform:none}
.js-anim.can-hover .mos figcaption .mask:nth-child(2)>span{transition-delay:.05s}
.js-anim.can-hover .mos figcaption{background:linear-gradient(180deg,transparent,rgba(0,0,0,.62));opacity:0;transition:opacity .4s ease}
.js-anim.can-hover .mos figure:hover figcaption{opacity:1}

@media (prefers-reduced-motion:reduce){
  .js-anim .line,.js-anim [data-rise],.mos .ov,.mos figcaption .mask>span{transition:none}
  .js-anim [data-rise]{opacity:1;transform:none}
  .js-anim .line{transform:none}
  .js-anim.can-hover .mos figcaption{opacity:1}
  .js-anim.can-hover .mos figcaption .mask>span{transform:none}
}

/* ---------- extra motion ---------- */
/* the hero film fades up once it has enough buffer to play smoothly */

/* photographs settle out of a slight scale as their block arrives */
.js-anim [data-rise] .mos-img,
.js-anim [data-rise] .coll-img{transform:scale(1.06);transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
.js-anim [data-rise].in .mos-img,
.js-anim [data-rise].in .coll-img{transform:none}

/* FAQ answers open on a height transition instead of snapping */
.faq-list .an-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s cubic-bezier(.4,0,.2,1)}
.faq-list details.opening .an-wrap,
.faq-list details[open]:not(.closing) .an-wrap{grid-template-rows:1fr}
.faq-list .an-wrap>div{overflow:hidden}
.faq-list .an{opacity:0;transform:translateY(6px);transition:opacity .38s ease .06s,transform .38s ease .06s}
.faq-list details[open]:not(.closing) .an{opacity:1;transform:none}
.faq-list .pm::before{transition:transform .3s cubic-bezier(.4,0,.2,1)}
.faq-list details[open] .pm::before{transform:rotate(180deg)}

/* drawer links arrive one after another */
.drawer-nav a,.drawer-cta{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s cubic-bezier(.22,.61,.36,1)}
body.menu-open .drawer-nav a,body.menu-open .drawer-cta{opacity:1;transform:none}
body.menu-open .drawer-nav a:nth-child(1){transition-delay:.10s}
body.menu-open .drawer-nav a:nth-child(2){transition-delay:.15s}
body.menu-open .drawer-nav a:nth-child(3){transition-delay:.20s}
body.menu-open .drawer-nav a:nth-child(4){transition-delay:.25s}
body.menu-open .drawer-nav a:nth-child(5){transition-delay:.30s}
body.menu-open .drawer-nav a:nth-child(6){transition-delay:.35s}
body.menu-open .drawer-cta{transition-delay:.40s}

/* counting figures keep a stable width so the row does not jitter */
.stats .v{font-variant-numeric:tabular-nums}

/* the open advantage box lifts its border */
.adv-head .n{transition:border-color .35s ease,color .35s ease,background-color .35s ease}
.adv-item.on .adv-head .n{background:var(--surface-2)}

@media (prefers-reduced-motion:reduce){
  .hero-media video{transition:none}
  .js-anim [data-rise] .mos-img,.js-anim [data-rise] .coll-img{transform:none;transition:none}
  .faq-list .an-wrap,.faq-list .an,.drawer-nav a,.drawer-cta{transition:none}
  .drawer-nav a,.drawer-cta{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .coll a:hover img{transform:none}
  .btn:hover .ar{transform:none}
  .faq-list .pm::before,.faq-list .pm::after{transition:none}
}

/* ============================================================
   SUB-PAGES  ·  the opener, the range sections and the spec
   tables. Everything here reuses the homepage tokens; only the
   components that the homepage has no equivalent for are new.
   ============================================================ */

/* the header is solid from the first pixel on a page with no hero, so the
   opener has to clear it itself */
.pagehead{padding-top:calc(84px + clamp(56px,6.4vw,96px))}
.pagehead .lab{display:block;margin-bottom:clamp(16px,2vw,24px)}
.pagehead h1{max-width:19ch;margin-bottom:clamp(22px,2.6vw,34px)}
.ph-actions{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,2.4vw,32px);margin-top:clamp(26px,3vw,38px)}

/* a ruled row of the four lines, so a buyer can go straight to one */
.jump{padding-block:clamp(30px,3.4vw,44px) 0}
/* the first range needs air under the jump row that `.sec + .sec` takes away */
.jump + .range{padding-top:clamp(52px,6vw,84px)}
.jump-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gut)}
.jump-two{grid-template-columns:repeat(2,1fr)}
.jump-row a{
  display:flex;flex-direction:column;gap:4px;text-decoration:none;
  padding:18px 20px 20px;background:var(--surface);
  transition:background .25s ease,transform .25s cubic-bezier(.22,.61,.36,1);
}
.jump-row span{font-size:1.25rem;line-height:1.40;letter-spacing:.0075em}
.jump-row em{font-style:normal;font-size:.875rem;letter-spacing:.0107em;color:var(--muted)}
@media (hover:hover){.jump-row a:hover{background:var(--surface-2);transform:translateY(-2px)}}
@media (max-width:820px){.jump-row{grid-template-columns:1fr 1fr}}

/* range header: name on the left, the three facts a buyer asks for on the right */
.range-head{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;
  gap:clamp(20px,3vw,44px);
  padding-bottom:clamp(20px,2.4vw,30px);border-bottom:1px solid var(--line);
  margin-bottom:clamp(24px,3vw,38px);
}
.range-head .lab{display:block;margin-bottom:10px}
.range-meta{display:flex;gap:clamp(22px,3vw,52px)}
.range-meta dt{font-size:.875rem;letter-spacing:.0107em;color:var(--muted);margin-bottom:5px}
.range-meta dd{margin:0;font-size:1.25rem;line-height:1.40;font-variant-numeric:tabular-nums}
.range + .range{padding-top:0}

.cw-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gut);
  margin-top:clamp(30px,3.6vw,48px);
}
.cw-tile{margin:0}
.cw-tile img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--surface-2)}
/* stacked, not spread: the gutter is 4px, so a name and the next tile's code
   would sit side by side and read as one line */
.cw-tile figcaption{
  display:flex;flex-direction:column;gap:2px;
  padding-top:12px;font-size:1rem;letter-spacing:.0094em;
}
.cw-tile b{font-weight:500}
.cw-tile span{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.875rem}
@media (max-width:1000px){.cw-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.cw-grid{grid-template-columns:repeat(2,1fr)}}

/* the specification, as a list rather than a table: it is two columns of
   facts, not a matrix, and a table would only add rules to read past */
.spec-two{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4.4vw,80px);
  margin-top:clamp(30px,3.6vw,48px);
}
.spec-list div{
  display:grid;grid-template-columns:clamp(150px,15vw,210px) 1fr;gap:clamp(14px,2vw,28px);
  padding:15px 0;border-top:1px solid var(--line-soft);
}
.spec-list div:first-child{border-top:1px solid var(--line)}
.spec-list div:last-child{border-bottom:1px solid var(--line)}
.spec-list dt{font-size:.875rem;letter-spacing:.0107em;color:var(--muted)}
.spec-list dd{margin:0;font-size:1rem;letter-spacing:.0094em}
.spec-marks li{
  display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start;
  padding:13px 0;border-top:1px solid var(--line-soft);color:var(--muted);
}
.spec-marks li:first-child{border-top:1px solid var(--line)}
.spec-marks li:last-child{border-bottom:1px solid var(--line)}
.spec-marks li::before{
  content:"";width:7px;height:7px;margin-top:.52em;background:var(--gold);flex-shrink:0;
}
@media (max-width:900px){.spec-two{grid-template-columns:1fr;gap:34px}}

/* a full-bleed photograph between two sections, edge to edge */
.band{margin:0;position:relative;overflow:hidden}
.band img{width:100%;aspect-ratio:22/11.5;object-fit:cover;display:block}
@media (max-width:760px){.band img{aspect-ratio:3/2}}

/* markets: a state per country, so a buyer can see in one pass whether to ask */
.mk-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut);
  margin-top:clamp(30px,3.6vw,48px);
}
.mk{
  display:flex;flex-direction:column;gap:7px;background:var(--surface);
  padding:clamp(22px,2.6vw,32px);border-top:2px solid var(--line);
}
.mk-open{border-top-color:var(--gold)}
.mk b{font-weight:500;font-size:1.5rem;line-height:1.20}
.mk-state{font-size:.875rem;letter-spacing:.0107em;color:var(--gold-text)}
.mk-taken .mk-state{color:var(--muted)}
.mk-note{font-size:1rem;letter-spacing:.0094em;color:var(--muted);margin-top:4px}
@media (max-width:900px){.mk-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.mk-grid{grid-template-columns:1fr}}

/* the address block */
.loc{margin-top:clamp(26px,3vw,38px)}
.loc div{
  display:grid;grid-template-columns:clamp(110px,11vw,150px) 1fr;gap:clamp(16px,2vw,30px);
  padding:clamp(16px,1.9vw,24px) 0;border-top:1px solid var(--line-soft);
}
.loc div:first-child{border-top:1px solid var(--line)}
.loc div:last-child{border-bottom:1px solid var(--line)}
.loc dt{font-size:.875rem;letter-spacing:.0107em;color:var(--muted)}
.loc dd{margin:0;font-size:1.125rem;line-height:1.55;letter-spacing:.0083em}
.loc dd .sm{display:block;margin-top:7px;line-height:1.45}
.loc dd a{text-decoration:none;border-bottom:1px solid var(--line);transition:border-color .2s ease}
.loc dd a:hover{border-bottom-color:currentColor}
.loc-img{margin:0;display:flex;flex-direction:column;gap:12px}
.loc-img img{width:100%;height:100%;object-fit:cover;flex:1 1 0;min-height:260px}
@media (max-width:900px){
  .loc-img img{flex:0 0 auto;aspect-ratio:16/10;min-height:0}
  .loc div{grid-template-columns:1fr;gap:6px}
}

/* Prose rhythm on the sub-pages. The homepage sets spacing per component and
   the base resets p{margin:0}, so stacked paragraphs need it back. Scoped away
   from `.two`, where the paragraphs are grid cells and a margin would offset
   the second column. */
.pagehead h1 + .p{margin-top:clamp(18px,2vw,26px)}
.sec h2 + .p,
.sec h2 + .stats,
.sec h2 + .mk-grid{margin-top:clamp(18px,2vw,26px)}
:not(.two) > .p + .p{margin-top:1.05em}
.p + .ph-actions,
.stats + .ph-actions{margin-top:clamp(22px,2.6vw,34px)}
.split .lab + h2{margin-top:6px}

/* ============================================================
   LIGHTBOX  ·  one dialog for every gallery on the site. The
   tiles are buttons, so the keyboard reaches them; the dialog
   traps focus and hands it back on close.
   ============================================================ */
.lb-open{
  display:block;width:100%;padding:0;margin:0;border:0;background:none;
  cursor:zoom-in;position:relative;overflow:hidden;
}
.lb-open img{display:block;width:100%}
/* a quiet mark that the picture opens, drawn only for a pointer that hovers */
.lb-open::after{
  content:"";position:absolute;right:12px;bottom:12px;width:26px;height:26px;
  background:
    linear-gradient(#FFFFFF,#FFFFFF) 0 0/9px 1.5px no-repeat,
    linear-gradient(#FFFFFF,#FFFFFF) 0 0/1.5px 9px no-repeat,
    linear-gradient(#FFFFFF,#FFFFFF) 100% 100%/9px 1.5px no-repeat,
    linear-gradient(#FFFFFF,#FFFFFF) 100% 100%/1.5px 9px no-repeat;
  opacity:0;transition:opacity .25s ease;pointer-events:none;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.6));
}
@media (hover:hover){
  .lb-open img{transition:transform .7s cubic-bezier(.22,.61,.36,1)}
  .lb-open:hover img{transform:scale(1.03)}
  .lb-open:hover::after{opacity:1}
}
.lb-open:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* opaque, not a wash: the header is fixed underneath and ghosted through at
   94%. Hiding is the `hidden` attribute alone, because an element still
   transitioning out of `visibility:hidden` cannot take focus, and the close
   button has to. */
.lb{
  position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;
  background:#0C0E0D;
  opacity:0;transition:opacity .3s ease;
}
.lb.on{opacity:1;visibility:visible}
.lb-bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px var(--edge);color:#FFFFFF;flex-shrink:0;
}
.lb-count{font-size:.875rem;letter-spacing:.0107em;color:#9DAAA5;font-variant-numeric:tabular-nums}
.lb-x{
  width:40px;height:40px;background:none;border:0;padding:0;cursor:pointer;
  color:#FFFFFF;position:relative;flex-shrink:0;
}
.lb-x::before,.lb-x::after{
  content:"";position:absolute;left:9px;right:9px;top:50%;height:1.5px;background:currentColor;
}
.lb-x::before{transform:rotate(45deg)}
.lb-x::after{transform:rotate(-45deg)}
.lb-stage{
  flex:1 1 auto;position:relative;display:flex;align-items:center;justify-content:center;
  padding:0 var(--edge);min-height:0;touch-action:pan-y;
}
.lb-stage img{
  max-width:100%;max-height:100%;object-fit:contain;display:block;
  opacity:0;transition:opacity .22s ease;
}
.lb-stage img.ready{opacity:1}
.lb-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:52px;height:52px;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.10);color:#FFFFFF;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease;
}
@media (hover:hover){.lb-nav:hover{background:rgba(255,255,255,.22)}}
.lb-prev{left:var(--edge)}
.lb-next{right:var(--edge)}
.lb-nav::before{
  content:"";width:12px;height:12px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;
}
.lb-prev::before{transform:rotate(-135deg);margin-left:4px}
.lb-next::before{transform:rotate(45deg);margin-right:4px}
.lb-nav[disabled]{opacity:.3;cursor:default}
.lb-cap{
  flex-shrink:0;padding:16px var(--edge) 24px;color:#FFFFFF;
  display:flex;justify-content:space-between;align-items:baseline;gap:18px;flex-wrap:wrap;
}
.lb-cap b{font-weight:500;font-size:1.125rem;letter-spacing:.0083em}
.lb-cap span{font-size:.875rem;letter-spacing:.0107em;color:#9DAAA5;font-variant-numeric:tabular-nums}
body.lb-open-body{overflow:hidden}
@media (max-width:700px){
  .lb-nav{width:44px;height:44px;background:rgba(255,255,255,.16)}
  .lb-cap{padding-bottom:20px}
}
@media (prefers-reduced-motion:reduce){
  .lb,.lb-stage img,.lb-open img{transition:none}
}

/* the mill gallery on the about page */
.mill-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut);
  margin-top:clamp(30px,3.6vw,48px);
}
.mill-tile{margin:0}
.mill-tile img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--surface-2)}
.mill-tile figcaption{display:flex;flex-direction:column;gap:2px;padding-top:12px;font-size:1rem;letter-spacing:.0094em}
.mill-tile b{font-weight:500}
.mill-tile span{color:var(--muted);font-size:.875rem;letter-spacing:.0107em}
@media (max-width:900px){.mill-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.mill-grid{grid-template-columns:1fr}}

/* the colourway figures on the homepage keep their 4:5 crop once the image
   sits inside a button */
.cw .lb-open img{aspect-ratio:4/5;object-fit:cover}

/* ============================================================
   WHATSAPP  ·  fixed bottom right; the to-top button stacks above it
   ============================================================ */
.wa{
  position:fixed;right:clamp(14px,2vw,28px);bottom:clamp(14px,2vw,28px);z-index:56;
  width:56px;height:56px;border-radius:50%;background:#25D366;color:#FFFFFF;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.22);transition:transform .2s ease,box-shadow .2s ease;
}
.wa svg{width:30px;height:30px}
@media (hover:hover){.wa:hover{transform:scale(1.06);box-shadow:0 6px 20px rgba(0,0,0,.28)}}
.wa:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
body.lb-open-body .wa,body.menu-open .wa{opacity:0;visibility:hidden}

/* ============================================================
   BACK TO TOP  ·  bottom right, once the header is a memory
   ============================================================ */
.to-top{
  position:fixed;right:clamp(14px,2vw,28px);bottom:calc(clamp(14px,2vw,28px) + 56px + 12px);z-index:55;
  width:clamp(44px,3.4vw,52px);height:clamp(44px,3.4vw,52px);
  border:0;padding:0;cursor:pointer;
  background:var(--dk-bg);color:#F7F7F7;
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .35s ease,transform .35s cubic-bezier(.22,.61,.36,1),
             visibility .35s,background .25s ease;
}
.to-top.on{opacity:1;visibility:visible;transform:none}
.to-top::before{
  content:"";width:11px;height:11px;margin-top:3px;
  border-top:1.6px solid currentColor;border-right:1.6px solid currentColor;
  transform:rotate(-45deg);
}
@media (hover:hover){.to-top:hover{background:var(--cta-bg-h)}}
.to-top:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* the lightbox owns the screen while it is open */
body.lb-open-body .to-top{opacity:0;visibility:hidden}
@media (prefers-reduced-motion:reduce){.to-top{transition:opacity .2s ease,visibility .2s}}

/* ============================================================
   SMOOTH SCROLLING  ·  every same-page link eases rather than jumps.
   The header is fixed at 84px, so a target has to keep clear of it
   or it lands underneath.
   ============================================================ */
html{scroll-behavior:smooth}
:where([id]){scroll-margin-top:calc(84px + clamp(18px,2.4vw,34px))}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ============================================================
   PARTNERS  ·  the distributors who already carry Extor, drawn
   in one grey. The sources arrive on white, taupe and cream, so
   the ground is masked out per logo rather than desaturated,
   which would only have turned those grounds into grey blocks.
   ============================================================ */
.partners{padding-block:clamp(46px,5vw,72px)}
.partners-head{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:18px;
  padding-bottom:clamp(18px,2vw,26px);border-bottom:1px solid var(--line);
}
.partners-head .lab{display:block;margin-bottom:8px}
.partners-row{
  display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gut);
  margin-top:clamp(22px,2.6vw,34px);
}
/* every mark is redrawn as one grey on transparency, so the tiles no longer
   carry ten different grounds and the row reads as one row */
/* a wide, shallow tile rather than a square one: this is a band of proof, not
   a gallery, and the marks should sit under the heading rather than beside it */
.partners-row li{
  background:var(--surface);
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:3/2;padding:0 14%;
}
/* each file is cropped to its own mark, so contain lets a wide wordmark use
   the width and a square one use the height, instead of every mark being
   capped by the height of a shared square canvas */
.partners-row img{
  max-width:100%;max-height:58%;width:auto;height:auto;object-fit:contain;display:block;
  opacity:.72;transition:opacity .3s ease;
}
@media (hover:hover){
  .partners-row li:hover img{opacity:1}
}
/* ten logos divide by five and by two, and by nothing in between: four or
   three columns leave the last row half empty */
@media (max-width:700px){.partners-row{grid-template-columns:1fr 1fr}}

/* ============================================================
   PROOF BAND  ·  two photographs the client asked for: the racks
   say how much stock stands behind a promise, the binding bench
   says the finishing is done by hand. Full width, because scale
   is the argument and a margin would undercut it.
   ============================================================ */
/* on the text grid, not the edge gutter. Every section on this site runs from
   --tx to --tx; only the hero, the carousel and the contact band are full
   bleed. A band on --edge sits wider than everything above and below it and
   the misalignment is the first thing you see. */
.proof{padding-block:0;padding-inline:var(--tx)}
.proof-two{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut)}
.proof figure{margin:0}
.proof img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;background:var(--surface-2)}
.proof figcaption{
  display:flex;flex-direction:column;gap:3px;
  padding:14px 0 0;
}
.proof figcaption b{font-weight:500;font-size:1.125rem;line-height:1.40;letter-spacing:.0083em}
.proof figcaption span{font-size:1rem;letter-spacing:.0094em;color:var(--muted)}
@media (max-width:760px){
  .proof-two{grid-template-columns:1fr;gap:clamp(26px,4vw,40px)}
  .proof img{aspect-ratio:4/3}
}

/* the honeypot. Off-screen rather than display:none, because a bot that reads
   computed styles skips anything hidden, and a real visitor never reaches it. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ============================================================
   THANK YOU  ·  the page every purpose in the enquiry form
   redirects to on success. No header and no nav: the visitor
   already did the thing this page confirms, so nothing here
   should compete with "back to home".
   ============================================================ */
.thanks{
  position:relative;min-height:100vh;display:flex;align-items:flex-end;
  overflow:hidden;background:var(--dk-bg);
}
.thanks > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:56% 58%}
.thanks::after{content:"";position:absolute;inset:0;
  background:linear-gradient(rgba(0,0,0,0) 18%,rgba(0,0,0,.32) 54%,rgba(0,0,0,.64) 80%,rgba(0,0,0,.80))}
.thanks-brand{
  position:absolute;top:clamp(20px,3vw,34px);left:var(--tx);z-index:2;
  color:#FFFFFF;line-height:0;transition:opacity .2s ease;
}
@media (hover:hover){.thanks-brand:hover{opacity:.72}}
.thanks-in{position:relative;z-index:2;width:100%;padding-block:clamp(64px,10vw,120px);color:#FFFFFF}
.thanks-in .lab{display:block;margin-bottom:clamp(14px,2vw,22px);color:var(--dk-gold)}
.thanks-in h1{max-width:16ch;color:#FFFFFF;margin-bottom:clamp(16px,2vw,24px)}
.thanks-in p{max-width:46ch;color:rgba(255,255,255,.88);margin-bottom:clamp(28px,3.4vw,44px)}

/* ============================================================
   BOTTOM NAV  ·  phone only. Five handy actions rather than a
   second copy of the header: home, the collection, the one
   conversion that matters (raised, in petrol, carrying the weave
   mark), a direct call, and the same drawer the header's own
   burger opens.
   ============================================================ */
.bnav{display:none}
@media (max-width:760px){
  .bnav{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:58;
    background:var(--surface);border-top:1px solid var(--line);
    padding:8px 4px calc(8px + env(safe-area-inset-bottom));
  }
  .bnav a,.bnav button{
    flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:4px;
    background:none;border:0;padding:6px 2px;margin:0;font:inherit;cursor:pointer;
    color:var(--muted);text-decoration:none;font-size:.6875rem;letter-spacing:.0107em;
  }
  .bnav svg{width:22px;height:22px;flex-shrink:0}
  .bnav [aria-current="page"]{color:var(--ink)}
  .bnav .bnav-sample{color:var(--ink);margin-top:-22px}
  .bnav .bnav-sample .bnav-mark{
    width:44px;height:44px;border-radius:50%;background:var(--dk-bg);color:#F7F7F7;
    display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(20,51,47,.35);
  }
  .bnav .bnav-sample .bnav-mark svg{width:20px;height:20px}
  /* room for the bar so it never sits over the last thing on the page */
  body{padding-bottom:64px}
  /* the to-top button would otherwise land on top of the bar */
  .wa{bottom:calc(64px + env(safe-area-inset-bottom) + 14px)}
  .to-top{bottom:calc(64px + env(safe-area-inset-bottom) + 14px + 56px + 12px)}
}
@media (prefers-reduced-motion:reduce){.bnav .bnav-sample .bnav-mark{transition:none}}

.partners-row li{position:relative;padding:0}
.partners-row li a{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 14%}

/* collection overview: two collections, one card each */
.coll-pick{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut)}
.coll-card{display:flex;flex-direction:column;background:var(--surface);transition:background .3s ease}
.coll-card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.cc-tx{display:flex;flex-direction:column;gap:6px;padding:clamp(20px,2.4vw,32px)}
.cc-nm{font-size:clamp(1.75rem,2.6vw,2.5rem);line-height:1.15}
.cc-sub{color:var(--muted)}
.coll-card .vw{margin-top:10px}
@media (hover:hover){.coll-card:hover{background:var(--surface-2)}}
@media (max-width:700px){.coll-pick{grid-template-columns:1fr}}

/* 22 partners do not divide into five columns: wrap and centre the last row */
.partners-row{display:flex;flex-wrap:wrap;justify-content:center}
.partners-row{gap:calc(var(--gut)/2)}
.partners-row li{flex:0 0 calc((100% - 5*var(--gut)/2)/6);aspect-ratio:2/1}
.partners-row li a{padding:0 12%}
.partners-row img{max-height:52%}
@media (max-width:900px){.partners-row li{flex-basis:calc((100% - 2*var(--gut)/2)/3)}}

/* partner map: self-hosted SVG, countries coloured by status, drag and zoom */
.wmap{position:relative;margin-bottom:clamp(26px,3vw,40px)}
.wmap-stage{position:relative;aspect-ratio:16/9;max-height:620px;width:100%;background:var(--surface);overflow:hidden;touch-action:pan-y;cursor:grab}
.wmap-stage:active{cursor:grabbing}
.wmap-stage svg{width:100%;height:100%;display:block}
.wmap-stage path{fill:#E4E4DF;stroke:#FFFFFF;stroke-width:.6;vector-effect:non-scaling-stroke;outline:none}
.wmap-stage path.c-partner{fill:var(--cta-bg);cursor:pointer;transition:fill .2s ease}
.wmap-stage path.c-open{fill:#E6D2A6;cursor:pointer;transition:fill .2s ease}
.wmap-stage path.c-partner:hover,.wmap-stage path.c-partner:focus-visible,.wmap-stage path.c-partner.sel{fill:#2C6A5F}
.wmap-stage path.c-open:hover,.wmap-stage path.c-open:focus-visible,.wmap-stage path.c-open.sel{fill:#D2B676}
.wmap-ctl{position:absolute;top:12px;right:12px;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.wmap-ctl button{background:#FFFFFF;border:0;color:var(--ink);font:inherit;font-size:.875rem;min-width:36px;height:36px;padding:0 12px;cursor:pointer;box-shadow:0 1px 6px rgba(0,0,0,.14)}
.wmap-ctl button:hover{background:var(--surface-2)}
.wmap-tip{position:absolute;pointer-events:none;transform:translate(-50%,calc(-100% - 14px));background:var(--cta-bg);color:#FFFFFF;font-size:.875rem;padding:6px 10px;white-space:nowrap;z-index:3}
.wmap-tip[hidden]{display:none}
.wmap-key{display:flex;gap:22px;list-style:none;padding:0;margin:14px 0 0;font-size:.9375rem;color:var(--muted)}
.wmap-key li{display:flex;align-items:center;gap:8px}
.wmap-key i{width:14px;height:14px;display:block}
.k-partner{background:var(--cta-bg)}.k-open{background:#E6D2A6}
.wmap-panel{margin-top:16px;background:var(--surface);padding:clamp(16px,2vw,26px)}
.wmap-panel ul{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-wrap:wrap;gap:6px 26px}
.wmap-panel a:not(.tlink){color:var(--gold-text)}
.wmap-panel p+p{margin-top:10px}
@media (max-width:700px){.wmap-stage{aspect-ratio:4/3}}

/* lookbook dialog */
.lead-dlg{border:0;padding:0;max-width:min(440px,calc(100vw - 32px));width:100%;background:var(--bg);color:var(--ink);margin:auto}
.lead-dlg::backdrop{background:rgba(0,0,0,.48)}
.lead-form{position:relative;display:flex;flex-direction:column;gap:16px;padding:clamp(24px,3vw,36px)}
.lead-sub{color:var(--muted)}
.lead-x{position:absolute;top:12px;right:12px;width:36px;height:36px;background:none;border:0;cursor:pointer;color:inherit}
.lead-x::before,.lead-x::after{content:"";position:absolute;left:8px;right:8px;top:17px;height:2px;background:currentColor;transform:rotate(45deg)}
.lead-x::after{transform:rotate(-45deg)}
.lead-done{background:var(--surface);padding:14px 16px}
.lead-done a{color:var(--gold-text)}
.lead-form .btn{align-self:flex-start}

/* language switch: a dropdown in the header nav, a row of buttons in the drawer */
.lang{position:relative}
.lang-btn{
  display:flex;align-items:center;gap:7px;background:none;border:0;padding:6px 0;cursor:pointer;
  font:inherit;font-size:1rem;letter-spacing:.0094em;color:#FFFFFF;transition:opacity .2s,color .3s ease;
}
.hd.over-dark .lang-btn{text-shadow:0 1px 14px rgba(0,0,0,.5)}
.hd.solid:not(.over-dark) .lang-btn{color:var(--ink);text-shadow:none}
@media (hover:hover){.lang-btn:hover{opacity:.68}}
.lang-btn i{width:6px;height:6px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg);transition:transform .25s ease}
.lang.open .lang-btn i{transform:translateY(1px) rotate(-135deg)}
.lang-menu{
  position:absolute;top:calc(100% + 14px);right:0;min-width:150px;margin:0;padding:6px;list-style:none;
  background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 12px 32px rgba(0,0,0,.14);
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .2s ease,transform .2s ease,visibility .2s;
}
.lang.open .lang-menu{opacity:1;visibility:visible;transform:none}
.lang-menu button{
  display:block;width:100%;text-align:left;background:none;border:0;border-radius:6px;padding:9px 12px;cursor:pointer;
  font:inherit;font-size:1rem;color:inherit;
}
.lang-menu button:hover{background:var(--surface-2)}
.lang-menu button[aria-current]{font-weight:500;color:var(--gold-text)}
.lang-row{display:flex;gap:6px;flex-wrap:wrap;padding-top:28px}
.lang-row button{
  min-width:48px;padding:9px 12px;background:none;border:1px solid var(--line);border-radius:999px;cursor:pointer;
  font:inherit;font-size:.9375rem;letter-spacing:.04em;color:var(--ink);
}
.lang-row button[aria-current]{background:var(--cta-bg);border-color:var(--cta-bg);color:#FFFFFF}
.i18n-pending body{visibility:hidden}