@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap');

:root{
  /* 60% neutrals */
  --bg:#0b1730;
  --surface:rgba(255,255,255,.04);
  --surface2:rgba(255,255,255,.06);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.72);
  --line:rgba(255,255,255,.10);

  /* 30% brand */
  --brand:#2b6fff;
  --brandText:#fff;

  /* 10% CTA */
  --cta:#f4c24a;
  --ctaText:#111;

  --radius:16px;
  --focusRing: 0 0 0 3px rgba(244,194,74,.18);

  --shadow: 0 10px 24px rgba(0,0,0,.28);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ scrollbar-gutter: stable; }
body{ overflow-y: scroll; }

body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 800px at 25% 0%, rgba(43,111,255,.10), rgba(11,23,48,0) 60%),
    radial-gradient(900px 600px at 85% 15%, rgba(244,194,74,.06), rgba(11,23,48,0) 55%),
    var(--bg);
  color:var(--text);
}

.container{
  width:min(1120px, calc(100% - 40px));
  margin:0 auto;
}

:focus-visible{
  outline:none;
  box-shadow: var(--focusRing);
  border-radius: 12px;
}

/* Header / Nav (persistent solid) */
header{
  position:sticky;
  top:0;
  z-index:30;
  backdrop-filter: blur(10px);
  background: rgba(11,23,48,.72);
  border-bottom:1px solid var(--line);
}

.navbar{
  min-height:102px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:8px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:200px;
}

.brandLink{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
}

/* Logo */
.brandLogo{
  width:78px;
  height:78px;
  object-fit:contain;
  display:block;
  transform: scale(1.98);
  transform-origin: left center;
}

.navCenter{
  flex:1;
  display:flex;
  justify-content:center;
  min-width:0;
}

.navRight{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:flex-end;
  min-width:320px;
}

.navToggle{
  display:none;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
}
.navToggle:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.14);
}

.navRail{
  position:relative;
  display:flex;
  align-items:center;
  column-gap:6px;
  padding:6px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  overflow:hidden;
}

.navLink{
  position:relative;
  z-index:2;
  text-decoration:none;
  color:var(--muted);
  padding:10px 14px;
  border-radius:999px;
  font-weight:800;
  font-size:14px;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.navText{ display:inline-block; line-height:1; }
.navLink:hover{ color:var(--text); }

.navLink.active{
  color: var(--text);
  font-weight: 900;
}
.navLink.active .navText{
  position: relative;
}
.navLink.active .navText::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-6px;
  height:2px;
  background: var(--cta);
  border-radius:2px;
}

.navIndicator{
  position:absolute;
  left:0;
  top:6px;
  bottom:6px;
  width:0;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
  transition: transform .18s ease, width .18s ease;
  z-index:1;
  will-change: transform, width;
}

.phoneLink,
.ctaAction{
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  padding:10px 14px;
  border-radius:999px;
  font-weight:900;
  font-size:14px;
  border:1px solid rgba(0,0,0,.10);
}

.phoneLink{
  color:var(--brandText);
  background: var(--brand);
  border-color: rgba(0,0,0,.08);
}
.phoneLink:hover{ filter: brightness(1.03); }

.ctaAction{
  background: var(--cta);
  color: var(--ctaText);
  border-color: rgba(0,0,0,.10);
}
.ctaAction:hover{ filter: brightness(1.03); }

.phoneIcon{ width:18px; height:18px; }

/* HERO */
.hero{
  position:relative;
  padding:112px 0 92px;
  min-height:60vh;
  overflow:hidden;
  display:flex;
  align-items:center;
  margin:0;
}

.heroSmall{
  padding:112px 0 92px;
  min-height:60vh;
}

.heroBg{
  position:absolute;
  inset:0;
  z-index:0;
  background-image: var(--hero);
  background-size: cover;
  background-position:center;
  transform: scale(1.04);
  filter: saturate(1.03) contrast(1.02);
}

.heroOverlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(900px 520px at 20% 25%, rgba(43,111,255,.18), rgba(11,23,48,0) 60%),
    linear-gradient(180deg, rgba(11,23,48,.55), rgba(11,23,48,.88)),
    linear-gradient(90deg, rgba(11,23,48,.78), rgba(11,23,48,.40) 55%, rgba(11,23,48,.18));
}

