/* ============================================================
   NICOLE STEINMETZ — HOME
   Figma: "Nicole Steinmetz" → Home (node 1:2), 1440 × 3243
   ------------------------------------------------------------
   Figma positions everything absolutely. This does not. The
   design was measured, then rebuilt in normal document flow so
   it reflows on real devices. Comments carry the original Figma
   y-coordinates so any drift is traceable back to the source.

   Breakpoints: 1040px (tablet) and 640px (phone). No mobile
   frame exists in Figma — everything below 1040 is an
   interpretation and needs your eyes on it.
   ============================================================ */

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

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

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

h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img, picture, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

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

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: var(--s-4); top: -100%;
  z-index: 100; padding: var(--s-3) var(--s-5);
  background: var(--rust); color: var(--on-dark);
  border-radius: var(--r-pill); font-weight: 700;
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: var(--s-4); }

/* ---- LAYOUT ------------------------------------------------ */
.container {
  width: 100%;
  max-width: calc(var(--page-max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---- PILL BUTTONS ------------------------------------------
   Figma: 33px tall, 40px radius, Helvetica Neue Bold 16 white.
   Mapped to Inter 700 — see tokens.css → TYPOGRAPHY.          */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 33px;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  color: var(--on-dark);
  font-size: var(--fs-ui);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.pill:hover { transform: translateY(-1px); }
.pill:active { transform: translateY(0); }

.pill--amber { background: var(--amber); }
.pill--amber:hover, .pill--amber:active { background: var(--amber-press); }
.pill--blue  { background: var(--blue); }
.pill--blue:hover, .pill--blue:active { background: var(--blue-press); }
.pill--rust  { background: var(--rust); }
.pill--rust:hover, .pill--rust:active { background: var(--blue); }

.pill--has-icon { padding-right: var(--s-2); }
.pill__icon { flex: none; width: 21px; height: 21px; }
.pill--rust .pill__icon path {
  fill: var(--rust);
  transition: fill var(--dur-fast) var(--ease);
}
.pill--rust:hover .pill__icon path,
.pill--rust:active .pill__icon path { fill: var(--blue); }

/* ============================================================
   HEADER — Figma y=28, logo x=80, pills right-aligned to x=1360
   ============================================================ */
.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 10;
  padding-block: 28px;
}
.site-header__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-6);
  width: 100%;
  max-width: calc(var(--page-max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* Figma logo block: x 80→273, y 33→128 */
.site-header__logo img { width: 193px; height: auto; }

.nav__list { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; }

/* ============================================================
   HERO — image 1440×703 at y=0; copy block starts y=679
   ============================================================ */
.hero { position: relative; }

.hero__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 703;
  object-fit: cover;
}

/* Figma overlaps the eyebrow 24px into the image. The image
   bottom is near-white so the overlap reads as flush.          */
.hero__copy {
  position: relative;
  margin-top: -24px;
  padding-bottom: 152px;   /* cta bottom 1023 → pillar icons 1175 */
  text-align: center;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  line-height: 2.35;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Figma: eyebrow y=679 → h1 y=746 */
.hero__title {
  max-width: 791px;
  margin: 27px auto 0;
  min-height: calc(var(--fs-h1) * var(--lh-tight) * var(--hero-title-lines));
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: var(--lh-tight);
  text-wrap: balance;
  color: var(--ink);
}
/* Hide the title until the type-on starts so the full string
   does not flash, then get wiped. No-JS keeps it visible. */
.js .hero__title:not(.is-typing):not(.is-typed) .hero__title-text {
  visibility: hidden;
}
.hero__title.is-typing { text-wrap: wrap; }
.hero__title.is-typing .hero__title-text::after {
  content: "";
  display: inline-block;
  width: var(--hero-caret-w);
  height: 0.85em;
  margin-left: var(--s-1);
  background: var(--ink);
  vertical-align: -0.08em;
  animation: hero-caret var(--hero-caret-blink) step-end infinite;
}
@keyframes hero-caret {
  50% { opacity: 0; }
}

/* Figma: h1 y=746 → lede y=885 */
.hero__lede {
  max-width: 791px;
  margin: 47px auto 0;
  font-size: var(--fs-lede);
  line-height: var(--lh-lede);
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* Figma: lede y=885 → cta y=990 */
.hero__cta { margin-top: 33px; }

/* ============================================================
   PILLARS — Figma cols x=80 / 514 / 937, icons y=1175
   ============================================================ */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-7);
  align-items: start;
}
.pillar__icon { width: 45px; height: 45px; }
.pillar__icon--platform { width: 43px; height: 47px; }

/* Figma: icon y=1175 (h45) → title y=1246 */
.pillar__title {
  margin-top: 26px;
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
}
/* Figma: title y=1246 → body y=1303 */
.pillar__body {
  margin-top: 30px;
  max-width: 42ch;
  font-size: var(--fs-body);
  line-height: var(--lh-compact);
  color: var(--ink);
}

/* ============================================================
   HOW WE BUILD — tools panel 386×377 + card 874×369
   Figma: section top y≈1481, gap between the two = 26px
   ============================================================ */
.how {
  display: grid;
  grid-template-columns: 386px minmax(0, 1fr);
  gap: 26px;
  align-items: stretch;
  margin-top: 123px;   /* pillar body bottom 1358 → 1481 */
}

/* Live HTML/CSS/JS card — source: Nicole___Tool_Stack_Card_v5.html
   The Figma PNG (380:47) is a copy reference only. Overlays inside
   the card (field + arrow) are local; the section stays in flow. */
.how__tools {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  width: 100%;
  height: 100%;
  aspect-ratio: var(--tools-ratio);
  min-height: 280px;
  padding-block: var(--tools-pad-y);
  background: var(--tools-card);
  border: 1px solid var(--tools-card-line);
  border-radius: var(--r-tools);
}
.how__tools-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-content: space-evenly;
  justify-items: center;
  padding: var(--tools-field-y) var(--tools-field-x);
  -webkit-mask-image: var(--tools-mask);
  mask-image: var(--tools-mask);
}
.how__tools-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  opacity: 0;
  transform: translateY(var(--tools-enter-y)) scale(.94);
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.how__tools-label {
  font-size: var(--fs-chip-label);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink-faint);
  white-space: nowrap;
}
.how__tools-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--tools-chip-gap);
  width: var(--tools-chip-w);
  height: var(--tools-chip-h);
  padding: 0 var(--s-3);
  border-radius: var(--r-chip);
  background: var(--tools-chip);
  border: 1px solid var(--tools-chip-line);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .6);
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out);
}
.how__tools-icon {
  width: var(--tools-icon);
  height: var(--tools-icon);
  flex: none;
  filter: grayscale(1) opacity(.55);
  transition: filter var(--dur-enter) var(--ease-out);
}
.how__tools-icon svg { width: 100%; height: 100%; }
.how__tools-word {
  font-size: var(--fs-chip);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink-faint);
  white-space: nowrap;
  transition: color var(--dur-enter) var(--ease-out);
}
.how__tools-unit:hover .how__tools-chip,
.how__tools-unit.is-lit .how__tools-chip {
  transform: translateY(-3px) scale(1.03);
  background: var(--paper);
  border-color: color-mix(in srgb, var(--ink) 16%, transparent);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--ink) 12%, transparent), inset 0 1px 0 rgb(255 255 255 / .7);
}
.how__tools-unit:hover .how__tools-icon,
.how__tools-unit.is-lit .how__tools-icon { filter: grayscale(0) opacity(1); }
.how__tools-unit:hover .how__tools-word,
.how__tools-unit.is-lit .how__tools-word { color: var(--ink); }

