/* ==========================================================================
   אימבר דורס — קונספט דף בית
   Reference lock: Ashton Bespoke (primary) · ORYZO AI (dark stage only)
                   Arsenijs Fabrica (primary CTA pill only)
   Brand colours are the client's own: #5C1420 wordmark, #0C162B mark.
   Every value below is a token. Nothing is hardcoded downstream.
   ========================================================================== */

:root{
  /* surfaces — light */
  --stone:#E4E1DA;          /* warm stone canvas (Ashton) */
  --bone:#F4F1EA;           /* lightest surface */
  --bone-2:#EDE9E0;         /* card on bone */
  /* surfaces — dark stage (ORYZO role: stage only, never a card on light) */
  --stage:#14110F;
  --stage-2:#211B17;
  --stage-3:#2C241E;
  /* ink */
  --ink:#1B1613;
  --ink-2:#574E48;
  --rule:#C8C3B9;
  --rule-soft:rgba(27,22,19,.13);
  /* on stage */
  --cork:#F0E8DC;
  --cork-2:#A0958A;
  --brass:#A8834E;          /* ROLE: hairlines + small labels on the dark stage only */
  --brass-soft:rgba(168,131,78,.34);
  /* brand */
  --ox:#5C1420;             /* primary action + deep band */
  --ox-hot:#75192A;         /* hover only */
  --ox-deep:#3E0D15;
  --navy:#0C162B;           /* logo mark only */

  /* type */
  --f-display:"Heebo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --f-ui:"Heebo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --t-display:clamp(2.45rem,4.6vw,4.7rem);
  --t-h2:clamp(1.95rem,3.5vw,3rem);
  --t-h3:clamp(1.2rem,1.7vw,1.5rem);
  --t-lead:clamp(1.06rem,1.25vw,1.22rem);
  --t-body:1.075rem;
  --t-small:0.9375rem;      /* 15px — nothing smaller ships */
  --t-label:0.875rem;       /* 14px */

  /* space */
  --wrap:1240px;
  --gut:clamp(20px,4.2vw,56px);
  --sec:clamp(72px,9vw,132px);

  /* shape */
  --r-img:2px;              /* architecture is sharp (Ashton) */
  --r-pill:999px;           /* the one soft element: the action (Arsenijs) */
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* One family, two cuts. Heebo is the default; ?type=serif swaps the display
   face to Noto Serif Hebrew for comparison. The serif needs a lighter weight
   and almost no tracking, the sans wants weight and real negative tracking,
   so the two are never just a font-family swap. */
html[data-type="serif"]{--f-display:"Noto Serif Hebrew","Frank Ruhl Libre",Georgia,serif}
html[data-type="serif"] h1,
html[data-type="serif"] h2,
html[data-type="serif"] .display{font-weight:560;letter-spacing:-.008em;line-height:1.06}
html[data-type="serif"] .pay p.pay-num{font-weight:560;letter-spacing:-.035em}
html[data-type="serif"] .poly-badge b{font-weight:560;letter-spacing:normal}
html[data-type="serif"] .drawer nav a{font-weight:400;letter-spacing:normal}

/* ---------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--stone);color:var(--ink);
  font:400 var(--t-body)/1.7 var(--f-ui);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--ox);outline-offset:3px;border-radius:2px}
.stage :focus-visible,.band-ox :focus-visible,
.hdr[data-over="dark"] :focus-visible,.drawer :focus-visible{outline-color:var(--brass)}
.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip{
  position:fixed;inset-block-start:8px;inset-inline-start:8px;z-index:200;
  transform:translateY(-160%);background:var(--ink);color:var(--bone);
  padding:12px 18px;border-radius:var(--r-pill);transition:transform .2s
}
.skip:focus{transform:none}

/* ------------------------------------------------------------- primitives */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wide{max-width:1560px;margin-inline:auto;padding-inline:var(--gut)}
.eyebrow{
  font-size:var(--t-label);font-weight:700;letter-spacing:.12em;
  color:var(--ink-2);margin:0 0 18px;display:flex;align-items:center;gap:12px
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--rule);max-width:120px}
.stage .eyebrow{color:var(--brass)}
.stage .eyebrow::after{background:var(--brass-soft)}
.band-ox .eyebrow{color:rgba(255,255,255,.62)}
.band-ox .eyebrow::after{background:rgba(255,255,255,.24)}

