/* Hallmark · macrostructure: A-to-B Narrative (custom) · tone: utilitarian-premium · anchor hue: warm-brass
 * theme: custom (vibe: "copper weathervane, blueprint ink, points true" · paper oklch(95.5% 0.008 90)
 *        · accent oklch(72% 0.08 75) warm-brass · Space Grotesk + Inter + Space Mono)
 * pre-emit critique: P5 H4 E5 S5 R4 V5
 * Craftvane: get high-ticket contractors found and booked.
 */

/* ============================ TOKENS ============================ */
:root{
  /* paper / ink */
  --color-ink:        oklch(15% 0.008 255);   /* near-black blueprint ink */
  --color-ink-2:      oklch(19% 0.010 255);   /* raised dark surface */
  --color-ink-3:      oklch(26% 0.012 255);   /* hairline on dark */
  --color-paper:      oklch(95.5% 0.008 90);  /* warm paper */
  --color-paper-2:    oklch(92.5% 0.010 88);  /* sunk paper band */
  --color-surface:    oklch(99% 0.004 90);    /* card on paper */

  /* text */
  --color-text:       oklch(24% 0.010 255);   /* body on light */
  --color-text-soft:  oklch(38% 0.010 255);
  --color-muted:      oklch(52% 0.010 255);
  --color-on-dark:    oklch(90% 0.006 90);    /* body on ink */
  --color-on-dark-mut:oklch(66% 0.008 255);

  /* accents */
  --color-accent:     oklch(72% 0.082 75);    /* brass */
  --color-accent-hi:  oklch(80% 0.095 78);    /* lit brass */
  --color-accent-dim: oklch(58% 0.070 74);
  --color-verd:       oklch(56% 0.070 178);   /* verdigris patina */
  --color-verd-hi:    oklch(66% 0.078 178);

  /* lines */
  --line:             oklch(87% 0.010 88);
  --line-2:           oklch(80% 0.012 86);
  --line-dark:        oklch(30% 0.012 255);

  --color-focus:      oklch(80% 0.095 78);

  /* type */
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
  --font-mono:'Space Mono','SFMono-Regular',ui-monospace,monospace;

  --text-display: clamp(2.6rem, 6.2vw, 4.6rem);
  --text-display-s: clamp(2.1rem, 4.6vw, 3.2rem);
  --text-2xl: clamp(1.7rem, 3vw, 2.35rem);
  --text-xl: clamp(1.35rem, 2.1vw, 1.65rem);
  --text-lg: 1.2rem;
  --text-base: 1.0625rem;
  --text-sm: 0.9375rem;
  --text-xs: 0.8125rem;
  --text-mono: 0.75rem;

  /* space, 4pt scale */
  --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem; --space-5:1.5rem;
  --space-6:2rem; --space-7:3rem; --space-8:4rem; --space-9:6rem; --space-10:8rem;

  --wrap:1160px;
  --radius:10px; --radius-sm:6px;

  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-in:cubic-bezier(.55,.06,.68,.19);
  --ease-in-out:cubic-bezier(.65,.05,.36,1);
  --dur-1:.16s; --dur-2:.3s; --dur-3:.6s;
}

/* ============================ RESET ============================ */
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:clip}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  color:var(--color-text);
  background:var(--color-paper);
  line-height:1.6;
  font-size:var(--text-base);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;font-style:normal;line-height:1.08;letter-spacing:-0.015em;overflow-wrap:anywhere;min-width:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
::selection{background:var(--color-accent);color:var(--color-ink)}

/* skip link */
.skip{position:absolute;left:-999px;top:0;z-index:100}
.skip:focus{left:12px;top:12px;background:var(--color-ink);color:var(--color-on-dark);padding:10px 16px;border-radius:var(--radius-sm)}

:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px;border-radius:2px}

