:root{
  --ink:#161513;
  --surface:#1F1C19;
  --surface-2:#2A251F;
  --paper:#F5F2EC;
  --accent:#E8641F;
  --accent-hover:#F1793A;
  --muted: rgba(245,242,236,0.62);
  --muted-2: rgba(245,242,236,0.42);
  --line: rgba(245,242,236,0.10);
  --line-strong: rgba(245,242,236,0.18);
  --radius:10px;
  --ease: cubic-bezier(.16,.8,.24,1);
  --max:1160px;
}

html[data-theme="light"]{
  --ink:#F5F2EC;
  --surface:#FFFFFF;
  --surface-2:#EFEBE3;
  --paper:#181512;
  --accent:#D4550F;
  --accent-hover:#B84A0D;
  --muted: rgba(24,21,18,0.62);
  --muted-2: rgba(24,21,18,0.44);
  --line: rgba(24,21,18,0.10);
  --line-strong: rgba(24,21,18,0.18);
}
html[data-theme="light"] body{ background:var(--ink); }
html{ transition:background-color .25s ease; }
body{ transition:background-color .25s ease, color .25s ease; }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

body{
  margin:0;
  font-family:'Space Grotesk', sans-serif;
  color:var(--paper);
  background:var(--ink);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{ margin:0; font-family:'Space Grotesk', sans-serif; font-weight:700; letter-spacing:-0.02em; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }

::selection{ background:var(--accent); color:var(--ink); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 32px; }
@media (max-width:640px){ .wrap{ padding:0 22px; } }

/* ---------- top progress ---------- */
.progress-bar{ position:fixed; top:0; left:0; height:2px; width:0%; background:var(--accent); z-index:200; transition:width .1s linear; }

/* ---------- eyebrow (small bordered label) ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12px; font-weight:600; letter-spacing:0.06em;
  color:var(--muted);
  padding:6px 14px; border:1px solid var(--line-strong); border-radius:6px;
  margin-bottom:22px;
}
.eyebrow::before{ content:""; width:6px; height:6px; border-radius:1.5px; background:var(--accent); flex-shrink:0; }

/* ---------- reveal ---------- */
.reveal-up{ opacity:0; transform:translateY(18px); transition:opacity .65s var(--ease), transform .65s var(--ease); transition-delay:var(--d,0s); }
.reveal-up.is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ .reveal-up{ opacity:1; transform:none; } }

.line-mask{ display:block; overflow:hidden; }
.line-inner{ display:block; transform:translateY(108%); animation:lineReveal .85s var(--ease) forwards; animation-delay:var(--d,0s); }
@keyframes lineReveal{ to{ transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){ .line-inner{ transform:none; animation:none; } }

/* ---------- nav ---------- */
header{ position:fixed; top:0; left:0; right:0; z-index:100; padding:22px 0; transition:background-color .3s ease, padding .3s ease, border-color .3s ease, backdrop-filter .3s ease; border-bottom:1px solid transparent; }
header.is-scrolled{ background:rgba(22,21,19,0.78); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-color:var(--line); padding:16px 0; }
html[data-theme="light"] header.is-scrolled{ background:rgba(245,242,236,0.82); }
header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.logo{ display:flex; align-items:center; gap:9px; font-weight:700; font-size:16px; letter-spacing:-0.01em; flex-shrink:0; }
.logo svg{ width:22px; height:22px; }
.logo .dot{ color:var(--accent); }
nav.links{ display:flex; align-items:center; gap:32px; }
nav.links a:not(.btn){ font-size:14px; font-weight:500; color:var(--muted); transition:color .2s ease; position:relative; }
nav.links a:not(.btn):hover{ color:var(--paper); }
nav.links a.is-active{ color:var(--paper); }

/* ---------- mobile nav toggle + drawer ---------- */
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  width:36px; height:36px; background:transparent; border:1px solid var(--line-strong); border-radius:8px;
  cursor:pointer; flex-shrink:0;
}
.nav-toggle span{ display:block; width:16px; height:2px; background:var(--paper); border-radius:1px; transition:transform .25s var(--ease), opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:760px){
  .nav-toggle{ display:flex; }
  nav.links{
    position:fixed; inset:0; z-index:99;
    flex-direction:column; align-items:stretch; justify-content:flex-start; gap:0;
    background:var(--ink); padding:104px 28px 40px; overflow-y:auto;
    transform:translateX(100%); transition:transform .3s var(--ease);
  }
  nav.links.is-open{ transform:translateX(0); }
  nav.links a:not(.btn){ display:block; font-size:19px; padding:16px 0; width:100%; border-top:1px solid var(--line); }
  nav.links a:not(.btn):first-child{ border-top:none; }
  nav.links .theme-toggle{ align-self:flex-start; margin-top:24px; }
  nav.links .btn{ margin-top:16px; width:100%; justify-content:center; }
}

/* ---------- buttons & links ---------- */
.btn{ display:inline-flex; align-items:center; gap:8px; padding:14px 26px; font-size:14px; font-weight:600; border-radius:8px; transition:background-color .2s ease, color .2s ease, transform .2s ease; }
.btn-solid, .btn-accent{ background:var(--accent); color:var(--ink); }
.btn-solid:hover, .btn-accent:hover{ background:var(--accent-hover); transform:translateY(-1px); }

.btn-link{ display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:var(--paper); padding-bottom:2px; border-bottom:1px solid var(--line-strong); transition:border-color .2s ease, color .2s ease; }
.btn-link:hover{ color:var(--accent); border-color:var(--accent); }
.btn-link--invert{ color:var(--paper); }

/* ---------- sections ---------- */
[id]{ scroll-margin-top: 100px; }
.section{ position:relative; padding:130px 0; background:var(--ink); color:var(--paper); }
@media (max-width:760px){ .section{ padding:88px 0; } }
.section--light, .section--paper{ background:var(--surface); }
.section--dark{ background:var(--ink); }

/* ---------- hero ---------- */
.hero{ padding-top:190px; padding-bottom:110px; }
@media (max-width:760px){ .hero{ padding-top:140px; padding-bottom:70px; } }
.hero h1{ font-size:clamp(2.6rem, 6.4vw, 5.4rem); line-height:1.02; letter-spacing:-0.03em; max-width:15ch; margin:0 0 26px; }
.hero h1 em{ font-style:normal; color:var(--accent); }
.hero .lede{ font-size:18px; line-height:1.55; max-width:40ch; color:var(--muted); margin-bottom:36px; }
.hero .actions{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; margin-bottom:28px; }
.hero .fineprint{ font-size:13px; color:var(--muted-2); }

/* ---------- foundation ---------- */
.foundation-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:64px; align-items:start; }
@media (max-width:860px){ .foundation-grid{ grid-template-columns:1fr; gap:36px; } }
.stage-title{ font-size:clamp(1.7rem, 3.2vw, 2.5rem); line-height:1.22; letter-spacing:-0.015em; max-width:20ch; }
.spec-list{ display:flex; flex-direction:column; }
.spec-list li{ display:flex; gap:14px; padding:20px 0; border-top:1px solid var(--line); font-size:15px; line-height:1.5; color:var(--muted); }
.spec-list li:last-child{ border-bottom:1px solid var(--line); }
.spec-list li::before{ content:"—"; color:var(--accent); flex-shrink:0; }

