/* Mulish, self-hosted (variable 200-1000, latin) */
@font-face{font-family:'Mulish';font-style:normal;font-weight:200 1000;font-display:swap;src:url(assets/fonts/mulish-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Mulish';font-style:italic;font-weight:200 1000;font-display:swap;src:url(assets/fonts/mulish-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Stark Associates · rev8 (rev5 base) · brand alignment: logo magenta #A72E5D, magenta-derived rules, single family (Mulish) */
:root{
 --paper:#fff;--paper-deep:#ECEAE7;--stone:rgba(var(--magenta-rgb),.24);
 --ink:#3D3B3B;--ink-deep:#272525;--grey:#6B6A6A;--head:#4A4848;--magenta:#A72E5D;--magenta-rgb:167,46,93;--white:#fff;
 /* dark-band palette */
 --magenta-tint:#A72E5D;--ink-text:#C9C7C7;--ink-text-soft:#D9D6D3;--ink-muted:#A8A5A2;--ink-fine:#8F8C89;--line-dark:rgba(var(--magenta-rgb),.42);
 --maxw:1240px;--nav-h:80px;
 --serif:"Mulish",Calibri,sans-serif;--sans:"Mulish",Calibri,sans-serif}
*{margin:0;padding:0;box-sizing:border-box}
html{scrollbar-color:var(--stone) var(--paper);-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);font-weight:400;font-size:17px;line-height:1.7}
::selection{background:var(--magenta);color:#fff}html{scrollbar-color:rgba(var(--magenta-rgb),.55) var(--paper-deep)}
img{max-width:100%;height:auto}
h1,h2,h3{font-family:var(--serif);font-weight:300;line-height:1.06;letter-spacing:-.022em;color:var(--head);text-wrap:balance}
h1 em,h2 em,h3 em,.serif-em{font-style:italic;font-weight:400}
p,li,.lede,figcaption{text-wrap:pretty}
.wrap{max-width:var(--maxw);margin:0 auto;--wrap-pad:clamp(20px,5vw,44px);padding:0 clamp(20px,5vw,44px)}
.btn{display:inline-block;padding:17px 40px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;font-weight:600;border:0;border-radius:999px;font-family:var(--sans);cursor:pointer;line-height:1.5;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s cubic-bezier(.2,.7,.2,1),background-color .3s,color .3s;will-change:transform}.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(0) scale(.985);transition-duration:.1s}
.btn-ink{background:var(--ink-deep);color:#fff;box-shadow:0 8px 22px -10px rgba(39,37,37,.55),0 2px 6px -2px rgba(39,37,37,.25)}.btn-ink:hover{background:var(--magenta);box-shadow:0 14px 30px -12px rgba(var(--magenta-rgb),.55),0 3px 8px -2px rgba(var(--magenta-rgb),.3)}
.btn-paper{background:#fff;color:var(--ink-deep);box-shadow:0 10px 26px -12px rgba(0,0,0,.6),0 2px 6px -2px rgba(0,0,0,.25)}.btn-paper:hover{background:var(--magenta);color:#fff;box-shadow:0 16px 34px -12px rgba(var(--magenta-rgb),.6),0 3px 8px -2px rgba(0,0,0,.25)}
.btn-line{border:1px solid rgba(255,255,255,.55);color:#fff;padding:16px 39px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);background:rgba(255,255,255,.06)}.btn-line:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn[disabled]{opacity:.55;cursor:default;pointer-events:none;box-shadow:none;transform:none}
.btn-row{margin-top:26px}
/* focus: visible everywhere, tinted for the surface */
:focus-visible{outline:2px solid var(--magenta);outline-offset:3px}
.band-dark :focus-visible,.hero :focus-visible,.ph :focus-visible,.statement :focus-visible,.cta :focus-visible,.ft :focus-visible,.mnav :focus-visible,.nf :focus-visible,nav:not(.solid) :focus-visible{outline-color:#fff}
.skip{position:absolute;left:16px;top:-120px;z-index:100;background:var(--ink-deep);color:#fff;padding:12px 18px;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;text-decoration:none}
.skip:focus{top:16px}
section[id],li[id],main[id]{scroll-margin-top:calc(var(--nav-h) + 12px)}
/* nav: transparent over hero, solid after */
nav{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .35s,border-color .35s;border-bottom:1px solid transparent}
nav.solid{background:rgba(255,255,255,.96);border-bottom-color:var(--stone);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.nav-inner{--wrap-pad:clamp(20px,5vw,44px);max-width:var(--maxw);margin:0 auto;padding:18px clamp(20px,5vw,44px);display:flex;justify-content:space-between;align-items:center;gap:16px}

nav.solid .brand{color:var(--ink-deep)}

.wordmark{font-family:var(--serif);font-size:19px;line-height:.98;display:block;font-weight:500;color:inherit}
.nav-links{list-style:none;display:flex;gap:34px;align-items:center}
.nav-links a{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#fff;text-decoration:none;font-weight:600;position:relative;transition:color .35s;padding:6px 0}
nav.solid .nav-links a{color:var(--ink)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--magenta);transform:scaleX(0);transform-origin:left;transition:transform .3s}
nav:not(.solid) .nav-links a::after{background:#fff}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.menubtn,.mnav-close{display:none;background:transparent;border:0;color:#fff;width:44px;height:44px;margin-right:-10px;cursor:pointer;align-items:center;justify-content:center;transition:color .35s}
.menubtn svg,.mnav-close svg{width:26px;height:26px;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;fill:none}
nav.solid .menubtn{color:var(--ink)}
@media(max-width:820px){.nav-links{display:none}.menubtn{display:inline-flex}}
/* mobile menu: full-bleed ink panel */
.mnav{position:fixed;inset:0;z-index:80;background:var(--ink-deep);color:#fff;display:none;flex-direction:column;padding:18px clamp(20px,5vw,44px) clamp(24px,5vw,44px);overflow:auto}
body.menuopen .mnav{display:flex;animation:mnav-in .4s cubic-bezier(.2,.7,.2,1)}
body.menuopen{overflow:hidden}
@keyframes mnav-in{from{opacity:0;transform:translateY(10px)}}
.mnav-top{display:flex;justify-content:space-between;align-items:center;min-height:44px}
.mnav .brand{color:#fff}
.mnav .mark{height:36px;width:36px}
.mnav .wordmark{font-size:16px}
.mnav-close{display:inline-flex}
.mnav-links{list-style:none;margin-top:auto;padding-top:40px}
.mnav-links a{display:block;font-family:var(--serif);font-size:clamp(38px,10vw,60px);line-height:1.1;color:#fff;text-decoration:none;padding:10px 0;border-bottom:1px solid var(--line-dark);transition:color .2s}
.mnav-links a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--magenta);text-decoration-thickness:2px;text-underline-offset:.14em}
.mnav-links a[aria-current="page"]{color:#fff;font-style:italic;text-decoration:underline;text-decoration-color:var(--magenta);text-decoration-thickness:2px;text-underline-offset:.14em}
.mnav .btn{margin-top:28px;text-align:center}
.mnav-foot{margin-top:24px;font-size:14px;color:var(--ink-muted);line-height:1.8}
.mnav-foot a{color:#fff;text-decoration:none}
@media(prefers-reduced-motion:reduce){body.menuopen .mnav{animation:none}}
/* image slots: a positioned frame with a cover-fit image */
.slot{position:relative;overflow:hidden;background:var(--ink-deep)}
.slot-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
/* hero: full viewport */
.hero{position:relative;height:100vh;height:100svh;min-height:640px;overflow:hidden;background:var(--ink-deep);display:flex;align-items:flex-end}
.hero .slot{position:absolute;inset:0}
.hero .slot-img{transform:scale(1.06);animation:drift 24s ease-out forwards}
@keyframes drift{to{transform:scale(1)}}
.hero .scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(39,37,37,.82) 0%,rgba(39,37,37,.45) 40%,rgba(39,37,37,.1) 75%),linear-gradient(to bottom,rgba(39,37,37,.35),transparent 30%)}
.hero .wrap{position:relative;z-index:3;width:100%;padding-bottom:clamp(60px,9vh,110px)}
.hero h1{color:#fff;font-size:clamp(44px,6vw,90px);line-height:1;max-width:17ch}
.hero h1 em{color:#fff}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(28px,5vw,80px);align-items:end;margin-top:34px}
.hero .lede{color:rgba(255,255,255,.88);font-size:17px;line-height:1.7;max-width:46ch;font-weight:300}
.hero .ctas{display:flex;gap:16px;flex-wrap:wrap;margin-top:22px}


@media(max-width:860px){.hero-grid{grid-template-columns:1fr;gap:20px}.hero{height:auto;min-height:100svh;padding-top:96px}}
@media(prefers-reduced-motion:reduce){.hero .slot-img,.ph .slot-img{animation:none;transform:none}}
/* rule band: a thin wordless stroke of the brand magenta */
.rule-band{height:4px;background:var(--magenta)}
/* bands */
.band{padding:clamp(80px,10vw,130px) 0}
.band-flush-top{padding-top:0}
.band-dark{background:var(--ink-deep);color:var(--ink-text-soft)}
.band-dark h2,.band-dark h3{color:#fff}
.band-deep{background:var(--paper-deep);--grey:#5F5E5E}
.center{text-align:center;max-width:820px;margin:0 auto}

h2.big{font-size:clamp(44px,5.8vw,78px);line-height:1.02}
h2.big em{color:var(--magenta)}
.band-dark h2.big em{color:#fff;text-decoration:underline;text-decoration-color:var(--magenta);text-decoration-thickness:2px;text-underline-offset:.14em}
.center p.lede{margin-top:28px;font-size:18px;color:var(--grey);max-width:60ch;margin-left:auto;margin-right:auto;font-weight:300}.center p.lede+p.lede{margin-top:16px;font-size:16.5px}
.band-dark .center p.lede{color:var(--ink-text)}
.natline{font-size:15px;letter-spacing:.01em;color:var(--grey);margin-top:26px;font-weight:400}
/* pillars, numbered */
.pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2vw,28px);margin-top:clamp(50px,7vw,90px)}
.pillars-flush{margin-top:0}
.pillar{background:#fff;color:var(--ink);border:1px solid var(--stone);border-radius:16px;padding:clamp(30px,3.4vw,44px);display:flex;flex-direction:column;align-items:flex-start;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}.pillar:hover{transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(0,0,0,.55)}.pillar .ico{width:34px;height:34px;color:var(--magenta);margin-bottom:22px}.pillar .ico svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.pillar .tag{display:block;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--magenta);font-weight:600;margin-bottom:18px;order:-1}.pillar .ico{order:-2}
.pillar .no{font-family:var(--serif);font-style:italic;font-size:26px;color:var(--magenta-tint);display:block;margin-bottom:12px}
.band-dark .pillar h3{color:var(--ink-deep)}.pillar h3{font-size:32px;margin-bottom:14px}
.pillar .subs{font-size:13px;letter-spacing:.015em;color:var(--grey);font-weight:600;display:block;margin-bottom:14px}
.pillar p{font-size:16px;color:var(--ink);max-width:44ch;flex:1}
.pillar a{display:inline-flex;align-items:flex-end;margin-top:14px;padding-top:10px;margin-bottom:-6px;min-height:44px;box-sizing:border-box;font-size:13px;letter-spacing:.04em;color:var(--ink-deep);text-decoration:none;border-bottom:1px solid var(--stone);padding-bottom:3px;font-weight:600;transition:.2s}
.pillar a:hover{border-color:var(--magenta);color:var(--magenta)}
.foundation{margin-top:60px;padding-top:26px;border-top:1px solid var(--line-dark);color:var(--ink-muted);font-size:15px;max-width:70ch}
@media(max-width:820px){.pillars{grid-template-columns:1fr}}
/* full-bleed statement over image */
.statement{position:relative;min-height:clamp(420px,58vw,640px);display:flex;align-items:center;overflow:hidden;background:var(--ink-deep)}
.statement .slot{position:absolute;inset:0}
.statement .veil{position:absolute;inset:0;background:rgba(39,37,37,.58)}.statement.team{min-height:clamp(520px,50vw,760px);align-items:flex-end}.statement.team .slot-img{object-position:50% 0}.statement.team .veil{background:linear-gradient(to top,rgba(39,37,37,.9) 0%,rgba(39,37,37,.68) 34%,rgba(39,37,37,.18) 62%,rgba(39,37,37,.06) 100%)}.statement.team .wrap{padding-top:40px;padding-bottom:clamp(56px,7vw,90px)}.statement.team h2{font-size:clamp(28px,3.8vw,48px);max-width:26ch}@media(max-width:700px){.statement.team{min-height:auto;padding-top:56vw}.statement.team .slot-img{object-position:50% 0}}
.statement .wrap{position:relative;z-index:3;text-align:center;padding-top:60px;padding-bottom:60px}

.statement h2{color:#fff;font-size:clamp(32px,4.6vw,60px);line-height:1.1;max-width:22ch;margin:0 auto}
.statement cite{display:block;margin-top:26px;font-style:normal;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.7);font-family:var(--sans)}
/* guides */
.guide{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--stone);border:1px solid var(--stone);margin-top:clamp(44px,6vw,80px)}
.guide article{background:#fff;padding:44px clamp(24px,3.4vw,46px)}
.guide h3{font-size:30px;margin-bottom:14px}
.guide p{font-size:15.5px;color:var(--grey);line-height:1.75}
.band-dark .guide{background:var(--line-dark);border-color:var(--line-dark)}
.band-dark .guide article{background:var(--ink-deep)}
.band-dark .guide p{color:var(--ink-text)}
@media(max-width:820px){.guide{grid-template-columns:1fr}}
/* about */
.about{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,6vw,90px);align-items:center}
.about .slot{aspect-ratio:4/5}
.about h2{font-size:clamp(36px,4.6vw,60px)}
.about .label+h2,.about-grid .label+h2{margin-top:14px}
.about p{margin-top:20px;color:var(--grey);max-width:56ch}
.about .creds,.about-grid .creds{margin-top:26px;font-size:13px;letter-spacing:.06em;color:var(--grey);font-weight:600}
@media(max-width:860px){.about{grid-template-columns:1fr}}
/* insights */
.feature{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(26px,4vw,70px);align-items:end;border-top:1px solid var(--stone);padding-top:34px;margin-top:50px}
.feature h3{font-size:clamp(30px,3.6vw,48px)}

.feature p{color:var(--grey);font-size:16px}
.support{list-style:none;margin-top:44px;border-top:1px solid var(--stone)}
.support li{border-bottom:1px solid var(--stone)}
.support a{display:grid;grid-template-columns:1fr 60px;gap:24px;align-items:baseline;padding:24px 6px;text-decoration:none;color:inherit;transition:.2s}
.support a:hover{background:rgba(var(--magenta-rgb),.05)}
.support h3{font-size:24px;font-family:var(--serif)}
.support p{font-size:14.5px;color:var(--grey);margin-top:6px}
.support .arr{text-align:right;transition:transform .3s;display:flex;justify-content:flex-end}.support .arr svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.support a:hover .arr{transform:translateX(8px);color:var(--magenta)}
@media(max-width:820px){.feature{grid-template-columns:1fr}}
/* cta */
.cta{background:var(--ink-deep);padding:clamp(90px,12vw,150px) 0;text-align:center}
.cta h2{color:#fff;font-size:clamp(38px,5.4vw,72px);max-width:18ch;margin:0 auto}
.cta h2 em{color:#fff;text-decoration:underline;text-decoration-color:var(--magenta);text-decoration-thickness:2px;text-underline-offset:.14em}
.cta .btn{margin-top:36px}
/* contact */
.contact{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,6vw,90px)}
.form{display:grid;gap:18px;position:relative}
.form label{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);margin-bottom:6px;font-weight:600}
.form input,.form textarea{width:100%;border:0;border-bottom:1px solid var(--stone);background:transparent;padding:10px 0;font:inherit;color:var(--ink);border-radius:0;transition:border-color .2s;caret-color:var(--magenta)}
.form textarea{resize:vertical;min-height:120px}
.form input:hover,.form textarea:hover{border-bottom-color:var(--grey)}
.form input:focus,.form textarea:focus{outline:none;border-bottom-color:var(--magenta)}
.form.tried input:invalid,.form.tried textarea:invalid{border-bottom-color:var(--magenta)}
.form .hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.form .note{font-size:13px;color:var(--grey);margin-top:14px}
.form-status{font-size:14.5px;line-height:1.6;margin-top:10px;color:var(--grey)}
.form-status.err{color:var(--magenta)}
.form-status:empty{display:none}
.form-done{border-top:1px solid var(--stone);padding-top:28px;outline:none}
.form-done h3{font-size:34px;margin-bottom:12px}
.form-done p{color:var(--grey);font-size:15.5px}
.form-done p+p{margin-top:12px}
.form-done a{color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--stone)}
.form-done a:hover{text-decoration-color:var(--magenta)}
.side h2{font-size:34px;margin-bottom:12px}
.side p{color:var(--grey);font-size:15.5px}
.side p+p{margin-top:22px}
.side .side-note{font-size:14.5px}
.side a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--stone);transition:border-color .2s}
.side a:hover{border-color:var(--magenta)}
@media(max-width:860px){.contact{grid-template-columns:1fr}}
/* footer */
.ft{background:var(--ink-deep);color:var(--ink-text);font-family:var(--sans);padding:clamp(60px,8vw,96px) 0 clamp(40px,5vw,60px)}
.ft-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(28px,4vw,60px)}
.ft-name{font-family:var(--serif);font-size:30px;color:#fff;font-weight:300;letter-spacing:-.02em;line-height:1.1}
.ft-strap{margin-top:14px;font-size:15px;color:var(--ink-text);max-width:34ch}
.ft-addr{margin-top:18px;font-size:14px;color:var(--ink-muted);line-height:1.7}
.ft-h{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-muted);font-weight:600;margin-bottom:14px}
.ft-grid a{display:block;color:#fff;text-decoration:none;font-size:15px;padding:5px 0;transition:color .2s}
.ft-grid a:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--magenta-tint)}
.ft-creds{margin-top:56px;padding-top:30px;border-top:1px solid var(--line-dark);display:flex;align-items:center;gap:30px 52px;flex-wrap:wrap}
.ft-cred img{height:50px;width:auto;display:block;filter:brightness(0) invert(1);opacity:.95}
.ft-cred img.caanz{height:84px;width:auto;filter:none;opacity:1}@media (max-width:600px){.ft-cred img.caanz{height:70px}}.ft-cred img.xero{filter:grayscale(1) invert(1) brightness(.92);height:66px}
.ft-tti{display:flex;flex-direction:column;line-height:1.1}
.tti-a{font-size:19px;letter-spacing:.2em;text-transform:uppercase;color:#fff;font-weight:600}
.tti-b{font-size:14.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-muted);margin-top:7px}

.ft-fine{margin-top:30px;padding-top:22px;border-top:1px solid var(--line-dark);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-fine);line-height:1.7}
@media(max-width:860px){.ft-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.ft-grid{grid-template-columns:1fr}}
/* reveal on scroll, only once JS has confirmed it can finish the job */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}

/* inner pages */
.pillar-body{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,6vw,90px);align-items:start}
.pillar-body .prose p{font-size:17px;color:var(--ink);max-width:58ch}
.pillar-body .prose p+p{margin-top:18px}
.subs-list{list-style:none;border-top:1px solid var(--stone)}
.subs-list li{border-bottom:1px solid var(--stone);padding:24px 0}
.subs-list h2{font-size:28px;margin-bottom:8px}
.subs-list p{font-size:15.5px;color:var(--grey)}
@media(max-width:860px){.pillar-body{grid-template-columns:1fr}}
.pn{display:flex;justify-content:space-between;gap:20px;padding:34px 0;border-top:1px solid var(--stone);font-size:14px}
.pn a{color:var(--ink);text-decoration:none;transition:color .2s}.pn a:hover{color:var(--magenta)}
.pn-next{text-align:right}
.pn small{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);margin-bottom:4px;font-weight:600}
.ph{position:relative;min-height:clamp(420px,52vw,620px);display:flex;align-items:flex-end;overflow:hidden;background:var(--ink-deep)}
.ph .slot{position:absolute;inset:0}
.ph .slot-img{transform:scale(1.05);animation:drift 22s ease-out forwards}
.ph .scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(39,37,37,.82),rgba(39,37,37,.4) 45%,rgba(39,37,37,.08) 80%)}
.ph .wrap{position:relative;z-index:3;width:100%;padding-top:140px;padding-bottom:clamp(46px,6vw,80px)}
.ph h1{color:#fff;font-size:clamp(42px,6vw,88px);max-width:17ch;line-height:.98}
.ph .lede{color:rgba(255,255,255,.88);max-width:52ch;margin-top:18px;font-weight:300;font-size:17px}
.crumb{font-size:13px;color:rgba(255,255,255,.75);display:flex;gap:9px;margin-bottom:16px;flex-wrap:wrap}
.crumb span{opacity:.5}
.crumb a{color:inherit;text-decoration:none;transition:color .2s}
.crumb a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,6vw,90px);align-items:center}
.about-grid .slot{aspect-ratio:4/5}
.about-grid h2{font-size:clamp(36px,4.4vw,58px)}
.about-grid p{margin-top:18px;color:var(--grey);max-width:56ch}
@media(max-width:860px){.about-grid{grid-template-columns:1fr}}
.photoband{position:relative;overflow:hidden;background:var(--ink-deep)}
.photoband .slot{position:relative;aspect-ratio:2/1;max-height:720px}
@media(max-width:700px){.photoband .slot{aspect-ratio:16/10}}
/* content sections */
.sec-head h2{font-size:clamp(34px,4.2vw,56px);line-height:1.06;max-width:22ch}
.sec-intro{color:var(--grey);max-width:58ch;margin-top:18px;font-size:16.5px}
.who{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,60px);margin-top:54px;border-top:1px solid var(--stone);padding-top:40px}
.who h3{font-size:26px;margin-bottom:12px}.who p{color:var(--grey);font-size:15.5px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,60px);margin-top:54px}
.steps article{border-top:1px solid var(--stone);padding-top:26px}
.steps .no{font-family:var(--serif);font-style:italic;font-size:30px;color:var(--magenta);display:block;margin-bottom:14px}
.steps h3{font-size:26px;margin-bottom:12px}.steps p{color:var(--grey);font-size:15.5px}
.band-dark .steps article{border-color:var(--line-dark)}.band-dark .steps h3{color:#fff}.band-dark .steps p{color:var(--ink-text)}.band-dark .steps .no{color:#fff}
.situ{list-style:none;margin-top:44px;border-top:1px solid var(--stone);columns:2;column-gap:clamp(30px,5vw,80px)}
.situ li{break-inside:avoid;border-bottom:1px solid var(--stone);padding:22px 0;font-family:var(--serif);font-size:23px;line-height:1.3;color:var(--head)}
.qa{list-style:none;margin-top:44px;border-top:1px solid var(--stone)}
.qa li{border-bottom:1px solid var(--stone);padding:28px 0;display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(20px,4vw,60px)}
.qa h3{font-size:24px}.qa p{color:var(--grey);font-size:15.5px}
.related{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);margin-top:44px}
.related a{display:block;text-decoration:none;color:inherit;border-top:1px solid var(--stone);padding-top:22px;transition:.2s}
.related a:hover h3{color:var(--magenta)}
.related .tag{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--magenta);font-weight:600;display:block;margin-bottom:12px}
.related h3{font-size:26px;line-height:1.15;transition:color .2s}.related p{color:var(--grey);font-size:15px;margin-top:10px}
.gd{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(26px,5vw,80px);align-items:start;margin-top:8px}
.gd h2{font-size:clamp(34px,4.2vw,56px);line-height:1.06}
.gd p{color:var(--grey);margin-top:18px;max-width:52ch}
.covers{list-style:none;border-top:1px solid var(--stone);margin-top:6px}
.covers li{border-bottom:1px solid var(--stone);padding:16px 0;font-size:16px;color:var(--ink)}
.covers .lbl{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--grey);font-weight:600;display:block;margin-bottom:6px}
.arts{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(30px,5vw,80px);margin-top:50px;border-top:1px solid var(--stone)}
.arts li{border-bottom:1px solid var(--stone)}
.arts a{display:grid;grid-template-columns:1fr 50px;gap:20px;align-items:baseline;padding:26px 4px;text-decoration:none;color:inherit}
.arts .tag{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--magenta);font-weight:600;display:block;margin-bottom:10px}
.arts h3{font-size:24px;line-height:1.15;transition:color .2s}.arts p{color:var(--grey);font-size:14.5px;margin-top:8px}
.arts a:hover h3{color:var(--magenta)}
.arts .arr{text-align:right;transition:transform .3s}.arts a:hover .arr{transform:translateX(8px);color:var(--magenta)}
@media(max-width:860px){.who,.steps{grid-template-columns:1fr}.situ{columns:1}.qa li,.related,.gd,.arts{grid-template-columns:1fr}}
@media(max-width:520px){.support a,.arts a{grid-template-columns:1fr 32px;gap:14px}.support a{padding-left:0;padding-right:0}}
/* not found */
.nf{background:var(--ink-deep);min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:140px 0 100px}
.nf 
.nf h1{color:#fff;font-size:clamp(40px,6vw,88px);max-width:14ch}
.nf h1 em{color:#fff;text-decoration:underline;text-decoration-color:var(--magenta);text-decoration-thickness:2px;text-underline-offset:.14em}
.nf p{color:var(--ink-text);margin-top:20px;max-width:48ch;font-weight:300}
.nf .btn-row{margin-top:34px;display:flex;gap:16px;flex-wrap:wrap}

/* brand: original Stark Associates lockup (restored 9 Sep) */

.brand .logo-dark{display:none}
nav.solid .brand .logo-light{display:none}
nav.solid .brand .logo-dark{display:block}
.mnav .brand .logo-light{display:block}
.mnav .brand .logo-dark{display:none}
@media(max-width:700px){}

/* harden */
@media(max-width:860px){.hero .lede,.ph .lede{font-weight:400}.hero .scrim{background:linear-gradient(to top,rgba(39,37,37,.9) 0%,rgba(39,37,37,.55) 45%,rgba(39,37,37,.12) 78%),linear-gradient(to bottom,rgba(39,37,37,.35),transparent 30%)}}
p,li,.subs,.ft-grid a{overflow-wrap:anywhere}h1,h2,h3,a{overflow-wrap:break-word}.pillar,.guide article,.support a,.feature>*{min-width:0}
.form-status.err::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--magenta);margin-right:8px;vertical-align:middle}
.form input,.form textarea{font-size:max(16px,1em)}
@media(forced-colors:active){.btn,.pillar,.form input,.form textarea{border:1px solid ButtonText}.rule-band{border-top:2px solid Highlight}}

