/* HistoriaComms — strategic communications, media & advisory
   Palette and monogram derived from the firm's identity: true black, brand gold #FEBC04, paper white. */

/* ---------- tokens ---------- */
:root{
  --ink:#000000;
  --paper:#ffffff;
  --gold:#FEBC04;
  --gold-ink:#8A6200;
  --grey:#5B5954;
  --grey-soft:#8A867E;
  --grey-inv:#B8B5AE;
  --line:#E4E1DA;
  --line-inv:rgba(255,255,255,.16);
  --wash:#F7F5F1;
  --gold-pale:#FEF3D9;

  --sans:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;
  --serif:var(--sans);   /* display role — same family, heavier and tighter */

  --shell:1280px;
  --gutter:clamp(20px,5vw,72px);
  --band:clamp(46px,5.4vw,88px);
  --head:74px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--head) + 16px)}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:1.0625rem;line-height:1.62;
  font-weight:400;letter-spacing:-.006em;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

.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}

/* ---------- layout ---------- */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.band{padding-block:var(--band)}
.band--tight{padding-block:clamp(34px,4vw,62px)}
.band--ink{background:var(--ink);color:var(--paper)}
.band--wash{background:var(--wash)}
:is(.band--ink,.hero,.pagehead) h1,:is(.band--ink,.hero,.pagehead) h2,:is(.band--ink,.hero,.pagehead) h3{color:var(--paper)}

/* the signature rule: gold for its first sixth, hairline for the rest */
.rule{height:1px;border:0;margin:0;background:linear-gradient(90deg,var(--gold) 0 16%,var(--line) 16% 100%)}
:is(.band--ink,.hero,.pagehead) .rule,.rule--inv{background:linear-gradient(90deg,var(--gold) 0 16%,var(--line-inv) 16% 100%)}

/* ---------- type ---------- */
.display{
  font-family:var(--serif);font-weight:800;line-height:1.02;letter-spacing:-.035em;
  font-size:clamp(2.6rem,6.2vw,5.3rem);
}
.h2{
  font-family:var(--serif);font-weight:800;line-height:1.12;letter-spacing:-.03em;
  font-size:clamp(1.85rem,3.7vw,3rem);
}
.h3{
  font-family:var(--serif);font-weight:700;line-height:1.22;letter-spacing:-.022em;
  font-size:clamp(1.3rem,2.1vw,1.75rem);
}
.h4{font-family:var(--sans);font-weight:700;font-size:1.0625rem;line-height:1.35;letter-spacing:-.014em}
.lead{font-size:clamp(1.06rem,1.3vw,1.24rem);line-height:1.6;letter-spacing:-.012em;color:var(--grey)}
:is(.band--ink,.hero,.pagehead) .lead{color:var(--grey-inv)}
.prose{color:var(--grey);max-width:62ch}
:is(.band--ink,.hero,.pagehead) .prose{color:var(--grey-inv)}
.prose p + p{margin-top:1.1em}
.meta{font-size:.8125rem;line-height:1.4;color:var(--grey-soft);letter-spacing:.01em}
:is(.band--ink,.hero,.pagehead) .meta{color:var(--grey-inv)}
.tag{font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.08em;color:var(--gold-ink)}
:is(.band--ink,.hero,.pagehead) .tag{color:var(--gold)}
.num{font-family:var(--serif);font-weight:800;font-size:clamp(1.45rem,2.6vw,2rem);color:var(--gold-ink);line-height:1;letter-spacing:-.03em}
:is(.band--ink,.hero,.pagehead) .num{color:var(--gold)}
.measure{max-width:56ch}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.7rem;
  padding:.85rem 1.4rem;border:1px solid var(--ink);border-radius:2px;
  background:var(--ink);color:var(--paper);
  font-size:.95rem;font-weight:600;letter-spacing:-.005em;text-decoration:none;cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.btn:hover{background:var(--gold);border-color:var(--gold);color:var(--ink);transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
:is(.band--ink,.hero,.pagehead) .btn{background:var(--gold);border-color:var(--gold);color:var(--ink)}
:is(.band--ink,.hero,.pagehead) .btn:hover{background:var(--paper);border-color:var(--paper)}
:is(.band--ink,.hero,.pagehead) .btn--ghost{background:transparent;color:var(--paper);border-color:rgba(255,255,255,.4)}
:is(.band--ink,.hero,.pagehead) .btn--ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}

.linkline{
  display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;
  font-weight:600;font-size:.95rem;padding-bottom:3px;
  border-bottom:1px solid var(--gold);transition:gap .18s ease;
}
.linkline:hover{gap:.9rem}
.linkline svg{flex:none}

/* ---------- header ---------- */
.head{
  position:fixed;inset:0 0 auto;z-index:60;height:var(--head);
  color:var(--paper);transition:background .25s ease,color .25s ease;
}
.head::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,.12) 70%,transparent);
  transition:opacity .25s ease;
}
.head::after{
  content:"";position:absolute;inset:auto 0 0;height:1px;background:var(--line);
  opacity:0;transition:opacity .25s ease;
}
.head.is-solid{background:var(--paper);color:var(--ink)}
.head.is-solid::before{opacity:0}
.head.is-solid::after{opacity:1}

.head__bar{
  height:100%;display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.6rem);
  padding-inline:clamp(16px,2.6vw,34px);
}
.brand{display:block;position:relative;width:216px;height:43px;flex:none}
.brand img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:left center;transition:opacity .25s ease}
.brand .on-light{opacity:0}
.head.is-solid .brand .on-dark{opacity:0}
.head.is-solid .brand .on-light{opacity:1}

.head__mid{display:flex;align-items:center;min-width:0;flex:1}
.nav{display:flex;align-items:center;gap:clamp(.75rem,1.25vw,1.25rem);flex-wrap:nowrap;min-width:0}
.nav a{
  position:relative;text-decoration:none;white-space:nowrap;
  font-size:.74rem;font-weight:600;line-height:1.2;letter-spacing:.09em;text-transform:uppercase;
  padding-bottom:.55rem;margin-bottom:-.55rem;
  color:inherit;opacity:.88;transition:opacity .18s ease,color .18s ease;
}
.nav a:hover{opacity:1}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.22,.61,.36,1);
}
.nav a:hover::after{transform:scaleX(1)}
.nav a[aria-current="page"],.nav a.is-active{color:var(--gold);opacity:1}
.nav a[aria-current="page"]::after,.nav a.is-active::after{transform:scaleX(1)}

.head__util{display:flex;align-items:center;gap:.7rem;margin-left:auto;font-size:.8rem}
.head__util a{text-decoration:none;opacity:.9;white-space:nowrap}
.head__util a:hover{opacity:1;color:var(--gold)}
.head__util .sep{opacity:.4}
.head__icon{
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;flex:none;
  border:1px solid currentColor;color:inherit;opacity:.85;transition:background .2s ease,color .2s ease,border-color .2s ease,opacity .2s ease;
}
.head__icon:hover{background:var(--gold);border-color:var(--gold);color:var(--ink);opacity:1}

