/* ==========================================================================
   NABAWORKSHOP — automotive atelier
   Design system. Mobile-first, RTL (Hebrew), accessible.
   ========================================================================== */

:root{
  /* palette — derived from the photography: warm graphite, bone, cognac, bronze */
  --ink:#100f0d;          /* warm near-black — base gallery room */
  --ink-2:#17150f;        /* slightly lifted dark surface */
  --graphite:#211e18;     /* card / surface on dark */
  --graphite-2:#2c2820;   /* hairline-lit surface */
  --bone:#efe9dd;         /* light editorial room */
  --bone-2:#e4ddcd;       /* secondary light surface */
  --paper-ink:#1a1813;    /* text on bone */
  --paper-mute:#5b5448;   /* muted text on bone */
  --cream:#f6f2e9;        /* brightest light */
  --bronze:#e5302a;       /* brand red — used with restraint: eyebrows, hairlines, marks, primary CTA */
  --bronze-soft:#ff5a50;  /* lighter red tint */
  --red-deep:#c01f1a;     /* deeper red — solid-button hover */
  --line-d:rgba(239,233,221,.16);   /* hairline on dark */
  --line-l:rgba(26,24,19,.16);      /* hairline on light */
  --txt-d:#e7e1d4;        /* body text on dark */
  --txt-d-mute:#a39c8c;   /* muted on dark */

  /* type */
  /* type — one clean sans (Heebo): heavy & large for headings, regular for body; Archivo for Latin tokens */
  --f-serif:"Heebo","Helvetica Neue",Arial,sans-serif;   /* heading family (heavy weights) */
  --f-sans:"Heebo","Helvetica Neue",Arial,sans-serif;    /* body family */
  --f-util:"Archivo","Arial Narrow",sans-serif;          /* Latin numerals & eyebrows */

  /* scale (fluid) */
  --step--1:clamp(.78rem,.74rem + .2vw,.88rem);
  --step-0:clamp(1rem,.95rem + .25vw,1.125rem);
  --step-1:clamp(1.2rem,1.1rem + .5vw,1.45rem);
  --step-2:clamp(1.5rem,1.3rem + 1vw,2.1rem);
  --step-3:clamp(2rem,1.6rem + 2vw,3.3rem);
  --step-4:clamp(2.6rem,1.9rem + 3.6vw,5.2rem);
  --step-5:clamp(3.2rem,2.1rem + 5.4vw,7rem);

  --maxw:1320px;
  --gutter:clamp(1.15rem,4vw,4rem);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0}
img,picture,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
h1,h2,h3,h4,p,figure,ul,blockquote{margin:0}
ul{list-style:none;padding:0}

body{
  background:var(--ink);
  color:var(--txt-d);
  font-family:var(--f-sans);
  font-size:var(--step-0);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ---------- utilities ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.eyebrow{
  font-family:var(--f-util);
  font-size:var(--step--1);
  letter-spacing:.32em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--bronze-soft);
  display:inline-flex;align-items:center;gap:.7em;
}
.eyebrow--dark{color:var(--bronze)}
.eyebrow .idx{font-variant-numeric:tabular-nums}
.eyebrow::before{
  content:"";width:2.4em;height:1px;background:var(--bronze);opacity:.7;
}
.serif{font-family:var(--f-serif)}
.measure{max-width:62ch}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* skip link */
.skip{
  position:fixed;top:.6rem;right:.6rem;z-index:200;
  background:var(--bronze);color:#fff;padding:.6rem 1rem;border-radius:2px;
  font-family:var(--f-util);font-weight:700;letter-spacing:.06em;
  transform:translateY(-150%);transition:transform .2s var(--ease);
}
.skip:focus{transform:translateY(0)}

/* focus visibility */
:focus-visible{outline:2px solid var(--bronze-soft);outline-offset:3px;border-radius:2px}

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.site-head{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:clamp(.8rem,1.6vw,1.3rem) var(--gutter);
  transition:background .4s var(--ease),border-color .4s var(--ease),padding .4s var(--ease);
  border-bottom:1px solid transparent;
}
.site-head.is-solid{
  background:rgba(16,15,13,.82);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom-color:var(--line-d);
}
.brand{display:flex;align-items:center;line-height:0}
.brand img{height:clamp(20px,2.4vw,28px);width:auto;display:block}
.site-foot .brand img{height:34px}

