:root {
  --red: #EC0205;
  --red-dk: #C10104;
  /* red & white theme: --ink = page background, --paper = text colour */
  --fg-rgb: 23, 24, 28;
  --bg-rgb: 255, 255, 255;
  --ink: #ffffff;
  --ink-2: #f7f5f4;
  --paper: #17181c;
  --mute: rgba(23, 24, 28, 0.64);
  --line: rgba(23, 24, 28, 0.12);
  --tint: #fdf1f1;
  --sans: 'Poppins', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --gut: clamp(16px, 4vw, 56px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--ink); color: var(--paper); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { background: var(--ink); overflow-x: hidden; }
body.loading { overflow: hidden; }
a { color: inherit; text-decoration: none; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.red { color: var(--red); }
.dim { opacity: 0.5; }
.wm { fill: currentColor; color: currentColor; display: block; }

/* ---------------- loader */
#loader { position: fixed; inset: 0; z-index: 100; background: var(--ink); display: grid; place-content: center; justify-items: center; gap: 26px; transition: opacity 0.9s ease 0.1s, visibility 0s linear 1s; }
#loader .wm { width: min(340px, 64vw); color: var(--paper); clip-path: inset(0 100% 0 0); animation: wipe 1.4s cubic-bezier(.7, 0, .2, 1) 0.2s forwards; }
#loader .bar { width: min(340px, 64vw); height: 1px; background: var(--line); overflow: hidden; }
#loader .bar i { display: block; height: 100%; width: 0; background: var(--red); transition: width 0.4s ease; }
#loader p { color: var(--mute); opacity: 0; animation: fade 0.8s ease 1.2s forwards; }
body:not(.loading) #loader { opacity: 0; visibility: hidden; }
@keyframes wipe { to { clip-path: inset(0 0 0 0); } }
@keyframes fade { to { opacity: 1; } }

/* ---------------- header */
#hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; padding: 20px var(--gut); pointer-events: none; }
#hdr > * { pointer-events: auto; }
#hdr .brand .wm { width: 132px; color: var(--paper); }
#hdr nav { display: flex; gap: 22px; align-items: center; }
#hdr nav .mono { color: var(--mute); transition: color .2s; }
#hdr nav .mono:hover { color: var(--paper); }
.btn { display: inline-flex; align-items: center; gap: 10px; font: 500 14px/1 var(--sans); padding: 14px 22px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: transform .25s, background .25s, border-color .25s; }
.btn:hover { transform: translateY(-1px); }
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-dk); }
.btn-ghost { border-color: rgba(var(--fg-rgb), 0.35); color: var(--paper); backdrop-filter: blur(6px); }
.btn-ghost:hover { border-color: var(--paper); }

/* ---------------- stage layers */
#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; display: block; z-index: 0; }
#reveal, #wash, #vignette, #grain { position: fixed; inset: 0; pointer-events: none; }
#reveal { z-index: 1; opacity: 0; overflow: hidden; }
#reveal img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 60%; }
#reveal::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,9,12,.82) 0%, rgba(8,9,12,.35) 45%, rgba(8,9,12,0) 70%), linear-gradient(0deg, rgba(8,9,12,.6), rgba(8,9,12,0) 40%); }
#wash { z-index: 2; opacity: 0; background: radial-gradient(ellipse at 50% 55%, #fff4e0 0%, #ffcf96 35%, rgba(255,170,90,0.6) 70%, rgba(255,150,70,0.2) 100%); }
#vignette { z-index: 3; background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%); }
#grain { z-index: 4; opacity: .07; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }   /* static: the jittering grain read as flicker */
@keyframes grain { 0% { transform: translate(0,0) } 25% { transform: translate(-3%,2%) } 50% { transform: translate(2%,-3%) } 75% { transform: translate(-2%,-1%) } }

/* ---------------- HUD */
#hud { position: fixed; z-index: 20; right: var(--gut); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-end; gap: 28px; transition: opacity .5s; }
#hud .el { display: flex; align-items: baseline; gap: 8px; color: var(--paper); }
#hud .el .lbl { color: var(--mute); margin-right: 4px; }
#hud .el b { font: 300 34px/1 var(--sans); font-variant-numeric: tabular-nums; min-width: 4.2ch; text-align: right; }
#rail { list-style: none; display: grid; gap: 12px; text-align: right; font: 400 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(var(--fg-rgb), .35); }
#rail li { position: relative; padding-right: 18px; transition: color .4s; }
#rail li::after { content: ''; position: absolute; right: 0; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; border: 1px solid currentColor; transition: background .4s, border-color .4s; }
#rail li.done { color: rgba(var(--fg-rgb), .6); }
#rail li.on { color: var(--paper); }
#rail li.on::after { background: var(--red); border-color: var(--red); box-shadow: 0 0 0 4px rgba(236,2,5,.2); }
#hud .prog { width: 1px; height: 64px; background: var(--line); position: relative; }
#hud .prog i { position: absolute; left: 0; top: 0; width: 1px; height: 0; background: var(--red); }
body.photo #hud, body.photo #callouts, body.past #hud, body.past #callouts, body.past #beats { opacity: 0; pointer-events: none; }

/* ---------------- callouts */
#callouts { position: fixed; inset: 0; z-index: 15; pointer-events: none; transition: opacity .4s; }
.co { position: absolute; left: 0; top: 0; opacity: 0; display: grid; grid-template-columns: auto auto; gap: 2px 0; padding-left: 74px; will-change: transform, opacity; }
.co i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 5px rgba(236,2,5,.25); }
.co i::after { content: ''; position: absolute; left: 5px; top: 4.5px; width: 70px; height: 1px; background: linear-gradient(90deg, var(--red), rgba(var(--fg-rgb), .8)); transform-origin: 0 50%; transform: rotate(-24deg); }
.co .k, .co .v { grid-column: 1; transform: translateY(-34px); }
.co .k { font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); background: rgba(var(--bg-rgb), .55); padding: 6px 8px 4px; backdrop-filter: blur(6px); }
.co .v { font: 500 15px/1 var(--sans); color: #fff; background: rgba(var(--bg-rgb), .72); padding: 4px 8px 8px; backdrop-filter: blur(6px); white-space: nowrap; }

/* ---------------- beats */
#beats { position: fixed; inset: 0; z-index: 10; pointer-events: none; transition: opacity .4s; }
.beat { position: absolute; left: var(--gut); top: 50%; transform: translateY(-50%); width: min(620px, calc(100vw - 2 * var(--gut))); opacity: 0; visibility: hidden; }
.beat.vis { visibility: visible; }
.beat.on { pointer-events: auto; }
.beat .ln { display: block; opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.beat.on .ln { opacity: 1; transform: none; }
.beat.on .ln:nth-child(2) { transition-delay: .08s; } .beat.on h1 .ln:nth-child(2), .beat.on h2 .ln:nth-child(2) { transition-delay: .12s; }
.beat.on > .ln:nth-of-type(1) { transition-delay: .22s; } .beat.on > .ln:nth-of-type(2) { transition-delay: .32s; } .beat.on > .ln:nth-of-type(3) { transition-delay: .42s; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--mute); margin-bottom: 22px; }
.eyebrow b { color: var(--red); font-weight: 500; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(236,2,5,.22); }
h1 { font: 600 clamp(46px, 7.4vw, 112px)/0.98 var(--sans); letter-spacing: -0.035em; text-shadow: 0 2px 40px rgba(0,0,0,.35); }
h2 { font: 600 clamp(32px, 4.4vw, 62px)/1.04 var(--sans); letter-spacing: -0.03em; text-shadow: 0 2px 30px rgba(0,0,0,.4); }
h2.big { font-size: clamp(40px, 6.4vw, 96px); text-shadow: 0 2px 24px rgba(0,0,0,.65), 0 0 80px rgba(0,0,0,.45); }
@media (min-width: 761px) { .center { top: auto !important; bottom: clamp(40px, 9vh, 90px); transform: translateX(-50%) !important; } }
.lede { margin-top: 26px; font: 300 clamp(16px, 1.35vw, 19px)/1.6 var(--sans); color: rgba(var(--fg-rgb), .82); max-width: 470px; }
.body { margin-top: 22px; font: 300 16px/1.65 var(--sans); color: rgba(var(--fg-rgb), .8); max-width: 460px; text-shadow: 0 1px 14px rgba(0,0,0,.5); }
.fine { margin-top: 18px; font-size: 10.5px; color: var(--mute); line-height: 1.6; text-transform: none; letter-spacing: .02em; }
.hero { top: auto; bottom: clamp(48px, 12vh, 120px); transform: none; width: min(900px, calc(100vw - 2 * var(--gut))); }
.cue { margin-top: 44px; display: flex; align-items: center; gap: 12px; color: var(--mute); }
.mouse { width: 20px; height: 32px; border: 1px solid rgba(var(--fg-rgb), .5); border-radius: 12px; position: relative; }
.mouse i { position: absolute; left: 50%; top: 7px; width: 2px; height: 6px; margin-left: -1px; background: var(--red); border-radius: 2px; animation: wheel 1.8s ease-in-out infinite; }
@keyframes wheel { 0% { opacity: 0; transform: translateY(-2px) } 30% { opacity: 1 } 100% { opacity: 0; transform: translateY(10px) } }
.center { left: 50%; transform: translate(-50%, -50%); text-align: center; width: min(900px, calc(100vw - 2 * var(--gut))); }
.center .body { margin-inline: auto; }
.final { top: auto; bottom: clamp(48px, 12vh, 120px); transform: none; }
.beat .ctas { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.beat .chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; max-width: 520px; }
.chips li { font: 400 13px/1 var(--sans); padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line); color: rgba(var(--fg-rgb), .4); background: rgba(var(--bg-rgb), .35); backdrop-filter: blur(6px); transition: all .5s; }
.chips li.lit { color: #fff; border-color: rgba(236,2,5,.7); background: rgba(236,2,5,.18); }
.beat .tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 30px; background: var(--line); border: 1px solid var(--line); backdrop-filter: blur(8px); }
.tiers div { background: rgba(var(--bg-rgb), .6); padding: 16px 14px; display: grid; gap: 10px; }
.tiers .mono { color: var(--mute); font-size: 10px; }
.tiers b { font: 500 clamp(17px, 1.6vw, 22px)/1 var(--sans); }

