/* Mackasey — shared core. Edit here only. */
/* ==========================================================================
   MACKASEY — HOMEPAGE
   Palette: warm ivory, warm stone, charcoal, white. No accent hue.
   Contrast comes from colour blocking, scale and typography rather than colour:
   a stone statement band, charcoal sections, and white/stone card alternation.
   ========================================================================== */

/* 1. TOKENS ---------------------------------------------------------------- */
:root{
  --ivory:      #F7F4EE;
  --white:      #FFFFFF;
  --charcoal:   #1B1D1C;
  /* Olive-lime is a mark and a fill, never type on a light ground (1.7:1 on ivory).
     Deep olive carries the type; charcoal sits on top of the lime, not ivory. */
  --citron:     #B8C928;
  --olive:      #657019;   /* type on light grounds */
  --alert:      #A65A4C;   /* muted red — negative coverage only */
  --olive-lit:  #8A9A28;   /* the same family, light enough for type on charcoal */
  --logo-rule:  #B8C928;   /* the wordmark rule — measured off the final sheet */
  --ink:        #1B1D1C;
  --ink-soft:   #34372F;
  --stone:      #E9E5DE;   /* soft warm neutral */
  --stone-deep: #DCD7CC;

  --charcoal-soft: #5F605E;
  --charcoal-mid:  #454746;
  --line:          #DCD7CC;
  --line-stone:    #DCD7CC;
  --on-dark:       #F2EFE8;
  --on-dark-soft:  rgba(244,242,237,.74);


  --display: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --sans:    "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --t-h1:    clamp(2.6rem, 6.6vw, 5rem);
  --t-h2:    clamp(1.9rem, 3.8vw, 3.05rem);
  --t-h3:    clamp(1.18rem, 1.6vw, 1.42rem);
  --t-lead:  clamp(1.02rem, 1.3vw, 1.22rem);
  --t-body:  1rem;
  --t-small: .845rem;
  --t-eyebrow: .68rem;

  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --sec-y:  clamp(3.1rem, 5.6vw, 5.5rem);
  --sec-y-sm: clamp(2.4rem, 4.3vw, 4.15rem);   /* ~24% tighter */
  --sec-y-xs: clamp(1.8rem, 3.1vw, 2.9rem);    /* the positioning transition */
  --max:    1280px;
}
/* 2. BASE ------------------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--ivory); color:var(--charcoal);
  font-family:var(--sans); font-size:var(--t-body); font-weight:400;
  line-height:1.72; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p,ul{ margin:0 }
ul{ padding:0; list-style:none }
img{ max-width:100%; height:auto; display:block }
a{ color:inherit }
h1,h2,h3{ font-family:var(--display); font-weight:500 }
h1{ font-size:var(--t-h1); line-height:1.04; letter-spacing:-.015em }
h2{ font-size:var(--t-h2); line-height:1.1;  letter-spacing:-.012em }
h3{ font-size:var(--t-h3); line-height:1.32; letter-spacing:-.005em }
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px }
.on-dark :focus-visible{ outline-color:var(--citron) }
/* Selection tints, kept quiet on both grounds. Section labels and display
   headings are chrome rather than reading text, so they opt out entirely. */
::selection{ background:rgba(29,31,30,.11) }
.band-dark ::selection,
.site-footer ::selection{ background:rgba(244,242,237,.16) }
.eyebrow,
h1, h2, h3{ -webkit-user-select:none; user-select:none }
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:.85rem 1.25rem;
  font-size:var(--t-small); font-weight:500;
}
.skip:focus{ left:.75rem; top:.75rem }
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
/* 3. LAYOUT ---------------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter) }
.section{ padding-block:var(--sec-y) }
.section--tight{ padding-block:clamp(2.2rem,3.5vw,3.05rem) }
.section--snug{ padding-block:var(--sec-y-sm) }
.section--trans{ padding-block:var(--sec-y-xs) }
/* the gap between the positioning statement and What We Do Best was the sum of two
   paddings; both sides are cut so the join closes without either section feeling squeezed */
