/* Site component styles — consumes brand/tokens.css semantic vars only. */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--bg);color:var(--ink);
  font-family:"Source Serif 4",Georgia,serif;
  font-size:var(--step-0);line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.brand,.btn,nav,.k{font-family:"Bricolage Grotesque",system-ui,sans-serif}
h1,h2,h3{text-wrap:balance;line-height:1.08;letter-spacing:-0.025em;font-weight:800}
p{text-wrap:pretty}
img{max-width:100%}
a{color:var(--brand)}
:focus-visible{outline:3px solid var(--accent-deep);outline-offset:2px;border-radius:4px}
.wrap{max-width:1080px;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:50;background:oklch(1 0 0 / .92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;padding-block:.8rem}
.brand{display:flex;align-items:center;gap:.55rem;font-weight:800;font-size:1.15rem;color:var(--ink);text-decoration:none}
.brand svg{flex:none}
.nav a.cta{font-weight:700;font-size:.95rem;text-decoration:none;background:var(--brand);color:#fff;padding:.55rem 1.1rem;border-radius:999px;transition:background .2s cubic-bezier(.22,1,.36,1)}
.nav a.cta:hover{background:var(--brand-deep)}

/* ---------- hero ---------- */
.hero{padding-block:clamp(3.5rem,9vw,6.5rem) clamp(3rem,7vw,5rem)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.hero .place{font-family:"Bricolage Grotesque",sans-serif;font-weight:600;color:var(--accent-deep);margin-bottom:1rem;font-size:var(--step--1)}
.hero h1{font-size:var(--step-4);margin-bottom:1.4rem}
.hero h1 em{font-style:normal;color:var(--brand)}
.hero p.lede{font-size:var(--step-1);line-height:1.5;color:var(--muted);max-width:34ch;margin-bottom:1.1rem}
.hero p.promise{font-size:var(--step-0);max-width:42ch;margin-bottom:2rem}
.btn{display:inline-block;background:var(--brand);color:#fff;text-decoration:none;font-weight:700;font-size:1.05rem;padding:.95rem 1.8rem;border-radius:999px;transition:background .2s cubic-bezier(.22,1,.36,1),translate .2s cubic-bezier(.22,1,.36,1)}
.btn:hover{background:var(--brand-deep);translate:0 -2px}
.btn.gold{background:var(--accent);color:var(--brand-deep)}
.btn.gold:hover{background:oklch(0.86 0.14 88);color:var(--brand-deep)}
.hero .aside{font-size:.92rem;color:var(--muted);margin-top:.9rem;font-style:italic}

/* the "where the day goes" graphic */
.daychart{background:var(--brand-deep);border-radius:16px;padding:clamp(1.4rem,3vw,2.2rem);color:oklch(0.95 0.01 255)}
.daychart .chart-title{font-family:"Bricolage Grotesque",sans-serif;font-size:1.05rem;font-weight:700;color:oklch(0.88 0.08 90);margin-bottom:1.2rem;line-height:1.3}
.bar{margin-bottom:1.05rem}
.bar .lab{display:flex;justify-content:space-between;font-family:"Bricolage Grotesque",sans-serif;font-size:.85rem;font-weight:600;margin-bottom:.35rem}
.bar .lab .hrs{color:oklch(0.84 0.11 88)}
.track{height:14px;border-radius:999px;background:oklch(0.38 0.07 257);overflow:hidden}
.fill{height:100%;border-radius:999px;background:linear-gradient(90deg,oklch(0.80 0.15 85),oklch(0.70 0.14 78));transform-origin:left;animation:grow 1.1s cubic-bezier(.22,1,.36,1) both}
.bar:nth-of-type(2) .fill{animation-delay:.12s}
.bar:nth-of-type(3) .fill{animation-delay:.24s}
.bar:nth-of-type(4) .fill{animation-delay:.36s}
@keyframes grow{from{scale:0 1}to{scale:1 1}}
@media (prefers-reduced-motion:reduce){.fill{animation:none}}
.daychart .sum{margin-top:1.3rem;padding-top:1.1rem;border-top:1px solid oklch(0.42 0.07 257);font-size:.95rem;line-height:1.5}
.daychart .sum strong{color:oklch(0.86 0.12 88)}
.daychart .src{margin-top:.8rem;font-size:.8rem;font-style:italic;color:oklch(0.78 0.03 255)}

/* ---------- sections ---------- */
section{padding-block:clamp(3rem,8vw,5.5rem)}
section h2{font-size:var(--step-3);margin-bottom:clamp(1.5rem,4vw,2.5rem);max-width:22ch}
.tinted{background:var(--brand-soft)}

/* how it works — a real sequence, numbers earned */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(1.5rem,3vw,2.5rem);counter-reset:step}
.step{counter-increment:step}
.step::before{content:counter(step);display:block;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:2.6rem;color:var(--accent-deep);line-height:1;margin-bottom:.6rem}
.step h3{font-size:var(--step-1);margin-bottom:.6rem}
.step p{color:var(--muted);font-size:var(--step--1);line-height:1.6;max-width:52ch}
.step p strong{color:var(--ink)}

/* services — list rows, not card grid */
.svc{border-top:1px solid var(--line)}
.svc-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr) auto;gap:clamp(1rem,3vw,2.5rem);padding-block:clamp(1.4rem,3vw,2rem);border-bottom:1px solid var(--line);align-items:baseline}
.svc-row h3{font-size:var(--step-1)}
.svc-row .what{color:var(--muted);font-size:var(--step--1);line-height:1.6;max-width:60ch}
.svc-row .what ul{list-style:none;margin-top:.5rem}
.svc-row .what li{padding-left:1.1rem;position:relative;margin-bottom:.25rem}
.svc-row .what li::before{content:"";position:absolute;left:0;top:.55em;width:.45em;height:.45em;border-radius:50%;background:var(--accent)}
.price{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;white-space:nowrap;color:var(--brand);font-size:var(--step-0)}
.price small{display:block;font-weight:400;color:var(--muted);font-size:.78rem;letter-spacing:.01em}

/* who it's for */
.who p.intro{max-width:58ch;color:var(--muted);margin-bottom:2rem;font-size:var(--step-0)}
.who-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(1.25rem,3vw,2rem)}
.who-item{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem 1.5rem 1.4rem}
.who-item h3{font-size:1.15rem;margin-bottom:.5rem;color:var(--brand)}
.who-item p{font-size:.95rem;color:var(--muted);line-height:1.6;max-width:52ch}
.who .closer{margin-top:2rem;font-size:var(--step-1);font-weight:600;font-family:"Bricolage Grotesque",sans-serif;max-width:30ch}

