/* =========================================================

   MEHVAR — full site stylesheet

   One studio. Single-video hero (home) + multi-page system.

   Self-hosted fonts, zero third-party requests.

   ========================================================= */



@font-face{

  font-family:"Inter";

  src:url(fonts/inter-var.woff2) format("woff2");

  font-weight:100 900;font-style:normal;font-display:swap;

  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,

    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+FEFF,U+FFFD;

}

@font-face{

  font-family:"BubbledotICG-FinePos";

  src:url(fonts/bubbledot.woff2) format("woff2");

  font-weight:400;font-style:normal;font-display:swap;

}



:root{

  --bg:#000000;

  --bg-2:#08080a;

  --text:#ffffff;

  --muted:#8e8e8e;

  --nav-text:#2e2e2e;

  --pill-dark:#28282a;

  --sign-in-text:#c8c8c8;

  --nav-shadow:0 4px 14px rgba(0,0,0,.16);

  --trust-bg:#28282a;

  --trust-border:rgba(255,255,255,.4);

  --trust-text:#c4c2c3;

  --font-sans:"Inter","Segoe UI",system-ui,sans-serif;

  --font-display:"BubbledotICG-FinePos","Geist Pixel Circle",monospace;

  --accent:#CF5A3C;

  --line:rgba(255,255,255,.1);

  --line-strong:rgba(255,255,255,.16);

  --maxw:1120px;

  --pad:clamp(16px,3vw,32px);

}



*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{

  margin:0;background:var(--bg);color:var(--text);

  font-family:var(--font-sans);font-weight:400;font-size:clamp(15px,1vw,16.5px);

  line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;

}

img,svg,video{display:block;max-width:100%}

a{color:inherit;text-decoration:none}

h1,h2,h3,h4{margin:0;font-weight:400}

p{margin:0}

button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

ul{margin:0;padding:0;list-style:none}

:focus-visible{outline:1.5px solid var(--accent);outline-offset:3px}

