/* Nightanvil Digital */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2-variations"), url("../fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/plex-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/plex-sans-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/plex-sans-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/plex-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
/* Logo wordmark only: Sora Medium (SIL OFL, see OFL-Sora.txt), subset to the letters of "Nightanvil Digital". */
@font-face { font-family: "Sora Wordmark"; src: url("../fonts/sora-wordmark-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --night: #0F1114;
  --night-2: #14171B;       /* alternate sections, flat */
  --line: #2A3038;
  --line-2: #434B56;
  --ash: #E6E9EE;
  --ash-2: #BEC5CF;
  --muted: #939BA6;
  --accent: #C58FE0;        /* Temper Purple */
  --accent-hover: #DAB5EC;
  --straw: #E0B866;         /* prices and figures only */

  --display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1280px;
  --gutter: clamp(20px, 5vw, 80px);
  --section: clamp(80px, 10vw, 136px);
  --grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M48 0V48M0 48H48' fill='none' stroke='%23E6E9EE' stroke-opacity='0.045'/%3E%3C/svg%3E");   /* 48px engineering grid: hero and closing band only */
  --radius: 2px;            /* DESIGN.md: square-ish corners, no boxes */
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* components set display, so hidden must win */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; color-scheme: dark; scrollbar-color: var(--line-2) var(--night); }
::selection { background: var(--accent); color: var(--night); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--night);
  color: var(--ash);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.skip { position: absolute; left: -9999px; top: 12px; z-index: 100; background: var(--accent); color: var(--night); padding: 10px 16px; border-radius: var(--radius); font-weight: 600; }
.skip:focus { left: 12px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }

/* Type */
.eyebrow { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0; }
.eyebrow--muted { color: var(--muted); }
/* Numbered sections: every section head's eyebrow gets "01 —" from a counter (DESIGN.md rule 5) */
main { counter-reset: section; }
.section-head > .eyebrow, .closer__copy > .eyebrow { counter-increment: section; }
.section-head > .eyebrow::before, .closer__copy > .eyebrow::before { content: counter(section, decimal-leading-zero) "  \2014  "; white-space: pre; color: var(--accent); }
h1, h2, h3 { font-family: var(--display); font-stretch: 125%; margin: 0; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-weight: 800; font-size: clamp(32px, 9.4vw, 104px); line-height: 0.98; letter-spacing: -0.035em; }
h2 { font-weight: 800; font-size: clamp(32px, 4.6vw, 56px); line-height: 1.02; letter-spacing: -0.03em; }
h3 { font-weight: 700; font-stretch: 115%; font-size: clamp(21px, 2vw, 25px); line-height: 1.2; letter-spacing: -0.015em; }
h1.h1--long { font-size: clamp(32px, 5.4vw, 76px); line-height: 1; }  /* longer headlines, e.g. the home hero */
h1.h2 { font-weight: 800; font-size: clamp(32px, 4.6vw, 56px); line-height: 1.02; letter-spacing: -0.03em; }
p { margin: 0; text-wrap: pretty; }
.lede { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--ash-2); max-width: 34em; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); }
.accent { color: var(--accent); }

.section-head { display: grid; gap: 18px; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head--split { grid-template-columns: 1fr auto; align-items: end; gap: 24px; }
.section-head--split > p { max-width: 380px; color: var(--muted); font-size: 16px; }
.section-head h2 { max-width: 20ch; }
.section-head .section-head { margin-bottom: 0; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0 26px; border-radius: var(--radius);
  font: 600 16px/1 var(--body); text-decoration: none; cursor: pointer;
  border: 1px solid transparent; background: transparent; transition: background-color .15s, border-color .15s, color .15s;
}


.btn--primary { background: var(--accent); color: var(--night); }
.btn--primary:hover { background: var(--accent-hover); color: var(--night); }
.btn--ghost { border-color: var(--line-2); color: var(--ash); font-weight: 500; }
.btn--ghost:hover { border-color: var(--ash); color: var(--ash); }
.btn--outline { border-color: var(--accent); color: var(--accent); min-height: 48px; padding: 0 22px; font-size: 16px; }
.btn--outline:hover { background: var(--accent); color: var(--night); }
.btn--sm { min-height: 42px; padding: 0 18px; font-size: 15px; }

/* Header */

.site-header { position: sticky; top: 0; z-index: 50; background: var(--night); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 80px; }
/* Logo lockup, in units of the wordmark's font size (brand/README.md): the moon is
   1.1em tall (the SVG box adds 2/43.2 padding top and bottom, 2/56 each side), the
   text starts 0.32em right of the moon, and the cap height is centered on it. */
.brand { display: flex; align-items: center; gap: 0.264em; font-size: 24px; color: var(--ash); text-decoration: none; }
.brand:hover { color: var(--ash); }
.brand__mark { height: 1.2122em; width: auto; flex-shrink: 0; }
.wordmark { font-family: "Sora Wordmark", var(--body); font-weight: 500; font-size: 1em; line-height: 1; letter-spacing: -0.035em; white-space: nowrap; transform: translateY(0.025em); }
.wordmark__sub { color: var(--accent); margin-left: 0.048em; } /* with the space (0.222em) and tracking, the words sit 0.2em apart */

.nav { display: flex; align-items: center; }
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav__list { display: flex; align-items: center; gap: 36px; }
.nav a:not(.btn) { color: var(--ash-2); text-decoration: none; font-size: 15px; transition: color .2s; }
.nav a:not(.btn):hover { color: var(--ash); }
.nav a[aria-current]:not(.btn) { color: var(--ash); }
/* Underline that grows in on hover and marks the current page (desktop) */
@media (min-width: 1041px) {
  .nav__link { position: relative; }
  .nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 1px; background: var(--accent); opacity: 0; transition: opacity .15s; }
  .nav__link:hover::after, .nav__link[aria-current]::after { opacity: 1; }
}
.nav-toggle { display: none; width: 44px; height: 44px; border-radius: var(--radius); border: 1px solid var(--line-2); background: transparent; color: var(--ash); align-items: center; justify-content: center; cursor: pointer; padding: 0; }

