/* Ensure injected nav/footer containers don't break dark theme */
#nav-mount { position:relative; z-index:100; }
/* =================================================================
   images.css  —  ALL VISUAL / IMAGE STYLES
   Parallax heroes, split panels, gallery, overlap cards,
   service photo cards, quote banners — every page uses this.

   HOW TO SWAP SAMPLE IMAGES FOR YOUR OWN
   ─────────────────────────────────────────
   Each image has a comment: <!-- REPLACE → img/filename.jpg -->
   Create  img/  folder next to index.html, add your photos,
   then change the Unsplash URL to  img/your-file.jpg
================================================================= */

/* ── HERO ─────────────────────────────────────────────────────── */
.hero {
  position:relative; min-height:100vh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:8rem 1.5rem 5rem; text-align:center; overflow:hidden;
}
.hero-bg {
  position:absolute; inset:0; z-index:0;
  /* REPLACE → url('img/hero-airport.jpg') */
  background-image:url('https://images.unsplash.com/photo-1569629743817-70d8db6c323b?w=1800&q=82');
  background-size:cover; background-position:center 40%;
  transform:scale(1.08); will-change:transform;
}
.hero-bg::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(165deg,rgba(5,7,12,.88) 0%,rgba(5,7,12,.62) 50%,rgba(5,7,12,.85) 100%);
}
.hero > *:not(.hero-bg) { position:relative; z-index:1; }
.hero .eyebrow         { color:#4682B4; }
.hero .eline           { background:#4682B4; }
.hero .hero-h1         { color:#EDF2F7; }
.hero .hero-h1 .hi     { color:#5A9FD4; }
.hero .hero-sub        { color:rgba(237,242,247,.88); font-size:1rem; font-weight:500; letter-spacing:.22em; text-shadow:0 1px 8px rgba(5,7,12,.7); }
.hero .hero-desc       { color:rgba(237,242,247,.96); font-size:1.13rem; font-weight:400; line-height:1.82; max-width:620px; margin-left:auto; margin-right:auto; text-shadow:0 1px 6px rgba(5,7,12,.6); }
.hero .scroll-cue span { color:rgba(237,242,247,.26); }
.hero .scroll-cue-line { background:linear-gradient(to bottom,#4682B4,transparent); }
/* ghost button variant for dark hero */
.btn-ghost-light {
  color:#EDF2F7; background:transparent;
  border:1px solid rgba(237,242,247,.32);
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font-family:var(--fb); font-size:.78rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  padding:.86rem 1.85rem; border-radius:var(--r);
  cursor:pointer; white-space:nowrap; text-decoration:none;
  transition:background .24s, border-color .24s;
}
.btn-ghost-light:hover { background:rgba(237,242,247,.10); border-color:rgba(237,242,247,.65); }

/* ── PAGE HERO — inner pages ─────────────────────────────────── */
.page-hero-img {
  position:relative; z-index:1;
  padding:10.5rem 1.5rem 5.5rem; text-align:center; overflow:hidden;
  border-bottom:1px solid rgba(70,130,180,.22);
}
.ph-bg { position:absolute; inset:0; background-size:cover; background-position:center; }
.ph-bg::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(5,7,12,.86) 0%,rgba(5,7,12,.60) 100%);
}
.page-hero-img > *:not(.ph-bg) { position:relative; z-index:1; }
.page-hero-img h1 {
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(2.8rem,7.5vw,6rem); line-height:.9; letter-spacing:.04em;
  color:#EDF2F7; margin-bottom:.65rem;
  animation:up .8s .22s ease both; opacity:0;
}
.page-hero-img h1 .hi { color:#5A9FD4; }
.page-hero-img p {
  font-size:1.12rem; font-weight:400; color:rgba(237,242,247,.90);
  max-width:560px; margin:0 auto; line-height:1.78;
  animation:up .8s .36s ease both; opacity:0;
}
.page-hero-img .breadcrumb {
  display:flex; align-items:center; gap:.42rem; justify-content:center;
  flex-wrap:wrap; font-size:.74rem; color:rgba(237,242,247,.26);
  margin-bottom:1.1rem; animation:up .7s .1s ease both; opacity:0;
}
.page-hero-img .breadcrumb a      { color:rgba(237,242,247,.52); transition:color .24s; }
.page-hero-img .breadcrumb a:hover { color:#5A9FD4; }
.page-hero-img .breadcrumb .sep   { color:rgba(237,242,247,.20); }

/* ── TRUST MARQUEE ───────────────────────────────────────────── */
.trust-strip {
  position:relative; z-index:1; background:var(--dark2); overflow:hidden;
  border-top:1px solid var(--ac-line); border-bottom:1px solid var(--ac-line);
  padding:1.5rem 0;
}
.trust-track { display:flex; gap:3rem; width:max-content; animation:marquee 34s linear infinite; }
.trust-track:hover { animation-play-state:paused; }
.trust-item { font-family:'Bebas Neue',sans-serif; font-size:1rem; letter-spacing:.14em; color:var(--muted); white-space:nowrap; transition:color .24s; }
.trust-item:hover { color:var(--ac); }
.trust-dot  { color:rgba(70,130,180,.38); }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── SERVICE PHOTO CARDS ─────────────────────────────────────── */
.svc-card {
  position:relative; overflow:hidden; border-radius:var(--r);
  min-height:340px; display:flex; flex-direction:column; justify-content:flex-end;
  text-decoration:none; cursor:pointer;
}
.svc-card img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transition:transform .7s ease;
}
.svc-card:hover img { transform:scale(1.07); }
.svc-card::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(5,7,12,.96) 0%,rgba(5,7,12,.44) 55%,rgba(5,7,12,.08) 100%);
  transition:background .4s ease;
}
.svc-card:hover::after {
  background:linear-gradient(to top,rgba(5,7,12,.98) 0%,rgba(5,7,12,.58) 60%,rgba(5,7,12,.14) 100%);
}
.svc-body { position:relative; z-index:1; padding:1.8rem; transform:translateY(5px); transition:transform .4s ease; }
.svc-card:hover .svc-body { transform:none; }
.svc-tag  { display:inline-block; font-size:.62rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:#5A9FD4; background:rgba(70,130,180,.22); border:1px solid rgba(70,130,180,.45); padding:.16rem .56rem; border-radius:4px; margin-bottom:.62rem; }
.svc-name { font-family:'Bebas Neue',sans-serif; font-size:1.6rem; color:#EDF2F7; letter-spacing:.06em; margin-bottom:.35rem; line-height:1; }
.svc-blurb{ font-size:.83rem; font-weight:300; color:rgba(237,242,247,.62); line-height:1.65; max-height:0; overflow:hidden; margin-bottom:0; transition:max-height .4s ease,margin .4s ease; }
.svc-card:hover .svc-blurb { max-height:90px; margin-bottom:.8rem; }
.svc-more { display:inline-flex; align-items:center; gap:6px; font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#5A9FD4; transition:gap .22s ease; }
.svc-card:hover .svc-more { gap:11px; }

/* ── PARALLAX BANNER ─────────────────────────────────────────── */
.par-strip { position:relative; height:520px; overflow:hidden; }
.par-bg {
  position:absolute; inset:-30% 0;
  background-size:cover; background-position:center; background-attachment:fixed;
}
.par-bg::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(140deg,rgba(5,7,12,.86) 0%,rgba(70,130,180,.26) 100%);
}
.par-content {
  position:relative; z-index:1; height:100%;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; text-align:center; padding:2rem 1.5rem; color:#EDF2F7;
}

/* ── IMAGE + TEXT SPLIT ──────────────────────────────────────── */
.img-split { display:grid; grid-template-columns:1fr 1fr; min-height:560px; }
.img-split.rev { direction:rtl; }
.img-split.rev > * { direction:ltr; }
.img-pane { position:relative; overflow:hidden; min-height:420px; }
.img-pane img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transition:transform .75s ease;
}
.img-pane:hover img { transform:scale(1.05); }
.img-pane::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(70,130,180,.18),transparent); pointer-events:none;
}
.txt-pane    { display:flex; flex-direction:column; justify-content:center; padding:4.5rem 3.5rem; background:var(--dark); }
.txt-pane.lt { background:var(--card-bg); }

/* ── GALLERY MOSAIC ──────────────────────────────────────────── */
.gallery {
  display:grid;
  grid-template-columns:2.4fr 1fr 1fr;
  grid-template-rows:295px 295px;
  gap:6px;
}
.gallery .g-tall { grid-row:1/3; }
.g-cell { position:relative; overflow:hidden; border-radius:4px; cursor:pointer; }
.g-cell img { width:100%; height:100%; object-fit:cover; transition:transform .55s ease; display:block; }
.g-cell:hover img { transform:scale(1.07); }
.g-shade { position:absolute; inset:0; background:linear-gradient(to top,rgba(5,7,12,.78) 0%,transparent 55%); opacity:0; transition:opacity .35s ease; }
.g-cell:hover .g-shade { opacity:1; }
.g-cap { position:absolute; bottom:1rem; left:1.1rem; z-index:2; font-size:.67rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:#EDF2F7; opacity:0; transform:translateY(5px); transition:opacity .3s ease,transform .3s ease; }
.g-cell:hover .g-cap { opacity:1; transform:none; }

/* ── OVERLAP SCROLL CARD ─────────────────────────────────────── */
.ol-wrap { position:relative; }
.ol-img  { width:100%; height:480px; object-fit:cover; display:block; }
.ol-fade { position:absolute; bottom:0; left:0; right:0; height:56%; background:linear-gradient(to bottom,transparent,var(--dark)); pointer-events:none; }
.ol-card { position:relative; z-index:2; max-width:1020px; margin:-100px auto 0; padding:0 1.5rem; }
.ol-inner {
  background:var(--card-bg); border:1px solid rgba(70,130,180,.28);
  border-radius:12px; padding:3rem;
  box-shadow:0 28px 72px rgba(70,130,180,.20);
  display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem; text-align:center;
}
.ol-inner > div + div { border-left:1px solid rgba(70,130,180,.16); }
.ol-num  { font-family:'Bebas Neue',sans-serif; font-size:3.2rem; color:var(--ac); line-height:1; margin-bottom:.25rem; }
.ol-lbl  { font-size:.7rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-bottom:.5rem; }
.ol-desc { font-size:.85rem; font-weight:300; color:var(--cream-dim); line-height:1.65; }

/* ── QUOTE PARALLAX ──────────────────────────────────────────── */
.quote-wrap { position:relative; overflow:hidden; padding:8rem 1.5rem; }
.quote-bg {
  position:absolute; inset:-30% 0;
  /* REPLACE → url('../img/quote-bg.jpg') */
  background-image:url('https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1600&q=75');
  background-size:cover; background-position:center; background-attachment:fixed;
}
.quote-bg::after { content:''; position:absolute; inset:0; background:rgba(5,7,12,.91); }
.quote-body { position:relative; z-index:1; max-width:760px; margin:0 auto; text-align:center; }
.q-mark { font-family:Georgia,serif; font-size:7rem; line-height:.4; color:#4682B4; opacity:.42; }
.q-text { font-size:clamp(1.05rem,2.1vw,1.45rem); font-weight:300; color:#EDF2F7; line-height:1.78; margin:1.6rem 0 1.8rem; font-style:italic; }
.q-attr { font-size:.78rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:#4682B4; }

/* ── ABOUT 3-PHOTO COLLAGE ───────────────────────────────────── */
.about-photos {
  display:grid;
  grid-template-columns:1.3fr 1fr;
  grid-template-rows:260px 260px;
  gap:1rem;
}
.about-photos .ap-main { grid-row:1/3; border-radius:var(--r); overflow:hidden; }
.about-photos .ap-sm   { border-radius:var(--r); overflow:hidden; }
.about-photos img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
.about-photos .ap-main:hover img,
.about-photos .ap-sm:hover img { transform:scale(1.04); }

/* ── PORTFOLIO CARD THUMBNAIL ────────────────────────────────── */
.port-thumb { position:relative; height:210px; overflow:hidden; }
.port-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
.port-card:hover .port-thumb img { transform:scale(1.06); }
.port-thumb::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom,transparent 40%,rgba(5,7,12,.55) 100%); pointer-events:none;
}
.port-thumb-label {
  position:absolute; bottom:.85rem; left:.85rem; z-index:1;
  font-size:.65rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ac); background:var(--card-bg);
  border:1px solid var(--ac-line); padding:.2rem .55rem; border-radius:4px;
}

/* ── PROJECT DETAIL IMAGES ───────────────────────────────────── */
.proj-hero  { width:100%; height:440px; object-fit:cover; display:block; border-radius:var(--r); margin-bottom:3rem; box-shadow:0 8px 36px rgba(70,130,180,.18); }
.proj-strip { width:100%; height:260px; object-fit:cover; display:block; border-radius:var(--r); margin:2.5rem 0; box-shadow:0 4px 20px rgba(70,130,180,.12); }

/* ── CONTACT LAYOUT ──────────────────────────────────────────── */
.contact-grid { display:grid; grid-template-columns:1fr 360px; gap:3rem; align-items:start; }
.cform-2col   { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media(max-width:900px){
  .img-split,.img-split.rev{ grid-template-columns:1fr; direction:ltr; }
  .img-pane{ min-height:300px; }
  .gallery{ grid-template-columns:1fr 1fr; grid-template-rows:repeat(3,215px); }
  .gallery .g-tall{ grid-row:auto; }
  .ol-inner{ grid-template-columns:1fr; gap:1.5rem; }
  .ol-inner > div+div{ border-left:none; border-top:1px solid rgba(70,130,180,.16); }
  .about-photos{ grid-template-columns:1fr; grid-template-rows:280px 180px 180px; }
  .about-photos .ap-main{ grid-row:auto; }
  .contact-grid{ grid-template-columns:1fr; }
}
@media(max-width:640px){
  .hero{ padding:6.5rem 1rem 4rem; }
  .hero-btns{ flex-direction:column; width:100%; }
  .hero-btns .btn,.btn-ghost-light{ width:100%; justify-content:center; }
  .page-hero-img{ padding:7.5rem 1rem 3.5rem; }
  .par-strip{ height:360px; }
  .txt-pane{ padding:3rem 1.4rem; }
  .gallery{ grid-template-columns:1fr; grid-template-rows:repeat(5,200px); }
  .ol-img{ height:320px; }
  .ol-card{ margin-top:-50px; }
  .ol-inner{ padding:2rem 1.4rem; }
  .quote-wrap{ padding:5rem 1.2rem; }
  .svc-card{ min-height:280px; }
  .proj-hero{ height:240px; margin-bottom:2rem; }
  .proj-strip{ height:180px; margin:1.5rem 0; }
  .cform-2col{ grid-template-columns:1fr !important; }
  .about-photos{ grid-template-rows:230px 160px 160px; gap:.75rem; }
}