/* ==========================================================================
   EMP ADVISORS - stylesheet
   --------------------------------------------------------------------------
   Single stylesheet, deliberately. One cacheable request suits a static site
   on shared hosting better than a chain of render-blocking imports.

   CONTENTS
     01  Fonts
     02  Tokens
     03  Reset
     04  Base typography
     05  Layout: container, section, rules
     06  Brand geometry: mark, watermark, contour
     07  Header and navigation
     08  Buttons and links
     09  Hero
     10  Editorial grids: practices, principles, expertise
     11  Cards: insights, engagement
     12  Statement and CTA panels
     13  Founder
     14  Article and long-form
     15  Forms
     16  Footer
     17  Motion
     18  Utilities
     19  Print
   ========================================================================== */

/* 01  FONTS ================================================================
   Self-hosted variable subsets. Latin loads for nearly everyone; latin-ext
   is unicode-range gated so it only downloads when actually needed.        */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* 02  TOKENS =============================================================== */

:root {
  /* --- surface ------------------------------------------------------- */
  --bg:            #05090C;
  --bg-raised:     #07121A;
  --bg-panel:      #08151F;
  --navy:          #0B2435;
  --navy-deep:     #071A27;

  /* --- brand ink ------------------------------------------------------ */
  --steel:         #567D99;
  /* Steel is a graphic colour. At 11px it only reaches ~4.2:1 on the raised
     surfaces, so small text uses this lighter cut, which clears AA (5.6:1+)
     on every background in the palette. */
  --steel-text:    #6B92AE;
  --accent:        #6FA7CF;
  --accent-dim:    #4E7590;

  /* --- text ----------------------------------------------------------- */
  --text:          #F2F0EB;
  --text-muted:    #A7B0B7;
  /* 6.5:1 on --bg. Small uppercase labels use this, so it has to clear AA. */
  --text-faint:    #8A949B;

  /* --- line ----------------------------------------------------------- */
  --border:        rgba(255, 255, 255, .12);
  --border-soft:   rgba(255, 255, 255, .07);
  --border-strong: rgba(255, 255, 255, .22);

  /* --- type ----------------------------------------------------------- */
  --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Fluid scale. Lower bound is the mobile size, upper the large-desktop
     size; the vw term does the work between them.                        */
  --t-display-1: clamp(2.625rem, 1.15rem + 6.0vw, 5.75rem);
  --t-display-2: clamp(1.9375rem, 1.10rem + 3.2vw, 3.25rem);
  --t-display-3: clamp(1.625rem, 1.10rem + 2.1vw, 2.625rem);
  --t-display-4: clamp(1.3125rem, 1.05rem + 1.1vw, 1.875rem);
  --t-lead:      clamp(1.0625rem, 0.99rem + 0.35vw, 1.25rem);
  --t-body:      1rem;
  --t-small:     0.875rem;
  --t-micro:     0.6875rem;

  --lh-display:  1.06;
  --lh-heading:  1.16;
  --lh-body:     1.7;

  --tracking-micro: .16em;
  --tracking-tight: -.015em;

  /* --- space ---------------------------------------------------------- */
  --s-1:  .25rem;  --s-2:  .5rem;   --s-3:  .75rem;  --s-4:  1rem;
  --s-5:  1.5rem;  --s-6:  2rem;    --s-7:  2.5rem;  --s-8:  3rem;
  --s-9:  4rem;    --s-10: 5rem;    --s-11: 6.5rem;  --s-12: 8rem;

  /* Spaciousness comes from typography and rhythm, not from forcing every
     band to be most of a screen tall. */
  --section-y:  clamp(3.5rem, 6vw, 6rem);
  --gutter:     clamp(1.25rem, 4.2vw, 3.5rem);
  --measure:    68ch;

  /* --- structure ------------------------------------------------------ */
  --container:  1320px;
  --container-narrow: 860px;
  /* The logo is a stacked lockup: mark above EMP above ADVISORS.
     ADVISORS is only ~10% of the lockup's height, so its legibility sets the
     floor for the whole header. Below roughly 80px the word closes up and
     reads as a grey bar, so the contracted size is held well above that and
     the bar contracts more than the logo does.
     Layout offsets use the rest height; anchor scrolling uses the compact
     one, because by then the bar has already shrunk. */
  --header-h:          132px;
  --header-h-compact:  104px;
  --lockup-h:           98px;
  --lockup-h-compact:   82px;
  --radius:     2px;          /* architectural, not app-like */

  /* --- motion --------------------------------------------------------- */
  --ease:       cubic-bezier(.22, .61, .36, 1);
  --ease-out:   cubic-bezier(.16, 1, .3, 1);
  --dur-fast:   180ms;
  --dur:        320ms;
  --dur-slow:   620ms;
}

@media (max-width: 47.9375em) {
  :root {
    --header-h:          104px;
    --header-h-compact:   90px;
    --lockup-h:           78px;
    --lockup-h-compact:   68px;
  }
}

/* Short laptop screens, 1366x768 and similar. A 132px header plus the hero's
   own rhythm pushes the primary call to action to the fold, so the bar gives
   some height back. The logo stays above the legibility floor. */
@media (min-width: 48em) and (max-height: 830px) {
  :root {
    --header-h:          116px;
    --header-h-compact:   96px;
    --lockup-h:           88px;
    --lockup-h-compact:   78px;
  }
  .hero__lead { margin-bottom: var(--s-6); }
  .hero__title { margin-bottom: var(--s-5); }
}


/* 03  RESET ================================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h-compact) + 1.5rem);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }

:target { scroll-margin-top: calc(var(--header-h) + 2rem); }

/* One visible, consistent focus treatment everywhere. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--steel); color: #04080B; }

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 200;
  padding: .75rem 1.25rem;
  background: var(--accent);
  color: #04080B;
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: .04em;
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: 1rem; }


/* 04  BASE TYPOGRAPHY ====================================================== */

.display-1, .display-2, .display-3, .display-4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  /* pretty, not balance: several headlines carry deliberate <br> breaks and
     balancing re-flows them into orphaned single words. */
  text-wrap: pretty;
}
.display-1 { text-wrap: balance; }

.display-1 { font-size: var(--t-display-1); line-height: var(--lh-display); }
.display-2 { font-size: var(--t-display-2); line-height: 1.1; }
.display-3 { font-size: var(--t-display-3); line-height: var(--lh-heading); }
.display-4 { font-size: var(--t-display-4); line-height: 1.25; }