.burger{
  display:grid;place-items:center;width:34px;height:34px;flex:none;
  border:0;background:transparent;color:inherit;cursor:pointer;padding:0;
}
.burger span{display:block;width:24px;height:1.5px;background:currentColor;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:24px;height:1.5px;background:currentColor;transition:transform .2s ease}
.burger span::before{top:-7px}.burger span::after{top:7px}
.burger:hover span::before{transform:translateY(-1px)}
.burger:hover span::after{transform:translateY(1px)}

.drawer{
  position:fixed;inset:0;z-index:70;background:var(--ink);color:var(--paper);
  display:flex;flex-direction:column;padding:var(--gutter);
  visibility:hidden;transform:translateY(-100%);
  transition:transform .32s cubic-bezier(.22,.61,.36,1),visibility .32s;
}
.drawer[data-open="true"]{visibility:visible;transform:translateY(0)}
.drawer__top{display:flex;align-items:center;justify-content:space-between;height:calc(var(--head) - var(--gutter) + 24px)}
.drawer__close{width:44px;height:44px;border:1px solid rgba(255,255,255,.35);border-radius:2px;background:transparent;cursor:pointer;color:inherit}
.drawer nav{margin-top:auto;margin-bottom:auto;display:grid;gap:.4rem}
.drawer nav a{font-family:var(--serif);font-weight:800;font-size:clamp(1.7rem,7vw,2.6rem);text-decoration:none;line-height:1.25;letter-spacing:-.032em}
.drawer nav a:hover{color:var(--gold)}
.drawer__foot{display:grid;gap:.35rem;font-size:.9rem;color:var(--grey-inv)}
.drawer__foot a{text-decoration:none}

/* ---------- hero ---------- */
.hero{
  position:relative;background:var(--ink);color:var(--paper);overflow:hidden;
  padding-top:calc(var(--head) + clamp(56px,9vw,120px));padding-bottom:0;
  min-height:min(100svh,940px);display:flex;flex-direction:column;
}
.hero__mark{
  position:absolute;pointer-events:none;user-select:none;
  right:clamp(-220px,-10vw,-60px);top:clamp(30px,6vw,70px);
  width:clamp(320px,48vw,660px);opacity:.05;
}
.hero__inner{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;gap:clamp(28px,4vw,46px)}

/* still hero: the photograph carries it; one small block, bottom left */
.hero--still .hero__inner{
  display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;flex:1;
  padding-block:calc(var(--head) + 40px) clamp(64px,9vw,112px);
}
.hero__block{
  display:grid;justify-items:start;gap:clamp(13px,1.7vw,19px);
  border-left:1px solid rgba(255,255,255,.42);
  padding-left:clamp(18px,2.2vw,32px);
}
.hero__kicker{
  margin:0;font-size:.66rem;font-weight:600;line-height:1.4;
  letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.82);
}
.hero--still h1{
  margin:0;max-width:none;white-space:nowrap;text-transform:uppercase;font-weight:700;
  font-size:clamp(.62rem,2.55vw,2.3rem);line-height:1.5;letter-spacing:.2em;
}
.hero__sub{margin:0;white-space:nowrap;font-size:clamp(.62rem,1.05vw,.84rem);color:rgba(255,255,255,.7);letter-spacing:.16em;line-height:1.6}

.hero .btn.btn--outline{
  background:transparent;border-color:rgba(255,255,255,.6);color:var(--paper);
  border-radius:0;padding:.68rem 1.2rem;margin-top:.45rem;
  font-size:.64rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
}
.hero .btn.btn--outline:hover{background:var(--paper);border-color:var(--paper);color:var(--ink);transform:none}