/* ---------- pricing ---------- */
.plans{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:48px; }
@media (max-width:760px){ .plans{ grid-template-columns:1fr; } }
.plans--tiers{ grid-template-columns:repeat(3,1fr); margin-top:28px; }
@media (max-width:960px){ .plans--tiers{ grid-template-columns:1fr; } }
.build-toggle{ margin-top:40px; }
.plans--tiers .plan.is-featured{ background:var(--surface-2); border-color:var(--line-strong); }
.plan{
  position:relative; background:var(--ink); border:1px solid var(--line); border-top:1px solid var(--line-strong);
  border-radius:var(--radius); padding:38px; display:flex; flex-direction:column;
  transition:border-color .2s ease;
}
.plan:hover{ border-color:var(--line-strong); }
@media (max-width:640px){ .plan{ padding:28px 24px; } }
.highlight-tag{ display:inline-block; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; }
.plan .plan-label{ font-size:13px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); margin-bottom:18px; }
.dim-price .num{ font-weight:700; font-size:clamp(1.6rem, 2.6vw, 2.1rem); letter-spacing:-0.01em; font-variant-numeric:tabular-nums; }
.dim-price{ display:flex; align-items:baseline; gap:6px; }
.price-prefix{ font-size:13px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.plan .monthly{ display:block; font-size:14px; color:var(--muted); margin-bottom:28px; }
.plan .monthly .num{ color:var(--paper); font-weight:600; font-size:14px; }
.plan-feats{ display:flex; flex-direction:column; gap:12px; margin-bottom:30px; flex:1; }
.plan-feats li{ display:flex; gap:10px; font-size:14px; line-height:1.4; color:var(--muted); }
.plan-feats li::before{ content:""; width:5px; height:5px; border-radius:1px; background:var(--accent); margin-top:7px; flex-shrink:0; }
.plan.is-store{ background:var(--surface-2); border-color:var(--line-strong); }

/* ---------- estimator ---------- */
.estimator{
  margin-top:32px; padding:30px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); display:flex; flex-direction:column; gap:18px; max-width:560px;
}
.estimator__label{ font-size:14px; font-weight:600; color:var(--paper); }
.estimator__toggle{ display:flex; gap:10px; flex-wrap:wrap; }
.estimator__opt{
  font-family:'Space Grotesk',sans-serif; font-size:13px; font-weight:600;
  padding:9px 16px; border:1px solid var(--line-strong); border-radius:8px; background:transparent; color:var(--paper);
  cursor:pointer; transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.estimator__opt.is-active{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.estimator__result{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.estimator__price{ font-weight:700; font-size:clamp(1.4rem, 2.2vw, 1.7rem); }
.estimator__monthly{ font-size:13px; color:var(--muted); }

/* ---------- scroll-scrubbed build sequence ---------- */
.scrollvid{ position:relative; height:460vh; background:var(--ink); color:var(--paper); }
.scrollvid__sticky{ position:sticky; top:0; height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px; }
.scrollvid__frame{ width:min(800px, 84vw); aspect-ratio:16/10; border-radius:12px; border:1px solid var(--line-strong); background:#EDEAE3; overflow:hidden; }
.scrollvid__frame canvas{ width:100%; height:100%; display:block; }
.scrollvid__caption{ font-size:12px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); min-width:120px; text-align:center; }

/* ---------- materials ---------- */
.materials-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:64px; align-items:center; }
@media (max-width:860px){ .materials-grid{ grid-template-columns:1fr; gap:40px; } }
.materials-grid h2{ font-size:clamp(2.6rem, 6vw, 4rem); }
.materials-grid h2 .dot{ color:var(--accent); }
.materials-grid .annotation{ font-size:13px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); margin:14px 0 22px; }
.materials-grid p:last-child{ font-size:16px; line-height:1.65; max-width:50ch; color:var(--muted); }
.mark-display{ display:flex; align-items:center; justify-content:center; aspect-ratio:1; }
.mark-display svg{ width:42%; height:42%; color:var(--accent); }
.mark-display svg rect{ transform-origin:center; opacity:0; transform:scale(.6); transition:opacity .45s var(--ease), transform .45s var(--ease); }
.mark-display.is-visible svg rect{ transform:scale(1); }
.mark-display.is-visible svg rect:nth-child(1){ transition-delay:.05s; opacity:1; }
.mark-display.is-visible svg rect:nth-child(2){ transition-delay:.16s; opacity:0.75; }
.mark-display.is-visible svg rect:nth-child(3){ transition-delay:.27s; opacity:0.5; }

/* ---------- faq ---------- */
.faq-list{ display:flex; flex-direction:column; margin-top:40px; max-width:720px; }
.faq-item{ border-top:1px solid var(--line); padding:22px 0; }
.faq-item:last-child{ border-bottom:1px solid var(--line); }
.faq-item summary{
  font-size:16px; font-weight:600; cursor:pointer; color:var(--paper);
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-size:20px; color:var(--accent); flex-shrink:0; transition:transform .2s ease; }
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item p{ font-size:15px; line-height:1.6; color:var(--muted); max-width:60ch; margin-top:14px; }

/* ---------- handover ---------- */
.handover h2{ font-size:clamp(2.6rem, 6vw, 4.4rem); margin-bottom:20px; }
.handover .lede{ font-size:17px; color:var(--muted); max-width:44ch; margin-bottom:38px; line-height:1.55; }
.handover .actions{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; margin-bottom:56px; }
.handover .contact-row{ display:flex; gap:44px; flex-wrap:wrap; padding-top:32px; border-top:1px solid var(--line); font-size:14px; }
.handover .contact-row .k{ color:var(--muted-2); display:block; margin-bottom:6px; letter-spacing:.05em; text-transform:uppercase; font-size:11px; }

footer{ padding:64px 0 28px; background:var(--ink); color:var(--muted-2); font-size:13px; border-top:1px solid var(--line); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:36px; margin-bottom:26px; border-bottom:1px solid var(--line); }
@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:32px 24px; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; gap:28px; } }
.footer-brand .logo{ margin-bottom:14px; color:var(--paper); }
.footer-brand p{ font-size:13px; line-height:1.6; color:var(--muted-2); max-width:34ch; margin:0 0 18px; }
.footer-social{ display:flex; gap:10px; }
.footer-social:empty{ display:none; }
.footer-social a{ width:32px; height:32px; border:1px solid var(--line-strong); border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--muted); transition:color .2s ease, border-color .2s ease; }
.footer-social a:hover{ color:var(--paper); border-color:var(--paper); }
.footer-social svg{ width:15px; height:15px; }
.footer-col h4{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); margin:0 0 16px; }
.footer-col{ display:flex; flex-direction:column; gap:11px; }
.footer-col a{ font-size:13px; color:var(--muted); transition:color .2s ease; }
.footer-col a:hover{ color:var(--paper); }
footer .wrap > .footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--muted-2); }
.footer-legal{ display:flex; gap:20px; }
.footer-legal a{ color:var(--muted-2); transition:color .2s ease; }
.footer-legal a:hover{ color:var(--paper); }
/* ---------- announcement banner ---------- */
.announce-bar{
  position:relative; z-index:150; background:var(--accent); color:var(--ink);
  font-size:13px; font-weight:600; text-align:center; padding:9px 44px;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.announce-bar[hidden]{ display:none; }
.announce-bar .announce-close{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--ink); font-size:16px; cursor:pointer; padding:4px 8px; opacity:.7;
}
.announce-bar .announce-close:hover{ opacity:1; }

/* ---------- theme toggle ---------- */
.theme-toggle{
  background:transparent; border:1px solid var(--line-strong); color:var(--paper); width:34px; height:34px;
  border-radius:8px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:14px;
  transition:border-color .2s ease, background-color .2s ease; flex-shrink:0;
}
.theme-toggle:hover{ border-color:var(--accent); background:var(--surface-2); }

/* ---------- magnetic buttons ---------- */
.btn-solid, .btn-accent{ will-change:transform; }

/* ---------- spotlight hover on plan cards ---------- */
.plan{ --mx:50%; --my:50%; overflow:hidden; }
.plan::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s ease;
  background:radial-gradient(320px circle at var(--mx) var(--my), rgba(232,100,31,0.14), transparent 70%);
}
.plan:hover::before{ opacity:1; }

/* ---------- live stats ---------- */
.stats-band{ padding:70px 0; }
.stats-band .stats-grid-public{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; text-align:center; }
@media (max-width:760px){ .stats-band .stats-grid-public{ grid-template-columns:1fr; gap:36px; } }
.stat-block .stat-num{ font-size:clamp(2.4rem, 5vw, 3.4rem); font-weight:700; letter-spacing:-0.02em; color:var(--accent); display:block; font-variant-numeric:tabular-nums; }
.stat-block .stat-label{ font-size:13px; color:var(--muted); margin-top:8px; letter-spacing:.03em; }
.stat-block--text .stat-num-text{ font-size:clamp(1.5rem, 3vw, 2rem); font-weight:700; letter-spacing:-0.01em; color:var(--accent); display:block; }
.stat-block--text .stat-label{ max-width:26ch; margin-left:auto; margin-right:auto; }

