/* ---------- Local fonts ---------- */

@font-face {
  font-family: 'Frank Ruhl Libre';
  src: url('../font/frank-ruhl-libre/FrankRuhlLibre-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Frank Ruhl Libre';
  src: url('../font/frank-ruhl-libre/FrankRuhlLibre-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Frank Ruhl Libre';
  src: url('../font/frank-ruhl-libre/FrankRuhlLibre-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Frank Ruhl Libre';
  src: url('../font/frank-ruhl-libre/FrankRuhlLibre-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Frank Ruhl Libre';
  src: url('../font/frank-ruhl-libre/FrankRuhlLibre-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Almarose';
  src: url('../font/almarose-font-family/Almarose-Light-iF664dbe56d477b.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Almarose';
  src: url('../font/almarose-font-family/Almarose-Lightitalic-iF664dbe56d985c.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Almarose';
  src: url('../font/almarose-font-family/Almarose-Regular-iF664dbe56e8acf.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Almarose';
  src: url('../font/almarose-font-family/Almarose-Regularitalic-iF664dbe56edaf9.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Almarose';
  src: url('../font/almarose-font-family/Almarose-Medium-iF664dbe56de8fd.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Almarose';
  src: url('../font/almarose-font-family/Almarose-Mediumitalic-iF664dbe56e3895.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Almarose';
  src: url('../font/almarose-font-family/Almarose-Semibold-iF664dbe56f2afe.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Almarose';
  src: url('../font/almarose-font-family/Almarose-Semibolditalic-iF664dbe570396b.otf') format('opentype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Almarose';
  src: url('../font/almarose-font-family/Almarose-Bold-iF664dbe56ba95f.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Almarose';
  src: url('../font/almarose-font-family/Almarose-Bold-Italic-iF664dbe56b14cf.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Coastinge';
  src: url('../font/Coastinge.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy-900: #010f26;
  --navy-800: #01265B;
  --navy-700: #010f26;
  /* --navy-700: #0a3568; */
  --navy-500: #14508f;
  --cream: #F2E3BA;
  --cream-dim: rgba(242, 227, 186, 0.78);
  --cream-faint: rgba(242, 227, 186, 0.4);
  --gold: #b58e56;
  --gold-dim: rgba(181, 142, 86, 0.55);
  --gold-faint: rgba(181, 142, 86, 0.22);
  --font-display: 'Almarose', serif;
  /* --font-display: 'Frank Ruhl Libre', serif; */
  --font-secondary: 'Almarose', serif;
  --font-sans: 'Coastinge', cursive;
  /* --font-accent: 'Coastinge', cursive; */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  font-family: var(--font-display);
  background: var(--navy-900);
  color: var(--cream);
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* older Edge/IE */
}

/* Bootstrap's Reboot sets `:root { scroll-behavior: smooth }` (under
   prefers-reduced-motion: no-preference). That collides badly with
   Lenis, which already drives smooth scrolling itself by writing
   scrollTop every animation frame -- each of those writes restarts
   the native smooth-scroll animation before it can visibly progress,
   so the page reads as frozen/barely scrolling. Force native smooth
   scrolling back off so Lenis is the only thing animating scroll. */
html {
  scroll-behavior: auto !important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, newer Edge */
}

body.menu-open {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
}

button {
  font-family: inherit;
  cursor: pointer;
}

a {
  text-decoration: none;
  color: inherit;
}

/* ---------- Preloader ---------- */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy-900);
  transition: opacity .6s ease, visibility .6s ease;
}

.preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader-mark {
  position: relative;
  width: clamp(160px, 22vw, 260px);
  aspect-ratio: 400 / 200;
}

.preloader-logo {
  position: relative;
  width: 78%;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%) scale(.9);
  opacity: 0;
  animation:
    logo-resolve .7s cubic-bezier(.16, .84, .44, 1) .15s forwards,
    logo-pulse 2.2s ease-in-out .85s infinite;
}

@keyframes logo-resolve {
  to {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
}

@keyframes logo-pulse {

  0%,
  100% {
    transform: translateY(-50%) scale(1);
  }

  50% {
    transform: translateY(-50%) scale(1.04);
  }
}

/* ---------- Hero ---------- */

/* The hero is sized to its banner artwork -- every desktop banner is
   1920x900 and every mobile one 1080x1920 (see .hero-slide-N) -- so each
   slide shows whole and edge to edge at any screen size. .about-section's
   margin-top reserves the same height. Pinned on desktop, so capped at
   the viewport height (only ultra-wide screens hit the cap; slides then
   crop a little top/bottom). */
:root {
  --hero-h: min(calc(100vw * 900 / 1920), 100vh);
}

.hero {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  width: 100%;
  height: var(--hero-h);
  overflow: hidden;
  background: var(--navy-900);
}

/* Phones: tall portrait banners. Unpinned, so a banner taller than the
   screen just scrolls into view instead of being cut off. */
@media (max-width: 767px) {
  :root {
    --hero-h: calc(100vw * 1920 / 1080);
  }

  .hero {
    position: absolute;
  }
}

/* Full-bleed crossfade slider: each slide slowly zooms (Ken Burns) while
   it is the active one; the progress bar of the active slide drives the
   auto-advance (js/scriptv.js listens for its animationend). */
.hero-slider {
  position: absolute;
  inset: 0;
  /* Own stacking context so the active slide's z-index can't climb
     above the .hero-wash overlay that follows. */
  z-index: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.hero.is-ready .hero-slider {
  opacity: 1;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.12);
  transition: opacity 1.4s ease, transform 0s linear 1.4s;
}

.hero-slide.is-active {
  opacity: 1;
  z-index: 1;
  transform: scale(1);
  transition: opacity 1.4s ease, transform 9s linear;
}

/* Slider controls: prev / counter / progress bars / next */
.hero-slider-ui {
  --slide-ms: 6000ms;
  position: absolute;
  left: 50%;
  bottom: clamp(28px, 4vh, 44px);
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 20px;
  color: var(--cream);
}

.hero-arrow {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--cream-faint);
  background: rgba(1, 15, 38, 0.25);
  color: var(--cream);
  transition: border-color .3s ease, background .3s ease;
}

.hero-arrow svg {
  width: 16px;
  height: 16px;
}

.hero-arrow:hover {
  border-color: var(--cream);
  background: rgba(242, 227, 186, 0.14);
}

.hero-counter {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.2em;
  white-space: nowrap;
  min-width: 64px;
  text-align: center;
}

.hero-counter span {
  opacity: 0.6;
}

.hero-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-dot {
  position: relative;
  width: 44px;
  height: 14px;
  padding: 0;
  background: none;
  border: none;
}

.hero-dot::before,
.hero-dot::after {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  height: 2px;
}

.hero-dot::before {
  width: 100%;
  background: rgba(242, 227, 186, 0.3);
}

.hero-dot::after {
  width: 0;
  background: var(--cream);
}

.hero-dot.is-done::after {
  width: 100%;
}

.hero-dot.is-active::after {
  animation: hero-progress var(--slide-ms) linear forwards;
}

.hero-slider-ui.is-paused .hero-dot.is-active::after {
  animation-play-state: paused;
}

@keyframes hero-progress {
  to {
    width: 100%;
  }
}

/* Navy wash to tie the photo grid to the palette, replacing the green tint */
.hero-wash {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(1, 15, 38, 0.34) 0%, rgba(1, 38, 91, 0.34) 45%, rgba(1, 15, 38, 0.58) 100%),
    linear-gradient(120deg, rgba(1, 38, 91, 0.4) 0%, rgba(10, 53, 104, 0.2) 55%, rgba(1, 15, 38, 0.45) 100%);
  mix-blend-mode: multiply;
}

.hero-wash::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 15% 100%, rgba(1, 15, 38, 0.55) 0%, transparent 55%),
    radial-gradient(120% 90% at 100% 0%, rgba(1, 15, 38, 0.32) 0%, transparent 50%);
}

/* ---------- Header ---------- */

/* .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px clamp(20px, 4vw, 56px) 0;
  background: linear-gradient(180deg, rgba(1, 15, 38, 0) 0%, rgba(1, 15, 38, 0) 100%);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: background .6s ease, backdrop-filter .6s ease, -webkit-backdrop-filter .6s ease, padding .6s ease;
}

/* Glass/blur: on as soon as the page scrolls at all -- no colour yet,
   just the frosted look over whatever is behind it. */
/* .site-header.is-scrolled {
  padding-top: 7px;
  padding-bottom: 7px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
} */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px clamp(20px, 4vw, 56px) 8px;
  transition: all .6s ease;
  background: transparent;
  box-shadow: none;
}

.site-header::before {
  content: "";
  position: absolute;
  left: -40%;
  top: 0;
  width: 35%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 232, 180, .18),
      transparent);
  filter: blur(20px);
  animation: reflection 10s linear infinite;
}

.site-header.is-scrolled {
  background:
    linear-gradient(to bottom,
      rgba(250, 248, 243, .14),
      rgba(250, 248, 243, .08));
  backdrop-filter: blur(7px) saturate(140%);
  -webkit-backdrop-filter: blur(7px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, 0);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .25),
    0 10px 40px rgba(0, 0, 0, .08);
}
@keyframes reflection{

100%{
left:140%;
}

}
/* Mobile performance: backdrop-filter is recalculated every scroll
   frame (the header is fixed and stays on screen throughout), and it's
   one of the more GPU-expensive effects available in CSS -- a smaller
   blur radius is meaningfully cheaper to sample while still reading as
   frosted glass at the smaller size mobile displays this at. Desktop's
   14px is untouched. */
@media (max-width: 900px) {
  .site-header.is-scrolled {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

/* Colour tint: nav/menu text and icons swap from cream to the primary
   navy once a light-background section (marked with .header-light-trigger,
   see js/scriptv.js) has actually arrived underneath the header, and
   back to cream as soon as the dark hero is back underneath. */
.site-header.is-light-content .nav-link,
.site-header.is-light-content .menu-btn,
.site-header.is-light-content .link-line {
  color: var(--navy-900);
  font-weight:400;
}

.site-header.is-light-content .nav-link::after,
.site-header.is-light-content .bars i {
  background: var(--navy-900);
}

/* Any page whose banner uses the pale/bright .page-banner-light variant
   throughout (no dark hero underneath at any scroll position, unlike
   the scroll-triggered .is-light-content above) gets this class on
   <body> so the header just stays in the navy/symbol-logo state permanently instead
   of switching on scroll. Shared by contact.html and blog.html.
   .hero-plain-slide (set by js/scriptv.js) does the same on the
   homepage while a bright, overlay-free hero banner is showing. */
.page-light-header .site-header .nav-link,
.page-light-header .site-header .menu-btn,
.page-light-header .site-header .link-line,
.hero-plain-slide:not(.menu-open) .site-header .nav-link,
.hero-plain-slide:not(.menu-open) .site-header .menu-btn,
.hero-plain-slide:not(.menu-open) .site-header .link-line {
  color: var(--navy-900);
  font-weight: 400;
}

.page-light-header .site-header .nav-link::after,
.page-light-header .site-header .bars i,
.hero-plain-slide:not(.menu-open) .site-header .nav-link::after,
.hero-plain-slide:not(.menu-open) .site-header .bars i {
  background: var(--navy-900);
}

.header-left,
.header-right {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  flex: 1;
}

.header-right {
  justify-content: flex-end;
}

.nav-link {
  position: relative;
  font-size: 13px;
  letter-spacing: 0.14em;
  font-weight: 400;
  color: var(--cream);
  opacity: 0.92;
  transition: opacity 0.2s ease, color .5s ease;
  font-family: var(--font-display);
}

.nav-link:hover {
  opacity: 1;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background: var(--cream);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s cubic-bezier(.65, 0, .35, 1), background .5s ease;
}

.nav-link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* The full-screen menu's links use color/letter-spacing only for
   their active state -- no underline. */
.menu-link::after {
  content: none;
}

/* Text-swap hover: the visible line slides up and out while its
   duplicate slides up into view underneath. */
.link-mask {
  display: block;
  height: 1.5em;
  overflow: hidden;
}

.link-line {
  display: block;
  height: 1.5em;
  line-height: 1.5em;
  white-space: nowrap;
  transition: transform .45s cubic-bezier(.65, 0, .35, 1), color .45s ease;
}

.link-line:last-child {
  color: var(--cream);
}

.nav-link:hover .link-line {
  transform: translateY(-1.5em);
}

.menu-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: none;
  color: var(--cream);
  font-size: 13px;
  letter-spacing: 0.14em;
  transition: color .5s ease;
}

.menu-label {
  transition: letter-spacing .3s ease, opacity .3s ease;
  font-family: var(--font-display);
}

.menu-btn:hover .menu-label {
  letter-spacing: 0.22em;
  opacity: 0.75;
}

.bars {
  position: relative;
  width: 22px;
  height: 14px;
}

.bars i {
  position: absolute;
  left: 0;
  display: block;
  height: 1px;
  background: var(--cream);
  width: 100%;
  transition: transform .35s cubic-bezier(.65, 0, .35, 1), width .3s ease, opacity .25s ease, top .35s cubic-bezier(.65, 0, .35, 1), background .5s ease;
}

.bars i:nth-child(1) {
  top: 0;
}

.bars i:nth-child(2) {
  top: 50%;
  width: 70%;
  transform: translateY(-50%);
}

.bars i:nth-child(3) {
  top: 100%;
  transform: translateY(-100%);
}

.menu-btn:hover .bars i:nth-child(1) {
  transform: translateX(3px);
}

.menu-btn:hover .bars i:nth-child(2) {
  width: 100%;
}

.menu-btn:hover .bars i:nth-child(3) {
  transform: translateY(-100%) translateX(-3px);
}

/* Hamburger -> X morph when the full-screen menu is open */
.menu-btn.is-open .bars i:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.menu-btn.is-open .bars i:nth-child(2) {
  opacity: 0;
  width: 0;
}

.menu-btn.is-open .bars i:nth-child(3) {
  top: 50%;
  width: 100%;
  transform: translateY(-50%) rotate(-45deg);
}

.brand {
  position: relative;
  display: block;
  height: clamp(30px, 5vw, 62px);
  transition: opacity .3s ease;
}

.brand:hover {
  opacity: 0.82;
}

/* Full wordmark <-> symbol-only crossfade, toggled by .is-light-content
   on the header (js/scriptv.js) -- synced with the same light-section-
   arrival trigger that recolors the nav links/menu icon, rather than
   the earlier .is-scrolled threshold. The cream full wordmark only
   reads over the dark hero; swapping it out on the 40px .is-scrolled
   threshold (which fires while the hero is still underneath) showed
   the navy symbol mark against the dark hero with poor contrast.
   Both logos are stacked and centered so the swap never shifts
   layout. */
.brand-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  max-width: none;
  /* .brand has no in-flow content once both logos are
    absolutely positioned, so it collapses to 0 width -- without this,
    the inherited `img { max-width: 100% }` caps both logos at that 0. */
  transform: translate(-50%, -50%);
  transition: opacity .5s ease;
}

.brand-logo-full {
  height: 100%;
  opacity: 1;
}

.brand-logo-symbol {
  height: 62%;
  opacity: 0;
}

.site-header.is-light-content .brand-logo-full {
  opacity: 0;
}

.site-header.is-light-content .brand-logo-symbol {
  height: 100%;
  opacity: 1;
}

.page-light-header .site-header .brand-logo-full,
.hero-plain-slide:not(.menu-open) .site-header .brand-logo-full {
  opacity: 0;
}

.page-light-header .site-header .brand-logo-symbol,
.hero-plain-slide:not(.menu-open) .site-header .brand-logo-symbol {
  height: 100%;
  opacity: 1;
}

.nav-link-inline {
  display: inline-block;
}

/* Logo pinned left on every screen size. Desktop: text links on the
   right, no burger. Mobile (<=768px): burger on the right. */
.brand {
  order: 1;
  flex: none;
}

.brand-logo {
  left: 0;
  transform: translateY(-50%);
}

.header-right {
  order: 2;
}

@media (min-width: 769px) {
  .header-left {
    display: none;
  }

  .header-right {
    gap: clamp(24px, 3vw, 48px);
  }
}

@media (max-width: 768px) {
  .header-left {
    order: 3;
    flex: none;
    justify-content: flex-end;
  }

  /* Taller bar, bigger logo, and a more solid backdrop so the logo and
     burger stay readable over any image. Navy behind the cream logo over
     the dark hero; pale behind the navy symbol once a light section is
     underneath (.is-light-content). */
  .site-header {
    padding: 14px 16px;
  }

  .brand {
    height: 48px;
  }

  .bars {
    width: 28px;
    height: 18px;
  }

  .site-header.is-scrolled {
    background: rgba(1, 15, 38, .82);
  }

  .site-header.is-scrolled.is-light-content,
  .page-light-header .site-header.is-scrolled,
  .hero-plain-slide:not(.menu-open) .site-header.is-scrolled {
    background: rgba(250, 248, 243, .92);
  }
}

/* ---------- Full-screen menu ---------- */

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  background: var(--navy-900);
  visibility: hidden;
  opacity: 0;
  transition: opacity .5s ease, visibility 0s linear .5s;
}

.menu-overlay.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity .5s ease, visibility 0s linear 0s;
}

.menu-panel,
.menu-visual {
  opacity: 0;
  transition: opacity .6s ease, transform .6s cubic-bezier(.16, .84, .44, 1);
}

.menu-overlay.is-open .menu-panel,
.menu-overlay.is-open .menu-visual {
  opacity: 1;
  transform: translateX(0);
}

.menu-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 50%;
  min-width: 340px;
  padding: clamp(120px, 18vh, 170px) clamp(28px, 5vw, 80px) 40px;
  overflow: hidden;
  background: var(--navy-900);
  transform: translateX(-24px);
}

/* Blurred photo layer, overscanned so the blur radius never fades to
   a transparent edge -- the panel's own overflow:hidden clips it
   back to size. */
.menu-panel::before {
  content: "";
  position: absolute;
  inset: -24px;
  background-image: url('../assets/nav_bg.jpeg');
  background-size: cover;
  background-position: center;
  filter: blur(0px) saturate(1.05);
  transform: scale(1.1);
  z-index: 0;
}

/* Frosted glass pane on top: no blue tint, just a translucent cream
   wash + backdrop blur + a hairline glass edge. */
.menu-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(242, 227, 186, 0.07);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-right: 1px solid rgba(242, 227, 186, 0.14);
}

.menu-links {
  position: relative;
  z-index: 2;
}

/* Contact/social footer, pinned to the bottom of the panel regardless
   of how much space the link list above it takes up. */
.menu-contact {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding-top: 36px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.menu-contact-link {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.03em;
  color: var(--cream-dim);
  transition: color .3s ease;
}

.menu-contact-link:hover {
  color: var(--cream);
}

.menu-social {
  display: flex;
  gap: 12px;
  margin-top: 14px;
}

.menu-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--cream-faint);
  color: var(--cream-dim);
  transition: color .3s ease, background .3s ease, border-color .3s ease, transform .3s ease;
}

.menu-social-link svg {
  width: 16px;
  height: 16px;
}

.menu-social-link:hover {
  color: var(--navy-900);
  background: var(--cream);
  border-color: var(--cream);
  transform: translateY(-2px);
}

.menu-visual {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: var(--navy-900);
  transform: translateX(24px);
}

/* Visual state (yPercent/scale) is owned entirely by GSAP at runtime
   -- see js/scriptv.js. These rules only establish layout: full-bleed,
   flush with the panel divider and viewport edge, no inset. */
.menu-visual-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 1;
}

