/* ============================================================
   PKS Legal — Hero
   Palette: ink / ivory / brass / stone
   Type: Instrument Serif (display) · Inter (UI)
   ============================================================ */

:root{
  /* Colour — PKS India Legal LLP brand: warm ivory, gold, coffee brown.
     The hero stays dark for legibility over the film, but the dark is now
     espresso rather than navy, so the red-brick footage sits in the same
     family as the type instead of fighting it. */
  --ink:        #1B130B;   /* espresso — hero ground */
  --ink-raise:  #2A1E12;
  --umber:      #4A3620;   /* the deck's coffee brown */
  --ivory:      #F7F1E4;
  --champagne:  #EADFC6;
  --brass:      #C9A03A;   /* brand gold */
  --brass-lift: #E0BC63;   /* lifted gold, for accents on dark */
  --stone:      #9A8A73;   /* warm grey */

  --ivory-72: rgba(247,241,228,.72);
  --ivory-58: rgba(247,241,228,.58);
  --ivory-42: rgba(247,241,228,.42);
  --ivory-16: rgba(247,241,228,.16);
  --ivory-10: rgba(247,241,228,.10);

  /* Type */
  --display: "Instrument Serif", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Rhythm */
  --gutter: clamp(1.5rem, 5.2vw, 5.5rem);
  --masthead-h: clamp(4.75rem, 8vh, 6.5rem);

  --ease: cubic-bezier(.22,.61,.24,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);

  /* Paper section — contrast ratios measured against --paper */
  --paper:       #F7F1E4;
  --brown-deep:  #2E2013;   /* headings   — 14.9:1 */
  --brown-body:  #5A4630;   /* body       —  8.0:1 */
  --gold-ink:    #7E6414;   /* small caps —  5.0:1 */
  --gold-accent: #9A7A1E;   /* display    —  3.6:1, large text only */
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,p,ul,li,figure{margin:0}
ul{padding:0;list-style:none}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg{display:block}

body{
  background:var(--ink);
  color:var(--ivory);
  font-family:var(--ui);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* ---------- Focus & skip ---------- */
:focus-visible{
  outline:2px solid var(--brass-lift);
  outline-offset:4px;
  border-radius:1px;
}
.skip-link{
  position:fixed;top:.75rem;left:.75rem;z-index:100;
  transform:translateY(-200%);
  background:var(--ivory);color:var(--ink);
  padding:.7rem 1.1rem;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
}
.skip-link:focus{transform:none}

/* ============================================================
   MASTHEAD
   ============================================================ */
.masthead{
  position:fixed;inset:0 0 auto;z-index:40;
  height:var(--masthead-h);
  transition:background-color .5s var(--ease-soft), backdrop-filter .5s var(--ease-soft);
}
/* Cinematic top scrim so the navigation stays legible over the photograph,
   whatever the crop. Retires once the solid stuck bar takes over. */
.masthead::before{
  content:"";position:absolute;inset:0 0 auto;height:220%;z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(27,19,11,.80) 0%,rgba(27,19,11,.44) 44%,rgba(27,19,11,0) 100%);
  transition:opacity .5s var(--ease-soft);
}
.masthead.is-stuck::before{opacity:0}

.masthead::after{
  content:"";position:absolute;left:var(--gutter);right:var(--gutter);bottom:0;height:1px;
  background:var(--ivory-10);
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.4s var(--ease) .55s;
}
.is-ready .masthead::after{transform:scaleX(1)}

.masthead.is-stuck{
  background:rgba(27,19,11,.86);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
}

.masthead__inner{
  height:100%;
  padding:0 var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
}

/* Wordmark */
.wordmark{
  display:flex;align-items:baseline;gap:.7rem;
  opacity:0;transform:translateY(-8px);
  transition:opacity .9s var(--ease) .1s, transform .9s var(--ease) .1s;
}
.is-ready .wordmark{opacity:1;transform:none}
/* Letterspaced serif caps, matching the identity lock-up on the brand sheet */
.wordmark__name{
  font-family:var(--display);
  font-size:clamp(1.05rem,1.25vw,1.25rem);
  text-transform:uppercase;
  letter-spacing:.18em;
  line-height:1;
  white-space:nowrap;
}
.wordmark__name em{
  font-style:normal;
  color:var(--brass-lift);
}
.wordmark__sub{
  font-size:.5625rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--stone);
  padding-left:.7rem;
  border-left:1px solid var(--ivory-16);
  line-height:1;
}

/* Nav */
.nav{display:flex;align-items:center;gap:clamp(1.75rem,3.4vw,3.25rem)}
.nav__list{
  display:flex;align-items:center;gap:clamp(1.5rem,2.5vw,2.5rem);
}
.nav__list a{
  position:relative;display:inline-block;
  font-size:.8125rem;font-weight:400;letter-spacing:.02em;
  color:var(--ivory-72);
  padding-block:.4rem;
  transition:color .4s var(--ease-soft);
}
.nav__list a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--brass-lift);
  transform:scaleX(0);transform-origin:right;
  transition:transform .55s var(--ease);
}
.nav__list a:hover{color:var(--ivory)}
.nav__list a:hover::after{transform:scaleX(1);transform-origin:left}

.nav__cta{
  display:inline-flex;align-items:center;gap:.7rem;
  font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  color:var(--ivory);
  padding:.9rem 0 .85rem;
  position:relative;
}
.nav__cta::after{
  content:"";position:absolute;left:0;right:0;bottom:.55rem;height:1px;
  background:var(--ivory-16);
}
.nav__cta::before{
  content:"";position:absolute;left:0;right:0;bottom:.55rem;height:1px;
  background:var(--brass-lift);z-index:1;
  transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease);
}
.nav__cta:hover::before{transform:scaleX(1)}

.nav__list li,.nav__cta{
  opacity:0;transform:translateY(-8px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.is-ready .nav__list li{opacity:1;transform:none}
.is-ready .nav__list li:nth-child(1){transition-delay:.16s}
.is-ready .nav__list li:nth-child(2){transition-delay:.22s}
.is-ready .nav__list li:nth-child(3){transition-delay:.28s}
.is-ready .nav__list li:nth-child(4){transition-delay:.34s}
.is-ready .nav__list li:nth-child(5){transition-delay:.40s}
.is-ready .nav__cta{opacity:1;transform:none;transition-delay:.46s}

.arrow{width:22px;height:8px;overflow:visible;flex:none}
.arrow path{
  fill:none;stroke:currentColor;stroke-width:1;
  stroke-linecap:square;vector-effect:non-scaling-stroke;
}

/* Menu toggle (mobile) */
.menu-toggle{
  display:none;align-items:center;gap:.7rem;
  padding:.5rem 0;
  font-size:.625rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ivory-72);
}
.menu-toggle__bars{display:block;width:22px}
.menu-toggle__bars i{
  display:block;height:1px;background:currentColor;
  transition:transform .45s var(--ease),opacity .3s var(--ease-soft);
}
.menu-toggle__bars i:first-child{margin-bottom:5px}
.is-open .menu-toggle__bars i:first-child{transform:translateY(3px) rotate(45deg)}
.is-open .menu-toggle__bars i:last-child{transform:translateY(-3px) rotate(-45deg)}

/* ============================================================
   DRAWER
   ============================================================ */
.drawer{
  position:fixed;inset:0;z-index:35;
  background:var(--ink);
  padding:calc(var(--masthead-h) + 2.5rem) var(--gutter) calc(2.5rem + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;justify-content:center;gap:2.75rem;
  opacity:0;visibility:hidden;
  /* visibility flips instantly on open (so focus can land) and only after the
     fade on close */
  transition:opacity .55s var(--ease-soft),visibility 0s linear .55s;
}
.is-open .drawer{
  opacity:1;visibility:visible;
  transition:opacity .55s var(--ease-soft),visibility 0s linear 0s;
}

.drawer__nav li+li{margin-top:.15rem}
.drawer__nav a{
  display:block;
  font-family:var(--display);
  font-size:clamp(1.9rem,8.5vw,2.6rem);
  line-height:1.45;
  letter-spacing:-.01em;
  color:var(--ivory-72);
  opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--ease),transform .6s var(--ease),color .3s;
}
.is-open .drawer__nav a{opacity:1;transform:none}
.is-open .drawer__nav li:nth-child(1) a{transition-delay:.10s}
.is-open .drawer__nav li:nth-child(2) a{transition-delay:.16s}
.is-open .drawer__nav li:nth-child(3) a{transition-delay:.22s}
.is-open .drawer__nav li:nth-child(4) a{transition-delay:.28s}
.is-open .drawer__nav li:nth-child(5) a{transition-delay:.34s}
.drawer__nav a:hover,.drawer__nav a:focus-visible{color:var(--ivory)}

.drawer__cta{
  align-self:flex-start;opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--ease) .42s,transform .6s var(--ease) .42s,background-color .45s var(--ease-soft);
}
.is-open .drawer__cta{opacity:1;transform:none}
.drawer__meta{
  font-size:.625rem;letter-spacing:.26em;text-transform:uppercase;color:var(--stone);
  padding-top:1.75rem;border-top:1px solid var(--ivory-10);
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,46vw);
}

