/* ==========================================================================
   ROCKHILL — "PRESTIGE" DESIGN SYSTEM
   Clean, luxurious, modern — real photography, restrained gold accent,
   elegant serif display type, subtle 3D tilt on cards, parallax hero.
   ========================================================================== */

:root {
  --navy-950: #0B1220;
  --navy-900: #111A2E;
  --navy-800: #1B2740;
  --gold: #FF6E00;
  --gold-light: #FF6E00;
  --cream: #F7F5F0;
  --ink: #1A1A1A;
  --slate: #6B7280;
  --line: #E7E4DA;

  --font-display: 'Playfair Display', serif;
  --font-body: 'Manrope', sans-serif;

  --ease: cubic-bezier(.19,1,.22,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
}

a { text-decoration: none; color: inherit; }
::selection { background: var(--gold); color: #fff; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.font-display { font-family: var(--font-display); }
.gold { color: var(--gold); }

/* ==========================================================================
   HEADER
   ========================================================================== */
header.site-header {
  position: fixed; top: 0; inset-inline: 0; z-index: 50;
  display: flex; align-items: center; justify-content: flex-start;
  gap: 2.5rem;
  padding: 1.1rem 3rem;
  /* Always solid from page load — this used to start fully transparent
     and only gain a background once scrolled, which looked fine on inner
     pages (light section at the top) but made the dark nav text invisible
     on the home page (dark video hero sits directly behind it at the top).
     A header's readability shouldn't depend on what happens to be behind
     it on a given page, so it's simplest and most robust to just always
     be solid. */
  background: rgba(247,245,240,0.96);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line);
  transition: box-shadow .3s ease, padding .3s ease;
}
header.site-header.scrolled {
  box-shadow: 0 4px 16px -4px rgba(11,18,32,0.12);
  padding: 0.7rem 3rem;
}
header.site-header .logo-img { height: 46px; width: auto; transition: height .3s ease; flex-shrink: 0; }
header.site-header.scrolled .logo-img { height: 38px; }

/* Nav sits directly next to the Enquire button, both pushed to the right
   of the logo — previously `justify-content: space-between` treated the
   nav as its own group and centered it between logo and button instead
   of grouping it with the button as shown in the reference layout. */
.main-nav { display: flex; align-items: center; gap: 2.25rem; margin-left: auto; }
.main-nav a {
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--navy-950); position: relative; padding-bottom: 4px;
}
.main-nav a::after { content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--gold); transition:right .3s var(--ease); }
.main-nav a:hover::after, .main-nav a.active::after { right:0; }

.btn-gold {
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: var(--gold); color: #fff;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.85rem 1.6rem;
  transition: background .25s ease, transform .25s var(--ease);
}
.btn-gold:hover { background: var(--navy-950); transform: translateY(-2px); }

.btn-outline-light {
  display: inline-flex; align-items: center; gap: 0.55rem;
  border: 1.5px solid rgba(255,255,255,0.55); color: #fff;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.85rem 1.6rem;
  transition: background .25s ease, border-color .25s ease, transform .25s var(--ease);
}
.btn-outline-light:hover { background: #fff; color: var(--navy-950); border-color:#fff; transform: translateY(-2px); }

.btn-outline-dark {
  display: inline-flex; align-items: center; gap: 0.55rem;
  border: 1.5px solid var(--navy-950); color: var(--navy-950);
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.85rem 1.6rem;
  transition: background .25s ease, color .25s ease, transform .25s var(--ease);
}
.btn-outline-dark:hover { background: var(--navy-950); color: #fff; transform: translateY(-2px); }

.nav-toggle { display: none; background: none; border: none; color: var(--navy-950); margin-left: auto; }
.dropdown:hover .dropdown-panel, .dropdown:focus-within .dropdown-panel { display: block !important; }
@media (max-width: 900px) {
  .main-nav, header.site-header .btn-outline-light.desktop-only { display: none; }
  .nav-toggle { display: block; }
}

/* ==========================================================================
   HERO — Ken Burns slow zoom + parallax + reveal
   ========================================================================== */
.hero {
  position: relative; height: 100vh; min-height: 640px;
  display: flex; align-items: center;
  overflow: hidden;
  color: #fff;
}
.hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-media img, .hero-media video {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(11,18,32,0.88) 0%, rgba(11,18,32,0.55) 42%, rgba(11,18,32,0.25) 68%, rgba(11,18,32,0.35) 100%);
}
.hero-content { position: relative; z-index: 2; max-width: 1400px; margin: 0 auto; padding: 0 3rem; width: 100%; }
.hero-eyebrow { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-light); }
.hero h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.5rem, 5.5vw, 4.5rem); line-height: 1.08; margin: 1rem 0 0; max-width: 760px; }
.hero-rule { width: 64px; height: 3px; background: var(--gold); margin: 1.75rem 0; }
.hero p.lede { max-width: 560px; font-size: 1.05rem; line-height: 1.75; color: rgba(255,255,255,0.85); }
.hero-ctas { display: flex; gap: 1rem; margin-top: 2.25rem; flex-wrap: wrap; }

