/* =========================================================================
   FORTICON — site styles
   Brand refresh v03 (June 2026). Edit tokens here first.
   ========================================================================= */

:root {
  /* Colour: core palette (brand guide p9) */
  --forticon-red: #AB0505;
  --deep-ink: #15151A;
  --warm-sand: #F7EFE6;
  --concrete: #C5BFB8;
  --white: #FFFFFF;
  /* Colour: extended palette, tags and data only */
  --olive-ochre: #8B7813;
  --plum: #5F415E;
  --eucalypt: #5E6E45;
  --steel: #305B6D;

  /* Colour: working tints derived from the palette */
  --red-deep: #8C0404;
  --ink-950: #0C0C10;
  --ink-900: #111116;
  --ink-800: #1B1B21;
  --ink-700: #26262D;
  --sand-200: #EFE4D6;
  --text-on-dark: var(--concrete);
  --text-on-dark-strong: var(--white);
  --text-on-dark-muted: #A39E98;      /* 6.9:1 on deep ink */
  --text-on-light: var(--deep-ink);
  --text-on-light-muted: #4A4845;     /* 8.4:1 on warm sand */
  --hairline-dark: rgba(var(--tint), 0.10);
  --hairline-light: rgba(21, 21, 26, 0.10);

  /* Type */
  --font: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --fs-hero: clamp(2.5rem, 1.1rem + 6.1vw, 6.75rem);
  --fs-h1: clamp(2.5rem, 1.45rem + 4.2vw, 5.5rem);
  --fs-h2: clamp(2rem, 1.4rem + 2.2vw, 3.5rem);
  --fs-h3: clamp(1.25rem, 1.12rem + 0.45vw, 1.5rem);
  --fs-h4: 1.125rem;
  --fs-lead: clamp(1.125rem, 1.04rem + 0.35vw, 1.3125rem);
  --fs-body: clamp(1.0625rem, 1.02rem + 0.15vw, 1.125rem);
  --fs-small: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-eyebrow: 0.8125rem;
  --lh-display: 0.98;
  --lh-heading: 1.05;
  --lh-body: 1.6;
  --tracking-display: -0.03em;
  --tracking-eyebrow: 0.12em;
  --measure: 65ch;

  /* Space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --section-y: clamp(3rem, 1.5rem + 3.4vw, 4.5rem); /* tighter rhythm from the home page review, 2026-11-12 */
  --gutter: clamp(1rem, 0.4rem + 2.6vw, 2.5rem);
  --container: 1320px;
  --container-narrow: 880px;

  /* Shape */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-btn: 6px;
  --radius-pill: 999px;

  /* Glass */
  --blur: 20px;
  --blur-nav: 24px;
  --glass-bg: rgba(var(--tint), 0.05);
  --glass-bg-hover: rgba(var(--tint), 0.07);
  --glass-border: rgba(var(--tint), 0.10);
  --glass-border-hover: rgba(var(--tint), 0.22);
  --glass-highlight: inset 0 1px 0 rgba(var(--tint), 0.08);
  --glass-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  --frost-bg: rgba(255, 255, 255, 0.55);
  --frost-border: rgba(21, 21, 26, 0.08);
  --frost-shadow: 0 18px 50px rgba(21, 21, 26, 0.08);
  --glass-fallback: rgba(21, 21, 26, 0.92);
  --nav-bg: rgba(21, 21, 26, 0.70);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur: 600ms;
  --dur-fast: 220ms;
  --dur-nav: 300ms;
  --rise: 16px;

  /* Layers */
  --z-nav: 100;
  --z-menu: 120;
  --z-dialog: 200;
}

/* -------------------------------------------------------------------------
   Base
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  color: var(--text-on-dark);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}
body.menu-open { overflow: hidden; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
p { margin: 0 0 1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { margin: 0; color: var(--text-on-dark-strong); font-weight: 800; letter-spacing: var(--tracking-display); line-height: var(--lh-heading); text-wrap: balance; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-display); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-display); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.015em; line-height: 1.2; font-weight: 700; }
h4 { font-size: var(--fs-h4); letter-spacing: -0.01em; line-height: 1.3; font-weight: 700; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; }
strong { font-weight: 700; color: var(--text-on-dark-strong); }
::selection { background: var(--forticon-red); color: var(--white); }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--fg-strong);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(171, 5, 5, 0.55);
  border-radius: 4px;
}
.surface-light :focus-visible { outline-color: var(--deep-ink); box-shadow: 0 0 0 6px rgba(171, 5, 5, 0.35); }

.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 999;
  background: var(--forticon-red); color: var(--white); padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-btn); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: var(--space-4); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------------------
   Layout
   ------------------------------------------------------------------------- */
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }
.section { position: relative; padding-block: var(--section-y); isolation: isolate; }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
.section--snug-top { padding-top: calc(var(--section-y) * 0.6); }
.section--ink { background: var(--bg); }
.section--black { background: var(--bg-alt); }
.section--sand { background: var(--warm-sand); color: var(--text-on-light); }
.surface-light h1, .surface-light h2, .surface-light h3, .surface-light h4, .surface-light strong { color: var(--deep-ink); }
.surface-light p { color: var(--text-on-light); }
.surface-light .muted { color: var(--text-on-light-muted); }
.muted { color: var(--text-on-dark-muted); }

.section-head { display: grid; gap: var(--space-5); margin-bottom: clamp(1.5rem, 1rem + 1.4vw, 2.25rem); }
.section-head:last-child { margin-bottom: 0; } /* intro sections that are only a heading */
.section-head--split { align-items: end; }
@media (min-width: 960px) {
  .section-head--split { grid-template-columns: 1.15fr 0.85fr; gap: var(--space-8); }
}
.section-head p:not(.eyebrow) { font-size: var(--fs-lead); color: var(--text-on-dark-muted); }
.surface-light .section-head p:not(.eyebrow) { color: var(--text-on-light-muted); }

.grid { display: grid; gap: clamp(1rem, 0.7rem + 1vw, 1.5rem); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1040px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Background depth: soft red glows behind glass (clipped so they never widen the page) */
main { overflow-x: hidden; overflow-x: clip; }
.glow { overflow: hidden; }
.glow::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: min(1100px, 120vw); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(171, 5, 5, 0.12) 0%, rgba(171, 5, 5, 0.04) 38%, transparent 68%);
  top: var(--glow-top, -20%); left: var(--glow-left, -25%);
}
.glow--right::before { left: auto; right: var(--glow-right, -30%); }

/* -------------------------------------------------------------------------
   Type devices
   ------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.7em;
  margin: 0 0 var(--space-5);
  font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; line-height: 1.3; color: var(--fg);
}
.eyebrow::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--forticon-red);
}
.surface-light .eyebrow { color: var(--forticon-red); }
.eyebrow--plain::before { display: none; }

.display { font-size: var(--fs-hero); line-height: var(--lh-display); letter-spacing: var(--tracking-display); font-weight: 800; }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--text-on-dark); }
.surface-light .lead { color: var(--text-on-light); }
.text-red { color: var(--forticon-red); }

.dot-list { list-style: none; display: grid; gap: var(--space-3); }
.dot-list li { position: relative; padding-left: 1.4em; }
.dot-list li::before {
  content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--forticon-red);
}

/* -------------------------------------------------------------------------
   Buttons and links
   ------------------------------------------------------------------------- */
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.btn {
  --btn-bg: transparent; --btn-fg: var(--white); --btn-border: var(--glass-border-hover);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.75em;
  min-height: 52px; padding: 0.85rem 1.4rem; border-radius: var(--radius-btn);
  font-size: 0.975rem; font-weight: 700; letter-spacing: -0.005em; line-height: 1.1; text-decoration: none;
  color: var(--btn-fg); background: var(--btn-bg); border: 1px solid var(--btn-border);
  cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn svg { width: 1.05em; height: 1.05em; flex: none; transition: transform var(--dur-fast) var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn--red { --btn-bg: var(--forticon-red); --btn-border: var(--forticon-red); }
.btn--red:hover { --btn-bg: var(--red-deep); --btn-border: var(--red-deep); }
.btn--glass {
  --btn-bg: rgba(var(--tint), 0.06);
  -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur));
  box-shadow: var(--glass-highlight);
}
.btn--glass:hover { --btn-bg: rgba(var(--tint), 0.12); --btn-border: rgba(var(--tint), 0.4); }
.btn--ink { --btn-bg: var(--deep-ink); --btn-border: var(--deep-ink); --btn-fg: var(--white); }
.btn--ink:hover { --btn-bg: #000; }
.btn--outline-ink { --btn-fg: var(--deep-ink); --btn-border: rgba(21, 21, 26, 0.35); }
.btn--outline-ink:hover { --btn-border: var(--deep-ink); --btn-bg: rgba(21, 21, 26, 0.04); }
.btn--small { min-height: 42px; padding: 0.6rem 1rem; font-size: 0.9rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.55em; font-weight: 700; font-size: 0.95rem;
  text-decoration: none; color: var(--fg-strong);
}
.link-arrow svg { width: 1em; height: 1em; color: var(--forticon-red); transition: transform var(--dur-fast) var(--ease); }
.link-arrow:hover svg, a:hover > .link-arrow svg { transform: translateX(4px); }
.surface-light .link-arrow { color: var(--deep-ink); }

/* -------------------------------------------------------------------------
   Glass and frost surfaces
   ------------------------------------------------------------------------- */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(140%);
  backdrop-filter: blur(var(--blur)) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  border-radius: var(--radius);
}
.frost {
  background: var(--frost-bg);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(120%);
  backdrop-filter: blur(var(--blur)) saturate(120%);
  border: 1px solid var(--frost-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), var(--frost-shadow);
  border-radius: var(--radius);
  color: var(--text-on-light);
}

.card {
  position: relative; display: flex; flex-direction: column; gap: var(--space-4);
  padding: clamp(1.4rem, 1.1rem + 1vw, 2rem); overflow: hidden;
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.card::before {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%;
  background: var(--forticon-red); transform: scaleX(0); transform-origin: left center;
  transition: transform 420ms var(--ease);
}
.card--interactive { cursor: pointer; }
.card--interactive:hover, .card--interactive:focus-within { transform: translateY(-4px); }
.card--interactive:hover::before, .card--interactive:focus-within::before { transform: scaleX(1); }
.glass.card--interactive:hover, .glass.card--interactive:focus-within { border-color: var(--glass-border-hover); background: var(--glass-bg-hover); }
.frost.card--interactive:hover, .frost.card--interactive:focus-within { border-color: rgba(21, 21, 26, 0.18); background: rgba(255, 255, 255, 0.75); }
.card h3 { font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem); }
.card p { color: var(--text-on-dark-muted); font-size: var(--fs-small); line-height: 1.6; }
.frost.card p { color: var(--text-on-light-muted); }
.card .card-foot { margin-top: auto; padding-top: var(--space-3); }
/* Whole-card link pattern */
.stretched { text-decoration: none; color: inherit; }
.card .stretched::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card a:focus-visible { box-shadow: none; outline: none; }
.card:has(a.stretched:focus-visible) { outline: 2px solid var(--fg-strong); outline-offset: 3px; }

.icon { width: 44px; height: 44px; color: var(--fg-strong); flex: none; }
.surface-light .icon, .frost .icon { color: var(--deep-ink); }
.icon--sm { width: 28px; height: 28px; }
.icon--lg { width: 56px; height: 56px; }

.index-num { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.1em; color: var(--text-on-dark-muted); font-variant-numeric: tabular-nums; }
.surface-light .index-num { color: var(--forticon-red); }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; padding: 0; }
.chip {
  display: inline-flex; align-items: center; gap: 0.45em; padding: 0.32rem 0.62rem; border-radius: 4px;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1.2;
  color: var(--fg); background: rgba(var(--tint), 0.06); border: 1px solid rgba(var(--tint), 0.10);
}
.surface-light .chip, .frost .chip { color: var(--deep-ink); background: rgba(21, 21, 26, 0.05); border-color: rgba(21, 21, 26, 0.10); }
.chip--team { color: var(--white); background: var(--plum); border-color: transparent; }
.chip--value { color: var(--white); background: rgba(21, 21, 26, 0.6); border-color: rgba(255, 255, 255, 0.18); font-variant-numeric: tabular-nums; }

