/* ==========================================================================
   EASY BUILD PROJECTS — Brand System (Web)
   A direct extension of the approved Brand Guidelines, Vol.01 · 2026.
   Palette 60·30·9·1 · Manrope + Plus Jakarta Sans · 12-col grid · hairlines
   Sharp corners · no shadows · no gradients · burnt orange as 1% accent
   ========================================================================== */

:root{
  /* Ink / surfaces */
  --ink:#1E1E1E;          /* Charcoal Black — type, structural blocks (30%) */
  --ink-2:#2A2A2A;
  --ink-3:#3A3A3A;
  --paper:#FFFFFF;        /* Paper White — dominant ground (60%) */
  --concrete:#E5E5E5;     /* Concrete Grey — surface (9%) */
  --concrete-2:#F4F4F4;   /* soft concrete for large surfaces */
  --concrete-3:#EFEFEF;
  --burnt:#F26A21;        /* Burnt Orange — accent signal (1% max) */

  /* Hairlines (the brand is drawn, not boxed) */
  --hairline:rgba(30,30,30,0.12);
  --hairline-strong:rgba(30,30,30,0.22);
  --hairline-light:rgba(255,255,255,0.16);
  --hairline-light-2:rgba(255,255,255,0.08);

  /* Type */
  --font-display:'Manrope',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --font-mono:'Plus Jakarta Sans',ui-sans-serif,system-ui,sans-serif; /* uppercase labels + numerals only */

  /* Rhythm */
  --gutter:clamp(22px,5vw,80px);
  --wrap:1440px;
  --section-y:clamp(78px,9vw,148px);
  --ease:cubic-bezier(.2,.7,.2,1);
  --nav-h:96px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--font-display);font-weight:400;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;background:none;border:0;color:inherit;cursor:pointer}
ul{list-style:none}
:focus-visible{outline:2px solid var(--burnt);outline-offset:3px}
::selection{background:var(--burnt);color:#fff}

/* ---------- Layout scaffolding ---------------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y);position:relative;border-bottom:1px solid var(--hairline)}
.section--tight{padding-block:clamp(56px,6vw,96px)}
.section--flush{border-bottom:0}
.dark{background:var(--ink);color:#fff}
.dark .section,.section.dark{border-bottom-color:var(--hairline-light-2)}
.concrete{background:var(--concrete-2)}
.grid12{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,2.4vw,40px)}
.stack{display:flex;flex-direction:column}

/* ---------- Section header (eyebrow + index numeral) ------------------ */
.shead{display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  font-weight:500;margin-bottom:clamp(28px,4vw,52px)}
.shead .idx{display:flex;align-items:center;gap:14px;opacity:.55}
.shead .idx .bar{width:46px;height:1px;background:currentColor;opacity:.6}
.dark .shead .idx{opacity:.5}

/* ---------- Typographic primitives ------------------------------------ */
.eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  font-weight:500;color:var(--burnt);display:inline-flex;align-items:center;gap:11px}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--burnt);flex:none}
.eyebrow.no-line::before{display:none}

.h-hero{font-family:var(--font-display);font-weight:200;letter-spacing:-0.035em;line-height:.96;
  font-size:clamp(46px,8vw,128px);text-wrap:balance}
.h-1{font-family:var(--font-display);font-weight:300;letter-spacing:-0.03em;line-height:1.0;
  font-size:clamp(40px,6.2vw,104px);text-wrap:balance}
.h-2{font-family:var(--font-display);font-weight:300;letter-spacing:-0.025em;line-height:1.04;
  font-size:clamp(32px,4.6vw,72px);text-wrap:balance}
.h-3{font-family:var(--font-display);font-weight:400;letter-spacing:-0.02em;line-height:1.1;
  font-size:clamp(25px,3.1vw,46px);text-wrap:balance}
.h-4{font-family:var(--font-display);font-weight:600;letter-spacing:-0.01em;line-height:1.22;
  font-size:clamp(18px,1.5vw,22px)}
.lead{font-size:clamp(17px,1.45vw,21px);line-height:1.55;font-weight:300;max-width:62ch;color:var(--ink-2)}
.dark .lead{color:rgba(255,255,255,.78)}
.body{font-size:15.5px;line-height:1.7;font-weight:400;max-width:64ch;color:var(--ink-2)}
.dark .body{color:rgba(255,255,255,.72)}
.cap{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:500;color:var(--ink-2);opacity:.7}
.dark .cap{color:rgba(255,255,255,.62)}
.num{font-family:var(--font-mono);font-feature-settings:"tnum" 1;letter-spacing:.01em}
.accent{color:var(--burnt)}
.measure{max-width:64ch}

/* ---------- Rules / hairlines / graphic kit --------------------------- */
.hr{height:1px;background:var(--hairline);width:100%;border:0}
.dark .hr{background:var(--hairline-light)}
.hr--orange{height:1px;background:var(--burnt);width:64px;border:0}
.hr--thick{height:2px;background:var(--ink);width:100%;border:0}