.section--trans-b{ padding-block:var(--sec-y-xs) clamp(1.6rem,2.7vw,2.55rem) }
.section--services{ padding-block:clamp(1.85rem,3.2vw,3.05rem) var(--sec-y-sm) }
/* Results: top only. The cards should arrive sooner; the run-out below is fine. */
.section--results{ padding-block:clamp(1.6rem,2.8vw,2.65rem) var(--sec-y-sm) }
.section--dark{ padding-block:clamp(2.5rem,4.5vw,4.3rem) }
.section--quotes{ padding-block:clamp(1.9rem,3.3vw,3.05rem) }
.section--quotes .head{ margin-bottom:clamp(1.35rem,2.3vw,1.9rem) }
.band-stone{ background:var(--stone) }
.band-stone{ background:var(--stone) }
.band-dark{ background:var(--charcoal); color:var(--on-dark) }
.band-dark h2,.band-dark h3{ color:var(--ivory) }
.hr{ height:1px; background:var(--line); border:0; margin:0 }
.rail{ display:grid; grid-template-columns:minmax(0,10.5rem) minmax(0,1fr); gap:clamp(1.5rem,4vw,4rem) }
.rail__body{ max-width:56ch }
/* 4. COMPONENTS ------------------------------------------------------------ */
.eyebrow{
  display:flex; align-items:center; gap:.75rem;
  font-family:var(--sans); font-size:var(--t-eyebrow); font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--charcoal-soft);
  margin:0 0 1.1rem; line-height:1.4;
}
.eyebrow::before{
  content:""; width:1.9rem; height:3px; flex:none; background:var(--citron);
  transform:scaleX(0); transform-origin:left;
  transition:transform .75s cubic-bezier(.2,.7,.3,1);
}
.eyebrow.is-in::before{ transform:scaleX(1) }
.band-dark .eyebrow{ color:var(--on-dark-soft) }
.band-dark .eyebrow::before{ background:var(--citron) }
.accent{
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:clamp(1.25rem,2vw,1.6rem); line-height:1.4; color:var(--charcoal);
}
.accent--light{ color:var(--olive-lit) }
.btn{
  display:inline-flex; align-items:center; gap:.65rem;
  font-family:var(--sans); font-size:var(--t-small); font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; text-decoration:none;
  padding:1.05rem 1.75rem; border:1px solid transparent; cursor:pointer;
  transition:background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.btn svg{ flex:none; transition:transform .25s ease }
.btn:hover{ transform:translateY(-2px) }
.btn:hover svg{ transform:translateX(4px) }
.btn--primary{ background:var(--charcoal); color:var(--ivory) }
.btn--primary:hover{ background:var(--citron); color:var(--charcoal) }
.btn--ghost{ background:transparent; color:var(--charcoal); border-color:var(--charcoal) }
.btn--ghost:hover{ background:var(--charcoal); color:var(--ivory) }
/* the one citron button on the page — on charcoal, where it reads 9.2:1 */
.btn--light{ background:var(--citron); color:var(--charcoal) }
.btn--light:hover{ background:var(--ivory); color:var(--charcoal) }
.btn--outline-light{ background:transparent; color:var(--on-dark); border-color:rgba(250,248,243,.42) }
.btn--outline-light:hover{ background:var(--ivory); color:var(--charcoal); border-color:var(--ivory) }
.btn-row{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:center }
.arrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--sans); font-size:.78rem; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase;
  color:var(--olive); text-decoration:none;
}
.arrow span{ position:relative; padding-bottom:3px }
.arrow span::after{
  content:""; position:absolute; left:0; right:100%; bottom:0;
  height:3px; background:var(--citron); transition:right .32s ease;
}
.arrow:hover span::after,.arrow:focus-visible span::after{ right:0 }
.arrow svg{ transition:transform .25s ease }
.arrow:hover svg{ transform:translateX(4px) }
.band-dark .arrow{ color:var(--citron) }
.band-dark .arrow span::after{ background:var(--citron) }
.clip{ display:block; width:100%; background:#fff; object-fit:cover; object-position:top }
/* 4a. HEADER --------------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(250,248,243,.94); backdrop-filter:saturate(130%) blur(8px);
  border-bottom:1px solid transparent; transition:border-color .25s ease;
}
.site-header.is-stuck{ border-bottom-color:var(--line) }
.site-header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; min-height:5.5rem; transition:min-height .32s ease;
}
@media (min-width:1200px){
  .site-header__inner{ min-height:6rem }
  .site-header.is-stuck .site-header__inner{ min-height:5.15rem }
}
.brand{ text-decoration:none; flex:none; display:flex; flex-direction:column-reverse; align-items:flex-start }
/* the three descriptor lines, mirroring the footer lockup. Column-reverse keeps
   the wordmark first in the DOM for screen readers while sitting it on top. */
.brand__line{
  display:none; overflow:hidden;
  font-family:var(--sans); font-size:.5rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--charcoal-soft);
  line-height:1.85; margin-top:.5rem; max-height:3rem; opacity:1;
  transition:max-height .32s ease, opacity .22s ease, margin-top .32s ease;
}
.brand__line span{ display:block; white-space:nowrap }
@media (min-width:720px){ .brand__line{ display:block } }
.site-header.is-stuck .brand__line{ max-height:0; opacity:0; margin-top:0 }
.brand__mark{
  position:relative; display:inline-block; white-space:nowrap;
  font-family:"Prata",Georgia,serif; font-weight:400;
  font-size:clamp(1.28rem,2.05vw,1.95rem); line-height:1;
  text-transform:uppercase; letter-spacing:.075em; color:var(--charcoal);
  font-kerning:normal; font-feature-settings:"kern" 1;
}
/* the initial carries the mark — 1.22x the following capitals */
.brand__mark .m{ display:inline-block; font-size:1.22em; margin-right:-.018em }
/* kerning by eye, pair by pair: the round C and the open A both need closing up */
.brand__mark .c{ margin-left:-.012em }
.brand__mark .a2{ margin-left:-.01em }
.brand__mark .e{ margin-left:-.014em }
.brand__mark .y{ position:relative; display:inline-block; margin-left:-.008em }
/* a swash off the Y's lower-right terminal: filled and tapered rather than a
   stroke, so it thins as it travels the way a drawn terminal would.
   Tuning levers are --swash-x / --swash-y / --swash-w on .brand__mark. */
