/* 32 Signature: Juno Color Studio (sample)
   High-fidelity recreation of the look of mirastudio.framer.website, rebuilt in our own code with CC0 photos.
   The page sits in a frame: a 56px black rail on the left (desktop), panels 3px apart with 12px corners, condensed
   uppercase display type, one hot red used as a field or a single word. Re-skin: change the shared token layer below. */
:root {
  /* Shared token layer (library-wide names) */
  --c-bg: #ffffff;           /* page and white panels */
  --c-surface: #f7f7f7;      /* why-us panel, footer */
  --c-ink: #0d0d0d;          /* text, rail, phone bar, dark panels (18.1:1 on #f7f7f7) */
  --c-muted: #686868;        /* two-tone sentences, body text (5.57:1 on white, 5.2:1 on #f7f7f7) */
  --c-line: #e6e6e6;         /* decorative rules */
  --c-line-strong: #0d0d0d;  /* field borders on light surfaces */
  --c-accent: #e0260a;       /* red that carries small text: buttons, team band, labels (white on it 4.73:1) */
  --c-on-accent: #ffffff;
  --c-accent-2: #f52d0f;     /* signature red, decorative only: big heading words (45px+), script word, signature */
  --f-display: "Mona Sans", "Arial Narrow", system-ui, sans-serif;
  --f-body: "Switzer", "Geist", system-ui, sans-serif;
  --f-mono: var(--f-body);   /* no mono in this theme */
  --r-sm: 8px;    /* buttons, fields, segmented toggle */
  --r-lg: 12px;   /* every canvas panel */
  --r-pill: 8px;  /* button radius */
  --s-1: 3px;  --s-2: 15px;  --s-3: 20px;  --s-4: 40px;  --s-5: 80px;  --s-6: 120px;

  /* Theme names mapped to the shared layer */
  --frame: var(--c-ink);
  --signature-red: var(--c-accent-2);
  --red-on-soft: #c82208;    /* small red text on #f7f7f7 (5.31:1) */
  --mute-dark: #bcbcbc;      /* muted text on ink (10.2:1) */
  --panel-2: #1a1a1a;        /* cards inside ink panels */
  --f-script: "Smooch", "Brush Script MT", cursive;
  --r-img: 10px;             /* photos and inner cards */
  --gap: var(--s-1);         /* the 3px gutter between panels, constant at every size */
  --pad: 23px;               /* inner side padding of a panel */
  --col: 20px;               /* column gutter */
  --sec: 48px;               /* section padding (60 at 760, 120 on desktop) */
  --rail: 0px;               /* rail column (62px on desktop) */
  --bar: 56px;               /* phone top bar height (Mira: ~55px, inset 6px) */
  --ease-panel: cubic-bezier(.87, 0, .13, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

@property --p { syntax: '<integer>'; inherits: false; initial-value: 100; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--c-bg); -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar) + 16px); }
body { margin: 0; background: var(--c-bg); color: var(--c-ink); font: 600 16px/1.5 var(--f-body); letter-spacing: -.01em; }
h1, h2, h3 { margin: 0; font-weight: 700; text-wrap: balance; }
.statement, .team-statement, .st-quote { text-wrap: wrap; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd, figure, blockquote, fieldset { margin: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
sup { line-height: 0; }
.num { font-variant-numeric: tabular-nums; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 1.15em; height: 1.15em; flex: none; }
.mk { width: 1em; height: 1em; flex: none; color: currentColor; }
.sample { font: 600 13px/1.4 var(--f-body); letter-spacing: 0; text-transform: none; color: var(--c-muted); }
.mute { color: var(--c-muted); }
.ink { color: var(--c-ink); }
a, button, summary, label { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.skip { position: absolute; left: 16px; top: -100px; z-index: 120; background: var(--c-bg); color: var(--c-ink); padding: 12px 16px; border-radius: var(--r-sm); }
.skip:focus { top: 8px; }
.demo { background: var(--c-ink); color: #ffffff; font: 600 13px/18px var(--f-body); letter-spacing: 0; text-align: center; padding: 6px 16px; }

/* Display voice: condensed uppercase (Mona Sans wdth 75, wght 700) */
.wordmark, .h2, h2, .h3, .statement, .promise, .label, .quote-30, .lead, .two-tone, .arrow-link, .btn-red, .btn-wide, .btn-light,
.site-nav, .mn-nav, .mn-logo, .brand, .fact, .svc-ix, .svc-title, .svc-price, .svc-inc, .svc-time, .row-t, .team-statement, .c-name, .c-role,
.fc-name, .fc-role, .stat-big, .stat-k, .rc-slogan, .rc-stats dd, .rc-stats dt, .pp-ix, .pp-t, .st-quote, .st-stats, .st-nav, figcaption,
.big-price, .base, .k, .seg label, .menu-name, .ml-row label, .ct-phone, .chip, .ns-t, .rail-badge, .mn-label,
.head-call, .see-all, .foot-nav, .team-est, .creds, .more-q .h3, .mosaic-h {
  font-family: var(--f-display); font-stretch: 75%; font-weight: 700; text-transform: uppercase; letter-spacing: -.01em;
}
h2, .h2 { font-size: 45px; line-height: .9; letter-spacing: -.02em; }
.h3 { font-size: 30px; line-height: 1.05; letter-spacing: -.02em; }
.label { font-size: 15px; line-height: 1.2; font-stretch: 80%; }
.label .ix { color: var(--c-accent); margin-right: 4px; }
.label .ix-soft { color: var(--red-on-soft); }
.label-muted { color: var(--c-muted); }
.lead { font-size: 19px; line-height: 1.15; font-weight: 675; text-align: justify; text-indent: 22%; }
.body { font: 600 16px/1.5 var(--f-body); letter-spacing: -.01em; color: var(--c-muted); text-transform: none; }
.hl { color: var(--c-accent-2); }
.k { font-size: 15px; line-height: 1.2; font-stretch: 80%; color: var(--c-muted); }

/* Buttons and links */
.btn-red { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 150px; height: 44px; padding: 5px 15px 5px 5px;
  border-radius: var(--r-pill); background: var(--c-accent); color: var(--c-on-accent); font-size: 17px; line-height: 1; text-decoration: none;
  transition: transform 120ms cubic-bezier(.23, 1, .32, 1), background-color .3s ease; }
.btn-red img { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; object-position: 50% 20%; }
.btn-red .i { width: 18px; height: 18px; }
.btn-red:active, .btn-wide:active, .btn-light:active { transform: scale(.97); }
.arrow-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 17px; line-height: 1.2; text-decoration: none; color: var(--c-ink); }
.arrow-link .sq { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; background: var(--c-accent); color: #ffffff; transition: transform .3s var(--ease-out); }
.arrow-link .sq .i { width: 13px; height: 13px; }
.arrow-link.light { color: #ffffff; }
.arrow-link.on-red { color: #ffffff; }
.btn-wide { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 10px; background: var(--c-accent); color: var(--c-on-accent);
  font-size: 17px; text-decoration: none; transition: transform 120ms cubic-bezier(.23, 1, .32, 1), background-color .3s ease; }
.btn-light { display: flex; align-items: center; justify-content: center; min-height: 48px; width: 100%; border: 0; border-radius: var(--r-sm); background: #e6e6e6; color: var(--c-ink);
  font-size: 17px; cursor: pointer; transition: transform 120ms cubic-bezier(.23, 1, .32, 1), background-color .3s ease; }

/* ---------- Frame ---------- */
.canvas { position: relative; padding: var(--gap); padding-left: calc(var(--rail) + var(--gap)); }
main { display: flex; flex-direction: column; gap: var(--gap); }
.opening { display: flex; flex-direction: column; gap: var(--gap); }
.panel-white, .panel-soft, .panel-red, .panel-ink { position: relative; border-radius: var(--r-lg); padding: var(--sec) var(--pad); }
.panel-white { background: var(--c-bg); }
.panel-soft { background: var(--c-surface); }
.panel-ink { background: var(--c-ink); color: #ffffff; }
.panel-red { background: var(--c-accent); color: #ffffff; }
.g4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col); }
.g4 > * { grid-column: 1 / -1; min-width: 0; }
main > *, main > .opening > * { scroll-margin-top: calc(var(--bar) + 12px); }

/* ---------- Header: phone/tablet = black bar inset 6px; desktop = the hero's top row ---------- */
.site-head { position: sticky; top: 6px; z-index: 40; margin: 3px 3px calc(-1 * var(--bar) - 3px); height: var(--bar);
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: var(--bar); grid-template-areas: "brand actions";
  padding: 0 4px 0 14px; background: var(--c-ink); color: #ffffff; border-radius: 10px; }
.brand { grid-area: brand; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; align-self: center; justify-self: start; font-size: 28px; line-height: 1; text-decoration: none; color: inherit; }
.brand .mk { width: 26px; height: 26px; }
/* Name once (themes/RECREATION-RULES.md): on phones and tablets the hero wordmark is the logo at the top, so the bar shows
   only the J mark until the hero has scrolled away (scroll-driven where supported); keyboard focus always shows the word. */
@media (max-width: 1079px) {
  .site-head .brand span { opacity: 0; }
  .site-head .brand:focus-visible span { opacity: 1 !important; }
  @supports (animation-timeline: scroll()) {
    .site-head .brand span { animation: name-in linear both; animation-timeline: scroll(root); animation-range: 50vh 75vh; }
  }
}
@keyframes name-in { from { opacity: 0; } to { opacity: 1; } }
.site-nav { display: none; grid-area: nav; font-size: 15px; font-stretch: 80%; }
.site-nav ul { display: flex; justify-content: space-between; height: 100%; }
.site-nav a { display: flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 4px; text-decoration: none; transition: opacity .3s ease; }
.cnt { color: var(--c-accent-2); font-size: 13px; margin-left: 2px; vertical-align: super; font-stretch: 80%; }
.head-actions { grid-area: actions; display: flex; align-items: center; gap: 2px; }
.head-call { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 6px; font-size: 17px; text-decoration: none; }
.head-call .hc-long, .head-book { display: none; }
.head-menu { display: grid; place-items: center; width: 44px; height: 44px; color: #ffffff; }
.head-menu .i { width: 18px; height: 18px; }

/* ---------- Loader (red percent field, then the mark opens like a window). Resting state = gone. ---------- */
.intro { position: fixed; inset: 0; z-index: 100; pointer-events: none; overflow: hidden; opacity: 0; visibility: hidden;
  animation: intro-life 1.1s linear both; }
@keyframes intro-life { 0%, 99.9% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
.intro-hole { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 10.4px;
  box-shadow: 0 0 0 150vmax var(--c-accent); animation: window 220ms cubic-bezier(.7, 0, .84, 0) 880ms forwards; }
.intro-hole::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--c-accent); animation: gone 1ms linear 880ms forwards; }
.intro-mark { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; color: #ffffff;
  animation: mark-rise 380ms var(--ease-panel) 100ms both, pop 220ms var(--ease-out) 780ms forwards, gone 1ms linear 880ms forwards; }
.intro-mark svg { display: block; width: 100%; height: 100%; }
.intro-pct { position: absolute; left: 50%; bottom: 12px; translate: -50% 0; color: #ffffff; font: 700 12px/1 var(--f-display); font-stretch: 80%; letter-spacing: .02em;
  counter-reset: p var(--p); animation: pct 700ms var(--ease-out) 80ms both, gone 170ms ease 780ms forwards; }
.intro-pct::after { content: counter(p) "%"; }
.intro-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #ffffff; transform-origin: left;
  animation: bar 700ms var(--ease-out) 80ms both, gone 170ms ease 780ms forwards; }
@keyframes bar { from { transform: scaleX(0); } }
@keyframes pct { from { --p: 0; } to { --p: 100; } }
@keyframes mark-rise { from { opacity: 0; transform: translateY(150px) scale(1.05); } }
@keyframes pop { to { transform: scale(1.03); } }
@keyframes gone { to { opacity: 0; } }
@keyframes window { to { transform: scale(120); } }

/* ---------- Menu (#menu:target, no scripts) ----------
   Phones (Mira): the black bar grows downward into the menu (clip-path from the bar's height to the full panel, fast
   ease-out) while the page dims. Desktop: the same panel is the 493px drawer beside the rail (below). */
.rail { display: none; }
.mn { position: fixed; inset: 0; z-index: 70; visibility: hidden; pointer-events: none; transition: visibility 0s linear .4s; }
.mn:target { visibility: visible; pointer-events: auto; transition: none; }
.mn-scrim { position: absolute; inset: 0; background: #1f1f1f; opacity: 0; transition: opacity .4s var(--ease-out); }
.mn:target .mn-scrim { opacity: .8; }
.mn-panel { position: absolute; top: 6px; left: 6px; right: 6px; display: flex; flex-direction: column; align-items: flex-start; max-height: calc(100% - 12px); overflow-y: auto; overscroll-behavior: contain;
  padding: 0 4px 26px 14px; border-radius: 10px; background: var(--c-ink); color: #ffffff;
  clip-path: inset(0 0 calc(100% - var(--bar)) 0 round 10px); transition: clip-path .4s var(--ease-out); }
.mn:target .mn-panel { clip-path: inset(0 round 10px); }
.mn-top { display: flex; align-items: center; justify-content: space-between; align-self: stretch; min-height: var(--bar); }
.mn-logo { display: inline-flex; align-items: center; gap: 8px; font-size: 28px; line-height: 1; }
.mn-logo .mk { width: 26px; height: 26px; }
.mn-close { display: grid; place-items: center; width: 44px; height: 44px; color: #ffffff; }
.mn-close .i { width: 20px; height: 20px; }
.mn-nav { display: grid; justify-items: start; margin-top: 18px; font-size: 34px; line-height: 1; letter-spacing: -.01em; }
.mn-nav a { display: flex; align-items: center; min-height: 44px; text-decoration: none; transition: opacity .3s ease; }
.mn-nav .cnt { font-size: 16px; }
.mn-label { margin: 26px 0 10px; color: var(--mute-dark); font-size: 17px; }
.mn-foot { display: grid; gap: 0; margin-top: 18px; font: 600 15px/1.4 var(--f-body); color: var(--mute-dark); }
.mn-foot a { display: inline-flex; align-items: center; min-height: 44px; color: #ffffff; text-decoration: none; }
.mn-foot span { margin-top: 6px; font-size: 13px; }
@media (prefers-reduced-motion: no-preference) {
  .mn:target .mn-nav a { animation: mn-in .45s var(--ease-out) both; animation-delay: calc(60ms + var(--i, 0) * 40ms); }
  .mn-nav a:nth-child(2) { --i: 1; } .mn-nav a:nth-child(3) { --i: 2; } .mn-nav a:nth-child(4) { --i: 3; } .mn-nav a:nth-child(5) { --i: 4; }
}
@keyframes mn-in { from { opacity: 0; translate: 0 14px; } }

/* ---------- S0 Hero ---------- */
.hero { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--c-ink); color: #ffffff; height: min(calc(100svh - 70px), 780px); min-height: 680px; }
.hero-media, .hero-media .hm { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-media .hm { object-fit: cover; object-position: 50% 40%; transition: opacity .6s ease, visibility .6s; }
.hero-media .hm-2 { object-position: 45% 40%; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: rgba(13, 13, 13, .55); }
.hm-2, .hm-3 { opacity: 0; visibility: hidden; }
.hero:has(#hp2:checked) .hm-2, .hero:has(#hp3:checked) .hm-3 { opacity: 1; visibility: visible; }
.hero:has(#hp2:checked) .hm-1, .hero:has(#hp3:checked) .hm-1 { opacity: 0; visibility: hidden; }
.hero-in { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; padding: calc(var(--bar) + 30px) var(--pad) var(--pad); }
.hero-mid { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.wordmark { position: relative; width: fit-content; margin: 0; font-size: min(50vw, 330px); line-height: .8; letter-spacing: -.02em; }
.wordmark .wm { display: block; }
.wordmark .reg { position: absolute; top: -.02em; right: -.17em; font-size: .13em; line-height: 1; font-stretch: 100%; font-weight: 675; }
.wordmark .script { position: absolute; left: 47%; bottom: -.1em; font: 400 .34em/1 var(--f-script); color: var(--c-accent-2); text-transform: none; letter-spacing: 0;
  white-space: nowrap; transform: rotate(-8deg); transform-origin: left bottom; }
.promise { max-width: 550px; margin-top: 22px; font-size: 19px; line-height: 1.15; font-weight: 675; text-align: justify; text-indent: 22%; }
.hero-foot { display: grid; grid-template-columns: auto auto; justify-content: space-between; align-items: end; gap: 22px 20px; }
.fact { display: flex; align-items: flex-end; gap: 12px; font-size: 15px; line-height: 1.45; font-stretch: 80%; }
.fact-k { color: var(--mute-dark); }
.fact-book { grid-column: 1 / -1; justify-content: space-between; align-items: center; }
.thumbs { display: none; }

/* ---------- Intro (about) ---------- */
#intro { z-index: 2; }
#intro .label { margin-bottom: 20px; }
.statement { font-size: 30px; line-height: 1; letter-spacing: -.02em; text-align: justify; text-indent: 38%; }
.founder-row { margin-top: 40px; row-gap: 26px; }
.founder { position: relative; grid-column: 1 / 2; }
.founder-photo { position: relative; aspect-ratio: 3 / 4; border-radius: var(--r-img); overflow: hidden; background: var(--c-ink); }
.founder-photo img, .card-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; transition: transform .6s var(--ease-out); }
.badge-mk { position: absolute; top: 10px; left: 10px; width: 22px; height: 22px; color: #ffffff; }
.sig { position: absolute; left: 62%; top: 56%; font: 400 50px/1 var(--f-script); color: var(--c-accent-2); transform: rotate(-7deg); white-space: nowrap; pointer-events: none; }
.founder figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 10px 8px 0; }
.fc-name { font-size: 19px; }
.fc-role { font-size: 13px; font-stretch: 80%; }
.founder-row > .label { grid-column: 2 / 3; align-self: start; }
.founder-note { display: grid; gap: 18px; }
.quote-30 { font-size: 23px; line-height: 1.15; font-weight: 675; letter-spacing: -.02em; }
.founder-note .arrow-link { justify-self: end; }
.trust { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--c-line); display: grid; gap: 14px; }
.rating { display: flex; align-items: center; gap: 14px; }
.faces { display: flex; flex: none; }
.faces img, .faces .more { width: 30px; height: 30px; border-radius: 6px; object-fit: cover; border: 2px solid #ffffff; margin-left: -8px; }
.faces img:first-child { margin-left: 0; }
.faces .more { display: grid; place-items: center; background: var(--c-accent); color: #ffffff; font: 700 12px/1 var(--f-display); font-stretch: 80%; width: 38px; }
.rating p { font-size: 14px; line-height: 1.4; color: var(--c-muted); }
.stars { display: inline-flex; align-items: center; gap: 1px; color: var(--c-ink); font-weight: 700; margin-right: 6px; }
.stars .i { width: 13px; height: 13px; color: var(--c-accent); }
.creds { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; font-stretch: 80%; }
.creds li { display: inline-flex; align-items: center; gap: 7px; }
.creds li::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--c-accent); }

/* ---------- S1 Work mosaic ---------- */
.work { position: relative; border-radius: var(--r-lg); }
.mosaic-frame { position: relative; height: 560px; border-radius: var(--r-lg); overflow: hidden; background: var(--c-ink); color: #ffffff; }
.mosaic { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); transform-origin: 50% 50%; }
.mcol { display: grid; grid-template-rows: 1fr 1fr; gap: var(--gap); min-height: 0; }
.mcol-mid { grid-template-rows: 1fr 1fr 1fr; }
.mosaic img { width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: var(--r-img); }
.mosaic-frame::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(13, 13, 13, .62); pointer-events: none; }
.mosaic-text { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 24px; padding: 0 var(--pad); }
.mosaic-mk { display: none; }
.mosaic-h { font-size: 45px; line-height: .9; letter-spacing: -.02em; }
.see-all { display: flex; align-items: center; gap: 14px; width: 200px; min-height: 73px; padding: 3px 14px 3px 3px; border-radius: var(--r-img); background: #ffffff; color: var(--c-ink);
  font-size: 17px; line-height: 1; text-decoration: none; }
.see-all img { width: 64px; height: 67px; border-radius: 8px; object-fit: cover; }
.mosaic .m-center { object-position: 40% 45%; }

/* ---------- S3 Why us ---------- */
.why-copy { display: grid; gap: 22px; margin-top: 20px; }
.why .lead { max-width: 402px; }
.note { font-size: 14px; }
.chart { display: none; }
.why-grid { margin-top: 30px; row-gap: 26px; }
.red-card { display: grid; align-content: start; gap: 18px; padding: 26px; border-radius: var(--r-img); background: var(--c-accent); color: #ffffff; }
.red-card .mk { width: 40px; height: 40px; }
.rc-slogan { font-size: 23px; line-height: 1.15; font-weight: 675; }
.red-card .body { color: #ffffff; }
.rc-stats { display: flex; gap: 30px; margin-top: 8px; }
.rc-stats div { display: flex; flex-direction: column-reverse; gap: 4px; }
.rc-stats dd { font-size: 40px; line-height: 1; letter-spacing: -.02em; }
.rc-stats dt { font-size: 13px; font-stretch: 80%; max-width: 15ch; }
.why-rows { display: grid; gap: 0; }
.stat-row { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; padding: 18px 0; border-bottom: 1px solid var(--c-line); }
.stat-row .ix { grid-column: 1 / -1; font: 700 15px/1 var(--f-display); font-stretch: 80%; color: var(--red-on-soft); }
.stat-big { font-size: 40px; line-height: 1; letter-spacing: -.02em; }
.stat-k { font-size: 17px; margin-bottom: 4px; }
.two-tone, .sign-row, .why .lead, .why .note { display: none; }
.two-tone { font-size: 17px; line-height: 1.1; font-weight: 675; }
.sign-row { align-items: center; justify-content: space-between; gap: 16px; }
.mini-person { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.3; }
.mini-person img { width: 32px; height: 32px; border-radius: 6px; object-fit: cover; object-position: 50% 20%; }
.mini-person small { display: block; font-size: 13px; color: var(--c-muted); }

/* ---------- S4 Services ---------- */
.svc-copy { display: grid; gap: 20px; margin-top: 20px; }
.services .lead { display: none; }
.svc-cards { display: grid; margin-top: 30px; }
.svc { grid-area: 1 / 1; position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--c-ink); color: #ffffff; min-width: 0;
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "ix ix" "main main" "time cta"; align-content: space-between; gap: 18px; padding: 20px; min-height: 380px;
  opacity: 0; visibility: hidden; transition: opacity .46s var(--ease-panel), visibility .46s; }
.svc > * { position: relative; z-index: 1; }
.svc .svc-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.svc::after { content: ""; position: absolute; inset: 0; background: rgba(13, 13, 13, .78); }
.svc-ix { grid-area: ix; font-size: 15px; font-stretch: 80%; }
.svc-ix span { color: var(--c-accent-2); }
.svc-photo { display: none; }
.svc-main { grid-area: main; display: grid; gap: 10px; align-self: end; }
.svc-title { font-size: 45px; line-height: .9; letter-spacing: -.02em; }
.svc-price { font-size: 17px; color: var(--mute-dark); }
.svc .body { color: var(--mute-dark); max-width: 340px; }
.svc-inc { display: none; }
.svc-time { grid-area: time; align-self: center; font-size: 17px; }
.svc-time .k { color: var(--mute-dark); margin-right: 8px; }
.svc-cta { grid-area: cta; }
.services:has(#sv1:checked) .svc-1, .services:has(#sv2:checked) .svc-2, .services:has(#sv3:checked) .svc-3, .services:has(#sv4:checked) .svc-4 { opacity: 1; visibility: visible; }
.svc-rows { display: grid; gap: var(--gap); margin-top: var(--gap); }
.svc-rows label { display: grid; grid-template-columns: 70px 1fr auto; align-items: center; min-height: 60px; padding: 0 16px 0 20px; border-radius: var(--r-lg); background: var(--c-ink); color: #ffffff; cursor: pointer;
  transition: background-color .3s ease; }
.svc-rows .svc-ix { grid-area: auto; }
.row-t { font-size: 26px; line-height: 1; letter-spacing: -.02em; }
.pm { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #ffffff; color: var(--c-ink); }
.pm .i { width: 16px; height: 16px; }
.pm .im, .svc-rows input:checked + label .ip { display: none; }
.svc-rows input:checked + label .im { display: block; }
.svc-rows input:checked + label .row-t { color: var(--mute-dark); }
.svc-rows input:focus-visible + label { outline: 2px solid var(--c-ink); outline-offset: 2px; }

/* ---------- S5 Team (red band with a light grain) ---------- */
.panel-red::before { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: .07; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.team > * { position: relative; }
.team-est { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 6px; font-size: 13px; font-stretch: 80%; margin-bottom: 26px; }
.team-statement { font-size: 30px; line-height: 1; letter-spacing: -.02em; text-align: justify; text-indent: 30%; color: rgba(13, 13, 13, .72); }
.team-statement .w { color: #ffffff; }
.team-grid { margin-top: 36px; }
.label-on-red { color: #ffffff; margin-bottom: 14px; }
.label-on-red .ix { color: #ffffff; }
.cards { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad); scroll-padding: 0 var(--pad); }
.cards::-webkit-scrollbar { display: none; }
.cards:focus-visible, .pp-list:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
.card { flex: 0 0 calc(50% - 6px); scroll-snap-align: start; }
.card-photo { position: relative; aspect-ratio: 3 / 4; border-radius: var(--r-img); overflow: hidden; background: var(--c-ink); }
.card:nth-child(3) .card-photo img { object-position: 50% 25%; }
.card:nth-child(4) .card-photo img { object-position: 40% 25%; }
.card p { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; padding: 10px 6px 0; }
.c-name { font-size: 19px; }
.c-role { font-size: 13px; font-stretch: 80%; }
.booking-now, .team-wide { display: none; }
.chip { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-stretch: 80%; }
.chip .num { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 4px; background: #ffffff; color: var(--c-ink); font-size: 13px; }

/* ---------- S6 Process ---------- */
.proc-copy { display: grid; gap: 20px; margin-top: 20px; }
.process .lead, .process .note { display: none; }
.stage { position: relative; margin-top: 30px; }
.stage, .work, .mosaic-frame { overflow: clip; }
.stage .pr, .pp-tabs, .dots { display: none; }
.pp-list { display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad); scroll-padding: 0 var(--pad); }
.pp-list::-webkit-scrollbar { display: none; }
.pp { position: relative; flex: 0 0 82%; height: 400px; border-radius: var(--r-lg); overflow: hidden; scroll-snap-align: start; background: var(--c-ink); color: #ffffff; }
.pp-imgbox, .pp-imgbox img { position: absolute; inset: 0; width: 100%; height: 100%; }
.pp-imgbox img { object-fit: cover; object-position: 50% 30%; }
.pp::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(13, 13, 13, .9) 0, rgba(13, 13, 13, .62) 55%, rgba(13, 13, 13, .55)); }
.pp-ix, .pp-txt { position: absolute; z-index: 1; left: 0; padding: 0 20px; }
.pp-ix { top: 18px; font-size: 15px; font-stretch: 80%; }
.pp-ix span { color: var(--c-accent-2); }
.pp-txt { bottom: 22px; display: grid; gap: 8px; }
.pp-t { font-size: 30px; line-height: 1; letter-spacing: -.02em; }
.pp-txt .body { color: #e6e6e6; max-width: 360px; }

/* ---------- S8 Stories ---------- */
.st-head { row-gap: 20px; }
.stories .lead { display: none; }
.st-panels { display: grid; margin-top: 26px; }
.st-panels > input { position: absolute; }
.story { grid-area: 1 / 1; min-width: 0; display: grid; grid-template-columns: 120px 1fr; grid-template-areas: "nav nav" "quote quote" "body body" "photo stats";
  gap: 16px 20px; align-content: start; opacity: 0; visibility: hidden; transition: opacity .46s var(--ease-panel), visibility .46s; }
.stories:has(#st1:checked) .s1, .stories:has(#st2:checked) .s2, .stories:has(#st3:checked) .s3 { opacity: 1; visibility: visible; }
.st-photo { grid-area: photo; }
.st-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-img); }
.st-photo figcaption { margin-top: 8px; font-size: 13px; font-stretch: 80%; color: var(--c-muted); }
.st-photo figcaption span { display: block; font-size: 19px; font-stretch: 75%; color: var(--c-ink); }
.st-nav { grid-area: nav; display: flex; align-items: center; justify-content: space-between; font-size: 15px; font-stretch: 80%; color: var(--c-muted); }
.st-nav p { margin-right: auto; }
.arr { display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; }
.arr .i { width: 26px; height: 26px; padding: 5px; border-radius: 4px; background: var(--c-accent); color: #ffffff; transition: background-color .3s ease; }
.st-quote { grid-area: quote; font-size: 30px; line-height: 1; letter-spacing: -.02em; }
.st-body { grid-area: body; }
.st-stats { grid-area: stats; align-self: end; display: grid; gap: 12px; }
.st-stats dt { font-size: 13px; font-stretch: 80%; color: var(--c-muted); }
.st-stats dd { font-size: 30px; line-height: 1; letter-spacing: -.02em; }
.st-panels:has(input:focus-visible) { outline: 2px solid var(--c-ink); outline-offset: 6px; border-radius: 4px; }

/* ---------- S9 Prices ---------- */
.label-dark { color: #ffffff; }
.label-dark .ix { color: var(--c-accent-2); }
.pr-copy { display: grid; gap: 20px; margin-top: 20px; }
.lead-dark { color: #ffffff; }
.prices .lead { display: none; }
.prices .hl, .contact .hl, .mosaic .hl { --from: #ffffff; }
.menu-card { margin-top: 30px; padding: 20px; border-radius: var(--r-img); background: var(--panel-2); }
.menu-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.menu-name { display: inline-flex; align-items: center; gap: 8px; font-size: 19px; }
.menu-name .mk { width: 20px; height: 20px; }
.seg { display: flex; padding: 3px; border-radius: var(--r-sm); background: #2a2a2a; }
.seg label { display: grid; place-items: center; min-height: 44px; min-width: 64px; padding: 0 12px; border-radius: 6px; color: var(--mute-dark); font-size: 15px; font-stretch: 80%; cursor: pointer; transition: background-color .3s ease, color .3s ease; }
.seg input:checked + label { background: #f7f7f7; color: var(--c-ink); }
.seg input:focus-visible + label { outline: 2px solid #ffffff; outline-offset: 2px; }
.menus { display: grid; margin-top: 18px; }
.menu { grid-area: 1 / 1; min-width: 0; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s; }
.prices:has(#mn1:checked) .m1, .prices:has(#mn2:checked) .m2, .prices:has(#mn3:checked) .m3 { opacity: 1; visibility: visible; }
.big-price { display: flex; align-items: baseline; gap: 8px; font-size: 60px; line-height: 1; letter-spacing: -.02em; }
.big-price small { font: 600 15px/1.2 var(--f-body); letter-spacing: 0; text-transform: none; color: var(--mute-dark); }
.base { display: none; margin-top: 12px; font-size: 17px; }
.base span { color: var(--mute-dark); margin: 0 6px 0 14px; }
.base span:first-child { margin-left: 0; }
.cols { display: grid; gap: 18px; margin-top: 18px; }
.cols > div { padding-top: 16px; border-top: 1px solid #333333; }
.cols .k { color: var(--mute-dark); margin-bottom: 10px; }
.inc li, .addons li { font: 600 15px/1.4 var(--f-body); color: #e6e6e6; padding: 3px 0; }
.inc li { display: flex; align-items: center; gap: 10px; }
.inc li::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--c-accent-2); }
.addons li { display: flex; justify-content: space-between; gap: 12px; }
.addons li span:first-child::before { content: "+"; margin-right: 10px; color: var(--mute-dark); }
.menu-foot { display: grid; gap: 14px; margin-top: 22px; }
.menu-foot .body { color: var(--mute-dark); font-size: 14px; }

/* ---------- S10 FAQ ---------- */
.faq-list { display: grid; }
.faq-list h2 { margin: 20px 0 22px; }
.faq details { border-bottom: 1px solid var(--c-line); }
.faq details:first-of-type { border-top: 1px solid var(--c-line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 54px; padding: 6px 0; cursor: pointer; list-style: none; font: 600 16px/1.35 var(--f-body); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--c-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat;
  transition: transform .3s var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details .body { padding: 0 36px 16px 0; }
.more-q { display: grid; gap: 8px; margin-top: 30px; }
.more-q .body { display: none; }

/* ---------- S11 Contact ---------- */
.contact { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--c-ink); color: #ffffff; }
.ct-media, .ct-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ct-media img { object-fit: cover; filter: blur(8px); }
.ct-gray { filter: grayscale(1) blur(8px); opacity: 0; }
.ct-media::after { content: ""; position: absolute; inset: 0; background: rgba(13, 13, 13, .8); }
.ct-in { position: relative; z-index: 1; display: grid; gap: 26px; padding: 34px var(--pad) var(--sec); }
.ct-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.contact .body.light, .mini-person.light small { color: var(--mute-dark); }
.mini-person.light { color: #ffffff; }
.ct-copy { display: grid; gap: 18px; }
.contact .lead { display: none; }
.mute-dark { color: var(--mute-dark); }
.madlib { position: relative; display: grid; gap: 14px; }
.req-note { font-size: 13px; color: var(--mute-dark); }
.ml-row { display: grid; gap: 6px; }
.ml-row label { font-size: 17px; }
.madlib input, .madlib select { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .5); border-radius: var(--r-sm); background: rgba(255, 255, 255, .07);
  color: #ffffff; font: 600 16px/1.2 var(--f-body); }
.madlib select { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; }
.madlib select option { color: var(--c-ink); background: #ffffff; }
.madlib ::placeholder { color: #a8a8a8; opacity: 1; }
.madlib input:focus-visible, .madlib select:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
.sent { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 14px; border-radius: var(--r-sm); background: #ffffff; color: var(--c-ink); font: 600 15px/1.4 var(--f-body); visibility: hidden; opacity: 0; transition: opacity .3s ease; }
.sent:target { visibility: visible; opacity: 1; }
.ct-side { display: grid; gap: 4px; }
.ct-phone { font-size: 30px; line-height: 1.1; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.ct-line { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 600 16px/1.3 var(--f-body); color: #e6e6e6; text-decoration: none; }
.ct-line .i { color: var(--mute-dark); }
.ct-side .ct-line:nth-of-type(2), .ct-side .ct-line:nth-of-type(3) { display: none; }
.ct-hours { font: 600 15px/1.4 var(--f-body); color: var(--mute-dark); }
.next-steps { display: none; }

/* ---------- Footer ---------- */
.site-foot { margin: 0 var(--gap) var(--gap); margin-left: calc(var(--rail) + var(--gap)); padding: 26px var(--pad) 30px; border-radius: var(--r-lg); background: var(--c-surface); }
.canvas > .site-foot { margin: var(--gap) 0 0; }
.foot-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 17px; }
.foot-nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; text-decoration: none; }
.foot-nav .brand { grid-area: auto; font-size: 26px; }
.foot-mid { display: grid; gap: 20px; margin-top: 34px; }
.micro { font-size: 13px; color: var(--c-muted); }
.wordmark-ink { color: var(--c-ink); }
.foot-mid .lead { color: var(--c-ink); }
.foot-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 20px; margin-top: 34px; }
.fb-col { display: grid; align-content: start; gap: 4px; font-size: 15px; line-height: 1.4; }
.fb-col a { display: inline-flex; align-items: center; min-height: 44px; }
.fb-col .k { margin-bottom: 2px; }
.fb-book { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; }
.foot-credit { margin-top: 24px; font-size: 13px; color: var(--c-muted); }

/* ---------- Phone page end (Phase 1A's iPhone bottom fix, kept without the bar): the footer panel runs flush to the
   screen bottom and under the home indicator, rounded only on top, so the iPhone's own rounded corners clip the panel,
   never a white strip. */
@media (max-width: 759px) {
  .canvas { padding-bottom: 0; }
  .canvas > .site-foot { border-radius: var(--r-lg) var(--r-lg) 0 0; padding-bottom: calc(30px + env(safe-area-inset-bottom)); }
}

/* ---------- Phone trims: keep the page under 10 screens (the full text shows from 760px) ---------- */
@media (max-width: 759px) {
  .founder-note .body, .red-card .body, .stat-row .body, .menu-foot .body, .cols > div:first-child, .foot-mid .lead, .more-q { display: none; }
  .founder-row { margin-top: 28px; }
  .trust { margin-top: 28px; }
  .stat-row { padding: 14px 0; align-items: end; }
  .stat-row .stat-k { margin: 0 0 4px; }
  .svc { min-height: 330px; }
  .pp { height: 360px; }
  .mosaic-frame { height: 500px; }
  .hero { min-height: 650px; height: 650px; }
  .st-photo { width: 104px; }
  .story { grid-template-columns: 104px 1fr; }
  .cols { margin-top: 12px; }
}

/* ---------- Hover (fine pointers only) ---------- */
@media (hover: hover) and (pointer: fine) {
  .site-nav a:hover, .mn-nav a:hover, .foot-nav a:hover { opacity: .6; }
  .btn-red:hover, .btn-wide:hover { background: #c82208; }
  .btn-light:hover { background: #ffffff; }
  .arrow-link:hover .sq { transform: translateX(3px); }
  .card:hover .card-photo img, .founder:hover .founder-photo img { transform: scale(1.03); }
  .svc-rows label:hover { background: #1f1f1f; }
  .arr:hover .i { background: #c82208; }
  .seg label:hover { color: #ffffff; }
  .seg input:checked + label:hover { color: var(--c-ink); }
  .thumbs label:hover img { opacity: .8; }
}

/* ---------- Tablet: 760px ---------- */
@media (min-width: 760px) {
  :root { --pad: 30px; --sec: 90px; --bar: 60px; }
  .site-head { grid-template-columns: auto 1fr auto; grid-template-rows: 60px; grid-template-areas: "brand . actions"; padding: 0 8px 0 18px; }
  .head-actions { gap: 12px; }
  .head-book { display: inline-flex; min-width: 0; }
  .head-call .hc-short { display: none; }
  .head-call .hc-long { display: inline; }
  .hero { height: min(calc(100svh - 40px), 900px); }
  .wordmark { font-size: min(34vw, 330px); }
  .promise { font-size: 23px; text-indent: 100px; }
  .lead { font-size: 23px; }
  h2, .h2 { font-size: 64px; }
  .statement { font-size: 44px; }
  .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero-foot { grid-template-columns: repeat(3, auto); }
  .fact-book { grid-column: auto; }
  .founder { grid-column: 1 / 3; }
  .founder-row > .label { grid-column: 3 / -1; }
  .card { flex-basis: calc(33.333% - 8px); }
  .pp { flex-basis: 46%; height: 520px; }
  .cols { grid-template-columns: 1fr 1fr; gap: 24px; }
  .menu-foot { grid-template-columns: 1fr 1fr; align-items: center; }
  .madlib { grid-template-columns: 1fr 1fr; column-gap: 20px; }
  .madlib .req-note, .madlib .btn-light { grid-column: 1 / -1; }
}

/* ---------- Desktop: 1080px (ncs-desktop). The measured Mira frame at 1440. ---------- */
@media (min-width: 1080px) {
  :root { --pad: 30px; --sec: 120px; --rail: 59px; --bar: 0px; }
  html { scroll-padding-top: 0; }
  .demo { padding-left: 78px; }
  main > *, main > .opening > * { scroll-margin-top: 0; }

  /* Rail: 56 x (100vh - 6), radius 12, 3px from the edges */
  .rail { position: fixed; z-index: 60; left: var(--gap); top: var(--gap); bottom: var(--gap); width: 56px; display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 16px 0 14px; border-radius: var(--r-lg); background: var(--c-ink); color: #ffffff; }
  .rail-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-top: -7px; color: #ffffff; }
  .rail-icon .i { width: 20px; height: 20px; }
  .rail-icon .i-shut { display: none; }
  .rail-close { display: none; }
  .rail-badge { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 15px; font-stretch: 80%; line-height: 1; white-space: nowrap; }
  .rail-est { margin-top: auto; padding: 10px 6px; border: 1px solid #ffffff; border-radius: 4px; }
  .rail-pin { display: grid; place-items: center; width: 44px; height: 44px; }
  .rail-pin .i { width: 20px; height: 20px; }
  /* open (:target): the rail's grid icon becomes a close link */
  body:has(#menu:target) .rail-icon:not(.rail-close) { display: none; }
  body:has(#menu:target) .rail-close { display: grid; }

  /* Drawer: grows out from under the rail to 493px (Mira: ~300ms, strong ease-out); the page gets an 85% #1f1f1f
     overlay and turns gray (~600ms ease-out). The rail stays on top. */
  .mn { z-index: 58; transition-duration: 0s; transition-delay: .5s; }
  .mn-scrim { transition: opacity .6s var(--ease-out); }
  .mn:target .mn-scrim { opacity: .85; }
  .mn-panel { top: var(--gap); bottom: var(--gap); left: var(--gap); right: auto; width: 493px; max-height: none; padding: 26px 30px 30px 86px; border-radius: var(--r-lg);
    box-shadow: inset 56px 0 0 var(--c-ink), inset 57px 0 0 rgba(255, 255, 255, .1);
    clip-path: inset(0 calc(100% - 56px) 0 0 round var(--r-lg)); transition: clip-path .35s cubic-bezier(.16, 1, .3, 1); }
  .mn:target .mn-panel { clip-path: inset(0 round var(--r-lg)); }
  .mn-top { min-height: 0; }
  .mn-logo { font-size: 26px; }
  .mn-close, .head-menu { display: none; }
  .mn-nav { margin-top: 70px; font-size: 40px; line-height: 1.1; letter-spacing: -.02em; }
  .mn-nav a { min-height: 44px; }
  .mn-label { margin: 46px 0 14px; font-size: 15px; }
  .mn-foot { margin-top: auto; font-size: 13px; }
  .mn-foot a { min-height: 32px; }
  .canvas { transition: filter .6s var(--ease-out); }
  body:has(#menu:target) .canvas { filter: grayscale(1); }

  /* Header = the hero's top row on the 4-column grid (white over the photo) */
  .site-head { position: absolute; z-index: 5; top: var(--gap); left: calc(var(--rail) + var(--gap)); right: var(--gap); margin: 0; height: auto; padding: 30px var(--pad) 0;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto; grid-template-areas: "brand nav nav actions"; column-gap: var(--col); align-items: center;
    background: none; border-radius: 0; color: #ffffff; }
  .brand { font-size: 23px; }
  .brand .mk { width: 22px; height: 22px; }
  .site-nav { font-size: 23px; font-stretch: 75%; }
  .site-nav ul { justify-content: space-between; gap: 0; }
  .site-nav a { padding: 0; }
  .head-actions { justify-self: end; gap: 22px; }
  .head-call { font-size: 23px; padding: 0; }
  .head-call .i { display: none; }
  .head-book { min-width: 150px; }
  /* Desktop pages other than Home (the bundler shows them with :target): the row sits on the white canvas in ink */
  body:has(:is(#work, #stories, #services, #process, #prices, #team, #faq, #book):target, :is(#work, #stories, #services, #process, #prices, #team, #faq, #book) :target) .site-head {
    position: relative; top: auto; left: auto; right: auto; padding: 30px var(--pad); color: var(--c-ink); }
  main > :is(#work, #stories, #services, #process, #prices, #team, #faq, #book) { scroll-margin-top: 110px; }

  /* Grid */
  .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  h2, .h2 { font-size: 80px; }
  .h3 { font-size: 40px; }
  .lead { font-size: 23px; text-indent: 160px; }

  /* Hero: 1375 x (100vh - 6), sticky, the about panel slides over it */
  .hero { position: sticky; top: var(--gap); height: calc(100svh - 6px); min-height: 640px; }
  .hero-media .hm { object-position: 50% 40%; }
  .hero-media .hm-2 { object-position: 40% 45%; }
  .hero-in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 1fr auto; column-gap: var(--col); padding: 100px var(--pad) 33px; }
  .hero-mid { grid-column: 2 / 4; display: block; align-self: center; padding-top: 40px; }
  .wordmark { font-size: min(22.4vw, 330px); }
  .wordmark .script { left: 57%; bottom: -.07em; }
  .promise { margin-top: 26px; font-size: 23px; text-indent: 108px; }
  .hero-foot { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--col); align-items: end; padding-top: 50px; }
  .fact-book { grid-column: 4; justify-self: end; justify-content: flex-end; gap: 16px; }
  .thumbs { display: flex; flex-direction: column; gap: var(--gap); position: absolute; right: 30px; top: 50%; transform: translateY(-50%); }
  .thumbs label { display: block; width: 90px; height: 50px; border-radius: 6px; overflow: hidden; cursor: pointer; transition: transform .25s ease; }
  .thumbs label img { width: 100%; height: 100%; object-fit: cover; opacity: .4; transition: opacity .3s ease; }
  .thumbs input:checked + label { transform: translateX(-8px); }
  .thumbs input:checked + label img { opacity: 1; }
  .thumbs input:focus-visible + label { outline: 2px solid #ffffff; outline-offset: 2px; }

  /* About */
  #intro { padding: var(--sec) var(--pad) 100px; }
  #intro > .g4:first-child > .label { grid-column: 1; margin: 14px 0 0; }
  .statement { grid-column: 2 / -1; font-size: 60px; text-indent: calc((100% - 40px) / 3 + 20px); }
  .founder-row { margin-top: 80px; }
  .founder { grid-column: 1; }
  .sig { left: 66%; top: 66%; font-size: 64px; }
  .founder figcaption { padding: 12px 12px 0; }
  .fc-name { font-size: 23px; }
  .fc-role { font-size: 15px; }
  .founder-row > .label { grid-column: 2; margin-top: 4px; }
  .founder-note { grid-column: 3 / -1; align-content: start; gap: 22px; padding-right: 60px; }
  .quote-30 { font-size: 30px; }
  .founder-note .arrow-link { margin-top: 26px; justify-self: center; }
  .trust { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--col); align-items: center; margin-top: 70px; padding-top: 26px; }
  .rating { grid-column: 1 / 3; }
  .creds { grid-column: 3 / -1; justify-content: flex-end; }

  /* Mosaic: sticky 100vh frame, 3 columns of 456, the grid scales out from one center photo */
  .mosaic-frame { position: sticky; top: var(--gap); height: calc(100svh - 6px); min-height: 640px; }
  .mosaic-text { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--col); align-items: center; padding: 0 var(--pad); }
  .mosaic-text > * { grid-row: 1; }
  .mosaic-mk { display: block; grid-column: 1; width: 40px; height: 40px; color: #ffffff; }
  .mosaic-h { grid-column: 2 / 4; font-size: 80px; }
  .see-all { grid-column: 4; justify-self: end; }

  /* Why us */
  .why-head > .label { grid-column: 1; margin-top: 14px; }
  .why-copy { grid-column: 2 / 4; margin-top: 0; gap: 26px; }
  .why .lead, .why .note { display: block; }
  .why .lead { text-indent: 150px; }
  .chart { display: block; margin-top: 90px; }
  .chart .label { margin-bottom: 18px; }
  .bars { position: relative; display: grid; gap: 14px; padding: 18px 0;
    background: repeating-linear-gradient(90deg, rgba(13, 13, 13, .16) 0 1px, transparent 1px calc(20% - .2px)); }
  .bar { position: relative; display: flex; align-items: center; justify-content: flex-end; width: calc(var(--v) * 1%); height: 50px; padding: 0 14px; border-radius: var(--r-sm);
    font: 700 17px/1 var(--f-display); font-stretch: 75%; text-transform: uppercase; }
  .bar-ink { background: var(--c-ink); color: var(--mute-dark); }
  .bar-white { background: #ffffff; color: var(--c-ink); }
  .axis { display: flex; justify-content: space-between; margin-top: 10px; font: 700 15px/1 var(--f-display); font-stretch: 80%; color: var(--c-muted); }
  .why-grid { margin-top: 90px; }
  .red-card { grid-column: 1; min-height: 482px; padding: 30px; gap: 20px; }
  .rc-stats { flex-direction: column; gap: 26px; margin-top: auto; }
  .why-rows { grid-column: 3 / -1; align-content: start; }
  .stat-row { grid-template-columns: 1fr 1fr; padding: 22px 0 30px; }
  .stat-big { font-size: 60px; align-self: center; }
  .two-tone { display: block; margin-top: 46px; max-width: 230px; }
  .sign-row { display: flex; margin-top: 30px; }

  /* Services */
  .svc-head > .label { grid-column: 1 / 3; margin-top: 14px; }
  .svc-copy { grid-column: 3 / -1; margin-top: 0; gap: 34px; }
  .services .lead { display: block; max-width: 402px; text-indent: 158px; }
  .svc-cards { margin: 70px calc(-1 * var(--pad)) 0; }
  .svc-rows { margin: var(--gap) calc(-1 * var(--pad)) 0; }
  .svc { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: "ix . . ." "photo . main main" "time . inc cta"; column-gap: var(--col); row-gap: 30px; padding: 30px; min-height: 576px; }
  .svc-photo { display: block; grid-area: photo; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-img); }
  .svc-main { align-self: center; gap: 14px; }
  .svc-title { font-size: 80px; }
  .svc-inc { display: flex; grid-area: inc; align-items: flex-end; gap: 16px; }
  .svc-inc .k { color: var(--mute-dark); }
  .svc-inc li { font-size: 17px; line-height: 1.3; }
  .svc-time { align-self: end; }
  .svc-cta { justify-self: end; align-self: end; }
  .svc-rows label { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--col); min-height: 94px; padding: 0 30px; }
  .svc-rows .pm { grid-column: 4; justify-self: end; }
  .svc-rows .row-t { grid-column: 2 / 4; }
  .row-t { font-size: 40px; }

  /* Team */
  .team-top { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--col); }
  .team-est { grid-column: 4; justify-self: end; margin-bottom: 70px; font-size: 15px; }
  .team-statement { grid-column: 1 / -1; font-size: 60px; text-indent: calc((100% - 60px) / 2 + 40px); }
  .team-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--col); row-gap: 40px; margin-top: 80px; }
  .label-on-red { grid-column: 1 / 3; grid-row: 1; }
  .cards { grid-column: 1 / -1; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; row-gap: 40px; overflow: visible; margin: 0; padding: 0; }
  .card:nth-child(1) { grid-column: 3; grid-row: 1; }
  .card:nth-child(2) { grid-column: 4; grid-row: 1; }
  .card:nth-child(3) { grid-column: 1; grid-row: 2; }
  .card:nth-child(4) { grid-column: 2; grid-row: 2; }
  .card p { padding: 12px 12px 0; }
  .c-name { font-size: 23px; }
  .c-role { font-size: 15px; }
  .booking-now { display: grid; align-content: start; justify-items: start; gap: 18px; grid-column: 1 / 3; grid-row: 3; margin-top: 80px; }
  .booking-now .body { color: #ffffff; max-width: 300px; }
  .booking-now .arrow-link { margin-left: 230px; }
  .team-wide { display: block; grid-column: 3 / -1; grid-row: 3; width: 100%; aspect-ratio: 645 / 451; object-fit: cover; border-radius: var(--r-img); margin-top: 80px; }

  /* Process: sticky-free, a fixed 100vh row; the active panel is 3 units wide, the others 1 (683 / 229 at 1440) */
  .proc-head > .label { grid-column: 1; margin-top: 14px; }
  .proc-copy { grid-column: 2 / 4; margin-top: 0; gap: 26px; }
  .process .lead, .process .note { display: block; }
  .process .lead { max-width: 402px; text-indent: 158px; }
  .stage { height: calc(100svh - 6px); min-height: 640px; margin: 80px calc(-1 * var(--pad)) calc(-1 * var(--sec)); }
  .stage .pr { display: block; top: 50%; left: 50%; }
  .pp-list { position: absolute; inset: 0; display: block; overflow: visible; margin: 0; padding: 0; }
  .pp, .pt { --u: calc((100% - 9px) / 6); --n: var(--k); --m: 1; --on: 0; --x: calc(var(--n) * var(--u) + var(--k) * 3px); --w: calc(var(--m) * var(--u)); }
  .k0 { --k: 0; } .k1 { --k: 1; } .k2 { --k: 2; } .k3 { --k: 3; }
  #pr1:checked ~ * :is(.k1, .k2, .k3), #pr2:checked ~ * :is(.k2, .k3), #pr3:checked ~ * .k3 { --n: calc(var(--k) + 2); }
  #pr1:checked ~ * .k0, #pr2:checked ~ * .k1, #pr3:checked ~ * .k2, #pr4:checked ~ * .k3 { --m: 3; --on: 1; }
  .pp { position: absolute; inset: 0; height: auto; border-radius: 0; background: none; clip-path: inset(0 calc(100% - var(--x) - var(--w)) 0 var(--x) round var(--r-lg));
    transition: clip-path .46s var(--ease-panel); }
  .pp-imgbox { transform: translateX(calc(var(--x) + (var(--w) - 3 * var(--u)) / 2)); transition: transform .46s var(--ease-panel); }
  .pp-imgbox img { right: auto; width: calc(3 * (100% - 9px) / 6); }
  .pp::after { background: rgba(13, 13, 13, .55); }
  .pp::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(13, 13, 13, .55), transparent 45%), rgba(13, 13, 13, .22);
    opacity: calc(1 - var(--on) * .2); transition: opacity .46s var(--ease-panel); }
  .pp-ix, .pp-txt { width: 100%; transform: translateX(var(--x)); transition: transform .46s var(--ease-panel), opacity .46s var(--ease-panel), visibility .46s; z-index: 2; padding: 0 30px; }
  .pp-ix { top: 26px; }
  .pp-txt { bottom: 34px; opacity: var(--on); visibility: hidden; }
  #pr1:checked ~ * .k0 .pp-txt, #pr2:checked ~ * .k1 .pp-txt, #pr3:checked ~ * .k2 .pp-txt, #pr4:checked ~ * .k3 .pp-txt { visibility: visible; }
  .pp-t { font-size: 40px; }
  .pp-txt .body { max-width: 300px; }
  .pp-tabs { display: block; position: absolute; inset: 0; z-index: 3; }
  .pt { position: absolute; top: 0; bottom: 0; left: var(--x); width: var(--w); cursor: pointer; border-radius: var(--r-lg); }
  .dots { display: flex; position: absolute; z-index: 3; top: 30px; left: 0; width: 100%; gap: 3px; pointer-events: none; --a: 0; --u: calc((100% - 9px) / 6);
    transform: translateX(calc(var(--a) * (var(--u) + 3px) + 3 * var(--u) - 30px - 47px)); transition: transform .46s var(--ease-panel); }
  #pr2:checked ~ .dots { --a: 1; } #pr3:checked ~ .dots { --a: 2; } #pr4:checked ~ .dots { --a: 3; }
  .dots i { width: 11px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .35); }
  #pr1:checked ~ .dots i:nth-child(1), #pr2:checked ~ .dots i:nth-child(2), #pr3:checked ~ .dots i:nth-child(3), #pr4:checked ~ .dots i:nth-child(4) { background: #ffffff; }
  .stage:has(.pr:focus-visible) { outline: 2px solid var(--c-ink); outline-offset: 4px; border-radius: var(--r-lg); }
  .process { padding-bottom: var(--sec); }

  /* Stories */
  .st-head .h2 { grid-column: 1 / 3; }
  .stories .lead { display: block; grid-column: 3 / -1; max-width: 402px; text-indent: 108px; align-self: start; margin-top: 8px; }
  .st-panels { margin-top: 90px; }
  .story { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: "photo . nav nav" "photo . quote quote" "photo . body body" "photo . stats stats"; column-gap: var(--col); row-gap: 26px; }
  .st-photo { align-self: start; }
  .st-photo figcaption { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; padding: 0 12px; font-size: 15px; }
  .st-photo figcaption span { font-size: 23px; }
  .st-quote { font-size: 44px; }
  .st-body { max-width: 340px; }
  .st-stats { grid-template-columns: 1fr 1fr; margin-top: 30px; }
  .st-stats dt { font-size: 15px; }
  .st-stats dd { font-size: 40px; }

  /* Prices */
  .pr-head > .label { grid-column: 1; margin-top: 14px; }
  .pr-copy { grid-column: 2 / 4; margin-top: 0; gap: 26px; }
  .prices .lead { display: block; max-width: 402px; text-indent: 100px; color: var(--mute-dark); }
  .menu-card { margin: 80px 0 0 calc((100% - 60px) / 4 + 20px); width: calc((100% - 60px) / 4 * 3 + 40px - 120px); padding: 30px; }
  .base { display: block; }
  .cols { grid-template-columns: 1fr 1fr; gap: 0; margin-top: 30px; }
  .cols > div { padding: 26px 30px 6px 0; }
  .cols > div + div { padding-left: 30px; border-left: 1px solid #333333; }
  .menu-foot { grid-template-columns: 1fr 1fr; margin-top: 30px; }

  /* FAQ */
  .faq > .g4 > .label { grid-column: 1; margin-top: 14px; }
  .faq-list { grid-column: 2 / -1; }
  .faq-list h2 { margin: 0 0 40px; }
  .faq summary { font-size: 16px; }
  .more-q { margin-top: 80px; gap: 14px; }
  .more-q .body { display: block; max-width: 340px; }

  /* Contact */
  .ct-in { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--col); row-gap: 40px; padding: 34px var(--pad) var(--sec); }
  .ct-top { grid-column: 2 / -1; }
  .ct-copy { grid-column: 2 / 4; margin-top: 80px; gap: 26px; }
  .contact .lead { display: block; max-width: 402px; text-indent: 108px; }
  .madlib { grid-column: 2 / 4; row-gap: 14px; }
  .ml-row { display: flex; align-items: center; gap: 14px; }
  .ml-row label { flex: none; }
  .madlib .btn-light { grid-column: 2; grid-row: 3; min-height: 44px; }
  .madlib .req-note { grid-column: 1; grid-row: 3; align-self: center; }
  .madlib .sent { left: calc(50% + 10px); }
  .ct-side { grid-column: 4; align-content: start; }
  .ct-side .ct-line:nth-of-type(2), .ct-side .ct-line:nth-of-type(3) { display: inline-flex; }
  .next-steps { display: grid; grid-template-columns: subgrid; grid-column: 2 / -1; margin-top: 60px; }
  .next-steps li { display: grid; gap: 10px; justify-items: start; }
  .next-steps .num { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 3px; background: #ffffff; color: var(--c-ink); font: 700 13px/1 var(--f-display); font-stretch: 80%; }
  .ns-t { font: 700 16px/1.3 var(--f-body); letter-spacing: -.01em; text-transform: none; }
  .next-steps .body { color: var(--mute-dark); max-width: 280px; }

  /* Footer */
  .canvas > .site-foot { padding: 40px var(--pad); }
  .foot-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--col); font-size: 23px; }
  .foot-nav .brand { font-size: 23px; }
  .foot-nav a:last-child { justify-self: end; }
  .foot-mid { margin: 60px 0 0 calc((100% - 60px) / 4 + 20px); gap: 26px; }
  .foot-mid .lead { max-width: 550px; text-indent: 108px; }
  .foot-bottom { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 70px; }
  .fb-book { grid-column: 4; display: grid; justify-items: end; justify-self: end; text-align: right; }
}

/* ---------- Hover drawer (fine pointers): hovering the rail slides the menu out, the page dims and goes gray ---------- */
@media (min-width: 1080px) and (hover: hover) and (pointer: fine) {
  body:has(.rail:hover, .mn-panel:hover) .mn { visibility: visible; transition-delay: 0s; }
  body:has(.rail:hover, .mn-panel:hover) .mn-panel { clip-path: inset(0 round var(--r-lg)); }
  body:has(.rail:hover, .mn-panel:hover) .mn-scrim { opacity: .85; }
  body:has(.rail:hover, .mn-panel:hover) .canvas { filter: grayscale(1); }
  body:has(.rail:hover, .mn-panel:hover) .rail-icon .i-open { display: none; }
  body:has(.rail:hover, .mn-panel:hover) .rail-icon .i-shut { display: block; }
  .mn:not(:target) .mn-scrim { pointer-events: none; }
}

/* ---------- Motion ---------- */
@media (min-width: 1080px) {
  .intro { animation-duration: 1.6s; }
  .intro-hole { animation: window 300ms cubic-bezier(.7, 0, .84, 0) 1300ms forwards; }
  .intro-hole::before { animation: gone 1ms linear 1300ms forwards; }
  .intro-mark { animation: mark-rise 540ms var(--ease-panel) 160ms both, pop 300ms var(--ease-out) 1120ms forwards, gone 1ms linear 1300ms forwards; }
  .intro-pct { animation: pct 1000ms var(--ease-out) 120ms both, gone 170ms ease 1120ms forwards; }
  .intro-bar { animation: bar 1030ms var(--ease-out) 120ms both, gone 170ms ease 1120ms forwards; }
}
@media (prefers-reduced-motion: no-preference) {
  /* After the window opens: the wordmark settles and the script word is drawn left to right */
  .wordmark .wm { animation: settle 500ms var(--ease-out) 950ms backwards; }
  .wordmark .script { animation: wipe 600ms var(--ease-out) 1100ms backwards; }
  @media (min-width: 1080px) {
    .wordmark .wm { animation-delay: 1450ms; }
    .wordmark .script { animation-delay: 1650ms; }
  }
  @keyframes settle { from { transform: scale(1.06); } }
  @keyframes wipe { from { clip-path: inset(-20% 100% -20% 0); } to { clip-path: inset(-20% -10% -20% 0); } }

  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    /* Settle into place */
    .rise { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    @keyframes rise { from { opacity: 0; translate: 0 32px; } }
    /* One red word per heading fills from ink (or white) to red */
    .hl { --from: var(--c-ink); color: transparent; -webkit-background-clip: text; background-clip: text;
      background-image: linear-gradient(90deg, var(--c-accent-2) 50%, var(--from) 50%); background-size: 200% 100%; background-position: 100% 0; background-repeat: no-repeat;
      animation: fill linear both; animation-timeline: view(); animation-range: entry 70% cover 45%; }
    .hl-light, .prices .hl, .contact .hl { --from: #ffffff; }
    @keyframes fill { to { background-position: 0 0; } }
    /* Mosaic: one photo, then the grid (phones: as it enters) */
    .mosaic { animation: zoomout linear both; animation-timeline: view(); animation-range: entry 10% contain 20%; }
    @keyframes zoomout { from { transform: scale(2.4); } }
    /* Contact photo: gray to color as it enters */
    .ct-gray { animation: tocolor linear both; animation-timeline: view(); animation-range: entry 10% entry 90%; }
    @keyframes tocolor { from { opacity: 1; } to { opacity: 0; } }
    @media (min-width: 1080px) {
      /* Hero: sticky; scales to .925 and fades to .6 while the about panel covers it */
      .opening { timeline-scope: --about; }
      #intro { view-timeline: --about block; }
      .hero { animation: hero-out linear both; animation-timeline: --about; animation-range: entry 0% entry 100%; }
      @keyframes hero-out { to { transform: scale(.925); opacity: .6; } }
      /* Mosaic: the section is 200vh, the frame stays pinned while the grid scales 3.1 -> 1 */
      .work { height: 200vh; view-timeline: --mosaic block; }
      .mosaic { animation: zoomout-desk linear both; animation-timeline: --mosaic; animation-range: contain 0% contain 80%; }
      @keyframes zoomout-desk { from { transform: scale(3.1); } }
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
  *, *::before, *::after { transition-duration: 0s !important; }
}