/* eyebrow / bearing label */
.bearing{
  font-family:var(--font-mono);font-size:var(--text-mono);font-weight:700;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--color-accent-dim);
  display:inline-flex;align-items:center;gap:.6em;margin-bottom:var(--space-4);
}
.bearing::before{content:"";width:26px;height:1px;background:var(--color-accent);display:inline-block}
.on-dark .bearing,.bearing.on-dark{color:var(--color-accent)}

/* ============================ NAV ============================ */
nav.site{
  background:color-mix(in oklch,var(--color-ink) 92%,transparent);
  backdrop-filter:saturate(120%) blur(8px);
  position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line-dark);
}
nav.site .wrap{display:flex;align-items:center;gap:var(--space-5);padding-top:14px;padding-bottom:14px}
.brand{display:flex;align-items:center;gap:11px;color:var(--color-on-dark);font-family:var(--font-display);font-weight:700;font-size:1.15rem;letter-spacing:-0.02em}
.brand .mark{width:26px;height:26px;flex:none}
.brand:hover .needle{transform:rotate(-8deg)}
.brand .needle{transform-origin:50% 50%;transition:transform var(--dur-2) var(--ease-out)}
.navlinks{display:flex;gap:26px;margin-left:auto;align-items:center;list-style:none;font-family:var(--font-display);font-size:.94rem;font-weight:500}
.navlinks a{color:var(--color-on-dark-mut);padding:6px 0;position:relative}
.navlinks a:hover,.navlinks a[aria-current]{color:var(--color-on-dark)}
.navlinks a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--color-accent)}
.navlinks a.navcta,.navlinks a.navcta:hover{
  font-family:var(--font-display);font-weight:600;font-size:.9rem;color:var(--color-ink);
  padding:10px 16px;border-radius:var(--radius-sm);background:var(--color-accent);white-space:nowrap;
  transition:background var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out);
}
.navlinks a.navcta:hover{background:var(--color-accent-hi);color:var(--color-ink)}
.navcta:active{transform:translateY(1px)}
.navtoggle{display:none;background:none;border:1px solid var(--line-dark);color:var(--color-on-dark);border-radius:var(--radius-sm);padding:7px 11px;font-size:1.1rem;cursor:pointer}

/* ============================ BUTTONS ============================ */
.btn{
  font-family:var(--font-display);font-weight:600;font-size:1rem;
  padding:15px 26px;border-radius:var(--radius-sm);display:inline-flex;align-items:center;gap:10px;
  cursor:pointer;border:1px solid transparent;line-height:1;
  transition:background var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out);
}
.btn svg{width:17px;height:17px;flex:none}
.btn-pri{background:var(--color-accent);color:var(--color-ink)}
.btn-pri:hover{background:var(--color-accent-hi)}
.btn-pri:active{transform:translateY(1px)}
.btn-ghost{background:transparent;color:var(--color-on-dark);border-color:var(--line-dark)}
.btn-ghost:hover{border-color:var(--color-accent);color:var(--color-accent)}
.btn-dark{background:var(--color-ink);color:var(--color-on-dark)}
.btn-dark:hover{background:var(--color-ink-2)}

/* ============================ HERO (home) ============================ */
.hero{background:var(--color-ink);color:var(--color-on-dark);position:relative;overflow:hidden}
.hero::before{ /* faint blueprint grid */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.4;
  background-image:linear-gradient(var(--line-dark) 1px,transparent 1px),linear-gradient(90deg,var(--line-dark) 1px,transparent 1px);
  background-size:52px 52px;mask-image:radial-gradient(120% 90% at 78% 15%,#000,transparent 72%);
}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:var(--space-7);align-items:center;padding-top:var(--space-9);padding-bottom:var(--space-9)}
.hero h1{font-size:var(--text-display);color:var(--color-on-dark);font-weight:700;margin-bottom:var(--space-5)}
.hero h1 .accent{color:var(--color-accent)}
.hero .lead{font-size:var(--text-xl);color:var(--color-on-dark-mut);max-width:26em;margin-bottom:var(--space-6);line-height:1.45;font-family:var(--font-body)}
.hero-actions{display:flex;gap:var(--space-4);align-items:center;flex-wrap:wrap}
.hero .reassure{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-on-dark-mut);margin-top:var(--space-5);letter-spacing:.03em}
.hero .reassure b{color:var(--color-verd-hi);font-weight:700}

