/* Shared styles for every Bloom partner page (team pages, partner list, Partnerships page).
   Palette: Bloom dusk blue + partner gold, Bodoni Moda / Hanken Grotesk / DM Mono. */
/* Layout concept: a photographer's contact sheet at blue hour. Bloom's dusk blue leads;
   the partner's gold appears only where light falls (lit windows, the free-travel ring, the ×). */
:root{
  --paper:#EEF0EF; --paper-2:#E2E6E6; --surface:#F8F9F8;
  --ink:#111A23; --ink-2:#4A5563; --line:#C7CFD3;
  --dusk:#3F476B; --dusk-ink:#3F476B; --dusk-wash:rgba(63,71,107,.10);
  --glow:#C6AA5F; --glow-ink:#7A6224; --glow-wash:rgba(198,170,95,.20);
  --band:#252A44; --band-ink:#EEF0F5; --band-ink-2:#AEB4CC; --band-line:#3B4262;
  --logo:#3F476B;
  --on-ink:#F4F6F5;
  --shadow:0 1px 0 rgba(17,26,35,.04), 0 24px 48px -28px rgba(17,26,35,.35);

  --f-display:"Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --f-body:"Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-mono:"DM Mono", ui-monospace, Menlo, Consolas, monospace;

  --gutter:clamp(16px, 4.2vw, 56px);
  --maxw:1240px;
  --step--1:.8125rem; --step-0:1rem; --step-1:1.1875rem; --step-2:1.5rem; --step-3:2.125rem; --step-4:clamp(2.25rem, 4.6vw, 3.5rem); --step-5:clamp(2.75rem, 7.4vw, 6.25rem);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .logo-light{display:none}
  :root:not([data-theme="light"]) .logo-dark{display:block}
  :root:not([data-theme="light"]){
    --paper:#0D141C; --paper-2:#131C26; --surface:#17212C;
    --ink:#E8ECEF; --ink-2:#9DA9B5; --line:#2A3644;
    --dusk:#A3ADD6; --dusk-ink:#B8C0E2; --dusk-wash:rgba(163,173,214,.12);
    --glow:#C6AA5F; --glow-ink:#D8C084; --glow-wash:rgba(198,170,95,.16);
    --band:#121527; --band-ink:#EEF0F5; --band-ink-2:#A2A9C2; --band-line:#2A3050;
    --logo:#E8ECEF;
    --on-ink:#0D141C;
    --shadow:0 1px 0 rgba(0,0,0,.2), 0 24px 48px -24px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}
:root[data-theme="dark"] .logo-light{display:none}
:root[data-theme="dark"] .logo-dark{display:block}
:root[data-theme="dark"]{
  --paper:#0D141C; --paper-2:#131C26; --surface:#17212C;
  --ink:#E8ECEF; --ink-2:#9DA9B5; --line:#2A3644;
    --dusk:#A3ADD6; --dusk-ink:#B8C0E2; --dusk-wash:rgba(163,173,214,.12);
    --glow:#C6AA5F; --glow-ink:#D8C084; --glow-wash:rgba(198,170,95,.16);
    --band:#121527; --band-ink:#EEF0F5; --band-ink-2:#A2A9C2; --band-line:#2A3050;
    --logo:#E8ECEF;
  --on-ink:#0D141C;
  --shadow:0 1px 0 rgba(0,0,0,.2), 0 24px 48px -24px rgba(0,0,0,.7);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth; scroll-padding-top:84px}
html, body{margin:0}
body{background:var(--paper); color:var(--ink); font-family:var(--f-body); font-size:var(--step-0); line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:60; background:var(--paper)}
a{color:inherit}
img{max-width:100%; display:block}
h1,h2,h3{text-wrap:balance; margin:0}
p{margin:0}
:focus-visible{outline:2px solid var(--dusk-ink); outline-offset:3px; border-radius:2px}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-left:max(var(--gutter), env(safe-area-inset-left,0px)); padding-right:max(var(--gutter), env(safe-area-inset-right,0px))}
.skip{position:absolute; left:-999px; top:8px; background:var(--ink); color:var(--paper); padding:8px 12px; z-index:100}
.skip:focus{left:12px}

.mono{font-family:var(--f-mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase}
.eyebrow{font-family:var(--f-mono); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); display:flex; gap:.75rem; align-items:center}
.eyebrow::before{content:""; width:28px; height:1px; background:currentColor; opacity:.6}
.h2{font-family:var(--f-display); font-weight:500; font-size:var(--step-4); line-height:1.04; letter-spacing:-.01em}
.h2 em{font-style:italic; color:var(--dusk-ink)}
.lead{font-size:var(--step-1); color:var(--ink-2); max-width:58ch; line-height:1.55}
.x{color:var(--glow-ink); font-family:var(--f-display); font-style:italic; font-weight:400; text-transform:none; letter-spacing:0}

/* Buttons */
.btn{--b:var(--ink); display:inline-flex; align-items:center; gap:.6rem; font:600 .9375rem/1 var(--f-body); letter-spacing:.01em; padding:15px 22px; border-radius:999px; text-decoration:none; border:1px solid var(--b); transition:background .25s, color .25s, transform .25s, border-color .25s; cursor:pointer; white-space:nowrap}
.btn .arr{display:inline-block; transition:transform .25s}
.btn:hover .arr{transform:translateX(4px)}
.btn-ink{background:var(--ink); color:var(--on-ink)}
.btn-ink:hover{background:var(--dusk); border-color:var(--dusk); color:var(--on-ink)}
.btn-line{background:transparent; color:var(--ink)}
.btn-line:hover{background:var(--ink); color:var(--on-ink)}
.btn-text{border:0; padding:6px 0; border-radius:0; background:none; color:var(--ink); font-weight:600; border-bottom:1px solid var(--line)}
.btn-text:hover{border-color:var(--ink)}
.btn-sm{padding:10px 16px; font-size:.875rem}