@media (prefers-reduced-motion: no-preference) {
  .hero-reveal > * { opacity: 0; transform: translateY(24px); animation: heroUp .9s var(--ease) forwards; }
  .hero-reveal > *:nth-child(1) { animation-delay: .1s; }
  .hero-reveal > *:nth-child(2) { animation-delay: .25s; }
  .hero-reveal > *:nth-child(3) { animation-delay: .4s; }
  .hero-reveal > *:nth-child(4) { animation-delay: .55s; }
  .hero-reveal > *:nth-child(5) { animation-delay: .7s; }
  @keyframes heroUp { to { opacity: 1; transform: none; } }
}

/* ==========================================================================
   STATS BAR
   ========================================================================== */
.stats-bar { background: var(--navy-950); color: #fff; padding: 2.75rem 3rem; }
.stats-grid { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(5,1fr); gap: 1.5rem; }
.stat-item { display: flex; align-items: center; gap: 0.9rem; border-left: 1px solid rgba(255,255,255,0.12); padding-left: 1.25rem; }
.stat-item:first-child { border-left: none; padding-left: 0; }
.stat-icon { width: 30px; height: 30px; color: var(--gold); flex-shrink: 0; }
.stat-num { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; color: var(--gold-light); line-height: 1; }
.stat-label { font-size: 0.72rem; color: rgba(255,255,255,0.65); letter-spacing: 0.04em; line-height: 1.3; margin-top: 0.2rem; }
@media (max-width: 1100px) { .stats-grid { grid-template-columns: repeat(2,1fr); } .stat-item { border-left:none; padding-left:0; } }

/* ==========================================================================
   CARDS — plain hover lift (no JS-driven 3D rotation)
   ========================================================================== */
.tilt-card { perspective: 1200px; }
.tilt-inner {
  position: relative;
  transform-style: preserve-3d;
  transition: transform .35s ease, box-shadow .35s ease;
  will-change: transform;
}
.tilt-card:hover .tilt-inner {
  box-shadow: 0 30px 55px -22px rgba(11,18,32,0.35);
}
/* rotateX/rotateY are set inline by JS per-card based on cursor position;
   this just defines the resting/hover shadow + the transition curve. */
.tilt-sheen {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,0.18) 0%, transparent 40%);
  opacity: 0; transition: opacity .3s ease;
}
.tilt-card:hover .tilt-sheen { opacity: 1; }