.menu-visual-wash {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(160deg, rgba(1, 15, 38, 0.35) 0%, rgba(1, 38, 91, 0.2) 45%, rgba(1, 15, 38, 0.6) 100%);
}

.menu-links {
  display: flex;
  flex-direction: column;
}

.menu-link {
  padding: 0.15em 0;
  display: inline-block;
}

.menu-link.nav-link {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.6vw, 34px);
  font-weight: 300;
  letter-spacing: 0;
  opacity: 1;
  cursor: pointer;
}

.menu-link .line-inner {
  display: block;
  color: var(--cream-dim);
  letter-spacing: 0;
  transition: color .4s ease, letter-spacing .4s ease;
  transform: translateY(115%);
}

.menu-link.is-active .line-inner {
  color: var(--cream);
  letter-spacing: 0.02em;
}

/* Only rendered as a visible element on the small-screen "card list"
   layout -- see the max-width:560px block below. */
.menu-thumb {
  display: none;
  background-size: cover;
  background-position: center;
}

.menu-overlay.is-open .menu-link .line-inner {
  animation: menu-link-reveal .9s cubic-bezier(.16, .84, .44, 1) forwards;
}

.menu-links a:nth-child(1) .line-inner {
  animation-delay: .25s;
}

.menu-links a:nth-child(2) .line-inner {
  animation-delay: .35s;
}

.menu-links a:nth-child(3) .line-inner {
  animation-delay: .45s;
}

.menu-links a:nth-child(4) .line-inner {
  animation-delay: .55s;
}

.menu-links a:nth-child(5) .line-inner {
  animation-delay: .65s;
}

@keyframes menu-link-reveal {
  to {
    transform: translateY(0);
  }
}

/* ---------- Hero content ---------- */

.hero-content {
  position: absolute;
  left: clamp(20px, 4vw, 56px);
  bottom: clamp(70px, 12vh, 130px);
  right: clamp(20px, 4vw, 56px);
  z-index: 4;
}

.hero-tagline {
  font-size: clamp(13px, 1.1vw, 16px);
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--cream-dim);
  /* font-family: var(--font-display); */
  max-width: 320px;
  margin-top: 18px;
}

.hero-headline {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(34px, 6vw, 89px);
  line-height: 0.98;
  letter-spacing: 0.01em;
  color: var(--cream);
  text-align: left;
}

/* Load-in reveal: same mask + slide technique as the nav-link hover,
   gated to run once the preloader hands off instead of on hover. */
.line-mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.12em;
}

.line-inner {
  display: block;
  letter-spacing: 1px;
  transform: translateY(110%);
}

.hero.is-ready .line-inner {
  animation: line-reveal 1.1s cubic-bezier(.16, .84, .44, 1) forwards;
}

