/* =====================================================================
   HousePulse site styles (round 3)
   Palette follows the logo: black, white and brushed silver.
   Type: Unbounded (display headings, sentence case, tight tracking), Geist (body and UI),
   Geist Mono (kickers, labels, numbers, owner placeholders). Loaded from Google Fonts in index.html.
   DJ deck styles live separately in assets/deck.css.
   ===================================================================== */
/* Metric-matched fallbacks (round 7 fix): while Unbounded and Geist download, text is set in a local Arial-metric
   or Roboto face scaled to the webfont's width, so headings wrap the same way and nothing jumps when the webfonts
   swap in (this was moving About and Enquire by a line on phones). size-adjust is the measured width ratio on this
   site's own text (the heading 600 and body 400 weights are tuned so page titles, the hero and the ledes wrap the
   same as the webfonts at almost every width from 320 to 1600px); the
   ascent/descent overrides are the webfont's metrics divided by it. If none of the local fonts
   exist, the browser skips these faces and uses the rest of the stack as before. */
@font-face{font-family:"Unbounded Fallback";font-weight:100 500;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold"),local("Arimo Bold"),local("Arimo-Bold"),local("Helvetica Bold"),local("Helvetica-Bold");size-adjust:127.5%;ascent-override:78%;descent-override:19.2%;line-gap-override:0%}
@font-face{font-family:"Unbounded Fallback";font-weight:600 900;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold"),local("Arimo Bold"),local("Arimo-Bold"),local("Helvetica Bold"),local("Helvetica-Bold");size-adjust:129.5%;ascent-override:76.8%;descent-override:18.9%;line-gap-override:0%}
@font-face{font-family:"Unbounded Fallback R";font-weight:100 500;src:local("Roboto Bold"),local("Roboto-Bold");size-adjust:136.1%;ascent-override:73.1%;descent-override:18%;line-gap-override:0%}
@font-face{font-family:"Unbounded Fallback R";font-weight:600 900;src:local("Roboto Bold"),local("Roboto-Bold");size-adjust:138.2%;ascent-override:72%;descent-override:17.7%;line-gap-override:0%}
@font-face{font-family:"Geist Fallback";font-weight:100 449;src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("LiberationSans"),local("Arimo"),local("Arimo-Regular"),local("Helvetica"),local("Helvetica-Regular");size-adjust:102.6%;ascent-override:98%;descent-override:28.8%;line-gap-override:0%}
@font-face{font-family:"Geist Fallback";font-weight:450 549;src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("LiberationSans"),local("Arimo"),local("Arimo-Regular"),local("Helvetica"),local("Helvetica-Regular");size-adjust:104.6%;ascent-override:96.1%;descent-override:28.2%;line-gap-override:0%}
@font-face{font-family:"Geist Fallback";font-weight:550 900;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold"),local("Arimo Bold"),local("Arimo-Bold"),local("Helvetica Bold"),local("Helvetica-Bold");size-adjust:99.3%;ascent-override:101.2%;descent-override:29.7%;line-gap-override:0%}
@font-face{font-family:"Geist Fallback R";font-weight:100 449;src:local("Roboto"),local("Roboto-Regular");size-adjust:102.4%;ascent-override:98.1%;descent-override:28.8%;line-gap-override:0%}
@font-face{font-family:"Geist Fallback R";font-weight:450 549;src:local("Roboto Medium"),local("Roboto-Medium");size-adjust:104.3%;ascent-override:96.4%;descent-override:28.3%;line-gap-override:0%}
@font-face{font-family:"Geist Fallback R";font-weight:550 900;src:local("Roboto Bold"),local("Roboto-Bold");size-adjust:106%;ascent-override:94.8%;descent-override:27.8%;line-gap-override:0%}
:root{
  /* Round 5 colours: layered graphite with a faint cool steel undertone (so the silver reads as polished metal),
     studio-light highlights, fine grain and a polished-chrome accent. Still only black, graphite, silver and white.
     The DJ deck (deck.css) reads --bg --bg2 --bg3 --line --text --muted --silver-1/2/3 --silver --head --body --hh. */
  --bg:#07080A; --bg2:#0E1013; --bg3:#15171B; --bg4:#1D2025; --bg-deep:#050608;
  --line:rgba(220,228,238,.12); --line-2:rgba(220,228,238,.2); --line-3:rgba(220,228,238,.38);
  --text:#F4F5F7; --muted:#A7ACB3; --bright:#D8DBE0; --nav:#BEC3CA;
  --silver-1:#F0F2F5; --silver-2:#BDC2C9; --silver-3:#8C929A;
  --silver:linear-gradient(135deg,#FFFFFF 0%,#D3D8DE 20%,#8A9199 44%,#F6F8FA 56%,#9CA3AB 76%,#E4E8EC 100%);
  --silver-wide:linear-gradient(100deg,#F7F8F9 0%,#C9CED4 16%,#8A9199 30%,#E6E9ED 46%,#A2A8B0 62%,#F2F4F6 78%,#B4BAC1 100%);
  --silver-soft:linear-gradient(180deg,#FFFFFF 0%,#E6E9ED 44%,#B3B9C1 54%,#EDF0F3 100%);
  /* Polished chrome: bright sky, a dark horizon line, a specular band and a floor reflection (text and step numbers) */
  --chrome:linear-gradient(180deg,#FFFFFF 0%,#F1F4F7 20%,#C8CED5 41%,#858C95 50%,#ACB3BB 55%,#E8ECF0 72%,#FFFFFF 86%,#C5CBD2 100%);
  --chrome-sheen:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 40%,rgba(255,255,255,.95) 50%,rgba(255,255,255,0) 60%,rgba(255,255,255,0) 100%);
  /* Bright chrome for primary buttons and selected states (near-black text on it: 11.7:1 or more) */
  --chrome-btn:linear-gradient(180deg,#FFFFFF 0%,#F3F5F7 40%,#DADFE4 54%,#EBEEF1 78%,#FDFDFE 100%);
  --chrome-btn-hi:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 38%,#E7EAEE 54%,#F7F8FA 100%);
  /* Hairline chrome edges for cards, panels and glass controls (drawn as a border-box background) */
  --chrome-edge:linear-gradient(150deg,rgba(242,245,248,.6) 0%,rgba(150,158,168,.2) 24%,rgba(110,118,128,.12) 50%,rgba(170,178,188,.3) 76%,rgba(242,245,248,.48) 100%);
  --chrome-edge-hi:linear-gradient(150deg,rgba(255,255,255,.85) 0%,rgba(170,178,188,.32) 24%,rgba(130,138,148,.2) 50%,rgba(190,198,208,.45) 76%,rgba(255,255,255,.7) 100%);
  --chrome-frame:linear-gradient(172deg,#F6F8FA 0%,#A9B0B8 9%,#565C64 30%,#33373D 56%,#6E757D 82%,#B7BDC4 100%);
  --chrome-rule:linear-gradient(90deg,rgba(200,208,218,0) 0%,rgba(200,208,218,.42) 22%,#F4F6F8 50%,rgba(200,208,218,.42) 78%,rgba(200,208,218,0) 100%);
  --panel:linear-gradient(180deg,#15171B 0%,#0F1114 100%);
  --studio:226,234,244;   /* r,g,b of the soft studio-light highlights: rgba(var(--studio),alpha) */
  /* Gunmetal: the chrome as it reads on the light sections (darkest stop 15:1, lightest 4.3:1 on #E6E8EB) */
  --gunmetal:linear-gradient(135deg,#15171A 0%,#4A5058 26%,#0C0D10 48%,#5E656D 70%,#25282D 100%);
  --gunmetal-text:linear-gradient(180deg,#3A3F46 0%,#5F666E 38%,#15171A 50%,#40454C 60%,#666C75 100%);
  --light-1:#F2F3F5; --light-2:#E6E8EB;
  --field:#0A0B0E; --field-line:#6F757D; --danger:#F5A5A5;
  /* Round 7 accent: electric blue fading into violet, like club lasers (the owner's choice). It sits on top of the
     graphite and chrome and is used with restraint: glows, key highlights, active and selected states, link underlines,
     one accent word per page head, soft "club light" washes, and the deck's LEDs (deck.css reads these names, with
     fallbacks, so keep them exact). Contrast on --bg: accent-1 6.0:1, accent-2 5.4:1, the gradient 5.3:1 or more;
     --accent-ink on any part of --accent-grad 5.4:1 or more. Body text is never set in the accent. .sec-light swaps in
     the -on-light versions (see "Accent colour" near the end of this file). */
  --accent-1:#3D8BFF; --accent-2:#9466FF;
  --accent-1-rgb:61,139,255; --accent-2-rgb:148,102,255;   /* for rgba(var(--accent-1-rgb),alpha) */
  --accent-grad:linear-gradient(100deg,#3D8BFF 0%,#9466FF 100%);
  --accent-glow:rgba(61,139,255,.4); --accent-glow-2:rgba(148,102,255,.4);
  --accent-ink:#05060A;   /* text and icons on an accent fill */
  --accent-text:#8EBBFF; --accent-text-2:#BBA4FF;   /* small accent text on dark: 10.2:1 and 9.4:1 */
  /* Anodised accent word (large display type only): a soft top light over the blue-violet sweep, 5.2:1 or more */
  --accent-word:linear-gradient(180deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.1) 42%,rgba(255,255,255,0) 56%),linear-gradient(100deg,#6FA8FF 0%,#3D8BFF 34%,#8576FF 68%,#A47DFF 100%);
  --focus:#9EC2FF;   /* focus ring on dark: 11:1 */
  /* Light-section versions (on #E6E8EB: 5.5:1 and 5.8:1; white text on them 6.7:1 and 7.1:1) */
  --accent-1-on-light:#1D4ED8; --accent-2-on-light:#6D28D9;
  --accent-grad-on-light:linear-gradient(100deg,#1D4ED8 0%,#6D28D9 100%);
  --head:"Unbounded","Unbounded Fallback","Unbounded Fallback R","Arial Black","Helvetica Neue",Arial,system-ui,sans-serif;
  --body:"Geist","Geist Fallback","Geist Fallback R",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --track-display:-.03em; --track-head:-.02em; --track-sub:-.01em; --track-label:.14em;
  --max:1240px; --gut:clamp(20px,5vw,56px); --hh:76px;
  --sec:clamp(88px,11vw,148px);
  --ease:cubic-bezier(.2,.7,.2,1);
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* Film grain as a ready-to-layer background (very low alpha baked in): white specks on dark, dark specks on light */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .22 0 0 0 -.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --grain-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .13 0 0 0 -.055'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:dark;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--hh) + 16px);scroll-padding-bottom:var(--hp-deck-space,0px);background:var(--bg)}
body{margin:0;background:var(--grain),var(--bg);color:var(--text);font:400 1rem/1.65 var(--body);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:var(--text);text-decoration-color:rgba(255,255,255,.4);text-underline-offset:.2em}
a:hover{text-decoration-color:currentColor}
p{margin:0 0 1em}
button{font-family:inherit}
main{display:block}
main:focus,[tabindex="-1"]:focus{outline:none}
::selection{background:#F4F5F7;color:#07080A}
:focus-visible{outline:2px solid #FFFFFF;outline-offset:3px}

/* Display type: Unbounded in sentence case with tight tracking. It is far wider than the old condensed face,
   so sizes are tuned to fit 320px of content width at 360px (see the type scale in the round-3 notes). */
h1,h2,h3{font-family:var(--head);font-weight:500;letter-spacing:var(--track-head);line-height:1.08;margin:0 0 .5em;color:var(--text);font-kerning:normal}
h1{font-size:clamp(2.25rem,1.2rem + 4.4vw,4.5rem);font-weight:600;line-height:1.02;letter-spacing:var(--track-display)}
h2{font-size:clamp(1.75rem,1rem + 2.8vw,3rem);line-height:1.06}
h3{font-size:clamp(1.125rem,.95rem + .6vw,1.375rem);letter-spacing:var(--track-sub);line-height:1.22}
h1,h2{text-wrap:balance}
h3{text-wrap:pretty}

.wrap{width:100%;max-width:calc(var(--max) + var(--gut) * 2);margin:0 auto;padding:0 var(--gut)}
.sec{position:relative;padding:var(--sec) 0}
/* Raised graphite band: a faint top light, grain, and a cool falloff towards the bottom */
.sec-alt{background:radial-gradient(70% 50% at 50% 0%,rgba(var(--studio),.05),transparent 70%),var(--grain),linear-gradient(180deg,var(--bg2) 0%,#0B0D10 100%);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-alt + .sec-alt{border-top:0}
.anchor{position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none}

.eyebrow{display:flex;align-items:center;gap:14px;margin:0 0 24px;font:500 .8125rem/1.35 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--silver-2)}
.eyebrow::before{content:"";width:32px;height:1px;flex:none;background:var(--silver)}
.eyebrow-center{justify-content:center}
.eyebrow-center::after{content:"";width:32px;height:1px;flex:none;background:var(--silver)}
/* Measures were in ch, which follows the width of "0" in whichever font is showing, so text re-wrapped when Geist
   replaced the fallback. They are now in em at Geist's "0" (0.663em at 400, 0.673em at 500): 58ch = 38.454em. */
.lede{font-size:clamp(1.0625rem,.95rem + .35vw,1.25rem);line-height:1.65;letter-spacing:-.005em;color:var(--muted);max-width:38.454em}
.lede-bright{color:var(--bright)}

.sec-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:24px 72px;align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.sec-head h2,.sec-head .lede{margin:0}
.sec-head-stack{display:block}
.sec-head-stack .eyebrow{margin-bottom:22px}

/* Silver text accent, with fallbacks so it can never disappear */
/* Polished chrome (sky, horizon line, floor reflection). The specular band that sweeps across now and then is a
   separate layer added by app.js (.sheen, in the Motion section), so only transforms animate.
   The solid colour underneath is the fallback wherever background-clip:text is missing. */
.silver{color:var(--silver-1);padding-right:.06em;margin-right:-.06em;background-image:var(--chrome);background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){.silver{background:none;-webkit-text-fill-color:currentColor}}
@media (forced-colors:active){.silver{background:none;-webkit-text-fill-color:CanvasText;color:CanvasText}}

/* Owner-only facts: square-bracket placeholders */
.ph{display:inline;font:500 .875em/1.5 var(--mono);color:var(--silver-1);-webkit-text-fill-color:var(--silver-1);background:rgba(255,255,255,.05);border:1px dashed rgba(255,255,255,.38);padding:.08em .45em;border-radius:3px;letter-spacing:0;text-transform:none;overflow-wrap:anywhere;-webkit-box-decoration-break:clone;box-decoration-break:clone}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-80px;z-index:200;background:#FFFFFF;color:#0A0A0B;padding:12px 16px;font-weight:600;text-decoration:none;border-radius:2px}
.skip:focus{top:12px}
.ico{width:16px;height:16px;flex:none}

/* ---------- Buttons ---------- */
/* Primary: bright polished chrome with near-black text. Secondary (.btn-ghost): smoked glass with a chrome hairline. */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border:1px solid #E9ECEF;border-radius:999px;background:var(--text);background-image:var(--chrome-btn);color:#07080A;font:600 1rem/1.2 var(--body);letter-spacing:-.005em;text-decoration:none;text-align:center;cursor:pointer;overflow:hidden;isolation:isolate;-webkit-tap-highlight-color:transparent;box-shadow:inset 0 1px 0 #FFFFFF,inset 0 -1px 0 rgba(10,12,16,.16),0 10px 28px -16px rgba(var(--studio),.38);transition:background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease),transform .18s var(--ease)}
/* Hover sheen: a soft band crosses the button once (transform only; mouse and trackpad only) */
.btn::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;z-index:-1;background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);transform:translateX(-140%) skewX(-18deg);opacity:0;pointer-events:none}
.btn:hover{background-image:var(--chrome-btn-hi);border-color:#FFFFFF;color:#07080A;box-shadow:inset 0 1px 0 #FFFFFF,inset 0 -1px 0 rgba(10,12,16,.12),0 14px 34px -12px rgba(var(--studio),.62)}
@media (hover:hover) and (pointer:fine){.btn:hover::after{animation:hp-sheen .9s var(--ease)}}
/* Primary buttons press down a touch */
@media (prefers-reduced-motion:no-preference){.btn:not(.btn-ghost):active{transform:translateY(1px) scale(.985);transition-duration:.08s}}
.btn .ico{transition:transform .3s var(--ease)}
.btn:hover .ico{transform:translateX(4px)}
.btn-ghost{background:rgba(255,255,255,.035);background-image:none;color:var(--text);border-color:rgba(220,228,238,.42);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.btn-ghost:hover{background:rgba(255,255,255,.07);background-image:none;border-color:var(--text);color:var(--text);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 12px 30px -16px rgba(var(--studio),.35)}
/* Chrome hairline drawn inside the border (the button clips its own overflow); forced colours keep the real border */
@media (forced-colors:none){@supports ((mask-composite:exclude) or (-webkit-mask-composite:xor)){
  .btn-ghost{border-color:transparent}
  .btn-ghost::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--chrome-edge);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none;transition:opacity .3s var(--ease)}
  .btn-ghost:hover{border-color:transparent}
  .btn-ghost:hover::before{background:var(--chrome-edge-hi)}
}}
.btn-ghost::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent)}
.btn-sm{min-height:44px;padding:0 20px;font-size:.9375rem;letter-spacing:-.005em}
.btn[disabled]{opacity:.6;cursor:progress}
@keyframes hp-sheen{0%{transform:translateX(-140%) skewX(-18deg);opacity:1}100%{transform:translateX(260%) skewX(-18deg);opacity:1}}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}

.text-btn{display:inline-flex;align-items:center;gap:12px;min-height:44px;margin-top:22px;padding:0;border:0;background:transparent;color:var(--bright);font:500 .8125rem/1 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;cursor:pointer;text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:.55em}
.text-btn:hover{color:var(--text);text-decoration-color:currentColor}
.text-btn-dot{position:relative;width:18px;height:18px;border-radius:50%;border:1px solid var(--silver-2);flex:none}
.text-btn-dot::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--silver-1)}
html.no-deck [data-deck-open],html.no-deck .deck-showcase,
html:not(.js) [data-deck-open],html:not(.js) .deck-showcase{display:none!important}

/* ---------- Header ---------- */
/* Smoked glass once the page scrolls, with a fine chrome hairline along the bottom. Dense enough that over the light
   sections it stays gunmetal (#1C1D20 to #222326 over #F2F3F5, menu text 8.5:1 or more) instead of turning flat grey; over
   the dark sections it reads as about #0F1013. */
.hdr{position:sticky;top:0;z-index:60;border-bottom:1px solid transparent;transition:background-color .35s ease,border-color .35s ease,box-shadow .35s ease}
.hdr.is-scrolled,.hdr.menu-open{background:rgba(10,11,14,.92);background-image:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0));-webkit-backdrop-filter:saturate(150%) blur(18px);backdrop-filter:saturate(150%) blur(18px);border-bottom-color:rgba(220,228,238,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 16px 36px -18px rgba(0,0,0,.85)}
.hdr::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--chrome-rule);opacity:0;pointer-events:none;transition:opacity .35s ease}
.hdr.is-scrolled::after,.hdr.menu-open::after{opacity:.55}
.hdr.menu-open{background-color:#090A0D}   /* open menu: header and drop-down read as one solid panel */
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:var(--hh)}
.brand{display:inline-flex;align-items:center;gap:12px;flex:none;min-height:44px;text-decoration:none;padding:4px 0}
.brand-mark{width:38px;height:38px}
.brand-word{width:auto;height:19px}
.nav{display:flex;align-items:center;gap:clamp(18px,2.2vw,34px)}
.nav-pages,.nav-social{display:flex;align-items:center;list-style:none;margin:0;padding:0}
.nav-pages{gap:clamp(18px,2.2vw,34px)}
.nav-pages a,.nav-social a{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:10px 0;color:var(--nav);text-decoration:none;font:500 .9375rem/1 var(--body);letter-spacing:0;transition:color .25s ease}
.nav-pages a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:var(--silver);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav-pages a:hover,.nav-social a:hover,.nav-pages a[aria-current="page"]{color:var(--text)}
.nav-pages a:hover::after,.nav-pages a[aria-current="page"]::after{transform:scaleX(1)}
.nav-social{gap:20px;padding-left:clamp(18px,2.2vw,34px);border-left:1px solid var(--line)}
/* Client login (portal/): a quiet text link between the socials and the enquiry button */
.nav-login{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 0;color:var(--nav);text-decoration:none;font:500 .9375rem/1 var(--body);white-space:nowrap;transition:color .25s ease}
.nav-login:hover{color:var(--text)}
.nav-login .ico{width:17px;height:17px}
.menu-btn{display:none;align-items:center;gap:10px;min-height:44px;padding:0 18px 0 16px;border:1px solid rgba(220,228,238,.45);border-radius:999px;background:rgba(255,255,255,.04);box-shadow:inset 0 1px 0 rgba(255,255,255,.07);color:var(--text);font:600 .9375rem/1 var(--body);letter-spacing:0;cursor:pointer}
.menu-btn .bars{position:relative;display:inline-block;width:18px;height:10px}
.menu-btn .bars::before,.menu-btn .bars::after,.menu-btn .bars i{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .3s var(--ease),opacity .2s}
.menu-btn .bars::before{top:0}.menu-btn .bars i{top:4.25px}.menu-btn .bars::after{bottom:0}
.menu-btn[aria-expanded="true"] .bars::before{transform:translateY(4.25px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .bars::after{transform:translateY(-4.25px) rotate(-45deg)}
.menu-btn[aria-expanded="true"] .bars i{opacity:0}

@media (max-width:1120px) and (min-width:861px){
  .hdr-in{gap:16px}
  .nav,.nav-pages{gap:18px}
  .nav-social{gap:14px;padding-left:18px}
  .nav-pages a,.nav-social a,.nav-login{font-size:.875rem}
  .brand-mark{width:34px;height:34px}.brand-word{height:17px}
  .nav-cta{padding:0 16px;white-space:nowrap}
  /* Room for "Client login": the social links show their icons only (their names stay for screen readers) */
  .nav-social .soc-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (max-width:940px) and (min-width:861px){
  .hdr-in{gap:12px}
  .nav,.nav-pages{gap:14px}
  .nav-social{gap:12px;padding-left:14px}
  .nav-cta{padding:0 14px}
  .nav-login .ico{display:none}
}
@media (max-width:860px){
  :root{--hh:68px}
  .brand-mark{width:34px;height:34px}.brand-word{height:17px}
  .menu-btn{display:inline-flex}
  .nav{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gut) 28px;background:#090A0D;background-image:radial-gradient(80% 60% at 100% 0%,rgba(var(--studio),.06),transparent 70%),var(--grain);border-bottom:1px solid var(--line);box-shadow:0 24px 40px -20px rgba(0,0,0,.9);max-height:calc(100vh - var(--hh));overflow-y:auto}
  .nav.open{display:flex}
  .nav-pages{flex-direction:column;align-items:stretch;gap:0}
  .nav-pages a{display:flex;justify-content:space-between;padding:20px 0;border-bottom:1px solid var(--line);font:500 1.5rem/1.1 var(--head);letter-spacing:var(--track-head);color:var(--text)}
  .nav-pages a::after{left:auto;right:0;top:50%;bottom:auto;width:28px;transform:scaleX(0);transform-origin:right}
  .nav-social{gap:28px;padding:22px 0 0;border-left:0}
  .nav-social a{font-size:1rem;color:var(--bright);min-height:44px}
  .nav-login{align-self:flex-start;margin-top:12px;font-size:1rem;color:var(--bright)}
  .nav-cta{margin-top:24px;width:100%;min-height:52px}
}

/* ---------- Waveform motif ---------- */
.wave{width:100%;height:56px;overflow:visible}
.wave .w-base{fill:none;stroke:rgba(255,255,255,.2);stroke-width:1.25;vector-effect:non-scaling-stroke}
.wave .w-pulse{fill:none;stroke:#FFFFFF;stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-dasharray:160 1400;stroke-dashoffset:1560;animation:hp-travel 6s linear infinite;opacity:.9}
@keyframes hp-travel{to{stroke-dashoffset:0}}

/* ---------- Views (pages) ---------- */
.view{display:block}
html[data-boot="home"] [data-view]:not([data-view="home"]),
html[data-boot="services"] [data-view]:not([data-view="services"]),
html[data-boot="about"] [data-view]:not([data-view="about"]),
html[data-boot="enquire"] [data-view]:not([data-view="enquire"]),
html[data-boot="privacy"] [data-view]:not([data-view="privacy"]){display:none}
.view[hidden]{display:none}

/* ---------- Home hero ---------- */
.hero{position:relative;isolation:isolate;padding:clamp(56px,8vw,120px) 0 clamp(72px,8vw,120px)}
.hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.hero-bg::after{content:"";position:absolute;inset:0;background-image:var(--noise);opacity:.03}
/* Studio lights: a key light high on the right, a soft rim along the top and a low bounce on the left */
.hero-glow{position:absolute;inset:0;background:radial-gradient(46% 42% at 80% 2%,rgba(var(--studio),.17),rgba(var(--studio),.05) 48%,transparent 72%),radial-gradient(28% 30% at 97% 34%,rgba(var(--studio),.05),transparent 70%),radial-gradient(42% 30% at 4% 62%,rgba(var(--studio),.05),transparent 72%),linear-gradient(180deg,rgba(var(--studio),.035),transparent 26%)}
.hero-rings{position:absolute;width:min(1180px,150vw);aspect-ratio:1;right:max(-44vw,-560px);top:calc(min(1180px,150vw) * -.47);border-radius:50%;will-change:transform;   /* its own layer: the scroll parallax then only moves it */
  background:repeating-radial-gradient(circle at center,rgba(255,255,255,.055) 0 1px,transparent 1px 7px);
  -webkit-mask-image:radial-gradient(circle at center,#000 18%,rgba(0,0,0,.65) 46%,transparent 70%);mask-image:radial-gradient(circle at center,#000 18%,rgba(0,0,0,.65) 46%,transparent 70%)}
.hero-rings::before{content:"";position:absolute;inset:44%;border-radius:50%;border:1px solid rgba(255,255,255,.14)}
.hero-rings span{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0deg,rgba(255,255,255,.07) 30deg,transparent 70deg,transparent 180deg,rgba(255,255,255,.06) 210deg,transparent 250deg);animation:hp-spin 48s linear infinite}
@keyframes hp-spin{to{transform:rotate(360deg)}}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.75fr);gap:36px 64px;align-items:end}
/* Hero: each phrase sits on its own line. "Many accounts." is the widest (9.62em at 600 / -.03em), so the size is
   capped by the column width: 8.9vw on one column (fits 280px of content at 320px), 5.5vw beside the side copy from 961px. */
.hero-title{font-size:clamp(1.75rem,8.9vw,5rem);font-weight:600;line-height:1.04;letter-spacing:var(--track-display);margin:0}
@media (min-width:961px){.hero-title{font-size:clamp(3rem,5.5vw,5rem)}}
.hero-title>span{display:block}
/* Forced colours: each line gets a readability backplate as tall as its line box, which would cover the descenders of
   the line above (campaign, Every, platform), so the lines get more room there */
@media (forced-colors:active){.hero-title{line-height:1.22}}
.hero-title .silver{width:-moz-fit-content;width:fit-content}
/* Up to 391px Unbounded always puts "enquiry" on its own line; making that break explicit keeps the fallback font
   (see the @font-face rules at the top) from fitting it on one line and then jumping when the webfont arrives. */
@media (max-width:391px){#enqTitle>.silver,#enqTitle>.w:last-child{display:block;width:-moz-fit-content;width:fit-content}}
.hero-side .lede{color:var(--bright);margin:0}
.hero-wave{height:64px;margin:clamp(56px,7vw,96px) 0 0}
.deck-showcase{position:relative;margin-top:clamp(40px,5vw,64px);padding-top:clamp(40px,5vw,64px);border-top:1px solid transparent}
/* A chrome divider above the decks and a soft pool of studio light behind them (both stay inside the page width).
   The pool and the hero rings are placed by fixed or width-based lengths, not by percentages of the hero's height, so
   they stay put when the deck fills its stage after load (no layout shift). */
.deck-showcase::after{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--line);background-image:var(--chrome-rule);opacity:.6;pointer-events:none}
.deck-showcase::before{content:"";position:absolute;z-index:-1;left:calc(-1 * var(--gut));right:calc(-1 * var(--gut));top:clamp(150px,220px - 5vw,205px);bottom:-8%;background:radial-gradient(52% 46% at 50% 52%,rgba(var(--studio),.09),rgba(var(--studio),.03) 55%,transparent 78%);pointer-events:none}
.deck-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 72px;align-items:end;margin-bottom:clamp(28px,3.5vw,44px)}
.deck-title{font-size:clamp(1.625rem,1rem + 1.8vw,2.375rem);margin:0}
.deck-copy{color:var(--muted);margin:0;max-width:37.128em}
#hp-deck-stage{position:relative;min-width:0}
/* Phones: let the deck use nearly the full width so both decks' controls keep 44px targets */
@media (max-width:480px){#hp-deck-stage{margin-left:calc(8px - var(--gut));margin-right:calc(8px - var(--gut))}}

/* ---------- Home: who we promote teaser ---------- */
.teaser{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.teaser li{position:relative;display:flex;flex-direction:column;min-height:320px;padding:36px clamp(24px,2.6vw,36px) 32px;border-left:1px solid var(--line);transition:background-color .4s ease}
.teaser li:first-child{border-left:0;padding-left:0}
.teaser li::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--silver);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.teaser li:hover{background:linear-gradient(180deg,rgba(var(--studio),.055),rgba(var(--studio),0) 75%)}
.teaser li:hover::before,.teaser li:focus-within::before{transform:scaleX(1)}
.teaser .num{font:500 .8125rem/1 var(--mono);color:var(--silver-2);letter-spacing:.08em}
.teaser h3{font-size:clamp(1.75rem,1rem + 2vw,2.5rem);margin:52px 0 14px;font-weight:600;letter-spacing:var(--track-display);line-height:1.05}
.teaser p{color:var(--muted);max-width:21.216em}
.more{display:inline-flex;align-items:center;gap:10px;margin-top:auto;padding-top:12px;color:var(--text);text-decoration:none;font:600 .9375rem/1.3 var(--body);letter-spacing:-.005em}
.more::after{content:"";position:absolute;inset:0}
.more .ico{transition:transform .3s var(--ease)}
.teaser li:hover .more .ico{transform:translateX(5px)}
.more:focus-visible{outline:none}
.more:focus-visible::after{outline:2px solid #FFFFFF;outline-offset:-2px}

/* ---------- Comparison ----------
   HousePulse is the last column, drawn as a raised rounded panel and always emphasised. The "Compare HousePulse with"
   picker chooses one of the two alternatives, and at every width only that alternative and HousePulse show, side by side
   (the table's data-alt, set by app.js, hides the other column). Without JavaScript every column shows and the picker hides. */
.cmp-pick{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin:0 0 clamp(32px,4vw,48px)}
.cmp-pick-label{font:500 .75rem/1.3 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--silver-2)}
.seg{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line-2);border-radius:999px;background:rgba(5,6,8,.72);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 -1px 0 rgba(0,0,0,.4)}
/* Selected and unselected swap fill and text colour together, instantly: a chrome background-image cannot fade, so a
   colour fade would pass through flat grey with dark text. Only the hover brightening of an unselected option fades. */
.seg-opt{min-height:40px;padding:0 20px;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--muted);font:500 .9375rem/1.2 var(--body);letter-spacing:-.005em;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .25s ease}
.seg-opt:hover{color:var(--text)}
.seg-opt:not([aria-checked="true"]):hover{transition:color .25s ease,border-color .25s ease}
.seg-opt[aria-checked="true"]{background:var(--text);background-image:var(--chrome-btn);border-color:#E9ECEF;color:#07080A;box-shadow:inset 0 1px 0 #FFFFFF,0 6px 18px -8px rgba(var(--studio),.5)}
.seg-opt:focus-visible{outline-offset:3px}
.seg-short{display:none}

.cmp{--cmp-panel:#171A1E;--cmp-edge:rgba(200,208,218,.34);--cmp-rule:rgba(220,228,238,.1);--cmp-rule-in:rgba(220,228,238,.09);--cmp-px:clamp(14px,1.9vw,28px);--cmp-r:18px;
  width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}
.cmp th,.cmp td{padding:26px var(--cmp-px);text-align:left;vertical-align:baseline;border-bottom:1px solid var(--cmp-rule)}
.cmp thead td,.cmp tbody th{padding-left:0}
.cmp thead td{width:22%;border-bottom-color:var(--line-2)}
.cmp thead th{position:relative;width:25%;padding-top:0;padding-bottom:22px;vertical-align:bottom;border-bottom-color:var(--line-2);font:600 1rem/1.35 var(--body);letter-spacing:-.005em;color:var(--text);transition:color .3s ease}
/* Silver underline marks the alternative being compared (echoes the tab underline) */
.cmp thead th:not([data-col="hp"])::after{content:"";position:absolute;left:var(--cmp-px);right:var(--cmp-px);bottom:-1px;height:2px;background:var(--silver);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.cmp thead th.pick::after{transform:scaleX(1)}
.cmp tbody th{font:500 .75rem/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--silver-2)}
.cmp td{font-size:1rem;line-height:1.55;color:var(--muted);transition:color .3s ease}
.cmp td.pick{color:var(--bright)}
/* Two things compared at once: the unchosen alternative is removed, and the columns re-balance (label + two values).
   The table keeps a comfortable measure instead of stretching two columns across the full 1240px. */
.js .cmp[data-alt="page"] [data-col="agency"],.js .cmp[data-alt="agency"] [data-col="page"]{display:none}
@media (min-width:761px){
  .js .cmp-wrap{max-width:1040px}
  .js .cmp thead td{width:26%}
  .js .cmp thead th{width:35%}
  .js .cmp thead th[data-col="hp"]{width:39%}
}
/* Switching alternative: the shown alternative fades out, the columns swap, and the new one fades in */
.js .cmp td:not([data-col="hp"]),.js .cmp thead th:not([data-col="hp"]){transition:opacity .15s ease,color .3s ease}
.js .cmp.cmp-out td:not([data-col="hp"]),.js .cmp.cmp-out thead th:not([data-col="hp"]){opacity:0}
.js .cmp thead th.pick::after{animation:cmp-line .45s var(--ease) both}
@keyframes cmp-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* HousePulse panel: lighter surface, fine silver edge, rounded top and bottom, inset row rules */
.cmp [data-col="hp"]{background-color:var(--cmp-panel);border-left:1px solid var(--cmp-edge);border-right:1px solid var(--cmp-edge);color:var(--text)}
.cmp thead th[data-col="hp"]{width:28%;padding-top:30px;border-top:1px solid var(--cmp-edge);border-bottom:0;border-radius:var(--cmp-r) var(--cmp-r) 0 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.cmp td[data-col="hp"]{font-weight:500;border-bottom:0}
.cmp thead th[data-col="hp"],.cmp td[data-col="hp"]{background-image:linear-gradient(var(--cmp-rule-in),var(--cmp-rule-in));background-repeat:no-repeat;background-size:calc(100% - var(--cmp-px) * 2) 1px;background-position:50% 100%}
.cmp thead th[data-col="hp"]{background-image:linear-gradient(var(--cmp-rule-in),var(--cmp-rule-in)),linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0));background-size:calc(100% - var(--cmp-px) * 2) 1px,100% 100%;background-position:50% 100%,0 0}
.cmp tbody tr:last-child td[data-col="hp"]{background-image:none;border-bottom:1px solid var(--cmp-edge);border-radius:0 0 var(--cmp-r) var(--cmp-r)}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom-color:transparent}
.th-hp{display:flex;align-items:center;gap:10px;font:500 clamp(1rem,.86rem + .3vw,1.1875rem)/1.2 var(--head);letter-spacing:var(--track-sub);white-space:nowrap}
.th-mark{flex:none;width:24px;height:24px}
.cmp-note{margin:28px 0 0;font-size:.9375rem;color:var(--muted)}

@media (max-width:760px){
  .seg{display:flex;width:100%}
  .seg-opt{flex:1 1 0;min-width:0;padding:0 12px}
  .seg-long{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .seg-short{display:inline}
  .cmp{--cmp-px:16px;--cmp-r:14px}
  .cmp,.cmp thead,.cmp tbody{display:block}
  .cmp tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
  .cmp thead td{display:none}
  .cmp thead th{width:auto;grid-row:1;align-self:end}
  .cmp thead th:not([data-col="hp"]){grid-column:1;padding:0 14px 18px 0}
  .cmp thead th:not([data-col="hp"])::after{left:0;right:0}
  .cmp thead th[data-col="hp"]{grid-column:2;align-self:stretch;display:flex;align-items:flex-end;width:auto;padding:22px var(--cmp-px) 18px}
  .th-hp{font-size:.9375rem;gap:8px}
  .th-mark{width:20px;height:20px}
  /* Each row: label over the alternative on the left; HousePulse on the right in one continuous panel */
  .cmp tbody tr{grid-template-rows:auto 1fr}
  .cmp tbody tr::after{content:"";grid-column:2;grid-row:1;background:var(--cmp-panel);border-left:1px solid var(--cmp-edge);border-right:1px solid var(--cmp-edge)}
  .cmp tbody th{grid-column:1;grid-row:1;padding:22px 14px 8px 0;border-bottom:0;letter-spacing:.06em;line-height:1.5}
  .cmp tbody td{grid-column:1;grid-row:2;padding:0 14px 22px 0}
  .cmp tbody td[data-col="hp"]{grid-column:2;grid-row:2;padding:0 var(--cmp-px) 22px}
  .cmp tbody tr:last-child td:not([data-col="hp"]){border-bottom-color:transparent}
  /* Without JavaScript there is no picker: list all three options in each row, each cell labelled */
  html:not(.js) .cmp thead{display:none}
  html:not(.js) .cmp tbody tr{display:block;padding:22px 0;border-bottom:1px solid var(--cmp-rule)}
  html:not(.js) .cmp tbody tr::after{display:none}
  html:not(.js) .cmp tbody th,html:not(.js) .cmp tbody td{display:block;padding:0;border:0}
  html:not(.js) .cmp tbody th{margin-bottom:12px}
  html:not(.js) .cmp tbody td+td{margin-top:12px}
  html:not(.js) .cmp tbody td[data-col="hp"]{padding:14px 16px;border:1px solid var(--cmp-edge);border-radius:12px;background-image:none}
  html:not(.js) .cmp td::before{display:block;margin-bottom:4px;font:500 .75rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--silver-2)}
  html:not(.js) .cmp td[data-col="page"]::before{content:"A single promo page"}
  html:not(.js) .cmp td[data-col="agency"]::before{content:"A general marketing agency"}
  html:not(.js) .cmp td[data-col="hp"]::before{content:"HousePulse"}
}
/* Narrow phones (360px and below): keeps "Marketing agency" inside its pill and the HousePulse header inside the panel */
@media (max-width:374px){.seg-opt{padding:0 6px;font-size:.875rem}.th-hp{font-size:.8125rem;gap:6px}.th-mark{width:18px;height:18px}}
/* Rows fade in one after another without moving, so the HousePulse panel stays in one piece while they appear */
@keyframes cmp-fade{from{opacity:0}to{opacity:1}}
.js .cmp [data-reveal-stagger].is-in-s>*{animation-name:cmp-fade}
/* Without JavaScript the picker is hidden, so the line inviting people to use it hides too */
html:not(.js) .cmp-hint{display:none}

/* ---------- How it works ---------- */
.process{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));counter-reset:s;border-top:1px solid var(--line)}
.process li{position:relative;counter-increment:s;padding:36px 28px 8px}
.process li:first-child{padding-left:0}
.process li+li{border-left:1px solid var(--line)}
.process li::before{content:"0" counter(s);display:block;margin-bottom:32px;font:500 clamp(2.25rem,1.9rem + 1vw,2.75rem)/1 var(--mono);letter-spacing:-.04em;color:var(--silver-2);background:var(--chrome);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){.process li::before{background:none;-webkit-text-fill-color:currentColor}}
.process li::after{content:"";position:absolute;top:-1px;left:0;width:56px;height:1px;background:var(--silver-1)}
.process li+li::after{left:28px}
.process h3{margin-bottom:.5em;font-size:clamp(1.25rem,1rem + .8vw,1.625rem);font-weight:600}
.process p{margin:0;color:var(--muted)}
@media (max-width:960px){
  .process{grid-template-columns:repeat(2,minmax(0,1fr))}
  .process li:nth-child(3){padding-left:0;border-left:0}
  .process li:nth-child(3)::after{left:0}
  .process li:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:560px){
  .process{grid-template-columns:1fr}
  .process li,.process li+li{padding:32px 0 28px;border-left:0}
  .process li+li{border-top:1px solid var(--line)}
  .process li+li::after{left:0}
}

/* ---------- Call-to-action band ---------- */
/* Spotlit from above, with a faint bounce from the floor */
.cta-band{overflow:hidden;isolation:isolate;text-align:center;background:radial-gradient(56% 70% at 50% 0%,rgba(var(--studio),.14),rgba(var(--studio),.04) 50%,transparent 75%),radial-gradient(50% 40% at 50% 104%,rgba(var(--studio),.05),transparent 70%),var(--grain),linear-gradient(180deg,#101216 0%,#0B0C0F 100%);border-top:1px solid var(--line)}
.cta-band::before{content:"";position:absolute;left:50%;top:50%;z-index:-1;width:min(1000px,160vw);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:repeating-radial-gradient(circle at center,rgba(255,255,255,.045) 0 1px,transparent 1px 8px);-webkit-mask-image:radial-gradient(circle,#000 10%,transparent 66%);mask-image:radial-gradient(circle,#000 10%,transparent 66%)}
.cta-band::after{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;z-index:-1;background-image:var(--chrome-rule);opacity:.5}
.cta-inner{max-width:920px}
.cta-band h2{font-size:clamp(2rem,1rem + 4.4vw,4.25rem);font-weight:600;line-height:1.04;letter-spacing:var(--track-display)}
.cta-band .lede{margin:0 auto}
.cta-band .cta-row{justify-content:center}

/* ---------- Inner page heads ---------- */
.page-head{position:relative;isolation:isolate;overflow:hidden;padding:clamp(64px,9vw,128px) 0 clamp(56px,7vw,96px);border-bottom:1px solid var(--line);background:radial-gradient(48% 70% at 86% 0%,rgba(var(--studio),.13),rgba(var(--studio),.04) 50%,transparent 74%),radial-gradient(40% 50% at 0% 100%,rgba(var(--studio),.04),transparent 70%)}
.page-head::before{content:"";position:absolute;z-index:-1;width:min(900px,120vw);aspect-ratio:1;right:max(-34vw,-380px);top:50%;transform:translateY(-50%);border-radius:50%;background:repeating-radial-gradient(circle at center,rgba(255,255,255,.065) 0 1px,transparent 1px 7px);-webkit-mask-image:radial-gradient(circle at center,#000 15%,rgba(0,0,0,.5) 45%,transparent 68%);mask-image:radial-gradient(circle at center,#000 15%,rgba(0,0,0,.5) 45%,transparent 68%)}
.page-head::after{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--noise);opacity:.035}
.page-head h1{max-width:13em}
.page-head .lede{margin:0}
.page-head-short{padding-bottom:clamp(40px,5vw,64px)}
.subnav{display:flex;flex-wrap:wrap;gap:6px 28px;margin-top:40px}
.subnav a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);text-decoration:none;font:500 1rem/1.2 var(--body);border-bottom:1px solid var(--line-2);transition:color .25s,border-color .25s}
.subnav a:hover{color:var(--text);border-color:var(--text)}

/* ---------- Services: tabs ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:4px clamp(20px,3vw,40px);border-bottom:1px solid var(--line)}
.tab{position:relative;min-height:56px;padding:14px 0 16px;border:0;background:transparent;color:var(--muted);font:500 clamp(.9375rem,.7rem + 1vw,1.375rem)/1.1 var(--head);letter-spacing:var(--track-sub);cursor:pointer;transition:color .25s}
.tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--silver);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.tab:hover{color:var(--text)}
.tab[aria-selected="true"]{color:var(--text)}
.tab[aria-selected="true"]::after{transform:scaleX(1)}
.panel{padding-top:clamp(36px,4vw,56px)}
.panel:focus-visible{outline-offset:8px}
.js .panel[hidden]{display:none}
html:not(.js) .panel[hidden]{display:block}
.no-js-label{display:none}
html:not(.js) .no-js-label{display:block}
.panel-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:clamp(28px,4vw,64px);align-items:start}
.aim{position:relative;padding:32px;background:var(--bg2);border:1px solid var(--line)}
.aim::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:var(--silver)}
.aim-label{margin:0 0 18px;font:500 .8125rem/1.3 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--silver-2)}
.aim-text{margin:0;font:500 clamp(1.125rem,.8rem + .8vw,1.5rem)/1.3 var(--head);letter-spacing:var(--track-head);color:var(--text);text-wrap:pretty}
.ways{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;counter-reset:w}
.ways li{counter-increment:w;padding:24px 0 26px;border-top:1px solid var(--line)}
.ways li::before{content:"0" counter(w);display:block;margin-bottom:16px;font:500 .8125rem/1 var(--mono);letter-spacing:.08em;color:var(--silver-2)}
.ways strong{display:block;margin-bottom:10px;font:500 1.125rem/1.3 var(--head);letter-spacing:var(--track-sub)}
.ways span{color:var(--muted)}
@media (max-width:860px){.panel-grid{grid-template-columns:1fr}}
@media (max-width:560px){.ways{grid-template-columns:1fr}}
/* Phones: "I'm promoting an event" can't share a row with the other two, so the tabs stack as a short list
   instead of wrapping two-and-one */
@media (max-width:560px){.tabs{flex-direction:column;align-items:flex-start;gap:0}.tab{min-height:50px;padding:12px 0 14px;font-size:1.0625rem;text-align:left}}

/* ---------- Services: platforms ---------- */
.toggle-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:0 0 28px}
.switch{display:inline-flex;flex-wrap:wrap;align-items:center;gap:14px;min-height:48px;padding:6px 0;border:0;background:transparent;color:var(--text);font:500 1rem/1.2 var(--body);cursor:pointer;text-align:left}
.switch .opt{color:var(--muted);transition:color .25s}
.switch[aria-checked="false"] .opt.a,.switch[aria-checked="true"] .opt.b{color:var(--text)}
.switch .track{position:relative;flex:none;width:58px;height:30px;border-radius:999px;border:1px solid var(--silver-2);background:var(--bg);background-image:linear-gradient(180deg,#050608,#121418);box-shadow:inset 0 2px 4px rgba(0,0,0,.6)}
.switch .knob{position:absolute;top:4px;left:4px;width:20px;height:20px;border-radius:50%;background:var(--silver-soft);box-shadow:0 2px 6px rgba(0,0,0,.6);transition:left .3s var(--ease)}
.switch[aria-checked="true"] .knob{left:32px}
.chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.chip{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:10px 20px 10px 16px;border:1px solid var(--line-3);border-radius:999px;background:transparent;color:var(--text);font:500 1rem/1 var(--body);letter-spacing:-.005em;cursor:pointer;transition:border-color .25s}   /* fill and text swap together (see .seg-opt) */
.chip:hover{border-color:var(--text)}
.chip[aria-pressed="true"]{background:var(--text);background-image:var(--chrome-btn);border-color:#E9ECEF;color:#07080A;box-shadow:inset 0 1px 0 #FFFFFF,0 8px 22px -12px rgba(var(--studio),.55)}
.dots{position:relative;flex:none;width:22px;height:22px}
.dots i{position:absolute;left:7.5px;top:7.5px;width:7px;height:7px;border-radius:50%;background:currentColor;animation:hp-pulse 1.6s ease-in-out infinite}
.dots i:nth-child(n+2){display:none}
.network .dots i:nth-child(n+2){display:block}
.network .dots i:nth-child(1){left:7.5px;top:0}
.network .dots i:nth-child(2){left:0;top:7.5px;animation-delay:.2s}
.network .dots i:nth-child(3){left:15px;top:7.5px;animation-delay:.4s}
.network .dots i:nth-child(4){left:3.5px;top:15px;animation-delay:.6s}
.network .dots i:nth-child(5){left:11.5px;top:15px;animation-delay:.8s}
@keyframes hp-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.55);opacity:.5}}
.platform-out{position:relative;margin-top:28px;min-height:128px;padding:28px 32px;background:var(--bg);border:1px solid var(--line)}
.platform-out::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:2px;background:var(--silver)}
.platform-out h3{margin-bottom:.35em}
.platform-out p{margin:0;font-size:1.0625rem;color:var(--bright);max-width:45.084em}
.mode-note{margin:16px 0 0;color:var(--muted)}

/* ---------- Services: builder ---------- */
.builder-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
.step{min-width:0;margin:0 0 32px;padding:0;border:0}
.step:last-child{margin-bottom:0}
.step legend{display:flex;align-items:center;gap:14px;margin-bottom:18px;padding:0;font:500 1.125rem/1.2 var(--head);letter-spacing:var(--track-sub)}
.step legend b{display:inline-grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--silver-2);font:500 .8125rem/1 var(--mono);color:var(--silver-1)}
.opts{display:flex;flex-wrap:wrap;gap:10px}
.opt-in{position:relative}
.opt-in input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.opt-in label{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:10px 18px;border:1px solid var(--line-3);border-radius:999px;background:transparent;color:var(--text);font:500 .9375rem/1.2 var(--body);cursor:pointer;transition:border-color .25s}   /* fill and text swap together (see .seg-opt) */
.opt-in label:hover{border-color:var(--text)}
.opt-in label::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;border:1px solid currentColor;transition:background-color .2s}
.opt-in input:checked+label{background:var(--text);background-image:var(--chrome-btn);border-color:#E9ECEF;color:#07080A;box-shadow:inset 0 1px 0 #FFFFFF}
.opt-in input:checked+label::before{background:currentColor}
.opt-in input:focus-visible+label{outline:2px solid #FFFFFF;outline-offset:3px}
.opt-in.box label::before{width:16px;height:16px;border-radius:2px}
.opt-in.box input:checked+label::before{background:#0A0A0B;box-shadow:inset 0 0 0 3px var(--text)}
.summary{position:sticky;top:calc(var(--hh) + 24px);padding:clamp(28px,3vw,40px);background:var(--bg3);border:1px solid var(--line-2);overflow:hidden}
.summary::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--silver)}
.sum-text{margin:0 0 28px;font:500 clamp(1.125rem,1rem + .4vw,1.375rem)/1.5 var(--body);letter-spacing:-.01em;color:var(--text)}
.summary .btn{padding:0 22px}   /* "Send this as my enquiry" stays on one line in the narrow 861px column */
.sum-wave{height:40px;margin-top:28px}
@media (max-width:860px){.builder-grid{grid-template-columns:1fr}.summary{position:relative;top:auto}}

/* ---------- Cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.card{position:relative;display:flex;flex-direction:column;gap:16px;padding:32px;background:var(--bg);border:1px solid var(--line);transition:border-color .35s ease,background-color .35s ease}
.card:hover{--edge:var(--chrome-edge-hi)}
.card::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:var(--silver);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.card:hover::before{transform:scaleX(1)}
.card h3,.card p{margin:0}
.card .btn{margin-top:auto;align-self:flex-start}
@media (max-width:900px){.cards{grid-template-columns:1fr}}

/* ---------- About ---------- */
.about-hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:48px 80px;align-items:center}
.about-hero .lede{max-width:41.106em}
.brand-moment{position:relative;margin:0;display:grid;place-items:center;padding:clamp(8px,3vw,32px)}
.brand-moment::before{content:"";position:absolute;inset:4%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.12),transparent 66%)}
.brand-moment picture{position:relative;display:block;width:min(100%,400px)}
.brand-moment img{position:relative;width:100%;height:auto;filter:drop-shadow(0 30px 50px rgba(0,0,0,.65))}
.values{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.values li{position:relative;padding:36px 32px 8px}
.values li:first-child{padding-left:0}
.values li+li{border-left:1px solid var(--line)}
.values li::after{content:"";position:absolute;top:-1px;left:0;width:56px;height:1px;background:var(--silver-1)}
.values li+li::after{left:32px}
/* "Straight-talking" needs about 9.55em on one line: three columns from 901px give it 3vw - .5rem (20px at 901,
   22.7px at 1024, 30px from about 1267); stacked below 901px it has the full width */
.values strong{display:block;margin-bottom:14px;font:600 clamp(1.25rem,3vw - .5rem,1.875rem)/1.1 var(--head);letter-spacing:var(--track-head)}
@media (max-width:900px){.values strong{font-size:1.375rem}}
.values span{color:var(--muted)}
.faq-wrap{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.6fr);gap:24px 72px;align-items:start}
.faq-wrap .sec-head{position:sticky;top:calc(var(--hh) + 32px);margin:0}
@media (min-width:901px){.faq-wrap h2{font-size:clamp(2rem,.4rem + 2.7vw,3rem)}}   /* "Questions" (6.1em) must fit the narrow left column */
.faq-more{margin:20px 0 0;color:var(--muted);max-width:21.216em}
@media (max-width:900px){
  .about-hero{grid-template-columns:1fr}
  .brand-moment{justify-self:start;width:100%;max-width:340px}   /* a definite width, so the lazy logo's height is reserved before it loads (no layout shift) */
  .values{grid-template-columns:1fr}
  .faq-wrap{grid-template-columns:1fr}
  .faq-wrap .sec-head{position:static;margin-bottom:8px}
  .values li,.values li+li{padding:32px 0 28px;border-left:0}
  .values li+li{border-top:1px solid var(--line)}
  .values li+li::after{left:0}
}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item h3{margin:0;font-size:inherit;line-height:inherit}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:24px;width:100%;min-height:64px;padding:26px 0;border:0;background:transparent;color:var(--text);font:500 clamp(1.0625rem,.9rem + .7vw,1.375rem)/1.3 var(--head);letter-spacing:var(--track-sub);text-align:left;cursor:pointer;transition:color .25s}
.faq-q:hover{color:var(--silver-1)}
.faq-q .ic{position:relative;flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--line-3);transition:border-color .25s}
.faq-q:hover .ic{border-color:var(--text)}
.faq-q .ic::before,.faq-q .ic::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:1.5px;background:var(--text);transform:translate(-50%,-50%)}
.faq-q .ic::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .3s var(--ease)}
.faq-q[aria-expanded="true"] .ic{background:var(--text);background-image:var(--chrome-btn);border-color:#E9ECEF}
.faq-q[aria-expanded="true"] .ic::before,.faq-q[aria-expanded="true"] .ic::after{background:#0A0A0B}
.faq-q[aria-expanded="true"] .ic::after{transform:translate(-50%,-50%) rotate(0)}
.faq-a{max-width:46.41em;padding:0 0 28px;color:var(--muted)}
.faq-a p{margin:0}
.js .faq-a[hidden],.js .faq-a[data-start-closed]{display:none}   /* data-start-closed: open without JavaScript, collapsed by app.js */
html:not(.js) .faq-a[hidden]{display:block}
.js .faq-a:not([hidden]){animation:hp-fade .45s var(--ease)}
.js .faq-a:focus-within{animation:none}   /* Tab straight into a link of an answer that is still fading in: show it in full */
@keyframes hp-fade{from{opacity:0;translate:0 -6px}to{opacity:1;translate:none}}

/* ---------- Enquiry form ---------- */
.sec-form{padding-top:clamp(40px,5vw,72px)}
.enq-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:clamp(28px,4vw,56px);align-items:start}
.form-card{position:relative;padding:clamp(24px,4vw,52px);background:var(--bg2);border:1px solid var(--line);container:hpform/inline-size}
.form-card::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:var(--silver)}
.form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 24px}
.field{display:flex;flex-direction:column;gap:10px;min-width:0}
.field.full{grid-column:1/-1}
.field>label,.field legend{font:500 1rem/1.35 var(--body);letter-spacing:-.005em;color:var(--text)}
.field fieldset{min-width:0;margin:0;padding:0;border:0}
.field legend{margin-bottom:10px;padding:0}
.req{color:var(--silver-1);font-weight:600}
.opt-tag{color:var(--muted);font-weight:400}
input[type=text],input[type=email],input[type=tel],input[type=date],select,textarea{width:100%;min-height:52px;padding:13px 16px;border:1px solid var(--field-line);border-radius:2px;background:var(--field);color:var(--text);font:400 1rem/1.4 var(--body);transition:border-color .2s,background-color .2s}
input::placeholder,textarea::placeholder{color:#8B9096;opacity:1;font-family:var(--mono);font-size:.9375rem}
textarea{min-height:150px;resize:vertical}
input:hover,select:hover,textarea:hover{border-color:#9EA2A8}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #FFFFFF;outline-offset:2px;border-color:#FFFFFF;background-color:#121418}
input[type=date]{color-scheme:dark}
input[type=date]:focus-within{outline:2px solid #FFFFFF;outline-offset:2px;border-color:#FFFFFF;background-color:#121418}
select{-webkit-appearance:none;appearance:none;padding-right:46px;background-image:linear-gradient(45deg,transparent 50%,var(--text) 50%),linear-gradient(135deg,var(--text) 50%,transparent 50%);background-position:calc(100% - 23px) 23px,calc(100% - 17px) 23px;background-size:6px 6px;background-repeat:no-repeat}
select option{background:var(--bg2);color:var(--text)}
[aria-invalid="true"]{border-color:var(--danger)!important}
.err{display:flex;gap:10px;color:var(--danger);font-weight:500;font-size:1rem;line-height:1.45}
.err:empty{display:none}
.err::before{content:"";flex:none;width:6px;height:6px;margin-top:.55em;border-radius:50%;background:currentColor}
.hint{margin:0;color:var(--muted);font-size:1rem}
.consent{display:flex;align-items:flex-start;gap:14px}
.consent input{flex:none;width:24px;height:24px;margin:10px 0 0;accent-color:#F4F4F5;cursor:pointer}
.consent label{display:block;min-height:44px;padding:9px 0;font-weight:500;cursor:pointer}
.form-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.form-foot .btn{min-width:220px}
.form-msg{grid-column:1/-1;padding:20px 22px;border-radius:2px;font-weight:500}
.form-msg:empty{display:none}
.form-msg.bad{background:rgba(245,165,165,.08);border:1px solid var(--danger);color:var(--text)}
.form-msg .btn{margin-top:14px}
.thanks{position:relative;padding:clamp(28px,5vw,52px);background:var(--bg3);border:1px solid var(--line-2)}
.thanks::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:var(--silver)}
.thanks h3{font-size:clamp(1.5rem,1rem + 2vw,2.25rem);font-weight:600}
.thanks p{margin:0;font-size:1.125rem;color:var(--bright)}
.hidden-field{display:none}
.enq-aside{position:sticky;top:calc(var(--hh) + 24px);display:grid;gap:20px}
.aside-card{padding:28px;border:1px solid var(--line);background:var(--bg)}
.aside-title{margin-bottom:14px;font-size:1.25rem;line-height:1.2;letter-spacing:var(--track-sub)}
.aside-card p{color:var(--muted)}
.contact-list{list-style:none;margin:0;padding:0}
.contact-list li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;min-height:56px;padding:6px 0;border-top:1px solid var(--line)}
.contact-list a{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--text);text-decoration:none;font-weight:500}
.contact-list a:hover{text-decoration:underline}
.contact-k{font:500 .75rem/1 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--silver-2)}
/* The email address in Geist Mono (panel and footer; not the "Email it instead" button): its slashed zero keeps "housepulse0" from reading as "housepulseO" */
.contact-list a[href^="mailto:"],.foot-col a[href^="mailto:"]{font-family:var(--mono);font-size:1rem;letter-spacing:0}
.ico-ext{width:14px;height:14px;color:var(--muted)}
.next-list{list-style:none;margin:0;padding:0;counter-reset:n}
.next-list li{counter-increment:n;display:grid;grid-template-columns:34px minmax(0,1fr);gap:2px 10px;padding:14px 0;border-top:1px solid var(--line)}
.next-list li::before{content:"0" counter(n);grid-row:1/3;padding-top:4px;font:500 .8125rem/1 var(--mono);letter-spacing:.04em;color:var(--silver-2)}
.next-list strong{font:500 1rem/1.3 var(--head);letter-spacing:var(--track-sub)}
.next-list span{color:var(--muted);line-height:1.5}
@media (max-height:959px){.enq-aside{position:static}}   /* too tall to stay pinned on shorter screens (and the deck's mini player sits there) */
@media (max-width:960px){.enq-grid{grid-template-columns:1fr}.enq-aside{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.form-grid{grid-template-columns:1fr}.enq-aside{grid-template-columns:1fr}.form-foot .btn{width:100%}}
/* Two-column form: when the long "Link to music..." label (about 282px) has to wrap but its neighbour does not,
   give both labels in that row two lines so the two inputs stay level. */
@media (min-width:701px){@container hpform (max-width:600px){label[for="fAct"],label[for="fLink"]{min-height:2.7em}}}

/* ---------- Privacy policy (#/privacy) ----------
   Long-form legal page: a short summary, a contents list (it stays beside the text from 961px and marks the section
   being read) and the policy itself at a readable ~68ch measure, Unbounded section headings, Geist body at 17px. */
.pp-head h1{margin-bottom:.38em}
.pp-updated{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 26px;font:500 .875rem/1.4 var(--mono);letter-spacing:.02em;color:var(--silver-2)}
.pp-updated::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--silver-1)}
.pp-updated time{color:var(--text)}
.pp-body{padding-top:clamp(48px,6vw,88px)}
.pp-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,4vw,48px)}
.pp-summary,.pp{font-size:1.0625rem;max-width:min(45.084em,40rem);min-width:0}   /* about 75 characters a line */

