/* =====================================================================
   Family Solutions LLC — site.css
   Palette sampled from the owner's own logo, not the brief: #2656F6 (the
   house blue) and #0B389E (the card navy), with white. The autobuild had
   invented a tan palette and labelled it the logo palette, which it was not.
   Every token below is blue or neutral; the names say so now.
   Neutrals: ink #0B1B3A, paper #F3F6FC.
   Type: Clash Display (display) × Switzer (text). Native scroll only.
   ===================================================================== */

@font-face { font-family: "Clash Display"; src: url("/fonts/clash-display-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Clash Display"; src: url("/fonts/clash-display-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/fonts/switzer-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/fonts/switzer-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/fonts/switzer-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  /* brand — straight from the logo palette */
  --brand: #2656F6;
  --dusk: #0B389E;
  --sky: #8FBEFF;
  --brand-d: #1B45CC;          /* brand, deepened for small text on paper (6:1) */
  --sky-l: #BBD8FF;            /* light sky blue, lifted for small text on ink */

  /* neutrals */
  --ink: #0B1B3A;
  --ink-2: #10244A;
  --ink-3: #16305E;
  --paper: #F3F6FC;
  --paper-2: #E6EDF8;
  --white: #FFFFFF;
  --mute: #53637C;
  --mute-l: #9FB3D0;
  --line: rgba(11, 27, 58, .12);
  --line-l: rgba(243, 246, 252, .14);

  /* type */
  --display: "Clash Display", "Switzer", ui-sans-serif, system-ui, sans-serif;
  --text: "Switzer", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* rhythm */
  --gut: 22px;
  --max: 1240px;
  --edge: max(var(--gut), calc((var(--vw, 100vw) - var(--max)) / 2));
  --sec: clamp(76px, 11vw, 148px);
  --r: 14px;
  --r-lg: 22px;
  --hdr-h: 70px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --shadow: 0 1px 2px rgba(11, 27, 58, .06), 0 14px 34px -14px rgba(11, 27, 58, .28);
  --shadow-lg: 0 2px 4px rgba(11, 27, 58, .06), 0 30px 60px -24px rgba(11, 27, 58, .42);
}
@media (min-width: 720px) { :root { --gut: 36px; --hdr-h: 78px; } }

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr-h) + 12px); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.62 var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
figure, blockquote { margin: 0; }
h1, h2, h3, h4, p, ul, ol { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--sky); color: var(--ink); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--sky); color: var(--ink); padding: 10px 16px; border-radius: 10px; font-weight: 600; text-decoration: none; transition: top .2s; }
.skip:focus { top: 12px; }
.nowrap { white-space: nowrap; }
.btn .nowrap, .callbar .nowrap { display: contents; }

/* ------------------------------------------------------------------ type */
h1, h2, h3, .display { font-family: var(--display); font-weight: 600; letter-spacing: -.01em; line-height: 1.02; text-wrap: balance; }
h2 { font-size: clamp(2.05rem, 8.4vw, 4.1rem); }
h3 { font-size: clamp(1.35rem, 4.6vw, 1.7rem); line-height: 1.12; }
.hl { color: var(--brand-d); }
.ink .hl, .hero .hl, .phero .hl, .moment .hl { color: var(--sky); }
.kicker { display: inline-flex; align-items: center; gap: 10px; font: 600 .78rem/1 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--brand-d); }
.kicker::before { content: ""; width: 26px; height: 2px; background: currentColor; }
.ink .kicker { color: var(--sky-l); }
.lede { font-size: clamp(1.06rem, 2.4vw, 1.2rem); line-height: 1.58; color: var(--mute); max-width: 56ch; }
.ink .lede { color: var(--mute-l); }
.sep { color: var(--sky); padding: 0 .5em; font-weight: 600; }
p + p { margin-top: 1em; }

/* ------------------------------------------------------------------ layout */
.wrap { width: 100%; max-width: calc(var(--max) + var(--gut) * 2); margin-inline: auto; padding-inline: var(--gut); }
.sec { padding-block: var(--sec); position: relative; }
.paper { background: var(--paper); }
.sand { background: var(--paper-2); }
.ink { background: var(--ink); color: var(--paper); }
.sec-head { display: grid; gap: 22px; margin-bottom: clamp(36px, 6vw, 64px); }
.sec-head h2 { margin-top: 14px; }
@media (min-width: 900px) {
  .sec-head.duo { grid-template-columns: 1.15fr 1fr; align-items: end; gap: 56px; }
}