.hero.is-ready .hero-content.is-swapping .line-inner {
  animation: none;
  transform: translateY(110%);
  transition: transform .4s cubic-bezier(.5, 0, .75, 0);
}

.hero-headline .line-mask:nth-child(1) .line-inner {
  animation-delay: .5s;
}

.hero-headline .line-mask:nth-child(2) .line-inner {
  animation-delay: .65s;
}

.hero-tagline .line-mask:nth-child(1) .line-inner {
  animation-delay: .85s;
}

.hero-tagline .line-mask:nth-child(2) .line-inner {
  animation-delay: 1.05s;
}

@keyframes line-reveal {
  to {
    transform: translateY(0);
  }
}

/* About page headings: same .line-mask/.line-inner mask-and-slide-up
   technique as the hero/Projects headings above, just auto-playing on
   load (like .reveal-up) instead of gated behind a scroll position or
   JS class toggle -- a heading's own text is exactly the kind of
   content that must never depend on a real scroll event happening to
   become visible (see .reveal-up's own comment further down for why). */
.heading-lines .line-inner {
  animation: line-reveal 1s cubic-bezier(.16, .84, .44, 1) both;
  text-wrap: balance;
}

.heading-lines .line-mask:nth-child(2) .line-inner {
  animation-delay: .12s;
}

/* ---------- Scroll indicator ---------- */

/* Right-corner indicator: circular button with a down arrow that
   nudges downward on a loop. */
.scroll-down {
  position: absolute;
  right: clamp(20px, 4vw, 56px);
  bottom: clamp(28px, 4vh, 44px);
  z-index: 4;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  background: none;
  border: 1px solid var(--cream-faint);
  border-radius: 50%;
  color: var(--cream);
  cursor: pointer;
  transition: background .35s ease, color .35s ease, border-color .35s ease, opacity .6s ease;
}

.scroll-arrow {
  width: 22px;
  height: 22px;
  animation: scroll-nudge 1.8s cubic-bezier(.65, 0, .35, 1) infinite;
}

@keyframes scroll-nudge {
  0%, 100% {
    transform: translateY(-3px);
  }

  50% {
    transform: translateY(4px);
  }
}

.scroll-down:hover {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--navy-900);
}

/* ---------- Cookie banner ---------- */

.cookie-banner {
  position: absolute;
  left: clamp(20px, 4vw, 56px);
  bottom: clamp(28px, 4vh, 44px);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 20px;
  background: rgba(1, 38, 91, 0.65);
  backdrop-filter: blur(8px);
  border: 1px solid var(--cream-faint);
  border-radius: 40px;
  padding: 10px 12px 10px 22px;
  max-width: 360px;
}

.cookie-banner p {
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--cream-dim);
  line-height: 1.4;
  margin-bottom:0px;
}

.cookie-banner button {
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  z-index: 0;
  background: transparent;
  border: 1px solid var(--cream);
  color: var(--cream);
  border-radius: 30px;
  padding: 9px 20px;
  font-size: 11px;
  letter-spacing: 0.12em;
  transition: color .45s ease .05s;
}

.cookie-banner button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cream);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.65, 0, .35, 1);
}

.cookie-banner button:hover {
  color: var(--navy-900);
}

.cookie-banner button:hover::before {
  transform: scaleX(1);
}

.cookie-banner.hidden {
  display: none;
}

/* ---------- About ---------- */

/* Sits directly after the sticky hero in normal flow. As the page
   scrolls, this white section rises up and visually covers the
   pinned hero underneath it (hero: z-index 1, this: z-index 2). */
.about-section {
  position: relative;
  z-index: 2;
  /* Hero is position:fixed (absolute on phones), so it takes up zero
     space in normal flow -- this margin reserves that space so the page
     still scrolls through the whole hero before About begins. */
  margin-top: var(--hero-h);
  /* Near-opaque white wash keeps the grey -> navy word-fill readable
     over the photo instead of layering a separate wash element. */
  background:
    linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)),
    url('../assets/bg-4.png') no-repeat center center;
/* background:
linear-gradient(
  135deg,
  #F4F7FA 0%,
  #E9F0F6 50%,
  #F7F9FB 100%
); */
  background-size: cover;
  background-position: center;
  color: var(--navy-900);
  display: flex;
  align-items: center;
  padding: clamp(90px, 12vw, 150px) clamp(24px, 6vw, 80px);
}

.about-centered {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.about-eyebrow {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 32px;
}

.about-statement {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(22px, 3.2vw, 22px);
  line-height: 1.5;
  color: var(--navy-900);
  margin-bottom: 48px;
}

.about-word {
  display: inline-block;
}

/* Default is the light-background variant (navy outline/text, fills
   navy on hover) -- used on index.html's About teaser and about.html's
   "Explore Our Projects", both sitting on light sections. About's
   closing CTA sits on a dark navy band instead, so it adds
   .is-inverted below rather than this class assuming one background
   everywhere it's reused. */
.about-cta {
  --cta-fill: var(--navy-900);
  --cta-fill-text: var(--cream);
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  padding: 14px 26px;
  border: 1px solid var(--navy-900);
  border-radius: 0px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.1em;
  /* text-transform: uppercase; */
  color: var(--navy-900);
  transition: color .45s ease .05s;
}

.about-cta.is-inverted {
  --cta-fill: var(--cream);
  --cta-fill-text: var(--navy-900);
  border-color: var(--cream);
  color: var(--cream);
}

.about-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cta-fill);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.65, 0, .35, 1);
}

.about-cta:hover {
  color: var(--cta-fill-text);
}

.about-cta:hover::before {
  transform: scaleX(1);
}

.about-cta svg {
  width: 16px;
  height: 16px;
  transition: transform .4s cubic-bezier(.16, .84, .44, 1);
}

.about-cta:hover svg {
  transform: translateX(4px);
}

/* ---------- Villas (parallax background) ---------- */

.villas-section {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  overflow: hidden;
  background: var(--navy-900);
}

/* Oversized + inset so the parallax translate (GSAP, js/scriptv.js)
   never reveals an edge as it drifts; overflow:hidden on the section
   clips it back to the section's own bounds. */
.villas-bg {
  position: absolute;
  inset: -10% 0;
  background-size: cover;
  background-position: center;
}

.villas-wash {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(1, 15, 38, 0.4) 0%, rgba(1, 15, 38, 0.12) 45%, rgba(1, 15, 38, 0.55) 100%);
}

.villas-content {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(24px, 6vw, 80px);
  text-align: center;
}

/* Soft dark pool behind the copy so it holds up on bright photos. */
.villas-content::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 50% at 50% 50%, rgba(1, 15, 38, 0.62) 0%, rgba(1, 15, 38, 0) 100%);
  pointer-events: none;
}

.villas-heading {
  position: relative;
  max-width: 16ch;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(40px, 6.5vw, 96px);
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: #fff;
  text-shadow: 0 2px 24px rgba(1, 15, 38, 0.65), 0 1px 3px rgba(1, 15, 38, 0.5);
  text-wrap: balance;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s ease, transform 1s cubic-bezier(.16, .84, .44, 1);
}

.villas-heading.is-revealed {
  opacity: 1;
  transform: none;
}

/* Gold rule above and below the line */
.villas-heading::before,
.villas-heading::after {
  content: "";
  display: block;
  width: 64px;
  height: 1px;
  margin: 0 auto;
  background: var(--gold);
}

.villas-heading::before {
  margin-bottom: 28px;
}

.villas-heading::after {
  margin-top: 28px;
}

/* ---------- Projects (image + status rows, two columns) ---------- */

.projects-section {
  position: relative;
  z-index: 2;
  /* .projects-media starts at scale(1.06) before its reveal -- without
     this, that pushes past the screen edge and phones can pan sideways. */
  overflow-x: clip;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* background:
    linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)),
    url('../assets/bg-2.png') no-repeat center center; */
    /* background-color: #F3F5F8; */
  background:
    linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)),
    url('../assets/bg-44.png') no-repeat center center;
    background-size: cover;
  background-position: center;
  /* background:
linear-gradient(
  190deg,
  #F3F5F8 0%,
  #F0F2F6 50%,
  #E4E9F0 100%
); */
  color: var(--navy-900);
}

/* Left column: a stack of absolutely positioned images that push-slide
   between each other -- no separate overlay/curtain, so there's never
   a solid-colour layer visible mid-transition, only the photos
   themselves. Resting state (no class) sits off-screen to the right,
   ready to enter. Activating a row (js/scriptv.js) slides that image
   in from the right to 0% while the previously-active one is given
   .is-prev and slides out to the left; both move the same direction
   at the same rate so their visible portions are exact complements of
   each other at every instant -- one arrives exactly as fast as the
   other leaves, so there's no gap and no overlap between them. */
.projects-media {
  position: relative;
  overflow: hidden;
  min-height: 480px;
  opacity: 0;
  transform: scale(1.06) translateY(24px);
}

.projects-section.is-revealed .projects-media {
  animation: projects-media-in 1.1s cubic-bezier(.16, .84, .44, 1) forwards;
}

@keyframes projects-media-in {
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.projects-media-img {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-size: cover;
  background-position: center;
  transform: translateX(100%);
  transition: transform 1.5s cubic-bezier(.76, 0, .24, 1);
}

.projects-media-img.is-active {
  z-index: 2;
  transform: translateX(0%);
}

.projects-media-img.is-prev {
  z-index: 1;
  transform: translateX(-100%);
}

@keyframes projects-fade-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Projects: info column ---------- */

.projects-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(64px, 8vw, 110px) clamp(28px, 6vw, 90px);
}

.projects-eyebrow {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
  opacity: 0;
  transform: translateY(14px);
}

.projects-section.is-revealed .projects-eyebrow {
  animation: projects-fade-up .8s cubic-bezier(.16, .84, .44, 1) forwards;
}

.projects-heading {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(34px, 3vw, 58px);
  line-height: 1.12;
  color: var(--navy-900);
  margin-bottom: 21px;
}

/* Same mask + slide-up reveal as the hero headline (.line-mask /
   .line-inner, defined near the hero styles), just gated to this
   section scrolling into view instead of the page-load handoff. */
.projects-section.is-revealed .projects-heading .line-inner {
  animation: line-reveal 1.1s cubic-bezier(.16, .84, .44, 1) .1s forwards;
}

.projects-heading .line-mask:nth-child(2) .line-inner {
  animation-delay: .22s;
}

.projects-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  width: clamp(140px, 16vw, 200px);
  margin-bottom: 26px;
  transform: scaleX(0);
  transform-origin: left;
}

.projects-section.is-revealed .projects-divider {
  animation: divider-in .8s cubic-bezier(.65, 0, .35, 1) .35s forwards;
}

@keyframes divider-in {
  to {
    transform: scaleX(1);
  }
}

.projects-divider::before,
.projects-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--gold-dim);
}

.projects-divider span {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
}

.projects-copy {
  font-family: var(--font-display);
  font-size: clamp(14px, 1.1vw, 17px);
  line-height: 1.7;
  color: var(--navy-700);
  max-width: 440px;
  margin-bottom: clamp(28px, 4vw, 28px);
  opacity: 0;
  transform: translateY(14px);
}