/* --- Media --- */
.hero__media{
  position:relative;
  grid-column:2;
  overflow:hidden;
  background:#1E1509;
}
.hero__media::before{
  content:"";position:absolute;z-index:3;left:0;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,transparent,rgba(224,188,99,.55) 32%,rgba(224,188,99,.25) 70%,transparent);
}
/* Absolutely positioned so the portrait source cannot dictate the grid row
   height — the hero stays locked to the viewport. */
.hero__img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:50% 42%;
  /* No CSS filter: the duotone grade is baked into the asset, so the browser
     never pays to re-filter a full-height image every paint. */
  transform:scale(1.075);
  opacity:0;
  transition:opacity 1.5s var(--ease-soft),transform 2.4s var(--ease);
  will-change:transform;
}
.is-ready .hero__img{
  opacity:1;
  transform:scale(1) translate3d(var(--px,0px),var(--py,0px),0);
}

/* --- Motion layer --- */
/* Fades in over the still only once the video is actually playing, so a stalled
   or blocked load simply leaves the poster frame in place. */
.hero__video{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;
  object-fit:cover;object-position:50% 42%;
  opacity:0;
  transition:opacity 1.6s var(--ease-soft);
  pointer-events:none;
}
.hero__video.is-playing{opacity:1}
.is-ready .hero__video{
  transform:scale(1.03) translate3d(var(--px,0px),var(--py,0px),0);
  transition:opacity 1.6s var(--ease-soft),transform .6s var(--ease-soft);
  will-change:transform;
}

.hero__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  /* A crisp editorial plate: edge vignette only, plus enough darkening under the
     masthead for the navigation to stay legible over the photograph. */
  background:
    linear-gradient(90deg,rgba(27,19,11,.52) 0%,rgba(27,19,11,.10) 20%,rgba(27,19,11,.04) 56%,rgba(27,19,11,.36) 100%),
    linear-gradient(180deg,rgba(27,19,11,.62) 0%,rgba(27,19,11,.10) 26%,rgba(27,19,11,0) 58%,rgba(27,19,11,.58) 100%),
    radial-gradient(120% 80% at 56% 42%,rgba(201,160,58,.13),transparent 64%);
}
.hero__grain{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%22160%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.85%22 numOctaves=%223%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22/%3E%3C/svg%3E");
}

/* --- Photo credit (CC BY-SA attribution, doubles as an editorial caption) --- */
.hero__credit{
  position:absolute;z-index:4;
  right:clamp(1.25rem,2vw,2.25rem);
  bottom:clamp(1.25rem,2.5vh,1.75rem);
  display:flex;flex-direction:column;gap:.35rem;
  text-align:right;
  opacity:0;transform:translateY(8px);
  transition:opacity 1s var(--ease) 1.05s,transform 1s var(--ease) 1.05s;
}
.is-ready .hero__credit{opacity:1;transform:none}
.hero__credit-place{
  font-size:.625rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(247,241,228,.66);
}
.hero__credit-by{
  font-size:.5625rem;letter-spacing:.08em;line-height:1.55;
  max-width:min(19rem,64vw);
  margin-left:auto;
  text-wrap:balance;
  color:rgba(247,241,228,.36);
}

/* --- Content --- */
.hero__content{
  grid-column:1;grid-row:1;
  position:relative;z-index:5;
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--masthead-h) + clamp(2rem,5vh,4rem)) clamp(2.5rem,5vw,5rem)
          clamp(2.25rem,5vh,3.25rem) var(--gutter);
}
.hero__stack{max-width:34rem}

/* On desktop the scroll cue is anchored to the viewport floor, so the editorial
   stack stays optically centred instead of being pushed by it. */
@media (min-width:1366px){
  .hero__content{padding-bottom:calc(clamp(2.25rem,5vh,3.25rem) + 2.75rem)}
  .scroll-cue{
    position:absolute;left:var(--gutter);
    bottom:clamp(2.25rem,5vh,3.25rem);
    margin-top:0;
  }
}

/* Reveal choreography */
[data-reveal]{
  opacity:0;transform:translateY(18px);
  transition:opacity 1s var(--ease),transform 1.1s var(--ease);
}
.is-ready [data-reveal]{opacity:1;transform:none}
.is-ready [data-reveal="1"]{transition-delay:.30s}
.is-ready [data-reveal="2"]{transition-delay:.40s}
.is-ready [data-reveal="3"]{transition-delay:.56s}
.is-ready [data-reveal="4"]{transition-delay:.68s}
.is-ready [data-reveal="5"]{transition-delay:.78s}
.is-ready [data-reveal="6"]{transition-delay:.92s}

.eyebrow{
  display:flex;align-items:center;gap:.85rem;
  font-size:.6875rem;font-weight:400;letter-spacing:.28em;text-transform:uppercase;
  color:var(--brass-lift);
  margin-bottom:clamp(1.5rem,3.2vh,2.25rem);
}
/* ------------------------------------------------------------------
   SECTION MARK — corner bracket with a descending arrow, from the deck.
   Three changes over the first version:
   1. Sized in em, so it tracks whatever label it sits beside instead of
      being pinned at 22px while the type scales around it.
   2. Drawn in currentColor, so it inherits each label's colour and needs
      no separate overrides for paper, espresso and gold grounds.
   3. A real arrow — shaft plus head — rather than a second nested corner,
      which read as a stray square. It draws itself once the label lands.
   ------------------------------------------------------------------ */
.eyebrow__mark,
.section-label__mark{
  position:relative;display:block;flex:none;
  width:1.9em;height:1.9em;
  border-top:1.5px solid currentColor;
  border-left:1.5px solid currentColor;
}
/* diagonal shaft, drawn out of the bracket corner */
.eyebrow__mark::before,
.section-label__mark::before{
  content:"";position:absolute;left:.3em;top:.3em;
  width:1.3em;height:1.5px;
  background:currentColor;
  transform-origin:0 50%;
  transform:rotate(45deg) scaleX(0);
  transition:transform .8s var(--ease) .15s;
}
/* arrow head, meeting the end of the shaft */
.eyebrow__mark::after,
.section-label__mark::after{
  content:"";position:absolute;right:.22em;bottom:.22em;
  width:.44em;height:.44em;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  opacity:0;transform:translate(-.22em,-.22em);
  transition:opacity .5s var(--ease-soft) .55s,transform .6s var(--ease) .55s;
}
.is-ready .eyebrow__mark::before,
.section-label.is-lifted .section-label__mark::before{transform:rotate(45deg) scaleX(1)}
.is-ready .eyebrow__mark::after,
.section-label.is-lifted .section-label__mark::after{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .eyebrow__mark::before,.section-label__mark::before{transform:rotate(45deg) scaleX(1)}
  .eyebrow__mark::after,.section-label__mark::after{opacity:1;transform:none}
}

.hero__title{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.7rem,5.55vw,5.15rem);
  line-height:1.02;
  letter-spacing:-.021em;
  color:var(--ivory);
  text-wrap:balance;
}
.hero__title .line{display:block}
.hero__title em{
  font-style:italic;
  color:var(--brass-lift);
  letter-spacing:-.01em;
}

.hero__lede{
  margin-top:clamp(1.35rem,3vh,1.9rem);
  max-width:34.5rem;
  font-size:clamp(.9375rem,1.02vw,1.0625rem);
  font-weight:300;
  line-height:1.68;
  color:var(--ivory-58);
  text-wrap:pretty;
}

/* --- Actions --- */
.hero__actions{
  margin-top:clamp(2rem,4.4vh,2.9rem);
  display:flex;align-items:center;gap:clamp(1rem,2vw,2.25rem);
  flex-wrap:wrap;
}
.btn{
  display:inline-flex;align-items:center;gap:.85rem;
  font-size:.6875rem;font-weight:500;letter-spacing:.155em;text-transform:uppercase;
  white-space:nowrap;
}
.btn--primary{
  background:var(--ivory);color:var(--ink);
  padding:1.15rem 1.85rem;
  border-radius:1px;
  transition:background-color .45s var(--ease-soft),transform .45s var(--ease),box-shadow .45s var(--ease);
}
.btn--primary .arrow{transition:transform .45s var(--ease)}
.btn--primary:hover{
  background:var(--champagne);
  transform:translateY(-2px);
  box-shadow:0 14px 30px -18px rgba(0,0,0,.85);
}
.btn--primary:hover .arrow{transform:translateX(5px)}