.nav{display:flex;align-items:center;gap:clamp(1rem,2vw,2.1rem)}
.nav-links{display:flex;align-items:center;gap:clamp(1rem,1.8vw,2rem)}
.nav-links a{
  font-family:var(--f-sans);font-weight:600;font-size:.95rem;color:var(--txt-d);
  position:relative;padding-block:.3rem;letter-spacing:.01em;
}
.nav-links a::after{content:"";position:absolute;inset-block-end:0;inset-inline:0;
  height:1px;background:var(--bronze);transform:scaleX(0);transform-origin:right;
  transition:transform .35s var(--ease)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.nav-links a[aria-current="page"]{color:var(--cream)}

.head-cta{display:flex;align-items:center;gap:.7rem}
.lang{font-family:var(--f-util);font-size:.72rem;letter-spacing:.12em;font-weight:600;
  color:var(--txt-d-mute);border:1px solid var(--line-d);border-radius:2px;
  padding:.35rem .55rem}
.lang b{color:var(--cream)}
.btn{
  font-family:var(--f-util);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  font-size:.8rem;padding:.72em 1.3em;border-radius:2px;border:1px solid var(--bronze);
  color:var(--cream);background:transparent;display:inline-flex;align-items:center;gap:.6em;
  transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);
}
.btn .ar{transition:transform .3s var(--ease)}
.btn:hover{background:var(--bronze);color:#fff;border-color:var(--bronze)}
.btn:hover .ar{transform:translateX(-.25em)}
.btn--solid{background:var(--bronze);color:#fff}
.btn--solid:hover{background:var(--red-deep)}
.btn--ghost-d{border-color:var(--line-l);color:var(--paper-ink)}
.btn--ghost-d:hover{background:var(--paper-ink);color:var(--cream);border-color:var(--paper-ink)}

/* hamburger */
.burger{display:none;width:44px;height:44px;border:1px solid var(--line-d);border-radius:2px;
  background:transparent;position:relative}
.burger span{position:absolute;inset-inline:11px;height:1.5px;background:var(--cream);
  transition:transform .3s var(--ease),opacity .2s var(--ease)}
.burger span:nth-child(1){top:15px}
.burger span:nth-child(2){top:21px}
.burger span:nth-child(3){top:27px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:99;background:var(--ink);
  transform:translateX(100%);transition:transform .5s var(--ease);
  display:flex;flex-direction:column;padding:6rem var(--gutter) 2.5rem;visibility:hidden}
.drawer.is-open{transform:translateX(0);visibility:visible}
.drawer a{font-family:var(--f-serif);font-size:var(--step-2);color:var(--cream);
  padding:.55rem 0;border-bottom:1px solid var(--line-d);display:flex;justify-content:space-between;align-items:center}
.drawer a .n{font-family:var(--f-util);font-size:.7rem;color:var(--bronze);letter-spacing:.1em}
.drawer .drawer-foot{margin-top:auto;display:flex;flex-direction:column;gap:1rem;padding-top:2rem}

@media (max-width:1024px){
  .nav-links,.head-cta .btn,.lang{display:none}
  .burger{display:block}
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  overflow:hidden;background:var(--ink)}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 38%;
  transform:scale(1.06);will-change:transform}
.hero__media::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(16,15,13,.60) 0%,rgba(16,15,13,.12) 26%,rgba(16,15,13,.55) 58%,rgba(16,15,13,.97) 100%),
    linear-gradient(270deg,rgba(16,15,13,.48) 0%,transparent 55%);}