/* the weathervane signature */
.vane{width:100%;max-width:380px;margin:0 auto;aspect-ratio:1/1;position:relative}
.vane svg{width:100%;height:100%;overflow:visible}
.vane .ring{fill:none;stroke:var(--line-dark);stroke-width:1}
.vane .tick{stroke:var(--color-ink-3)}
.vane .card-lbl{font-family:var(--font-mono);font-size:13px;font-weight:700;letter-spacing:.12em;fill:var(--color-on-dark-mut)}
.vane .card-lbl.n{fill:var(--color-accent)}
.vane .rose{transform-origin:50% 50%;animation:vane-swing 3.4s var(--ease-in-out) .2s both}
.vane .needle-n{fill:var(--color-accent)}
.vane .needle-s{fill:var(--color-ink-3)}
.vane .hub{fill:var(--color-on-dark)}
.vane .outcome{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;fill:var(--color-verd-hi)}
@keyframes vane-swing{
  0%{transform:rotate(-124deg)}
  30%{transform:rotate(48deg)}
  55%{transform:rotate(-26deg)}
  75%{transform:rotate(12deg)}
  90%{transform:rotate(-4deg)}
  100%{transform:rotate(0deg)}
}

/* ============================ SECTIONS ============================ */
.band{padding:var(--space-9) 0}
.band-sm{padding:var(--space-8) 0}
.band-paper2{background:var(--color-paper-2)}
.band-ink{background:var(--color-ink);color:var(--color-on-dark)}
.band-ink h2,.band-ink h3{color:var(--color-on-dark)}
.band-ink p{color:var(--color-on-dark-mut)}
.section-head{max-width:34em;margin-bottom:var(--space-7)}
.section-head h2{font-size:var(--text-2xl);margin-bottom:var(--space-4)}
.section-head p{font-size:var(--text-lg);color:var(--color-text-soft)}
.band-ink .section-head p{color:var(--color-on-dark-mut)}

/* problem: a labelled ledger, not feature cards */
.ledger{display:grid;gap:0;border-top:1px solid var(--line)}
.band-ink .ledger{border-top-color:var(--line-dark)}
.ledger .row{display:grid;grid-template-columns:auto 1fr;gap:var(--space-5);padding:var(--space-5) 0;border-bottom:1px solid var(--line);align-items:baseline}
.band-ink .ledger .row{border-bottom-color:var(--line-dark)}
.ledger .k{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-accent-dim);letter-spacing:.08em;white-space:nowrap;padding-top:.2em}
.band-ink .ledger .k{color:var(--color-accent)}
.ledger .v{font-size:var(--text-lg);color:var(--color-text)}
.band-ink .ledger .v{color:var(--color-on-dark)}
.ledger .v b{font-weight:600}

/* capability list: numbered flow, A to B */
.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:var(--space-6)}
.flow .step{position:relative;padding-top:var(--space-5);border-top:2px solid var(--color-accent)}
.flow .step .idx{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-accent-dim);letter-spacing:.1em;margin-bottom:var(--space-3)}
.flow .step h3{font-size:var(--text-xl);margin-bottom:var(--space-3)}
.flow .step p{color:var(--color-text-soft);font-size:var(--text-base)}
.band-ink .flow .step p{color:var(--color-on-dark-mut)}

/* service blocks */
.svc{display:grid;grid-template-columns:1fr;gap:var(--space-6)}
.svc .item{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:var(--space-6);padding:var(--space-6) 0;border-bottom:1px solid var(--line);align-items:start}
.svc .item:first-child{border-top:1px solid var(--line)}
.svc .item .lead-col .tag{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-accent-dim);letter-spacing:.1em;display:block;margin-bottom:var(--space-3)}
.svc .item h3{font-size:var(--text-xl)}
.svc .item .prob{color:var(--color-muted);font-size:var(--text-sm);margin-top:var(--space-3)}
.svc .item p{color:var(--color-text-soft)}