/* ==========================================================================
   3D ENTRANCE REVEAL — one-time flip-in as cards/sections scroll into view.
   Plain CSS transition + IntersectionObserver (native browser API, no
   library). Fires once per element, then stays put — not a continuous
   scroll-scrub, so it carries none of the performance cost that GSAP
   ScrollTrigger scrubbing did.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .reveal-3d {
    opacity: 0;
    transform: perspective(1200px) rotateX(18deg) translateY(36px);
    transform-origin: bottom center;
    transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1);
  }
  .reveal-3d.in-view {
    opacity: 1;
    transform: perspective(1200px) rotateX(0deg) translateY(0);
  }
  /* stagger children within a revealed group */
  .reveal-3d-group > *:nth-child(1) { transition-delay: 0ms; }
  .reveal-3d-group > *:nth-child(2) { transition-delay: 70ms; }
  .reveal-3d-group > *:nth-child(3) { transition-delay: 140ms; }
  .reveal-3d-group > *:nth-child(4) { transition-delay: 210ms; }
  .reveal-3d-group > *:nth-child(5) { transition-delay: 280ms; }
  .reveal-3d-group > *:nth-child(6) { transition-delay: 350ms; }
  .reveal-3d-group > *:nth-child(7) { transition-delay: 420ms; }
  .reveal-3d-group > *:nth-child(8) { transition-delay: 490ms; }
}

/* ==========================================================================
   SERVICE CARDS
   ========================================================================== */
.service-card img { width: 100%; height: 260px; object-fit: cover; display: block; transition: transform .5s ease; }
.tilt-card:hover .service-card img { transform: scale(1.04); }
.service-card { background: #fff; overflow: hidden; }
.service-icon {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--cream); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  margin: -27px auto 0; position: relative; z-index: 2;
  color: var(--gold);
}
.service-label { text-align: center; font-weight: 700; font-size: 1.25rem; letter-spacing: 0.02em; color: var(--navy-950); }

/* ==========================================================================
   PROJECTS (dark section + carousel)
   ========================================================================== */
.projects-dark { background: var(--navy-950); color: #fff; padding: 6rem 0; }
.carousel-track {
  display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0.5rem 3rem 1rem; scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.project-card { scroll-snap-align: start; flex: 0 0 320px; }
.project-card img { width: 100%; height: 400px; object-fit: cover; display: block; }
.project-card .tilt-inner { position: relative; overflow: hidden; }
.project-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.8) 35%, rgba(0,0,0,0.35) 65%, transparent 90%); display:flex; flex-direction:column; justify-content:flex-end; padding: 1.25rem; }
.project-overlay .ptag { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-light); }
.project-overlay .ptitle { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; margin-top: 0.3rem; color: var(--line); text-shadow: 0 2px 8px rgba(0,0,0,0.5); }
.project-overlay .pmeta { font-size: 0.78rem; color: rgba(255,255,255,0.75); margin-top: 0.4rem; }