/* ---------- portfolio / recent work ---------- */
.portfolio-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; }
@media (max-width:860px){ .portfolio-grid{ grid-template-columns:1fr; } }
.portfolio-card{
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius); padding:28px;
  display:flex; flex-direction:column; gap:10px; transition:border-color .2s ease, transform .2s ease;
}
.portfolio-card:hover{ border-color:var(--line-strong); transform:translateY(-3px); }
.portfolio-card .pc-cat{ font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
.portfolio-card h3{ font-size:19px; font-weight:700; letter-spacing:-0.01em; }
.portfolio-card p{ font-size:14px; line-height:1.55; color:var(--muted); flex:1; }
.portfolio-card a{ font-size:13px; font-weight:600; color:var(--paper); border-bottom:1px solid var(--line-strong); align-self:flex-start; padding-bottom:1px; }
.portfolio-card a:hover{ color:var(--accent); border-color:var(--accent); }

/* ---------- testimonials ---------- */
.testimonial-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; }
@media (max-width:860px){ .testimonial-grid{ grid-template-columns:1fr; } }
.testimonial-card{ background:var(--ink); border:1px solid var(--line); border-top:1px solid var(--line-strong); border-radius:var(--radius); padding:28px; display:flex; flex-direction:column; gap:16px; }
.testimonial-card .stars{ color:var(--accent); font-size:14px; letter-spacing:2px; }
.testimonial-card .quote{ font-size:15px; line-height:1.6; color:var(--paper); flex:1; }
.testimonial-card .who{ font-size:13px; color:var(--muted); }
.testimonial-card .who b{ color:var(--paper); font-weight:600; }

/* ---------- add-ons ---------- */
.addon-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; }
@media (max-width:860px){ .addon-grid{ grid-template-columns:1fr; } }
.addon-card{
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius); padding:28px;
  display:flex; flex-direction:column; gap:8px; transition:border-color .2s ease, transform .2s ease;
}
.addon-card:hover{ border-color:var(--line-strong); transform:translateY(-3px); }
.addon-card .addon-price{ font-size:13px; font-weight:700; letter-spacing:.04em; color:var(--accent); font-variant-numeric:tabular-nums; }
.addon-card h3{ font-size:18px; font-weight:700; letter-spacing:-0.01em; }
.addon-card p{ font-size:14px; line-height:1.55; color:var(--muted); }
.addon-note{ font-size:13px; color:var(--muted-2); margin-top:28px; }

/* ---------- guarantees ---------- */
.guarantee-list{ max-width:640px; }

/* ---------- payoff calculator ---------- */
#payoff .lede{ font-size:16px; line-height:1.55; color:var(--muted); max-width:54ch; margin:16px 0 34px; }

/* ---------- blog / updates ---------- */
.updates-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; }
@media (max-width:860px){ .updates-grid{ grid-template-columns:1fr; } }
.update-card{ display:flex; flex-direction:column; gap:8px; padding-top:20px; border-top:1px solid var(--line); }
.update-card time{ font-size:12px; color:var(--muted-2); letter-spacing:.04em; text-transform:uppercase; }
.update-card h3{ font-size:17px; font-weight:700; letter-spacing:-0.01em; }
.update-card p{ font-size:14px; line-height:1.6; color:var(--muted); }

/* ---------- estimator sliders ---------- */
.estimator__sliders{ display:flex; flex-direction:column; gap:14px; }
.estimator__slider-row{ display:flex; flex-direction:column; gap:6px; }
.estimator__slider-row label{ font-size:12px; color:var(--muted); display:flex; justify-content:space-between; }
.estimator__slider-row label b{ color:var(--paper); font-weight:600; }
.estimator__slider-row input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:2px; background:var(--line-strong); outline:none;
}
.estimator__slider-row input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:var(--accent); cursor:pointer; border:2px solid var(--ink);
}
.estimator__slider-row input[type=range]::-moz-range-thumb{ width:16px; height:16px; border-radius:50%; background:var(--accent); cursor:pointer; border:2px solid var(--ink); }

/* ---------- booking widget ---------- */
.booking{ margin-top:32px; padding:30px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); max-width:720px; }
.booking__label{ font-size:14px; font-weight:600; margin-bottom:16px; }
.booking__days{ display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; margin-bottom:16px; }
.booking__day{
  flex-shrink:0; min-width:64px; padding:10px 8px; border:1px solid var(--line-strong); border-radius:8px; background:transparent;
  color:var(--paper); cursor:pointer; text-align:center; font-family:inherit; transition:background-color .15s ease, border-color .15s ease;
}
.booking__day .bd-dow{ display:block; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.booking__day .bd-date{ display:block; font-size:15px; font-weight:700; margin-top:3px; }
.booking__day.is-active{ background:var(--paper); border-color:var(--paper); }
.booking__day.is-active .bd-dow, .booking__day.is-active .bd-date{ color:var(--ink); }
.booking__slots{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.booking__slot{
  padding:9px 18px; border:1px solid var(--line-strong); border-radius:8px; background:transparent; color:var(--paper);
  cursor:pointer; font-family:inherit; font-size:13px; font-weight:600; transition:background-color .15s ease, border-color .15s ease;
}
.booking__slot.is-active{ background:var(--accent); border-color:var(--accent); color:var(--ink); }
.booking__form{ display:none; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.booking__form.is-visible{ display:flex; }
.booking__form .field{ flex:1; min-width:160px; }
.booking__confirm{ display:none; padding:16px; background:var(--surface-2); border-radius:8px; font-size:14px; color:var(--paper); }
.booking__confirm.is-visible{ display:block; }

/* ---------- contact form ---------- */
.contact-form{ max-width:520px; margin-top:8px; display:flex; flex-direction:column; gap:14px; }
.contact-form .field label{ display:block; font-size:12px; color:var(--muted-2); margin-bottom:6px; text-transform:uppercase; letter-spacing:.04em; }
.contact-form input, .contact-form textarea, .booking input{
  width:100%; padding:12px 14px; border-radius:8px; border:1px solid var(--line-strong); background:var(--surface);
  color:var(--paper); font-family:inherit; font-size:14px;
}
.contact-form input:focus-visible, .contact-form textarea:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.contact-form textarea{ resize:vertical; min-height:90px; }
.contact-form .cf-status{ font-size:13px; color:var(--muted); min-height:18px; }
.contact-form .cf-status.error{ color:#ff8a6a; }
.contact-success{ display:none; padding:24px; background:var(--surface-2); border-radius:var(--radius); border:1px solid var(--line-strong); }
.contact-success.is-visible{ display:block; }
.contact-success h3{ font-size:18px; margin-bottom:8px; }
.contact-success p{ color:var(--muted); font-size:14px; line-height:1.6; }
.handover-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; margin-top:8px; }
@media (max-width:860px){ .handover-grid{ grid-template-columns:1fr; gap:36px; } }

/* ---------- sticky mobile CTA ---------- */
.mobile-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:180; display:none;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:rgba(22,21,19,0.92);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-top:1px solid var(--line);
  transform:translateY(100%); transition:transform .3s var(--ease);
}
.mobile-cta.is-visible{ transform:translateY(0); }
.mobile-cta a{
  display:flex; align-items:center; justify-content:center; gap:8px; background:var(--accent); color:var(--ink);
  font-weight:700; font-size:14px; padding:13px; border-radius:8px;
}
@media (max-width:760px){
  .mobile-cta{ display:block; }
  body{ padding-bottom:0; }
}

/* ---------- FAQ empty / dynamic ---------- */
.section-empty-note{ font-size:13px; color:var(--muted-2); font-style:italic; margin-top:20px; }

/* ==========================================================================
   ACCESSIBILITY — skip link
   ========================================================================== */
.skip-link{
  position:absolute; left:12px; top:-60px; z-index:300;
  background:var(--paper); color:var(--ink); padding:12px 18px; border-radius:8px;
  font-size:13px; font-weight:700; transition:top .2s ease;
}
.skip-link:focus{ top:12px; }

/* ==========================================================================
   CLIENT LOGO STRIP
   ========================================================================== */
.logo-strip-section{ padding:56px 0; }
.logo-strip-label{
  display:block; text-align:center; font-size:12px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); margin-bottom:30px;
}
.logo-strip{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:40px 48px; }
.logo-strip-item{ display:flex; align-items:center; }
.logo-strip img{
  height:26px; width:auto; max-width:140px; object-fit:contain;
  opacity:.55; filter:grayscale(1); transition:opacity .2s ease, filter .2s ease;
}
.logo-strip img:hover{ opacity:1; filter:grayscale(0); }
.logo-strip .logo-strip-name{
  font-size:15px; font-weight:700; letter-spacing:-0.01em; color:var(--muted);
  opacity:.75; transition:opacity .2s ease, color .2s ease;
}
.logo-strip .logo-strip-name:hover{ opacity:1; color:var(--paper); }
@media (max-width:640px){ .logo-strip{ gap:26px 34px; } }

/* ==========================================================================
   BEFORE / AFTER SLIDER
   ========================================================================== */
.before-after-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px; margin-top:44px; }
@media (max-width:860px){ .before-after-grid{ grid-template-columns:1fr; } }
.ba-card{ display:flex; flex-direction:column; gap:14px; }
.ba-slider{
  position:relative; aspect-ratio:16/10; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line-strong); background:var(--surface-2); --ba:50%;
}
.ba-layer{ position:absolute; inset:0; background-size:cover; background-position:center; }
.ba-before{ clip-path:inset(0 calc(100% - var(--ba)) 0 0); }
.ba-divider{
  position:absolute; top:0; bottom:0; left:var(--ba); width:2px; background:var(--paper);
  transform:translateX(-1px); pointer-events:none; box-shadow:0 0 0 1px rgba(0,0,0,.15);
}
.ba-divider::after{
  content:"↔"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:34px; height:26px; border-radius:6px; background:var(--paper); color:var(--ink);
  font-size:13px; display:flex; align-items:center; justify-content:center;
}
.ba-range{
  position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize;
  appearance:none; -webkit-appearance:none;
}
.ba-tag{
  position:absolute; top:12px; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:5px 10px; border-radius:6px; background:rgba(22,21,19,.7); color:#fff; pointer-events:none;
}
.ba-tag-before{ left:12px; }
.ba-tag-after{ right:12px; }
.ba-caption{ font-size:14px; line-height:1.5; color:var(--muted); }
.ba-caption b{ color:var(--paper); }

