/* ============================================================
   FirstFound :: visual system
   ------------------------------------------------------------
   Art direction: editorial, not SaaS. Three rules hold it
   together and most of the file follows from them.

   1. HAIRLINES, NOT CARDS. Structure comes from 1px rules and
      negative space. Boxes are reserved for the two moments
      that genuinely are interfaces: the AI canvas and the
      index report. Everything else sits on open page.

   2. ONE ACCENT, USED AS A HIGHLIGHT. Brass, never blue. It
      marks an entity the way a highlighter marks a name in a
      document, which is literally what we sell.

   3. TYPE CARRIES THE PAGE. Archivo set very large and very
      tight for statements, Instrument Serif italic for
      editorial asides, Inter for reading, IBM Plex Mono for
      index marks ([01], coordinates, labels).

   Theme is set on <html data-theme> by the inline script in
   index.html before first paint. Dark redefines only tokens.
   ============================================================ */

:root {
  color-scheme: light;

  --paper: #f4f2ed;
  --paper-2: #ebe8e1;
  --raised: #faf9f6;

  --ink: #131210;
  --ink-2: #4a4740;
  --muted: #8c887e;

  --hair: rgba(19, 18, 16, 0.13);
  --hair-2: rgba(19, 18, 16, 0.26);

  --accent: #8a6a2f;
  --accent-2: #a37d38;
  --accent-ink: #faf9f6;
  --accent-wash: rgba(138, 106, 47, 0.09);
  --accent-hair: rgba(138, 106, 47, 0.32);

  --good: #4a6b3f;
  --good-wash: rgba(74, 107, 63, 0.1);
  --bad: #8f3f2a;
  --bad-wash: rgba(143, 63, 42, 0.09);

  --invert-bg: #131210;
  --invert-ink: #f4f2ed;
  --invert-2: rgba(244, 242, 237, 0.62);
  --invert-hair: rgba(244, 242, 237, 0.16);

  --font-display: "Archivo", system-ui, sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --shell: 1340px;
  --pad: clamp(20px, 5vw, 76px);
  --band-y: clamp(84px, 11vw, 180px);

  --ease: cubic-bezier(0.16, 0.84, 0.28, 1);
  --slow: 0.9s;
}

[data-theme="dark"] {
  color-scheme: dark;

  --paper: #0d0d0b;
  --paper-2: #111110;
  --raised: #171714;

  --ink: #f2f0ea;
  --ink-2: #a8a49a;
  --muted: #76736b;

  --hair: rgba(242, 240, 234, 0.14);
  --hair-2: rgba(242, 240, 234, 0.28);

  --accent: #d6a95c;
  --accent-2: #e8c083;
  --accent-ink: #14130f;
  --accent-wash: rgba(214, 169, 92, 0.11);
  --accent-hair: rgba(214, 169, 92, 0.36);

  --good: #8fbf7a;
  --good-wash: rgba(143, 191, 122, 0.12);
  --bad: #dd8a68;
  --bad-wash: rgba(221, 138, 104, 0.12);

  --invert-bg: #f2f0ea;
  --invert-ink: #0d0d0b;
  --invert-2: rgba(13, 13, 11, 0.66);
  --invert-hair: rgba(13, 13, 11, 0.18);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.62;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}

body.nav-open { overflow: hidden; }

@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;
  }
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: 16px; top: -70px;
  z-index: 200;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 20px;
  font-size: 0.86rem;
  font-weight: 500;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 16px; text-decoration: none; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 4px;
}

/* ---------- type ---------- */

h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }

/* The index mark. Used for every label, number and coordinate on the
   site, which is what makes the citation language feel deliberate. */
.idx {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(3rem, 7.4vw, 6.9rem);
  line-height: 0.88;
  letter-spacing: -0.052em;
  color: var(--ink);
}

.display-sm {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--ink);
}

.band-mark {
  display: block;
  margin-bottom: clamp(26px, 3.4vw, 46px);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hair);
  color: var(--accent);
}

/* ---------- shell ---------- */