/* the photograph stays visible — only the corner the type sits in is darkened */
.hero--still{
  background:radial-gradient(130% 100% at 76% 14%,#101010 0,#070707 52%,#020202 100%);
}
/* the light field: gold slats, flipped so the blaze falls on the right,
   away from the type */
/* hero layer stack — these base rules were lost earlier; without them the
   absolutely positioned layers have no containing block of their own */
.hero__bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.hero__inner,.hero > .shell{position:relative;z-index:1}
.hero__glow{position:absolute;inset:0;pointer-events:none}
.hero__grain{
  position:absolute;inset:0;pointer-events:none;
  background-image:url(../img/grain-light.png);background-size:180px 180px;
  opacity:.2;mix-blend-mode:overlay;
}

.hero__slats{
  --tile:clamp(1000px,135vw,2100px);
  position:absolute;inset:0;pointer-events:none;
  background-image:url(../img/hero-slats.jpg);
  background-repeat:repeat-x;
  background-size:var(--tile) 100%;
  transform:scaleX(-1);
  opacity:.74;
  -webkit-mask-image:linear-gradient(90deg,transparent 0 8%,rgba(0,0,0,.4) 32%,#000 66%);
          mask-image:linear-gradient(90deg,transparent 0 8%,rgba(0,0,0,.4) 32%,#000 66%);
}
.hero--still .hero__glow{
  background:
    linear-gradient(90deg,rgba(0,0,0,.9) 0 22%,rgba(0,0,0,.55) 44%,rgba(0,0,0,.12) 72%,transparent 100%),
    linear-gradient(0deg,rgba(0,0,0,.8) 0 10%,rgba(0,0,0,.3) 32%,transparent 56%),
    linear-gradient(180deg,rgba(0,0,0,.6) 0 10%,transparent 26%);
}
.hero--still .hero__grain{opacity:.12}
.hero--still .hero__arcs,.hero--still .hero__mark{display:none}

.hero--still .hero__dots{
  position:absolute;z-index:2;right:clamp(20px,5vw,72px);bottom:clamp(30px,4.5vw,58px);
}
.hero__dot span{width:22px}
.hero__dot[aria-selected="true"] span{width:38px}

@media (max-width:860px){
  .hero.hero--still{min-height:min(86svh,760px)}
  .hero--still .hero__inner{padding-bottom:clamp(78px,15vw,110px)}
  .hero--still .hero__dots{left:clamp(20px,5vw,72px);right:auto;bottom:clamp(24px,5vw,34px)}
  .hero--still .hero__glow{
    background:
      linear-gradient(0deg,rgba(0,0,0,.9) 0 30%,rgba(0,0,0,.45) 56%,transparent 80%),
      linear-gradient(180deg,rgba(0,0,0,.6) 0 12%,transparent 30%);
  }
  .hero__slats{
    -webkit-mask-image:linear-gradient(180deg,#000 0 42%,rgba(0,0,0,.3) 72%,transparent 96%);
            mask-image:linear-gradient(180deg,#000 0 42%,rgba(0,0,0,.3) 72%,transparent 96%);
  }
}

.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}

/* ---------- page head (inner pages) ---------- */
.pagehead{
  background:var(--ink);color:var(--paper);position:relative;overflow:hidden;
  padding-top:calc(var(--head) + clamp(56px,8vw,104px));padding-bottom:clamp(56px,7vw,96px);
}
.pagehead__mark{position:absolute;right:-90px;top:-40px;width:clamp(300px,36vw,520px);opacity:.08;pointer-events:none}
.pagehead .lead{max-width:52ch;margin-top:1.4rem}
.pagehead h1{max-width:18ch;font-size:clamp(2.1rem,4.6vw,3.6rem)}

/* ---------- section head ---------- */
.sechead{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(18px,3vw,48px);align-items:end;margin-bottom:clamp(26px,3.4vw,44px)}
.sechead .tag{display:block;margin-bottom:1.1rem}
.sechead--solo{grid-template-columns:1fr;align-items:start}
.sechead--mid{text-align:center;justify-items:center;max-width:62ch;margin-inline:auto}
.sechead--mid .prose{margin-top:1.1rem;max-width:56ch}
.sechead--mid .tag{margin-bottom:1rem}
.sechead--top{align-items:start}

/* ---------- statement ---------- */
.statement{font-family:var(--serif);font-weight:700;font-size:clamp(1.55rem,3vw,2.4rem);line-height:1.25;letter-spacing:-.028em;max-width:22ch}
.statement--wide{max-width:26ch}

.split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px)}
.split--even{grid-template-columns:repeat(2,minmax(0,1fr))}
.split--aside{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}

/* ---------- practice carousel ---------- */
.rail{position:relative;margin-top:clamp(20px,2.6vw,36px)}
.rail__track{
  display:grid;grid-auto-flow:column;
  grid-auto-columns:clamp(240px,62vw,320px);
  gap:clamp(12px,1.5vw,22px);
  overflow-x:auto;scroll-snap-type:x proximity;
  padding-inline:var(--gutter);scrollbar-width:none;
}
.rail__track::-webkit-scrollbar{display:none}
.slide{scroll-snap-align:center}
.slide__link{display:block;text-decoration:none;color:inherit}
.slide__frame{
  position:relative;display:block;aspect-ratio:3/4.15;overflow:hidden;background:#101010;
}
.slide__frame img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(.8) saturate(.92);
  transition:transform 1s cubic-bezier(.22,.61,.36,1),filter .5s ease;
}
.slide__link:hover img{transform:scale(1.05);filter:brightness(1) saturate(1)}
.slide__go{
  position:absolute;top:clamp(10px,1vw,16px);left:clamp(10px,1vw,16px);z-index:1;
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.55);color:var(--paper);
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.slide__link:hover .slide__go{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.slide__n{
  position:absolute;top:clamp(14px,1.2vw,20px);right:clamp(12px,1.1vw,18px);z-index:1;
  font-size:.72rem;font-weight:600;letter-spacing:.16em;color:rgba(255,255,255,.78);
}
.slide__title{
  position:absolute;left:0;right:0;bottom:0;z-index:1;margin:0;
  padding:clamp(34px,4vw,52px) clamp(14px,1.4vw,20px) clamp(14px,1.4vw,18px);
  background:linear-gradient(180deg,transparent 0,rgba(0,0,0,.62) 46%,rgba(0,0,0,.9) 100%);
  font-family:var(--sans);font-size:.7rem;font-weight:700;line-height:1.5;
  letter-spacing:.14em;text-transform:uppercase;color:var(--paper);
  transition:color .25s ease;
}
.slide__link:hover .slide__title{color:var(--gold)}

.rail__arrow{
  position:absolute;top:calc(50% - 26px);transform:translateY(-50%);z-index:3;
  width:clamp(42px,3.4vw,56px);height:clamp(42px,3.4vw,56px);border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.35);color:var(--paper);
  backdrop-filter:blur(4px);
  transition:background .2s ease,color .2s ease,border-color .2s ease,opacity .2s ease;
}
.rail__arrow--prev{left:clamp(8px,1.4vw,22px)}
.rail__arrow--next{right:clamp(8px,1.4vw,22px)}
.rail__arrow:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.rail__arrow[disabled]{opacity:.28;cursor:default}
.rail__arrow[disabled]:hover{background:rgba(0,0,0,.55);color:var(--paper);border-color:rgba(255,255,255,.35)}

.rail__dots{display:flex;justify-content:center;align-items:center;gap:.55rem;margin-top:clamp(26px,3.2vw,44px)}
.rail__dot{
  width:7px;height:7px;padding:0;border:0;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.32);transition:width .3s ease,background .3s ease;
}
.rail__dot:hover{background:rgba(255,255,255,.6)}
.rail__dot[aria-current="true"]{width:34px;background:var(--paper)}

/* Seven practices overflow every viewport, so the rail is a rail everywhere.
   Wide screens get four-and-a-bit cards in view, which shows there is more. */
@media (min-width:1041px){
  .rail__track{grid-auto-columns:calc((100% - 3 * clamp(12px,1.5vw,22px)) / 4.35)}
}
@media (max-width:620px){
  .rail__track{grid-auto-columns:clamp(200px,72vw,260px)}
  .rail__arrow{display:none}
}

/* ---------- contact rows get icons ---------- */
.contactlist dd{display:flex;align-items:center;gap:.7rem}
.contactlist .ico{color:var(--gold-ink)}

/* ---------- nav: active section ---------- */
.nav a.is-active{border-color:var(--gold)}

/* ---------- office cards ---------- */
.offices article{position:relative;transition:background .3s ease}
.offices article::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
.offices article:hover::before{transform:scaleX(1)}
.offices h3{display:flex;align-items:center;gap:.7rem}
.offices h3 .ico{color:var(--gold)}

.geo + .offices{margin-top:1px}

@media (prefers-reduced-motion:reduce){.geo__travel{display:none}}

/* ---------- figure: ready for photography when it arrives ---------- */
.figure{position:relative;margin:0;overflow:hidden;background:var(--ink)}
.figure img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.08) brightness(.92);transition:filter .6s ease,transform 1.2s cubic-bezier(.22,.61,.36,1)}
.figure::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.55)),
             linear-gradient(120deg,rgba(254,188,4,.22),transparent 60%);
  mix-blend-mode:multiply}
.figure:hover img{filter:none;transform:scale(1.03)}
.figure figcaption{position:absolute;left:0;bottom:0;z-index:2;padding:1rem 1.2rem;
  color:var(--paper);font-size:.85rem}

