@font-face{font-family:'Fraunces';src:url('/fonts/fraunces-var.woff2') format('woff2');font-weight:100 900;font-stretch:normal;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('/fonts/fraunces-italic-var.woff2') format('woff2');font-weight:100 900;font-stretch:normal;font-style:italic;font-display:swap}
@font-face{font-family:'Inter Tight';src:url('/fonts/intertight-var.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('/fonts/jetbrainsmono-var.woff2') format('woff2');font-weight:100 800;font-style:normal;font-display:swap}
:root{
  --navy:#0A2540; --navyDeep:#061829; --navyMid:#16365C;
  --brass:#C9A35E; --brassLt:#E0C088;
  --paper:#F5F2ED; --paperDk:#EBE6DC;
  --ink:#1A1F26; --slate:#3A4A5C; --slateLt:#7A8694;
  --rule:#D9D2C5; --ruleLt:#E4DFD4; --ruleDk:#CBC1AE;
  --display:'Fraunces','GT Sectra',Georgia,serif;
  --sans:'Inter Tight','Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mono:'JetBrains Mono','IBM Plex Mono',ui-monospace,monospace;
  --maxw:1200px; --gutter:56px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation-duration:.01ms !important;transition-duration:.01ms !important}}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{left:16px;top:16px;width:auto;height:auto;background:var(--navy);color:var(--paper);padding:10px 14px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;z-index:100}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

/* Layout */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.rule-t{border-top:1px solid var(--rule)}
.rule-b{border-bottom:1px solid var(--rule)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass)}
.eyebrow-mute{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--slateLt)}

/* Header — paper ground, fully opaque so content can't bleed through on Safari.
   Scoped to the top-level site header so the rule doesn't leak onto the
   engagement card's inner <header class="engagement-head">. */
body>header{position:sticky;top:0;z-index:100;background:var(--paper);border-bottom:1px solid var(--rule)}
.nav{display:flex;justify-content:space-between;align-items:center;padding:24px 0;gap:24px}
.brand{display:flex;align-items:center;gap:16px;color:var(--navy)}
.brand .wordmark{font-family:var(--display);font-weight:500;font-size:30px;letter-spacing:-.015em;line-height:1;font-variation-settings:"opsz" 144,"SOFT" 30;color:var(--navy);white-space:nowrap}
.brand .wordmark .dot{color:var(--brass)}
nav.primary{display:flex;gap:32px;font-size:13px;font-weight:500;color:var(--navy)}
nav.primary a{position:relative;padding:6px 0}
nav.primary a:hover{color:var(--brass)}
.cta-link{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);border-bottom:1.5px solid var(--brass);padding-bottom:2px;white-space:nowrap}
.cta-link:hover{color:var(--brass)}
.menu-btn{display:none;background:none;border:1px solid var(--navy);color:var(--navy);font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:8px 12px;cursor:pointer}

/* Hero — dark navy ground, paper type */
.hero{padding:84px 0 96px;background:var(--navy);color:var(--paper);position:relative;overflow:clip}
.hero-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:start;position:relative}
.hero-copy{display:flex;flex-direction:column}
.hero .eyebrow{color:var(--brass)}
/* 82px, not 88: at 88 the headline strands "Some" on a line of its own. */
.hero h1{font-family:var(--display);font-weight:500;font-size:82px;letter-spacing:-.035em;line-height:.96;margin:24px 0 0;color:var(--paper);font-variation-settings:"opsz" 144,"SOFT" 30}
.hero h1 .dot{color:var(--brass)}
.hero h1 em{font-style:italic;font-weight:400}
.hero .hero-tagline{font-family:var(--sans);font-weight:600;font-size:19px;line-height:1.5;letter-spacing:.005em;color:var(--paper);margin:28px 0 0;max-width:560px}
.hero .hero-tagline .dot{color:var(--brass)}
.hero p.lede{font-family:var(--display);font-style:italic;font-size:22px;line-height:1.45;color:rgba(245,242,237,.78);margin:24px 0 0;max-width:520px}
.btns{display:flex;gap:12px;margin-top:40px;flex-wrap:wrap}
.btn{font-family:var(--sans);font-size:13px;font-weight:500;padding:14px 26px;border:1px solid var(--navy);cursor:pointer;transition:all .18s ease;letter-spacing:.01em;text-decoration:none;display:inline-block}
.btn-primary{background:var(--navy);color:var(--paper);border-color:var(--navy)}
.btn-primary:hover{background:var(--navyDeep)}
.btn-secondary{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-secondary:hover{background:var(--navy);color:var(--paper)}
/* Hero buttons inverted for navy ground */
.hero .btn-primary{background:var(--brass);color:var(--navy);border-color:var(--brass)}
.hero .btn-primary:hover{background:var(--brassLt);border-color:var(--brassLt)}
.hero .btn-secondary{background:transparent;color:var(--paper);border-color:rgba(245,242,237,.5)}
.hero .btn-secondary:hover{background:var(--paper);color:var(--navy);border-color:var(--paper)}

/* Services — light variant on default ground; dark variant when inside hero */
.svc-card{padding-top:18px}
.svc-card .eyebrow-mute{margin-bottom:18px}
.svc-row{display:grid;grid-template-columns:32px 1fr;gap:14px;padding:18px 0;border-bottom:1px solid var(--rule);align-items:start}
.svc-row .num{font-family:var(--mono);font-size:10px;color:var(--brass);letter-spacing:.08em;padding-top:4px}
.svc-row h3{font-family:var(--display);font-size:18px;font-weight:500;color:var(--navy);margin:0 0 4px;letter-spacing:-.01em}
.svc-row p{font-size:13px;color:var(--slate);line-height:1.5;margin:0}
/* Hero variant of the service list */
.hero .svc-card .eyebrow-mute{color:rgba(245,242,237,.55)}
.hero .svc-row{border-bottom-color:rgba(255,255,255,.14)}
.hero .svc-row h3{color:var(--paper)}
.hero .svc-row p{color:rgba(245,242,237,.7)}

/* Trust bar — sits between hero (navy) and Engagements (paper) */
.trust-bar{background:var(--paper);border-bottom:1px solid var(--rule);padding:22px 0}
.trust-bar .wrap{display:flex;flex-direction:column;gap:10px}
/* Grid, not flex-wrap: a fixed label column keeps the rows aligned however long the name list gets. */
.trust-row{display:grid;grid-template-columns:186px 1fr;gap:28px;align-items:baseline}
.trust-label{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);white-space:nowrap}
.trust-row.current .trust-label{color:var(--slateLt)}
.trust-names{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--slate);line-height:1.7}
.trust-row.current .trust-names{color:var(--slateLt);font-weight:400}
@media (max-width:760px){
  .trust-bar{padding:18px 0}
  .trust-row{grid-template-columns:1fr;gap:6px}
  .trust-names{font-size:12px;line-height:1.65}
}