.btn--ghost{
  position:relative;
  color:var(--ivory-72);
  padding:1.15rem 0;
  transition:color .4s var(--ease-soft);
}
.btn--ghost::after{
  content:"";position:absolute;left:0;right:0;bottom:.95rem;height:1px;background:var(--ivory-16);
}
.btn--ghost::before{
  content:"";position:absolute;left:0;right:0;bottom:.95rem;height:1px;background:var(--brass-lift);z-index:1;
  transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease);
}
.btn--ghost:hover{color:var(--ivory)}
.btn--ghost:hover::before{transform:scaleX(1)}

/* --- Trust --- */
.hero__trust{
  margin-top:clamp(2.5rem,5.5vh,3.75rem);
  padding-top:clamp(1.15rem,2.4vh,1.6rem);
  border-top:1px solid var(--ivory-10);
  display:flex;flex-wrap:wrap;
  gap:1.4rem clamp(1.5rem,3vw,2.5rem);
}
.hero__trust li{display:flex;flex-direction:column;gap:.5rem}
.hero__trust .k{
  font-size:.5625rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--brass);
}
.hero__trust .v{
  font-size:.6875rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ivory-58);
}

/* --- Scroll cue --- */
.scroll-cue{
  display:inline-flex;align-items:center;gap:1.1rem;
  align-self:flex-start;
  margin-top:clamp(2.5rem,6vh,4rem);
  font-size:.5625rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--ivory-58);
  transition:color .4s var(--ease-soft);
}
.scroll-cue:hover{color:var(--ivory)}
.scroll-cue__line{
  position:relative;display:block;width:58px;height:1px;
  background:var(--ivory-16);overflow:hidden;
}
.scroll-cue__line::after{
  content:"";position:absolute;inset:0 auto 0 0;width:22px;
  background:linear-gradient(90deg,transparent,var(--brass-lift));
  animation:cue 2.6s var(--ease-soft) infinite;
}
@keyframes cue{
  0%{transform:translateX(-100%)}
  60%,100%{transform:translateX(280%)}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1240.98px){
  .hero__stack{max-width:33rem}
  .nav__list{gap:1.4rem}
}

/* Shallow desktop viewports — tighten the rhythm before anything overflows */
@media (min-width:1366px) and (max-height:840px){
  .hero__title{font-size:clamp(2.5rem,4.7vw,4.1rem)}
  .hero__lede{margin-top:1.25rem}
  .hero__actions{margin-top:1.85rem}
  .hero__trust{margin-top:2.15rem;padding-top:1.1rem}
  .scroll-cue{margin-top:2.15rem}
}
@media (min-width:1366px) and (max-height:700px){
  .hero__content{padding-top:calc(var(--masthead-h) + 1.25rem)}
  .hero__trust{margin-top:1.8rem}
  .scroll-cue{display:none}
}

/* Stacked, full-bleed composition */
/* The nav swap and the layout swap are NOT the same breakpoint. The split
   composition works from 1366px, but six items plus the CTA only fit from
   ~1100px — between the two the nav wrapped onto three rows. Hold the
   hamburger until the nav genuinely fits, with headroom. */
@media (max-width:1119.98px){
  .nav{display:none}
  .menu-toggle{display:inline-flex}
}
.wordmark__sub{white-space:nowrap}

@media (max-width:1365.98px){
  .hero{display:block;min-height:100svh}
  .hero__media{position:absolute;inset:0;grid-column:auto}
  .hero__media::before{display:none}
  .hero__img,.hero__video{object-position:50% 38%;filter:brightness(1.08) saturate(1.06)}
  /* Open window of image up top; a deliberate ink stage for the type below. */
  .hero__scrim{
    background:
      linear-gradient(180deg,
        rgba(27,19,11,.74) 0%,
        rgba(27,19,11,.18) 16%,
        rgba(27,19,11,.38) 33%,
        rgba(27,19,11,.86) 54%,
        rgba(27,19,11,.97) 73%,
        var(--ink) 89%),
      radial-gradient(130% 62% at 50% 26%,rgba(201,160,58,.18),transparent 68%);
  }

  .hero__content{
    position:relative;
    min-height:100svh;
    justify-content:flex-end;
    padding:calc(var(--masthead-h) + 2rem) var(--gutter)
            calc(clamp(2.25rem,5vh,3.5rem) + env(safe-area-inset-bottom));
  }
  /* Credit moves to the top of the full-bleed plate — it captions the visible
     architecture there instead of colliding with the bottom-aligned content. */
  .hero__credit{
    top:calc(var(--masthead-h) + .6rem);
    bottom:auto;right:var(--gutter);
    /* the film shows through here now, so the caption carries its own separation */
    text-shadow:0 1px 10px rgba(27,19,11,.9), 0 0 2px rgba(27,19,11,.75);
  }
  .hero__credit-place{color:rgba(247,241,228,.88)}
  .hero__credit-by{color:rgba(247,241,228,.64)}

  .hero__stack{max-width:38rem;margin-block:0}
  .hero__title{font-size:clamp(2.7rem,7.4vw,4.4rem)}
  .hero__lede{font-size:1.0625rem;max-width:36rem;color:var(--ivory-72)}
  .scroll-cue{margin-top:clamp(2rem,4vh,3rem)}
}

@media (max-width:720.98px){
  :root{--gutter:1.5rem}
  .hero__title{font-size:clamp(2.35rem,9.4vw,3.4rem);line-height:1.05}
  .hero__title .line{display:inline}
  .hero__lede{font-size:1rem;line-height:1.62;max-width:32rem}

  .hero__actions{
    gap:1.15rem;flex-direction:column;align-items:stretch;
    margin-top:2.1rem;
  }
  .btn--primary{justify-content:space-between;padding:1.2rem 1.6rem}
  .btn--ghost{align-self:flex-start;padding:.3rem 0 .9rem}
  .btn--ghost::after,.btn--ghost::before{bottom:.4rem}

  .hero__trust{margin-top:2.3rem;gap:1.25rem 2.25rem}
  .scroll-cue{display:none}
  .wordmark__sub{display:none}
}

@media (max-width:400.98px){
  .hero__title{font-size:2.15rem}
  .hero__lede{font-size:.9375rem}
  .hero__actions{margin-top:1.7rem}
  .hero__trust{margin-top:1.9rem;gap:1rem 1.75rem}
}

/* ============================================================
   LANDSCAPE FULL-BLEED BAND — 1025px to 1365px
   No split here (by request). These are landscape screens, so they get the
   desktop full-bleed treatment — type centred over a left-weighted scrim —
   rather than the bottom-anchored mobile composition inherited above.
   hero.js feeds this band the wide 1280px encode, not the portrait one.
   ============================================================ */
@media (min-width:1025px) and (max-width:1365.98px){

  .hero__img,.hero__video{object-position:50% 46%;filter:none}

  .hero__scrim{
    background:
      linear-gradient(90deg,
        rgba(27,19,11,.95) 0%,
        rgba(27,19,11,.88) 24%,
        rgba(27,19,11,.60) 44%,
        rgba(27,19,11,.24) 64%,
        rgba(27,19,11,.20) 82%,
        rgba(27,19,11,.52) 100%),
      linear-gradient(180deg,
        rgba(27,19,11,.72) 0%,
        rgba(27,19,11,.10) 26%,
        rgba(27,19,11,0) 56%,
        rgba(27,19,11,.58) 100%),
      radial-gradient(90% 70% at 68% 44%,rgba(201,160,58,.14),transparent 66%);
  }

  .hero__content{
    justify-content:center;
    padding-right:clamp(3rem,28vw,22rem);   /* holds the tower clear of the type */
    padding-bottom:calc(clamp(2rem,4vh,3rem) + 2.5rem);
    padding-top:calc(var(--masthead-h) + 1.5rem);
  }
  .hero__stack{max-width:31rem}

  /* This band inherits the mobile type scale, which is too tall for a short
     landscape screen — it overflowed at 1100x800. Bring it back to a desktop
     rhythm. */
  .hero__title{font-size:clamp(2.4rem,4.6vw,3.6rem);line-height:1.03}
  .hero__lede{font-size:1rem;line-height:1.62;max-width:30rem;margin-top:1.15rem}
  .hero__actions{margin-top:1.75rem}
  .hero__trust{margin-top:2rem;padding-top:1.1rem}

  /* Credit and cue return to the viewport corners — there is no plate to sit in */
  .hero__credit{
    top:auto;
    right:var(--gutter);
    bottom:clamp(1.5rem,3vh,2.25rem);
  }
  .scroll-cue{
    position:absolute;
    left:var(--gutter);
    bottom:clamp(1.5rem,3vh,2.25rem);
    margin-top:0;
  }
}



/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0ms !important;
  }
  .hero__img{transform:none;opacity:1}
  .scroll-cue__line::after{display:none}
}

/* ============================================================
   INTRODUCTION & IDENTITY
   Paper section beneath the hero. The tonal flip from espresso to
   ivory is the brand's own pairing (dark contents spread / ivory
   identity sheet) and gives the scroll cue a real destination.
   ============================================================ */

