/* ────────────────────────────────────────────────────────────────
   tokens — red / white / grey only. Themes set local color slots.
   ──────────────────────────────────────────────────────────────── */
:root{
  /* palette primitives */
  --red:        oklch(63% 0.18 28);
  --red-hi:     oklch(70% 0.19 28);
  --red-deep:   oklch(56% 0.18 28);
  --red-soft:   oklch(63% 0.18 28 / 0.14);

  --ink:        oklch(18% 0.005 250);
  --ink-2:      oklch(34% 0.006 250);
  --ink-soft:   oklch(52% 0.008 250);

  --paper:      oklch(95% 0.012 80);     /* warm off-white sheet */
  --paper-2:    oklch(97% 0.008 80);
  --paper-3:    oklch(99% 0.005 80);
  --paper-line: oklch(80% 0.012 80);
  --paper-line-soft: oklch(88% 0.01 80);

  --white:      #ffffff;
  --grey-1:     oklch(97% 0 0);
  --grey-2:     oklch(91% 0.002 250);
  --grey-3:     oklch(72% 0.003 250);

  --dark:       oklch(18% 0.004 250);
  --dark-2:     oklch(22% 0.005 250);
  --dark-3:     oklch(26% 0.006 250);
  --dark-line:  oklch(32% 0.006 250);
  --dark-line-soft: oklch(26% 0.006 250);
  --dark-soft:  oklch(60% 0.008 250);

  --font-display: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --max:1280px;
  --gut:clamp(20px,4vw,56px);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{font-family:var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;background:var(--paper)}
html,body{width:100%;margin:0;padding:0}
body{font-size:16px;line-height:1.55;font-weight:400;overflow-x:hidden;background:#1a1c1f;color:var(--ink)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,svg{display:block;max-width:100%}
::selection{background:var(--red);color:#fff}

/* ────────── section themes — bag of local color slots ────────── */
.theme-dark{
  --bg:var(--dark); --bg-2:var(--dark-2); --bg-3:var(--dark-3);
  --fg:#fff; --fg-soft:oklch(86% 0.004 250); --muted:var(--dark-soft);
  --line:var(--dark-line); --line-soft:var(--dark-line-soft);
  --grid-line:oklch(28% 0.006 250);
  --eyebrow-c:var(--red);
  background:var(--bg);color:var(--fg);
  color-scheme:dark;
}
.theme-dark-deep{
  --bg:oklch(13% 0.004 250); --bg-2:var(--dark-2); --bg-3:var(--dark-3);
  --fg:#fff; --fg-soft:oklch(82% 0.004 250); --muted:var(--dark-soft);
  --line:var(--dark-line); --line-soft:var(--dark-line-soft);
  --grid-line:oklch(24% 0.006 250);
  --eyebrow-c:var(--red);
  background:var(--bg);color:var(--fg);
  color-scheme:dark;
}
.theme-paper{
  --bg:var(--paper); --bg-2:var(--paper-2); --bg-3:var(--paper-3);
  --fg:var(--ink); --fg-soft:var(--ink-2); --muted:var(--ink-soft);
  --line:var(--paper-line); --line-soft:var(--paper-line-soft);
  --grid-line:var(--paper-line);
  --eyebrow-c:var(--red);
  background:var(--bg);color:var(--fg);
}
.theme-white{
  --bg:var(--white); --bg-2:var(--grey-1); --bg-3:var(--grey-1);
  --fg:var(--ink); --fg-soft:var(--ink-2); --muted:var(--ink-soft);
  --line:var(--grey-2); --line-soft:oklch(95% 0.001 250);
  --grid-line:oklch(93% 0.002 250);
  --eyebrow-c:var(--red);
  background:var(--bg);color:var(--fg);
}
.theme-red{
  --bg:var(--red); --bg-2:var(--red-deep); --bg-3:var(--red-deep);
  --fg:#fff; --fg-soft:rgba(255,255,255,.9); --muted:rgba(255,255,255,.7);
  --line:rgba(255,255,255,.22); --line-soft:rgba(255,255,255,.14);
  --grid-line:rgba(255,255,255,.16);
  --eyebrow-c:#fff;
  background:var(--bg);color:var(--fg);
  color-scheme:light;
}

/* ────────── shared primitives ────────── */
.mono{font-family:var(--font-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted)}
.mono.fg{color:var(--fg)}
.dash{color:var(--red);margin-right:8px}
.theme-red .dash{color:#fff}

.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--eyebrow-c);font-family:var(--font-mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;margin-bottom:28px}
.eyebrow::before{content:"—";color:var(--eyebrow-c)}

.h1{font-family:var(--font-display);font-weight:700;line-height:0.98;letter-spacing:-0.025em;font-size:clamp(36px,6.5vw,96px);margin:0;text-wrap:balance;hyphens:none;overflow-wrap:normal;word-break:keep-all}
.h2{font-family:var(--font-display);font-weight:700;line-height:1;letter-spacing:-0.025em;font-size:clamp(36px,5.5vw,72px);margin:0;text-wrap:balance;overflow-wrap:normal;word-break:keep-all;hyphens:none}
.h3{font-family:var(--font-display);font-weight:600;letter-spacing:-0.015em;line-height:1.15;font-size:clamp(22px,2.3vw,28px);margin:0}
.lede{font-size:clamp(16px,1.4vw,18px);color:var(--fg-soft);line-height:1.6;max-width:46ch;margin:0}
.h1 .dot,.h2 .dot{color:var(--red)}
.theme-red .h1 .dot,.theme-red .h2 .dot{color:var(--ink)}

.section{position:relative;border-bottom:1px solid var(--line-soft);background:var(--bg);color:var(--fg);width:100%}
.section-inner{max-width:var(--max);margin:0 auto;padding:80px var(--gut) 96px;position:relative;width:100%}
.sheet-marks{display:flex;justify-content:space-between;align-items:center;margin-bottom:56px}
.h2-row{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:48px;flex-wrap:wrap}
.h2-row > div:first-child{flex:1 1 100%;min-width:0}
.h2-row .h2{max-width:18ch}
.h2-row > .lede,.h2-row > p{flex:1 1 100%}
.h2-row > a.all{flex:0 0 auto;align-self:flex-start}
@media (min-width:1100px){
  .h2-row > div:first-child{flex:1 1 0;max-width:60%}
  .h2-row > .lede,.h2-row > p{flex:0 1 38%;max-width:38%}
  .h2-row > a.all{align-self:flex-end}
}

@media (max-width:880px){.section-inner{padding:64px var(--gut) 80px}.sheet-marks{margin-bottom:36px}.h2-row{margin-bottom:36px}}

/* ────────── NAV (always dark, floats above content) ────────── */
.nav{
  position:sticky;top:0;z-index:50;
  background:color-mix(in oklab, var(--dark) 88%, transparent);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--dark-line-soft);
  color:#fff;
}
.nav-inner{max-width:var(--max);margin:0 auto;padding:0 var(--gut);display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;letter-spacing:-0.02em;font-size:18px;color:#fff}
.brand .badge{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:1.5px solid var(--red);border-radius:50%;color:var(--red);font-size:11px;font-weight:700}
.brand .dot{color:var(--red)}
.nav ul{list-style:none;display:flex;gap:28px;margin:0;padding:0;font-size:14px;color:oklch(86% 0.004 250)}
.nav ul a{padding:6px 0;transition:color .18s}
.nav ul a:hover{color:#fff}
.nav-cta{font-family:var(--font-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:#fff;border:1px solid var(--dark-line);padding:9px 14px;border-radius:999px;transition:border-color .18s, color .18s}
.nav-cta:hover{border-color:var(--red);color:var(--red)}
.nav-right{display:flex;align-items:center;gap:18px}
.nav-social{display:flex;align-items:center;gap:6px}
.nav-soc{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;color:rgba(255,255,255,.65);border:1px solid var(--dark-line);border-radius:999px;transition:color .18s, border-color .18s, background .18s}
.nav-soc:hover{color:var(--red);border-color:var(--red)}
@media (max-width:1100px){.nav-social{display:none}}
.burger{display:none}
@media (max-width:880px){
  .nav ul{display:none}.nav-cta{display:none}
  .burger{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--dark-line);border-radius:8px}
  .burger span{display:block;width:14px;height:1.5px;background:#fff;position:relative}
  .burger span::before,.burger span::after{content:"";position:absolute;left:0;width:14px;height:1.5px;background:#fff}
  .burger span::before{top:-5px}.burger span::after{top:5px}
}

/* ────────── HERO (dark, finer drafting grid) ────────── */
.hero{position:relative;overflow:hidden;min-height:auto;padding:48px 0 0;display:flex;flex-direction:column;justify-content:flex-start;background:var(--bg);color:var(--fg);width:100%}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right, var(--grid-line) 0.5px, transparent 0.5px),
    linear-gradient(to bottom, var(--grid-line) 0.5px, transparent 0.5px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 95% 85% at 50% 38%, black 50%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 95% 85% at 50% 38%, black 50%, transparent 100%);
  opacity:0.42;
}
.hero-inner{max-width:var(--max);width:100%;margin:0 auto;padding:16px var(--gut) 72px;position:relative;z-index:1;box-sizing:border-box}
.hero-marks{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px}
.hero-marks .left,.hero-marks .right{display:flex;gap:18px;align-items:center}
.tick{width:6px;height:6px;border:1px solid var(--red);transform:rotate(45deg)}
.tick.dot{background:var(--red)}

.hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,0.8fr);gap:48px;align-items:start}
/* CTA stays in left column under text on desktop, plan stays in right column */
.hero-grid > .hero-cta{grid-column:1;grid-row:2;margin-top:16px}
.hero-grid > .plan-card{grid-row:1 / span 2}
@media (max-width:980px){.hero-grid{grid-template-columns:1fr;gap:32px}.hero-grid > .hero-cta{grid-column:1;grid-row:auto}.hero-grid > .plan-card{grid-row:auto}}
.hero-copy .eyebrow{margin-bottom:24px}
.hero-copy h1{margin-bottom:32px;max-width:100%;overflow-wrap:break-word}
.hero-copy .lede{margin-bottom:40px;max-width:42ch}

.cta-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.btn-primary{
  display:inline-flex;align-items:center;gap:14px;
  background:var(--red);color:#fff;
  padding:20px 26px;border-radius:10px;
  font-family:var(--font-display);font-weight:600;font-size:16px;letter-spacing:-0.01em;
  transition:background .18s, transform .18s;
}
.btn-primary:hover{background:var(--red-hi)}
.btn-primary:active{transform:translateY(1px)}
.btn-primary .arr{display:inline-block;transition:transform .25s ease}
.btn-primary:hover .arr{transform:translateX(4px)}
.cta-note{font-family:var(--font-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);max-width:14ch;line-height:1.5}

.hero-stats{
  margin-top:88px;
  display:grid;grid-template-columns:repeat(3,1fr) auto;
  gap:32px;align-items:end;
  border-top:1px solid var(--line);padding-top:32px;
}
.hero-stats .stat .num{font-family:var(--font-display);font-weight:700;font-size:clamp(44px,5.2vw,68px);letter-spacing:-0.02em;line-height:1}
.hero-stats .stat .num em{font-style:normal;color:var(--red)}
.hero-stats .stat .lbl{display:block;margin-top:10px;font-family:var(--font-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted)}
.scroll-cue{justify-self:end;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line);border-radius:999px;color:var(--muted);transition:border-color .18s, color .18s}
.scroll-cue:hover{border-color:var(--red);color:var(--red)}

@media (max-width:680px){
  .hero-stats{grid-template-columns:repeat(2,1fr);gap:24px 20px}
  .scroll-cue{display:none}
  .hero-inner{padding-bottom:64px}.hero-marks{margin-bottom:48px}
}

/* plan card on hero */
.plan-card{
  background:color-mix(in oklab, var(--bg) 80%, black 6%);
  border:1px solid var(--line);border-radius:14px;padding:22px;position:relative;overflow:hidden;min-width:0;
}
.plan-tabs{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;font-family:var(--font-mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;flex-wrap:wrap;gap:6px}
.plan-tabs .tab{color:var(--muted);padding:5px 8px;border-radius:6px;white-space:nowrap}
.plan-tabs .tab.active{color:var(--red);background:var(--red-soft)}
.plan-tabs .tab .pin{display:inline-block;width:6px;height:6px;background:var(--red);border-radius:50%;margin-right:6px;vertical-align:1px}
.plan-svg{width:100%;height:auto;display:block}
.plan-foot{display:flex;justify-content:space-between;align-items:center;margin-top:16px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);flex-wrap:wrap;gap:8px}
.plan-foot .status{display:inline-flex;align-items:center;gap:8px;color:var(--fg-soft)}
.plan-foot .status::before{content:"";width:7px;height:7px;background:#17a34a;border-radius:50%;box-shadow:0 0 0 3px rgba(23,163,74,.18)}

/* ────────── WAYS (paper, drafting cards) ────────── */
.paper-grid{position:relative}
.paper-grid::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right, var(--grid-line) 0.5px, transparent 0.5px),
    linear-gradient(to bottom, var(--grid-line) 0.5px, transparent 0.5px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom, black 0%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, black 0%, transparent 100%);
  opacity:0.4;
}
.paper-grid > *{position:relative;z-index:1}

.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ways .way{
  position:relative;padding:32px 32px 28px;background:var(--bg-3);
  border:1px solid var(--line);border-radius:10px;
  display:flex;flex-direction:column;gap:16px;min-height:300px;
  transition:transform .25s, border-color .25s, box-shadow .25s;
}
.ways .way:hover{transform:translateY(-2px);border-color:var(--red);box-shadow:0 6px 0 -2px var(--red-soft)}
/* drafting corner tick on each card */
.ways .way::before{content:"";position:absolute;top:-1px;left:-1px;width:14px;height:14px;border-top:1.5px solid var(--red);border-left:1.5px solid var(--red);pointer-events:none}
.ways .way::after{content:"";position:absolute;bottom:-1px;right:-1px;width:14px;height:14px;border-bottom:1.5px solid var(--line);border-right:1.5px solid var(--line);pointer-events:none;transition:border-color .25s}
.ways .way:hover::after{border-color:var(--red)}
.way .num{font-family:var(--font-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--red);display:flex;justify-content:space-between;align-items:center}
.way .num .when{color:var(--muted)}
.way h3{font-family:var(--font-display);font-weight:600;font-size:24px;line-height:1.18;letter-spacing:-0.015em;margin:0}
.way p{margin:0;color:var(--fg-soft);font-size:15px;line-height:1.55;flex:1}
.way .more{margin-top:8px;display:inline-flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--fg);border-top:1px solid var(--line);padding-top:18px}
.way .more .arr{transition:transform .25s, color .25s}
.way:hover .more .arr{transform:translateX(4px);color:var(--red)}
@media (max-width:880px){.ways{grid-template-columns:1fr}}