/* Section pattern */
section{padding:72px 0;position:relative}

/* Section breaks. A hairline at every boundary between two sections sharing the
   paper ground, so the page reads as a set of parts rather than one long scroll.
   Boundaries that already change ground colour — the navy pull quote, the contact
   band — separate themselves and take no rule. */
section + section{border-top:1px solid var(--rule)}
.pull, .pull + section{border-top:0}
/* Contact — navy, so the page closes on the colour it opens on. Was paperDk
   until 25 Aug (David's call). Everything inside was written for a paper ground
   and most of it sets an explicit colour, so inheriting `color` from the section
   is not enough — each child needs its own light value. Mirrors .cta-band, which
   is the same idea on the inner pages. The colour change IS the divider, so no
   border-top. */
#contact{background:var(--navy);color:var(--paper);border-top:0}
#contact h2{color:var(--paper)}
#contact h2 .dot{color:var(--brass)}
#contact .lede2{color:rgba(245,242,237,.82)}
#contact .contact-copy p+p{color:rgba(245,242,237,.62)}
#contact .contact-email{color:var(--paper)}
#contact .contact-email:hover{color:var(--brass)}
#contact .about-line{border-top-color:rgba(245,242,237,.16)}
#contact .about-line p{color:rgba(245,242,237,.58)}
#contact .eyebrow-mute{color:rgba(245,242,237,.5)}
#contact .contact-meta{color:rgba(245,242,237,.5)}
/* The portrait ring is a navy hairline on paper; on navy it would vanish. */
#contact .portrait::after{border-color:rgba(245,242,237,.28)}
section h2{font-family:var(--display);font-size:48px;font-weight:500;letter-spacing:-.025em;color:var(--navy);margin:18px 0 0;line-height:1.05;max-width:780px}
section .lede2{font-family:var(--display);font-style:italic;font-size:20px;line-height:1.5;color:var(--slate);margin:28px 0 0;max-width:680px}

/* Engagements — vignette block + shape strip */
.engagement{margin-top:56px;padding:40px 44px;background:var(--paperDk);border:1px solid var(--rule);position:relative}
.engagement-head{margin-bottom:28px;padding-bottom:22px;border-bottom:1px solid var(--rule)}
.engagement-tag{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);margin-bottom:14px}
.engagement-head h3{font-family:var(--display);font-size:30px;font-weight:500;color:var(--navy);margin:0;line-height:1.15;letter-spacing:-.02em;max-width:820px}
.engagement-body{display:grid;gap:24px}
.engagement-block .eyebrow-mute{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--slateLt);margin-bottom:8px}
.engagement-block p{font-size:15px;line-height:1.7;color:var(--ink);margin:0;max-width:760px}
.engagement-block p em{font-style:italic;color:var(--navy)}

.engagement-shape{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:48px;padding-top:32px;border-top:1px solid var(--rule)}
.shape-card .num{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin-bottom:10px}
.shape-card p{font-family:var(--display);font-size:18px;font-weight:500;color:var(--navy);margin:0;line-height:1.4;letter-spacing:-.005em}

