/* Shared styles for the firm-direction mockups (every page except the old-style /demo). */
/* ---------- tokens ---------- */
:root {
  --paper:    #F5F3EA;
  --paper-2:  #ECE9DC;
  --ink:      #1B1A16;
  --ink-2:    #5A574E;
  --rule:     #D6D2C2;
  --forest:   #1F3327;
  --forest-2: #2B4535;
  --brown:    #784F24;   /* carried over from the current brand */
  --card:     #FBFAF5;
  --on-dark:  #F5F3EA;
  --on-dark-2: rgba(245, 243, 234, 0.68);
  --rule-dark: rgba(245, 243, 234, 0.18);

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --wrap:   1240px;
  --gutter: clamp(20px, 4vw, 48px);
  --header-h: 68px;
  --section: clamp(72px, 9vw, 136px);
}

/* Colour direction B, "slate". Add ?theme=slate to the URL to see it.
   Only the colour tokens change; fonts, layout and spacing are shared. */
:root[data-theme="slate"] {
  --paper:    #F4F5F4;
  --paper-2:  #E8EBEA;
  --ink:      #12161B;
  --ink-2:    #565D64;
  --rule:     #D2D6D7;
  --forest:   #16212C;
  --forest-2: #223345;
  --on-dark:  #F4F5F4;
  --on-dark-2: rgba(244, 245, 244, 0.68);
  --rule-dark: rgba(244, 245, 244, 0.18);
  --card:     #FBFCFB;
}
:root[data-theme="slate"] .header { background: rgba(244, 245, 244, 0.94); }

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { list-style: none; padding: 0; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--brown); outline-offset: 3px; }

/* ---------- shared pieces ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section--alt { background: var(--paper-2); }

.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 4.3vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.h2 em, .hero__title em { font-style: italic; font-weight: 300; }
.lead {
  font-family: var(--serif);
  font-size: clamp(21px, 2.1vw, 28px);
  line-height: 1.32;
  letter-spacing: -0.005em;
}
.body { color: var(--ink-2); max-width: 58ch; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding-inline: 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.btn svg { width: 11px; height: 11px; transition: transform .2s; }
.btn:hover svg { transform: translate(2px, -2px); }
.btn--ink   { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: var(--forest); }
.btn--light { background: var(--paper); color: var(--ink); }
.btn--light:hover { background: #fff; }
.btn--ghost { border-color: rgba(245,243,234,.55); color: var(--on-dark); }
.btn--ghost:hover { background: rgba(245,243,234,.12); }

.link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600;
  padding-bottom: 3px; border-bottom: 1px solid currentColor;
}
.link svg { width: 10px; height: 10px; transition: transform .2s; }
.link:hover svg { transform: translate(2px, -2px); }

/* ---------- header ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  background: rgba(245, 243, 234, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { display: inline-flex; align-items: center; gap: 11px; }
.logo img { height: 30px; width: auto; }
.logo span { font-size: 13px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; }
.nav { display: flex; gap: clamp(18px, 2.6vw, 38px); }
.nav a {
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-2); transition: color .2s;
}
.nav a:hover { color: var(--ink); }
.header .btn { height: 40px; padding-inline: 18px; font-size: 13px; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: min(calc(100svh - var(--header-h)), 860px);
  display: flex; align-items: flex-end;
  color: var(--on-dark);
  background: var(--forest);
  overflow: hidden;
}
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(16,24,18,.78) 0%, rgba(16,24,18,.42) 48%, rgba(16,24,18,.12) 100%),
    linear-gradient(0deg, rgba(16,24,18,.72) 0%, rgba(16,24,18,0) 46%);
}
.hero__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end;
  gap: 40px;
  padding-block: clamp(120px, 16vw, 200px) clamp(40px, 5vw, 68px);
}
.hero .eyebrow { color: var(--on-dark-2); }
.hero__title {
  margin-top: 22px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(46px, 7.4vw, 106px);
  line-height: 0.98;
  letter-spacing: -0.018em;
  max-width: 11.5em;
}
.hero__sub { margin-top: 28px; max-width: 46ch; font-size: clamp(16px, 1.3vw, 18px); color: rgba(245,243,234,.86); }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- facts strip ---------- */
.facts { border-bottom: 1px solid var(--rule); }
.facts__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.fact { padding: 30px 32px 30px 0; display: flex; flex-direction: column; gap: 8px; }
.fact + .fact { padding-left: 32px; border-left: 1px solid var(--rule); }
.fact__num { font-family: var(--serif); font-size: clamp(28px, 2.8vw, 38px); line-height: 1; white-space: nowrap; }
.fact__label { font-size: 14px; color: var(--ink-2); line-height: 1.4; }