/* L-shaped corner marks (the brand's 'corner mark' element) */
.corners{position:absolute;inset:0;pointer-events:none;z-index:3}
.corners i{position:absolute;width:30px;height:30px;border:1px solid var(--hairline-strong)}
.dark .corners i,.corners.light i{border-color:rgba(255,255,255,.36)}
.corners i.tl{top:16px;left:16px;border-right:0;border-bottom:0}
.corners i.tr{top:16px;right:16px;border-left:0;border-bottom:0}
.corners i.bl{bottom:16px;left:16px;border-right:0;border-top:0}
.corners i.br{bottom:16px;right:16px;border-left:0;border-top:0}

/* faint engineering grid overlay (used sparingly on dark hero/sections) */
.gridlines{position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:84px 84px}
.gridlines.ink{background-image:linear-gradient(rgba(30,30,30,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(30,30,30,.05) 1px,transparent 1px)}

/* ---------- Buttons --------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-mono);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  padding:16px 26px;border:1px solid var(--ink);background:var(--ink);color:#fff;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);white-space:nowrap}
.btn .tick{width:7px;height:7px;background:var(--burnt);flex:none;transition:transform .3s var(--ease)}
.btn:hover{background:var(--paper);color:var(--ink)}
.btn:hover .tick{transform:translateX(3px)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--hairline-strong)}
.btn--ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
/* on dark grounds (dark sections + hero) */
.dark .btn,.hero .btn,.btn--on-dark{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.dark .btn:hover,.hero .btn:hover,.btn--on-dark:hover{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.dark .btn--ghost,.hero .btn--ghost,.btn--ghost-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.40)}
.dark .btn--ghost:hover,.hero .btn--ghost:hover,.btn--ghost-dark:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}

/* text link with animated keyline */
.tlink{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;font-weight:600;padding-bottom:6px;position:relative}
.tlink::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;opacity:.25;
  transform:scaleX(1);transform-origin:left;transition:opacity .25s}
.tlink .ar{color:var(--burnt);transition:transform .3s var(--ease)}
.tlink:hover .ar{transform:translateX(4px)}
.tlink:hover::after{opacity:.6}

/* ---------- Chips / technical tags ------------------------------------ */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  padding:9px 14px;border:1px solid var(--hairline-strong);font-weight:600;color:var(--ink-2)}
.dark .chip{border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.8)}
.chip--solid{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip--accent{border-color:var(--burnt);color:var(--burnt)}

/* ---------- Navigation ------------------------------------------------ */
.nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--hairline)}
.nav__in{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.nav__brand{display:flex;align-items:center;gap:12px;height:100%}
.nav__brand img{height:68px;width:auto}
@media (max-width:600px){:root{--nav-h:80px}.nav__brand img{height:50px}.foot__brand img{height:44px}}
.nav__links{display:flex;align-items:center;gap:clamp(18px,2vw,34px)}
.nav__links a{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:var(--ink-2);position:relative;padding:6px 0;transition:color .2s}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:var(--burnt);
  transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease)}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{transform:scaleX(1)}
.nav__links a[aria-current="page"]{color:var(--ink)}
.nav__cta{display:flex;align-items:center;gap:18px}
.nav__cta .btn{padding:12px 20px}
.nav__toggle{display:none;width:40px;height:40px;flex-direction:column;justify-content:center;gap:5px;align-items:flex-end}
.nav__toggle span{display:block;height:1.5px;width:24px;background:var(--ink);transition:transform .3s var(--ease),opacity .2s,width .3s}
.nav__toggle span:nth-child(2){width:18px}
.nav.open .nav__toggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg);width:24px}
.nav.open .nav__toggle span:nth-child(2){opacity:0}
.nav.open .nav__toggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);width:24px}
.nav__mobile{display:none}

@media (max-width:1024px){
  .nav__links,.nav__cta .btn{display:none}
  .nav__toggle{display:flex}
  .nav__mobile{display:block;position:fixed;inset:var(--nav-h) 0 auto 0;background:var(--paper);
    border-bottom:1px solid var(--hairline);transform:translateY(-12px);opacity:0;visibility:hidden;
    transition:transform .3s var(--ease),opacity .3s,visibility .3s;z-index:99;max-height:calc(100vh - var(--nav-h));overflow:auto}
  .nav.open .nav__mobile{transform:translateY(0);opacity:1;visibility:visible}
  .nav__mobile a{display:flex;align-items:center;justify-content:space-between;padding:18px var(--gutter);
    font-family:var(--font-mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
    border-top:1px solid var(--hairline)}
  .nav__mobile a .n{font-size:10px;color:var(--burnt);opacity:.7}
  .nav__mobile .btn{margin:18px var(--gutter) 24px;display:inline-flex}
}

/* ---------- Hero ------------------------------------------------------ */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;
  min-height:clamp(560px,92vh,920px);display:flex;flex-direction:column;justify-content:flex-end}
