/* Magworks synchronized sliding doors. Colour roles (see docs/synchronized-sliding-doors/spec.md):
   green = WhatsApp buttons only; copper = one highlighted phrase on light, and step numerals; gold = brand,
   and highlights on night. Sections alternate paper and sand so every break shows. */
@font-face{font-family:Manrope;font-style:normal;font-weight:500 800;font-display:swap;src:url(fonts/manrope-latin.woff2) format("woff2")}
:root{
  --ink:#1c1a17;--ink-2:#57534e;--paper:#fbf8f3;--sand:#f2e9dc;--white:#fff;--line:#e4dacb;--line-2:#d9cab4;
  --gold:#c79a57;--copper:#b04a0e;--wa:#1fa855;--wa-edge:#178f43;--wa-hover:#1b9a4d;
  --night:#1a1714;--night-ink:#f6f1e9;--night-2:#c9bfb1;--glass:#e3ecef;
  --gutter:20px;--font:Manrope,Arial,sans-serif;
  --h1:clamp(40px,12.3vw,52px);
  /* The hero video takes what the first screen has left after the header, copy and button (256px plus the
     two headline lines), so the whole button stays on screen; never under 200px, never taller than wide. */
  --hero-video:min(350px,calc(100vw - 2 * var(--gutter)))
}
@supports (height:1svh){:root{--hero-video:clamp(200px,calc(100svh - 256px - 2.08 * var(--h1)),min(350px,calc(100vw - 2 * var(--gutter))))}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-bottom:96px}
body{margin:0;background:var(--paper);color:var(--ink);font:500 17px/27px var(--font)}
h1,h2,h3{margin:0;color:inherit;font-weight:800;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:var(--h1);line-height:1.04;letter-spacing:-.03em}
h2{font-size:32px;line-height:36px}
h3{font-size:20px;line-height:26px;font-weight:700;letter-spacing:-.01em}
p,ul,ol,blockquote{margin:0}
img,video{display:block;max-width:100%}
img{height:auto}
figure{margin:0}
[hidden]{display:none!important}
button,a,video,summary{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.final :focus-visible,.viewer :focus-visible{outline-color:var(--gold)}
.hero-media :focus-visible,.tile-toggle:focus-visible{outline-color:var(--night-ink);box-shadow:0 0 0 3px var(--night)}
::selection{background:#f1dcc4;color:var(--ink)}
.wrap{width:min(100%,calc(1120px + 2 * var(--gutter)));margin-inline:auto;padding-inline:var(--gutter)}
.narrow{max-width:calc(720px + 2 * var(--gutter))}
.skip-link{position:absolute;left:8px;top:-64px;z-index:40;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:10px;background:var(--ink);color:var(--paper);font-size:15px;font-weight:700}
.skip-link:focus{top:8px}

/* Type roles */
.eyebrow{font-size:14px;line-height:18px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);text-wrap:balance}
.hl{color:var(--copper)}
.lead{margin-top:12px;color:var(--ink-2)}

/* WhatsApp buttons: the only green on the page. White text, as on WhatsApp (Lucas, 29 Sep). WhatsApp's own #25D366
   gives white only 2:1, so the green is a little deeper (#1FA855, 3.1:1) and the text large: 18.7px bold or more
   from a 390px phone, where WCAG's minimum is 3:1. Hover goes darker, never lighter. */
.wa{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 24px;border:1px solid var(--wa-edge);border-radius:999px;background:var(--wa);color:var(--white);font:800 clamp(16px,4.8vw,19px)/1.2 var(--font);text-align:center;text-decoration:none;box-shadow:0 6px 16px rgb(31 168 85 / .3);cursor:pointer;transition:background-color .12s,transform .12s}
.wa:hover{background:var(--wa-hover)}
.wa:active{transform:translateY(1px)}
.wa svg,.text-link svg{flex:none;width:24px;height:24px;fill:currentColor}
.text-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--ink);font-weight:700;text-decoration:underline 2px var(--copper);text-underline-offset:5px}
.text-link svg{width:20px;height:20px}
.text-link:hover{color:var(--copper)}