/* ---------- hero slider ---------- */
.hero__slides{position:absolute;inset:0}
.hero__slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.1s ease}
.hero__slide.is-on{opacity:1}
.hero__slide img{width:100%;height:100%;object-fit:cover;display:block}
@media (prefers-reduced-motion:no-preference){
  .hero__slide img{transform:scale(1.04);transition:transform 9s linear}
  .hero__slide.is-on img{transform:scale(1)}
}
.hero__slider{
  position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;padding-block:1rem 1.2rem;flex-wrap:wrap;
}
.hero__place{font-size:.82rem;color:var(--grey-inv);display:flex;align-items:center;gap:.6rem}
.hero__place::before{content:"";width:16px;height:1px;background:var(--gold);flex:none}
.hero__dots{display:flex;gap:.5rem;align-items:center}
.hero__dot{
  appearance:none;border:0;background:transparent;padding:.5rem .1rem;cursor:pointer;
}
.hero__dot span{display:block;width:34px;height:2px;background:rgba(255,255,255,.3);transition:background .3s ease,width .3s ease}
.hero__dot[aria-selected="true"] span{background:var(--gold);width:54px}
.hero__dot:hover span{background:rgba(255,255,255,.65)}

/* ---------- sector tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}
.tile{
  position:relative;overflow:hidden;min-height:clamp(300px,26vw,380px);
  display:flex;align-items:flex-end;padding:clamp(20px,2vw,28px);isolation:isolate;
}
.tile__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform 1s cubic-bezier(.22,.61,.36,1),filter .5s ease;
  filter:grayscale(.35) contrast(1.05);
}
.tile::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.3) 0,rgba(0,0,0,.62) 48%,rgba(0,0,0,.9) 100%);
  transition:background .45s ease;
}
.tile::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--gold);z-index:1;
  transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.tile:hover::before{transform:scaleX(1)}
.tile:hover .tile__img{transform:scale(1.07);filter:grayscale(0) contrast(1.05)}
.tile:hover::after{background:linear-gradient(180deg,rgba(0,0,0,.2) 0,rgba(0,0,0,.55) 48%,rgba(0,0,0,.88) 100%)}
.tile__body{position:relative}
.tile h3{color:var(--paper);margin-bottom:.5rem}
.tile p{color:rgba(255,255,255,.82);font-size:.92rem;margin:0}
.tile .iconbox{width:40px;height:40px;margin-bottom:.9rem;border-color:rgba(255,255,255,.35);color:var(--gold);
  background:rgba(0,0,0,.25);backdrop-filter:blur(2px)}
.tile:hover .iconbox{background:var(--gold);border-color:var(--gold);color:var(--ink)}
@media (max-width:1040px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.tiles{grid-template-columns:1fr}.tile{min-height:270px}}

/* header responsive */
@media (max-width:1240px){
  .head__util .sep,.head__util a:not(.head__icon){display:none}
}
@media (max-width:1040px){
  .head__mid{display:none}
  .head__bar{gap:1rem}
}
@media (max-width:560px){
  .brand{width:174px;height:35px}
  .head__bar{gap:.6rem;padding-inline:14px}
  .head__icon{width:36px;height:36px}
}
@media (max-width:400px){
  /* only the search button survives the narrowest phones */
  .head__icon:not(.head__icon--btn){display:none}
}

/* ---------- nav dropdown ---------- */
.nav__item{position:relative;display:flex;align-items:center}
.nav__toggle{
  display:inline-flex;align-items:center;gap:.3rem;background:transparent;border:0;padding:0 0 0 .3rem;
  cursor:pointer;color:inherit;font:inherit;font-size:.74rem;
}
.nav__toggle .chev{width:10px;height:6px;flex:none;transition:transform .25s ease}
.nav__item[data-open="true"] .chev{transform:rotate(180deg)}
.nav__menu{
  position:absolute;top:calc(100% + 1.15rem);left:-1.1rem;min-width:270px;z-index:5;
  background:var(--paper);color:var(--ink);border:1px solid var(--line);
  padding:.5rem;display:grid;gap:1px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s;
  box-shadow:0 18px 40px -24px rgba(0,0,0,.55);
}
.nav__item[data-open="true"] .nav__menu{opacity:1;visibility:visible;transform:none}
.nav__menu a{
  display:flex;align-items:center;gap:.7rem;padding:.7rem .8rem;text-decoration:none;
  font-size:.9rem;font-weight:500;letter-spacing:-.005em;text-transform:none;
  color:var(--ink);opacity:1;margin:0;
}
.nav__menu a::after{display:none}
.nav__menu a .ico{color:var(--gold-ink);flex:none}
.nav__menu a:hover{background:var(--ink);color:var(--paper)}
.nav__menu a:hover .ico{color:var(--gold)}

.drawer__subs{display:grid;gap:.25rem;margin-top:.9rem;padding-left:1.1rem;border-left:1px solid var(--line-inv)}
.drawer nav .drawer__subs a{font-family:var(--sans);font-size:1.02rem;font-weight:500;line-height:1.5;color:var(--grey-inv);text-decoration:none;padding-block:.3rem}
.drawer nav .drawer__subs a:hover{color:var(--gold)}
.drawer nav{gap:.35rem}
@media (max-width:1040px){.nav__menu{display:none}}

/* ---------- search ---------- */
.head__icon--btn{background:transparent;cursor:pointer;padding:0;font:inherit}
.search{
  position:fixed;inset:0 0 auto;z-index:75;background:var(--ink);color:var(--paper);
  max-height:100svh;overflow-y:auto;
  transform:translateY(-102%);visibility:hidden;
  transition:transform .34s cubic-bezier(.22,.61,.36,1),visibility .34s;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8);
}
.search[data-open="true"]{transform:none;visibility:visible}
.search__bar{border-bottom:1px solid var(--line-inv)}
.search__row{display:flex;align-items:center;gap:1rem;height:var(--head)}
.search__row > .ico{color:var(--gold);flex:none}
.search input{
  flex:1;min-width:0;background:transparent;border:0;color:var(--paper);
  font-family:var(--serif);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.3rem,3vw,2rem);padding-block:.4rem;
}
.search input::placeholder{color:var(--grey-inv);font-weight:600}
.search input:focus{outline:none}
.search input::-webkit-search-cancel-button{display:none}
.search__close{
  width:42px;height:42px;flex:none;border:1px solid var(--line-inv);border-radius:50%;
  background:transparent;color:inherit;cursor:pointer;
}
.search__close:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.search__results{padding-block:1rem 2.2rem}
.search__hint{color:var(--grey-inv);font-size:.95rem;padding-block:1.4rem}
.search__hit{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.4rem 1.5rem;align-items:baseline;
  padding:1rem 0;border-bottom:1px solid var(--line-inv);text-decoration:none;color:inherit;
}
.search__hit:first-child{border-top:1px solid var(--line-inv)}
.search__hit strong{font-size:1.05rem;font-weight:700;letter-spacing:-.018em}
.search__hit span{grid-column:1;color:var(--grey-inv);font-size:.9rem;line-height:1.5}
.search__hit em{font-style:normal;color:var(--gold);background:rgba(254,188,4,.1);border-radius:2px}
.search__hit small{grid-column:2;grid-row:1;color:var(--grey-soft);font-size:.78rem;white-space:nowrap}
.search__hit:hover,.search__hit:focus-visible{background:rgba(255,255,255,.045);outline-offset:-2px}
.search__hit:hover strong,.search__hit[aria-selected="true"] strong{color:var(--gold)}
.search__hit[aria-selected="true"]{background:rgba(255,255,255,.06)}
@media (max-width:620px){
  .search__hit{grid-template-columns:1fr}
  .search__hit small{grid-column:1;grid-row:auto}
}