.more-on-request{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--slateLt);margin:32px 0 0;padding-top:24px;border-top:1px solid var(--rule)}

@media (max-width:760px){
  .engagement{padding:28px 24px;margin-top:40px}
  .engagement-head h3{font-size:22px}
  .engagement-shape{grid-template-columns:1fr;gap:20px;margin-top:32px;padding-top:24px}
}

/* Approach */
.approach{background:var(--paperDk);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.approach-note{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin:48px 0 0;padding-top:24px;border-top:1px solid var(--rule);max-width:680px}
.approach-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:56px}
.approach-grid.four{grid-template-columns:repeat(4,1fr);gap:28px}
.approach-card{border-top:1px solid var(--rule);padding-top:22px}
.approach-card .num{font-family:var(--mono);font-size:11px;color:var(--brass);letter-spacing:.12em;text-transform:uppercase}
.approach-card h4{font-family:var(--display);font-size:22px;font-weight:500;color:var(--navy);margin:14px 0 10px;letter-spacing:-.01em}
.approach-card p{font-size:14px;color:var(--slate);line-height:1.55;margin:0}

/* People */
.people{background:var(--paper);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.people-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-top:64px}
.person{display:grid;grid-template-columns:120px 1fr;grid-template-rows:auto auto;column-gap:28px;row-gap:14px;align-items:start}
.person .monogram{grid-row:span 2;align-self:start}
.person .monogram svg{display:block}
.person-meta h3{font-family:var(--display);font-size:28px;font-weight:500;letter-spacing:-.015em;color:var(--navy);margin:6px 0 6px;line-height:1.1}
.person-meta .role{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);display:block}
.person-bio{grid-column:1 / -1;font-family:var(--display);font-style:italic;font-size:18px;line-height:1.55;color:var(--slate);margin:8px 0 0}

.associates{margin-top:88px;padding-top:48px;border-top:1px solid var(--rule)}
.associates .eyebrow-mute{display:block;margin-bottom:32px}
.quote-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:40px}
.quote{margin:0;padding:24px 0 0;border-top:1px solid var(--rule);display:flex;flex-direction:column;gap:24px}
.quote blockquote{font-family:var(--display);font-style:italic;font-size:19px;line-height:1.45;color:var(--navy);margin:0;letter-spacing:-.005em}
.quote blockquote::before{content:"\201C";color:var(--brass);font-size:32px;line-height:0;vertical-align:-12px;margin-right:4px}
.quote figcaption{display:flex;flex-direction:column;gap:4px;margin-top:auto}
.quote .cite-name{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--navy)}
.quote .cite-role{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--slateLt)}

/* Pull quote */
.pull{padding:96px 0;background:var(--navy);color:var(--paper);position:relative;overflow:clip}
.pull .wrap{position:relative;z-index:2}
.pull blockquote{font-family:var(--display);font-size:42px;font-weight:400;letter-spacing:-.02em;line-height:1.2;margin:0;max-width:900px}
.pull blockquote em{font-style:italic;color:var(--paper)}
.pull blockquote .dot{color:var(--brass)}
.pull-cite{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin:34px 0 0}

/* Contact — no form; the email address is the call to action. */
.contact-direct{display:grid;grid-template-columns:auto 1fr;gap:40px;margin-top:48px;align-items:start;max-width:820px}
/* Both partners are photographs now, so these sit side by side with a gap. They used to
   overlap by 18px, which suited two monograms — overlapping circular portraits instead
   read as an avatar stack, which is the wrong register for this page. */
.contact-figure{display:flex;gap:14px;padding-top:6px}
.contact-figure svg{display:block}
.contact-copy .lede2{margin-top:0}
.contact-copy p+p{font-size:15px;color:var(--slate);line-height:1.6;margin:20px 0 0}
.contact-email{display:inline-block;font-family:var(--display);font-size:34px;font-weight:500;letter-spacing:-.02em;color:var(--navy);margin:40px 0 0;border-bottom:1.5px solid var(--brass);padding-bottom:4px;transition:color .18s ease}
.contact-email:hover{color:var(--brass)}
.contact-meta{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--slate);margin-top:40px;line-height:1.9}
@media (max-width:760px){
  .contact-direct{grid-template-columns:1fr;gap:24px}
}

/* Footer */
/* Footer — navy, 25 Aug (David). It now abuts a navy band on every page: #contact
   on the homepage, .cta-band everywhere else. The hairline keeps the two reading
   as separate blocks rather than one long navy field; it is light-on-navy, not
   var(--rule), which would disappear. Padding is up from 24px because a dark
   block this size needs the air. */
footer{background:var(--navy);border-top:1px solid rgba(245,242,237,.14);padding:34px 0;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(245,242,237,.55)}
footer a{color:rgba(245,242,237,.72)}
footer a:hover{color:var(--brass)}
footer .row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}

/* Responsive — desktop / large laptop default above. Below: laptop, tablet, mobile, small mobile. */
@media (max-width:1100px){
  .hero h1{font-size:74px}
}
/* 1100-980 is the tightest band: two-column hero, narrow copy column. 66px keeps
   the headline to three lines; below 980 the grid goes single-column and 60 is fine. */