/* proof / letter */
.letter{max-width:40em;margin:0 auto}
.letter p{font-size:var(--text-lg);color:var(--color-on-dark);margin-bottom:var(--space-5);line-height:1.6}
.letter p.sig{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-accent);margin-top:var(--space-6)}
.letter a{color:var(--color-accent);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--color-accent-dim)}
.letter a:hover{text-decoration-color:var(--color-accent)}
.letter .pull{font-family:var(--font-display);font-size:var(--text-2xl);color:var(--color-accent);font-weight:600;line-height:1.2;margin:var(--space-6) 0;letter-spacing:-0.02em}

/* value / how it pays */
.pays{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--space-7);align-items:center}
.pays .fig{border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-6);background:var(--color-surface)}
.pays .fig .lbl{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-muted);letter-spacing:.08em;text-transform:uppercase}
.pays .fig .big{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:700;color:var(--color-ink);margin:var(--space-2) 0 var(--space-4)}
.pays .fig .rule{height:1px;background:var(--line);margin:var(--space-4) 0}
.pays .fig .free{color:var(--color-verd)}

/* why-jay trust strip */
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:var(--space-5)}
.trust .t{padding:var(--space-5);border:1px solid var(--line-dark);border-radius:var(--radius);background:var(--color-ink-2)}
.trust .t h3{font-size:var(--text-lg);color:var(--color-on-dark);margin-bottom:var(--space-3);display:flex;align-items:center;gap:.5em}
.trust .t h3 svg{width:20px;height:20px;color:var(--color-accent)}
.trust .t p{color:var(--color-on-dark-mut);font-size:var(--text-sm)}

/* prose (interior pages) */
.article{padding:var(--space-8) 0}
.prose{max-width:44em}
.prose h2{font-size:var(--text-2xl);margin:var(--space-7) 0 var(--space-4)}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:var(--text-xl);margin:var(--space-6) 0 var(--space-3)}
.prose p{font-size:var(--text-lg);color:var(--color-text-soft);margin-bottom:var(--space-4);line-height:1.7}
.prose ul{margin:0 0 var(--space-5);padding-left:1.3em}
.prose li{margin-bottom:.55em;color:var(--color-text-soft)}
.prose li::marker{color:var(--color-accent)}
.prose a{color:var(--color-accent-dim);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--line-2)}
.prose a:hover{color:var(--color-accent);text-decoration-color:var(--color-accent)}
.page-hero{background:var(--color-ink);color:var(--color-on-dark);padding:var(--space-8) 0 var(--space-7)}
.page-hero h1{font-size:var(--text-display-s);color:var(--color-on-dark);margin-bottom:var(--space-4)}
.page-hero .lead{font-size:var(--text-xl);color:var(--color-on-dark-mut);max-width:34em;font-family:var(--font-body);line-height:1.45}

/* steps (how it works) */
.steps{counter-reset:s;display:grid;gap:var(--space-5);max-width:44em}
.steps .s{display:grid;grid-template-columns:auto 1fr;gap:var(--space-5);align-items:start}
.steps .s .num{counter-increment:s;font-family:var(--font-mono);font-weight:700;color:var(--color-accent);font-size:var(--text-lg);width:2.4em;height:2.4em;border:1px solid var(--line-2);border-radius:50%;display:grid;place-items:center}
.steps .s .num::before{content:counter(s,decimal-leading-zero)}
.steps .s h3{font-size:var(--text-lg);margin-bottom:var(--space-2)}
.steps .s p{color:var(--color-text-soft);font-size:var(--text-base)}

/* faq */
.faq{max-width:44em;display:grid;gap:0;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:var(--space-4) 0}
.faq summary{font-family:var(--font-display);font-weight:600;font-size:var(--text-lg);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:var(--space-4);align-items:center;color:var(--color-ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-mono);color:var(--color-accent);font-size:1.4em;transition:transform var(--dur-1) var(--ease-out)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin-top:var(--space-3);color:var(--color-text-soft);font-size:var(--text-base);line-height:1.65}