.intro{
  background:var(--paper);
  color:var(--brown-body);
  padding:clamp(4.5rem,11vh,8.5rem) 0 0;
  scroll-margin-top:var(--masthead-h);
}
.intro__inner{
  /* Same left rail as the hero: gutter from the viewport edge, not a centred
     column. A centred 88rem box drifted 248px away from the hero's edge at
     1920. The grid itself is capped instead, so wide screens stay readable
     without breaking the alignment. */
  padding-inline:var(--gutter);
}
.intro__grid,
.pillars,
.section-label{max-width:96rem}

/* --- section label --- */
.section-label{
  display:flex;align-items:center;gap:.85rem;
  font-size:.6875rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold-ink);
  margin-bottom:clamp(2rem,4.5vh,3.25rem);
}

/* --- headline / body grid --- */
.intro__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(2rem,5vh,3.25rem);
}
.intro__title{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.1rem,4.4vw,3.7rem);
  line-height:1.06;
  letter-spacing:-.02em;
  color:var(--brown-deep);
  text-wrap:balance;
  margin:0;
  max-width:16ch;
}
.intro__title em{
  font-style:italic;
  color:var(--gold-accent);
}
.intro__body p{
  /* The hero's lede clamp bottomed out at 15px on every common desktop —
     fine for two lines, too small for three paragraphs. This reaches 18px by
     1440 and holds 16px on phones. Measure tightened to ~62 characters. */
  font-size:clamp(1rem,.72rem + .5vw,1.125rem);
  font-weight:400;
  line-height:1.65;
  color:var(--brown-body);
  max-width:34rem;
  text-wrap:pretty;
}
.intro__body p + p{margin-top:1.4em}

/* Heritage stamp — fills the 152px void that sat under the headline, and puts
   the rebrand note where a reader actually wants it: beside a line about legacy. */
.intro__stamp{
  margin:clamp(2rem,4.5vh,3.25rem) 0 0;
  display:flex;flex-direction:column;gap:.55rem;
}
.intro__stamp-rule{
  display:block;width:44px;height:2px;background:var(--gold-accent);
  margin-bottom:.5rem;
}
.intro__stamp-year{
  font-family:var(--display);
  font-size:clamp(1.2rem,1.7vw,1.55rem);
  letter-spacing:.01em;
  color:var(--brown-deep);
}
.intro__stamp-note{
  font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-ink);
}

/* --- full-bleed architectural plate ---------------------------------- */
.intro__plate{
  margin:clamp(3rem,7vh,5rem) 0 0;
  /* width-driven so the ratio stays near 4:1 on desktop and ~2:1 on phones,
     instead of the 6.7:1 letterbox a vh-based height produced */
  height:clamp(170px,24vw,420px);
  overflow:hidden;
}
.intro__plate img{
  width:100%;height:100%;object-fit:cover;object-position:50% 42%;
  /* feathered into the paper so it reads as a printed plate, not a pasted photo */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),
                     linear-gradient(180deg,transparent,#000 18%,#000 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),
             linear-gradient(180deg,transparent,#000 18%,#000 100%);
  mask-composite:intersect;
}

/* --- closing band: pull-quote + the triad ---------------------------- */
.intro__close{
  background:var(--ink);
  color:var(--ivory);
  padding:clamp(3.5rem,9vh,6.5rem) 0 clamp(3.5rem,9vh,6rem);
}
.pull{
  margin:0;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.5rem,2.6vw,2.4rem);
  line-height:1.3;
  letter-spacing:-.015em;
  color:var(--ivory);
  /* 26ch ran to seven lines — a paragraph in display type. Widened so it
     resolves in three or four, which is what makes it read as a statement. */
  max-width:42rem;
  text-wrap:balance;
}
.pull em{font-style:italic;color:var(--brass-lift)}
.pull::before{
  content:"";display:block;
  width:44px;height:2px;background:var(--brass);
  margin-bottom:clamp(1.25rem,3vh,2rem);
}

.pillars{
  margin-top:clamp(3rem,7vh,5rem);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0;
}
.pillars__item{
  display:flex;align-items:baseline;gap:1.25rem;
  padding:1.35rem 0;
  border-top:1px solid rgba(247,241,228,.16);
}
.pillars__num{
  font-family:var(--display);
  font-size:clamp(2.25rem,3.4vw,3.1rem);
  line-height:.85;
  color:var(--brass);
  opacity:.85;
  flex:none;
}
.pillars__label{
  font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ivory-72);
  font-weight:500;
}

/* Reveal — same restraint as the hero, driven by hero.js. Order is declared
   in the markup rather than inferred from DOM position, so re-nesting the
   grid cannot silently reshuffle the sequence. */
[data-lift]{
  opacity:0;transform:translateY(20px);
  transition:opacity .9s var(--ease),transform 1s var(--ease);
}
[data-lift].is-lifted{opacity:1;transform:none}
[data-lift="2"].is-lifted{transition-delay:90ms}
[data-lift="3"].is-lifted{transition-delay:180ms}
[data-lift="4"].is-lifted{transition-delay:270ms}

@media (min-width:721px){
  .pillars{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(1.5rem,3vw,3rem);
  }
  .pillars__item{flex-direction:column;align-items:flex-start;gap:1rem;padding-top:1.7rem}
  .pillars__num{font-size:clamp(2.6rem,4.4vw,4rem)}
}

@media (min-width:1025px){
  .intro__grid{
    grid-template-columns:minmax(0,5fr) minmax(0,6fr);
    gap:clamp(3rem,6vw,6rem);
    align-items:start;
  }
  /* Optical alignment: lift the body so its first line's cap-top meets the
     headline's, cancelling the difference in half-leading between an 18px
     sans at 1.65 and a 59px serif at 1.06. Expressed in em so it tracks the
     type scale rather than being a fixed nudge. */
  .intro__body p:first-child{margin-top:-.66em}
}

@media (prefers-reduced-motion:reduce){
  [data-lift]{opacity:1;transform:none}
}

/* Must sit after the 721px three-column rule, or that wins at >=1025 and
   squeezes the triad into a 501px column with wrapping labels. */
@media (min-width:1025px){
  /* Statement and triad share a row — the band had a 47% void top-right and
     was 583px tall for a quote and three labels. */
  .intro__close .intro__inner{
    display:grid;
    grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    gap:clamp(2.5rem,5vw,5.5rem);
    align-items:start;
  }
  .pillars{margin-top:0;grid-template-columns:minmax(0,1fr)}
  .pillars__item{
    flex-direction:row;align-items:baseline;
    gap:1.25rem;padding:1.15rem 0;
  }
  .pillars__num{font-size:clamp(2.1rem,2.6vw,2.9rem)}
  .pull{max-width:none}
}

/* ============================================================
   THE BENCHMARKS OF JUSTICE — legacy + founder
   ============================================================ */
.legacy{
  background:var(--paper);
  color:var(--brown-body);
  padding:clamp(4.5rem,11vh,8rem) 0 clamp(4.5rem,11vh,7.5rem);
  scroll-margin-top:var(--masthead-h);
}
.legacy__inner{padding-inline:var(--gutter)}

.legacy__title{
  font-family:var(--display);font-weight:400;
  /* Runs the full measure now, not a 22ch column — balanced so it breaks into
     even lines rather than a long first line and a short orphan. */
  font-size:clamp(1.9rem,4vw,3.6rem);
  line-height:1.08;letter-spacing:-.02em;
  color:var(--brown-deep);
  margin:0;max-width:none;text-wrap:balance;
}
.legacy__title em{font-style:italic;color:var(--gold-accent)}

.legacy__copy{margin-top:clamp(2.25rem,5vh,3.5rem)}
.legacy__copy p{
  margin:0;
  /* Full width, no cap — the paragraph fills whatever space it is given.
     Long measures need help: the type is set larger and the leading opened to
     1.85 so the eye can still find the start of the next line. */
  font-size:clamp(1rem,.82rem + .6vw,1.3rem);
  line-height:1.85;color:var(--brown-body);
  max-width:none;text-wrap:pretty;
}
.legacy__copy p + p{margin-top:1.4em}


/* --- founder: portrait with the card riding its edge ---------------- */
.founder{
  margin-top:clamp(3.5rem,9vh,6rem);
  padding-inline:var(--gutter);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0;
}
.founder__portrait{
  margin:0;position:relative;overflow:hidden;
  aspect-ratio:4/5;
  background:linear-gradient(150deg,#3A2A18,#1E150D);
}
.founder__portrait img{
  width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block;
}
.founder__fallback{
  position:absolute;inset:0;display:none;
  align-items:center;justify-content:center;
  font-family:var(--display);
  font-size:clamp(3rem,7vw,5.5rem);letter-spacing:.22em;
  color:rgba(224,188,99,.28);
}
.founder__portrait.is-missing img{display:none}
.founder__portrait.is-missing .founder__fallback{display:flex}

.founder__card{
  background:var(--ink);
  color:var(--ivory);
  padding:clamp(1.9rem,4.2vw,3.5rem);
}
.founder__rule{
  display:block;width:48px;height:2px;background:var(--brass);
  margin-bottom:clamp(1.15rem,2.6vh,1.75rem);
}
.founder__name{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.5rem,2.5vw,2.15rem);
  line-height:1.15;letter-spacing:-.01em;
  color:var(--ivory);margin:0;
}
.founder__cred{
  margin:.9rem 0 0;
  font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass-lift);
}
.founder__note{
  margin:clamp(1.35rem,3vh,1.9rem) 0 0;
  font-size:clamp(.9375rem,.7rem + .4vw,1.0625rem);
  line-height:1.7;color:var(--ivory-72);
  max-width:42rem;text-wrap:pretty;
}

