/* ============================================================
   Crucible Consulting — shared stylesheet
   Dark forge. One molten light source. Restraint is the brand.

   Contents
   01  Design tokens (custom properties)
   02  Reset and base
   03  Typography
   04  Layout primitives
   05  Header and navigation
   06  Buttons and links
   07  Eyebrows, rules, annotation
   08  Hero and the vessel
   09  Cards and grids
   10  Lists, credibility, steps
   11  FAQ
   12  Contact
   13  CTA band and footer
   14  Motion: scroll-reveal and entrance
   15  Reduced motion and print
   ============================================================ */

/* 01 — Design tokens ---------------------------------------- */
:root {
  /* Palette */
  --forge:    #0D0D0F;   /* dominant surface */
  --graphite: #1C1D21;   /* panels, raised surfaces */
  --graphite-2: #16171A; /* a step between forge and graphite */
  --steel:    #565B62;   /* decorative ticks and rules only */
  --ash:      #9DA2A8;   /* secondary text, captions */
  --cast:     #F5F2EC;   /* body text on dark */
  --molten:   #E04E1B;   /* the hero accent: links, CTAs, the mark */
  --ember:    #FF7A2F;   /* highlight, hover, peak of gradient */
  --amber:    #C07A2B;   /* cooler secondary accent */

  /* Derived surfaces and lines */
  --line:        rgba(245, 242, 236, 0.10);
  --line-strong: rgba(245, 242, 236, 0.18);
  --line-molten: rgba(224, 78, 27, 0.55);
  --wash-molten: rgba(224, 78, 27, 0.08);
  --selection-bg: var(--ember);
  --selection-fg: #160A02;

  /* Molten flow gradient — thin and deliberate only */
  --molten-flow: linear-gradient(90deg, #8E1B06 0%, #E04E1B 38%, #FF7A2F 72%, #FBBF77 100%);

  /* Typography */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Menlo", monospace;

  --fs-label:   0.875rem;                                       /* 14px mono labels */
  --fs-body-sm: clamp(1rem, 0.97rem + 0.14vw, 1.0625rem);       /* 16 → 17 */
  --fs-body:    clamp(1.1875rem, 1.14rem + 0.24vw, 1.3125rem);  /* 19 → 21 */
  --fs-lead:    clamp(1.3125rem, 1.18rem + 0.62vw, 1.625rem);   /* 21 → 26 */
  --fs-h3:      clamp(1.3rem, 1.16rem + 0.66vw, 1.625rem);      /* 21 → 26 */
  --fs-h2:      clamp(1.9rem, 1.52rem + 1.78vw, 2.9rem);        /* 30 → 46 */
  --fs-h1:      clamp(2.6rem, 1.96rem + 3.05vw, 4.5rem);        /* 42 → 72 */

  --lh-tight: 1.08;
  --lh-snug:  1.22;
  --lh-body:  1.65;

  --ls-display: -0.02em;
  --ls-tight:  -0.01em;
  --ls-label:   0.18em;
  --ls-word:    0.12em;

  --measure: 66ch;

  /* Spacing scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  --section-py: clamp(4.5rem, 9vw, 9rem);
  --gap: clamp(1.25rem, 2.6vw, 2.25rem);

  /* Geometry */
  --container: 1180px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --radius-sm: 4px;
  --radius:    10px;
  --radius-lg: 16px;
  --header-h:  72px;

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-2: 0 18px 40px rgba(0, 0, 0, 0.55);
  --shadow-molten: 0 14px 36px rgba(224, 78, 27, 0.16);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.20, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.30, 1);
  --dur-fast: 150ms;
  --dur: 260ms;
  --dur-slow: 600ms;
}

