/* =========================================================================
   MARAH FASHION GROUP — Design System
   Tokens (colour + type) are the official Marah brand identity.
   Change a value here and it changes everywhere. Nothing is hard-coded.
   ========================================================================= */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root{
  /* ---------------------------------------------------------------------
     OFFICIAL BRAND IDENTITY — Marah Fashion Group
     Source: "Marah Fashion Group Logo.pdf" (brand identity sheet)
       Gold   : PANTONE 8642 C  ->  #af8b18   (sampled from the logo artwork)
       Black  : #231f20
       Second : cream / warm sand (secondary colour)
       Type   : English = Myriad Pro   |   Arabic = GE SS
     Tints and shades below are derived from those three colours only.
     --------------------------------------------------------------------- */

  /* Brand — gold */
  --gold:#af8b18;             /* OFFICIAL — Pantone 8642 C */
  --gold-deep:#8d6f13;        /* derived shade, used in the gradient */
  --gold-soft:#c9a53e;        /* derived tint */
  --gold-hi:#e6cb78;          /* derived highlight */
  --gold-grad:linear-gradient(120deg,#8d6f13 0%,#e6cb78 48%,#8d6f13 100%);

  /* Brand — black */
  --ink:#231f20;              /* OFFICIAL black */
  --ink-deep:#171516;         /* derived shade for large dark surfaces */

  /* Brand — secondary cream */
  --cream:#e9e1cf;            /* secondary colour */

  /* Paper */
  --paper:#ffffff;
  --paper-2:#f7f5ef;          /* cream at low tint, alternating sections */
  --paper-3:#efeade;

  /* Text roles */
  --heading:#231f20;
  --on-light:#3f3a30;
  --on-light-mute:#82796a;
  --on-dark:#e9e1cf;
  --on-dark-mute:#a89c82;

  /* Lines */
  --line-light:rgba(35,31,32,.10);
  --line-dark:rgba(233,225,207,.14);
  --line-gold:rgba(175,139,24,.32);

  /* ---------------------------------------------------------------------
     TYPE — the identity specifies Myriad Pro (English) and GE SS (Arabic).
     Myriad Pro is a licensed Adobe font with no free web version, so the
     stack falls back to Source Sans 3 — Adobe's open-source humanist sans,
     the standard substitute for Myriad. Visitors with Myriad Pro installed,
     and your own print work, stay pixel-identical.

     To serve real Myriad Pro: add your Adobe Fonts (Typekit) embed code to
     src/layout.html and rebuild. Nothing else needs to change.
     --------------------------------------------------------------------- */
  --sans:'Myriad Pro','Source Sans 3','Source Sans Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --arabic:'GE SS Two','GE SS','Noto Kufi Arabic','Segoe UI',Tahoma,sans-serif;

  /* Display headings use the same family, set heavy and tight.
     Prefer the poster-condensed look of the previous site instead?
     Load Anton in src/layout.html and set:  --display:'Anton',sans-serif;
                                             --display-weight:400;
                                             --display-tracking:.005em; */
  --display:var(--sans);
  --display-weight:800;
  --display-tracking:-.022em;

  /* Metrics */
  --maxw:1180px;
  --maxw-wide:1420px;
  --pad:clamp(20px,5vw,40px);
  --sy:clamp(70px,10vw,140px);
  --hh:74px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

:lang(ar),[lang="ar"]{font-family:var(--arabic)}

/* ---------- 2. RESET / BASE ---------------------------------------------- */
*,*::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;
  background:var(--paper);
  color:var(--on-light);
  font-family:var(--sans);
  font-size:clamp(15.5px,.55vw + 14px,17px);
  font-weight:400;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,video,svg{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4,h5,h6{margin:0;color:var(--heading);font-weight:400}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
ul{margin:0;padding:0;list-style:none}

::selection{background:var(--gold);color:#fff}

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:2px;
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:var(--on-dark);
  padding:14px 22px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;
}
.skip-link:focus{left:0}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* ---------- 3. LAYOUT ----------------------------------------------------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.container--wide{max-width:var(--maxw-wide)}

.section{padding-block:var(--sy);position:relative}
.section--tight{padding-block:calc(var(--sy) * .62)}
.section--paper2{background:var(--paper-2)}
.section--paper3{background:var(--paper-3)}

.section--dark{background:var(--ink-deep);color:var(--on-dark)}
:is(.section--dark,.ctastrip) :is(h1,h2,h3,h4,h5,h6){color:var(--on-dark)}
:is(.section--dark,.ctastrip) .lede{color:var(--on-dark-mute)}
:is(.section--dark,.ctastrip) .rule{background:var(--line-dark)}

.rule{height:1px;background:var(--line-light);border:0;margin:0}

/* ---------- 4. TYPE ------------------------------------------------------- */
.eyebrow{
  font-family:var(--sans);
  font-size:clamp(10px,.28vw + 9.4px,11.5px);
  font-weight:600;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 clamp(18px,2vw,26px);
  display:flex;align-items:center;gap:14px;
}
.eyebrow::after{
  content:"";flex:1;height:1px;max-width:120px;
  background:linear-gradient(90deg,var(--line-gold),transparent);
}
.eyebrow--center{justify-content:center}
.eyebrow--center::after{display:none}
.eyebrow--plain::after{display:none}

.display{
  font-family:var(--display);
  font-weight:var(--display-weight);
  text-transform:uppercase;
  line-height:.94;
  letter-spacing:var(--display-tracking);
  color:var(--heading);
  margin:0;
}
.display--xl{font-size:clamp(40px,7.6vw,98px)}
.display--l {font-size:clamp(32px,5.1vw,64px)}
.display--m {font-size:clamp(27px,3.7vw,45px);line-height:1}
.display--s {font-size:clamp(22px,2.5vw,32px);line-height:1.04}
.display .gold{color:var(--gold)}
:is(.section--dark,.ctastrip) .display{color:var(--on-dark)}
:is(.section--dark,.ctastrip) .display .gold{
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--gold);
}

.h-sans{
  font-family:var(--sans);font-weight:700;
  font-size:clamp(19px,1.3vw + 15px,25px);
  line-height:1.28;letter-spacing:-.01em;color:var(--heading);
}
:is(.section--dark,.ctastrip) .h-sans{color:var(--on-dark)}

.lede{
  font-size:clamp(16.5px,.75vw + 15px,20px);
  font-weight:300;line-height:1.62;color:var(--on-light);
  max-width:62ch;
}
.measure{max-width:66ch}
.measure-tight{max-width:52ch}
.muted{color:var(--on-light-mute)}
:is(.section--dark,.ctastrip) .muted{color:var(--on-dark-mute)}

.pull{
  font-family:var(--display);font-weight:var(--display-weight);letter-spacing:var(--display-tracking);text-transform:uppercase;
  font-size:clamp(24px,3.1vw,42px);line-height:1.06;
  letter-spacing:.005em;
}

/* ---------- 5. BUTTONS ---------------------------------------------------- */
.btn{
  --btn-fg:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  padding:1.02em 1.9em;
  font-size:clamp(11.5px,.2vw + 11px,12.5px);
  font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;border:0;cursor:pointer;
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),
             color .3s var(--ease),border-color .3s var(--ease),background-color .3s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn .arw{transition:transform .45s var(--ease)}
.btn:hover .arw{transform:translateX(5px)}

.btn--gold{
  color:#fff;
  background:var(--gold-grad);
  background-size:170% 100%;background-position:0% 50%;
  box-shadow:0 10px 30px -14px rgba(154,123,30,.85);
  transition:background-position .7s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease);
}
.btn--gold:hover{background-position:100% 50%;box-shadow:0 16px 40px -16px rgba(154,123,30,.95)}

.btn--ghost{
  color:var(--heading);background:transparent;
  box-shadow:inset 0 0 0 1px rgba(20,16,10,.22);
}
.btn--ghost:hover{box-shadow:inset 0 0 0 1px var(--gold);color:var(--gold)}

.btn--ghost-dark{
  color:var(--on-dark);background:transparent;
  box-shadow:inset 0 0 0 1px rgba(233,225,207,.28);
}
.btn--ghost-dark:hover{box-shadow:inset 0 0 0 1px var(--gold-soft);color:var(--gold-hi)}

.btn--sm{padding:.85em 1.45em;letter-spacing:.16em}
.btn--block{width:100%}

.btn-row{display:flex;flex-wrap:wrap;gap:14px}

/* Text link with gold underline sweep */
.tlink{
  display:inline-flex;align-items:center;gap:.6em;
  font-size:12.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);text-decoration:none;padding-bottom:5px;
  background-image:linear-gradient(var(--gold),var(--gold));
  background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .55s var(--ease);
}
.tlink:hover{background-size:100% 1px}
.tlink .arw{transition:transform .45s var(--ease)}
.tlink:hover .arw{transform:translateX(5px)}

