/* ============================================================
   ALSUWEIDI — Design System
   Light-first · Safiro headings · Calibri body
   #c81516 red · #000e26 navy · 60/30/10 per brand guidelines
   ============================================================ */

@font-face { font-family:"Safiro"; src:url("fonts/safiro-regular-webfont.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Safiro"; src:url("fonts/safiro-medium-webfont.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Safiro"; src:url("fonts/safiro-semibold-webfont.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face { font-family:"Safiro"; src:url("fonts/safiro-bold-webfont.woff2") format("woff2"); font-weight:700; font-display:swap; }

:root {
  --red:#c81516; --red-dark:#a01112; --navy:#000e26; --navy-2:#0a1a3a;
  --ink:#111722; --grey:#5e5e5e; --grey-lt:#8a919d; --line:#e6e9ee;
  --paper:#ffffff; --paper-2:#f6f7f9; --sky:#9bdbea;
  --head:"Safiro",ui-sans-serif,sans-serif;
  --body:Calibri,"Segoe UI",ui-sans-serif,sans-serif;
  --pad:clamp(20px,5vw,72px);
  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
/* html carries a split background so any overscroll shows white above / navy below the footer, never endless white */
html { scroll-behavior:smooth; background:linear-gradient(var(--paper) 50%, var(--navy) 50%); overscroll-behavior-y:none; }
body {
  font-family:var(--body); font-size:17px; line-height:1.65;
  background:var(--paper); color:var(--ink);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4,.h { font-family:var(--head); font-weight:500; line-height:1.08; letter-spacing:-.015em; }
a { text-decoration:none; color:inherit; }
img { display:block; max-width:100%; }
button { font-family:inherit; cursor:pointer; }
::selection { background:var(--red); color:#fff; }

/* ---------- utilities ---------- */
.wrap { max-width:1280px; margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
.eyebrow {
  font-family:var(--head); font-size:11px; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--red);
  display:flex; align-items:center; gap:12px; margin-bottom:20px;
}
.eyebrow::before { content:""; width:26px; height:2px; background:var(--red); }
.eyebrow.center { justify-content:center; }
.eyebrow.on-dark { color:#fff; opacity:.9; }
.sec-head { font-size:clamp(30px,4.2vw,54px); max-width:16em; }
.sec-sub { font-size:clamp(16px,1.6vw,19px); color:var(--grey); max-width:34em; margin-top:18px; }
.section { padding-top:clamp(72px,9vw,130px); padding-bottom:clamp(72px,9vw,130px); }

/* reveals */
[data-reveal] { opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease),transform .8s var(--ease); }
[data-reveal].in { opacity:1; transform:none; }
[data-reveal][data-d="1"] { transition-delay:.08s; } [data-reveal][data-d="2"] { transition-delay:.16s; }
[data-reveal][data-d="3"] { transition-delay:.24s; } [data-reveal][data-d="4"] { transition-delay:.32s; }

/* buttons */
.btn {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--head); font-size:12px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  padding:17px 32px; transition:all .25s var(--ease); border:none;
}
.btn .arr { transition:transform .25s var(--ease); }
.btn:hover .arr { transform:translateX(5px); }
.btn-red { background:var(--red); color:#fff; }
.btn-red:hover { background:var(--red-dark); }
.btn-ghost { border:1px solid rgba(255,255,255,.35); color:#fff; }
.btn-ghost:hover { border-color:#fff; background:rgba(255,255,255,.08); }
/* The outline button for a LIGHT ground. .btn-ghost is white on white here and
   disappears, which is what it did in the About page's careers band. Values
   from the design system's .asw-btn--dark. */
.btn-dark { border:1.5px solid var(--navy); color:var(--navy); background:transparent; }
.btn-dark:hover { background:var(--navy); color:#fff; }
.btn-dark { border:1.5px solid var(--ink); color:var(--ink); }
.btn-dark:hover { background:var(--ink); color:#fff; }
.link-arrow {
  font-family:var(--head); font-size:12px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink); display:inline-flex; align-items:center; gap:8px;
  transition:color .2s;
}
.link-arrow:hover { color:var(--red); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  transition:background .35s var(--ease),box-shadow .35s var(--ease),transform .4s var(--ease);
}
.nav-inner {
  max-width:1280px; margin:0 auto; padding:0 var(--pad);
  display:flex; align-items:center; justify-content:space-between; height:76px;
  transition:height .35s var(--ease);
}
.nav.scrolled { background:rgba(255,255,255,.92); backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--line); }
.nav.scrolled .nav-inner { height:62px; }
/* The logo PNGs are cropped to their ink bounds — no baked-in padding — so
   these heights are the artwork's real height. (Before the crop the files
   were 51% transparent margin and these numbers rendered half as much logo.) */
.nav-logo img { height:30px; width:auto; transition:height .35s var(--ease); }
.nav.scrolled .nav-logo img { height:25px; }
.nav-logo .logo-light { display:none; }
.nav-links { display:flex; align-items:center; gap:38px; }
.nav-links a {
  font-family:var(--head); font-size:12px; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink); position:relative; padding:4px 0;
}
.nav-links a::after {
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .28s var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after { transform:scaleX(1); }
.nav-links a.nav-cta {
  font-family:var(--head); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  background:var(--red); color:#fff; padding:14px 34px; transition:background .25s;
}
.nav-links a.nav-cta::after { display:none; }
.nav-links a.nav-cta:hover { background:var(--red-dark); }

/* About's sub-pages: People and How We Work drop down under it on desktop,
   and sit indented under it in the mobile menu (Sana, 24 Sep 2026). */
.nav-drop { position:relative; display:flex; align-items:center; }
.nav-sub { position:absolute; top:100%; left:-22px; padding-top:14px; display:none; }
.nav-sub::before { content:""; position:absolute; inset:14px 0 0; background:var(--paper); border:1px solid var(--line); }
.nav-drop:hover .nav-sub, .nav-drop:focus-within .nav-sub { display:block; }
.nav-sub a { position:relative; display:block; white-space:nowrap; padding:12px 22px !important; }
.nav-sub a:first-child { margin-top:8px; } .nav-sub a:last-child { margin-bottom:8px; }
.nav-links .nav-sub a, .nav.on-dark:not(.scrolled) .nav-links .nav-sub a { color:var(--ink); }
.nav-links .nav-sub a::after { left:22px; right:22px; width:auto; bottom:8px; }
.mobile-menu a.sub { font-size:clamp(20px,5vw,26px); padding:10px 0 10px 22px; color:rgba(255,255,255,.78); }

/* dark variant (over hero) */
.nav.on-dark:not(.scrolled) .nav-links a { color:#fff; }
.nav.on-dark:not(.scrolled) .nav-logo .logo-dark { display:none; }
.nav.on-dark:not(.scrolled) .nav-logo .logo-light { display:block; }
.nav.on-dark:not(.scrolled) .burger span { background:#fff; }

/* burger + mobile */
.burger { display:none; background:none; border:none; flex-direction:column; gap:5px; padding:6px; }
.burger span { width:24px; height:2px; background:var(--ink); transition:all .3s; }
.mobile-menu {
  position:fixed; inset:0; z-index:190; background:var(--navy);
  display:flex; flex-direction:column; justify-content:center; padding:0 var(--pad);
  opacity:0; pointer-events:none; transition:opacity .35s var(--ease);
}
.mobile-menu.open { opacity:1; pointer-events:auto; }
.mobile-menu a {
  font-family:var(--head); font-size:clamp(28px,7vw,40px); font-weight:500; color:#fff;
  padding:14px 0; border-bottom:1px solid rgba(255,255,255,.08);
  opacity:0; transform:translateY(16px); transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.mobile-menu.open a { opacity:1; transform:none; }
.mobile-menu a:nth-child(2){transition-delay:.05s} .mobile-menu a:nth-child(3){transition-delay:.1s}
.mobile-menu a:nth-child(4){transition-delay:.15s} .mobile-menu a:nth-child(5){transition-delay:.2s}
.mobile-menu a:nth-child(6){transition-delay:.25s} .mobile-menu a:nth-child(7){transition-delay:.3s} .mobile-menu a:nth-child(8){transition-delay:.35s}
.mobile-menu a span { color:var(--red); font-size:14px; vertical-align:super; margin-right:14px; }

/* ============================================================
   HERO (homepage)
   ============================================================ */
.hero { position:relative; min-height:100svh; display:flex; align-items:flex-end; background:var(--navy); overflow:hidden; }
.hero-media { position:absolute; inset:0; }
.hero-media img { width:100%; height:100%; object-fit:cover; opacity:.62; animation:heroZoom 16s var(--ease) both; }
.hero-media video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.62; }
@keyframes heroZoom { from { transform:scale(1.08); } to { transform:scale(1); } }
.hero-media::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(0,14,38,.94) 0%,rgba(0,14,38,.35) 45%,rgba(0,14,38,.25) 100%);
}
.hero-lines { position:absolute; right:-6%; top:-12%; width:56%; opacity:.5; pointer-events:none; }
.hero-content { position:relative; z-index:2; width:100%; padding-top:110px; padding-bottom:clamp(48px,7vh,90px); }
.hero h1 { font-size:clamp(44px,7.2vw,96px); color:#fff; max-width:11em; }
.hero h1 em { font-style:normal; color:var(--sky); }
.hero-sub { font-size:clamp(17px,1.8vw,21px); color:rgba(255,255,255,.75); max-width:31em; margin-top:26px; }
.hero-ctas { display:flex; gap:14px; margin-top:38px; flex-wrap:wrap; }
.hero-foot {
  position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center;
  margin-top:clamp(40px,6vh,70px); padding-top:26px; border-top:1px solid rgba(255,255,255,.18);
  font-family:var(--head); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.55);
}
.hero-foot .scroll-cue { display:flex; align-items:center; gap:10px; }
.hero-foot .scroll-cue i { display:block; width:1px; height:34px; background:rgba(255,255,255,.4); position:relative; overflow:hidden; }
.hero-foot .scroll-cue i::after { content:""; position:absolute; top:-34px; left:0; width:1px; height:34px; background:#fff; animation:cue 2s var(--ease) infinite; }
@keyframes cue { to { top:34px; } }

/* stagger-in hero text — long delays: the film opens alone */
.hero [data-stagger] { opacity:0; transform:translateY(30px); animation:heroUp 1s var(--ease) forwards; }
.hero [data-stagger="1"] { animation-delay:1.2s; }
.hero [data-stagger="2"] { animation-delay:1.6s; } .hero [data-stagger="3"] { animation-delay:2.2s; }
.hero [data-stagger="4"] { animation-delay:2.6s; }
@keyframes heroUp { to { opacity:1; transform:none; } }

/* light hero — white launch film */
.hero.light { background:#fff; }
.hero.light .hero-media img { display:none; }
.hero.light .hero-media video { opacity:1; object-fit:contain; object-position:center 12%; }
.hero.light .hero-media::after { background:linear-gradient(to top, rgba(255,255,255,.96) 0%, rgba(255,255,255,.55) 9%, rgba(255,255,255,0) 22%); }
.hero.light h1 { color:var(--navy); }
.hero.light h1 em { color:var(--red); }
.hero.light .eyebrow { color:var(--red) !important; }
.hero.light .link-arrow { color:var(--navy) !important; }
.hero.light .link-arrow:hover { color:var(--red) !important; }
.hero.light .hero-foot { border-top-color:rgba(0,14,38,.14); color:rgba(0,14,38,.45); }
.hero.light .hero-foot .scroll-cue i { background:rgba(0,14,38,.25); }
.hero.light .hero-foot .scroll-cue i::after { background:var(--navy); }

/* page hero (inner pages) */
.page-hero { background:var(--navy); position:relative; overflow:hidden; padding-top:clamp(140px,20vh,210px); padding-bottom:clamp(56px,8vw,96px); }
.page-hero h1 { font-size:clamp(40px,6vw,80px); color:#fff; max-width:12em; }
.page-hero .sec-sub { color:rgba(255,255,255,.7); }
.page-hero .pattern {
  position:absolute; right:0; top:0; bottom:0; width:56%;
  /* One exact repeat, not the whole sheet. The 3397x2481 pattern export does
     not meet its own edges, so tiling it drew a faint cut every 420px. The
     repeat is 973x281, measured off the sheet, and wraps with zero error.
     120.3px is 420 x 973/3397: the motif renders at the size it always did. */
  background-image:url("assets/pattern-connection-white-tile.png"); background-size:120.3px; opacity:.05; pointer-events:none;
  /* A straight two-stop ramp starts the pattern along a readable diagonal edge:
     the motif is regular, so a linear fade lets a whole row appear at once. The
     stops below are a smoothstep, flat at both ends, which is what makes the
     pattern arrive out of the navy instead of switching on. */
  --pattern-fade:linear-gradient(115deg,
    rgba(0,0,0,0) 2%, rgba(0,0,0,.028) 10%, rgba(0,0,0,.104) 17%, rgba(0,0,0,.216) 25%,
    rgba(0,0,0,.352) 32%, rgba(0,0,0,.5) 40%, rgba(0,0,0,.648) 48%, rgba(0,0,0,.784) 55%,
    rgba(0,0,0,.896) 63%, rgba(0,0,0,.972) 70%, rgba(0,0,0,1) 78%);
  -webkit-mask-image:var(--pattern-fade);
  mask-image:var(--pattern-fade);
}
.page-hero .photo { position:absolute; inset:0; }
.page-hero .photo img { width:100%; height:100%; object-fit:cover; }
.page-hero .photo::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,14,38,.96) 0%, rgba(0,14,38,.74) 55%, rgba(0,14,38,.6) 100%); }
.page-hero .wrap { position:relative; z-index:2; }

/* project detail — slim title bar; the photography leads right below it */
.pr-hero { position:relative; background:var(--navy); overflow:hidden; padding:clamp(130px,17vh,180px) 0 clamp(28px,4vw,46px); }
.pr-hero .wrap { position:relative; z-index:2; width:100%; }
.pr-hero .pr-cat { font-family:var(--head); font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:#fff; background:var(--red); display:inline-block; padding:8px 14px; margin-bottom:20px; }
.pr-hero h1 { font-size:clamp(34px,5.4vw,68px); color:#fff; max-width:14em; }
.pr-hero .pr-loc { font-size:16px; color:rgba(255,255,255,.65); margin-top:14px; }
.pr-body { display:grid; grid-template-columns:1.7fr 1fr; gap:clamp(36px,5vw,88px); align-items:start; }
.pr-narrative p { font-size:clamp(16px,1.7vw,18px); color:var(--grey); line-height:1.85; }
.pr-narrative p + p { margin-top:20px; }
/* The lede is often the whole description (no project has body paragraphs
   yet), so it reads as body text, not a second headline under the title. */
.pr-narrative h2 { font-family:var(--body); font-weight:400; font-size:clamp(16px,1.7vw,18px); line-height:1.85; letter-spacing:0; color:var(--ink); margin-bottom:20px; }
.pr-facts { border:1px solid var(--line); padding:clamp(24px,2.6vw,34px); position:sticky; top:96px; }
.pr-facts h3 { font-size:14px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--grey-lt); margin-bottom:18px; }
.pr-fact { display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-top:1px solid var(--line); font-size:14px; }
.pr-fact b { font-family:var(--head); font-weight:600; color:var(--navy); text-align:right; }
.pr-fact span { color:var(--grey-lt); white-space:nowrap; }
@media (max-width:860px) { .pr-body { grid-template-columns:1fr; } .pr-facts { position:static; } }

/* project showcase — photography first, everything fits one screen */
.pr-show { padding:clamp(12px,1.6vw,22px) 0 0; }
.pr-gallery { display:grid; gap:clamp(10px,1.4vw,20px); }
.pr-gallery .gi { overflow:hidden; background:var(--paper-2); }
.pr-gallery img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 1s var(--ease); }
.pr-gallery .gi:hover img { transform:scale(1.03); }
/* one landscape: full-width cinematic band, capped to viewport */
.pr-gallery.g1l { grid-template-columns:1fr; }
.pr-gallery.g1l .gi { height:min(66vh,620px); }
/* one portrait: image fully visible at viewport height, facts card beside it */
.pr-gallery.g1p { grid-template-columns:minmax(260px,460px) 1fr; }
.pr-gallery.g1p .gi { height:min(66vh,620px); }
.pr-gallery.g1p .g-side { background:var(--navy); height:min(66vh,620px); padding:clamp(24px,2.8vw,40px); display:flex; flex-direction:column; justify-content:flex-end; }
.pr-gallery .g-side h3 { font-size:clamp(20px,2.4vw,32px); font-weight:500; color:#fff; line-height:1.2; }
.pr-gallery .g-side p { font-size:14px; color:rgba(255,255,255,.6); margin-top:12px; }
/* two images: equal pair, one screen */
.pr-gallery.g2 { grid-template-columns:1fr 1fr; grid-auto-rows:min(58vh,540px); }
.pr-gallery.g2 .gi { height:100%; }
/* three images: lead left (spans two rows), two stacked right — total one screen */
.pr-gallery.g3 { grid-template-columns:1.35fr 1fr; grid-auto-rows:min(31vh,290px); }
.pr-gallery.g3 .gi:first-child { grid-row:span 2; }
.pr-gallery.g3 .gi { height:100%; }
@media (max-width:720px) {
  .pr-gallery.g1p, .pr-gallery.g2, .pr-gallery.g3 { grid-template-columns:1fr; grid-auto-rows:auto; }
  .pr-gallery.g3 .gi:first-child { grid-row:auto; }
  .pr-gallery .gi { height:auto !important; }
  .pr-gallery .gi.l { aspect-ratio:16/10; }
  .pr-gallery .gi.p { aspect-ratio:3/3.2; }
  .pr-gallery .g-side { height:auto; padding:22px; }
}

/* ============================================================
   QUIET MONUMENT — launch homepage
   ============================================================ */
.letter-sec { background:var(--navy); position:relative; overflow:hidden; }
.letter-sec .lines { position:absolute; right:-8%; bottom:-24%; width:54%; opacity:.3; pointer-events:none; }
.letter-wrap { position:relative; max-width:820px; margin:0 auto; }
.letter-line { font-size:clamp(30px,4.4vw,58px); color:#fff; letter-spacing:-.02em; margin-top:8px; }
.letter-line em { font-style:normal; color:var(--sky); }
.letter-body { margin-top:clamp(30px,3.6vw,48px); font-size:clamp(17px,1.7vw,19px); color:rgba(255,255,255,.72); line-height:1.85; }
.letter-body p + p { margin-top:22px; }
.letter-quote { border-left:3px solid var(--red); padding-left:22px; color:rgba(255,255,255,.9); font-family:var(--head); font-weight:500; font-size:clamp(18px,1.9vw,22px); line-height:1.5; margin-top:30px; }
.letter-sign { margin-top:clamp(26px,3vw,38px); font-family:var(--head); font-weight:600; font-size:18px; color:#fff; }
.letter-sign span { display:block; font-family:var(--body); font-weight:400; font-size:14px; color:rgba(255,255,255,.45); margin-top:6px; }

.mark-video { max-width:720px; margin:0 auto clamp(30px,3.5vw,46px); background:#fff; border:1px solid var(--line); }
.mark-video video { width:100%; display:block; }
.trusted-line { margin-top:clamp(28px,3vw,40px); font-family:var(--head); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--grey-lt); line-height:2.2; }
.trusted-line b { color:var(--navy); font-weight:600; }

.mark-sec { background:var(--paper-2); text-align:center; }
.mark-sec .sym { width:clamp(88px,9vw,132px); margin:0 auto clamp(28px,3vw,40px); }
.mark-sec .sym svg { width:100%; height:auto; display:block; }
.mark-sec h2 { font-size:clamp(28px,3.6vw,48px); color:var(--navy); letter-spacing:-.015em; }
.mark-sec p.mark-copy { max-width:620px; margin:22px auto 0; font-size:clamp(16px,1.6vw,18px); color:var(--grey); line-height:1.8; }

/* proof wall — selling, not reporting */
.proof { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(150px,auto); gap:10px; }
.p-tile { position:relative; overflow:hidden; padding:clamp(20px,2.2vw,30px); display:flex; flex-direction:column; justify-content:flex-end; min-height:150px; transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.p-tile:hover { transform:translateY(-5px); box-shadow:0 24px 48px -20px rgba(0,14,38,.28); }
.p-tile.big { grid-column:span 2; grid-row:span 2; }
.p-tile.tall { grid-row:span 2; }
.p-tile.wide { grid-column:span 2; }
.p-tile.on-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.p-tile.on-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,14,38,.88), rgba(0,14,38,.12) 60%); }
.p-tile.on-photo > div { position:relative; z-index:2; }
.p-tile.navy { background:var(--navy); }
.p-tile.red-t { background:var(--red); }
.p-tile.grey-t { background:var(--paper-2); }
.p-tile h3 { font-size:clamp(22px,2.6vw,38px); font-weight:600; letter-spacing:-.02em; line-height:1.06; color:#fff; }
.p-tile.grey-t h3 { color:var(--navy); }
.p-tile h3 em { font-style:normal; color:var(--sky); }
.p-tile.grey-t h3 em, .p-tile.on-photo h3 em { color:var(--red); }
.p-tile.on-photo h3 em { color:#fff; }
.p-tile p { font-size:13px; margin-top:8px; color:rgba(255,255,255,.65); line-height:1.55; }
.p-tile.grey-t p { color:var(--grey); }
.p-tile .chips { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.p-tile .chip-i { font-family:var(--head); font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:6px 11px; border:1px solid rgba(0,14,38,.18); color:var(--navy); }

/* trusted-by strip */
.clients-sec { background:var(--navy); padding:clamp(56px,7vw,92px) 0; overflow:hidden; }
.clients-sec h2 { font-size:clamp(26px,3.4vw,46px); color:#fff; letter-spacing:-.015em; max-width:18em; }
.clients-rows { margin-top:clamp(34px,4vw,54px); display:flex; flex-direction:column; gap:clamp(18px,2.4vw,30px); }
.clients-row { display:flex; overflow:hidden; overflow:clip; contain:paint; -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); }
.clients-track { display:flex; align-items:center; gap:clamp(52px,7vw,110px); padding-right:clamp(52px,7vw,110px); flex-shrink:0; animation:marq 34s linear infinite; }
.clients-row.rev .clients-track { animation-direction:reverse; }
.client-logo { font-family:var(--head); font-size:clamp(24px,3vw,42px); font-weight:600; letter-spacing:.04em; color:rgba(255,255,255,.34); white-space:nowrap; transition:color .3s; }
.client-logo:hover { color:#fff; }
/* logo strip: every mark rendered in the same single colour (white) */
.client-logo-img { height:clamp(38px,4.2vw,60px); width:auto; max-width:190px; object-fit:contain; filter:brightness(0) invert(1); opacity:.6; transition:opacity .3s; }
.client-logo-img:hover { opacity:1; }

.built-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,26px); }
.built-item { display:block; }
.built-item .bi-media { overflow:hidden; aspect-ratio:4/3; background:var(--navy-2); }
.built-item .bi-media img { width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.built-item:hover .bi-media img { transform:scale(1.05); }
.built-item .bi-cap { padding-top:15px; }
.built-item .bi-cap h3 { font-size:clamp(17px,1.7vw,21px); font-weight:500; }
.built-item .bi-cap p { font-size:13px; color:var(--grey-lt); margin-top:4px; }
@media (max-width:720px) {
  .built-grid { grid-template-columns:1fr; }
  .proof { grid-template-columns:1fr 1fr; }
}

/* ============================================================
   BRAND LAUNCH REVEAL
   ============================================================ */
.launch-sec { background:var(--navy); color:#fff; overflow:hidden; position:relative; }
.launch-sec .lines { position:absolute; right:-6%; top:-20%; width:50%; opacity:.35; pointer-events:none; }
.launch-body { position:relative; display:grid; grid-template-columns:1fr 1px 1fr; gap:clamp(36px,5vw,72px); align-items:start; padding-top:clamp(64px,7vw,96px); padding-bottom:clamp(64px,7vw,96px); }
.launch-divider { background:rgba(255,255,255,.16); align-self:stretch; }
.launch-sym { width:64px; margin-bottom:24px; }
.launch-sym svg { width:100%; height:auto; display:block; }
.launch-sec h2 { font-size:clamp(30px,3.6vw,50px); color:#fff; letter-spacing:-.015em; line-height:1.08; }
.launch-sec .lead { font-size:clamp(15px,1.6vw,18px); color:rgba(255,255,255,.72); line-height:1.75; max-width:32em; }
@media (max-width:860px) {
  .launch-body { grid-template-columns:1fr; }
  .launch-divider { display:none; }
}

/* ============================================================
   STATS BAND
   ============================================================ */
.stats-band { background:var(--paper); border-bottom:1px solid var(--line); }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.stat-cell { padding:clamp(36px,4.5vw,60px) 28px; border-left:1px solid var(--line); }
.stat-cell:first-child { border-left:none; padding-left:0; }
.stat-num { font-family:var(--head); font-size:clamp(40px,4.8vw,68px); font-weight:500; letter-spacing:-.025em; color:var(--navy); line-height:1; font-variant-numeric:tabular-nums; }
.stat-num sup { font-size:.5em; color:var(--red); font-weight:600; }
.stat-lbl { font-family:var(--head); font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--grey-lt); margin-top:14px; }

/* ============================================================
   CLIENT MARQUEE
   ============================================================ */
.marquee-sec { padding:44px 0; border-bottom:1px solid var(--line); overflow:hidden; }
.marquee-label { font-family:var(--head); font-size:10px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--grey-lt); text-align:center; margin-bottom:28px; }
.marquee { display:flex; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.marquee-track { display:flex; align-items:center; gap:clamp(48px,7vw,100px); padding-right:clamp(48px,7vw,100px); flex-shrink:0; animation:marq 36s linear infinite; }
.marquee:hover .marquee-track { animation-play-state:paused; }
@keyframes marq { to { transform:translateX(-100%); } }
.client-mark { font-family:var(--head); font-size:clamp(16px,1.8vw,21px); font-weight:600; letter-spacing:.06em; color:#b6bcc6; white-space:nowrap; transition:color .3s; }
.client-mark:hover { color:var(--navy); }

/* ============================================================
   FEATURED PROJECTS (sticky panels)
   ============================================================ */
.feature-sec { background:var(--navy); }
.feature-item { display:grid; grid-template-columns:1fr 1fr; min-height:86vh; }
.feature-media { position:relative; overflow:hidden; min-height:420px; }
.feature-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.feature-item:hover .feature-media img { transform:scale(1.05); }
.feature-media .num {
  position:absolute; top:28px; left:28px; z-index:2; font-family:var(--head);
  font-size:13px; font-weight:600; letter-spacing:.15em; color:#fff;
  background:rgba(0,14,38,.55); backdrop-filter:blur(6px); padding:8px 14px;
}
.feature-body { display:flex; flex-direction:column; justify-content:center; padding:clamp(40px,5vw,80px); }
.feature-body .tag { font-family:var(--head); font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--red); margin-bottom:18px; }
.feature-body h3 { font-size:clamp(26px,3vw,42px); color:#fff; }
.feature-body p { color:rgba(255,255,255,.62); margin-top:18px; max-width:30em; }
.feature-body .meta { display:flex; gap:28px; margin-top:30px; padding-top:24px; border-top:1px solid rgba(255,255,255,.14); flex-wrap:wrap; }
.feature-body .meta div { font-size:14px; color:rgba(255,255,255,.5); }
.feature-body .meta b { display:block; font-family:var(--head); font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.85); margin-bottom:2px; }
.feature-item:nth-child(even) .feature-media { order:2; }
.feature-item:nth-child(even) .feature-body { order:1; }

/* ============================================================
   NUMBERED SERVICES LIST
   ============================================================ */
.svc-row { display:block; border-top:1px solid var(--line); padding:clamp(26px,3.4vw,44px) 0; position:relative; transition:padding-left .35s var(--ease); }
.svc-rows { border-bottom:1px solid var(--line); }
.svc-row:hover { padding-left:18px; }
.svc-row .inner { display:grid; grid-template-columns:80px 1fr auto; align-items:baseline; gap:clamp(16px,3vw,40px); }
.svc-row .no { font-family:var(--head); font-size:14px; font-weight:600; color:var(--grey-lt); transition:color .3s; }
.svc-row:hover .no { color:var(--red); }
.svc-row h3 { font-size:clamp(24px,3.4vw,44px); font-weight:500; transition:color .3s; }
.svc-row:hover h3 { color:var(--red); }
.svc-row .go { font-size:22px; color:var(--grey-lt); transition:transform .35s var(--ease),color .3s; }
.svc-row:hover .go { transform:translate(6px,-6px); color:var(--red); }
.svc-row .desc { grid-column:2; max-width:44em; color:var(--grey); font-size:16px; margin-top:10px; }
.svc-row .tags { grid-column:2; display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.svc-tag { font-family:var(--head); font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--grey); border:1px solid var(--line); padding:6px 12px; }

/* ============================================================
   SECTOR BENTO GRID
   ============================================================ */
.bento { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:150px; gap:10px; }
.bento-cell { position:relative; overflow:hidden; background:var(--navy); display:flex; align-items:flex-end; padding:24px; }
.bento-cell.tall { grid-row:span 2; }
.bento-cell.wide { grid-column:span 2; grid-row:span 2; }
.bento-cell img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; transition:transform .9s var(--ease),opacity .5s; }
.bento-cell:hover img { transform:scale(1.07); opacity:.72; }
.bento-cell::after { content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(0,14,38,.85),transparent 60%); }
.bento-cell .cnt { position:relative; z-index:2; }
.bento-cell h3 { font-size:clamp(17px,1.6vw,23px); color:#fff; font-weight:500; }
.bento-cell p { font-size:13px; color:rgba(255,255,255,.6); margin-top:3px; }
.bento-cell.solid { background:var(--red); }
.bento-cell.solid::after { display:none; }
.bento-cell.solid .pat { position:absolute; inset:0; background-image:url("assets/pattern-connection-white-on-red-tile.png"); background-size:51.6px; opacity:.14; }

/* ============================================================
   PROJECT GRID + FILTERS
   ============================================================ */
.filters { display:flex; gap:8px; flex-wrap:wrap; margin:38px 0 42px; }
.filter-btn {
  font-family:var(--head); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  padding:11px 20px; border:1px solid var(--line); background:none; color:var(--grey);
  transition:all .25s var(--ease);
}
.filter-btn:hover { border-color:var(--ink); color:var(--ink); }
.filter-btn.active { background:var(--navy); border-color:var(--navy); color:#fff; }
.filter-select { display:none; }
.filter-select span { display:block; font-family:var(--head); font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--grey); margin-bottom:8px; }
.filter-select select {
  width:100%; min-height:48px; padding:0 44px 0 16px; border:1px solid var(--line); border-radius:0; background:#fff;
  font-family:var(--head); font-size:16px; color:var(--navy); appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000e26' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;
}
@media (max-width:720px) {
  .filters { margin:0 0 28px; }
  .filters .filter-btn { display:none; }
  .filter-select { display:block; width:100%; }
}
/* Projects search: one box above the sector filters, working with them. */
/* Sits in the sector row, sized and lettered like the buttons beside it. */
.proj-search { position:relative; flex:0 1 230px; margin-left:auto; }
.proj-search input {
  width:100%; height:100%; min-height:40px; padding:0 34px 0 38px; border:1px solid var(--line); border-radius:0; background:none;
  font-family:var(--head); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink);
  appearance:none; -webkit-appearance:none; transition:border-color .25s var(--ease);
}
.proj-search input::placeholder { color:var(--grey); opacity:1; }
.proj-search input:hover { border-color:var(--ink); }
.proj-search input:focus { outline:none; border-color:var(--navy); }
.proj-search input::-webkit-search-cancel-button { display:none; }
.proj-search .ico { position:absolute; left:16px; top:50%; transform:translateY(-50%); width:13px; height:13px; color:var(--grey); pointer-events:none; }
.proj-search .clear { position:absolute; right:2px; top:50%; transform:translateY(-50%); width:32px; height:32px; border:0; background:none; color:var(--grey); font-size:18px; line-height:1; cursor:pointer; }
.proj-search .clear:hover { color:var(--ink); }
.proj-search .clear[hidden] { display:none; }
.proj-empty { padding:48px 0; color:var(--grey); font-size:17px; }
.proj-empty[hidden] { display:none; }
.proj-empty button { border:0; background:none; padding:0; color:var(--red); font:inherit; text-decoration:underline; cursor:pointer; }
@media (max-width:720px) {
  .proj-search { flex:1 1 100%; margin:0 0 8px; order:-1; }
  .proj-search input { min-height:48px; font-size:16px; letter-spacing:.06em; } /* 16px stops iOS zooming on focus */
}
.proj-more { display:flex; justify-content:center; margin-top:clamp(32px,4vw,56px); }
.proj-more[hidden] { display:none; }
.btn-more {
  min-height:48px; padding:0 32px; border:1px solid var(--navy); background:none; color:var(--navy);
  font-family:var(--head); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; transition:all .25s var(--ease);
}
.btn-more:hover { background:var(--navy); color:#fff; }
.proj-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,26px); }
.proj-card { display:block; opacity:1; transition:opacity .4s var(--ease),transform .4s var(--ease); }
.proj-card.hide { display:none; }
.proj-thumb { position:relative; overflow:hidden; aspect-ratio:4/3.1; background:var(--navy-2); }
.proj-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.proj-card:hover .proj-thumb img { transform:scale(1.06); }
.proj-thumb .cat {
  position:absolute; top:16px; left:16px; z-index:2; font-family:var(--head); font-size:10px;
  font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#fff;
  background:rgba(0,14,38,.6); backdrop-filter:blur(6px); padding:7px 12px;
}
.proj-thumb .view {
  position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center;
  background:rgba(200,21,22,.86); opacity:0; transition:opacity .35s var(--ease);
  font-family:var(--head); font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#fff;
}
.proj-card:hover .proj-thumb .view { opacity:1; }
.proj-info { padding:18px 2px 0; }
.proj-info h3 { font-size:clamp(18px,1.8vw,22px); font-weight:500; }
.proj-info p { font-size:14px; color:var(--grey-lt); margin-top:5px; }

/* ============================================================
   BIG QUOTE
   ============================================================ */
.quote-sec { background:var(--paper-2); position:relative; overflow:hidden; }
.quote-sec blockquote { position:relative; font-family:var(--head); font-size:clamp(24px,3.4vw,44px); font-weight:500; line-height:1.25; color:var(--navy); max-width:20em; letter-spacing:-.01em; border-left:3px solid var(--red); padding-left:clamp(20px,2.6vw,36px); }
.quote-sec cite { position:relative; display:block; font-style:normal; font-family:var(--head); font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--grey-lt); margin-top:28px; padding-left:clamp(23px,2.9vw,39px); }

/* ============================================================
   NEWS CARDS
   ============================================================ */
.news-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,26px); }
.news-card { display:block; border:1px solid var(--line); padding:clamp(24px,2.6vw,36px); transition:all .3s var(--ease); position:relative; }
.news-card:hover { border-color:var(--navy); transform:translateY(-4px); box-shadow:0 18px 44px -18px rgba(0,14,38,.18); }
.news-card .cat { font-family:var(--head); font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--red); }
.news-card h3 { font-size:clamp(18px,1.7vw,22px); margin-top:14px; line-height:1.3; }
.news-card p { font-size:15px; color:var(--grey); margin-top:12px; }
.news-card .date { font-family:var(--head); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--grey-lt); margin-top:22px; display:block; }
.news-card.featured { background:var(--navy); border-color:var(--navy); }
.news-card.featured h3 { color:#fff; }
.news-card.featured p { color:rgba(255,255,255,.6); }

/* ============================================================
   TEAM
   ============================================================ */
.team-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2vw,24px); }
.team-card .photo { position:relative; aspect-ratio:3/3.6; background:var(--paper-2); overflow:hidden; display:flex; align-items:center; justify-content:center; }
.team-card .photo img.sym { width:56px; opacity:.14; filter:grayscale(1); transition:all .4s var(--ease); }
.team-card:hover .photo img.sym { opacity:.3; filter:none; transform:scale(1.1); }
.team-card h3 { font-size:19px; margin-top:16px; }
.team-card p { font-size:14px; color:var(--grey-lt); margin-top:3px; }

/* ============================================================
   TIMELINE (about)
   ============================================================ */
.miles { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-left:1px solid var(--line); }
.mile { padding:8px 28px 0; border-right:1px solid var(--line); }
.mile .yr { font-family:var(--head); font-size:clamp(30px,3.4vw,48px); font-weight:500; color:var(--red); line-height:1; }
.mile p { font-size:15px; color:var(--grey); margin-top:14px; }

/* value cards */
.values-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.value-card { background:var(--paper-2); padding:clamp(26px,2.8vw,40px); transition:background .3s var(--ease); }
.value-card:hover { background:#eef1f5; }
.value-card .no { font-family:var(--head); font-size:12px; font-weight:600; color:var(--red); }
.value-card h3 { font-size:clamp(18px,1.8vw,23px); margin-top:14px; }
.value-card p { font-size:15px; color:var(--grey); margin-top:10px; }

/* ============================================================
   CERT STRIP
   ============================================================ */
.certs { display:flex; flex-wrap:wrap; gap:10px; }
.cert {
  flex:1 1 160px; border:1px solid var(--line); padding:22px 24px; text-align:center;
  font-family:var(--head); transition:all .3s var(--ease);
}
.cert:hover { border-color:var(--red); }
.cert b { display:block; font-size:19px; font-weight:600; color:var(--navy); }
.cert span { display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--grey-lt); margin-top:5px; }

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta-banner { background:var(--navy); position:relative; overflow:hidden; }
.cta-banner .lines { position:absolute; right:-4%; bottom:-30%; width:52%; opacity:.4; pointer-events:none; }
.cta-banner h2 { font-size:clamp(32px,4.6vw,60px); color:#fff; max-width:14em; }
.cta-banner p { color:rgba(255,255,255,.6); margin-top:18px; max-width:30em; font-size:clamp(16px,1.6vw,19px); }

/* ============================================================
   AGAIN — the closer
   ============================================================ */
.again-sec { background:var(--navy); min-height:86vh; display:flex; align-items:center; position:relative; overflow:hidden; }
.again-sec .bigsym { position:absolute; right:-12%; top:50%; transform:translateY(-50%); width:min(58vw,680px); opacity:.05; pointer-events:none; }
.again-sec .bigsym svg { width:100%; height:auto; }
.again-kicker { font-family:var(--head); font-size:clamp(22px,3vw,40px); font-weight:500; color:rgba(255,255,255,.65); letter-spacing:-.01em; }
.again-word { font-family:var(--head); font-size:clamp(88px,17vw,240px); font-weight:600; line-height:.95; letter-spacing:-.04em; color:var(--red); display:block; margin-top:6px; }
.again-links { display:flex; gap:clamp(24px,4.5vw,56px); margin-top:clamp(40px,5.5vw,72px); flex-wrap:wrap; }
.again-links a { font-family:var(--head); font-size:clamp(14px,1.6vw,19px); font-weight:600; color:#fff; padding-bottom:9px; border-bottom:2px solid rgba(255,255,255,.22); transition:border-color .25s, transform .25s var(--ease); display:inline-flex; gap:8px; }
.again-links a:hover { border-color:var(--red); transform:translateY(-3px); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid { display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(40px,6vw,100px); }
.c-block { margin-bottom:34px; }
.c-block b { display:block; font-family:var(--head); font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--grey-lt); margin-bottom:8px; }
.c-block p, .c-block a { font-size:18px; color:var(--ink); }
.c-block a:hover { color:var(--red); }
.field { margin-bottom:22px; }
.field label { display:block; font-family:var(--head); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--grey); margin-bottom:9px; }
.field input, .field textarea, .field select {
  width:100%; font-family:var(--body); font-size:16px; color:var(--ink);
  background:var(--paper-2); border:1px solid var(--line); padding:15px 16px;
  transition:border-color .25s, background .25s; outline:none; resize:vertical;
}
.field input:focus, .field textarea:focus { border-color:var(--red); background:#fff; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.radio-set { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.radio-opt {
  display:flex; align-items:center; gap:10px; border:1px solid var(--line); padding:14px 16px;
  cursor:pointer; font-size:15px; transition:all .25s;
}
.radio-opt:hover { border-color:var(--grey); }
.radio-opt.selected { border-color:var(--red); background:rgba(200,21,22,.04); }
.radio-opt input { accent-color:var(--red); }
.form-status { display:none; font-size:15px; margin-top:16px; font-weight:600; }

/* ---- contact: the strip, the audience picker, the office card ----
   The form asks five questions and no more. Everything that used to be a
   field is either routed by the audience choice or is not needed to reply:
   an enquiry that cannot be answered from a name, an email, a phone number,
   one line of context and a message was never going to be answered from a
   longer form either. */
.c-strip { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--grey-bg,#f2f2f2); }
.c-strip .wrap { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.c-strip a {
  display:flex; flex-direction:column; gap:6px; padding:22px 0; color:var(--ink);
  border-right:1px solid var(--line); padding-right:26px;
}
.c-strip a:last-child { border-right:0; }
.c-strip a + a { padding-left:26px; }
.c-strip b {
  font-family:var(--head); font-size:11px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--grey);
}
.c-strip span { font-family:var(--head); font-size:21px; font-weight:600; }
.c-strip a:hover span { color:var(--red); }

.aud-set { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:10px; margin-bottom:34px; }
.aud-opt {
  display:flex; gap:12px; align-items:flex-start; text-align:left; padding:16px 18px;
  border:1px solid var(--line); background:#fff; cursor:pointer; font:inherit;
  transition:border-color .25s;
}
.aud-opt:hover { border-color:var(--grey); }
.aud-opt.on { border-color:var(--red); background:rgba(200,21,22,.04); }
.aud-dot {
  flex:0 0 auto; width:16px; height:16px; margin-top:3px; border-radius:50%;
  border:1px solid var(--line); background:#fff;
}
.aud-opt.on .aud-dot { border-color:var(--red); background:var(--red); box-shadow:inset 0 0 0 3px #fff; }
.aud-opt b { display:block; font-family:var(--head); font-size:15px; font-weight:600; }
.aud-opt em { display:block; font-style:normal; font-size:14px; color:var(--grey); margin-top:2px; }

.office-card { border:1px solid var(--line); }
.office-card iframe { display:block; width:100%; height:230px; border:0; filter:grayscale(.25); }
.office-card .body { padding:20px; border-top:1px solid var(--line); }

@media (max-width:760px){
  .c-strip .wrap { grid-template-columns:1fr; }
  .c-strip a { border-right:0; border-bottom:1px solid var(--line); padding-left:0 !important; }
  .c-strip a:last-child { border-bottom:0; }
}

/* ============================================================
   FOOTER — one band, one red rule.
   No page links (the nav is sticky, the site is six pages), no cert
   line (it lives on services + contact), no copyright row. The footer
   is a signature, not a section: logo left, one contact line right.
   ============================================================ */
.footer { background:var(--navy); color:#fff; }
.footer-band {
  display:flex; align-items:center; gap:clamp(20px,4vw,54px);
  padding-top:34px; padding-bottom:34px;
}
.footer-logo { flex:none; }
.footer-logo img { height:26px; display:block; }
.footer-line {
  display:flex; align-items:center; gap:26px;
  margin-left:auto; font-size:14px; color:rgba(255,255,255,.7);
}
.footer-line a, .footer-line span { color:rgba(255,255,255,.7); white-space:nowrap; }
.footer-line a { transition:color .2s; }
.footer-line a:hover { color:#fff; }
/* Items come in three pairs (.fg): place / inboxes / careers. On desktop
   the pairs dissolve (display:contents) into one flat line; on mobile each
   pair becomes its own row. Separators live in CSS, not markup.

   Every desktop separator must be the SAME kind of box, or the spacing goes
   uneven: a dot that is its own flex item picks up the 26px flex gap on both
   sides *plus* its own margin, while a dot rendered inside an item's box only
   picks up one gap. So on desktop every dot is an ::after inside an item —
   including each pair's last item, except the very last item on the line. */
.footer-line .fg { display:contents; }
.footer-line .fg:not(:last-child) > *::after,
.footer-line .fg:last-child > *:not(:last-child)::after {
  content:"·"; color:rgba(255,255,255,.25); margin-left:26px;
}
.footer-pattern { height:6px; background:var(--red); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1020px) {
  .nav-links { display:none; }
  .burger { display:flex; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .stat-cell { border-left:none; padding-left:0; }
  .stat-cell:nth-child(even) { border-left:1px solid var(--line); padding-left:28px; }
  .feature-item { grid-template-columns:1fr; min-height:0; }
  .feature-item:nth-child(even) .feature-media { order:0; }
  .feature-item:nth-child(even) .feature-body { order:1; }
  .proj-grid, .news-grid, .values-grid { grid-template-columns:1fr 1fr; }
  .bento { grid-template-columns:1fr 1fr; }
  .team-grid { grid-template-columns:1fr 1fr; }
  .miles { grid-template-columns:1fr 1fr; border-left:none; }
  .mile { padding:20px 20px 20px 0; border-right:none; border-top:1px solid var(--line); }
  .contact-grid { grid-template-columns:1fr; }
}
@media (max-width:860px) {
  [data-grid-collapse] { grid-template-columns:1fr !important; }
}
/* The footer is just logo + LinkedIn, so it stays one row at every width;
   narrower screens only get a smaller logo and tighter padding. */
@media (max-width:1100px) {
  .footer-band { padding-top:22px; padding-bottom:22px; }
  .footer-logo img { height:21px; }
}
@media (max-width:640px) {
  body { font-size:16px; }
  /* On a phone the band becomes a compact centred block: logo on top,
     then three rows (place / inboxes / careers) on a 3-column grid —
     left item right-aligned, dot in its own centre column, right item
     left-aligned — so the dots stack on one vertical axis. */
  .proj-grid, .news-grid, .values-grid, .radio-set, .field-row { grid-template-columns:1fr; }
  .bento { grid-template-columns:1fr 1fr; grid-auto-rows:130px; }
  .team-grid { grid-template-columns:1fr 1fr; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .svc-row .inner { grid-template-columns:44px 1fr auto; }
  .hero-foot { flex-direction:column; align-items:flex-start; gap:14px; }
}

/* ============================================================
   ABOUT PAGE, the spine
   ------------------------------------------------------------
   Imported from the "About - Spine" design, 21 Sep 2026. The page's
   organising idea is one red rule running from the opening copy to the
   careers band, with the timeline markers sitting ON it. Everything in the
   spine's column is inset to --spine-inset so the rule never crosses text.

   The rule is drawn by .ab-spine::before rather than a positioned element
   measured in JS: the design measured the first marker at runtime and
   painted the rule to match, which flickers on load and dies if the marker
   is not in the DOM yet. Here the marker column is a fixed width, so the
   rule's position is known in CSS and cannot drift.
   ============================================================ */
.ab-spine { position:relative; --spine-inset:130px; --spine-x:88px; }
/* .ab-rule is an empty full-height box that centres and caps ITSELF exactly
   the way .wrap does, so the rule it draws starts from the same left edge as
   the content in every section below. Deriving the position from the viewport
   instead was wrong by 67px at 1440: the wrap is both centred AND padded, and
   a viewport formula can only account for one of the two.
   --spine-x is the timeline's year column (80px) plus the marker's own offset
   and half its width (2 + 7), less half the rule, so it passes through the pips' centres.
   Change .ab-mile's first two columns and this has to change with them. */
.ab-rule {
  position:absolute; top:0; bottom:0; left:0; right:0;
  max-width:1280px; margin:0 auto; padding:0 var(--pad);
  pointer-events:none; z-index:1;
}
.ab-rule::before {
  content:""; position:absolute; top:0; bottom:0;
  left:calc(var(--pad) + var(--spine-x)); width:2px; background:var(--red);
}
.ab-inset { padding-left:var(--spine-inset); }

/* Opening: the lead paragraph beside the two supporting ones */
.ab-open { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px; align-items:start; }
.ab-open .lead { display:grid; gap:18px; font-family:var(--head); font-size:clamp(21px,2.1vw,26px); font-weight:500; line-height:1.4; letter-spacing:-.005em; color:var(--navy); }
.ab-open .rest { display:grid; gap:20px; color:var(--grey); }

/* The 2026 statement: navy half and light half, meeting mid-page. The split
   is the one moment the page raises its voice, so it is full-bleed and sits
   ABOVE the spine rule (z-index) rather than being crossed by it. */
.ab-split { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); min-height:150px; position:relative; z-index:2; }
.ab-split > div { display:flex; align-items:center; }
/* Geometry copied from the design and checked against it side by side: at
   1440 the navy text starts at x=234, which is the spine, on a 446px measure
   over four lines. Padding the halves instead put the text at the page
   gutter, 162px left of the rule.
   Each half holds a 640px box; the navy one is pushed right so its 154px of
   left padding lands the text on the spine, the light one stays left so its
   text starts 40px past the midline.

   The box is .box and NOT .in: site.js puts the class `in` on every
   [data-reveal] element as it scrolls into view, so a rule keyed on .in also
   hit the revealed <h2> inside, gave it the 154px padding a second time and
   cut the measure to 168px. It only misbehaved AFTER the reveal fired, which
   is what made it look intermittent. */
.ab-split .box { width:640px; max-width:100%; padding:40px; box-sizing:border-box; min-width:0; }
.ab-split h2 { font-size:clamp(24px,2.6vw,38px); line-height:1.1; }
.ab-split .a { background:var(--navy); color:#fff; justify-content:flex-end; }
.ab-split .a .box { padding-left:max(40px, min(154px, 16vw)); }
.ab-split .b { background:var(--paper-2); }
.ab-split .b .accent { color:var(--red); }

/* Timeline rows. Three columns: year, marker, text. The marker column's
   width plus half its dot is what --spine-x is derived from, so changing
   one means changing the other. */
.ab-mile { display:grid; grid-template-columns:80px 70px minmax(0,1fr); align-items:start; padding:34px 0; }
.ab-mile .yr { font-family:var(--head); font-size:20px; font-weight:500; line-height:1; text-align:right; padding-right:18px; color:var(--red); font-variant-numeric:tabular-nums; }
.ab-mile .pip { position:relative; height:22px; }
/* The row itself never fades: its marker sits ON the rule, and a marker at
   less than full opacity lets the red line show straight through its white
   fill, so the spine flickered through every pip as it scrolled in. The
   reveal moves to the year and the text instead, which sit clear of the
   rule and can fade safely. */
.ab-mile[data-reveal] { opacity:1; transform:none; }
.ab-mile[data-reveal] .yr,
.ab-mile[data-reveal] .txt {
  opacity:0; transform:translateY(28px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.ab-mile[data-reveal].in .yr,
.ab-mile[data-reveal].in .txt { opacity:1; transform:none; }
.ab-mile .pip i { position:absolute; left:2px; top:4px; width:14px; height:14px; background:var(--paper); border:2px solid var(--red); z-index:2; }
.ab-mile.now .pip i { background:var(--red); }
.ab-mile .txt { max-width:640px; }
.ab-mile h3 { font-size:clamp(21px,2.2vw,28px); line-height:1.15; margin-bottom:8px; }
.ab-mile p { color:var(--grey); }

/* Values: three entries under a heavy navy rule, not cards */
.ab-values { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; }
.ab-values > div { border-top:2px solid var(--navy); padding-top:18px; }
.ab-values h3 { font-size:clamp(21px,2.2vw,26px); margin-bottom:10px; }
.ab-values p { color:var(--grey); }

/* Leadership: portrait plate left, profile right, hairline between */
.ab-lead { display:grid; grid-template-columns:minmax(200px,280px) minmax(0,1fr); gap:48px; padding:40px 0; border-top:1px solid var(--line); }
.ab-lead:last-of-type { border-bottom:1px solid var(--line); }
.ab-lead .plate { aspect-ratio:4/5; background:var(--paper-2); overflow:hidden; display:flex; align-items:center; justify-content:center; }
.ab-lead .plate img { width:100%; height:100%; object-fit:cover; }
.ab-lead .plate img.sym { width:56px; height:auto; opacity:.14; filter:grayscale(1); object-fit:contain; }
.ab-lead .who { display:grid; gap:14px; align-content:start; max-width:680px; }
.ab-lead .role { font-family:var(--head); font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--red); }
.ab-lead h3 { font-size:clamp(23px,2.4vw,30px); line-height:1.1; }

/* Counters as four coloured tiles. This is the one place the page uses sky,
   and the only full-strength red block outside the CTA, so the row reads as
   a single deliberate moment rather than four decorations. */
/* The four tiles share their rows through subgrid, so the labels, the figures
   and the notes sit on the same lines across all four. Without it each tile
   packed its own content to its own bottom edge and "Construction Value
   Supervised", the only label that wraps to two lines, pushed its figure out
   of step with the other three.
   Row 1 is the flexible spacer that keeps the group bottom-weighted. */
.ab-tiles { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; grid-template-rows:1fr auto auto auto; }
.ab-tile { padding:clamp(20px,2.2vw,30px); min-height:150px; display:grid; grid-row:1 / span 4; grid-template-rows:subgrid; }
.ab-tile .lbl { grid-row:2; font-family:var(--head); font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; opacity:.75; padding-bottom:8px; }
.ab-tile .val { grid-row:3; font-family:var(--head); font-size:clamp(22px,2.4vw,32px); font-weight:500; line-height:1.1; letter-spacing:-.015em; font-variant-numeric:tabular-nums; }
.ab-tile .note { grid-row:4; font-size:14px; padding-top:10px; }
/* Grounds and text colours straight from the design system's .asw-tile:
   red and navy carry white, light grey and sky carry navy. */
.ab-tile.red { background:var(--red); color:#fff; }
.ab-tile.red .note { color:rgba(255,255,255,.85); }
.ab-tile.light { background:var(--paper-2); color:var(--navy); box-shadow:inset 0 0 0 1px var(--line); }
.ab-tile.light .note { color:var(--grey); }
.ab-tile.navy { background:var(--navy); color:#fff; }
.ab-tile.navy .note { color:rgba(255,255,255,.75); }
.ab-tile.sky { background:var(--sky); color:var(--navy); }
.ab-tile.sky .note { color:var(--grey); }
/* No subgrid: the tiles fall back to bottom-packed flex, which is what they
   were before. Labels of different heights go back out of step, and nothing
   else breaks. */
@supports not (grid-template-rows: subgrid) {
  .ab-tiles { grid-template-rows:none; }
  .ab-tile { display:flex; flex-direction:column; justify-content:flex-end; grid-row:auto; }
}

@media (max-width:1020px) {
  .ab-open { grid-template-columns:1fr; gap:28px; }
  .ab-values { grid-template-columns:1fr 1fr; gap:28px; }
  .ab-tiles { grid-template-columns:1fr 1fr; }
}
@media (max-width:860px) {
  /* Below this the rule costs more than it gives: the inset eats the
     measure, and the markers crowd the text. The timeline keeps its pips
     and drops the spine. */
  .ab-spine { --spine-inset:0px; }
  .ab-rule { display:none; }
  .ab-split { grid-template-columns:1fr; }
  .ab-lead { grid-template-columns:1fr; gap:22px; padding:28px 0; }
  .ab-lead .plate { aspect-ratio:4/3; max-width:320px; }
  .ab-mile { grid-template-columns:64px 40px minmax(0,1fr); padding:24px 0; }
}
@media (max-width:640px) {
  .ab-values { grid-template-columns:1fr; }
  .ab-tiles { grid-template-columns:1fr; }
  .ab-mile { grid-template-columns:56px 32px minmax(0,1fr); }
  .ab-mile .yr { font-size:17px; padding-right:12px; }
}

/* ---------- About, Spine v2 (24 Sep 2026) ----------
   From "About - Spine v2" in the design project: values as four full-bleed
   blocks, How we work as a navy band, a People block after the profiles, a
   heading on the counters, and on phones a swipe timeline and folding bios. */
.ab-vblocks { position:relative; z-index:2; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:1fr; }
/* The colour runs full bleed, the words keep to the 1280 column: the outer
   edge of each block lines up with the page's text, the inner edge sits a
   fixed gutter from the middle. Height is capped so wide screens do not get
   tall empty blocks (Sana, 24 Sep 2026). */
.ab-vblocks > div { padding:clamp(36px,4vw,56px) clamp(32px,4vw,64px); min-height:min(24vw,320px); display:grid; gap:14px; align-content:end; }
/* The four read as one flower around the centre point: the top row sits on
   the middle line, the bottom row hangs from it, and the left column's words
   sit against the middle rather than the screen edge (Sana, 24 Sep 2026). */
.ab-vblocks > div:nth-child(n+3) { align-content:start; }
/* The four gather round the centre: the left pair are right-aligned against
   the middle, the right pair start from it, every block the same distance
   from the centre line (Sana, 24 Sep 2026). */
.ab-vblocks { --vb-in:clamp(32px,4vw,64px); }
.ab-vblocks > div:nth-child(odd) { justify-content:end; padding-right:var(--vb-in); text-align:right; }
.ab-vblocks > div:nth-child(odd) p { margin-left:auto; }
.ab-vblocks > div:nth-child(even) { justify-content:start; padding-left:var(--vb-in); }
/* One text column for all four, as wide as the heading needs, placed the same
   way in every block, so the words start at the same point in each; the
   bottom row hangs from the middle line as the top row sits on it. */
.ab-vblocks > div { grid-template-columns:minmax(0,34rem); }
.ab-vblocks p { max-width:26rem; }
.ab-vblocks h2 { font-size:clamp(34px,3.8vw,60px); line-height:.95; letter-spacing:-.025em; }
.ab-vblocks h2 .accent { color:var(--red); }
.ab-vblocks h3 { font-size:clamp(34px,3.8vw,60px); line-height:.95; letter-spacing:-.025em; }
.ab-vblocks p { font-size:clamp(16px,1.2vw,18px); line-height:1.5; }
/* the pattern tile as supplied, on light grey, as on the Services band */
.ab-vblocks .w { background:var(--paper-2) url("assets/pattern-connection-white-tile.png") left center / auto clamp(56px,7vw,110px) repeat; }
.ab-vblocks .n { background:var(--navy); color:#fff; }
.ab-vblocks .n h3 { color:#fff; }
.ab-vblocks .n p { color:var(--sky); }
.ab-vblocks .r { background:var(--red); color:#fff; }
.ab-vblocks .r h3, .ab-vblocks .r p { color:#fff; }
.ab-vblocks .g { background:var(--paper-2); }
.ab-vblocks .g h3 { color:var(--navy); }
.ab-vblocks .g p { color:var(--grey); }
.ab-hwwband { position:relative; z-index:2; }
.ab-hwwgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:clamp(28px,4vw,72px); align-items:end; }
.ab-hwwgrid h2 { font-size:clamp(32px,3.8vw,60px); line-height:1; letter-spacing:-.02em; color:#fff; max-width:14ch; }
.ab-hwwgrid > div { display:grid; gap:24px; justify-items:start; }
.ab-hwwgrid p { font-size:18px; line-height:1.55; color:var(--sky); max-width:30rem; }
.ab-people { padding-top:clamp(48px,6vw,80px); display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:clamp(28px,4vw,64px); align-items:center; }
.ab-people > div { display:grid; gap:20px; justify-items:start; }
.ab-people p { font-size:18px; color:var(--grey); max-width:28rem; }
.ab-people .ph { display:block; aspect-ratio:16/9; overflow:hidden; background:var(--paper-2); }
.ab-people .ph img { width:100%; height:100%; object-fit:cover; display:block; }
.ab-numhead { margin-bottom:clamp(28px,3vw,40px); }
/* Counters read at a glance: a much bigger figure, a clearer label and note.
   Sized to the row of cards (container units on .ab-tiles, not on each tile:
   containment on a tile would break the subgrid that lines them up) (Sana, 24 Sep 2026). */
.ab-tiles { container-type:inline-size; }
.ab-tile .val { font-size:clamp(28px,4cqi,72px); font-weight:600; line-height:1; white-space:nowrap; letter-spacing:-.02em; }
@media (max-width:1020px) { .ab-tile .val { font-size:clamp(28px,8cqi,72px); } }
/* units ride small beside the figure, so the number itself can be big */
.ab-tile .val small { font-size:.42em; font-weight:500; letter-spacing:0; margin:0 .18em; line-height:0; }
.ab-tile .val small:first-child { margin-left:0; }
.ab-tile .lbl { font-size:clamp(11px,1.3cqi,14px); }
@media (max-width:1020px) { .ab-tile .lbl { font-size:clamp(12px,2.6cqi,14px); } }
.ab-tile .note { font-size:clamp(13px,1.6cqi,17px); }
@media (max-width:1020px) { .ab-tile .note { font-size:clamp(13px,3.2cqi,17px); } }
.ab-lead h3 { font-size:clamp(24px,2.2vw,30px); }
.ab-strip, .ab-lead .more { display:none; }
@media (max-width:860px) {
  .ab-open .lead { font-size:clamp(20px,2vw,26px); }
  .ab-split { grid-template-columns:minmax(0,1fr); }
  .ab-split .box, .ab-split .a .box { padding:28px var(--pad); }
  .ab-split h2 { font-size:clamp(22px,2.6vw,38px); }
  .ab-mile { display:none; }
  .ab-strip { display:grid; gap:20px; min-width:0; }
  .ab-strip .hd { display:flex; justify-content:space-between; align-items:baseline; }
  .ab-strip .hd h2 { font-size:28px; line-height:1.05; }
  .ab-strip .hd span { font-family:var(--head); font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--grey); }
  .ab-strip .sc { position:relative; min-width:0; margin:0 calc(-1 * var(--pad)); overflow:hidden; }
  .ab-strip .ln { position:absolute; left:0; right:0; top:37px; height:2px; background:var(--red); }
  .ab-strip .tr { position:relative; display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-left:var(--pad); padding:0 var(--pad) 12px; scrollbar-width:none; }
  .ab-strip .tr::-webkit-scrollbar { display:none; }
  .ab-strip article { flex:0 0 min(78vw,300px); scroll-snap-align:start; display:grid; grid-template-rows:24px 28px auto; padding-right:12px; box-sizing:border-box; }
  .ab-strip .y { font-family:var(--head); font-size:20px; line-height:24px; color:var(--red); }
  .ab-strip .sq { width:14px; height:14px; background:var(--red); align-self:center; position:relative; }
  .ab-strip .c { margin-top:12px; padding:24px 22px 28px; background:var(--paper-2); min-height:220px; display:grid; gap:10px; align-content:start; }
  .ab-strip h3 { font-size:22px; line-height:1.15; }
  .ab-strip p { font-size:16px; line-height:1.5; color:var(--grey); }
  .ab-vblocks { grid-template-columns:1fr; }
  /* Narrow screens: the heading holds on the left while the three values
     scroll past on the right, one screen-height block each (Sana, 24 Sep). */
  .ab-vblocks { grid-template-columns:minmax(0,2fr) minmax(0,3fr); grid-auto-rows:auto; }
  .ab-vblocks > div:nth-child(n) { min-height:0; padding:clamp(28px,6vw,48px) clamp(18px,4vw,36px); justify-content:start; grid-template-columns:minmax(0,1fr); }
  .ab-vblocks > div:nth-child(n) { text-align:left; }
  .ab-vblocks > div:nth-child(n) p { margin-left:0; }
  .ab-vblocks > div.w { grid-column:1; grid-row:1 / span 3; align-content:stretch; }
  .ab-vblocks .w h2 { position:sticky; top:calc(50vh - 1.2em); align-self:start; font-size:clamp(24px,5.2vw,40px); }
  .ab-vblocks > div.n, .ab-vblocks > div.r, .ab-vblocks > div.g { grid-column:2; min-height:min(34vh,280px); align-content:center; }
  .ab-vblocks .n { grid-row:1; } .ab-vblocks .r { grid-row:2; } .ab-vblocks .g { grid-row:3; }
  .ab-vblocks h3 { font-size:clamp(28px,6vw,44px); }
  /* Leadership as a list: small portrait beside the role and name, the bio
     folding open under them (Sana, 24 Sep 2026). */
  .ab-lead { grid-template-columns:clamp(80px,18vw,120px) minmax(0,1fr); gap:clamp(16px,4vw,28px); padding:22px 0; align-items:start; }
  .ab-lead .plate { aspect-ratio:4/5; max-width:none; width:100%; }
  .ab-lead .plate img { object-position:center top; }
  .ab-lead .who { gap:8px; }
  .ab-lead h3 { font-size:clamp(19px,4.6vw,24px); }
  .ab-lead .role { font-size:12px; }
  .ab-lead .fold > div { padding-top:6px; }
  .ab-lead .fold { display:grid; grid-template-rows:0fr; overflow:hidden; transition:grid-template-rows .3s; }
  .ab-lead .fold > div { min-height:0; overflow:hidden; display:grid; gap:14px; }
  .ab-lead .open .fold { grid-template-rows:1fr; }
  .ab-lead .more { display:inline-block; justify-self:start; background:none; border:0; border-bottom:1px solid var(--red); padding:0 0 2px; cursor:pointer; font-family:var(--head); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--red); }
}
/* 2x2 counters: two sets of the four subgrid rows, the second pair of tiles
   in the second set, so label, figure and note line up across each row of
   cards as they do across the four on desktop. */
@media (max-width:1020px) {
  .ab-tiles { grid-template-rows:repeat(2, 1fr auto auto auto); }
  .ab-tile:nth-child(n+3) { grid-row:5 / span 4; }
}
/* a label that fits on one line sits on the same line as a two-line one's
   last line, so the figures below start level */
.ab-tile .lbl { align-self:end; }
@media (max-width:640px) { .ab-tiles { grid-template-columns:1fr 1fr; } }

/* ============================================================
   HOMEPAGE — Graphic First (nine bands, 22 Sep 2026)
   Implements "Homepage - Graphic First" from the design project.
   Band order: hero · launch · intro · disciplines · work ·
   capability · future ready · clients · standards · close
   ============================================================ */

/* ---------- Band 1 — hero: the logo reveal ----------
   The composition is the design projects 1920x1080 stage, scaled to cover the
   hero. Position, size, opacity and clip are written per frame by site.js, so
   the values here are only the settled state: what a visitor sees with
   JavaScript off, and what the reduced-motion path holds. */
.gf-hero { position:relative; min-height:100svh; overflow:hidden; background:var(--paper); }
.rv { position:absolute; inset:0; }
.rv-stage {
  position:absolute; left:50%; top:50%; width:1920px; height:1080px;
  transform:translate(-50%,-50%) scale(var(--rv-scale,1)); transform-origin:50% 50%;
}
.rv-sym { position:absolute; left:559px; top:420px; }
.rv-sym svg { display:block; width:208px; height:240px; }
.rv-word { position:absolute; left:663px; top:637px; width:624px; height:85px; transform:translateX(-50%); display:block; }
.rv-slogan {
  position:absolute; left:1095px; top:540px; transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:flex-start; margin:0;
  font-family:var(--head); font-size:60px; line-height:1.15; white-space:nowrap;
}
.rv-slogan .a { font-weight:600; letter-spacing:-.02em; color:var(--navy); }
.rv-slogan .b { font-weight:400; letter-spacing:0; color:var(--grey); }

/* The links sit on the floor of the hero, over the stage. */
.gf-foot {
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:flex-end;
  gap:24px 48px; padding-bottom:clamp(40px,6vh,64px);
}
.gf-links { display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.gf-links .link-arrow { white-space:nowrap; }

@media (max-width:860px) {
  .gf-foot { justify-content:flex-start; }
  .gf-links { align-items:flex-start; }
}

/* Band 2 — brand launch. Temporary: delete the <section class="gf-launch"> block. */
.gf-launch { background:var(--red); color:#fff; }
.gf-launch .wrap {
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;
  gap:20px 48px; padding-top:28px; padding-bottom:28px;
}
.gf-launch .t { display:flex; flex-direction:column; gap:8px; min-width:0; flex:1 1 480px; }
.gf-launch h2 { font-size:clamp(22px,2.2vw,30px); line-height:1.15; text-wrap:balance; color:#fff; }
.gf-launch p { font-size:16px; }
.gf-launch .gf-launch-cta {
  flex:none; display:inline-flex; align-items:center; gap:12px;
  background:#fff; color:var(--red); font-family:var(--head); font-size:15px;
  letter-spacing:.04em; padding:14px 22px; transition:background .25s var(--ease),color .25s var(--ease);
}
.gf-launch .gf-launch-cta:hover { background:var(--navy); color:#fff; }

/* Band 3 — the three-paragraph statement of what the firm is. */
.gf-intro { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:40px; align-items:start; }
.gf-intro .lead { font-family:var(--head); font-size:clamp(22px,2.2vw,30px); line-height:1.3; }
.gf-intro p:not(.lead) { color:var(--grey); }

/* Band 4 — disciplines, on navy. Sky rule over each column. */
.gf-navy { background:var(--navy); color:#fff; }
.gf-navy .sec-head { color:#fff; }
.gf-navy .sec-sub { color:rgba(255,255,255,.7); }
.gf-disc { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:40px; margin-top:clamp(34px,4vw,56px); }
.gf-disc > div { border-top:2px solid var(--sky); padding-top:18px; }
.gf-disc h3 { font-size:22px; margin-bottom:10px; }
.gf-disc p { opacity:.78; }
.gf-close-row {
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end;
  gap:20px 48px; padding-top:48px;
}
.gf-close-row p { margin:0; max-width:720px; }
.link-arrow.on-dark { color:#fff; }
.link-arrow.on-dark:hover { color:var(--sky); }

/* ---------- Band 5 — the selected-work mosaic ----------
   From the updated Graphic First design: six photographs in a 2fr/1fr grid,
   two of them double-height, each carrying its name and sector on a gradient.
   Slots are explicit rather than auto-flowed, because the arrangement is the
   design's and auto-placement around two row-spans is not dependable.
   The narrow double-height slot (s4) is for a portrait photograph: Al Jazeera
   Tower's hero is 1:2.4, which no other slot suits. */
.gf-work-head {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:24px 64px; align-items:end; padding-bottom:48px;
}
.gf-work-head h2 { font-size:clamp(30px,3.4vw,48px); line-height:1.05; }
.gf-work-head p { color:var(--grey); }

.gf-mos { display:grid; grid-template-columns:2fr 1fr; grid-auto-rows:minmax(260px,auto); gap:10px; }
.gf-mos a {
  position:relative; display:flex; align-items:flex-end; padding:24px;
  overflow:hidden; color:#fff; background:var(--navy-2);
  transition:opacity .3s var(--ease);
}
.gf-mos a:hover { opacity:.92; }
.gf-mos img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.gf-mos a:hover img { transform:scale(1.04); }
.gf-mos a::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,14,38,0) 50%, rgba(0,14,38,.65) 100%);
}
.gf-mos .cap { position:relative; z-index:1; }
.gf-mos .cap b { display:block; font-family:var(--head); font-weight:500; font-size:22px; line-height:1.1; }
.gf-mos .cap span { display:block; margin-top:6px; font-size:14px; opacity:.85; }
.gf-mos a.big { padding:32px; }
.gf-mos a.big .cap b { font-size:clamp(24px,2.4vw,34px); }
.gf-mos a.s1 { grid-column:1; grid-row:1 / span 2; }
.gf-mos a.s2 { grid-column:2; grid-row:1; }
.gf-mos a.s3 { grid-column:2; grid-row:2; }
.gf-mos a.s4 { grid-column:2; grid-row:3 / span 2; }
.gf-mos a.s5 { grid-column:1; grid-row:3; }
.gf-mos a.s6 { grid-column:1; grid-row:4; }
/* The slot rules carry a class, so the stacking override has to match their
   specificity or it loses whatever the source order is. Naming all six also
   clears the explicit grid-column:2, which otherwise conjures a second implicit
   column out of a one-column grid. */
@media (max-width:760px) {
  .gf-mos { grid-template-columns:1fr; }
  .gf-mos a.s1, .gf-mos a.s2, .gf-mos a.s3,
  .gf-mos a.s4, .gf-mos a.s5, .gf-mos a.s6 {
    grid-column:1; grid-row:auto; min-height:260px;
  }
  .gf-mos a.big { padding:24px; }
}

/* Band 5, earlier treatment — the selected-work cards. Meta, title, then the image.
   Kept because projects.html and any future card grid still use it. */
.gf-cards { align-items:stretch; }
.gf-card {
  display:flex; flex-direction:column; background:var(--paper);
  border:1px solid rgba(94,94,94,.2); padding:clamp(24px,2.6vw,34px);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
a.gf-card:hover { transform:translateY(-4px); border-color:var(--navy); box-shadow:0 18px 44px -18px rgba(0,14,38,.18); }
.gf-card .m {
  font-family:var(--head); font-size:11px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--grey); margin-bottom:12px;
}
/* Two lines of title always, so a one-line name does not sit alone. */
.gf-card h3 { font-size:clamp(19px,1.7vw,23px); line-height:1.16; min-height:2.32em; margin-bottom:clamp(20px,2vw,26px); }
/* The image is anchored to the bottom of the card, not pushed down by the text
   above it. Cards in a row are the same height, so the images line up however
   many lines the eyebrow and the title take. */
.gf-card .med, .gf-card .ph { margin-top:auto; overflow:hidden; }
.gf-card .med { aspect-ratio:4/3; }
.gf-card .med img { width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
a.gf-card:hover .med img { transform:scale(1.05); }
.gf-card .ph { aspect-ratio:4/3; background:var(--paper-2); }

/* Band 6 — what we bring. Four stacked notes, then the three values. */
.gf-bring { display:grid; grid-template-columns:repeat(2,1fr); gap:40px 48px; }
.gf-bring h3 { font-size:22px; margin-bottom:10px; }
.gf-bring p { color:var(--grey); }
.gf-values { background:var(--red); padding:40px 0; }
.gf-values .wrap { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 48px; }
.gf-values span { font-family:var(--head); font-size:clamp(28px,3.2vw,44px); line-height:1; letter-spacing:-.015em; color:#fff; }
@media (max-width:640px) { .gf-values .wrap { display:block; }
  .gf-values span { display:block; } .gf-bring { grid-template-columns:1fr; } }

/* Band 7 — future ready. Prose left, sky panel right. */
.gf-fr { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:40px 64px; align-items:start; }
.gf-fr .prose { display:grid; gap:18px; }
.gf-fr .prose p:first-child { font-size:19px; }
.gf-fr .panel { display:grid; gap:24px; background:var(--sky); padding:40px; align-content:end; }
.gf-fr .panel p { font-family:var(--head); font-size:clamp(24px,2.6vw,36px); line-height:1.15; }
.gf-fr .panel .em { color:var(--red); }

/* Band 9 — standards. Three navy plates. */
.gf-iso { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:24px; }
.gf-iso > div { background:var(--navy); color:#fff; padding:22px 24px; }
.gf-iso .n { font-family:var(--head); font-size:24px; }
.gf-iso .l { opacity:.75; margin-top:6px; }

/* Band 10 — close. Mark, headline, links, one button. */
.gf-end { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:40px 64px; align-items:end; }
.gf-end .l { display:grid; gap:24px; }
.gf-end-mark { width:56px; height:56px; }
.gf-end h2 { font-size:clamp(36px,4.4vw,64px); line-height:.98; color:#fff; }
.gf-end h2 em { font-style:normal; font-weight:400; opacity:.6; }
.gf-end .r { display:grid; gap:28px; }
.gf-end .r p { font-size:19px; line-height:1.5; }
.gf-end .acts { display:flex; flex-wrap:wrap; align-items:center; gap:14px 32px; }

@media (max-width:760px) {
  .gf-foot { align-items:flex-start; }
  .gf-links { align-items:flex-start; }
  .gf-fr .panel { padding:28px; }
}

/* Band 8 — clients, on light ground. The marquee, re-inked for a light band. */
.gf-clients { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px 48px; color:var(--grey); }
.gf-strip { margin-top:48px; }
/* Two fixed rows in an agreed order, in the marks' own colours. Nothing moves:
   a client list is read, not watched. */
.clients-grid { display:flex; flex-direction:column; gap:clamp(24px,3.4vw,44px); }
/* Seven fixed columns, so it is two rows at every desktop width. Left to wrap,
   the second row drops a logo onto a third line around 1000px. */
.clients-line { display:grid; grid-template-columns:repeat(7,1fr); align-items:center; gap:clamp(16px,2.6vw,40px); }
/* One height cap for all of them reads wrong, because a portrait mark like ADNOC
   ends up a third the visual mass of a long one like Etihad Rail. --s is an
   optical correction per logo, set on the tag; width still caps at the cell. */
.gf-strip .client-logo-img { --s:1; height:auto; width:auto; max-height:calc(clamp(24px,2.9vw,44px) * var(--s)); max-width:100%; justify-self:center; filter:none; opacity:1; }
/* Below desktop the vw term in the clamp collapses to its floor, which leaves the
   portrait marks tiny, so the cap is set outright. */
@media (max-width:860px){
  .clients-line { grid-template-columns:repeat(4,1fr); gap:24px 18px; }
  .gf-strip .client-logo-img { max-height:calc(34px * var(--s)); }
}
@media (max-width:520px){
  .clients-line { grid-template-columns:repeat(3,1fr); gap:20px 14px; }
  .gf-strip .client-logo-img { max-height:calc(30px * var(--s)); }
}

/* ---------- How We Work ------------------------------------------------- */
/* Imported from the "Alsuweidi About page design" project, How We Work v2.
   The design's own tokens map onto this sheet's: --asw-red/navy/grey/sky are
   the same inks, --asw-display/body the same faces, --asw-section the same
   padding. Only the two gap steps had no equivalent here. */
.hww { --gap-split:clamp(36px,5vw,88px); --gap-card:clamp(14px,2vw,26px); }
.hww-hero, .hww-body, .hww-close { --gap-split:clamp(36px,5vw,88px); --gap-card:clamp(14px,2vw,26px); }

/* Sized so line 1 almost fills the measure and lines 2 and 3, which carry the
   stagger indents, are pushed into a second line. That wrap is the shape of the
   hero, not an accident of it. */
.hww-h1 { margin:0; display:grid; font-weight:700; line-height:.94; letter-spacing:-.02em; font-size:clamp(44px,9vw,124px); }
.hww-h1 .i1 { padding-left:clamp(24px,8vw,140px); }
.hww-h1 .i2 { padding-left:clamp(48px,16vw,280px); color:var(--red); }
.hww-h1 .i3 { padding-left:clamp(24px,10vw,180px); color:var(--red); }

/* The hero holds the height of a screen, headline at the top, index resting on
   the bottom edge. The nav is position:fixed and overlays the top of the page,
   so its 76px is added to the section's own padding rather than eating it. */
.hww-hero { padding-top:calc(clamp(72px,9vw,130px) + 76px); }
.hww-hero > .wrap { min-height:calc(100svh - 340px); display:grid; grid-template-rows:auto 1fr; }
.hww-index { margin-top:72px; align-self:end; display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); border-top:1px solid rgba(255,255,255,.25); }
.hww-index a { display:grid; grid-template-columns:32px 1fr; gap:6px; padding:20px 16px 0 0; color:#fff; text-decoration:none; font-family:var(--head); font-size:15px; line-height:1.3; transition:color .25s var(--ease); }
.hww-index a span:first-child { color:var(--red); }
.hww-index a:hover { color:var(--sky); }

.hww-bleed { background:var(--navy); aspect-ratio:21/8; min-height:260px; display:grid; place-items:center; }

.hww-open { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--gap-split,clamp(36px,5vw,88px)); align-items:start; }
.hww-open h2 { margin:0; font-size:clamp(32px,4vw,56px); line-height:1.04; letter-spacing:-.015em; max-width:14ch; }
.hww-open > div { display:grid; gap:24px; padding-top:10px; }
.hww-open p { margin:0; }
.hww-say { font-family:var(--head); font-size:clamp(24px,2.4vw,32px); line-height:1.2; color:var(--red); }
.hww-say.sm { font-size:clamp(22px,2.2vw,28px); line-height:1.25; color:inherit; align-self:end; }
.hww-note { color:var(--grey); border-top:1px solid var(--line); padding-top:24px; }

/* The rail sits alongside seven numbered parts and tracks the one being read. */
.hww-split { display:grid; grid-template-columns:minmax(140px,200px) minmax(0,1fr); gap:var(--gap-split,clamp(36px,5vw,88px)); align-items:start; border-top:2px solid var(--navy); padding-top:32px; }
.hww-rail { position:sticky; top:96px; display:grid; gap:28px; }
.hww-num { font-family:var(--head); font-weight:700; font-size:clamp(80px,10vw,160px); line-height:.9; letter-spacing:-.04em; color:var(--red); font-variant-numeric:tabular-nums; }
.hww-rail-links { display:grid; }
.hww-rail-links a { display:block; padding:9px 0; border-top:1px solid var(--line); font-family:var(--head); font-size:14px; line-height:1.3; text-decoration:none; color:var(--grey); transition:color .25s var(--ease); }
.hww-rail-links a.on { color:var(--navy); font-weight:700; }
.hww-rail-links a:hover { color:var(--red); }

.hww-p { display:grid; gap:32px; padding:56px 0; border-top:1px solid var(--line); scroll-margin-top:96px; }
.hww-p:first-child { padding-top:0; border-top:none; }
.hww-p.last { padding-bottom:0; }
.hww-p > h2 { margin:0; font-size:clamp(30px,3.6vw,52px); line-height:1.05; letter-spacing:-.015em; max-width:18ch; }
.hww-two { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--gap-split,clamp(36px,5vw,88px)); }
.hww-two.start { align-items:start; }
.hww-two.end { align-items:end; }
.hww-trio { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--gap-card,clamp(14px,2vw,26px)); }
.hww-col { display:grid; gap:18px; align-content:start; }
.hww-col p, .hww-two > p { margin:0; }
.hww-col p { color:var(--grey); }
.hww-p .lead { color:var(--ink); font-size:20px; line-height:1.5; }
.hww-rule { border-top:2px solid var(--red); padding-top:12px; font-family:var(--head); font-size:clamp(20px,2vw,26px); line-height:1.25; color:var(--ink) !important; }

.hww-callout { background:var(--sky); color:var(--navy); padding:40px 36px; display:grid; gap:14px; min-height:260px; align-content:end; }
.hww-callout p { margin:0; font-family:var(--head); }
.hww-callout .k { font-size:15px; color:var(--red); }
.hww-callout .v { font-size:clamp(26px,2.6vw,36px); line-height:1.1; }

.hww-diagram svg { width:100%; height:auto; display:block; }
.hww-diagram line { stroke:var(--navy); stroke-opacity:.25; stroke-width:1.5; }
.hww-diagram text { fill:var(--navy); font-family:var(--head); font-size:22px; font-weight:700; }
.hww-diagram text.hl { fill:var(--red); }

/* Placeholders, not artwork. Every one is a slot waiting on a chosen photograph,
   and it should look unfinished until one lands. */
/* width:100% is load-bearing. With only aspect-ratio and min-height set, a box
   narrower than its min-height grows WIDTH to keep the ratio, which pushed the
   page into horizontal scroll on a phone. */
.hww-slot, .hww-bleed { position:relative; width:100%; background:var(--paper-2); box-shadow:inset 0 0 0 1px var(--line); display:grid; place-items:center; }
.hww-bleed { box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); background:var(--navy); }
.hww-slot span, .hww-bleed span { font-family:var(--head); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--grey-lt); padding:0 20px; text-align:center; }
.hww-bleed span { color:rgba(255,255,255,.5); }
.hww-slot.portrait { aspect-ratio:4/5; max-width:380px; width:100%; justify-self:end; }
.hww-slot.wide { aspect-ratio:16/7; min-height:220px; }
.hww-slot.square { aspect-ratio:1/1; }
.hww-slot.tall { aspect-ratio:3/4; }

.hww-three { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--gap-split,clamp(36px,5vw,88px)); border-top:1px solid rgba(255,255,255,.25); padding-top:40px; margin-top:56px; }
.hww-three p { margin:0; opacity:.85; }
.hww-three .lead { opacity:1; font-size:20px; line-height:1.5; }
.hww-coda { margin:56px 0 0; font-family:var(--head); font-size:clamp(22px,2.4vw,32px); line-height:1.2; color:var(--sky); }

@media (max-width:900px){
  /* minmax(0,1fr), not 1fr: a bare 1fr is minmax(auto,1fr) and refuses to go
     below the content's min-content width, which put the page into horizontal
     scroll on a phone. */
  .hww-split { grid-template-columns:minmax(0,1fr); }
  /* The rail becomes a bar across the top rather than a column beside nothing. */
  .hww-rail { position:static; grid-template-columns:auto 1fr; align-items:center; gap:20px; }
  .hww-rail-links { display:none; }
  .hww-num { font-size:64px; }
  .hww-slot.portrait { justify-self:stretch; max-width:none; }
  /* The min-heights are a desktop concern only, and on a phone they are what
     drives the width inflation described above. */
  .hww-slot, .hww-slot.wide, .hww-bleed { min-height:0; }
}

/* About, the band that hands off to How We Work. */
.ab-hww { display:grid; gap:20px; justify-items:start; }
.ab-hww p { color:var(--grey); max-width:52ch; margin:0; }

/* ---------- People ------------------------------------------------------ */
/* Imported from People in the About page design project, built in this
   sheet's idiom as How We Work was. Image slots reuse .hww-slot until the
   originals from Marketing > Media are chosen. Every auto-fit track is
   min(Npx,100%) so no column can force horizontal scroll on a phone. */
.ppl-hero { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr)); min-height:min(78vh,760px); padding-top:76px; }
.ppl-hero-copy { padding:clamp(48px,8vw,120px) var(--pad); display:grid; align-content:center; gap:28px; }
/* Wide screens: the copy starts on the 1280 content column like the nav, so the
   gap to the photo does not grow with the window. */
@media (min-width:900px) { .ppl-hero-copy { padding-left:max(var(--pad), calc((100vw - 1280px) / 2 + var(--pad))); } }
.ppl-hero h1 { font-size:clamp(44px,6.4vw,104px); line-height:.96; letter-spacing:-.02em; font-weight:700; max-width:9ch; }
.ppl-hero-copy p { font-size:20px; line-height:1.5; color:var(--grey); max-width:32rem; }
.ppl-hero-img { min-height:420px; }
.ppl-tag { position:absolute; left:0; bottom:clamp(24px,4vw,56px); color:#fff; background:var(--red); padding:14px 22px; font-family:var(--head); font-size:15px; max-width:28rem; }

.ppl-head { display:grid; grid-template-columns:minmax(0,.38fr) minmax(0,1fr); gap:clamp(32px,6vw,112px); margin-bottom:56px; }
.ppl-head h2 { font-size:clamp(32px,3.8vw,54px); line-height:1.04; }
.ppl-head p { font-size:20px; line-height:1.5; color:var(--grey); max-width:44rem; align-self:end; }
.ppl-dark .ppl-head p { color:#fff; }

.ppl-combo { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); background:var(--paper-2); }
.ppl-combo .hww-slot { min-height:360px; }
.ppl-combo-copy { padding:clamp(32px,5vw,80px); display:grid; gap:24px; align-content:center; }
.ppl-combo-copy h3 { font-size:clamp(26px,2.8vw,42px); line-height:1.1; }
.ppl-combo-copy p { color:var(--grey); font-size:18px; }
.ppl-combo-copy a { color:var(--red); }
.ppl-combo-copy .ppl-disc { padding-top:20px; border-top:1px solid var(--navy); font-family:var(--head); font-size:14px; line-height:1.7; color:var(--ink); }

.ppl-leaders { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); gap:1px; background:rgba(255,255,255,.25); }
.ppl-leader { border:0; background:var(--navy); color:#fff; display:grid; grid-template-rows:auto 1fr; cursor:pointer; }
.ppl-leader:focus-visible { outline:2px solid var(--sky); outline-offset:2px; }
.ppl-leader img { width:100%; aspect-ratio:4/4.4; object-fit:cover; object-position:center 23%; }
.ppl-leader-who { display:grid; gap:6px; padding:22px 56px 26px 24px; border-top:3px solid var(--red); position:relative; min-height:110px; }
.ppl-leader-who .n { font-family:var(--head); font-size:19px; line-height:1.3; font-weight:700; }
.ppl-leader-who .r { font-size:15px; color:var(--sky); }
.ppl-leader-who .plus { position:absolute; right:24px; bottom:22px; color:var(--red); font-family:var(--head); font-size:24px; line-height:1; transition:transform .25s var(--ease); }
.ppl-leader:hover .plus { transform:rotate(90deg); }

.ppl-grid { display:grid; border-top:1px solid var(--grey-lt); border-left:1px solid var(--grey-lt); }
.ppl-grid article { border-right:1px solid var(--grey-lt); border-bottom:1px solid var(--grey-lt); display:grid; }
.ppl-grid h3 { font-size:19px; line-height:1.25; }
.ppl-grid p { font-size:15px; color:var(--grey); }
.ppl-grid .tbc { color:var(--red); }
.ppl-grid .k { font-family:var(--head); font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--grey); }
.ppl-practice { grid-template-columns:repeat(auto-fit,minmax(min(max(240px,calc((100% - 2px) / 3)),100%),1fr)); }
/* Portrait on top, text below, the leadership card at a smaller scale. A lead
   without an approved portrait gets a quiet block with initials. */
/* Six across on a wide screen, so each lead reads clearly smaller than the
   three leadership cards above; three, then two, as the screen narrows. */
.ppl-grid.ppl-practice { grid-template-columns:repeat(6,minmax(0,1fr)); }
@media (max-width:1100px){ .ppl-grid.ppl-practice { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:600px){ .ppl-grid.ppl-practice { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.ppl-practice article { grid-template-rows:auto 1fr; }
.ppl-practice .t { padding:16px 16px 20px !important; }
.ppl-practice h3 { font-size:16px; }
.ppl-practice p { font-size:13px; line-height:1.4; }
.ppl-practice .k { font-size:11px; }
.ppl-practice .face, .ppl-practice .ph { width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center top; background:var(--paper-2); }
.ppl-practice .ph { display:grid; place-items:center; }
.ppl-practice .ph span { font-family:var(--head); font-size:clamp(40px,4vw,64px); line-height:1; letter-spacing:-.02em; color:var(--line); font-weight:700; }
.ppl-practice .t { padding:20px 24px 24px; display:grid; gap:4px; align-content:start; border-top:3px solid var(--red); }

.ppl-filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:32px; }
.ppl-filters button { border:1px solid var(--navy); background:transparent; color:var(--navy); padding:12px 16px; font-family:var(--head); font-size:13px; letter-spacing:.04em; text-transform:uppercase; }
.ppl-filters button.on { background:var(--navy); color:#fff; }
/* The practice-lead card again, one step smaller: narrower tracks so the wider
   team never reads larger than the leads above it. */
.ppl-team { grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr)); }
@media (max-width:600px){ .ppl-team { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.ppl-team article { background:#fff; grid-template-rows:auto 1fr; }
.ppl-team article[hidden] { display:none; }
.ppl-team .face, .ppl-team .ph { width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center top; background:var(--paper-2); }
.ppl-team .ph { display:grid; place-items:center; }
.ppl-team .ph span { font-family:var(--head); font-size:36px; line-height:1; letter-spacing:-.02em; color:var(--line); font-weight:700; }
.ppl-team .t { padding:12px 14px 16px; display:grid; gap:3px; align-content:start; border-top:2px solid var(--red); }
.ppl-team h3 { font-size:15px; }
.ppl-join-card { background:var(--navy); color:#fff; display:grid; grid-template-rows:auto 1fr; border-right:1px solid var(--grey-lt); border-bottom:1px solid var(--grey-lt); transition:background .25s var(--ease); }
.ppl-join-card:hover { background:var(--red); }
.ppl-join-card .big { width:100%; aspect-ratio:4/5; display:grid; place-items:center; font-family:var(--head); font-weight:700; font-size:36px; letter-spacing:-.02em; color:var(--sky); }
.ppl-join-card .t { padding:12px 14px 16px; display:grid; align-content:start; gap:3px; border-top:2px solid var(--red); }
.ppl-join-card:hover .t { border-top-color:#fff; }
.ppl-join-card .n { font-family:var(--head); font-size:15px; font-weight:500; }
.ppl-join-card .r { font-size:12.5px; color:rgba(255,255,255,.8); }
.ppl-team p { font-size:12.5px; line-height:1.35; }
.ppl-foot { margin-top:20px; font-size:14px; color:var(--grey); }

.ppl-pair { container-type:inline-size; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); background:var(--red); color:#fff; }
.ppl-pair article { padding:clamp(40px,5vw,72px) var(--pad); display:grid; grid-template-rows:1fr auto; gap:24px; }
/* Dark red is outside the brand palette; chosen for now, open to revisit. */
.ppl-pair article + article { background:var(--red-dark); }
/* The halves run edge to edge, but their text keeps to the 1280 wrap every
   other section uses, so on a wide screen it does not hug the screen edge. */
.ppl-pair article:first-child { padding-left:max(var(--pad),calc((100cqw - 1280px) / 2 + var(--pad))); }
.ppl-pair article:last-child { padding-right:max(var(--pad),calc((100cqw - 1280px) / 2 + var(--pad))); }
.ppl-pair h3 { font-size:clamp(32px,3.6vw,56px); line-height:.98; letter-spacing:-.02em; font-weight:700; max-width:10ch; }
.ppl-pair p { max-width:29rem; font-size:18px; }

/* People in practice: first-person quotes in speech bubbles, a face and a
   first name under each. Two by two from tablet up, one column on a phone. */
.ppl-stories { display:grid; grid-template-columns:minmax(0,1fr); gap:20px 20px; }
@media (min-width:720px){ .ppl-stories { grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* Bubbles in the same row share a height, so the faces line up. */
.ppl-stories figure { margin:0; display:grid; grid-template-rows:1fr auto; }
.ppl-stories blockquote { position:relative; margin:0; padding:22px 26px; font-family:var(--head); font-size:clamp(16px,1.15vw,19px); line-height:1.4; color:var(--navy); background:var(--paper-2); }
.ppl-stories blockquote::after { content:""; position:absolute; left:36px; bottom:-14px; border:14px solid transparent; border-top-color:var(--paper-2); border-bottom:0; }
@media (min-width:720px){
  .ppl-stories figure:nth-child(2) blockquote, .ppl-stories figure:nth-child(3) blockquote { background:var(--navy); color:#fff; }
  .ppl-stories figure:nth-child(2) blockquote::after, .ppl-stories figure:nth-child(3) blockquote::after { border-top-color:var(--navy); }
}
.ppl-stories figcaption { display:flex; gap:12px; align-items:center; margin-top:20px; padding-left:22px; font-size:14px; color:var(--grey); }
.ppl-stories figcaption img { width:46px; height:46px; border-radius:50%; object-fit:cover; object-position:center 22%; flex:none; }
.ppl-stories figcaption b { display:block; font-family:var(--head); font-size:16px; color:var(--navy); }
/* The whole section fits one screen at 100%: tighter section padding. */
.ppl-stories-sec { padding-top:clamp(56px,6vw,88px); padding-bottom:clamp(56px,6vw,88px); }
.ppl-stories-sec .ppl-head { margin-bottom:clamp(20px,2.4vw,32px); }
.ppl-stories-sec .ppl-head h2 { grid-column:1/-1; }

/* Kept to the page's 1280 content column, not run edge to edge. */
.ppl-learn { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); min-height:clamp(360px,34vw,480px); max-width:calc(1280px - 2 * var(--pad)); width:calc(100% - 2 * var(--pad)); margin:0 auto clamp(72px,9vw,130px); }
.ppl-learn-copy { background:var(--navy); color:#fff; padding:clamp(40px,5vw,80px) clamp(24px,4vw,64px); display:grid; align-content:center; gap:24px; }
.ppl-learn h2 { font-size:clamp(32px,3.8vw,54px); line-height:1.04; max-width:14ch; }
.ppl-learn-copy p { max-width:31rem; font-size:18px; color:var(--sky); }
.ppl-learn .hww-slot { min-height:360px; }

.ppl-join { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:clamp(36px,5vw,88px); align-items:center; }
.ppl-join h2 { font-size:clamp(32px,3.8vw,54px); line-height:1.04; max-width:12ch; }
.ppl-join > div { display:grid; gap:28px; justify-items:start; }
.ppl-join p { font-size:18px; color:var(--grey); max-width:38rem; }

.ppl-modal { border:0; padding:0; width:min(880px,calc(100% - 48px)); max-width:none; margin:auto; background:#fff; color:var(--navy); }
.ppl-modal::backdrop { background:rgba(0,14,38,.85); }
.ppl-modal-body { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); }
.ppl-modal img { width:100%; height:100%; min-height:320px; object-fit:cover; object-position:center 23%; }
.ppl-modal-body > div { padding:clamp(28px,4vw,56px); display:grid; gap:16px; align-content:center; }
.ppl-modal h3 { font-size:clamp(26px,2.6vw,36px); line-height:1.1; }
.ppl-modal .r { font-family:var(--head); font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:var(--red); }
.ppl-modal .b { color:var(--grey); display:grid; gap:12px; }
/* The long profiles run to five paragraphs: the text column scrolls inside
   the dialog rather than pushing it past the screen. */
.ppl-modal-body > div { max-height:calc(100vh - 48px); overflow-y:auto; align-content:safe center; }
.ppl-lead { cursor:pointer; }
.ppl-lead:focus-visible { outline:2px solid var(--red); outline-offset:-2px; }
/* Landscape profile card (Sana, 28 Sep 2026): wide and short, portrait on the
   left, the shorter bio on the right. Stacks on a phone. */
@media (min-width:721px) {
  .ppl-modal { width:min(1080px,calc(100% - 48px)); }
  .ppl-modal-body { grid-template-columns:36% 1fr; height:min(560px,calc(100vh - 48px)); }
  .ppl-modal img { min-height:0; height:100%; }
  .ppl-modal-body > div { max-height:none; height:100%; padding:clamp(32px,3.5vw,52px); }
}
.ppl-modal .x { position:absolute; top:0; right:0; width:48px; height:48px; border:0; background:var(--navy); color:#fff; font-size:24px; font-family:var(--head); }

@media (max-width:900px){
  .ppl-head { grid-template-columns:minmax(0,1fr); gap:16px; }
  .ppl-hero-img, .ppl-combo .hww-slot, .ppl-learn .hww-slot { min-height:300px; }
}

/* ---------- Services v3 -------------------------------------------------- */
/* From "Services v3" in the About page design project. The accordions and the
   capability tiles are baked from the CMS (scripts/bake.mjs); everything else
   is static. Photo slots reuse .hww-slot until photographs are chosen. */
.svc3-hero { position:relative; min-height:min(82vh,780px); display:grid; align-items:end; background:var(--navy); color:#fff; }
.svc3-hero .media { position:absolute; inset:0; background:var(--navy); box-shadow:none; place-items:start center; padding-top:120px; }
.svc3-hero .media span { color:rgba(255,255,255,.4); }
.svc3-hero .media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.svc3-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,14,38,.6) 0, transparent 180px), linear-gradient(to top, rgba(0,14,38,.85) 0%, rgba(0,14,38,.15) 60%, transparent 100%); pointer-events:none; }
.svc3-hero .wrap { position:relative; z-index:1; width:100%; padding-top:clamp(56px,7vw,110px); padding-bottom:clamp(40px,5vw,72px); display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(24px,4vw,72px); align-items:end; }
@media (min-width:900px){ .svc3-hero .wrap { grid-template-columns:minmax(0,3fr) minmax(0,2fr); } }
/* Sized to its own column: at 112px the last word ran into the paragraph. */
.svc3-hero h1 { font-size:clamp(40px,5vw,88px); line-height:.94; letter-spacing:-.03em; font-weight:700; color:#fff; max-width:13ch; }
.svc3-hero p { font-family:var(--head); font-size:clamp(20px,1.7vw,26px); line-height:1.3; max-width:24rem; }

/* Two equal columns in the same voice: the first in ink, the second in grey. */
.svc3-intro { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:clamp(32px,8vw,160px); align-items:start; }
.svc3-intro p { font-family:var(--head); font-weight:400; font-size:clamp(18px,1.6vw,21px); line-height:1.5; letter-spacing:0; color:var(--grey); max-width:30rem; }
.svc3-intro p.big { color:var(--ink); }
.svc3-intro-sec { padding-bottom:0; }
/* The tiles are the page's only service navigation. Subgrid keeps the
   descriptions level when one title wraps to two lines. */
.svc3-jumps { margin-top:clamp(40px,5vw,80px); padding-bottom:clamp(64px,8vw,120px); display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
@media (min-width:720px){ .svc3-jumps { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.svc-jump { display:grid; grid-row:span 3; grid-template-rows:subgrid; row-gap:10px; min-height:clamp(140px,12vw,200px); padding:clamp(24px,2.4vw,36px); background:var(--paper-2); color:var(--navy); transition:background .25s, color .25s; }
.svc-jump:hover, .svc-jump.on { background:var(--red); color:#fff; }
.svc-jump b { align-self:end; font-family:var(--head); font-size:clamp(22px,1.9vw,30px); line-height:1.08; font-weight:700; letter-spacing:-.015em; }
.svc-jump span { font-size:15px; line-height:1.45; }
/* Disciplines under each title (trial, Sana 29 Sep 2026). */
.svc-jump-list { list-style:none; display:grid; gap:4px; padding:4px 0 6px; border-bottom:1px solid currentColor; font-family:var(--head); font-weight:600; font-size:15px; line-height:1.3; }
/* Compact copy of the tiles, pinned to the top while the bands are in view.
   Its links keep to the same 1280 column as the page content. */
.svc-bar { position:fixed; top:0; left:0; right:0; z-index:150; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:10px max(var(--pad), calc((100% - 1280px) / 2 + var(--pad))); background:#fff; transform:translateY(-110%); transition:transform .35s ease; pointer-events:none; }
.svc-bar.show { transform:translateY(var(--nav-h,0px)); pointer-events:auto; }
.svc-bar a { display:flex; align-items:center; min-height:52px; padding:0 clamp(16px,2vw,32px); background:var(--paper-2); color:var(--navy); font-family:var(--head); font-weight:700; font-size:clamp(13px,1.1vw,16px); letter-spacing:.01em; line-height:1.15; transition:background .25s, color .25s; }
.svc-bar a:hover, .svc-bar a.on { background:var(--red); color:#fff; }
.svc-bar .short { display:none; }
@media (max-width:720px) { .svc-bar .full { display:none; } .svc-bar .short { display:inline; } }

/* A family: photo on one half, title and accordion on the other, alternating. */
.svc-band { display:grid; grid-template-columns:minmax(0,1fr); scroll-margin-top:76px; }
.svc-band.white { background:#fff; color:var(--navy); }
.svc-band.light { background:var(--paper-2); color:var(--navy); }
.svc-band.navy { background:var(--navy); color:#fff; }
.svc-band .media { min-height:320px; }
.svc-band .media { position:relative; overflow:hidden; }
.svc-band .media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.svc-band.navy .media { background:rgba(255,255,255,.08); box-shadow:none; }
.svc-band.navy .media span { color:rgba(255,255,255,.4); }
.svc-band .body { padding:clamp(48px,6vw,96px) var(--pad); display:grid; gap:clamp(32px,4vw,56px); align-content:start; min-width:0; }
.svc-band .head { display:grid; gap:14px; }
.svc-band h2 { font-size:clamp(34px,3.6vw,58px); line-height:1; letter-spacing:-.02em; color:inherit; }
.svc-band .head p { font-size:18px; color:var(--grey); max-width:28rem; }
.svc-band.navy .head p { color:var(--sky); }
@media (min-width:900px){
  .svc-band { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .svc-band .media { min-height:100%; }
  .svc-band.flip .media { order:2; }
}
}

.svc-band .acc { border-top:1px solid var(--navy); }
.svc-band.navy .acc { border-top-color:rgba(255,255,255,.3); }
.svc-acc { border-bottom:1px solid var(--navy); scroll-margin-top:96px; }
.svc-band.navy .svc-acc { border-bottom-color:rgba(255,255,255,.3); }
.svc-acc summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 0; font-family:var(--head); font-weight:700; font-size:clamp(19px,1.5vw,24px); letter-spacing:-.01em; transition:color .2s; }
.svc-acc summary::-webkit-details-marker { display:none; }
.svc-acc summary:hover { color:var(--red); }
.svc-acc summary svg { flex:none; color:var(--grey); transition:transform .3s var(--ease), color .2s; }
.svc-band.navy .svc-acc summary svg { color:var(--sky); }
.svc-acc[open] summary svg { transform:rotate(180deg); color:var(--red); }
.svc-acc p { margin:0 0 24px; font-size:16px; line-height:1.55; color:var(--grey); max-width:34rem; }
.svc-band.navy .svc-acc p { color:var(--sky); }

/* Heading plus two equal tiles, the tiles matched in height. */
.svc3-caps { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; align-items:stretch; }
/* Desktop: heading and both cards on one line. Between 720 and 1099px
   that is too cramped, so the heading takes its own line above the cards. */
@media (min-width:720px) and (max-width:1099px){
  .svc3-caps { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .svc3-caps h2 { grid-column:1/-1; margin-bottom:clamp(16px,2vw,32px); }
}
@media (min-width:1100px){ .svc3-caps { grid-template-columns:repeat(3,minmax(0,1fr)); } .svc3-caps h2 { align-self:start; max-width:11ch; } }
.svc3-caps h2 { font-size:clamp(34px,3.6vw,58px); line-height:1; letter-spacing:-.02em; }
@media (max-width:719px){ .svc3-caps h2 { max-width:11ch; } }
.svc-cap { display:grid; gap:12px; align-content:start; padding:clamp(24px,2.4vw,36px); color:#fff; scroll-margin-top:96px; }
.svc-cap.navy { background:var(--navy); }
.svc-cap.red { background:var(--red); }
.svc-cap h3 { font-size:clamp(22px,1.8vw,28px); line-height:1.1; font-weight:700; letter-spacing:-.015em; color:#fff; }
.svc-cap p { font-size:16px; line-height:1.5; }
.svc-cap.navy p { color:var(--sky); }

/* The pattern tile as supplied, repeated along the band, never redrawn. */
.svc3-pattern { height:clamp(56px,7vw,110px); background:var(--paper-2) url("assets/pattern-connection-white-tile.png") left center / auto 100% repeat-x; }

.svc3-breadth-sec { background:var(--paper-2); }
/* Side by side from 700px, the list type scaling with its column. The auto-fit grid used to
   drop to two tracks on a narrow screen, put the list on its own row, and
   leave the copy sticky, so it slid over the list on scroll. */
.svc3-breadth { display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(32px,5vw,80px); align-items:start; }
@media (min-width:700px){ .svc3-breadth { grid-template-columns:minmax(0,1fr) minmax(0,2fr); } }
.svc3-breadth .copy { display:grid; gap:20px; }
@media (min-width:700px){ .svc3-breadth .copy { position:sticky; top:96px; } }
.svc3-breadth h2 { font-size:clamp(34px,3.6vw,58px); line-height:1; letter-spacing:-.02em; }
.svc3-breadth p { font-size:18px; color:var(--grey); max-width:26rem; }
.svc3-breadth p.lead { color:var(--ink); }
.svc3-breadth ul { min-width:0; list-style:none; display:flex; flex-wrap:wrap; gap:0 .35em; font-family:var(--head); font-weight:700; font-size:clamp(22px,2.6vw,44px); line-height:1.15; letter-spacing:-.025em; }
.svc3-breadth li { color:var(--navy); transition:color .2s; }
/* Accents hand-placed at uneven gaps so the list reads as scattered, not
   striped: a 3n cycle turned into even colour columns (Sana, 29 Sep 2026). */
.svc3-breadth li:is(:nth-child(3),:nth-child(8),:nth-child(13),:nth-child(17)) { color:var(--red); }
.svc3-breadth li:is(:nth-child(5),:nth-child(10),:nth-child(11),:nth-child(19)) { color:var(--grey); }
.svc3-breadth li:hover { color:var(--red); }
.svc3-breadth li span { color:var(--grey); }

/* Integration and Grounded share one three-column row. */
.svc3-int, .svc3-grounded { padding:clamp(64px,7vw,110px) 0; background:#fff; color:var(--navy); }
.svc3-row { display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(32px,4vw,72px); align-items:start; }
@media (min-width:720px){ .svc3-row { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1100px){ .svc3-row { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.svc3-row h2 { font-size:clamp(26px,2.2vw,36px); line-height:1.05; letter-spacing:-.025em; color:var(--navy); }
.svc3-row p { font-size:18px; line-height:1.6; color:var(--grey); }
.svc3-row p.b { font-family:var(--head); font-weight:700; font-size:clamp(19px,1.5vw,22px); line-height:1.3; color:var(--navy); }
.svc3-int .txt { display:grid; gap:16px; }
.svc3-int .list { list-style:none; margin-top:-14px; }
.svc3-int .list li { padding:14px 0; font-family:var(--head); font-weight:700; font-size:clamp(20px,1.7vw,26px); line-height:1.15; letter-spacing:-.01em; color:var(--navy); border-bottom:1px solid var(--paper-2); }
.svc3-int .list li.red { color:var(--red); border-bottom:0; }
.svc3-grounded h2 span { display:block; }
.svc3-grounded h2 span + span { color:var(--red); }
.svc3-photo { height:clamp(320px,40vw,640px); box-shadow:none; }
.svc3-photo img { width:100%; height:100%; object-fit:cover; }

.svc3-cta { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:32px; align-items:center; }
/* The button sits at the right edge of the column, level with the footer end. */
@media (min-width:700px){ .svc3-cta > :last-child { display:flex; justify-content:flex-end; } }
.svc3-cta h2 { font-size:clamp(34px,4vw,64px); line-height:1; letter-spacing:-.02em; color:#fff; }
.svc3-cta p { margin-top:16px; font-size:18px; max-width:32rem; color:var(--sky); }

/* Everything on Services keeps to the one 1280 column (Sana, 29 Sep 2026):
   the band colours still run edge to edge, but the photo halves, the pattern
   band and the team photo now stop where the text does. Padding as a
   percentage is of the band's own width, so no scrollbar error. */
@media (min-width:900px){
  .svc-band { padding-inline:max(var(--pad),calc((100% - 1280px) / 2 + var(--pad))); padding-block:clamp(48px,6vw,96px); align-items:stretch; }
  /* The photo half is exactly as tall as its text, top and bottom edges
     level with it (Sana, 29 Sep): no longer running above and below. */
  .svc-band .body { padding-block:0; }
  .svc-band .media { min-height:0; }
  .svc-band .body { padding-left:clamp(32px,4vw,64px); padding-right:0; }
  .svc-band.flip .body { padding-left:0; padding-right:clamp(32px,4vw,64px); }
}
.svc3-pattern, .svc3-photo { width:calc(min(100%, 1280px) - 2 * var(--pad)); margin-inline:auto; }

/* Phones: nothing below 12px. */
@media (max-width:720px) { .proj-thumb .cat { font-size:12px; } }

/* Phones: bigger tap areas on small links. The padding is cancelled by an
   equal negative margin, so the hit area grows to about 44px and nothing
   moves. */
@media (max-width:860px) {
  .link-arrow, .ab-lead .more { padding-block:12px; margin-block:-12px; }
  .footer-line a { padding-block:10px; margin-block:-10px; }
  .burger { padding:14px 10px; margin:-8px -4px; }
}

/* A slot that has its photo: the image fills the slot's box. */
[data-has-img] { overflow:hidden; }
[data-has-img] > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* People: Life at ALSUWEIDI strip. Kept inside the content column so it
   never grows past the edge it started at. Arrows page through it; the next
   photo peeks at the right edge so it reads as a row you can move. */
.ppl-culture-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:16px 24px; margin-bottom:clamp(20px,2.4vw,32px); }
.ppl-culture-head > div:first-child { display:grid; gap:10px; }
.ppl-culture-head p { color:var(--grey); max-width:36rem; }
.ppl-culture-nav { display:flex; gap:8px; }
.ppl-culture-btn { width:48px; height:48px; border:1px solid var(--navy); background:none; color:var(--navy); font-size:20px; line-height:1; transition:background .25s, color .25s, opacity .25s; }
.ppl-culture-btn:hover { background:var(--navy); color:#fff; }
.ppl-culture-btn:disabled { opacity:.3; pointer-events:none; }
.ppl-culture-strip { display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; }
.ppl-culture-strip::-webkit-scrollbar { display:none; }
.ppl-culture-strip img { flex:none; width:calc((100% - 24px) / 2.6); aspect-ratio:4/3; object-fit:cover; scroll-snap-align:start; background:var(--paper-2); }
@media (max-width:720px) { .ppl-culture-strip img { width:82%; } }
/* A 16:9 photo keeps its whole width at the strip height (Sana, 29 Sep 2026). */
.ppl-culture-strip img.wide { width:calc((100% - 24px) / 2.6 * 4 / 3); aspect-ratio:16/9; }
@media (max-width:720px) { .ppl-culture-strip img.wide { width:82%; } }

/* Phones: the hero caption sits under the photo, not over it. */
@media (max-width:720px) {
  .ppl-hero-img { display:block; min-height:0; }
  .ppl-hero-img > img { position:static; display:block; height:260px; }
  .ppl-hero-img .ppl-tag { position:static; max-width:none; }
}
/* Phones: the stories alternate grey and navy down the single column. */
@media (max-width:719px) {
  .ppl-stories figure:nth-child(even) blockquote { background:var(--navy); color:#fff; }
  .ppl-stories figure:nth-child(even) blockquote::after { border-top-color:var(--navy); }
}

/* ============================================================
   CONTACT (28 Sep 2026, direction B "The Lines"): a routing page, no forms.
   Navy hero with the Collaboration lines and the two primary routes, a row
   of three other contacts, then the four offices as white tiles.
   ============================================================ */
.ctb-hero { position:relative; background:var(--navy); color:#fff; overflow:hidden; padding:calc(76px + clamp(56px,7vw,110px)) 0 clamp(64px,7vw,110px); }
.ctb-lines { position:absolute; left:-10%; top:-10%; width:120%; height:auto; pointer-events:none; }
.ctb-lines path { fill:none; stroke:rgba(255,255,255,.12); stroke-width:6; }
.ctb-hero .wrap { position:relative; }
.ctb-hero h1 { color:#fff; font-size:clamp(48px,6vw,88px); margin:0; }
.ctb-lead { color:rgba(255,255,255,.72); font-size:19px; max-width:34rem; margin:18px 0 0; }
.ctb-pair { margin-top:clamp(40px,5vw,80px); display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:16px; }
.ctb-card { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); padding:clamp(28px,3vw,44px); transition:background .3s, border-color .3s; }
.ctb-card:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.3); }
.ctb-main, .ctb-main:hover { background:var(--red); border-color:var(--red); }
.ctb-l { font-family:var(--head); font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; margin:0; }
.ctb-card .ctb-l { color:rgba(255,255,255,.75); }
.ctb-e { display:inline-block; margin-top:14px; font-family:var(--head); font-weight:600; font-size:clamp(22px,2.2vw,34px); line-height:1.15; color:#fff; border-bottom:2px solid transparent; transition:border-color .2s; }
.ctb-main .ctb-e { font-size:clamp(24px,2.8vw,42px); }
.ctb-e:hover, .ctb-e:focus-visible { border-bottom-color:currentColor; }
.ctb-card p { color:rgba(255,255,255,.82); margin:14px 0 0; max-width:30rem; }
.ctb-more { display:inline-flex; align-items:center; gap:8px; min-height:44px; margin-top:10px; color:#fff; font-family:var(--head); font-weight:600; }
.ctb-more:hover { color:var(--sky); }
.ctb-other-sec { padding:clamp(56px,6vw,96px) 0; }
.ctb-head { font-size:clamp(26px,2.6vw,36px); margin:0 0 clamp(20px,2.4vw,32px); }
.ctb-other { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,3vw,48px); }
.ctb-other > div { border-top:2px solid var(--navy); padding-top:20px; }
.ctb-other .ctb-l { color:var(--grey-lt); }
.ctb-other a { display:inline-block; margin:10px 0 6px; font-family:var(--head); font-weight:600; font-size:20px; color:var(--navy); overflow-wrap:anywhere; }
.ctb-other a:hover, .ctb-other a:focus-visible { color:var(--red); }
.ctb-other p { color:var(--grey); font-size:15px; margin:0; }
.ctb-other .ctb-fb { border-top-color:var(--line); }
.ctb-other .ctb-fb a { color:var(--grey); font-weight:500; }
.ctb-offices-sec { background:var(--paper-2); padding:clamp(56px,6vw,96px) 0; }
.ctb-offices { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2px; }
.ctb-city { font-style:normal; background:#fff; padding:28px; display:flex; flex-direction:column; }
.ctb-city h3 { font-size:clamp(24px,2vw,28px); margin:0; }
.ctb-tag { display:block; margin-top:6px; font-family:var(--head); font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--grey-lt); }
.ctb-city h3 + p, .ctb-tag + p { margin-top:18px; }
.ctb-city p { font-size:15px; line-height:1.55; margin:0 0 12px; text-wrap:pretty; }
.ctb-city .nb { white-space:nowrap; }
.ctb-tel a { font-family:var(--head); font-weight:600; color:var(--navy); }
.ctb-tel a:hover { color:var(--red); }
.ctb-fax { display:block; margin-top:4px; font-size:14px; color:var(--grey-lt); }
.ctb-dir { margin-top:auto; padding-top:8px; min-height:44px; display:inline-flex; align-items:center; gap:8px; color:var(--red); font-family:var(--head); font-weight:600; }
.ctb-dir:hover { color:var(--navy); }
@media (max-width:1100px) { .ctb-offices { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:900px) { .ctb-pair, .ctb-other { grid-template-columns:1fr; } }
@media (max-width:560px) { .ctb-offices { grid-template-columns:1fr; } .ctb-lines { width:220%; left:-60%; } }

/* ============================================================
   MOBILE PASS, 28 Sep 2026 (Sana). Approved: clients grid, services bands, award photo whole, About leaders full width. The tap arrows were tried and dropped.
   ============================================================ */
/* 1. Homepage clients on a phone: the two lines of seven wrapped into rows of
   3, 3 and 1. One grid of two even columns instead, every logo in a cell of
   the same height, so the list reads as a list. */
@media (max-width:520px){
  .gf-strip .clients-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
  .gf-strip .clients-line { display:contents; }
  /* the logos are bare <img>s, so each image is its own cell: a fixed box,
     the mark contained inside it, the --s optical size kept through padding */
  .gf-strip .clients-line > img.client-logo-img { box-sizing:border-box; width:100%; height:84px; max-width:none; max-height:none; object-fit:contain; padding:calc(34px - 12px * var(--s)) 16%; background:#fff; }
}
/* 2. Services on a phone: the three families read as clearly different
   bands, as on desktop. */
@media (max-width:899px){
  .svc-band.light { background:#e9edf2; }
  .svc-band .head { border-top:4px solid var(--red); padding-top:18px; }
  .svc-band.navy .head { border-top-color:var(--sky); }
}
/* 3. The award photo whole on desktop too, at its own proportions, as it
   already shows on a phone. */
@media (min-width:900px){
  .svc3-photo { height:auto; }
  .svc3-photo img { position:static; height:auto; aspect-ratio:3/2; object-fit:cover; }
}
/* 5. About leadership on a phone: a full-width portrait, then role, name and
   the folding bio, instead of a thumbnail beside the text. */
@media (max-width:860px){
  .ab-lead { grid-template-columns:1fr; gap:16px; padding:28px 0; }
  .ab-lead .plate { aspect-ratio:1/1; width:100%; }
  .ab-lead .plate img { object-position:center 18%; }
}

/* Services, "Fewer gaps": the team photo beside the text (trial, 29 Sep 2026). */
.svc3-int-photo .wrap { display:grid; gap:clamp(32px,5vw,72px); align-items:stretch; }
@media (min-width:900px){ .svc3-int-photo .wrap { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
.svc3-int-img { aspect-ratio:4/3; box-shadow:none; }
@media (min-width:900px){ .svc3-int-img { aspect-ratio:auto; min-height:100%; } }
.svc3-int-body { display:grid; gap:28px; }
.svc3-int-body .list { margin-top:0; }

/* About values: the four blocks keep to the page's 1280 column instead of
   running to the screen edges (Sana, 29 Sep 2026). */
.ab-vblocks { width:calc(min(100%, 1280px) - 2 * var(--pad)); margin-inline:auto; }

/* About values (Sana, 29 Sep 2026): one patterned band, full bleed. The
   title holds still on the left while the three value cards scroll past it
   on the right, as the phone version did. Text keeps to the page column. */
.ab-vblocks {
  width:auto; margin-inline:0; margin-bottom:0;
  background:var(--paper-2) url("assets/pattern-connection-white-tile.png") left center / auto clamp(56px,7vw,110px) repeat;
  padding:clamp(56px,7vw,110px) max(var(--pad), calc((100% - 1280px) / 2 + var(--pad)));
  grid-template-columns:minmax(0,1fr); grid-auto-rows:auto; gap:clamp(12px,1.4vw,20px);
}
.ab-vblocks > div, .ab-vblocks > div:nth-child(odd), .ab-vblocks > div:nth-child(even), .ab-vblocks > div:nth-child(n+3) {
  grid-template-columns:minmax(0,1fr); justify-content:stretch; align-content:center; text-align:left;
  padding:clamp(32px,3.4vw,56px); min-height:0;
}
.ab-vblocks > div p, .ab-vblocks > div:nth-child(odd) p { margin-inline:0; }
.ab-vblocks > .w { background:none; padding:0; }
.ab-vblocks h3 { font-size:clamp(30px,3vw,48px); }
/* On the grey pattern the grey card vanished: it is white here. */
.ab-vblocks .g { background:#fff; }
@media (min-width:760px){
  .ab-vblocks .w h2 { font-size:clamp(30px,3.1vw,50px); }
  .ab-vblocks { grid-template-columns:minmax(0,2fr) minmax(0,3fr); column-gap:clamp(32px,5vw,80px); }
  .ab-vblocks > div.w { grid-column:1; grid-row:1 / span 3; align-content:start; }
  .ab-vblocks .w h2 { position:sticky; top:calc(50vh - 1.2em); }
  .ab-vblocks > div.n, .ab-vblocks > div.r, .ab-vblocks > div.g { grid-column:2; min-height:min(38vh,340px); }
}
@media (max-width:759px){
  .ab-vblocks > div.w { grid-column:1; grid-row:1; padding-bottom:8px; }
  .ab-vblocks .w h2 { position:static; }
  .ab-vblocks > div.n, .ab-vblocks > div.r, .ab-vblocks > div.g { grid-column:1; min-height:0; }
  .ab-vblocks > div.n { grid-row:2; } .ab-vblocks > div.r { grid-row:3; } .ab-vblocks > div.g { grid-row:4; }
}
/* Small cards, text centred (Sana, 29 Sep 2026). */
.ab-vblocks > div.n, .ab-vblocks > div.r, .ab-vblocks > div.g {
  width:min(100%, 420px); justify-self:center; min-height:0; padding:clamp(24px,2.4vw,36px);
  text-align:center; justify-items:center;
}
.ab-vblocks > div.n p, .ab-vblocks > div.r p, .ab-vblocks > div.g p { margin-inline:auto; font-size:16px; }
.ab-vblocks .n h3, .ab-vblocks .r h3, .ab-vblocks .g h3 { font-size:clamp(26px,2.2vw,34px); }
/* The title holds still, centred beside the cards (Sana, 29 Sep 2026). */
@media (min-width:760px){
  .ab-vblocks .w h2 { position:static; }
  .ab-vblocks > div.w { align-content:center; text-align:center; }
}
@media (min-width:760px){
  .ab-vblocks > div.w { text-align:left; }
  .ab-vblocks .w h2 { font-size:clamp(28px,3.8vw,50px); white-space:nowrap; }
}
/* A shorter patterned band (Sana, 29 Sep 2026). */
.ab-vblocks { padding-block:clamp(32px,3.6vw,56px); gap:10px; }
/* Value cards (Sana, 29 Sep 2026): one rounded corner, a nod to the symbol,
   and the description only on hover where there is hover; on touch screens
   it stays visible. */
.ab-vblocks > div.n, .ab-vblocks > div.r, .ab-vblocks > div.g { border-radius:0 clamp(36px,3.6vw,56px) 0 0; }
@media (hover:hover){
  .ab-vblocks > div.n, .ab-vblocks > div.r, .ab-vblocks > div.g { gap:0; transition:gap .3s; }
  .ab-vblocks > div.n p, .ab-vblocks > div.r p, .ab-vblocks > div.g p {
    max-height:0; opacity:0; overflow:hidden; transition:max-height .35s ease, opacity .3s ease;
  }
  .ab-vblocks > div.n:hover, .ab-vblocks > div.r:hover, .ab-vblocks > div.g:hover { gap:14px; }
  .ab-vblocks > div.n:hover p, .ab-vblocks > div.r:hover p, .ab-vblocks > div.g:hover p { max-height:6em; opacity:1; }
}
/* Ambition in the brand sky blue, as on the numbers tile, so it stands off
   the white of the pattern (Sana, 29 Sep 2026). */
.ab-vblocks .g { background:var(--sky); }
.ab-vblocks .g h3 { color:var(--navy); }
.ab-vblocks .g p { color:var(--navy); }
/* About, Meet our people: a bigger photo, top and bottom level with the text
   beside it (Sana, 29 Sep 2026). */
@media (min-width:900px){
  .ab-people { grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); align-items:stretch; }
  .ab-people .ph { aspect-ratio:auto; min-height:100%; }
}
/* About, Leadership (Sana, 29 Sep 2026): the three side by side, portrait
   on top, so nobody scrolls through tall rows with space under the text.
   CSS only: the leaders' markup is baked from the CMS. */
@media (min-width:900px){
  .ab-inset:has(> .ab-lead) { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:clamp(24px,3vw,48px); align-items:start; }
  .ab-inset:has(> .ab-lead) > :not(.ab-lead) { grid-column:1 / -1; }
  .ab-inset > .ab-lead, .ab-inset > .ab-lead:last-of-type { grid-template-columns:minmax(0,1fr); gap:20px; padding:0; border:0; }
  .ab-inset > .ab-lead .plate { aspect-ratio:4/5; }
  .ab-inset > .ab-lead .plate img { object-position:center 20%; }
  .ab-inset > .ab-lead .who { gap:10px; max-width:none; }
  .ab-inset > .ab-lead h3 { font-size:clamp(20px,1.8vw,26px); }
  .ab-inset > .ab-lead .who > p:last-child { font-size:16px; line-height:1.6; }
}
/* About, How we work band: the paragraph in white, not sky (Sana, 29 Sep 2026). */
.ab-hwwband .ab-hwwgrid p { color:#fff; }
/* About: three archive photos as one band above the timeline, in black and
   white, kept small because they are print scans (Sana, 29 Sep 2026). */
.ab-archive { margin:0 0 clamp(24px,3vw,40px) 150px; }
.ab-archive .lbl { font-family:var(--head); font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--red); margin-bottom:14px; }
.ab-archive .row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.ab-archive img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; filter:grayscale(1) contrast(1.05); background:var(--paper-2); }
@media (max-width:900px){ .ab-archive { margin-left:0; } }
@media (max-width:560px){ .ab-archive .row { grid-template-columns:minmax(0,1fr); } }
/* About values on the same grid as the How we work band below: same left
   inset (the spine column), same two equal columns and gap, so the titles
   and the right-hand edges line up (Sana, 29 Sep 2026). */
@media (min-width:760px){
  .ab-vblocks {
    padding-left:calc(max(var(--pad), (100% - 1280px) / 2 + var(--pad)) + var(--spine-inset, 0px));
    grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:clamp(28px,4vw,72px);
  }
  .ab-vblocks > div.n, .ab-vblocks > div.r, .ab-vblocks > div.g { width:100%; justify-self:stretch; }
}
@media (min-width:760px){ .ab-vblocks > div.w { padding:0; } }
/* About bands: the right margin matches the left one, which is the page's
   spine inset (Sana, 29 Sep 2026). */
@media (min-width:760px){
  .ab-vblocks { padding-right:calc(max(var(--pad), (100% - 1280px) / 2 + var(--pad)) + var(--spine-inset, 0px)); }
  .ab-hwwgrid { padding-right:var(--spine-inset, 0px); }
}
/* Footer: LinkedIn only, as its icon (Sana, 29 Sep 2026). */
.footer-line .footer-li { display:inline-flex; color:rgba(255,255,255,.7); }
.footer-line .footer-li:hover { color:#fff; }
.footer-line .footer-li::after { content:none !important; }
/* Services, Breadth list: navy and grey at rest (Sana, 29 Sep 2026); every
   sector turns red on hover (Sana, 1 Oct 2026). */
/* Alternating navy and brand grey, so no two neighbours share a colour
   (Sana, 1 Oct 2026). */
.svc3-breadth li:nth-child(n) { color:var(--navy); }
.svc3-breadth li:nth-child(2n) { color:var(--grey); }
.svc3-breadth li:nth-child(n):hover { color:var(--red); }

/* Services jump boxes: titles only, plainly clickable (Sana, 1 Oct 2026).
   The discipline lists and lines added 23 and 29 Sep repeated the detailed
   sections below, so they are gone. */
.svc-jump { grid-row:auto; grid-template-rows:none; display:flex; flex-direction:column; justify-content:space-between; gap:18px; cursor:pointer; }
.svc-jump b { align-self:auto; }
.svc-jump-go { font-style:normal; font-family:var(--head); font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--red); transition:color .25s, transform .25s; }
.svc-jump:hover .svc-jump-go, .svc-jump.on .svc-jump-go { color:#fff; transform:translateY(3px); }