/* =========================================================
   PALMA AI - LANDING STYLES
   Fuente: Brief_Landing_Palma_AI_v1
   ========================================================= */

/* =========================================================
   DESIGN TOKENS
   ========================================================= */

:root {
  /* ---------- COLOR ---------- */
  --color-bg:           #F4F2EE;
  --color-primary:      #243447;
  --color-text:         #11161D;
  --color-muted:        #8A96A3;
  --color-meta:         #5F6873;
  --color-accent:       #CC6E46;
  --color-accent-hover: #C46840;

  --color-bg-tint:      #DDDDD8;
  --color-border:       var(--color-muted);
  --color-border-focus: var(--color-primary);
  --color-error:        var(--color-accent);

  --color-footer-bg:    var(--color-text);
  --color-footer-fg:    var(--color-bg);

  /* ---------- TIPOGRAFÍA ---------- */
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-extrabold: 800;

  /* Desktop */
  --fs-hero-stat: 12.5rem;
  --fs-display:   4.75rem;
  --fs-h1:        3rem;
  --fs-h2:        2rem;
  --fs-h3:        1.25rem;
  --fs-body:      1.125rem;
  --fs-caption:   0.9375rem;
  --fs-eyebrow:   0.875rem;
  --fs-data-stat: 3.5rem;

  /* Mobile */
  --fs-hero-stat-m: 7rem;
  --fs-display-m:   2.25rem;
  --fs-h1-m:        2rem;
  --fs-h2-m:        1.5rem;
  --fs-h3-m:        1.125rem;
  --fs-body-m:      1rem;
  --fs-caption-m:   0.875rem;
  --fs-eyebrow-m:   0.75rem;
  --fs-data-stat-m: 3rem;

  --lh-tight:   1.15;
  --lh-snug:    1.25;
  --lh-relaxed: 1.55;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.1em;

  /* ---------- ESPACIADO ---------- */
  --space-section-y:     5rem;
  --space-section-y-m:   3rem;
  --space-block-gap:     3rem;
  --space-block-gap-m:   2rem;
  --space-container-x-m: 1.5rem;

  /* ---------- LAYOUT ---------- */
  --container-max:    1200px;
  --container-narrow: 800px;
  --container-form:   600px;

  /* ---------- RADIO ---------- */
  --radius-sm: 8px;
  --radius-md: 12px;

  /* ---------- BORDES ---------- */
  --border-input:       1px solid var(--color-border);
  --border-input-focus: 1px solid var(--color-border-focus);
  --border-input-error: 1px solid var(--color-error);

  /* ---------- TRANSICIONES ---------- */
  --transition-base: 250ms ease;
  --transition-fast: 200ms ease;
}

/* =========================================================
   MOBILE OVERRIDES (< 768px)
   ========================================================= */

@media (max-width: 767px) {
  :root {
    --fs-hero-stat: var(--fs-hero-stat-m);
    --fs-display:   var(--fs-display-m);
    --fs-h1:        var(--fs-h1-m);
    --fs-h2:        var(--fs-h2-m);
    --fs-h3:        var(--fs-h3-m);
    --fs-body:      var(--fs-body-m);
    --fs-caption:   var(--fs-caption-m);
    --fs-eyebrow:   var(--fs-eyebrow-m);
    --fs-data-stat: var(--fs-data-stat-m);

    --space-section-y: var(--space-section-y-m);
    --space-block-gap: var(--space-block-gap-m);
  }
}

/* =========================================================
   RESET MÍNIMO
   ========================================================= */

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

html {
  font-family: var(--font-sans);
  font-size: 16px;
  scroll-behavior: auto; /* in-page scroll handled in script.js for tunable, consistent easing across mobile browsers */
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  background-repeat: repeat;
  color: var(--color-text);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, ul, li { margin: 0; padding: 0; }

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

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

button { font-family: inherit; }

/* Offset for fixed navbar when jumping to anchors.
   Set to the exact navbar height so the section TOP lands immediately
   below the navbar — no slice of the previous section bleeds through.
   The section's own padding-top (5rem desktop / 3rem mobile) provides
   the visual breathing room before the heading. */
section[id], header[id] {
  scroll-margin-top: 68px;
}

@media (max-width: 767px) {
  section[id], header[id] {
    scroll-margin-top: 74px;
  }
}

/* =========================================================
   LAYOUT PRIMITIVES
   ========================================================= */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--space-container-x-m);
  padding-right: var(--space-container-x-m);
}

@media (min-width: 768px) {
  .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.section {
  padding-top: var(--space-section-y);
  padding-bottom: var(--space-section-y);
}

.narrow {
  max-width: var(--container-narrow);
  margin-left: auto;
  margin-right: auto;
}

/* =========================================================
   TYPOGRAPHY UTILITIES
   ========================================================= */

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  line-height: var(--lh-snug);
}

.t-display {
  font-size: var(--fs-display);
  font-weight: var(--fw-extrabold);
  color: var(--color-primary);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

.t-h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-extrabold);
  color: var(--color-primary);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

.t-h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-extrabold);
  color: var(--color-primary);
  line-height: var(--lh-snug);
}

.t-h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-extrabold);
  color: var(--color-primary);
  line-height: var(--lh-snug);
}

.t-body {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--color-text);
  line-height: var(--lh-relaxed);
}

.t-body-light {
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  color: var(--color-text);
  line-height: var(--lh-relaxed);
}

.t-caption {
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  color: var(--color-meta);
  line-height: var(--lh-snug);
}

/* =========================================================
   COMPONENTS - BUTTON
   ========================================================= */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  background: var(--color-accent);
  color: var(--color-bg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: 1;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition: background var(--transition-base), box-shadow var(--transition-base);
}