/* ==========================================================================
   CARE PLANS (maintenance retainer)
   ========================================================================== */
.care-plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px; }
@media (max-width:960px){ .care-plans{ grid-template-columns:1fr; } }
.care-plans .plan.is-featured{ background:var(--surface-2); border-color:var(--line-strong); }

/* ==========================================================================
   REFERRAL
   ========================================================================== */
.referral-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center; }
@media (max-width:860px){ .referral-grid{ grid-template-columns:1fr; gap:32px; } }
.referral-grid p{ font-size:15px; line-height:1.6; color:var(--muted); max-width:44ch; margin-top:16px; }
.referral-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:34px; display:flex; flex-direction:column; gap:14px;
}
.referral-reward{ font-size:21px; font-weight:700; letter-spacing:-0.01em; line-height:1.3; }
.referral-reward b{ color:var(--accent); }
.referral-card p{ font-size:14px; line-height:1.6; color:var(--muted); max-width:none; margin:0; }

/* ==========================================================================
   AVAILABILITY BADGE (plain bordered tag — no dot, no glow, no motion)
   ========================================================================== */
.availability-badge{
  display:inline-flex; align-items:center; padding:9px 18px; margin-bottom:24px;
  border:1px solid var(--line-strong); border-radius:8px; font-size:13px; font-weight:600; color:var(--paper);
}
.availability-badge b{ color:var(--accent); }

/* ==========================================================================
   PERFORMANCE NOTE (under stats band)
   ========================================================================== */
.performance-note{ text-align:center; font-size:13px; color:var(--muted-2); margin-top:34px; max-width:56ch; margin-left:auto; margin-right:auto; }
.performance-score{ display:block; font-size:clamp(2.4rem, 5vw, 3.4rem); font-weight:700; color:var(--accent); margin-bottom:6px; }

/* ==========================================================================
   NICHE CROSS-LINKS (SEO landing pages)
   ========================================================================== */
.niche-links{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.niche-links a{
  font-size:13px; font-weight:600; padding:9px 16px; border:1px solid var(--line-strong); border-radius:8px;
  color:var(--muted); transition:color .2s ease, border-color .2s ease;
}
.niche-links a:hover{ color:var(--paper); border-color:var(--paper); }

/* ==========================================================================
   MARK ASSEMBLY (materials section) — enhanced settle-in motion
   ========================================================================== */
.mark-display svg rect{
  transform-origin:center; opacity:0; transform:translateY(14px) scale(.7);
  transition:opacity .5s cubic-bezier(.34,1.56,.64,1), transform .5s cubic-bezier(.34,1.56,.64,1);
}
.mark-display.is-visible svg rect{ transform:translateY(0) scale(1); }
.mark-display.is-visible svg rect:nth-child(1){ transition-delay:.05s; opacity:1; }
.mark-display.is-visible svg rect:nth-child(2){ transition-delay:.2s; opacity:0.75; }
.mark-display.is-visible svg rect:nth-child(3){ transition-delay:.35s; opacity:0.5; }

/* ==========================================================================
   SUB-PAGES (case study, status, checklist, SEO landing) — shared shell
   ========================================================================== */
.subpage-hero{ padding-top:170px; padding-bottom:60px; }
@media (max-width:760px){ .subpage-hero{ padding-top:130px; } }
.subpage-back{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--muted); margin-bottom:24px; }
.subpage-back:hover{ color:var(--accent); }
.case-meta{ display:flex; gap:22px; flex-wrap:wrap; margin:18px 0 8px; font-size:12px; color:var(--muted-2); text-transform:uppercase; letter-spacing:.05em; }
.case-body{ max-width:700px; font-size:16px; line-height:1.75; color:var(--muted); display:flex; flex-direction:column; gap:20px; margin-top:36px; }
.case-body p{ margin:0; }
.case-cta{ margin-top:44px; padding-top:36px; border-top:1px solid var(--line); }

/* ---------- what-to-send checklist ---------- */
.send-checklist{ margin-top:40px; max-width:720px; }
.send-item{ display:flex; gap:18px; padding:22px 0; border-top:1px solid var(--line); }
.send-item:last-child{ border-bottom:1px solid var(--line); }
.send-item-num{ font-size:14px; font-weight:700; color:var(--accent); flex-shrink:0; width:26px; padding-top:2px; }
.send-item h3{ font-size:15px; font-weight:700; margin-bottom:6px; }
.send-item p{ font-size:14px; line-height:1.55; color:var(--muted); }

/* ---------- legal pages (privacy / terms) ---------- */
.legal-content{ max-width:760px; margin-top:8px; }
.legal-updated{ font-size:13px; color:var(--muted-2); margin-bottom:28px; }
.legal-notice{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; font-size:13.5px; line-height:1.65; color:var(--muted); margin:0 0 36px; }
.legal-notice strong{ color:var(--paper); }
.legal-content h2{ font-size:20px; font-weight:700; margin:40px 0 12px; }
.legal-content h2:first-of-type{ margin-top:0; }
.legal-content h3{ font-size:15px; font-weight:700; margin:20px 0 8px; }
.legal-content p{ font-size:15px; line-height:1.7; color:var(--muted); margin-bottom:14px; }
.legal-content ul, .legal-content ol{ margin:0 0 14px 0; font-size:15px; line-height:1.7; color:var(--muted); }
.legal-content ul li{ display:flex; gap:10px; margin-bottom:8px; }
.legal-content ul li::before{ content:""; width:5px; height:5px; border-radius:1px; background:var(--accent); margin-top:9px; flex-shrink:0; }
.legal-content ol{ counter-reset:legal-ol; margin-left:0; }
.legal-content ol li{ display:flex; gap:10px; margin-bottom:8px; counter-increment:legal-ol; }
.legal-content ol li::before{ content:counter(legal-ol) "."; color:var(--accent); font-weight:700; flex-shrink:0; }
.legal-content strong{ color:var(--paper); }
.legal-content a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }

/* ---------- client status page ---------- */
.status-card{ max-width:640px; margin-top:20px; padding:34px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }
.status-stage-track{ display:flex; gap:6px; margin:28px 0 10px; }
.status-stage-track .seg{ flex:1; height:6px; border-radius:3px; background:var(--line-strong); }
.status-stage-track .seg.is-done{ background:var(--accent); }
.status-stage-track .seg.is-current{ background:var(--accent); opacity:.5; }
.status-stage-labels{ display:flex; justify-content:space-between; font-size:11px; color:var(--muted-2); text-transform:uppercase; letter-spacing:.04em; margin-bottom:30px; }
.status-checklist{ display:flex; flex-direction:column; }
.status-checklist li{ display:flex; gap:12px; align-items:center; padding:12px 0; border-top:1px solid var(--line); font-size:14px; color:var(--muted); }
.status-checklist li:last-child{ border-bottom:1px solid var(--line); }
.status-checklist li.is-done{ color:var(--paper); }
.status-check-icon{
  width:18px; height:18px; border-radius:4px; border:1.5px solid var(--line-strong); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:11px; color:transparent;
}
.status-checklist li.is-done .status-check-icon{ background:var(--accent); border-color:var(--accent); color:var(--ink); }
.status-due{ margin-top:22px; font-size:13px; color:var(--muted-2); }
.status-empty{ padding:40px; text-align:center; color:var(--muted); }
/* =====================================================================
   HERO — rebuilt front
   ---------------------------------------------------------------------
   Replaces the flat single-column hero. Three things are going on here:
   1. .hero-bg — a stack of decorative layers (grid paper, two warm light
      washes, an oversized Bou mark, film grain). Pure CSS/SVG, no image
      files, so it costs nothing to load and recolours with the theme.
   2. .hero-grid — copy on the left, a self-assembling site mockup on the
      right, collapsing to one column under 960px.
   3. .hero-ticker — a slow marquee of the trades we build for.
   Everything decorative sits behind aria-hidden and stops moving under
   prefers-reduced-motion.
   ===================================================================== */

.hero{
  padding-top:180px;
  padding-bottom:0;
  overflow:hidden;
  isolation:isolate;
}
@media (max-width:960px){ .hero{ padding-top:132px; } }

/* ---- background layers ---- */
.hero-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }

/* faint engineering-paper grid, faded out towards the edges */
.hero-bg__grid{
  position:absolute; inset:-10% -5%;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size:74px 74px;
  opacity:.7;
  -webkit-mask-image: radial-gradient(120% 90% at 68% 18%, #000 0%, rgba(0,0,0,.55) 45%, transparent 78%);
          mask-image: radial-gradient(120% 90% at 68% 18%, #000 0%, rgba(0,0,0,.55) 45%, transparent 78%);
}

/* warm light spilling in from the top right, plus a cooler counter-wash */
.hero-bg__glow{
  position:absolute; top:-32%; right:-14%;
  width:min(920px, 78vw); aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%, rgba(232,100,31,.30), rgba(232,100,31,.08) 42%, transparent 68%);
  filter:blur(12px);
  animation:heroDrift 22s ease-in-out infinite alternate;
}
.hero-bg__glow--two{
  top:auto; bottom:-38%; right:auto; left:-18%;
  width:min(760px, 72vw);
  background:radial-gradient(circle at 50% 50%, rgba(245,242,236,.10), transparent 66%);
  animation-duration:28s; animation-direction:alternate-reverse;
}
html[data-theme="light"] .hero-bg__glow{
  background:radial-gradient(circle at 50% 50%, rgba(212,85,15,.20), rgba(212,85,15,.05) 42%, transparent 68%);
}
html[data-theme="light"] .hero-bg__glow--two{
  background:radial-gradient(circle at 50% 50%, rgba(24,21,18,.07), transparent 66%);
}
@keyframes heroDrift{
  from{ transform:translate3d(0,0,0) scale(1); }
  to{ transform:translate3d(-4%,3%,0) scale(1.09); }
}

/* the Bou mark, blown up and buried in the background */
.hero-bg__mark{
  position:absolute; right:-6%; bottom:-24%;
  width:min(620px, 58vw); height:auto;
  color:var(--paper); opacity:.035;
}

/* film grain — the single biggest thing separating "designed" from "flat" */
.hero-bg__grain{
  position:absolute; inset:0; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

/* ---- layout ---- */
.hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:64px; align-items:center;
  padding-bottom:96px;
}
@media (max-width:960px){
  .hero-grid{ grid-template-columns:1fr; gap:52px; padding-bottom:64px; }
}
.hero-copy{ min-width:0; }
.hero h1{ max-width:14ch; }
.hero .lede{ max-width:38ch; }
.hero .fineprint{ margin-bottom:0; }

/* ---- the build panel ---- */
.hero-visual{ position:relative; min-width:0; }

/* a thin scaffold rule behind the panel, offset like a drop shadow drawn by hand */
.hero-scaffold{
  position:absolute; inset:26px -22px -26px 26px; z-index:0;
  border:1px solid var(--line-strong); border-radius:14px;
  pointer-events:none;
}
@media (max-width:960px){ .hero-scaffold{ inset:20px -12px -20px 20px; } }

.build-panel{
  position:relative; z-index:1;
  background:var(--surface-2);
  border:1px solid var(--line-strong);
  border-radius:14px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.65), 0 2px 0 rgba(245,242,236,.04) inset;
  overflow:hidden;
}
html[data-theme="light"] .build-panel{ box-shadow:0 30px 70px -34px rgba(24,21,18,.35); }