/* ==========================================================================
   Restored: texture, grids, steps, geo, forms, banner, breadcrumbs, footer,
   scroll affordances.
   ========================================================================== */

/* ---------- film grain over every band ---------- */
.band,.hero,.pagehead,.banner,.foot{position:relative;isolation:isolate}
.band::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:url(../img/grain-dark.png);background-size:180px 180px;opacity:.3;
}
.band--ink::after{background-image:url(../img/grain-light.png);opacity:.14}
.cta::after{background-image:url(../img/grain-light.png);opacity:.13}
.band--wash::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(0,0,0,.14) 1px,transparent 1px);
  background-size:16px 16px;opacity:.5;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);
          mask-image:linear-gradient(180deg,#000,transparent 70%);
}

/* ---------- icons ---------- */
.ico{width:24px;height:24px;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ico--lg{width:30px;height:30px}
.ico--sm{width:18px;height:18px;stroke-width:1.6}

/* ---------- icon medallion ---------- */
.iconbox{
  display:grid;place-items:center;width:46px;height:46px;flex:none;
  border:1px solid var(--line);border-radius:50%;color:var(--gold-ink);
  margin-bottom:1.1rem;transition:background .3s ease,color .3s ease,border-color .3s ease;
}
:is(.band--ink,.hero,.pagehead,.banner) .iconbox{border-color:var(--line-inv);color:var(--gold)}

/* ---------- matrix grid ---------- */
.matrix{--cellpad:clamp(18px,2vw,30px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line)}
.matrix--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.matrix--2{grid-template-columns:repeat(2,minmax(0,1fr))}
:is(.band--ink,.hero,.pagehead,.banner) .matrix{background:var(--line-inv)}
.matrix > *{position:relative;background:var(--paper);padding:clamp(22px,2.4vw,32px) var(--cellpad);transition:background .3s ease}
:is(.band--ink,.hero,.pagehead,.banner) .matrix > *{background:var(--ink)}
.band--wash .matrix > *{background:var(--wash)}
.matrix > :nth-child(4n+1){padding-left:0}
.matrix > :nth-child(4n){padding-right:0}
.matrix--3 > :nth-child(n){padding-left:var(--cellpad);padding-right:var(--cellpad)}
.matrix--3 > :nth-child(3n+1){padding-left:0}
.matrix--3 > :nth-child(3n){padding-right:0}
.matrix--2 > :nth-child(n){padding-left:var(--cellpad);padding-right:var(--cellpad)}
.matrix--2 > :nth-child(2n+1){padding-left:0}
.matrix--2 > :nth-child(2n){padding-right:0}
.matrix > *::before{
  content:"";position:absolute;top:0;left:0;right:var(--cellpad);height:2px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
.matrix > :hover::before{transform:scaleX(1)}
.matrix > :hover .iconbox{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.matrix h3,.matrix h4{margin-bottom:.55rem}
.matrix p{color:var(--grey);font-size:.95rem;margin:0}
:is(.band--ink,.hero,.pagehead,.banner) .matrix p{color:var(--grey-inv)}

/* ---------- the five stages ---------- */
.steps{display:grid;position:relative}
.steps::before{
  content:"";position:absolute;left:23px;top:clamp(22px,3vw,34px);bottom:clamp(22px,3vw,34px);
  width:1px;background:var(--line);
}
.band--ink .steps::before{background:var(--line-inv)}
.steps li{display:grid;grid-template-columns:46px minmax(0,1fr);gap:clamp(18px,3vw,40px);padding:clamp(22px,3vw,34px) 0;border-top:1px solid var(--line)}
.band--ink .steps li{border-top-color:var(--line-inv)}
.steps li:last-child{border-bottom:1px solid var(--line)}
.band--ink .steps li:last-child{border-bottom-color:var(--line-inv)}
.steps .num{position:relative;z-index:1;background:var(--paper);padding-block:.1rem}
.band--wash .steps .num{background:var(--wash)}
.band--ink .steps .num{background:var(--ink)}
.steps h3{margin-bottom:.45rem}
.steps p{color:var(--grey);margin:0;max-width:58ch}
.band--ink .steps p{color:var(--grey-inv)}
.js .steps li .num{transition:color .4s ease,transform .4s ease}
.js .steps li.is-active .num{color:var(--gold);transform:translateX(2px)}
.principles{display:grid;gap:1.6rem;margin-top:2.4rem}
.principles div{border-top:1px solid var(--line);padding-top:1rem}
.principles h4{margin-bottom:.3rem}
.principles p{color:var(--grey);font-size:.95rem;margin:0}
.sticky{position:sticky;top:calc(var(--head) + 40px);align-self:start}

/* ---------- offices ---------- */
.offices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);margin-top:clamp(22px,2.6vw,38px)}
.offices article{background:var(--paper);padding:clamp(26px,3vw,40px) clamp(22px,2.6vw,36px)}
.offices article:nth-child(odd){padding-left:0}
.offices article:nth-child(even){padding-right:0}
.band--wash .offices article{background:var(--wash)}
:is(.band--ink,.hero,.pagehead,.banner) .offices{background:var(--line-inv)}
:is(.band--ink,.hero,.pagehead,.banner) .offices article{background:var(--ink)}
.offices h3{margin-bottom:1rem;display:flex;align-items:center;gap:.7rem}
.offices h3 .ico{color:var(--gold)}
.offices address{font-style:normal;color:var(--grey);line-height:1.8}
:is(.band--ink,.hero,.pagehead,.banner) .offices address{color:var(--grey-inv)}
.offices a{text-decoration:none;border-bottom:1px solid var(--line)}
:is(.band--ink,.hero,.pagehead,.banner) .offices a{border-bottom-color:var(--line-inv)}
.offices a:hover{border-color:var(--gold)}

/* ---------- direct contact rows ---------- */
.contactlist{display:grid;margin-top:1.6rem}
.contactlist div{border-top:1px solid var(--line);padding:1.1rem 0 1.3rem}
.contactlist div:last-child{border-bottom:1px solid var(--line)}
.contactlist dt{font-size:.8125rem;color:var(--grey-soft);margin-bottom:.35rem}
.contactlist dd{margin:0;display:flex;align-items:center;gap:.7rem}
.contactlist dd a{
  font-family:var(--serif);font-weight:700;font-size:clamp(1.1rem,1.7vw,1.35rem);
  line-height:1.3;text-decoration:none;letter-spacing:-.022em;
  border-bottom:1px solid transparent;transition:border-color .18s ease;
}
.contactlist dd a:hover{border-bottom-color:var(--gold)}

/* ---------- geo panel ---------- */
.geo{
  position:relative;aspect-ratio:16/11;min-height:58vw;width:100%;
  border:1px solid var(--line-inv);
  background:radial-gradient(60% 60% at 70% 30%,rgba(254,188,4,.09),transparent 70%),#050505;
  overflow:hidden;
}
.geo svg{position:absolute;inset:0;width:100%;height:100%}
.geo--wide{aspect-ratio:16/8}
@media (max-width:860px){.geo--wide{aspect-ratio:16/12}}
.geo__grid{color:rgba(255,255,255,.2)}
.geo__label{font-family:var(--sans);font-size:11px;fill:var(--paper);stroke:none;letter-spacing:.04em}
.geo__coord{font-family:var(--sans);font-size:9px;fill:var(--grey-inv);stroke:none}
.geo + .offices{margin-top:1px}
@media (prefers-reduced-motion:no-preference){
  .geo__pulse{transform-box:fill-box;transform-origin:center;animation:ping 3.4s ease-out infinite}
  .geo__pulse--b{animation-delay:1.7s}
  @keyframes ping{0%{scale:.4;opacity:.9}100%{scale:2.6;opacity:0}}
}
@media (prefers-reduced-motion:reduce){.geo__travel{display:none}}

/* ---------- client and partner logos ----------
   The marks come from nine different brand systems, so they are flattened to
   one ink tone and given a common optical height; colour returns on hover. */
.clients{
  list-style:none;margin:clamp(34px,4vw,54px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:clamp(18px,2.4vw,34px) clamp(20px,3vw,48px);
  align-items:center;
}
.clients li{display:grid;place-items:center;padding:clamp(10px,1.4vw,18px) 0}
.clients img{
  display:block;width:100%;max-width:clamp(112px,13vw,168px);
  height:clamp(38px,4.4vw,56px);object-fit:contain;object-position:center;
  filter:grayscale(1) contrast(.82) opacity(.55);
  transition:filter .3s ease,scale .3s ease;
}
.clients li:hover img{filter:none;scale:1.04}
/* square marks read small next to a wordmark, so they get more height */
.clients--tall img{height:clamp(50px,5.6vw,68px);max-width:clamp(86px,9vw,116px)}
/* the government seals are heraldic: flattened to grey they read as blank
   discs, so they keep their colour and a little more room. */
.clients--seal img{
  height:clamp(62px,7vw,88px);max-width:clamp(62px,7vw,88px);
  filter:saturate(.88) opacity(.78);
}
.clients__note{margin-top:clamp(26px,3vw,40px);font-size:.92rem;color:var(--grey)}
@media (prefers-reduced-motion:reduce){.clients img{transition:none}.clients li:hover img{scale:1}}

/* ---------- case study: facts strip and photo gallery ---------- */
.facts{
  margin:0;display:grid;gap:clamp(18px,2.4vw,34px);
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}
.facts dt{
  margin:0 0 .5rem;font-size:.66rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold-ink);
}
.facts dd{margin:0;font-size:1rem;line-height:1.5;color:var(--ink)}

/* Event photography arrives in mixed crops, so every frame is forced to one
   ratio and the subject is held towards the top, where faces usually sit. */
.gallery{
  display:grid;gap:clamp(8px,1vw,14px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
}
.gallery figure{margin:0;overflow:hidden;border-radius:4px;background:var(--wash)}
.gallery img{
  display:block;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 32%;
  transition:scale .5s ease;
}
.gallery figure:hover img{scale:1.04}
@media (prefers-reduced-motion:reduce){.gallery img{transition:none}.gallery figure:hover img{scale:1}}

/* ---------- selected work card ---------- */
.case{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(20px,3vw,48px);align-items:center;
  text-decoration:none;color:inherit;
}
.case__shot{position:relative;margin:0;overflow:hidden;border-radius:6px;background:var(--ink)}
.case__shot img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;transition:scale .6s ease}
.case:hover .case__shot img{scale:1.04}
.case__meta{margin:0 0 .9rem;font-size:.66rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-ink)}
.case h3{margin:0 0 1rem}
.case:hover h3{color:var(--gold-ink)}
@media (max-width:860px){.case{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.case__shot img{transition:none}.case:hover .case__shot img{scale:1}}

/* ---------- closing call to action ---------- */
.cta{background:var(--ink);color:var(--paper)}
.cta .h2{color:var(--paper);max-width:20ch}
.cta .prose{color:var(--grey-inv)}
.cta .btn{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.cta .btn:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.cta__row{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(26px,4vw,72px);align-items:end}
.cta__lines{margin-top:1.1rem;font-size:.92rem;color:var(--grey-inv);max-width:34ch}
.cta__lines a{color:var(--paper);text-underline-offset:3px}
.cta__lines a:hover{color:var(--gold)}

/* ---------- brief form ---------- */
.form{display:grid;gap:1.4rem;max-width:36rem}
.field{display:grid;gap:.45rem}
.field label{font-size:.9rem;font-weight:600}
.field input,.field select,.field textarea{
  font:inherit;font-size:1rem;color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:2px;padding:.8rem .9rem;width:100%;
  transition:border-color .18s ease;
}
.field textarea{min-height:9.5rem;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink);outline-offset:1px}
.field .hint{font-size:.82rem;color:var(--grey-soft)}
.form__note{font-size:.88rem;color:var(--grey-soft);max-width:44ch}

/* ---------- inner-page banner ---------- */
.banner{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:clamp(340px,44vw,480px);display:flex;align-items:flex-end;
  padding-top:calc(var(--head) + 40px);padding-bottom:clamp(36px,5vw,64px);
  background:var(--ink);color:var(--paper);
}
.banner__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.banner__scrim{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,0,0,.9) 0 32%,rgba(0,0,0,.72) 52%,rgba(0,0,0,.42) 100%),
    linear-gradient(180deg,rgba(0,0,0,.72) 0 14%,transparent 42%,rgba(0,0,0,.45) 100%);
}
.banner__grain{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:url(../img/grain-light.png);background-size:180px 180px;opacity:.16;mix-blend-mode:overlay;
}
.banner h1{font-size:clamp(2.1rem,4.4vw,3.5rem);max-width:18ch;margin-top:1rem}
.banner .lead{max-width:52ch;margin-top:1.1rem;color:rgba(255,255,255,.86)}