.display-1 em, .display-2 em, .display-3 em {
  font-style: normal;
  color: var(--accent);
}

/* Uppercase micro-label used as a section descriptor. Used sparingly. */
.eyebrow {
  display: block;
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--steel-text);
  margin-bottom: var(--s-5);
}
.eyebrow--muted { color: var(--text-faint); }

.lead {
  font-size: var(--t-lead);
  line-height: 1.62;
  color: var(--text-muted);
  max-width: 46ch;
}

.prose p { color: var(--text-muted); max-width: var(--measure); }
.prose p + p { margin-top: var(--s-5); }

a { color: inherit; }


/* 05  LAYOUT =============================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.section {
  position: relative;
  padding-block: var(--section-y);
}
.section--raised { background: var(--bg-raised); }
.section--panel  { background: var(--bg-panel); }
.section--tight  { padding-block: clamp(3rem, 5vw, 4.5rem); }

/* Hairline dividers between major bands. */
.section--ruled { border-top: 1px solid var(--border-soft); }

/* A rule that carries a small chevron notch: the mark reduced to a mark of
   punctuation. Used to open sections instead of a plain <hr>. */
.rule-notched {
  position: relative;
  height: 1px;
  background: var(--border-soft);
  margin-block: var(--s-8);
}
.rule-notched::after {
  content: '';
  position: absolute;
  left: 0;
  top: -5px;
  width: 26px;
  height: 11px;
  background: var(--steel);
  clip-path: polygon(50% 0, 100% 100%, 78% 100%, 50% 42%, 22% 100%, 0 100%);
}

/* Section header with a trailing link, e.g. "Latest insights ... View all". */
.section-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5) var(--s-6);
  align-items: baseline;
  justify-content: space-between;
}

/* Two-column editorial split: intro on the left, content right.

   The intro column is deliberately NOT sticky. Pinning it made the right
   column appear to scroll independently of the page, which is the one thing
   this layout must not do. Both columns now move with the document. */
.split {
  display: grid;
  gap: clamp(2.5rem, 5vw, 5rem);
}
@media (min-width: 62em) {
  .split { grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); gap: clamp(2.5rem, 4.5vw, 5rem); }
  .split__aside { align-self: start; }
}


/* 06  BRAND GEOMETRY ======================================================= */

/* Oversized, near-invisible mark bled off a section edge. The site's main
   background device in place of photography.

   The wrapper does the clipping rather than the parent section, because
   overflow on an ancestor would kill the sticky column in .split. */
.watermark {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.watermark img, .watermark svg {
  position: absolute;
  height: auto;
  opacity: .05;
}
.watermark--right  img { right: -12%; bottom: -30%; width: min(62vw, 780px); }
.watermark--left   img { left: -16%;  bottom: -34%; width: min(70vw, 860px); }
.watermark--centre img { left: 50%;   bottom: -38%; width: min(94vw, 1180px); transform: translateX(-50%); opacity: .04; }
.watermark--top    img { right: -8%;  top: -22%;    width: min(52vw, 620px); opacity: .035; }

/* Contour treatment: the ridge line repeated at decreasing scale, the way a
   topographic map draws a peak. Replaces imagery on panels and cards. */
.contour {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.contour img {
  position: absolute;
  left: 50%;
  bottom: -12%;
  width: min(140%, 1500px);
  height: auto;
  transform: translateX(-50%);
  opacity: .15;
}
.contour--soft img { opacity: .08; }

/* Card-scale mark, cropped hard to the bottom-right corner so only an angular
   flank shows. A full triangle at this size reads as a stray graphic. */
.card-motif {
  position: absolute;
  right: -26%;
  bottom: -52%;
  width: 84%;
  z-index: 0;
  pointer-events: none;
  opacity: .05;
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur) var(--ease);
}
.card-motif img, .card-motif svg { width: 100%; height: auto; }

/* Keeps content above watermark and contour layers. */
.layer { position: relative; z-index: 1; }


/* 07  HEADER AND NAVIGATION ================================================ */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: height var(--dur) var(--ease),
              background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              backdrop-filter var(--dur) var(--ease);
}
/* Contracted state, applied once the page is scrolled. */
.site-header.is-scrolled {
  height: var(--header-h-compact);
  background: rgba(5, 9, 12, .88);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--border-soft);
}
.site-header.is-scrolled .lockup img { height: var(--lockup-h-compact); }

/* Interior pages open on a solid bar rather than over a hero. They still
   contract on scroll, so only the resting background differs. */
.site-header--solid {
  background: rgba(5, 9, 12, .9);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--border-soft);
}

.site-header__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
}

/* --- lockup --------------------------------------------------------------
   The logo is one asset, not type set beside a mark: the three-peak graphic
   with EMP above ADVISORS stacked beneath it, traced from the original at the
   original's proportions. Reversed for dark backgrounds. */
.lockup {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--text);
  transition: opacity var(--dur) var(--ease);
}
.lockup:hover { opacity: .82; }
.lockup img {
  display: block;
  height: var(--lockup-h);
  width: auto;
  transition: height var(--dur) var(--ease);
}
/* The footer has room to show it at full presence. */
.site-footer .lockup img { height: 96px; }
@media (max-width: 47.9375em) {
  .site-footer .lockup img { height: 76px; }
}

/* --- desktop nav --------------------------------------------------------- */
.nav { display: none; }
@media (min-width: 62em) {
  .nav { display: flex; align-items: center; gap: clamp(1.5rem, 2.4vw, 2.5rem); }
}
.nav__link {
  position: relative;
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  padding-block: .5rem;
  transition: color var(--dur-fast) var(--ease);
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav__link:hover { color: var(--text); }
.nav__link:hover::after,
.nav__link[aria-current='page']::after { transform: scaleX(1); }
.nav__link[aria-current='page'] { color: var(--text); }

/* Scoped to .site-header so these beat the .btn base rule, which sets
   display:inline-flex and is declared later in the file. Without the extra
   specificity the desktop CTA stays visible on phones and pushes the menu
   button off the edge. */
.site-header .header__cta { display: none; }
@media (min-width: 62em) {
  .site-header .header__cta { display: inline-flex; }
}

/* --- mobile menu --------------------------------------------------------- */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  align-items: flex-end;
}
@media (min-width: 62em) { .nav-toggle { display: none; } }
.nav-toggle__bar {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--text);
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease), width var(--dur) var(--ease);
}
.nav-toggle__bar:nth-child(2) { width: 17px; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(2) { opacity: 0; width: 24px; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--bg);
  padding: calc(var(--header-h) + 2.5rem) var(--gutter) var(--s-8);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.25rem);
  /* visibility is stepped, never interpolated: on close it is delayed so the
     fade is visible, on open it flips at once. Transitioning it instead would
     leave the links unfocusable until the animation finished, and permanently
     unfocusable if frames were never produced. */
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility 0s linear var(--dur);
}
.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility 0s linear 0s;
}
@media (min-width: 62em) { .mobile-menu { display: none; } }

