/* NEONPALE — production stylesheet
   Brand tokens · locked logo CSS · page layout · responsive rules.
   Design system v1.1 (Space Grotesk + Onest + JetBrains Mono). */

:root {
  /* Paper palette */
  --white:  #FFFFFF;
  --cream:  #F2EEDF;
  --paper:  #F4F2E8;
  --stone:  #EDF1E5;
  --mist:   #E2EAD3;
  --blush:  #F4E4DC;
  --pool:   #DCE9ED;
  --grey:   #A4A5A0;
  --slate:  #5E6157;
  --ink:    #0E120A;

  /* Comm heroes */
  --neon:   #C5FF2E;
  --coral:  #FF6B47;
  --teal:   #1F8FA8;

  /* Type */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Onest', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Layout */
  --gutter: 56px;
  --rail-max: 1240px;
  --nav-h: 88px;        /* sticky header height fallback; JS keeps it exact */

  /* Radius (design system §7) */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-xl: 28px;
}

@media (max-width: 1023px) { :root { --gutter: 40px; } }
@media (max-width: 719px)  { :root { --gutter: 24px; } }

* { box-sizing: border-box; }
/* Anchor jumps clear the sticky header and keep breathing room above headlines. */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 24px); }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
p { margin: 0; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

dt, dd { margin: 0; }

.mono { font-family: var(--font-mono); }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper);
  padding: 12px 18px; z-index: 100;
  border-radius: 0 0 8px 0;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--neon);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-ink :focus-visible { outline-color: var(--neon); }
/* On lime surfaces the neon ring would vanish — swap it to ink so it
   stays visible for keyboard users. */
.hero :focus-visible,
.how-card--neon :focus-visible,
.intentions :focus-visible,
.contact__cta:focus-visible,
.nav__menu-pill:focus-visible { outline-color: var(--ink); }

/* ─── Wordmark (locked) ─── */
.np-wm {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--ink);
  display: inline-block;
}
.np-wm .n { position: relative; display: inline-block; z-index: 1; }
.np-wm .p { color: var(--ink); }
.np-wm .n::after {
  content: '';
  position: absolute;
  left: -0.04em; right: -0.04em;
  bottom: 0.06em; height: 0.32em;
  background: var(--neon);
  z-index: -1; border-radius: 4px;
  transform: skew(-4deg);
}
.np-wm.on-ink, .np-wm.on-ink .p { color: var(--paper); }
.np-wm.on-ink .n::after { background: var(--teal); }

.np-wm.inverse .n { color: var(--ink); }
.np-wm.inverse .n::after { display: none; }
.np-wm.inverse .p { color: var(--neon); }
.np-wm.inverse.on-ink .n { color: var(--paper); }
/* Chrome wordmark size (nav, mobile menu, footer) — was an inline style. */
.nav__brand .np-wm,
.nav__menu-top .np-wm,
.footer__brand .np-wm { font-size: 22px; }

/* ─── Monogram (locked) ─── */
.np-mark {
  border-radius: 24%;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-display);
}
.np-mark .glyph {
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 1;
  position: relative;
  z-index: 2;
}
.np-mark.v01 { background: var(--paper); border: 2px solid var(--ink); }
.np-mark.v01 .glyph { color: var(--ink); }
.np-mark.v01 .slash {
  position: absolute; left: 14%; right: 14%; bottom: 18%; height: 14%;
  background: var(--neon); border-radius: 4px; transform: skew(-6deg); z-index: 1;
}
.np-mark.v08 { background: var(--neon); }
.np-mark.v08 .glyph { color: var(--ink); }
.np-mark.v09 { background: var(--ink); }
.np-mark.v09 .glyph .n { color: var(--paper); }
.np-mark.v09 .glyph .p { color: var(--neon); }

