/* ══════════════════════════════════════════════════════════
   GUJRAL HILLS — Exact match to live gujralhills.in
   Fonts:  Century Gothic (headings), Futura/Trebuchet (body)
   Colors extracted from live Elementor CSS:
     #1B0904  dark primary
     #956834  gold accent
     #FFE9BC  warm cream
     #201818  dark section bg (travel)
     #1C0B05  darkest section bg (modern comfort)
     #343434  body text
     #F5F5F5  light gray bg
══════════════════════════════════════════════════════════ */

/* ── Century Gothic web font (from live site) ── */
@font-face {
  font-family: 'Century Gothic';
  src: url('../fonts/gothic.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Century Gothic';
  src: url('../fonts/century-gothic-bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

:root {
  --dark:    #1B0904;
  --dark2:   #201818;
  --dark3:   #1C0B05;
  --gold:    #956834;
  --cream:   #FFE9BC;
  --white:   #FFFFFF;
  --gray:    #F5F5F5;
  --text:    #343434;
  --font-headings: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
  --font-base:     Futura, 'Trebuchet MS', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  font-family: var(--font-base);
  color: var(--text);
  background: var(--white);
  line-height: 1.7;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headings);
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

.section-container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.section-heading {
  font-family: var(--font-headings);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 300;
  line-height: 1.2;
  margin-bottom: 24px;
}
.section-heading.gold  { color: var(--gold); }
.section-heading.white { color: var(--white); }
.section-heading.dark  { color: var(--dark); }
.section-heading.center { text-align: center; }

.btn-primary {
  display: inline-block;
  padding: 14px 36px;
  background: var(--gold);
  color: var(--white);
  font-family: var(--font-headings);
  font-weight: 600;
  font-size: 15px;
  border-radius: 4px;
  transition: background 0.2s, transform 0.2s;
}
.btn-primary:hover { background: #7a5228; transform: translateY(-2px); }

.btn-explore {
  display: inline-block;
  border-radius: 999px;   /* pill */
  padding: 14px 44px;
  background: var(--gold);
  color: var(--white);
  font-family: var(--font-headings);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.04em;
  transition: background 0.2s;
}
.btn-explore:hover { background: #7a5228; }
/* Hero buttons sit over the glowing ridge on some screen sizes — a solid fill
   plus a soft dark halo keeps them readable against glow, mountain or white. */
.hero-content .btn-explore,
.hero-content .btn-map {
  box-shadow: 0 6px 22px rgba(10,4,2,0.45), 0 0 0 1px rgba(255,255,255,0.10) inset;
}
.btn-map {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 14px 26px;
  border-radius: 999px;   /* pill */
  background: #14532B;
  border: 1.5px solid rgba(94,207,126,0.75);
  color: #EAFBEF;
  font-family: var(--font-headings);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}
.btn-map:hover { background: #1B6E39; color: #FFFFFF; }

/* ══════════════ NAVBAR ══════════════ */
#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: transparent;
  padding: 0 40px;
  box-shadow: none;
  transition: background 0.4s ease, box-shadow 0.4s ease;
}
#navbar.scrolled {
  background: var(--dark);
  box-shadow: 0 2px 20px rgba(0,0,0,0.45);
}
.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 110px;    /* tall at top — holds the large logo */
  max-width: 1400px;
  margin: 0 auto;
  transition: height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
#navbar.scrolled .nav-container {
  height: 70px;
}
/* Logo: large golden glow at top, shrinks on scroll */
.nav-logo {
  height: 90px;
  width: auto;
  transition: height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              filter  0.45s ease;
  filter: drop-shadow(0 0 22px rgba(149,104,52,0.55));
}
#navbar.scrolled .nav-logo {
  height: 50px;
  filter: drop-shadow(0 0 0px rgba(149,104,52,0));
}

/* ── Inner-page navbar: 3-column centered logo ── */
.inner-header .nav-container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  height: 120px;
  column-gap: 60px; /* breathing room between logo and nav columns */
}
.inner-header .nav-links {
  justify-self: start;
  gap: 20px; /* tighter than the default 36px */
}
.inner-header .nav-right {
  justify-self: end;
}
.inner-header .nav-logo {
  height: 100px;
  filter: drop-shadow(0 0 28px rgba(149,104,52,0.70));
}
.inner-header.scrolled .nav-container {
  height: 70px;
}
.inner-header.scrolled .nav-logo {
  height: 50px;
  filter: drop-shadow(0 0 0px rgba(149,104,52,0));
}

/* ── Homepage: navbar logo hidden until hero logo merges in ── */
.homepage-nav .nav-logo {
  opacity: 0;
  transition: opacity 0.4s ease,
              height  0.45s cubic-bezier(0.4, 0, 0.2, 1),
              filter  0.45s ease;
}
.homepage-nav.scrolled .nav-logo {
  opacity: 1;
}

/* ── Hero center logo ── */
.hero-logo-center {
  display: block;
  pointer-events: none;
  will-change: transform, opacity;
  margin-bottom: 18px;
}
.hero-logo-center img {
  height: 250px;
  width: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 0 60px rgba(149,104,52,0.95))
          drop-shadow(0 0 28px rgba(149,104,52,0.65));
}