.hero__media{position:absolute;inset:0;z-index:0;background-position:center;background-size:cover;
  background-repeat:no-repeat;filter:grayscale(.18) contrast(1.04)}
.hero__scrim{position:absolute;inset:0;z-index:1;background:rgba(20,20,20,.70)}
.hero__scrim::after{content:"";position:absolute;inset:0;background:rgba(30,30,30,.34);
  /* second flat block deepens lower third for legibility — flat, not a gradient */
  clip-path:inset(55% 0 0 0)}
.hero__in{position:relative;z-index:4;width:100%;max-width:var(--wrap);margin-inline:auto;
  padding:clamp(28px,5vw,56px) var(--gutter) clamp(34px,5vw,64px)}
.hero__top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;opacity:.82;
  margin-bottom:clamp(40px,12vh,140px)}
.hero__top .sq{width:8px;height:8px;background:var(--burnt);display:inline-block;margin-right:12px;vertical-align:middle}
.hero h1{font-family:var(--font-display);font-weight:200;letter-spacing:-0.04em;line-height:.94;
  font-size:clamp(42px,9vw,164px);overflow-wrap:break-word}
.hero__sub{margin-top:clamp(20px,2.4vw,32px);font-size:clamp(16px,1.4vw,20px);line-height:1.55;font-weight:300;
  max-width:60ch;color:rgba(255,255,255,.82)}
.hero__tech{margin-top:clamp(26px,3vw,40px);font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.66);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hero__tech .dot{width:4px;height:4px;background:var(--burnt);border-radius:0;display:inline-block}
.hero__actions{margin-top:clamp(30px,3.4vw,44px)}

/* ---------- Stats strip ----------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hairline)}
.stats .stat{padding:clamp(26px,3vw,40px) clamp(18px,2vw,30px);border-right:1px solid var(--hairline);
  display:flex;flex-direction:column;gap:12px}
.stats .stat:last-child{border-right:0}
.dark .stats{border-top-color:var(--hairline-light)}
.dark .stats .stat{border-right-color:var(--hairline-light)}
.stat__k{font-family:var(--font-display);font-weight:200;letter-spacing:-0.03em;line-height:.9;
  font-size:clamp(38px,4.4vw,60px)}
.stat__k .u{font-size:.42em;color:var(--burnt);font-weight:500;vertical-align:super}
.stat__l{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-2);opacity:.75;line-height:1.5;max-width:24ch}
.dark .stat__l{color:rgba(255,255,255,.66)}
@media (max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}
  .stats .stat:nth-child(2){border-right:0}
  .stats .stat:nth-child(1),.stats .stat:nth-child(2){border-bottom:1px solid var(--hairline)}
  .dark .stats .stat:nth-child(1),.dark .stats .stat:nth-child(2){border-bottom-color:var(--hairline-light)}}
@media (max-width:460px){.stats{grid-template-columns:1fr}.stats .stat{border-right:0;border-bottom:1px solid var(--hairline)}}

/* ---------- Media frame ----------------------------------------------- */
.frame{position:relative;overflow:hidden;background:var(--concrete-2)}
.frame img{width:100%;height:100%;object-fit:cover;filter:grayscale(.12) contrast(1.03)}
.frame--tall{aspect-ratio:3/4}
.frame--wide{aspect-ratio:16/10}
.frame--sq{aspect-ratio:1/1}
.frame__cap{position:absolute;left:14px;bottom:12px;z-index:4;background:rgba(20,20,20,.62);
  color:#fff;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  padding:6px 10px;backdrop-filter:blur(4px)}

/* ---------- Services -------------------------------------------------- */
.svc{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid var(--hairline);margin-top:8px}
.svc__card{padding:clamp(34px,4vw,60px);border-right:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  position:relative;display:flex;flex-direction:column;gap:22px;min-height:clamp(360px,40vw,460px);
  transition:background .3s var(--ease)}
.svc__card:nth-child(2n){border-right:0}
.svc__card:nth-last-child(-n+2){border-bottom:0}
.svc__card:hover{background:var(--concrete-2)}
.svc__no{font-family:var(--font-mono);font-size:11px;letter-spacing:.24em;color:var(--burnt);font-weight:600}
.svc__card h3{margin-top:2px}
.svc__list{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;margin-top:auto;padding-top:22px;border-top:1px solid var(--hairline)}
.svc__list li{font-size:13.5px;line-height:1.5;color:var(--ink-2);padding-left:16px;position:relative}
.svc__list li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:1px;background:var(--burnt)}
@media (max-width:820px){.svc{grid-template-columns:1fr}
  .svc__card{border-right:0}.svc__card:nth-last-child(2){border-bottom:1px solid var(--hairline)}
  .svc__list{grid-template-columns:1fr}}

/* ---------- Pillars (Precision · Structure · Trust · Delivery) -------- */
.pillars{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid var(--hairline-light)}
.pillars .p{padding:clamp(34px,3.6vw,52px);border-right:1px solid var(--hairline-light);
  border-bottom:1px solid var(--hairline-light);min-height:clamp(240px,24vw,300px);
  display:flex;flex-direction:column;justify-content:space-between;position:relative}