/* ---------- breadcrumbs ---------- */
.crumbs{background:var(--paper);border-bottom:1px solid var(--line)}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;padding-block:1rem;font-size:.86rem}
.crumbs li{display:flex;align-items:center;gap:.55rem;color:var(--grey)}
.crumbs a{display:flex;align-items:center;gap:.45rem;text-decoration:none;color:var(--grey)}
.crumbs a:hover{color:var(--ink)}
.crumbs .ico{width:15px;height:15px;color:var(--gold-ink)}
.crumbs li [aria-current]{color:var(--ink);font-weight:600}
.crumbs .sep{color:var(--grey-soft)}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:var(--grey-inv);padding:0}
.foot::after{content:none}
.foot__signup{position:relative;background:var(--gold-pale);color:var(--ink);padding-block:clamp(38px,4.6vw,70px)}
.foot__signup::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url(../img/grain-dark.png);background-size:180px 180px;opacity:.22;
}
.foot__signup .shell{position:relative;z-index:1}
.foot__signup h2{color:var(--ink);margin:0}
.signup{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:.9rem;margin-top:clamp(28px,3.5vw,44px)}
.signup input{
  width:100%;min-width:0;font:inherit;font-size:.88rem;color:var(--ink);
  background:transparent;border:1px solid rgba(0,0,0,.28);border-radius:999px;
  padding:.72rem 1.2rem;transition:border-color .2s ease,background .2s ease;
}
.signup input::placeholder{color:rgba(0,0,0,.5)}
.signup input:focus{outline:none;border-color:var(--ink);background:rgba(255,255,255,.55)}
.signup button{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  border:1px solid var(--ink);border-radius:999px;background:var(--ink);color:var(--gold);
  font-size:.82rem;font-weight:700;letter-spacing:-.01em;padding:.72rem 1.5rem;cursor:pointer;
  transition:background .2s ease,color .2s ease,gap .2s ease;
}
.signup button:hover{background:var(--paper);color:var(--ink);gap:1.1rem}
.foot__smallprint{margin-top:1.1rem;font-size:.82rem;line-height:1.6;color:rgba(0,0,0,.6);max-width:72ch}
.foot__smallprint a{color:inherit}