.brand__swash{
  position:absolute; left:var(--swash-x,52%); bottom:var(--swash-y,.01em);
  width:var(--swash-w,.52em); height:.3em; overflow:visible; pointer-events:none;
}
.brand__swash path{ fill:currentColor }
/* echoes the stroke under "Known" — same hand, roughly a fifth of the weight */
.brand__rule{
  position:absolute; left:-.5%; width:101%; bottom:-.2em; height:.16em;
  overflow:visible; pointer-events:none;
}
.brand__rule path{ fill:none; stroke:var(--citron); stroke-width:6; stroke-linecap:round }
.nav{ display:flex; align-items:center; gap:clamp(1rem,2.3vw,2rem) }
.nav__link{
  position:relative; text-decoration:none;
  font-size:.72rem; font-weight:500; letter-spacing:.15em; text-transform:uppercase;
  color:var(--charcoal); padding:.4rem 0;
}
.nav__link::after{
  content:""; position:absolute; left:0; right:100%; bottom:0;
  height:3px; background:var(--citron); transition:right .3s ease;
}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{ right:0 }
.nav-toggle{
  display:none; background:none; border:1px solid var(--charcoal); padding:.6rem .9rem;
  font-family:var(--sans); font-size:.7rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; cursor:pointer; color:var(--charcoal);
}
/* 4b. SERVICE CARDS -------------------------------------------------------- */
.services{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,1.9vw,1.6rem) }
.service{
  display:flex; flex-direction:column;
  background:var(--white); border-top:2px solid var(--citron);
  padding:1.6rem 1.5rem 1.35rem;
  transition:transform .32s cubic-bezier(.2,.7,.3,1), box-shadow .32s ease;
}
.service:nth-child(2){ background:var(--stone) }
.service:hover,.service:focus-within{
  transform:translateY(-6px);
  box-shadow:0 22px 40px -26px rgba(29,31,30,.28);
}
.service__num{
  display:block; font-family:var(--display); font-weight:500;
  font-size:1.8rem; line-height:1; color:var(--olive); margin-bottom:.8rem;
}
.service__label{
  display:block; font-family:var(--sans); font-size:.66rem; font-weight:600;
  letter-spacing:.19em; text-transform:uppercase; color:var(--charcoal-soft);
  margin-bottom:.75rem;
}
.service h3{ margin-bottom:.8rem }
.service p{ color:var(--charcoal-mid); margin-bottom:1.05rem; font-size:.96rem }
.service__proof{
  margin-top:auto; padding-top:.85rem; margin-bottom:.85rem;
  border-top:1px solid var(--line-stone);
  font-family:var(--sans); font-size:.75rem; font-weight:500;
  letter-spacing:.03em; color:var(--charcoal-mid); line-height:1.6;
}
/* 4c. CASE-STUDY CARDS ----------------------------------------------------- */
.results{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,1.9vw,1.6rem) }
.result{
  display:flex; flex-direction:column;
  background:var(--white); border-top:2px solid var(--citron);
  padding-bottom:1.3rem;
  transition:transform .32s cubic-bezier(.2,.7,.3,1), box-shadow .32s ease;
}
.result:nth-child(2){ background:var(--stone) }
.result:hover,.result:focus-within{
  transform:translateY(-6px);
  box-shadow:0 22px 40px -26px rgba(29,31,30,.28);
}
.result > *:not(.result__media){ padding-inline:1.5rem }
img.result__media,
svg.result__media{ width:100%; margin-bottom:1.15rem; border:0; display:block }
/* drawn in live SVG so it always tracks the palette variables */
.case-svg{ background:var(--ivory); -webkit-user-select:none; user-select:none }
.result__media{ aspect-ratio:4/3 }
.result__client{
  font-size:.66rem; font-weight:600; letter-spacing:.19em; text-transform:uppercase;
  color:var(--charcoal-soft); margin-bottom:.7rem;
}
.result h3{ margin-bottom:.7rem }
.result p{ color:var(--charcoal-mid); margin-bottom:.95rem; font-size:.94rem }
.result__wins{ margin-top:auto; padding-top:.9rem; border-top:1px solid var(--line-stone); margin-bottom:.95rem }
.win{ display:flex; gap:.6rem; font-size:.8rem; color:var(--charcoal-mid); line-height:1.5 }
.win::before{ content:""; width:.45rem; height:.45rem; background:var(--citron); margin-top:.5rem; flex:none }
.win + .win{ margin-top:.45rem }
/* 4d. PILLARS -------------------------------------------------------------- */
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.75rem,3.5vw,3rem) }
.pillar{ border-top:3px solid var(--citron); padding-top:1.5rem }
.pillar h3{ font-size:1.3rem; margin-bottom:.7rem }
.pillar p{ color:var(--on-dark-soft); font-size:.96rem }
/* 4e. TESTIMONIALS --------------------------------------------------------- */
.quotes{
  display:grid; grid-template-columns:1.08fr .92fr;
  grid-template-rows:auto auto; gap:clamp(.4rem,.75vw,.6rem) clamp(1rem,1.9vw,1.6rem);
}
.quote{ display:flex; flex-direction:column; gap:.95rem }
/* Height was being set by the two cards beside it, which left dead space under
   the attribution. It now sizes to its own content and centres in the column. */
