/* ============================================================
   ERIC NIEVES COACHING — shared styles
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Oswald:wght@500;600&family=Saira+Condensed:ital,wght@1,800&family=Tomorrow:ital,wght@0,900;1,600;1,800&display=swap');

/* === VARIABLES === */
:root {
  --black:      #0a0a0b;
  --panel:      #121214;
  --panel-2:    #17171a;
  --ink:        #f4f4f5;
  --muted:      #9a9a9f;
  --line:       #262629;
  --red:        #9e1b22;
  --red-bright: #c1272d;
  --steel:      #7c8089;

  /* Standardized against the Figma reference (node 26:129) — the design
     uses exactly one red fill (#c1272d, --red-bright) everywhere, one
     body-copy color across every paragraph on the page, and two flat
     "surface" grays for cards/chips sitting on black sections (as
     opposed to the translucent card treatment used on red sections). */
  --body-text:  rgba(255, 255, 255, 0.75);
  --card-dark:  #222226;
  --chip-dark:  #333339;

  --max-w:     1200px;
  --gutter:    clamp(1.25rem, 5vw, 2.5rem);
  --radius:    2px;
  --radius-lg: 4px;
  --ease:      0.22s ease;
}

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  {
  background: var(--black);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img    { display: block; max-width: 100%; }
a      { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
ul     { list-style: none; }

/* === TYPOGRAPHY HELPERS === */
.display-alt {
  font-family: 'Tomorrow', sans-serif;
  font-style: italic;
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* === EYEBROW === */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--red-bright);
  margin-bottom: 1rem;
}

/* Two skewed dashes before the eyebrow text */
.rule {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}
.rule::before,
.rule::after {
  content: '';
  display: block;
  height: 2px;
  background: var(--red-bright);
  transform: skewX(-18deg);
}
.rule::before { width: 18px; }
.rule::after  { width: 8px; }

/* === LAYOUT === */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { padding-block: clamp(4rem, 8vw, 7rem); }

/* === BUTTONS === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 0.83rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.875rem 2rem;
  /* Parallelogram: cut corners on opposite diagonals */
  clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
  transition: filter var(--ease), transform var(--ease), box-shadow var(--ease);
  white-space: nowrap;
  position: relative;
}
.btn:hover   { filter: brightness(1.14); transform: translateY(-1px); }
.btn:active  { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--red-bright); outline-offset: 4px; border-radius: 1px; }

.btn-red   { background: var(--red-bright);  color: var(--ink); }
.btn-white { background: var(--ink);  color: var(--black); }

.btn-ghost {
  background: var(--chip-dark);
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.btn-ghost:hover {
  box-shadow: inset 0 0 0 1.5px var(--red-bright);
  color: var(--red-bright);
  filter: none;
}

/* Home page redesign — skewed like the original parallelogram cut, but
   with soft rounded corners. clip-path can't round corners, so instead
   the whole button is sheared with a transform (which naturally rounds
   under border-radius) and the label is counter-sheared to stay upright. */
.btn-skew {
  clip-path: none;
  border-radius: 6px;
  transform: skewX(-10deg);
}
.btn-skew:hover { transform: skewX(-10deg) translateY(-1px); }
.btn-skew:active { transform: skewX(-10deg) translateY(0); }
.btn-skew .btn-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transform: skewX(10deg);
}

/* === LOGO TEXT FALLBACK === */
/* Rendered when the logo image asset isn't available (see hero-logo). */
.logo-text {
  font-family: 'Saira Condensed', sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: 1.45rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1;
}
.logo-text .accent { color: var(--red-bright); }

/* === PINSTRIPE TEXTURE === */
.pinstripe {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: repeating-linear-gradient(
    -65deg,
    transparent,
    transparent 8px,
    rgba(255, 255, 255, 0.02) 8px,
    rgba(255, 255, 255, 0.02) 9px
  );
}

/* === HERO (home page) === */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 100svh;
  /* .hero-inner-2 already carries its own precise padding — override the
     global `section` padding-block so it doesn't stack an extra ~200px+
     on top and throw off the hero's actual rendered height. */
  padding-block: 0;
  display: flex;
  align-items: flex-start;
  background: var(--black);
}

/* Diagonal wedge photo — pre-clipped PNG exported from Figma (alpha
   transparency outside the wedge shape), positioned via the exact
   inset percentages from the design so it scales with the section. */