/* cta band */
.cta-band{background:var(--color-accent);color:var(--color-ink)}
.cta-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap;padding-top:var(--space-8);padding-bottom:var(--space-8)}
.cta-band h2{font-size:var(--text-2xl);color:var(--color-ink);max-width:16em}
.cta-band p{color:oklch(30% 0.05 74);margin-top:var(--space-3);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.04em}
.cta-band .btn-dark{white-space:nowrap}

/* ============================ FORM ============================ */
.form-wrap{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-7);align-items:start}
.form label{display:block;margin-bottom:var(--space-4);font-family:var(--font-display);font-size:var(--text-sm);font-weight:600;color:var(--color-ink)}
.form .req{color:var(--color-accent-dim)}
.form input,.form textarea,.form select{width:100%;padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--radius-sm);font:inherit;margin-top:6px;background:var(--color-surface);color:var(--color-text)}
.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid var(--color-focus);outline-offset:1px;border-color:var(--color-accent)}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.hp{position:absolute;left:-9999px}

/* booking aside */
.book-aside{background:var(--color-ink);color:var(--color-on-dark);border-radius:var(--radius);padding:var(--space-6)}
.book-aside h3{color:var(--color-on-dark);font-size:var(--text-xl);margin-bottom:var(--space-4)}
.book-aside ul{list-style:none;display:grid;gap:var(--space-3)}
.book-aside li{display:flex;gap:.6em;color:var(--color-on-dark-mut);font-size:var(--text-sm)}
.book-aside li svg{width:18px;height:18px;color:var(--color-verd-hi);flex:none;margin-top:2px}

/* ============================ FOOTER ============================ */
footer.site{background:var(--color-ink);color:var(--color-on-dark-mut);padding:var(--space-8) 0 var(--space-6);border-top:1px solid var(--line-dark)}
footer.site .frow{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:var(--space-6);margin-bottom:var(--space-7)}
footer.site .statement{font-family:var(--font-display);font-size:var(--text-xl);color:var(--color-on-dark);font-weight:600;max-width:14em;line-height:1.2;letter-spacing:-0.02em}
footer.site .statement .accent{color:var(--color-accent)}
footer.site h4{font-family:var(--font-mono);color:var(--color-on-dark);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.12em;margin-bottom:var(--space-4)}
footer.site a{color:var(--color-on-dark-mut);display:block;margin-bottom:var(--space-3);font-size:var(--text-sm)}
footer.site a:hover{color:var(--color-accent)}
footer.site .base{display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;padding-top:var(--space-5);border-top:1px solid var(--line-dark);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-on-dark-mut)}
footer.site .base .bear{color:var(--color-verd-hi)}

/* ============================ PRICING TIERS ============================ */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:var(--space-5);align-items:stretch}
.tier{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-6);background:var(--color-surface)}
.tier.feat{border-color:var(--color-accent);border-width:2px;position:relative}
.tier .tlabel{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.1em;color:var(--color-accent-dim);text-transform:uppercase;margin-bottom:var(--space-3)}
.tier h3{font-size:var(--text-xl);margin-bottom:var(--space-3)}
.tier .price{font-family:var(--font-display);font-weight:700;color:var(--color-ink);font-size:var(--text-2xl);line-height:1.05}
.tier .price small{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-muted);font-weight:400;display:block;margin-top:var(--space-2);letter-spacing:.02em;line-height:1.5}
.tier .desc{color:var(--color-text-soft);font-size:var(--text-base);margin:var(--space-4) 0}
.tier ul{list-style:none;display:grid;gap:var(--space-3);margin-bottom:var(--space-5)}
.tier li{display:flex;gap:.6em;color:var(--color-text-soft);font-size:var(--text-sm);align-items:flex-start}
.tier li svg{width:16px;height:16px;color:var(--color-verd);flex:none;margin-top:3px}
.tier .btn{margin-top:auto;justify-content:center;width:100%}
.tier .badge{position:absolute;top:-11px;left:var(--space-6);background:var(--color-accent);color:var(--color-ink);font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;padding:4px 11px;border-radius:100px;text-transform:uppercase}