/* ===== adapt: phone / tablet / landscape / touch ===== */
/* Tablet portrait 700–860: room for two columns — use it */
@media(min-width:700px) and (max-width:860px){.pillars,.guide,.feature{grid-template-columns:repeat(2,1fr)}.about{grid-template-columns:.8fr 1.2fr;align-items:start}.about .slot{max-width:none}}
/* Portrait photo: never taller than the viewport on a stacked layout */
@media(max-width:860px){.about .slot,.about-grid .slot{max-width:min(420px,100%);margin:0 auto 28px}.about .slot{aspect-ratio:4/5}}
/* Phone landscape: hero is one screen, not 1.4 */
@media(max-height:500px) and (orientation:landscape){.hero{min-height:100svh;height:auto;padding-top:100px}.hero .wrap{padding-bottom:36px}.hero h1{font-size:clamp(30px,6vh,44px)}.hero-grid{grid-template-columns:1.2fr .8fr;gap:24px;margin-top:18px}.hero .lede{font-size:15px;line-height:1.55}.band{padding:56px 0}.statement{min-height:70svh}}
/* ≤380: headline earns its space; supporting type steps down one notch */
@media(max-width:380px){.hero h1{font-size:clamp(34px,11.5vw,42px);line-height:1.04}.hero{height:auto;min-height:100svh;padding-top:96px}.hero .wrap{padding-bottom:44px}.hero .lede{font-size:15.5px;line-height:1.6}.hero-grid{margin-top:22px}.hero .ctas{gap:12px}.hero .btn{padding:14px 26px;font-size:12px}h2.big{font-size:clamp(34px,11vw,44px)}.pillar h3{font-size:26px}.pillar{padding:26px 22px;border-radius:14px}.guide article{padding:34px 22px}.guide h3{font-size:24px}.statement h2{font-size:26px}.statement{min-height:auto;padding:70px 0}.cta h2{font-size:32px}.ft-name{font-size:24px}.wrap{padding-left:18px;padding-right:18px}}
/* Insights rows: arrow column proportional, tap the whole row */
@media(max-width:700px){.support a{grid-template-columns:1fr 28px;gap:12px;padding:20px 0;align-items:start}.support .arr{padding-top:4px}.support h3{font-size:20px}}
/* Touch: hover affordances need a pressed state; targets ≥44 */
@media(hover:none){.btn:hover{transform:none}.pillar:hover{transform:none;box-shadow:none}.pillar:active{transform:scale(.985);transition-duration:.08s}.pillar a:active,.support a:active,.ft-grid a:active{color:var(--magenta)}.btn:active{transform:translateY(1px)}.support a:active{background:rgba(var(--magenta-rgb),.06)}}
@media(pointer:coarse){.ft-grid a{padding:9px 0;min-height:44px;display:flex;align-items:center}.nav-links a{padding:12px 0}.pn a,.side a,.related a,.arts a{min-height:44px}.mnav-links a{padding:14px 0}.form input,.form textarea{padding:14px 0}}
/* Notched phones */
.nav-inner,.wrap{padding-left:max(var(--wrap-pad,20px),env(safe-area-inset-left));padding-right:max(var(--wrap-pad,20px),env(safe-area-inset-right))}
.ft{padding-bottom:max(clamp(40px,5vw,60px),env(safe-area-inset-bottom))}
.mnav{padding-bottom:max(24px,env(safe-area-inset-bottom))}
/* Desktop wide: don't stretch the reading measure past 1240 (already capped); keep the hero from becoming a poster on 4K */
@media(min-width:1800px){.hero h1{font-size:90px}.hero{max-height:1100px}}