::selection{background:var(--accent);color:#fff}

.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

.skip:focus{position:fixed;z-index:999;top:10px;left:10px;width:auto;height:auto;clip-path:none;

  background:#fff;color:#000;padding:10px 16px;font-size:11px;letter-spacing:.12em;text-transform:uppercase}



.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

.section{padding:clamp(72px,11vh,150px) 0}

.eyebrow{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 clamp(14px,2vw,22px)}

.display{font-family:var(--font-display);letter-spacing:-.02em;line-height:1.04}

.lede{color:rgba(255,255,255,.66);max-width:54ch;font-size:clamp(1rem,1.15vw,1.12rem)}



/* ===================== HEADER ===================== */

.hdr{

  position:fixed;inset:0 0 auto;z-index:40;

  padding:clamp(12px,2vh,18px) var(--pad);

  background:transparent;border-bottom:1px solid transparent;

  transition:background .4s ease,border-color .4s ease,backdrop-filter .4s ease,padding .4s ease;

  animation:slideDown .7s cubic-bezier(.22,1,.36,1) both;

}

.hdr.scrolled{background:rgba(8,8,10,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);

  border-bottom-color:var(--line);padding-top:10px;padding-bottom:10px}

/* inner pages: header solid from the start (no video behind it) */

body:not(.home) .hdr{background:rgba(8,8,10,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);

  border-bottom-color:var(--line)}



.hdr-row{width:100%;max-width:var(--maxw);margin:0 auto;

  display:flex;align-items:center;justify-content:center;gap:clamp(16px,2.4vw,26px)}



.logo{flex:0 0 auto;display:flex;align-items:center;height:clamp(34px,3.6vw,40px);font-family:var(--font-display);font-size:clamp(20px,2.3vw,26px);letter-spacing:.01em;color:#fff;text-decoration:none;line-height:1}

.logo img{height:100%;width:auto;display:block}

.logo svg{width:72%;height:72%}

.logo:hover{transform:scale(1.04);opacity:.92}



.navpill{display:flex;align-items:center;gap:2px;flex:1 1 auto;max-width:430px;

  height:clamp(44px,5.2vw,48px);padding:4px 8px;background:#fff;border-radius:999px;box-shadow:var(--nav-shadow)}

.navpill a{position:relative;flex:1;text-align:center;font-size:clamp(13px,1.4vw,15px);font-weight:500;

  letter-spacing:-.01em;color:var(--nav-text);opacity:.5;padding:8px 4px;transition:opacity .3s ease}

.navpill a:hover{opacity:.75}

.navpill a.on{opacity:1}

.navpill a.on::after{content:"";position:absolute;left:50%;bottom:5px;width:3px;height:3px;border-radius:50%;

  background:#000;transform:translateX(-50%);box-shadow:-5px 0 0 #000,5px 0 0 #000}



.signin{flex:0 0 auto;height:clamp(44px,5.2vw,48px);display:flex;align-items:center;

  padding:0 clamp(16px,1.6vw,22px);border-radius:999px;background:#fff;

  color:#0b0b0d;font-size:clamp(12.5px,1.3vw,14px);font-weight:600;box-shadow:0 4px 14px rgba(0,0,0,.22);

  transition:background .3s ease,color .3s ease,transform .3s ease}

.signin:hover{background:#f0f0f0;color:#0b0b0d;transform:translateY(-1px)}



.burger{display:none;width:48px;height:48px;border-radius:50%;background:var(--pill-dark);

  position:relative;box-shadow:var(--nav-shadow);flex:0 0 auto}

.burger span{position:absolute;left:50%;top:50%;width:18px;height:1.5px;background:#fff;

  transform:translate(-50%,-6.5px);transition:transform .3s ease,opacity .3s ease,background .3s ease}

.burger span:nth-child(2){transform:translate(-50%,0)}

.burger span:nth-child(3){transform:translate(-50%,6.5px)}

body.menu-open .burger{background:#fff}

body.menu-open .burger span{background:#000}

body.menu-open .burger span:nth-child(1){transform:translate(-50%,0) rotate(45deg)}

body.menu-open .burger span:nth-child(2){opacity:0}

body.menu-open .burger span:nth-child(3){transform:translate(-50%,0) rotate(-45deg)}



/* ===================== HERO (home) ===================== */

.hero{position:relative;height:100vh;height:100dvh;overflow:hidden}

.bg{position:absolute;inset:0;background:#000;overflow:hidden;z-index:0}

.bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;z-index:0}

.bg-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;

  background:radial-gradient(130% 100% at 50% 40%,transparent 38%,rgba(0,0,0,.32) 100%),

    linear-gradient(180deg,rgba(0,0,0,.30) 0%,rgba(0,0,0,.06) 30%,rgba(0,0,0,.10) 62%,rgba(0,0,0,.72) 100%)}



.page{position:relative;z-index:1;height:100vh;height:100dvh;width:100%;

  display:flex;flex-direction:column;align-items:center;justify-content:center;

  gap:clamp(18px,3vh,30px);text-align:center;

  padding:max(104px,15vh) var(--pad) clamp(26px,5vh,52px);max-width:1100px;margin:0 auto}



/* trust — neutral client marks (no real companies) */

.trust{display:inline-flex;align-items:center;--trust-size:clamp(36px,4.5vw,42px);margin-bottom:clamp(4px,1vh,12px)}

.ring{width:var(--trust-size);height:var(--trust-size);border-radius:50%;background:var(--trust-bg);

  border:1px solid var(--trust-border);padding:5px;display:grid;place-items:center;position:relative;

  transition:transform .35s cubic-bezier(.22,1,.36,1)}

.ring svg{width:60%;height:60%}

.ring.a1{z-index:1}.ring.a2{margin-left:calc(var(--trust-size)*-.42);z-index:2}

.ring.a3{margin-left:calc(var(--trust-size)*-.42);z-index:4}

.ring.a1:hover{transform:translateY(-2px)}.ring.a2:hover{transform:translateY(-4px)}.ring.a3:hover{transform:translateY(-2px)}

.trust-pill{display:inline-block;vertical-align:middle;background:var(--trust-bg);

 border:1px solid var(--trust-border);border-radius:999px;margin-left:clamp(8px,1vw,14px);

 padding:7px calc(clamp(12px,1.4vw,16px));

 font-size:clamp(11px,1.2vw,13px);font-weight:500;color:var(--trust-text);white-space:nowrap;line-height:1.2}

.trust-pill strong{color:#fff;font-weight:600}



/* stats footer — every cell aligned to the same baseline column */

.stats{display:grid;grid-template-columns:repeat(4,1fr);width:100%;max-width:920px;

  margin-top:clamp(6px,1.5vh,18px);padding-top:clamp(16px,2.4vh,24px);border-top:1px solid var(--line)}

.stat{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;

  justify-content:center;align-items:baseline;column-gap:10px;row-gap:6px;text-align:center}

.stat-ico{grid-column:1;grid-row:1;font-family:var(--font-display);color:var(--accent);

  font-size:clamp(18px,2.4vw,24px);line-height:1;display:flex;align-items:center;justify-content:center}

.stat-ico .ico{width:clamp(18px,2.2vw,24px);height:clamp(18px,2.2vw,24px);color:var(--accent);display:block}

.stat-val{grid-column:2;grid-row:1;font-family:var(--font-sans);color:#fff;font-weight:600;

  font-size:clamp(22px,2.8vw,32px);line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums}

.stat-lbl{grid-column:1 / span 2;grid-row:2;width:100%;text-align:center;color:var(--muted);

  font-size:clamp(11px,1.2vw,12.5px);letter-spacing:.04em;line-height:1.2}



.hero-center{display:flex;flex-direction:column;align-items:center;gap:clamp(16px,2.4vh,26px)}

.headline{font-family:var(--font-display);color:#fff;font-size:clamp(30px,4.6vw,60px);line-height:1.1;letter-spacing:-.03em;text-align:center;max-width:16ch;margin-inline:auto}

.headline .ln{display:block;overflow:hidden}

.headline .ln>span{display:block}

.subhead{max-width:min(520px,92%);margin:0 auto;font-size:clamp(calc(13.5px + 2pt),calc(1.55vw + 2pt),calc(16.5px + 2pt));

  color:#d0d0d0;opacity:.8;line-height:1.55;font-weight:400}

.cta-row{display:flex;align-items:center;gap:clamp(14px,1.8vw,24px);flex-wrap:wrap;justify-content:center}

.cta{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#000;font-weight:600;

  font-size:clamp(13.5px,1.5vw,14.5px);padding:clamp(11px,1.6vh,13px) clamp(22px,3vw,28px);border-radius:999px;

  box-shadow:0 0 0 1px rgba(255,255,255,.15),0 0 22px rgba(255,255,255,.32),0 0 44px rgba(255,255,255,.12);

  transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease}

.cta:hover{transform:translateY(-2px) scale(1.02);

  box-shadow:0 0 0 1px rgba(255,255,255,.25),0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.2)}

.cta-ghost{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7);

  border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:3px;transition:color .3s,border-color .3s}

.cta-ghost:hover{color:#fff;border-color:var(--accent)}



/* ===================== SUBHERO (inner pages) ===================== */

.subhero{padding:clamp(128px,20vh,210px) 0 clamp(46px,7vh,86px);border-bottom:1px solid var(--line);

  background:linear-gradient(180deg,#0b0b0d 0%,#000 100%)}

.breadcrumb{display:flex;gap:8px;align-items:center;font-size:11px;letter-spacing:.12em;text-transform:uppercase;

  color:var(--muted);margin-bottom:clamp(20px,3vw,34px)}

.breadcrumb a:hover{color:#fff}

.breadcrumb span{opacity:.4}

.subhero h1{font-family:var(--font-display);font-size:clamp(34px,6.4vw,76px);line-height:1.02;letter-spacing:-.03em;max-width:18ch}

.subhero .lede{margin-top:clamp(18px,2.4vw,28px)}



/* ===================== HOME: featured work + roof ===================== */

.feature{background:var(--bg-2)}

.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,30px);margin-top:clamp(30px,4vw,50px)}

.fcard{display:flex;flex-direction:column;gap:14px;border:1px solid var(--line);border-radius:4px;overflow:hidden;

  background:#0d0d10;transition:border-color .35s ease,transform .35s ease}

.fcard:hover{border-color:var(--line-strong);transform:translateY(-4px)}

.fcard img{width:100%;aspect-ratio:16/10;object-fit:contain;background:#f2efea;padding:10px}

.fcard .fb{padding:18px 18px 22px;display:flex;flex-direction:column;gap:9px}

.fcard .ftag{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}

.fcard h3{font-size:clamp(18px,2vw,23px);font-weight:500;letter-spacing:-.01em}

.fcard p{color:var(--muted);font-size:14px}

.fcard .fmore{margin-top:4px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7)}

.fcard:hover .fmore{color:var(--accent)}



.roof{background:var(--bg)}

.roof-h{font-family:var(--font-display);font-size:clamp(26px,4.4vw,58px);line-height:1.04;letter-spacing:-.02em;

  max-width:16ch;margin-bottom:clamp(30px,4vw,54px)}

.roof-list li{border-top:1px solid var(--line)}

.roof-list li:last-child{border-bottom:1px solid var(--line)}

.roof-list a{display:grid;grid-template-columns:64px 1.1fr 1.6fr 32px;gap:clamp(14px,3vw,40px);align-items:center;

  padding:clamp(20px,2.6vw,34px) 4px;transition:background .35s ease,padding-left .35s ease}

.roof-list a:hover{background:rgba(255,255,255,.03);padding-left:14px}

.rk{font-family:var(--font-display);font-size:14px;color:var(--accent)}

.rt{font-size:clamp(19px,2.4vw,30px);font-weight:500;letter-spacing:-.01em}

.rd{color:var(--muted);font-size:14.5px;max-width:46ch}

.ra{font-size:20px;color:rgba(255,255,255,.4);transition:transform .35s ease,color .35s ease}

.roof-list a:hover .ra{transform:translateX(6px);color:var(--accent)}

.roof-more{display:inline-block;margin-top:clamp(26px,3vw,42px);font-size:11px;letter-spacing:.18em;

  text-transform:uppercase;color:rgba(255,255,255,.7);border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:3px}

.roof-more:hover{color:#fff;border-color:var(--accent)}



/* ===================== WORK PAGE ===================== */

.case{border-top:1px solid var(--line);padding:clamp(46px,7vw,84px) 0;display:grid;

  grid-template-columns:1.05fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}

.case:nth-child(even) .case-vis{order:2}

.case-vis img{width:100%;border:1px solid var(--line);border-radius:4px;background:#f2efea;box-shadow:0 40px 90px -50px rgba(0,0,0,.9)}

.case-no{font-family:var(--font-display);color:var(--accent);font-size:13px;letter-spacing:.1em}

.case h2{font-family:var(--font-display);font-size:clamp(26px,3.4vw,44px);line-height:1.05;letter-spacing:-.02em;margin:10px 0 6px}

.case .ctag{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

.case p{color:rgba(255,255,255,.7);margin-top:16px;max-width:52ch}

.case .metrics{display:flex;gap:clamp(18px,3vw,40px);margin-top:22px;flex-wrap:wrap}

.case .metrics div{display:flex;flex-direction:column;gap:3px}

.case .metrics b{font-family:var(--font-display);font-size:clamp(20px,2.4vw,30px);color:#fff;font-weight:400}

.case .metrics span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}



/* ===================== SERVICES PAGE ===================== */

.svc{border-top:1px solid var(--line);padding:clamp(40px,5vw,68px) 0;display:grid;

 grid-template-columns:64px 1fr 1.4fr;gap:clamp(16px,3vw,48px);align-items:start;color:inherit;text-decoration:none;transition:background .3s ease}

.svc:hover{background:rgba(255,255,255,.02)}

.svc h2{transition:color .3s ease}

.svc:hover h2{color:var(--accent)}

.svc-no{font-family:var(--font-display);color:var(--accent);font-size:14px}

.svc h2{font-size:clamp(22px,3vw,38px);font-weight:500;letter-spacing:-.02em;line-height:1.06}

.svc p{color:rgba(255,255,255,.7);margin-bottom:14px}

.svc ul{display:flex;flex-wrap:wrap;gap:8px}

.svc li{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6);

  border:1px solid var(--line);padding:5px 10px;border-radius:1px}



/* ===================== PROCESS PAGE ===================== */

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,34px)}

.step{border-top:1px solid var(--line);padding-top:22px;display:flex;flex-direction:column;gap:12px}

.step-no{font-family:var(--font-display);color:var(--accent);font-size:clamp(20px,2.4vw,30px)}

.step h3{font-size:clamp(18px,2vw,24px);font-weight:500;letter-spacing:-.01em}

.step p{color:var(--muted);font-size:14.5px}

.step .sw{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-top:auto;padding-top:8px}



/* booking funnel CTA row */

.funnel-cta{display:flex;align-items:center;justify-content:center;gap:clamp(16px,2.4vw,28px);flex-wrap:wrap;margin-top:clamp(34px,5vw,56px)}

.funnel-or{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}



/* ===================== PRICING PAGE ===================== */

.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,28px);margin-top:clamp(34px,5vw,60px)}

.tier{border:1px solid var(--line);border-radius:4px;padding:clamp(24px,3vw,38px);display:flex;flex-direction:column;gap:16px;

  background:#0b0b0d;transition:border-color .35s ease,transform .35s ease}

.tier:hover{border-color:var(--line-strong);transform:translateY(-4px)}

.tier.feature{background:#fff;color:#000}

.tier.feature .t-name,.tier.feature .t-desc,.tier.feature li{color:#000}

.tier.feature .t-price{color:#000}

.t-name{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

.tier.feature .t-name{color:#2e2e2e}

.t-price{font-family:var(--font-display);font-size:clamp(30px,4vw,46px);line-height:1;letter-spacing:-.02em}

.t-price small{font-family:var(--font-sans);font-size:13px;letter-spacing:0;color:var(--muted)}

.tier.feature .t-price small{color:#555}

.t-desc{color:rgba(255,255,255,.66);font-size:14px;min-height:42px}

.tier ul{display:flex;flex-direction:column;gap:11px;margin-top:4px}

.tier li{font-size:14px;color:rgba(255,255,255,.82);padding-left:20px;position:relative}

.tier li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--accent)}

.tier.feature li::before{background:#000}

.tier .cta{margin-top:auto;width:100%}

.tier .cta-line{background:transparent;color:#fff;border:1px solid var(--line-strong)}

.tier.feature .cta{background:#000;color:#fff;box-shadow:none}

.note{margin-top:clamp(28px,4vw,44px);color:var(--muted);font-size:13px;max-width:70ch;

  border-top:1px solid var(--line);padding-top:20px}



/* ===================== ABOUT PAGE ===================== */

.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:start}

.about-grid p{color:rgba(255,255,255,.74);margin-bottom:18px;max-width:54ch}

.principles{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden}

.principles div{background:#0b0b0d;padding:clamp(20px,2.4vw,30px);display:flex;flex-direction:column;gap:8px}

.principles b{font-family:var(--font-display);font-size:clamp(15px,1.8vw,20px);color:#fff;font-weight:400}

.principles span{color:var(--muted);font-size:13.5px}

.regions{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,28px);margin-top:clamp(30px,4vw,50px)}

.region{border:1px solid var(--line);border-radius:4px;padding:clamp(20px,2.4vw,30px)}

.region b{font-family:var(--font-display);font-size:clamp(16px,1.8vw,22px);color:#fff;font-weight:400;display:block;margin-bottom:8px}

.region span{color:var(--muted);font-size:13.5px}



/* ===================== CONTACT PAGE ===================== */

.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:start}

.contact-info p{color:rgba(255,255,255,.7);margin-bottom:18px;max-width:46ch}

.cinfo{display:flex;flex-direction:column;gap:18px;margin-top:24px}

.cinfo div{display:flex;flex-direction:column;gap:3px}

.cinfo b{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

.cinfo a,.cinfo span{font-size:15px;color:#fff}

.cform{display:flex;flex-direction:column;gap:16px}

.field{display:flex;flex-direction:column;gap:7px}

.field label{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

.field input,.field textarea{background:#0d0d10;border:1px solid var(--line);border-radius:3px;color:#fff;

  font:inherit;padding:13px 14px;transition:border-color .3s ease}

.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent)}

.field textarea{resize:vertical;min-height:130px}

.cform .cta{align-self:flex-start}



/* ===================== FOOTER ===================== */

.site-footer{border-top:1px solid var(--line);background:var(--bg-2);padding:clamp(46px,6vh,80px) 0 clamp(22px,3vh,32px)}

.foot-top{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:clamp(24px,3vw,50px);margin-bottom:clamp(36px,5vw,60px)}

.foot-brand .fmark{display:inline-flex;align-items:center;font-family:var(--font-display);font-size:20px;letter-spacing:.01em;color:#fff}

.fmark img{height:30px;width:auto;display:block}

.foot-brand p{color:var(--muted);font-size:14px;margin-top:14px;max-width:34ch}

.foot-col h4{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:14px}

.foot-col a{display:block;color:var(--muted);font-size:14px;padding:5px 0;transition:color .3s}

.foot-col a:hover{color:#fff}

.foot-col a.on{color:#fff}

.foot-btm{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--line);

  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4)}

.langs{display:flex;gap:2px}

.langs button{font-size:10px;letter-spacing:.14em;color:var(--muted);padding:5px 8px;border-radius:1px;transition:color .3s,background .3s}

.langs button:hover{color:#fff;background:rgba(255,255,255,.06)}

.langs .on{color:#fff;background:rgba(255,255,255,.1)}



/* ===================== MOBILE SHEET ===================== */

.overlay{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:overlayIn .28s ease both}

.sheet{position:fixed;z-index:60;left:50%;top:84px;transform:translateX(-50%);width:min(520px,90vw);

  background:#fff;color:#000;border-radius:28px;padding:22px 18px 20px;box-shadow:0 20px 60px rgba(0,0,0,.45);animation:menuIn .38s cubic-bezier(.22,1,.36,1) both}

.sheet-nav{display:flex;flex-direction:column}

.sheet-nav a{padding:15px 10px;font-size:17px;font-weight:500;color:#2e2e2e;border-bottom:1px solid rgba(0,0,0,.08);animation:linkIn .4s ease both}

.sheet-nav a:nth-child(1){animation-delay:.05s}.sheet-nav a:nth-child(2){animation-delay:.1s}

.sheet-nav a:nth-child(3){animation-delay:.15s}.sheet-nav a:nth-child(4){animation-delay:.2s}

.sheet-nav a:nth-child(5){animation-delay:.25s}.sheet-nav a:nth-child(6){animation-delay:.3s}

.sheet-nav a.on{color:#000}

.sheet-nav a.on::after{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:#000;margin-left:8px;box-shadow:-5px 0 0 #000,5px 0 0 #000;vertical-align:middle}

.sheet-cta{margin-top:14px;border:0 !important;background:var(--pill-dark);color:#fff !important;text-align:center;border-radius:999px}

.sheet[hidden],.overlay[hidden]{display:none}



/* ===================== ENTRANCE (gated on .js) ===================== */

.js .anim{opacity:0;transform:translateY(22px) scale(.98);filter:blur(6px)}

.js .headline .ln>span{opacity:0;transform:translateY(14px)}

.anim.in{animation:reveal .85s cubic-bezier(.22,1,.36,1) forwards;animation-delay:var(--d,0s)}

.cta-row.in{animation:revealPulse .85s cubic-bezier(.22,1,.36,1) forwards;animation-delay:var(--d,0s)}

.headline.in .ln>span{opacity:1;transform:none;transition:opacity .85s cubic-bezier(.22,1,.36,1),transform .85s cubic-bezier(.22,1,.36,1)}

.headline.in .ln:nth-child(2)>span{transition-delay:.18s}

[id]{scroll-margin-top:96px}



@keyframes slideDown{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:none}}

@keyframes reveal{to{opacity:1;transform:none;filter:blur(0)}}

@keyframes revealPulse{0%{opacity:0;transform:translateY(22px) scale(.9);filter:blur(6px)}60%{opacity:1}to{opacity:1;transform:none;filter:blur(0)}}

@keyframes overlayIn{from{opacity:0}to{opacity:1}}

@keyframes menuIn{from{opacity:0;transform:translateX(-50%) translateY(-10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

@keyframes linkIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}



/* ===================== RESPONSIVE ===================== */

@media (max-width:860px){

  .feature-grid{grid-template-columns:1fr 1fr}

  .case{grid-template-columns:1fr;gap:24px}

  .case:nth-child(even) .case-vis{order:0}

  .steps{grid-template-columns:1fr 1fr}

  .price-grid{grid-template-columns:1fr}

  .about-grid,.contact-grid{grid-template-columns:1fr}

  .foot-top{grid-template-columns:1fr 1fr}

}

@media (max-width:720px){

  .navpill,.signin{display:none}.burger{display:block}.hdr-row{justify-content:space-between}

  .hero,.page{height:auto;min-height:100dvh}

  .page{padding:104px var(--pad) clamp(24px,5vh,40px);justify-content:center}

  .headline{letter-spacing:-.08em;line-height:1.05}

  .stats{grid-template-columns:1fr 1fr;gap:clamp(14px,4vw,24px) clamp(16px,4vw,30px);max-width:480px;margin-left:auto;margin-right:auto}

  .roof-list a{grid-template-columns:44px 1fr 24px;gap:14px}.roof-list .rd{display:none}

  .svc{grid-template-columns:1fr;gap:12px}.svc-no{margin-bottom:-6px}

  .feature-grid{grid-template-columns:1fr}

  .principles{grid-template-columns:1fr}

  .regions{grid-template-columns:1fr}

  .foot-top{grid-template-columns:1fr 1fr}

}

@media (max-width:420px){

  .headline{letter-spacing:-.09em;line-height:1.04;font-size:clamp(30px,9vw,44px)}

  .trust{--trust-size:34px}.trust-pill{font-size:12px;padding-right:12px}

  .stats{max-width:340px}

  .foot-top{grid-template-columns:1fr}

}

@media (max-height:700px){

  .page{gap:clamp(12px,2vh,18px)}.subhead{display:none}.trust{margin-bottom:0}

}



@media (prefers-reduced-motion:reduce){

  *{animation:none !important;transition:none !important}

  .js .anim{opacity:1;transform:none;filter:none}

  .js .headline .ln>span{opacity:1;transform:none}

  .bg-video{display:none}

}



/* ===================== SERVICE PAGES ===================== */

.svc-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:center}

.svc-list{list-style:none;margin:18px 0 0;display:flex;flex-direction:column;gap:14px}

.svc-list li{display:flex;flex-direction:column;gap:3px;padding-left:18px;position:relative}

.svc-list li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;background:var(--accent);border-radius:2px}

.svc-list b{font-size:15px;color:#fff;font-weight:600}

.svc-list span{color:var(--muted);font-size:14px;line-height:1.45}

.svc-vis{border:1px solid var(--line);border-radius:6px;background:#f2efea;overflow:hidden}

.svc-vis img{width:100%;display:block;aspect-ratio:16/10;object-fit:contain;padding:12px}

.pmetrics{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,40px);margin-top:18px}

.pmetric{display:flex;flex-direction:column;gap:4px}

.pmetric b{font-size:clamp(30px,4.4vw,52px);color:#fff;font-weight:600;letter-spacing:-.02em;line-height:1}

.pmetric span{color:var(--muted);font-size:13px}

.svc-steps{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.4vw,28px);margin-top:24px}

.svc-step{display:flex;gap:14px;align-items:flex-start;border-top:1px solid var(--line);padding-top:16px}

.svc-step .step-no{font-family:var(--font-display);color:var(--accent);font-size:18px;font-weight:700}

.svc-step p{color:var(--muted);font-size:14.5px;line-height:1.5}

@media (max-width:760px){

  .svc-grid{grid-template-columns:1fr}

  .svc-steps{grid-template-columns:1fr}

  .pmetrics{grid-template-columns:1fr 1fr}

}



/* --- audit fixes: previously-undefined utility classes --- */

.cta-lg{font-size:clamp(15px,1.4vw,17px);padding:16px 30px}

.case-body{display:flex;flex-direction:column;gap:14px}

.case-body .metrics{margin-top:6px}

.faq{display:flex;flex-direction:column;gap:10px;margin-top:8px}

.fitem{border:1px solid var(--line, rgba(255,255,255,.12));border-radius:10px;padding:16px 18px;background:rgba(255,255,255,.02)}

.fitem summary{cursor:pointer;font-weight:600;list-style:none}

.fitem summary::-webkit-details-marker{display:none}

.fitem p{margin-top:10px;color:rgba(255,255,255,.72)}

.store-claim{max-width:60ch;color:rgba(255,255,255,.8);line-height:1.6}











/* === NEW SEO SECTIONS — follow theme margins === */

/* Case studies — inside section > wrap */
.case-study {
  padding: clamp(24px, 3vw, 32px) 0;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 0 clamp(24px, 3vw, 32px);
}
.case-study h3 {
  font-family: var(--font-sans);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.2;
  color: var(--text);
  margin: 0 0 clamp(12px, 1.5vw, 16px);
  padding: 0 clamp(24px, 3vw, 32px);
}
.case-study p {
  font-size: clamp(14px, 1.3vw, 15px);
  line-height: 1.65;
  color: var(--muted);
  margin: 0 0 10px;
  max-width: 68ch;
  padding: 0 clamp(24px, 3vw, 32px);
}
.case-study ul {
  margin: 12px 0;
  padding-left: clamp(44px, 5vw, 52px);
  padding-right: clamp(24px, 3vw, 32px);
}
.case-study li {
  font-size: clamp(14px, 1.3vw, 15px);
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 6px;
}
.case-study em {
  font-size: 0.85em;
  color: var(--muted);
  opacity: 0.8;
  padding: 0 clamp(24px, 3vw, 32px);
}

/* TL;DR boxes */
.tldr {
  margin: clamp(20px, 3vw, 28px) 0;
  padding: clamp(16px, 2vw, 22px) clamp(24px, 3vw, 32px);
  background: var(--bg-2);
  border-left: 4px solid var(--accent);
  border-radius: 0 6px 6px 0;
  font-size: clamp(14px, 1.3vw, 15px);
  line-height: 1.65;
  color: var(--text);
}
.tldr strong {
  color: var(--accent);
  font-weight: 600;
  margin-right: 6px;
}

/* Author bylines */
.byline {
  margin: clamp(20px, 3vw, 28px) 0;
  padding: clamp(12px, 1.5vw, 16px) clamp(24px, 3vw, 32px);
  border-left: 3px solid var(--line-strong);
  font-size: clamp(13px, 1.2vw, 14px);
  color: var(--muted);
  line-height: 1.5;
}
.byline strong {
  color: var(--text);
  font-weight: 500;
}

/* Related reading */
.related-reading {
  padding: clamp(28px, 4vw, 40px) clamp(24px, 3vw, 32px);
  margin-top: clamp(28px, 4vw, 40px);
  border-top: 1px solid var(--line);
}
.related-reading h3 {
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.8vw, 18px);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text);
  margin: 0 0 clamp(14px, 2vw, 18px);
}
.related-reading ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.related-reading li {
  margin-bottom: 10px;
  line-height: 1.4;
}
.related-reading a {
  color: var(--accent);
  text-decoration: none;
  font-size: clamp(14px, 1.3vw, 15px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.related-reading a:hover {
  border-bottom-color: var(--accent);
}

/* Last updated dates */
.last-updated {
  display: inline-block;
  margin-top: 8px;
  font-size: clamp(11px, 1vw, 12px);
  color: var(--muted);
  letter-spacing: 0.01em;
}

/* Resources sections */
.resources {
  padding: clamp(20px, 2.5vw, 24px) clamp(24px, 3vw, 32px);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.resources h3 {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.5vw, 16px);
  font-weight: 600;
  color: var(--text);
  margin: 0 0 12px;
  letter-spacing: -.01em;
}
.resources ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.resources li {
  margin-bottom: 8px;
  line-height: 1.4;
}
.resources a {
  color: var(--accent);
  text-decoration: none;
  font-size: clamp(13px, 1.2vw, 14px);
}
.resources a:hover {
  text-decoration: underline;
}

/* FAQ items */
.faq-item {
  padding: clamp(16px, 2vw, 20px) 0;
  border-bottom: 1px solid var(--line);
}
.faq-item:last-child {
  border-bottom: none;
}
.faq-item h3 {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.4vw, 16px);
  font-weight: 500;
  color: var(--text);
  margin: 0 0 8px;
  letter-spacing: -.01em;
  padding: 0 clamp(24px, 3vw, 32px);
}
.faq-item p {
  font-size: clamp(14px, 1.3vw, 15px);
  line-height: 1.65;
  color: var(--muted);
  margin: 0;
  max-width: 68ch;
  padding: 0 clamp(24px, 3vw, 32px);
}

/* Contact form additions */
.form-group {
  margin-bottom: clamp(16px, 2vw, 20px);
}
.form-group label {
  display: block;
  margin-bottom: 6px;
  color: var(--text);
  font-size: clamp(13px, 1.2vw, 14px);
  font-weight: 500;
}
.form-group select {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font-size: clamp(14px, 1.3vw, 15px);
  font-family: var(--font-sans);
  cursor: pointer;
  appearance: none;
}
.form-group select:focus {
  outline: none;
  border-color: var(--accent);
}