/* ── "Private Advisory, Printed" — hairlines and type only, no cards/boxes/icons ── */
:root{
  --paper:#FAF7F2;      /* warm ivory, dominant surface */
  --ink:#1A1A18;
  --ink-soft:#55534E;
  --accent:#8B2E2E;     /* deep oxblood — hairlines, small labels, link hover ONLY */
  --line:#D8D2C8;       /* 1px hairline rules — the printed-report motif */
  --measure:640px;      /* prose max-width */
  --pad:clamp(24px,6vw,64px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:"Source Serif 4",Georgia,serif;font-weight:380;
  font-size:clamp(17px,1.05rem + .2vw,19px);line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::selection{background:var(--accent);color:var(--paper)}
.wrap{max-width:calc(var(--measure) + var(--pad)*2);margin-inline:auto;padding-inline:var(--pad)}

/* labels / nav / eyebrows — Archivo, uppercase, oxblood */
.label{font-family:"Archivo",sans-serif;font-weight:500;text-transform:uppercase;
  font-size:11.5px;letter-spacing:.16em;color:var(--accent)}

a{color:inherit;text-decoration:none}

/* accent underline slide on hover */
.u{background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat;background-position:0 100%;background-size:0% 1px;
  transition:background-size .4s cubic-bezier(.6,0,.2,1);padding-bottom:2px}
a:hover .u,a.u:hover{background-size:100% 1px}

/* ── header ── */
header{padding-block:clamp(22px,4vw,34px)}
.bar{display:flex;align-items:baseline;justify-content:space-between;gap:24px}
.wordmark{font-family:"Fraunces",Georgia,serif;font-weight:420;font-size:20px;letter-spacing:.005em;
  font-optical-sizing:auto;cursor:pointer}
nav{display:flex;align-items:baseline;gap:18px}
nav a,nav .cur{font-family:"Archivo",sans-serif;font-weight:500;text-transform:uppercase;font-size:11.5px;
  letter-spacing:.15em}
nav a{color:var(--ink-soft);transition:color .3s}
nav a:hover{color:var(--accent)}
/* current page — accent, inert, never a link to itself */
nav .cur{color:var(--accent)}
/* printed-report middot separators between nav items */
nav > * + *::before{content:"·";color:var(--line);margin-inline-end:18px;
  font-family:"Archivo",sans-serif;font-weight:500}

/* ── shared rhythm ── */
main{padding-block:clamp(48px,11vh,120px) clamp(72px,16vh,160px)}
.prose{max-width:var(--measure)}
.eyebrow{margin-bottom:clamp(30px,7vh,58px)}
h1{font-family:"Fraunces",Georgia,serif;font-optical-sizing:auto;font-weight:400;
  font-size:clamp(38px,4.4vw + 1rem,68px);line-height:1.04;letter-spacing:-.014em}
h1 span{display:block}
p{color:var(--ink-soft)}
.lead{margin-top:clamp(30px,6vh,48px);max-width:var(--measure)}
.lead + .lead{margin-top:26px}

/* hairline rule — the only separator */
.rule{border:0;border-top:1px solid var(--line);margin-block:clamp(40px,8vh,64px);max-width:var(--measure)}

/* the evocative "glass" line — display serif, alone */
.glass{font-family:"Fraunces",Georgia,serif;font-optical-sizing:auto;font-weight:380;
  font-size:clamp(21px,1.4vw + .9rem,27px);line-height:1.4;color:var(--ink);
  max-width:var(--measure);letter-spacing:-.005em}
.quiet{margin-top:clamp(38px,7vh,56px);font-size:15px;color:var(--ink-soft)}

.cta{display:inline-block;margin-top:clamp(40px,8vh,60px);
  font-family:"Archivo",sans-serif;font-weight:500;letter-spacing:.02em;font-size:15px;color:var(--ink)}
.cta .arw{color:var(--accent);margin-inline-start:.4em}

/* ── approach: numbered passages ── */
.passage{max-width:var(--measure);padding-block:clamp(30px,6vh,46px)}
.passage + .passage{border-top:1px solid var(--line)}
.passage .pn{font-family:"Archivo",sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.16em;
  color:var(--accent)}
.passage h2{display:inline;font-family:"Fraunces",Georgia,serif;font-optical-sizing:auto;font-weight:440;
  font-size:clamp(20px,1.2vw + .8rem,25px);color:var(--ink);letter-spacing:-.005em}
.passage .pn{margin-inline-end:.9em}
.passage p{margin-top:16px}

/* contact */
.email{display:inline-block;margin-top:clamp(34px,6vh,50px);
  font-family:"Fraunces",Georgia,serif;font-optical-sizing:auto;font-weight:420;
  font-size:clamp(22px,1.6vw + .8rem,30px);color:var(--ink);letter-spacing:-.005em}
.li{display:block;margin-top:28px;font-family:"Archivo",sans-serif;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft)}

/* ── footer ── */
footer{border-top:1px solid var(--line);padding-block:clamp(30px,5vh,42px)}
.foot{display:flex;flex-wrap:wrap;gap:14px 40px;align-items:baseline;justify-content:space-between}
.foot .fm{font-family:"Fraunces",Georgia,serif;font-weight:420;font-size:16px}
.foot .fc{font-family:"Archivo",sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft)}
.foot a{font-family:"Archivo",sans-serif;font-size:11.5px;letter-spacing:.1em;color:var(--ink-soft)}
.foot a:hover{color:var(--accent)}
.foot .cpy{font-family:"Archivo",sans-serif;font-size:11px;letter-spacing:.1em;color:var(--ink-soft)}