.hero__grain{position:absolute;inset:0;opacity:.05;pointer-events:none;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
.hero__inner{position:relative;z-index:2;width:100%;padding-bottom:clamp(3rem,7vh,6rem);
  padding-top:8rem}
.hero h1{font-family:var(--f-serif);font-weight:800;line-height:.98;
  font-size:var(--step-5);color:var(--cream);letter-spacing:-.01em;
  text-wrap:balance;margin-block:.4em .55em}
.hero h1 em{font-style:normal;font-weight:400;color:#d3ccbe}
.hero__lede{font-size:var(--step-1);color:var(--txt-d);max-width:46ch;font-weight:300}
.hero__cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}
.hero__scroll{position:absolute;inset-block-end:1.4rem;inset-inline-start:var(--gutter);z-index:2;
  font-family:var(--f-util);font-size:.66rem;letter-spacing:.28em;color:var(--txt-d-mute);
  text-transform:uppercase;display:flex;align-items:center;gap:.7rem}
.hero__scroll .ln{width:1px;height:34px;background:linear-gradient(var(--bronze),transparent);
  display:block;animation:drop 2.4s var(--ease) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}
  50.1%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.section{padding-block:clamp(4.5rem,9vw,9rem)}
.section--light{background:var(--bone);color:var(--paper-ink)}
.section--light .eyebrow{color:#b81d17}
.section--light .eyebrow::before{background:#b81d17}
.section--bone2{background:var(--bone-2);color:var(--paper-ink)}
.section--ink2{background:var(--ink-2)}
.section-head{display:flex;flex-direction:column;gap:1.1rem;margin-bottom:clamp(2.2rem,5vw,3.6rem)}
.section-head h2{font-family:var(--f-serif);font-weight:800;font-size:var(--step-3);
  line-height:1.04;letter-spacing:-.01em;text-wrap:balance}
.section-head .sub{color:var(--txt-d-mute);max-width:60ch}
.section--light .section-head .sub{color:var(--paper-mute)}

/* manifesto */
.manifesto p{font-family:var(--f-serif);font-size:var(--step-3);line-height:1.22;
  font-weight:400;letter-spacing:-.01em;text-wrap:balance;max-width:24ch}
.manifesto .lede-2{font-family:var(--f-sans);font-size:var(--step-1);font-weight:300;
  margin-top:1.6rem;max-width:54ch;color:var(--paper-mute)}
.manifesto .grid{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:1fr;align-items:end}
@media(min-width:900px){.manifesto .grid{grid-template-columns:1.1fr .9fr}}
.stat-row{display:flex;gap:clamp(1.5rem,4vw,3.5rem);flex-wrap:wrap;margin-top:2.5rem;
  padding-top:2rem;border-top:1px solid var(--line-l)}
.stat{display:flex;flex-direction:column;gap:.2rem}
.stat b{font-family:var(--f-serif);font-size:var(--step-3);line-height:1;font-weight:800}
.stat span{font-family:var(--f-util);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--paper-mute)}

/* ==========================================================================
   DIVISIONS — editorial index rows
   ========================================================================== */
.divisions{display:flex;flex-direction:column}
.division{display:grid;grid-template-columns:1fr;gap:1.4rem;
  padding-block:clamp(2rem,4vw,3.2rem);border-top:1px solid var(--line-d);
  align-items:center}
.division:last-child{border-bottom:1px solid var(--line-d)}
@media(min-width:860px){
  .division{grid-template-columns:auto 1.2fr 1fr;gap:clamp(2rem,4vw,4rem)}
  .division:nth-child(even) .division__media{order:-1}
}
.division__idx{font-family:var(--f-util);font-size:var(--step-1);font-weight:700;color:var(--bronze);
  font-variant-numeric:tabular-nums;letter-spacing:.05em}
.division__body h3{font-family:var(--f-serif);font-size:var(--step-2);font-weight:800;line-height:1.05;margin-bottom:.6rem}
.division__body p{color:var(--txt-d-mute);max-width:46ch}
.division__body .more{margin-top:1.2rem;display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--f-util);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cream)}
.division__body .more .ar{color:var(--bronze);transition:transform .3s var(--ease)}
.division:hover .division__body .more .ar{transform:translateX(-.35em)}
.division__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--graphite)}
.division__media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.division:hover .division__media img{transform:scale(1.05)}