/* ---------- 6. HEADER ----------------------------------------------------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;height:var(--hh);
  display:flex;align-items:center;
  transition:background-color .5s var(--ease),box-shadow .5s var(--ease),height .5s var(--ease);
}
.site-header::after{
  content:"";position:absolute;inset:auto 0 0 0;height:1px;
  background:var(--line-light);opacity:0;transition:opacity .5s var(--ease);
}
.site-header.is-stuck{background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px)}
.site-header.is-stuck::after{opacity:1}

/* Over-hero (dark imagery) variant */
.site-header.on-dark:not(.is-stuck) .nav__link{color:var(--on-dark)}
.site-header.on-dark:not(.is-stuck) .burger span{background:var(--on-dark)}
/* Logo swaps between the light-background and dark-background official files. */
.brand__img--dark{display:none}
.site-header.on-dark:not(.is-stuck) .brand__img--light{display:none}
.site-header.on-dark:not(.is-stuck) .brand__img--dark{display:block}

.header__inner{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%}

.brand{display:block;flex:none;line-height:0}
.brand__img{width:auto;height:clamp(30px,3vw,38px)}

/* Mobile-first: the inline nav is hidden until there is room for it;
   below 900px navigation lives in the drawer behind the burger. */
.nav{display:none;align-items:center;gap:clamp(20px,2.4vw,38px)}
@media (min-width:900px){.nav{display:flex}}
.nav__link{
  position:relative;text-decoration:none;color:var(--heading);
  font-size:14px;font-weight:500;letter-spacing:.01em;padding:6px 0;
  transition:color .3s var(--ease);
}
.nav__link::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--gold);transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--ease);
}
.nav__link:hover{color:var(--gold)}
.nav__link:hover::after{transform:scaleX(1);transform-origin:left}
.nav__link[aria-current="page"]{color:var(--gold)}
.nav__link[aria-current="page"]::after{transform:scaleX(1)}