/* ---------- thesis ---------- */
.thesis__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); }
.thesis .h2 { margin-top: 18px; }
.thesis .body { margin-top: 24px; }
.thesis__note {
  margin-top: 40px; padding: 4px 0 4px 24px;
  border-left: 2px solid var(--brown);
  max-width: 54ch;
}
.thesis__note p:not(.eyebrow) { margin-top: 10px; font-family: var(--serif); font-size: 20px; line-height: 1.4; }

/* ---------- "you do one thing" band ---------- */
/* One action on the left, the list on the right ticking itself off. Pure CSS:
   every animated part shares one 9s loop and is offset with --t. Used on the
   home page and, with different words, on the outreach page. */
.one { background: var(--forest); color: var(--on-dark); }
.one .eyebrow { color: var(--on-dark-2); }
.one__grid { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(40px, 7vw, 112px); align-items: center; }
.one .h2 { margin-top: 18px; font-size: clamp(36px, 5vw, 72px); }
.one__action { margin-top: clamp(36px, 4vw, 56px); display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.one__btn {
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  height: 64px; padding-inline: 30px; border-radius: 999px;
  border: 1px solid rgba(245, 243, 234, .6);
  font-size: 18px; font-weight: 600;
  animation: one-btn 9s infinite backwards;
}
.one__btn::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid var(--on-dark); opacity: 0; animation: one-ring 9s infinite backwards; }
.one__btn svg { width: 18px; height: 18px; }
.one__hint { font-size: 14px; color: var(--on-dark-2); }
.one__list { margin-top: 18px; border-top: 1px solid var(--rule-dark); }
.one__item { display: flex; align-items: center; gap: 18px; padding: 17px 0; border-bottom: 1px solid var(--rule-dark); font-family: var(--serif); font-size: clamp(19px, 1.9vw, 24px); line-height: 1.2; opacity: .32; animation: one-item 9s var(--t) infinite backwards; }
.one__tick { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(245, 243, 234, .5); display: grid; place-items: center; color: var(--forest); animation: one-tick 9s var(--t) infinite backwards; }
.one__tick svg { width: 12px; height: 12px; }
.one__sum { margin-top: 20px; font-size: 14px; color: var(--on-dark-2); }

@keyframes one-btn  { 0%, 6% { background: transparent; color: var(--on-dark); transform: none; } 8% { transform: scale(.95); } 10%, 84% { background: var(--on-dark); color: var(--forest); transform: none; } 92%, 100% { background: transparent; color: var(--on-dark); } }
@keyframes one-ring { 0%, 8% { opacity: 0; transform: none; } 9% { opacity: .7; transform: none; } 22%, 100% { opacity: 0; transform: scale(1.18, 1.5); } }
@keyframes one-item { 0%, 1% { opacity: .32; } 5%, 84% { opacity: 1; } 92%, 100% { opacity: .32; } }
@keyframes one-tick { 0%, 1% { background: transparent; border-color: rgba(245, 243, 234, .5); color: transparent; } 5%, 84% { background: var(--on-dark); border-color: var(--on-dark); color: var(--forest); } 92%, 100% { background: transparent; border-color: rgba(245, 243, 234, .5); color: transparent; } }
@media (prefers-reduced-motion: reduce) {
  .one__btn, .one__btn::after, .one__item, .one__tick { animation: none; }
  .one__btn { background: var(--on-dark); color: var(--forest); }
  .one__item { opacity: 1; }
  .one__tick { background: var(--on-dark); border-color: var(--on-dark); }
}

/* ---------- work ---------- */
.head-row { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: clamp(32px, 4vw, 56px); }
.head-row .h2 { margin-top: 18px; }
.head-row__aside { max-width: 38ch; color: var(--ink-2); padding-bottom: 6px; }