.pillars .p:nth-child(2n){border-right:0}
.pillars .p:nth-last-child(-n+2){border-bottom:0}
.pillars .p .pno{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.26em;color:rgba(255,255,255,.4);position:absolute;top:24px;right:26px}
.pillars .p .icn{width:38px;height:38px;color:var(--burnt)}
.pillars .p h3{font-family:var(--font-display);font-weight:300;letter-spacing:-0.02em;font-size:clamp(28px,3vw,40px);line-height:1}
.pillars .p p{font-size:14px;line-height:1.6;color:rgba(255,255,255,.7);max-width:34ch}
.pillars--light{border-color:var(--hairline)}
.pillars--light .p{border-color:var(--hairline)}
.pillars--light .p .pno{color:var(--ink-2);opacity:.5}
.pillars--light .p p{color:var(--ink-2)}
@media (max-width:760px){.pillars{grid-template-columns:1fr}
  .pillars .p{border-right:0}.pillars .p:nth-last-child(2){border-bottom:1px solid var(--hairline-light)}
  .pillars--light .p:nth-last-child(2){border-bottom:1px solid var(--hairline)}}

/* ---------- Sectors --------------------------------------------------- */
.sectors{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--hairline);border-left:1px solid var(--hairline)}
.sectors .s{padding:clamp(22px,2vw,30px) clamp(18px,1.6vw,24px);border-right:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);min-height:148px;display:flex;flex-direction:column;justify-content:space-between;
  transition:background .25s var(--ease),color .25s}
.sectors .s:hover{background:var(--ink);color:#fff}
.sectors .s:hover .s__n,.sectors .s:hover .s__t{color:#fff}
.sectors .s__n{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;color:var(--burnt);font-weight:600}
.sectors .s__t{font-family:var(--font-display);font-weight:500;font-size:clamp(15px,1.2vw,18px);letter-spacing:-0.01em;line-height:1.15}
@media (max-width:1024px){.sectors{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){.sectors{grid-template-columns:repeat(2,1fr)}}

/* ---------- Projects index (typographic — no misrepresented photos) --- */
.pindex{border-top:1px solid var(--ink)}
.pindex__row{display:grid;grid-template-columns:64px 1.7fr 1fr auto;gap:24px;align-items:center;
  padding:clamp(20px,2vw,30px) 4px;border-bottom:1px solid var(--hairline);position:relative;
  transition:padding-left .3s var(--ease),background .3s var(--ease)}
.pindex__row:hover{padding-left:18px;background:var(--concrete-2)}
.pindex__row .pn{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;color:var(--ink-2);opacity:.55}
.pindex__row .pt{font-family:var(--font-display);font-weight:400;letter-spacing:-0.015em;font-size:clamp(19px,2vw,30px);line-height:1.1}
.pindex__row .pl{font-size:13.5px;color:var(--ink-2)}
.pindex__row .pc{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-2);border:1px solid var(--hairline-strong);padding:7px 11px;justify-self:end;white-space:nowrap}
.pindex__row:hover .pc{border-color:var(--burnt);color:var(--burnt)}
@media (max-width:760px){
  .pindex__row{grid-template-columns:42px 1fr;gap:6px 14px;padding-block:20px}
  .pindex__row .pl{grid-column:2}
  .pindex__row .pc{grid-row:1/3;grid-column:2;justify-self:end;align-self:start}
}

/* card variant for project teaser on home */
.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hairline);border:1px solid var(--hairline)}
.pcards .pcard{background:var(--paper);padding:clamp(26px,2.6vw,38px);min-height:230px;
  display:flex;flex-direction:column;justify-content:space-between;gap:22px;transition:background .3s}
.pcards .pcard:hover{background:var(--concrete-2)}
.pcards .pcard .pc-no{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.22em;color:var(--burnt)}
.pcards .pcard h4{font-family:var(--font-display);font-weight:400;font-size:clamp(20px,1.7vw,24px);letter-spacing:-0.01em;line-height:1.15}
.pcards .pcard .pc-meta{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);opacity:.7}
@media (max-width:900px){.pcards{grid-template-columns:1fr}}
/* logo grid (responsive, overrides default pcards columns) */
.pcards.logos5{grid-template-columns:repeat(5,1fr)}
.pcards.logos5 .pcard{min-height:118px;align-items:center;justify-content:center;text-align:center}
@media (max-width:900px){.pcards.logos5{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.pcards.logos5{grid-template-columns:repeat(2,1fr)}}

/* ---------- Client marquee ------------------------------------------- */
.clients{overflow:hidden;border-block:1px solid var(--hairline);padding-block:0;position:relative}
.dark .clients{border-color:var(--hairline-light)}
.marquee{display:flex;width:max-content;animation:slidemq 42s linear infinite}
.marquee:hover{animation-play-state:paused}
.marquee__item{display:flex;align-items:center;justify-content:center;padding:30px clamp(28px,4vw,60px);
  font-family:var(--font-display);font-weight:500;font-size:clamp(17px,1.5vw,22px);letter-spacing:-0.01em;
  color:var(--ink-2);white-space:nowrap;border-right:1px solid var(--hairline);opacity:.78;transition:opacity .25s,color .25s}
.dark .marquee__item{color:rgba(255,255,255,.7);border-right-color:var(--hairline-light)}
.marquee__item:hover{opacity:1;color:var(--burnt)}
@keyframes slidemq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee{animation:none;flex-wrap:wrap;width:100%}}

