/* ======================================================================
   FIELD STATION — design language v3 (Big-4 photographic richness merged
   with the editorial Operating Manual register)
   Adds: cinematic hero, photographic engagement cards, isometric
   instruments diagram, full-bleed doctrine, custom cursor coordinates.
   Layered on top of manual.css.
   ====================================================================== */

/* ---------- Cinematic image treatment ---------- */
.cinematic {
  position: relative;
  background-color: #0c0a07;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  isolation: isolate;
}
.cinematic::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(20,17,13,0.30) 0%, rgba(20,17,13,0.55) 50%, rgba(20,17,13,0.85) 100%),
    radial-gradient(ellipse 80% 60% at 50% 35%, rgba(184,144,47,0.18), transparent 70%),
    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 40%, rgba(20,17,13,0.45) 100%);
  z-index: 1;
}
.cinematic > * { position: relative; z-index: 2; }
.cinematic--graded {
  filter: contrast(1.04) saturate(0.85);
}

/* ---------- Hero — galaxy forced into Platine warm-gold / ink palette ---------- */
.field-hero {
  position: relative;
  min-height: 84vh;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
}
.field-hero__photo {
  position: absolute; inset: 0; z-index: 0;
  /* Cosmic / galactic — perspective + observation metaphor */
  background-image: url("https://images.unsplash.com/photo-1462331940025-496dfbfc7564?w=2400&q=85&auto=format&fit=crop");
  background-size: cover;
  background-position: center;
  /* Light grading only — preserves the natural cosmic colors */
  filter: contrast(1.06) saturate(1.05) brightness(0.88);
}
/* Single overlay — darkens for text legibility, keeps a warm gold corona for energy */
.field-hero::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    linear-gradient(180deg, rgba(20,17,13,0.45) 0%, rgba(20,17,13,0.35) 40%, rgba(20,17,13,0.80) 100%),
    radial-gradient(ellipse 55% 45% at 80% 30%, rgba(201,168,76,0.30), transparent 65%);
}
.field-hero > *:not(.field-hero__photo) { position: relative; z-index: 2; }

.field-hero__inner {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 0 24px 16px;
  max-width: 1320px; margin: 0 auto; width: 100%;
  align-items: start;
}
@media (min-width: 1024px) {
  .field-hero__inner { grid-template-columns: 7fr 4fr; gap: 24px; padding: 0 48px 24px; align-items: center; }
}

.field-hero__title {
  font-size: clamp(56px, 11vw, 152px);
  line-height: 0.95;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #FAF8F3;
  margin: 12px 0 0;
}
.field-hero__title em {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic; font-weight: 400;
  color: #C9A84C;
  letter-spacing: -0.02em;
}
.field-hero__lede {
  font-size: 18px; line-height: 1.6; max-width: 560px;
  color: rgba(250,248,243,0.92); margin-top: 20px;
}
@media (min-width: 768px) { .field-hero__lede { font-size: 21px; } }

.field-hero .ref-tag { color: rgba(245,240,230,0.85); }