.work__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.case {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 380px;
  padding: clamp(24px, 2.6vw, 36px);
  background: var(--forest);
  color: var(--on-dark);
  border-radius: 4px;
  transition: background-color .25s, transform .25s;
}
.case:hover { background: var(--forest-2); transform: translateY(-3px); }
.case__top { display: flex; justify-content: space-between; gap: 16px; }
.case .eyebrow { color: var(--on-dark-2); }
.case__figure {
  margin-top: auto; padding-top: 48px;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(48px, 5.6vw, 82px); line-height: 1; letter-spacing: -0.02em;
  white-space: nowrap;
}
.case__figure-label { margin-top: 10px; font-size: 14px; color: var(--on-dark-2); }
.case__foot {
  margin-top: 28px; padding-top: 20px;
  border-top: 1px solid var(--rule-dark);
  display: flex; align-items: end; justify-content: space-between; gap: 20px;
}
.case__title { font-family: var(--serif); font-size: clamp(20px, 1.8vw, 24px); line-height: 1.2; }
.case__trade { margin-top: 4px; font-size: 13px; color: var(--on-dark-2); }
.case__arrow {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--rule-dark);
  display: grid; place-items: center;
  transition: background-color .2s, color .2s;
}
.case__arrow svg { width: 11px; height: 11px; }
.case:hover .case__arrow { background: var(--paper); color: var(--ink); }

/* ---------- approach ---------- */
/* Three joined panels sharing borders, so the section reads as one process
   rather than three loose columns. */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--rule); border-radius: 4px; background: var(--card); overflow: hidden; }
.step { display: flex; flex-direction: column; min-height: 360px; padding: clamp(24px, 2.6vw, 36px); }
.step + .step { border-left: 1px solid var(--rule); }
.step__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.step__tag { font-size: 12px; font-weight: 600; padding: 5px 12px; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink-2); white-space: nowrap; }
.step__num { margin-top: auto; padding-top: 40px; font-family: var(--serif); font-weight: 300; font-size: clamp(64px, 7vw, 104px); line-height: .9; letter-spacing: -0.03em; color: var(--forest); }
.step__title { margin-top: 20px; font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.15; }
.step p:not(.eyebrow) { margin-top: 10px; color: var(--ink-2); max-width: 36ch; }

/* ---------- practice areas ---------- */
/* Photo on the left follows whichever row is hovered or focused. */
.areas__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.areas__media { position: sticky; top: calc(var(--header-h) + 32px); aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; background: var(--forest); }
.areas__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .6s ease, transform 1.2s ease; }
.areas__media img.is-active { opacity: 1; transform: none; }
.areas__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(16,24,18,.55) 0%, rgba(16,24,18,0) 40%); }
.areas__count { position: absolute; left: 24px; bottom: 20px; z-index: 1; color: var(--on-dark); }
.areas__body .h2 { margin-top: 18px; }
.areas__list { margin-top: clamp(32px, 4vw, 56px); border-top: 1px solid var(--rule); }
.area {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) 24px;
  align-items: start; column-gap: 20px; row-gap: 8px;
  padding: 26px 0;
  border-bottom: 1px solid var(--rule);
}
.area .eyebrow { padding-top: 12px; }
.area__name { font-family: var(--serif); font-size: clamp(24px, 2.6vw, 36px); line-height: 1.1; transition: color .25s; }
.area__desc { grid-column: 2 / 3; color: var(--ink-2); font-size: 15px; max-width: 48ch; }
.area__sub { grid-column: 2 / 3; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.area svg { width: 13px; height: 13px; margin-top: 14px; justify-self: end; transition: transform .2s; }
.area:hover svg { transform: translate(2px, -2px); }
@media (min-width: 961px) and (hover: hover) {
  .js .area:not(.is-active) .area__name { color: #9A968A; }
}

/* ---------- before you hire ---------- */
.hire { background: var(--forest); color: var(--on-dark); }
.hire .eyebrow { color: var(--on-dark-2); }
.hire__head { max-width: 780px; }
.hire__head .h2 { margin-top: 18px; }
.hire__head p { margin-top: 22px; color: var(--on-dark-2); max-width: 56ch; }
.compare { margin-top: clamp(40px, 5vw, 72px); border-top: 1px solid var(--rule-dark); }
.compare__row {
  display: grid; grid-template-columns: 3fr 4fr 4fr; gap: 24px;
  padding: 22px 0; border-bottom: 1px solid var(--rule-dark);
  align-items: baseline;
}
.compare__row--head { padding: 16px 0; }
.compare__k { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-2); }
.compare__a { color: var(--on-dark-2); }
.compare__b { font-family: var(--serif); font-size: clamp(19px, 1.7vw, 23px); line-height: 1.3; }
.hire__foot { margin-top: 32px; display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; font-size: 14px; color: var(--on-dark-2); }

/* ---------- principal ---------- */
.principal__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.principal__photo { aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; background: var(--paper-2); }
.principal__photo img { width: 100%; height: 100%; object-fit: cover; }
.principal .h2 { margin-top: 18px; }
.principal .body { margin-top: 22px; }
.quote { margin-top: 36px; padding-left: 24px; border-left: 2px solid var(--brown); }
.quote p { font-family: var(--serif); font-size: clamp(20px, 1.9vw, 25px); line-height: 1.36; }
.quote footer { margin-top: 14px; font-size: 13px; color: var(--ink-2); }
.tools { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--rule); }
.tools ul { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 14px; color: var(--ink-2); }
.principal .link { margin-top: 32px; }