/* ---------------- story spacer */
#story { height: 720vh; position: relative; z-index: -1; }

/* ---------------- after the build */
#after { position: relative; z-index: 30; background: var(--ink); }
.wrap { width: min(1180px, calc(100vw - 2 * var(--gut))); margin: 0 auto; }
#enquiry { padding: clamp(80px, 12vw, 160px) 0; background: linear-gradient(180deg, var(--ink), #120607); border-top: 1px solid var(--line); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.contact { list-style: none; margin-top: 40px; display: grid; gap: 18px; }
.contact li { display: grid; grid-template-columns: 80px 1fr; gap: 12px; font: 300 15px/1.5 var(--sans); }
.contact .mono { color: var(--mute); padding-top: 3px; }
#ef { display: grid; gap: 16px; background: var(--ink-2); border: 1px solid var(--line); padding: clamp(20px, 3vw, 36px); }
#ef label { display: grid; gap: 8px; font: 400 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
#ef input, #ef select { font: 400 16px/1.2 var(--sans); color: var(--paper); background: transparent; border: 0; border-bottom: 1px solid rgba(var(--fg-rgb), .25); padding: 10px 0; outline: none; border-radius: 0; transition: border-color .2s; }
#ef input:focus, #ef select:focus { border-color: var(--red); }
#ef select option { background: var(--ink-2); }
#ef .btn { justify-content: center; margin-top: 8px; }
#ef .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
#ef .pair label { line-height: 1.3; align-content: end; }
@media (max-width: 520px) { #ef .pair { grid-template-columns: 1fr; } }
footer { padding: 56px 0 90px; border-top: 1px solid var(--line); }
footer .wm { width: 150px; margin-bottom: 18px; }
footer p { color: var(--mute); margin-top: 6px; }


/* ================= after the build: content sections ================= */
#hdr { transition: background .4s, padding .4s; }
body.past #hdr { background: rgba(var(--bg-rgb), .84); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); padding-top: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
#hdr .links { display: flex; gap: 22px; margin-right: 6px; }
#hdr .links a { font: 400 13px/1 var(--sans); color: var(--mute); transition: color .2s; }
#hdr .links a:hover { color: var(--paper); }

.sec { padding: clamp(84px, 11vw, 150px) 0; position: relative; }
.sec.line { border-top: 1px solid var(--line); }
.sec h2, #enquiry h2 { text-shadow: none; }
.sec-head { max-width: 640px; }
.sec-head .body { text-shadow: none; }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.split > .sec-head { position: sticky; top: 110px; }
.ul { color: inherit; border-bottom: 1px solid var(--red); padding-bottom: 1px; }

/* reveal on scroll */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.rv.in { opacity: 1; transform: none; }

/* numbers */
.band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--ink-2); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: clamp(28px, 4vw, 52px) clamp(12px, 2vw, 28px); border-left: 1px solid var(--line); display: grid; gap: 10px; }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat b { font: 600 clamp(34px, 4.4vw, 60px)/1 var(--sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stat span { font: 300 14px/1.4 var(--sans); color: var(--mute); }

/* gallery */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(150px, 17vw, 240px); gap: 12px; margin-top: 56px; }
.gallery figure { position: relative; overflow: hidden; background: var(--ink-2); }
.gallery .g-big { grid-column: span 2; grid-row: span 2; }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.02); transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.gallery figure:hover img { transform: scale(1.07); }
.gallery figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px; display: grid; gap: 6px; background: linear-gradient(0deg, rgba(8,9,12,.88), rgba(8,9,12,0)); }
.gallery figcaption b { font: 500 15px/1.2 var(--sans); }
.gallery figcaption .mono { font-size: 10px; color: var(--mute); }

