/* ===========================================================
   LITCO — Legacy for Industry and Technology Co.
   Stylesheet. Sectioned by comment banners for easy editing.
   =========================================================== */

/* Visually hidden but accessible/crawlable — used to give the hero's H1
   real keyword content for SEO/screen readers without changing the
   visual headline design. */
.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;
}

/* ---------- 0. Fonts (self-hosted, no external requests) ---------- */
@font-face{
  font-family:"Oswald"; font-style:normal; font-weight:400;
  src:url("fonts/oswald-latin-400-normal.woff2") format("woff2");
  font-display:swap;
}
@font-face{
  font-family:"Oswald"; font-style:normal; font-weight:500;
  src:url("fonts/oswald-latin-500-normal.woff2") format("woff2");
  font-display:swap;
}
@font-face{
  font-family:"Oswald"; font-style:normal; font-weight:600;
  src:url("fonts/oswald-latin-600-normal.woff2") format("woff2");
  font-display:swap;
}
@font-face{
  font-family:"Oswald"; font-style:normal; font-weight:700;
  src:url("fonts/oswald-latin-700-normal.woff2") format("woff2");
  font-display:swap;
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:400;
  src:url("fonts/inter-latin-400-normal.woff2") format("woff2");
  font-display:swap;
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:500;
  src:url("fonts/inter-latin-500-normal.woff2") format("woff2");
  font-display:swap;
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:600;
  src:url("fonts/inter-latin-600-normal.woff2") format("woff2");
  font-display:swap;
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:700;
  src:url("fonts/inter-latin-700-normal.woff2") format("woff2");
  font-display:swap;
}

/* ---------- 1. Variables & reset ---------- */
:root{
  --navy:        #253041;
  --navy-deep:   #161e29;
  --navy-mid:    #1c2634;
  --gold:        #c19a49;
  --gold-soft:   #d9bd83;
  --paper:       #f4f5f6;
  --paper-dim:   #e9ebed;
  --ink:         #1c2430;
  --gray:        #5c6570;
  --gray-soft:   #8993a0;
  --line-dark:   rgba(255,255,255,.14);
  --line-light:  rgba(28,36,48,.14);
  --steel:       #93a9c0;
  --steel-deep:  #3d5978;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --shadow-sm: 0 8px 20px rgba(20,30,45,.06);
  --shadow-md: 0 16px 36px rgba(20,30,45,.09);
  --shadow-dark-sm: 0 10px 24px rgba(0,0,0,.28);
  --shadow-dark-md: 0 20px 44px rgba(0,0,0,.35);
  --ease-out:    cubic-bezier(.16,1,.3,1);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
  --nav-h: 80px;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-family:"Oswald", sans-serif; font-weight:500; letter-spacing:.01em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--gold); color:var(--navy-deep); }

