/* J&T General Construction — materials-led rebuild.
   Surfaces: blueprint (trades) · concrete (process) · deck boards (work)
   · brick courses (dividers) · mortar (notes + estimate) · ink (footer)
   Text never sits bare on a texture. It sits on a plate laid over it. */

/* ================= TOKENS ================= */
:root{
  --ink:        oklch(23% .028 258);   /* his logo */
  --ink-deep:   oklch(20% .028 258);
  --blue:       oklch(53% .106 248);   /* blueprint sheet */
  --blue-pale:  oklch(88% .032 240);
  --hivis:      oklch(69% .238 40);    /* fluorescent safety orange */
  --hivis-lift: oklch(74% .20 46);
  --mortar:     oklch(94% .008 85);
  --paper:      oklch(97% .006 85);
  --graphite:   oklch(48% .020 258);
  --hair:       oklch(23% .028 258 / .16);
  --hair-lite:  oklch(96% .01 240 / .22);

  --ease:cubic-bezier(.16,1,.3,1);
  --t1:260ms; --t2:560ms; --t3:1000ms;
  --maxw:1440px;
  --gut:clamp(20px,4.4vw,64px);
  --bay:clamp(88px,13vh,180px);        /* cinematic section rhythm */
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:"Archivo",system-ui,sans-serif;
  font-variation-settings:"wdth" 100;
  background:var(--ink);color:var(--paper);
  line-height:1.62;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--hivis);outline-offset:3px}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ================= TYPE =================
   Headlines run wide and never exceed three lines. */
h1,h2,h3{font-weight:700;font-variation-settings:"wdth" 115;
         letter-spacing:-.025em;line-height:1.0}
h1{font-size:clamp(3rem,7.4vw,6.6rem);max-width:18ch}
h2{font-size:clamp(2.3rem,5.4vw,4.6rem);line-height:1.02;max-width:19ch}
h3{font-size:1.32rem;font-variation-settings:"wdth" 106;line-height:1.2;
   letter-spacing:-.015em}
.kicker{font-weight:500;font-size:.74rem;text-transform:uppercase;
        letter-spacing:.2em;color:var(--hivis)}
.lead{font-size:clamp(1.1rem,1.6vw,1.36rem);line-height:1.5;max-width:46ch}
p{max-width:66ch}

/* ================= BUTTONS =================
   Notched corner with a hard offset plate behind it. The plate is a
   drop-shadow, not a pseudo-element: clip-path creates a stacking context,
   so a z-index:-1 child paints ON TOP of the button instead of behind it. */
.btn{
  --off:5px;
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:1.12rem 2rem;font-weight:700;font-size:1rem;
  font-variation-settings:"wdth" 108;cursor:pointer;border:0;
  clip-path:polygon(0 0,calc(100% - 15px) 0,100% 15px,100% 100%,15px 100%,0 calc(100% - 15px));
  filter:drop-shadow(var(--off) var(--off) 0 var(--plate,transparent));
  transition:filter var(--t1) var(--ease),background var(--t1) var(--ease),
             translate var(--t1) var(--ease);
}
.btn:hover{--off:3px;translate:1px 1px}
.btn:active{--off:0px;translate:5px 5px}

.btn-hi{--plate:oklch(36% .145 32);background:oklch(57% .215 36);color:var(--paper)}
.btn-hi:hover{background:oklch(62% .225 38)}
.btn-line{--plate:transparent;background:transparent;color:var(--paper);
  box-shadow:inset 0 0 0 1.5px oklch(96% .01 240 / .42)}
.btn-line:hover{box-shadow:inset 0 0 0 1.5px var(--paper)}
.built .btn-line{--plate:transparent;color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--hair)}

/* ================= NAV ================= */
.nav{position:sticky;top:0;z-index:70;background:var(--ink);
     border-bottom:1px solid var(--hair-lite)}
.nav-in{display:flex;align-items:center;gap:1.2rem;
        max-width:var(--maxw);margin:0 auto;padding:9px var(--gut);
        min-height:64px}
.nav-logo{height:50px;width:auto;filter:brightness(0) invert(1)}
.nav-links{display:none;gap:1.7rem;margin-left:auto}
.nav-links a{font-size:.92rem;font-weight:500;color:oklch(97% .006 85 / .78);
  position:relative;padding:.3rem 0;transition:color var(--t1) var(--ease)}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--hivis);scale:0 1;transform-origin:left;
  transition:scale var(--t1) var(--ease)}