.build-panel__chrome{
  display:flex; align-items:center; gap:7px;
  padding:12px 14px; border-bottom:1px solid var(--line);
  background:linear-gradient(to bottom, rgba(245,242,236,.05), transparent);
}
html[data-theme="light"] .build-panel__chrome{ background:linear-gradient(to bottom, rgba(24,21,18,.04), transparent); }
.build-panel__dot{ width:9px; height:9px; border-radius:2px; background:var(--line-strong); }
.build-panel__dot:first-child{ background:var(--accent); opacity:.8; }
.build-panel__url{
  margin-left:10px; flex:1;
  font-size:11px; letter-spacing:.02em; color:var(--muted-2);
  background:var(--ink); border:1px solid var(--line);
  border-radius:5px; padding:5px 10px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.build-panel__screen{
  padding:16px; display:flex; flex-direction:column; gap:12px;
  background:var(--ink);
  min-height:290px;
}
@media (max-width:520px){ .build-panel__screen{ min-height:236px; padding:13px; gap:10px; } }

/* every block fades up in sequence, then the whole run repeats */
.bp-block{
  opacity:0; transform:translateY(14px);
  animation:bpIn .55s var(--ease) forwards, bpLoop 9s linear infinite;
  animation-delay:calc(.45s + var(--i) * .28s), calc(.45s + var(--i) * .28s);
}
@keyframes bpIn{ to{ opacity:1; transform:none; } }
@keyframes bpLoop{
  0%,88%{ opacity:1; transform:none; }
  94%{ opacity:0; transform:translateY(14px); }
  100%{ opacity:1; transform:none; }
}

.bp-nav{ display:flex; align-items:center; gap:9px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.bp-logo{ width:20px; height:12px; border-radius:2px; background:var(--accent); }
.bp-navline{ width:34px; height:6px; border-radius:2px; background:var(--line-strong); }
.bp-navline.short{ width:22px; }

.bp-hero{ display:flex; flex-direction:column; gap:9px; padding:6px 0 4px; }
.bp-h1{ width:82%; height:15px; border-radius:3px; background:var(--paper); opacity:.85; }
.bp-h1--short{ width:54%; opacity:.5; }
.bp-cta{ margin-top:6px; width:96px; height:26px; border-radius:5px; background:var(--accent); }

.bp-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.bp-card{
  display:flex; flex-direction:column; gap:7px;
  padding:11px; border:1px solid var(--line); border-radius:8px; background:var(--surface);
}
.bp-thumb{
  height:46px; border-radius:5px;
  background:linear-gradient(135deg, rgba(232,100,31,.30), rgba(245,242,236,.07));
}
.bp-line{ height:6px; border-radius:2px; background:var(--line-strong); }
.bp-line.short{ width:58%; }
.bp-foot{ height:26px; border-radius:6px; background:var(--surface); border:1px solid var(--line); }

/* the "Live" stamp lands last and stays put */
.build-stamp{
  position:absolute; right:-12px; bottom:22px;
  display:inline-flex; align-items:center; gap:7px;
  background:var(--accent); color:var(--ink);
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:8px 14px; border-radius:6px;
  box-shadow:0 12px 26px -12px rgba(0,0,0,.75);
  opacity:0; transform:translateY(10px) rotate(-3deg);
  animation:bpStamp .5s var(--ease) 2.3s forwards;
}
.build-stamp::before{ content:""; width:6px; height:6px; border-radius:1px; background:var(--ink); }
@keyframes bpStamp{ to{ opacity:1; transform:translateY(0) rotate(-3deg); } }

/* ---- trades ticker ---- */
.hero-ticker{
  position:relative; z-index:1;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:rgba(0,0,0,.12);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
html[data-theme="light"] .hero-ticker{ background:rgba(24,21,18,.03); }
.hero-ticker__track{
  display:flex; align-items:center; gap:22px; width:max-content;
  padding:15px 0;
  animation:tickerRun 46s linear infinite;
}
.hero-ticker__track span{
  font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted-2); white-space:nowrap;
}
.hero-ticker__track i{ width:5px; height:5px; border-radius:1px; background:var(--accent); opacity:.55; flex-shrink:0; }
@keyframes tickerRun{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.hero-ticker:hover .hero-ticker__track{ animation-play-state:paused; }

/* ---- respect reduced motion: keep the composition, drop the movement ---- */
@media (prefers-reduced-motion: reduce){
  .hero-bg__glow{ animation:none; }
  .hero-ticker__track{ animation:none; }
  .bp-block{ opacity:1; transform:none; animation:none; }
  .build-stamp{ opacity:1; transform:rotate(-3deg); animation:none; }
}

/* Hero type is sized down inside the two-column layout so the headline,
   buttons and ticker all still land above the fold on a laptop. */
.hero-grid .hero-copy h1{
  font-size:clamp(2.3rem, 4.2vw, 3.7rem);
  line-height:1.06;
  max-width:16ch;
  margin-bottom:22px;
}
.hero-grid .hero-copy .lede{ font-size:17px; margin-bottom:30px; }
.hero-grid .hero-copy .actions{ margin-bottom:22px; }
@media (max-width:960px){
  .hero-grid .hero-copy h1{ font-size:clamp(2.4rem, 8vw, 3.4rem); max-width:14ch; }
  .hero-visual{ max-width:520px; }
}
.hero-bg__grain{ opacity:.34; }

/* The stamp is a sibling of the panel, not a child — .build-panel clips its
   own overflow, so a corner-hanging badge has to live one level up. */
.build-stamp{ right:-14px; bottom:-14px; }
@media (max-width:520px){ .build-stamp{ right:-6px; bottom:-10px; } }

/* Watermark: show the whole stacked mark rather than a cropped bar. */
.hero-bg__mark{ right:-3%; bottom:-8%; opacity:.04; }
@media (max-width:960px){ .hero-bg__mark{ display:none; } }

/* Enquiry card floating off the panel's bottom-left corner. Gives the
   composition a second plane and says what the site is actually for. */
.hero-ping{
  position:absolute; left:-26px; bottom:34px; z-index:2;
  display:flex; align-items:center; gap:11px;
  padding:11px 15px 11px 12px;
  background:var(--surface-2);
  border:1px solid var(--line-strong);
  border-radius:10px;
  box-shadow:0 20px 40px -20px rgba(0,0,0,.8);
  opacity:0; transform:translateY(12px);
  animation:bpStamp .55s var(--ease) 2.9s forwards, heroBob 6s ease-in-out 3.6s infinite;
}
html[data-theme="light"] .hero-ping{ box-shadow:0 20px 40px -22px rgba(24,21,18,.32); }
.hero-ping__icon{
  display:grid; place-items:center; width:30px; height:30px; flex-shrink:0;
  border-radius:7px; background:var(--accent); color:var(--ink);
}
.hero-ping__icon svg{ width:16px; height:16px; }
.hero-ping__text{ display:flex; flex-direction:column; line-height:1.25; }
.hero-ping__text strong{ font-size:13px; font-weight:600; color:var(--paper); }
.hero-ping__text small{ font-size:11px; color:var(--muted-2); }
@keyframes heroBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
@media (max-width:960px){ .hero-ping{ left:-14px; bottom:24px; } }
@media (max-width:420px){ .hero-ping{ left:-8px; bottom:16px; padding:9px 12px 9px 10px; } }
@media (prefers-reduced-motion: reduce){ .hero-ping{ opacity:1; transform:none; animation:none; } }

.hero-grid{ padding-bottom:74px; }
@media (max-width:960px){ .hero-grid{ padding-bottom:56px; } }

/* Final placement: the Live stamp pins to the panel's top-right corner
   (next to the address bar, where a browser status would sit), the enquiry
   card hangs off the bottom-left so neither one covers the mock layout. */
.build-stamp{ z-index:3; top:-14px; bottom:auto; right:-14px; }
.hero-ping{ left:-56px; bottom:-16px; }
@media (max-width:960px){
  .build-stamp{ top:-12px; right:-8px; }
  .hero-ping{ left:-10px; bottom:-14px; }
}
@media (max-width:420px){
  .hero-ping{ left:0; bottom:-18px; }
  .hero-ping__text small{ display:none; }
}


/* =====================================================================
   ██  MOTION SYSTEM
   ---------------------------------------------------------------------
   Everything below is driven by data-attributes read by motion.js. The
   HTML says WHAT should move; this file says HOW. Adding motion to a new
   element is a matter of putting data-reveal / data-parallax / data-tilt
   on it — no new JavaScript.

   Sections in this block:
     A. reveal variants            F. section atmosphere + seams
     B. split-word headings        G. cards, spotlight and tilt
     C. marquee bands              H. buttons and links
     D. list and price motion      I. FAQ, footer, nav
     E. page grain                 J. reduced-motion overrides
   ===================================================================== */

/* ---------------------------------------------------------------------
   A. REVEAL VARIANTS
   One transition, six starting positions. --d is the per-element delay,
   which motion.js fills in automatically for anything inside a
   [data-stagger] container.
   --------------------------------------------------------------------- */
[data-reveal]{
  opacity:0;
  transition:opacity .72s var(--ease), transform .72s var(--ease), filter .72s var(--ease), clip-path .9s var(--ease);
  transition-delay:var(--d, 0s);
  will-change:opacity, transform;
}
[data-reveal="up"]     { transform:translateY(26px); }
[data-reveal="down"]   { transform:translateY(-22px); }
[data-reveal="left"]   { transform:translateX(-34px); }
[data-reveal="right"]  { transform:translateX(34px); }
[data-reveal="scale"]  { transform:scale(.94); }
[data-reveal="rise"]   { transform:translateY(40px) scale(.985); }
[data-reveal="blur"]   { transform:translateY(14px); filter:blur(9px); }
[data-reveal="clip"]   { transform:none; clip-path:inset(0 0 100% 0); opacity:1; }

[data-reveal].is-visible{
  opacity:1;
  transform:none;
  filter:none;
  clip-path:inset(0 0 0 0);
}
[data-reveal].is-visible{ will-change:auto; }

/* ---------------------------------------------------------------------
   B. SPLIT-WORD HEADINGS
   motion.js wraps each word of a [data-split="words"] heading in a
   .split-word. Each word sits in its own overflow-hidden line box and
   swings up in sequence, so a headline arrives like it's being set
   rather than fading in as one lump.
   --------------------------------------------------------------------- */
[data-split="words"]{ opacity:1 !important; }
.split-word{
  display:inline-block;
  transform:translateY(0.9em) rotate(2deg);
  opacity:0;
  transition:transform .78s var(--ease), opacity .55s ease;
  transition-delay:calc(var(--d, 0s) + var(--w, 0) * 0.045s);
}
[data-split="words"].is-visible .split-word{ transform:none; opacity:1; }
/* the clip has to live on a wrapper, otherwise descenders get cut */
[data-split="words"]{ overflow:hidden; padding-bottom:.08em; }

/* ---------------------------------------------------------------------
   C. MARQUEE BANDS
   Full-bleed strips of moving text that sit between sections. motion.js
   duplicates the track and drives it in the scroll loop, speeding it up
   and reversing it with the page — so it reads as part of the scroll
   rather than a decoration running on its own clock.
   --------------------------------------------------------------------- */
.marquee{
  position:relative;
  overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--ink);
  -webkit-mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.marquee--paper{ background:var(--surface); }
.marquee__track{
  display:flex; align-items:center; gap:26px;
  width:max-content;
  padding:18px 0;
  will-change:transform;
}
.marquee__track > span{
  display:inline-flex; align-items:center; gap:26px;
  font-size:13px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted-2); white-space:nowrap;
}
.marquee__track > span::after{
  content:""; width:5px; height:5px; border-radius:1px;
  background:var(--accent); opacity:.6; flex-shrink:0;
}
/* the loud variant, used once before the contact section */
.marquee--accent{ background:var(--accent); border-color:transparent; }
.marquee--accent .marquee__track > span{ color:var(--ink); opacity:.92; }
.marquee--accent .marquee__track > span::after{ background:var(--ink); opacity:.45; }
.marquee--big .marquee__track{ padding:26px 0; }
.marquee--big .marquee__track > span{
  font-size:clamp(1.3rem, 3.4vw, 2.2rem); letter-spacing:-0.01em; text-transform:none; font-weight:700;
  color:var(--paper);
}
.marquee--big .marquee__track > span::after{ width:9px; height:9px; }

/* ---------------------------------------------------------------------
   D. LISTS AND PRICES
   Spec lists draw their rule in from the left as each row arrives, and
   prices settle up into place. Small, but it's the difference between a
   page that appears and a page that assembles.
   --------------------------------------------------------------------- */
.spec-list li{
  position:relative;
  opacity:0; transform:translateX(-14px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay:calc(var(--i, 0) * .08s);
  border-top-color:transparent !important;
}
.spec-list li::after{
  content:""; position:absolute; top:-1px; left:0; right:0; height:1px;
  background:var(--line); transform:scaleX(0); transform-origin:left;
  transition:transform .7s var(--ease); transition-delay:calc(var(--i, 0) * .08s);
}
.spec-list.is-visible li,
.is-visible .spec-list li,
.spec-list li.is-visible{ opacity:1; transform:none; }
.spec-list.is-visible li::after,
.is-visible .spec-list li::after,
.spec-list li.is-visible::after{ transform:scaleX(1); }

.dim-price .num{ display:inline-block; }
[data-reveal].is-visible .dim-price .num{ animation:priceSettle .7s var(--ease) .12s both; }
@keyframes priceSettle{
  0%{ transform:translateY(14px); opacity:0; letter-spacing:.04em; }
  100%{ transform:none; opacity:1; letter-spacing:inherit; }
}

/* ---------------------------------------------------------------------
   E. PAGE GRAIN
   One fixed noise layer over the whole document. It is what stops large
   flat colour fields from reading as a template — the same trick the
   hero uses, applied site-wide. Never intercepts clicks.
   --------------------------------------------------------------------- */
body::after{
  content:"";
  position:fixed; inset:0; z-index:400;
  pointer-events:none;
  opacity:.28; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}
html[data-theme="light"] body::after{ opacity:.2; mix-blend-mode:multiply; }
/* the hero paints its own grain, so it doesn't need the global one on top */
.hero-bg__grain{ opacity:.2; }

/* ---------------------------------------------------------------------
   F. SECTION ATMOSPHERE AND SEAMS
   ::before is the texture — a faint drafting grid, masked so it fades
   out before it reaches the text. ::after is a hairline seam across the
   top edge that draws outwards when the section arrives, so scrolling
   feels like moving through a structure rather than past a list.
   --------------------------------------------------------------------- */
.section{ overflow:hidden; }
.section:not(.hero)::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size:88px 88px;
  opacity:.55;
  -webkit-mask-image:radial-gradient(110% 80% at 50% 0%, #000, rgba(0,0,0,.35) 55%, transparent 85%);
          mask-image:radial-gradient(110% 80% at 50% 0%, #000, rgba(0,0,0,.35) 55%, transparent 85%);
}
.section:not(.hero)::after{
  content:""; position:absolute; top:0; left:0; right:0; height:1px; z-index:1;
  background:linear-gradient(to right, transparent, var(--line-strong) 18%, var(--accent) 50%, var(--line-strong) 82%, transparent);
  transform:scaleX(0); transform-origin:center;
  transition:transform 1.1s var(--ease);
  opacity:.75;
}
.section.is-in::after{ transform:scaleX(1); }
.section > .wrap{ position:relative; z-index:2; }

/* a soft light source in the dark sections, drifting with the scroll */
.section-glow{
  position:absolute; z-index:0; pointer-events:none;
  width:min(760px, 70vw); aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%, rgba(232,100,31,.16), transparent 66%);
  transform:translate3d(0, var(--py, 0px), 0);
  will-change:transform;
}
.section-glow--tl{ top:-22%; left:-14%; }
.section-glow--tr{ top:-26%; right:-16%; }
.section-glow--br{ bottom:-30%; right:-12%; }
.section-glow--bl{ bottom:-28%; left:-14%; }
.section-glow--cool{ background:radial-gradient(circle at 50% 50%, rgba(245,242,236,.075), transparent 66%); }
html[data-theme="light"] .section-glow{ background:radial-gradient(circle at 50% 50%, rgba(212,85,15,.12), transparent 66%); }
html[data-theme="light"] .section-glow--cool{ background:radial-gradient(circle at 50% 50%, rgba(24,21,18,.05), transparent 66%); }

/* ---------------------------------------------------------------------
   G. CARDS — spotlight, lift and tilt
   Every card on the site now lights up under the cursor using the same
   --mx/--my pair motion.js writes, and lifts a little on hover.
   --------------------------------------------------------------------- */
.has-spot{ position:relative; overflow:hidden; --mx:50%; --my:-40%; }
.has-spot::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(340px circle at var(--mx) var(--my), var(--accent-soft, rgba(232,100,31,.13)), transparent 62%);
  opacity:0; transition:opacity .35s ease;
}
.has-spot:hover::after{ opacity:1; }
.has-spot > *{ position:relative; z-index:1; }

.addon-card, .update-card, .portfolio-card, .testimonial-card, .referral-card, .plan{
  transition:transform .35s var(--ease), border-color .35s ease, box-shadow .35s ease;
}
.addon-card:hover, .portfolio-card:hover, .testimonial-card:hover, .referral-card:hover, .plan:hover{
  transform:translateY(-5px);
  border-color:var(--line-strong);
  box-shadow:0 22px 40px -28px rgba(0,0,0,.7);
}
html[data-theme="light"] .addon-card:hover,
html[data-theme="light"] .portfolio-card:hover,
html[data-theme="light"] .testimonial-card:hover,
html[data-theme="light"] .referral-card:hover,
html[data-theme="light"] .plan:hover{ box-shadow:0 22px 40px -30px rgba(24,21,18,.3); }

/* the featured plan sits proud of its neighbours and stays there */
.plan.is-featured{ transition:transform .35s var(--ease), border-color .35s ease, box-shadow .35s ease; }
@media (min-width:861px){
  .plan.is-featured{ transform:translateY(-10px); }
  .plan.is-featured:hover{ transform:translateY(-15px); }
}

[data-tilt]{
  transform:perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition:transform .5s var(--ease);
  transform-style:preserve-3d;
}

/* ---------------------------------------------------------------------
   H. BUTTONS AND LINKS
   Magnetic pull comes from --tx/--ty (written by motion.js), the sheen
   is a gradient swept across on hover, and every arrow link now slides
   its arrow instead of sitting still.
   --------------------------------------------------------------------- */
.btn-solid, .btn-accent{
  position:relative; overflow:hidden;
  transform:translate3d(var(--tx, 0px), var(--ty, 0px), 0);
  transition:transform .28s var(--ease), background-color .2s ease;
}
.btn-solid::after, .btn-accent::after{
  content:""; position:absolute; top:0; bottom:0; left:-60%; width:45%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-18deg); opacity:0;
}
.btn-solid:hover::after, .btn-accent:hover::after{ opacity:1; animation:sheen .75s var(--ease); }
@keyframes sheen{ to{ left:120%; } }

.btn-link{ position:relative; overflow:hidden; }
.btn-link::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:right;
  transition:transform .35s var(--ease);
}
.btn-link:hover::after{ transform:scaleX(1); transform-origin:left; }