/* ==========================================================================
   PORTRAIT PLATES / GALLERIES
   ========================================================================== */
.plates{display:grid;gap:clamp(.6rem,1.4vw,1.1rem)}
.plates--3{grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.plates--3{grid-template-columns:repeat(3,1fr)}}
.plates--2{grid-template-columns:repeat(2,1fr)}
.plate{position:relative;overflow:hidden;background:var(--graphite);aspect-ratio:3/4}
.plate img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.plate:hover img{transform:scale(1.05)}
.plate figcaption{position:absolute;inset-block-end:0;inset-inline:0;
  padding:1.1rem;background:linear-gradient(transparent,rgba(16,15,13,.85));
  font-family:var(--f-util);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--txt-d);opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.plate:hover figcaption{opacity:1;transform:none}

/* feature plate (single tall) */
.feature{display:grid;grid-template-columns:1fr;gap:clamp(1.6rem,4vw,3.5rem);align-items:center}
@media(min-width:880px){.feature{grid-template-columns:.85fr 1.15fr}
  .feature--flip .feature__media{order:2}}
.feature__media{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--graphite);max-height:78vh}
.feature__media img{width:100%;height:100%;object-fit:cover}
.feature__body h2{font-family:var(--f-serif);font-weight:800;font-size:var(--step-3);line-height:1.05;margin-bottom:1.1rem;text-wrap:balance}
.feature__body p+p{margin-top:1rem}
.feature__body .lst{margin-top:1.6rem;display:flex;flex-direction:column;gap:.7rem}
.feature__body .lst li{display:flex;gap:.8rem;align-items:flex-start;color:var(--txt-d);line-height:1.45}
.feature__body .lst li::before{content:"";flex:none;width:1.4em;height:1px;background:var(--bronze);margin-top:.85em}
.section--light .feature__body .lst li{color:var(--paper-ink)}

/* editorial band — full-bleed portrait row */
.band{position:relative;min-height:72vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,15,13,.4),rgba(16,15,13,.92))}
.band__inner{position:relative;z-index:2;padding-block:clamp(2.5rem,6vw,5rem)}
.band__inner h2{font-family:var(--f-serif);font-weight:800;font-size:var(--step-4);line-height:1;color:var(--cream);max-width:18ch;text-wrap:balance}
.band__inner p{color:var(--txt-d);max-width:48ch;margin-top:1.2rem;font-weight:300;font-size:var(--step-1)}

/* detail strip */
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);gap:.8rem;
  overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.6rem;
  scrollbar-width:thin;scrollbar-color:var(--bronze) transparent}
.strip .plate{scroll-snap-align:start}

/* ==========================================================================
   PROCESS — numbered spec sequence
   ========================================================================== */
.process{display:grid;grid-template-columns:1fr;gap:0}
.step{display:grid;grid-template-columns:auto 1fr;gap:1.4rem;align-items:baseline;
  padding-block:1.5rem;border-top:1px solid var(--line-d)}
.step:last-child{border-bottom:1px solid var(--line-d)}
.step__n{font-family:var(--f-util);font-weight:700;font-size:var(--step-1);color:var(--bronze);
  font-variant-numeric:tabular-nums}
.step h3{font-family:var(--f-serif);font-weight:800;font-size:var(--step-1);margin-bottom:.35rem}
.step p{color:var(--txt-d-mute);max-width:60ch}
.section--light .step{border-color:var(--line-l)}
.section--light .step p{color:var(--paper-mute)}

/* ==========================================================================
   CHASSIS PLATE — signature element
   ========================================================================== */
