/* Alyssa — one page. BLACK & GOLD (her preference, via Sam 2026-09-08). */
:root{--paper:#121212;--paper-2:#1a1a1a;--paper-3:#222;--ink:#f4efe4;--ink-soft:#cfc7b8;--muted:#9a917f;--gold:#d4af5a;--gold-deep:#b8923f;--gold-soft:#e9d3a0;--line:#2e2b25;--white:#1f1e1b;
  --clay:var(--gold);--clay-deep:var(--gold-deep);--sand:var(--gold-soft);
  --display:'Fraunces',Georgia,serif;--body:'Nunito Sans',-apple-system,Segoe UI,sans-serif;--script:'Pinyon Script',cursive}
*{box-sizing:border-box}
/* Sticky-header offset for anchor jumps. JS refines this from the real header height on load
   and resize; these are the measured fallbacks (79 / 138 / 123 px headers + breathing room). */
/* ⛔ NO scroll-behavior:smooth. Measured in Chrome 2026-09-09 with a single-variable bisect
   (two identical pages, only this declaration differing): with smooth, a hash on load or a nav
   click does NOTHING - scrollY stays 0. Without it the anchor lands correctly. Instant jumps
   always work; the animation is not worth a nav that silently fails. */
html{scroll-padding-top:95px}
@media(max-width:900px){html{scroll-padding-top:152px}}
@media(max-width:560px){html{scroll-padding-top:137px}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold)}
.wrap{width:min(1040px,92vw);margin:0 auto}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.12;margin:0 0 14px;letter-spacing:-.01em}
h1{font-size:clamp(34px,5.2vw,58px)} h2{font-size:clamp(26px,3.4vw,38px)} h3{font-size:21px}
p{margin:0 0 16px}
.eyebrow{font-size:12.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
/* header */
.site-head{position:sticky;top:0;z-index:50;background:rgba(18,18,18,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;min-width:0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);min-width:0;flex:1 1 auto}
.sig{font-family:var(--script);font-size:38px;line-height:1;color:var(--gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sig-img{height:46px;width:auto}
.brand small{display:block;font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:2px}
.callbtn{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;background:var(--gold);color:#121212;text-decoration:none;font-weight:800;font-size:15px;padding:11px 18px;border-radius:999px;white-space:nowrap}
.callbtn:hover{background:var(--clay-deep)} .callbtn svg{width:16px;height:16px;fill:currentColor}
.cb-short{display:none}
@media(max-width:560px){.sig{font-size:30px}.brand small{display:none}.callbtn{padding:10px 14px}.callbtn .cb-num{display:none}.callbtn .cb-short{display:inline}}
/* hero */
/* The portrait glow is a 124%-wide absolutely-positioned pseudo-element; without clipping it
   pushed the page 27px wider than a 390px phone viewport. Measured, then fixed here. */
/* No bottom padding: she stands ON the section's bottom border. The text column keeps its own. */
.hero{padding:64px 0 0; overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:center}

@media(max-width:860px){.hero-grid{grid-template-columns:1fr;gap:30px}}
.lede{font-size:20px;color:var(--ink-soft);max-width:38ch}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 22px;border-radius:999px;font-weight:800;text-decoration:none;font-size:16px}
.btn-solid{background:var(--gold);color:#121212} .btn-solid:hover{background:var(--clay-deep)}
.btn-ghost{border:1.5px solid var(--gold);color:var(--gold)} .btn-ghost:hover{background:var(--gold);color:#121212}
.portrait{position:relative;justify-self:center;width:min(420px,100%)}
.portrait .ph{aspect-ratio:4/5;border-radius:18px;background:linear-gradient(160deg,#2a2618,var(--paper-2));border:1px solid var(--line);display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;color:var(--muted);font-size:14px}
/* Frameless: she is a transparent cutout standing on the page background, not a boxed photo.
   The glow is drawn BY THE PAGE behind her, so it blends with whatever the section background is. */
.portrait img{width:100%;height:auto;display:block;position:relative;z-index:1;
  filter:drop-shadow(0 26px 44px rgba(0,0,0,.55))}
.portrait::before{content:"";position:absolute;left:50%;top:4%;transform:translateX(-50%);
  width:132%;aspect-ratio:1/1;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(212,175,90,.40),rgba(212,175,90,.17) 46%,rgba(212,175,90,0) 72%)}
.portrait .tag{position:absolute;left:0;top:8%;z-index:2;box-shadow:0 6px 18px rgba(0,0,0,.45);background:var(--gold);color:#121212;font-size:12px;font-weight:800;letter-spacing:.06em;padding:6px 10px;border-radius:999px}
/* bands */
.band{padding:64px 0} .band-alt{background:var(--paper-2)}
.band-ink{background:linear-gradient(180deg,#1c1808,#141208);color:var(--ink);border-top:1px solid #3a3118;border-bottom:1px solid #3a3118} .band-ink .eyebrow{color:var(--gold)} .band-ink a{color:var(--gold)}
.two{display:grid;grid-template-columns:.8fr 1.2fr;gap:44px;align-items:start}
@media(max-width:860px){.two{grid-template-columns:1fr;gap:16px}}
.prose{max-width:62ch} .prose p{color:var(--ink-soft)} .band-ink .prose p{color:var(--ink-soft)}
.pull{font-family:var(--display);font-size:clamp(22px,2.6vw,30px);line-height:1.3;color:var(--gold-soft);border-left:4px solid var(--gold);padding-left:18px;margin:26px 0}
.band-ink .pull{color:var(--gold-soft);border-color:var(--gold)}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
@media(max-width:860px){.pillars{grid-template-columns:1fr 1fr}} @media(max-width:560px){.pillars{grid-template-columns:1fr}}
.pillar{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:20px 20px 18px}
.pillar b{display:block;font-family:var(--display);font-size:19px;margin-bottom:6px}
.pillar p{margin:0;font-size:15px;color:var(--ink-soft)}
.quote{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:22px 24px;font-size:17px;color:var(--ink-soft);margin:0 0 14px}
.quote b{display:block;font-family:var(--display);color:var(--ink);font-size:19px;margin-bottom:6px}
/* contact */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
@media(max-width:760px){.contact{grid-template-columns:1fr}}
.rows{display:grid;gap:0;border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:120px 1fr;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);align-items:baseline}
.row span{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.row b{font-weight:700;font-size:17px} .row b a{color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--gold)}
@media(max-width:400px){.row{grid-template-columns:1fr;gap:4px}}
footer{padding:36px 0 44px;font-size:14px;color:var(--muted)}
footer .legal{max-width:70ch;line-height:1.6}
footer .sigsm{font-family:var(--script);font-size:30px;color:var(--gold);margin-bottom:8px}
@media (prefers-reduced-motion: reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ---------- verify-my-licence (ported from sjiadvisory.com, gold palette) ---------- */
.npn-card{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:22px 22px 20px}
.npn-label{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.npn-num{font-family:ui-monospace,Menlo,monospace;font-size:32px;font-weight:700;color:var(--gold);letter-spacing:.04em;margin-bottom:16px}
.npn-num button{font:700 11.5px ui-monospace,Menlo,monospace;padding:6px 11px;border:1px solid var(--line);border-radius:8px;background:var(--paper-2);color:var(--ink-soft);cursor:pointer;vertical-align:middle;margin-left:12px}
.npn-num button:hover{border-color:var(--gold)}
.vpick{border:1px solid var(--line);border-radius:12px;padding:14px 15px;margin-bottom:14px;background:var(--paper-2)}
.vpick label{display:block;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.vpick select{width:100%;font:inherit;font-size:15px;padding:11px 12px;border:1px solid var(--line);border-radius:9px;background:var(--paper);color:var(--ink);cursor:pointer}
.vpick select:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.vresult{margin-top:12px;font-size:14px;line-height:1.55;color:var(--ink)} .vresult b{font-weight:800}
.vresult a{display:inline-flex;align-items:center;gap:7px;margin-top:9px;font-weight:800;font-size:14px;color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.verify-links{display:flex;flex-direction:column;gap:10px}
.vgroup{border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:border-color .15s} .vgroup:hover{border-color:var(--gold)}
.vlink{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 16px;font-weight:800;font-size:14.5px;color:var(--ink);text-decoration:none;transition:.15s}
.vlink:hover{background:var(--paper-2)} .vlink span:last-child{color:var(--gold)}
.vdrop summary{cursor:pointer;list-style:none} .vdrop summary::-webkit-details-marker{display:none} .vdrop summary::marker{content:""}
.vdrop[open] summary{background:var(--paper-2)} .vchev{display:inline-block;transition:transform .18s ease} .vdrop[open] .vchev{transform:rotate(90deg)}
.vstates{display:flex;flex-direction:column;gap:1px;padding:10px 4px 2px}
.vstates-note{font-size:12.5px;line-height:1.5;color:var(--muted);margin:0 12px 10px}
.vstates a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;font-size:13.5px;font-weight:700;color:var(--ink);text-decoration:none}
.vstates a:hover{background:var(--paper-2)} .vstates a span{color:var(--gold);font-weight:400}
.vgroup-states{margin:0;padding:0 16px 12px;font-size:12.5px;line-height:1.65;color:var(--muted)}
.vgroup-states b{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);display:block;margin-bottom:3px}
.vgroup.is-match{border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,175,90,.18)}
/* full-photo variant: landscape frame */
.portrait.wide{width:min(520px,100%)} .portrait.wide img{aspect-ratio:auto}

/* ---------- header nav (scrolls the page) ---------- */
.nav{display:flex;gap:22px;font-size:14px;font-weight:800;min-width:0}
.nav a{color:var(--ink-soft);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent;white-space:nowrap}
.nav a:hover,.nav a.is-active{color:var(--gold);border-bottom-color:var(--gold)}
@media(max-width:900px){
  .head-in{flex-wrap:wrap;padding-bottom:0}
  .nav{order:3;flex:1 0 100%;gap:18px;font-size:13.5px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:8px 0 10px;margin-top:2px;border-top:1px solid var(--line);scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
}
/* ---------- light contrast bands (cream on the black page) ---------- */
.band-light{background:#f4efe4;color:#171512}
.band-light h2,.band-light h3{color:#171512}
.band-light .eyebrow{color:var(--gold-deep)}
.band-light p,.band-light .prose p{color:#4a443c}
.band-light .quote{background:#fffdf9;border-color:#e6dcc8;color:#4a443c} .band-light .quote b{color:#171512}
.band-light .npn-card{background:#fffdf9;border-color:#e6dcc8}
.band-light .npn-num{color:var(--gold-deep)} .band-light .npn-num button{background:#f4efe4;border-color:#e6dcc8;color:#4a443c}
.band-light .vpick{background:#f4efe4;border-color:#e6dcc8} .band-light .vpick select{background:#fffdf9;color:#171512;border-color:#e6dcc8}
.band-light .vresult{color:#171512} .band-light .vresult a{color:var(--gold-deep)}
.band-light .vgroup{border-color:#e6dcc8} .band-light .vlink{color:#171512} .band-light .vlink:hover,.band-light .vdrop[open] summary{background:#f4efe4}
.band-light .vstates a{color:#171512} .band-light .vstates a:hover{background:#f4efe4}
.band-light .vgroup-states{color:#7a7060} .band-light .vgroup-states b{color:#4a443c}
.band-light .vgroup.is-match{border-color:var(--gold-deep);box-shadow:0 0 0 3px rgba(184,146,63,.2)}

/* legibility: every band sets its own body-text colour; no inline colours in the markup */
.band p,.hero p{color:var(--ink-soft)}
.band-light p,.band-light .prose p,.band-light .quote{color:#3d3831}
.band-light .eyebrow{color:#8f6f2a}
.band-light .vstates-note,.band-light .vgroup-states{color:#5c5346}
.band-light .row span{color:#6b6255}

/* contrast audit 2026-09-08: gold on cream needs the deep gold; labels in the light band go dark */
.band-light .vpick label,.band-light .npn-label{color:#5c5346}
.band-light .npn-num,.band-light .vresult a,.band-light .vlink span:last-child,.band-light .vstates a span,.band-light .vchev{color:#8f6f2a}
.band-light .vpick select:focus-visible{outline-color:#8f6f2a}
.band-light .vresult a{color:#7a5d1f}

/* phone usability: thumb-sized targets, no text under 12px */
@media(max-width:900px){
  .vlink,.vstates a,.vpick select,.npn-num button{min-height:44px}
  .vgroup-states b,.npn-label,.vpick label,.row span,.brand small{font-size:12px}
  .vgroup-states,.vstates-note{font-size:13px}
}

.after{margin-top:26px;padding:20px 22px;border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:12px;background:var(--paper-2)}
.after b{display:block;font-family:var(--display);font-size:20px;color:var(--gold-soft);margin-bottom:6px}
.after p{margin:0;font-size:16px}

/* phone: the header nav links are the last sub-44px tap targets on the page (measured live 2026-09-09).
   Padding goes on the LINK, not the row, so the whole strip is tappable without growing the header. */
@media(max-width:900px){
  .nav{padding:0 0 2px}
  .nav a{padding:12px 0;display:inline-flex;align-items:center}
}

/* Her email is a 35-character unbreakable string. As a grid item it defaults to min-width:auto,
   so it refused to shrink and pushed the contact section 44px past a 430px phone viewport.
   (It only appears once Cloudflare's decoder swaps the shorter obfuscated placeholder for the
   real address, which is why it did not show in earlier measurements.) */
.contact > *{min-width:0}
.row{min-width:0}
.row b{min-width:0; overflow-wrap:anywhere; word-break:break-word}
.row b a{overflow-wrap:anywhere}

/* ---------- contact form (mirrors the one on sjiadvisory.com: mailto, honeypot, consent) ---------- */
.contact{align-items:start}
.mini-form{grid-column:1 / -1;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:26px;margin-top:6px}
.band-light .mini-form{background:#fffdf9;border-color:#e6dcc8}
.mini-form h3{font-family:var(--display);font-size:21px;margin:0 0 4px}
.form-aside{display:block;font-size:13.5px;color:var(--muted);margin-bottom:16px}
.band-light .form-aside{color:#5c5346}
.mini-form input[type=text],.mini-form input[type=tel]{width:100%;box-sizing:border-box;padding:13px 14px;margin-bottom:10px;
  border-radius:10px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:inherit;font-size:15.5px;min-height:48px}
.band-light .mini-form input[type=text],.band-light .mini-form input[type=tel]{background:#f4efe4;border-color:#e6dcc8;color:#171512}
.mini-form input::placeholder{color:var(--muted)} .band-light .mini-form input::placeholder{color:#7a7060}
.mini-form input:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.mini-form .btn{min-height:48px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.5;color:var(--muted);margin:6px 0 16px;cursor:pointer}
.band-light .consent{color:#5c5346}
.consent input{margin:2px 0 0;width:18px;height:18px;flex:none;accent-color:var(--gold-deep)}
/* honeypot: .mini-form input[type=text] wins on specificity, so match it and go higher */
.mini-form input.hp,.hp{position:absolute!important;left:-9999px!important;top:auto!important;width:1px!important;height:1px!important;opacity:0!important;padding:0!important;margin:0!important;min-height:0!important;border:0!important;pointer-events:none}
@media(min-width:761px){
  .mini-form{grid-column:2 / 3;grid-row:1 / 3;margin-top:0;align-self:start}
  .contact{grid-template-rows:auto auto}
}

/* ---------- hero portrait: stands on the section's bottom border, head level with the H1 ----------
   Text column stays vertically centred; only the portrait bottoms out. Width is solved from the
   measured geometry (see below), not guessed. */
@media(min-width:861px){
  .hero-grid{grid-template-columns:.85fr 1fr;gap:40px}
  .portrait{align-self:end;justify-self:end;width:min(560px,100%)}
}