/* about */
.about-grid{display:grid;grid-template-columns:auto 1fr;gap:clamp(2rem,5vw,3.5rem);align-items:start}
.portrait{width:clamp(160px,22vw,220px);aspect-ratio:4/5;border-radius:var(--radius);background:linear-gradient(160deg,var(--accent-soft),var(--brand-soft));display:grid;place-items:center;color:var(--muted);font-family:"Bricolage Grotesque",sans-serif;font-size:.85rem;border:1px solid var(--line)}
.about h2{margin-bottom:1rem}
.about .name{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:var(--step-1);margin-bottom:1rem}
.about p{max-width:58ch;margin-bottom:1rem}
.about p.kicker-line{font-style:italic;color:var(--brand);font-weight:600;font-size:var(--step-0)}

/* contact */
.contact{background:var(--brand-deep);color:oklch(0.96 0.01 255)}
.contact h2{color:#fff;max-width:20ch}
.contact p{color:oklch(0.86 0.02 255);max-width:52ch;margin-bottom:2rem}
.contact .next{font-size:.95rem;margin-top:1.4rem;margin-bottom:.6rem;max-width:52ch}
.contact .alt{font-size:.95rem;margin-bottom:0}
.contact a.mail{color:oklch(0.86 0.12 88);font-weight:600}
.contact a.mail:focus-visible{outline-color:var(--accent)}

footer{padding-block:1.6rem;font-size:.85rem;color:var(--muted);font-family:"Bricolage Grotesque",sans-serif}
footer .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* responsive */
@media (max-width:820px){
  .hero-grid{grid-template-columns:1fr}
  .svc-row{grid-template-columns:1fr;gap:.5rem}
  .price{margin-top:.3rem}
  .about-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .cta-long{display:none}
}