/* 02 — Reset and base --------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--forge);
  color: var(--cast);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100svh;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
svg { height: auto; }

::selection { background: var(--selection-bg); color: var(--selection-fg); }

:focus-visible {
  outline: 3px solid var(--ember);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100%;
  z-index: 1000;
  background: var(--cast);
  color: var(--forge);
  padding: 0.7em 1.1em;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--sp-4); }

/* 03 — Typography ------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--cast);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  font-weight: 700;
}
h2 { font-size: var(--fs-h2); font-weight: 600; }
h3 { font-size: var(--fs-h3); font-weight: 500; }

p { text-wrap: pretty; }

strong { color: var(--cast); font-weight: 600; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--cast);
  max-width: 40ch;
}

.prose { max-width: var(--measure); }
.prose p + p { margin-top: var(--sp-5); }
.prose p { color: var(--cast); }

.measure-wide { max-width: 56ch; }

.muted { color: var(--ash); }

/* 04 — Layout primitives ------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.container--narrow { max-width: 880px; }

.section { padding-block: var(--section-py); }
.section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }
.section--panel { background: var(--graphite-2); border-block: 1px solid var(--line); }

.section-head { max-width: 60ch; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.section-head .lead { margin-top: var(--sp-5); color: var(--ash); }
.section-head h2 { margin-top: var(--sp-4); }

.stack > * + * { margin-top: var(--sp-5); }

.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(2, 1fr); }

/* 05 — Header and navigation -------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--forge) 82%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.site-header.is-scrolled {
  border-bottom-color: var(--line);
  background: color-mix(in srgb, var(--forge) 92%, transparent);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: var(--header-h);
}

/* Wordmark */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--cast);
}
.wordmark__mark { width: 26px; height: 26px; flex: none; }
.wordmark__type {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.18rem;
  letter-spacing: var(--ls-word);
  line-height: 1;
}
.wordmark__sub {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.34em;
  color: var(--ash);
  text-transform: uppercase;
  line-height: 1;
  margin-top: 3px;
}
.wordmark__lockup { display: flex; flex-direction: column; }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.4vw, 2.25rem);
  list-style: none;
  padding: 0;
}
.nav__link {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ash);
  text-decoration: none;
  padding: 0.35em 0;
  position: relative;
  transition: color var(--dur-fast) var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1.5px;
  background: var(--molten);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav__link:hover { color: var(--cast); }
.nav__link:hover::after,
.nav__link:focus-visible::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--cast); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); background: var(--steel); }

.nav__cta { margin-left: var(--sp-2); }