/* ============================ GUIDES / ARTICLES ============================ */
.guide-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:var(--space-5)}
.guide-card{display:flex;flex-direction:column;padding:var(--space-6);border:1px solid var(--line);border-radius:var(--radius);background:var(--color-surface);transition:border-color var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out)}
.guide-card:hover{border-color:var(--color-accent);transform:translateY(-3px)}
.guide-card .tag{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-accent-dim);letter-spacing:.1em;margin-bottom:var(--space-3)}
.guide-card h3{font-size:var(--text-xl);margin-bottom:var(--space-3)}
.guide-card p{color:var(--color-text-soft);font-size:var(--text-base);margin-bottom:var(--space-4)}
.guide-card .more{margin-top:auto;font-family:var(--font-display);font-weight:600;color:var(--color-accent-dim);font-size:var(--text-sm);display:inline-flex;align-items:center;gap:.4em}
.guide-card:hover .more{color:var(--color-accent)}
.amet{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-on-dark-mut);letter-spacing:.04em;margin-top:var(--space-4);display:flex;gap:1em;flex-wrap:wrap}
.midcta{border-left:3px solid var(--color-accent);background:var(--color-paper-2);padding:var(--space-5);border-radius:0 var(--radius) var(--radius) 0;margin:var(--space-6) 0}
.midcta p{font-size:var(--text-base);color:var(--color-text);margin-bottom:var(--space-4)}
.midcta .btn{padding:12px 20px;font-size:.95rem}
.keytake{background:var(--color-ink);color:var(--color-on-dark);border-radius:var(--radius);padding:var(--space-6);margin:var(--space-6) 0}
.keytake h4{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent);margin-bottom:var(--space-4)}
.keytake p{color:var(--color-on-dark);font-size:var(--text-lg);line-height:1.5;margin:0}
.related{border-top:1px solid var(--line);padding-top:var(--space-5);margin-top:var(--space-7)}
.related h4{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--color-muted);margin-bottom:var(--space-4)}
.related a{display:block;color:var(--color-accent-dim);font-family:var(--font-display);font-weight:500;margin-bottom:var(--space-3);text-decoration:none}
.related a:hover{color:var(--color-accent)}
.src{font-size:var(--text-sm);color:var(--color-muted)}
.src a{color:var(--color-accent-dim);text-decoration:underline;text-underline-offset:2px}

/* ============================ BREADCRUMBS ============================ */
.crumbs{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.04em;color:var(--color-on-dark-mut);margin-bottom:var(--space-4)}
.crumbs a{color:var(--color-on-dark-mut)}
.crumbs a:hover{color:var(--color-accent)}
.crumbs .sep{color:var(--line-dark);margin:0 .5em}
.crumbs .here{color:var(--color-accent)}

/* ============================ GUARANTEE / PROMISE ============================ */
.promise{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:var(--space-5)}
.promise .p{display:flex;gap:.7em;align-items:flex-start}
.promise .p svg{width:22px;height:22px;color:var(--color-verd-hi);flex:none;margin-top:2px}
.promise .p h3{font-size:var(--text-lg);color:var(--color-on-dark);margin-bottom:var(--space-2)}
.promise .p p{color:var(--color-on-dark-mut);font-size:var(--text-sm);margin:0}