/* Filter chips (buttons) */
.filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-7); }
/* Projects: Sector and Work filter rows, each with a small red label like the card labels */
.filters-set { display: grid; gap: var(--space-3); margin-bottom: var(--space-7); }
.filters-set .filters { margin-bottom: 0; align-items: center; }
.filters__label { min-width: 4.5rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--forticon-red); }
.filter {
  min-height: 42px; padding: 0.5rem 1rem; border-radius: var(--radius-btn); cursor: pointer;
  font-size: 0.9rem; font-weight: 600; color: var(--fg);
  background: rgba(var(--tint), 0.04); border: 1px solid var(--glass-border);
  transition: all var(--dur-fast) var(--ease);
}
.filter:hover { color: var(--fg-strong); border-color: var(--glass-border-hover); }
.filter[aria-pressed="true"] { color: var(--white); background: var(--forticon-red); border-color: var(--forticon-red); }

/* Placeholder photo block (to be replaced with real photography) */
.placeholder {
  position: relative; display: grid; place-items: end start; width: 100%; height: 100%; min-height: 180px;
  padding: var(--space-4); background:
    repeating-linear-gradient(135deg, rgba(21, 21, 26, 0.035) 0 1px, transparent 1px 14px),
    var(--warm-sand);
  color: var(--text-on-light-muted); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em;
}
.placeholder span { display: inline-flex; align-items: center; gap: 0.5em; background: rgba(255, 255, 255, 0.7); padding: 0.35rem 0.6rem; border-radius: 4px; }
.placeholder span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--forticon-red); }

/* -------------------------------------------------------------------------
   Navigation: floating liquid-glass pill
   ------------------------------------------------------------------------- */
.site-header {
  position: fixed; z-index: var(--z-nav); top: 16px; left: 0; right: 0;
  padding-inline: clamp(0.75rem, 0.3rem + 1.6vw, 1.5rem); pointer-events: none;
}
.nav {
  position: relative; pointer-events: auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  max-width: 1320px; margin-inline: auto; min-height: 64px; padding: 0.55rem 0.6rem 0.55rem 1.4rem;
  border-radius: var(--radius-pill);
  background: transparent; border: 1px solid transparent;
  transition: background-color var(--dur-nav) var(--ease), border-color var(--dur-nav) var(--ease), box-shadow var(--dur-nav) var(--ease), -webkit-backdrop-filter var(--dur-nav) var(--ease), backdrop-filter var(--dur-nav) var(--ease);
}
.nav::after { /* specular highlight along the top edge */
  content: ""; position: absolute; left: 8%; right: 8%; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(var(--tint), 0.45), transparent);
  opacity: 0; transition: opacity var(--dur-nav) var(--ease);
}
.is-scrolled .nav, .nav.is-solid {
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(var(--blur-nav)) saturate(160%);
  backdrop-filter: blur(var(--blur-nav)) saturate(160%);
  border-color: rgba(var(--tint), 0.12);
  box-shadow: inset 0 1px 0 rgba(var(--tint), 0.10), 0 18px 50px rgba(0, 0, 0, 0.35);
}
.is-scrolled .nav::after, .nav.is-solid::after { opacity: 1; }
.nav__logo { display: block; flex: none; line-height: 0; border-radius: 4px; }
.nav__logo img { width: clamp(176px, 146px + 4.5vw, 212px); height: auto; }
.nav__links { display: none; list-style: none; align-items: center; gap: 0.15rem; }
.nav__link, .nav__trigger {
  display: inline-flex; align-items: center; gap: 0.4em; min-height: 44px; padding: 0.5rem 0.85rem; border-radius: var(--radius-pill);
  font-size: 0.925rem; font-weight: 600; color: var(--fg); text-decoration: none; background: none; border: 0; cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.nav__link:hover, .nav__trigger:hover, .nav__trigger[aria-expanded="true"] { color: var(--fg-strong); background: rgba(var(--tint), 0.06); }
.nav__link[aria-current="page"], .nav__trigger.is-current { color: var(--fg-strong); }
.nav__link[aria-current="page"]::before, .nav__trigger.is-current::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--forticon-red);
}
.nav__trigger svg { width: 10px; height: 10px; transition: transform var(--dur-fast) var(--ease); }
.nav__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__item { position: relative; }
.nav__menu {
  position: absolute; top: calc(100% + 12px); left: 50%; min-width: 280px; padding: 0.5rem;
  list-style: none; border-radius: var(--radius);
  background: rgba(21, 21, 26, 0.82);
  -webkit-backdrop-filter: blur(var(--blur-nav)) saturate(160%); backdrop-filter: blur(var(--blur-nav)) saturate(160%);
  border: 1px solid rgba(var(--tint), 0.12); box-shadow: var(--glass-highlight), var(--glass-shadow);
  opacity: 0; visibility: hidden; transform: translate(-50%, -6px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility 0s linear var(--dur-fast);
}
.nav__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav__item.is-open .nav__menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.nav__menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 0.85rem; border-radius: var(--radius-sm);
  color: var(--fg); text-decoration: none; font-size: 0.925rem; font-weight: 600;
}
.nav__menu a:hover, .nav__menu a:focus-visible { color: var(--fg-strong); background: rgba(var(--tint), 0.07); }
.nav__menu a[aria-current="page"] { color: var(--fg-strong); }
.nav__menu a[aria-current="page"]::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--forticon-red); }
.nav__menu .nav__menu-all { margin-top: 0.35rem; border-top: 1px solid var(--hairline-dark); border-radius: 0 0 var(--radius-sm) var(--radius-sm); color: var(--fg-strong); }
.nav__cta { display: none; }
.nav__toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 48px; padding: 0 1.1rem; border-radius: var(--radius-pill);
  background: rgba(var(--tint), 0.06); border: 1px solid rgba(var(--tint), 0.14); cursor: pointer; font-weight: 700; font-size: 0.9rem; color: var(--fg-strong);
  -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur));
}
.nav__toggle-bars { position: relative; width: 18px; height: 10px; }
.nav__toggle-bars::before, .nav__toggle-bars::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; border-radius: 1px;
  transition: transform var(--dur-fast) var(--ease), top var(--dur-fast) var(--ease);
}
.nav__toggle-bars::before { top: 0; }
.nav__toggle-bars::after { top: 8px; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::before { top: 4px; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::after { top: 4px; transform: rotate(-45deg); }

@media (min-width: 1080px) {
  .nav__links { display: flex; }
  .nav__cta { display: inline-flex; }
  .nav__toggle { display: none; }
}

/* Mobile full-screen glass menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: var(--z-menu); display: flex; flex-direction: column;
  padding: 104px var(--gutter) max(2rem, env(safe-area-inset-bottom)); overflow-y: auto;
  background: rgba(15, 15, 19, 0.78);
  -webkit-backdrop-filter: blur(28px) saturate(150%); backdrop-filter: blur(28px) saturate(150%);
  opacity: 0; visibility: hidden; transition: opacity var(--dur-nav) var(--ease), visibility 0s linear var(--dur-nav);
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.menu-open .site-header { z-index: calc(var(--z-menu) + 1); }
.mobile-menu__list { list-style: none; display: grid; }
.mobile-menu__list > li { border-bottom: 1px solid var(--hairline-dark); }
.mobile-menu__link, .mobile-menu__trigger {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 64px; padding: 0.5rem 0;
  font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; color: var(--fg-strong); text-decoration: none; background: none; border: 0; cursor: pointer; text-align: left;
}
.mobile-menu__trigger svg { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease); }
.mobile-menu__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.mobile-menu__sub { list-style: none; display: grid; padding: 0 0 1rem; }
.mobile-menu__sub[hidden] { display: none; }
.mobile-menu__sub a { display: block; padding: 0.6rem 0; color: var(--fg); font-weight: 600; text-decoration: none; }
.mobile-menu__sub a[aria-current="page"] { color: var(--fg-strong); }
.mobile-menu__foot { margin-top: auto; padding-top: var(--space-7); display: grid; gap: var(--space-4); }
.mobile-menu__foot .btn { width: 100%; }
.mobile-menu__contact { display: grid; gap: 0.35rem; font-size: var(--fs-small); }
.mobile-menu__contact a { color: var(--fg); text-decoration: none; }

/* -------------------------------------------------------------------------
   Hero (home): full-viewport drone video
   ------------------------------------------------------------------------- */
.hero {
  position: relative; min-height: 100svh; min-height: 100vh; display: flex; align-items: flex-end;
  padding: 140px 0 clamp(3rem, 2rem + 5vw, 6rem); overflow: hidden; isolation: isolate; background: var(--ink-950);
}
@supports (min-height: 100svh) { .hero { min-height: 100svh; } }
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media img, .hero__media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  animation: hero-scale 8s var(--ease) both;
}
.hero__media video { opacity: 0; transition: opacity 900ms var(--ease); }
.hero__media video.is-playing { opacity: 1; }
@keyframes hero-scale { from { transform: scale(1); } to { transform: scale(1.06); } }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(0deg, var(--deep-ink) 0%, rgba(21, 21, 26, 0.88) 22%, rgba(21, 21, 26, 0.45) 55%, rgba(21, 21, 26, 0.25) 78%, rgba(21, 21, 26, 0.55) 100%),
    radial-gradient(60% 50% at 12% 88%, rgba(171, 5, 5, 0.16), transparent 70%);
}
.hero__inner { display: grid; gap: var(--space-6); }
.hero h1 { font-size: var(--fs-hero); max-width: 14ch; }
.hero__body { font-size: var(--fs-lead); color: var(--fg); max-width: 52ch; margin: 0; }
.hero__foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-6); }
.scroll-cue {
  display: none; align-items: center; gap: 0.8rem; font-size: var(--fs-xs); font-weight: 500; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--fg); text-decoration: none;
}
.scroll-cue__line { position: relative; width: 1px; height: 48px; background: rgba(var(--tint), 0.2); overflow: hidden; }
.scroll-cue__line::after {
  content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--forticon-red);
  animation: cue 2.2s var(--ease) infinite;
}
@keyframes cue { to { top: 100%; } }
@media (min-width: 900px) { .scroll-cue { display: inline-flex; } }

/* Inner page hero */
.page-hero {
  position: relative; display: flex; align-items: flex-end; min-height: clamp(520px, 72vh, 760px);
  padding: 150px 0 clamp(3rem, 2rem + 4vw, 5.5rem); overflow: hidden; isolation: isolate; background: var(--ink-950);
}
.page-hero--short { min-height: clamp(440px, 58vh, 620px); }
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(0deg, var(--deep-ink) 0%, rgba(21, 21, 26, 0.9) 28%, rgba(21, 21, 26, 0.62) 62%, rgba(21, 21, 26, 0.7) 100%),
    radial-gradient(50% 60% at 90% 10%, rgba(171, 5, 5, 0.14), transparent 70%);
}
.page-hero h1 { max-width: 18ch; }
.page-hero .lead { max-width: 58ch; margin-top: var(--space-5); }
.page-hero .btn-row { margin-top: var(--space-6); }
/* Pages that open straight on their first section (no banner): clear the fixed menu, keep section-heading scale */
.page-start { padding-top: calc(var(--header-h, 72px) + var(--section-y)); } /* same gap under the menu bar as between sections */
.page-start h1 { font-size: var(--fs-h2); line-height: var(--lh-display); }
.page-start .split h1 { font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem); }

/* Shield device: image mask (brand guide "Logo Shape") */
.shield-mask {
  position: absolute; z-index: -1; pointer-events: none; aspect-ratio: 24.12 / 29.57;
  -webkit-mask: url("/assets/brand/shield-mask.svg") center / contain no-repeat;
  mask: url("/assets/brand/shield-mask.svg") center / contain no-repeat;
}
.shield-mask img { width: 100%; height: 100%; object-fit: cover; opacity: var(--shield-opacity, 0.22); filter: grayscale(0.35) contrast(1.1); }
.shield-outline { position: absolute; z-index: -1; pointer-events: none; opacity: 0.14; }
.shield-outline img { width: 100%; height: auto; }

/* -------------------------------------------------------------------------
   Home: 360° services (Build, Repair, Protect, Plan, Review).
   Numbered list up to 1099px; a ring with five stages and a centre hub from 1100px.
   ------------------------------------------------------------------------- */