/* Header */
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;padding-block:8px}
.logo{width:auto;height:52px}
.wa-header{display:none}

/* Hero: on phones, the promise and price first, then the door moving, then the button. */
.hero{padding:24px 0 56px}
.hero-inner{display:grid;width:min(100%,calc(1120px + 2 * var(--gutter)));margin-inline:auto;padding-inline:var(--gutter)}
.hero h1{margin:10px 0 14px}
.price-line{font-size:clamp(15px,4.6vw,18px);line-height:26px;font-weight:600;white-space:nowrap}
.price-line b{font-weight:800}
.hero-media{position:relative;height:var(--hero-video);margin-top:20px;border-radius:16px;background:var(--night);overflow:hidden}
.hero-media video{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.hero-toggle,.tile-toggle{position:absolute;right:10px;bottom:10px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:rgb(26 23 20 / .72);color:var(--night-ink);cursor:pointer}
.hero-toggle::before,.tile-toggle::before{content:"";width:4px;height:14px;border-inline:4px solid currentColor}
.hero-toggle[data-state="paused"]::before,.tile-toggle[data-state="paused"]::before{width:0;height:0;margin-left:4px;border:8px solid transparent;border-right:0;border-left:13px solid currentColor}
.hero-cta{margin-top:16px}
.hero .wa{width:100%;max-width:440px}

/* Sections: paper and sand alternate, and each sand band has a line at its top and bottom edges */
.section{padding-block:72px}
.section-sand{background:var(--sand);border-block:1px solid var(--line-2)}

/* What's a synchronized door? */
.states{display:grid;gap:12px;margin-top:28px}
.state{position:relative;border-radius:12px;overflow:hidden;background:var(--night)}
.state img{width:100%;aspect-ratio:566/424;object-fit:cover}
.state-label{position:absolute;left:10px;top:10px;padding:3px 10px;border-radius:6px;background:rgb(26 23 20 / .78);color:var(--night-ink);font-size:14px;line-height:20px;font-weight:800;letter-spacing:.04em}
.benefits{display:grid;gap:20px;margin-top:32px;padding:0;list-style:none}
.benefits h3{margin-bottom:4px}
.benefits p{color:var(--ink-2)}

/* Doors we've installed: every door in the scroll path. Two columns on phones, with the two videos full width. */
.door-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px;margin:28px 0 0;padding:0;list-style:none}
.tile-wide{grid-column:1/-1}
.tile{display:block;color:var(--ink);text-decoration:none}
.tile-media{position:relative;display:block;aspect-ratio:1;border-radius:12px;background:var(--sand);overflow:hidden}
.tile-portrait .tile-media{aspect-ratio:4/5}
.tile-landscape .tile-media{aspect-ratio:4/3}
.tile-media img{width:100%;height:100%;object-fit:cover;font-size:14px;line-height:1.4;color:var(--ink-2);transition:transform .2s}
/* A video tile's clip lies over its poster photo (the photo keeps the description the viewer shows) */
.tile-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .2s}
.tile-whole img{object-fit:contain}
.tile:hover img,.tile:hover video{transform:scale(1.03)}
/* The clip's pause button sits beside the tile's link (a button can't go inside a link), over the clip's top corner */
.tile-item{position:relative}
.tile-toggle{top:10px;bottom:auto;z-index:1}
.tile:focus-visible{outline-offset:4px;border-radius:12px}
.tile-caption{display:block;margin-top:8px;font-size:15px;line-height:20px;font-weight:700}
.play-badge{position:absolute;left:8px;bottom:8px;padding:0 10px 0 26px;border-radius:99px;background:rgb(26 23 20 / .85);color:var(--night-ink);font-size:15px;line-height:30px;font-weight:800}
.play-badge::before{content:"";position:absolute;left:11px;top:50%;margin-top:-6px;border-left:10px solid currentColor;border-block:6px solid transparent}

