/* NHD Tech. One diorama, held in place while the story scrolls past it. */

@font-face { font-family: "Jakarta"; src: url("/assets/fonts/jakarta-latin.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --ink: #0F1E2E;
  --text: #2B3A4A;
  --muted: #51606F;
  --bg: #FBF8F4;
  --paper: #F6EDE7; /* the render's own backdrop: the city's window is this colour */
  --surface: #FFFFFF;
  --step: #ECE9E1;
  --teal: #0F6B62;
  --teal-press: #0B524B;
  --amber: #A0460C;
  --lit: #F6C453;
  --night: #4F6382;
  --night-page: #3A4960;
  --r-lg: 28px;
  --r-md: 16px;
  --r-sm: 12px;
  --bar: 64px;
  --gutter: clamp(16px, 3vw, 32px);
  --ease: cubic-bezier(.65, 0, .35, 1);
  --out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 1.0625rem/1.55 "Inter", system-ui, sans-serif; }
h1, h2, h3 { font-family: "Jakarta", "Inter", sans-serif; color: var(--ink); margin: 0; letter-spacing: -0.025em; }
p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }

.skip { position: absolute; left: var(--gutter); top: -100px; background: var(--ink); color: var(--bg); padding: .6rem 1rem; z-index: 50; }
.skip:focus { top: 12px; }

