/* 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} html{scroll-behavior:smooth}
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 */
.hero{padding:64px 0 56px}
.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(380px,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}
.portrait img{border-radius:18px;aspect-ratio:4/5;object-fit:cover;width:100%}
.portrait .tag{position:absolute;left:14px;top:14px;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}
}