/* polish */
input,textarea{caret-color:var(--magenta)}a[href^='tel'],.ft-fine,.ft-addr{font-variant-numeric:tabular-nums}
.band-dark .pillar :focus-visible,.band-dark .pillar a:focus-visible{outline-color:var(--magenta)}
@media(prefers-reduced-motion:reduce){.btn,.btn:hover,.btn:active{transform:none}}

/* =====================================================================
   Stark Associates · rev6 · MOTION LAYER
   Concept: "widening the frame". Imagery opens from a focused frame to the
   full picture; headlines rise from their own baseline; ledger rules draw
   themselves; pages turn like heavy stock. Measured, never showy.
   Everything below is scoped to html.m (set in <head> only when the visitor
   has not asked for reduced motion). Without .m the page is rev5, static.
   ===================================================================== */
:root{--e-out:cubic-bezier(.16,1,.3,1);--e-io:cubic-bezier(.76,0,.24,1);--e-soft:cubic-bezier(.33,1,.68,1)}

/* rev5 faded whole sections; rev6 animates their contents instead */
.js.m .reveal{opacity:1;transform:none;transition:none}
/* reduced motion or ?motion=off: a gentle opacity-only section fade */
.js:not(.m) .reveal{transform:none;transition:opacity .6s ease}

/* ---------- headlines: words rise from their own baseline ---------- */
.m :is(.hero h1,.ph h1,.nf h1,h2.big,.cta h2,.sec-head h2,.about h2,.about-grid h2,.gd h2,.statement h2):not([data-sp]){opacity:0}
.m [data-sp] .w{display:inline-block;clip-path:inset(-.16em -.22em -.26em -.22em)}
.m [data-sp] .wi{display:inline-block;transform:translateY(135%);opacity:0;transition:transform 1.15s var(--e-out),opacity .5s linear;transition-delay:var(--wd,0ms)}
.m [data-sp].in .wi{transform:none;opacity:1}
.m [data-sp].sp-done .w{clip-path:none}
.m [data-sp].sp-done .wi{transition:none}
/* light bands: the italic accent lands in ink, then takes the brand colour */
.m h2.big[data-sp] em .wi{color:var(--head);transition:transform 1.15s var(--e-out),opacity .5s linear,color 1s ease;transition-delay:var(--wd,0ms),var(--wd,0ms),var(--ud,.9s)}
.m h2.big[data-sp].in em .wi{color:var(--magenta)}
.m .band-dark h2.big[data-sp] em .wi,.m .band-dark h2.big[data-sp].in em .wi{color:#fff}
/* dark bands: the magenta underline draws itself once the words have landed */
.m :is(.band-dark h2.big,.cta h2,.nf h1)[data-sp] em{text-decoration:none;background:linear-gradient(var(--magenta),var(--magenta)) no-repeat 0 calc(100% - .1em)/0% 2px;transition:background-size 1.2s var(--e-io);transition-delay:var(--ud,.9s)}
.m :is(.band-dark h2.big,.cta h2,.nf h1)[data-sp].in em{background-size:100% 2px}

/* ---------- supporting copy comes into focus ---------- */
.m :is(.hero .lede,.hero .ctas,.ph .crumb,.ph .lede,.nf .lede,.btn-row,.center .lede,.natline,.sec-intro,.about p,.about-grid p,.gd p,.feature,.foundation,.statement cite,.cta .btn,.prose p,.side,.pn,.ft-fine):not(.in){opacity:0;transform:translateY(16px)}
@media (hover:hover) and (pointer:fine){.m :is(.hero .lede,.hero .ctas,.ph .crumb,.ph .lede,.nf .lede,.btn-row,.center .lede,.natline,.sec-intro,.about p,.about-grid p,.gd p,.feature,.foundation,.statement cite,.cta .btn,.prose p,.side,.pn,.ft-fine):not(.in){filter:blur(5px)}}
.m :is(.hero .lede,.hero .ctas,.ph .crumb,.ph .lede,.nf .lede,.btn-row,.center .lede,.natline,.sec-intro,.about p,.about-grid p,.gd p,.feature,.foundation,.statement cite,.cta .btn,.prose p,.side,.pn,.ft-fine).in:not(.rv-done){transition:opacity 1s var(--e-out),transform 1.2s var(--e-out),filter 1s var(--e-out);transition-delay:var(--d,0ms)}

/* ---------- grouped items rise in sequence ---------- */
.m :is(.pillar,.guide article,.who>div,.steps>article,.related>a,.ft-grid>div,.form>div,.ft-creds>*):not(.in){opacity:0;transform:translateY(34px)}
.m :is(.pillar,.guide article,.who>div,.steps>article,.related>a,.ft-grid>div,.form>div,.ft-creds>*).in:not(.rv-done){transition:opacity .9s var(--e-out),transform 1.3s var(--e-out);transition-delay:var(--d,0ms)}
.m .steps>article:not(.in){transform:none}
.m :is(.support li,.arts li,.covers li,.subs-list li,.situ li,.qa li):not(.in){opacity:0;transform:translateY(12px)}
.m :is(.support li,.arts li,.covers li,.subs-list li,.situ li,.qa li).in:not(.rv-done){transition:opacity .9s var(--e-out),transform 1.1s var(--e-out);transition-delay:var(--d,0ms)}

/* ---------- ledger rules draw themselves, left to right ---------- */
.m :is(.support,.arts,.covers,.subs-list,.situ,.qa,.feature,.who,.pn,.foundation,.ft-creds,.ft-fine){border-top-color:transparent;position:relative}
.band-dark,.ft{--rule:var(--line-dark)}
.m :is(.support,.arts,.covers,.subs-list,.situ,.qa,.feature,.who,.pn,.foundation,.ft-creds,.ft-fine)::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--rule,var(--stone));transform:scaleX(0);transform-origin:left;transition:transform 1.5s var(--e-io);transition-delay:var(--d,0ms);pointer-events:none}
.m :is(.support,.arts,.covers,.subs-list,.situ,.qa,.feature,.who,.pn,.foundation,.ft-creds,.ft-fine).in::before{transform:none}
.m :is(.support li,.arts li,.covers li,.subs-list li,.situ li,.qa li){position:relative;border-bottom-color:transparent}
.m :is(.support li,.arts li,.covers li,.subs-list li,.situ li,.qa li)::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--rule,var(--stone));transform:scaleX(0);transform-origin:left;transition:transform 1.3s var(--e-io);transition-delay:calc(var(--d,0ms) + .12s);pointer-events:none}
.m :is(.support li,.arts li,.covers li,.subs-list li,.situ li,.qa li).in::after{transform:none}
.m .related>a{position:relative;border-top-color:transparent}
.m .related>a::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--stone);transform:scaleX(0);transform-origin:left;transition:transform 1.3s var(--e-io);transition-delay:var(--d,0ms)}
.m .related>a.in::before{transform:none}