/* Home split section heads (360° services, Where are you at?), Paul 2026-11-12.
   Left (.head-block): heading set one sentence per line, each line whole, with a red subheading about half
   the heading size. The heading scales to its column so it never squeezes the paragraph: --fit is
   100 / (width of the longest line in em), e.g. 7.5cqi for "Every building has a life cycle." (~13.2em).
   Right (.head-copy): 20px paragraph at full width, scaling with its own column (3.7cqi) on smaller laptops.
   --level: columns centred on each other; at full width the heading's first cap line and the subheading's
   baseline line up with the paragraph's first and last lines (6px bottom padding is an optical correction).
   --top: columns aligned to the top; the paragraph is lifted 9px (optical correction) so its first cap line
   starts level with the heading's (measured: within 1.5px from 1024px up). */
.head-block { container-type: inline-size; }
.head-block > .head-block__title { font-size: min(var(--fs-h2), var(--fit, 7.5cqi)); line-height: 1.04; } /* beats .page-start h1; h1 and h2 match */
.head-block__title span { display: block; }
@supports (width: 1cqi) { .head-block__title span { white-space: nowrap; } }
.section-head p.head-block__sub { margin-top: var(--space-4); font-size: clamp(1.3rem, 1.05rem + 0.8vw, 1.75rem); font-size: min(1.75rem, max(1.125rem, 3.9cqi)); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.section-head .head-copy p { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.75; }
@media (min-width: 960px) {
  .head-copy { container-type: inline-size; }
  .section-head .head-copy p { font-size: min(1.25rem, max(1.0625rem, 3.7cqi)); }
  .section-head--level { align-items: center; gap: var(--space-7); }
  .section-head--level .head-copy { padding-bottom: 6px; }
  .section-head--top { align-items: start; gap: var(--space-7); }
  .section-head--top .head-copy { margin-top: -9px; }
}
.lifecycle { position: relative; margin: clamp(1rem, 0.5rem + 2vw, 2.5rem) 0 0; }
.lifecycle__ring { display: none; }
.lifecycle__hub { display: grid; justify-items: center; align-content: center; gap: 0.3rem; width: 240px; height: 240px; margin: 0 auto var(--space-7); padding: 1.75rem; text-align: center; border: 1px solid var(--glass-border); border-radius: 50%; background: radial-gradient(circle at 50% 30%, rgba(var(--tint), 0.07), rgba(var(--tint), 0.015) 70%); }
.lifecycle__deg { font-size: clamp(2.5rem, 2rem + 2vw, 3.25rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1; color: var(--fg-strong); }
/* "Services" at about half the 360° size, read together as "360° Services" */
.lifecycle__hub strong { font-size: clamp(1.25rem, 1rem + 0.6vw, 1.625rem); letter-spacing: -0.02em; line-height: 1.1; color: var(--fg-strong); }
.lifecycle__stages { position: relative; list-style: none; display: grid; gap: var(--space-6); max-width: 560px; margin: 0 auto; }
.lifecycle__stages::before { content: ""; position: absolute; left: 31px; top: 32px; bottom: 32px; width: 2px; background: linear-gradient(var(--forticon-red), rgba(171, 5, 5, 0.25)); }
.lc { position: relative; display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: start; }
.lc__node { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; color: var(--fg-strong); background: var(--surface-2); border: 1px solid var(--glass-border-hover); box-shadow: var(--glass-highlight), 0 12px 30px rgba(0, 0, 0, 0.35); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.lc__node svg { width: 30px; height: 30px; }
.lc:hover .lc__node { border-color: var(--forticon-red); box-shadow: 0 0 0 6px rgba(171, 5, 5, 0.18); }
.lc__text { display: grid; gap: 0.2rem; }
.lc__num { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.12em; color: var(--forticon-red); }
.lc__text strong { font-size: clamp(1.1rem, 1rem + 0.3vw, 1.25rem); letter-spacing: -0.015em; line-height: 1.25; color: var(--fg-strong); }
.lc__text > span:last-child { font-size: var(--fs-small); line-height: 1.5; color: var(--fg); text-wrap: balance; }

@media (min-width: 1100px) {
  .lifecycle { --R: 200px; --node: 76px; --label: 250px; --cy: calc(var(--R) + 155px); height: calc(var(--cy) + var(--R) + 45px); }
  .lifecycle__ring { display: block; position: absolute; left: calc(50% - var(--R)); top: calc(var(--cy) - var(--R)); width: calc(var(--R) * 2); height: calc(var(--R) * 2); overflow: visible; }
  .lifecycle__track { fill: none; stroke: var(--hairline-dark); stroke-width: 1; }
  .lifecycle__progress { fill: none; stroke: var(--forticon-red); stroke-width: 2; stroke-dasharray: 1377; stroke-dashoffset: 0; }
  .lifecycle__arrows circle { fill: var(--bg); }
  .lifecycle__arrows path { fill: none; stroke: var(--forticon-red); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .lifecycle__hub { position: absolute; left: 50%; top: var(--cy); width: 272px; height: 272px; margin: 0; padding: 2.25rem; align-content: center; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle at 50% 30%, rgba(var(--tint), 0.07), rgba(var(--tint), 0.015) 70%); }
  .lifecycle__stages { display: block; max-width: none; margin: 0; }
  .lifecycle__stages::before { display: none; }
  .lc { position: absolute; left: calc(50% + var(--x) * var(--R)); top: calc(var(--cy) + var(--y) * var(--R)); display: block; width: var(--node); height: var(--node); transform: translate(-50%, -50%); }
  .lc__node { width: var(--node); height: var(--node); }
  .lc__node svg { width: 36px; height: 36px; }
  .lc__text { position: absolute; width: var(--label); }
  .lc--top .lc__text { left: 50%; bottom: calc(100% + 16px); width: 420px; transform: translateX(-50%); justify-items: center; text-align: center; }  .lc--right .lc__text { left: calc(100% + 22px); top: 50%; transform: translateY(-50%); }
  .lc--left .lc__text { right: calc(100% + 22px); top: 50%; transform: translateY(-50%); justify-items: end; text-align: right; }
  @media (max-width: 1279px) { .lifecycle { --R: 195px; --node: 72px; --label: 215px; } .lc__node svg { width: 32px; height: 32px; } .lifecycle__hub { width: 250px; height: 250px; padding: 2rem; } }
  /* Draw-on: the red ring sweeps round from the top, then the stages appear in order */
  .js .lifecycle .lifecycle__progress { transition: stroke-dashoffset 1.6s var(--ease) 0.2s; }
  .js .lifecycle:not(.is-visible) .lifecycle__progress { stroke-dashoffset: 1377; }
  .js .lifecycle .lc { transition: opacity 0.5s var(--ease) calc(0.35s + var(--i) * 0.22s); }
  .js .lifecycle .lifecycle__arrows { transition: opacity 0.6s var(--ease) 1.4s; }
  .js .lifecycle:not(.is-visible) .lc, .js .lifecycle:not(.is-visible) .lifecycle__arrows { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .js .lifecycle .lc, .js .lifecycle .lifecycle__arrows { opacity: 1 !important; }
  .js .lifecycle .lifecycle__progress { stroke-dashoffset: 0 !important; }
}
.audit .lifecycle .lc, .audit .lifecycle .lifecycle__arrows { opacity: 1 !important; }
.audit .lifecycle .lifecycle__progress { stroke-dashoffset: 0 !important; }

/* -------------------------------------------------------------------------
   Home: core capabilities (Paul, 2026-11-12). The same eight as the Services page, as compact numbered
   cards: top row = sand icon circle (like the 360° wheel nodes) with the red number and arrow on the right
   (like the pathway option cards), then title and one line. 4 across from 1100px, 2 from 640px, 1 on phones.
   ------------------------------------------------------------------------- */
.caps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 0.7rem + 1vw, 1.5rem); }
@media (min-width: 640px) { .caps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .caps { grid-template-columns: repeat(4, 1fr); } }
.caps > li { display: flex; }
.cap {
  position: relative; display: flex; flex-direction: column; gap: var(--space-3); width: 100%; overflow: hidden;
  padding: 1.25rem 1.35rem 1.5rem; text-decoration: none; color: var(--deep-ink);
  background: #FFFFFF; border: 1px solid rgba(21, 21, 26, 0.1); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(21, 21, 26, 0.06);
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.cap::before { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--forticon-red); transform: scaleX(0); transform-origin: left; transition: transform 380ms var(--ease); }
.cap:hover, .cap:focus-visible { transform: translateY(-3px); border-color: rgba(21, 21, 26, 0.18); box-shadow: 0 16px 36px rgba(21, 21, 26, 0.1); }
.cap:hover::before, .cap:focus-visible::before { transform: scaleX(1); }
.cap:focus-visible { outline: 2px solid var(--deep-ink); outline-offset: 3px; }
.cap__top { display: flex; align-items: center; justify-content: space-between; }
.cap__tag { display: inline-flex; align-items: center; gap: 0.5rem; }
.cap__num { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.12em; color: var(--forticon-red); }
.cap__arrow { width: 18px; height: 18px; color: rgba(21, 21, 26, 0.35); transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.cap:hover .cap__arrow, .cap:focus-visible .cap__arrow { color: var(--forticon-red); transform: translateX(3px); }
.cap__node {
  display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%;
  color: var(--deep-ink); background: var(--surface-2); border: 1px solid var(--glass-border-hover); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.cap__node svg { width: 24px; height: 24px; }
.cap__title { margin: var(--space-1) 0 0; font-size: clamp(1.05rem, 0.98rem + 0.25vw, 1.2rem); font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; color: var(--deep-ink); text-wrap: balance; }
.cap__text { font-size: var(--fs-small); line-height: 1.5; color: var(--fg); }
@media (prefers-reduced-motion: reduce) { .cap:hover, .cap:focus-visible { transform: none; } }
/* Line up titles and descriptions across each row, whatever the title length
   (icon cards: top row, title, text; photo cards: photo, top row, title, text). */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 640px) {
    .caps > li { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
    .caps--photo > li { grid-row: span 4; }
    .cap { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--space-3); align-content: start; }
    .cap--photo { grid-row: span 4; }
  }
}
@media (max-width: 639px) { .caps { gap: var(--space-3); } .cap { padding: 1rem 1.1rem 1.1rem; gap: var(--space-2); } }
/* Photo variant (home Selected projects): the project photo bleeds to the card edges in place of the icon,
   and the red line on top is location · sector instead of a number. */
.cap--photo { padding-top: 0; }
.cap__media { display: block; margin: 0 -1.35rem var(--space-2); aspect-ratio: 3 / 2; overflow: hidden; background: var(--surface-2); }
.cap__media picture, .cap__media img { display: block; width: 100%; height: 100%; }
.cap__media img { object-fit: cover; transition: transform 700ms var(--ease); }
.cap--photo:hover .cap__media img, .cap--photo:focus-visible .cap__media img { transform: scale(1.04); }
.cap__meta { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.4; color: var(--forticon-red); }
.cap--photo .cap__top { align-items: flex-start; gap: var(--space-3); }
.cap--photo .cap__arrow { flex: none; margin-top: 1px; }
@media (max-width: 639px) {
  .cap--photo { display: grid; grid-template-columns: 112px 1fr; column-gap: var(--space-4); row-gap: 0.2rem; align-items: start; padding: 0 1rem 0 0; }
  .cap--photo .cap__media { grid-column: 1; grid-row: 1 / span 3; width: 112px; height: 100%; min-height: 128px; margin: 0; aspect-ratio: auto; }
  .cap--photo .cap__top, .cap--photo .cap__title, .cap--photo .cap__text { grid-column: 2; }
  .cap--photo .cap__top { padding-top: 0.9rem; }
  .cap--photo .cap__text { padding-bottom: 0.9rem; }
}
/* Home page: "View Our ..." button sits under the section paragraph, beside the heading (saves a row per section). */
.head-copy__more { margin-top: var(--space-5); }

/* Section rhythm (--section-y and .section-head spacing) was tightened site-wide on 2026-11-12 so each
   section sits on one screen at common desktop sizes. */
.cap { row-gap: 0.625rem; }
/* Static (non-link) card for scope and issue lists on the Services pages: same look, no hover lift or arrow. */
.cap--static { cursor: default; }
.cap--static:hover { transform: none; border-color: rgba(21, 21, 26, 0.1); box-shadow: 0 10px 30px rgba(21, 21, 26, 0.06); }
.cap--static:hover::before { transform: scaleX(0); }
.cap__text a { color: var(--forticon-red); font-weight: 600; }
/* Three across for lists of 3 or 6 (Services pages). */
@media (min-width: 900px) { .caps--3 { grid-template-columns: repeat(3, 1fr); } }
@media (prefers-reduced-motion: reduce) { .cap--photo:hover .cap__media img { transform: none; } }

/* -------------------------------------------------------------------------
   Pathway tool: "Where are you at?"
   ------------------------------------------------------------------------- */
.pathway { position: relative; }
.pathway__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.pathway__progress { display: flex; align-items: center; gap: var(--space-4); }
.pathway__count { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.pathway__bars { display: flex; gap: 6px; }
.pathway__bars span { width: 44px; height: 3px; border-radius: 2px; background: rgba(128, 128, 128, 0.28); overflow: hidden; position: relative; }
.pathway__bars span::after { content: ""; position: absolute; inset: 0; background: var(--forticon-red); transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--ease); }
.pathway__bars span.is-done::after, .pathway__bars span.is-active::after { transform: scaleX(1); }
.pathway__bars span.is-active::after { opacity: 0.55; }
.pathway__stage { position: relative; }
.pathway__step { border: 0; margin: 0; padding: 0; min-width: 0; }
.pathway__step[hidden], .pathway__result[hidden] { display: none; }
.pathway__step.is-entering, .pathway__result.is-entering { animation: step-in 480ms var(--ease) both; }
@keyframes step-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.pathway__step.is-entering-back { animation: step-in-back 480ms var(--ease) both; }
@keyframes step-in-back { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
.pathway__q { display: block; float: left; width: 100%; margin: 0 0 var(--space-5); padding: 0; font-size: clamp(1.6rem, 1.25rem + 1.4vw, 2.4rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.05; color: inherit; }
.pathway__q:focus { outline: none; }
.pathway__hint { clear: both; margin: 0 0 var(--space-5); font-size: 1.05rem; }
.pathway__options { clear: both; display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 640px) { .pathway__options { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) {
  .pathway__options--5 { grid-template-columns: repeat(5, 1fr); }
  .pathway__options--4 { grid-template-columns: repeat(4, 1fr); }
  .pathway__options--6 { grid-template-columns: repeat(3, 1fr); }
}
.option { position: relative; display: block; cursor: pointer; }
.option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.option__card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-start; gap: var(--space-4);
  height: 100%; min-height: 140px; padding: 1.2rem 1.25rem 1.35rem; overflow: hidden;
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.option__card::before { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--forticon-red); transform: scaleX(0); transform-origin: left; transition: transform 380ms var(--ease); }
.option__top { display: flex; align-items: center; justify-content: space-between; }
.option__mark {
  width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid currentColor; opacity: 0.45; display: grid; place-items: center;
  transition: all var(--dur-fast) var(--ease);
}
.option__mark::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--forticon-red); transform: scale(0); transition: transform var(--dur-fast) var(--ease); }
/* Labels sit directly under the letter so the first line lines up across every card */
.option__label { display: block; font-weight: 700; font-size: clamp(1.1rem, 1rem + 0.3vw, 1.25rem); line-height: 1.3; letter-spacing: -0.015em; text-wrap: balance; }
.option__sub { display: block; margin-top: 0.4rem; font-size: 0.95rem; font-weight: 500; line-height: 1.4; opacity: 0.75; }
.option:hover .option__card { transform: translateY(-3px); }
.option:hover .option__card::before, .option input:checked + .option__card::before { transform: scaleX(1); }
.option input:checked + .option__card .option__mark { opacity: 1; border-color: var(--forticon-red); }
.option input:checked + .option__card .option__mark::after { transform: scale(1); }
.option input:focus-visible + .option__card { outline: 2px solid currentColor; outline-offset: 3px; }
.glass .option__card, .pathway--dark .option__card { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius); box-shadow: var(--glass-highlight), 0 12px 32px rgba(0, 0, 0, 0.25); -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur)); color: var(--fg-strong); }
.pathway--dark .option input:checked + .option__card { border-color: rgba(var(--tint), 0.35); background: rgba(var(--tint), 0.09); }
.pathway--light .option__card { background: var(--frost-bg); border: 1px solid var(--frost-border); border-radius: var(--radius); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 10px 30px rgba(21, 21, 26, 0.06); -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur)); color: var(--deep-ink); }
.pathway--light .option input:checked + .option__card { border-color: rgba(21, 21, 26, 0.3); background: rgba(255, 255, 255, 0.85); }
.pathway__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-6); }
.pathway__back { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 0.25rem; background: none; border: 0; font-weight: 700; font-size: 0.95rem; cursor: pointer; color: inherit; }
.pathway__back svg { width: 1em; height: 1em; transform: rotate(180deg); color: var(--forticon-red); }
.pathway__back[hidden] { display: none; }
.pathway__nav [type="submit"] { margin-left: auto; }