/* ────────── ENGINEER (white, dark portrait card) ────────── */
.product{display:grid;grid-template-columns:0.95fr 1.05fr;gap:48px;align-items:stretch}
@media (max-width:980px){.product{grid-template-columns:1fr;gap:32px}}
.engineer-card{
  background:var(--dark);color:#fff;border:1px solid var(--ink);
  border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:18px;min-height:560px;
  position:relative;overflow:hidden;
}
.engineer-card::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(to right, oklch(28% 0.006 250) 0.5px, transparent 0.5px),
    linear-gradient(to bottom, oklch(28% 0.006 250) 0.5px, transparent 0.5px);
  background-size:32px 32px;opacity:0.4;pointer-events:none;
}
.engineer-photo{
  flex:1;border-radius:10px;border:1px solid oklch(34% 0.006 250);
  background:linear-gradient(180deg, oklch(28% 0.008 35) 0%, oklch(20% 0.005 250) 100%);
  position:relative;overflow:hidden;
  display:flex;align-items:flex-end;justify-content:flex-start;
  isolation:isolate;
}
.engineer-photo::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 32% 28% at 50% 38%, oklch(46% 0.025 38 / 0.7) 0%, transparent 75%),
    linear-gradient(180deg, transparent 50%, oklch(18% 0.008 250) 100%);
}
.engineer-photo .corners{position:absolute;inset:14px;pointer-events:none}
.engineer-photo .corners span{position:absolute;width:14px;height:14px;border:1.5px solid rgba(255,255,255,.45)}
.engineer-photo .corners .tl{top:0;left:0;border-right:0;border-bottom:0}
.engineer-photo .corners .tr{top:0;right:0;border-left:0;border-bottom:0}
.engineer-photo .corners .bl{bottom:0;left:0;border-right:0;border-top:0}
.engineer-photo .corners .br{bottom:0;right:0;border-left:0;border-top:0}
.engineer-photo .label{position:absolute;left:18px;top:16px;display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:10px;letter-spacing:0.18em;color:rgba(255,255,255,.6);z-index:2}
.engineer-photo .label .dotred{width:6px;height:6px;background:var(--red);border-radius:50%}
.engineer-info{position:relative;display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:oklch(70% 0.008 250)}
.engineer-info b{color:#fff;font-weight:500}
.engineer-card .corner-mark{position:absolute;top:14px;right:14px;font-family:var(--font-mono);font-size:10px;letter-spacing:0.18em;color:rgba(255,255,255,.4);z-index:2}

.product-text h2{margin-bottom:24px}
.quote{
  margin:0 0 36px 0;padding:0 0 0 28px;
  border-left:3px solid var(--red);
  font-family:var(--font-display);font-weight:500;font-size:22px;line-height:1.42;letter-spacing:-0.01em;color:var(--ink);
}
.quote cite{display:block;margin-top:16px;font-family:var(--font-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);font-style:normal}

.principles{display:grid;grid-template-columns:repeat(2,1fr);gap:24px 32px;margin:0;padding:0;list-style:none}
.principles li{display:grid;grid-template-columns:32px 1fr;gap:14px;align-items:start;padding-top:18px;border-top:1px solid var(--line)}
.principles li .marker{font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;color:var(--red);padding-top:3px}
.principles li b{display:block;font-family:var(--font-display);font-weight:600;font-size:16px;letter-spacing:-0.01em;margin-bottom:4px}
.principles li span{font-size:14px;color:var(--fg-soft);line-height:1.5}
@media (max-width:680px){.principles{grid-template-columns:1fr}}

/* ────────── SYSTEMS (dark spec table) ────────── */
.spec{border:1px solid var(--line);border-radius:14px;background:var(--bg-2);overflow:hidden}
.spec-head,.spec-row{display:grid;grid-template-columns:60px 1.4fr 1fr 0.8fr 60px;gap:0;align-items:center}
.spec-head{padding:14px 24px;border-bottom:1px solid var(--line);font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);background:color-mix(in oklab, var(--bg-2) 88%, black 4%)}
.spec-row{padding:22px 24px;border-bottom:1px solid var(--line-soft);transition:background .15s}
.spec-row:last-child{border-bottom:0}
.spec-row:hover{background:color-mix(in oklab, var(--bg-2) 80%, var(--red-soft) 20%)}
.spec-row .num{font-family:var(--font-mono);font-size:12px;color:var(--red);letter-spacing:0.08em}
.spec-row .name{font-family:var(--font-display);font-weight:600;font-size:18px;letter-spacing:-0.01em}
.spec-row .desc{font-size:13.5px;color:var(--fg-soft);line-height:1.5;padding-right:24px}
.spec-row .scope{font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted)}
.spec-row .arrow{justify-self:end;color:var(--muted);transition:color .15s, transform .25s}
.spec-row:hover .arrow{color:var(--red);transform:translateX(4px)}
@media (max-width:880px){
  .spec-head{display:none}
  .spec-row{grid-template-columns:1fr;padding:22px 20px;gap:8px}
  .spec-row .num{order:1}.spec-row .name{order:2}.spec-row .desc{order:3;padding-right:0}.spec-row .scope{order:4}.spec-row .arrow{display:none}
}

