/* Setup AI v4: one screen of mystery, one booking form. Archival footage, swarm cursors, nothing else. */

:root {
  --bg: #332d2a;
  --line: #484240;
  --box: #2e2826;
  --illus: #2f2a28;
  --block: #40342c;
  --block-lt: #695443;
  --flat: #3c3633;
  --ink: #fff;
  --muted: rgba(255, 255, 255, 0.4);
  --soft: rgba(255, 255, 255, 0.62);
  --pill: #1f1b19;
  --cream: #f4f1ea;
  --cream-ink: #1a1614;
  --pill-hover: #120f0e;
  --cream-hover: #e7e2d7;
  /* runner-style dot screen: dark dots on the card, tight grid */
  --dots: radial-gradient(rgba(0, 0, 0, 0.42) 0.85px, transparent 1.25px) 0 0 / 4px 4px;
  /* motion: one ease and three durations for every interactive state */
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --dur: 220ms;
  --dur-fast: 140ms;
  --dur-press: 120ms;
  --rail: 360px;
  --gut: 16px;
  --serif: "Newsreader", Georgia, serif;
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --type: "Cutive Mono", "Courier New", monospace;
  /* the wordmark: IBM Plex Mono 700, the engineering-manual face */
  --mark: "IBM Plex Mono", ui-monospace, monospace;
  --grain: 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%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .8 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.5 var(--sans);
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, video { display: block; }

/* ============================================================
   Components. Markup picks a component and a meaning; this file decides how it looks.
   Icons are named by what the link does, never by the glyph:
     icon--next      another page on this site        →
     icon--external  leaves the site (other domain, mail) ↗
     icon--top       back to the top of this page      ↑
     icon--back      previous step                     ←
   ============================================================ */
.icon {
  display: inline-block; flex: none; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
  transition: transform var(--dur) var(--ease);
}
.icon--next { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E"); }
.icon--external { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 11 11 5M6 5h5v5'/%3E%3C/svg%3E"); }
.icon--top { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 13V3M4 7l4-4 4 4'/%3E%3C/svg%3E"); }
.icon--back { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 8H3M7 4 3 8l4 4'/%3E%3C/svg%3E"); }
.icon--sm { width: 11px; height: 11px; }
/* the icon leans the way the link goes */
:is(a, button):hover > .icon--next, :is(a, button):focus-visible > .icon--next { transform: translateX(3px); }
:is(a, button):hover > .icon--external, :is(a, button):focus-visible > .icon--external { transform: translate(2px, -2px); }
:is(a, button):hover > .icon--top, :is(a, button):focus-visible > .icon--top { transform: translateY(-2px); }
:is(a, button):hover > .icon--back, :is(a, button):focus-visible > .icon--back { transform: translateX(-3px); }

/* round chip that holds an icon (From/To rows) */
.icon-chip { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--pill); color: var(--ink); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.icon-chip .icon { width: 11px; height: 11px; }

/* button: one component, square corners. Variants are classes: --cream (primary), --sm (header), --block (full width), --text (quiet link-like) */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 28px;
  padding: 13px 18px; border: 0; border-radius: 0; background: var(--pill); color: var(--ink);
  font: 400 14px/18px var(--sans); letter-spacing: inherit; cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur-press) var(--ease);
}
.btn:hover { background: var(--pill-hover); }
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
.btn:disabled { opacity: 0.6; cursor: progress; transform: none; }
.btn--cream { background: var(--cream); color: var(--cream-ink); font-weight: 500; font-size: 15px; }
.btn--cream:hover { background: var(--cream-hover); }
.btn--block { display: flex; width: 100%; padding: 15px 16px; }
.btn--sm { padding: 9px 14px; gap: 14px; font-size: 14px; }
.btn--text { background: none; padding: 8px 0; gap: 8px; color: var(--muted); }
.btn--text:hover { background: none; color: var(--ink); }

/* inline link with an optional trailing icon */
.link { display: inline-flex; align-items: center; gap: 6px; color: inherit; transition: color var(--dur-fast) var(--ease); }
.link:hover, .link:focus-visible { color: var(--ink); }
.link:focus-visible { outline: 1px solid var(--cream); outline-offset: 3px; }

/* a built piece handed back from the swarm's canvas to the live page, so it takes hover and focus */

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.facts { margin-top: 36px; border-top: 1px solid var(--line); max-width: 460px; }
.facts li { display: grid; grid-template-columns: 120px 1fr; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 18px; }
.facts span { color: var(--muted); }
.book__panel { background: var(--box); padding: 24px 24px 28px; }
.book__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 28px; counter-reset: s; }
.book__steps li { counter-increment: s; border-top: 2px solid var(--line); padding-top: 10px; font-size: 13px; line-height: 16px; color: var(--muted); }
.book__steps li::before { content: counter(s) " · "; font-family: var(--mono); }
.book__steps li.on { border-color: var(--cream); color: var(--ink); }
.book__steps li.past { border-color: rgba(244, 241, 234, 0.45); }
.step { border: 0; margin: 0; padding: 0; min-width: 0; }
.field { display: grid; gap: 8px; margin-bottom: 20px; font-size: 14px; line-height: 18px; }
.field input, .field textarea {
  width: 100%; background: #26211f; border: 1px solid var(--line); color: var(--ink);
  font: 400 15px/22px var(--sans); letter-spacing: 0.01em; padding: 11px 12px; border-radius: 0; resize: vertical;
}
.field input:focus, .field textarea:focus, .chip input:focus-visible + span, .day:focus-visible, .time:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.chip span { display: inline-block; padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; cursor: pointer; }
.chip input:checked + span { background: var(--cream); color: var(--cream-ink); border-color: var(--cream); }
.err { min-height: 18px; margin: 4px 0 14px; color: #f0a58a; font-size: 13px; line-height: 18px; }
.actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.actions > :only-child { margin-left: auto; }

.note { color: var(--muted); font-size: 13px; line-height: 18px; margin-bottom: 14px; }
.days { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: 8px; margin-bottom: 22px; }
.dow { font: 500 11px/1 var(--sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted, rgba(255,255,255,.5)); padding: 0 2px 4px; }
.days .day { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; min-height: 40px; text-align: left; font-variant-numeric: tabular-nums; }
.days .day .dm { font-size: 11px; color: var(--muted, rgba(255,255,255,.5)); text-transform: uppercase; letter-spacing: 0.04em; }
.days .day[aria-selected="true"] .dm { color: inherit; opacity: .7; }
.days .day .dd { margin-left: auto; }
.days .day--off { border-color: transparent; color: rgba(255,255,255,.22); cursor: default; }
.days .day--off .dm { color: inherit; }
@media (max-width: 560px) { .days { gap: 6px; } .days .day { padding: 8px 8px; } .days .day .dm { font-size: 9.5px; } }
.day, .time { border: 1px solid var(--line); background: none; color: var(--ink); font: 400 14px/18px var(--sans); padding: 9px 12px; cursor: pointer; }
.day[aria-selected="true"], .time[aria-pressed="true"] { background: var(--cream); color: var(--cream-ink); border-color: var(--cream); }
.times { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; min-height: 40px; font-variant-numeric: tabular-nums; }
.chosen { font: 400 22px/1.2 var(--serif); margin-bottom: 22px; }
.hp { position: absolute; left: -9999px; }
.done h2 { margin: 12px 0 16px; }
.done .lede { color: var(--soft); font-size: 15px; line-height: 22px; margin-bottom: 28px; }

/* ============================================================
   v4 layout. Every page is: header, archival hero, a little about the work, the booking form, the footer.
   ============================================================ */
:root { --gut: 32px; --wrap: 1200px; --top: 68px; }
@media (max-width: 720px) { :root { --gut: 16px; --top: 60px; } }
.wrap { width: min(var(--wrap), 100% - var(--gut) * 2); margin-inline: auto; }
.eyebrow, .kicker { font: 400 12px/16px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.lede { color: var(--soft); font-size: 16px; line-height: 24px; }
::selection { background: var(--cream); color: var(--cream-ink); }

/* header: wordmark and the one action. Kept live above the swarm's canvas (z over OPT.z). */
/* a built piece handed back from the swarm's canvas to the live page, so it takes hover and focus */
.swarm-live { position: relative; z-index: 21; }

.top {
  position: fixed; inset: 0 0 auto; z-index: 30; height: var(--top);
  display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gut);
  background: linear-gradient(rgba(26, 22, 20, 0.55), rgba(26, 22, 20, 0));
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* once the page moves, the header gets a backdrop so copy never shows through the wordmark */
.top.is-scrolled { background-color: rgba(26, 22, 20, 0.9); box-shadow: 0 1px 0 var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.brand { font: 700 20px/1 var(--mark); letter-spacing: 0.02em; }

/* hero: archival reel behind one sentence. The grade is baked into the footage (the swarm copies the
   video without CSS filters), and the vignette and grain live inside .reel so the copy keeps them too.
   Nothing here sets a z-index on the text: handed-off buttons must be able to rise above the swarm canvas. */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; background: #1a1614; }
.hero--niche { min-height: 88vh; min-height: 88svh; }
.reel { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.reel video, .reel img { width: 100%; height: 100%; object-fit: cover; }
.reel::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(20, 16, 14, 0.62), rgba(20, 16, 14, 0.15) 55%, transparent 80%),
    radial-gradient(120% 90% at 50% 40%, transparent 40%, rgba(20, 16, 14, 0.75) 100%),
    linear-gradient(180deg, rgba(26, 22, 20, 0) 45%, rgba(51, 45, 42, 0.92) 92%, var(--bg));
}
/* film grain over the footage; steps() keeps it a flicker, not a slide */
.reel::after {
  content: ""; position: absolute; inset: -50%; z-index: 2; pointer-events: none; opacity: 0.55;
  background: var(--grain); animation: grain 0.9s steps(5) infinite;
}
@keyframes grain { 0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } 100% { transform: translate(1%, 3%); } }
.hero__body { position: relative; padding: calc(var(--top) + 80px) 0 72px; }
.hero h1 { font-size: clamp(44px, 7.2vw, 108px); line-height: 0.98; letter-spacing: -0.025em; max-width: 13ch; margin: 18px 0 26px; }
.hero--niche h1 { font-size: clamp(40px, 6vw, 84px); max-width: 15ch; white-space: pre-line; }
.hero .lede { max-width: 470px; color: rgba(255, 255, 255, 0.74); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 34px; }
.meta { font: 400 12px/16px var(--mono); letter-spacing: 0.06em; color: var(--muted); }
/* the reel's slate: timecode and source, bottom right */
.slate {
  position: absolute; z-index: 22; right: var(--gut); bottom: 28px; display: grid; gap: 4px; justify-items: end; text-align: right;
  font: 400 11px/14px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45);
}
.slate b { font-weight: 400; color: rgba(255, 255, 255, 0.78); font-variant-numeric: tabular-nums; }
.slate b::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: #ff5a36; vertical-align: 1px; animation: rec 1.6s steps(2) infinite; }
@keyframes rec { 50% { opacity: 0.2; } }
@media (max-width: 720px) { .slate { position: relative; right: auto; bottom: auto; justify-items: start; text-align: left; margin: 0 var(--gut) 28px; } .hero__body { padding-bottom: 36px; } }

/* sections */
.sec { padding: 140px 0; border-top: 1px solid var(--line); }
.sec:first-of-type { border-top: 0; }
.split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; }
.statement { font: 400 clamp(28px, 3.4vw, 44px)/1.12 var(--serif); letter-spacing: -0.015em; max-width: 22ch; }
.statement em { font-style: italic; color: var(--soft); }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 64px; counter-reset: t; }
.trio li { counter-increment: t; border-top: 1px solid var(--line); padding-top: 18px; }
.trio li::before { content: "0" counter(t); display: block; font: 400 12px/16px var(--mono); color: var(--muted); margin-bottom: 26px; }
.trio h3 { font-size: 26px; line-height: 1.1; margin-bottom: 10px; }
.trio p { color: var(--soft); font-size: 15px; line-height: 22px; max-width: 34ch; }
.proof { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; margin-top: 56px; color: var(--soft); font-size: 15px; }
.proof .link { color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 2px; }