/* ---------- Client journey (5-stage) --------------------------------- */
.journey{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--hairline)}
.journey .js{padding:clamp(26px,2.4vw,36px) clamp(16px,1.4vw,22px);border-right:1px solid var(--hairline);
  display:flex;flex-direction:column;gap:16px;min-height:240px}
.journey .js:last-child{border-right:0}
.journey .js .jn{font-family:var(--font-mono);font-size:11px;letter-spacing:.24em;color:var(--burnt);font-weight:600}
.journey .js h4{font-family:var(--font-display);font-weight:500;font-size:18px;letter-spacing:-0.01em}
.journey .js p{font-size:13px;line-height:1.55;color:var(--ink-2)}
.journey .js .jl{margin-top:auto;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);opacity:.6;padding-top:12px;border-top:1px solid var(--hairline)}
@media (max-width:1024px){.journey{grid-template-columns:1fr 1fr}.journey .js:nth-child(2n){border-right:0}.journey .js{border-bottom:1px solid var(--hairline)}}
@media (max-width:560px){.journey{grid-template-columns:1fr}.journey .js{border-right:0}}

/* ---------- Capability pillars list (USP / statement) ---------------- */
.statement{font-family:var(--font-display);font-weight:300;letter-spacing:-0.02em;line-height:1.18;
  font-size:clamp(24px,3vw,44px);max-width:20ch;text-wrap:balance}
.statement b{font-weight:500;color:inherit}

/* ---------- Contact form --------------------------------------------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,3vw,44px)}
.field{display:flex;flex-direction:column;gap:10px;padding-block:18px;border-bottom:1px solid var(--hairline)}
.field.full{grid-column:1/-1}
.field label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);font-weight:600}
.field label .req{color:var(--burnt)}
.field input,.field select,.field textarea{font-family:var(--font-display);font-size:16px;color:var(--ink);
  background:transparent;border:0;padding:4px 0;width:100%;font-weight:400}
.field textarea{resize:vertical;min-height:96px;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:rgba(30,30,30,.32)}
.field select{appearance:none;cursor:pointer}
.field--focus{border-bottom-color:var(--burnt)}
.form__foot{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:30px;flex-wrap:wrap}
.form__note{font-size:12.5px;color:var(--ink-2);opacity:.7;max-width:46ch}
@media (max-width:680px){.form{grid-template-columns:1fr}}

/* ---------- Footer ---------------------------------------------------- */
.foot{background:var(--ink);color:#fff;padding-block:clamp(56px,6vw,88px) 32px}
.foot__top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(28px,3vw,48px);
  padding-bottom:clamp(40px,4vw,60px);border-bottom:1px solid var(--hairline-light)}