/* ------------------------------------------------------------------ buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 26px; border-radius: 999px; font: 600 1rem/1 var(--text); letter-spacing: .01em; text-decoration: none; border: 1.5px solid transparent; transition: transform .25s var(--ease), background-color .25s, color .25s, border-color .25s, box-shadow .25s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; white-space: nowrap; }
.btn svg { width: 19px; height: 19px; flex: none; }
.btn-tan { background: var(--sky); color: var(--ink); box-shadow: 0 10px 26px -12px rgba(3, 100, 253, .9); }
.btn-tan:hover { background: #1B45CC; transform: translateY(-2px); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--ink-3); transform: translateY(-2px); }
.btn-ghost { border-color: rgba(243, 246, 252, .55); color: var(--paper); background: rgba(11, 27, 58, .18); }
.btn-ghost:hover { border-color: var(--paper); background: rgba(243, 246, 252, .1); transform: translateY(-2px); }
.btn-line { border-color: var(--ink); color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; color: var(--brand-d); }
.link-arrow svg { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }
.ink .link-arrow { color: var(--sky-l); }

/* ------------------------------------------------------------------ header */
.hdr { position: fixed; inset: 0 0 auto; z-index: 50; height: calc(var(--hdr-h) + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); color: var(--paper); transition: background-color .3s, transform .35s var(--ease), box-shadow .3s; }
.hdr::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 16, 33, .62), rgba(8, 16, 33, 0)); opacity: 1; transition: opacity .3s; pointer-events: none; }
.hdr.solid { background: rgba(11, 27, 58, .96); box-shadow: 0 1px 0 var(--line-l); }
.hdr.solid::before { opacity: 0; }
.hdr.hide { transform: translateY(-100%); }
@supports (backdrop-filter: blur(1px)) { .hdr.solid { background: rgba(11, 27, 58, .86); backdrop-filter: saturate(1.3) blur(14px); } }
.hdr-in { position: relative; height: var(--hdr-h); display: flex; align-items: center; gap: 14px; max-width: calc(var(--max) + var(--gut) * 2); margin-inline: auto; padding-inline: var(--gut); }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; margin-right: auto; min-width: 0; }
/* His real mark is the top of the house: hard hat plus the three tools, 2.2:1.
   Sized by HEIGHT with width auto, or a square rule would squash it. The full
   logo is not used here: at 44px its service list is two pixels tall and renders
   as grey mush, the same trap as the Petra lockup. */