.field-hero__actions {
  display: flex; flex-wrap: wrap; gap: 24px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(245,240,230,0.18);
  max-width: 560px;
}
.field-hero__actions .manual-link { color: #FAF8F3; border-color: #FAF8F3; }
.field-hero__actions .manual-link:hover { color: #C9A84C; border-color: #C9A84C; }
.field-hero__actions .manual-link--soft { color: rgba(245,240,230,0.55); border-color: rgba(245,240,230,0.35); }

/* Hero coordinates label — top-right corner */
.field-coord {
  position: absolute; top: 20px; right: 24px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.15em;
  color: rgba(245,240,230,0.6);
  text-transform: uppercase;
  z-index: 3;
}
@media (min-width: 1024px) { .field-coord { right: 48px; top: 24px; } }
.field-coord b { color: #C9A84C; font-weight: 500; }

/* Field log — kept for legacy use, not used on home anymore */
.field-log {
  border: 1px solid rgba(245,240,230,0.2);
  background: rgba(20,17,13,0.55);
  backdrop-filter: blur(8px);
  padding: 24px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.06em;
  color: rgba(250,248,243,0.92);
  position: relative;
}

/* Hero "On Record" panel — three stats + manifesto */
.hero-record {
  border: 1px solid rgba(245,240,230,0.18);
  background: rgba(20,17,13,0.55);
  backdrop-filter: blur(8px);
  padding: 28px 28px 24px;
  display: flex; flex-direction: column; gap: 16px;
}

.hero-record__stat {
  display: flex; flex-direction: column; gap: 2px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(245,240,230,0.12);
}
.hero-record__num {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic; font-weight: 400;
  font-size: 56px; line-height: 0.95;
  color: var(--gold-rule); letter-spacing: -0.04em;
  font-feature-settings: "tnum";
}
.hero-record__num .plus {
  font-size: 32px; vertical-align: super;
  letter-spacing: 0;
}
@media (min-width: 1024px) { .hero-record__num { font-size: 64px; } .hero-record__num .plus { font-size: 36px; } }

.hero-record__label {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.14em;
  color: rgba(250,248,243,0.7); text-transform: uppercase;
  font-weight: 500;
}

.hero-record__quote {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 17px; line-height: 1.45;
  color: rgba(250,248,243,0.95); margin: 4px 0 0;
  font-weight: 400;
}
.hero-record__quote em { font-style: italic; }
.hero-record__attr {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: 0.14em;
  color: rgba(250,248,243,0.55); text-transform: uppercase;
  margin: 8px 0 0;
}
.field-log__head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 14px; margin-bottom: 14px;
  border-bottom: 1px solid rgba(245,240,230,0.18);
  text-transform: uppercase;
}
.field-log__head .live::before {
  content: "●"; color: #C9A84C;
  margin-right: 6px;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{ opacity:1; } 50%{ opacity:0.3; } }

.field-log ul { list-style: none; padding: 0; margin: 0; }
.field-log li {
  padding: 8px 0;
  border-bottom: 1px dashed rgba(245,240,230,0.12);
  line-height: 1.6;
  opacity: 0;
  transform: translateY(6px);
  animation: logslide 600ms ease-out forwards;
}
.field-log li:last-child { border-bottom: none; }
.field-log li:nth-child(1) { animation-delay: 800ms; }
.field-log li:nth-child(2) { animation-delay: 1300ms; }
.field-log li:nth-child(3) { animation-delay: 1800ms; }
.field-log li:nth-child(4) { animation-delay: 2300ms; }
@keyframes logslide { to { opacity: 1; transform: translateY(0); } }

.field-log time {
  color: rgba(245,240,230,0.4);
  font-size: 10px; letter-spacing: 0.1em;
  display: block;
}
.field-log strong { color: #F5F0E6; font-weight: 500; }
.field-log .delta { color: #C9A84C; }

/* Hero annotations — hairline circle + dotted callout to a focal point */
.annotation {
  position: absolute;
  pointer-events: none;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: 0.12em;
  color: rgba(245,240,230,0.7);
  text-transform: uppercase;
  z-index: 3;
}
.annotation__ring {
  width: 80px; height: 80px;
  border: 1px solid rgba(232,197,108,0.55);
  border-radius: 50%;
  position: relative;
}
.annotation__ring::before {
  content: "";
  position: absolute; inset: 24px;
  border: 1px solid rgba(232,197,108,0.35);
  border-radius: 50%;
  animation: ringpulse 3s ease-in-out infinite;
}
@keyframes ringpulse {
  0%,100% { transform: scale(1); opacity: 0.35; }
  50%     { transform: scale(1.4); opacity: 0; }
}
.annotation__line {
  width: 64px; height: 1px;
  border-top: 1px dashed rgba(232,197,108,0.55);
  position: absolute; top: 50%;
}
.annotation__label { white-space: nowrap; }
.annotation--right .annotation__line { left: 100%; }
.annotation--right .annotation__label { position: absolute; left: calc(100% + 72px); top: 50%; transform: translateY(-50%); }

.annotation--hero-1 { left: 6%; top: 25%; }
.annotation--hero-2 { right: 8%; bottom: 22%; }
@media (max-width: 767px) { .annotation { display: none; } }

/* ---------- Ticker stays from manual.css ---------- */

/* ---------- INSTRUMENTS — methodology diagram ---------- */
.instruments-section { background: var(--paper); }
.instruments-frame {
  position: relative;
  margin-top: 32px;
  padding: 56px 24px;
  border: 1px solid var(--rule);
  background: var(--paper-alt);
  overflow: hidden;
}
@media (min-width: 768px)  { .instruments-frame { padding: 80px 48px; } }
@media (min-width: 1024px) { .instruments-frame { padding: 112px 80px; } }

.instruments-frame::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(20,17,13,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,17,13,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}
.instruments-corner {
  position: absolute;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: 0.12em;
  color: var(--ink-soft); text-transform: uppercase;
}
.instruments-corner--tl { top: 16px; left: 16px; }
.instruments-corner--tr { top: 16px; right: 16px; }
.instruments-corner--bl { bottom: 16px; left: 16px; }
.instruments-corner--br { bottom: 16px; right: 16px; }

.instruments-svg-wrap {
  position: relative;
  width: 100%; max-width: 880px; margin: 0 auto;
  aspect-ratio: 16 / 11;
}
.instruments-svg { width: 100%; height: 100%; display: block; }

.inst-node-circle {
  fill: var(--paper);
  stroke: var(--ink); stroke-width: 1.5;
  transition: fill 300ms;
}
.inst-node-circle.is-active { fill: var(--gold-warm); stroke: var(--gold-warm); }
.inst-node-num {
  font-family: "Playfair Display", serif;
  font-style: italic; font-weight: 400;
  font-size: 22px; fill: var(--gold-warm);
  letter-spacing: -0.02em;
}
.inst-node-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: 0.18em;
  fill: var(--ink); text-transform: uppercase; font-weight: 500;
}
.inst-node-desc {
  font-family: "Inter", sans-serif;
  font-size: 11px; fill: var(--ink-soft); font-weight: 400;
}
.inst-link {
  fill: none;
  stroke: var(--ink); stroke-width: 1; stroke-dasharray: 4 4;
  opacity: 0.45;
  stroke-dashoffset: 1000;
  animation: linkdraw 2.4s ease-out forwards;
  animation-play-state: paused;
}
.is-revealed .inst-link { animation-play-state: running; }
.is-revealed .inst-link:nth-of-type(2) { animation-delay: 300ms; }
.is-revealed .inst-link:nth-of-type(3) { animation-delay: 600ms; }
.is-revealed .inst-link:nth-of-type(4) { animation-delay: 900ms; }
@keyframes linkdraw {
  to { stroke-dashoffset: 0; }
}
.inst-flow-dot {
  fill: var(--gold-warm); r: 4;
  animation: flowmove 4s linear infinite;
}
.inst-tick {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px; letter-spacing: 0.14em;
  fill: var(--ink-soft); text-transform: uppercase;
}

/* ---------- Engagement photo cards ---------- */
.engagements-cinematic {
  display: grid; gap: 24px;
  grid-template-columns: 1fr;
  margin-top: 32px;
}
@media (min-width: 768px)  { .engagements-cinematic { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (min-width: 1024px) { .engagements-cinematic { grid-template-columns: 1fr 1fr 1fr; gap: 40px; } }

/* Engagement cards — text overlaid on photo (original layout, light grading) */
.eng-card {
  position: relative;
  display: block;
  text-decoration: none; color: inherit;
  background: var(--ink);
  overflow: hidden;
  transition: transform 400ms cubic-bezier(0.4,0,0.2,1);
}
.eng-card:hover { transform: translateY(-6px); }

.eng-card__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
  filter: contrast(1.04) saturate(0.92);
  transition: transform 800ms cubic-bezier(0.4,0,0.2,1);
}
.eng-card:hover .eng-card__photo { transform: scale(1.04); }

.eng-card__photo::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  /* Bottom-up gradient only — keeps photo bright at the top, dark enough at bottom for text */
  background: linear-gradient(180deg, rgba(20,17,13,0.15) 0%, rgba(20,17,13,0.35) 40%, rgba(20,17,13,0.85) 100%);
  z-index: 1;
}

.eng-card__overlay {
  position: absolute; inset: 0; padding: 24px;
  display: flex; flex-direction: column; justify-content: space-between;
  z-index: 2;
}
@media (min-width: 1024px) { .eng-card__overlay { padding: 32px; } }

.eng-card__meta {
  display: flex; justify-content: space-between; align-items: flex-start;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: 0.15em;
  color: rgba(245,240,230,0.85); text-transform: uppercase;
}
.eng-card__sitecode {
  border: 1px solid rgba(245,240,230,0.4);
  padding: 4px 8px;
}

.eng-card__no {
  font-family: "Playfair Display", serif;
  font-style: italic; font-weight: 400;
  font-size: 64px; line-height: 1;
  color: #C9A84C; letter-spacing: -0.04em;
}
@media (min-width: 1024px) { .eng-card__no { font-size: 96px; } }

.eng-card__title {
  font-size: 24px; line-height: 1.1;
  font-weight: 700; letter-spacing: -0.02em;
  color: #FAF8F3;
  margin: 16px 0 0;
}
@media (min-width: 1024px) { .eng-card__title { font-size: 32px; } }
.eng-card__title em {
  font-family: "Playfair Display", serif;
  font-style: italic; font-weight: 400; color: #C9A84C;
}

.eng-card__tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 20px;
}
.eng-card__tags span {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px; letter-spacing: 0.14em;
  color: rgba(245,240,230,0.85); text-transform: uppercase;
  padding: 4px 8px;
  border: 1px solid rgba(245,240,230,0.25);
}

/* Annotation rings on engagement cards — animate on hover */
.eng-annot {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  border: 1px solid rgba(201,168,76,0.7);
  opacity: 0;
  transition: opacity 400ms ease-out, transform 400ms ease-out;
  transform: scale(0.7);
  z-index: 1;
}
.eng-annot::before {
  content: "";
  position: absolute; inset: -8px;
  border-radius: 50%;
  border: 1px dashed rgba(201,168,76,0.35);
}
.eng-card:hover .eng-annot { opacity: 1; transform: scale(1); }
.eng-card:hover .eng-annot::before { animation: ringpulse 3s ease-in-out infinite; }

.eng-annot--1 { width: 56px; height: 56px; top: 28%; left: 18%; }
.eng-annot--2 { width: 40px; height: 40px; top: 18%; right: 14%; }

/* ---------- Doctrine — full-bleed photo with white quote (original layout) ---------- */
.field-doctrine {
  position: relative;
  min-height: 80vh;
  background: var(--ink);
  display: flex; align-items: center; justify-content: center;
  padding: 120px 24px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
  isolation: isolate;
}
.field-doctrine__photo {
  position: absolute; inset: 0; z-index: 0;
  background-image: url("https://images.unsplash.com/photo-1483728642387-6c3bdd6c93e5?w=2400&q=85&auto=format&fit=crop");
  background-size: cover;
  background-position: center;
  filter: contrast(1.04) saturate(0.92);
}
.field-doctrine::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(20,17,13,0.4) 0%, rgba(20,17,13,0.5) 50%, rgba(20,17,13,0.7) 100%),
    radial-gradient(ellipse at center, transparent 35%, rgba(20,17,13,0.35) 100%);
}
.field-doctrine > *:not(.field-doctrine__photo) { position: relative; z-index: 2; }