.nav-links a:hover{color:var(--paper)}
.nav-links a:hover::after{scale:1 1}
.nav-right{display:flex;align-items:center;gap:.6rem;margin-left:auto}
.nav .btn{padding:.66rem 1.05rem;font-size:.9rem;--off:4px}
.lang{display:inline-flex;overflow:hidden;flex:none;
      box-shadow:inset 0 0 0 1.5px oklch(96% .01 240 / .3)}
.lang button{background:none;border:0;padding:.44rem .68rem;cursor:pointer;
  font-size:.74rem;font-weight:600;letter-spacing:.08em;
  color:oklch(96% .01 240 / .6);transition:background var(--t1),color var(--t1)}
.lang button.on{background:var(--paper);color:var(--ink)}

/* hamburger: two bars that cross into an X */
.burger{display:inline-flex;flex-direction:column;justify-content:center;gap:7px;
  width:46px;height:46px;padding:0 11px;background:none;border:0;cursor:pointer;
  box-shadow:inset 0 0 0 1.5px oklch(96% .01 240 / .3)}
.burger span{display:block;height:2px;background:var(--paper);
  transition:translate var(--t1) var(--ease),rotate var(--t1) var(--ease)}
.burger[aria-expanded="true"] span:first-child{translate:0 4.5px;rotate:45deg}
.burger[aria-expanded="true"] span:last-child{translate:0 -4.5px;rotate:-45deg}

/* full-screen sheet */
.sheet[hidden]{display:none !important}
.sheet{position:fixed;inset:0;z-index:65;background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;gap:2.6rem;
  padding:88px var(--gut) calc(var(--gut) + 20px);
  opacity:0;translate:0 -12px;transition:opacity var(--t1) var(--ease),
  translate var(--t1) var(--ease)}
.sheet.open{opacity:1;translate:0 0}
.sheet__nav{display:flex;flex-direction:column;gap:.2rem}
.sheet__nav a{font-weight:700;font-variation-settings:"wdth" 112;
  font-size:clamp(2rem,8vw,2.8rem);letter-spacing:-.025em;line-height:1.24;
  color:var(--paper);border-bottom:1px solid var(--hair-lite);padding:.5rem 0}
.sheet__foot{display:flex;flex-direction:column;align-items:flex-start;gap:1.15rem}
.sheet__tel{font-weight:700;font-size:1.6rem;color:var(--hivis);
  font-variation-settings:"wdth" 110}
.sheet .btn{width:100%;justify-content:center}

/* desktop: links show, hamburger and sheet go away */
@media(min-width:1080px){
  .nav-links{display:flex}
  .nav-right{margin-left:0}
  .burger{display:none}
  .sheet__foot .lang{display:none}
  .sheet{display:none !important}
}
/* mobile: logo, Call, hamburger. Everything else lives in the sheet. */
@media(max-width:1079px){
  .nav-est{display:none}
}
@media(max-width:520px){
  .nav-logo{height:40px}
  .nav .btn{padding:.6rem .85rem;font-size:.86rem}
}

/* ================= HERO ================= */
.hero{position:relative;min-height:100dvh;display:flex;align-items:flex-end;
      overflow:hidden}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
            object-position:62% center;z-index:0}
.hero__scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(84deg,oklch(17% .024 258 / .95) 0%,oklch(17% .024 258 / .82) 32%,
                  oklch(17% .024 258 / .30) 62%,oklch(17% .024 258 / .12) 100%)}
.hero__in{position:relative;z-index:3;width:100%;max-width:var(--maxw);
          margin:0 auto;padding:0 var(--gut) clamp(52px,8vh,104px)}
.hero__copy{max-width:min(1000px,92%)}
.hero h1{margin:1.1rem 0 0;max-width:16ch}
.hero h1 em{font-style:normal;color:var(--hivis)}
.hero .lead{margin-top:1.5rem;color:oklch(97% .006 85 / .86)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.3rem}
.hero__facts{display:flex;flex-wrap:wrap;gap:.6rem 2.6rem;margin-top:2.6rem;
  padding-top:1.5rem;border-top:1px solid var(--hair-lite)}
.hero__facts span{font-size:.82rem;letter-spacing:.04em;
  color:oklch(97% .006 85 / .74)}
.hero__facts span::before{content:"";display:inline-block;width:14px;height:2px;
  background:var(--hivis);vertical-align:middle;margin-right:.6rem}