@media (max-width:1060px){
  .hero h1{font-size:66px}
}
@media (max-width:980px){
  :root{--gutter:32px}
  .hero{padding:64px 0 64px}
  .hero h1{font-size:60px}
  .hero-grid{grid-template-columns:1fr;gap:48px}
  .approach-grid,.approach-grid.four{grid-template-columns:repeat(2,1fr);gap:28px}
  .people-grid{grid-template-columns:1fr;gap:48px}
  .quote-grid{grid-template-columns:1fr 1fr;gap:24px}
  section{padding:72px 0}
  section h2{font-size:36px}
  .pull{padding:88px 0}
  .pull blockquote{font-size:32px}
}
@media (max-width:760px){
  .approach-grid,.approach-grid.four{grid-template-columns:1fr;gap:20px}
  .quote-grid{grid-template-columns:1fr;gap:20px}
  .person{grid-template-columns:80px 1fr;column-gap:20px}
  .person .monogram svg{width:80px;height:80px}
  .person-meta h3{font-size:24px}
  nav.primary{display:none}
  .menu-btn{display:inline-block}
  .hero h1{font-size:52px}
  section h2{font-size:32px}
}
@media (max-width:640px){
  :root{--gutter:22px}
  html{scroll-padding-top:76px}
  .nav{padding:18px 0;gap:12px}
  .brand{gap:12px}
  .brand .wordmark{font-size:24px}
  .brand svg{width:38px;height:38px}
  .hero{padding:48px 0 56px}
  .hero::before{width:80px;height:80px;top:24px;right:24px;background-size:1px 28px,28px 1px;background-position:40px 0,0 40px}
  .hero h1{font-size:44px;letter-spacing:-.03em}
  .hero p.lede{font-size:18px}
  section{padding:64px 0}
  section h2{font-size:28px}
  .pull{padding:72px 0}
  .pull blockquote{font-size:24px}
  .cta-link{display:none}
  /* Touch targets ≥44px */
  .btn{padding:16px 24px;font-size:14px;min-height:48px}
  nav.primary a,.mobile-nav a{min-height:48px;display:flex;align-items:center}
  .contact-email{font-size:24px}
}
@media (max-width:380px){
  :root{--gutter:18px}
  .hero h1{font-size:38px}
  .pull blockquote{font-size:21px}
}

/* Mobile menu (CSS-only) — sits inside the paper header */
/* Menu toggle. Visually hidden but still focusable — display:none would take it out of
   the tab order and the accessibility tree, leaving the menu pointer-only. The checkbox
   carries the state; the label is the visible control and shows the focus ring. */
#menu-toggle{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#menu-toggle:checked ~ .mobile-nav{display:flex}
#menu-toggle:focus-visible ~ .nav .menu-btn{outline:2px solid var(--navy);outline-offset:3px}
main:focus{outline:none}
.mobile-nav{display:none;flex-direction:column;gap:0;padding:8px 0 16px;border-top:1px solid var(--rule)}
.mobile-nav a{padding:14px 0;font-size:14px;font-weight:500;color:var(--navy);border-bottom:1px solid var(--rule)}
.mobile-nav a:last-child{border-bottom:none}
@media (min-width:761px){.mobile-nav{display:none !important}
  /* Above the breakpoint the menu button is hidden, so the toggle must leave the tab
     order too — otherwise desktop keyboard users hit a control with no visible target. */
  #menu-toggle{display:none}}

/* ============================================================
   SERVICE & CASE-STUDY PAGES
   Added when the six service-line pages and case studies were
   built out. The homepage keeps its own hero; inner pages use
   .page-hero, a shorter navy band with no right-hand column.
   ============================================================ */

/* Inner-page hero */
.page-hero{padding:72px 0 76px;background:var(--navy);color:var(--paper);position:relative;overflow:clip}
.page-hero h1{font-family:var(--display);font-weight:500;font-size:64px;letter-spacing:-.03em;line-height:1.02;margin:22px 0 0;color:var(--paper);font-variation-settings:"opsz" 144,"SOFT" 30;max-width:900px}
.page-hero h1 .dot{color:var(--brass)}
.page-hero h1 em{font-style:italic;font-weight:400}
.page-hero .promise{font-family:var(--display);font-style:italic;font-size:22px;line-height:1.45;color:rgba(245,242,237,.78);margin:26px 0 0;max-width:640px}

/* Breadcrumb — mono, sits above the H1 on the navy ground */
.crumb{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,242,237,.55)}
.crumb a{color:rgba(245,242,237,.55);border-bottom:1px solid transparent;padding-bottom:1px}
.crumb a:hover{color:var(--brass);border-bottom-color:var(--brass)}
.crumb .sep{margin:0 8px;color:rgba(245,242,237,.3)}