.header__cta{display:none}
@media (min-width:1120px){.header__cta{display:inline-flex}}

/* Burger */
.burger{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 9px;background:none;border:0;cursor:pointer;
}
.burger span{display:block;height:1.5px;width:100%;background:var(--heading);transition:transform .5s var(--ease),opacity .3s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media (min-width:900px){.burger{display:none}}

/* Mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:99;background:var(--ink-deep);color:var(--on-dark);
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--hh) + 30px) var(--pad) 40px;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .72s var(--ease-out);
  overflow-y:auto;
}
.drawer.is-open{clip-path:inset(0 0 0 0)}
.drawer__nav{display:flex;flex-direction:column;gap:2px}
.drawer__link{
  font-family:var(--display);font-weight:var(--display-weight);letter-spacing:var(--display-tracking);text-transform:uppercase;text-decoration:none;
  font-size:clamp(26px,7vw,42px);line-height:1.2;color:var(--on-dark);
  padding:6px 0;opacity:0;transform:translateY(22px);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out),color .3s var(--ease);
}
.drawer.is-open .drawer__link{opacity:1;transform:none}
.drawer__link:hover,.drawer__link[aria-current="page"]{color:var(--gold-soft)}
.drawer__foot{margin-top:44px;padding-top:26px;border-top:1px solid var(--line-dark)}
.drawer__foot a{display:block;margin-bottom:8px;color:var(--on-dark-mute);text-decoration:none;font-size:15px}
.drawer__foot a:last-child{margin-bottom:0}
.drawer__foot a:hover{color:var(--gold-soft)}
@media (min-width:900px){.drawer{display:none}}

body.nav-open{overflow:hidden}

/* ---------- 7. MEDIA SLOTS ------------------------------------------------ */
/* A .media is a photo slot. Drop the real file in /assets/img and it appears.
   Until then it renders as a branded placeholder naming the shot required. */
.media{
  position:relative;margin:0;overflow:hidden;
  background:var(--paper-3);
  isolation:isolate;
}
.media img,.media video{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.2s var(--ease-out),filter 1.2s var(--ease-out);
}
.media--1x1{aspect-ratio:1/1}
.media--4x5{aspect-ratio:4/5}
.media--3x4{aspect-ratio:3/4}
.media--3x2{aspect-ratio:3/2}
.media--16x9{aspect-ratio:16/9}
.media--21x9{aspect-ratio:21/9}
.media--tall{aspect-ratio:2/3}
.media--fill{height:100%}

.media--zoom img{transform:scale(1.001)}
.media--zoom:hover img{transform:scale(1.055)}

/* Empty state — set by JS/onerror when the file is not present yet */
.media.is-empty{
  background:
    repeating-linear-gradient(135deg,rgba(174,139,26,.055) 0 2px,transparent 2px 9px),
    repeating-linear-gradient(45deg,rgba(174,139,26,.055) 0 2px,transparent 2px 9px),
    linear-gradient(160deg,#1a1611 0%,#0a0806 100%);
}
.media.is-empty::before{
  content:"";position:absolute;inset:14px;border:1px solid rgba(230,203,120,.16);pointer-events:none;
}
.media.is-empty::after{
  content:attr(data-label) "\A" attr(data-file);
  white-space:pre-line;
  position:absolute;inset:0;z-index:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:0;text-align:center;padding:30px 26px;
  font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;line-height:2.5;
  color:rgba(230,203,120,.72);
}
.media.is-empty :is(img,video){display:none}

.media__cap{
  margin-top:14px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-light-mute);font-weight:600;
}
:is(.section--dark,.ctastrip) .media__cap{color:var(--on-dark-mute)}

/* ---------- 8. HERO ------------------------------------------------------- */
.hero{
  position:relative;min-height:min(100svh,940px);
  display:flex;align-items:flex-end;
  background:var(--ink-deep);color:var(--on-dark);
  overflow:hidden;
  padding-block:calc(var(--hh) + clamp(60px,9vw,110px)) clamp(52px,7vw,96px);
}
.hero__bg{
  position:absolute;inset:0;z-index:0;
  background-image:url("../img/home-hero-atelier.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.hero__bg video,.hero__bg img{width:100%;height:100%;object-fit:cover}
/* Portrait screens crop the sides, so bias right to keep the designer
   and her desk in frame rather than centring on the rail behind her. */
@media (max-width:768px){
  .hero__bg{background-position:68% center}
}
/* Flat dark wash over the photograph, plus a little extra weight on the
   left so the headline and paragraph stay legible against the bright wall.
   The right side stays at .55 so the designer remains clearly visible. */
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(95deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,.12) 52%,rgba(0,0,0,0) 74%),
    rgba(0,0,0,.55);
}
/* On mobile the copy runs the full width and crosses the designer's white
   shirt, so weight the wash toward the bottom where the text sits. The top
   third stays at .55 and the photograph reads clearly. */
@media (max-width:768px){
  .hero::after{
    background:
      linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.22) 52%,rgba(0,0,0,.40) 72%,rgba(0,0,0,.44) 100%),
      rgba(0,0,0,.55);
  }
}
.hero__inner{position:relative;z-index:2;width:100%}
.hero__eyebrow{color:var(--gold-hi)}
.hero__eyebrow::after{background:linear-gradient(90deg,rgba(230,203,120,.45),transparent)}
.hero h1{color:#fff;max-width:15ch}
.hero h1 .gold{
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero__sub{
  margin-top:clamp(22px,2.6vw,34px);
  max-width:58ch;color:rgba(233,225,207,.82);
  font-weight:300;font-size:clamp(16px,.7vw + 14.6px,19.5px);line-height:1.65;
}
.hero .btn-row{margin-top:clamp(30px,3.4vw,44px)}

.hero__scroll{
  position:absolute;z-index:2;right:var(--pad);bottom:clamp(52px,7vw,96px);
  display:none;align-items:center;gap:12px;
  font-size:10.5px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:var(--on-dark-mute);writing-mode:vertical-rl;
}
.hero__scroll::after{content:"";width:1px;height:56px;background:linear-gradient(var(--gold),transparent)}
@media (min-width:1100px){.hero__scroll{display:flex}}

/* Page hero (interior pages) */
.phero{
  position:relative;background:var(--ink-deep);color:var(--on-dark);overflow:hidden;
  padding-block:calc(var(--hh) + clamp(64px,9vw,120px)) clamp(56px,8vw,110px);
}
.phero__bg{position:absolute;inset:0;z-index:0;opacity:.5}
.phero__bg img{width:100%;height:100%;object-fit:cover}
.phero__bg.is-empty{
  background:
    repeating-linear-gradient(135deg,rgba(174,139,26,.05) 0 2px,transparent 2px 10px),
    linear-gradient(155deg,#211b12 0%,#0b0906 70%,#050403 100%);
  opacity:1;
}
.phero__bg.is-empty img{display:none}
.phero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,4,3,.74),rgba(5,4,3,.86));
}

