/* ==========================================================================
   KOTZENBERG & NIEMAN — v8
   Drawn from the firm's email signature: a white ground, gold kept to hairlines
   and small accents, and a serif throughout — Playfair Display for display sizes
   (the logo's own face) over EB Garamond for text, down to the contact lines.
   ========================================================================== */
:root{
  --mark:url("assets/kna-shield.png");
  --gold:#BE9A50;            /* a shade deeper, so the hairlines hold on white */
  --gold-deep:#A2823C;
  --gold-ink:#83672E;        /* gold for small text — meets 4.5:1 on white */
  --gold-soft:#D8BC83;
  --black:#111111;
  --ink:#1C1C1C;
  --grey:#5A5A5A;
  --grey-lt:#6A6A6A;
  --white:#FFFFFF;
  --hair:rgba(17,17,17,.14);
  --hair-gold:rgba(190,154,80,.42);
  --shadow:0 30px 70px -42px rgba(17,15,10,.24);
  --serif:"Playfair Display","Didot","Bodoni MT",Georgia,serif;
  /* the signature sets everything in a serif, down to the contact lines */
  --sans:"EB Garamond","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --script:"Great Vibes",cursive;
  --ease:cubic-bezier(.22,.7,.25,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);font-weight:400;color:var(--ink);background:var(--white);
  font-size:1.06rem;line-height:1.62;overflow-x:hidden;
  font-feature-settings:"kern" 1,"liga" 1}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--gold);color:#fff}
section{scroll-margin-top:88px;position:relative}
.skip{position:absolute;left:-9999px;top:0;z-index:600;background:var(--black);color:#fff;
  padding:14px 22px;font-size:0.855rem;letter-spacing:.2em;text-transform:uppercase}
.skip:focus{left:12px;top:12px}

/* the mark itself — one embedded asset, painted wherever the shield appears */
.brand-mark,.lockup-mark{background:var(--mark) center/contain no-repeat;
  aspect-ratio:220/272}

/* ============ PRELOADER — the lockup assembles itself ============
   The curtain then lifts onto the same mark, already resolved, so the two read as
   one continuous move rather than the logo being animated at you twice. */
.loader{position:fixed;inset:0;z-index:500;display:grid;place-items:center;
  background:
    radial-gradient(620px 420px at 50% 46%, #FFFFFF, transparent 72%),
    linear-gradient(180deg,#FFFFFF,#FFFFFF);
  transition:transform 1s cubic-bezier(.7,0,.2,1);transform-origin:top}
.loader.done{transform:translateY(-101%)}
.loader-in{text-align:center;padding:0 24px}
.loader .lockup{margin-bottom:0}
.loader .lockup-mark::after{display:none}
.loader .lockup-mark{width:74px;margin-bottom:22px;
  animation:markin 1.1s .1s var(--ease) both}
.loader .lockup-l1>span{font-size:1.72rem;
  transform:translateY(116%);animation:rise 1s .42s var(--ease) forwards}
.loader .l2m>span{font-size:1.36rem;
  transform:translateY(116%);animation:rise 1s .53s var(--ease) forwards}
.loader .lockup-l2 i{width:0;animation:ruleout .95s .72s var(--ease) forwards}
.loader .lockup-tag{font-size:0.74rem;letter-spacing:.26em;margin-top:15px;
  opacity:0;animation:appear .9s .86s var(--ease) forwards}
/* a hairline that fills — the only "loading" signal the page needs */
.loader-bar{display:block;width:150px;height:1px;margin:34px auto 0;
  background:rgba(20,20,20,.09);overflow:hidden}
.loader-bar i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-soft));
  animation:loadbar 1.5s .18s cubic-bezier(.5,.05,.25,1) forwards}
@keyframes loadbar{to{transform:scaleX(1)}}

/* ============ CONTINUOUS SILK CANVAS ============ */
.silk{position:relative;background-color:var(--white);display:flow-root}
.silk::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(1200px 640px at 10% 4%, rgba(190,154,80,.045), transparent 60%),
    radial-gradient(1300px 800px at 24% 58%, rgba(190,154,80,.03), transparent 55%),
    radial-gradient(1100px 760px at 88% 86%, rgba(190,154,80,.045), transparent 58%);
}
.silk::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.22;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .02' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .78 0 0 0 0 .65 0 0 0 0 .38 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23s)'/%3E%3C/svg%3E")}
.silk>*{position:relative;z-index:1}

.wrap{width:min(1180px,90vw);margin:0 auto}
header .wrap{width:min(1440px,94vw)}
h1,h2,h3{font-family:var(--serif);font-weight:500;color:var(--black);line-height:1.22}
.sec{padding:clamp(70px,7.4vw,98px) 0}

/* ---- section blocks ----
   Every section below the hero opens on a hairline with a short gold mark
   struck through it, so the page reads as discrete blocks rather than one
   continuous column of prose. The dark quote band sits outside .silk and is
   left alone — it already divides the page on its own. */
.silk>section{border-top:1px solid var(--hair);position:relative}
.silk>section::after{content:"";position:absolute;top:-1px;left:50%;
  transform:translateX(-50%);width:88px;height:2px;background:var(--gold)}
.silk>section:first-child{border-top:none}
.silk>section:first-child::after{display:none}

.eyebrow{display:flex;align-items:center;gap:18px;
  font-size:.8rem;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-ink);
  margin-bottom:26px}
.eyebrow::before{content:"";height:1px;width:44px;background:var(--hair-gold)}
.eyebrow.mid{justify-content:center}
.eyebrow.mid::after{content:"";height:1px;width:44px;background:var(--hair-gold)}
.lede{color:var(--grey);font-size:1.2rem}

/* masked heading reveal — the line rises out of its own baseline */
.mr{display:block;overflow:hidden;padding-bottom:.06em}
.mr>span{display:block;transform:translateY(112%);transition:transform 1.15s var(--ease)}
.in .mr>span,.mr.in>span{transform:none}
.mr:nth-child(2)>span{transition-delay:.1s}
.mr:nth-child(3)>span{transition-delay:.2s}

