/* =========================================================================
   Patti Miller, design system
   Palette: bone ground, ink type, gold hairline, pacific + terracotta accents
   Type:    Bodoni Moda (editorial display) / Inter (interface + body)
   ========================================================================= */

/* ---------------------------------------------------------------- tokens */
:root{
  --bone:      #F9F7F2;   /* ivory        */
  --bone-2:    #F2ECE2;
  --bone-3:    #E8DFD3;   /* pale sand    */
  --ink:       #2C2C2C;   /* deep charcoal*/
  --ink-2:     #4A4844;
  --muted:     #857E74;
  --line:      rgba(44,44,44,.15);
  --line-soft: rgba(44,44,44,.08);
  --gold:      #C9A86C;   /* soft gold, rules, borders, decoration */
  --gold-ink:  #8A6E3C;   /* the same gold, darkened for TEXT       */
  --gold-lt:   #DFC79B;
  --sky:       #A8C5D4;   /* soft sky     */
  --terracotta:#C08155;
  --pacific:   #24384A;
  --pacific-d: #16232F;

  --serif: 'Bodoni Moda','Didot','Bodoni MT','Playfair Display',Georgia,'Times New Roman',serif;
  --sans:  'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;

  --pad:  clamp(1.25rem, 5.5vw, 7rem);
  --maxw: 1560px;
  --sec:  clamp(6rem, 14vh, 12rem);      /* vertical section rhythm */

  --ease:   cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);
}

/* ------------------------------------------------------------ foundation */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem,.96rem + .22vw,1.125rem);
  line-height:1.72;
  font-weight:400;
  letter-spacing:.002em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* film grain over the entire site, the thing that makes flat colour feel shot */
body::after{
  content:"";
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.055; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* height:auto is load-bearing, without it the HTML height attribute
   overrides every aspect-ratio below and images render at full size. */
img,svg{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--ink); color:var(--bone); }

:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; border-radius:2px; }

.shell{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ----------------------------------------------------------- typography  */
.display,h1,h2,h3{
  font-family:var(--serif);
  font-weight:400;
  font-optical-sizing:auto;
  letter-spacing:-.018em;
  line-height:.98;
  margin:0;
  text-wrap:balance;
}
.d1{ font-size:clamp(3.6rem,12.5vw,12rem); line-height:.86; letter-spacing:-.035em; }
.d2{ font-size:clamp(2.6rem,7vw,6.4rem);  line-height:.94; letter-spacing:-.028em; }
.d3{ font-size:clamp(2rem,4.2vw,3.6rem);  line-height:1.02;letter-spacing:-.022em; }
.d4{ font-size:clamp(1.5rem,2.4vw,2.2rem);line-height:1.14;letter-spacing:-.015em; }

.italic{ font-style:italic; }
.lede{
  font-size:clamp(1.2rem,1.02rem + .78vw,1.7rem);
  line-height:1.52; font-weight:300; color:var(--ink-2);
  letter-spacing:-.006em; text-wrap:pretty;
}
.body-lg{ font-size:clamp(1.05rem,1rem + .3vw,1.24rem); line-height:1.75; color:var(--ink-2); }
p{ margin:0 0 1.15em; text-wrap:pretty; }
p:last-child{ margin-bottom:0; }

.eyebrow{
  font-family:var(--sans);
  font-size:.7rem; font-weight:500; text-transform:uppercase;
  letter-spacing:.26em; color:var(--muted);
  display:flex; align-items:center; gap:.9rem; margin:0 0 1.6rem;
}
.eyebrow::before{
  content:""; width:clamp(24px,3vw,48px); height:1px; background:var(--gold); flex:none;
}
.eyebrow--plain::before{ display:none; }
.num{
  font-family:var(--serif); font-size:.92rem; letter-spacing:.14em;
  color:var(--gold-ink); font-feature-settings:"lnum";
}

/* ---------------------------------------------------------------- links  */
.sweep{
  position:relative; display:inline-block; padding-bottom:2px;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .5s var(--ease);
}
.sweep:hover,.sweep:focus-visible{ background-size:100% 1px; }
.sweep--on{ background-size:100% 1px; }
.sweep--on:hover{ background-size:0% 1px; background-position:100% 100%; }

.btn{
  display:inline-flex; align-items:center; gap:.85rem;
  font-family:var(--sans); font-size:.72rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.2em;
  padding:1.15rem 2rem; border:1px solid var(--ink);
  background:var(--ink); color:var(--bone);
  position:relative; overflow:hidden; isolation:isolate;
  transition:color .45s var(--ease),border-color .45s var(--ease);
  cursor:pointer;
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--bone);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .5s var(--ease);
}
.btn:hover::before,.btn:focus-visible::before{ transform:scaleY(1); }
.btn:hover,.btn:focus-visible{ color:var(--ink); }
.btn__arrow{ transition:transform .5s var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(5px); }

.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost::before{ background:var(--ink); }
.btn--ghost:hover,.btn--ghost:focus-visible{ color:var(--bone); border-color:var(--ink); }

.btn--light{ background:transparent; color:var(--bone); border-color:rgba(249,247,242,.32); }
.btn--light::before{ background:var(--bone); }
.btn--light:hover,.btn--light:focus-visible{ color:var(--ink); border-color:var(--bone); }

.cta-row{ display:flex; flex-wrap:wrap; gap:1rem 1.4rem; align-items:center; }

/* -------------------------------------------------------------- reveals  */
/* Gated on .js (set inline in <head>), with no JavaScript the page is
   simply visible rather than invisible. */
.js [data-reveal]{
  opacity:0; transform:translateY(26px);
  transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);
  transition-delay:var(--d,0ms);
}
.js [data-reveal].is-in{ opacity:1; transform:none; }

.line-mask{ display:block; overflow:hidden; }
.line-mask > span{ display:block; }
.js .line-mask > span{
  transform:translateY(102%);
  transition:transform 1.15s var(--ease); transition-delay:var(--d,0ms);
}
.js .is-in .line-mask > span,.js .line-mask.is-in > span{ transform:none; }

.rule{ height:1px; background:var(--line); border:0; margin:0; }
.rule--gold{ background:linear-gradient(90deg,var(--gold),transparent); }

@media (prefers-reduced-motion:reduce){
  .js [data-reveal],.js [data-reveal].is-in{ opacity:1; transform:none; transition:none; }
  .js .line-mask > span{ transform:none !important; transition:none; }
}

/* ------------------------------------------------------------------ nav  */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  transition:background .6s var(--ease),border-color .6s var(--ease),
             backdrop-filter .6s var(--ease),transform .55s var(--ease);
  border-bottom:1px solid transparent;
  color:var(--bone);
}
.nav__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem; padding-block:clamp(1.1rem,2vw,1.7rem);
  position:relative; z-index:2;
}
.nav.is-solid{
  background:rgba(249,247,242,.86);
  backdrop-filter:saturate(160%) blur(16px);
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  border-bottom-color:var(--line-soft);
  color:var(--ink);
}
.nav.is-hidden{ transform:translateY(-102%); }
.nav--solid-init{
  background:rgba(249,247,242,.86);
  backdrop-filter:saturate(160%) blur(16px);
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  border-bottom-color:var(--line-soft); color:var(--ink);
}

.brand{ display:flex; align-items:baseline; gap:.55rem; }
.brand__name{
  font-family:var(--serif); font-size:clamp(1.05rem,1.5vw,1.35rem);
  letter-spacing:.16em; text-transform:uppercase; font-weight:500;
}
.brand__cmp{
  font-family:var(--sans); font-size:.58rem; font-weight:500;
  letter-spacing:.24em; opacity:.72; transform:translateY(-.35em);
}

.nav__links{ display:flex; align-items:center; gap:clamp(1.4rem,2.6vw,2.8rem); }
.nav__link{
  font-size:.72rem; font-weight:500; text-transform:uppercase; letter-spacing:.2em;
}
.nav__link[aria-current="page"]{ color:var(--gold-ink); }
.nav__cta{
  font-size:.68rem; font-weight:500; text-transform:uppercase; letter-spacing:.2em;
  border:1px solid currentColor; padding:.78rem 1.35rem;
  transition:background .4s var(--ease),color .4s var(--ease);
}
.nav__cta:hover{ background:currentColor; }
.nav.is-solid .nav__cta:hover,.nav--solid-init .nav__cta:hover{ color:var(--bone); }
.nav:not(.is-solid) .nav__cta:hover{ color:var(--ink); }

.nav__toggle{
  display:none; background:none; border:0; color:inherit; cursor:pointer;
  padding:.5rem; margin-right:-.5rem;
}
.nav__toggle span{
  display:block; width:26px; height:1px; background:currentColor;
  transition:transform .45s var(--ease),opacity .3s var(--ease);
}
.nav__toggle span+span{ margin-top:7px; }
.nav.is-open .nav__toggle span:first-child{ transform:translateY(4px) rotate(45deg); }
.nav.is-open .nav__toggle span:last-child{ transform:translateY(-4px) rotate(-45deg); }