/* ---------- process line: Understand → Advise → Execute ---------- */
.m .steps{--gap:clamp(24px,4vw,60px)}
.m .steps>article{position:relative;border-top-color:transparent}
.m .steps>article::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:calc(100% + var(--gap));background:var(--rule,var(--stone));transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--e-io);transition-delay:var(--d,0ms)}
.m .steps>article:last-child::before{width:100%}
.m .steps>article::after{content:"";position:absolute;left:0;top:-4px;width:7px;height:7px;border-radius:50%;background:var(--magenta);transform:scale(0);transition:transform .7s var(--e-out);transition-delay:var(--d,0ms)}
.m .steps>article.in::before,.m .steps>article.in::after{transform:none}
@media(max-width:860px){.m .steps>article::before{width:100%}}

/* ---------- line icons draw like a pen ---------- */
.m .pillar .ico path{stroke-dasharray:1 1.1;stroke-dashoffset:0;transition:stroke-dashoffset 1.7s var(--e-io),stroke .5s;transition-delay:calc(var(--d,0ms) + .35s),0s}
.m .pillar:not(.in) .ico path{stroke-dashoffset:1.05}
@keyframes sa-draw{from{stroke-dashoffset:1.05}to{stroke-dashoffset:0}}

/* ---------- headers: the frame opens onto the full picture ---------- */
.m .hero .slot{clip-path:inset(16% 20% 16% 20% round 22px)}
.m.img-go .hero .slot{animation:sa-open 1.7s var(--e-io) both}
.m .ph .slot{clip-path:inset(10% 14% 10% 14% round 18px)}
.m.img-go .ph .slot{animation:sa-open-ph 1.3s var(--e-io) both}
.m.vt :is(.hero,.ph) .slot{clip-path:none;animation:none}
@keyframes sa-open{0%{clip-path:inset(16% 20% 16% 20% round 22px);opacity:0}18%{opacity:1}100%{clip-path:inset(0 0 0 0 round 0px);opacity:1}}
@keyframes sa-open-ph{0%{clip-path:inset(10% 14% 10% 14% round 18px);opacity:0}20%{opacity:1}100%{clip-path:inset(0 0 0 0 round 0px);opacity:1}}
.m .hero .slot-img{transform:none;animation:none;scale:1.28}
.m.img-go .hero .slot-img{animation:sa-zoom 2.8s var(--e-out) both,sa-drift 24s 2.8s ease-out forwards}
.m .ph .slot-img{transform:none;animation:none;scale:1.2}
.m.img-go .ph .slot-img{animation:sa-zoom-ph 2.4s var(--e-out) both,sa-drift 24s 2.4s ease-out forwards}
.m.vt :is(.hero,.ph) .slot-img{scale:1.08;animation:sa-drift 24s ease-out forwards}
@keyframes sa-zoom{from{scale:1.28}to{scale:1.08}}
@keyframes sa-zoom-ph{from{scale:1.2}to{scale:1.08}}
@keyframes sa-drift{from{scale:1.08}to{scale:1.04}}
.m :is(.hero,.ph) .wrap{will-change:transform,opacity}
/* the brand stroke under the home hero draws across as the final beat */
.m .rule-band{transform:scaleX(0);transform-origin:left}
.m .rule-band.in{transform:none;transition:transform 1.7s var(--e-io);transition-delay:var(--d,0ms)}