/* Mobile toggle — only shown when JS is enabled */
.nav__toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--cast);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease);
}
.nav__toggle:hover { border-color: var(--molten); }
.nav__toggle-bars { display: block; width: 18px; height: 12px; position: relative; }
.nav__toggle-bars span {
  position: absolute; left: 0; width: 100%; height: 1.5px;
  background: currentColor; transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav__toggle-bars span:nth-child(1) { top: 0; }
.nav__toggle-bars span:nth-child(2) { top: 5px; }
.nav__toggle-bars span:nth-child(3) { top: 10px; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* 06 — Buttons and links ------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 0.85em 1.35em;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease),
              background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.btn--primary {
  background: var(--molten);
  color: var(--forge);
  font-weight: 600;
  box-shadow: var(--shadow-1);
}
.btn--primary:hover {
  background: var(--ember);
  transform: translateY(-2px);
  box-shadow: var(--shadow-molten);
}
.btn--primary:active { transform: translateY(0); box-shadow: var(--shadow-1); }

.btn--ghost {
  background: transparent;
  color: var(--cast);
  border-color: var(--line-strong);
}
.btn--ghost:hover {
  border-color: var(--molten);
  color: var(--ember);
  transform: translateY(-2px);
}
.btn--ghost:active { transform: translateY(0); }

.btn--sm { padding: 0.6em 1em; font-size: 0.8125rem; }
.btn .btn__arrow { transition: transform var(--dur) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* Inline text link with molten underline grow */
.link {
  color: var(--molten);
  text-decoration: none;
  background-image: linear-gradient(var(--ember), var(--ember));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1.5px;
  transition: background-size var(--dur) var(--ease), color var(--dur-fast) var(--ease);
  padding-bottom: 1px;
}
.link:hover { color: var(--ember); background-size: 100% 1.5px; }

.prose a { color: var(--molten); text-decoration: none;
  background-image: linear-gradient(var(--ember), var(--ember));
  background-position: 0 100%; background-repeat: no-repeat; background-size: 0% 1.5px;
  transition: background-size var(--dur) var(--ease), color var(--dur-fast) var(--ease);
  padding-bottom: 1px; }
.prose a:hover { color: var(--ember); background-size: 100% 1.5px; }

.cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }

/* 07 — Eyebrows, rules, annotation -------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--molten);
  font-weight: 500;
}
.eyebrow--ash { color: var(--ash); }
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: currentColor;
  flex: none;
  opacity: 0.85;
}
.eyebrow--plain::before { display: none; }

.rule {
  width: 84px; height: 3px;
  background: var(--molten);
  border-radius: 2px;
  margin-block: var(--sp-5);
}
.rule--flow { background: var(--molten-flow); }
.rule--full { width: 100%; height: 1px; background: var(--line); border-radius: 0; }

.kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ash);
}

.annotation {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--steel);
  text-transform: uppercase;
}

/* 08 — Hero and the vessel ---------------------------------- */
.hero { position: relative; padding-block: clamp(3.5rem, 7vw, 7rem) clamp(4rem, 8vw, 8rem); overflow: hidden; }
.hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}
.hero__content { max-width: 36ch; }
.hero h1 { margin-top: var(--sp-5); }
.hero__lead {
  margin-top: var(--sp-6);
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ash);
  max-width: 32ch;
}
.hero__lead strong { color: var(--cast); font-weight: 500; }
.hero__cta { margin-top: clamp(2rem, 4vw, 2.75rem); }
.hero__meta {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.hero__meta span { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.06em; color: var(--ash); }
.hero__meta span b { color: var(--cast); font-weight: 500; }

/* Vessel */
.vessel { width: 100%; max-width: 460px; margin-inline: auto; }
.vessel__svg { width: 100%; height: auto; overflow: visible; }
.hero__coords {
  position: absolute;
  right: var(--container-pad);
  bottom: var(--sp-5);
  text-align: right;
  pointer-events: none;
}

/* The breathing glow */
.vessel__glow { transform-origin: 200px 168px; animation: breathe 6s var(--ease) infinite; }
@keyframes breathe {
  0%, 100% { opacity: 0.82; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.045); }
}
.spark { opacity: 0; animation: spark-rise 5.5s linear infinite; }
.spark--2 { animation-delay: 1.8s; }
.spark--3 { animation-delay: 3.4s; }
@keyframes spark-rise {
  0%   { opacity: 0; transform: translateY(0); }
  12%  { opacity: 0.9; }
  60%  { opacity: 0; transform: translateY(-46px); }
  100% { opacity: 0; transform: translateY(-46px); }
}

/* 09 — Cards and grids -------------------------------------- */
.card {
  position: relative;
  background: var(--graphite);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  transition: transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
  height: 100%;
}
.card:hover {
  transform: translateY(-3px);
  border-color: var(--line-molten);
  box-shadow: var(--shadow-2);
}
.card__kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--molten);
  display: block;
  margin-bottom: var(--sp-4);
}
.card:hover .card__kicker { color: var(--ember); }
.card h3 { margin-bottom: var(--sp-3); }
.card p { color: var(--ash); font-size: var(--fs-body-sm); line-height: 1.6; }
.card__proof {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--steel);
}
.card__proof b { color: var(--ash); font-weight: 500; }

/* Engagement card with index */
.card--engagement h3 { font-size: var(--fs-h3); }

/* 10 — Lists, credibility, steps ---------------------------- */
.feature-list { list-style: none; padding: 0; display: grid; gap: var(--sp-5); }
.feature-list li { position: relative; padding-left: 1.8rem; }
.feature-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 9px; height: 9px;
  background: var(--molten);
  border-radius: 1px;
  transform: rotate(45deg);
}
.feature-list h3 { font-size: var(--fs-h3); margin-bottom: var(--sp-2); }
.feature-list p { color: var(--ash); font-size: var(--fs-body-sm); }

/* Definition / credibility grid */
.facts {
  list-style: none; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
.facts li {
  padding: var(--sp-5) var(--sp-5) var(--sp-5) 0;
  border-bottom: 1px solid var(--line);
}
.facts dt, .facts .fact__label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--molten);
  margin-bottom: var(--sp-2);
}
.facts dd, .facts .fact__value { color: var(--cast); font-size: var(--fs-body-sm); line-height: 1.5; }