@media (max-width:860px){
  .nav__toggle{ display:block; }
  /* The overlay sits ABOVE the bar's own background. It used to be z-index:-1,
     which painted it behind the translucent header on any page where the
     header had a background from load, the menu opened invisibly. */
  .nav__links{
    position:fixed; inset:0; z-index:1;
    flex-direction:column; justify-content:center; align-items:flex-start;
    gap:2rem; padding:0 var(--pad);
    background:var(--bone); color:var(--ink);
    clip-path:inset(0 0 100% 0);
    transition:clip-path .7s var(--ease);
    overflow-y:auto; overscroll-behavior:contain;
  }
  .nav.is-open .nav__links{ clip-path:inset(0 0 0 0); }
  .nav.is-open{ color:var(--ink); }
  /* while open the bar itself must not tint or blur the overlay behind it */
  .nav.is-open,
  .nav.is-open.is-solid,
  .nav--solid-init.is-open{
    background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none;
    border-bottom-color:transparent;
  }
  .nav.is-open.is-hidden{ transform:none; }
  .nav__link{ font-family:var(--serif); font-size:2.2rem; letter-spacing:-.02em; text-transform:none; }
  .nav__cta{ font-size:.72rem; }
}

/* ----------------------------------------------------------------- hero  */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  overflow:hidden; color:var(--bone); isolation:isolate;
}
.hero__media{ position:absolute; inset:-8% 0 -8%; z-index:-2; will-change:transform; }
.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to top,rgba(12,9,6,.72) 0%,rgba(12,9,6,.34) 32%,rgba(12,9,6,0) 62%),
    linear-gradient(to bottom,rgba(12,9,6,.44) 0%,rgba(12,9,6,0) 34%);
}
.hero__light{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,70%) var(--my,45%),
             rgba(255,241,214,.16),transparent 65%);
  transition:opacity .6s var(--ease); mix-blend-mode:screen;
}
.hero__inner{ width:100%; padding-block:clamp(5rem,12vh,9rem) clamp(3.5rem,8vh,6rem); }
.hero .eyebrow{ color:rgba(249,247,242,.82); }
.hero .eyebrow::before{ background:var(--gold-lt); }
.hero__title{
  margin:0 0 clamp(1.6rem,3vw,2.4rem);
  font-size:clamp(2.75rem,8.2vw,8.2rem);
  letter-spacing:-.032em; line-height:.94;
}
.hero__title em{ font-style:italic; letter-spacing:-.045em; }
.hero__foot{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:clamp(2rem,5vw,5rem); margin-top:clamp(2rem,5vw,3.5rem);
}
.hero__lede{
  max-width:46ch; color:rgba(249,247,242,.88); font-weight:300;
  font-size:clamp(1.08rem,.98rem + .5vw,1.42rem); line-height:1.56;
}
.hero__scroll{
  display:flex; align-items:center; gap:.8rem;
  font-size:.62rem; text-transform:uppercase; letter-spacing:.24em;
  color:rgba(249,247,242,.7);
}
.hero__scroll i{
  display:block; width:1px; height:52px; background:rgba(249,247,242,.35);
  position:relative; overflow:hidden;
}
.hero__scroll i::after{
  content:""; position:absolute; inset:0; background:var(--gold-lt);
  animation:drip 2.6s var(--ease-io) infinite;
}
@keyframes drip{
  0%{ transform:translateY(-100%); } 55%,100%{ transform:translateY(100%); }
}
@media (prefers-reduced-motion:reduce){ .hero__scroll i::after{ animation:none; } }

/* -------------------------------------------------------------- sections */
.section{ padding-block:var(--sec); position:relative; }
.section--tight{ padding-block:clamp(4rem,9vh,7rem); }
.section--dark{ background:var(--pacific-d); color:var(--bone); }
.section--dark .lede,.section--dark .body-lg{ color:rgba(249,247,242,.8); }
.section--dark .eyebrow{ color:rgba(249,247,242,.66); }
.section--bone2{ background:var(--bone-2); }

.grid{ display:grid; gap:clamp(2rem,4vw,4.5rem); }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--12{ grid-template-columns:repeat(12,1fr); }
@media (max-width:900px){ .grid--2{ grid-template-columns:1fr; } }

.col-head{ grid-column:1/5; }
.col-body{ grid-column:6/12; }
@media (max-width:900px){ .col-head,.col-body{ grid-column:1/-1; } }

/* ------------------------------------------------------------- manifesto */
.manifesto{ max-width:26ch; }
.manifesto__text{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.65rem,1.1rem + 2.1vw,3.15rem);
  line-height:1.18; letter-spacing:-.022em; color:var(--ink);
  max-width:20ch;
}
.manifesto__text em{ font-style:italic; color:var(--terracotta); }
.manifesto__aside{ max-width:52ch; }

/* ---------------------------------------------------------------- ticker */
.ticker{
  border-block:1px solid var(--line); padding-block:1.35rem;
  overflow:hidden; white-space:nowrap; background:var(--bone);
}
.ticker__track{ display:inline-flex; gap:0; animation:slide 46s linear infinite; }
.ticker:hover .ticker__track{ animation-play-state:paused; }
.ticker__item{
  font-family:var(--serif); font-size:clamp(1rem,1.6vw,1.5rem);
  letter-spacing:.06em; padding-inline:clamp(1.4rem,3vw,2.6rem);
  display:inline-flex; align-items:center; gap:clamp(1.4rem,3vw,2.6rem);
  color:var(--ink-2);
}
.ticker__item::after{ content:"\2022"; color:var(--gold); font-style:normal; }
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .ticker__track{ animation:none; } }

/* --------------------------------------------------------------- pillars */
.pillars{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,6vw,7rem); align-items:start;
}
.pillars__media{
  position:sticky; top:0; height:100svh;
  display:flex; align-items:center;
}
.pillars__frame{
  position:relative; overflow:hidden; background:var(--bone-3);
}
.pillars__frame figure{ position:absolute; inset:0; margin:0; }
.pillars__frame img{ width:100%; height:100%; object-fit:cover; }
.pillars__frame figure{
  opacity:0; transform:scale(1.06);
  transition:opacity 1s var(--ease),transform 1.6s var(--ease);
}
.pillars__frame figure.is-active{ opacity:1; transform:scale(1); }
.pillars__index{
  position:absolute; left:0; bottom:0; z-index:2;
  padding:1rem 1.4rem; background:rgba(249,247,242,.92);
  font-family:var(--serif); font-size:.86rem; letter-spacing:.18em;
}
.pillars__list{ padding-block:clamp(4rem,14vh,11rem); }
.pillar{
  min-height:78svh; display:flex; flex-direction:column; justify-content:center;
  padding-block:clamp(2rem,6vh,4rem);
  border-top:1px solid var(--line);
}
.pillar:first-child{ border-top:0; }
/* These label each of the six areas of practice. They were set small enough
   to be missed on a first read; they now sit clearly below the title that
   follows without competing with it. */
.pillar__num{
  font-family:var(--serif); font-size:clamp(.98rem,.92rem + .22vw,1.16rem);
  letter-spacing:.19em;
  color:var(--gold-ink); margin-bottom:1.5rem; display:block;
}
.pillar__title{ margin:0 0 1.4rem; }
.pillar__body{ max-width:44ch; color:var(--ink-2); }
.pillar__tags{
  list-style:none; margin:2rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.55rem;
}
.pillar__tags li{
  font-size:.66rem; text-transform:uppercase; letter-spacing:.16em;
  border:1px solid var(--line); padding:.5rem .85rem; color:var(--muted);
}
@media (max-width:900px){
  .pillars{ grid-template-columns:1fr; gap:0; }
  .pillars__media{ position:relative; height:auto; margin-bottom:2.5rem; }
  .pillars__list{ padding-block:0; }
  .pillar{ min-height:0; padding-block:3rem; }
}

/* ------------------------------------------------------------------ hess */
.hess{ position:relative; overflow:hidden; color:var(--bone); isolation:isolate; }
.hess__media{ position:absolute; inset:0; z-index:-2; }
.hess__media img{ width:100%; height:100%; object-fit:cover; }
.hess__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg,rgba(11,11,24,.9) 0%,rgba(11,11,24,.62) 46%,rgba(11,11,24,.2) 100%);
}
.hess__inner{ padding-block:clamp(6rem,16vh,11rem); position:relative; }
.hess__grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(2rem,4vw,4rem); }
.hess__lead{ grid-column:1/7; }
.hess__meta{ grid-column:8/13; align-self:end; }
@media (max-width:980px){ .hess__lead,.hess__meta{ grid-column:1/-1; } }
.hess .eyebrow{ color:rgba(249,247,242,.7); }
.hess .eyebrow::before{ background:#D6DE3A; }
.hess__quote{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.35rem,1rem + 1.4vw,2.1rem); line-height:1.3;
  color:var(--bone); margin:0 0 1.6rem; letter-spacing:-.015em;
}
.hess__facts{ list-style:none; margin:0; padding:0; }
.hess__facts li{
  padding:1.15rem 0; border-top:1px solid rgba(249,247,242,.18);
  display:flex; justify-content:space-between; gap:2rem; align-items:baseline;
}
.hess__facts dt,.hess__facts .k{
  font-size:.66rem; text-transform:uppercase; letter-spacing:.2em;
  color:rgba(249,247,242,.55); flex:none;
}
.hess__facts .v{ font-family:var(--serif); font-size:1.05rem; text-align:right; }

/* ---------------------------------------------------------------- legacy */
.legacy{ position:relative; overflow:hidden; color:var(--ink); isolation:isolate; }
.legacy__media{ position:absolute; inset:0; z-index:-2; }
.legacy__media img{ width:100%; height:100%; object-fit:cover; }
.legacy__media::after{
  content:""; position:absolute; inset:0; background:rgba(249,247,242,.55);
}
.legacy__inner{ padding-block:clamp(5rem,12vh,8rem); max-width:62ch; }
.legacy .eyebrow{ color:var(--muted); }