/* Photo-backed page hero (Capabilities). The shared .phero fades its image to
   .5 behind a heavy flat wash; here the photograph runs at full strength under
   a left-weighted gradient instead — dark enough for the headline on the left,
   light enough on the right that the knitting floor stays legible. */
.phero--photo .phero__bg{opacity:1}
.phero--photo .phero__bg img{object-position:center right}
.phero--photo::after{
  background:linear-gradient(90deg,
    rgba(0,0,0,.88) 0%,
    rgba(0,0,0,.78) 34%,
    rgba(0,0,0,.52) 66%,
    rgba(0,0,0,.38) 100%);
}
/* Softer wash for photographs that are already dark (About hero). Same
   left-weighting, but inside a 55-70% range so the workshop stays visible. */
.phero--photo.phero--soft::after{
  background:linear-gradient(90deg,
    rgba(0,0,0,.70) 0%,
    rgba(0,0,0,.62) 34%,
    rgba(0,0,0,.48) 66%,
    rgba(0,0,0,.38) 100%);
}
/* The standard eyebrow gold (#af8b18) is too dark to read against a bright
   photograph; use the lighter brand gold here, as the homepage hero does. */
.phero--photo .eyebrow{color:var(--gold-hi)}
.phero--photo .eyebrow::after{background:linear-gradient(90deg,rgba(230,203,120,.45),transparent)}
.phero__inner{position:relative;z-index:2}
.phero h1{color:#fff}
.phero .lede{color:rgba(233,225,207,.8);margin-top:24px}

/* ---------- 9. STAT BAR --------------------------------------------------- */
.stats{
  display:grid;gap:1px;background:var(--line-light);
  grid-template-columns:1fr;
}
@media (min-width:760px){.stats{grid-template-columns:repeat(3,1fr)}}
.stat{background:var(--paper);padding:clamp(34px,4.4vw,58px) clamp(20px,3vw,40px);text-align:center}
.section--dark .stats{background:var(--line-dark)}
.section--dark .stat{background:var(--ink-deep)}
.stat__num{
  font-family:var(--display);font-weight:var(--display-weight);letter-spacing:var(--display-tracking);text-transform:uppercase;line-height:1;
  font-size:clamp(38px,4.9vw,62px);
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--gold);
}
.stat__label{
  margin-top:14px;font-size:11.5px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--on-light-mute);
}
.section--dark .stat__label{color:var(--on-dark-mute)}

