/* =============================================================
   layout.css — Page sections, grids, containers
   Mobile-first base; responsive.css adds desktop breakpoints.
   ============================================================= */

/* Page content sits below the fixed nav */
main {
  padding-top: var(--nav-height);
}

/* ---------- Generic container ---------- */

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
  width: 100%;
}

/* ---------- Section vertical spacing ---------- */

.section {
  padding: var(--space-12) 0;
}

.section--lg {
  padding: var(--space-16) 0;
}

/* =============================================================
   HERO — home page
   ============================================================= */

.hero {
  position: relative;
  min-height: 620px;
  background-color: var(--color-navy-deep);
  /* Photo lives on .hero__bg below so it can be transformed independently
     (Ken Burns animation) without affecting the gradient or stripes. */
  color: var(--color-white);
  overflow: hidden;
  padding: var(--space-16) 0 var(--space-12);
  /* Editorial bottom accent — thin orange band dividing hero from next section */
  border-bottom: 3px solid var(--color-orange);
}

/* Animated background photo. Slow Ken Burns: gentle zoom + pan that reverses
   smoothly via `alternate` (never a jarring restart). transform-only for GPU
   acceleration — no layout thrash. */
.hero__bg {
  position: absolute;
  inset: 0;
  background-image: url('../assets/images/hero-jacksonville.jpg');
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  z-index: 0;
  transform-origin: center;
  will-change: transform, filter;
  /* CSS custom properties let the media query adjust intensity without
     redefining the @keyframes block (which is global). */
  --kb-scale: 1.08;
  --kb-x: -2%;
  --kb-y: -1%;
  --kb-duration: 20s;
  animation:
    ken-burns var(--kb-duration) ease-in-out infinite alternate,
    hero-breathe 8s ease-in-out infinite;
}

@keyframes ken-burns {
  from {
    transform: scale(1) translate(0, 0);
  }
  to {
    transform: scale(var(--kb-scale)) translate(var(--kb-x), var(--kb-y));
  }
}

/* Subtle "breathing" brightness — makes the city lights feel gently alive. */
@keyframes hero-breathe {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.04); }
}

/* Mobile: gentler animation so it isn't distracting on small screens */
@media (max-width: 859px) {
  .hero__bg {
    --kb-scale: 1.05;
    --kb-x: -1%;
    --kb-y: 0%;
    --kb-duration: 25s;
  }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .hero__bg {
    animation: none;
  }
}

/* Gradient overlay over the photo — dark on left for text legibility,
   fading to translucent on the right where the skyline is visible. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(13, 43, 69, 0.92) 0%,
    rgba(13, 43, 69, 0.85) 30%,
    rgba(13, 43, 69, 0.5) 60%,
    rgba(13, 43, 69, 0.2) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* Warm-light overlay — radial gradient of soft orange positioned over the
   skyline (upper-right area where building lights are). mix-blend-mode:overlay
   enriches bright highlights (lit windows, signage) without affecting darks,
   so the city lights feel warmer while sky/water/bridge stay cool. */
.hero__warmth {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 55% 40% at 68% 38%,
    rgba(255, 168, 90, 0.85) 0%,
    rgba(255, 168, 90, 0.45) 40%,
    rgba(255, 168, 90, 0) 75%
  );
  mix-blend-mode: overlay;
  z-index: 0;
  pointer-events: none;
}

/* Subtle film-grain texture on the photo for editorial depth.
   SVG fractal-noise inlined as data URL; mix-blend-mode keeps it organic. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 300px 300px;
  opacity: 0.18;
  mix-blend-mode: overlay;
  z-index: 1;
  pointer-events: none;
}

/* Right-edge decorative diagonal stripes — two equal-width parallel bands at
   45° leaning from upper-right to lower-left. Touching (no gap) so they read
   as a two-color ribbon. Matches the client template. */
/* Solid navy triangle in the BOTTOM-RIGHT corner. The triangle's hypotenuse
   follows the same ~60°-from-horizontal diagonal as the stripes — the orange
   stripe sits flush against the triangle's left edge in the final composition.
   Stripes render on top (later in HTML at same z-index) so they appear to cut
   cleanly into the triangle. */
.hero__corner {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 220px;
  height: 380px;         /* tuned so hypotenuse matches stripe angle (~60° from horizontal) */
  background: var(--color-navy-dark);   /* darker navy so it reads distinctly against the photo */
  z-index: 2;
  pointer-events: none;
  /* Right triangle: right angle at bottom-right, hypotenuse from top-right to bottom-left */
  clip-path: polygon(100% 100%, 100% 0, 0 100%);
}

