/* ==========================================================================
   FLINTOU — Design system
   Palette: white FFFFFF | grey E9E7E4 | ink 0A0A0A | ember B84A2F (highlight only)
   ========================================================================== */

:root{
  --bone:      #FFFFFF;
  --bone-hi:   #FFFFFF;
  --stone:     #E9E7E4;
  --stone-lt:  #F3F2F0;
  --ink:       #0A0A0A;
  --ink-2:     #2E2E2A;
  --muted:     #6B665E;
  --line:      #E2DFDA;
  --ember:     #B84A2F;
  --ember-deep:#B84A2F;   /* the grey band is light enough for the true ember */

  --max: 1280px;
  --gut: clamp(20px, 5vw, 72px);
  --r: 2px;

  --f-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --step--1: clamp(.8125rem, .79rem + .12vw, .875rem);
  --step-0:  clamp(.9375rem, .91rem + .14vw, 1rem);
  --step-1:  clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  --step-2:  clamp(1.25rem, 1.13rem + .6vw, 1.625rem);
  --step-3:  clamp(1.625rem, 1.4rem + 1.1vw, 2.375rem);
  --step-4:  clamp(2.125rem, 1.6rem + 2.6vw, 4rem);
  --step-5:  clamp(2.75rem, 1.9rem + 4.4vw, 6rem);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-io: cubic-bezier(.65,.05,.36,1);

  /* per-section theme, overridden by section classes */
  --bg: var(--bone-hi);
  --fg: var(--ink);
  --fg-soft: var(--muted);
  --hair: var(--line);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:104px; }
body{
  margin:0;
  background:var(--bone-hi);
  color:var(--ink);
  font-family:var(--f-sans);
  font-size:var(--step-0);
  line-height:1.65;
  font-feature-settings:"kern","liga","cv05";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; }
::selection{ background:var(--ember); color:#fff; }

h1,h2,h3,h4{ margin:0; font-weight:500; line-height:1.06; letter-spacing:-.03em; }
h1{ font-size:var(--step-5); letter-spacing:-.045em; }
h2{ font-size:var(--step-3); letter-spacing:-.032em; }
h3{ font-size:var(--step-2); letter-spacing:-.022em; }
h4{ font-size:var(--step-1); letter-spacing:-.015em; }
p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }
strong{ font-weight:500; }

.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }
.lede{ font-size:var(--step-2); line-height:1.42; letter-spacing:-.02em; font-weight:400; }
.sub{ color:var(--fg-soft); }
.measure{ max-width:64ch; }
.measure-s{ max-width:50ch; }
.center{ text-align:center; margin-inline:auto; }
.ember{ color:var(--ember); }

/* ---------- section labels (enlarged per feedback, no dots) ---------- */
.eyebrow{
  display:block;
  font-size:clamp(.875rem, .82rem + .22vw, 1.0625rem);
  font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--fg-soft); margin:0 0 1.4rem;
}
.eyebrow .ember{ color:var(--ember); }

/* ==========================================================================
   Section themes
   ========================================================================== */
.section{ padding-block:clamp(3.75rem, 7vw, 7.5rem); background:var(--bg); color:var(--fg); position:relative; }
.section-sm{ padding-block:clamp(3rem, 6vw, 6rem); background:var(--bg); color:var(--fg); position:relative; }