.hero, .shift, .geo, .index, .services, .method, .packages, .about, .contact {
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: var(--pad);
}

.shift, .geo, .index, .services, .method, .packages, .about, .contact {
  padding-block: var(--band-y);
}

/* ---------- controls ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0.82em 1.5em;
  border: 1px solid var(--hair-2);
  border-radius: 100px;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease),
              border-color 0.35s var(--ease), opacity 0.35s var(--ease);
}
.pill:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); text-decoration: none; }

.pill-solid {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.pill-solid:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.pill-solid:disabled {
  background: transparent;
  color: var(--muted);
  border-color: var(--hair);
  cursor: not-allowed;
}

/* Hover shifts the word a hair to the right and draws the rule under it:
   movement without anything bouncing. */
.underline-link {
  position: relative;
  font-size: 0.92rem;
  color: var(--ink-2);
  padding-bottom: 4px;
  transition: color 0.35s var(--ease);
}
.underline-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0.999);
  transform-origin: left;
  opacity: 0.3;
  transition: opacity 0.35s var(--ease);
}
.underline-link:hover { color: var(--ink); text-decoration: none; }
.underline-link:hover::after { opacity: 1; }

.ghost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  padding: 0;
  border: 1px solid var(--hair);
  border-radius: 100px;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.ghost-btn:hover { color: var(--ink); border-color: var(--hair-2); }
.ghost-btn svg { width: 15px; height: 15px; }

/* ---------- masthead ---------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: 1px solid transparent;
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease),
              backdrop-filter 0.4s var(--ease);
}
/* Only becomes a surface once you have left the hero. */
.masthead.is-stuck {
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  border-bottom-color: var(--hair);
}

.masthead-inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 18px var(--pad);
  display: flex;
  align-items: center;
  gap: 22px;
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
  color: var(--ink);
}
.mark:hover { text-decoration: none; }
.mark-glyph { display: inline-flex; width: 19px; height: 19px; color: var(--accent); }
.mark-glyph svg { width: 100%; height: 100%; }
.mark-word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: -0.028em;
}

.nav {
  display: flex;
  gap: 28px;
  margin-left: auto;
}
.nav a {
  position: relative;
  font-size: 0.84rem;
  color: var(--ink-2);
  padding: 3px 0;
  transition: color 0.3s var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease);
}
.nav a:hover { color: var(--ink); text-decoration: none; }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }

.masthead-end {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.lang { display: inline-flex; align-items: center; gap: 5px; }
.lang-btn {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  padding: 4px 2px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.3s var(--ease);
}
.lang-btn:hover { color: var(--ink); }
.lang-btn[aria-pressed="true"] { color: var(--accent); }
.lang-sep { color: var(--hair-2); font-size: 0.7rem; }

.theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

.menu-btn { display: none; }

.drawer {
  display: none;
  flex-direction: column;
  padding: 4px var(--pad) 30px;
  background: var(--paper);
  border-top: 1px solid var(--hair);
}
.drawer a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 19px 0;
  border-bottom: 1px solid var(--hair);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.drawer a:hover { text-decoration: none; color: var(--accent); }
.drawer-num {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.drawer-cta {
  justify-content: center;
  margin-top: 26px;
  border-bottom: 0 !important;
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  color: var(--paper) !important;
  padding: 1em 1.6em !important;
}

@media (max-width: 1000px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; }
  .masthead-end .pill { display: none; }
  .drawer:not([hidden]) { display: flex; }
}

/* ---------- hero ----------
   Asymmetric on purpose: the statement occupies the left seven
   columns, the canvas drops below and to the right and overlaps the
   rule, so the composition reads as layered rather than as two
   columns sitting politely side by side. */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(16px, 2.4vw, 32px);
  align-content: center;
  min-height: calc(100svh - 74px);
  padding-top: clamp(40px, 6vh, 72px);
  padding-bottom: clamp(44px, 6vw, 80px);
}

.hero-rule {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: start;
  height: 1px;
  background: var(--hair);
  margin-top: clamp(28px, 4vw, 56px);
}