@media (min-width:1025px){
  .founder{
    grid-template-columns:minmax(0,43fr) minmax(0,57fr);
    /* Bottom-aligned so the card and the portrait share a baseline instead of
       the card floating mid-height with matching voids above and below. */
    align-items:end;
  }
  .founder__card{
    margin-left:clamp(-4rem,-4vw,-2.5rem);
    position:relative;z-index:1;
    box-shadow:0 34px 80px -46px rgba(30,21,13,.7);
  }
}

/* ============================================================
   WHY CHOOSE — espresso ground, oversized display heading, and a
   ruled list of reasons. Sits after the paper legacy section so the
   page keeps alternating rather than running light on light.
   ============================================================ */
.why{
  background:var(--ink);
  color:var(--ivory);
  padding:clamp(4rem,10vh,7rem) 0 clamp(4.5rem,11vh,7.5rem);
  scroll-margin-top:var(--masthead-h);
}
.why__inner{
  padding-inline:var(--gutter);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(2.5rem,6vh,4rem);
}

/* --- lead column --- */
.why__eyebrow{
  display:flex;align-items:center;gap:.9rem;
  margin:0 0 clamp(.75rem,2vh,1.25rem);
  font-size:.6875rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--brass-lift);
}
.why__eyebrow-rule{
  display:block;width:clamp(24px,3vw,42px);height:2px;background:var(--brass);
}
.why__title{
  font-family:var(--display);font-weight:400;
  /* Oversized on purpose — this is the one place the page raises its voice */
  font-size:clamp(3.5rem,9vw,7.5rem);
  line-height:.92;letter-spacing:-.03em;
  color:var(--brass-lift);
  margin:0;
}
.why__figure{
  margin:clamp(2rem,5vh,3rem) 0 0;
  overflow:hidden;
  background:linear-gradient(150deg,#3A2A18,#1E150D);
}
.why__figure img{
  width:100%;height:100%;object-fit:cover;display:block;
  aspect-ratio:4/5;
}

/* --- reasons --- */
.reasons{margin:0;padding:0;list-style:none}
.reason{
  padding:clamp(1.25rem,3vh,1.75rem) 0;
  border-top:1px solid var(--ivory-16);
}
.reason:first-child{border-top:0;padding-top:0}
.reason__title{
  margin:0 0 .6rem;
  font-family:var(--ui);
  font-size:clamp(.9375rem,1.15vw,1.0625rem);
  font-weight:500;letter-spacing:.01em;
  color:var(--brass-lift);
}
.reason__body{
  margin:0;
  font-size:clamp(.9375rem,.72rem + .4vw,1.0625rem);
  line-height:1.7;
  color:var(--ivory-58);
  text-wrap:pretty;
}

.why__close{
  margin:clamp(1.75rem,4vh,2.5rem) 0 0;
  padding-top:clamp(1.5rem,3.5vh,2.25rem);
  border-top:2px solid var(--brass);
  font-size:clamp(1rem,.78rem + .5vw,1.2rem);
  line-height:1.7;
  color:var(--ivory);
  text-wrap:pretty;
}

@media (min-width:1025px){
  .why__inner{
    grid-template-columns:minmax(0,38fr) minmax(0,62fr);
    gap:clamp(3rem,6vw,6.5rem);
    align-items:start;
  }
  .why__figure{margin-top:clamp(2.25rem,4vh,3rem)}
}

/* ============================================================
   OUR SERVICES — the practice index
   Paper ground. A long ordered list needs rules and numerals to stay
   scannable; the figure holds the right column so it is not 3,000px
   of empty paper.
   ============================================================ */
.services{
  background:var(--paper);
  color:var(--brown-body);
  padding:clamp(4.5rem,11vh,8rem) 0 clamp(4.5rem,11vh,7.5rem);
  scroll-margin-top:var(--masthead-h);
}
.services__inner{padding-inline:var(--gutter)}

.services__title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.85rem,3.4vw,2.9rem);
  line-height:1.12;letter-spacing:-.018em;
  color:var(--brown-deep);
  margin:0;max-width:24ch;text-wrap:balance;
}
.services__lede{
  margin:clamp(1rem,2.5vh,1.5rem) 0 0;
  font-size:clamp(.9375rem,.72rem + .4vw,1.0625rem);
  line-height:1.65;color:var(--brown-body);
  max-width:52ch;text-wrap:pretty;
}

.services__body{
  margin-top:clamp(2.5rem,6vh,4rem);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(2.5rem,6vh,4rem);
}

/* --- the index --- */
.groups{margin:0;padding:0;list-style:none;counter-reset:none}
.group{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(.9rem,2.5vw,2rem);
  padding:clamp(1.25rem,3vh,1.75rem) 0;
  border-top:1px solid rgba(90,70,48,.20);
}
.group:first-child{border-top:0;padding-top:0}
.group__num{
  font-family:var(--display);
  font-size:clamp(.9375rem,1.15vw,1.15rem);
  line-height:1.3;
  color:var(--gold-ink);
  font-variant-numeric:tabular-nums;
  min-width:2ch;
}
.group__title{
  margin:0 0 .75rem;
  font-family:var(--ui);
  font-size:clamp(.9375rem,1.15vw,1.0625rem);
  font-weight:500;letter-spacing:.005em;
  color:var(--brown-deep);
}
.group__items{
  margin:0;padding:0;list-style:none;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:.45rem clamp(1rem,2.5vw,2.5rem);
}
.group__items li{
  position:relative;
  padding-left:1rem;
  font-size:clamp(.8125rem,.62rem + .35vw,.9375rem);
  line-height:1.55;
  color:var(--brown-body);
}
/* Small gold marker instead of a bullet — a list this long needs a quiet one */
.group__items li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:5px;height:5px;
  border-top:1.5px solid var(--gold-accent);
  border-right:1.5px solid var(--gold-accent);
  transform:rotate(45deg);
}