.chassis-plate{
  --w:clamp(220px,40vw,300px);
  width:var(--w);border:1px solid rgba(239,233,221,.25);
  background:linear-gradient(135deg,#2a2620,#18160f 55%,#221f18);
  border-radius:3px;padding:.95rem 1.1rem;position:relative;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 14px 30px rgba(0,0,0,.4);
  font-family:var(--f-util);color:var(--bronze-soft)}
.chassis-plate::before,.chassis-plate::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#d9cdb4,#4b4129 70%);box-shadow:0 1px 1px rgba(0,0,0,.5)}
.chassis-plate::before{top:7px;inset-inline-start:7px}
.chassis-plate::after{top:7px;inset-inline-end:7px}
.chassis-plate .cp-top{display:flex;justify-content:space-between;font-size:.58rem;letter-spacing:.2em;
  color:#8b7a55;border-bottom:1px solid rgba(239,233,221,.14);padding-bottom:.5rem;margin-bottom:.55rem}
.chassis-plate .cp-mark{font-weight:800;font-size:1.05rem;letter-spacing:.22em;color:var(--cream)}
.chassis-plate .cp-mark .dot{color:var(--bronze)}
.chassis-plate .cp-meta{display:flex;justify-content:space-between;font-size:.56rem;letter-spacing:.16em;
  color:#8b7a55;margin-top:.5rem}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-grid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vw,4rem)}
@media(min-width:880px){.contact-grid{grid-template-columns:1fr 1fr}}
.field{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1.2rem}
.field label{font-family:var(--f-util);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-d-mute)}
.field input,.field textarea,.field select{
  background:var(--graphite);border:1px solid var(--line-d);border-radius:2px;color:var(--cream);
  padding:.85rem .9rem;font:inherit;font-size:1rem;transition:border-color .25s var(--ease)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--bronze);outline:none}
.field textarea{resize:vertical;min-height:130px}
.contact-info{display:flex;flex-direction:column;gap:1.5rem}
.info-row{display:flex;flex-direction:column;gap:.25rem;padding-bottom:1.3rem;border-bottom:1px solid var(--line-d)}
.info-row .k{font-family:var(--f-util);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze)}
.info-row .v{font-size:var(--step-1);color:var(--cream);font-weight:300}
.info-row .v a:hover{color:var(--bronze-soft)}

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-final{background:var(--ink-2);text-align:center}
.cta-final h2{font-family:var(--f-serif);font-weight:800;font-size:var(--step-4);line-height:1.02;
  color:var(--cream);max-width:20ch;margin-inline:auto;text-wrap:balance}
.cta-final p{color:var(--txt-d-mute);max-width:50ch;margin:1.4rem auto 2.2rem}
.cta-final .hero__cta{justify-content:center}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-foot{background:#0b0a08;padding-block:clamp(3.5rem,7vw,6rem) 2rem;border-top:1px solid var(--line-d)}
.foot-grid{display:grid;grid-template-columns:1fr;gap:clamp(2.2rem,5vw,3.5rem)}
@media(min-width:760px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}}
@media(min-width:1100px){.foot-grid{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.foot-col h4{font-family:var(--f-util);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bronze);margin-bottom:1.1rem}
.foot-col li{margin-bottom:.6rem}
.foot-col a{color:var(--txt-d-mute);font-size:.95rem}
.foot-col a:hover{color:var(--cream)}
.foot-lead p{color:var(--txt-d-mute);max-width:36ch;margin-top:1.2rem;font-size:.95rem}
.foot-bottom{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.6rem;border-top:1px solid var(--line-d);
  font-size:.8rem;color:var(--txt-d-mute)}
.foot-bottom .legal{display:flex;gap:1.2rem;flex-wrap:wrap}
.foot-bottom a:hover{color:var(--cream)}

/* whatsapp float */
.wa{position:fixed;inset-block-end:1.1rem;inset-inline-start:1.1rem;z-index:90;
  width:54px;height:54px;border-radius:50%;background:#25d366;display:grid;place-items:center;
  box-shadow:0 10px 26px rgba(0,0,0,.4);transition:transform .3s var(--ease)}
.wa:hover{transform:scale(1.08)}
.wa svg{width:28px;height:28px}

/* ==========================================================================
   PAGE HEADER (interior pages)
   ========================================================================== */
.page-hero{position:relative;min-height:62vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
.page-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.page-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,15,13,.55),rgba(16,15,13,.15) 40%,rgba(16,15,13,.95))}
.page-hero__inner{position:relative;z-index:2;padding-block:clamp(3rem,7vh,5rem);padding-top:7rem}
.page-hero h1{font-family:var(--f-serif);font-weight:800;font-size:var(--step-4);line-height:1;
  color:var(--cream);max-width:20ch;margin-top:.5rem;text-wrap:balance}