/* Why Magworks: its Google reviews follow Google's own look (Roboto where the phone has it, Google's greys,
   yellow stars and blue links) so visitors recognise them. Each is quoted exactly; the source is
   docs/synchronized-sliding-doors/google-reviews.json. */
.g-reviews{--g-ink:#202124;--g-ink-2:#3c4043;--g-grey:#70757a;--g-line:#dadce0;--g-blue:#1a73e8;--g-star:#fbbc04;margin-top:48px;font-family:Roboto,"Helvetica Neue",Arial,sans-serif}
.g-reviews-head,.g-review{border:1px solid var(--g-line);border-radius:8px;background:var(--white)}
.g-reviews-head{display:grid;justify-items:start;gap:6px;padding:20px}
.g-reviews h3{display:flex;align-items:center;gap:10px;font-family:inherit;font-size:20px;line-height:28px;font-weight:500;color:var(--g-ink)}
.g-logo{flex:none;width:24px;height:24px}
.g-listed{color:var(--g-grey);font-size:14px;line-height:20px}
.g-listed span{white-space:nowrap}
.g-summary{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;color:var(--g-grey);font-size:15px;line-height:22px}
.g-score{font-size:32px;line-height:40px;color:var(--g-ink)}
/* Five stars cut from one strip: yellow up to --fill, grey after it. Each 26-unit tile holds a 20-unit star, so a
   rating's fill is set where it's used (4.8 → 93.8%). Longhands, because Safari is stricter with the mask shorthand. */
.g-stars{--star:18px;display:inline-block;flex:none;width:calc(var(--star) * 5.4167);height:var(--star);background:linear-gradient(90deg,var(--g-star) var(--fill,100%),var(--g-line) 0);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 24'%3E%3Cpath d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 24'%3E%3Cpath d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");-webkit-mask-size:calc(var(--star) * 1.0833) var(--star);mask-size:calc(var(--star) * 1.0833) var(--star);-webkit-mask-repeat:repeat-x;mask-repeat:repeat-x}
.g-all{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;padding:0 20px;border:1px solid var(--g-line);border-radius:999px;color:var(--g-blue);font-size:15px;line-height:20px;font-weight:500;text-decoration:none}
.g-all:hover{background:#f6f9fe;border-color:#d2e3fc;color:#1967d2}
.g-review-list{display:grid;gap:12px;margin-top:12px}
.g-review{margin:0;padding:16px 16px 12px}
.g-head{display:grid;grid-template-columns:40px minmax(0,1fr) 20px;align-items:center;gap:12px}
.g-avatar{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--a);color:var(--white);font-size:18px;line-height:1;font-weight:500}
.g-name{color:var(--g-ink);font-size:16px;line-height:22px;font-weight:500}
.g-mark{width:20px;height:20px}
.g-meta{display:flex;align-items:center;gap:10px;margin-top:12px;color:var(--g-grey);font-size:15px;line-height:20px}
.g-meta .g-stars{--star:15px}
.g-text{margin-top:8px;color:var(--g-ink-2);white-space:pre-line}
/* page.js clamps long reviews to five lines and adds a More button; without it every review shows in full.
   A review that is cut runs its paragraphs together, so the cut never lands on an empty line; open, or short
   enough to fit, it keeps its breaks. */
.is-clamped .g-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden}
.is-clamped .is-cut:not(.is-open) .g-text{white-space:normal}
.is-clamped .is-open .g-text{display:block;overflow:visible;-webkit-line-clamp:unset}
.g-more{min-width:64px;min-height:44px;padding:0;border:0;background:none;color:var(--g-blue);font:500 16px/22px Roboto,"Helvetica Neue",Arial,sans-serif;text-align:left;cursor:pointer}
.g-more:hover{text-decoration:underline}

/* Viewer (markup and behaviour shared with the aluminium page's gallery.js) */
.viewer-media>img,.viewer-media>video{position:absolute;inset:0;margin:auto;width:100%;height:100%;object-fit:contain;background:transparent}
/* Size a video's box to its picture (never above natural size) so the native controls sit on the video. */
@supports (width:1cqw){
.viewer-media{container-type:size}
.viewer-media>video{width:min(100cqw,var(--w),100cqh * var(--r));height:min(100cqh,var(--h),100cqw / var(--r))}
}
.play-overlay{position:absolute;inset:0;margin:auto;display:grid;place-items:center;width:72px;height:72px;border:0;border-radius:50%;background:rgb(26 23 20 / .8);cursor:pointer}
.play-overlay::before{content:"";margin-left:6px;border-left:22px solid var(--night-ink);border-block:13px solid transparent}
.play-overlay:hover{background:var(--ink)}
.viewer{width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--night);color:var(--night-ink);overflow:hidden}
.viewer[open]{display:flex;flex-direction:column}
.viewer::backdrop{background:var(--night)}
html:has(.viewer[open]){overflow:hidden}
.viewer-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:calc(10px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) 10px calc(20px + env(safe-area-inset-left))}
.viewer-set{color:var(--gold);font-size:14px;line-height:18px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.viewer-icon{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;border:1px solid rgb(246 241 233 / .35);border-radius:50%;background:transparent;color:var(--night-ink);font-size:18px;cursor:pointer}
.viewer-icon:hover{background:rgb(246 241 233 / .12)}
.viewer-media{position:relative;flex:1;min-height:0;margin:0 calc(12px + env(safe-area-inset-right)) 0 calc(12px + env(safe-area-inset-left));touch-action:pan-y pinch-zoom}
.viewer-bar{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;padding:14px calc(20px + env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left))}
.viewer-text{flex:1 1 280px;min-width:0}
.viewer-caption{font-size:17px;line-height:24px;font-weight:700}
.viewer-meta{margin-top:2px;color:var(--night-2);font-size:14px;line-height:18px}
.viewer-nav{display:flex;gap:8px}
.viewer .wa{box-shadow:none}