.nav-links {
  display: flex;
  gap: 36px;
  align-items: center;
}
.nav-links a {
  color: var(--white);
  font-family: var(--font-headings);
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.06em;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--gold); }

/* Plot Map — stands out as a live-availability CTA */
.nav-links a.nav-map-link {
  color: #5ecf7e;
  font-weight: 500;
}
.nav-links a.nav-map-link:hover { color: #34C759; }

.nav-right {
  display: flex;
  align-items: center;
  gap: 20px;
}
.nav-phone {
  color: rgba(255,255,255,0.75);
  font-size: 13px;
  transition: color 0.2s;
}
.nav-phone:hover { color: var(--gold); }

.nav-manage-btn {
  padding: 8px 20px;
  background: var(--gold);
  color: var(--white);
  font-family: var(--font-headings);
  font-size: 13px;
  font-weight: 600;
  border-radius: 4px;
  transition: background 0.2s;
}
.nav-manage-btn:hover { background: #7a5228; }

.hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--white);
  font-size: 22px;
  cursor: pointer;
}

/* ══════════════ HERO ══════════════ */
.hero-section {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh; /* dynamic viewport height — accounts for mobile browser chrome */
  display: flex;
  align-items: center;
  justify-content: center;
  /* section-bg-1.png already fades to fully transparent below the glowing
     ridge, so whatever sits behind it becomes the colour under the mountains.
     Dark for the sky, then white from ~72% down, so the ridge reads as a cut-out
     silhouette sitting on the white About section below. */
  background:
    /* Lifted 5vh so the picture's transparent tail always ends above the
       section edge — the last strip of the hero is pure white on every screen
       size, so nothing can bleed into the About section. */
    url('../images/section-bg-1.png') center -5vh / cover no-repeat,
    linear-gradient(to bottom,
      var(--dark) 0%,
      var(--dark) 66%,
      #FFFFFF     76%,
      #FFFFFF     100%);
  overflow: hidden;
  padding-top: 110px;  /* clear the large navbar */
  /* Keeps the title, tagline and buttons inside the dark upper zone now that
     the lower quarter of the hero is white. */
  padding-bottom: 30vh;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  /* Fades out before the white zone so it darkens only the sky, never the
     white that the About section continues. */
  background: linear-gradient(to bottom,
    rgba(27,9,4,0.45) 0%,
    rgba(27,9,4,0.45) 46%,
    rgba(27,9,4,0.16) 62%,
    rgba(27,9,4,0)    72%);
  z-index: 1;
}
/* Safety net for short, wide windows where the picture gets cropped before its
   transparent tail: a shallow white fade over the last tenth of the hero only.
   On normal screens this sits over white already, so it changes nothing. */
.hero-section::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 10vh;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.65) 55%,
    #FFFFFF 100%);
}
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--white);
  /* No bottom padding: the section's own padding-bottom keeps the copy clear
     of the white zone, and this stops the hero growing past one screen. */
  padding: 40px 40px 0;
}
/* ── Glow animation (exact copy from live site) ── */
.glow {
  animation: glow 10s ease-in-out alternate forwards;
  color: #fff;
  text-transform: uppercase;
}
@keyframes glow {
  from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #f29432a1, 0 0 40px #f29432a1; }
  to   { text-shadow: 0 0 10px #f29432a1, 0 0 30px #f29432a1; }
}
@-webkit-keyframes glow {
  from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #f29432a1, 0 0 40px #f29432a1; }
  to   { text-shadow: 0 0 10px #f29432a1, 0 0 30px #f29432a1; }
}

.hero-title {
  font-family: var(--font-headings);
  font-size: clamp(60px, 9vw, 110px);
  font-weight: 300;
  line-height: 1.05;
  margin-bottom: 20px;
  letter-spacing: 0.18em;
}
.hero-tagline {
  font-family: var(--font-base);
  font-size: clamp(14px, 2vw, 22px);
  font-weight: 400;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  margin-bottom: 22px;
}
.hero-subtitle {
  font-family: 'Roboto', sans-serif;
  font-size: clamp(14px, 2vw, 18px);
  font-weight: 300;
  color: rgba(255,255,255,0.80);
  margin-bottom: 36px;
}



/* ══════════════ ABOUT ══════════════ */
.about-section {
  padding: 80px 0;
  background: var(--white);
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.about-text p {
  color: var(--text);
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 30px;
}
.about-video-wrap {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}
.about-video-wrap img,
.about-video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* ══════════════ YOUTUBE SECTION ══════════════ */
.yt-section {
  padding: 60px 0;
  background: var(--gray);
  background-image: linear-gradient(rgba(255,233,188,0.45), rgba(255,233,188,0.45));
}
.yt-embed-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  border-radius: 8px;
}
.yt-embed-wrap iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
}
.yt-cta {
  text-align: center;
  margin-top: 32px;
}

/* ══════════════ TRAVEL DISTANCE ══════════════ */
.travel-section {
  padding: 80px 0;
  background: #ffffff;    /* white — matches map image background */
  text-align: center;
  position: relative;
}
.travel-section::before { display: none; }   /* no dark overlay on white bg */
.travel-section .section-container { position: relative; z-index: 1; }

/* Override text colors for white background */
.travel-section .section-heading { color: var(--dark); }
.travel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 48px;
}
.travel-card { padding: 40px 20px; }
.counter {
  font-family: var(--font-headings);
  font-size: 72px;
  font-weight: 300;
  color: var(--gold);
  line-height: 1;
}
.counter-suffix {
  font-size: 18px;
  color: var(--dark);
  margin: 4px 0 12px;
}
.counter-label {
  font-family: var(--font-headings);
  font-size: 16px;
  font-weight: 300;
  color: #666;
}
.travel-map-wrap {
  margin-top: 48px;
  /* full-bleed: escape the section-container and span the full viewport */
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}
.map-anim-container {
  position: relative;
  display: block;
  width: 100%;
  max-width: none;
  border-radius: 0;
  overflow: hidden;
  line-height: 0;
  box-shadow: none;
}
.map-anim-container a { display: block; }
.travel-map-img {
  width: 100%;
  display: block;
  border-radius: 0;
  transition: opacity 0.2s;
}
.map-anim-container:hover .travel-map-img { opacity: 0.92; }