/* Pathway result */
.pathway__result { display: grid; gap: var(--space-7); }
.track { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; list-style: none; padding: 0; }
.track::before { content: ""; position: absolute; left: 10%; right: 10%; top: 31px; height: 1px; background: currentColor; opacity: 0.18; }
.track__step { position: relative; display: grid; justify-items: center; gap: 0.6rem; text-align: center; padding-inline: 0.25rem; }
.track__icon { position: relative; z-index: 1; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; border: 1px solid rgba(128, 128, 128, 0.3); transition: all 500ms var(--ease); }
.pathway--dark .track__icon { background: var(--surface-2); }
.pathway--light .track__icon { background: var(--warm-sand); }
.track__icon svg { width: 30px; height: 30px; }
.track__num { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; opacity: 0.7; }
.track__label { font-size: 0.8rem; font-weight: 700; line-height: 1.25; max-width: 14ch; }
.track__step.is-done .track__icon { opacity: 0.55; }
.track__step.is-current .track__icon { background: var(--forticon-red); border-color: var(--forticon-red); color: var(--white); box-shadow: 0 0 0 8px rgba(171, 5, 5, 0.16); --icon-accent: var(--white); }
.track__step.is-current .track__num { color: var(--forticon-red); opacity: 1; }
.pathway--dark .track__step.is-current .track__num { color: var(--fg-strong); }
.track__here { position: absolute; top: -26px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; color: var(--forticon-red); }
.pathway--dark .track__here { color: var(--fg-strong); }
.track__step.is-next .track__icon { border-style: dashed; border-color: var(--forticon-red); }
@media (max-width: 640px) {
  .track { grid-template-columns: 1fr; gap: var(--space-3); }
  .track::before { left: 30px; right: auto; top: 10px; bottom: 10px; width: 1px; height: auto; }
  .track__step { grid-template-columns: 62px auto 1fr; justify-items: start; align-items: center; text-align: left; gap: var(--space-4); }
  .track__label { max-width: none; }
  .track__here { position: static; grid-column: 3; justify-self: end; }
  .track__step:not(.is-current) .track__here { display: none; }
}
.result__grid { display: grid; gap: var(--space-5); }
@media (min-width: 960px) { .result__grid { grid-template-columns: 1.2fr 0.8fr; align-items: start; } }
.result__main { padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); display: grid; gap: var(--space-5); }
.result__main h3 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem); letter-spacing: -0.025em; line-height: 1.05; font-weight: 800; }
.result__main h3:focus { outline: none; }
.result__tag { display: inline-flex; align-self: start; justify-self: start; align-items: center; gap: 0.5em; padding: 0.4rem 0.7rem; border-radius: 4px; background: var(--forticon-red); color: var(--fg-strong); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; }
.result__block h4 { margin-bottom: 0.4rem; font-size: 0.8rem; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; font-weight: 700; }
.result__block p { font-size: 1rem; }
.pathway--dark .result__block p { color: var(--fg); }
.pathway--light .result__block p { color: var(--text-on-light); }
.result__side { display: grid; gap: var(--space-5); padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); }
.result__side h4 { font-size: 0.8rem; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; margin-bottom: var(--space-3); }
.result__links { list-style: none; display: grid; gap: 0.25rem; }
.result__links a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid rgba(128, 128, 128, 0.22); text-decoration: none; font-weight: 600; font-size: 0.97rem; }
.result__links a svg { width: 14px; height: 14px; color: var(--forticon-red); flex: none; transition: transform var(--dur-fast) var(--ease); }
.result__links a:hover svg { transform: translateX(4px); }
.result__links small { display: block; font-weight: 500; font-size: 0.8rem; opacity: 0.7; }
.result__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }
.result__mail { display: inline-flex; align-items: center; gap: 0.55em; font-weight: 700; font-size: 0.95rem; text-decoration: underline; text-decoration-color: rgba(171, 5, 5, 0.8); text-underline-offset: 0.3em; }
.result__mail svg { width: 18px; height: 18px; color: var(--forticon-red); }
.pathway__restart { background: none; border: 0; padding: 0.5rem 0; font-weight: 600; font-size: 0.9rem; cursor: pointer; color: inherit; opacity: 0.75; text-decoration: underline; text-underline-offset: 0.3em; }
.pathway__restart:hover { opacity: 1; }

/* -------------------------------------------------------------------------
   Expertise grid
   ------------------------------------------------------------------------- */
.service-card { min-height: 280px; }
.service-card .icon { width: 52px; height: 52px; margin-bottom: var(--space-4); }
.service-card h3 { max-width: 16ch; }
.service-card p { max-width: 38ch; }
.service-card .link-arrow { font-size: 0.9rem; }

/* -------------------------------------------------------------------------
   Projects
   ------------------------------------------------------------------------- */
.project-card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 380px; border-radius: var(--radius); overflow: hidden; isolation: isolate;
  border: 1px solid var(--glass-border); background: var(--surface-2); color: var(--fg-strong); text-decoration: none;
  box-shadow: var(--glass-shadow); transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.project-card::before { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; z-index: 2; background: var(--forticon-red); transform: scaleX(0); transform-origin: left; transition: transform 420ms var(--ease); }