.how__tools.in-view .how__tools-unit { opacity: 1; transform: translateY(0) scale(1); }
.how__tools.in-view .how__tools-unit:nth-child(1) { transition-delay: var(--tools-enter); }
.how__tools.in-view .how__tools-unit:nth-child(2) { transition-delay: calc(var(--tools-enter) + var(--tools-stagger)); }
.how__tools.in-view .how__tools-unit:nth-child(3) { transition-delay: calc(var(--tools-enter) + var(--tools-stagger) * 2); }
.how__tools.in-view .how__tools-unit:nth-child(4) { transition-delay: calc(var(--tools-enter) + var(--tools-stagger) * 3); }
.how__tools.in-view .how__tools-unit:nth-child(5) { transition-delay: calc(var(--tools-enter) + var(--tools-stagger) * 4); }
.how__tools.in-view .how__tools-unit:nth-child(6) { transition-delay: calc(var(--tools-enter) + var(--tools-stagger) * 5); }
.how__tools.in-view .how__tools-unit:nth-child(7) { transition-delay: calc(var(--tools-enter) + var(--tools-stagger) * 6); }
.how__tools.in-view .how__tools-unit:nth-child(8) { transition-delay: calc(var(--tools-enter) + var(--tools-stagger) * 7); }

@media (prefers-reduced-motion: no-preference) {
  .how__tools.in-view .how__tools-unit { animation: tools-float var(--tools-float) ease-in-out infinite; }
  .how__tools.in-view .how__tools-unit:nth-child(odd) { animation-delay: -2.1s; }
  .how__tools.in-view .how__tools-unit:nth-child(3n) { animation-delay: -4.4s; }
  .how__tools.in-view .how__tools-unit:nth-child(4n) { animation-delay: -1s; }
}
@keyframes tools-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.how__tools-content {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: var(--tools-pad);
}
.how__tools-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  background: var(--paper);
  border: 1px solid var(--tools-card-line);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  color: var(--ink);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--ink) 6%, transparent);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out);
}
.how__tools.in-view .how__tools-eyebrow { opacity: 1; transform: translateY(0); }

