/* Fox and Kite Studio, version 10. One stylesheet for every page. Nothing is loaded from other websites.
   Headlines use Fraunces (SIL Open Font Licence, see fonts\OFL.txt), served from this site's own fonts folder.
   Body text and small labels use fonts already on the visitor's device.
   A bright, light palette built from the logo colours: bright orange #E8692B, fox orange #C9551F, rust #95482A,
   cream (#FAF6F0 page, #F1E8DA deeper) and dark brown #2A1C18, plus white. No navy backgrounds.
   Change colours and fonts in the two theme blocks below; the rest follows. */

@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-display.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-display-italic.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
/* Georgia, resized to take up the same room as Fraunces, so the page does not jump when the headline font arrives. */
@font-face { font-family: "Fraunces Fallback"; src: local("Georgia"); font-weight: 400 900; font-style: normal; size-adjust: 88.5%; ascent-override: 97.8%; descent-override: 25.5%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Fallback"; src: local("Georgia Italic"), local("Georgia-Italic"); font-weight: 400 900; font-style: italic; size-adjust: 83.5%; ascent-override: 97.8%; descent-override: 25.5%; line-gap-override: 0%; }

/* Light theme: the default surface, a warm off-white page with dark brown text. */
:root {
  --bg: #FAF6F0;            /* warm off-white */
  --bg-2: #FFFFFF;          /* white, for alternate sections */
  --panel: #FFFFFF;         /* cards and boxes */
  --panel-2: #F1E8DA;
  --line: rgba(120, 70, 36, .2);       /* warm hairline */
  --line-2: rgba(120, 70, 36, .38);    /* stronger warm hairline */
  --text: #2A1C18;          /* dark brown */
  --mute: #5C4B44;          /* dark brown, toned down */
  --acc: #B2461A;           /* fox orange, deepened so small text passes AA on every light surface */
  --acc-line: rgba(201, 85, 31, .6);
  --acc-soft: rgba(232, 105, 43, .08);
  --pop: #C9551F;           /* fox orange, for large type */
  --spark: #E8692B;         /* bright orange, for shapes and markers */
  --fill: #E8692B;          /* buttons and labels */
  --on-fill: #2A1C18;       /* dark brown */
  --fill-h: #2A1C18;
  --on-fill-h: #FAF6F0;
  --focus: #2A1C18;
  --glow: 0 0 0 3px rgba(232, 105, 43, .13), 0 0 26px rgba(232, 105, 43, .24);   /* orange border-glow for cards on hover */
}
/* Deeper cream: add class="cream" to a section. */
.cream {
  --bg: #F1E8DA;            /* deeper cream */
  --panel: #FAF6F0;
  --panel-2: #FFFFFF;
}
:root {
  --ink: #2A1C18;           /* dark brown */
  --cream: #FAF6F0;
  --sans: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Fraunces", "Fraunces Fallback", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "Cascadia Mono", "Cascadia Code", "SF Mono", Consolas, Menlo, monospace;
  --kite: polygon(50% 0, 100% 36%, 50% 100%, 0 36%);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; scroll-padding-top: 104px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1.0625rem/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.cream { background: var(--bg); color: var(--text); }
img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
::selection { background: var(--fill); color: var(--on-fill); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
button { font: inherit; color: inherit; }

.wrap { width: 100%; max-width: 1288px; margin: 0 auto; padding: 0 24px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.js-only { display: none; }
.js .js-only { display: inline; }
.js .nojs-only { display: none; }

.skip-link {
  position: absolute; left: 16px; top: -80px; z-index: 100;
  background: var(--fill); color: var(--on-fill); font-weight: 700;
  padding: 12px 18px; border-radius: 4px; text-decoration: none;
}
.skip-link:focus { top: 12px; outline-color: var(--ink); }

/* Type */
h1, h2, h3 { font-family: var(--sans); font-weight: 700; line-height: 1.03; letter-spacing: -.028em; text-wrap: balance; }
h1, h2 { font-family: var(--serif); font-weight: 500; letter-spacing: -.03em; }
h1 { font-size: clamp(2.3rem, 11.6vw, 5.5rem); line-height: 1; }
h2 { font-size: clamp(2.1rem, 5vw, 4rem); line-height: 1.04; }
h1 .hl, h2 .hl { font-style: italic; }
h3 { font-size: 1.3rem; letter-spacing: -.02em; line-height: 1.2; }
.hl { color: var(--pop); }
.lede { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.55; color: var(--text); max-width: 40em; }
p { text-wrap: pretty; }
.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font: 500 .78rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute);
  margin-bottom: 22px;
}
.eyebrow::before { content: ""; width: 9px; height: 13px; background: var(--spark); clip-path: var(--kite); flex: none; }
.eyebrow .idx { color: var(--acc); }
.eyebrow .idx::after { content: ""; display: inline-block; width: 28px; height: 1px; background: var(--line-2); vertical-align: middle; margin-left: 12px; }
/* The studio slogan, wherever it is shown as a line of its own */
.slogan { font: 600 clamp(1.05rem, 1.7vw, 1.35rem)/1.3 var(--sans); letter-spacing: -.005em; text-transform: none; color: var(--text); margin-bottom: 26px; }
.slogan::before { width: 11px; height: 16px; }
.fine { font-size: .92rem; color: var(--mute); }
.fine a, .prose a, .hero-note a, .faq a, .contact p a { color: var(--text); text-decoration-color: var(--spark); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.fine a:hover, .prose a:hover, .hero-note a:hover, .faq a:hover, .contact p a:hover { color: var(--acc); }

/* Buttons and links */
.arr { display: inline-block; transition: transform .25s var(--ease); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .7em;
  padding: 1em 1.4em; min-height: 52px;
  background: var(--fill); color: var(--on-fill); border: 1px solid var(--fill); border-radius: 4px;
  font: 650 1rem/1.2 var(--sans); text-decoration: none; cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s, translate .3s var(--ease);
}
.btn:hover { background: var(--fill-h); border-color: var(--fill-h); color: var(--on-fill-h); }
.btn:hover .arr, .more:hover .arr, a:hover > .more .arr, a:hover > div > .more .arr, .band-mail:hover .arr { transform: translateX(5px); }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line-2); }
.btn.ghost:hover { border-color: var(--acc); color: var(--acc); background: transparent; }
.btn.small { padding: .6em 1em; min-height: 42px; font-size: .92rem; background: transparent; color: var(--acc); border-color: var(--pop); border-width: 1.5px; }
.btn.small:hover { background: var(--fill); color: var(--on-fill); border-color: var(--fill); }
.more {
  display: inline-flex; align-items: center; gap: .6em;
  font: 600 .98rem/1.3 var(--sans); color: var(--acc); text-decoration: none;
  border-bottom: 1px solid var(--acc-line); padding-bottom: 3px;
}
a.more:hover { border-bottom-color: var(--acc); }

/* Header: Dan's logo beside the wordmark */
.site-header {
  position: relative; z-index: 50;
  background: rgba(250, 246, 240, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.js .site-header { position: sticky; top: 0; }
@media (min-width: 821px) { .site-header { position: sticky; top: 0; } }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 0 24px; min-height: 80px; flex-wrap: wrap; }
.brand-link { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: var(--text); padding: 8px 0; }
.brand-link .logo { width: 40px; height: 70px; flex: none; }
.wordmark { font: 700 1.3rem/1 var(--sans); letter-spacing: -.035em; color: var(--text); white-space: nowrap; }
.wordmark span { font-weight: 400; color: var(--mute); }
.wordmark small { font: 500 .66rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--acc); margin-left: 6px; vertical-align: .22em; }
.nav ul { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.nav a:not(.btn) { display: block; padding: 10px 14px; color: var(--text); text-decoration: none; font: 500 .98rem/1.2 var(--sans); border-radius: 4px; transition: color .2s; }
.nav a:not(.btn):hover { color: var(--acc); }
/* Where am I: the current page is bold with an orange underline, and a pill on phones (see the 820px block) */
.nav a[aria-current="page"] { color: var(--text); font-weight: 700; text-decoration: underline; text-decoration-color: var(--spark); text-decoration-thickness: 3px; text-underline-offset: 9px; }
.nav a[aria-current="page"]::before { content: ""; display: inline-block; width: 7px; height: 10px; background: var(--spark); clip-path: var(--kite); margin-right: 8px; }
.nav-cta { margin-left: 10px; }
.nav-toggle { display: none; }

@media (max-width: 820px) {
  .js .nav-toggle {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px;
    background: transparent; border: 1px solid var(--line-2); border-radius: 4px; cursor: pointer;
    font: 600 .92rem/1 var(--sans);
  }
  .bars, .bars::before { display: block; width: 18px; height: 2px; background: var(--spark); transition: transform .25s var(--ease); }
  .bars { position: relative; transform: translateY(-3px); }
  .bars::before { content: ""; position: absolute; top: 6px; left: 0; }
  .nav-toggle[aria-expanded="true"] .bars { transform: translateY(0) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .bars::before { transform: translateY(-6px) rotate(-90deg); }
  .nav { width: 100%; padding-bottom: 14px; }
  .js .nav { display: none; }
  .js .nav.open { display: block; }
  .nav ul { display: block; border-top: 1px solid var(--line); }
  .nav a:not(.btn) { padding: 16px 2px; font-size: 1.5rem; font-weight: 650; letter-spacing: -.03em; color: var(--text); border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav a[aria-current="page"] { text-decoration: none; background: var(--acc-soft); border-radius: 10px; border-bottom-color: transparent; padding-inline: 14px; box-shadow: inset 4px 0 0 var(--spark); }
  .nav-cta { margin: 18px 0 6px; }
  .nav-cta .btn { width: 100%; min-height: 52px; background: var(--fill); color: var(--on-fill); border-color: var(--fill); font-size: 1rem; }
}
@media (max-width: 400px) {
  .brand-link { gap: 10px; }
  .brand-link .logo { width: 32px; height: 56px; }
  .wordmark { font-size: 1.16rem; }
  .site-header .wrap { gap: 0 10px; }
  .js .nav-toggle { padding: 0 10px; gap: 8px; }
}

/* Hero */
.hero { position: relative; padding: 56px 0 72px; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(42, 28, 24, .16) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 78% 40%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 70% at 78% 40%, #000, transparent 75%);
}
.hero .wrap { position: relative; display: grid; gap: 32px; align-items: center; }
.hero h1 { font-size: clamp(2.2rem, 11.2vw, 7.6rem); line-height: .98; }
.hero h1 > span { display: block; }
.hero .lede { margin-top: 28px; color: var(--mute); max-width: 34em; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-note { margin-top: 22px; font-size: .95rem; color: var(--mute); }
/* Hero artwork: the paper fox flying its kite, in the brand oranges, on a deeper cream disc. */
.hero-art { max-width: 460px; margin: 0 auto; width: 100%; }
.art { display: block; width: 100%; height: auto; overflow: visible; }
@media (max-width: 560px) {
  .actions .btn { flex: 1 1 100%; }
}
/* Wide screens: the headline runs the full width, with the words on the left and the fox and kite on the right below it. */
@media (min-width: 900px) {
  .hero { padding: 60px 0 88px; }
  .hero .wrap { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); grid-template-rows: auto auto auto auto auto 1fr; gap: 0 40px; align-items: start; }
  .hero-copy { display: contents; }
  .hero .eyebrow, .hero h1 { grid-column: 1 / -1; }
  .hero h1 { position: relative; z-index: 1; }
  .hero .lede, .hero .actions, .hero-note { grid-column: 1; }
  .hero .lede { margin-top: 44px; }
  .hero-art { grid-column: 2; grid-row: 3 / 7; max-width: 540px; margin: 28px 0 -36px auto; }
}
@media (min-width: 1200px) {
  .hero-art { margin-top: -26px; max-width: 500px; }
}

/* Sections */
.section { padding: clamp(72px, 10vw, 136px) 0; border-bottom: 1px solid var(--line); }
.section.alt { background: var(--bg-2); }
.head { max-width: 60rem; margin-bottom: clamp(40px, 6vw, 72px); }
.head .lede { margin-top: 24px; color: var(--mute); }

/* What you gain */
.gains { display: grid; gap: 0; }
.gain { padding: 30px 0 34px; border-top: 1px solid var(--line-2); }
.gain .k { display: block; font: italic 500 clamp(2.6rem, 4.8vw, 4rem)/1 var(--serif); letter-spacing: -.03em; color: var(--pop); }
.gain h3 { margin: 20px 0 12px; }
.gain p { color: var(--mute); }
@media (min-width: 860px) {
  .gains { grid-template-columns: repeat(3, 1fr); gap: 40px; }
}

/* Services on the home page: three cards of different sizes, one large and two small. */
.bento { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.cell {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; overflow: hidden;
  padding: clamp(22px, 3vw, 36px); background: var(--panel); border: 1px solid var(--line-2); border-radius: 14px;
  text-decoration: none; color: var(--text); transition: border-color .3s, box-shadow .3s, translate .4s var(--ease);
}
.cell .n { font: 500 .85rem/1 var(--mono); color: var(--acc); letter-spacing: .1em; margin-bottom: 6px; }
.cell h3 { font: 500 clamp(1.8rem, 2.6vw, 2.3rem)/1.05 var(--serif); letter-spacing: -.03em; padding-right: 58px; transition: color .25s; }
.cell p { color: var(--mute); max-width: 32em; }
.cell ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.cell li { font: 500 .72rem/1.35 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); border: 1px solid var(--line-2); border-radius: 3px; padding: 7px 9px; max-width: 100%; white-space: normal; }
.go {
  position: absolute; top: clamp(18px, 2.6vw, 30px); right: clamp(18px, 2.6vw, 30px); display: grid; place-items: center; width: 46px; height: 46px;
  border: 1px solid var(--line-2); border-radius: 4px; font-size: 1.2rem; color: var(--acc);
  transition: background-color .25s, color .25s, border-color .25s;
}
.cell:hover { border-color: var(--spark); box-shadow: var(--glow); }
.cell:hover h3 { color: var(--acc); }
.cell:hover .go { background: var(--fill); border-color: var(--fill); color: var(--on-fill); }
.cell:hover .go .arr { transform: rotate(-45deg); }
.cell.big { background: radial-gradient(ellipse 70% 60% at 100% 100%, rgba(232, 105, 43, .16), transparent 65%), var(--panel); }
.cell.big h3 { font-size: clamp(2.1rem, 5.2vw, 4rem); line-height: 1; }
/* Each card ends in a small drawing in the same paper style as the fox: a laptop and phone for websites, a job list
   for software, a reminder and a ticked calendar for automation. They sit at the bottom of the card and lift a
   little on hover. */
.ill { display: block; width: 100%; height: auto; overflow: visible; }
.ill text { font-family: var(--sans); }
.ill .serif { font-family: var(--serif); }
.ill-web { align-self: center; max-width: 620px; margin-top: auto; padding-top: 18px; }
.cell .from-line { font: 500 1.05rem/1.2 var(--sans); color: var(--mute); }
.cell .from-line b { font: 500 1.7rem/1 var(--serif); letter-spacing: -.02em; color: var(--acc); margin-left: 4px; }
.cell .ticks { margin-top: 2px; }
.cell.big .ticks { margin-bottom: clamp(24px, 3vw, 36px); }
.cell .ticks li { padding: 0 0 0 28px; margin-top: 10px; border: 0; border-radius: 0; font: 600 1rem/1.35 var(--sans); letter-spacing: 0; text-transform: none; color: var(--text); }
.cell.big { padding-bottom: 0; }
.ill-sm { max-width: 360px; margin-top: auto; padding-top: 10px; }
@media (min-width: 700px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cell.big { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: 32px; align-content: start; }
  .cell.big > :not(.ill) { grid-column: 1; }
  .cell.big .ill-web { grid-column: 2; grid-row: 1 / span 6; align-self: end; padding-top: 24px; }
}
@media (min-width: 1000px) {
  .bento { gap: 16px; }
  .cell.big { grid-template-columns: minmax(0, .95fr) minmax(0, 1.1fr); column-gap: 48px; }
  .cell.big .ill-web { margin-right: -12px; }
  .ill-sm { max-width: 380px; }
}

/* Tick lists with kite markers */
.ticks li { position: relative; padding: 0 0 0 28px; margin-top: 14px; color: var(--mute); }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .42em; width: 10px; height: 14px; background: var(--spark); clip-path: var(--kite); }

.dots { display: inline-flex; gap: 6px; flex: none; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: #CDBFAB; }
/* Device frames */
.browser { background: #F1E8DA; border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; }
.chrome { display: flex; align-items: center; gap: 14px; padding: 11px 14px; }
.url { flex: 1; min-width: 0; max-width: 460px; margin: 0 auto; padding: 6px 14px; border-radius: 6px; background: #FFFFFF; font: 500 .7rem/1.2 var(--mono); letter-spacing: .04em; color: var(--mute); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chrome::after { content: ""; width: 42px; flex: none; }
.browser img { width: 100%; }
@media (max-width: 520px) {
  .chrome { gap: 10px; padding: 10px 12px; }
  .chrome::after { display: none; }
  .url .w { display: none; }
}
.window { border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; }
.window img { width: 100%; }
.phone { position: relative; background: #2A1C18; border: 1px solid #5C4B44; border-radius: 13% / 6.2%; }
.phone img { width: 93.6%; margin: 3.2% auto; border-radius: 10.5% / 4.9%; }

/* Home: the work carousel. Without JavaScript the projects simply stack. With it, one project shows at a time on a
   wide stage whose backdrop takes on the project's colour. It moves on by itself every 6.5 seconds (a thin bar fills
   on the current name), slides and fades with a little depth, and the paper kite glides to the new name as one
   piece. It pauses on hover, on focus, after any click or swipe (until 10 seconds pass with nothing happening), when
   the tab is hidden, or with the pause button. With reduced motion it never moves by itself. */
.kind { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font: 500 .72rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.kind b { font-weight: 600; color: var(--on-fill); background: var(--fill); border-radius: 3px; padding: 5px 8px; }
.carousel { position: relative; }
.car-bar, .car-prev, .car-next, .car-pause { display: none; }
.car-track { display: grid; gap: 56px; list-style: none; margin: 0; padding: 0; }
.slide { display: grid; gap: 28px; min-width: 0; }
.slide-view { min-width: 0; }
.slide-view .browser { border-radius: 14px; background: #F1E8DA; box-shadow: 0 1px 2px rgba(42, 28, 24, .08), 0 12px 24px -8px rgba(42, 28, 24, .16), 0 40px 80px -24px rgba(42, 28, 24, .28); }
.screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #fff; }
.screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.screen iframe { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; border: 0; transform-origin: 0 0; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease); }
.screen.live iframe { opacity: 1; }
.screen:has(iframe) picture, .screen:has(iframe) > img { visibility: hidden; }
@media (max-width: 640px) { .screen { aspect-ratio: 9 / 16; } }
.slide-text { display: grid; gap: 12px; align-content: center; }
.slide-text h3 { font: 500 clamp(2rem, 3.4vw, 3rem)/1.02 var(--serif); letter-spacing: -.035em; }
.slide-text p { color: var(--mute); max-width: 26em; }
.slide-links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 12px; }
.slide-links .sub { font: 600 .95rem/1.3 var(--sans); color: var(--text); text-decoration-color: var(--line-2); text-underline-offset: 4px; }
.slide-links .sub:hover { color: var(--acc); text-decoration-color: var(--acc); }
.showcase-all { margin-top: 40px; }
@media (min-width: 960px) { .slide { grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: 56px; align-items: center; } }

/* With JavaScript: the stage */
.js .carousel { --tint: #E8692B; margin-inline: calc(-1 * min(24px, clamp(0px, 3vw, 40px))); padding: clamp(18px, 3vw, 40px); border-radius: 22px;
  background: radial-gradient(ellipse 80% 90% at 20% 0%, color-mix(in srgb, var(--tint) 30%, transparent), transparent 70%), color-mix(in srgb, var(--tint) 9%, #F6EEE3);
  transition: background .7s var(--ease); }
.js .car-bar { display: flex; align-items: flex-end; gap: 16px; margin-bottom: clamp(20px, 3vw, 34px); }
.car-tabs { position: relative; display: flex; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; padding-top: 44px; }
.car-tabs::-webkit-scrollbar { display: none; }
.tab-kite { position: absolute; left: 0; top: 0; width: 100%; height: 48px; overflow: visible; pointer-events: none; }
.tab-kite .sail { fill: var(--spark); }
.tab-kite .spar { fill: none; stroke: #95482A; stroke-width: 1; opacity: .6; }
.tab-kite .tail { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-linecap: round; }
.car-tab { position: relative; flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 56px; padding: 10px 16px 14px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; text-align: left; color: var(--mute); transition: color .25s, background-color .25s; }
.car-tab .t-name { font: 600 1rem/1.1 var(--sans); white-space: nowrap; }
.car-tab .t-trade { font: 500 .7rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.car-tab .t-bar { position: absolute; left: 16px; right: 16px; bottom: 6px; height: 2px; background: rgba(42, 28, 24, .12); border-radius: 2px; overflow: hidden; }
.car-tab .t-bar::after { content: ""; position: absolute; inset: 0; background: var(--acc); transform: scaleX(0); transform-origin: 0 50%; }
.car-tab:hover { color: var(--text); }
.car-tab[aria-selected="true"] { color: var(--text); background: rgba(255, 255, 255, .6); }
.car-tab[aria-selected="true"] .t-bar::after { transform: scaleX(1); }
.carousel.auto .car-tab[aria-selected="true"] .t-bar::after { animation: fill var(--dwell, 6.5s) linear both; }
.carousel.auto.held .car-tab[aria-selected="true"] .t-bar::after { animation-play-state: paused; }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.js .car-pause { display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 44px; padding: 0 14px; margin-bottom: 6px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--panel); color: var(--text); font: 600 .82rem/1 var(--sans); cursor: pointer; }
.i-pause { width: 10px; height: 12px; border-inline: 3px solid currentColor; }
.car-pause[aria-pressed="true"] .i-pause { border: 0; width: 0; height: 0; border-left: 10px solid currentColor; border-block: 6px solid transparent; }
.car-window { position: relative; }
.js .car-window { overflow: hidden; }
.js .car-track { display: grid; grid-template-areas: "stack"; gap: 0; }
.js .slide { grid-area: stack; transition: opacity .7s var(--ease), transform .7s var(--ease), visibility 0s .7s; opacity: 0; visibility: hidden; transform: translateX(6%) scale(.96); pointer-events: none; }
.js .slide.is-prev { transform: translateX(-6%) scale(.96); }
.js .slide.is-on { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity .7s var(--ease), transform .7s var(--ease), visibility 0s; z-index: 1; }
.js .slide .slide-view { transition: transform .7s var(--ease); }
.js .slide:not(.is-on) .slide-view { transform: translateY(14px) scale(.98); }
.js .slide .slide-text > * { transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .slide:not(.is-on) .slide-text > * { opacity: 0; transform: translateY(12px); }
.js .slide.is-on .slide-text > :nth-child(2) { transition-delay: .08s; }
.js .slide.is-on .slide-text > :nth-child(3) { transition-delay: .14s; }
.js .slide.is-on .slide-text > :nth-child(4) { transition-delay: .2s; }
.js .slide.is-next { visibility: visible; transition: opacity .7s var(--ease), transform .7s var(--ease), visibility 0s; }
@media (max-width: 959px) { .js .car-window { margin-inline: -4px; padding: 4px; } }
@media (max-width: 959px) {
  .js .slide, .js .slide.is-prev { transform: none; }
  .js .slide:not(.is-on) .slide-view, .js .slide:not(.is-on) .slide-text > * { transform: none; }
  .js .slide:not(.is-on), .js .slide.is-next, .js .slide.is-prev {
    visibility: hidden;
    opacity: 0;
    transition: none;
  }
  .js .slide.is-on {
    visibility: visible;
    opacity: 1;
    transition: none;
  }
  .js .slide .slide-text > *,
  .js .slide.is-on .slide-text > *,
  .js .slide.is-on .slide-text > :nth-child(n) {
    transition: none;
    transition-delay: 0s;
  }
  .js .slide.is-on .slide-text > * {
    opacity: 1;
    transform: none;
  }
  .screen iframe { transition: none; }
}
/* The arrows sit beside the pause button above the stage, so they never cover a preview at any width */
.js .car-ctrl { display: flex; align-items: center; gap: 8px; flex: none; margin-bottom: 6px; }
.js .car-ctrl .car-pause { margin-bottom: 0; }
.js .car-prev, .js .car-next {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--panel); color: var(--text); font-size: 1.1rem;
  transition: background-color .2s, color .2s, border-color .2s;
}
@media (max-width: 959px) {
  .js .car-bar { gap: 12px; }
  .car-tabs {
    -webkit-mask-image: none;
    mask-image: none;
    overflow: hidden;
  }
  .car-tab:not([aria-selected="true"]) { display: none; }
  .car-tab[aria-selected="true"] { max-width: 100%; padding: 10px 14px 16px; }
  .car-tab .t-name, .car-tab .t-trade { white-space: normal; }
  .car-pause-l { display: none; }
  .js .car-pause { width: 44px; padding: 0; justify-content: center; }
  .js .car-ctrl { gap: 6px; }
}
.car-prev:hover, .car-next:hover { background: var(--fill); border-color: var(--fill); color: var(--on-fill); }

/* Steps */
.steps { counter-reset: step; display: grid; }
.steps li { counter-increment: step; position: relative; padding: 0 0 40px 44px; border-left: 1px solid var(--line-2); margin-left: 8px; }
.steps li:last-child { padding-bottom: 0; border-left-color: transparent; }
.steps li::before { content: ""; position: absolute; left: -8px; top: 0; width: 15px; height: 21px; background: var(--spark); clip-path: var(--kite); }
.steps li::after { content: counter(step, decimal-leading-zero); position: absolute; left: 44px; top: 0; font: 500 .8rem/1.6 var(--mono); letter-spacing: .1em; color: var(--acc); }
.steps h3 { padding-top: 34px; margin-bottom: 10px; font: 500 1.7rem/1.12 var(--serif); letter-spacing: -.03em; }
.steps p { color: var(--mute); }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-2); }
  .steps li, .steps li:last-child { padding: 40px 32px 0 0; border-left: 0; margin: 0; }
  .steps li::before { left: 0; top: -11px; }
  .steps li::after { left: 0; top: 34px; }
  .steps h3 { padding-top: 40px; }
}

/* Promise */
.promise h2 { font-size: clamp(2.5rem, 10.5vw, 8.4rem); line-height: .98; }
.promise h2 span { display: block; }
.ol { color: var(--pop); font-style: italic; }
.promise-body { display: grid; gap: 28px; margin-top: clamp(40px, 6vw, 72px); padding-top: 32px; border-top: 1px solid var(--line-2); }
.promise-body div p { color: var(--mute); margin-bottom: 24px; }
@media (min-width: 860px) { .promise-body { grid-template-columns: 1fr 1fr; gap: 64px; } }

/* Call to action band: bright orange with dark brown type */
.band { --focus: #2A1C18; background: #E8692B; color: var(--ink); padding: clamp(64px, 9vw, 120px) 0; }
.band .wrap { display: grid; gap: 36px; }
.band h2 { font-size: clamp(2.3rem, 6.4vw, 5rem); max-width: 14em; }
.band p { margin-top: 18px; font-size: 1.15rem; max-width: 34em; color: var(--ink); }
.band-mail {
  justify-self: start; display: inline-flex; align-items: baseline; gap: .5em; flex-wrap: wrap;
  font: 500 clamp(1.6rem, 5.2vw, 3.8rem)/1.1 var(--serif); letter-spacing: -.03em; color: var(--ink);
  text-decoration: none; border-bottom: 3px solid var(--ink); padding-bottom: 6px;
}
.band .deco-kite path { fill: var(--ink); }
.band .deco-kite .string { fill: none; stroke: var(--ink); }
.band .deco-kite .f1 { fill-opacity: .28; }
.band .deco-kite .f2 { fill-opacity: .6; }
.band .deco-kite .f4 { fill-opacity: .8; }
@media (min-width: 900px) {
  .band .wrap { grid-template-columns: minmax(0, 1fr) 210px; }
  .band .deco-kite { display: block; width: 210px; grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: -30px 0 -50px; }
}
.band-mail:hover { border-bottom-color: transparent; background: var(--ink); color: var(--cream); box-shadow: 0 0 0 10px var(--ink); border-radius: 2px; }
.band a:focus-visible { outline-offset: 6px; }
.band ::selection { background: var(--ink); color: var(--cream); }

/* Footer */
.site-footer { --bg: #F1E8DA; padding: 72px 0 32px; overflow: hidden; background: var(--bg); border-top: 1px solid var(--line); }
.site-footer .top { display: grid; gap: 40px; }
.site-footer .brand-link .logo { width: 48px; height: 84px; }
.site-footer .wordmark { font-size: 1.5rem; }
.foot-slogan { margin-top: 22px; font: 500 clamp(1.7rem, 2.9vw, 2.4rem)/1.08 var(--serif); letter-spacing: -.03em; color: var(--text); }
.foot-slogan span { display: block; }
.foot-slogan span + span { color: var(--pop); font-style: italic; }
.site-footer .tagline { margin-top: 14px; color: var(--mute); max-width: 26em; }
.site-footer h2 { font: 500 .74rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-bottom: 14px; }
.site-footer li a { display: inline-block; padding: 7px 0; color: var(--text); text-decoration: none; font-weight: 500; }
.site-footer li a:hover { color: var(--acc); }
.legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); font-size: .88rem; color: var(--mute); }
@media (min-width: 760px) { .site-footer .top { grid-template-columns: 2fr 1fr 1.2fr; } }

/* Inner page heads */
.page-head { position: relative; padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 6vw, 80px); background: linear-gradient(180deg, #F3EADC, #EDE2D1); border-bottom: 4px solid var(--spark); overflow: hidden; }
.page-head .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .7); border: 1px solid var(--acc-line); }
.page-head::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(42, 28, 24, .16) 1px, transparent 1.4px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 45% 90% at 88% 30%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 45% 90% at 88% 30%, #000, transparent 75%);
}
.page-head .wrap { position: relative; display: grid; gap: 32px; align-items: start; }
.page-head h1 { font-size: clamp(2.6rem, 8.4vw, 6.6rem); max-width: 11em; }
.page-head .lede { margin-top: 28px; color: var(--mute); }
.page-head .bio { margin-top: 32px; max-width: 36em; }
.page-head .bio .lede { margin-top: 0; color: var(--text); font-size: clamp(1.2rem, 1.7vw, 1.42rem); line-height: 1.5; }
.page-head .bio p + p { margin-top: 18px; font-size: clamp(1.05rem, 1.2vw, 1.14rem); line-height: 1.7; color: var(--mute); }
@media (min-width: 960px) {
  .page-head .bio { max-width: 62em; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 4vw, 56px); row-gap: 22px; }
  .page-head .bio .lede { grid-column: 1 / -1; max-width: 32em; }
  .page-head .bio p + p { margin-top: 0; padding-top: 18px; border-top: 1px solid rgba(91, 70, 56, .18); }
}
.deco-kite { display: none; width: 230px; overflow: visible; }
@media (min-width: 980px) {
  .page-head .wrap { grid-template-columns: minmax(0, 1fr) 230px; min-height: 300px; }
  .page-head .deco-kite { display: block; margin: -30px 20px -200px 0; }
}
.notice { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 36px; padding: 18px 20px; max-width: 46rem; background: var(--acc-soft); border: 1px solid var(--acc-line); border-radius: 8px; }
.notice p { flex: 1 1 280px; color: var(--text); font-size: 1rem; }
.notice strong { color: var(--acc); font-weight: 650; }
.tag { display: inline-block; font: 600 .7rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; padding: 7px 9px; border-radius: 3px; background: var(--fill); color: var(--on-fill); border: 1px solid var(--fill); }
.tag.plain { background: transparent; color: var(--text); border-color: var(--line-2); }
@media (max-width: 350px) { .tag { white-space: normal; line-height: 1.4; } }

/* Work page */
.project { padding: clamp(64px, 9vw, 120px) 0; border-bottom: 1px solid var(--line); }
.project-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-bottom: clamp(36px, 5vw, 60px); }
.pn { display: block; font: 500 .85rem/1 var(--mono); letter-spacing: .1em; color: var(--acc); margin-bottom: 22px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.project h2 { font-size: clamp(2.3rem, 5.6vw, 4.6rem); }
.project-head p { color: var(--mute); }
.project-head p + p { margin-top: 14px; }
@media (min-width: 900px) { .project-head { grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; } }
.stage { padding: clamp(16px, 4.5vw, 56px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.stage figure { min-width: 0; }
.stage figcaption { margin-top: 16px; font-size: .92rem; color: var(--text); padding-left: 22px; position: relative; max-width: 46em; }
.stage figcaption::before { content: ""; position: absolute; left: 2px; top: .4em; width: 9px; height: 13px; background: var(--spark); clip-path: var(--kite); }
.phone-fig .phone { max-width: 230px; margin: 0 auto; }
@media (min-width: 760px) {
  .stage.with-phone { grid-template-columns: minmax(0, 1fr) 21%; align-items: end; gap: 40px; }
  .phone-fig .phone { max-width: none; }
}
.facts { display: grid; gap: 0; margin-top: 36px; }
.facts div { padding: 20px 0; border-top: 1px solid var(--line-2); }
.facts dt { font: 500 .74rem/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--acc); margin-bottom: 10px; }
.facts dd { color: var(--mute); }
@media (min-width: 760px) { .facts { grid-template-columns: repeat(3, 1fr); gap: 40px; } }

/* Work page: the booking app stage and the closing line about other work */
.booked-stage figure { display: grid; }
.booked-stage .booked-ph { width: 100%; max-width: 760px; margin: 0 auto; height: auto; }
.also { padding: 40px 0; border-bottom: 1px solid var(--line); }
.also p { color: var(--mute); max-width: 46em; }
.also a { color: var(--text); text-decoration-color: var(--spark); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.page-head .jump { margin-top: 28px; }
.page-head .jump li { display: contents; }

/* Services page */
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; }
.jump a { font: 500 .76rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--text); border: 1px solid var(--line-2); border-radius: 3px; padding: 12px 12px; min-height: 44px; display: inline-flex; align-items: center; transition: border-color .2s, color .2s; }
.jump a:hover { border-color: var(--acc); color: var(--acc); }
.svc-band { border-bottom: 1px solid var(--line); }
.svc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; padding-top: clamp(64px, 9vw, 112px); padding-bottom: clamp(64px, 9vw, 112px); }
.svc .n { display: block; font: 500 clamp(3.6rem, 7.4vw, 6.4rem)/.9 var(--serif); letter-spacing: 0; color: var(--pop); margin-bottom: 24px; }
@supports ((-webkit-text-stroke: 1px #000) or (text-stroke: 1px #000)) {
  .svc .n { color: transparent; -webkit-text-stroke: 1.5px var(--pop); text-stroke: 1.5px var(--pop); }
}
.svc h2 { font-size: clamp(2.1rem, 4vw, 3.3rem); }
.svc .intro { margin-top: 20px; font-size: 1.15rem; line-height: 1.55; color: var(--mute); }
.svc-body { display: grid; gap: 36px; align-content: start; }
.svc-from { margin-top: 26px; font: 500 clamp(2.2rem, 3.6vw, 3rem)/1 var(--serif); letter-spacing: -.03em; color: var(--acc); }
.svc-from span { font: 600 1rem/1 var(--sans); letter-spacing: 0; color: var(--mute); margin-right: 6px; vertical-align: .5em; }
.svc-good { margin-top: 14px; font-size: 1.08rem; color: var(--text); }
.svc-good b { display: block; font: 500 .76rem/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--acc); margin-bottom: 6px; }
.svc-ill { margin-top: 32px; max-width: 520px; }
.svc-ill .ill-sm { max-width: 400px; padding-top: 0; }
.svc-ill .ill-web { padding-top: 0; margin: 0; max-width: none; }
.svc-body h3 { font: 500 .76rem/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--acc); padding-bottom: 14px; border-bottom: 1px solid var(--line-2); }
.box { padding: 24px 26px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--spark); border-radius: 0 8px 8px 0; }
.box h3 { border: 0; padding: 0; margin-bottom: 10px; }
.box p { color: var(--text); }
.box ul { margin: 0; }
.box li { color: var(--text); position: relative; padding: 0 0 0 1.15em; margin-top: 10px; }
.box li:first-child { margin-top: 0; }
.box li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 6px; height: 6px; border-radius: 50%; background: var(--spark); }
.box ul + p { margin-top: 14px; }
@media (min-width: 700px) {
  .svc-body { grid-template-columns: 1fr 1fr; gap: 36px 40px; }
  .svc-body > .box, .svc-body > p { grid-column: 1 / -1; }
}
@media (min-width: 1040px) {
  .svc { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; }
  .svc > div:first-child { position: sticky; top: 120px; align-self: start; }
}
.statement { display: grid; gap: 32px; }
.statement > div > p { color: var(--mute); margin-bottom: 20px; }
.statement > div > p.lede { color: var(--text); }
.statement > div > p.eyebrow { margin-bottom: 22px; }
.statement .btn { margin-top: 8px; }
@media (min-width: 900px) { .statement { grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; } }
.faq { border-bottom: 1px solid var(--line-2); max-width: 60rem; }
@media (min-width: 1040px) {
  #questions .wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; }
  #questions .head { margin: 0; position: sticky; top: 120px; }
}
.faq details { border-top: 1px solid var(--line-2); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 26px 0; cursor: pointer; list-style: none; font: 650 clamp(1.15rem, 2vw, 1.45rem)/1.25 var(--sans); letter-spacing: -.025em; transition: color .2s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--acc); }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line-2); border-radius: 4px; font: 400 1.4rem/1 var(--mono); color: var(--acc); transition: transform .3s var(--ease), background-color .2s, color .2s; }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--fill); color: var(--on-fill); border-color: var(--fill); }
.faq details p { padding: 0 60px 28px 0; color: var(--mute); max-width: 46em; }