/* Signature hover: a vertical gradient appears INSIDE the button — bright
   highlight at top, darker tone at bottom — giving real metallic depth
   like a brushed-copper switch catching light. Combined with rim-lights
   and a slight darkening of the surface, the button reads as a solid
   physical object responding to attention. No exterior shadows, no rings,
   no glows — every visual change lives inside the button's own footprint. */
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0) 35%,
    rgba(17, 22, 29, 0) 65%,
    rgba(17, 22, 29, 0.18) 100%
  );
  opacity: 0;
  transition: opacity var(--transition-base);
  pointer-events: none;
}

.btn-primary > * {
  position: relative;
  z-index: 1;
}

.btn-primary:hover {
  background: var(--color-accent-hover);
  box-shadow:
    inset 0 1.5px 0 0 rgba(255, 255, 255, 0.4),
    inset 0 -1.5px 0 0 rgba(17, 22, 29, 0.3);
}

.btn-primary:hover::before {
  opacity: 1;
}

.btn-primary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* Pressed state: gradient inverts and intensifies — darker top, lighter
   bottom — making the button feel physically depressed. */
.btn-primary:active {
  background: var(--color-accent-hover);
  box-shadow: inset 0 2px 5px 0 rgba(17, 22, 29, 0.3);
}

.btn-primary:active::before {
  background: linear-gradient(
    to bottom,
    rgba(17, 22, 29, 0.18) 0%,
    rgba(17, 22, 29, 0) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  opacity: 1;
}

/* Larger variant for hero */
.btn-primary--hero {
  padding: 1.125rem 2.25rem;
  font-size: 1.0625rem;
}

/* Smaller variant for navbar */
.btn-primary--sm {
  padding: 0.625rem 1.25rem;
  font-size: var(--fs-caption);
}

@media (max-width: 479px) {
  .btn-primary {
    width: 100%;
    max-width: 360px;
    padding: 1rem 1.75rem;
    font-size: 1.0625rem;
    font-weight: var(--fw-medium);
  }
  .btn-primary--hero {
    padding: 1.125rem 1.75rem;
    font-size: 1.125rem;
  }
  .btn-primary--sm {
    width: auto;
    max-width: none;
    padding: 0.625rem 1.25rem;
    font-size: var(--fs-caption);
  }
}

/* =========================================================
   COMPONENTS - DATA BLOCK
   ========================================================= */

.data-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.data-block__number {
  font-size: var(--fs-data-stat);
  font-weight: var(--fw-extrabold);
  color: var(--color-primary);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

.data-block__description {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--color-text);
  line-height: var(--lh-relaxed);
  margin: 0.5rem 0 0;
}

.data-block__source {
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  color: var(--color-meta);
  line-height: var(--lh-snug);
  margin: 1.25rem 0 0;
}

.data-block--boxed {
  padding: 2rem;
  border: 1px solid var(--color-muted);
  border-radius: var(--radius-md);
}

.data-block--hero .data-block__number {
  font-size: var(--fs-hero-stat);
}

/* =========================================================
   COMPONENTS - HERO STAT (Editorial treatment, no box)
   ========================================================= */

.hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}

.hero-stat__number {
  font-size: var(--fs-hero-stat);
  font-weight: var(--fw-extrabold);
  color: var(--color-primary);
  line-height: 1;
  letter-spacing: -0.04em;
  margin: 0;
}

.hero-stat__divider {
  width: 64px;
  height: 3px;
  background: var(--color-accent);
  border-radius: 2px;
  margin: 1.75rem 0 1.25rem;
}

.hero-stat__description {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--color-text);
  line-height: var(--lh-relaxed);
  margin: 0;
  max-width: 440px;
}

.hero-stat__source {
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  color: var(--color-meta);
  line-height: var(--lh-snug);
  margin: 1rem 0 0;
}

/* =========================================================
   COMPONENTS - FORM FIELD
   ========================================================= */

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-field__label {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--color-primary);
  line-height: var(--lh-snug);
}

.form-field__input,
.form-field__textarea {
  width: 100%;
  padding: 0.875rem 1rem;
  background: #FFFFFF;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  border: var(--border-input);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  appearance: none;
}

.form-field__input::placeholder,
.form-field__textarea::placeholder {
  color: var(--color-muted);
}

.form-field__input:focus,
.form-field__textarea:focus {
  border: var(--border-input-focus);
  box-shadow: 0 0 0 3px rgba(36, 52, 71, 0.12);
  outline: none;
}

.form-field__textarea {
  resize: vertical;
  min-height: calc(var(--fs-body) * var(--lh-snug) * 3 + 1.75rem);
}

.form-field--error .form-field__input,
.form-field--error .form-field__textarea {
  border: var(--border-input-error);
  box-shadow: 0 0 0 3px rgba(204, 110, 70, 0.12);
}

.form-field__error {
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  color: var(--color-error);
  line-height: var(--lh-snug);
  margin: 0;
  display: none;
}

.form-field--error .form-field__error {
  display: block;
}

/* =========================================================
   COMPONENTS - COST SECTION (unified narrative + hero stat + secondary)
   ========================================================= */

.cost-narrative {
  max-width: 720px;
  margin: 0 auto 4rem;
  text-align: center;
}

.cost-narrative__lede {
  font-size: 1.375rem;
  line-height: 1.55;
  color: var(--color-text);
  margin: 2rem 0 0;
}

.cost-hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 720px;
  margin: 0 auto 4rem;
  padding: 3rem 2rem;
  background: var(--color-bg);
  border-radius: var(--radius-md);
  position: relative;
}

.cost-hero-stat::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: var(--color-accent);
  border-radius: 0 0 4px 4px;
}

.cost-hero-stat__number {
  font-size: var(--fs-hero-stat);
  font-weight: var(--fw-extrabold);
  color: var(--color-primary);
  line-height: 1;
  letter-spacing: -0.04em;
  margin: 0;
}

.cost-hero-stat__description {
  font-size: 1.25rem;
  font-weight: var(--fw-regular);
  color: var(--color-text);
  line-height: 1.5;
  margin: 1.5rem 0 0;
  max-width: 520px;
}