h1,h2,.display{
  font-family:var(--f-display);font-weight:700;line-height:1.02;
  letter-spacing:-.028em;text-wrap:balance
}
h1{font-size:var(--t-display)}
h2{font-size:var(--t-h2);line-height:1.12}
h3{font-family:var(--f-ui);font-weight:600;font-size:var(--t-h3);line-height:1.3;letter-spacing:-.01em}
.lead{font-size:var(--t-lead);line-height:1.62;color:var(--ink-2);text-wrap:pretty}
.stage .lead{color:var(--cork-2)}
.prose p+p{margin-top:1.05em}

/* buttons: the only soft geometry on the page */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:14px 30px;border:1px solid transparent;border-radius:var(--r-pill);
  font-weight:700;font-size:1.0625rem;cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)
}
.btn:active{transform:translateY(1px)}
.btn-ox{background:var(--ox);color:#fff}
.btn-ox:hover{background:var(--ox-hot)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--bone)}
.stage .btn-ghost{color:var(--cork);border-color:rgba(240,232,220,.42)}
.stage .btn-ghost:hover{background:var(--cork);color:var(--stage);border-color:var(--cork)}
.btn-light{background:var(--bone);color:var(--ink)}
.btn-light:hover{background:#fff}
.btn svg{flex:none}

/* framed image — Ashton's signature: 1px ink hairline around every photograph */
.framed{border:1px solid var(--rule);border-radius:var(--r-img);overflow:hidden;background:var(--bone-2)}
.stage .framed{border-color:var(--brass-soft);background:var(--stage-2)}

/* an anchor should land below the floating header, not behind it */
:where(section,footer)[id]{scroll-margin-block-start:96px}
@media (max-width:760px){:where(section,footer)[id]{scroll-margin-block-start:84px}}

/* section bands */
.band{padding-block:var(--sec)}
.band-bone{background:var(--bone)}
.band-stone{background:var(--stone)}
.stage{background:var(--stage);color:var(--cork)}
.stage h1,.stage h2,.stage h3{color:var(--cork)}
.band-ox{background:var(--ox);color:#fff}
.band-ox h2{color:#fff}

/* =============================================================== topbar */
.topbar{background:var(--stage);color:var(--cork-2);font-size:var(--t-label);
  border-block-end:1px solid rgba(168,131,78,.22)}
.topbar .wide{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:44px}
.topbar a{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--cork)}
.topbar a:hover{color:var(--brass)}
.topbar-links{display:flex;align-items:center;gap:22px}
.topbar-note{display:flex;align-items:center;gap:9px;color:var(--brass);font-weight:600}
.topbar-note::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brass)}
@media (max-width:860px){.topbar-note{display:none}}
.topbar a{white-space:nowrap}
@media (max-width:520px){.topbar .wide{justify-content:center}.topbar-links{gap:16px}}
@media (max-width:430px){.topbar-links a[href^="mailto"]{display:none}}

/* =============================================================== header
   Liquid Glass, clear variant, on the control clusters rather than a
   full-width bar: the logo is one capsule, the links plus the action are the
   other. The material has no colour of its own, it borrows from whatever the
   page is showing underneath, so the only thing that changes between a light
   band and a dark one is the ink and the hairline. At the very top there is
   no capsule at all.
   ------------------------------------------------------------------------ */
.hdr{position:sticky;top:0;z-index:80;background:transparent;pointer-events:none}
.hdr .wide{display:flex;align-items:center;gap:clamp(10px,1.4vw,16px);
  min-height:74px;transition:min-height .35s var(--ease)}