.page-hero .lede{color:var(--txt-d);max-width:52ch;margin-top:1.1rem;font-size:var(--step-1);font-weight:300}

/* legal/prose pages */
.prose{max-width:74ch}
.prose h2{font-family:var(--f-serif);font-weight:800;font-size:var(--step-2);margin:2.4rem 0 .9rem}
.prose h3{font-family:var(--f-sans);font-weight:700;font-size:var(--step-1);margin:1.8rem 0 .6rem;color:var(--cream)}
.prose p{color:var(--txt-d);margin-bottom:1rem}
.prose ul{display:flex;flex-direction:column;gap:.55rem;margin:0 0 1.2rem}
.prose ul li{display:flex;gap:.8rem;color:var(--txt-d)}
.prose ul li::before{content:"";flex:none;width:1.2em;height:1px;background:var(--bronze);margin-top:.8em}
.prose a{color:var(--bronze-soft);text-decoration:underline;text-underline-offset:3px}
.prose .updated{font-family:var(--f-util);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-d-mute);margin-bottom:2rem}

/* reveal animation (only hides when JS is active) */
html.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
html.js [data-reveal].in{opacity:1;transform:none}
html.js [data-reveal][data-d="1"]{transition-delay:.08s}
html.js [data-reveal][data-d="2"]{transition-delay:.16s}
html.js [data-reveal][data-d="3"]{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  html.js [data-reveal]{opacity:1!important;transform:none!important;transition:none}
  .hero__media img{transform:none!important}
  .hero__scroll .ln{animation:none}
}

/* ============ brand-update refinements (logo, type, red accent) ============ */
.foot-brand{justify-content:flex-start;margin-bottom:1.3rem}
.drawer a{font-weight:800;letter-spacing:-.01em}
.hero h1{letter-spacing:-.02em}
.section-head h2,.feature__body h2,.band__inner h2,.cta-final h2,.page-hero h1{letter-spacing:-.02em}
/* red accent tints that previously leaned bronze */
.section--light .btn{border-color:var(--bronze)}
.section--light .btn:hover{background:var(--bronze);color:#fff}

/* ============ LTR (English) support ============ */
.lang{text-decoration:none;display:inline-block;transition:border-color .3s var(--ease),color .3s var(--ease)}
.lang:hover{border-color:var(--bronze);color:var(--cream)}
.lang b{color:var(--cream)}
.lang span{color:var(--txt-d-mute)}
/* flip directional arrows for left-to-right reading */
html[dir="ltr"] .ar{display:inline-block;transform:scaleX(-1)}
html[dir="ltr"] .btn:hover .ar{transform:scaleX(-1) translateX(-.25em)}
html[dir="ltr"] .division:hover .division__body .more .ar{transform:scaleX(-1) translateX(-.35em)}
/* English uses Archivo as the display/body face for a clean Latin grotesque feel */
html[dir="ltr"] body{font-family:var(--f-util)}
html[dir="ltr"] h1,html[dir="ltr"] h2,html[dir="ltr"] h3,html[dir="ltr"] .hero h1,
html[dir="ltr"] .section-head h2,html[dir="ltr"] .manifesto p,html[dir="ltr"] .feature__body h2,
html[dir="ltr"] .band__inner h2,html[dir="ltr"] .cta-final h2,html[dir="ltr"] .page-hero h1,
html[dir="ltr"] .stat b,html[dir="ltr"] .division__body h3,html[dir="ltr"] .step h3,
html[dir="ltr"] .prose h2,html[dir="ltr"] .drawer a{font-family:var(--f-util)}
html[dir="ltr"] .hero h1,html[dir="ltr"] .page-hero h1,html[dir="ltr"] .band__inner h2,
html[dir="ltr"] .cta-final h2,html[dir="ltr"] .feature__body h2{letter-spacing:-.015em}