.brand-mark { height: 44px; width: auto; flex: none; }
.brand-wm { display: grid; line-height: 1; min-width: 0; }
.brand-wm b { font: 600 1.28rem/1 var(--display); letter-spacing: -.005em; white-space: nowrap; }
.brand-wm small { font: 600 .62rem/1 var(--text); letter-spacing: .2em; text-transform: uppercase; color: var(--sky-l); margin-top: 6px; white-space: nowrap; }
.nav { display: none; }
.nav ul { display: flex; gap: 4px; list-style: none; padding: 0; }
.nav a { display: block; padding: 10px 13px; border-radius: 999px; text-decoration: none; font-weight: 500; font-size: .96rem; transition: background-color .2s, color .2s; }
.nav a:hover, .nav a[aria-current="page"] { background: rgba(243, 246, 252, .1); color: #fff; }
.hdr-call { display: inline-flex; align-items: center; gap: 9px; min-height: 46px; min-width: 46px; justify-content: center; padding: 0 14px; border-radius: 999px; background: var(--sky); color: var(--ink); text-decoration: none; font-weight: 600; font-size: .95rem; flex: none; transition: background-color .2s, transform .2s var(--ease); }
.hdr-call:hover { background: #1B45CC; transform: translateY(-1px); }
.hdr-call svg { width: 18px; height: 18px; }
.hdr-call .lbl { display: none; }
.burger { width: 46px; height: 46px; flex: none; border: 1.5px solid rgba(243, 246, 252, .35); border-radius: 50%; background: transparent; display: grid; place-items: center; padding: 0; }
.burger span, .burger span::before, .burger span::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative; transition: transform .3s var(--ease), background-color .2s; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.menu-open .burger span { background: transparent; }
.menu-open .burger span::before { transform: translateY(6px) rotate(45deg); }
.menu-open .burger span::after { transform: translateY(-6px) rotate(-45deg); }
/* His real mark is 2.2:1, far wider than the 44px square the invented lettermark
   used, so on a phone the wordmark beside it ran under the call button and
   "Family Solutions" rendered clipped as "Family Solutio". Same family as the Petra
   header overflow: a wide lockup cannot share a row with the call and menu buttons.
   Measured, not guessed: at 390px the row has about 137px for the wordmark. */
@media (max-width: 519px) {
  .brand-mark { height: 36px; width: auto; }
  .brand-wm b { font-size: 1rem; }
  .brand-wm small { display: none; }
}
@media (max-width: 389px) {
  .brand-mark { height: 34px; width: auto; }
  .brand-wm { display: none; }   /* the mark alone is his logo and still reads */
}
@media (min-width: 560px) { .hdr-call .lbl { display: inline; } .hdr-call { padding: 0 18px; } }
@media (min-width: 1140px) {
  .nav { display: block; }
  .burger { display: none; }
}

/* drawer */
.drawer { position: fixed; inset: 0; z-index: 45; background: var(--ink); color: var(--paper); padding: calc(var(--hdr-h) + env(safe-area-inset-top) + 18px) var(--gut) calc(30px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity .3s, transform .35s var(--ease), visibility 0s .35s; display: grid; align-content: start; gap: 28px; }
.menu-open .drawer { opacity: 1; visibility: visible; transform: none; transition: opacity .3s, transform .35s var(--ease); }
.menu-open body { overflow: hidden; }
.drawer ul { list-style: none; padding: 0; }
.drawer > ul a { display: block; font: 600 2rem/1.15 var(--display); text-decoration: none; padding: 6px 0; }
.drawer .sub-h { font: 600 .74rem/1 var(--text); letter-spacing: .18em; text-transform: uppercase; color: var(--sky-l); margin-bottom: 10px; }
.drawer .sub { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; }
.drawer .sub a { display: block; padding: 8px 0; text-decoration: none; color: #BBD8FF; font-size: 1rem; }
.drawer .btn { width: 100%; }
@media (min-width: 1140px) { .drawer { display: none; } }

/* ------------------------------------------------------------------ hero (home) */
.hero { position: relative; min-height: max(680px, 100svh); display: grid; place-items: center; color: var(--paper); overflow: hidden; isolation: isolate; padding: calc(var(--hdr-h) + env(safe-area-inset-top) + 36px) var(--gut) 104px; text-align: center; }
.hero-media, .phero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img, .hero-media video, .phero-media img, .phero-media picture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-media img { animation: kb 26s ease-in-out infinite alternate; transform-origin: 56% 40%; }
.hero-media video { object-position: 50% 30%; }
.scrim { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(70% 55% at 50% 52%, rgba(8, 16, 33, .55), rgba(8, 16, 33, 0) 72%),
  linear-gradient(180deg, rgba(8, 16, 33, .62) 0%, rgba(8, 16, 33, .38) 38%, rgba(8, 16, 33, .62) 72%, rgba(11, 27, 58, .96) 100%); }
.hero-in { width: 100%; max-width: 900px; margin-inline: auto; display: grid; justify-items: center; }
.lockup { display: grid; justify-items: center; gap: 12px; margin-bottom: 26px; text-decoration: none; }
/* The hero shows his ACTUAL logo, big enough that the phone number and the
   service list inside it are readable. No typeset name under it: the artwork
   already carries the name, so repeating it would read as a duplicate. */
.lockup svg { width: 74px; height: 74px; filter: drop-shadow(0 8px 22px rgba(0, 0, 0, .35)); }
.hero-logo { width: clamp(168px, 34vw, 216px); height: auto;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .45)); }
.lockup b { font: 600 clamp(1.5rem, 6vw, 2.05rem)/1 var(--display); letter-spacing: -.005em; }
.lockup small { font: 600 .7rem/1 var(--text); letter-spacing: .3em; text-transform: uppercase; color: var(--sky-l); margin-top: -2px; }
.pill { display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px; border: 1px solid rgba(243, 246, 252, .3); border-radius: 999px; font: 500 .9rem/1.2 var(--text); background: rgba(11, 27, 58, .32); }
.pill svg { width: 16px; height: 16px; color: var(--sky); flex: none; }
.pill i { font-style: normal; color: var(--sky); }
.hero h1 { margin-top: 22px; display: grid; gap: 14px; }
.h1-kick { font: 600 .82rem/1.35 var(--text); letter-spacing: .16em; text-transform: uppercase; color: #BBD8FF; }
.h1-main { font-size: clamp(2.85rem, 12.6vw, 6.4rem); line-height: .98; font-weight: 600; text-shadow: 0 2px 30px rgba(0, 0, 0, .25); }
.h1-main > span { display: block; }
.hero-sub { margin-top: 22px; font-size: clamp(1.08rem, 2.6vw, 1.26rem); line-height: 1.5; max-width: 34ch; color: #D5E6FF; text-wrap: balance; }
.hero .ctas { justify-content: center; margin-top: 30px; }
.trust { list-style: none; padding: 0; margin-top: 32px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; font-size: .95rem; color: #BBD8FF; }
.trust li { display: inline-flex; align-items: center; gap: 8px; }
.trust svg { width: 17px; height: 17px; color: var(--sky); flex: none; }
.trust .stars { display: inline-flex; gap: 1px; }
.trust .stars svg { width: 15px; height: 15px; color: var(--sky); }
.hero-scroll { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); font: 600 .7rem/1 var(--text); letter-spacing: .26em; text-transform: uppercase; color: rgba(243, 246, 252, .72); text-decoration: none; display: grid; justify-items: center; gap: 10px; padding: 8px; }
.hero-scroll::after { content: ""; width: 1px; height: 34px; background: linear-gradient(var(--sky), transparent); animation: drip 2.4s var(--ease) infinite; transform-origin: top; }
@media (min-width: 720px) {
  .hero-sub { max-width: 44ch; }
}
@keyframes kb { from { transform: scale(1.04) translate3d(0, 0, 0); } to { transform: scale(1.14) translate3d(-1.5%, -1%, 0); } }
@keyframes drip { 0% { transform: scaleY(0); opacity: 1; } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* pause control for every moving background */
.motion-btn { position: absolute; z-index: 3; right: var(--gut); bottom: 22px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(243, 246, 252, .4); background: rgba(8, 16, 33, .45); color: var(--paper); display: grid; place-items: center; padding: 0; transition: background-color .2s; }
.motion-btn:hover { background: rgba(8, 16, 33, .7); }
.motion-btn > svg { width: 16px; height: 16px; }
.motion-btn .i-play { display: none; }
.motion-off .motion-btn .i-play { display: block; }
.motion-off .motion-btn .i-pause { display: none; }
.motion-off .hero-media img, .motion-off .kb img, .motion-off .phero-media img { animation-play-state: paused; }

/* ------------------------------------------------------------------ inner page hero */
.phero { position: relative; color: var(--paper); isolation: isolate; overflow: hidden; padding: calc(var(--hdr-h) + env(safe-area-inset-top) + clamp(54px, 10vw, 110px)) 0 clamp(56px, 9vw, 104px); min-height: min(76svh, 720px); display: grid; align-items: end; }
.phero-media img { animation: kb 30s ease-in-out infinite alternate; }
.phero .scrim { background: linear-gradient(180deg, rgba(8, 16, 33, .66) 0%, rgba(8, 16, 33, .42) 40%, rgba(8, 16, 33, .86) 100%); }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: .88rem; color: #A8C9FF; margin-bottom: 20px; list-style: none; padding: 0; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--sky); }
.phero h1 { font-size: clamp(2.45rem, 10.4vw, 5.2rem); max-width: 16ch; }
.phero .lede { color: #BBD8FF; margin-top: 20px; max-width: 46ch; }
.phero .ctas { margin-top: 28px; }

/* ------------------------------------------------------------------ word strip */
.strip { background: var(--ink); color: var(--paper); border-top: 1px solid var(--line-l); overflow: hidden; }
.strip-track { display: flex; width: max-content; animation: marquee 46s linear infinite; }
.strip p { flex: none; padding: 22px 0; font: 600 clamp(1.1rem, 3.4vw, 1.5rem)/1 var(--display); white-space: nowrap; padding-right: .5em; }
.strip i { font-style: normal; color: var(--sky); padding: 0 .6em; }
.motion-off .strip-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------------ intro: real job photo */
.intro-grid { display: grid; gap: 40px; align-items: center; }
.intro-photo { position: relative; max-width: 460px; }
.intro-photo .ph { aspect-ratio: 3 / 4; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.intro-photo .tag { position: absolute; left: -2px; bottom: 22px; background: var(--ink); color: var(--paper); padding: 12px 16px; border-radius: 0 12px 12px 0; font-size: .86rem; line-height: 1.3; max-width: 78%; }
.intro-photo .tag b { display: block; font: 600 .7rem/1 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--sky-l); margin-bottom: 6px; }
.intro-copy h2 { margin-top: 16px; }
.intro-copy > p { margin-top: 20px; color: var(--mute); max-width: 54ch; }
.pull { margin-top: 30px; padding: 22px 0 0; border-top: 1px solid var(--line); }
.pull blockquote { font: 600 clamp(1.25rem, 3.6vw, 1.55rem)/1.3 var(--display); letter-spacing: -.005em; }
.pull figcaption { margin-top: 12px; font-size: .92rem; color: var(--mute); }
.pull figcaption b { color: var(--ink); font-weight: 600; }
@media (min-width: 900px) {
  .intro-grid { grid-template-columns: .9fr 1.1fr; gap: 80px; }
  .intro-photo { justify-self: end; width: 100%; }
}

/* photo frame */
.ph { display: block; position: relative; overflow: hidden; background: var(--ink-3); border-radius: var(--r); }
.ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }

/* ------------------------------------------------------------------ services bento */
.bento { display: grid; gap: 16px; }
.svc { position: relative; display: grid; grid-template-rows: auto 1fr; text-decoration: none; background: var(--white); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.svc .ph { aspect-ratio: 4 / 3; border-radius: 0; }
.svc-body { padding: 22px 22px 24px; display: grid; gap: 10px; align-content: start; }
.svc-n { position: absolute; top: 16px; left: 16px; font: 600 .78rem/1 var(--text); letter-spacing: .14em; background: rgba(11, 27, 58, .78); color: var(--paper); padding: 8px 11px; border-radius: 999px; }
.svc h3 { font-size: 1.45rem; }
.svc p { color: var(--mute); font-size: 1rem; line-height: 1.55; }
.svc .go { margin-top: 6px; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--brand-d); font-size: .96rem; }
.svc .go svg { width: 18px; height: 18px; transition: transform .3s var(--ease); }
@media (hover: hover) {
  .svc:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
  .svc:hover .ph img { transform: scale(1.05); }
  .svc:hover .go svg { transform: translateX(5px); }
}
@media (min-width: 680px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 680px) and (max-width: 1039px) {
  .bento .svc:last-child:nth-child(odd) { grid-column: 1 / -1; grid-template-columns: 1.1fr 1fr; grid-template-rows: none; }
  .bento .svc:last-child:nth-child(odd) .ph { aspect-ratio: auto; min-height: 280px; }
  .bento .svc:last-child:nth-child(odd) .svc-body { align-content: center; }
}
@media (min-width: 1040px) {
  .bento { grid-template-columns: repeat(12, 1fr); gap: 20px; }
  .bento .svc { grid-column: span 4; }
  .bento .svc.wide { grid-column: span 8; grid-template-columns: 1.25fr 1fr; grid-template-rows: none; }
  .bento .svc.wide .ph { aspect-ratio: auto; min-height: 360px; }
  .bento .svc.wide .svc-body { align-content: center; padding: 34px; }
  .bento .svc.wide h3 { font-size: 2rem; }
  .bento .svc.half { grid-column: span 6; }
}

/* ------------------------------------------------------------------ signature: the work order */
.order-sec { overflow: hidden; }
.order-grid { display: grid; gap: 48px; align-items: start; }
.order-copy h2 { margin-top: 16px; }
.order-copy .lede { margin-top: 20px; }
.order-photos { margin-top: 34px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; }
.order-photos .ph { aspect-ratio: 4 / 5; }
.order-photos .ph:nth-child(2) { margin-top: 40px; }
.ticket { position: relative; background: var(--paper); color: var(--ink); border-radius: 6px; padding: 30px 22px 26px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); transform: rotate(-1.2deg); }
.ticket::before, .ticket::after { content: ""; position: absolute; left: 0; right: 0; height: 12px; background: radial-gradient(circle at 8px 0, transparent 7px, var(--paper) 7.5px) 0 0 / 16px 12px repeat-x; }
.ticket::before { top: -11px; transform: scaleY(-1); }
.ticket::after { bottom: -11px; }
.ticket-head { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; border-bottom: 2px solid var(--ink); padding-bottom: 14px; }
.ticket-head b { font: 600 1.35rem/1 var(--display); }
.ticket-head span { font: 600 .68rem/1.3 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--brand-d); text-align: right; }
.ticket ol { list-style: none; padding: 0; margin-top: 6px; }
.ticket li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; padding: 13px 0; border-bottom: 1px dashed rgba(11, 27, 58, .22); }
.ticket li:last-child { border-bottom: 0; }
.ticket .box { width: 24px; height: 24px; border: 2px solid var(--ink); border-radius: 5px; display: grid; place-items: center; margin-top: 1px; }
.ticket .box svg { width: 17px; height: 17px; color: var(--brand); stroke-dasharray: 26; stroke-dashoffset: 0; }
.js .ticket .box svg { stroke-dashoffset: 26; transition: stroke-dashoffset .55s var(--ease); }
.js .in > .ticket .box svg { stroke-dashoffset: 0; }
.ticket li:nth-child(2) .box svg { transition-delay: .12s; } .ticket li:nth-child(3) .box svg { transition-delay: .24s; }
.ticket li:nth-child(4) .box svg { transition-delay: .36s; } .ticket li:nth-child(5) .box svg { transition-delay: .48s; }
.ticket li:nth-child(6) .box svg { transition-delay: .6s; } .ticket li:nth-child(7) .box svg { transition-delay: .72s; }
.ticket li:nth-child(8) .box svg { transition-delay: .84s; } .ticket li:nth-child(9) .box svg { transition-delay: .96s; }
.ticket li:nth-child(10) .box svg { transition-delay: 1.08s; }
.ticket li .t { font-weight: 600; line-height: 1.35; }
.ticket li .who { display: block; font-size: .84rem; color: var(--mute); font-weight: 400; margin-top: 3px; }
.ticket-foot { margin-top: 16px; padding-top: 14px; border-top: 2px solid var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: .86rem; color: var(--mute); }
.stamp { font: 700 .8rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--brand); border: 2px solid var(--brand); padding: 8px 10px; border-radius: 6px; transform: rotate(-6deg); flex: none; }
@media (min-width: 960px) {
  .order-grid { grid-template-columns: 1fr 1fr; gap: 80px; }
  .ticket { padding: 38px 36px 32px; margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) { .js .ticket .box svg { stroke-dashoffset: 0; transition: none; } }

/* ------------------------------------------------------------------ full-bleed photo moment */
.moment { position: relative; min-height: min(92svh, 820px); display: grid; align-items: end; color: var(--paper); isolation: isolate; overflow: hidden; }
.moment .kb { position: absolute; inset: 0; z-index: -2; }
.moment .kb img { width: 100%; height: 100%; object-fit: cover; animation: kb 28s ease-in-out infinite alternate; }
.moment::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 16, 33, .05) 20%, rgba(8, 16, 33, .82) 100%); }
.moment-in { padding-bottom: clamp(60px, 10vw, 120px); padding-top: 200px; }
.moment blockquote { font: 600 clamp(1.9rem, 7.4vw, 4.4rem)/1.04 var(--display); letter-spacing: -.01em; max-width: 18ch; text-wrap: balance; }
.moment figcaption { margin-top: 18px; color: #BBD8FF; font-size: .98rem; }
.moment figcaption b { color: var(--paper); }

/* ------------------------------------------------------------------ process */
.steps { list-style: none; padding: 0; display: grid; gap: 14px; counter-reset: s; }
.steps li { position: relative; padding: 26px 22px 26px 88px; background: var(--white); border-radius: var(--r-lg); box-shadow: var(--shadow); min-height: 120px; }
.steps li::before { counter-increment: s; content: "0" counter(s); position: absolute; left: 20px; top: 22px; font: 700 2.4rem/1 var(--display); color: var(--sky); }
.steps h3 { font-size: 1.28rem; }
.steps p { margin-top: 8px; color: var(--mute); font-size: 1rem; }
.steps .quote-tag { display: block; margin-top: 10px; font-size: .88rem; color: var(--brand-d); }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .steps li { padding: 84px 24px 28px; }
  .steps li::before { left: 24px; top: 26px; font-size: 2.8rem; }
}