/* Services menu: "Services" links to /services/, the chevron button opens the menu */
.nav__item--menu { position: relative; display: flex; align-items: center; gap: 2px; }
.nav__chev { width: 30px; height: 30px; border: 0; border-radius: var(--radius); background: transparent; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.nav__chev:hover { color: var(--accent); }
.nav__chev svg { width: 16px; height: 16px; transition: transform .15s; }
.nav__chev[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__menu {
  display: none; position: absolute; top: calc(100% + 22px); left: 50%; transform: translateX(-50%); width: 460px;
  grid-template-columns: 1fr 1fr; gap: 20px 28px; padding: 28px;
  background: var(--night); border: 1px solid var(--line); border-radius: var(--radius);
}
.nav__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -24px; height: 24px; } /* hover bridge across the gap */
.nav__menu.is-open { display: grid; }
.nav__group { display: grid; gap: 10px; align-content: start; }
.nav__group ul { display: grid; gap: 4px; }
.nav__group a { display: block; padding: 6px 0; }

.nav__label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.nav .nav__all { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 16px; color: var(--accent); font-size: 15px; }
/* Without JS: no chevron; the menu opens on hover or focus, and "Services" still links to the hub */
html:not(.js) .nav__chev { display: none; }
@media (min-width: 1041px) {
  html:not(.js) .nav__item--menu:hover .nav__menu,
  html:not(.js) .nav__item--menu:focus-within .nav__menu { display: grid; }
}

/* Hero */
.hero { padding: clamp(80px, 11vw, 160px) 0 clamp(72px, 9vw, 128px); background: var(--night) var(--grid) -1px -1px; }  /* faint engineering grid (DESIGN.md) */


.hero .accent { color: var(--accent); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(48px, 7vw, 112px); align-items: end; }
.hero__copy { display: grid; gap: 32px; min-width: 0; }
.hero--solo .wrap { grid-template-columns: minmax(0, 1fr); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 8px; }
.included { display: grid; gap: 20px; align-content: end; padding-top: 20px; border-top: 1px solid var(--line-2); }

.checks { list-style: none; margin: 0; padding: 0; display: grid; font-size: 16px; }
.checks li { display: flex; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ash-2); }
.checks svg { flex-shrink: 0; width: 14px; height: 14px; color: var(--accent); align-self: center; }
.included__foot { font-size: 14px; color: var(--muted); }
.included__foot strong { font-family: var(--mono); font-weight: 500; color: var(--straw); font-variant-numeric: tabular-nums; }
.included__foot a { color: var(--accent); }

/* Bands */
.band { padding: var(--section) 0; border-top: 1px solid var(--line); }
/* Sections alternate night / night-2 automatically, starting with the first band after the hero */
main > .band:nth-child(odd of .band:not(.contact)) { background: var(--night-2); }

.card { border-top: 1px solid var(--line-2); padding-top: 28px; }  /* DESIGN.md: a hairline on top, no box */

.service--link:hover h3, .service--link:hover h4, a.project:hover h3, .rcard:hover h3 { color: var(--accent); }

/* Services */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px clamp(32px, 5vw, 72px); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px clamp(28px, 4vw, 56px); }
.service { display: grid; gap: 16px; align-content: start; }


