/* ============================================================
   Brunscale — landing styles
   Aesthetic: light / airy (C17), one strong amber accent (scarce),
   varied card sizes, confident large headlines. Anevo warmth in rhythm.
   ============================================================ */

:root {
  /* palette — locked around the logo accent */
  --paper:      #faf9f6;   /* page background, warm off-white */
  --paper-2:    #f3f0e8;   /* secondary surface / card fill */
  --paper-3:    #efeada;   /* warmer tint for feature blocks */
  --ink:        #1b1813;   /* primary text, warm near-black (logo ink) */
  --ink-soft:   #57534a;   /* secondary text */
  --ink-faint:  #8a8478;   /* labels, muted */
  --border:     #e6e1d4;   /* hairline */
  --accent:     #e0a100;   /* amber — logo = CTA color */
  --accent-deep:#c2870a;   /* hover / active */
  --accent-tint:#fbf2d8;   /* light amber wash for pills / highlights */
  --ink-panel:  #161514;   /* dark sections / footer */
  --band:       #f1ede2;   /* warm tinted band for section separation */

  --maxw: 1140px;
  --radius: 16px;
  --radius-sm: 11px;
  --radius-pill: 999px;
  --shadow: 0 1px 2px rgba(26,22,12,.04), 0 8px 30px rgba(26,22,12,.05);
  --shadow-soft: 0 1px 2px rgba(26,22,12,.04);
  --ease: cubic-bezier(.22,.61,.36,1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: clamp(46px, 6.5vw, 98px) 0; }
.narrow { max-width: 760px; margin-inline: auto; }
.center { text-align: center; }

/* ---------- type ---------- */
h1, h2, h3 { line-height: 1.08; letter-spacing: -0.02em; font-weight: 700; }
h1 { font-size: clamp(2.3rem, 5.4vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.85rem); letter-spacing: -0.025em; }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); }
.lead { font-size: clamp(1.1rem, 1.7vw, 1.32rem); color: var(--ink-soft); line-height: 1.55; }
.muted { color: var(--ink-soft); }
.serif-em { font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 500; letter-spacing: -0.01em; }
.accent-text { color: var(--accent-deep); }

/* eyebrow pill */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.01em;
  color: var(--accent-deep);
  background: var(--accent-tint);
  border: 1px solid #f0dca5;
  padding: 7px 15px; border-radius: var(--radius-pill);
}
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); }

.kicker { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: inherit; font-weight: 600; cursor: pointer;
  background: var(--accent); color: var(--ink);
  border: none; border-radius: var(--radius-pill);
  padding: 16px 30px; font-size: 1.02rem;
  transition: background .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
  box-shadow: 0 1px 0 rgba(0,0,0,.05);
}
.btn:hover { background: var(--accent-deep); transform: translateY(-1px); }
.btn:focus-visible { outline: 3px solid #f0c548; outline-offset: 2px; }
.btn .arr { transition: transform .18s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }
.btn-wide { width: 100%; max-width: 460px; padding: 18px 30px; }
.btn-lg { padding: 22px 40px; font-size: 1.14rem; max-width: 520px; font-weight: 700; }

/* marker highlight — amber background behind key words */
.hl {
  background: var(--accent); color: var(--ink);
  padding: 0.02em 0.26em; border-radius: 7px; font-weight: 600;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--paper-2); transform: none; }
.btn-sm { padding: 11px 20px; font-size: 0.95rem; }