/* ---------- 10. GRIDS ----------------------------------------------------- */
.grid{display:grid;gap:clamp(22px,2.6vw,34px)}
.grid--2{grid-template-columns:1fr}
.grid--3{grid-template-columns:1fr}
.grid--4{grid-template-columns:1fr 1fr}
@media (min-width:700px){
  .grid--2{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1000px){
  .grid--3{grid-template-columns:repeat(3,1fr)}
  .grid--4{grid-template-columns:repeat(4,1fr)}
}

/* Split: text + media */
.split{display:grid;gap:clamp(30px,4vw,64px);align-items:center}
@media (min-width:900px){
  .split{grid-template-columns:1fr 1fr}
  .split--wide-media{grid-template-columns:.85fr 1.15fr}
  .split--wide-text{grid-template-columns:1.15fr .85fr}
  .split--flip>*:first-child{order:2}
}

.section-head{margin-bottom:clamp(40px,5vw,72px);max-width:74ch}
.section-head--center{margin-inline:auto;text-align:center}
.section-head .lede{margin-top:22px}

/* ---------- 11. CARDS (Why Marah) ---------------------------------------- */
.vcard{
  position:relative;padding:clamp(28px,3vw,38px) 0 clamp(28px,3vw,36px);
  border-top:1px solid var(--line-light);
}
:is(.section--dark,.ctastrip) .vcard{border-top-color:var(--line-dark)}
.vcard__idx{
  font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.18em;color:var(--gold);
  display:block;margin-bottom:16px;
}
.vcard h3{
  font-family:var(--display);font-weight:var(--display-weight);letter-spacing:var(--display-tracking);text-transform:uppercase;line-height:1.06;
  font-size:clamp(18px,1.2vw + 14px,24px);margin-bottom:12px;
}
.vcard p{font-size:15.5px;font-weight:300;color:var(--on-light-mute);margin:0}
:is(.section--dark,.ctastrip) .vcard p{color:var(--on-dark-mute)}
.vcard::after{
  content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--ease);
}
.vcard:hover::after{transform:scaleX(1)}