.hero-photo-wedge {
  position: absolute;
  inset: -10% 50.27% -14.7% -17.88%;
  z-index: 0;
}
.hero-photo-wedge img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* contain (not cover) so the pre-clipped diagonal edge is never
     cropped when the viewport's aspect ratio differs from the
     design's — cover would slice into the wedge shape itself. */
  object-fit: contain;
}

/* Small-breakpoint photo band — a plain full-bleed landscape crop (no
   diagonal/skew), per the Figma small frame. Hidden by default; shown
   at the 970px breakpoint. Lives as a direct .hero child (not inside
   .hero-inner-2) so its full width isn't eaten by the text column's
   side padding. */
.hero-photo-band {
  display: none;
  width: 100%;
  aspect-ratio: 971 / 502;
  margin-top: 1.5rem;
  position: relative;
  z-index: 2;
  /* Top edge only, on a diagonal — right corner higher than left. */
  clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 100%);
}
.hero-photo-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Nav integrated into the hero itself (per design) — not a separate
   sticky header. Sits over the photo/black background, top-right. */
.hero-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2.5rem;
  padding-block: 1.75rem;
  padding-left: var(--gutter);
  /* Matches .hero-inner-2's right padding so the nav, headline and CTA
     row all share the same right edge at every breakpoint. */
  padding-right: clamp(1rem, 2vw, 3rem);
}
.hero-nav-links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}
.hero-nav-links a {
  font-family: 'Tomorrow', sans-serif;
  font-style: italic;
  font-weight: 600;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  transition: color var(--ease);
}
.hero-nav-links a:hover { color: var(--red-bright); }
.hero-nav-links a:focus-visible { outline: 2px solid var(--red-bright); outline-offset: 3px; border-radius: 2px; }

.hero-logo { display: flex; align-items: center; }
.hero-logo img { height: 42px; width: auto; }

/* Hamburger — smallest breakpoint only, replaces .hero-nav-links.
   Skewed rounded parallelogram like .btn-skew, with a 3-bar icon that
   morphs into an X via [aria-expanded="true"] (no extra JS classes). */
.hero-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: var(--red-bright);
  border-radius: 6px;
  transform: skewX(-10deg);
  transition: filter var(--ease);
}
.hero-hamburger:hover { filter: brightness(1.14); }
.hero-hamburger:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.hero-hamburger-icon {
  position: relative;
  width: 20px;
  height: 14px;
  transform: skewX(10deg);
}
.hero-hamburger-icon span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--ink);
  border-radius: 1px;
  transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
}
.hero-hamburger-icon span:nth-child(1) { top: 0; }
.hero-hamburger-icon span:nth-child(2) { top: 6px; }
.hero-hamburger-icon span:nth-child(3) { top: 12px; }

.hero-hamburger[aria-expanded="true"] .hero-hamburger-icon span:nth-child(1) {
  top: 6px;
  transform: rotate(45deg);
}
.hero-hamburger[aria-expanded="true"] .hero-hamburger-icon span:nth-child(2) { opacity: 0; }
.hero-hamburger[aria-expanded="true"] .hero-hamburger-icon span:nth-child(3) {
  top: 6px;
  transform: rotate(-45deg);
}

/* Full-screen menu overlay — starts below the header row (logo +
   hamburger stay visible on the black hero background above it) and
   covers the rest of the viewport. Opened via .open (main.js). */
.mobile-menu {
  display: none;
  position: fixed;
  top: 149px;
  left: 0;
  right: 0;
  z-index: 4;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(2rem, 5.5vw, 3.3rem);
  background: var(--red-bright);
  padding: 2.5rem clamp(1rem, 3.91vw, 2rem);
  max-height: calc(100vh - 149px);
  overflow-y: auto;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  font-family: 'Tomorrow', sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: clamp(1.5rem, 3.708vw, 2.25rem);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color var(--ease);
}
.mobile-menu a:hover { color: var(--black); }
.mobile-menu a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

@media (min-width: 971px) {
  .mobile-menu.open { display: none; }
}

.hero-inner-2 {
  position: relative;
  z-index: 2;
  width: 100%;
  min-width: 0;
  padding-left: clamp(2rem, 21.8vw, 27rem);
  padding-right: clamp(1rem, 2vw, 3rem);
  padding-top: clamp(7rem, 24vh, 15rem);
  padding-bottom: clamp(3rem, 10vh, 6rem);
}