/* Inner-page prose blocks */
.prose{padding:88px 0}
.prose-grid{display:grid;grid-template-columns:200px 1fr;gap:48px;align-items:start;padding:40px 0;border-top:1px solid var(--rule)}
.prose-grid:first-child{border-top:none;padding-top:0}
.prose-label{font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);padding-top:6px;margin:0;line-height:1.5}
.prose-body p{font-size:17px;line-height:1.72;color:var(--ink);margin:0;max-width:64ch}
.prose-body p+p{margin-top:18px}
.prose-body strong{font-weight:600;color:var(--navy)}
.prose-body em{font-style:italic;color:var(--navy)}

/* "What you're left with" — the working artefact, given weight */
.artefact{background:var(--paperDk);border:1px solid var(--rule);padding:36px 40px;margin-top:56px}
.artefact .eyebrow{display:block;margin-bottom:14px}
.artefact p{font-family:var(--display);font-size:22px;line-height:1.45;color:var(--navy);margin:0;max-width:60ch;letter-spacing:-.01em}

/* Services index on the homepage */
.svc-index{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:56px;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.svc-tile{display:block;padding:32px 30px 34px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--paper);transition:background .18s ease}
.svc-tile:hover{background:var(--paperDk)}
.svc-tile .num{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--brass);display:block;margin-bottom:14px}
.svc-tile h3{font-family:var(--display);font-size:23px;font-weight:500;color:var(--navy);margin:0 0 10px;letter-spacing:-.015em;line-height:1.2}
.svc-tile p{font-size:14px;line-height:1.6;color:var(--slate);margin:0}
.svc-tile .go{display:inline-block;margin-top:16px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);border-bottom:1.5px solid var(--brass);padding-bottom:2px}
.svc-tile:hover .go{color:var(--brass)}

/* Case-study cards */
.cs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:48px}
.cs-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--rule);padding:30px 28px 32px;transition:border-color .18s ease}
.cs-card:hover{border-color:var(--brass)}
.cs-card .tag{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin-bottom:16px}
.cs-card h3{font-family:var(--display);font-size:21px;font-weight:500;color:var(--navy);margin:0 0 12px;line-height:1.25;letter-spacing:-.01em}
.cs-card p{font-size:14px;line-height:1.6;color:var(--slate);margin:0 0 20px}
.cs-card .go{margin-top:auto;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);border-bottom:1.5px solid var(--brass);padding-bottom:2px;align-self:flex-start}
.cs-card:hover .go{color:var(--brass)}

/* Case-study result figure */
.cs-result{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:48px;padding-top:36px;border-top:1px solid var(--rule)}
.cs-figure .n{font-family:var(--display);font-size:44px;font-weight:500;color:var(--navy);letter-spacing:-.03em;line-height:1;display:block}
.cs-figure .l{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--slateLt);margin-top:12px;display:block;line-height:1.6}

/* Related links strip */
.related{border-top:1px solid var(--rule);padding-top:36px;margin-top:64px}
.related .eyebrow-mute{display:block;margin-bottom:20px}
.related-list{display:flex;flex-wrap:wrap;gap:12px 28px}
.related-list a{font-size:15px;font-weight:500;color:var(--navy);border-bottom:1.5px solid var(--brass);padding-bottom:2px}
.related-list a:hover{color:var(--brass)}

/* CTA band — closes every inner page */
.cta-band{background:var(--navy);color:var(--paper);padding:80px 0}
.cta-band h2{font-family:var(--display);font-size:40px;font-weight:500;color:var(--paper);letter-spacing:-.025em;margin:0;line-height:1.1}
.cta-band h2 .dot{color:var(--brass)}
.cta-band p{font-family:var(--display);font-style:italic;font-size:19px;color:rgba(245,242,237,.78);margin:22px 0 0;max-width:560px;line-height:1.5}
.cta-band .contact-email{color:var(--paper);font-size:30px;margin-top:34px}
.cta-band .contact-email:hover{color:var(--brass)}

/* Footer — legal disclosures required by the Companies (Trading
   Disclosures) Regulations: name, number, place of registration,
   registered office. */
footer .legal-lines{display:flex;flex-direction:column;gap:4px;line-height:1.9}
footer .legal-lines span{display:block}

@media (max-width:980px){
  .page-hero{padding:56px 0 60px}
  .page-hero h1{font-size:48px}
  .svc-index{grid-template-columns:repeat(2,1fr)}
  .cs-grid{grid-template-columns:1fr;gap:20px}
  .cs-result{grid-template-columns:1fr;gap:28px}
  .prose{padding:64px 0}
  .prose-grid{grid-template-columns:1fr;gap:14px;padding:32px 0}
  .prose-label{padding-top:0}
  .cta-band{padding:64px 0}
  .cta-band h2{font-size:32px}
}
@media (max-width:640px){
  .page-hero{padding:44px 0 48px}
  .page-hero h1{font-size:36px}
  .page-hero .promise{font-size:18px}
  .page-hero::before{width:80px;height:80px;top:24px;right:24px;background-size:1px 28px,28px 1px;background-position:40px 0,0 40px}
  .svc-index{grid-template-columns:1fr}
  .artefact{padding:26px 22px}
  .artefact p{font-size:18px}
  .prose-body p{font-size:16px}
  .cs-figure .n{font-size:36px}
  .cta-band h2{font-size:26px}
  .cta-band .contact-email{font-size:22px}
}

