/* Slice of the Pie — brand v2 (2026-09-11)
   Geist type to match scalewithstaos.com + getrichordialtryin.com, plus the hairline
   grid lines from those sites, tuned for SOTP's light palette. Layout/colors unchanged.
   .accent (Instrument Serif italic) stays available for body copy + proposals; it is
   swapped to sans in the homepage HERO only. */
@font-face{font-family:"Geist";src:url(/assets/fonts/Geist-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url(/assets/fonts/Geist-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url(/assets/fonts/Geist-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url(/assets/fonts/Geist-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url(/assets/fonts/Geist-800.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(/assets/fonts/GeistMono-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(/assets/fonts/GeistMono-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{--sans:"Geist",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;--mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace}

/* Type swap: Inter -> Geist. Targeted (not a wildcard) so client case-study display fonts are untouched. */
html body,html body button,html body input,html body select,html body textarea,
html body h1,html body h2,html body h3,html body h4,html body h5,html body h6,
html body .btn,html body .nav-link,html body .nav-menu a,html body .announce,html body .pill,html body .badge{font-family:var(--sans)}
html body code,html body pre,html body kbd{font-family:var(--mono)}

/* Less cursive: homepage hero headline accent becomes bold sans (gradient fill kept). */
html body .hero h1 .accent{font-family:var(--sans);font-style:normal;font-weight:800;letter-spacing:-.03em}

/* Hairline grid lines (from STAOS / GetRich), light-mode version.
   Fixed, 12 columns across the 1200px content width, multiply-blended so they read
   as faint lines through every light section without covering content. */
.grid-lines{position:fixed;inset:0;max-width:1248px;padding-inline:24px;box-sizing:border-box;margin-inline:auto;display:grid;grid-template-columns:repeat(12,1fr);pointer-events:none;z-index:2;opacity:.55;mix-blend-mode:multiply}

/* One wrap for everything (like STAOS / GetRich): nav + footer sit on the same 1200px
   content grid as the sections, so the outer hairlines land on the logo and the CTA. */
html body .nav-inner{max-width:1248px}
html body .footer-inner{max-width:1200px}
.grid-lines span{border-left:1px solid rgba(10,10,10,.075)}
.grid-lines span:last-child{border-right:1px solid rgba(10,10,10,.075)}
@media(max-width:768px){.grid-lines{grid-template-columns:repeat(4,1fr)}.grid-lines span:nth-child(n+5){display:none}}
@media print{.grid-lines{display:none}}

/* ================= NAV: glossy frosted glass (STAOS / GetRich style) ================= */
html body .nav{background:rgba(255,250,240,.55);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border-bottom:1px solid rgba(10,10,10,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 1px 0 rgba(255,255,255,.35)}
html body .nav::before{content:"";position:absolute;inset:0 0 auto 0;height:52%;background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0));pointer-events:none}
html body .nav .nav-inner{position:relative}

/* ================= HERO EYEBROW: no pill, no dot. Mono + a pie-slice mark ================= */
html body .hero .pill{background:none;border:0;border-radius:0;padding:0;display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:#6B7280}
html body .hero .pill .dot{display:none}
html body .hero .pill::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;background:conic-gradient(from -90deg,#FC832B 0 25%,#FED74F 25% 50%,rgba(10,10,10,.10) 50%)}
html body .hero .pill::after{content:"";flex:none;width:34px;height:1px;background:linear-gradient(90deg,rgba(10,10,10,.28),rgba(10,10,10,0))}

/* ================= NAV CTAs ================= */
/* Call: ghost pill, emoji removed, number slides out on hover */
html body .nav-call-btn{display:inline-flex;align-items:center;gap:0;padding:10px 18px;border:1px solid rgba(10,10,10,.22);border-radius:100px;background:transparent;color:#0A0A0A;font-weight:600;font-size:14.5px;line-height:1;text-decoration:none;transition:border-color .22s,background .22s,padding .22s}
html body .nav-call-btn>span:first-child{display:none}
html body .nav-call-btn .label{display:inline-flex;align-items:center;white-space:nowrap}
html body .nav-call-btn .label::after{content:"503-539-7059";display:inline-block;max-width:0;overflow:hidden;opacity:0;margin-left:0;font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.02em;color:#0A0A0A;transition:max-width .35s ease,opacity .25s ease,margin-left .35s ease}
html body .nav-call-btn:hover{border-color:#0A0A0A;background:rgba(10,10,10,.045)}
html body .nav-call-btn:hover .label::after,html body .nav-call-btn:focus-visible .label::after{max-width:130px;opacity:1;margin-left:10px}

/* Book a 15-Min Call: arrow removed; a quarter-pie "15 minutes" clock = the slice of the pie */
html body .nav .btn-orange{display:inline-flex;align-items:center;gap:10px;padding:11px 20px 11px 16px;border-radius:100px;font-weight:700;font-size:14.5px;line-height:1;transition:transform .2s,box-shadow .22s}
html body .nav .btn-orange .arrow{display:none}
html body .nav .btn-orange::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;background:conic-gradient(from -90deg,#0A0A0A 0 25%,rgba(10,10,10,.22) 25%);box-shadow:inset 0 0 0 1.5px rgba(10,10,10,.35);transition:transform .5s ease}
html body .nav .btn-orange:hover{transform:translateY(-1px);box-shadow:0 10px 30px rgba(252,131,43,.35)}
html body .nav .btn-orange:hover::before{transform:rotate(90deg)}