/* arrows travel on hover — applies to every "... →" link on the site */
.btn-link, .btn-solid, .btn-accent, .portfolio-card a{ --arrow:0px; }
.btn-link:hover, .btn-solid:hover, .btn-accent:hover{ --arrow:4px; }

/* ---------------------------------------------------------------------
   I. FAQ, NAV AND FOOTER
   --------------------------------------------------------------------- */
.faq-item{ transition:border-color .3s ease; }
.faq-item summary{ transition:color .25s ease, padding-left .3s var(--ease); }
.faq-item summary:hover{ color:var(--accent); padding-left:6px; }
.faq-item summary::after{ transition:transform .3s var(--ease), color .25s ease; }
.faq-item[open] summary{ color:var(--accent); }
.faq-item[open] p{ animation:faqOpen .45s var(--ease) both; }
@keyframes faqOpen{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

#navLinks a[data-nav]{ position:relative; }
#navLinks a[data-nav]::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; border-radius:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
#navLinks a[data-nav]:hover::after,
#navLinks a[data-nav].is-active::after{ transform:scaleX(1); }

footer .footer-col a{ display:inline-block; transition:transform .25s var(--ease), color .25s ease; }
footer .footer-col a:hover{ transform:translateX(5px); color:var(--accent); }
footer .logo svg rect{ transition:transform .5s var(--ease); transform-origin:center; }
footer .logo:hover svg rect:nth-child(1){ transform:translateY(2px); }
footer .logo:hover svg rect:nth-child(3){ transform:translateY(-2px); }

/* the studio mark in the Materials section keeps stacking on loop */
.mark-display.is-visible svg rect{ animation:markStack 4.5s var(--ease) infinite; }
.mark-display.is-visible svg rect:nth-child(2){ animation-delay:.12s; }
.mark-display.is-visible svg rect:nth-child(3){ animation-delay:.24s; }
@keyframes markStack{
  0%, 62%, 100%{ transform:translateY(0); }
  70%{ transform:translateY(-4px); }
  78%{ transform:translateY(0); }
}

/* ---------------------------------------------------------------------
   J. REDUCED MOTION
   Keep every composition, remove every movement.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  [data-reveal], .split-word, .spec-list li{ opacity:1 !important; transform:none !important; filter:none !important; clip-path:none !important; }
  .spec-list li::after{ transform:scaleX(1) !important; }
  .section:not(.hero)::after{ transform:scaleX(1) !important; }
  .marquee__track{ transform:none !important; }
  .mark-display.is-visible svg rect{ animation:none; }
  .btn-solid, .btn-accent{ transform:none !important; }
  [data-reveal].is-visible .dim-price .num{ animation:none; }
  [data-tilt]{ transform:none !important; }
  .hero-bg__grid, .scrollvid__frame{ transform:none !important; }
}

/* ---------------------------------------------------------------------
   K. HERO TICKER, NOW RUNNING ON THE SHARED MARQUEE ENGINE
   The hero strip used to have its own CSS keyframe. It is the same
   component as the bands further down the page now, so it inherits the
   scroll-reactive behaviour for free and there is one thing to maintain
   instead of two.
   --------------------------------------------------------------------- */
.marquee--hero{
  position:relative; z-index:1;
  background:rgba(0,0,0,.12);
}
html[data-theme="light"] .marquee--hero{ background:rgba(24,21,18,.03); }
.marquee--hero .marquee__track{ padding:15px 0; gap:22px; }
.marquee--hero .marquee__track > span{ font-size:12px; letter-spacing:.2em; }

/* the hero's drafting grid drifts against the scroll */
.hero-bg__grid{ transform:translate3d(0, var(--py, 0px), 0); will-change:transform; }

/* the old bespoke ticker rules are retired — left in place rather than
   deleted so a stale cached page can't lose its layout mid-swap */
.hero-ticker{ display:none; }

/* ---------------------------------------------------------------------
   L. SCROLL-SCRUB SECTION
   460vh of scroll for one canvas sequence was a long walk. Tightened,
   and the caption now carries a progress rule so you can see how far
   through the sequence you are.
   --------------------------------------------------------------------- */
.scrollvid{ height:340vh; }
@media (max-width:760px){ .scrollvid{ height:280vh; } }
.scrollvid__frame{ box-shadow:0 40px 90px -50px rgba(0,0,0,.8); }
html[data-theme="light"] .scrollvid__frame{ box-shadow:0 40px 90px -55px rgba(24,21,18,.35); }
.scrollvid__caption{ position:relative; padding-bottom:12px; }
.scrollvid__caption::after{
  content:""; position:absolute; left:50%; bottom:0; width:52px; height:2px; border-radius:1px;
  transform:translateX(-50%); background:var(--line-strong);
}

/* ---------------------------------------------------------------------
   M. STATS BAND
   Each figure gets a rule that fills as the band arrives, so the numbers
   land on something rather than floating.
   --------------------------------------------------------------------- */
.stat-block{ position:relative; padding-top:20px; }
.stat-block::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px; border-radius:1px;
  background:var(--accent); opacity:.85;
  transform:scaleX(0); transform-origin:left;
  transition:transform 1s var(--ease); transition-delay:var(--d, 0s);
}
.stat-block.is-visible::before{ transform:scaleX(1); }
@media (prefers-reduced-motion: reduce){ .stat-block::before{ transform:scaleX(1); } }