.project-card:hover, .project-card:focus-within { transform: translateY(-4px); border-color: var(--glass-border-hover); }
.project-card:hover::before, .project-card:focus-within::before { transform: scaleX(1); }
.project-card__media { position: absolute; inset: 0; z-index: -2; }
.project-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.project-card:hover .project-card__media img { transform: scale(1.04); }
.project-card__media .placeholder { position: absolute; inset: 0; place-items: start start; padding: clamp(1rem, 0.8rem + 0.6vw, 1.5rem); }
.project-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(12, 12, 16, 0.95) 0%, rgba(12, 12, 16, 0.55) 45%, rgba(12, 12, 16, 0.05) 75%); }
.project-card__body { display: grid; gap: var(--space-3); padding: clamp(1.25rem, 1rem + 1vw, 2rem); }
.project-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg); }
.project-card__meta span + span::before { content: ""; display: inline-block; width: 4px; height: 4px; margin-right: 1rem; border-radius: 50%; background: var(--forticon-red); vertical-align: middle; }
.project-card h3 { font-size: clamp(1.35rem, 1.2rem + 0.55vw, 1.75rem); letter-spacing: -0.025em; line-height: 1.1; }
.project-card__meta { margin: 0; }
.project-card__summary { margin: 0; font-size: var(--fs-small); line-height: 1.45; color: var(--fg); }
.project-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-2); }
.project-card .value { position: absolute; top: clamp(1rem, 0.8rem + 0.6vw, 1.5rem); right: clamp(1rem, 0.8rem + 0.6vw, 1.5rem); }
.project-card .team-flag { position: absolute; top: clamp(1rem, 0.8rem + 0.6vw, 1.5rem); left: clamp(1rem, 0.8rem + 0.6vw, 1.5rem); }
.project-card button.stretched { position: static; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
.project-card .stretched::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.project-card:has(.stretched:focus-visible) { outline: 2px solid var(--fg-strong); outline-offset: 3px; }
.project-card .stretched:focus-visible { outline: none; box-shadow: none; }

.project-grid { display: grid; gap: clamp(1rem, 0.7rem + 1vw, 1.5rem); grid-template-columns: 1fr; }
@media (min-width: 720px) { .project-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .project-grid { grid-template-columns: repeat(3, 1fr); } }
.project-grid .project-card { min-height: 440px; }
.project-grid .project-card[hidden] { display: none; }
/* Sector with no project yet: blurred photo, "Project update coming soon", not a link */
.project-card--soon .project-card__media img { filter: blur(16px) saturate(0.55) brightness(0.8); transform: scale(1.18); }
.project-card--soon:hover, .project-card--soon:focus-within { transform: none; border-color: var(--glass-border); }
.project-card--soon:hover::before { transform: scaleX(0); }
.project-card--soon:hover .project-card__media img { transform: scale(1.18); }
.empty-state { padding: var(--space-7); text-align: center; color: var(--text-on-dark-muted); }

/* Project detail dialog: glass panel */
.project-dialog {
  width: min(1080px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; margin: auto;
  border: 1px solid rgba(var(--tint), 0.14); border-radius: var(--radius); color: var(--fg);
  background: rgba(21, 21, 26, 0.78);
  -webkit-backdrop-filter: blur(28px) saturate(150%); backdrop-filter: blur(28px) saturate(150%);
  box-shadow: var(--glass-highlight), 0 40px 120px rgba(0, 0, 0, 0.6); overflow: auto; overscroll-behavior: contain;
}
.project-dialog::backdrop { background: rgba(8, 8, 11, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.project-dialog[open] { animation: dialog-in 420ms var(--ease) both; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(16px) scale(0.99); } to { opacity: 1; transform: none; } }
.project-dialog__media { position: relative; aspect-ratio: 16 / 8; background: var(--surface-2); }
.project-dialog__media img, .project-dialog__media .placeholder { width: 100%; height: 100%; object-fit: cover; }
.project-dialog__body { display: grid; gap: var(--space-6); padding: clamp(1.5rem, 1rem + 2vw, 3rem); }
@media (min-width: 860px) { .project-dialog__body { grid-template-columns: 1.3fr 0.7fr; gap: var(--space-8); } }
.project-dialog h2 { font-size: clamp(1.8rem, 1.3rem + 2vw, 3rem); }
.project-dialog__close {
  position: absolute; top: 14px; right: 14px; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: rgba(21, 21, 26, 0.7); border: 1px solid rgba(var(--tint), 0.2); color: var(--fg-strong); cursor: pointer;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.project-dialog__close:hover { background: var(--forticon-red); border-color: var(--forticon-red); }
.facts { display: grid; gap: 0; list-style: none; border-top: 1px solid var(--hairline-dark); }
.facts li { display: grid; gap: 0.2rem; padding: 0.9rem 0; border-bottom: 1px solid var(--hairline-dark); }
.facts dt, .facts .k { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-on-dark-muted); }
.facts .v { color: var(--fg-strong); font-weight: 600; }
.project-detail[hidden] { display: none !important; }

/* Project pages: details, gallery (one large photo, three stacked), next/previous */
.project-intro { display: grid; gap: var(--space-7); align-items: start; }
@media (min-width: 960px) { .project-intro { grid-template-columns: minmax(280px, 0.8fr) 1.6fr; gap: var(--space-9); } }
.project-facts { padding: clamp(1.25rem, 1rem + 1vw, 2rem); }
.project-facts__title { font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--fg-strong); margin-bottom: var(--space-4); }
.project-overview { max-width: 60ch; }
.works-list { max-width: 60ch; }
.works-list li { color: var(--fg); }
.gallery-head { margin-bottom: var(--space-5); }
.gallery { display: grid; gap: clamp(0.5rem, 0.3rem + 0.6vw, 0.9rem); grid-template-columns: repeat(3, 1fr); }
.gallery__item { position: relative; display: block; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface-2); aspect-ratio: 1; }
.gallery__item--main { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.gallery__item:hover img { transform: scale(1.04); }
.gallery__item:focus-visible { outline: 2px solid var(--fg-strong); outline-offset: 3px; }
@media (min-width: 900px) {
  .gallery { grid-template-columns: 2fr 1fr; grid-template-rows: repeat(3, 1fr); height: clamp(520px, 46vw, 760px); }
  .gallery__item, .gallery__item--main { aspect-ratio: auto; }
  .gallery__item--main { grid-column: 1; grid-row: 1 / span 3; }
}
.project-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-4); margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--hairline-dark); }
.project-nav__link { display: grid; gap: 0.2rem; text-decoration: none; color: var(--fg-strong); }
.project-nav__link--next { text-align: right; }
.project-nav__dir { font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-on-dark-muted); }
.project-nav__name { font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; }
.project-nav__link:hover .project-nav__name { text-decoration: underline; text-decoration-color: var(--forticon-red); text-underline-offset: 0.3em; }
.project-nav__all { justify-self: center; padding: 0.6rem 1rem; border-radius: var(--radius-btn); border: 1px solid var(--glass-border); font-size: 0.9rem; font-weight: 600; color: var(--fg); text-decoration: none; }
.project-nav__all:hover { color: var(--fg-strong); border-color: var(--glass-border-hover); }
@media (max-width: 560px) { .project-nav { grid-template-columns: 1fr 1fr; } .project-nav__all { grid-column: 1 / -1; grid-row: 2; } }

/* Lightbox */
.lightbox { width: min(1400px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; margin: auto; border: 0; background: transparent; overflow: visible; }
.lightbox::backdrop { background: rgba(8, 8, 11, 0.9); }
.lightbox img { display: block; max-width: 100%; max-height: calc(100dvh - 2rem); margin: auto; border-radius: var(--radius-sm); }
.lightbox__close { position: absolute; top: -0.5rem; right: -0.5rem; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); background: var(--deep-ink); color: var(--white); cursor: pointer; }
.lightbox__close:hover { background: var(--forticon-red); border-color: var(--forticon-red); }

/* Showreel player (About page; the home page opens it in a dialog). Poster first, play button bottom left so
   it never covers the logo in the poster frame. */
.showreel { position: relative; margin: 0; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #0C0C10; box-shadow: 0 18px 44px rgba(21, 21, 26, 0.18); }
.showreel video { display: block; width: 100%; height: 100%; object-fit: cover; background: #0C0C10; }
.showreel__play { display: none; }
.js .showreel__play {
  position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-start; padding: clamp(0.9rem, 0.6rem + 1vw, 1.5rem);
  border: 0; cursor: pointer; color: #FFFFFF; font: inherit; text-align: left;
  background: linear-gradient(0deg, rgba(10, 9, 20, 0.55) 0%, rgba(10, 9, 20, 0) 45%);
}
.showreel__pill { display: inline-flex; align-items: center; gap: 0.75rem; font-size: 0.95rem; font-weight: 700; }
.showreel__icon { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--forticon-red); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); transition: transform var(--dur-fast) var(--ease); }
.showreel__icon svg { width: 20px; height: 20px; margin-left: 3px; fill: #FFFFFF; }
.showreel__play:hover .showreel__icon, .showreel__play:focus-visible .showreel__icon { transform: scale(1.08); }
.showreel__play:focus-visible { outline: 2px solid #FFFFFF; outline-offset: -4px; }
.showreel__time { font-weight: 500; opacity: 0.8; }
.showreel.is-playing .showreel__play { display: none; }
.showreel-dialog .showreel { box-shadow: none; }
.showreel-dialog .lightbox__close { z-index: 2; } /* sits over the video's top-right corner */

/* -------------------------------------------------------------------------
   Process timeline (How we work)
   ------------------------------------------------------------------------- */
.timeline { position: relative; display: grid; gap: var(--space-6); list-style: none; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 1px; background: var(--hairline-dark); }
.timeline__step { position: relative; display: grid; gap: var(--space-3); padding-left: 2.5rem; }
.timeline__dot { position: absolute; left: 0; top: 4px; width: 13px; height: 13px; border-radius: 50%; background: var(--deep-ink); border: 1px solid rgba(var(--tint), 0.3); }
.timeline__step:first-child .timeline__dot, .timeline__step.is-lit .timeline__dot { background: var(--forticon-red); border-color: var(--forticon-red); box-shadow: 0 0 0 6px rgba(171, 5, 5, 0.18); }
.timeline__icon { width: 52px; height: 52px; color: var(--fg-strong); }
.timeline__step h3 { font-size: 1.2rem; }
.timeline__step p { font-size: var(--fs-small); color: var(--text-on-dark-muted); max-width: 32ch; }
@media (min-width: 1000px) {
  .timeline { grid-template-columns: repeat(5, 1fr); gap: var(--space-5); }
  .timeline::before { left: 0; right: 0; top: 6px; bottom: auto; width: auto; height: 1px; }
  .timeline__step { padding-left: 0; padding-top: 2.75rem; gap: var(--space-4); }
  .timeline__dot { top: 0; }
}

/* Numbered process list (service pages) */
.steps { display: grid; gap: clamp(1rem, 0.7rem + 1vw, 1.5rem); list-style: none; counter-reset: step; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .steps--3 { grid-template-columns: repeat(3, 1fr); } .steps--4 { grid-template-columns: repeat(4, 1fr); } .steps--5 { grid-template-columns: repeat(5, 1fr); } }
.steps > li { counter-increment: step; display: grid; align-content: start; gap: var(--space-3); padding-top: var(--space-5); border-top: 1px solid var(--hairline-dark); }
.surface-light .steps > li { border-top-color: rgba(21, 21, 26, 0.16); }
.steps > li::before { content: counter(step, decimal-leading-zero); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.1em; color: var(--forticon-red); }
.section--ink .steps > li::before, .section--black .steps > li::before { color: var(--fg); }
.steps h3 { font-size: 1.15rem; }
.steps p { font-size: var(--fs-small); color: var(--text-on-dark-muted); }
.surface-light .steps p { color: var(--text-on-light-muted); }

/* -------------------------------------------------------------------------
   Proof points, values, split content
   ------------------------------------------------------------------------- */
.proof-card { min-height: 240px; justify-content: space-between; }
.proof-card .index-num { margin-bottom: var(--space-6); }
/* Line up titles and body copy across a row of cards, whatever the title length */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 700px) {
    .grid > .card { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: var(--space-4); min-height: 0; align-content: start; }
    .grid:has(> .card > :nth-child(4)) > .card { grid-row: span 4; }
    .grid:has(> .card > :nth-child(5)) > .card { grid-row: span 5; }
    .grid > .card > .card-foot { align-self: end; margin-top: 0; }
    .grid > .card > .chip, .grid > .card > .card-foot, .grid > .card > .index-num { justify-self: start; }
    .proof-card > div { display: contents; }
    .grid > .proof-card { row-gap: 0; }
    .proof-card p { margin-top: var(--space-3) !important; }
    .service-card .icon { margin-bottom: var(--space-2); }
  }
}
.split { display: grid; gap: var(--space-7); align-items: start; }
@media (min-width: 960px) { .split { grid-template-columns: 0.9fr 1.1fr; gap: var(--space-9); } .split--even { grid-template-columns: 1fr 1fr; } }
.split h2 { font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem); }
.split__media { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; }
.split__media img, .split__media .placeholder { width: 100%; height: 100%; object-fit: cover; }
.prose p { color: var(--text-on-dark); }
.prose p + p { margin-top: 1em; }
.surface-light .prose p { color: var(--text-on-light); }

/* Leadership profile photos (About page) */
.profile__photo picture { display: block; width: 100%; height: 100%; }
.profile__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: grayscale(1) contrast(1.05); }

.profile { display: grid; gap: var(--space-6); padding: clamp(1.25rem, 1rem + 1vw, 2rem); }
@media (min-width: 860px) { .profile { grid-template-columns: 280px 1fr; gap: var(--space-7); } }
.profile__photo { aspect-ratio: 4 / 5; border-radius: var(--radius-sm); overflow: hidden; }
.profile__role { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg); margin: var(--space-2) 0 var(--space-5); }
.profile h3 { font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem); letter-spacing: -0.03em; font-weight: 800; }
.profile p { color: var(--fg); }

/* Logo strip: single-colour white marks drifting right to left without stopping, dimmed so they support
   the page rather than lead it. Not interactive: no links, no hover state. Two identical tracks each move
   one track-width, so the loop never jumps. A hairline separates memberships from materials and tooling.
   Reduced-motion system settings get a static wrapped row instead. */