.hero__stripe {
  position: absolute;
  top: -10%;
  bottom: -10%;
  width: 30px;
  z-index: 2;
  pointer-events: none;
  transform: skewX(-30deg);   /* ~60° from horizontal (more vertical-leaning) */
  transform-origin: center;
}

.hero__stripe--ice {
  right: 30px;           /* sits LEFT of the orange stripe (touching) */
  background: var(--color-ice-blue);
}

.hero__stripe--orange {
  right: 0;              /* flush with the right edge */
  background: var(--color-orange);
}

.hero__container {
  position: relative;
  z-index: 2;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.hero__content {
  max-width: 620px;
  position: relative;
}

/* Editorial "tab" indicator — small orange bar above the headline */
.hero__content::before {
  content: '';
  display: block;
  width: 64px;
  height: 4px;
  background: var(--color-orange);
  margin-bottom: var(--space-6);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  animation: hero-tab-in 600ms ease-out 80ms forwards;
}

.hero h1 {
  margin-bottom: var(--space-6);
}

.hero__line {
  display: block;
}

/* Typographic hierarchy in the headline: line 1 white, lines 2 & 3 in ice-blue.
   Matches the client's template — supporting statement reads as the brand
   "tagline" while the lead line remains the primary statement. */
.hero__line:nth-child(2),
.hero__line:nth-child(3) {
  color: var(--color-ice-blue);
}

/* Orange accent on punctuation — branded detail */
.hero__accent {
  color: var(--color-orange);
}

/* Staggered cinematic reveal on hero load.
   Each element fades + rises with cascading delays. */
.hero__line,
.hero__subhead,
.hero__buttons {
  opacity: 0;
  transform: translateY(24px);
  animation: hero-rise 700ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

.hero__line:nth-child(1) { animation-delay: 200ms; }
.hero__line:nth-child(2) { animation-delay: 340ms; }
.hero__line:nth-child(3) { animation-delay: 480ms; }
.hero__subhead          { animation-delay: 720ms; }
.hero__buttons          { animation-delay: 900ms; }

@keyframes hero-rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-tab-in {
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

/* Respect reduced-motion — show everything immediately */
@media (prefers-reduced-motion: reduce) {
  .hero__content::before,
  .hero__line,
  .hero__subhead,
  .hero__buttons {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

.hero__subhead {
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--color-ice-blue);
  margin-bottom: var(--space-8);
  max-width: 560px;
}

.hero__buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: stretch;
}

/* =============================================================
   PAGE HERO (smaller, used on inner pages)
   ============================================================= */

.page-hero {
  background: var(--color-navy-deep);
  color: var(--color-white);
  padding: var(--space-12) 0;
  position: relative;
  overflow: hidden;
}

.page-hero::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 200px;
  background: var(--color-orange);
  opacity: 0.4;
  clip-path: polygon(60% 0, 100% 0, 100% 100%, 90% 100%);
  pointer-events: none;
}

.page-hero__container {
  position: relative;
  z-index: 2;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.page-hero h1 {
  position: relative;
  font-size: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: var(--space-3);
  text-transform: uppercase;
  letter-spacing: 0;
  padding-top: 24px;
}

/* Editorial tab indicator above page hero headings — same language as main hero */
.page-hero h1::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 64px;
  height: 4px;
  background: var(--color-orange);
}

.page-hero__subhead {
  font-size: 1.125rem;
  color: var(--color-ice-blue);
  max-width: 560px;
}

/* =============================================================
   SERVICES STRIP
   ============================================================= */

.services {
  position: relative;
  background: var(--color-navy-deep);
  padding: var(--space-16) 0;
  overflow: hidden;
}

/* Subtle blueprint-style line grid texture for editorial depth. */
.services::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(167, 212, 231, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167, 212, 231, 0.06) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: -1px -1px;
  pointer-events: none;
  z-index: 0;
}

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

.services__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.services__header {
  margin-bottom: var(--space-12);
  max-width: 720px;
}

.services__header h2 {
  color: var(--color-white);
}

.services__header p {
  color: var(--color-text-on-dark);
  margin-top: var(--space-3);
  font-size: 1.05rem;
}

.services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

/* =============================================================
   COVERAGE SECTION
   ============================================================= */

.coverage {
  position: relative;
  background: var(--color-off-white);
  padding: var(--space-16) 0;
  overflow: hidden;
}

/* Editorial blueprint-grid texture — gives cartographic feel to a coverage map section.
   Very subtle navy lines on the off-white background. */
.coverage::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(13, 43, 69, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 43, 69, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: -1px -1px;
  pointer-events: none;
  z-index: 0;
}

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

.coverage__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}