/* ---------- 12. PROCESS TIMELINE ----------------------------------------- */
.process{position:relative;display:grid;gap:0}
.pstep{
  position:relative;display:grid;gap:6px 30px;
  grid-template-columns:auto 1fr;
  padding:clamp(26px,3vw,34px) 0;
  border-top:1px solid var(--line-dark);
}
.pstep:last-child{border-bottom:1px solid var(--line-dark)}
.pstep__num{
  font-family:var(--display);font-weight:var(--display-weight);letter-spacing:var(--display-tracking);line-height:1;
  font-size:clamp(24px,3vw,40px);
  color:rgba(233,225,207,.16);
  transition:color .6s var(--ease);
  min-width:2.2ch;
}
.pstep:hover .pstep__num{color:var(--gold-soft)}
.pstep__body{display:grid;gap:8px}
.pstep h3{
  font-family:var(--display);font-weight:var(--display-weight);letter-spacing:var(--display-tracking);text-transform:uppercase;
  font-size:clamp(18px,1.2vw + 13px,23px);line-height:1.14;color:var(--on-dark);
}
.pstep p{color:var(--on-dark-mute);font-weight:300;font-size:15.5px;margin:0;max-width:60ch}
@media (min-width:820px){
  .pstep{grid-template-columns:110px 1fr;align-items:start;gap:0 40px}
}

/* Compact 4-across variant — homepage "From idea to delivery".
   Higher specificity than the rules above, so the stacked .process list they
   define is left intact and the Quality page is unaffected. */
.section--compact{padding-block:clamp(52px,6vw,84px)}
.section--compact .section-head{margin-bottom:clamp(26px,3vw,40px)}

.process--grid{
  grid-template-columns:1fr;
  column-gap:clamp(22px,2.6vw,38px);
  border-top:1px solid var(--line-dark);
}
.process--grid .pstep{
  grid-template-columns:1fr;
  grid-auto-rows:min-content;   /* keep rows packed so shorter cells stay top-aligned */
  align-content:start;
  gap:7px;
  padding:clamp(18px,1.9vw,24px) 0;
  border-top:0;
  border-bottom:1px solid var(--line-dark);
}
.process--grid .pstep__body{gap:5px}
.process--grid .pstep__num{
  font-family:var(--sans);font-weight:700;
  font-size:11px;letter-spacing:.22em;line-height:1;
  color:var(--gold);min-width:0;
}
.process--grid .pstep:hover .pstep__num{color:var(--gold-hi)}
.process--grid .pstep h3{
  font-size:clamp(15px,.7vw + 12.5px,18px);
  line-height:1.18;letter-spacing:-.008em;
}
.process--grid .pstep p{font-size:13.5px;line-height:1.55;max-width:36ch}

@media (min-width:640px){.process--grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.process--grid{grid-template-columns:repeat(4,1fr)}}

/* ---------- 13. CAPABILITY LISTS ----------------------------------------- */
.capgroup{border-top:1px solid var(--line-light);padding-top:clamp(24px,2.6vw,32px)}
:is(.section--dark,.ctastrip) .capgroup{border-top-color:var(--line-dark)}
.capgroup h3{
  font-family:var(--display);font-weight:var(--display-weight);letter-spacing:var(--display-tracking);text-transform:uppercase;line-height:1.04;
  font-size:clamp(19px,1.3vw + 14px,26px);margin-bottom:8px;
}
.capgroup__note{font-size:14.5px;font-weight:300;color:var(--on-light-mute);margin-bottom:22px;max-width:46ch}
:is(.section--dark,.ctastrip) .capgroup__note{color:var(--on-dark-mute)}
.caplist{display:grid;gap:0}
.caplist li{
  display:flex;align-items:baseline;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--line-light);
  font-size:15px;color:var(--on-light);
}
:is(.section--dark,.ctastrip) .caplist li{border-bottom-color:var(--line-dark);color:var(--on-dark)}
.caplist li::before{
  content:"";flex:none;width:5px;height:5px;background:var(--gold);
  transform:rotate(45deg);translate:0 -2px;
}