.hero-headline-2 {
  font-size: clamp(2.75rem, 9.375vw, 11.25rem);
  margin-bottom: 2rem;
  text-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
}
.hero-headline-2 .ln { display: block; }
.hero-headline-2 .accent { color: var(--red-bright); }

/* Support copy + CTAs sit in their own width-capped column, flush to the
   hero's right edge (matching the nav/headline's right edge) rather than
   spanning the full remaining hero width — per the Figma reference, this
   block is deliberately narrower than the headline above it. */
.hero-support {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 43.5rem;
  margin-left: auto;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.hero-ctas .btn { flex: 1 1 0; }

/* === WHO I HELP SECTION ===
   Per the Figma reference, this section sits on the same red background
   as .process and reuses its translucent-card treatment exactly (cards
   below use .process-card/.process-title/.process-body, not a section-
   specific class). Only the grid stays section-specific: 4 items divide
   evenly by 2, so unlike .process-grid (which jumps straight from 3
   columns to 1) this one folds through an intermediate 2x2 tablet step —
   same two-step breakpoint cadence as .footer-grid (960px → 2 cols,
   768px → 1 col) rather than inventing a new breakpoint for it. */
.who-help { background: var(--red-bright); }
.who-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}

/* === COACHING OPTIONS SECTION ===
   3 cards, so this reuses .process-grid as-is (3-across, straight to 1
   column at 960px — no 2x2 intermediate, matching the original 3-item
   rationale). This section sits on black, though, so its cards use a
   flat --card-dark fill instead of .process-card's translucent-on-red
   treatment — matching the Figma reference, which uses two distinct
   card styles depending on whether the section behind them is red or
   black. .who-card/-title/-body now live here since this is their only
   remaining consumer after Who I Help switched to .process-card. */
.coaching-options { background: var(--black); }
.coaching-options-cta {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}
.who-card {
  background: var(--card-dark);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
}
.who-card-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  margin-bottom: 0.75rem;
}
.who-card-body {
  font-size: 0.925rem;
  color: var(--body-text);
  line-height: 1.72;
}

/* === PROCESS SECTION (home page redesign) === */
.process { background: var(--red-bright); }
/* 44px desktop cap + a flat 24px gap to the intro paragraph below it —
   both taken directly from the Figma autolayout (heading+intro grouped
   with a 24px gap; that group to the card grid below is 48px, applied
   via .process-grid/.who-grid's margin-top instead of here, since
   .section-intro is shared with Hero, which needs a different gap). */
.section-headline-2 {
  font-size: clamp(2.25rem, 4.5vw, 2.75rem);
  margin-bottom: 1.5rem;
}

/* Standardized intro paragraph directly under a section heading — Hero,
   Who I Help, Process, and Coaching Options all use this same treatment
   in the Figma reference. */
.section-intro { color: var(--body-text); }

.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}

.process-card {
  background: rgba(18, 18, 20, 0.33);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
}

.process-num {
  display: block;
  font-family: 'Tomorrow', sans-serif;
  font-weight: 900;
  font-size: 2.75rem;
  line-height: 1;
  color: var(--red-bright);
  margin-bottom: 1.1rem;
}
.process-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  margin-bottom: 0.75rem;
}
.process-body {
  font-size: 0.925rem;
  color: var(--body-text);
  line-height: 1.72;
}

/* === ABOUT SECTION === */
.about { background: var(--black); }
/* About's heading is bigger than the standard .section-headline-2 (56px
   vs 44px) and sits full-width above .two-col rather than inside the
   half-width text column — per the Figma reference, which uses a
   separate, larger heading treatment just for this section. Moving it
   out of the text column (see index.html) is what actually stops it
   wrapping to two lines; this override just restores its larger size
   and the 48px gap to the row below. */
#about-heading {
  font-size: clamp(2.5rem, 5.5vw, 3.5rem);
  margin-bottom: 3rem;
}
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
/* Diagonal wedge photo — same pre-clipped-PNG technique as .hero-photo-wedge,
   insets taken from the design relative to this section's own box. */