.hero-lede {
  grid-column: 1 / span 7;
  grid-row: 1;
}

.hero .display { margin-bottom: clamp(26px, 3.2vw, 44px); }
/* Scoped to the lede's own mark. `.hero .idx` would also hit every index
   mark inside the canvas, including the 01/02/03 on the source chips. */
.hero-lede > .idx { display: block; margin-bottom: clamp(26px, 3.6vw, 50px); color: var(--accent); }

.hero-sub {
  font-size: clamp(1.02rem, 1.25vw, 1.16rem);
  line-height: 1.58;
  color: var(--ink-2);
  max-width: 44ch;
}

.hero-act {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: clamp(30px, 3.4vw, 44px);
  flex-wrap: wrap;
}

.hero-coords {
  grid-column: 1 / span 6;
  grid-row: 3;
  margin-top: clamp(20px, 2.4vw, 34px);
}

/* ---------- the AI canvas ----------
   One of only two real "interface" objects on the page. */

.canvas {
  grid-column: 8 / -1;
  grid-row: 1;
  align-self: end;
  margin: 0;
  padding: clamp(20px, 2vw, 28px);
  background: var(--raised);
  border: 1px solid var(--hair);
  box-shadow: 0 1px 1px rgba(19, 18, 16, 0.02), 0 18px 50px -28px rgba(19, 18, 16, 0.26);
}
[data-theme="dark"] .canvas { box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.8); }

.canvas-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--hair);
}
.canvas-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.canvas-label { margin-left: auto; }

.canvas-row { display: grid; grid-template-columns: 84px 1fr; gap: 16px; align-items: start; }
.canvas-row + .canvas-row { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--hair); }
.canvas-tag { padding-top: 3px; }

.canvas-q p {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--ink-2);
}

.canvas-a p { font-size: 0.97rem; line-height: 1.72; color: var(--ink); }

/* The brand highlight. The wash sweeps in from the left, the way a
   highlighter is drawn across a word. */
.entity {
  position: relative;
  background: none;
  color: var(--accent);
  font-weight: 500;
  padding: 0.06em 0.26em;
  margin: 0 -0.06em;
}
.entity::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent-wash);
  border-bottom: 1px solid var(--accent-hair);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease) 0.15s;
}
.canvas.lit .entity::before { transform: scaleX(1); }

/* align-content keeps wrapped lines from stretching to fill the row. */
.srcs {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px;
}
.srcs li {
  display: inline-flex;
  align-items: baseline;
  align-self: flex-start;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid var(--hair);
  font-size: 0.73rem;
  white-space: nowrap;
  color: var(--ink-2);
}
.srcs .idx { font-size: 0.6rem; color: var(--accent); }

.canvas-cap {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--hair);
  font-size: 0.74rem;
  color: var(--muted);
}

/* Staged reveal, driven by app.js. Reduced motion never gets .staged,
   so everything is simply visible from the start. */
.canvas.staged [data-stage] {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.canvas.staged [data-stage].on { opacity: 1; transform: none; }

@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-lede, .canvas, .hero-coords, .hero-rule { grid-column: 1 / -1; grid-row: auto; }
  .hero-rule { margin: clamp(30px, 6vw, 48px) 0 0; }
  .canvas { margin-top: clamp(30px, 6vw, 48px); align-self: auto; }
  .hero-coords { margin-top: clamp(26px, 5vw, 40px); }
}

/* Phone: the 84px label column took a third of the canvas, so the labels
   move above their content and the answer gets the full measure. */
@media (max-width: 620px) {
  .canvas-row { grid-template-columns: 1fr; gap: 9px; }
  .canvas-tag { padding-top: 0; }
}

/* ---------- the shift ---------- */

.shift { border-top: 1px solid var(--hair); }

.shift-type {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 48px);
  flex-wrap: wrap;
  margin-bottom: clamp(44px, 5.5vw, 84px);
}

