/* =========================================================================
   8posts.com — one file, no dependencies.
   Design system lifted from the scope tool: warm charcoal + terracotta,
   Fraunces / IBM Plex Mono / Inter.
   ========================================================================= */
:root{
  --bg:#17181C; --card:#1F2126; --ink:#F3F1EC; --muted:#A7A69E;
  --line:#33353B; --field:#26282E;
  --sun:#E8814A; --sun-ink:#1a1205;
  --teach:#3DA88C; --teach-bg:#16302A;
  --flag:#E07A6E; --flag-bg:#331e1b;
  --focus:#7BA7E0;
  --shell:1120px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  line-height:1.5; -webkit-font-smoothing:antialiased;
}
img{max-width:100%;}
a{color:inherit;}

/* shared type helpers (also used by the embedded scope tool) */
.mono{font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums;}
.serif{font-family:'Fraunces',Georgia,serif;}
.sun{color:var(--sun);}
.eyebrow{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);}
h1{font-family:'Fraunces',Georgia,serif; font-weight:900; letter-spacing:-.02em; line-height:1.02;
   font-size:clamp(2rem,5vw,3.4rem); margin:0 0 12px;}
.lede{color:var(--muted); max-width:620px; margin:0 0 28px; font-size:15px;}

.shell{max-width:var(--shell); margin:0 auto; padding:0 20px;}

/* ---- buttons (homepage) — named .pill so they never collide with the tool's .btn ---- */
.pill{display:inline-flex; align-items:center; gap:8px; background:var(--sun); color:var(--sun-ink);
  border:1.5px solid var(--sun); border-radius:999px; padding:13px 26px; cursor:pointer;
  font:600 15px/1 'Inter',sans-serif; text-decoration:none; transition:opacity .15s ease, transform .15s ease;}
.pill:hover{opacity:.92; transform:translateY(-1px);}
.pill-ghost{background:transparent; color:var(--ink); border-color:var(--line);}
.pill-ghost:hover{border-color:var(--muted); opacity:1;}
.pill:focus-visible,.pill-ghost:focus-visible{outline:2.5px solid var(--focus); outline-offset:2px;}

/* ---- nav ---- */
.nav-bar{position:sticky; top:0; z-index:50; background:rgba(23,24,28,.82);
  backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--line);}
.nav-inner{max-width:var(--shell); margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;}
.brand img{height:26px; display:block;}
.nav-links{display:flex; align-items:center; gap:30px;}
.nav-links a.link{font-size:14px; font-weight:500; color:var(--muted); text-decoration:none;
  transition:color .15s ease;}
.nav-links a.link:hover{color:var(--ink);}
.nav-cta{padding:9px 18px; font-size:14px;}
.burger{display:none; background:none; border:0; color:var(--ink); cursor:pointer; padding:6px;}
.burger svg{display:block;}
@media (max-width:760px){
  .nav-links{position:absolute; top:100%; left:0; right:0; background:var(--bg);
    border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch;
    gap:0; padding:8px 0; display:none;}
  .nav-links.open{display:flex;}
  .nav-links a.link{padding:14px 24px; border-top:1px solid var(--line); color:var(--ink);}
  .nav-links .nav-cta{margin:12px 24px; justify-content:center;}
  .burger{display:block;}
}