/* ---------- statement banners: the frame widens as you arrive ---------- */
.m .statement{background:var(--frame-bg,var(--ink-deep))}
.m .statement .slot-img{top:-12%;height:124%}

/* ---------- portraits: a curtain rises, the image settles ---------- */
.m :is(.about,.about-grid) .slot:not(.in){clip-path:inset(100% 0 0 0)}
.m :is(.about,.about-grid) .slot.in{clip-path:inset(0 0 0 0);transition:clip-path 1.6s var(--e-io)}
.m :is(.about,.about-grid) .slot .slot-img{top:-8%;height:116%;scale:1.25;transition:scale 2.4s var(--e-out)}
.m :is(.about,.about-grid) .slot.in .slot-img{scale:1}

/* ---------- navigation ---------- */
nav{transition:background .35s,border-color .35s,translate .6s var(--e-out)}
.m nav.nav-hide{translate:0 -100%}
/* rev5 fix (all visitors): once the nav turned solid, its backdrop blur trapped the
   fixed menu inside an 80px strip on phones; with that gone, keep the light logo on
   the dark menu panel */
body.menuopen nav{translate:none!important;backdrop-filter:none;-webkit-backdrop-filter:none}
nav.solid .mnav .brand .logo-light{display:block}
nav.solid .mnav .brand .logo-dark{display:none}
.m .nav-inner{transition:opacity 1s var(--e-out),translate 1s var(--e-out);transition-delay:.3s}
.m:not(.go) .nav-inner{opacity:0;translate:0 -14px}
.m.vt .nav-inner{opacity:1;translate:none;transition:none}
.nav-progress{position:absolute;left:0;right:0;bottom:-1px;height:1px;transition:opacity .35s,height .3s;background:var(--magenta);transform:scaleX(0);transform-origin:left;opacity:0;pointer-events:none}
.m nav.solid .nav-progress{opacity:.85}
.m nav.nav-hide .nav-progress{height:2px;opacity:1}
.m .nav-links a::after{transform-origin:right;transition:transform .5s var(--e-out)}
.m .nav-links a:hover::after,.m .nav-links a[aria-current="page"]::after{transform-origin:left}