.cost-hero-stat__source {
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  color: var(--color-meta);
  line-height: var(--lh-snug);
  margin: 1rem 0 0;
}

.cost-secondary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto 3rem;
}

@media (min-width: 768px) {
  .cost-secondary {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

.cost-secondary__item {
  text-align: center;
  padding: 0 1rem;
}

.cost-secondary__number {
  font-size: 2rem;
  font-weight: var(--fw-extrabold);
  color: var(--color-primary);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
}

.cost-secondary__label {
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  color: var(--color-text);
  line-height: 1.4;
  margin: 0;
}

.cost-closing {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  font-size: 1.125rem;
  line-height: 1.55;
}

@media (max-width: 767px) {
  .cost-narrative__lede {
    font-size: 1.125rem;
  }
  .cost-hero-stat {
    padding: 2.5rem 1.5rem;
  }
  .cost-hero-stat__description {
    font-size: 1.0625rem;
  }
}

/* =========================================================
   COMPONENTS - LEAK CALCULATOR (Section 3)
   ========================================================= */

.calculator {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  max-width: 960px;
  margin: 0 auto;
  background: var(--color-bg);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(138, 150, 163, 0.3);
}

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

.calculator__inputs {
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  background: var(--color-bg);
}

.calculator__field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.calculator__label {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--color-primary);
  line-height: var(--lh-snug);
}

.calculator__input {
  width: 100%;
  padding: 0.875rem 1rem;
  background: #FFFFFF;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  border: 1px solid var(--color-muted);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  appearance: none;
  -moz-appearance: textfield;
}

.calculator__input::-webkit-outer-spin-button,
.calculator__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.calculator__input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(36, 52, 71, 0.12);
  outline: none;
}

.calculator__slider-wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.calculator__slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: var(--color-bg-tint);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}

.calculator__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  background: var(--color-accent);
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid var(--color-bg);
  box-shadow: 0 2px 6px rgba(36, 52, 71, 0.2);
  transition: transform var(--transition-fast);
}

.calculator__slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

.calculator__slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  background: var(--color-accent);
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid var(--color-bg);
  box-shadow: 0 2px 6px rgba(36, 52, 71, 0.2);
}

.calculator__slider-value {
  font-size: 1.125rem;
  font-weight: var(--fw-extrabold);
  color: var(--color-primary);
  min-width: 3rem;
  text-align: right;
}

.calculator__output {
  padding: 2.5rem 2rem;
  background: var(--color-primary);
  color: var(--color-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.25rem;
}

.calculator__output-label {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin: 0 0 0.5rem;
}

.calculator__output-number {
  font-size: 4rem;
  font-weight: var(--fw-extrabold);
  color: var(--color-accent);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.calculator__output-period {
  font-size: 1.125rem;
  font-weight: var(--fw-regular);
  color: var(--color-bg);
  margin: 0.25rem 0 1.5rem;
}

.calculator__output-detail {
  font-size: var(--fs-caption);
  color: var(--color-muted);
  line-height: 1.5;
  margin: 0 0 1.5rem;
  max-width: 320px;
}

.calculator__output .btn-primary {
  margin-top: 0.5rem;
}

.calculator__disclaimer {
  max-width: 720px;
  margin: 2rem auto 0;
  text-align: center;
  /* Slightly larger than .t-caption: this is a substantive statement
     of method, not a source citation, so it earns more reading weight. */
  font-size: 1rem;
  line-height: 1.55;
  color: var(--color-meta);
  font-style: italic;
}

@media (max-width: 767px) {
  .calculator__disclaimer {
    font-size: 0.9375rem;
  }
}

@media (max-width: 767px) {
  .calculator__output-number {
    font-size: 3rem;
  }
  .calculator__inputs,
  .calculator__output {
    padding: 2rem 1.5rem;
  }
}

/* =========================================================
   COMPONENTS - REASSURANCE CALLOUT (after Section 2)
   ========================================================= */

.reassurance {
  max-width: 720px;
  margin: 3rem auto 0;
  padding: 1.5rem 1.75rem;
  background: var(--color-bg);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.reassurance i {
  font-size: 28px;
  color: var(--color-accent);
  flex-shrink: 0;
  line-height: 1;
}

.reassurance p {
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--color-text);
  margin: 0;
}

.reassurance strong {
  color: var(--color-primary);
  font-weight: var(--fw-extrabold);
}

@media (max-width: 767px) {
  .reassurance {
    flex-direction: column;
    text-align: left;
    padding: 1.25rem 1.5rem;
  }
}

/* =========================================================
   COMPONENTS - SECTOR PILLS + FOUNDER QUOTE (Section 5)
   ========================================================= */

.sector-list {
  list-style: none;
  padding: 0;
  margin: 0 0 4rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

@media (max-width: 639px) {
  .sector-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
    padding: 0 0.5rem;
  }
}

.sector-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.125rem;
  background: var(--color-bg);
  border: 1px solid rgba(138, 150, 163, 0.4);
  border-radius: 100px;
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--color-primary);
  cursor: default;
  user-select: none;
  transition: border-color var(--transition-base), transform var(--transition-fast);
}

@media (max-width: 639px) {
  .sector-pill {
    justify-content: center;
    padding: 0.75rem 0.875rem;
    font-size: 0.8125rem;
    text-align: center;
    line-height: 1.3;
  }
}

.sector-pill:hover {
  border-color: var(--color-accent);
  transform: translateY(-1px);
}

.sector-pill i {
  font-size: 18px;
  color: var(--color-accent);
}

.founder-quote {
  max-width: 760px;
  margin: 0 auto;
  padding: 2.5rem 2rem;
  text-align: center;
  position: relative;
}

.founder-quote::before {
  content: '"';
  position: absolute;
  top: -1rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 6rem;
  font-weight: var(--fw-extrabold);
  color: var(--color-accent);
  line-height: 1;
  font-family: Georgia, serif;
  opacity: 0.6;
}

