/* base.css — RSRIA base styles. v1.1 (2026-06-13) — "private-advisory" look & feel.
   Hand-coded, mobile-first, NO framework, NO web fonts (GTM §6: clean/fast = SEO/GEO edge;
   system serif + system sans = zero web-font latency). Deep-green brand anchored (reads premium
   AND nods to Insperity's green), teal accent, warm off-white field, serif display headings.
   DRAFT visual direction — local-only, not a cutover (DECISIONS 2026-06-13). */

:root{
  --ink:#2a3633; --muted:#647471; --line:#e4e0d5; --bg:#f3f1ea; --surface:#ffffff; --soft:#ffffff;
  --brand:#15524a; --brand-ink:#0f3d37; --brand-deep:#0c322d;
  --accent:#0e9387; --accent-ink:#0a6f66; --gold:#b08d57; --cta:#0f3d37; --flag:#b00020;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --maxw:1140px; --pad:1.25rem; --radius:10px;
}
*{box-sizing:border-box}
html{font-size:100%}
body{
  margin:0; color:var(--ink); background:var(--bg);
  font-family:var(--sans); line-height:1.65; font-size:1rem;
  -webkit-font-smoothing:antialiased;
}
.container{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad)}
a{color:var(--accent-ink)}
h1,h2,h3{font-family:var(--serif); color:var(--brand-ink); line-height:1.14; font-weight:400}
main{min-height:50vh; padding:0 0 1.5rem}

/* Accessibility — focus + skip link (were missing pre-v1.1) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px}
.skip-link{position:absolute; left:-9999px; top:0; background:var(--brand-ink); color:#fff;
  padding:.6rem 1rem; border-radius:0 0 var(--radius) 0; z-index:100}
.skip-link:focus{left:0}

/* Eyebrow / micro-label */
.eyebrow{display:block; font-size:.6875rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent-ink); font-weight:600; margin:0 0 1rem}
.eyebrow--gold{color:var(--gold)}