.mobile-menu__list { display: flex; flex-direction: column; }
.mobile-menu__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.05rem;
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  text-decoration: none;
  color: var(--text);
}
.mobile-menu__link span {
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  letter-spacing: .14em;
  color: var(--text-faint);
}
.mobile-menu__foot { margin-top: auto; padding-top: var(--s-8); }
.mobile-menu__foot .btn { width: 100%; justify-content: space-between; }
.mobile-menu__meta {
  margin-top: var(--s-6);
  font-size: var(--t-small);
  color: var(--text-faint);
}
.mobile-menu__meta a { color: var(--text-muted); text-decoration: none; }

body.is-locked { overflow: hidden; }


/* 08  BUTTONS AND LINKS ==================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding: .95rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn__arrow { transition: transform var(--dur) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(5px); }

.btn--primary {
  background: var(--steel);
  border-color: var(--steel);
  color: #04080B;
}
.btn--primary:hover { background: var(--accent); border-color: var(--accent); }

.btn--outline {
  border-color: var(--border-strong);
  color: var(--text);
}
.btn--outline:hover { border-color: var(--text); background: rgba(255, 255, 255, .04); }

.btn--ghost { padding-inline: 0; color: var(--text); }

.btn:disabled, .btn[aria-disabled='true'] { opacity: .5; cursor: not-allowed; }
.btn:disabled:hover .btn__arrow { transform: none; }

/* Inline arrow link, the site's tertiary action. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.link-arrow svg { transition: transform var(--dur) var(--ease-out); }
.link-arrow:hover { color: var(--text); }
.link-arrow:hover svg { transform: translateX(5px); }


/* 09  HERO ================================================================= */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  /* Content-driven. The old min(94svh, 900px) forced the hero to fill the
     viewport regardless of what was in it, which pushed the call to action
     towards the fold and made the page feel like a sequence of full screens.
     A modest floor keeps the composition without dictating the height. */
  min-height: 32rem;
  padding-top: calc(var(--header-h) + clamp(1.25rem, 3.5vw, 3rem));
  padding-bottom: clamp(3rem, 6vw, 5rem);
  overflow: hidden;
  background:
    radial-gradient(115% 78% at 82% 8%, rgba(30, 68, 98, .40) 0%, rgba(11, 36, 53, 0) 62%),
    linear-gradient(180deg, var(--navy-deep) 0%, var(--bg) 78%);
}

/* The mark rendered as a peak with its own contour lines, anchored to the
   right of the composition. It stands in for the hero photograph. Mark and
   contours are registered inside the asset, so they scale as one. */
.hero__geometry {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.hero__geometry img {
  position: absolute;
  right: -6%;
  bottom: -12%;
  width: min(74vw, 1020px);
  height: auto;
  opacity: .42;
}
@media (max-width: 61.9375em) {
  /* On narrow screens the geometry sits behind the copy, so it drops back. */
  .hero__geometry img { right: -26%; bottom: -8%; width: 132vw; opacity: .26; }
}

/* Photographic hero. The image holds the right of the composition and the
   headline holds the left. A scrim carries the two together: opaque under the
   copy, clearing before it reaches the robot, so nothing is read through
   texture and the photograph is never flattened into a grey wash. */
.hero__media {
  position: absolute;
  /* The photograph holds the right of the frame. Setting a left edge crops the
     picture tighter, which keeps the robot large rather than lost in a wide
     shot, and the mask dissolves that edge so it never reads as a panel seam. */
  inset: 0 0 0 38%;
  z-index: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .3) 14%, #000 40%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .3) 14%, #000 40%);
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The subject sits low and just right of centre in the frame, so the crop
     is biased down to keep the robot and the racking rather than the ceiling. */
  object-position: 58% 64%;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      var(--bg) 0%, var(--bg) 30%,
      rgba(5, 9, 12, .90) 40%,
      rgba(5, 9, 12, .55) 52%,
      rgba(5, 9, 12, .16) 66%,
      rgba(5, 9, 12, 0) 78%),
    linear-gradient(180deg,
      rgba(7, 26, 39, .74) 0%,
      rgba(5, 9, 12, 0) 32%,
      rgba(5, 9, 12, 0) 58%,
      rgba(5, 9, 12, .70) 92%,
      var(--bg) 100%);
}
/* Keeps the copy clear of the subject at wide viewports. */
.hero--photo .hero__inner { max-width: 46rem; }

@media (max-width: 61.9375em) {
  /* Narrow screens have no room for a side-by-side, so the photograph sits
     behind the copy and the scrim takes over almost entirely. */
  .hero__media {
    inset: 0;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, rgba(0, 0, 0, .35) 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 60%, rgba(0, 0, 0, .35) 100%);
  }
  .hero__media img { object-position: 62% 66%; }
  .hero__scrim {
    background:
      linear-gradient(180deg,
        rgba(5, 9, 12, .94) 0%,
        rgba(5, 9, 12, .88) 46%,
        rgba(5, 9, 12, .70) 72%,
        rgba(5, 9, 12, .88) 100%),
      linear-gradient(90deg, var(--bg) 0%, rgba(5, 9, 12, .30) 62%, rgba(5, 9, 12, .55) 100%);
  }
}

.hero__inner { position: relative; z-index: 1; max-width: 60rem; }

.hero__title { margin-bottom: var(--s-6); }
.hero__title em { display: block; }

/* Short accent rule beneath the headline, echoing the mockup. */
.hero__rule {
  width: 68px;
  height: 2px;
  background: var(--steel);
  margin-bottom: var(--s-6);
}

.hero__lead { max-width: 44ch; margin-bottom: var(--s-8); }

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); }
@media (max-width: 30em) {
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { justify-content: space-between; }
}