.service > svg { width: 24px; height: 24px; color: var(--muted); }
.service p { color: var(--ash-2); }
.service h4 { font-family: var(--display); font-stretch: 115%; font-weight: 700; font-size: clamp(21px, 2vw, 25px); line-height: 1.2; letter-spacing: -0.015em; margin: 0; transition: color .15s; }
.dash-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 15px; color: var(--ash-2); }
.dash-list li::before { content: "\2014  "; white-space: pre; font-family: var(--mono); color: var(--muted); }

.service--link { color: var(--ash); text-decoration: none; }
.service--link:hover { color: var(--ash); }
.service--link .project__link { margin-top: 4px; color: var(--accent); font-family: var(--mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; }

/* Pricing */
.plan { display: grid; gap: 18px; align-content: start; }
.plan--featured { border-top: 2px solid var(--accent); }

.plan__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.badge { font-family: var(--mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); }
.price { display: flex; align-items: baseline; gap: 8px; }
.price__from, .price__per { font-size: 15px; color: var(--muted); }
.price__amount { font-family: var(--mono); font-weight: 500; font-size: 40px; line-height: 1; color: var(--straw); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.plan p:not(.price) { color: var(--ash-2); font-size: 16px; }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; font-size: 15px; color: var(--ash-2); }
.plan ul li { padding: 9px 0; border-top: 1px solid var(--line); }
.fineprint { margin-top: 24px; font-size: 15px; color: var(--muted); }
.plan--compact { gap: 12px; }
.plan--compact .price__amount { font-size: 28px; }

/* Callout ("Good to know" notes): label and heading on the left, the points as
   hairline rows on the right, set off by a purple rule. No box (DESIGN.md). */
.callout { border-top: 0; padding: 8px 0 8px clamp(20px, 3vw, 40px); border-left: 3px solid var(--accent); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); gap: 24px clamp(32px, 5vw, 80px); }
.callout__head { display: grid; gap: 14px; align-content: start; }
.callout__head .eyebrow { color: var(--accent); }
.callout h3 { font-weight: 800; font-stretch: 125%; font-size: clamp(26px, 3vw, 38px); line-height: 1.05; letter-spacing: -0.03em; }
.callout__body { display: grid; justify-items: start; }
.callout__body > p { width: 100%; padding: 16px 0; border-top: 1px solid var(--line); color: var(--ash-2); font-size: 17px; max-width: 64ch; }
.callout__body > p:first-child { border-top: 0; padding-top: 0; }
.callout__body strong { color: var(--ash); font-weight: 600; }
.callout__body > .btn { margin-top: 12px; }

/* Closing call to action, and the home About band: deep violet with the hero's
   grid, so the grid bookends each page. Tokens are redefined inside, so
   everything in these sections follows. */
.cta, .closer {
  --night: #1A1422; --night-2: #1A1422; --ash-2: #CBC3D6; --muted: #A39AB2;
  --line: #2E2438; --line-2: #4A3D5A;
  background: var(--night) var(--grid) -1px -1px; border-top: 1px solid var(--line-2);
}

.cta h2 { font-size: clamp(36px, 6vw, 80px); line-height: 0.98; max-width: 16ch; }
.cta .wrap { display: grid; gap: 24px; justify-items: start; }

/* Process */
.step { display: grid; gap: 12px; align-content: start; border-top: 1px solid var(--line-2); padding-top: 24px; }

.step__num { font-family: var(--mono); font-size: 13px; color: var(--accent); font-variant-numeric: tabular-nums; }

.step p { color: var(--ash-2); }

