/* ==========================================================================
   Factum Aerial — Design System
   Dark-first sibling of the Factum Investigations system: same type,
   spacing and components, inverted palette so aerial imagery sits on black.
   Wordmark colour rules are never overridden here — the white lockup is used
   as supplied on dark surfaces, the black lockup only on the light band.
   ========================================================================== */

/* Montserrat is self-hosted (SIL OFL, see assets/fonts/OFL.txt) so no request leaves the site. */
@font-face{
  font-family:'Montserrat'; font-style:normal; font-weight:300 600; font-display:swap;
  src:url('../fonts/montserrat-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  color-scheme: dark;
  /* ---- Colour tokens (dark, the only theme) ---- */
  --ink:        #F4F2EA;
  --ink-soft:   #C9C6BC;
  --ink-faint:  #8F8C83;
  --paper:      #0E0E0C;
  --paper-alt:  #151412;
  --surface:    #181714;
  --line:       #2B2A25;
  --line-strong:#3F3D35;
  --black:      #000000;
  --white:      #FFFFFF;
  --focus-ring: #F4F2EA;

  /* light band (inverted CTA + light photo captions) */
  --paper-light:     #FBFAF6;
  --paper-light-alt: #F1EEE6;
  --ink-dark:        #121210;
  --ink-dark-soft:   #514F48;
  --ink-dark-faint:  #7E7B72;
  --line-light:      #DDD9CC;

  /* ---- Type ---- */
  --font-display: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  /* ---- Spacing (8pt rhythm) ---- */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4rem;
  --sp-7: 6rem;
  --sp-8: 8rem;

  /* ---- Layout ---- */
  --container: 1240px;
  --container-narrow: 780px;
  --radius: 2px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.16,.8,.3,1);
  --ease-draw: cubic-bezier(.4,0,.2,1);
  --dur-fast: 180ms;
  --dur-med: 420ms;
  --dur-slow: 700ms;
  --dur-reveal: 900ms;
}

/* ---- Reset ---- */
*,*::before,*::after{ box-sizing: border-box; }
/* overflow-x on <html> only: putting it on <body> turns body into a scroll
   container and silently breaks position:sticky on the header. */
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; background: var(--paper); }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img,svg{ display:block; max-width:100%; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,figure{ margin:0; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input,textarea,select{ font: inherit; color: inherit; }

::selection{ background: var(--ink); color: var(--paper); }

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

.icon{ width:1em; height:1em; flex-shrink:0; }

/* ---- Typography ---- */
.eyebrow{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display:flex;
  align-items:center;
  gap: var(--sp-2);
}
.eyebrow::before{
  content:'';
  width: 28px;
  height: 1px;
  background: var(--line-strong);
  flex-shrink:0;
  transform-origin: left;
  transition: transform var(--dur-reveal) var(--ease-draw) 120ms;
}
/* the eyebrow hairline draws in with its section */
.js [data-reveal]:not(.is-visible) .eyebrow::before{ transform: scaleX(0); }
h1,.h1{
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.08;
  font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.4rem);
  text-wrap: balance;
}
h2,.h2{
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.005em;
  line-height: 1.15;
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.85rem);
  text-wrap: balance;
}
h3,.h3{
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.3;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
}
.lede{
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  color: var(--ink-soft);
  line-height: 1.7;
  max-width: 46ch;
}
.text-muted{ color: var(--ink-soft); }
.text-faint{ color: var(--ink-faint); }
.breadcrumb{ font-size:0.85rem; }
p + p{ margin-top: var(--sp-2); }
.prose p{ color: var(--ink-soft); }
.prose p + p{ margin-top: var(--sp-3); }
.prose h2{ margin-top: var(--sp-6); margin-bottom: var(--sp-3); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.prose h2:first-child{ margin-top:0; }
.prose ul{ margin-top: var(--sp-2); padding-left: 1.2em; list-style: disc; color: var(--ink-soft); }
.prose li + li{ margin-top: 0.4em; }

/* ---- Layout helpers ---- */
.container{ width:100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-3); }
.container-narrow{ width:100%; max-width: var(--container-narrow); margin:0 auto; padding: 0 var(--sp-3); }
.section{ padding: var(--sp-8) 0; }
@media (max-width: 720px){ .section{ padding: var(--sp-6) 0; } }
.section-alt{ background: var(--paper-alt); }
.section-black{ background: var(--black); color: var(--white); }
/* The light band: the one place the site goes paper-white (CTA band). */
.section-invert{ background: var(--paper-light); color: var(--ink-dark); }
.section-invert .eyebrow{ color: var(--ink-dark-faint); }
.section-invert .lede, .section-invert .text-muted{ color: var(--ink-dark-soft); }
.section-invert ::selection{ background: var(--ink-dark); color: var(--paper-light); }
.section-head{ max-width: 640px; margin-bottom: var(--sp-6); }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head > .eyebrow{ margin-bottom: var(--sp-2); }
.section-head.center > .eyebrow{ justify-content:center; }
.section-head.center > .eyebrow::before,
.section-black .eyebrow::before,
.section-invert .eyebrow.center::before{ display:none; }
.section-head h2{ margin-top: var(--sp-2); }