/* mobile menu: opens as an aperture from the button, links rise in turn */
.m body.menuopen .mnav{animation:sa-menu-in .75s var(--e-io) both}
.m body.menuclosing .mnav{animation:sa-menu-out .45s var(--e-io) both}
@keyframes sa-menu-in{from{clip-path:circle(0% at var(--mx,92%) var(--my,40px))}to{clip-path:circle(150% at var(--mx,92%) var(--my,40px))}}
@keyframes sa-menu-out{from{clip-path:circle(150% at var(--mx,92%) var(--my,40px))}to{clip-path:circle(0% at var(--mx,92%) var(--my,40px))}}
.m body.menuopen:not(.menuclosing) .mnav-links li{animation:sa-rise .9s var(--e-out) both;animation-delay:calc(.2s + var(--i,0) * 60ms)}
.m body.menuopen:not(.menuclosing) :is(.mnav .btn,.mnav-foot){animation:sa-fade .8s var(--e-out) both;animation-delay:.55s}
@keyframes sa-rise{from{transform:translateY(60%);opacity:0}}
@keyframes sa-fade{from{opacity:0;transform:translateY(10px)}}

/* ---------- interaction: fine pointers get the richer layer ---------- */
@media (hover:hover) and (pointer:fine){
  /* buttons fill with the brand colour from the point the cursor enters */
  .m .btn{position:relative;overflow:hidden;isolation:isolate}
  .m .btn::before{content:"";position:absolute;left:var(--bx,50%);top:var(--by,50%);width:var(--bd,340px);height:var(--bd,340px);margin:calc(var(--bd,340px) / -2) 0 0 calc(var(--bd,340px) / -2);border-radius:50%;background:var(--magenta);transform:scale(0);transition:transform .7s var(--e-out);z-index:-1;pointer-events:none}
  .m .btn:hover::before{transform:scale(1)}
  .m .btn{transition:transform .3s var(--e-out),box-shadow .3s,background-color .3s,color .25s .1s}
  .m .btn-ink:hover{background:var(--ink-deep)}
  .m .btn-paper:hover{background:#fff}
  .m .btn-line:hover{background:rgba(255,255,255,.06)}

  /* practice cards: the practice's own photograph rises into the card */
  .m .pillar{position:relative;isolation:isolate}
  .m .pillar-media{display:block;position:absolute;inset:-1px;border-radius:16px;overflow:hidden;z-index:-1;clip-path:inset(100% 0 0 0 round 16px);transition:clip-path .85s var(--e-io)}
  .m .pillar-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;scale:1.18;transition:scale 1.4s var(--e-out)}
  .m .pillar-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(39,37,37,.93) 0%,rgba(39,37,37,.74) 55%,rgba(39,37,37,.6) 100%)}
  .m .pillar :is(h3,p,.subs,a){transition:color .5s ease,border-color .5s ease}
  .m .pillar.rv-done:is(:hover,:focus-within) .pillar-media{clip-path:inset(0 0 0 0 round 16px)}
  .m .pillar.rv-done:is(:hover,:focus-within) .pillar-media img{scale:1}
  .m .pillar.rv-done:is(:hover,:focus-within){border-color:transparent}
  .m .band-dark .pillar.rv-done:is(:hover,:focus-within) h3,.m .pillar.rv-done:is(:hover,:focus-within) h3{color:#fff}
  .m .pillar.rv-done:is(:hover,:focus-within) p{color:var(--ink-text-soft)}
  .m .pillar.rv-done:is(:hover,:focus-within) .subs{color:var(--ink-muted)}
  .m .pillar.rv-done:is(:hover,:focus-within) a{color:#fff;border-color:var(--magenta)}
  .m .pillar.rv-done:is(:hover,:focus-within) .ico{color:#fff}
  .m .pillar.rv-done:hover .ico path{animation:sa-draw 1.2s var(--e-io)}

  /* insight rows: a magenta rule sweeps under the row, the arrow loops */
  .m :is(.support,.arts) a{position:relative}
  .m :is(.support,.arts) a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--magenta);transform:scaleX(0);transform-origin:right;transition:transform .6s var(--e-out);z-index:1}
  .m :is(.support,.arts) a:hover::after{transform:scaleX(1);transform-origin:left}
  .m :is(.support,.arts) a h3{transition:color .3s,translate .6s var(--e-out)}
  .m :is(.support,.arts) a:hover h3{translate:6px 0}
  .m :is(.support,.arts) a:hover .arr svg{animation:sa-arrow .65s var(--e-out)}
  .m .related>a::after{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--magenta);transform:scaleX(0);transform-origin:right;transition:transform .6s var(--e-out)}
  .m .related>a:hover::after{transform:scaleX(1);transform-origin:left}

  /* principles: a brand stroke draws along the top edge */
  .m .guide article{position:relative}
  .m .guide article::before{content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:var(--magenta);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--e-out)}
  .m .guide article:hover::before{transform:none}

  .m .pn a small{transition:letter-spacing .5s var(--e-out),color .3s}
  .m .pn a:hover small{letter-spacing:.3em;color:var(--magenta)}
}
.pillar-media{display:none}
/* the whole practice card is the link (every device, motion or not) */
.pillar{position:relative}
.pillar a::after{content:"";position:absolute;inset:0;border-radius:16px}
@keyframes sa-arrow{0%{transform:translateX(0);opacity:1}42%{transform:translateX(120%);opacity:0}43%{transform:translateX(-120%);opacity:0}100%{transform:translateX(0);opacity:1}}