/* About page */
.principles { counter-reset: p; display: grid; border-top: 1px solid var(--line-2); }
.principles li { counter-increment: p; padding: 30px 0 34px; border-bottom: 1px solid var(--line-2); }
.principles li::before { content: counter(p, decimal-leading-zero); display: block; font: 500 .8rem/1 var(--mono); letter-spacing: .1em; color: var(--acc); margin-bottom: 20px; }
.principles h3 { font: 500 1.8rem/1.1 var(--serif); letter-spacing: -.03em; margin-bottom: 10px; }
.principles p { color: var(--mute); }
@media (min-width: 700px) and (max-width: 1039px) {
  .principles { grid-template-columns: 1fr 1fr; }
  .principles li { padding: 34px 36px 40px 0; }
  .principles li:nth-child(even) { padding-left: 36px; border-left: 1px solid var(--line-2); }
}
@media (min-width: 1040px) {
  .principles { grid-template-columns: repeat(3, 1fr); }
  .principles li { padding: 34px 36px 40px; border-left: 1px solid var(--line-2); }
  .principles li:nth-child(3n+1) { padding-left: 0; border-left: 0; }
}
.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 24px; }
.specs li { border-top: 1px solid var(--line-2); padding-top: 22px; }
.specs b { display: block; font: 500 clamp(4.4rem, 10vw, 8.4rem)/.85 var(--serif); letter-spacing: -.03em; color: var(--pop); margin-bottom: 16px; }
.specs span { color: var(--mute); display: block; max-width: 14em; }
@media (min-width: 860px) { .specs { grid-template-columns: repeat(4, 1fr); gap: 40px; } }

