/* --- Display face ---------------------------------------------------------
   Gelasio, self-hosted and subset to Latin (17.5KB + 19.6KB). Georgia is the
   fallback and is metric-compatible with it — identical advance widths — so
   `swap` exchanges one for the other without reflowing a single line. That is
   the whole reason this face was chosen over any other serif: the unstyled
   render and the final render occupy exactly the same space.
   Only 400 and its italic are shipped; the display face is never set bold. */
@font-face {
  font-family: "Gelasio";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/gelasio-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Gelasio";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/gelasio-italic.woff2") format("woff2");
}

/* ==========================================================================
   United Intelligence LLC — landing page
   Aesthetic: light editorial. Warm paper, serif display, generous rules.
   ========================================================================== */

:root {
  --paper:      #FCFCFD;
  --paper-2:    #F1F3F5;
  --ink:        #121417;
  --ink-soft:   #474D55;
  --muted:      #666D76;  /* 5.1:1 on paper, 4.7:1 on paper-2 */
  --rule:       #E0E3E7;
  --rule-2:     #CDD3DA;  /* borders that need to read as an edge, not a hint */
  /* The mark's star is #BF0A30, so the accent family is red. One hue, three
     jobs — a deep tone that carries white text, the star red itself for small
     type on paper, and a lifted tone that survives the dark bands.
     To go back to the teal scheme, restore: #0D5C63 / #12A594 / #0B7C6F. */
  --accent:     #9E1226;  /* deep red — primary buttons, italics. 8:1 on paper */
  --pop:        #E8455A;  /* lifted red — accents on DARK only. 4.85:1 on ink,
                             but 3.4:1 on paper, so never use it on light */
  --pop-deep:   #BF0A30;  /* the star red — small text on light. 6.2:1 on paper */

  /* One display face, everywhere, on every platform — including Android, which
     has no Georgia. Gelasio is also the face the logo artwork is outlined in,
     so the site and the wordmark are now literally the same font file.
     Sans and mono stay system: SF Pro / SF Mono on Apple, Segoe UI / Consolas
     on Windows. Those are the only faces that still vary by platform. */
  --serif: "Gelasio", Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
  --sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* The identity's third voice. Every piece of structural furniture — eyebrows,
     plate numbers, specs, meta — is set in it, so the scaffolding reads as
     drawing annotation and the serif keeps the whole voice. Mono counts wider
     and reads heavier than Geist at the same size, so everything set in it
     drops a step in size and roughly halves its tracking. */
  --mono:  ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --measure: 62ch;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* No paper grain here — on a cool near-white it reads as dirt rather than
   texture. Depth comes from the rules and the two tinted section bands. */

main, header, footer { position: relative; z-index: 1; }

a { color: inherit; }

/* Georgia is a sturdy text serif, not a display face: wide, low contrast, big
   x-height, and fitted loosely for screen at small sizes. Set large it needs
   real negative tracking and more leading than Instrument Serif did — and every
   display size below steps down roughly 15%, because Georgia reads that much
   larger at the same nominal size. */
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.019em;
  line-height: 1.13;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

.shell {
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --- Eyebrow / section index ---------------------------------------------- */

.eyebrow {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
  margin: 0;
}

.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* --- Header --------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}

.site-header .shell {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 74px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  margin-right: auto;
  padding-block: 0.4rem;
}

.brand svg { width: 30px; height: 30px; display: block; }

.brand-name {
  font-family: var(--serif);
  font-size: 1.06rem;
  letter-spacing: -0.014em;
  line-height: 1;
}

.brand-name span { color: var(--muted); }

/* Same reason: the wordmark was breaking after "United" on narrow phones. */
.brand-name { white-space: nowrap; }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.2rem);
}

/* :not(.btn) matters. Without it these rules out-specify .btn (0,1,1 vs 0,1,0),
   which painted the header CTA's label in --ink-soft on a near-black pill and
   drew the hover underline straight through the middle of the button. */