.foot__main{display:grid;grid-template-columns:minmax(260px,30%) minmax(0,1fr)}
.foot__brand{
  background:var(--gold);color:var(--ink);display:flex;flex-direction:column;gap:1.4rem;
  padding:clamp(34px,4vw,54px) clamp(24px,3vw,44px);
}
.foot__brand h3{color:var(--ink);margin:0}
.foot__brand .brand{width:224px;height:45px;margin-top:auto}
.foot__brand .brand .on-dark{opacity:0}
.foot__brand .brand .on-light{opacity:1}
.foot__brand .social a{border-color:rgba(0,0,0,.3);color:var(--ink)}
.foot__brand .social a:hover{background:var(--ink);border-color:var(--ink);color:var(--gold)}

.foot__info{
  background:var(--ink);color:var(--grey-inv);display:flex;flex-direction:column;
  gap:clamp(30px,4vw,54px);padding:clamp(34px,4vw,54px) clamp(24px,3vw,48px) clamp(20px,2.4vw,30px);
}
.foot__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,44px);flex:1}
.foot__links{display:grid;align-content:start;gap:.9rem}
.foot__links a{
  display:inline-flex;align-items:center;gap:.8rem;text-decoration:none;color:var(--paper);
  font-family:var(--serif);font-weight:700;letter-spacing:-.024em;
  font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.25;transition:gap .2s ease,color .2s ease;
}
.foot__links a .arw{color:var(--gold);flex:none}
.foot__links a:hover{color:var(--gold);gap:1.2rem}
.foot address{font-style:normal;line-height:1.7;font-size:.93rem;color:var(--grey-inv)}
.foot address h3{color:var(--paper);margin-bottom:.8rem}
.foot address a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line-inv)}
.foot address a:hover{color:var(--gold);border-color:var(--gold)}
.foot__bar{
  display:flex;flex-wrap:wrap;gap:.8rem 2rem;justify-content:space-between;align-items:center;
  padding-top:1.3rem;border-top:1px solid var(--line-inv);font-size:.84rem;
}
.foot__bar p{margin:0}
.foot__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem}
.foot__meta a{color:var(--grey-inv);text-decoration:none}
.foot__meta a:hover{color:var(--gold)}
.foot__meta .sep{width:1px;height:14px;background:var(--line-inv);display:inline-block}
.social{display:flex;gap:.55rem;align-items:center}
.social a{
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line-inv);color:var(--grey-inv);
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.social a:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}

/* ---------- scroll affordances ---------- */
.js [data-reveal]{
  opacity:0;transform:translateY(20px);
  transition:opacity .75s cubic-bezier(.22,.61,.36,1),transform .75s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--i,0) * 80ms);
}
.js [data-reveal].is-in{opacity:1;transform:none}
.js h1[data-reveal="mask"]{opacity:1;transform:none;overflow:hidden;padding-bottom:.06em}
.js h1[data-reveal="mask"] .rise{display:block;transform:translateY(106%);transition:transform .9s cubic-bezier(.22,.61,.36,1)}
.js h1[data-reveal="mask"].is-in .rise{transform:none}

.head__progress{
  position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--gold);
  transform:scaleX(var(--p,0));transform-origin:left;opacity:0;transition:opacity .3s ease;
}
.head.is-solid .head__progress{opacity:1}