.np-mark.s28  { width: 28px;  height: 28px;  } .np-mark.s28  .glyph { font-size: 17px; }
.np-mark.s36  { width: 36px;  height: 36px;  } .np-mark.s36  .glyph { font-size: 22px; }
.np-mark.s48  { width: 48px;  height: 48px;  } .np-mark.s48  .glyph { font-size: 30px; }
.np-mark.s64  { width: 64px;  height: 64px;  } .np-mark.s64  .glyph { font-size: 40px; }
.np-mark.s96  { width: 96px;  height: 96px;  } .np-mark.s96  .glyph { font-size: 60px; }
.np-mark.s140 { width: 140px; height: 140px; } .np-mark.s140 .glyph { font-size: 90px; }

/* ─── Tags + swipes ─── */
.tag {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 8px 14px; border-radius: 999px;
  border: 1.5px solid var(--ink);
  background: var(--paper); color: var(--ink); font-weight: 500;
}
.tag .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--neon);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--neon) 40%, transparent);
}
.on-ink .tag {
  background: transparent;
  border-color: color-mix(in oklab, var(--paper) 30%, transparent);
  color: var(--paper);
}

/* One shared in-headline plate: a rounded, skewed sticker that encloses the
   g/y descenders. Text rides in <i> above the ::before fill. The .plate is its
   own stacking context (z-index:0) so ::before (z-index:-1) stays inside it. */
.plate { position: relative; display: inline-block; z-index: 0; }
.plate > i { position: relative; z-index: 1; font-style: normal; }
.plate::before {
  content: ''; position: absolute;
  left: -0.09em; right: -0.09em; top: -0.04em; bottom: -0.17em;
  border-radius: 12px;
  transform: skew(-4deg);
  z-index: -1;
}
.plate-ink::before  { background: var(--ink); }
.plate-ink  > i { color: var(--neon); }
.plate-teal::before { background: var(--teal); }
.plate-teal > i { color: var(--paper); }

/* ─── Nav ─── */
.nav {
  padding: 0;
  background: var(--paper);
  border-bottom: 1.5px solid var(--ink);
  position: sticky; top: 0; z-index: 20;
}
.nav__inner {
  max-width: var(--rail-max);
  margin: 0 auto;
  padding: 22px var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
}
.nav__brand { display: flex; align-items: center; gap: 14px; }
.nav__links {
  display: flex; gap: 28px; font-size: 14px;
  align-items: center; font-weight: 500;
}
.nav__link { transition: color .15s ease; }
.nav__link:hover { color: var(--slate); }
/* Current page · a mini neon slash under the item (a plate, not text colour). */
.nav__link--current { color: var(--ink); position: relative; }
.nav__link--current::after {
  content: ''; position: absolute;
  left: -0.04em; right: -0.04em; bottom: -6px; height: 6px;
  background: var(--neon); border-radius: var(--radius-sm); transform: skew(-4deg);
}
.nav__pill {
  background: var(--ink); color: var(--paper);
  padding: 11px 18px; border-radius: 999px;
  font-size: 13px; font-weight: 500;
  transition: background .15s ease, color .15s ease;
}
.nav__pill:hover { background: var(--neon); color: var(--ink); }

.nav__toggle {
  display: none;
  background: transparent; border: 1.5px solid var(--ink);
  border-radius: 999px; padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink); font-weight: 500;
}
.nav__toggle .bars {
  display: inline-block; width: 14px; height: 10px;
  position: relative; margin-left: 8px; vertical-align: middle;
}
.nav__toggle .bars::before,
.nav__toggle .bars::after {
  content: ''; position: absolute; left: 0; right: 0;
  height: 1.5px; background: currentColor;
}
.nav__toggle .bars::before { top: 1px; }
.nav__toggle .bars::after { bottom: 1px; }