.field-doctrine__inner {
  max-width: 1100px; text-align: center;
  color: #FAF8F3;
}
.field-doctrine__inner .ref-tag { color: rgba(245,240,230,0.7); }
.field-doctrine__quote {
  font-family: "Playfair Display", serif;
  font-size: 36px; line-height: 1.2; font-weight: 400;
  letter-spacing: -0.02em; color: #FAF8F3;
  margin: 32px 0 0;
}
@media (min-width: 768px)  { .field-doctrine__quote { font-size: 56px; } }
@media (min-width: 1024px) { .field-doctrine__quote { font-size: 80px; line-height: 1.1; } }
.field-doctrine__quote em { color: #C9A84C; font-style: italic; font-weight: 600; }
.field-doctrine__attr {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px; letter-spacing: 0.15em;
  color: rgba(245,240,230,0.6); text-transform: uppercase;
  margin-top: 40px;
}
.field-doctrine__brackets {
  display: flex; justify-content: center; gap: 24px; margin: 32px 0 0;
}
.field-doctrine__brackets span {
  width: 40px; height: 1px; background: rgba(201,168,76,0.6);
}

/* Hairline frame brackets that ornament the doctrine quote */
.field-doctrine__brackets {
  display: flex; justify-content: center; gap: 24px; margin: 32px 0 0;
}
.field-doctrine__brackets span {
  width: 40px; height: 1px; background: rgba(232,197,108,0.6);
}

/* ---------- Custom cursor coordinates ---------- */
.field-cursor {
  position: fixed;
  pointer-events: none;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: 0.15em;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule-strong);
  padding: 4px 8px;
  z-index: 9999;
  text-transform: uppercase;
  transform: translate(16px, 16px);
  white-space: nowrap;
  display: none;
}
@media (hover: hover) and (min-width: 1024px) { .field-cursor { display: block; } }

body.cursor-on-dark .field-cursor {
  color: #F5F0E6; background: var(--ink); border-color: rgba(245,240,230,0.25);
}

/* ---------- Phases (Instruments — 4-phase process strip) ---------- */
.phases {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--rule);
}
@media (min-width: 768px)  { .phases { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .phases { grid-template-columns: repeat(4, 1fr); } }

.phases li {
  position: relative;
  padding: 40px 24px;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 768px) {
  .phases li {
    padding: 48px 32px;
    border-right: 1px solid var(--rule);
  }
  .phases li:nth-child(2n) { border-right: none; }
  .phases li:nth-last-child(-n+2) { border-bottom: none; }
}
@media (min-width: 1024px) {
  .phases li { padding: 56px 32px; border-bottom: none; }
  .phases li:nth-child(2n)  { border-right: 1px solid var(--rule); }
  .phases li:nth-child(4n)  { border-right: none; }
  .phases li:last-child { border-right: none; }
}

.phase-ref {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.15em;
  color: var(--ink-soft); text-transform: uppercase;
  margin-bottom: 24px;
}

.phase-num {
  display: block;
  font-family: "Playfair Display", serif;
  font-style: italic; font-weight: 400;
  font-size: 96px; line-height: 0.9;
  color: var(--gold-warm); letter-spacing: -0.04em;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 1024px) { .phase-num { font-size: 128px; } }

.phase-name {
  font-size: 24px; font-weight: 700; letter-spacing: -0.015em;
  color: var(--ink); margin: 24px 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 14px;
  font-family: "JetBrains Mono", monospace;
  font-weight: 500;
}

.phase-desc {
  font-size: 15px; line-height: 1.6;
  color: var(--ink-soft); margin: 0;
}

/* ====================================================================
   COOKIE BANNER — bilingual, platinum/gold/ink palette, properly responsive
   Replaces the legacy override-by-class approach with dedicated styles.
   ==================================================================== */

.cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 60;
  background: var(--ink); color: var(--paper);
  border-top: 2px solid var(--gold-warm);
  box-shadow: 0 -10px 32px rgba(20, 17, 13, 0.25);
}

.cookie-banner__inner {
  max-width: 1320px; margin: 0 auto;
  padding: 20px 24px;
  display: flex; flex-direction: column; gap: 20px;
  align-items: stretch;
}
@media (min-width: 1024px) {
  .cookie-banner__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 24px 48px;
    gap: 56px;
  }
}

.cookie-banner__body { flex: 1 1 auto; max-width: 800px; }

.cookie-banner__ref {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.18em;
  color: var(--platinum); text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 8px;
}

.cookie-banner__title {
  font-size: 16px; font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--paper);
  margin: 0 0 6px;
}

.cookie-banner__text {
  font-size: 13px; line-height: 1.55;
  color: rgba(245, 240, 230, 0.78);
  margin: 0;
}
.cookie-banner__text a {
  color: var(--gold-rule);
  border-bottom: 1px solid var(--gold-rule);
  text-decoration: none;
  transition: color 200ms, border-color 200ms;
  margin-left: 4px;
  white-space: nowrap;
}
.cookie-banner__text a:hover {
  color: var(--paper); border-color: var(--paper);
}

.cookie-banner__actions {
  display: flex; gap: 12px; flex-wrap: wrap;
  flex-shrink: 0;
}
@media (max-width: 1023px) {
  .cookie-banner__actions { width: 100%; }
  .cookie-banner__actions .cookie-banner__btn { flex: 1; }
}

.cookie-banner__btn {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 13px 22px;
  border: 1px solid;
  cursor: pointer;
  white-space: nowrap;
  transition: background 200ms, color 200ms, border-color 200ms, transform 200ms;
}
.cookie-banner__btn--ghost {
  background: transparent;
  color: var(--paper);
  border-color: rgba(245, 240, 230, 0.32);
}
.cookie-banner__btn--ghost:hover {
  background: rgba(245, 240, 230, 0.08);
  border-color: rgba(245, 240, 230, 0.6);
}
.cookie-banner__btn--primary {
  background: var(--gold-warm);
  color: var(--ink);
  border-color: var(--gold-warm);
}
.cookie-banner__btn--primary:hover {
  background: var(--gold-rule);
  border-color: var(--gold-rule);
  transform: translateY(-1px);
}

/* Alpine.js x-transition classes for slide-up entry */
.cookie-banner--enter         { transition: transform 300ms ease-out, opacity 300ms ease-out; }
.cookie-banner--enter-from    { transform: translateY(100%); opacity: 0; }
.cookie-banner--enter-to      { transform: translateY(0); opacity: 1; }

/* ====================================================================
   APPROACH PAGE
   ==================================================================== */