.founder-quote__text {
  font-size: 1.375rem;
  line-height: 1.55;
  font-weight: var(--fw-regular);
  color: var(--color-primary);
  margin: 0 0 1.5rem;
  font-style: italic;
}

.founder-quote__attribution {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  align-items: center;
}

.founder-quote__name {
  font-size: var(--fs-body);
  font-weight: var(--fw-extrabold);
  color: var(--color-primary);
}

.founder-quote__role {
  font-size: var(--fs-caption);
  color: var(--color-meta);
}

@media (max-width: 767px) {
  .founder-quote__text {
    font-size: 1.125rem;
  }
  .founder-quote {
    padding: 2rem 1rem;
  }
}

/* =========================================================
   STICKY MOBILE CTA
   ========================================================= */

.sticky-cta {
  display: none;
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  z-index: 40;
  padding: 0.875rem 1.75rem;
  background: var(--color-accent);
  color: var(--color-bg);
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  border-radius: 12px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(17, 22, 29, 0.28), 0 2px 6px rgba(17, 22, 29, 0.18);
  transition: background var(--transition-base), transform var(--transition-base), opacity var(--transition-base);
  opacity: 0;
  pointer-events: none;
}

.sticky-cta.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.sticky-cta:hover,
.sticky-cta:active {
  background: var(--color-accent-hover);
  transform: translateX(-50%) translateY(-2px);
}

@media (max-width: 767px) {
  .sticky-cta {
    display: inline-block;
  }
}

/* =========================================================
   FORM FIELD - OPTIONAL LABEL VARIANT
   ========================================================= */

.form-field__optional {
  font-weight: var(--fw-regular);
  color: var(--color-meta);
  font-size: 0.8125rem;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 0.25rem;
}

/* =========================================================
   COMPONENTS - OUTCOME LINE (You get / You walk away with)
   ========================================================= */

.outcome {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--color-primary);
  line-height: var(--lh-relaxed);
  margin: 1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(138, 150, 163, 0.3);
}

.outcome__label {
  display: block;
  font-size: var(--fs-caption);
  font-weight: var(--fw-extrabold);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: 0.25rem;
}

/* =========================================================
   COMPONENTS - STAGE NUMBER (Section 4)
   ========================================================= */

.stage-number {
  font-size: var(--fs-h1);
  font-weight: var(--fw-extrabold);
  color: var(--color-accent);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
}

/* Process grid: align outcomes to bottom across columns */
.process-grid {
  align-items: stretch;
}

.process-step {
  display: flex;
  flex-direction: column;
}

.process-step__outcome {
  margin-top: auto;
}

@media (max-width: 767px) {
  .process-step__outcome {
    border-top: none;
    padding-top: 0.5rem;
    margin-top: 0.5rem;
  }
  .process-step:not(:last-child) {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(138, 150, 163, 0.2);
  }
}

/* =========================================================
   COMPONENTS - PROCESS TIMELINE (Section 4)
   ========================================================= */

.timeline {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 1080px;
  position: relative;
}

.timeline-cta {
  margin-top: 4rem;
}

@media (max-width: 767px) {
  .timeline-cta {
    margin-top: 3rem;
  }
}

/* Vertical connector line, behind content, centered on the page */
.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(204, 110, 70, 0.35) 8%,
    rgba(204, 110, 70, 0.35) 92%,
    transparent 100%
  );
  transform: translateX(-50%);
  z-index: 0;
}

.timeline-step {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 4rem;
  align-items: center;
  padding: 2.5rem 0;
  z-index: 1;
}

.timeline-step:first-child { padding-top: 0; }
.timeline-step:last-child { padding-bottom: 0; }

/* Dot marker centered on the vertical line */
.timeline-step::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  background: var(--color-accent);
  border-radius: 50%;
  border: 4px solid var(--color-bg);
  transform: translate(-50%, -50%);
  z-index: 2;
  box-shadow: 0 0 0 1px rgba(204, 110, 70, 0.3);
}

.section--tinted .timeline-step::before {
  border-color: var(--color-bg-tint);
}

.timeline-step__media {
  display: flex;
  justify-content: center;
  align-items: center;
}

.timeline-step__photo {
  aspect-ratio: 4 / 3;
  width: 100%;
  max-width: 420px;
  background: var(--color-primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.timeline-step__photo i {
  font-size: 56px;
  color: var(--color-bg);
  opacity: 0.35;
}

.timeline-step__photo img,
.timeline-step__photo picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.timeline-step__content {
  padding: 0;
}

.timeline-step__marker {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.timeline-step__number {
  font-size: 3rem;
  font-weight: var(--fw-extrabold);
  color: var(--color-accent);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
}

.timeline-step__divider {
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--color-accent);
  border-radius: 1px;
  flex-shrink: 0;
}

.timeline-step__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-extrabold);
  color: var(--color-primary);
  line-height: var(--lh-snug);
}

.timeline-step__body {
  font-size: var(--fs-body);
  color: var(--color-text);
  line-height: var(--lh-relaxed);
  margin: 0 0 1rem;
}

/* LEFT variant: media on column 1, content on column 2 (default DOM order) */
.timeline-step--left .timeline-step__media {
  grid-column: 1;
}
.timeline-step--left .timeline-step__content {
  grid-column: 2;
  text-align: left;
}

/* RIGHT variant: content on column 1 (reordered), media on column 2 */
.timeline-step--right .timeline-step__media {
  grid-column: 2;
}
.timeline-step--right .timeline-step__content {
  grid-column: 1;
  grid-row: 1;
  text-align: right;
}
.timeline-step--right .timeline-step__marker {
  justify-content: flex-end;
}
.timeline-step--right .outcome {
  text-align: right;
}