/* ---------- bar ---------- */
.bar { position: sticky; top: 0; z-index: 20; height: var(--bar); display: flex; align-items: center; gap: 28px; padding: 0 var(--gutter); background: var(--bg); transition: background .9s var(--ease), color .9s var(--ease); }
.wordmark { font: 800 1.25rem/1 "Jakarta", sans-serif; letter-spacing: -0.03em; color: var(--ink); text-decoration: none; margin-right: auto; }
.nav { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
.nav a, .bar-phone { text-decoration: none; font-size: .95rem; font-weight: 500; color: var(--ink); }
.nav a:hover, .bar-phone:hover { color: var(--teal); }
.bar-phone { font-weight: 600; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: .8rem 1.35rem; border-radius: var(--r-sm); font: 600 1rem/1.2 "Inter", sans-serif; text-decoration: none; transition: background .18s ease, transform .14s ease, color .18s ease; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary { background: var(--teal); color: #fff; }
.btn-primary:hover { background: var(--teal-press); }
.btn-quiet { background: var(--step); color: var(--ink); }
.btn-quiet:hover { background: #E1DDD2; }
.bar-cta { min-height: 42px; padding: .6rem 1.1rem; white-space: nowrap; }
.wordmark { white-space: nowrap; }
/* the badge's N beside the name; the whole badge in the footer */
.wordmark { display: inline-flex; align-items: center; gap: 10px; }
.wordmark img { width: 36px; height: 36px; border-radius: 50%; flex: none; }
.foot-badge { width: clamp(112px, 14vw, 160px); height: auto; }
.cta-short { display: none; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ---------- the story: a held stage, chapters scrolling past ---------- */
.story { position: relative; }
.stage { position: sticky; top: var(--bar); height: calc(100svh - var(--bar)); margin-bottom: calc(var(--bar) - 100svh); overflow: hidden; container-type: size; background: var(--bg); transition: background 1.1s var(--ease); }
/* the model sits on a rounded card and its skyline rises out of it. The card covers source rows 480-1420 of the
   render (tools/city.py CARD); the whole group (skyline + card) is centred in the stage. */
.scene { --w: min(calc(64cqw - 2 * var(--gutter)), calc((100cqh - 48px) * 2752 / 1420)); position: absolute; right: var(--gutter);
         width: var(--w); height: calc(var(--w) * 940 / 2752); top: calc(50% - var(--w) * 230 / 2752); }
.ch { position: relative; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--bar) + 48px) var(--gutter) 48px; pointer-events: none; }
.panel { pointer-events: auto; width: min(36%, 34rem); }
.panel > * + * { margin-top: 16px; }

h1 { font-size: clamp(2.4rem, 3.5vw, 3.9rem); font-weight: 800; line-height: 1; letter-spacing: -0.035em; }
h2 { font-size: clamp(1.9rem, 2.9vw, 2.9rem); font-weight: 800; line-height: 1.04; }
.step { font-size: clamp(2.6rem, 4.2vw, 4.2rem); font-weight: 800; line-height: 1; margin-top: 28px; }
.lead { font-size: 1.2rem; color: var(--ink); margin-top: 24px; max-width: 34em; }
.panel p { color: var(--ink); }
.hint { color: var(--muted) !important; font-size: .95rem; }

/* the three doors: a list of filled panels, the serious one dark */
.doors { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 8px; }
.door { display: block; padding: 18px 20px; border-radius: var(--r-md); background: var(--step); text-decoration: none; transition: background .2s ease, transform .2s var(--out); }
.door:hover, .door:focus-visible, .door.is-hot { background: #E3EDEA; transform: translateX(4px); }
.door-name { display: block; font: 700 1.2rem/1.2 "Jakarta", sans-serif; color: var(--ink); letter-spacing: -0.02em; }
.door-line { display: block; margin-top: 4px; color: var(--ink); }
.door-eg { display: block; margin-top: 4px; color: var(--muted); font-size: .95rem; }
.door-dark { background: var(--ink); }
.door-dark .door-name, .door-dark .door-line { color: var(--bg); }
.door-dark .door-eg { color: #B9C3CC; }
.door-dark:hover, .door-dark:focus-visible, .door-dark.is-hot { background: #1B3047; }

.process { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 18px; }
.process li { color: var(--ink); font-size: 1.1rem; }
.process strong { display: block; font: 700 1.35rem/1.2 "Jakarta", sans-serif; letter-spacing: -0.02em; }

.panel-people { display: grid; gap: 24px; }
.portrait { width: 180px; aspect-ratio: 4 / 5; object-fit: cover; }
.creds { padding: 0; margin: 20px 0 0; list-style: none; display: grid; gap: 8px; color: var(--ink); }
.creds a { color: var(--teal); text-underline-offset: 3px; }
.area { color: var(--muted) !important; font-size: .95rem; }

.email { margin-top: 20px; }
.placeholder { background: #FFE9A8; color: var(--ink); padding: 0 .3em; }

/* night: the close happens after dark */
body[data-ch="night"] .stage, body[data-ch="night"] .bar { background: var(--night-page); }
body[data-ch="night"] .wordmark, body[data-ch="night"] .nav a, body[data-ch="night"] .bar-phone { color: var(--bg); }
.ch[data-ch="night"] h2, .ch[data-ch="night"] p { color: var(--bg); }
.ch[data-ch="night"] .btn-quiet { background: #22374D; color: var(--bg); }
.ch[data-ch="night"] .btn-quiet:hover { background: #2C4560; }

/* ---------- footer: the name returns, full width ---------- */
.foot { background: var(--ink); color: #C9D2DA; padding: 96px var(--gutter) 40px; display: grid; gap: 16px; }
.foot-name { font: 800 clamp(4rem, 17vw, 15rem)/.85 "Jakarta", sans-serif; letter-spacing: -0.05em; color: var(--bg); margin: 0 0 24px; }
.foot-links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.foot a { color: var(--bg); text-underline-offset: 3px; }
.small { font-size: .9rem; color: #9AA7B3; }

/* ---------- the city: one rendered model, a camera over it ---------- */
.scene { container-type: size; }
.card { position: absolute; inset: 0; overflow: hidden; border-radius: var(--r-lg); background: var(--paper); transition: background 1.1s var(--ease); }
body[data-ch="night"] .card { background: var(--night); }
.rise, .fxl, .pins { position: absolute; inset: 0; pointer-events: none; }
.fxl { transition: opacity .5s ease, visibility .5s; }
.rise { clip-path: inset(-100vh -50vw 100% -50vw); transition: opacity .5s ease, visibility .5s; } /* only what stands above the card's top edge */
.rise-img { position: absolute; left: 0; top: 0; width: 100%; height: auto; }
.rise-night { opacity: 0; transition: opacity 1.4s var(--ease); }
body[data-ch="night"] .rise-night { opacity: 1; }
.cam { position: absolute; left: 0; top: 0; width: 100cqw; aspect-ratio: 2752 / 1536; transform-origin: 0 0; will-change: transform; opacity: 0; transition: opacity 1s ease; }
.cam.ready { opacity: 1; }
.city, .city img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.city-night { opacity: 0; transition: opacity 1.4s var(--ease); }
body[data-ch="night"] .city-night { opacity: 1; }
.overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* the highlight has no outline: the chosen district lifts and the rest of the model softens, like a lens pulling focus.
   Each layer filters what is behind it through a feathered mask (tools/masks.py), and is hidden when idle so it costs nothing. */
.focus i { position: absolute; inset: 0; pointer-events: none; visibility: hidden; opacity: 0; mask-size: 100% 100%; -webkit-mask-size: 100% 100%;
           transition: opacity .7s var(--ease), backdrop-filter .7s var(--ease), -webkit-backdrop-filter .7s var(--ease), visibility 0s .7s; }
.veil { background: rgb(246 237 230 / .2); -webkit-backdrop-filter: blur(0) saturate(1); backdrop-filter: blur(0) saturate(1); }
.glow { -webkit-backdrop-filter: brightness(1); backdrop-filter: brightness(1); }
.veil-res { -webkit-mask-image: url(/images/city/veil-res.png); mask-image: url(/images/city/veil-res.png); }
.veil-smb { -webkit-mask-image: url(/images/city/veil-smb.png); mask-image: url(/images/city/veil-smb.png); }
.veil-pub { -webkit-mask-image: url(/images/city/veil-pub.png); mask-image: url(/images/city/veil-pub.png); }
.glow-res { -webkit-mask-image: url(/images/city/glow-res.png); mask-image: url(/images/city/glow-res.png); }
.glow-smb { -webkit-mask-image: url(/images/city/glow-smb.png); mask-image: url(/images/city/glow-smb.png); }
.glow-pub { -webkit-mask-image: url(/images/city/glow-pub.png); mask-image: url(/images/city/glow-pub.png); }
.hit polygon { fill: transparent; }
.hit { cursor: pointer; outline: none; }
.hit:focus-visible polygon { stroke: var(--teal); stroke-width: 9; }

/* hover a district (or reach a step about it): focus pulls to it */
.scene[data-hover="res"] :is(.veil-res, .glow-res), .scene[data-hover="smb"] :is(.veil-smb, .glow-smb), .scene[data-hover="pub"] :is(.veil-pub, .glow-pub),
.scene.spot-res:not([data-hover]) :is(.veil-res, .glow-res), .scene.spot-smb:not([data-hover]) :is(.veil-smb, .glow-smb), .scene.spot-pub:not([data-hover]) :is(.veil-pub, .glow-pub) {
  visibility: visible; opacity: 1; transition: opacity .7s var(--ease), backdrop-filter .7s var(--ease), -webkit-backdrop-filter .7s var(--ease), visibility 0s; }
.scene[data-hover] .veil, .scene[class*="spot-"] .veil { -webkit-backdrop-filter: blur(5px) saturate(.5); backdrop-filter: blur(5px) saturate(.5); }
.scene[data-hover] .glow, .scene[class*="spot-"] .glow { -webkit-backdrop-filter: brightness(1.07) saturate(1.12); backdrop-filter: brightness(1.07) saturate(1.12); }

/* chapter effects, switched on in order as the story passes them */
.scene .fx { opacity: 0; transition: opacity .8s ease; }
.on-connect .wires { opacity: 1; }
.wire { fill: none; stroke: var(--teal); stroke-width: 6; stroke-linecap: round; }
.packet { fill: none; stroke: var(--lit); stroke-width: 14; stroke-linecap: round; stroke-dasharray: .025 .975; animation: packet 2.4s linear infinite; }
.wifi { fill: none; stroke: var(--teal); stroke-width: 7; stroke-linecap: round; animation: wifi 1.8s ease-in-out infinite; }
.wifi.w2 { animation-delay: .2s; } .wifi.w3 { animation-delay: .4s; }
.on-protect .locks { opacity: 1; }
.lock { transform-box: fill-box; transform-origin: 50% 100%; scale: 0; transition: scale .6s var(--out); }
.on-protect .lock { scale: 1; }
.on-protect .lock.l1 { transition-delay: .15s; } .on-protect .lock.l2 { transition-delay: .3s; } .on-protect .lock.l3 { transition-delay: .45s; }
body[data-ch="night"] .fx { opacity: 0; }

.paused * { animation-play-state: paused !important; }

/* pins: each district is labelled where you would point, so it reads as something to press.
   They hold their size while the camera moves (site.js places them) and show while the districts are being chosen. */
.pin { position: absolute; left: 0; top: 0; transform: translate(-50%, calc(-100% - 10px)); pointer-events: auto; display: inline-flex; align-items: center; gap: 10px;
       padding: 6px 6px 6px 16px; border-radius: 999px; background: #fff; color: var(--ink); font: 600 .95rem/1 "Inter", sans-serif; white-space: nowrap; text-decoration: none;
       transition: background .25s ease, color .25s ease, opacity .4s ease; }
.pin::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 0 0 3px 0; }
.pin-go { width: 28px; height: 28px; border-radius: 50%; background: var(--teal); flex: none;
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M9 14h10m-4-4 4 4-4 4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.pin-long { display: none; }
.pin.is-hot { background: var(--teal); color: #fff; }
.pin.is-hot .pin-go { background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M9 14h10m-4-4 4 4-4 4' fill='none' stroke='%230F6B62' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.pin.is-hot .pin-short { display: none; }
.pin.is-hot .pin-long { display: inline; }
.pins { opacity: 0; transition: opacity .4s ease; }
.pins .pin { pointer-events: none; }
body:is([data-ch="hero"], [data-ch="doors"]) .pins { opacity: 1; }
body:is([data-ch="hero"], [data-ch="doors"]) .pins .pin { pointer-events: auto; }
@keyframes packet { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes wifi { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* into a district (assets/site.js): the copy clears away, the card grows into the district page's header picture
   while the camera dives, the close-up fades in over it, and the page changes under an identical picture */
/* during the film the card clips to a window that may reach past its edges (assets/site.js sets the clip),
   and the layers the film animates drop their own fades so the two never fight */
.scene.film .card { overflow: visible; }
.scene.film :is(.rise, .fxl) { opacity: 0 !important; visibility: hidden !important; transition: opacity .11s ease, visibility 0s .11s; }
.shot-over { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; transition: opacity .42s ease; }
.shot-over.on { opacity: 1; }
.shot-over.now { transition: none; }
.ch .panel { transition: opacity .45s var(--ease), transform .45s var(--ease), background 1.1s var(--ease); }
body.diving .ch .panel { opacity: 0; transform: translateY(18px); transition-duration: .3s; }
body:is(.diving, .unwinding) .pins { opacity: 0; transition-duration: .15s; }
body.diving .focus { visibility: hidden; } /* a blur over a moving picture would be redrawn every frame */
/* the enterprise district is the dark one, so the page darkens as the camera dives into it */
.stage::before { content: ""; position: absolute; inset: 0; background: var(--ink); opacity: 0; transition: opacity .9s var(--ease); }
body.dive-dark .stage::before { opacity: 1; }
body.dive-dark .bar { background: var(--ink); }
body.dive-dark :is(.wordmark, .nav a, .bar-phone) { color: var(--bg); }

/* ---------- phone: the diorama on top, the story below it ---------- */
@media (max-width: 1080px) {
  .nav { display: none; }
}
@media (max-width: 860px) {
  .bar { gap: 14px; }
  .bar-phone { display: none; }
  .cta-long { display: none; }
  .cta-short { display: inline; }
  .scene { left: var(--gutter); right: var(--gutter); width: auto; top: 8px; height: 40svh; }
  .card { border-radius: var(--r-md); }
  .rise { display: none; }
  .pin { font-size: .85rem; padding: 5px 5px 5px 12px; gap: 8px; }
  .pin-go { width: 24px; height: 24px; }
  .ch { align-items: flex-end; padding: 0 var(--gutter); }
  .panel { width: 100%; background: var(--bg); padding: 24px 0 40px; transition: background 1.1s var(--ease); }
  .ch[data-ch="night"] .panel { background: var(--night-page); }
  .ch[data-ch="hero"] { min-height: 100svh; }
  h1 { font-size: clamp(2.3rem, 10vw, 3.2rem); }
  .lead { font-size: 1.08rem; }
  .step { font-size: 2.6rem; }
  .portrait { width: 132px; }
}

@media (prefers-reduced-motion: reduce) {
  .cam, .lock, .stage, .door, .city-night, .focus i { transition: none !important; }
  .packet, .wifi { animation: none !important; }
}

/* ---------- district pages ---------- */
.door-hero { padding: 8px var(--gutter) 0; }
.door-shot { display: block; aspect-ratio: 2752 / 940; border-radius: var(--r-lg); overflow: hidden; background: var(--paper); }
.door-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.door-intro { padding: 48px 0 24px; max-width: 46rem; }
.door-intro h1 { margin-top: 12px; }
.door-back a { font-weight: 600; color: var(--teal); text-decoration: none; }
.door-back a::before { content: "← "; }
.door-back a:hover { text-decoration: underline; text-underline-offset: 3px; }
.door-body { padding: 24px var(--gutter) 96px; }
.bar :is(.nav a[aria-current="page"]) { color: var(--teal); }
/* the enterprise district is the dark one */
.door-page-dark { background: var(--ink); color: #C9D2DA; }
.door-page-dark .bar { background: var(--ink); }
.door-page-dark :is(.wordmark, .nav a, .bar-phone, h1, .lead) { color: var(--bg); }
.door-page-dark .door-back a, .door-page-dark .nav a[aria-current="page"] { color: #7FD1C5; }
.door-page-dark .btn-quiet { background: #22374D; color: var(--bg); }
.door-page-dark .btn-quiet:hover { background: #2C4560; }
.door-page-dark .door-shot { background: #1B3047; }
/* arriving, the page builds itself in under the picture: the name rises out of a mask, then the rest follows
   (assets/door.js sets .arrive before the first paint and .go once the page is shown) */
.door-intro h1 { overflow: hidden; padding-bottom: .08em; }
.door-intro h1 span { display: inline-block; }
.arrive :is(.door-back, .door-intro .lead, .door-intro .actions, .door-body) { opacity: 0; transform: translateY(14px); }
.arrive .door-intro h1 span { transform: translateY(110%); }
.arrive.go :is(.door-back, .door-intro .lead, .door-intro .actions, .door-body) { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }
.arrive.go .door-intro h1 span { transform: none; transition: transform .8s cubic-bezier(.2, .7, .1, 1) .08s; }
.arrive.go .door-intro .lead { transition-delay: .22s; }
.arrive.go .door-intro .actions { transition-delay: .32s; }
.arrive.go .door-body { transition-delay: .42s; }
/* leaving for the neighbourhood, the words clear away first */
.leave :is(.door-intro, .door-body) { opacity: 0; transform: translateY(14px); transition: opacity .28s var(--ease), transform .28s var(--ease); }
@media (max-width: 860px) {
  .door-shot { aspect-ratio: 16 / 11; border-radius: var(--r-md); }
  .door-intro { padding-top: 32px; }
}

/* About, Privacy, Security: one readable column in the district frame */
.info-back a { font-weight: 600; color: var(--teal); text-decoration: none; }
.info-back a::before { content: "← "; }
.info-back a:hover { text-decoration: underline; text-underline-offset: 3px; }
.info { max-width: 46rem; }
.info h2 { margin-top: 48px; font-size: clamp(1.4rem, 2.4vw, 1.75rem); }
.info h2:first-child { margin-top: 8px; }
.info p, .info li { font-size: 1.05rem; max-width: 40em; }
.info p { margin-top: 12px; }
.info ul { margin: 12px 0 0; padding-left: 1.2em; display: grid; gap: 8px; }
.info a:not(.btn) { color: var(--teal); font-weight: 600; text-underline-offset: 3px; }
.info .btn { margin-top: 12px; }
.info .small { color: var(--muted); font-size: .95rem; }
.info h2[id] { scroll-margin-top: calc(var(--bar) + 16px); }
.info-sectors { list-style: none; padding: 0 !important; display: flex !important; flex-wrap: wrap; gap: 8px !important; }
.info-sectors li { padding: .45rem .9rem; border-radius: 999px; background: var(--step); color: var(--ink); font-weight: 600; font-size: .95rem; }
.q-wrap { margin-top: 20px; overflow-x: auto; }
.q-table { width: 100%; max-width: 52rem; border-collapse: separate; border-spacing: 0; }
.q-table th, .q-table td { padding: 14px 12px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--step); }
.q-table thead th { font-size: .95rem; color: var(--muted); font-weight: 600; border-bottom-width: 2px; }
.q-table thead th a { color: var(--ink) !important; }
.q-table td, .q-table thead th:not(:first-child) { text-align: center; width: 6.5rem; }
.q-table tbody th { font-weight: 400; }
.q-name { display: block; font-weight: 700; color: var(--ink); }
.q-what { display: block; margin-top: 2px; color: var(--muted); font-size: .95rem; }
.q-yes { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--teal); color: #fff; font-weight: 700; }
.q-no { display: inline-block; width: 10px; height: 2px; background: #C9C4B8; vertical-align: middle; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 600px) {
  .q-table th, .q-table td { padding: 12px 6px; }
  .q-table td, .q-table thead th:not(:first-child) { width: 4.2rem; }
  .q-table thead th { font-size: .85rem; }
  .q-yes { width: 26px; height: 26px; }
}
.info-doors { list-style: none; padding: 0 !important; gap: 12px !important; }
.info-doors li { display: grid; gap: 4px; padding: 20px 22px; border-radius: var(--r-md); background: var(--step); }
.info-doors a { font: 700 1.15rem/1.3 "Jakarta", sans-serif; text-decoration: none; }
.info-doors a:hover { text-decoration: underline; }

/* ---------- the request form: tap what it is about, say a little more, say how to reply ---------- */
#request { max-width: 72rem; scroll-margin-top: calc(var(--bar) + 16px); }
.door-body#request { padding-top: 56px; }
/* managed plans (Business): three cards, the middle one leads */
.plans { max-width: 72rem; padding-top: 56px; scroll-margin-top: calc(var(--bar) + 16px); }
/* Business tabs: a two-part switch above the form and the plans */
.tabs { display: flex; gap: 4px; width: fit-content; max-width: calc(100% - 2 * var(--gutter)); margin: 56px var(--gutter) 0; padding: 4px; border-radius: var(--r-md); background: var(--step); scroll-margin-top: calc(var(--bar) + 16px); }
.tab { display: inline-flex; align-items: center; min-height: 48px; padding: .6rem 1.2rem; border-radius: var(--r-sm); color: var(--ink); font-weight: 600; text-decoration: none; transition: background .18s ease, color .18s ease; }
.tab[aria-selected="true"] { background: var(--ink); color: var(--bg); }
@media (hover: hover) { .tab[aria-selected="false"]:hover { background: #fff; } }
.tabbed :is(#request, #plans, #how) > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tabbed .door-body:is(#request, #plans, #how) { padding-top: 32px; }
.tabbed .how .lead { margin-top: 0; }
/* How we work (Enterprise): the working promises beside the credentials */
.how { max-width: 72rem; scroll-margin-top: calc(var(--bar) + 16px); }
.how-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; margin-top: 36px; align-items: start; }
.how-promises { margin: 0; display: grid; gap: 28px; }
.how-promises dt { font: 700 1.2rem/1.3 "Jakarta", sans-serif; color: var(--ink); letter-spacing: -0.01em; }
.how-promises dd { margin: 6px 0 0; max-width: 34em; }
.how-side { padding: 28px; border-radius: var(--r-md); background: var(--step); }
.how-side h3 { font-size: 1.1rem; }
.how-side h3 + * { margin-top: 10px; }
.how-side ul { margin-bottom: 0; padding-left: 1.1em; display: grid; gap: 6px; color: var(--ink); }
.how-side h3:not(:first-child) { margin-top: 28px; }
.how-side p { color: var(--ink); }
.how-side .btn { margin-top: 28px; }
@media (max-width: 860px) { .how-grid { grid-template-columns: 1fr; gap: 32px; } }
/* the dark Enterprise page: the same form and panels, colours turned round */
.door-page-dark .door-body { --ink: #FBF8F4; --muted: #A9B6C2; --step: #22374D; --surface: #16283B; }
.door-page-dark .door-body .req-err { color: #FFB4AB; }
.door-page-dark .door-body .field [aria-invalid="true"] { border-color: #FFB4AB; }
.door-page-dark .door-body .req-fail { color: #0F1E2E; }
.door-page-dark .door-body .req-sent { background: #173A3A; }
.door-page-dark .door-body .req-sent a, .door-page-dark .door-body .req-change { color: #7FD1C5; }
.door-page-dark .door-body :focus-visible, .door-page-dark .door-body :is(.pick, .chip):has(input:focus-visible) { outline-color: #7FD1C5; }
.door-page-dark .tabs { background: #22374D; }
.door-page-dark .tab { color: var(--bg); }
.door-page-dark .tab[aria-selected="true"] { background: var(--bg); color: var(--ink); }
@media (hover: hover) { .door-page-dark .tab[aria-selected="false"]:hover { background: #2C4560; } }
.tabbed .plans .lead { margin-top: 0; }
@media (max-width: 480px) { .tabs { width: auto; } .tab { flex: 1; justify-content: center; text-align: center; padding: .5rem .6rem; line-height: 1.2; } }
.plans .lead { margin-top: 12px; }
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; align-items: stretch; }
.plan { display: flex; flex-direction: column; padding: 28px 24px 24px; border-radius: var(--r-md); background: var(--step); }
.plan h3 { font-size: 1.35rem; }
.plan-price { margin: 6px 0 0; font: 700 1.6rem/1.2 "Jakarta", sans-serif; color: var(--ink); letter-spacing: -0.02em; }
.plan ul { margin: 20px 0 0; padding: 0 0 0 1.1em; display: grid; gap: 8px; color: var(--ink); }
.plan-onsite { margin: 20px 0 0; color: var(--muted); font-size: .95rem; }
.plan .btn { margin-top: auto; align-self: stretch; justify-content: center; }
.plan-onsite { margin-bottom: 24px; }
.plan:nth-child(2) { background: var(--ink); }
.plan:nth-child(2) :is(h3, .plan-price, ul) { color: var(--bg); }
.plan:nth-child(2) .plan-onsite { color: #C9D2DA; }
.plan-note { margin-top: 20px; max-width: 46em; color: var(--muted); font-size: .95rem; }
@media (max-width: 860px) { .plan-grid { grid-template-columns: 1fr; } }
.req { margin-top: 28px; }
.req-step { border: 0; margin: 0; padding: 0; min-width: 0; }
.req-step + .req-step { margin-top: 36px; }
.req-step legend { padding: 0; font: 700 1.35rem/1.2 "Jakarta", sans-serif; color: var(--ink); letter-spacing: -0.02em; }
.req-step legend:focus { outline: none; }
.req-step legend:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; }
/* the topics: big filled tiles, the chosen one teal */
/* grouped from the device up: on a wide screen each group is a column, the device on the left */
.pick-groups { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px 12px; margin-top: 16px; }
.pick-group-rest { grid-column: 1 / -1; }
.pick-groups-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; }
.pick-groups-3 .picks { grid-template-columns: 1fr 1fr; }
.pick-groups-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 16px; }
.pick-group-rest .picks { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pick-head { font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.picks { display: grid; gap: 8px; }
@media (max-width: 860px) {
  .pick-groups { grid-template-columns: 1fr; gap: 20px; }
  .picks, .pick-group-rest .picks { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .pick { min-height: 56px; padding: 12px 14px; }
  .pick-name { font-size: 1rem; }
}
.pick, .chip { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pick input, .chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pick { display: flex; align-items: center; min-height: 64px; padding: 14px 18px; border-radius: var(--r-md); background: var(--step); transition: background .18s ease, color .18s ease, transform .14s ease; }
.pick:active { transform: scale(.99); }
.pick-name { font: 700 1.05rem/1.25 "Jakarta", sans-serif; color: var(--ink); letter-spacing: -0.01em; }
.pick:has(input:checked) { background: var(--teal); }
.pick:has(input:checked) .pick-name { color: #fff; }
/* several can be chosen: a chosen tile carries a tick */
.pick { padding-right: 34px; }
.pick:has(input:checked)::after { content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 13px; margin-top: -9px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.pick:has(input:focus-visible), .chip:has(input:focus-visible) { outline: 3px solid var(--teal); outline-offset: 3px; }
/* short answers: a row of chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chip span { display: inline-flex; align-items: center; min-height: 48px; padding: .6rem 1.1rem; border-radius: var(--r-sm); background: var(--step); color: var(--ink); font-weight: 500; transition: background .18s ease, color .18s ease; }
.chip:has(input:checked) span { background: var(--teal); color: #fff; }
/* typed answers */
.field { margin-top: 20px; max-width: 34rem; }
.req-step legend + .field { margin-top: 16px; }
.field label, .field-label { display: block; font-weight: 600; color: var(--ink); }
.field-hint { margin-top: 2px; color: var(--muted); font-size: .95rem; }
.field-hint ul { margin: 4px 0 0; padding-left: 1.1em; }
.field-hint li + li { margin-top: 2px; }
.field-hint b { font-weight: 600; color: var(--ink); }
/* the quick taps: one short row per topic picked */
.quick { display: grid; gap: 14px; margin-top: 16px; max-width: 46rem; }
.quick:not(:has(.quick-row:not([hidden]))) { display: none; }
.quick-q { color: var(--muted); }
.quick-name { font-weight: 600; color: var(--ink); margin-right: 4px; }
.quick .chips { margin-top: 6px; }
.quick .chip span { min-height: 42px; padding: .45rem .95rem; font-size: .95rem; }
.quick-other { display: flex; align-items: center; gap: 10px; margin-top: 8px; max-width: 28rem; }
.quick-other[hidden] { display: none; }
.quick-other span { color: var(--ink); font-weight: 500; white-space: nowrap; }
.quick-other input { flex: 1; min-width: 0; padding: .55rem .8rem; border: 1.5px solid #7A8794; border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: inherit; }
.quick-other input:focus { outline: 3px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.opt { font-weight: 400; color: var(--muted); }
.field input, .field textarea { display: block; width: 100%; margin-top: 8px; padding: .75rem .9rem; border: 1.5px solid #7A8794; border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: inherit; }
.field textarea { resize: vertical; min-height: 7.5rem; }
.field input:focus, .field textarea:focus { outline: 3px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.field [aria-invalid="true"] { border-color: #B3261E; }
.req-err { margin-top: 8px; color: #B3261E; font-weight: 600; font-size: .95rem; }
.req-step .btn { margin-top: 28px; border: 0; cursor: pointer; }
.req-send:disabled { opacity: .7; cursor: progress; }
.req-note { margin-top: 12px; color: var(--muted); font-size: .95rem; }
.req-check:has(iframe) { margin: 8px 0 4px; }
#err-check { margin: 0 0 12px; }
.req-fail { margin-top: 16px; padding: 14px 16px; border-radius: var(--r-sm); background: #FBE9E7; color: var(--ink); }
.req-fail a, .req-sent a { color: var(--teal); font-weight: 600; white-space: nowrap; }
.req-done { display: none; }
.req:not(.js) .req-next { display: none; }
/* with script: one part open, the finished ones folded into a line, the later ones waiting */
.req.js .req-step.is-later { display: none; }
.req.js .req-step.is-done > :not(legend, .req-done) { display: none; }
.req.js .req-step.is-done legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.req-what { flex-basis: 100%; color: var(--muted); font-size: .95rem; }
.req.js .req-step.is-done + .req-step { margin-top: 24px; }
.req.js .req-step.is-done .req-done { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.req-sum { font: 700 1.1rem/1.3 "Jakarta", sans-serif; color: var(--ink); }
.req-change { padding: 0; border: 0; background: none; color: var(--teal); font: 600 1rem "Inter", sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.req-step.is-open { animation: req-in .4s var(--out); }
@keyframes req-in { from { opacity: 0; transform: translateY(10px); } }
.req-sent { margin-top: 28px; padding: 28px; border-radius: var(--r-md); background: #E3EDEA; max-width: 40rem; }
.req-sent:focus { outline: none; }
/* once sent, the form is gone: close up the space under the thank-you */
.door-body#request:has(.req-sent:not([hidden])) { padding-bottom: 40px; }
/* the dark page's footer is the page's own colour, so it needs no runway of its own */
.door-page-dark .foot { padding-top: 48px; }
.req-sent p { margin-top: 8px; color: var(--ink); }
/* hover tints only where there is a pointer to hover with (on a phone a tapped tile would keep it) */
@media (hover: hover) { .pick:hover { background: #E3EDEA; } .chip:hover span { background: #E3EDEA; } }
@media (prefers-reduced-motion: reduce) { .req-step.is-open { animation: none; } }

/* the sky: still clay clouds and a balloon by day, a moon by night */
.moon { opacity: 0; transition: opacity 1.4s var(--ease); }
.sky .cloud, .sky .balloon { transition: opacity 1.2s var(--ease); }
body[data-ch="night"] .moon { opacity: 1; }
body[data-ch="night"] .cloud { opacity: .35; }
body[data-ch="night"] .balloon { opacity: 0; }