/* ────────── WARRANTY (red statement) ────────── */
.warranty-section{position:relative;overflow:hidden}
.warranty-section::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right, var(--grid-line) 0.5px, transparent 0.5px),
    linear-gradient(to bottom, var(--grid-line) 0.5px, transparent 0.5px);
  background-size:48px 48px;opacity:0.45;
  mask-image:linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
}
.warranty-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:64px;align-items:end}
.warranty-grid .left{position:relative}
.warranty-grid .h2{font-size:clamp(36px,5.5vw,72px);letter-spacing:-0.025em;line-height:1;color:#fff}
.warranty-grid .h2 .dot{color:var(--ink)}
.warranty-grid .lede{color:rgba(255,255,255,.86);max-width:42ch;margin:32px 0 0}
.warranty-grid .right{display:grid;grid-template-columns:1fr;gap:0;background:transparent;border:0;border-top:1px solid rgba(255,255,255,.32);padding-top:32px}
.warranty-grid .cell{padding:0;background:transparent;display:flex;flex-direction:column;gap:18px;position:relative}
.warranty-grid .cell .tag{position:static;font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:8px}
.warranty-grid .cell .big{font-family:var(--font-display);font-weight:800;font-size:clamp(96px,11vw,144px);letter-spacing:-0.04em;line-height:0.9;margin:0 0 8px;color:#fff;display:flex;align-items:baseline;gap:14px}
.warranty-grid .cell .big em{font-style:normal;color:var(--ink)}
.warranty-grid .cell .big-unit{font-family:var(--font-display);font-weight:700;font-size:0.28em;letter-spacing:-0.01em;color:rgba(255,255,255,.85);text-transform:lowercase}
.warranty-grid .cell h3{font-family:var(--font-display);font-weight:600;font-size:20px;letter-spacing:-0.01em;margin:24px 0 10px;color:#fff}
.warranty-grid .cell p{margin:0;color:rgba(255,255,255,.84);font-size:14.5px;line-height:1.55;max-width:34ch}
@media (max-width:980px){.warranty-grid{grid-template-columns:1fr;gap:48px}.warranty-grid .right{grid-template-columns:1fr}}

/* ────────── PORTFOLIO (cream, dark tiles) ────────── */
.portfolio{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(360px,auto);gap:16px}
.tile{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);min-height:260px;display:flex;flex-direction:column;justify-content:space-between;padding:20px;isolation:isolate;color:#fff}
.tile .scene{position:absolute;inset:0;z-index:0}
.tile::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.88) 100%);pointer-events:none}
.tile .tile-meta,.tile .tile-foot{position:relative;z-index:2}
.tile .tile-meta{display:flex;justify-content:space-between;align-items:flex-start;font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.tile .tile-meta .num{color:var(--red)}
.tile .tile-foot{font-family:var(--font-display);font-weight:600;font-size:19px;letter-spacing:-0.015em;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.tile .tile-foot small{display:block;margin-top:6px;font-family:var(--font-mono);font-weight:400;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,.65)}
.tile.t1{grid-column:span 3;grid-row:span 2}
.tile.t2{grid-column:span 3}
.tile.t3{grid-column:span 2}
.tile.t4{grid-column:span 2}
.tile.t5{grid-column:span 2}
.tile.t6{grid-column:span 3}
.tile.t7{grid-column:span 3}
@media (max-width:880px){
  .portfolio{grid-template-columns:repeat(2,1fr)}
  .tile.t1,.tile.t2,.tile.t3,.tile.t4,.tile.t5,.tile.t6,.tile.t7{grid-column:span 2;grid-row:auto}
}
.bg-a{background:linear-gradient(135deg, oklch(32% 0.022 230) 0%, oklch(18% 0.012 240) 100%)}
.bg-b{background:linear-gradient(135deg, oklch(34% 0.025 50) 0%, oklch(20% 0.012 30) 100%)}
.bg-c{background:linear-gradient(135deg, oklch(30% 0.022 150) 0%, oklch(18% 0.01 170) 100%)}
.bg-d{background:linear-gradient(135deg, oklch(32% 0.018 280) 0%, oklch(18% 0.01 270) 100%)}
.bg-e{background:linear-gradient(135deg, oklch(34% 0.025 80) 0%, oklch(20% 0.012 60) 100%)}
.bg-f{background:linear-gradient(135deg, oklch(30% 0.018 ) 0%, oklch(18% 0.008 220) 100%)}

/* ────────── RED MARQUEE (services ticker, between hero and 02) ────────── */
.marquee{
  position:relative;
  background:var(--red);
  color:#fff;
  overflow:hidden;
  border-top:1px solid color-mix(in oklab, var(--red) 78%, black 22%);
  border-bottom:1px solid color-mix(in oklab, var(--red) 78%, black 22%);
  isolation:isolate;
;margin-top:48px}
.marquee::before,.marquee::after{
  content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none;
}
.marquee::before{left:0;background:linear-gradient(to right, var(--red), color-mix(in oklab, var(--red) 80%, transparent 20%) 60%, transparent 100%)}
.marquee::after {right:0;background:linear-gradient(to left,  var(--red), color-mix(in oklab, var(--red) 80%, transparent 20%) 60%, transparent 100%)}
.marquee-track{
  display:flex;
  width:max-content;
  will-change:transform;
  animation: marquee-scroll 42s linear infinite;
}
.marquee-group{
  display:flex;
  align-items:center;
  flex-shrink:0;
  padding:20px 0;
}
.marquee-item{
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:#fff;
  white-space:nowrap;
  padding:0 30px;
}
.marquee-sep{
  font-family:var(--font-mono);
  font-size:13px;
  color:rgba(255,255,255,.55);
  user-select:none;
}
/* user asked for left-to-right movement */
@keyframes marquee-scroll{
  from{transform:translate3d(-50%,0,0)}
  to  {transform:translate3d(0,0,0)}
}
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none;transform:translate3d(-25%,0,0)}
}
@media (max-width:680px){
  .marquee-item{font-size:12px;padding:0 22px;letter-spacing:0.18em}
  .marquee-group{padding:16px 0}
  .marquee::before,.marquee::after{width:60px}
}