/* --- figure --- */
.services__figure{
  margin:0;overflow:hidden;
  background:linear-gradient(150deg,#3A2A18,#1E150D);
}
.services__figure img{
  width:100%;height:100%;object-fit:cover;display:block;
  aspect-ratio:2/3;
}

@media (min-width:700px){
  .group__items{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (min-width:1025px){
  .services__body{
    grid-template-columns:minmax(0,64fr) minmax(0,32fr);
    gap:clamp(2.5rem,5vw,5rem);
    align-items:start;
  }
  /* Sticky here is doing real work: the index runs thousands of pixels and the
     column would otherwise be empty paper for its whole length. */
  .services__figure{
    position:sticky;
    top:calc(var(--masthead-h) + 2rem);
    max-height:calc(100vh - var(--masthead-h) - 4rem);
  }
  .services__figure img{height:100%;aspect-ratio:auto;min-height:30rem}
}

/* ============================================================
   SHARED BAND PIECES — used by the four sections below
   ============================================================ */
.band__title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2rem,3.9vw,3.3rem);
  line-height:1.08;letter-spacing:-.02em;
  color:var(--brown-deep);
  margin:0;max-width:24ch;text-wrap:balance;
}
.band__title em{font-style:italic;color:var(--gold-accent)}
.band__title--light{color:var(--ivory)}
.band__title--light em{color:var(--brass-lift)}

/* label variants for the grounds it sits on */
/* Only the label colour needs stating per ground — the mark follows via
   currentColor, so it no longer needs its own overrides. */
.section-label--dark{color:var(--brass-lift)}
.section-label--onGold{color:#4A3418}

/* ============================================================
   MILESTONES
   ============================================================ */
.milestones{
  background:var(--ink);color:var(--ivory);
  padding:clamp(4rem,10vh,7rem) 0 clamp(4.5rem,11vh,7.5rem);
  scroll-margin-top:var(--masthead-h);
}
.milestones__inner{padding-inline:var(--gutter)}

.timeline{
  margin:clamp(2.5rem,7vh,4.5rem) 0 0;padding:0;list-style:none;
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(2rem,4vh,2.75rem);
}
.milestone{position:relative;padding-left:1.75rem}
.milestone__dot{
  position:absolute;left:0;top:.55rem;
  width:9px;height:9px;border-radius:50%;background:var(--brass-lift);
}
.milestone__year{
  display:block;
  font-family:var(--display);font-style:italic;
  font-size:clamp(1.75rem,2.8vw,2.4rem);
  line-height:1;color:var(--brass-lift);
  margin-bottom:.85rem;
}
.milestone__note{
  margin:0;
  font-size:clamp(.875rem,.7rem + .35vw,1rem);
  line-height:1.65;color:var(--ivory-58);
  max-width:34ch;text-wrap:pretty;
}

@media (min-width:860px){
  /* Horizontal rule with the entries hung beneath it, alternating down so the
     four notes never collide. */
  .timeline{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:0 clamp(1.5rem,3vw,3rem);
    border-top:1px solid var(--ivory-16);
    padding-top:0;
  }
  .milestone{padding-left:0;padding-top:2.75rem}
  .milestone:nth-child(even){padding-top:5.25rem}
  .milestone__dot{top:-5px;left:0}
  .milestone:nth-child(even) .milestone__dot{top:2.5rem}
  .milestone:nth-child(even)::before{
    content:"";position:absolute;left:4px;top:0;width:1px;height:2.5rem;
    background:var(--ivory-16);
  }
}

/* ============================================================
   MISSION / VISION
   ============================================================ */
.creed{
  display:grid;grid-template-columns:minmax(0,1fr);
}
.creed__panel{padding:clamp(3rem,8vh,6rem) 0}
.creed__inner{padding-inline:var(--gutter)}
.creed__panel--mission{background:var(--paper);color:var(--brown-body)}
.creed__panel--vision{background:var(--brass);color:#3A2A10}

.creed__title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.75rem,3.2vw,2.7rem);
  line-height:1.12;letter-spacing:-.018em;
  margin:0;max-width:18ch;text-wrap:balance;
}
.creed__panel--mission .creed__title{color:var(--brown-deep)}
.creed__panel--vision .creed__title{color:#33240E}
.creed__body{
  margin:clamp(1.25rem,3vh,1.85rem) 0 0;
  font-size:clamp(.9375rem,.72rem + .4vw,1.0625rem);
  line-height:1.7;max-width:46ch;text-wrap:pretty;
}
.creed__panel--vision .creed__body{color:#4A3414}

@media (min-width:900px){
  .creed{grid-template-columns:repeat(2,minmax(0,1fr))}
  .creed__panel{padding:clamp(4rem,10vh,7rem) 0}
  .creed__inner{padding-inline:clamp(2rem,4vw,4.5rem)}
  .creed__panel--mission .creed__inner{padding-left:var(--gutter)}
  .creed__panel--vision .creed__inner{padding-right:var(--gutter)}
}

/* ============================================================
   PRINCIPLES
   ============================================================ */
.principles{
  background:var(--paper);color:var(--brown-body);
  padding:clamp(4.5rem,11vh,8rem) 0;
  scroll-margin-top:var(--masthead-h);
}
.principles__inner{padding-inline:var(--gutter)}
.principles__lede{
  margin:clamp(1.15rem,3vh,1.75rem) 0 0;
  font-size:clamp(.9375rem,.72rem + .4vw,1.0625rem);
  line-height:1.65;max-width:58ch;text-wrap:pretty;
}
.principle-grid{
  margin:clamp(2.5rem,6vh,4rem) 0 0;padding:0;list-style:none;
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(1.75rem,4vh,2.75rem) clamp(1.5rem,3vw,3rem);
}
.principle{padding-top:1.1rem;border-top:2px solid var(--gold-accent)}
.principle__title{
  margin:0 0 .6rem;
  font-family:var(--ui);font-size:clamp(.9375rem,1.1vw,1.0625rem);
  font-weight:500;color:var(--brown-deep);
}
.principle__body{
  margin:0;
  font-size:clamp(.8125rem,.65rem + .35vw,.9375rem);
  line-height:1.65;color:var(--brown-body);text-wrap:pretty;
}
@media (min-width:640px){.principle-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1025px){.principle-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ============================================================
   INSTITUTIONAL METHODOLOGY
   ============================================================ */
.method{
  background:var(--ink);color:var(--ivory);
  padding:clamp(4.5rem,11vh,8rem) 0;
  scroll-margin-top:var(--masthead-h);
}
.method__inner{padding-inline:var(--gutter)}
.steps{
  margin:clamp(2.5rem,6vh,4rem) 0 0;padding:0;list-style:none;
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(1.9rem,4.5vh,3rem) clamp(1.75rem,3.5vw,3.5rem);
}
.step{padding-top:1.15rem;border-top:2px solid var(--brass)}
.step__num{
  display:block;margin-bottom:.7rem;
  font-size:.6875rem;letter-spacing:.2em;
  color:var(--brass-lift);font-variant-numeric:tabular-nums;
}
.step__title{
  margin:0 0 .6rem;
  font-family:var(--ui);font-size:clamp(.9375rem,1.1vw,1.0625rem);
  font-weight:500;color:var(--ivory);
}
.step__body{
  margin:0;
  font-size:clamp(.8125rem,.65rem + .35vw,.9375rem);
  line-height:1.7;color:var(--ivory-58);text-wrap:pretty;
}
@media (min-width:700px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1025px){.steps{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ============================================================
   TEAM
   ============================================================ */
.team{background:var(--paper);color:var(--brown-body);padding:clamp(4.5rem,11vh,8rem) 0;scroll-margin-top:var(--masthead-h)}
.team__inner{padding-inline:var(--gutter)}
.counsels{
  margin:clamp(2.5rem,6vh,4rem) 0 0;padding:0;list-style:none;
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,4vh,3rem) clamp(1.25rem,2.5vw,2.25rem);
}
.counsel__portrait{
  margin:0 0 1.1rem;position:relative;overflow:hidden;aspect-ratio:4/5;
  background:linear-gradient(150deg,#4A3620,#241A10);
}
.counsel__portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block}
.counsel__initials{
  position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  font-family:var(--display);font-size:clamp(2.25rem,4vw,3rem);letter-spacing:.16em;
  color:rgba(224,188,99,.32);
}
.counsel__portrait.is-missing img{display:none}
.counsel__portrait.is-missing .counsel__initials{display:flex}
.counsel__name{margin:0 0 .5rem;font-family:var(--ui);font-size:clamp(.9375rem,1.1vw,1.0625rem);font-weight:500;color:var(--brown-deep)}
.counsel__role{margin:0 0 .85rem;font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;line-height:1.6;color:var(--gold-ink)}
.counsel__quote{margin:0;font-family:var(--display);font-style:italic;font-size:clamp(.875rem,1vw,.9375rem);line-height:1.6;color:var(--brown-body)}
.btn--outline{
  margin-top:clamp(2.5rem,5vh,3.5rem);
  border:1px solid rgba(90,70,48,.4);color:var(--brown-deep);
  padding:1.05rem 1.9rem;transition:background-color .4s var(--ease-soft),border-color .4s var(--ease-soft);
}
.btn--outline:hover{background:rgba(154,122,30,.10);border-color:var(--gold-accent)}
@media (min-width:640px){.counsels{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1025px){.counsels{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ============================================================
   JUDICIAL FOOTPRINT
   ============================================================ */
.footprint{background:var(--ink);color:var(--ivory);padding:clamp(4.5rem,11vh,8rem) 0;scroll-margin-top:var(--masthead-h)}
.footprint__inner{padding-inline:var(--gutter);display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2.5rem,6vh,4rem)}
.footprint__lede{margin:clamp(1.15rem,3vh,1.75rem) 0 0;font-size:clamp(.9375rem,.72rem + .4vw,1.0625rem);line-height:1.7;color:var(--ivory-58);max-width:52ch;text-wrap:pretty}
.forums{margin:clamp(2rem,5vh,3rem) 0 0;padding:0;list-style:none}
.forum{
  display:flex;align-items:center;gap:1.1rem;
  padding:clamp(.9rem,2.2vh,1.2rem) 0;border-bottom:1px solid var(--ivory-16);
  font-size:clamp(.875rem,1vw,1rem);color:var(--ivory);
}
.forum__rule{display:block;width:22px;height:1px;background:var(--brass-lift);flex:none}
.footprint__figure{margin:0;overflow:hidden;background:linear-gradient(150deg,#3A2A18,#1E150D)}
.footprint__figure img{width:100%;display:block;aspect-ratio:4/5;object-fit:cover}
.footprint__note{
  margin:0;background:var(--brass);color:#3A2A10;
  padding:clamp(1.25rem,3vw,1.9rem);
  font-size:clamp(.875rem,1vw,.9375rem);line-height:1.65;text-wrap:pretty;
}
@media (min-width:1025px){
  .footprint__inner{grid-template-columns:minmax(0,58fr) minmax(0,38fr);gap:clamp(2.5rem,5vw,5rem);align-items:start}
}

/* ============================================================
   TECHNOLOGY IN PRACTICE
   ============================================================ */
.tech-practice{background:var(--ink);color:var(--ivory);padding:clamp(4.5rem,11vh,8rem) 0;border-top:1px solid var(--ivory-10)}
.tech-practice__inner{padding-inline:var(--gutter)}
.tech-practice__sub{margin:clamp(.9rem,2.5vh,1.4rem) 0 0;font-size:clamp(1rem,1.3vw,1.2rem);line-height:1.5;color:var(--ivory-72);max-width:34ch}
.tech-grid{margin:clamp(2.5rem,6vh,4rem) 0 0;padding:0;list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.9rem,4.5vh,2.75rem) clamp(1.5rem,3vw,3rem)}
.tech{position:relative;padding-top:1.5rem;border-top:1px solid var(--ivory-16)}
.tech__dot{position:absolute;left:0;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--brass-lift)}
.tech__title{margin:0 0 .6rem;font-family:var(--ui);font-size:clamp(.9375rem,1.1vw,1.0625rem);font-weight:500;color:var(--brass-lift)}
.tech__body{margin:0;font-size:clamp(.8125rem,.65rem + .35vw,.9375rem);line-height:1.7;color:var(--ivory-58);text-wrap:pretty}
.tech-practice__close{
  margin:clamp(2.5rem,6vh,4rem) 0 0;padding-top:clamp(1.5rem,3.5vh,2.25rem);
  border-top:1px solid var(--ivory-16);
  font-family:var(--display);font-style:italic;
  font-size:clamp(1.15rem,1.7vw,1.5rem);line-height:1.55;color:var(--ivory);max-width:40ch;
}
@media (min-width:640px){.tech-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1025px){.tech-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ============================================================
   RETAINERSHIP
   ============================================================ */
.retainership{background:var(--paper);color:var(--brown-body);padding:clamp(4.5rem,11vh,8rem) 0;scroll-margin-top:var(--masthead-h)}
.retainership__inner{padding-inline:var(--gutter);display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2.5rem,6vh,4rem)}
.claims{margin:clamp(2rem,5vh,3rem) 0 0;padding:0;list-style:none}
.claims li{
  padding:clamp(.85rem,2vh,1.15rem) 0;border-bottom:1px solid rgba(90,70,48,.22);
  font-size:clamp(.8125rem,.95vw,.9375rem);letter-spacing:.14em;text-transform:uppercase;
  font-weight:500;color:var(--brown-deep);
}
.retainers{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.75rem,4vh,2.5rem) clamp(1.5rem,3vw,3rem)}
.retainer{position:relative;padding-left:1.6rem}
.retainer::before{
  content:"";position:absolute;left:0;top:.35em;width:10px;height:12px;
  background:var(--gold-accent);
  clip-path:polygon(0 0,100% 0,70% 100%,0 100%);
}
.retainer__title{margin:0 0 .55rem;font-family:var(--ui);font-size:clamp(.9375rem,1.05vw,1rem);font-weight:500;color:var(--brown-deep)}
.retainer__body{margin:0;font-size:clamp(.8125rem,.65rem + .35vw,.9375rem);line-height:1.65;color:var(--brown-body);text-wrap:pretty}
.retainership__note{margin:clamp(2rem,5vh,3rem) 0 0;font-size:clamp(.9375rem,.72rem + .4vw,1.0625rem);line-height:1.7;max-width:62ch;text-wrap:pretty}
@media (min-width:640px){.retainers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1025px){
  .retainership__inner{grid-template-columns:minmax(0,40fr) minmax(0,56fr);gap:clamp(2.5rem,5vw,5rem);align-items:start}
}

/* ============================================================
   CLIENT-CENTRIC APPROACH (gold band)
   ============================================================ */
.philosophy{background:var(--brass);color:#4A3414;padding:clamp(4.5rem,11vh,8rem) 0;scroll-margin-top:var(--masthead-h)}
.philosophy__inner{padding-inline:var(--gutter)}
.philosophy__title{color:#2E2008;max-width:20ch}
.philosophy__lede{margin:clamp(1.15rem,3vh,1.75rem) 0 0;font-size:clamp(1.05rem,1.5vw,1.4rem);line-height:1.5;color:#3A2A10;max-width:34ch;text-wrap:pretty}
.philosophy__badge{
  display:inline-block;margin:clamp(1.5rem,3.5vh,2.25rem) 0 0;
  background:var(--ink);color:var(--brass-lift);
  padding:.85rem 1.4rem;
  font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
}
.pillar-grid{margin:clamp(2.25rem,5vh,3.25rem) 0 0;padding:0;list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.75rem,4vh,2.5rem) clamp(2rem,4vw,4rem)}
.pillar{padding-top:1.1rem;border-top:1px solid rgba(58,42,16,.35)}
.pillar__title{margin:0 0 .55rem;font-family:var(--ui);font-size:clamp(.9375rem,1.05vw,1rem);font-weight:500;color:#2E2008}
.pillar__body{margin:0;font-size:clamp(.8125rem,.65rem + .35vw,.9375rem);line-height:1.65;color:#4A3414;text-wrap:pretty}
@media (min-width:900px){.pillar-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ============================================================
   CLIENT ACCOUNTS
   ============================================================ */
.accounts{background:var(--ink);color:var(--ivory);padding:clamp(4.5rem,11vh,8rem) 0;scroll-margin-top:var(--masthead-h)}
.accounts__inner{padding-inline:var(--gutter);display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2.5rem,6vh,4rem)}
.accounts__lede{margin:clamp(1.15rem,3vh,1.75rem) 0 0;font-size:clamp(.9375rem,.72rem + .4vw,1.0625rem);line-height:1.7;color:var(--ivory-58);max-width:44ch;text-wrap:pretty}
.account-grid{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,4.5vh,2.75rem) clamp(1.5rem,3vw,3rem)}
.account__rule{display:block;width:26px;height:2px;background:var(--brass);margin-bottom:1rem}
.account__text{margin:0 0 .9rem;font-size:clamp(.8125rem,.65rem + .35vw,.9375rem);line-height:1.7;color:var(--ivory-58);text-wrap:pretty}
.account__name{margin:0;font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-lift)}
@media (min-width:640px){.account-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1025px){
  .accounts__inner{grid-template-columns:minmax(0,30fr) minmax(0,66fr);gap:clamp(2.5rem,5vw,5rem);align-items:start}
  .account-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{background:var(--paper);color:var(--brown-body);padding:clamp(4.5rem,11vh,8rem) 0;scroll-margin-top:var(--masthead-h)}
.contact__inner{padding-inline:var(--gutter);display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2.5rem,6vh,4rem)}

.enquiry{margin-top:clamp(2rem,5vh,3rem)}
.enquiry__row{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1rem,2.5vw,1.75rem)}
.field{margin:0 0 clamp(1rem,2.5vh,1.5rem)}
.field label,.field legend{
  display:block;margin-bottom:.55rem;
  font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brown-deep);font-weight:500;
}
.field input[type=text],.field input[type=email],.field input[type=tel],
.field input[type=date],.field select,.field textarea{
  width:100%;
  background:#FFFDF8;
  border:1px solid rgba(90,70,48,.28);
  border-radius:2px;
  padding:.85rem .95rem;
  font-family:var(--ui);font-size:.9375rem;color:var(--brown-deep);
  transition:border-color .3s var(--ease-soft);
}
.field textarea{resize:vertical;min-height:8rem}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold-accent);outline:none}
.field--choice{border:0;padding:0;margin:0 0 clamp(1rem,2.5vh,1.5rem)}
.field--choice label{
  display:inline-flex;align-items:center;gap:.5rem;margin:0 1.25rem .4rem 0;
  letter-spacing:.14em;
}
.field--choice input{accent-color:var(--gold-accent)}
.field--consent label{
  display:flex;gap:.65rem;align-items:flex-start;
  letter-spacing:.12em;line-height:1.6;text-transform:uppercase;
}
.field--consent input{margin-top:.15rem;accent-color:var(--gold-accent);flex:none}
.btn--gold{
  background:var(--brass);color:#2E2008;
  padding:1.05rem 1.9rem;border-radius:2px;
  transition:background-color .4s var(--ease-soft),transform .4s var(--ease);
}
.btn--gold:hover{background:var(--brass-lift);transform:translateY(-2px)}
.enquiry__note{
  margin:clamp(1.5rem,3.5vh,2.25rem) 0 0;padding-top:clamp(1rem,2.5vh,1.5rem);
  border-top:1px solid rgba(90,70,48,.22);
  font-size:.75rem;line-height:1.65;color:var(--brown-body);max-width:56ch;
}

.contact__aside{display:flex;flex-direction:column;gap:clamp(1.25rem,3vh,1.75rem)}
.office{padding-top:clamp(1rem,2.5vh,1.4rem);border-top:1px solid rgba(90,70,48,.22)}
.office h3{margin:0 0 .6rem;font-family:var(--ui);font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink);font-weight:500}
.office p{margin:0 0 .35rem;font-size:.9375rem;line-height:1.6;color:var(--brown-deep)}
.office--lines{border-top-color:var(--gold-accent);border-top-width:2px}
.office--lines a{color:var(--gold-ink);font-weight:500}
.office--lines a:hover{text-decoration:underline}
.contact__map{margin-top:.5rem;border:1px solid rgba(90,70,48,.22);overflow:hidden;background:#EFE7D8}
.contact__map iframe{display:block;width:100%;height:clamp(240px,34vh,340px);border:0}

@media (min-width:640px){.enquiry__row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1025px){
  .contact__inner{grid-template-columns:minmax(0,58fr) minmax(0,38fr);gap:clamp(2.5rem,5vw,5rem);align-items:start}
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--ink);color:var(--ivory-72);padding:clamp(3.5rem,9vh,6rem) 0 clamp(2rem,5vh,3rem);border-top:1px solid var(--ivory-10)}
.site-footer__inner{
  padding-inline:var(--gutter);
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,5vh,3rem) clamp(1.5rem,3vw,3rem);
}
.site-footer__mark{
  margin:0 0 .9rem;font-family:var(--display);font-size:1.15rem;
  text-transform:uppercase;letter-spacing:.16em;color:var(--ivory);
}
.site-footer__mark em{font-style:normal;color:var(--brass-lift)}
.site-footer__tag{margin:0 0 1rem;font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-lift)}
.site-footer__blurb{margin:0;font-size:.875rem;line-height:1.7;color:var(--ivory-58);max-width:34ch}
.site-footer__col h2{
  margin:0 0 1.1rem;font-family:var(--ui);font-size:.625rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass-lift);font-weight:500;
}
.site-footer__col ul{margin:0;padding:0;list-style:none}
.site-footer__col li{margin-bottom:.7rem}
.site-footer__col a{font-size:.875rem;color:var(--ivory-72);transition:color .3s var(--ease-soft)}
.site-footer__col a:hover{color:var(--brass-lift)}
.site-footer__contact h3{margin:0 0 .4rem;font-family:var(--ui);font-size:.5938rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ivory-42);font-weight:500}
.site-footer__contact p{margin:0 0 1rem;font-size:.875rem;line-height:1.6;color:var(--ivory-72)}
.site-footer__contact a{color:var(--brass-lift)}