/* Approach hero — editorial, two-column, NO photo */
.approach-hero {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding: 96px 0 64px;
}
@media (min-width: 1024px) { .approach-hero { padding: 144px 0 96px; } }

.approach-hero__grid {
  display: grid; grid-template-columns: 1fr; gap: 48px;
}
@media (min-width: 1024px) {
  .approach-hero__grid { grid-template-columns: 6fr 5fr; gap: 80px; }
}

.approach-hero__title {
  font-size: clamp(48px, 9vw, 112px);
  line-height: 0.98;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 24px 0 0;
}
.approach-hero__title em {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic; font-weight: 400;
  color: var(--gold-warm);
  letter-spacing: -0.02em;
}

.approach-hero__lede p {
  font-size: 18px; line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 24px;
  max-width: 540px;
}
@media (min-width: 768px) { .approach-hero__lede p { font-size: 19px; } }

/* Drop cap — magazine treatment for opening paragraph */
.lede-drop .drop-cap {
  float: left;
  font-family: "Playfair Display", serif;
  font-weight: 400; font-style: italic;
  font-size: 88px; line-height: 0.85;
  color: var(--gold-warm);
  margin: 8px 12px -8px 0;
  letter-spacing: -0.05em;
}

/* Expanded phase detail rows */
.phase-detail-list { list-style: none; padding: 0; margin: 0; }
.phase-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 56px 0;
  border-bottom: 1px solid var(--rule);
}
.phase-detail:first-child { padding-top: 0; }
.phase-detail:last-child { border-bottom: none; }
@media (min-width: 1024px) {
  .phase-detail { grid-template-columns: 4fr 8fr; gap: 80px; padding: 80px 0; }
}

.phase-detail__meta {
  display: flex; flex-direction: column;
  gap: 12px;
}
.phase-detail__meta .phase-ref {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.15em;
  color: var(--ink-soft); text-transform: uppercase;
  margin: 0;
  display: block;
}
.phase-detail__num {
  font-family: "Playfair Display", serif;
  font-style: italic; font-weight: 400;
  font-size: 96px; line-height: 0.9;
  color: var(--gold-warm); letter-spacing: -0.04em;
  display: block;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 1024px) { .phase-detail__num { font-size: 144px; } }

.phase-detail__name {
  font-size: 36px; font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}
@media (min-width: 1024px) { .phase-detail__name { font-size: 48px; } }

.phase-detail__deck {
  font-family: "Playfair Display", serif;
  font-style: italic; font-weight: 400;
  font-size: 24px; line-height: 1.35;
  color: var(--ink); letter-spacing: -0.01em;
  margin: 0 0 24px;
  max-width: 640px;
}
@media (min-width: 1024px) { .phase-detail__deck { font-size: 30px; } }

.phase-detail__paragraph {
  font-size: 17px; line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 32px;
  max-width: 640px;
}

.phase-detail__deliverables {
  padding: 24px;
  background: var(--paper-alt);
  border-left: 2px solid var(--gold-warm);
  max-width: 560px;
}
.deliverables-label {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.15em;
  color: var(--ink-soft); text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 12px;
}
.phase-detail__deliverables ul { list-style: none; padding: 0; margin: 0; }
.phase-detail__deliverables li {
  padding: 6px 0;
  font-size: 14px; color: var(--ink);
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.02em;
}
.phase-detail__deliverables li::before {
  content: "→ ";
  color: var(--gold-warm); font-weight: 600;
}

/* Guarantees — three editorial cards on alt-paper bg */
.guarantee-section { background: var(--paper-alt); }
.guarantee-grid {
  display: grid; grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px)  { .guarantee-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } }
@media (min-width: 1024px) { .guarantee-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; } }

.guarantee {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 40px 32px;
  position: relative;
  transition: transform 300ms, box-shadow 300ms;
}
.guarantee:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -12px rgba(20,17,13,0.12);
}
.guarantee__num {
  font-family: "Playfair Display", serif;
  font-style: italic; font-weight: 400;
  font-size: 48px; line-height: 1;
  color: var(--gold-warm); letter-spacing: -0.02em;
  display: block;
  margin-bottom: 24px;
}
.guarantee__title {
  font-size: 20px; font-weight: 700;
  line-height: 1.3; letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}
.guarantee__body {
  font-size: 15px; line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}

/* Rigor — two-column block: heading left, spec list right */
.rigor-grid {
  display: grid; grid-template-columns: 1fr; gap: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
}
@media (min-width: 1024px) {
  .rigor-grid { grid-template-columns: 5fr 7fr; gap: 80px; padding-top: 56px; }
}

.rigor-list {
  margin: 0;
  border-top: 1px solid var(--rule);
}
.rigor-list > div {
  display: grid; grid-template-columns: 1fr;
  gap: 4px;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 768px) {
  .rigor-list > div { grid-template-columns: 160px 1fr; gap: 24px; }
}
.rigor-list dt {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.15em;
  color: var(--ink-soft); text-transform: uppercase;
  margin: 0;
}
.rigor-list dd {
  font-size: 17px; color: var(--ink);
  margin: 0; line-height: 1.5;
}

/* ====================================================================
   ENGAGEMENTS PAGES (hub + detail)
   ==================================================================== */

/* Comparator table */
.comparator { overflow-x: auto; border: 1px solid var(--rule); }
.comparator table { width: 100%; border-collapse: collapse; min-width: 720px; background: var(--paper); }
.comparator th, .comparator td { padding: 20px 24px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); font-size: 14px; line-height: 1.5; color: var(--ink); }
.comparator th:last-child, .comparator td:last-child { border-right: none; }
.comparator thead th { background: var(--paper-alt); padding: 28px 24px; vertical-align: bottom; }
.comparator thead th:first-child { background: transparent; }
.comparator__no { display: block; font-family: "Playfair Display", serif; font-style: italic; font-size: 32px; color: var(--gold-warm); line-height: 1; margin-bottom: 8px; }
.comparator__name { display: block; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.comparator tbody th { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-soft); font-weight: 500; background: var(--paper-alt); width: 140px; }
.comparator td strong { color: var(--gold-warm); font-weight: 700; }

/* Engagement detail hero */
.eng-detail-hero {
  position: relative;
  min-height: 80vh;
  background: var(--ink);
  display: flex; align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  padding: 120px 0 64px;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 1024px) { .eng-detail-hero { min-height: 84vh; padding: 144px 0 96px; } }
.eng-detail-hero__photo {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  filter: contrast(1.04) saturate(0.92);
}
.eng-detail-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,17,13,0.35) 0%, rgba(20,17,13,0.55) 60%, rgba(20,17,13,0.92) 100%);
}
.eng-detail-hero__inner { position: relative; z-index: 2; width: 100%; }
.eng-detail-hero__title {
  font-size: clamp(48px, 8vw, 112px);
  line-height: 0.98; font-weight: 700; letter-spacing: -0.035em;
  color: #FAF8F3; margin: 24px 0 0;
}
.eng-detail-hero__title .period { color: var(--gold-rule); }
.eng-detail-hero__subtitle {
  font-family: "Playfair Display", serif; font-style: italic;
  font-size: 22px; line-height: 1.4;
  color: rgba(245,240,230,0.85); margin: 24px 0 0; max-width: 720px;
  font-weight: 400;
}
@media (min-width: 768px) { .eng-detail-hero__subtitle { font-size: 28px; } }