/* booking section: intro beside the form */
.book { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 64px; align-items: start; }
.book__intro h2 { font-size: clamp(34px, 4vw, 52px); line-height: 1.04; letter-spacing: -0.02em; margin: 16px 0 22px; max-width: 14ch; }
.book__intro .lede { max-width: 440px; }
.book__panel { position: relative; z-index: 25; min-height: 700px; }

/* niche pages */
.answer { font: 400 clamp(22px, 2.4vw, 30px)/1.3 var(--serif); max-width: 34ch; }
.buyer { color: var(--soft); margin-top: 24px; max-width: 52ch; }
.example { margin-top: 72px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0; background: var(--box); }
.example__media { position: relative; min-height: 280px; background: #1a1614; overflow: hidden; }
.example__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.example__body { padding: 32px; }
.example__body h3 { font-size: 26px; line-height: 1.15; margin: 14px 0 14px; }
.example__body p { color: var(--soft); font-size: 15px; line-height: 23px; }
.case { display: grid; gap: 14px; margin: 0 0 20px; }
.case div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.case dt { font: 400 11px/20px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.case dd { margin: 0; color: var(--soft); font-size: 15px; line-height: 23px; }
.example__body .link { color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 2px; font-size: 14px; }
@media (max-width: 720px) { .case div { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
.bring { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; margin-top: 72px; }
.bring ul { border-top: 1px solid var(--line); }
.bring li { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 21px; }
.bring p { color: var(--soft); font-size: 15px; line-height: 23px; margin-top: 14px; }
.faq { margin-top: 0; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; justify-content: space-between; gap: 24px; padding: 18px 0; cursor: pointer; font-size: 17px; line-height: 24px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); color: var(--muted); transition: transform var(--dur) var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--soft); padding: 0 0 20px; max-width: 64ch; line-height: 23px; }

/* footer: the finale line, the giant wordmark, a quiet index of the field pages */
.foot { position: relative; overflow: hidden; padding: 88px 0 28px; border-top: 1px solid var(--line); }
/* room for the longest retyped line, so the finale never runs into the button */
.foot__title { font-size: clamp(30px, 4vw, 54px); line-height: 1.08; letter-spacing: -0.02em; max-width: 22ch; min-height: 3.3em; }
.foot .btn { margin-top: 28px; }
/* the wordmark types itself in when it scrolls into view (site.js); it stays live above the swarm canvas */
.foot__word { position: relative; z-index: 22; display: block; min-height: 0.9em; margin: 64px 0 36px; font: 700 clamp(56px, 15vw, 230px)/0.9 var(--mark); letter-spacing: 0; white-space: nowrap; color: rgba(255, 255, 255, 0.9); }
.foot__word .caret { display: inline-block; width: 0.06em; height: 0.8em; margin-left: 0.04em; background: currentColor; vertical-align: -0.02em; animation: caret 1s steps(2) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.fields { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 24px; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.fields span { font-family: var(--mono); letter-spacing: 0.06em; text-transform: uppercase; font-size: 11px; }
.fields a { font-size: 14px; color: var(--soft); transition: color var(--dur-fast) var(--ease); }
.fields a:hover { color: var(--ink); }
.foot__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 22px; font-size: 13px; color: var(--muted); }
.foot__links { display: flex; flex-wrap: wrap; gap: 8px 22px; }

@media (max-width: 960px) {
  .split, .book, .bring, .example { grid-template-columns: minmax(0, 1fr); }
  .split, .book { gap: 32px; }
  .trio { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 40px; }
  .trio li { padding: 18px 0 26px; }
  .trio li::before { margin-bottom: 12px; }
}
@media (max-width: 720px) {
  .sec { padding: 88px 0; }
  .book__panel { padding: 18px 16px 22px; min-height: 0; }
  .times { grid-template-columns: repeat(3, 1fr); }
  .example__body { padding: 22px 18px; }
  .foot { padding-top: 64px; }
  .foot__word { margin: 48px 0 28px; }
  .btn--sm .icon { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reel::after, .slate b::before { animation: none; }
  html { scroll-behavior: auto; }
}