.nav a:not(.btn) {
  font-size: 0.87rem;
  text-decoration: none;
  color: var(--ink-soft);
  /* 0.68rem clears the 44px touch floor — iPad portrait shows these links and
     is very much a finger device. The header's 74px min-height absorbs it, so
     nothing moves on desktop. */
  padding-block: 0.68rem;
  position: relative;
  transition: color 0.25s var(--ease);
}

.nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0.33rem;   /* holds the underline where it sat before the padding grew */
  width: 100%; height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease);
}

.nav a:not(.btn):hover { color: var(--ink); }
.nav a:not(.btn):hover::after { transform: scaleX(1); transform-origin: left; }

/* The CTA is visible at every width. It used to be hidden by default and only
   restored above 760px and below 600px, which left 601–759px — Android tablets,
   iPad portrait, any half-screen window — showing a nav with no way to start a
   project. Below 600px the text links drop and the button carries the nav alone. */
.nav .nav-cta { display: inline-flex; padding: 0.6rem 1.25rem; min-height: 44px; }

/* Text links appear only at 760px, where brand + three links + button
   genuinely fit. Between 600 and 760 they used to squeeze the row into its own
   gutter; below that width the button alone is the honest nav. */
@media (max-width: 759px) {
  .nav a:not(.nav-cta) { display: none; }
}

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 0.78rem 1.4rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: var(--paper);
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
              border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

/* Primary is red so the accent has a job beyond decoration; hover deepens to
   ink rather than lightening, so the label never loses contrast mid-transition. */
.btn:hover { background: var(--ink); border-color: var(--ink); transform: translateY(-1px); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule-2); }
.btn--ghost:hover { background: var(--paper-2); color: var(--ink); border-color: var(--ink); }

/* On the dark band. Hover keeps ink text — ink on lifted red is 4.85:1; white
   on it would be only 3.4:1. */
.btn--light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--light:hover { background: var(--pop); border-color: var(--pop); color: var(--ink); }

/* Button labels never wrap. "Start a project" was breaking to two lines on
   phones, which turned a 45px pill into a 69px block. */
.btn { white-space: nowrap; }

.btn .arrow { transition: transform 0.3s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* --- Hero ----------------------------------------------------------------- */

.hero {
  padding-block: clamp(4rem, 11vh, 8.5rem) clamp(3.5rem, 8vh, 6rem);
  position: relative;
  overflow: hidden;
}

/* Off-canvas oversized mark, bled off the right edge. */
.hero__ghost {
  position: absolute;
  right: -14vw;
  top: 4%;
  width: min(62vw, 720px);
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}

.hero .shell { position: relative; z-index: 1; }

.hero__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
}

@media (min-width: 1000px) {
  .hero__grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.85fr); align-items: end; }
}

.hero h1 {
  font-size: clamp(2.35rem, 6.1vw, 5.05rem);
  margin-block: 1.6rem 0;
  max-width: 15ch;
}

.hero h1 em {
  font-style: italic;
  color: var(--accent);
}

.hero__lede {
  font-size: clamp(1.02rem, 1.35vw, 1.16rem);
  color: var(--ink-soft);
  max-width: 46ch;
  margin-top: 1.9rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.4rem;
}

.hero__aside {
  border-top: 1px solid var(--rule);
  padding-top: 1.5rem;
}

.hero__aside dl {
  margin: 0;
  display: grid;
  gap: 1.35rem;
}

.hero__aside dt {
  font-family: var(--serif);
  font-size: 2.2rem;
  line-height: 1;
  /* Georgia's figures are old-style — 0 sits at x-height, so these read as
     editorial numerals rather than as a tally. That is deliberate. */
  color: var(--ink);
}

.hero__aside dd {
  margin: 0.4rem 0 0;
  font-size: 0.88rem;
  color: var(--muted);
  max-width: 30ch;
}

/* --- Dark band ------------------------------------------------------------ */

.band {
  background: var(--ink);
  color: var(--paper);
}