.hdr.is-stuck .wide{min-height:66px}
.hdr a,.hdr button{pointer-events:auto}

.cap{position:relative;border:1px solid transparent;border-radius:var(--r-pill);
  transition:background-color .4s var(--ease),border-color .4s var(--ease),
             box-shadow .4s var(--ease),backdrop-filter .4s var(--ease),color .4s var(--ease)}
/* the inset highlight along the top edge is what makes it read as glass and
   not as a translucent rectangle */
.cap::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);opacity:0;transition:opacity .4s var(--ease)}
.hdr.is-stuck .cap::before{opacity:1}

.hdr.is-stuck .cap{
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  backdrop-filter:blur(22px) saturate(180%);
  box-shadow:0 10px 34px rgba(20,17,15,.14)}
.hdr.is-stuck[data-over="light"] .cap{background-color:rgba(255,255,255,.5);border-color:rgba(27,22,19,.10)}
.hdr.is-stuck[data-over="dark"] .cap{background-color:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}
.hdr.is-stuck[data-over="dark"] .cap::before{box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hdr.is-stuck[data-over="light"] .cap{background-color:rgba(244,241,234,.94)}
  .hdr.is-stuck[data-over="dark"] .cap{background-color:rgba(20,17,15,.86)}
}

.brand{order:2;flex:none;display:flex;align-items:center;padding:9px 18px}
.brand img,.brand svg{width:clamp(92px,7.6vw,118px);height:auto;
  transition:width .35s var(--ease),filter .4s var(--ease)}
.hdr[data-over="dark"] .brand img{filter:brightness(0) invert(1) opacity(.94)}

.nav-cluster{order:1;margin-inline-end:auto;display:flex;align-items:center;gap:4px;padding:5px 16px 5px 5px}
.nav{display:flex;align-items:center;gap:clamp(8px,1.1vw,18px)}
.nav a{position:relative;padding:11px 4px;font-size:var(--t-small);font-weight:500;
  color:var(--ink-2);transition:color .3s}
.hdr[data-over="dark"] .nav a{color:rgba(240,232,220,.74)}
.nav a::after{content:"";position:absolute;inset-block-end:5px;inset-inline:2px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:inline-end;
  transition:transform .3s var(--ease)}
.nav a:hover{color:var(--ink)}
.hdr[data-over="dark"] .nav a:hover{color:var(--cork)}
.nav a:hover::after{transform:scaleX(1);transform-origin:inline-start}
.hdr .btn{order:2;min-height:44px;padding:10px 20px;font-size:var(--t-small)}
/* oxblood on the oxblood band would vanish, so over any dark surface the
   action flips to the light fill and keeps its job as the loudest thing here */
.hdr[data-over="dark"] .btn-ox{background:var(--cork);color:var(--stage)}
.hdr[data-over="dark"] .btn-ox:hover{background:#fff}
.nav{order:1}

.burger{order:1;display:none;width:48px;height:48px;align-items:center;justify-content:center;
  background:transparent;cursor:pointer;margin-inline-end:auto;padding:0}
.hdr:not(.is-stuck) .burger{border-color:var(--rule)}
.burger span{display:block;width:19px;height:1.5px;background:var(--ink);position:relative;transition:.3s var(--ease)}
.burger span::before,.burger span::after{content:"";position:absolute;inset-inline:0;height:1.5px;
  background:var(--ink);transition:.3s var(--ease)}
.hdr[data-over="dark"] .burger span,
.hdr[data-over="dark"] .burger span::before,
.hdr[data-over="dark"] .burger span::after{background:var(--cork)}
.burger span::before{top:-6px} .burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
@media (max-width:1080px){
  .nav-cluster{display:none}
  .burger{display:inline-flex}
}
@media (prefers-reduced-transparency:reduce){
  .hdr.is-stuck .cap{-webkit-backdrop-filter:none;backdrop-filter:none}
  .hdr.is-stuck[data-over="light"] .cap{background-color:rgba(244,241,234,.96)}
  .hdr.is-stuck[data-over="dark"] .cap{background-color:rgba(20,17,15,.9)}
}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:90;background:var(--stage);color:var(--cork);
  clip-path:circle(0 at var(--cx,90%) 42px);transition:clip-path .55s var(--ease);
  display:flex;flex-direction:column;justify-content:center;overflow-y:auto;
  padding:76px var(--gut) calc(24px + env(safe-area-inset-bottom))}