.foot__brand img{height:52px;margin-bottom:22px}
.foot__brand p{font-size:14px;line-height:1.6;color:rgba(255,255,255,.6);max-width:34ch}
.foot__col h5{font-family:var(--font-mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:18px}
.foot__col a,.foot__col p{display:block;font-size:14px;color:rgba(255,255,255,.78);padding:5px 0;transition:color .2s}
.foot__col a:hover{color:var(--burnt)}
.foot__bot{display:flex;justify-content:space-between;align-items:center;gap:18px;padding-top:26px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.foot__bot .compliance{display:flex;gap:18px;flex-wrap:wrap}
@media (max-width:900px){.foot__top{grid-template-columns:1fr 1fr}.foot__brand{grid-column:1/-1}}
@media (max-width:520px){.foot__top{grid-template-columns:1fr}}

/* ---------- CTA band -------------------------------------------------- */
.ctaband{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center}
@media (max-width:820px){.ctaband{grid-template-columns:1fr;gap:28px}}

/* ---------- Reveal animation (fade in + slight rise; reduced-motion safe) */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}
.rline{height:1px;background:currentColor;opacity:.4;transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease)}
.rline.in{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .rline{transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---------- Generic helpers ------------------------------------------ */
.col-7{grid-column:span 7}.col-6{grid-column:span 6}.col-5{grid-column:span 5}
.col-8{grid-column:span 8}.col-4{grid-column:span 4}.col-12{grid-column:span 12}
.mt-s{margin-top:18px}.mt-m{margin-top:30px}.mt-l{margin-top:clamp(34px,4vw,56px)}
.maxw-1{max-width:54ch}.maxw-2{max-width:42ch}
.oneline{max-width:none;white-space:nowrap}
@media (max-width:640px){.oneline{white-space:normal}}

/* Contact — success confirmation panel (swaps in for the form on send) */
.form-sent{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:340px;padding:48px 32px;border:1px solid var(--hairline-strong);background:var(--paper);opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.form-sent.in{opacity:1;transform:none}
.form-sent__tick{position:relative;width:30px;height:52px;margin-bottom:24px;flex:none}
.form-sent__tick::after{content:"";position:absolute;left:0;bottom:5px;width:16px;height:34px;border:solid var(--burnt);border-width:0 4px 4px 0;transform:rotate(45deg)}
.form-sent__title{font-size:clamp(24px,3vw,30px);font-weight:700;line-height:1.1;margin:0 0 12px;color:var(--ink)}
.form-sent__text{font-size:16px;line-height:1.65;color:var(--ink-2);max-width:34ch;margin:0}
@media (max-width:900px){
  .col-7,.col-6,.col-5,.col-8,.col-4{grid-column:span 12}
}

/* ---------- Nav scrolled state --------------------------------------- */
.nav.scrolled{background:rgba(255,255,255,.95);border-bottom-color:var(--hairline-strong)}

/* ---------- Inner-page masthead -------------------------------------- */
.masthead{position:relative;padding-block:clamp(104px,13vh,168px) clamp(40px,5vw,72px);
  border-bottom:1px solid var(--hairline);overflow:hidden}
.masthead.dark{border-bottom-color:var(--hairline-light-2)}
.masthead .gridlines{z-index:0}
.masthead__idx{position:absolute;top:clamp(40px,6vh,72px);right:var(--gutter);z-index:2;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;opacity:.5}
.masthead__in{position:relative;z-index:2}
.masthead h1{margin-top:18px}
.masthead .lead{margin-top:clamp(20px,2.4vw,30px)}
.crumbs{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;opacity:.55;
  display:flex;gap:10px;align-items:center}
.crumbs a:hover{color:var(--burnt)}
.crumbs .sep{opacity:.5}

/* ---------- Two-column media block ----------------------------------- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.4vw,80px);align-items:center}
.two-col--text{align-items:start}
.two-col.flip .two-col__media{order:-1}
@media (max-width:860px){.two-col{grid-template-columns:1fr;gap:32px}
  .two-col.flip .two-col__media{order:0}}

/* ---------- Definition list (facts / specs) -------------------------- */
.deflist{border-top:1px solid var(--hairline)}
.deflist .row{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:18px 0;border-bottom:1px solid var(--hairline)}
.deflist .row dt{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);opacity:.7;font-weight:600;padding-top:3px}
.deflist .row dd{font-size:15.5px;line-height:1.6;color:var(--ink)}
.dark .deflist{border-top-color:var(--hairline-light)}
.dark .deflist .row{border-bottom-color:var(--hairline-light)}
.dark .deflist .row dd{color:#fff}
@media (max-width:620px){.deflist .row{grid-template-columns:1fr;gap:6px}}

/* ---------- Scope list (services detail) ----------------------------- */
.scope{display:grid;grid-template-columns:1fr 1fr;gap:10px 40px;margin-top:8px}
.scope li{font-size:15px;line-height:1.5;color:var(--ink-2);padding:14px 0 14px 20px;border-bottom:1px solid var(--hairline);position:relative}
.scope li::before{content:"";position:absolute;left:0;top:21px;width:8px;height:1px;background:var(--burnt)}
@media (max-width:680px){.scope{grid-template-columns:1fr}}

/* numbered service block (services page) */
.svcblock{display:grid;grid-template-columns:84px 1fr;gap:clamp(20px,3vw,48px);padding-block:clamp(40px,5vw,72px);border-bottom:1px solid var(--hairline)}
.svcblock:last-child{border-bottom:0}
.svcblock .bn{font-family:var(--font-display);font-weight:200;font-size:clamp(44px,5vw,68px);letter-spacing:-0.04em;line-height:.8;color:var(--ink);opacity:.18}
@media (max-width:680px){.svcblock{grid-template-columns:1fr;gap:18px}.svcblock .bn{font-size:40px}}

/* sector detail card (sectors page) */
.secgrid{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid var(--hairline)}
.secgrid .sc{padding:clamp(28px,3vw,44px);border-right:1px solid var(--hairline);border-bottom:1px solid var(--hairline);display:flex;flex-direction:column;gap:14px;min-height:200px}
.secgrid .sc:nth-child(2n){border-right:0}
.secgrid .sc:nth-last-child(-n+2){border-bottom:0}
.secgrid .sc .scn{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.24em;color:var(--burnt);font-weight:600}
.secgrid .sc h3{font-family:var(--font-display);font-weight:400;font-size:clamp(22px,2vw,30px);letter-spacing:-0.015em}
.secgrid .sc p{font-size:14px;line-height:1.6;color:var(--ink-2);max-width:38ch}
@media (max-width:760px){.secgrid{grid-template-columns:1fr}.secgrid .sc{border-right:0}.secgrid .sc:nth-last-child(2){border-bottom:1px solid var(--hairline)}}

/* ============ WORK SHOWCASE — coverflow carousel ==================== */
.showcase{overflow:hidden}
.cf{--cw:clamp(190px,21vw,272px);--ch:clamp(290px,35vw,430px);
  position:relative;width:100%;height:var(--ch);perspective:1500px;margin-top:clamp(30px,4vw,52px)}
.cf__track{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.cf__item{position:absolute;top:50%;left:50%;width:var(--cw);height:var(--ch);
  margin-left:calc(var(--cw)/-2);margin-top:calc(var(--ch)/-2);overflow:hidden;background:var(--ink-2);
  transition:transform .6s var(--ease),opacity .6s var(--ease),filter .6s var(--ease);
  will-change:transform,opacity;cursor:pointer}
.cf__item picture{display:block;width:100%;height:100%}
.cf__item img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.14) contrast(1.04)}
.cf__item::after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.16);pointer-events:none;transition:border-color .4s}
.cf__item.is-active::after{border-color:var(--burnt)}
.cf__cap{position:absolute;left:12px;bottom:12px;z-index:3;background:rgba(18,18,18,.66);color:#fff;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;padding:6px 10px;
  opacity:0;transition:opacity .4s;backdrop-filter:blur(3px)}