.nav__menu {
  display: none;
  position: fixed; inset: 0;
  background: var(--ink); color: var(--paper);
  z-index: 50; padding: 24px var(--gutter);
  flex-direction: column;
}
.nav__menu[data-open="true"] { display: flex; }
.nav__menu-top { display: flex; justify-content: space-between; align-items: center; }
.nav__menu-close {
  background: transparent; color: var(--paper);
  border: 1.5px solid color-mix(in oklab, var(--paper) 40%, transparent);
  border-radius: 999px; padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
}
.nav__menu-links {
  margin-top: 64px;
  display: flex; flex-direction: column; gap: 28px;
}
.nav__menu-links a {
  font-family: var(--font-display);
  font-size: 40px; letter-spacing: -0.025em; font-weight: 500;
}
/* Current page in the mobile menu · short neon slash beneath the item. */
.nav__menu-links a[aria-current="page"] { position: relative; width: fit-content; }
.nav__menu-links a[aria-current="page"]::after {
  content: ''; position: absolute;
  left: 0; width: 1.1em; bottom: -4px; height: 8px;
  background: var(--neon); border-radius: var(--radius-sm); transform: skew(-4deg);
}
.nav__menu-pill {
  margin-top: 36px;
  background: var(--neon); color: var(--ink);
  padding: 16px 22px; border-radius: 999px;
  align-self: flex-start;
  font-size: 16px; font-weight: 500;
}

@media (max-width: 719px) {
  .nav__links { display: none; }
  .nav__toggle { display: inline-flex; align-items: center; }
}

/* ─── Section base ─── */
.section {
  padding: 120px 0;
  border-bottom: 2px solid var(--ink);
}
.section--paper { background: var(--paper); }
.section--cream { background: var(--cream); }
.section--stone { background: var(--stone); }
.section--mist  { background: var(--mist); }
.section--blush { background: var(--blush); }
.section--pool  { background: var(--pool); }
.section--ink   { background: var(--ink); color: var(--paper); }
.on-ink         { color: var(--paper); }

.section__head {
  max-width: var(--rail-max);
  margin: 0 auto 64px;
  padding: 0 var(--gutter);
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 48px;
}
.section__head h2 {
  font-size: clamp(40px, 6.5vw, 88px);
  line-height: 0.96;
  letter-spacing: -0.04em;
  font-weight: 500;
  margin: 0;
  max-width: 24ch;
  overflow-wrap: break-word;
}
.section__meta {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--slate); text-align: right;
  line-height: 1.6;
  flex-shrink: 0;
}
.on-ink .section__meta { color: var(--paper); }

