/* FanBound Premium client site CSS v1.5.1 (2 Nov 2026: phone call bar in the site's own header colour, not cream); v1.5 (31 Oct 2026; v1.2 27 Oct 2026). Every colour is a token in the :root block, which build.py
   writes from the intake's look (light or dark) and colours. Film stage stays dark so captions read over any frame. */
:root{
  --bg:#070F13;--bg2:#071215;--bg3:#081518;--line:#091B1D;--line2:#0A2021;--ink:#ECF1F7;--soft:#C3CEDB;--muted:#8D9DB2;--acc:#3FC8D2;--acc-l:#82DBE2;--acc-d:#36AAB2;--acc-ink:#1E0F04;--acc-tint:#123439;--sand:#3FC8D2;--sand-l:#79D8E0;--sand-ink:#1E0F04;--card:#071215;--head:rgba(10,17,28,.94);--err:#FF8A80;--err-bg:#3A1416;--wa:#1F6E43;--film:#0A111C;--film-ink:#ECF1F7;--film-muted:#9AA9BC;--pop:#3FC8D2;--pop-ink:#1E0F04;--pop-l:#79D8E0;--q-card:var(--bg2);--q-basket:linear-gradient(160deg,#79D8E0,#3FC8D2);--q-basket-ink:#1E0F04;--q-basket-btn-ink:#79D8E0;
  --ease-out:cubic-bezier(.22,1,.36,1);--ease-in:cubic-bezier(.4,0,1,1);--ease-spring:cubic-bezier(.34,1.45,.64,1);--t-in:.38s;--t-out:.22s;--t-ui:.26s;
  --f:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --h:"Inter Tight","Inter",system-ui,sans-serif;
  --m:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;font-family:var(--f);font-size:17px;line-height:1.6;color:var(--ink);background:var(--bg)}