/* Long-form prose blocks */
.long-form { max-width: 760px; }
.long-form p {
  font-size: 18px; line-height: 1.75;
  color: var(--ink-soft); margin: 0 0 24px;
}
@media (min-width: 768px) { .long-form p { font-size: 19px; } }
.long-form p strong { color: var(--ink); font-weight: 600; }
.long-form a { color: var(--gold-warm); border-bottom: 1px solid var(--gold-warm); }
.long-form a:hover { color: var(--ink); border-color: var(--ink); }

/* Outcomes data grid */
.outcomes-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr; gap: 0;
  border-top: 1px solid var(--rule);
}
@media (min-width: 768px)  { .outcomes-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .outcomes-grid { grid-template-columns: repeat(4, 1fr); } }
.outcomes-grid li {
  padding: 40px 24px;
  border-bottom: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 16px;
}
@media (min-width: 768px) {
  .outcomes-grid li { padding: 56px 32px; border-right: 1px solid var(--rule); }
  .outcomes-grid li:nth-child(2n) { border-right: none; }
  .outcomes-grid li:nth-last-child(-n+2) { border-bottom: none; }
}
@media (min-width: 1024px) {
  .outcomes-grid li { border-bottom: none; }
  .outcomes-grid li:nth-child(2n) { border-right: 1px solid var(--rule); }
  .outcomes-grid li:nth-child(4n) { border-right: none; }
}
.outcomes-delta {
  font-size: 56px; line-height: 0.9; font-weight: 700;
  letter-spacing: -0.04em; color: var(--gold-warm);
}
@media (min-width: 1024px) { .outcomes-delta { font-size: 80px; } }
.outcomes-label {
  font-size: 14px; line-height: 1.5; color: var(--ink-soft);
  font-family: "Playfair Display", serif; font-style: italic;
}

/* Industry context — cited benchmark cards */
.benchmark-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr;
  border-top: 1px solid var(--rule);
}
@media (min-width: 768px)  { .benchmark-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .benchmark-grid { grid-template-columns: repeat(3, 1fr); } }

.benchmark-grid li {
  padding: 40px 24px;
  border-bottom: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 16px;
}
@media (min-width: 768px) {
  .benchmark-grid li { padding: 48px 32px; border-right: 1px solid var(--rule); }
  .benchmark-grid li:nth-child(2n) { border-right: none; }
  .benchmark-grid li:last-child { border-bottom: none; }
}
@media (min-width: 1024px) {
  .benchmark-grid li { border-bottom: none; }
  .benchmark-grid li:nth-child(2n)  { border-right: 1px solid var(--rule); }
  .benchmark-grid li:nth-child(3n)  { border-right: none; }
}

.benchmark-stat {
  font-size: 56px; line-height: 0.9; font-weight: 700;
  letter-spacing: -0.04em; color: var(--gold-warm);
  font-feature-settings: "tnum";
  display: block;
}
@media (min-width: 1024px) { .benchmark-stat { font-size: 88px; } }

.benchmark-claim {
  font-family: "Playfair Display", serif; font-style: italic;
  font-size: 16px; line-height: 1.5;
  color: var(--ink); margin: 0; flex: 1;
  font-weight: 400;
}
@media (min-width: 1024px) { .benchmark-claim { font-size: 18px; } }

.benchmark-source {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.1em;
  color: var(--ink-soft); text-transform: uppercase;
  padding-top: 16px; margin-top: 8px;
  border-top: 1px solid var(--rule);
  display: block;
}

/* Tool list — small, monospace, deliberately quiet */
.tool-list {
  list-style: none; padding: 0; margin: 0;
  border-top: 1px solid var(--rule);
  max-width: 920px;
}
.tool-list li {
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  font-family: "JetBrains Mono", monospace;
  font-size: 13px; line-height: 1.5;
  color: var(--ink); letter-spacing: 0.02em;
}
.tool-list li::before {
  content: "→ ";
  color: var(--gold-warm); font-weight: 600; margin-right: 8px;
}

/* FAQ accordion */
.faq-list { margin: 0; padding: 0; border-top: 1px solid var(--rule); max-width: 920px; }
.faq-list details {
  border-bottom: 1px solid var(--rule);
}
.faq-list summary {
  display: grid; grid-template-columns: 56px 1fr 32px;
  gap: 16px; align-items: baseline;
  padding: 24px 0;
  cursor: pointer;
  list-style: none;
  transition: color 200ms;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover .faq-q { color: var(--gold-warm); }
.faq-num {
  font-family: "Playfair Display", serif; font-style: italic;
  font-size: 24px; line-height: 1; color: var(--gold-warm);
  letter-spacing: -0.02em;
}
.faq-q {
  font-size: 18px; line-height: 1.4; font-weight: 600;
  letter-spacing: -0.01em; color: var(--ink);
}
@media (min-width: 768px) { .faq-q { font-size: 22px; } }
.faq-toggle {
  font-family: "JetBrains Mono", monospace;
  font-size: 24px; color: var(--gold-warm); font-weight: 400;
  text-align: right; transition: transform 300ms;
  line-height: 1;
}
.faq-list details[open] .faq-toggle { transform: rotate(45deg); }
.faq-a {
  padding: 0 0 32px 72px;
  font-size: 16px; line-height: 1.7;
  color: var(--ink-soft);
  max-width: 760px;
}
@media (max-width: 767px) { .faq-a { padding-left: 0; } }

/* ====================================================================
   ABOUT PAGE
   ==================================================================== */

/* Founder card — single-person firm, richer layout */
.founder-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  border: 1px solid var(--rule);
  background: var(--paper);
  overflow: hidden;
}
@media (min-width: 768px)  { .founder-card { grid-template-columns: 5fr 7fr; gap: 0; } }
@media (min-width: 1024px) { .founder-card { grid-template-columns: 4fr 8fr; } }

.founder-card__photo {
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center top;
  filter: contrast(1.04) saturate(0.95);
}
@media (min-width: 768px) { .founder-card__photo { aspect-ratio: auto; min-height: 100%; } }

.founder-card__body {
  padding: 32px 28px;
  display: flex; flex-direction: column;
  gap: 20px;
}
@media (min-width: 1024px) { .founder-card__body { padding: 56px 48px; } }

.founder-card__name {
  font-size: 32px; font-weight: 700;
  letter-spacing: -0.02em; color: var(--ink);
  margin: 0;
}
@media (min-width: 768px)  { .founder-card__name { font-size: 40px; } }
@media (min-width: 1024px) { .founder-card__name { font-size: 48px; } }

.founder-card__role {
  font-family: "Playfair Display", serif; font-style: italic;
  font-size: 18px; color: var(--gold-warm);
  margin: 0 0 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}

.founder-card__bio {
  font-size: 16px; line-height: 1.7;
  color: var(--ink); margin: 0;
}
@media (min-width: 1024px) { .founder-card__bio { font-size: 17px; } }
.founder-card__bio--soft { color: var(--ink-soft); font-size: 14px; }

.founder-card__links {
  display: flex; flex-wrap: wrap; gap: 24px;
  margin-top: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}

.leadership-grid {
  display: grid; grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px)  { .leadership-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } }
@media (min-width: 1024px) { .leadership-grid { grid-template-columns: repeat(4, 1fr); gap: 32px; } }