/* ---------- 2. Nav bar ---------- */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  height:var(--nav-h);
  display:flex; align-items:center;
  padding:0 clamp(20px, 4vw, 56px);
  transition:background-color .45s var(--ease-out), border-color .45s var(--ease-out), height .3s var(--ease-out), backdrop-filter .45s;
  border-bottom:1px solid transparent;
}
.site-nav.scrolled{
  height:66px;
  background:rgba(22,30,41,.72);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--line-dark);
}
.nav-inner{
  width:100%; max-width:1400px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav-logo{ display:flex; align-items:center; height:22px; }
.nav-logo img{ height:100%; width:auto; }
.nav-links{ display:flex; align-items:center; gap:clamp(14px, 1.8vw, 28px); }
.nav-links a{
  font-family:"Oswald", sans-serif;
  font-size:12.5px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.62);
  position:relative;
  padding:6px 0;
  transition:color .25s;
  white-space:nowrap;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0; border-radius:2px;
  background:var(--gold); transition:width .3s var(--ease-out);
}
.nav-links a:hover{ color:#fff; }
.nav-links a.active{ color:#fff; }
.nav-links a.active::after{ width:100%; }
/* Specificity note: ".nav-links a.nav-cta" (not just ".nav-cta") is required
   here — ".nav-links a" above has higher specificity than a bare ".nav-cta"
   class, so without the extra "a" qualifier its padding/font-size would win
   instead, leaving the Contact pill with ~0 horizontal padding. */
.nav-links a.nav-cta{
  font-family:"Oswald", sans-serif;
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--navy-deep) !important;
  background:var(--gold);
  padding:11px 24px;
  border-radius:100px;
  box-shadow:0 8px 20px rgba(193,154,73,.3);
  transition:background-color .25s, transform .25s var(--ease-bounce), box-shadow .25s;
}
.nav-links a.nav-cta::after{ display:none; }
.nav-links a.nav-cta:hover{ background:var(--gold-soft); transform:translateY(-2px); box-shadow:0 12px 26px rgba(193,154,73,.4); }
.nav-toggle{
  display:none; background:none; border:none; width:32px; height:24px; position:relative; z-index:210;
}
.nav-toggle span{
  position:absolute; left:0; right:0; height:2px; background:#fff; border-radius:2px;
  transition:transform .3s var(--ease-out), opacity .3s;
}
.nav-toggle span:nth-child(1){ top:2px; }
.nav-toggle span:nth-child(2){ top:11px; }
.nav-toggle span:nth-child(3){ top:20px; }
.nav-toggle.open span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

/* Top scroll-progress bar — a web-native affordance (replaces a
   brochure-style "page X/7" tag). */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:300; pointer-events:none;
}
.scroll-progress .bar{
  display:block; height:100%; width:100%;
  background:linear-gradient(90deg, var(--gold), var(--gold-soft));
  transform:scaleX(0); transform-origin:left;
}

/* ---------- 3. Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:15px 30px; border-radius:100px;
  font-family:"Oswald", sans-serif; font-size:13px; letter-spacing:.06em; text-transform:uppercase; font-weight:500;
  transition:transform .35s var(--ease-bounce), background-color .25s, color .25s, box-shadow .3s, border-color .25s;
  white-space:nowrap;
}
.btn svg{ width:15px; height:15px; transition:transform .3s var(--ease-bounce); }
.btn:hover svg{ transform:translate(3px,-3px); }
.btn-primary{ background:var(--gold); color:var(--navy-deep); box-shadow:0 14px 30px rgba(193,154,73,.32); }
.btn-primary:hover{ background:var(--gold-soft); transform:translateY(-3px); box-shadow:0 18px 38px rgba(193,154,73,.4); }
.btn-ghost{
  background:rgba(255,255,255,.06); color:#fff; border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.btn-ghost:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.5); transform:translateY(-3px); }

/* ---------- 4. Section shells ---------- */
.section{
  position:relative;
  padding: clamp(80px, 12vh, 140px) clamp(20px, 6vw, 64px) clamp(64px, 9vh, 110px);
  overflow:hidden;
}
.section-inner{ max-width:1240px; margin:0 auto; position:relative; z-index:2; }
.section.on-light{ background:var(--paper); color:var(--ink); }
.section.on-dark{ background:var(--navy); color:#fff; }

/* Compact "eyebrow" kicker — a plain text label, no section numeral
   (numbered badges read too much like a print-document convention). */
.section-kicker{
  display:inline-flex; align-items:center; margin-bottom:22px;
}
.kicker-label{
  font-family:"Oswald", sans-serif; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); font-weight:500;
}

.section-head{ max-width:900px; margin-bottom:clamp(32px,5vh,56px); }
.section-head h2{
  font-size:clamp(28px, 4vw, 44px);
  line-height:1.14;
  color:var(--navy);
  max-width:15ch;
  letter-spacing:-.01em;
}
/* Sections with no side photo (How We Work, Organisation, Services,
   Partners) get a wider headline so the text actually uses the row
   width freed up by removing that photo, instead of leaving it empty. */