.pp-summary{position:relative;padding:clamp(24px,3vw,36px);background:var(--bg2);border:1px solid var(--line)}
.pp-summary::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:var(--silver)}
.pp-summary h2{margin:0 0 18px;font-size:clamp(1.25rem,1rem + .8vw,1.625rem);line-height:1.15}
.pp-summary ul{margin:0;padding-left:1.15em;color:var(--bright);line-height:1.65}
.pp-summary li{margin:0 0 .6em;padding-left:.3em}
.pp-summary li:last-child{margin-bottom:0}
.pp-summary li::marker,.pp li::marker{color:var(--silver-3)}

.pp-toc-title{margin:0 0 14px;font:500 .8125rem/1.3 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--silver-2)}
.pp-toc ol{list-style:none;margin:0;padding:0}
.pp-toc li{margin:0}
.pp-toc a{position:relative;display:flex;align-items:baseline;gap:12px;min-height:40px;padding:9px 0 9px 18px;border-left:1px solid var(--line-2);color:var(--muted);text-decoration:none;font:500 .9375rem/1.35 var(--body);letter-spacing:-.005em;transition:color .25s ease,border-color .25s ease}
.pp-toc a::before{content:"";position:absolute;left:-1px;top:7px;bottom:7px;width:2px;background:var(--silver);transform:scaleY(0);transition:transform .35s var(--ease)}
.pp-toc a:hover{color:var(--text);border-left-color:var(--line-3)}
.pp-toc a.is-active{color:var(--text)}
.pp-toc a.is-active::before{transform:scaleY(1)}
.pp-toc a:focus-visible{outline-offset:1px}
.pp-n{flex:none;min-width:1.7em;font:500 .75rem/1 var(--mono);letter-spacing:.06em;color:var(--silver-3)}
.pp-toc a:hover .pp-n,.pp-toc a.is-active .pp-n{color:var(--silver-2)}

