/* ============================================================
   APEX COMFORT SYSTEMS — v2 "Editorial Redesign" (production)
   Visual source of truth: Claude Design v2 frames.
   Oversized bleeding type · side-rail spine · grain · duotone
   · custom line icons · asymmetry · angled dividers.
   Motion initial-states + production UI live at the bottom.
   ============================================================ */

:root{
  --ink:#0E1A2B; --navy:#16273F; --ember:#F15A24; --ember-soft:#FFEDE3;
  --paper:#FAFAF7; --white:#FFFFFF; --slate-900:#121519; --slate-600:#58616E;
  --slate-200:#E4E7EC; --trust:#18A06B; --green:#18A06B; --gold:#F5B027;

  --font-display:'Archivo', sans-serif;
  --font-body:'Plus Jakarta Sans', sans-serif;
  --display:'Archivo', sans-serif;   /* legacy aliases used below */
  --body:'Plus Jakarta Sans', sans-serif;

  --rail:74px;          /* left side-rail width (desktop) */
  --pad:72px;           /* content gutter */
  --maxw:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);

  --sh-lg:0 4px 12px rgba(14,26,43,.06), 0 30px 70px rgba(14,26,43,.16);
  --sh-md:0 2px 6px rgba(14,26,43,.05), 0 16px 40px rgba(14,26,43,.10);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);
  color:var(--slate-900);
  background:var(--paper);
  line-height:1.62;font-size:17px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
ul{list-style:none}

/* Lenis smooth-scroll hooks */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* accessibility helpers */
.skip-link{position:fixed;left:12px;top:-60px;z-index:100;background:var(--ember);color:#fff;
  padding:10px 16px;border-radius:8px;font-weight:700;transition:top .2s}
.skip-link:focus{top:12px}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:3px}

/* hidden svg sprite host */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:1em;height:1em;display:inline-block;fill:none;stroke:currentColor;
  stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle;flex:none}

/* ---------- type primitives ---------- */
.eyebrow{font-weight:600;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ember);
  display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--ember);display:inline-block}
.disp{font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:.92}
h2.title{font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:.94;
  font-size:clamp(40px,5.6vw,78px);color:var(--slate-900)}
.lead{color:var(--slate-600);font-size:18px;line-height:1.6;max-width:560px}

/* ---------- layout scaffold ---------- */
.page{padding-left:var(--rail)}
.section{position:relative;padding:140px var(--pad)}
.wrap{max-width:var(--maxw);margin:0 auto}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--body);font-weight:700;font-size:16px;
  padding:17px 28px;border-radius:6px;transition:gap .25s var(--ease),transform .2s var(--ease),background .2s,box-shadow .25s;line-height:1}