.rail {
  max-width: var(--rail-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ─── Hero · Lime plate ─── */
.hero {
  background: var(--neon);
  border-bottom: 2px solid var(--ink);
  /* Fill the first screen below the sticky header, content centred. */
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
  display: flex; align-items: center;
  padding: 72px 0;
}
.hero__inner {
  width: 100%;
  max-width: var(--rail-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr auto;
  gap: 56px; align-items: center;
}
.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 36px; font-weight: 500;
}
/* Display tier (hero + final CTA share this exact size — see .contact__title).
   Two lines: "The everyday," / "a little lighter." (line 2 never breaks).
   line-height 1.26 keeps the "lighter." plate clear of the y-tail above. */
.hero__title {
  font-size: clamp(58px, 8vw, 118px);
  line-height: 1.26; letter-spacing: -0.05em; font-weight: 600;
  color: var(--ink); margin: 0;
}
.hero__line { display: block; }
.hero__line--nowrap { white-space: nowrap; }

/* Mobile: let line 2 wrap and shrink so neither line overflows narrow phones. */
@media (max-width: 700px) {
  .hero__title { font-size: clamp(34px, 11vw, 62px); }
  .hero__line--nowrap { white-space: normal; }
}
.hero__lede {
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.45; max-width: 68ch;
  margin-top: 36px; color: var(--ink); font-weight: 400;
}
.hero__lede b { font-weight: 600; }
.hero__lede-link {
  font-weight: 600;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 1px;
  transition: color .15s ease, border-color .15s ease;
}
.hero__lede-link:hover { color: var(--slate); border-color: var(--slate); }

@media (max-width: 959px) {
  .hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .hero__mark { justify-self: start; }
  .hero__mark .np-mark { width: 96px; height: 96px; }
  .hero__mark .np-mark .glyph { font-size: 60px; }
}

/* ─── How we work ─── */
.how-grid {
  max-width: var(--rail-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.how-card {
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: 32px 30px 28px;
  min-height: 510px;
  display: flex; flex-direction: column;
  border: 2px solid var(--ink);
}
.how-card--neon  { background: var(--neon);  color: var(--ink); }
.how-card--coral { background: var(--coral); color: var(--ink); }
.how-card--teal  { background: var(--teal);  color: var(--paper); }
/* Top row: eyebrow (left) + oversized outline numeral (right). The numeral
   stroke colour must be explicit — currentColor resolves to transparent here
   (color: transparent), rendering an invisible stroke. */
.how-card__top {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 22px;
}
.how-card__num {
  font-family: var(--font-display);
  font-size: 84px; font-weight: 700; line-height: 0.78;
  letter-spacing: -0.04em;
  -webkit-text-stroke: 2px var(--ink);
  color: transparent;
  margin: -4px -2px 0 0;
  pointer-events: none; user-select: none;
}
.how-card--teal .how-card__num { -webkit-text-stroke-color: var(--paper); }
.how-card__tag {
  max-width: 14ch;
  padding-top: 6px;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 500;
}
/* The statement is the hero of the card: big display, one keyword bolded. */
.how-card__body {
  font-family: var(--font-display);
  font-size: 31px;
  line-height: 1.12; letter-spacing: -0.02em;
  font-weight: 500; margin: 0;
}
.how-card__body strong, .how-card__body b { font-weight: 700; }
/* Footnote pinned to the bottom, sitting ~one line under the statement.
   min-height keeps the three hairline dividers aligned across the row. */
.how-card__consequence {
  margin: 0; margin-top: auto;
  min-height: 6em;
  max-width: 34ch;
  font-family: var(--font-body);
  font-size: 14px; line-height: 1.5; font-weight: 400;
  padding-top: 20px;
  border-top: 1px solid color-mix(in oklab, currentColor 35%, transparent);
}

@media (max-width: 959px) {
  .how-grid { grid-template-columns: 1fr; }
  /* Stacked: let each card hug its content with a modest gap, rather than
     holding the tall desktop min-height and stranding the footnote. */
  .how-card { min-height: 0; }
  .how-card__consequence { margin-top: 36px; min-height: 0; }
}

/* ─── Work · Intentions + Territory ─── */
.work .section__head { margin-bottom: 56px; }

/* Intentions: lime text panel (rounded left, sharp right) sitting flush
   against the real app screen, both the same height. */
.intentions {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
  gap: 20px;
  margin-bottom: 64px;
}
.intentions__body {
  background: var(--neon);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 28px 0 0 28px;
  padding: 56px;
  display: flex; flex-direction: column; justify-content: center;
}
.intentions__phone {
  display: flex; align-items: center; justify-content: center;
}

/* De-brittle the equal-height rule (progressive enhancement, JS adds .--fit):
   the panel drives the height (min one phone tall), and the phone scales to
   match it — so the pitch copy can grow without the heights drifting apart.
   The phone column is fixed and the phone is absolutely positioned, so
   scaling never feeds back into the panel width (no layout loop). Without JS,
   the default rule above still holds for copy that fits. */
.intentions--fit { grid-template-columns: 1fr 260px; }
.intentions--fit .intentions__body { min-height: 563px; }
.intentions--fit .intentions__phone { position: relative; align-self: stretch; }
/* Anchored to the column's left edge so the 20px gap to the panel is fixed;
   when the panel grows, the phone scales up rightward into the page gutter. */
.intentions--fit .np-phone {
  position: absolute; top: 50%; left: 0;
  transform: translateY(-50%) scale(var(--phone-scale, 1));
  transform-origin: left center;
}
@media (max-width: 719px) {
  .intentions--fit { grid-template-columns: 1fr; }
  .intentions--fit .intentions__body { min-height: 0; }
  .intentions--fit .intentions__phone { position: static; align-self: auto; }
  .intentions--fit .np-phone { position: static; top: auto; left: auto; transform: none; }
}

/* ─── Intentions app screen · faithful CSS render of the real app ───
   Uses the APP'S OWN palette (deliberately NOT Neonpale tokens — never
   recolour the app) and the system UI font so it reads as iOS. The whole
   bezel is role="img" in markup, so its small type is decorative. */
.np-phone {
  --app-bezel: #1F1F1E;
  --app-paper: #F7F5F0;
  --app-ink: #2A2A27;
  --app-sub: #6B6B67;
  --app-mute: #A8A8A3;
  --app-green: #5C8A4A;
  --app-green-soft: #EDF4EA;
  --app-green-line: #C9D9BE;
  --app-green-italic: #8FAF7E;
  --app-line: #E4DECF;
  --app-white: #FFFFFF;
  --app-font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  width: 260px; height: 563px;
  flex-shrink: 0;
  background: var(--app-bezel);
  border-radius: 34px;
  padding: 9px;
  box-shadow: 0 40px 70px -30px rgba(58, 92, 46, 0.28),
              0 14px 30px -14px rgba(0, 0, 0, 0.18);
}
.np-phone__screen {
  width: 100%; height: 100%;
  position: relative;
  display: flex; flex-direction: column;
  overflow: hidden;
  border-radius: 27px;
  background: var(--app-paper);
  color: var(--app-ink);
  font-family: var(--app-font);
  user-select: none;
}
.np-phone__statusbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 15px 0;
}
.np-phone__time { font-size: 9.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.np-phone__icons { display: inline-flex; align-items: center; gap: 4px; color: var(--app-ink); }
.np-phone__signal { display: inline-flex; align-items: flex-end; gap: 1.2px; }
.np-phone__signal i { width: 1.7px; border-radius: 0.5px; background: currentColor; }
.np-phone__signal i:nth-child(1) { height: 3px; }
.np-phone__signal i:nth-child(2) { height: 4.5px; }
.np-phone__signal i:nth-child(3) { height: 6px; }
.np-phone__signal i:nth-child(4) { height: 7.5px; }
.np-phone__battery {
  display: inline-block; width: 16px; height: 8px; position: relative;
  border: 1px solid rgba(42, 42, 39, 0.4); border-radius: 2.5px;
}
.np-phone__battery i {
  position: absolute; top: 1.5px; left: 1.5px; bottom: 1.5px; width: 9px;
  border-radius: 1px; background: currentColor;
}
.np-phone__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 15px;
}
.np-phone__date { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.np-phone__chev { color: var(--app-mute); font-size: 13px; font-weight: 400; }
.np-phone__menu { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2.6px; }
.np-phone__menu span { height: 1.5px; border-radius: 9px; background: var(--app-sub); }
.np-phone__menu span:nth-child(1) { width: 7.5px; }
.np-phone__menu span:nth-child(2) { width: 10.8px; }
.np-phone__menu span:nth-child(3) { width: 15px; }
.np-phone__rule { height: 0.5px; background: var(--app-line); }
.np-phone__cards { padding: 12px 14px 0; display: flex; flex-direction: column; gap: 7px; }
.np-card__cat { font-size: 6px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 4px; }
.np-card__cat--green { color: var(--app-green); }
.np-card__cat--mute  { color: var(--app-mute); }
.np-card__title { font-size: 9.5px; font-weight: 600; line-height: 1.32; }
.np-card__note { font-size: 7.5px; font-style: italic; margin-top: 4px; }
.np-card__note--green { color: var(--app-green-italic); }
.np-card__note--mute  { color: var(--app-mute); }
.np-card__text { font-size: 8px; line-height: 1.4; margin-top: 4px; }
.np-card--pivotal { border-radius: 9px; overflow: hidden; border: 0.5px solid var(--app-green-line); }
.np-card__banner { padding: 1.5px 10px; line-height: 1; background: var(--app-green); }
.np-card__banner span { font-size: 6px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--app-paper); }
.np-card__body { padding: 9px 10px; background: var(--app-green-soft); }
.np-card--plain { padding: 9px 10px; border-radius: 9px; background: var(--app-white); border: 0.5px solid var(--app-line); }
.np-card--full  { padding: 9px 10px; border-radius: 9px; background: var(--app-green-soft); border: 0.5px solid var(--app-green-line); }
.np-card--full .np-card__text { line-height: 1.42; }
.np-phone__complete {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 0 0;
  font-size: 8px; font-weight: 600; letter-spacing: 0.05em; color: var(--app-green);
}
.np-phone__home {
  position: absolute; left: 0; right: 0; bottom: 0; height: 13px;
  display: flex; justify-content: center; align-items: center; pointer-events: none;
}
.np-phone__home span { width: 83px; height: 3px; border-radius: 99px; background: var(--app-ink); opacity: 0.85; }

.intentions__eyebrow {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 500; margin-bottom: 24px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px; border-radius: 999px;
  border: 1.5px solid var(--ink); background: var(--paper);
}
.intentions__title {
  font-size: clamp(56px, 7.5vw, 96px);
  line-height: 0.94; letter-spacing: -0.04em; font-weight: 600;
  margin: 0 0 24px;
}
.intentions__pitch {
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.55; max-width: 52ch;
  margin: 0 0 28px;
}
.intentions__stats {
  font-family: var(--font-mono);
  font-size: 13px; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 500;
  margin-bottom: 32px;
}
.intentions__cta {
  display: flex; gap: 12px; flex-wrap: wrap;
  align-items: center;
}
.intentions__status,
.intentions__try {
  padding: 13px 22px; border-radius: 999px;
  font-size: 14px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--ink);
}
.intentions__status {
  background: transparent; color: var(--ink);
  font-family: var(--font-mono);
  letter-spacing: 0.12em; text-transform: uppercase;
  font-size: 12px; cursor: default;
}
.intentions__try {
  background: var(--ink); color: var(--paper);
  transition: transform .15s ease;
}
.intentions__try:hover { transform: translateY(-1px); }
.intentions__story {
  padding: 13px 22px; border-radius: 999px;
  background: var(--ink); color: var(--paper);
  font-size: 14px; font-weight: 500;
  transition: transform .15s ease, background .15s ease;
}
.intentions__story:hover { transform: translateY(-1px); }

.work__intro {
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.5;
  max-width: 64ch;
  margin: 64px 0 40px;
  color: inherit;
}
.work__intro-accent { color: var(--neon); }

.territory-grid {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.territory-card {
  background: var(--stone);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: 26px 24px 24px;
  display: flex; flex-direction: column; gap: 14px;
  min-height: 322px;
  transition: transform .18s ease;
}
.territory-card--blush { background: var(--blush); }
.territory-card--mist  { background: var(--mist); }
.territory-card--cream { background: var(--cream); }
.territory-card--pool  { background: var(--pool); }
/* Top row: suite-colour dot + mono index, like a door number */
.territory-card__top {
  display: flex; align-items: center; justify-content: space-between;
}
.territory-card__dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ink);
}
.territory-card--mist  .territory-card__dot { background: var(--neon); }
.territory-card--blush .territory-card__dot { background: var(--coral); }
.territory-card--pool  .territory-card__dot { background: var(--teal); }
.territory-card__index {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink); font-weight: 500;
}
.territory-card__head {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-top: 4px;
}
.territory-card__body {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
}
.territory-card__tag {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink); font-weight: 500;
}
@media (prefers-reduced-motion: no-preference) {
  .territory-card:hover { transform: translateY(-4px); }
}