.how__tools-arrow {
  position: absolute;
  top: var(--tools-pad);
  right: var(--tools-pad);
  z-index: 3;
  display: grid;
  place-items: center;
  width: var(--tools-arrow);
  height: var(--tools-arrow);
  border-radius: var(--r-chip);
  background: var(--paper);
  border: 1px solid var(--tools-card-line);
  color: var(--ink);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--ink) 8%, transparent);
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}
@media (prefers-reduced-motion: no-preference) {
  .how__tools-arrow { animation: tools-breathe var(--tools-breathe) ease-in-out infinite; }
}
@keyframes tools-breathe {
  0%, 100% { box-shadow: 0 4px 12px color-mix(in srgb, var(--ink) 8%, transparent); }
  50% { box-shadow: 0 4px 16px color-mix(in srgb, var(--amber) 18%, transparent); }
}
.how__tools-arrow:hover {
  animation: none;
  transform: translateY(-2px) scale(1.04);
  background: var(--amber);
  border-color: var(--amber);
  color: var(--on-dark);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--amber) 30%, transparent);
}
.how__tools-arrow svg { width: var(--s-4); height: var(--s-4); transition: transform var(--dur-base) var(--ease-out); }
.how__tools-arrow:hover svg { transform: translate(1px, -1px) rotate(8deg); }

@media (prefers-reduced-motion: reduce) {
  .how__tools-unit,
  .how__tools-chip,
  .how__tools-icon,
  .how__tools-word,
  .how__tools-arrow,
  .how__tools-arrow svg,
  .how__tools-eyebrow {
    transition: none !important;
    animation: none !important;
  }
  .how__tools .how__tools-unit,
  .how__tools .how__tools-eyebrow {
    opacity: 1 !important;
    transform: none !important;
  }
}

.how__card {
  background: var(--card);
  border: 0.5px solid var(--card-line);
  border-radius: var(--r-card);
  /* Figma card 1486→1855; title at 1531, body 1591, link 1787 */
  padding: 45px 57px 43px;
}
.how__title {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
}
.how__body {
  margin-top: 24px;
  max-width: 761px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
}
.learn-more {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: 30px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.learn-more:hover { color: var(--rust); border-bottom-color: currentColor; }
.learn-more span { transition: transform var(--dur-base) var(--ease); }
.learn-more:hover span { transform: translateX(4px); }

/* ============================================================
   PANELS — Figma 633×456 and 635×457 at y=1882, gap 24px
   Quote card is live HTML (Nicole___Quote_Card_v2.html).
   Start a Project is live HTML (Nicole___Start_Project_Card_v2.html).
   ============================================================ */
.panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 27px;   /* card bottom 1855 → panels 1882 */
  align-items: stretch;
}

/* Live quote card — overlays stay inside; the section is in flow. */
.quote-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  width: 100%;
  min-height: var(--quote-min-h);
  aspect-ratio: var(--quote-ratio);
  background: var(--tools-card);
  border: 1px solid var(--tools-card-line);
  border-radius: var(--r-quote);
}
.quote-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  -webkit-mask-image: var(--quote-mask);
  mask-image: var(--quote-mask);
}
.quote-blob {
  position: absolute;
  border-radius: var(--r-quote);
  background-image: var(--quote-dot);
  background-size: var(--quote-dot-size) var(--quote-dot-size);
  -webkit-mask-image: var(--quote-dot-mask);
  mask-image: var(--quote-dot-mask);
  opacity: 0;
  transition: opacity var(--quote-blob-in) var(--ease-out);
}
.quote-blob--a { top: 5%; right: 3%; width: 36%; height: 36%; }
.quote-blob--b { top: 32%; left: 1%; width: 26%; height: 36%; }
.quote-blob--c { bottom: 2%; left: 9%; width: 46%; height: 38%; }
.quote-card.in-view .quote-blob { opacity: 1; }
.quote-card.in-view .quote-blob--b { transition-delay: 120ms; }
.quote-card.in-view .quote-blob--c { transition-delay: 240ms; }

@media (prefers-reduced-motion: no-preference) {
  .quote-card.in-view .quote-blob { animation: quote-float var(--quote-float) ease-in-out infinite; }
  .quote-card.in-view .quote-blob--b { animation-delay: -3.2s; }
  .quote-card.in-view .quote-blob--c { animation-delay: -6.1s; }
}
@keyframes quote-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.quote-content { position: relative; z-index: 2; height: 100%; }