/* Partner portraits — circular, hairline ring and brass dot so a photo sits
   in the same visual slot as the letter monogram it replaces. */
.portrait{position:relative;display:block;flex:none}
.portrait img{border-radius:50%;display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.92)}
.portrait::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(10,37,64,.35);pointer-events:none}
.person .portrait{width:120px;height:120px;grid-row:span 2;align-self:start}
.contact-figure .portrait{width:76px;height:76px}

/* The problem section — paper-dark band, single column, no grid */
.problem{background:var(--paperDk);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
section p.body{font-size:19px;line-height:1.65;color:var(--ink);margin:32px 0 0;max-width:62ch}
section p.body em{font-style:italic;color:var(--navy)}

/* Plain about-line — deliberately flat prose for AI/search to quote */
.about-line{border-top:1px solid var(--rule);padding:32px 0 0;margin-top:64px}
.about-line .eyebrow-mute{display:block;margin-bottom:14px}
.about-line p{font-size:14px;line-height:1.7;color:var(--slateLt);margin:0;max-width:78ch}

@media (max-width:760px){
  .person .portrait{width:80px;height:80px}
  section p.body{font-size:17px}
}

/* ---- Legal pages (privacy, terms, accessibility) -------------------------
   Reuses .page-hero / .prose / .prose-grid from the case studies. These add
   the long-form elements legal copy needs and which case studies never used. */
.prose-body h3{font-family:var(--display);font-size:20px;font-weight:500;color:var(--navy);letter-spacing:-.01em;margin:28px 0 10px}
.prose-body h3:first-child{margin-top:0}
.prose-body ul{margin:14px 0 0;padding-left:20px;max-width:64ch}
.prose-body li{font-size:17px;line-height:1.72;color:var(--ink);margin:0 0 8px}
.prose-body li::marker{color:var(--brass)}
.prose-body a{color:var(--navy);border-bottom:1.5px solid var(--brass);padding-bottom:1px}
.prose-body a:hover{color:var(--brass)}
.prose-body .small{font-size:15px;color:var(--slate)}
.legal-updated{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--slateLt);margin:0 0 8px}

/* ---- Footer legal navigation --------------------------------------------- */
footer .row{align-items:flex-start}
.footer-nav{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:14px}
.footer-nav a{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(245,242,237,.72);border-bottom:1px solid transparent;padding-bottom:1px}
/* Was color:var(--navy) on hover, which is invisible on a navy ground. */
.footer-nav a:hover{color:var(--brass);border-bottom-color:var(--brass)}
@media (max-width:640px){
  .prose-body h3{font-size:18px}
  .footer-nav{gap:8px 16px}
}


/* Service-page deliverables table. Two columns: what you get, what it answers.
   Durations were removed deliberately — they are circumstance-specific. */
.deliv{margin:8px 0 40px}
.deliv table{width:100%;border-collapse:collapse;font-size:15px}
.deliv th{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass);text-align:left;font-weight:400;padding:0 14px 10px 0;
  border-bottom:1px solid var(--rule);white-space:nowrap}
.deliv td{padding:13px 14px 13px 0;border-bottom:1px solid var(--ruleLt);vertical-align:top;
  color:var(--slate);line-height:1.5}
.deliv td:first-child{color:var(--navy);font-weight:600;width:31%}
.deliv tr:last-child td{border-bottom:none}

/* Boxed market-evidence aside */
.aside-box{background:var(--paperDk);border-left:2px solid var(--brass);padding:22px 26px;margin:0 0 36px}
.aside-box .eyebrow{display:block;margin-bottom:10px}
.aside-box p{margin:0;font-size:15.5px;line-height:1.65;color:var(--slate)}
.aside-box p+p{margin-top:10px}

/* Why-us list at the foot of a service page */

@media (max-width:700px){
  .deliv td:first-child{width:auto}
  .deliv table,.deliv thead,.deliv tbody,.deliv tr,.deliv td{display:block;width:auto}
  .deliv thead{display:none}
  .deliv td{border-bottom:none;padding:2px 0}
  .deliv tr{border-bottom:1px solid var(--ruleLt);padding:12px 0;display:block}
}

/* Audience register. Four organisation types, two columns, a hairline above each
   so it reads as a list of who the work is for, not a claimed client list. */
.audience{display:grid;grid-template-columns:repeat(2,1fr);gap:0 56px;margin:44px 0 0;border-bottom:1px solid var(--rule)}
.audience > div{padding:20px 0;border-top:1px solid var(--rule)}
.audience h3{font-family:var(--display);font-size:18px;font-weight:500;color:var(--navy);margin:0 0 10px;letter-spacing:-.01em}
.audience p{font-size:14px;line-height:1.65;color:var(--slate);margin:0;max-width:46ch}
@media (max-width:760px){.audience{grid-template-columns:1fr;gap:0}}