.carousel-btn {
  width: 40px; height: 40px; border: 1px solid var(--gold);
  display: flex; align-items: center; justify-content: center; color: var(--gold);
  transition: background .2s ease, border-color .2s ease;
  flex-shrink: 0;
}
@media (hover: hover) {
  .carousel-btn:hover { background: var(--gold); border-color: var(--gold); color: #E7E4DA;}
}
.carousel-btn-group { display: flex; gap: 0.75rem; flex-shrink: 0; }

.projects-container { padding: 0 3rem; }
#projects .projects-controls { flex-wrap: nowrap !important; }
@media (max-width: 900px) {
  .projects-container { padding: 0 1.25rem; }
}
@media (max-width: 480px) {
  .projects-container { padding: 0 1rem; }
  #projects .projects-controls { gap: 0.6rem !important; }
  #projects .projects-view-all { font-size: 0.68rem !important; gap: 0.35rem !important; white-space: nowrap; }
  #projects .carousel-btn { width: 34px; height: 34px; }
}

/* ==========================================================================
   TRUSTED-BY — slow continuous auto-scroll (re-added on request; content
   below is duplicated once so the loop is seamless — a single set would
   visibly jump/reset when it reached the end).
   ========================================================================== */
.marquee-wrap { background: var(--cream); padding: 2.25rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; position: relative; }
.marquee-track2 {
  display: flex; gap: 3.5rem; align-items: center;
  width: max-content;
  animation: marqueeScroll 32s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .marquee-track2 { animation: none; } }
@keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-wrap:hover .marquee-track2 { animation-play-state: paused; }
.marquee-item2 { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: var(--slate); white-space: nowrap; opacity: 0.7; flex-shrink: 0; }

/* Label layered on top of the scrolling strip — the brands flow past
   underneath/behind it. A fade from solid cream to transparent lets the
   label stay legible without a hard visual seam. */
.marquee-label-layer {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  display: flex; align-items: center;
  background: linear-gradient(to right, var(--cream) 55%, var(--cream) 65%, transparent 100%);
}
.marquee-label-layer p {
  padding-left: 3rem; padding-right: 2rem;
}
@media (max-width: 640px) {
  .marquee-label-layer { background: linear-gradient(to right, var(--cream) 70%, transparent 100%); }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer.site-footer { background: var(--navy-950); color: rgba(255,255,255,0.75); padding: 0; }
.footer-inner { max-width: 1400px; margin: 0 auto; padding: 5rem 3rem 2rem; position: relative; z-index: 2; }
/* Real CSS Grid with real breakpoints this time — not an inline style,
   so it actually collapses on mobile/tablet without needing !important
   overrides. */
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.2fr 1.2fr;
  gap: 2.5rem;
}
/* Vertical dividers between columns — desktop only. They're deliberately
   left off below 1100px: once the grid collapses to 2 or 1 columns, a
   left-border reads as a stray vertical line next to wrapped content
   rather than a column separator, so it's tied to the same breakpoint
   where the multi-column layout itself holds. */
@media (min-width: 1101px) {
  .footer-grid > div { padding-left: 2rem; border-left: 1px solid rgba(255,255,255,0.12); }
  .footer-grid > div:first-child { padding-left: 0; border-left: none; }
}
@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; }
}
.footer-heading { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; margin-bottom: 1.25rem; }
.footer-link { display: block; font-size: 0.9rem; padding: 0.35rem 0; color: rgba(255,255,255,0.7); transition: color .2s ease; }
.footer-link:hover { color: var(--gold-light); }
.social-icon { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; transition: background .2s ease, border-color .2s ease; }
.social-icon:hover { background: var(--gold); border-color: var(--gold); }

.field-mini { width: 100%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18); color: #fff; padding: 0.75rem 0.9rem; font-family: var(--font-body); font-size: 0.9rem; margin-bottom: 0.75rem; }
.field-mini::placeholder { color: rgba(255,255,255,0.4); }
.field-mini:focus { outline: none; border-color: var(--gold); }

/* ==========================================================================
   FOOTER BACKGROUND GLOW — subtle gold-tinted radial gradient behind the
   footer content (adapted from the source component's blue glow to match
   this site's navy/gold palette instead).
   ========================================================================== */
.footer-bg-glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(125% 125% at 50% 0%, rgba(201,162,39,0.10) 0%, transparent 55%);
}

/* ==========================================================================
   HOVER TEXT EFFECT — big "ROCKHILL" showpiece at the base of the footer.
   A mouse-tracked radial-gradient mask reveals a jewel-tone gradient
   through the letterforms, only where the cursor is. Converted from the
   original React/Framer-Motion component to plain SVG + vanilla JS — SVG
   masks/gradients are native browser features; only the smooth mouse-
   tracking motion needed reimplementing (see main.js).
   ========================================================================== */
.text-hover-wrap {
  position: relative; z-index: 2;
  height: 22rem;
  display: none;
}
@media (min-width: 768px) { .text-hover-wrap { display: flex; } }
.text-hover-svg { width: 100%; height: 100%; cursor: pointer; user-select: none; text-transform: uppercase; }

.thv-outline {
  fill: transparent; stroke: rgba(255,255,255,0.12); stroke-width: 0.3;
  font-family: var(--font-display); font-weight: 700; font-size: 46px;
  transition: opacity .3s ease;
}
.text-hover-svg.hovered .thv-outline { opacity: 0.6; }