.totop{
  position:fixed;z-index:55;right:clamp(16px,2.6vw,34px);bottom:clamp(16px,2.6vw,34px);
  width:50px;height:50px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:var(--ink);border:1px solid var(--ink);color:var(--gold);
  opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;
  transition:opacity .3s ease,transform .3s ease,background .2s ease,color .2s ease;
}
.totop.is-on{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .matrix,.matrix--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .matrix > :nth-child(n),.matrix--3 > :nth-child(n){padding-left:var(--cellpad);padding-right:var(--cellpad)}
  .matrix > :nth-child(2n+1),.matrix--3 > :nth-child(2n+1){padding-left:0}
  .matrix > :nth-child(2n),.matrix--3 > :nth-child(2n){padding-right:0}
  .signup{grid-template-columns:repeat(2,minmax(0,1fr))}
  .signup button{grid-column:1/-1}
  .foot__grid{grid-template-columns:1fr 1fr}
  .foot__links{grid-column:1/-1}
}
@media (max-width:860px){
  .sticky{position:static}
  .offices{grid-template-columns:1fr}
  .offices article{padding-left:0;padding-right:0}
}
@media (max-width:760px){
  .foot__main{grid-template-columns:1fr}
  .foot__brand{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.2rem}
  .foot__brand h3{width:100%}
  .foot__brand .brand{margin-top:0}
}
@media (max-width:620px){
  .matrix,.matrix--3,.matrix--2{grid-template-columns:1fr}
  .matrix > :nth-child(n),.matrix--3 > :nth-child(n),.matrix--2 > :nth-child(n){padding-left:0;padding-right:0}
  .steps li{grid-template-columns:1fr;gap:.6rem}
  .steps::before{display:none}
}
@media (max-width:560px){
  .signup{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr}
  .foot__bar{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  .js h1[data-reveal="mask"] .rise{transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ---------- restored: layout collapse ---------- */
@media (max-width:860px){
  :root{--head:64px}
  .split,.split--even,.split--aside,.sechead,.cta__row{grid-template-columns:1fr}
  .sechead{align-items:start}
}

/* ---------- sector panels ---------- */
.panels{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(10px,1.2vw,16px);margin-top:clamp(8px,1vw,14px);
}
.panel{
  display:grid;align-content:start;gap:clamp(26px,3vw,46px);
  background:var(--gold-pale);padding:clamp(22px,2.3vw,30px);
  min-height:clamp(176px,15vw,214px);
  transition:background .3s ease,transform .3s ease;
}
.panel .ico{width:32px;height:32px;stroke-width:1.25;color:var(--gold-ink);transition:color .3s ease}
.panel h3{margin:0;color:var(--ink);max-width:15ch;letter-spacing:-.026em}
.panel:hover{background:#FCE7B4}
.band--ink .panels .panel{background:rgba(254,188,4,.1)}
.band--ink .panel h3{color:var(--paper)}
.band--ink .panel .ico{color:var(--gold)}
.band--ink .panel:hover{background:rgba(254,188,4,.17)}
@media (max-width:1040px){.panels{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.panels{grid-template-columns:1fr}.panel{min-height:0;gap:1.4rem}}

/* ---------- the firm: an image box beside a text box ---------- */
.duo{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(20px,2.8vw,48px);align-items:stretch;
}
.shot{
  position:relative;margin:0;overflow:hidden;border-radius:6px;background:var(--ink);
  min-height:clamp(340px,40vw,560px);
}
.shot picture{display:block}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.shot figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:1;color:var(--paper);
  padding:clamp(22px,3vw,40px);
  background:linear-gradient(180deg,transparent 0,rgba(0,0,0,.28) 28%,rgba(0,0,0,.72) 62%,rgba(0,0,0,.92) 100%);
}
.shot figcaption .tag{display:block;margin-bottom:.85rem;color:var(--gold)}
.shot figcaption .statement{max-width:18ch;color:var(--paper)}

.duo__text{
  position:relative;isolation:isolate;overflow:hidden;
  display:grid;align-content:center;gap:1rem;
  background:var(--gold);color:var(--ink);border-radius:6px;
  padding:clamp(24px,3vw,44px);
}
.duo__text::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  right:clamp(-70px,-5%,-24px);top:50%;translate:0 -50%;
  width:clamp(180px,46%,340px);aspect-ratio:1;
  background:url(../img/mark-ink.png) center / contain no-repeat;
  opacity:.17;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 62%);
          mask-image:linear-gradient(90deg,transparent 0,#000 62%);
}
.duo__text p{margin:0;color:#2A2100}
.duo__text .linkline{color:var(--ink);border-bottom-color:rgba(0,0,0,.45)}
.duo__text .linkline:hover{border-bottom-color:var(--ink)}

@media (max-width:860px){
  /* the picture runs straight into the hero, and the gold panel straight
     into the next section — the band padding has nothing to do here */
  #firm{padding-block:0}
  /* picture and panel butt together — no seam between them */
  .duo{grid-template-columns:1fr;gap:0}
  /* the picture runs to both screen edges, cancelling the shell gutter, and
     keeps a tall box so the portrait source is not cropped to a letterbox */
  .shot{
    /* the image sits in normal flow here and sets the height itself. Relying on
       aspect-ratio alone collapses the figure on Safari if it does not resolve,
       and the absolutely positioned image then has nothing to show in. */
    aspect-ratio:auto;min-height:56vw;border-radius:0;
    margin-inline:calc(var(--gutter) * -1);
  }
  .shot img{position:static;width:100%;height:auto;display:block}
  .duo__text{
    max-width:none;border-radius:0;
    margin-inline:calc(var(--gutter) * -1);
    padding-inline:var(--gutter);
  }
  .duo__extra{display:none}
}

/* ---------- heavy film grain, for the dark practice band ---------- */
.band--film{
  background:
    radial-gradient(120% 86% at 50% 8%,#101010 0,#070707 46%,#020202 100%);
}
/* two grain layers at different scales so the texture never tiles visibly */
.band--film::after{
  background-image:url(../img/grain-light.png),url(../img/grain-light.png);
  background-size:180px 180px,74px 74px;
  background-position:0 0,37px 61px;
  opacity:.38;
}
/* a vignette to sink the edges and lift the middle a little */
.band--film::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(86% 64% at 50% 42%,rgba(255,255,255,.055),transparent 62%),
    linear-gradient(180deg,rgba(0,0,0,.72) 0,transparent 18% 82%,rgba(0,0,0,.72) 100%),
    linear-gradient(90deg,rgba(0,0,0,.55) 0,transparent 14% 86%,rgba(0,0,0,.55) 100%);
}
.band--film .slide__frame img{filter:brightness(.7) saturate(.88) contrast(1.05)}
.band--film .slide__link:hover img{filter:brightness(.98) saturate(1) contrast(1)}

/* ---------- hero: the light field in motion ---------- */
/* a second copy, larger and drifting the other way, so bright slats pass
   through each other instead of the whole field sliding as one piece */
.hero__slats--b{
  --tile:clamp(1500px,190vw,3000px);
  opacity:.3;
  mix-blend-mode:screen;
  transform:scaleX(-1) scaleY(-1);
}
@media (prefers-reduced-motion:no-preference){
  .hero__slats{animation:slat-drift 74s linear infinite}
  .hero__slats--b{animation:slat-drift 119s linear infinite reverse}
  .hero__bg{animation:slat-breathe 26s ease-in-out infinite}
  @keyframes slat-drift{to{background-position-x:calc(var(--tile) * -1)}}
  @keyframes slat-breathe{
    0%,100%{filter:brightness(.92) saturate(.98)}
    50%    {filter:brightness(1.1) saturate(1.05)}
  }
}

/* ---------- sectors: a measured pinstripe, echoing the hero's verticals ---------- */
#sectors{padding-top:clamp(26px,3vw,48px)}
#sectors::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:url(../img/pattern-grid.svg);
  background-repeat:repeat;
  background-size:clamp(54px,5.6vw,80px) clamp(54px,5.6vw,80px);
  opacity:.85;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 52%,transparent 94%);
          mask-image:linear-gradient(180deg,#000 0,#000 52%,transparent 94%);
}
@media (max-width:860px){
  #sectors{padding-top:clamp(22px,5vw,34px)}
}