/* Note under a deliverables table. Sits between the table and any aside box, so it
   carries its own bottom margin rather than relying on a sibling. */
.prose-body p.deliv-note{margin:0 0 36px;color:var(--slate)}


/* ============================================================
   DECORATIVE TEXTURE — added 24 Aug 2026 (David: "the site could
   benefit of some imagery"). Two marks, no image files, no JS.

     .pull::before      ghost Votra monogram on the navy band. Replaces
                        the single brass crosshair that used to sit here.
                        Drifts AND fades as the band crosses the viewport:
                        the V arrives, brightens, and leaves.
     #approach::before  drafting grid on the longest paper section. Draws
                        in as the section arrives, then holds still. It
                        deliberately does NOT slide — moving 1px rules
                        shimmer across pixel boundaries on non-retina
                        displays and read as a rendering fault.

   The static marks are defined first and are the real design. The motion
   is added inside @supports, so a browser without animation-timeline
   (Firefox, as at Aug 2026) keeps the static version rather than being
   left on an animation's end frame. Do not hoist the animation out of
   the @supports block.

   TWO THINGS THAT SILENTLY BREAK THIS — read before editing:

   1. .pull and #approach must be overflow:CLIP, not overflow:hidden.
      overflow:hidden makes an element its own scroll container, which
      anchors view() to a box that never scrolls. The animation then sits
      frozen at its start frame and nothing in devtools tells you why.

   2. The prefers-reduced-motion block at the top of this file does NOT
      stop these. It works by forcing animation-duration to ~0, and
      scroll-driven animations ignore duration — scroll position drives
      them. The explicit rule at the bottom of this section is what
      actually honours the user's setting. Do not delete it.
   ============================================================ */

/* --- the static marks --- */

.pull::before,.hero::before,.page-hero::before{content:"V";position:absolute;right:-.02em;top:50%;
  transform:translateY(-50%);pointer-events:none;z-index:0;
  font-family:var(--display);font-weight:500;line-height:.72;
  letter-spacing:-.06em;color:var(--brassLt);opacity:.14;
  font-variation-settings:"opsz" 144,"SOFT" 30}
.pull::before{font-size:380px}
.hero::before{font-size:660px}
.page-hero::before{font-size:380px}
.hero>.wrap,.page-hero>.wrap{position:relative;z-index:2}

#approach{overflow:clip}
#approach>.wrap{position:relative;z-index:2}
#approach::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(to right,var(--ruleDk) 1px,transparent 1px),
    linear-gradient(to bottom,var(--ruleDk) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:linear-gradient(to bottom left,#000 0%,transparent 62%);
          mask-image:linear-gradient(to bottom left,#000 0%,transparent 62%)}

/* --- the motion, only where the browser supports it --- */

@supports (animation-timeline:view()){

  .pull::before{animation:votra-vdrift linear both;
    animation-timeline:view();animation-range:entry 0% exit 100%}
  @keyframes votra-vdrift{
    0%  {transform:translateY(-50%) translateX(14%);opacity:.03}
    45% {opacity:.16}
    100%{transform:translateY(-50%) translateX(-10%);opacity:.05}}

  /* Ranged on `exit`, not `entry`, because both heroes sit at the TOP of the
     document and are already fully in view at scroll 0 — an entry-ranged mark
     would have finished animating before the reader ever looked at it. `exit`
     holds the static V while the hero is being read, then drifts and fades it
     as the hero scrolls away. For a top-of-document element the exit range runs
     from scroll 0 to scroll = the hero's own height. */
  #approach::before{animation:votra-gridfade linear both;
    animation-timeline:view();animation-range:cover 5% cover 30%}
  @keyframes votra-gridfade{from{opacity:0}to{opacity:1}}

  /* Load-bearing. See note 2 above. */
  @media (prefers-reduced-motion:reduce){
    .pull::before{animation:none;transform:translateY(-50%);opacity:.14}
    #approach::before{animation:none;opacity:1}
  }
}

/* Hero monogram motion — DOCUMENT scroll, not view().

   Travel is deliberately the original subtle amount; only the TIMING changed.
   view() was the wrong timeline here: its `exit` phase does not begin until the
   element has already started scrolling past, so on a hero that fills the screen
   the V held still through the part of the scroll where anyone was looking at it,
   then moved as it left frame. David, twice: "you'll hardly notice until you've
   almost scrolled away", "it doesn't move as you scroll until as you are coming
   out of shot." Amplifying the travel was tried and rejected as cheap — the
   problem was never the distance, it was when the distance was spent.

   scroll(root block) starts at the first pixel of scroll, and an explicit 600px
   range behaves identically on the 922px homepage hero and the 346px inner-page
   one — view() could not, because their entry/exit phases sit at different
   scroll offsets when the elements are different heights.

   Gated on scroll() specifically, NOT on view(). A browser with view() but
   without scroll() would treat the timeline as invalid, drop it, and run the
   animation on the document timeline at a 0s duration — landing on the end
   frame, a nearly invisible V. The static mark outside this block is the
   fallback and must stay outside it.

   .pull keeps view() and its original motion: it is mid-document, so when it
   enters and leaves the viewport IS the thing worth tracking. Do not unify them. */
@supports (animation-timeline:scroll()){
  .hero::before,.page-hero::before{animation:votra-vexit linear both;
    animation-timeline:scroll(root block);animation-range:0px 600px}
  @keyframes votra-vexit{
    from{transform:translateY(-50%) translateX(0);opacity:.14}
    to  {transform:translateY(-50%) translateX(-14%);opacity:.02}}

  @media (prefers-reduced-motion:reduce){
    .hero::before,.page-hero::before{animation:none;transform:translateY(-50%);opacity:.14}
  }
}

@media (max-width:900px){
  .pull::before{font-size:240px}
  .hero::before{font-size:260px}
  .page-hero::before{font-size:240px}
  #approach::before{background-size:44px 44px}
}

/* Structured director credentials. The bios were a wall of prose; this gives both
   directors the same shape and the same weight. */
.person-cred{grid-column:1 / -1;list-style:none;padding:0;margin:22px 0 0;max-width:52ch}
.person-cred li{padding:16px 0;margin:0;border-top:1px solid var(--ruleLt);font-size:15px;line-height:1.6;color:var(--slate)}
.person-cred li:first-child{border-top:1px solid var(--rule)}
.person-cred b{display:block;font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brass);margin-bottom:7px}

/* Case-study rotator. Radio + :checked, no JavaScript — the inputs stay focusable
   so the tabs are keyboard-operable, same rule as the menu toggle. */
.rot{margin:44px 0 0}
.rot > input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.rot-tabs{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--rule)}
.rot-tabs label{display:flex;align-items:baseline;gap:10px;padding:14px 26px 14px 0;margin-right:26px;cursor:pointer;
  font-family:var(--sans);font-size:15px;font-weight:500;color:var(--slateLt);border-bottom:2px solid transparent;margin-bottom:-1px}