.quote-eyebrow {
  position: absolute;
  top: 6.5%;
  left: 4.5%;
  display: inline-flex;
  align-items: center;
  padding: var(--quote-eyebrow-pad);
  border-radius: var(--r-pill);
  background: var(--paper);
  border: 1px solid var(--tools-card-line);
  font-size: var(--fs-ui);
  font-weight: 700;
  color: var(--ink);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--ink) 7%, transparent);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out);
}
.quote-card.in-view .quote-eyebrow { opacity: 1; transform: translateY(0); }

.quote-arrow {
  position: absolute;
  top: var(--tools-pad);
  right: var(--tools-pad);
  z-index: 3;
  display: grid;
  place-items: center;
  width: var(--tools-arrow);
  height: var(--tools-arrow);
  border-radius: var(--r-chip);
  background: var(--paper);
  border: 1px solid var(--tools-card-line);
  color: var(--ink);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--ink) 8%, transparent);
  transition:
    transform var(--dur-quote) var(--ease-out),
    box-shadow var(--dur-quote) var(--ease-out),
    background var(--dur-quote) var(--ease-out),
    border-color var(--dur-quote) var(--ease-out),
    color var(--dur-quote) var(--ease-out);
}
@media (prefers-reduced-motion: no-preference) {
  .quote-arrow { animation: quote-breathe var(--tools-breathe) ease-in-out infinite; }
}
@keyframes quote-breathe {
  0%, 100% { box-shadow: 0 4px 12px color-mix(in srgb, var(--ink) 8%, transparent); }
  50% { box-shadow: 0 4px 16px color-mix(in srgb, var(--amber) 18%, transparent); }
}
.quote-arrow:hover,
.quote-arrow:focus-visible {
  animation: none;
  transform: translateY(-2px) scale(1.04);
  background: var(--amber);
  border-color: var(--amber);
  color: var(--on-dark);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--amber) 30%, transparent);
}
.quote-arrow svg {
  width: var(--s-4);
  height: var(--s-4);
  transition: transform var(--dur-base) var(--ease-out);
}
.quote-arrow:hover svg,
.quote-arrow:focus-visible svg { transform: translate(1px, -1px) rotate(8deg); }

.quote-panel {
  position: absolute;
  left: 17%;
  right: 17%;
  top: 23%;
  padding: var(--quote-panel-pad);
  background: var(--paper);
  border-radius: var(--r-quote-panel);
  box-shadow:
    0 20px 44px color-mix(in srgb, var(--ink) 10%, transparent),
    0 2px 6px color-mix(in srgb, var(--ink) 5%, transparent);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--quote-enter) var(--ease-out), transform var(--quote-enter) var(--ease-out);
}
.quote-card.in-view .quote-panel { opacity: 1; transform: translateY(0); transition-delay: 80ms; }

.quote-item {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-quote) var(--ease-out), transform var(--dur-quote) var(--ease-out);
}
.quote-card.in-view .quote-item { opacity: 1; transform: translateY(0); }
.quote-card.in-view .quote-item:nth-child(1) { transition-delay: 200ms; }
.quote-card.in-view .quote-item:nth-child(2) { transition-delay: 260ms; }
.quote-card.in-view .quote-item:nth-child(3) { transition-delay: 320ms; }
.quote-card.in-view .quote-item:nth-child(4) { transition-delay: 380ms; }

.quote-row {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  width: 100%;
  padding: var(--quote-row-pad);
  margin: 0 calc(-1 * var(--s-2));
}

.quote-box {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--quote-check);
  height: var(--quote-check);
  border-radius: var(--r-quote-box);
  background: var(--quote-box);
  border: 1px solid var(--tools-chip-line);
  color: var(--on-dark);
  transition:
    background var(--dur-quote) var(--ease-out),
    border-color var(--dur-quote) var(--ease-out),
    transform var(--dur-quote) var(--ease-out);
}
.quote-box svg {
  width: var(--quote-check-icon);
  height: var(--quote-check-icon);
  opacity: 0;
  transform: scale(.5);
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.quote-label,
.quote-price {
  font-size: var(--fs-quote);
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--ink-muted);
  transition: color var(--dur-quote) var(--ease-out);
}
.quote-price { margin-left: auto; white-space: nowrap; }

.quote-item.is-on .quote-box {
  background: var(--amber);
  border-color: var(--amber);
  transform: scale(1.06);
}
.quote-item.is-on .quote-box svg { opacity: 1; transform: scale(1); }
.quote-item.is-on .quote-label,
.quote-item.is-on .quote-price { color: var(--ink); }