/* the total rule — a bookkeeping double underline, drawn on arrival */
.sum-rule{display:flex;flex-direction:column;align-items:center;gap:0;padding:0 0 4px;margin:6px 0}
.sum-rule i{display:block;height:1px;width:min(340px,60vw);background:var(--hair);
  transform:scaleX(0);transition:transform 1.2s var(--ease)}
.sum-rule b{display:block;height:0;width:88px;margin-top:9px;
  border-top:1px solid var(--gold);border-bottom:1px solid var(--gold);padding-top:3px;
  transform:scaleX(0);transition:transform 1.2s .25s var(--ease)}
.sum-rule.in i,.sum-rule.in b{transform:scaleX(1)}

/* reveal primitives */
.rv{opacity:0;transform:translateY(24px);transition:opacity 1.05s var(--ease),transform 1.05s var(--ease)}
.rv.in{opacity:1;transform:none}
.d1.d1{transition-delay:.12s}.d2.d2{transition-delay:.24s}.d3.d3{transition-delay:.36s}
.stg>*{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.stg.in>*{opacity:1;transform:none}

.progress{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--gold-deep),var(--gold-soft));
  z-index:200}

/* ================= NAV — dark type, because the page opens light ================= */
header{position:fixed;inset:0 0 auto 0;z-index:100;padding:26px 0;
  transition:background .45s var(--ease),box-shadow .45s var(--ease),padding .45s var(--ease)}
header.solid{background:rgba(255,255,255,.96);backdrop-filter:blur(14px);padding:13px 0;
  box-shadow:0 1px 0 var(--hair)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:15px;text-decoration:none;position:relative;z-index:110}
.brand-mark{width:40px;flex:none;display:block}
.brand-txt{line-height:1.3}
.brand-txt b{font-family:var(--serif);font-weight:500;letter-spacing:.15em;font-size:1.02rem;
  color:var(--black);display:block;text-transform:uppercase;white-space:nowrap}
.brand-txt em{font-style:normal;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  white-space:nowrap;color:var(--gold-ink);font-weight:500}
.nav ul{display:flex;gap:30px;list-style:none;align-items:center}
.nav ul a{font-size:.84rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  text-decoration:none;color:var(--ink);transition:color .3s;position:relative;padding:6px 0}
.nav ul a::after{content:"";position:absolute;left:50%;right:50%;bottom:0;height:1px;background:var(--gold);
  transition:left .4s var(--ease),right .4s var(--ease)}
.nav ul a:hover::after,.nav ul a.current::after{left:0;right:0}
.nav ul a:hover{color:var(--gold-ink)}
@media(max-width:1100px){.brand-txt em{display:none}}
.burger{display:none;padding:10px;position:relative;z-index:110}
.burger span{display:block;width:24px;height:1.4px;background:var(--black);margin:5.5px 0;
  transition:transform .35s var(--ease),opacity .3s}
.burger.x span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.x span:nth-child(2){opacity:0}
.burger.x span:nth-child(3){transform:translateY(-6.9px) rotate(-45deg)}
@media(max-width:1000px){
  .nav ul{position:fixed;inset:0;background:rgba(255,255,255,.99);flex-direction:column;
    justify-content:center;gap:34px;transform:translateY(-102%);visibility:hidden;
    transition:transform .55s var(--ease),visibility 0s linear .55s}
  .nav ul.open{transform:none;visibility:visible;transition-delay:0s}
  .nav ul a{font-size:1.05rem}
  .burger{display:block}
}

/* ================= HERO — typographic. No photograph competes with the name. =================
   An engraved hairline frame — the device an audit firm signs its certificates with —
   is drawn from the centre out. The mark takes a single pass of light. Each line of
   the masthead rises out of its own baseline. Nothing here is photography, so it
   never loads slowly and never looks like a template. */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  text-align:center;padding:118px 0 40px;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(780px 540px at 50% 42%, #FFFFFF, transparent 68%),
    radial-gradient(1200px 700px at 50% -14%, rgba(190,154,80,.10), transparent 62%),
    radial-gradient(940px 720px at 3% 97%, rgba(190,154,80,.07), transparent 60%),
    radial-gradient(940px 720px at 97% 90%, rgba(190,154,80,.055), transparent 58%),
    #FFFFFF}
/* the finest possible tooth, so the white never reads as flat screen-white */
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='1' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .72 0 0 0 0 .60 0 0 0 0 .36 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E")}

.hero-inner{flex:1;position:relative;display:flex;align-items:center;justify-content:center;
  padding:clamp(26px,4.6vh,56px) 0}
.hero-stage{position:relative;z-index:2}

/* ---- the engraved frame: four hairlines drawn from the centre, with corner marks ----
   An audit firm signs certificates. The page borrows the device. */
.hero-frame{position:absolute;z-index:1;pointer-events:none;
  inset:0 max(clamp(22px,3vw,54px), calc((100% - 1340px) / 2))}
.hero-frame i{position:absolute;animation:1.5s var(--ease) forwards;animation-play-state:paused}
.hero-frame i:nth-child(1),.hero-frame i:nth-child(2){left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(190,154,80,.9) 22%,rgba(190,154,80,.9) 78%,transparent)}
.hero-frame i:nth-child(1){top:0}
.hero-frame i:nth-child(1),.hero-frame i:nth-child(2){transform:scaleX(0);animation-name:drawx}
.hero-frame i:nth-child(2){bottom:0;animation-delay:.06s}
.hero-frame i:nth-child(3),.hero-frame i:nth-child(4){top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,transparent,rgba(190,154,80,.78) 26%,rgba(190,154,80,.78) 74%,transparent)}
.hero-frame i:nth-child(3),.hero-frame i:nth-child(4){transform:scaleY(0);animation-name:drawy}
.hero-frame i:nth-child(3){left:0;animation-delay:.12s}
.hero-frame i:nth-child(4){right:0;animation-delay:.18s}
@keyframes drawx{to{transform:scaleX(1)}}
@keyframes drawy{to{transform:scaleY(1)}}
.hero-frame u{position:absolute;width:16px;height:16px;opacity:0;
  border:0 solid var(--gold);animation:appear 1s .95s var(--ease) forwards;animation-play-state:paused}