.shift-word {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 10vw, 8.6rem);
  font-weight: 600;
  line-height: 0.86;
  letter-spacing: -0.05em;
}
.shift-was { color: var(--muted); }
.shift-is { color: var(--ink); }

.shift-arrow {
  flex: 1 1 90px;
  min-width: 90px;
  max-width: 220px;
  color: var(--accent);
}
.shift-arrow svg { width: 100%; height: 22px; display: block; }
/* The rule draws itself once the section arrives. */
.shift-arrow path {
  stroke-dasharray: 130;
  stroke-dashoffset: 130;
  transition: stroke-dashoffset 1.1s var(--ease) 0.1s;
}
.shift.is-visible .shift-arrow path { stroke-dashoffset: 0; }

.shift-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 72px);
  padding-top: clamp(26px, 3vw, 40px);
  border-top: 1px solid var(--hair);
}
.shift-col .idx { display: block; margin-bottom: 20px; }
.shift-col-now .idx { color: var(--accent); }
.shift-col ul { list-style: none; margin: 0; padding: 0; }
.shift-col li {
  padding: 13px 0;
  border-bottom: 1px solid var(--hair);
  font-size: 0.98rem;
  color: var(--ink-2);
}
.shift-col-now li { color: var(--ink); }

.pull {
  margin: clamp(48px, 6vw, 90px) 0 0;
  max-width: 24ch;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.6rem, 3.4vw, 2.9rem);
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--ink);
}

@media (max-width: 760px) {
  .shift-cols { grid-template-columns: 1fr; gap: 32px; }
  .pull { max-width: none; }
}

/* ---------- what GEO is ---------- */

.geo { border-top: 1px solid var(--hair); }

/* The measure has to live on the elements that carry the display size:
   `ch` on the wrapper would resolve against 16px body text and squeeze
   these lines to a quarter of their intended width. */
.statement { margin-bottom: clamp(30px, 3.6vw, 48px); }
.statement-a, .statement-b { max-width: 20ch; }
.statement-a {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.7rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--muted);
}
.statement-b {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.7rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin-top: 0.22em;
}

.geo-body {
  max-width: 54ch;
  font-size: 1.02rem;
  color: var(--ink-2);
  margin-bottom: clamp(52px, 6vw, 90px);
}

/* Signals resolving into one answer. */
.wiring {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(90px, 14vw, 220px) minmax(0, 0.8fr);
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
}

.wiring-label { display: block; margin-bottom: 18px; }

.signals { list-style: none; margin: 0; padding: 0; }
.signals li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--hair);
  font-size: 0.98rem;
  color: var(--ink);
  transition: color 0.3s var(--ease), padding-left 0.4s var(--ease);
}
.signals li:hover { color: var(--accent); padding-left: 6px; }
.signals .idx { color: var(--accent); font-size: 0.62rem; }

.wiring-mesh { color: var(--hair-2); align-self: stretch; display: flex; }
.wiring-mesh svg { width: 100%; height: 100%; min-height: 220px; }
.wiring-mesh path {
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  transition: stroke-dashoffset 1.4s var(--ease);
}
.geo.is-visible .wiring-mesh path { stroke-dashoffset: 0; }
.wiring-mesh path:nth-child(2) { transition-delay: 0.08s; }
.wiring-mesh path:nth-child(3) { transition-delay: 0.16s; }
.wiring-mesh path:nth-child(4) { transition-delay: 0.24s; }
.wiring-mesh path:nth-child(5) { transition-delay: 0.32s; }
.wiring-mesh path:nth-child(6) { transition-delay: 0.4s; }

.node {
  display: inline-flex;
  align-items: center;
  padding: 14px 22px;
  border: 1px solid var(--accent-hair);
  background: var(--accent-wash);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}

@media (max-width: 860px) {
  .wiring { grid-template-columns: 1fr; gap: 26px; }
  .wiring-mesh { display: none; }
  .wiring-out { padding-top: 22px; border-top: 1px solid var(--hair); }
}

/* ---------- AI visibility index ---------- */

.index { border-top: 1px solid var(--hair); }