.leader { display: flex; flex-direction: column; }
.leader__photo {
  aspect-ratio: 4 / 5;
  background-size: cover; background-position: center top;
  filter: grayscale(0.85) contrast(1.05) saturate(0.9);
  transition: filter 400ms;
}
.leader:hover .leader__photo { filter: grayscale(0) contrast(1.05) saturate(1); }
.leader__body { padding: 24px 0 0; }
.leader__num {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.15em;
  color: var(--gold-warm); text-transform: uppercase;
}
.leader__name {
  font-size: 22px; font-weight: 700; letter-spacing: -0.015em;
  color: var(--ink); margin: 8px 0 4px;
}
.leader__role {
  font-family: "Playfair Display", serif; font-style: italic;
  font-size: 16px; color: var(--gold-warm);
  margin: 0 0 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}
.leader__bio {
  font-size: 14px; line-height: 1.6;
  color: var(--ink-soft); margin: 0;
}

/* Values — alt-paper bg, four numbered cards */
.values-grid {
  display: grid; grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) { .values-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } }

.value {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 32px;
  position: relative;
  transition: transform 300ms, box-shadow 300ms;
}
.value:hover { transform: translateY(-4px); box-shadow: 0 16px 32px -12px rgba(20,17,13,0.12); }
.value__num {
  font-family: "Playfair Display", serif; font-style: italic;
  font-size: 56px; line-height: 1; color: var(--gold-warm);
  letter-spacing: -0.03em; display: block; margin-bottom: 24px;
}
.value__title {
  font-size: 22px; font-weight: 700; line-height: 1.25;
  letter-spacing: -0.015em; color: var(--ink);
  margin: 0 0 16px; padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}
.value__body {
  font-size: 15px; line-height: 1.6;
  color: var(--ink-soft); margin: 0;
}

/* ====================================================================
   CONTACT PAGE
   ==================================================================== */

.contact-grid {
  display: grid; grid-template-columns: 1fr;
  gap: 56px;
}
@media (min-width: 1024px) {
  .contact-grid { grid-template-columns: 7fr 5fr; gap: 80px; }
}

.contact-form { display: flex; flex-direction: column; gap: 24px; }
.contact-form .field { display: flex; flex-direction: column; gap: 8px; }
.contact-form label {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.15em;
  color: var(--ink); text-transform: uppercase; font-weight: 500;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  padding: 14px 16px;
  font-size: 16px; color: var(--ink);
  background: var(--paper);
  font-family: inherit;
  transition: border-color 200ms, box-shadow 200ms;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--gold-warm);
  box-shadow: 0 0 0 1px var(--gold-warm);
}
.contact-form textarea { min-height: 140px; resize: vertical; }
.contact-form .field-row {
  display: grid; grid-template-columns: 1fr; gap: 24px;
}
@media (min-width: 768px) { .contact-form .field-row { grid-template-columns: 1fr 1fr; } }

/* =====================================================================
   CONTACT-FORM RESULT BANNER · success and error states
   Replaces the heading + form on success; sits above on error.
   Bold visual treatment so the user can't miss it after submit.
   ===================================================================== */
.contact-result {
  position: relative;
  padding: 40px 32px 32px;
  margin-bottom: 32px;
  border: 1px solid var(--rule);
  background: #FFFFFF;
  box-shadow: 0 24px 60px -28px rgba(15, 24, 40, 0.20);
}
@media (min-width: 768px) {
  .contact-result { padding: 56px 48px 40px; }
}