.logo-strip { border-top: 1px solid var(--hairline-dark); padding-block: clamp(2.5rem, 1.75rem + 2.5vw, 4rem); }
.marquee { --gap: clamp(3rem, 2rem + 3vw, 5.5rem); --scale: 1; pointer-events: none; user-select: none; }
.marquee__viewport {
  display: flex; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__track {
  flex: none; display: flex; align-items: center; gap: var(--gap); padding-right: var(--gap);
  min-height: calc(60px * var(--scale)); list-style: none; margin: 0;
  animation: marquee 75s linear infinite;
}
@keyframes marquee { to { transform: translateX(-100%); } }
.marquee li { flex: none; line-height: 0; }
.marquee img { height: calc(var(--h, 40px) * var(--scale)); width: auto; max-width: none; opacity: 0.55; -webkit-user-drag: none; }
.marquee__rule { align-self: center; width: 1px; height: calc(44px * var(--scale)); background: rgba(var(--tint), 0.18); }
@media (max-width: 699px) { .marquee { --scale: 0.8; --gap: 2.5rem; } }
@media (prefers-reduced-motion: reduce) {
  .marquee__viewport { -webkit-mask-image: none; mask-image: none; justify-content: center; }
  .marquee__track { flex: 1 1 auto; flex-wrap: wrap; justify-content: center; row-gap: var(--space-6); padding-right: 0; animation: none; }
  .marquee__track[aria-hidden], .marquee__track > .marquee__rule:last-child { display: none; }
}
.audit .marquee__track { animation: none; }

/* CTA band */
.cta-band { position: relative; overflow: hidden; isolation: isolate; background: var(--ink-950); }
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(70% 90% at 85% 100%, rgba(171, 5, 5, 0.22), transparent 70%), radial-gradient(40% 60% at 0% 0%, rgba(171, 5, 5, 0.08), transparent 70%);
}
.cta-band__grid { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 1000px) { .cta-band__grid { grid-template-columns: 1.2fr 0.8fr; } }
.cta-band h2 { font-size: var(--fs-h2); max-width: 17ch; }
.cta-band h2.display { font-size: var(--fs-hero); max-width: none; }
.cta-band p:not(.eyebrow) { font-size: var(--fs-lead); color: var(--fg); }
.cta-band__side { display: grid; gap: var(--space-5); }
.cta-band__phone { display: inline-flex; align-items: center; gap: 0.6rem; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 800; letter-spacing: -0.02em; color: var(--fg-strong); text-decoration: none; font-variant-numeric: tabular-nums; }
.cta-band__phone svg { width: 22px; height: 22px; color: var(--forticon-red); }
.cta-band__phone:hover { text-decoration: underline; text-decoration-color: var(--forticon-red); }

/* FAQ accordion */
.faq { display: grid; list-style: none; border-top: 1px solid var(--hairline-dark); }
.faq details { border-bottom: 1px solid var(--hairline-dark); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); min-height: 72px; padding: 1.1rem 0; cursor: pointer; list-style: none;
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem); font-weight: 700; color: var(--fg-strong); letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 14px; height: 14px; background:
    linear-gradient(var(--forticon-red), var(--forticon-red)) center / 14px 2px no-repeat,
    linear-gradient(var(--forticon-red), var(--forticon-red)) center / 2px 14px no-repeat;
  transition: transform var(--dur-fast) var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq__a { padding: 0 0 1.5rem; color: var(--fg); max-width: 70ch; }

/* Sector list */
.sectors { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; }
.sectors li { padding: 0.6rem 1rem; border-radius: var(--radius-btn); border: 1px solid rgba(21, 21, 26, 0.16); font-weight: 600; font-size: 0.95rem; }

/* Insights */
.insight-card { min-height: 260px; }
.insight-card .chip { align-self: flex-start; }
.insight-card h3 { font-size: 1.3rem; }
.soon { display: inline-flex; align-items: center; gap: 0.5em; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-on-dark-muted); }
.soon::before { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--forticon-red); }

/* -------------------------------------------------------------------------
   Contact
   ------------------------------------------------------------------------- */
/* Get in touch: a plain details list beside the map (no tiles) */
.contact-split { display: grid; gap: var(--space-8); align-items: stretch; }
@media (min-width: 960px) { .contact-split { grid-template-columns: 1fr 1.1fr; gap: var(--space-9); } }
.contact-list { margin: var(--space-7) 0 0; border-top: 1px solid var(--hairline-dark); }
.contact-list > div { display: grid; grid-template-columns: 190px 1fr; gap: var(--space-5); padding: 1.1rem 0; border-bottom: 1px solid var(--hairline-dark); }
.contact-list dt { padding-top: 0.25rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-on-dark-muted); }
.contact-list dd { margin: 0; font-size: 1.05rem; font-weight: 600; line-height: 1.45; color: var(--fg-strong); }
.contact-list address { font-style: normal; }
.contact-list dd > a:not(.contact-list__dir) { color: var(--fg-strong); text-decoration: none; }
.contact-list dd > a:not(.contact-list__dir):hover { text-decoration: underline; text-decoration-color: var(--forticon-red); }
.contact-list small { display: block; margin-top: 0.3rem; font-size: var(--fs-xs); font-weight: 500; color: var(--text-on-dark-muted); }
.contact-list__dir { display: inline-flex; align-items: center; gap: 0.45em; margin-top: 0.45rem; font-size: var(--fs-xs); font-weight: 700; color: var(--fg); text-decoration: none; }
.contact-list__dir svg { width: 0.95em; height: 0.95em; color: var(--forticon-red); transition: transform var(--dur-fast) var(--ease); }
.contact-list__dir:hover { color: var(--fg-strong); }
.contact-list__dir:hover svg { transform: translateX(3px); }
.contact-list dd > a.contact-list__social { display: inline-flex; align-items: center; gap: 0.6em; }
.contact-list__social svg { width: 1.25em; height: 1.25em; flex: none; color: var(--fg); transition: color var(--dur-fast) var(--ease); }
.contact-list__social:hover svg { color: var(--fg-strong); }
@media (max-width: 520px) { .contact-list > div { grid-template-columns: 1fr; gap: 0.3rem; } }

/* Find us: light Google map in greyscale (as on the Kilmore Group contact page) */
.find-us { display: flex; flex-direction: column; }
.map { position: relative; flex: 1; min-height: 360px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--glass-border); background: #E5E3DF; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1); }
/* Leaflet map (main.js section 9): greyscale streets, pins stay Forticon red */
.map.leaflet-container { font-family: inherit; }
.map .leaflet-tile-pane { filter: grayscale(1) contrast(1.05); }
.map-pin { background: none; border: 0; }
.map-pin svg { display: block; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35)); }
.map .map-label { padding: 3px 8px; border: 0; border-radius: 4px; background: var(--deep-ink); color: var(--white); font-size: 12px; font-weight: 700; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); }
.map .map-label::before { border-top-color: var(--deep-ink); }
.map .leaflet-popup-content { font-size: 13px; line-height: 1.5; color: var(--deep-ink); }
.map .leaflet-popup-content strong { color: var(--deep-ink); }
.map .leaflet-popup-content a { color: var(--forticon-red); font-weight: 700; }
.map-caption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); max-width: none; margin: var(--space-4) 0 0; font-size: var(--fs-small); color: var(--text-on-dark-muted); }

.form { display: grid; gap: var(--space-5); padding: clamp(1.25rem, 1rem + 1.5vw, 2.5rem); }
.form__row { display: grid; gap: var(--space-5); }
@media (min-width: 700px) { .form__row--2 { grid-template-columns: repeat(2, 1fr); } }
.field { display: grid; gap: 0.45rem; }
.field label { font-size: 0.9rem; font-weight: 700; color: var(--deep-ink); }
.field .opt { font-weight: 500; color: var(--text-on-light-muted); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 0.8rem 0.95rem; border-radius: var(--radius-btn);
  font: inherit; font-size: 1rem; color: var(--deep-ink); background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(21, 21, 26, 0.22); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field textarea { min-height: 160px; resize: vertical; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 2.5rem; background-image: linear-gradient(45deg, transparent 50%, var(--deep-ink) 50%), linear-gradient(135deg, var(--deep-ink) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--deep-ink); box-shadow: 0 0 0 3px rgba(171, 5, 5, 0.3); }
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--forticon-red); }
.form__note { font-size: var(--fs-xs); color: var(--text-on-light-muted); }
.form__status { font-weight: 600; }

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
.site-footer { position: relative; background: var(--ink-950); border-top: 1px solid var(--hairline-dark); padding: clamp(3.5rem, 2.5rem + 4vw, 6rem) 0 2rem; font-size: var(--fs-small); }
.footer__grid { display: grid; gap: var(--space-7); }
@media (min-width: 760px) { .footer__grid { grid-template-columns: repeat(3, 1fr); } .footer__brand { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } .footer__brand { grid-column: auto; } }
.footer__brand img { width: 224px; }
.footer__tagline { margin: 0.9rem 0 1.25rem; font-weight: 700; color: var(--fg-strong); letter-spacing: -0.005em; font-size: 1rem; }
.footer__blurb { color: var(--text-on-dark-muted); max-width: 42ch; }
.footer__col h2 { font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--fg-strong); margin-bottom: var(--space-4); }
.footer__col ul { list-style: none; display: grid; gap: 0.15rem; }
.footer__col a { display: inline-block; padding: 0.35rem 0; color: var(--fg); text-decoration: none; }
.footer__col a:hover { color: var(--fg-strong); text-decoration: underline; text-decoration-color: var(--forticon-red); }
.footer__col address { font-style: normal; color: var(--fg); line-height: 1.7; }
.footer__address { margin-bottom: var(--space-4); }
.footer__col a.footer__social { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-top: var(--space-4); padding: 0; border: 1px solid var(--hairline-dark); border-radius: 50%; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.footer__social svg { width: 18px; height: 18px; }
.footer__col a.footer__social:hover, .footer__col a.footer__social:focus-visible { color: var(--fg-strong); border-color: var(--forticon-red); }
.footer__label { display: block; margin-bottom: 0.15rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-on-dark-muted); }
.footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); margin-top: clamp(3rem, 2rem + 3vw, 5rem); padding-top: var(--space-5); border-top: 1px solid var(--hairline-dark); font-size: var(--fs-xs); color: var(--text-on-dark-muted); }
.footer__legal ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.footer__legal a { color: var(--fg); text-decoration: none; }
.footer__legal a:hover { color: var(--fg-strong); text-decoration: underline; }

/* 404 */
.not-found { min-height: 100vh; display: flex; align-items: center; padding: 140px 0 80px; overflow: hidden; position: relative; isolation: isolate; }
.not-found .shield-outline { width: min(900px, 110vw); right: -18%; top: 50%; transform: translateY(-50%); opacity: 0.12; }
.not-found .code { font-size: clamp(5rem, 3rem + 10vw, 12rem); font-weight: 800; letter-spacing: -0.06em; line-height: 0.85; color: var(--fg-strong); }

/* How to Engage: stage rows */
.stage-list { list-style: none; display: grid; gap: var(--space-4); }
.stage-row { display: grid; gap: var(--space-5); }
.stage-row__head { display: flex; align-items: center; gap: var(--space-4); }
.stage-row__cols { display: grid; gap: var(--space-5); }
.stage-row h4 { font-size: var(--fs-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--forticon-red); }
@media (min-width: 900px) {
  .stage-row { grid-template-columns: 120px 1fr; align-items: start; }
  .stage-row__head { flex-direction: column; align-items: flex-start; }
  .stage-row__cols { grid-template-columns: 1.1fr 1fr 1fr; gap: var(--space-7); }
}

/* Crew mosaic: real people, real work */
.crew-grid { display: grid; gap: clamp(1rem, 0.7rem + 1vw, 1.5rem); /* same gap as the home card grids */ grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(150px, 22vw, 230px); }
.crew-grid figure { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface-2); }
.crew-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.crew-grid figure:hover img { transform: scale(1.04); }
.crew-grid .tall { grid-row: span 2; }
.crew-grid .wide { grid-column: span 2; }
@media (min-width: 900px) {
  .crew-grid { grid-template-columns: repeat(4, 1fr); }
}
/* Desktop: the eight photos as one two-row mosaic (6 columns: two tall, two wide, four single) so the
   section fits on one screen. Dense flow fills every cell in HTML order. */