img,canvas,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.mono{font-family:var(--m);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
h1,h2,h3{font-family:var(--h);margin:0;line-height:1.02;letter-spacing:-.035em;font-weight:800;text-wrap:balance}
h2{font-size:clamp(2.1rem,5vw,4.2rem)}
h3{font-size:1.3rem;letter-spacing:-.02em;line-height:1.15}
p{margin:0 0 1rem;max-width:62ch}
.eyebrow{display:block;color:var(--acc);margin-bottom:16px}
.lead{color:var(--soft);font-size:1.08rem}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--f);font-weight:600;font-size:15px;line-height:1.2;padding:12px 20px;border-radius:999px;background:var(--acc);color:var(--acc-ink);text-decoration:none;border:1.5px solid var(--acc);cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--acc-d);border-color:var(--acc-d)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line2)}
.btn.ghost:hover{border-color:var(--ink)}
.btn.tiny{padding:7px 13px;font-size:12px;font-family:var(--m);letter-spacing:.08em;text-transform:uppercase}
.btn .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.btn[disabled]{opacity:.55;cursor:default}
.btn.wa{background:var(--wa);border-color:var(--wa);color:#fff}

/* ---------- preview ribbon + header ---------- */
.preview{background:var(--film);color:var(--sand-l);font-family:var(--m);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.preview .wrap{display:flex;gap:14px;justify-content:space-between;align-items:center;padding-block:5px}
.preview b{color:#fff}
.site-head{position:fixed;inset:0 0 auto 0;z-index:30;transition:background .25s var(--ease-out)}
.site-head.solid{background:var(--head);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)}
.bar-top .wrap{display:flex;align-items:center;gap:22px;padding-block:12px}
.site-head:not(.solid){color:var(--film-ink)}
.site-head:not(.solid) .bar-top{background:linear-gradient(180deg,rgba(10,16,12,.72),rgba(10,16,12,0))}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;line-height:1;min-width:0}
.logo b{display:block;font-family:var(--h);font-weight:800;font-size:1.12rem;letter-spacing:.02em;white-space:nowrap}
.logo small{display:block;font-family:var(--m);font-size:9.5px;letter-spacing:.12em;margin-top:5px;opacity:.75;white-space:nowrap}
.logo .tag{display:block;font-family:var(--m);font-size:9px;letter-spacing:.1em;margin-top:4px;color:var(--acc)}
.site-head:not(.solid) .logo .tag{color:var(--sand)}
.site-head nav{display:flex;gap:20px;margin-left:auto}
.site-head nav a{text-decoration:none;opacity:.86}
.site-head nav a:hover,.site-head nav a[aria-current=page]{opacity:1;text-decoration:underline;text-underline-offset:5px}
.site-head .call{padding:9px 16px;font-size:14px;gap:0}
.site-head .btn.call{background:var(--pop);border-color:var(--pop);color:var(--pop-ink)}
.menu-btn{display:none;background:none;border:1.5px solid currentColor;border-radius:999px;padding:7px 12px;cursor:pointer;opacity:.9}
.menu{display:none;border-top:1px solid var(--line);background:var(--bg);color:var(--ink)}
.menu.open{display:block}
.menu ul{list-style:none;margin:0;padding:10px 0 18px;display:grid;grid-template-columns:1fr 1fr;gap:2px 18px}
.menu a{display:block;padding:9px 0;text-decoration:none;border-bottom:1px solid var(--line)}
body.inner{padding-top:104px}

/* ---------- the film ---------- */
.film{position:relative;height:760vh;background:var(--film);color:var(--film-ink)}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
#film{position:absolute;inset:0;width:100%;height:100%;background:var(--film) url(/assets/film/poster-v4.webp) center 40%/cover no-repeat}
.stage .shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,16,12,.5) 0%,rgba(10,16,12,0) 26%,rgba(10,16,12,0) 52%,rgba(10,16,12,.92) 100%)}
.hud{position:absolute;left:max(20px,env(safe-area-inset-left,0px));top:128px;display:flex;align-items:center;gap:12px;padding:10px 16px 10px 11px;border-radius:14px;background:rgba(14,22,17,.74);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12)}
.hud svg{width:40px;height:40px;transform:rotate(-90deg)}
.hud .r-bg{stroke:rgba(255,255,255,.16)}.hud .r-fg{stroke:var(--sand);transition:stroke-dashoffset .08s linear}
.hud b{font-family:var(--h);font-size:1.9rem;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;min-width:3.1ch}
.hud b small{font-size:.55em;color:var(--film-muted);margin-left:1px}
.hud .lbl{display:flex;flex-direction:column;gap:3px;line-height:1.15}
.hud .lbl span{font-family:var(--m);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--film-muted)}
.hud .lbl span+span{color:var(--sand)}
.illus{position:absolute;right:max(20px,env(safe-area-inset-right,0px));top:128px;font-family:var(--m);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;background:rgba(14,22,17,.74);border:1px solid rgba(214,190,146,.5);color:var(--sand-l);border-radius:8px;padding:6px 10px}
.intro{position:absolute;left:0;right:0;bottom:150px;transition:opacity .35s var(--ease-out),transform .35s var(--ease-out)}
.intro h1{font-size:clamp(2.5rem,6.2vw,5.4rem);max-width:13ch;text-shadow:0 4px 30px rgba(0,0,0,.35)}
.intro p{color:#E9EDE6;font-size:1.12rem;margin:18px 0 22px;max-width:46ch;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.intro .acts{display:flex;gap:12px;flex-wrap:wrap}
.intro .btn{background:var(--pop);border-color:var(--pop);color:var(--pop-ink)}
.intro .btn.ghost{background:rgba(14,22,17,.35);color:var(--film-ink);border-color:rgba(243,238,227,.4)}
.intro.gone{opacity:0;transform:translateY(-16px);pointer-events:none}
.cap{position:absolute;left:0;right:0;bottom:142px;pointer-events:none}
.cap .wrap{display:flex;justify-content:flex-end}
.cap .in{max-width:520px;text-align:right;transition:opacity .28s var(--ease-out),transform .28s var(--ease-out)}
.cap .in.swap{opacity:0;transform:translateY(14px)}
.cap .in.hide{opacity:0}
.cap h2{font-size:clamp(2.1rem,4.6vw,4rem);text-shadow:0 4px 30px rgba(0,0,0,.45)}
.cap p{color:#EDF0EA;margin:14px 0 0 auto;font-size:1.02rem;max-width:40ch;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.dash{position:absolute;left:0;right:0;bottom:0;padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
.dash .row{display:flex;align-items:center;gap:16px}
.dash .count{color:var(--film-muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.dash .btn.ghost{color:var(--film-ink);border-color:rgba(243,238,227,.4);background:rgba(14,22,17,.35)}
.track{position:relative;flex:1;height:38px}
.segs{position:absolute;left:0;right:0;top:16px;height:6px;display:flex;gap:4px}
.segs i{position:relative;display:block;height:100%;background:rgba(255,255,255,.18);border-radius:3px;overflow:hidden}
.segs i::after{content:"";position:absolute;inset:0;width:calc(var(--p,0) * 100%);background:var(--sand)}
.knob{position:absolute;top:10px;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(214,190,146,.5),0 2px 8px rgba(0,0,0,.4);pointer-events:none}
.track input{position:absolute;inset:0 -9px;width:calc(100% + 18px);height:38px;margin:0;opacity:0;cursor:pointer}
.track:focus-within .segs{outline:2px solid var(--sand);outline-offset:6px;border-radius:4px}
.names{position:absolute;left:0;right:0;top:36px;height:16px;pointer-events:none}
.dash .wrap{padding-bottom:18px}
.names span{position:absolute;top:0;white-space:nowrap;color:var(--film-muted);font-size:10.5px}
.names span.on{color:#fff}
.names span.low{top:13px}
#play{min-width:92px}

/* ---------- shared section bits ---------- */
section.s{padding-block:clamp(64px,9vw,112px);scroll-margin-top:90px}
.s-head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;margin-bottom:34px}
.s-head .txt{max-width:660px}
.s-head h2+p{margin-top:16px}
.alt{background:var(--bg2)}
.panel{background:var(--card);border:1px solid var(--line);border-radius:18px}
.chip{display:inline-flex;align-items:center;gap:10px;background:rgba(23,36,27,.86);color:var(--film-ink);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:8px 13px}
.illus-note{display:inline-block;margin-top:10px;font-family:var(--m);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* ---------- survey game ---------- */
.game{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line2);aspect-ratio:1120/640;background:#8C877C;user-select:none;-webkit-user-select:none}
.game img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.game canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
.game .chip{position:absolute;top:14px;left:14px;z-index:3}
.game .chip b{font-family:var(--h);font-size:1.5rem;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.game .chip .t{font-family:var(--m);font-size:14px;color:var(--film-muted);font-variant-numeric:tabular-nums}
.game .left{position:absolute;top:14px;left:auto;right:14px;z-index:3}
.game .prompt{position:absolute;inset:0;display:grid;place-items:center;z-index:2;pointer-events:none;transition:opacity .3s var(--ease-out)}
.game .prompt span{display:flex;align-items:center;gap:10px;background:rgba(23,36,27,.88);color:var(--film-ink);border-radius:999px;padding:11px 18px}
.game .prompt.gone{opacity:0}
.spot{position:absolute;z-index:3;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;opacity:0;pointer-events:none;transition:opacity .3s var(--ease-out)}
.spot i{width:16px;height:16px;border-radius:50%;background:var(--sand);box-shadow:0 0 0 0 rgba(214,190,146,.8);animation:pulse 1.6s infinite;flex:none;border:2px solid var(--ink)}
.spot em{font-style:normal;background:rgba(23,36,27,.92);color:var(--film-ink);border:1px solid var(--sand);border-radius:8px;padding:4px 8px;white-space:nowrap}
.spot.found{opacity:1}
.spot.flip{flex-direction:row-reverse}
@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(214,190,146,0)}100%{box-shadow:0 0 0 0 rgba(214,190,146,0)}}
.done-msg{position:absolute;left:14px;right:14px;bottom:14px;z-index:4;background:rgba(23,36,27,.94);color:var(--film-ink);border:1px solid var(--sand);border-radius:12px;padding:12px 16px;font-size:15px;display:none}
.done-msg.on{display:block}
.done-msg a{color:var(--sand-l)}
.cards{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.cards li{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;transition:border-color .3s var(--ease-out),background .3s var(--ease-out)}
.cards .n{display:flex;justify-content:space-between;color:var(--muted)}
.cards h3{font-size:1.02rem;margin:10px 0 6px;color:var(--soft)}
.cards p{font-size:13.5px;line-height:1.45;color:var(--muted);margin:0}
.cards li.found{border-color:var(--acc);background:var(--acc-tint)}
.cards li.found h3{color:var(--ink)}.cards li.found .n b{color:var(--acc)}
.game-ctrls{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- x-ray ---------- */
.xray{display:grid;grid-template-columns:1.25fr 1fr;gap:22px;align-items:stretch}
.xray .panel{position:relative;overflow:hidden;padding:0}
.xray svg{width:100%;height:auto}
.xray .now{position:absolute;top:14px;left:14px}
.ly{transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
.ly.off{opacity:0;transform:translateY(-22px)}
.ly.hi .hl{stroke:#B8551F;stroke-width:3}
.xlist,.xray .xlist{padding:22px}
.xlist .top{display:flex;justify-content:space-between;align-items:center;color:var(--muted);margin-bottom:10px}
.range{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;margin:0 0 14px;cursor:pointer}
.range::-webkit-slider-runnable-track{height:5px;border-radius:3px;background:linear-gradient(90deg,var(--acc) var(--fill,0%),var(--line) var(--fill,0%))}
.range::-moz-range-track{height:5px;border-radius:3px;background:linear-gradient(90deg,var(--acc) var(--fill,0%),var(--line) var(--fill,0%))}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--acc);margin-top:-7.5px;box-shadow:0 0 0 4px rgba(45,91,57,.25)}
.range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--acc);border:0;box-shadow:0 0 0 4px rgba(45,91,57,.25)}
.xlist ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.xlist li button{width:100%;text-align:left;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:11px 14px;cursor:pointer;display:block}
.xlist li button .h{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.xlist li button b{font-weight:600;font-size:15px}
.xlist li button .mono{color:var(--muted);font-size:10.5px;white-space:nowrap}
.xlist li button p{display:none;margin:7px 0 0;font-size:14px;line-height:1.45;color:var(--soft)}
.xlist li.on button{border-color:var(--acc);background:var(--acc-tint)}
.xlist li.on button p{display:block}
.xlist li.on button .mono{color:var(--acc)}
.xlist li.later button{opacity:.6}

/* ---------- studio ---------- */
.studio{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line2);aspect-ratio:1200/679;background:#8C877C}
.studio img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.studio .new{clip-path:inset(0 0 0 var(--x,40%))}
.studio .handle{position:absolute;top:0;bottom:0;left:var(--x,40%);width:2px;background:#fff;transform:translateX(-1px);pointer-events:none;z-index:2}
.studio .handle::after{content:"";position:absolute;top:50%;left:50%;width:40px;height:40px;transform:translate(-50%,-50%);border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6' fill='none' stroke='%2317241B' stroke-width='2.4'/%3E%3C/svg%3E") center/20px no-repeat;box-shadow:0 4px 18px rgba(0,0,0,.35)}
.studio input[type=range]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:3}
.studio input:focus-visible~.handle::after{box-shadow:0 0 0 4px var(--acc)}
.studio .tag{position:absolute;bottom:14px;z-index:2;padding:6px 10px;border-radius:8px;background:rgba(23,36,27,.88);color:var(--film-ink)}
.studio .t-old{left:14px}.studio .t-new{right:14px;color:var(--sand-l)}
.studio .chip{position:absolute;top:14px;left:14px;z-index:4;flex-direction:column;align-items:flex-start;gap:2px}
.studio .chip .mono{color:var(--film-muted);font-size:10px}
.studio .chip b{font-family:var(--h);font-size:1.05rem}
.mats{display:flex;gap:8px;flex-wrap:wrap}
.mats button,.seg label{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;border:1.5px solid var(--line2);background:var(--card);color:var(--ink);cursor:pointer;font-size:14px;font-weight:500}
.mats button i{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.25)}
.mats button[aria-pressed=true]{border-color:var(--acc);background:var(--acc);color:var(--acc-ink)}
.specs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}
.specs div{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:13px 15px}
.specs .mono{color:var(--muted);font-size:10.5px}
.specs b{display:block;font-family:var(--h);font-size:1.15rem;margin-top:4px;letter-spacing:-.01em}
.small{font-size:13px;color:var(--muted)}
.small a{color:var(--acc)}

/* ---------- estimator ---------- */
.est{display:grid;grid-template-columns:1.2fr .9fr;gap:22px;align-items:start}
.est fieldset{border:0;padding:0;margin:0 0 22px}
.est legend{padding:0;margin-bottom:10px;color:var(--muted)}
.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg input{position:absolute;opacity:0;width:1px;height:1px}
.seg input:checked+label{border-color:var(--acc);background:var(--acc);color:var(--acc-ink)}
.seg input:focus-visible+label{outline:3px solid var(--acc);outline-offset:2px}
.extras{display:grid;gap:8px}
.extras .x{display:flex;justify-content:space-between;gap:12px;align-items:center;background:var(--bg);border:1.5px solid var(--line2);border-radius:12px;padding:10px 14px}
.extras .x>span{display:flex;gap:10px;align-items:center}
.extras input[type=checkbox]{width:18px;height:18px;accent-color:var(--acc)}
.extras .mono{color:var(--muted);font-size:10.5px;white-space:nowrap}
.qty{display:flex;align-items:center;gap:6px}
.qty button{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--line2);background:var(--card);color:var(--ink);cursor:pointer;font-weight:700;line-height:1}
.qty output{min-width:2.2ch;text-align:center;font-variant-numeric:tabular-nums;font-weight:600}
.price{background:linear-gradient(160deg,var(--sand-l),var(--sand));color:var(--sand-ink);border-radius:18px;padding:24px;position:sticky;top:110px}
.price .mono{opacity:.8}
.price .big{font-family:var(--h);font-weight:800;font-size:clamp(2.1rem,4vw,3rem);letter-spacing:-.035em;line-height:1;margin:10px 0 16px;font-variant-numeric:tabular-nums}
.price ul{list-style:none;margin:0 0 18px;padding:14px 0 0;border-top:1px solid rgba(23,36,27,.25);display:grid;gap:7px;font-size:14px}
.price li{display:flex;justify-content:space-between;gap:12px}
.price li b{font-variant-numeric:tabular-nums;white-space:nowrap}
.price .btn{background:var(--sand-ink);color:var(--sand-l);border-color:var(--sand-ink);width:100%}
.price .btn:hover{filter:brightness(1.2)}
.price .fine{font-size:13px;line-height:1.45;margin:14px 0 0}

/* ---------- steps ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.steps li{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:8px}
.steps .top{display:flex;justify-content:space-between;align-items:baseline;color:var(--muted)}
.steps .top b{font-family:var(--h);font-size:1.6rem;color:var(--acc);letter-spacing:-.02em}
.steps p{font-size:14.5px;line-height:1.5;color:var(--soft);margin:0}
.steps button{margin-top:auto;align-self:flex-start;background:none;border:0;padding:6px 0 0;color:var(--acc);cursor:pointer;font-family:var(--m);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.steps button:hover{color:var(--ink)}

/* ---------- service cards ---------- */
.svc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.svc a{display:flex;flex-direction:column;gap:8px;height:100%;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;text-decoration:none}
.svc a:hover{border-color:var(--acc)}
.svc p{font-size:14.5px;color:var(--soft);margin:0}
.svc .go{margin-top:auto;color:var(--acc)}

/* ---------- quote + forms ---------- */
.quote{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:start}
.quote h2{font-size:clamp(2.4rem,5.4vw,4.4rem)}
.tel{display:inline-block;font-family:var(--h);font-weight:800;font-size:1.7rem;letter-spacing:-.02em;text-decoration:none;margin-top:6px}
.form{padding:24px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form label{display:block;color:var(--muted);margin-bottom:6px}
.form .f{margin-bottom:14px}
.form input,.form select,.form textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);padding:12px 14px;background:var(--bg);border:1.5px solid var(--line2);border-radius:10px}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--acc);outline:none}
.form [aria-invalid=true]{border-color:var(--err)}
.form .err{display:block;color:var(--err);font-size:13px;margin-top:5px}
.form .err:empty{display:none}
.form textarea{min-height:104px;resize:vertical}
.form .btn{width:100%}
.form .hp{position:absolute;left:-9999px}
.form .note{font-size:14px;color:var(--soft);margin:0 0 14px}
.status:empty{display:none}
.status{margin:14px 0 0;padding:12px 14px;border-radius:10px;background:var(--acc-tint);border-left:4px solid var(--acc);font-size:15px}
.status.bad{background:var(--err-bg);border-left-color:var(--err)}