/* Work */
.project { border-top: 0; padding-top: 0; display: flex; flex-direction: column; color: var(--ash); text-decoration: none; }
.project:hover { color: var(--ash); }
.project__shot { aspect-ratio: 16 / 9; background: #0B0D10; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden; }

.project__shot img { width: 100%; height: 100%; object-fit: cover; }

.browser { width: 78%; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; background: var(--night); }
.browser__bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.browser__bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.browser__url { margin-left: 10px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.browser__body { padding: 28px 22px; display: grid; gap: 10px; }
.browser__line { height: 10px; border-radius: 5px; background: var(--line); }
.project__body { padding: 24px 0 0; display: grid; gap: 12px; }
.project__body p { color: var(--ash-2); }
.project__link { font-size: 15px; color: var(--accent); }
.founding { display: grid; gap: 18px; align-content: center; justify-items: start; }
.founding h3 { font-weight: 800; font-size: clamp(26px, 3vw, 36px); line-height: 1.15; }
.founding p { color: var(--ash-2); }

/* About */
.about .wrap { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 72px; align-items: center; }
.about__photo { aspect-ratio: 9 / 10; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.about__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.about__photo svg { width: 55%; height: auto; }
.about__copy { display: grid; gap: 20px; max-width: 680px; }
.about__copy p:not(.eyebrow) { font-size: clamp(17px, 1.5vw, 19px); color: var(--ash-2); line-height: 1.65; }

/* Contact */
.contact .wrap { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: clamp(48px, 7vw, 112px); align-items: start; }
.contact__intro { display: grid; gap: 20px; }
.contact__intro p:not(.eyebrow) { color: var(--ash-2); font-size: 18px; }
.contact__email { display: grid; gap: 6px; padding-top: 12px; }
.contact__email a { font-family: var(--mono); font-size: 18px; }
.form { display: grid; gap: 22px; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.field { display: grid; gap: 8px; font-size: 14px; color: var(--ash-2); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 0 14px; border-radius: var(--radius);
  border: 1px solid var(--line-2); background: var(--night); color: var(--ash);
  font: 400 16px/1.4 var(--body);
  transition: border-color .15s;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: #56606C; }
.field textarea { padding: 12px 14px; min-height: 140px; resize: vertical; }
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%23939BA6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 40px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.field .req { color: var(--accent); }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form__foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.form__status { font-size: 15px; color: var(--ash-2); }
.form__status.is-error { color: var(--accent-hover); }
.form button[disabled] { opacity: 0.6; cursor: progress; }

/* Footer */
.site-footer { border-top: 1px solid var(--line-2); padding: clamp(56px, 7vw, 96px) 0 32px; color: var(--muted); font-size: 15px; }
.site-footer a { color: var(--ash-2); text-decoration: none; }
.site-footer a:hover { color: var(--accent); }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 2fr); gap: 48px; padding-bottom: 48px; }
.footer-brand { display: grid; gap: 20px; justify-items: start; align-content: start; }
.footer-brand p { max-width: 34ch; color: var(--muted); }
.site-footer .brand { color: var(--ash); }
.site-footer .btn--primary { color: var(--night); }
.footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.footer-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
@media (max-width: 1000px) { .footer-top { grid-template-columns: 1fr; gap: 40px; } }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 24px; font-size: 14px; }
.footer-bottom span:last-child { font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; color: var(--ash-2); }

/* Simple pages */
.simple { min-height: calc(100vh - 81px - 91px); display: flex; align-items: center; padding: 96px 0; }
.simple .wrap { display: grid; gap: 24px; justify-items: start; }
.simple svg { width: 140px; height: auto; }

/* Service groups (home and /services/) */
.group-title { font-family: var(--mono); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin: 0 0 20px; display: flex; align-items: center; gap: 14px; }
.group-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }
* + .group-title { margin-top: 48px; }
.service__price { font-family: var(--mono); font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.service__price strong { font-family: var(--mono); font-weight: 500; font-size: 17px; color: var(--straw); }

/* Work */
.badge--muted { background: var(--line); color: var(--ash-2); }
.filters { display: grid; gap: 14px; margin-bottom: 20px; }
.filters__group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filters__label { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); min-width: 150px; }
.chipbtn { font: 500 14px/1 var(--body); color: var(--ash-2); background: transparent; border: 1px solid var(--line-2); border-radius: 999px; padding: 10px 16px; min-height: 40px; cursor: pointer; }
.chipbtn:hover { border-color: var(--accent); color: var(--ash); }
.chipbtn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--night); }
.filters__count { font-family: var(--mono); font-size: 13px; color: var(--muted); margin: 4px 0 0; }
.layout-key { margin: 0 0 28px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 0; }
.layout-key summary { cursor: pointer; padding: 14px 0; font-weight: 600; }
.layout-key dl { display: grid; gap: 4px 18px; grid-template-columns: max-content 1fr; margin: 0 0 16px; }
.layout-key dt { font-family: var(--mono); font-size: 13px; color: var(--accent); padding-top: 3px; }
.layout-key dd { margin: 0 0 8px; color: var(--ash-2); font-size: 15px; }
@media (max-width: 640px) { .layout-key dl { grid-template-columns: 1fr; } .layout-key dd { margin-bottom: 12px; } }
.labels { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.label { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ash-2); }
.label--layout { color: var(--accent); }
.project__why { font-size: 15px; color: var(--muted); }
.project__head { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.project__shot--soon { color: var(--muted); }
.project__shot--soon svg { width: 56px; height: 56px; opacity: 0.8; }
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.tags li + li::before { content: "/ "; color: var(--line-2); }

/* Quote form */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.notes { list-style: none; margin: 0; padding: 20px 0 0; border-top: 1px solid var(--line); display: grid; gap: 14px; font-size: 15px; color: var(--ash-2); }
.notes li { display: flex; gap: 12px; }
.notes svg { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; color: var(--straw); }
.qform { gap: 0; }
.qstep { display: grid; gap: 24px; padding-bottom: 40px; }
.qstep + .qstep { border-top: 1px solid var(--line); padding-top: 40px; }
.qform.is-wizard .qstep { border-top: 0; padding-top: 0; padding-bottom: 32px; }
.qstep__title { font-size: clamp(24px, 2.6vw, 30px); }
.qstep__title:focus { outline: none; }
.qstep__intro { color: var(--ash-2); font-size: 16px; }
.qblock, .qgroup { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 20px; }
.qblock { border: 0; border-top: 1px solid var(--line-2); border-radius: 0; padding: 24px 0 0; }
.qblock > legend { font-family: var(--display); font-stretch: 112%; font-weight: 700; font-size: 20px; padding: 0 8px; margin-left: -8px; float: left; width: 100%; margin-bottom: 4px; }
.qblock > legend + * { clear: both; }
.qgroup > legend { font-size: 14px; color: var(--ash-2); padding: 0; margin-bottom: 10px; float: left; width: 100%; }
.qgroup > legend + * { clear: both; }
.field__hint { font-size: 13px; color: var(--muted); }
.field__error { font-size: 14px; color: var(--accent-hover); font-weight: 500; }
.field__error::before { content: "! "; font-family: var(--mono); }
.field [aria-invalid="true"], .qgroup[aria-invalid="true"] .choice { border-color: var(--accent-hover); }
.field input[type="date"] { color-scheme: dark; padding-right: 14px; }
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.choices--1 { grid-template-columns: 1fr; }
.choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choice { display: flex; align-items: flex-start; gap: 12px; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--night); transition: border-color .15s; color: var(--ash); font-size: 15px; line-height: 1.35; cursor: pointer; }
.choice:hover { border-color: var(--ash-2); }
.choice:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--night)); }
.choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.choice input { accent-color: var(--accent); width: 18px; height: 18px; margin: 1px 0 0; flex-shrink: 0; }
.choice small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.readiness { display: grid; gap: 16px; }
.readiness .qgroup > legend { margin-bottom: 8px; }
.qprogress { list-style: none; margin: 0 0 32px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; counter-reset: q; }
.qprogress li { counter-increment: q; display: grid; gap: 8px; font-size: 13px; color: var(--muted); }
.qprogress li::before { content: ""; height: 2px; background: var(--line); }
.qprogress li.is-done::before, .qprogress li[aria-current="step"]::before { background: var(--accent); }
.qprogress li[aria-current="step"] { color: var(--ash); font-weight: 500; }
.qprogress__now { display: none; font-size: 14px; color: var(--ash-2); }
.qnav { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); padding-top: 24px; }
.qnav .btn--ghost[hidden] + .btn { margin-left: auto; }
.qerrors { color: var(--accent-hover); font-size: 15px; font-weight: 500; }
.qerrors:empty { display: none; }
.qreview { display: grid; gap: 20px; }
.qreview__section { border-top: 1px solid var(--line-2); padding: 16px 0 0; display: grid; gap: 12px; }
.qreview__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.qreview__head h3 { font-size: 19px; }
.qreview__edit { background: none; border: 0; padding: 4px 0; color: var(--accent); font: 500 15px var(--body); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.qreview dl { margin: 0; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 8px 20px; font-size: 15px; }
.qreview dt { color: var(--muted); }
.qreview dd { margin: 0; color: var(--ash); overflow-wrap: anywhere; white-space: pre-line; }
.qsubmit { border-top: 1px solid var(--line); padding-top: 24px; }

/* Responsive */
@media (max-width: 1100px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 48px; }
  .included { max-width: 520px; }
  .contact .wrap { grid-template-columns: 1fr; gap: 40px; }
  .about .wrap { grid-template-columns: 280px minmax(0, 1fr); gap: 48px; }
}
@media (max-width: 1040px) {
  .js .nav-toggle { display: inline-flex; }
  .js .nav {
    display: none; position: absolute; top: 80px; left: 0; right: 0;
    max-height: calc(100vh - 80px); overflow-y: auto;
    flex-direction: column; align-items: stretch;
    background: var(--night); border-bottom: 1px solid var(--line); padding: 8px var(--gutter) 20px;
  }
  .js .nav.is-open { display: flex; }
  .js .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .js .nav__item { border-bottom: 1px solid var(--line); }
  .js .nav__item--cta { border-bottom: 0; }
  .js .nav__item--menu { flex-wrap: wrap; gap: 0; }
  .js .nav__link { flex: 1; }
  .js .nav a:not(.btn) { display: block; padding: 14px 0; font-size: 17px; }
  .js .nav__chev { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--radius); }
  .js .nav__chev svg { width: 22px; height: 22px; }
  .js .nav__menu { position: static; transform: none; width: 100%; box-shadow: none; background: transparent; border: 0; border-radius: 0; padding: 0 0 16px 16px; grid-template-columns: 1fr; gap: 14px; }
  .js .nav__menu::before { display: none; }
  .js .nav .nav__group a, .js .nav .nav__all { padding: 9px 0; font-size: 16px; border: 0; }
  .js .nav__group ul { gap: 0; }
  .js .nav .btn { margin-top: 16px; min-height: 52px; width: 100%; }
  /* Without JS: the links sit in a row under the logo */
  html:not(.js) .site-header .wrap { flex-wrap: wrap; height: auto; padding-top: 14px; padding-bottom: 14px; row-gap: 12px; }
  html:not(.js) .nav { width: 100%; }
  html:not(.js) .nav__list { gap: 24px; flex-wrap: wrap; }
}
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr; }
  .section-head--split { grid-template-columns: 1fr; }
  .section-head--split > p { text-align: left; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .site-header .wrap { height: 72px; }
  .brand { font-size: 21px; }
  .js .nav { top: 72px; max-height: calc(100vh - 72px); }
  .hero__actions .btn { flex: 1 1 100%; }
  .grid-2 { grid-template-columns: 1fr; }
  .callout { grid-template-columns: 1fr; padding-left: 18px; }
  .price__amount { font-size: 36px; }
  .form__row { grid-template-columns: 1fr; }
  .choices, .choices--3 { grid-template-columns: 1fr; }
  .qblock { padding: 18px; }
  .qreview dl { grid-template-columns: 1fr; gap: 2px; }
  .qreview dd { margin-bottom: 10px; }
  .qprogress { margin-bottom: 10px; }
  .qprogress li span { display: none; }
  .qprogress__now { display: block; margin-bottom: 24px; }
  .form .btn { width: 100%; }
  .about .wrap { grid-template-columns: 1fr; gap: 32px; }
  .about__photo { max-width: 220px; }
  .section-head { margin-bottom: 32px; }
  .footer-top { grid-template-columns: 1fr; gap: 40px; }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .js .nav .nav__group a { margin: 0; }
}

