/* Owner: shell. Header, close, booking dialog. FAQ is in components/ui/faq-section.css, footer in components/ui/footer.css. */

/* ---------- Approved F1 header, with 14px pixel links ---------- */
.header{position:fixed;inset:0 auto auto 50%;transform:translateX(-50%);z-index:30;width:100%;padding-top:env(safe-area-inset-top,0px);background:#000;border:1px solid transparent;border-top:0;border-radius:0;--menu-offset:calc(var(--header) + env(safe-area-inset-top,0px))}
.header::before{content:none}
.header.is-ready{transition:width 400ms var(--ease),top 400ms var(--ease),border-color 300ms ease,border-radius 400ms var(--ease)}
.header .header-in{height:var(--header);display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:'brand nav right';align-items:center;gap:24px;justify-content:initial}
.header.is-ready .header-in{transition:height 400ms var(--ease),padding 400ms var(--ease)}
.header .brand{grid-area:brand;justify-self:start;min-height:44px;font-size:18px;font-weight:520;letter-spacing:-.03em;gap:9px}
.header .brand img{width:26px;height:26px}
.header .nav{grid-area:nav;display:flex;align-items:center;gap:4px}
.header .nav a:not(.btn){position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:0;white-space:nowrap;font:400 14px/1 var(--pixel);font-kerning:none;letter-spacing:0;color:#bfc3cb;transition:color 160ms ease}
.header .nav a:not(.btn)::after{content:'';position:absolute;right:2px;top:calc(50% - 5px);width:5px;height:9px;background:var(--violet);opacity:0}
.header .nav a:not(.btn):hover,.header .nav a:not(.btn):focus-visible,.header .nav a[aria-current=location]{color:var(--violet-bright);background:transparent}
.header .nav a:not(.btn):hover::after,.header .nav a:not(.btn):focus-visible::after{animation:pixel-block-blink 900ms step-end infinite}
.header .nav .nav-cta{display:none}
.header .header-right{grid-area:right;justify-self:end;display:flex;align-items:center;gap:8px}
.header .menu-b{display:none;place-items:center;width:44px;height:44px;padding:0;border:1px solid #fff3;border-radius:0;background:transparent;color:#fff;cursor:pointer}
.menu-b svg{width:18px;height:18px;overflow:visible}
.menu-b path{transform-box:fill-box;transform-origin:center;transition:transform 300ms var(--ease)}
.menu-b[aria-expanded=true] path:first-child{transform:translateY(3px) rotate(45deg)}
.menu-b[aria-expanded=true] path:last-child{transform:translateY(-3px) rotate(-45deg)}
.header.is-scrolled{top:12px;width:calc(min(100%,1296px) - 48px);border:1px solid #ffffff26;border-radius:12px;--menu-offset:calc(12px + 60px + env(safe-area-inset-top,0px))}
.header.is-scrolled .header-in{height:60px;padding-inline:calc(var(--gutter) - 24px)}
@keyframes pixel-block-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.is-paused .team-cursor{animation-play-state:paused}
@media(min-width:1001px){.header{--gutter:48px}}
@media(max-width:1000px){
 .header .header-in{grid-template-columns:1fr auto;grid-template-areas:'brand menu';gap:16px}
 .header .menu-b{grid-area:menu;display:grid;justify-self:end}
 .header .header-right{display:none}
 /* Content-height sheet that expands down from the bar; not a full-screen cover. */
 .header .nav{position:absolute;inset:100% 0 auto;z-index:1;flex-direction:column;align-items:stretch;gap:0;max-height:0;padding:0 var(--gutter);overflow:hidden;overflow-y:hidden;background:#000;border:1px solid transparent;border-top:0;border-radius:0;visibility:hidden;opacity:0;transform-origin:top center;transform:scaleY(.96);pointer-events:none;transition:max-height 320ms var(--ease),padding 320ms var(--ease),opacity 220ms var(--ease),transform 320ms var(--ease),visibility 0s linear 320ms,border-color 220ms ease,border-radius 320ms var(--ease)}
 .header.is-open .nav{visibility:visible;opacity:1;transform:none;pointer-events:auto;max-height:min(70dvh,calc(100dvh - var(--menu-offset)));padding:12px var(--gutter) max(24px,env(safe-area-inset-bottom,0px));overflow-y:auto;transition-delay:0s;border-color:#ffffff1f}
 .header .nav a:not(.btn){min-height:56px;padding-inline:12px;border-bottom:1px solid #ffffff1a;font-size:17px}
 .header .nav .nav-cta{display:inline-flex;align-self:flex-start;max-width:100%;margin-top:24px;font-size:13px;padding-inline:16px}
 .header.is-scrolled{width:calc(100% - 24px);top:12px}
 .header.is-scrolled .header-in{padding-inline:calc(var(--gutter) - 12px)}
 /* Open + scrolled: one connected card — top radius on the bar, bottom radius on the sheet.
    Absolute left/right are relative to the header padding box, so left:0 sits 1px inside the
    header border and creates a side step. Pull the sheet out by 1px and drop the top border
    so the outer edge reads as one continuous card. */
 .header.is-scrolled.is-open{border-radius:12px 12px 0 0;border-bottom-color:transparent}
 .header.is-scrolled .nav{left:-1px;right:-1px;border-color:#ffffff26;border-top:0;border-radius:0 0 12px 12px}
 .header.is-scrolled.is-open .nav{left:-1px;right:-1px;border-color:#ffffff26;border-top:0;border-radius:0 0 12px 12px}
 .header.is-open:not(.is-scrolled) .nav{border-left:0;border-right:0;border-bottom:0;border-radius:0}
}
@media(prefers-reduced-motion:reduce){
 .header.is-ready,.header.is-ready .header-in,.header .nav,.menu-b path{transition:none}
 .header .nav{transform:none}
 .header .nav a:not(.btn):hover::after,.header .nav a:not(.btn):focus-visible::after{animation:none;opacity:1}
}

/* The page starts below the fixed header, and the hero reaches back up under it, so the #top anchor sits clear of the bar. */
body.has-page-wake > main#top { display:flow-root; margin-top:var(--header); }
body.has-page-wake > main#top > .hero { margin-top:calc(-1 * var(--header)); }

/* ---------- Page rhythm: one set of numbers for every home section and the post's next step band ----------
   Tokens live in tokens.css under "spacing". The five home sections and the post band share the padding, the eyebrow,
   the heading, the split head and the gaps below. Black sections let the page's wake show through. */
body.has-page-wake #contact { background:transparent; }
#work, #start, #example, #questions, #contact, .post-cta { padding-block:var(--sp-section); }
#contact, .post-cta { background:#000; color:var(--text); }
.cmp-eyebrow, .st-label, .wf-label, .close-eyebrow, #questions .label { display:block; margin:0 0 var(--sp-eyebrow); font:400 14px/1 var(--pixel); letter-spacing:.01em; color:var(--violet-bright); }
#work h2, #start h2, #example h2, #questions h2, .close-head h2 { margin:0; font-size:var(--t-h2x); font-weight:480; line-height:1.02; letter-spacing:var(--track-h2); text-wrap:balance; }
#work h2 .dim, #start h2 .dim, #example h2 .dim, #questions h2 .dim, .close-head h2 .dim { display:block; color:var(--dim); }
.cmp-header, .st-split, #example .head, .faq-head, .close-head { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,var(--sp-lead-col)); gap:18px var(--sp-head-gap); align-items:end; max-width:none; }
.cmp-header, .st-split, #example .head, .faq-head { margin-bottom:var(--sp-head); }
.close-head { align-items:start; }
.cmp-lead, .st-lead, #example .head .sub, .faq-lead { margin:0; max-width:none; padding-bottom:.45em; color:var(--text-2); font-size:var(--t-lead); line-height:1.5; }
/* The closing element (the comparison's closing line, the steps' button, the rows' button after their caption) sits --sp-after below the content. */
#example .workflow-action { margin-top:var(--sp-after); }
@media (max-width:860px) {
  .cmp-header, .st-split, #example .head, .faq-head, .close-head { grid-template-columns:minmax(0,1fr); }
  .cmp-lead, .st-lead, #example .head .sub, .faq-lead { padding:0; }
  .close-head .close-side { padding-top:0; }
}

/* ---------- Close: the same head as every section, the offer beside it. ---------- */
.close-side { display:grid; gap:var(--space-3); padding-top:36px; }
.close-side p { margin:0; color:var(--text-2); font-size:var(--t-lead); line-height:1.5; text-wrap:pretty; }
.close-side .btns { margin-top:var(--space-3); }
.close-side .mail { font-size:var(--t-small); }
.close-side .mail a, .close-side .quiet { display:inline-flex; align-items:center; min-height:44px; color:var(--text); text-decoration:underline; text-decoration-color:rgba(255,255,255,.3); text-underline-offset:4px; transition:text-decoration-color var(--dur-1) ease; }
.close-side .mail a:hover, .close-side .quiet:hover { text-decoration-color:#fff; }
.close-side .mail a:focus-visible, .close-side .quiet:focus-visible { outline:2px solid var(--violet-bright); outline-offset:4px; border-radius:4px; }
html.js-motion #contact [data-reveal] { opacity:0; transform:translateY(18px); transition:opacity 720ms var(--ease),transform 720ms var(--ease); }
html.js-motion #contact [data-reveal].is-in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) { html.js-motion #contact [data-reveal] { opacity:1; transform:none; transition:none; } }

/* ---------- Booking dialog: the same black, 24px radius, a hairline, 320ms rise and fade ---------- */
.booking-dialog { width:min(1080px,calc(100% - 40px)); height:min(820px,calc(100dvh - 48px)); border:1px solid var(--hair); border-radius:24px; background:#000; overflow:hidden; box-shadow:0 40px 120px -20px rgba(0,0,0,.8),0 0 120px -40px rgba(139,92,246,.4); }
.booking-dialog::backdrop { background:rgba(0,0,0,.78); }
.booking-header { padding:32px 84px 24px 32px; border-bottom:1px solid var(--hair); }
.booking-header h2 { font-size:clamp(24px,2.6vw,30px); line-height:1.1; letter-spacing:-.035em; font-weight:480; }
.booking-header p { max-width:60ch; margin-top:var(--space-3); font-size:15px; line-height:1.5; color:var(--text-2); }
.booking-close { top:24px; right:24px; width:44px; height:44px; background:transparent; border:1px solid rgba(255,255,255,.2); transition:background-color var(--dur-1) ease; }
.booking-body { padding:var(--space-4); }
.booking-footer { padding:var(--space-2) var(--space-6); border-top:1px solid var(--hair); }
.booking-footer a { color:var(--violet-bright); }
.booking-close:focus-visible, .booking-footer a:focus-visible { outline:2px solid var(--violet-bright); outline-offset:3px; }
@media (hover:hover) and (pointer:fine) { .booking-close:hover { background:rgba(255,255,255,.1); } }
@media (prefers-reduced-motion:no-preference) {
  .booking-dialog { opacity:0; transform:translateY(24px) scale(.985); transition:opacity 320ms var(--ease),transform 320ms var(--ease),overlay 320ms allow-discrete,display 320ms allow-discrete; }
  .booking-dialog[open] { opacity:1; transform:none; }
  .booking-dialog::backdrop { opacity:0; transition:opacity 320ms var(--ease),overlay 320ms allow-discrete,display 320ms allow-discrete; }
  .booking-dialog[open]::backdrop { opacity:1; }
  @starting-style {
    .booking-dialog[open] { opacity:0; transform:translateY(24px) scale(.985); }
    .booking-dialog[open]::backdrop { opacity:0; }
  }
}
@media (max-width:720px) {
  .booking-dialog { width:calc(100% - 16px); height:calc(100dvh - 16px); border-radius:20px; }
  .booking-header { padding:24px 68px 20px 20px; }
  .booking-close { top:16px; right:12px; }
  .booking-body { padding:var(--space-1); }
  .booking-footer { padding:var(--space-1) var(--space-4); }
}

/* ---------- Privacy and 404: the same header, footer and type. Every page under the header starts --sp-page-top below it and ends --sp-page-bottom above the footer. ---------- */
body.page-simple { display:flex; flex-direction:column; min-height:100svh; }
body.page-simple > main { flex:1; }
.legal-page { padding-top:calc(var(--header) + var(--sp-page-top)); padding-bottom:var(--sp-page-bottom); }
.legal-page .legal { max-width:68ch; padding:0; }
.legal-page .legal h1 { margin:0; font-size:var(--t-h2x); line-height:1.02; letter-spacing:var(--track-h2); font-weight:480; }
.legal-page .legal .updated { margin-top:var(--space-4); color:var(--text-2); font-size:var(--t-small); }
.legal-page .legal h2 { margin-top:var(--space-7); font-size:22px; line-height:1.25; letter-spacing:-.02em; font-weight:520; color:var(--text); }
.legal-page .legal p, .legal-page .legal ul { color:var(--text-2); font-size:var(--t-body); line-height:1.65; }
.legal-page .legal p { margin-top:var(--space-3); }
.legal-page .legal ul { margin:var(--space-3) 0 0; padding-left:var(--space-5); display:grid; gap:var(--space-2); }
.legal-page .legal a { color:var(--text); text-decoration:underline; text-decoration-color:rgba(17,20,24,.35); text-underline-offset:3px; }
.notfound > .wrap { width:100%; }
.notfound { display:flex; align-items:flex-start; padding-top:calc(var(--header) + var(--sp-page-top)); padding-bottom:var(--sp-page-bottom); }
.notfound h1 { max-width:14ch; }
/* defects-r7: the second sentence is body text, not a fourth line of the heading */
.notfound .notfound-note { margin:var(--space-5) 0 0; max-width:32ch; color:var(--text-2); font-size:20px; line-height:1.5; }
.notfound .btns { margin-top:var(--sp-after); }