/* Customise: big copper numerals mark the steps */
.custom-steps{display:grid;gap:0;margin-top:28px;padding:0;list-style:none;counter-reset:step}
.custom-steps>li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;padding:24px 0;border-top:1px solid var(--line-2);counter-increment:step}
.custom-steps>li:last-child{border-bottom:1px solid var(--line-2)}
.custom-steps>li::before{content:counter(step);grid-row:1/span 3;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--copper);color:var(--white);font-size:20px;line-height:1;font-weight:800}
.custom-steps>li>*{grid-column:2}
.custom-steps h3{align-self:center;min-height:44px;display:flex;align-items:center}
.custom-steps p{color:var(--ink-2)}
.swatches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px;padding:0;list-style:none}
.swatch{display:grid;gap:6px;min-height:44px;color:var(--ink);font-size:15px;line-height:20px;font-weight:700;text-decoration:none}
.swatch img{width:100%;aspect-ratio:1;object-fit:cover;border:2px solid transparent;border-radius:12px}
.swatch:hover img{border-color:var(--copper)}
.help{margin-top:24px}
.help p{font-weight:700}

/* Door diagrams: open is the default, so no-JS, reduced motion and a paused diagram show the result. */
.door-motion{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;margin-top:16px;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--white)}
.dd-pair{display:grid;gap:16px}
.dd-item{display:grid;grid-template-columns:minmax(0,1fr) 72px;align-items:center;gap:12px}
.dd-count{font-size:15px;line-height:20px;font-weight:700}
.motion-label{grid-column:1/-1;font-size:15px;line-height:22px;color:var(--ink-2)}
.dd{position:relative;height:52px;border-block:3px solid var(--ink);background:var(--white)}
.dd-panel{--closed:translateX(calc((var(--x0) - var(--x1))/var(--w)*100%));position:absolute;top:2px;bottom:2px;left:calc(var(--x1)*100%);width:calc(var(--w)*100%);z-index:var(--t);box-sizing:border-box;border:2px solid var(--ink);background:var(--glass)}
.dd-lead::after{content:"";position:absolute;top:50%;left:calc(var(--hx)*100%);width:4px;height:14px;margin:-7px 0 0 -2px;border-radius:2px;background:var(--copper)}
.dd-clear{position:absolute;inset-block:0;left:calc(var(--x)*100%);width:calc(var(--w)*100%);transform-origin:var(--o,0%) 50%;box-shadow:inset 0 -3px var(--copper)}
.dd-clear::before{content:"\2194";position:absolute;inset:0;display:grid;place-items:center;font-size:18px;line-height:1;color:var(--copper)}
/* One 4.4 s loop: opens 1.8 s, open 0.4 s, closes 1.8 s, closed 0.4 s. The copper band marks the clear opening. */
.is-playing .dd-panel{animation:dd-slide 4.4s infinite}
.is-playing .dd-clear{animation:dd-band 4.4s infinite}
.is-playing .dd-clear::before{animation:dd-arrow 4.4s infinite}
@keyframes dd-slide{0%{transform:var(--closed);animation-timing-function:ease-in-out}40.9%,50%{transform:none;animation-timing-function:ease-in-out}90.9%,100%{transform:var(--closed)}}
@keyframes dd-band{0%{transform:scaleX(0);animation-timing-function:ease-in-out}40.9%,50%{transform:none;animation-timing-function:ease-in-out}90.9%,100%{transform:scaleX(0)}}
@keyframes dd-arrow{0%,34%{opacity:0}40.9%,50%{opacity:1}57%,100%{opacity:0}}
.motion-toggle{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:0;background:none;color:var(--ink);cursor:pointer}
.motion-toggle::before,.motion-toggle::after{content:"";grid-area:1/1}
.motion-toggle::before{width:32px;height:32px;box-sizing:border-box;border:1px solid var(--ink-2);border-radius:50%;background:var(--white)}
.motion-toggle::after{width:3px;height:10px;border-inline:3px solid}
.motion-toggle[aria-pressed="true"]::after{width:0;height:0;margin-left:3px;border:5px solid transparent;border-right:0;border-left:9px solid}
.motion-toggle:hover::before{border-color:var(--ink)}