.t-bone { --bg:var(--bone-hi); --fg:var(--ink);  --fg-soft:var(--muted);   --hair:var(--line); }
.t-sand { --bg:var(--bone);    --fg:var(--ink);  --fg-soft:var(--muted);   --hair:var(--line); }
.t-stone{ --bg:var(--stone);   --fg:#14130F;     --fg-soft:#4A463F;        --hair:#C4C0BB; }
.t-ink  { --bg:var(--ink);     --fg:#FFFFFF;     --fg-soft:#9C968C;        --hair:#242420; }

.t-ink h1,.t-ink h2,.t-ink h3,.t-ink h4{ color:#FFFFFF; }
.rule{ border:0; border-top:1px solid var(--hair); margin:0; }

.section-head{
  display:flex; flex-wrap:wrap; gap:1.5rem 4rem; align-items:flex-end; justify-content:space-between;
  margin-bottom:clamp(2.5rem,5vw,4.5rem);
}
.section-head > div{ max-width:62ch; }
.section-head > div.wide{ max-width:none; }

/* ==========================================================================
   Header / navigation
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:200;
  background:var(--stone);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), transform .45s var(--ease);
}
.site-header.is-stuck{ border-bottom-color:#C4C0BB; box-shadow:0 1px 20px -14px rgba(0,0,0,.45); }

/* ---------- home: the header floats over the hero photograph ----------
   It is taken out of flow so the image runs the full height behind it, and
   sits at 30% opacity (70% transparent) until you scroll away from the hero. */
.page-home .site-header{ position:fixed; left:0; right:0; top:0; }
.page-home .site-header:not(.is-stuck){
  background:transparent;
  border-bottom-color:transparent;
}
.page-home .site-header.is-stuck{ background:var(--stone); }

/* the photograph is pale, so the navigation keeps its normal dark type */

/* the hero starts under the fixed header and keeps its own breathing room */
.page-home .hero{ padding-top:calc(84px + clamp(2rem, 2.8vw, 3.5rem)); }
@media (max-width:900px){
  .page-home .hero{ padding-top:calc(72px + clamp(2rem, 6vw, 4rem)); }
  .hero-stage{ min-height:0; }
}
/* the header is fixed: it never slides away on scroll */

.nav{
  display:flex; align-items:center; gap:1.5rem;
  height:84px;
  width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut);
}
.brand{ display:flex; align-items:center; gap:.75rem; text-decoration:none; margin-right:auto; flex:none; }
.brand svg{ height:28px; width:auto; color:var(--ink); transition:transform .5s var(--ease); }
.brand:hover svg{ transform:translateY(-2px); }
.brand-name{ font-size:1rem; font-weight:500; letter-spacing:.5em; text-transform:uppercase; padding-left:.1em; }
.brand-name span{ display:inline-block; }
@keyframes letter-drop{
  from{ opacity:0; transform:translateY(-.75em); }
  to  { opacity:1; transform:none; }
}
.brand-name span{
  opacity:0;
  animation:letter-drop .5s var(--ease) forwards;
  animation-delay:calc(.12s + var(--i) * .06s);
}
@media (prefers-reduced-motion:reduce){
  .brand-name span{ opacity:1; animation:none; }
}

.nav-links{ display:flex; align-items:center; gap:1.4rem; list-style:none; margin:0; padding:0; }
.nav-links a{
  position:relative; text-decoration:none; font-size:var(--step--1); color:#1F1D19;
  padding:.4rem 0; transition:color .25s var(--ease); white-space:nowrap;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav-links a[aria-current="page"]{ color:var(--ink); }
.nav-links a[aria-current="page"]::after{ transform:scaleX(1); background:var(--ember); }

/* the two highlighted destinations that open in a new tab: orange text only */
.nav-links a.nav-hi{ color:var(--ember-deep); font-weight:500; }
.nav-links a.nav-hi::after{ background:var(--ember-deep); }
.nav-links a.nav-hi:hover{ color:var(--ember-deep); }

.nav-cta{
  display:inline-flex; align-items:center; gap:.5em; white-space:nowrap;
  font-size:var(--step--1); font-weight:500; text-decoration:none;
  color:#FFFFFF; background:var(--ember);
  padding:.62rem 1.15rem; border-radius:10px; position:relative;
  transition:background .35s var(--ease), transform .3s var(--ease);
}
.nav-cta:hover{ background:var(--ink); color:#FFFFFF; }
.nav-cta:active{ transform:translateY(1px); }
/* .nav-links a (0,2,0) would otherwise beat .nav-cta on colour */
.nav-links a.nav-cta{ color:#FFFFFF; padding:.62rem 1.15rem; }
.nav-links a.nav-cta:hover{ color:#FFFFFF; }
.nav-links a.nav-cta::after{ display:none; }
.nav-cta .arw{ transition:transform .35s var(--ease); }
.nav-cta:hover .arw{ transform:translateX(4px); }

.nav-search{
  width:38px; height:38px; flex:none; display:grid; place-items:center;
  border:1px solid #B3AEA8; border-radius:999px; background:transparent; cursor:pointer;
  color:#1F1D19; transition:all .3s var(--ease); padding:0;
}
.nav-search:hover{ border-color:var(--ink); color:var(--ink); }

.nav-toggle{
  display:none; width:42px; height:42px; margin-right:-8px;
  background:none; border:0; cursor:pointer; padding:0;
  align-items:center; justify-content:center; flex:none;
}
.nav-toggle span{ display:block; width:22px; height:1.5px; background:var(--ink); position:relative; transition:background .2s; }
.nav-toggle span::before,.nav-toggle span::after{
  content:""; position:absolute; left:0; width:22px; height:1.5px; background:var(--ink);
  transition:transform .35s var(--ease), top .3s var(--ease);
}
.nav-toggle span::before{ top:-7px; }
.nav-toggle span::after{ top:7px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

/* ---------- search panel ---------- */
.search-panel{
  position:fixed; inset:0; z-index:300;
  background:color-mix(in srgb, var(--ink) 92%, transparent);
  backdrop-filter:blur(8px);
  display:grid; place-items:start center; padding:clamp(4rem,12vh,9rem) var(--gut) 2rem;
  opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s;
}
.search-panel.is-open{ opacity:1; visibility:visible; }
.search-inner{ width:100%; max-width:720px; transform:translateY(-12px); transition:transform .45s var(--ease); }
.search-panel.is-open .search-inner{ transform:none; }
.search-field{ display:flex; align-items:center; gap:1rem; border-bottom:1px solid #3A3A34; padding-bottom:1rem; }
.search-field svg{ color:#7E786F; flex:none; }
.search-field input{
  flex:1; background:none; border:0; outline:none; color:#FFFFFF;
  font-family:inherit; font-size:clamp(1.25rem,3vw,1.75rem); letter-spacing:-.02em; padding:0;
}
.search-field input::placeholder{ color:#6B665E; }
.search-field input::-webkit-search-cancel-button,
.search-field input::-webkit-search-decoration{ -webkit-appearance:none; appearance:none; }
.search-close{
  background:none; border:0; color:#9C968C; cursor:pointer; font-family:inherit;
  font-size:var(--step--1); padding:.35rem .6rem; border-radius:var(--r);
}
.search-close:hover{ color:#FFFFFF; }
.search-results{ list-style:none; margin:1.75rem 0 0; padding:0; display:grid; gap:1px; max-height:52vh; overflow:auto; }
.search-results li a{
  display:block; padding:1rem 1.1rem; text-decoration:none; border-radius:var(--r);
  transition:background .2s var(--ease);
}
.search-results li a:hover,.search-results li a:focus-visible{ background:#1A1A17; outline:none; }
.search-results .r-title{ color:#FFFFFF; font-size:var(--step-0); display:block; }
.search-results .r-meta{ color:#7E786F; font-size:.8125rem; }
.search-results .r-meta .ember{ color:var(--ember); }
.search-empty{ color:#7E786F; font-size:var(--step--1); padding:1rem 1.1rem; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  --pad:.95rem 1.7rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:var(--pad); border-radius:12px; border:1px solid var(--fg);
  background:transparent; color:var(--fg); text-decoration:none;
  font-size:var(--step--1); font-weight:500; letter-spacing:.01em;
  cursor:pointer; font-family:inherit; position:relative; overflow:hidden;
  transition:color .35s var(--ease), border-color .35s var(--ease), transform .3s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:0; background:var(--ember); z-index:-1;
  transform:translateY(101%); transition:transform .45s var(--ease-io);
}
.btn > *{ position:relative; z-index:1; }
.btn:hover{ color:#fff; border-color:var(--ember); }
.btn:hover::before{ transform:translateY(0); }
.btn:active{ transform:translateY(1px); }
.btn .arw{ transition:transform .35s var(--ease); }
.btn:hover .arw{ transform:translateX(4px); }
.btn-solid{ background:var(--ember); border-color:var(--ember); color:#fff; }
.btn-solid::before{ background:var(--ink); }
.btn-solid:hover{ border-color:var(--ink); color:#fff; }
.btn-lg{ --pad:1.1rem 2.1rem; font-size:var(--step-0); }
.hero .btn-lg{ --pad:.95rem 1.85rem; }

.link-arrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:var(--step--1); font-weight:500; text-decoration:none;
  border-bottom:1px solid currentColor; padding-bottom:.3rem;
  transition:color .3s var(--ease), gap .3s var(--ease);
}
.link-arrow:hover{ color:var(--ember); gap:.9em; }

/* jump buttons under page heroes */
.jump{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.5rem; }

/* ==========================================================================
   Hero
   ========================================================================== */
/* ---------- the photographic stage ----------
   The header, the hero and the services bar all sit on one image. The stage
   is as tall as the picture's own aspect ratio, so nothing is cropped away. */
.hero-stage{
  position:relative; isolation:isolate;
  min-height:calc(100vw * 941 / 1672);
  display:flex; flex-direction:column;
  background:#EFEFEF url("hero-aec.jpg") center/cover no-repeat;
}
/* the render is a light studio shot, so the scrim lifts the left-hand side
   where the copy sits rather than darkening the whole frame */
.hero-stage::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.74) 38%, rgba(255,255,255,.26) 62%, rgba(255,255,255,0) 85%);
}
.hero-stage::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(255,255,255,.16);
}
.hero{
  position:relative; flex:1 1 auto;
  display:flex; align-items:center;
  padding-block:clamp(4.5rem, 10vw, 9rem) clamp(4rem, 8vw, 7rem);
  text-align:left; background:none;
}
/* the hero copy starts at the page gutter rather than the centred 1280
   column, so the logo, headline, description and buttons all share one edge */
.hero > .wrap{ width:100%; max-width:none; }
/* the stage sits on a pale ground, so type on it runs dark */
.hero,
.hero-stage .marquee{ --bg:transparent; --fg:var(--ink); --fg-soft:#4A463F; --hair:rgba(10,10,10,.16); }
.hero-stage .marquee{
  /* a light wash keeps the service names legible where the scanner and its
     tripod cross the band, without hiding the photograph behind it */
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  border-block-color:rgba(10,10,10,.14);
}
.hero-stage .marquee-item a{ color:var(--ink); }
.hero-stage .marquee-item a:hover{ color:var(--ember); }
.hero h1{ color:var(--fg); }
.hero .lede{ color:var(--fg-soft); }
.hero .ember{ color:var(--ember); }
.hero .btn{ color:var(--ink); border-color:rgba(10,10,10,.42); }
.hero .btn:hover{ color:#FFFFFF; border-color:var(--ember); }
.hero .btn-solid{ background:var(--ember); border-color:var(--ember); color:#FFFFFF; }
.hero-head{
  display:flex; align-items:center; justify-content:flex-start;
  gap:clamp(.9rem,2vw,1.9rem); margin-bottom:clamp(1.6rem,3vw,2.5rem);
}
.hero-logo{ flex:none; }
.hero-logo svg{ height:clamp(54px,6.4vw,88px); width:auto; color:var(--ink); }
.hero h1{
  font-size:clamp(2rem, 5.4vw, 4.5rem); letter-spacing:-.045em; line-height:1.02;
  margin:0; white-space:nowrap;
}
.hero .lede{
  max-width:60ch; margin-inline:0; text-align:left; text-wrap:pretty;
  /* the display type runs ~68px here; the lede sits a clear step below it
     so the four lines read as supporting copy rather than a second headline */
  font-size:clamp(1.0625rem, .96rem + .44vw, 1.3125rem);
  line-height:1.62; letter-spacing:-.012em;
}
/* the first line ends at "projects work."; the rest flows into three more */
.hero .lede{ text-wrap:wrap; }
@media (max-width:900px){ .lede-br{ display:none; } }
.hero-actions{ display:flex; flex-wrap:wrap; justify-content:flex-start; gap:.85rem; margin-top:clamp(2rem,3.6vw,3rem); }

/* page hero (inner pages) */
.page-hero{ padding-block:clamp(3.5rem,8vw,7rem) clamp(2.5rem,5vw,4.5rem); }
.page-hero h1{ font-size:var(--step-4); max-width:20ch; }
.page-hero .eyebrow{ margin-bottom:1.1rem; }
.page-hero h1.ds-head{ font-size:var(--step-3); max-width:none; }
.page-hero .lede{ margin-top:1.6rem; }

/* ---------- animated services bar (marquee) ---------- */
.marquee{
  --speed:38s;
  overflow:hidden; position:relative;
  background:var(--bg); color:var(--fg);
  border-block:1px solid var(--hair);
  padding-block:clamp(.85rem,1.4vw,1.15rem);
  user-select:none;
}
.marquee::before,.marquee::after{
  content:""; position:absolute; top:0; bottom:0; width:clamp(32px,7vw,120px); z-index:2; pointer-events:none;
}
.marquee::before{ left:0;  background:linear-gradient(90deg, var(--bg), transparent); }
.marquee::after{  right:0; background:linear-gradient(270deg, var(--bg), transparent); }
.marquee-track{ display:flex; width:max-content; animation:slide var(--speed) linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-group{ display:flex; align-items:center; flex:none; }
.marquee-item{
  display:inline-flex; align-items:center;
  padding-inline:clamp(1.25rem,2.6vw,2.75rem);
  font-size:clamp(.9375rem,1.5vw,1.25rem); font-weight:500; letter-spacing:-.015em;
  color:var(--fg); white-space:nowrap;
}

.marquee-item a{ text-decoration:none; transition:color .3s var(--ease); }
.marquee-item a:hover{ color:var(--ember); }
@keyframes slide{ from{ transform:translate3d(0,0,0);} to{ transform:translate3d(-50%,0,0);} }

/* ---------- stats ---------- */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:clamp(1.5rem,4vw,4rem); text-align:center; }
.stat .num{
  font-size:clamp(2.125rem,4.4vw,3.5rem); font-weight:500; letter-spacing:-.045em; line-height:1;
  display:block; font-variant-numeric:tabular-nums;
}
.stat .lbl{
  display:block; margin-top:.85rem; font-size:var(--step--1);
  letter-spacing:.14em; text-transform:uppercase; color:var(--fg-soft);
}

/* ==========================================================================
   Grids and cards
   ========================================================================== */
.grid{ display:grid; gap:1px; background:var(--hair); border-block:1px solid var(--hair); }
.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid > .cell{ background:var(--bg); padding:clamp(1.75rem,3vw,2.75rem); position:relative; transition:background .4s var(--ease); }
.grid > .cell:hover{ background:color-mix(in srgb, var(--fg) 4%, var(--bg)); }
.cell h3{ font-size:var(--step-1); margin-bottom:.8rem; }
.cell p{ color:var(--fg-soft); font-size:var(--step--1); line-height:1.72; }
.cell-mark{ display:block; width:18px; height:1px; background:var(--ember); margin-bottom:1.6rem; transition:width .45s var(--ease); }
.grid > .cell:hover .cell-mark{ width:44px; }

.cards{ display:grid; gap:clamp(1rem,2vw,1.5rem); }
.cards-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.cards-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.card{
  background:color-mix(in srgb, var(--fg) 3%, var(--bg));
  border:1px solid var(--hair); border-radius:var(--r);
  padding:clamp(1.6rem,2.6vw,2.4rem);
  display:flex; flex-direction:column; gap:.9rem;
  transition:border-color .35s var(--ease), transform .35s var(--ease), background .35s var(--ease);
}
.card:hover{ border-color:var(--ember); transform:translateY(-3px); }
.card h3{ font-size:var(--step-1); }
.card p{ color:var(--fg-soft); font-size:var(--step--1); line-height:1.72; }
.card .link-arrow{ margin-top:auto; padding-top:1.1rem; align-self:flex-start; border-bottom-color:var(--hair); }
.card .kicker{ font-size:var(--step--1); letter-spacing:.14em; text-transform:uppercase; color:var(--ember); }

.lead-block{ max-width:78ch; }
.lead-block.is-wide{ max-width:none; }
/* two even prose columns that fill the full content width */
.prose-2{ display:grid; grid-template-columns:1fr; gap:1.15em; }
.lead-block .prose-2 > p{ margin:0; max-width:none; line-height:1.85; }
.lead-block h2{ margin-bottom:clamp(1.25rem,2.4vw,2rem); }
.lead-block .lede{ margin-bottom:1.1em; }
.lead-block .sub{ max-width:74ch; }


/* numbered-free service list */
.svc-list{ border-top:1px solid var(--hair); }
.svc{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);
  gap:clamp(1rem,3vw,4rem);
  padding-block:clamp(2rem,3.6vw,3.25rem);
  border-bottom:1px solid var(--hair);
  align-items:start;
  transition:padding-left .45s var(--ease);
}
.svc:hover{ padding-left:clamp(0px,1.2vw,18px); }
.svc h3{ font-size:var(--step-3); }
.svc-body{ color:var(--fg-soft); }

/* steps */
.steps{ display:grid; gap:1px; background:var(--hair); border-block:1px solid var(--hair); grid-template-columns:repeat(4,minmax(0,1fr)); }
.step{ background:var(--bg); padding:clamp(1.6rem,2.6vw,2.4rem); }
.step .cell-mark{ margin-bottom:1.3rem; }
.step p{ font-size:var(--step-0); color:var(--fg); margin:0; }

/* tags */
.tags{ display:flex; flex-wrap:wrap; gap:.55rem; list-style:none; margin:0; padding:0; }
.tags li{
  font-size:var(--step--1); color:var(--fg);
  border:1px solid var(--hair); border-radius:999px; padding:.45rem 1.1rem;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.tags li:hover{ border-color:var(--ember); color:var(--ember); }

.split{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(2rem,5vw,5rem); align-items:start; }
.split-sticky{ position:sticky; top:120px; }

.band{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:2rem; padding:clamp(2rem,4vw,3.25rem);
  border:1px solid var(--hair); border-radius:var(--r);
}
.band h3{ max-width:28ch; }

/* ==========================================================================
   Partners slider
   ========================================================================== */
.pslider{ display:grid; gap:clamp(.75rem,1.5vw,1.25rem); }
.prow{ --speed:60s; overflow:hidden; position:relative; }
.prow-track{ display:flex; width:max-content; animation:slide var(--speed) linear infinite; }
.prow-rev .prow-track{ animation-direction:reverse; }
.prow:hover .prow-track{ animation-play-state:paused; }
.prow-group{ display:flex; flex:none; }
.plogo{
  flex:none; display:grid; place-items:center;
  min-width:clamp(150px,16vw,215px); height:clamp(72px,8vw,104px);
  margin-inline:clamp(.25rem,.7vw,.6rem);
  padding:.75rem 1rem; text-align:center;
  color:var(--fg); opacity:.62;
  transition:opacity .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.plogo:hover{ opacity:1; color:var(--ember); transform:translateY(-2px); }
.plogo img{ max-height:52%; width:auto; object-fit:contain; }

/* typographic wordmarks: each brand gets its own treatment so the wall
   reads as a set of marks rather than a list of names */
.plogo .wm{ display:block; line-height:1.1; white-space:nowrap; }
.wm-a{ text-transform:uppercase; font-weight:600; letter-spacing:-.02em; font-size:clamp(.95rem,1.35vw,1.2rem); }
.wm-b{ text-transform:uppercase; font-weight:400; letter-spacing:.2em;  font-size:clamp(.7rem,1vw,.875rem); }
.wm-c{ font-weight:600; letter-spacing:-.035em; font-size:clamp(1rem,1.5vw,1.35rem); }
.wm-d{ font-weight:400; letter-spacing:-.005em; font-size:clamp(.9rem,1.3vw,1.15rem); }
.wm-e{ text-transform:uppercase; font-weight:700; letter-spacing:.06em; font-size:clamp(.85rem,1.2vw,1.05rem); }
.wm-f{ text-transform:lowercase; font-weight:500; letter-spacing:-.045em; font-size:clamp(1.05rem,1.6vw,1.45rem); }
.plogo .wm-sm{ display:block; font-size:.58em; font-weight:400; letter-spacing:.16em;
  text-transform:uppercase; opacity:.72; margin-top:.42em; }

.pfade{ position:relative; }
.pfade::before,.pfade::after{
  content:""; position:absolute; top:0; bottom:0; width:clamp(40px,8vw,140px); z-index:2; pointer-events:none;
}
.pfade::before{ left:0;  background:linear-gradient(90deg, var(--bg), transparent); }
.pfade::after{  right:0; background:linear-gradient(270deg, var(--bg), transparent); }

/* ==========================================================================
   Forms
   ========================================================================== */
.form{ display:grid; gap:clamp(1.75rem,3vw,2.5rem); }
.fieldset{ border:0; margin:0; padding:0; }
.fieldset > legend{
  font-size:clamp(.875rem,.82rem + .22vw,1.0625rem); font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--fg-soft);
  padding:0 0 1.25rem; width:100%; border-bottom:1px solid var(--hair); margin-bottom:1.9rem;
}
.field-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.3rem 1.6rem; }
.field{ display:flex; flex-direction:column; gap:.5rem; }
.field-full{ grid-column:1 / -1; }
.field label,.field .lbl{ font-size:var(--step--1); font-weight:500; color:var(--fg); }
.field .hint{ font-size:.8125rem; color:var(--fg-soft); font-weight:400; }
.field input[type=text],.field input[type=email],.field input[type=tel],.field input[type=url],
.field input[type=number],.field input[type=date],.field select,.field textarea{
  font-family:inherit; font-size:var(--step-0); color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:.85rem 1rem; width:100%;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field textarea{ min-height:150px; resize:vertical; line-height:1.6; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--ember); box-shadow:0 0 0 3px color-mix(in srgb, var(--ember) 14%, transparent);
}
.field input[type=file]{ font-size:var(--step--1); color:var(--fg-soft); }
.field input[type=file]::file-selector-button{
  font-family:inherit; font-size:var(--step--1); margin-right:1rem; cursor:pointer;
  border:1px solid var(--line); background:#fff; color:var(--ink);
  padding:.6rem 1rem; border-radius:var(--r);
}
.choices{ display:flex; flex-wrap:wrap; gap:.55rem; }
.choice{ position:relative; }
.choice input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.choice span{
  display:block; font-size:var(--step--1); color:var(--fg);
  border:1px solid var(--line); border-radius:999px; padding:.5rem 1.15rem;
  background:#fff; cursor:pointer; transition:all .25s var(--ease);
}
.choice input:checked + span{ background:var(--ember); border-color:var(--ember); color:#fff; }
.choice input:focus-visible + span{ box-shadow:0 0 0 3px color-mix(in srgb, var(--ember) 20%, transparent); }
.choice-group{ display:grid; gap:1.4rem; }
.choice-group h4{ font-size:var(--step--1); font-weight:500; color:var(--fg-soft); letter-spacing:.02em; margin-bottom:.7rem; }
.consent{ display:flex; gap:.8rem; align-items:flex-start; font-size:var(--step--1); color:var(--fg-soft); }
.consent input{ margin-top:.35rem; accent-color:var(--ember); width:16px; height:16px; flex:none; }
.form-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem; }
.form-note{ font-size:.8125rem; color:var(--fg-soft); }
.form-status{
  display:none; font-size:var(--step--1); padding:1rem 1.25rem; border-radius:var(--r);
  background:color-mix(in srgb, var(--ember) 9%, transparent);
  border:1px solid color-mix(in srgb, var(--ember) 30%, transparent); color:#8A2C08;
}
.form-status.is-visible{ display:block; }
.form-status.is-ok{
  background:color-mix(in srgb, #1E7A4C 9%, transparent);
  border-color:color-mix(in srgb, #1E7A4C 32%, transparent); color:#14603A;
}
.btn:disabled{ opacity:.55; cursor:progress; }

/* ==========================================================================
   CTA + footer
   ========================================================================== */
.cta{ background:var(--ink); color:#FFFFFF; }
.cta .wrap{ padding-block:clamp(4.5rem,9vw,8rem); text-align:center; }
.cta h2{ max-width:16ch; margin-inline:auto; color:#FFFFFF; }
.cta p{ color:#9C968C; margin-top:1.4rem; }
.cta .btn-wrap{ margin-top:2.75rem; display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; }
.cta .btn{ border-color:#4A4A44; color:#FFFFFF; }
.cta .btn:hover{ border-color:var(--ember); color:#fff; }

/* footer links that carry a small icon, e.g. LinkedIn */
.footer-col a.with-ico{ display:inline-flex; align-items:center; gap:.5em; }
.footer-col a.with-ico .ico{ width:1em; height:1em; flex:none; opacity:.85; }
.footer-col a.with-ico:hover .ico{ opacity:1; }

.site-footer{ background:var(--ink); color:#9C968C; padding-block:clamp(3.5rem,6vw,5.5rem) 2rem; border-top:1px solid #1E1E1B; }
.footer-top{ display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)); gap:2.5rem 3rem; padding-bottom:3.5rem; }
.footer-lockup{ display:flex; align-items:center; gap:.9rem; margin-bottom:1.1rem; }
.footer-brand svg{ height:30px; width:auto; color:#FFFFFF; flex:none; }
.footer-lockup .footer-tag{ margin:0; }
.footer-brand p{ color:#7E786F; font-size:var(--step--1); max-width:34ch; }
.footer-tag{ color:#FFFFFF; font-size:var(--step--1); letter-spacing:.2em; text-transform:uppercase; }
.footer-col h4{ font-size:var(--step--1); letter-spacing:.16em; text-transform:uppercase; color:#6B665E; margin-bottom:1.3rem; font-weight:500; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.75rem; }
.footer-col a{ text-decoration:none; font-size:var(--step--1); color:#B8B2A8; transition:color .25s var(--ease); }
.footer-col a:hover{ color:var(--ember); }
.footer-bottom{
  display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between;
  border-top:1px solid #1E1E1B; padding-top:2rem; font-size:.8125rem; color:#6B665E;
}

/* ==========================================================================
   Motion
   ========================================================================== */
.reveal-ready [data-reveal]{
  opacity:0; transform:translateY(20px);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.reveal-ready [data-reveal].is-in{ opacity:1; transform:none; }

/* line-by-line heading reveal */
.rise{ display:block; padding-bottom:.14em; margin-bottom:-.14em; }
.reveal-ready .rise{ overflow:hidden; }
.reveal-ready .rise > span{
  display:block; transform:translateY(105%);
  transition:transform .7s var(--ease-io);
}
.reveal-ready .rise.is-in > span{ transform:none; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  .reveal-ready [data-reveal],.reveal-ready .rise > span{ opacity:1; transform:none; }
  .marquee-track,.prow-track{ animation:none !important; }
  html{ scroll-behavior:auto; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1180px){
  .nav-links{ gap:1.05rem; }
  .nav-links a{ font-size:.8125rem; }
}
@media (max-width:1040px){
  .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer-top{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px){
  .nav{ height:72px; gap:.75rem; }
  .nav-toggle{ display:flex; }
  .nav-links{
    position:fixed; inset:72px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--stone); border-bottom:1px solid #C4C0BB;
    padding:.5rem var(--gut) 2rem;
    max-height:0; overflow:hidden; visibility:hidden;
    transition:max-height .45s var(--ease), visibility .45s;
  }
  .nav-links.is-open{ max-height:calc(100vh - 72px); visibility:visible; overflow:auto; }
  .nav-links li{ border-bottom:1px solid #C4C0BB; }
  .nav-links li:last-child{ border-bottom:0; padding-top:1.1rem; }
  .nav-links a{ display:block; padding:1.05rem 0; font-size:var(--step-0); }
  .nav-links a::after{ display:none; }

  .nav-cta{ font-size:var(--step-0); }
  /* .nav-links a turns links into blocks on mobile; keep the CTA on one line */
  .nav-links a.nav-cta{ display:inline-flex; width:auto; }


  .grid-3,.grid-2,.cards-3,.cards-2{ grid-template-columns:1fr; }
  .svc{ grid-template-columns:1fr; gap:1rem; }
  .split{ grid-template-columns:1fr; }
  .split-sticky{ position:static; }
  .field-grid{ grid-template-columns:1fr; }
  .section-head{ align-items:flex-start; }
}
@media (max-width:560px){
  .hero h1{ white-space:normal; font-size:clamp(1.75rem,8.5vw,2.4rem); }
  .hero-logo svg{ height:46px; }
  .steps{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr; }
  .band{ flex-direction:column; align-items:flex-start; }
  .marquee{ --speed:26s; }
  .prow{ --speed:40s; }
  .plogo{ min-width:150px; height:76px; }
}

/* narrow screens crop into the building, so the hero copy needs a firmer
   ground than the wide left-to-right scrim gives it. */
@media (max-width:900px){
  .hero-stage::before{
    background:linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.84) 58%, rgba(255,255,255,.58) 100%);
  }
}


/* ==========================================================================
   Editorial system
   The shared language of large AEC practices (Arup, Foster + Partners,
   AECOM): numbered indexes rather than card grids, hairline structure,
   generous vertical rhythm, readable body copy and flat surfaces.
   ========================================================================== */

/* ---- rhythm: more air between sections, and between a head and its content */
.section{ padding-block:clamp(4.5rem, 9vw, 9.5rem); }
.section-sm{ padding-block:clamp(3.5rem, 7vw, 7rem); }
.section-head{ margin-bottom:clamp(3rem, 6vw, 5.5rem); }
/* a heading followed straight by its intro copy reads as one unit */
.section-head:has(+ .lead-block){ margin-bottom:clamp(1.75rem, 3vw, 2.75rem); }

/* where two white sections meet, a full-width hairline carries the structure */
.t-bone + .t-sand, .t-sand + .t-bone,
.t-bone + .t-bone, .t-sand + .t-sand{ border-top:1px solid var(--line); }

/* ---- section labels lead with a short ember rule */
.eyebrow{ display:flex; align-items:center; gap:.85rem; }
.eyebrow::before{ content:""; width:1.75rem; height:1px; background:var(--ember); flex:none; }

/* ---- body copy at a comfortable reading size */
.sub{ font-size:clamp(1rem, .96rem + .2vw, 1.0625rem); line-height:1.72; }
.cell p, .card p, .step p, .idx-desc, .idx-note p{
  font-size:clamp(.9375rem, .9rem + .15vw, 1rem); line-height:1.7;
}
.lede{ line-height:1.45; }

/* ---- inner page heroes: larger display type, deeper spacing */
.page-hero{ padding-block:clamp(4.5rem, 10vw, 8.5rem) clamp(3.5rem, 7vw, 6rem); }
.page-hero h1{ font-size:clamp(2.5rem, 1.6rem + 3.6vw, 5rem); max-width:none; }
.page-hero .lede{ margin-top:clamp(1.75rem, 3vw, 2.5rem); max-width:56ch; }

/* ---- numbered cells replace the small dash marker */
.grid, .steps{ counter-reset:item; }
.grid > .cell, .steps > .step{ counter-increment:item; }
.cell-mark{
  width:auto; height:auto; background:none; margin-bottom:1.75rem;
  font-size:var(--step--1); font-weight:500; letter-spacing:.08em;
  color:var(--ember); font-variant-numeric:tabular-nums; line-height:1;
}
.cell-mark::before{ content:counter(item, decimal-leading-zero); }
.grid > .cell:hover .cell-mark{ width:auto; }
.grid > .cell{ padding:clamp(2rem, 3.2vw, 3rem); }
.cell h4{ margin-bottom:.6rem; }

/* ---- cards become flat hairline panels */
.card{ background:transparent; }
.card:hover{ transform:none; border-color:var(--ember); }

/* ---- the numbered index: services as a typographic list */
.idx-list{ list-style:none; margin:0; padding:0; counter-reset:idx; border-bottom:1px solid var(--hair); }
/* an index that follows intro copy needs clear separation from it */
.lead-block + .idx-list,
.wrap + .wrap > .idx-list:first-child{ margin-top:clamp(3rem, 6vw, 5rem); }
.idx-row{ counter-increment:idx; border-top:1px solid var(--hair); }
.idx-row,
.idx-list--links .idx-link{
  display:grid; align-items:baseline;
  grid-template-columns:4.5rem minmax(0, 5fr) minmax(0, 6fr);
  column-gap:clamp(1.5rem, 3vw, 3rem);
  padding-block:clamp(1.75rem, 3.2vw, 2.75rem);
}
.idx-list--links .idx-row{ display:block; padding:0; }
.idx-list--links .idx-link{
  grid-template-columns:4.5rem minmax(0, 5fr) minmax(0, 6fr) 2.75rem;
  text-decoration:none; color:inherit;
}
.idx-num{
  font-size:var(--step--1); font-weight:500; letter-spacing:.08em;
  color:var(--ember); font-variant-numeric:tabular-nums;
}
.idx-num::before{ content:counter(idx, decimal-leading-zero); }
.idx-name{
  font-size:clamp(1.5rem, 1.2rem + 1.3vw, 2.375rem); font-weight:500;
  letter-spacing:-.03em; line-height:1.1; margin:0;
  transition:color .3s var(--ease);
}
.idx-desc{ color:var(--fg-soft); margin:0; max-width:54ch; }
.idx-go{
  justify-self:end; align-self:center;
  width:2.75rem; height:2.75rem; border-radius:50%;
  border:1px solid var(--hair); display:grid; place-items:center;
  transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.idx-go .arw{ transition:transform .3s var(--ease); }
.idx-link:hover .idx-name{ color:var(--ember); }
.idx-link:hover .idx-go{ background:var(--ember); border-color:var(--ember); color:#FFFFFF; }
.idx-link:hover .idx-go .arw{ transform:translateX(2px); }
.idx-link:focus-visible{ outline:2px solid var(--ember); outline-offset:4px; }

/* closing note under an index */
.idx-note{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1.5rem 3rem; margin-top:clamp(2.5rem, 5vw, 4rem);
  padding:clamp(1.75rem, 3vw, 2.5rem);
  border:1px solid var(--hair); border-radius:var(--r);
}
.idx-note h3{ font-size:var(--step-1); margin-bottom:.55rem; }
.idx-note p{ color:var(--fg-soft); margin:0; max-width:62ch; }

/* ---- key figures: larger, lighter numerals divided by hairlines */
.stats{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0; }
.stat{ padding-inline:1rem; }
.stat + .stat{ border-left:1px solid var(--hair); }
.stat .num{ font-size:clamp(2.75rem, 1.9rem + 3.4vw, 4.75rem); font-weight:400; letter-spacing:-.05em; }
.stat .lbl{ margin-top:1.1rem; }

/* ---- closing call to action: the page's last big statement */
.cta .wrap{ padding-block:clamp(5.5rem, 11vw, 10rem); }
.cta h2{ font-size:var(--step-4); max-width:18ch; }
.cta p{ max-width:58ch; margin-inline:auto; }

/* ---- footer: more room, larger links */
.site-footer{ padding-block:clamp(4.5rem, 8vw, 7rem) 2.25rem; }
.footer-top{ padding-bottom:clamp(3.5rem, 6vw, 5rem); }
.footer-col a{ font-size:clamp(.9375rem, .9rem + .15vw, 1rem); }
.footer-col ul{ gap:.9rem; }

@media (max-width:900px){
  .idx-row,
  .idx-list--links .idx-link{
    grid-template-columns:2.5rem minmax(0, 1fr);
    row-gap:.7rem; padding-block:1.6rem;
  }
  .idx-list--links .idx-link{ grid-template-columns:2.5rem minmax(0, 1fr) 2.5rem; }
  .idx-num{ grid-column:1; grid-row:1; }
  .idx-name{ grid-column:2; grid-row:1; }
  .idx-desc{ grid-column:2; grid-row:2; }
  .idx-go{ grid-column:3; grid-row:1 / span 2; width:2.5rem; height:2.5rem; }
}
@media (max-width:700px){
  .stats{ grid-template-columns:1fr; gap:0; }
  .stat{ padding-block:1.5rem; }
  .stat + .stat{ border-left:0; border-top:1px solid var(--hair); }
}

/* ===== Projects ===== */
.pj-jump{ display:flex; flex-wrap:wrap; gap:.5rem 1.75rem; margin-top:clamp(2rem,4vw,3rem); border-top:1px solid var(--hair); padding-top:1.25rem; }
.pj-jump a{ display:inline-flex; gap:.6rem; align-items:baseline; color:var(--fg); text-decoration:none; font-size:.95rem; transition:color .2s; }
.pj-jump a:hover{ color:var(--ember); }
.pj-no{ font-size:.75rem; letter-spacing:.2em; color:var(--ember); font-weight:500; font-variant-numeric:tabular-nums; }
.pj{ scroll-margin-top:5rem; }
.pj-grid{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(2rem,5vw,5rem); align-items:start; }
.pj--flip .pj-gallery{ order:2; }
.pj-gallery{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.pj-fig{ margin:0; position:relative; overflow:hidden; background:var(--hair); aspect-ratio:16/10; }
.pj-fig::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(10,10,10,.08); pointer-events:none; }
.pj-fig--main{ grid-column:1 / -1; aspect-ratio:16/10; }
.pj-fig img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.pj-fig:hover img{ transform:scale(1.03); }
.pj-fig figcaption{ position:absolute; left:0; right:0; bottom:0; padding:2rem .85rem .6rem; font-size:.72rem; line-height:1.4; color:#fff; background:linear-gradient(transparent,rgba(0,0,0,.6)); }
.pj-fig figcaption span{ display:block; opacity:.75; }
.pj-fig figcaption a{ color:inherit; }
.pj-text{ position:sticky; top:6.5rem; }
.pj-meta{ display:flex; flex-wrap:wrap; gap:.4rem 1.25rem; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-soft); margin:0 0 1.25rem; }
.pj-name{ font-size:clamp(1.9rem,1.3rem + 2vw,3rem); line-height:1.05; letter-spacing:-.025em; font-weight:400; margin:0 0 1.1rem; }
.pj-text .lede{ font-size:clamp(1.1rem,1rem + .4vw,1.3rem); margin:0 0 1.5rem; }
.pj-tags{ display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:1.5rem; }
.pj-tag{ border:1px solid var(--fg); border-radius:8px; padding:.3rem .7rem; font-size:.78rem; font-weight:500; }
.pj-tag--hi{ background:var(--ember); border-color:var(--ember); color:#fff; }
.pj-body p{ margin:0 0 .9rem; }
.pj-dl-h{ display:flex; align-items:center; gap:.85rem; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-soft); margin:1.75rem 0 .5rem; }
.pj-dl-h::before{ content:""; width:1.75rem; height:1px; background:var(--ember); }
.pj-dl{ list-style:none; margin:0; padding:0; border-top:1px solid var(--hair); }
.pj-dl li{ position:relative; padding:.7rem 0 .7rem 1.4rem; border-bottom:1px solid var(--hair); font-size:.95rem; }
.pj-dl li::before{ content:""; position:absolute; left:0; top:1.3rem; width:.6rem; height:1px; background:var(--ember); }
.pj-facts{ display:flex; flex-wrap:wrap; margin:2rem 0 0; }
.pj-facts div{ padding:0 1.5rem; border-left:1px solid var(--hair); }
.pj-facts div:first-child{ padding-left:0; border-left:0; }
.pj-facts dt{ font-size:clamp(1.5rem,1.2rem + 1vw,2.1rem); font-weight:300; letter-spacing:-.02em; line-height:1.1; }
.pj-facts dd{ margin:.3rem 0 0; font-size:.8rem; color:var(--fg-soft); }
.pj-credits .sub{ max-width:70ch; font-size:.85rem; color:var(--fg-soft); }
@media (max-width:900px){
  .pj-grid{ grid-template-columns:1fr; }
  .pj--flip .pj-gallery{ order:0; }
  .pj-text{ position:static; }
}
@media (max-width:520px){
  .pj-gallery{ gap:.5rem; }
  .pj-facts div{ padding:0 1rem; }
}
@media (max-width:640px){
  .pj-fig:not(.pj-fig--main) figcaption{ font-size:.6rem; padding:1.5rem .5rem .4rem; }
  .pj-fig:not(.pj-fig--main) figcaption > :not(span){ display:none; }
}
.pj-fig figcaption b{ font-weight:500; }

/* ---- home hero: rotating project imagery behind the same pale scrim */
.hero-stage{ background:#EFEFEF; min-height:calc(100vw * 9 / 16); }
.hero-slides{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.hero-slides span{
  position:absolute; inset:0; background-size:cover; background-position:62% 50%;
  opacity:0; animation:heroFade 21s infinite; transform:scale(1.04);
}
.hero-slides span:nth-child(1){ animation-delay:0s; background-position:58% 55%; }
.hero-slides span:nth-child(2){ animation-delay:7s; }
.hero-slides span:nth-child(3){ animation-delay:14s; background-position:60% 45%; }
@keyframes heroFade{
  0%{ opacity:0; transform:scale(1.04); }
  6%{ opacity:1; }
  33%{ opacity:1; }
  40%{ opacity:0; transform:scale(1); }
  100%{ opacity:0; }
}
.hero-slides span:nth-child(1){ opacity:1; } /* first frame shows before the animation starts */
@media (prefers-reduced-motion:reduce){
  .hero-slides span{ animation:none; transform:none; }
  .hero-slides span:not(:first-child){ display:none; }
}
@media (max-width:900px){ .hero-stage{ min-height:0; } }
/* keep the transparent navigation legible over darker frames */
.hero-stage::after{ background:linear-gradient(180deg, rgba(255,255,255,.82) 0, rgba(255,255,255,.5) 70px, rgba(255,255,255,0) 150px), rgba(255,255,255,.1); }

/* ==========================================================================
   Home hero on project photography
   Real photographs lose their colour under a white wash (warm renders turn
   pink), so the stage now uses a neutral charcoal scrim and light type, the
   way large practices present built work.
   ========================================================================== */
.hero-stage{ background:#15140F; }
.hero-stage::before{
  background:linear-gradient(90deg, rgba(12,12,10,.80) 0%, rgba(12,12,10,.62) 34%, rgba(12,12,10,.22) 62%, rgba(12,12,10,.08) 100%);
}
.hero-stage::after{
  background:linear-gradient(180deg, rgba(12,12,10,.55) 0, rgba(12,12,10,0) 170px),
             linear-gradient(0deg, rgba(12,12,10,.45) 0, rgba(12,12,10,0) 30%);
}
.hero,
.hero-stage .marquee{ --fg:#FFFFFF; --fg-soft:rgba(255,255,255,.84); --hair:rgba(255,255,255,.22); }
.hero-logo svg{ color:#FFFFFF; }
.hero .btn{ color:#FFFFFF; border-color:rgba(255,255,255,.6); background:transparent; }
.hero .btn:hover{ color:#FFFFFF; border-color:var(--ember); background:var(--ember); }
.hero .btn-solid{ background:var(--ember); border-color:var(--ember); color:#FFFFFF; }
.hero .ember{ color:#E2703F; }
.hero-stage .marquee{
  background:rgba(12,12,10,.42);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border-block-color:rgba(255,255,255,.14);
}
.hero-stage .marquee-item a{ color:rgba(255,255,255,.92); }
.hero-stage .marquee-item a:hover{ color:#E2703F; }
.hero-slides span{ filter:saturate(.92); }

/* the transparent header over the photograph runs light until it sticks */
.page-home .site-header:not(.is-stuck) .brand,
.page-home .site-header:not(.is-stuck) .brand svg{ color:#FFFFFF; }
.page-home .site-header:not(.is-stuck) .nav-search{ color:#FFFFFF; border-color:rgba(255,255,255,.55); }
.page-home .site-header:not(.is-stuck) .nav-toggle span,
.page-home .site-header:not(.is-stuck) .nav-toggle span::before,
.page-home .site-header:not(.is-stuck) .nav-toggle span::after{ background:#FFFFFF; }
@media (min-width:901px){
  .page-home .site-header:not(.is-stuck) .nav-links a{ color:rgba(255,255,255,.9); }
  .page-home .site-header:not(.is-stuck) .nav-links a:hover,
  .page-home .site-header:not(.is-stuck) .nav-links a[aria-current="page"]{ color:#FFFFFF; }
  .page-home .site-header:not(.is-stuck) .nav-links a::after{ background:#FFFFFF; }
  .page-home .site-header:not(.is-stuck) .nav-links a.nav-hi{ color:#FFFFFF; }
  .page-home .site-header:not(.is-stuck) .nav-links a.nav-cta{ color:#FFFFFF; }
}
@media (max-width:900px){
  .hero-stage::before{ background:linear-gradient(180deg, rgba(12,12,10,.72) 0%, rgba(12,12,10,.62) 60%, rgba(12,12,10,.5) 100%); }
}
/* the hero line is now a single sentence sitting directly above the buttons */
.hero .lede{ font-size:clamp(1.125rem, 1rem + .6vw, 1.5rem); line-height:1.4; }
.hero .hero-actions{ margin-top:clamp(1.25rem, 2.2vw, 1.9rem); }
/* hero: headline without the mark, sitting close above its one-line lede */
.hero-head{ gap:0; margin-bottom:clamp(.9rem, 1.4vw, 1.25rem); }

/* ---- company profile request (projects page) */
.pj-request{ margin-top:clamp(2rem, 3.5vw, 2.75rem); }
.pj-request > summary{ list-style:none; cursor:pointer; display:inline-flex; }
.pj-request > summary::-webkit-details-marker{ display:none; }
.pj-request[open] > summary .arw{ transform:rotate(90deg); }
.pj-request-panel{ margin-top:1.75rem; max-width:760px; padding:clamp(1.5rem,3vw,2.25rem); border:1px solid var(--hair); background:var(--bone); }
.pj-request-panel .sub{ margin:0 0 1.5rem; }

/* ---- every page: the header merges with the page at the top and turns
   solid once you scroll, exactly as on the home page */
.site-header{ transition:background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), transform .45s var(--ease); }
.site-header:not(.is-stuck){ background:transparent; border-bottom-color:transparent; box-shadow:none; }
.site-header.is-stuck{ background:var(--stone); }
@media (max-width:900px){
  /* keep the menu button readable when the mobile menu is open at the top */
  .site-header:has(.nav-links.is-open){ background:var(--stone); }
}

/* Digital Solutions and Technical Resources keep their orange on every page */
@media (min-width:901px){
  .page-home .site-header:not(.is-stuck) .nav-links a.nav-hi{ color:var(--ember); }
  .page-home .site-header:not(.is-stuck) .nav-links a.nav-hi::after{ background:var(--ember); }
}
/* hero copy and buttons sit toward the foot of the photograph, clear of the services band */
.hero{ align-items:flex-end; padding-bottom:clamp(2.75rem, 5vw, 4.5rem); }
.pj-jump > span{ display:inline-flex; gap:.6rem; align-items:baseline; font-size:.95rem; color:var(--fg); }
/* the projects page is now a single intro, so it closes straight into the CTA band */
.page-hero + .cta{ border-top:1px solid var(--line); }