.projects-section.is-revealed .projects-copy {
  animation: projects-fade-up .8s cubic-bezier(.16, .84, .44, 1) .45s forwards;
}

/* ---------- Projects: status rows ---------- */

.projects-tabs {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(1, 15, 38, 0.12);
  margin-bottom: clamp(28px, 4vw, 28px);
}

.projects-tab {
  position: relative;
  display: flex;
  text-decoration: none;
  align-items: center;
  gap: clamp(16px, 2vw, 26px);
  width: 100%;
  padding: clamp(10px, 2.4vw, 10px) 0;
  border: none;
  border-bottom: 1px solid rgba(1, 15, 38, 0.12);
  background: none;
  text-align: left;
  color: var(--navy-700);
  opacity: 0;
  transform: translateY(18px);
}

.projects-section.is-revealed .projects-tab {
  animation: projects-fade-up .8s cubic-bezier(.16, .84, .44, 1) forwards;
}

.projects-tabs .projects-tab:nth-child(1) { animation-delay: .55s; }
.projects-tabs .projects-tab:nth-child(2) { animation-delay: .68s; }
.projects-tabs .projects-tab:nth-child(3) { animation-delay: .81s; }

.projects-tab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: clamp(52px, 5vw, 52px);
  height: clamp(52px, 5vw, 52px);
  border-radius: 50%;
  border: 1px solid var(--gold-dim);
  color: var(--gold);
  transition: background .4s ease, color .4s ease, border-color .4s ease;
}

.projects-tab-icon svg {
  width: 44%;
  height: 44%;
}

.projects-tab:hover .projects-tab-icon,
.projects-tab.is-active .projects-tab-icon {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}

.projects-tab-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.projects-tab-title {
  font-family: var(--font-display);
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 300;
  letter-spacing: 0.1em;
  /* text-transform: uppercase; */
  color: var(--navy-900);
  transition: transform .4s cubic-bezier(.65, 0, .35, 1);
}

.projects-tab:hover .projects-tab-title,
.projects-tab.is-active .projects-tab-title {
  transform: translateX(6px);
}

/* Names the actual project(s) behind each stage row, so the homepage
   says "Srivari Meadows" rather than only "Ongoing Projects". */
.projects-tab-sub {
  font-family: var(--font-display);
  font-size: clamp(11.5px, 0.9vw, 12.5px);
  font-weight: 300;
  letter-spacing: 0.06em;
  color: rgba(1, 15, 38, .5);
  transition: transform .4s cubic-bezier(.65, 0, .35, 1), color .4s ease;
}

.projects-tab:hover .projects-tab-sub,
.projects-tab.is-active .projects-tab-sub {
  transform: translateX(6px);
  color: var(--gold);
}

.projects-tab-index {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(24px, 2.6vw, 34px);
  color: var(--gold-dim);
  transition: color .4s ease;
}

.projects-tab-index i {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--gold-dim);
  transition: width .4s cubic-bezier(.65, 0, .35, 1), background .4s ease;
}

.projects-tab:hover .projects-tab-index,
.projects-tab.is-active .projects-tab-index {
  color: var(--gold);
}

.projects-tab:hover .projects-tab-index i,
.projects-tab.is-active .projects-tab-index i {
  width: 38px;
  background: var(--gold);
}

/* Matches .about-cta's arrow-nudge feel but as a plain text link with
   a trailing line + arrowhead instead of a filled pill button, to sit
   quietly under the status rows the way the reference treats it. */
.projects-cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.16em;
  /* text-transform: uppercase; */
  color: var(--gold);
  opacity: 0;
  transform: translateY(14px);
}

.projects-section.is-revealed .projects-cta {
  animation: projects-fade-up .8s cubic-bezier(.16, .84, .44, 1) .95s forwards;
}

.projects-cta-line {
  position: relative;
  width: 70px;
  height: 1px;
  background: var(--gold);
  transition: width .4s cubic-bezier(.65, 0, .35, 1);
}

.projects-cta-line::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-top: 1px solid var(--gold);
  border-right: 1px solid var(--gold);
  transform: translateY(-50%) rotate(45deg);
}

.projects-cta:hover .projects-cta-line {
  width: 92px;
}

@media (max-width: 900px) {
  .projects-section {
    grid-template-columns: 1fr;
  }

  .projects-media {
    min-height: 60vh;
  }

  .projects-info {
    padding: clamp(48px, 10vw, 72px) clamp(24px, 6vw, 48px);
  }
}

@media (max-width: 560px) {
  .projects-tab {
    flex-wrap: wrap;
  }

  .projects-tab-index {
    margin-left: calc(clamp(52px, 5vw, 64px) + clamp(16px, 2vw, 26px));
  }
}

/* ---------- Contact (feature strip + form) ---------- */

.contact-section {
  position: relative;
  z-index: 2;
  background: #fbf7f1;
  /* background:
linear-gradient(
  135deg,
  #F4F7FA 0%,
  #E9F0F6 50%,
  #F7F9FB 100%
); */
}

.contact-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(28px, 3.5vw, 44px) clamp(24px, 5vw, 64px);
  opacity: 0;
  transform: translateY(16px);
}

.contact-section.is-revealed .contact-features {
  animation: projects-fade-up .8s cubic-bezier(.16, .84, .44, 1) forwards;
}

.contact-feature {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 0 clamp(14px, 2vw, 26px);
  border-left: 1px solid rgba(1, 15, 38, 0.12);
}

.contact-feature:first-child {
  padding-left: 0;
  border-left: none;
}

.contact-feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  color: var(--gold);
}

.contact-feature-icon svg {
  width: 100%;
  height: 100%;
}

.contact-feature-title {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--gold);
  margin-bottom: 6px;
  font-weight: 600;
}

.contact-feature-desc {
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.55;
  color: var(--navy-700);
  font-weight: 300;
  margin-bottom: 0px;
}

.contact-main {
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: #f2ece2;
  /* display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: clamp(32px, 5vw, 72px); */
  padding: clamp(56px, 8vw, 100px) clamp(24px, 5vw, 64px);
}

.contact-main-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 55%, black 82%);
  mask-image: linear-gradient(to right, transparent 0%, transparent 55%, black 82%);
}

.contact-info {
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: translateY(20px);
}

.contact-section.is-revealed .contact-info {
  animation: projects-fade-up .9s cubic-bezier(.16, .84, .44, 1) .1s forwards;
}

.contact-heading {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(26px, 3vw, 40px);
  letter-spacing: 0.01em;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--navy-900);
  max-width: 480px;
  margin-bottom: 32px;
}

.contact-heading-accent {
  color: var(--gold);
}

.contact-details {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding:0px;
}

.contact-detail {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--navy-900);
}

.contact-detail a {
  /* The long email address would otherwise push past narrow (320px)
     screens -- let it wrap instead. */
  min-width: 0;
  overflow-wrap: anywhere;
  transition: color .3s ease;
}

.contact-detail a:hover {
  color: var(--gold);
}

.contact-detail-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  color: var(--gold);
}

.contact-detail-icon svg {
  width: 60%;
  height: 60%;
}

.contact-form {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 10px;
  padding: clamp(24px, 3vw, 34px);
  opacity: 0;
  transform: translateY(20px);
}

.contact-section.is-revealed .contact-form {
  animation: projects-fade-up .9s cubic-bezier(.16, .84, .44, 1) .22s forwards;
}

.contact-input {
  width: 100%;
  border: none;
  border-bottom: 1px solid rgba(1, 15, 38, 0.15);
  background: transparent;
  padding: 10px 2px;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--navy-900);
  transition: border-color .3s ease;
}

.contact-input::placeholder {
  color: var(--navy-900);
}

.contact-input:focus {
  outline: none;
  border-color: var(--gold);
}

.contact-textarea {
  resize: vertical;
  min-height: 90px;
}

.contact-submit {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding: 14px 28px;
  border: none;
  border-radius: 6px;
  background: var(--cream);
  color: var(--navy-900);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.1em;
  /* text-transform: uppercase; */
  transition: background .3s ease, transform .3s cubic-bezier(.65, 0, .35, 1);
}

.contact-submit:hover {
  background: var(--navy-900);
  color: var(--cream)
}

.contact-submit svg {
  width: 16px;
  height: 16px;
  transition: transform .4s cubic-bezier(.16, .84, .44, 1);
}

.contact-submit:hover svg {
  transform: translateX(4px);
}

.contact-submit:disabled {
  opacity: .6;
  cursor: wait;
}

@media (max-width: 900px) {
  .contact-features {
    grid-template-columns: 1fr 1fr;
    row-gap: 28px;
  }

  .contact-feature:nth-child(3) {
    border-left: none;
  }

  .contact-main {
    grid-template-columns: 1fr;
  }

  .contact-main-bg {
    -webkit-mask-image: linear-gradient(to bottom, transparent 55%, black 100%);
    mask-image: linear-gradient(to bottom, transparent 55%, black 100%);
  }
}

@media (max-width: 560px) {
  .contact-features {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }

  .contact-feature {
    border-left: none;
    padding-left: 0;
  }
}

/* ---------- Contact Page ---------- */

.contact-page-main {
  position: relative;
  z-index: 2;
  padding: clamp(56px, 8vw, 100px) clamp(24px, 5vw, 64px);
  /* background: linear-gradient(135deg, #F4F7FA 0%, #E9F0F6 50%, #F7F9FB 100%); */
    background:
    linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)),
    url('../assets/bg-4.png') no-repeat center center;
    background-size: cover;
  background-position: center;
background-attachment: fixed;
}

.contact-page-row {
  position: relative;
  z-index: 1;
  row-gap: clamp(32px, 5vw, 56px);
  align-items: stretch;
}

.contact-card-head {
  margin-bottom: 6px;
}

.contact-card-eyebrow {
  display: block;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--gold);
  margin-bottom: 10px;
}

.contact-card-title {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(21px, 2.2vw, 27px);
  color: var(--navy-900);
}

.contact-card-sub {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(1, 15, 38, .58);
  max-width: 34ch;
  margin-top: 8px;
}

/* Scoped to this page only (via the .contact-page-row ancestor) so the
   homepage's own reuse of .contact-form/.contact-input/.contact-textarea
   is untouched -- plain, unboxed panels (no card background/border/
   shadow) sitting directly on the page gradient, each child animating
   in on its own as the section scrolls into view instead of the whole
   panel fading in as one block. */
.contact-page-row .contact-form {
  position: relative;
  height: 100%;
  padding: 0;
  background: none;
  border-radius: 0;
  opacity: 1;
  transform: none;
  animation: none;
}

.contact-map-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
}

.contact-page-row .contact-form>*,
.contact-map-panel>* {
  opacity: 0;
  transform: translateY(18px);
}

/* Longhand on purpose: the shorthand form of `animation` resets every
   sub-property it doesn't mention (including animation-delay) back to
   its initial value, and this rule's higher specificity would otherwise
   stomp the per-child animation-delay rules below it. */
.contact-section.is-revealed .contact-page-row .contact-form>*,
.contact-section.is-revealed .contact-map-panel>* {
  animation-name: contact-field-in;
  animation-duration: .7s;
  animation-timing-function: cubic-bezier(.16, .84, .44, 1);
  animation-fill-mode: forwards;
}