@keyframes appear{to{opacity:1}}
.hero-frame u:nth-of-type(1){top:-1px;left:-1px;border-top-width:2px;border-left-width:2px}
.hero-frame u:nth-of-type(2){top:-1px;right:-1px;border-top-width:2px;border-right-width:2px}
.hero-frame u:nth-of-type(3){bottom:-1px;left:-1px;border-bottom-width:2px;border-left-width:2px}
.hero-frame u:nth-of-type(4){bottom:-1px;right:-1px;border-bottom-width:2px;border-right-width:2px}
body.ready .hero-frame i,body.ready .hero-frame u{animation-play-state:running}

/* ---- THE SEAL ----
   Engine-turned guilloché: the lathe engraving that appears on share certificates,
   audited statements and banknotes. It is cut line by line as the page arrives,
   then turns almost imperceptibly, with a single light travelling around it. */
.hero-seal{position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:min(1180px,104vw);aspect-ratio:1;z-index:0;pointer-events:none;
  -webkit-mask-image:radial-gradient(closest-side,transparent 0 25%,#000 45%,#000 85%,transparent 99%);
  mask-image:radial-gradient(closest-side,transparent 0 25%,#000 45%,#000 85%,transparent 99%)}
.hero-seal{will-change:transform}
.hero-seal>div{position:absolute;inset:0;will-change:transform}
.hero-frame{will-change:transform}
/* once the pointer loop is driving them, the CSS orbit stands down */
.hero-seal.live .seal-shine,.hero-seal.live .seal-shine>div{animation:none}
.hero-seal svg{width:100%;height:100%;display:block;overflow:visible}
.hero-seal path{fill:none;stroke:var(--gold);stroke-width:.68;vector-effect:non-scaling-stroke}
.seal-a{opacity:.46;animation:turn 165s linear infinite}
.seal-b{opacity:0;transition:opacity 2s var(--ease);animation:turn 215s linear infinite reverse}
.hero-seal.cut .seal-b{opacity:.28}
.seal-b path{stroke-width:.55}
@keyframes turn{to{transform:rotate(360deg)}}
/* nothing turns once it is off screen */
.hero-seal.rest .seal-a,.hero-seal.rest .seal-b,
.hero-seal.rest .seal-shine,.hero-seal.rest .seal-shine>div{animation-play-state:paused}
/* the travelling light: the window turns, the engraving underneath does not */
.seal-shine{opacity:0;transition:opacity 1.4s var(--ease);
  -webkit-mask-image:conic-gradient(from 0deg,transparent 0 54%,#000 70%,#000 76%,transparent 92%);
  mask-image:conic-gradient(from 0deg,transparent 0 54%,#000 70%,#000 76%,transparent 92%);
  animation:turn 13s linear infinite}
.seal-shine>div{position:absolute;inset:0;will-change:transform;animation:turn 13s linear infinite reverse}
.hero-seal.on .seal-shine{opacity:.7}
.seal-shine path{stroke:var(--gold-ink);stroke-width:.95}

/* the masthead keeps its own pool of quiet, so the engraving never fights the type */
.hero-stage::before{content:"";position:absolute;z-index:-1;inset:-4% -6%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.93) 0 26%,rgba(255,255,255,.72) 56%,transparent)}
.lockup{position:relative}
.lockup::before{content:"";position:absolute;z-index:-1;inset:-12% -6%;
  background:radial-gradient(closest-side,rgba(255,255,255,.9) 0 30%,rgba(255,255,255,.6) 60%,transparent)}

/* editorial micro-type in the frame margins */
.hero-side{font-weight:500;position:absolute;top:50%;font-size:.78rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--grey-lt);white-space:nowrap;z-index:1;
  opacity:0;animation:appear 1.2s 1.15s var(--ease) forwards;animation-play-state:paused}
body.ready .hero-side{animation-play-state:running}
.hero-side.l{left:calc(clamp(22px,3vw,54px) * .46);transform:translate(-50%,-50%) rotate(-90deg)}
.hero-side.r{right:calc(clamp(22px,3vw,54px) * .46);transform:translate(50%,-50%) rotate(90deg)}
@media(max-width:1180px){.hero-side{display:none}}

/* the full lockup — mark, name, rule, tagline */
.lockup{display:block;margin:0 auto 46px;perspective:900px}
.lockup-mark{position:relative;width:clamp(78px,8vw,116px);margin:0 auto 28px;display:block;
  will-change:transform}
/* a specular band that slides across the gold as you move — masked to the mark,
   so it lights the shield itself and never a rectangle around it */
.hero .lockup-mark::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,transparent 32%,rgba(255,255,255,.8) 50%,transparent 68%);
  background-size:260% 100%;background-position:var(--sx,50%) 0;
  -webkit-mask:var(--mark) center/contain no-repeat;mask:var(--mark) center/contain no-repeat;
  opacity:0;transition:opacity .8s var(--ease)}
body.hero-live .hero .lockup-mark::before{opacity:.9}
@keyframes markin{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}
/* a single pass of light over the gold — masked to the mark, so it can never
   read as a rectangle sliding across the page */
.lockup-mark::after{content:"";position:absolute;inset:0;
  background:linear-gradient(104deg,transparent 34%,rgba(255,255,255,.94) 50%,transparent 66%);
  background-size:220% 100%;background-position:112% 0;
  -webkit-mask:var(--mark) center/contain no-repeat;mask:var(--mark) center/contain no-repeat;
  animation:glint 1.25s .55s var(--ease) forwards;animation-play-state:paused}