.btn .ic{width:18px;height:18px}
.btn:hover{gap:18px}
.btn:active{transform:scale(.985)}
.btn-ember{background:var(--ember);color:#fff;box-shadow:0 14px 36px rgba(241,90,36,.32)}
.btn-ember:hover{background:#e2501a;box-shadow:0 18px 44px rgba(241,90,36,.4)}
.btn-white{background:#fff;color:var(--ink)}
.btn-ghost{color:#fff;border:1.5px solid rgba(255,255,255,.28)}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.btn-ghost-dark{color:var(--slate-900);border:1.5px solid var(--slate-200)}
.ghostlink{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15px;color:inherit;transition:gap .25s var(--ease)}
.ghostlink .ic{width:17px;height:17px}
.ghostlink:hover{gap:14px}

/* ---------- texture utilities ---------- */
.noise{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px}
.gridtex{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:64px 64px}

/* ---------- image placeholders / real media ---------- */
.photo{position:relative;overflow:hidden;background:var(--navy)}
.photo .ph,.photo .media{width:100%;height:100%}
/* gradient placeholder (drop in a real <img class="media duo"> to replace) */
.ph{position:absolute;inset:0;background:linear-gradient(135deg,#1b2d49,#0E1A2B)}
.media{position:absolute;inset:0;object-fit:cover}
.media.duo{filter:url(#duotone) contrast(1.05)}
/* blur-up reveal for real images: start blurred, clear once decoded */
img.media{opacity:0;transform:scale(1.05);transition:opacity .9s var(--ease),transform 1.1s var(--ease),filter .9s var(--ease)}
img.media:not(.duo){filter:blur(18px)}
img.media.duo{filter:url(#duotone) contrast(1.05) blur(18px)}
img.media.is-loaded{opacity:1;transform:none}
img.media.is-loaded:not(.duo){filter:none}
img.media.is-loaded.duo{filter:url(#duotone) contrast(1.05)}

/* ============================================================
   SIDE-RAIL SPINE
   ============================================================ */
.rail{position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:60;pointer-events:none}
.rail-line{position:absolute;left:37px;top:0;bottom:0;width:1px;background:linear-gradient(to bottom,transparent,rgba(241,90,36,.5) 12%,rgba(241,90,36,.5) 88%,transparent)}
.rail-top{position:absolute;top:26px;left:0;right:0;display:flex;justify-content:center}
.rail-mark{width:34px;height:34px;border-radius:9px;background:var(--ember);display:grid;place-items:center;
  font-family:var(--display);font-weight:900;color:#fff;font-size:19px;box-shadow:0 6px 16px rgba(241,90,36,.4)}
.rail-label{position:fixed;left:-4px;top:50%;transform:translateY(-50%) rotate(-90deg);transform-origin:center;
  font-family:var(--body);font-weight:600;font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--slate-600);white-space:nowrap}
.rail-label .ix{color:var(--ember);margin-right:10px}
.rail-bot{position:absolute;bottom:26px;left:0;right:0;text-align:center;font-family:var(--display);font-weight:800;
  font-size:12px;letter-spacing:.05em;color:var(--slate-600)}
.rail-bot b{color:var(--slate-900)}
.rail.on-dark .rail-label,.rail.on-dark .rail-bot{color:rgba(255,255,255,.55)}
.rail.on-dark .rail-bot b{color:#fff}

/* mobile top progress bar (hidden on desktop) */
.mprog{display:none}

/* ============================================================
   HEADER
   ============================================================ */
.hdr{position:fixed;top:0;left:var(--rail);right:0;z-index:50;transition:background .3s,border-color .3s}
.hdr.solid{background:rgba(14,26,43,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.08)}
.hdr-in{max-width:1340px;margin:0 auto;padding:18px var(--pad);display:flex;align-items:center;gap:30px}
.brand{display:flex;align-items:center;gap:12px}
.brand b{font-family:var(--display);font-weight:800;color:#fff;font-size:18px;letter-spacing:.01em;line-height:1}
.brand small{display:block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.45);font-weight:600;margin-top:3px}
.nav{display:flex;gap:32px;margin-left:auto}
.nav a{color:rgba(255,255,255,.72);font-weight:500;font-size:15px;transition:color .2s;white-space:nowrap;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1.5px;background:var(--ember);
  transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease)}
.nav a:hover{color:#fff}
.nav a:hover::after,.nav a.active::after{transform:scaleX(1)}
.nav a.active{color:#fff}
.hdr-cta{display:inline-flex;align-items:center;gap:9px;background:var(--ember);color:#fff;font-weight:700;font-size:14px;
  padding:12px 18px;border-radius:6px}
.hdr-cta .ic{width:16px;height:16px}
.hamb{display:none;width:46px;height:46px;border-radius:9px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff;place-items:center}
.hamb .ic{width:22px;height:22px}

/* mobile menu */
.mmenu{position:fixed;inset:0;z-index:70;background:var(--ink);display:none;flex-direction:column;padding:22px var(--pad) 34px}
.mmenu .noise{opacity:.4}
.mmenu.open{display:flex}
.mmenu[hidden]{display:none}
.mmenu-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px;position:relative;z-index:2}
.mclose{width:46px;height:46px;border-radius:9px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff;display:grid;place-items:center}
.mclose .ic{width:22px;height:22px}
.mmenu-links{display:flex;flex-direction:column;flex:1;position:relative;z-index:2}
.mmenu-links a{display:flex;align-items:baseline;gap:14px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.09);
  font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;font-size:38px;color:#fff}
.mmenu-links a .mix{font-family:var(--body);font-weight:600;font-size:13px;color:var(--ember);letter-spacing:.1em}
.mmenu-foot{position:relative;z-index:2;margin-top:26px;display:flex;flex-direction:column;gap:14px}

/* ============================================================
   01 · HERO
   ============================================================ */
.hero{position:relative;min-height:100vh;background:var(--ink);overflow:hidden;display:flex;align-items:flex-start}
.hero .photo{position:absolute;inset:0;z-index:0}
.hero-scrim{position:absolute;inset:0;z-index:2;
  background:linear-gradient(100deg,rgba(14,26,43,.94) 18%,rgba(14,26,43,.74) 46%,rgba(14,26,43,.32) 78%,rgba(14,26,43,.5) 100%)}
.hero-grain{z-index:3}
.hero-in{position:relative;z-index:4;width:100%;max-width:1340px;margin:0 auto;padding:148px var(--pad) 110px;
  display:flex;flex-direction:column}
.hero-eyebrow{color:#ff7a47;margin-bottom:30px}
.hero-eyebrow::before{background:#ff7a47}
.hero-title{font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.045em;line-height:.83;
  color:#fff;font-size:clamp(72px,11.2vw,164px);margin-left:-.06em}
.hero-title .line{display:block;overflow:hidden;padding-bottom:.02em}
.hero-title .line-in{display:block}
.hero-title .flow{color:transparent;-webkit-text-stroke:2.5px var(--ember);position:relative}
.hero-sub{color:rgba(255,255,255,.78);font-size:20px;line-height:1.55;max-width:500px;margin:30px 0 36px}
.hero-ctas{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.hero-ctas .ghostlink{color:rgba(255,255,255,.85)}
.rating-chip{position:absolute;z-index:5;right:var(--pad);bottom:120px;display:flex;align-items:center;gap:14px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(14px);
  border-radius:14px;padding:16px 20px}
.rating-chip .rc-stars{display:flex;gap:2px;color:var(--gold)}
.rating-chip .rc-stars .ic{width:15px;height:15px;fill:var(--gold);stroke:var(--gold)}
.rating-chip .rc-num{font-family:var(--display);font-weight:900;font-size:26px;color:#fff;line-height:1}
.rating-chip .rc-lab{font-size:12px;color:rgba(255,255,255,.6);letter-spacing:.02em}
.hero-scroll{position:absolute;left:var(--pad);bottom:34px;z-index:5;display:flex;align-items:center;gap:10px;
  color:rgba(255,255,255,.4);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.hero-scroll::after{content:"";width:34px;height:1px;background:rgba(255,255,255,.3)}

/* ============================================================
   02 · TRUST MARQUEE
   ============================================================ */
.marquee{background:var(--ember);color:#fff;padding:22px 0;overflow:hidden;position:relative;white-space:nowrap}
.marquee-track{display:inline-flex;align-items:center;gap:0;animation:scroll-x 32s linear infinite;will-change:transform}
.marquee:hover .marquee-track{animation-play-state:paused}
.mq-item{display:inline-flex;align-items:center;gap:0;font-family:var(--display);font-weight:800;text-transform:uppercase;
  letter-spacing:.04em;font-size:18px;padding:0 4px}
.mq-sep{display:inline-flex;padding:0 30px;color:rgba(255,255,255,.7)}
.mq-sep .ic{width:13px;height:13px;fill:currentColor;stroke:none}
@keyframes scroll-x{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   03 · SERVICES — editorial staggered grid
   ============================================================ */
.svc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:72px}
.svc-head h2{max-width:760px;font-size:clamp(38px,5vw,68px)}
.svc-head .lead{margin-bottom:6px}
.svc-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:28px}
.svc{position:relative;border-radius:18px;overflow:hidden;background:var(--ink);color:#fff;
  display:flex;flex-direction:column;justify-content:flex-end;min-height:340px;text-decoration:none;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.svc:hover{transform:translateY(-8px);box-shadow:var(--sh-lg)}
.svc .photo{position:absolute;inset:0;z-index:0}
.svc .photo .ph,.svc .photo .media{transition:transform .6s var(--ease)}
.svc:hover .photo .ph,.svc:hover .photo .media{transform:scale(1.06)}
.svc .svc-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(14,26,43,.96) 8%,rgba(14,26,43,.55) 48%,rgba(14,26,43,.15) 100%)}
.svc-body{position:relative;z-index:2;padding:28px}
.svc-ix{position:absolute;top:24px;right:26px;z-index:2;font-family:var(--display);font-weight:900;font-size:30px;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.35);letter-spacing:-.03em}
.svc-ico{width:50px;height:50px;border-radius:13px;background:rgba(241,90,36,.92);display:grid;place-items:center;margin-bottom:auto}
.svc-ico .ic{width:26px;height:26px;color:#fff}
.svc h3{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;font-size:27px;margin:18px 0 10px;line-height:1}
.svc p{color:rgba(255,255,255,.7);font-size:15px;line-height:1.5;margin-bottom:18px;max-width:340px}
.svc .ghostlink{color:var(--ember)}
/* editorial grid: tall feature (left) · two stacked (right) · full-width emergency banner */
.svc.feature{grid-column:1 / 7;min-height:560px}
.svc-col-right{grid-column:7 / 13;display:flex;flex-direction:column;gap:28px}
.svc.s2{min-height:264px}
.svc.s3{min-height:264px;flex:1}
.svc.s4{grid-column:1 / -1;min-height:300px}
.svc.feature .svc-ico{width:58px;height:58px}
.svc.feature h3{font-size:34px}

/* ============================================================
   04 · WHY APEX
   ============================================================ */
.why{position:relative;background:var(--navy);color:#fff;overflow:visible;padding:170px var(--pad) 150px;margin-top:-4vw;
  clip-path:polygon(0 4vw,100% 0,100% 100%,0 100%)}
.why-in{position:relative;z-index:3;max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 1.04fr;gap:72px;align-items:center}
.why h2{color:#fff;margin:20px 0 26px}
.why-sub{color:rgba(255,255,255,.66);font-size:17px;max-width:440px;margin-bottom:14px}
.feat{margin-top:18px}
.feat-row{display:flex;gap:18px;padding:22px 0;border-top:1px solid rgba(255,255,255,.12)}
.feat-ico{width:46px;height:46px;border-radius:12px;border:1.5px solid rgba(241,90,36,.5);display:grid;place-items:center;flex:none}
.feat-ico .ic{width:23px;height:23px;color:var(--ember)}
.feat-row h4{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;font-size:19px;margin-bottom:5px}
.feat-row p{color:rgba(255,255,255,.6);font-size:14.5px;line-height:1.5}
/* bento overlaps the slant above */
.bento{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:-70px}
.bento .cell{background:var(--ink);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:28px;
  display:flex;flex-direction:column;justify-content:center;gap:6px;min-height:150px;position:relative;overflow:hidden;
  will-change:transform}
.bento .cell .num{font-family:var(--display);font-weight:900;font-size:48px;line-height:.92;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.bento .cell .num .st{width:.62em;height:.62em;fill:var(--gold);stroke:var(--gold);margin-left:.06em;vertical-align:baseline}
.bento .cell .lab{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:600}
.bento .cell.big{grid-column:1 / -1;background:var(--ember);border-color:transparent}
.bento .cell.big .num{font-size:clamp(46px,4.6vw,64px)}
.bento .cell.big .lab{color:rgba(255,255,255,.9)}
.bento .cell.portrait{padding:0;min-height:170px}
.bento .cell.portrait .photo{position:absolute;inset:0}
.bento .cell.portrait .pcap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:16px 18px;
  background:linear-gradient(to top,rgba(14,26,43,.92),transparent);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.85);font-weight:600}

/* ============================================================
   05 · PROCESS
   ============================================================ */
.proc-head{margin-bottom:30px}
.steps{position:relative;margin-top:40px}
.steps-line{position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--ember);transform-origin:top;
  transform:scaleY(var(--draw,0));opacity:.6}
.step{position:relative;display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center;padding:46px 0;border-top:1px solid var(--slate-200)}
.step:last-child{border-bottom:1px solid var(--slate-200)}
/* nth-of-type so the leading .steps-line span doesn't offset the count */
.step:nth-of-type(2){padding-left:7%}
.step:nth-of-type(3){padding-left:14%}
.step-n{font-family:var(--display);font-weight:900;font-size:130px;line-height:.74;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1.5px var(--ember);opacity:.9;will-change:transform}
.step-txt h3{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;font-size:30px;margin-bottom:10px}
.step-txt p{color:var(--slate-600);font-size:16.5px;max-width:440px}

/* ============================================================
   06 · TESTIMONIALS — horizontal scroller
   ============================================================ */
.tsec{position:relative;padding-right:0;overflow:hidden}
.t-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:54px;padding-right:var(--pad)}
.t-nav{display:flex;gap:12px}
.t-arrow{width:54px;height:54px;border-radius:50%;border:1.5px solid var(--slate-200);background:#fff;display:grid;place-items:center;color:var(--slate-900);transition:all .2s var(--ease)}
.t-arrow .ic{width:22px;height:22px}
.t-arrow:hover{border-color:var(--ember);color:var(--ember)}
.t-scroller{display:flex;gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;
  scrollbar-width:none;cursor:grab}
.t-scroller::-webkit-scrollbar{display:none}
.t-scroller.drag{cursor:grabbing}
.t-card{flex:0 0 440px;scroll-snap-align:start;background:#fff;border:1px solid var(--slate-200);border-radius:20px;
  padding:38px 36px;position:relative;overflow:hidden;box-shadow:var(--sh-md);margin:0}
.t-card:first-child{margin-left:var(--pad)}
.t-card:last-child{margin-right:var(--pad)}
.t-quo{position:absolute;top:-30px;right:18px;font-family:var(--display);font-weight:900;font-size:170px;color:var(--ember);opacity:.1;line-height:1}
.t-stars{display:flex;gap:3px;color:var(--gold);margin-bottom:20px;position:relative}
.t-stars .ic{width:18px;height:18px;fill:var(--gold);stroke:var(--gold)}
.t-quote{position:relative;font-size:19px;line-height:1.55;color:var(--slate-900);font-weight:500;margin-bottom:28px;font-style:normal;border:0}
.t-auth{display:flex;align-items:center;gap:14px}
.t-av{width:50px;height:50px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:16px;flex:none}
.t-auth b{display:block;font-weight:700;font-size:15px}
.t-auth small{color:var(--slate-600);font-size:13px}
.t-dots{display:flex;gap:9px;justify-content:center;margin-top:30px}
.t-dot{width:9px;height:9px;border-radius:50%;background:var(--slate-200);padding:0;transition:background .25s,transform .25s}
.t-dot:hover{background:var(--slate-600)}
.t-dot.on{background:var(--ember);transform:scale(1.3)}

/* ============================================================
   07 · FAQ
   ============================================================ */
.faq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:start}
.faq-list{display:flex;flex-direction:column}
.faq-item{border-top:1px solid var(--slate-200)}
.faq-item:last-child{border-bottom:1px solid var(--slate-200)}
.faq-h{margin:0}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px 4px;text-align:left;
  font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;font-size:21px;color:var(--slate-900)}
.faq-icn{width:34px;height:34px;flex:none;position:relative;display:grid;place-items:center;color:var(--ember)}
.faq-icn .ic{width:20px;height:20px}
.faq-icn .mn{position:absolute;opacity:0;transform:rotate(-90deg);transition:opacity .3s,transform .3s}
.faq-icn .pl{transition:opacity .3s,transform .3s}
.faq-item.open .faq-icn .pl{opacity:0;transform:rotate(90deg)}
.faq-item.open .faq-icn .mn{opacity:1;transform:rotate(0)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.faq-a-in{padding:0 4px 30px;color:var(--slate-600);font-size:16.5px;line-height:1.6;max-width:560px}

/* ============================================================
   08 · SERVICE AREA
   ============================================================ */
.area{position:relative;background:#fff}
.area-in{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:center;max-width:1340px;margin:0 auto}
.area-txt{padding-right:60px;position:relative;z-index:3}
.area-txt h2{margin:18px 0}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px;max-width:520px}
.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--slate-200);border-radius:999px;
  padding:9px 16px;font-size:14px;font-weight:600;color:var(--slate-900);transition:all .2s}
.chip .ic{width:14px;height:14px;color:var(--ember)}
.chip:hover{border-color:var(--ember);color:var(--ember)}
.area-map{position:relative;height:560px;border-radius:20px;overflow:hidden;background:var(--ink);
  margin-left:-40px;box-shadow:var(--sh-lg)}
.area-map .photo{position:absolute;inset:0}
.area-map .gridtex{z-index:2}
.area-map .noise{z-index:3;opacity:.4}
.map-pin{position:absolute;z-index:4}
.map-pin .dot{position:relative;width:16px;height:16px;border-radius:50%;background:var(--ember);box-shadow:0 0 0 6px rgba(241,90,36,.25),0 0 36px 6px rgba(241,90,36,.55)}
.map-pin .dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ember);animation:ping 2.2s var(--ease) infinite}
.map-pin.p1{top:46%;left:44%}.map-pin.p1 .dot{width:20px;height:20px}
.map-pin.p2{top:32%;left:60%}.map-pin.p2 .dot{width:11px;height:11px;opacity:.8}
.map-pin.p3{top:60%;left:62%}.map-pin.p3 .dot{width:11px;height:11px;opacity:.8}
.map-pin.p4{top:38%;left:30%}.map-pin.p4 .dot{width:10px;height:10px;opacity:.7}
@keyframes ping{0%{transform:scale(1);opacity:.7}70%{transform:scale(2.6);opacity:0}100%{opacity:0}}
.map-ovl{position:absolute;left:32px;bottom:32px;right:32px;z-index:5}
.map-ovl .mt{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:40px;color:#fff;letter-spacing:-.03em;line-height:1}
.map-ovl .ms{color:rgba(255,255,255,.66);font-size:14px;margin:8px 0 18px}

/* ============================================================
   09 · CTA
   ============================================================ */
.cta{position:relative;background:var(--ember);color:#fff;overflow:hidden;padding:120px var(--pad)}
.cta .rings{position:absolute;top:50%;right:-160px;transform:translateY(-50%);width:760px;height:760px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.18);box-shadow:0 0 0 90px rgba(255,255,255,.07),0 0 0 220px rgba(255,255,255,.05);pointer-events:none}
.cta-in{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:50px;flex-wrap:wrap}
.cta h2{color:#fff;font-size:clamp(48px,7vw,104px);margin-left:-.04em;line-height:.9}
.cta h2 .kw{display:inline-block}
.cta p{color:rgba(255,255,255,.92);font-size:19px;margin-top:26px;max-width:430px}
.cta-btns{display:flex;gap:14px;flex-wrap:wrap}

/* ============================================================
   10 · CONTACT
   ============================================================ */
.contact-in{display:grid;grid-template-columns:1fr 1.05fr;gap:72px;align-items:start;max-width:var(--maxw);margin:0 auto}
.contact-left h2{margin:18px 0 30px}
.crow{display:flex;gap:18px;padding:22px 0;border-top:1px solid var(--slate-200)}
.crow:last-child{border-bottom:1px solid var(--slate-200)}
.crow-ico{width:50px;height:50px;border-radius:13px;border:1.5px solid var(--slate-200);display:grid;place-items:center;flex:none;color:var(--ember)}
.crow-ico .ic{width:23px;height:23px}
.crow .cl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-600);font-weight:600}
.crow .cv{font-weight:600;font-size:17px;color:var(--slate-900);margin-top:4px}
.crow .cv a:hover{color:var(--ember)}
.form-card{position:relative;background:var(--ink);border-radius:22px;padding:42px 40px;color:#fff;box-shadow:var(--sh-lg);overflow:hidden}
.form-card .head{position:relative;z-index:2;margin-bottom:26px}
.form-card .head h3{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;font-size:30px}
.form-card .head p{color:rgba(255,255,255,.6);font-size:14px;margin-top:8px}
form{position:relative;z-index:2;display:flex;flex-direction:column;gap:17px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:17px}
.field{display:flex;flex-direction:column;gap:8px;position:relative}
.field label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6);font-weight:600}
.field input,.field select,.field textarea{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:9px;
  padding:14px 16px;color:#fff;font-family:var(--body);font-size:15px;transition:border .2s,box-shadow .2s}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.32)}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%23ffffff' opacity='.5' d='M6 8 0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.field select option{color:#111}
.field textarea{resize:vertical;min-height:104px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ember);box-shadow:0 0 0 3px rgba(241,90,36,.25)}
/* validation states */
.field.invalid input,.field.invalid textarea{border-color:#ff6b57;box-shadow:0 0 0 3px rgba(255,107,87,.18)}
.field.valid input,.field.valid textarea{border-color:rgba(24,160,107,.6)}
.field .err-msg{display:none;color:#ffb0a3;font-size:12px;letter-spacing:.01em}
.field.invalid .err-msg{display:block}
.field.valid::after{content:"";position:absolute;right:14px;top:38px;width:18px;height:18px;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2318A06B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E")}
.form-disc{position:relative;z-index:2;font-size:12px;color:rgba(255,255,255,.4);text-align:center}
.form-status{position:relative;z-index:2;font-size:14px;text-align:center;min-height:1px;margin:-4px 0 0}
.form-status.ok{color:#5bd6a0;font-weight:600}
.form-status.bad{color:#ffb0a3;font-weight:600}
/* honeypot */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* submit button loading / success states */
#leadSubmit{position:relative}
#leadSubmit .spinner{display:none;width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff;animation:spin .7s linear infinite}
#leadSubmit.loading .btn-label{opacity:.7}
#leadSubmit.loading .btn-arrow{display:none}
#leadSubmit.loading .spinner{display:inline-block}
#leadSubmit.sent{background:var(--green);box-shadow:0 14px 36px rgba(24,160,107,.32)}
#leadSubmit.sent .spinner{display:none}
#leadSubmit[disabled]{opacity:.55;cursor:not-allowed}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============================================================
   11 · FOOTER
   ============================================================ */
.ftr{position:relative;background:var(--ink);color:#fff;overflow:hidden;padding:96px var(--pad) 0}
.ftr-in{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.7fr 1fr 1fr 1.3fr;gap:50px;padding-bottom:54px}
.ftr-rail{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;font-family:var(--display);font-weight:900;
  text-transform:uppercase;letter-spacing:-.03em;font-size:clamp(60px,9vw,150px);line-height:.84;color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.1);padding-bottom:40px}
.ftr-blurb{color:rgba(255,255,255,.55);font-size:14.5px;line-height:1.6;margin:20px 0 24px;max-width:320px}
.socials{display:flex;gap:10px}
.soc{width:42px;height:42px;border-radius:10px;border:1px solid rgba(255,255,255,.14);display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:14px;color:#fff;transition:all .2s}
.soc:hover{background:var(--ember);border-color:var(--ember)}
.ftr-col h5{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:13px;margin-bottom:20px;color:#fff}
.ftr-col ul{display:flex;flex-direction:column;gap:12px}
.ftr-col a,.ftr-col li{color:rgba(255,255,255,.55);font-size:14.5px;transition:color .2s}
.ftr-col a:hover{color:var(--ember)}
.ftr-contact li{display:flex;gap:11px;align-items:flex-start}
.ftr-contact .ic{width:17px;height:17px;color:var(--ember);flex:none;margin-top:3px}
.ftr-bot{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.1);padding:26px 0;display:flex;align-items:center;
  justify-content:space-between;flex-wrap:wrap;gap:16px;max-width:var(--maxw);margin:0 auto}
.ftr-bot .cp{color:rgba(255,255,255,.4);font-size:13px}
.badges{display:flex;gap:22px;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.6);font-size:13px;font-weight:600}
.badge .ic{width:14px;height:14px;color:var(--ember)}

/* ============================================================
   FLOATING CALL (mobile) + BACK TO TOP
   ============================================================ */
.fab{position:fixed;right:16px;bottom:16px;z-index:55;display:none;align-items:center;gap:9px;background:var(--ember);color:#fff;
  font-weight:700;font-size:15px;padding:14px 20px;border-radius:999px;box-shadow:0 12px 30px rgba(241,90,36,.5);
  opacity:0;transform:translateY(20px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.fab .ic{width:17px;height:17px}
.fab.show{opacity:1;transform:translateY(0)}

.to-top{position:fixed;right:22px;bottom:22px;z-index:54;width:48px;height:48px;border-radius:50%;
  background:var(--ink);color:#fff;display:grid;place-items:center;box-shadow:var(--sh-md);
  opacity:0;transform:translateY(20px);pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease),background .2s}
.to-top .ic{width:20px;height:20px}
.to-top:hover{background:var(--ember)}
.to-top.show{opacity:1;transform:translateY(0);pointer-events:auto}

/* ============================================================
   MOTION — pre-paint initial states (only when html.anim is set)
   GSAP animates these to their final state; reduced-motion / no-JS
   never gets .anim, so everything renders fully visible.
   ============================================================ */
html.anim [data-reveal]{opacity:0}
html.anim .hero-title .line-in{transform:translateY(115%)}
html.anim [data-hero="eyebrow"],
html.anim [data-hero="sub"],
html.anim [data-hero="ctas"],
html.anim .rating-chip{opacity:0}
html.anim [data-kinetic] .kw{display:inline-block;opacity:0;transform:translateY(60%)}

/* ============================================================
   RESPONSIVE — 390px mobile (native-app feel)
   ============================================================ */
@media(max-width:680px){
  :root{--rail:0px;--pad:22px}
  body{font-size:16px}
  .section{padding:74px var(--pad)}

  /* rail → top progress bar */
  .rail{display:none}
  .mprog{display:block;position:fixed;top:0;left:0;right:0;height:3px;z-index:60;background:rgba(14,26,43,.08)}
  .mprog .mbar{height:100%;width:0;background:var(--ember)}

  /* header */
  .hdr{left:0}
  .hdr-in{padding:14px var(--pad)}
  .nav,.hdr-cta{display:none}
  .hamb{display:grid;margin-left:auto}

  /* hero */
  .hero{min-height:92vh}
  .hero-in{padding:0 var(--pad) 130px;justify-content:flex-end;min-height:92vh}
  .hero-title{font-size:clamp(66px,22vw,104px)}
  .hero-sub{font-size:17px;margin:22px 0 28px}
  .hero-ctas{flex-direction:column;align-items:flex-start;gap:18px}
  .hero-ctas .btn{width:100%;justify-content:center}
  .rating-chip{right:var(--pad);left:var(--pad);bottom:30px;justify-content:center}
  .hero-scroll{display:none}

  /* marquee */
  .mq-item{font-size:15px}.mq-sep{padding:0 18px}

  /* services — single column stack, reset spans */
  .svc-head{flex-direction:column;align-items:flex-start;gap:18px;margin-bottom:42px}
  .svc-grid{grid-template-columns:1fr;gap:18px}
  .svc.feature,.svc.s2,.svc.s3,.svc.s4,.svc-col-right{grid-column:auto;min-height:300px;margin:0}
  .svc-col-right{display:contents}

  /* why */
  .why{clip-path:polygon(0 3vw,100% 0,100% 100%,0 100%);padding:96px var(--pad) 80px;margin-top:0}
  .why-in{grid-template-columns:1fr;gap:44px}
  .bento{margin-top:0;gap:12px}
  .bento .cell .num{font-size:42px}.bento .cell.big .num{font-size:54px}

  /* process */
  .step{grid-template-columns:1fr;gap:6px;padding:30px 0!important}
  .step-n{font-size:84px}
  .steps-line{display:none}

  /* testimonials */
  .t-head{flex-direction:column;align-items:flex-start;gap:22px;padding-right:var(--pad)}
  .t-card{flex-basis:84vw;padding:30px 26px}
  .t-quote{font-size:17px}

  /* faq */
  .faq-grid{grid-template-columns:1fr;gap:30px}
  .faq-q{font-size:18px;padding:22px 2px}

  /* area */
  .area-in{grid-template-columns:1fr;gap:34px}
  .area-txt{padding-right:0}
  .area-map{height:380px;margin-left:0}
  .chips{display:grid;grid-template-columns:1fr 1fr}
  .chip{justify-content:flex-start}

  /* cta */
  .cta{padding:74px var(--pad)}
  .cta-in{flex-direction:column;align-items:flex-start}
  .cta-btns{width:100%;flex-direction:column}
  .cta-btns .btn{width:100%;justify-content:center}

  /* contact */
  .contact-in{grid-template-columns:1fr;gap:44px}
  .f2{grid-template-columns:1fr}
  .form-card{padding:32px 24px}

  /* footer */
  .ftr{padding:64px var(--pad) 0}
  .ftr-in{grid-template-columns:1fr 1fr;gap:34px 24px}
  .ftr-brand{grid-column:1 / -1}
  .ftr-bot{flex-direction:column;align-items:flex-start}

  /* floating call shows on mobile */
  .fab{display:flex}
  .to-top{display:none}
}

/* ---------- tablet (681–1080): stack split headers ---------- */
@media(min-width:681px) and (max-width:1080px){
  .svc-head,.t-head{flex-direction:column;align-items:flex-start;gap:22px}
  .svc-head h2{max-width:none}
  .why-in,.contact-in{gap:48px}
  .faq-grid{grid-template-columns:1fr;gap:30px}
  .area-map{height:480px}
}

/* ============================================================
   REDUCED MOTION — render final state, kill all animation
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .marquee-track{animation:none}
  .map-pin .dot::after{animation:none;display:none}
  img.media{opacity:1;transform:none}
  img.media:not(.duo){filter:none}
  img.media.duo{filter:url(#duotone) contrast(1.05)}
}