.pp{color:var(--bright);line-height:1.75}
.pp-sec{position:relative;padding:clamp(40px,5vw,60px) 0;border-top:1px solid var(--line)}
.pp-sec:first-child{border-top:0;padding-top:clamp(4px,1vw,12px)}
.pp-sec h2{margin:0 0 22px;font-size:clamp(1.375rem,1.05rem + 1vw,1.875rem);line-height:1.15}
.pp-num{display:flex;align-items:center;gap:14px;margin-bottom:16px;font:500 .8125rem/1 var(--mono);letter-spacing:.08em;color:var(--silver-2)}
.pp-num::after{content:"";width:28px;height:1px;background:var(--silver);transform-origin:left;transition:transform .45s var(--ease)}
.pp-sec h2:focus .pp-num{color:var(--text)}
.pp-sec h2:focus .pp-num::after{transform:scaleX(2.2)}   /* marks the section a contents link has just moved to */
.pp h3{margin:34px 0 12px;font-size:1.0625rem;font-weight:600;line-height:1.3;letter-spacing:var(--track-sub)}
.pp h2+h3{margin-top:0}
.pp p{margin:0 0 1em}
.pp-sec>:last-child{margin-bottom:0}
.pp ul{margin:0 0 1.1em;padding-left:1.15em}
.pp li{margin:0 0 .55em;padding-left:.3em}
.pp strong{color:var(--text);font-weight:600}
.pp a{color:var(--text);text-decoration-color:rgba(255,255,255,.45);text-underline-offset:.22em}
.pp a:hover{text-decoration-color:currentColor}
.pp a[href^="mailto:"],.pp-summary a[href^="mailto:"]{font-family:var(--mono);font-size:.94em;letter-spacing:0;overflow-wrap:anywhere}
.pp .pp-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 36px}
.pp .pp-fields li{margin:0;padding:7px 0 7px .3em;color:var(--muted);line-height:1.5}
.pp .pp-fields strong{font-weight:500}
@media (max-width:640px){.pp .pp-fields{grid-template-columns:1fr}}
/* Label and value rows (contacts, providers, rights, lawful bases, retention): side by side, stacked on phones */
.pp-dl,.pp .pp-rows{margin:20px 0 24px;padding:0;list-style:none;border-top:1px solid var(--line-2)}
.pp-dl>div,.pp .pp-rows>li{display:grid;grid-template-columns:minmax(0,12rem) minmax(0,1fr);gap:6px 28px;margin:0;padding:16px 0;border-bottom:1px solid var(--line)}
.pp .pp-rows>li{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.pp-dl dt,.pp .pp-what{margin:0;color:var(--text);font-weight:600;line-height:1.55}
.pp-dl dd,.pp .pp-how{margin:0;line-height:1.6}
.pp-k{display:block;margin-bottom:4px;font:500 .75rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--silver-2)}
.pp-links{display:flex;flex-wrap:wrap;gap:4px 24px;margin-top:10px}
.pp p.pp-links{margin:20px 0 0}
.pp .pp-ext{display:inline-flex;align-items:center;gap:8px;min-height:32px;font-size:.9375rem;font-weight:500}
.pp-ext .ico{width:14px;height:14px;color:var(--muted)}
@media (max-width:600px){.pp-dl>div,.pp .pp-rows>li{grid-template-columns:1fr;gap:8px}}
.pp-end{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;padding-top:32px;border-top:1px solid var(--line-2)}
.pp-end p{margin:0;color:var(--muted)}
.pp .pp-top{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--bright);text-decoration:none;font:500 .8125rem/1 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase}
.pp .pp-top:hover{color:var(--text)}
.pp-top .ico{transform:rotate(-90deg);transition:transform .3s var(--ease)}
.pp-top:hover .ico{transform:rotate(-90deg) translateX(3px)}