@media (max-width: 1023px) {
  .territory-grid { grid-template-columns: repeat(2, 1fr); }
  /* Below the 4-column desktop layout the cards are wider, so the tall
     min-height only strands the "Exploring" tag. Hug content instead;
     grid-stretch keeps each 2-up row even. */
  .territory-card { min-height: 0; }
}
@media (max-width: 719px) {
  .intentions {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .intentions__body {
    padding: 36px 28px;
    border-radius: 22px;
  }
  .intentions__phone { justify-content: center; }
  .territory-grid { grid-template-columns: 1fr; }
  /* Stacked full-width: hug content, keep a modest gap before "Exploring". */
  .territory-card { min-height: 0; }
  .territory-card__tag { margin-top: 28px; }
}

/* ─── Studio ─── */
.studio {
  padding: 140px 0;
  background: var(--mist);
  border-bottom: 2px solid var(--ink);
}
/* Two columns: left holds headline + lede + body; right holds the section
   marker (top) and the founder credit (bottom), so the right gutter is used
   rather than stranded. */
.studio__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 56px;
  align-items: stretch;
}
/* Left: ink brand plate — marker (top), wordmark (middle), est (bottom). */
.studio__plate {
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-xl);
  padding: 44px 48px;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 40px;
  min-height: 440px;
}
.studio__marker,
.studio__est {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--paper); font-weight: 500;
}
.studio__wm { font-size: clamp(38px, 4.6vw, 58px); }
/* Mobile-only marker under the headline (desktop uses the plate's marker). */
.studio__marker--mobile { display: none; }
/* Right: the full studio copy, top-aligned with the plate. */
.studio__main {
  display: flex; flex-direction: column; gap: 28px;
  min-width: 0;
}
.studio__title {
  font-family: var(--font-display);
  font-size: clamp(38px, 5.2vw, 72px);
  line-height: 0.98; letter-spacing: -0.04em; font-weight: 500;
  margin: 0;
}
.studio__lead {
  font-size: clamp(24px, 2.5vw, 31px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 500;
  font-family: var(--font-display);
  margin: 0;
  max-width: 46ch;
}
.studio__paragraph {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.6;
  max-width: 60ch;
  margin: 0;
}
.studio__credit {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--slate); font-weight: 500;
}
.studio__credit a {
  color: var(--ink);
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 1px;
  transition: color .15s ease;
}
.studio__credit a:hover { color: var(--slate); }