.contact-page-row .contact-form> :nth-child(1),
.contact-map-panel> :nth-child(1) {
  animation-delay: .05s;
}

.contact-page-row .contact-form> :nth-child(2),
.contact-map-panel> :nth-child(2) {
  animation-delay: .16s;
}

.contact-page-row .contact-form> :nth-child(3),
.contact-map-panel> :nth-child(3) {
  animation-delay: .27s;
}

.contact-page-row .contact-form> :nth-child(4),
.contact-map-panel> :nth-child(4) {
  animation-delay: .38s;
}

.contact-page-row .contact-form> :nth-child(5) {
  animation-delay: .49s;
}

@keyframes contact-field-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* The individual detail rows cascade in slightly after the list itself
   has appeared, for a second layer of stagger. */
.contact-details-card>.contact-detail {
  opacity: 0;
  transform: translateY(14px);
}

.contact-section.is-revealed .contact-details-card>.contact-detail {
  animation-name: contact-field-in;
  animation-duration: .6s;
  animation-timing-function: cubic-bezier(.16, .84, .44, 1);
  animation-fill-mode: forwards;
}

.contact-details-card>.contact-detail:nth-child(1) {
  animation-delay: .55s;
}

.contact-details-card>.contact-detail:nth-child(2) {
  animation-delay: .63s;
}

.contact-details-card>.contact-detail:nth-child(3) {
  animation-delay: .71s;
}

.contact-input-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.contact-field {
  position: relative;
}

.contact-field-icon {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  display: flex;
  color: var(--gold);
  pointer-events: none;
}

.contact-field-icon svg {
  width: 100%;
  height: 100%;
}

.contact-field-textarea .contact-field-icon-top {
  top: 15px;
  transform: none;
}

.contact-page-row .contact-field .contact-input {
  padding-left: 42px;
}

/* The textarea is wrapped in .contact-field-textarea (for the icon's
   positioning context), so flex:1 has to live on that wrapper -- the
   textarea itself is no longer a direct flex child of .contact-form. */
.contact-page-row .contact-field-textarea {
  display: flex;
  flex: 1;
}

.contact-page-row .contact-input {
  width: 100%;
  border: none;
  border-bottom: 1px solid rgba(1, 15, 38, .2);
  border-radius: 0;
  background: none;
  padding: 12px 4px;
  transition: border-color .3s ease;
}

.contact-page-row .contact-input:focus {
  border-color: var(--gold);
  background: none;
  box-shadow: none;
}

.contact-page-row .contact-submit {
  width: 100%;
  justify-content: center;
  margin-top: 6px;
  padding: 16px 28px;
  border-radius: 10px;
  box-shadow: 0 18px 34px -16px rgba(181, 142, 86, .55);
}

.contact-page-row .contact-submit:hover {
  box-shadow: 0 18px 34px -14px rgba(1, 15, 38, .35);
}

.contact-map-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 200px;
  border-radius: 12px;
  overflow: hidden;
}

/* Oversized + recentred so js/scriptv.js can drift it slightly on scroll
   (scrub parallax) without ever exposing an edge -- the frame's own
   overflow:hidden above clips it back down to the aspect-ratio box. */
.contact-map-frame iframe {
  position: absolute;
  left: 0;
  right: 0;
  top: -15%;
  width: 100%;
  height: 130%;
  border: 0;
}

.contact-details-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 16px;
  border-top: 1px solid rgba(1, 15, 38, .08);
}

.contact-details-card .contact-detail {
  padding: 9px 10px;
  margin: 0 -10px;
  border-radius: 10px;
  transition: background .3s ease;
}

.contact-details-card .contact-detail:hover {
  background: rgba(181, 142, 86, .1);
}

.contact-details-card .contact-detail-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(181, 142, 86, .1);
  box-shadow: inset 0 0 0 1px rgba(181, 142, 86, .2);
}

@media (max-width: 992px) {
  .contact-map-frame {
    aspect-ratio: 16 / 10;
    max-height: 220px;
  }
}

@media (max-width: 560px) {
  .contact-input-row {
    grid-template-columns: 1fr;
  }
}

/* ---------- Blog Page ---------- */

.blog-listing {
  position: relative;
  z-index: 2;
  padding: clamp(64px, 8vw, 110px) clamp(24px, 5vw, 64px) clamp(80px, 10vw, 130px);
  /* background: linear-gradient(135deg, #F4F7FA 0%, #E9F0F6 50%, #F7F9FB 100%); */
    background:
    linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)),
    url('../assets/bg-4.png') no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3vw, 44px);
  max-width: 1280px;
  margin: 0 auto;
}

/* Each card fades/slides in on its own as it crosses into view (see
   js/scriptv.js's IntersectionObserver) rather than the whole grid
   appearing as one block -- nth-child gives the three-across stagger. */
.blog-card {
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(26px);
}

.blog-card.is-visible {
  animation-name: projects-fade-up;
  animation-duration: .8s;
  animation-timing-function: cubic-bezier(.16, .84, .44, 1);
  animation-fill-mode: forwards;
}

.blog-card:nth-child(3n+1) {
  animation-delay: 0s;
}

.blog-card:nth-child(3n+2) {
  animation-delay: .12s;
}

.blog-card:nth-child(3n+3) {
  animation-delay: .24s;
}

/* Second batch starts fully out of flow -- js/scriptv.js removes this
   class (unhiding the card) once the sentinel below batch one is
   scrolled near, then hands it to the same reveal observer above. */
.blog-card-lazy {
  display: none;
}

.blog-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-card-media {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 20px;
}

.blog-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.16, .84, .44, 1);
}

.blog-card-media:hover img {
  transform: scale(1.06);
}

.blog-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

.blog-card-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gold-dim);
}

.blog-card-date {
  color: rgba(1, 15, 38, .45);
  text-transform: none;
  letter-spacing: 0.02em;
}

.blog-card-title {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.32;
  color: var(--navy-900);
  margin-bottom: 10px;
}

.blog-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--navy-900);
  transition: color .3s ease;
}

.blog-card-link svg {
  width: 15px;
  height: 15px;
  transition: transform .4s cubic-bezier(.16, .84, .44, 1);
}

.blog-card-link:hover {
  color: var(--gold);
}

.blog-card-link:hover svg {
  transform: translateX(4px);
}

.blog-sentinel {
  height: 1px;
}

.blog-loader {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
  transition: opacity .3s ease, margin-top .3s ease;
}

.blog-loader.is-active {
  height: auto;
  opacity: 1;
  margin-top: clamp(36px, 5vw, 56px);
}

.blog-loader-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  animation: blog-loader-bounce 1s ease-in-out infinite;
}

.blog-loader-dot:nth-child(2) {
  animation-delay: .15s;
}

.blog-loader-dot:nth-child(3) {
  animation-delay: .3s;
}

@keyframes blog-loader-bounce {

  0%,
  80%,
  100% {
    transform: translateY(0);
    opacity: .4;
  }

  40% {
    transform: translateY(-6px);
    opacity: 1;
  }
}

@media (max-width: 992px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .blog-card:nth-child(3n+3) {
    animation-delay: .12s;
  }
}

@media (max-width: 640px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }

  .blog-card:nth-child(n) {
    animation-delay: 0s;
  }
}

/* ---------- Blog Post Page ---------- */

.blog-post {
  position: relative;
  z-index: 2;
  padding: clamp(56px, 8vw, 100px) clamp(24px, 5vw, 64px) clamp(80px, 10vw, 120px);
   background:
    linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)),
    url('../assets/bg-4.png') no-repeat center center;
    background-size: cover;
  background-position: center;
  background-attachment: fixed;
  /* background: linear-gradient(135deg, #F4F7FA 0%, #E9F0F6 50%, #F7F9FB 100%); */
}

.blog-post-inner {
  max-width: 760px;
  margin: 0 auto;
}

.blog-post-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: rgba(1, 15, 38, .6);
  margin-bottom: clamp(28px, 4vw, 40px);
  transition: color .3s ease;
}

.blog-post-back svg {
  width: 15px;
  height: 15px;
}

.blog-post-back:hover {
  color: var(--gold);
}

.blog-post-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}

.blog-post-title {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.22;
  color: var(--navy-900);
  margin-bottom: clamp(28px, 4vw, 40px);
}

.blog-post-media {
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: clamp(32px, 4vw, 48px);
}

.blog-post-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-post-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.blog-post-body p {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.8;
  color: rgba(1, 15, 38, .72);
}

.blog-post-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: clamp(48px, 6vw, 72px);
  padding-top: clamp(28px, 4vw, 40px);
  border-top: 1px solid rgba(1, 15, 38, .1);
}

.blog-post-cta-label {
  font-family: var(--font-sans);
  font-size: 20px;
  color: var(--navy-900);
}

@media (max-width: 560px) {
  .blog-post-cta {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- Projects Page ---------- */

.projects-listing {
  position: relative;
  z-index: 2;
  padding: clamp(64px, 8vw, 110px) clamp(24px, 5vw, 64px) clamp(80px, 10vw, 130px);
  background:
    linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)),
    url('../assets/bg-4.png') no-repeat center center;
  background-size: cover;
  background-position: center;
}

.projects-listing-intro {
  max-width: 680px;
  margin: 22px auto 0;
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.75;
  color: rgba(1, 15, 38, .6);
}

/* ---- Stage filter ---- */

.projects-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(8px, 1.5vw, 16px);
  margin: 0 auto clamp(36px, 4vw, 54px);
}

.projects-filter-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  border: 1px solid rgba(1, 15, 38, .14);
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--navy-900);
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}

.projects-filter-tab:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.projects-filter-tab.is-active {
  background: var(--navy-900);
  border-color: var(--navy-900);
  color: var(--cream);
}

/* Count is written in by js/scriptv.js so it can never contradict the
   number of cards actually in the group. */
.projects-filter-count {
  font-size: 11px;
  letter-spacing: 0.06em;
  opacity: .55;
}

.projects-filter-count:empty {
  display: none;
}

/* ---- Stage groups ---- */

/* Unlabelled wrappers -- one per stage, exactly one visible at a time.
   They exist so a stage holding a single project can widen it into the
   feature card below; the active filter tab is the only stage label the
   page shows. */
.projects-groups {
  max-width: 1280px;
  margin: 0 auto;
}

.projects-group[hidden] {
  display: none;
}

/* auto-fit (not a fixed 3-track grid) so a stage holding two projects
   splits the row in half rather than leaving a hole on the right, and a
   stage holding one gets the full-width feature treatment below. */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(28px, 3vw, 40px);
}

.projects-empty {
  font-family: var(--font-display);
  font-size: 15px;
  text-align: center;
  color: rgba(1, 15, 38, .55);
  padding: 40px 0;
}

.projects-empty a {
  color: var(--gold);
  border-bottom: 1px solid currentColor;
}

/* Toggled entirely from js/scriptv.js -- transition (not a one-shot
   keyframe animation like the blog cards) so repeatedly switching
   filters interpolates smoothly every time without needing a forced-
   reflow reset between toggles. */
.project-card {
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .5s cubic-bezier(.16, .84, .44, 1), transform .5s cubic-bezier(.16, .84, .44, 1);
  transition-delay: var(--card-delay, 0s);
}

.project-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.project-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 20px;
}

.project-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.16, .84, .44, 1);
}