/* Header + nav */
.site-header{border-bottom:1px solid var(--line); background:var(--bg)}
/* Row 1 — brand bar: name + license (left), logo (right) */
.site-header__top-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:1.1rem 0 .9rem}
.brand{display:flex; flex-direction:column; gap:.15rem; color:var(--brand-ink); text-decoration:none}
.brand__name{font-family:var(--serif); font-weight:400; font-size:1.35rem; line-height:1.1; letter-spacing:.005em}
.brand__license{font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.brand-logo-link{display:inline-flex; line-height:0}
.brand__logo{height:50px; width:auto; display:block}
/* Row 2 — nav bar: Schedule-a-Call CTA (left margin), then nav links left→right */
.site-header__bar{border-top:1px solid var(--line); background:var(--surface)}
.site-header__bar-inner{display:flex; align-items:center; gap:.7rem 1.4rem; flex-wrap:wrap; padding:.5rem 0}
.site-header__cta{display:inline-flex; margin-left:auto}  /* push CTA to the right of row 2, directly under the logo */
.site-nav{display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap}
.site-nav__list{display:flex; gap:1.25rem; list-style:none; margin:0; padding:0; flex-wrap:wrap}
.site-nav__list a{text-decoration:none; color:var(--ink); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase}
.site-nav__list a:hover{color:var(--accent)}

/* Buttons */
.btn{display:inline-block; padding:.8rem 1.5rem; border-radius:6px; text-decoration:none; font-weight:600; font-size:.95rem; letter-spacing:.01em; transition:filter .2s ease, background .2s ease}
.btn--cta{background:var(--accent); color:#fff}
.btn--cta:hover{filter:brightness(1.08)}
.btn--lane{background:var(--brand-ink); color:#fff}
.btn--lane:hover{filter:brightness(1.12)}

/* Split CTA — one control, two lanes (ARCHITECTURE §14) */
.cta-split{display:inline-flex; gap:2px}
.cta-split .btn{border-radius:0}
.cta-split .btn:first-child{border-radius:6px 0 0 6px}
.cta-split .btn:last-child{border-radius:0 6px 6px 0}
.cta-split--compact .btn{padding:.5rem .85rem; font-size:.8rem}

/* Hero (lead) */
.hero{padding:3.5rem 0 2.75rem}
.hero h1{font-size:clamp(2.1rem,5.2vw,3.25rem); letter-spacing:-.01em; margin:0 0 1.35rem; max-width:15em}
.hero__sub{color:#3f4f4c; font-size:1.12rem; line-height:1.7; max-width:34em; margin:0 0 1.9rem}
.hero__actions{display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap}
.hero__more{color:var(--brand-ink); text-decoration:none; font-size:.98rem; border-bottom:1px solid var(--gold); padding-bottom:3px}
.hero__more:hover{color:var(--accent)}
.tag--draft{display:inline-block; background:#fff3cd; border:1px solid #e0c97a; color:#5b4a00; padding:.25rem .6rem; border-radius:5px; font-size:.78rem; margin-bottom:1.25rem}

/* Home hero image cycler — 16:9 banner, crossfades every 5s, randomized per load */
.hero-cycler{position:relative; width:100%; aspect-ratio:16/9; margin-top:2.25rem; border-radius:var(--radius); overflow:hidden; border:.5px solid var(--line); background:var(--soft)}
.hero-cycler__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .8s ease}
.hero-cycler__img.is-active{opacity:1}
@media (prefers-reduced-motion:reduce){ .hero-cycler__img{transition:none} }

/* Page hero image — static banner for content pages (Higgsfield owns the art; CC scaffolds
   placement only — CLAUDE.md rule #8). 21:9 cinematic on desktop, 16:9 on phones. */
.page-hero{position:relative; width:100%; aspect-ratio:21/9; margin:1.75rem 0 .25rem; border-radius:var(--radius); overflow:hidden; border:.5px solid var(--line); background:var(--soft)}
.page-hero img{width:100%; height:100%; object-fit:cover; display:block}
.page-hero__credit{position:absolute; right:.5rem; bottom:.4rem; font-size:.62rem; letter-spacing:.04em; color:#fff; background:rgba(12,50,45,.55); padding:.1rem .4rem; border-radius:4px}
@media (max-width:640px){ .page-hero{aspect-ratio:16/9} }

/* "What happens next" reassurance strip (M3 — procurement-comfort / no-pressure pattern) */
.next-steps{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); margin:2rem 0; padding:1.5rem 1.5rem 1.65rem}
.next-steps__title{font-size:1.15rem; margin:0 0 1.1rem}
.next-steps__list{list-style:none; margin:0; padding:0; display:grid; gap:1.1rem; grid-template-columns:repeat(3,1fr)}
.next-steps__list li{margin:0; font-size:.95rem; color:var(--muted)}
.next-steps__list li strong{color:var(--ink)}
.next-steps__n{display:inline-flex; align-items:center; justify-content:center; width:1.6rem; height:1.6rem;
  margin-right:.5rem; border-radius:50%; background:var(--brand); color:#fff; font-family:var(--sans);
  font-size:.85rem; font-weight:600}
@media (max-width:640px){ .next-steps__list{grid-template-columns:1fr; gap:.85rem} }

/* Trust row — quiet, verifiable-credibility strip beneath the hero (H3). Facts only; full-width
   rule, content constrained like .container. No layout shift (fixed paddings, no media). */
.trust-row{border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:1.75rem 0 0; padding:.95rem 0; background:var(--surface)}
.trust-row__list{list-style:none; margin:0 auto; max-width:var(--maxw); padding:0 var(--pad);
  display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; align-items:center}
.trust-row__item{display:flex; flex-direction:column; gap:.1rem; font-size:.9rem}
.trust-row__label{font-weight:600; color:var(--brand-ink); letter-spacing:.02em}
.trust-row__detail{color:var(--muted); font-size:.82rem; line-height:1.45}
.trust-row__verify{color:var(--accent-ink)}
.trust-row__verify:hover{color:var(--accent)}
@media (max-width:640px){ .trust-row__list{grid-template-columns:1fr; gap:.7rem} }

/* Responsive video embed — About "Meet our founder" (16:9; YouTube-nocookie or self-hosted) */
.video-embed{position:relative; width:100%; aspect-ratio:16/9; margin:1.5rem 0; border-radius:var(--radius); overflow:hidden; border:.5px solid var(--line); background:var(--brand-deep)}
.video-embed iframe,.video-embed video{position:absolute; inset:0; width:100%; height:100%; border:0; display:block; object-fit:cover}
.video-embed__placeholder{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.45rem; color:#dce8e3; text-align:center; padding:1.5rem}
.video-embed__placeholder .video-embed__icon{font-size:2.2rem; opacity:.85}
.video-embed__placeholder .eyebrow{color:var(--gold); margin:0}

/* Stat band — dark-green anchor (segment-standard trust device) */
.statband{background:var(--brand-ink); color:#cfe0da}
.statband__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; padding:2.5rem 0}
.statband__num{font-family:var(--serif); font-size:2.15rem; line-height:1; color:#7fd8c8; margin:0 0 .5rem}
.statband__lbl{font-size:.85rem; line-height:1.5; margin:0}
.statband__src{grid-column:1/-1; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:#6f928a; margin:.4rem 0 0}

/* Service cards */
.svc-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.15rem}
.svc{background:var(--surface); border:.5px solid var(--line); border-radius:var(--radius); padding:1.6rem 1.4rem; transition:border-color .2s ease, transform .2s ease}
.svc:hover{border-color:var(--accent); transform:translateY(-3px)}
.svc--primary{border:1.5px solid var(--accent)}
.svc__eyebrow{display:block; font-size:.625rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin:0 0 .7rem}
.svc--primary .svc__eyebrow{color:var(--accent-ink)}
.svc h2,.svc h3{font-size:1.35rem; margin:0 0 .55rem}
.svc p{font-size:.93rem; line-height:1.6; color:var(--muted); margin:0 0 1rem}
.svc .link{font-size:.9rem}

/* Author / E-E-A-T block */
.author{border:.5px solid var(--line); border-radius:var(--radius); padding:1.25rem 1.4rem; background:var(--surface); margin:2rem 0}
.author__name{font-family:var(--serif); font-size:1.15rem; margin:0 0 .3rem}
.author__cred{margin:0; color:var(--muted); font-size:.95rem}

/* Callback form */
.callback{background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:2rem 0; margin-top:2.5rem}
.callback__form{display:grid; gap:.9rem; max-width:560px}
.callback__form label{display:block; font-weight:600}
.callback__form input,.callback__form select{display:block; width:100%; margin-top:.25rem; padding:.65rem; border:1px solid var(--line); border-radius:6px; font-size:1rem; background:#fff}
.callback__consent{display:flex; gap:.6rem; align-items:flex-start; font-weight:400}
.callback__consent input{width:auto; margin-top:.3rem}
.callback__787{font-weight:600; margin:.25rem 0}
.callback__note{color:var(--muted); font-size:.875rem}
.callback__required-note{color:var(--muted); font-size:.85rem; margin:0 0 .25rem}
.callback__form .req{color:#b00020; font-weight:700}
.callback__optional{font-weight:400; color:var(--muted); font-size:.85rem}
/* Flag a bad/empty required field only AFTER the visitor interacts (not on first paint). */
.callback__form input:user-invalid,.callback__form select:user-invalid{border-color:#b00020; background:#fff8f8}

/* Footer — license # MUST be >= the type size of any phone/email shown (CA Ins. Code §1725.5).
   Rendered at base 1rem (>= the footer links), never reduced. */
.site-footer{border-top:3px solid var(--accent); margin-top:2.5rem; padding:2rem 0; background:var(--brand-deep); color:#dce8e3}
.site-footer a{color:#cfe6e0}
.site-footer__disclaimer .disclaimer{font-size:.8125rem; color:#b8ccc6; margin:.4rem 0}
.site-footer__license{font-size:1rem; font-weight:600; margin:1rem 0 .5rem}  /* license #: >= surrounding */
.site-footer__nav{display:flex; gap:.9rem 1.4rem; flex-wrap:wrap; font-size:.95rem; margin:.25rem 0 1.1rem; padding-bottom:1.1rem; border-bottom:1px solid rgba(255,255,255,.13)}
.site-footer__nav a{font-weight:600; text-decoration:none}
.site-footer__nav a:hover{text-decoration:underline}
.site-footer__links{display:flex; gap:1.1rem; flex-wrap:wrap; font-size:.95rem; align-items:center}
.site-footer__clients{margin-left:auto; color:#b8ccc6}

/* DRAFT / citation / confirm-at-build markers */
.cite{color:#9fb8b2; font-size:.85em}
.flag{background:#fff3cd; color:#7a4f00; padding:.05em .4em; border-radius:3px; font-weight:600; font-size:.9em}
strong{color:inherit}

/* Page sections */
.section{padding:2.5rem 0; border-top:1px solid var(--line)}
.section--flush{border-top:0}
.section .container > h2{margin-top:0; font-size:1.75rem}
.prose{max-width:70ch}
.prose h2{margin-top:1.5rem}
.prose ul{padding-left:1.2rem}
.prose h3{margin:1.1rem 0 .25rem}
.link{font-weight:600; text-decoration:none; color:var(--brand-ink)}
.link:hover{color:var(--accent); text-decoration:underline}
.note{color:var(--muted); font-size:.9rem}
.doors{display:grid; grid-template-columns:1fr 1fr; gap:1.25rem}
.door{border:.5px solid var(--line); border-radius:var(--radius); padding:1.4rem; background:var(--surface)}
.door h2{margin-top:0}
.contact-nap{list-style:none; padding:0}
.contact-nap li{margin:.35rem 0}

/* Mobile */
@media (max-width:760px){
  .statband__grid,.svc-grid{grid-template-columns:1fr}
  .doors{grid-template-columns:1fr}
}
@media (max-width:640px){
  .site-header__top-inner{align-items:center}
  .site-footer__clients{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
  .svc:hover{transform:none}
}

/* ── Learn hub / blog (provisional structural styles — 2026-06-14; refine in the P17 design pass) ── */
.learn-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1.25rem; margin-top:1.25rem}
.learn-cluster{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.25rem 1.35rem}
.learn-cluster h3{margin:0 0 .6rem}
.learn-cluster__list{list-style:none; margin:0; padding:0}
.learn-cluster__list li{padding:.35rem 0; border-bottom:1px solid var(--line); font-size:.95rem}
.learn-cluster__list li:last-child{border-bottom:0}
.learn-cluster__tools{margin-top:1rem; padding-top:.85rem; border-top:1px dashed var(--line)}
.learn-cluster__tools-h{font-size:.82rem; font-weight:600; color:var(--accent-ink); margin:0 0 .4rem}
.tag{display:inline-block; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; padding:.1rem .45rem; border-radius:4px; vertical-align:middle}
.tag--soon{background:var(--bg); border:1px solid var(--line); color:var(--muted)}
.affiliate-disclosure{font-size:.8rem; color:var(--muted); background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:.5rem .65rem; margin:.4rem 0 0}
.affiliate-disclosure .flag{color:var(--flag)}
/* Blog post (article) layout */
.article--post{padding-top:1rem}
.article__meta{color:var(--muted); font-size:.85rem; margin:0 0 1.25rem}
.article__body{max-width:70ch}
.article__body h2{margin-top:1.6rem}
.article__body h3{margin:1.1rem 0 .25rem}

/* --- Phase 2.5 AEO components (answer capsule, comparison table, B2C disclosure) 2026-06-18 --- */
.answer-capsule{font-size:1.02rem; line-height:1.55; color:var(--ink); background:var(--surface);
  border-left:3px solid var(--accent); border-radius:0 6px 6px 0; padding:.7rem .9rem; margin:.35rem 0 1rem}
.comparison{width:100%; border-collapse:collapse; margin:1rem 0 1.4rem; font-size:.93rem}
.comparison caption{text-align:left; font-weight:600; color:var(--muted); padding:0 0 .5rem}
.comparison th,.comparison td{border:1px solid var(--line); padding:.55rem .7rem; text-align:left; vertical-align:top}
.comparison thead th{background:var(--cta); color:#fff; font-weight:600}
.comparison th[scope=row]{background:var(--surface); font-weight:600}
.comparison tbody tr:nth-child(even) td,.comparison tbody tr:nth-child(even) th[scope=row]{background:var(--bg)}
.affiliate-disclosure--amazon{margin-top:.35rem}
.affiliate-label{font-size:.78rem; color:var(--muted); white-space:nowrap}
@media (max-width:640px){ .comparison{font-size:.86rem} .comparison th,.comparison td{padding:.45rem .5rem} }