/* ══════════════ WHY CHOOSE ══════════════ */
.why-section {
  padding: 80px 0;
  background: var(--white);
  background-image: linear-gradient(rgba(255,233,188,1), rgba(255,233,188,1));
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 48px;
}
.feature-card {
  background: var(--white);
  border-radius: 8px;
  padding: 36px 28px;
  text-align: center;
  border: 1px solid rgba(149,104,52,0.15);
  transition: box-shadow 0.2s, transform 0.2s;
}
.feature-card:hover {
  box-shadow: 0 8px 32px rgba(27,9,4,0.12);
  transform: translateY(-4px);
}
.feature-card img {
  height: 56px;
  width: auto;
  margin: 0 auto 20px;
  object-fit: contain;
}
.feature-card h3 {
  font-family: var(--font-headings);
  font-size: 16px;
  font-weight: 300;
  color: var(--dark);
  margin-bottom: 12px;
  line-height: 1.3;
}
.feature-card p { font-size: 14px; color: #555; line-height: 1.7; }

/* ══════════════ MODERN COMFORT ══════════════ */
.comfort-section {
  position: relative;
  padding: 100px 0;
  background: var(--dark3) url('../images/about-bg.jpg') center center / cover no-repeat;
}
.comfort-overlay {
  position: absolute;
  inset: 0;
  background: rgba(28,11,5,0.95);
}
.comfort-content {
  position: relative;
  z-index: 3;
}
.comfort-section::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 150px;
  /* Soft light veil — merges dark section into content below without a colour band */
  background: linear-gradient(to bottom, transparent 0%, rgba(255,240,200,0.16) 55%, rgba(255,240,200,0.38) 100%);
  z-index: 2;
  pointer-events: none;
}
.comfort-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 60px;
  align-items: center;
}
.comfort-text .section-heading {
  font-size: clamp(22px, 3vw, 32px);
  margin-bottom: 20px;
}
.comfort-desc {
  color: rgba(255,255,255,0.80);
  font-size: 15px;
  line-height: 1.8;
}
.comfort-cta {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ══════════════ FOOTER ══════════════ */
.footer {
  position: relative;
  overflow: hidden;
  background: transparent;
  padding-top: 60px;
}
/* Flipped wall-bg.png background via a real div — more reliable than ::before + scaleY */
.footer-bg {
  position: absolute;
  inset: 0;
  /* 100% 100% stretches image to fill footer exactly — guarantees all zones visible:
     gray at visual top, golden sky in middle, dark mountains at visual bottom */
  background: url('../images/wall-bg.png') top center / 100% 100% no-repeat;
  transform: scaleY(-1);
  transform-origin: center center;
  z-index: 0;
  pointer-events: none;
}
/* Lift all footer children above the background image */
.footer > *:not(.footer-bg) { position: relative; z-index: 1; }
.footer-main-grid {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1fr;
  gap: 48px;
  padding-bottom: 80px; /* with 100% 100% bg-size, mountains always anchor at footer bottom — reduced padding */
}

/* Perfect Choice column */
.footer-pc-heading {
  font-family: var(--font-headings);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 300;
  color: var(--gold);
  margin-bottom: 16px;
  line-height: 1.2;
}
.footer-pc-text {
  color: rgba(27,9,4,0.80);
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 24px;
}

/* Social icons */
.social-row {
  display: flex;
  gap: 12px;
  align-items: center;
}
.social-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  transition: opacity 0.2s, transform 0.2s;
}
.social-btn:hover { opacity: 0.85; transform: translateY(-2px); }
.social-btn.fb  { background: #1877f2; }
.social-btn.ig  { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.social-btn.yt  { background: #ff0000; }

/* Contact column */
.footer-col-title {
  font-family: var(--font-headings);
  font-size: 18px;
  font-weight: 300;
  color: var(--dark);
  margin-bottom: 20px;
  letter-spacing: 0.02em;
}
.contact-block { margin-bottom: 18px; }
.contact-block h4 {
  font-family: var(--font-headings);
  font-size: 12px;
  font-weight: 300;
  color: var(--gold);
  margin-bottom: 4px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.contact-block p { color: rgba(27,9,4,0.80); font-size: 13px; line-height: 1.7; }
.contact-block a { color: rgba(27,9,4,0.80); transition: color 0.2s; }
.contact-block a:hover { color: var(--gold); }

/* Short Links column */
.footer-col-links { display: flex; flex-direction: column; align-items: flex-start; }
.footer-logo { height: 100px; width: auto; margin-bottom: 20px; display: block; align-self: flex-start; }
.footer-links-title {
  font-family: var(--font-headings);
  font-size: 15px;
  font-weight: 300;
  color: var(--dark);
  margin-bottom: 12px;
}
.footer-links-col { display: flex; flex-direction: column; gap: 8px; }
.footer-links-col a {
  font-size: 13px;
  color: rgba(27,9,4,0.70);
  transition: color 0.2s;
}
.footer-links-col a:hover { color: var(--gold); }

.footer-bottom {
  border-top: 1px solid rgba(27,9,4,0.15);
  padding: 18px 0;
  text-align: center;
}
.footer-bottom p { font-size: 13px; color: rgba(255,255,255,0.75); }

/* ══════════════ WHATSAPP FAB ══════════════ */
.whatsapp-fab {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9999;
  width: 58px;
  height: 58px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,0.45), 0 2px 8px rgba(0,0,0,0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
}
.whatsapp-fab:hover {
  transform: scale(1.12);
  box-shadow: 0 6px 28px rgba(37,211,102,0.60), 0 3px 12px rgba(0,0,0,0.30);
}
.whatsapp-fab svg { width: 30px; height: 30px; }

/* ══════════════ INNER PAGE BANNER ══════════════ */
/* wall-bg.png is 2032×1418 — its bottom ~55% is white pixels (not transparent).
   We display the image at 100% width / auto height so no cropping occurs.
   The hero height is set to where the image is already white (~32 vw), so
   overflow:hidden clips in the white zone → seamless join with white content below. */
.page-banner {
  position: relative;
  /* The picture is 2030x700 and is drawn at full width, so the banner is given
     exactly that shape: the glow finishes inside the banner instead of being
     cut off at the edge. min-height keeps it usable on narrow screens. */
  aspect-ratio: 2030 / 700;
  min-height: clamp(340px, 32vw, 700px);
  display: flex;
  align-items: center;
  justify-content: center;
  /* wall-bg.png's flat grey backdrop is now transparent, so the colour behind
     the image is what shows under the mountains. Each page sets --banner-bleed
     to the background colour of the section directly below, which removes the
     dividing line without any gradient. */
  background:
    url('../images/wall-bg.png') top center / 100% auto no-repeat,
    var(--banner-bleed, #FFFFFF);
  overflow: hidden;
  padding-top: 0;
}
.page-banner-overlay {
  position: absolute;
  inset: 0;
  /* Darkens only the upper half where the nav & title sit; fully transparent
     by the mountain zone so the image's own colours show through */
  background: linear-gradient(
    to bottom,
    rgba(10,4,2,0.55) 0%,
    rgba(10,4,2,0.10) 45%,
    transparent       70%
  );
}

.page-banner-content {
  position: relative;
  z-index: 3;
  text-align: center;
  color: var(--white);
  /* Bottom padding lifts the title, tagline and breadcrumb clear of the pale
     zone at the foot of the banner, where cream text would disappear. */
  padding: 80px 20px 190px;
}
.page-banner-content h1 {
  font-family: var(--font-headings);
  font-size: clamp(36px, 6vw, 60px);
  font-weight: 300;
  color: var(--gold);
  margin-bottom: 12px;
  /* Cream fill + dark stroke: lighter warm tone pops on the amber-sky zone
     where pure #956834 gold blends in; still readable on dark mountains and grey */
  color: var(--cream);
  -webkit-text-stroke: 2px rgba(10,4,2,0.60);
  paint-order: stroke fill;
}
.page-banner-content p {
  font-size: clamp(13px, 1.8vw, 16px);
  color: var(--cream);
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  -webkit-text-stroke: 0.5px rgba(10,4,2,0.40);
  paint-order: stroke fill;
}
.breadcrumb {
  font-size: 13px;
  color: rgba(27,9,4,0.60);
  margin-top: 10px;
}
.breadcrumb a { color: var(--gold); }
.breadcrumb a:hover { color: var(--dark); }

/* ── About page ── */
/* ══════════════ ABOUT PAGE ══════════════ */
.about-page-section { padding: 90px 0; background: #c6c6c6; }
.about-page-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.about-eyebrow {
  font-family: var(--font-headings);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}
.about-page-text h2 {
  font-family: var(--font-headings);
  font-size: clamp(26px,3.5vw,40px);
  font-weight: 300;
  color: var(--dark);
  line-height: 1.25;
  margin-bottom: 22px;
}
.about-page-text p  { color: var(--text); line-height: 1.85; margin-bottom: 16px; }
.about-page-text strong { color: var(--dark); font-weight: 600; }
.about-page-img { background: transparent; }
.about-page-img img { width: 100%; display: block; mix-blend-mode: multiply; }

/* Vision & Commitment */
.about-vc-section {
  padding: 80px 0;
  background: var(--dark);
}
.about-vc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.about-vc-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(149,104,52,0.22);
  border-radius: 14px;
  padding: 44px 36px;
}
.about-vc-icon { font-size: 38px; margin-bottom: 18px; }
.about-vc-card h3 {
  font-family: var(--font-headings);
  font-size: clamp(20px,2.2vw,26px);
  font-weight: 300;
  color: var(--gold);
  margin-bottom: 16px;
  letter-spacing: 0.03em;
}
.about-vc-card p {
  color: rgba(255,255,255,0.75);
  font-size: 15px;
  line-height: 1.85;
}

/* Key Features */
.about-features-section {
  padding: 90px 0;
  background: #faf8f4;
}
.about-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 48px;
}
.about-feature-item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--white);
  border-radius: 12px;
  padding: 28px 24px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
  transition: box-shadow 0.3s, transform 0.3s;
}
.about-feature-item:hover {
  box-shadow: 0 8px 32px rgba(149,104,52,0.14);
  transform: translateY(-3px);
}
.feature-icon-wrap {
  font-size: 30px;
  flex-shrink: 0;
  margin-top: 2px;
}
.about-feature-item h4 {
  font-family: var(--font-headings);
  font-size: 16px;
  font-weight: 300;
  color: var(--dark);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.about-feature-item p {
  font-size: 13.5px;
  color: #666;
  line-height: 1.7;
  margin: 0;
}

/* ── Project page ── */
.project-intro { padding:80px 0; background:#fdf8f2; }
.project-intro .section-container { max-width: 92vw; width: 92vw; }
.project-intro-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}
.project-intro-text h2 { font-family:var(--font-headings); font-size:clamp(26px,3.5vw,38px); font-weight:300; color:var(--gold); margin-bottom:20px; }
.project-intro-text p  { color:var(--text); line-height:1.8; margin-bottom:16px; }

/* SEO overview text block — full width */
.project-seo-text { max-width: none; }
.project-seo-text p {
  color: var(--text);
  font-size: 15px;
  line-height: 1.90;
  margin-bottom: 18px;
}
.project-seo-text p:last-child { margin-bottom: 0; }
.project-seo-text strong { color: var(--dark); font-weight: 600; }
.seo-inline-link {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}
.seo-inline-link:hover { color: var(--dark); }
.rera-badge { max-width:220px; margin:0 auto; display:block; }

.plot-section { padding:70px 0; background:#faf8f4; }
.plot-map-wrap { margin-top:40px; border-radius:10px; overflow:hidden; box-shadow:0 4px 24px rgba(0,0,0,0.10); }
.plot-map-wrap img { width:100%; display:block; }

.amenities-section { padding:70px 0; background:var(--white); }
.amenities-grid {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
  margin-top:40px;
}
.amenity-card {
  background:#faf8f4;
  border-radius:10px;
  padding:28px 20px;
  text-align:center;
  border:1px solid rgba(149,104,52,0.12);
}
.amenity-card img { width:52px; height:52px; object-fit:contain; margin:0 auto 14px; display:block; }
.amenity-card h4 { font-family:var(--font-headings); font-size:14px; font-weight:300; color:var(--dark); }

/* ── Gallery page ── */
.gallery-section { padding:80px 0; background:#fdf0d0; }
.gallery-grid {
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:24px;
  margin-top:40px;
}
.gallery-item { border-radius:10px; overflow:hidden; box-shadow:0 4px 20px rgba(0,0,0,0.08); }
.gallery-item img { width:100%; display:block; transition:transform 0.4s; }
.gallery-item:hover img { transform:scale(1.03); }
.gallery-item-wide { grid-column:1 / -1; }

/* ══════════════ CONSTRUCTION TIMELINE (GALLERY) ══════════════ */
.timeline-section {
  padding: 90px 0 100px;
  background: #fdf0d0;
}
.timeline-tagline {
  text-align: center;
  color: rgba(27,9,4,0.52);
  font-size: 14px;
  letter-spacing: 0.04em;
  margin-bottom: 64px;
  margin-top: -8px;
}

/* Vertical track */
.timeline-wrap {
  position: relative;
  padding-left: 56px;
  max-width: 800px;
}
.timeline-wrap::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 10px;
  bottom: 50px;
  width: 2px;
  background: linear-gradient(to bottom, var(--gold) 0%, rgba(149,104,52,0.15) 100%);
}

/* Month entry */
.tl-entry {
  position: relative;
  margin-bottom: 56px;
}
.tl-entry:last-child { margin-bottom: 0; }

/* Dot + label */
.tl-marker {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 18px;
}
.tl-dot {
  position: absolute;
  left: -49px;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid #fdf0d0;
  box-shadow: 0 0 0 2px var(--gold);
}
.tl-month {
  font-family: var(--font-headings);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Album card */
.tl-album {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: var(--dark);
  box-shadow: 0 6px 32px rgba(0,0,0,0.16);
}
.album-viewport { overflow: hidden; width: 100%; }
.album-track {
  display: flex;
  will-change: transform;
  transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}
.album-slide { flex: 0 0 100%; line-height: 0; }
.album-slide img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* Prev / Next arrows */
.album-btn {
  position: absolute;
  top: calc(50% - 22px);
  transform: translateY(-50%);
  background: rgba(255,255,255,0.82);
  border: none;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 26px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dark);
  transition: background 0.2s;
  box-shadow: 0 2px 10px rgba(0,0,0,0.22);
  z-index: 2;
  padding-bottom: 2px;
}
.album-btn:hover { background: rgba(255,255,255,0.97); }
.album-btn[hidden] { display: none; }
.album-prev { left: 12px; }
.album-next { right: 12px; }

/* Bottom bar */
.album-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: rgba(27,9,4,0.88);
}
.album-dots { display: flex; gap: 7px; align-items: center; }
.album-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,233,188,0.28);
  cursor: pointer;
  transition: background 0.2s;
}
.album-dot.active { background: var(--gold); transform: scale(1.25); }
.album-counter {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255,233,188,0.50);
}