/* centring a taller-than-viewport flex column clips its top, so short screens
   start at the top and scroll instead */
@media (max-height:760px){.drawer{justify-content:flex-start}}
.drawer[hidden]{display:none}
.drawer.is-open{clip-path:circle(165% at var(--cx,90%) 42px)}
.drawer-close{position:absolute;inset-block-start:14px;inset-inline-start:var(--gut);
  width:46px;height:46px;display:grid;place-items:center;background:transparent;
  border:1px solid rgba(240,232,220,.3);border-radius:var(--r-pill);color:var(--cork);cursor:pointer;font-size:22px}
.drawer nav{display:grid;gap:2px}
.drawer nav a{font-family:var(--f-display);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1.5rem,6.4vw,2rem);padding-block:7px;color:var(--cork);opacity:0;transform:translateY(14px);
  transition:opacity .4s var(--ease),transform .4s var(--ease);transition-delay:calc(var(--i)*45ms + 120ms)}
.drawer.is-open nav a{opacity:1;transform:none}
.drawer-cta{display:grid;gap:10px;margin-top:26px}
.drawer-cta .btn{width:100%}
.drawer-cta .btn-ghost{color:var(--cork);border-color:rgba(240,232,220,.42);background:transparent}
.drawer-cta .btn-ghost:hover{background:var(--cork);color:var(--stage);border-color:var(--cork)}
.drawer-foot{margin-top:26px;padding-top:18px;border-top:1px solid rgba(168,131,78,.28);
  display:grid;gap:12px;font-size:var(--t-small);color:var(--cork-2)}
.drawer-foot a{display:inline-flex;align-items:center;min-height:44px;color:var(--cork)}
.drawer-foot{gap:0}
html.is-locked,html.is-locked body{overflow:hidden}

/* ================================================================= film
   A door that actually opens. The frames are decoded once into WebP and drawn
   to a canvas; scrubbing a <video> by currentTime judders on sparse keyframes.
   The pin is sticky inside a tall runway, so scroll distance maps to frame.
   Copy is never hidden: it sits at full opacity from frame 0.
   ------------------------------------------------------------------------ */