/* Top accent bar — chrome on success, bordeaux on error */
.contact-result__bar {
  position: absolute; top: 0; left: 0; right: 0;
  height: 4px;
}
.contact-result--success { background: #0F1828; color: #FFFFFF; }
.contact-result--success .contact-result__bar {
  background: linear-gradient(90deg, #5C6275 0%, #8590A5 50%, #5C6275 100%);
}
.contact-result--error .contact-result__bar { background: #8B1A1A; }

/* Mono section tag */
.contact-result__tag {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.contact-result--success .contact-result__tag { color: #D4D8E0; }
.contact-result--error   .contact-result__tag { color: #8B1A1A; }

/* Headline — Playfair italic, big */
.contact-result__headline {
  font-family: "Inter", sans-serif;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 20px;
  color: #FFFFFF;
}
.contact-result__headline em {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic; font-weight: 500;
  background: linear-gradient(135deg, #FFFFFF 0%, #D4D8E0 30%, #FFFFFF 50%, #A8B0BD 70%, #5C6275 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.contact-result__subhead {
  font-family: "Inter", sans-serif;
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 16px;
}

/* Lede paragraph */
.contact-result__lede {
  font-size: 17px; line-height: 1.6;
  margin: 0 0 24px;
  color: rgba(255, 255, 255, 0.88);
  max-width: 540px;
}

/* Reference number block */
.contact-result__ref {
  display: flex; align-items: baseline; gap: 16px;
  padding: 14px 18px;
  margin: 0 0 28px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
}
.contact-result__ref-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: 0.18em;
  color: #D4D8E0; text-transform: uppercase;
}
.contact-result__ref-value {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px; letter-spacing: 0.5px;
  color: #FFFFFF;
  word-break: break-all;
}

/* "What happens next" steps */
.contact-result__steps {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.contact-result__steps li {
  display: grid; grid-template-columns: 32px 1fr; gap: 12px;
  font-size: 14px; line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.contact-result__steps li:first-child { border-top: none; padding-top: 0; }
.contact-result__steps li strong { color: #FFFFFF; font-weight: 600; }
.contact-result__step-num {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic; font-weight: 500;
  font-size: 18px; line-height: 1;
  color: #D4D8E0;
}

/* Optional warning row when mail relay didn't ack */
.contact-result__warn {
  margin: 24px 0 0;
  padding: 16px 18px;
  border-left: 3px solid #C9A84C;
  background: rgba(201, 168, 76, 0.08);
  font-size: 13px; line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
}
.contact-result__warn a { color: #FFFFFF; border-bottom: 1px solid rgba(255,255,255,0.5); }

/* "Send another inquiry" link */
.contact-result__again {
  display: inline-block;
  margin-top: 28px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px; letter-spacing: 0.12em;
  color: #D4D8E0;
  text-decoration: none;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, 0.30);
  padding-bottom: 4px;
  transition: color 200ms, border-color 200ms;
}
.contact-result__again:hover { color: #FFFFFF; border-bottom-color: #FFFFFF; }

/* Error variant — light card, dark text */
.contact-result--error {
  background: var(--paper-alt);
  color: var(--ink);
  padding: 32px 28px 28px;
}
.contact-result--error .contact-result__errlist {
  list-style: none;
  margin: 0; padding: 0;
}
.contact-result--error .contact-result__errlist li {
  position: relative;
  padding: 12px 0 12px 28px;
  font-size: 15px; line-height: 1.5;
  color: var(--ink);
  border-bottom: 1px solid rgba(15, 24, 40, 0.10);
}
.contact-result--error .contact-result__errlist li:last-child { border-bottom: none; }
.contact-result--error .contact-result__errlist li::before {
  content: "✕";
  position: absolute; left: 0; top: 12px;
  color: #8B1A1A;
  font-weight: 700;
}

.contact-consent {
  display: flex; gap: 12px; align-items: flex-start;
  font-family: "Inter", sans-serif;
  font-size: 14px; line-height: 1.5;
  color: var(--ink-soft);
}
.contact-consent input[type="checkbox"] {
  margin-top: 4px; flex-shrink: 0;
  accent-color: var(--gold-warm);
}

.contact-submit {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--ink); color: var(--paper);
  border: none; padding: 18px 32px;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 500; cursor: pointer;
  transition: background 200ms;
  align-self: flex-start;
}
.contact-submit:hover { background: var(--gold-warm); color: var(--ink); }

.contact-aside {
  background: var(--paper-alt); padding: 32px;
  border-left: 2px solid var(--gold-warm);
}
.contact-aside h3 {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.15em;
  color: var(--ink); text-transform: uppercase;
  margin: 0 0 24px;
}
.contact-aside .meta-list { border-top-color: var(--rule); }

.next-steps {
  display: grid; grid-template-columns: 1fr; gap: 24px;
  margin-top: 48px;
  padding-top: 48px;
  border-top: 1px solid var(--rule);
}
@media (min-width: 768px) { .next-steps { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.next-step {
  display: flex; flex-direction: column; gap: 12px;
}
.next-step__num {
  font-family: "Playfair Display", serif; font-style: italic;
  font-size: 32px; line-height: 1; color: var(--gold-warm);
}
.next-step__title {
  font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--ink); margin: 0;
}
.next-step__body {
  font-size: 14px; line-height: 1.55; color: var(--ink-soft); margin: 0;
}

/* ====================================================================
   INDUSTRIES PAGE
   ==================================================================== */

.sectors-grid {
  display: grid; grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 768px)  { .sectors-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } }
@media (min-width: 1024px) { .sectors-grid { grid-template-columns: repeat(2, 1fr); gap: 48px; } }

.sector {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--rule);
  overflow: hidden;
  transition: transform 300ms, box-shadow 300ms;
}
.sector:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -16px rgba(20,17,13,0.14);
}
.sector__photo {
  position: relative;
  aspect-ratio: 16 / 9;
  background-size: cover; background-position: center;
  filter: contrast(1.04) saturate(0.92);
}
.sector__sitecode {
  position: absolute; top: 16px; left: 16px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: 0.15em;
  color: rgba(250,248,243,0.95); text-transform: uppercase;
  background: rgba(20,17,13,0.7);
  padding: 5px 10px; backdrop-filter: blur(6px);
}
.sector__body { padding: 32px; flex: 1; display: flex; flex-direction: column; }
.sector__num {
  font-family: "Playfair Display", serif; font-style: italic;
  font-size: 14px; color: var(--gold-warm); font-weight: 600;
  letter-spacing: 0.05em;
}
.sector__name {
  font-size: 26px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--ink); margin: 8px 0 4px;
}
@media (min-width: 1024px) { .sector__name { font-size: 32px; } }
.sector__subtitle {
  font-family: "Playfair Display", serif; font-style: italic;
  font-size: 16px; color: var(--gold-warm);
  margin: 0 0 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}
.sector__body-text {
  font-size: 15px; line-height: 1.6;
  color: var(--ink-soft); margin: 0;
}
.sector__tags {
  list-style: none; padding: 0; margin: 24px 0 0 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.sector__tags li {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px; letter-spacing: 0.14em;
  color: var(--ink-soft); text-transform: uppercase;
  padding: 4px 8px;
  border: 1px solid var(--rule-strong);
}

/* ====================================================================
   FIELD NOTES (hub + detail)
   ==================================================================== */

.fn-featured {
  display: grid; grid-template-columns: 1fr;
  gap: 32px; margin-bottom: 64px;
  padding-bottom: 64px;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 1024px) { .fn-featured { grid-template-columns: 7fr 5fr; gap: 56px; } }

.fn-featured__photo {
  aspect-ratio: 16 / 10;
  background-size: cover; background-position: center;
  filter: contrast(1.04) saturate(0.92);
}
.fn-featured__body { display: flex; flex-direction: column; gap: 20px; justify-content: center; }
.fn-featured__type {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.15em;
  color: var(--gold-warm); text-transform: uppercase;
}
.fn-featured__title {
  font-size: 32px; line-height: 1.1;
  font-weight: 700; letter-spacing: -0.02em;
  color: var(--ink); margin: 0;
}
@media (min-width: 768px) { .fn-featured__title { font-size: 44px; } }
.fn-featured__title em { font-family: "Playfair Display", serif; font-style: italic; font-weight: 400; color: var(--gold-warm); }
.fn-featured__deck {
  font-family: "Playfair Display", serif; font-style: italic;
  font-size: 18px; line-height: 1.5;
  color: var(--ink-soft); margin: 0;
}
.fn-featured__meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.1em;
  color: var(--ink-soft); text-transform: uppercase;
  margin-top: 8px;
}
.fn-featured__cta { margin-top: 8px; }

/* Field Notes filter strip */
.fn-filter {
  display: flex; flex-wrap: wrap; gap: 24px;
  padding: 16px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-bottom: 48px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
}
.fn-filter a { color: var(--ink-soft); text-decoration: none; transition: color 200ms; }
.fn-filter a:hover { color: var(--gold-warm); }
.fn-filter a.is-active { color: var(--ink); border-bottom: 1px solid var(--gold-warm); padding-bottom: 4px; }

/* Notes grid */
.fn-grid {
  display: grid; grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px)  { .fn-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } }
@media (min-width: 1024px) { .fn-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; } }

.fn-card {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--rule);
  text-decoration: none; color: inherit;
  transition: transform 300ms, box-shadow 300ms;
  overflow: hidden;
}
.fn-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px -12px rgba(20,17,13,0.12); }
.fn-card__photo {
  aspect-ratio: 4 / 3;
  background-size: cover; background-position: center;
  filter: contrast(1.04) saturate(0.92);
}
.fn-card__body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.fn-card__type {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: 0.15em;
  color: var(--gold-warm); text-transform: uppercase;
}
.fn-card__title {
  font-size: 20px; font-weight: 700; line-height: 1.25;
  letter-spacing: -0.015em; color: var(--ink); margin: 0;
}
.fn-card__deck {
  font-size: 14px; line-height: 1.55; color: var(--ink-soft);
  margin: 0; flex: 1;
}
.fn-card__meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: 0.1em;
  color: var(--ink-faint); text-transform: uppercase;
  padding-top: 16px; border-top: 1px solid var(--rule); margin-top: auto;
}

/* Field Note detail — long-form article */
.fn-article {
  max-width: 720px; margin: 0 auto;
}
.fn-article p { font-size: 19px; line-height: 1.8; color: var(--ink); margin: 0 0 28px; }
.fn-article h2 {
  font-size: 32px; font-weight: 700; letter-spacing: -0.015em;
  color: var(--ink); margin: 56px 0 24px;
  padding-top: 24px; border-top: 1px solid var(--rule);
}
.fn-article h3 {
  font-size: 22px; font-weight: 700; color: var(--ink);
  margin: 40px 0 16px;
}
.fn-article blockquote {
  margin: 40px 0;
  padding: 24px 32px;
  border-left: 3px solid var(--gold-warm);
  background: var(--paper-alt);
  font-family: "Playfair Display", serif; font-style: italic;
  font-size: 22px; line-height: 1.5; color: var(--ink);
}
.fn-article ul, .fn-article ol { font-size: 17px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 28px 24px; }
.fn-article li { margin-bottom: 8px; padding-left: 8px; }
.fn-article a { color: var(--gold-warm); border-bottom: 1px solid var(--gold-warm); }

/* TL;DR box */
.fn-tldr {
  border-left: 2px solid var(--gold-warm);
  background: var(--paper-alt);
  padding: 24px 32px;
  margin: 0 0 56px;
}
.fn-tldr__label {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.15em;
  color: var(--gold-warm); text-transform: uppercase;
  display: block; margin-bottom: 12px;
}
.fn-tldr ul { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.6; color: var(--ink); }

/* ---------- Section heads on cinematic backgrounds use light variants ---------- */
.field-section--dark { background: var(--ink); color: #F5F0E6; }
.field-section--dark .ref-tag { color: rgba(245,240,230,0.85); }
.field-section--dark .section-head__title { color: #F5F0E6; }
.field-section--dark .section-head { border-bottom-color: rgba(245,240,230,0.15); }
.field-section--dark .principle-text { color: #F5F0E6; }
.field-section--dark .principles li { border-bottom-color: rgba(245,240,230,0.1); }

/* =====================================================================
   SOLUTION-PAGE COMPONENTS
   Used by /solutions/business-central.php and /solutions/project-online-migration.php
   Styled to match the existing Field Station vocabulary.
   ===================================================================== */

/* ---------- bc-fit · two-column "right fit / wrong fit" comparison ---------- */
.bc-fit {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-top: 56px;
}
@media (min-width: 900px) {
  .bc-fit { grid-template-columns: 1fr 1fr; gap: 56px; }
}
.bc-fit__col {
  padding: 32px 0 0;
  border-top: 2px solid var(--rule);
}
.bc-fit__col--right { border-top-color: var(--gold-warm); }
.bc-fit__col--wrong { border-top-color: var(--ink-faint); }
.bc-fit__heading {
  font-family: "Inter", sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 12px 0 24px;
}
.bc-fit__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bc-fit__list li {
  position: relative;
  padding: 16px 0 16px 28px;
  border-bottom: 1px solid var(--rule);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
}
.bc-fit__list li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 16px;
  color: var(--gold-warm);
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
}
.bc-fit__list--soft li { color: var(--ink-soft); }
.bc-fit__list--soft li::before { content: "✕"; color: var(--ink-faint); font-size: 12px; top: 18px; }

/* ---------- bc-reasons · five-card "why it wins" grid ---------- */
.bc-reasons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-top: 56px;
}
@media (min-width: 700px)  { .bc-reasons { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .bc-reasons { grid-template-columns: repeat(3, 1fr); } }
.bc-reason {
  padding: 32px 28px 36px;
  background: #FFFFFF;
  border: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 320ms ease, box-shadow 320ms ease, border-color 320ms ease;
}
.bc-reason:hover {
  transform: translateY(-3px);
  border-color: var(--rule-strong);
  box-shadow: 0 18px 40px -16px rgba(15,24,40,0.16);
}
.bc-reason__num {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 500;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.bc-reason__title {
  font-family: "Inter", sans-serif;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}
.bc-reason__body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
}

/* ---------- bc-engagement-meta · definition list for "typical engagement" ---------- */
.bc-engagement-meta {
  margin: 56px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--rule);
}
.bc-engagement-meta > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 24px 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 768px) {
  .bc-engagement-meta > div { grid-template-columns: 220px 1fr; gap: 32px; align-items: baseline; }
}
.bc-engagement-meta dt {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--gold-warm);
  text-transform: uppercase;
  margin: 0;
}
.bc-engagement-meta dd {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
}

