/* ============================================================
   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)}

/* ---------------- 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 8px calc(9px + env(safe-area-inset-bottom));
  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}}