.section-head.wide h2{ max-width:26ch; }
.section-head.wide .sub{ max-width:64ch; }
.section.on-dark .section-head h2{ color:#fff; }
.section-head .sub{
  margin-top:16px; font-size:16px; line-height:1.6; color:var(--gray); max-width:56ch;
}
.section.on-dark .section-head .sub{ color:rgba(255,255,255,.62); }

/* head-row: pairs the kicker+headline block with a side accent photo on
   wide screens only. Only Overview keeps this photo now — the other
   sections that used to carry one (How We Work, Organisation, Services,
   Partners) had theirs removed, so .head-text fills the full row there
   automatically via flex:1 1 auto. */
.head-row{ display:block; }
.head-text{ min-width:0; }
.head-media{ display:none; }
.head-visual{ display:block; }
@media (min-width:1150px){
  .head-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:clamp(32px,4vw,64px); }
  .head-text{ flex:1 1 auto; }
  /* .head-visual (photo + the stat cards below it) is the flex item now,
     not .head-media directly, so the cards continue immediately under
     the photo in the same column no matter how tall .head-text ends up
     next to it. */
  .head-visual{ flex:none; width:clamp(320px,32vw,460px); }
  .head-media{
    display:block; width:100%; border-radius:var(--r-lg); overflow:hidden; position:relative;
    box-shadow:var(--shadow-md);
  }
  .section.on-dark .head-media{ box-shadow:var(--shadow-dark-md); }
  .head-media img{ width:100%; height:100%; min-height:380px; object-fit:cover; display:block; }
  .head-media::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(11,20,33,0) 55%, rgba(11,20,33,.35) 100%);
  }
  .head-visual .stat-cards{ margin-top:16px; }
}

/* ---------- 5. Reveal-on-scroll utilities ---------- */
.reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-scale{ opacity:0; transform:scale(.94); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal-scale.in{ opacity:1; transform:scale(1); }
.reveal-line{ opacity:0; transform:translateX(-16px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal-line.in{ opacity:1; transform:translateX(0); }
/* stagger via inline --d custom property set by JS or nth-child */
.reveal, .reveal-scale, .reveal-line{ transition-delay:var(--d, 0s); }

/* ---------- 6. HERO ---------- */
.hero{
  position:relative; height:100svh; min-height:640px;
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
  background:var(--navy-deep);
}
.hero-bg-wrap{ position:absolute; inset:-8% -4%; z-index:0; will-change:transform; }
.hero-bg{
  width:100%; height:100%; object-fit:cover; object-position:60% 30%;
  filter:saturate(1.05);
}
.hero-scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(15,20,28,.5) 0%, rgba(15,20,28,.4) 40%, rgba(13,18,26,.8) 100%),
    linear-gradient(90deg, rgba(15,20,28,.6) 0%, rgba(15,20,28,.15) 48%, rgba(15,20,28,.05) 100%);
}
.hero-content{
  position:relative; z-index:2;
  padding:0 clamp(20px,6vw,64px);
  max-width:1400px; margin:0 auto; width:100%;
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:"Oswald", sans-serif; font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.8);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  padding:9px 18px; border-radius:100px;
  margin-bottom:clamp(22px,3.5vh,32px);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transform:translateY(12px); transition:opacity .8s var(--ease-out) .1s, transform .8s var(--ease-out) .1s;
}
.hero.ready .hero-eyebrow{ opacity:1; transform:translateY(0); }
.hero-eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); }
.hero-headline{
  font-size:clamp(36px, 6.2vw, 80px);
  line-height:1.22;
  color:#fff;
  font-weight:400;
  max-width:17ch;
  margin-bottom:clamp(22px,3.5vh,32px);
}
/* overflow:hidden on .line is required for the slide-up reveal below, but
   it clips descenders (the tail on "g") unless the line box is a little
   taller than the glyphs themselves — hence the extra line-height above
   and a touch of negative margin here to cancel the added leading between
   lines without reintroducing the clip. */