/* ---------- path · migration-path comparison cards ---------- */
.path {
  margin: 40px 0 0;
  padding: 40px 0 0;
  border-top: 1px solid var(--rule);
}
.path:first-of-type { margin-top: 56px; }
.path__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "letter name"
    "letter plat"
    "time   time";
  column-gap: 24px;
  row-gap: 4px;
  align-items: baseline;
  margin-bottom: 24px;
}
@media (min-width: 900px) {
  .path__meta {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "letter name time" "letter plat time";
    column-gap: 32px;
  }
}
.path__letter {
  grid-area: letter;
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 500;
  font-size: 88px;
  line-height: 0.95;
  letter-spacing: -0.03em;
  align-self: start;
}
.path__name {
  grid-area: name;
  font-family: "Inter", sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  align-self: end;
}
.path__plat {
  grid-area: plat;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--gold-warm);
  text-transform: uppercase;
}
.path__time {
  grid-area: time;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--ink-faint);
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--rule);
  justify-self: start;
}
@media (min-width: 900px) { .path__time { justify-self: end; align-self: center; } }
.path__best {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 32px;
  max-width: 820px;
}
.path__pros-cons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 768px) {
  .path__pros-cons { grid-template-columns: 1fr 1fr; gap: 56px; }
}
.path__label {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.path__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.path__list li {
  position: relative;
  padding: 10px 0 10px 22px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
}
.path__list li::before {
  content: "+";
  position: absolute;
  left: 0;
  top: 10px;
  color: var(--gold-warm);
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  font-weight: 600;
}
.path__list--soft li { color: var(--ink-soft); }
.path__list--soft li::before { content: "−"; color: var(--ink-faint); }

/* =====================================================================
   VIBE-OS DIAGRAM FIGURES — architectural drawings, watchmaker register
   Inline SVG, responsive, framed like a technical plate.
   ===================================================================== */
.vibe-fig-wrap {
  margin: 96px 0 0;
  padding-top: 56px;
  border-top: 1px solid var(--rule);
}
.vibe-fig-wrap + .vibe-fig-wrap { margin-top: 80px; }
.vibe-fig-caption { max-width: 720px; margin-bottom: 40px; }
.vibe-fig-caption .ref-tag { display: block; margin-bottom: 12px; }
.vibe-fig-caption p {
  font-size: 17px; line-height: 1.6; color: var(--ink-soft); margin: 0;
}
.vibe-fig {
  display: block;
  width: 100%; max-width: 1100px;
  height: auto;
  margin: 0 auto;
  background: #FFFFFF;
  border: 1px solid var(--rule);
  padding: 12px;
  box-shadow: 0 24px 48px -28px rgba(15,24,40,0.18);
}

/* ----- Mobile: figures shrink illegibly when scaled to viewport.
   Below 900px, allow the figure to keep its native width and let the
   wrapper scroll horizontally. The caption sits above and stays inside
   the visible viewport because it has its own max-width. ----- */
@media (max-width: 899px) {
  .vibe-fig-wrap {
    margin-left: -12px; margin-right: -12px;
    padding-left: 12px; padding-right: 12px;
  }
  .vibe-fig-wrap > svg.vibe-fig {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .vibe-fig {
    width: auto;
    min-width: 900px;
    max-width: none;
  }
  /* Wrap the SVG in a horizontal scroller via a sibling helper.
     The wrapper itself scrolls; SVG keeps its native viewBox. */
  .vibe-fig-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .vibe-fig-caption {
    /* keep caption pinned to the visible left edge while wrapper scrolls */
    position: sticky;
    left: 12px;
    max-width: calc(100vw - 48px);
  }
  .vibe-fig-caption::after {
    content: "← swipe to explore →";
    display: block;
    margin-top: 12px;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px; letter-spacing: 0.15em;
    color: var(--ink-faint);
    text-transform: uppercase;
  }
}