.thv-draw {
  fill: transparent; stroke: var(--gold); stroke-width: 0.3;
  font-family: var(--font-display); font-weight: 700; font-size: 46px;
  stroke-dasharray: 1000; stroke-dashoffset: 1000;
  /* No animation here by default — it only starts once JS adds .in-view
     to the wrapper (IntersectionObserver, footer scrolled into view).
     Previously this played on page load, so by the time anyone actually
     scrolled down to the footer the draw had long since finished and
     they only ever saw the static end state. */
}
.text-hover-wrap.in-view .thv-draw { animation: thvDraw 4s ease-in-out forwards; }
@keyframes thvDraw { to { stroke-dashoffset: 0; } }

.thv-gradient-text {
  fill: transparent; stroke: url(#footerTextGradient); stroke-width: 0.3;
  font-family: var(--font-display); font-weight: 700; font-size: 46px;
  mask: url(#footerTextMask);
  opacity: 0; transition: opacity .25s ease;
}
.text-hover-svg.hovered .thv-gradient-text { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .thv-draw { animation: none !important; stroke-dashoffset: 0; }
}

/* ==========================================================================
   LIQUID NAV HOVER (replaces the simple underline sweep with a fill wipe)
   ========================================================================== */
.main-nav a { overflow: hidden; position: relative; z-index: 1; }
.main-nav a::before {
  content: ""; position: absolute; left: -6%; right: -6%; bottom: -4px; top: auto;
  height: 2px; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
  z-index: -1;
}
.main-nav a:hover::before, .main-nav a.active::before { transform: scaleX(1); }
.main-nav a::after { display: none; } /* superseded by ::before liquid fill above */

/* ==========================================================================
   MOBILE NAV
   ========================================================================== */
.mobile-nav { position: fixed; inset: 0; z-index: 60; background: var(--navy-950); display: none; }
.mobile-nav.open { display: block; }
.mobile-nav-close {
  position: absolute; top: 1.25rem; right: 1.25rem; z-index: 61;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid rgba(255,255,255,0.3); color: #fff;
  transition: background .2s ease, border-color .2s ease;
}
@media (hover: hover) {
  .mobile-nav-close:hover { background: var(--gold); border-color: var(--gold); }
}

/* ==========================================================================
   RESPONSIVE FIX (sitewide)

   Root cause: most section layouts on this site were written as inline
   `style="display:grid; grid-template-columns:..."` (footer's 5 columns,
   About's photo+text and HSE rows, Contact's 2-column layout, Division
   pages' content+sidebar layout, etc). Inline styles carry higher
   specificity than an external stylesheet's selectors, so a normal
   `@media` rule targeting a class name can't override them — the grids
   stayed multi-column on every screen size, including phones. That is
   the actual reason the site read as "not responsive at all": it's the
   FOOTER alone (present on all 21 pages) plus About/Contact/Division
   layouts, not a cosmetic detail.

   Fix: use attribute selectors to catch any element with an inline
   grid-template-columns declaration and collapse it to one column below
   768px, with !important — the only way to beat inline-style specificity
   from a stylesheet. This is intentionally broad so it also covers any
   inline grid pattern not explicitly audited below.
   ========================================================================== */
@media (max-width: 768px) {
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Safety net: any inline flex row wraps instead of squeezing/overflowing */
  [style*="display:flex"] {
    flex-wrap: wrap !important;
  }

  /* Reduce edge padding on the common `padding: Xrem 3rem ...` sections so
     text isn't pinned against the very edge of a phone screen. Longhand
     properties here CAN override a shorthand `padding` set inline, because
     !important on a specific longhand beats a non-important shorthand. */
  main section, main > div, .site-header, .footer-inner {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  /* Prevent any residual overflow from fixed-width children (project
     card carousels are meant to scroll horizontally and are excluded). */
  body { overflow-x: hidden; }

  /* Hero heading/type scales down further than clamp() alone allows on
     very narrow phones, and hero CTA row stacks instead of crowding. */
  .hero h1 { font-size: clamp(2.1rem, 11vw, 3rem); }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas a { justify-content: center; }

  /* Division sidebar (Engagement Models card) no longer needs sticky
     positioning once it's stacked full-width below the content on mobile. */
  [style*="position:sticky"] { position: static !important; }
}

@media (max-width: 480px) {
  main section, main > div, .site-header, .footer-inner {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}