/* ------------------------------------------------------------------ reviews */
.revs-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 34px; }
.revs-head h2 { margin-top: 14px; }
.score { display: flex; align-items: center; gap: 14px; }
.score b { font: 600 3.4rem/1 var(--display); }
.score .stars { display: flex; gap: 2px; color: var(--sky); }
.score .stars svg { width: 18px; height: 18px; }
.score small { display: block; color: var(--mute-l); font-size: .9rem; margin-top: 6px; }
.rv-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 86%); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); padding: 4px var(--gut) 22px; margin-inline: calc(var(--gut) * -1); scrollbar-width: thin; scrollbar-color: var(--brand) transparent; overscroll-behavior-x: contain; }
.rv-rail:focus-visible { outline-offset: -2px; }
@media (min-width: 720px) { .rv-rail { grid-auto-columns: minmax(320px, 46%); } }
@media (min-width: 1100px) { .rv-rail { grid-auto-columns: calc((min(var(--max), var(--vw, 100vw) - var(--gut) * 2) - 32px) / 3); margin-inline: calc(var(--edge) * -1); padding-inline: var(--edge); scroll-padding-inline: var(--edge); } }
.quote-card { scroll-snap-align: start; background: var(--ink-2); border: 1px solid var(--line-l); border-radius: var(--r-lg); padding: 26px 24px; display: flex; flex-direction: column; gap: 18px; }
.quote-card .stars { display: flex; gap: 2px; color: var(--sky); }
.quote-card .stars svg { width: 16px; height: 16px; }
.quote-card blockquote { font-size: 1.02rem; line-height: 1.6; color: #D5E6FF; flex: 1; }
.quote-card figcaption { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line-l); padding-top: 16px; }
.quote-card .av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: var(--paper); font: 600 1rem/1 var(--display); flex: none; }
.quote-card .who b { display: block; font-weight: 600; }
.quote-card .who small { color: var(--mute-l); font-size: .84rem; }
.rail-ctl { display: flex; gap: 10px; align-items: center; }
.rail-ctl button { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--line-l); background: transparent; color: var(--paper); display: grid; place-items: center; transition: background-color .2s, border-color .2s; }
.rail-ctl button:hover { background: rgba(243, 246, 252, .08); border-color: var(--sky); }
.rail-ctl svg { width: 20px; height: 20px; }
.revs-foot { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; }