/* ---------- Nav ---------- */
.nav{position:sticky; top:env(safe-area-inset-top,0px); z-index:50; background:color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter:saturate(1.2) blur(12px); -webkit-backdrop-filter:saturate(1.2) blur(12px); border-bottom:1px solid transparent; transition:border-color .3s}
.nav.scrolled{border-color:var(--line)}
.nav-in{display:flex; align-items:center; gap:24px; padding-block:14px}
.brandlock{display:flex; align-items:center; gap:.75rem; text-decoration:none; margin-right:auto; min-width:0}
.bl-bloom{font-family:var(--f-display); font-size:1.5rem; font-weight:600; letter-spacing:-.01em; line-height:1}
.bl-sub{font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2)}
.bloom-logo{display:block; fill:currentColor; color:var(--logo); flex:none}
.brandlock .bloom-logo{height:30px; width:85px}
.nav-p-logo{height:26px; width:auto; flex:none}
@media (max-width:420px){ .nav-p-logo{height:22px} .brandlock .bloom-logo{height:26px; width:74px} }
.logo-dark{display:none}
.lockup{display:flex; align-items:center; flex-wrap:wrap; gap:14px 22px}
.lockup .bloom-logo{height:56px; width:158px}
.lockup .x{font-size:1.75rem; line-height:1}
.lockup .p-logo{height:42px; width:auto}
.lockup .p-text{font-family:var(--f-mono); font-size:.8125rem; letter-spacing:.14em; text-transform:uppercase}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
@media (max-width:520px){ .lockup .bloom-logo{height:44px; width:124px} .lockup .p-logo{height:32px} .lockup{gap:10px 16px} }
.bl-partner{font-family:var(--f-mono); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nav-links{display:flex; gap:22px}
.nav-links a{font-size:.9rem; text-decoration:none; color:var(--ink-2); padding:6px 0; border-bottom:1px solid transparent; transition:color .2s, border-color .2s}
.nav-links a:hover{color:var(--ink); border-color:var(--ink)}
.menu-btn{display:none; background:none; border:1px solid var(--line); color:var(--ink); border-radius:999px; padding:9px 14px; font:600 .8125rem var(--f-body); cursor:pointer}
@media (max-width:900px){
  .nav-links{display:none; position:absolute; left:0; right:0; top:100%; flex-direction:column; gap:0; background:var(--paper); border-bottom:1px solid var(--line); padding:8px max(var(--gutter), env(safe-area-inset-right,0px)) 18px max(var(--gutter), env(safe-area-inset-left,0px))}
  .nav-links.open{display:flex}
  .nav-links a{padding:14px 0; border-bottom:1px solid var(--line); font-size:1.0625rem; color:var(--ink)}
  .menu-btn{display:inline-block}
  .nav .btn-book{display:none}
  .bl-sub{display:none}
}

/* ---------- Hero ---------- */
.hero{padding-block:clamp(28px, 5vw, 64px) clamp(56px, 8vw, 112px)}
.hero-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.04fr); gap:clamp(32px, 5vw, 72px); align-items:center}
.cobrand{font-family:var(--f-mono); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; display:flex; flex-wrap:wrap; gap:.5em; align-items:baseline}
.cobrand .x{font-size:1.25rem}
.hero h1{font-family:var(--f-display); font-weight:500; font-size:clamp(2.75rem, 6.6vw, 5.25rem); line-height:.98; letter-spacing:-.02em; margin-top:28px}
.hero h1 em{display:block; font-style:italic; font-weight:400; color:var(--dusk-ink)}
.hero .lede{font-size:var(--step-1); color:var(--ink-2); max-width:52ch; margin-top:28px; line-height:1.55}
.ctas{display:flex; flex-wrap:wrap; gap:12px; margin-top:36px; align-items:center}
.hero-meta{display:grid; grid-template-columns:repeat(3, auto); justify-content:start; gap:6px 40px; margin:44px 0 0; padding-top:20px; border-top:1px solid var(--line)}
.hero-meta div{min-width:0}
.hero-meta dt{font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2)}
.hero-meta dd{margin:4px 0 0; font-weight:600; font-size:.9375rem}
.status-dot{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--glow); margin-right:8px; vertical-align:middle; box-shadow:0 0 0 3px var(--glow-wash)}
.hero-fig{margin:0}
.hero-fig figcaption{display:flex; justify-content:space-between; gap:16px; margin-top:12px; font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2)}
@media (max-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero-meta{grid-template-columns:repeat(2, minmax(0,auto)); gap:14px 32px}
}
@media (max-width:420px){ .hero-meta{grid-template-columns:minmax(0,1fr)} .ctas .btn{flex:1 1 100%; justify-content:center} }