.film{position:relative;background:var(--stage)}
.film-runway{height:245svh}
.film-pin{position:sticky;top:0;height:100svh;overflow:hidden;display:grid}
.film-poster,.film-canvas{position:absolute;inset:0;width:100%;height:100%}
.film-poster img{width:100%;height:100%;object-fit:cover;object-position:24% 42%}
.film-canvas{opacity:0;transition:opacity .35s linear}
.film.is-live .film-canvas{opacity:1}
.film-scrim{position:absolute;inset:0;pointer-events:none}
.film[data-tone="light"]{background:#D9D4CC}
.film[data-tone="light"] .film-scrim{
  background:linear-gradient(to left,rgba(233,229,222,.97) 0%,rgba(233,229,222,.9) 26%,rgba(233,229,222,.55) 44%,rgba(233,229,222,0) 62%)}
.film[data-tone="dark"] .film-scrim{
  background:linear-gradient(to left,rgba(18,13,10,.94) 0%,rgba(18,13,10,.84) 26%,rgba(18,13,10,.5) 46%,rgba(18,13,10,0) 66%)}

.film-copy{position:relative;z-index:2;align-self:center;width:100%}
.film-text{max-width:min(52%,640px)}
.film[data-tone="dark"] .film-text{color:var(--cork)}
.film[data-tone="dark"] h2{color:var(--cork)}
.film[data-tone="dark"] .lead{color:#D6C9B8}
.film[data-tone="dark"] .eyebrow{color:var(--brass)}
.film[data-tone="dark"] .eyebrow::after{background:var(--brass-soft)}
.film-text h1{margin-bottom:22px}
.film-text h2{margin-bottom:18px}
.film-text .lead{margin-bottom:30px;max-width:36ch}
.film-text .btn{margin-top:2px}

.hero-kicker{display:flex;align-items:center;gap:12px;font-size:var(--t-label);
  font-weight:700;letter-spacing:.12em;color:var(--ox);margin-bottom:22px}
.hero-kicker::before{content:"";width:34px;height:1px;background:var(--ox)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.hero-hint{display:flex;align-items:center;gap:9px;margin-top:26px;
  font-size:var(--t-label);font-weight:600;letter-spacing:.04em;color:var(--ox);
  opacity:clamp(0,calc(1 - var(--p,0) * 2.6),1);transition:opacity .2s linear}
.hero-hint svg{animation:bob 2.4s var(--ease) infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* the loader is a hairline, not a spinner: it should not be the thing you watch */
.film-load{position:absolute;inset-block-end:0;inset-inline:0;height:2px;z-index:3;
  background:var(--brass);transform-origin:inline-start;transform:scaleX(var(--load,0));
  opacity:calc(1 - var(--loaded,0));transition:transform .25s linear,opacity .5s .3s}

@media (max-width:900px){
  .film-runway{height:215svh}
  .film-pin{align-content:end}
  .film-poster img{object-position:50% 44%}
  .film-copy{padding-block-end:clamp(26px,7vw,54px)}
  .film-text{max-width:none}
  .film[data-tone="light"] .film-scrim{
    background:linear-gradient(to top,rgba(235,231,224,.985) 0%,rgba(235,231,224,.96) 40%,rgba(235,231,224,.72) 58%,rgba(235,231,224,0) 82%)}
  .film[data-tone="dark"] .film-scrim{
    background:linear-gradient(to top,rgba(18,13,10,.97) 0%,rgba(18,13,10,.93) 40%,rgba(18,13,10,.66) 58%,rgba(18,13,10,0) 82%)}
  .film-text .lead{max-width:none;margin-bottom:24px}
}
@media (max-width:560px){
  .film-runway{height:200svh}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%}
  .film-text .lead{font-size:1.02rem}
}

/* proof strip */
.proof{border-block-end:1px solid var(--rule-soft);background:var(--stone)}
.proof ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.proof li{padding:26px 4px;display:flex;align-items:flex-start;gap:12px;
  border-inline-start:1px solid var(--rule-soft);padding-inline-start:clamp(14px,2vw,28px)}
.proof li:first-child{border-inline-start:0;padding-inline-start:0}
.proof b{display:block;font-size:var(--t-small);font-weight:700;letter-spacing:-.005em}
.proof span{display:block;font-size:var(--t-label);color:var(--ink-2);margin-top:2px}
.proof svg{flex:none;margin-top:3px;color:var(--ox)}
@media (max-width:900px){
  .proof ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
  .proof li{border-inline-start:0;padding-inline-start:0;padding-block:18px}
  .proof li:nth-child(even){border-inline-start:1px solid var(--rule-soft);padding-inline-start:18px}
}
/* ============================================================== clients */
.clients-head{margin-bottom:clamp(30px,4vw,52px)}
.clients-head h2{max-width:22ch}
.clients-sub{margin-top:14px;color:var(--ink-2);font-size:var(--t-lead);max-width:38ch}
.marquee{position:relative;overflow:hidden;
  -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{direction:ltr;display:flex;width:max-content;gap:clamp(38px,5vw,76px);
  align-items:center;animation:marq 46s linear infinite}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
.marquee img{height:clamp(40px,4.4vw,58px);width:auto;object-fit:contain;
  mix-blend-mode:multiply;filter:grayscale(1) contrast(1.05);opacity:.72;
  transition:filter .35s,opacity .35s}
.marquee img:hover{filter:none;opacity:1}
.marquee-track{padding-block:6px}
@keyframes marq{to{transform:translateX(-50%)}}

/* ========================================================== collections */
.coll-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:22px;margin-bottom:clamp(34px,4vw,58px)}
.coll-head h2{max-width:18ch}
.doors{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.5vw,22px)}
.door{display:block;min-width:0}
.door-fig{position:relative;aspect-ratio:3/4.35;overflow:hidden;background:var(--stage-2);
  border:1px solid var(--brass-soft);border-radius:var(--r-img)}
.door-fig img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease),filter .8s var(--ease);filter:brightness(.94)}
.door-fig::after{content:"";position:absolute;inset:11px;border:1px solid rgba(240,232,220,.16);
  pointer-events:none;transition:inset .5s var(--ease),border-color .5s var(--ease)}