.quote-rule {
  border-top: 1px dashed color-mix(in srgb, var(--ink) 22%, transparent);
  margin: var(--quote-rule-gap);
  opacity: 0;
  transition: opacity 500ms var(--ease-out);
}
.quote-card.in-view .quote-rule { opacity: 1; transition-delay: 420ms; }

.quote-total {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding: 0 0 2px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-quote) var(--ease-out), transform var(--dur-quote) var(--ease-out);
}
.quote-card.in-view .quote-total { opacity: 1; transform: translateY(0); transition-delay: 460ms; }
.quote-total-label {
  font-size: var(--fs-quote-kicker);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink);
}
.quote-total-value {
  margin-left: auto;
  font-size: var(--fs-quote-total);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  transition: transform 220ms var(--ease-out);
}
.quote-total-value.is-bumped { transform: scale(1.07); }

@media (prefers-reduced-motion: reduce) {
  .quote-blob,
  .quote-eyebrow,
  .quote-panel,
  .quote-item,
  .quote-box,
  .quote-box svg,
  .quote-label,
  .quote-price,
  .quote-rule,
  .quote-total,
  .quote-total-value,
  .quote-arrow,
  .quote-arrow svg {
    transition: none !important;
    animation: none !important;
  }
  .quote-card .quote-blob,
  .quote-card .quote-eyebrow,
  .quote-card .quote-panel,
  .quote-card .quote-item,
  .quote-card .quote-rule,
  .quote-card .quote-total {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Live project card — source: Nicole___Start_Project_Card_v2.html.
   Arrow matches the Tools / Quote 36px control. */
.proj-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  width: 100%;
  min-height: var(--quote-min-h);
  aspect-ratio: var(--quote-ratio);
  background: var(--tools-card);
  border: 1px solid var(--tools-card-line);
  border-radius: var(--r-quote);
}
.proj-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  -webkit-mask-image: var(--quote-mask);
  mask-image: var(--quote-mask);
}
.proj-blob {
  position: absolute;
  border-radius: var(--r-quote);
  background-image: var(--quote-dot);
  background-size: var(--quote-dot-size) var(--quote-dot-size);
  -webkit-mask-image: var(--quote-dot-mask);
  mask-image: var(--quote-dot-mask);
  opacity: 0;
  transition: opacity var(--quote-blob-in) var(--ease-out);
}
.proj-blob--a { top: 5%; right: 3%; width: 36%; height: 36%; }
.proj-blob--b { top: 32%; left: 1%; width: 26%; height: 36%; }
.proj-blob--c { bottom: 2%; left: 9%; width: 46%; height: 38%; }
.proj-card.in-view .proj-blob { opacity: 1; }
.proj-card.in-view .proj-blob--b { transition-delay: 120ms; }
.proj-card.in-view .proj-blob--c { transition-delay: 240ms; }

@media (prefers-reduced-motion: no-preference) {
  .proj-card.in-view .proj-blob { animation: quote-float var(--quote-float) ease-in-out infinite; }
  .proj-card.in-view .proj-blob--b { animation-delay: -3.2s; }
  .proj-card.in-view .proj-blob--c { animation-delay: -6.1s; }
}

.proj-content { position: relative; z-index: 2; height: 100%; }

.proj-eyebrow {
  position: absolute;
  top: 6.2%;
  left: 3.2%;
  display: inline-flex;
  align-items: center;
  padding: var(--proj-eyebrow-pad);
  border-radius: var(--r-pill);
  background: var(--paper);
  border: 1px solid var(--tools-card-line);
  font-size: var(--fs-ui);
  font-weight: 700;
  color: var(--ink);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--ink) 7%, transparent);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out);
}
.proj-card.in-view .proj-eyebrow { opacity: 1; transform: translateY(0); }

.proj-arrow {
  position: absolute;
  top: var(--tools-pad);
  right: var(--tools-pad);
  z-index: 3;
  display: grid;
  place-items: center;
  width: var(--tools-arrow);
  height: var(--tools-arrow);
  border-radius: var(--r-chip);
  background: var(--paper);
  border: 1px solid var(--tools-card-line);
  color: var(--ink);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--ink) 8%, transparent);
  transition:
    transform var(--dur-quote) var(--ease-out),
    box-shadow var(--dur-quote) var(--ease-out),
    background var(--dur-quote) var(--ease-out),
    border-color var(--dur-quote) var(--ease-out),
    color var(--dur-quote) var(--ease-out);
}
@media (prefers-reduced-motion: no-preference) {
  .proj-arrow { animation: quote-breathe var(--tools-breathe) ease-in-out infinite; }
}
.proj-arrow:hover,
.proj-arrow:focus-visible {
  animation: none;
  transform: translateY(-2px) scale(1.04);
  background: var(--amber);
  border-color: var(--amber);
  color: var(--on-dark);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--amber) 30%, transparent);
}
.proj-arrow svg {
  width: var(--s-4);
  height: var(--s-4);
  transition: transform var(--dur-base) var(--ease-out);
}
.proj-arrow:hover svg,
.proj-arrow:focus-visible svg { transform: translate(1px, -1px) rotate(8deg); }