/* --------------------------------------------------------------- process */
.steps{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.step{
  display:grid; grid-template-columns:auto minmax(0,22ch) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,4rem); align-items:start;
  padding-block:clamp(2rem,4vw,3rem); border-top:1px solid var(--line);
}
.step:last-child{ border-bottom:1px solid var(--line); }
.step__n{ font-family:var(--serif); color:var(--gold-ink); font-size:.82rem; letter-spacing:.2em; padding-top:.5rem; }
.step__t{ font-family:var(--serif); font-size:clamp(1.3rem,2.2vw,1.9rem); line-height:1.12; letter-spacing:-.018em; }
.step__d{ color:var(--ink-2); max-width:56ch; }
@media (max-width:820px){
  .step{ grid-template-columns:auto 1fr; }
  .step__d{ grid-column:2/-1; }
}

/* ----------------------------------------------------------------- quote */
.pullquote{ text-align:center; max-width:22ch; margin-inline:auto; }
.pullquote__mark{
  font-family:var(--serif); font-size:clamp(3rem,7vw,6rem);
  color:var(--gold); line-height:.6; display:block; margin-bottom:1.5rem;
}
.pullquote__text{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.7rem,1.1rem + 2.4vw,3.4rem); line-height:1.16;
  letter-spacing:-.024em;
}
.pullquote__by{
  font-family:var(--sans); font-size:.68rem; text-transform:uppercase;
  letter-spacing:.24em; color:var(--muted); margin-top:2.2rem; display:block;
}

/* --------------------------------------------------------------- contact */
.contact{ position:relative; overflow:hidden; isolation:isolate; }
.contact__media{ position:absolute; inset:0; z-index:-2; }
.contact__media img{ width:100%; height:100%; object-fit:cover; }
.contact__inner{ padding-block:clamp(6rem,15vh,10rem); }
.contact__title{ margin:0 0 clamp(2rem,4vw,3rem); max-width:14ch; }
.contact__lines{
  display:grid; gap:clamp(1.5rem,3vw,2.5rem);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  border-top:1px solid var(--line); padding-top:clamp(2rem,4vw,3rem);
}
.contact__k{
  display:block; font-size:.66rem; text-transform:uppercase;
  letter-spacing:.22em; color:var(--muted); margin-bottom:.7rem;
}
.contact__v{
  font-family:var(--serif); font-size:clamp(1.15rem,1.6vw,1.6rem);
  letter-spacing:-.01em; line-height:1.3;
}

/* ---------------------------------------------------------------- footer */
.footer{ background:var(--ink); color:var(--bone); padding-block:clamp(3.5rem,7vw,5.5rem) 2.5rem; }
.footer__top{
  display:flex; flex-wrap:wrap; gap:clamp(2rem,5vw,4rem);
  justify-content:space-between; align-items:flex-start;
  padding-bottom:clamp(2.5rem,5vw,4rem); border-bottom:1px solid rgba(249,247,242,.16);
}
.footer__mark{ display:flex; align-items:center; gap:1rem; color:var(--bone); }
.footer__mark svg{ width:38px; height:38px; }
.footer__word{ font-family:var(--serif); font-size:1.15rem; letter-spacing:.16em; text-transform:uppercase; }
.footer__nav{ display:flex; flex-wrap:wrap; gap:1.6rem 2.4rem; }
.footer__nav a{ font-size:.7rem; text-transform:uppercase; letter-spacing:.2em; color:rgba(249,247,242,.72); }
.footer__nav a:hover{ color:var(--bone); }
.footer__contact{ display:grid; gap:.5rem; font-family:var(--serif); font-size:1.05rem; }
.footer__bottom{
  display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between;
  padding-top:2rem; font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(249,247,242,.5);
}

/* ------------------------------------------------------------ page heros */
.pagehero{
  position:relative; padding-block:clamp(9rem,20vh,14rem) clamp(3rem,7vh,5rem);
  border-bottom:1px solid var(--line); overflow:hidden;
}
.pagehero__inner{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(2rem,4vw,4rem); align-items:end; }
.pagehero__head{ grid-column:1/8; }
.pagehero__aside{ grid-column:9/13; padding-bottom:.8rem; }
@media (max-width:900px){ .pagehero__head,.pagehero__aside{ grid-column:1/-1; } }

/* ------------------------------------------------------- practice detail */
.practice{ border-top:1px solid var(--line); padding-block:clamp(3.5rem,8vw,6.5rem); }
.practice__grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(2rem,4vw,4rem); }
.practice__head{ grid-column:1/5; position:sticky; top:clamp(6rem,12vh,8rem); align-self:start; }
.practice__body{ grid-column:6/13; }
@media (max-width:940px){
  .practice__head{ grid-column:1/-1; position:static; }
  .practice__body{ grid-column:1/-1; }
}
.deliver{ list-style:none; margin:2.5rem 0 0; padding:0; display:grid; gap:0; }
.deliver li{
  padding:1.15rem 0 1.15rem 2rem; border-top:1px solid var(--line);
  position:relative; color:var(--ink-2);
}
.deliver li::before{
  content:""; position:absolute; left:0; top:1.75rem;
  width:9px; height:1px; background:var(--gold);
}
.deliver li:last-child{ border-bottom:1px solid var(--line); }

.fit{
  margin-top:2.5rem; padding:clamp(1.5rem,3vw,2.2rem);
  background:var(--bone-2); border-left:2px solid var(--gold);
}
.fit h4{
  margin:0 0 .7rem; font-family:var(--sans); font-size:.68rem;
  text-transform:uppercase; letter-spacing:.2em; color:var(--muted); font-weight:500;
}
.fit p{ margin:0; color:var(--ink-2); }

/* ----------------------------------------------------------------- about */
.about__grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(2rem,5vw,5rem); align-items:start; }
.about__portrait{ grid-column:1/6; position:sticky; top:clamp(6rem,12vh,8rem); }
.about__portrait figure{ margin:0; position:relative; }
.about__portrait img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.about__portrait figcaption{
  margin-top:1rem; font-size:.66rem; text-transform:uppercase;
  letter-spacing:.2em; color:var(--muted);
}
.about__text{ grid-column:7/13; }
@media (max-width:940px){
  .about__portrait{ grid-column:1/-1; position:static; max-width:440px; }
  .about__text{ grid-column:1/-1; }
}
.creds{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.creds li{ padding:1.1rem 0; border-top:1px solid var(--line); display:flex; gap:1.5rem; justify-content:space-between; align-items:baseline; }
.creds li:last-child{ border-bottom:1px solid var(--line); }
.creds .k{ font-size:.66rem; text-transform:uppercase; letter-spacing:.2em; color:var(--muted); }
.creds .v{ font-family:var(--serif); font-size:1.08rem; text-align:right; }

/* ------------------------------------------------------------- utilities */
.stack-sm > * + *{ margin-top:1rem; }
.stack   > * + *{ margin-top:1.6rem; }
.stack-lg> * + *{ margin-top:clamp(2rem,4vw,3.2rem); }
.mt-lg{ margin-top:clamp(2.5rem,5vw,4rem); }
.mt-md{ margin-top:clamp(1.6rem,3vw,2.4rem); }
.max-52{ max-width:52ch; }
.max-44{ max-width:44ch; }
.max-36{ max-width:36ch; }
.gold{ color:var(--gold-ink); }
.center{ text-align:center; }

/* ------------------------------------------------------------------ form */
.inquiry{ background:#FDFBF7; }
.inquiry__grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(2rem,5vw,5rem); align-items:start; }
.inquiry__head{ grid-column:1/5; }
.inquiry__form{ grid-column:6/13; }
@media (max-width:940px){ .inquiry__head,.inquiry__form{ grid-column:1/-1; } }

.field{ position:relative; margin-bottom:clamp(1.8rem,3.5vw,2.6rem); }
.field__label{
  display:block; font-size:.66rem; text-transform:uppercase;
  letter-spacing:.22em; color:var(--muted); margin-bottom:.85rem;
}
.field input,
.field select,
.field textarea{
  width:100%; border:0; border-bottom:1px solid var(--line);
  background:transparent; padding:.65rem 0 .95rem;
  font-family:var(--serif); font-size:clamp(1.05rem,1.5vw,1.35rem);
  color:var(--ink); line-height:1.4;
  border-radius:0; appearance:none; -webkit-appearance:none;
  transition:border-color .45s var(--ease);
}
.field textarea{ resize:vertical; min-height:5.5rem; }
.field input:focus,
.field select:focus,
.field textarea:focus{ outline:0; border-bottom-color:var(--gold); }
.field input::placeholder,.field textarea::placeholder{ color:#B7ABA0; font-style:italic; }
.field select{
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23B08D57' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .2rem center;
  padding-right:2rem;
}
.field select option{ font-family:var(--sans); font-size:1rem; color:var(--ink); }

.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,3vw,2.5rem); }
@media (max-width:640px){ .form__row{ grid-template-columns:1fr; gap:0; } }
.form__note{
  font-size:.78rem; color:var(--muted); margin-top:1.4rem; max-width:44ch; line-height:1.6;
}
.form__status{
  margin-top:1.4rem; font-size:.82rem; letter-spacing:.02em;
  color:var(--terracotta); min-height:1.2em;
}
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* --------------------------------------------------------- about (teaser) */
.teaser{ position:relative; }
.teaser__grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(2rem,5vw,5rem); align-items:center; }
.teaser__media{ grid-column:1/6; }
.teaser__media img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.teaser__body{ grid-column:7/13; }
@media (max-width:940px){
  .teaser__media{ grid-column:1/-1; max-width:420px; }
  .teaser__body{ grid-column:1/-1; }
}