/* ────────── TG band (dark) ────────── */
.tg-band{position:relative;overflow:hidden;background:var(--bg);color:var(--fg);padding:80px 0}
.tg-band::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(to right, var(--grid-line) 0.5px, transparent 0.5px),
    linear-gradient(to bottom, var(--grid-line) 0.5px, transparent 0.5px);
  background-size:60px 60px;
  mask-image:linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
  -webkit-mask-image:linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
  opacity:0.4;
}
.tg-inner{max-width:var(--max);margin:0 auto;padding:88px var(--gut);position:relative;display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:center}
.tg-inner h2{max-width:14ch;margin:0}
.tg-inner .tg-side{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.tg-inner .tg-side .lede{margin:0}
.tg-inner--center{display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px;max-width:760px}
.tg-inner--center h2{max-width:none}
.tg-inner--center .lede{max-width:56ch;margin:0}
.tg-inner--center .tg-buttons{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.btn-ghost{
  display:inline-flex;align-items:center;gap:12px;padding:18px 24px;border-radius:10px;
  border:1px solid var(--red);color:var(--red);
  font-family:var(--font-display);font-weight:600;font-size:15px;
  transition:background .18s, color .18s;
}
.btn-ghost:hover{background:var(--red);color:#fff}
@media (max-width:880px){.tg-inner{grid-template-columns:1fr;padding:64px var(--gut)}}

/* ────────── PARTNERS (white) ────────── */
.partners{display:grid;grid-template-columns:repeat(6,1fr);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.partners .p{
  padding:32px 18px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:6px;
  font-family:var(--font-display);font-weight:600;font-size:16px;letter-spacing:-0.01em;color:var(--fg);
  min-height:108px;transition:color .15s, background .15s;background:var(--bg);
}
.partners .p:hover{background:var(--bg-2);color:var(--red)}
.partners .p .pm{font-family:var(--font-mono);font-weight:400;font-size:11px;color:var(--muted);letter-spacing:0.14em;text-transform:uppercase}
.partners .p:nth-child(6n){border-right:0}
.partners .p:nth-last-child(-n+6){border-bottom:0}
@media (max-width:880px){
  .partners{grid-template-columns:repeat(2,1fr)}
  .partners .p{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
  .partners .p:nth-child(6n){border-right:1px solid var(--line)}
  .partners .p:nth-last-child(-n+6){border-bottom:1px solid var(--line)}
  .partners .p:nth-child(2n){border-right:0}
  .partners .p:nth-last-child(-n+2){border-bottom:0}
}

/* ────────── GEO (cream, light schematic) ────────── */
.geo{display:grid;grid-template-columns:0.85fr 1.15fr;gap:32px;align-items:stretch}
.geo .geo-text{display:flex;flex-direction:column;justify-content:center;gap:24px}
.geo .geo-text h2{margin:0}
.geo .geo-text ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px 24px}
.geo .geo-text ul li{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--fg-soft)}
.geo .geo-text ul li::before{content:"";width:6px;height:6px;background:var(--red);border-radius:50%}
.map-card{background:var(--bg-3);border:1px solid var(--line);border-radius:14px;padding:22px;position:relative;min-height:440px;display:flex;flex-direction:column}
.map-svg{flex:1;width:100%;height:100%}
.map-legend{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);flex-wrap:wrap;gap:8px}
.map-legend .leg{display:inline-flex;align-items:center;gap:6px}
.map-legend .leg::before{content:"";width:8px;height:8px;background:var(--red);border-radius:50%}
@media (max-width:880px){.geo{grid-template-columns:1fr}}

/* ────────── FORM (dark) ────────── */
.form-wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.form-wrap .form-side h2{margin:0 0 16px}
.form-wrap .form-side .lede{margin-bottom:32px}
.contacts{display:grid;grid-template-columns:1fr;gap:22px;margin-top:8px}
.contacts .row{display:flex;flex-direction:column;gap:4px}
.contacts .row .k{font-family:var(--font-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted)}
.contacts .row .v{font-family:var(--font-display);font-weight:600;font-size:22px;letter-spacing:-0.015em}

form.consult{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:32px;display:grid;gap:18px}
form.consult label{display:grid;gap:6px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted)}
form.consult input,form.consult textarea{
  background:var(--bg);border:1px solid var(--line);border-radius:8px;color:var(--fg);
  font:500 15px/1.4 var(--font-body);padding:14px 16px;outline:none;transition:border-color .18s;
}
form.consult input:focus,form.consult textarea:focus{border-color:var(--red)}
form.consult textarea{min-height:120px;resize:vertical}
form.consult .actions{display:flex;justify-content:space-between;align-items:center;margin-top:6px;gap:16px;flex-wrap:wrap}
form.consult .actions .agree{font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);max-width:28ch;line-height:1.55}
form.consult .actions .agree a{color:var(--fg-soft);text-decoration:underline}
@media (max-width:880px){.form-wrap{grid-template-columns:1fr}}