/* Price */
.price-card{max-width:680px;margin-inline:auto;padding:32px 24px;border:1px solid var(--line);border-radius:16px;background:var(--white)}
.price-card h2{margin:8px 0 16px;font-size:56px;line-height:56px;font-variant-numeric:tabular-nums}
.price-note{margin-top:12px;color:var(--ink-2)}
.price-card h3{margin-top:28px}
.included{display:grid;gap:10px;margin-top:12px;padding:0;list-style:none}
.included li{position:relative;padding-left:32px}
.included li::before{content:"";position:absolute;left:4px;top:5px;width:8px;height:14px;border:solid var(--copper);border-width:0 3px 3px 0;transform:rotate(45deg)}
.steps{display:grid;gap:12px;margin:12px 0 28px;padding:0;list-style:none;counter-reset:order}
.steps li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;counter-increment:order}
.steps li::before{content:counter(order);display:grid;place-items:center;width:28px;height:28px;border:2px solid var(--gold);border-radius:50%;font-size:14px;line-height:1;font-weight:800}
.price-card .wa{width:100%;max-width:440px}

/* FAQ: native dropdowns; opening one closes the others (details name="faq") */
.faq-list{margin-top:24px;border-top:1px solid var(--line-2)}
.faq-list details{border-bottom:1px solid var(--line-2)}
.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding:14px 0;font-size:18px;line-height:26px;font-weight:700;cursor:pointer;list-style:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";flex:none;width:20px;height:20px;background:linear-gradient(var(--copper) 0 0) center/20px 3px no-repeat,linear-gradient(var(--copper) 0 0) center/3px 20px no-repeat}
.faq-list details[open] summary::after{background:linear-gradient(var(--copper) 0 0) center/20px 3px no-repeat}
.faq-list details>p{padding:0 36px 20px 0;color:var(--ink-2)}
.faq-list details a{color:var(--ink);font-weight:700;text-decoration:underline 2px var(--copper);text-underline-offset:4px}