.heroInner{
  position:relative;
  z-index:2;
  max-width:900px;
}

.splitReveal{
  display:block;
  overflow:hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0px, #000 18px, #000 calc(100% - 18px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0px, #000 18px, #000 calc(100% - 18px), transparent 100%);
  padding:18px 0;
  margin:-18px 0;
}

.splitReveal .line{
  display:block;
  transform: translateY(18px);
  opacity:0;
  animation: lineIn .90s cubic-bezier(.2,.8,.2,1) forwards;
  will-change: transform, opacity;
}
.splitReveal .l1{ animation-delay:.10s; }
.splitReveal .l2{ animation-delay:.22s; }
.splitReveal .l3{ animation-delay:.34s; }

@keyframes lineIn{
  to{ transform:none; opacity:1; }
}

h1{
  margin:0 0 12px;
  font-size:50px;
  letter-spacing:-.9px;
  font-weight:950;
}

.lead{
  margin:0 0 18px;
  font-size:18px;
  color:rgba(255,255,255,.82);
  line-height:1.55;
  max-width: 780px;
  font-weight:650;
}

.heroActions{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top:18px;
}

.btnAction{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  padding:12px 16px;
  border-radius:14px;
  background: var(--cta);
  color: var(--ctaText);
  font-weight:900;
  border:1px solid rgba(0,0,0,.10);
}
.btnAction:hover{ filter:brightness(1.03); }

.btnBrand{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  padding:12px 16px;
  border-radius:14px;
  background: rgba(255,255,255,.06);
  color: var(--text);
  border:1px solid rgba(255,255,255,.12);
  font-weight:850;
}
.btnBrand:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.16);
}

.btnBrandPrimary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  padding:12px 16px;
  border-radius:14px;
  background: var(--brand);
  color: var(--brandText);
  font-weight:900;
  border:1px solid rgba(0,0,0,.10);
}
.btnBrandPrimary:hover{ filter:brightness(1.03); }

.small{ font-size:13px; color:rgba(255,255,255,.70); }

/* Typing headline (Home hero only) */
.typeHeadline{
  display:block;
  line-height:1.05;
}

.typeStatic{
  display:block;
}

.typeDynamic{
  display:inline-flex;
  align-items:baseline;
  gap:10px;
  margin-top:6px;
}

@media (min-width: 981px){

  .typeHeadline{
    display:flex;
    align-items:baseline;
    gap:14px;
  }

  .typeStatic{
    display:inline;
  }

  .typeDynamic{
    margin-top:0;
  }

}

.typeWord{
  color: var(--cta);
  font-weight: 950;
  letter-spacing: -0.6px;
}

.typeCaret{
  display:inline-block;
  width:10px;
  height:1.02em;
  transform: translateY(2px);
  background: rgba(255,255,255,.78);
  border-radius: 2px;
  animation: caretBlink .85s steps(1) infinite;
}

@keyframes caretBlink{
  50%{ opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .typeCaret{ animation:none; opacity:1; }
}

/* HERO 2 */
.featureHero{
  position:relative;
  margin:0;
  padding:84px 0;
  min-height:58vh;
  display:flex;
  align-items:center;
  border:0;
  overflow:hidden;
}

.bgSlider{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}

.bgPane{
  position:absolute;
  inset:0;
  background-size: cover;
  background-position:center;
  will-change: transform, opacity;
  filter: saturate(1.03) contrast(1.02);
  transform: translateX(100%);
  opacity: 0;
  transition: transform .72s cubic-bezier(.2,.8,.2,1), opacity .72s cubic-bezier(.2,.8,.2,1);
}

.bgPane.bgActive{
  transform: translateX(0);
  opacity: 1;
}

.bgPane.bgRight{
  transform: translateX(100%);
  opacity: 0;
}

.bgPane.bgExitLeft{
  transform: translateX(-18%);
  opacity: 0;
}

@media (prefers-reduced-motion: reduce){
  .bgPane{
    transition: none;
  }
}

.featureHero .heroOverlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(900px 520px at 15% 20%, rgba(43,111,255,.14), rgba(11,23,48,0) 60%),
    linear-gradient(180deg, rgba(11,23,48,.55), rgba(11,23,48,.86)),
    linear-gradient(90deg, rgba(11,23,48,.78), rgba(11,23,48,.44) 55%, rgba(11,23,48,.20));
}