/* ---------- cta ---------- */
.cta__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; }
.cta .h2 { margin-top: 18px; font-size: clamp(36px, 5.2vw, 76px); }
.cta__copy { margin-top: 22px; max-width: 54ch; color: var(--ink-2); }
.cta__side { text-align: right; }
.cta__tel { display: block; margin-top: 14px; font-size: 14px; color: var(--ink-2); }
.cta__tel a { border-bottom: 1px solid var(--rule); }
.cta__guarantee { margin-top: clamp(40px, 5vw, 64px); padding-top: 22px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--ink-2); }
.cta__guarantee strong { color: var(--ink); font-weight: 600; }

/* ---------- footer ---------- */
.footer { background: var(--ink); color: var(--on-dark); padding-block: 56px 32px; }
.footer__top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.footer .logo img { filter: brightness(0) invert(1); opacity: .92; }
.footer__tag { margin-top: 14px; font-size: 14px; color: var(--on-dark-2); max-width: 30ch; }
.footer__cols { display: flex; gap: clamp(32px, 6vw, 96px); flex-wrap: wrap; }
.footer__col a { display: block; font-size: 14px; color: var(--on-dark-2); padding: 3px 0; transition: color .2s; }
.footer__col a:hover { color: var(--on-dark); }
.footer__col .eyebrow { color: var(--on-dark-2); opacity: .7; margin-bottom: 10px; }
.footer__bottom {
  margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--rule-dark);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-size: 12px; color: var(--on-dark-2);
}
.footer__bottom a + a { margin-left: 20px; }