/* single review band (inner pages) */
.say { display: grid; gap: 18px; padding: clamp(28px, 5vw, 44px); border-radius: var(--r-lg); background: var(--ink); color: var(--paper); }
.say blockquote { font: 600 clamp(1.2rem, 3.4vw, 1.6rem)/1.32 var(--display); }
.say figcaption { color: var(--mute-l); font-size: .94rem; }
.say figcaption b { color: var(--paper); }
.say .stars { display: flex; gap: 2px; color: var(--sky); }
.say .stars svg { width: 16px; height: 16px; }

/* ------------------------------------------------------------------ service areas */
.areas-grid { display: grid; gap: 34px; }
.areas-photo .ph { aspect-ratio: 4 / 3; border-radius: var(--r-lg); }
.areas-photo figcaption { margin-top: 10px; font-size: .86rem; color: var(--mute); }
.town-list { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.town-list a { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 18px 2px; border-bottom: 1px solid var(--line); text-decoration: none; transition: padding .3s var(--ease), color .2s; }
.town-list a b { font: 600 clamp(1.4rem, 4.6vw, 1.9rem)/1.1 var(--display); }
.town-list a small { display: block; color: var(--mute); font-size: .9rem; margin-top: 4px; }
.town-list a svg { width: 22px; height: 22px; color: var(--brand); transition: transform .3s var(--ease); }
.town-list a:hover { padding-left: 10px; color: var(--brand-d); }
.town-list a:hover svg { transform: translateX(4px); }
.areas-note { margin-top: 20px; color: var(--mute); font-size: .98rem; }
@media (min-width: 960px) { .areas-grid { grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; } .areas-photo { position: sticky; top: calc(var(--hdr-h) + 24px); } }

/* ------------------------------------------------------------------ FAQ */
.faq-grid { display: grid; gap: 34px; }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 32px; gap: 14px; align-items: center; padding: 22px 0; font: 600 clamp(1.1rem, 3.2vw, 1.3rem)/1.3 var(--display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--line); background: linear-gradient(var(--ink), var(--ink)) center / 12px 2px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 2px 12px no-repeat; transition: transform .3s var(--ease), background-color .2s; }
.faq details[open] summary::after { transform: rotate(45deg); background-color: var(--sky); border-color: var(--sky); }
.faq details p { padding: 0 44px 24px 0; color: var(--mute); }
@media (min-width: 960px) { .faq-grid { grid-template-columns: .8fr 1.2fr; gap: 80px; } }