.featureHero .heroInner{
  position:relative;
  z-index:2;
}

.featureHero h2{
  margin:0 0 12px;
  font-size:32px;
  letter-spacing:-.5px;
  font-weight:900;
}

.featureHero p{
  margin:0;
  max-width: 820px;
  color:rgba(255,255,255,.78);
  line-height:1.65;
  font-weight:650;
}
.featureHero p + p{ margin-top:12px; }

/* Sections / full-bleed */
.section{ padding:0; margin:0; }

.fullBleed{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

/* Wide tiles */
.aboutTilesWide{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:0;
  margin:0;
  border:0;
}

.aboutTileWide{
  position:relative;
  text-decoration:none;
  color:var(--text);
  min-height:280px;
  overflow:hidden;
  border-right:1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
  cursor:pointer;
  outline:none;
}
.aboutTileWide:last-child{ border-right:none; }

.aboutTileWideBg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transform: scale(1.03);
  filter:saturate(1.03) contrast(1.02);
  transition: transform .28s ease;
}

.aboutTileWideShade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(11,23,48,.18), rgba(11,23,48,.72)),
    radial-gradient(700px 260px at 22% 18%, rgba(43,111,255,.16), rgba(11,23,48,0) 60%);
  transition: opacity .22s ease;
  opacity: .95;
}

.aboutTileWideInner{
  position:relative;
  z-index:2;
  height:100%;
  padding:22px 22px 20px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:10px;
}

.aboutTileWideTitle{
  margin:0;
  font-size:28px;
  font-weight:950;
  letter-spacing:-.6px;
  text-transform:uppercase;
  line-height:1.05;
  text-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.aboutTileWideCta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  font-weight:900;
  color: rgba(255,255,255,.92);
  opacity:.90;
}
.aboutTileWideCta::after{ content:"→"; font-weight:900; transform: translateY(-.5px); }

.aboutTileWide:hover .aboutTileWideBg{ transform: scale(1.08); }
.aboutTileWide:hover .aboutTileWideShade{ opacity:.88; }
.aboutTileWide:hover .aboutTileWideCta{ opacity:1; }

.aboutTileWide:focus{ box-shadow: inset 0 0 0 3px rgba(244,194,74,.35); }
.aboutTileWide:focus-visible{ outline:none; }

/* Footer */
footer{
  border-top:1px solid var(--line);
  background: rgba(11,23,48,.72);
  backdrop-filter: blur(10px);
  padding:24px 0;
}

.footerRow{
  display:flex;
  gap:18px;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
}

footer a{ color:var(--text); text-decoration:none; }
footer a:hover{ text-decoration:underline; }