/* ---------- Plates (placeholder artwork that stands in for Bloom photos) ---------- */
.plate{position:relative; overflow:hidden; aspect-ratio:var(--ar, 4/3); max-width:100%; width:100%; isolation:isolate; color:#F4F2EC; background:#1B2735; transition:filter 1.2s ease, transform 1.2s ease}
.plate > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.plate .art{position:absolute; inset:0}
.plate .vf{position:absolute; inset:12px; pointer-events:none; z-index:3;
  --c:currentColor;
  background:
    linear-gradient(var(--c),var(--c)) top left/14px 1px no-repeat, linear-gradient(var(--c),var(--c)) top left/1px 14px no-repeat,
    linear-gradient(var(--c),var(--c)) top right/14px 1px no-repeat, linear-gradient(var(--c),var(--c)) top right/1px 14px no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left/14px 1px no-repeat, linear-gradient(var(--c),var(--c)) bottom left/1px 14px no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right/14px 1px no-repeat, linear-gradient(var(--c),var(--c)) bottom right/1px 14px no-repeat;
  opacity:.75}
.plate .tag{position:absolute; top:22px; left:24px; right:56px; z-index:4; font:500 .625rem/1.3 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; opacity:.9}
.plate .ph{position:absolute; bottom:20px; left:24px; right:24px; z-index:4; font:500 .5625rem/1.3 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; opacity:.7}
.plate .ph::before{content:"◌ "; }
.plate.has-img .ph, .plate.has-img .art{display:none}
.js .plate.pending{filter:saturate(.25) brightness(.94)}
.plate.has-img::after{content:""; position:absolute; inset:0 0 auto; height:28%; background:linear-gradient(rgba(8,12,18,.42),rgba(8,12,18,0)); z-index:2; pointer-events:none}
.plate.has-img .tag{text-shadow:0 1px 3px rgba(0,0,0,.55)}
.plate.has-img .vf{--c:#fff; opacity:.8}

/* twilight */
.k-twilight{background:linear-gradient(180deg,#0E1A2D 0%,#1F3556 36%,#4A6688 60%,#B98761 80%,#E2A468 87%,#2A2E36 88%)}
.k-twilight .art svg, .hero-plate .art svg{position:absolute; left:0; right:0; bottom:0; width:100%; height:auto}
.stars{position:absolute; inset:0 0 50% 0; background:
  radial-gradient(1px 1px at 18% 22%, rgba(255,255,255,.8), transparent 60%),
  radial-gradient(1px 1px at 72% 14%, rgba(255,255,255,.7), transparent 60%),
  radial-gradient(1px 1px at 44% 30%, rgba(255,255,255,.5), transparent 60%),
  radial-gradient(1.5px 1.5px at 86% 34%, rgba(255,255,255,.6), transparent 60%),
  radial-gradient(1px 1px at 30% 8%, rgba(255,255,255,.6), transparent 60%)}
.moon{position:absolute; top:13%; right:16%; width:22px; height:22px; border-radius:50%; background:#F3EBDA; box-shadow:0 0 30px 6px rgba(243,235,218,.25)}

/* interior */
.k-interior{color:#1E252C; background:linear-gradient(180deg,#E9E2D6 0 64%,#C7B49B 64% 100%)}
.k-interior .win{position:absolute; left:14%; top:16%; width:30%; height:40%; background:linear-gradient(180deg,#BFD3E2,#E4ECEF); box-shadow:inset 0 0 0 6px #F7F3EC;
  background-image:linear-gradient(#F7F3EC,#F7F3EC), linear-gradient(#F7F3EC,#F7F3EC), linear-gradient(180deg,#BCD0E0,#E6EDEF);
  background-size:4px 100%, 100% 4px, 100% 100%; background-position:center, center, 0 0; background-repeat:no-repeat}
.k-interior .win.w2{left:52%; width:22%}
.k-interior .sun{position:absolute; left:10%; top:64%; width:56%; height:28%; background:rgba(255,248,226,.55); clip-path:polygon(10% 0,62% 0,100% 100%,30% 100%)}
.k-interior .sofa{position:absolute; left:58%; top:54%; width:30%; height:16%; background:#7D8A8F; border-radius:6px 6px 2px 2px; box-shadow:0 10px 0 -4px #5F6B70}
.k-interior .lamp{position:absolute; left:86%; top:30%; width:2px; height:34%; background:#3B3F44}
.k-interior .lamp::before{content:""; position:absolute; left:-14px; top:-4px; width:30px; height:22px; background:#F2E7D2; clip-path:polygon(20% 0,80% 0,100% 100%,0 100%)}

/* aerial */
.k-aerial{background:
  repeating-linear-gradient(62deg, rgba(255,255,255,.045) 0 2px, transparent 2px 22px),
  linear-gradient(118deg,#5E7A45 0 34%,#6F8A4F 34% 58%,#4E6A3B 58% 100%)}
.k-aerial .road{position:absolute; left:-10%; right:-10%; top:70%; height:7%; background:#3C3F42; transform:rotate(-8deg); box-shadow:0 0 0 2px rgba(0,0,0,.15)}
.k-aerial .drive{position:absolute; left:47%; top:48%; width:5%; height:26%; background:#8C877C; transform:rotate(-8deg)}
.k-aerial .roof{position:absolute; left:36%; top:28%; width:30%; height:20%; background:linear-gradient(180deg,#575C63 0 50%,#4A4F56 50% 100%); transform:rotate(-8deg); box-shadow:6px 8px 0 rgba(0,0,0,.25)}
.k-aerial .pool{position:absolute; left:62%; top:20%; width:9%; height:10%; background:#5CC0CF; transform:rotate(-8deg); border:2px solid #D9D3C3}
.k-aerial .parcel{position:absolute; left:24%; top:12%; width:56%; height:56%; border:2px dashed #F2C45C; transform:rotate(-8deg)}
.k-aerial .tree{position:absolute; width:7%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 35% 35%, #4F6E35, #2C4220)}

/* video */
.k-video{background:#0B1016}
.k-video .frame{position:absolute; left:0; right:0; top:14%; bottom:14%; background:linear-gradient(180deg,#24395A 0%,#5A7697 55%,#C48E63 78%,#1B2129 79%)}
.k-video .play{position:absolute; left:50%; top:50%; width:58px; height:58px; margin:-29px 0 0 -29px; border-radius:50%; border:1px solid rgba(255,255,255,.75); z-index:2; backdrop-filter:blur(2px)}
.k-video .play::after{content:""; position:absolute; left:23px; top:18px; border-left:16px solid #fff; border-top:11px solid transparent; border-bottom:11px solid transparent}
.k-video .tc{position:absolute; right:24px; top:22px; z-index:4; font:500 .625rem var(--f-mono); letter-spacing:.12em}
.k-video .rec{display:inline-block; width:6px; height:6px; border-radius:50%; background:#E05545; margin-right:6px; vertical-align:1px}
.k-video .scrub{position:absolute; left:24px; right:24px; bottom:44px; height:2px; background:rgba(255,255,255,.25); z-index:4}
.k-video .scrub::before{content:""; position:absolute; inset:0 64% 0 0; background:#fff}

/* reel */
.k-reel{background:linear-gradient(135deg,#1C2636,#141B26)}
.k-reel .phone{position:absolute; top:9%; bottom:9%; left:50%; aspect-ratio:9/16; transform:translateX(-50%); border-radius:14px; overflow:hidden; background:linear-gradient(180deg,#E7DDCF 0 60%,#B9A68C 60%); box-shadow:0 20px 40px -20px rgba(0,0,0,.6)}
.k-reel .phone::before{content:""; position:absolute; left:8%; right:8%; top:5%; height:2px; background:linear-gradient(90deg,#fff 0 33%,rgba(255,255,255,.4) 33% 34%,rgba(255,255,255,.4) 34% 100%)}
.k-reel .phone::after{content:""; position:absolute; left:18%; top:20%; width:40%; height:30%; background:linear-gradient(180deg,#B9CEDD,#E3EBEE); box-shadow:inset 0 0 0 4px #F5F1EA}
.k-reel .cap{position:absolute; left:10%; right:10%; bottom:10%; height:8%; z-index:1; background:linear-gradient(#1E252C,#1E252C) 0 0/70% 3px no-repeat, linear-gradient(#1E252C,#1E252C) 0 8px/45% 3px no-repeat; opacity:.75}

/* luxury */
.k-luxury{background:linear-gradient(180deg,#0B1420 0%,#18304C 45%,#2D4767 62%,#0D141C 63%)}
.k-luxury .facade{position:absolute; left:8%; right:8%; top:30%; height:33%; background:#0E1620; clip-path:polygon(0 30%,30% 30%,30% 0,70% 0,70% 30%,100% 30%,100% 100%,0 100%)}
.k-luxury .lit{position:absolute; top:44%; height:12%; width:6%; background:#F6C86A; box-shadow:0 0 18px 4px rgba(246,200,106,.45)}
.k-luxury .pool{position:absolute; left:16%; right:16%; top:70%; height:16%; background:linear-gradient(180deg,#3FC3D6,#16708A); transform:perspective(200px) rotateX(38deg); box-shadow:0 0 40px 6px rgba(63,195,214,.35)}

/* floor plan */
.k-floorplan{color:#1E2A36; background:#F3F2EE}
.k-floorplan svg{position:absolute; inset:14% 10% 12% 10%; width:80%; height:74%}

/* branding / agent intro */
.k-branding{background:#20252B}
.k-branding .slate{position:absolute; left:50%; top:56%; height:52%; max-width:76%; aspect-ratio:5/3; transform:translate(-50%,-50%); background:#14181D; border:1px solid rgba(255,255,255,.2); box-shadow:0 24px 40px -24px rgba(0,0,0,.8)}
.k-branding .slate::before{content:""; position:absolute; left:-1px; right:-1px; top:-15%; height:13%; background:repeating-linear-gradient(-55deg,#F4F2EC 0 12px,#14181D 12px 24px); border:1px solid rgba(255,255,255,.2); transform:rotate(-7deg); transform-origin:left bottom}
.k-branding .slate dl{font-size:.5625rem}
.k-branding .slate dl{margin:0; position:absolute; inset:14% 10%; display:grid; grid-template-columns:auto 1fr; gap:6px 14px; align-content:center; font:500 .625rem var(--f-mono); letter-spacing:.12em; text-transform:uppercase}
.k-branding .slate dt{opacity:.55}
.k-branding .slate dd{margin:0}

/* hero plate */
.hero-plate{--ar:4/5; border-radius:2px; box-shadow:var(--shadow)}
.hero-plate .win-lit{fill:#F6C86A}
.hero-plate .glow{opacity:.85}
@media (prefers-reduced-motion: no-preference){
  .hero-plate .win-lit{animation:lightOn 1s cubic-bezier(.2,.7,.2,1) backwards; animation-delay:calc(600ms + var(--i) * 220ms)}
  .hero-plate .glow rect{animation:glowOn 1.6s ease-out backwards; animation-delay:calc(600ms + var(--i) * 220ms)}
  .hero-plate .sky-deepen{animation:deepen 2.8s ease-out backwards}
}
@keyframes lightOn{from{fill:#1E2836}}
/* Photo motion only ever zooms in: the full frame shows first, then a slow push-in */
@media (prefers-reduced-motion: no-preference){ .hero-plate > img{transform-origin:50% 55%; animation:develop 1.6s ease-out backwards, pushIn 14s cubic-bezier(.3,0,.3,1) .3s forwards} }
@keyframes develop{from{filter:saturate(.4) brightness(.9)}}
@keyframes pushIn{from{transform:scale(1)} to{transform:scale(1.06)}}
@keyframes glowOn{from{opacity:0}}
@keyframes deepen{from{opacity:0}}

/* ---------- Section rhythm ---------- */
section{padding-block:clamp(72px, 10vw, 136px)}
.sec-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px 64px; align-items:end; margin-bottom:clamp(40px, 5vw, 64px)}
.sec-head .eyebrow{grid-column:1/-1}
@media (max-width:820px){ .sec-head{grid-template-columns:minmax(0,1fr)} }

/* ---------- Fit + map ---------- */
.fit{background:var(--paper-2)}
.fit-grid{display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(40px,6vw,96px); align-items:start}
.fit-copy p + p{margin-top:18px}
.pair{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0; margin-top:40px; border-top:1px solid var(--line)}
.pair > div{padding:22px 24px 4px 0; min-width:0}
.pair > div + div{padding-left:24px; border-left:1px solid var(--line)}
.pair h3{font-family:var(--f-mono); font-size:.6875rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2)}
.pair p{margin-top:10px; font-size:.9688rem}
.towns{display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:28px; font-family:var(--f-display); font-style:italic; font-size:var(--step-2); line-height:1.2}
.towns span:not(:last-child)::after{content:"·"; margin-left:14px; color:var(--ink-2); font-style:normal}
.towns-note{margin-top:10px; font-size:.875rem; color:var(--ink-2)}

.map-fig{margin:0; background:var(--surface); border:1px solid var(--line); padding:clamp(16px, 2.4vw, 28px)}
.map-head{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap}
.map-head h3{font-family:var(--f-display); font-size:var(--step-2); font-weight:500}
.map-svg{display:block; width:100%; height:auto; margin-top:8px; overflow:visible}
.map-svg .ring{fill:none; stroke:var(--line); stroke-width:1}
.map-svg .ring.key{stroke:var(--ink-2); stroke-dasharray:3 4}
.map-svg .tier1{fill:var(--glow-wash)}
.map-svg .tier2{fill:var(--dusk-wash)}
.map-svg .rl{font:500 9px var(--f-mono); letter-spacing:.08em; fill:var(--ink-2)}
.map-svg .town{cursor:pointer; outline:none}
.map-svg .town circle{stroke:var(--surface); stroke-width:2; transition:r .2s}
.map-svg .town.t1 circle{fill:var(--glow)}
.map-svg .town.t2 circle{fill:var(--dusk)}
.map-svg .town.t3 circle{fill:var(--ink-2)}
.map-svg .town text{font:500 10.5px var(--f-body); fill:var(--ink)}
.map-svg .town:hover circle, .map-svg .town:focus circle, .map-svg .town.on circle{r:8}
.map-svg .town:focus-visible text{text-decoration:underline}
.map-svg .office rect{fill:var(--ink)}
.map-readout{display:flex; gap:12px; align-items:center; min-height:48px; margin-top:4px; padding:12px 14px; background:var(--paper-2); font-size:.9375rem}
.map-readout b{font-weight:600}
.map-readout .mono{color:var(--ink-2)}
.legend{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:16px; font-size:.875rem}
.legend span{display:inline-flex; align-items:center; gap:8px}
.legend i{width:10px; height:10px; border-radius:50%; display:inline-block}
.map-note{margin-top:14px; font-size:.8125rem; color:var(--ink-2); line-height:1.5}

/* ---------- Benefits ---------- */
.ben-grid{display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(40px,6vw,96px); align-items:start}
.terms{position:sticky; top:96px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow)}
.terms-top{padding:28px 28px 22px; border-bottom:1px solid var(--line); display:grid; gap:6px}
.terms-top .mono{color:var(--ink-2)}
.big-pct{font-family:var(--f-display); font-weight:500; font-size:clamp(4.5rem, 10vw, 7.5rem); line-height:.9; letter-spacing:-.03em}
.big-pct sup{font-size:.42em; vertical-align:.95em; margin-left:.04em}
.terms-top p{color:var(--ink-2)}
.terms dl{margin:0; padding:6px 28px 14px}
.terms dl div{display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px dashed var(--line); font-size:.9375rem}
.terms dl div:last-child{border-bottom:0}
.terms dt{color:var(--ink-2)}
.terms dd{margin:0; font-weight:600; text-align:right; font-variant-numeric:tabular-nums}
.terms-foot{padding:16px 28px 22px; font-size:.8125rem; color:var(--ink-2); border-top:1px solid var(--line); background:var(--paper-2)}

.acc{border-top:1px solid var(--ink)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-item h3{font-weight:400}
.acc-btn{all:unset; box-sizing:border-box; width:100%; cursor:pointer; display:grid; grid-template-columns:2.75rem minmax(0,1fr) 28px; gap:12px; align-items:start; padding:26px 0}
.acc-btn:focus-visible{outline:2px solid var(--dusk-ink); outline-offset:4px}
.acc-k{font-family:var(--f-mono); font-size:.75rem; letter-spacing:.08em; color:var(--ink-2); padding-top:.55rem}
.acc-t{font-family:var(--f-display); font-size:var(--step-3); font-weight:500; line-height:1.1; display:block}
.acc-s{display:block; margin-top:8px; color:var(--ink-2); font-size:1rem; max-width:52ch}
.acc-ic{width:28px; height:28px; border:1px solid var(--line); border-radius:50%; position:relative; margin-top:6px; transition:transform .3s, background .3s, border-color .3s}
.acc-ic::before,.acc-ic::after{content:""; position:absolute; left:50%; top:50%; width:10px; height:1px; background:var(--ink); transform:translate(-50%,-50%)}
.acc-ic::after{transform:translate(-50%,-50%) rotate(90deg); transition:transform .3s}
.acc-btn[aria-expanded="true"] .acc-ic{background:var(--ink); border-color:var(--ink)}
.acc-btn[aria-expanded="true"] .acc-ic::before{background:var(--on-ink)}
.acc-btn[aria-expanded="true"] .acc-ic::after{transform:translate(-50%,-50%) rotate(0); background:var(--on-ink)}
.acc-btn:hover .acc-t{color:var(--dusk-ink)}
.acc-panel{display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s ease}
.acc-panel > div{overflow:hidden}
.acc-item.open .acc-panel{grid-template-rows:1fr}
.acc-body{padding:0 40px 28px calc(2.75rem + 12px); color:var(--ink); max-width:68ch}
.acc-body p + p{margin-top:10px}
.acc-body .fine{font-size:.8125rem; color:var(--ink-2)}
.acc-body a{color:var(--dusk-ink); text-underline-offset:3px}
.ben-foot{margin-top:28px; font-size:.8125rem; color:var(--ink-2); max-width:62ch}
@media (max-width:900px){ .ben-grid{grid-template-columns:minmax(0,1fr)} .terms{position:static} .fit-grid{grid-template-columns:minmax(0,1fr)} }
@media (max-width:520px){ .acc-btn{grid-template-columns:minmax(0,1fr) 28px} .acc-k{display:none} .acc-body{padding:0 0 26px} .pair{grid-template-columns:minmax(0,1fr)} .pair > div + div{padding-left:0; border-left:0; border-top:1px solid var(--line)} }

/* ---------- Work: tabs + gallery ---------- */
.work{background:var(--paper)}
.tabs{display:flex; gap:4px 26px; flex-wrap:wrap; border-bottom:1px solid var(--line)}
.tab{all:unset; cursor:pointer; padding:14px 0 13px; font-size:.9688rem; color:var(--ink-2); border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .2s, border-color .2s}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--ink); border-color:var(--ink); font-weight:600}
.tab:focus-visible{outline:2px solid var(--dusk-ink); outline-offset:2px}
.tabpanel{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(28px,4vw,64px); padding-top:40px; align-items:center}
.tabpanel .plate{--ar:3/2}
.tp-copy h3{font-family:var(--f-display); font-weight:500; font-size:var(--step-3); line-height:1.1}
.tp-copy p{margin-top:14px; color:var(--ink-2)}
.menu{list-style:none; margin:24px 0 0; padding:0; border-top:1px solid var(--line)}
.menu li{padding:11px 0; border-bottom:1px solid var(--line); font-size:.9375rem; display:flex; gap:12px}
.menu li::before{content:"+"; font-family:var(--f-mono); color:var(--ink-2)}
.tp-copy .btn-text{display:inline-block; margin-top:22px}
@media (prefers-reduced-motion: no-preference){ .tabpanel.swap .plate, .tabpanel.swap .tp-copy{animation:swapIn .5s ease} }
@keyframes swapIn{from{transform:translateY(8px); filter:blur(2px)}}
@media (max-width:820px){ .tabpanel{grid-template-columns:minmax(0,1fr)} .tabs{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch} .tabs::-webkit-scrollbar{display:none} .tab{white-space:nowrap} }

.sheet-head{display:flex; justify-content:space-between; align-items:end; gap:20px; flex-wrap:wrap; margin-top:clamp(72px,9vw,120px); padding-bottom:18px; border-bottom:1px solid var(--line)}
.sheet-head h3{font-family:var(--f-display); font-weight:500; font-size:var(--step-3)}
.sheet{display:grid; align-items:start; grid-template-columns:repeat(12, minmax(0,1fr)); gap:clamp(10px, 1.4vw, 18px); margin-top:24px}
.cell{all:unset; box-sizing:border-box; cursor:zoom-in; display:block; min-width:0; position:relative}
.cell:focus-visible{outline:2px solid var(--dusk-ink); outline-offset:3px}
.cell .plate{transition:transform .6s cubic-bezier(.2,.7,.2,1), filter 1.2s ease}
.cell:hover .plate{transform:scale(1.015)}
.cell .cap{display:flex; justify-content:space-between; gap:10px; margin-top:9px; font-size:.8125rem}
.cell .cap span:last-child{font-family:var(--f-mono); font-size:.6875rem; color:var(--ink-2); letter-spacing:.06em}
.cell{grid-column:span var(--span, 4)}
@media (max-width:820px){ .sheet{grid-template-columns:repeat(2, minmax(0,1fr))} .sheet .cell{grid-column:span 1} .sheet .cell .plate{--ar:4/5 !important} .sheet .cell.wide{grid-column:span 2} .sheet .cell.wide .plate{--ar:3/2 !important} .sheet .cell:not(.wide) .ph .long{display:none} }

/* ---------- Meet Bloom + steps ---------- */
.about-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(40px,6vw,96px)}
.about-grid .lead{color:var(--ink)}
.princ{display:grid; gap:0; border-top:1px solid var(--line)}
.princ div{padding:20px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr); gap:20px}
.princ h3{font-family:var(--f-display); font-weight:500; font-size:var(--step-1)}
.princ p{color:var(--ink-2); font-size:.9688rem}
.steps{list-style:none; padding:0; margin:clamp(72px,9vw,120px) 0 0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0; counter-reset:s; border-top:1px solid var(--ink)}
.steps li{padding:28px 28px 8px 0; counter-increment:s; min-width:0}
.steps li + li{padding-left:28px; border-left:1px solid var(--line)}
.steps li::before{content:"Step " counter(s); font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2)}
.steps h3{font-family:var(--f-display); font-weight:500; font-size:var(--step-2); margin-top:16px}
.steps p{color:var(--ink-2); margin-top:10px; font-size:.9688rem}
.steps a{display:inline-block; margin-top:16px}
@media (max-width:820px){ .about-grid{grid-template-columns:minmax(0,1fr)} .steps{grid-template-columns:minmax(0,1fr)} .steps li + li{padding-left:0; border-left:0; border-top:1px solid var(--line)} .princ div{grid-template-columns:minmax(0,1fr); gap:6px} }

/* ---------- Branding band ---------- */
.band{background:var(--band); color:var(--band-ink)}
.band .eyebrow{color:var(--band-ink-2)}
.band-grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(40px,6vw,96px); align-items:start}
.band h2{font-family:var(--f-display); font-weight:400; font-size:var(--step-4); line-height:1.05}
.band h2 em{color:var(--glow)}
.band .lead{color:var(--band-ink-2); margin-top:22px}
.outcomes{list-style:none; padding:0; margin:0; border-top:1px solid var(--band-line)}
.outcomes li{padding:14px 0; border-bottom:1px solid var(--band-line); display:flex; gap:14px; align-items:baseline}
.outcomes li span{font-family:var(--f-mono); font-size:.6875rem; color:var(--band-ink-2); letter-spacing:.1em}
.price-tag{display:flex; flex-wrap:wrap; gap:8px 24px; align-items:baseline; margin-top:34px; padding-top:22px; border-top:1px solid var(--band-line)}
.price-tag strong{font-family:var(--f-display); font-weight:500; font-size:var(--step-3)}
.price-tag span{color:var(--band-ink-2); font-size:.9375rem}
.band .btn-line{color:var(--band-ink); --b:var(--band-ink)}
.band .btn-line:hover{background:var(--band-ink); color:var(--band)}
.band .ctas{margin-top:28px}
.band .fine{font-size:.8125rem; color:var(--band-ink-2); margin-top:16px; max-width:52ch}
@media (max-width:820px){ .band-grid{grid-template-columns:minmax(0,1fr)} }

/* ---------- Connect ---------- */
.connect-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(16px,2vw,24px)}
.brandcard{padding:clamp(24px,3vw,40px); border:1px solid var(--line); background:var(--surface); display:flex; flex-direction:column; gap:18px; min-width:0}
.brandcard.lead-brand{background:var(--ink); color:var(--on-ink); border-color:var(--ink)}
.brandcard .mono{opacity:.7}
.brandcard h3{font-family:var(--f-display); font-weight:500; font-size:var(--step-3); line-height:1.05}
.brandcard p{opacity:.8; font-size:.9688rem; max-width:44ch}
.brandcard .partner-logo{height:46px; width:auto; max-width:100%; object-fit:contain; object-position:left center}
.brandcard .bloom-logo{height:62px; width:175px; color:currentColor}
.foot .bloom-logo{height:34px; width:96px; margin-bottom:12px}
.links{display:flex; flex-direction:column; border-top:1px solid color-mix(in srgb, currentColor 20%, transparent); margin-top:auto}
.links a{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:15px 2px; border-bottom:1px solid color-mix(in srgb, currentColor 20%, transparent); text-decoration:none; transition:padding .25s, opacity .25s}
.links a:hover{padding-left:8px}
.links .lbl{display:flex; align-items:center; gap:12px; font-weight:500}
.links svg{width:18px; height:18px; flex:none}
.links .h{font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.06em; opacity:.65; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
@media (max-width:820px){ .connect-grid{grid-template-columns:minmax(0,1fr)} }

/* ---------- Final CTA ---------- */
.final{background:var(--paper-2); padding-block:clamp(80px,11vw,152px)}
.final h2{font-family:var(--f-display); font-weight:500; font-size:clamp(2.75rem, 8vw, 6.5rem); line-height:.96; letter-spacing:-.02em}
.final h2 em{font-weight:400; color:var(--dusk-ink)}
.final-grid{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:40px; align-items:end}
.contact{display:grid; gap:0; border-top:1px solid var(--ink)}
.contact div{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); min-width:0}
.contact .mono{color:var(--ink-2); font-size:.6875rem}
.contact .val{font-weight:600; user-select:all; overflow-wrap:anywhere; min-width:0}
.copy{all:unset; cursor:pointer; font:500 .6875rem var(--f-mono); letter-spacing:.1em; text-transform:uppercase; padding:6px 10px; border:1px solid var(--line); border-radius:999px; color:var(--ink-2); flex:none}
.copy:hover{color:var(--ink); border-color:var(--ink)}
.copy:focus-visible{outline:2px solid var(--dusk-ink); outline-offset:2px}
@media (max-width:820px){ .final-grid{grid-template-columns:minmax(0,1fr)} }

footer{padding-block:40px calc(40px + var(--sticky-h, 0px))}
.foot{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:24px 64px; font-size:.8125rem; color:var(--ink-2)}
.foot p + p{margin-top:8px}

/* ---------- Sticky mobile CTA ---------- */
.sticky{position:fixed; left:0; right:0; bottom:0; z-index:40; background:var(--ink); color:var(--on-ink);
  padding:10px max(16px, env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px, env(safe-area-inset-left,0px));
  display:none; align-items:center; justify-content:space-between; gap:12px; transform:translateY(110%); transition:transform .35s ease}
.sticky.show{transform:none}
.sticky .mono{font-size:.625rem; opacity:.75}
.sticky b{display:block; font-size:.875rem}
.sticky .btn{background:var(--on-ink); color:var(--ink); border-color:var(--on-ink); padding:11px 16px; font-size:.875rem}
@media (max-width:820px){ .sticky{display:flex} body{--sticky-h:68px} }

/* ---------- Lightbox ---------- */
.lb{position:fixed; inset:0; z-index:80; background:rgba(6,10,15,.92); color:#EEF1F3; display:grid; grid-template-rows:auto minmax(0,1fr) auto;
  padding:max(16px, env(safe-area-inset-top,0px)) max(16px, env(safe-area-inset-right,0px)) max(16px, env(safe-area-inset-bottom,0px)) max(16px, env(safe-area-inset-left,0px))}
.lb-top{display:flex; justify-content:space-between; align-items:center; gap:16px; font-family:var(--f-mono); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase}
.lb-stage{display:grid; place-items:center; min-height:0; padding:16px 0}
.lb-stage .plate{width:min(100%, calc((100vh - 200px) * 1.5)); --ar:3/2 !important; max-height:100%}
.lb-stage .plate.has-img{background:transparent}
.lb-stage .plate.has-img img{object-fit:contain}
.lb-stage .plate.has-img::after, .lb-stage .plate.has-img .vf, .lb-stage .plate.has-img .tag{display:none}
.lb-bot{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap}
.lb-cap b{display:block; font-family:var(--f-display); font-weight:500; font-size:1.375rem}
.lb-cap span{font-size:.875rem; opacity:.7}
.lb button{all:unset; cursor:pointer; border:1px solid rgba(255,255,255,.35); border-radius:999px; padding:10px 16px; font:600 .8125rem var(--f-body); color:#EEF1F3}
.lb button:hover{background:#EEF1F3; color:#0B1016}
.lb button:focus-visible{outline:2px solid #EEF1F3; outline-offset:2px}
.lb-nav{display:flex; gap:8px}

/* ---------- Promo code chip ---------- */
.code-chip{display:inline-flex; align-items:center; gap:10px; padding:6px 6px 6px 16px; border:1px dashed var(--ink-2); border-radius:999px; font-size:.875rem; white-space:nowrap}
.code-chip .code-l{font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2)}
.code-chip b{font-family:var(--f-mono); font-size:1rem; font-weight:500; letter-spacing:.16em; user-select:all}
.code-copy{all:unset; cursor:pointer; font:600 .75rem/1 var(--f-body); padding:9px 14px; border-radius:999px; background:var(--ink); color:var(--on-ink); transition:background .2s}
.code-copy:hover{background:var(--dusk)}
.code-copy:focus-visible{outline:2px solid var(--dusk-ink); outline-offset:2px}
.terms-top .code-chip{justify-self:start; margin-top:12px}
.hero-links{display:flex; flex-wrap:wrap; gap:8px 28px; margin-top:18px}
@media (max-width:420px){ .ctas .code-chip{flex:1 1 100%; justify-content:space-between} }

/* ---------- Contact sheet: real photos carry captions below, not labels on top ---------- */
.cell .plate.has-img .tag, .cell .plate.has-img::after{display:none}

/* ---------- Video in plates ---------- */
.plate.has-video video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#0B1016}
.plate.vert{background:#0B1016}
.plate.vert .vbg{position:absolute; inset:-40px; background-size:cover; background-position:center; filter:blur(28px) brightness(.5) saturate(1.1)}
.plate.vert .phonev{position:absolute; top:7%; bottom:7%; left:50%; aspect-ratio:9/16; transform:translateX(-50%); border-radius:18px; overflow:hidden; box-shadow:0 0 0 6px rgba(255,255,255,.08), 0 24px 48px -16px rgba(0,0,0,.6)}
.plate.vert .phonev video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.tri{display:inline-block; width:0; height:0; border-left:9px solid currentColor; border-top:6px solid transparent; border-bottom:6px solid transparent}
.vopen{all:unset; box-sizing:border-box; position:absolute; left:20px; bottom:20px; z-index:5; display:inline-flex; align-items:center; gap:10px; padding:10px 16px 10px 14px; border-radius:999px; background:rgba(10,14,20,.62); color:#F4F6F5; font:600 .8125rem/1 var(--f-body); cursor:pointer; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:background .2s}
.vopen:hover{background:rgba(10,14,20,.85)}
.vopen:focus-visible{outline:2px solid #fff; outline-offset:2px}

/* ---------- On film ---------- */
.film{margin-top:clamp(72px,9vw,120px)}
.film .sheet-head{margin-top:0}
.film-sub{color:var(--ink-2); font-size:.9375rem}
.stage{position:relative; aspect-ratio:16/9; max-width:100%; margin-top:24px; background:#0B1016; overflow:hidden}
.stage video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#0B1016}
.stage.playing video{object-fit:contain}
.stage::after{content:""; position:absolute; inset:auto 0 0 0; height:45%; background:linear-gradient(rgba(8,12,18,0), rgba(8,12,18,.62)); pointer-events:none}
.stage-play{all:unset; box-sizing:border-box; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2; display:inline-flex; align-items:center; gap:12px; padding:16px 26px 16px 22px; border-radius:999px; background:rgba(244,246,245,.94); color:#111A23; font:600 1rem/1 var(--f-body); cursor:pointer; transition:transform .25s}
.stage-play:hover{transform:translate(-50%,-50%) scale(1.04)}
.stage-play:focus-visible{outline:2px solid #fff; outline-offset:3px}
.stage-play .tri{border-left-width:12px; border-top-width:8px; border-bottom-width:8px}
.stage-cap{position:absolute; left:24px; right:24px; bottom:20px; z-index:2; display:flex; flex-direction:column; gap:2px; color:#F4F6F5; text-shadow:0 1px 6px rgba(0,0,0,.5)}
.stage-cap b{font-family:var(--f-display); font-weight:500; font-size:var(--step-2)}
.stage-cap span{font-size:.875rem; opacity:.85}
.stage.playing::after, .stage.playing .stage-cap{display:none}
@media (max-width:600px){ .stage-cap{display:none} .stage-play{padding:12px 18px 12px 16px; font-size:.875rem} }
.picks{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(10px,1.4vw,18px); margin-top:clamp(10px,1.4vw,18px)}
.pick{all:unset; box-sizing:border-box; cursor:pointer; display:block; min-width:0}
.pick .pf{display:block; aspect-ratio:16/9; overflow:hidden; background:#0B1016}
.pick img{width:100%; height:100%; object-fit:cover; opacity:.7; transition:opacity .25s, transform .6s cubic-bezier(.2,.7,.2,1)}
.pick:hover img, .pick[aria-pressed="true"] img{opacity:1}
.pick:hover img{transform:scale(1.03)}
.pick .pt{display:block; margin-top:8px; padding-top:8px; border-top:2px solid transparent; font-size:.8125rem; color:var(--ink-2)}
.pick[aria-pressed="true"] .pt{border-color:var(--ink); color:var(--ink); font-weight:600}
.pick:focus-visible{outline:2px solid var(--dusk-ink); outline-offset:3px}
.reels-head{display:flex; justify-content:space-between; align-items:baseline; gap:8px 16px; flex-wrap:wrap; margin-top:clamp(48px,6vw,72px); padding-bottom:14px; border-bottom:1px solid var(--line)}
.reels-head h4{margin:0; font-family:var(--f-display); font-weight:500; font-size:var(--step-2)}
.reels-head .mono{color:var(--ink-2)}
.reel-strip{display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:clamp(10px,1.2vw,16px); margin-top:20px}
.reel{all:unset; box-sizing:border-box; cursor:pointer; display:block; min-width:0}
.reel-frame{position:relative; display:block; aspect-ratio:9/16; overflow:hidden; border-radius:12px; background:#0B1016}
.reel-frame img, .reel-frame video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.reel-frame img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.reel:hover .reel-frame img{transform:scale(1.03)}
.reel-frame .tri{position:absolute; left:12px; bottom:12px; z-index:2; color:#fff; filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.reel-cap{display:block; margin-top:9px; font-size:.8125rem}
.reel:focus-visible{outline:2px solid var(--dusk-ink); outline-offset:3px; border-radius:12px}
@media (max-width:820px){
  .picks{grid-template-columns:repeat(2, minmax(0,1fr))}
  .reel-strip{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding-bottom:4px}
  .reel-strip::-webkit-scrollbar{display:none}
  .reel{flex:0 0 42%; scroll-snap-align:start}
  .tabs{-webkit-mask-image:linear-gradient(90deg,#000 78%,transparent); mask-image:linear-gradient(90deg,#000 78%,transparent); padding-right:56px}
}

/* ---------- Reviews ---------- */
.reviews{background:var(--paper-2)}
.rev-grid{display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); gap:clamp(40px,6vw,96px); align-items:start}
.rev-score{position:sticky; top:110px; display:grid; gap:18px; align-content:start; justify-items:start}
.score{display:flex; align-items:center; gap:18px; margin-top:6px}
.score .num{font-family:var(--f-display); font-weight:500; font-size:clamp(3.5rem,7vw,5.25rem); line-height:.9; letter-spacing:-.02em}
.rev-stars{display:flex; gap:3px; color:var(--glow)}
.rev-stars svg{width:18px; height:18px; fill:currentColor}
.rev-count{display:block; margin-top:6px; color:var(--ink-2); font-size:.9375rem}
.rev-list{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 clamp(24px,3vw,48px)}
.rev{margin:0; padding:26px 0 28px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:18px; min-width:0}
.rev blockquote{margin:0; font-family:var(--f-display); font-size:1.1875rem; line-height:1.45}
.rev figcaption{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-top:auto; font-size:.875rem; font-weight:600}
.rev figcaption span{font-family:var(--f-mono); font-size:.6875rem; font-weight:400; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2)}
@media (max-width:900px){ .rev-grid{grid-template-columns:minmax(0,1fr)} .rev-score{position:static} }
@media (max-width:640px){ .rev-list{grid-template-columns:minmax(0,1fr)} }

/* ---------- Meet Bloom: turnaround promise ---------- */
.about{background:var(--paper)}
.promise{display:grid; gap:10px; max-width:420px; margin-top:clamp(32px,4vw,56px); padding-top:22px; border-top:1px solid var(--ink)}
.promise .mono{color:var(--ink-2)}
.promise strong{font-family:var(--f-display); font-weight:500; font-size:clamp(2.5rem,5vw,4rem); line-height:1; letter-spacing:-.02em}
.promise strong em{font-style:italic; font-weight:400; color:var(--dusk-ink)}
.promise p{color:var(--ink-2)}
.about-link{display:inline-block; margin-top:24px}

/* ---------- Agent branding: examples ---------- */
.brand-reels{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; width:100%; max-width:440px; justify-self:end}
.band .reel-cap{color:var(--band-ink)}
.band .reel-cap small{display:block; margin-top:2px; font-size:.75rem; color:var(--band-ink-2)}
.band-outcomes{margin-top:clamp(56px,7vw,96px)}
.band-outcomes .outcomes{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); column-gap:32px; margin-top:14px}
@media (max-width:820px){ .brand-reels{justify-self:start; max-width:100%} .band-outcomes .outcomes{grid-template-columns:minmax(0,1fr)} }

/* ---------- Final CTA note + footer on phones ---------- */
.final-note{margin-top:22px; color:var(--ink-2); font-size:var(--step-1); max-width:44ch}
@media (max-width:720px){ .foot{grid-template-columns:minmax(0,1fr)} }

/* ---------- Lightbox video ---------- */
.lb-stage video{display:block; max-width:100%; background:#000}
.lb-stage video.lbv:not(.vert){width:min(100%, calc((100vh - 190px) * 16 / 9)); aspect-ratio:16/9; height:auto}
.lb-stage video.lbv.vert{height:calc(100vh - 190px); aspect-ratio:9/16; width:auto}
@supports (height:100dvh){ .lb-stage video.lbv.vert{height:calc(100dvh - 190px)} .lb-stage video.lbv:not(.vert){width:min(100%, calc((100dvh - 190px) * 16 / 9))} }

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important; animation:none !important}
  .js .plate.pending{filter:none}
}

/* ---------- Type matched to the main website ----------
   Bodoni Moda at a fixed optical size keeps its thin strokes visible at headline sizes,
   with the site's heading weight (600) and DM Mono for labels. */
body{font-variation-settings:"opsz" 14; font-optical-sizing:none}
.h2, .hero h1, .map-head h3, .big-pct, .acc-t, .tp-copy h3, .sheet-head h3, .princ h3, .steps h3, .band h2,
.price-tag strong, .brandcard h3, .final h2, .lb-cap b, .stage-cap b, .reels-head h4, .score .num, .promise strong{font-weight:600}
.x, .promise strong em{font-weight:600}
.rev blockquote{font-weight:500}

/* ---------- New-client offer banner (all partner pages) ---------- */
.offer-banner{display:block; position:relative; z-index:51; height:38px; overflow:hidden; background:#262B45; color:#F4F6F5; text-decoration:none; font:600 .74rem/1 var(--f-body); letter-spacing:.14em; text-transform:uppercase; border-bottom:1px solid rgba(255,255,255,.08)}
.offer-banner:focus-visible{outline:2px solid var(--glow); outline-offset:-3px}
.ob-track{display:flex; width:max-content; height:100%; align-items:center; animation:obScroll 48s linear infinite}
.offer-banner:hover .ob-track, .offer-banner:focus-visible .ob-track{animation-play-state:paused}
.ob-run{display:flex; align-items:center}
.ob-item{display:inline-block;white-space:nowrap}
.ob-star{display:inline-block;margin:0 32px;color:var(--glow);font-size:.62rem;letter-spacing:0;vertical-align:1px}
.ob-code{font-family:var(--f-mono); font-weight:500; letter-spacing:.2em; color:var(--glow)}
@keyframes obScroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){
  .ob-track{animation:none; width:100%; justify-content:center}
  .ob-run + .ob-run, .ob-run .ob-item:nth-child(n+3){display:none}
  .ob-run .ob-item:nth-child(2) .ob-star{display:none}
}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* ---------- Partnerships page + partner list ---------- */
.perks{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); border-top:1px solid var(--ink); counter-reset:p}
.perks li{padding:28px 28px 32px 0; counter-increment:p; border-bottom:1px solid var(--line); min-width:0}
.perks li:not(:nth-child(3n+1)){padding-left:28px; border-left:1px solid var(--line)}
.perks li::before{content:counter(p, decimal-leading-zero); display:block; font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.12em; color:var(--glow-ink); margin-bottom:14px}
.perks h3{font-family:var(--f-display); font-weight:600; font-size:var(--step-1); line-height:1.15}
.perks p{margin-top:10px; color:var(--ink-2); font-size:.9375rem}
@media (max-width:900px){ .perks{grid-template-columns:repeat(2, minmax(0,1fr))} .perks li:not(:nth-child(3n+1)){padding-left:0; border-left:0} .perks li:nth-child(2n){padding-left:24px; border-left:1px solid var(--line)} }
@media (max-width:560px){ .perks{grid-template-columns:minmax(0,1fr)} .perks li:nth-child(2n){padding-left:0; border-left:0} }
.final-note{margin-top:22px; color:var(--ink-2); font-size:var(--step-1); max-width:44ch}
.hub-head h1{max-width:12ch}
.hub-foot{align-items:end}
.foot-bar{display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:space-between; align-items:center}
.quiet-link{color:var(--ink-2); text-decoration:none}
.quiet-link:hover{color:var(--ink); text-decoration:underline; text-underline-offset:3px}
.plist-sec{padding-top:0}
.plist{border-top:1px solid var(--ink)}
.prow{display:grid; grid-template-columns:220px minmax(0,1fr) auto; gap:16px 40px; align-items:center; padding:30px 0; border-bottom:1px solid var(--line); text-decoration:none; color:inherit}
.prow .plogo{display:flex; align-items:center; height:56px}
.prow .plogo img{max-height:56px; max-width:200px; width:auto}
.prow h2{font-family:var(--f-display); font-weight:600; font-size:var(--step-2); line-height:1.1}
.prow .meta{display:block; margin-top:6px; color:var(--ink-2); font-size:.9375rem}
.prow .go{font-weight:600; font-size:.9375rem; white-space:nowrap}
.prow .go .arr{display:inline-block; transition:transform .25s}
.prow:hover h2{color:var(--dusk-ink)}
.prow:hover .go .arr{transform:translateX(4px)}
.prow:focus-visible{outline:2px solid var(--dusk-ink); outline-offset:4px}
.missing{margin-top:clamp(32px,4vw,48px); color:var(--ink-2)}
@media (max-width:760px){ .prow{grid-template-columns:minmax(0,1fr)} .prow .go{justify-self:start} }

/* ---------- Heading polish: one sentence per line, no stranded words ---------- */
.line{display:block}
@media (min-width:901px){ .hub-hero .hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)} }

/* ---------- Logo links: Bloom → home, partner → their website ---------- */
.logo-link{display:inline-flex; align-items:center; color:inherit; text-decoration:none; border-radius:2px; transition:opacity .2s}
.logo-link:hover{opacity:.75}
.logo-link:focus-visible{outline:2px solid var(--dusk-ink); outline-offset:4px}
.brandlock .logo-link, .lockup .logo-link{flex:none}
.prow{position:relative}
.prow .pmain{display:block; text-decoration:none; color:inherit}
.prow .pmain::after{content:""; position:absolute; inset:0; z-index:0}
.prow .plogo{position:relative; z-index:1}
.prow .go{position:relative; z-index:1; text-decoration:none; color:inherit}
.prow:hover .pmain h2{color:var(--dusk-ink)}
.prow:hover .go .arr{transform:translateX(4px)}
.prow .pmain:focus-visible{outline:none}
.prow:focus-within{outline:2px solid transparent}
.prow .pmain:focus-visible h2{text-decoration:underline; text-underline-offset:4px}

/* "Proud to serve" logos on the Partnerships page (content: src/content/affiliations.js).
   Each logo sits on the tile its own artwork was made for; logos are never recolored. */
.aff-sec{background:var(--surface); border-top:1px solid var(--line)}
.aff-group + .aff-group{margin-top:clamp(28px,3vw,40px)}
.aff-label{font-family:var(--f-mono); font-weight:400; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); margin:0 0 14px}
.aff-grid{list-style:none; margin:0; padding:0; display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
@media (min-width:700px){ .aff-grid{grid-template-columns:repeat(auto-fill,minmax(176px,1fr))} }
.aff-tile{display:flex; align-items:center; justify-content:center; aspect-ratio:16/9; padding:16px 20px; background:#fff; border:1px solid rgba(17,26,35,.10); transition:border-color .2s, transform .2s}
.aff-tile.dark{background:#3F476B; border-color:#3F476B}
.aff-tile.black{background:#000; border-color:#000; padding:8px}
.aff-tile img{display:block; max-width:100%; max-height:44px; width:auto; height:auto; object-fit:contain}
.aff-tile.black img{max-height:76px}
.aff-tile:hover{border-color:var(--glow); transform:translateY(-2px)}
.aff-tile:focus-visible{outline:2px solid var(--glow); outline-offset:3px}
.aff-note{margin-top:clamp(24px,3vw,32px); font-size:var(--step--1); line-height:1.55; color:var(--ink-2); max-width:72ch}
@media (prefers-reduced-motion:reduce){ .aff-tile{transition:none} .aff-tile:hover{transform:none} }