/* ────────── FOOTER ────────── */
footer.site{border-top:1px solid var(--line-soft)}
.foot-inner{max-width:var(--max);margin:0 auto;padding:64px var(--gut) 36px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px}
.foot-inner h4{font-family:var(--font-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin:0 0 16px;font-weight:500}
.foot-inner ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:14.5px;color:var(--fg-soft)}
.foot-inner ul a:hover{color:var(--red)}
.foot-brand .brand{margin-bottom:18px}
.foot-brand p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.6;max-width:36ch}
.foot-bottom{max-width:var(--max);margin:0 auto;padding:24px var(--gut);border-top:1px solid var(--line-soft);display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);flex-wrap:wrap;gap:12px}
@media (max-width:880px){.foot-inner{grid-template-columns:1fr 1fr;gap:32px}}

/* ════════════════════════════════════════════════════════════════
   ENGINEERING FISHECHKI — universal annotations
   ════════════════════════════════════════════════════════════════ */

/* Dimension line under H2: tick — — — measurement label — — — tick */
.dim{
  display:flex;align-items:center;gap:0;
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.16em;
  color:var(--muted);text-transform:uppercase;
  margin:18px 0 0;max-width:480px;
}
.dim .end{display:inline-block;width:1px;height:12px;background:currentColor;flex:0 0 1px}
.dim .end.thick{background:var(--red);width:2px}
.dim .line{flex:1;border-top:1px solid currentColor;height:1px;position:relative;opacity:.6}
.dim .lbl{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:var(--bg);padding:0 12px;color:var(--red);
  white-space:nowrap;font-weight:500;
}
.theme-red .dim{color:rgba(255,255,255,.7)}
.theme-red .dim .end.thick{background:#fff}
.theme-red .dim .lbl{background:var(--red);color:#fff}

/* Title-block cartouche — bottom-right of section */
.title-block{
  position:absolute;right:var(--gut);bottom:24px;z-index:1;opacity:0.4;
  display:grid;grid-template-columns:repeat(4,auto);gap:0;
  border:1px solid var(--line);border-radius:4px;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--muted);background:color-mix(in oklab, var(--bg) 78%, transparent);
  pointer-events:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.title-block .tb{padding:8px 14px;border-right:1px solid var(--line)}
.title-block .tb:last-child{border-right:0}
.title-block .tb .k{display:block;color:var(--muted);opacity:.6;font-size:8.5px;margin-bottom:2px}
.title-block .tb .v{display:block;color:var(--fg);font-weight:500;letter-spacing:0.1em}
.theme-red .title-block{border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.06)}
.theme-red .title-block .tb{border-color:rgba(255,255,255,.32)}
.theme-red .title-block .tb .k{color:rgba(255,255,255,.6)}
.theme-red .title-block .tb .v{color:#fff}
@media (max-width:880px){.title-block{display:none}}

/* North arrow — for geo map */
.north{
  position:absolute;top:18px;right:18px;width:46px;height:46px;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.16em;color:var(--fg);
  pointer-events:none;
}
.north svg{width:100%;height:100%}

/* ════════════════════════════════════════════════════════════════
   SERVICES — 6-card grid (replaces spec table)
   ════════════════════════════════════════════════════════════════ */
.services{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--line);
}
.svc{
  position:relative;background:var(--bg-2);
  padding:32px 28px;display:flex;flex-direction:column;gap:18px;
  min-height:300px;transition:background .25s;
  isolation:isolate;
}
.svc::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background-image:
    linear-gradient(to right, var(--grid-line) 0.5px, transparent 0.5px),
    linear-gradient(to bottom, var(--grid-line) 0.5px, transparent 0.5px);
  background-size:24px 24px;opacity:0;transition:opacity .25s;
  mask-image:linear-gradient(to bottom, black 0%, transparent 70%);
  -webkit-mask-image:linear-gradient(to bottom, black 0%, transparent 70%);
}
.svc:hover{background:var(--bg-3)}
.svc:hover::before{opacity:.5}
.svc-head{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--red)}
.svc-head .scope{color:var(--muted)}
.svc-icon{
  width:64px;height:64px;color:var(--fg);
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:10px;
  position:relative;background:var(--bg);
}
.svc-icon::after{content:"";position:absolute;top:-1px;right:-1px;width:9px;height:9px;border-top:1.5px solid var(--red);border-right:1.5px solid var(--red)}
.svc h3{font-family:var(--font-display);font-weight:600;font-size:24px;letter-spacing:-0.015em;line-height:1.18;margin:0}
.svc p{margin:0;color:var(--fg-soft);font-size:14.5px;line-height:1.55}
.svc .incl{margin:auto 0 0;padding:14px 0 0;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:8px;list-style:none}
.svc .incl li{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:11px;letter-spacing:0.06em;color:var(--muted);text-transform:none}
.svc .incl li::before{content:"";width:10px;height:1.5px;background:var(--red);flex:0 0 10px}
.svc .svc-foot{
  margin-top:18px;
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--fg);
  border-top:1px solid var(--line);padding-top:18px;
}
.svc .svc-foot .arr{transition:transform .25s, color .25s;color:var(--muted)}
.svc:hover .svc-foot .arr{transform:translateX(4px);color:var(--red)}
@media (max-width:980px){.services{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.services{grid-template-columns:1fr}}

/* ────────── GALLERY MOSAIC ────────── */
.gallery-section{border-top:0}
.gallery-inner{padding-top:0 !important;padding-bottom:96px}
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:10px}
.mtile{position:relative;overflow:hidden;border-radius:10px;border:1px solid var(--line);background:var(--bg-2);display:block;isolation:isolate}
.mtile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.mtile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.35) 100%);pointer-events:none;opacity:0;transition:opacity .3s}
.mtile:hover img{transform:scale(1.04)}
.mtile:hover::after{opacity:1}
.mtile--lg{grid-column:span 2;grid-row:span 2}
.mtile--wide{grid-column:span 2}
@media (max-width:980px){
  .mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px}
  .mtile--lg{grid-column:span 2;grid-row:span 2}
  .mtile--wide{grid-column:span 2}
}
@media (max-width:600px){
  .mosaic{grid-template-columns:1fr;grid-auto-rows:220px}
  .mtile--lg{grid-column:span 1;grid-row:span 1}
  .mtile--wide{grid-column:span 1}
}