/* ---------- reveal (only when JS is running, so nothing can stay hidden) ---------- */
.js [data-r] { opacity: 0; transform: translateY(18px); transition: opacity .8s cubic-bezier(.2,.6,.2,1), transform .8s cubic-bezier(.2,.6,.2,1); transition-delay: var(--d, 0s); }
.js [data-r].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-r] { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .nav { display: none; }
  .hero__inner { grid-template-columns: 1fr; gap: 32px; }
  .thesis__grid, .principal__grid { grid-template-columns: 1fr; }
  .principal__photo { max-width: 420px; }
  .head-row { flex-direction: column; align-items: flex-start; }
  /* Stages, stacked: a compact row each. Small number on the left, then the
     title, the sentence and the tag. The "Stage one" label repeats what the
     number already says, so it is dropped here. */
  .steps { grid-template-columns: 1fr; }
  .step { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; min-height: 0; padding: 22px 20px; }
  .step + .step { border-left: 0; border-top: 1px solid var(--rule); }
  .step p.step__num { grid-column: 1; grid-row: 1 / span 3; margin: 0; padding: 2px 0 0; font-size: 28px; line-height: 1; letter-spacing: 0; }
  .step__title { grid-column: 2; grid-row: 1; margin-top: 0; font-size: 22px; }
  .step p:not(.eyebrow):not(.step__num) { grid-column: 2; grid-row: 2; margin-top: 6px; max-width: none; }
  .step__top { grid-column: 2; grid-row: 3; margin-top: 12px; justify-content: flex-start; }
  .step__top .eyebrow { display: none; }
  .areas__grid { grid-template-columns: 1fr; }
  .one__grid { grid-template-columns: 1fr; }
  .areas__media { position: relative; top: auto; aspect-ratio: 3 / 2; }
  .cta__grid { grid-template-columns: 1fr; }
  .cta__side { text-align: left; }
}
@media (max-width: 720px) {
  .logo span { font-size: 11px; letter-spacing: .12em; }
  .header .btn { padding-inline: 14px; }
  .facts__grid { grid-template-columns: 1fr; }
  .fact { padding: 18px 0; flex-direction: column; gap: 6px; }
  .fact + .fact { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); }
  /* Case study cards: one row you swipe sideways, instead of a tall stack.
     Each card is a little narrower than the screen so the next one peeks in,
     which is the cue that there is more. The row bleeds to the screen edges. */
  .work__grid {
    display: flex; gap: 12px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .work__grid::-webkit-scrollbar { display: none; }
  .case { flex: 0 0 86%; min-width: 0; min-height: 300px; scroll-snap-align: start; }
  .case__figure { font-size: 40px; padding-top: 36px; }   /* the longest figure must fit the narrower card */
  .case:hover { transform: none; }
  /* Cards off to the side must not wait for a scroll-reveal that swiping
     would trigger late. */
  .js .work__grid [data-r] { opacity: 1; transform: none; transition: none; }
  .compare__row { grid-template-columns: 1fr; gap: 6px; padding: 20px 0; }
  .compare__row--head { display: none; }
  .compare__a::before { content: "A hire: "; font-weight: 600; }
}

/* current page in the nav */
.nav a[aria-current="page"] { color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 2px; }

/* ---------- inner page hero (case studies, about, faq, contact) ---------- */
.p-hero { padding-block: clamp(56px, 8vw, 120px) 0; }
.p-hero__title { margin-top: 22px; font-family: var(--serif); font-weight: 400; font-size: clamp(46px, 7.4vw, 106px); line-height: .98; letter-spacing: -0.018em; }
.p-hero__title em { font-style: italic; font-weight: 300; }
.p-hero__sub { margin-top: 24px; max-width: 52ch; font-size: clamp(16px, 1.3vw, 18px); color: var(--ink-2); }
.p-body { padding-block: clamp(48px, 6vw, 88px) var(--section); }
.split-page { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.split-page__side { position: sticky; top: calc(var(--header-h) + 32px); }
.card-dark { padding: clamp(24px, 2.6vw, 32px); background: var(--forest); color: var(--on-dark); border-radius: 4px; }
.card-dark .eyebrow { color: var(--on-dark-2); }
.card-dark h2 { margin-top: 12px; font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; }
.card-dark p:not(.eyebrow) { margin-top: 12px; color: var(--on-dark-2); }
.card-dark .btn { margin-top: 22px; }
@media (max-width: 960px) {
  .split-page { grid-template-columns: 1fr; }
  .split-page__side { position: static; }
}

/* ---------- pinned-left study layout (case studies, practice area pages) ---------- */
.study { padding-block: var(--section); scroll-margin-top: var(--header-h); }
.study + .study { border-top: 1px solid var(--rule); }
.study__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.study__side { position: sticky; top: calc(var(--header-h) + 32px); }
.study__meta { display: flex; justify-content: space-between; gap: 16px; }
.study__title { margin-top: 18px; font-size: clamp(32px, 3.8vw, 52px); }
.study__results { margin-top: clamp(28px, 3vw, 40px); padding: clamp(24px, 2.6vw, 32px); background: var(--forest); color: var(--on-dark); border-radius: 4px; }
.study__results .eyebrow { color: var(--on-dark-2); }
.study__stat { padding: 18px 0; border-top: 1px solid var(--rule-dark); }
.study__stats { margin-top: 16px; }
.study__stat:last-child { padding-bottom: 0; }
.study__stat b { display: block; font-family: var(--serif); font-weight: 300; font-size: clamp(32px, 3.4vw, 46px); line-height: 1; letter-spacing: -0.015em; white-space: nowrap; }
.study__stat span { display: block; margin-top: 8px; font-size: 14px; color: var(--on-dark-2); }
.study__block { padding: 26px 0; border-top: 1px solid var(--rule); }
.study__block:first-child { border-top-color: var(--ink); }
.study__block p { margin-top: 12px; font-size: 17px; line-height: 1.65; max-width: 62ch; }
.study__block--out p { font-family: var(--serif); font-size: clamp(21px, 2vw, 26px); line-height: 1.36; }
.study__story .link { margin-top: 12px; }

.study__lede { margin-top: 14px; color: var(--ink-2); max-width: 40ch; }
.study__h { margin-top: 12px; font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; }
.study__block .study__h + p { margin-top: 14px; }
.study__block p + p { margin-top: 14px; }
.builds > div { padding: 18px 0; border-top: 1px solid var(--rule); }
.builds > div:first-child { border-top: 0; padding-top: 14px; }
.builds dt { font-family: var(--serif); font-size: clamp(20px, 1.9vw, 24px); line-height: 1.2; }
.builds dd { margin: 8px 0 0; color: var(--ink-2); max-width: 60ch; }
.works { padding-block: clamp(40px, 5vw, 64px); border-top: 1px solid var(--rule); }
.works .lead { margin-top: 0; }
@media (max-width: 960px) {
  .study__grid { grid-template-columns: 1fr; }
  .study__side { position: static; }
}

/* ---------- practice area pages: delivery band ---------- */
.deliver { padding-block: var(--section); border-top: 1px solid var(--rule); }
.deliver__grid { margin-top: clamp(32px, 4vw, 56px); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px); }
.deliver__item { padding-top: 22px; border-top: 1px solid var(--ink); }
.deliver__item h3 { margin-top: 24px; font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2.1vw, 28px); line-height: 1.15; }
.deliver__item p:not(.eyebrow) { margin-top: 10px; color: var(--ink-2); max-width: 36ch; }
.study__block--out .link { margin-top: 20px; }
@media (max-width: 960px) { .deliver__grid { grid-template-columns: 1fr; gap: 28px; } .deliver__item h3 { margin-top: 14px; } }