/* ------------------------------------------------------------------ CTA band + form */
.cta-band { position: relative; color: var(--paper); isolation: isolate; overflow: hidden; }
.cta-band .kb { position: absolute; inset: 0; z-index: -2; }
.cta-band .kb img { width: 100%; height: 100%; object-fit: cover; animation: kb 30s ease-in-out infinite alternate; }
.cta-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(8, 16, 33, .86) 0%, rgba(8, 16, 33, .6) 55%, rgba(8, 16, 33, .72) 100%); }
.cta-grid { display: grid; gap: 40px; align-items: start; }
.cta-copy h2 { margin-top: 16px; }
.cta-copy .lede { color: #D5E6FF; margin-top: 18px; }
.cta-copy .ctas { margin-top: 28px; }
.facts { list-style: none; padding: 0; margin-top: 30px; display: grid; gap: 12px; font-size: .98rem; color: #BBD8FF; }
.facts li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; }
.facts svg { width: 20px; height: 20px; color: var(--sky); margin-top: 2px; }
.facts a { color: var(--paper); }
@media (min-width: 960px) { .cta-grid { grid-template-columns: 1fr 1fr; gap: 72px; } }

.form-card { background: var(--paper); color: var(--ink); border-radius: var(--r-lg); padding: clamp(24px, 4vw, 36px); box-shadow: var(--shadow-lg); }
.form-card h3 { font-size: 1.6rem; }
.form-card > p { color: var(--mute); margin-top: 6px; font-size: .98rem; }
.fgrid { display: grid; gap: 14px; margin-top: 22px; }
@media (min-width: 560px) { .fgrid { grid-template-columns: 1fr 1fr; } .fgrid .full { grid-column: 1 / -1; } }
.field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 7px; }
.field label span { color: var(--mute); font-weight: 400; }
.field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: 13px 15px; border: 1.5px solid rgba(11, 27, 58, .2); border-radius: 12px; background: var(--white); font-size: 1rem; transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none; }
.field select { background-color: var(--white); color: var(--ink); background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(3, 100, 253, .2); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-card .btn { width: 100%; margin-top: 18px; }
.form-note { margin-top: 12px; font-size: .86rem; color: var(--mute); text-align: center; }
.form-msg { margin-top: 14px; font-size: .96rem; }
.form-msg:empty { display: none; }
.form-msg.ok { color: #0B389E; font-weight: 600; }
.form-msg p { margin-bottom: 10px; }
.form-msg a { display: inline-flex; margin: 0 8px 8px 0; padding: 10px 14px; border-radius: 999px; border: 1.5px solid var(--ink); text-decoration: none; font-weight: 600; font-size: .92rem; }

/* ------------------------------------------------------------------ inner page content */
.prose-grid { display: grid; gap: 44px; }
.prose h2 { font-size: clamp(1.8rem, 6.4vw, 2.8rem); margin-top: 14px; }
.prose h3 { margin-top: 34px; }
.prose > p, .prose > ul, .prose > ol { margin-top: 18px; color: #33415C; max-width: 62ch; }
.prose > h2 + p { margin-top: 20px; }
.ticks { list-style: none; padding: 0; display: grid; gap: 12px; }
.ticks li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; }
.ticks li::before { content: ""; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: var(--sky) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b1d22' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 14px no-repeat; }
.ticks b { font-weight: 600; color: var(--ink); }
.aside { display: grid; gap: 18px; align-content: start; }
.aside .ph { aspect-ratio: 4 / 5; border-radius: var(--r-lg); }
.aside-card { background: var(--white); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow); }
.aside-card h3 { font-size: 1.25rem; }
.aside-card ul { list-style: none; padding: 0; margin-top: 12px; display: grid; gap: 2px; }
.aside-card a { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-weight: 500; }
.aside-card a:hover { color: var(--brand-d); }
.aside-card li:last-child a { border-bottom: 0; }
.aside-card a[aria-current="page"] { color: var(--brand-d); font-weight: 600; }
@media (min-width: 980px) {
  .prose-grid { grid-template-columns: 1.45fr 1fr; gap: 80px; }
  .aside { position: sticky; top: calc(var(--hdr-h) + 24px); }
}

.duo-photos { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; margin-top: 34px; }
.duo-photos .ph { aspect-ratio: 4 / 5; }
.duo-photos .ph.land { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.duo-photos figcaption, .cap { font-size: .84rem; color: var(--mute); margin-top: 8px; }

.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; list-style: none; padding: 0; }
.chip-row a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line); text-decoration: none; font-weight: 500; font-size: .96rem; background: var(--white); transition: border-color .2s, background-color .2s; }
.chip-row a:hover { border-color: var(--brand); background: var(--paper); }
.ink .chip-row a { background: transparent; border-color: var(--line-l); color: var(--paper); }