/* Grid/flex items default to min-width:auto, which lets unbreakable content
   stretch a track past the viewport. Force them shrinkable. */
.grid > *, .hero-grid > *, .contact-grid > *, .service-detail > *, .steps > *,
.footer-top > *, .cta-row > *, .header-inner > *, .hero-trust > *, .nav-primary,
.header-actions > *, .gallery > *{ min-width: 0; }

.grid{ display:grid; gap: var(--sp-5); }
.grid-2{ grid-template-columns: repeat(2,1fr); }
.grid-3{ grid-template-columns: repeat(3,1fr); }
.grid-4{ grid-template-columns: repeat(4,1fr); }
@media (max-width: 980px){ .grid-4{ grid-template-columns: repeat(2,1fr); } .grid-3{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 620px){ .grid-2,.grid-3,.grid-4{ grid-template-columns: 1fr; } }

.hr{ height:1px; background: var(--line); border:0; width:100%; }

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap: 0.6em;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1.05em 1.9em;
  border-radius: var(--radius);
  border: 1px solid var(--ink);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  text-align: center;
  touch-action: manipulation;
}
.btn:active{ transform: scale(0.97); }
.btn-primary{ background: var(--ink); color: var(--paper); }
.btn-primary:hover{ background: transparent; color: var(--ink); }
.btn-ghost{ background: transparent; color: var(--ink); border-color: rgba(244,242,234,0.45); }
.btn-ghost:hover{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
.section-invert .btn{ border-color: var(--ink-dark); }
.section-invert .btn-primary{ background: var(--ink-dark); color: var(--paper-light); }
.section-invert .btn-primary:hover{ background: transparent; color: var(--ink-dark); }
.section-invert .btn-ghost{ color: var(--ink-dark); border-color: rgba(18,18,16,0.4); }
.section-invert .btn-ghost:hover{ background: var(--ink-dark); color: var(--paper-light); border-color: var(--ink-dark); }
.btn .icon{ transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover .icon{ transform: translateX(3px); }

.cta-row{ display:flex; gap: var(--sp-3); flex-wrap:wrap; align-items:center; }

/* ---- Header ---- */
.site-header{
  position: sticky; top:0; z-index: 100;
  border-bottom: 1px solid transparent;
  background: rgba(14,14,12,0.84);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.site-header.is-scrolled{ border-bottom-color: var(--line); }
/* Wordmark centred on its own row, nav row beneath it. Header compacts once scrolled. */
.header-inner{
  display:grid; grid-template-columns: 1fr auto 1fr; align-items:center;
  row-gap: var(--sp-2); padding-top: var(--sp-3); padding-bottom: var(--sp-2);
  transition: padding var(--dur-med) var(--ease-out), row-gap var(--dur-med) var(--ease-out);
}
.brand{ grid-column:2; grid-row:1; justify-self:center; display:flex; align-items:center; }
/* 60px tall ≈ 246px wide — matches the brand guide's sanctioned 260px on-screen size */
.brand img{ height: 60px; width:auto; transition: height var(--dur-med) var(--ease-out); }
.site-header.is-scrolled .header-inner{ padding-top: var(--sp-1); padding-bottom: var(--sp-1); row-gap: var(--sp-1); }
.site-header.is-scrolled .brand img{ height: 36px; }
.nav-primary{ grid-column: 1 / -1; grid-row:2; display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; }
.nav-links{ grid-column:2; grid-row:1; justify-self:center; display:flex; gap: var(--sp-4); }
.nav-links a{
  position:relative; font-size:0.92rem; color: var(--ink-soft); padding: 0.3em 0;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-links a::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:1px; background: var(--ink);
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur-med) var(--ease-out);
}
.nav-links a:hover, .nav-links a[aria-current="page"]{ color: var(--ink); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after{ transform: scaleX(1); }
/* Services dropdown (desktop: hover or keyboard focus; mobile: always expanded inside the drawer) */
.nav-links .has-sub{ position:relative; }
.nav-links .has-sub > a{ display:inline-flex; align-items:center; gap:0.35em; }
.nav-links .has-sub.is-active > a{ color: var(--ink); }
.nav-links .has-sub.is-active > a::after{ transform: scaleX(1); }
.nav-caret{ width:12px; height:12px; transition: transform var(--dur-fast) var(--ease-out); }
.has-sub::before{ content:''; position:absolute; left:-16px; right:-16px; top:100%; height:16px; } /* hover bridge between link and panel */
.sub-nav{
  position:absolute; top: calc(100% + 12px); left:50%; z-index:110; min-width:280px; margin:0; padding: var(--sp-1) 0; list-style:none;
  background: var(--paper-alt); border:1px solid var(--line-strong); box-shadow: 0 24px 50px rgba(0,0,0,0.45);
  opacity:0; visibility:hidden; transform: translate(-50%, 6px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast);
}
.has-sub:hover > .sub-nav, .has-sub:focus-within > .sub-nav{ opacity:1; visibility:visible; transform: translate(-50%, 0); transition-delay:0s; }
.has-sub:hover .nav-caret, .has-sub:focus-within .nav-caret{ transform: rotate(180deg); }
.nav-links .sub-nav a{ display:block; padding:0.65em 1.2em; font-size:0.9rem; white-space:nowrap; }
.nav-links .sub-nav a::after{ display:none; }
.nav-links .sub-nav a:hover, .nav-links .sub-nav a[aria-current="page"]{ background: var(--surface); color: var(--ink); }
/* Desktop: the wrapper dissolves so the phone sits left of the nav and the CTA right of it. */
.header-actions{ display:contents; }
.header-actions .btn{ grid-column:3; grid-row:1; justify-self:end; white-space:nowrap; }
.header-phone{
  grid-column:1; grid-row:1; justify-self:start; display:inline-flex; align-items:center; gap:0.55em;
  font-size:0.92rem; color: var(--ink-soft); white-space:nowrap; font-variant-numeric: tabular-nums;
  transition: color var(--dur-fast) var(--ease-out);
}
.header-phone:hover{ color: var(--ink); }
.header-phone .icon{ width:16px; height:16px; }
.nav-toggle{ display:none; grid-column:3; grid-row:1; justify-self:end; padding:0.4em; min-width:44px; min-height:44px; align-items:center; justify-content:center; }
.nav-toggle .icon{ width:22px; height:22px; }
.nav-close{ display:none; align-self:flex-end; padding:0.4em; margin-bottom: var(--sp-4); min-width:44px; min-height:44px; align-items:center; justify-content:center; }
.nav-close .icon{ width:20px; height:20px; }

@media (max-width: 959px){
  .header-inner{ padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
  .brand img{ height: 40px; }
  .nav-primary{ position: fixed; z-index:95; top:0; right:0; left:auto; bottom:auto; height: 100vh; height: 100dvh; width: min(340px,86vw); background: var(--paper); border-left:1px solid var(--line);
    display:flex; flex-direction: column; align-items: stretch; justify-content:flex-start; gap: var(--sp-5); overflow-y:auto;
    padding: var(--sp-5) var(--sp-4) var(--sp-4); visibility:hidden;
    /* Revealed with clip-path, not an off-canvas translate: a translated fixed panel widens the
       page on mobile browsers and lets the viewport pan sideways. */
    -webkit-clip-path: inset(0 0 0 100%); clip-path: inset(0 0 0 100%);
    transition: clip-path var(--dur-med) var(--ease-out), -webkit-clip-path var(--dur-med) var(--ease-out), visibility 0s linear var(--dur-med);
    box-shadow: -20px 0 60px rgba(0,0,0,0.5);
  }
  .nav-primary.is-open{ -webkit-clip-path: inset(0 0 0 -80px); clip-path: inset(0 0 0 -80px); visibility:visible;
    transition: clip-path var(--dur-med) var(--ease-out), -webkit-clip-path var(--dur-med) var(--ease-out), visibility 0s; }
  .nav-links{ flex-direction:column; gap: var(--sp-3); }
  .nav-links a{ font-size:1.2rem; }
  .nav-caret, .has-sub::before{ display:none; }
  .nav-links .has-sub.is-active > a::after{ transform: scaleX(0); }
  .sub-nav{ position:static; z-index:auto; min-width:0; display:flex; flex-direction:column; gap:0.15rem; margin-top:0.5rem; padding:0 0 0 var(--sp-2);
    border:0; border-left:1px solid var(--line); box-shadow:none; background:none; opacity:1; visibility:visible; transform:none; transition:none; }
  .nav-links .sub-nav a{ padding:0.3em 0; font-size:1rem; white-space:normal; color: var(--ink-soft); }
  .nav-links .sub-nav a:hover, .nav-links .sub-nav a[aria-current="page"]{ background:none; color: var(--ink); }
  .header-actions{ display:flex; flex-direction:column; align-items:flex-start; gap: var(--sp-3); }
  .header-actions .btn{ white-space:normal; text-align:center; max-width:100%; }
  .header-phone{ font-size:1.05rem; color: var(--ink); }
  .nav-toggle{ display:inline-flex; }
  .nav-close{ display:inline-flex; }
  /* explicit viewport size: the header's backdrop-filter makes it the containing block for fixed children */
  .nav-scrim{ position:fixed; top:0; left:0; width:100vw; height:100vh; height:100dvh; background:rgba(0,0,0,0.55); opacity:0; pointer-events:none; transition: opacity var(--dur-med) var(--ease-out); z-index:90; }
  .nav-scrim.is-open{ opacity:1; pointer-events:auto; }
}

/* ---- Hero ---- */
.hero{ position:relative; padding: var(--sp-8) 0 var(--sp-7); overflow:hidden; }
@media (max-width: 720px){ .hero{ padding: var(--sp-6) 0 var(--sp-6); } }
.hero-grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--sp-7); align-items:center; }
@media (max-width: 980px){ .hero-grid{ grid-template-columns:1fr; gap: var(--sp-6); } }
.hero h1{ margin-top: var(--sp-3); }
.hero .lede{ margin-top: var(--sp-3); max-width: 42ch; }
.hero .cta-row{ margin-top: var(--sp-5); }
.hero-trust{ margin-top: var(--sp-6); display:flex; flex-wrap:wrap; gap: var(--sp-4); }
.hero-trust-item{ display:flex; align-items:center; gap:0.6em; font-size:0.82rem; letter-spacing:0.03em; color: var(--ink-soft); }
.hero-trust-item .icon{ width:16px; height:16px; color: var(--ink); }
.hero-art{ position:relative; aspect-ratio: 1/1; }
/* Slow drift on the hero still: a single long transform, nothing else repaints. */
@keyframes hero-drift{
  from{ transform: scale(1.1) translate(1.6%, 1.2%); }
  to{ transform: scale(1) translate(0, 0); }
}
.hero-art .photo img{ animation: hero-drift 22s var(--ease-out) both; will-change: transform; }

/* ---- Photography ----
   Every photo is pushed to monochrome in CSS and blooms into colour on hover or
   focus, or when it comes into view on devices without a hover pointer. */
.photo{ display:block; position:relative; overflow:hidden; background: var(--paper-alt); border:1px solid var(--line); }
.photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter: grayscale(1) contrast(1.06); }
.photo img, .service-visual img{ transition: filter 1100ms var(--ease-out), transform 1100ms var(--ease-out); }
.photo:hover img, .photo:focus-within img, .photo.is-colour img,
.service-visual:hover img, .service-visual:focus-within img, .service-visual.is-colour img{ filter: grayscale(0) contrast(1); transform: scale(1.025); }
@media (hover: none){ .photo.is-visible img, .service-visual.is-visible img{ filter: grayscale(0) contrast(1); transform: scale(1.025); } }
.always-colour img{ filter: grayscale(0) contrast(1); }
.photo-panel{ position:relative; aspect-ratio: 1/1; }
.photo-panel .panel{
  position:absolute; top:12%; right:0; bottom:0; width:62%;
  background: var(--paper-light); color: var(--ink-dark); z-index:0;
  display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-end; text-align:right;
  padding: var(--sp-3);
}
.photo-panel .panel > *{ max-width: 64%; }
.photo-panel .panel .eyebrow{ color: var(--ink-dark-faint); justify-content:flex-end; font-size:0.68rem; letter-spacing:0.2em; }
.photo-panel .panel .eyebrow::before{ display:none; }
.photo-panel .panel strong{ display:block; font-family: var(--font-display); font-weight:500; font-size:0.92rem; letter-spacing:0.06em; line-height:1.35; margin-top:0.6em; }
.photo-panel .panel span{ display:block; font-size:0.76rem; color: var(--ink-dark-soft); margin-top:0.5em; }
.photo-panel .photo{ position:absolute; left:0; top:0; width:62%; height:86%; z-index:1; border:0; }
@media (max-width: 560px){
  .photo-panel{ aspect-ratio:auto; }
  .photo-panel .photo{ position:relative; width:100%; height:auto; aspect-ratio: 4/5; }
  .photo-panel .panel{ position:relative; top:auto; width:100%; align-items:flex-start; text-align:left; }
  .photo-panel .panel > *{ max-width:none; }
  .photo-panel .panel .eyebrow{ justify-content:flex-start; }
}
/* Wide variant of the hero panel: the photo spans the full width in a landscape crop and the
   light caption panel tucks under its bottom-right corner, so a wide aerial reads as one. */
.photo-panel.wide{ aspect-ratio: 4/3; }
.photo-panel.wide .photo{ left:0; top:0; width:100%; height:82%; }
.photo-panel.wide .panel{ top:auto; bottom:0; right:0; width:54%; height:30%; }
.photo-panel.wide .panel > *{ max-width:none; }
@media (max-width: 560px){
  .photo-panel.wide{ aspect-ratio:auto; }
  .photo-panel.wide .photo{ position:relative; width:100%; height:auto; aspect-ratio: 16/10; }
  .photo-panel.wide .panel{ position:relative; bottom:auto; width:100%; height:auto; }
}
.photo-band{ aspect-ratio: 16/7; }
@media (max-width: 720px){ .photo-band{ aspect-ratio: 4/3; } }
.photo-caption{ margin-top: var(--sp-2); display:flex; justify-content:space-between; gap: var(--sp-3); font-size:0.78rem; letter-spacing:0.04em; color: var(--ink-faint); }
.photo-caption span + span{ text-align:right; }

/* Full-bleed colour band: the one place colour is allowed to fill the width. */
.band{ position:relative; }
.band .photo{ aspect-ratio: 21/9; border-left:0; border-right:0; }
@media (max-width: 720px){ .band .photo{ aspect-ratio: 4/3; } }
.band-caption{
  position:absolute; left:0; right:0; bottom:0; z-index:2; pointer-events:none;
  padding: var(--sp-4) 0; background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0));
}
.band-caption .container{ display:flex; justify-content:space-between; align-items:flex-end; gap: var(--sp-3); }
.band-caption .eyebrow{ color: rgba(255,255,255,0.7); }
.band-caption .eyebrow::before{ background: rgba(255,255,255,0.45); }
.band-caption strong{ font-family: var(--font-display); font-weight:300; font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem); color: var(--white); display:block; margin-top:0.3em; }
.band-caption small{ font-size:0.76rem; letter-spacing:0.04em; color: rgba(255,255,255,0.6); text-align:right; }
@media (max-width: 560px){ .band-caption small{ display:none; } }