.index-head { max-width: 46ch; margin-bottom: clamp(40px, 5vw, 70px); }
.index-head .display-sm { margin-bottom: 0.5em; }
.index-lead { color: var(--ink-2); font-size: 1.02rem; }

/* The second of the two interface objects. Reads as a report, so it
   gets a surface, a header bar and tabular figures. */
.report {
  background: var(--raised);
  border: 1px solid var(--hair);
  padding: clamp(22px, 2.6vw, 38px);
  margin-bottom: clamp(52px, 6vw, 92px);
}

.report-top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 20px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--hair);
}
.report-top .idx:first-child { color: var(--ink); }
.report-flag { color: var(--accent); }

.meters { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }

.meter {
  display: grid;
  grid-template-columns: minmax(130px, 1.1fr) minmax(0, 3fr) auto;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
}
.meter-name { font-size: 0.92rem; color: var(--ink-2); }
.meter-track {
  position: relative;
  height: 2px;
  background: var(--hair);
}
.meter-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--accent);
  transition: width 1.5s var(--ease);
}
.report.is-visible .meter-fill { width: calc(var(--v) * 1%); }
.meter-val { color: var(--ink); font-size: 0.74rem; min-width: 2.2em; text-align: right; }

@media (max-width: 620px) {
  .meter { grid-template-columns: 1fr auto; gap: 8px 14px; }
  .meter-track { grid-column: 1 / -1; order: 3; }
}

/* ---------- the scan ---------- */

.scan-head { max-width: 46ch; margin-bottom: clamp(32px, 4vw, 52px); }
.scan-title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  margin-bottom: 0.5em;
}
.scan-head p { color: var(--ink-2); }

.step-block {
  padding: clamp(26px, 3vw, 40px) 0;
  border-top: 1px solid var(--hair);
}
.step-block > .idx { display: block; color: var(--accent); margin-bottom: 14px; }
.step-block h4 {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  font-weight: 500;
  letter-spacing: -0.028em;
  margin-bottom: 20px;
}

.step-block.locked { opacity: 0.4; transition: opacity 0.6s var(--ease); }
.step-block.locked.unlocked { opacity: 1; }

.field-row { display: flex; gap: 10px; flex-wrap: wrap; }
.field-row input {
  flex: 1;
  min-width: 190px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.86em 0;
  border: 0;
  border-bottom: 1px solid var(--hair-2);
  background: transparent;
  color: var(--ink);
  transition: border-color 0.3s var(--ease);
}
.field-row input::placeholder { color: var(--muted); }
.field-row input:focus { outline: none; border-bottom-color: var(--accent); }
.field-row-3 input { flex-basis: calc(33.333% - 7px); }

.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; opacity: 0;
}

.hint { margin-top: 14px; font-size: 0.86rem; color: var(--muted); max-width: 60ch; }
.hint.is-error { color: var(--bad); }
.scan-note { margin-top: 26px; font-size: 0.86rem; color: var(--muted); max-width: 62ch; }

.result { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--hair); }

.score { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-bottom: 26px; }

@property --pct {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

.score-dial {
  --pct: 0;
  --dial: var(--accent);
  position: relative;
  width: 84px; height: 84px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--dial) calc(var(--pct) * 1%), var(--hair) 0);
  transition: --pct 1.1s var(--ease);
}
.score-dial::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--paper);
}
.score-dial.is-good { --dial: var(--good); }
.score-dial.is-mid  { --dial: var(--accent); }
.score-dial.is-bad  { --dial: var(--bad); }
.score-num {
  position: relative;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.score-meta { display: flex; flex-direction: column; gap: 5px; }
.score-meta span:first-child { font-size: 1rem; color: var(--ink); }

.checks { list-style: none; margin: 0; padding: 0; }
.checks li {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 13px 0;
  border-bottom: 1px solid var(--hair);
  font-size: 0.93rem;
  color: var(--ink-2);
}
.checks li.ok .check-icon { color: var(--good); }
.checks li.fail .check-icon { color: var(--bad); }
.check-icon { font-family: var(--font-mono); flex-shrink: 0; line-height: 1.6; }

.verdict {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1.6;
  padding: 15px 18px;
  border-left: 2px solid var(--hair-2);
  margin-bottom: 16px;
  color: var(--ink);
}
.verdict.ok { border-left-color: var(--good); background: var(--good-wash); }
.verdict.fail { border-left-color: var(--bad); background: var(--bad-wash); }
.verdict-body {
  font-size: 0.92rem;
  color: var(--ink-2);
  white-space: pre-wrap;
  padding: 16px 18px;
  border: 1px solid var(--hair);
}

.scan-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid var(--hair);
}
.scan-cta p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  color: var(--ink);
}