.cf__item.is-active .cf__cap{opacity:1}
.cf__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:20;width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.3);
  background:rgba(18,18,18,.42);color:#fff;backdrop-filter:blur(4px);transition:background .25s,border-color .25s}
.cf__nav:hover{background:var(--burnt);border-color:var(--burnt)}
.cf__nav svg{width:20px;height:20px}
.cf__nav.prev{left:clamp(2px,2vw,24px)}
.cf__nav.next{right:clamp(2px,2vw,24px)}
.cf:not(.cf--ready){display:flex;gap:14px;overflow-x:auto;perspective:none;height:auto;scroll-snap-type:x mandatory}
.cf:not(.cf--ready) .cf__item{position:relative;top:auto;left:auto;margin:0;flex:0 0 var(--cw);height:var(--ch);
  transform:none!important;opacity:1!important;filter:none!important;visibility:visible!important;scroll-snap-align:center}
.cf:not(.cf--ready) .cf__item .cf__cap{opacity:1}
.cf:not(.cf--ready) .cf__nav{display:none}
.cf__foot{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:clamp(26px,3vw,40px)}
.cf__dots{display:flex;gap:9px}
.cf__dot{width:24px;height:2px;background:rgba(255,255,255,.24);border:0;padding:0;cursor:pointer;transition:background .25s,width .25s}
.cf__dot.is-active{background:var(--burnt);width:40px}
.cf__count{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;color:rgba(255,255,255,.6)}
.cf__count b{color:#fff;font-weight:600}
@media (prefers-reduced-motion:reduce){.cf__item{transition:opacity .3s}}

/* ============ FLOATING BRAND BADGE (scroll-to-top) ================== */
.fab{position:fixed;right:clamp(16px,2.4vw,34px);bottom:clamp(16px,2.4vw,34px);z-index:80;
  width:clamp(94px,9vw,118px);height:clamp(94px,9vw,118px);padding:0;border:0;background:none;cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.92);
  transition:opacity .45s var(--ease),transform .45s var(--ease),visibility .45s}
.fab.show{opacity:1;visibility:visible;transform:none}
.fab__disc{position:absolute;inset:0;border-radius:50%;background:var(--ink);border:1px solid rgba(255,255,255,.16)}
.fab__ring{position:absolute;inset:0;animation:fabspin 26s linear infinite}
.fab__ring text{font-family:var(--font-mono);font-size:9px;letter-spacing:.24em;text-transform:uppercase;fill:#fff;font-weight:600}
.fab__core{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.fab__core .dotc{width:34px;height:34px;border-radius:50%;background:var(--burnt);color:#fff;
  display:flex;align-items:center;justify-content:center;transition:transform .3s var(--ease)}
.fab:hover .fab__core .dotc{transform:translateY(-3px)}
.fab__core svg{width:15px;height:15px}
@keyframes fabspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.fab__ring{animation:none}}
@media (max-width:600px){.fab{width:74px;height:74px;right:14px;bottom:14px}.fab__ring text{font-size:7.6px;letter-spacing:.16em}.fab__core .dotc{width:28px;height:28px}}

/* ============ ENVIRONMENT GALLERY (masonry columns) ================ */
.gallery{columns:3;column-gap:clamp(12px,1.4vw,20px);margin-top:clamp(30px,4vw,52px)}
.gallery .g{break-inside:avoid;margin:0 0 clamp(12px,1.4vw,20px);position:relative;overflow:hidden;
  background:var(--ink-2);width:100%;display:block}
.gallery .g picture{display:block;width:100%;height:100%}
.gallery .g img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.14) contrast(1.04);transition:transform .8s var(--ease)}
.gallery .g:hover img{transform:scale(1.05)}
.gallery .g::after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.14);pointer-events:none;transition:border-color .4s}
.gallery .g:hover::after{border-color:var(--burnt)}
.gallery .g.r-wide{aspect-ratio:4/3}
.gallery .g.r-port{aspect-ratio:3/4}
.gallery .g.r-tall{aspect-ratio:5/7}
.gallery .g.r-sq{aspect-ratio:1/1}
@media (max-width:900px){.gallery{columns:2}}
@media (max-width:560px){.gallery{columns:1}.gallery .g{aspect-ratio:16/10!important}}