/* Compact hero for interior pages. */
.page-hero {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--header-h) + clamp(2rem, 4.5vw, 4rem));
  padding-bottom: clamp(3rem, 6vw, 5.5rem);
  background: linear-gradient(180deg, var(--navy-deep) 0%, var(--bg) 92%);
  border-bottom: 1px solid var(--border-soft);
}
.page-hero__inner { position: relative; z-index: 1; max-width: 56rem; }
.page-hero .lead { margin-top: var(--s-6); max-width: 52ch; }


/* 10  EDITORIAL GRIDS ====================================================== */

/* Practices: a ruled grid, not a deck of cards. Dividers come from the
   container's own borders so there are no doubled lines. */
.practice-grid {
  display: grid;
  border-top: 1px solid var(--border-soft);
  border-left: 1px solid var(--border-soft);
}
@media (min-width: 40em)  { .practice-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 75em)  { .practice-grid { grid-template-columns: repeat(3, 1fr); } }

.practice {
  position: relative;
  overflow: hidden;
  padding: clamp(1.75rem, 2.6vw, 2.5rem);
  border-right: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  min-height: 11.5rem;
  transition: background var(--dur) var(--ease);
}
.practice:hover { background: rgba(86, 125, 153, .06); }
.practice:hover .card-motif { transform: translate(-5%, -5%); opacity: .085; }

.practice__icon {
  width: 26px;
  height: 26px;
  margin-bottom: var(--s-5);
  color: var(--steel);
  transition: color var(--dur) var(--ease);
}
.practice:hover .practice__icon { color: var(--accent); }
.practice__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.25; }

.practice__title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: var(--s-3);
}
.practice__body { font-size: var(--t-small); color: var(--text-muted); line-height: 1.65; }
.practice__more {
  margin-top: auto;
  padding-top: var(--s-5);
  font-size: var(--t-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: color var(--dur) var(--ease);
}
.practice:hover .practice__more { color: var(--accent); }
.practice__more svg { transition: transform var(--dur) var(--ease-out); }
.practice:hover .practice__more svg { transform: translateX(4px); }

/* Principles: numbered, divided by rules, no cards. */
.principles { display: grid; gap: 0; }
@media (min-width: 56em) {
  .principles {
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--border-soft);
  }
}
.principle {
  position: relative;
  padding-block: var(--s-7);
  border-top: 1px solid var(--border-soft);
}
@media (min-width: 56em) {
  .principle {
    border-top: 0;
    padding: var(--s-7) clamp(1.5rem, 2.6vw, 2.5rem) var(--s-6) 0;
  }
  .principle + .principle {
    border-left: 1px solid var(--border-soft);
    padding-left: clamp(1.5rem, 2.6vw, 2.5rem);
  }
}
/* Set in the sans deliberately. Cormorant's default oldstyle figures make
   "01" read as lowercase, which is wrong for an index numeral. */
.principle__num {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-micro);
  color: var(--steel-text);
  margin-bottom: var(--s-5);
}
.principle__title {
  font-family: var(--font-display);
  font-size: clamp(1.3125rem, 1.1rem + .55vw, 1.5rem);
  font-weight: 600;
  line-height: 1.28;
  margin-bottom: var(--s-3);
  text-wrap: balance;
}
.principle__body { font-size: var(--t-small); color: var(--text-muted); line-height: 1.68; }

/* Expertise: a dense two/three column list of domains. */
.expertise {
  display: grid;
  gap: 0 clamp(2rem, 4vw, 4rem);
  border-top: 1px solid var(--border-soft);
}
@media (min-width: 44em) { .expertise { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72em) { .expertise { grid-template-columns: repeat(3, 1fr); } }

.expertise__item {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding-block: 1.05rem;
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--t-lead);
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: .01em;
  transition: color var(--dur) var(--ease);
}
.expertise__item::before {
  content: '';
  flex: none;
  width: 13px;
  height: 6px;
  background: var(--steel);
  clip-path: polygon(50% 0, 100% 100%, 76% 100%, 50% 44%, 24% 100%, 0 100%);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}
.expertise__item:hover { color: var(--accent); }
.expertise__item:hover::before { background: var(--accent); transform: translateY(-2px); }


/* Services page: practice areas as ruled editorial blocks, not cards. */
.practice-area { border-top: 1px solid var(--border); padding-block: clamp(2.5rem, 4.5vw, 4rem); }
.practice-area__grid { display: grid; gap: clamp(1.75rem, 3.5vw, 3.5rem); }
@media (min-width: 60em) {
  .practice-area__grid { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); }
}
.practice-area__num {
  display: block;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-micro);
  color: var(--steel-text);
  margin-bottom: var(--s-4);
}
.practice-area__title { margin-bottom: var(--s-4); }

.offer { border-top: 1px solid var(--border-soft); padding-block: var(--s-6); }
.offer:first-child { border-top: 0; padding-top: 0; }
.offer__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.08rem + .5vw, 1.4375rem);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: var(--s-3);
}
.offer__body { color: var(--text-muted); max-width: 62ch; }

/* Approach page: the five-step method, drawn with the mark's chevron. */
.steps { counter-reset: step; }
.step {
  position: relative;
  display: grid;
  gap: var(--s-4) clamp(1.5rem, 3.5vw, 3rem);
  padding-block: clamp(2rem, 3.5vw, 3rem);
  border-top: 1px solid var(--border);
}
@media (min-width: 54em) {
  .step { grid-template-columns: 5.5rem minmax(0, 20rem) minmax(0, 1fr); align-items: start; }
}
.step__mark {
  display: flex;
  align-items: center;
  gap: .85rem;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-micro);
  color: var(--steel-text);
}
.step__mark::before {
  content: '';
  flex: none;
  width: 20px;
  height: 9px;
  background: currentColor;
  clip-path: polygon(50% 0, 100% 100%, 77% 100%, 50% 43%, 23% 100%, 0 100%);
}
.step__title { font-family: var(--font-display); font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem); font-weight: 600; line-height: 1.2; }
.step__body { color: var(--text-muted); max-width: 60ch; }

/* Long-form legal and policy pages. */
.legal { max-width: 72ch; }
.legal h2 {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.15rem + .9vw, 1.75rem);
  font-weight: 600;
  color: var(--text);
  margin-top: 2.4em;
  margin-bottom: .7em;
}
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { color: var(--text-muted); }
.legal p + p { margin-top: 1.1em; }
.legal ul { padding-left: 1.3em; margin-top: 1em; }
.legal li + li { margin-top: .5em; }
.legal li::marker { color: var(--steel); }
.legal a { color: var(--accent); text-decoration: underline; text-underline-offset: .18em; }
.legal__updated {
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--s-8);
}