@media (min-width: 1100px) {
  .crew-grid { grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(160px, 15vw, 215px); grid-auto-flow: dense; }
}

/* Capability statement page */
.cap-previews { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--space-3); }
.cap-preview { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 6px; border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); }
.cap-preview--main { grid-row: 1 / span 2; height: auto; transition: transform var(--dur-fast) var(--ease); }
.cap-preview--main img { width: 100%; height: auto; border-radius: 6px; }
.cap-preview--main:hover { transform: translateY(-4px); }
.details-list { display: grid; gap: 0; margin: 0; }
.details-list > div { display: grid; grid-template-columns: minmax(120px, 0.8fr) 1.2fr; gap: var(--space-4); padding: 0.85rem 0; border-bottom: 1px solid rgba(21, 21, 26, 0.12); }
.details-list > div:last-child { border-bottom: 0; }
.details-list dt { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-on-light-muted); }
.details-list dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-weight: 600; color: var(--deep-ink); }
@media (max-width: 480px) { .details-list > div { grid-template-columns: 1fr; gap: 0.2rem; } }
.details-list a { color: var(--deep-ink); }
.register-web { overflow-x: auto; }
.register-web table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.register-web th { text-align: left; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-on-dark-muted); padding: 0 1rem 0.8rem 0; border-bottom: 1px solid var(--glass-border-hover); }
.register-web td { padding: 0.9rem 1rem 0.9rem 0; border-bottom: 1px solid var(--hairline-dark); vertical-align: top; }
.register-web td:first-child { color: var(--fg-strong); font-weight: 700; }
@media (max-width: 640px) { .register-web thead { display: none; } .register-web tr { display: grid; padding: 0.8rem 0; border-bottom: 1px solid var(--hairline-dark); } .register-web td { border: 0; padding: 0.1rem 0; } }

/* Client testimonials (generated from testimonials.json; nothing renders until one is approved) */
.testimonial { margin: 0; display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 960px) { .testimonial--large.testimonial--video { grid-template-columns: 1.3fr 1fr; gap: var(--space-8); } }
.testimonial__video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); }
.testimonial__video video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--ink-950); }
.testimonial__quote { margin: 0; }
.testimonial__quote::before { content: "\201C"; display: block; height: 0.5em; margin-bottom: var(--space-3); font-size: 4.5rem; font-weight: 800; line-height: 1; color: var(--forticon-red); }
.testimonial__quote p { margin: 0; max-width: 46ch; font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); font-weight: 600; line-height: 1.45; letter-spacing: -0.01em; color: var(--fg-strong); }
.testimonial--large:not(.testimonial--video) .testimonial__quote p { max-width: 60ch; font-size: clamp(1.3rem, 1.05rem + 1vw, 1.9rem); }
.testimonial__cite { display: grid; gap: 0.15rem; margin-top: var(--space-5); font-size: var(--fs-small); color: var(--text-on-dark-muted); }
.testimonial__cite strong { font-size: 1rem; color: var(--fg-strong); }
.testimonial__project { justify-self: start; margin-top: 0.35rem; font-weight: 600; color: var(--fg); text-decoration: underline; text-decoration-color: var(--forticon-red); text-underline-offset: 0.25em; }
.testimonial__project:hover { color: var(--fg-strong); }
.testimonial__transcript { margin-top: var(--space-4); font-size: var(--fs-small); color: var(--text-on-dark-muted); }
.testimonial__transcript summary { cursor: pointer; font-weight: 700; color: var(--fg); }
.testimonial__transcript p { margin-top: var(--space-3); }
.testimonials-grid { display: grid; gap: var(--space-7); margin-top: var(--space-8); }
@media (min-width: 760px) { .testimonials-grid { grid-template-columns: repeat(2, 1fr); } }
.testimonials-grid .testimonial { align-items: start; padding-top: var(--space-6); border-top: 1px solid var(--hairline-dark); }
.testimonials-grid .testimonial__quote p { font-size: var(--fs-lead); font-weight: 500; }

/* Section-end call to action ("View Our Projects" etc.) */
.section-more { margin: var(--space-7) 0 0; }

/* Utilities */
.nowrap { white-space: nowrap; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }

/* Legal placeholder pages */
.legal-note { padding: var(--space-6); border-left: 2px solid var(--forticon-red); }

/* -------------------------------------------------------------------------
   Motion: fade-and-rise on scroll
   ------------------------------------------------------------------------- */
.js [data-reveal] { opacity: 0; transform: translateY(var(--rise)); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); transition-delay: var(--reveal-delay, 0ms); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .hero__media img, .hero__media video { animation: none; }
  .card--interactive:hover, .project-card:hover, .option:hover .option__card { transform: none; }
}

/* -------------------------------------------------------------------------
   Fallback: no backdrop-filter support. Solid deep ink so text stays legible.
   ------------------------------------------------------------------------- */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass, .btn--glass, .nav__menu, .project-dialog, .glass .option__card, .pathway--dark .option__card { background: var(--glass-fallback); }
  .is-scrolled .nav, .nav.is-solid { background: var(--glass-fallback); }
  .mobile-menu { background: rgba(15, 15, 19, 0.97); }
  .frost, .pathway--light .option__card { background: rgba(255, 255, 255, 0.92); }
}
/* Manual test hook: add class "no-glass" to <html> to preview the fallback. */
.no-glass .glass, .no-glass .btn--glass, .no-glass .nav__menu, .no-glass .project-dialog, .no-glass .pathway--dark .option__card, .no-glass.is-scrolled .nav { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--glass-fallback) !important; }
.no-glass .frost, .no-glass .pathway--light .option__card { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(255, 255, 255, 0.92) !important; }