.proj-panel {
  position: absolute;
  left: 18%;
  right: 16%;
  top: 18%;
  padding: var(--proj-panel-pad);
  background: var(--paper);
  border-radius: var(--r-quote-panel) var(--r-quote-panel) 0 0;
  box-shadow:
    0 20px 44px color-mix(in srgb, var(--ink) 10%, transparent),
    0 2px 6px color-mix(in srgb, var(--ink) 5%, transparent);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--quote-enter) var(--ease-out), transform var(--quote-enter) var(--ease-out);
}
.proj-card.in-view .proj-panel { opacity: 1; transform: translateY(0); transition-delay: 80ms; }

.proj-group {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-quote) var(--ease-out), transform var(--dur-quote) var(--ease-out);
}
.proj-group + .proj-group { margin-top: var(--proj-group-gap); }
.proj-card.in-view .proj-group { opacity: 1; transform: translateY(0); }
.proj-card.in-view .proj-group:nth-of-type(1) { transition-delay: 200ms; }
.proj-card.in-view .proj-group:nth-of-type(2) { transition-delay: 270ms; }
.proj-card.in-view .proj-group:nth-of-type(3) { transition-delay: 340ms; }
.proj-card.in-view .proj-group:nth-of-type(4) { transition-delay: 410ms; }

.proj-legend {
  display: block;
  margin-bottom: var(--proj-legend-mb);
  font-size: var(--fs-quote-kicker);
  font-weight: 600;
  letter-spacing: var(--proj-legend-ls);
  text-transform: uppercase;
  color: var(--ink-faint);
}

.proj-input {
  display: flex;
  align-items: center;
  height: var(--proj-input-h);
  padding: 0 var(--proj-input-pad-x);
  border-radius: var(--r-chip);
  background: var(--proj-field);
  border: 1px solid var(--tools-chip-line);
  font-size: var(--fs-quote);
  font-weight: 500;
  color: var(--ink);
  transition:
    border-color var(--dur-quote) var(--ease-out),
    background var(--dur-quote) var(--ease-out),
    box-shadow var(--dur-quote) var(--ease-out);
}
.proj-input.is-active {
  background: var(--paper);
  border-color: color-mix(in srgb, var(--amber) 55%, transparent);
  box-shadow: 0 0 0 var(--proj-ring) color-mix(in srgb, var(--amber) 12%, transparent);
}
.proj-caret {
  display: inline-block;
  width: var(--proj-caret-w);
  height: var(--proj-caret-h);
  margin-left: var(--proj-caret-ml);
  background: var(--ink);
  opacity: 0;
}
.proj-input.is-active .proj-caret { animation: proj-blink 1s steps(1, end) infinite; }
@keyframes proj-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.proj-pills { display: flex; flex-wrap: wrap; gap: var(--proj-pills-gap); }
.proj-pill {
  padding: var(--proj-pill-pad);
  border-radius: var(--r-pill);
  background: var(--tools-chip);
  border: 1px solid var(--tools-chip-line);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  color: var(--ink-muted);
  transition:
    background var(--dur-quote) var(--ease-out),
    border-color var(--dur-quote) var(--ease-out),
    color var(--dur-quote) var(--ease-out),
    transform var(--dur-quote) var(--ease-out),
    box-shadow var(--dur-quote) var(--ease-out);
}
.proj-pill.is-on {
  background: var(--paper);
  border-color: var(--amber);
  color: var(--ink);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--amber) 18%, transparent);
}

.proj-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--proj-grid-col);
  row-gap: var(--proj-grid-row);
}
.proj-check { display: flex; align-items: center; gap: var(--s-3); }
.proj-box {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--quote-check);
  height: var(--quote-check);
  border-radius: var(--r-quote-box);
  background: var(--quote-box);
  border: 1px solid var(--tools-chip-line);
  color: var(--on-dark);
  transition:
    background var(--dur-quote) var(--ease-out),
    border-color var(--dur-quote) var(--ease-out),
    transform var(--dur-quote) var(--ease-out);
}
.proj-box svg {
  width: var(--quote-check-icon);
  height: var(--quote-check-icon);
  opacity: 0;
  transform: scale(.5);
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.proj-check-label {
  font-size: var(--fs-quote);
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--ink-muted);
  white-space: nowrap;
  transition: color var(--dur-quote) var(--ease-out);
}
.proj-check.is-on .proj-box {
  background: var(--amber);
  border-color: var(--amber);
  transform: scale(1.06);
}
.proj-check.is-on .proj-box svg { opacity: 1; transform: scale(1); }
.proj-check.is-on .proj-check-label { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .proj-blob,
  .proj-eyebrow,
  .proj-panel,
  .proj-group,
  .proj-input,
  .proj-caret,
  .proj-pill,
  .proj-box,
  .proj-box svg,
  .proj-check-label,
  .proj-arrow,
  .proj-arrow svg {
    transition: none !important;
    animation: none !important;
  }
  .proj-card .proj-blob,
  .proj-card .proj-eyebrow,
  .proj-card .proj-panel,
  .proj-card .proj-group {
    opacity: 1 !important;
    transform: none !important;
  }
  .proj-caret { display: none; }
}