/* ============ PROJECT CARDS (selected projects) =================== */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px);margin-top:clamp(28px,3.4vw,46px)}
.pcard2{position:relative;display:flex;flex-direction:column;background:var(--concrete-2);border:1px solid var(--hairline);overflow:hidden}
.pcard2__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ink)}
.pcard2__media picture{display:block;width:100%;height:100%}
.pcard2__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.1) contrast(1.04);transition:transform .7s var(--ease)}
.pcard2:hover .pcard2__media img{transform:scale(1.05)}
.pcard2__tag{position:absolute;top:12px;left:12px;z-index:3;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:#fff;background:rgba(20,20,20,.58);padding:6px 10px;backdrop-filter:blur(3px)}
.pcard2__body{padding:clamp(16px,1.4vw,20px);display:flex;flex-direction:column;gap:6px}
.pcard2__body h3{font-family:var(--font-display);font-weight:400;font-size:clamp(17px,1.4vw,21px);letter-spacing:-0.01em;line-height:1.15}
.pcard2__body .loc{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);opacity:.7}
.pcard2--ph .pcard2__media{display:flex;align-items:center;justify-content:center}
.pcard2--ph .ph{display:flex;flex-direction:column;align-items:center;gap:11px;color:rgba(255,255,255,.36)}
.pcard2--ph .ph svg{width:32px;height:32px}
.pcard2--ph .ph span{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.24em;text-transform:uppercase}
@media (max-width:900px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.pgrid{grid-template-columns:1fr}}

/* ============ CLIENT / PARTNER LOGOS ============================== */
.marquee__item img{height:clamp(24px,2.6vw,34px);width:auto;display:block;filter:grayscale(1) opacity(.58);transition:filter .35s var(--ease),opacity .35s var(--ease)}
.marquee__item:hover img{filter:grayscale(0);opacity:1}
.pcards.logos5 .pcard{min-height:152px}
.pcard .cl-logo{height:clamp(26px,2.3vw,32px);width:auto;margin:0 auto 14px;filter:grayscale(1) opacity(.58);transition:filter .35s var(--ease),opacity .35s var(--ease)}
.pcard:hover .cl-logo{filter:grayscale(0);opacity:1}

/* ============ Heading reveal — per-character "typewriter" (brand) === */
.typewriter .tw-word{display:inline-block;white-space:nowrap}
.typewriter .tw-char{display:inline-block;opacity:0;color:var(--burnt);transform:translateY(4px);
  will-change:opacity,color,transform;animation-fill-mode:forwards;animation-play-state:paused}
.typewriter.in .tw-char{animation-name:tw-reveal;animation-duration:.6s;
  animation-timing-function:cubic-bezier(.2,.65,.25,1);animation-play-state:running}
.dark .typewriter.in .tw-char,.hero .typewriter.in .tw-char{animation-name:tw-reveal-dark}
@keyframes tw-reveal{
  0%{opacity:0;color:var(--burnt);transform:translateY(4px)}
  25%{opacity:1;color:var(--burnt);transform:translateY(0)}
  60%{opacity:1;color:var(--burnt);transform:translateY(0)}
  100%{opacity:1;color:var(--ink);transform:translateY(0)}}
@keyframes tw-reveal-dark{
  0%{opacity:0;color:var(--burnt);transform:translateY(4px)}
  25%{opacity:1;color:var(--burnt);transform:translateY(0)}
  60%{opacity:1;color:var(--burnt);transform:translateY(0)}
  100%{opacity:1;color:#fff;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.typewriter .tw-char{opacity:1;color:inherit;transform:none;animation:none}}

/* ============ Shiny header CTA — sweeping gloss ==================== */
@property --btnshine{syntax:'<percentage>';inherits:false;initial-value:140%}
.btn--shiny{position:relative;overflow:hidden;isolation:isolate}
.btn--shiny::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(100deg,transparent calc(var(--btnshine) - 16%),rgba(255,255,255,.48) var(--btnshine),transparent calc(var(--btnshine) + 16%));
  animation:btnShine 4.5s cubic-bezier(.45,0,.2,1) infinite}
@keyframes btnShine{0%{--btnshine:140%}34%{--btnshine:-40%}100%{--btnshine:-40%}}
@media (prefers-reduced-motion:reduce){.btn--shiny::after{display:none}}