/* Contact: form beside the direct details. */
.contact-grid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
@media (min-width: 62em) { .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); } }
.contact-aside { border-top: 1px solid var(--border); padding-top: var(--s-6); }
@media (min-width: 62em) {
  .contact-aside { border-top: 0; border-left: 1px solid var(--border); padding: 0 0 0 clamp(2rem, 3vw, 3rem); }
}
.contact-aside__item + .contact-aside__item { margin-top: var(--s-6); }
.contact-aside__label {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--s-2);
}
.contact-aside__value { color: var(--text-muted); }
.contact-aside__value a { color: var(--accent); text-decoration: none; }
.contact-aside__value a:hover { text-decoration: underline; }

/* 11  CARDS ================================================================ */

.insight-grid { display: grid; gap: 1px; background: var(--border-soft); }
@media (min-width: 46em) { .insight-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68em) { .insight-grid { grid-template-columns: repeat(3, 1fr); } }

.insight-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 2.5vw, 2.25rem);
  background: var(--bg);
  text-decoration: none;
  color: inherit;
  min-height: 15rem;
  transition: background var(--dur) var(--ease);
}
.insight-card:hover { background: var(--bg-raised); }
.insight-card:hover .card-motif { transform: translate(-6%, -6%) scale(1.03); opacity: .09; }

.insight-card__meta {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: var(--t-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--s-6);
}
.insight-card__cat { color: var(--steel-text); }
.insight-card__meta span[aria-hidden] { color: var(--border-strong); }

.insight-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.15rem + .6vw, 1.625rem);
  font-weight: 600;
  line-height: 1.24;
  text-wrap: balance;
  transition: color var(--dur) var(--ease);
}
.insight-card:hover .insight-card__title { color: var(--accent); }

.insight-card__excerpt {
  margin-top: var(--s-4);
  font-size: var(--t-small);
  color: var(--text-muted);
  line-height: 1.65;
}

.insight-card__foot {
  margin-top: auto;
  padding-top: var(--s-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--t-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.insight-card__foot svg { color: var(--steel); transition: transform var(--dur) var(--ease-out); }
.insight-card:hover .insight-card__foot svg { transform: translateX(5px); }

/* Work listing. Editorial rows separated by rules, not a card grid, so a
   single entry reads as intentional and more entries simply stack. */
.work-list { border-top: 1px solid var(--border); }
.work-card {
  border-bottom: 1px solid var(--border);
  padding-block: clamp(2.25rem, 4vw, 3.5rem);
}
.work-card__meta,
.work-feature__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--s-5);
}
.work-card__meta span[aria-hidden],
.work-feature__meta span[aria-hidden] { color: var(--border-strong); }

.work-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  max-width: 20ch;
}
.work-card__title a { text-decoration: none; transition: color var(--dur) var(--ease); }
.work-card__title a:hover { color: var(--accent); }

.work-card__client {
  margin-top: var(--s-3);
  font-size: var(--t-small);
  color: var(--text);
}
.work-card__client span { color: var(--steel-text); padding-inline: .3em; }

.work-card__excerpt {
  margin-top: var(--s-4);
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 56ch;
}

/* Service areas the engagement actually covered. */
.work-card__services {
  margin-top: var(--s-5);
  font-size: var(--t-small);
  color: var(--text-muted);
}
.work-card__services span { color: var(--steel-text); padding-inline: .35em; }

.work-card__cta { margin-top: var(--s-6); }

/* Homepage featured engagement. */
.work-feature {
  position: relative;
  overflow: hidden;
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
}
.work-feature__body {
  position: relative;
  z-index: 1;
  padding: clamp(2rem, 4vw, 3.5rem);
  max-width: 62ch;
}
.work-feature__title {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 1.2rem + 1.7vw, 2.375rem);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.work-feature__title a { text-decoration: none; transition: color var(--dur) var(--ease); }
.work-feature__title a:hover { color: var(--accent); }
.work-feature__excerpt {
  margin-top: var(--s-4);
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--text-muted);
}
.work-feature__cta { margin-top: var(--s-6); }

/* Related services, on a case study and on a service area. */
.article__related {
  max-width: var(--container-narrow);
  margin: var(--s-9) auto 0;
  padding-top: var(--s-6);
  border-top: 1px solid var(--border-soft);
}
.article__related-links,
.related-work__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-7);
  margin-top: var(--s-4);
}
.related-work {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border-soft);
}

/* --------------------------------------------------------------------------
   Case study blocks. Each renders only when the engagement supplies the data,
   so a case study with fewer verified facts simply shows fewer blocks.
   -------------------------------------------------------------------------- */

/* Approved photograph under the header. Wide crop, never tall on a phone. */
.cs-hero {
  max-width: var(--container);
  margin: var(--s-8) auto 0;
  padding-inline: var(--gutter);
}
.cs-hero picture { display: block; }
.cs-hero img {
  width: 100%;
  height: auto;
  border: 1px solid var(--border-soft);
}
.cs-hero__caption {
  margin-top: var(--s-3);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Client / Location / Engagement / Industry. */
.cs-facts {
  display: grid;
  gap: 1px;
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
  margin: 0 0 var(--s-8);
}
@media (min-width: 40em) { .cs-facts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .cs-facts { grid-template-columns: repeat(4, 1fr); } }
.cs-facts__item { background: var(--bg); padding: var(--s-5) var(--s-6); }
.cs-facts__label {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--s-2);
}
.cs-facts__value { margin: 0; color: var(--text); font-size: var(--t-small); }