/* ── CTA strip ── */
.cta-strip {
  position: relative;
  overflow: hidden;
  background:var(--gold);
  padding:50px 0;
  text-align:center;
}
.cta-strip h2 { font-family:var(--font-headings); font-size:clamp(22px,3vw,34px); font-weight:300; color:var(--white); margin-bottom:20px; }
.btn-white {
  display:inline-block;
  padding:14px 40px;
  background:var(--white);
  color:var(--gold);
  font-family:var(--font-headings);
  font-weight:600;
  font-size:15px;
  border-radius:4px;
  transition:background 0.2s, color 0.2s;
}
.btn-white:hover { background:var(--dark); color:var(--white); }
.cta-strip::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 130px;
  background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,0.14) 50%, rgba(255,255,255,0.38) 100%);
  z-index: 1;
  pointer-events: none;
}

/* ── RERA video in project intro ── */
.rera-video-wrap {
  position: relative;
  border-radius: 8px;
  overflow: visible; /* allow badge to float outside the video boundary */
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}
/* RERA badge hovering over the content below */
.rera-float-badge {
  position: absolute;
  bottom: -24px;
  right: 12px;
  width: 90px;
  height: auto;
  z-index: 5;
  background: transparent;
  pointer-events: none;
  mix-blend-mode: multiply;   /* white PNG bg becomes transparent */
  filter: drop-shadow(0 3px 12px rgba(0,0,0,0.40));
  animation: badgeFloat 3s ease-in-out infinite alternate;
}
@keyframes badgeFloat {
  from { transform: translateY(0px); }
  to   { transform: translateY(-6px); }
}