/* ════════════════════════════════════════════════════════════════
   PARTNERS — marquee variant (replaces grid)
   ════════════════════════════════════════════════════════════════ */
.marquee.muted{
  background:var(--bg);color:var(--fg);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.marquee.muted::before{background:linear-gradient(to right, var(--bg), color-mix(in oklab, var(--bg) 80%, transparent 20%) 60%, transparent 100%)}
.marquee.muted::after {background:linear-gradient(to left,  var(--bg), color-mix(in oklab, var(--bg) 80%, transparent 20%) 60%, transparent 100%)}
.marquee.muted .marquee-group{padding:36px 0}
.marquee.muted .marquee-item{
  color:var(--fg);font-family:var(--font-display);font-weight:600;
  font-size:clamp(20px,2.4vw,30px);letter-spacing:-0.02em;text-transform:none;
  padding:0 36px;display:inline-flex;align-items:baseline;gap:12px;
}
.marquee.muted .marquee-item small{
  font-family:var(--font-mono);font-weight:400;font-size:10.5px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--muted);
}
.marquee.muted .marquee-sep{color:var(--line);font-family:var(--font-mono);font-size:18px}
.marquee.slow .marquee-track{animation-duration:60s}

/* tighter section padding for the marquee-only "partners" section */
.section.partners-strip .section-inner{padding-bottom:24px}
.section.partners-strip .h2-row .h2{max-width:none}