/* ---------- contact form: the underline draws on focus ---------- */
.m .form :is(input,textarea){border-bottom-color:transparent;background-image:linear-gradient(var(--magenta),var(--magenta)),linear-gradient(var(--ul,var(--stone)),var(--ul,var(--stone)));background-repeat:no-repeat;background-origin:border-box;background-position:0 100%,0 100%;background-size:0% 1px,100% 1px;transition:background-size .7s var(--e-out)}
.m .form :is(input,textarea):hover{--ul:var(--grey)}
.m .form :is(input,textarea):focus,.m .form.tried :is(input,textarea):invalid{background-size:100% 1px,100% 1px}
.m .form-done{animation:sa-fade 1s var(--e-out) both}

/* ---------- page transitions: the next page rises over the last ----------
   A parallax curtain: the reveal edge (magenta) travels the full height while the
   incoming page rises a quarter-screen behind it, so its header leads the motion.
   Edge position in the viewport = clip inset + translate = (1 - p) x 100vh, in step
   with the magenta line, because all three share one duration and one curve. */
@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}
:root{--e-turn:cubic-bezier(.5,0,.15,1)}
::view-transition{background:var(--ink-deep)}
::view-transition-old(root){animation:sa-vt-old .9s var(--e-turn) both}
::view-transition-new(root){animation:sa-vt-new .9s var(--e-turn) both}
html.vt-back::view-transition-old(root){animation-name:sa-vt-old-back}
html.vt-back::view-transition-new(root){animation-name:sa-vt-new-back}
@keyframes sa-vt-old{to{opacity:.42;translate:0 -5%;scale:.97}}
@keyframes sa-vt-old-back{to{opacity:.42;translate:0 5%;scale:.97}}
@keyframes sa-vt-new{from{clip-path:inset(75% 0 0 0);translate:0 25%}to{clip-path:inset(0 0 0 0);translate:0 0}}
@keyframes sa-vt-new-back{from{clip-path:inset(0 0 75% 0);translate:0 -25%}to{clip-path:inset(0 0 0 0);translate:0 0}}
.vt-edge{display:none}
html.vt-live:not(.vt-morph) .vt-edge{display:block;position:fixed;left:0;right:0;top:0;height:2px;background:var(--magenta);view-transition-name:sa-edge;pointer-events:none;z-index:90;animation:sa-edge-op .9s linear both}
html.vt-live.vt-back:not(.vt-morph) .vt-edge{top:auto;bottom:0}
@keyframes sa-edge-op{0%,80%{opacity:1}100%{opacity:0}}
::view-transition-group(sa-edge){animation:none}
::view-transition-new(sa-edge){animation:sa-edge .9s var(--e-turn) both}
html.vt-back::view-transition-new(sa-edge){animation-name:sa-edge-back}
@keyframes sa-edge{from{translate:0 100vh}to{translate:0 0}}
@keyframes sa-edge-back{from{translate:0 -100vh}to{translate:0 0}}
@keyframes sa-fadeout{to{opacity:0}}
@keyframes sa-fadein{from{opacity:0}}
/* practice card → practice page: the card's photograph becomes the page header.
   The sharp, full-size header image takes over early (the small card snapshot
   goes soft when it is stretched); the card image stays underneath as a fallback. */
html.vt-morph .ph .slot{view-transition-name:sa-hero}
html.vt-morph::view-transition-old(root){animation:sa-fadeout .3s ease-out both}
html.vt-morph::view-transition-new(root){animation:sa-fadein .55s .35s ease both}
html.vt-morph::view-transition-group(sa-hero){animation-duration:1s;animation-timing-function:cubic-bezier(.65,0,.2,1)}
html.vt-morph::view-transition-image-pair(sa-hero){isolation:auto}
html.vt-morph::view-transition-old(sa-hero),html.vt-morph::view-transition-new(sa-hero){height:100%;object-fit:cover;mix-blend-mode:normal}
html.vt-morph::view-transition-old(sa-hero){animation:none;opacity:1}
html.vt-morph::view-transition-new(sa-hero){animation:sa-fadein .28s ease-out both}