/* ---------- 14. CATEGORY CARDS ------------------------------------------- */
.cat{
  position:relative;display:block;text-decoration:none;color:inherit;overflow:hidden;
}
.cat .media{background:var(--ink)}
.cat__label{
  position:absolute;z-index:2;left:0;right:0;bottom:0;
  padding:clamp(18px,2vw,26px);
  display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
  background:linear-gradient(0deg,rgba(5,4,3,.86) 0%,rgba(5,4,3,.34) 55%,transparent 100%);
  pointer-events:none;
}
.cat__name{
  font-family:var(--display);font-weight:var(--display-weight);letter-spacing:var(--display-tracking);text-transform:uppercase;color:#fff;line-height:1.04;
  font-size:clamp(16px,.9vw + 13px,21px);
}
.cat__meta{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-hi)}

/* ---------- 15. QUOTE / STATEMENT ---------------------------------------- */
.statement{text-align:center;max-width:22ch;margin-inline:auto}
.statement--wide{max-width:30ch}

/* ---------- 16. CONFIDENTIALITY SEAL ------------------------------------- */
.seal{
  display:grid;place-items:center;gap:0;
  width:clamp(150px,17vw,208px);aspect-ratio:1;margin-inline:auto;
  border:1px solid var(--line-gold);border-radius:50%;
  position:relative;
}
.seal::before{
  content:"";position:absolute;inset:10px;border:1px solid rgba(174,139,26,.18);border-radius:50%;
}
.seal__mark{
  font-family:var(--display);font-weight:var(--display-weight);letter-spacing:var(--display-tracking);text-transform:uppercase;text-align:center;line-height:1.02;
  font-size:clamp(13px,1.25vw,17px);color:var(--gold-hi);padding:20px;
}

/* ---------- 17. FORM ------------------------------------------------------ */
.form{display:grid;gap:clamp(18px,2vw,24px)}
.form__grid{display:grid;gap:inherit;grid-template-columns:1fr}
@media (min-width:680px){.form__grid--2{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:9px}
.field label{
  font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--on-light-mute);
}
.field .req{color:var(--gold)}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-size:15.5px;font-weight:400;color:var(--heading);
  background:var(--paper);border:0;box-shadow:inset 0 0 0 1px var(--line-light);
  padding:.92em 1.05em;width:100%;border-radius:0;
  transition:box-shadow .3s var(--ease);
  -webkit-appearance:none;appearance:none;
}
.field textarea{min-height:150px;resize:vertical;line-height:1.6}
.field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 20px) 52%,calc(100% - 14px) 52%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
  padding-right:44px;cursor:pointer;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;box-shadow:inset 0 0 0 1px var(--gold);
}
.field input::placeholder,.field textarea::placeholder{color:var(--on-light-mute);opacity:.7}
.field__hint{font-size:12.5px;color:var(--on-light-mute);font-weight:300;letter-spacing:0;text-transform:none}