/* ---- Gallery (Work page + home strip) ---- */
.gallery{ display:grid; grid-template-columns: repeat(12, 1fr); gap: var(--sp-2); }
.gallery-item{ grid-column: span 4; aspect-ratio: 4/3; }
.gallery-item.wide{ grid-column: span 8; aspect-ratio: 16/9; }
.gallery-item.tall{ aspect-ratio: 3/4; }
@media (max-width: 900px){ .gallery-item, .gallery-item.wide{ grid-column: span 6; } }
@media (max-width: 560px){ .gallery-item, .gallery-item.wide{ grid-column: span 12; aspect-ratio: 4/3; } }
.gallery-item figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding: var(--sp-2) var(--sp-3);
  font-size:0.74rem; letter-spacing:0.06em; text-transform:uppercase; color: rgba(255,255,255,0.85);
  background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0));
  opacity:0; transform: translateY(6px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.gallery-item:hover figcaption, .gallery-item:focus-within figcaption, .gallery-item.is-colour figcaption{ opacity:1; transform:none; }
@media (hover: none){ .gallery-item figcaption{ opacity:1; transform:none; } }

/* ---- Trust strip ---- */
.trust-strip{ padding: var(--sp-5) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.trust-strip .grid{ gap: var(--sp-4); }
.trust-item{ display:flex; align-items:flex-start; gap: var(--sp-2); }
.trust-item .icon{ width:22px; height:22px; margin-top:0.15em; color: var(--ink); flex-shrink:0; }
.trust-item h2, .trust-item h3{ font-family: var(--font-display); font-weight:500; line-height:1.3; font-size:0.95rem; letter-spacing:0; }
.trust-item p{ font-size:0.86rem; color: var(--ink-soft); margin-top:0.3em; }

/* ---- Cards ---- */
.card{
  background: var(--surface); border:1px solid var(--line); padding: var(--sp-4);
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.card:hover{ border-color: var(--line-strong); transform: translateY(-3px); box-shadow: 0 18px 36px -20px rgba(0,0,0,0.7); }
.card .icon-wrap{
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-strong); margin-bottom: var(--sp-3);
}
.card .icon-wrap .icon{ width:20px; height:20px; }
.card h3{ margin-bottom: 0.6em; }
.card p{ font-size:0.92rem; color: var(--ink-soft); }
.card-link{ display:inline-flex; align-items:center; gap:0.4em; margin-top: var(--sp-3); font-size:0.82rem; letter-spacing:0.05em; text-transform:uppercase; font-family: var(--font-display); font-weight:500; }
.card-link .icon{ width:14px; height:14px; transition: transform var(--dur-fast) var(--ease-out); }
.card:hover .card-link .icon{ transform: translateX(3px); }
/* numbered service index (home) */
.service-index{ border-top:1px solid var(--line); }
.service-row{
  display:grid; grid-template-columns: 4rem 1fr 1.4fr auto; gap: var(--sp-4); align-items:center;
  padding: var(--sp-3) 0; border-bottom:1px solid var(--line);
  transition: background var(--dur-fast) var(--ease-out);
}
.service-row:hover{ background: rgba(255,255,255,0.025); }
.service-row .num{ font-family: var(--font-display); font-weight:300; font-size:1.4rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.service-row h3{ font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); font-weight:400; }
.service-row p{ font-size:0.92rem; color: var(--ink-soft); }
.service-row .icon{ width:18px; height:18px; color: var(--ink-faint); transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.service-row:hover .icon{ transform: translateX(4px); color: var(--ink); }
@media (max-width: 760px){
  .service-row{ grid-template-columns: 3rem 1fr auto; row-gap: 0.4rem; }
  .service-row p{ grid-column: 2 / 3; }
  .service-row .icon{ grid-row: 1; grid-column: 3; }
}

/* ---- Process steps + flight path ---- */
.steps-wrap{ position:relative; }
.steps{ display:grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-4); position:relative; }
@media (max-width: 900px){ .steps{ grid-template-columns: 1fr; gap: var(--sp-5); } }
.step{ position:relative; padding-top: var(--sp-5); }
.step::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px; background: var(--line-strong);
  transform-origin:left; transition: transform var(--dur-reveal) var(--ease-draw) 100ms;
}
.js .step:not(.is-visible)::before{ transform: scaleX(0); }
.step-num{ font-family: var(--font-display); font-weight:300; font-size:2rem; color: var(--ink-faint); }
.step h3{ margin-top: var(--sp-2); }
.step p{ margin-top:0.5em; font-size:0.9rem; color: var(--ink-soft); }
/* a thin flight line drawn across the process section once it is in view */
.flight-path{ position:absolute; left:0; right:0; top:-3.1rem; width:100%; height:auto; aspect-ratio: 1200/60; pointer-events:none; }
.flight-path path{ fill:none; stroke: var(--line-strong); stroke-width:1; stroke-dasharray:1; stroke-dashoffset:1; transition: stroke-dashoffset 2400ms var(--ease-draw) 200ms; vector-effect: non-scaling-stroke; }
.flight-path circle{ fill: var(--ink); opacity:0; transition: opacity var(--dur-med) var(--ease-out) 2400ms; }
.flight-path.is-visible path{ stroke-dashoffset:0; }
.flight-path.is-visible circle{ opacity:1; }
.js .flight-path[data-reveal]{ transform:none; }
@media (max-width: 900px){ .flight-path{ display:none; } }

/* ---- Triad / approach columns ---- */
.triad-num{ font-family: var(--font-display); font-size:0.78rem; letter-spacing:0.2em; color: var(--ink-faint); }

/* ---- Service detail sections ---- */
.service-detail{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--sp-7); align-items:start; padding: var(--sp-7) 0; border-top:1px solid var(--line); }
.service-detail:first-of-type{ border-top:0; }
@media (max-width: 900px){ .service-detail{ grid-template-columns:1fr; gap: var(--sp-4); } }
.service-detail.reverse .service-visual{ order:2; }
.service-visual{ aspect-ratio: 4/3; background: var(--paper-alt); border:1px solid var(--line); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.service-visual .icon{ width:64px; height:64px; color: var(--line-strong); }
.service-visual img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter: grayscale(1) contrast(1.06); }
.service-visual .icon-badge{ position:absolute; left: var(--sp-3); bottom: var(--sp-3); width:44px; height:44px; display:flex; align-items:center; justify-content:center; background: var(--paper-light); color: var(--ink-dark); }
.service-visual .icon-badge .icon{ width:20px; height:20px; color: var(--ink-dark); }
.service-list{ margin-top: var(--sp-3); }
.service-list li{ display:flex; gap:0.7em; padding: 0.55em 0; border-top:1px solid var(--line); font-size:0.92rem; color: var(--ink-soft); }
.service-list li:first-child{ border-top:0; }
.service-list .icon{ width:16px; height:16px; margin-top:0.25em; color: var(--ink); flex-shrink:0; }
.service-note{ margin-top: var(--sp-4); padding: var(--sp-3); border-left:2px solid var(--ink); font-size:0.86rem; color: var(--ink-soft); }
.deliverables{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--sp-5); }
@media (max-width: 620px){ .deliverables{ grid-template-columns: 1fr; } }
.deliverables li{ display:flex; gap:0.7em; padding: 0.75em 0; border-top:1px solid var(--line); font-size:0.95rem; color: var(--ink-soft); }
.deliverables .icon{ width:16px; height:16px; margin-top:0.3em; color: var(--ink); flex-shrink:0; }
.related-list{ display:flex; flex-wrap:wrap; gap: var(--sp-2); }
.related-list a{
  display:inline-flex; align-items:center; gap:0.5em; padding: 0.7em 1.1em; border:1px solid var(--line-strong); font-size:0.85rem;
  font-family: var(--font-display); font-weight:500; letter-spacing:0.04em;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.related-list a:hover{ border-color: var(--ink); background: rgba(255,255,255,0.03); }
.related-list .icon{ width:14px; height:14px; }

/* ---- FAQ ---- */
.faq-group + .faq-group{ margin-top: var(--sp-6); }
.faq-group h2{ margin-bottom: var(--sp-3); }
.faq-item{ border-top:1px solid var(--line); }
.faq-list{ border-bottom:1px solid var(--line); }
.faq-item summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap: var(--sp-3);
  padding: 1.2em 0; font-family: var(--font-display); font-weight:500; font-size:1rem; min-height:44px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .icon{ width:18px; height:18px; flex-shrink:0; transition: transform var(--dur-fast) var(--ease-out); }
.faq-item[open] summary .icon{ transform: rotate(180deg); }
.faq-answer{ padding: 0 0 1.5em; max-width: 68ch; color: var(--ink-soft); font-size:0.94rem; }

/* ---- Contact ---- */
.contact-grid{ display:grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--sp-7); align-items:start; }
@media (max-width: 900px){ .contact-grid{ grid-template-columns:1fr; gap: var(--sp-6); } }
.field{ margin-bottom: var(--sp-3); }
.field label{ display:flex; gap:0.3em; font-size:0.82rem; letter-spacing:0.03em; text-transform:uppercase; font-family: var(--font-display); font-weight:500; margin-bottom:0.6em; }
.field .req{ color: var(--ink-faint); }
.field input, .field select, .field textarea{
  width:100%; background: var(--surface); border:1px solid var(--line-strong); border-radius: var(--radius);
  padding: 0.9em 1em; font-size:1rem; color: var(--ink); min-height:48px; transition: border-color var(--dur-fast) var(--ease-out);
}
.field select{ appearance:none; -webkit-appearance:none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9C6BC' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: right 0.9em center; background-size: 16px; padding-right: 2.6em; }
.field input::-webkit-calendar-picker-indicator{ filter: invert(0.8); }
.field textarea{ min-height:140px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--ink); outline:none; }
.field-hint{ margin-top:0.5em; font-size:0.78rem; color: var(--ink-faint); }
.field-hint.is-important{ font-size:0.85rem; line-height:1.55; color: var(--ink-soft); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap: var(--sp-3); }
@media (max-width:560px){ .field-row{ grid-template-columns:1fr; } }
.checkbox-row{ display:flex; align-items:flex-start; gap:0.7em; font-size:0.85rem; color: var(--ink-soft); }
.checkbox-row input{ margin-top:0.3em; width:18px; height:18px; accent-color: var(--ink); flex-shrink:0; }
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.contact-side .card{ margin-bottom: var(--sp-3); }
.contact-line{ display:flex; align-items:center; gap:0.8em; padding: 0.9em 0; border-top:1px solid var(--line); }
.contact-line:first-child{ border-top:0; }
.contact-line .icon{ width:18px; height:18px; color: var(--ink); }
.contact-line a{ font-size:1rem; }
.badge-line{ display:inline-flex; align-items:center; gap:0.5em; font-size:0.78rem; letter-spacing:0.03em; color: var(--ink-faint); padding-top: var(--sp-3); border-top:1px solid var(--line); margin-top: var(--sp-3); }
.badge-line .icon{ width:14px; height:14px; }