/* ---------- safety ---------- */
@media print{.js .reveal{opacity:1!important}.m *,.m *::before,.m *::after{opacity:1!important;transform:none!important;translate:none!important;scale:none!important;filter:none!important;clip-path:none!important;animation:none!important;transition:none!important}}
@media(prefers-reduced-motion:reduce){.m *{animation:none!important;transition:none!important}}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- rev7 fixes (all visitors) ---------- */
/* phones and tablets: the portrait's auto side margins shrank its frame to zero
   width, so Hannah's photo vanished below 860px (present since rev5) */
@media(max-width:860px){.about .slot,.about-grid .slot{width:100%}}
/* team photos: the heads sit at the very top of the frame, so no parallax
   overscan here (rev6 pushed the top of the photo out of view on phones) */
.m .statement.team .slot-img{top:0;height:100%;translate:none!important}
/* Safari's engine (WebKit) crashed the tab at tablet and desktop sizes when copy
   came into focus from a blur while also fading and rising. Drop the blur; the
   fade and rise stay. */
@media (hover:hover) and (pointer:fine){.m :is(.hero .lede,.hero .ctas,.ph .crumb,.ph .lede,.nf .lede,.btn-row,.center .lede,.natline,.sec-intro,.about p,.about-grid p,.gd p,.feature,.foundation,.statement cite,.cta .btn,.prose p,.side,.pn,.ft-fine):not(.in){filter:none}}
.m :is(.hero .lede,.hero .ctas,.ph .crumb,.ph .lede,.nf .lede,.btn-row,.center .lede,.natline,.sec-intro,.about p,.about-grid p,.gd p,.feature,.foundation,.statement cite,.cta .btn,.prose p,.side,.pn,.ft-fine).in:not(.rv-done){transition-property:opacity,transform}

/* ---------- rev9: team photo is never cropped ---------- */
.teamband{background:var(--ink-deep);color:#fff;text-align:center}
.teamband .teamband-img{display:block;width:100%;max-width:1800px;height:auto;margin:0 auto}
.teamband .wrap{padding:clamp(36px,5vw,72px) 24px clamp(48px,6vw,88px)}
.teamband h2{color:#fff;font-size:clamp(24px,3.2vw,42px);line-height:1.15;max-width:30ch;margin:0 auto}
.teamband cite{display:block;margin-top:26px;font-style:normal;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.7);font-family:var(--sans)}

/* rev10 item 2: Hannah's quote in the homepage portrait block */
.about .say{margin:0 0 22px;padding:0;border:0}
.about .say p{font-size:clamp(19px,1.6vw,23px);line-height:1.5;color:var(--ink);margin:20px 0 0;max-width:56ch}
.about .say em{color:var(--magenta);font-style:italic}
.about .say cite{display:block;margin-top:16px;font-style:normal;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--grey);font-family:var(--sans)}

/* rev10 item 3: principles as one continuous journey (Hannah's brief, 12-Oct-2026) */
.principles{position:relative;isolation:isolate;overflow:hidden}
.principles::before{content:"";position:absolute;inset:0;z-index:-1;background:#272525 url(assets/contours.jpg) center/cover no-repeat;opacity:.9}
.principles .contours-live{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
.principles.contours-ready .contours-live{opacity:1}
.principles.contours-ready::before{opacity:.25}
.principles::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,rgba(39,37,37,.75),rgba(39,37,37,.1) 28%,rgba(39,37,37,.1) 72%,rgba(39,37,37,.75))}
.principles .guide{position:relative;gap:2px;background:transparent;border-color:rgba(255,255,255,.14)}
.principles .guide article{position:relative;background:rgba(39,37,37,.42);padding:72px clamp(28px,3.8vw,56px) 52px;transition:background .55s var(--e-out),box-shadow .55s var(--e-out)}
.principles .guide article>*{position:relative;z-index:2}
.principles .guide article::before{display:none}
.principles .guide h3{margin-bottom:32px;transition:color .4s;color:rgba(255,255,255,.86)}
.principles .guide p{transition:color .4s;color:rgba(255,255,255,.74)}
.principles .journey{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}
.principles .journey path{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
/* faint ghost of the whole route so the composition holds; the travelling line is the event */
.principles .journey .glow{display:none}
.principles .journey .seg{stroke:#C9957A;stroke-width:1.5px;opacity:.14;transition:opacity .5s var(--e-out)}
/* the journey: a window of light ~ one approach + one lap long travels the route; it draws ahead and erases behind */
.principles .journey .comet{stroke:#E6B897;stroke-width:2.2px;opacity:0;stroke-dasharray:110 1000;stroke-dashoffset:110;filter:drop-shadow(0 0 5px rgba(230,184,151,.55))}
.principles .journey .comet.head{stroke:#FBE4D2;stroke-width:2.6px;stroke-dasharray:12 1188;stroke-dashoffset:12;filter:drop-shadow(0 0 7px rgba(251,228,210,.95))}
.principles.in.journey-ready .journey .comet{opacity:1;animation:sa-travel 16s linear infinite}
.principles.in.journey-ready .journey .comet.head{animation-name:sa-travel-head}
@keyframes sa-travel{from{stroke-dashoffset:110}to{stroke-dashoffset:-1000}}
@keyframes sa-travel-head{from{stroke-dashoffset:12}to{stroke-dashoffset:-1188}}
@media(prefers-reduced-motion:reduce){.principles .journey .seg{opacity:.5}.principles .journey .comet{animation:none!important;opacity:0!important}}
@media(max-width:700px){.principles .guide article{padding:60px 40px 40px 24px}}

/* rev10 item 4 */
.ft-po{display:block;margin-top:8px;opacity:.75}
.creds{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.creds .cred-badge{display:inline-flex;flex:0 0 auto;line-height:0}
.creds .ca-badge{height:51px;width:auto;max-width:100%;display:block;transition:transform .5s var(--e-out)}
.creds .cred-badge:hover .ca-badge,.creds .cred-badge:focus-visible .ca-badge{transform:scale(1.07)}
@media (max-width:600px){.creds{gap:11px}.creds .ca-badge{height:38px}}

/* ── rev15: the client's own TM-free lockup, aligned to the headline, set off the top edge ── */
.brand{display:flex;align-items:flex-start;gap:0}
.brand .logo{height:var(--brand-h,44px);width:auto;margin-left:calc(var(--brand-h,44px)*.24819);flex:0 0 auto}
/* Hannah 16-Oct (email 52547): "the S top and the A bottom aligned with the monogram". Her artwork
   does NOT do this (wordmark y51-743 vs mark y81-786), so both are tight ink crops set to the SAME
   height with zero offset: S cap top = mark top, A baseline = mark bottom. */
.brand .mark{height:var(--brand-h,44px);width:auto;display:block;flex:0 0 auto;margin-top:0}
/* fixed nav: 18px was the whole clearance over the banner. +48px desktop (≈1.3cm), phones +38px.
   Once the bar turns solid it goes back to its original compact height — it's on white, not an image. */
nav:not(.solid) .nav-inner{padding-top:66px}
nav.solid .nav-inner{padding-top:18px}
@media(max-width:900px){nav:not(.solid) .nav-inner{padding-top:60px}}
@media(max-width:700px){.brand{--brand-h:38px}nav:not(.solid) .nav-inner{padding-top:56px}}
@media(max-width:600px){.brand{--brand-h:34px}}

@media (max-width:600px){.ft-cred img.xero{height:56px}.tti-a{font-size:16px}.tti-b{font-size:12.5px}.ft-creds{gap:26px 36px}}