/* Verified proof points. */
.cs-stats, .cs-summary {
  display: grid;
  gap: var(--s-6) var(--s-5);
  grid-template-columns: repeat(2, 1fr);
  margin-block: var(--s-8);
  padding-block: var(--s-7);
  border-block: 1px solid var(--border-soft);
}
@media (min-width: 52em) { .cs-stats { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 52em) { .cs-summary { grid-template-columns: repeat(5, 1fr); } }
.cs-stats__figure, .cs-summary__figure {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.4rem + 3vw, 3.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  /* Cormorant defaults to oldstyle figures, which drop 3 and 4 below the
     baseline and shrink 1. Metrics have to align, so force lining figures. */
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
.cs-stats__label, .cs-summary__label {
  margin-top: var(--s-3);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--text-faint);
  line-height: 1.4;
}

/* Prioritisation framework, drawn rather than screenshotted. */
.cs-matrix { margin: var(--s-8) 0; }
.cs-matrix__plot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--s-4);
}
.cs-matrix__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
}
.cs-matrix__cell {
  background: var(--bg-raised);
  padding: clamp(1.25rem, 3vw, 2rem);
  min-height: 8.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
/* Weighted so the eye lands on the quadrant that mattered. Quick Wins is
   where the engagement went, so it carries the strongest fill and a rule. */
.cs-matrix__cell--quick {
  background: rgba(86, 125, 153, .30);
  box-shadow: inset 0 2px 0 0 var(--steel);
}
.cs-matrix__cell--roadmap { background: rgba(86, 125, 153, .16); }
.cs-matrix__cell--tactical { background: rgba(86, 125, 153, .08); }
.cs-matrix__cell--deprioritize { background: var(--bg); }
.cs-matrix__cell--quick .cs-matrix__label { color: var(--text); }
.cs-matrix__cell--deprioritize .cs-matrix__label { color: var(--text-muted); }

.cs-matrix__label {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + .6vw, 1.4375rem);
  font-weight: 600;
  line-height: 1.2;
}
.cs-matrix__count {
  margin-top: var(--s-2);
  font-size: var(--t-small);
  color: var(--text-muted);
}
.cs-matrix__count span { color: var(--text-faint); }

/* Ends pushed apart so the axis reads as a direction, not one long string. */
.cs-matrix__axis {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0;
}
.cs-matrix__axis span { color: var(--steel-text); flex: none; }
.cs-matrix__axis--y {
  grid-column: 1;
  grid-row: 1;
  writing-mode: vertical-rl;
  text-align: center;
  justify-self: center;
}
.cs-matrix__grid { grid-column: 2; grid-row: 1; }
.cs-matrix__axis--x { grid-column: 2; grid-row: 2; text-align: center; }

/* On a phone the rotated axis wastes width, so the labels go horizontal. */
@media (max-width: 40em) {
  .cs-matrix__plot { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
  .cs-matrix__axis--y { writing-mode: horizontal-tb; grid-column: 1; grid-row: 1; text-align: left; }
  .cs-matrix__grid { grid-column: 1; grid-row: 2; }
  .cs-matrix__axis--x { grid-column: 1; grid-row: 3; text-align: left; }
  .cs-matrix__cell { min-height: 0; }
}

/* Client quotation. */
.cs-quote {
  margin: var(--s-9) 0;
  padding: clamp(1.75rem, 4vw, 3rem);
  background: var(--bg-panel);
  border-left: 2px solid var(--steel);
}
.cs-quote__text {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.05rem + 1.5vw, 2rem);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  text-wrap: pretty;
}
.cs-quote__attrib { margin-top: var(--s-6); }
.cs-quote__name {
  display: block;
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--text);
}
.cs-quote__role {
  display: block;
  margin-top: .2rem;
  font-size: var(--t-small);
  color: var(--text-muted);
}

/* Closing call to action on a case study. */
.cs-cta { position: relative; z-index: 1; max-width: 46rem; }
.cs-cta__body {
  margin-top: var(--s-5);
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--text-muted);
}
.cs-cta__actions {
  margin-top: var(--s-7);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
}
@media (max-width: 30em) {
  .cs-cta__actions { flex-direction: column; align-items: stretch; }
  .cs-cta__actions .btn { justify-content: space-between; }
}

/* Proof points on the homepage Selected Work block. */
.work-feature__proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-7);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border-soft);
}
.work-feature__proof div { display: flex; align-items: baseline; gap: .5rem; }
.work-feature__proof b {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
.work-feature__proof span {
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Featured engagement panel. */
.engagement {
  position: relative;
  overflow: hidden;
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  display: grid;
}
@media (min-width: 64em) { .engagement { grid-template-columns: 1.05fr .95fr; } }

.engagement__body { position: relative; z-index: 1; padding: clamp(2rem, 4vw, 3.75rem); }
.engagement__aside {
  position: relative;
  z-index: 1;
  padding: clamp(2rem, 4vw, 3.75rem);
  border-top: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 64em) {
  .engagement__aside { border-top: 0; border-left: 1px solid var(--border-soft); }
}

/* Outcome slots. Deliberately unquantified until verified figures exist. */
.outcome + .outcome { margin-top: var(--s-6); padding-top: var(--s-6); border-top: 1px solid var(--border-soft); }
.outcome__label {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.05rem + .5vw, 1.5rem);
  font-weight: 600;
  line-height: 1.3;
}
.outcome__note { margin-top: var(--s-2); font-size: var(--t-small); color: var(--text-muted); }


/* 12  STATEMENT AND CTA PANELS ============================================= */

/* The independence statement: the most typographically assertive block. */
.statement {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--navy-deep) 0%, #061019 100%);
  border-block: 1px solid var(--border-soft);
  padding-block: clamp(3.5rem, 6.5vw, 6.5rem);
}
.statement__grid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
@media (min-width: 64em) {
  .statement__grid { grid-template-columns: 1.62fr 1fr; align-items: end; }
}
.statement__line {
  font-family: var(--font-display);
  /* Capped so the longest statement line stays on one line in its column.
     Wrapping it orphans the final word. */
  font-size: clamp(1.75rem, 1.0rem + 2.9vw, 3rem);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: var(--tracking-tight);
}
.statement__line + .statement__line { margin-top: .1em; }
.statement__line b { font-weight: 500; color: var(--accent); }
.statement__aside {
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 34ch;
  padding-left: clamp(0rem, 2vw, 2rem);
  border-left: 1px solid var(--border);
  padding-block: .35rem;
}
@media (max-width: 63.9375em) {
  .statement__aside { border-left: 0; border-top: 1px solid var(--border); padding-left: 0; padding-top: var(--s-5); }
}

/* Signature statement. The firm's defining line, given its own band and the
   largest type on the site after the hero. Deliberately unadorned. */
.signature {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--border-soft);
  padding-block: clamp(3.5rem, 5.5vw, 5.5rem);
  background: linear-gradient(180deg, #061019 0%, var(--navy-deep) 100%);
}
/* Explicit length, not ch. A ch value here resolves against the inherited
   16px body size rather than the display size on the line below, which
   collapses the headline to about 190px and breaks it one word per line. */