/* credentials band: pulled out of the hero, where it was banned */
.creds{border-top:1px solid var(--hair-lite);border-bottom:1px solid var(--hair-lite)}
.creds__in{display:flex;flex-wrap:wrap;gap:.7rem 2.8rem;padding-top:1.1rem;
  padding-bottom:1.1rem}
.creds span{font-size:.82rem;letter-spacing:.03em;color:oklch(97% .006 85 / .74)}
.creds span::before{content:"";display:inline-block;width:14px;height:2px;
  background:var(--hivis);vertical-align:middle;margin-right:.6rem}

/* ================= THE GROUND =================
   One surface for the whole page. No section-by-section texture swaps.
   Materials appear as objects sitting on this ground, never as wallpaper. */
section{padding:var(--bay) 0;position:relative;overflow-x:clip}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 70% at 76% 0%,oklch(29% .034 250 / .55),transparent 62%),
    radial-gradient(90% 60% at 6% 100%,oklch(26% .03 258 / .5),transparent 60%),
    var(--ink)}

/* section boundary: a hairline, not a slab of new material */
.rule{height:1px;background:var(--hair-lite);max-width:var(--maxw);
      margin:0 auto;width:calc(100% - var(--gut) * 2)}

/* The page makes exactly one theme switch: drawing (dark) becomes built (light).
   The light half carries a faint drafting grid so it is never a flat fill. */
.built{background:var(--mortar);color:var(--ink);position:relative}
.built::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(oklch(23% .028 258 / .055) 1px,transparent 1px),
    linear-gradient(90deg,oklch(23% .028 258 / .055) 1px,transparent 1px),
    linear-gradient(oklch(23% .028 258 / .11) 1px,transparent 1px),
    linear-gradient(90deg,oklch(23% .028 258 / .11) 1px,transparent 1px);
  background-size:26px 26px,26px 26px,130px 130px,130px 130px}
.built p{color:var(--graphite)}
.built .kicker{color:oklch(52% .19 42)}
.built .head p{color:var(--graphite)}
/* the seam between the two halves */
.seam{height:5px;background:linear-gradient(90deg,var(--hivis),oklch(47% .18 38))}

/* ---- SECTION BANDS ----
   Every section opens with a full-bleed marker bar, the way a site is signed.
   This is the divider: you cannot miss where one chapter ends and the next starts. */
.band{position:relative;background:oklch(31% .038 252);border-top:4px solid var(--hivis)}
.built .band{background:var(--ink)}
.band__in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  max-width:var(--maxw);margin:0 auto;padding:1.05rem var(--gut)}
.band__name{font-weight:700;font-size:clamp(.92rem,1.5vw,1.12rem);
  font-variation-settings:"wdth" 118;letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper)}
.band__meta{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:oklch(97% .006 85 / .55);white-space:nowrap}
.band__rule{position:absolute;left:0;right:0;bottom:0;height:1px;
  background:repeating-linear-gradient(90deg,oklch(97% .006 85 / .3) 0 10px,
             transparent 10px 20px)}
section{padding-top:clamp(56px,7vh,104px)}

/* ---- PROCESS: a rail that fills as the job progresses ---- */
.steps{display:grid;grid-template-columns:1fr;gap:0;position:relative;
       padding-left:clamp(42px,5vw,74px)}
.steps::before{content:"";position:absolute;left:clamp(14px,1.7vw,26px);top:8px;bottom:8px;
  width:2px;background:oklch(23% .028 258 / .16)}
.steps::after{content:"";position:absolute;left:clamp(14px,1.7vw,26px);top:8px;
  width:2px;height:0;background:var(--hivis);
  transition:height 1600ms cubic-bezier(.22,1,.3,1) 200ms}
.is-in .steps::after{height:calc(100% - 16px)}
.step{padding:clamp(22px,2.6vw,34px) 0;position:relative;
      border-bottom:1px solid var(--hair)}
.step:last-child{border-bottom:0}
.step__n{position:absolute;left:calc(clamp(42px,5vw,74px) * -1);top:clamp(22px,2.6vw,34px);
  width:clamp(30px,3.6vw,54px);text-align:center;font-weight:700;font-size:.86rem;
  letter-spacing:.06em;color:var(--hivis);background:var(--mortar);padding:.35rem 0}