.project-card-media:hover img {
  transform: scale(1.06);
}

.project-card-status {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 7px 16px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.project-card[data-status="ongoing"] .project-card-status {
  background: rgba(181, 142, 86, .92);
  color: var(--navy-900);
}

.project-card[data-status="upcoming"] .project-card-status {
  background: rgba(242, 227, 186, .92);
  color: var(--navy-900);
}

.project-card[data-status="completed"] .project-card-status {
  background: rgba(1, 15, 38, .88);
  color: var(--cream);
}

.project-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.project-card-location {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--gold);
  margin-bottom: 10px;
}

.project-card-location svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.project-card-title {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 21px;
  color: var(--navy-900);
  margin-bottom: 8px;
}

.project-card-desc {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(1, 15, 38, .6);
  margin-bottom: 18px;
}

/* Spec table -- the label/value rows every Hyderabad developer's project
   card carries (configuration, area, extent, status). Hairline rules
   rather than a boxed table so it stays quiet next to the photograph. */
.project-card-specs {
  margin: 0 0 16px;
  border-top: 1px solid rgba(1, 15, 38, .1);
}

.project-spec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(1, 15, 38, .1);
}

.project-spec dt {
  font-family: var(--font-display);
  font-size: 11.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(1, 15, 38, .45);
  font-weight: 400;
  flex-shrink: 0;
}

.project-spec dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--navy-900);
  text-align: right;
}

.project-card-rera {
  font-family: var(--font-display);
  font-size: 11.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(1, 15, 38, .45);
  margin-bottom: 18px;
}

/* Cards with two calls to action (an external project site plus the
   enquiry link) share one row; the auto margin that used to sit on the
   single link moves up to this wrapper so both stay pinned to the
   bottom of the card body. */
.project-card-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 24px;
  margin-top: auto;
}

.project-card-links .project-card-link {
  margin-top: 0;
}

.project-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--navy-900);
  transition: color .3s ease;
}

.project-card-link svg {
  width: 15px;
  height: 15px;
  transition: transform .4s cubic-bezier(.16, .84, .44, 1);
}

.project-card-link:hover {
  color: var(--gold);
}

.project-card-link:hover svg {
  transform: translateX(4px);
}

.project-card-link-muted {
  color: rgba(1, 15, 38, .6);
}

/* A stage with a single project (Ongoing and Upcoming today) would
   otherwise sit as one lonely third of a row. :only-child rather than a
   hand-applied modifier class, so it corrects itself the moment a
   second card is added to that group. */
@media (min-width: 861px) {
  .projects-grid > .project-card:only-child {
    flex-direction: row;
    align-items: stretch;
    gap: clamp(32px, 4vw, 56px);
  }

  .projects-grid > .project-card:only-child .project-card-media {
    flex: 0 0 54%;
    aspect-ratio: 16 / 11;
    margin-bottom: 0;
  }

  .projects-grid > .project-card:only-child .project-card-body {
    justify-content: center;
    padding: 6px 0;
  }

  .projects-grid > .project-card:only-child .project-card-title {
    font-size: 27px;
  }

  .projects-grid > .project-card:only-child .project-card-desc {
    font-size: 15px;
    max-width: 46ch;
  }
}

.projects-listing-cta {
  max-width: 1280px;
  margin: clamp(64px, 8vw, 104px) auto 0;
  padding-top: clamp(36px, 4vw, 56px);
  border-top: 1px solid rgba(1, 15, 38, .1);
  text-align: center;
}

.projects-listing-cta p {
  font-family: var(--font-display);
  font-size: 15px;
  color: rgba(1, 15, 38, .6);
  margin-bottom: 18px;
}

/* The homepage .projects-cta starts at opacity:0 and is animated in by
   .projects-section.is-revealed -- a hook that doesn't exist on this
   page, so the shared base state has to be undone here. */
.projects-listing-cta .projects-cta {
  align-self: center;
  opacity: 1;
  transform: none;
  color: var(--navy-900);
}

.projects-listing-cta .projects-cta-line,
.projects-listing-cta .projects-cta-line::after {
  background: var(--navy-900);
  border-color: var(--navy-900);
}

.projects-listing-cta .projects-cta:hover {
  color: var(--gold);
}

.projects-listing-cta .projects-cta:hover .projects-cta-line {
  background: var(--gold);
}

.projects-listing-cta .projects-cta:hover .projects-cta-line::after {
  border-color: var(--gold);
}

@media (max-width: 640px) {
  .projects-filter-tab {
    padding: 10px 18px;
    font-size: 12px;
  }
}

/* Fit the three filter tabs on one row on phones instead of leaving
   "Completed" alone on a second line (still wraps on the very
   narrowest screens rather than overflowing). */
@media (max-width: 420px) {
  .projects-filter-tabs {
    gap: 6px;
  }

  .projects-filter-tab {
    padding: 9px 9px;
    gap: 5px;
    font-size: 11.5px;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }
}

@media (max-width: 640px) {

  .project-spec {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .project-spec dd {
    text-align: left;
  }
}

/* ---------- Footer ---------- */

/* Same villa photograph as the Villas section's parallax background --
   reused here (fixed, not scrolling) with a heavier navy wash so the
   footer reads as an extension of that imagery instead of a flat plate
   of solid colour, while keeping the cream/gold text fully legible. */
.site-footer {
  position: relative;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(1, 15, 38, 0.75) 0%, rgba(1, 15, 38, 0.85) 55%, rgba(1, 15, 38, 0.94) 100%),
    url('../assets/villas_bg.webp');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: var(--cream);
  padding: clamp(48px, 6vw, 72px) clamp(24px, 6vw, 64px) 0;
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(24px, 4vw, 48px);
  max-width: 1400px;
  margin: 0 auto;
  padding-bottom: clamp(40px, 6vw, 64px);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  gap: 14px;
}

.footer-links a {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.12em;
  /* text-transform: uppercase; */
  color: var(--cream-dim);
  width: fit-content;
  transition: color .3s ease;
}

.footer-links a:hover {
  color: var(--gold);
}

.footer-logo {
  display: block;
}

.footer-logo img {
  height: clamp(40px, 6vw, 58px);
  width: auto;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  text-align: right;
  padding-left: clamp(60px, 8vw, 100px);
}

.footer-contact-item {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--cream-dim);
  transition: color .3s ease;
  font-weight: 300;
}

a.footer-contact-item:hover {
  color: var(--gold);
}

.footer-contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  color: var(--gold);
}

.footer-contact-icon svg {
  width: 60%;
  height: 60%;
}

.footer-social {
  display: flex;
  gap: 12px;
  margin-top: 6px;
}

.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--cream-faint);
  color: var(--cream-dim);
  transition: color .3s ease, background .3s ease, border-color .3s ease, transform .3s ease;
}

.footer-social-link svg {
  width: 16px;
  height: 16px;
}

.footer-social-link:hover {
  color: var(--navy-900);
  background: var(--gold);
  border-color: var(--gold);
  transform: translateY(-2px);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 22px 0;
  border-top: 1px solid rgba(242, 227, 186, 0.14);
}

.footer-copyright,
.footer-credit {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--cream-faint);
  margin-bottom:0px;
}

.footer-credit a {
  color: var(--cream-dim);
  border-bottom: 1px solid transparent;
  transition: color .3s ease, border-color .3s ease;
}

.footer-credit a:hover {
  color: var(--gold);
  border-color: var(--gold);
}

@media (max-width: 700px) {
  /* background-attachment:fixed repaints on every scroll frame and has
     patchy support on iOS Safari -- not worth it at this size, plain
     scroll-with-page still shows the same image. */
  .site-footer {
    background-attachment: scroll;
  }

  /* Single left-aligned column on mobile: logo + social, links, then
     contact, each starting from the same left edge. */
  .footer-top {
    grid-template-columns: 1fr;
    justify-items: start;
    text-align: left;
  }

  .footer-brand {
    align-items: flex-start;
    order: 1;
  }

  .footer-links {
    align-items: flex-start;
    order: 2;
  }

  .footer-contact {
    align-items: flex-start;
    text-align: left;
    padding-left: 0;
    order: 3;
  }

  /* Icon on the left, and pinned to the first line so it stays put
     when the address wraps onto several lines. */
  .footer-contact-item {
    flex-direction: row;
    align-items: flex-start;
    line-height: 26px;
  }

  .footer-social {
    justify-content: flex-start;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

/* ---------- Fixed Utility Buttons ---------- */
/* Both live as siblings right after </footer> in js/footer.js's own
   markup (position:fixed makes their DOM location irrelevant to where
   they render, so there's no need for a separate injection point) and
   so appear identically on every page. */

.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: var(--navy-900);
  color: var(--cream);
  box-shadow: 0 10px 26px rgba(1, 15, 38, .28);
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease, background .3s ease, color .3s ease;
}

.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.back-to-top:hover {
  background: var(--gold);
  color: var(--navy-900);
}

.back-to-top svg {
  width: 18px;
  height: 18px;
}

.enquiry-tab {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 22px 12px;
  background: var(--navy-900);
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.12em;
  /* vertical-rl on its own reads top-to-bottom; rotating the whole box
     180deg is the standard way to flip that to the more familiar
     bottom-to-top reading direction. A 180deg turn about the box's own
     centre doesn't move its footprint (so top:50%/right:0 positioning
     and the hover padding-right nudge both still land correctly), but
     it does flip which physical corner/edge is which -- border-radius
     and box-shadow below are written pre-flipped so they land right
     side up once rotated. */
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: translateY(-50%) rotate(180deg);
  border-radius: 0 8px 8px 0;
  box-shadow: 8px -8px 26px rgba(1, 15, 38, .22);
  transition: background .3s ease, color .3s ease, padding-right .3s ease;
}

.enquiry-tab:hover {
  background: var(--gold);
  color: var(--navy-900);
  padding-right: 18px;
}

@media (max-width: 640px) {
  .back-to-top {
    right: 16px;
    bottom: 16px;
    width: 42px;
    height: 42px;
  }

  .enquiry-tab {
    padding: 12px 14px 12px 16px;
    font-size: 12px;
  }
}

/* ---------- About Page ---------- */

/* Reusable fade/slide-up entrance, playing automatically once as the
   page loads -- deliberately NOT gated behind a scroll position or a
   JS-added class (that was tried first and reverted: any renderer that
   produces the page without firing real scroll events -- a full-page
   screenshot tool, a link-preview bot, a PDF export -- never crosses
   the scroll threshold, so content below the first screen stayed
   permanently invisible). Pure CSS means it plays regardless of JS/
   GSAP even loading. Reuses the same keyframe as the Projects/Contact
   sections' own scroll-gated reveals. */
.reveal-up {
  opacity: 0;
  transform: translateY(28px);
  animation: projects-fade-up .9s cubic-bezier(.16, .84, .44, 1) both;
}

/* Shared eyebrow/heading/divider, used across every About section
   below instead of one-off per-section variants. */
.section-eyebrow {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}

.section-heading {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(30px, 3.2vw, 50px);
  line-height: 1.16;
  color: var(--navy-900);
  margin-bottom: 20px;
}

.section-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  width: clamp(120px, 14vw, 180px);
  margin-bottom: 8px;
}