/* hero media slot also accepts a <video> without further styling */
.hero__media video{ width:100%; height:100%; object-fit:cover; display:block; }
.btn[disabled]{ opacity:.5; pointer-events:none; }

/* HESS runs light-on-dark; its body copy must not inherit the ink defaults */
.hess .body-lg,.hess .lede,.hess p{ color:rgba(249,247,242,.84); }
.hess .hess__quote{ color:var(--bone); }
.hess strong{ color:var(--bone); }

/* the three-word promise under the hero headline */
.hero__triplet{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.05rem,.95rem + .55vw,1.5rem);
  letter-spacing:.02em; color:var(--gold);
  margin:0 0 clamp(1.4rem,3vw,2.2rem);
}

/* -------------------------------------------------------------- timeline */
.timeline{ list-style:none; margin:2.5rem 0 0; padding:0; position:relative; }
.timeline::before{
  content:""; position:absolute; left:0; top:.6rem; bottom:.6rem;
  width:1px; background:linear-gradient(180deg,var(--gold),rgba(201,168,108,.15));
}
.timeline li{ position:relative; padding:0 0 2.2rem 2.2rem; }
.timeline li:last-child{ padding-bottom:0; }
.timeline li::before{
  content:""; position:absolute; left:-3px; top:.62rem;
  width:7px; height:7px; border-radius:50%; background:var(--gold);
}
.timeline .yr{
  display:block; font-family:var(--serif); font-size:.95rem;
  letter-spacing:.16em; color:var(--gold-ink); margin-bottom:.45rem;
}
.timeline .tl-body{ color:var(--ink-2); max-width:52ch; }
.timeline .tl-body strong{ color:var(--ink); font-weight:500; }

/* ------------------------------------------------- responsive refinements */
.pillar__media{ display:none; margin:0 0 2rem; }
.pillar__media img{ width:100%; aspect-ratio:4/5; object-fit:cover; }

.wide-only{ display:inline; }
.narrow-only{ display:none; }

@media (max-width:900px){
  /* the sticky cross-fade is a desktop device, on narrow screens each
     discipline carries its own image instead, so all three are actually seen */
  .pillars__media{ display:none; }
  .pillar__media{ display:block; }
  .pillar{ padding-block:2.5rem 3.5rem; }
}

@media (max-width:620px){
  .wide-only{ display:none; }
  .narrow-only{ display:inline; }

  /* an eyebrow that wraps should keep its rule beside the first line */
  .eyebrow{ align-items:flex-start; }
  .eyebrow::before{ margin-top:.62em; }

  /* stacked calls to action read as a set, not as ragged offcuts */
  .cta-row{ width:100%; }
  .cta-row .btn{ width:100%; justify-content:center; }

  .hero__foot{ gap:1.6rem; }
  .pillar__tags{ gap:.45rem; }
  .pillar__tags li{ font-size:.6rem; padding:.45rem .7rem; }

  /* long addresses must never push the layout sideways */
  .hess__facts .v,.creds .v,.contact__v{ overflow-wrap:anywhere; }
  .hess__facts li,.creds li{ flex-direction:column; gap:.4rem; align-items:flex-start; }
  .hess__facts .v,.creds .v{ text-align:left; }

  .step{ grid-template-columns:auto 1fr; gap:1rem 1.2rem; }
  .timeline li{ padding-left:1.6rem; }
}

/* =========================================================================
   ELEVATION PASS
   Brighter ground, a luminous hero, more air, and interactions that respond.
   Appended last so it wins the cascade over the base rules above.
   ========================================================================= */

:root{
  --sec: clamp(7rem, 17vh, 14rem);          /* more air between movements */
  --sec-airy: clamp(9rem, 24vh, 20rem);     /* for the quiet, held moments  */
}

/* ------------------------------------------------------------ light hero */
.hero{ color:var(--ink); }

.hero__gl{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:-2; display:block;
  opacity:0; transition:opacity 1.4s var(--ease);
}
.hero__gl.is-live{ opacity:1; }

/* A soft bloom behind the type only, the light field stays visible
   everywhere else. Dark charcoal on a luminous ground needs very little help. */
.hero:not(.hero--dark) .hero__scrim{
  background:
    radial-gradient(114% 90% at 4% 46%,
      rgba(252,251,248,.88) 0%, rgba(252,251,248,.60) 30%,
      rgba(252,251,248,.18) 58%, rgba(252,251,248,0) 80%),
    linear-gradient(to bottom,
      rgba(252,251,248,.50) 0%, rgba(252,251,248,0) 18%);
}
@media (max-width:900px){
  /* on narrow screens the type fills the frame, so the bloom becomes vertical */
  .hero:not(.hero--dark) .hero__scrim{
    background:
      linear-gradient(to bottom,
        rgba(252,251,248,.88) 0%, rgba(252,251,248,.72) 46%,
        rgba(252,251,248,.30) 74%, rgba(252,251,248,.05) 100%);
  }
}
.hero:not(.hero--dark) .hero__light{ display:none; }
.hero:not(.hero--dark) .eyebrow{ color:var(--muted); }
.hero:not(.hero--dark) .eyebrow::before{ background:var(--gold); }
.hero:not(.hero--dark) .hero__lede{ color:var(--ink); font-weight:400; }
.hero:not(.hero--dark) .hero__scroll{ color:var(--ink-2); }
.hero:not(.hero--dark) .hero__scroll i{ background:rgba(44,44,44,.22); }
.hero:not(.hero--dark) .hero__scroll i::after{ background:var(--gold); }

/* the display type carries the page, let it dominate */
.hero__title{
  font-size:clamp(2.9rem,8.6vw,9rem);
  letter-spacing:-.036em; line-height:.92;
}
.hero__triplet{ color:var(--gold-ink); opacity:1; }
.hero__inner{ padding-block:clamp(6rem,15vh,11rem) clamp(3.5rem,9vh,7rem); }

/* --------------------------------------------------- nav over a light page */
.nav{ color:var(--ink); }
.nav--over-dark{ color:var(--bone); }
.nav--over-dark.is-solid{ color:var(--ink); }
.nav.is-solid .nav__cta:hover,
.nav--solid-init .nav__cta:hover,
.nav:not(.nav--over-dark) .nav__cta:hover{ color:var(--bone); }
.nav--over-dark:not(.is-solid) .nav__cta:hover{ color:var(--ink); }

.brand{ flex-direction:column; align-items:flex-start; gap:.3rem; }
.brand__role{
  font-family:var(--sans); font-size:.55rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; opacity:.66;
  transform:none;
}
@media (max-width:620px){ .brand__role{ font-size:.5rem; letter-spacing:.2em; } }

/* ------------------------------------------------ hierarchy + breathing  */
.d2{ font-size:clamp(2.7rem,7.4vw,7rem); }
.manifesto__text{ font-size:clamp(1.75rem,1.1rem + 2.4vw,3.6rem); }
.lede{ color:var(--ink-2); }
.body-lg{ color:#4F4C47; }

.section--airy{ padding-block:var(--sec-airy); }

/* the pull quote is a held breath, give it the room to be one */
.pullquote{ max-width:20ch; }
.pullquote__text{ font-size:clamp(1.85rem,1.1rem + 2.9vw,4rem); line-height:1.12; }
.pullquote__mark{ font-size:clamp(3.5rem,8vw,7rem); color:var(--gold-ink); opacity:.6; }
.pullquote__by{ margin-top:clamp(2.4rem,5vw,3.6rem); }

/* --------------------------------------------------- micro-interactions  */
figure img,
.pillar__media img,
.teaser__media img,
.about__portrait img{ transition:transform 1.3s var(--ease); will-change:transform; }
figure:hover img,
.pillar__media:hover img,
.teaser__media:hover img,
.about__portrait figure:hover img{ transform:scale(1.035); }

.pillar__media,.teaser__media,.about__portrait figure,.practice__head figure{
  overflow:hidden; position:relative;
}

.pillar__tags li{ transition:border-color .45s var(--ease),color .45s var(--ease),background .45s var(--ease); }
.pillar__tags li:hover{ border-color:var(--gold); color:var(--ink); background:rgba(201,168,108,.07); }

.step,.deliver li,.creds li{ transition:background .5s var(--ease); }
.step:hover,.deliver li:hover{ background:rgba(201,168,108,.05); }
.step__n{ transition:color .45s var(--ease); }
.step:hover .step__n{ color:var(--terracotta); }

.btn{ transition:color .45s var(--ease),border-color .45s var(--ease),box-shadow .5s var(--ease); }
.btn:hover{ box-shadow:0 14px 40px rgba(44,44,44,.13); }

.fit{ transition:border-color .5s var(--ease),background .5s var(--ease); }
.fit:hover{ border-left-color:var(--terracotta); }

/* ------------------------------------------------------ form refinement  */
.field input,.field select,.field textarea{ transition:border-color .45s var(--ease),background .45s var(--ease); }
.field input:hover,.field textarea:hover,.field select:hover{ border-bottom-color:rgba(44,44,44,.34); }
.field__label{ transition:color .4s var(--ease); }
.field:focus-within .field__label{ color:var(--gold-ink); }

/* the confirmation panel that replaces the form once it is sent */
.form__done{
  display:none; border-top:1px solid var(--line); padding-top:2.4rem;
}
.form__done.is-shown{ display:block; }
.form__done h3{
  font-family:var(--serif); font-size:clamp(1.6rem,3vw,2.4rem);
  line-height:1.1; letter-spacing:-.02em; margin:0 0 1rem;
}
.form__done p{ color:var(--ink-2); max-width:46ch; }
form.is-sent{ display:none; }

/* --------------------------------------------------- practice page rhythm */
.practice--alt{ background:var(--bone-2); }
.practice{ transition:background .6s var(--ease); }

@media (max-width:620px){
  /* let the tagline hold one line rather than orphaning a word */
  .eyebrow{ font-size:.62rem; letter-spacing:.15em; align-items:center; }
  .eyebrow::before{ margin-top:0; width:20px; }
}

/* the closing section gets its own quiet light rather than flat paper */
.inquiry{ position:relative; isolation:isolate; overflow:hidden; }
.inquiry::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:url("../../images/contact-light.svg") center/cover no-repeat;
  opacity:.85;
}