/* Announcement banner (text lives in the config at the top of main.js) */
.announce { position: relative; overflow: hidden; isolation: isolate; background: #1A1422; border-bottom: 1px solid #2E2438; color: #CBC3D6; font-size: 14px; }
/* Starfield (the one animation on the site, DESIGN.md rule 8): two tiled star
   layers drifting left at different speeds, the near layer twinkling. Each layer
   is one tile (320px) wider than the bar and moves exactly one tile per loop, so
   the repeat is seamless. Only transform and opacity animate. */
.announce::before, .announce::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: calc(100% + 320px); z-index: -1; pointer-events: none; background-size: 320px 80px; }
.announce::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='80'%3E%3Ccircle cx='103.6' cy='12.1' r='0.66' fill='%23C58FE0' fill-opacity='0.27'/%3E%3Ccircle cx='171.5' cy='29.3' r='0.42' fill='%23C58FE0' fill-opacity='0.40'/%3E%3Ccircle cx='12.0' cy='34.7' r='0.43' fill='%23C58FE0' fill-opacity='0.28'/%3E%3Ccircle cx='135.8' cy='66.1' r='0.45' fill='%23E6E9EE' fill-opacity='0.32'/%3E%3Ccircle cx='200.8' cy='75.8' r='0.63' fill='%23E6E9EE' fill-opacity='0.37'/%3E%3Ccircle cx='312.4' cy='3.7' r='0.74' fill='%23E6E9EE' fill-opacity='0.34'/%3E%3Ccircle cx='46.2' cy='9.4' r='0.52' fill='%23E6E9EE' fill-opacity='0.49'/%3E%3Ccircle cx='57.8' cy='46.5' r='0.66' fill='%23E6E9EE' fill-opacity='0.36'/%3E%3Ccircle cx='175.3' cy='5.0' r='0.42' fill='%23E6E9EE' fill-opacity='0.31'/%3E%3Ccircle cx='217.7' cy='34.2' r='0.53' fill='%23E6E9EE' fill-opacity='0.43'/%3E%3Ccircle cx='145.0' cy='24.0' r='0.72' fill='%23E6E9EE' fill-opacity='0.46'/%3E%3Ccircle cx='78.1' cy='46.0' r='0.61' fill='%23E6E9EE' fill-opacity='0.51'/%3E%3Ccircle cx='233.4' cy='23.0' r='0.79' fill='%23E6E9EE' fill-opacity='0.29'/%3E%3Ccircle cx='133.8' cy='60.6' r='0.46' fill='%23E6E9EE' fill-opacity='0.40'/%3E%3Ccircle cx='12.5' cy='53.5' r='0.71' fill='%23E6E9EE' fill-opacity='0.42'/%3E%3Ccircle cx='280.2' cy='25.1' r='0.68' fill='%23E6E9EE' fill-opacity='0.43'/%3E%3Ccircle cx='185.6' cy='36.5' r='0.74' fill='%23E6E9EE' fill-opacity='0.53'/%3E%3Ccircle cx='151.7' cy='53.1' r='0.42' fill='%23E6E9EE' fill-opacity='0.46'/%3E%3Ccircle cx='207.1' cy='79.4' r='0.73' fill='%23E6E9EE' fill-opacity='0.34'/%3E%3Ccircle cx='123.5' cy='53.5' r='0.41' fill='%23E6E9EE' fill-opacity='0.39'/%3E%3Ccircle cx='53.8' cy='9.4' r='0.42' fill='%23E6E9EE' fill-opacity='0.48'/%3E%3Ccircle cx='41.4' cy='19.8' r='0.56' fill='%23E6E9EE' fill-opacity='0.51'/%3E%3Ccircle cx='25.8' cy='35.9' r='0.62' fill='%23E6E9EE' fill-opacity='0.52'/%3E%3Ccircle cx='262.2' cy='69.1' r='0.51' fill='%23E6E9EE' fill-opacity='0.37'/%3E%3Ccircle cx='114.8' cy='70.7' r='0.78' fill='%23E6E9EE' fill-opacity='0.30'/%3E%3Ccircle cx='56.4' cy='18.6' r='0.49' fill='%23E6E9EE' fill-opacity='0.40'/%3E%3Ccircle cx='188.5' cy='21.0' r='0.40' fill='%23E6E9EE' fill-opacity='0.38'/%3E%3Ccircle cx='118.2' cy='45.3' r='0.78' fill='%23E6E9EE' fill-opacity='0.46'/%3E%3Ccircle cx='165.0' cy='49.4' r='0.67' fill='%23E6E9EE' fill-opacity='0.27'/%3E%3Ccircle cx='287.9' cy='62.4' r='0.75' fill='%23E6E9EE' fill-opacity='0.49'/%3E%3Ccircle cx='125.6' cy='31.9' r='0.44' fill='%23E6E9EE' fill-opacity='0.44'/%3E%3Ccircle cx='19.9' cy='5.4' r='0.48' fill='%23E6E9EE' fill-opacity='0.30'/%3E%3Ccircle cx='108.8' cy='4.2' r='0.40' fill='%23E6E9EE' fill-opacity='0.30'/%3E%3Ccircle cx='32.5' cy='29.1' r='0.41' fill='%23E6E9EE' fill-opacity='0.51'/%3E%3C/svg%3E"); animation: stars-drift 140s linear infinite; }
.announce::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='80'%3E%3Ccircle cx='196.5' cy='11.9' r='0.93' fill='%23C58FE0' fill-opacity='0.59'/%3E%3Ccircle cx='116.5' cy='9.8' r='1.22' fill='%23C58FE0' fill-opacity='0.85'/%3E%3Ccircle cx='149.1' cy='38.7' r='0.84' fill='%23E6E9EE' fill-opacity='0.49'/%3E%3Ccircle cx='109.6' cy='21.2' r='1.21' fill='%23E6E9EE' fill-opacity='0.51'/%3E%3Ccircle cx='7.4' cy='76.1' r='1.06' fill='%23E6E9EE' fill-opacity='0.51'/%3E%3Ccircle cx='173.8' cy='2.2' r='1.06' fill='%23E6E9EE' fill-opacity='0.84'/%3E%3Ccircle cx='276.3' cy='55.7' r='0.93' fill='%23E6E9EE' fill-opacity='0.60'/%3E%3Ccircle cx='53.5' cy='61.8' r='1.07' fill='%23E6E9EE' fill-opacity='0.76'/%3E%3Ccircle cx='105.5' cy='17.8' r='1.21' fill='%23E6E9EE' fill-opacity='0.84'/%3E%3Ccircle cx='272.8' cy='64.5' r='1.21' fill='%23E6E9EE' fill-opacity='0.75'/%3E%3Ccircle cx='72.6' cy='41.4' r='0.98' fill='%23E6E9EE' fill-opacity='0.46'/%3E%3Ccircle cx='8.9' cy='22.4' r='0.93' fill='%23E6E9EE' fill-opacity='0.73'/%3E%3C/svg%3E"); animation: stars-drift 70s linear infinite, stars-twinkle 5s ease-in-out infinite alternate; }
@keyframes stars-drift { to { transform: translateX(-320px); } }
@keyframes stars-twinkle { from { opacity: 1; } to { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .announce::before, .announce::after { animation: none; } }
.announce .wrap { display: flex; align-items: center; justify-content: center; gap: 14px; padding-top: 10px; padding-bottom: 10px; position: relative; }
.announce p { margin: 0; text-align: center; }
.announce strong { color: var(--ash); font-weight: 600; }
.announce a { color: var(--accent); font-weight: 600; white-space: nowrap; }
.announce__close { flex-shrink: 0; width: 32px; height: 32px; border: 0; border-radius: var(--radius); background: transparent; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; }
.announce__close:hover { color: var(--ash); }

/* Work page: screenshot placeholder + show-more */
.project__shot--soon { flex-direction: column; gap: 10px; }
.shot-note { font: 500 12px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.work-more { display: flex; justify-content: center; padding-top: 32px; }

/* Home: services as a spec table (DESIGN.md) */
.specs { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); counter-reset: spec; }
.specs__row a { display: grid; grid-template-columns: 56px minmax(0, 15rem) minmax(0, 1fr) 150px 24px; gap: 24px; align-items: baseline; padding: 28px 0; border-top: 1px solid var(--line); color: var(--ash); text-decoration: none; }
.specs__num { font: 500 13px var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.specs__name { font-family: var(--display); font-stretch: 115%; font-weight: 700; font-size: clamp(21px, 2vw, 26px); letter-spacing: -0.015em; line-height: 1.15; transition: color .15s; }
.specs__desc { color: var(--ash-2); font-size: 16px; max-width: 52ch; }
.specs__price { font: 500 15px var(--mono); color: var(--straw); font-variant-numeric: tabular-nums; white-space: nowrap; }
.specs__price small { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-right: 6px; }
.specs__go { color: var(--muted); font-family: var(--mono); transition: color .15s; }
.specs__row a:hover .specs__name, .specs__row a:hover .specs__go { color: var(--accent); }
.specs__group { font: 500 12px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding: 32px 0 12px; }

/* Home: process steps and the AI note */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); list-style: none; margin: 0; padding: 0; }
.steps__item { border-top: 1px solid var(--line-2); padding-top: 24px; display: grid; gap: 10px; align-content: start; }
.steps__num { font: 500 13px var(--mono); color: var(--accent); font-variant-numeric: tabular-nums; }
.steps__item p { color: var(--ash-2); max-width: 36ch; }
.guard { margin-top: clamp(64px, 8vw, 104px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(28px, 5vw, 72px); }
.guard__title { margin: 0; font-family: var(--display); font-stretch: 125%; font-weight: 800; font-size: clamp(26px, 3vw, 38px); line-height: 1.05; letter-spacing: -0.03em; }
.guard__list { list-style: none; margin: 0; padding: 0; display: grid; }
.guard__list li { padding: 16px 0; border-top: 1px solid var(--line); color: var(--ash-2); font-size: 16px; }
.guard__list li:last-child { border-bottom: 1px solid var(--line); }
.guard__list strong { color: var(--ash); font-weight: 600; }

/* Home: work list */
.rcard { display: grid; gap: 10px; align-content: start; border-top: 1px solid var(--line-2); padding-top: 24px; color: var(--ash); text-decoration: none; }
.rcard:hover { color: var(--ash); }
.rcard .eyebrow { margin: 0; }
.rcard h3 { transition: color .15s; }
.rcard p { color: var(--ash-2); font-size: 15px; }
.chiplinks { display: flex; flex-wrap: wrap; gap: 8px 28px; padding-top: 40px; }
.chiplinks a { font: 500 13px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash-2); text-decoration: none; }
.chiplinks a:hover { color: var(--accent); }