.site-footer__legal{
  margin-top:clamp(2.5rem,6vh,4rem);padding-inline:var(--gutter);
}
.disclaimer{
  margin:0;padding-top:clamp(1.5rem,3.5vh,2.25rem);
  border-top:1px solid var(--ivory-10);
  font-size:.75rem;line-height:1.7;color:var(--ivory-42);max-width:96ch;
}
.disclaimer strong{color:var(--ivory-72)}
.site-footer__base{
  margin-top:clamp(1.25rem,3vh,1.75rem);
  display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:space-between;align-items:center;
}
.site-footer__base p{margin:0;font-size:.75rem;color:var(--ivory-42)}
.site-footer__base ul{display:flex;flex-wrap:wrap;gap:1.25rem;margin:0;padding:0;list-style:none}
.site-footer__base a{font-size:.75rem;color:var(--ivory-58)}
.site-footer__base a:hover{color:var(--brass-lift)}

@media (min-width:700px){
  .site-footer__inner{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1025px){
  .site-footer__inner{grid-template-columns:minmax(0,32fr) minmax(0,20fr) minmax(0,20fr) minmax(0,28fr)}
}

/* ------------------------------------------------------------------
   BRAND LOCKUP — replaces the typeset wordmark now that the real logo
   exists. Height-driven so the lockup keeps its 3:1 ratio.
   ------------------------------------------------------------------ */
.wordmark__logo{
  height:clamp(2.05rem,3.4vh,2.65rem);
  width:auto;display:block;
}
.site-footer__logo{
  width:200px;max-width:100%;height:auto;display:block;
  margin-bottom:1.1rem;
}
.drawer__emblem{
  width:72px;height:auto;display:block;
  margin-bottom:.5rem;
  opacity:0;transform:translateY(10px);
  transition:opacity .6s var(--ease) .06s,transform .6s var(--ease) .06s;
}
.is-open .drawer__emblem{opacity:1;transform:none}
.wordmark__emblem{
  height:clamp(1.85rem,3vh,2.35rem);
  width:auto;display:block;flex:none;
  margin-right:.15rem;
}

/* --- Our Vision: aims beneath the statement ------------------------- */
.creed__aims{
  margin:clamp(1.5rem,3.5vh,2.25rem) 0 0;padding:0;list-style:none;
  max-width:46ch;
}
.creed__aims li{
  padding:clamp(.85rem,2vh,1.15rem) 0;
  border-top:1px solid rgba(58,42,16,.3);
  font-size:clamp(.875rem,.7rem + .35vw,.9688rem);
  line-height:1.6;color:#4A3414;text-wrap:pretty;
}
.creed__aims-k{
  display:block;margin-bottom:.35rem;
  font-size:.5938rem;letter-spacing:.22em;text-transform:uppercase;
  color:#6B4E22;font-weight:500;
}

/* --- Our Core Philosophy: figure beside the statement ---------------- */
.philosophy__figure{
  margin:clamp(2rem,5vh,3rem) 0 0;
  overflow:hidden;
  background:#241A10;
}
.philosophy__figure img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3}