/* ---------- phone and tablet menu ---------- */
.menu { display: none; }
.menu summary { list-style: none; width: 44px; height: 44px; display: grid; place-content: center; gap: 6px; cursor: pointer; border: 1px solid var(--rule); border-radius: 50%; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary span { display: block; width: 18px; height: 1.5px; background: var(--ink); transition: transform .2s; }
.menu[open] summary span:first-child { transform: translateY(3.75px) rotate(45deg); }
.menu[open] summary span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
.menu__panel { position: absolute; left: 0; right: 0; top: var(--header-h); padding: 8px var(--gutter) 28px; background: var(--paper); border-bottom: 1px solid var(--rule); box-shadow: 0 24px 40px -24px rgba(27, 26, 22, .25); }
.menu__panel > a:not(.btn) { display: block; padding: 16px 0; border-bottom: 1px solid var(--rule); font-family: var(--serif); font-size: 26px; line-height: 1.1; }
.menu__panel > a[aria-current="page"] { font-style: italic; }
.menu__panel .btn { margin-top: 22px; width: 100%; justify-content: center; height: 52px; }
@media (max-width: 960px) {
  .menu { display: block; }
  .header:has(.menu) .header__inner > .btn { display: none; }
}
@media (max-width: 960px) and (min-width: 561px) {
  .header:has(.menu) .header__inner > .btn { display: inline-flex; margin-left: auto; }
}

/* heading spacing where the thesis grid is reused outside .thesis */
.firm .h2, .who .h2 { margin-top: 18px; }
.firm .quote { margin-top: 28px; }

.study__meta span:last-child, .case__top span:last-child { white-space: nowrap; flex: none; }

.hero__note { margin-top: 18px; max-width: 46ch; font-size: 14px; color: rgba(245,243,234,.78); }
.hero__note strong { color: var(--on-dark); font-weight: 600; }

/* the guarantee leads the facts strip and gets the widest column */
.facts__grid:has(.fact--lead) { grid-template-columns: 1.5fr 1fr 1fr; }
.fact--lead .fact__label { max-width: 46ch; }
.fact--lead .fact__num { color: var(--forest); }
@media (max-width: 720px) { .facts__grid:has(.fact--lead) { grid-template-columns: 1fr; } }
/* quote and link under the engagement stages */
.approach__after { margin-top: clamp(32px, 4vw, 56px); display: flex; align-items: end; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; }
.approach__after .quote { margin-top: 0; max-width: 34em; }

/* ---------- forms: honeypot, empty nudge, thank-you panel ---------- */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-empty-note { margin-top: 18px; padding: 12px 14px; border-left: 2px solid var(--brown); background: var(--paper-2); font-size: 14px; }
.form-status { padding: clamp(28px, 3vw, 44px); background: var(--forest); color: var(--on-dark); border-radius: 4px; }
.form-status h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.05; }
.form-status p { margin-top: 14px; color: var(--on-dark-2); max-width: 40ch; }
.form-status a { color: var(--on-dark); border-bottom: 1px solid var(--rule-dark); }