.band .eyebrow { color: #8B939E; }

.statement {
  padding-block: clamp(3.5rem, 9vh, 6.5rem);
}

/* :not(.eyebrow) — otherwise this rule captured the section's own eyebrow and
   rendered "THE PROBLEM WITH GENERIC AI" as 45px serif caps. */
.statement p:not(.eyebrow) {
  font-family: var(--serif);
  font-size: clamp(1.38rem, 2.95vw, 2.45rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  max-width: 24ch;
  margin-top: 1.6rem;
  text-wrap: balance;
}

.statement p b { font-weight: 400; color: var(--pop); font-style: italic; }
.statement .eyebrow { margin-bottom: 0; }

/* --- Section scaffolding -------------------------------------------------- */

.section { padding-block: clamp(4rem, 10vh, 7.5rem); }

.section__head {
  display: grid;
  gap: 1.2rem;
  padding-bottom: clamp(2.2rem, 5vh, 3.5rem);
}

@media (min-width: 900px) {
  .section__head { grid-template-columns: 12rem minmax(0, 1fr); gap: 3rem; align-items: start; }
}

.section__head h2 {
  font-size: clamp(1.72rem, 3.3vw, 2.65rem);
  max-width: 20ch;
}

.section__head .note {
  margin-top: 1.1rem;
  color: var(--ink-soft);
  max-width: 52ch;
  font-size: 0.98rem;
}

/* --- Capabilities --------------------------------------------------------- */

.cards {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
}

@media (min-width: 820px) { .cards { grid-template-columns: 1fr 1fr; } }

.card {
  padding: clamp(1.9rem, 3.2vw, 2.9rem) 0;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  gap: 0 1.2rem;
  position: relative;
  transition: background 0.4s var(--ease);
}

@media (min-width: 820px) {
  .card { padding-inline: clamp(1.4rem, 2.4vw, 2.4rem); }
  .card:nth-child(odd) { border-right: 1px solid var(--rule); padding-left: 0; }
  .card:nth-child(even) { padding-right: 0; }
}

.card:hover { background: var(--paper-2); }

.card__num {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--pop-deep);
  padding-top: 0.62rem;   /* mono sits smaller than the old serif — nudged to stay on the h3's cap line */
  font-variant-numeric: tabular-nums;
}

.card h3 { font-size: clamp(1.18rem, 1.85vw, 1.5rem); }

.card p {
  margin-top: 0.85rem;
  color: var(--ink-soft);
  font-size: 0.96rem;
  max-width: 44ch;
}

.card ul {
  margin: 1.15rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.card li {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
}

/* --- Process -------------------------------------------------------------- */

.steps {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  counter-reset: step;
}

@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); } }

.step { border-top: 2px solid var(--ink); padding-top: 1.4rem; }

.step__k {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--pop-deep);
  font-weight: 400;
}

.step h3 { font-size: clamp(1.22rem, 1.92vw, 1.52rem); margin-top: 0.9rem; }

/* :not(.step__k) — .step p was out-specifying .step__k and overwriting its
   size and color, so the "Step one" labels rendered as ordinary body copy. */
.step p:not(.step__k) { margin-top: 0.8rem; color: var(--ink-soft); font-size: 0.95rem; }

/* --- Principles ----------------------------------------------------------- */

.principles { display: grid; gap: 0; }

.principle {
  display: grid;
  gap: 0.5rem 3rem;
  padding-block: clamp(1.5rem, 3vw, 2.2rem);
  border-bottom: 1px solid var(--rule);
}

.principles .principle:first-child { border-top: 1px solid var(--rule); }

@media (min-width: 860px) {
  .principle { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: baseline; }
}

.principle h3 { font-size: clamp(1.14rem, 1.75vw, 1.4rem); }
.principle p { color: var(--ink-soft); font-size: 0.96rem; max-width: 54ch; }

/* --- CTA ------------------------------------------------------------------ */

.cta { padding-block: clamp(4rem, 10vh, 7rem); }

.cta__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); }

@media (min-width: 940px) {
  .cta__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr); align-items: start; }
}

.cta h2 {
  font-size: clamp(1.88rem, 4.35vw, 3.35rem);
  max-width: 16ch;
  margin-top: 1.4rem;
}

.cta h2 em { font-style: italic; color: var(--pop); }

