/* PreReal website v1. Layout: a keynote in Lee's Sully colours. Deep night ground, four drifting lights, faint service
   runs with travelling pulses, huge type for statements, glass panels for detail. One committed dark look. */
:root{
  --bg:#07080F; --fg:#F5F7FF; --muted:rgba(235,240,255,.66); --line:rgba(255,255,255,.14);
  --glass:rgba(40,44,70,.42); --glass-hi:rgba(255,255,255,.08); --chip:rgba(255,255,255,.07);
  --accent:#4D8DFF; --cyan:#00D0E6; --pink:#FF5FA2; --violet:#A98BFF; --ok:#34D39A;
  --b1:#3B2BFF; --b2:#00B3C7; --b3:#FF3D8B; --b4:#6C3BFF;
  --display:-apple-system,"SF Pro Display","Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
  --font:-apple-system,"SF Pro Text","Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
  --mono:"SF Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --spring:cubic-bezier(.34,1.4,.5,1); --r:26px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.55 var(--font);-webkit-font-smoothing:antialiased;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* Background: lights and runs */
.wall{position:fixed;inset:-20%;z-index:0;filter:blur(100px);opacity:.55;pointer-events:none}
.wall i{position:absolute;width:46vmax;height:46vmax;border-radius:50%}
.wall i:nth-child(1){background:var(--b1);left:5%;top:0}
.wall i:nth-child(2){background:var(--b2);right:0;top:10%}
.wall i:nth-child(3){background:var(--b3);left:30%;bottom:-5%;opacity:.55}
.wall i:nth-child(4){background:var(--b4);right:20%;bottom:10%}
.runs{position:fixed;inset:0;z-index:0;pointer-events:none;width:100%;height:100%}
.runs .base{fill:none;stroke:rgba(235,240,255,.07);stroke-width:1}
.runs .pulse{fill:none;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:36 964;stroke-dashoffset:1000;opacity:.8}
.sep{display:block;width:100%;height:64px;overflow:visible;position:relative;z-index:1}
.sep .base{fill:none;stroke:var(--line);stroke-width:1}
.sep .wallmark{fill:none;stroke:rgba(235,240,255,.35);stroke-width:1}
.sep .hole{fill:none;stroke:var(--cyan);stroke-width:1;stroke-dasharray:3 3}
.sep .pulse{fill:none;stroke:url(#pg);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:70 930;stroke-dashoffset:1000}
@media (prefers-reduced-motion:no-preference){
  .wall i{animation:drift 38s ease-in-out infinite alternate}
  .wall i:nth-child(2){animation-duration:46s;animation-delay:-12s}.wall i:nth-child(3){animation-duration:52s;animation-delay:-20s}.wall i:nth-child(4){animation-duration:41s;animation-delay:-5s}
  @keyframes drift{50%{transform:translate(8vmax,-6vmax) scale(1.15)}100%{transform:translate(-6vmax,5vmax) scale(.9)}}
  .runs .pulse{animation:flow 14s linear infinite}
  .runs .p2{animation-duration:19s;animation-delay:-6s}.runs .p3{animation-duration:23s;animation-delay:-11s}.runs .p4{animation-duration:17s;animation-delay:-3s}
  .sep .pulse{animation:flow 5.5s cubic-bezier(.45,0,.2,1) infinite}
  .sep .hole{animation:blink 5.5s ease-in-out infinite}
  @keyframes flow{to{stroke-dashoffset:0}}
  @keyframes blink{45%,60%{stroke:var(--pink)}}
  .rise{animation:rise .9s var(--spring) both}.rise.d2{animation-delay:.12s}.rise.d3{animation-delay:.24s}
  @keyframes rise{from{transform:translateY(18px)}to{transform:none}}
}

/* Frame */
.wrap{position:relative;z-index:1;max-width:1180px;margin:0 auto}
.site-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-block:18px}
.mark{font:700 22px var(--display);letter-spacing:-.02em;text-decoration:none}
.nav{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.nav a{display:inline-flex;align-items:center;height:38px;padding:0 14px;border-radius:99px;font:600 14px var(--font);text-decoration:none;color:var(--muted)}
.nav a:hover{color:var(--fg)}
.nav a[aria-current="page"]{color:var(--fg);background:var(--chip)}
.pill{display:inline-flex;align-items:center;height:44px;border-radius:99px;padding:0 20px;font:600 15px var(--font);color:var(--fg);text-decoration:none;border:0;cursor:pointer;
  background:var(--glass);-webkit-backdrop-filter:blur(30px) saturate(1.8);backdrop-filter:blur(30px) saturate(1.8);box-shadow:inset 0 1px 0 var(--glass-hi),inset 0 0 0 1px var(--line);transition:transform .35s var(--spring)}
.pill.go,.nav a.pill.go{background:var(--fg);color:var(--bg);box-shadow:none}
.pill:hover{transform:scale(1.04)} .pill:active{transform:scale(.95)}
.site-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:13px;padding-block:28px 36px;margin-top:40px;border-top:1px solid var(--line)}
.site-foot nav{display:flex;gap:16px;flex-wrap:wrap}
.site-foot a{color:var(--muted)}

/* Type */
.eyebrow{font:600 15px var(--font);color:var(--muted);margin:0}
.huge{font:800 clamp(52px,10.5vw,148px)/.93 var(--display);letter-spacing:-.045em;margin:0;text-wrap:balance}
.big{font:750 clamp(40px,7vw,96px)/.98 var(--display);letter-spacing:-.04em;margin:0;text-wrap:balance}
.mid{font:750 clamp(32px,5vw,60px)/1.02 var(--display);letter-spacing:-.035em;margin:0;text-wrap:balance}
h3{font:650 21px/1.25 var(--display);letter-spacing:-.01em;margin:0}
.grad{background:linear-gradient(100deg,#8FB6FF 0%,var(--cyan) 35%,var(--pink) 70%,var(--violet) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.say{font:500 clamp(20px,2.4vw,28px)/1.35 var(--display);color:var(--muted);max-width:30em;margin:0;letter-spacing:-.01em}
.say b{color:var(--fg);font-weight:650}
.body{color:var(--muted);max-width:40em;margin:0}
.body b{color:var(--fg)}
.k{font:600 11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* Scenes */
.scene{min-height:min(88vh,860px);display:flex;flex-direction:column;justify-content:center;padding-block:72px;gap:22px}
.scene.short{min-height:auto;padding-block:88px}
.pagehead{padding-block:64px 36px;display:flex;flex-direction:column;gap:18px}
.why{display:grid;gap:10px}
.why p{margin:0;font:700 clamp(30px,4.6vw,60px)/1.06 var(--display);letter-spacing:-.035em;color:var(--muted)}
.why p:last-child{color:var(--fg)}
.num{font:800 clamp(110px,24vw,320px)/.85 var(--display);letter-spacing:-.06em;margin:0}
.words{display:flex;flex-wrap:wrap;gap:14px 16px;list-style:none;margin:8px 0 0;padding:0}
.words li{font:700 clamp(24px,3.6vw,44px)/1.1 var(--display);letter-spacing:-.03em}
.words a{display:inline-block;padding:14px 24px;border-radius:99px;text-decoration:none;
  background:var(--glass);-webkit-backdrop-filter:blur(30px) saturate(1.8);backdrop-filter:blur(30px) saturate(1.8);box-shadow:inset 0 1px 0 var(--glass-hi),inset 0 0 0 1px var(--line);transition:transform .35s var(--spring)}
.words a:hover{transform:scale(1.03)}
.words li.lead a{background:var(--fg);color:var(--bg);box-shadow:none}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}

/* Glass detail */
.glass{background:var(--glass);border-radius:var(--r);-webkit-backdrop-filter:blur(40px) saturate(1.6);backdrop-filter:blur(40px) saturate(1.6);
  box-shadow:inset 0 1px 0 var(--glass-hi),inset 0 0 0 1px var(--line),0 20px 60px rgba(0,0,0,.18)}
.panel{padding:26px}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.card{padding:22px;display:flex;flex-direction:column;gap:10px;min-width:0}
.card.lead{grid-column:1/-1}
.card .top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.code{font:600 12px var(--mono);padding:4px 10px;border-radius:99px;background:var(--fg);color:var(--bg);letter-spacing:.04em}
.card p{margin:0;color:var(--muted);font-size:15.5px}
.card ul{margin:0;padding-left:1.1em;color:var(--muted);font-size:15px}
.spec{margin:auto 0 0;padding-top:12px;border-top:1px solid var(--line);display:grid;gap:6px;font-size:14px}
.spec div{display:flex;justify-content:space-between;gap:10px}
.spec dt{color:var(--muted)} .spec dd{margin:0;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.more{font:600 14px var(--font);color:var(--fg);text-decoration:none;margin-top:4px}
.more:hover{text-decoration:underline;text-underline-offset:4px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;list-style:none;margin:0;padding:0}
.steps li{padding:18px;border-radius:18px;background:var(--chip);min-width:0}
.steps b{display:block;font:650 17px var(--display);margin:6px 0 2px}
.steps span{color:var(--muted);font-size:14.5px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ticks li{padding-left:28px;position:relative;color:var(--muted)}
.ticks li::before{content:"";position:absolute;left:4px;top:.55em;width:12px;height:6px;border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg)}
.ticks.no li::before{border:0;width:12px;height:2px;top:.75em;background:var(--pink);transform:none}

/* Tables */
.tw{overflow-x:auto;border-radius:16px;background:var(--chip)}
table{border-collapse:collapse;width:100%;font:13.5px/1.4 var(--mono);font-variant-numeric:tabular-nums}
.tw.wide table{min-width:760px}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
td.r,th.r{text-align:right}
tr:last-child td{border-bottom:0}
/* Price tables: item names wrap so the price column stays on screen on a phone; prices never break */
.tw:not(.wide) td:not(.r),.tw:not(.wide) th:not(.r){white-space:normal}
@media (max-width:620px){.tw:not(.wide) th,.tw:not(.wide) td{padding:10px 10px}}
.tag{font:600 11px var(--font);padding:3px 9px;border-radius:99px;background:var(--chip);color:var(--muted)}
.tag.on{background:var(--accent);color:#fff}
.tag.new{background:var(--pink);color:#fff}
.note{color:var(--muted);font-size:13.5px;margin:12px 2px 0}

/* Form */
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form .full{grid-column:1/-1}
.form label{display:grid;gap:6px;font:600 14px var(--font)}
.form input,.form select,.form textarea{font:16px var(--font);color:var(--fg);background:var(--chip);border:1px solid var(--line);border-radius:14px;padding:12px 14px;width:100%}
.form textarea{min-height:120px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.form .hint{font:400 13px var(--font);color:var(--muted)}
.status{grid-column:1/-1;padding:14px 16px;border-radius:14px;background:var(--chip);color:var(--fg)}

@media (max-width:900px){.cards,.split{grid-template-columns:1fr}.steps{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.steps,.form{grid-template-columns:1fr}.nav a:not(.pill){padding:0 10px}.panel{padding:20px}}

/* Card line drawings: the drawing is always there faintly; a bright line traces it on a loop. */
.art{display:block;width:100%;height:auto;margin:2px 0 4px;border-radius:16px;background:var(--chip)}
.art .base{fill:none;stroke:rgba(235,240,255,.22);stroke-width:1.2;vector-effect:non-scaling-stroke}
.art .tr{fill:none;stroke:url(#pg);stroke-width:1.8;stroke-linecap:round;stroke-dasharray:100 100;stroke-dashoffset:100;vector-effect:non-scaling-stroke}
.art .lbl{fill:var(--muted);font:10px var(--mono)}
.art .dash{stroke-dasharray:4 3}
.sheet-scene .art{background:transparent}
@media (prefers-reduced-motion:no-preference){
  .art .tr{animation:trace 7s cubic-bezier(.6,0,.3,1) infinite}
  .card:nth-child(2n) .art .tr{animation-delay:-2.3s}.card:nth-child(3n) .art .tr{animation-delay:-4.1s}
  .sheet-scene .art .tr{animation-duration:10s}
  @keyframes trace{0%{stroke-dashoffset:100}55%{stroke-dashoffset:0}80%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
}
@media (prefers-reduced-motion:reduce){.art .tr{stroke-dashoffset:0;opacity:.6}}
.tm{font-size:12.5px;color:var(--muted);margin:0}
.art.hero-art{background:transparent;max-width:880px;margin-top:6px}

/* Count-up figures: the final number is in the page; script rolls it up from 0 when it comes into view or is clicked. */
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:4px 0}
.fig{padding:14px 16px;border-radius:18px;background:var(--chip);min-width:0;cursor:pointer}
.fig .n{display:block;font:800 clamp(34px,4.6vw,54px)/1 var(--display);letter-spacing:-.04em;font-variant-numeric:tabular-nums;
  background:linear-gradient(100deg,#8FB6FF 0%,var(--cyan) 40%,var(--pink) 80%,var(--violet) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.fig .l{display:block;margin-top:6px;color:var(--muted);font-size:14px;line-height:1.35}
.figs{letter-spacing:normal}
.fig{container-type:inline-size}
.fig .n{font-size:min(23cqi,54px);padding-right:.08em}
.figs-lg .fig .n{font-size:min(23cqi,96px)}
.fig .l{font-weight:500;letter-spacing:0}
.figs-note{font-size:12.5px;color:var(--muted);margin:6px 2px 0}
s{color:var(--muted);text-decoration-thickness:2px;margin-right:4px}
.mark img{display:block;height:28px;width:auto}

/* Services by discipline */
.discipline{margin-top:28px}
.dhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 4px 16px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font:600 12px var(--mono);padding:5px 12px;border-radius:99px;background:var(--chip);color:var(--fg)}
.chip.soon{color:var(--muted);border:1px dashed var(--line);background:transparent}
.subs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.sub{padding:14px;border-radius:18px;background:var(--chip);display:flex;flex-direction:column;gap:8px;min-width:0}
.sub b{font:650 16px var(--display)}
.sub p{font-size:14.5px}
.askbar{display:grid;grid-template-columns:200px 1fr auto;gap:20px;align-items:center;margin-top:28px}
.askbar .art{background:transparent}
@media (max-width:900px){.subs{grid-template-columns:1fr}.askbar{grid-template-columns:1fr}}
.code{white-space:nowrap;flex:none}
.card .top .k{text-align:right}
.subrow{display:grid;grid-template-columns:200px 1fr 260px;align-items:center;gap:16px}
.subrow .spec{margin:0;padding-top:0;border-top:0}
@media (max-width:900px){.subrow{grid-template-columns:1fr}}

/* Halloween offer 2026 banner: dark and orange; the countdown in figures that don't jump */
.promo{display:block;margin:8px 0 18px;padding:14px 18px;border-radius:18px;background:linear-gradient(100deg,#1a0b24,#3a1408 70%,#5a2205);
  border:1px solid rgba(255,140,40,.45);color:#fff3e6;line-height:1.45;box-shadow:0 0 28px rgba(255,120,20,.18)}
.promo-big{display:block;font:800 clamp(22px,4.2vw,34px)/1.1 var(--display);letter-spacing:.01em;text-transform:uppercase;color:#ffb02e;
  text-shadow:0 0 18px rgba(255,120,20,.55)}
.promo-big::before{content:"\1F383\00a0"}
.promo-clock{display:inline-block;margin-top:4px;font:700 17px var(--mono);color:#ffb02e;font-variant-numeric:tabular-nums}
.promo a{color:#ffd59a}
.promo[hidden]{display:none}
.promo-print{border-color:rgba(255,140,40,.45)}
/* Free laser scanning banner and pricing section (3 Nov 2026): green-cyan, no countdown */
.prescan{display:block;margin:8px 0 18px;padding:14px 18px;border-radius:18px;background:linear-gradient(100deg,#04201f,#06323a 70%,#0a4a52);
  border:1px solid rgba(0,208,230,.5);color:#e8fdff;line-height:1.45;box-shadow:0 0 28px rgba(0,208,230,.16)}
.prescan-big{display:block;font:800 clamp(20px,3.8vw,30px)/1.1 var(--display);letter-spacing:.01em;text-transform:uppercase;color:#5ff0ff;
  text-shadow:0 0 18px rgba(0,208,230,.45)}
.prescan a{color:#9ff6ff}
.prescan-print{border-color:rgba(0,208,230,.5)}

/* Home hero art (ChatGPT, no text): sits behind the headline, fades into the dark on the left and at the bottom, drifts slowly */
.heroart{position:absolute;top:0;right:0;width:min(100%,1700px);height:min(100vh,900px);z-index:0;pointer-events:none;
  background:url(hero-art.jpg) right center/cover no-repeat;opacity:.6;transform-origin:right center;
  -webkit-mask-image:linear-gradient(90deg,transparent 22%,#000 78%),linear-gradient(180deg,transparent 0,#000 18%,#000 58%,transparent 100%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 22%,#000 78%),linear-gradient(180deg,transparent 0,#000 18%,#000 58%,transparent 100%);mask-composite:intersect}
@media (max-width:760px){.heroart{background-image:url(hero-art-m.jpg);background-position:72% center;opacity:.4;height:min(70vh,640px)}}
@media (prefers-reduced-motion:no-preference){
  .heroart{animation:heroDrift 42s ease-in-out infinite alternate}
  @keyframes heroDrift{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.06) translate3d(-1.2%,.6%,0)}}
}

/* Phones: the art sits big behind the headline block (not under it), sized so the plant (AHU, ducts, pumps) stays in frame,
   with a dark scrim so the words stay readable, and drifts sideways slowly. */
.artband{display:none}
@media (max-width:760px){
  .heroart{display:none}
  .scene-hero{position:relative;isolation:isolate}
  .artband{display:block;position:absolute;inset:0 -16px;z-index:-1;pointer-events:none;
    background-image:linear-gradient(rgba(7,9,24,.36),rgba(7,9,24,.36)),url(hero-art-m.jpg);
    background-size:100% 100%,720px auto;background-position:0 0,89% center;background-repeat:no-repeat;
    -webkit-mask-image:linear-gradient(180deg,transparent 20%,#000 32%,#000 70%,transparent 80%);mask-image:linear-gradient(180deg,transparent 20%,#000 32%,#000 70%,transparent 80%)}
  .scene-hero .eyebrow,.scene-hero .say{text-shadow:0 1px 10px rgba(5,7,20,.9),0 0 3px rgba(5,7,20,.8);color:#d3d8ee}
}
@media (max-width:760px) and (prefers-reduced-motion:no-preference){
  .artband{animation:bandDrift 40s ease-in-out infinite alternate}
  @keyframes bandDrift{from{background-position:0 0,96% center}to{background-position:0 0,80% center}}
}

/* Page-header art (ChatGPT, no text) on Services and Builders' work & fire-stopping: behind the title, fades out on every edge, drifts slowly */
.pagehead{position:relative;isolation:isolate}
.pageart{position:absolute;inset:-60px 0 -36px 0;z-index:-1;pointer-events:none;background-size:cover;background-position:right center;background-repeat:no-repeat;opacity:.6;
  -webkit-mask-image:linear-gradient(90deg,transparent 24%,#000 68%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 24%,#000 76%,transparent 100%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 24%,#000 68%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 24%,#000 76%,transparent 100%);mask-composite:intersect}
.pageart-services{background-image:url(page-services.jpg)}
.pageart-bwic{background-image:url(page-bwic.jpg)}
@media (max-width:760px){.pageart{opacity:.35;background-position:70% center}.pageart-services{background-image:url(page-services-m.jpg)}.pageart-bwic{background-image:url(page-bwic-m.jpg)}}
@media (prefers-reduced-motion:no-preference){
  .pageart{animation:pageDrift 46s ease-in-out infinite alternate;transform-origin:right center}
  @keyframes pageDrift{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.05) translate3d(-1%,.5%,0)}}
}

/* Phones: as on the home page, the art is its own band under the title, showing the whole model, not a crop behind the text. */
.pageband{display:none}
@media (max-width:760px){
  .pageart{display:none}
  .pageband{display:block;height:230px;margin:6px -16px 0;background-size:cover;background-position:74% center;background-repeat:no-repeat;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 80%,transparent 100%)}
  .pageband-services{background-image:url(page-services-m.jpg)}
  .pageband-bwic{background-image:url(page-bwic-m.jpg)}
}
@media (max-width:760px) and (prefers-reduced-motion:no-preference){
  .pageband{animation:pageBandDrift 44s ease-in-out infinite alternate}
  @keyframes pageBandDrift{from{background-position:84% center}to{background-position:58% center}}
}

/* Analytics opt-out on the privacy page: a button that reads as a link. */
.linkbtn{background:none;border:0;padding:0;color:inherit;font:inherit;text-decoration:underline;cursor:pointer}

/* Energised bands (Lee, 4 Nov 2026): full-width pictures, big type, the client's goals first. Colours unchanged. */
html,body{overflow-x:clip}
.bleed{width:100vw;margin-left:calc(50% - 50vw);background-size:cover;background-position:center}
.bandinner{max-width:1180px;margin:0 auto;padding:clamp(56px,9vw,120px) max(16px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:22px;position:relative}
.bandinner.right{align-items:flex-start}
.bandhero{background-image:linear-gradient(90deg,rgba(7,8,15,.92) 0%,rgba(7,8,15,.62) 42%,rgba(7,8,15,.05) 72%),url(people-roof.jpg);background-position:center 30%;min-height:min(88vh,820px);display:flex;align-items:center}
.bandhero .bandinner{width:100%}
.bandhero h1{font-size:clamp(40px,6.6vw,98px);min-height:2em;transition:opacity .35s ease;max-width:12.5em;text-wrap:initial}
.bandhero h1.fade{opacity:0}
.bandhero .say{max-width:17em}
.stats{display:flex;flex-wrap:wrap;gap:16px 40px;margin-top:6px}
.stats div{display:flex;flex-direction:column;max-width:15em}
.stats b{font:800 clamp(54px,8vw,104px)/.95 var(--display);letter-spacing:-.05em}
.stats span{color:var(--fg);font:600 15.5px/1.35 var(--font)}
.goals{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding-block:36px}
.goalcard{display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line);min-width:0}
.goalcard img{width:100%;height:280px;object-fit:cover;display:block}
.goalcard>div{padding:22px;display:flex;flex-direction:column;gap:10px}
.goalcard .mid{font-size:clamp(30px,3.3vw,44px)}
.bandwait{background:linear-gradient(100deg,var(--bg) 0%,var(--b4) 135%)}
.hot{color:var(--pink)}
.bandpeople{background-image:linear-gradient(270deg,rgba(7,8,15,.95) 0%,rgba(7,8,15,.82) 40%,rgba(7,8,15,.05) 70%),url(people-desk.jpg);min-height:min(80vh,720px);display:flex;align-items:center}
.bandpeople .bandinner{width:100%;align-items:flex-end;text-align:right}
.bandpeople .big{font-size:clamp(34px,4.4vw,62px);max-width:9em}
.bandpeople .say{max-width:19em;font-size:clamp(18px,1.9vw,24px)}
.reals{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
.reals img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:18px;display:block;min-width:0}
.words.small li{font-size:clamp(17px,1.9vw,22px)}
.words.small a{padding:10px 18px}
.bandclose{background-image:linear-gradient(90deg,rgba(7,8,15,.86) 0%,rgba(7,8,15,.62) 50%,rgba(7,8,15,.12) 100%),url(goal-skyline.jpg);background-position:center 85%}
.bandclose .bandinner{padding-block:clamp(90px,14vw,190px)}
.bandclose .huge{font-size:clamp(40px,7vw,100px)}
@media (max-width:860px){
  .goals{grid-template-columns:1fr}
  .goalcard img{height:220px}
  .reals{grid-template-columns:repeat(2,1fr)}
  .bandhero{background-image:linear-gradient(180deg,rgba(7,8,15,.86) 0%,rgba(7,8,15,.7) 55%,rgba(7,8,15,.35) 100%),url(people-roof.jpg);background-position:68% center}
  .bandpeople{background-image:linear-gradient(180deg,rgba(7,8,15,.88),rgba(7,8,15,.7)),url(people-desk.jpg);background-position:30% center}
  .bandpeople .bandinner{align-items:flex-start;text-align:left}
}

/* The MEP services picture behind the proof figures (Lee, 4 Nov 2026: real site photos left out of the middle for now) */
.bandproof{background-image:linear-gradient(90deg,rgba(7,8,15,.9) 0%,rgba(7,8,15,.6) 42%,rgba(7,8,15,.1) 100%),url(hero-art.jpg);background-size:cover;background-position:center;min-height:min(86vh,760px);display:flex;align-items:center}
.bandproof .bandinner{width:100%}
.bandproof .figs,.bandproof .figs-lg{margin-top:10px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:min(560px,100%);gap:12px}
.bandproof .figs>*{background:rgba(7,8,15,.62);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.bandwhat .bandinner{padding-block:clamp(56px,8vw,96px)}
@media (max-width:860px){
  .bandproof{background-image:linear-gradient(180deg,rgba(7,8,15,.82),rgba(7,8,15,.55)),url(hero-art-m.jpg);background-position:68% center}
}

/* Meet us page */
.meet-photos{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;padding-block:8px 28px;align-items:stretch}
.meet-photos figure{margin:0;border-radius:var(--r);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line);min-width:0}
.meet-photos img{width:100%;height:100%;min-height:260px;max-height:520px;object-fit:cover;display:block}
.meet-find{display:grid;gap:14px;margin-bottom:28px}
.meet-find .meet-map{width:100%;height:auto;border-radius:calc(var(--r) - 6px);display:block;margin-top:6px}
#book{margin-bottom:48px;display:grid;gap:16px}
@media (max-width:760px){.meet-photos{grid-template-columns:1fr}.meet-photos img{min-height:200px}}