.about-photo-wrap {
  position: relative;
  aspect-ratio: 598 / 668;
}
.about-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Mobile-only photo band, shown above the text (order: -1) below ~960px.
   Capped with max-width instead of scaling to the viewport — at tablet
   widths a full-bleed band gets disproportionately tall/large. */
.about-photo-band {
  display: none;
  width: 100%;
  max-width: 320px;
  margin-inline: auto;
  aspect-ratio: 1462 / 2168;
  margin-bottom: 1rem;
}
.about-photo-band img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.about-body p {
  font-size: 0.96rem;
  color: var(--body-text);
  line-height: 1.78;
  margin-bottom: 1.25rem;
}
.about-body p:last-child { margin-bottom: 0; }
.about-body strong { color: var(--ink); font-weight: 600; }

/* Credentials — small chip list under the About body copy, styled to
   match the flat --chip-dark surface the Figma reference uses for this
   exact component (no border — the design's chips are a solid fill). */
.about-credentials { margin-top: 1.75rem; }
.credential-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.25rem;
}
.credential-chip {
  display: inline-flex;
  align-items: center;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  background: var(--chip-dark);
  border-radius: var(--radius);
  padding: 0.5rem 0.9rem;
}

/* FAQ — full-width, below .two-col (still reads as "under Credentials" in
   flow/visual order). Native <details>/<summary> for free keyboard +
   touch support; items use the same --card-dark "card on black" fill as
   .who-card, reusing that standardized treatment rather than a new one. */
/* Reuses the same clamp as the global `section` padding-block rule, so
   the gap to the FAQ block reads as a genuine section break even though
   it's still nested inside .about (same black background). */
.faq { margin-top: clamp(4rem, 8vw, 7rem); }
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.faq-item {
  background: var(--card-dark);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.5rem;
  cursor: pointer;
  list-style: none;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question:focus-visible { outline: 2px solid var(--red-bright); outline-offset: -2px; }
.faq-icon { flex-shrink: 0; color: var(--red-bright); transition: transform var(--ease); }
.faq-item[open] .faq-icon { transform: rotate(180deg); }
.faq-answer {
  padding: 0 1.5rem 1.25rem;
  color: var(--body-text);
  font-size: 0.9rem;
  line-height: 1.7;
}

/* === CTA BAND === */
.cta-band {
  background: var(--red-bright);
  padding-block: clamp(3rem, 6vw, 5rem);
  position: relative;
  overflow: hidden;
}
.cta-band-texture {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    -65deg,
    transparent,
    transparent 8px,
    rgba(0, 0, 0, 0.07) 8px,
    rgba(0, 0, 0, 0.07) 9px
  );
}
.cta-band-inner {
  position: relative;
  z-index: 1;
  text-align: center;
}
.cta-band-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(244, 244, 245, 0.55);
  margin-bottom: 0.75rem;
}
.cta-band-headline {
  font-size: clamp(2.25rem, 5vw, 4rem);
  margin-bottom: 0.875rem;
  color: var(--ink);
}
.cta-band-sub {
  font-size: 1rem;
  color: var(--body-text);
  max-width: 480px;
  margin-inline: auto;
  line-height: 1.7;
  margin-bottom: 2.25rem;
}

/* Home page redesign — bigger two-tone split headline */
.cta-band-headline--split {
  font-size: clamp(2.75rem, 8vw, 6.5rem);
  margin-bottom: 2rem;
}
.cta-band-headline--split .muted-black { color: var(--black); }

/* === PAGE HERO (inner pages, e.g. assessment.html) ===
   Same nav (.hero-nav and children, reused verbatim) as the homepage
   hero, but without the full-bleed photo/100svh treatment — just a
   compact title band for content pages. .hero-nav is absolutely
   positioned (see above), so .page-hero-inner's padding-top reuses the
   exact same clamp() as .hero-inner-2 to clear it identically at every
   breakpoint. */