/* ============================ LEAD-MAGNET POPUP ============================ */
.lm-pop{position:fixed;right:20px;bottom:20px;z-index:70;width:min(360px,calc(100vw - 40px));background:var(--color-ink-2);border:1px solid var(--line-dark);border-radius:var(--radius);box-shadow:0 18px 50px oklch(15% 0.008 255/.5);padding:var(--space-6);transform:translateY(20px);opacity:0;transition:transform var(--dur-2) var(--ease-out),opacity var(--dur-2) var(--ease-out);pointer-events:none}
.lm-pop.show{transform:translateY(0);opacity:1;pointer-events:auto}
.lm-pop .lm-eyebrow{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.1em;color:var(--color-accent);text-transform:uppercase;margin-bottom:var(--space-3)}
.lm-pop h3{font-family:var(--font-display);font-size:var(--text-lg);color:var(--color-on-dark);margin-bottom:var(--space-3);line-height:1.2}
.lm-pop p{color:var(--color-on-dark-mut);font-size:var(--text-sm);margin-bottom:var(--space-4)}
.lm-pop input{width:100%;padding:11px 13px;border:1px solid var(--line-dark);border-radius:var(--radius-sm);background:var(--color-ink);color:var(--color-on-dark);font:inherit;margin-bottom:var(--space-3)}
.lm-pop input:focus{outline:2px solid var(--color-focus);outline-offset:1px;border-color:var(--color-accent)}
.lm-pop .btn{width:100%;justify-content:center;font-size:.95rem;padding:12px 18px}
.lm-pop .lm-close{position:absolute;top:10px;right:12px;background:none;border:none;color:var(--color-on-dark-mut);font-size:1.3rem;line-height:1;cursor:pointer;padding:4px}
.lm-pop .lm-close:hover{color:var(--color-on-dark)}
.lm-pop .lm-fine{font-family:var(--font-mono);font-size:10px;color:var(--color-on-dark-mut);margin:var(--space-3) 0 0;letter-spacing:.02em}

/* ============================ ESTIMATOR ============================ */
.est{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-7);align-items:center}
.est .inputs label{display:block;font-family:var(--font-display);font-weight:600;font-size:var(--text-sm);color:var(--color-ink);margin-bottom:var(--space-5)}
.est .inputs .hint{display:block;font-family:var(--font-body);font-weight:400;font-size:var(--text-xs);color:var(--color-muted);margin-top:2px}
.est .inputs input[type=range]{width:100%;margin-top:var(--space-3);accent-color:var(--color-accent)}
.est .inputs .val{font-family:var(--font-mono);color:var(--color-accent-dim);font-weight:700}
.est .out{background:var(--color-ink);color:var(--color-on-dark);border-radius:var(--radius);padding:var(--space-7)}
.est .out .lbl{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--color-on-dark-mut)}
.est .out .big{font-family:var(--font-display);font-weight:700;font-size:clamp(2.4rem,5vw,3.4rem);color:var(--color-accent);line-height:1;margin:var(--space-3) 0 var(--space-2)}
.est .out .sub{color:var(--color-on-dark-mut);font-size:var(--text-sm);margin-bottom:var(--space-5)}
.est .out .btn{width:100%;justify-content:center}

/* ============================ MOBILE STICKY CTA ============================ */
/* HOME: integrations strip */
.strip{background:var(--color-paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.strip .wrap{padding-top:var(--space-6);padding-bottom:var(--space-6)}
.strip-eyebrow{font-family:var(--font-mono);font-size:var(--text-mono);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--color-accent-dim);margin-bottom:var(--space-3)}
.strip-lead{font-size:var(--text-lg);color:var(--color-text-soft);max-width:42em;margin-bottom:var(--space-5)}
.toolchips{list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-3)}
.toolchips li{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-text);background:var(--color-surface);border:1px solid var(--line-2);border-radius:100px;padding:8px 16px;white-space:nowrap}

/* HOME: case-study stat band (dark) */
.proofstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:var(--space-5);margin-top:var(--space-7)}
.proofstat{border-top:2px solid var(--color-accent);padding-top:var(--space-4)}
.proofstat .big{font-family:var(--font-display);font-weight:700;font-size:var(--text-xl);color:var(--color-on-dark);line-height:1.12;margin-bottom:var(--space-2)}
.proofstat .sub{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-on-dark-mut);letter-spacing:.03em;line-height:1.5}

/* mobile sticky CTA */
.mobilecta{display:none}