.split-band { display: grid; gap: 34px; align-items: center; }
.split-band .ph { aspect-ratio: 4 / 3; border-radius: var(--r-lg); }
.split-band h2 { margin-top: 14px; font-size: clamp(1.8rem, 6.4vw, 3rem); }
.split-band .copy > p { margin-top: 18px; color: var(--mute); max-width: 54ch; }
.ink .split-band .copy > p { color: var(--mute-l); }
@media (min-width: 900px) { .split-band { grid-template-columns: 1fr 1fr; gap: 72px; } .split-band.swap .ph-col { order: 2; } }

/* about */
.values { list-style: none; padding: 0; display: grid; gap: 1px; background: var(--line); border-radius: var(--r-lg); overflow: hidden; }
.values li { background: var(--paper); padding: 26px 24px; }
.values h3 { font-size: 1.3rem; }
.values p { margin-top: 8px; color: var(--mute); }
.values small { display: block; margin-top: 10px; color: var(--brand-d); font-size: .88rem; }
@media (min-width: 760px) { .values { grid-template-columns: 1fr 1fr; } }

/* contact */
.contact-grid { display: grid; gap: 40px; align-items: start; }
.nap-card { background: var(--ink); color: var(--paper); border-radius: var(--r-lg); padding: clamp(24px, 4vw, 36px); }
.nap-card h2 { font-size: clamp(1.7rem, 5vw, 2.3rem); }
.nap-card .facts { color: #BBD8FF; }
.hours { font-variant-numeric: tabular-nums; width: 100%; margin-top: 24px; border-collapse: collapse; font-size: .96rem; }
.hours caption { text-align: left; font: 600 .74rem/1 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--sky-l); padding-bottom: 10px; }
.hours th, .hours td { padding: 9px 0; border-top: 1px solid var(--line-l); text-align: left; font-weight: 400; }
.hours td { text-align: right; color: #BBD8FF; }
.map { margin-top: 40px; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 10; background: var(--paper-2); box-shadow: var(--shadow); }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (min-width: 960px) { .contact-grid { grid-template-columns: 1.1fr .9fr; gap: 64px; } .map { aspect-ratio: 21 / 9; } }

/* ------------------------------------------------------------------ footer */
.ftr { background: #071634; color: #CFE0F7; padding: clamp(64px, 9vw, 104px) 0 calc(28px + env(safe-area-inset-bottom)); }
.ftr-top { display: grid; gap: 40px; }
.ftr .brand { color: var(--paper); }
.ftr-nap { margin-top: 18px; font-style: normal; display: grid; gap: 6px; font-size: .98rem; }
.ftr-nap a { color: var(--paper); font-weight: 600; text-decoration: none; }
.ftr-nap a:hover { text-decoration: underline; }
.ftr h2 { font: 600 .74rem/1 var(--text); letter-spacing: .18em; text-transform: uppercase; color: var(--sky-l); margin-bottom: 14px; }
.ftr ul { list-style: none; padding: 0; display: grid; gap: 2px; }
.ftr ul a { display: inline-block; padding: 6px 0; text-decoration: none; font-size: .96rem; }
.ftr ul a:hover { color: var(--paper); text-decoration: underline; }
.ftr-hours { font-size: .94rem; display: grid; gap: 4px; }
.ftr-bottom { margin-top: 56px; padding-top: 22px; border-top: 1px solid rgba(243, 246, 252, .1); display: grid; gap: 10px; font-size: .84rem; color: #9FB3D0; }
@media (min-width: 720px) { .ftr-top { grid-template-columns: 1.3fr 1fr 1fr; } }
@media (min-width: 1080px) { .ftr-top { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; } .ftr-bottom { grid-template-columns: 1fr auto; } }

/* ------------------------------------------------------------------ sticky call bar (phones) */
.callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(9, 18, 38, .94); border-top: 1px solid var(--line-l); transform: translateY(110%); transition: transform .35s var(--ease); }
@supports (backdrop-filter: blur(1px)) { .callbar { background: rgba(9, 18, 38, .82); backdrop-filter: blur(14px); } }
.callbar.show { transform: none; }
.callbar a { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; text-decoration: none; font-weight: 600; font-size: .95rem; color: var(--paper); border: 1px solid var(--line-l); }
.callbar a.main { background: var(--sky); color: var(--ink); border-color: var(--sky); }
.callbar svg { width: 18px; height: 18px; }
@media (min-width: 900px) { .callbar { display: none; } }
@media (max-width: 899px) { .ftr { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } }

/* ------------------------------------------------------------------ reveal */
.js .rv { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
.js .rv.d1 { transition-delay: .08s; }
.js .rv.d2 { transition-delay: .16s; }
.js .rv.d3 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .rv { opacity: 1; transform: none; }
  .hero-media video { display: none; }
}

/* ---- hero cover band, after his own Facebook cover, and his real logo badge ----
   The band is his navy (#0B389E, sampled off that cover photo) and runs the full
   viewport width out of the centred container. The badge then overlaps its lower
   edge by design, which is why the band carries extra bottom padding. */
.hero:has(.cover-band) { padding-top: calc(var(--hdr-h) + env(safe-area-inset-top) + 22px); }
.cover-band {
  width: var(--vw, 100vw); margin-inline: calc(50% - var(--vw, 100vw) / 2);
  padding: 24px var(--gut) 62px; background: var(--dusk);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.16),
              0 18px 40px -20px rgba(4,12,32,.6);
}
.hero .cover-band h1 { margin: 0 auto; max-width: 1100px; gap: 12px; }
.cover-band .h1-main {
  font: 700 clamp(1.9rem, 9vw, 4.2rem)/1.02 var(--display);
  text-transform: uppercase; letter-spacing: .01em; word-spacing: .08em;
  color: #E6EDF8; text-shadow: 0 2px 0 rgba(4,12,32,.35); text-wrap: balance;
}
/* His actual artwork, not a redraw. The white keyline lifts it off a photo, since
   the logo's own house is blue and the scrim behind it is blue too. */
.hero-badge {
  position: relative; z-index: 1; display: block; margin: -46px auto 0;
  width: clamp(240px, 74vw, 330px); height: auto;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.85)) drop-shadow(0 18px 28px rgba(4,12,32,.55));
}
.hero .hero-sub { margin: 22px auto 0; }
@media (max-width: 420px) { .cover-band { padding-bottom: 54px; } .hero-badge { margin-top: -38px; } }