/* ==========================================================================
   Page-section layout — hero (Home Part 1)
   Consumes tokens from tokens.css (--color-*, --space-*, --radius-*, --shadow-*)
   More sections appended here by later tasks.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 480px;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The loop ships ungraded and unblurred -- the footage carries its own
     contrast, so the earlier gblur+eq chain is gone. That blur was what made
     the old loop look washed out (averaging pixels collapses contrast and
     saturation), and the grade only existed to claw that back.
     Deliberately no CSS filter here either: a filter on a *playing* video
     re-renders every frame on the GPU for the whole session, unlike a static
     image where it is paid once.
     Encode chain (from bellevue-drone.mp4, kept outside the repo --
     1920x1080, 42.6s, 107 MB -> 5.2 MB loop):
       scale=1280:720:flags=lanczos, libx264 crf 32 preset slow, +faststart
     720p is deliberate: this is a scrimmed background at scale(1.06), so the
     detail is invisible but the bitrate is not. Dropping the blur costs real
     bytes (blurred footage compresses far better), which is what the higher
     CRF pays for.
     hero-poster.webp must stay frame 0 of this file -- see hero-parallax.js. */
  display: block;
  transform: scale(1.06);
  max-width: none;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(10, 29, 59, 0.15) 0%, rgba(10, 29, 59, 0.35) 45%, rgba(10, 29, 59, 0.6) 100%),
    linear-gradient(to top, rgba(10, 29, 59, 0.45) 0%, rgba(10, 29, 59, 0) 22%);
}

.hero__overlay {
  position: absolute;
  inset: 0;
  height: 100vh;
  height: 100svh;
  z-index: 1;
  display: flex;
  align-items: center;
}

.hero__inner {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.hero__panel {
  width: 100%;
  max-width: 480px;
  background: var(--color-ivory);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-6) var(--space-5);
}

.hero__panel h1 {
  font-size: clamp(1.9rem, 3vw + 1.2rem, 2.75rem);
}

.hero__subhead {
  color: var(--color-navy-soft);
  font-size: 1.05rem;
  margin-bottom: var(--space-5);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.hero__actions .btn {
  flex: 1 1 auto;
  text-align: center;
}

.hero__scroll-cue {
  position: absolute;
  left: 50%;
  bottom: var(--space-5);
  z-index: 1;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 240, 0.6);
  border-radius: 50%;
  color: var(--color-ivory);
  text-decoration: none;
  font-size: 1.1rem;
  animation: hero-scroll-cue-bounce 2.2s ease-in-out infinite;
}

.hero__scroll-cue:hover,
.hero__scroll-cue:focus-visible {
  border-color: var(--color-ivory);
  background: rgba(255, 255, 240, 0.12);
}

@keyframes hero-scroll-cue-bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 6px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll-cue {
    animation: none;
  }
}

@media (max-width: 720px) {
  .hero {
    min-height: 560px;
  }

  .hero__inner {
    justify-content: center;
    padding-block: var(--space-7);
  }

  .hero__panel {
    max-width: none;
    padding: var(--space-5) var(--space-4);
  }

  .hero__actions {
    flex-direction: column;
  }

  .hero__actions .btn {
    width: 100%;
    min-height: 44px;
  }
}

/* Sticky hero: on wider screens the background/scrim pin in place for an
   extra 50vh of scroll while the stats panel (pulled up by the same amount)
   slides over them. The text overlay (.hero__overlay) is NOT pinned — it's a
   normal absolutely-positioned child of the now-taller .hero, so it scrolls
   away at the same rate as the rest of the page, same as before.
   Skipped on narrow viewports — position:sticky + 100vh math gets unreliable
   with mobile browsers' collapsing address bars. */
@media (min-width: 721px) {
  .hero {
    height: calc(100vh + 50vh);
    height: calc(100svh + 50vh);
    /* overflow:hidden on an ancestor disables position:sticky on descendants
       entirely, so it can't stay here now that .hero__bg/.hero__scrim are the
       sticky elements. clip-path achieves the same visual clipping (trims the
       scaled background's bleed) without creating a scroll container, so it
       doesn't interfere with the sticky calculation the way overflow does. */
    overflow: visible;
    clip-path: inset(0);
  }

  .hero__bg,
  .hero__scrim {
    position: sticky;
    inset: 0 auto auto 0;
    width: 100%;
    height: 100vh;
    height: 100svh;
  }

  /* position:sticky is in-flow, so the scrim would otherwise stack *below*
     the image instead of overlaying it. Pull it back up by one viewport so
     both share the same flow position and the gradient sits over the photo
     again, as it did when both were position:absolute. */
  .hero__scrim {
    margin-top: -100vh;
    margin-top: -100svh;
  }

  .stats-panel {
    position: relative;
    z-index: 1;
    margin-top: -50vh;
  }
}

/* --------------------------------------------------------------------------
   Stats panel (Home Part 2)
   -------------------------------------------------------------------------- */

.stats-panel {
  background: var(--color-ivory);
  padding-block: var(--space-8);
  overflow: hidden;
}

.stats-panel__inner {
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  align-items: center;
  gap: var(--space-7);
}

.stats-panel__headshot {
  width: 100%;
  height: auto;
  justify-self: center;
  filter: drop-shadow(0 18px 24px rgba(10, 29, 59, 0.18));
}

.stats-panel__content h2 {
  max-width: 40ch;
  margin-bottom: var(--space-6);
}

.stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin: 0 0 var(--space-6);
  padding: 0;
}

.stat-row__item {
  min-width: 100px;
}

.stat-row dt {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(2rem, 1.5vw + 1.5rem, 2.75rem);
  color: var(--color-navy);
  line-height: 1.1;
}

.stat-row dd {
  margin: var(--space-1) 0 0;
  font-size: 0.85rem;
  color: var(--color-navy-soft);
  opacity: 0.75;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

@media (max-width: 860px) {
  .stats-panel__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .stats-panel__headshot {
    max-width: 320px;
    margin-inline: auto;
  }

  .stats-panel__content h2 {
    max-width: none;
    margin-inline: auto;
  }

  .stat-row {
    justify-content: center;
  }
}

@media (max-width: 520px) {
  .stats-panel {
    padding-block: var(--space-6);
  }

  .stat-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5) var(--space-4);
  }
}

/* --------------------------------------------------------------------------
   About hero
   -------------------------------------------------------------------------- */

.about-hero {
  background: var(--color-ivory);
  padding-block: var(--space-8);
}

.about-hero__inner {
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  align-items: center;
  gap: var(--space-7);
}

.about-hero__inner img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.about-hero__title {
  color: var(--color-navy-soft);
  font-size: 1.1rem;
  margin: var(--space-2) 0 var(--space-5);
}

.about-hero__inner .stat-row {
  margin-bottom: var(--space-6);
}

@media (max-width: 780px) {
  .about-hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .about-hero__inner img {
    max-width: 280px;
    margin-inline: auto;
  }

  .about-hero__inner .stat-row {
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   About personality sections (How I Work / Away From Work)
   -------------------------------------------------------------------------- */

.about-personality {
  padding-block: var(--space-8);
}

.about-personality__centered {
  text-align: center;
}

.about-personality h2 {
  margin-bottom: var(--space-6);
}

.card-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

.card--wide {
  max-width: 720px;
  width: 100%;
  text-align: left;
}

.card-stack .card h3 {
  color: var(--color-navy);
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  text-align: center;
}

.card-stack .card h3::after,
.card-stack .card .card__rule::after {
  content: "";
  display: block;
  width: 60%;
  margin: var(--space-2) auto 0;
  border-bottom: 2px solid var(--color-copper);
}

.card-stack .card .card__rule {
  display: block;
  margin-top: calc(-1 * var(--space-4));
  margin-bottom: var(--space-4);
}

.card-stack .card .card__rule::after {
  margin-top: 0;
}

.card-stack .card p {
  color: var(--color-navy-soft);
  opacity: 0.85;
}

.card-stack .card p + p {
  margin-top: var(--space-3);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.card-grid .card {
  min-height: 160px;
}

.card-grid .card h3 {
  min-height: 1.4em;
  color: var(--color-navy);
  margin-bottom: var(--space-2);
}

.card-grid .card p {
  color: var(--color-navy-soft);
  opacity: 0.85;
}

@media (max-width: 960px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 620px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Areas Served
   -------------------------------------------------------------------------- */

.areas-served {
  background: var(--color-white);
  padding-block: var(--space-8);
  text-align: center;
}

.areas-served h2 {
  margin-bottom: var(--space-6);
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  max-width: 720px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

/* --------------------------------------------------------------------------
   Book a Call (minimal landing page — no site nav, per Layout.md)
   -------------------------------------------------------------------------- */

.book-call {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--color-ivory);
  text-align: center;
  padding-block: var(--space-7);
}

.book-call__inner {
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.book-call__logo {
  display: inline-flex;
  margin-bottom: var(--space-6);
}

.book-call__logo img {
  height: 52px;
  width: auto;
}

.book-call p {
  color: var(--color-navy-soft);
  opacity: 0.85;
}

.book-call .btn {
  margin-top: var(--space-2);
}

.book-call__alt {
  margin-top: var(--space-6);
  font-size: 0.92rem;
}

/* Inline links on ivory background must not use copper at body-copy size
   (AGENTS.md: reserve copper for large text/buttons). */
.book-call__alt a {
  color: var(--color-navy);
  text-decoration: underline;
}

@media (max-width: 480px) {
  .book-call {
    padding-block: var(--space-6);
  }

  .book-call__logo {
    margin-bottom: var(--space-5);
  }
}

/* --------------------------------------------------------------------------
   Videos intro (lead-in above the video grid)
   -------------------------------------------------------------------------- */

.videos-intro {
  padding-block: var(--space-8) var(--space-6);
  text-align: center;
}

.videos-intro .container {
  max-width: 720px;
  margin-inline: auto;
}

.videos-intro p {
  color: var(--color-navy-soft);
  opacity: 0.85;
  margin-bottom: var(--space-6);
}

/* --------------------------------------------------------------------------
   404 / Page not found
   -------------------------------------------------------------------------- */

.not-found {
  min-height: 60vh;
  display: flex;
  align-items: center;
  padding-block: var(--space-8);
}

.not-found .container {
  max-width: 640px;
  text-align: center;
  margin-inline: auto;
}

.not-found p {
  color: var(--color-navy-soft);
  opacity: 0.85;
  margin-bottom: var(--space-6);
}

.not-found .hero__actions {
  justify-content: center;
}

@media (max-width: 520px) {
  .not-found .hero__actions {
    flex-direction: column;
  }
}