/* The wordmark stands by itself in the bar; the role line would crowd it. */
.nav .brand__role{ display:none; }
.brand{ flex-direction:row; align-items:baseline; gap:.5rem; }

/* belt and braces: a panel meant to be hidden must not depend on this file */
[hidden]{ display:none !important; }

/* =========================================================================
   Smaller, off-axis imagery. The pictures were competing with the type;
   they should punctuate it. Sizes come down and the frame sits off-centre.
   ========================================================================= */
/* Desktop only, declared after the mobile block, so it must be scoped or it
   silently overrides the narrow-screen frame. */
.pillars__index{ font-size:.78rem; padding:.85rem 1.15rem; }

.teaser__media img{ aspect-ratio:4/5; }
.teaser__media{ max-width:400px; }

.about__portrait figure{ max-width:380px; }
.about__portrait img{ aspect-ratio:4/5; }

.practice__head figure{ max-width:300px; }
.practice__head figure img{ aspect-ratio:1/1; object-fit:cover; }

@media (max-width:900px){
  /* landscape crops on narrow screens, a tall image costs a whole thumb-scroll */
  .pillar__media img{ aspect-ratio:3/2; }
  .pillar__media{ max-width:none; margin-bottom:1.8rem; }
  .teaser__media{ max-width:320px; }
  .about__portrait figure{ max-width:300px; }
  .practice__head figure{ max-width:240px; }
}

/* ------------------------------------------------------------- HESS mark */
.hero @media (max-width:620px){
  }