.signature__inner { position: relative; z-index: 1; max-width: 46rem; }
.signature__line {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.1rem + 3.6vw, 3.75rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.signature__line b { font-weight: 500; color: var(--accent); }
.signature__note {
  margin-top: var(--s-6);
  max-width: 46ch;
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--text-muted);
}

/* Audiences: three short columns, dividers rather than cards. */
.audience {
  display: grid;
  border-top: 1px solid var(--border-soft);
}
@media (min-width: 56em) { .audience { grid-template-columns: repeat(3, 1fr); } }
.audience__item {
  padding-block: var(--s-6);
  border-bottom: 1px solid var(--border-soft);
}
@media (min-width: 56em) {
  .audience__item { border-bottom: 0; padding: var(--s-6) clamp(1.5rem, 2.5vw, 2.5rem) 0 0; }
  .audience__item + .audience__item {
    border-left: 1px solid var(--border-soft);
    padding-left: clamp(1.5rem, 2.5vw, 2.5rem);
  }
}
.audience__title {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.15rem + .6vw, 1.625rem);
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: var(--s-3);
}
.audience__body { font-size: var(--t-small); color: var(--text-muted); line-height: 1.65; }

/* Closing call to action. */
.cta {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 6.5vw, 6.5rem);
  background: linear-gradient(180deg, #061019 0%, var(--navy-deep) 100%);
  border-top: 1px solid var(--border-soft);
}
.cta__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 56em) { .cta__grid { grid-template-columns: 1fr auto; } }
.cta__title { max-width: 20ch; }


/* 13  FOUNDER ============================================================== */

.founder { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
@media (min-width: 60em) { .founder { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); } }
/* About leads with the person, so the portrait column is wider there. */
@media (min-width: 60em) { .founder--lead { grid-template-columns: minmax(0, 27rem) minmax(0, 1fr); } }

/* Portrait frame. Doubles as a placeholder when no image is supplied. */
.portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Squarer on phones. The mobile source is a tighter crop, not the desktop
   framing scaled down, so the face stays legible without the image running
   away down the viewport. */
@media (max-width: 45.9375em) {
  .portrait { aspect-ratio: 1 / 1; max-width: 22rem; }
}

.portrait picture { display: block; width: 100%; height: 100%; }
.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Holds the face just above centre as the frame changes shape. */
  object-position: 50% 26%;
}

/* The photograph is a bright outdoor frame sitting in a near-black page.
   Rather than filtering the image, the frame carries a short gradient at the
   foot so it settles into the section instead of ending on a hard edge.
   Skin tones and the rest of the picture are untouched. */
.portrait--photo::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 34%;
  pointer-events: none;
  background: linear-gradient(180deg,
              rgba(5, 9, 12, 0) 0%,
              rgba(5, 9, 12, .34) 62%,
              rgba(5, 9, 12, .62) 100%);
}
.portrait__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  color: var(--text-faint);
  text-align: center;
  padding: var(--s-6);
}
.portrait__placeholder svg { width: 44%; opacity: .18; color: var(--steel); }
.portrait__placeholder span {
  font-size: var(--t-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Selected experience. Names set in the display face, separated by middots,
   with no logos: none of these are approved marks. */
.experience {
  margin-top: var(--s-7);
  padding-top: var(--s-6);
  border-top: 1px solid var(--border-soft);
}
.experience__line {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.05rem + .6vw, 1.5rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .01em;
  color: var(--text);
}
.experience__line span { color: var(--steel-text); padding-inline: .3em; }

.credentials { border-top: 1px solid var(--border-soft); margin-top: var(--s-7); }
.credential {
  display: grid;
  gap: .15rem var(--s-5);
  padding-block: .95rem;
  border-bottom: 1px solid var(--border-soft);
}
@media (min-width: 40em) { .credential { grid-template-columns: 13rem 1fr; align-items: baseline; } }
.credential__role { font-size: var(--t-small); color: var(--text); font-weight: 500; }
.credential__org  { font-size: var(--t-small); color: var(--text-muted); }


/* 14  ARTICLE AND LONG-FORM ================================================ */

/* Top padding must clear the fixed header. This is a standalone section, not
   a .page-hero, because combining the two let this rule override the header
   offset and slide the meta row underneath the bar. */
.article {
  position: relative;
  padding-block: calc(var(--header-h) + clamp(2.5rem, 5vw, 4.5rem)) var(--section-y);
  background: linear-gradient(180deg, var(--navy-deep) 0%, var(--bg) 34rem);
}
.article__head { max-width: var(--container-narrow); margin-inline: auto; }
.article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem;
  font-size: var(--t-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--s-6);
}
.article__meta .insight-card__cat { color: var(--steel-text); }

.article__body {
  max-width: var(--container-narrow);
  margin-inline: auto;
  margin-top: var(--s-8);
  font-size: var(--t-lead);
  line-height: 1.75;
  color: var(--text-muted);
}
.article__body > * + * { margin-top: 1.35em; }
.article__body h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2rem);
  font-weight: 600;
  line-height: 1.24;
  color: var(--text);
  margin-top: 2.2em;
  text-wrap: balance;
}
.article__body h3 {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  font-weight: 600;
  color: var(--text);
  margin-top: 1.9em;
}
.article__body strong { color: var(--text); font-weight: 600; }
.article__body a { color: var(--accent); text-decoration: underline; text-underline-offset: .18em; }
.article__body ul, .article__body ol { padding-left: 1.35em; }
.article__body li + li { margin-top: .55em; }
.article__body li::marker { color: var(--steel); }
.article__body blockquote {
  border-left: 2px solid var(--steel);
  padding-left: var(--s-6);
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.15rem + .8vw, 1.75rem);
  line-height: 1.35;
  color: var(--text);
}
.article__body hr { border: 0; border-top: 1px solid var(--border-soft); margin-block: 2.4em; }

.article__foot {
  max-width: var(--container-narrow);
  margin: var(--s-10) auto 0;
  padding-top: var(--s-7);
  border-top: 1px solid var(--border-soft);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  align-items: center;
  justify-content: space-between;
}


/* 15  FORMS ================================================================ */

.form { display: grid; gap: var(--s-5); }
.field { display: flex; flex-direction: column; gap: .55rem; }
@media (min-width: 40em) { .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); } }