.quote--featured{
  grid-column:1; grid-row:1 / span 2; align-self:stretch;
  background:var(--charcoal); color:var(--ivory);
  padding:clamp(1.9rem,2.8vw,2.6rem);
  justify-content:center;
}
.quote--sm{ grid-column:2; background:var(--white); border-left:4px solid var(--citron); padding:1.15rem 1.3rem 1.2rem }
.quote__mark{ font-family:var(--display); font-size:4rem; line-height:.55; color:var(--olive); height:1.5rem }
.quote--featured .quote__mark{ color:var(--citron); font-size:5.2rem; height:2rem }
.quote blockquote{ margin:0; font-family:var(--display); font-weight:400; font-style:normal; font-size:1rem; line-height:1.62 }
.quote--featured blockquote{ font-style:italic; font-size:clamp(1.22rem,1.8vw,1.6rem); line-height:1.46; color:#fff }
.quote figcaption{ font-size:.78rem; letter-spacing:.06em; color:var(--charcoal-soft); margin-top:auto; padding-top:.5rem; line-height:1.7 }
.quote--featured figcaption{ margin-top:.35rem }
.quote figcaption strong{ display:block; color:var(--charcoal); font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:.7rem; margin-bottom:.2rem }
.quote--featured figcaption{ color:var(--on-dark-soft) }
.quote--featured figcaption strong{ color:#fff }
/* 4f. FOOTER --------------------------------------------------------------- */
.site-footer{ background:var(--charcoal); color:var(--on-dark); padding-block:clamp(2.75rem,5vw,4rem) 1.75rem }
.footer-grid{ display:grid; grid-template-columns:1.5fr .8fr .8fr 1fr; gap:clamp(1.75rem,4vw,3rem) }
.footer-lockup{
  position:relative; display:inline-block;
  font-family:"Prata",Georgia,serif; font-weight:400; font-size:1.8rem; line-height:1;
  text-transform:uppercase; letter-spacing:.075em; color:var(--ivory); margin:0 0 1rem;
  font-kerning:normal; font-feature-settings:"kern" 1;
}
.footer-lockup .m{ display:inline-block; font-size:1.22em; margin-right:-.018em }
.footer-lockup .c{ margin-left:-.012em }
.footer-lockup .a2{ margin-left:-.01em }
.footer-lockup .e{ margin-left:-.014em }
.footer-lockup .y{ position:relative; display:inline-block; margin-left:-.008em }
.footer-line{
  font-family:var(--sans); font-size:.61rem; font-weight:500; letter-spacing:.15em;
  text-transform:uppercase; color:rgba(244,242,237,.6); line-height:2.05; margin-bottom:1.2rem;
}
.footer-line span{ display:block; white-space:nowrap }
.footer-col h3{
  font-family:var(--sans); font-size:.66rem; font-weight:600; letter-spacing:.19em;
  text-transform:uppercase; color:rgba(244,242,237,.55); margin-bottom:1.1rem;
}
.footer-col li + li{ margin-top:.65rem }
/* a faint resting underline so footer links read as links before hover */
.footer-col a{ text-decoration:none; font-size:.92rem; color:var(--on-dark); border-bottom:1px solid rgba(244,242,237,.32) }
.footer-col a:hover,
.footer-col a:focus-visible{ color:var(--citron); border-bottom-color:var(--citron) }
.footer-note{ font-size:.92rem; color:var(--on-dark-soft); max-width:32ch }
.footer-bottom{
  display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between; align-items:center;
  margin-top:clamp(2.5rem,5vw,4rem); padding-top:1.6rem;
  border-top:1px solid rgba(244,242,237,.18); font-size:.76rem; letter-spacing:.05em; color:rgba(244,242,237,.55);
}
.footer-bottom a{ text-decoration:none; border-bottom:1px solid transparent }
.footer-bottom a:hover{ color:var(--citron); border-bottom-color:var(--citron) }
/* 5. SECTIONS -------------------------------------------------------------- */

/* 5a. HERO ----------------------------------------------------------------- */
.hero{ padding-block:clamp(1.75rem,3.4vw,3.3rem) clamp(2.1rem,3.9vw,3.75rem) }
.hero__grid{
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.95fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
.hero h1{ margin-bottom:1.45rem; max-width:19ch }
.mark{ position:relative; display:inline-block; white-space:nowrap }
.mark svg{ position:absolute; left:-2%; bottom:-.12em; width:104%; height:.28em; overflow:visible; pointer-events:none }
.mark path{
  fill:none; stroke:var(--citron); stroke-width:11; stroke-linecap:round;
  stroke-dasharray:340; stroke-dashoffset:340;
  animation:draw 1.1s cubic-bezier(.33,0,.2,1) .55s forwards;
}
@keyframes draw{ to{ stroke-dashoffset:0 } }
.hero__lead{ font-size:var(--t-lead); color:var(--charcoal-mid); max-width:48ch; margin-bottom:1.8rem }
.hero__cred{
  margin-top:1.15rem; padding-top:.85rem; border-top:2px solid var(--citron);
  font-size:.86rem; color:var(--charcoal-soft); max-width:44ch;
}
/* pale-sky block set behind the collage — the hero's colour-blocking move */
.hero__figure{ position:relative; margin:0 }
@media (min-width:900px){
  .hero__figure::before{
    content:""; position:absolute; z-index:0;
    left:-1.6rem; bottom:-1.6rem; width:72%; height:42%; background:var(--stone);
  }
}
/* Option B — the broadcast still takes 2.35 parts to the cover's 1, so it is both
   wider and taller. Their heights cannot match while the cover stays square and the
   still keeps its 1.891 crop, so the row is bottom-aligned: the outer silhouette of
   the collage stays clean and the difference falls as spacing under the Inc. tile. */
.collage{
  position:relative; z-index:1; display:grid;
  grid-template-columns:1.891fr 1fr; gap:.6rem .5rem; align-items:stretch;
}
.collage__tile{ min-height:0; box-shadow:0 2px 4px rgba(29,31,30,.06), 0 14px 28px -18px rgba(29,31,30,.28) }
.collage__lead{ grid-column:1 / -1; aspect-ratio:4/3 }
.collage__still{ aspect-ratio:3954/2142 }
.collage__art{ aspect-ratio:1/1 }
/* 5b. LOGO STRIP — two staggered rows, varied scale ------------------------ */
.media__head{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
  gap:clamp(1.5rem,4vw,3.5rem); align-items:end; margin-bottom:clamp(1.75rem,3vw,2.5rem);
}
.media__head h2{ font-size:clamp(1.45rem,2.3vw,2.05rem); max-width:26ch }
/* understated support for the logos — no italic, no quotation marks */
.media__note{
  font-family:var(--sans); font-size:.92rem; color:var(--charcoal-mid);
  max-width:30ch; padding-bottom:.35rem;
}
.logos{ display:flex; flex-direction:column; gap:clamp(1.5rem,3vw,2.5rem) }
.logo-row{ display:flex; align-items:center; flex-wrap:wrap; gap:clamp(1.5rem,4.5vw,4rem) }
.logo-row--offset{ padding-left:7% }
.logo-row img{ width:clamp(84px,9.5vw,126px); opacity:.5; filter:grayscale(1); transition:opacity .3s ease }
.logo-row img:nth-child(2n){ width:clamp(74px,8.4vw,110px) }
.logo-row img:nth-child(3n){ width:clamp(94px,10.6vw,140px) }
.logo-row img:hover{ opacity:.85 }
/* 5c. INTRO — the full-width statement band -------------------------------- */
.intro__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.75rem,5vw,5rem); align-items:center;
}
.intro h2{ font-size:clamp(1.8rem,3.4vw,2.65rem); max-width:20ch }
.intro p:not(.accent){ color:var(--charcoal-mid) }
.intro__body p + p{ margin-top:1.2rem }
.intro__accent{ margin-top:1.3rem; display:block; max-width:22ch }
/* 5d. SHARED HEADS -------------------------------------------------------- */
.head{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(1.25rem,4vw,4rem); align-items:end; margin-bottom:clamp(1.85rem,3.4vw,2.85rem);
}
.head h2{ max-width:22ch }
.head__aside{ font-size:1.02rem; color:var(--charcoal-mid); max-width:36ch; padding-bottom:.3rem }
.head__aside.accent{ font-size:clamp(1.15rem,1.75vw,1.45rem); color:var(--charcoal) }
.band-dark .head__aside{ color:var(--on-dark-soft) }
/* 5e. LEADERSHIP — an editorial text block, no portraits ------------------ */
.leadership{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(1.75rem,4vw,4rem) clamp(2rem,5vw,4.5rem); align-items:start;
}
.leadership__intro h2{ max-width:17ch }
.leadership__intro p{ color:var(--charcoal-mid); max-width:52ch; margin-top:1.15rem }
.leadership__intro .btn{ margin-top:1.6rem }
/* the two principals, set as named entries rather than cards */
.principals{ align-self:center }
.principals__line{ margin-bottom:1.4rem; max-width:16ch }
.principals__list{ display:grid; gap:1.35rem }
.principal{ padding-left:1.15rem; border-left:3px solid var(--citron) }
.principal h3{
  font-size:clamp(1.25rem,1.75vw,1.55rem); line-height:1.2; margin-bottom:.3rem;
}
.principal p{
  font-family:var(--sans); font-size:.7rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--charcoal-soft);
  line-height:1.7;
}
/* the wider bench, running the full width beneath both columns */
.bench{
  grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:.7rem 1.6rem;
  padding-top:1.2rem; border-top:1px solid var(--line-stone);
  font-family:var(--sans); font-size:.66rem; font-weight:600;
  letter-spacing:.17em; text-transform:uppercase; color:var(--charcoal-soft);
}
.bench li{ display:flex; align-items:center; gap:.6rem }
.bench li::before{ content:""; width:6px; height:6px; background:var(--citron); flex:none }
/* 5f. CTA ----------------------------------------------------------------- */
.cta h2{ font-size:clamp(1.95rem,4vw,3.1rem); max-width:22ch; margin-bottom:1.1rem }
.cta__lead{ font-size:var(--t-lead); color:var(--on-dark-soft); max-width:46ch }
.cta__lead + .cta__lead{ margin-top:1.05rem }
.cta .btn-row{ margin-top:1.7rem }
.cta__fine{ margin-top:1.35rem; font-size:.85rem; color:rgba(244,242,237,.6); max-width:52ch }
/* 6. MOTION + RESPONSIVE -------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(16px) }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
  transition-delay:var(--d,0s);
}
/* --- tablet ------------------------------------------------------------ */
@media (max-width:1080px){
  .rail{ grid-template-columns:1fr; gap:.5rem }
  .footer-grid{ grid-template-columns:1.3fr 1fr 1fr }
  .footer-col:first-child{ grid-column:1 / -1 }
}
/* --- nav collapses; single-column stacks -------------------------------- */
@media (max-width:900px){
  .nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--ivory); border-block:1px solid var(--line);
    padding:.5rem var(--gutter) 1.5rem;
  }
  .nav.is-open{ display:flex }
  .nav__link{ padding:1rem 0; border-bottom:1px solid var(--line); min-height:44px; display:flex; align-items:center }
  .nav__link::after{ display:none }
  .nav .btn{ margin-top:1.35rem; justify-content:center }
  .nav-toggle{ display:inline-block; min-height:44px }

  .hero__grid,.intro__grid,.head,.leadership,.media__head{ grid-template-columns:1fr }
  .head{ gap:1.25rem }
  .hero__grid{ gap:2.25rem }
  .services,.results,.pillars{ grid-template-columns:1fr }
  .quotes{ grid-template-columns:1fr; grid-template-rows:auto }
  .quote--featured,.quote--sm{ grid-column:1; grid-row:auto }

  /* full-width cards would otherwise carry enormous 4:3 images. Cropping to 3:2
     from the top keeps every masthead and headline and loses only photograph. */
  .result__media{ aspect-ratio:3/2 }
  .result > *:not(.result__media){ padding-inline:1.25rem }
  .service{ padding:1.6rem 1.35rem 1.5rem }

  /* the two staggered rows flatten into one even grid */
  .logos{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem 1.1rem; align-items:center }
  .logo-row{ display:contents }
  .logo-row--offset{ padding-left:0 }
  .logo-row img,
  .logo-row img:nth-child(2n),
  .logo-row img:nth-child(3n){ width:100%; max-width:118px; margin-inline:auto }

  .arrow{ min-height:44px; align-items:center }
}
/* --- phone -------------------------------------------------------------- */
@media (max-width:620px){
  .footer-grid{ grid-template-columns:1fr }
  .footer-col:first-child{ grid-column:auto }
  .logos{ grid-template-columns:repeat(2,1fr); gap:1.4rem 1rem }
  .quote--featured{ padding:1.6rem 1.35rem }
  .collage{ gap:.5rem }
}
@media (max-width:520px){
  .btn{ width:100%; justify-content:center }
  .btn-row{ display:grid; grid-template-columns:1fr }
  .brand__mark{ letter-spacing:.14em }
  .hero h1{ max-width:none }
  .result__media{ aspect-ratio:4/3 }
  .logo-row img,
  .logo-row img:nth-child(2n),
  .logo-row img:nth-child(3n){ max-width:104px }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .mark path{ stroke-dashoffset:0 }
  .reveal{ opacity:1; transform:none }
  .service:hover,.result:hover,.btn:hover{ transform:none }
  .eyebrow::before{ transform:scaleX(1) }
}