.hero-headline .line{ display:block; overflow:hidden; margin-bottom:-0.11em; }
.hero-headline .line span{ display:block; transform:translateY(110%); transition:transform 1s var(--ease-out); padding-bottom:.1em; }
.hero.ready .hero-headline .line span{ transform:translateY(0); }
.hero-headline .line:nth-child(1) span{ transition-delay:.2s; }
.hero-headline .line:nth-child(2) span{ transition-delay:.32s; }

.hero-sub{
  font-size:clamp(15px,1.6vw,18px); line-height:1.6; color:rgba(255,255,255,.68); max-width:46ch;
  margin-bottom:clamp(32px,5vh,44px);
  opacity:0; transform:translateY(14px); transition:opacity .9s var(--ease-out) .42s, transform .9s var(--ease-out) .42s;
}
.hero.ready .hero-sub{ opacity:1; transform:translateY(0); }

.hero-ctas{
  display:flex; flex-wrap:wrap; gap:16px; margin-bottom:clamp(48px,8vh,86px);
  opacity:0; transform:translateY(14px); transition:opacity .9s var(--ease-out) .56s, transform .9s var(--ease-out) .56s;
}
.hero.ready .hero-ctas{ opacity:1; transform:translateY(0); }

.hero-logo-strip{
  display:flex; align-items:center; gap:16px;
  opacity:0; transition:opacity 1s var(--ease-out) .7s;
  padding-bottom:clamp(30px,5vh,46px);
}
.hero.ready .hero-logo-strip{ opacity:1; }
.hero-logo-strip img{ height:22px; width:auto; opacity:.85; }
.hero-logo-strip .div{ width:1px; height:18px; background:rgba(255,255,255,.25); }
.hero-logo-strip .tag{
  font-family:"Oswald", sans-serif; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.5);
}

.hero-scroll-cue{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  opacity:0; animation:cueIn 1s var(--ease-out) 1.3s forwards;
}
@keyframes cueIn{ to{ opacity:1; } }
.hero-scroll-cue .txt{
  font-family:"Oswald", sans-serif; font-size:10.5px; letter-spacing:.24em; color:rgba(255,255,255,.55);
  text-transform:uppercase;
}
.hero-scroll-cue .stem{ width:1px; height:34px; background:rgba(255,255,255,.35); position:relative; overflow:hidden; }
.hero-scroll-cue .stem::after{
  content:""; position:absolute; left:0; top:-100%; width:100%; height:100%; background:var(--gold);
  animation:cueDrop 1.8s ease-in-out infinite;
}
@keyframes cueDrop{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }

/* ---------- 7. OVERVIEW (01) ---------- */
.overview-copy{ margin-top:22px; }
.overview-copy p{ font-size:15.5px; line-height:1.75; color:var(--gray); }
.overview-copy p + p{ margin-top:1.1em; }
.stat-cards{
  display:grid; grid-template-columns:repeat(2,1fr); gap:14px;
}
.stat-card{
  background:#fff; border-radius:var(--r-md); padding:22px 22px;
  border:1px solid rgba(28,36,48,.06); box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.stat-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.stat-card .k{
  font-family:"Oswald", sans-serif; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold);
  margin-bottom:8px; display:block;
}
.stat-card .v{ font-family:"Oswald", sans-serif; font-size:clamp(20px,2.4vw,27px); color:var(--navy); font-weight:500; line-height:1.3; }
.stat-card .v small{ font-size:.55em; font-weight:400; color:var(--gray); display:block; margin-top:4px; letter-spacing:.02em; }
.stat-card-wide{ grid-column:1 / -1; }
.stat-card .v-bar{
  display:block; font-family:"Oswald", sans-serif; font-weight:700;
  font-size:clamp(15px,1.8vw,19px); color:var(--navy); letter-spacing:.01em; line-height:1.4;
}