.panel {
  position: relative;
  display: block;
  border-radius: var(--r-card);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease);
}
.panel:hover { transform: translateY(-3px); }
.panel__shot { width: 100%; height: auto; }
.panel__arrow {
  position: absolute;
  top: var(--tools-pad);
  right: var(--tools-pad);
  z-index: 3;
  display: grid;
  place-items: center;
  width: var(--tools-arrow);
  height: var(--tools-arrow);
  border-radius: var(--r-chip);
  background: var(--paper);
  border: 1px solid var(--tools-card-line);
  color: var(--ink);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--ink) 8%, transparent);
  transition: transform var(--dur-base) var(--ease);
}
.panel__arrow svg { width: var(--s-4); height: var(--s-4); }
.panel:hover .panel__arrow { transform: translateX(4px); }

/* ============================================================
   TRUSTED BY — title y=2426, logo row y≈2503–2581
   Each mark keeps its designed box. Do NOT normalise heights.
   Default is the static Figma row. JS duplicates the set and
   adds .is-marquee so CSS can loop translateX(-50%).
   ============================================================ */
.trusted { margin-top: 87px; text-align: center; overflow: hidden; }
.trusted__title {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
}
.trusted__viewport { margin-top: 60px; }
.trusted__track { display: flex; }
.trusted__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-7) var(--s-6);
}
.trusted__row li { flex: none; }
.trusted__row img {
  height: auto;
  filter: grayscale(1);
  opacity: .85;
  transition: filter var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease);
}
.trusted__row li:hover img,
.trusted__row li:focus-within img { filter: grayscale(0); opacity: 1; }

/* Infinite scroll — two identical sets; -50% is exactly one set. */
.trusted__viewport.is-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--s-8),
    #000 calc(100% - var(--s-8)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--s-8),
    #000 calc(100% - var(--s-8)),
    transparent 100%
  );
}
.trusted__viewport.is-marquee .trusted__track {
  width: max-content;
  will-change: transform;
}
.trusted__viewport.is-marquee .trusted__row {
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: var(--s-8);
  width: max-content;
  padding-inline-end: var(--s-8);
}
.trusted__viewport.is-marquee .trusted__row img { max-width: none; }
.trusted__viewport.is-marquee:hover .trusted__track,
.trusted__viewport.is-marquee:focus-within .trusted__track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: no-preference) {
  .trusted__viewport.is-marquee .trusted__track {
    animation: trusted-scroll var(--trusted-marquee) linear infinite;
  }
}
@keyframes trusted-scroll {
  to { transform: translateX(-50%); }
}

/* ============================================================
   FOOTER — Figma y=2704, height 539, full-bleed masked image
   ============================================================ */
.site-footer {
  position: relative;
  isolation: isolate;
  margin-top: 123px;   /* logo row bottom 2581 → footer 2704 */
  padding-block: 111px 0;   /* footer top → column headings 2815 */
  color: var(--on-dark);
  overflow: hidden;
}
.site-footer__bg { position: absolute; inset: 0; z-index: -1; }
.site-footer__bg img { width: 100%; height: 100%; object-fit: cover; }

.site-footer__inner {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: var(--s-7);
  align-items: start;
}
.site-footer__brand img { width: 210px; height: auto; }

.footer-col__title {
  font-size: var(--fs-footer-h);
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--on-dark);
}
.footer-col ul { display: grid; gap: 20px; margin-top: 24px; }
.footer-col a {
  font-size: var(--fs-body);
  text-transform: uppercase;
  color: var(--on-dark);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease);
}
.footer-col a:hover { border-bottom-color: currentColor; }

.site-footer__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  flex-wrap: wrap;
  margin-top: 88px;
  padding-block: 26px 40px;
  border-top: 1px solid rgba(255, 255, 255, .35);
}
.site-footer__copy { font-size: var(--fs-body); color: var(--on-dark); }
.site-footer__copy strong { font-weight: 700; }
.site-footer__badges { width: 303px; height: auto; }

