/* ============================================================
   ENDLESS SIDING — Design System v2
   Modern institutional · creative motion
   Type: Bricolage Grotesque (display) / Archivo (body)
   ============================================================ */

:root{
  --ink:      #0C1526;   /* near-black navy */
  --navy:     #13223F;
  --navy-2:   #1B3158;
  --blue-mist:#E8EDF5;
  --paper:    #FFFFFF;
  --cloud:    #F5F6F8;
  --stone:    #97A0AF;
  --line:     #E3E6EC;
  --line-dark:#26365A;
  --accent:   #F26B1D;   /* tangerine */
  --accent-2: #FF8A4C;
  --ok:       #2FA36B;

  --font-d: "Bricolage Grotesque", "Arial Black", sans-serif;
  --font-b: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --w: 1320px;
  --gut: clamp(20px, 4vw, 56px);
  --r: 16px;
  --r-sm: 10px;
  --ease: cubic-bezier(.65,.05,0,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{
  scroll-behavior:smooth;
  /* Canvas colour: with html transparent the white body background propagates
     to the canvas and shows as a white band when the page is over-scrolled
     past the dark hero. Painting html dark covers both ends. */
  background:var(--ink);
  /* Kills the elastic bounce at the top/bottom of the document.
     Trade-off: also disables pull-to-refresh on Android Chrome. */
  overscroll-behavior-y:none;
}
body{overscroll-behavior-y:none}
body{
  font-family:var(--font-b);
  color:var(--ink);
  background:var(--paper);
  font-size:16.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;cursor:pointer;border:none;background:none}
::selection{background:var(--accent);color:#fff}

.wrap{max-width:var(--w);margin-inline:auto;padding-inline:var(--gut)}
/* viewport-fit=cover lets the page reach the screen edges; keep content clear
   of the notch / Dynamic Island when the phone is in landscape */
@supports (padding:max(0px)){
  .wrap{padding-left:max(var(--gut), env(safe-area-inset-left));padding-right:max(var(--gut), env(safe-area-inset-right))}
}

/* ---------------- Typography ---------------- */
.d1,.d2,.d3{
  font-family:var(--font-d);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.02;
  color:var(--ink);
}
.d1{font-size:clamp(46px,6.6vw,96px)}
.d2{font-size:clamp(34px,4.4vw,62px)}
.d3{font-size:clamp(24px,2.6vw,34px);line-height:1.12}
.on-dark .d1,.on-dark .d2,.on-dark .d3{color:#fff}
.d-accent{color:var(--accent)}
.d-soft{color:var(--stone)}

.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-size:13px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);
  margin-bottom:22px;
}
.kicker i{
  width:8px;height:8px;border-radius:50%;
  background:var(--accent);
  font-style:normal;
  flex:none;
}
/* Dark surfaces. The component selectors are a safety net: these blocks have a
   dark background of their own, so a kicker inside one must stay legible even
   if the .on-dark class is ever dropped from the markup. */
.on-dark .kicker,
.fin .kicker,
.gs-band .kicker,
.stack-card .kicker,
.cta-band .kicker,
.page-hero .kicker,
.section--dark .kicker{color:#B9C4DC}

.lede{
  font-size:clamp(16.5px,1.3vw,19px);
  color:#46506233;
  color:#465062;
  max-width:60ch;
}
.on-dark .lede{color:#AFBBD3}

/* ---------------- Buttons ---------------- */
.btn{
  position:relative;
  display:inline-flex;align-items:center;gap:12px;
  font-weight:600;font-size:15.5px;
  padding:16px 30px;
  border-radius:999px;
  transition:transform .3s var(--ease), background .3s, color .3s, border-color .3s, box-shadow .3s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn .ar{
  display:inline-flex;width:22px;height:22px;border-radius:50%;
  align-items:center;justify-content:center;
  font-size:12px;line-height:1;
  transition:transform .3s var(--ease);
}
.btn:hover .ar{transform:translateX(4px)}
.btn--accent{background:var(--accent);color:#fff;box-shadow:0 10px 30px -12px rgba(242,107,29,.7)}
.btn--accent:hover{background:#E05B10}
.btn--accent .ar{background:rgba(255,255,255,.22)}
.btn--ink{background:var(--ink);color:#fff}
.btn--ink:hover{background:var(--navy-2)}
.btn--ink .ar{background:rgba(255,255,255,.15)}
.btn--line{border:1.5px solid var(--line);color:var(--ink);background:#fff}
.btn--line:hover{border-color:var(--ink)}
.btn--line .ar{background:var(--cloud)}
.btn--glass{
  background:rgba(255,255,255,.12);color:#fff;
  border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(8px);
}
.btn--glass:hover{background:rgba(255,255,255,.22)}
.btn--glass .ar{background:rgba(255,255,255,.18)}
.btn--lg{padding:19px 38px;font-size:16.5px}

/* ---------------- Header ---------------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .35s, box-shadow .35s, transform .35s;
}
.site-header .wrap{
  display:flex;align-items:center;gap:34px;
  height:88px;
  transition:height .35s;
}
.brand img{height:46px;width:auto;transition:.3s}
.brand .logo-dark{display:none}
.site-header.solid{background:rgba(255,255,255,.92);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.site-header.solid .wrap{height:72px}
.site-header.solid .brand .logo-light{display:none}
.site-header.solid .brand .logo-dark{display:block}

.nav{display:flex;align-items:center;gap:6px;margin-left:auto}
.nav > a, .nav .has-sub > a{
  position:relative;
  display:flex;align-items:center;
  font-size:15px;font-weight:500;line-height:1;
  color:#E6EBF5;
  padding:11px 14px;border-radius:999px;
  transition:color .2s, background .2s;
}
.nav .has-sub{display:flex;align-items:center}
.site-header.solid .nav > a,
.site-header.solid .nav .has-sub > a{color:#3A4457}
.nav > a:hover,.nav .has-sub > a:hover{background:rgba(255,255,255,.12)}
.site-header.solid .nav > a:hover,
.site-header.solid .nav .has-sub > a:hover{background:var(--cloud);color:var(--ink)}
.nav > a.is-active{color:#fff;background:rgba(255,255,255,.14)}
.site-header.solid .nav > a.is-active{color:var(--ink);background:var(--cloud)}

.has-sub{position:relative}
.sub{
  position:absolute;top:calc(100% + 10px);left:0;
  min-width:250px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 24px 60px -20px rgba(12,21,38,.25);
  padding:8px;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:.25s var(--ease);
}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:none}
.sub a{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;border-radius:10px;
  font-size:15px;font-weight:500;color:#3A4457;
}
.sub a:hover{background:var(--cloud);color:var(--ink)}
.sub a span{color:var(--accent);font-size:12px}

.header-cta{display:flex;align-items:center;gap:10px;margin-left:6px}
.header-phone{
  display:flex;align-items:center;gap:9px;
  font-weight:600;font-size:15px;color:#fff;
  padding:10px 16px;border-radius:999px;
  border:1px solid rgba(255,255,255,.3);
  transition:.25s;
}
.header-phone:hover{background:rgba(255,255,255,.12)}
.site-header.solid .header-phone{color:var(--ink);border-color:var(--line)}
.site-header.solid .header-phone:hover{background:var(--cloud)}
.header-cta .btn{padding:12px 22px;font-size:14.5px}

.burger{
  display:none;margin-left:auto;
  width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.14);backdrop-filter:blur(6px);
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.burger span{width:20px;height:2px;background:#fff;border-radius:2px;transition:.2s}
.site-header.solid .burger{background:var(--cloud)}
.site-header.solid .burger span{background:var(--ink)}

@media (max-width:1180px){
  .nav,.header-phone{display:none}
  .burger{display:flex}
}
@media (max-width:560px){
  .header-cta .btn{display:none}
}

/* ---------------- Overlay menu ---------------- */
.menu-overlay{
  position:fixed;inset:0;z-index:140;
  background:var(--ink);
  color:#fff;
  display:flex;flex-direction:column;
  padding:26px var(--gut) 40px;
  clip-path:circle(0% at calc(100% - 60px) 60px);
  transition:clip-path .7s var(--ease);
  overflow:auto;
}
.menu-overlay.open{clip-path:circle(150% at calc(100% - 60px) 60px)}
.mo-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8vh}
.mo-top img{height:44px}
.mo-close{
  width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.1);color:#fff;font-size:22px;
}
.menu-overlay nav{display:flex;flex-direction:column;gap:2px;max-width:640px}
.menu-overlay nav > a{
  font-family:var(--font-d);
  font-size:clamp(34px,6vh,52px);font-weight:700;letter-spacing:-.02em;
  padding:8px 0;
  display:flex;align-items:baseline;gap:16px;
  opacity:0;transform:translateY(24px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), color .2s;
}
.menu-overlay.open nav > a{opacity:1;transform:none}
.menu-overlay nav > a:hover{color:var(--accent-2)}
.menu-overlay nav > a small{
  font-family:var(--font-b);font-size:13px;font-weight:600;color:var(--accent);
  letter-spacing:.1em;
}
.mo-foot{
  margin-top:auto;padding-top:5vh;
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  color:#8FA0C4;font-size:14px;
}

/* ---------------- Hero ---------------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  color:#fff;
  overflow:hidden;
  background:var(--ink);
}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-bg img{
  width:100%;height:112%;object-fit:cover;
  transform-origin:center;
  animation:kenburns 18s ease-out forwards;
}
@keyframes kenburns{from{transform:scale(1.12)}to{transform:scale(1)}}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to top, rgba(9,15,28,.92) 0%, rgba(9,15,28,.35) 45%, rgba(9,15,28,.25) 100%),
    linear-gradient(105deg, rgba(9,15,28,.85) 0%, rgba(9,15,28,0) 55%);
}
.hero-inner{
  position:relative;z-index:2;
  width:100%;max-width:var(--w);margin-inline:auto;
  padding:150px var(--gut) 0;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(8px);
  border-radius:999px;
  padding:9px 18px 9px 10px;
  font-size:13.5px;font-weight:500;color:#DCE4F2;
  margin-bottom:30px;
}
.hero-badge b{
  background:var(--accent);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;
}
.hero h1{
  font-family:var(--font-d);
  font-weight:750;
  font-size:clamp(44px,7vw,104px);
  line-height:.99;letter-spacing:-.025em;
  max-width:12ch;
  margin-bottom:28px;
}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .line > span{display:block}
.hero .lede{color:#C3CDE0;max-width:52ch;margin-bottom:38px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:60px}

.hero-foot{
  position:relative;z-index:2;
  border-top:1px solid rgba(255,255,255,.16);
  background:rgba(9,15,28,.35);
  backdrop-filter:blur(10px);
}
.hero-foot .wrap{
  display:flex;align-items:center;gap:clamp(20px,4vw,56px);
  padding-top:20px;padding-bottom:20px;
}
.hf-item{display:flex;align-items:center;gap:13px;white-space:nowrap}
.hf-item svg{
  width:34px;height:34px;flex:none;
  padding:7px;border-radius:50%;
  background:rgba(242,107,29,.16);color:var(--accent-2);
}
.hf-item b{display:block;font-size:14.5px;font-weight:600;color:#fff;line-height:1.3}
.hf-item span{display:block;font-size:12.5px;color:#8FA0C4;line-height:1.3}
.hf-sep{width:1px;height:34px;background:rgba(255,255,255,.16);flex:none}
.hf-brands{margin-left:auto;display:flex;align-items:center;gap:18px;color:#8FA0C4;font-size:13px;white-space:nowrap}
.hf-brands b{color:#DCE4F2;font-weight:600}
@media (max-width:1180px){.hf-brands{display:none}}
@media (max-width:900px){
  .hero-foot .wrap{flex-wrap:wrap;gap:14px 26px}
  .hf-sep{display:none}
  .hf-item span{display:none}
}

.scroll-hint{
  position:absolute;right:var(--gut);bottom:110px;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  color:#B9C4DC;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  writing-mode:vertical-rl;
}
.scroll-hint::after{
  content:"";width:1px;height:54px;
  background:linear-gradient(to bottom,#fff,transparent);
  animation:drip 2s ease-in-out infinite;
}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:900px){.scroll-hint{display:none}}

/* ---------------- Sections ---------------- */
.section{padding-block:clamp(80px,10vw,140px)}
.section--half{padding-block:clamp(56px,7vw,90px)}
.section--dark{background:var(--ink);color:#fff}
.section--cloud{background:var(--cloud)}
.sec-head{max-width:880px;margin-bottom:clamp(40px,5vw,70px)}
.sec-head .lede{margin-top:18px}
.sec-head--split{
  display:flex;align-items:flex-end;justify-content:space-between;gap:32px;
  max-width:none;
}
.sec-head--split .lede{margin-top:14px}
@media (max-width:820px){.sec-head--split{flex-direction:column;align-items:flex-start}}

/* ---------------- Manifesto (word fill) ---------------- */
.manifesto{
  font-family:var(--font-d);
  font-weight:650;
  font-size:clamp(26px,3.1vw,46px);
  line-height:1.18;letter-spacing:-.015em;
  max-width:20ch;
}
.manifesto .w{color:#C9CFDA;transition:color .35s linear}
.manifesto .w.lit{color:var(--ink)}
.manifesto .w.accent.lit{color:var(--accent)}

.mf-grid{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(34px,5vw,80px);
  align-items:start;
}
@media (max-width:940px){.mf-grid{grid-template-columns:1fr}}

/* founders signature */
.mf-sign{
  display:flex;align-items:center;gap:16px;
  margin-top:clamp(30px,4vw,46px);
  padding-top:26px;
  border-top:1px solid var(--line);
}
.mf-faces{display:flex}
.mf-faces img{
  width:52px;height:52px;border-radius:50%;object-fit:cover;
  border:3px solid var(--paper);
}
.mf-faces img:last-child{margin-left:-18px}
.mf-sign-txt b{display:block;font-size:15px;font-weight:600;line-height:1.3}
.mf-sign-txt span{display:block;font-size:13px;color:var(--stone)}

/* media column */
.mf-media{position:relative;display:flex;flex-direction:column}
.mf-img{
  border-radius:calc(var(--r) + 8px);overflow:hidden;
  aspect-ratio:4/3.2;
}
.mf-img img{width:100%;height:100%;object-fit:cover}
.mf-note{
  position:relative;z-index:2;
  margin:-52px 0 0 auto;
  width:min(100%,340px);
  background:var(--ink);color:#B7C2DA;
  border-radius:var(--r);
  padding:22px 24px;
  box-shadow:0 30px 60px -30px rgba(12,21,38,.55);
}
.mf-note-k{
  display:block;
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-2);margin-bottom:8px;
}
.mf-note p{font-size:14.5px;line-height:1.55}
@media (max-width:940px){
  .mf-note{margin-right:0;margin-left:auto;width:min(100%,420px)}
}

/* pillars */
.mf-pillars{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,44px);
  margin-top:clamp(48px,6vw,86px);
  padding-top:clamp(30px,3.5vw,46px);
  border-top:1px solid var(--line);
}
@media (max-width:860px){.mf-pillars{grid-template-columns:1fr;gap:28px}}
.mf-pillar span{
  display:block;
  font-family:var(--font-d);font-weight:700;font-size:14px;
  color:var(--accent);letter-spacing:.06em;
  margin-bottom:12px;
}
.mf-pillar h4{
  font-family:var(--font-d);font-weight:700;
  font-size:clamp(19px,1.7vw,23px);letter-spacing:-.01em;
  margin-bottom:9px;
}
.mf-pillar p{font-size:15px;color:#5A6478;max-width:38ch}

/* ---------------- Service stack ---------------- */
.stack{display:flex;flex-direction:column;gap:26px}
.stack-card{
  position:sticky;
  border-radius:calc(var(--r) + 8px);
  overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  min-height:440px;
  background:var(--navy);
  color:#fff;
  box-shadow:0 -20px 60px -30px rgba(12,21,38,.4);
}
.stack-card:nth-child(2){background:#18294B}
.stack-card:nth-child(3){background:#1E3158}
.stack-card:nth-child(4){background:#243A66}
.sc-body{
  padding:clamp(30px,4vw,60px);
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  position:relative;
}
.sc-num{
  font-family:var(--font-d);font-weight:700;
  font-size:15px;color:var(--accent-2);
  letter-spacing:.06em;
  margin-bottom:18px;
  display:flex;align-items:center;gap:12px;
}
.sc-num::after{content:"";width:44px;height:1px;background:rgba(255,255,255,.25)}
.sc-body h3{
  font-family:var(--font-d);font-weight:700;
  font-size:clamp(28px,3vw,44px);letter-spacing:-.02em;line-height:1.04;
  margin-bottom:16px;
}
.sc-body p{color:#B7C2DA;max-width:46ch;margin-bottom:26px;font-size:15.5px}
.sc-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px}
.sc-tags span{
  font-size:12.5px;font-weight:500;color:#D5DDEE;
  border:1px solid rgba(255,255,255,.22);
  padding:6px 13px;border-radius:999px;
}
.sc-media{position:relative;overflow:hidden;min-height:280px}
.sc-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.stack-card:hover .sc-media img{transform:scale(1.05)}
.sc-media::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to right, rgba(19,34,63,.55), transparent 45%);
}
@media (max-width:880px){
  .stack-card{grid-template-columns:1fr}
  .sc-media{order:-1;min-height:210px}
  .sc-media::before{background:linear-gradient(to top, rgba(19,34,63,.6), transparent 60%)}
}

/* ---------------- Compare slider ---------------- */
.compare{
  position:relative;border-radius:calc(var(--r) + 8px);overflow:hidden;
  aspect-ratio:16/8.5;
  background:var(--ink);
  cursor:ew-resize;
  /* touch-action keeps a horizontal drag from being stolen by page scroll;
     user-select stops the drag from painting a text selection over the images */
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  -ms-user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.compare ::selection{background:transparent}
.compare ::-moz-selection{background:transparent}
/* while dragging, suppress selection across the whole page */
body.is-comparing{
  user-select:none;-webkit-user-select:none;
  cursor:ew-resize;
}
@media (max-width:720px){.compare{aspect-ratio:4/3.4}}
.compare img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  pointer-events:none;
  -webkit-user-drag:none;
  user-select:none;-webkit-user-select:none;
}
.compare .after-wrap{
  position:absolute;inset:0;
  clip-path:inset(0 0 0 50%);
  will-change:clip-path;
}
.compare-handle{
  position:absolute;top:0;bottom:0;left:50%;z-index:5;
  width:2px;background:#fff;
  cursor:ew-resize;
  transform:translateX(-1px);
}
/* widened invisible grab strip so the handle is easy to catch */
.compare-handle::before{
  content:"";position:absolute;top:0;bottom:0;left:-22px;right:-22px;
}
.compare-handle::after{
  content:"◂ ▸";
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;
  background:#fff;color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;letter-spacing:1px;
  box-shadow:0 8px 30px rgba(12,21,38,.35);
  transition:transform .18s var(--ease), box-shadow .18s;
}
.compare:hover .compare-handle::after{transform:translate(-50%,-50%) scale(1.06)}
.compare.is-dragging .compare-handle::after{
  transform:translate(-50%,-50%) scale(.94);
  box-shadow:0 4px 16px rgba(12,21,38,.45);
}
.compare-handle:focus-visible{outline:none}
.compare:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.compare-hint{
  position:absolute;left:50%;bottom:18px;z-index:6;
  transform:translateX(-50%);
  background:rgba(9,15,28,.7);backdrop-filter:blur(6px);
  color:#fff;border-radius:999px;padding:8px 16px;
  font-size:12.5px;font-weight:500;white-space:nowrap;
  pointer-events:none;
  transition:opacity .3s;
}
.compare.is-dragging .compare-hint{opacity:0}
@media (max-width:600px){.compare-hint{display:none}}
.compare .tag{
  position:absolute;bottom:18px;z-index:4;
  font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(9,15,28,.65);backdrop-filter:blur(6px);
  color:#fff;padding:8px 16px;border-radius:999px;
  pointer-events:none;
}
.compare .tag--a{left:18px}
.compare .tag--b{right:18px}

/* ---------------- Stats ---------------- */
.stats-row{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,2.5vw,28px);
}
@media (max-width:860px){.stats-row{grid-template-columns:repeat(2,1fr)}}
.stat-card{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r);
  padding:clamp(24px,3vw,38px) clamp(20px,2.5vw,32px);
  position:relative;overflow:hidden;
}
.stat-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent),transparent 70%);
}
.stat-card b{
  display:block;
  font-family:var(--font-d);font-weight:750;
  font-size:clamp(40px,4.6vw,64px);line-height:1;color:#fff;
  letter-spacing:-.02em;
}
.stat-card b sup{font-size:.5em;color:var(--accent-2);top:-.5em}
.stat-card span{display:block;margin-top:10px;font-size:14px;color:#93A2C2}

/* ---------------- Difference grid ---------------- */
.diff-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2vw,24px);
}
@media (max-width:960px){.diff-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.diff-grid{grid-template-columns:1fr}}
.diff-card{
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.1);
  border-radius:calc(var(--r) + 4px);
  padding:clamp(24px,2.6vw,34px);
  transition:background .3s, border-color .3s, transform .3s;
}
.diff-card:hover{background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.2);transform:translateY(-4px)}
.diff-card svg{
  width:42px;height:42px;padding:10px;
  border-radius:12px;
  background:rgba(242,107,29,.16);color:var(--accent-2);
  margin-bottom:20px;
}
.diff-card h4{
  font-family:var(--font-d);font-weight:700;
  font-size:clamp(19px,1.7vw,22px);letter-spacing:-.01em;line-height:1.2;
  color:#fff;margin-bottom:10px;
}
.diff-card p{font-size:14.5px;color:#93A2C2;line-height:1.6}
.diff-card--cta{
  background:linear-gradient(150deg,#1B3158,#13223F);
  border-color:rgba(242,107,29,.35);
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
}
.diff-card--cta h4{font-size:clamp(21px,2vw,26px)}
.diff-card--cta p{margin-bottom:22px}

/* ---------------- Horizontal projects ---------------- */
.hproj{position:relative;overflow:hidden}
.hproj-track{
  display:flex;gap:clamp(16px,2vw,28px);
  padding-inline:var(--gut);
  will-change:transform;
}
.hp-card{
  position:relative;flex:none;
  width:clamp(300px,38vw,520px);
  border-radius:calc(var(--r) + 6px);
  overflow:hidden;
  aspect-ratio:4/4.6;
  background:var(--navy);
}
.hp-card img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease);
}
.hp-card:hover img{transform:scale(1.06)}
.hp-card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top, rgba(9,15,28,.8) 0%, transparent 45%);
  /* purely decorative: without this it sits above the card's static content
     and swallows every click on the tile */
  pointer-events:none;
}
.hp-meta{
  position:absolute;left:22px;right:22px;bottom:20px;z-index:2;color:#fff;
}
.hp-meta small{
  display:inline-block;
  font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-2);margin-bottom:6px;
}
.hp-meta h4{font-family:var(--font-d);font-size:22px;font-weight:700;letter-spacing:-.01em;line-height:1.1}
.hp-cta{
  display:flex;align-items:center;justify-content:center;text-align:center;
  background:var(--cloud);
}
/* the CTA tile has no photo, so it must not inherit the darkening gradient */
.hp-cta::after{content:none}
.hp-cta a{
  /* fill the whole card: sized to content it covered only ~6% of the tile,
     so clicks anywhere else in the card did nothing */
  display:flex;flex-direction:column;gap:10px;
  align-items:center;justify-content:center;
  width:100%;height:100%;
  position:relative;z-index:3;
  font-family:var(--font-d);font-weight:700;font-size:22px;color:var(--ink);
  transition:background .25s;
}
.hp-cta a:hover{background:#ECEEF2}
.hp-cta a i{
  font-style:normal;
  width:56px;height:56px;border-radius:50%;
  background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:20px;
  transition:transform .3s var(--ease);
}
.hp-cta a:hover i{transform:translateX(6px)}

/* ---------------- Works gallery ---------------- */
.works-filter{
  display:flex;gap:10px;flex-wrap:wrap;
  margin-bottom:clamp(26px,3vw,40px);
}
.wf-btn{
  font-weight:600;font-size:14.5px;
  padding:11px 22px;border-radius:999px;
  border:1.5px solid var(--line);color:#5A6478;background:#fff;
  transition:.25s;
}
.wf-btn:hover{border-color:var(--ink);color:var(--ink)}
.wf-btn.active{background:var(--ink);border-color:var(--ink);color:#fff}
.works-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,1.4vw,18px);
}
.work{
  position:relative;overflow:hidden;
  aspect-ratio:1/1;
  border-radius:var(--r);
  background:var(--navy);
}
.work img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease);
}
.work:hover img{transform:scale(1.05)}
.work figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:40px 16px 14px;
  background:linear-gradient(to top, rgba(9,15,28,.85), transparent);
  color:#fff;
  opacity:0;transform:translateY(8px);
  transition:.35s var(--ease);
}
.work:hover figcaption{opacity:1;transform:none}
.work figcaption small{
  display:block;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-2);margin-bottom:3px;
}
.work figcaption h4{font-family:var(--font-d);font-size:16px;font-weight:700;letter-spacing:-.01em}
@media (max-width:860px){
  .works-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  /* captions are hover-only; on touch they never show, so keep tiles clean */
  .work figcaption{display:none}
}