@media (min-width:961px){
  .pp-grid{grid-template-columns:minmax(220px,272px) minmax(0,1fr);column-gap:clamp(56px,7vw,120px);align-items:start}
  .pp-summary,.pp{grid-column:2}
  /* Sticky beside the text; scrolls itself on short screens and stays clear of the deck's mini player */
  .pp-toc{grid-column:1;grid-row:1/span 2;position:sticky;top:calc(var(--hh) + 32px);max-height:calc(100vh - var(--hh) - 56px - var(--hp-deck-space,0px));overflow-y:auto;overscroll-behavior:contain;margin:-4px;padding:4px;scrollbar-width:thin}
}
@media (max-width:960px){
  .pp-toc{max-width:40rem;padding:24px clamp(20px,4vw,32px) 14px;background:var(--bg2);border:1px solid var(--line)}
  .pp-toc ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;grid-auto-flow:column;grid-template-rows:repeat(8,auto)}
  .pp-toc a{min-height:44px;padding-top:11px;padding-bottom:11px}
}
@media (max-width:600px){.pp-toc ol{grid-template-columns:1fr;grid-auto-flow:row;grid-template-rows:none}}
@media (forced-colors:active){
  .pp-toc a::before,.pp-num::after,.pp-summary::before{forced-color-adjust:none;background:CanvasText}
}
@media print{
  html[data-route="privacy"] .hdr,html[data-route="privacy"] .site-foot,html[data-route="privacy"] #hp-deck,
  html[data-route="privacy"] .pp-toc,html[data-route="privacy"] .pp-top,.pp-head::before,.pp-head::after{display:none!important}
  html[data-route="privacy"],html[data-route="privacy"] body,html[data-route="privacy"] .pp-head,html[data-route="privacy"] .pp-summary{background:#FFFFFF!important}
  html[data-route="privacy"] [data-view="privacy"] *{color:#000000!important;-webkit-text-fill-color:#000000!important;border-color:#999999!important}
  .pp-summary,.pp{max-width:none}
}

/* ---------- Round 7 content ----------
   Home "What we do", Services (account network, promotional content, what we need, tailored plans, reporting),
   About (story, sounds, will and won't), the Enquire panel note and the form's content tick box. Icons and small
   highlights read the accent tokens (--accent-1) when they exist, and fall back to silver. */
.cards-4{list-style:none;margin:0;padding:0;grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.cards-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.cards-4{grid-template-columns:1fr}}
.card-ico,.make-ico{display:inline-grid;place-items:center;flex:none;width:48px;height:48px;border-radius:14px;color:var(--accent-1,var(--silver-1));background:rgba(255,255,255,.04);border:1px solid var(--line-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.card-ico .ico,.make-ico .ico{width:24px;height:24px}
.offer .card{padding:28px 26px 26px}
.offer h3{margin-top:8px;font-size:clamp(1.125rem,1rem + .4vw,1.3125rem);font-weight:600}
.offer p{color:var(--muted)}
/* Cards side by side line up: each card's icon, title, text and link share rows with its neighbours (subgrid), so the
   text starts at the same height even when one title is shorter. Without subgrid, titles get two lines' room. */
@media (min-width:1101px){.offer h3{min-height:2.44em;min-height:2lh}}
@supports (grid-template-rows:subgrid){@media (min-width:601px){.offer .card{display:grid;grid-row:span 4;grid-template-rows:subgrid;justify-items:start}.offer h3{min-height:0}}}
.offer .card:hover .more .ico{transform:translateX(5px)}
.sec-note{max-width:45.084em;margin:clamp(28px,3vw,40px) 0 0;color:var(--muted)}
.sec-note strong{color:var(--text);font-weight:600}

/* Services: how our account network works */
.network-note{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:28px clamp(32px,4vw,64px);margin-top:clamp(40px,5vw,64px);padding:clamp(26px,3.2vw,44px);border:1px solid var(--line);--fill:linear-gradient(180deg,#0E1013 0%,#090A0D 100%)}
.network-copy h3{margin-bottom:16px;font-size:clamp(1.25rem,1rem + .8vw,1.625rem);font-weight:600}
.network-copy p{margin:0;color:var(--bright);font-size:1.0625rem;max-width:37.128em}
.network-points{list-style:none;margin:0;padding:0}
.network-points li{padding:16px 0;border-top:1px solid var(--line)}
.network-points li:first-child{padding-top:0;border-top:0}
.network-points strong{display:block;margin-bottom:4px;font:500 1.0625rem/1.3 var(--head);letter-spacing:var(--track-sub)}
.network-points span{color:var(--muted)}
@media (max-width:860px){.network-note{grid-template-columns:1fr}}

/* Services: promotional content we can make */
.make{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.make li{position:relative;display:flex;flex-direction:column;gap:10px;padding:26px 22px 26px;border:1px solid var(--line);--fill:linear-gradient(180deg,#121418 0%,#0A0B0E 100%)}
.make-ico{margin-bottom:10px}
.make strong{font:500 1.125rem/1.25 var(--head);letter-spacing:var(--track-sub)}
.make span:not(.make-ico){color:var(--muted)}
/* Five cards: 3 + 2 on a six-column track from 701 to 1100px (the last two take half the row each), and 2 + 2 + 1 with the
   last card across the row from 461 to 700px, so no row is left with a gap. */
@media (max-width:1100px){.make{grid-template-columns:repeat(6,minmax(0,1fr))}.make li{grid-column:span 2}.make li:nth-child(n+4){grid-column:span 3}}
@media (max-width:700px){.make{grid-template-columns:repeat(2,minmax(0,1fr))}.make li,.make li:nth-child(n+4){grid-column:auto}.make li:last-child:nth-child(odd){grid-column:1/-1}}
@media (max-width:460px){.make{grid-template-columns:1fr}.make li:last-child:nth-child(odd){grid-column:auto}.make li{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:16px}.make-ico{margin:0}.make strong{flex:1 1 0}.make span:not(.make-ico){flex:1 1 100%}}

/* Services: what we need from you (light band) */
.need{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 32px}
.need li{position:relative;padding:24px 0 26px 22px;border-top:1px solid var(--line)}
.need li::before{content:"";position:absolute;left:1px;top:33px;width:8px;height:8px;transform:rotate(45deg);background:var(--text)}
.need strong{display:block;margin-bottom:8px;font:500 1.125rem/1.25 var(--head);letter-spacing:var(--track-sub)}
.need span{color:var(--muted)}
@media (max-width:960px){.need{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.need{grid-template-columns:1fr}}

/* Services: tailored to you (replaces fixed packages) */
.tailored{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px clamp(40px,6vw,104px);align-items:start}
.tailored .sec-head{margin:0}
.tailored .sec-head .lede{margin-top:22px}
.tailored .cta-row{margin-top:32px}
.fit{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 36px;counter-reset:f}
.fit li{counter-increment:f;padding:26px 0 30px;border-top:1px solid var(--line)}
.fit li::before{content:"0" counter(f);display:block;margin-bottom:14px;font:500 .8125rem/1 var(--mono);letter-spacing:.08em;color:var(--silver-2)}
.fit strong{display:block;margin-bottom:10px;font:500 1.25rem/1.25 var(--head);letter-spacing:var(--track-sub)}
.fit span{color:var(--muted)}
@media (max-width:900px){.tailored{grid-template-columns:1fr}}
@media (max-width:560px){.fit{grid-template-columns:1fr}}

/* Services: reporting and the client account */
.report-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:stretch}
.report-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:clamp(26px,3.2vw,44px);border:1px solid var(--line);--fill:var(--panel)}
.report-card .card-ico{margin-bottom:26px}
.report-card .aim-label{margin-bottom:12px}
.report-card h3{margin:0 0 14px;font-size:clamp(1.375rem,1rem + 1vw,1.875rem);font-weight:600}
.report-card>p:not(.aim-label){margin:0;color:var(--bright);font-size:1.0625rem;max-width:27.846em}
.acct-list{list-style:none;align-self:stretch;margin:6px 0 28px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
.acct-list li{padding:16px 0;border-top:1px solid var(--line)}
.acct-list strong{display:block;margin-bottom:4px;font-weight:600}
.acct-list span{color:var(--muted)}
/* Side by side, both cards list their points in one column so they come out about the same height (no empty band);
   stacked on tablets, the lists spread across the card instead. */
.report-card .acct-list{grid-template-columns:1fr}
.report-mail .acct-list{margin-top:22px}
@media (min-width:561px) and (max-width:860px){.report-mail .acct-list{grid-template-columns:repeat(3,minmax(0,1fr))}.report-acct .acct-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.report-acct .btn{margin-top:auto}
.report-wave{height:40px;margin-top:auto;padding-top:28px;box-sizing:content-box}
@media (max-width:860px){.report-grid{grid-template-columns:1fr}}
@media (max-width:560px){.acct-list{grid-template-columns:1fr}}

/* About: our story */
.story{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:24px clamp(40px,6vw,104px);align-items:start}
.story .sec-head{margin:0}
.story-copy p{max-width:37.128em;margin:0 0 1.1em;color:var(--bright);font-size:clamp(1.0625rem,.98rem + .35vw,1.25rem);line-height:1.65}
.story-copy p:first-child{color:var(--text);font-size:clamp(1.25rem,1rem + .9vw,1.75rem);font-weight:500;line-height:1.45;letter-spacing:-.012em;max-width:37.688em}
.story-copy p:last-child{margin-bottom:0}
@media (max-width:900px){.story{grid-template-columns:1fr}}

/* About: the sounds we know best */
.genres{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.genres li{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:14px;padding:clamp(80px,7vw,112px) clamp(26px,3vw,40px) clamp(28px,3vw,40px);border:1px solid var(--line);background:linear-gradient(180deg,#101216 0%,#08090B 100%)}
.genres li::before{content:"";position:absolute;z-index:-1;width:340px;aspect-ratio:1;right:-150px;top:-150px;border-radius:50%;background:repeating-radial-gradient(circle at center,rgba(255,255,255,.07) 0 1px,transparent 1px 6px);-webkit-mask-image:radial-gradient(circle,#000 20%,transparent 70%);mask-image:radial-gradient(circle,#000 20%,transparent 70%)}
.genres li::after{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(60% 50% at 85% 10%,var(--accent-glow,rgba(var(--studio),.08)),transparent 70%);opacity:.7}
.g-name{font:600 clamp(2rem,1.2rem + 2.2vw,3.25rem)/1 var(--head);letter-spacing:var(--track-display);color:var(--text)}
.g-text{max-width:23.868em;color:var(--muted)}
@media (max-width:860px){.genres{grid-template-columns:1fr}.genres li{padding-top:64px}}

/* About: what we will and won't do (light band) */
.ww{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.ww-col{position:relative;padding:clamp(26px,3.2vw,44px);border:1px solid var(--line);--fill:var(--panel)}
.ww-col h3{margin:0 0 18px;font-size:clamp(1.375rem,1rem + 1vw,1.875rem);font-weight:600}
.ww-col ul{list-style:none;margin:0;padding:0}
.ww-col li{position:relative;padding:14px 0 14px 40px;border-top:1px solid var(--line);color:var(--bright);line-height:1.5}
.ww-col li::before{content:"";position:absolute;left:0;top:12px;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--text);background:transparent}
.ww-col li::after{content:"";position:absolute;left:6px;top:18px;width:14px;height:14px;background:var(--text);-webkit-mask:var(--ww-ico) center/contain no-repeat;mask:var(--ww-ico) center/contain no-repeat}
.ww-yes{--ww-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.ww-no{--ww-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E")}
.ww-yes li::before{background:var(--text)}
.ww-yes li::after{background:var(--bg)}
@media (max-width:760px){.ww{grid-template-columns:1fr}}

/* Enquire: note under "What happens next", and the optional "content made" tick box */
.aside-note{margin:16px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:.9375rem;line-height:1.55}
.aside-card .aside-note{color:var(--muted)}
.aside-note a{color:var(--text);font-weight:500}
.check-row{margin:-4px 0 4px}

@media (forced-colors:none){
  .network-note,.make li,.report-card,.ww-col{border-color:transparent;background:var(--fill,var(--panel)) padding-box,var(--edge,var(--chrome-edge)) border-box var(--edge-base,#0B0C0F)}
}
@media (forced-colors:active){
  .need li::before,.ww-col li::after{forced-color-adjust:none;background:CanvasText}
  .ww-col li::before{forced-color-adjust:none;border-color:CanvasText;background:Canvas}
  .ww-yes li::before{background:CanvasText}
  .ww-yes li::after{background:Canvas}
  .genres li::before,.genres li::after{display:none}
}

/* ---------- Footer ---------- */
.site-foot{position:relative;padding:clamp(64px,8vw,104px) 0 40px;background:radial-gradient(50% 90% at 50% 0%,rgba(var(--studio),.05),transparent 72%),var(--grain),var(--bg-deep);border-top:1px solid var(--line)}
.site-foot::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background-image:var(--chrome-rule);opacity:.45;pointer-events:none}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr) minmax(0,1.1fr) minmax(0,1fr);gap:40px 48px;align-items:start}
.foot-logo-link{display:inline-block}
.foot-logo{width:132px;height:auto}
.foot-brand p{max-width:22.542em;margin:22px 0 0;color:var(--muted)}
.foot-h{margin:0 0 18px;font:500 .8125rem/1.3 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--silver-2)}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.foot-col li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-height:44px}
.foot-col a{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--bright);text-decoration:none}
.foot-col a:hover{color:var(--text);text-decoration:underline}
.foot-cta{display:flex;flex-direction:column;align-items:flex-start}
.foot-cta .text-btn{margin-top:18px}
.foot-wave{height:40px;margin-top:clamp(48px,6vw,72px)}
.fine{margin:24px 0 0;color:var(--muted);font:400 .875rem/1.5 var(--mono);letter-spacing:.02em}
/* Room for the DJ deck's mini player: deck.js keeps --hp-deck-space equal to the dock's height (0 when hidden),
   so the footer itself grows and its own background fills the space. The deck's separate spacer is not needed. */
.site-foot{padding-bottom:calc(40px + var(--hp-deck-space,0px))}
body>.hp-deck-spacer{display:none}
@media (max-width:1080px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}

/* ---------- Chrome finish (round 5 colours) ----------
   Feature panels get a polished-chrome hairline instead of a flat border: the border is transparent and a border-box
   gradient shows through it under an opaque padding-box fill (--fill). In forced colours the real border comes back. */
.aim{--fill:var(--panel)}
.card{--fill:linear-gradient(180deg,#121418 0%,#0A0B0E 100%)}
.summary,.thanks{--fill:linear-gradient(180deg,#1A1D22 0%,#121418 100%)}
.form-card{--fill:linear-gradient(180deg,#121418 0%,#0D0F12 100%)}
.aside-card{--fill:linear-gradient(180deg,#0E1013 0%,#090A0D 100%)}
.platform-out{--fill:linear-gradient(180deg,#0B0C0F 0%,#07080A 100%)}
.pp-summary{--fill:var(--panel)}
@media (forced-colors:none){
  .card,.aim,.summary,.form-card,.thanks,.aside-card,.platform-out,.pp-summary{border-color:transparent;background:var(--fill,var(--panel)) padding-box,var(--edge,var(--chrome-edge)) border-box var(--edge-base,#0B0C0F)}
  .summary,.thanks,.form-card{box-shadow:0 30px 60px -36px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.25)}
}
/* Comparison: the HousePulse column gets one continuous chrome frame (the cells' own side borders hide behind it) and a
   soft light above it. The frame sits over the HousePulse column: 61% across from 761px (26% + 35% columns), and
   1/2.1 of the width on phones (1fr + 1.1fr grid). Without JavaScript, or in forced colours, the cell borders show. */
@media (forced-colors:none){@supports ((mask-composite:exclude) or (-webkit-mask-composite:xor)){
  .js .cmp-wrap{position:relative;isolation:isolate}
  .js .cmp-wrap::after{content:"";position:absolute;top:0;bottom:0;left:61%;right:0;border-radius:18px;padding:1px;background:var(--chrome-frame);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none}
  .js .cmp-wrap::before{content:"";position:absolute;z-index:-1;left:calc(61% - 140px);right:0;top:-120px;height:420px;background:radial-gradient(50% 42% at 58% 42%,rgba(var(--studio),.075),rgba(var(--studio),.025) 60%,transparent 100%);pointer-events:none}
  .js .cmp [data-col="hp"]{border-left-color:transparent;border-right-color:transparent}
  .js .cmp thead th[data-col="hp"]{border-top-color:transparent}
  .js .cmp tbody tr:last-child td[data-col="hp"]{border-bottom-color:transparent}
  @media (max-width:760px){
    .js .cmp-wrap::after{left:calc(100% / 2.1);border-radius:14px}
    .js .cmp-wrap::before{left:calc(100% / 2.1 - 40px);top:-60px;height:260px}
    .js .cmp tbody tr::after{border-left-color:transparent;border-right-color:transparent}
  }
}}

/* ---------- Light sections (.sec-light) ----------
   Pale silver bands that break up the dark page: Home "How it works" and the privacy policy text. The colour tokens are
   redefined inside, so every component that uses them turns dark-on-light; the few hard-coded colours get light
   versions below, including a dark focus ring. Contrast on #E6E8EB (the darkest point): text 15.8:1, body copy 12:1,
   muted 6.7:1, labels 6.3:1, small numbers 5.2:1, gunmetal step numbers 4.3:1 at their lightest (large text). */
.sec-light{
  --text:#0C0D10; --bright:#25282D; --muted:#4A4F57; --nav:#25282D;
  --silver-1:#15171A; --silver-2:#4D535B; --silver-3:#5A6068;
  --line:rgba(14,17,22,.13); --line-2:rgba(14,17,22,.22); --line-3:rgba(14,17,22,.42);
  --bg:#FFFFFF; --bg2:#FAFBFC; --bg3:#FFFFFF; --bg4:#F2F3F5;
  --silver:var(--gunmetal); --chrome:var(--gunmetal-text);
  --chrome-edge:linear-gradient(150deg,rgba(12,14,18,.36) 0%,rgba(12,14,18,.12) 30%,rgba(12,14,18,.08) 55%,rgba(12,14,18,.2) 80%,rgba(12,14,18,.34) 100%);
  --chrome-edge-hi:linear-gradient(150deg,rgba(12,14,18,.6) 0%,rgba(12,14,18,.22) 30%,rgba(12,14,18,.16) 55%,rgba(12,14,18,.32) 80%,rgba(12,14,18,.55) 100%);
  --edge-base:#F3F4F6;
  --panel:linear-gradient(180deg,#FFFFFF 0%,#F8F9FA 100%);
  --field:#FFFFFF; --field-line:#6A7079; --danger:#A3262A;
  color-scheme:light;color:var(--text);
  background:radial-gradient(70% 460px at 50% 0%,rgba(255,255,255,.95),rgba(255,255,255,0) 100%),var(--grain-dark),linear-gradient(180deg,var(--light-1) 0%,var(--light-2) 100%);
  background-color:var(--light-2);   /* solid fallback under the gradient (and what contrast checkers read) */
  border-top:1px solid #FFFFFF;border-bottom:1px solid #D3D7DC
}
.sec-light ::selection{background:#0C0D10;color:#F4F5F7}
.sec-light :focus-visible,.sec-light .opt-in input:focus-visible+label{outline-color:#0C0D10}
.sec-light .more:focus-visible::after{outline-color:#0C0D10}
.sec-light a,.sec-light .pp a{text-decoration-color:rgba(12,13,16,.42)}
.sec-light a:hover,.sec-light .pp a:hover{text-decoration-color:currentColor}
.sec-light .text-btn{text-decoration-color:rgba(12,13,16,.35)}
.sec-light .ph{color:#15171A;-webkit-text-fill-color:#15171A;background:rgba(12,13,16,.045);border-color:rgba(12,13,16,.45)}
.sec-light .silver{color:var(--text);background-image:var(--gunmetal-text);background-size:100% 100%;animation:none}
.sec-light .process li::before{color:#3A3F46}
.sec-light .wave .w-base{stroke:rgba(12,13,16,.22)}
.sec-light .wave .w-pulse{stroke:#0C0D10}
/* Buttons and selected states flip to graphite with white text (white on #30353B and darker: 12:1 or more) */
.sec-light .btn{border-color:#0C0D10;background:#15171A;background-image:linear-gradient(180deg,#30353B 0%,#16181C 52%,#0C0D10 100%);color:#FFFFFF;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 10px 24px -14px rgba(0,0,0,.55)}
.sec-light .btn:hover{border-color:#0C0D10;background-image:linear-gradient(180deg,#3E434A 0%,#1D2025 52%,#121418 100%);color:#FFFFFF}
.sec-light .btn::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent)}
.sec-light .btn-ghost{background:rgba(255,255,255,.55);background-image:none;color:var(--text);border-color:rgba(12,13,16,.5);box-shadow:none}
.sec-light .btn-ghost:hover{background:#FFFFFF;background-image:none;border-color:#0C0D10;color:var(--text)}
.sec-light .chip[aria-pressed="true"],.sec-light .opt-in input:checked+label,.sec-light .seg-opt[aria-checked="true"]{background:#0C0D10;background-image:linear-gradient(180deg,#30353B 0%,#0C0D10 100%);border-color:#0C0D10;color:#FFFFFF;box-shadow:none}
.sec-light .opt-in.box input:checked+label::before{background:#FFFFFF;box-shadow:inset 0 0 0 3px #0C0D10}
.sec-light .seg{background:rgba(255,255,255,.7);box-shadow:inset 0 1px 2px rgba(12,13,16,.08)}
.sec-light .faq-q[aria-expanded="true"] .ic{background:#0C0D10;background-image:none;border-color:#0C0D10}
.sec-light .faq-q[aria-expanded="true"] .ic::before,.sec-light .faq-q[aria-expanded="true"] .ic::after{background:#FFFFFF}
.sec-light .switch .track{background-image:linear-gradient(180deg,#E6E8EB,#FFFFFF);box-shadow:inset 0 2px 4px rgba(12,13,16,.15)}
.sec-light .switch .knob{background:var(--gunmetal);box-shadow:0 2px 6px rgba(12,13,16,.35)}
.sec-light input::placeholder,.sec-light textarea::placeholder{color:#5A6068}
.sec-light input:hover,.sec-light select:hover,.sec-light textarea:hover{border-color:#3A3F46}
.sec-light input:focus-visible,.sec-light select:focus-visible,.sec-light textarea:focus-visible,.sec-light input[type=date]:focus-within{outline-color:#0C0D10;border-color:#0C0D10;background-color:#FFFFFF}
.sec-light input[type=date]{color-scheme:light}
.sec-light select option{background:#FFFFFF;color:#0C0D10}
/* Forced colours: Chromium keeps a background-image list that contains a url() (the grain), which would leave the
   light and dark bands painted under system-coloured text. Drop those layers so the system background shows. */
@media (forced-colors:active){
  body,.sec-alt,.sec-light,.cta-band,.site-foot,.nav,.hero-bg::after,.page-head::after{background-image:none!important}
  .hdr.is-scrolled,.hdr.menu-open{background-color:Canvas;background-image:none}
  .sec-light{border-color:CanvasText}
}

/* ---------- Responsive layout ---------- */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr}
  .hero-side{max-width:620px}
}
@media (max-width:860px){
  .sec-head,.deck-intro{grid-template-columns:1fr}
  .teaser{grid-template-columns:1fr}
  .teaser li,.teaser li:first-child{min-height:0;padding:32px 0 30px;border-left:0}
  .teaser li+li{border-top:1px solid var(--line)}
  .teaser h3{margin-top:28px}
  .teaser li:hover{background:transparent}
}
@media (max-width:420px){
  .btn{padding:0 22px}
  .cta-row .btn{flex:1 1 100%}
  .platform-out,.network-note,.aim,.summary{padding:24px 22px}
  .summary .btn{width:100%;padding:0 14px}
  .eyebrow{gap:10px;font-size:.75rem;letter-spacing:.1em}
  .eyebrow::before,.eyebrow-center::after{width:20px}
  .switch{gap:10px}
}
@media (max-width:374px){.switch{font-size:.9375rem}}   /* keeps "One account / HousePulse network" on one row at 360px */

@media (max-width:349px){.summary .btn .ico{display:none}}

/* ---------- Without JavaScript ----------
   Widgets that only work with JavaScript are hidden; the static content and <noscript> notes carry the same
   information. On phones the menu links show in the header instead of behind a Menu button. */
html:not(.js) .menu-btn,html:not(.js) .tabs,html:not(.js) #netWrap,html:not(.js) #platformArea,
html:not(.js) .builder-grid,html:not(.js) .cmp-pick{display:none}
@media (max-width:860px){
  html:not(.js) .hdr{position:relative}
  html:not(.js) .hdr-in{flex-wrap:wrap;row-gap:0;padding-top:12px}
  html:not(.js) .nav{position:static;display:flex;flex:1 1 100%;flex-direction:row;flex-wrap:wrap;align-items:center;gap:0 24px;padding:0 0 18px;background:none;border:0;box-shadow:none;max-height:none;overflow:visible}
  html:not(.js) .nav-pages{flex-direction:row;flex-wrap:wrap;gap:0 22px}
  html:not(.js) .nav-pages a{padding:0;border-bottom:0;font:500 1rem/1 var(--body);letter-spacing:0}
  html:not(.js) .nav-pages a::after{display:none}
  html:not(.js) .nav-social{padding:0;gap:22px}
  html:not(.js) .nav-cta{width:auto;min-height:44px;margin-top:6px}
}

/* ---------- Forced colours (Windows High Contrast) ----------
   Selected and checked states use system colours, because the browser removes the custom backgrounds. */
@media (forced-colors:active){
  .opt-in input:checked+label,.chip[aria-pressed="true"],.seg-opt[aria-checked="true"]{forced-color-adjust:none;background:SelectedItem;color:SelectedItemText;border-color:SelectedItem}
  .cmp thead th.pick::after{forced-color-adjust:none;background:CanvasText}
  .cmp thead th[data-col="hp"],.cmp tbody tr:not(:last-child) td[data-col="hp"]{border-bottom:1px solid CanvasText}   /* inset row rules are gradients, which forced colours removes */
  .opt-in.box input:checked+label::before{background:SelectedItemText;border-color:SelectedItemText;box-shadow:none}
  .dots i{forced-color-adjust:none;background:ButtonText}
  .chip[aria-pressed="true"] .dots i{background:SelectedItemText}
  .tab::after{forced-color-adjust:none;background:CanvasText}
  .switch .track{forced-color-adjust:none;background:Canvas;border-color:CanvasText}
  .switch .knob{forced-color-adjust:none;background:CanvasText;box-shadow:none}
  .switch[aria-checked="true"] .track{background:SelectedItem;border-color:SelectedItem}
  .switch[aria-checked="true"] .knob{background:SelectedItemText}
  .faq-q .ic{forced-color-adjust:none;border-color:ButtonText}
  .faq-q .ic::before,.faq-q .ic::after{background:ButtonText}
  .faq-q[aria-expanded="true"] .ic{background:ButtonText}
  .faq-q[aria-expanded="true"] .ic::before,.faq-q[aria-expanded="true"] .ic::after{background:ButtonFace}
  .process li::before{-webkit-text-fill-color:CanvasText;color:CanvasText;background:none}
  .eyebrow::before,.eyebrow-center::after,.process li::after,.values li::after{forced-color-adjust:none;background:CanvasText}
  :focus-visible,.opt-in input:focus-visible+label{outline-color:Highlight!important}
}
/* The white logo images would vanish on a light high-contrast background */
@media (forced-colors:active) and (prefers-color-scheme:light){.brand img,.foot-logo,.th-mark{filter:invert(1)}}

/* ---------- Scroll reveal ----------
   Only hidden when JS is running. Reduced motion shows everything at once. Stagger containers get .is-in-s as well as
   .is-in, and their child rules key on .is-in-s: a rule like ".is-in>*" would make every element that gains .is-in
   (the deck stage among them) restyle its whole subtree. */
.js [data-reveal]{opacity:0}
.js [data-reveal].is-in{animation:hp-rise .7s var(--ease) both;animation-delay:var(--d,0ms)}
.js [data-reveal-stagger]>*{opacity:0}
.js [data-reveal-stagger].is-in-s>*{animation:hp-rise .65s var(--ease) both;animation-delay:calc(var(--i,0) * 90ms)}
.js .wave[data-reveal]{opacity:1;clip-path:inset(0 100% 0 0)}
.js .wave[data-reveal].is-in{animation:hp-draw 1.8s cubic-bezier(.6,0,.2,1) both}
@keyframes hp-rise{from{opacity:0;translate:0 20px}to{opacity:1;translate:none}}
@keyframes hp-draw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
/* Whatever holds a control that receives keyboard focus shows at once (app.js adds .reveal-now) */
.js [data-reveal].reveal-now,.js [data-reveal-stagger].reveal-now>*{animation:none!important;opacity:1!important;transform:none;clip-path:none}

/* =====================================================================
   Motion (round 5)
   A noticeable but quiet layer on top of the scroll reveals. Rules: only transform, opacity and clip-path animate;
   nothing moves layout; app.js builds the moving parts (none of them exist without JavaScript) and runs per-frame work
   in requestAnimationFrame; pointer effects need a mouse or trackpad; prefers-reduced-motion switches all of it off
   (end of this section). Everything is tuned to read on both the dark and the light sections.
   ===================================================================== */

/* ---- Scroll progress: a thin chrome line along the very top of the window (app.js scales it) ---- */
.scroll-prog{position:fixed;top:0;left:0;right:0;z-index:61;height:2px;pointer-events:none;transform:scaleX(0);transform-origin:0 50%;background:#E9ECEF;background-image:linear-gradient(90deg,rgba(140,146,154,.25) 0%,#BFC5CC 60%,#FFFFFF 100%);will-change:transform}

/* ---- Page transitions: the old page fades out (170ms), the new one fades and rises in (app.js) ---- */
@keyframes hp-view-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes hp-view-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.js .view-leave{animation:hp-view-out .17s cubic-bezier(.4,0,1,1) both;pointer-events:none}
.js .view-enter{animation:hp-view-in .42s cubic-bezier(.2,.7,.2,1) both}

/* ---- Hero intro: the headline lines rise out of a mask one after another, then the lede, the buttons and
   "Try the decks" follow. Everything has landed by about 800ms. ---- */
@keyframes hp-line{from{opacity:1;transform:translateY(118%);clip-path:inset(0 -12% 96% -12%)}to{opacity:1;transform:none;clip-path:inset(-20% -12% -26% -12%)}}
.js .hero-title[data-reveal-stagger].is-in-s>*{animation:hp-line .56s cubic-bezier(.2,.75,.15,1) both;animation-delay:calc(20ms + var(--i,0) * 70ms)}
.js .hero-side[data-reveal-stagger].is-in-s>*{animation-duration:.42s;animation-delay:calc(200ms + var(--i,0) * 70ms)}
.js .hero .eyebrow[data-reveal].is-in{animation-duration:.5s}
.js .hero .eyebrow[data-reveal].is-in::before{animation-duration:.6s;animation-delay:0s}
.js .hero-wave[data-reveal].is-in{animation-delay:.2s}
/* A soft studio light drifts after the pointer (app.js moves it; mouse and trackpad only) */
.hero-light{position:absolute;left:-360px;top:-360px;width:720px;height:720px;border-radius:50%;pointer-events:none;opacity:0;background:radial-gradient(closest-side,rgba(var(--studio),.15),rgba(var(--studio),.055) 45%,rgba(var(--studio),0) 100%);transition:opacity .8s var(--ease);will-change:transform}
.hero.is-lit .hero-light{opacity:1}
/* Music playing on the decks: a second, faster pulse runs along the hero waveform */
.wave .w-live{fill:none;stroke:#FFFFFF;stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-dasharray:120 560;stroke-dashoffset:680;opacity:0;transition:opacity .6s ease}
.hp-music-on .wave .w-live{opacity:.95;animation:hp-travel-live 1.7s linear infinite}
.hp-music-on .hero-wave .w-pulse{opacity:.35;transition:opacity .6s ease}
@keyframes hp-travel-live{to{stroke-dashoffset:0}}
.wave.is-off use{animation-play-state:paused}   /* app.js: off screen, the pulse rests */

/* ---- Chrome accent words: a soft highlight sweeps across every 7.5s while the word is on screen. The window
   (.sheen) slides right while the white copy inside it slides left by the same amount, so the copy stays exactly over
   the word; both move by transform only and the window fades in and out, so it never leaves the word's own box.
   The copy is drawn from data-t and hidden from assistive technology. ---- */
.silver.has-sheen{position:relative;display:inline-block}
.hero-title>.silver.has-sheen{display:block}
/* The chrome is painted over the line box, which is shorter than the glyphs: extend the box under the descenders
   (y, p, g) and fill that strip with the chrome's floor colour so their tails are not cut off */
.hero-title .silver,.silver.has-sheen{padding-bottom:.16em;margin-bottom:-.16em;background-image:var(--chrome),linear-gradient(#C5CBD2,#C5CBD2);background-size:100% calc(100% - .16em),100% 100%}
.sheen{position:absolute;top:0;bottom:0;left:0;width:25%;overflow:hidden;pointer-events:none;color:#FFFFFF;-webkit-text-fill-color:#FFFFFF;opacity:0;-webkit-mask-image:linear-gradient(100deg,transparent 6%,#000 44%,#000 56%,transparent 94%);mask-image:linear-gradient(100deg,transparent 6%,#000 44%,#000 56%,transparent 94%);animation:hp-sheen-win 7.5s cubic-bezier(.45,0,.25,1) 1.1s infinite paused}
.sheen>span{position:absolute;top:0;left:0;width:400%;height:100%;white-space:nowrap;text-align:left;animation:hp-sheen-txt 7.5s cubic-bezier(.45,0,.25,1) 1.1s infinite paused}
.sheen>span::before{content:attr(data-t);content:attr(data-t) / ""}
.sheen-on>.sheen,.sheen-on>.sheen>span{animation-play-state:running}
@keyframes hp-sheen-win{0%{transform:none;opacity:0}5%,16%{opacity:.92}22%,100%{transform:translateX(300%);opacity:0}}
@keyframes hp-sheen-txt{0%{transform:none}22%,100%{transform:translateX(-75%)}}

/* ---- Headings: section and page headings rise in word by word (each word out of its own mask), and eyebrow
   rules draw across as their section enters ---- */
@keyframes hp-word{from{transform:translateY(118%);clip-path:inset(0 -10% 96% -10%)}to{transform:none;clip-path:inset(-20% -10% -26% -10%)}}
.js .split[data-reveal].is-in{animation:none;opacity:1}
/* The words stay inline-block after they land (round 7): switching back to inline when .splitting comes off moved the
   chrome accent word by a pixel or two, which Chromium counted as a layout shift on every page head. */
.js .split .w{display:inline-block}
.js .split.splitting .w{animation:hp-word .64s cubic-bezier(.2,.75,.15,1) both;animation-delay:calc(var(--w,0) * 45ms)}
@keyframes hp-rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* The rules start undrawn only when they will animate; with reduced motion they are simply there */
@media (prefers-reduced-motion:no-preference){
  .js .eyebrow[data-reveal]::before,.js .eyebrow[data-reveal]::after,.js [data-reveal] .eyebrow::before{transform:scaleX(0);transform-origin:0 50%}
  .js .eyebrow-center[data-reveal]::before{transform-origin:100% 50%}
  .js .eyebrow[data-reveal].is-in::before,.js .eyebrow[data-reveal].is-in::after,.js [data-reveal].is-in .eyebrow::before{animation:hp-rule .9s cubic-bezier(.65,0,.35,1) .1s both}
}

/* ---- Home ticker. Static by default (no JavaScript, reduced motion): a centred, wrapping list spaced by its gap, with
   no separators (they would dangle at the line ends). With motion it scrolls slowly in one line with diamond
   separators, clipped inside its band with soft edges, and pauses on hover, on focus and with its button.
   Three tones: client types in white, genres in chrome, platforms in muted silver. ---- */
.ticker{--tk-gap:clamp(18px,2.4vw,36px);position:relative;isolation:isolate;padding:clamp(20px,2.6vw,32px) 0;background:var(--bg2);background-image:linear-gradient(180deg,#0A0B0E 0%,#101216 50%,#0A0B0E 100%);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ticker::before,.ticker::after{content:"";position:absolute;left:0;right:0;height:1px;background-image:var(--chrome-rule);opacity:.4;pointer-events:none}
.ticker::before{top:-1px}
.ticker::after{bottom:-1px}
.ticker-viewport{overflow:hidden}
.ticker-list{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px calc(var(--tk-gap) * 1.5);max-width:calc(var(--max) + var(--gut) * 2);margin:0 auto;padding:0 var(--gut);list-style:none}
.ticker-list li{display:inline-flex;align-items:center;gap:var(--tk-gap);font:500 clamp(1.25rem,.85rem + 1.5vw,2.25rem)/1.3 var(--head);letter-spacing:var(--track-head);white-space:nowrap;color:var(--text)}
.ticker-list li::after{content:"";display:none;flex:none;width:.22em;height:.22em;transform:rotate(45deg);background:#A2A8B0;background-image:linear-gradient(135deg,#FFFFFF 0%,#8A9199 55%,#E4E8EC 100%)}
.ticker-list .tk-b{color:var(--silver-1);background-image:var(--chrome);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){.ticker-list .tk-b{background:none;-webkit-text-fill-color:currentColor}}
.ticker-list .tk-c{color:var(--muted)}
.ticker-clone,.ticker-btn{display:none}
@keyframes hp-ticker{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:no-preference){
  .ticker.is-built .ticker-viewport{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 86%,transparent 97%);mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 86%,transparent 97%)}
  .ticker.is-built .ticker-track{display:flex;width:-moz-max-content;width:max-content;animation:hp-ticker 84s linear infinite paused}
  .ticker.is-built .ticker-list{flex-wrap:nowrap;justify-content:flex-start;max-width:none;margin:0;padding:0;gap:0}
  .ticker.is-built .ticker-list li{padding-right:var(--tk-gap)}
  .ticker.is-built .ticker-list li::after{display:block}
  .ticker.is-built .ticker-clone{display:flex}
  .ticker.is-built .ticker-btn{display:grid}
  .ticker.is-live .ticker-track{animation-play-state:running}
  .ticker.is-paused .ticker-track,.ticker:focus-within .ticker-track{animation-play-state:paused}
}
@media (prefers-reduced-motion:no-preference) and (max-width:760px){.ticker.is-built .ticker-track{animation-duration:56s}}
@media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){.ticker:hover .ticker-track{animation-play-state:paused}}
.ticker-btn{position:absolute;top:50%;right:max(4px,calc(var(--gut) - 30px));z-index:2;place-items:center;width:44px;height:44px;margin-top:-22px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--text);cursor:pointer;-webkit-tap-highlight-color:transparent}
.ticker-btn::before{content:"";position:absolute;inset:4px;border-radius:50%;border:1px solid rgba(220,228,238,.42);background:rgba(9,10,13,.9);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);transition:border-color .25s ease}
.ticker-btn:hover::before{border-color:var(--text)}
.ticker-btn:focus-visible{outline-offset:0}
.ticker-ico{position:relative;box-sizing:content-box;width:3px;height:12px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.ticker-btn[aria-pressed="true"] .ticker-ico{width:0;height:0;margin-left:3px;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor}

/* ---- Cards: a spotlight and a silver edge light follow the pointer (app.js moves them with a transform), standalone cards lift
   a little, and divided cells lift their contents. Mouse and trackpad only. ---- */
.has-glow{position:relative;isolation:isolate}
.glow{--glow-fill:rgba(var(--studio),.1);--glow-edge:rgba(255,255,255,1);position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .45s var(--ease)}
.is-lit>.glow{opacity:1}
.glow-fill,.glow-edge{position:absolute;overflow:hidden;border-radius:inherit}
.glow-fill{inset:0}
.glow-edge{inset:-1px;padding:1px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.glow i{position:absolute;left:0;top:0;border-radius:50%;transform:translate(-999px,-999px)}
.is-lit>.glow i{will-change:transform}
.glow-fill i{width:560px;height:560px;margin:-280px 0 0 -280px;background:radial-gradient(closest-side,var(--glow-fill),rgba(var(--studio),0))}
.glow-edge i{width:260px;height:260px;margin:-130px 0 0 -130px;background:radial-gradient(closest-side,var(--glow-edge),rgba(255,255,255,0))}
/* Divided cells (home teaser, steps, values): the edge light runs along the divider above them */
.teaser .glow-edge,.process .glow-edge,.values .glow-edge{inset:-1px 0 auto;height:1px;padding:0;-webkit-mask:none;mask:none}
.card.has-glow:hover{--edge:var(--chrome-edge)}   /* the pointer's edge light is the highlight, not the whole frame */
.sec-light .glow{--glow-fill:rgba(255,255,255,.9);--glow-edge:rgba(12,14,18,.75)}
.sec-light .glow-edge i{background:radial-gradient(closest-side,var(--glow-edge),rgba(12,14,18,0))}
.sec-light .glow-fill i{background:radial-gradient(closest-side,var(--glow-fill),rgba(255,255,255,0))}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .card.has-glow,.aside-card.has-glow,.report-card.has-glow,.ww-col.has-glow{transition:transform .55s var(--ease),border-color .35s ease,background-color .35s ease}
  .card.has-glow:hover,.aside-card.has-glow:hover,.report-card.has-glow:hover,.ww-col.has-glow:hover{transform:translateY(-4px)}
  .card.has-glow::after,.aside-card.has-glow::after,.report-card.has-glow::after,.ww-col.has-glow::after{content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit;box-shadow:0 30px 50px -28px rgba(0,0,0,.95),0 0 48px -22px rgba(var(--studio),.22);opacity:0;transition:opacity .55s var(--ease);pointer-events:none}
  .card.has-glow:hover::after,.aside-card.has-glow:hover::after,.report-card.has-glow:hover::after,.ww-col.has-glow:hover::after{opacity:1}
  .teaser .has-glow>.num,.teaser .has-glow>h3,.teaser .has-glow>p,.process .has-glow::before,.process .has-glow>h3,.process .has-glow>p,.values .has-glow>strong,.values .has-glow>span:not(.glow){transition:transform .55s var(--ease)}
  .teaser .has-glow:hover>.num,.teaser .has-glow:hover>h3,.teaser .has-glow:hover>p,.process .has-glow:hover::before,.process .has-glow:hover>h3,.process .has-glow:hover>p,.values .has-glow:hover>strong,.values .has-glow:hover>span:not(.glow){transform:translateY(-4px)}
}

/* ---- "How it works": a line draws across the steps as you scroll through them (app.js scales each step's
   segment in turn, 0 to 1) and a node lights where each step begins. Without JS or with reduced motion the short
   static accent above each step stays. ---- */
.pseg,.pnode{display:none}
.js .process[data-reveal-stagger].is-in-s>*{animation-name:cmp-fade}   /* steps fade in without moving, so the drawn line stays level */
@media (prefers-reduced-motion:no-preference){
  .js .process.is-drawn li::after{display:none}
  .js .pseg{display:block;position:absolute;left:0;right:0;top:-1.5px;height:2px;background:var(--silver-1);background-image:var(--silver);transform-origin:0 50%;transform:scaleX(0)}
  .js .process li+li .pseg{left:-1px}
  .js .pnode{display:block;position:absolute;top:-5px;left:-5px;width:9px;height:9px;border-radius:50%;background:var(--silver-1);box-shadow:0 0 0 3px var(--light-1);transform:scale(0)}
  .js .process li:first-child .pnode{left:-4px}
}

/* ---- Comparison: a soft light passes once down the HousePulse column as the table comes into view ---- */
.cmp-sweep{display:none}
@keyframes hp-col-sweep{from{transform:translateY(-105%) skewY(-6deg)}to{transform:translateY(345%) skewY(-6deg)}}
@media (prefers-reduced-motion:no-preference) and (forced-colors:none){
  .js .cmp-wrap{position:relative}
  .js .cmp-sweep{display:block;position:absolute;top:0;bottom:0;left:61%;right:0;z-index:1;overflow:hidden;border-radius:18px;pointer-events:none}
  .js .cmp-sweep[data-reveal],.js .cmp-sweep[data-reveal].is-in{opacity:1;animation:none}
  .js .cmp-sweep i{position:absolute;left:-30%;right:-30%;top:0;height:42%;background:linear-gradient(180deg,rgba(var(--studio),0) 0%,rgba(var(--studio),.06) 36%,rgba(255,255,255,.15) 50%,rgba(var(--studio),.06) 64%,rgba(var(--studio),0) 100%);transform:translateY(-105%) skewY(-6deg)}
  .js .cmp-sweep.is-in i{animation:hp-col-sweep 1.6s cubic-bezier(.45,.05,.3,1) .45s both}
}
@media (prefers-reduced-motion:no-preference) and (forced-colors:none) and (max-width:760px){.js .cmp-sweep{left:calc(100% / 2.1);border-radius:14px}}

/* ---- Forced colours and print: the decorative layers step aside ---- */
@media (forced-colors:active){
  .sheen,.hero-light,.glow,.cmp-sweep{display:none!important}
  /* Split headings: each word is its own box with its own backplate, which would cover the descenders of the line
     above (Every, many, platform), so wrapped lines get more room, as the hero title does */
  .js .split{line-height:1.2}
  /* The menu icon's bars are painted backgrounds, which forced colours would turn into the button colour */
  .menu-btn .bars::before,.menu-btn .bars::after,.menu-btn .bars i{forced-color-adjust:none;background:ButtonText}
  .scroll-prog{forced-color-adjust:none;background:CanvasText}
  .js .process li::after,.js .pseg,.js .pnode,.ticker-list li::after{forced-color-adjust:none;background:CanvasText;box-shadow:none}
  .ticker-btn::before{forced-color-adjust:none;background:ButtonFace;border-color:ButtonText}
  .ticker-btn{color:ButtonText}
  .ticker-list .tk-b{background:none;-webkit-text-fill-color:CanvasText;color:CanvasText}
}
@media print{.scroll-prog,.ticker-btn,.ticker-clone,.sheen,.hero-light,.glow,.cmp-sweep,.pseg,.pnode{display:none!important}.js .process.is-drawn li::after{display:block}}

/* ---- Reduced motion: none of the above moves; content is fully visible at once ---- */
@media (prefers-reduced-motion:reduce){
  .scroll-prog,.hero-light,.glow,.sheen,.cmp-sweep,.pseg,.pnode,.ticker-btn,.ticker-clone,.wave .w-live{display:none!important}
  .js .hero-title[data-reveal-stagger]>*,.js .split .w,.js .view-enter,.js .view-leave{transform:none!important;clip-path:none!important;opacity:1!important}
}

@media (prefers-reduced-motion:reduce){
  .js [data-reveal],.js [data-reveal].is-in,.js [data-reveal-stagger]>*,.js [data-reveal-stagger].is-in-s>*,.js .wave[data-reveal]{opacity:1!important;translate:none!important;clip-path:none!important;animation:none!important}
  *:not(#hp-deck-stage *):not(#hp-deck *),*:not(#hp-deck-stage *):not(#hp-deck *)::before,*:not(#hp-deck-stage *):not(#hp-deck *)::after{animation:none!important;transition:none!important}
  .wave .w-pulse{stroke-dasharray:none;stroke-dashoffset:0;opacity:.35}
}
@media print{
  .js [data-reveal],.js [data-reveal-stagger]>*{opacity:1!important;animation:none!important;clip-path:none!important}
  .hdr{position:static}
}

/* =====================================================================
   Scroll motion on every page (round 7)
   Services, About, Enquire and Privacy speak the same motion language as Home: headings rise word by word, eyebrow
   rules draw, blocks and lists rise in a stagger, waveforms draw and cards carry the pointer light (index.html marks
   the elements; app.js runs them). Added here: a slow parallax on the inner page heads, small details that settle as
   their card or line lands (report icon tiles, the What we need markers), a rule draw and line reveal on each privacy
   heading, and quicker steps for long lists. Same rules as round 5: only transform, opacity and clip-path animate,
   nothing moves layout, nothing is hidden without JavaScript (.js), and none of it runs under reduced motion (the
   reduced-motion rules above stop every animation and show everything).
   ===================================================================== */

/* ---- Inner page heads: the ring field drifts down at about a fifth of the scroll speed (as the Home hero's rings do),
   so the head gains depth as it leaves; on About, from 901px where it sits beside the text, the logo drifts a little
   too. app.js writes the offset in its scroll frame (--ph-y on the page head, translate on the logo) only while the
   head is on screen. The rings get their own layer, so each frame is a compositor move with no repaint. (Not a CSS
   scroll-driven animation: Chromium then reports a large layout shift for the rings when the web fonts swap in.)
   --ph-y does not inherit, so changing it restyles only the head itself and its rings. ---- */
@property --ph-y{syntax:"<length>";inherits:false;initial-value:0px}
@media (prefers-reduced-motion:no-preference){
  .js .page-head::before{--ph-y:inherit;translate:0 var(--ph-y,0px);will-change:transform}
}
@media (max-width:900px){.js .brand-moment picture{translate:none!important}}

/* ---- Long lists take shorter steps, so the whole list has landed within about a second ---- */
.js .subnav[data-reveal-stagger].is-in-s>*,.js .tabs[data-reveal-stagger].is-in-s>*{animation-duration:.55s;animation-delay:calc(var(--i,0) * 60ms)}
.js .faq[data-reveal-stagger].is-in-s>*{animation-delay:calc(var(--i,0) * 55ms)}
.js .pp-toc ol[data-reveal-stagger].is-in-s>*{animation-duration:.5s;animation-delay:calc(140ms + var(--i,0) * 28ms)}
.js .pp-summary ul[data-reveal-stagger].is-in-s>*{animation-delay:calc(160ms + var(--i,0) * 60ms)}
.js .form-grid[data-reveal-stagger].is-in-s>*{animation-duration:.5s;animation-delay:calc(90ms + var(--i,0) * 32ms)}
.js .builder-steps[data-reveal-stagger].is-in-s>*,.js .acct-list[data-reveal-stagger].is-in-s>*,.js .network-points[data-reveal-stagger].is-in-s>*{animation-delay:calc(120ms + var(--i,0) * 80ms)}
.js .ww-col ul[data-reveal-stagger].is-in-s>*{animation-delay:calc(var(--d,0ms) + 140ms + var(--i,0) * 70ms)}   /* --d: the column's own delay */
.js .foot-grid[data-reveal-stagger].is-in-s>*{animation-delay:calc(var(--i,0) * 70ms)}

/* ---- Details that settle as their card or line lands ---- */
@keyframes hp-ico{from{opacity:0;transform:scale(.55) rotate(-14deg)}to{opacity:1;transform:none}}
@keyframes hp-mark{from{opacity:0;transform:rotate(-135deg) scale(0)}to{opacity:1;transform:rotate(45deg) scale(1)}}
@keyframes hp-head-up{from{transform:translateY(.7em);clip-path:inset(0 -4% 100% -4%)}to{transform:none;clip-path:inset(-40% -4% -40% -4%)}}
@media (prefers-reduced-motion:no-preference){
  /* Icon tiles on the two reporting cards spring up from smaller and tilted. (Not on the icon tiles inside staggered
     lists: those cards already rise one after another, and a second animation per card made those frames too heavy
     on slow phones.) */
  .js [data-reveal].is-in:not(.reveal-now)>.card-ico{animation:hp-ico .65s cubic-bezier(.34,1.45,.64,1) both;animation-delay:calc(var(--d,0ms) + 200ms)}
  /* What we need: each diamond turns into place */
  .js .need[data-reveal-stagger].is-in-s>li::before{animation:hp-mark .7s cubic-bezier(.34,1.3,.64,1) both;animation-delay:calc(var(--i,0) * 90ms + 160ms)}
  /* Privacy: as each section arrives its number rule draws and its heading rises out of a mask (a section that a
     contents link moves to shows at once: app.js adds .reveal-now). "backwards" hands the rule back to its normal
     style afterwards, so the focus mark (scaleX 2.2) still works. */
  .js .pp-sec[data-reveal]:not(.is-in) .pp-num::after{transform:scaleX(0)}
  .js .pp-sec[data-reveal].is-in:not(.reveal-now) .pp-num::after{animation:hp-rule .8s cubic-bezier(.65,0,.35,1) .3s backwards}
  .js .pp-sec[data-reveal].is-in:not(.reveal-now)>h2{animation:hp-head-up .75s cubic-bezier(.2,.75,.15,1) .06s backwards}
}

/* ---- Pointer light on the newer cards (app.js adds them to its list; mouse and trackpad only). Standalone cards lift
   like .card; the large panels (network note, builder summary) light without lifting. (The divided cells of What we
   need and Tailored to you stay plain: lighting every cell made scrolling past them too heavy on slow machines.) ---- */
.genres .glow-edge,.summary .glow-edge{inset:0}   /* these clip their overflow, so the edge light runs just inside the frame */
@media (min-width:861px){.summary.has-glow{position:sticky}}   /* .has-glow would otherwise unpin it */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .make li.has-glow,.genres li.has-glow{transition:transform .55s var(--ease),border-color .35s ease,background-color .35s ease}
  .make li.has-glow:hover,.genres li.has-glow:hover{transform:translateY(-4px)}
  .make li.has-glow::after{content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit;box-shadow:0 30px 50px -28px rgba(0,0,0,.95),0 0 48px -22px rgba(var(--studio),.22);opacity:0;transition:opacity .55s var(--ease);pointer-events:none}
  .make li.has-glow:hover::after{opacity:1}
}
@media (forced-colors:none) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .make li.has-glow::after{box-shadow:0 30px 50px -28px rgba(0,0,0,.95),0 0 56px -22px rgba(var(--accent-1-rgb,200,210,225),.34)}
}

/* ---- Page entrance after a link puts focus in a field: rise only, no fade (app.js adds .view-soft) ---- */
@keyframes hp-view-in-soft{from{transform:translateY(12px)}to{transform:none}}
.js .view-enter.view-soft{animation-name:hp-view-in-soft}

/* =====================================================================
   Accent colour (round 7)
   Electric blue into violet (tokens in :root) on top of the graphite and chrome. Used with restraint: it marks what is
   active, selected or important, and lights a few key places (page heads, the decks, the comparison, the call-to-action
   bands). Body text, primary buttons and the logo stay chrome. The light sections swap in darker versions of the same
   tokens. Everything that paints the accent sits inside (forced-colors:none), so Windows High Contrast keeps the system
   colours set by the forced-colours rules above.
   ===================================================================== */
.sec-light{
  --accent-1:var(--accent-1-on-light); --accent-2:var(--accent-2-on-light);
  --accent-1-rgb:29,78,216; --accent-2-rgb:109,40,217;
  --accent-grad:var(--accent-grad-on-light);
  --accent-glow:rgba(29,78,216,.22); --accent-glow-2:rgba(109,40,217,.2);
  --accent-ink:#FFFFFF; --accent-text:#1D4ED8; --accent-text-2:#6D28D9;
  --focus:#1D4ED8;   /* 5.5:1 on #E6E8EB, 6.7:1 on white */
}
/* Focus rings: light blue on dark (11:1), deep blue on the light sections (5.5:1). Forced colours keep Highlight. */
:focus-visible,.opt-in input:focus-visible+label,.more:focus-visible::after,
input:focus-visible,select:focus-visible,textarea:focus-visible,input[type=date]:focus-within,
.sec-light :focus-visible,.sec-light .opt-in input:focus-visible+label,.sec-light .more:focus-visible::after,
.sec-light input:focus-visible,.sec-light select:focus-visible,.sec-light textarea:focus-visible,.sec-light input[type=date]:focus-within{outline-color:var(--focus)}
::selection{background:#3D8BFF;color:#05060A}
.sec-light ::selection{background:#1D4ED8;color:#FFFFFF}

@media (forced-colors:none){
  /* ---- Fine lines that mark a section or a state ---- */
  .eyebrow::before{background:var(--accent-grad)}
  .eyebrow-center::after{background:linear-gradient(280deg,var(--accent-1) 0%,var(--accent-2) 100%)}
  .nav-pages a::after,.tab::after,.cmp thead th:not([data-col="hp"])::after,.card::before,.teaser li::before,
  .aim::before,.summary::before,.form-card::before,.thanks::before,.pp-summary::before,.pp-num::after,
  .process li::after,.values li::after{background:var(--accent-grad)}
  .platform-out::before,.pp-toc a::before{background:linear-gradient(180deg,var(--accent-1) 0%,var(--accent-2) 100%)}
  .subnav a:hover{border-color:var(--accent-1)}
  .scroll-prog{background:var(--accent-1);background-image:linear-gradient(90deg,rgba(var(--accent-1-rgb),.3) 0%,var(--accent-1) 38%,var(--accent-2) 80%,#CDBBFF 100%)}
  .ticker-list li::after{background:var(--accent-1);background-image:linear-gradient(135deg,#8EBBFF 0%,var(--accent-1) 45%,var(--accent-2) 100%)}
  .wave .w-pulse,.wave .w-live{stroke:url(#hp-wave-grad) var(--accent-1)}

  /* ---- One accent word per page head and call-to-action band ---- */
  .hero-title .silver,.page-head h1 .silver,.cta-band h2 .silver{color:var(--accent-text);background-image:var(--accent-word);background-size:100% 100%}

  /* ---- Links: an accent underline at rest, the text colour on hover ---- */
  a,.pp a,.sec-light a,.sec-light .pp a{text-decoration-color:rgba(var(--accent-1-rgb),.7)}
  .text-btn,.sec-light .text-btn{text-decoration-color:rgba(var(--accent-1-rgb),.65)}
  .text-btn:hover{text-decoration-color:currentColor}
  .text-btn-dot{border-color:rgba(var(--accent-1-rgb),.8)}
  .text-btn-dot::after{background:var(--accent-grad);box-shadow:0 0 10px 1px var(--accent-glow)}
  .req{color:var(--accent-text)}
  .consent input{accent-color:var(--accent-1)}

  /* ---- Buttons: primary stays chrome, lit from below by the accent; the glass button's edge turns accent on hover ---- */
  .btn:not(.btn-ghost){box-shadow:inset 0 1px 0 #FFFFFF,inset 0 -1px 0 rgba(10,12,16,.16),0 10px 28px -16px rgba(var(--accent-1-rgb),.55)}
  .btn:not(.btn-ghost):hover{box-shadow:inset 0 1px 0 #FFFFFF,inset 0 -1px 0 rgba(10,12,16,.12),0 14px 34px -12px rgba(var(--accent-1-rgb),.6),0 8px 34px -14px rgba(var(--accent-2-rgb),.5)}
  .sec-light .btn:not(.btn-ghost){box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 10px 24px -14px rgba(0,0,0,.55)}
  .sec-light .btn:not(.btn-ghost):hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 14px 30px -12px rgba(var(--accent-1-rgb),.5)}
  .btn-ghost:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 12px 30px -16px rgba(var(--accent-1-rgb),.55)}
  @supports ((mask-composite:exclude) or (-webkit-mask-composite:xor)){
    .btn-ghost:hover::before{background:linear-gradient(100deg,rgba(var(--accent-1-rgb),.95) 0%,rgba(var(--accent-2-rgb),.95) 100%)}
  }

  /* ---- Selected options (comparison picker, platform chips, builder and form choices), the switch and the open FAQ
     answer: an accent fill with dark text (5.4:1 or more; white on the light-section fill, 6.7:1 or more) ---- */
  .seg-opt[aria-checked="true"],.chip[aria-pressed="true"],.opt-in input:checked+label,
  .sec-light .seg-opt[aria-checked="true"],.sec-light .chip[aria-pressed="true"],.sec-light .opt-in input:checked+label{background:var(--accent-1);background-image:var(--accent-grad);background-origin:border-box;border-color:transparent;color:var(--accent-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 22px -12px var(--accent-glow)}
  .opt-in.box input:checked+label::before,.sec-light .opt-in.box input:checked+label::before{background:var(--accent-ink);box-shadow:inset 0 0 0 3px var(--accent-1)}
  .network .chip:not([aria-pressed="true"]) .dots i{background:var(--accent-text)}
  .switch[aria-checked="true"] .track{border-color:var(--accent-1);background-image:linear-gradient(180deg,rgba(var(--accent-1-rgb),.3),rgba(var(--accent-2-rgb),.2))}
  .switch[aria-checked="true"] .knob{background:var(--accent-grad);box-shadow:0 0 12px var(--accent-glow),0 2px 6px rgba(0,0,0,.5)}
  .faq-q:hover .ic{border-color:var(--accent-1)}
  .faq-q[aria-expanded="true"] .ic,.sec-light .faq-q[aria-expanded="true"] .ic{background:var(--accent-1);background-image:var(--accent-grad);background-origin:border-box;border-color:transparent;box-shadow:0 6px 18px -8px var(--accent-glow)}
  .faq-q[aria-expanded="true"] .ic::before,.faq-q[aria-expanded="true"] .ic::after,
  .sec-light .faq-q[aria-expanded="true"] .ic::before,.sec-light .faq-q[aria-expanded="true"] .ic::after{background:var(--accent-ink)}

  /* ---- Icons, markers and pointer lights ---- */
  .card-ico,.make-ico{color:var(--accent-1);background:linear-gradient(180deg,rgba(var(--accent-1-rgb),.15) 0%,rgba(var(--accent-2-rgb),.06) 100%);border-color:rgba(var(--accent-1-rgb),.34);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 10px 24px -16px var(--accent-glow)}
  .need li::before{background:var(--accent-grad)}
  .ww-yes li::before{border-color:transparent;background:var(--accent-grad) border-box}
  .ww-yes li::after{background:var(--accent-ink)}
  .pp-updated::before{background:var(--accent-grad);box-shadow:0 0 8px var(--accent-glow)}
  .pp-summary li::marker{color:var(--accent-1)}
  .glow{--glow-fill:rgba(var(--accent-1-rgb),.1);--glow-edge:rgba(142,187,255,.95)}
  .glow-fill i{background:radial-gradient(closest-side,var(--glow-fill),rgba(var(--accent-1-rgb),0))}
  .glow-edge i{background:radial-gradient(closest-side,var(--glow-edge),rgba(var(--accent-1-rgb),0))}
  .sec-light .glow{--glow-fill:rgba(255,255,255,.9);--glow-edge:rgba(29,78,216,.8)}
  .sec-light .glow-edge i{background:radial-gradient(closest-side,var(--glow-edge),rgba(29,78,216,0))}
  .hero-light{background:radial-gradient(closest-side,rgba(var(--studio),.12),rgba(var(--accent-1-rgb),.06) 45%,rgba(var(--accent-1-rgb),0) 100%)}
  @media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
    .card.has-glow::after,.aside-card.has-glow::after,.report-card.has-glow::after,.ww-col.has-glow::after{box-shadow:0 30px 50px -28px rgba(0,0,0,.95),0 0 56px -22px rgba(var(--accent-1-rgb),.34)}
  }
  @media (min-width:861px){.teaser li:hover{background:linear-gradient(180deg,rgba(var(--accent-1-rgb),.07),rgba(var(--accent-1-rgb),0) 75%)}}

  /* ---- How it works (light band): step numbers in the accent (5.5:1 or more on the band) and the line drawn across
     the steps runs from blue to violet over all four ---- */
  .sec-light .process li::before{width:-moz-fit-content;width:fit-content;color:var(--accent-1);background-image:linear-gradient(135deg,var(--accent-1) 15%,var(--accent-2) 95%)}
  .js .pseg{background:var(--accent-1);background-image:linear-gradient(90deg,var(--accent-1),var(--accent-2));background-size:400% 100%}
  .js .process li:nth-child(2) .pseg{background-position:33.333% 0}
  .js .process li:nth-child(3) .pseg{background-position:66.667% 0}
  .js .process li:nth-child(4) .pseg{background-position:100% 0}
  .js .pnode{background:var(--accent-1);box-shadow:0 0 0 3px var(--light-1),0 0 14px 2px var(--accent-glow)}
  .js .process li:nth-child(2) .pnode{background:color-mix(in srgb,var(--accent-1) 67%,var(--accent-2))}
  .js .process li:nth-child(3) .pnode{background:color-mix(in srgb,var(--accent-1) 33%,var(--accent-2))}
  .js .process li:nth-child(4) .pnode{background:var(--accent-2)}

  /* ---- Comparison: the HousePulse column's frame, the light behind it and the sweep down it take the accent ---- */
  @supports ((mask-composite:exclude) or (-webkit-mask-composite:xor)){
    .js .cmp-wrap::after{background:linear-gradient(172deg,#B9D3FF 0%,var(--accent-1) 12%,rgba(var(--accent-1-rgb),.45) 38%,rgba(var(--accent-2-rgb),.4) 66%,var(--accent-2) 90%,#CDBBFF 100%)}
    .js .cmp-wrap::before{background:radial-gradient(50% 42% at 58% 42%,rgba(var(--accent-1-rgb),.13),rgba(var(--accent-2-rgb),.05) 60%,transparent 100%)}
  }
  .js .cmp-sweep i{background:linear-gradient(180deg,rgba(var(--accent-1-rgb),0) 0%,rgba(var(--accent-1-rgb),.09) 36%,rgba(255,255,255,.14) 50%,rgba(var(--accent-2-rgb),.08) 64%,rgba(var(--accent-2-rgb),0) 100%)}

  /* ---- Club-light washes: soft blue and violet pools behind key sections (kept faint so text contrast holds) ---- */
  .hero-glow{background:radial-gradient(max(340px,42vw) 520px at 86% 0%,rgba(var(--accent-1-rgb),.2),rgba(var(--accent-1-rgb),.05) 52%,transparent 74%),radial-gradient(max(280px,30vw) 420px at 0% 560px,rgba(var(--accent-2-rgb),.12),transparent 72%),radial-gradient(46% 42% at 80% 2%,rgba(var(--studio),.11),rgba(var(--studio),.035) 48%,transparent 72%),radial-gradient(28% 30% at 97% 34%,rgba(var(--studio),.05),transparent 70%),linear-gradient(180deg,rgba(var(--studio),.03),transparent 26%)}
  .hero-rings span{background:conic-gradient(from 0deg,transparent 0deg,rgba(var(--accent-1-rgb),.13) 30deg,transparent 70deg,transparent 180deg,rgba(var(--accent-2-rgb),.11) 210deg,transparent 250deg)}
  .deck-showcase::before{background:radial-gradient(36% 42% at 24% 50%,rgba(var(--accent-1-rgb),.12),transparent 76%),radial-gradient(36% 42% at 76% 54%,rgba(var(--accent-2-rgb),.11),transparent 76%),radial-gradient(52% 46% at 50% 52%,rgba(var(--studio),.06),rgba(var(--studio),.02) 55%,transparent 78%)}
  @media (max-width:760px){.deck-showcase::before{background:radial-gradient(70% 26% at 50% 30%,rgba(var(--accent-1-rgb),.12),transparent 76%),radial-gradient(70% 26% at 50% 78%,rgba(var(--accent-2-rgb),.11),transparent 76%)}}
  .page-head{background:radial-gradient(max(340px,44vw) 400px at 88% 0%,rgba(var(--accent-1-rgb),.19),rgba(var(--accent-1-rgb),.05) 52%,transparent 76%),radial-gradient(max(280px,34vw) 300px at 0% 100%,rgba(var(--accent-2-rgb),.11),transparent 72%),radial-gradient(48% 70% at 86% 0%,rgba(var(--studio),.08),transparent 74%)}
  .sec-alt{background:radial-gradient(max(320px,40vw) 460px at 100% 0%,rgba(var(--accent-1-rgb),.075),transparent 72%),radial-gradient(max(280px,34vw) 400px at 0% 100%,rgba(var(--accent-2-rgb),.05),transparent 72%),radial-gradient(70% 50% at 50% 0%,rgba(var(--studio),.05),transparent 70%),var(--grain),linear-gradient(180deg,var(--bg2) 0%,#0B0D10 100%)}
  .cta-band{background:radial-gradient(34% 62% at 24% 0%,rgba(var(--accent-1-rgb),.2),transparent 72%),radial-gradient(34% 62% at 76% 0%,rgba(var(--accent-2-rgb),.17),transparent 72%),radial-gradient(56% 70% at 50% 0%,rgba(var(--studio),.08),rgba(var(--studio),.025) 50%,transparent 75%),radial-gradient(50% 40% at 50% 104%,rgba(var(--accent-2-rgb),.08),transparent 70%),var(--grain),linear-gradient(180deg,#101216 0%,#0B0C0F 100%)}
  .cta-band::after{background-image:linear-gradient(90deg,rgba(var(--accent-1-rgb),0) 0%,var(--accent-1) 32%,var(--accent-2) 68%,rgba(var(--accent-2-rgb),0) 100%);opacity:.75}
  .sec-light{background-image:radial-gradient(max(320px,40vw) 460px at 100% 0%,rgba(29,78,216,.07),transparent 72%),radial-gradient(max(280px,36vw) 420px at 0% 100%,rgba(109,40,217,.06),transparent 72%),radial-gradient(70% 460px at 50% 0%,rgba(255,255,255,.95),rgba(255,255,255,0) 100%),var(--grain-dark),linear-gradient(180deg,var(--light-1) 0%,var(--light-2) 100%)}
  .brand-moment::before{background:radial-gradient(circle,rgba(var(--accent-1-rgb),.28),rgba(var(--accent-2-rgb),.12) 40%,transparent 66%)}
  .genres li:nth-child(2)::after{background:radial-gradient(60% 50% at 85% 10%,var(--accent-glow-2),transparent 70%)}
  .genres li:nth-child(3)::after{background:radial-gradient(40% 40% at 90% 6%,rgba(var(--accent-1-rgb),.32),transparent 70%),radial-gradient(70% 55% at 80% 12%,var(--accent-glow-2),transparent 70%)}
  .site-foot{background:radial-gradient(min(640px,90vw) 340px at 50% 0%,rgba(var(--accent-2-rgb),.07),transparent 72%),radial-gradient(50% 90% at 50% 0%,rgba(var(--studio),.04),transparent 72%),var(--grain),var(--bg-deep)}
  @media (max-width:860px){.nav{background-image:radial-gradient(80% 60% at 100% 0%,rgba(var(--accent-1-rgb),.1),transparent 70%),radial-gradient(60% 50% at 0% 100%,rgba(var(--accent-2-rgb),.06),transparent 70%),var(--grain)}}
}