/* Final band */
.final{padding-block:72px;background:var(--night);color:var(--night-ink)}
.final .eyebrow{color:var(--gold)}
.final .eyebrow::before{content:"";display:block;width:48px;height:2px;margin-bottom:16px;background:var(--gold)}
.final h2{margin:8px 0 16px}
.final .hl{color:var(--gold)}
.final p:not([class]){max-width:640px;color:var(--night-2)}
.final .address{margin-top:16px;color:var(--night-ink);font-weight:700}
.final-ctas{display:grid;justify-items:start;gap:12px;margin-top:28px}
.final .wa{width:100%;max-width:440px;box-shadow:none}
.final .text-link{color:var(--night-ink);text-decoration-color:var(--gold)}
.final .text-link:hover{color:var(--gold)}

/* Footer */
.site-footer{padding:32px 0}
.footer-inner{display:grid;gap:12px}
.footer-inner p{font-size:15px;line-height:22px;color:var(--ink-2)}

/* Desktop: a quote button closes each section that has none of its own. Up to 800px the sticky bar does this
   job, so the buttons stay hidden there. */
.section-cta{display:none}
@media(min-width:801px){
.section-cta{display:flex;justify-content:center;margin-top:48px}
.section-cta .wa{width:100%;max-width:440px}
}

/* Sticky bar: phones and small tablets only */
.sticky-cta{display:none}
@media(max-width:800px){
.sticky-cta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:20;padding:10px 16px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:rgb(251 248 243 / .96);transition:transform .18s ease,visibility 0s}
.js .sticky-cta:not(.is-shown){transform:translateY(110%);visibility:hidden;transition:transform .18s ease,visibility 0s .18s}
.sticky-cta .wa{display:flex;width:100%;max-width:440px;min-height:52px;margin-inline:auto;box-shadow:none}
html:not(.js) .site-footer{padding-bottom:calc(32px + 76px + env(safe-area-inset-bottom))}
}

/* Quote form (lead-form.js): three quick questions before WhatsApp. A bottom sheet on phones and a card on
   desktop. The dialog tracks the visible viewport (--vvt, --vvh), so an open keyboard never covers the number
   field, and .is-short trims the extras when little is visible. Green stays on the WhatsApp link only. */