/* ── Privacy Policy page ── */
.privacy-section { padding: 80px 0; background: #c6c6c6; }
.privacy-content { max-width: 800px; }
.privacy-content h2 {
  font-family: var(--font-headings);
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 300;
  color: var(--gold);
  margin: 40px 0 14px;
}
.privacy-content h2:first-child { margin-top: 0; }
.privacy-content p {
  color: var(--text);
  font-size: 15px;
  line-height: 1.9;
  margin-bottom: 16px;
}
.privacy-content ul {
  color: var(--text);
  font-size: 15px;
  line-height: 1.9;
  margin: 0 0 16px 24px;
}
.privacy-content ul li { margin-bottom: 6px; }
.privacy-content a { color: var(--gold); }
.privacy-content a:hover { text-decoration: underline; }
.privacy-updated { font-size: 13px; color: #999; margin-top: 48px; }

/* ══════════════ CONTACT SECTION ══════════════ */
.contact-section {
  position: relative;
  overflow: hidden;
}
.contact-split {
  display: flex;
  min-height: 500px;
}

/* — Form panel (left) — */
.contact-form-panel {
  flex: 1;
  padding: 64px 52px;
  /* Solid dark background — matches info panel, no blend-mode transparency issues */
  background: #1c0c06 url('../images/section-bg-1.png') center / cover no-repeat;
  background-blend-mode: overlay;
}
.contact-form-heading {
  font-family: var(--font-headings);
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 300;
  /* Cream + dark stroke — same treatment as page banner titles */
  color: var(--cream);
  -webkit-text-stroke: 1px rgba(10,4,2,0.45);
  paint-order: stroke fill;
  margin-bottom: 28px;
  letter-spacing: 0.03em;
}
.contact-form .form-group { margin-bottom: 16px; position: relative; }
.contact-form label {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: rgba(255,233,188,0.70); /* cream on dark */
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.contact-form .req { color: var(--gold); }
.contact-form input,
.contact-form textarea {
  width: 100%;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(149,104,52,0.40);
  border-radius: 4px;
  padding: 10px 14px;
  font-family: var(--font-base);
  font-size: 14px;
  color: var(--cream);
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  box-sizing: border-box;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: rgba(255,233,188,0.30); }
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--gold);
  background: rgba(255,255,255,0.15);
}
.contact-form textarea { resize: vertical; min-height: 96px; }
.msg-count {
  display: block;
  text-align: right;
  font-size: 11px;
  color: rgba(255,233,188,0.35);
  margin-top: 3px;
}
.btn-send {
  display: inline-block;
  padding: 12px 40px;
  background: var(--gold);
  color: var(--white);
  font-family: var(--font-headings);
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.08em;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 8px;
}
.btn-send:hover { background: var(--cream); color: var(--dark); }

/* — Info panel (right) — */
.contact-info-panel {
  flex: 1.1;
  padding: 64px 52px;
  background: var(--dark);
  display: flex;
  flex-direction: column;
}
.contact-info-heading {
  font-family: var(--font-headings);
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 300;
  color: var(--gold);
  margin-bottom: 24px;
  letter-spacing: 0.03em;
}
.contact-detail {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 13.5px;
  color: rgba(255,233,188,0.82);
  line-height: 1.65;
}
.ci-icon { flex-shrink: 0; margin-top: 2px; opacity: 0.80; }
.contact-detail a { color: rgba(255,233,188,0.82); }
.contact-detail a:hover { color: var(--gold); }
.contact-detail strong { color: var(--cream); font-weight: 500; }
.contact-maps-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 22px;
  flex: 1;
  align-items: start;
}
.contact-map-card {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(149,104,52,0.28);
}
.contact-map-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.map-open-btn {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.94);
  color: var(--dark);
  font-size: 11.5px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 12px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  transition: background 0.2s;
  box-shadow: 0 1px 6px rgba(0,0,0,0.22);
}
.map-open-btn:hover { background: var(--white); }