/* Steps — a real sequence */
.steps { list-style: none; padding: 0; counter-reset: step; display: grid; gap: var(--sp-2); }
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-5);
  align-items: start;
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--line);
}
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  color: var(--molten);
  padding-top: 0.35em;
}
.steps h3 { font-size: var(--fs-h3); margin-bottom: var(--sp-2); }
.steps p { color: var(--ash); font-size: var(--fs-body-sm); }

/* Tag row */
.tags { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.tags li {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--ash);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 0.5em 1em;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.tags li:hover { border-color: var(--line-molten); color: var(--cast); }

/* The founder note — a set-apart, first-person panel */
.note {
  position: relative;
  padding-left: clamp(1.25rem, 3vw, 2.25rem);
  border-left: 2px solid var(--molten);
}
.note p { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem); line-height: 1.55; }
.note p + p { margin-top: var(--sp-5); }
.note .sign {
  margin-top: var(--sp-6);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ash);
}

/* 11 — FAQ -------------------------------------------------- */
.faq-group { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.faq-group__label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--molten);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
}
.faq {
  border-bottom: 1px solid var(--line);
}
.faq > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-5) 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  color: var(--cast);
  transition: color var(--dur-fast) var(--ease);
}
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary:hover { color: var(--ember); }
.faq__icon { flex: none; width: 20px; height: 20px; margin-top: 0.3em; position: relative; }
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; background: var(--molten);
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}
.faq__icon::before { top: 9px; left: 0; width: 20px; height: 2px; }
.faq__icon::after  { left: 9px; top: 0; width: 2px; height: 20px; }
.faq[open] .faq__icon::after { transform: scaleY(0); opacity: 0; }
.faq__body { padding: 0 0 var(--sp-6); max-width: var(--measure); }
.faq__body p { color: var(--ash); }
.faq__body p + p { margin-top: var(--sp-4); }

/* 12 — Contact ---------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.channels { list-style: none; padding: 0; display: grid; gap: var(--sp-5); margin-top: var(--sp-6); }
.channel {
  display: block;
  padding: var(--sp-5);
  background: var(--graphite);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.channel:hover { transform: translateY(-3px); border-color: var(--line-molten); box-shadow: var(--shadow-2); }
.channel__label { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--molten); }
.channel__value { display: block; margin-top: var(--sp-2); color: var(--cast); font-size: var(--fs-h3); font-family: var(--font-display); font-weight: 500; word-break: break-word; }
.channel:hover .channel__value { color: var(--ember); }

.form { margin-top: var(--sp-6); }
.form__row { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.form__row label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ash);
}
.form__row input,
.form__row textarea {
  width: 100%;
  background: var(--graphite-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--cast);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  padding: 0.8em 0.9em;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.form__row input::placeholder,
.form__row textarea::placeholder { color: var(--steel); }
.form__row input:focus,
.form__row textarea:focus {
  outline: none;
  border-color: var(--molten);
  box-shadow: 0 0 0 3px var(--wash-molten);
}
.form__row textarea { resize: vertical; min-height: 140px; }
.form__note { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--steel); margin-top: var(--sp-4); }
.form__status { font-size: var(--fs-body-sm); color: var(--ember); margin-top: var(--sp-4); min-height: 1.2em; }

/* 13 — CTA band and footer ---------------------------------- */
.cta-band { background: var(--graphite-2); border-block: 1px solid var(--line); }
.cta-band__inner { display: grid; grid-template-columns: 1.4fr auto; align-items: center; gap: clamp(2rem, 5vw, 4rem); }
.cta-band h2 { max-width: 18ch; }
.cta-band p { color: var(--ash); margin-top: var(--sp-4); max-width: 44ch; }

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: clamp(3rem, 6vw, 5rem) var(--sp-7);
}
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--gap); }
.footer__brand { max-width: 34ch; }
.footer__brand .wordmark { margin-bottom: var(--sp-4); }
.footer__brand p { color: var(--ash); font-size: var(--fs-body-sm); }
.footer__col h4 {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
  font-weight: 500;
  margin-bottom: var(--sp-4);
}
.footer__col ul { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }
.footer__col a {
  color: var(--ash);
  text-decoration: none;
  font-size: var(--fs-body-sm);
  transition: color var(--dur-fast) var(--ease);
}
.footer__col a:hover { color: var(--ember); }
.footer__bottom {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-4);
  align-items: center;
}
.footer__bottom p, .footer__bottom span {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--steel);
}
.footer__tag { color: var(--ash) !important; text-transform: uppercase; }