@media (max-width: 680px) {
  .field-row input, .field-row .pill { flex-basis: 100%; width: 100%; }
}

/* ---------- services as editorial rows ---------- */

.services { border-top: 1px solid var(--hair); }
.services-head { margin-bottom: clamp(36px, 4.5vw, 64px); }

.rows { list-style: none; margin: 0; padding: 0; }

/* Each service is a full-width row, not a card. The number sits in its
   own column and the detail line is held back until hover, so the
   default state stays quiet. */
.row {
  display: grid;
  grid-template-columns: 74px minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(14px, 2.4vw, 40px);
  align-items: baseline;
  padding: clamp(28px, 3.4vw, 46px) 0;
  border-top: 1px solid var(--hair);
  transition: background-color 0.5s var(--ease);
}
.row:last-child { border-bottom: 1px solid var(--hair); }
.row-num { color: var(--accent); align-self: start; padding-top: 0.5em; }

.row-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.038em;
  color: var(--ink);
  transition: transform 0.5s var(--ease);
}
.row:hover .row-title { transform: translateX(10px); }
.row:hover { background: var(--accent-wash); }

.row-body { grid-column: 3; font-size: 1rem; color: var(--ink-2); }

/* Always present, just quiet. Hiding it until hover reserved the space
   anyway, which left a dead gap under every row. */
.row-detail {
  grid-column: 3;
  margin-top: 0.7em;
  font-size: 0.9rem;
  color: var(--muted);
  transition: color 0.45s var(--ease);
}
.row:hover .row-detail { color: var(--ink-2); }

@media (max-width: 860px) {
  .row { grid-template-columns: 50px 1fr; }
  .row-body, .row-detail { grid-column: 2; }
  .row:hover .row-title { transform: none; }
}

/* ---------- method ---------- */

.method {
  border-top: 1px solid var(--hair);
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(30px, 5vw, 80px);
}
.method-aside { position: sticky; top: 120px; align-self: start; }

.phases { list-style: none; margin: 0; padding: 0; }
.phase {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 18px;
  padding: clamp(22px, 2.6vw, 34px) 0;
  border-top: 1px solid var(--hair);
}
.phase:last-child { border-bottom: 1px solid var(--hair); }
.phase .idx { color: var(--accent); padding-top: 0.35em; }
.phase h3 {
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  margin-bottom: 0.45em;
}
.phase p { grid-column: 2; font-size: 0.96rem; color: var(--ink-2); }

@media (max-width: 900px) {
  .method { grid-template-columns: 1fr; }
  .method-aside { position: static; }
}

/* ---------- packages ---------- */

.packages { border-top: 1px solid var(--hair); }
.packages-head { max-width: 50ch; margin-bottom: clamp(40px, 5vw, 70px); }
.packages-head .display-sm { margin-bottom: 0.5em; }
.packages-head p { color: var(--ink-2); }

.setup {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(26px, 4vw, 70px);
  padding: clamp(30px, 3.6vw, 48px) 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  margin-bottom: clamp(44px, 5vw, 76px);
}
.setup-aside .idx { display: block; color: var(--accent); margin-bottom: 14px; }
.setup-aside h3 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 500;
  letter-spacing: -0.032em;
  margin-bottom: 0.6em;
}
.setup-line { color: var(--ink-2); font-size: 0.98rem; margin-bottom: 1.4em; }
.setup-foot { display: block; color: var(--muted); }