/* ============================ RESPONSIVE ============================ */
@media(max-width:920px){
  .navlinks{display:none}
  .navtoggle{display:block;margin-left:auto}
  nav.site.open .navlinks{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;background:var(--color-ink-2);border-bottom:1px solid var(--line-dark);padding:16px 24px;gap:var(--space-3)}
  nav.site.open .navcta{margin-top:var(--space-2)}
}
@media(max-width:860px){
  .hero .wrap{grid-template-columns:1fr;gap:var(--space-6);padding-top:var(--space-7);padding-bottom:var(--space-7)}
  .vane{grid-row:1;max-width:260px}
  .pays{grid-template-columns:1fr}
  .est{grid-template-columns:1fr;gap:var(--space-6)}
  .form-wrap{grid-template-columns:1fr;gap:var(--space-6)}
  .svc .item{grid-template-columns:1fr;gap:var(--space-4)}
  footer.site .frow{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .navlinks{display:none}
  .navtoggle{display:block;margin-left:auto}
  nav.site.open .navlinks{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;background:var(--color-ink-2);border-bottom:1px solid var(--line-dark);padding:16px 24px;gap:var(--space-3)}
  nav.site.open .navcta{margin-top:var(--space-2)}
  .band,.band-sm{padding:var(--space-8) 0}
  .steps .s{grid-template-columns:1fr;gap:var(--space-3)}
  footer.site .frow{grid-template-columns:1fr}
  .cta-band .wrap{flex-direction:column;align-items:flex-start}
  body{padding-bottom:60px}
  .mobilecta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;box-shadow:0 -4px 18px oklch(15% 0.008 255/.3)}
  .mobilecta a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:16px;font-family:var(--font-display);font-weight:600;background:var(--color-accent);color:var(--color-ink)}
  .mobilecta a.tel{flex:none;padding:16px 20px;background:var(--color-ink);color:var(--color-on-dark);border-right:1px solid var(--line-dark)}
}
@media(max-width:400px){
  .hero .lead{font-size:var(--text-lg)}
  .ledger .row{grid-template-columns:1fr;gap:var(--space-2)}
}

/* ============================ MOTION & POLISH =[REDACTED]
:root{ --ease-rv:cubic-bezier(.22,1,.36,1); }

/* Scroll reveal. The hidden start-state applies ONLY after site.js confirms motion
   is allowed and adds .cv-reveal to <html>. No-JS and reduced-motion visitors keep
   fully-visible content. Only opacity + transform animate, so there is no layout shift. */
.cv-reveal .cv-rv{opacity:0;transform:translateY(16px);transition:opacity var(--dur-3) var(--ease-rv),transform var(--dur-3) var(--ease-rv)}
.cv-reveal .cv-rv.in{opacity:1;transform:none}

/* Press feedback: every button acknowledges the click */
.btn:active{transform:scale(.98)}
.navcta:active{transform:scale(.97)}

/* Hover micro-interactions, pointer devices only (no false hover on touch taps) */
@media(hover:hover) and (pointer:fine){
  .tier{transition:border-color var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
  .tier:hover{transform:translateY(-4px);border-color:var(--color-accent)}
  .trust .t{transition:border-color var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
  .trust .t:hover{transform:translateY(-3px);border-color:var(--color-accent-dim)}
  .flow .step{transition:transform var(--dur-2) var(--ease-out)}
  .flow .step:hover{transform:translateY(-3px)}
  .flow .step:hover .idx{color:var(--color-accent)}
  .ledger .row{transition:background var(--dur-1) var(--ease-out)}
  .ledger .row:hover{background:color-mix(in oklch,var(--color-accent) 6%,transparent)}
  .ledger .row:hover .k{color:var(--color-accent)}
  .related a{transition:transform var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
  .related a:hover{transform:translateX(4px)}
  .book-aside li svg{transition:transform var(--dur-2) var(--ease-out)}
  .book-aside:hover li svg{transform:scale(1.08)}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto}
  .vane .rose{animation:none;transform:rotate(0deg)}
  .cv-rv{opacity:1!important;transform:none!important}
}