/* ---------------- Materials tabs ---------------- */
.mat{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,4vw,70px);align-items:center}
@media (max-width:900px){.mat{grid-template-columns:1fr}}
.mat-tabs{display:flex;flex-direction:column}
.mat-tab{
  text-align:left;
  padding:22px 6px;
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:18px;
  transition:padding .3s var(--ease);
}
.mat-tab:first-child{border-top:1px solid var(--line)}
.mat-tab .mt-dot{
  width:10px;height:10px;border-radius:50%;
  border:2px solid var(--stone);
  flex:none;transition:.3s;
}
.mat-tab h4{
  font-family:var(--font-d);font-weight:700;font-size:clamp(20px,2vw,27px);
  letter-spacing:-.01em;color:var(--stone);transition:color .3s;
}
.mat-tab p{
  display:none;
  font-size:15px;color:#465062;max-width:52ch;margin-top:6px;
}
.mat-tab.active{padding-left:14px}
.mat-tab.active .mt-dot{background:var(--accent);border-color:var(--accent)}
.mat-tab.active h4{color:var(--ink)}
.mat-tab.active p{display:block}
.mat-stage{
  position:relative;border-radius:calc(var(--r) + 8px);overflow:hidden;
  aspect-ratio:4/3.1;
  background:var(--cloud);
}
.mat-stage img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.04);
  transition:opacity .6s var(--ease), transform .8s var(--ease);
}
.mat-stage img.show{opacity:1;transform:none}
.mat-stage .ms-label{
  position:absolute;left:18px;bottom:18px;z-index:2;
  background:rgba(255,255,255,.9);backdrop-filter:blur(6px);
  border-radius:999px;padding:9px 18px;
  font-size:13px;font-weight:600;color:var(--ink);
}

