:root{--bone:#EEEBE4;--card:#F8F6F1;--ink:#0B1522;--navy:#0F2138;--brass:#B08D4F;--brass-d:#7A5E2A;--del:#8C2F39;--ins:#1F6B4F;--mut:#4F5866;--line:#D2CDC0}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--bone);color:var(--ink);font:400 1.1rem/1.7 "Schibsted Grotesk",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:99}.skip:focus{left:0}
:focus-visible{outline:3px solid var(--brass);outline-offset:3px}
.banner{background:var(--ink);color:#DDD8CB;text-align:center;font-size:.85rem;padding:.55rem 1rem}.banner a{color:#fff}
.mono{font:500 .78rem "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-d);margin-bottom:1.3rem}
h1,h2,h3{font-family:"Schibsted Grotesk",sans-serif;font-weight:700;line-height:1.04;letter-spacing:-.03em}
em{font-family:"Instrument Serif",serif;font-style:italic;font-weight:400;letter-spacing:-.005em}
.sub{color:var(--mut);margin-top:1.3rem;max-width:34rem}

.top{display:flex;justify-content:space-between;align-items:center;padding:1.1rem clamp(1.2rem,4vw,3.5rem);position:absolute;left:0;right:0;z-index:20;color:#fff}
.mark{font:700 1.3rem "Schibsted Grotesk";text-decoration:none;letter-spacing:-.02em}.mark i{font:italic 400 1.4rem "Instrument Serif";color:var(--brass)}
.top nav{display:flex;align-items:center;gap:1.8rem}.top nav a{text-decoration:none;font-weight:500;font-size:.98rem}.top nav a:not(.top__cta):hover{text-decoration:underline;text-underline-offset:6px}
.top__cta{border:1px solid rgba(255,255,255,.6);padding:.7rem 1.2rem;border-radius:2px;transition:background .2s,color .2s}.top__cta:hover{background:#fff;color:var(--ink)}

.hero{position:relative;min-height:calc(100svh - 2.4rem);display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:var(--navy)}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;filter:grayscale(.35) contrast(1.05) brightness(.9);opacity:.85;animation:drift 22s ease-out both}
@keyframes drift{from{transform:scale(1.12)}to{transform:scale(1)}}
.hero__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,33,56,.35) 0%,rgba(15,33,56,0) 35%,rgba(11,21,34,.85) 100%),linear-gradient(90deg,rgba(11,21,34,.78) 0%,rgba(11,21,34,.35) 45%,transparent 70%)}
.hero__in{position:relative;padding:8rem clamp(1.2rem,4vw,3.5rem) clamp(3.5rem,7vw,6rem);max-width:64rem}
.hero .mono{color:var(--brass)}
h1{font-size:clamp(2.8rem,6.8vw,6rem);margin-bottom:1.6rem}
h1 em{color:var(--brass);font-size:1.08em}
.lead{font-size:1.25rem;max-width:36rem;color:#DDE2EA}
.hero__cta{display:flex;align-items:center;gap:1.8rem;margin-top:2.2rem;flex-wrap:wrap}
.btn{display:inline-block;background:var(--brass);color:var(--ink);padding:1.05rem 1.7rem;border:0;border-radius:2px;font:700 1.02rem "Schibsted Grotesk";text-decoration:none;cursor:pointer;transition:background .2s,transform .15s}
.btn:hover{background:#C6A366;transform:translateY(-2px)}
.lnk{font-weight:500;text-underline-offset:6px;text-decoration-thickness:1px}
.cap{position:absolute;right:clamp(1.2rem,4vw,3.5rem);bottom:1.4rem;font:400 .78rem "IBM Plex Mono";letter-spacing:.1em;text-transform:uppercase;color:#9DA7B5}

.letter{background:var(--card);padding:7rem clamp(1.2rem,4vw,3.5rem)}
.letter__in{max-width:72rem;margin:0 auto;display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,6vw,6rem);align-items:start}
h2{font-size:clamp(2.2rem,4.6vw,4rem)}
h2 em{color:var(--brass-d)}
.doc{background:#fff;border:1px solid var(--line);box-shadow:0 24px 60px -30px rgba(11,21,34,.4)}
.doc__bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.7rem 1.1rem;background:var(--bone);border-bottom:1px solid var(--line);font:500 .78rem "IBM Plex Mono",monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);flex-wrap:wrap}
.doc__bar button{font:600 .88rem "Schibsted Grotesk";background:var(--ink);color:#fff;border:0;padding:.6rem 1rem;border-radius:2px;cursor:pointer;min-height:44px;text-transform:none;letter-spacing:0}
.doc__bar button:hover{background:var(--navy)}
.doc__body{padding:clamp(1.3rem,3vw,2.4rem);display:grid;gap:1.5rem;font-size:1.08rem;line-height:1.7}
.doc__body b{font-weight:700}
.del{color:var(--del);text-decoration:line-through;text-decoration-thickness:1.5px}
.ins{color:var(--ins);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.js .ins{opacity:0;transition:opacity .7s}.js .doc.seen .ins,.js .doc.clean .ins{opacity:1}
.doc.clean .del{display:none}.doc.clean .ins{color:var(--ink);text-decoration:none}

.matters{padding:7rem clamp(1.2rem,4vw,3.5rem);max-width:80rem;margin:0 auto;display:grid;grid-template-columns:.8fr 1.4fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.matters__l{position:sticky;top:2rem}
.tbl{width:100%;border-collapse:collapse}
.tbl thead th{font:500 .74rem "IBM Plex Mono";letter-spacing:.12em;text-transform:uppercase;color:var(--mut);text-align:left;padding:0 1rem .8rem 0;border-bottom:2px solid var(--ink)}
.tbl th,.tbl td{padding:1.4rem 1.2rem 1.4rem 0;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}
.tbl tbody th{font:700 1.1rem/1.25 "Schibsted Grotesk";width:31%}
.tbl td{color:var(--mut);font-size:1rem}.tbl td:last-child{color:var(--ink);font-weight:500}
.tbl tbody tr{transition:background .25s}.tbl tbody tr:hover{background:var(--card)}

.band{position:relative;min-height:72svh;display:grid;align-items:end;overflow:hidden;background:var(--navy)}
.band img{position:absolute;inset:-12% 0;width:100%;height:124%;object-fit:cover;filter:grayscale(1) contrast(1.05) brightness(.55)}
.band__q{position:relative;padding:4rem clamp(1.2rem,6vw,6rem);color:#fff;font:700 clamp(1.9rem,4.6vw,4rem)/1.08 "Schibsted Grotesk";letter-spacing:-.03em;max-width:58rem}
.band__q em{color:var(--brass)}
.band__q cite{display:block;font:500 .82rem "IBM Plex Mono";letter-spacing:.12em;text-transform:uppercase;margin-top:1.5rem;color:#B9C1CD;font-style:normal}

.partners{padding:7rem clamp(1.2rem,4vw,3.5rem);max-width:80rem;margin:0 auto}
.ppl{display:grid;grid-template-columns:repeat(3,1fr);gap:2.6rem;margin-top:3.4rem}
.ppl article{border-top:2px solid var(--ink);padding-top:1.4rem}
.ppl h3{font-size:1.6rem}
.role{font:500 .78rem "IBM Plex Mono";letter-spacing:.1em;text-transform:uppercase;color:var(--brass-d);margin:.5rem 0 1rem}
.ppl article p:last-child{color:var(--mut);font-size:1.02rem}

.contact{background:var(--navy);color:#fff;padding:7rem clamp(1.2rem,4vw,3.5rem)}
.contact__in{max-width:72rem;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.contact .mono{color:var(--brass)}.contact h2 em{color:var(--brass)}.contact .sub{color:#B9C1CD}
.form{display:grid;gap:1.3rem}
.form label{display:grid;gap:.5rem;font-weight:500;font-size:.95rem}
.form input,.form textarea{font:400 1.05rem "Schibsted Grotesk";padding:1rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.25);border-radius:2px;color:#fff}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--brass);background:rgba(255,255,255,.1)}
.form .btn{justify-self:start}
.fnote{min-height:1.6em;color:var(--brass);font-weight:500}
.fine{color:#8F9AAA;font-size:.85rem}
.foot{background:var(--ink);color:#8F9AAA;padding:1.6rem clamp(1.2rem,4vw,3.5rem) 2.4rem;font-size:.82rem}.foot a{color:#CFC8B8}

.js .rise{opacity:0;transform:translateY(22px);transition:opacity .8s,transform .9s cubic-bezier(.22,.61,.36,1)}.js .rise.in{opacity:1;transform:none}
@media (max-width:960px){
  .top nav a:not(.top__cta){display:none}
  .letter__in,.matters,.contact__in{grid-template-columns:1fr}.matters__l{position:static}
  .ppl{grid-template-columns:1fr}
  .tbl thead{display:none}.tbl,.tbl tbody,.tbl tr,.tbl th,.tbl td{display:block;width:100%!important}
  .tbl tr{padding:1.1rem 0;border-bottom:1px solid var(--line)}.tbl th,.tbl td{border:0;padding:.2rem 0}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}.js .ins,.js .rise{opacity:1;transform:none}}

/* hero: the headline settles in quietly, then the rest follows */
.js h1{animation:settle 1.1s cubic-bezier(.22,.61,.36,1) .2s backwards}
.js .hero .lead,.js .hero__cta{animation:settle .9s ease .75s backwards}
@keyframes settle{from{opacity:0;transform:translateY(14px)}}

/* engagement letter: struck through and rewritten as you read */
.letter__in{position:relative}
.js .letter.pin{padding:0;min-height:420vh}
.js .letter.pin .letter__in{position:sticky;top:0;min-height:100vh;align-content:center;padding:4.5rem 0}
.js .letter.pin .doc__body{gap:.9rem;font-size:.98rem;line-height:1.55;padding:1.4rem 1.8rem}
.js .letter.pin .sig{width:240px}
.js .letter.pin .letter__in{padding:2rem 0}
.steps{list-style:none;padding:0;margin-top:2rem;display:grid;gap:.15rem;font:500 .8rem "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:#9a958a}
.steps li{display:flex;gap:.9rem;align-items:center;padding:.45rem 0;transition:color .3s}
.steps li::before{content:"";width:22px;height:1px;background:currentColor;transition:width .4s}
.steps li.on{color:var(--ink)}.steps li.on::before{width:44px;background:var(--brass)}
.steps li.done{color:var(--ins)}
.js .del{text-decoration:none;background:linear-gradient(var(--del),var(--del)) no-repeat 0 58%/calc(var(--p,1)*100%) 1.7px}
.js .ins{opacity:var(--q,1);text-decoration:none;background:linear-gradient(var(--ins),var(--ins)) no-repeat 0 100%/calc(var(--q,1)*100%) 1.5px;padding-bottom:2px;transition:none}
.js .doc.clean .ins{background:none;opacity:1}
.cl{display:grid;gap:.35rem}
.cl>p:first-child b{transition:box-shadow .4s}
.cl.on>p:first-child b{box-shadow:inset 0 -.42em rgba(176,141,79,.28)}
.note{font:500 .8rem "IBM Plex Mono",monospace;letter-spacing:.02em;color:var(--brass-d);opacity:var(--n,1);transform:translateX(calc((1 - var(--n,1))*14px))}
.note::before{content:"\21B3\00a0"}
.doc.clean .note{display:none}
.sign{border-top:1px solid var(--line);padding-top:1.1rem;display:grid;gap:.2rem}
.sign__l,.sign__n{font:500 .72rem "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.sig{display:block;width:min(100%,300px);height:auto;overflow:visible}
.sig text{font:400 84px "Mrs Saint Delafield",cursive;fill:var(--ink);fill-opacity:var(--f,1);stroke:var(--ink);stroke-width:1.1;stroke-dasharray:1100;stroke-dashoffset:calc((1 - var(--s,1))*1100);transition:fill-opacity .8s}
.sig--sm{width:210px;margin:.3rem 0 -.2rem}
.js .ppl .sig text{stroke-dashoffset:1100;fill-opacity:0;transition:stroke-dashoffset 2.4s ease .3s,fill-opacity .9s 2s}
.js .ppl article.in .sig text{stroke-dashoffset:0;fill-opacity:1}

/* matters: each outcome gets a highlighter pass as its row comes in */
.hl{background:linear-gradient(rgba(176,141,79,.3),rgba(176,141,79,.3)) no-repeat 0 100%/0% .38em;transition:background-size 1.1s cubic-bezier(.65,0,.35,1) .35s}
.tbl tr.in .hl{background-size:100% .38em}

@media (prefers-reduced-motion:reduce){.js .ppl .sig text{stroke-dashoffset:0;fill-opacity:1}.hl{background-size:100% .38em}}