.lf{position:fixed;inset:0;top:var(--vvt,0);bottom:auto;width:100%;height:var(--vvh,100dvh);max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--ink);overflow:hidden}
.lf[open]{display:flex;flex-direction:column;justify-content:flex-end}
.lf::backdrop{background:rgb(26 23 20 / .6)}
html:has(.lf[open]){overflow:hidden}
.lf-sheet{position:relative;max-height:100%;overflow-y:auto;overscroll-behavior:contain;padding:8px calc(20px + env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));border-radius:20px 20px 0 0;background:var(--paper);box-shadow:0 -8px 32px rgb(26 23 20 / .25)}
.lf-top{display:flex;align-items:center;gap:12px}
.lf-bar{flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}
.lf-bar li{display:grid;gap:6px;color:var(--ink-2);font-size:14px;line-height:18px;font-weight:700;white-space:nowrap}
.lf-bar li::before{content:"";height:6px;border-radius:3px;background:var(--line-2);transition:background-color .2s}
.lf-bar .is-done::before,.lf-bar .is-current::before{background:var(--copper)}
.lf-bar .is-done,.lf-bar .is-current{color:var(--ink)}
.lf-bar b{display:inline-grid;place-items:center;width:18px;height:18px;margin-right:2px;border-radius:50%;background:var(--line-2);color:var(--ink);font-size:14px;line-height:1}
.lf-bar .is-current b{background:var(--copper);color:var(--white)}
.lf-bar .is-done b{background:var(--copper);color:transparent;position:relative}
.lf-bar .is-done b::after{content:"";position:absolute;left:6px;top:3px;width:4px;height:8px;border:solid var(--white);border-width:0 2px 2px 0;transform:rotate(45deg)}
.lf-close{display:grid;place-items:center;flex:none;width:44px;height:44px;margin-right:-10px;border:0;border-radius:50%;background:transparent;color:var(--ink);font-size:20px;cursor:pointer}
@media(hover:hover){.lf-close:hover{background:var(--sand)}}
.lf-title{margin-top:12px;font-size:20px;line-height:26px;font-weight:800;letter-spacing:-.01em}
.lf-count{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;font-size:14px}
.lf-q{margin:16px 0 14px;font-size:24px;line-height:30px;font-weight:800;letter-spacing:-.02em}
.lf-q:focus{outline:none}
.lf-q label{cursor:inherit}
.lf-step:not([hidden]){animation:lf-in .18s ease-out}
@keyframes lf-in{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.lf-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.lf-opt{display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 14px;border:2px solid var(--line-2);border-radius:14px;background:var(--white);color:var(--ink);font:700 17px/22px var(--font);text-align:left;cursor:pointer;transition:border-color .12s,background-color .12s}
/* Hover only where there's a mouse: on phones a tapped tile would stay "hovered" and the tile in the same spot
   on the next step would look already chosen. */
@media(hover:hover){.lf-opt:hover{border-color:var(--copper)}}
.lf-opt[aria-pressed="true"]{border-color:var(--copper);background:#fbefe6}
.lf-ico{flex:none;width:28px;height:28px;fill:none;stroke:var(--copper);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#lf-i-other path{stroke-width:3.2}
.lf-wide{grid-column:1/-1}
.lf-back{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;padding:0 4px;border:0;background:none;color:var(--ink-2);font:700 16px/1 var(--font);cursor:pointer}
.lf-back:hover{color:var(--ink)}
.lf-phone{display:flex;border:2px solid var(--line-2);border-radius:14px;background:var(--white);overflow:hidden}
.lf-phone:focus-within{border-color:var(--ink)}
.lf-invalid .lf-phone{border-color:var(--copper)}
.lf-cc{display:grid;place-items:center;padding:0 12px 0 16px;border-right:1px solid var(--line);color:var(--ink-2);font-size:20px;font-weight:700}
.lf-phone input{flex:1;min-width:0;min-height:56px;padding:0 14px;border:0;border-radius:0;background:transparent;color:var(--ink);font:700 20px/1.2 var(--font);letter-spacing:.04em;outline:none}
.lf-phone input::placeholder{color:#a8a29e;font-weight:600}
.lf-err{margin-top:8px;color:var(--copper);font-size:15px;line-height:20px;font-weight:700}
.lf-submit{display:flex;width:100%;margin-top:12px;box-shadow:none}
.lf-consent{margin-top:10px;color:var(--ink-2);font-size:14px;line-height:20px}
.lf-skip{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-size:15px;line-height:20px;font-weight:700;text-decoration:underline 2px var(--copper);text-underline-offset:4px}
/* After the number: a spinner, then a green tick, then WhatsApp opens (lead-form.js, under a second) */
.lf-done{padding:4px 0;text-align:center}
.lf-done .lf-q{margin:14px 0 6px}
.lf-done p{color:var(--ink-2)}
.lf-done .wa{display:flex;width:100%;margin-top:16px;box-shadow:none}
.lf-status{position:relative;width:64px;height:64px;margin:12px auto 0}
.lf-spin{position:absolute;inset:4px;border:5px solid var(--line-2);border-top-color:var(--copper);border-radius:50%;animation:lf-spin .7s linear infinite}
@keyframes lf-spin{to{transform:rotate(360deg)}}
.lf-tick{position:absolute;inset:0;width:100%;height:100%;opacity:0;transform:scale(.5);transition:opacity .15s,transform .3s cubic-bezier(.2,.9,.3,1.3)}
.lf-tick circle{fill:var(--wa)}
.lf-tick path{fill:none;stroke:var(--white);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:32;stroke-dashoffset:32;transition:stroke-dashoffset .3s .1s ease-out}
.lf-done.is-sent .lf-spin{display:none}
/* The words and button under the tick hold their space from the start, so the sheet doesn't jump */
.lf-done:not(.is-sent) p,.lf-done:not(.is-sent) .wa{visibility:hidden}
.lf-done.is-sent .lf-tick{opacity:1;transform:none}
.lf-done.is-sent .lf-tick path{stroke-dashoffset:0}
.lf-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
/* Little visible (keyboard open): keep the question, number and button; drop the rest */
.lf.is-short .lf-title,.lf.is-short .lf-count,.lf.is-short .lf-bar span{display:none}
.lf.is-short .lf-sheet{padding-top:4px}
.lf.is-short .lf-bar{align-self:center}
.lf.is-short .lf-q{margin:0 0 8px;font-size:19px;line-height:24px}
.lf.is-short .lf-phone input{min-height:46px}
.lf.is-short .lf-cc{font-size:18px}
.lf.is-short .lf-submit{margin-top:8px;min-height:48px}
@media(min-width:601px){
.lf[open]{justify-content:center;align-items:center}
.lf-sheet{width:min(480px,calc(100% - 32px));padding:14px 28px 28px;border-radius:20px}
}
@media(prefers-reduced-motion:reduce){.lf-step:not([hidden]){animation:none}.lf-spin{animation-duration:2s}.lf-tick,.lf-tick path{transition:none}}
@media(max-width:360px){
:root{--gutter:16px}
.wa{gap:8px;padding:0 14px}
.wa svg{width:22px;height:22px}
.price-card{padding:28px 20px}
.price-card h2{font-size:44px;line-height:48px}
}
@media(min-width:600px){
.states{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-review-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
/* Three columns on tablets, so each photo is bigger than on a phone; four from 900px */
.door-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 16px}
.tile-wide{grid-column:auto}
.tile-portrait .tile-media,.tile-landscape .tile-media{aspect-ratio:1}
}
/* Tablets have the phone's single-column hero: keep the video square rather than a wide strip */
@media(min-width:600px) and (max-width:899px){
.hero-media{width:var(--hero-video)}
}

/* Desktop */
@media(min-width:801px){
:root{--gutter:32px}
/* The desktop header is 20px taller */
@supports (height:1svh){:root{--hero-video:clamp(200px,calc(100svh - 276px - 2.08 * var(--h1)),350px)}}
.header-inner{min-height:88px}
.logo{height:60px}
.wa-header{display:inline-flex;min-height:48px;padding:0 20px;font-size:19px;box-shadow:none}
.section{padding-block:112px}
h2{font-size:48px;line-height:52px}
h3{font-size:22px;line-height:28px}
body{font-size:18px;line-height:28px}
.price-card{padding:48px}
.price-card h2{font-size:72px;line-height:72px}
.final{padding-block:112px}
.footer-inner{grid-template-columns:auto auto;justify-content:space-between;align-items:center;gap:32px}
}
@media(min-width:900px){
.door-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-review-list{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-reviews-head{grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:24px;padding:24px 28px}
.g-reviews-head>:not(.g-all){grid-column:1}
.g-all{grid-column:2;grid-row:1/span 3;margin-top:0}
.benefits{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.hero{padding:40px 0 96px}
.hero-inner{grid-template-columns:minmax(0,1fr) minmax(0,min(480px,40vw));grid-template-areas:"copy media" "cta media";column-gap:64px}
.hero-copy{grid-area:copy;align-self:end}
.hero-cta{grid-area:cta;align-self:start;margin-top:32px}
.hero-media{grid-area:media;height:auto;aspect-ratio:1;margin-top:0}
.hero h1{font-size:clamp(56px,5.6vw,76px);margin:14px 0 20px}
.price-line{font-size:20px;line-height:28px}
.custom-steps>li{grid-template-columns:56px minmax(0,1fr);column-gap:24px}
.custom-steps>li::before{width:56px;height:56px;font-size:24px}
.custom-steps h3{min-height:56px}
.custom-steps .swatches,.custom-steps .door-motion{max-width:520px}
}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{transition:none!important}
.is-playing .dd-panel,.is-playing .dd-clear,.is-playing .dd-clear::before{animation:none}
}