@keyframes glint{to{background-position:-112% 0}}
@supports not ((-webkit-mask-image:none) or (mask-image:none)){.lockup-mark::after{display:none}}
body.ready .lockup-mark::after{animation-play-state:running}
.lockup-l1,.l2m{display:block;overflow:hidden;padding-bottom:.08em}
.lockup-l1>span,.l2m>span{display:block;font-family:var(--serif);font-weight:400;
  color:var(--black);text-transform:uppercase;line-height:1.08}
.lockup-l1>span{font-size:clamp(1.85rem,4.4vw,3.3rem);letter-spacing:.12em;padding-left:.12em}
.lockup-l2{display:flex;align-items:center;justify-content:center;gap:clamp(12px,2vw,26px);
  margin-top:.1em}
.l2m>span{font-size:clamp(1.5rem,3.5vw,2.7rem);letter-spacing:.14em;padding-left:.14em}
.lockup-l2 i{display:block;height:1px;width:clamp(34px,6vw,84px);
  background:linear-gradient(90deg,transparent,var(--gold))}
.lockup-l2 i:last-child{background:linear-gradient(270deg,transparent,var(--gold))}
@keyframes ruleout{from{width:0}to{width:clamp(34px,6vw,84px)}}
.lockup-tag{display:block;margin-top:18px;font-family:var(--serif);font-weight:400;
  font-size:clamp(0.74rem,1.05vw,0.86rem);letter-spacing:.26em;text-transform:uppercase;
  color:var(--grey);padding-left:.3em}

.hero h1{color:var(--black);font-weight:400;font-size:clamp(1.5rem,2.9vw,2.3rem);line-height:1.3;
  max-width:36ch;margin:0 auto}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.08em}
.hero h1 .ln>span{display:block;transform:translateY(114%);
  animation:rise 1.2s var(--ease) forwards;animation-play-state:paused}
body.ready .hero h1 .ln>span{animation-play-state:running}
.hero h1 .ln:nth-child(1)>span{animation-delay:.2s}
.hero h1 .ln:nth-child(2)>span{animation-delay:.33s}
@keyframes rise{to{transform:none}}
.hero h1 em{font-style:italic;color:var(--gold-ink);font-weight:400}

.hero-sub{margin-top:30px;color:var(--grey);font-weight:500;font-size:.8rem;
  letter-spacing:.28em;text-transform:uppercase}
.hero-sub i{font-style:normal;color:var(--gold-ink);padding:0 12px}
.hero-acts{margin-top:40px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:12px;padding:17px 36px;text-decoration:none;
  font-size:.8rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  border:1px solid #6B5426;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#7C6129 0%,#8A6E33 48%,#7C6129 100%);
  box-shadow:inset 0 1px 0 rgba(255,246,222,.3);
  transition:color .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease),
    box-shadow .4s var(--ease)}
.btn:hover{box-shadow:inset 0 1px 0 rgba(255,244,214,.4),0 14px 30px -18px rgba(20,17,10,.6)}
.btn span{position:relative;z-index:1;display:inline-flex;align-items:center;gap:12px}
.btn::before{content:"";position:absolute;inset:0;background:var(--black);transform:translateY(101%);
  transition:transform .5s var(--ease)}
.btn:hover{border-color:var(--black);transform:translateY(-2px)}
.btn:hover::before{transform:none}
.btn.ghost{background:none;border-color:rgba(20,20,20,.26);color:var(--black);box-shadow:none}
.btn.ghost::before{background:var(--black)}
.btn.ghost:hover{color:#fff;border-color:var(--black)}

@media(max-height:920px){
  .hero{padding:104px 0 32px}
  .lockup{margin-bottom:34px}
  .lockup-mark{width:clamp(62px,6vw,86px);margin-bottom:20px}
  .lockup-tag{margin-top:14px}
  .hero h1{font-size:clamp(1.4rem,2.4vw,1.9rem)}
  .hero-sub{margin-top:22px}
  .hero-acts{margin-top:30px}
}
@media(max-height:770px){
  .hero{padding:104px 0 24px}
  .hero-inner{padding:18px 0}
  .lockup{margin-bottom:26px}
  .lockup-mark{width:clamp(54px,5.2vw,70px);margin-bottom:15px}
  .lockup-l1>span{font-size:clamp(1.6rem,3.4vw,2.5rem)}
  .l2m>span{font-size:clamp(1.3rem,2.7vw,2rem)}
  .lockup-tag{margin-top:11px}
  .hero h1{font-size:clamp(1.3rem,2.1vw,1.6rem)}
  .hero-sub{margin-top:18px}
  .hero-acts{margin-top:24px}
  .btn{padding:14px 30px}
}
@media(max-width:560px){
  .lockup-l2 i{display:none}
  .lockup{margin-bottom:24px}
  .hero-sub{margin-top:16px;letter-spacing:.24em;font-size:0.752rem}
  .hero-acts{margin-top:24px;gap:12px}
  .hero-acts .btn{flex:1 1 100%;justify-content:center}
}
@media(max-height:560px) and (orientation:landscape){
  .hero{min-height:auto;padding:96px 0 18px}
  .hero-inner{padding:14px 0}
  .hero-side{display:none}
}
.fade{opacity:0;transform:translateY(18px);animation:fade 1.2s var(--ease) forwards;
  animation-play-state:paused}
body.ready .fade{animation-play-state:running}
.f1{animation-delay:.3s}.f2{animation-delay:.42s}.f3{animation-delay:.55s}
.f4{animation-delay:.7s}
@keyframes fade{to{opacity:1;transform:none}}

.textlink{display:inline-flex;align-items:center;gap:11px;text-decoration:none;
  font-size:0.798rem;font-weight:400;letter-spacing:.26em;text-transform:uppercase;color:var(--black);
  padding-bottom:5px;border-bottom:1px solid var(--gold);transition:color .35s,gap .35s var(--ease)}
.textlink:hover{color:var(--gold-ink);gap:16px}

/* ================= ABOUT ================= */
.about-card{background:var(--white);border:1px solid var(--hair);box-shadow:var(--shadow);
  position:relative;z-index:5;padding:clamp(40px,5vw,76px)}
#about{padding:clamp(70px,7.4vw,98px) 0}
.about-grid{display:grid;grid-template-columns:1.24fr .76fr;gap:clamp(40px,5vw,72px);align-items:start}
@media(min-width:921px){.partners{position:sticky;top:112px}}
@media(max-width:920px){.about-grid{grid-template-columns:1fr}}
#about h2{font-size:clamp(2rem,3.8vw,2.9rem);margin-bottom:26px}
#about p{color:var(--grey);margin-bottom:20px;font-size:1.106rem}
#about .partner p{font-size:1.015rem;margin-bottom:0;margin-top:12px}

/* ---- keep consecutive paragraphs together ----
   Only the gap between one paragraph and the next is pulled in, so a passage
   reads as one piece. Space before a heading, a link or a block is untouched,
   and the partner cards and service card detail are deliberately left alone. */
.about-grid>div>p+p,
.about-more-static p+p,
.about-grid>div>p+.about-more-static{margin-top:-11px}
.cred{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hair);
  margin-top:clamp(38px,5vw,64px);padding-top:clamp(30px,3.5vw,44px);gap:24px}