@media (min-width:1025px){
  /* Statement left, figure right; the pillars still run the full width beneath. */
  .philosophy__inner{
    display:grid;
    grid-template-columns:minmax(0,52fr) minmax(0,42fr);
    gap:0 clamp(2.5rem,5vw,5rem);
    align-items:start;
  }
  .philosophy__inner > .section-label,
  .philosophy__title,
  .philosophy__lede,
  .philosophy__badge{grid-column:1}
  .philosophy__figure{
    grid-column:2;grid-row:1 / span 4;
    margin-top:.35rem;
    align-self:stretch;
  }
  .philosophy__figure img{height:100%;aspect-ratio:auto;min-height:22rem}
  .pillar-grid{grid-column:1 / -1}
}

/* ============================================================
   SECTION FIGURES — added to the sections that had none.
   Same device throughout: head and copy on one side, a graded plate
   on the other, and the grid running full width beneath.
   ============================================================ */
.milestones__plate,
.principles__figure,
.method__figure,
.tech-practice__figure,
.retainership__figure,
.accounts__figure{
  margin:clamp(2rem,5vh,3rem) 0 0;
  overflow:hidden;
  background:#241A10;
}
.milestones__plate img,
.principles__figure img,
.method__figure img,
.tech-practice__figure img,
.retainership__figure img,
.accounts__figure img{
  width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3;
}
/* the milestones plate is a wide band, not a side figure */
.milestones__plate img{aspect-ratio:3.2/1}
.milestones__plate{margin-top:clamp(2.5rem,6vh,4rem)}

@media (min-width:1025px){
  /* PRINCIPLES */
  .principles__inner{
    display:grid;grid-template-columns:minmax(0,56fr) minmax(0,38fr);
    gap:0 clamp(2.5rem,5vw,5rem);align-items:start;
  }
  .principles__inner > .section-label,
  .principles__inner > .band__title,
  .principles__lede{grid-column:1}
  .principles__figure{grid-column:2;grid-row:1 / span 3;margin-top:.35rem;align-self:stretch}
  .principles__figure img{height:100%;aspect-ratio:auto;min-height:20rem}
  .principle-grid{grid-column:1 / -1}

  /* METHOD */
  .method__inner{
    display:grid;grid-template-columns:minmax(0,60fr) minmax(0,34fr);
    gap:0 clamp(2.5rem,5vw,5rem);align-items:start;
  }
  .method__inner > .section-label,
  .method__inner > .band__title{grid-column:1}
  .method__figure{grid-column:2;grid-row:1 / span 2;margin-top:.35rem;align-self:stretch}
  .method__figure img{height:100%;aspect-ratio:auto;min-height:15rem}
  .steps{grid-column:1 / -1}

  /* TECHNOLOGY */
  .tech-practice__inner{
    display:grid;grid-template-columns:minmax(0,60fr) minmax(0,34fr);
    gap:0 clamp(2.5rem,5vw,5rem);align-items:start;
  }
  .tech-practice__inner > .section-label,
  .tech-practice__inner > .band__title,
  .tech-practice__sub{grid-column:1}
  .tech-practice__figure{grid-column:2;grid-row:1 / span 3;margin-top:.35rem;align-self:stretch}
  .tech-practice__figure img{height:100%;aspect-ratio:auto;min-height:16rem}
  .tech-grid,.tech-practice__close{grid-column:1 / -1}

  /* RETAINERSHIP + ACCOUNTS keep their existing two-column shells; the figure
     simply fills the space under the left-hand column. */
  .retainership__figure img{aspect-ratio:4/3}
  .accounts__figure img{aspect-ratio:4/3}
}