.step h3{font-size:clamp(1.24rem,2.2vw,1.75rem);letter-spacing:-.02em}
.step p{color:var(--graphite);font-size:1.02rem;margin-top:.4rem;max-width:62ch}
@media(min-width:1020px){
  .step{display:grid;grid-template-columns:minmax(0,22ch) 1fr;gap:clamp(24px,4vw,64px);
        align-items:baseline}
  .step p{margin-top:0}
}

.head{margin-bottom:clamp(2.2rem,4.4vh,3.6rem)}
.head h2{margin-top:.85rem}
.head p{margin-top:1.2rem;font-size:1.1rem;color:oklch(97% .006 85 / .72)}

/* ---- running dimension: measures the section it sits beside ---- */
.dimline{position:absolute;left:calc(var(--gut) * .34);top:var(--bay);bottom:var(--bay);
  width:26px;pointer-events:none;display:none}
@media(min-width:1180px){.dimline{display:block}}
.dimline b{position:absolute;left:12px;top:0;bottom:0;width:1px;
  background:currentColor;opacity:.4;transform-origin:top;
  scale:1 0;transition:scale var(--t3) var(--ease)}
.is-in .dimline b{scale:1 1}
.dimline i{position:absolute;left:5px;width:15px;height:1px;background:currentColor;
  opacity:.4}
.dimline i:first-of-type{top:0}
.dimline i:last-of-type{bottom:0}
.dimline span{position:absolute;top:50%;left:50%;translate:-50% -50%;
  rotate:-90deg;white-space:nowrap;font-size:.66rem;letter-spacing:.16em;
  color:var(--hivis);background:inherit;padding:0 .5rem;opacity:0;
  transition:opacity var(--t2) var(--ease) 500ms}
.is-in .dimline span{opacity:1}

/* ---- the blueprint, as a sheet lying on the ground ---- */
.plan-split{display:grid;grid-template-columns:1fr;gap:clamp(34px,5vw,72px);
            align-items:center;margin-bottom:clamp(46px,7vh,92px)}
@media(min-width:1060px){.plan-split{grid-template-columns:1.15fr .85fr}}
/* keep this headline to three lines beside the sheet */
.plan-split .head h2{font-size:clamp(2rem,3.5vw,3.3rem);max-width:15ch}
.sheet-obj{position:relative;rotate:-1.1deg;justify-self:center;
  width:min(100%,440px);margin-inline:auto;
  box-shadow:0 40px 80px -34px oklch(10% .02 250 / .95),
             0 2px 0 oklch(97% .006 85 / .1);
  transition:rotate var(--t3) var(--ease),translate var(--t3) var(--ease);
  translate:0 22px}
.is-in .sheet-obj{rotate:-1.1deg;translate:0 0}
.sheet-obj img{width:100%;display:block}
.sheet-obj::after{content:"";position:absolute;inset:0;
  box-shadow:inset 0 0 60px oklch(10% .02 250 / .45)}
/* tape at two corners so it reads as laid down, not pasted in */
.sheet-obj i{position:absolute;width:74px;height:26px;
  background:oklch(97% .006 85 / .22);rotate:-38deg;pointer-events:none}
.sheet-obj i:first-of-type{top:-9px;left:-22px}
.sheet-obj i:last-of-type{bottom:-9px;right:-22px;rotate:-38deg}

/* ================= TRADES =================
   A specification list, not cards and not icons. */
.trades{display:grid;grid-template-columns:1fr;column-gap:clamp(30px,5vw,80px)}
@media(min-width:900px){.trades{grid-template-columns:1fr 1fr}}
.trade{padding:1.5rem 0;border-top:1px solid var(--hair-lite);
       display:grid;grid-template-columns:1fr;gap:.35rem;
       transition:padding-left var(--t2) var(--ease)}
.trade:hover{padding-left:.85rem}
.trade:first-child h3{font-size:1.7rem}
.trade p{font-size:.99rem;color:oklch(97% .006 85 / .7);max-width:44ch}
.trade__mark{width:0;height:2px;background:var(--hivis);
  transition:width var(--t2) var(--ease)}
.trade:hover .trade__mark{width:44px}

/* ================= PROCESS ================= */
/* ================= WORK / WINDOW SLIDERS ================= */
.bays{display:grid;grid-template-columns:1fr;gap:clamp(26px,3.4vw,46px)}
@media(min-width:820px){.bays{grid-template-columns:1fr 1fr}}
@media(min-width:1180px){.bays{grid-template-columns:repeat(3,1fr)}}