.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--black);
}
.page-hero-inner {
  position: relative;
  z-index: 2;
  /* Floor stays high enough to clear .hero-nav even at its tallest
     (stacked logo-over-links, ~142px, between the 970px and 1200px nav
     breakpoints) — everything above that floor just trims the excess
     air on taller viewports. */
  padding-top: clamp(9.5rem, 12vh, 10.5rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.page-hero-headline {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  margin-bottom: 1rem;
  text-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
}
.page-hero-intro { max-width: 42rem; }

/* === PROSE CONTENT (inner pages) ===
   Long-form body sections narrower than the standard 1200px .container,
   for comfortable line length. Alternates onto the unused --panel token
   for a subtle band rhythm between sections instead of the homepage's
   louder red/black alternation, which reads as too busy over this much
   running text. */
.section-panel { background: var(--panel); }
.prose { max-width: 54rem; margin-inline: auto; }

.body-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 1.25rem 0;
}
.body-list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.96rem;
  color: var(--body-text);
  line-height: 1.78;
}
.body-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 9px;
  height: 2px;
  background: var(--red-bright);
  transform: skewX(-18deg);
}

/* Visually hidden but still announced to screen readers — used on the
   "opens in a new tab" hint for external links.html cards. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* === LINKS PAGE (link-in-bio, links.html) ===
   No site nav/header — a single centered column, mobile-first since
   it's opened from an Instagram bio link. min-height:100svh + flex
   centering means desktop just centers the same narrow column
   vertically and horizontally instead of ever growing wider. */
.links-page {
  position: relative;
  overflow: hidden;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--black);
  padding: clamp(3rem, 8vw, 5rem) var(--gutter);
}
.links-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 26rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Same header logo image used at the top of the homepage (.hero-logo
   img), just sized for a standalone centered header instead of a nav
   row — falls back to the same .logo-text wordmark on error. */
.links-logo {
  height: 3.75rem;
  width: auto;
  margin-bottom: 2.75rem;
}
.links-logo-text-fallback { margin-bottom: 2.75rem; }

.links-name {
  font-size: clamp(1.65rem, 6.5vw, 2.6rem);
  white-space: nowrap;
  margin-bottom: 0.5rem;
}
.links-location {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--steel);
  margin-bottom: 1.25rem;
}
.links-tagline {
  font-size: 0.925rem;
  color: var(--body-text);
  line-height: 1.7;
  max-width: 22rem;
  margin-bottom: 2.25rem;
}

.link-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.link-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  background: var(--card-dark);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.35rem;
  text-align: left;
  box-shadow: inset 0 0 0 1.5px var(--line);
  transition: box-shadow var(--ease), transform var(--ease);
}
.link-card:hover,
.link-card:focus-visible {
  box-shadow: inset 0 0 0 1.5px var(--red-bright);
  transform: translateY(-1px);
  outline: none;
}
.link-card:active { transform: translateY(0); }

.link-card-text {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}
.link-card-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink);
}
.link-card-sub {
  font-size: 0.82rem;
  color: var(--body-text);
  line-height: 1.5;
}
.link-card-icon { flex-shrink: 0; color: var(--red-bright); }

.links-footer {
  margin-top: 2.5rem;
  font-size: 0.78rem;
  color: var(--steel);
}

/* === FOOTER === */
.site-footer {
  background: #000;
  border-top: 1px solid var(--line);
  padding-block: clamp(3rem, 6vw, 5rem);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}
/* Home page redesign — simplified 2-column footer (no Explore column,
   since nav is anchor-based now) */
.footer-grid--simple { grid-template-columns: 1.5fr 1fr; }
.footer-logo-img { height: 60px; width: auto; margin-bottom: 1.25rem; }
.footer-logo-text {
  font-family: 'Saira Condensed', sans-serif;
  font-style: italic;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 1.25rem;
}
.footer-logo-text .en  { font-size: 2rem; }
.footer-logo-text .en .accent { color: var(--red-bright); }
.footer-logo-text .sub {
  display: block;
  font-style: normal;
  font-family: 'Oswald', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--steel);
  margin-top: 4px;
}
.footer-blurb {
  font-size: 0.875rem;
  color: var(--body-text);
  line-height: 1.72;
  max-width: 360px;
}
.footer-col-title {
  font-size: 1.625rem;
  color: var(--red-bright);
  margin-bottom: 1.25rem;
}
.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.875rem;
  color: var(--body-text);
  margin-bottom: 0.75rem;
  line-height: 1.55;
}
.footer-contact-item:last-child { margin-bottom: 0; }
.footer-contact-item svg { flex-shrink: 0; margin-top: 1px; color: var(--steel); }
.footer-contact-item a { color: var(--body-text); transition: color var(--ease); }
.footer-contact-item a:hover { color: var(--red-bright); }