/* First content sections — pure white, same as wall-bg.png's white bottom zone */
.about-page-section { background: #ffffff !important; }
.timeline-section   { background: #ffffff !important; }
.privacy-section    { background: #ffffff !important; }

/* ══════════════ RESPONSIVE ══════════════ */

/* ── Tablet (960px) ── */
@media (max-width: 960px) {
  .nav-links, .nav-phone { display: none; }
  .hamburger { display: block; }

  /* Dropdown menu */
  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 72px; left: 0; right: 0;
    background: var(--dark);
    padding: 20px 32px 28px;
    gap: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
    z-index: 999;
  }
  .nav-links.open a { font-size: 15px; padding: 4px 0; }

  /* Navbar height reduction */
  .nav-container { height: 72px; }
  .nav-logo { height: 54px; }
  .inner-header .nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 72px;
    column-gap: 0;
  }
  .inner-header .nav-logo { height: 54px; }
  .inner-header .nav-links { justify-self: auto; }
  .inner-header .nav-right  { justify-self: auto; }
  .inner-header.scrolled .nav-container { height: 60px; }
  .inner-header.scrolled .nav-logo { height: 44px; }
  #navbar.scrolled .nav-container { height: 60px; }
  #navbar.scrolled .nav-logo { height: 44px; }

  /* Hero logo */
  .hero-logo-center img { height: 220px; }

  /* Grids → single column or 2-col */
  .about-grid             { grid-template-columns: 1fr; }
  .about-page-grid        { grid-template-columns: 1fr; }
  .about-vc-grid          { grid-template-columns: 1fr; }
  .about-features-grid    { grid-template-columns: 1fr 1fr; gap: 20px; }
  .project-intro-grid     { grid-template-columns: 1fr; }
  .comfort-grid           { grid-template-columns: 1fr; }
  .features-grid          { grid-template-columns: repeat(2, 1fr); }
  .values-grid            { grid-template-columns: repeat(2, 1fr); }
  .amenities-grid         { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid           { grid-template-columns: 1fr; }
  .footer-main-grid       { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-col:first-child { grid-column: 1 / -1; }

  /* Sections */
  .about-section          { padding: 60px 0; }
  .yt-section             { padding: 50px 0; }
  .travel-section         { padding: 60px 0; }
  .why-section            { padding: 60px 0; }
  .comfort-section        { padding: 70px 0; }
  .about-page-section     { padding: 60px 0; }
  .about-vc-section       { padding: 60px 0; }
  .about-features-section { padding: 60px 0; }
  .gallery-section        { padding: 60px 0; }
  .privacy-section        { padding: 60px 0; }

  /* Page banner */
  .page-banner { min-height: 340px; }
  .page-banner-content { padding: 110px 24px 50px; }

  /* Timeline */
  .timeline-wrap { padding-left: 36px; }
  .timeline-wrap::before { left: 8px; }
  .tl-dot { left: -32px; width: 14px; height: 14px; top: 3px; }
  .album-btn { width: 34px; height: 34px; font-size: 22px; }

  /* Contact section */
  .contact-split { flex-direction: column; }
  .contact-form-panel  { padding: 48px 24px; }
  .contact-info-panel  { padding: 48px 24px; }
  .contact-maps-row    { grid-template-columns: 1fr; }
}

/* ── Mobile (600px) ── */
@media (max-width: 600px) {
  html { font-size: 15px; }        /* base size — prevents iOS zoom on inputs */
  #navbar { padding: 0 16px; }

  /* Hero — fills screen, content scaled down */
  .hero-section { padding-top: 72px; padding-bottom: 22vh; }
  .hero-logo-center img { height: 160px; }
  .hero-title {
    font-size: clamp(28px, 9vw, 52px);
    letter-spacing: 0.08em;
  }
  .hero-tagline {
    font-size: clamp(11px, 3.2vw, 16px);
    letter-spacing: 0.14em;
  }
  .hero-subtitle { font-size: 13px; margin-bottom: 28px; }
  .hero-content  { padding: 32px 20px 48px; }
  .btn-explore   { padding: 13px 36px; font-size: 14px; }

  /* Section headings */
  .section-heading { font-size: clamp(22px, 6.5vw, 32px); margin-bottom: 18px; }

  /* Counters */
  .counter { font-size: 52px; }
  .travel-grid { grid-template-columns: 1fr; gap: 16px; }
  .travel-card { padding: 28px 16px; }

  /* Feature cards */
  .features-grid  { grid-template-columns: 1fr; }
  .feature-card   { padding: 28px 20px; }

  /* Amenities */
  .amenities-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .amenity-card   { padding: 20px 14px; }
  .amenity-card img { width: 40px; height: 40px; }

  /* About page features */
  .about-features-grid { grid-template-columns: 1fr; }
  .about-feature-item  { padding: 22px 18px; }

  /* Page banner */
  .page-banner { min-height: 280px; }
  .page-banner-content {
    padding: 90px 16px 36px;
  }
  .page-banner-content h1 { font-size: clamp(26px, 7.5vw, 42px); }
  .page-banner-content p  { font-size: 12px; letter-spacing: 0.08em; }

  /* Comfort section */
  .comfort-grid { grid-template-columns: 1fr; text-align: center; }
  .comfort-cta  { justify-content: center; margin-top: 28px; }

  /* Footer */
  .footer-main-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-col:first-child { grid-column: auto; }
  .footer-logo { height: 72px; }
  .footer { padding-top: 48px; }

  /* Jabalpur (project page) */
  .jabalpur-intro { padding: 70px 0 80px; }
  .jabalpur-text-wrap { padding: 0 4px; }

  /* WhatsApp FAB */
  .whatsapp-fab { bottom: 18px; right: 18px; width: 52px; height: 52px; }
  .whatsapp-fab svg { width: 26px; height: 26px; }

  /* Vision / commitment cards */
  .about-vc-card { padding: 32px 24px; }

  /* RERA floating badge */
  .rera-float-badge { width: 68px; bottom: -18px; right: 8px; }

  /* ── Footer: center-aligned on mobile ── */
  .footer-main-grid   { text-align: center; }
  .footer-col         { align-items: center; }
  .footer-col-links   { align-items: center; }
  .footer-links-col   { align-items: center; text-align: center; }
  .social-row         { justify-content: center; }
  .footer-logo        { margin: 0 auto 20px; }
  .contact-block      { text-align: center; }
  .footer-pc-heading  { text-align: center; }
  .footer-pc-text     { text-align: center; }
  .footer-col-title   { text-align: center; }
  .footer-links-title { text-align: center; }
  .footer-bottom      { text-align: center; }
}

/* ── Small phones (≤ 400px) ── */
@media (max-width: 400px) {
  .hero-logo-center img { height: 130px; }
  .hero-title { font-size: 8.5vw; letter-spacing: 0.06em; }
  .hero-tagline { font-size: 10px; letter-spacing: 0.10em; }
  .section-container { width: 94%; }
  .amenities-grid { grid-template-columns: 1fr; }
  .counter { font-size: 44px; }
}

/* Hide Manage Project button on all mobiles — WhatsApp FAB handles conversion */
@media (max-width: 600px) {
  .nav-manage-btn { display: none; }
}


/* ── Login button in navbar ─────────────────────────────── */
.nav-login-btn {
  display: inline-flex;
  align-items: center;
  padding: 7px 18px;
  background: linear-gradient(135deg, #B8860B, #D4A017);
  color: #fff !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;   /* pill, matching the hero buttons */
  text-decoration: none;
  transition: opacity 0.2s, transform 0.15s;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(184,134,11,0.35);
}
.nav-login-btn:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}
@media (max-width: 768px) {
  .nav-login-btn { padding: 6px 14px; font-size: 11px; }
}

/* ══════════════ SHORT-WINDOW FIXES (kept last so they win) ══════════
   These depend on window HEIGHT, and must override the width-based blocks
   above when both apply. Spacing and logo size only — no font changes. */
/* Short windows (laptops at 720p, landscape phones): trim the hero's breathing
   room and the logo size only — no font changes — so the whole hero, buttons
   included, still fits one screen and ends on white. */
@media (max-height: 820px) {
  .hero-section     { padding-top: 84px; padding-bottom: 22vh; }
  .hero-logo-center img { height: 128px; }
  .hero-content     { padding: 24px 40px 0; }
}

/* Very short windows (phones held sideways): shrink the logo and spacing only
   so the whole hero still fits and ends on white. Fonts untouched. */
@media (max-height: 520px) {
  .hero-section         { padding-top: 54px; padding-bottom: 11vh; }
  .hero-logo-center     { margin-bottom: 4px; }
  .hero-logo-center img { height: 52px; }
  .hero-content         { padding: 6px 24px 0; }
  .hero-tagline         { margin-bottom: 8px; }
}

/* ── Inner-page banners on narrow screens ───────────────────────────────
   The picture is short here, so the title would land on the pale foot of the
   banner. Fill the banner with the image, deepen the top shading, and lift the
   text into it. Colours and spacing only. */
@media (max-width: 760px) {
  .page-banner {
    min-height: 400px;
    background-size: cover, auto;
  }
  .page-banner-overlay {
    background: linear-gradient(
      to bottom,
      rgba(10,4,2,0.72) 0%,
      rgba(10,4,2,0.46) 42%,
      rgba(10,4,2,0.10) 62%,
      transparent       76%
    );
  }
  .page-banner-content { padding: 92px 24px 150px; }
  .breadcrumb { color: rgba(255,233,188,0.85); }
}