/* ---- WORK: full-bleed transformations, split by a plumb line ----
   No frame, no crop. The divider is a plumb bob: a weighted string a mason
   drops to find true vertical. Grab it, let go, it swings and settles. */
.bays{display:grid;grid-template-columns:1fr;gap:clamp(38px,4.6vw,64px)}
@media(min-width:1000px){.bays{grid-template-columns:1fr 1fr}}
.bay{position:relative}
.shot{position:relative;aspect-ratio:4/3;overflow:hidden;cursor:ew-resize;
      background:var(--ink);touch-action:pan-y;
      box-shadow:0 34px 66px -34px oklch(12% .02 60 / .55)}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  pointer-events:none;-webkit-user-drag:none;user-select:none}
.shot{user-select:none;-webkit-user-select:none}
.shot__after{clip-path:inset(0 0 0 var(--pos,50%))}

/* the plumb line */
.plumb{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:0;
  z-index:4;pointer-events:none;transform-origin:top center;
  transition:rotate 700ms cubic-bezier(.22,1,.3,1)}
.plumb::before{content:"";position:absolute;top:0;bottom:26px;left:-1px;width:2px;
  background:linear-gradient(180deg,oklch(97% .006 85 / .95),oklch(88% .01 85 / .85));
  box-shadow:0 0 10px oklch(12% .02 60 / .7)}
.plumb::after{content:"";position:absolute;bottom:0;left:50%;translate:-50% 0;
  width:22px;height:34px;background:linear-gradient(100deg,var(--hivis),oklch(52% .17 40));
  clip-path:polygon(50% 100%,0 34%,14% 6%,86% 6%,100% 34%);
  box-shadow:0 6px 16px oklch(12% .02 60 / .8)}
.shot.swing .plumb{rotate:0deg}

.bay__cap{display:flex;align-items:baseline;justify-content:space-between;
  gap:1.4rem;padding:1.1rem .1rem 0;border-top:1px solid var(--hair);
  margin-top:1.1rem}
.bay__cap b{font-weight:700;font-size:clamp(1.15rem,1.9vw,1.6rem);
  font-variation-settings:"wdth" 112;letter-spacing:-.02em}
.bay__cap span{font-size:.8rem;color:var(--graphite);text-align:right}

/* ================= NOTES ================= */
.notes{display:grid;grid-template-columns:1fr;gap:2.4rem}
@media(min-width:880px){.notes{grid-template-columns:1fr 1fr;gap:3.2rem 4.4rem}}
.note h3{margin-bottom:.5rem}
.note__rule{width:44px;height:3px;background:var(--hivis);margin-bottom:1rem}

/* ================= ESTIMATE =================
   Wide work order laid across the full measure. Deliberately not a
   copy-left / form-right split. */
.order{background:var(--paper);box-shadow:0 34px 70px -40px oklch(12% .02 60 / .9)}
.order__top{display:grid;grid-template-columns:1fr;gap:1rem;
  padding:clamp(22px,3vw,38px);border-bottom:2px solid var(--ink);
  align-items:end}
@media(min-width:760px){.order__top{grid-template-columns:1fr auto}}
.order__title{font-weight:700;font-size:clamp(1.5rem,2.6vw,2.2rem);
  font-variation-settings:"wdth" 115;letter-spacing:-.02em;color:var(--ink)}
.order__meta{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--graphite);text-align:left}
@media(min-width:760px){.order__meta{text-align:right}}
.order__body{padding:clamp(22px,3vw,38px)}
.fields{display:grid;grid-template-columns:1fr;gap:0 1.4rem}
@media(min-width:700px){.fields{grid-template-columns:repeat(3,1fr)}}
.f{margin-bottom:1.25rem;min-width:0}
.f--wide{grid-column:1/-1}
.f label{display:block;font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--graphite);margin-bottom:.4rem;font-weight:500}
.f input,.f select,.f textarea{width:100%;background:transparent;border:0;
  border-bottom:2px solid var(--hair);padding:.6rem 0;font-size:1.02rem;
  color:var(--ink);transition:border-color var(--t1)}
.f input:focus,.f select:focus,.f textarea:focus{border-bottom-color:var(--hivis);outline:none}
.f textarea{min-height:92px;resize:vertical}
.order__foot{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem;
  padding:0 clamp(22px,3vw,38px) clamp(22px,3vw,38px)}