/* services */
.svc { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.svc li { background: var(--ink); padding: clamp(22px, 2.6vw, 34px); display: grid; gap: 10px; align-content: start; transition: background .3s; }
.svc li:hover { background: var(--ink-2); }
.svc .mono { color: var(--red); }
.svc b { font: 500 20px/1.2 var(--sans); }
.svc p { font: 300 14.5px/1.55 var(--sans); color: var(--mute); }

/* light sections */
.paper, .paper-2 { --fg: #15161a; --fg-m: rgba(21,22,26,.64); --ln: rgba(21,22,26,.14); background: #f6f4f2; color: var(--fg); }
.paper-2 { background: var(--tint); }
.paper .eyebrow, .paper-2 .eyebrow, .paper .body, .paper-2 .body { color: var(--fg-m); }

/* package table */
.pk-tools { display: flex; justify-content: flex-end; margin: 40px 0 14px; }
.switch { display: inline-flex; align-items: center; gap: 12px; font: 400 14px/1 var(--sans); color: var(--fg); cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch i { width: 40px; height: 22px; border-radius: 999px; background: rgba(21,22,26,.18); position: relative; transition: background .25s; }
.switch i::after { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .25s; }
.switch input:checked + i { background: var(--red); }
.switch input:checked + i::after { transform: translateX(18px); }
.switch input:focus-visible + i { outline: 2px solid var(--red); outline-offset: 3px; }
.pk-scroll { overflow-x: auto; border: 1px solid var(--ln); background: #fff; -webkit-overflow-scrolling: touch; }
.pk { width: 100%; min-width: 680px; border-collapse: collapse; font: 400 14.5px/1.4 var(--sans); }
.pk th, .pk td { padding: 14px 16px; border-bottom: 1px solid var(--ln); text-align: center; }
.pk tbody th { text-align: left; font-weight: 400; color: var(--fg); }
.pk thead th { vertical-align: bottom; padding: 22px 16px 18px; }
.pk thead th:first-child { text-align: left; }
.pk thead .mono { display: block; color: var(--fg-m); font-size: 11px; margin-bottom: 8px; }
.pk thead b { font: 600 clamp(20px, 2vw, 26px)/1 var(--sans); letter-spacing: -0.02em; }
.pk th:first-child { position: sticky; left: 0; background: #fff; z-index: 1; width: 34%; }
.pk .y { color: var(--red); font-weight: 600; }
.pk .n { color: rgba(21,22,26,.28); }
.pk tr.grp th { background: #f6f3ee; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-m); padding: 12px 16px; }
.pk tbody tr:not(.grp):hover th, .pk tbody tr:not(.grp):hover td { background: #faf8f4; }
.pk.diff tbody tr:not(.d):not(.grp) { display: none; }
.pk-note { color: var(--fg-m); }

/* estimate */
.calc { background: #fff; border: 1px solid var(--ln); padding: clamp(22px, 3.4vw, 44px); display: grid; gap: 14px; box-shadow: 0 30px 60px -40px rgba(0,0,0,.35); }
.calc .mono, .calc legend { color: var(--fg-m); }
.c-area { display: flex; align-items: baseline; gap: 10px; }
.c-area output { font: 600 clamp(40px, 5vw, 64px)/1 var(--sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.c-area span { color: var(--fg-m); }
.calc input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; }
.calc input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--red) var(--pct, 20%), rgba(21,22,26,.14) var(--pct, 20%)); }
.calc input[type=range]::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(21,22,26,.14); }
.calc input[type=range]::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--red); }
.calc input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -10px; border-radius: 50%; background: #fff; border: 2px solid var(--red); box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.calc input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid var(--red); }
.c-ticks { display: flex; justify-content: space-between; font-size: 10px; margin-top: -6px; }
.c-pk { border: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.c-pk legend { margin-bottom: 10px; }
.c-pk label { cursor: pointer; }
.c-pk input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.c-pk span { display: grid; gap: 4px; padding: 12px 10px; border: 1px solid var(--ln); font: 500 14px/1.2 var(--sans); text-align: center; transition: all .2s; }
.c-pk small { font: 400 12px/1 var(--mono); color: var(--fg-m); }
.c-pk input:checked + span { border-color: var(--red); background: rgba(236,2,5,.06); box-shadow: inset 0 0 0 1px var(--red); }
.c-pk input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
.c-out { margin-top: 12px; padding-top: 22px; border-top: 1px solid var(--ln); display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; }
.c-out .mono { width: 100%; }
.c-out b { font: 600 clamp(36px, 4.4vw, 56px)/1 var(--sans); letter-spacing: -0.03em; color: var(--fg); font-variant-numeric: tabular-nums; }
.c-gst { color: var(--fg-m); font: 400 15px/1 var(--sans); }
.c-time { font: 300 15px/1.5 var(--sans); color: var(--fg-m); }
.calc .btn { justify-self: start; margin-top: 6px; }
.calc .fine { color: var(--fg-m); margin-top: 0; }

/* extras */
.xlist { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.xlist li { font: 400 15px/1 var(--sans); padding: 14px 18px; border: 1px solid var(--line); border-radius: 999px; color: rgba(var(--fg-rgb), .86); }

/* promises */
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 56px; }
.pr { background: var(--ink); padding: clamp(24px, 3vw, 40px); display: grid; gap: 14px; align-content: start; }
.pr .big { font: 600 clamp(38px, 4vw, 54px)/1 var(--sans); letter-spacing: -0.03em; color: var(--red); display: flex; align-items: baseline; gap: 8px; }
.pr .big small { font: 400 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.pr h3 { font: 500 19px/1.3 var(--sans); }
.pr p { font: 300 14.5px/1.6 var(--sans); color: var(--mute); }

/* while we build */
.ticks { list-style: none; display: grid; border-top: 1px solid var(--line); }
.ticks li { display: grid; grid-template-columns: 220px 1fr; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.ticks b { font: 500 17px/1.4 var(--sans); }
.ticks span { font: 300 15px/1.6 var(--sans); color: var(--mute); }

/* founders */
#founders { border-top: 1px solid var(--line); }
.fgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 56px; }
.founder { border: 1px solid var(--line); padding: 28px; background: var(--ink-2); }
.founder .ph { aspect-ratio: 4/3; background: linear-gradient(160deg, #1d2027, #121418); display: grid; place-items: center; margin-bottom: 24px; }
.founder .ph span { font: 300 72px/1 var(--sans); letter-spacing: -0.04em; color: rgba(var(--fg-rgb), .34); }
.founder h3 { font: 600 24px/1.2 var(--sans); }
.founder .role { color: var(--red); margin-top: 8px; }

/* faq */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 44px 22px 0; font: 400 17px/1.4 var(--sans); position: relative; transition: color .2s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; margin-top: -8px; border-right: 1.5px solid var(--red); border-bottom: 1.5px solid var(--red); transform: rotate(45deg); transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq summary:hover { color: var(--red); }
.faq details p { font: 300 15.5px/1.65 var(--sans); color: var(--mute); padding: 0 44px 24px 0; max-width: 640px; }

/* footer */
.foot { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 32px; align-items: start; }
.fnav, .fcon { display: grid; gap: 12px; font: 300 15px/1.3 var(--sans); }
.fnav a, .fcon a { color: rgba(var(--fg-rgb), .82); transition: color .2s; }
.fnav a:hover, .fcon a:hover { color: var(--red); }
.fcon span { color: var(--mute); }
footer .legal { margin-top: 48px; text-transform: none; letter-spacing: .02em; }


/* studio promo */
.studio-band { background: radial-gradient(ellipse at 80% 40%, rgba(236,2,5,.16), rgba(236,2,5,0) 60%), var(--ink-2); border-top: 1px solid var(--line); }
.studio-band .btn { margin-top: 28px; }
.steps { list-style: none; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.steps li { background: var(--ink); padding: 24px 26px; display: grid; grid-template-columns: 52px 1fr; align-items: baseline; font: 400 17px/1.4 var(--sans); }
.steps b { font: 500 13px/1 var(--mono); color: var(--red); }

/* floating WhatsApp, shown once the build story is over */
.wa-fab { position: fixed; right: 20px; bottom: 20px; z-index: 45; width: 54px; height: 54px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.35); opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none; transition: opacity .4s, transform .4s; }
.wa-fab svg { width: 28px; height: 28px; }
.wa-fab[hidden] { display: none; }
body.past .wa-fab { opacity: 1; transform: none; pointer-events: auto; }

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* ---------------- straight to what they came for */
.routes, .beat .routes.ln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 30px; max-width: 860px; }
.routes a { display: grid; gap: 4px; padding: 14px 16px; border-radius: 14px; background: rgba(var(--bg-rgb), .55); border: 1px solid rgba(var(--fg-rgb), .22); backdrop-filter: blur(8px); transition: border-color .2s, transform .2s, background .2s; }
.routes a:hover { border-color: var(--paper); transform: translateY(-2px); }
.routes a.hot { background: var(--red); border-color: var(--red); }
.routes b { font: 600 15px/1.25 var(--sans); }
.routes span { font-size: 12px; color: var(--mute); }
.routes a.hot span { color: rgba(255,255,255,.85); }
.hero .cue { margin-top: 22px; }
.dock { position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 24px); z-index: 45; display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 999px; background: rgba(var(--bg-rgb), .78); border: 1px solid rgba(var(--fg-rgb), .18); backdrop-filter: blur(12px); box-shadow: 0 14px 40px rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .5s, transform .5s; }
body:not(.loading) .dock { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.dock a, .dock button { display: inline-flex; align-items: center; gap: 7px; font: 500 13px/1 var(--sans); color: var(--paper); background: transparent; border: 0; border-radius: 999px; padding: 11px 15px; cursor: pointer; transition: background .2s; }
.dock a:hover, .dock button:hover, .dock button[aria-expanded=true] { background: rgba(var(--fg-rgb), .12); }
.dock .hot { background: var(--red); color: #fff; }
.dock .hot:hover { background: var(--red-dk); }
.dock .wa { color: #25d366; }
.dock .wa svg { width: 18px; height: 18px; }
.ask { position: fixed; right: 18px; bottom: 78px; z-index: 46; width: min(400px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 110px)); display: grid; grid-template-rows: auto 1fr auto auto; background: var(--ink-2); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 60px rgba(0,0,0,.45); overflow: hidden; }
.ask[hidden] { display: none; }
.ask-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 16px 16px 12px; border-bottom: 1px solid var(--line); }
.ask-head b { display: block; font-size: 16px; }
.ask-head .mono { font-size: 10px; color: var(--mute); }
.ask-x { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--paper); font-size: 20px; line-height: 1; cursor: pointer; flex: none; }
.ask-log { overflow-y: auto; padding: 14px 16px; display: grid; gap: 10px; align-content: start; overscroll-behavior: contain; }
.ask-log p { font-size: 14px; line-height: 1.55; padding: 10px 13px; border-radius: 14px; max-width: 92%; white-space: pre-wrap; }
.ask-log .a { background: rgba(var(--fg-rgb), .07); justify-self: start; border-bottom-left-radius: 4px; }
.ask-log .q { background: var(--red); color: #fff; justify-self: end; border-bottom-right-radius: 4px; }
.ask-log .err { color: var(--mute); }
.ask-log .wa-line { font-size: 13px; padding: 0 4px; }
.ask-log .wa-line a { color: #25d366; text-decoration: underline; }
.ask-sug { display: flex; flex-wrap: wrap; gap: 6px; }
.ask-sug button { font: 400 12px/1.2 var(--sans); color: var(--paper); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 8px 11px; cursor: pointer; text-align: left; }
.ask-sug button:hover { border-color: var(--paper); }
.ask-in { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); }
.ask-in input { flex: 1; min-width: 0; font: 400 15px/1.2 var(--sans); color: var(--paper); background: rgba(var(--fg-rgb), .06); border: 1px solid var(--line); border-radius: 999px; padding: 11px 14px; }
.ask-in input:focus { outline: 2px solid var(--red); outline-offset: 1px; }
.ask-in .btn { padding: 0; width: 42px; height: 42px; justify-content: center; font-size: 18px; flex: none; }
.ask-in .btn:disabled { opacity: .5; }
.ask-fine { font-size: 10px; color: var(--mute); padding: 0 14px 12px; }
.ask-fine a { text-decoration: underline; }
.ok-line { display: flex !important; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--mute); }
.ok-line input { width: auto !important; margin-top: 3px; accent-color: var(--red); }
@media (max-width: 760px) {
  .routes, .beat .routes.ln { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 22px; }
  .routes a { padding: 11px 12px; }
  .routes b { font-size: 13px; }
  .routes span { font-size: 11px; }
  .hero .cue { display: none; }
  .dock { bottom: 10px; max-width: calc(100vw - 20px); }
  .dock a, .dock button { padding: 10px 11px; font-size: 12px; }
  .ask { right: 10px; left: 10px; width: auto; bottom: 66px; max-height: calc(100vh - 90px); }
}
@media (max-width: 420px) { .hide-xs { display: none; } }

@media (max-width: 1100px) { .hide-md { display: none !important; } }
@media (max-width: 960px) {
  .split { grid-template-columns: 1fr; }
  .split > .sec-head { position: static; }
  .pgrid { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .foot { grid-template-columns: 1fr 1fr; }
  .foot > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat { padding: 24px 0 24px 16px; }
  .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .gallery { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .gallery .g-big { grid-column: auto; grid-row: span 1; }
  .svc, .pgrid { grid-template-columns: 1fr; }
  .c-pk { grid-template-columns: repeat(2, 1fr); }
  .ticks li { grid-template-columns: 1fr; gap: 6px; }
  .pk-tools { justify-content: flex-start; }
  .foot { grid-template-columns: 1fr; }
  .fgrid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .founder { padding: 14px; } .founder h3 { font-size: 17px; } .founder .ph span { font-size: 44px; }
  .wa-fab { right: 16px; bottom: 16px; width: 50px; height: 50px; }
}
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } .gallery img { transition: none; } }

/* ---------------- no-WebGL fallback: the real home carries the story */
.no-webgl #gl { display: none; }
.no-webgl #reveal { opacity: 1 !important; }
.no-webgl #hud, .no-webgl #callouts { display: none; }

/* ---------------- small screens */
@media (max-width: 760px) {
  .hide-sm { display: none; }
  #hdr { padding: 14px 16px; }
  #hdr .brand .wm { width: 104px; }
  .btn { padding: 12px 16px; font-size: 13px; }
  #hud { top: auto; bottom: 18px; right: 16px; transform: none; gap: 10px; }
  #hud .el b { font-size: 22px; }
  #rail, #hud .prog { display: none; }
  .beat { top: auto; bottom: 86px; transform: none; left: 16px; width: calc(100vw - 32px); }
  .beat::before { content: ''; position: absolute; inset: -40px -16px -90px; background: linear-gradient(0deg, rgba(8,9,12,.85), rgba(8,9,12,0)); z-index: -1; }
  .center { left: 16px; transform: none; text-align: left; }
  .hero { bottom: 86px; }
  .body { font-size: 15px; }
  .tiers { grid-template-columns: repeat(2, 1fr); }
  .co .v { font-size: 13px; }
  .co { padding-left: 52px; } .co i::after { width: 50px; }
  .two { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  #grain, .mouse i { animation: none; }
  .beat .ln { transition: none; }
}

/* ================= 2026-11 · details-first home, readable header, quick links ================= */
/* header: always a solid, readable bar */
#hdr, body.past #hdr { background: rgba(var(--bg-rgb), .88); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid var(--line); padding-top: 12px; padding-bottom: 12px; }
#hdr .links { gap: 26px; }
#hdr .links a { font: 500 14px/1 var(--sans); color: rgba(var(--fg-rgb), .9); padding: 6px 0; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
#hdr .links a:hover, #hdr .links a[aria-current=page] { color: var(--red); border-color: var(--red); }
#hdr .tel { font: 500 13px/1 var(--sans); color: rgba(var(--fg-rgb), .85); letter-spacing: .02em; }
#hdr .tel:hover { color: var(--red); }
#hdr .hdr-wa { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #25d366; border: 1px solid var(--line); transition: border-color .2s; }
#hdr .hdr-wa:hover { border-color: #25d366; }
#hdr .hdr-wa svg { width: 19px; height: 19px; }

/* home hero: copy left, the build film right */
body.home { overflow-x: hidden; }
.hero2 { padding: clamp(110px, 14vh, 150px) 0 clamp(56px, 8vh, 90px); background: radial-gradient(ellipse at 85% 30%, rgba(236,2,5,.12), rgba(236,2,5,0) 55%), var(--ink); }
.hero2-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.hero2 h1 { font: 600 clamp(44px, 5.6vw, 84px)/1.02 var(--sans); letter-spacing: -0.02em; margin: 18px 0 20px; }
.hero2 .lede { font: 400 clamp(16px, 1.3vw, 19px)/1.6 var(--sans); color: var(--mute); max-width: 560px; }
.hero2 .routes { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 28px; max-width: 560px; }
.hero2 .routes a { background: rgba(var(--fg-rgb), .04); }
.hero2 .routes a.hot { background: var(--red); }
.trust { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 24px; color: var(--mute); font-size: 11px; }
.trust li::before { content: '✓ '; color: var(--red); }
.hero2-film { position: relative; display: block; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 9; background: #15171c; border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.hero2-film video, .studio-film video { display: block; width: 100%; height: 100%; object-fit: cover; }
.film-cta { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 14px; background: rgba(var(--bg-rgb), .72); backdrop-filter: blur(10px); transition: background .2s; }
.hero2-film:hover .film-cta { background: rgba(var(--bg-rgb), .88); }
.film-cta i { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--red); color: #fff; font-style: normal; font-size: 14px; }
.film-cta b { display: block; font: 600 15px/1.3 var(--sans); }
.film-cta small { display: block; font-size: 12px; color: var(--mute); margin-top: 2px; }
.home-after { border-top: 1px solid var(--line); }
.studio-film { display: block; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 9; border: 1px solid var(--line); background: #15171c; box-shadow: 0 24px 60px rgba(0,0,0,.4); }
.build-end { padding-top: clamp(80px, 12vh, 140px); }
.build-end .ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }

/* quick links: a chat button on desktop, a bottom bar on phones */
.ask-fab { position: fixed; right: 22px; bottom: 22px; z-index: 45; display: inline-flex; align-items: center; gap: 10px; font: 600 14px/1 var(--sans); color: #fff; background: var(--red); border: 0; border-radius: 999px; padding: 15px 20px; box-shadow: 0 14px 40px rgba(236,2,5,.35), 0 6px 16px rgba(0,0,0,.35); cursor: pointer; transition: transform .2s, background .2s; }
.ask-fab:hover { transform: translateY(-2px); background: var(--red-dk); }
.ask-fab .dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.25); }
.ask { right: 22px; bottom: 86px; }
@media (min-width: 761px) { .dock { display: none !important; } }
@media (max-width: 960px) {
  .hero2-grid { grid-template-columns: 1fr; }
  .hero2 { padding-top: 96px; }
}
@media (max-width: 760px) {
  .hide-mob { display: none !important; }
  .dock { background: rgba(var(--bg-rgb), .94); border-color: rgba(var(--fg-rgb), .25); bottom: 10px; padding: 7px; }
  .dock a, .dock button { padding: 12px 12px; font-size: 13px; font-weight: 600; }
  .ask { bottom: 74px; right: 10px; }
  .hero2 .routes { grid-template-columns: 1fr 1fr; }
  .hero2 h1 { font-size: 44px; }
  .film-cta { left: 10px; right: 10px; bottom: 10px; padding: 10px 12px; }
  body.home footer { padding-bottom: 80px; }
}
/* home: the header lines up with the page content (logo above the headline) */
body.home #hdr { padding-left: max(var(--gut), calc((100vw - 1180px) / 2)); padding-right: max(var(--gut), calc((100vw - 1180px) / 2)); }

.studio-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.studio-band .studio-ctas .btn { margin-top: 0; }

/* ---------------- areas: home section, area pages, footer list */
.area-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-content: start; }
.area-grid a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); font: 500 15px/1.2 var(--sans); transition: border-color .2s, background .2s; }
.area-grid a span { color: var(--red); transition: transform .2s; }
.area-grid a:hover { border-color: var(--paper); background: rgba(var(--fg-rgb), .04); }
.area-grid a:hover span { transform: translateX(3px); }
.areas-foot { border-top: 1px solid var(--line); padding-top: 22px; margin-top: 8px; }
.areas-foot .mono { color: var(--mute); margin-bottom: 12px; }
.area-links { display: flex; flex-wrap: wrap; gap: 6px 4px; font-size: 13px; line-height: 1.6; }
.area-links a { color: rgba(var(--fg-rgb), .78); }
.area-links a:hover { color: var(--red); text-decoration: underline; }
.area-links a:not(:last-child)::after { content: ' ·'; color: var(--mute); margin-left: 4px; }
.area-hero { padding-bottom: clamp(48px, 7vh, 80px); }
.area-hero .wrap { max-width: 1180px; }
.area-hero h1 { font: 600 clamp(42px, 5.4vw, 80px)/1.04 var(--sans); letter-spacing: -0.02em; margin: 18px 0 20px; }
.area-hero .lede { max-width: 720px; }
.area-hero .ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.crumbs { color: var(--mute); font-size: 11px; margin-bottom: 26px; }
.crumbs a:hover { color: var(--paper); }
.area-note { margin-top: 26px; padding: 16px 18px; border-left: 3px solid var(--red); background: rgba(var(--fg-rgb), .04); border-radius: 0 10px 10px 0; color: var(--paper); font-size: 15px; line-height: 1.6; max-width: 820px; }
.area-cost th, .area-cost td { text-align: left; white-space: nowrap; }
@media (max-width: 760px) { .area-grid { grid-template-columns: 1fr 1fr; } .area-grid a { padding: 12px 13px; font-size: 14px; } }


/* ================= 2026-11-06 · red & white theme ================= */
html, body { background: var(--ink); color: var(--paper); }
#hdr .brand .wm, footer .wm, #loader .wm { color: var(--red); }
#hdr, body.past #hdr { background: rgba(255,255,255,.94); box-shadow: 0 1px 0 rgba(23,24,28,.06), 0 8px 24px -18px rgba(23,24,28,.3); }
h1, h2, h2.big, .body { text-shadow: none; }
.routes a.hot, .routes a.hot b { color: #fff; }
.hero2 { background: radial-gradient(ellipse at 88% 20%, rgba(236,2,5,.10), rgba(236,2,5,0) 55%), linear-gradient(180deg, #fff, #fff 70%, var(--ink-2)); }
.hero2 .routes a { background: #fff; border-color: rgba(23,24,28,.14); box-shadow: 0 6px 18px -14px rgba(23,24,28,.35); }
.hero2 .routes a:hover { border-color: var(--red); }
.hero2-film, .studio-film { box-shadow: 0 30px 70px -30px rgba(80,0,2,.45); border-color: rgba(23,24,28,.08); }
.btn-ghost { border-color: rgba(23,24,28,.25); backdrop-filter: none; }
.btn-ghost:hover { border-color: var(--red); color: var(--red); }
.studio-band { background: radial-gradient(ellipse at 85% 30%, rgba(236,2,5,.12), rgba(236,2,5,0) 60%), var(--tint); }
.founder .ph { background: linear-gradient(160deg, #f1eeec, #e7e3e0); }
.area-grid a { background: #fff; }
.area-grid a:hover { border-color: var(--red); background: var(--tint); }
.area-note { background: var(--tint); }
.ask { box-shadow: 0 24px 60px rgba(23,24,28,.22); background: #fff; }
.dock { box-shadow: 0 14px 40px rgba(23,24,28,.22); }
.wa-fab { box-shadow: 0 10px 30px rgba(23,24,28,.25); }
footer { background: var(--ink-2); }
footer .legal { color: var(--mute); }

/* on photos and the 3D build: keep light text on a dark glass */
#beats, #callouts, #hud, .film-cta, .gallery figcaption, #reveal {
  --fg-rgb: 243, 239, 232; --bg-rgb: 11, 12, 15; --ink: #0b0c0f; --ink-2: #15171c;
  --paper: #f3efe8; --mute: rgba(243, 239, 232, 0.66); --line: rgba(243, 239, 232, 0.16); color: var(--paper);
}
#beats h1 { text-shadow: 0 2px 40px rgba(0,0,0,.35); }
#beats h2 { text-shadow: 0 2px 30px rgba(0,0,0,.4); }
#beats h2.big { text-shadow: 0 2px 24px rgba(0,0,0,.65), 0 0 80px rgba(0,0,0,.45); }
#beats .body { text-shadow: 0 1px 14px rgba(0,0,0,.5); }
#beats .btn-ghost { border-color: rgba(243,239,232,.4); backdrop-filter: blur(6px); }
#beats .btn-ghost:hover { border-color: #fff; color: #fff; }

/* red bands: numbers and the enquiry */
.band, #enquiry {
  --fg-rgb: 255, 255, 255; --bg-rgb: 120, 0, 2; --paper: #fff; --mute: rgba(255,255,255,.82); --line: rgba(255,255,255,.26);
  --red: #fff; --red-dk: #ffe3e3;
  background: linear-gradient(135deg, #EC0205, #B40003); color: #fff; border-color: transparent;
}
.band .btn-red, #enquiry .btn-red { background: #fff; color: #C10104; }
.band .btn-red:hover, #enquiry .btn-red:hover { background: #ffe3e3; }
#enquiry .dot { box-shadow: 0 0 0 4px rgba(255,255,255,.3); }
#enquiry a.ul { border-color: #fff; }
#ef {
  --fg-rgb: 23, 24, 28; --paper: #17181c; --mute: rgba(23,24,28,.64); --line: rgba(23,24,28,.12); --red: #EC0205; --red-dk: #C10104; --ink-2: #fff;
  background: #fff; color: var(--paper); border: 0; border-radius: 16px; box-shadow: 0 30px 70px -30px rgba(60,0,1,.6);
}
#ef .btn-red { background: var(--red); color: #fff; }
#ef .btn-red:hover { background: var(--red-dk); }


/* ================= 2026-11-07 · planning tools: starter, money breakdown, EMI, guide, print ================= */
/* where are you in your build */
.starter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 44px; }
.st { display: grid; gap: 10px; align-content: start; padding: 24px 22px 22px; border: 1px solid var(--line); border-radius: 16px; background: #fff; transition: border-color .2s, box-shadow .2s, transform .2s; }
.st:hover { border-color: rgba(236,2,5,.5); box-shadow: 0 18px 40px -26px rgba(80,0,2,.45); transform: translateY(-2px); }
.st-n { color: var(--red); }
.st h3 { font: 600 20px/1.25 var(--sans); }
.st p { font: 300 14.5px/1.55 var(--sans); color: var(--mute); }
.st nav { display: grid; gap: 2px; margin-top: 6px; border-top: 1px solid var(--line); padding-top: 10px; }
.st nav a { font: 500 14px/1.3 var(--sans); padding: 7px 0; color: var(--paper); transition: color .2s; }
.st nav a:hover { color: var(--red); }

/* where the money goes */
.money { margin-top: clamp(40px, 6vw, 72px); background: #fff; border: 1px solid var(--ln); border-radius: 18px; padding: clamp(22px, 3.4vw, 44px); box-shadow: 0 30px 60px -44px rgba(0,0,0,.35); }
.money .eyebrow { margin-bottom: 10px; }
.money-head h3 { font: 600 clamp(22px, 2.4vw, 30px)/1.2 var(--sans); letter-spacing: -0.02em; }
.money-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 56px); margin-top: 28px; }
.m-cap { color: var(--fg-m); margin-bottom: 12px; }
.m-stages, .m-mats { list-style: none; display: grid; }
.m-stages li { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 10px 0; border-bottom: 1px solid var(--ln); font: 400 14.5px/1.3 var(--sans); }
.m-stages .m-v { font-weight: 600; font-variant-numeric: tabular-nums; }
.m-stages .m-v small { font: 400 12px/1 var(--mono); color: var(--fg-m); margin-left: 8px; }
.m-stages i { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: rgba(21,22,26,.07); position: relative; overflow: hidden; }
.m-stages i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 6px; background: linear-gradient(90deg, #EC0205, #ff5a5c); transition: width .5s cubic-bezier(.2,.7,.2,1); }
.m-mats li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ln); font: 400 14.5px/1.3 var(--sans); }
.m-mats b { font: 600 18px/1 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.m-mats small { font: 400 12px/1 var(--sans); color: var(--fg-m); }
.money .fine { color: var(--fg-m); }
.est-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 26px; }
.est-acts .btn-ghost, .emi-ctas .btn-ghost { color: var(--fg); }
.e-note { color: var(--fg-m); text-transform: none; letter-spacing: .02em; word-break: break-all; }

/* EMI */
.emi-tips { list-style: none; display: grid; gap: 10px; margin-top: 24px; max-width: 460px; }
.emi-tips li { font: 300 15px/1.5 var(--sans); color: var(--fg-m); padding-left: 22px; position: relative; }
.emi-tips li::before { content: '✓'; position: absolute; left: 0; color: var(--red); font-weight: 600; }
.emi-cost { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.emi-cost input { flex: 1 1 180px; width: 0; min-width: 0; font: 600 clamp(28px, 3vw, 38px)/1.1 var(--sans); letter-spacing: -0.02em; color: var(--fg); border: 0; border-bottom: 2px solid var(--ln); padding: 4px 0 8px; background: transparent; outline: none; font-variant-numeric: tabular-nums; border-radius: 0; }
.emi-cost input:focus { border-color: var(--red); }
.emi-use { background: none; border: 1px solid var(--ln); border-radius: 999px; padding: 8px 12px; cursor: pointer; color: var(--fg); }
.emi-use:hover { border-color: var(--red); color: var(--red); }
.emi-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 6px; }
.emi-row output { font: 600 16px/1 var(--sans); font-variant-numeric: tabular-nums; }
.emi-out { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--ln); border: 1px solid var(--ln); border-radius: 12px; overflow: hidden; margin-top: 14px; }
.emi-out > div { background: #fff; padding: 14px 16px; display: grid; gap: 6px; }
.emi-out .mono { color: var(--fg-m); font-size: 10.5px; }
.emi-out b { font: 600 20px/1.1 var(--sans); font-variant-numeric: tabular-nums; }
.emi-out .emi-big { background: var(--tint); }
.emi-out .emi-big b { font-size: clamp(28px, 3vw, 36px); color: var(--red); letter-spacing: -0.02em; }
.emi-bar { display: flex; height: 10px; border-radius: 10px; overflow: hidden; background: #f3b3b4; margin-top: 4px; }
.emi-bar i { display: block; height: 100%; transition: width .4s; }
#eBarP { background: var(--red); } #eBarI { background: #f3b3b4; }
.emi-key { display: flex; gap: 18px; color: var(--fg-m); font-size: 10.5px; }
.emi-key i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.k-p { background: var(--red); } .k-i { background: #f3b3b4; }
.emi-sched { border-top: 1px solid var(--ln); padding-top: 12px; }
.emi-sched summary { cursor: pointer; font: 500 14px/1.3 var(--sans); list-style: none; }
.emi-sched summary::-webkit-details-marker { display: none; }
.emi-sched summary::after { content: ' +'; color: var(--red); }
.emi-sched[open] summary::after { content: ' −'; }
.emi-sched .pk-scroll { margin-top: 12px; max-height: 320px; overflow: auto; }
.pk.emi-t { min-width: 0; font-size: 13.5px; }
.pk.emi-t th, .pk.emi-t td { padding: 8px 10px; text-align: right; }
.pk.emi-t th:first-child, .pk.emi-t td:first-child { text-align: left; position: static; width: auto; }
.pk.emi-t thead th { position: sticky; top: 0; background: #fff; padding: 10px; font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-m); }
.emi-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.emi .fine { color: var(--fg-m); margin: 0; }

/* home building guide */
.g-stages { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.g-stages a { font: 500 14px/1 var(--sans); padding: 11px 15px; border: 1px solid var(--line); border-radius: 999px; background: #fff; transition: border-color .2s, color .2s; }
.g-stages a:hover { border-color: var(--red); color: var(--red); }
.g-groups { display: grid; gap: clamp(40px, 6vw, 72px); }
.g-group { scroll-margin-top: 90px; }
.g-group h3 { font: 600 clamp(26px, 3vw, 36px)/1.1 var(--sans); letter-spacing: -0.02em; }
.g-group > .mono { color: var(--mute); margin: 10px 0 20px; }
.g-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.g-list a { display: grid; gap: 6px; align-content: start; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; transition: border-color .2s, background .2s; }
.g-list a:hover { border-color: var(--red); background: var(--tint); }
.g-list b { font: 600 16px/1.3 var(--sans); }
.g-list span { font: 300 13.5px/1.5 var(--sans); color: var(--mute); }
.g-az { display: flex; flex-wrap: wrap; gap: 8px 6px; margin-top: 30px; }
.g-az a { font: 400 15px/1 var(--sans); padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; }
.g-az a:hover { border-color: var(--red); color: var(--red); }
.g-hero h1 { font-size: clamp(38px, 5vw, 72px); }
.g-def { font-size: clamp(18px, 1.6vw, 22px) !important; color: var(--paper) !important; max-width: 760px; }
.g-text h2 { font: 600 clamp(22px, 2.2vw, 28px)/1.2 var(--sans); letter-spacing: -0.02em; margin: 0 0 12px; }
.g-text p { font: 300 17px/1.7 var(--sans); color: var(--paper); max-width: 660px; margin-bottom: 34px; }
.g-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.g-pn a { display: grid; gap: 6px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; }
.g-pn a:hover { border-color: var(--red); }
.g-pn .mono { color: var(--red); }
.g-pn .g-next { text-align: right; grid-column: 2; }
.g-side > .mono { color: var(--mute); margin-bottom: 14px; }
.g-rel { grid-template-columns: 1fr; }
.g-body .split > .g-side { position: sticky; top: 110px; }

@media (max-width: 1100px) { .starter { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) { .money-grid { grid-template-columns: 1fr; } .g-list { grid-template-columns: 1fr 1fr; } .g-body .split > .g-side { position: static; } }
@media (max-width: 760px) {
  .starter { grid-template-columns: 1fr; margin-top: 28px; }
  .g-list { grid-template-columns: 1fr; }
  .emi-out b { font-size: 17px; }
  .g-pn { grid-template-columns: 1fr; } .g-pn .g-next { grid-column: auto; }
}

/* print: just the estimate, breakdown and EMI */
@media print {
  body.print-est #hdr, body.print-est .hero2, body.print-est #after > *:not(#estimate):not(#emi), body.print-est .ask-fab, body.print-est .ask, body.print-est .dock, body.print-est .wa-fab,
  body.print-est .est-acts, body.print-est .emi-ctas, body.print-est #cGo, body.print-est input[type=range], body.print-est .c-ticks, body.print-est .emi-use { display: none !important; }
  body.print-est { background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.print-est::before { content: 'elamentt  ·  home estimate  ·  elamentt.com  ·  +91 89255 31571'; display: block; font: 600 12px/1 'IBM Plex Mono', monospace; color: #EC0205; padding: 0 0 14px; letter-spacing: .06em; }
  body.print-est .sec { padding: 18px 0; }
  body.print-est .rv { opacity: 1 !important; transform: none !important; }
  body.print-est .split { grid-template-columns: 1fr 1fr; }
  body.print-est .money, body.print-est .calc { box-shadow: none; break-inside: avoid; }
  body.print-est .emi-sched .pk-scroll { max-height: none; overflow: visible; }
  body.print-est #emi { break-before: page; }
}
.split > *, .calc.emi { min-width: 0; }
.two > *, #ef .pair > * { min-width: 0; }
#ef input, #ef select { width: 100%; min-width: 0; }

/* when the money is spent */
.cf-wrap { position: relative; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--ln); }
.cf-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; }
.cf-peak { color: var(--fg-m); text-transform: none; letter-spacing: .02em; font-size: 12px; margin-bottom: 12px; }
.cf { width: 100%; min-height: 190px; }
.cf svg { display: block; overflow: visible; }
.cf-grid { stroke: rgba(21,22,26,.08); stroke-width: 1; }
.cf-base { stroke: rgba(21,22,26,.28); stroke-width: 1; }
.cf-ax { font: 400 11px 'IBM Plex Mono', monospace; fill: rgba(21,22,26,.6); }
.cf-bar { fill: #EC0205; transition: fill .15s; }
.cf-bar.on { fill: #A80003; }
.cf-hit { fill: transparent; cursor: default; outline: none; }
.cf-tip { position: absolute; z-index: 2; pointer-events: none; display: grid; gap: 3px; min-width: 170px; max-width: 240px; padding: 10px 12px; border-radius: 10px; background: #17181c; color: #fff; font: 400 13px/1.35 var(--sans); box-shadow: 0 12px 30px -12px rgba(0,0,0,.45); }
.cf-tip b { font-weight: 600; }
.cf-tip small { color: rgba(255,255,255,.72); font-size: 11.5px; margin-top: 2px; }
.cf-wrap .fine { margin-top: 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media print { body.print-est .cf-tip { display: none !important; } }
.cf-tip[hidden] { display: none; }

/* Tools menu */
.tools-btn { font: 500 14px/1 var(--sans); color: rgba(var(--fg-rgb), .9); background: none; border: 0; border-bottom: 2px solid transparent; padding: 6px 0; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: color .2s, border-color .2s; }
.tools-btn i { width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.tools-btn:hover, .tools-btn[aria-expanded=true] { color: var(--red); border-color: var(--red); }
.tools-btn[aria-expanded=true] i { transform: translateY(1px) rotate(-135deg); }
.tools-menu { position: fixed; z-index: 47; width: min(560px, calc(100vw - 24px)); background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px; box-shadow: 0 30px 70px -24px rgba(23,24,28,.35); }
.tools-menu[hidden] { display: none; }
.tm-cap { color: var(--mute); margin: 2px 4px 12px; }
.tm-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tm-list a { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; border: 1px solid transparent; transition: background .15s, border-color .15s; }
.tm-list a:hover, .tm-list a:focus-visible { background: var(--tint); border-color: rgba(236,2,5,.25); outline: none; }
.tm-list b { font: 600 15px/1.25 var(--sans); color: var(--paper); }
.tm-list span { font: 400 12.5px/1.35 var(--sans); color: var(--mute); }
.tm-list .tm-hot b { color: var(--red); }
.tm-start { display: block; margin-top: 12px; padding: 12px 14px 2px; border-top: 1px solid var(--line); font: 400 13.5px/1.4 var(--sans); color: var(--mute); }
.tm-start u { color: var(--paper); text-decoration-color: var(--red); text-underline-offset: 3px; }
.tm-start:hover u { color: var(--red); }
.tools-menu.sheet { left: 10px !important; right: 10px; width: auto; top: auto !important; bottom: 76px; max-height: calc(100vh - 110px); overflow-y: auto; }
@media (max-width: 520px) { .tm-list { grid-template-columns: 1fr; } .tm-list a { padding: 10px 12px; } }
.dock button[aria-expanded=true] { background: rgba(var(--fg-rgb), .1); }

/* chart now sits at the top of the money box */
.money .cf-wrap { margin-top: 22px; padding-top: 0; border-top: 0; }
.money .money-grid { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--ln); }
#money { scroll-margin-top: 90px; }

/* guide index: every term written out */
.g-ihero { padding-bottom: clamp(28px, 4vh, 44px); }
.g-bar { position: sticky; top: 62px; z-index: 30; background: rgba(255,255,255,.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.g-bar-in { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; padding: 12px 0; }
.g-search { flex: 1 1 280px; }
.g-search input { width: 100%; font: 400 15px/1.2 var(--sans); color: var(--paper); background: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; padding: 12px 16px; }
.g-search input:focus { outline: 2px solid var(--red); outline-offset: 1px; background: #fff; }
.g-bar .g-stages { margin: 0; gap: 6px; }
.g-bar .g-stages a { padding: 9px 13px; font-size: 13px; }
.g-all { padding-top: clamp(36px, 5vw, 64px); }
.g-group[hidden], .g-entry[hidden] { display: none; }
.g-group { scroll-margin-top: 140px; display: grid; gap: 14px; }
.g-ghead { padding-bottom: 6px; }
.g-ghead h2 { font: 600 clamp(28px, 3.2vw, 40px)/1.1 var(--sans); letter-spacing: -0.02em; }
.g-ghead .mono { color: var(--mute); margin-top: 8px; }
.g-entry { scroll-margin-top: 140px; border: 1px solid var(--line); border-radius: 16px; padding: clamp(18px, 2.4vw, 28px); background: #fff; transition: border-color .2s; }
.g-entry:target { border-color: var(--red); box-shadow: 0 0 0 3px rgba(236,2,5,.12); }
.g-entry h3 { font: 600 clamp(20px, 1.8vw, 24px)/1.25 var(--sans); letter-spacing: -0.01em; }
.g-anchor:hover { color: var(--red); }
.g-mean { margin-top: 8px; font: 400 16.5px/1.55 var(--sans); color: var(--paper); max-width: 860px; }
.g-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px clamp(20px, 3vw, 40px); margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.g-cols .mono { color: var(--red); margin-bottom: 6px; font-size: 10.5px; }
.g-cols p:not(.mono) { font: 300 15px/1.65 var(--sans); color: var(--paper); }
.g-meta { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; margin-top: 16px; font: 400 13px/1.5 var(--sans); color: var(--mute); }
.g-meta a { color: var(--paper); text-decoration: underline; text-decoration-color: rgba(236,2,5,.5); text-underline-offset: 3px; }
.g-meta a:hover { color: var(--red); }
.g-meta .g-share { text-decoration: none; color: var(--red); white-space: nowrap; }
.g-none { font: 400 16px/1.5 var(--sans); color: var(--mute); }
@media (max-width: 760px) {
  .g-bar { top: 56px; }
  .g-bar .g-stages { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 2px; scrollbar-width: none; }
  .g-bar .g-stages a { white-space: nowrap; }
  .g-cols { grid-template-columns: 1fr; }
}

/* guide: A to Z index at the top */
.g-index { padding: clamp(36px, 5vw, 60px) 0 clamp(40px, 5vw, 64px); background: var(--ink-2); border-bottom: 1px solid var(--line); }
.g-index-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.g-index-head h2 { font: 600 clamp(26px, 3vw, 36px)/1.1 var(--sans); letter-spacing: -0.02em; }
.g-index-head .mono { color: var(--mute); }
.g-letters { display: flex; flex-wrap: wrap; gap: 6px; margin: 22px 0 28px; }
.g-letters a, .g-letters span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; font: 600 15px/1 var(--sans); }
.g-letters a { background: #fff; border: 1px solid var(--line); color: var(--paper); transition: background .15s, color .15s, border-color .15s; }
.g-letters a:hover, .g-letters a:focus-visible { background: var(--red); border-color: var(--red); color: #fff; }
.g-letters span { color: rgba(var(--fg-rgb), .25); }
.g-azgrid { columns: 4 220px; column-gap: clamp(20px, 3vw, 40px); }
.g-letter { break-inside: avoid; display: grid; grid-template-columns: 34px 1fr; gap: 0 10px; padding: 14px 0; border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.g-letter b { font: 600 22px/1.1 var(--sans); color: var(--red); }
.g-letter ul { list-style: none; display: grid; gap: 7px; }
.g-letter a { font: 400 15px/1.35 var(--sans); color: var(--paper); }
.g-letter a:hover { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 520px) { .g-letters a, .g-letters span { width: 34px; height: 34px; font-size: 14px; } .g-letters { gap: 5px; } }
@media (min-width: 521px) { .g-letters { gap: 5px; } .g-letters a, .g-letters span { width: 38px; height: 38px; } }
.g-stages .g-top { border-color: var(--red); color: var(--red); font-weight: 600; }
.g-index { scroll-margin-top: 70px; }
@media (max-width: 600px) { .g-azgrid { columns: 2; column-gap: 16px; } .g-letter { grid-template-columns: 22px 1fr; gap: 0 8px; } .g-letter b { font-size: 18px; } .g-letter a { font-size: 14px; } }

/* ================= guide v2: A–Z glossary rows with pictures, term pages with illustrations ================= */
.g-letters-bar { margin: 0; flex: 1 1 auto; justify-content: flex-end; gap: 4px; }
.g-letters-bar a, .g-letters-bar span { width: 30px !important; height: 30px !important; font-size: 13px; border-radius: 8px; }
.g-glossary { padding-top: clamp(30px, 4vw, 52px); }
.g-lblock { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 0 clamp(16px, 3vw, 40px); padding: 26px 0; border-top: 1px solid var(--line); scroll-margin-top: 140px; }
.g-lblock[hidden], .g-row[hidden] { display: none; }
.g-lblock .g-big { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 14px; background: var(--red); color: #fff; font: 600 36px/1 var(--sans); position: sticky; top: 150px; }
.g-rows { display: grid; }
.g-row { display: grid; grid-template-columns: 120px minmax(150px, 1fr) minmax(0, 2fr) 24px; align-items: center; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); transition: background .15s; }
.g-row:last-child { border-bottom: 0; }
.g-row img, .gr-ph { width: 120px; height: 90px; border-radius: 10px; object-fit: cover; background: var(--ink-2); display: block; }
.g-row b { font: 600 17px/1.3 var(--sans); }
.g-row span { font: 300 14.5px/1.55 var(--sans); color: var(--mute); }
.gr-go { font: 400 26px/1 var(--sans); color: var(--mute); font-style: normal; transition: transform .2s, color .2s; }
.g-row:hover { background: linear-gradient(90deg, var(--tint), rgba(253,241,241,0)); }
.g-row:hover b, .g-row:hover .gr-go { color: var(--red); }
.g-row:hover .gr-go { transform: translateX(3px); }
.g-stgs { display: grid; gap: 30px; margin-top: 36px; }
.g-stg h3 { font: 600 22px/1.2 var(--sans); }
.g-stg .mono { color: var(--mute); margin: 6px 0 14px; }
.g-stg .g-az { margin-top: 0; }
.g-stg .g-az a { font-size: 14px; padding: 9px 13px; }

/* term page */
.g-split { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.g-fig { margin: 0 0 30px; position: relative; border-radius: 18px; overflow: hidden; background: var(--ink-2); border: 1px solid var(--line); }
.g-fig img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.g-fig figcaption { position: absolute; right: 10px; bottom: 10px; background: rgba(255,255,255,.88); color: var(--mute); padding: 5px 8px; border-radius: 6px; font-size: 10px; }
.g-pts { list-style: none; display: grid; gap: 10px; margin: 0 0 34px; max-width: 660px; }
.g-pts li { position: relative; padding-left: 26px; font: 300 16.5px/1.6 var(--sans); color: var(--paper); }
.g-pts li::before { content: ''; position: absolute; left: 2px; top: 10px; width: 9px; height: 9px; border-radius: 3px; background: var(--red); }
.g-side { position: sticky; top: 100px; display: grid; gap: 14px; align-content: start; }
.g-side > .mono { color: var(--mute); }
.g-relx { display: grid; gap: 8px; }
.g-relx a { display: grid; grid-template-columns: 80px 1fr; align-items: center; gap: 12px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font: 500 15px/1.3 var(--sans); transition: border-color .2s; }
.g-relx a:hover { border-color: var(--red); color: var(--red); }
.g-relx img { width: 80px; height: 60px; border-radius: 8px; object-fit: cover; display: block; }
.g-all { font: 500 14px/1.3 var(--sans); color: var(--red); padding: 6px 2px; }
.g-tools { display: grid; gap: 6px; margin-top: 10px; padding: 16px; border-radius: 16px; background: var(--tint); }
.g-tools .mono { color: var(--mute); margin-bottom: 4px; }
.g-tools a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid transparent; }
.g-tools a:hover { border-color: var(--red); }
.g-tools b { font: 600 14.5px/1.3 var(--sans); }
.g-tools span { font: 400 12.5px/1.35 var(--sans); color: var(--mute); }

@media (max-width: 960px) {
  .g-split { grid-template-columns: 1fr; }
  .g-side { position: static; }
  .g-letters-bar { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; width: 100%; scrollbar-width: none; }
}
@media (max-width: 760px) {
  .g-lblock { grid-template-columns: 1fr; gap: 10px; }
  .g-lblock .g-big { position: static; width: 52px; height: 52px; font-size: 26px; }
  .g-row { grid-template-columns: 88px minmax(0, 1fr) 16px; grid-template-rows: auto auto; gap: 4px 14px; align-items: start; }
  .g-row img, .g-row .gr-ph { grid-row: 1 / span 2; width: 88px; height: 66px; }
  .g-row b { grid-column: 2; font-size: 16px; }
  .g-row span { grid-column: 2; font-size: 13.5px; }
  .g-row .gr-go { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
}
.g-relx .gr-ph { width: 80px; height: 60px; border-radius: 8px; }
.g-bar .g-search { flex: 0 1 340px; min-width: 240px; }
@media (max-width: 960px) { .g-bar .g-search { flex: 1 1 100%; } }

/* ===================================================== 2026-11-09 · editable area, money box v2, full package spec, architects */
/* estimate: typed area with steppers */
.c-area { align-items: center; gap: 8px; }
.c-area input { flex: 0 1 auto; width: 6.2ch; min-width: 0; border: 0; border-bottom: 2px solid rgba(21,22,26,.18); background: transparent; padding: 0 2px 2px;
  font: 600 clamp(40px, 5vw, 64px)/1 var(--sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--fg); border-radius: 0; }
.c-area input:hover { border-bottom-color: rgba(21,22,26,.4); }
.c-area input:focus { outline: none; border-bottom-color: #EC0205; }
.c-step { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(21,22,26,.22); background: #fff; color: var(--fg);
  font: 400 22px/1 var(--sans); cursor: pointer; display: grid; place-items: center; transition: border-color .2s, color .2s; }
.c-step:hover { border-color: #EC0205; color: #EC0205; }
.c-step:focus-visible { outline: 2px solid #EC0205; outline-offset: 2px; }
.c-area span { margin-left: 2px; }
.c-help { color: var(--fg-m); font-size: 12px; margin-top: -6px; }
.c-help.warn { color: #B40003; }

/* where your money goes v2 */
.m-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 22px 0 0; }
.m-stats > div { background: #faf8f7; border: 1px solid var(--ln); border-radius: 14px; padding: 16px 18px; min-width: 0; }
.m-stats dt { color: var(--fg-m); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px; }
.m-stats dd { margin: 0; display: grid; gap: 4px; }
.m-stats b { font: 600 clamp(20px, 2.2vw, 28px)/1.1 var(--sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.m-stats > div:first-child { background: linear-gradient(135deg, #EC0205, #B40003); border-color: transparent; color: #fff; }
.m-stats > div:first-child dt, .m-stats > div:first-child small { color: rgba(255,255,255,.85); }
.m-stats small { font: 400 12.5px/1.3 var(--sans); color: var(--fg-m); }
.money .cf-wrap { margin-top: 30px; }
.cf-hint { color: var(--fg-m); font-size: 11.5px; }
.cf-ph rect { fill: #fbe3e3; }
.cf-ph.p1 rect { fill: #f6c3c3; } .cf-ph.p2 rect { fill: #f0a0a0; } .cf-ph.p3 rect { fill: #c62828; }
.cf-ph text { font: 500 11px var(--sans); fill: #5a0b0c; }
.cf-ph.p3 text { fill: #fff; }
.m-matwrap { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--ln); }
.m-mhead { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; }
.m-mhead a { font-size: 12px; color: var(--fg); }
.m-tiles { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 4px 0 12px; padding: 0; }
.m-tiles li { border: 1px solid var(--ln); border-radius: 14px; padding: 16px; display: grid; gap: 2px; align-content: start; background: #fff; min-width: 0; }
.m-tiles svg { width: 34px; height: 34px; fill: none; stroke: #EC0205; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 8px; }
.m-tiles b { font: 600 clamp(22px, 2.3vw, 28px)/1.1 var(--sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.m-tiles .u { font: 400 12px/1.3 var(--sans); color: var(--fg-m); }
.m-tiles .n { font: 500 13.5px/1.3 var(--sans); margin-top: 6px; }
@media (max-width: 960px) { .m-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .m-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .m-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .m-stats > div, .m-tiles li { padding: 14px; } }
@media print { body.print-est .m-stats > div:first-child { background: #fff; color: #17181c; border-color: #ccc; } body.print-est .cf-hint { display: none; } }

/* full package specification */
.pk-tools { gap: 12px 22px; flex-wrap: wrap; align-items: center; }
.pk-all { appearance: none; border: 1px solid rgba(21,22,26,.22); background: #fff; color: var(--fg); border-radius: 999px; padding: 9px 16px; font: 500 13.5px/1 var(--sans); cursor: pointer; }
.pk-all:hover { border-color: #EC0205; color: #EC0205; }
.pk-all:focus-visible { outline: 2px solid #EC0205; outline-offset: 2px; }
.pk-full { min-width: 920px; font-size: 13.5px; }
.pk-full tbody th { width: 28%; }
.pk-full td.t { font-size: 13px; line-height: 1.4; color: var(--fg); padding: 12px; }
.pk-full td.hl { background: rgba(236,2,5,.035); }
.pk-full thead th.hl { background: rgba(236,2,5,.07); box-shadow: inset 0 3px 0 #EC0205; }
.pk-full tr.grp th, .pk-full tr.grp td { background: #f6f3ee; border-bottom: 1px solid var(--ln); padding: 0; }
.pk-full tr.grp th { text-transform: none; letter-spacing: 0; font: inherit; color: var(--fg); }
.pk-g { appearance: none; border: 0; background: transparent; width: 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 14px 16px; text-align: left; cursor: pointer; color: var(--fg); }
.pk-g span { font: 600 15px/1.2 var(--sans); }
.pk-g small { font: 400 11.5px/1 var(--mono); color: var(--fg-m); letter-spacing: .02em; }
.pk-g i { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1px solid var(--ln); position: relative; flex: none; }
.pk-g i::before, .pk-g i::after { content: ""; position: absolute; left: 5px; right: 5px; top: 9.5px; height: 1.6px; background: #EC0205; transition: transform .2s; }
.pk-g i::after { transform: rotate(90deg); }
.pk-grp.open .pk-g i::after { transform: rotate(0); }
.pk-g:focus-visible { outline: 2px solid #EC0205; outline-offset: -2px; }
.pk-full tr.grp em { display: block; font: 400 12px/1.4 var(--sans); font-style: normal; color: var(--fg-m); padding: 0 16px 12px 48px; margin-top: -6px; }
.pk-grp:not(.open) tr.grp em { display: none; }
.pk-full td.pk-gh { font: 500 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-m); vertical-align: middle; padding: 0 8px; }
.pk-grp:not(.open) td.pk-gh { color: transparent; }
.pk-q { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-left: 4px; border-radius: 50%; border: 1px solid rgba(21,22,26,.25);
  font: 600 10.5px/1 var(--sans); color: var(--fg-m); text-decoration: none; vertical-align: 1px; }
.pk-q:hover, .pk-q:focus-visible { border-color: #EC0205; color: #fff; background: #EC0205; }
.pk.diff tbody.same { display: none; }
.pk-ni { margin-top: 18px; border: 1px dashed rgba(21,22,26,.25); border-radius: 14px; padding: 16px 18px; background: #fff; }
.pk-ni p { color: var(--fg-m); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; }
.pk-ni ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.pk-ni li { font: 400 13px/1.2 var(--sans); padding: 8px 12px; border-radius: 999px; background: #f6f3ee; }
.pk-arch { margin-top: 14px; font: 400 15px/1.5 var(--sans); color: var(--fg); }
@media (max-width: 700px) { .pk-full { min-width: 760px; } .pk-full tbody th { width: 150px; min-width: 150px; } .pk-g { padding: 12px; } .pk-full tr.grp em { padding-left: 44px; } }

/* architects band (home) */
.arch-band { --fg-rgb: 255, 255, 255; --paper: #fff; --mute: rgba(255,255,255,.84); --line: rgba(255,255,255,.26); --red: #fff;
  background: radial-gradient(1200px 500px at 85% 0%, #3a0a0b 0%, transparent 60%), #17181c; color: #fff; }
.arch-band .eyebrow, .arch-band .body { color: rgba(255,255,255,.82); }
.arch-band .dot { background: #EC0205; }
.arch-pts { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 0; margin: 0; align-self: center; }
.arch-pts li { border: 1px solid rgba(255,255,255,.16); border-radius: 16px; padding: 20px; display: grid; gap: 6px; background: rgba(255,255,255,.04); }
.arch-pts b { font: 600 16.5px/1.3 var(--sans); }
.arch-pts b::before { content: ""; display: block; width: 26px; height: 3px; border-radius: 3px; background: #EC0205; margin-bottom: 12px; }
.arch-pts span { font: 400 14px/1.5 var(--sans); color: rgba(255,255,255,.75); }
.btn-white { background: #fff; color: #B40003; border-color: #fff; }
.btn-white:hover { background: #ffe3e3; }
.btn-line { border-color: rgba(255,255,255,.5); color: #fff; }
.btn-line:hover { border-color: #fff; color: #fff; }
.arch-band .ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
@media (max-width: 560px) { .arch-pts { grid-template-columns: 1fr; } }

/* architects page: sign-up form (same look as the enquiry form), benefits, steps */
#af { display: grid; gap: 16px; background: #fff; border: 1px solid rgba(23,24,28,.12); padding: clamp(20px, 3vw, 36px); color: #17181c;
  --fg-rgb: 23, 24, 28; --paper: #17181c; --mute: rgba(23,24,28,.64); --line: rgba(23,24,28,.12); --red: #EC0205; --red-dk: #C10104; }
#af label { display: grid; gap: 8px; font: 400 12px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(23,24,28,.64); }
#af input, #af select, #af textarea { width: 100%; min-width: 0; font: 400 16px/1.3 var(--sans); color: #17181c; background: transparent; border: 0;
  border-bottom: 1px solid rgba(23,24,28,.28); padding: 8px 0; border-radius: 0; text-transform: none; letter-spacing: 0; }
#af textarea { resize: vertical; min-height: 72px; }
#af input:focus, #af select:focus, #af textarea:focus { outline: none; border-color: #EC0205; }
#af .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
#af .pair > * { min-width: 0; }
#af .pair label { align-content: end; }
#af .btn { justify-content: center; margin-top: 8px; background: #EC0205; color: #fff; }
#af .btn:hover { background: #C10104; }
#af .btn:disabled { opacity: .6; cursor: wait; }
#af .ok-line { text-transform: none; letter-spacing: 0; font: 400 13px/1.4 var(--sans); }
#af .ok-line input { width: auto; }
#af .fine { color: rgba(23,24,28,.64); }
#af .fine a { color: #B40003; }
.af-done { display: grid; gap: 12px; justify-items: start; padding: 10px 0; }
.af-done b { font: 600 22px/1.2 var(--sans); }
.af-done p { color: rgba(23,24,28,.72); }
.af-done:focus { outline: none; }
#join { scroll-margin-top: 90px; }
@media (max-width: 520px) { #af .pair { grid-template-columns: 1fr; } }
.ap-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 14px; padding: 0; margin: 48px 0 0; }
.ap-grid li { border: 1px solid var(--line); border-radius: 16px; padding: 22px; display: grid; gap: 8px; align-content: start; background: #fff; }
.ap-grid b { font: 600 17px/1.3 var(--sans); }
.ap-grid b::before { content: ""; display: block; width: 26px; height: 3px; border-radius: 3px; background: #EC0205; margin-bottom: 14px; }
.ap-grid span { font: 400 14.5px/1.55 var(--sans); color: var(--mute); }
.ap-steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding: 0; margin: 48px 0 0; counter-reset: none; }
.ap-steps li { background: #fff; border: 1px solid var(--ln, var(--line)); border-radius: 16px; padding: 22px; display: grid; gap: 8px; align-content: start; }
.ap-steps i { font-style: normal; font-size: 12px; color: #EC0205; letter-spacing: .1em; }
.ap-steps b { font: 600 18px/1.25 var(--sans); }
.ap-steps span { font: 400 14.5px/1.55 var(--sans); color: var(--fg-m, var(--mute)); }
@media (max-width: 960px) { .ap-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ap-steps { grid-template-columns: 1fr; } }

/* 2026-11-12 · enquiry: email first, WhatsApp optional */
#ef .wa-line { color: var(--paper); font-size: 14px; margin-top: 4px; }
#ef .af-done b { color: var(--paper); }
#ef .af-done p { color: var(--mute); }
.h1-eb { font-size: 12px; line-height: 1.3; text-shadow: none; font-weight: 400; letter-spacing: .08em; }
/* 2026-11-12 · area pages v2 and cost guide */
.area-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; align-self: center; }
.area-checks li { position: relative; padding: 16px 18px 16px 46px; border: 1px solid var(--line); border-radius: 14px; font: 300 15px/1.55 var(--sans); background: rgba(var(--fg-rgb), .02); }
.area-checks li::before { content: ""; position: absolute; left: 18px; top: 21px; width: 14px; height: 8px; border-left: 2px solid var(--red); border-bottom: 2px solid var(--red); transform: rotate(-45deg); }
.area-packs { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.area-packs li { border: 1px solid var(--line); border-radius: 14px; padding: 18px; display: grid; gap: 6px; align-content: start; }
.area-packs b { font: 600 17px/1.2 var(--sans); }
.area-packs em { font: 600 24px/1.1 var(--sans); font-style: normal; color: var(--red); letter-spacing: -0.02em; }
.area-packs em small { font: 400 12px/1 var(--sans); color: var(--mute); margin-left: 4px; }
.area-packs span { font: 300 13.5px/1.5 var(--sans); color: var(--mute); }
.area-steps li { background: transparent; }
.cost-page .pk th .mono { display: block; color: var(--mute); font-size: 11px; margin-top: 6px; }
@media (max-width: 960px) { .area-packs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .area-packs { grid-template-columns: 1fr; } .area-checks li { padding-left: 42px; } }
.area-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .area-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .area-steps { grid-template-columns: 1fr; } }