/* Responsive */
@media (max-width: 980px){
  h1{ font-size:42px; }
  .hero{ min-height:56vh; padding:102px 0 82px; }
  .heroSmall{ min-height:46vh; padding:86px 0 66px; }

  .navbar{ min-height:96px; padding:8px 0; }
  .brandLogo{ width:76px; height:76px; }

  .featureHero{ padding:72px 0; min-height:54vh; }

  .aboutTilesWide{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aboutTileWide{ min-height:250px; border-bottom:1px solid rgba(255,255,255,.06); }
  .aboutTileWide:nth-child(2){ border-right:none; }
  .aboutTileWide:nth-child(4){ border-right:none; }
  .aboutTileWideTitle{ font-size:24px; }
}

@media (max-width: 720px){

  /* Make the header fixed so it can slide away immediately */
  header{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    transform: translateY(0);
    transition: transform 0.18s ease;
  }

  /* When JS adds this class, the header slides off-screen */
  header.is-hidden{
    transform: translateY(-110%);
  }

  /* Prevent page content sitting under the fixed header */
  body{
    padding-top: 90px !important;
  }

  .navbar{
    min-height:90px;
    padding:8px 0;
    position: relative; /* Needed so logo can center properly */
  }

  /* Hide large buttons on mobile */
  .phoneLink,
  .ctaAction{ display:none; }

  /* Center logo (keeping your current offset) */
  .brand{
    position: absolute;
    left: 50%;
    transform: translateX(-140%);
    min-width: 0;
    justify-content: center;
  }

  .brandLogo{ width:72px; height:72px; }

  /* Hamburger button */
  .navToggle{
    display:inline-flex;
    width:44px;
    height:44px;
    padding:0;
    font-size:0; /* hides the word "Menu" */
    justify-content:center;
    align-items:center;
    position: relative;
  }

  /* Hamburger icon lines */
  .navToggle::before{
    content:"";
    width:20px;
    height:2px;
    background: var(--text);
    display:block;
    box-shadow:
      0 6px 0 var(--text),
      0 -6px 0 var(--text);
  }

  /* Keep dropdown behaviour */
.navRail{
  display:none;
  position: fixed;          /* use the viewport, not the header container */
  left: 0;
  right: 0;
  width: 100vw;             /* force full viewport width */
  margin: 0;
  top: calc(90px + 0px);    /* push it below the sticky bar */
  padding: 14px 16px;
  border-radius: 0;
  background: rgba(11,23,48,.96);
  z-index: 10000;           /* above header */

  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

  .navRail.open{ display:flex; }

  /* Mobile dropdown links: full-width rows (removes desktop “pill” feel) */
  .navRail .navLink{
    width: 100%;
    justify-content: flex-start;
    border-radius: 12px;
    padding: 12px 12px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
  }

  /* Remove the desktop nav indicator overlay on mobile */
  .navIndicator{
    display:none !important;
  }

  /* Clean active state on mobile */
  .navRail .navLink.active,
  .navRail .navLink[aria-current="page"]{
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.16);
  }

  .navCenter{ flex:0; }
  .navRight{ min-width:auto; }

  .hero{ min-height:52vh; padding:92px 0 76px; }
  .heroSmall{ min-height:52vh; padding:92px 0 76px; }

  /* ABOUT HERO (MOBILE ONLY): bigger + more breathing room
     (works because you added class="aboutHero" in about.html) */
  .hero.aboutHero{
    min-height: 52vh;
    padding: 92px 0 76px;
  }
  .hero.aboutHero .heroInner{
    padding-top: 14px;
  }

  /* --- MOBILE HERO SPACING FIXES --- */

  /* Give hero content a little extra top room (fixes About Us being tight) */
  .heroInner{
    padding-top: 14px;
  }

  /* If About Us still feels tight, give heroSmall slightly more */
  .hero.heroSmall .heroInner{
    padding-top: 18px;
  }

  /* Stop splitReveal from clipping/fading hero text on mobile */
  .hero .splitReveal,
  .videoHero .splitReveal,
  .featureHero .splitReveal,
  .contactHero .splitReveal{
    -webkit-mask-image: none;
    mask-image: none;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  /* Services page: create a small gap before the tiles section */
  .videoHero + .section{
    padding-top: 32px !important;
  }

  /* Optional: make "Get a Quote" buttons less chunky on mobile */
  .heroActions .btnAction{
    padding: 10px 14px;
    font-size: 13px;
  }

  /* Force service tiles vertical on mobile */
  .aboutTilesWide{
    grid-template-columns: 1fr !important;
  }

  /* About page only: slightly smaller Get a Quote button */
  .hero.aboutHero .heroActions .btnAction{
    padding: 8px 12px;
    font-size: 12.5px;
  }

}

@media (max-width: 520px){
  .aboutTilesWide{ grid-template-columns: 1fr !important; }
  .aboutTileWide{ border-right:none; }
}

/* ------------------------------------------------------------
   Solid band backgrounds (targeted) to eliminate visible colour
   shifts on gradient body backgrounds.
   Applies only to: Contact band + Service intro + tile flush area.
------------------------------------------------------------ */
.contactBand,
.serviceIntro,
.tilesFlush{
  background: #0b1730 !important;
  background-image: none !important;
}