/* ════════════════════════════════════════════════════════════════
   PORTFOLIO — trimmed (3 highlights + "Все проекты" CTA strip)
   ════════════════════════════════════════════════════════════════ */
.portfolio.lite{grid-template-columns:repeat(3,1fr);grid-auto-rows:auto;gap:18px}
.portfolio.lite .tile{grid-column:auto;grid-row:auto;min-height:380px}
@media (max-width:880px){.portfolio.lite{grid-template-columns:1fr}}

.cta-strip{
  margin-top:24px;padding:28px 32px;
  border:1px solid var(--line);border-radius:12px;background:var(--bg-3);
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
  position:relative;
}
.cta-strip::before{content:"";position:absolute;top:-1px;left:-1px;width:14px;height:14px;border-top:1.5px solid var(--red);border-left:1.5px solid var(--red);pointer-events:none}
.cta-strip::after{content:"";position:absolute;bottom:-1px;right:-1px;width:14px;height:14px;border-bottom:1.5px solid var(--red);border-right:1.5px solid var(--red);pointer-events:none}
.cta-strip .left{display:flex;flex-direction:column;gap:6px}
.cta-strip .left .k{font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted)}
.cta-strip .left .v{font-family:var(--font-display);font-weight:600;font-size:22px;letter-spacing:-0.015em;color:var(--fg);margin:0}
.cta-strip .all{
  display:inline-flex;align-items:center;gap:14px;
  border:1.5px solid var(--fg);color:var(--fg);
  font-family:var(--font-display);font-weight:600;font-size:15px;
  padding:16px 22px;border-radius:10px;
  transition:background .2s, color .2s, border-color .2s;
}
.cta-strip .all:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.cta-strip .all .arr{transition:transform .25s}
.cta-strip .all:hover .arr{transform:translateX(4px)}