/* ============================================================
   TABLET — ≤1040px
   No Figma frame exists below 1440. Everything here is an
   interpretation: review before launch.
   ============================================================ */
@media (max-width: 1040px) {
  :root { --gutter: var(--gutter-md); }

  .site-header { padding-block: var(--s-5); }
  .site-header__logo img { width: 150px; }

  .hero__copy { padding-bottom: 96px; }

  .pillars { grid-template-columns: 1fr 1fr; gap: var(--s-7) var(--s-6); }
  .pillar:last-child { grid-column: 1 / -1; }

  .how { grid-template-columns: 1fr; gap: var(--s-5); margin-top: 88px; }
  .how__tools { max-width: 386px; height: auto; padding-block: 0; } /* unsigned: no mobile frame in Figma */
  .how__card { padding: var(--s-7) var(--s-6); }

  .panels { grid-template-columns: 1fr; margin-top: var(--s-5); }

  .trusted { margin-top: 72px; }
  .trusted__row { justify-content: center; gap: var(--s-6) var(--s-7); }
  .trusted__viewport.is-marquee .trusted__row {
    justify-content: flex-start;
    gap: var(--s-8);
  }

  .site-footer { margin-top: 88px; padding-block: 72px 0; }
  .site-footer__inner { grid-template-columns: 1fr 1fr; gap: var(--s-7) var(--s-6); }
  .site-footer__brand { grid-column: 1 / -1; }
}

/* ============================================================
   PHONE — ≤640px
   ============================================================ */
@media (max-width: 640px) {
  :root { --gutter: var(--gutter-sm); }

  .site-header__inner { flex-direction: column; align-items: flex-start; gap: var(--s-4); }
  .site-header__logo img { width: 128px; }
  .nav__list { gap: var(--s-3); }
  .pill { font-size: .875rem; padding-inline: var(--s-3); }

  /* Header is taller when stacked — give the hero image room so
     the logo and pills never sit on the mountain silhouette.   */
  .hero__media img { aspect-ratio: 4 / 5; object-position: 62% center; }
  .hero__copy { margin-top: -16px; padding-bottom: 64px; }
  .hero__title {
    margin-top: var(--s-5);
    min-height: calc(var(--fs-h1) * var(--lh-tight) * var(--hero-title-lines-sm));
  }
  .hero__lede { margin-top: var(--s-5); }
  .hero__cta { margin-top: var(--s-6); white-space: normal; }

  .pillars { grid-template-columns: 1fr; gap: var(--s-7); }
  .pillar:last-child { grid-column: auto; }
  .pillar__title { margin-top: var(--s-4); }
  .pillar__body { margin-top: var(--s-3); }

  .how { margin-top: 64px; }
  .how__tools { aspect-ratio: var(--tools-ratio-sm); border-radius: var(--r-card); } /* unsigned */
  .how__card { padding: var(--s-6) var(--s-5); }
  .how__body { line-height: 1.7; }

  .quote-card { aspect-ratio: var(--quote-ratio-sm); border-radius: var(--r-quote-sm); } /* unsigned */
  .quote-panel { left: 8%; right: 8%; top: 26%; padding: var(--quote-panel-pad-sm); }
  .quote-eyebrow { font-size: var(--fs-eyebrow); padding: var(--quote-eyebrow-pad-sm); }
  .quote-label, .quote-price { font-size: var(--fs-eyebrow); }

  .proj-card { aspect-ratio: var(--quote-ratio-sm); border-radius: var(--r-quote-sm); } /* unsigned */
  .proj-panel { left: 8%; right: 8%; top: 20%; padding: var(--proj-panel-pad-sm); }
  .proj-eyebrow { font-size: var(--fs-eyebrow); padding: var(--quote-eyebrow-pad-sm); }
  .proj-check-label, .proj-input { font-size: var(--fs-eyebrow); }
  .proj-pill { padding: var(--proj-pill-pad-sm); font-size: var(--fs-proj-pill-sm); }
  .proj-grid { column-gap: var(--proj-grid-gap-sm); }

  .trusted { margin-top: 56px; }
  .trusted__viewport { margin-top: var(--s-7); }
  .trusted__row { gap: var(--s-6); }
  .trusted__row img { max-height: 44px; width: auto; }
  .trusted__viewport.is-marquee {
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 var(--s-5),
      #000 calc(100% - var(--s-5)),
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 var(--s-5),
      #000 calc(100% - var(--s-5)),
      transparent 100%
    );
  }
  .trusted__viewport.is-marquee .trusted__row {
    gap: var(--s-7);
    padding-inline-end: var(--s-7);
  }

  .site-footer { margin-top: 64px; padding-block: 56px 0; }
  .site-footer__inner { grid-template-columns: 1fr; gap: var(--s-7); }
  .site-footer__base { margin-top: 56px; }
}