.cta-block { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cta-block .microcue { font-size: 0.9rem; color: var(--ink-faint); }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250,249,246,.82);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 70px; }
.logo { height: 26px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a { font-size: 0.95rem; color: var(--ink-soft); font-weight: 500; }
.nav-links a:hover { color: var(--ink); }
@media (max-width: 820px) { .nav-links .nav-anchor { display: none; } }

/* ---------- hero ---------- */
.hero { padding-top: clamp(24px, 3.4vw, 46px); padding-bottom: clamp(52px, 7vw, 92px); text-align: center; }
.hero .eyebrow { margin-bottom: 20px; }
.hero h1 { margin-bottom: 20px; }
.hero .lead { margin: 0 auto 14px; max-width: 640px; }

/* VSL */
.vsl {
  margin: 36px auto 8px; max-width: 820px;
  border-radius: var(--radius); border: 1px solid var(--border);
  box-shadow: var(--shadow); overflow: hidden; background: var(--paper-2);
}
.vsl wistia-player { display: block; width: 100%; }

.hero-microcopy { margin: 30px auto 26px; max-width: 560px; }
.hero-microcopy .mc-title { font-weight: 700; font-size: 1rem; margin-bottom: 13px; }
/* hero: "what you get on the call" block + big CTA (competitor-modelled) */
.get-block { max-width: 720px; margin: 34px auto 22px; }
.get-pill {
  display: inline-block; font-weight: 700; font-size: 0.96rem; color: var(--ink);
  background: var(--accent-tint); border: 1px solid #f0dca5;
  padding: 9px 20px; border-radius: var(--radius-pill); margin-bottom: 16px;
}
.get-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px){ .get-rows { grid-template-columns: 1fr; } }
.get-item {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  padding: 16px 20px; font-weight: 600; font-size: 1.01rem; color: var(--ink);
  box-shadow: var(--shadow-soft);
}
.get-item .check {
  flex: none; width: 27px; height: 27px; border-radius: 50%; background: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.btn-hero {
  width: 100%; max-width: 720px; padding: 25px 40px;
  font-size: 1.28rem; font-weight: 700;
}
.btn-hero .arr { font-size: 1.15rem; }
.mc-list { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.mc-list .chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 11px 18px; font-size: 0.95rem; font-weight: 600; color: var(--ink); box-shadow: var(--shadow-soft);
}
.mc-list .chip::before { content: "→"; color: var(--accent-deep); font-weight: 700; }

/* ---------- section heading ---------- */
.sec-head { max-width: 720px; margin: 0 auto clamp(30px, 3.6vw, 50px); text-align: center; }
.sec-head h2 { margin-bottom: 16px; }
.sec-head .intro { color: var(--ink-soft); font-size: 1.08rem; }
.sec-head .eyebrow { margin-bottom: 16px; }
.sec-head .kicker { display: block; }

/* amber underline emphasis (distinct from the hero marker .hl) */
.uline {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat; background-position: 0 94%;
  background-size: 100% 0.17em; padding: 0 0.03em 0.05em;
}

/* under-button promise note (c17-style understated element) */
.promise { max-width: 560px; margin: 20px auto 0; text-align: center; }
.promise-mark { display: block; width: 34px; height: 3px; border-radius: 3px; background: var(--accent); margin: 0 auto 14px; }
.promise p { font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 500; font-size: 1.07rem; color: var(--ink-soft); line-height: 1.5; }

/* unique pillar icons */
.pico svg { width: 22px; height: 22px; display: block; }

/* ---------- cards / grids ---------- */
.card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow-soft);
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 860px){ .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* band — warm tinted section for color separation (cards float on it) */
.band { background: var(--band); }
.problem { background: var(--band); }   /* alias kept for existing markup */
.tile { padding: 24px 26px; }
.tile .plabel {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 0.98rem; color: var(--ink);
  background: var(--paper-2); border: 1px solid var(--border);
  padding: 8px 15px; border-radius: var(--radius-pill); margin-bottom: 15px;
}
.tile .plabel::before { content:""; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); }
.tile p { color: var(--ink-soft); font-size: 0.99rem; }
.closing-line { text-align: center; margin-top: 36px; font-size: clamp(1.25rem,2.2vw,1.6rem); font-weight: 600; letter-spacing: -0.02em; }
.closing-line b { color: var(--accent-deep); font-weight: 600; }

/* solution — two airy blocks */
.sol-1 { text-align: center; }
.sol-1 h2 { max-width: 760px; margin: 0 auto 18px; }
.sol-1 .lead { max-width: 640px; margin: 0 auto 34px; }
/* Solution part 2 — dark "colored focus" card (the page's strong color beat) */
.sol-2 {
  margin-top: 32px; background: var(--ink-panel); color: #f3efe6;
  border: 1px solid #2a2722; border-radius: calc(var(--radius) + 8px);
  padding: clamp(34px, 5vw, 62px); position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 44px; align-items: center;
}
.sol-2::before { content:""; position:absolute; width:380px; height:380px; border-radius:50%;
  background: radial-gradient(circle, rgba(224,161,0,.20), transparent 70%); top:-150px; right:-120px; pointer-events:none; }