/* ── INSIDE / OUTSIDE — the mirror pairing (home only) ── */
.io{max-width:var(--measure);margin-block:clamp(40px,8vh,64px)}
.io-row{display:flex;align-items:baseline;gap:16px;color:var(--ink)}
.io-row .label{flex:0 0 auto;min-width:74px}
.io-in{color:var(--ink-soft)}
.io-out{color:var(--accent)}
.io-txt{font-family:"Source Serif 4",Georgia,serif}
.io-rule{border:0;border-top:1px solid var(--line);margin-block:16px}

/* ── the reflected glass line — the site's single signature moment (home only) ── */
.glass-wrap{max-width:var(--measure);margin-top:clamp(52px,10vh,80px)}
.glass-surface{border:0;border-top:1px solid var(--accent);margin-block:14px 0}
.glass-mirror{max-height:2.7em;overflow:hidden}
.glass-reflection{transform:scaleY(-1);transform-origin:top;opacity:.13;user-select:none;-webkit-user-select:none;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 70%);
  mask-image:linear-gradient(to bottom,#000,transparent 70%)}
/* if masks are unsupported, show the accent rule alone — no full flipped block */
@supports not ((mask-image:linear-gradient(#000,#0000)) or (-webkit-mask-image:linear-gradient(#000,#0000))){
  .glass-mirror{display:none}
}

/* ── THE QUESTIONS — the one dark section site-wide (home) ── */
.qband{background:var(--ink);color:var(--paper);
  margin-block:clamp(64px,13vh,120px);           /* generous ivory breathing room before + after */
  padding-block:clamp(64px,11vh,104px)}
.qband-inner{max-width:calc(680px + var(--pad)*2)}
.qb-eyebrow{color:var(--accent);margin-bottom:clamp(34px,6vh,52px)}
.qlist{display:flex;flex-direction:column;gap:clamp(16px,2.6vh,26px)}
.q{font-family:"Fraunces",Georgia,serif;font-optical-sizing:auto;font-style:italic;font-weight:380;
  font-size:clamp(20px,1.5vw + .8rem,28px);line-height:1.32;letter-spacing:-.005em;color:var(--paper);max-width:none;
  opacity:0;transform:translateY(12px);transition:opacity .7s ease,transform .7s ease;
  transition-delay:calc(var(--i) * 40ms)}
.qband.in .q{opacity:1;transform:none}
.q-rule{border:0;border-top:1px solid var(--accent);margin-block:clamp(38px,6vh,52px) 0;max-width:none}
.q-close{margin-top:clamp(26px,4vh,34px);font-family:"Source Serif 4",Georgia,serif;color:var(--paper);max-width:600px}
@media(prefers-reduced-motion:reduce){.q{opacity:1;transform:none;transition:none}}

/* ── mandates + resolution (home) ── */
.eyebrow-sm{display:block;margin-bottom:22px}
.mandates{max-width:var(--measure);color:var(--ink)}
.engforms{max-width:var(--measure);margin-top:20px;font-size:15px;color:var(--ink-soft)}
.principal{max-width:var(--measure);margin-top:clamp(48px,9vh,72px);font-size:15px;color:var(--ink-soft)}

/* the "Thirty minutes" CTA — the site's last word, largest type after H1 */
.cta-block{max-width:var(--measure);margin-top:clamp(28px,5vh,40px)}
.cta-big{font-family:"Fraunces",Georgia,serif;font-optical-sizing:auto;font-weight:400;
  font-size:clamp(27px,2.8vw + .7rem,44px);line-height:1.09;letter-spacing:-.015em;color:var(--ink)}
.cta-block .cta{margin-top:clamp(28px,5vh,40px)}

/* approach intro line */
.intro{max-width:var(--measure);margin-bottom:clamp(30px,6vh,48px);color:var(--ink)}

/* ── motion: one staggered fade-up on load ── */
@keyframes fade-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.fade{opacity:0;animation:fade-up .9s cubic-bezier(.2,.6,.2,1) forwards}
.d1{animation-delay:.05s}.d2{animation-delay:.20s}.d3{animation-delay:.35s}
.d4{animation-delay:.50s}.d5{animation-delay:.65s}
@media(prefers-reduced-motion:reduce){.fade{opacity:1;animation:none}}

/* three nav labels must sit inline at 375px — shrink, don't hamburger */
@media(max-width:560px){
  :root{--pad:clamp(18px,5vw,64px)}
  .bar{gap:12px}
  nav{gap:11px}
  nav a,nav .cur{font-size:10.5px;letter-spacing:.11em}
  nav > * + *::before{margin-inline-end:11px}
  .wordmark{font-size:18px}
  .io-row .label{min-width:66px}
}