.checks{display:grid;gap:10px;grid-template-columns:1fr}
@media (min-width:560px){.checks{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.checks{grid-template-columns:1fr 1fr 1fr}}
.check{
  display:flex;align-items:center;gap:11px;cursor:pointer;
  padding:.78em 1em;box-shadow:inset 0 0 0 1px var(--line-light);
  font-size:14px;color:var(--on-light);
  transition:box-shadow .3s var(--ease),color .3s var(--ease);
}
.check:hover{box-shadow:inset 0 0 0 1px rgba(20,16,10,.28)}
.check input{
  appearance:none;-webkit-appearance:none;flex:none;
  width:15px;height:15px;margin:0;background:transparent;
  box-shadow:inset 0 0 0 1px rgba(20,16,10,.3);
  transition:background-color .25s var(--ease),box-shadow .25s var(--ease);
}
.check input:checked{background:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.check:has(input:checked){box-shadow:inset 0 0 0 1px var(--gold);color:var(--heading)}
.check input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.filefield{position:relative}
.filefield input[type=file]{
  font-size:14px;padding:.8em 1.05em;cursor:pointer;
}
.filefield input[type=file]::file-selector-button{
  font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:.7em 1.2em;margin-right:14px;border:0;cursor:pointer;
  background:var(--ink);color:var(--paper);
}

.form__status{
  padding:1.1em 1.3em;font-size:14.5px;line-height:1.6;
  box-shadow:inset 0 0 0 1px var(--line-gold);background:rgba(174,139,26,.05);
}
.form__status[hidden]{display:none}
.form__status--err{box-shadow:inset 0 0 0 1px rgba(160,40,30,.4);background:rgba(160,40,30,.05)}

/* ---------- 18. CONTACT BLOCKS ------------------------------------------- */
.cblock{border-top:1px solid var(--line-dark);padding-top:22px}
.cblock h3{
  font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);margin-bottom:14px;
}
.cblock a,.cblock p{
  display:block;text-decoration:none;color:var(--on-dark);
  font-size:16px;font-weight:300;line-height:1.7;
}
.cblock a{transition:color .3s var(--ease)}
.cblock a:hover{color:var(--gold-hi)}

/* ---------- 19. FOOTER ---------------------------------------------------- */
.site-footer{background:var(--ink-deep);color:var(--on-dark-mute);padding-block:clamp(56px,7vw,92px) 34px}
.footer__top{display:grid;gap:clamp(36px,4vw,56px)}
@media (min-width:900px){.footer__top{grid-template-columns:1.4fr 1fr 1fr 1.2fr}}
.footer__brand img{height:38px;width:auto;margin-bottom:20px}
.footer__tag{
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold);
}
.footer__blurb{margin-top:18px;font-size:14.5px;font-weight:300;line-height:1.7;max-width:38ch;color:var(--on-dark-mute)}
.site-footer h2{
  font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--on-dark);margin-bottom:18px;
}
.footer__list li{margin-bottom:11px}
.footer__list a{
  text-decoration:none;color:var(--on-dark-mute);font-size:14.5px;font-weight:300;
  transition:color .3s var(--ease);
}
.footer__list a:hover{color:var(--gold-soft)}
.footer__bottom{
  margin-top:clamp(44px,5vw,66px);padding-top:26px;border-top:1px solid var(--line-dark);
  display:flex;flex-wrap:wrap;gap:16px 26px;align-items:center;justify-content:space-between;
  font-size:13px;font-weight:300;
}
.social{display:flex;gap:10px}
.social a{
  display:grid;place-items:center;width:38px;height:38px;
  box-shadow:inset 0 0 0 1px var(--line-dark);color:var(--on-dark-mute);
  transition:color .3s var(--ease),box-shadow .3s var(--ease);
}
.social a:hover{color:var(--gold-hi);box-shadow:inset 0 0 0 1px var(--line-gold)}
.social svg{width:16px;height:16px;fill:currentColor}
.social a[data-unset="true"]{opacity:.45;cursor:default}

/* ---------- 20. CTA STRIP ------------------------------------------------- */
.ctastrip{
  position:relative;background:var(--ink-deep);color:var(--on-dark);overflow:hidden;
  padding-block:clamp(66px,8.5vw,120px);
}
.ctastrip__bg{position:absolute;inset:0;z-index:0;opacity:.32}
.ctastrip__bg img{width:100%;height:100%;object-fit:cover}
.ctastrip__bg.is-empty{
  background:repeating-linear-gradient(135deg,rgba(174,139,26,.06) 0 2px,transparent 2px 11px);
  opacity:1;
}
.ctastrip__bg.is-empty img{display:none}
/* Photo-backed variant (homepage "Start a project").
   The shared .ctastrip fades its background to .32; here the photograph runs at
   full strength behind a dedicated black wash instead, so the machine stays
   readable rather than washing out into the ink. */
.ctastrip--photo .ctastrip__bg{opacity:1}
.ctastrip--photo .ctastrip__bg img{object-position:center}
.ctastrip--photo::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:rgba(0,0,0,.62);
}
.ctastrip__inner{position:relative;z-index:2;text-align:center}
.ctastrip .btn-row{justify-content:center;margin-top:clamp(28px,3.2vw,40px)}

/* ---------- 21. REVEAL ANIMATIONS ---------------------------------------- */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .95s var(--ease-out),transform .95s var(--ease-out)}
.js .reveal.is-in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.09s}
.reveal[data-d="2"]{transition-delay:.18s}
.reveal[data-d="3"]{transition-delay:.27s}
.reveal[data-d="4"]{transition-delay:.36s}
.reveal[data-d="5"]{transition-delay:.45s}
.reveal[data-d="6"]{transition-delay:.54s}

.js .reveal-media{clip-path:inset(0 0 100% 0);transition:clip-path 1.25s var(--ease-out)}
.js .reveal-media.is-in{clip-path:inset(0 0 0 0)}

@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-media{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .media--zoom:hover img{transform:none}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ---------- 22. PRINT ----------------------------------------------------- */
@media print{
  .site-header,.drawer,.hero__scroll,.ctastrip,.site-footer{display:none!important}
  body{color:#000;background:#fff}
  .section{padding-block:20px}
}