/* ---------- 8. HOW WE WORK (02, dark) ---------- */
.work-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:16px;
}
.work-card{
  padding:clamp(26px,3.2vw,34px);
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.09); border-radius:var(--r-lg);
  transition:transform .35s var(--ease-out), background-color .35s, border-color .35s;
}
.work-card:hover{ transform:translateY(-4px); background:rgba(255,255,255,.075); border-color:rgba(255,255,255,.18); }
.work-card .idx{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%;
  background:rgba(193,154,73,.16); color:var(--gold-soft);
  font-family:"Oswald",sans-serif; font-size:12px; font-weight:600; margin-bottom:16px;
}
.work-card h3{ font-size:18px; color:#fff; margin-bottom:9px; font-weight:500; }
.work-card p{ font-size:14.5px; line-height:1.65; color:rgba(255,255,255,.6); }

/* ---------- 9. ORGANISATION (03) ---------- */
.org-wrap{ margin-top:6px; }
.org-tree{ display:flex; flex-direction:column; align-items:center; }
.org-box{
  font-family:"Oswald", sans-serif; text-align:center; padding:14px 22px; border-radius:var(--r-sm);
  font-size:13px; letter-spacing:.03em; position:relative; z-index:2;
}
.org-box .lbl{ display:block; font-size:10px; letter-spacing:.16em; text-transform:uppercase; opacity:.65; margin-bottom:4px; }
.org-box.filled{ background:var(--navy); color:#fff; box-shadow:0 12px 26px rgba(11,32,58,.2); }
.org-box.outline{
  background:#fff; border:1px solid rgba(37,48,65,.14); color:var(--navy);
  box-shadow:var(--shadow-sm);
}
.org-connector{ width:2px; background:rgba(37,48,65,.35); }
.org-connector.short{ height:22px; }
.section.on-dark .org-connector{ background:rgba(255,255,255,.3); }
.org-hbar{ height:2px; background:rgba(37,48,65,.35); }

/* Branching connectors: a fork (one stem splitting into N drops via a
   bar) used both downward — Project Managers into the 4 site roles —
   and, with its children in reverse HTML order, upward as a converge —
   the 4 supervisors funnelling into Foremen & Chargehands. .org-pass is
   the plain 1:1 case: each site role drops straight into its matching
   supervisor below, no bar needed since the columns already line up. */
.org-fork{ display:flex; flex-direction:column; align-items:center; width:100%; }
.org-fork-stem{ width:2px; height:16px; background:rgba(37,48,65,.35); }
.org-fork-hbar{ height:2px; width:100%; background:rgba(37,48,65,.35); }
.org-fork-drops{ display:grid; grid-template-columns:repeat(var(--cols,4),1fr); gap:10px; width:100%; }
.org-fork-drops span{ display:block; width:2px; height:16px; background:rgba(37,48,65,.35); justify-self:center; }
.org-pass{ display:grid; grid-template-columns:repeat(var(--cols,4),1fr); gap:10px; width:100%; }
.org-pass span{ display:block; width:2px; height:16px; background:rgba(37,48,65,.35); justify-self:center; }
.section.on-dark .org-fork-stem,
.section.on-dark .org-fork-hbar,
.section.on-dark .org-fork-drops span,
.section.on-dark .org-pass span{ background:rgba(255,255,255,.3); }

.org-columns{
  display:grid; grid-template-columns: 1.5fr 1fr; gap:clamp(24px,4vw,54px);
  width:100%; margin-top:26px; align-items:start;
}
.org-ops{ display:flex; flex-direction:column; align-items:center; gap:0; }
.org-site-row, .org-disc-row{
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px; width:100%; margin-top:4px;
}
.org-site-row .org-box, .org-disc-row .org-box{ padding:10px 8px; font-size:11px; }
.org-workforce{ margin-top:4px; width:100%; }

.corp-cards{
  display:flex; flex-direction:column; gap:12px;
  border-left:2px solid rgba(37,48,65,.35); padding-left:20px;
}
.section.on-dark .corp-cards{ border-left-color:rgba(255,255,255,.3); }
.corp-card{
  background:var(--navy); color:#fff; padding:18px 20px; border-radius:var(--r-md);
  box-shadow:0 12px 26px rgba(11,32,58,.14);
  transition:transform .3s var(--ease-out);
}
.corp-card:hover{ transform:translateY(-3px); }
.corp-card .lbl{ font-family:"Oswald",sans-serif; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:8px; display:block; }
.corp-card .items{ font-size:13px; line-height:1.7; color:rgba(255,255,255,.72); }

/* ---------- 10. SERVICES (04) ---------- */
.services-filter{
  display:inline-flex; gap:8px; margin-bottom:28px; padding:5px;
  background:var(--paper-dim); border-radius:100px;
}
.filter-btn{
  font-family:"Oswald", sans-serif; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:500;
  padding:9px 20px; border-radius:100px; background:transparent; border:none; color:var(--gray);
  transition:background-color .25s, color .25s;
}
.filter-btn:hover{ color:var(--navy); }
.filter-btn.active{ background:var(--navy); color:#fff; }
.services-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:16px;
}
.svc-card{
  background:#fff; border-radius:var(--r-lg); padding:24px 22px;
  border:1px solid rgba(28,36,48,.06); box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
  position:relative;
}
.svc-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.svc-card.is-hidden{ display:none; }
.svc-card .num{ font-family:"Oswald",sans-serif; font-size:11.5px; color:var(--gold); letter-spacing:.08em; margin-bottom:14px; display:block; font-weight:500; }
.svc-card .ico{
  width:42px; height:42px; border-radius:12px; background:rgba(37,48,65,.06);
  display:flex; align-items:center; justify-content:center; color:var(--navy); margin-bottom:16px;
}
.svc-card .ico svg{ width:20px; height:20px; }
.svc-card h4{ font-size:15.5px; color:var(--navy); font-weight:500; margin-bottom:8px; line-height:1.3; }
.svc-card p{ font-size:13.2px; line-height:1.58; color:var(--gray); }
.svc-card .cat-tag{
  display:inline-block; margin-top:14px; font-family:"Oswald",sans-serif; font-size:10px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--gray-soft);
}

/* ---------- 11. PORTFOLIO (05) — project carousel ---------- */
.pf-tag{ font-family:"Oswald",sans-serif; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; }
.pf-title{ font-size:clamp(21px,2.4vw,28px); color:var(--navy); margin-bottom:12px; font-weight:500; }
.pf-desc{ font-size:14.5px; line-height:1.65; color:var(--gray); margin-bottom:22px; }
.pf-meta{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding-top:18px; border-top:1px solid var(--line-light); }
.pf-meta div span{ display:block; }
.pf-meta .k{ font-family:"Oswald",sans-serif; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gray-soft); margin-bottom:5px; }
.pf-meta .v{ font-size:12.5px; color:var(--navy); line-height:1.4; }