/* ---- hero ---- */
.hero{text-align:center; padding:64px 20px 40px;}
.hero .eyebrow{display:inline-block; margin-bottom:16px;}
.hero h1{max-width:14ch; margin-left:auto; margin-right:auto; font-size:clamp(2.3rem,6vw,4rem);}
.hero .lede{margin:0 auto 30px; font-size:clamp(15px,2.2vw,17px);}
.hero-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:52px;}
.hero-video{max-width:940px; margin:0 auto; border-radius:20px; overflow:hidden;
  border:1px solid var(--line); box-shadow:0 24px 70px rgba(0,0,0,.55); background:#000;}
.hero-video video{display:block; width:100%; height:auto;}
.trust{margin-top:56px;}
.trust p{margin:0 0 22px;}
.logos{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:34px;}
.logos img{height:34px; object-fit:contain; opacity:.55; filter:grayscale(1) brightness(1.7);
  transition:opacity .2s ease;}
.logos img:hover{opacity:.95;}

/* ---- section scaffolding ---- */
.band{padding:90px 20px;}
.band--alt{background:#0F1013;}
.center{text-align:center;}
.section-head{max-width:640px; margin:0 auto 44px;}
.section-head .eyebrow{display:block; margin-bottom:12px;}
.section-head h2{font-family:'Fraunces',Georgia,serif; font-weight:900; letter-spacing:-.02em;
  font-size:clamp(1.8rem,4vw,2.6rem); line-height:1.08; margin:0 0 14px;}
.section-head p{color:var(--muted); font-size:15px; margin:0;}

/* ---- portfolio ---- */
.work-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px;
  max-width:var(--shell); margin:0 auto 40px;}
.work-grid a{position:relative; display:block; border-radius:12px; overflow:hidden;
  aspect-ratio:16/9; background:#111; border:1px solid var(--line);}
.work-grid img{width:100%; height:100%; object-fit:cover; display:block; opacity:.85;
  transition:opacity .3s ease, transform .5s ease;}
.work-grid a:hover img{opacity:1; transform:scale(1.03);}

/* ---- location ---- */
.loc h2{font-family:'Fraunces',Georgia,serif; font-weight:900; letter-spacing:-.02em;
  font-size:clamp(1.7rem,4vw,2.4rem); line-height:1.2; margin:0 auto; max-width:16ch;}

/* ---- final cta ---- */
.final{max-width:640px; margin:0 auto;}
.final h2{font-family:'Fraunces',Georgia,serif; font-weight:900; letter-spacing:-.02em;
  font-size:clamp(1.8rem,4vw,2.6rem); line-height:1.1; margin:0 0 14px;}
.final p{color:var(--muted); font-size:16px; margin:0 auto 30px; max-width:46ch;}

/* ---- footer ---- */
.foot{background:#0F1013; border-top:1px solid var(--line); padding:48px 20px;}
.foot-inner{max-width:var(--shell); margin:0 auto; display:flex; flex-wrap:wrap;
  justify-content:space-between; align-items:flex-start; gap:28px;}
.foot img{height:28px; margin-bottom:14px; display:block;}
.foot small{color:#6a6a63; font-size:13px;}
.foot .contact{text-align:right; font-size:14px; color:var(--muted);}
.foot .contact a{color:var(--muted); text-decoration:none; transition:color .2s ease;}
.foot .contact a:hover{color:var(--ink);}
@media (max-width:560px){ .foot-inner{flex-direction:column;} .foot .contact{text-align:left;} }

/* =========================================================================
   EMBEDDED SCOPE TOOL — original styles, scoped under .scope so its generic
   class names (.grid, .btn, .line, .nav, .tile…) never touch the homepage.
   ========================================================================= */
.scope .wrap{max-width:var(--shell); margin:0 auto; padding:8px 20px 20px;}
.scope .mono{font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums;}
.scope .serif{font-family:'Fraunces',Georgia,serif;}
.scope .eyebrow{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);}
.scope .headline{font-family:'Fraunces',Georgia,serif; font-weight:900; letter-spacing:-.02em; line-height:1.02;
   font-size:clamp(1.9rem,5vw,3.2rem); margin:0 0 12px;}
.scope .lede{color:var(--muted); max-width:620px; margin:0 0 28px; font-size:15px;}
.scope .grid{display:grid; gap:28px; grid-template-columns:1fr; align-items:start;}
@media(min-width:900px){ .scope .grid{grid-template-columns:1fr 1fr;} }
.scope .progresswrap{margin:6px 0 18px;}
.scope .progresshead{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px;}
.scope .bar{height:5px; background:var(--field); border-radius:99px; overflow:hidden;}
.scope .barfill{height:100%; background:var(--sun); border-radius:99px; transition:width .3s ease;}
.scope .steptitle{font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:26px; margin:2px 0 4px;}
.scope .stepintro{color:var(--muted); font-size:14px; margin:0 0 18px;}
.scope fieldset{border:0; margin:0 0 22px; padding:0;}
.scope legend{padding:0;}
.scope .qlabel{font-weight:600; font-size:15px; margin:0 0 8px;}
.scope .qhelp{color:var(--muted); font-size:13px; margin:2px 0 10px;}
.scope .opts{display:flex; flex-wrap:wrap; gap:8px;}
.scope .opt{border:1.5px solid var(--line); background:var(--field); color:var(--ink);
  border-radius:999px; padding:9px 15px; font-size:14px; font-weight:500; cursor:pointer;
  font-family:inherit; transition:border-color .12s, background .12s, color .12s;}
.scope .opt:hover{border-color:var(--muted);}
.scope .opt:focus-visible{outline:2.5px solid var(--focus); outline-offset:2px;}
.scope .opt[aria-pressed="true"]{background:var(--sun); border-color:var(--sun); color:var(--sun-ink); font-weight:600;}
.scope .opt[disabled]{opacity:.55; cursor:default;}
.scope .opt.locked[aria-pressed="true"]{background:var(--sun);}
.scope .tilewrap{display:grid; gap:8px; grid-template-columns:1fr;}
@media(min-width:560px){ .scope .tilewrap{grid-template-columns:1fr 1fr 1fr;} }
.scope .tile{border:1.5px solid var(--line); background:var(--field); color:var(--ink);
  border-radius:12px; padding:12px 14px; text-align:left; cursor:pointer; font-family:inherit;
  transition:border-color .12s, box-shadow .12s;}
.scope .tile:hover{border-color:var(--muted);}
.scope .tile:focus-visible{outline:2.5px solid var(--focus); outline-offset:2px;}
.scope .tile[aria-pressed="true"]{border-color:var(--sun); box-shadow:inset 0 0 0 1.5px var(--sun);}
.scope .tile b{display:block; font-size:14px; margin-bottom:3px;}
.scope .tile span{display:block; font-size:12px; color:var(--muted); line-height:1.4;}
.scope .reason{font-size:12px; color:var(--teach); margin:6px 0 0;}
.scope .moneyfield{display:flex; align-items:stretch; border:1.5px solid var(--line); border-radius:10px;
  background:var(--field); overflow:hidden; max-width:180px;}
.scope .moneyfield:focus-within{outline:2.5px solid var(--focus); outline-offset:1px; border-color:var(--ink);}
.scope .moneyfield .pfx{font-family:'IBM Plex Mono',monospace; color:var(--muted); padding:10px 4px 10px 12px;}
.scope .moneyfield input{border:0; outline:0; background:transparent; color:var(--ink); font-size:16px;
  font-family:'IBM Plex Mono',monospace; padding:10px 12px 10px 2px; width:100%;}
.scope .nav{display:flex; gap:10px; margin-top:8px;}
.scope .btn{font-family:inherit; font-size:14px; font-weight:600; border-radius:9px; padding:10px 18px; cursor:pointer;
  border:1.5px solid var(--line); background:var(--field); color:var(--ink);}
.scope .btn:hover{border-color:var(--muted);}
.scope .btn:focus-visible{outline:2.5px solid var(--focus); outline-offset:2px;}
.scope .btn.primary{background:var(--ink); color:var(--bg); border-color:var(--ink);}
.scope .btn.primary:hover{opacity:.9;}
.scope .btn[disabled]{opacity:.4; cursor:default;}
.scope .est{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px;}
@media(min-width:900px){ .scope .est{position:sticky; top:90px;} }
.scope .esthead{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px;}
.scope .tiers{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px;}
.scope .tier{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  border:1.5px solid var(--line); border-radius:999px; padding:6px 12px; background:var(--field);
  color:var(--ink); cursor:pointer;}
.scope .tier[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink);}
.scope .tier:focus-visible{outline:2.5px solid var(--focus); outline-offset:2px;}
.scope .verdict{font-size:15px; margin:0 0 14px;}
.scope .verdict .u{background:linear-gradient(180deg,transparent 60%,rgba(232,129,74,.35) 60%);}
.scope .line{display:flex; align-items:baseline; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); font-size:14px;}
.scope .line:last-of-type{border-bottom:0;}
.scope .dots{flex:1; border-bottom:1.5px dotted var(--line); transform:translateY(-3px); min-width:14px;}
.scope .amt{font-family:'IBM Plex Mono',monospace; font-weight:600;}
.scope .totalrow{display:flex; align-items:baseline; gap:12px; padding-top:12px; margin-top:4px; border-top:2px solid var(--ink);}
.scope .totalrow .amt{font-family:'IBM Plex Mono',monospace; font-size:26px; font-weight:600;}
.scope .nexthint{font-size:13px; color:var(--muted); margin:12px 0 0;}
.scope .dropped{font-size:13px; color:var(--muted); margin:6px 0 0;}
.scope .flag{background:var(--flag-bg); border:1.5px solid var(--flag); border-radius:10px; padding:12px 14px; margin:0 0 14px;}
.scope .flag b{color:var(--flag);}
.scope .assumes{margin:18px 0 0;}
.scope .assumes ul{margin:6px 0 0; padding:0; list-style:none;}
.scope .assumes li{font-size:13px; color:var(--muted); padding:3px 0;}
.scope .teach{background:var(--teach-bg); border-left:3px solid var(--teach); border-radius:0 8px 8px 0;
  padding:9px 12px; font-size:13px; margin:10px 0 0; line-height:1.45;}
.scope .policy{font-size:13px; color:var(--muted); margin:16px 0 0;}
.scope .cardbtns{display:flex; gap:8px; margin-top:16px; flex-wrap:wrap;}
.scope .chip{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  border:1.5px solid var(--line); border-radius:999px; padding:8px 13px; background:var(--field); color:var(--ink);
  cursor:pointer; text-decoration:none; display:inline-block;}
.scope .chip.go{background:var(--sun); border-color:var(--sun); color:var(--sun-ink); font-weight:600;}
.scope .chip:focus-visible{outline:2.5px solid var(--focus); outline-offset:2px;}
.scope .ballpark{font-size:13px; color:var(--muted); margin:14px 0 0;}
.scope .stickybar{position:sticky; bottom:0; margin-top:20px; background:var(--card); border:1px solid var(--line);
  border-radius:12px; padding:12px 16px; display:none; justify-content:space-between; align-items:center;}
@media(max-width:899px){ .scope .stickybar{display:flex;} }
.scope .stickybar .amt{font-family:'IBM Plex Mono',monospace; font-size:18px; font-weight:600;}

/* ---- booking modal (vanilla, replaces the old Bootstrap one) ---- */
.book-overlay{position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.7);
  display:none; align-items:center; justify-content:center; padding:20px;}
.book-overlay.open{display:flex;}
.book-modal{background:white; border:1px solid var(--line); border-radius:16px;
  width:100%; max-width:820px; max-height:88vh; overflow:hidden; display:flex; flex-direction:column;}
.book-head{display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line);}
.book-head h3{font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:20px; margin:0;}
.book-close{background:none; border:0; color:var(--muted); font-size:26px; line-height:1; cursor:pointer; padding:0 4px;}
.book-close:hover{color:var(--ink);}
.book-body{position:relative; height:78vh;}
.book-body iframe{width:100%; height:100%; border:0; display:block;}

/* ---- back to top ---- */
.totop{position:fixed; right:22px; bottom:22px; z-index:40; width:44px; height:44px; border-radius:50%;b
  background:var(--field); border:1.5px solid var(--line); color:var(--ink); cursor:pointer;
  display:none; align-items:center; justify-content:center; opacity:0; transition:opacity .2s ease;}
.totop.show{display:flex; opacity:1;}
.totop:hover{border-color:var(--muted);}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important; animation:none !important;}
}