/* ---------- inner pages ---------- */
.page-head{padding-block:clamp(40px,7vw,80px) 28px}
.page-head h1{font-size:clamp(2.4rem,6vw,4.6rem)}
.page-head .lead{margin-top:16px}
.crumb{color:var(--muted);margin-bottom:14px}
.crumb a{color:var(--acc)}
.two{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start}
.prose h2{font-size:clamp(1.6rem,3vw,2.2rem);margin:34px 0 12px}
.prose h2:first-child{margin-top:0}
.prose ul{padding-left:1.2em;margin:0 0 1rem}
.prose li{margin-bottom:6px}
.ph{position:relative;display:grid;place-items:center;text-align:center;background:repeating-linear-gradient(135deg,var(--bg2) 0 14px,var(--bg3) 14px 28px);border:1.5px dashed var(--line2);border-radius:16px;color:var(--soft);aspect-ratio:4/3;padding:18px}
.ph span{background:var(--bg);border-radius:10px;padding:8px 14px;font-family:var(--m);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.faq details{border-bottom:1px solid var(--line);padding:14px 0}
.faq summary{cursor:pointer;font-weight:600}
.faq p{margin:10px 0 0}
.facts{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.facts li{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 16px}
.areas{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.areas li{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:15px}
.proj{display:grid;gap:40px}
.proj article{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center}
.ba{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:4/3}
.ba .ph{position:absolute;inset:0;border-radius:0;aspect-ratio:auto}
.ba .after{clip-path:inset(0 0 0 var(--x,50%));background:repeating-linear-gradient(45deg,var(--acc-tint) 0 14px,var(--bg3) 14px 28px)}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;background:var(--ink);pointer-events:none;z-index:2}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:3;margin:0}
.ba .tag{position:absolute;bottom:12px;z-index:2;background:var(--film);color:var(--film-ink);border-radius:8px;padding:5px 9px}
.ba .t-b{left:12px}.ba .t-a{right:12px}
.cta{background:var(--acc);color:var(--acc-ink);border-radius:20px;padding:clamp(24px,4vw,44px);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.cta h2{font-size:clamp(1.8rem,3.6vw,2.8rem)}
.cta .btn{background:var(--acc-ink);border-color:var(--acc-ink);color:var(--acc)}
.cta .btn:hover{filter:brightness(1.25)}   /* v1.5.1: the button always stands out from the band (it vanished when --sand matched --acc) */

/* ---------- footer + sticky call ---------- */
.foot{border-top:1px solid var(--line);color:var(--soft);font-size:14px;background:var(--bg2)}
.foot .wrap{padding-block:34px;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:24px}
.foot b{color:var(--ink)}
.foot a{color:var(--acc)}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:4px}
.foot .legal{grid-column:1/-1;border-top:1px solid var(--line);padding-top:16px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--muted)}
.sticky{display:none}