.carousel-stage{
  position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-md);
  background:var(--paper-dim);
}
.carousel-track{ display:flex; transition:transform .5s var(--ease-out); will-change:transform; }
.carousel-project{ flex:0 0 100%; position:relative; aspect-ratio:16/9; }
.carousel-photos{ position:relative; width:100%; height:100%; }
.carousel-photo{
  position:absolute; inset:0; opacity:0; transition:opacity .4s var(--ease-out);
}
.carousel-photo.active{ opacity:1; }
.carousel-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Sub-gallery for a project with more than one photo: separate from the
   project-to-project prev/next arrows below, so cycling a project's own
   photos never looks like moving to a different project. */
.photo-thumbs{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  display:flex; gap:7px; padding:7px 9px; border-radius:100px; z-index:3;
  background:rgba(22,30,41,.5); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.photo-thumb{
  width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.45); border:none; padding:0;
  transition:background-color .2s, width .2s;
}
.photo-thumb.active{ background:#fff; width:16px; border-radius:3px; }
.carousel-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%;
  background:rgba(22,30,41,.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.3); color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:background-color .25s, transform .25s var(--ease-bounce);
  z-index:3;
}
.carousel-arrow svg{ width:18px; height:18px; }
.carousel-arrow:hover{ background:rgba(22,30,41,.82); transform:translateY(-50%) scale(1.06); }
.carousel-arrow.prev{ left:16px; }
.carousel-arrow.next{ right:16px; }
.carousel-info{ margin-top:28px; max-width:640px; min-height:150px; }
.carousel-caption{ display:none; }
.carousel-caption.active{ display:block; animation:captionIn .4s var(--ease-out); }
@keyframes captionIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
.carousel-caption .pf-meta{ grid-template-columns:repeat(2,1fr); }
.carousel-dots{ display:flex; gap:8px; margin-top:22px; }
.carousel-dot{
  width:8px; height:8px; border-radius:50%; background:rgba(28,36,48,.18); border:none; padding:0;
  transition:background-color .25s, width .25s;
}
.carousel-dot.active{ background:var(--gold); width:24px; border-radius:4px; }
@media (min-width:640px){
  .carousel-caption .pf-meta{ grid-template-columns:repeat(4,1fr); }
}