@media(max-width:760px){.cred{grid-template-columns:repeat(2,1fr);gap:30px}}
.cred div{text-align:center}
.cred b{font-family:var(--serif);font-weight:500;font-size:clamp(1.9rem,3.2vw,2.5rem);color:var(--black);
  display:block;line-height:1.1}
.cred b i{font-style:normal;color:var(--gold-ink);font-size:.62em;vertical-align:.3em}
.cred span{display:block;margin-top:10px;font-size:0.73rem;font-weight:500;letter-spacing:.28em;
  text-transform:uppercase;color:var(--grey-lt)}

/* partners */
.partners{display:grid;gap:20px;align-content:start}
.partners-lbl{display:block;font-size:.76rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold-ink);padding-bottom:4px;border-bottom:1px solid var(--hair-gold);margin-bottom:6px}
.partner{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;
  border:1px solid var(--hair);padding:28px 30px;background:var(--white);
  transition:border-color .45s var(--ease),background .45s var(--ease),
    opacity 1.05s var(--ease),transform .5s var(--ease)}
.partner:hover{border-color:var(--hair-gold);background:#fff;transform:translateY(-3px)}
.p-initial{font-family:var(--serif);font-size:2.5rem;line-height:1;color:var(--gold);
  opacity:.55;width:1.1em;text-align:center}
.partner b{display:block;font-family:var(--serif);font-weight:500;font-size:1.3rem;color:var(--black)}
.partner .desig{font-weight:500;display:inline-block;margin-top:7px;font-size:0.74rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold-ink);line-height:1.7}
@media(max-width:420px){.partner{grid-template-columns:1fr;gap:10px}.p-initial{text-align:left}}

/* ================= SERVICES ================= */
.services .head{text-align:center;max-width:640px;margin:0 auto 58px}
.services h2{font-size:clamp(2rem,3.8vw,2.9rem)}
.services h2 em{font-style:normal;color:var(--gold-ink)}
.services .head>.lede:first-child{margin-top:0}
.services .lede{margin-top:20px}
.services .lede em{font-family:var(--serif);font-style:italic}
.svc-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:26px}
/* Cards size to their own content, so opening one doesn't stretch its neighbour
   into a tall empty box. Only on the home page grid — the services page, where
   everything is open anyway, keeps its even row bottoms. */
.svc-grid.expands{align-items:start}
.tilt{will-change:transform;position:relative}
/* while tilting, transform tracks the cursor instantly; everything else still eases */
.tilt.tilting{transition-property:box-shadow,border-color,background,opacity}
.glare{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0;transition:opacity .4s;
  background:radial-gradient(520px circle at var(--gx,50%) var(--gy,50%),rgba(190,154,80,.13),transparent 46%)}
.tilt:hover .glare{opacity:1}
.svc-card{grid-column:span 2;background:var(--white);border:1px solid var(--hair);
  padding:48px 40px 40px;display:flex;flex-direction:column;
  transition:box-shadow .45s var(--ease),border-color .45s,
    opacity 1.05s var(--ease),transform 1.05s var(--ease)}