.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.footer-copy {
  font-size: 0.78rem;
  color: var(--steel);
}

/* === FORM FIELDS (booking modal) === */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.form-group:last-of-type { margin-bottom: 0; }

.form-label {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.form-input,
.form-textarea {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  padding: 0.75rem 1rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  width: 100%;
  outline: none;
  transition: border-color var(--ease);
  -webkit-appearance: none;
}
.form-input:focus,
.form-textarea:focus { border-color: var(--red-bright); }
.form-input::placeholder,
.form-textarea::placeholder { color: var(--steel); }

.form-textarea { resize: vertical; min-height: 120px; }

/* .form-select is layered on top of .form-input (same class list) — just
   adds the custom chevron and removes the native arrow, since select
   needs appearance:none in more browsers than a plain text input does. */
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237c8089' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}
.form-select option { background: var(--panel-2); color: var(--ink); }

.form-submit-row { margin-top: 1.5rem; }

/* Persistent fallback — visible any time the modal is open, not just
   after submission, in case a visitor's device has no mail client. */
.booking-modal-email {
  margin-top: 0.5rem;
  margin-bottom: 1.75rem;
  font-size: 0.85rem;
  color: var(--body-text);
}
.booking-modal-email a { color: var(--red-bright); transition: color var(--ease); }
.booking-modal-email a:hover { color: var(--ink); }

.form-confirmation {
  display: none;
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  background: rgba(158, 27, 34, 0.12);
  border: 1px solid var(--red);
  font-size: 0.9rem;
  color: var(--ink);
  line-height: 1.6;
  text-align: center;
}
.form-confirmation.visible { display: block; }

/* === SCROLL REVEAL === */
.reveal,
.reveal-left,
.reveal-right {
  opacity: 0;
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal       { transform: translateY(22px); }
.reveal-left  { transform: translateX(-22px); }
.reveal-right { transform: translateX(22px); }

.reveal.in,
.reveal-left.in,
.reveal-right.in {
  opacity: 1;
  transform: translate(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-left,
  .reveal-right {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .btn:hover { transform: none; }
}

/* === RESPONSIVE === */

/* Largest breakpoint — let a sliver of the Process section peek in at
   the bottom of the viewport on load, as a hint there's more below. */
@media (min-width: 1601px) {
  .hero { min-height: calc(100svh - 90px); }

  .hero-logo img { height: 56px; }

  /* Keep "Your first session" / "is on me." as two lines, not three —
     at this font-size the first line otherwise wraps on its own. */
  .cta-band-headline--split { white-space: nowrap; }
}

/* Midsize / laptop breakpoint — matches the Figma "midsize" frame
   (authored at 1444px). The nav stays a single right-aligned row until
   it starts crowding the hero photo (see the 920px breakpoint below).
   The headline/CTA band scale down to the design's smaller proportions. */
@media (max-width: 1600px) {
  /* Same peek of the next section at the bottom of the viewport as the
     largest breakpoint. */
  .hero { min-height: calc(100svh - 90px); }

  /* Logo stays the same larger size as the largest breakpoint here —
     it doesn't need to shrink until a narrower breakpoint. */
  .hero-logo img { height: 56px; }

  .hero-inner-2 {
    padding-left: clamp(2rem, 29vw, 22rem);
  }
  .hero-headline-2 { font-size: clamp(2.5rem, 8.2vw, 7.5rem); }

  /* Midsize wedge photo — box height is pinned to the full hero height
     (top/bottom 0) and width is derived from the image's own aspect
     ratio instead of a fixed % of viewport width. A width-percentage
     box drifts out of ratio with the image as the window gets narrower
     without getting shorter, which forced object-fit to either crop
     into the baked-in diagonal (cover) or shrink the photo short of
     the section's full height (contain). Matching the box's ratio to
     the image's exactly means it always fills top-to-bottom with no
     crop and no gap, regardless of window shape. */
  .hero-photo-wedge {
    top: 0;
    right: auto;
    bottom: 0;
    left: -13.07%;
    aspect-ratio: 2597 / 2901;
  }

  /* Keep "Your first session" / "is on me." as two lines here too. */
  .cta-band-headline--split {
    font-size: clamp(2.25rem, 6.5vw, 4.75rem);
    white-space: nowrap;
  }
}

/* Some overlap between the nav links and the hero photo is fine — it's
   only once the leftmost link (Process) would actually reach the
   photo's diagonal edge that the row stops working. Measured against
   the running site: that happens around 1200px, well below the 1600px
   midsize breakpoint. Below this, drop the links under the logo
   instead of letting them collide with the photo. */
@media (max-width: 1200px) {
  .hero-nav {
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    /* Shrink-wrap to the logo's width (the widest child) and keep that
       block flush with the right edge, so centering the links row below
       is relative to the logo, not the full viewport width. */
    left: auto;
    width: fit-content;
    padding-left: 0;
  }
  .hero-logo { order: -1; }
}

/* Smallest breakpoint — matches the Figma "small" frame (authored at
   971px). No more side wedge photo at all; the hero becomes a centered
   black panel — logo, then nav row, then headline, then CTAs, all
   centered on the full viewport width instead of tucked under the
   logo on the right. */
@media (max-width: 970px) {
  /* Logo left, hamburger right — replaces the wider breakpoints'
     centered logo-over-links stack (see .hero-nav-links / .hero-hamburger
     display swap below). */
  .hero-nav {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    left: 0;
    width: auto;
    padding-left: var(--gutter);
  }
  .hero-nav-links { display: none; }
  .hero-hamburger { display: flex; }

  .hero-photo-wedge { display: none; }
  .hero-photo-band  { display: block; }
  /* Stack .hero-inner-2 and .hero-photo-band vertically (the row default
     would otherwise sit them side by side). */
  .hero { flex-direction: column; }

  .hero-inner-2 {
    padding-left: clamp(1rem, 6.18vw, 3rem);
    padding-right: clamp(1rem, 3.91vw, 2rem);
  }
  /* Same staggered per-line composition as the wider breakpoints — the
     Figma small frame keeps it, it's not a plain centered block. */
  .hero-headline-2 { font-size: clamp(2rem, 11.18vw, 6.8rem); }
  .hero-support {
    max-width: none;
    margin-left: 0;
  }
  .hero-ctas {
    justify-content: center;
    gap: 1.45rem;
  }
}

@media (max-width: 960px) {
  /* Straight from 3 columns to 1 — a 2-then-1 intermediate step leaves
     the third card orphaned alone on its own row. */
  .process-grid       { grid-template-columns: 1fr; }
  .two-col            { grid-template-columns: 1fr; }
  .about-photo-wrap   { display: none; }
  .about-photo-band   { display: block; order: -1; }
  .footer-grid        { grid-template-columns: 1fr 1fr; }
  /* 4 divides evenly by 2, so unlike .process-grid this folds through
     an intermediate 2x2 step instead of jumping straight to 1 column —
     same cadence as .footer-grid above. */
  .who-grid           { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .footer-grid       { grid-template-columns: 1fr; }
  .form-row          { grid-template-columns: 1fr; }
  .who-grid          { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; }

  /* Don't let the About Eric band run full width/height at phone size —
     scale it down and center it instead. */
  .about-photo-band {
    max-width: 280px;
    margin-inline: auto;
  }
}

/* ============================================================
   BOOKING MODAL — quick lead form used by every "free assessment"
   CTA. Centered overlay on wide viewports; full-screen sheet below
   768px (same mobile threshold used everywhere else on the site).
============================================================ */
.booking-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.booking-modal.open { display: flex; }

.booking-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 11, 0.82);
  backdrop-filter: blur(2px);
}

.booking-modal-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 2.5rem;
  animation: booking-modal-in 0.22s ease;
}
.booking-modal-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--red), var(--red-bright));
}

@keyframes booking-modal-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.booking-modal-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: color var(--ease);
}
.booking-modal-close:hover { color: var(--red-bright); }
.booking-modal-close:focus-visible { outline: 2px solid var(--red-bright); outline-offset: 2px; }

.booking-modal-heading {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin-bottom: 1.75rem;
}

@media (prefers-reduced-motion: reduce) {
  .booking-modal-panel { animation: none; }
}

@media (max-width: 768px) {
  .booking-modal { padding: 0; }
  .booking-modal-panel {
    max-width: none;
    width: 100%;
    height: 100%;
    max-height: none;
    border: none;
    padding: 5.5rem 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    animation: none;
  }
  .booking-modal-close { top: 1.5rem; }
}