/* Home: about + contact */
.closer .wrap { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 112px); align-items: end; }
.closer__copy { display: grid; gap: 24px; justify-items: start; }
.closer__copy h2 { font-size: clamp(36px, 6vw, 80px); line-height: 0.98; max-width: 14ch; }
.closer__copy .lede { margin: 0; }
.closer__figure { margin: 0; justify-self: end; width: 100%; max-width: 320px; }
/* Photo: rounded corners with a faint purple hairline (the one rounded image on the site) */
.closer__photo { display: block; width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; object-position: center top; border-radius: 12px; box-shadow: 0 0 0 1px rgba(197, 143, 224, 0.45); }
.closer__caption { font: 500 12px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-top: 16px; }

@media (max-width: 900px) {
  .specs__row a { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 8px 16px; }
  .specs__desc { grid-column: 2 / -1; }
  .specs__price { grid-column: 2 / -1; }
  .specs__go { grid-row: 1; grid-column: 3; }
  .steps, .guard { grid-template-columns: 1fr; }
  .closer .wrap { grid-template-columns: 1fr; }
  .closer__figure { justify-self: start; }
  .closer__figure { max-width: 220px; }
  .announce .wrap { justify-content: space-between; text-align: left; }
  .announce p { text-align: left; }
}

/* Long-form text pages (privacy) */
.prose { max-width: 720px; display: grid; gap: 14px; }
.prose h3 { margin-top: 26px; font-size: clamp(20px, 2vw, 24px); }
.prose h3:first-of-type { margin-top: 0; }
.prose p, .prose li { color: var(--ash-2); }
.prose strong { color: var(--ash); }
.form__privacy { font-size: 14px; color: var(--muted); }