@media (max-width: 859px) {
  .studio__grid { grid-template-columns: 1fr; gap: 32px; }
  /* The ink brand plate is desktop eye-candy; it reads awkwardly stacked,
     so drop it on small screens — but keep the §-marker under the headline
     like every other section. */
  .studio__plate { display: none; }
  .studio__marker--mobile {
    display: block;
    color: var(--slate);
    margin-top: -16px;
  }
}
@media (max-width: 719px) {
  .studio { padding: 80px 0; }
}

/* ─── FAQ (accordion · stone bg, ink button on open) ─── */
.faq__list {
  display: flex; flex-direction: column;
  margin: 0; padding: 0;
  max-width: 920px;
}
.faq__item {
  border-top: 1px solid color-mix(in oklab, var(--ink) 18%, transparent);
}
.faq__item:last-child {
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 18%, transparent);
}
.faq__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 28px 0;
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { display: none; }
.faq__q-text {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin: 0;
  color: var(--ink);
}
.faq__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1;
  /* Background-aware: on the pale-green FAQ surface a neon fill has no edge,
     so closed reads as an ink outline and open flips to a filled ink disc
     where the neon glyph finally pops. Both states clear AAA. */
  background: transparent;
  border: 2px solid var(--ink);
  color: var(--ink);
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.faq__icon::after { content: '+'; }
.faq__q:hover .faq__icon { transform: scale(1.08); }
.faq__item[open] .faq__icon {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--neon);
}
.faq__item[open] .faq__icon::after { content: '×'; }
.faq__a {
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 28px;
  max-width: 70ch;
}
.faq__a a {
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 1px;
  word-break: break-all;
}