.door-fig .spill{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  background:linear-gradient(to left,rgba(255,232,196,.34),rgba(255,232,196,.06) 34%,transparent 62%);
  transition:opacity .6s var(--ease)}
.door:hover .spill,.door:focus-visible .spill{opacity:1}
.door-knob{position:absolute;inset-block-start:50%;inset-inline-start:14px;width:7px;height:20px;
  border-radius:4px;background:var(--brass);transform:translateY(-50%);
  opacity:.85;transition:opacity .4s,transform .4s var(--ease);z-index:2}
.door:hover .door-fig img,.door:focus-visible .door-fig img{
  transform:perspective(1100px) rotateY(-3.2deg) scale(1.045);filter:brightness(1.03)}
.door:hover .door-fig::after{inset:16px;border-color:var(--brass-soft)}
.door:hover .door-knob{opacity:1;transform:translateY(-50%) scale(1.12)}
.door-fig{transform-origin:100% 50%}
.door-cap{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding-block:16px 0;border-block-start:1px solid transparent;transition:border-color .4s}
.door:hover .door-cap{border-color:var(--brass-soft)}
.door-cap b{font-weight:600;font-size:var(--t-small);letter-spacing:-.005em}
.door-cap i{font-style:normal;font-size:var(--t-label);color:var(--cork-2);
  transition:transform .35s var(--ease),color .35s}
.door:hover .door-cap i{color:var(--brass);transform:translateX(4px)}
@media (max-width:1080px){
  .doors{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-inline:var(--gut);margin-inline:calc(var(--gut) * -1);
    padding-block-end:6px;scrollbar-width:none}
  .doors::-webkit-scrollbar{display:none}
  .door{flex:0 0 min(62vw,300px);scroll-snap-align:start}
}
.rail-hint{display:none;margin-top:16px;font-size:var(--t-label);color:var(--cork-2);
  align-items:center;gap:8px}
@media (max-width:1080px){.rail-hint{display:flex}}

/* ============================================================== polymer */
.poly-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(30px,5vw,80px);align-items:center}
.poly-facts{display:grid;gap:0;margin-top:36px;border-block-start:1px solid var(--rule)}
.poly-facts li{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;
  padding-block:22px;border-block-end:1px solid var(--rule)}
.poly-facts b{display:block;font-weight:700;font-size:1.05rem;margin-bottom:3px}
.poly-facts span{display:block;color:var(--ink-2);font-size:var(--t-small);line-height:1.6}
.poly-facts .num{font-family:var(--f-display);font-size:1.3rem;color:var(--ox);line-height:1.2;min-width:26px}
.poly-media{position:relative}
.poly-media img{width:100%;aspect-ratio:1/1;object-fit:cover}
.poly-badge{position:absolute;inset-block-end:-1px;inset-inline-start:-1px;
  background:var(--ox);color:#fff;padding:18px 26px;max-width:min(74%,300px)}
.poly-badge b{display:block;font-family:var(--f-display);font-size:1.5rem;line-height:1.2;font-weight:700;letter-spacing:-.02em}
.poly-badge span{display:block;font-size:var(--t-label);opacity:.82;margin-top:4px}
@media (max-width:900px){.poly-grid{grid-template-columns:minmax(0,1fr)}}

/* ================================================================ about */
.about-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(30px,5vw,80px);align-items:start}
.about-media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.about-cap{margin-top:12px;font-size:var(--t-label);color:var(--ink-2)}
.about-copy .lead{margin-bottom:22px}
.about-copy .prose{color:var(--ink-2);max-width:56ch}
.about-copy .btn{margin-top:30px}
@media (max-width:900px){.about-grid{grid-template-columns:minmax(0,1fr)}}