.section-divider::before,
.section-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--gold-dim);
}

.section-divider span {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
}

.about-section-head {
  max-width: 640px;
  margin: 0 auto clamp(40px, 5vw, 64px);
  text-align: center;
}

.about-section-head .section-divider {
  margin: 0 auto 8px;
}

/* ---------- About: banner ---------- */

/* Designed at a 1920x500 guideline -- 26vw of a 1920px viewport is
   500px, scaling proportionally down to the 320px floor on narrow
   screens instead of just clamping height and letting the crop drift. */
.page-banner {
  position: relative;
  height: clamp(320px, 35vw, 500px);
  overflow: hidden;
  display: flex;
  /* Anchored to the bottom (not centered) so the content clears the
     fixed header sitting on top of the banner instead of colliding
     with the logo/nav row -- centering put a 500px-tall banner's
     vertical midpoint right under the header on shorter viewports. */
  align-items: flex-end;
  justify-content: center;
  padding-bottom: clamp(28px, 4vw, 48px);
  color: var(--cream);
}

.page-banner-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.1);
  animation: banner-zoom 9s cubic-bezier(.16, .84, .44, 1) forwards;
}

@keyframes banner-zoom {
  to {
    transform: scale(1);
  }
}

.page-banner-wash {
  position: absolute;
  inset: 0;
  /* Content is bottom-anchored (see .page-banner), so the wash never
     dips below ~.45 opacity anywhere the breadcrumb/eyebrow/title can
     sit -- a lighter mid-gradient stop here previously let a busy,
     pale building facade behind the text wash out its contrast. */
  background: linear-gradient(180deg, rgba(1, 15, 38, .5) 0%, rgba(1, 15, 38, .46) 35%, rgba(1, 15, 38, .82) 100%);
}

.page-banner-content {
  position: relative;
  z-index: 1;
  max-width: 760px;
  padding: 0 24px;
  text-align: center;
}

/* .page-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream-dim);
  margin-bottom: 18px;
}

.page-breadcrumb a {
  transition: color .3s ease;
}

.page-breadcrumb a:hover {
  color: var(--gold);
} */

.page-banner-eyebrow {
  display: block;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.24em;
  /* text-transform: uppercase; */
  color: var(--cream);
  margin-bottom: 16px;
}

.page-banner-title {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(32px, 4.5vw, 58px);
  line-height: 1.18;
  color: var(--cream);
  text-wrap: balance;
}

.page-banner-title .title-accent {
  color: var(--gold);
}

/* Lighter variant for banners using a pale/bright photo (e.g. the
   contact page's cream interior shot) -- the default dark wash above
   is tuned for moodier photography and just reads as grey sludge over
   a light one, so this swaps in a much thinner wash plus dark text
   instead of darkening the image to match the default text color. */
.page-banner-light .page-banner-wash {
  /* The header nav on this page is styled navy (see .page-light-header
     rules) rather than the usual cream, so the top no longer needs
     the extra darkening that cream text would require -- a uniformly
     light wash keeps the whole banner bright. */
  background: linear-gradient(180deg, rgba(1, 15, 38, .08) 0%, rgba(1, 15, 38, .04) 40%, rgba(1, 15, 38, .28) 100%);
}

.page-banner-light .page-banner-eyebrow {
  color: var(--gold);
}

.page-banner-light .page-banner-title {
  color: var(--navy-900);
}

/* ---------- About: story ---------- */

.about-story {
  position: relative;
  /* background: linear-gradient(135deg, #F4F7FA 0%, #E9F0F6 50%, #F7F9FB 100%); */
    background:
    linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)),
    url('../assets/bg-4.png') no-repeat center center;
    background-size: cover;
  background-position: center;
  color: var(--navy-900);
  padding: clamp(64px, 9vw, 120px) clamp(24px, 6vw, 80px);
}

.about-story-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

.about-story-copy p {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.75;
  color: var(--navy-700);
  margin-bottom: 20px;
  max-width: 540px;
}

.about-story-media {
  position: relative;
}

/* Clips the parallax img (js/scriptv.js scrubs it a little larger/
   offset than its frame as the section scrolls) without also clipping
   .about-story-badge below, which is deliberately positioned to
   overflow the frame's corner. */
.about-story-media-frame {
  overflow: hidden;
  border-radius: 2px;
}

.about-story-media img {
  width: 100%;
  height: clamp(320px, 34vw, 460px);
  object-fit: cover;
  display: block;
  will-change: transform;
}

.about-story-badge {
  position: absolute;
  left: -18px;
  bottom: -18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--navy-900);
  color: var(--cream);
  padding: 18px 26px;
  border: 1px solid var(--gold-dim);
}

.about-story-badge strong {
  font-family: var(--font-sans);
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 400;
  color: var(--gold);
  line-height: 1;
}

.about-story-badge span {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream-dim);
  margin-top: 6px;
}

/* ---------- About: stats strip ---------- */

.about-stats {
  position: relative;
  background: var(--navy-900);
  color: var(--cream);
  padding: clamp(36px, 4vw, 52px) clamp(24px, 6vw, 64px);
}

.about-stats-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
}

.about-stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 20px;
  border-left: 1px solid rgba(242, 227, 186, .14);
}

.about-stat:first-child {
  border-left: none;
}

.about-stat strong {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  color: var(--gold);
}

.about-stat span {
  display: block;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--cream-dim);
  margin-top: 6px;
}

/* ---------- About: what we do ---------- */

.about-whatwedo {
  position: relative;
  /* background: #fbf7f1; */
    background:
    linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)),
    url('../assets/bg-4.png') no-repeat center center;
    background-size: cover;
  background-position: center;
  color: var(--navy-900);
  padding: clamp(64px, 9vw, 120px) clamp(24px, 6vw, 80px);
}

.whatwedo-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3vw, 44px);
}

.whatwedo-card {
  background: var(--navy-900);
  border: 1px solid rgba(1, 15, 38, .08);
  padding: clamp(28px, 3vw, 40px) clamp(24px, 2.6vw, 32px);
  transition: transform .4s cubic-bezier(.16, .84, .44, 1), box-shadow .4s ease;
}

.whatwedo-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(1, 15, 38, .08);
}

.whatwedo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 22px;
  border: 1px solid var(--gold-dim);
  color: var(--gold);
}

.whatwedo-icon svg {
  width: 24px;
  height: 24px;
}

.whatwedo-card h3 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 21px;
  color: var(--cream);
  margin-bottom: 12px;
  padding:0px 10px 0px 0px;
}

.whatwedo-card p {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.7;
  color: #fff;
}

.whatwedo-grid .whatwedo-card:nth-child(2) {
  animation-delay: .12s;
}

.whatwedo-grid .whatwedo-card:nth-child(3) {
  animation-delay: .24s;
}

/* ---------- About: mission & vision ---------- */

.about-mission-vision {
  position: relative;
  overflow: hidden;
  background: var(--navy-900);
  color: var(--cream);
  padding: clamp(80px, 10vw, 140px) clamp(24px, 6vw, 80px);
}

/* Faint brand-mark watermark -- pure texture, never the only carrier
   of information, so it's safe to leave scroll-parallaxed (js/scriptv.js)
   without the visibility risk that shelved the old scroll-gated reveal
   elsewhere on this page. */
.mv-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(420px, 55vw, 820px);
  aspect-ratio: 1 / 2;
  background: url('../assets/logo_symbol_one.png') no-repeat center / contain;
  opacity: 0.05;
  transform: translate(-50%, -50%);
  pointer-events: none;
  will-change: transform;
}

.mv-head {
  position: relative;
  max-width: 640px;
  margin: 0 auto clamp(48px, 6vw, 76px);
  text-align: center;
}

.mv-head .section-heading {
  color: var(--cream);
}

.mv-head .section-divider {
  margin: 0 auto 8px;
}

.mv-grid {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
}

/* Center hairline between the two panels -- drawn in on scroll
   (js/scriptv.js scrubs a uniform `scale`, not scaleY/scaleX, so the
   same tween works whether this is the vertical line here or the
   horizontal one it becomes at the stacked mobile breakpoint below). */
.mv-divider {
  width: 1px;
  height: clamp(160px, 20vw, 240px);
  background: linear-gradient(180deg, transparent, var(--gold-dim) 20%, var(--gold-dim) 80%, transparent);
  transform: scale(0.4);
  will-change: transform;
}

.mv-panel {
  position: relative;
  text-align: center;
}

.mv-quote-mark {
  display: block;
  font-family: var(--font-sans);
  font-size: clamp(64px, 8vw, 100px);
  line-height: 0.6;
  color: var(--gold);
  opacity: 0.55;
  margin-bottom: 4px;
  will-change: transform;
}

.mv-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 18px;
  color: var(--gold);
  will-change: transform;
}

.mv-icon svg {
  width: 100%;
  height: 100%;
}

.mv-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}

.mv-headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.35;
  letter-spacing: 0.005em;
  color: var(--cream);
  max-width: 380px;
  margin: 0 auto 16px;
}

.mv-text {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.75;
  color: var(--cream-dim);
  max-width: 380px;
  margin: 0 auto;
}

.mv-grid .mv-panel:nth-child(3) {
  animation-delay: .12s;
}

/* ---------- About: why choose us ---------- */

.why-choose {
  position: relative;
  z-index: 2;
    background:
    linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)),
    url('../assets/bg-4.png') no-repeat center center;
    background-size: cover;
  background-position: center;
  /* background: linear-gradient(135deg, #F4F7FA 0%, #E9F0F6 50%, #F7F9FB 100%); */
  color: var(--navy-900);
  padding: clamp(64px, 9vw, 120px) clamp(24px, 6vw, 80px);
}

.why-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.why-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 0 clamp(16px, 2vw, 28px);
  border-left: 1px solid rgba(1, 15, 38, .12);
}

.why-card:first-child {
  padding-left: 0;
  border-left: none;
}

.why-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--gold);
}

.why-icon svg {
  width: 100%;
  height: 100%;
}

.why-title {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--navy-900);
}

.why-desc {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--navy-700);
}

/* ---------- About: core values ---------- */

.core-values {
  position: relative;
  background:
    linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)),
    url('../assets/bg-4.png') no-repeat center center;
  background-size: cover;
  background-position: center;
  /* background: linear-gradient(135deg, #F4F7FA 0%, #E9F0F6 50%, #F7F9FB 100%); */
  color: var(--navy-900);
  padding: clamp(64px, 9vw, 120px) clamp(24px, 6vw, 80px);
}

.values-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(16px, 2vw, 28px);
}

.value-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 28px clamp(16px, 1.6vw, 24px) 32px;
  background: #fff;
  border-top: 1px solid var(--gold);
  box-shadow: 0 10px 30px rgba(1, 15, 38, .05);
  transition: transform .4s ease, box-shadow .4s ease;
}

.value-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(1, 15, 38, .1);
}

.value-letter {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(56px, 5vw, 76px);
  line-height: 1;
  color: var(--gold);
}

.value-title {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy-900);
}

.value-desc {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--navy-700);
}