.rot-tabs label .n{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--brass)}
.rot-tabs label:hover{color:var(--navy)}
#cs1:checked ~ .rot-tabs label[for="cs1"],
#cs2:checked ~ .rot-tabs label[for="cs2"],
#cs3:checked ~ .rot-tabs label[for="cs3"],
#cs4:checked ~ .rot-tabs label[for="cs4"]{color:var(--navy);border-bottom-color:var(--brass)}
#cs1:focus-visible ~ .rot-tabs label[for="cs1"],
#cs2:focus-visible ~ .rot-tabs label[for="cs2"],
#cs3:focus-visible ~ .rot-tabs label[for="cs3"],
#cs4:focus-visible ~ .rot-tabs label[for="cs4"]{outline:2px solid var(--navy);outline-offset:3px}
.rot-panel{display:none;padding:36px 0 0}
#cs1:checked ~ .rot-panels .rot-panel:nth-child(1),
#cs2:checked ~ .rot-panels .rot-panel:nth-child(2),
#cs3:checked ~ .rot-panels .rot-panel:nth-child(3),
#cs4:checked ~ .rot-panels .rot-panel:nth-child(4){display:block}
.rot-panel .tag{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--slateLt);display:block}
.rot-panel h3{font-family:var(--display);font-size:30px;font-weight:500;color:var(--navy);letter-spacing:-.02em;line-height:1.15;margin:14px 0 0;max-width:20ch}
.rot-panel > p{font-size:17px;line-height:1.7;color:var(--slate);margin:20px 0 0;max-width:62ch}
.rot-figs{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:32px 0 0;padding-top:26px;border-top:1px solid var(--ruleLt);max-width:760px}
.rot-figs span{display:block}
.rot-figs b{display:block;font-family:var(--display);font-size:30px;font-weight:500;color:var(--navy);letter-spacing:-.03em;line-height:1;text-transform:none;margin-bottom:10px}
.rot-figs span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--slateLt);line-height:1.6}
.rot-panel .go{display:inline-block;margin:30px 0 0;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--navy);border-bottom:1px solid var(--brass);padding-bottom:3px}
@media (max-width:760px){
  .rot-panel h3{font-size:24px;max-width:none}
  .rot-figs{grid-template-columns:1fr;gap:18px}
  .rot-tabs label{padding:12px 0;margin-right:20px;font-size:14px}
}

/* Director LinkedIn, under the role line in the people section. */
.person-link{display:inline-block;margin-top:8px;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--slateLt);
  border-bottom:1px solid var(--rule);padding-bottom:2px}
.person-link:hover{color:var(--navy);border-bottom-color:var(--brass)}
.person-link:focus-visible{outline:2px solid var(--navy);outline-offset:3px}

h2.eyebrow-mute{font-weight:400;margin:0}

.prose-body h2.sub-h{font-family:var(--display);font-size:20px;font-weight:500;color:var(--navy);letter-spacing:-.01em;margin:28px 0 10px}
.prose-body h2.sub-h:first-child{margin-top:0}