.form-status{ margin-top: var(--sp-3); font-size:0.88rem; display:none; padding: 0.9em 1em; border:1px solid var(--line-strong); }
.form-status.is-visible{ display:block; }
.field-error{ margin-top:0.5em; font-size:0.8rem; color: var(--ink); }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"],
.checkbox-row input[aria-invalid="true"]{ border-color: var(--ink); outline: 1px solid var(--ink); }
.form-success{ padding: var(--sp-4); border:1px solid var(--line-strong); background: var(--surface); }
.form-success:focus{ outline:none; }
.form-success h3{ max-width: 30ch; }

/* ---- Footer ---- */
.site-footer{ background: var(--black); color: rgba(255,255,255,0.86); padding: var(--sp-7) 0 var(--sp-4); border-top:1px solid var(--line); }
.footer-top{ display:grid; grid-template-columns: 1.3fr 0.8fr 0.8fr 1fr; gap: var(--sp-6); padding-bottom: var(--sp-6); border-bottom:1px solid rgba(255,255,255,0.12); }
@media (max-width: 900px){ .footer-top{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-top{ grid-template-columns: 1fr; } }
.footer-mark{ padding-bottom: var(--sp-6); margin-bottom: var(--sp-6); border-bottom:1px solid rgba(255,255,255,0.12); text-align:center; }
.footer-mark img{ height: 90px; width:auto; margin: 0 auto; }
@media (max-width: 720px){ .footer-mark img{ height: 64px; } }
.footer-brand p{ font-size:0.88rem; color: rgba(255,255,255,0.6); max-width:32ch; }
.footer-col h3{ font-family: var(--font-display); font-size:0.78rem; letter-spacing:0.18em; text-transform:uppercase; color: rgba(255,255,255,0.45); margin-bottom: var(--sp-3); }
.footer-col ul li{ margin-bottom:0.75em; }
.footer-col a{ font-size:0.9rem; color: rgba(255,255,255,0.78); transition: color var(--dur-fast) var(--ease-out); }
.footer-col a:hover{ color: var(--white); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap: var(--sp-2); padding-top: var(--sp-4); font-size:0.78rem; color: rgba(255,255,255,0.45); }
.footer-bottom a{ color: rgba(255,255,255,0.6); }
.footer-bottom a:hover{ color: var(--white); }
.footer-legal-links{ display:flex; gap: var(--sp-3); }

/* ---- Reveal-on-scroll (only when JS is running; without it everything simply shows) ---- */
.js [data-reveal]{ opacity:0; transform: translateY(16px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.js [data-reveal].is-visible{ opacity:1; transform: translateY(0); }
.js [data-reveal-group] > *{ transition-delay: calc(var(--i,0) * 70ms); }

/* ---- Page hero (interior pages) ---- */
.page-hero{ padding: var(--sp-7) 0 var(--sp-6); border-bottom:1px solid var(--line); }
.page-hero h1{ margin-top: var(--sp-3); }
.page-hero .lede{ margin-top: var(--sp-3); }

/* ---- Utility ---- */
.mt-1{ margin-top: var(--sp-1); } .mt-2{ margin-top: var(--sp-2); } .mt-3{ margin-top: var(--sp-3); }
.mt-4{ margin-top: var(--sp-4); } .mt-5{ margin-top: var(--sp-5); } .mt-6{ margin-top: var(--sp-6); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link{
  position:absolute; left:var(--sp-2); top:-60px; background:var(--ink); color:var(--paper); padding:0.8em 1.2em; z-index:200;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus{ top: var(--sp-2); }