.sol-2 .sol-2-body, .sol-2 .sol-2-visual { position: relative; }
@media (max-width: 860px){ .sol-2 { grid-template-columns: 1fr; gap: 28px; } }
.sol-2 h2 { color: #fff; font-size: clamp(1.6rem,2.8vw,2.3rem); margin-bottom: 16px; }
.sol-2 p { color: #c9c4b8; }
.sol-2-visual { display: flex; flex-direction: column; gap: 12px; }
.run-row {
  display: flex; align-items: center; gap: 14px; font-weight: 600; color: #f3efe6;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-sm); padding: 15px 18px;
}
.run-row .dot {
  width: 23px; height: 23px; border-radius: 50%; background: var(--accent); color: var(--ink);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.run-row .dot svg { width: 13px; height: 13px; }
.run-row span.lbl { color: var(--accent); font-size: 0.78rem; font-weight: 600; margin-left: auto; text-transform: uppercase; letter-spacing: 0.05em; }
.run-row.payoff { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.run-row.payoff .dot { background: var(--ink-panel); color: var(--accent); }
.run-row.payoff span.lbl { color: rgba(27,24,19,.6); }

/* how it works — horizontal phases */
.phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
@media (max-width: 920px){ .phases { grid-template-columns: 1fr; } }
.phase { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 26px; display: flex; flex-direction: column; box-shadow: var(--shadow-soft); }
.phase-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.phase-label { font-weight: 700; font-size: 1.18rem; letter-spacing: -0.01em; }
.phase-time { font-size: 0.78rem; font-weight: 600; color: var(--accent-deep); background: var(--accent-tint); border-radius: var(--radius-pill); padding: 4px 11px; white-space: nowrap; }
.phase-step { font-family: "Fraunces", Georgia, serif; font-size: 0.85rem; color: var(--ink-faint); margin-bottom: 14px; }
.phase p { color: var(--ink-soft); font-size: 0.98rem; margin-bottom: 20px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.chips .chip { font-size: 0.82rem; background: var(--paper-2); border: 1px solid var(--border); color: var(--ink-soft); padding: 6px 12px; border-radius: var(--radius-pill); }

/* why it works — pillars */
.pillars { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
@media (max-width: 860px){ .pillars { grid-template-columns: 1fr; } }
.pillar { padding: 30px 28px; background:#fff; border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.pillar .pico { width: 42px; height: 42px; border-radius: 11px; background: var(--accent-tint); border: 1px solid #f0dca5; display:flex; align-items:center; justify-content:center; margin-bottom: 18px; }
.pillar .pico span { width: 14px; height: 14px; border-radius: 4px; background: var(--accent); }
.pillar h3 { margin-bottom: 4px; }
.pillar .ptag { font-size: 0.82rem; color: var(--accent-deep); font-weight: 600; margin-bottom: 12px; }
.pillar p { color: var(--ink-soft); font-size: 0.97rem; }

/* founder */
.founder-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: center; }
@media (max-width: 860px){ .founder-grid { grid-template-columns: 1fr; gap: 30px; } }
.founder-photo {
  aspect-ratio: 4/5; border-radius: var(--radius); background: linear-gradient(160deg, var(--paper-2), var(--paper-3));
  border: 1px solid var(--border); overflow: hidden;
  display:flex; align-items:center; justify-content:center; color: var(--ink-faint);
  font-size: 0.85rem; box-shadow: var(--shadow-soft);
}
.founder-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; display: block; }
.founder-body h2 { margin-bottom: 20px; }
.founder-body .blk { margin-bottom: 18px; }
.founder-body .blk .lbl { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 5px; }
.founder-body p { color: var(--ink-soft); }

/* faq */
.faq { max-width: 760px; margin-inline: auto; }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 4px; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-weight: 600; font-size: 1.08rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { flex: none; width: 22px; height: 22px; position: relative; transition: transform .25s var(--ease); }
.faq summary .ic::before, .faq summary .ic::after { content:""; position:absolute; background: var(--accent-deep); border-radius: 2px; }
.faq summary .ic::before { top: 10px; left: 3px; right: 3px; height: 2px; }
.faq summary .ic::after { left: 10px; top: 3px; bottom: 3px; width: 2px; transition: transform .25s var(--ease); }
.faq details[open] summary .ic::after { transform: scaleY(0); }
.faq .ans { padding: 0 4px 24px; color: var(--ink-soft); max-width: 660px; }

/* final cta */
.final { text-align: center; }
.final-card {
  background: var(--ink-panel); color: #f3efe6; border-radius: calc(var(--radius) + 8px);
  padding: clamp(48px, 7vw, 86px) 28px; position: relative; overflow: hidden;
}
.final-card::before { content:""; position:absolute; width: 420px; height: 420px; border-radius:50%; background: radial-gradient(circle, rgba(224,161,0,.22), transparent 70%); top: -160px; right: -120px; }
.final-card h2 { color: #fff; max-width: 760px; margin: 0 auto 18px; position: relative; }
.final-card .lead { color: #c9c4b8; max-width: 560px; margin: 0 auto 30px; position: relative; }
.final-card .mc-list .chip { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #d8d3c7; }
.final-card .hero-microcopy .mc-title { color: #efeae0; }
.final .cta-block { position: relative; }

/* booking page (strategy-call.html) */
.booking { padding-top: clamp(34px, 4.5vw, 60px); }
.booking h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); }
.cal-frame {
  max-width: 940px; margin: 6px auto 0; background: #fff;
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 12px;
}
/* tall enough that the whole Calendly flow fits with no inner scrollbar
   (Calendly's own auto-resize can still override this height if it kicks in) */
.cal-frame .calendly-inline-widget { width: 100%; height: 1000px; border-radius: 12px; }
@media (max-width: 640px){ .cal-frame .calendly-inline-widget { height: 1320px; } }

/* footer */
.footer { background: var(--ink-panel); color: #b7b2a6; padding: 54px 0 40px; }
.footer-inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; flex-wrap: wrap; }
.footer .logo { height: 24px; }
.footer .tagline { font-size: 0.92rem; color: #8c887c; margin-top: 14px; max-width: 280px; }
.footer-links { display: flex; gap: 40px; flex-wrap: wrap; }
.footer-links a { color: #b7b2a6; font-size: 0.93rem; }
.footer-links a:hover { color: #fff; }
.footer-bottom { margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.08); font-size: 0.84rem; color: #79756b; display:flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* scroll reveal */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .js .reveal { opacity:1; transform:none; transition:none; } html{scroll-behavior:auto;} }

/* legal pages — terms / privacy */
.legal { max-width: 760px; margin: 0 auto; }
.legal .eyebrow { margin-bottom: 20px; }
.legal h1 { font-size: clamp(2rem, 4.4vw, 3rem); margin-bottom: 10px; }
.legal .updated { color: var(--ink-faint); font-size: 0.92rem; margin-bottom: 6px; }
.legal .intro { color: var(--ink-soft); font-size: 1.08rem; line-height: 1.7; margin: 26px 0 8px; }
.legal h2 { font-size: 1.28rem; line-height: 1.25; margin: 44px 0 12px; }
.legal p { color: var(--ink-soft); line-height: 1.72; margin: 0 0 16px; }
.legal ul { margin: 0 0 18px; padding-left: 22px; }
.legal li { color: var(--ink-soft); line-height: 1.7; margin-bottom: 9px; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--accent); }
.legal .legal-contact { margin-top: 8px; padding: 20px 22px; background: var(--paper-2); border: 1px solid var(--border); border-radius: var(--radius-sm); line-height: 1.7; color: var(--ink-soft); }

/* legal links in the footer bottom bar */
.footer-legal { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-legal a { color: #79756b; }
.footer-legal a:hover { color: #fff; }