/* values — a numbered editorial list, not a card grid */
.values{margin-top:clamp(56px,7vw,96px);border-block-start:1px solid var(--rule)}
.value{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);
  gap:clamp(18px,4vw,64px);padding-block:clamp(26px,3vw,40px);border-block-end:1px solid var(--rule)}
.value-i{display:flex;align-items:baseline;gap:14px}
.value-i em{font-style:normal;font-family:var(--f-display);font-size:1rem;color:var(--ox);padding-top:4px}
.value h3{margin:0}
.value p{margin:0;color:var(--ink-2);max-width:62ch;text-wrap:pretty}
@media (max-width:760px){
  .value{grid-template-columns:minmax(0,1fr);gap:10px}
}

/* ============================================================ payments */
.pay{position:relative;overflow:hidden}
.pay::before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 140% at 82% 0%,rgba(255,255,255,.09),transparent 58%);pointer-events:none}
.pay-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(26px,4vw,60px);align-items:center}
.pay .eyebrow{margin-bottom:14px}
.pay h2{margin-bottom:12px}
.pay p{margin:0;color:rgba(255,255,255,.78);max-width:44ch;font-size:var(--t-lead)}
.pay p.pay-num{font-family:var(--f-display);font-weight:800;line-height:.82;
  font-size:clamp(5.5rem,12vw,10rem);color:#fff;letter-spacing:-.05em;white-space:nowrap;
  max-width:none;text-align:center}
.pay p.pay-num small{display:block;font-family:var(--f-ui);font-size:var(--t-label);font-weight:700;
  letter-spacing:.1em;color:rgba(255,255,255,.72);margin-top:14px;line-height:1.5}
@media (max-width:820px){.pay-grid{grid-template-columns:minmax(0,1fr)}}

/* ================================================================= form */
.form-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:clamp(32px,5vw,84px);align-items:start}
.form-side .lead{margin-bottom:30px}
.form-side ul{display:grid;gap:14px}
.form-side li{display:flex;gap:12px;align-items:flex-start;font-size:var(--t-small);color:var(--cork-2)}
.form-side svg{flex:none;margin-top:4px;color:var(--brass)}
.form-side a{display:inline-flex;align-items:center;min-height:44px;color:var(--cork);
  border-block-end:1px solid var(--brass-soft)}
.form-side li{align-items:center}
.form-side a:hover{color:var(--brass)}

form.lead-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.field{display:grid;gap:8px;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-size:var(--t-label);font-weight:600;color:var(--cork-2);letter-spacing:.02em}
.field input,.field select{
  width:100%;min-height:52px;padding:13px 16px;background:transparent;color:var(--cork);
  border:1px solid rgba(240,232,220,.28);border-radius:2px;
  transition:border-color .25s,background .25s}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--cork-2) 50%),linear-gradient(135deg,var(--cork-2) 50%,transparent 50%);
  background-position:calc(16px) calc(50% - 2px),calc(21px) calc(50% - 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.field select option{background:var(--stage-2);color:var(--cork)}
.field input::placeholder{color:rgba(160,149,138,.7)}
.field input:hover,.field select:hover{border-color:rgba(240,232,220,.5)}
.field input:focus,.field select:focus{border-color:var(--brass);background:rgba(168,131,78,.06);outline:none}
.field input:focus-visible,.field select:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.form-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:6px}
.form-note{font-size:var(--t-label);color:var(--cork-2);max-width:34ch}
.form-done{border:1px solid var(--brass-soft);background:var(--stage-2);padding:clamp(26px,4vw,44px)}
.form-done h3{margin-bottom:10px;color:var(--cork)}
.form-done p{margin:0;color:var(--cork-2)}
.form-done .tag{display:inline-block;margin-top:18px;font-size:var(--t-label);color:var(--brass);
  border:1px solid var(--brass-soft);border-radius:var(--r-pill);padding:7px 14px}