.svc-card::before{content:"";position:absolute;top:-1px;left:0;right:0;height:2px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.svc-card:hover{box-shadow:var(--shadow);border-color:var(--hair-gold)}
.svc-card:hover::before{transform:scaleX(1)}
.svc-card:nth-child(4){grid-column:2/span 2}
.svc-card:nth-child(5){grid-column:4/span 2}
@media(max-width:980px){
  .svc-grid{grid-template-columns:1fr 1fr}
  .svc-card,.svc-card:nth-child(4),.svc-card:nth-child(5){grid-column:span 1}
  .svc-card:nth-child(5){grid-column:span 2;max-width:520px;justify-self:center;width:100%}
}
@media(max-width:640px){
  .svc-grid{grid-template-columns:1fr}
  .svc-card,.svc-card:nth-child(5){grid-column:span 1;max-width:none}
}
.svc-ic{color:var(--gold);margin-bottom:28px;display:inline-block}
.svc-card h3{font-size:1.32rem;margin-bottom:18px}
.svc-card ul{list-style:none}
.svc-card li{color:var(--grey);font-size:1.049rem;padding:8px 0 8px 24px;position:relative;
  border-bottom:1px solid rgba(20,20,20,.05)}
.svc-card li:last-child{border-bottom:none}
.svc-card li::before{content:"";position:absolute;left:0;top:19px;width:9px;height:1px;background:var(--gold)}
.svc-note{text-align:center;margin-top:44px}

/* ================= OBJECTIVE ================= */
.objective{text-align:center}
.objective h2{font-size:clamp(2rem,3.8vw,2.9rem);margin-bottom:22px}
.obj-tag{font-family:var(--serif);font-style:italic;color:var(--grey);font-size:1.3rem;
  max-width:48ch;margin:0 auto 64px;line-height:1.9}
.obj-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:0;text-align:left;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);background:var(--white)}
@media(max-width:1000px){.obj-cols{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.obj-cols{grid-template-columns:1fr}}
.obj-col{padding:clamp(34px,3.4vw,46px) clamp(24px,2.4vw,34px);border-right:1px solid var(--hair);
  transition:background .5s var(--ease),opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.obj-col:hover{background:#FBF8F2}
.obj-col:last-child{border-right:none}
@media(max-width:1000px){
  .obj-col:nth-child(2n){border-right:none}
  .obj-col:nth-child(-n+2){border-bottom:1px solid var(--hair)}
}
@media(max-width:640px){.obj-col{border-right:none;border-bottom:1px solid var(--hair)}
  .obj-col:last-child{border-bottom:none}}
.obj-num{font-family:var(--serif);font-size:1.026rem;color:var(--gold-ink);letter-spacing:.14em;display:block;margin-bottom:18px}
.obj-col h3{font-size:1.18rem;margin-bottom:14px}
.obj-col p{color:var(--grey);font-size:1.037rem}

/* ================= QUOTE ================= */
.quote{background:linear-gradient(180deg,#171310,#121212 30%,#121212 70%,#171310);
  color:#fff;text-align:center;padding:150px 0;overflow:hidden;position:relative}
.quote::before{content:"";position:absolute;inset:0;opacity:.55;
  background:radial-gradient(820px 420px at 50% 8%,rgba(190,154,80,.2),transparent 70%)}
.quote .thread{position:absolute;left:50%;width:1px;background:linear-gradient(180deg,var(--gold),transparent);
  height:74px;top:0}
.quote .thread.b{top:auto;bottom:0;background:linear-gradient(0deg,var(--gold),transparent)}
.quote .wrap{max-width:820px;position:relative}
.qmark{font-family:var(--serif);font-size:4.4rem;line-height:.4;color:var(--gold);display:block;margin-bottom:34px}
.quote p{font-family:var(--serif);font-weight:400;font-style:italic;
  font-size:clamp(1.25rem,2.4vw,1.7rem);line-height:1.95;color:rgba(255,255,255,.94)}
.signature{font-family:var(--script);font-size:clamp(2.3rem,4vw,3.1rem);color:var(--gold-soft);
  margin-top:44px;display:block;transform:translateY(24px) rotate(-2deg)}
.signature.rv.in{transform:rotate(-2deg)}
.sig-role{font-size:.76rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.62);
  margin-top:14px;display:block;font-weight:400}

/* ================= GET IN TOUCH ================= */
.touch-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(34px,4.5vw,72px);
  align-items:start}
/* without the form this column stands alone and centres above the offices */
.touch-solo{display:block;max-width:64ch;margin:0 auto;text-align:center}
.touch-solo .eyebrow{justify-content:center}
.touch-solo .eyebrow::after{content:"";height:1px;width:44px;background:var(--hair-gold)}
.touch-solo .touch-intro>p{margin-left:auto;margin-right:auto}
.touch-solo .hours{max-width:30ch;margin-left:auto;margin-right:auto}
.touch-grid>*{min-width:0}
@media(max-width:920px){.touch-grid{grid-template-columns:1fr}.touch-intro{max-width:640px}}
.office-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3vw,44px);
  margin-top:clamp(38px,4vw,56px)}
.office-grid>*{min-width:0}
@media(max-width:760px){.office-grid{grid-template-columns:1fr}}
.touch-intro h2{font-size:clamp(2.1rem,4vw,3.1rem);line-height:1.28;margin-bottom:38px}
.touch-intro>p{color:var(--grey);font-size:1.14rem;margin-bottom:26px;max-width:52ch}
.touch-intro h3{font-size:1.2rem;letter-spacing:.06em;color:var(--black);margin-bottom:12px;
  font-family:var(--serif);font-weight:500}
.hours{list-style:none;margin-bottom:28px}
.hours li{display:flex;justify-content:space-between;gap:20px;padding:13px 2px;border-bottom:1px solid var(--hair);
  font-size:1.049rem;color:var(--grey)}
.hours li b{font-weight:400;color:var(--black)}
.follow{font-size:.8rem;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:18px}
.insta{width:48px;height:48px;border-radius:50%;border:1px solid var(--hair);color:var(--black);
  display:inline-grid;place-items:center;
  transition:background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease),
    opacity 1.05s var(--ease),transform .5s var(--ease)}
.insta:hover{background:var(--black);border-color:var(--black);color:var(--gold-soft);transform:translateY(-3px)}
.office{background:var(--white);border:1px solid var(--hair);box-shadow:var(--shadow);
  padding:44px clamp(24px,3vw,40px) 40px;position:relative;min-width:0;
  transition:box-shadow .5s var(--ease),opacity 1.05s var(--ease),transform .5s var(--ease)}
.o-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  border-bottom:1px solid var(--hair);padding-bottom:22px;margin-bottom:26px}
.office h3{font-size:1.55rem}
.o-city{font-size:0.74rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-ink)}

.o-row{display:grid;grid-template-columns:84px minmax(0,1fr);gap:18px;padding:12px 0;align-items:baseline;
  border-bottom:1px solid rgba(20,20,20,.05)}