/* Mobile: collapse to single column, photo on top, line on the left */
@media (max-width: 767px) {
  .timeline {
    padding-left: 2.5rem;
  }
  .timeline::before {
    left: 0.875rem;
    transform: none;
  }
  .timeline-step {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 1rem;
    padding: 2rem 0;
  }
  .timeline-step::before {
    left: -1.625rem;
    /* Align the dot with the TOP of the photo. Each step has padding-top: 2rem
       (except :first-child), so we offset the dot to match where the photo
       actually starts, not where the step's absolute box starts. */
    top: 2rem;
    transform: none;
  }
  .timeline-step:first-child::before {
    /* First child has padding-top: 0, so the dot aligns at top: 0 */
    top: 0;
  }
  .timeline-step--left .timeline-step__media,
  .timeline-step--right .timeline-step__media {
    grid-column: 1;
    grid-row: 1;
  }
  .timeline-step--left .timeline-step__content,
  .timeline-step--right .timeline-step__content {
    grid-column: 1;
    grid-row: 2;
    text-align: left;
  }
  .timeline-step--right .timeline-step__marker {
    justify-content: flex-start;
  }
  .timeline-step--right .outcome {
    text-align: left;
  }
  .timeline-step__photo {
    max-width: 100%;
  }
  .timeline-step__number {
    font-size: 2.25rem;
  }
}

/* =========================================================
   COMPONENTS - ICONS
   ========================================================= */

.icon-feature {
  font-size: 32px;
  color: var(--color-primary);
  display: inline-block;
}

.icon-check {
  font-size: 24px;
  color: var(--color-primary);
  display: inline-block;
}

/* =========================================================
   COMPONENTS - FOUNDER PLACEHOLDER (Section 6)
   ========================================================= */

.founder-placeholder {
  aspect-ratio: 3 / 4;
  background: var(--color-primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.founder-placeholder i {
  font-size: 80px;
  color: var(--color-bg);
  opacity: 0.35;
}

.founder-placeholder img,
.founder-placeholder picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 767px) {
  .founder-placeholder {
    max-width: 240px;
    margin-left: auto;
    margin-right: auto;
  }
  .founder-placeholder i {
    font-size: 56px;
  }
}

/* =========================================================
   COMPONENTS - FAQ ACCORDION (Section 7)
   ========================================================= */

.faq-list {
  display: flex;
  flex-direction: column;
}

.faq-item {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--color-muted);
}

.faq-item:first-child { padding-top: 0; }
.faq-item:last-child { border-bottom: none; padding-bottom: 0; }

.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { display: none; content: ''; }

.faq-item__indicator {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  position: relative;
  transition: transform var(--transition-base);
}

.faq-item__indicator::before,
.faq-item__indicator::after {
  content: '';
  position: absolute;
  background: var(--color-accent);
  border-radius: 1px;
}

/* Horizontal bar of the plus */
.faq-item__indicator::before {
  left: 4px;
  right: 4px;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
}

/* Vertical bar of the plus (becomes invisible when open) */
.faq-item__indicator::after {
  top: 4px;
  bottom: 4px;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  transition: opacity var(--transition-base);
}

.faq-item[open] .faq-item__indicator::after {
  opacity: 0;
}

.faq-item__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item__answer-inner {
  padding-top: 1rem;
}

/* =========================================================
   COMPONENTS - CONTACT FORM (Section 8)
   ========================================================= */

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact-form .btn-primary {
  align-self: flex-start;
  margin-top: 0.5rem;
}

.contact-form__error {
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  color: var(--color-accent);
  line-height: var(--lh-snug);
  margin: 0;
}

@media (max-width: 479px) {
  /* Inside the contact form, the button takes the full form width
     to match the input fields above it. */
  .contact-form .btn-primary {
    align-self: stretch;
    width: auto;
    max-width: none;
  }
}

/* Success state shown after a successful submission */
.success-state {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem;
  background: var(--color-bg);
  border: 1px solid var(--color-muted);
  border-radius: var(--radius-md);
}

.success-state[hidden] { display: none; }

.success-state__icon {
  font-size: 48px;
  color: var(--color-accent);
  line-height: 1;
}

/* =========================================================
   SECTION VARIANTS - ALTERNATING BACKGROUND
   ========================================================= */

.section--tinted {
  background-color: var(--color-bg-tint);
}

/* =========================================================
   COMPONENTS - COPPER UNDERLINE
   ========================================================= */

.copper-underline {
  position: relative;
  background-image: linear-gradient(to right, var(--color-accent), var(--color-accent));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 4px;
  padding-bottom: 10px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

@media (max-width: 767px) {
  .copper-underline {
    background-size: 100% 3px;
    padding-bottom: 6px;
  }
}

@media (max-width: 380px) {
  .copper-underline {
    background-size: 100% 2px;
    padding-bottom: 4px;
  }
}

/* =========================================================
   COMPONENTS - PHOTO CARD (Section 3 contextual photos)
   ========================================================= */

.photo-card {
  aspect-ratio: 4 / 3;
  background: var(--color-primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 1rem;
}

.photo-card i {
  font-size: 48px;
  color: var(--color-bg);
  opacity: 0.35;
}

.photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================
   COMPONENTS - PHOTO BAND (Full bleed transition before Founder)
   ========================================================= */

.photo-band {
  aspect-ratio: 16 / 9;
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.photo-band i {
  font-size: 64px;
  color: var(--color-bg);
  opacity: 0.35;
}

.photo-band img,
.photo-band picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 768px) {
  .photo-band {
    aspect-ratio: 21 / 9;
  }
  .photo-band i {
    font-size: 96px;
  }
}

/* =========================================================
   NAVBAR
   ========================================================= */

/* =========================================================
   NAVBAR - Adaptive
   Default state (over hero): solid brand-blue (exact brandbook color),
   no blur. Reads as a natural extension of the hero, no tint shift.
   .is-scrolled state (over light sections): translucent off-white glass
   with blur. Premium pattern (Stripe, Linear, Anthropic).
   ========================================================= */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--color-primary);
  border-bottom: 1px solid transparent;
  transition: background var(--transition-base), border-color var(--transition-base);
}