.setup-list { list-style: none; margin: 0; padding: 0; }
.setup-list li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hair);
  font-size: 0.93rem;
  color: var(--ink-2);
}
.setup-list li:first-child { border-top: 1px solid var(--hair); }
.setup-list .idx { color: var(--accent); font-size: 0.62rem; padding-top: 0.3em; }

.tiers-head {
  display: flex;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: clamp(24px, 3vw, 36px);
}
.tiers-head .idx { color: var(--accent); }
.tiers-head p { color: var(--ink-2); }

.tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--hair);
}
/* Columns divided by rules rather than boxed as three cards. */
.tier {
  position: relative;
  padding: clamp(26px, 3vw, 38px) clamp(18px, 2.2vw, 30px);
  border-right: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.tier:first-child { padding-left: 0; }
.tier:last-child { border-right: 0; padding-right: 0; }
.tier-lead { background: var(--accent-wash); }

/* Taken out of flow so the three tier names stay on one baseline;
   in flow it pushed the featured column down by its own height. */
.tier-flag {
  position: absolute;
  top: clamp(26px, 3vw, 38px);
  right: clamp(18px, 2.2vw, 30px);
  color: var(--accent);
}
.tier:not(.tier-lead) .tier-name { margin-top: 0; }
.tier-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: -0.032em;
  color: var(--ink);
}
.tier > .idx { display: block; margin-top: 4px; }
.tier-line { margin: 16px 0 18px; font-size: 0.96rem; color: var(--ink); }
.tier ul { list-style: none; margin: 0 0 20px; padding: 0; }
.tier li {
  position: relative;
  padding: 7px 0 7px 16px;
  font-size: 0.89rem;
  color: var(--ink-2);
}
.tier li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.06em;
  width: 5px; height: 1px;
  background: var(--accent);
}
.tier-foot {
  padding-top: 15px;
  border-top: 1px solid var(--hair);
  font-size: 0.84rem;
  color: var(--muted);
}

.packages-note { margin-top: clamp(28px, 3vw, 40px); font-size: 0.93rem; color: var(--ink-2); max-width: 62ch; }
.packages-note a { color: var(--accent); border-bottom: 1px solid var(--accent-hair); }
.packages-note a:hover { text-decoration: none; border-bottom-color: var(--accent); }

@media (max-width: 920px) {
  .setup { grid-template-columns: 1fr; }
  .tiers { grid-template-columns: 1fr; }
  .tier { border-right: 0; padding-left: 0; padding-right: 0; }
  .tier-lead { padding-left: clamp(18px, 4vw, 26px); padding-right: clamp(18px, 4vw, 26px); }
}

/* ---------- about ---------- */

.about { border-top: 1px solid var(--hair); }

.about-statement {
  max-width: 17ch;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 6vw, 5rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.045em;
  color: var(--ink);
  margin-bottom: clamp(28px, 3.4vw, 46px);
}

.about-body {
  max-width: 52ch;
  font-size: 1.04rem;
  color: var(--ink-2);
  margin-bottom: clamp(48px, 6vw, 84px);
}

.creds {
  list-style: none;
  margin: 0 0 clamp(44px, 5vw, 74px);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--hair);
}
.creds li {
  padding: clamp(22px, 2.6vw, 34px) clamp(16px, 1.8vw, 26px) clamp(22px, 2.6vw, 34px) 0;
  border-right: 1px solid var(--hair);
}
.creds li:last-child { border-right: 0; }
.creds .idx { display: block; color: var(--accent); margin-bottom: 16px; }
.creds h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.024em;
  margin-bottom: 0.5em;
}
.creds p { font-size: 0.9rem; color: var(--ink-2); }

.local {
  padding-top: clamp(26px, 3vw, 40px);
  border-top: 1px solid var(--hair);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.25rem, 2.6vw, 2.1rem);
  line-height: 1.26;
  color: var(--ink-2);
  max-width: 28ch;
}