/* ---------- 12. GROUP (06, dark) ---------- */
.group-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:10px; }
.group-card{
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.09); border-radius:var(--r-lg);
  padding:clamp(24px,3vw,32px); position:relative;
  transition:transform .35s var(--ease-out), background-color .35s, border-color .35s;
}
.group-card:hover{ transform:translateY(-4px); background:rgba(255,255,255,.075); border-color:rgba(255,255,255,.18); }
.group-card .lbl{ font-family:"Oswald",sans-serif; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:10px; display:block; }
.group-card h3{ font-size:21px; color:#fff; margin-bottom:10px; font-weight:500; }
.group-card p{ font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.6); margin-bottom:16px; }
.group-card .site{
  font-family:"Oswald",sans-serif; font-size:12px; letter-spacing:.04em; color:var(--gold);
  display:inline-flex; align-items:center; gap:6px;
}
.group-card .site.disabled{ color:rgba(255,255,255,.35); cursor:default; }
.group-card .site svg{ width:12px; height:12px; transition:transform .25s var(--ease-bounce); }
.group-card .site:hover svg{ transform:translate(3px,-3px); }
.group-lede{ max-width:760px; }

/* ---------- 13. CONTACT (07, dark, full closing) ---------- */
/* A gold top border (matching the brand accent used elsewhere — the
   scroll-progress bar, active nav underline) gives Partners → Contact a
   clear, intentional-looking seam instead of one navy section bleeding
   straight into the next with no break, right where the photo starts. */