.navbar.is-scrolled {
  background: rgba(244, 242, 238, 0.95);
  border-bottom-color: rgba(36, 52, 71, 0.08);
}

@supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
  .navbar.is-scrolled {
    background: rgba(244, 242, 238, 0.68);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom-color: rgba(36, 52, 71, 0.06);
  }
}

.navbar__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.navbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: opacity 200ms ease;
  -webkit-tap-highlight-color: transparent;
}

/* Hover only on devices that actually hover; prevents the stuck "active"
   look on mobile tap. Per brandbook the logo color is never modified;
   a subtle opacity shift is the only feedback applied. */
@media (hover: hover) {
  .navbar__brand:hover {
    opacity: 0.85;
  }
}

.navbar__logo {
  height: 34px;
  width: auto;
  display: block;
}

/* Logo version swap: light version (off-white text) over hero, color version
   over light sections. Both images stack in the same slot; one is hidden
   based on navbar state. */
.navbar__logo--color {
  display: none;
}

.navbar.is-scrolled .navbar__logo--light {
  display: none;
}

.navbar.is-scrolled .navbar__logo--color {
  display: block;
}

.navbar__logo-text {
  font-size: 1.25rem;
  font-weight: var(--fw-extrabold);
  color: var(--color-primary);
  letter-spacing: -0.02em;
}

.navbar__nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.navbar__link {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--color-bg);
  letter-spacing: 0.02em;
  transition: color var(--transition-fast);
}

.navbar.is-scrolled .navbar__link {
  color: var(--color-primary);
}

.navbar__link:hover {
  color: var(--color-accent);
}

.navbar.is-scrolled .navbar__link:hover {
  color: var(--color-accent);
}

.navbar__lang {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  color: var(--color-bg);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background-color var(--transition-fast);
  position: relative;
}

.navbar.is-scrolled .navbar__lang {
  color: var(--color-primary);
}

.navbar__lang:hover {
  color: var(--color-accent);
}

.navbar.is-scrolled .navbar__lang:hover {
  color: var(--color-accent);
}

.navbar__lang-current {
  font-weight: var(--fw-bold);
}

.navbar__lang-separator {
  opacity: 0.4;
}

.navbar__lang-other {
  opacity: 0.5;
}

.navbar__lang-toast {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--color-primary);
  color: var(--color-bg);
  font-size: 0.75rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
  z-index: 10;
}

.navbar__lang-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.navbar__toggle {
  display: none;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-left: 0.5rem;
}

.navbar__toggle-line {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-bg);
  transition: transform 250ms ease, opacity 250ms ease, background 250ms ease;
  transform-origin: center;
}

.navbar.is-scrolled .navbar__toggle-line {
  background: var(--color-primary);
}

.navbar__toggle[aria-expanded="true"] .navbar__toggle-line:nth-child(1) {
  transform: translateY(4px) rotate(45deg);
}

.navbar__toggle[aria-expanded="true"] .navbar__toggle-line:nth-child(2) {
  transform: translateY(-4px) rotate(-45deg);
}

@media (max-width: 767px) {
  .navbar__inner {
    position: relative;
  }
  .navbar__toggle { display: flex; }

  .navbar__nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-bg);
    border-top: 1px solid rgba(36, 52, 71, 0.08);
    box-shadow: 0 8px 24px rgba(17, 22, 29, 0.12);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1rem 1.5rem 1.25rem;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform 250ms ease, opacity 200ms ease;
  }

  .navbar__nav.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* When the mobile menu is open, ALL text-bearing elements inside the
     dropdown must use primary-blue regardless of navbar state. The dropdown
     panel has its own off-white background, so links/buttons inside it can't
     inherit the over-hero off-white color. */
  .navbar__nav.is-open .navbar__link,
  .navbar__nav.is-open .navbar__lang,
  .navbar__nav.is-open .navbar__lang-current,
  .navbar__nav.is-open .navbar__lang-separator,
  .navbar__nav.is-open .navbar__lang-other {
    color: var(--color-primary);
  }

  .navbar__nav.is-open .navbar__link:hover,
  .navbar__nav.is-open .navbar__lang:hover {
    color: var(--color-accent);
  }

  .navbar__link {
    display: block;
    padding: 0.75rem 0;
    font-size: var(--fs-body);
    border-bottom: 1px solid rgba(138, 150, 163, 0.15);
  }

  .navbar__lang {
    align-self: flex-start;
    padding: 0.75rem 0;
    font-size: var(--fs-body);
  }

  .navbar__lang-toast {
    right: auto;
    left: 0;
  }

  .navbar__nav .btn-primary {
    margin-top: 1rem;
    width: 100%;
    padding: 0.875rem 1.75rem;
    font-size: var(--fs-body);
  }
}

/* =========================================================
   SECTION - HERO (centered, anchor data block below)
   ========================================================= */

