@font-face { font-family:"Archivo"; font-style:normal; font-weight:100 900; font-stretch:62% 125%; font-display:swap; src:url(fonts/archivo-latin-wdth-normal.woff2) format("woff2"); 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+2215,U+FEFF,U+FFFD }
@font-face { font-family:"Archivo"; font-style:normal; font-weight:100 900; font-stretch:62% 125%; font-display:swap; src:url(fonts/archivo-latin-ext-wdth-normal.woff2) format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF }

:root {
  --ink:#171b1e;
  --ink-2:#252b2f;
  --text:#1d2226;
  --muted:#5f6569;
  --copper:#c65a26;
  --copper-dark:#a6471b;
  --copper-soft:#fbeee6;
  --copper-light:#f3b48d;
  --soft:#f3eee6;
  --line:#e4ddd2;
  --white:#fff;
  --radius:16px;
  --ease:cubic-bezier(.22,1,.36,1);
  --narrow:76%;
  --font:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-family:var(--font);
  color:var(--text);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  interpolate-size:allow-keywords
}
* { box-sizing:border-box }
html { scroll-behavior:smooth; scroll-padding-top:90px; view-transition-name:none }
body { margin:0; line-height:1.6; font-size:17px }
img { max-width:100%; display:block }
a { color:inherit; text-decoration:none }
h1,h2,h3 { line-height:1.1; margin:0; letter-spacing:-.025em; font-weight:700; text-wrap:balance }
p { margin:0 }
button,input,select,textarea { font:inherit; color:inherit }
:focus-visible { outline:3px solid var(--copper); outline-offset:3px }
.wrap { width:min(1200px,calc(100% - 48px)); margin-inline:auto }
.stars { color:#f4b400; letter-spacing:1px }
svg { flex-shrink:0 }

/* Buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:12px 22px; border-radius:12px; border:2px solid var(--copper);
  background:var(--copper); color:#fff; font-weight:650; cursor:pointer;
  transition:background .25s,border-color .25s,color .25s,transform .4s var(--ease),box-shadow .25s
}
.btn:hover { background:var(--copper-dark); border-color:var(--copper-dark); transform:translateY(-2px); box-shadow:0 10px 24px #c8642d40 }
.btn svg { width:18px; height:18px; fill:currentColor }
.btn svg:has(use[href="#i-arrow"]) { fill:none; transition:transform .4s var(--ease) }
.btn:hover svg:has(use[href="#i-arrow"]) { transform:translateX(4px) }
.btn-small { min-height:42px; padding:8px 16px; font-size:15px; border-radius:10px }
.btn-large { min-height:58px; padding:14px 28px; font-size:17px }
.btn-block { width:100% }
.btn-outline { background:transparent; color:var(--ink); border-color:var(--line) }
.btn-outline:hover { background:var(--soft); border-color:var(--ink); color:var(--ink); box-shadow:none }
.btn-ghost { background:#ffffff14; border-color:#ffffff8c; color:#fff; backdrop-filter:blur(6px) }
.btn-ghost:hover { background:#fff; border-color:#fff; color:var(--ink); box-shadow:none }

/* Display type: tall, condensed capitals for headlines */
.hero h1,.section-head h2,.band h2,.quote h2,.footer-cta h2,.quick h2,.hero-stats b,.badge b,.service h3 { font-stretch:var(--narrow); text-transform:uppercase; font-weight:800; letter-spacing:-.005em }

/* Top bar and header */
.topbar { background:var(--ink); color:#c8ccce; font-size:14px; position:relative; z-index:31 }
.topbar .wrap { display:flex; justify-content:space-between; gap:20px; padding-block:9px }
.topbar b { color:#fff; font-weight:600 }
.header { position:sticky; top:0; z-index:30; margin-bottom:-77px; border-bottom:1px solid #ffffff24; transition:background .35s,box-shadow .35s,border-color .35s }
.header.is-scrolled { background:#fffffff2; backdrop-filter:blur(14px); border-color:var(--line); box-shadow:0 6px 24px #171b1e12 }
.header-inner { display:flex; align-items:center; gap:28px; height:76px }
.logo { display:flex; align-items:center; gap:11px; font-size:21px; font-weight:750; letter-spacing:-.035em; color:var(--ink); white-space:nowrap; transition:color .35s }
.logo svg { width:38px; height:38px }
.logo rect { fill:var(--copper) }
.logo path { fill:none; stroke:#fff; stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round }
.nav { display:flex; gap:28px; margin-left:auto; font-size:15px; font-weight:550; color:#3b4246 }
.nav a { padding-block:8px; position:relative; transition:color .35s }
.nav a:hover { color:var(--ink) }
.nav a::after { content:''; position:absolute; left:0; right:0; bottom:2px; height:2px; background:var(--copper); transform:scaleX(0); transition:transform .35s var(--ease); transform-origin:left }
.nav a:hover::after { transform:scaleX(1) }
.header-phone svg { color:var(--copper) }
.header:not(.is-scrolled) .logo,.header:not(.is-scrolled) .nav,.header:not(.is-scrolled) .nav a:hover { color:#fff }
.header:not(.is-scrolled) .header-phone { color:#fff; border-color:#ffffff5c; background:#ffffff0f }
.header:not(.is-scrolled) .header-phone svg { color:var(--copper-light) }

/* Hero */
.hero { position:relative; min-height:max(760px,calc(100svh - 40px)); display:flex; flex-direction:column; justify-content:flex-end; color:#fff; overflow:hidden; background:var(--ink) }
.hero-media { position:absolute; inset:0 }
.hero-img { width:100%; height:100%; object-fit:cover; object-position:center 40% }
.hero::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#0f1214f2 0%,#0f1214b3 45%,#0f121466 100%),linear-gradient(0deg,#0f1214f2 0%,#0f121400 50%),linear-gradient(180deg,#0f121499,#0f121400 22%) }
.hero-main { position:relative; z-index:1; display:grid; grid-template-columns:1fr 390px; gap:60px; align-items:end; padding-top:150px; padding-bottom:56px }
.hero-kicker { display:inline-flex; align-items:center; gap:12px; font-weight:600; font-size:15px; letter-spacing:.02em; color:var(--copper-light); margin-bottom:22px }
.hero-kicker::before { content:''; width:30px; height:2px; background:var(--copper) }
.hero h1 { font-size:clamp(48px,5.3vw,76px); line-height:.92; font-stretch:68% }
.hero .line { display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em }
.hero .line > span { display:block; text-wrap:balance }
.mark { position:relative; display:inline-block; color:var(--copper-light) }
.mark::after { content:''; position:absolute; left:0; right:.12em; bottom:-.02em; height:.06em; background:var(--copper); transform-origin:left }
.hero-lead { font-size:clamp(17px,1.5vw,19px); color:#d6dadc; max-width:560px; margin-top:26px }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:32px }
.hero-trust { list-style:none; padding:0; margin:28px 0 0; display:flex; flex-wrap:wrap; gap:12px 30px; font-size:15px; color:#cfd3d5 }
.hero-trust li { display:flex; align-items:center; gap:9px }
.hero-trust svg { width:20px; height:20px; color:var(--copper-light) }
.hero-trust b { color:#fff }
.hero-trust .stars { font-size:13px }

/* Quick quote card in the hero */
.quick { position:relative; display:grid; gap:14px; background:#fff; color:var(--text); border-radius:20px; padding:28px 28px 24px; box-shadow:0 30px 70px #0000004d }
.quick-status { display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; color:#2f7d4f }
.quick-status.closed { color:var(--muted) }
.quick-status.closed .dot { background:var(--copper-light); animation:none }
.quick h2 { font-size:34px; line-height:.95; color:var(--ink) }
.quick-text { color:var(--muted); font-size:15px; line-height:1.5; margin-top:-4px }
.quick-field { display:grid; gap:7px; font-weight:600; font-size:15px; color:var(--ink) }
.quick-field input { width:100%; border:1.5px solid var(--line); border-radius:11px; padding:13px 14px; background:#fbfaf8; font-weight:500; font-size:17px; transition:border-color .2s,box-shadow .2s,background .2s }
.quick-field input:focus { outline:none; border-color:var(--copper); background:#fff; box-shadow:0 0 0 4px #c65a2626 }
.quick-note { text-align:center; color:var(--muted); font-size:13px; margin-top:-4px }
.quick-success { background:#eef7ef; border:1px solid #cfe7d3; color:#2f5e3d; border-radius:12px; padding:14px 16px; font-size:14.5px; line-height:1.5; animation:pop .5s var(--ease) }
.quick-success[hidden] { display:none }

/* Key numbers along the bottom of the hero */
.hero-stats { position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #ffffff2b; margin-bottom:8px }
.hero-stats > div { display:grid; gap:2px; padding:24px 24px 30px }
.hero-stats > div:first-child { padding-left:0 }
.hero-stats > div + div { border-left:1px solid #ffffff1f }
.hero-stats b { display:block; font-size:clamp(40px,4.4vw,60px); line-height:1; color:#fff; font-variant-numeric:tabular-nums }
.hero-stats b span { color:inherit }
.hero-stats .stars { font-size:.55em; color:#f4b400; margin-left:.15em }
.hero-stats > div > span { color:#b7bdc0; font-size:15px }

@media (prefers-reduced-motion:no-preference) {
  .hero-img { animation:settle 2.8s var(--ease) both }
  .hero .line > span { animation:rise 1s var(--ease) both; animation-delay:calc(var(--i) * 90ms + 120ms) }
  .intro { animation:fade-up 1s var(--ease) both; animation-delay:calc(var(--i) * 90ms + 120ms) }
  .mark::after { animation:draw 1s var(--ease) .75s both }
}
@keyframes settle { from { transform:scale(1.1) } }
@keyframes rise { from { transform:translateY(105%) } }
@keyframes fade-up { from { opacity:0; transform:translateY(16px) } }
@keyframes draw { from { transform:scaleX(0) } }

/* Sections */
.section { padding-block:120px }
.section-soft { background:var(--soft) }
#darbi { position:relative }
#darbi::before { content:''; position:absolute; z-index:-1; inset:0 calc(50% - 50vw); background:var(--soft) }
.section-head { max-width:640px; margin-bottom:54px }
.section-head.split { max-width:none; display:grid; grid-template-columns:1.15fr 1fr; gap:20px 70px; align-items:end }
.kicker { color:var(--copper); font-weight:700; font-size:13.5px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:14px }
.kicker-light { color:var(--copper-light) }
.section-head h2,.band h2,.quote h2 { font-size:clamp(40px,5vw,72px); line-height:.92; color:var(--ink) }
.section-head p:not(.kicker) { color:var(--muted); font-size:18px; max-width:520px }
.section-head:not(.split) p:not(.kicker) { margin-top:16px }

/* Services */
.services { display:grid; grid-template-columns:repeat(4,1fr); gap:18px }
.service { position:relative; isolation:isolate; display:flex; align-items:flex-end; aspect-ratio:3/4.1; border-radius:var(--radius); overflow:hidden; color:#fff; background:var(--ink) }
.service img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1.1s var(--ease) }
.service::after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg,#0d1820f2 0%,#0d1820a6 38%,#0d182000 66%); transition:opacity .4s }
.service:hover img { transform:scale(1.06) }
.service-body { display:grid; gap:7px; padding:24px 24px 26px }
.service-no { font-size:13px; font-weight:600; color:var(--copper-light); letter-spacing:.05em }
.service h3 { font-size:30px; line-height:.95 }
.service p { font-size:15px; color:#d4dce2; line-height:1.5 }
.extras { display:grid; grid-template-columns:1fr 1fr 1fr; margin-top:18px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden }
.extras > div { padding:26px 28px }
.extras > * + * { border-left:1px solid var(--line) }
.extras h3 { font-size:19px; color:var(--ink); margin-bottom:6px; letter-spacing:-.02em }
.extras p { color:var(--muted); font-size:15.5px; line-height:1.5 }
.extras-call { display:grid; grid-template-columns:1fr auto; align-content:center; column-gap:16px; padding:26px 28px; background:var(--copper-soft); transition:background .3s,color .3s }
.extras-call span:first-child { grid-column:1; color:var(--muted); font-size:15px; transition:color .3s }
.extras-call b { grid-column:1; font-size:20px; color:var(--ink); letter-spacing:-.02em; transition:color .3s }
.extras-call b span { color:inherit }
.extras-call svg { grid-column:2; grid-row:1 / span 2; align-self:center; width:26px; height:26px; color:var(--copper); transition:transform .4s var(--ease),color .3s }
.extras-call:hover { background:var(--copper) }
.extras-call:hover span:first-child,.extras-call:hover b,.extras-call:hover svg { color:#fff }
.extras-call:hover svg { transform:translateX(4px) }

/* Why us band */
.band { background:var(--ink); color:#fff; padding-block:110px }
.band-inner { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center }
.band-media { position:relative }
.band img { border-radius:var(--radius); aspect-ratio:4/3.6; object-fit:cover; width:100% }
.badge { position:absolute; right:-26px; bottom:34px; display:flex; align-items:center; gap:12px; background:var(--copper); color:#fff; border-radius:var(--radius); padding:16px 22px 16px 20px; box-shadow:0 20px 40px #0006 }
.badge b { font-size:56px; line-height:.9 }
.badge span { font-size:14px; line-height:1.3; font-weight:600 }
.band h2 { color:#fff; margin-bottom:32px }
.checks { list-style:none; padding:0; margin:0 0 38px; display:grid; gap:18px }
.checks li { padding-left:40px; position:relative; color:#c4ced7; font-size:17px }
.checks li::before { content:''; position:absolute; left:0; top:2px; width:26px; height:26px; border-radius:50%; background:var(--copper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5 10 16l8-8' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat }
.checks b { color:#fff }

/* Gallery */
.filters { display:flex; flex-wrap:wrap; gap:8px; margin:-22px 0 28px }
.chip { border:1.5px solid var(--line); background:#fff; border-radius:999px; padding:9px 16px; font-size:15px; font-weight:600; color:var(--ink); cursor:pointer; transition:background .25s,border-color .25s,color .25s }
.chip small { color:var(--muted); font-weight:500; margin-left:3px; transition:color .25s }
.chip:hover { border-color:var(--ink) }
.chip[aria-pressed="true"] { background:var(--ink); border-color:var(--ink); color:#fff }
.chip[aria-pressed="true"] small { color:#9fb0bd }
.gallery { display:grid; grid-template-columns:repeat(4,1fr); gap:20px }
.gallery figure { margin:0 }
.gallery figure[hidden] { display:none }
.gallery .g-wide,.gallery.filtered figure { grid-column:span 2 }
.gallery button { display:block; width:100%; padding:0; border:0; border-radius:var(--radius); overflow:hidden; cursor:zoom-in; background:var(--soft) }
.gallery img { width:100%; height:300px; object-fit:cover; transition:transform 1.1s var(--ease) }
.gallery.filtered img { height:340px }
.gallery button:hover img { transform:scale(1.05) }
.gallery figcaption { padding-top:13px; display:grid; gap:1px }
.gallery figcaption b { color:var(--ink) }
.gallery figcaption span { color:var(--muted); font-size:15px }
::view-transition-group(*) { animation-duration:.55s; animation-timing-function:var(--ease) }

/* Reviews */
.reviews-head { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:54px }
.reviews-head .section-head { margin-bottom:0 }
.rating-box { display:flex; align-items:center; gap:16px; background:#fff; border-radius:var(--radius); padding:18px 24px; box-shadow:0 10px 30px #13202a10 }
.rating-box b { font-size:32px; color:var(--ink); letter-spacing:-.03em }
.rating-box small { display:block; color:var(--muted); font-size:14px }
.g-logo { width:36px; height:36px }
.reviews { display:grid; grid-template-columns:repeat(3,1fr); gap:22px }
.review { margin:0; background:#fff; border-radius:var(--radius); padding:30px; display:flex; flex-direction:column; gap:18px; box-shadow:0 2px 0 #13202a08; transition:transform .5s var(--ease),box-shadow .5s }
.review:hover { transform:translateY(-4px); box-shadow:0 20px 40px #13202a14 }
.review-top { display:flex; justify-content:space-between; align-items:center }
.review-top svg { width:20px; height:20px }
.review blockquote { margin:0; font-size:17px; color:#2c3740; flex-grow:1; line-height:1.6 }
.review figcaption { display:grid; grid-template-columns:auto 1fr; column-gap:12px; align-items:center; padding-top:18px; border-top:1px solid var(--line) }
.review figcaption b { color:var(--ink) }
.review figcaption small { grid-column:2; color:var(--muted); font-size:14px }
.avatar { grid-row:span 2; width:42px; height:42px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; font-weight:700 }

/* Process */
.steps { position:relative; list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,1fr); gap:28px }
.steps::before,.steps::after { content:''; position:absolute; top:25px; left:26px; right:calc(25% - 47px); height:2px; background:var(--line) }
.steps::after { background:var(--copper); transform:scaleX(var(--progress,1)); transform-origin:left; transition:transform 1.6s var(--ease) .2s }
.steps li { position:relative; z-index:1 }
.step-no { display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:var(--copper); color:#fff; font-weight:700; font-size:19px; margin-bottom:24px; box-shadow:0 0 0 7px #fff }
.steps h3 { font-size:21px; color:var(--ink); margin-bottom:8px }
.steps p { color:var(--muted); font-size:16px }

/* Quote form */
.quote { background:radial-gradient(90% 120% at 0% 0%,var(--ink-2),var(--ink) 60%); color:#fff }
.quote-inner { display:grid; grid-template-columns:.9fr 1.1fr; gap:80px; align-items:start }
.quote h2 { color:#fff; margin-bottom:18px }
.quote-text > p { color:#c4ced7; font-size:18px }
.quote-text > .status { display:inline-flex; align-items:center; gap:10px; margin-top:28px; padding:8px 15px 8px 13px; border-radius:999px; background:#ffffff12; font-size:14.5px; color:#dfe6eb }
.dot { width:9px; height:9px; border-radius:50%; background:#5fd38d; box-shadow:0 0 0 0 #5fd38d80; animation:pulse 2.4s infinite }
.status.closed .dot { background:var(--copper-light); animation:none }
@keyframes pulse { 70% { box-shadow:0 0 0 9px #5fd38d00 } 100% { box-shadow:0 0 0 0 #5fd38d00 } }
.quote-phone { display:block; margin-top:34px; font-size:clamp(32px,3.4vw,44px); font-weight:720; letter-spacing:-.03em; width:fit-content; transition:color .2s }
.quote-phone:hover { color:var(--copper-light) }
.quote-phone small { display:block; font-size:13.5px; letter-spacing:.08em; text-transform:uppercase; color:#97a5b1; font-weight:600 }
.quote-meta { margin-top:14px; color:#97a5b1; font-size:15px }
.quote-form { background:#fff; color:var(--text); border-radius:20px; padding:36px; box-shadow:0 30px 70px #00000040; display:grid; gap:18px }
.quote-form .row { display:grid; grid-template-columns:1fr 1fr; gap:16px }
.quote-form label,.work legend { display:grid; gap:7px; font-weight:600; font-size:15px; color:var(--ink) }
.quote-form small { font-weight:400; color:var(--muted) }
.quote-form input:not([type=file]):not([type=radio]),.quote-form textarea { width:100%; border:1.5px solid var(--line); border-radius:11px; padding:12px 14px; background:#fbfaf8; font-weight:400; transition:border-color .2s,box-shadow .2s,background .2s }
.quote-form :is(input,textarea):focus { outline:none; border-color:var(--copper); background:#fff; box-shadow:0 0 0 4px #c65a2626 }
.quote-form textarea { resize:vertical }
.work { border:0; padding:0; margin:0; min-width:0 }
.work legend { padding:0; margin-bottom:9px }
.work-options { display:flex; flex-wrap:wrap; gap:8px }
.work-options label { position:relative; display:block; font-weight:500 }
.work-options input { position:absolute; opacity:0; inset:0; cursor:pointer }
.work-options span { display:block; padding:9px 15px; border:1.5px solid var(--line); border-radius:999px; background:#fbfaf8; font-size:14.5px; transition:background .2s,border-color .2s,color .2s }
.work-options label:hover span { border-color:var(--ink) }
.work-options input:checked + span { background:var(--ink); border-color:var(--ink); color:#fff }
.work-options input:focus-visible + span { outline:3px solid var(--copper); outline-offset:2px }
.file { position:relative; cursor:pointer }
.file input { position:absolute; inset:0; opacity:0; cursor:pointer }
.file-row { display:flex; align-items:center; gap:12px; font-weight:400; min-height:49px }
.file-btn { border:1.5px dashed #cfc7bb; background:var(--soft); border-radius:11px; padding:11px 15px; font-weight:600; font-size:15px; white-space:nowrap; transition:border-color .2s,background .2s }
.file:hover .file-btn,.file:focus-within .file-btn { border-color:var(--copper); background:var(--copper-soft) }
.file-name { color:var(--muted); font-size:13.5px; line-height:1.3 }
.form-note { color:var(--muted); font-size:13px; text-align:center }
.form-success[hidden] { display:none }
.form-success { display:flex; gap:14px; align-items:flex-start; background:#eef7ef; border:1px solid #cfe7d3; border-radius:12px; padding:18px; animation:pop .5s var(--ease) }
.form-success svg { width:28px; height:28px; fill:none; stroke:#2f8a46; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round }
.form-success b { color:#1f5e30 }
.form-success p { color:#3d6b48; font-size:15px }
@keyframes pop { from { opacity:0; transform:translateY(8px) } }

/* FAQ */
.faq-wrap { display:grid; grid-template-columns:1fr 1.4fr; gap:70px }
.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 0; font-weight:650; font-size:19px; color:var(--ink); letter-spacing:-.01em }
.faq summary::-webkit-details-marker { display:none }
.faq summary::after { content:'+'; display:grid; place-items:center; flex-shrink:0; width:34px; height:34px; border-radius:50%; background:var(--copper-soft); font-size:22px; line-height:1; color:var(--copper); transition:transform .35s var(--ease),background .25s,color .25s }
.faq details[open] summary::after { transform:rotate(45deg); background:var(--copper); color:#fff }
.faq p { color:var(--muted); padding:0 54px 24px 0 }
.faq details::details-content { block-size:0; overflow:hidden; transition:block-size .4s var(--ease),content-visibility .4s allow-discrete }
.faq details[open]::details-content { block-size:auto }

/* Footer */
.footer { background:#111416; color:#97a5b1; padding-top:90px }
.footer-cta { display:flex; justify-content:space-between; align-items:center; gap:40px; padding-bottom:70px; margin-bottom:60px; border-bottom:1px solid #ffffff14 }
.footer-cta h2 { color:#fff; font-size:clamp(38px,4.4vw,60px); line-height:.92; max-width:640px }
.footer-actions { display:flex; flex-wrap:wrap; gap:12px }
.footer-inner { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:50px; padding-bottom:50px }
.logo-light { color:#fff; margin-bottom:16px }
.footer h3 { color:#fff; font-size:16px; margin-bottom:12px; letter-spacing:0 }
.footer a:hover { color:#fff }
.footer-bottom { border-top:1px solid #ffffff14; padding-block:24px; font-size:14px }

/* Mobile call bar */
.mobile-bar { display:none }

/* Demo controls */
.demo-pill { position:fixed; left:16px; bottom:16px; z-index:40; border:0; border-radius:30px; padding:9px 16px; background:#171b1ed9; color:#fff; font-size:13px; font-weight:600; cursor:pointer; backdrop-filter:blur(8px); box-shadow:0 6px 20px #0003; transition:background .2s }
.demo-pill:hover { background:var(--ink) }
dialog { border:0; border-radius:20px; padding:0; box-shadow:0 30px 80px #0006; opacity:0; transform:translateY(12px) scale(.98); transition:opacity .3s,transform .3s var(--ease),overlay .3s allow-discrete,display .3s allow-discrete }
dialog[open] { opacity:1; transform:none }
dialog::backdrop { background:#0d151cb3; backdrop-filter:blur(4px); opacity:0; transition:opacity .3s,overlay .3s allow-discrete,display .3s allow-discrete }
dialog[open]::backdrop { opacity:1 }
@starting-style { dialog[open],dialog[open]::backdrop { opacity:0 } dialog[open] { transform:translateY(12px) scale(.98) } }
.demo-panel { width:min(440px,calc(100% - 32px)) }
.demo-panel form { padding:30px; display:grid; gap:16px }
.demo-panel h2 { font-size:24px; color:var(--ink) }
.demo-panel p { color:var(--muted); font-size:15px }
.demo-panel label { display:grid; gap:6px; font-weight:600; font-size:15px }
.demo-panel small { font-weight:400; color:var(--muted) }
.demo-panel input { border:1.5px solid var(--line); border-radius:10px; padding:11px 13px }
.demo-panel input:focus { outline:none; border-color:var(--copper); box-shadow:0 0 0 4px #c8642d26 }
.demo-actions { display:flex; gap:10px; margin-top:6px }
.lightbox { background:transparent; box-shadow:none; max-width:min(1100px,calc(100% - 32px)); overflow:visible }
.lightbox img { border-radius:12px; max-height:85vh; width:auto; margin:auto }
.lightbox-close { position:absolute; top:-46px; right:0; border:0; background:none; color:#fff; font-size:38px; line-height:1; cursor:pointer }

/* Scroll reveal */
.motion .rise { opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease),transform 1s var(--ease); transition-delay:var(--d,0ms) }
.motion .rise.in { opacity:1; transform:none }
.motion .review.rise.in:hover { transform:translateY(-4px) }
.motion .steps:not(.in) { --progress:0 }

/* Responsive */
@media (max-width:1000px) {
  .nav { display:none }
  .hero-main { grid-template-columns:1fr; gap:40px; padding-top:130px }
  .quick { max-width:460px }
  .hero-stats { grid-template-columns:1fr 1fr }
  .hero-stats > div:nth-child(3) { border-left:0; padding-left:0 }
  .hero-stats > div:nth-child(n+3) { border-top:1px solid #ffffff1f }
  .header-phone { margin-left:auto }
  .services { grid-template-columns:1fr 1fr }
  .extras { grid-template-columns:1fr }
  .extras > * + * { border-left:0; border-top:1px solid var(--line) }
  .reviews { grid-template-columns:1fr 1fr }
  .gallery { grid-template-columns:1fr 1fr }
  .gallery .g-wide,.gallery.filtered figure { grid-column:auto }
  .gallery img,.gallery.filtered img { height:240px }
  .section-head.split { grid-template-columns:1fr }
  .band-inner,.quote-inner,.faq-wrap { grid-template-columns:1fr; gap:48px }
  .badge { right:16px }
  .steps { grid-template-columns:1fr 1fr; row-gap:40px }
  .steps::before,.steps::after { display:none }
  .footer-cta { flex-direction:column; align-items:flex-start }
  .footer-inner { grid-template-columns:1fr 1fr }
  .reviews-head { flex-direction:column; align-items:flex-start }
}
@media (max-width:640px) {
  body { font-size:16px }
  .wrap { width:calc(100% - 32px) }
  .topbar { font-size:13px }
  .topbar .wrap > span:not(:first-child) { display:none }
  .header-inner { height:64px; gap:12px }
  .header { margin-bottom:-65px }
  .logo { font-size:19px }
  .logo svg { width:34px; height:34px }
  .header-phone,.header-cta { display:none }
  .hero { min-height:auto }
  .hero-main { padding-top:118px; padding-bottom:40px }
  .hero h1 { font-size:clamp(36px,11.1vw,50px) }
  .quick { display:none }
  .hero-stats > div { padding:18px 16px 22px }
  .hero-stats > div:nth-child(odd) { padding-left:0 }
  .hero-stats b { font-size:40px }
  .hero-stats > div > span { font-size:13.5px }
  .hero-actions .btn { width:100% }
  .hero-trust { gap:10px; font-size:14px; flex-direction:column }
  .section { padding-block:76px }
  .section-head,.section-head.split { margin-bottom:34px; gap:14px }
  .section-head p:not(.kicker) { font-size:16.5px }
  .services { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; margin-inline:-16px; padding-inline:16px; scrollbar-width:none }
  .services::-webkit-scrollbar { display:none }
  .service { flex:0 0 76%; scroll-snap-align:center; aspect-ratio:3/3.9 }
  .extras > div,.extras-call { padding:22px }
  .band { padding-block:76px }
  .badge { right:12px; bottom:16px; padding:12px 16px }
  .badge b { font-size:38px }
  .filters { margin-top:-10px }
  .chip { padding:8px 13px; font-size:14px }
  .gallery { grid-template-columns:1fr 1fr; gap:14px }
  .gallery img,.gallery.filtered img { height:auto; aspect-ratio:1 }
  .gallery figcaption b { font-size:15px; line-height:1.3 }
  .gallery figcaption span { font-size:13px }
  .reviews { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; margin-inline:-16px; padding:0 16px 6px; scrollbar-width:none }
  .reviews::-webkit-scrollbar { display:none }
  .review { flex:0 0 86%; scroll-snap-align:center; padding:24px }
  .steps { grid-template-columns:1fr; row-gap:26px }
  .steps li { display:grid; grid-template-columns:52px 1fr; column-gap:16px }
  .step-no { grid-row:span 2; margin:0 }
  .steps h3 { margin:12px 0 4px }
  .quote-form { padding:24px 20px }
  .quote-form .row { grid-template-columns:1fr }
  .faq summary { font-size:17px }
  .faq p { padding-right:0 }
  .footer { padding-top:64px; padding-bottom:96px }
  .footer-cta { padding-bottom:48px; margin-bottom:44px }
  .footer-actions,.footer-actions .btn { width:100% }
  .footer-inner { grid-template-columns:1fr; gap:32px }
  .mobile-bar { display:grid; grid-template-columns:1fr 1.7fr; gap:8px; position:fixed; left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom)); z-index:35; padding:8px; border-radius:18px; background:#ffffffeb; backdrop-filter:blur(16px); box-shadow:0 12px 32px #13202a33,0 0 0 1px #13202a12 }
  .mobile-bar .btn { min-height:48px; padding-inline:12px; border-radius:12px; font-size:16px }
  .btn-ghost-dark { background:#fff; color:var(--ink); border-color:#d9d3c9 }
  .btn-ghost-dark svg { color:var(--copper) }
  .btn-ghost-dark:hover { background:var(--soft); color:var(--ink); border-color:var(--ink); box-shadow:none }
  .demo-pill { bottom:92px; left:12px; font-size:12px; padding:7px 13px }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*::before,*::after,::view-transition-group(*) { transition:none!important; animation:none!important }
}