/* ===========================================================
   T&O Development Group LLC — landing page styles
   Base resets, typography, interactive states, responsive rules.
   Static layout/appearance lives inline in index.html (faithful
   to the source design); this file carries everything that an
   inline style attribute cannot express: :hover, :focus,
   keyframes, and breakpoint behavior.
   =========================================================== */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #FAFAF8;
  color: #161617;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; }
::selection { background: #D90A0F; color: #fff; }
::-moz-selection { background: #D90A0F; color: #fff; }
input, textarea, button { font-family: inherit; }

/* Hero Ken Burns drift on the background video */
@keyframes heroKen {
  from { transform: scale(1.04); }
  to   { transform: scale(1.13); }
}

/* -----------------------------------------------------------
   Scroll-driven hero: pinned section, cross-fading headline,
   and phase-row highlight. Progress (0->1) is computed in JS;
   these rules define the visual states it toggles.
   ----------------------------------------------------------- */

/* The four headlines stack and cross-fade; only .is-active shows */
#hero-headlines { position: relative; min-height: clamp(6rem, 15vw, 12rem); }
.hero-headline {
  position: absolute;
  top: 0; left: 0; right: 0;
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-variation-settings: 'opsz' 144;
  font-size: clamp(3rem, 7vw, 5.8rem);
  line-height: 1.02;
  letter-spacing: -.018em;
  color: #FAFAF8;
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
  will-change: opacity;
}
.hero-headline.is-active { opacity: 1; pointer-events: auto; }
.hero-headline .em { font-style: italic; color: #D90A0F; }

/* Hero copy column: vertically centered, but anchored below the fixed
   header so it can never collide with the navbar on short/wide viewports.
   `safe center` falls back to top-alignment instead of overflowing upward. */
.hero-row {
  align-items: safe center;
  padding-top: clamp(104px, 13vh, 152px);
  padding-bottom: clamp(28px, 7vh, 64px);
}

/* Phase row: active phase full strength, the rest dimmed */
.phase-item { opacity: .5; transition: opacity .4s ease; }
.phase-item.is-active { opacity: 1; }

/* Hero canvas frame-sequence; the poster background is the pre-load paint */
#hero-canvas { background-position: center; }

/* Premium hero -> content transition (no gradient band).
   The hero stays a clean 100vh with a little dark breathing room below the
   phase row; the white section then rises over the dark like an elevated
   editorial panel: a small negative-margin overlap, softly rounded top
   corners, and a subtle lifted shadow. Only seen after the fold. */
#hero { padding-bottom: clamp(48px, 6vh, 90px); }

.section-rise {
  position: relative;
  z-index: 1;
  margin-top: clamp(-40px, -3.2vh, -24px);
  border-top-left-radius: clamp(14px, 1.8vw, 24px);
  border-top-right-radius: clamp(14px, 1.8vw, 24px);
  box-shadow: 0 -22px 48px -28px rgba(8, 8, 9, .5);
}

/* Shrink the breathing room + overlap on short viewports, so the hero copy
   still fits and the overlap never reaches the phase row. */
@media (max-height: 760px) {
  #hero { padding-bottom: clamp(28px, 4vh, 52px); }
  .section-rise { margin-top: clamp(-30px, -2.4vh, -18px); }
}
@media (max-height: 540px) {
  #hero { padding-bottom: clamp(16px, 3vh, 30px); }
  .section-rise {
    margin-top: clamp(-18px, -2vh, -12px);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
  }
}

/* Stronger overlay on small screens so the headline stays legible
   over the brightest part of the video */
@media (max-width: 680px) {
  .hero-overlay-mobile { opacity: 1 !important; }
  /* The house sits on the right of the frame; on a narrow viewport a
     center crop hides it, so bias the poster toward the house (the canvas
     itself crops toward the house in JS via focusX). */
  #hero-canvas { background-position: 72% center; }
  /* Tighten the phase row so the stacked copy + phases fit a short screen */
  .phase-item { padding-top: 15px !important; padding-bottom: 15px !important; }
  /* Top-anchor the copy with a clear gap below the navbar, instead of
     vertical centering that crowded the eyebrow against the header. */
  .hero-row {
    align-items: flex-start;
    min-height: 0;
    padding-top: clamp(128px, 18vh, 164px);
  }
}

/* Short viewports of any width (short laptops/desktops, ultrawide, and
   landscape phones): top-anchor the copy so it can never overflow upward
   under the navbar, and scale it down so it fits within 100vh. */
@media (max-height: 760px) {
  .hero-row {
    /* Center when the copy fits (uses the space, keeps the eyebrow off the
       navbar); `safe` falls back to top-alignment only when it's truly tight. */
    align-items: safe center;
    min-height: 0;
    padding-top: clamp(96px, 13vh, 132px);
    padding-bottom: clamp(14px, 3vh, 32px);
  }
  .hero-headline { font-size: clamp(2rem, 5.2vh, 4.2rem); }
  #hero-headlines { min-height: 0; }
}

/* Landscape phones / very short: shrink the header and copy further so the
   eyebrow and headline always stay on screen. */
@media (max-height: 540px) {
  #site-header { padding-top: 12px !important; padding-bottom: 12px !important; }
  #site-logo { height: 34px !important; }
  .hero-row { padding-top: clamp(64px, 15vh, 88px); }
  .hero-headline { font-size: clamp(1.7rem, 6.8vh, 2.6rem); }
  .hero-content p { font-size: 14px !important; line-height: 1.5 !important; margin-bottom: 22px !important; }
  .phase-item { padding-top: 9px !important; padding-bottom: 9px !important; }
}

/* Smooth in-page jumps as a baseline; JS handles the header offset */
html { scroll-behavior: smooth; }

/* Keep anchored sections clear of the fixed header */
section[id] { scroll-margin-top: 72px; }

/* Respect users who prefer less motion: calm the video drift + smooth scroll */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #hero video { animation: none !important; }
}

/* -----------------------------------------------------------
   Interactive states (ported from the prototype's
   style-hover / style-focus attributes)
   ----------------------------------------------------------- */

/* Any link that punctuates to signal red on hover */
.link-red { transition: color .25s ease; }
.link-red:hover { color: #D90A0F; }

/* Active nav link (set by the scroll-spy) — subtle red underline */
#site-nav a.is-active { color: #D90A0F; }
#site-nav a.link-red.is-active::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 4px;
  background: #D90A0F;
}

/* Keyboard focus: a visible, on-brand ring (mouse clicks stay clean) */
a:focus-visible,
button:focus-visible,
.field:focus-visible {
  outline: 2px solid #D90A0F;
  outline-offset: 3px;
  border-radius: 2px;
}

/* Header "Get in touch" button */
.btn-cta:hover {
  background: #B00207;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(217, 10, 15, .32);
}

/* Mobile overlay menu links */
.m-link { transition: color .25s ease; }
.m-link:hover { color: #D90A0F; }

/* Hero primary CTA */
.btn-hero:hover {
  background: #B00207;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(217, 10, 15, .36);
}

/* Hero secondary / ghost CTA */
.btn-ghost:hover {
  border-color: #FAFAF8;
  background: rgba(250, 250, 248, .07);
  transform: translateY(-2px);
}

/* Approach capability rows */
.cap-row:hover {
  background: #FAFAF8;
  padding-left: 24px;
}

/* Project tiles — reveal overlay + caption on hover (and keyboard focus) */
.tile:hover [data-ov],
.tile:focus-visible [data-ov] { opacity: 1; }
.tile:hover [data-cap],
.tile:focus-visible [data-cap] { opacity: 1; transform: none; }

/* Form fields */
.field:focus {
  border-color: #D90A0F;
  background: #fff;
}

/* Contact form submit button */
.btn-submit:hover {
  background: #B00207;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(217, 10, 15, .34);
}

/* -----------------------------------------------------------
   Header navigation responsiveness
   Desktop nav + hamburger swap at 880px.
   ----------------------------------------------------------- */
#site-nav   { display: flex; }
#nav-toggle { display: none; }

@media (max-width: 879px) {
  #site-nav   { display: none; }
  #nav-toggle { display: flex; }
}

/* -----------------------------------------------------------
   Hero phase row: 4 columns -> 2x2 -> stacked,
   with consistent dividers at every breakpoint
   (replicates the prototype's applyPhaseLayout logic).
   ----------------------------------------------------------- */
#phase-grid { grid-template-columns: repeat(4, 1fr); }

@media (min-width: 860px) {
  #phase-grid > div:not(:nth-child(4n + 1)) {
    border-left: 1px solid rgba(250, 250, 248, .14);
  }
}

@media (min-width: 540px) and (max-width: 859px) {
  #phase-grid { grid-template-columns: repeat(2, 1fr); }
  #phase-grid > div:not(:nth-child(2n + 1)) {
    border-left: 1px solid rgba(250, 250, 248, .14);
  }
  #phase-grid > div:nth-child(n + 3) {
    border-top: 1px solid rgba(250, 250, 248, .14);
  }
}

@media (max-width: 539px) {
  #phase-grid { grid-template-columns: 1fr; }
  #phase-grid > div:not(:first-child) {
    border-top: 1px solid rgba(250, 250, 248, .14);
  }
}