/* :not(.eyebrow) — same trap as .statement p and .step p. */
.cta p:not(.eyebrow) { margin-top: 1.5rem; color: #A6AEB9; max-width: 44ch; }

.contact-list { margin: 0; display: grid; gap: 1.4rem; }

.contact-list dt {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #838B96;
}

.contact-list dd {
  margin: 0.4rem 0 0;
  font-family: var(--serif);
  font-size: 1.12rem;
  line-height: 1.45;
}

.contact-list a { text-decoration: none; border-bottom: 1px solid #3A424D; transition: border-color 0.3s var(--ease); display: inline-block; padding-block: 0.25rem; }
.contact-list a:hover { border-color: var(--pop); }

.cta .btn { margin-top: 2.2rem; }

/* --- Footer --------------------------------------------------------------- */

.site-footer { border-top: 1px solid var(--rule); padding-block: 3rem 2.4rem; }

.footer__grid {
  display: grid;
  gap: 2rem;
  padding-bottom: 2.4rem;
}

@media (min-width: 780px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }

.footer__grid h4 {
  margin: 0 0 0.9rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.footer__grid address, .footer__grid p { font-style: normal; font-size: 0.9rem; color: var(--ink-soft); }

.footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
/* inline-block + padding so these are a real tap target on a phone, not an 18px line. */
/* 0.62rem clears the 44px touch floor. Padding rather than a pseudo-element
   here: these sit 0.15rem apart, so an expanded overlay would overlap the
   neighbouring link's target. */
.footer__links a { font-size: 0.9rem; text-decoration: none; color: var(--ink-soft); display: inline-block; padding-block: 0.62rem; }
.footer__links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.footer__base {
  border-top: 1px solid var(--rule);
  padding-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  color: var(--muted);
}

/* --- Motion --------------------------------------------------------------- */

.reveal { opacity: 0; transform: translateY(18px); }

.reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  transition-delay: var(--d, 0ms);
}

.load > * { opacity: 0; animation: rise 0.95s var(--ease) forwards; }
.load > *:nth-child(1) { animation-delay: 0.05s; }
.load > *:nth-child(2) { animation-delay: 0.16s; }
.load > *:nth-child(3) { animation-delay: 0.27s; }
.load > *:nth-child(4) { animation-delay: 0.38s; }

@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.in, .load > * { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.band :focus-visible { outline-color: var(--pop); }

/* --- Contact page ----------------------------------------------------------
   A form is the one place on this site where the user can fail, so it gets
   more affordance than the rest: real borders (not hairlines), a visible
   focus ring, and errors that sit next to the field they belong to.        */

.contact-page { padding-block: clamp(2.5rem, 7vh, 4.5rem) clamp(3rem, 8vh, 5rem); }

.contact-grid { display: grid; gap: clamp(2.2rem, 5vw, 4.5rem); }

@media (min-width: 940px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; }
}

.contact-intro h1 { font-size: clamp(1.95rem, 4.5vw, 3.1rem); margin-top: 1.2rem; max-width: 14ch; }
.contact-intro h1 em { font-style: italic; color: var(--accent); }
.contact-intro > p { margin-top: 1.4rem; color: var(--ink-soft); max-width: 42ch; }

.contact-direct { margin-top: clamp(2rem, 4vw, 2.8rem); border-top: 1px solid var(--rule); padding-top: 1.5rem; }
.contact-direct dl { margin: 0; display: grid; gap: 1.15rem; }
.contact-direct dt {
  font-family: var(--mono);
  font-size: 0.68rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted);
}
.contact-direct dd { margin: 0.35rem 0 0; font-family: var(--serif); font-size: 1.06rem; line-height: 1.5; }
.contact-direct a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule-2); }
.contact-direct a:hover { border-color: var(--accent); color: var(--accent); }

/* The form itself */

.form { display: grid; gap: 1.25rem; }