/* ---------------------------------------------------------------------
   N. SUBPAGE HERO
   The niche and legal pages get the homepage hero's treatment, scaled
   down: drafting grid, one light source, and a headline that sets itself.
   --------------------------------------------------------------------- */
.subpage-hero{ position:relative; overflow:hidden; }
.subpage-hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size:74px 74px; opacity:.7;
  -webkit-mask-image:radial-gradient(110% 90% at 30% 10%, #000, rgba(0,0,0,.4) 55%, transparent 85%);
          mask-image:radial-gradient(110% 90% at 30% 10%, #000, rgba(0,0,0,.4) 55%, transparent 85%);
}
.subpage-hero > .wrap{ position:relative; z-index:2; }

/* ---------------------------------------------------------------------
   O. FIXES AND FINAL POLISH
   --------------------------------------------------------------------- */

/* [hidden] was losing to component rules that set their own display —
   the availability badge showed as an empty box on the contact section
   even with the attribute set. One rule fixes it everywhere. */
[hidden]{ display:none !important; }

/* The checklist on what-to-send, and the numbered rows on it, now arrive
   in sequence like every other list on the site. */
.send-item{ transition:transform .3s var(--ease), border-color .3s ease; }
.send-item:hover{ transform:translateX(4px); }
.send-item-num{ transition:color .3s ease; }
.send-item:hover .send-item-num{ color:var(--accent); }

/* Legal pages: give the long text some rhythm as it scrolls past. */
.legal-content > h2{ position:relative; padding-left:0; }
.legal-content > h2::before{
  content:""; position:absolute; left:-18px; top:.55em; width:8px; height:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease) .1s;
}
.legal-content > h2.is-visible::before{ transform:scaleX(1); }
@media (max-width:760px){ .legal-content > h2::before{ display:none; } }

/* The estimator's toggle buttons and slider readouts pick up the same
   easing as everything else, so interacting with them feels connected
   to the rest of the page rather than instant and flat. */
.estimator__opt{ transition:background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); }
.estimator__opt:hover:not(.is-active){ transform:translateY(-2px); }
.estimator__price{ display:inline-block; transition:transform .2s var(--ease); }
.estimator__price.is-bumped{ transform:scale(1.06); }
#roiResult{ display:inline-block; transition:transform .2s var(--ease); }
#roiResult.is-bumped{ transform:scale(1.06); }

/* Anchor targets clear the fixed header AND the seam line above them. */
[id]{ scroll-margin-top:110px; }

/* Section texture is a touch heavier on the paper sections, which sit
   lighter and would otherwise lose it entirely. */
.section--paper:not(.hero)::before{ opacity:.75; }

/* ---------------------------------------------------------------------
   P. SUBPAGE HERO LAYOUT
   The niche pages now share the homepage hero's two-column composition:
   copy on the left, the same self-assembling build panel on the right.
   Collapses to one column on tablets and down.
   --------------------------------------------------------------------- */
.subpage-hero__grid{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:60px; align-items:center;
}
@media (max-width:960px){
  .subpage-hero__grid{ grid-template-columns:1fr; gap:48px; }
  .subpage-hero .hero-visual{ max-width:520px; }
}
.subpage-hero__copy{ min-width:0; }
.subpage-hero .hero-visual{ margin-top:8px; }
.subpage-hero .build-panel__screen{ min-height:250px; }