.coverage__text h2 {
  margin-bottom: var(--space-4);
}

.coverage__lead {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-gray-600);
  margin-bottom: var(--space-8);
  max-width: 480px;
}

.coverage__map {
  /* Sits directly on the white section background — no card, no border, no padding.
     Grid layout: SVG fills the flexible column, label sizes to fit its text. */
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
}

.coverage__map svg {
  display: block;
  width: 100%;
  height: auto;
  /* +21% scale (10% compounded twice) — renders larger while staying centered */
  transform: scale(1.21);
  transform-origin: center;
}

.coverage__map__pin-label {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.95rem;
  /* Default color is navy ("and beyond." line); the accent span overrides to orange */
  color: var(--color-navy-deep);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.35;
  white-space: nowrap;
}

.coverage__map__pin-label span {
  display: block;
}

.coverage__map__pin-label--accent {
  color: var(--color-orange);
}

/* On very narrow screens, stack the label below the map so the text doesn't crush */
@media (max-width: 559px) {
  .coverage__map {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}

.coverage__map svg {
  width: 100%;
  height: 100%;
}

/* =============================================================
   ABOUT MINI SECTION
   ============================================================= */

.about {
  position: relative;
  background: var(--color-off-white);
  padding: var(--space-20) 0;
  overflow: hidden;
}

/* Subtle blueprint grid for atmospheric depth (same family as services/coverage) */
.about::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(13, 43, 69, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 43, 69, 0.03) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: -1px -1px;
  pointer-events: none;
  z-index: 0;
}

/* Oversized decorative index "01" — editorial signature. Sits behind content,
   anchored to the right edge of the section, very low opacity orange. */
.about__index {
  position: absolute;
  top: 50%;
  right: var(--space-12);
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(8rem, 18vw, 16rem);
  line-height: 1;
  color: var(--color-orange);
  opacity: 0.07;
  letter-spacing: -0.04em;
  pointer-events: none;
  z-index: 0;
}

.about__container {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  text-align: left;
}

/* Two-column split at desktop — heading left, body right (editorial magazine layout) */
@media (min-width: 860px) {
  .about__container {
    grid-template-columns: 1fr 1.3fr;
    gap: var(--space-16);
    align-items: start;
  }
}

.about__heading h2 {
  margin: 0;
}

.about__body p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-gray-600);
  margin-bottom: var(--space-4);
}

.about__body p:last-child {
  margin-bottom: 0;
}

/* =============================================================
   CONTACT PAGE LAYOUT
   ============================================================= */

.contact-section {
  position: relative;
  padding: var(--space-16) 0;
  background: var(--color-off-white);
  overflow: hidden;
}

/* Blueprint grid texture — matches services/coverage/about for atmospheric depth */
.contact-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(13, 43, 69, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 43, 69, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: -1px -1px;
  pointer-events: none;
  z-index: 0;
}

.contact-section__container {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

.contact-section__form-wrap {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-gray-100);
}

/* =============================================================
   GENERIC TEXT-PAGE LAYOUT (Careers, Privacy, Terms)
   ============================================================= */

.text-page {
  position: relative;
  padding: var(--space-16) 0;
  background: var(--color-white);
  overflow: hidden;
}

/* Blueprint grid texture for editorial atmospheric depth */
.text-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(13, 43, 69, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 43, 69, 0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: -1px -1px;
  pointer-events: none;
  z-index: 0;
}

.text-page__container {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.text-page h2 {
  margin: var(--space-12) 0 var(--space-4);
  font-size: 1.5rem;
  color: var(--color-navy-deep);
}

.text-page h2:first-child {
  margin-top: 0;
}

.text-page h3 {
  margin: var(--space-8) 0 var(--space-3);
  font-size: 1.15rem;
  color: var(--color-navy-deep);
  text-transform: none;
  letter-spacing: 0;
}

.text-page p {
  margin-bottom: var(--space-4);
  font-size: 1rem;
  line-height: 1.7;
}

.text-page ul {
  margin: var(--space-4) 0;
  padding-left: var(--space-6);
}

.text-page ul li {
  list-style: disc;
  margin-bottom: var(--space-2);
  line-height: 1.7;
}

.text-page__updated {
  font-size: 0.875rem;
  color: var(--color-gray-400);
  margin-bottom: var(--space-8);
  font-style: italic;
}

.text-page__cta {
  margin: var(--space-6) 0;
}