/* ─── Contact ─── */
.contact {
  background: var(--ink); color: var(--paper);
  padding: 140px 0;
}
.contact__inner {
  max-width: var(--rail-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.contact .tag { margin-bottom: 36px; }
/* Display tier — identical size to .hero__title (the two big moments) */
.contact__title {
  font-size: clamp(40px, 9vw, 132px);
  line-height: 1.05; letter-spacing: -0.045em; font-weight: 600;
  margin: 0; color: var(--paper);
  max-width: 12ch;
}
.contact__lede {
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.5; max-width: 52ch;
  margin: 32px 0 0;
  color: var(--paper); font-weight: 400;
}
.contact__cta {
  display: inline-block;
  margin-top: 52px;
  padding: 22px 36px; border-radius: 999px;
  background: var(--neon); color: var(--ink);
  font-size: clamp(16px, 2vw, 24px);
  font-weight: 600; letter-spacing: -0.015em;
  border: 2px solid var(--ink);
  transition: transform .2s ease;
  word-break: break-word;
}
.contact__cta:hover { transform: translateY(-2px); }

/* ─── Footer ─── */
.footer {
  background: var(--ink); color: var(--paper);
  padding: 40px 0 32px;
  border-top: 1px solid color-mix(in oklab, var(--paper) 10%, transparent);
}
.footer__inner {
  max-width: var(--rail-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.footer__row {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 24px;
}
.footer__brand {
  display: flex; align-items: center; gap: 14px;
}
.footer__meta {
  font-family: var(--font-mono);
  font-size: 13px; letter-spacing: 0.12em;
  color: var(--paper); font-weight: 400;
}
.footer__legal {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid color-mix(in oklab, var(--paper) 10%, transparent);
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.12em;
  color: var(--paper); font-weight: 400;
}
.footer__link {
  color: var(--paper);
  border-bottom: 1px solid color-mix(in oklab, var(--paper) 35%, transparent);
  padding-bottom: 1px;
  transition: border-color .15s ease, color .15s ease;
}
.footer__link:hover {
  color: var(--neon);
  border-color: var(--neon);
}
.footer__sep { color: var(--paper); }
.footer__ids { letter-spacing: 0.12em; }

/* ─── Per-page helpers (privacy + terms) ─── */
.doc {
  background: var(--paper);
  color: var(--ink);
}
.doc__container {
  padding: 96px var(--gutter) 120px;
  max-width: 780px;
  margin: 0 auto;
}
.doc h1 {
  font-size: clamp(40px, 6vw, 72px);
  line-height: 0.96;
  letter-spacing: -0.04em;
  font-weight: 500;
  margin: 0 0 48px;
}
.doc h2 {
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 56px 0 18px;
}
.doc h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 32px 0 12px;
}
.doc p {
  font-size: clamp(16px, 1.5vw, 17px);
  line-height: 1.65;
  margin: 0 0 18px;
}
.doc strong { font-weight: 600; }
.doc a {
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 1px;
}
.doc ul {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
}
.doc ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  font-size: clamp(16px, 1.5vw, 17px);
  line-height: 1.6;
}
.doc ul li::before {
  content: '·';
  position: absolute;
  left: 6px;
  color: var(--ink);
  font-weight: 700;
}
.doc address {
  font-style: normal;
  margin-bottom: 18px;
  line-height: 1.6;
}
.doc hr {
  border: none;
  border-top: 1.5px solid var(--ink);
  margin: 56px 0 24px;
}
.doc__updated {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--slate);
}
.doc__intro {
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.55;
  margin-bottom: 32px;
  color: var(--ink);
}

/* ─── Responsive blanket ─── */
@media (max-width: 719px) {
  .section { padding: 80px 0; }
  .section__head { margin-bottom: 40px; flex-wrap: wrap; gap: 20px; }
  .section__meta { text-align: left; }
  .contact { padding: 80px 0; }
  .hero { padding: 64px 0 80px; }
  .work .section__head { margin-bottom: 40px; }
  .intentions__title { margin-bottom: 18px; }
  .intentions__pitch { margin-bottom: 22px; }
  .intentions__stats { margin-bottom: 24px; }
  .doc__container { padding: 64px var(--gutter) 80px; }
}

/* ─── Momentum (scroll-reveal) ─── */
/* Only the animation fades; the resting state is fully solid (no dimmed
   text). Guarded so it never runs under reduced-motion. The .reveal hidden
   state applies only once JS adds .reveal-ready, so no-JS shows everything. */
@media (prefers-reduced-motion: no-preference) {
  .reveal-ready .reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .55s ease, transform .55s ease;
    will-change: opacity, transform;
  }
  .reveal-ready .reveal.is-in {
    opacity: 1;
    transform: none;
  }
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}