/* === HOUSE PLAN ANIMATIONS (по брифу) === */
.plan-card .pipes path {
  animation: pipeFlow 4s linear infinite;
}
@keyframes pipeFlow {
  from { stroke-dashoffset: 200; }
  to { stroke-dashoffset: 0; }
}
.plan-card .boiler-node {
  animation: nodePulse 2s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes nodePulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
.plan-card .status-dot {
  animation: nodePulse 2s ease-in-out infinite;
}
.plan-card .room {
  transition: fill 0.3s ease;
  cursor: pointer;
}
.plan-card .room:hover {
  fill: rgba(229, 57, 53, 0.18);
}

/* === MOBILE ADAPTATIONS === */
@media (max-width: 768px){
  .hero{min-height:auto;padding:24px 0 64px}
  /* Mobile: natural DOM order (copy → plan → cta-row) */
  .hero-grid{display:flex;flex-direction:column;gap:24px}
  .hero-copy h1{font-size:clamp(36px,11vw,56px) !important;line-height:1}
  .hero-copy .lede{margin-bottom:0;font-size:15px}
  .plan-card{max-width:100%;margin:0 auto}
  .hero-cta{margin-top:8px}
  .cta-row{flex-direction:column;align-items:stretch;gap:16px}
  .btn-primary{width:100%;justify-content:space-between;padding:18px 24px}
  .section-inner{padding:64px 20px 72px !important}
  .h2{font-size:clamp(30px,9vw,48px) !important;line-height:1.05}
  .h2-row{grid-template-columns:1fr !important;gap:24px}
  .lede{font-size:15px}
  .nav ul{display:none}
  .consult{display:none}
  .burger{display:flex !important}
  .ways{grid-template-columns:1fr !important;gap:16px !important}
  .way{padding:24px !important}
  .systems{grid-template-columns:1fr !important;gap:16px !important}
  .svc{padding:20px !important}
  .portfolio{grid-template-columns:1fr !important;gap:16px !important}
  .warranty-section .grid-2{grid-template-columns:1fr !important;gap:16px !important}
  .geo{grid-template-columns:1fr !important;gap:32px !important}
  .form-side{grid-template-columns:1fr !important;gap:32px !important}
  .form-grid{grid-template-columns:1fr !important;gap:16px !important}
  .foot-inner{grid-template-columns:1fr 1fr !important;gap:24px !important}
  .foot-brand{grid-column:1 / -1}
  .title-block{flex-wrap:wrap;gap:16px !important;font-size:10px}
  .lead-modal__card{padding:32px 24px}
  .lead-modal__card h2{font-size:24px !important}
}
@media (max-width: 1100px) and (min-width: 769px){
  .hero-grid{grid-template-columns:1.1fr 0.9fr;gap:32px}
  .systems{grid-template-columns:repeat(2,1fr) !important}
  .ways{grid-template-columns:repeat(2,1fr) !important}
}
@media (max-width: 380px){
  .section-inner{padding:48px 16px 56px !important}
  .h1{font-size:36px !important}
  .h2{font-size:26px !important}
}


.portfolio.lite{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;grid-auto-rows:unset}
.portfolio.lite .tile{min-height:340px;aspect-ratio:4/5;grid-column:span 1;grid-row:span 1}
@media (max-width:980px){.portfolio.lite{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){
  .portfolio.lite{grid-template-columns:1fr;gap:14px}
  .portfolio.lite .tile{aspect-ratio:16/11;min-height:240px}
}

@media (max-width:980px){.title-block{display:none !important}}

.h2-row a.all{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px;
  border:1px solid var(--fg);
  border-radius:8px;
  font-family:var(--font-display);font-weight:600;font-size:14px;
  letter-spacing:0.02em;
  white-space:nowrap;align-self:flex-end;
  text-transform:none;
  transition:all 0.2s ease;
  text-decoration:none;
}
.h2-row a.all:hover{background:var(--fg);color:var(--bg)}
.theme-paper .h2-row a.all{border-color:var(--ink);color:var(--ink)}
.theme-paper .h2-row a.all:hover{background:var(--ink);color:var(--paper)}


/* ─── MOBILE NAV OVERLAY ─── */
.mobile-nav{position:fixed;inset:0;background:rgba(8,10,12,0.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:1000;opacity:0;pointer-events:none;transition:opacity .25s}
.mobile-nav.open{opacity:1;pointer-events:auto}
.mobile-nav__inner{height:100%;display:flex;flex-direction:column;padding:24px;max-width:520px;margin:0 auto}
.mobile-nav__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:48px}
.mobile-nav__top .brand{color:#fff;text-decoration:none;display:flex;align-items:center;gap:10px}
.mobile-nav__top .badge{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid rgba(232,72,61,.6);color:var(--red);border-radius:50%;font-family:var(--font-display);font-size:14px;font-weight:700}
.mobile-nav__top .name{font-family:var(--font-display);font-size:18px;font-weight:700;letter-spacing:-0.01em}
.mobile-nav__top .dot{color:var(--red)}
.mobile-nav__close{background:transparent;border:1px solid rgba(255,255,255,.18);color:#fff;font-size:24px;cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;line-height:1}
.mobile-nav__close:hover{border-color:var(--red);color:var(--red)}
.mobile-nav__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;flex:1}
.mobile-nav__list li{border-bottom:1px solid rgba(255,255,255,.08)}
.mobile-nav__list a{display:block;padding:18px 0;font-family:var(--font-display);font-weight:600;font-size:22px;color:#fff;text-decoration:none;letter-spacing:-0.015em;transition:color .18s,padding-left .18s}
.mobile-nav__list a:hover,.mobile-nav__list a[aria-current="page"]{color:var(--red);padding-left:8px}
.mobile-nav__contact{padding-top:24px;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;gap:18px}
.mobile-nav__phone{font-family:var(--font-mono);font-size:15px;letter-spacing:0.12em;color:#fff;text-decoration:none;text-transform:uppercase;border:1px solid rgba(255,255,255,.22);padding:14px 18px;border-radius:999px;text-align:center}
.mobile-nav__phone:hover{border-color:var(--red);color:var(--red)}
.mobile-nav__social{display:flex;gap:10px;justify-content:center}
.mobile-nav__social a{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.18);border-radius:999px;transition:color .18s,border-color .18s}
.mobile-nav__social a:hover{color:var(--red);border-color:var(--red)}
body.nav-open{overflow:hidden}

/* ─── PARTNERS H2 — restrict max-width so it doesn't crash into right text ─── */
.section.partners-strip .h2-row .h2{max-width:12ch}
@media (min-width:1100px){.section.partners-strip .h2-row .h2{max-width:11ch}}

/* ─── PROJECT PAGE: back link more visible ─── */
.proj-back{padding:10px 16px;border:1px solid rgba(255,255,255,.32);border-radius:999px;background:rgba(0,0,0,.32);backdrop-filter:blur(4px);color:#fff !important}
.proj-back:hover{border-color:var(--red);background:rgba(232,72,61,.12);color:var(--red) !important}

/* ─── CTA red block: tidy alignment on wide ─── */
@media (min-width:1100px){
  .warranty-section .warranty-grid{grid-template-columns:1fr 1fr;gap:80px;align-items:start}
  .warranty-section .warranty-grid .h2{font-size:clamp(36px,4.4vw,60px) !important}
  .warranty-section .right .cell{padding-top:8px}
}

/* ─── PROJ list intro fix ─── */
.proj-intro-text{max-width:60ch;color:var(--fg-soft);font-size:16px;line-height:1.6;margin:24px 0 0}

/* ─── CTA BAND — single centered column (everywhere except #warranty on main) ─── */
.warranty-section:not(#warranty) .warranty-grid{display:flex !important;flex-direction:column;align-items:center;text-align:center;max-width:760px;margin:0 auto;gap:28px !important}
.warranty-section:not(#warranty) .warranty-grid .left,
.warranty-section:not(#warranty) .warranty-grid .right{width:100%;display:flex;flex-direction:column;align-items:center;gap:18px}
.warranty-section:not(#warranty) .warranty-grid .right .cell{width:100%;max-width:520px;padding:0;background:transparent;border:0}
.warranty-section:not(#warranty) .warranty-grid .h2{max-width:24ch;margin:0 auto !important;font-size:clamp(32px,4.5vw,56px) !important;color:#fff}
.warranty-section:not(#warranty) .warranty-grid .lede{max-width:54ch;margin:0 auto !important;color:rgba(255,255,255,.9)}
.warranty-section:not(#warranty) .warranty-grid .right .cell h3{text-align:center;color:#fff;margin:8px 0 4px !important}
.warranty-section:not(#warranty) .warranty-grid .right .cell p{text-align:center;max-width:none;color:rgba(255,255,255,.8);margin:0}

/* ─── CTA button on red background — make it pop ─── */
.warranty-section .btn-primary{
  background:#fff !important;
  color:var(--ink, #14171a) !important;
  padding:22px 32px !important;
  font-size:17px !important;
  font-weight:700 !important;
  letter-spacing:-0.01em;
  border:1px solid #fff;
  box-shadow:0 8px 24px rgba(0,0,0,0.18), 0 2px 0 rgba(0,0,0,0.08);
  transition:transform .18s ease, box-shadow .25s ease, background .18s, color .18s;
}
.warranty-section .btn-primary:hover{
  background:var(--ink, #14171a) !important;
  color:#fff !important;
  border-color:var(--ink, #14171a);
  transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(0,0,0,0.28), 0 2px 0 rgba(0,0,0,0.12);
}
.warranty-section .btn-primary:active{transform:translateY(0)}
.warranty-section .btn-primary .arr{color:var(--red);font-size:18px;font-weight:600}
.warranty-section .btn-primary:hover .arr{color:#fff;transform:translateX(6px)}

/* ─── A11Y: minimum tap targets on mobile (44×44 per WCAG/Apple HIG) ─── */
@media (max-width: 768px){
  /* Nav links, footer links, content links — pad them out */
  .nav-soc, .mobile-nav__close{min-width:44px;min-height:44px}
  .burger{min-width:44px;min-height:44px}
  .nav-cta{min-height:44px;display:inline-flex;align-items:center}
  .foot-inner ul a{display:inline-block;padding:6px 0;min-height:32px;line-height:1.4}
  .mobile-nav__list a{min-height:44px;padding:14px 0}
  .mobile-nav__social a{min-width:44px;min-height:44px}
  .proj-back{min-height:44px;display:inline-flex;align-items:center}
  /* CTA buttons already big enough */
}