@media (max-width:900px){
  .form-grid{grid-template-columns:minmax(0,1fr)}
  form.lead-form{grid-template-columns:minmax(0,1fr)}
}

/* =============================================================== footer */
.ft{background:var(--stage-2);color:var(--cork-2);padding-block:clamp(52px,6vw,80px) 0}
.ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(28px,4vw,56px)}
.ft h4{font-family:var(--f-ui);font-size:var(--t-label);font-weight:700;letter-spacing:.12em;
  color:var(--brass);margin:0 0 18px}
.ft ul{display:grid;gap:0}
.ft ul li{display:flex;align-items:center;min-height:40px}
.ft ul a{display:inline-flex;align-items:center;min-height:44px}
.ft a{color:var(--cork)}
.ft a:hover{color:var(--brass)}
.ft .brand{padding:0}
.ft .brand img,.ft .brand svg{width:140px}
.ft .lg-a,.ft .lg-b{fill:var(--cork)}
.ft-blurb{margin:20px 0 0;font-size:var(--t-small);max-width:34ch;line-height:1.65}
.ft-social{display:flex;gap:10px;margin-top:22px}
.ft-social a{width:44px;height:44px;display:grid;place-items:center;
  border:1px solid rgba(240,232,220,.2);border-radius:var(--r-pill);transition:.25s}
.ft-social a:hover{border-color:var(--brass);color:var(--brass)}
.ft-bottom{margin-top:clamp(38px,5vw,62px);border-block-start:1px solid rgba(240,232,220,.12);
  padding-block:14px 18px;display:flex;flex-wrap:wrap;gap:8px 24px;
  align-items:center;justify-content:space-between;font-size:var(--t-label)}
.ft-bottom span{display:inline-flex;align-items:center;min-height:44px}
.ft-bottom a{display:inline-flex;align-items:center;min-height:44px;padding-inline:4px;
  border-block-end:1px solid rgba(168,131,78,.4)}
@media (max-width:820px){.ft-grid{grid-template-columns:minmax(0,1fr);gap:34px}}

/* ==================================================== mobile action bar */
.actionbar{position:fixed;inset-inline:0;inset-block-end:0;z-index:70;display:none;
  gap:10px;padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));
  background:rgba(20,17,15,.93);backdrop-filter:blur(12px);
  border-block-start:1px solid var(--brass-soft)}
.actionbar .btn{flex:1;min-height:50px;padding-inline:14px;font-size:var(--t-small)}
.actionbar .btn-ghost{color:var(--cork);border-color:rgba(240,232,220,.42);background:transparent}
.actionbar .btn-ghost:hover{background:var(--cork);color:var(--stage);border-color:var(--cork)}
@media (max-width:760px){
  .actionbar{display:flex}
  body{padding-block-end:76px}
  /* the pin is sticky, so body padding cannot push it: reserve the bar here */
  .film-copy{padding-block-end:calc(clamp(22px,5vw,40px) + 76px)}
  .film-load{inset-block-end:76px}
  .film-text .lead{margin-bottom:22px}
  .hero-hint{margin-top:18px}
}

/* ============================================================== motion */
.rise{animation:rise .8s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.d1{animation-delay:.06s}.d2{animation-delay:.13s}.d3{animation-delay:.2s}.d4{animation-delay:.27s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  .hero-hint{opacity:0}
  .film-runway{height:100svh}
  .drawer{transition:none}
}