/* Palette from the business cards: black band, signal yellow, royal blue base, white panels, coloured icon discs */
:root{
  --ink:#0e0e16; --ink2:#181826; --yellow:#f6b800; --yellow2:#ffcb2e; --blue:#2a2fa6; --blue2:#3a40c9; --white:#ffffff; --paper:#f4f4fa;
  --green:#2f9a25; --orange:#e2711d; --pink:#d6337a; --text:#14141c; --muted:#5a5a70; --line:#e2e2ee;
  --disp:"Barlow Condensed","Arial Narrow",Arial,sans-serif; --body:"Barlow",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--white);color:var(--text);font-family:var(--body);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
img,svg,canvas{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:6px}
.wrap{max-width:1160px;margin:0 auto;padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
h1,h2,h3{font-family:var(--disp);font-style:italic;font-weight:900;line-height:.95;margin:0;letter-spacing:.2px;text-wrap:balance}
.eyebrow{font-family:var(--disp);font-style:italic;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--blue);font-size:18px}

/* top bar */
.top{position:sticky;top:0;z-index:50;background:var(--ink);color:#fff;border-bottom:3px solid var(--yellow)}
.top .wrap{display:flex;align-items:center;gap:14px;padding-block:10px}
.logo{font-family:var(--disp);font-style:italic;font-weight:900;line-height:.82;font-size:24px;text-decoration:none}
.logo b{display:block;color:var(--yellow);font-weight:900}
.top nav{display:flex;gap:18px;margin-left:auto;font-weight:600;font-size:15px}
.top nav a{text-decoration:none;opacity:.85}.top nav a:hover{opacity:1;color:var(--yellow)}
.callbtn{display:inline-flex;align-items:center;gap:8px;background:var(--yellow);color:var(--ink);font-family:var(--disp);font-style:italic;font-weight:900;font-size:22px;padding:6px 14px;border-radius:10px;text-decoration:none;white-space:nowrap}
.callbtn svg{width:20px;height:20px}
@media (max-width:860px){.top nav{display:none}.top .callbtn{margin-left:auto;font-size:19px}}

/* hero */
.hero{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;right:-12%;top:-30%;width:62%;height:160%;background:var(--blue);transform:skewX(-18deg);opacity:.95}
.hero::after{content:"";position:absolute;right:calc(50% - 40px);top:0;bottom:0;width:10px;background:var(--yellow);transform:skewX(-18deg);opacity:.9}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr 1fr;gap:34px;align-items:center;padding-block:46px 54px}
.badge247{display:inline-flex;align-items:center;gap:10px;font-family:var(--disp);font-style:italic;font-weight:800;font-size:20px;color:#cfd2ff}
.badge247 span{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:3px solid var(--blue2);color:#fff;font-size:20px}
.hero h1{font-size:clamp(46px,7.4vw,88px);margin:14px 0 6px}
.hero h1 em{font-style:italic;color:var(--yellow);display:block}
.hero .lead{font-size:19px;color:#d9d9ea;max-width:34ch;margin:14px 0 22px}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:12px;padding:14px 20px;font-family:var(--disp);font-style:italic;font-weight:900;font-size:24px;text-decoration:none;cursor:pointer;line-height:1}
.btn svg{width:24px;height:24px;flex:none}
.btn.y{background:var(--yellow);color:var(--ink)}.btn.y:hover{background:var(--yellow2)}
.btn.g{background:var(--green);color:#fff}
.btn.w{background:#fff;color:var(--ink)}
.btn.b{background:var(--blue);color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chip{font-weight:600;font-size:14px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18)}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}.hero::before{right:-40%;width:90%;top:40%}.hero::after{display:none}}

/* simulator */
.sim{background:#fff;color:var(--text);border-radius:20px;padding:14px;box-shadow:0 24px 60px rgba(0,0,0,.45);position:relative}
.simhead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:2px 4px 10px}
.simhead h2{font-size:26px}
.simhead h2 small{display:block;font-family:var(--body);font-style:normal;font-weight:600;font-size:13px;color:var(--muted);letter-spacing:0}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{font:600 13px var(--body);border:1.5px solid var(--line);background:var(--paper);border-radius:999px;padding:6px 11px;cursor:pointer;color:var(--text)}
.seg button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.stage{position:relative;border-radius:14px;overflow:hidden;background:linear-gradient(#eef0ff,#f9f9fd 60%,#e9e9f1 60%);touch-action:none}
.stage canvas{width:100%;height:auto;aspect-ratio:16/9.4}
.readout{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.readout div{background:var(--paper);border-radius:10px;padding:8px 10px;min-width:0}
.readout b{display:block;font-family:var(--disp);font-style:italic;font-weight:900;font-size:26px;line-height:1;font-variant-numeric:tabular-nums}
.readout span{font-size:12px;color:var(--muted);font-weight:600}
.engine{display:inline-flex;align-items:center;gap:6px}
.engine i{width:10px;height:10px;border-radius:50%;background:#d22;box-shadow:0 0 0 3px rgba(221,34,34,.2)}
.engine.ok i{background:#2a2;box-shadow:0 0 0 3px rgba(34,170,34,.2)}
.hold{width:100%;position:relative;overflow:hidden;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.hold .fill{position:absolute;inset:0;width:0;background:rgba(14,14,22,.18);pointer-events:none}
.hold.active{transform:scale(.99)}
.simnote{font-size:13px;color:var(--muted);margin:8px 2px 0;text-align:center}
.live{position:absolute;left:-9999px}

/* sections */
section{padding-block:70px}
.panic{background:var(--yellow);color:var(--ink);padding-block:44px}
.panic .wrap{display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:center}
.panic h2{font-size:clamp(36px,5vw,56px)}
.steps4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;counter-reset:s;margin:0;padding:0;list-style:none}
.steps4 li{background:rgba(255,255,255,.55);border-radius:14px;padding:14px;font-weight:600;font-size:16px;line-height:1.35;counter-increment:s}
.steps4 li::before{content:counter(s);display:block;font-family:var(--disp);font-style:italic;font-weight:900;font-size:36px;line-height:1;color:var(--blue)}
@media (max-width:900px){.panic .wrap{grid-template-columns:1fr}.steps4{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.steps4{grid-template-columns:1fr}}

.sec-head{display:flex;flex-direction:column;gap:6px;margin-bottom:30px}
.sec-head h2{font-size:clamp(40px,5.4vw,64px)}
.sec-head p{color:var(--muted);max-width:60ch;margin:6px 0 0}

.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.svc{border:1px solid var(--line);border-radius:18px;padding:20px;display:flex;gap:14px;align-items:flex-start;background:#fff}
.disc{flex:none;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;color:#fff}
.disc svg{width:28px;height:28px}
.d1{background:var(--blue)}.d2{background:var(--green)}.d3{background:var(--orange)}.d4{background:var(--pink)}.d5{background:var(--ink)}
.svc h3{font-size:26px;margin:2px 0 6px}
.svc p{margin:0;color:var(--muted);font-size:15.5px}

.how{background:var(--paper)}
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.flow li{list-style:none;padding:0 16px 0 0;position:relative}
.flow .n{font-family:var(--disp);font-style:italic;font-weight:900;font-size:64px;line-height:.9;color:var(--blue)}
.flow h3{font-size:28px;margin:6px 0}
.flow p{margin:0;color:var(--muted);font-size:15.5px}
.flow li:not(:last-child)::after{content:"";position:absolute;top:30px;right:14px;left:62px;height:4px;background:repeating-linear-gradient(90deg,var(--yellow) 0 14px,transparent 14px 22px)}
@media (max-width:860px){.flow{grid-template-columns:1fr 1fr;gap:26px}.flow li::after{display:none}}
@media (max-width:480px){.flow{grid-template-columns:1fr}}

/* request form */
.req{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.req::before{content:"";position:absolute;left:-20%;bottom:-40%;width:70%;height:120%;background:var(--blue);transform:skewX(-18deg)}
.req .wrap{position:relative;display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:start}
.req .sec-head p{color:#cfd0e6}
.req .eyebrow{color:var(--yellow)}
.form{background:#fff;color:var(--text);border-radius:20px;padding:22px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form .full{grid-column:1/-1}
.form label{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:14px}
.form input,.form textarea{font:500 17px var(--body);padding:12px 13px;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);color:var(--text);width:100%}
.form input:focus,.form textarea:focus{border-color:var(--blue);outline:none;background:#fff}
.form textarea{min-height:76px;resize:vertical}
.opts{display:flex;flex-wrap:wrap;gap:6px}
.opts label{flex-direction:row;font-weight:600;font-size:14.5px;gap:0}
.opts input{position:absolute;opacity:0;width:1px;height:1px}
.opts span{padding:8px 12px;border:1.5px solid var(--line);border-radius:999px;background:var(--paper);cursor:pointer}
.opts input:checked+span{background:var(--blue);color:#fff;border-color:var(--blue)}
.opts input:focus-visible+span{outline:3px solid var(--yellow);outline-offset:2px}
.locrow{display:flex;gap:8px}
.locrow input{flex:1;min-width:0}
.locbtn{flex:none;border:0;border-radius:10px;background:var(--ink);color:#fff;font:700 14px var(--body);padding:0 12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.locbtn svg{width:18px;height:18px}
.lochint{font-size:13px;color:var(--muted);font-weight:500}
.lochint.ok{color:var(--green);font-weight:700}
.hp{position:absolute;left:-9999px}
.sendrow{display:flex;flex-direction:column;gap:8px}
.small{font-size:13px;color:var(--muted)}
.done{display:none;background:#e9f7e7;border:1.5px solid #bfe6b9;color:#1d5c17;border-radius:12px;padding:14px;font-weight:600}
.done.show{display:block}
.err{color:#b3261e;font-weight:700;font-size:14px;min-height:1em}
@media (max-width:900px){.req .wrap{grid-template-columns:1fr}.form{grid-template-columns:1fr}}

.areas{display:flex;flex-wrap:wrap;gap:10px}
.areas li{list-style:none;font-family:var(--disp);font-style:italic;font-weight:800;font-size:22px;padding:8px 16px;border-radius:12px;background:var(--paper);border:1px solid var(--line)}
.areas li:first-child{background:var(--yellow);border-color:var(--yellow)}

.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq summary{cursor:pointer;font-family:var(--disp);font-style:italic;font-weight:800;font-size:26px;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--blue);font-style:normal}
.faq details[open] summary::after{content:"\2013"}
.faq p{margin:10px 0 0;color:var(--muted)}

.band{background:var(--blue);color:#fff;padding-block:50px}
.band .wrap{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.band h2{font-size:clamp(38px,5vw,60px)}
.band h2 em{color:var(--yellow)}

footer{background:var(--ink);color:#c9c9de;padding-block:40px 110px;font-size:15px}
footer .wrap{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:24px}
footer a{color:#fff}
footer h3{color:#fff;font-size:22px;margin-bottom:8px}
@media (max-width:760px){footer .wrap{grid-template-columns:1fr}}

/* sticky mobile action bar */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;gap:8px;padding:10px max(12px,env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-right));background:rgba(14,14,22,.96);border-top:2px solid var(--yellow)}
.dock .btn{flex:1;font-size:21px;padding:12px}
@media (max-width:860px){.dock{display:flex}}
@media (min-width:861px){footer{padding-bottom:40px}}

/* ---- fixes ---- */
.engine i{display:inline-block;flex:none}
/* ---- nav ---- */
.top nav a[aria-current="page"]{color:var(--yellow);opacity:1}
.menubtn{display:none;margin-left:6px;background:none;border:2px solid rgba(255,255,255,.25);color:#fff;border-radius:10px;width:46px;height:42px;cursor:pointer;flex:none}
.menubtn svg{width:24px;height:24px;margin:auto}
@media (max-width:980px){.top nav{display:none}.menubtn{display:grid;place-items:center}.top .callbtn{margin-left:auto}}
@media (max-width:420px){.top .callbtn span{display:none}.top .callbtn{padding:8px 10px}}
.drawer{position:fixed;inset:0;z-index:80;background:var(--ink);color:#fff;display:flex;flex-direction:column;padding:18px max(18px,env(safe-area-inset-left)) 30px;transform:translateY(-102%);transition:transform .35s cubic-bezier(.2,.8,.2,1);overflow:auto}
.drawer.open{transform:none}
.drawer .dhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.drawer a.dl{font-family:var(--disp);font-style:italic;font-weight:900;font-size:40px;line-height:1.05;text-decoration:none;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.drawer a.dl small{display:block;font-family:var(--body);font-style:normal;font-weight:500;font-size:14px;color:#a9abc8}
.drawer a.dl:hover{color:var(--yellow)}
.drawer .dctas{display:flex;gap:10px;margin-top:22px}.drawer .dctas .btn{flex:1}
@media (prefers-reduced-motion:reduce){.drawer{transition:none}}

/* ---- inner page hero ---- */
.phero{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.phero::before{content:"";position:absolute;right:-18%;top:-40%;width:55%;height:180%;background:var(--blue);transform:skewX(-18deg)}
.phero::after{content:"";position:absolute;right:calc(37% - 6px);top:0;bottom:0;width:10px;background:var(--yellow);transform:skewX(-18deg)}
.phero .wrap{position:relative;z-index:1;padding-block:54px 58px;display:grid;grid-template-columns:1.3fr .7fr;gap:30px;align-items:end}
.phero h1{font-size:clamp(44px,6.6vw,84px)}
.phero h1 em{color:var(--yellow)}
.phero p.lead{font-size:19px;color:#d9d9ea;max-width:52ch;margin:16px 0 0}
.crumbs{font-size:14px;color:#a9abc8;margin-bottom:14px}
.crumbs a{color:#fff}
.phero .side{display:flex;flex-direction:column;gap:10px}
@media (max-width:860px){.phero .wrap{grid-template-columns:1fr}.phero::after{display:none}.phero::before{right:-50%;width:90%}}

/* ---- prose ---- */
.prose{max-width:760px}
.prose h2{font-size:clamp(34px,4.4vw,48px);margin:46px 0 14px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:28px;margin:30px 0 8px}
.prose p,.prose li{font-size:18px;line-height:1.6}
.prose ul{padding-left:22px}
.prose li{margin-bottom:6px}
.prose li::marker{color:var(--blue)}
.cols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:50px;align-items:start}
.aside{position:sticky;top:96px;display:flex;flex-direction:column;gap:14px}
@media (max-width:980px){.cols{grid-template-columns:1fr}.aside{position:static}}
.callout{border-radius:18px;padding:20px;background:var(--ink);color:#fff}
.callout h3{font-size:30px;margin:0 0 8px;color:var(--yellow)}
.callout p{margin:0 0 14px;color:#d6d7ea;font-size:16px}
.callout .btn{width:100%;margin-top:8px}
.warn{border-left:6px solid var(--pink);background:#fdeef4;border-radius:12px;padding:16px 18px;margin:20px 0}
.warn b{color:#a3134f}
.good{border-left:6px solid var(--green);background:#eaf7e8;border-radius:12px;padding:16px 18px;margin:20px 0}
.dodont{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0}
.dodont div{border-radius:16px;padding:18px}
.dodont .do{background:#eaf7e8}.dodont .dont{background:#fdeef4}
.dodont h3{margin:0 0 8px;font-size:28px}
.dodont ul{margin:0;padding-left:20px}
@media (max-width:640px){.dodont{grid-template-columns:1fr}}
.symptoms{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:16px 0;padding:0;list-style:none}
.symptoms li{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px;font-weight:600;font-size:16px;margin:0}
.symptoms li::before{content:"!";display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--orange);color:#fff;font-weight:800;margin-right:8px;font-size:14px}

/* ---- problem tiles (home + other pages) ---- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.tile{position:relative;display:flex;flex-direction:column;gap:10px;border-radius:20px;padding:22px;text-decoration:none;color:#fff;min-height:200px;overflow:hidden;isolation:isolate}
.tile h3{font-size:34px}
.tile p{margin:0;font-size:15.5px;opacity:.92}
.tile .go{margin-top:auto;font-family:var(--disp);font-style:italic;font-weight:900;font-size:20px;display:inline-flex;align-items:center;gap:6px}
.tile::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-120%;height:100%;background:var(--yellow);border-radius:40% 45% 0 0;transition:bottom .45s cubic-bezier(.2,.8,.2,1);z-index:-1}
.tile:hover::after,.tile:focus-visible::after{bottom:-10%}
.tile:hover,.tile:focus-visible{color:var(--ink)}
.t1{background:var(--pink)}.t2{background:var(--green)}.t3{background:var(--blue)}.t4{background:var(--ink)}.t5{background:var(--orange)}
@media (prefers-reduced-motion:reduce){.tile::after{transition:none}}

/* ---- FAQ page ---- */
.faqnav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.faqnav a{text-decoration:none;font-weight:700;font-size:14px;padding:8px 14px;border-radius:999px;background:var(--paper);border:1px solid var(--line)}
.faqnav a:hover{background:var(--yellow);border-color:var(--yellow)}
.faqgroup{scroll-margin-top:90px;margin-bottom:34px}
.faqgroup>h2{font-size:clamp(32px,4vw,44px);margin-bottom:6px}
.faq details p+p{margin-top:8px}
.faqsearch{width:100%;max-width:520px;font:500 18px var(--body);padding:14px 16px;border-radius:12px;border:2px solid var(--line);margin:0 0 18px}
.faqsearch:focus{border-color:var(--blue);outline:none}
.nores{display:none;color:var(--muted)}

/* ---- areas ---- */
.areagrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.area{border:1px solid var(--line);border-radius:16px;padding:16px}
.area h3{font-size:28px;margin-bottom:4px}
.area p{margin:0;color:var(--muted);font-size:15px}

/* ---- splash transition ---- */
.splash{position:fixed;inset:0;z-index:999;pointer-events:none}
html.splash-in body::before{content:"";position:fixed;inset:0;z-index:998;background:linear-gradient(#ffcb2e,#e3a200)}
.pghost{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1000;font-family:var(--disp);font-style:italic;font-weight:900;font-size:clamp(40px,9vw,110px);color:var(--ink);pointer-events:none;white-space:nowrap;opacity:0;transition:opacity .2s}
.pghost.show{opacity:1}

/* ---- 404 ---- */
.nf{min-height:50vh;display:grid;place-items:center;text-align:center}
/* ---- simulator v2 ---- */
.stage{background:#f3f4f8}
.stage canvas{aspect-ratio:2/1}
.engine i{margin-right:8px}
.simctl{display:flex;flex-direction:column;gap:8px;margin:0 2px 10px}
.seg2{align-items:center}
.seg2 span{font-weight:700;font-size:13px;color:var(--muted);margin-right:4px}
.sim.wide{max-width:none}
.simsec{background:var(--paper)}
.simsec .sim{box-shadow:0 10px 30px rgba(14,14,22,.12)}
/* ---- phone polish ---- */
@media (max-width:900px){.hero .wrap{padding-block:26px 40px;gap:26px}}
.dock .btn{white-space:nowrap;font-size:19px;padding:12px 8px}
@media (max-width:380px){.dock .btn{font-size:17px}}

/* ================= photo-real pass ================= */
/* heroes: real photography, graded dark, no flat shapes */
.hero::before,.hero::after,.phero::before,.phero::after{display:none}
.hero,.phero{background:#07070b}
.hero .bgimg,.phero .bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62}
.hero .shade,.phero .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,7,11,.96) 0%,rgba(7,7,11,.78) 42%,rgba(7,7,11,.35) 100%),linear-gradient(0deg,rgba(7,7,11,.9),rgba(7,7,11,0) 45%)}
.hero .wrap,.phero .wrap{z-index:2}
.hero{border-bottom:4px solid var(--yellow)}
@media (max-width:900px){.hero .shade,.phero .shade{background:linear-gradient(0deg,rgba(7,7,11,.95) 20%,rgba(7,7,11,.55))}}
@media (prefers-reduced-motion:no-preference){.hero .bgimg{animation:kb 30s ease-in-out infinite alternate}@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.1) translate(-1.5%,1%)}}}
.credit{position:absolute;right:10px;bottom:8px;z-index:2;font-size:11px;color:rgba(255,255,255,.45)}

/* photo tiles */
.tile{min-height:250px;background:#111}
.tile .timg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .6s ease}
.tile::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(8,8,12,.92) 18%,rgba(8,8,12,.35))}
.tile::after{display:none}
.tile:hover .timg,.tile:focus-visible .timg{transform:scale(1.06)}
.tile:hover,.tile:focus-visible{color:#fff}
.tile .go{color:var(--yellow)}
.t1,.t2,.t3,.t4,.t5{background:#111}
.tile h3{text-shadow:0 2px 12px rgba(0,0,0,.5)}

/* photo strip / split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.split img{width:100%;border-radius:18px;aspect-ratio:4/3;object-fit:cover}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.prose figure{margin:26px 0}
.prose figure img{width:100%;border-radius:16px;aspect-ratio:16/9;object-fit:cover}
.prose figcaption{font-size:13px;color:var(--muted);margin-top:6px}

/* demo: photo-real */
.sim.real{background:#0d0e13;color:#fff;border:1px solid #23252f}
.sim.real .simhead h2 small{color:#a3a6bd}
.sim.real .seg button{background:#1a1c25;border-color:#2b2e3b;color:#e8e9f2}
.sim.real .seg button[aria-pressed="true"]{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.sim.real .seg2 span{color:#a3a6bd}
.realstage{display:grid;grid-template-columns:1.55fr 1fr;gap:10px}
.jars{position:relative;border-radius:14px;overflow:hidden;background:#000;touch-action:none;min-height:0}
.jarbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(3px) brightness(.38) saturate(.9);transform:scale(1.08)}
.jars canvas{position:relative;width:100%;height:auto;aspect-ratio:800/520}
.stepchip{position:absolute;left:10px;top:10px;font-family:var(--disp);font-style:italic;font-weight:900;font-size:18px;background:rgba(0,0,0,.65);border:1px solid rgba(255,255,255,.18);padding:4px 10px;border-radius:8px;backdrop-filter:blur(4px)}
.stepchip.ok{background:#1f7a17;border-color:#1f7a17}
.cluster{position:relative;border-radius:14px;overflow:hidden;background:#000;min-height:220px}
.cluster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;transition:filter .35s ease}
.cluster.off img{filter:brightness(.12) saturate(.3)}
.cluster.on img{filter:brightness(.9) saturate(.85) hue-rotate(0deg)}
.cluster.check img{filter:brightness(1.25) saturate(1.2)}
.cluster.warn img{filter:brightness(1) saturate(1.1)}
.cluster.warn::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 60px rgba(255,160,20,.55);animation:warnpulse 1s ease-in-out infinite}
@keyframes warnpulse{50%{box-shadow:inset 0 0 20px rgba(255,160,20,.15)}}
@media (prefers-reduced-motion:reduce){.cluster.warn::after{animation:none}}
.cluster .clabel{position:absolute;left:10px;top:10px;font-family:var(--disp);font-style:italic;font-weight:900;font-size:18px;background:rgba(0,0,0,.65);padding:4px 10px;border-radius:8px}
.cluster.warn .clabel{background:#b3261e}.cluster.on .clabel{background:#1f7a17}
.cluster .cnote{position:absolute;left:10px;right:10px;bottom:10px;font-size:13px;font-weight:600;background:rgba(0,0,0,.6);padding:6px 9px;border-radius:8px;line-height:1.3}
.sim.real .readout div{background:#171922}
.sim.real .readout span,.sim.real .simnote{color:#a3a6bd}
@media (max-width:640px){.realstage{grid-template-columns:1fr}.cluster{min-height:170px}}
/* two real cluster photos: clean (off / running) and warning (started / bulb check) */
.cluster img{transition:filter .35s ease,opacity .35s ease}
.cluster .dwarn{opacity:0}
.cluster.off .dclear{filter:brightness(.1) saturate(.3)}
.cluster.on .dclear{filter:brightness(1) saturate(1)}
.cluster.warn .dclear,.cluster.check .dclear{opacity:0}
.cluster.warn .dwarn{opacity:1;filter:brightness(1)}
.cluster.check .dwarn{opacity:1;filter:brightness(1.3) saturate(1.3)}
.cluster img{object-position:50% 50%}
.cluster .dwarn{object-position:62% 72%}
.cluster .cnote{max-width:78%}
/* splash label: plain white on the real footage */
.pghost{color:#fff;text-shadow:0 4px 30px rgba(80,30,0,.55)}
html.splash-in body::before{background:#c9780f}
/* postcode checker */
.pcheck{background:var(--ink);color:#fff;border-radius:18px;padding:20px}
.pcheck h3{font-size:30px;margin:0 0 4px;color:var(--yellow)}
.pcheck p{margin:0 0 12px;color:#d6d7ea;font-size:16px}
.pcform{display:flex;gap:8px}
.pcform input{flex:1;min-width:0;font:600 19px var(--body);padding:12px 14px;border-radius:10px;border:2px solid #2e3140;background:#14151c;color:#fff;text-transform:uppercase}
.pcform input:focus{outline:none;border-color:var(--yellow)}
.pcform .btn{font-size:21px;padding:10px 18px}
.pcout{margin:12px 0 0;font-size:16px;line-height:1.45;color:#fff}
.pcout:empty{display:none}
.pcout .btn{display:flex;width:100%;margin-top:10px;font-size:20px;padding:10px}
.pcout a:not(.btn){color:var(--yellow)}
.pcout.yes b{color:#7fe07a}.pcout.maybe b{color:var(--yellow)}.pcout.no b,.pcout.err{color:#ffb4a8}
.prose .pcheck{margin-top:30px}
/* town page chips + area cards as links */
.chiplinks{display:flex;flex-wrap:wrap;gap:8px}
.chiplink{text-decoration:none;font-weight:700;font-size:15px;padding:8px 14px;border-radius:999px;background:var(--paper);border:1px solid var(--line)}
.chiplink:hover{background:var(--yellow);border-color:var(--yellow)}
.arealink{text-decoration:none;display:flex;flex-direction:column;gap:4px;transition:border-color .2s,transform .2s}
.arealink:hover{border-color:var(--yellow);transform:translateY(-2px)}
.arealink .go{margin-top:8px;font-family:var(--disp);font-style:italic;font-weight:900;font-size:18px;color:var(--blue)}
/* reviews band */
.revband{background:var(--yellow);padding-block:26px}
.revband .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.rev{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.rev .stars{font-size:30px;letter-spacing:2px;color:var(--ink)}
.rev b{font-family:var(--disp);font-style:italic;font-weight:900;font-size:34px}
@media (max-width:980px){.cols{grid-template-columns:minmax(0,1fr)}}
.split>*{min-width:0}
/* fuel line flush */
.flushstage canvas{aspect-ratio:1000/440}
.flushsim .jarbg{filter:blur(2px) brightness(.32) saturate(.8)}
/* no text selection / copy menu while holding on the demos */
.jars,.jars *,.hold,.sim canvas{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}