@media (max-width: 1100px) {
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .value-card:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .values-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- About: final CTA ---------- */

.about-final-cta {
  position: relative;
  background: var(--navy-900);
  color: var(--cream);
  text-align: center;
  padding: clamp(64px, 8vw, 100px) 24px;
}

.about-final-cta .section-eyebrow {
  text-align: center;
}

.about-final-cta .section-heading {
  color: var(--cream);
  max-width: 620px;
  margin: 0 auto 32px;
}

@media (max-width: 900px) {
  .about-story-grid {
    grid-template-columns: 1fr;
  }

  .about-story-media {
    order: -1;
  }

  .about-story-badge {
    left: 18px;
  }

  .about-stats-grid {
    grid-template-columns: 1fr 1fr;
    row-gap: 24px;
  }

  .about-stat:nth-child(2) {
    border-left: none;
  }

  /* Odd one out in the 2-up grid: centre it on its own row instead of
     leaving it stranded in the left column beside a stray divider. */
  .about-stat:nth-child(3) {
    grid-column: 1 / -1;
    border-left: none;
  }

  .whatwedo-grid {
    grid-template-columns: 1fr;
  }

  .mv-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .mv-divider {
    width: clamp(120px, 30vw, 200px);
    height: 1px;
    margin: 0 auto;
    background: linear-gradient(90deg, transparent, var(--gold-dim) 20%, var(--gold-dim) 80%, transparent);
  }

  .why-grid {
    grid-template-columns: 1fr 1fr;
    row-gap: 28px;
  }

  .why-card:nth-child(3) {
    border-left: none;
  }
}

@media (max-width: 560px) {
  .about-stats-grid {
    grid-template-columns: 1fr;
    row-gap: 20px;
  }

  .about-stat {
    border-left: none;
    padding: 0;
  }

  .why-grid {
    grid-template-columns: 1fr;
  }

  .why-card {
    border-left: none;
    padding-left: 0;
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {

  /* Slider keeps its simple crossfade but drops the zoom drift. */
  .hero-slide,
  .hero-slide.is-active {
    transform: none;
    transition: opacity 1.4s ease;
  }

  .line-inner,
  .hero.is-ready .line-inner,
  .menu-overlay.is-open .menu-link .line-inner,
  .projects-media,
  .projects-eyebrow,
  .projects-divider,
  .projects-copy,
  .projects-tab,
  .projects-cta,
  .contact-features,
  .contact-info,
  .contact-form,
  .reveal-up,
  .mv-divider {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .projects-media-img,
  .projects-tab-icon,
  .projects-tab-title,
  .projects-tab-index,
  .projects-tab-index i,
  .projects-cta-line,
  .contact-submit,
  .contact-submit svg,
  .contact-input,
  .contact-detail a {
    transition: none;
  }

  .scroll-arrow {
    animation: none;
  }

  .preloader-logo {
    animation: none;
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }

  .preloader,
  .menu-panel,
  .menu-visual,
  .menu-visual-image {
    transition: none;
  }

  .menu-overlay.is-open .menu-panel,
  .menu-overlay.is-open .menu-visual {
    transform: none;
  }

  .link-line,
  .cookie-banner button,
  .cookie-banner button::before,
  .bars i,
  .menu-label,
  .menu-thumb {
    transition: none;
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .hero-headline {
    text-align: left;
  }

  /* Tablet: image panel stacks above the link list instead of
     sitting beside it. */
  .menu-overlay {
    flex-direction: column;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .menu-overlay::-webkit-scrollbar {
    display: none;
  }

  .menu-panel {
    width: 100%;
    min-width: 0;
    flex: 1;
    order: 2;
    padding: 28px clamp(24px, 5vw, 56px) 48px;
    transform: translateY(16px);
  }

  .menu-visual {
    order: 1;
    flex: none;
    width: 100%;
    height: 38vh;
    min-height: 240px;
    margin-top: clamp(88px, 14vh, 120px);
    transform: translateY(-16px);
  }

  .menu-overlay.is-open .menu-panel,
  .menu-overlay.is-open .menu-visual {
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .nav-link-inline {
    display: none;
  }

  .header-left {
    gap: 0;
  }

  .header-right {
    gap: 16px;
  }

  .hero-tagline {
    max-width: 220px;
  }

  .hero-headline {
    text-align: left;
  }

  .cookie-banner {
    left: 16px;
    right: 16px;
    bottom: 16px;
    max-width: none;
    border-radius: 20px;
    flex-wrap: wrap;
  }

  .scroll-down {
    display: none;
  }
}

@media (max-width: 560px) {

  /* Mobile: no room to do the big image panel justice -- swap to a
     vertical list of compact cards (label + thumbnail) instead. */
  .menu-visual {
    display: none;
  }

  .menu-panel {
    margin-top: 0;
    padding: 100px 20px 40px;
  }

  .menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 0;
    border-bottom: 1px solid var(--cream-faint);
  }

  .menu-link:last-child {
    border-bottom: none;
  }

  .menu-link.nav-link {
    font-size: clamp(22px, 8vw, 28px);
  }

  .menu-thumb {
    display: block;
    width: 52px;
    height: 52px;
    border-radius: 10px;
    flex-shrink: 0;
    opacity: 0.5;
    transition: opacity .35s ease, transform .35s ease;
  }

  .menu-link.is-active .menu-thumb {
    opacity: 1;
    transform: scale(1.06);
  }
}

@media (max-width: 380px) {
  .menu-link.nav-link {
    font-size: clamp(20px, 7.5vw, 25px);
  }
}

@media (max-width: 480px) {
  .hero-content {
    left: 16px;
    right: 16px;
    bottom: 150px;
  }

  .hero-slider-ui {
    left: 16px;
    right: 16px;
    bottom: 96px;
    transform: none;
    justify-content: flex-start;
  }

  .hero-arrow {
    display: none;
  }

  .hero-dot {
    flex: 1;
    width: auto;
  }

  .hero-dots {
    flex: 1;
  }

  .hero-headline {
    font-size: clamp(32px, 9vw, 40px);
  }
}

/* ---------- Enquiry popup (js/enquiry.js) ---------- */

body.enq-open {
  overflow: hidden;
}

.enq-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transition: opacity .35s ease, visibility 0s linear .35s;
}

.enq-modal.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity .35s ease;
}

.enq-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(1, 15, 38, 0.72);
  backdrop-filter: blur(4px);
}

.enq-dialog {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: auto;
  padding: clamp(28px, 4vw, 44px);
  background: #fff;
  color: var(--navy-900);
  border-radius: 10px;
  transform: translateY(24px);
  transition: transform .45s cubic-bezier(.16, .84, .44, 1);
}

.enq-modal.is-open .enq-dialog {
  transform: translateY(0);
}

.enq-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: none;
  background: transparent;
  color: var(--navy-900);
  cursor: pointer;
}

.enq-close svg {
  width: 20px;
  height: 20px;
}

.enq-eyebrow {
  display: block;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

.enq-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1.2;
  margin: 0 0 8px;
}

.enq-sub {
  font-size: 14px;
  opacity: .75;
  margin: 0 0 24px;
}

.enq-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.enq-field label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}

.enq-input {
  width: 100%;
  border: none;
  border-bottom: 1px solid rgba(1, 15, 38, 0.25);
  background: transparent;
  padding: 8px 2px;
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--navy-900);
  transition: border-color .3s ease;
}

.enq-input:focus {
  outline: none;
  border-color: var(--gold);
}

.enq-field.has-error .enq-input {
  border-color: #c0392b;
}

.enq-error {
  display: block;
  min-height: 0;
  margin-top: 4px;
  font-size: 12px;
  color: #c0392b;
}

.enq-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.enq-submit {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  padding: 14px 28px;
  border: 1px solid var(--navy-900);
  border-radius: 0;
  background: var(--navy-900);
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background .3s ease, color .3s ease;
}

.enq-submit:hover {
  background: transparent;
  color: var(--navy-900);
}

.enq-submit:disabled {
  opacity: .6;
  cursor: wait;
}

.enq-submit svg {
  width: 16px;
  height: 16px;
}

.enq-form-error {
  margin: 0;
  font-size: 13px;
  color: #c0392b;
}

/* ---------- Thank-you page ---------- */

.thanks-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 140px 24px 90px;
  background: url('../assets/bg-4.png') no-repeat center / cover;
  color: var(--navy-900);
}

.thanks-inner {
  max-width: 620px;
}

.thanks-tick {
  width: 72px;
  height: 72px;
  margin: 0 auto 28px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--gold);
}

.thanks-tick svg {
  width: 32px;
  height: 32px;
}

.thanks-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.1;
  margin: 12px 0 18px;
}

.thanks-copy {
  font-size: 17px;
  line-height: 1.6;
  margin-bottom: 36px;
}

.thanks-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* Hero slider banners: desktop + dedicated mobile crops. URLs live here
   (not in inline custom properties) so they resolve against this file. */
.hero-slide-1 { background-image: url('../assets/banners/Vara_banner_one-1.jpg'); }
.hero-slide-2 { background-image: url('../assets/banners/Vara_banner_one.jpg'); }
.hero-slide-3 { background-image: url('../assets/banners/Vara_banner_two.jpg'); }
.hero-slide-4 { background-image: url('../assets/banners/Vara_banner_three.jpg'); }

@media (max-width: 767px) {
  .hero-slide-1 { background-image: url('../assets/banners/Vara_banner_one_mb-1.jpg'); }
  .hero-slide-2 { background-image: url('../assets/banners/Vara_banner_one_mb.jpg'); }
  .hero-slide-3 { background-image: url('../assets/banners/Vara_banner_two_mb.jpg'); }
  .hero-slide-4 { background-image: url('../assets/banners/Vara_banner_three_mb.jpg'); }
}

/* Banners with their own artwork copy (data-no-overlay): js/scriptv.js
   sets .is-plain-slide on the hero while one is showing, dropping the
   navy wash and the headline so the banner reads exactly as designed.
   No Ken Burns zoom either -- it would crop the baked-in text. */
.hero-wash,
.hero-content {
  transition: opacity .8s ease;
}

.hero.is-plain-slide .hero-wash,
.hero.is-plain-slide .hero-content {
  opacity: 0;
  pointer-events: none;
}

.hero-slide[data-no-overlay],
.hero-slide[data-no-overlay].is-active {
  transform: none;
  transition: opacity 1.4s ease;
  /* If the hero ever hits its height cap, crop sky, not the phone
     number / offer along the bottom. */
  background-position: center bottom;
}

/* The banner's bottom edge is all copy (phone, offer, location), right
   where the slider controls and scroll button sit -- hide them while it
   shows. Autoplay is unaffected (the hidden progress bar still runs). */
.hero-slider-ui {
  transition: opacity .6s ease;
}

.hero.is-plain-slide .hero-slider-ui,
.hero.is-plain-slide .scroll-down {
  opacity: 0;
  pointer-events: none;
}


/* About page banner: desktop + dedicated mobile crop */
.about-banner-bg {
  background-image: url('../assets/banners/about_desktop.jpg');
}

@media (max-width: 767px) {
  .about-banner-bg {
    background-image: url('../assets/banners/about_mobile.jpg');
  }
}

/* Homepage body copy: justified on mobile. Hyphenation keeps the
   narrow column from opening wide gaps between words. */
@media (max-width: 767px) {
  .about-statement,
  .projects-copy,
  .why-desc {
    text-align: justify;
    text-justify: inter-word;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}