/* ------------------------------------------------- sub-pillars of a practice */
.subs{ margin-top:clamp(2.6rem,5vw,3.6rem); }
.sub{ padding:clamp(1.7rem,3vw,2.3rem) 0; border-top:1px solid var(--line); }
.sub:last-child{ border-bottom:1px solid var(--line); }
.sub__k{
  display:block; font-size:.63rem; font-weight:500; text-transform:uppercase;
  letter-spacing:.22em; color:var(--gold-ink); margin-bottom:.85rem;
}
.sub__t{
  font-family:var(--serif); font-size:clamp(1.3rem,2.1vw,1.8rem);
  line-height:1.13; letter-spacing:-.016em; margin:0 0 .95rem; font-weight:400;
}
.sub p{ color:#4F4C47; max-width:58ch; margin:0; }

/* The overlay is a child of the bar row, so the wordmark and the toggle need
   to outrank it, otherwise the open menu paints over its own close button. */
.brand,.nav__toggle{ position:relative; z-index:3; }

/* The elevation pass set .hero{color:ink} for the light home hero, which also
   hit the dark HESS hero, charcoal type on violet. Restore it explicitly. */
.hero--dark{ color:var(--bone); }
.hero--dark .hero__title,
.hero--dark .d1,.hero--dark .d2,.hero--dark h1{ color:var(--bone); }
.hero--dark .hero__lede{ color:rgba(249,247,242,.90); }
.hero--dark .eyebrow{ color:rgba(249,247,242,.80); }
.hero--dark .eyebrow::before{ background:var(--gold-lt); }
.hero--dark .hero--dark .hero__scrim{
  background:
    linear-gradient(100deg, rgba(14,12,28,.80) 0%, rgba(14,12,28,.58) 38%,
                    rgba(14,12,28,.24) 70%, rgba(14,12,28,.10) 100%),
    linear-gradient(to bottom, rgba(14,12,28,.42) 0%, rgba(14,12,28,0) 26%);
}

/* =========================================================================
   THE LIVING PIECE
   Sticky stacking on every screen, apertures that open, and the hero's
   palette deepening as the page descends.
   ========================================================================= */

/* ------------------------------------------- colour spine (home page order) */
.spine-1{ background:#FCFBF8; }
.spine-2{ background:#F8F4EC; }
.spine-3{ background:#F4EDE0; }
.spine-4{ background:#EFE5D3; }
.spine-5{ background:#E9DCC5; }
.spine-2 .pillars__media,
.spine-2 .ticker{ background:#F8F4EC; }

/* -------------------------------------- sticky stacking, now also on mobile */
@media (max-width:900px){
  .pillars{ grid-template-columns:1fr; gap:0; }

  /* the frame pins under the header and the copy travels beneath it, the desktop choreography, rotated ninety degrees */
  .pillars__media{
    position:sticky; top:0; z-index:3;
    height:auto; margin:0; display:block;
    padding:calc(3.6rem + env(safe-area-inset-top)) 0 1.1rem;
    /* MUST stay opaque: the copy scrolls behind this panel. `inherit` was
       resolving to transparent on any section outside the colour spine, and
       the text then read straight through the artwork. Paint it explicitly;
       the .spine-* rules below re-tint it to match their own ground. */
    background:var(--bone);
  }
  .pillars__list{ position:relative; z-index:1; padding-block:0 1rem; }
  .pillar{ min-height:0; padding-block:2.6rem 3.4rem; }
  .pillar__media{ display:none; }          /* the sticky frame carries it now */
  .pillars__index{ font-size:.68rem; padding:.6rem .9rem; }
}

/* the cross-fade gets a longer, softer hand-off */
.pillars__frame figure{
  transition:opacity 1.25s var(--ease), transform 2s var(--ease);
  transform:scale(1.05);
}
.pillars__frame figure.is-active{ transform:scale(1); }

/* --------------------------------------------------- apertures that open */
.js [data-aperture]{
  clip-path:inset(16% 22% 16% 22%);
  transition:clip-path 1.7s var(--ease);
  transition-delay:var(--d,0ms);
}
.js [data-aperture].is-in,
.js .is-in [data-aperture]{ clip-path:inset(0% 0% 0% 0%); }
@media (prefers-reduced-motion:reduce){
  .js [data-aperture]{ clip-path:none !important; transition:none; }
}

/* a shallow unfold, like a sheet settling flat */
.section,.pagehero,.teaser,.inquiry{ perspective:1800px; }
.js [data-reveal]{ transform:translateY(26px) rotateX(4.5deg); transform-origin:50% 0%; }
.js [data-reveal].is-in{ transform:none; }

/* ------------------------------------------------------------ the ticker */
.ticker{
  border-block:1px solid var(--line);
  padding-block:clamp(1.6rem,3vw,2.4rem);
  overflow:hidden; white-space:nowrap;
}
.ticker__track{ animation-duration:78s; }
.ticker__item{
  display:inline-flex; flex-direction:column; gap:.42rem;
  padding-inline:clamp(1.8rem,3.4vw,3.4rem);
  border-right:1px solid var(--line-soft);
  vertical-align:middle;
}
.ticker__item::after{ content:none; }
.ticker__item b{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.15rem,1.9vw,1.75rem); letter-spacing:-.014em;
  color:var(--ink); line-height:1.05;
}
.ticker__item i{
  font-style:normal; font-family:var(--sans);
  font-size:.63rem; text-transform:uppercase; letter-spacing:.2em;
  color:var(--muted);
}
.ticker__item b::first-letter{ color:var(--gold-ink); }

/* gold reads as type only on light ground; on the violet hero use the light one */
.nav--over-dark .nav__link[aria-current="page"]{ color:var(--gold-lt); }
.hero--dark .num,.hero--dark .step__n{ color:var(--gold-lt); }

@media (max-width:900px){
  /* copy should dissolve under the pinned frame, not be sliced by it */
  .pillars__media{ padding-top:calc(4.1rem + env(safe-area-inset-top)); }
  .spine-2 .pillars__media::after{
    content:""; position:absolute; left:0; right:0; top:100%; height:2.1rem;
    background:linear-gradient(#F8F4EC, rgba(248,244,236,0));
    pointer-events:none;
  }
}

/* =========================================================================
   TRANSFORMING FRAMES + BACKGROUND DEPTH
   The pinned frame changes shape as the disciplines advance, and every
   section carries two soft colour blooms behind its content so the page has
   depth rather than flat paper.
   ========================================================================= */

/* NB: no position:relative here, .pillars__media is already sticky, which is
   a positioned element, so ::before anchors to it. Setting relative would
   silently kill the sticky stacking. */

.pillars__frame{ position:relative; z-index:1; }

/* The frame stays one quiet rectangle. The arches live in the artwork now, a frame that changes silhouette as you scroll fought the images instead of
   holding them. */
.pillars__frame{ border-radius:0; }

/* ------------------------------------------- background depth per section */
.section,.teaser,.inquiry,.pagehero{ position:relative; isolation:isolate; }
.section::before,.pagehero::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(58% 48% at 80% 16%, rgba(201,168,108,.13), transparent 70%),
    radial-gradient(52% 46% at 6% 84%, rgba(168,197,212,.14), transparent 74%);
}
.spine-3::before{
  background:
    radial-gradient(56% 46% at 14% 18%, rgba(201,168,108,.17), transparent 72%),
    radial-gradient(60% 50% at 88% 78%, rgba(192,129,85,.10), transparent 74%);
}
.spine-4::before{
  background:
    radial-gradient(62% 52% at 82% 22%, rgba(192,129,85,.13), transparent 72%),
    radial-gradient(54% 46% at 10% 80%, rgba(201,168,108,.18), transparent 74%);
}
.spine-5::before{
  background:
    radial-gradient(64% 54% at 20% 26%, rgba(192,129,85,.15), transparent 70%),
    radial-gradient(58% 50% at 84% 76%, rgba(74,63,140,.07), transparent 74%);
}
.section--dark::before,.hess::before,.legacy::before{ background:none; }

/* =========================================================================
   HESS, repainted
   The deep violet was fighting the warm sand sections. It is now a cool
   lavender pastel with the mark's cyan and chartreuse used only as accents, which means this whole surface flips to dark type on light.
   ========================================================================= */
.hess{ color:var(--ink); }
.hess .body-lg,.hess .lede,.hess p{ color:#4F4C47; }
.hess .hess__quote{ color:var(--ink); }
.hess strong{ color:var(--ink); }
.hess .eyebrow{ color:var(--muted); }
.hess .eyebrow::before{ background:#7C6DB4; }
.hess__media::after{
  background:
    linear-gradient(100deg, rgba(250,248,254,.90) 0%, rgba(250,248,254,.66) 34%,
                    rgba(250,248,254,.22) 66%, rgba(250,248,254,0) 92%),
    linear-gradient(to bottom, rgba(250,248,254,.50) 0%, rgba(250,248,254,0) 22%);
}
.hess__facts li{ border-top-color:rgba(44,44,44,.16); }
.hess__facts .k{ color:var(--muted); }
.hess__facts .v{ color:var(--ink); }
.hess__facts a{ color:var(--ink); }

@media (max-width:900px){
  /* on narrow screens the copy fills the frame, so the wash goes vertical */
  .hess__media::after{
    background:linear-gradient(to bottom,
      rgba(250,248,254,.86) 0%, rgba(250,248,254,.70) 46%,
      rgba(250,248,254,.34) 76%, rgba(250,248,254,.10) 100%);
  }
}

/* =========================================================================
   SCALE
   The artwork was sitting at 84% of a half column and capped at 58svh, too
   small to carry a page. It now takes the larger share of the split and fills
   the frame, on both breakpoints.
   ========================================================================= */

/* the supporting figures were similarly under-scaled */
.teaser__media{ max-width:none; }
.teaser__grid{ grid-template-columns:repeat(12,1fr); }
.teaser__media{ grid-column:1/7; }
.teaser__body{ grid-column:8/13; }

.about__portrait figure{ max-width:none; }
.practice__head figure{ max-width:none; }
.practice__head figure img{ aspect-ratio:4/5; }

@media (max-width:940px){
  .teaser__media{ grid-column:1/-1; max-width:520px; }
  .teaser__body{ grid-column:1/-1; }
  .about__portrait figure{ max-width:520px; }
  .practice__head figure{ max-width:420px; }
}

/* ------------------------------------------------------- the HESS wordmark */
.hess__wordmark{
  display:block; margin:0 0 clamp(1.4rem,3vw,2.2rem);
  font-family:var(--serif); font-weight:400;
  font-size:clamp(3.4rem,9vw,8.5rem);
  line-height:.86; letter-spacing:.22em; text-indent:.22em;
  color:#6E5FA8; opacity:.92;
  position:relative;
}
.hess__wordmark span{
  display:inline-block;
  background:linear-gradient(160deg,#8579B8 0%,#6E5FA8 46%,#5B4F96 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:#6E5FA8;
}
.hess__sub{
  font-size:.66rem; font-weight:500; text-transform:uppercase;
  letter-spacing:.28em; color:var(--muted);
  margin:0 0 clamp(1.8rem,3.5vw,2.6rem);
}
@media (max-width:620px){
  .hess__wordmark{ font-size:clamp(2.8rem,17vw,4.4rem); letter-spacing:.18em; text-indent:.18em; }
  .hess__sub{ font-size:.6rem; letter-spacing:.22em; }
}

/* the accents, echoed into the surrounding type */
.hess .eyebrow::before{ background:var(--gold); }
.hess__facts li:nth-child(odd){ border-top-color:rgba(143,211,244,.42); }
.hess__facts li:nth-child(even){ border-top-color:rgba(221,228,122,.48); }

/* =========================================================================
   THE ABOUT PAGE WALK
   It opens on the portrait's warm sand and moves a step through the palette
   with each section, clay, blush, then a closing mist that answers HESS.
   Each tint is a whisper; the movement is only felt on the way down.
   ========================================================================= */
.hue-sand { background:#FBF7EF; }
.hue-clay { background:#FAF3E9; }
.hue-blush{ background:#FAF1EC; }
.hue-sage { background:#F5F8F1; }
.hue-shore{ background:#F1F5F8; }
.hue-mist { background:#F5F3FB; }

/* the closing section keeps the legacy measure without the legacy artwork */
.hue-mist .legacy__inner{
  padding-block:0; max-width:62ch; color:var(--ink);
}
.hue-mist .legacy__inner .body-lg{ color:#4F4C47; }
.hue-mist .eyebrow{ color:var(--muted); }
.hue-mist .eyebrow::before{ background:var(--gold); }

/* blooms tuned to each step so the depth follows the hue */
.hue-clay::before{
  background:
    radial-gradient(58% 48% at 82% 16%, rgba(201,168,108,.14), transparent 70%),
    radial-gradient(52% 46% at 6% 84%, rgba(207,165,130,.12), transparent 74%);
}
.hue-blush::before{
  background:
    radial-gradient(60% 50% at 18% 22%, rgba(211,172,156,.16), transparent 72%),
    radial-gradient(56% 48% at 86% 78%, rgba(201,168,108,.12), transparent 74%);
}
.hue-mist::before{
  background:
    radial-gradient(60% 50% at 78% 20%, rgba(143,211,244,.14), transparent 72%),
    radial-gradient(56% 48% at 10% 80%, rgba(124,109,180,.12), transparent 74%);
}

/* ----------------------------------------------------- the working principles */
.rules{ list-style:none; margin:0; padding:0; }
.rule-item{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:clamp(1.6rem,4vw,4rem); align-items:baseline;
  padding-block:clamp(1.8rem,3.6vw,2.8rem);
  border-top:1px solid var(--line);
  transition:background .5s var(--ease);
}
.rule-item:last-child{ border-bottom:1px solid var(--line); }
.rule-item:hover{ background:rgba(201,168,108,.07); }
.rule-item__n{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.8rem,3.4vw,3rem); line-height:1;
  color:var(--gold-ink); letter-spacing:.02em;
  min-width:2.2ch;
}
.rule-item:hover .rule-item__n{ color:var(--terracotta); }
.rule-item__t{
  margin:0; font-family:var(--serif); font-weight:400;
  font-size:clamp(1.15rem,.95rem + 1vw,1.9rem);
  line-height:1.28; letter-spacing:-.014em;
  color:var(--ink); max-width:44ch;
}
@media (max-width:620px){
  .rule-item{ gap:1rem; padding-block:1.5rem; }
  .rule-item__n{ font-size:1.5rem; }
}

/* 20ch at 4rem broke a fourteen-word quote into six lines. Wider measure,
   slightly smaller maximum, it reads as a statement, not a column. */
.pullquote{ max-width:24ch; }
.pullquote__text{ font-size:clamp(1.7rem,1.05rem + 2.3vw,3.3rem); line-height:1.16; }
@media (max-width:620px){ .pullquote{ max-width:18ch; } }

/* =========================================================================
   SCALE, again, the artwork is among the first things anyone sees, so it
   gets the room to land. Larger on desktop, and materially larger on mobile,
   where it had been reduced to a letterbox.
   ========================================================================= */

/* =========================================================================
   ARCHITECTURAL APERTURES
   A vocabulary of built forms, not organic ones: the Roman arch, the shallow
   segmental arch, the oculus, the battered pylon, the chamfered opening.
   Each element keeps one silhouette permanently, nothing morphs on scroll.
   ========================================================================= */
.shape-arch,.shape-segmental,.shape-oculus,.shape-pylon,.shape-chamfer{
  overflow:hidden; position:relative;
}

/* the Roman arch, the entrance */
.shape-arch{ border-radius:50% 50% 2% 2% / 40% 40% 1.5% 1.5%; }

/* the segmental arch, a shallower, wider span */
.shape-segmental{ border-radius:50% 50% 2% 2% / 18% 18% 1.5% 1.5%; }

/* the oculus */
.shape-oculus{ border-radius:50%; }

/* the pylon, battered walls, wider at the base */
.shape-pylon{ clip-path:polygon(9% 0, 91% 0, 100% 100%, 0 100%); }

/* the chamfered opening, the modern museum doorway */
.shape-chamfer{ clip-path:polygon(0 7%, 7% 0, 93% 0, 100% 7%, 100% 100%, 0 100%); }

/* a hairline reveal inside the opening, the way stone meets glass */
.shape-arch::after,.shape-segmental::after,.shape-oculus::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(201,168,108,.32);
}

/* the pinned frame is the entrance arch, permanently */
.pillars__frame{ border-radius:3px; }
.pillars__frame::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(201,168,108,.34);
}
.pillars__index{ z-index:3; }

.teaser__media img{ border-radius:0; clip-path:polygon(0 6%, 6% 0, 94% 0, 100% 6%, 100% 100%, 0 100%); }
.about__portrait img{ border-radius:50% 50% 2% 2% / 40% 40% 1.5% 1.5%; }

/* the three disciplines, three different openings */
.practice__head figure img{ border-radius:4px; }
.practice--alt .practice__head figure img{
  border-radius:0; clip-path:polygon(8% 0, 92% 0, 100% 100%, 0 100%);
}
.practice:last-of-type .practice__head figure img{
  border-radius:50%; clip-path:none;
}

@media (max-width:620px){
  .pillars__frame{ border-radius:3px; }
}

/* ------------------------------------------------ the About page, in warm */
.hue-amber{ background:#FCF7EC; }
.hue-linen{ background:#FBF8F2; }
.hue-amber::before{
  background:
    radial-gradient(58% 48% at 80% 18%, rgba(201,168,108,.18), transparent 70%),
    radial-gradient(54% 46% at 8% 82%, rgba(190,136,115,.10), transparent 74%);
}
.about-band{ position:relative; overflow:hidden; isolation:isolate; }
.about-band__media{ position:absolute; inset:0; z-index:-2; }
.about-band__media img{ width:100%; height:100%; object-fit:cover; }
/* The scrim has one job: hold the type. The artwork carries a floor line at
   roughly three-quarters height, and at the old .62-at-40% falloff that line
   ran straight through the last line of copy, a hard rule slicing the text.
   Plateau the ivory across the whole measure, then let it fall away fast so
   the arch and its ground plane still read in the open right-hand third. */
.about-band__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(251,248,242,.95) 0%, rgba(251,248,242,.92) 34%,
                             rgba(251,248,242,.60) 58%, rgba(251,248,242,.12) 84%,
                             rgba(251,248,242,0) 100%);
}
/* .about-band__inner is also a .shell, max-width there narrowed the shell
   itself and its auto margins centred the copy in the band, adrift of the
   scrim that was built to protect it. Keep the shell full width; put the
   measure on the children so the text sits at the left padding edge. */
.about-band__inner{ padding-block:clamp(5.5rem,13vh,9rem); }
.about-band__inner > *{ max-width:42ch; }
@media (max-width:760px){
  /* full-width type on a phone has no quiet side to hide in, carry the ivory
     all the way across and let the art read as a tint under it */
  .about-band__media::after{
    background:linear-gradient(120deg, rgba(251,248,242,.95) 0%, rgba(251,248,242,.93) 62%,
                               rgba(251,248,242,.84) 100%);
  }
  .about-band__inner > *{ max-width:none; }
}

.principles__grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.principles__media{ grid-column:1/5; position:sticky; top:clamp(6rem,12vh,8rem); }
.principles__media img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.principles__body{ grid-column:6/13; }
@media (max-width:940px){
  .principles__media{ grid-column:1/-1; position:static; max-width:420px; }
  .principles__body{ grid-column:1/-1; }
}

/* =========================================================================
   LIGHT, WEIGHT AND REFRACTION IN THE PAGE ITSELF
   The artwork refracts, casts and reflects; the interface should agree with
   it. Openings sit in space, edges disperse, and forms leave a reflection.
   ========================================================================= */

/* every architectural opening now has weight */
.pillars__frame,
.about__portrait img,
.teaser__media img,
.practice__head figure img,
.principles__media img{
  box-shadow:
    0 2px 4px rgba(120,92,58,.05),
    0 18px 40px -18px rgba(120,92,58,.22),
    0 48px 90px -40px rgba(120,92,58,.28);
}

/* a dispersed edge on the opening: gold warming to rose, cooling to aqua */
.pillars__frame::after{
  box-shadow:inset 0 0 0 1px rgba(201,168,108,.34);
}

/* The reflection each opening leaves on the floor beneath it.
   NB: never set position:relative on .pillars__media, it is sticky, and
   relative silently overrides that. This has bitten twice. */
.teaser__media::after,
.about__portrait figure::after{
  content:""; display:block; pointer-events:none;
  height:clamp(2rem,5vh,4.5rem); margin-top:-1px;
  background:linear-gradient(to bottom,
    rgba(201,168,108,.16) 0%, rgba(231,180,166,.09) 32%,
    rgba(191,217,212,.05) 62%, rgba(255,255,255,0) 100%);
  filter:blur(1px);
  transform:scaleY(-1);
  border-radius:0 0 40% 40% / 0 0 100% 100%;
}
.teaser__media,.about__portrait figure{ position:relative; }

/* section-level refraction: the blooms behind content pick up the spectrum */
.spine-3::before{
  background:
    radial-gradient(56% 46% at 14% 18%, rgba(201,168,108,.18), transparent 72%),
    radial-gradient(60% 50% at 88% 78%, rgba(231,180,166,.13), transparent 74%),
    radial-gradient(40% 34% at 62% 44%, rgba(191,217,212,.09), transparent 76%);
}
.spine-4::before{
  background:
    radial-gradient(62% 52% at 82% 22%, rgba(231,180,166,.16), transparent 72%),
    radial-gradient(54% 46% at 10% 80%, rgba(201,168,108,.19), transparent 74%),
    radial-gradient(38% 32% at 44% 52%, rgba(191,217,212,.08), transparent 76%);
}
.spine-5::before{
  background:
    radial-gradient(64% 54% at 20% 26%, rgba(214,160,120,.17), transparent 70%),
    radial-gradient(58% 50% at 84% 76%, rgba(201,168,108,.16), transparent 74%),
    radial-gradient(36% 30% at 56% 40%, rgba(191,217,212,.07), transparent 76%);
}


/* the buttons catch the same light */
.btn:hover{ box-shadow:0 16px 44px -14px rgba(120,92,58,.30); }

@media (prefers-reduced-motion:reduce){
  .pillars__frame,.about__portrait img,.teaser__media img{ box-shadow:none; }
}

@media (max-width:900px){
  /* a deeper dissolve so copy passing under the pinned arch reads as
     intentional rather than clipped */
  .spine-2 .pillars__media::after{
    height:3.6rem;
    background:linear-gradient(#F8F4EC 0%, rgba(248,244,236,.86) 38%, rgba(248,244,236,0) 100%);
  }
  .pillars__media{ padding-bottom:0.6rem; }
}

/* =========================================================================
   THE OPENING FILLS ITS COLUMN
   aspect-ratio tied the frame's height to the column's width, so at 1024px
   it collapsed to 587px inside an 860px column and floated in dead space.
   Height now comes from the viewport; the artwork covers whatever box it gets.
   ========================================================================= */

/* HESS: a whisper of violet, and nothing else borrowed from the mark */
.hess__media::after{
  background:
    linear-gradient(100deg, rgba(252,251,254,.94) 0%, rgba(252,251,254,.74) 38%,
                    rgba(252,251,254,.32) 72%, rgba(252,251,254,.10) 100%),
    linear-gradient(to bottom, rgba(252,251,254,.60) 0%, rgba(252,251,254,0) 20%);
}
@media (max-width:900px){
  .hess__media::after{
    background:linear-gradient(to bottom,
      rgba(252,251,254,.92) 0%, rgba(252,251,254,.80) 44%,
      rgba(252,251,254,.52) 74%, rgba(252,251,254,.28) 100%);
  }
}
.hess .eyebrow::before{ background:var(--gold); }
.hess__facts li:nth-child(odd),
.hess__facts li:nth-child(even){ border-top-color:var(--line); }
.hue-amber::after,.hue-clay::after,.hue-blush::after{ content:none; }

/* =========================================================================
   MEASURE AND WEIGHT
   A 20-character measure broke the closing statement into six stacked lines
   and left the band around it empty. It now reads in three, and the section
   carries a rule and a mark so the space is composed rather than merely large.
   ========================================================================= */
.pullquote{ max-width:30ch; }
.pullquote__text{
  font-size:clamp(1.7rem,1.05rem + 2.4vw,3.3rem);
  line-height:1.16; letter-spacing:-.022em;
}
.pullquote__mark{
  font-size:clamp(2.6rem,5vw,4.4rem);
  margin-bottom:clamp(.8rem,2vw,1.4rem);
  opacity:.5;
}
.pullquote::before,
.pullquote::after{
  content:""; display:block; width:clamp(46px,7vw,96px); height:1px;
  margin:0 auto; background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.pullquote::before{ margin-bottom:clamp(2rem,4vw,3rem); }
.pullquote::after { margin-top:clamp(2rem,4vw,3rem); }
.pullquote__by{ margin-top:clamp(1.6rem,3vw,2.4rem); }
.section--airy:has(.pullquote){ padding-block:clamp(7rem,17vh,13rem); }

/* the disciplines page: the opening deserved more of the column than a fifth */
@media (min-width:941px){
  .practice__head{ grid-column:1/6; }
  .practice__body{ grid-column:7/13; }
  .practice__head figure{ margin-top:clamp(2rem,3.5vw,3rem) !important; }
}

/* the manifesto's left column was holding a headline and then nothing */
.manifesto__rule{
  display:block; width:1px; height:clamp(4rem,10vw,9rem);
  margin-top:clamp(2.4rem,5vw,3.6rem);
  background:linear-gradient(180deg,var(--gold),transparent);
}
.manifesto__note{
  display:block; margin-top:1.2rem;
  font-size:.66rem; text-transform:uppercase; letter-spacing:.24em;
  color:var(--muted);
}

/* `ch` on .pullquote resolved against the container's body font, not the 3rem
   display text inside it, so the measure stayed ~300px and the line broke six
   times. Set the measure in absolute units against the type it actually holds. */
.pullquote{ max-width:min(92%, 46rem); }
.pullquote__text{ max-width:none; }

/* ------------------------------------------------- who this is for (rows) */
/* Four statements, set as hairline rows rather than a bulleted list, the
   page has no bullets anywhere and shouldn't start here. */
.forwho{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr;
  column-gap:clamp(2rem,5vw,5rem);
}
.forwho li{
  position:relative; padding:clamp(1.3rem,2.4vw,1.9rem) 0 clamp(1.3rem,2.4vw,1.9rem) 2.4rem;
  border-top:1px solid var(--line);
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.02rem,.9rem + .5vw,1.42rem);
  line-height:1.32; letter-spacing:-.008em; color:var(--ink);
}
.forwho li::before{
  content:""; position:absolute; left:0; top:calc(clamp(1.3rem,2.4vw,1.9rem) + .72em);
  width:14px; height:1px; background:var(--gold);
}
.forwho li:nth-last-child(-n+2){ border-bottom:1px solid var(--line); }
@media (max-width:760px){
  .forwho{ grid-template-columns:1fr; }
  .forwho li:nth-last-child(-n+2){ border-bottom:0; }
  .forwho li:last-child{ border-bottom:1px solid var(--line); }
}

/* ------------------------------------------- inquiry, without the form */
/* Patti asked for an address, not a form. One column, centred measure, and
   the email set as display type so it reads as the invitation it is. */
.inquiry__solo{ max-width:min(94%, 44rem); }
.inquiry--simple .eyebrow{ margin-bottom:1.1rem; }
.mailto{
  display:inline-block; margin-top:clamp(2.2rem,5vw,3.4rem);
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.5rem,1rem + 2.6vw,3.1rem);
  line-height:1.1; letter-spacing:-.02em;
  color:var(--ink); text-decoration:none;
  border-bottom:1px solid var(--gold);
  padding-bottom:.18em;
  transition:color .45s var(--ease), border-color .45s var(--ease);
  overflow-wrap:anywhere;
}
.mailto:hover,.mailto:focus-visible{ color:var(--gold-ink); border-color:var(--gold-ink); }
.inquiry__note{
  margin:clamp(1.4rem,3vw,2rem) 0 0;
  font-size:.72rem; text-transform:uppercase; letter-spacing:.2em; color:var(--muted);
}

/* a services group carries its own hairline rows; the group's own separator
   already closes it, so drop the list's closing rule or they double up */
.pillar .deliver{ margin-top:clamp(1.6rem,3vw,2.2rem); }
.pillar .deliver li:last-child{ border-bottom:0; padding-bottom:0; }

/* The role line under the footer wordmark. It carries the full discipline,
   because "Professional and Trade" is what separates this practice from
   homeowners and community association management. Given its own measure so
   it wraps to two tidy lines rather than stretching the mark. */
.footer__role{
  display:block; margin-top:.5rem; white-space:nowrap;
  font-family:var(--sans); font-size:.55rem; font-weight:500;
  line-height:1.9; letter-spacing:.19em; text-transform:uppercase; opacity:.62;
}
/* the mark should sit against the top of the wordmark, not the middle of a
   two-line block */
.footer__mark{ align-items:flex-start; }
.footer__mark svg{ margin-top:.15rem; }
@media (max-width:420px){
  .footer__role{ white-space:normal; letter-spacing:.16em; }
}

/* =========================================================================
   THE SERVICES FRAME, single source of truth
   ------------------------------------------------------------------------
   Four earlier passes each left an @media (min-width:901px) block fighting
   over this element. The last one to win set aspect-ratio:auto with a
   viewport height, so the crop drifted at every single width: 0.93 at 1600,
   0.86 at 1440, 0.61 at 1024, then 1.45 at 768. The same six panels read as
   six different pictures depending on the screen.

   All six artworks are 4:5 portraits, so the frame is 4:5 everywhere and its
   height is capped by capping its WIDTH. Capping height instead would break
   the ratio; this keeps the crop identical from a phone to a 1600px desktop.
   Do not add another .pillars__frame size rule anywhere above this one.
   ========================================================================= */
.pillars{ --svc-h:58svh; }
.pillars__frame{
  position:relative; z-index:1;
  width:min(100%, calc(var(--svc-h) * 0.8));
  aspect-ratio:4/5;
  height:auto; max-height:none;
  margin-inline:auto;
  overflow:hidden; border-radius:3px; background:var(--bone-3);
}
@media (min-width:901px){
  .pillars{ grid-template-columns:1.18fr 1fr; gap:clamp(2.5rem,5vw,5rem); --svc-h:86svh; }
  .pillars__media{ height:100svh; }
  .pillars__frame{ margin-inline:0; }
  .pillars__index{ font-size:.8rem; padding:.95rem 1.3rem; }
}
@media (max-width:620px){
  .pillars{ --svc-h:46svh; }
  .pillars__media{ padding-bottom:.9rem; }
}

/* =========================================================================
   HESS at tablet widths
   ------------------------------------------------------------------------
   Below 980px the lead and the fact list both go full width, and the four
   facts stacked into a 300px column while the section kept its full 16vh
   padding: the band ran to 1700px at 834 and 900, against 1223 on desktop
   and 1428 on a phone. It was the worst inconsistency on the page.
   The facts run two across on a tablet and the padding comes in.
   ========================================================================= */
@media (max-width:980px) and (min-width:621px){
  .hess__inner{ padding-block:clamp(4.5rem,10vh,7rem); }
  .hess__grid{ gap:clamp(2rem,4vw,3rem); }
  .hess__lead .body-lg{ max-width:60ch; }
  .hess__facts{
    display:grid; grid-template-columns:1fr 1fr;
    column-gap:clamp(2rem,5vw,4rem);
  }
  .hess__facts li:nth-child(-n+2){ border-top:1px solid rgba(44,44,44,.16); }
  .hess__wordmark{ font-size:clamp(3rem,7.5vw,5.6rem); }
}

/* =========================================================================
   THE CLIENT LETTERS
   ------------------------------------------------------------------------
   Three long references, given the same choreography as the services: the
   room each client describes holds still while their words travel past it.
   ========================================================================= */
.voice__name{
  margin:0 0 clamp(1.2rem,2.4vw,1.8rem);
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.1rem,1.4rem + 2.4vw,3.8rem);
  line-height:.98; letter-spacing:.03em; color:var(--ink);
}
.voice__name span{
  display:block; margin-top:.9rem;
  font-family:var(--sans); font-size:.62rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.22em; color:var(--muted);
  line-height:1.6;
}
.voice__text{ position:relative; }
.voice__text::before{
  content:"\201C"; position:absolute; left:-1.5ch; top:-.34em;
  font-family:var(--serif); font-size:3.4rem; line-height:1;
  color:var(--gold); opacity:.5;
}
.voice__text p{
  margin:0 0 1.1rem;
  font-size:clamp(.97rem,.93rem + .22vw,1.07rem); line-height:1.74;
}
.voice__text p:last-child{ margin-bottom:0; }
@media (max-width:900px){
  .voice__text::before{ content:none; }
}

/* the sticky panel is opaque, so it has to carry the ground it sits on */
.hue-blush .pillars__media{ background:#FAF1EC; }

/* =========================================================================
   THE SUPPORTING FIGURES, single source of truth
   ------------------------------------------------------------------------
   Same problem as the services frame: three passes each left their own
   .teaser__media sizing and stacking rule. The last pair stacked the About
   teaser at 900px while capping the picture at 520px, so between 768 and 900
   that one section ran to 1671px against 1223 on desktop, the largest
   remaining gap between the two layouts.

   The teaser now holds two columns down to 760px, where a phone layout is
   genuinely the right answer, and the picture scales with its column instead
   of sitting at a fixed pixel width. Do not add another sizing rule above.
   ========================================================================= */
.teaser__grid{
  display:grid; grid-template-columns:repeat(12,1fr);
  gap:clamp(2rem,5vw,5rem); align-items:center;
}
.teaser__media{ grid-column:1/7; max-width:none; }
.teaser__body{ grid-column:8/13; }
.teaser__media img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
@media (max-width:760px){
  .teaser__media{ grid-column:1/-1; max-width:min(100%,340px); margin-inline:auto; }
  .teaser__body{ grid-column:1/-1; }
}

.about__grid{
  display:grid; grid-template-columns:repeat(12,1fr);
  gap:clamp(2rem,5vw,5rem); align-items:start;
}
.about__portrait{ grid-column:1/6; position:sticky; top:clamp(6rem,12vh,8rem); }
.about__portrait figure{ max-width:none; margin:0; }
.about__portrait img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.about__text{ grid-column:7/13; }
@media (max-width:860px){
  .about__portrait{ grid-column:1/-1; position:static; max-width:min(100%,360px); }
  .about__text{ grid-column:1/-1; }
}