@media(max-width:430px){.o-row{grid-template-columns:1fr;gap:4px}}
.o-row dt{font-size:0.73rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-ink)}
.o-row dd{font-size:1.049rem;color:var(--grey);overflow-wrap:anywhere;min-width:0}
.o-row dd a{text-decoration:none;transition:color .3s}
.o-row dd a:hover{color:var(--gold-ink)}
.o-row dd.addr{font-style:italic}
.office iframe{width:100%;height:210px;border:0;margin-top:24px;filter:saturate(.8) contrast(.98)}
.o-mapbtn{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font-size:0.775rem;font-weight:400;
  letter-spacing:.26em;text-transform:uppercase;color:var(--black);text-decoration:none;
  padding-bottom:5px;border-bottom:1px solid var(--gold);transition:color .3s,gap .35s var(--ease)}
.o-mapbtn:hover{color:var(--gold-ink);gap:15px}

/* ================= FOOTER ================= */
footer{background:var(--black);color:rgba(255,255,255,.72);padding:88px 0 40px;position:relative;overflow:hidden}
footer::before{content:"";position:absolute;inset:0;opacity:.4;
  background:radial-gradient(700px 320px at 85% 100%,rgba(190,154,80,.16),transparent 70%)}
footer .wrap{position:relative}
.foot{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:54px;margin-bottom:60px}
@media(max-width:820px){.foot{grid-template-columns:1fr;gap:44px}}
.foot .brand-txt b{color:#fff}
.foot .brand-txt em{color:var(--gold-soft)}
.foot p{font-size:1.003rem;margin-top:22px;max-width:36ch;color:rgba(255,255,255,.5)}
.foot h4{font-size:.78rem;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:24px}
.foot ul{list-style:none}
.foot li{margin-bottom:13px;font-size:1.026rem;color:rgba(255,255,255,.66)}
.foot a{text-decoration:none;color:rgba(255,255,255,.66);transition:color .3s}
.foot a:hover{color:var(--gold-soft)}
.foot-base{border-top:1px solid rgba(255,255,255,.09);padding-top:30px;display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:14px;font-size:0.821rem;letter-spacing:.14em;color:rgba(255,255,255,.58)}
.foot-base .credit{color:rgba(255,255,255,.46)}
.foot-base .credit b{font-weight:400;color:var(--gold-soft);letter-spacing:.1em}
.foot-base .credit a{color:inherit;text-decoration:none;
  transition:color .35s var(--ease)}
.foot-base .credit a b{border-bottom:1px solid transparent;
  transition:color .35s var(--ease),border-color .35s var(--ease)}
.foot-base .credit a:hover{color:rgba(255,255,255,.72)}
.foot-base .credit a:hover b{color:#EBD8A8;border-bottom-color:rgba(216,188,131,.55)}
.foot-base .credit a:focus-visible{outline:1px solid var(--gold-soft);outline-offset:3px}
@media(max-width:820px){.foot-base{justify-content:center;text-align:center}}

:focus-visible{outline:2px solid var(--gold-ink);outline-offset:3px;box-shadow:0 0 0 4px rgba(190,154,80,.32)}
/* ============ THE FAILSAFE ============
   Every resting state above is a hidden one, which is only safe if something is
   guaranteed to un-hide it. The <head> script adds .anim to <html>; if that script
   is blocked — CSP, a proxy, a parse error, scripting disabled — none of these
   resting states apply and the page simply renders, finished, with no motion. */
html:not(.anim) .rv,html:not(.anim) .fade,html:not(.anim) .stg>*,
html:not(.anim) .hero-frame u,html:not(.anim) .hero-side{opacity:1;transform:none}
html:not(.anim) .mr>span,html:not(.anim) .hero h1 .ln>span,html:not(.anim) .hero-frame i,
html:not(.anim) .sum-rule i,html:not(.anim) .sum-rule b{transform:none}
html:not(.anim) .lockup-mark::after{display:none}
html:not(.anim) .loader{display:none}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .hero-frame u,.hero-side{opacity:1!important;transform:none!important}
  .seal-a,.seal-b,.seal-shine,.seal-shine>div{animation:none!important}
  .hero h1 .ln>span,.hero-frame i{transform:none!important}
  .lockup-mark::after{display:none}
  html{scroll-behavior:auto}
  .rv,.fade,.stg>*{opacity:1;transform:none}
  .mr>span{transform:none}
  .sum-rule i,.sum-rule b{transform:none}
  .loader{display:none}
}

/* ================= INNER PAGE HEAD =================
   The hero's own machinery — frame, seal, pool of quiet — at a shorter measure.
   No photography, so every page opens in the same voice as the front door. */
html.seen .loader{display:none}

.page-head{min-height:0;padding:132px 0 0;
  background:
    radial-gradient(900px 340px at 50% 40%, #FFFFFF, transparent 70%),
    radial-gradient(1200px 420px at 50% -30%, rgba(190,154,80,.09), transparent 66%),
    #FFFFFF}
.page-head .hero-inner{padding:clamp(44px,7vh,82px) 0}
.page-head .hero-seal{left:0;right:0;width:100%;translate:0 -50%;aspect-ratio:auto;
  height:clamp(190px,26vw,250px);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 27%,transparent 45%,
    transparent 55%,#000 73%,#000 91%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 27%,transparent 45%,
    transparent 55%,#000 73%,#000 91%,transparent 100%)}
.page-head .hero-seal svg{height:100%}
/* a ribbon reads as a border, so it neither turns nor takes the travelling light */
.page-head .seal-a,.page-head .seal-b{animation:none}
.page-head .seal-shine{display:none}
.page-head .seal-a{opacity:.5}
.page-head .hero-seal.cut .seal-b{opacity:.32}
.page-head h1{font-family:var(--serif);font-weight:400;color:var(--black);
  font-size:clamp(2rem,4.2vw,3.2rem);line-height:1.18;max-width:22ch;margin:0 auto}
.page-head .hero-sub{margin-top:24px;text-transform:none;letter-spacing:.02em;
  font-size:1.06rem;font-weight:400;font-style:italic;font-family:var(--serif)}
.page-head .eyebrow{margin-bottom:22px}
@media(max-width:700px){.page-head{padding-top:112px}}

/* copy that used to sit behind a Read More now runs in full on its own page */
.svc-full{padding-top:20px;border-top:1px solid var(--hair);margin-top:20px}
.svc-full p{color:var(--grey);font-size:1.049rem;margin-bottom:14px}
.svc-full p:last-child{margin-bottom:0}

/* ---- expandable service cards (home page only) ----
   The card carries the detail from the services page, folded away until asked for. */
.svc-card.expandable{cursor:pointer}
.svc-more{display:inline-flex;align-items:center;gap:9px;margin-top:20px;padding:0;
  font-family:var(--sans);font-size:.76rem;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gold-ink);cursor:pointer}
.svc-more:hover{color:var(--gold-deep)}
.svc-more:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
.svc-chev{display:inline-flex;transition:transform .45s var(--ease)}
.svc-card.expandable.open .svc-chev{transform:rotate(180deg)}

.svc-card.expandable .svc-full{
  max-height:0;overflow:hidden;visibility:hidden;
  margin-top:0;padding-top:0;border-top-color:transparent;
  transition:max-height .5s var(--ease),margin-top .5s var(--ease),
    padding-top .5s var(--ease),border-top-color .5s var(--ease),visibility 0s linear .5s}
.svc-card.expandable.open .svc-full{
  max-height:760px;visibility:visible;
  margin-top:20px;padding-top:20px;border-top-color:var(--hair);
  transition:max-height .6s var(--ease),margin-top .6s var(--ease),
    padding-top .6s var(--ease),border-top-color .6s var(--ease),visibility 0s}

@media(prefers-reduced-motion:reduce){
  .svc-card.expandable .svc-full,.svc-card.expandable.open .svc-full,.svc-chev{transition:none}
}
.about-more-static p{color:var(--grey);margin-bottom:20px}
.obj-more-static{max-width:74ch;margin:44px auto 0;text-align:left}
.obj-more-static p{color:var(--grey);margin-bottom:20px}
.obj-more-static p:last-child{margin-bottom:0}

/* the closing invitation at the foot of an inner page */
.page-cta{text-align:center;border-top:1px solid var(--hair);background:var(--white)}
.page-cta h2{font-size:clamp(1.7rem,3.2vw,2.5rem);margin-bottom:18px}
.page-cta p{color:var(--grey);max-width:52ch;margin:0 auto 34px}
.page-cta .btn{margin:0 6px}

/* the two-office summary on the front page */
.ot-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,40px);margin-top:52px}
@media(max-width:760px){.ot-grid{grid-template-columns:1fr}}
.ot-card{display:block;text-decoration:none;border:1px solid var(--hair);background:var(--white);
  padding:clamp(30px,3.4vw,44px);transition:border-color .45s var(--ease),box-shadow .45s var(--ease),
    opacity 1.05s var(--ease),transform .5s var(--ease)}
.ot-card:hover{border-color:var(--hair-gold);box-shadow:var(--shadow);transform:translateY(-3px)}
.ot-card h3{font-size:1.5rem;margin-bottom:6px}
.ot-card .o-city{display:block;margin-bottom:18px}
.ot-card p{color:var(--grey);font-size:.95rem;margin-bottom:22px}
.offices-teaser{text-align:center}
.offices-teaser .ot-card{text-align:left}

/* ── Justified body copy ─────────────────────────────────────────
   Mirrors Word's "Justify" (blocked) alignment on all body text.
   Hyphenation is enabled so justification doesn't open up rivers
   of white space in narrow columns. Centred display copy keeps its
   centring but is justified internally via text-align-last.       */
.about-grid p,
.about-more-static p,
.obj-col p,
.obj-more-static p,
.svc-full p,
.svc-card > p,
.svc-card h3,
.svc-card li,
.partner p,
.foot p{
  text-align:justify;
  -webkit-hyphens:auto;hyphens:auto;
  hyphenate-limit-chars:6 3 3;
}

/* Centred display copy: justified lines, last line stays centred */
.services .head .lede,
.obj-tag,
.page-cta p,
.svc-note,
.quote p,
.touch-intro > p:not(.follow){
  text-align:justify;text-align-last:center;
  -webkit-hyphens:auto;hyphens:auto;
  hyphenate-limit-chars:6 3 3;
}

/* Single-line labels caught by the rules above are opted back out */
.foot .foot-base p{text-align:inherit;text-align-last:auto;
  -webkit-hyphens:manual;hyphens:manual}

/* ── Partner photo, home page About block ────────────────────────
   Sits in the right-hand column beside the founding story. The image
   is cropped by the browser rather than on disk, so the same file
   works at every breakpoint.                                       */
.about-photo{margin:0;position:relative}
.about-photo img{
  display:block;width:100%;height:auto;
  aspect-ratio:869/1101;object-fit:cover;object-position:50% 28%;
  border:1px solid var(--hair);
  box-shadow:var(--shadow);
}
/* Hairline gold rule echoing the card detailing elsewhere on the site */
.about-photo::after{
  content:"";position:absolute;left:0;bottom:-1px;width:64px;height:2px;
  background:var(--gold)}

/* On desktop the photo is tied to the height of the story beside it, so the
   two columns end level instead of the image running on past the link. The
   image is absolutely positioned so it fills that height without setting it. */
@media(min-width:921px){
  /* align-self on the figure alone, so the About page's sticky partner
     column (same .about-grid) keeps its top alignment untouched. */
  .about-photo{align-self:stretch;min-height:300px}
  .about-photo img{
    position:absolute;inset:0;
    width:100%;height:100%;aspect-ratio:auto;
    object-position:50% 22%;
  }
}
@media(max-width:920px){
  .about-photo{max-width:420px;margin:44px auto 0}
  .about-photo img{aspect-ratio:4/5}
}