.contact-section{ background:var(--navy-deep); border-top:2px solid rgba(193,154,73,.4); }
.contact-inner{ padding-top:clamp(20px,4vh,40px); }
.contact-media{ display:none; }
@media (min-width:1150px){
  .contact-media{
    display:block; position:absolute; top:0; right:0; bottom:0; width:40%; z-index:1;
    overflow:hidden;
  }
  .contact-media img{ width:100%; height:100%; object-fit:cover; display:block; }
  /* Tint the photo navy so it reads as part of the dark backdrop rather
     than a raw, differently-coloured photo dropped on top of it.
     mix-blend-mode:color recolours the image toward --navy-deep while
     keeping its own light/dark tonal structure (so the rig is still
     legible), then the existing fade (now ::after) blends its edges
     into the text side and the top/bottom of the panel. */
  .contact-media::before{
    content:""; position:absolute; inset:0; z-index:1;
    background:var(--navy-deep); mix-blend-mode:color;
  }
  .contact-media::after{
    content:""; position:absolute; inset:0; z-index:2;
    background:linear-gradient(90deg, var(--navy-deep) 0%, rgba(22,30,41,.55) 22%, rgba(22,30,41,0) 55%),
               linear-gradient(0deg, var(--navy-deep) 0%, rgba(22,30,41,0) 30%);
  }
}
.contact-label{ font-family:"Oswald",sans-serif; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:26px; }
.contact-email{
  font-family:"Oswald", sans-serif; font-weight:400;
  font-size:clamp(30px, 7vw, 74px); color:#fff; line-height:1.05;
  display:inline-block; position:relative; margin-bottom:clamp(36px,6vh,56px);
  transition:color .3s;
}
.contact-email::after{
  content:""; position:absolute; left:0; bottom:.05em; width:100%; height:2px; background:var(--gold);
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease-out);
}
.contact-email:hover{ color:var(--gold-soft); }
.contact-email:hover::after{ transform:scaleX(1); }
.contact-cta-row{ display:flex; flex-wrap:wrap; gap:16px; margin-bottom:clamp(44px,7vh,64px); }
.contact-cols{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:780px;
  padding-top:26px; border-top:1px solid var(--line-dark); margin-bottom:clamp(60px,10vh,100px);
}
.contact-cols .k{ font-family:"Oswald",sans-serif; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:10px; display:block; }
.contact-cols .v{ font-size:15px; line-height:1.7; color:rgba(255,255,255,.8); }
/* Footer brand block: logo given real presence at 46px. The tagline uses
   Inter (not Oswald) at normal weight/tracking — Oswald's condensed
   letterforms read "bold"/chunky at this size even at font-weight:400,
   where Inter's more neutral strokes genuinely look light. No italic
   (no italic woff2 is loaded for either typeface, so it would render as
   a synthetic/faux oblique) — the font-family swap alone does the job. */
.contact-foot{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.contact-foot img{ height:46px; width:auto; max-width:none; align-self:flex-start; }
.contact-foot .tag{ font-family:"Oswald",sans-serif; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.contact-foot .strap{ font-size:14px; font-weight:400; color:rgba(255,255,255,.45); font-family:"Inter",sans-serif; letter-spacing:.01em; }
.site-footer-bar{
  margin-top:clamp(50px,8vh,80px); padding-top:22px; border-top:1px solid var(--line-dark);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-family:"Oswald",sans-serif; font-size:11px; letter-spacing:.08em; color:rgba(255,255,255,.35);
}

/* ---------- 14. Misc ---------- */
.count{ font-variant-numeric:tabular-nums; }

/* ---------- 15. Mobile ---------- */
@media (max-width: 900px){
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:min(78vw,340px); height:100vh;
    background:var(--navy-deep); flex-direction:column; align-items:flex-start; justify-content:center;
    gap:26px; padding:40px; transform:translateX(100%); transition:transform .45s var(--ease-out);
    z-index:205;
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-links a{ font-size:15px; }
  .nav-links a.nav-cta{ margin-top:10px; }
  .nav-toggle{ display:block; }

  .work-grid{ grid-template-columns:1fr; }
  .services-grid{ grid-template-columns:repeat(2,1fr); }
  .group-grid{ grid-template-columns:1fr; }
  .contact-cols{ grid-template-columns:1fr; }
  .org-columns{ grid-template-columns:1fr; }
  .org-site-row, .org-disc-row{ grid-template-columns:repeat(2,1fr); }
  .pf-meta{ grid-template-columns:repeat(2,1fr); }
  .hero-scroll-cue{ display:none; }
  .hero-logo-strip{ flex-wrap:wrap; }
}
@media (max-width: 560px){
  .stat-cards{ grid-template-columns:1fr; }
  .services-grid{ grid-template-columns:1fr; }
  .hero-ctas{ flex-direction:column; align-items:stretch; }
  .hero-ctas .btn{ justify-content:center; }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal, .reveal-scale, .reveal-line{ opacity:1 !important; transform:none !important; transition:none !important; }
  .hero-headline .line span{ transform:none !important; transition:none !important; }
  .hero-eyebrow, .hero-sub, .hero-ctas, .hero-logo-strip{ opacity:1 !important; transform:none !important; }
  .hero-bg-wrap{ transform:none !important; }
}