.field__label {
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.field__label .req { color: var(--steel); }
.field__hint { font-size: var(--t-small); color: var(--text-faint); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .85rem 1rem;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: var(--t-body);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.field textarea { min-height: 9.5rem; resize: vertical; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--border-strong); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-panel);
}
.field input[aria-invalid='true'], .field textarea[aria-invalid='true'] { border-color: #C4694F; }
.field__error { font-size: var(--t-small); color: #E08A6E; }
.field__error:empty { display: none; }

/* Honeypot: off-screen rather than display:none so bots still fill it. */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form__status {
  padding: var(--s-5);
  border: 1px solid var(--border);
  border-left-width: 2px;
  font-size: var(--t-small);
}
.form__status:empty { display: none; }
.form__status[data-state='ok']    { border-left-color: var(--accent); color: var(--text); }
.form__status[data-state='error'] { border-left-color: #C4694F; color: #E8B5A2; }


/* 16  FOOTER =============================================================== */

.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--bg-raised);
  border-top: 1px solid var(--border-soft);
  padding-block: clamp(3.5rem, 6vw, 5.5rem) var(--s-7);
}
.footer__grid { position: relative; z-index: 1; display: grid; gap: clamp(2.5rem, 4vw, 3.5rem); }
@media (min-width: 46em) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68em) { .footer__grid { grid-template-columns: 1.6fr repeat(3, 1fr); } }

.footer__statement {
  margin-top: var(--s-5);
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1.35;
  color: var(--text-muted);
  max-width: 22ch;
}
.footer__heading {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--s-5);
}
.footer__list { display: flex; flex-direction: column; gap: .7rem; }
.footer__list a, .footer__contact a {
  font-size: var(--t-small);
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.footer__list a:hover, .footer__contact a:hover { color: var(--accent); }
.footer__contact { display: flex; flex-direction: column; gap: .7rem; font-size: var(--t-small); color: var(--text-muted); }

.social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.social:hover { color: var(--accent); border-color: var(--accent); }

.footer__bar {
  position: relative;
  z-index: 1;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: var(--s-6);
  border-top: 1px solid var(--border-soft);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-6);
  align-items: center;
  justify-content: space-between;
  font-size: var(--t-small);
  color: var(--text-faint);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.footer__legal a { color: var(--text-faint); text-decoration: none; }
.footer__legal a:hover { color: var(--text-muted); }


/* 17  MOTION =============================================================== */

/* Reveal on scroll. Elements are visible by default and only hidden once JS
   confirms it will animate them, so no-JS and failed-JS both show content. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }
.js [data-reveal][data-reveal-delay='1'] { transition-delay: 80ms; }
.js [data-reveal][data-reveal-delay='2'] { transition-delay: 160ms; }
.js [data-reveal][data-reveal-delay='3'] { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}


/* 18  UTILITIES ============================================================ */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.stack-4  > * + * { margin-top: var(--s-4); }
.stack-5  > * + * { margin-top: var(--s-5); }
.stack-6  > * + * { margin-top: var(--s-6); }
.stack-8  > * + * { margin-top: var(--s-8); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mt-8 { margin-top: var(--s-8); }
.mt-9 { margin-top: var(--s-9); }
.text-muted { color: var(--text-muted); }
.measure { max-width: var(--measure); }

/* Client logo marquee. One component, used on the homepage and on Work.

   Two identical groups, translated by a flat -50%, so the second group lands
   exactly where the first began. The distance is one group by definition
   rather than by a percentage that has to be kept in step with a copy count.

   Every bit of horizontal space is on .marquee__item. Nothing sits on the
   group. That matters: a gap plus group padding puts one amount of space
   between logos inside a group and a different amount where two groups meet,
   which is a visible seam. Two item paddings separate every pair, including
   across the group boundary, so there is no boundary to correct. */
.clients {
  padding-block: clamp(2.25rem, 4vw, 3.25rem);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  background: var(--navy);
}
.clients__label { margin-bottom: var(--s-5); }

.marquee {
  position: relative;
  overflow: hidden;          /* the strip scrolls, the page never does */
  /* Logos dissolve at both edges instead of being cut off by the viewport. */
  -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 {
  display: flex;
  width: max-content;
  /* Fallback pace for no-JS, set to approximate the same 56px per second at a
     desktop group width. site.js replaces this with a duration derived from
     the measured group width, so the logos travel at that speed at every
     viewport instead of fitting one lap into a fixed number of seconds. */
  animation: marquee 84s linear infinite;
  animation-duration: var(--marquee-duration, 84s);
}
/* No gap and no padding here. Note the ul[class] reset earlier in this file
   zeroes list padding at a higher specificity than a single class, so group
   padding would silently not apply even if it were wanted. */
.marquee__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.marquee__item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  /* The only source of horizontal rhythm in the component. */
  padding-inline: clamp(2rem, 3vw, 3.25rem);
}
.marquee__item img {
  display: block;
  height: clamp(26px, 3.4vw, 38px);
  width: auto;                /* marks keep their own proportions */
  max-width: none;
  object-fit: contain;        /* nothing is cropped or stretched */
}
/* Optical correction, not a size change for its own sake. Every other mark in
   the strip is horizontal, roughly 2.7 to 5.6 times as wide as it is tall.
   Peckham is a stacked lockup at 1.6, so matching on height alone splits its
   height between the mark and the wordmark and leaves both reading about half
   the size of everything around them. Scaling the whole clamp by 1.21 evens
   out the perceived weight. Height only, so the aspect ratio is untouched. */
.marquee__item--peckham img { height: clamp(32px, 4.1vw, 46px); }
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }   /* exactly one of two groups */
}
/* Pause on hover, but only where hovering is a real input. */
@media (hover: hover) {
  .marquee:hover .marquee__track { animation-play-state: paused; }
}
/* No motion: show one pass of the seven logos, statically. The duplicate group
   goes, and so do the repeated passes inside the first group, so nothing is
   shown twice. */
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee__track { animation: none; width: 100%; }
  .marquee__group + .marquee__group { display: none; }
  .marquee__group .marquee__item:nth-child(n+8) { display: none; }
  .marquee__group {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: var(--s-6);
    width: 100%;
  }
}


/* 19  PRINT ================================================================ */

@media print {
  .site-header, .mobile-menu, .cta, .site-footer, .watermark, .contour,
  .hero__geometry, .hero__contour, .hero__media, .hero__scrim,
  .card-motif, .skip-link { display: none !important; }
  body { background: #fff; color: #111; }
  .article__body, .prose p, .lead { color: #333; }
  a { text-decoration: underline; }
}