.section--hero {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 7rem;
  padding-bottom: 3rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Hero background: pure brand blue, no overlays. The headline animation
   and copper underline carry all the visual weight on this section. */

.section--hero > * {
  position: relative;
  z-index: 1;
}

.hero-content {
  max-width: 920px;
  margin: 0 auto;
}

.hero-content h1.t-display {
  margin-bottom: 2.25rem;
  line-height: 1.1;
  font-size: 4.5rem;
  text-wrap: balance;
}

/* Typewriter removed in favor of word-by-word fade-in + animated copper underline.
   See "HERO ENTRY ANIMATION" block below. */

/* Hero-specific typography tuning to balance the hierarchy with display */
.hero-content .eyebrow {
  font-size: 1rem;
}

.hero-content > p.t-body {
  font-size: 1.25rem;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.hero-content .btn-primary {
  margin-top: 1.5rem;
}

/* Anchor stat section (21x) - own section after the Hero */
.section--anchor {
  padding-top: 4rem;
  padding-bottom: 6rem;
  text-align: center;
}

@media (max-width: 767px) {
  .section--hero {
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: 6rem;
    padding-bottom: 2.5rem;
  }
  .hero-content .eyebrow {
    font-size: 0.8125rem;
  }
  .hero-content > p.t-body {
    font-size: 1.0625rem;
  }
  .hero-content h1.t-display {
    font-size: 2.5rem;
    line-height: 1.4;
    margin-bottom: 1.75rem;
  }
  .section--anchor {
    padding-top: 3rem;
    padding-bottom: 4rem;
  }
}

@media (max-width: 380px) {
  .hero-content h1.t-display {
    font-size: 2.25rem;
    margin-bottom: 1.5rem;
  }
  .hero-content > p.t-body {
    font-size: 1rem;
  }
}

/* =========================================================
   BRAND PATTERN
   Reusable decorative pattern built from the Palma icon lines.
   Sits at z-index 0 inside any section. The SVG itself owns the
   reveal animation (SMIL inside the file), so this layer only
   handles positioning, scale, color tint and opacity.
   ========================================================= */

.brand-pattern {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.brand-pattern__svg {
  display: block;
  position: absolute;
  height: auto;
  width: auto;
  /* Tint applied to the SVG fill from CSS so we can tweak intensity
     without touching the markup. */
  opacity: 0.09;
}

/* --- Variant: hero -------------------------------------------------
   Centered. No CSS mask: the radial gradient previously used to soften
   edges introduced visible banding rings on non-HDR displays. Instead we
   solve edge cleanup geometrically:
   - Top: lines passing through the navbar zone are covered by the navbar's
     solid background (var(--color-primary), the same color as the hero).
   - Bottom + sides on desktop: oversized SVG pushes terminations off-screen.
   - Bottom + sides on mobile: height-based sizing makes the SVG taller
     than the viewport, so vertical edges clip off-screen via overflow:hidden. */
.brand-pattern--hero {
  z-index: 0;
}

.section--hero > .brand-pattern--hero {
  position: absolute;
  z-index: 0;
}

.brand-pattern--hero .brand-pattern__svg {
  /* Slight oversize (115%) so left/right line terminations exit the
     viewport horizontally. With the new 1.78 aspect ratio, height comes
     out close to the hero height, putting top/bottom terminations near
     the hero edges where the navbar (top) and empty space (bottom) hide them. */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 115%;
  aspect-ratio: 5442.52 / 3061.42;
}

/* Ensure hero content stays above the pattern */
.section--hero > .container {
  position: relative;
  z-index: 1;
}

@media (max-width: 1024px) {
  .brand-pattern--hero .brand-pattern__svg {
    width: 135%;
  }
}

@media (max-width: 767px) {
  /* On phones the hero is portrait (tall and narrow). Switch to
     height-based sizing so the SVG fills the hero vertically; width
     auto-scales beyond the viewport via the aspect ratio. All four
     SVG edges end up clipped by overflow:hidden, so terminations are
     never visible. We see only the central middle band of the lines. */
  .brand-pattern--hero .brand-pattern__svg {
    width: auto;
    height: 105%;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* If the user has reduced motion preference, skip the reveal animation
     and show the pattern in its final state. SMIL animations inside SVG
     don't always respect this, so we belt-and-suspenders it by hiding
     the masks via CSS. Final visual state is the pattern fully drawn. */
  .brand-pattern__svg mask rect {
    fill: white;
  }
}

/* =========================================================
   FOOTER LOGO
   ========================================================= */

.footer__logo-img {
  height: 34px;
  width: auto;
  display: block;
}

/* =========================================================
   HERO ENTRY ANIMATION
   Sequence:
     1. Eyebrow lands first (150ms)
     2. Headline words appear one by one (200ms onward, 90ms stagger)
     3. Copper underline draws left → right (after last word)
     4. Subhead, CTA, caption fade in after underline lands
   ========================================================= */

@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroWordIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes drawUnderline {
  from { background-size: 0% 4px; }
  to   { background-size: 100% 4px; }
}

@keyframes drawUnderlineMobile {
  from { background-size: 0% 3px; }
  to   { background-size: 100% 3px; }
}

/* Headline container stays visible; words inside have their own animation */
.hero-content > .hero-headline {
  opacity: 1;
  animation: none;
}

/* Word-by-word reveal.
   display: inline (not inline-block) so the text wraps as normal flowing text.
   Each word receives its own --word-delay via inline style on the span.
   Slightly longer duration so each word lands with weight as it appears. */
.hero-word {
  display: inline;
  opacity: 0;
  animation: heroWordIn 650ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: var(--word-delay, 0ms);
}

/* Block-level reveal for the punch lines "We find it." / "We fix it."
   Each phrase enters as a single unit, not word by word. inline-block so
   we can scale it for a subtle punch. */
.hero-block {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px) scale(0.985);
  animation: heroBlockIn 600ms cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
  animation-delay: var(--block-delay, 0ms);
}

@keyframes heroBlockIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Underline draws in sync with the two punch blocks "We find it." / "We fix it."
   Starts when the first block lands (1770ms) and finishes shortly after the
   second block lands (~2810ms). The line traces beneath both phrases as they
   appear, reinforcing the promise visually as the eye reads it. */
.hero-underline {
  background-size: 0% 4px;
  animation: drawUnderline 1040ms cubic-bezier(0.65, 0, 0.35, 1) 2100ms forwards;
}

/* Rest of hero content fades in shortly after the underline finishes (~2810ms).
   Tight gap (50ms) keeps the sequence from feeling like it pauses. */
.hero-content > .eyebrow,
.hero-content > p.t-body,
.hero-content > a.btn-primary,
.hero-content > p.t-caption {
  opacity: 0;
  animation: heroFadeIn 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-content > .eyebrow      { animation-delay: 100ms;  }
.hero-content > p.t-body      { animation-delay: 2750ms; }
.hero-content > a.btn-primary { animation-delay: 2950ms; }
.hero-content > p.t-caption   { animation-delay: 3150ms; }

@media (max-width: 767px) {
  .hero-underline {
    background-size: 0% 3px;
    animation: drawUnderlineMobile 1040ms cubic-bezier(0.65, 0, 0.35, 1) 2100ms forwards;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-word,
  .hero-block,
  .hero-content > .eyebrow,
  .hero-content > p.t-body,
  .hero-content > a.btn-primary,
  .hero-content > p.t-caption {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .hero-underline {
    background-size: 100% 4px;
    animation: none;
  }
}

/* =========================================================
   FADE-IN ON SCROLL
   ========================================================= */

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms ease, transform 700ms ease;
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================================
   FOOTER
   ========================================================= */

.footer {
  background: var(--color-footer-bg);
  color: var(--color-footer-fg);
  padding: 3rem 0 2rem;
}

.footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(244, 242, 238, 0.1);
}

.footer__logo {
  font-size: 1.25rem;
  font-weight: var(--fw-extrabold);
  color: var(--color-footer-fg);
  letter-spacing: var(--tracking-tight);
}

.footer__nav {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.footer__nav a {
  color: var(--color-muted);
  font-size: var(--fs-caption);
  transition: color var(--transition-base);
}

.footer__nav a:hover {
  color: var(--color-footer-fg);
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-top: 2rem;
}

.footer__bottom p {
  font-size: var(--fs-caption);
  color: var(--color-muted);
}

.footer__bottom a {
  color: var(--color-muted);
  transition: color var(--transition-base);
}

.footer__bottom a:hover {
  color: var(--color-footer-fg);
}

.footer__credit {
  font-size: var(--fs-caption);
  color: var(--color-muted);
}

.footer__credit a {
  color: var(--color-muted);
  border-bottom: 1px solid transparent;
  transition: color var(--transition-base), border-color var(--transition-base);
}

.footer__credit a:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

@media (max-width: 767px) {
  .footer__inner,
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =========================================================
   SECTION VARIANT - BRAND (Sweet Spot Azul)
   Applies brand-deep background to anchor sections (Hero, Founder, Contact).
   Aligns landing with brandbook 50/30/15/5 by giving the Primary Blue
   meaningful presence as the dominant base in key narrative moments,
   while preserving Off-white as the dominant base for content-dense sections.
   Copper stays exclusive to the action button on each brand section.
   ========================================================= */

.section--brand {
  background-color: var(--color-primary);
  color: var(--color-bg);
}

/* Headings on brand background */
.section--brand .t-display,
.section--brand .t-h1,
.section--brand .t-h2,
.section--brand .t-h3,
.section--brand h1,
.section--brand h2,
.section--brand h3 {
  color: var(--color-bg);
}

/* Body copy on brand background */
.section--brand .t-body,
.section--brand p:not(.eyebrow):not(.t-caption) {
  color: var(--color-bg);
}

/* Captions: visible but secondary on brand background */
.section--brand .t-caption {
  color: rgba(244, 242, 238, 0.8);
}

/* Eyebrow stays copper as the single accent anchor of the section */
.section--brand .eyebrow {
  color: var(--color-accent);
}

/* Hero background curves are defined once in section--hero::before; the SVG
   pattern uses off-white strokes designed for the brand-blue background. */

/* ---------- Form fields adapted for brand background ---------- */
.section--brand .form-field__label {
  color: var(--color-bg);
}

.section--brand .form-field__optional {
  color: rgba(244, 242, 238, 0.6);
}

.section--brand .form-field__input,
.section--brand .form-field__textarea {
  background-color: rgba(244, 242, 238, 0.06);
  color: var(--color-bg);
  border: 1px solid rgba(244, 242, 238, 0.22);
  transition: border-color var(--transition-base), background-color var(--transition-base);
}

.section--brand .form-field__input::placeholder,
.section--brand .form-field__textarea::placeholder {
  color: rgba(244, 242, 238, 0.45);
}

.section--brand .form-field__input:hover,
.section--brand .form-field__textarea:hover {
  border-color: rgba(244, 242, 238, 0.4);
}

.section--brand .form-field__input:focus,
.section--brand .form-field__textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  background-color: rgba(244, 242, 238, 0.1);
  box-shadow: 0 0 0 3px rgba(204, 110, 70, 0.18);
}

.section--brand .form-field--error .form-field__input,
.section--brand .form-field--error .form-field__textarea {
  border-color: var(--color-accent);
}

.section--brand .form-field__error {
  color: var(--color-accent);
}

/* Success state contrast on brand background */
.section--brand .success-state__icon {
  color: var(--color-accent);
}

/* Founder photo placeholder/frame contrast on brand bg */
.section--brand .founder-placeholder {
  background-color: rgba(244, 242, 238, 0.06);
  border: 1px solid rgba(244, 242, 238, 0.1);
}

/* Contact form submit button retains btn-primary (copper) on blue —
   this is the moment the accent earns its 5% share of the system. */

/* =========================================================
   TIMELINE STEPS - LATERAL SLIDE-IN ON SCROLL (desktop only)
   Each step enters from its alternating side (--left from the left,
   --right from the right) instead of the default translateY. Adds
   cinematic variety to the Process section. Mobile keeps the default
   translateY since the layout is single-column.
   ========================================================= */

@media (min-width: 768px) {
  .timeline-step.fade-in {
    /* Override the generic translateY(20px) start state */
    transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1), transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .timeline-step--left.fade-in {
    transform: translateX(-60px);
  }

  .timeline-step--right.fade-in {
    transform: translateX(60px);
  }

  .timeline-step.fade-in.is-visible {
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .timeline-step.fade-in,
  .timeline-step--left.fade-in,
  .timeline-step--right.fade-in {
    transform: none;
    transition: opacity 200ms ease;
  }
}

/* Disable button hover effects on touch devices to prevent "stuck hover" after tap */
@media (hover: none) {
  .btn-primary:hover,
  .btn-primary--hero:hover {
    background: var(--color-accent);
    box-shadow: none;
  }
}