/* ---------- home page top bar ---------- */
.topbar { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 40px; padding: 8px var(--gutter); background: var(--forest); color: var(--on-dark); font-size: 13px; font-weight: 600; text-align: center; transition: background-color .2s; }
.topbar:hover { background: var(--forest-2); }
.topbar svg { flex: none; width: 11px; height: 11px; transition: transform .2s; }
.topbar:hover svg { transform: translateY(2px); }
:root:has(.topbar) .hero { min-height: min(calc(100svh - var(--header-h) - 40px), 860px); }
.hire { scroll-margin-top: var(--header-h); }

/* ---------- phone action bar (js/sticky-cta.js) ---------- */
.cta-bar { display: none; }
@media (max-width: 720px) {
  .cta-bar {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(245, 243, 234, 0.96);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--rule);
    transform: translateY(100%); visibility: hidden;
    transition: transform .28s ease, visibility 0s linear .28s;
  }
  .cta-bar.is-shown { transform: none; visibility: visible; transition: transform .28s ease, visibility 0s; }
  .cta-bar .btn { width: 100%; justify-content: center; height: 48px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .cta-bar, .cta-bar.is-shown { transition: none; } }

/* ---------- phones: tighter rhythm, slimmer header ---------- */
/* The desktop gaps between sections were being used unchanged on phones,
   where they added up to more than a full screen of empty space on the home
   page. Everything that reads --section or --header-h follows automatically:
   section padding, the hero height, sticky offsets, the menu panel. */
@media (max-width: 720px) {
  :root { --section: 52px; --header-h: 58px; }
  .logo img { height: 26px; }
  .menu summary { width: 42px; height: 42px; }
  .p-hero { padding-top: 40px; }
  .p-body { padding-top: 36px; }
  .head-row { margin-bottom: 28px; }
  .footer { padding-block: 40px 28px; }
  .footer__bottom { margin-top: 32px; }
}

/* ---------- phones: practice areas on the home page as a short list ---------- */
/* All three areas visible at once: number, name, the small line of what is
   inside, and an arrow. No photo and no summary sentence here; both stay on
   desktop, and the detail is one tap away on the practice areas page. */
@media (max-width: 720px) {
  .areas__media { display: none; }
  .areas__list { margin-top: 24px; }
  .area { grid-template-columns: 28px minmax(0, 1fr) 20px; column-gap: 12px; row-gap: 6px; padding: 18px 0; }
  .area .eyebrow { padding-top: 7px; }
  .area__name { font-size: 23px; }
  .area__desc { display: none; }
  .area svg { margin-top: 9px; }
  .js .area:not(.is-active) .area__name { color: inherit; }
}

/* ---------- phones: compact footer ---------- */
/* The links sit in wrapping rows instead of one tall column each, and the
   column labels are dropped. Roughly half the previous height. */
@media (max-width: 720px) {
  .footer { padding-block: 32px 22px; }
  .footer__top { flex-direction: column; gap: 18px; }
  .footer .logo img { height: 24px; }
  .footer__tag { margin-top: 10px; font-size: 13px; max-width: none; }
  .footer__cols { display: block; }
  .footer__col { display: flex; flex-wrap: wrap; gap: 0 20px; }
  .footer__col + .footer__col { margin-top: 2px; }
  .footer__col .eyebrow { display: none; }
  .footer__col a { padding: 8px 0; }
  .footer__bottom { margin-top: 16px; padding-top: 14px; gap: 6px 20px; }
}
}