.form__row { display: grid; gap: 1.25rem; }
@media (min-width: 620px) { .form__row { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: 0.45rem; }

.field label {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.field .optional { color: var(--muted); font-weight: 400; letter-spacing: 0.06em; text-transform: none; }

.field input,
.field select,
.field textarea {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: 3px;
  padding: 0.8rem 0.9rem;
  width: 100%;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.field textarea { min-height: 9.5rem; resize: vertical; line-height: 1.6; }

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23666D76' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 12px;
  padding-right: 2.4rem;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Invalid state is driven by a class, not :invalid — :invalid matches empty
   required fields before the user has typed anything, which shouts at people
   for not having filled in a form they just opened. */
.field.is-error input,
.field.is-error select,
.field.is-error textarea { border-color: var(--pop-deep); }

.field__error { font-size: 0.82rem; color: var(--pop-deep); min-height: 0; }
.field:not(.is-error) .field__error { display: none; }

.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 0.4rem; }
.form__note { font-size: 0.82rem; color: var(--muted); max-width: 40ch; }

.form button[type="submit"] { border: 0; cursor: pointer; font-size: 0.9rem; }
.form button[type="submit"][disabled] { opacity: 0.55; cursor: progress; }

/* Honeypot — hidden from people, visible to naive bots. Not display:none,
   which some bots specifically skip. */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* Result banners */

.notice-box {
  border: 1px solid var(--rule-2);
  border-left: 3px solid var(--accent);
  background: var(--paper-2);
  padding: 1.1rem 1.25rem;
  border-radius: 3px;
  display: grid;
  gap: 0.4rem;
}

.notice-box h2 { font-size: 1.35rem; }
.notice-box p { font-size: 0.94rem; color: var(--ink-soft); }
.notice-box a { color: var(--accent); }
.notice-box--bad { border-left-color: var(--pop-deep); }

/* The contact page's result banners are toggled with the `hidden` attribute.
   Any later `display` declaration would out-rank the UA stylesheet's rule, so
   this pins it. */
[hidden] { display: none !important; }


/* --- Touch targets --------------------------------------------------------
   Underlined inline links were 14–35px tall — under the 44px floor every
   mobile platform asks for. A centred overlay grows the hit area to exactly
   44px without moving the text or the underline by a single pixel. These
   links all sit in wide-gapped grids, so no two overlays can overlap. */
.contact-list a,
.contact-direct a,
.footer__base a { position: relative; }

.contact-list a::after,
.contact-direct a::after,
.footer__base a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  height: 44px;
}

/* The logo lands at 43px on its own — one pixel short. */
.brand { min-height: 44px; }

/* --- Small screens --------------------------------------------------------
   Monospace furniture is set small and wide on desktop, which reads as
   annotation. Below 700px that same treatment lands at 10.9–11.2px, under the
   12px legibility floor, so the labels step up and their tracking comes in —
   wide tracking is what costs the most width on a narrow screen. The ceiling is
   820px rather than a phone width because iPad portrait (768) is a touch device
   read at arm's length, where 10.9px labels are just as hard to parse. */
@media (max-width: 820px) {
  .eyebrow,
  .contact-list dt,
  .contact-direct dt,
  .footer__grid h4 { font-size: 0.75rem; letter-spacing: 0.1em; }

  .card li,
  .card__num,
  .step__k { font-size: 0.76rem; letter-spacing: 0.02em; }

  .footer__base { font-size: 0.78rem; }
}

/* Inline links inside a sentence — e.g. the address on /thanks — are left at
   their text height on purpose. Growing them to 44px would overlap the lines
   above and below; WCAG 2.5.8 exempts targets that sit in a block of text. */

/* --- Header at phone widths -----------------------------------------------
   With both labels held on one line the header needs the room budgeted. The
   CTA tightens first; only below 360px — where the wordmark and a one-line
   button genuinely cannot coexist — does the wordmark drop, leaving the mark,
   which is the more distinctive half of the lockup anyway. */
@media (max-width: 480px) {
  .nav .nav-cta { padding-inline: 0.95rem; font-size: 0.86rem; }
}

@media (max-width: 359px) {
  .brand-name { display: none; }
}

/* The header row is the only place on the page where content competes for
   width. At two widths it was winning against its own gutter — the CTA sat
   10px from the edge while the hero below sat at 20px, so the right margin
   visibly stepped. Tightening the row's own spacing keeps every element on
   the page sharing one right edge. */
@media (max-width: 480px) {
  .site-header .shell { gap: 0.6rem; }
  .brand-name { font-size: 0.98rem; }
}