/* 14 — Motion: scroll-reveal and entrance ------------------- */
/* Reveal is opt-in only when JS is enabled, so no-JS shows everything. */
.js-enabled .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  will-change: opacity, transform;
}
.js-enabled .reveal.is-visible {
  opacity: 1;
  transform: none;
}
/* Light stagger for grouped items */
.js-enabled .reveal[data-delay="1"] { transition-delay: 80ms; }
.js-enabled .reveal[data-delay="2"] { transition-delay: 160ms; }
.js-enabled .reveal[data-delay="3"] { transition-delay: 240ms; }
.js-enabled .reveal[data-delay="4"] { transition-delay: 320ms; }
.js-enabled .reveal[data-delay="5"] { transition-delay: 400ms; }

/* Hero entrance: one orchestrated moment, under ~700ms */
.js-enabled .hero__animate {
  opacity: 0;
  transform: translateY(14px);
  animation: hero-in var(--dur-slow) var(--ease-out) forwards;
}
.js-enabled .hero__animate[style*="--i:0"] { animation-delay: 60ms; }
.js-enabled .hero__animate.d1 { animation-delay: 140ms; }
.js-enabled .hero__animate.d2 { animation-delay: 240ms; }
.js-enabled .hero__animate.d3 { animation-delay: 340ms; }
.js-enabled .hero__animate.d4 { animation-delay: 440ms; }
.js-enabled .hero__vessel-wrap { opacity: 0; animation: vessel-in 700ms var(--ease-out) 200ms forwards; }
@keyframes hero-in { to { opacity: 1; transform: none; } }
@keyframes vessel-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }

/* 15 — Reduced motion and print ----------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js-enabled .reveal { opacity: 1; transform: none; }
  .js-enabled .hero__animate,
  .js-enabled .hero__vessel-wrap { opacity: 1; transform: none; animation: none; }
  .vessel__glow { animation: none; }
  .spark { display: none; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  :root { --header-h: 66px; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .footer__top { grid-template-columns: 1.4fr 1fr; }
}

@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__content { max-width: 100%; order: 2; }
  .hero__vessel-wrap { order: 1; }
  .vessel { max-width: 320px; }
  .hero__coords { display: none; }
  .contact-grid { grid-template-columns: 1fr; }
  .cta-band__inner { grid-template-columns: 1fr; align-items: start; }

  /* Mobile nav: links hidden behind toggle ONLY when JS is on */
  .nav__toggle { display: none; }
  .js-enabled .nav__toggle { display: inline-flex; }
  .js-enabled .nav__links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--forge);
    border-bottom: 1px solid var(--line);
    padding: var(--sp-3) var(--container-pad) var(--sp-6);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height var(--dur) var(--ease), opacity var(--dur) var(--ease), visibility var(--dur);
  }
  .js-enabled .nav.is-open .nav__links {
    max-height: 70vh;
    opacity: 1;
    visibility: visible;
  }
  .nav__links .nav__link {
    padding: var(--sp-4) 0;
    font-size: 0.95rem;
    border-bottom: 1px solid var(--line);
  }
  .nav__links .nav__link::after { display: none; }
  .nav__cta { margin: var(--sp-5) 0 0; }
  .nav__cta .btn { width: 100%; justify-content: center; }
  .site-header { position: sticky; }
  .nav { position: relative; }
}

@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; }
  .facts li { padding-right: 0; }
  .footer__top { grid-template-columns: 1fr; gap: var(--sp-6); }
  .steps li { grid-template-columns: 1fr; gap: var(--sp-2); }
  .steps li::before { padding-top: 0; }
  .wordmark__sub { letter-spacing: 0.28em; }
  .hero__meta { gap: var(--sp-3) var(--sp-5); }
}