/* Contact page */
.contact { display: grid; gap: 48px; }
.contact h2 { font-size: clamp(1.8rem, 3.3vw, 2.5rem); margin-bottom: 12px; }
.contact > div > p { color: var(--mute); }
.mail-card { padding: clamp(24px, 4vw, 44px); border: 1px solid var(--acc-line); border-radius: 12px; background: radial-gradient(ellipse 80% 90% at 100% 0%, rgba(232, 105, 43, .16), transparent 60%), var(--panel); }
.mail-card .label { font: 500 .76rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin-bottom: 18px; }
.mail-card .mail { display: inline-block; font: 500 clamp(1.5rem, 6.9vw, 2.8rem)/1.15 var(--serif); letter-spacing: -.03em; color: var(--acc); text-decoration: none; border-bottom: 2px solid var(--acc-line); overflow-wrap: anywhere; }
.mail-card .mail:hover { border-bottom-color: var(--acc); color: var(--text); }
.mail-card p { margin: 22px 0 26px; color: var(--mute); }
@media (min-width: 900px) { .contact { grid-template-columns: 1.1fr .9fr; gap: 72px; align-items: start; } .mail-card .mail { font-size: clamp(1.9rem, 3.1vw, 2.8rem); } }
.cards { display: grid; gap: 16px; }
.card { display: flex; flex-direction: column; gap: 12px; padding: 28px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--text); transition: border-color .3s, box-shadow .3s, translate .4s var(--ease); }
.card:hover { border-color: var(--spark); box-shadow: var(--glow); }
.card .n { font: 500 .74rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--acc); }
.card h3 { font: 500 1.9rem/1.1 var(--serif); letter-spacing: -.03em; margin-top: 18px; }
.card p { color: var(--mute); flex: 1; }
.card .more { align-self: flex-start; margin-top: 10px; }
@media (min-width: 860px) { .cards { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

/* Privacy and other plain text */
.prose { max-width: 44rem; }
.prose h2 { font-size: clamp(1.8rem, 3.3vw, 2.5rem); margin: 56px 0 18px; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--mute); margin-bottom: 16px; }
.prose ul { margin: 0 0 22px; }
.prose li { position: relative; padding-left: 28px; margin-top: 12px; color: var(--text); }
.prose li::before { content: ""; position: absolute; left: 2px; top: .42em; width: 10px; height: 14px; background: var(--spark); clip-path: var(--kite); }

/* 404 */
.lost { padding: clamp(64px, 10vw, 128px) 0; overflow: hidden; border-bottom: 1px solid var(--line); }
.lost .wrap { display: grid; gap: 40px; align-items: center; }
.lost h1 { font-size: clamp(2.6rem, 8vw, 5.4rem); }
.lost .lede { margin-top: 26px; color: var(--mute); }
.lost-art { position: relative; min-height: 190px; }
.lost .big { font: 500 clamp(9rem, 28vw, 21rem)/.8 var(--serif); letter-spacing: -.02em; color: #E3D5C0; }
@supports ((-webkit-text-stroke: 1px #000) or (text-stroke: 1px #000)) {
  .lost .big { color: transparent; -webkit-text-stroke: 1.5px rgba(201, 85, 31, .55); text-stroke: 1.5px rgba(201, 85, 31, .55); }
}
.lost .deco-kite { display: block; position: absolute; right: 4%; top: -40px; width: clamp(150px, 30vw, 240px); transform: rotate(14deg); }
@media (min-width: 900px) { .lost .wrap { grid-template-columns: 1.1fr .9fr; } .lost-art { min-height: 420px; display: grid; align-items: center; } }

/* A very faint film grain over the whole page. It is one small pattern, drawn once and repeated, and it never blocks a tap or click. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: .09;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .11 0 0 0 0 .09 0 0 0 1.2 -.25'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 200px 200px;
}

/* Motion. Everything below is skipped when the visitor asks for reduced motion. Only opacity and position offsets are
   animated, so nothing on the page changes size or pushes other things around. */
@media (prefers-reduced-motion: no-preference) {
  /* Sections fade and slide in as they are scrolled to */
  .js .rise { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease), border-color .3s, box-shadow .3s, translate .4s var(--ease); }
  .js .rise.in { opacity: 1; transform: none; }
  .gains .rise:nth-child(2), .bento .rise:nth-child(2), .steps .rise:nth-child(2), .cards .rise:nth-child(2) { transition-delay: .09s, .09s, 0s, 0s, 0s; }
  .gains .rise:nth-child(3), .bento .rise:nth-child(3), .steps .rise:nth-child(3), .cards .rise:nth-child(3) { transition-delay: .18s, .18s, 0s, 0s, 0s; }
  .steps .rise:nth-child(4) { transition-delay: .27s, .27s, 0s, 0s, 0s; }

  /* The headline arrives one word at a time when the page loads */
  h1 .w { display: inline-block; animation: word .85s var(--ease) both; animation-delay: calc(var(--i) * 75ms + 80ms); }
  .hero .eyebrow, .page-head .eyebrow, .lost .eyebrow { animation: fade .8s both; }
  .hero .lede, .page-head .lede, .lost .lede { animation: up .9s .42s var(--ease) both; }
  .hero .actions, .page-head .notice, .page-head .jump, .lost .actions { animation: up .9s .54s var(--ease) both; }
  .hero-note { animation: up .9s .66s var(--ease) both; }

  /* Cards lift a little under the pointer, and the main button leans towards it */
  .cell:hover, .card:hover { translate: 0 -4px; }
  .ill { transition: translate .7s var(--ease); }
  .ill .phone { transition: translate .7s var(--ease); }
  .cell:hover .ill { translate: 0 -5px; }
  .cell:hover .ill .phone { translate: 0 -6px; }
  .btn { translate: var(--px, 0) var(--py, 0); }
  .btn:hover { translate: var(--px, 0) calc(var(--py, 0px) - 2px); }

  /* Hero art, on ONE shared clock: every loop below is 11 seconds long and starts when the page loads, so nothing can
     drift. The kite (sail, bows and string in a single group) sways around the end of its string at the fox's paw and
     leans a degree or so towards the pointer. The string draws itself once, inside that group, so it stays attached.
     The fox fades in once. The little triangles float softly up and down a few pixels, each at its own point of the
     same 11s loop. The moon's glow brightens and dims very gently on the same loop. Soft sine easing only. */
  .kite { animation: sway 11s ease-in-out infinite; transform-box: view-box; }
  .art .kite { transform-origin: 240px 584px; rotate: var(--lean, 0deg); transition: rotate 1.2s var(--ease); }
  .deco-kite .kite { transform-origin: 96px 426px; }
  .fox { animation: fade 1.2s .2s both; }
  .string { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.8s .3s var(--ease) forwards; }
  /* Each bow appears as the drawing string reaches it. --at (set on each bow in the partials) is the moment the string,
     drawing top to bottom with the same 1.8s, .3s-delay, var(--ease) timing, first touches that bow. It was worked out
     from the bow's position along the string path and the inverse of the easing curve. Soft fade and scale, no overshoot. */
  .kite .bow { transform-box: fill-box; transform-origin: center; animation: bow-in .32s var(--at, .3s) var(--ease) both; }
  .art .sparks .pc { transform-box: fill-box; animation: float 11s cubic-bezier(.37, 0, .63, 1) infinite; animation-delay: calc(var(--i) * -1.83s); }
  .art .moon-glow { animation: glow 11s cubic-bezier(.37, 0, .63, 1) infinite; }
}
@keyframes float { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(-5px); opacity: .55; } }
@keyframes glow { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }
@media (prefers-reduced-motion: reduce) {
  .arr, .bars, .bars::before, .btn, .cell, .card, .ill, .ill .phone, .faq summary::after, .car-tab, .car-prev, .car-next, .screen iframe, .js .slide, .js .slide .slide-view, .js .slide .slide-text > *, .js .carousel { transition: none; }
  .cell:hover .go .arr, .btn:hover .arr, .more:hover .arr, a:hover > .more .arr, a:hover > div > .more .arr, .band-mail:hover .arr { transform: none; }
}
@keyframes sway { 0%, 100% { transform: rotate(0deg); } 35% { transform: rotate(-1.6deg); } 70% { transform: rotate(.9deg); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes bow-in { from { opacity: 0; transform: scale(.55); } }
@keyframes up { from { opacity: 0; transform: translateY(24px); } }
@keyframes word { from { opacity: 0; transform: translateY(.45em) rotate(3deg); } }
@keyframes fade { from { opacity: 0; } }

@media print {
  .site-header, .nav-toggle, .car-bar, .car-prev, .car-next, .car-pause, body::after { display: none; }
  body { background: #fff; color: #000; }
}

/* Prices (services.html, from partials/prices.html). Three columns of "from" prices, then the terms in normal size. */
.prices .head { max-width: 46rem; }
.prices .head .lede { margin-top: 18px; }
.price-grid { display: grid; gap: 22px; margin-top: 48px; }
@media (min-width: 980px) { .price-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.price-col { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 28px 26px 10px; }
.price-col h3 { font: 600 .8rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding-bottom: 16px; border-bottom: 2px solid var(--ink); }
.price-col h3 a { color: var(--text); text-decoration: none; }
.price-col h3 a:hover { color: var(--acc); }
.tier { padding: 22px 0 20px; border-bottom: 1px solid var(--line); }
.tier:last-child { border-bottom: 0; }
.tier .tier-price { margin-top: 0; font: 500 clamp(2rem, 3.2vw, 2.6rem)/1 var(--serif); letter-spacing: -.03em; color: var(--ink); }
.tier .tier-price .from { font: 600 1.05rem/1 var(--sans); letter-spacing: 0; color: var(--mute); vertical-align: .45em; margin-right: 6px; }
.tier h4 { font: 600 1.2rem/1.3 var(--sans); margin-top: 12px; }
.tier p { color: var(--mute); margin-top: 6px; font-size: .98rem; }
.tier .tier-q { font-size: .9rem; color: var(--text); opacity: .75; }
.price-notes { display: grid; gap: 28px; margin-top: 44px; padding-top: 34px; border-top: 1px solid var(--line-2); }
@media (min-width: 980px) { .price-notes { grid-template-columns: 1.25fr 1fr 1fr; gap: 44px; } }
.price-notes h3 { font: 600 .8rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--acc); margin-bottom: 12px; }
.price-notes p { color: var(--text); margin-bottom: 12px; }
.price-notes .big { font: 500 clamp(1.5rem, 2.4vw, 1.9rem)/1.2 var(--serif); letter-spacing: -.02em; }
.price-notes .btn { margin-top: 8px; }
.price-line { margin-top: 18px; color: var(--text); font-size: 1.08rem; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; }
/* Launch offer band. The wording lives in src/offer.txt only; empty that file and the band goes on the next build. */
.offer { display: flex; gap: 16px; align-items: flex-start; max-width: 46em; margin-top: 28px; padding: 18px 22px; background: rgba(255, 255, 255, .55); border: 1px solid var(--line-2); border-left: 4px solid var(--spark); border-radius: 12px; }
.prices .offer { margin: 0; }
.offer p { color: var(--text); font-size: 1.02rem; line-height: 1.55; }
.offer strong { font-weight: 700; }
.offer-kite { width: 20px; height: 28px; flex: none; margin-top: 1px; }