@media print {
  .site-header, .mobile-menu, .hero__media, .scroll-cue { display: none !important; }
  body { background: #fff; color: #000; }
}

/* Review-only screenshot mode (?audit): fixed hero height, no animations */
.audit .hero { min-height: 900px !important; }
.audit .page-hero { min-height: 640px !important; }
.audit [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
.audit .hero__media img { animation: none !important; }

/* =========================================================================
   WEBSITE DESIGN, applied 27 Sep 2026
   Light pages (white, warm sand, concrete), white header bar, dark photo
   heroes, the fluted "Build. Repair. Protect." band and a navy-black footer.
   Colour roles: every component reads --bg, --fg, --fg-strong, --tint and the
   glass tokens below. Light values sit on :root; .theme-dark contexts swap back.
   ========================================================================= */
:root {
  --bg: #FFFFFF;
  --bg-alt: var(--warm-sand);
  --bg-stone: var(--concrete);
  --footer-bg: #0A0914;
  --fg: #3E3B38;
  --fg-strong: var(--deep-ink);
  --tint: 21, 21, 26;
  --surface-2: var(--warm-sand);
  --text-on-dark: #3E3B38;
  --text-on-dark-strong: var(--deep-ink);
  --text-on-dark-muted: #57534E;
  --hairline-dark: rgba(21, 21, 26, 0.12);
  --glass-bg: #FFFFFF;
  --glass-bg-hover: #FFFFFF;
  --glass-border: rgba(21, 21, 26, 0.10);
  --glass-border-hover: rgba(21, 21, 26, 0.28);
  --glass-highlight: 0 0 0 transparent;
  --glass-shadow: 0 12px 32px rgba(21, 21, 26, 0.06);
  --radius: 4px;
  --radius-sm: 4px;
  --radius-btn: 4px;
  --header-h: 72px;
  --rust: #C4541F;
}
/* Dark contexts: photo heroes, the band, the footer, image-overlay cards */
.hero, .page-hero, .cta-band, .site-footer, .section--dark, .project-card, .crew-grid figure, .lightbox, .project-dialog, .testimonial__video {
  --fg: var(--concrete);
  --fg-strong: #FFFFFF;
  --tint: 255, 255, 255;
  --surface-2: var(--ink-800);
  --text-on-dark: var(--concrete);
  --text-on-dark-strong: #FFFFFF;
  --text-on-dark-muted: #B5B0AA;
  --hairline-dark: rgba(255, 255, 255, 0.12);
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-bg-hover: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-border-hover: rgba(255, 255, 255, 0.32);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  color: var(--fg);
}
.section--dark { background: var(--footer-bg); }
.section--stone { background: var(--bg-stone); }
.section--stone p, .section--stone .muted { color: #33312E; }

/* Type: Manrope bold, tight, sentence-case labels */
h1, h2 { font-weight: 700; letter-spacing: -0.035em; line-height: 1.04; }
h3 { font-weight: 600; letter-spacing: -0.02em; }
h4 { font-weight: 600; }
.display { font-weight: 700; }
.eyebrow {
  font-size: 0.9375rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--forticon-red);
}
.eyebrow::before { display: none; }
.hero .eyebrow, .page-hero .eyebrow, .cta-band .eyebrow, .section--dark .eyebrow { color: #FFFFFF; }
.section-head p:not(.eyebrow) { color: var(--fg); }
.surface-light .section-head p:not(.eyebrow) { color: var(--text-on-light); }
.section-head .head-block > p.head-block__sub { color: var(--forticon-red); }
.card p { color: var(--fg); }
.glow::before { opacity: 0.35; }

/* Buttons: square-ish, lighter weight, red outline for secondary */
.btn { min-height: 48px; padding: 0.8rem 1.35rem; font-weight: 600; font-size: 0.95rem; }
.btn--small { min-height: 42px; padding: 0.6rem 1.05rem; }
.btn--glass {
  --btn-bg: transparent; --btn-fg: var(--deep-ink); --btn-border: var(--forticon-red);
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
}
.btn--glass:hover { --btn-bg: rgba(171, 5, 5, 0.06); --btn-border: var(--forticon-red); }
.hero .btn--glass, .page-hero .btn--glass { --btn-fg: #FFFFFF; --btn-border: var(--rust); }
.hero .btn--glass:hover, .page-hero .btn--glass:hover { --btn-bg: rgba(255, 255, 255, 0.08); }
.hero .btn--red, .page-hero .btn--red, .cta-band .btn--red { --btn-bg: #FFFFFF; --btn-border: #FFFFFF; --btn-fg: var(--deep-ink); }
.hero .btn--red:hover, .page-hero .btn--red:hover, .cta-band .btn--red:hover { --btn-bg: var(--warm-sand); --btn-border: var(--warm-sand); }
.cta-band .btn--glass { --btn-fg: #FFFFFF; --btn-bg: rgba(255, 255, 255, 0.10); --btn-border: rgba(255, 255, 255, 0.10); }
.cta-band .btn--glass:hover { --btn-bg: rgba(255, 255, 255, 0.18); }
.btn svg { display: none; }
.link-arrow svg { width: 0.9em; height: 0.9em; }

/* Chips: small grey tags */
.chip { color: var(--deep-ink); background: #EFEDEA; border-color: transparent; font-weight: 600; letter-spacing: 0; border-radius: 3px; }
.project-card .chip, .hero .chip, .page-hero .chip { color: #FFFFFF; background: rgba(255, 255, 255, 0.14); }
.filter { border-radius: 4px; }
.filter[aria-pressed="true"] { color: var(--deep-ink); background: transparent; border-color: var(--deep-ink); }

/* Cards on light pages: white, hairline border, no glass */
.glass { -webkit-backdrop-filter: none; backdrop-filter: none; }
.section--ink .glass, .section--black .glass { background: #FFFFFF; }
.section--black .card, .section--sand .frost { background: #FFFFFF; }

/* -------------------------------------------------------------------------
   Header: solid white bar. Phone and a red site-assessment button.
   ------------------------------------------------------------------------- */
.site-header {
  top: 0; padding-inline: 0; background: #FFFFFF; border-bottom: 1px solid rgba(21, 21, 26, 0.08); pointer-events: auto;
  transition: box-shadow var(--dur-nav) var(--ease);
}
.is-scrolled .site-header, .site-header.is-scrolled { box-shadow: 0 6px 24px rgba(21, 21, 26, 0.08); }
.nav, .is-scrolled .nav, .nav.is-solid {
  max-width: calc(var(--container) + var(--gutter) * 2); min-height: var(--header-h); padding: 0 var(--gutter);
  border-radius: 0; border: 0; background: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.nav::after { display: none; }
.nav__logo img { width: clamp(150px, 130px + 3vw, 176px); }
.nav__links { gap: 0.25rem; margin-right: auto; margin-left: clamp(1rem, -2rem + 4vw, 3rem); }
.nav__link, .nav__trigger { color: var(--deep-ink); font-weight: 600; font-size: 0.95rem; border-radius: 4px; padding: 0.5rem 0.75rem; }
.nav__link:hover, .nav__trigger:hover, .nav__trigger[aria-expanded="true"] { color: var(--deep-ink); background: rgba(21, 21, 26, 0.05); }
.nav__link[aria-current="page"], .nav__trigger.is-current { color: var(--forticon-red); }
.nav__link[aria-current="page"]::before, .nav__trigger.is-current::before { display: none; }
.nav__trigger svg { color: var(--forticon-red); }
.nav__menu {
  background: #FFFFFF; -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid rgba(21, 21, 26, 0.08); box-shadow: 0 18px 44px rgba(21, 21, 26, 0.12); border-radius: 6px;
}
.nav__menu a { color: var(--deep-ink); border-radius: 4px; }
.nav__menu a:hover, .nav__menu a:focus-visible { color: var(--deep-ink); background: var(--warm-sand); }
.nav__menu a[aria-current="page"] { color: var(--forticon-red); }
.nav__menu .nav__menu-all { color: var(--forticon-red); }
.nav__actions { display: none; align-items: center; gap: 1.25rem; }
.nav__phone { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 0.95rem; color: var(--deep-ink); text-decoration: none; white-space: nowrap; }
.nav__phone svg { width: 18px; height: 18px; color: var(--forticon-red); }
.nav__phone:hover { color: var(--forticon-red); }
.nav__toggle {
  background: transparent; border: 1px solid rgba(21, 21, 26, 0.18); color: var(--deep-ink); border-radius: 4px; min-height: 44px;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
@media (min-width: 1080px) { .nav__actions { display: inline-flex; } }
@media (min-width: 1080px) and (max-width: 1239px) { .nav__phone span { display: none; } }

.mobile-menu { background: #FFFFFF; -webkit-backdrop-filter: none; backdrop-filter: none; padding-top: calc(var(--header-h) + 1.5rem); }
.mobile-menu__list > li { border-bottom-color: rgba(21, 21, 26, 0.10); }
.mobile-menu__link, .mobile-menu__trigger { color: var(--deep-ink); font-weight: 700; font-size: 1.45rem; }
.mobile-menu__trigger svg { color: var(--forticon-red); }
.mobile-menu__sub a { color: var(--fg); }
.mobile-menu__sub a[aria-current="page"], .mobile-menu__link[aria-current="page"] { color: var(--forticon-red); }
.mobile-menu__contact a { color: var(--deep-ink); font-weight: 600; }

/* Heroes: photo with a left-weighted dark wash, starting under the header */
.hero { background: var(--ink-950); }
.hero::after {
  background:
    linear-gradient(90deg, rgba(10, 9, 20, 0.88) 0%, rgba(10, 9, 20, 0.62) 42%, rgba(10, 9, 20, 0.28) 100%),
    linear-gradient(0deg, rgba(10, 9, 20, 0.55) 0%, transparent 45%);
}
.hero__body { color: rgba(255, 255, 255, 0.88); }
/* Home hero layout (Paul, 2026-11-12): the tagline sits in the top-left corner of the video, lined up under
   the header logo and the same width. The heading block sits at the bottom left, with the bottom of
   "Explore Our Work" level with the bottom of the scroll cue in the bottom-right corner (--hero-foot).
   The top padding keeps the heading clear of the tagline on short screens. */
.hero { --hero-foot: clamp(2rem, 5vh, 3.5rem); align-items: flex-end; padding: calc(var(--header-h) + clamp(4rem, 8vh, 6rem)) 0 var(--hero-foot); }
.hero__tagline {
  position: absolute; margin: 0; line-height: 0;
  top: calc(var(--header-h) + clamp(1.25rem, 3vh, 2rem)); left: max(var(--gutter), calc((100% - var(--container)) / 2));
  width: clamp(150px, 130px + 3vw, 176px); /* same as .nav__logo img */
}
.hero__tagline svg { display: block; width: 100%; height: auto; overflow: visible; }
.hero__tagline text { font-family: inherit; font-size: 10px; font-weight: 800; fill: #FFFFFF; }
.hero .scroll-cue { position: absolute; right: max(var(--gutter), calc((100% - var(--container)) / 2)); bottom: var(--hero-foot); }
.page-hero::after {
  background:
    linear-gradient(90deg, rgba(10, 9, 20, 0.86) 0%, rgba(10, 9, 20, 0.6) 50%, rgba(10, 9, 20, 0.4) 100%),
    linear-gradient(0deg, rgba(10, 9, 20, 0.5) 0%, transparent 50%);
}
.page-hero .lead { color: rgba(255, 255, 255, 0.88); }
.page-hero--center { text-align: center; justify-content: center; align-items: center; min-height: clamp(520px, 72vh, 720px); padding: calc(var(--header-h) + 3rem) 0 4rem; }
.page-hero--center::after { background: rgba(10, 9, 20, 0.62); }
.page-hero--center h1 { max-width: none; font-size: clamp(2.75rem, 1.6rem + 4.6vw, 5.25rem); }
.page-hero--center .lead { margin-inline: auto; max-width: 54ch; }
.page-hero--center .btn-row { justify-content: center; }

/* Project image cards keep white text on the photo */
.project-card { color: var(--fg); }

/* Logo strip: accreditation row on off-white, marks in muted ink */
.logo-strip { background: #FAF7F3; border-block: 1px solid rgba(21, 21, 26, 0.06); }
.logo-strip img { filter: brightness(0); opacity: 0.55; }
/* Strip label: small, centred, between two short hairlines, in the same muted tone as the logos so it labels
   the strip without competing with the contact band above. */
/* Slim band (Paul, 2026-11-12): tight padding and logos at 85%. */
.logo-strip { padding-block: clamp(1.25rem, 0.9rem + 1vw, 1.75rem); }
.logo-strip .marquee { --scale: 0.85; }
@media (max-width: 699px) { .logo-strip .marquee { --scale: 0.72; } }
.logo-strip__title {
  display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 0 auto clamp(0.75rem, 0.6rem + 0.4vw, 1rem); padding-inline: var(--gutter);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; line-height: 1.4; text-transform: uppercase; color: rgba(21, 21, 26, 0.55);
}
.logo-strip__title::before, .logo-strip__title::after { content: ""; flex: none; width: 2.5rem; height: 1px; background: rgba(21, 21, 26, 0.18); }
@media (max-width: 479px) { .logo-strip__title { gap: 0.6rem; letter-spacing: 0.1em; white-space: nowrap; } .logo-strip__title::before, .logo-strip__title::after { width: 1.25rem; } }
.marquee__rule { background: rgba(21, 21, 26, 0.18); }

/* -------------------------------------------------------------------------
   The band: vertical ribbed flutes, copper to rust to charcoal
   ------------------------------------------------------------------------- */
.cta-band {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.10) 0, rgba(255, 255, 255, 0.02) 14px, rgba(0, 0, 0, 0.10) 30px, rgba(0, 0, 0, 0.26) 42px),
    linear-gradient(90deg, #B8772F 0%, #C4541F 22%, #A63A1A 42%, #5A2A1C 62%, #262020 80%, #161414 100%);
  background-blend-mode: overlay, normal, normal;
  padding-block: clamp(4rem, 2.8rem + 5vw, 7.5rem);
}
.cta-band::before, .cta-band::after { display: none; }
.cta-band .eyebrow { display: none; }
.cta-band h2.display { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem); line-height: 1.02; max-width: 11ch; }
.cta-band p:not(.eyebrow) { color: rgba(255, 255, 255, 0.9); }
.cta-band__phone { color: #FFFFFF; }
.cta-band__phone svg { color: #FFFFFF; }

/* -------------------------------------------------------------------------
   Footer: shield, newsletter, three link columns, legal row
   ------------------------------------------------------------------------- */
.site-footer { background: var(--footer-bg); border-top: 0; color: #B5B0AA; }
.site-footer .footer__grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .site-footer .footer__grid { grid-template-columns: 1fr 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } }
@media (min-width: 1080px) { .site-footer .footer__grid { grid-template-columns: 1.7fr 0.8fr 0.8fr 1fr; gap: 3rem; } .footer__brand { grid-column: auto; padding-right: 3rem; } }
.footer__brand .footer__shield { width: 42px; height: auto; margin-bottom: 1.5rem; }
.footer__brand p { color: #B5B0AA; max-width: 42ch; font-size: 1rem; }
.footer__subscribe { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.25rem; max-width: 460px; }
.footer__subscribe input {
  flex: 1 1 220px; min-height: 46px; padding: 0 0.9rem; border-radius: 4px; border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.16); color: #FFFFFF; font: inherit; font-size: 0.95rem;
}
.footer__subscribe input::placeholder { color: rgba(255, 255, 255, 0.6); }
.footer__subscribe input:focus { outline: none; border-color: rgba(255, 255, 255, 0.6); }
.footer__subscribe .btn { min-height: 46px; --btn-fg: #FFFFFF; --btn-bg: transparent; --btn-border: rgba(255, 255, 255, 0.85); }
.footer__subscribe .btn:hover { --btn-bg: #FFFFFF; --btn-fg: var(--deep-ink); }
.footer__fineprint { margin-top: 0.75rem; font-size: 0.75rem; color: #6F6B77 !important; }
.footer__col h2 { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; text-transform: none; color: #FFFFFF; margin-bottom: 1rem; }
.footer__col a, .footer__col address { color: #B5B0AA; }
.footer__col a:hover { color: #FFFFFF; }
.footer__socials { display: flex; gap: 0.9rem; margin-top: 1rem; }
.footer__socials a { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; color: #FFFFFF; }
.footer__socials svg { width: 20px; height: 20px; }
.footer__legal { border-top-color: rgba(255, 255, 255, 0.14); color: #8E8A94; }
.footer__legal p { color: #8E8A94; font-size: 0.85rem; line-height: 1.6; }
.footer__legal a { color: #8E8A94; }

/* -------------------------------------------------------------------------
   Contact page: centred photo hero, locations beside a grey-field form
   ------------------------------------------------------------------------- */
.contact-grid { display: grid; gap: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
@media (min-width: 960px) { .contact-grid { grid-template-columns: 0.9fr 1.1fr; } }
.contact-grid h2 { font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); }
.locations { display: grid; gap: 2rem; margin-top: 2.5rem; }
.location h3 { font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.75rem); margin-bottom: 0.9rem; }
.location ul { list-style: none; display: grid; gap: 0.6rem; }
.location li { display: grid; grid-template-columns: 20px 1fr; gap: 0.75rem; align-items: start; color: var(--deep-ink); line-height: 1.5; }
.location li svg { width: 18px; height: 18px; margin-top: 0.15em; color: var(--forticon-red); }
.location a { color: var(--deep-ink); text-underline-offset: 0.2em; }
.location a:hover { color: var(--forticon-red); }
.location small { display: block; color: var(--text-on-light-muted); font-size: 0.875rem; }
.form--contact { display: grid; gap: 1.25rem; padding: 0; background: none; border: 0; box-shadow: none; }
.form--contact .field label { font-weight: 500; font-size: 0.95rem; }
.form--contact .field input, .form--contact .field select, .form--contact .field textarea {
  background-color: #F2F2F2; border: 1px solid transparent; border-radius: 4px; min-height: 48px;
}
.form--contact .field textarea { min-height: 150px; }
.form--contact .field input:focus, .form--contact .field select:focus, .form--contact .field textarea:focus { background-color: #FFFFFF; border-color: var(--deep-ink); }
.form--contact fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.form--contact legend { padding: 0; margin-bottom: 0.75rem; font-size: 0.95rem; font-weight: 500; color: var(--deep-ink); }
.radio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1.5rem; }
.radio, .check { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.95rem; color: var(--deep-ink); cursor: pointer; }
.radio input, .check input { width: 18px; height: 18px; margin: 0; accent-color: var(--forticon-red); flex: none; }
.check { font-size: 0.875rem; }
.check a { color: var(--deep-ink); }
.form--contact .btn--red { justify-self: start; }