@media (max-width: 860px) {
  .creds { grid-template-columns: repeat(2, 1fr); }
  .creds li:nth-child(2n) { border-right: 0; }
  .creds li:nth-child(n+3) { border-top: 1px solid var(--hair); }
}
@media (max-width: 520px) {
  .creds { grid-template-columns: 1fr; }
  .creds li { border-right: 0; }
  .creds li + li { border-top: 1px solid var(--hair); }
}

/* ---------- contact ---------- */

.contact {
  border-top: 1px solid var(--hair);
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(36px, 5vw, 86px);
  align-items: start;
}

.contact-statement {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.2vw, 3.3rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.042em;
  color: var(--ink);
  max-width: 13ch;
  margin-bottom: 0.6em;
}
.contact-lead { color: var(--ink-2); max-width: 40ch; }

.details { margin: clamp(34px, 4vw, 52px) 0 0; display: grid; gap: 1px; }
.details > div { padding: 16px 0; border-top: 1px solid var(--hair); }
.details > div:last-child { border-bottom: 1px solid var(--hair); }
.details dt { margin-bottom: 6px; }
.details dd { margin: 0; font-size: 1rem; color: var(--ink); }
.details a { border-bottom: 1px solid var(--hair); }
.details a:hover { text-decoration: none; border-bottom-color: var(--accent); color: var(--accent); }

.form { display: grid; gap: 22px; }
.field { display: grid; gap: 7px; }
.field label { font-size: 0.8rem; letter-spacing: 0.02em; color: var(--muted); }
.field input, .field textarea {
  font-family: var(--font-body);
  font-size: 0.97rem;
  padding: 0.7em 0;
  border: 0;
  border-bottom: 1px solid var(--hair-2);
  background: transparent;
  color: var(--ink);
  resize: vertical;
  transition: border-color 0.3s var(--ease);
}
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--accent); }
.form .pill { justify-self: start; }

.form-status { font-size: 0.86rem; color: var(--muted); min-height: 1.2em; }
.form-status.ok { color: var(--good); }
.form-status.fail { color: var(--bad); }

@media (max-width: 900px) {
  .contact { grid-template-columns: 1fr; }
  .contact-statement { max-width: none; }
  .form .pill { justify-self: stretch; }
}

/* ---------- footer ---------- */

.foot {
  border-top: 1px solid var(--hair);
  background: var(--paper-2);
  padding: clamp(56px, 7vw, 110px) var(--pad) 32px;
}
.foot > * { max-width: var(--shell); margin-inline: auto; }

/* The closing line is the largest type on the page after the hero. */
.foot-statement {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 11vw, 9rem);
  font-weight: 600;
  line-height: 0.88;
  letter-spacing: -0.052em;
  color: var(--ink);
  padding-bottom: clamp(44px, 5vw, 80px);
}

.foot-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 36px;
  padding: clamp(32px, 3.6vw, 48px) 0;
  border-top: 1px solid var(--hair);
}

.foot-brand { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.mark-foot { pointer-events: none; }

.foot-col { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.foot-col h2 { margin-bottom: 4px; }
.foot-col a {
  font-size: 0.9rem;
  color: var(--ink-2);
  transition: color 0.3s var(--ease);
}
.foot-col a:hover { color: var(--accent); text-decoration: none; }

.foot-base {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid var(--hair);
  font-size: 0.8rem;
  color: var(--muted);
}

@media (max-width: 760px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 30px 20px; }
  .foot-brand { grid-column: 1 / -1; }
  .foot-col a { padding: 5px 0; }
}

/* ---------- reveal ----------
   Added by app.js only when motion is welcome. Slow and short: the
   element settles rather than flies in. */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- touch targets ---------- */

@media (max-width: 760px) {
  .ghost-btn { width: 40px; height: 40px; }
  .lang-btn { padding: 8px 4px; }
  .details a { display: inline-block; padding: 4px 0; }
  .underline-link { display: inline-block; padding: 6px 0; }
}