/* ---------- responsive ---------- */
@media (max-width:1060px){
  .cards{grid-template-columns:repeat(3,1fr)}
  .steps,.svc{grid-template-columns:repeat(2,1fr)}
  .xray,.est,.quote,.two,.proj article{grid-template-columns:1fr;gap:28px}
  .price{position:static}
  .site-head nav{display:none}.site-head .call{margin-left:auto}
  .menu-btn{display:inline-block}
}
@media (max-width:760px){
  body{font-size:16px}
  .preview .long{display:none}
  .bar-top .wrap{padding-block:10px;gap:10px}
  .logo small{display:none}
  .logo b{font-size:1rem}
  .site-head .call{padding:8px 14px;font-size:14px}
  .call .num{display:none}
  .hud{top:108px;padding:8px 12px 8px 9px}.hud svg{width:32px;height:32px}.hud b{font-size:1.45rem}
  .illus{top:172px;right:auto;left:max(20px,env(safe-area-inset-left,0px))}
  .intro{bottom:auto;top:calc(var(--imgb,60svh) + 4px)}
  .intro .btn{padding:10px 15px;font-size:14px}
  .intro .btn.ghost{display:none}
  .intro h1{font-size:2.2rem}
  .intro p{font-size:1rem;margin:12px 0 16px}
  .cap{bottom:126px}
  .cap .wrap{justify-content:flex-start}
  .cap .in{text-align:left}
  .cap h2{font-size:2.2rem}
  .cap p{margin:10px 0 0;font-size:.98rem}
  .names span{display:none}.names span.on{display:block;left:50%!important;transform:translateX(-50%)}
  .dash .count{display:none}
  .cards{grid-template-columns:repeat(2,1fr)}
  .specs{grid-template-columns:repeat(2,1fr)}
  .steps,.svc{grid-template-columns:1fr}
  .form .row{grid-template-columns:1fr}
  .spot em{display:none}
  .done-msg{font-size:14px;padding:9px 12px}.done-msg .more{display:none}
  .game .chip b{font-size:1.2rem}
  .studio .chip{display:none}
  .foot .wrap{grid-template-columns:1fr}
  .menu ul{grid-template-columns:1fr}
  .sticky{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;gap:8px;padding:10px max(12px,env(safe-area-inset-left,0px)) calc(10px + env(safe-area-inset-bottom,0px));background:var(--head);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--line2);box-shadow:0 -8px 24px rgba(0,0,0,.25);transition:transform .25s var(--ease-out)}
  .sticky .btn{flex:1}
  .sticky .btn:first-child{background:var(--pop);border-color:var(--pop);color:var(--pop-ink)}
  .sticky.away{transform:translateY(110%)}
  body{padding-bottom:70px}
}
@media (max-width:760px) and (max-height:760px){.intro p{display:none}}
@media (max-width:760px) and (max-height:680px){.cap p{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* v1.2 standard rule (27 Oct): home ≤ about 10,000 px on a 390 px phone, not counting the film's track.
   Long card lists become swipe rows on phones; nothing is hidden, every card stays one swipe away. */
@media (max-width:760px){
  .steps,.svc,.cards{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
    margin-inline:calc(-1 * max(20px,env(safe-area-inset-left,0px)));padding:2px max(20px,env(safe-area-inset-left,0px)) 12px;scroll-padding-inline:max(20px,env(safe-area-inset-left,0px));scrollbar-width:thin}
  .steps>li,.svc>li,.cards>li{flex:0 0 78%;scroll-snap-align:start;min-width:0}
  .cards>li{flex-basis:62%}
  section.s{padding-block:56px}
  .s-head{margin-bottom:24px}
}

/* ---------------- v1.4 (29 Oct 2026) ---------------- */
/* film stage headlines (P109): line 1 white, line 2 accent; "Scroll to … it" cue */
.cap h2 .acc{color:var(--pop-l)}
.cap .cue{display:inline-block;margin:14px 0 0;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--film-ink);background:rgba(10,16,12,.6);border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:6px 12px}
.cap .cue[hidden],.cap p[hidden]{display:none}
.cap .in{position:relative;z-index:0}
.cap .in::before{content:"";position:absolute;inset:-44px -60px -40px -100px;z-index:-1;background:radial-gradient(farthest-side,rgba(8,12,10,.84) 56%,rgba(8,12,10,.5) 80%,rgba(8,12,10,0) 100%);pointer-events:none}
/* job buttons on enquiry-only forms (lead.js: fieldset[data-jobs], at least one) */
fieldset.jobs{border:0;padding:0;margin:0;min-width:0}
fieldset.jobs legend{padding:0;margin-bottom:8px}
.jbs{display:flex;flex-wrap:wrap;gap:8px}
.jb{position:relative;display:inline-block;margin:0}
.jb input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.jb span{display:inline-block;padding:9px 14px;border:1.5px solid var(--line2);border-radius:999px;font-weight:600;font-size:15px;line-height:1.25;cursor:pointer;background:var(--card);color:var(--ink)}
.jb input:checked+span{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.jb input:focus-visible+span{outline:3px solid var(--sand);outline-offset:2px}
fieldset.jobs.missing .jb span{border-color:var(--err)}
fieldset.jobs.missing legend::after{content:" Pick at least one";color:var(--err);font-weight:700;letter-spacing:0;text-transform:none}
.hire-dates{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* real before/after pair (transformation slider + projects) */
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ba img.a{clip-path:inset(0 0 0 var(--x,50%))}
.ba .handle::after{content:"";position:absolute;top:50%;left:50%;width:40px;height:40px;transform:translate(-50%,-50%);border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.ba .handle{background:#fff}
.tf{display:grid;grid-template-columns:1.25fr .75fr;gap:32px;align-items:center}
.tf .ba{aspect-ratio:4/3}
.tf .cap2{margin-top:10px;font-size:13.5px;color:var(--muted)}
/* reviews (P95, P105): exact words from reviews.json; or the honest empty state */
.revs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.revs li{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:10px}
.revs .stars{color:var(--sand);letter-spacing:2px;font-size:18px}
.revs blockquote{margin:0;font-size:1.02rem;color:var(--ink)}
.revs .who{margin-top:auto;font-size:13.5px;color:var(--muted)}
.rev-line{margin:0 0 16px;font-weight:600}
.rev-more{margin-top:16px}
.rev-empty{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;background:var(--card);border:1px dashed var(--line2);border-radius:18px;padding:clamp(20px,3vw,32px)}
.rev-empty img{width:150px;height:150px;border-radius:10px;background:#fff;padding:8px}
/* other services (own section each; optional own form) */
.osv{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px}
.osv li{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:10px}
.osv p{margin:0;color:var(--soft);font-size:14.5px}
.osv .btn{align-self:flex-start;margin-top:auto}
/* limited company small print (footer only) */
.foot .co{grid-column:1/-1;margin:0;font-size:12.5px;color:var(--muted)}
@media (max-width:1060px){.tf{grid-template-columns:1fr;gap:20px}.revs{grid-template-columns:1fr 1fr}}
@media (max-width:760px){
  .revs{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding-bottom:6px}
  .revs>li{flex:0 0 82%;scroll-snap-align:start;min-width:0}
  .rev-empty{grid-template-columns:1fr}
  .rev-empty img{width:130px;height:130px}
  .hire-dates{grid-template-columns:1fr}
  #transform.s,#reviews.s{padding-block:40px}
  #reviews .s-head{margin-bottom:16px}
  .tf{gap:14px}
  .tf>div:first-child{order:2}
  .tf .txt .lead{margin-top:8px!important;font-size:1rem}
  .tf .txt p:last-child{display:none}
  .tf h2{font-size:1.75rem}
  .cap .in::before{inset:-26px -20px -22px -20px;background:radial-gradient(farthest-side,rgba(8,12,10,.84) 60%,rgba(8,12,10,.45) 84%,rgba(8,12,10,0) 100%)}
  .bar-top .logo{flex:1 1 auto;min-width:0}
  .logo>span{min-width:0}
  .logo b{white-space:normal;overflow-wrap:anywhere;line-height:1.1}
}

.page-head .btn,.osv .btn,.rev-empty .btn{white-space:normal;text-align:center;max-width:100%}
.intro h1 .h1-kick{display:block;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--sand);margin-bottom:14px;text-shadow:none}

/* v8.4 motion rules: entrances ease out, exits ease in, taps spring with a slight overshoot; scroll-driven parts stay linear */
.btn{transition-property:background-color,border-color,color,box-shadow,transform;transition-duration:var(--t-ui);transition-timing-function:var(--ease-out),var(--ease-out),var(--ease-out),var(--ease-out),var(--ease-spring)}
.btn:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){.btn,.btn:active{transition:none;transform:none}}

/* =================== engine v1.5 (31 Oct 2026) =================== */
/* exits ease in (start slow, then away); entrances ease out (motion tokens in :root, written by build.py) */
.intro.gone,.cap .in.swap,.cap .in.hide{transition-timing-function:var(--ease-in);transition-duration:var(--t-out)}
@media (max-width:760px){.sticky.away{transition-timing-function:var(--ease-in);transition-duration:var(--t-out)}}
/* floating "Ask for a quote" on the phone film (filmq.js); pop colour */
.fq{display:none}
@media (max-width:760px){
  .fq{display:inline-flex;position:absolute;z-index:7;right:max(16px,env(safe-area-inset-right,0px));top:calc(var(--imgb,60svh) - 58px);align-items:center;gap:8px;padding:11px 17px;border-radius:999px;background:var(--pop);color:var(--pop-ink);font-weight:700;font-size:15px;line-height:1.2;text-decoration:none;box-shadow:0 10px 26px rgba(0,0,0,.42);
    opacity:0;visibility:hidden;transform:translateY(10px) scale(.96);pointer-events:none;transition:opacity var(--t-out) var(--ease-in),transform var(--t-out) var(--ease-in),visibility 0s linear var(--t-out)}
  .fq svg{width:16px;height:16px;flex:none}
  .fq.on{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity var(--t-in) var(--ease-out),transform var(--t-in) var(--ease-spring),visibility 0s}
}
/* problem tags on the film's opening frames (the survey's problems, placed on the first frame) */
.ptags{position:absolute;inset:0;pointer-events:none;z-index:3;transition:opacity var(--t-in) var(--ease-out)}
.ptags.out{opacity:0;transition:opacity var(--t-out) var(--ease-in)}
.ptag{position:absolute;left:0;top:0;display:flex;align-items:center;gap:7px;white-space:nowrap;transform:translate(var(--tx,0),var(--ty,0))}
.ptag i{flex:none;width:12px;height:12px;border-radius:50%;background:#E5483A;box-shadow:0 0 0 3px rgba(229,72,58,.35),0 0 0 7px rgba(229,72,58,.14)}
.ptag b{font:600 12px/1.2 var(--f);color:#fff;background:rgba(150,28,20,.88);padding:5px 9px;border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.ptag.l{flex-direction:row-reverse}
.ptag.off{display:none}
@media (max-width:760px){.ptag b{font-size:11px;padding:4px 8px}}
/* statement lines (design.json: 2-3 lines in the client's own words) */
.statement{background:var(--film);color:var(--film-ink);padding-block:clamp(56px,9vw,110px)}
.statement p{margin:0;max-width:none;font-family:var(--h);font-weight:800;font-size:clamp(2.2rem,6.4vw,5.4rem);line-height:1;letter-spacing:-.035em;text-wrap:balance}
.statement p+p{margin-top:.18em}
.statement p:nth-child(even){color:var(--pop-l)}
/* process band (design.json "process"): the client's own steps on service pages */
.process{background:var(--bg2);border-block:1px solid var(--line)}
.process ol{list-style:none;margin:0;padding:22px 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px 18px;counter-reset:none}
.process li{display:flex;gap:10px;align-items:baseline;font-weight:600;font-size:15px;line-height:1.3}
.process li b{font-family:var(--m);font-size:12px;color:var(--acc);letter-spacing:.06em}
/* materials wall section */
.mwall{--mw-bg:var(--film);--mw-acc:var(--acc);--mw-panel:var(--card);--mw-text-ink:var(--ink);--mw-muted:var(--muted)}
.mwall .mw-zt h3{font-family:var(--h)}
/* preferred-day chips (when.js, P110) */
.fbw{--w-acc:var(--fbw-acc,var(--acc,#2D5B39));--w-ink:var(--fbw-ink,var(--ink,#17201B));--w-acc-ink:var(--fbw-acc-ink,var(--acc-ink,#fff));--w-line:var(--fbw-line,var(--line2,#CFC6B6));
  --w-bg:var(--fbw-bg,#fff);--w-muted:var(--fbw-muted,var(--muted,#5E6A62));
  --w-eo:var(--ease-out,cubic-bezier(.22,1,.36,1));--w-es:var(--ease-spring,cubic-bezier(.34,1.45,.64,1));--w-t:var(--t-ui,.26s);
  border:0;padding:0;margin:0 0 16px;min-width:0}
.fbw legend{padding:0;font-size:13px;font-weight:700;color:var(--w-ink);margin-bottom:2px}
.fbw legend small{font-weight:500;color:var(--w-muted)}
.fbw-sub{margin:0 0 10px!important;font-size:13px!important;color:var(--w-muted)!important;max-width:none!important}
.fbw-days{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;contain:inline-size}
.fbw-d,.fbw-t{font:inherit;cursor:pointer;color:var(--w-ink);background:var(--w-bg);border:1.5px solid var(--w-line);border-radius:12px;
  transition:background-color var(--w-t) var(--w-eo),border-color var(--w-t) var(--w-eo),color var(--w-t) var(--w-eo),transform var(--w-t) var(--w-es)}
.fbw-d{display:flex;flex-direction:column;align-items:center;gap:0;padding:8px 2px 7px;line-height:1.15;min-width:0}
.fbw-d span{font-size:11.5px;font-weight:700;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.fbw-d b{font-size:1.25rem;font-weight:800;line-height:1.1}
.fbw-d small{font-size:11.5px;opacity:.8}
.fbw-times{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.fbw-t{padding:9px 14px;border-radius:999px;font-size:14px;font-weight:700;line-height:1.2}
.fbw-d:hover,.fbw-t:hover{border-color:var(--w-acc)}
.fbw-d:active,.fbw-t:active{transform:scale(.96)}
.fbw-d[aria-pressed=true],.fbw-t[aria-pressed=true]{background:var(--w-acc);border-color:var(--w-acc);color:var(--w-acc-ink)}
.fbw-d:focus-visible,.fbw-t:focus-visible{outline:3px solid var(--w-acc);outline-offset:2px}
@media (max-width:560px){.fbw-days{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;gap:6px;padding:2px 2px 6px;scrollbar-width:thin}.fbw-d{flex:0 0 66px;scroll-snap-align:start;padding:6px 2px 5px;flex-direction:row;flex-wrap:wrap;justify-content:center;column-gap:4px;align-items:baseline}.fbw-d b{font-size:1.05rem}.fbw-d small{flex-basis:100%;text-align:center}.fbw-t{padding:8px 13px}.fbw-times{margin-top:6px}}
@media (prefers-reduced-motion:reduce){.fbw-d,.fbw-t{transition:none}}
.form .fbw{--fbw-bg:var(--bg);--fbw-acc:var(--acc);--fbw-acc-ink:var(--acc-ink)}
/* v1.5.1: reviews where people take action (P150): one real review under the main buttons; a matching one on each service page. */
.rvp{margin:16px 0 0;padding:12px 14px;max-width:520px;border:1px solid var(--line);border-left:3px solid var(--pop,var(--acc));border-radius:12px;background:var(--card);color:var(--ink);font-size:14.5px;line-height:1.45}
.rvp .stars{color:#B7791F;letter-spacing:1px;font-size:14px}
.rvp blockquote{margin:4px 0 6px;font-weight:500}
.rvp figcaption{font-size:12.5px;color:var(--muted)}
.rvp figcaption a{color:inherit}
.rvp-intro{background:rgba(0,0,0,.42);border-color:rgba(255,255,255,.18);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.rvp-intro figcaption{color:rgba(255,255,255,.78)}
.rvp-intro .stars{color:#F2C14E}
@media (max-width:760px){.rvp-intro{display:none}.rvp{font-size:14px}}
/* v1.5.1: the client's own photos */
.ownph{margin:0;border-radius:16px;overflow:hidden;aspect-ratio:4/3;background:var(--bg3)}
.ownph img,.pgal img,.osv img{display:block;width:100%;height:100%;object-fit:cover}
.pgal{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pgal img{aspect-ratio:4/3;border-radius:10px}
.pgal img:first-child{grid-column:1/-1;border-radius:16px}
.osv img{aspect-ratio:4/3;border-radius:12px;margin-bottom:14px;height:auto}
/* ---- v2 home (1 Nov 2026): transformation + quote in one section; plant hire and groundworks sections; reviews ---- */
.tfq{align-items:start}
.tfq-ba{margin-top:22px}.tfq-ba .ba{aspect-ratio:4/3;border-radius:14px;overflow:hidden}
.tfq-call{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:20px}
.tfq-call .tel{font-size:1.5rem}
.fx{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.fx.flip .fx-img{order:2}
.fx-img{margin:0;border-radius:16px;overflow:hidden;aspect-ratio:4/3;background:var(--card)}
.fx-img img{width:100%;height:100%;object-fit:cover;display:block}
.fx-txt h2{font-size:clamp(2.2rem,4.6vw,3.8rem)}
.fx-txt .lead{margin-top:16px}
.fx-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.rvw{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.rvw li{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 22px 18px;display:flex;flex-direction:column;gap:14px}
.rvw p{margin:0;font-size:1.02rem;line-height:1.55}
.rvw span{font-size:11.5px;color:var(--soft);letter-spacing:.04em}
@media (max-width:1060px){.fx{grid-template-columns:1fr;gap:24px}.fx.flip .fx-img{order:0}.rvw{grid-template-columns:1fr}}
/* v1.6: social buttons at the top (social.css) and the "Build it up" play / pause button (xplay.js) */
.site-head .fbsoc{--soc-ink:var(--ink);--soc-line:var(--line2);--soc-hbg:var(--pop,var(--acc));--soc-on:var(--pop-ink,var(--acc-ink))}
.btn.xplay{padding:10px 10px 10px 22px;gap:14px;font-family:var(--m,inherit);font-size:14px;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 10px 28px rgba(0,0,0,.22)}
.xplay .xp-i{width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.18);display:grid;place-items:center;flex:none;transition:opacity var(--t-ui) var(--ease-out),transform var(--t-ui) var(--ease-spring)}
.xplay .xp-i svg{width:17px;height:17px;fill:currentColor}
.xplay .pa{display:none}.xplay.on .pl{display:none}.xplay.on .pa{display:block}
.xplay.on .xp-i{transform:scale(1.06)}.xplay.wait .xp-i{opacity:.5}
.ly{transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
@media (max-width:760px){.site-head .fbsoc{margin-left:auto}.site-head .bar-top .call{margin-left:0}.btn.xplay{font-size:13px;padding:8px 8px 8px 18px}.xplay .xp-i{width:34px;height:34px}}
@media (max-width:440px){.site-head .fbsoc{gap:3px}.site-head .fbsoc-i{width:30px;height:30px}.site-head .fbsoc-i svg{width:15px;height:15px}.site-head .bar-top .wrap{gap:10px}}
@media (max-width:760px){.intro p{display:none}.intro h1{margin-bottom:14px}}