.order__note{font-size:.78rem;color:var(--graphite);max-width:34ch}
.form-msg{display:none;padding:1rem 1.15rem;margin:0 clamp(22px,3vw,38px) 1rem;
  background:oklch(68% .223 42 / .12);color:var(--ink);font-size:.97rem}
.form-msg.on{display:block}
.form-msg.err{background:oklch(55% .2 27 / .12)}
.est__call{margin-top:1.4rem;font-size:1.24rem;font-weight:600}
.est__call a{color:oklch(52% .19 42);box-shadow:inset 0 -3px 0 var(--hivis)}

/* ================= TITLE BLOCK ================= */
.tb{background:var(--ink-deep);color:oklch(97% .006 85 / .8)}
.tb__grid{display:grid;grid-template-columns:1fr;
  border-left:1px solid var(--hair-lite)}
@media(min-width:820px){.tb__grid{grid-template-columns:2fr 1fr 1fr}}
.tb__cell{border-right:1px solid var(--hair-lite);
  border-bottom:1px solid var(--hair-lite);padding:1.7rem 1.5rem}
.tb__k{font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--hivis);margin-bottom:.5rem;font-weight:500}
.tb__v{font-size:1rem;line-height:1.5}
.tb__v a:hover{color:var(--hivis)}
.tb__brand{font-weight:700;font-variation-settings:"wdth" 115;font-size:1.5rem;
  color:var(--paper);letter-spacing:-.025em;margin-bottom:.55rem}
.tb__foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem;
  padding:1.3rem var(--gut);font-size:.72rem;letter-spacing:.06em;
  color:oklch(97% .006 85 / .5);max-width:var(--maxw);margin:0 auto}

/* ================= MOTION ================= */
/* assembling headline: words fly in from offset and lock */
.asm{display:block}
.asm{overflow:visible}
.asm__w{display:inline-block;white-space:pre;
  translate:var(--tx) var(--ty);rotate:var(--r);opacity:0;
  transition:translate 760ms cubic-bezier(.3,.9,.25,1),rotate 760ms cubic-bezier(.3,.9,.25,1),
             opacity 420ms var(--ease);
  transition-delay:calc(var(--i) * 62ms)}
.is-in .asm__w{translate:0 0;rotate:0deg;opacity:1}

/* everything else: rise into place, staggered */
.up{opacity:0;translate:0 26px;
  transition:opacity var(--t2) var(--ease),translate var(--t2) var(--ease)}
.is-in .up{opacity:1;translate:0 0}
.is-in .up[data-d="1"]{transition-delay:80ms}
.is-in .up[data-d="2"]{transition-delay:160ms}
.is-in .up[data-d="3"]{transition-delay:240ms}
.is-in .up[data-d="4"]{transition-delay:320ms}
.is-in .up[data-d="5"]{transition-delay:400ms}
.is-in .up[data-d="6"]{transition-delay:480ms}

/* ================= RESPONSIVE ================= */
@media(min-width:920px){.nav-phone{display:block}}
/* mobile hero: let it breathe. Copy sits high, the CTAs sit low,
   with real air between them instead of one bottom-heavy block. */
@media(max-width:820px){
  .hero{align-items:stretch}
  .hero__in{display:flex;flex-direction:column;justify-content:space-between;
    padding-top:clamp(64px,13vh,132px);padding-bottom:clamp(40px,7vh,72px)}
  .hero__copy{display:flex;flex-direction:column;height:100%;max-width:100%}
  .hero h1{margin-top:1.3rem}
  .hero .lead{margin-top:1.5rem}
  .hero__cta{margin-top:auto;padding-top:clamp(34px,7vh,72px);
    flex-direction:column;align-items:stretch;gap:.85rem}
  .hero__cta .btn{width:100%}
}

@media(max-width:620px){
  .nav-logo{height:40px}
  .nav .btn{padding:.6rem .85rem;font-size:.84rem}
  .lang button{padding:.38rem .52rem;font-size:.68rem}
  .hero__scrim{background:linear-gradient(180deg,oklch(17% .024 258 / .6) 0%,
    oklch(17% .024 258 / .58) 38%,oklch(17% .024 258 / .95) 100%)}
  .plate{padding:26px 20px}
}

/* ================= REDUCED MOTION ================= */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:1ms !important;animation-duration:1ms !important}
  .asm__w,.up{opacity:1 !important;translate:0 0 !important;rotate:0deg !important}
  .hero video{display:none}
  .hero{background:url("assets/hero-poster.jpg") 62% center/cover}
}