/* ---------------- Process timeline ---------------- */
.timeline{position:relative;margin-top:10px}
.tl-bar{
  position:absolute;left:0;right:0;top:26px;height:2px;
  background:var(--line);
}
.tl-bar i{
  display:block;height:100%;width:0%;
  background:var(--accent);
  transition:none;
}
.tl-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,2vw,26px);
}
.tl-step{position:relative;padding-top:58px}
.tl-step::before{
  content:attr(data-n);
  position:absolute;top:0;left:0;
  width:52px;height:52px;border-radius:50%;
  background:#fff;border:1.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-d);font-weight:700;font-size:17px;color:var(--stone);
  transition:.4s;
}
.tl-step.done::before{
  background:var(--ink);border-color:var(--ink);color:#fff;
}
.tl-step h4{
  font-family:var(--font-d);font-weight:700;font-size:19px;letter-spacing:-.01em;
  margin-bottom:8px;
}
.tl-step p{font-size:14.5px;color:#5A6478}
@media (max-width:900px){
  .tl-bar{display:none}
  .tl-grid{grid-template-columns:1fr 1fr}
  .tl-step{padding-top:0;padding-left:66px;min-height:52px}
}
@media (max-width:540px){.tl-grid{grid-template-columns:1fr}}

/* ---------------- Financing ---------------- */
.fin{
  position:relative;
  border-radius:calc(var(--r) + 10px);
  overflow:hidden;
  background:linear-gradient(120deg,#0F1D38 0%, #14294E 55%, #1C3A6E 100%);
  color:#fff;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
}
.fin-body{padding:clamp(34px,4.5vw,70px);position:relative;z-index:2}
.fin-body .lede{color:#AFBBD3;margin:16px 0 30px}
.fin-perks{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.fin-perks span{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14px;font-weight:500;color:#D5DDEE;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;padding:9px 16px;
}
.fin-perks b{color:var(--accent-2)}
.fin-media{position:relative;min-height:300px}
.fin-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fin-media::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to right, #0F1D38 2%, rgba(15,29,56,0) 50%);
}
@media (max-width:860px){
  .fin{grid-template-columns:1fr}
  .fin-media{min-height:220px;order:-1}
  .fin-media::before{background:linear-gradient(to top,#0F1D38 4%,rgba(15,29,56,0) 60%)}
}

/* ---------------- GreenSky financing partner ---------------- */
:root{
  --gs-green:#00A94F;
  --gs-light:#6CC24A;
  --gs-deep:#0A4F2C;
}

/* GreenSky wordmark — typographic stand-in.
   Replace .gs-mark markup with the official logo asset from the
   GreenSky merchant portal before go-live. */
.gs-mark{
  display:inline-flex;align-items:baseline;
  font-family:var(--font-d);font-weight:700;
  letter-spacing:-.02em;line-height:1;
  font-size:clamp(30px,3.4vw,44px);
  color:#fff;
}
.gs-mark .gs-green{color:var(--gs-light)}
.gs-mark sup{font-size:.34em;margin-left:.12em;font-weight:600;opacity:.85}
.gs-mark--onlight{color:var(--gs-deep)}
.gs-mark--onlight .gs-green{color:var(--gs-green)}

.gs-band{
  position:relative;overflow:hidden;
  border-radius:calc(var(--r) + 10px);
  background:linear-gradient(125deg,#0A4F2C 0%, #0C6B3A 48%, #00A94F 100%);
  color:#fff;
  padding:clamp(32px,4.5vw,64px);
}
.gs-band::after{
  content:"";position:absolute;right:-90px;top:-90px;
  width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle, rgba(108,194,74,.42), transparent 68%);
  pointer-events:none;
}
.gs-band-top{
  display:flex;align-items:center;flex-wrap:wrap;gap:18px 26px;
  padding-bottom:26px;margin-bottom:28px;
  border-bottom:1px solid rgba(255,255,255,.22);
  position:relative;z-index:2;
}
.gs-tagline{
  display:flex;flex-direction:column;gap:3px;
  padding-left:26px;margin-left:2px;
  border-left:1px solid rgba(255,255,255,.28);
}
.gs-tagline b{font-size:15px;font-weight:600}
.gs-tagline span{font-size:13.5px;color:rgba(255,255,255,.7)}
.gs-badge{
  margin-left:auto;
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.3);
  border-radius:999px;padding:9px 18px;
  font-size:13.5px;font-weight:600;
}
.gs-badge i{width:8px;height:8px;border-radius:50%;background:var(--gs-light);font-style:normal}
.gs-perks{
  position:relative;z-index:2;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(18px,2.4vw,34px);
}
@media (max-width:900px){.gs-perks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.gs-perks{grid-template-columns:1fr}}
.gs-perk svg{
  width:38px;height:38px;padding:9px;border-radius:11px;
  background:rgba(255,255,255,.16);color:#fff;margin-bottom:14px;
}
.gs-perk b{display:block;font-size:15.5px;font-weight:600;margin-bottom:5px}
.gs-perk p{font-size:13.5px;color:rgba(255,255,255,.72);line-height:1.55}
@media (max-width:900px){.gs-badge{margin-left:0}}

/* GreenSky-flavored plan cards */
.gs-plan{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-top:4px solid var(--gs-green);
  border-radius:calc(var(--r) + 4px);
  padding:clamp(28px,3.5vw,46px);
  display:flex;flex-direction:column;
  transition:box-shadow .3s, transform .3s;
}
.gs-plan:hover{transform:translateY(-4px);box-shadow:0 30px 60px -32px rgba(10,79,44,.35)}
.gs-plan-tag{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  background:rgba(0,169,79,.1);color:var(--gs-deep);
  border-radius:999px;padding:7px 15px;
  font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  margin-bottom:18px;
}
.gs-plan h4{
  font-family:var(--font-d);font-weight:700;
  font-size:clamp(23px,2.3vw,31px);letter-spacing:-.015em;line-height:1.12;
  margin-bottom:12px;
}
.gs-plan h4 em{font-style:normal;color:var(--gs-green)}
.gs-plan > p{font-size:15px;color:#5A6478;margin-bottom:24px}
.gs-plan .btn--gs{
  background:var(--gs-green);color:#fff;align-self:flex-start;
  box-shadow:0 10px 30px -14px rgba(0,169,79,.8);
}
.gs-plan .btn--gs:hover{background:#00913F}
.gs-plan .btn--gs .ar{background:rgba(255,255,255,.22)}
.gs-fine{
  font-size:11.5px;color:#97A0AF;line-height:1.55;
  margin-top:auto;padding-top:20px;
  border-top:1px solid var(--line);
}

/* ---------------- Team ---------------- */
.team{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,32px)}
@media (max-width:760px){.team{grid-template-columns:1fr}}
.tm-card{
  display:grid;grid-template-columns:170px 1fr;
  background:#fff;border:1px solid var(--line);border-radius:calc(var(--r) + 4px);
  overflow:hidden;
  transition:box-shadow .3s, transform .3s;
}
.tm-card:hover{box-shadow:0 30px 60px -30px rgba(12,21,38,.25);transform:translateY(-4px)}
.tm-card img{width:100%;height:100%;object-fit:cover}
.tm-body{padding:24px 26px;display:flex;flex-direction:column;justify-content:center}
.tm-body h4{font-family:var(--font-d);font-weight:700;font-size:23px;letter-spacing:-.01em}
.tm-body small{
  display:block;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);margin:6px 0 10px;
}
.tm-body p{font-size:14.5px;color:#5A6478}
@media (max-width:480px){.tm-card{grid-template-columns:1fr}.tm-card img{aspect-ratio:1.4;object-position:top}}

/* ---------------- Lead form ---------------- */
.lead{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(36px,5vw,90px);align-items:start}
@media (max-width:920px){.lead{grid-template-columns:1fr}}
.lead-side .lede{margin:18px 0 30px}
.lead-points{display:flex;flex-direction:column;gap:14px;margin-bottom:36px}
.lead-points li{display:flex;gap:13px;align-items:flex-start;font-size:15.5px;color:#D5DDEE}
.lead-points li i{
  font-style:normal;flex:none;
  width:24px;height:24px;border-radius:50%;
  background:rgba(242,107,29,.18);color:var(--accent-2);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;
}
.lead-call{border-top:1px solid var(--line-dark);padding-top:26px}
.lead-call small{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#8FA0C4;margin-bottom:8px}
.lead-call a{font-family:var(--font-d);font-weight:700;font-size:clamp(28px,3vw,38px);color:#fff;letter-spacing:-.01em}
.lead-call a:hover{color:var(--accent-2)}

.lead-form{
  background:#fff;color:var(--ink);
  border-radius:calc(var(--r) + 8px);
  padding:clamp(28px,3.5vw,50px);
  box-shadow:0 40px 100px -40px rgba(0,0,0,.55);
}
.lead-form h3{font-family:var(--font-d);font-weight:700;font-size:26px;letter-spacing:-.015em;margin-bottom:6px}
.lead-form > .form-fields > p{font-size:14.5px;color:#5A6478;margin-bottom:26px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grid .full{grid-column:1/-1}
@media (max-width:560px){.form-grid{grid-template-columns:1fr}}
.field label{
  display:block;font-size:13px;font-weight:600;color:#3A4457;margin-bottom:7px;
}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:15.5px;
  padding:14px 16px;
  border:1.5px solid var(--line);border-radius:12px;
  background:var(--cloud);color:var(--ink);
  transition:border-color .2s, box-shadow .2s, background .2s;
  appearance:none;-webkit-appearance:none;
}
.field select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%230C1526' stroke-width='1.8' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 16px center;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);background:#fff;
  box-shadow:0 0 0 4px rgba(242,107,29,.14);
}
.field textarea{min-height:104px;resize:vertical}
.form-consent{
  display:flex;gap:10px;align-items:flex-start;
  font-size:12px;color:#7A8499;line-height:1.5;margin-top:18px;
}
.form-consent input{margin-top:3px;accent-color:var(--accent)}
.lead-form .btn{width:100%;justify-content:center;margin-top:20px}
.form-success{display:none;text-align:center;padding:44px 10px}
.form-success.show{display:block}
.form-success .tick{
  width:64px;height:64px;margin:0 auto 18px;border-radius:50%;
  background:var(--ok);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:28px;
}
.form-success .big{font-family:var(--font-d);font-size:28px;font-weight:700;margin-bottom:8px}
.form-success p{color:#5A6478;font-size:15px}

/* ---------------- CTA band ---------------- */
.cta-band{position:relative;overflow:hidden;background:var(--ink);color:#fff}
.cta-band .wrap{
  position:relative;z-index:2;
  padding-block:clamp(70px,9vw,120px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:36px;
}
.cta-band .d2{max-width:14ch}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap}

/* ---------------- Footer ---------------- */
.site-footer{background:var(--ink);color:#8FA0C4;position:relative;overflow:hidden}
.footer-main{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));
  gap:clamp(28px,4vw,60px);
  padding-block:clamp(56px,7vw,84px) 44px;
}
@media (max-width:960px){.footer-main{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-main{grid-template-columns:1fr}}
.footer-brand img{height:52px;margin-bottom:20px}
.footer-brand p{font-size:14.5px;max-width:36ch;margin-bottom:22px}
.footer-badges{display:flex;gap:8px;flex-wrap:wrap}
.badge-pill{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--line-dark);border-radius:999px;
  font-size:12px;font-weight:600;letter-spacing:.04em;
  padding:9px 16px;color:#B9C4DC;
  transition:border-color .25s, color .25s, background .25s;
}
.badge-pill svg{width:15px;height:15px;flex:none;color:var(--accent-2)}
.badge-pill span{white-space:nowrap}
.badge-pill sup{font-size:.65em;vertical-align:super;line-height:0;margin-left:1px}
a.badge-pill:hover{border-color:var(--accent);color:#fff;background:rgba(242,107,29,.1)}

@media (max-width:820px){
  .footer-badges{justify-content:center}
}
.site-footer h5{
  font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;margin-bottom:18px;
}
.site-footer li{margin-bottom:11px;font-size:14.5px}
.site-footer li a{transition:color .2s}
.site-footer li a:hover{color:var(--accent-2)}
.footer-contact strong a{
  font-family:var(--font-d);font-size:24px;font-weight:700;color:#fff;
}
.footer-contact strong a:hover{color:var(--accent-2)}
.footer-bottom{
  position:relative;z-index:2;
  border-top:1px solid var(--line-dark);
  padding-block:22px;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  font-size:13px;color:#5F6E92;
}
.footer-bottom a:hover{color:var(--accent-2)}

/* ---------------- Mobile CTA ---------------- */
/* ---------------- App-style bottom tab bar (mobile) ---------------- */
.appbar{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:95;
  grid-template-columns:1fr 1fr 1.42fr 1fr 1fr;
  align-items:center;
  gap:2px;
  padding:9px max(8px, env(safe-area-inset-right)) calc(9px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border-top:2px solid var(--navy);
  box-shadow:0 -8px 30px -18px rgba(12,21,38,.35);
}
.ab-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  padding:7px 2px;
  color:#78839A;
  font-size:10.5px;font-weight:600;
  background:none;border:none;
  -webkit-tap-highlight-color:transparent;
  transition:color .2s;
}
.ab-item svg{width:22px;height:22px;flex:none}
.ab-item span{line-height:1}
.ab-item.is-active{color:var(--navy)}
.ab-item.is-active svg{stroke:var(--navy)}
.ab-item:active{color:var(--navy)}

/* center action — navy pill, sits flush in the bar (no floating circle) */
.ab-call{
  display:flex;align-items:center;justify-content:center;gap:8px;
  height:48px;margin:0 5px;
  border-radius:14px;
  background:var(--navy);
  color:#fff;
  font-size:14px;font-weight:700;letter-spacing:.01em;
  box-shadow:0 8px 20px -10px rgba(19,34,63,.85);
  -webkit-tap-highlight-color:transparent;
  transition:transform .2s var(--ease), background .2s;
}
.ab-call svg{width:19px;height:19px;flex:none}
.ab-call:active{transform:scale(.97);background:var(--navy-2)}

@media (max-width:820px){
  .appbar{display:grid}
  body{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
  .burger{display:none}
  /* header: logo only, centered */
  .site-header .wrap{justify-content:center}
  .header-cta{display:none}
  .brand{margin-inline:auto}
}
@media (max-width:360px){
  .ab-call span{display:none}
  .appbar{grid-template-columns:repeat(5,1fr)}
}

/* ---------------- Reveal helpers ---------------- */
html.js [data-reveal]{opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.js [data-reveal].done{opacity:1!important;transform:none!important}
.img-reveal{position:relative;overflow:hidden}
.img-reveal img{will-change:transform}

/* page hero (inner pages) */
.page-hero{
  position:relative;background:var(--ink);color:#fff;overflow:hidden;
  padding-top:88px;
}
.page-hero .ph-bg{position:absolute;inset:0}
.page-hero .ph-bg img{width:100%;height:100%;object-fit:cover;opacity:.35}
.page-hero .ph-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top, var(--ink) 4%, rgba(12,21,38,.5) 60%, rgba(12,21,38,.75));
}
.page-hero .wrap{position:relative;z-index:2;padding-block:clamp(70px,9vw,120px)}
.page-hero .crumbs{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  font-size:13px;font-weight:500;color:#9FACC8;margin-bottom:20px;
}
.page-hero .crumbs a:hover{color:#fff}
.page-hero .crumbs span{color:#5F6E92}
.page-hero h1{
  font-family:var(--font-d);font-weight:750;
  font-size:clamp(40px,5.6vw,80px);
  letter-spacing:-.025em;line-height:1;
  max-width:14ch;
}
.page-hero .lede{color:#C3CDE0;margin-top:20px}

/* content blocks for inner pages */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(34px,5vw,80px);align-items:center}
@media (max-width:880px){.split{grid-template-columns:1fr}}
.split-media{border-radius:calc(var(--r) + 8px);overflow:hidden;position:relative}
.split-media img{width:100%;height:100%;object-fit:cover;max-height:600px}
.check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
@media (max-width:760px){.check-grid{grid-template-columns:1fr}}
.check-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:26px 28px;
  transition:transform .3s, box-shadow .3s;
}
.check-card:hover{transform:translateY(-4px);box-shadow:0 24px 50px -28px rgba(12,21,38,.25)}
.check-card h4{
  font-family:var(--font-d);font-weight:700;font-size:19px;letter-spacing:-.01em;
  margin-bottom:8px;display:flex;align-items:center;gap:10px;
}
.check-card h4 i{
  font-style:normal;flex:none;
  width:26px;height:26px;border-radius:50%;
  background:rgba(242,107,29,.12);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;
}
.check-card p{font-size:14.5px;color:#5A6478}

.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:24px 4px;
  font-family:var(--font-d);font-size:20px;font-weight:600;letter-spacing:-.01em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{
  font-style:normal;flex:none;
  width:34px;height:34px;border-radius:50%;
  border:1.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;color:var(--ink);
  transition:.3s;
}
.faq details[open] summary i{background:var(--accent);border-color:var(--accent);color:#fff;transform:rotate(45deg)}
.faq .faq-body{padding:0 4px 26px;color:#5A6478;max-width:75ch;font-size:15.5px}

.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,32px)}
@media (max-width:760px){.grid-2{grid-template-columns:1fr}}
.center{text-align:center}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
  [data-reveal]{opacity:1;transform:none}
  .hero h1 .line > span{transform:none}
}

/* ============================================================
   MOBILE — app-style sheet menu, centered content, safe padding
   Appended last so it overrides the desktop rules above.
   ============================================================ */
@media (max-width:820px){

  /* ---- breathing room from the screen edges ---- */
  :root{ --gut:24px; }

  /* ---- menu as a bottom sheet ---- */
  .menu-overlay{
    top:auto;bottom:0;height:auto;
    max-height:88svh;
    clip-path:none;
    transform:translateY(101%);
    transition:transform .45s var(--ease);
    border-radius:26px 26px 0 0;
    padding:10px 24px calc(24px + env(safe-area-inset-bottom));
    box-shadow:0 -20px 60px -20px rgba(0,0,0,.6);
  }
  .menu-overlay.open{clip-path:none;transform:translateY(0)}
  .menu-overlay::after{
    content:"";position:fixed;inset:0;z-index:-1;
    background:rgba(8,13,24,.55);
    opacity:0;transition:opacity .4s;
  }
  .menu-overlay.open::after{opacity:1}

  .mo-grab{
    width:42px;height:4px;border-radius:99px;
    background:rgba(255,255,255,.28);
    margin:0 auto 14px;flex:none;
  }
  .mo-top{margin-bottom:14px}
  .mo-top img{height:32px}
  .mo-close{width:40px;height:40px;font-size:19px}
  .menu-overlay nav{gap:0;max-width:none}
  .menu-overlay nav > a{
    font-family:var(--font-b);
    font-size:16.5px;font-weight:600;letter-spacing:0;
    padding:12.5px 2px;
    align-items:center;gap:12px;
    border-bottom:1px solid rgba(255,255,255,.09);
    transform:none;opacity:1;
  }
  .menu-overlay nav > a small{
    font-size:10.5px;min-width:20px;
    color:#6E7FA6;
  }
  .menu-overlay nav > a::after{
    content:"›";margin-left:auto;
    color:#6E7FA6;font-size:20px;line-height:1;
  }
  .mo-foot{
    flex-direction:column;align-items:stretch;text-align:center;
    gap:10px;padding-top:16px;
  }
  .mo-foot .btn{justify-content:center}

  /* ---- keep single-column grids from outgrowing the viewport ----
     A bare `1fr` track resolves its minimum to min-content, so a long
     unbreakable string can push the column wider than its container and
     clip text off-screen. minmax(0,1fr) + min-width:0 lets it shrink. */
  .lead,.split,.mat,.fin,.footer-main,.grid-2,.check-grid,.team{
    grid-template-columns:minmax(0,1fr);
  }
  .lead > *,.split > *,.mat > *,.fin > *,.footer-main > *,
  .grid-2 > *,.check-grid > *,.team > *{min-width:0}

  /* ---- centered content ---- */
  /* Elements with a ch-based max-width keep their BOX flush left even when
     their text is centred, which reads as mis-aligned. Centre the box too. */
  .lede,.manifesto,.faq .faq-body,
  .section p,.section h1,.section h2,.section h3,.section h4,
  .page-hero p,.hero p,.cta-band p,.cta-band h2,
  .mf-pillar p,.mf-pillar h4,.mf-note p,
  .check-card p,.tl-step p,.sc-body p,.stat-card span,
  .footer-brand p,.tm-body p{
    margin-inline:auto;
  }
  /* form controls stay left-aligned for usability */
  .field label,.form-consent,.field input,.field select,.field textarea{
    margin-inline:0;
  }

  .sec-head,.sec-head--split{
    text-align:center;align-items:center;
    margin-inline:auto;
  }
  .sec-head--split{flex-direction:column}
  .kicker{justify-content:center}
  .lede{margin-inline:auto}

  .hero-inner{text-align:center;display:flex;flex-direction:column;align-items:center}
  .hero h1{max-width:none}
  .hero-badge{flex-direction:column;gap:7px;padding:12px 20px;text-align:center}
  .hero-actions{justify-content:center;width:100%;flex-direction:column;align-items:stretch}
  .hero-actions .btn{justify-content:center}
  .hero-foot .wrap{justify-content:center;text-align:center}
  .hf-item{flex-direction:column;text-align:center;gap:6px}

  .page-hero .wrap{text-align:center}
  .page-hero .crumbs{justify-content:center}
  .page-hero h1{max-width:none;margin-inline:auto}

  .mf-copy,.mf-note,.mf-pillar{text-align:center}
  .manifesto{max-width:none;margin-inline:auto}
  .mf-sign{justify-content:center}
  .mf-pillar span{margin-inline:auto}

  .sc-body{text-align:center;align-items:center}
  .sc-body p{margin-inline:auto}
  .sc-num{justify-content:center}
  .sc-tags{justify-content:center}

  .stat-card,.check-card,.tl-step{text-align:center}
  .check-card h4{justify-content:center}
  .tl-step{padding-left:0;padding-top:64px}
  .tl-step::before{left:50%;transform:translateX(-50%)}

  .mat-tab{text-align:center;flex-direction:column;gap:10px}
  .mat-tab p{margin-inline:auto}

  .fin-body{text-align:center}
  .fin-perks{justify-content:center}
  .fin-body .btn,.sc-body .btn{margin-inline:auto}

  .lead-side{text-align:center}
  .lead-points li{justify-content:center;text-align:center}
  .lead-points li i{margin-top:2px}
  .lead-call{text-align:center}

  .cta-band .wrap{text-align:center;justify-content:center}
  .cta-band .d2{max-width:none;margin-inline:auto}
  .cta-actions{justify-content:center;width:100%;flex-direction:column}
  .cta-actions .btn{justify-content:center}

  /* text columns on inner pages (split blocks carry no dedicated class) */
  .split{text-align:center}
  .split > div{display:flex;flex-direction:column;align-items:center}
  .split-media{display:block;width:100%}
  .split .lede{margin-inline:auto}
  .split .btn{justify-content:center}

  /* financing / GreenSky band */
  .gs-band,.gs-band-top,.gs-perk,.gs-plan{text-align:center}
  .gs-band-top{flex-direction:column;align-items:center;gap:12px}
  .gs-tagline{
    padding-left:0;margin-left:0;
    border-left:none;border-top:1px solid rgba(255,255,255,.28);
    padding-top:12px;align-items:center;
  }
  .gs-badge{margin-left:0}
  .gs-perks{justify-items:center}
  .gs-plan-head{flex-direction:column;align-items:center;gap:10px;text-align:center}
  .gs-plan .btn{justify-content:center;width:100%}

  /* inline button rows written with inline styles in the markup */
  .split > div > div[style*="display:flex"]{justify-content:center;width:100%}
  .split > div > div[style*="display:flex"] .btn{width:100%;justify-content:center}

  .team .tm-body,.hp-meta,.work figcaption{text-align:center}

  .site-footer{text-align:center}
  .footer-brand p{margin-inline:auto}
  .footer-badges{justify-content:center}
  .footer-bottom{justify-content:center;text-align:center}
  .footer-contact .btn{justify-content:center}

  /* form: center the heading, keep fields left-aligned for legibility */
  .lead-form{text-align:center}
  .lead-form .field{text-align:left}
  .form-consent{text-align:left}
}

@media (max-width:400px){
  :root{ --gut:20px; }
  .ab-item{font-size:10px}
  .ab-item svg{width:21px;height:21px}
}

/* honeypot — kept in the layout but pushed off-screen. display:none is a
   pattern the better bots look for and skip, this one they still fill. */
.hp-field{position:absolute!important;left:-9999px!important;top:auto!important;
  width:1px!important;height:1px!important;overflow:hidden!important}
.form-error{
  margin-top:14px;color:#C0392B;font-size:14px;font-weight:500;
  text-align:left;min-height:0;
}
.form-error:empty{display:none}
.lead-form .btn[disabled]{opacity:.65;cursor:progress;transform:none}

/* footer social row */
.footer-social{display:flex;gap:10px;align-items:center}
.footer-social a{
  width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line-dark);
  display:flex;align-items:center;justify-content:center;
  color:#B9C4DC;transition:.25s;
}
.footer-social a:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.footer-social svg{width:18px;height:18px}
@media (max-width:820px){.footer-social{justify-content:center}}


/* ============================================================
   GOOGLE REVIEW CARDS — used on the home page and on /review
   ============================================================ */
/* real Google reviews */
/* Equal-height cards: every text box is exactly six lines tall while collapsed,
   every card reserves the Read more row (a hidden placeholder when the text
   fits), and the author row is pinned to the bottom. */
.rv-reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px);align-items:stretch}
.rv-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:28px 28px 24px;display:flex;flex-direction:column;
}
.rv-card .st{display:flex;gap:3px;margin-bottom:16px}
.rv-card .st svg{width:18px;height:18px;fill:#FBBC05}
.rv-text{position:relative;font-size:15.5px;line-height:1.65;color:#34405A;min-height:calc(1.65em * 6);margin-bottom:20px}
.rv-text p + p{margin-top:12px}
.rv-text.is-clamped{max-height:calc(1.65em * 6);overflow:hidden}
.rv-text.is-clamped::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3.3em;
  background:linear-gradient(to bottom, rgba(255,255,255,0), #fff);
}
.rv-more{
  align-self:flex-start;margin:-10px 0 20px;
  font-size:14.5px;font-weight:600;color:var(--accent);
  display:inline-flex;align-items:center;gap:6px;padding:4px 0;
}
.rv-more.is-ph{visibility:hidden}
.rv-more:hover{color:#E05B10}
.rv-more i{font-style:normal;transition:transform .25s}
.rv-more[aria-expanded="true"] i{transform:rotate(180deg)}
.rv-who{
  display:flex;align-items:center;gap:12px;
  margin-top:auto;padding-top:18px;border-top:1px solid var(--line);
}
.rv-who .av{
  width:40px;height:40px;border-radius:50%;flex:none;
  background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-d);font-weight:700;font-size:16px;
}
.rv-who b{display:block;font-size:15px;line-height:1.3}
.rv-who small{display:flex;align-items:center;gap:6px;font-size:13px;color:#78839A}
.rv-who small svg{width:13px;height:13px}
.rv-reviews-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(30px,4vw,44px)}

@media (max-width:1100px){.rv-reviews{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.rv-card{text-align:left}.rv-reviews-cta{justify-content:center}}
@media (max-width:760px){.rv-reviews{grid-template-columns:1fr}}


/* ============================================================
   BLOG — listing cards and article typography
   ============================================================ */
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,30px)}
@media (max-width:980px){.post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.post-grid{grid-template-columns:1fr}}
.post-card{
  display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s;
}
.post-card:hover{transform:translateY(-4px);box-shadow:0 26px 54px -30px rgba(12,21,38,.3)}
.post-card img{width:100%;aspect-ratio:16/9;object-fit:cover}
.post-card .pc-body{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1}
.post-card .pc-meta{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:12.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.post-card .pc-meta span{color:var(--stone)}
.post-card h3{font-family:var(--font-d);font-size:22px;font-weight:700;letter-spacing:-.015em;line-height:1.16;margin-bottom:10px}
.post-card p{font-size:15px;color:#5A6478;margin-bottom:18px}
.post-card .pc-more{margin-top:auto;font-size:14.5px;font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:9px}
.post-card:hover .pc-more{color:var(--accent)}

/* --- article --- */
.post{max-width:768px;margin-inline:auto}
.post > * + *{margin-top:22px}
.post p{font-size:17.5px;line-height:1.75;color:#34405A}
.post h2{font-family:var(--font-d);font-size:clamp(27px,3.1vw,36px);font-weight:700;
  letter-spacing:-.02em;line-height:1.14;color:var(--ink);margin-top:clamp(44px,5vw,62px)}
.post h3{font-family:var(--font-d);font-size:clamp(20px,2.2vw,23px);font-weight:700;
  letter-spacing:-.01em;color:var(--ink);margin-top:clamp(30px,3.4vw,40px)}
.post ul,.post ol{padding-left:22px;display:flex;flex-direction:column;gap:11px}
.post ul{list-style:none;padding-left:0}
.post ul li{position:relative;padding-left:26px;font-size:17px;line-height:1.7;color:#34405A}
.post ul li::before{content:"";position:absolute;left:3px;top:.68em;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.post ol{list-style:decimal}
.post ol li{font-size:17px;line-height:1.7;color:#34405A;padding-left:6px}
.post li strong,.post p strong{color:var(--ink);font-weight:700}
.post a:not(.btn){color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);
  text-underline-offset:3px;text-decoration-thickness:2px;font-weight:600}
.post a:not(.btn):hover{color:var(--accent)}
.post figure{margin-top:clamp(30px,3.6vw,44px)}
.post figure img{width:100%;border-radius:var(--r);border:1px solid var(--line)}
.post figcaption{margin-top:12px;font-size:14px;color:#78839A;text-align:center}
.post .lede{font-size:clamp(18px,1.5vw,20.5px);color:#46506B;line-height:1.65;max-width:none}

.post .toc{background:var(--cloud);border:1px solid var(--line);border-radius:var(--r);padding:26px 30px}
.post .toc h2{font-size:15px;font-family:var(--font-b);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);margin:0 0 14px}
.post .toc ol{gap:8px}
.post .toc li{font-size:15.5px}
.post .toc a{font-weight:600}

.post .callout{
  border-left:4px solid var(--accent);background:var(--blue-mist);
  border-radius:0 var(--r) var(--r) 0;padding:24px 28px;
}
.post .callout p{font-size:16.5px;color:#34405A}
.post .callout p + p{margin-top:12px}
.post .callout strong{display:block;font-family:var(--font-d);font-size:18px;color:var(--ink);margin-bottom:6px}

.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r)}
.post table{border-collapse:collapse;width:100%;min-width:620px;font-size:15.5px}
.post th,.post td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.post thead th{background:var(--ink);color:#fff;font-size:13px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.post tbody tr:last-child td{border-bottom:none}
.post tbody th{font-weight:700;color:var(--ink);background:var(--cloud);white-space:nowrap}

.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;font-size:14px;color:#8FA0C4}
.post-meta .dot{width:4px;height:4px;border-radius:50%;background:#5F6E92}
.post-foot{
  margin-top:clamp(44px,5vw,64px);padding-top:clamp(28px,3vw,36px);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;
}
.post-foot .pf-author{font-size:15px;color:#5A6478}
.post-foot .pf-author b{display:block;color:var(--ink);font-family:var(--font-d);font-size:17px}