/* Keep the off-canvas drawer out of the document flow even if the Bootstrap
   stylesheet is slow or blocked — without this it dumps its links into the
   page and pushes the layout sideways on mobile. Bootstrap's own rules win
   while the drawer is opening or open. */
.offcanvas:not(.show):not(.showing) { position: fixed; visibility: hidden; }

/* ==========================================================================
   Truegrowth Realty — site stylesheet
   Loaded after Bootstrap 5.3.
   ========================================================================== */


/* ==========================================================================
   Global: tokens, base, buttons, loader
   ========================================================================== */

:root {
  --ink: #0e1620;
  --ink-2: #16212d;
  --ink-3: #223040;
  /* Brand accent, sampled from the logo. The --gold-* names are kept as aliases so
     every existing rule keeps working; prefer --brand-* in new code. */
  --brand: #6a97cc;
  --brand-light: #9cbce3;
  --brand-deep: #063b73;
  --gold: var(--brand);
  --gold-2: var(--brand-light);
  --gold-deep: var(--brand-deep);
  /* Accent for a highlight over photography: a brighter, more saturated
     relative of --brand, lifted clear of the dusk-blue banner behind it. */
  --accent: #72b8fa;
  --ivory: #f8f5ef;
  --sand: #efe8dc;
  --line: rgba(14, 22, 32, 0.1);
  --line-light: rgba(255, 255, 255, 0.14);
  --text: #1b2430;
  --muted: #667085;

  /* Banner headlines only - the one place the serif earns its keep. */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  /* Every other heading. Same family as the body on purpose: kept as its own
     token so headings can diverge again without touching each rule. */
  --font-head: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* chevron for custom selects */
  --chev-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230e1620' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Short UI feedback - hovers, colour and background changes. */
  --ease-hover: cubic-bezier(0.4, 0, 0.2, 1);
  /* Things that travel both ways and should look the same doing it. */
  --ease-both: cubic-bezier(0.65, 0, 0.35, 1);
  --shadow-soft: 0 24px 60px -24px rgba(14, 22, 32, 0.28);

  --bs-body-font-family: var(--font-body);
  --bs-body-color: var(--text);
  --bs-body-bg: var(--ivory);
}

/* ---------- Base ---------- */
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
.font-head {
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.12;
}

/*
  The two banner headlines opt back into the serif. Fraunces carries an
  optical-size axis, so let the browser drive it: the large display sizes thin
  out while the smaller clamp values stay sturdy.
*/
.hero__title,
.phero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-optical-sizing: auto;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: var(--gold); color: var(--ink); }

.container-xl { max-width: 1320px; padding-inline: clamp(16px, 3vw, 28px); }
/*
  The container's inline padding bottoms out at 16px, but Bootstrap's g-5 rows
  pull -24px each side, so those rows leaked 8px past the viewport on phones
  and the whole page could be dragged sideways. Cap the gutter at phone width
  so the row's negative margin never exceeds the padding it sits in.
*/
@media (max-width: 575.98px) {
  .row.g-5, .row.gx-5 { --bs-gutter-x: 2rem; }
}

.section { padding-block: clamp(29px, 3.6vw, 52px); position: relative; }
.section--dark { background: var(--ink); color: #fff; }
.section--sand { background: var(--sand); }

/* ---------- Section heading ---------- */
/*
  Every small heading on the site is this pill. It used to be a rule-and-caption
  that four sections had each re-implemented as their own badge; one base rule
  keeps them identical and gives the sections that never got a badge the same
  treatment.
*/
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-deep);
  margin-bottom: 16px;
}
/* the rule that used to flank the caption is now the dot inside the pill */
.eyebrow::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
/* Glass on anything dark: the solid white pill would punch a hole in it. */
.section--dark .eyebrow,
.tst .eyebrow,
.eyebrow--light {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  color: var(--brand-light);
}
/* Over photography the brand blue drops to about 1.9:1 against the warmer parts of
   the image, so eyebrows sitting on a hero photo take a near-white tint instead.
   On the solid dark panels .eyebrow--light stays brand blue. */
.phero .eyebrow--light {
  color: #ffffff;
  /* darker glass than the standard dark-surface pill: a page hero sits on a
     photograph, which can be bright anywhere behind it */
  background: rgba(14, 22, 32, 0.4);
  border-color: rgba(255, 255, 255, 0.24);
}

.section-title {
  font-size: clamp(24px, 2.86vw, 39px);
  margin: 0;
}
.section-title em {
  font-style: normal;
  color: var(--gold-deep);
}
.section--dark .section-title em { color: var(--gold); }

.section-lead {
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 520px;
}
.section--dark .section-lead { color: rgba(255, 255, 255, 0.64); }

/* ---------- Buttons ---------- */
/*
  Solid brand blue on a 10px corner, matching the navbar and the cards. The old
  version was a pale capsule with a dark fill sliding up from underneath and an
  icon that span 45 degrees; the fill needed overflow and its own stacking
  context, and the spin read as a dial rather than as "go".
*/
.btn-lux {
  --h: 50px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: var(--h);
  /* in a column flex container the height is the main axis, so without this the
     button gets compressed and the icon tile bulges out of it */
  flex-shrink: 0;
  padding: 0 7px 0 22px;
  border-radius: 10px;
  border: 0;
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: 0.01em;
  background: var(--brand-deep);
  color: #fff;
  transition: background 0.43s var(--ease-hover), transform 0.43s var(--ease), box-shadow 0.43s var(--ease);
}
.btn-lux:hover {
  background: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -12px rgba(14, 22, 32, 0.6);
}
.btn-lux .btn-icon {
  flex-shrink: 0;
  width: calc(var(--h) - 14px);
  height: calc(var(--h) - 14px);
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.16);
  color: currentColor;
  transition: transform 0.5s var(--ease), background 0.43s var(--ease);
}
/* the arrow points up-right, so it nudges along its own axis rather than spinning */
.btn-lux:hover .btn-icon { transform: translate(2px, -2px); background: rgba(255, 255, 255, 0.26); }

/*
  On a dark panel the solid blue would sink into the background, so the button
  inverts to white there. Covers the partner band, the footer and the mobile
  menu without each one needing its own rule.
*/
.section--dark .btn-lux,
.footer .btn-lux,
.mobile-menu .btn-lux,
.btn-lux--light {
  background: #fff;
  color: var(--ink);
}
.section--dark .btn-lux:hover,
.footer .btn-lux:hover,
.mobile-menu .btn-lux:hover,
.btn-lux--light:hover {
  background: var(--brand-light);
  color: var(--ink);
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.7);
}
.section--dark .btn-lux .btn-icon,
.footer .btn-lux .btn-icon,
.mobile-menu .btn-lux .btn-icon,
.btn-lux--light .btn-icon { background: rgba(6, 59, 115, 0.12); color: var(--brand-deep); }
.section--dark .btn-lux:hover .btn-icon,
.footer .btn-lux:hover .btn-icon,
.mobile-menu .btn-lux:hover .btn-icon,
.btn-lux--light:hover .btn-icon { background: rgba(6, 59, 115, 0.2); }

.btn-lux--ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
}
.btn-lux--ghost:hover { background: var(--ink); color: #fff; box-shadow: 0 10px 22px -12px rgba(14, 22, 32, 0.6); }
.btn-lux--ghost .btn-icon { background: rgba(14, 22, 32, 0.08); color: var(--ink); }
.btn-lux--ghost:hover .btn-icon { background: rgba(255, 255, 255, 0.18); color: #fff; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 15px;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
  transition: gap 0.4s var(--ease), color 0.3s;
}
.link-arrow:hover { gap: 16px; color: var(--gold-deep); }

/* ---------- Image reveal helpers ---------- */
.img-zoom { overflow: hidden; }
.img-zoom img { transition: transform 1.2s var(--ease); }
.img-zoom:hover img { transform: scale(1.06); }

/* Hide GSAP-animated elements until JS runs, to avoid a flash. */
.js [data-reveal],
.js [data-hero] { visibility: hidden; }
/* Hero headings start below their mask (.line has overflow: hidden) so the intro has
   nothing to jump from. js/main.js slides them up. */
.js [data-hero-title] .line > span { transform: translateY(110%); }

/* ---------- Floating WhatsApp ---------- */
/*
  A pill that sits collapsed to a disc and opens to name itself on hover. The
  right edge is pinned, so the growing label pushes the button leftwards and the
  icon never moves under the pointer.
*/
.float-wa {
  position: fixed;
  right: clamp(16px, 2.5vw, 28px);
  bottom: clamp(16px, 2.5vw, 28px);
  z-index: 1030;
  height: 56px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  overflow: hidden;
  background: #1fab54;
  color: #fff;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.3s;
  /* The halo is a box-shadow ring rather than a bordered pseudo-element, so
     overflow: hidden above cannot clip it. */
  animation: waPulse 3.4s ease-out infinite;
}
.float-wa__icon {
  width: 56px;
  flex: none;
  display: grid;
  place-items: center;
}
.float-wa__label {
  max-width: 0;
  padding-right: 0;
  opacity: 0;
  white-space: nowrap;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: max-width 0.5s var(--ease), padding-right 0.5s var(--ease), opacity 0.35s var(--ease);
}
.float-wa:hover,
.float-wa:focus-visible {
  background: #17904a;
  transform: translateY(-2px);
  /* Steady shadow while open - the halo would fight the wider shape. */
  animation: none;
  box-shadow: 0 16px 34px -14px rgba(14, 22, 32, 0.6);
  color: #fff;
}
.float-wa:hover .float-wa__label,
.float-wa:focus-visible .float-wa__label {
  max-width: 220px;
  padding-right: 22px;
  opacity: 1;
}
@keyframes waPulse {
  0% { box-shadow: 0 10px 26px -14px rgba(14, 22, 32, 0.55), 0 0 0 0 rgba(31, 171, 84, 0.45); }
  70% { box-shadow: 0 10px 26px -14px rgba(14, 22, 32, 0.55), 0 0 0 16px rgba(31, 171, 84, 0); }
  100% { box-shadow: 0 10px 26px -14px rgba(14, 22, 32, 0.55), 0 0 0 0 rgba(31, 171, 84, 0); }
}
/* With the halo animation off, the resting shadow still needs stating. */
@media (prefers-reduced-motion: reduce) {
  .float-wa { box-shadow: 0 10px 26px -14px rgba(14, 22, 32, 0.55); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


/* ==========================================================================
   Logo
   ========================================================================== */

.logo {
  display: inline-flex;
  align-items: center;
  color: inherit;
}
/* The supplied artwork already contains the name, tagline and RERA line. */
.logo__img {
  height: 44px;
  width: auto;
  display: block;
}
.logo--light { color: #fff; }
/*
  On a dark panel the artwork sits on a white chip. The padding keeps the rounded
  corners clear of the RERA line that runs along the bottom of the artwork.
*/
.logo--light .logo__img {
  height: 40px;
  padding: 5px 7px;
  border-radius: 10px;
  background: #fff;
}

/* The footer has room to show it larger. */
.footer .logo__img { height: 62px; padding: 8px 12px; border-radius: 14px; }

@media (max-width: 991.98px) {
  .logo__img { height: 38px; }
}
@media (max-width: 575.98px) {
  .logo__img { height: 34px; }
  .logo--light .logo__img { height: 34px; }
  .footer .logo__img { height: 50px; }
}


/* ==========================================================================
   Navbar + mobile menu
   ========================================================================== */

/*
  A plain white bar pinned across the top, separated from the page by a
  hairline. It stays pinned the whole way down the page and picks up a soft
  shadow once the page scrolls.
*/
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1040;
  background: #fff;
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.4s var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 8px 28px -20px rgba(14, 22, 32, 0.45); }

/*
  Intro: the bar fades up into place the moment the page paints. There is no
  delay and it never starts fully off-screen, so nav is on screen and clickable
  from the first frames rather than a second in.
  Done in CSS rather than GSAP on purpose — this element already transitions
  transform for the hide-on-scroll below, and driving the same property from
  JS as well made the two fight, so the bar wobbled and took ~1.8s to land.
  Once the animation finishes, transform goes back to the rules above and the
  hide-on-scroll works as usual.
  The reduced-motion rule near the top of this file switches the whole thing off.
*/
@keyframes headerIn {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
}
/* Tune the intro here: how long the settle takes. Adding a delay would put the
   bar back to arriving late, which is what this replaced. */
.js .site-header {
  animation: headerIn 0.45s var(--ease) backwards;
}

/* The bar itself is transparent — the header above it carries the white. */
.navbar-lux {
  display: flex;
  align-items: center;
  gap: 28px;
  width: 100%;
  max-width: 1320px;
  height: 76px;
  margin: 0 auto;
  padding-inline: clamp(16px, 3vw, 28px);
  color: var(--ink);
  transition: height 0.4s var(--ease);
}
.is-scrolled .navbar-lux { height: 68px; }

/* A wide wordmark, so height is modest; the footer shows it larger. */
.navbar-lux .logo__img { height: 60px; }

.navbar-lux__links {
  display: flex;
  align-self: stretch;
  gap: 2px;
  list-style: none;
  margin: 0 auto;
  padding: 0;
}
.navbar-lux__link {
  position: relative;
  /* isolate keeps the pill's negative z-index inside the link, so it cannot
     slip behind the header's white background */
  isolation: isolate;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--text);
  transition: color 0.25s var(--ease);
}
/*
  The hover mark is a contained pill rather than a rule along the bar's edge.
  The link itself still fills the bar's height so the dropdown opens flush
  against it; the pill is inset vertically to get its own shape.
*/
.navbar-lux__link::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 4px;
  right: 4px;
  top: 50%;
  height: 40px;
  margin-top: -20px;
  border-radius: 10px;
  background: rgba(106, 151, 204, 0.14);
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 0.28s var(--ease), transform 0.4s var(--ease);
}
.navbar-lux__link:hover { color: var(--brand-deep); }
.navbar-lux__link:hover::before { opacity: 1; transform: scale(1); }
.navbar-lux__link.is-active {
  color: var(--brand-deep);
  font-weight: 600;
}
.navbar-lux__link.is-active::before {
  opacity: 1;
  transform: scale(1);
  background: rgba(106, 151, 204, 0.18);
}

.navbar-lux__actions { display: flex; align-items: center; gap: 10px; }

/* An outlined pill rather than a filled disc — quieter against the white. */
/* Solid, so the one action in the bar reads as the action. */
.navbar-lux__phone {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  padding: 0 20px;
  border: 1px solid var(--brand-deep);
  border-radius: 10px;
  background: var(--brand-deep);
  color: #fff;
  transition: background 0.3s var(--ease), border-color 0.3s, transform 0.3s var(--ease);
}
.navbar-lux__phone:hover {
  background: var(--ink);
  border-color: var(--ink);
  transform: translateY(-1px);
}
.navbar-lux__phone-icon {
  display: grid;
  place-items: center;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: currentColor;
}
.navbar-lux__phone:hover .navbar-lux__phone-icon { background: none; }
.navbar-lux__phone-text { font-weight: 600; font-size: 14.5px; white-space: nowrap; }

.navbar-lux__burger {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.navbar-lux__burger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  transition: width 0.3s var(--ease), margin 0.3s var(--ease);
}
.navbar-lux__burger span:last-child { width: 11px; margin-left: 7px; }
.navbar-lux__burger:hover { border-color: var(--brand); background: rgba(106, 151, 204, 0.1); }
.navbar-lux__burger:hover span:last-child { width: 18px; margin-left: 0; }

@media (max-width: 1199.98px) {
  .navbar-lux { gap: 14px; }
  .navbar-lux__link { padding: 0 11px; font-size: 14px; }
  .navbar-lux__link::before { left: 2px; right: 2px; }
  /* Icon only — the pill squares off so it does not read as a stray oval. */
  .navbar-lux__phone { width: 42px; padding: 0; justify-content: center; }
  .navbar-lux__phone-text { display: none; }
}
@media (max-width: 991.98px) {
  .navbar-lux { height: 70px; }
  .is-scrolled .navbar-lux { height: 66px; }
  .navbar-lux .logo__img { height: 42px; }
  .navbar-lux__links { display: none; }
  /* With the list gone, nothing is left to push the actions across. */
  .navbar-lux__actions { margin-left: auto; }
  .navbar-lux__burger { display: flex; }
}
@media (max-width: 575.98px) {
  .navbar-lux { height: 64px; gap: 10px; }
  .is-scrolled .navbar-lux { height: 64px; }
  .navbar-lux .logo__img { height: 36px; }
  .navbar-lux__phone, .navbar-lux__burger { width: 38px; height: 38px; }
}

/* Mobile menu */
.mobile-menu {
  --bs-offcanvas-width: min(100vw, 460px);
  background: var(--ink);
  color: #fff;
  padding: 22px 24px 32px;
  display: flex;
  flex-direction: column;
}
.mobile-menu__head { display: flex; justify-content: space-between; align-items: center; }
.mobile-menu__close {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--line-light);
  background: transparent;
  color: #fff;
  display: grid;
  place-items: center;
}
.mobile-menu__links {
  list-style: none;
  padding: 0;
  margin: auto 0;
}
.mobile-menu__links a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  font-family: var(--font-head);
  font-size: clamp(26px, 7vw, 34px);
  border-bottom: 1px solid var(--line-light);
  transition: color 0.3s, padding 0.4s var(--ease);
}
.mobile-menu__links a:hover { color: var(--gold); padding-left: 8px; }
.mobile-menu__no { font-family: var(--font-body); font-size: 12px; color: var(--gold); letter-spacing: 0.1em; }
.mobile-menu__foot { display: grid; gap: 6px; color: rgba(255, 255, 255, 0.7); }
.mobile-menu__foot .btn-lux { justify-self: start; }


/* ==========================================================================
   Footer, call-back CTA, WhatsApp button
   ========================================================================== */

/*
  An enquiry strip sitting above four columns. The giant ghosted wordmark that
  used to run across the bottom is gone - it still read the old brand name, and
  it was the tallest thing in the footer.
*/
.footer {
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(6, 59, 115, 0.55), transparent 62%),
    var(--ink);
  color: rgba(255, 255, 255, 0.66);
  padding-top: clamp(34px, 4vw, 58px);
}
.footer__invite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: clamp(22px, 2.4vw, 34px) clamp(22px, 2.6vw, 38px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.045);
}
.footer__invite-title {
  font-family: var(--font-head);
  font-size: clamp(20px, 1.9vw, 27px);
  font-weight: 600;
  letter-spacing: -0.022em;
  color: #fff;
  margin: 0 0 6px;
}
.footer__invite-text { margin: 0; font-size: 14.5px; line-height: 1.6; max-width: 48ch; }
.footer__invite-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.footer__invite-alt { font-size: 14.5px; font-weight: 600; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
.footer__invite-alt:hover { border-bottom-color: #fff; }

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.3fr);
  gap: clamp(26px, 3vw, 48px);
  padding-block: clamp(32px, 3.8vw, 56px);
}
.footer__about { margin: 18px 0 20px; line-height: 1.7; max-width: 340px; font-size: 14.5px; }
.footer__social { display: flex; gap: 10px; }
.footer__social a {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  transition: background 0.4s var(--ease-hover), border-color 0.4s, color 0.4s;
}
.footer__social a:hover { background: #fff; border-color: #fff; color: var(--ink); }
.footer__title {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin: 0 0 16px;
}
.footer__links { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.footer__links a { font-size: 14.5px; transition: color 0.3s, padding 0.4s var(--ease); }
.footer__links a:hover { color: #fff; padding-left: 6px; }
.footer__contact { list-style: none; padding: 0; margin: 0; display: grid; gap: 15px; }
.footer__contact li { display: grid; gap: 3px; }
.footer__contact small { font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); }
.footer__contact a, .footer__contact span { color: #fff; font-weight: 500; font-size: 14.5px; line-height: 1.5; }
.footer__contact a:hover { color: var(--brand-light); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 26px;
  padding-block: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}
.footer__rera { letter-spacing: 0.04em; }
.footer__legal { display: flex; gap: 20px; }
.footer__legal a:hover { color: #fff; }

@media (max-width: 991.98px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .footer__grid { grid-template-columns: minmax(0, 1fr); }
  .footer__invite { flex-direction: column; align-items: flex-start; }
  .footer__bottom { justify-content: flex-start; }
}

/* ==========================================================================
   Home: hero
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
  padding: 150px 0 110px;
  background: var(--ink);
}
.hero__bg {
  position: absolute;
  inset: 0;
}
/*
  Dissolve slideshow: each image holds still for 8s, then cross-fades
  into the next over 1.5s. Both slides run the same loop, offset by 9.5s.
*/
.hero__slide {
  --dur: 19s; /* 2 slides × (8s hold + 1.5s fade) */
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: heroFade var(--dur) linear infinite;
  animation-delay: calc(var(--i) * var(--dur) / 2 - 1.5s);
}
.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
}
@keyframes heroFade {
  0% { opacity: 0; }
  7.89% { opacity: 1; }   /* 1.5s dissolve in */
  50% { opacity: 1; }     /* 8s hold, so each banner reads for 8s */
  57.89% { opacity: 0; }  /* 1.5s dissolve out, overlapping the next slide */
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__slide:first-child { opacity: 1; }
}
.hero__shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 45%, rgba(14, 22, 32, 0.55), transparent 70%),
    linear-gradient(180deg, rgba(14, 22, 32, 0.75) 0%, rgba(14, 22, 32, 0.25) 35%, rgba(14, 22, 32, 0.35) 65%, rgba(14, 22, 32, 0.92) 100%);
}
.hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero__title {
  font-size: clamp(24px, 2.94vw, 42px);
  line-height: 1.16;
  letter-spacing: -0.01em;
  margin: 0 0 22px;
  text-shadow: 0 2px 30px rgba(14, 22, 32, 0.45);
}
.hero__title .line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.hero__title .line > span { display: inline-block; }
/* One flat colour the whole way across - no clipped gradient, no sheen. */
.hero__title em {
  font-style: normal;
  color: var(--accent);
}
.hero__lead {
  max-width: 600px;
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: 400;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 1px 16px rgba(14, 22, 32, 0.5);
  margin: 0 0 40px;
}

/* ---------- Search ---------- */
.search {
  width: min(100%, 980px);
  text-align: left;
}
/*
  The tabs float free above the bar rather than notching into it, so both pieces
  keep a symmetric radius. The 5px padding is load-bearing: main.js offsets the
  sliding pill by exactly that much.
*/
.search__tabs {
  position: relative;
  display: flex;
  width: fit-content;
  padding: 5px;
  margin: 0 auto 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(14, 22, 32, 0.4);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.search__tab {
  position: relative;
  z-index: 1;
  border: 0;
  background: transparent;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.4s var(--ease);
}
.search__tab:hover { color: #fff; }
.search__tab.is-active { color: var(--ink); }
.search__tab-pill {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.55);
  transition: transform 0.5s var(--ease), width 0.5s var(--ease);
}
/*
  Dark glass rather than a solid white card: the banners cycle between a bright
  sky and a sunset, and a tinted panel holds its contrast over both where white
  would blow out against the lighter slide.
*/
.search__body {
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  align-items: center;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(14, 22, 32, 0.46);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  color: #fff;
  padding: 10px 10px 10px 6px;
  box-shadow: 0 40px 80px -34px rgba(0, 0, 0, 0.7);
}
.search__field {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 8px 22px;
  margin: 0;
  cursor: pointer;
}
.search__field + .search__field { border-left: 1px solid rgba(255, 255, 255, 0.16); }
.search__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-light);
}
.search__select {
  appearance: none;
  border: 0;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right center;
  padding: 4px 20px 4px 0;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  width: 100%;
  cursor: pointer;
  outline: none;
}
/* The native dropdown list is painted by the OS, so its options need the
   contrast set back the other way round or they render white on white. */
.search__select option { color: var(--ink); background: #fff; }
.search__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 58px;
  padding: 0 30px;
  border: 0;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.search__submit:hover { background: var(--brand-deep); color: #fff; }

.popular {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
}
.popular__label { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.75); margin-right: 4px; }
.popular__chip {
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  background: rgba(14, 22, 32, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.popular__chip:hover { background: #fff; border-color: #fff; color: var(--ink); }

@media (max-width: 991.98px) {
  .search__body { grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px; }
  .search__field { padding: 12px 14px; border: 0 !important; background: rgba(255, 255, 255, 0.09); border-radius: 14px; }
  .search__field:nth-child(3) { grid-column: 1 / -1; }
  .search__submit { grid-column: 1 / -1; margin-top: 6px; }
}
@media (max-width: 575.98px) {
  .hero { padding: 120px 0 64px; align-items: flex-start; }
  .search__body { grid-template-columns: 1fr; border-radius: 18px; }
  .search__tabs { display: flex; width: 100%; }
  .search__tab { flex: 1; padding: 10px 8px; }
  .popular__label { width: 100%; margin: 0; }
}


/* ==========================================================================
   Home: featured projects
   ========================================================================== */

/* ---------- Top Projects: header ---------- */
/* White, so the section lifts off the ivory page background. */
.featured { background: #fff; }

.featured__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 22px;
  margin-bottom: clamp(20px, 2.2vw, 32px);
}
.featured__intro { max-width: 620px; }
/* Scoped: the other sections keep the full display size. */
.featured .section-title { font-size: clamp(20px, 1.93vw, 28px); }
.featured__sub {
  margin: 16px 0 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--muted);
}

/* ---------- Top Projects: slider ----------
   A scroll-snap track rather than a carousel library: it keeps native touch
   and trackpad scrolling, and the arrows just nudge scrollLeft.
*/
.pslider { position: relative; }
.pslider__track {
  display: grid;
  grid-auto-flow: column;
  /* Three across, with the gaps taken out of the width so the third card ends
     flush with the container rather than half past it. */
  grid-auto-columns: calc((100% - 2 * 20px) / 3);
  gap: 20px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* Room for the card hover lift and shadow, which overflow would otherwise
     clip. Vertical only: side padding offsets the snap positions, which left
     the track resting at scrollLeft 4 and the prev arrow never disabling. */
  padding: 6px 8px 22px;
  margin: -6px -8px -22px;
  scroll-padding-inline: 8px;
}
.pslider__track::-webkit-scrollbar { display: none; }
.featured__item { scroll-snap-align: start; }

.pslider__nav { display: flex; gap: 8px; flex: none; }
.pslider__btn {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  display: grid;
  place-items: center;
  transition: background 0.4s var(--ease-hover), border-color 0.4s, color 0.4s, opacity 0.4s;
}
.pslider__btn:not(:disabled):hover {
  background: var(--brand-deep);
  border-color: var(--brand-deep);
  color: #fff;
}
.pslider__btn:disabled { opacity: 0.32; cursor: default; }

@media (max-width: 1199.98px) {
  .pslider__track { grid-auto-columns: calc((100% - 18px) / 2); gap: 18px; }
}
@media (max-width: 575.98px) {
  .pslider__track { grid-auto-columns: 82%; gap: 14px; }
}

.pcard {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(14, 22, 32, 0.05), 0 14px 30px -20px rgba(14, 22, 32, 0.3);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
}
.pcard:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: 0 2px 6px rgba(14, 22, 32, 0.06), 0 30px 54px -22px rgba(6, 22, 45, 0.42);
}
/* The picture carries the name and the place, so the whole plate is one link and
   the body is free to lead on the number people actually scan for. */
.pcard__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 2.75;
  overflow: hidden;
  color: #fff;
}
.pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.pcard:hover .pcard__media img { transform: scale(1.06); }
.pcard__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 16, 28, 0.42) 0%, transparent 34%, rgba(8, 16, 28, 0.12) 52%, rgba(8, 16, 28, 0.82) 100%);
}
.pcard__status, .pcard__type {
  position: absolute;
  top: 13px;
  z-index: 2;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  max-width: calc(50% - 18px);
  overflow: hidden;
  text-overflow: ellipsis;
}
/* warm on the left for where the project stands, cool glass on the right for what it is */
.pcard__status { left: 13px; background: linear-gradient(150deg, #c79a4e 0%, #a97f36 100%); color: #fff; }
.pcard__type {
  right: 13px;
  background: rgba(10, 20, 34, 0.56);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}
.pcard__go {
  position: absolute;
  right: 13px;
  bottom: 13px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--brand-deep);
  background: #fff;
  transition: transform 0.45s var(--ease);
}
.pcard:hover .pcard__go { transform: rotate(45deg); }
.pcard__head { position: absolute; left: 15px; right: 58px; bottom: 13px; z-index: 2; display: block; }
.pcard__name { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.2; margin: 0; color: #fff; }
.pcard__loc {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.82);
}
.pcard__loc svg { flex: none; }
.pcard__body { padding: clamp(14px, 1.3vw, 17px); display: flex; flex-direction: column; flex: 1; }
.pcard__dev {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand-deep);
}
.pcard__dev svg { flex: none; color: var(--brand); }
.pcard__price {
  display: grid;
  gap: 1px;
  margin: 7px 0 0;
  font-family: var(--font-head);
  font-size: clamp(18px, 1.7vw, 22px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}
.pcard__price small { font-family: var(--font-body); font-size: 11.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.pcard__meta {
  list-style: none;
  margin: 11px 0 14px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* chips rather than a divided row: the items vary in length between projects and
   a fixed set of columns left some of them squeezed */
.pcard__meta li {
  padding: 5px 10px;
  border-radius: 7px;
  background: var(--ivory);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}
.pcard__size { background: rgba(6, 59, 115, 0.07); color: var(--brand-deep); }
.pcard__more {
  margin-top: auto;
  padding-top: clamp(10px, 1.1vw, 13px);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--brand-deep);
  transition: color 0.3s var(--ease-hover);
}
.pcard__more svg { transition: transform 0.4s var(--ease); }
.pcard:hover .pcard__more svg { transform: translate(3px, -3px); }

@media (max-width: 575.98px) {
  .pcard__meta li { font-size: 13px; min-width: 0; }
  .pcard__meta li + li { padding-left: 12px; }
  .pcard__name { font-size: 20px; }
}


/* ==========================================================================
   Home: why us
   ========================================================================== */

/* ==========================================================================
   Home: why us
   The intro column pins while the cards on the right pile up: each card sticks
   a little lower than the one before it, so they stack into a deck instead of
   scrolling past. Everything here is CSS position: sticky - no scroll handler.
   ========================================================================== */

/*
  A photograph under a heavy navy wash. Painted on a pseudo-element rather than
  the section itself: a background on .whyus would want overflow or a stacking
  context to tame, and overflow on an ancestor silently kills position: sticky,
  which is what the card deck runs on.
*/
.whyus { position: relative; }
.whyus::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 58% 70% at 78% 32%, rgba(47, 120, 196, 0.26), transparent 62%),
    linear-gradient(118deg, rgba(10, 22, 38, 0.86) 0%, rgba(12, 28, 48, 0.78) 48%, rgba(8, 18, 32, 0.85) 100%),
    url("../assets/images/tr-bg.d9025593fccb.jpg") center / cover no-repeat;
}
.whyus > .container-xl { position: relative; z-index: 1; }

.whyus__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: clamp(26px, 3.6vw, 60px);
  align-items: start;
}

/* ---------- Intro column ---------- */
/* Pinned clear of the fixed navbar while the deck scrolls past it. */
.whyus__intro { position: sticky; top: calc(76px + clamp(16px, 2vw, 30px)); }
.whyus__title { margin-bottom: clamp(14px, 1.6vw, 20px); }
.whyus__text {
  font-size: 16px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 clamp(20px, 2.2vw, 30px);
  max-width: 46ch;
}

/* ---------- The deck ----------
   Narrow cards that alternate sides, so the pile reads as two offset columns
   rather than one wide slab.
*/
.whyus__stack { display: grid; gap: clamp(14px, 1.6vw, 20px); }
.whyc {
  /*
    Each card parks 14px lower than the last, so the stack fans out as it piles
    rather than hiding the cards underneath entirely.
  */
  position: sticky;
  top: calc(76px + clamp(16px, 2vw, 30px) + var(--i) * 14px);
  /* Under half the column, so a left card and a right card never overlap. */
  width: clamp(240px, 48%, 348px);
  padding: clamp(18px, 1.8vw, 24px);
  border-radius: 16px;
  /* a hair of warmth down the card rather than flat white */
  background: linear-gradient(160deg, #ffffff 0%, #ffffff 62%, #f4f7fb 100%);
  /* .section--dark paints the section white; the card has to set its own text
     colour back or its heading is white on white. */
  color: var(--text);
  /*
    Three layers: a tight contact shadow, a wide ambient one for depth against
    the dark ground, and an inset top edge that reads as a lit rim.
  */
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.16),
    0 26px 52px -24px rgba(0, 0, 0, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
/* odd cards hug the left of the column, even ones the right */
.whyc:nth-child(even) { justify-self: end; }
.whyc:hover {
  transform: translateY(-4px);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.18),
    0 34px 64px -22px rgba(0, 0, 0, 0.82),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.whyc__head { display: flex; align-items: center; gap: 13px; }
.whyc__icon {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(150deg, #3d8ad6 0%, var(--brand-deep) 100%);
}
.whyc__title { font-size: clamp(16px, 1.3vw, 18px); margin: 0; line-height: 1.25; color: var(--ink); }
.whyc__text {
  margin: clamp(12px, 1.3vw, 15px) 0 0;
  padding-top: clamp(12px, 1.3vw, 15px);
  border-top: 0;
  background: linear-gradient(90deg, rgba(14, 22, 32, 0.14), rgba(14, 22, 32, 0.02)) top left / 100% 1px no-repeat;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
}

@media (max-width: 991.98px) {
  .whyus__grid { grid-template-columns: minmax(0, 1fr); }
  /* Stacked on one column there is nothing to pin against, so both columns flow. */
  .whyus__intro { position: static; }
}
@media (max-width: 575.98px) {
  .whyc { position: static; width: 100%; border-radius: 14px; }
  .whyc:nth-child(even) { justify-self: stretch; }
}


/* ==========================================================================
   Home: developers logo wall
   ========================================================================== */

/* A flat neutral grey, a shade off the white hexagons so each cell shows its
   own edge without needing a heavy border. */
.developers { background: #ebebeb; }

/* ---------- Heading ---------- */
/* A shallower block than the other sections - the honeycomb carries it. */
.developers { padding-block: clamp(24px, 2.59vw, 39px); }
.partners__head { text-align: center; max-width: 680px; margin: 0 auto clamp(20px, 2.2vw, 30px); }
.partners__sub { margin: 12px 0 0; font-size: 15px; line-height: 1.65; color: var(--muted); }
.partners__head .eyebrow { justify-content: center; margin-bottom: 10px; }
.partners__title { font-size: clamp(19px, 1.76vw, 25px); }
.partners__cta { text-align: center; margin-top: clamp(18px, 2vw, 26px); }

/* ---------- Honeycomb ----------
   Two clusters of nine facing a larger core cell that carries our own mark.
   Rows ride up a quarter of a hex and every other row steps across by half a
   cell; the two together are what make it pack.
*/
.partners__hive { display: flex; justify-content: center; }
.hive {
  --hex-w: clamp(52px, 5.6vw, 86px);
  --hex-h: calc(var(--hex-w) * 1.1547); /* a pointy-top hex is 2/root-3 as tall as wide */
  --hex-gap: clamp(5px, 0.6vw, 9px);
  --hex-shape: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.8vw, 30px);
}
.hive__cluster { display: grid; justify-items: start; }
.hive__row { display: flex; gap: var(--hex-gap); }
.hive__row + .hive__row { margin-top: calc(var(--hex-h) * -0.25 + var(--hex-gap) * 0.5); }
.hive__row:nth-child(even) { margin-left: calc(var(--hex-w) * 0.5 + var(--hex-gap) * 0.5); }
/* The right cluster mirrors the left, so the two lean into the core rather than
   both drifting the same way. */
.hive__cluster:last-of-type { justify-items: end; }
.hive__cluster:last-of-type .hive__row:nth-child(even) {
  margin-left: 0;
  margin-right: calc(var(--hex-w) * 0.5 + var(--hex-gap) * 0.5);
}

.logo-cell {
  position: relative;
  width: var(--hex-w);
  height: var(--hex-h);
  clip-path: var(--hex-shape);
  display: grid;
  place-items: center;
  /* Plain white, no rim: the grey section ground is a shade off white, which is
     enough to give each hexagon its own edge. */
  background: #fff;
  transition: background 0.4s var(--ease);
}
.logo-cell:hover,
.logo-cell.is-swapping { background: #f1f7fe; }

.logo-cell__name {
  position: relative;
  font-size: clamp(10px, 1vw, 13px);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(14, 22, 32, 0.34);
}
.logo-cell__img {
  grid-area: 1 / 1;
  position: relative;
  max-width: 62%;
  max-height: calc(16px * var(--s, 1));
  object-fit: contain;
  transition: transform 0.6s var(--ease);
  will-change: opacity, filter, transform;
}
.logo-cell:hover .logo-cell__img { transform: scale(1.06); }

/* diagonal light sweep played on every swap */
.logo-cell__shine {
  position: absolute;
  inset: -20% auto -20% -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(156, 188, 227, 0.5), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  opacity: 0;
  z-index: 2;
}

/* ---------- Core cell ----------
   Sized off --hex-w rather than a percentage: percentage padding and widths
   resolve against the flex container here, not the hexagon. The artwork is navy
   on opaque white with no alpha, so it takes the same white chip the footer and
   mobile menu give it rather than a filter.
*/
.hive__core {
  flex: none;
  width: calc(var(--hex-w) * 2.3);
  height: calc(var(--hex-w) * 2.3 * 1.1547);
  clip-path: var(--hex-shape);
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 80% 70% at 50% 14%, rgba(47, 120, 196, 0.5), transparent 64%),
    linear-gradient(155deg, #16304c 0%, #0a1b2e 100%);
}
.hive__core img {
  width: calc(var(--hex-w) * 1.3);
  height: auto;
  max-width: none;
  padding: 5px 7px;
  border-radius: 7px;
  background: #fff;
}

@media (max-width: 767.98px) {
  /* Side by side the clusters get too narrow, so they stack around the core. */
  .hive { flex-direction: column; gap: clamp(12px, 2.4vw, 20px); --hex-w: clamp(56px, 17vw, 82px); }
  .hive__core { width: calc(var(--hex-w) * 2); height: calc(var(--hex-w) * 2 * 1.1547); }
}

.partners__note {
  max-width: 620px;
  margin: clamp(12px, 1.4vw, 18px) auto 0;
  text-align: center;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--muted);
}


/* ==========================================================================
   Home: blogs
   Frosted cards. The section carries two soft blue auras behind them purely so the
   glass has something to refract — over a flat colour a blur reads as nothing.
   ========================================================================== */

.blogs {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #f2ece1 0%, var(--ivory) 62%, var(--ivory) 100%);
  padding-block: clamp(30px, 3.17vw, 46px);
}
.blogs::before,
.blogs::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(90px);
}
.blogs::before { width: 540px; height: 540px; left: -150px; top: -130px; background: rgba(106, 151, 204, 0.3); }
.blogs::after { width: 470px; height: 470px; right: -130px; bottom: -150px; background: rgba(6, 59, 115, 0.22); }
.blogs > .container-xl { position: relative; z-index: 1; }

/* ---------- Featured projects ----------
   Shares .blogs__grid and .bcard with the blog pages, but sits on white.
   The cards there are frosted glass leaning on the section's blue auras to
   have something to refract; with no auras and a white ground that reads as
   nothing, so here they go solid with a plain shadow instead.
*/
.fprojects { background: #fff; padding-block: clamp(30px, 3.17vw, 46px); }
.fprojects .bcard {
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: transparent;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(14, 22, 32, 0.05), 0 10px 24px -16px rgba(14, 22, 32, 0.3);
}
.fprojects .bcard:hover {
  box-shadow: 0 2px 5px rgba(14, 22, 32, 0.06), 0 22px 40px -18px rgba(14, 22, 32, 0.32);
}
/* the glass edge-light has nothing to catch on a solid card */
.fprojects .bcard::before { display: none; }

/*
  No hover mark on the card edge at all. ::after has to stay switched off rather
  than just removed: the base .bcard (shared with the blog pages) uses it for a
  sheen that sweeps across the glass, and on a solid card that reads as a grey
  smear. The lift and the shadow carry the hover on their own.
*/
.fprojects .bcard::after { display: none; }
.fprojects .bcard:hover { transform: translateY(-4px); border-color: transparent; }

/*
  The button drops the gradient, inner highlight and 45-degree spin for a flat
  square that nudges along the arrow's own axis - it reads as "go" rather than
  as a dial being turned.
*/
.fprojects .bcard__btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 0;
  background: var(--ink);
  box-shadow: none;
  transition: background 0.4s var(--ease-hover), transform 0.5s var(--ease);
}
.fprojects .bcard:hover .bcard__btn {
  background: var(--brand-deep);
  box-shadow: none;
  transform: translate(3px, -3px);
}
.fprojects .bcard__read { color: var(--ink); }

/* ---------- Featured projects slider ----------
   Arrows sit outside the cards on either side. Whole cards at every breakpoint -
   3 up, then 2, then 1 - so none is ever sliced by the track edge.
*/
.fpslider { position: relative; }
.fpslider__track {
  --gap: clamp(16px, 1.9vw, 28px);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * var(--gap)) / 3);
  gap: var(--gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* room for the card's hover lift and shadow; scroll-padding matches the inline
     padding so the track still rests at scrollLeft 0 */
  padding: 6px 8px 22px;
  margin: -6px -8px -22px;
  scroll-padding-inline: 8px;
}
.fpslider__track::-webkit-scrollbar { display: none; }
.fpslider__track > * { scroll-snap-align: start; }

.fpslider__btn {
  position: absolute;
  top: 38%;
  z-index: 3;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  box-shadow: 0 6px 18px -8px rgba(14, 22, 32, 0.45);
  transform: translateY(-50%);
  transition: background 0.4s var(--ease-hover), border-color 0.4s, color 0.4s, opacity 0.4s;
}
.fpslider__btn--prev { left: clamp(-22px, -1.6vw, -8px); }
.fpslider__btn--next { right: clamp(-22px, -1.6vw, -8px); }
.fpslider__btn:not(:disabled):hover {
  background: var(--brand-deep);
  border-color: var(--brand-deep);
  color: #fff;
}
.fpslider__btn:disabled { opacity: 0.3; cursor: default; }

@media (max-width: 991.98px) {
  .fpslider__track { grid-auto-columns: calc((100% - var(--gap)) / 2); }
}
@media (max-width: 575.98px) {
  .fpslider__track { grid-auto-columns: 100%; }
  .fpslider__btn { width: 40px; height: 40px; }
  .fpslider__btn--prev { left: -6px; }
  .fpslider__btn--next { right: -6px; }
}

.bcard__place {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

.blogs__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.9vw, 28px); }

.bcard {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px;
  border-radius: var(--radius-lg);
  color: var(--text);
  background: linear-gradient(152deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.64) 100%);
  backdrop-filter: blur(20px) saturate(165%);
  -webkit-backdrop-filter: blur(20px) saturate(165%);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow:
    0 18px 42px -26px rgba(18, 49, 95, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -1px 0 rgba(255, 255, 255, 0.3);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease), border-color 0.6s var(--ease);
}
/* the light catching the top-left edge */
.bcard::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(95% 62% at 4% -14%, rgba(255, 255, 255, 0.62), transparent 46%);
}
/* and a highlight that slides across on hover */
.bcard::after {
  content: '';
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: -65%;
  width: 45%;
  z-index: 3;
  pointer-events: none;
  transform: skewX(-18deg);
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transition: left 0.9s var(--ease);
}
.bcard:hover::after { left: 125%; }
.bcard:hover {
  transform: translateY(-8px);
  border-color: rgba(106, 151, 204, 0.6);
  box-shadow:
    0 34px 62px -28px rgba(18, 49, 95, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.bcard:focus-visible { outline: 2px solid var(--brand-deep); outline-offset: 3px; }

.bcard__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  box-shadow: 0 10px 24px -16px rgba(18, 49, 95, 0.65);
}
.bcard__media img { width: 100%; height: 100%; object-fit: cover; }
.bcard__tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 8px 20px -12px rgba(18, 49, 95, 0.7);
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.bcard__body { position: relative; z-index: 1; padding: 16px 12px 8px; display: flex; flex-direction: column; flex: 1; }
.bcard__date {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-deep);
}
.bcard__title { font-size: 17px; margin: 6px 0 6px; transition: color 0.3s; }
.bcard:hover .bcard__title { color: var(--brand-deep); }
.bcard__excerpt {
  font-size: 14px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--muted);
  margin: 0 0 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bcard__foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; }
.bcard__read { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.bcard__btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  color: #fff;
  background: linear-gradient(145deg, var(--brand-deep), #12315f);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 12px 24px -14px rgba(18, 49, 95, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: background 0.4s, transform 0.6s var(--ease), box-shadow 0.4s;
}
.bcard:hover .bcard__btn {
  transform: rotate(45deg);
  background: linear-gradient(145deg, var(--brand), var(--brand-deep));
  box-shadow: 0 16px 28px -14px rgba(18, 49, 95, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

@media (max-width: 991.98px) {
  .blogs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blogs__grid > :last-child { grid-column: 1 / -1; }
  .blogs__grid > :last-child .bcard__media { aspect-ratio: 32 / 9; }
}
@media (max-width: 575.98px) {
  .blogs__grid { grid-template-columns: 1fr; }
  .blogs__grid > :last-child .bcard__media { aspect-ratio: 16 / 9; }
}
@media (prefers-reduced-motion: reduce) {
  .bcard, .bcard__title, .bcard__btn, .bcard::after { transition: none; }
  .bcard:hover { transform: none; }
  .bcard:hover .bcard__btn { transform: none; }
  .bcard:hover::after { left: -65%; }
}


/* ==========================================================================
   Inner page hero
   ========================================================================== */

.phero {
  position: relative;
  min-height: min(52svh, 470px);
  display: flex;
  align-items: flex-end;
  padding: 128px 0 60px; /* top clears the fixed 76px navbar */
  color: #fff;
  background: var(--ink);
  overflow: hidden;
}
.phero__bg { position: absolute; inset: 0; }
.phero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.phero__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(14, 22, 32, 0.9) 0%, rgba(14, 22, 32, 0.55) 55%, rgba(14, 22, 32, 0.25) 100%),
    linear-gradient(180deg, rgba(14, 22, 32, 0.55) 0%, transparent 35%, rgba(14, 22, 32, 0.6) 100%);
}
.phero__inner { position: relative; z-index: 2; }

.phero__crumbs {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  margin-bottom: 20px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
}
.phero__crumbs a { color: rgba(255, 255, 255, 0.7); transition: color 0.3s; }
.phero__crumbs a:hover { color: var(--gold); }
.phero__crumbs svg { opacity: 0.5; }
.phero__crumbs span { color: var(--gold); }

.phero__title {
  font-size: clamp(32px, 4.37vw, 60px);
  line-height: 1.1;
  letter-spacing: -0.012em;
  margin: 0 0 22px;
  max-width: 900px;
}
.phero__title .line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.phero__title .line > span { display: inline-block; }
/* Flat, like the home banner. Dark blue is not an option here: this sits on a
   dark photograph, so the accent has to stay light to stay legible. */
.phero__title em {
  font-style: normal;
  color: var(--accent);
}
.phero__text {
  max-width: 560px;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}

.phero__scroll {
  position: absolute;
  right: max(16px, calc((100vw - 1320px) / 2 + 28px));
  bottom: 96px;
  z-index: 2;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  border: 1px solid rgba(106, 151, 204, 0.5);
  transition: background 0.4s, color 0.4s;
}
.phero__scroll:hover { background: var(--gold); color: var(--ink); }
.phero__scroll svg { animation: nudge 2s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(4px); } }

@media (max-width: 767.98px) {
  .phero { padding: 104px 0 48px; min-height: min(46svh, 380px); }
  .phero__scroll { display: none; }
}


/* ==========================================================================
   About: story
   ========================================================================== */

.story { background: var(--ivory); overflow: hidden; position: relative; padding-bottom: clamp(56px, 6vw, 80px); }
.story__inner { position: relative; z-index: 1; }

/* ---------- Gate sketches ---------- */
.gate {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(260px, 30vw, 460px);
  pointer-events: none;
  z-index: 0;
}
.gate__door {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  will-change: transform;
}
.gate__door img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply; /* drop the white paper, keep the lines */
  opacity: 0.75;
}
.gate__door--l { right: 50%; }
.gate__door--l img { object-position: right bottom; }
.gate__door--r { left: 50%; }
.gate__door--r img { object-position: left bottom; transform: scaleX(-1); } /* mirrored for symmetry */

/* ---------- Manifesto ---------- */
.manifesto { max-width: 1120px; margin: 0 auto clamp(64px, 8vw, 110px); text-align: center; }
.manifesto .eyebrow { justify-content: center; }
.manifesto__text {
  /* sized for the current copy: any bigger and it runs to six lines */
  font-size: clamp(19px, 2.8vw, 40px);
  line-height: 1.32;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
}
.mw { opacity: 0.16; transition: opacity 0.25s linear; }
.mpill {
  display: inline-block;
  width: 2.4em;
  height: 1.05em;
  margin: 0 0.28em 0 0.02em;
  border-radius: 999px;
  overflow: hidden;
  vertical-align: -0.12em;
  box-shadow: 0 10px 24px -12px rgba(14, 22, 32, 0.5);
  transform: scale(0.6);
  opacity: 0.3;
}
.mpill img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Bento ---------- */
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(180px, auto);
  gap: 18px;
}
.tile {
  position: relative;
  margin: 0;
  border-radius: 28px;
  overflow: hidden;
  padding: clamp(26px, 2.6vw, 38px);
  background: #fff;
  border: 1px solid var(--line);
}
.tile__kicker {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.tile__num { display: block; font-size: clamp(44px, 4.6vw, 68px); line-height: 1; letter-spacing: -0.03em; margin-top: auto; }

/* photo */
.tile--photo { grid-column: 1 / span 5; grid-row: span 2; padding: 0; border: 0; min-height: 460px; }
.tile--photo img { position: absolute; inset: 0; width: 100%; height: 115%; object-fit: cover; }
.tile--photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(14, 22, 32, 0.85)); }
.tile--photo__cap { position: absolute; left: 30px; bottom: 28px; z-index: 1; display: grid; color: #fff; }
.tile--photo__label { font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brand-deep); }
.tile--photo__year { font-size: clamp(56px, 6vw, 84px); line-height: 0.95; letter-spacing: -0.03em; }
.tile--photo__city { margin-top: 6px; font-size: 14px; color: rgba(255, 255, 255, 0.7); }

/* story */
.tile--story { grid-column: 6 / span 7; }
.tile__title { font-size: clamp(20px, 1.85vw, 27px); margin: 0 0 16px; }
.tile__title em { font-style: normal; color: var(--gold-deep); }
.tile--story p { color: var(--muted); line-height: 1.75; margin: 0 0 12px; }
.tile--story p:last-child { margin-bottom: 0; }

/* dark stat */
.tile--dark { grid-column: 6 / span 3; background: var(--ink); border: 0; color: #fff; display: flex; flex-direction: column; }
.tile--dark .tile__kicker { color: var(--gold); }
.tile--dark .tile__num { color: #fff; }
.tile__ring {
  position: absolute;
  right: -50px;
  top: -50px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 1px solid rgba(106, 151, 204, 0.35);
  box-shadow: 0 0 0 22px rgba(106, 151, 204, 0.06), 0 0 0 44px rgba(106, 151, 204, 0.04);
}

/* gold stat */
.tile--gold {
  grid-column: 9 / span 4;
  border: 0;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  background: radial-gradient(circle at 20% 0%, var(--brand-light), var(--brand) 60%, var(--brand-deep));
}
.tile--gold .tile__kicker { color: rgba(14, 22, 32, 0.7); }
.tile--gold__sub { margin-top: 10px; font-size: 14px; font-weight: 600; color: rgba(14, 22, 32, 0.75); }

/* promise list */
.tile--list { grid-column: 1 / span 5; background: var(--sand); border: 0; }
.promise { list-style: none; padding: 0; margin: 18px 0 0; display: grid; }
.promise li { display: flex; gap: 16px; padding: 14px 0; font-weight: 500; line-height: 1.5; border-top: 1px solid rgba(14, 22, 32, 0.1); }
.promise__no { flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--gold-deep); padding-top: 3px; }

/* quote */
.tile--quote { grid-column: 6 / span 7; display: grid; grid-template-columns: 170px 1fr; gap: 28px; align-items: center; }
.tile--quote__img { aspect-ratio: 1; border-radius: 22px; overflow: hidden; }
.tile--quote__img img { width: 100%; height: 100%; object-fit: cover; }
.tile--quote blockquote { font-size: clamp(18px, 1.6vw, 23px); line-height: 1.45; color: var(--ink); margin: 0 0 16px; }
.tile--quote figcaption { display: grid; gap: 2px; }
.tile--quote figcaption strong { font-weight: 600; }
.tile--quote figcaption span { font-size: 13px; color: var(--muted); }

.tile--dark, .tile--gold, .tile--story, .tile--list, .tile--quote { transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease); }
.tile--dark:hover, .tile--gold:hover, .tile--story:hover, .tile--list:hover, .tile--quote:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -36px rgba(14, 22, 32, 0.45);
}

@media (max-width: 991.98px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .tile--photo, .tile--story, .tile--list, .tile--quote { grid-column: 1 / -1; grid-row: auto; }
  .tile--photo { min-height: 380px; }
  .tile--dark, .tile--gold { grid-column: span 1; min-height: 200px; }
}
@media (max-width: 575.98px) {
  .bento { grid-template-columns: 1fr; gap: 14px; }
  .tile--dark, .tile--gold { grid-column: 1 / -1; min-height: 170px; }
  .tile--quote { grid-template-columns: 1fr; }
  .tile--quote__img { aspect-ratio: 16 / 9; }
  .tile { border-radius: 22px; }
}


/* ==========================================================================
   About: mission & vision
   ========================================================================== */

.purpose { background: var(--ivory); overflow: hidden; padding-top: clamp(8px, 1.5vw, 24px); padding-bottom: clamp(44px, 4.6vw, 66px); }

/* dashed corner loops */
.purpose__loop {
  position: absolute;
  width: clamp(140px, 16vw, 220px);
  stroke: var(--gold);
  stroke-width: 1.6;
  stroke-dasharray: 7 7;
  stroke-linecap: round;
  opacity: 0.7;
  pointer-events: none;
}
.purpose__loop path { animation: dash 30s linear infinite; }
.purpose__loop--tl { top: 0; left: 0; }
.purpose__loop--br { right: 0; bottom: 0; }
@keyframes dash { to { stroke-dashoffset: -280; } }

/* ---------- Card ---------- */
.mv-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 22px 44px -22px rgba(14, 22, 32, 0.45), 0 2px 6px rgba(14, 22, 32, 0.06);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.mv-card:hover { transform: translateY(-6px); box-shadow: 0 32px 60px -26px rgba(14, 22, 32, 0.5), 0 2px 6px rgba(14, 22, 32, 0.06); }

.mv-card__top {
  position: relative;
  flex: 1;
  padding: clamp(22px, 2.2vw, 30px) clamp(24px, 3vw, 40px) clamp(56px, 5.4vw, 72px);
  color: #fff;
  background: linear-gradient(160deg, #1e3a52 0%, #16283a 55%, var(--ink) 100%);
}
.mv-card__title {
  text-align: center;
  text-transform: uppercase;
  font-size: clamp(22px, 2.18vw, 30px);
  font-weight: 500;
  letter-spacing: 0.01em;
  margin: 0 auto 16px;
  padding-bottom: 10px;
  width: fit-content;
  background: linear-gradient(90deg, transparent, var(--gold), transparent) bottom / 100% 1px no-repeat;
}
.mv-card__text { margin: 0; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.7; color: rgba(255, 255, 255, 0.88); }

/* ---------- Icon ---------- */
.mv-card__icon {
  position: relative;
  width: 64px;
  height: 64px;
  margin: 0 auto 8px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--gold);
  border: 1px solid rgba(106, 151, 204, 0.45);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.36s var(--ease);
}
.mv-card__icon { width: 48px !important; height: 48px !important; }
.mv-card__icon svg { width: 24px; height: 24px; }
.mv-card__text { position: relative; z-index: 1; }

/* skyline line art behind the text */
.mv-card__skyline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(22px, 2.4vw, 32px);
  width: 100%;
  height: 38%;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.2;
  stroke-linejoin: round;
  opacity: 0.22;
  pointer-events: none;
  transition: opacity 0.36s var(--ease), transform 0.48s var(--ease);
}
.mv-card__skyline rect { fill: var(--gold); stroke: none; opacity: 0.6; }
.mv-card:hover .mv-card__skyline { opacity: 0.38; transform: translateY(-4px); }

/* house / tower outlines in the section background */
.purpose__house {
  position: absolute;
  width: clamp(160px, 17vw, 260px);
  stroke: var(--gold-deep);
  stroke-width: 1.4;
  stroke-linejoin: round;
  opacity: 0.18;
  pointer-events: none;
}
.purpose__house--l { left: 3%; bottom: 8%; }
.purpose__house--r { right: 3%; top: 10%; }
@media (max-width: 991.98px) { .purpose__house { display: none; } }
.mv-card__icon::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  opacity: 0;
}
.mv-card:hover .mv-card__icon { background: var(--gold); color: var(--ink); transform: translateY(-3px); }
.mv-card:hover .mv-card__icon::after { animation: ripple 1.6s ease-out infinite; }
@keyframes ripple { from { transform: scale(1); opacity: 0.8; } to { transform: scale(1.6); opacity: 0; } }

/* ---------- Waves: a two-period strip that flows sideways on hover ---------- */
.mv-card__waves {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(44px, 4.6vw, 64px);
  overflow: hidden;
}
.mv-card__wave {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 200%;
  height: 100%;
  animation: wave-flow 6s linear infinite paused;
}
.mv-card__wave--white path { fill: #fff; }
.mv-card__wave--gold path { fill: var(--gold); }
.mv-card__wave--gold {
  opacity: 0;
  transform-origin: bottom;
  animation-duration: 4.2s;
  animation-direction: reverse;
  transition: opacity 0.5s var(--ease);
}
.mv-card:hover .mv-card__wave { animation-play-state: running; }
.mv-card:hover .mv-card__wave--gold { opacity: 0.55; }
@keyframes wave-flow { to { translate: -50% 0; } }
/* gold layer sits a little higher so it peeks above the white one */
.mv-card__wave--gold { bottom: 10px; }

.mv-card__bottom { display: grid; place-items: center; padding: 0 0 12px; }
.mv-card__flourish { width: 120px; color: var(--gold-deep); }

@media (max-width: 575.98px) {
  .purpose__loop { width: 110px; opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) {
  .purpose__loop path { animation: none; }
}


/* ==========================================================================
   About: FAQ
   ========================================================================== */

.faq { background: var(--sand); }

.faq__aside { position: sticky; top: 120px; }
.faq__title { font-size: clamp(24px, 2.52vw, 35px); }

/* ---------- Help card ---------- */
.help {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin-top: 36px;
  padding: 32px;
  border-radius: 26px;
  background: var(--ink);
  color: #fff;
}
.help__glow {
  position: absolute;
  width: 260px;
  height: 260px;
  right: -90px;
  top: -110px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(106, 151, 204, 0.45), transparent 70%);
}
.help__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--gold);
  border: 1px solid rgba(106, 151, 204, 0.45);
  margin-bottom: 18px;
}
.help__title { font-size: 18px; margin: 0 0 8px; }
.help__text { color: rgba(255, 255, 255, 0.65); margin: 0 0 22px; }
.help__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.help__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 22px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: background 0.35s, color 0.35s, border-color 0.35s;
}
.help__btn:hover { border-color: var(--gold); color: var(--gold); }
.help__btn--gold { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.help__btn--gold:hover { background: #fff; border-color: #fff; color: var(--ink); }

/* ---------- Accordion ---------- */
.acc { display: grid; gap: 12px; }
.acc__item {
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid transparent;
  transition: background 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.acc__item:hover { background: rgba(255, 255, 255, 0.85); }
.acc__item.is-open {
  background: #fff;
  border-color: rgba(106, 151, 204, 0.35);
  box-shadow: 0 24px 50px -32px rgba(14, 22, 32, 0.35);
}
.acc__h { margin: 0; font-size: inherit; }
.acc__btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  border: 0;
  background: none;
  text-align: left;
  color: var(--ink);
}
.acc__no {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--gold-deep);
  opacity: 0.7;
  transition: opacity 0.3s;
}
.is-open .acc__no { opacity: 1; }
.acc__q { flex: 1; font-family: var(--font-head); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.35; }
.acc__toggle {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.5s var(--ease);
}
.acc__toggle i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1.6px;
  background: var(--ink);
  transform: translate(-50%, -50%);
  transition: transform 0.45s var(--ease), background 0.4s;
}
.acc__toggle i:last-child { transform: translate(-50%, -50%) rotate(90deg); }
.acc__btn:hover .acc__toggle { border-color: var(--gold); }
.is-open .acc__toggle { background: var(--gold); border-color: var(--gold); transform: rotate(180deg); }
.is-open .acc__toggle i:last-child { transform: translate(-50%, -50%) rotate(0deg); }

/* smooth height animation without JS measuring */
.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s var(--ease);
}
.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__inner { overflow: hidden; }
.acc__inner p {
  margin: 0;
  padding: 0 24px 24px 60px;
  color: var(--muted);
  line-height: 1.75;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.4s var(--ease), transform 0.5s var(--ease);
}
.is-open .acc__inner p { opacity: 1; transform: none; transition-delay: 0.12s; }

@media (max-width: 991.98px) {
  .faq__aside { position: static; }
}
@media (max-width: 575.98px) {
  .acc__btn { padding: 18px; gap: 12px; }
  .acc__no { display: none; }
  .acc__inner p { padding: 0 18px 20px; }
  .help { padding: 26px; }
}


/* ==========================================================================
   Contact page
   ========================================================================== */

/* channels */
.channels { background: var(--ivory); padding: clamp(24px, 2.8vw, 40px) 0 0; }
.channels__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.channel {
  position: relative;
  display: flex;
  gap: 13px;
  height: 100%;
  padding: clamp(18px, 2vw, 26px) clamp(14px, 1.5vw, 20px);
  border-left: 1px solid var(--line);
  transition: background 0.4s var(--ease);
}
.channels__grid li:first-child .channel { border-left: 0; padding-left: 0; }
.channel:hover { background: #fff; }
.channel__icon { flex-shrink: 0; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--ivory); color: var(--gold-deep); transition: background 0.3s, color 0.3s; }
.channel:hover .channel__icon { background: var(--ink); color: var(--gold); }
.channel__body { display: grid; gap: 2px; min-width: 0; padding-right: 20px; }
.channel__body small { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.channel__body strong { font-size: 15.5px; color: var(--ink); overflow-wrap: anywhere; }
.channel__body span { font-size: 12.5px; color: var(--muted); }
.channel__arrow { position: absolute; top: 18px; right: 16px; color: var(--gold-deep); transition: transform 0.4s var(--ease); }
.channel:hover .channel__arrow { transform: rotate(45deg); }

/* form + map */
.cform { background: var(--ivory); }
.cform__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 28px; align-items: stretch; }
.cform__card { padding: clamp(26px, 3.4vw, 46px); border-radius: 26px; background: #fff; border: 1px solid var(--line); }
.cform__title { font-size: clamp(24px, 2.35vw, 34px); margin-bottom: 10px; }
.cform__lead { color: var(--muted); margin-bottom: 26px; }
.cform__side { display: grid; grid-template-rows: 1fr auto; gap: 16px; }
.cform__map { position: relative; min-height: 320px; border-radius: 26px; overflow: hidden; background: var(--sand); }
.cform__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(0.3) sepia(0.1); }
.hq { padding: 26px 28px; border-radius: 26px; background: var(--ink); color: #fff; }
.hq__tag { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.hq__addr { display: flex; gap: 10px; margin: 10px 0 12px; line-height: 1.6; color: rgba(255, 255, 255, 0.85); }
.hq__addr svg { flex-shrink: 0; margin-top: 3px; color: var(--gold); }
.hq .link-arrow { color: var(--gold-2); font-size: 14px; }
.hours { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line-light); display: grid; gap: 8px; }
.hours div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.hours dt { font-weight: 500; color: rgba(255, 255, 255, 0.6); }
.hours dd { margin: 0; font-weight: 600; text-align: right; }

/* offices */
.offices { background: #fff; }
.offices__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 420px)); justify-content: center; gap: 20px; }
.office { display: flex; flex-direction: column; padding: 28px; border-radius: 24px; border: 1px solid var(--line); background: #fff; transition: box-shadow 0.4s, transform 0.4s var(--ease), border-color 0.3s; }
.office:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); border-color: transparent; }
.office__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.office__tag { padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--sand); color: var(--gold-deep); }
.office__pin { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--gold-deep); background: var(--ivory); }
.office__city { font-size: 28px; margin: 0 0 8px; }
.office__addr { color: var(--muted); line-height: 1.65; margin: 0 0 18px; }
.office__links { list-style: none; padding: 16px 0 0; margin: 0 0 18px; display: grid; gap: 8px; border-top: 1px solid var(--line); }
.office__links a { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; transition: color 0.3s; }
.office__links a:hover { color: var(--gold-deep); }
.office__links svg { color: var(--gold-deep); flex-shrink: 0; }
.office__dir { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; transition: background 0.3s, color 0.3s; }
.office__dir:hover { background: var(--gold); color: var(--ink); }

@media (max-width: 1199.98px) { .channels__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 991.98px) {
  .cform__grid, .offices__grid { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
  .channels__grid { grid-template-columns: 1fr; margin-top: -40px; }
}


/* ==========================================================================
   Careers page
   ========================================================================== */

/* why join */

/* perks */
.perks__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.perks__grid li { padding: 28px; border-radius: 22px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(106, 151, 204, 0.2); transition: border-color 0.4s, transform 0.4s var(--ease); }
.perks__icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--gold); color: var(--ink); margin-bottom: 18px; }
.perks__grid h3 { font-size: 19px; margin: 0 0 8px; }
.perks__grid p { margin: 0; color: rgba(255, 255, 255, 0.62); font-size: 14.5px; line-height: 1.65; }

/* jobs */
.jobs { background: #fff; }
.jobs__head { max-width: 700px; margin-bottom: clamp(26px, 3vw, 44px); }
.jobs__title { font-size: clamp(26px, 3.2vw, 42px); line-height: 1.12; letter-spacing: -0.02em; margin: 0; }
.jobs__title em { font-style: normal; color: var(--brand-deep); }
.jobs__lead { margin: 14px 0 0; max-width: 560px; font-size: 15px; line-height: 1.72; color: var(--muted); }
/* photograph on the left, the roles listed against it */
.jobs__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr);
  gap: clamp(22px, 3.2vw, 56px);
  align-items: start;
}
.jobs__photo { margin: 0; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 4.7; }
.jobs__photo img { width: 100%; height: 100%; object-fit: cover; }
.jobs__list { display: grid; align-content: start; border-top: 1px solid var(--line); }
/* rows under hairlines, not boxes */
.job { border-bottom: 1px solid var(--line); }
.job[hidden] { display: none; }
.job__row {
  list-style: none;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 22px);
  padding: clamp(17px, 1.9vw, 26px) 2px;
  cursor: pointer;
}
.job__row::-webkit-details-marker { display: none; }
.job__title { flex: 1; min-width: 0; font-family: var(--font-head); font-size: clamp(17px, 1.75vw, 24px); font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
.job__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13.5px; color: var(--muted); }
.job__meta span { display: inline-flex; align-items: center; gap: 6px; }
.job__meta svg { color: var(--gold-deep); }
/* the chip only names the terms of the role that is actually open */
.job__type { display: none; }
.job[open] .job__type { display: inline-flex; align-items: center; flex-shrink: 0; padding: 7px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; background: linear-gradient(150deg, #eaf3fd 0%, #d7e7fa 100%); border: 1px solid rgba(6, 59, 115, 0.16); color: var(--brand-deep); }
.job__toggle { position: relative; flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); transition: background 0.3s, border-color 0.3s, transform 0.4s var(--ease); }
.job__toggle i::before, .job__toggle i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; background: var(--ink); transform: translate(-50%, -50%); }
.job__toggle i::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform 0.3s; }
.job[open] .job__toggle { background: var(--gold); border-color: var(--gold); transform: rotate(180deg); }
.job[open] .job__toggle i::after { transform: translate(-50%, -50%) rotate(0); }
.job__body { padding: 0 24px 26px; border-top: 1px dashed var(--line); margin: 0 24px; padding: 22px 0 26px; }
.job__summary { color: #4a5563; line-height: 1.75; }
.job__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin: 6px 0 24px; }
.job__cols h4 { font-size: 16px; margin: 0 0 10px; }
.job__cols ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.job__cols li { position: relative; padding-left: 20px; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.job__cols li::before { content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }

/* hiring process */
.hire { background: var(--ivory); }
.hire__steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.hire__steps h3 { font-size: clamp(17px, 1.6vw, 21px); margin: 0 0 9px; }
.hire__steps p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.6; }

/* apply */
.aform { padding: clamp(24px, 3vw, 40px); border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: 0 2px 6px rgba(14, 22, 32, 0.04), 0 36px 64px -40px rgba(6, 22, 45, 0.4); color: var(--ink); }
.aform__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.aform__f { display: grid; gap: 6px; margin: 0; min-width: 0; }
.aform__f--full { grid-column: 1 / -1; }
.aform__f > span:first-child { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.aform input:not([type='file']), .aform select, .aform textarea { width: 100%; height: 50px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--ivory); font-size: 15px; color: var(--ink); outline: none; transition: border-color 0.3s; }
.aform textarea { height: auto; padding: 14px 16px; resize: vertical; }
.aform input:focus, .aform select:focus, .aform textarea:focus { border-color: var(--brand-deep); box-shadow: 0 0 0 3px rgba(6, 59, 115, 0.1); }
.aform__f em { display: none; font-style: normal; font-size: 12px; color: #d9534f; }
.aform__f.is-invalid em { display: block; }
.aform__f.is-invalid input, .aform__f.is-invalid .aform__drop { border-color: #d9534f; }
.aform__file input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.aform__drop { display: flex; align-items: center; justify-content: center; gap: 10px; height: 64px; border-radius: 14px; border: 1.5px dashed rgba(6, 59, 115, 0.55); background: #fffaf1; color: var(--gold-deep); cursor: pointer; font-size: 14px; transition: background 0.3s; }
.aform__drop:hover { background: var(--sand); }
.aform__drop svg { transform: rotate(180deg); } /* upload arrow */
.aform__file input:focus-visible + .aform__drop { outline: 2px solid var(--gold); outline-offset: 2px; }
.aform__drop b { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 80%; }
.aform__submit { width: 100%; height: 56px; margin-top: 18px; border: 0; border-radius: 14px; background: linear-gradient(150deg, #2d74d8 0%, #063b73 100%); color: #fff; font-weight: 700; font-size: 15px; transition: background 0.3s; }
.aform__submit:hover { background: linear-gradient(150deg, #3b83e4 0%, #0a4a8c 100%); }
.aform.is-loading .aform__submit { opacity: 0.6; pointer-events: none; }
.aform.is-done > :not(.aform__done) { display: none; }
.aform__done { text-align: center; padding: 40px 10px; }
.aform.is-done .aform__done { display: block; }
.aform__done h3 { font-size: 26px; margin: 0 0 10px; }
.aform__done p { color: var(--muted); margin: 0; }

@media (max-width: 991.98px) {
  .perks__grid { grid-template-columns: repeat(2, 1fr); }
  .hire__steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px) {
  .perks__grid, .hire__steps, .job__cols, .aform__grid { grid-template-columns: 1fr; }
  .job__row { flex-wrap: wrap; gap: 12px; padding: 18px; }
  .job__type { order: 3; }
  .job__body { margin: 0 18px; }
  .jobs__filters { border-radius: 20px; }
}


/* ==========================================================================
   Project card (listing, offerings, similar projects)
   ========================================================================== */

.pc {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(14, 22, 32, 0.05), 0 14px 30px -20px rgba(14, 22, 32, 0.3);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
}
.pc:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: 0 2px 6px rgba(14, 22, 32, 0.06), 0 30px 54px -22px rgba(6, 22, 45, 0.42);
}
/* The picture carries the name and the place, so the whole plate is one link and
   the body is free to lead on the number people actually scan for. */
.pc__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 2.75;
  overflow: hidden;
  color: #fff;
}
.pc__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.pc:hover .pc__media img { transform: scale(1.06); }
.pc__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 16, 28, 0.42) 0%, transparent 34%, rgba(8, 16, 28, 0.12) 52%, rgba(8, 16, 28, 0.82) 100%);
}
.pc__status, .pc__type {
  position: absolute;
  top: 13px;
  z-index: 2;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  max-width: calc(50% - 18px);
  overflow: hidden;
  text-overflow: ellipsis;
}
/* warm on the left for where the project stands, cool glass on the right for what it is */
.pc__status { left: 13px; background: linear-gradient(150deg, #c79a4e 0%, #a97f36 100%); color: #fff; }
.pc__type {
  right: 13px;
  background: rgba(10, 20, 34, 0.56);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}
.pc__go {
  position: absolute;
  right: 13px;
  bottom: 13px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--brand-deep);
  background: #fff;
  transition: transform 0.45s var(--ease);
}
.pc:hover .pc__go { transform: rotate(45deg); }
.pc__head { position: absolute; left: 15px; right: 58px; bottom: 13px; z-index: 2; display: block; }
.pc__name { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.2; margin: 0; color: #fff; }
.pc__loc {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.82);
}
.pc__loc svg { flex: none; }
.pc__body { padding: clamp(14px, 1.3vw, 17px); display: flex; flex-direction: column; flex: 1; }
.pc__dev {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand-deep);
}
.pc__dev svg { flex: none; color: var(--brand); }
.pc__price {
  display: grid;
  gap: 1px;
  margin: 7px 0 0;
  font-family: var(--font-head);
  font-size: clamp(18px, 1.7vw, 22px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}
.pc__price small { font-family: var(--font-body); font-size: 11.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.pc__meta {
  list-style: none;
  margin: 11px 0 14px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* chips rather than a divided row: the items vary in length between projects and
   a fixed set of columns left some of them squeezed */
.pc__meta li {
  padding: 5px 10px;
  border-radius: 7px;
  background: var(--ivory);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}
.pc__size { background: rgba(6, 59, 115, 0.07); color: var(--brand-deep); }
.pc__more {
  margin-top: auto;
  padding-top: clamp(10px, 1.1vw, 13px);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--brand-deep);
  transition: color 0.3s var(--ease-hover);
}
.pc__more svg { transition: transform 0.4s var(--ease); }
.pc:hover .pc__more svg { transform: translate(3px, -3px); }


/* ==========================================================================
   Projects listing page
   ========================================================================== */

.listing { background: var(--ivory); padding: clamp(30px, 3.8vw, 56px) 0 clamp(44px, 5.4vw, 76px); }
/* Filters as a column beside the results rather than a bar stacked above them:
   the controls stay in view while the grid scrolls, which is the point. */
.listing__wrap {
  display: grid;
  grid-template-columns: minmax(0, 370px) minmax(0, 1fr);
  gap: clamp(18px, 2.2vw, 38px);
  align-items: start;
}
.listing__main { min-width: 0; }

/* ---------- Filters column ---------- */
.listing-filters {
  position: sticky;
  top: calc(76px + 18px);
  padding: clamp(14px, 1.4vw, 18px);
  background: #fff;
  border-radius: 18px;
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(14, 22, 32, 0.04), 0 18px 36px -26px rgba(14, 22, 32, 0.3);
  display: grid;
  gap: 14px;
}
.listing-filters > * { min-width: 0; }
.filters__top { display: grid; gap: 12px; }

.ftabs { display: grid; gap: 3px; padding: 4px; border-radius: 13px; background: var(--ivory); }
.ftabs__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.ftabs__btn span {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  font-size: 11px;
  background: rgba(14, 22, 32, 0.07);
  color: var(--ink);
  transition: background 0.4s, color 0.4s;
}
.ftabs__btn { justify-content: space-between; width: 100%; }
.ftabs__btn:hover { color: var(--ink); }
.ftabs__btn.is-active { background: var(--ink); color: #fff; }
.ftabs__btn.is-active span { background: var(--gold); color: var(--ink); }

.fsearch {
  flex: 1;
  max-width: 420px;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  transition: border-color 0.3s;
  margin: 0;
}
.fsearch:focus-within { border-color: var(--gold); }
.fsearch input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font-size: 15px; color: var(--ink); }

.filters__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; }
.fsel {
  display: grid;
  gap: 2px;
  padding: 10px 16px;
  margin: 0;
  border-radius: 16px;
  background: var(--ivory);
  border: 1px solid transparent;
  cursor: pointer;
  min-width: 0;
  transition: border-color 0.3s, background 0.3s;
}
.fsel:focus-within, .fsel:hover { border-color: rgba(106, 151, 204, 0.5); background: #fff; }
.fsel.is-set { border-color: var(--gold); background: #fffaf1; }
.fsel span { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-deep); }
.fsel select {
  appearance: none;
  border: 0;
  outline: none;
  background: transparent var(--chev) no-repeat right center;
  padding: 2px 20px 2px 0;
  width: 100%;
  min-width: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
}
.freset {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 22px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: #fff;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.freset:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.freset svg { transition: transform 0.6s var(--ease); }
.freset:hover svg { transform: rotate(-200deg); }

/* ---------- Result bar ---------- */
.resultbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 18px; }
.resultbar__count { margin: 0; font-size: 15px; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(106, 151, 204, 0.5);
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.chip button {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 0;
  display: grid;
  place-items: center;
  background: var(--sand);
  color: var(--ink);
  font-size: 13px;
  line-height: 1;
  padding: 0;
}
.chip button:hover { background: var(--ink); color: #fff; }

/* ---------- Grid ---------- */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 22px); }
.grid > .pc[hidden] { display: none; }

/* ---------- Empty ---------- */
.empty {
  display: grid;
  justify-items: center;
  text-align: center;
  padding: 64px 24px;
  border-radius: 26px;
  border: 1px dashed rgba(6, 59, 115, 0.45);
  background: #fff;
}
.empty[hidden] { display: none; }
.empty__icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--sand); color: var(--gold-deep); margin-bottom: 16px; }
.empty h3 { font-size: 24px; margin: 0 0 8px; }
.empty p { color: var(--muted); max-width: 440px; margin: 0 0 24px; }
.empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ---------- Pagination ---------- */
.pager { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: clamp(28px, 3.4vw, 46px); flex-wrap: wrap; }
.pager:empty { display: none; }
.pager__btn {
  min-width: 50px;
  height: 50px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.pager__btn:hover:not(:disabled):not(.is-current) { border-color: var(--gold); color: var(--gold-deep); transform: translateY(-2px); }
.pager__btn.is-current { background: var(--ink); border-color: var(--ink); color: #fff; }
.pager__btn:disabled { opacity: 0.35; cursor: default; }
.pager__gap { padding: 0 4px; color: var(--muted); }

@media (max-width: 1199.98px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .filters__row { grid-template-columns: repeat(2, 1fr); }
  .freset { grid-column: 1 / -1; justify-content: center; height: 48px; }
}
@media (max-width: 767.98px) {
  .listing-filters { margin-top: -40px; padding: 16px; border-radius: 22px; }
  .ftabs { width: 100%; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .ftabs::-webkit-scrollbar { display: none; }
  .fsearch { max-width: none; flex-basis: 100%; }
  .grid { grid-template-columns: 1fr; }
  .pager__btn { min-width: 44px; height: 44px; padding: 0 12px; }
  .pager__label { display: none; }
}
@media (max-width: 400px) {
  .filters__row { grid-template-columns: 1fr; }
}


/* ==========================================================================
   Offering pages (residential / commercial / plots)
   ========================================================================== */

/* stats */

/* Facts sit on the banner under a hairline, instead of a white card overlapping it. */
.phero__stats {
  list-style: none;
  margin: clamp(20px, 2.4vw, 30px) 0 0;
  padding: clamp(13px, 1.4vw, 18px) 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 30px);
  max-width: 920px;
}
.cstat { min-width: 0; }
.cstat__body { display: grid; gap: 2px; min-width: 0; }
.cstat__label { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); }
.cstat__value { font-size: clamp(19px, 1.8vw, 26px); line-height: 1.25; color: #fff; white-space: nowrap; }
.cstat__sub { font-size: 12.5px; color: rgba(255, 255, 255, 0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* types */
.types { background: var(--ivory); padding-block: clamp(46px, 5.2vw, 84px); }
/* The heading takes its own column and the three tiles sit beside it, instead of
   a full-width head stacked over a grid. */
.types__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 2.85fr);
  gap: clamp(24px, 3vw, 52px);
  align-items: start;
}
.types__title { font-size: clamp(26px, 3.1vw, 42px); line-height: 1.08; letter-spacing: -0.02em; margin: 0; }
.types__title em { font-style: normal; color: var(--brand-deep); }
.types__lead { margin: 16px 0 0; max-width: 320px; font-size: 14.8px; line-height: 1.72; color: var(--muted); }
.types__cta { margin-top: clamp(20px, 2.4vw, 30px); }
.types__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(13px, 1.5vw, 20px); }

/* The tile is a white plate now - picture on top, then the name beside its mark,
   a rule, and the detail. The old version laid type over the photograph. */
.tcard {
  display: flex;
  flex-direction: column;
  padding: clamp(12px, 1.2vw, 16px);
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--text);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
}
.tcard:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: 0 2px 6px rgba(14, 22, 32, 0.05), 0 28px 50px -24px rgba(6, 22, 45, 0.4);
}
.tcard__media { position: relative; display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3.35; }
.tcard__img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.tcard:hover .tcard__img { transform: scale(1.06); }
.tcard__arrow {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(150deg, #3d8ad6 0%, var(--brand-deep) 100%);
  transition: transform 0.5s var(--ease);
}
.tcard:hover .tcard__arrow { transform: rotate(45deg); }
.tcard__body { display: flex; flex-direction: column; flex: 1; padding: clamp(16px, 1.6vw, 21px) 6px 6px; }
.tcard__head { display: flex; align-items: center; gap: clamp(9px, 1vw, 13px); }
.tcard__icon { flex: none; color: var(--brand-deep); }
.tcard__name { font-size: clamp(17px, 1.55vw, 21px); font-weight: 600; line-height: 1.2; }
.tcard__from {
  margin-top: clamp(15px, 1.6vw, 20px);
  padding-top: clamp(13px, 1.4vw, 17px);
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--brand);
}
.tcard__text { margin-top: 8px; font-size: 14.4px; line-height: 1.68; color: var(--muted); }

/* why */
.why-cat { position: relative; overflow: hidden; }
.why-cat__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.why-cat__bg img { width: 100%; height: 100%; object-fit: cover; }
/* the section runs white type, so the photo sits under a heavy ink wash */
.why-cat__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 85% 70% at 50% 50%, rgba(14, 22, 32, 0.62), transparent 75%),
    linear-gradient(180deg, rgba(14, 22, 32, 0.93) 0%, rgba(14, 22, 32, 0.82) 45%, rgba(14, 22, 32, 0.95) 100%);
}
.why-cat > .container-xl { position: relative; z-index: 1; }
.why-cat__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
.why-cat__list { list-style: none; padding: 0; margin: 0; display: grid; }
.why-cat__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(14px, 1.6vw, 22px);
  padding: clamp(16px, 1.8vw, 24px) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  transition: background 0.4s var(--ease);
}
.why-cat__list li:first-child { border-top: 0; padding-top: 0; }
.why-cat__list li:hover { background: rgba(255, 255, 255, 0.04); }
.why-cat__list h3, .why-cat__list p { grid-column: 2; }
.why-cat__icon {
  grid-row: 1 / 3;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: var(--brand-light);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.why-cat__list h3 { font-size: 19px; margin: 0 0 8px; }
.why-cat__list p { margin: 0; font-size: 14.5px; line-height: 1.65; color: rgba(255, 255, 255, 0.62); }

/* projects */
.cprojects { background: var(--ivory); }
/* Heading on the left, city pills on the right. Without this the pill strip is a
   block and stretches the full width of the section. */
.cprojects__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 18px 44px;
  margin-bottom: clamp(24px, 2.8vw, 40px);
}
.cities { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; border-radius: 999px; background: #fff; }
.cities__btn { border: 0; background: none; padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--muted); transition: background 0.3s, color 0.3s; }
.cities__btn span { font-size: 11px; margin-left: 4px; opacity: 0.7; }
.cities__btn.is-active { background: var(--ink); color: #fff; }
.cprojects__empty { grid-column: 1 / -1; margin: 0; padding: 40px 28px; text-align: center; border-radius: 22px; background: #fff; border: 1px dashed rgba(106, 151, 204, 0.45); color: var(--muted); font-size: 15.5px; line-height: 1.7; }
.cprojects__empty a { color: var(--brand-deep); text-decoration: underline; text-underline-offset: 3px; }
.cprojects__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cprojects__item[hidden] { display: none; }


/* faq */
.cfaq { background: var(--sand); }
.cfaq__grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.cfaq__list { display: grid; gap: 10px; }
.cfaq__item { border-radius: 18px; background: rgba(255, 255, 255, 0.6); transition: background 0.3s; }
.cfaq__item[open] { background: #fff; }
.cfaq__item summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 22px; font-family: var(--font-head); font-size: 18px; color: var(--ink); cursor: pointer; }
.cfaq__item summary::-webkit-details-marker { display: none; }
.cfaq__item summary i { position: relative; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); transition: background 0.3s, transform 0.4s var(--ease); }
.cfaq__item summary i::before, .cfaq__item summary i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.6px; background: var(--ink); transform: translate(-50%, -50%); }
.cfaq__item summary i::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform 0.3s; }
.cfaq__item[open] summary i { background: var(--gold); border-color: var(--gold); transform: rotate(180deg); }
.cfaq__item[open] summary i::after { transform: translate(-50%, -50%) rotate(0); }
.cfaq__item p { margin: 0; padding: 0 22px 20px; color: var(--muted); line-height: 1.7; }

/* others */
.others { background: #fff; }
.others__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 20px; }
.ocard { position: relative; min-height: 320px; display: flex; align-items: flex-end; padding: 30px; border-radius: 26px; overflow: hidden; color: #fff; isolation: isolate; }
.ocard .ocard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease); }
.ocard:hover .ocard__img { transform: scale(1.06); }
.ocard__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(14, 22, 32, 0.88), rgba(14, 22, 32, 0.25)); }
.ocard__body { display: grid; gap: 6px; max-width: 380px; padding-right: 56px; }
.ocard__body strong { font-size: 34px; font-weight: 400; }
.ocard__body span:last-child { color: rgba(255, 255, 255, 0.75); font-size: 15px; }
.ocard__count { justify-self: start; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: var(--gold); color: var(--ink); }

@media (max-width: 1199.98px) {
  .cprojects__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 991.98px) {
  .cstats__grid { grid-template-columns: repeat(2, 1fr); }
  .cstat:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .types__grid { grid-template-columns: 1fr; }
  .why-cat__grid, .cfaq__grid { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
  .cstats__grid { margin-top: -36px; border-radius: 16px; }
  .cstat { padding: 16px 14px; }
  .cstat__value { font-size: 20px; white-space: normal; }
  .cstat__sub { white-space: normal; font-size: 12px; }
  .why-cat__list, .cprojects__grid, .others__grid { grid-template-columns: 1fr; }
  .cities { border-radius: 20px; }
}


/* ==========================================================================
   Enquiry form
   ========================================================================== */

.eform { --bg: var(--ivory); --fg: var(--ink); --muted-c: var(--muted); --line-c: var(--line); position: relative; }
.eform--dark { --bg: rgba(255, 255, 255, 0.06); --fg: #fff; --muted-c: rgba(255, 255, 255, 0.6); --line-c: rgba(255, 255, 255, 0.16); }
.eform__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.eform--compact .eform__fields { gap: 12px; }
.eform__field { display: grid; gap: 6px; margin: 0; min-width: 0; border: 0; padding: 0; }
.eform__field--full { grid-column: 1 / -1; }
.eform__field > span, .eform__pref legend { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-c); float: none; margin: 0; padding: 0; }
.eform input[type='text'], .eform input[type='email'], .eform input[type='tel'], .eform select, .eform textarea {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid var(--line-c);
  background: var(--bg);
  color: var(--fg);
  font-size: 15px;
  outline: none;
  transition: border-color 0.3s, background 0.3s;
}
.eform textarea { height: auto; padding: 14px 16px; resize: vertical; }
.eform select option { color: var(--ink); }
.eform input::placeholder, .eform textarea::placeholder { color: var(--muted-c); opacity: 0.8; }
.eform input:focus, .eform select:focus, .eform textarea:focus { border-color: var(--gold); }
.eform__phone { display: flex; align-items: stretch; }
.eform__phone b { display: grid; place-items: center; padding: 0 14px; border-radius: 14px 0 0 14px; border: 1px solid var(--line-c); border-right: 0; background: var(--bg); color: var(--fg); font-weight: 600; font-size: 14px; }
.eform__phone input { border-radius: 0 14px 14px 0 !important; }
.eform__err { display: none; font-style: normal; font-size: 12px; color: #d9534f; }
.eform__field.is-invalid input { border-color: #d9534f; }
.eform__field.is-invalid .eform__err { display: block; }

.eform__pref { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.eform__pref legend { width: 100%; margin-bottom: 4px; }
.eform__chip input { position: absolute; opacity: 0; pointer-events: none; }
.eform__chip span { display: inline-block; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line-c); font-size: 13.5px; font-weight: 600; color: var(--fg); cursor: pointer; transition: all 0.3s; }
.eform__chip input:checked + span { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.eform__chip input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }

.eform__consent { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0; font-size: 12.5px; line-height: 1.5; color: var(--muted-c); cursor: pointer; }
.eform__consent input { margin-top: 3px; accent-color: var(--gold-deep); }

.eform__submit { position: relative; width: 100%; height: 56px; border: 0; border-radius: 14px; background: var(--gold); color: var(--ink); font-weight: 700; font-size: 15px; transition: background 0.3s, transform 0.3s; }
.eform__submit:hover { background: var(--gold-2); }
.eform__submit:active { transform: scale(0.99); }
.eform__spinner { display: none; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 2px solid rgba(14, 22, 32, 0.25); border-top-color: var(--ink); animation: spin 0.8s linear infinite; }
.eform.is-loading .eform__spinner { display: block; }
.eform.is-loading .eform__submit-text { visibility: hidden; }
@keyframes spin { to { transform: rotate(360deg); } }

.eform__done { text-align: center; padding: 30px 10px; }
.eform.is-done > :not(.eform__done) { display: none; }
.eform.is-done .eform__done { display: block; }
.eform__done h4 { font-size: 24px; margin: 16px 0 8px; color: var(--fg); }
.eform__done p { color: var(--muted-c); margin: 0; }
.eform__tick svg { width: 72px; height: 72px; fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.eform__tick circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: draw 0.7s var(--ease) forwards; }
.eform__tick path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw 0.5s 0.5s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

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


/* ==========================================================================
   Project: detail hero
   ========================================================================== */

.dh { position: relative; min-height: min(76svh, 700px); display: flex; flex-direction: column; justify-content: flex-end; color: #fff; background: var(--ink); overflow: hidden; }
.dh__bg { position: absolute; inset: 0; }
.dh__bg img { width: 100%; height: 100%; object-fit: cover; animation: dhzoom 18s ease-out forwards; }
@keyframes dhzoom { from { transform: scale(1.1); } to { transform: scale(1); } }
.dh__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(14, 22, 32, 0.88) 0%, rgba(14, 22, 32, 0.55) 45%, rgba(14, 22, 32, 0.1) 80%),
    linear-gradient(180deg, rgba(14, 22, 32, 0.45) 0%, transparent 30%, transparent 70%, rgba(14, 22, 32, 0.7) 100%);
}
.dh__inner { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; padding-top: 128px; padding-bottom: 38px; }
.dh__copy { max-width: 660px; }

.dh__crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: rgba(255, 255, 255, 0.6); margin-bottom: 26px; }
.dh__crumbs a:hover { color: var(--gold); }
.dh__crumbs em { font-style: normal; color: var(--gold-2); }
.dh__eyebrow { display: flex; align-items: center; gap: 14px; font-size: 13px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-2); margin-bottom: 14px; }
.dh__eyebrow::after { content: ''; width: min(300px, 30vw); height: 1px; background: rgba(255, 255, 255, 0.4); }
.dh__title { font-size: clamp(34px, 4.7vw, 67px); line-height: 1.02; letter-spacing: -0.035em; margin: 0 0 18px; }
.dh__title .line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.dh__title .line > span { display: inline-block; }
.dh__loc { display: flex; align-items: center; gap: 8px; font-size: 17px; margin: 0 0 18px; }
.dh__loc svg { color: var(--gold); }
.dh__desc { font-size: 16px; line-height: 1.75; color: rgba(255, 255, 255, 0.82); margin: 0 0 30px; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dh__ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.dh__ghost { display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 24px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.06); color: #fff; font-weight: 600; font-size: 15px; backdrop-filter: blur(8px); transition: background 0.3s, color 0.3s; }
.dh__ghost:hover { background: #fff; color: var(--ink); }

.dh__badges { display: grid; gap: 10px; justify-items: end; }
.dh__rera { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: #1f9d55; color: #fff; box-shadow: 0 10px 30px -10px rgba(31, 157, 85, 0.8); }
.dh__photos { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(14, 22, 32, 0.4); color: #fff; font-size: 13px; font-weight: 600; backdrop-filter: blur(8px); transition: background 0.3s, color 0.3s; }
.dh__photos:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }

.dh__facts { position: relative; z-index: 2; background: rgba(14, 22, 32, 0.78); backdrop-filter: blur(12px); border-top: 1px solid rgba(255, 255, 255, 0.1); }
.dh__facts dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); margin: 0; }
.dh__facts div { padding: 17px 16px; }
.dh__facts div + div { border-left: 1px solid rgba(255, 255, 255, 0.1); }
.dh__facts dt { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); margin-bottom: 6px; }
.dh__facts dd { margin: 0; font-weight: 600; font-size: 15px; text-transform: capitalize; }

@media (max-width: 1199.98px) {
  .dh__facts dl { grid-template-columns: repeat(3, 1fr); }
  .dh__facts div:nth-child(n + 4) { border-top: 1px solid rgba(255, 255, 255, 0.1); }
}
@media (max-width: 767.98px) {
  .dh__inner { flex-direction: column; align-items: flex-start; padding-top: 120px; }
  .dh__badges { justify-items: start; grid-auto-flow: column; }
  .dh__facts dl { grid-template-columns: repeat(2, 1fr); }
  .dh__facts div { padding: 16px 10px; }
  .dh__facts div:nth-child(4) { border-left: 1px solid rgba(255, 255, 255, 0.1); }
  .dh__facts div:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, 0.1); }
}


/* ==========================================================================
   Project: sticky section tabs
   ========================================================================== */

.stabs {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: #fff;
  border-bottom: 1px solid var(--line);
  transition: top 0.6s var(--ease), box-shadow 0.4s;
}
.stabs.is-stuck { box-shadow: 0 14px 30px -20px rgba(14, 22, 32, 0.35); }
.stabs.is-pushed { top: 68px; }
.stabs__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.stabs__nav { position: relative; display: flex; overflow-x: auto; scrollbar-width: none; }
.stabs__nav::-webkit-scrollbar { display: none; }
.stabs__link {
  flex-shrink: 0;
  padding: 24px 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  transition: color 0.3s;
}
.stabs__link:hover, .stabs__link.is-active { color: var(--gold-deep); }
.stabs__bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; border-radius: 3px 3px 0 0; background: var(--gold); transition: transform 0.5s var(--ease), width 0.5s var(--ease); }

.stabs__cta { display: flex; align-items: center; gap: 16px; flex-shrink: 0; opacity: 0; visibility: hidden; transform: translateX(10px); transition: opacity 0.4s, transform 0.4s var(--ease), visibility 0.4s; }
.stabs.is-stuck .stabs__cta { opacity: 1; visibility: visible; transform: none; }
.stabs__price { display: grid; text-align: right; font-family: var(--font-head); font-size: 17px; line-height: 1.2; }
.stabs__price small { font-family: var(--font-body); font-size: 12px; color: var(--muted); }
.stabs__btn { height: 46px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 600; font-size: 14px; transition: background 0.3s, color 0.3s; }
.stabs__btn:hover { background: var(--gold); color: var(--ink); }

@media (max-width: 1199.98px) { .stabs__cta { display: none; } .stabs__link { padding: 22px 14px; } }
@media (max-width: 575.98px) { .stabs__link { padding: 18px 12px; font-size: 12px; } .stabs.is-pushed { top: 64px; } }


/* ==========================================================================
   Project: body (overview, pricing, plans, amenities, FAQ, sidebar)
   ========================================================================== */

.pb { background: #fff; padding: clamp(38px, 4.4vw, 60px) 0 clamp(44px, 5.4vw, 76px); }
.pb__grid { display: grid; grid-template-columns: minmax(0, 372px) minmax(0, 1fr); gap: clamp(28px, 4vw, 58px); align-items: start; }
.pb__main { grid-column: 2; grid-row: 1; }
.side { grid-column: 1; grid-row: 1; }

.blk { padding-bottom: clamp(44px, 5vw, 64px); margin-bottom: clamp(44px, 5vw, 64px); border-bottom: 1px solid var(--line); }
.blk:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.blk__title { font-size: clamp(20px, 1.85vw, 27px); margin: 0 0 22px; display: flex; align-items: center; gap: 14px; }
.blk__title::before { content: ''; width: 6px; height: 26px; border-radius: 3px; background: var(--gold); }
.blk__p { color: #4a5563; line-height: 1.85; margin-bottom: 16px; }

/* overview stats */
.ov-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 26px 0 0; }
.ov-stats div { padding: 18px; border-radius: 18px; background: var(--ivory); }
.ov-stats dt { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.ov-stats dd { margin: 0; font-size: 22px; color: var(--ink); }

/* amenities */
.am-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.am-grid li { display: grid; justify-items: center; gap: 12px; padding: 24px 10px; border-radius: 18px; background: var(--ivory); text-align: center; font-size: 13.5px; font-weight: 600; color: var(--ink); transition: background 0.4s var(--ease), color 0.4s, transform 0.4s var(--ease); }
.am-grid__icon { color: var(--gold-deep); transition: color 0.4s, transform 0.4s var(--ease); }
.am-grid li:hover { background: var(--ink); color: #fff; transform: translateY(-4px); }
.am-grid li:hover .am-grid__icon { color: var(--gold); transform: scale(1.1); }

/* highlights */
.hl-list { list-style: none; padding: 0; margin: 0 0 30px; display: grid; gap: 14px; }
.hl-list li { display: flex; align-items: flex-start; gap: 14px; font-size: 16px; color: var(--ink); line-height: 1.5; }
.hl-list__tick { flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: #fff; }
.kf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kf-grid__item { display: flex; gap: 14px; padding: 20px; border-radius: 18px; border: 1px solid var(--line); transition: border-color 0.3s, box-shadow 0.4s; }
.kf-grid__item:hover { border-color: rgba(106, 151, 204, 0.6); box-shadow: 0 20px 40px -30px rgba(14, 22, 32, 0.45); }
.kf-grid__icon { flex-shrink: 0; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--ivory); color: var(--gold-deep); }
.kf-grid__item h3 { font-size: 17px; margin: 2px 0 6px; }
.kf-grid__item p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }

/* price table */
.price-table { border: 1px solid var(--line); border-radius: 20px; overflow: hidden; margin-bottom: 28px; }
.price-table__row { display: grid; grid-template-columns: 1.2fr 1.2fr 1.2fr 1fr auto; align-items: center; gap: 12px; padding: 16px 20px; }
.price-table__row + .price-table__row { border-top: 1px solid var(--line); }
.price-table__row--head { background: var(--ink); color: rgba(255, 255, 255, 0.75); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding-block: 14px; }
.price-table__row:not(.price-table__row--head):hover { background: var(--ivory); }
.price-table__type { font-weight: 700; color: var(--ink); }
.price-table__price { font-family: var(--font-head); font-size: 19px; color: var(--gold-deep); }
.price-table__btn { height: 38px; padding: 0 16px; border-radius: 9px; border: 1px solid var(--ink); background: transparent; font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; transition: background 0.3s, color 0.3s; }
.price-table__btn:hover { background: var(--ink); color: #fff; }

/* plan viewer */
.plan { border-radius: 24px; background: var(--ivory); padding: 18px; }
.plan__tabs { display: flex; gap: 6px; margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; }
.plan__tab { flex-shrink: 0; border: 0; background: #fff; padding: 10px 20px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--muted); transition: background 0.3s, color 0.3s; }
.plan__tab.is-active { background: var(--ink); color: #fff; }
.plan__panel[hidden] { display: none; }
.plan__drawing { position: relative; margin: 0; padding: clamp(14px, 2vw, 24px); border-radius: 18px; background: linear-gradient(160deg, #1e3a52, var(--ink)); }
.plan__drawing > svg { width: 100%; height: auto; display: block; }
.plan__drawing .room { fill: rgba(106, 151, 204, 0.05); stroke: var(--gold-2); stroke-width: 2.2; }
.plan__drawing .room.road { fill: rgba(255, 255, 255, 0.06); stroke: rgba(255, 255, 255, 0.3); stroke-dasharray: 10 8; stroke-width: 1.4; }
.plan__drawing .door { fill: none; stroke: var(--gold); stroke-width: 1; stroke-dasharray: 3 3; }
.plan__drawing text { fill: #f3e9d6; font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-anchor: middle; }
.plan__dl { position: absolute; right: 16px; top: 16px; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--gold); color: var(--ink); font-size: 12.5px; font-weight: 700; transition: background 0.3s; }
.plan__dl:hover { background: #fff; }
.plan__specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 14px 0 0; }
.plan__specs div { padding: 14px 16px; border-radius: 14px; background: #fff; }
.plan__specs dt { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.plan__specs dd { margin: 0; font-weight: 700; color: var(--ink); }
.plan__specs dd.font-head { font-weight: 400; font-size: 20px; color: var(--gold-deep); }
.plan__note { margin: 12px 4px 0; font-size: 12.5px; color: var(--muted); }

.pay { margin-top: 28px; }
.pay__title { font-size: 17px; margin: 0 0 14px; }
.pay__steps { list-style: none; padding: 0; margin: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; counter-reset: s; }
.pay__steps li { position: relative; display: grid; gap: 2px; padding: 16px 18px; border-radius: 16px; border: 1px dashed rgba(6, 59, 115, 0.5); }
.pay__steps strong { font-size: 28px; font-weight: 400; color: var(--gold-deep); line-height: 1.1; }
.pay__steps span { font-size: 13.5px; color: var(--muted); }

/* developer */
.dev { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.dev__logo { width: 70px; height: 70px; border-radius: 20px; display: grid; place-items: center; font-size: 26px; color: var(--ink); background: radial-gradient(circle at 30% 25%, var(--brand-light), var(--brand) 60%, var(--brand-deep)); }
.dev__name { display: block; font-family: var(--font-head); font-size: 22px; font-weight: 500; }
.dev__since { font-size: 14px; color: var(--muted); }
.dev__stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 22px 0 0; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.dev__stats div { padding: 18px 20px; }
.dev__stats div + div { border-left: 1px solid var(--line); }
.dev__stats dd { margin: 0; font-size: 28px; color: var(--gold-deep); line-height: 1.1; }
.dev__stats dt { font-size: 13px; font-weight: 500; color: var(--muted); }

/* location */
.loc-addr { display: flex; align-items: center; gap: 8px; color: var(--muted); margin: -8px 0 16px; }
.loc-addr svg { color: var(--gold-deep); }
.loc-map { position: relative; height: 380px; border-radius: 22px; overflow: hidden; background: var(--sand); margin-bottom: 18px; }
.loc-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(0.3) sepia(0.1); }
.loc-list { list-style: none; padding: 0; margin: 0 0 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.loc-list li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--ivory); }
.loc-list__icon { width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center; background: #fff; color: var(--gold-deep); }
.loc-list__place { flex: 1; font-size: 14px; font-weight: 500; line-height: 1.35; }
.loc-list b { font-size: 12.5px; color: var(--gold-deep); white-space: nowrap; }

/* faq */
.project-faq { display: grid; gap: 10px; }
.faq__item { border-radius: 16px; border: 1px solid var(--line); transition: border-color 0.3s, background 0.3s; }
.faq__item[open] { border-color: rgba(106, 151, 204, 0.55); background: #fffcf6; }
.faq__item summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; font-weight: 600; color: var(--ink); cursor: pointer; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary i { position: relative; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--ivory); transition: background 0.3s, transform 0.4s var(--ease); }
.faq__item summary i::before, .faq__item summary i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.6px; background: var(--ink); transform: translate(-50%, -50%); }
.faq__item summary i::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform 0.3s; }
.faq__item[open] summary i { background: var(--gold); transform: rotate(180deg); }
.faq__item[open] summary i::after { transform: translate(-50%, -50%) rotate(0); }
.faq__item p { margin: 0; padding: 0 20px 18px; color: var(--muted); line-height: 1.7; }

/* ---------- Side card ---------- */
.side { position: sticky; top: 96px; }
.side__card { border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: 0 24px 60px -36px rgba(14, 22, 32, 0.35); overflow: hidden; }
.side__head { padding: 26px 28px 0; }
.side__eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-deep); }
.side__title { font-size: 19px; margin: 6px 0 6px; }
.side__price { margin: 0; font-size: 14px; color: var(--muted); }
.side__price strong { color: var(--ink); }
.side__body { padding: 20px 28px 8px; }
/* simple form: placeholders instead of labels, one column, tighter */
.side__body .eform__fields { grid-template-columns: 1fr; }
.side__body .eform__field > span,
.side__body .eform__pref { display: none; }
.side__body .eform__consent { margin: 12px 0; font-size: 12px; }
.side__body .eform__submit { height: 52px; border-radius: 12px; background: var(--ink); color: #fff; }
.side__body .eform__submit:hover { background: var(--gold); color: var(--ink); }
.side__quick { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.side__quick a, .side__quick button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 50px; border: 0; background: none; font-size: 13.5px; font-weight: 600; color: var(--ink); transition: background 0.3s, color 0.3s; }
.side__quick > :is(a, button) + :is(a, button) { border-left: 1px solid var(--line); }
.side__quick a:hover, .side__quick button:hover { background: var(--ivory); color: var(--gold-deep); }
.side__trust { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px 0 0; font-size: 12.5px; color: var(--muted); }
.side__trust svg { color: #1f9d55; }

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) { .pb__grid { grid-template-columns: minmax(0, 330px) minmax(0, 1fr); } .am-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 991.98px) {
  .pb__grid { grid-template-columns: 1fr; }
  /* back to a single flow, so the content leads */
  .pb__main { grid-column: 1; grid-row: auto; }
  .side { grid-column: 1; grid-row: auto; position: static; display: none; } /* phones use the sticky bar + popup instead */
  .ov-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px) {
  .am-grid { grid-template-columns: repeat(2, 1fr); }
  .kf-grid, .loc-list { grid-template-columns: 1fr; }
  .price-table__row--head { display: none; }
  .price-table__row { grid-template-columns: 1fr 1fr; gap: 8px 12px; }
  .price-table__type { grid-column: 1 / -1; font-size: 17px; }
  .price-table__row > span[data-label]::before { content: attr(data-label); display: block; font-size: 11.5px; color: var(--muted); }
  .price-table__row > span:last-child { grid-column: 1 / -1; }
  .price-table__btn { width: 100%; }
  .pay__steps { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .dev__stats dd { font-size: 22px; }
  .dev__stats div { padding: 14px 12px; }
  .loc-map { height: 300px; }
}


/* ==========================================================================
   Project: gallery + lightbox
   ========================================================================== */

.gs { background: var(--ivory); padding: clamp(44px, 5.4vw, 76px) 0; }
.gs__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 20px; margin-bottom: 34px; }
.gs__all { white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid rgba(6, 59, 115, 0.5); background: transparent; font-weight: 600; font-size: 14px; color: var(--ink); transition: background 0.3s, border-color 0.3s; }
.gs__all:hover { background: var(--gold); border-color: var(--gold); }

.gs__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: repeat(2, clamp(180px, 19vw, 280px));
  gap: 14px;
}
.gs__item[type="button"] { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 22px; overflow: hidden; cursor: zoom-in; background: var(--sand); }
.gs__item--0 { grid-row: span 2; }
.gs__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.gs__item::after { content: ''; position: absolute; inset: 0; background: rgba(14, 22, 32, 0.28); opacity: 0; transition: opacity 0.4s; }
.gs__item:hover img { transform: scale(1.07); }
.gs__item:hover::after { opacity: 1; }
.gs__zoom { position: absolute; z-index: 1; left: 50%; top: 50%; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--ink); opacity: 0; transform: translate(-50%, -50%) scale(0.6); transition: opacity 0.4s, transform 0.4s var(--ease); }
.gs__item:hover .gs__zoom { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.gs__tag { position: absolute; z-index: 1; left: 18px; bottom: 18px; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #fff; background: rgba(14, 22, 32, 0.55); backdrop-filter: blur(8px); }

.lb { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(8, 12, 18, 0.95); color: #fff; }
.lb[open] { display: grid; place-items: center; }
.lb::backdrop { background: transparent; }
.lb__img { max-width: min(90vw, 1400px); max-height: 82vh; border-radius: 14px; object-fit: contain; }
.lb__close, .lb__nav { position: absolute; width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.06); color: #fff; display: grid; place-items: center; transition: background 0.3s, color 0.3s; }
.lb__close:hover, .lb__nav:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.lb__close { top: 24px; right: 24px; }
.lb__nav--prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lb__nav--next { right: 24px; top: 50%; transform: translateY(-50%); }
.lb__counter { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); font-size: 14px; color: rgba(255, 255, 255, 0.7); }

@media (max-width: 767.98px) {
  .gs__grid { grid-template-columns: 1fr 1fr; grid-template-rows: 240px repeat(2, 140px); gap: 10px; }
  .gs__item--0 { grid-column: 1 / -1; grid-row: auto; }
  .gs__all { height: 42px; padding: 0 16px; font-size: 13px; }
  .lb__nav { top: auto; bottom: 16px; transform: none; }
  .lb__nav--prev { left: 16px; }
  .lb__nav--next { right: 16px; }
}


/* ==========================================================================
   Project: enquiry popup
   ========================================================================== */

/* ---------- Popup ---------- */
.emodal { width: min(960px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 28px; background: transparent; overflow: visible; }
.emodal::backdrop { background: rgba(8, 12, 18, 0.7); backdrop-filter: blur(6px); }
.emodal[open] { animation: pop 0.5s var(--ease); }
.emodal[open]::backdrop { animation: fade 0.4s ease; }
@keyframes pop { from { opacity: 0; transform: translateY(24px) scale(0.97); } }
@keyframes fade { from { opacity: 0; } }
.emodal__box { position: relative; display: grid; grid-template-columns: 0.85fr 1.15fr; border-radius: 28px; overflow: hidden; background: #fff; max-height: calc(100dvh - 24px); }
.emodal__close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); display: grid; place-items: center; transition: background 0.3s, color 0.3s, transform 0.4s var(--ease); }
.emodal__close:hover { background: var(--ink); color: #fff; transform: rotate(90deg); }

.emodal__side { position: relative; color: #fff; display: flex; align-items: flex-end; min-height: 100%; }
.emodal__side .emodal__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.emodal__side::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 22, 32, 0.15), rgba(14, 22, 32, 0.92)); }
.emodal__side-body { position: relative; z-index: 1; display: grid; gap: 4px; padding: 28px; }
.emodal__badge { justify-self: start; padding: 5px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--gold); color: var(--ink); margin-bottom: 8px; }
.emodal__side-body strong { font-size: 26px; font-weight: 500; line-height: 1.15; }
.emodal__side-body > span { font-size: 13.5px; color: rgba(255, 255, 255, 0.7); }
.emodal__side-body .emodal__price { color: var(--gold-2); font-weight: 600; font-size: 15px; margin-top: 4px; }
.emodal__side-body ul { list-style: none; padding: 16px 0 0; margin: 14px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.18); display: grid; gap: 8px; font-size: 13.5px; }
.emodal__side-body li { display: flex; align-items: center; gap: 8px; }
.emodal__side-body li svg { color: var(--gold); }

.emodal__main { padding: 34px 32px 28px; overflow-y: auto; }
.emodal__kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-deep); }
.emodal__title { font-size: clamp(20px, 2.02vw, 25px); margin: 6px 40px 6px 0; }
.emodal__sub { color: var(--muted); font-size: 14.5px; margin: 0 0 20px; }

@media (max-width: 767.98px) {
  .emodal__box { grid-template-columns: 1fr; }
  .emodal__side { display: none; }
  .emodal__main { padding: 28px 20px 22px; }
}


/* ==========================================================================
   Project: mobile action bar
   ========================================================================== */

.mbar { display: none; }
@media (max-width: 767.98px) {
  .mbar {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 1035;
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr;
    gap: 6px;
    padding: 6px;
    border-radius: 18px;
    background: rgba(14, 22, 32, 0.94);
    backdrop-filter: blur(12px);
    box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.6);
  }
  .mbar__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border: 0; border-radius: 13px; background: rgba(255, 255, 255, 0.07); color: #fff; font-weight: 600; font-size: 14px; }
  .mbar__btn--gold { background: var(--gold); color: var(--ink); }
  .page-project .float-wa { display: none !important; }
  body.page-project { padding-bottom: 76px; }
}


/* ==========================================================================
   Project: similar projects
   ========================================================================== */

.similar { background: #fff; }
.similar__head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; margin-bottom: 36px; }
.similar__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 1199.98px) { .similar__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767.98px) { .similar__grid { grid-template-columns: 1fr; } }



/* ==========================================================================
   Locations → Developers → Projects
   ========================================================================== */

.loc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(13px, 1.5vw, 20px); }

/* ---------- City card ---------- */
.loccard {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(258px, 24vw, 318px);
  padding: clamp(18px, 1.9vw, 24px);
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background: var(--ink);
  transition: transform 0.45s var(--ease);
}
.loccard:hover { transform: translateY(-5px); }
.loccard__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  transition: transform 1.6s var(--ease);
}
.loccard:hover .loccard__img { transform: scale(1.09); }
/* back to a vertical wash: the card is a portrait plate again, and the copy sits
   along the bottom edge rather than down the left side */
.loccard__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10, 18, 30, 0.12) 0%, rgba(10, 18, 30, 0.1) 38%, rgba(10, 18, 30, 0.86) 100%);
}
/* hairline frame that lifts on hover */
.loccard::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.16);
  pointer-events: none;
  transition: border-color 0.4s var(--ease);
}
.loccard:hover::after { border-color: rgba(255, 255, 255, 0.4); }
.loccard__body { display: grid; justify-items: start; width: 100%; }
.loccard__meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
}
.loccard__meta svg { flex: none; color: var(--accent); }
.loccard__rule {
  width: 72%;
  height: 1px;
  margin: clamp(9px, 1vw, 13px) 0;
  background: rgba(255, 255, 255, 0.4);
  transition: width 0.5s var(--ease);
}
.loccard:hover .loccard__rule { width: 100%; }
.loccard__name {
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
}

/* ---------- Developer card ---------- */
.devs { background: linear-gradient(180deg, var(--ivory) 0%, #f3ede3 100%); }
.dev-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 1.8vw, 26px); }

/* The lower panel has a circular bite taken out of its top edge; the logo badge sits
   in that bite, half over the photograph above it. The shadow is a drop-shadow so it
   follows that notched silhouette instead of tracing a rectangle across the bite. */
.dcard {
  --badge: 78px;
  --notch: 46px; /* badge radius plus the ring of space around it */
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  color: var(--ink);
  filter: drop-shadow(0 16px 30px rgba(14, 22, 32, 0.14));
  transition: transform 0.5s var(--ease), filter 0.5s var(--ease);
}
.dcard:hover { transform: translateY(-6px); filter: drop-shadow(0 26px 44px rgba(18, 49, 95, 0.26)); }
.dcard:focus-visible { outline: 2px solid var(--brand-deep); outline-offset: 4px; }

.dcard__media { position: relative; display: block; aspect-ratio: 16 / 11; border-radius: 22px 22px 0 0; overflow: hidden; }
.dcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.9s var(--ease); }
.dcard:hover .dcard__media img { transform: scale(1.07); }
.dcard__kind {
  position: absolute;
  top: 11px;
  left: 11px;
  z-index: 2;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

.dcard__lower { position: relative; }
/* masked, so the notch is cut out of the panel itself rather than drawn over it */
.dcard__body {
  display: block;
  padding: calc(var(--notch) + 14px) 18px 24px;
  text-align: center;
  border-radius: 0 0 22px 22px;
  background: linear-gradient(180deg, #ffffff 0%, var(--ivory) 100%);
  -webkit-mask: radial-gradient(circle var(--notch) at 50% 0, transparent 98%, #000 100%);
  mask: radial-gradient(circle var(--notch) at 50% 0, transparent 98%, #000 100%);
}
.dcard__badge {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -50%;
  z-index: 3;
  width: var(--badge);
  height: var(--badge);
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  padding: 0 10px;
  box-shadow: 0 10px 22px -12px rgba(14, 22, 32, 0.55);
}
.dcard__badge img { max-width: 100%; max-height: calc(17px * var(--s, 1)); width: auto; object-fit: contain; }
.dcard__badge-name { font-style: normal; font-size: 14px; color: var(--brand-deep); }

.dcard__name { display: block; font-size: 18px; font-weight: 400; line-height: 1.25; transition: color 0.35s var(--ease); }
.dcard:hover .dcard__name { color: var(--brand-deep); }
.dcard__meta { display: block; margin-top: 7px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

@media (max-width: 1199.98px) { .dev-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 991.98px) { .dev-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .dev-grid { grid-template-columns: 1fr; max-width: 340px; margin-inline: auto; } }
@media (prefers-reduced-motion: reduce) {
  .dcard, .dcard__media img, .dcard__name { transition: none; }
  .dcard:hover { transform: none; }
  .dcard:hover .dcard__media img { transform: none; }
}

/* ---------- Developer page ---------- */
.dev-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
}
.dev-facts div { padding: 26px 30px; }
.dev-facts div + div { border-left: 1px solid var(--line); }
.dev-facts dt { font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 10px; }
.dev-facts dd { margin: 0; font-size: 34px; line-height: 1.1; }
.dev-facts__cities { font-size: 19px; }
.dev-projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

@media (max-width: 1199.98px) {
  .loc-grid, .dev-grid, .dev-projects { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px) {
  .loc-grid, .dev-grid, .dev-projects { grid-template-columns: 1fr; }
  .loccard { min-height: 340px; }
  .dev-facts { grid-template-columns: 1fr; }
  .dev-facts div + div { border-left: 0; border-top: 1px solid var(--line); }
  .dev-facts dd { font-size: 28px; }
}

/* ==========================================================================
   Navbar dropdown (Projects)
   Opens on hover and on keyboard focus. The panel sits directly under the bar
   with no gap to cross, so the pointer never falls out of it on the way down.
   ========================================================================== */
.navbar-lux__has-menu { position: relative; display: flex; }
.navbar-lux__caret { margin-left: 7px; opacity: 0.5; transition: transform 0.4s var(--ease), opacity 0.3s; }
.navbar-lux__has-menu:hover .navbar-lux__caret,
.navbar-lux__has-menu:focus-within .navbar-lux__caret { transform: rotate(180deg); opacity: 1; }

.navbar-lux__menu {
  position: absolute;
  top: 100%;
  left: 2px;
  min-width: 272px;
  padding-top: 10px; /* keeps hover contiguous with the bar */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.97);
  transform-origin: 40px top;
  transition: opacity 0.3s var(--ease), transform 0.38s var(--ease), visibility 0.38s;
}
.navbar-lux__has-menu:hover .navbar-lux__menu,
.navbar-lux__has-menu:focus-within .navbar-lux__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.navbar-lux__panel {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 24px 50px -26px rgba(14, 22, 32, 0.45), 0 2px 6px -3px rgba(14, 22, 32, 0.1);
}
/* A tick pointing back at the parent link, so the panel reads as attached. */
.navbar-lux__panel::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 30px;
  width: 11px;
  height: 11px;
  background: #fff;
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  border-radius: 3px 0 0 0;
  transform: rotate(45deg);
}
.navbar-lux__panel a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 12px 11px 18px;
  border-radius: 6px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text);
  transition: background 0.28s var(--ease), color 0.28s, padding-left 0.28s var(--ease);
}
/* An accent that grows out of the left edge instead of a flat block of colour. */
.navbar-lux__panel a::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 50%;
  width: 3px;
  height: 0;
  border-radius: 2px;
  background: var(--brand-deep);
  transform: translateY(-50%);
  transition: height 0.3s var(--ease);
}
.navbar-lux__panel a:hover {
  background: rgba(106, 151, 204, 0.1);
  color: var(--brand-deep);
  padding-left: 22px;
}
.navbar-lux__panel a:hover::before { height: 17px; }
/* The count becomes a chip that fills in on hover. */
.navbar-lux__panel a span {
  min-width: 28px;
  padding: 3px 8px;
  border-radius: 7px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: rgba(14, 22, 32, 0.055);
  transition: background 0.28s, color 0.28s;
}
.navbar-lux__panel a:hover span { background: var(--brand-deep); color: #fff; }
/*
  The rows drop in one after the other. Done as an animation rather than a
  staggered transition-delay, because a delay would also lag the hover feedback
  on each row.
*/
.navbar-lux__has-menu:hover .navbar-lux__panel a,
.navbar-lux__has-menu:focus-within .navbar-lux__panel a {
  animation: menuRowIn 0.42s var(--ease) backwards;
}
.navbar-lux__panel a:nth-child(2) { animation-delay: 0.06s; }
.navbar-lux__panel a:nth-child(3) { animation-delay: 0.12s; }
@keyframes menuRowIn {
  from { opacity: 0; transform: translateY(-7px); }
}

/* Mobile menu: the same four links, nested under Projects */
.mobile-menu { overflow-y: auto; }
.mobile-menu__sub {
  list-style: none;
  margin: 0 0 6px;
  padding: 6px 0 0 42px;
  display: grid;
  gap: 2px;
}
.mobile-menu__links .mobile-menu__sub a {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  padding: 9px 0;
  border-bottom: 0;
  color: rgba(255, 255, 255, 0.62);
}
.mobile-menu__links .mobile-menu__sub a:hover { color: var(--gold); padding-left: 6px; }

/* ==========================================================================
   About: body copy sections (What we do)
   ========================================================================== */
.about-copy__body p {
  font-size: 16.5px;
  line-height: 1.8;
  color: var(--muted);
  margin: 0 0 20px;
}
.about-copy__body p:first-child { color: var(--text); }
.about-copy__body p:last-child { margin-bottom: 0; }
@media (max-width: 991.98px) {
  .about-copy__body p { font-size: 15.5px; line-height: 1.75; }
}

/* ==========================================================================
   Mission & Vision
   A mosaic that checkerboards photographs against two text plates, then a band
   whose photograph pins while the copy travels over it.
   ========================================================================== */

/* ---------- Mission & vision: two coloured cards ---------- */
.mvv { position: relative; overflow: hidden; background: #f4f6f8; }
.mvv > .container-xl { position: relative; }
/* Twelve columns, because the two rows do not share a split: the vision card is
   wide over a narrow intro, and the photograph is narrow under a wide mission. */
.mvv__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 26px);
}
.mvv__intro { grid-column: 8 / 13; grid-row: 1; display: grid; align-content: center; }
.mvv__vision { grid-column: 1 / 8; grid-row: 1; }
.mvv__photo { grid-column: 1 / 6; grid-row: 2; }
.mvv__mission { grid-column: 6 / 13; grid-row: 2; }
/* a grid item is blockified, so the pill would stretch the whole column */
.mvv__intro > .eyebrow { justify-self: start; }
.mvv__title { font-size: clamp(25px, 3.2vw, 44px); line-height: 1.12; letter-spacing: -0.02em; margin: 0; }
.mvv__title em { font-style: normal; color: var(--brand-deep); }
.mvv__lead { margin: 15px 0 0; font-size: 14.8px; line-height: 1.75; color: var(--muted); }

.mvv__card {
  position: relative;
  overflow: hidden;
  /* so the shapes below can sit on z-index -1: above the cards own background,
     under its content, without escaping to an ancestor */
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 38px);
  padding: clamp(22px, 2.6vw, 38px);
  border-radius: clamp(16px, 1.8vw, 26px);
  box-shadow: 0 24px 46px -26px rgba(6, 22, 45, 0.4);
}
.mvv__card--vision,
.mvv__card--mission {
  background: linear-gradient(150deg, #0d3565 0%, #061f3f 100%);
  color: #fff;
}
/* One ring and one wash per card. currentColor means a single pair of rules
   reads dark on the light plate and light on the deep one. */
.mvv__card::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: clamp(190px, 24vw, 330px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0.16;
  pointer-events: none;
}
.mvv__card::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
}
.mvv__card--vision::before { top: -26%; right: -7%; }
.mvv__card--vision::after { background: radial-gradient(ellipse 58% 54% at 92% 90%, rgba(114, 184, 250, 0.3), transparent 62%); }
.mvv__card--mission::before { bottom: -32%; left: -6%; }
.mvv__card--mission::after { background: radial-gradient(ellipse 60% 56% at 88% 5%, rgba(114, 184, 250, 0.32), transparent 62%); }
/* the badge leads on the mission card and trails on the vision one, so the two
   discs sit on opposite diagonals rather than lining up down one edge */
.mvv__card--mission .mvv__badge { order: -1; }
.mvv__badge {
  flex: none;
  width: clamp(84px, 9vw, 126px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 18px 34px -16px rgba(6, 22, 45, 0.4);
  transition: transform 0.5s var(--ease);
}
.mvv__card:hover .mvv__badge { transform: scale(1.06); }
.mvv__badge { background: #fff; color: var(--brand-deep); }
.mvv__list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(15px, 1.9vw, 24px); }
.mvv__list li { display: flex; gap: 11px; align-items: flex-start; }
.mvv__check { flex: none; margin-top: 3px; opacity: 0.8; }
.mvv__t { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.25; margin: 0 0 6px; color: inherit; }
.mvv__d { margin: 0; font-size: 13.8px; line-height: 1.65; }
.mvv__d { color: rgba(255, 255, 255, 0.76); }
.mvv__photo { margin: 0; overflow: hidden; border-radius: clamp(16px, 1.8vw, 26px); min-height: clamp(210px, 22vw, 300px); }
.mvv__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.mvv__photo:hover img { transform: scale(1.05); }

@media (max-width: 991.98px) {
  /* one column: the twelve-column offset has nothing left to offset against */
  .mvv__grid { grid-template-columns: minmax(0, 1fr); }
  .mvv__intro, .mvv__vision, .mvv__photo, .mvv__mission { grid-column: 1; grid-row: auto; }
}
@media (max-width: 575.98px) {
  .mvv__card { flex-direction: column; align-items: flex-start; }
  /* stacked, the badge leads on both cards - order: 0 would have dropped it to
     the foot of the list, which is not what the comment claimed */
  .mvv__card .mvv__badge { order: -1; }
}


/* ==========================================================================
   Core Values
   Four jewel-toned plates stepped against each other, over two soft organic
   shapes, closing on a note from the managing director. The reference used
   primary brights; these are deep, muted versions in the brand's own family so
   the page still reads as premium rather than playful.
   ========================================================================== */

.cvalues { position: relative; overflow: hidden; background: #fff; }
/* Two shapes sit far behind everything. The lopsided radii stop them reading as
   plain circles, which is what gives the band its drawn feel. */
.cvalues__blob { position: absolute; z-index: 0; pointer-events: none; }
.cvalues__blob--a {
  left: -9%;
  bottom: -18%;
  width: 46vw;
  max-width: 640px;
  aspect-ratio: 1 / 0.86;
  border-radius: 58% 42% 46% 54% / 52% 48% 52% 48%;
  background: linear-gradient(150deg, rgba(109, 151, 204, 0.26), rgba(109, 151, 204, 0.06));
}
.cvalues__blob--b {
  right: -11%;
  top: -16%;
  width: 40vw;
  max-width: 580px;
  aspect-ratio: 1 / 0.9;
  border-radius: 44% 56% 52% 48% / 46% 52% 48% 54%;
  background: linear-gradient(150deg, rgba(6, 59, 115, 0.12), rgba(6, 59, 115, 0.03));
}
.cvalues > .container-xl { position: relative; z-index: 1; }
.cvalues__head { max-width: 780px; margin-bottom: clamp(26px, 3vw, 46px); }
.cvalues__title { font-size: clamp(26px, 3.2vw, 42px); line-height: 1.12; letter-spacing: -0.02em; margin: 0; }
.cvalues__title em { font-style: normal; color: var(--brand-deep); }
.cvalues__lead { margin: 14px 0 0; max-width: 640px; font-size: 15.5px; line-height: 1.72; color: var(--muted); }
.cvalues__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  align-items: start;
}
/* the alternating lift is the whole point of the arrangement */
.cvalues__grid > li:nth-child(odd) { margin-top: clamp(20px, 3.2vw, 52px); }
.cval {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  align-content: start;
  min-height: clamp(252px, 26vw, 332px);
  padding: clamp(22px, 2.2vw, 30px);
  border-radius: 18px;
  color: #fff;
  box-shadow: 0 26px 48px -26px rgba(6, 22, 45, 0.5);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.cval:hover { transform: translateY(-8px); box-shadow: 0 38px 64px -26px rgba(6, 22, 45, 0.6); }
/* the sheen lives on a pseudo, so each plate only has to declare its own two
   colours and they all catch the light the same way */
.cval::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 85% 70% at 82% 4%, rgba(255, 255, 255, 0.2), transparent 62%);
}
.cval--sapphire { background: linear-gradient(158deg, #0d3565 0%, #061f3f 100%); }
.cval--emerald { background: linear-gradient(158deg, #0e4038 0%, #06231e 100%); }
.cval--graphite { background: linear-gradient(158deg, #2f3440 0%, #15181d 100%); }
.cval--bronze { background: linear-gradient(158deg, #4a3419 0%, #26190b 100%); }
.cval__icon {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: background 0.45s var(--ease);
}
.cval:hover .cval__icon { background: rgba(255, 255, 255, 0.2); }
.cval__no {
  position: absolute;
  top: 15px;
  right: 20px;
  font-family: var(--font-head);
  font-size: 44px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  opacity: 0.14;
  pointer-events: none;
}
.cval__t { font-size: clamp(17px, 1.5vw, 20px); margin: clamp(18px, 2vw, 26px) 0 9px; color: #fff; }
.cval__d { margin: 0; font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, 0.72); }
.cvalues__cta { margin-top: clamp(30px, 3.4vw, 48px); }

/* ---------- A note from the managing director ---------- */
.cmd { position: relative; overflow: hidden; isolation: isolate; background: #f6f6f6; text-align: center; }
/* Two drawings anchored to the floor of the band, the right one mirrored so the
   pair does not read as the same picture twice. */
.cmd__art {
  position: absolute;
  z-index: -1;
  bottom: 0;
  width: clamp(190px, 29vw, 440px);
  opacity: 0.5;
  pointer-events: none;
}
.cmd__art img { width: 100%; height: auto; display: block; }
.cmd__art--l { left: clamp(-70px, -4vw, 0px); }
.cmd__art--r { right: clamp(-70px, -4vw, 0px); transform: scaleX(-1); }
.cmd > .container-xl { position: relative; }
/* The logo file has no alpha, so on anything but white it would sit in a white
   box. Multiply drops its background into the band and leaves the mark alone. */
.cmd__logo {
  display: block;
  width: clamp(132px, 14vw, 186px);
  height: auto;
  margin: 0 auto;
  mix-blend-mode: multiply;
}
.cmd__quote {
  margin: clamp(22px, 2.8vw, 40px) auto 0;
  max-width: 1020px;
  font-size: clamp(21px, 3vw, 42px);
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: -0.02em;
  color: var(--text);
}
.cmd__avatar {
  width: 86px;
  height: 86px;
  margin: clamp(26px, 3.2vw, 48px) auto 0;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #fff;
  box-shadow: 0 14px 30px -14px rgba(6, 22, 45, 0.5);
}
.cmd__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmd__name { font-size: 19px; margin: clamp(14px, 1.6vw, 20px) 0 4px; }
.cmd__role { font-size: 13.5px; color: var(--muted); }

@media (max-width: 1199.98px) {
  .cvalues__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* two up: lift the second of each pair instead of every other card */
  .cvalues__grid > li:nth-child(odd) { margin-top: 0; }
  .cvalues__grid > li:nth-child(even) { margin-top: clamp(18px, 3vw, 44px); }
}
@media (max-width: 767.98px) {
  /* the drawings would crowd the quote at this width */
  .cmd__art { display: none; }
}
@media (max-width: 575.98px) {
  .cvalues__grid { grid-template-columns: minmax(0, 1fr); }
  .cvalues__grid > li:nth-child(even) { margin-top: 0; }
  .cval { min-height: 0; }
}


/* ==========================================================================
   Who We Are
   Built to the Vian reference: a centred breadcrumb banner, an image/copy split
   with an accent card riding the photograph, a giant ghost wordmark, a
   full-bleed statement band, a pinned heading beside a scrolling history, and a
   mixed grid of photographs and feature cards.
   Vian's pop colour is lime on charcoal; the structure, scale and motion are
   carried over, the colour is Truegrowth's deep blue so the page still belongs
   to the rest of the site.
   ========================================================================== */

/* ---------- Shared type scale for this page ---------- */
/* Bigger and tighter than .section-title: the reference leads with headline
   scale, and the rest of the page is built around that weight. */
/* the reference's buttons are full capsules, not the 10px corner used elsewhere */
.btn-lux--pill { border-radius: 999px; padding-inline: 26px; }

/* ---------- Centred breadcrumb banner ---------- */
.phero--center {
  align-items: center;
  text-align: center;
  min-height: min(62svh, 520px);
  padding: 128px 0 72px;
}
.phero--center .phero__inner { display: grid; justify-items: center; }
.phero--center .phero__title {
  order: 1;
  margin: 0 0 18px;
  font-size: clamp(38px, 5.6vw, 78px);
  letter-spacing: -0.022em;
  line-height: 1.04;
}
/* the reference puts the trail under the title, not above it */
.phero--center .phero__crumbs { order: 2; margin: 0; }
.phero--center .phero__text { order: 3; margin-top: 20px; max-width: 620px; }
.phero--center .phero__scroll { display: none; }
.phero--center .phero__shade {
  background:
    linear-gradient(180deg, rgba(10, 14, 20, 0.74) 0%, rgba(10, 14, 20, 0.64) 45%, rgba(10, 14, 20, 0.82) 100%);
}

/* ---------- About: headline, two plates, copy ---------- */
.wabout { background: #f6f6f6; overflow: hidden; padding-bottom: clamp(26px, 2.8vw, 44px); }
.wabout__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 0.95fr);
  column-gap: clamp(18px, 3vw, 48px);
  row-gap: clamp(22px, 3vw, 44px);
  align-items: start;
}
/* The headline runs across the first two columns and the large plate drops into
   the third, reaching back up alongside it. That overlap is what tiers the
   block instead of leaving it a plain two-up. */
.wabout__head { grid-column: 1 / 3; grid-row: 1; }
.wabout__title { font-size: clamp(27px, 3.5vw, 46px); line-height: 1.12; letter-spacing: -0.02em; margin: 0; }
.wabout__title em { font-style: normal; color: var(--brand-deep); }
/* the plate itself moves, not the picture inside a fixed frame, so no clipping here */
.wabout__shot figure { margin: 0; border-radius: 14px; overflow: hidden; will-change: transform; }
.wabout__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wabout__lg { grid-column: 3; grid-row: 1 / span 2; margin-top: clamp(26px, 4vw, 62px); }
.wabout__lg figure { aspect-ratio: 4 / 3.3; }
.wabout__sm { grid-column: 1; grid-row: 2; }
.wabout__sm figure { aspect-ratio: 4 / 2.9; }
.wabout__copy { grid-column: 2; grid-row: 2; }
.wabout__lead { margin: 0; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.5; font-weight: 600; color: var(--text); }
.wabout__body { margin: 14px 0 0; font-size: 14px; line-height: 1.72; color: var(--muted); }
.wabout__cta { margin-top: clamp(18px, 2vw, 26px); }

/* ---------- Giant ghost wordmark ---------- */
.vmark {
  position: relative;
  overflow: hidden;
  background: #f6f6f6;
  padding-block: clamp(14px, 1.8vw, 26px);
}
.vmark__inner { position: relative; display: grid; place-items: center; min-height: clamp(96px, 11vw, 158px); }
.vmark__word {
  font-family: var(--font-head);
  font-size: clamp(52px, 12vw, 178px);
  font-weight: 700;
  line-height: 0.78;
  letter-spacing: -0.045em;
  color: #e7e9ec;
  white-space: nowrap;
  user-select: none;
}
/* the drawing crosses the wordmark rather than sitting beside it - that overlap
   is what stops the band reading as two separate things */
.vmark__art {
  position: absolute;
  right: clamp(-56px, -4vw, -12px);
  bottom: 0;
  width: clamp(140px, 15vw, 220px);
  opacity: 0.6;
  pointer-events: none;
}
.vmark__art img { width: 100%; height: auto; display: block; }

/* ---------- What sets us apart ---------- */
.wapart {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(158deg, #0d2744 0%, #07192f 58%, #0b1b2e 100%);
}
.wapart::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 58% 55% at 14% 0%, rgba(114, 184, 250, 0.18), transparent 62%);
  pointer-events: none;
}
.wapart > .container-xl { position: relative; z-index: 1; }
.wapart { padding-block: clamp(26px, 3vw, 44px); }
/* left edge, so the masthead lines up with the card below it - a centred block
   over this left-right split had nothing to centre against */
.wapart__head {
  display: grid;
  justify-items: start;
  margin-bottom: clamp(22px, 2.5vw, 34px);
}
.wapart__title { font-size: clamp(26px, 3.2vw, 42px); line-height: 1.1; letter-spacing: -0.02em; margin: 0; color: #fff; }
.wapart__title em { font-style: normal; color: var(--brand-light); }
.wapart__lead { margin: 13px 0 0; max-width: 620px; font-size: 14.5px; line-height: 1.7; color: rgba(255, 255, 255, 0.64); }
.wapart__body {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 52px);
  /* stretch, so the card ends level with the last row of the list */
  align-items: stretch;
}
.wapart__card {
  display: flex;
  flex-direction: column;
  padding: clamp(10px, 1vw, 14px);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.13);
}
/* a shallow, fixed slice for the picture - the copy below takes whatever height
   the list leaves, which is what keeps the card finishing level with it */
.wapart__shot { position: relative; margin: 0; border-radius: 13px; overflow: hidden; flex: 0 0 auto; aspect-ratio: 2 / 1; }
.wapart__shot img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.36s var(--ease), transform 0.36s var(--ease); }
/* the swap drops away and lifts back in - see the picker module in main.js */
.wapart__shot img.is-out { opacity: 0; transform: translateY(12px); }
.wapart__cap.is-out { opacity: 0; transform: translateY(7px); }
.wapart__go {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #06243f;
  background: var(--accent);
  transition: transform 0.45s var(--ease);
}
.wapart__card:hover .wapart__go { transform: rotate(45deg); }
.wapart__cap {
  flex: 1 1 auto;
  margin: clamp(12px, 1.2vw, 16px) 5px 4px;
  font-size: 14.5px;
  line-height: 1.68;
  color: rgba(255, 255, 255, 0.68);
  transition: opacity 0.36s var(--ease), transform 0.36s var(--ease);
}
.wapart__list { list-style: none; margin: 0; padding: 0; }
.wapart__item { border-bottom: 1px solid rgba(255, 255, 255, 0.13); }
.wapart__item:first-child { border-top: 1px solid rgba(255, 255, 255, 0.13); }
.wapart__btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: clamp(11px, 1.3vw, 17px);
  padding: clamp(10px, 1.1vw, 15px) 0;
  margin: 0;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.wapart__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.wapart__ico {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease);
}
.wapart__t {
  margin: 0;
  font-size: clamp(16px, 1.55vw, 21px);
  font-weight: 500;
  line-height: 1.25;
  color: #fff;
  transition: color 0.35s var(--ease);
}
.wapart__item.is-active .wapart__t,
.wapart__btn:hover .wapart__t { color: var(--accent); }
.wapart__item.is-active .wapart__ico,
.wapart__btn:hover .wapart__ico { background: rgba(114, 184, 250, 0.16); border-color: rgba(114, 184, 250, 0.4); }

@media (max-width: 1199.98px) {
  .wapart__body { grid-template-columns: minmax(0, 1fr); }
  .wapart__card { max-width: 540px; }
}
@media (max-width: 991.98px) {
  .wabout__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .wabout__head { grid-column: 1 / -1; grid-row: 1; }
  .wabout__lg { grid-column: 2; grid-row: 2; margin-top: 0; }
  .wabout__sm { grid-column: 1; grid-row: 2; }
  .wabout__copy { grid-column: 1 / -1; grid-row: 3; }
}
@media (max-width: 575.98px) {
  .wabout__grid { grid-template-columns: minmax(0, 1fr); }
  /* one column: let them flow in source order and drop the explicit placement */
  .wabout__head, .wabout__lg, .wabout__sm, .wabout__copy { grid-column: 1; grid-row: auto; }
  .phero--center { padding: 104px 0 52px; min-height: min(52svh, 420px); }
}



/* ==========================================================================
   About pages: Who We Are, Core Values, Mission & Vision, Team
   Who We Are, Core Values and Mission & Vision use the original quiet set of
   blocks. Only Our Team keeps the heavier treatment - the overlapping rail and
   the alternating leader rows - so the components below are split accordingly.
   Entrances all ride the existing [data-reveal] / [data-count] scroll triggers.
   ========================================================================== */

/* ==========================================================================
   Our Team only
   ========================================================================== */

/* ---------- The hero, and the rail that overlaps it ---------- */
.phero--about {
  min-height: min(74svh, 640px);
  /* room underneath for the rail to sit half on the photograph, plus the
     clearance the fact row above it needs */
  padding-bottom: clamp(142px, 14.4vw, 218px);
}
.phero--about .phero__bg img { object-position: center 52%; }
/* the rail covers the corner this used to sit in, and it already says there is more below */
.phero--about .phero__scroll { display: none; }
/* A wash raked in from the left, so the type has a dark field under it whatever
   the photograph happens to be doing on that side. */
.phero--about .phero__shade {
  background:
    linear-gradient(100deg, rgba(5, 17, 33, 0.94) 0%, rgba(5, 17, 33, 0.74) 36%, rgba(5, 17, 33, 0.2) 70%, rgba(5, 17, 33, 0.5) 100%),
    linear-gradient(180deg, rgba(14, 22, 32, 0.6) 0%, transparent 32%);
}
/* one brand glow, bled off the right edge */
.phero--about::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -20%;
  right: -8%;
  width: 46vw;
  height: 46vw;
  max-width: 640px;
  max-height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(114, 184, 250, 0.3), transparent 62%);
  pointer-events: none;
}
.phero__meta {
  list-style: none;
  margin: clamp(18px, 2vw, 26px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
}
.phero__meta li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: rgba(255, 255, 255, 0.84); }
.phero__meta svg { flex: none; color: var(--accent); }

/* ---------- Glass band over a photograph ---------- */
.pband { position: relative; overflow: hidden; color: #fff; }
.pband__bg { position: absolute; inset: 0; }
.pband__bg img { width: 100%; height: 100%; object-fit: cover; }
/* z-index, not source order: .pband__bg is a real element and this is a pseudo,
   so without it the photograph paints over its own overlay. */
.pband::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(5, 16, 30, 0.96) 0%, rgba(5, 16, 30, 0.9) 46%, rgba(5, 16, 30, 0.76) 100%),
    linear-gradient(180deg, rgba(5, 16, 30, 0.5), transparent 40%);
}
.pband > .container-xl { position: relative; z-index: 2; }
/* the default highlight is the deep brand, which disappears on a dark band */
.pband .section-title em { color: var(--brand-light); }
.pband__head { max-width: 640px; margin-bottom: clamp(28px, 3.2vw, 44px); }
.pband__lead { margin: 14px 0 0; font-size: 15.5px; line-height: 1.75; color: rgba(255, 255, 255, 0.68); }
.pband__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.pband__item {
  padding: clamp(22px, 2.2vw, 32px);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  transition: transform 0.4s var(--ease), background 0.4s var(--ease);
}
.pband__item:hover { transform: translateY(-5px); background: rgba(255, 255, 255, 0.1); }
.pband__icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.pband__item h3 { font-size: 17px; margin: 16px 0 9px; color: #fff; }
.pband__item p { margin: 0; font-size: 14.2px; line-height: 1.7; color: rgba(255, 255, 255, 0.7); }
.pband__cta { margin-top: clamp(26px, 3vw, 40px); }

/* ---------- Team: the leader rows ---------- */
.pteam { background: #fff; }
.pteam__head { max-width: 700px; margin-bottom: clamp(30px, 3.4vw, 48px); }
.pteam__lead { margin: 14px 0 0; font-size: 15.5px; line-height: 1.75; color: var(--muted); }
.pteam__list { list-style: none; margin: 0; padding: 0; }
.mrow {
  display: grid;
  /* a fixed portrait column: the source photographs are small, and a fractional
     column would scale them up with the viewport until they fell apart */
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(30px, 4vw, 70px);
  align-items: center;
  padding-block: clamp(28px, 3.2vw, 48px);
  border-top: 1px solid var(--line);
}
.mrow:first-child { border-top: 0; padding-top: 0; }
.mrow__art { position: relative; }
/* an offset plate behind the portrait - the only ornament each row needs */
.mrow__art::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 22px -20px -20px 22px;
  border-radius: 22px;
  background: linear-gradient(158deg, rgba(109, 151, 204, 0.55), rgba(6, 59, 115, 0.14));
}
/* reversing a row has to swap the two column widths too, or the portrait lands
   in the wide column and the copy in the narrow one */
.mrow--rev { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }
.mrow--rev .mrow__art { order: 2; }
.mrow--rev .mrow__art::before { inset: 22px 22px -20px -20px; }
.mrow__photo {
  position: relative;
  z-index: 1;
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 1 / 1.14;
  box-shadow: 0 30px 58px -30px rgba(6, 22, 45, 0.52);
}
.mrow__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.mrow:hover .mrow__photo img { transform: scale(1.045); }
.mrow__role {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(6, 59, 115, 0.08);
  color: var(--brand-deep);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.mrow__name { font-size: clamp(24px, 2.6vw, 36px); margin: 14px 0 0; }
.mrow__quote {
  margin: clamp(16px, 1.8vw, 22px) 0;
  padding-left: 20px;
  border-left: 2px solid var(--brand);
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.55;
  font-style: italic;
  color: var(--text);
}
.mrow__bio { margin: 0 0 clamp(16px, 1.8vw, 22px); font-size: 15px; line-height: 1.78; color: var(--muted); }
.mrow__tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mrow__tags li { padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 12.5px; color: var(--text); }

/* ==========================================================================
   Who We Are, Core Values, Mission & Vision
   ========================================================================== */

/* ---------- Who we are: narrative ---------- */
.pnarrative { background: #fff; }
.pnarrative__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 70px);
  align-items: start;
}
/* The heading holds while the prose beside it scrolls past. */
.pnarrative__aside { position: sticky; top: calc(76px + clamp(16px, 2vw, 30px)); }
.pnarrative__cta { margin-top: clamp(18px, 2vw, 26px); }
.pnarrative__body p { font-size: 15.5px; line-height: 1.8; color: var(--muted); margin: 0 0 18px; }
.pnarrative__body p:last-child { margin-bottom: 0; }
.pnarrative__lead { font-size: 18px !important; line-height: 1.65 !important; color: var(--ink) !important; }

/* ---------- Who we are: numbers ---------- */
.pstats { background: #fff; padding-top: 0; }
.pstats__row {
  list-style: none;
  margin: 0;
  padding: clamp(24px, 2.8vw, 38px) 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 36px);
}
.pstats__row li { display: grid; gap: 4px; }
.pstats__row strong {
  font-family: var(--font-head);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 600;
  line-height: 1;
  color: var(--brand-deep);
}
/* direct child only: the counter lives in a span inside the <strong>, and the
   unscoped selector was shrinking the number and leaving the + at full size */
.pstats__row li > span { font-size: 14px; color: var(--muted); }

/* ---------- Who we are: what sets us apart ---------- */
.papart { background: #f6f6f6; }
.papart__head { max-width: 680px; margin-bottom: clamp(24px, 2.8vw, 38px); }
.papart__lead { margin: 14px 0 0; font-size: 15.5px; line-height: 1.7; color: var(--muted); }
.papart__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
.papart__item {
  position: relative;
  padding: clamp(22px, 2.2vw, 30px);
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line);
  transition: transform 0.36s var(--ease), box-shadow 0.36s var(--ease), border-color 0.36s var(--ease);
}
.papart__item:hover {
  transform: translateY(-4px);
  border-color: rgba(6, 59, 115, 0.22);
  box-shadow: 0 2px 6px rgba(14, 22, 32, 0.05), 0 24px 44px -26px rgba(14, 22, 32, 0.42);
}
.papart__no {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--brand);
}
.papart__item h3 { font-size: clamp(17px, 1.5vw, 20px); margin: 10px 0 9px; }
.papart__item p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--muted); }

@media (max-width: 1199.98px) {
}
@media (max-width: 991.98px) {
  .phero--about { padding-bottom: clamp(124px, 17vw, 176px); }
  .pband__grid { grid-template-columns: minmax(0, 1fr); }
  .mrow, .mrow--rev { grid-template-columns: minmax(0, 1fr); }
  .mrow__art, .mrow--rev .mrow__art { order: 0; max-width: 380px; }
  .mrow__art::before, .mrow--rev .mrow__art::before { inset: 18px -16px -16px 18px; }
  .pnarrative__grid { grid-template-columns: minmax(0, 1fr); }
  /* nothing to pin against in one column */
  .pnarrative__aside { position: static; }
  .pstats__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .papart__grid { grid-template-columns: minmax(0, 1fr); }
}



/* ==========================================================================
   About: Our Team
   White band between the ivory section above and the sand one below. Each portrait
   sits in a white well inside a warm card, so the photo is framed by the layout
   rather than blown up — the source files are only 173px square.
   ========================================================================== */
.team { position: relative; overflow: hidden; background: #fff; padding-block: clamp(26px, 2.74vw, 40px); }
.team::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(106, 151, 204, 0.35), transparent);
}
.team > .container-xl { position: relative; z-index: 1; }
.team__head { text-align: center; max-width: 600px; margin: 0 auto clamp(28px, 3vw, 42px); }
.team__head .section-title { font-size: clamp(20px, 2.02vw, 29px); }
.team__head .section-lead { margin-top: 10px; font-size: 14.5px; }

.team__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.6vw, 24px);
}
.tmember {
  display: flex;
  flex-direction: column;
  padding: 14px 14px 24px;
  border-radius: 20px;
  border: 1px solid rgba(106, 151, 204, 0.2);
  background: linear-gradient(180deg, var(--ivory) 0%, #f1ebe1 100%);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.tmember:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 52px -26px rgba(18, 49, 95, 0.4);
}

/* the well: a white mount the portrait sits inside, full card width */
.tmember__well {
  display: grid;
  place-items: center;
  padding: 16px 12px;
  border-radius: 14px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(14, 22, 32, 0.05);
}
.tmember__well img {
  width: 100%;
  max-width: 168px;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  border-radius: 10px;
  box-shadow: 0 12px 26px -16px rgba(18, 49, 95, 0.75);
  transition: transform 0.6s var(--ease);
}
.tmember:hover .tmember__well img { transform: scale(1.035); }

.tmember__body { text-align: center; padding: 0 4px; }
/* a short brand rule sets the name off from the portrait */
.tmember__body::before {
  content: '';
  display: block;
  width: 32px;
  height: 2px;
  margin: 18px auto 14px;
  border-radius: 2px;
  background: var(--brand);
  transition: width 0.45s var(--ease), background 0.45s var(--ease);
}
.tmember:hover .tmember__body::before { width: 52px; background: var(--brand-deep); }
.tmember__name { margin: 0; font-size: 21px; color: var(--ink); }
.tmember__role {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-deep);
}

@media (max-width: 1199.98px) {
  .team__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px) {
  .tmember { padding: 12px 12px 20px; }
  .tmember__well { padding: 12px 10px; }
  .tmember__well img { max-width: 150px; }
  .tmember__name { font-size: 19px; }
}
@media (max-width: 479.98px) {
  .team__grid { grid-template-columns: 1fr; max-width: 300px; margin-inline: auto; }
  .tmember__well img { max-width: 176px; }
}
@media (prefers-reduced-motion: reduce) {
  .tmember, .tmember__well img, .tmember__body::before { transition: none; }
  .tmember:hover { transform: none; }
  .tmember:hover .tmember__well img { transform: none; }
}

/* ==========================================================================
   Home: latest blog posts
   Three cards; the middle one is flipped so its image sits under the copy,
   which breaks the row's rhythm without needing a different card.
   ========================================================================== */

.blogfeed { background: #fff; }
.blogfeed__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: clamp(22px, 2.4vw, 34px);
}
.blogfeed__title { margin: 0; }
.blogfeed__all { flex: none; }

.blogfeed__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.9vw, 26px);
  align-items: start;
}

.bpost {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 13px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(14, 22, 32, 0.04), 0 14px 30px -22px rgba(14, 22, 32, 0.35);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.bpost:hover {
  transform: translateY(-4px);
  border-color: rgba(6, 59, 115, 0.2);
  box-shadow: 0 2px 5px rgba(14, 22, 32, 0.05), 0 24px 44px -22px rgba(14, 22, 32, 0.4);
}

.bpost__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 11;
  border-radius: 14px;
  overflow: hidden;
  flex: none;
}
.bpost__media img { width: 100%; height: 100%; object-fit: cover; }
.bpost__tag {
  position: absolute;
  top: 11px;
  left: 11px;
  z-index: 1;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ink);
}

.bpost__body { padding: 15px 7px 7px; display: flex; flex-direction: column; flex: 1; }
/* flipped: the copy sits above the image, so the padding flips with it */

.bpost__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--muted);
}
.bpost__meta i { font-style: normal; opacity: 0.5; }
.bpost__title { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.25; margin: 9px 0 9px; }
.bpost__title a { transition: color 0.3s; }
.bpost:hover .bpost__title a { color: var(--brand-deep); }
.bpost__excerpt {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 991.98px) {
  .blogfeed__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blogfeed__grid > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
  .blogfeed__grid { grid-template-columns: minmax(0, 1fr); }
  .blogfeed__grid > :last-child { grid-column: auto; }
  /* stacked, a flipped card just reads as a different card, so level them up */
}


/* ==========================================================================
   Home: testimonials
   A photograph behind two columns of reviews that creep past each other in
   opposite directions. Each column holds its set twice and slides by exactly
   one pass, so the wrap is invisible.
   ========================================================================== */

.tst { position: relative; overflow: hidden; }
/*
  Anchored to the bottom and taller than the section, so the sky at the top of
  the source is cropped away by the section's own overflow and what shows is the
  city. object-position alone could not reach it: at this aspect ratio cover
  only trims about a hundred pixels, and the sky is far deeper than that.
*/
.tst__bg {
  position: absolute;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 150%;
  object-fit: cover;
  object-position: 50% 100%;
}
/*
  Black, left to right: enough behind the copy to read against, gone by the time
  it reaches the cards so the photograph still shows. Masked off at the top so
  the section's upper edge is the clean photo and the darkening is not read as a
  shadow cast by the section above it.
*/
.tst::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.5) 32%, rgba(0, 0, 0, 0.18) 62%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 26%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 26%);
}
.tst > .container-xl { position: relative; z-index: 2; }

.tst__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: clamp(26px, 3.4vw, 56px);
  align-items: center;
}

/* ---------- Intro ---------- */
.tst__title { color: #fff; font-size: clamp(28px, 3.2vw, 46px); line-height: 1.12; margin-bottom: 14px; }
.tst__title em { font-style: normal; color: var(--brand-light); }
.tst__lead { font-size: 15.5px; line-height: 1.7; color: rgba(255, 255, 255, 0.85); margin: 0 0 24px; max-width: 40ch; }

/* ---------- The two columns ---------- */
.tst__cols {
  --col-gap: clamp(12px, 1.3vw, 18px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--col-gap);
  /* the columns are masked at both ends so cards fade in and out rather than
     being sliced by the overflow */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent);
}
.tst__col { overflow: hidden; height: clamp(400px, 52vw, 560px); }
/*
  The gap lives on each card rather than on the track: with a grid gap, half the
  track is half a gap short of one pass and the loop jumps every cycle.
*/
.tst__track { display: flex; flex-direction: column; animation: tstUp 46s linear infinite; }
.tst__col--down .tst__track { animation-name: tstDown; }
/* Only the column holding the hovered card stops; pointing anywhere else in
   the section leaves both running. :has() is what makes that possible - a child
   cannot otherwise pause its own track. */
.tst__track:has(.tstc:hover) { animation-play-state: paused; }
@keyframes tstUp {
  to { transform: translateY(-50%); }
}
@keyframes tstDown {
  from { transform: translateY(-50%); }
  to { transform: translateY(0); }
}

/* ---------- Card ----------
   The quote leads and carries the weight; the name sits under it as the credit.
   The old version put a name badge on top and greyed the review down to caption
   size, which read as a contact row with a note attached.
*/
.tstc {
  position: relative;
  flex: none;
  overflow: hidden;
  margin-bottom: var(--col-gap);
  padding: clamp(19px, 1.8vw, 25px);
  border-radius: 18px;
  /* a cool tint falling down the card, so it catches the light rather than
     sitting on the photograph as a flat white slab */
  background: linear-gradient(168deg, #ffffff 0%, #ffffff 56%, #f3f7fc 100%);
  color: var(--text);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.1),
    0 26px 50px -28px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
/* An oversized glyph bled into the corner, rather than a small icon sitting in
   the layout competing with the name. */
.tstc__mark {
  position: absolute;
  top: -10px;
  right: 12px;
  width: 62px;
  height: auto;
  color: var(--brand-deep);
  opacity: 0.08;
  pointer-events: none;
}
.tstc__text {
  position: relative;
  margin: 0 0 clamp(16px, 1.7vw, 21px);
  font-size: 14.5px;
  line-height: 1.68;
  color: var(--ink);
}
.tstc__by { display: flex; align-items: center; gap: 12px; margin: 0; }
.tstc__avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(6, 59, 115, 0.2);
}
.tstc__avatar img { width: 100%; height: 100%; object-fit: cover; }
.tstc__who { display: grid; gap: 1px; min-width: 0; }
.tstc__name { font-family: var(--font-head); font-size: 14.5px; font-weight: 600; color: var(--ink); }
.tstc__role { font-size: 12.5px; color: var(--muted); }

@media (max-width: 991.98px) {
  .tst__grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .tst__col { height: clamp(360px, 62vw, 460px); }
}
@media (max-width: 575.98px) {
  /* One column on a phone; two would leave the cards too narrow to read. */
  .tst__cols { grid-template-columns: minmax(0, 1fr); }
  .tst__col--up { display: none; }
}

/* ==========================================================================
   Blogs: listing and article
   The cards are the same .bcard used on the home page, so the two stay in step.
   ========================================================================== */
.bloglist { background: linear-gradient(180deg, #f2ece1 0%, var(--ivory) 58%, var(--ivory) 100%); }
.bloglist__head {
  display: grid;
  gap: clamp(16px, 1.8vw, 24px);
  margin-bottom: clamp(24px, 2.6vw, 38px);
}
.bloglist__filters { padding-top: clamp(14px, 1.6vw, 20px); border-top: 1px solid var(--line); }
.bloglist__filters { display: flex; flex-wrap: wrap; gap: 10px; }
.bloglist__filter {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(106, 151, 204, 0.32);
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.bloglist__filter sup { font-size: 9.5px; margin-left: 5px; opacity: 0.6; }
.bloglist__filter:hover { border-color: var(--brand-deep); }
.bloglist__filter.is-active { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }
.bloglist__filter:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* An editorial listing: the newest post takes a wide plate across the top and
   the rest follow beneath it, rather than every post getting the same tile. */
.bloglist__grid { list-style: none; }
.bloglist__grid .blog-item { display: flex; }
.bloglist__grid .bcard { width: 100%; }
.bloglist__empty { margin: 28px 0 0; text-align: center; color: var(--muted); }

/* ---------- the article ---------- */
.post { background: var(--ivory); padding-block: clamp(96px, 7.6vw, 112px) clamp(34px, 3.8vw, 54px); }
.post__layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(34px, 4.4vw, 76px); align-items: start; }
.post__body { max-width: 780px; min-width: 0; }

.post__crumbs { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.post__crumbs a { color: var(--muted); transition: color 0.3s var(--ease); }
.post__crumbs a:hover { color: var(--brand-deep); }
.post__crumbs svg { opacity: 0.5; }

.post__byline { margin: 20px 0 10px; font-size: 13px; color: var(--muted); }
.post__byline b { color: var(--brand-deep); font-weight: 600; }
.post__title { margin: 0; font-size: clamp(23px, 2.6vw, 35px); line-height: 1.16; color: var(--ink); }
.post__stand { margin: 16px 0 0; font-size: clamp(15.5px, 1.35vw, 17px); line-height: 1.7; color: var(--muted); max-width: 62ch; }
.post__cover { margin: clamp(24px, 2.6vw, 36px) 0 0; }
.post__cover img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-radius: 18px; }

.post__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; }
.post__tags li {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(106, 151, 204, 0.4);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--brand-deep);
}

.post__prose { margin-top: clamp(26px, 3vw, 40px); }
.post__prose h2 { font-size: clamp(21px, 2vw, 27px); margin: 34px 0 14px; }
.post__prose h2:first-child { margin-top: 0; }
.post__prose p { font-size: 15.5px; line-height: 1.85; color: var(--muted); margin: 0 0 18px; }
.post__prose a { color: var(--brand-deep); border-bottom: 1px solid rgba(6, 59, 115, 0.4); }
.post__prose a:hover { border-bottom-color: var(--brand-deep); }
.post__prose ul { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 12px; }
.post__prose ul li { position: relative; padding-left: 26px; font-size: 15.5px; line-height: 1.75; color: var(--muted); }
.post__prose ul li::before { content: ''; position: absolute; left: 4px; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.post__quote {
  margin: 30px 0;
  padding: 24px 28px;
  border-left: 3px solid var(--brand);
  border-radius: 0 16px 16px 0;
  background: linear-gradient(135deg, rgba(106, 151, 204, 0.12), rgba(106, 151, 204, 0.03));
}
.post__quote p { margin: 0; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--ink); font-weight: 500; }

/* who wrote it */
.post__author {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 38px;
  padding: 16px 20px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(106, 151, 204, 0.2);
}
.post__author-badge { width: 52px; height: 52px; flex: none; border-radius: 50%; overflow: hidden; background: #fff; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line); }
.post__author-badge img { width: 92%; height: auto; }
.post__author-text { display: grid; gap: 2px; margin-right: auto; }
.post__author-text b { font-family: var(--font-head); font-size: 16px; font-weight: 400; color: var(--ink); }
.post__author-text span { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.post__author-links { display: flex; gap: 8px; }
.post__author-links a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  color: var(--text);
  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.post__author-links a:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }

.post__pager { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin-top: 22px; }
.post__pager-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid rgba(106, 151, 204, 0.4);
  background: #fff;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text);
  transition: background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.post__pager-btn:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }
.post__pager-btn--next { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }
.post__pager-btn--next:hover { background: var(--ink); border-color: var(--ink); }

/* ---------- sidebar ---------- */
.post__aside { position: sticky; top: 104px; display: grid; gap: 18px; }
.post__aside-title { font-size: 17px; margin: 0; padding-left: 14px; border-left: 3px solid var(--brand); }
.popcards { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.popcard {
  display: grid;
  padding: 12px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(106, 151, 204, 0.18);
  transition: box-shadow 0.45s var(--ease), transform 0.45s var(--ease);
}
.popcard:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -28px rgba(18, 49, 95, 0.55); }
.popcard__media { display: block; border-radius: 12px; overflow: hidden; }
.popcard__media img { width: 100%; height: 148px; object-fit: cover; display: block; transition: transform 0.7s var(--ease); }
.popcard:hover .popcard__media img { transform: scale(1.06); }
.popcard__meta { margin-top: 12px; font-size: 12px; color: var(--muted); }
.popcard__meta b { color: var(--brand-deep); font-weight: 600; }
.popcard__title { margin-top: 6px; font-size: 14px; line-height: 1.3; color: var(--ink); transition: color 0.3s var(--ease); }
.popcard:hover .popcard__title { color: var(--brand-deep); }
.popcard__text {
  margin-top: 7px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.popcard .post__tags { margin-top: 12px; }
.popcard .post__tags li { padding: 4px 11px; font-size: 10.5px; }

.post__cta { padding: 24px; border-radius: 20px; background: linear-gradient(180deg, #fff, var(--ivory)); border: 1px solid rgba(106, 151, 204, 0.2); }
.post__cta-title { font-size: 15px; margin: 0 0 10px; }
.post__cta p { font-size: 14px; line-height: 1.65; color: var(--muted); margin: 0 0 18px; }

@media (max-width: 1199.98px) {
  .post__layout { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (max-width: 991.98px) {
  .post__layout { grid-template-columns: 1fr; }
  .post__aside { position: static; }
  .popcards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
  .bloglist__head { flex-direction: column; align-items: flex-start; }
  .popcards { grid-template-columns: 1fr; }
  .post__author { flex-wrap: wrap; }
  .post__author-text { margin-right: 0; }
  .post__pager { flex-direction: column; }
  .post__pager-btn { justify-content: center; }
}

/* ---------- Projects listing: one column on smaller screens ---------- */
@media (max-width: 1199.98px) {
  .listing__wrap { grid-template-columns: minmax(0, 1fr); }
  /* nothing to stay beside once it is stacked */
  .listing-filters { position: static; }
  .filters__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; }
  .ftabs { grid-auto-flow: column; }
  .filters__row { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; }
}
@media (max-width: 767.98px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  .filters__top { grid-template-columns: minmax(0, 1fr); }
  .ftabs { grid-auto-flow: row; }
  .filters__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Property type page: stacking ---------- */
@media (max-width: 991.98px) {
  .phero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
}
@media (max-width: 575.98px) {
  .phero__stats { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Blog listing: the featured plate folds on small screens ---------- */
@media (max-width: 767.98px) {
}

/* ---------- Contact + locations: stacking ---------- */
@media (max-width: 991.98px) {
  .channels__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* with two per row the left rule has to restart on each one */
  .channels__grid li:nth-child(odd) .channel { border-left: 0; padding-left: 0; }
}
@media (max-width: 575.98px) {
  .channels__grid { grid-template-columns: minmax(0, 1fr); }
  .channels__grid li .channel { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
  .channels__grid li:first-child .channel { border-top: 0; }
}

/* ---------- Explore by type: stacking ---------- */
@media (max-width: 1199.98px) {
  .types__grid { grid-template-columns: minmax(0, 1fr); }
  .types__lead { max-width: 620px; }
}
@media (max-width: 767.98px) {
  .types__cards { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Locations: fewer per row as it narrows ---------- */
@media (max-width: 991.98px) { .loc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .loc-grid { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Blog cards: picture, a meta line, a headline
   The chip comes off the photograph and leads a row with the date at the far
   end. No excerpt and no read-more footer. Applied as a modifier because the
   base .bcard is also used by the featured-projects row on the home page.
   ========================================================================== */
.bcard--post { padding: 0; background: none; border: 0; box-shadow: none; }
.bcard--post:hover { transform: translateY(-4px); box-shadow: none; border-color: transparent; }
.bcard--post::before, .bcard--post::after { display: none; }
.bcard--post .bcard__media {
  display: flex;
  align-items: flex-end;
  aspect-ratio: 16 / 10.4;
  border-radius: 16px;
  box-shadow: none;
  isolation: isolate;
  padding: clamp(16px, 1.8vw, 24px);
  color: #fff;
}
.bcard--post .bcard__body { padding: clamp(14px, 1.5vw, 19px) 2px 0; }
.bcard--post .bcard__title { position: relative; margin: 0; font-size: clamp(19px, 1.9vw, 25px); line-height: 1.22; letter-spacing: -0.015em; color: #fff; }

/* shared by both blog card components */
.bcard__meta, .bpost__meta {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 16px);
}
.bcard--post .bcard__tag, .bpost__tag {
  position: static;
  flex: none;
  padding: 8px 16px;
  border-radius: 999px;
  background: linear-gradient(150deg, #eaf3fd 0%, #d7e7fa 100%);
  border: 1px solid rgba(6, 59, 115, 0.16);
  color: var(--brand-deep);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease);
}
/* the chip fills in on hover, so the card has one clear focal change */
.bcard:hover .bcard__tag,
.bpost:hover .bpost__tag { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }
/* the rule takes whatever is left between the chip and the date */
.bcard__rule, .bpost__rule { flex: 1; min-width: 14px; height: 1px; background: var(--line); }
.bcard--post .bcard__date, .bpost__date { flex: none; font-size: 13px; color: var(--muted); white-space: nowrap; }

/* ---------- Home blog feed ---------- */
.bpost { padding: 0; background: none; border: 0; box-shadow: none; }
.bpost:hover { transform: translateY(-4px); box-shadow: none; border-color: transparent; }
.bpost__media {
  display: flex;
  align-items: flex-end;
  border-radius: 16px;
  aspect-ratio: 16 / 10.4;
  isolation: isolate;
  padding: clamp(16px, 1.8vw, 24px);
  color: #fff;
}
.bpost__body { padding: clamp(14px, 1.5vw, 19px) 2px 0; }
.bpost__title { position: relative; margin: 0; font-size: clamp(19px, 1.9vw, 25px); line-height: 1.22; letter-spacing: -0.015em; }
.bpost__title a { color: #fff; }

/* the wash that keeps a headline readable over any photograph */
.bcard__shade, .bpost__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(8, 16, 28, 0.06) 34%, rgba(8, 16, 28, 0.78) 100%);
}
/* one or two lines under the meta row, never more */
.bcard--post .bcard__excerpt, .bpost__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: clamp(13px, 1.4vw, 18px) 0 0;
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
}

/* The media is a flex box now so the headline can sit on its floor. That makes
   the <img> a flex item too, which squeezed the headline against the right edge
   - so the picture is taken out of flow and only the headline is laid out. */
.bcard--post .bcard__media img,
.bpost__media img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bcard--post .bcard__title, .bpost__title { width: 100%; }

/* line-clamp caps the box at lines x line-height exactly, so at 1.25 the
   descenders of y and p were being sliced off the last line. */
.bcard--post .bcard__excerpt, .bpost__excerpt { line-height: 1.38; }

/* The headline now sits on the photograph, but the base rule still turned it
   deep blue on hover - which made it vanish into the picture. */
.bcard--post:hover .bcard__title,
.bpost:hover .bpost__title,
.bpost:hover .bpost__title a { color: #fff; }

/* line-clamp brings overflow:hidden, and its clip edge sat exactly on the text
   origin - so the left stem of letters like E, p and a was being shaved. The
   padding moves the clip away from the glyphs and the negative margin keeps the
   text optically where it was. */
.bcard--post .bcard__excerpt, .bpost__excerpt {
  padding-inline: 4px;
  margin-inline: 8px;
}

/* ---------- Careers: openings list ---------- */
.job__place { flex: none; display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--muted); white-space: nowrap; }
.job__place svg { flex: none; color: var(--brand); }
/* the toggle shows itself when the row is in play */
.job__toggle { opacity: 0; transition: opacity 0.3s var(--ease), background 0.3s, border-color 0.3s, transform 0.3s; }
.job:hover .job__toggle, .job[open] .job__toggle { opacity: 1; }
.job__body { margin: 0; padding: 0 2px clamp(20px, 2.2vw, 28px); border-top: 0; }

/* ---------- Careers: benefits and hiring steps lose their boxes ---------- */
.perks__grid { gap: 1px; background: rgba(255, 255, 255, 0.13); }
.perks__grid li { padding: clamp(22px, 2.4vw, 32px); border-radius: 0; border: 0; background: var(--ink); }

@media (max-width: 991.98px) {
  .jobs__grid { grid-template-columns: minmax(0, 1fr); }
  .jobs__photo { max-width: 420px; aspect-ratio: 4 / 3; }
}
@media (max-width: 575.98px) { .job__place { display: none; } }

/* ---------- Careers: the hiring steps ---------- */
.hire__steps { gap: clamp(16px, 2vw, 28px); align-items: stretch; }
.hstep {
  position: relative;
  height: 100%;
  border-radius: 20px;
  /* the plate: the card sits on top of it, offset, so this shows as a thin edge
     down the left side and along the foot */
  padding: 0 0 clamp(7px, 0.8vw, 11px) clamp(7px, 0.8vw, 11px);
}
.hstep--01 { background: #063b73; }
.hstep--01 .hstep__tag { background: #063b73; }
.hstep--02 { background: #2d6aad; }
.hstep--02 .hstep__tag { background: #2d6aad; }
.hstep--03 { background: #6a97cc; }
.hstep--03 .hstep__tag { background: #6a97cc; }
.hstep--04 { background: #a9c6e6; }
.hstep--04 .hstep__tag { background: #a9c6e6; }
.hstep--04 .hstep__tag { color: var(--brand-deep); }
.hstep__card {
  position: relative;
  height: 100%;
  background: #fff;
  border-radius: 18px;
  padding: clamp(22px, 2.3vw, 32px) clamp(20px, 2.1vw, 28px);
  box-shadow: 0 1px 2px rgba(14, 22, 32, 0.04), 0 18px 34px -26px rgba(14, 22, 32, 0.34);
  transition: transform 0.45s var(--ease);
}
.hstep:hover .hstep__card { transform: translate(-3px, -3px); }
/* the tab, with the word set on its side beside the numeral */
.hstep__tag {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 15px 13px;
  border-radius: 0 18px 0 18px;
  color: #fff;
}
.hstep__tag i {
  writing-mode: vertical-rl;
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.8;
}
.hstep__tag b { font-family: var(--font-head); font-size: clamp(22px, 2.2vw, 29px); font-weight: 600; line-height: 1; }
.hire__steps h3 { padding-right: 62px; }
.hire__steps p { margin: 0; }

@media (max-width: 991.98px) {
  .hire__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .hire__steps { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Careers: benefits invert on hover ---------- */
/* A white panel wipes down from the top of the cell and the copy flips to dark
   with it. scaleY from the top edge is what gives the top-to-bottom sweep;
   isolation keeps the z-index:-1 panel above the cell background but under the
   text. */
.perks__grid li { position: relative; isolation: isolate; overflow: hidden; }
.perks__grid li::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #fff;
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.55s var(--ease);
}
.perks__grid li:hover::before { transform: scaleY(1); }
.perks__grid li > * { transition: color 0.45s var(--ease), background 0.45s var(--ease); }
.perks__grid li:hover h3 { color: var(--ink); }
.perks__grid li:hover p { color: var(--muted); }
.perks__icon { transition: background 0.45s var(--ease), color 0.45s var(--ease); }
.perks__grid li:hover .perks__icon { background: var(--brand-deep); color: #fff; }

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

/* ---------- Careers: filtering the openings ---------- */
.jobs__col { min-width: 0; }
/* a strip across the top of the section, above both columns */
.jobs__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: clamp(12px, 1.4vw, 20px);
  padding: clamp(14px, 1.5vw, 20px) clamp(16px, 1.8vw, 24px);
  margin-bottom: clamp(18px, 2vw, 28px);
  border-radius: 16px;
  background: var(--ivory);
  border: 1px solid var(--line);
}
.jobfilter { display: grid; gap: 5px; min-width: 0; }
.jobfilter[hidden] { display: none; }
.jobfilter span { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.jobfilter select {
  appearance: none;
  min-width: 164px;
  padding: 11px 38px 11px 15px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff var(--chev-dark) no-repeat right 14px center;
  font: inherit;
  font-size: 14.5px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.3s var(--ease);
}
.jobfilter select:hover, .jobfilter select:focus-visible { border-color: rgba(6, 59, 115, 0.45); outline: none; }
.jobs__count { margin-left: auto; padding-bottom: 12px; font-size: 14px; color: var(--muted); }
.jobs__empty { margin: clamp(18px, 2vw, 26px) 0 0; font-size: 15px; color: var(--muted); }

@media (max-width: 575.98px) {
  .jobs__count { margin-left: 0; padding-bottom: 0; }
  .jobfilter select { min-width: 0; width: 100%; }
  .jobfilter { flex: 1 1 140px; }
}

/* ---------- Careers: the location search ---------- */
.jobfilter--search { flex: 1 1 260px; min-width: 0; }
.jobsearch {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 15px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  transition: border-color 0.3s var(--ease);
}
.jobsearch:focus-within { border-color: rgba(6, 59, 115, 0.45); }
.jobsearch svg { flex: none; color: var(--muted); }
.jobsearch input {
  flex: 1;
  min-width: 0;
  padding: 11px 0;
  border: 0;
  outline: none;
  background: none;
  font: inherit;
  font-size: 14.5px;
  color: var(--ink);
}
.jobsearch input::placeholder { color: var(--muted); }
/* Safari draws its own clear button on type=search */
.jobsearch input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ---------- Careers: the application section runs light ---------- */
.apply { background: var(--ivory); }
/* the form card is white, so on a light band it needs its own edge to sit on */
.apply .eform-card, .apply .side__card, .apply form {
  background: #fff;
}

/* ---------- Careers: the application form on a light band ---------- */
.apply { background: var(--ivory); }
.aform__f > span:first-child { font-size: 11.5px; letter-spacing: 0.1em; color: var(--brand-deep); font-weight: 700; }
/* crisp white fields instead of cream on white */
.aform input:not([type='file']), .aform select, .aform textarea {
  background: #fff;
  border-color: var(--line);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.aform__drop {
  background: var(--ivory);
  border-color: rgba(6, 59, 115, 0.26);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.aform__drop:hover { background: #eef4fb; border-color: rgba(6, 59, 115, 0.5); }
.aform__drop svg { color: var(--brand-deep); }
.aform__submit {
  width: auto;
  height: auto;
  padding: 13px 26px;
  border-radius: 12px;
  font-size: 14.5px;
  letter-spacing: 0.01em;
  box-shadow: none;
  transition: background 0.35s var(--ease), transform 0.35s var(--ease);
}
.aform__submit:hover { transform: translateY(-1px); box-shadow: none; }
.aform__submit:active { transform: translateY(0); }

/* ==========================================================================
   Careers: the application panel
   One plate holding the invitation and the form, rather than two blocks
   floating apart with dead space between them.
   ========================================================================== */
.applypanel {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  border-radius: 26px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 2px 6px rgba(14, 22, 32, 0.04), 0 44px 76px -46px rgba(6, 22, 45, 0.45);
}
.applypanel__intro {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 3.4vw, 54px);
  background: linear-gradient(165deg, #eff5fc 0%, #dde9f7 100%);
}
/* a ring bled off the corner, so the tinted half has some depth of its own */
.applypanel__intro::after {
  content: '';
  position: absolute;
  right: -90px;
  bottom: -90px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 1px solid rgba(6, 59, 115, 0.14);
  pointer-events: none;
}
.applypanel__intro > * { position: relative; }
.applypanel__title { font-size: clamp(25px, 2.9vw, 38px); line-height: 1.12; letter-spacing: -0.02em; margin: 0; }
.applypanel__title em { font-style: normal; color: var(--brand-deep); }
.applypanel__lead { margin: 14px 0 0; font-size: 15px; line-height: 1.72; color: var(--muted); }
.applypanel__form { padding: clamp(24px, 3vw, 46px); }
/* the form no longer draws its own plate - the panel is the plate */
.applypanel__form .aform { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }

.applyfacts { list-style: none; margin: clamp(22px, 2.6vw, 34px) 0 0; padding: 0; display: grid; gap: clamp(14px, 1.6vw, 20px); }
.applyfacts li { display: flex; align-items: flex-start; gap: 13px; }
.applyfact__ico {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(150deg, #3d8ad6 0%, var(--brand-deep) 100%);
}
.applyfact__body { display: grid; gap: 2px; min-width: 0; }
.applyfact__label { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-deep); }
.applyfact__body a, .applyfact__body > span:last-child { font-size: 15px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.applyfact__body a { transition: color 0.3s var(--ease); }
.applyfact__body a:hover { color: var(--brand-deep); }

@media (max-width: 991.98px) {
  .applypanel { grid-template-columns: minmax(0, 1fr); }
}

/* the panel is height-animated, so it has to clip while it moves */
.job__body { overflow: hidden; }

/* ==========================================================================
   Blog detail
   A centred masthead, a full-width cover, then one reading column.
   ========================================================================== */
.pd { background: #fff; }
.pdhead {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(56svh, 460px);
  padding: 128px 0 64px;
  overflow: hidden;
  color: #fff;
  background: var(--ink);
  text-align: center;
}
.pdhead__bg { position: absolute; inset: 0; }
.pdhead__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.pdhead__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 16, 28, 0.76) 0%, rgba(8, 16, 28, 0.62) 46%, rgba(8, 16, 28, 0.82) 100%);
}
.pdhead__inner { position: relative; z-index: 2; display: grid; justify-items: center; }
.pdhead__title {
  order: 1;
  max-width: 940px;
  margin: 0 0 18px;
  font-size: clamp(26px, 3.4vw, 46px);
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: #fff;
}
/* the trail reads under the title here, as it does on the other page banners */
.pdhead .phero__crumbs { order: 2; margin: 0; }

/* the dateline and standfirst now lead the article */
.pdmeta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-deep);
}
.pdmeta i { font-style: normal; color: var(--brand); }
.pdstand { font-size: clamp(16px, 1.4vw, 18.5px) !important; line-height: 1.7 !important; color: var(--text) !important; }
.pdcover { margin: 0; background: linear-gradient(180deg, var(--ink) 0 46%, #fff 46% 100%); }
.pdcover img { width: 100%; height: auto; aspect-ratio: 16 / 7.6; object-fit: cover; border-radius: clamp(14px, 1.6vw, 22px); display: block; }
.pdbody { padding: clamp(30px, 3.6vw, 56px) 0 clamp(36px, 4.4vw, 72px); }
/* one measure, centred - long lines are the quickest way to lose a reader */
.pdcol { max-width: 880px; margin: 0 auto; }
/* each heading carries a short bar, which is what separates the sections */
.pdcol h2 {
  position: relative;
  margin: clamp(30px, 3.4vw, 48px) 0 clamp(16px, 1.8vw, 22px);
  padding-bottom: 12px;
  font-size: clamp(20px, 2.1vw, 28px);
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.pdcol h2:first-child { margin-top: 0; }
.pdcol h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--brand-deep), var(--accent));
}
.pdcol p { margin: 0 0 clamp(14px, 1.6vw, 20px); font-size: 16px; line-height: 1.85; color: var(--muted); }
.pdpair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); margin: clamp(20px, 2.2vw, 30px) 0; }
.pdpair figure { margin: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; }
.pdpair img { width: 100%; height: 100%; object-fit: cover; }
.pdpoints {
  list-style: none;
  margin: clamp(20px, 2.2vw, 30px) 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px) clamp(20px, 2.4vw, 36px);
}
.pdpoints li { display: flex; gap: 12px; align-items: flex-start; }
.pdpoints__ico {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(150deg, #3d8ad6 0%, var(--brand-deep) 100%);
}
.pdpoints h3 { font-size: 17px; margin: 3px 0 7px; line-height: 1.3; }
.pdpoints p { margin: 0; font-size: 14.6px; line-height: 1.7; }
.pdlist { list-style: none; margin: clamp(18px, 2vw, 26px) 0; padding: 0; display: grid; gap: 11px; }
.pdlist li { position: relative; padding-left: 26px; font-size: 15.6px; line-height: 1.75; color: var(--muted); }
.pdlist li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
}

/* ---------- Latest blogs band ---------- */
.pdlatest { background: linear-gradient(135deg, #eef4fb 0%, #f7f1ec 52%, #eaf0fa 100%); }
.pdlatest__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(14px, 2.4vw, 44px);
  align-items: end;
  margin-bottom: clamp(24px, 2.8vw, 40px);
}
.pdlatest__title { margin: 0; font-size: clamp(25px, 3vw, 40px); line-height: 1.14; letter-spacing: -0.02em; }
.pdlatest__lead { margin: 0; font-size: 15px; line-height: 1.72; color: var(--muted); }
.pdlatest__cta { margin-top: clamp(26px, 3vw, 40px); }

@media (max-width: 767.98px) {
  .pdpair, .pdpoints { grid-template-columns: minmax(0, 1fr); }
  .pdlatest__head { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

/* ==========================================================================
   Page banner: the artwork variant
   The drawn banners now carry the page title, intro and trail on top of the
   picture, centred, the same way the other page banners do.
   ========================================================================== */
.phero--art {
  align-items: center;
  text-align: center;
  min-height: min(62svh, 520px);
  padding: 128px 0 72px;
}
.phero--art .phero__bg img { object-position: center; }
.phero--art .phero__inner { display: grid; justify-items: center; }
/* several of the drawings already carry a line of their own, so the title
   alone introduces the page - an eyebrow pill would be one label too many */
.phero--art .eyebrow--light { display: none; }
.phero--art .phero__title {
  order: 1;
  max-width: 940px;
  margin: 0 0 14px;
  font-size: clamp(34px, 5vw, 70px);
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.phero--art .phero__text { order: 2; max-width: 620px; margin: 0; }
.phero--art .phero__crumbs { order: 3; margin: 22px 0 0; }
.phero--art .phero__scroll { display: none; }

@media (max-width: 767.98px) {
  .phero--art { padding: 104px 0 52px; min-height: min(52svh, 420px); }
}

/* ==========================================================================
   Every page banner: a light, even black wash over the picture, so the image
   reads through and a soft shadow keeps the type legible on top of it.
   ========================================================================== */
.phero .phero__shade,
.phero--center .phero__shade,
.phero--about .phero__shade,
.pdhead__shade {
  display: block;
  background: rgba(0, 0, 0, 0.38);
}
.phero--about::after { display: none; }
.phero__title,
.pdhead__title,
.phero__text { text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45); }
.phero__crumbs {
  background: rgba(0, 0, 0, 0.28);
  border-color: rgba(255, 255, 255, 0.22);
}
.phero__crumbs a { color: rgba(255, 255, 255, 0.86); }

/* Page banners: the page name and trail centred on the picture. The white
   navbar is fixed over the top of the page, so the picture starts below it
   rather than sliding underneath. Banners are kept short, and the picture is
   pinned to its top edge, so any cropping comes off the bottom and the logo
   or wordmark near the top of each picture stays in view. */
:root { --hdr-h: 76px; }
.phero .phero__bg,
.phero .phero__shade,
.pdhead__bg,
.pdhead__shade { top: var(--hdr-h); }
.phero .phero__bg img,
.pdhead__bg img { object-position: center top; }

.phero,
.pdhead {
  align-items: center;
  text-align: center;
  min-height: calc(var(--hdr-h) + clamp(340px, 31vw, 480px));
  padding: calc(var(--hdr-h) + 36px) 0 36px;
}
.phero .phero__inner { display: grid; justify-items: center; }
.phero .phero__title { order: 1; margin: 0; }
.phero .phero__crumbs { order: 2; margin: 18px 0 0; }
.phero .phero__scroll { display: none; }

/* Team: the rail still overlaps the foot of the picture, so the banner keeps
   room underneath it and the name centres in what is left above */
.phero--about {
  min-height: calc(var(--hdr-h) + clamp(440px, 41vw, 600px));
  padding-bottom: clamp(142px, 14.4vw, 218px);
}

@media (max-width: 991.98px) { :root { --hdr-h: 70px; } }
@media (max-width: 575.98px) { :root { --hdr-h: 64px; } }
@media (max-width: 767.98px) {
  .phero,
  .pdhead { min-height: calc(var(--hdr-h) + 280px); padding: calc(var(--hdr-h) + 28px) 0 28px; }
  .phero--about { min-height: calc(var(--hdr-h) + 400px); padding-bottom: clamp(124px, 17vw, 176px); }
}

/* Blog detail: no picture behind the header. A light band with the article
   title in dark type across the full container, the trail under it, and the
   cover photograph straight after. The article body runs the container width
   too, like the other pages. */
.pdhead {
  min-height: 0;
  padding: calc(var(--hdr-h) + clamp(40px, 4.6vw, 72px)) 0 clamp(34px, 3.6vw, 54px);
  color: var(--ink);
  background: linear-gradient(180deg, #f4f7fb 0%, #fff 100%);
}
.pdhead__inner { justify-items: center; }
.pdhead__title {
  max-width: none;
  width: 100%;
  margin: 0 0 20px;
  color: var(--ink);
  font-size: clamp(30px, 3.9vw, 54px);
  line-height: 1.12;
  text-shadow: none;
}
.pdhead .phero__crumbs {
  background: #fff;
  border-color: var(--line);
  backdrop-filter: none;
}
.pdhead .phero__crumbs a { color: var(--muted); }
.pdhead .phero__crumbs a:hover { color: var(--brand-deep); }
.pdhead .phero__crumbs svg { opacity: 0.6; }
.pdhead .phero__crumbs span { color: var(--brand-deep); }
.pdcover { background: #fff; }
.pdcol { max-width: none; }

/* Blog detail header, in order: title, standfirst, then place and date */
.pdhead__title { order: 1; margin: 0 0 clamp(20px, 2.2vw, 30px); font-weight: 700; }
.pdhead__stand {
  order: 2;
  max-width: 860px;
  margin: 0;
  font-size: clamp(16px, 1.35vw, 19px);
  font-weight: 500;
  line-height: 1.65;
  color: #4a5361;
}
.pdhead__meta {
  order: 3;
  justify-content: center;
  gap: 18px;
  margin: clamp(26px, 3vw, 44px) 0 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--brand-deep);
}
.pdhead__meta i { font-size: 0.8em; color: var(--brand-deep); }

/* ==========================================================================
   Project details page
   ========================================================================== */
/* The main navbar sits at the top of the page and scrolls away with it; only
   the section tabs stay pinned, right at the top edge. */
.page-project .site-header { position: absolute; }
.page-project .stabs,
.page-project .stabs.is-pushed { top: 0; }

/* Enquiry popup: one narrow card. A deep-blue strip names the project with a
   thumbnail, price and the three promises as chips, and the form sits under it. */
.page-project .emodal { width: min(580px, calc(100vw - 24px)); border-radius: 22px; }
.page-project .emodal__box { grid-template-columns: 1fr; border-radius: 22px; overflow-y: auto; }
.page-project .emodal__side {
  display: block;
  min-height: 0;
  padding: 22px 24px 20px;
  background: linear-gradient(135deg, var(--brand-deep) 0%, #0b2a4f 100%);
}
.page-project .emodal__side::after { display: none; }
.page-project .emodal__side .emodal__img {
  position: static;
  float: left;
  width: 84px;
  height: 84px;
  margin: 0 16px 0 0;
  border-radius: 14px;
  border: 2px solid rgba(255, 255, 255, 0.25);
}
.page-project .emodal__side-body { display: block; padding: 0; }
.page-project .emodal__badge {
  display: inline-block;
  margin: 2px 0 6px;
  padding: 3px 10px;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.page-project .emodal__side-body strong { display: block; font-size: 22px; line-height: 1.15; padding-right: 44px; }
.page-project .emodal__side-body > span:not(.emodal__badge) { display: inline; font-size: 13px; }
.page-project .emodal__side-body .emodal__price { display: inline; margin: 0 0 0 10px; color: var(--accent); }
.page-project .emodal__side-body ul {
  clear: both;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  border: 0;
  font-size: 12.5px;
}
.page-project .emodal__side-body li {
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.page-project .emodal__side-body li svg { color: var(--accent); }
.page-project .emodal__close {
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.page-project .emodal__close:hover { background: #fff; color: var(--brand-deep); }
.page-project .emodal__main { padding: 24px 24px 22px; overflow: visible; }
.page-project .emodal__kicker { display: none; }
.page-project .emodal__title { margin: 0 0 4px; font-size: clamp(19px, 1.8vw, 22px); }
.page-project .emodal__sub { margin-bottom: 18px; font-size: 14px; }

@media (max-width: 767.98px) {
  .page-project .emodal__side { display: block; padding: 18px 18px 16px; }
  .page-project .emodal__side .emodal__img { width: 64px; height: 64px; margin-right: 12px; }
  .page-project .emodal__side-body strong { font-size: 19px; }
  .page-project .emodal__side-body .emodal__price { display: block; margin: 2px 0 0; }
  .page-project .emodal__main { padding: 20px 18px 18px; }
}

/* Landing-page layout: the enquiry form lives in the banner, on a frosted
   glass panel to the right of the project name; the content below runs the
   full container width with no sidebar. */
.page-project .dh { min-height: min(92svh, 820px); }
.page-project .dh__inner { align-items: center; padding-top: calc(var(--hdr-h) + 48px); padding-bottom: 48px; flex: 1; }
.page-project .dh__shade {
  background:
    linear-gradient(90deg, rgba(8, 14, 22, 0.78) 0%, rgba(8, 14, 22, 0.42) 50%, rgba(8, 14, 22, 0.3) 100%),
    linear-gradient(180deg, rgba(8, 14, 22, 0.35) 0%, transparent 30%, transparent 70%, rgba(8, 14, 22, 0.6) 100%);
}
.page-project .dh__desc { margin-bottom: 26px; }

.hform {
  flex: none;
  width: min(400px, 100%);
  padding: 28px 26px 24px;
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.07) 100%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.hform__eyebrow {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(114, 184, 250, 0.14);
  border: 1px solid rgba(114, 184, 250, 0.3);
}
.hform__title { margin: 14px 0 6px; font-size: clamp(22px, 2vw, 28px); color: #fff; }
.hform__sub { margin: 0 0 20px; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, 0.75); }
.hform__form {
  --bg: rgba(255, 255, 255, 0.1);
  --fg: #fff;
  --muted-c: rgba(255, 255, 255, 0.7);
  --line-c: rgba(255, 255, 255, 0.28);
}
.hform__fields { display: grid; gap: 12px; }
.hform__form input[type="text"],
.hform__form input[type="tel"] {
  height: 52px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.hform__form input:focus { border-color: var(--accent); background: rgba(255, 255, 255, 0.16); }
.hform__form .eform__err { color: #ffb4b0; }
.hform__form .eform__consent { margin: 14px 0 16px; font-size: 12px; }
.hform__submit { height: 54px; border-radius: 14px; background: var(--accent); color: var(--ink); }
.hform__submit:hover { background: #fff; color: var(--brand-deep); }
.hform__form .eform__done { padding: 20px 6px; }
.hform__form .eform__done h4 { color: #fff; }

/* no sidebar: the sections take the full width */
.page-project .pb__grid { grid-template-columns: minmax(0, 1fr); }
.page-project .pb__main { grid-column: 1; }

@media (max-width: 991.98px) {
  .page-project .dh { min-height: 0; }
  .page-project .dh__inner { flex-direction: column; align-items: stretch; gap: 28px; }
  .hform { width: 100%; max-width: 520px; }
}

/* a smaller glass form */
.hform { width: min(340px, 100%); padding: 22px 20px 18px; border-radius: 20px; }
.hform__title { margin: 0 0 4px; font-size: clamp(19px, 1.6vw, 22px); }
.hform__sub { margin-bottom: 14px; font-size: 13px; line-height: 1.5; }
.hform__fields { gap: 10px; }
.hform__form input[type="text"],
.hform__form input[type="tel"] { height: 44px; font-size: 14px; }
.hform__form .eform__phone b { font-size: 13px; padding: 0 12px; }
.hform__form .eform__consent { margin: 10px 0 12px; font-size: 11.5px; }
.hform__submit { height: 46px; font-size: 14px; border-radius: 12px; }
@media (max-width: 991.98px) { .hform { width: 100%; max-width: 440px; } }

/* banner form button: premium deep navy with a soft sheen */
.hform__submit {
  background: linear-gradient(135deg, #06264d 0%, #041a36 55%, #020f22 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 12px 26px -12px rgba(4, 29, 61, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  letter-spacing: 0.02em;
}
.hform__submit:hover {
  background: linear-gradient(135deg, #0a3566 0%, #06264d 55%, #031630 100%);
  color: #fff;
}


/* ==========================================================================
   Project details: amenities as a full-width photo band
   The block breaks out of the content column to the full page width. A
   photograph sits behind it under a light wash, the heading is centred, and
   each amenity is a frosted white tile with its own icon and a caps label.
   ========================================================================== */
.blk--amenities {
  position: relative;
  isolation: isolate;
  margin-inline: calc(50% - 50vw);
  padding: clamp(48px, 6vw, 84px) max(16px, calc(50vw - 640px));
  border-bottom: 0;
  text-align: center;
}
.am-band__bg { position: absolute; inset: 0; z-index: -1; }
.am-band__bg img { width: 100%; height: 100%; object-fit: cover; }
.am-band__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(244, 247, 251, 0.55) 0%, rgba(244, 247, 251, 0.35) 100%);
}
.blk--amenities .blk__title {
  justify-content: center;
  margin-bottom: clamp(26px, 3vw, 40px);
  font-size: clamp(24px, 2.4vw, 34px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.blk--amenities .blk__title::before { display: none; }
.blk--amenities .blk__title { display: block; }
.blk--amenities .blk__title::after {
  content: '';
  display: block;
  width: 46px;
  height: 3px;
  margin: 14px auto 0;
  border-radius: 2px;
  background: var(--brand-deep);
}
.blk--amenities .am-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 16px);
  max-width: 1080px;
  margin: 0 auto;
}
.blk--amenities .am-grid li {
  gap: 14px;
  padding: clamp(22px, 2.4vw, 32px) 12px;
  border-radius: 14px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 18px 40px -28px rgba(6, 42, 86, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.blk--amenities .am-grid__icon { color: var(--brand-deep); }
.blk--amenities .am-grid li:hover { background: rgba(255, 255, 255, 0.85); color: var(--ink); }
.blk--amenities .am-grid li:hover .am-grid__icon { color: var(--brand-deep); }
/* the band sits flush between the blocks above and below it */
.blk--amenities { margin-top: calc(-1 * clamp(44px, 5vw, 64px)); margin-bottom: clamp(44px, 5vw, 64px); }

@media (max-width: 767.98px) {
  .blk--amenities .am-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Key highlights: the list on the left, a property photograph on the right */
.hl-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  margin-bottom: 30px;
}
.hl-split .hl-list { margin-bottom: 0; }
.hl-split__media { margin: 0; }
.hl-split__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 22px;
  box-shadow: 0 30px 60px -36px rgba(6, 42, 86, 0.5);
}
@media (max-width: 767.98px) {
  .hl-split { grid-template-columns: minmax(0, 1fr); }
}
/* the photo matches the height of the list beside it rather than its own size */
.hl-split { align-items: stretch; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.hl-split__media { position: relative; min-height: 260px; }
.hl-split__media img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
@media (max-width: 767.98px) {
  .hl-split__media { min-height: 0; }
  .hl-split__media img { position: static; height: auto; aspect-ratio: 16 / 10; }
}

/* ==========================================================================
   Project details: one-page structure
   Every block is a full-width band with the same rhythm - an eyebrow, a
   heading, then its content in a clear layout - and the bands alternate
   white / pale blue / navy so each part of the page reads as its own section.
   ========================================================================== */
.page-project .pb { padding: 0; }
.page-project .pb__grid { display: block; }
.page-project .blk {
  margin: 0 calc(50% - 50vw);
  padding: clamp(56px, 6.5vw, 100px) max(clamp(16px, 3vw, 28px), calc(50vw - 632px));
  border: 0;
  background: #fff;
}
.page-project .blk--amenities { margin: 0 calc(50% - 50vw); }
.page-project .sec--plans,
.page-project .sec--faqs { background: #f4f7fb; }

/* shared heading rhythm */
.sec .blk__title {
  display: block;
  margin: 0 0 18px;
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.sec .blk__title::before { display: none; }
.sec .blk__p { font-size: 16px; line-height: 1.8; }
.sec__head { max-width: 720px; margin: 0 auto clamp(32px, 3.6vw, 48px); text-align: center; }
.sec__lead { margin: 0; font-size: 16px; line-height: 1.7; color: var(--muted); }
.sec__sub { margin: clamp(40px, 4.4vw, 60px) 0 20px; font-size: clamp(20px, 1.8vw, 24px); }
.sec__split {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

/* Overview: copy left, the four figures as a 2 x 2 of navy tiles */
.sec--overview .ov-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; }
.sec--overview .ov-stats div {
  padding: clamp(22px, 2.4vw, 32px);
  border-radius: 20px;
  background: linear-gradient(145deg, #06264d 0%, #020f22 100%);
  box-shadow: 0 24px 50px -32px rgba(4, 29, 61, 0.8);
}
.sec--overview .ov-stats dt { color: rgba(255, 255, 255, 0.6); }
.sec--overview .ov-stats dd { font-size: clamp(24px, 2.2vw, 32px); color: #fff; }

/* Highlights: three feature cards to a row */
.sec--highlights .hl-split { margin-bottom: 0; }
.sec--highlights .kf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sec--highlights .kf-grid__item { background: #f8fafc; border-color: transparent; padding: 24px; }
.sec--highlights .kf-grid__icon { background: #fff; color: var(--brand-deep); box-shadow: 0 8px 20px -12px rgba(6, 42, 86, 0.4); }

/* Pricing: the table beside a navy payment-plan card */
.price-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
  align-items: start;
}
.sec--plans .price-table { margin: 0; background: #fff; box-shadow: 0 24px 50px -36px rgba(6, 42, 86, 0.4); }
@media (min-width: 768px) { .sec--plans .price-table__row { grid-template-columns: 1.4fr 1.2fr auto; } }
.sec--plans .price-table__row--head { background: var(--brand-deep); }
.sec--plans .price-table__price { color: var(--brand-deep); }
.pay--card {
  margin: 0;
  padding: clamp(24px, 2.4vw, 32px);
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(145deg, #06264d 0%, #020f22 100%);
  box-shadow: 0 30px 60px -36px rgba(4, 29, 61, 0.85);
}
.pay--card .pay__title { color: #fff; font-size: 19px; margin-bottom: 18px; }
.pay--card .pay__steps { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pay--card .pay__steps li { border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.06); }
.pay--card .pay__steps strong { color: var(--accent); }
.pay--card .pay__steps span { color: rgba(255, 255, 255, 0.72); }
.pay__cta {
  width: 100%;
  height: 50px;
  margin-top: 20px;
  border: 0;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--brand-deep);
  background: #fff;
  transition: background 0.3s, color 0.3s;
}
.pay__cta:hover { background: var(--accent); color: var(--ink); }
.pay__note { margin: 12px 0 0; font-size: 12px; color: rgba(255, 255, 255, 0.55); }

/* Developer: a navy band, story left and the three figures stacked right */
.page-project .sec--developer { color: #fff; background: linear-gradient(135deg, #041a36 0%, #020f22 100%); }
.sec--developer .eyebrow { color: #fff; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.22); }
.sec--developer .blk__title { color: #fff; }
.sec--developer .blk__p,
.sec--developer .dev__since { color: rgba(255, 255, 255, 0.72); }
.sec--developer .dev__logo { font-size: 18px; color: var(--brand-deep); background: #fff; }
.sec--developer .dev__name { color: #fff; }
.sec--developer .dev__stats { grid-template-columns: minmax(0, 1fr); margin: 0; border-color: rgba(255, 255, 255, 0.16); }
.sec--developer .dev__stats div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 24px 28px; }
.sec--developer .dev__stats div + div { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.sec--developer .dev__stats dd { order: 2; font-size: clamp(28px, 2.6vw, 38px); color: var(--accent); }
.sec--developer .dev__stats dt { color: rgba(255, 255, 255, 0.7); font-size: 14px; }

/* Location: the map with an address card overlapping its edge */
.ploc-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; }
.sec--location .loc-map { height: clamp(380px, 36vw, 500px); margin: 0; border-radius: 24px; }
.loc-card {
  position: relative;
  z-index: 1;
  margin-left: -60px;
  padding: clamp(26px, 2.8vw, 38px);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 30px 70px -30px rgba(6, 42, 86, 0.45);
}
.loc-card .loc-addr { margin: 0 0 14px; color: var(--ink); font-weight: 600; }
.loc-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 8px; }
.loc-card .pay__cta { width: auto; margin: 0; padding: 0 22px; color: #fff; background: linear-gradient(135deg, #06264d 0%, #020f22 100%); }
.loc-card .pay__cta:hover { background: var(--brand-deep); color: #fff; }

/* FAQs: heading and a help card on the left, the questions on the right */
.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.faq-side { position: sticky; top: 96px; }
.faq-help {
  display: grid;
  gap: 4px;
  margin-top: 28px;
  padding: 24px;
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(145deg, #06264d 0%, #020f22 100%);
}
.faq-help strong { font-size: 18px; }
.faq-help span { font-size: 14px; color: rgba(255, 255, 255, 0.72); }
.faq-help__btns { display: flex; gap: 10px; margin-top: 14px; }
.faq-help__btn {
  flex: 1;
  display: grid;
  place-items: center;
  height: 46px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-deep);
  background: #fff;
  transition: background 0.3s, color 0.3s;
}
.faq-help__btn:hover { background: var(--accent); color: var(--ink); }
.faq-help__btn--wa { color: #fff; background: #1faa53; }
.faq-help__btn--wa:hover { background: #17924a; color: #fff; }
.sec--faqs .faq__item { background: #fff; }
.sec--faqs .faq__item[open] { background: #fff; border-color: rgba(6, 59, 115, 0.35); }
.sec--faqs .faq__item[open] summary i { background: var(--brand-deep); }
.sec--faqs .faq__item[open] summary i::before,
.sec--faqs .faq__item[open] summary i::after { background: #fff; }

@media (max-width: 991.98px) {
  .sec__split,
  .price-wrap,
  .ploc-grid,
  .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .sec--highlights .kf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .loc-card { margin: -40px 16px 0; }
  .faq-side { position: static; }
}
@media (max-width: 575.98px) {
  .sec--highlights .kf-grid,
  .sec--overview .ov-stats { grid-template-columns: minmax(0, 1fr); }
  .loc-card { margin: -30px 8px 0; }
}

/* Project page: a deeper navy throughout, and flat description cards */
.page-project { --brand-deep: #04223f; }
.page-project .sec--developer { background: linear-gradient(135deg, #031a33 0%, #010b19 100%); }
.sec--overview .ov-stats div { box-shadow: none; }
.sec--highlights .kf-grid__icon { box-shadow: none; }
.page-project .kf-grid__item:hover { box-shadow: none; }

/* ==========================================================================
   Contact: three channel cards, then the map beside the form
   ========================================================================== */
.ccards { background: #fff; padding: clamp(48px, 5.6vw, 84px) 0 0; }
.ccards__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}
.ccard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(28px, 3.2vw, 48px) clamp(24px, 3.2vw, 46px);
  border: 1px solid var(--line);
  border-radius: 28px;
  background: #fff;
  transition: border-color 0.3s, box-shadow 0.4s var(--ease);
}
.ccard:hover { border-color: rgba(4, 34, 63, 0.25); box-shadow: 0 26px 50px -36px rgba(4, 29, 61, 0.45); }
.ccard__icon { color: var(--ink); margin-bottom: clamp(26px, 3vw, 40px); }
.ccard__title { margin: 0 0 6px; font-size: clamp(22px, 2vw, 30px); letter-spacing: -0.01em; color: var(--ink); }
.ccard__text { margin: 0 0 clamp(26px, 3vw, 40px); font-size: 16px; line-height: 1.65; color: var(--muted); }
.ccard__btn {
  display: grid;
  place-items: center;
  width: 100%;
  height: 60px;
  margin-top: auto;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #06264d 0%, #041a36 55%, #020f22 100%);
  transition: transform 0.3s var(--ease), background 0.3s;
}
.ccard__btn:hover { color: #fff; transform: translateY(-2px); background: linear-gradient(135deg, #0a3566 0%, #06264d 55%, #031630 100%); }

/* map on the left, form on the right */
@media (min-width: 992px) { .cform__grid { grid-template-columns: 0.9fr 1.1fr; } }

@media (max-width: 991.98px) {
  .ccards__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Contact cards, compact: navy icon badge beside the details, a small pill link */
.ccards { padding: clamp(40px, 4.4vw, 64px) 0 clamp(8px, 1vw, 16px); }
.ccards__grid { gap: clamp(14px, 1.6vw, 22px); }
.ccard {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 18px;
  align-items: start;
  padding: 24px 24px 22px;
  border-radius: 20px;
  border-color: rgba(4, 34, 63, 0.1);
  background: linear-gradient(180deg, #fff 0%, #f6f9fc 100%);
  overflow: hidden;
  transition: transform 0.4s var(--ease), border-color 0.3s, box-shadow 0.4s var(--ease);
}
/* a thin navy rule along the top that draws in on hover */
.ccard::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #06264d, #72b8fa);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.ccard:hover { transform: translateY(-4px); border-color: rgba(4, 34, 63, 0.18); box-shadow: 0 24px 46px -30px rgba(4, 29, 61, 0.45); }
.ccard:hover::before { transform: scaleX(1); }
.ccard__icon {
  grid-row: span 3;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin: 0;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, #06264d 0%, #020f22 100%);
  box-shadow: 0 10px 22px -12px rgba(2, 15, 34, 0.8);
}
.ccard__title {
  margin: 2px 0 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.ccard__text { margin: 0 0 14px; font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--ink); }
.ccard:last-child .ccard__text { font-size: 14px; font-weight: 500; line-height: 1.55; }
.ccard__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
  width: auto;
  height: 38px;
  padding: 0 16px;
  margin: 0;
  border-radius: 999px;
  font-size: 13px;
  color: #04223f;
  background: rgba(4, 34, 63, 0.07);
  transition: background 0.3s, color 0.3s;
}
.ccard__btn:hover,
.ccard:hover .ccard__btn { transform: none; color: #fff; background: linear-gradient(135deg, #06264d 0%, #020f22 100%); }
.ccard { grid-template-rows: auto 1fr auto; }

/* contact form: with email gone, "I am looking for" takes the full row */
#contactForm .eform__field:has(select) { grid-column: 1 / -1; }

/* ==========================================================================
   Developers: notched cards
   No photograph. A soft pale-blue card with a smooth notch scooped out of the
   middle of its top edge; the developer's logo sits in a round badge that
   rises out of the notch. Name, region and category sit centred below.
   ========================================================================== */
.dev-grid { row-gap: clamp(56px, 5vw, 72px); padding-top: 48px; }
.dcard {
  --badge: 96px;
  --notch: 60px;
  filter: none;
  transition: transform 0.5s var(--ease);
}
.dcard:hover { transform: translateY(-6px); filter: none; }
.dcard__lower { display: block; height: 100%; }
.dcard__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: calc(var(--notch) + 22px) 22px 30px;
  border-radius: 26px;
  background: linear-gradient(180deg, #edf3fa 0%, #f8fafd 60%, #ffffff 100%);
  /* a round scoop plus two soft shoulders either side of it */
  -webkit-mask:
    radial-gradient(circle var(--notch) at 50% 0, transparent 97%, #000 100%) top / 100% 100% no-repeat;
  mask:
    radial-gradient(circle var(--notch) at 50% 0, transparent 97%, #000 100%) top / 100% 100% no-repeat;
  transition: background 0.4s;
}
.dcard:hover .dcard__body { background: linear-gradient(180deg, #e2ecf8 0%, #f3f7fc 60%, #ffffff 100%); }
.dcard__badge {
  top: 0;
  width: var(--badge);
  height: var(--badge);
  padding: 0 14px;
  background: #fff;
  border: 5px solid #cfe0f3;
  box-shadow: 0 14px 28px -16px rgba(4, 34, 63, 0.5);
  transition: border-color 0.4s, transform 0.5s var(--ease);
}
.dcard:hover .dcard__badge { border-color: #04223f; transform: rotate(-4deg); }
.dcard__badge img { max-height: calc(20px * var(--s, 1)); }
.dcard__name { font-size: 20px; font-weight: 600; color: var(--ink); }
.dcard__meta { margin-top: 8px; font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }
.dcard__kind {
  position: static;
  margin-top: 16px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 10.5px;
  color: #04223f;
  background: rgba(4, 34, 63, 0.07);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Developers page: plain white behind the cards */
body.page-developers, .page-developers main, .page-developers .devs { background: #fff; }

/* ==========================================================================
   Project pages: parts filled from the project data
   ========================================================================== */
/* price list: unit type / size / price / breakup */
@media (min-width: 768px) {
  .sec--plans .price-table__row { grid-template-columns: 1.1fr 1fr 1fr auto; }
}
.price-table__size { color: var(--text); font-weight: 500; }
/* with no unit-wise prices, the navy card stands alone under the heading */
.sec--plans-solo .price-wrap { grid-template-columns: minmax(0, 520px); justify-content: center; }

/* "project at a glance" facts inside the navy card */
.pay__facts { display: grid; gap: 0; margin: 0; }
.pay__facts div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.pay__facts div:first-child { padding-top: 0; }
.pay__facts dt { font-size: 13px; color: rgba(255, 255, 255, 0.62); }
.pay__facts dd { margin: 0; font-size: 14px; font-weight: 600; text-align: right; color: #fff; word-break: break-word; }
.pay__intro { margin: 0; font-size: 14.5px; line-height: 1.65; color: rgba(255, 255, 255, 0.75); }
.pay__dl {
  display: grid;
  place-items: center;
  height: 46px;
  margin-top: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  transition: background 0.3s, color 0.3s;
}
.pay__dl:hover { background: #fff; color: #04223f; }

/* developer: real logo in the badge, and the developer's other projects */
.dev__logo--img { padding: 8px; background: #fff; overflow: hidden; }
.dev__logo--img img { width: 100%; height: 100%; object-fit: contain; }
.dev__list { padding: 24px 26px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.04); }
.dev__list-title { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.dev__list ul { list-style: none; margin: 0 0 16px; padding: 0; }
.dev__list li a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: #fff; transition: color 0.3s; }
.dev__list li a:hover, .dev__list li a[aria-current] { color: var(--accent); }
.dev__list li small { font-size: 12.5px; color: rgba(255, 255, 255, 0.55); white-space: nowrap; }
.dev__all { font-size: 14px; font-weight: 600; color: var(--accent); }

/* location: distances to nearby landmarks */
.loc-adv { list-style: none; margin: 0 0 18px; padding: 0; }
.loc-adv li { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: 14.5px; color: var(--text); }
.loc-adv b { flex: none; font-weight: 700; color: var(--brand-deep); }

/* a gallery with fewer than five photographs still fills its two rows */
.gs[data-photos="3"] .gs__grid { grid-template-columns: 2fr 1fr; }
.gs[data-photos="4"] .gs__item--3 { grid-column: span 2; }
.gs[data-photos="2"] .gs__grid { grid-template-columns: 1fr 1fr; grid-template-rows: clamp(240px, 26vw, 420px); }
.gs[data-photos="2"] .gs__item--0 { grid-row: auto; }

/* overview with no figures: the description takes the full width */
.sec--overview .sec__split > .sec__copy:only-child { grid-column: 1 / -1; max-width: none; margin-inline: 0; text-align: center; }
.gs[data-photos="1"] .gs__grid { grid-template-columns: 1fr; grid-template-rows: clamp(260px, 34vw, 520px); }
.gs[data-photos="1"] .gs__item--0 { grid-row: auto; }

/* careers: how many openings a role has, as a small pill beside its title */
.job__openings {
  flex: none;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--brand-deep);
  background: rgba(6, 59, 115, 0.08);
}

/* Careers: four reasons to join, then the promise to applicants */
.perks__lead { margin: 4px 0 0; font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, 0.68); }
.perks--four .perks__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.promise {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
  margin-top: clamp(28px, 3vw, 44px);
  padding: clamp(22px, 2.4vw, 32px) clamp(22px, 2.8vw, 40px);
  border-radius: 20px;
  border: 1px solid rgba(114, 184, 250, 0.28);
  background: rgba(114, 184, 250, 0.06);
}
.promise__title { margin: 0; font-size: clamp(20px, 1.8vw, 26px); color: #fff; white-space: nowrap; }
.promise__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 28px; }
.promise__list li { display: flex; gap: 12px; align-items: flex-start; }
.promise__tick { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #04223f; background: var(--accent); }
.promise__list strong { display: block; margin-bottom: 2px; font-size: 15px; color: #fff; }
.promise__list li > span:last-child { font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.65); }

@media (max-width: 1199.98px) {
  .perks--four .perks__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .promise { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
  .promise__list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
  .perks--four .perks__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Residential page: penthouses and apartments showcase
   Only shown when the category page is on Residential (the page script sets
   data-cat on <html> from ?type=).
   ========================================================================== */
html:not([data-cat="residential"]) [data-only-cat="residential"] { display: none; }
.resi { background: #fff; }
.resi__head { max-width: 680px; margin: 0 auto clamp(40px, 5vw, 72px); text-align: center; }
.resi__lead { margin: 0 0 24px; font-size: 16.5px; line-height: 1.7; color: var(--muted); }
.resi__row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.resi__row + .resi__row { margin-top: clamp(48px, 6vw, 96px); }
.resi__row--rev > :first-child { order: 2; }
.resi__mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.resi__mosaic img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; }
.resi__mosaic img:first-child { border-top-left-radius: 32px; }
.resi__mosaic img:last-child { border-bottom-right-radius: 32px; }
.resi__photo { margin: 0; }
.resi__photo img { width: 100%; aspect-ratio: 4 / 3.1; object-fit: cover; border-radius: 26px; }
.resi__kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brand); }
.resi__title { margin: 8px 0 14px; font-size: clamp(26px, 2.6vw, 38px); letter-spacing: -0.02em; color: var(--ink); }
.resi__copy p { margin: 0 0 14px; font-size: 16px; line-height: 1.75; color: var(--muted); }
.resi__list { list-style: none; margin: 6px 0 24px; padding: 0; display: grid; gap: 10px; }
.resi__list--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
.resi__list li { position: relative; padding-left: 30px; font-size: 15px; font-weight: 500; color: var(--ink); }
.resi__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e6eef8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304223f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 12px no-repeat;
}
@media (max-width: 991.98px) {
  .resi__row { grid-template-columns: minmax(0, 1fr); }
  .resi__row--rev > :first-child { order: 0; }
}
@media (max-width: 575.98px) {
  .resi__list--cols { grid-template-columns: minmax(0, 1fr); }
}
.resi__lead { margin-bottom: 0; }


/* ==========================================================================
   Category page: filter bar over the project grid
   ========================================================================== */
.cprojects--list { background: #fff; padding-top: clamp(32px, 3.6vw, 52px); }
.cfilter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: #f6f8fb;
}
.cfilter__subs { display: flex; flex-wrap: wrap; gap: 8px; }
.cfilter__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.cfilter__chip span { min-width: 24px; padding: 2px 7px; border-radius: 999px; font-size: 12px; text-align: center; color: var(--ink); background: rgba(14, 22, 32, 0.07); }
.cfilter__chip:hover { color: var(--ink); background: #fff; border-color: var(--line); }
.cfilter__chip.is-active { color: #fff; background: #04223f; }
.cfilter__chip.is-active span { color: #04223f; background: #fff; }
.cfilter__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cfilter__search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  width: min(300px, 100%);
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
}
.cfilter__search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 14.5px; color: var(--ink); }
.cfilter__field {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 6px 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
}
.cfilter__field span { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-deep); }
.cfilter__field select { border: 0; outline: 0; background: transparent; font-size: 14.5px; font-weight: 600; color: var(--ink); cursor: pointer; padding-right: 6px; }
.cfilter__count { margin: 22px 0 18px; font-size: 14px; font-weight: 600; color: var(--muted); }
.cfilter__reset { padding: 0; border: 0; background: none; font: inherit; color: var(--brand-deep); text-decoration: underline; text-underline-offset: 3px; }
.cprojects--list .cprojects__item[hidden] { display: none; }

@media (max-width: 991.98px) {
  .cfilter__tools { width: 100%; }
  .cfilter__search { flex: 1 1 100%; width: auto; }
  .cfilter__field { flex: 1; justify-content: space-between; }
}
@media (max-width: 575.98px) {
  .cfilter__subs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; }
  .cfilter__chip { flex: none; }
  .cfilter__field { flex: 1 1 100%; }
}
/* two tidy rows: type chips, then search / location / sort on one line */
.cfilter__tools { width: 100%; flex-wrap: nowrap; }
.cfilter__search { flex: 1 1 auto; width: auto; }
.cfilter__field { flex: none; }
@media (max-width: 767.98px) {
  .cfilter__tools { flex-wrap: wrap; }
  .cfilter__search { flex: 1 1 100%; }
  .cfilter__field { flex: 1 1 calc(50% - 5px); justify-content: space-between; }
}

/* banner form button: flat, no shadow */
.hform__submit, .hform__submit:hover { box-shadow: none; }

/* WhatsApp button: locked to a 56px disc so it can never be squeezed into a
   tall pill; it still widens to show its label on hover */
.float-wa { box-sizing: border-box; min-width: 56px; height: 56px; max-height: 56px; flex-direction: row; flex-wrap: nowrap; line-height: 1; }
.float-wa__icon { width: 56px; min-width: 56px; height: 56px; }
.float-wa__icon svg { display: block; flex: none; }



/* Developers banner: the artwork carries the developer logos on its left half,
   so the page name moves to the right half and only that side is shaded */
.phero--devs .phero__shade {
  background: linear-gradient(90deg, rgba(4, 20, 40, 0) 0%, rgba(4, 20, 40, 0) 46%, rgba(4, 20, 40, 0.55) 72%, rgba(4, 20, 40, 0.7) 100%);
}
.phero--devs .phero__bg img { object-position: left center; }
.phero--devs .phero__inner { justify-items: end; text-align: right; }
.phero--devs .phero__inner > * { width: min(46%, 560px); }
.phero--devs .phero__crumbs { width: fit-content; }
@media (max-width: 991.98px) {
  /* on narrow screens the logos fill the width, so the text sits under a full shade */
  .phero--devs .phero__shade { background: rgba(4, 20, 40, 0.55); }
  .phero--devs .phero__inner { justify-items: center; text-align: center; }
  .phero--devs .phero__inner > * { width: auto; }
}

/* ==========================================================================
   Legal documents (privacy-policy.html, terms.html)
   A letterhead sheet on a pale ground: compact logo and office details at the
   top, the title, then numbered clauses so "clause 12" references line up.
   ========================================================================== */
.doc { padding: calc(var(--hdr-h) + clamp(32px, 4vw, 56px)) 0 clamp(48px, 6vw, 88px); background: #f4f7fb; }
.doc__sheet {
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(28px, 4.5vw, 64px) clamp(22px, 5vw, 72px);
  border-radius: 24px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 30px 70px -50px rgba(4, 34, 63, 0.45);
}
.doc__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "logo org" "logo addr" "logo rera";
  column-gap: 28px;
  row-gap: 2px;
  align-items: center;
  padding-bottom: 24px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
.doc__logo { grid-area: logo; display: block; }
.doc__logo img { display: block; width: auto; height: 52px; }
.doc__org { grid-area: org; margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); text-align: right; }
.doc__addr { grid-area: addr; margin: 0; font-size: 13px; line-height: 1.6; color: var(--muted); text-align: right; }
.doc__addr a { color: var(--brand-deep); }
.doc__rera { grid-area: rera; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted); text-align: right; }

.doc__titleblock { margin-bottom: 26px; }
.doc__title { margin: 0; font-size: clamp(30px, 3.6vw, 46px); letter-spacing: -0.02em; color: var(--ink); }
.doc__rule { width: 64px; height: 3px; margin: 16px 0 14px; border: 0; border-radius: 2px; background: #04223f; opacity: 1; }
.doc__date { margin: 0; font-size: 14px; color: var(--muted); }
.doc__date b { color: var(--ink); }

.doc__body { counter-reset: clause; font-size: 15.5px; line-height: 1.8; color: #3d4756; }
.doc__body p { margin: 0 0 14px; }
.doc__lead { font-size: 16.5px; color: var(--ink); padding: 18px 22px; border-radius: 14px; background: #f4f7fb; border-left: 3px solid #04223f; }
.doc__body h2 {
  counter-increment: clause;
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 38px 0 12px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: clamp(19px, 1.7vw, 23px);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.doc__body h2::before {
  content: counter(clause, decimal-leading-zero);
  flex: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--brand);
}
.doc__list { margin: 4px 0 16px; padding-left: 22px; }
.doc__list li { margin-bottom: 8px; padding-left: 4px; }
.doc__list li::marker { color: var(--brand-deep); font-weight: 700; }
.doc__list b, .doc__body p b { color: var(--ink); }
.doc__body a { color: var(--brand-deep); text-decoration: underline; text-underline-offset: 3px; }

.doc__contact { margin-top: 6px; padding: 22px 24px; border-radius: 16px; background: #f4f7fb; }
.doc__contact dl { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px 18px; margin: 0; }
.doc__contact dt { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.doc__contact dd { margin: 0; font-size: 15px; color: var(--ink); }
.doc__contact a { text-decoration: none; }

.doc__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 20px;
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--muted);
}
.doc__foot a { font-weight: 600; color: var(--brand-deep); }

@media (max-width: 767.98px) {
  .doc__head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "logo" "org" "addr" "rera"; row-gap: 4px; }
  .doc__logo { margin-bottom: 12px; }
  .doc__org, .doc__addr, .doc__rera { text-align: left; }
  .doc__contact dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .doc__contact dd { margin-bottom: 10px; }
}


/* legal pages: the document title */
.doc__titleblock { position: relative; margin-bottom: 30px; }
.doc__titleblock::before {
  content: 'Legal';
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #04223f;
  background: #eaf1f9;
}
.doc__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #0e1620;
}
.doc__title em { font-style: normal; color: #1f5fa8; }
.doc__rule { width: 72px; height: 3px; margin: 20px 0 14px; background: linear-gradient(90deg, #04223f, #72b8fa); }

/* ==========================================================================
   Homepage hero, premium pass
   No overlay on the banners - the sunset skylines show as they are. The
   headline uses the body font in pure white, with only a soft text shadow
   for legibility, and the search sits on frosted glass.
   ========================================================================== */
.hero__shade { display: none; }
.hero__slide img { object-position: center 70%; }

.hero__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(32px, 4.2vw, 60px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: #fff;
  margin-bottom: 18px;
  text-shadow: 0 2px 24px rgba(10, 16, 40, 0.35), 0 1px 3px rgba(10, 16, 40, 0.25);
}
.hero__title em { color: #fff; }
.hero__lead {
  max-width: 520px;
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 500;
  color: #fff;
  text-shadow: 0 1px 14px rgba(10, 16, 40, 0.45);
  margin-bottom: 34px;
}

/* frosted glass search */
.search__tabs {
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 12px 30px -16px rgba(10, 16, 40, 0.5);
}
.search__tab { color: rgba(255, 255, 255, 0.9); }
.search__tab.is-active { color: #04223f; }
.search__body {
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.1) 100%);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 30px 70px -30px rgba(10, 16, 40, 0.55);
}
.search__field + .search__field { border-left-color: rgba(255, 255, 255, 0.3); }
.search__label { color: rgba(255, 255, 255, 0.85); }
.search__select { font-weight: 600; text-shadow: 0 1px 8px rgba(10, 16, 40, 0.3); }
.search__submit { border-radius: 14px; color: #04223f; }
@media (max-width: 991.98px) {
  .search__field { background: rgba(255, 255, 255, 0.12); }
}

/* hero: a light veil over the banners, and a narrower content column */
.hero__shade {
  display: block;
  background: linear-gradient(180deg, rgba(8, 14, 34, 0.32) 0%, rgba(8, 14, 34, 0.18) 45%, rgba(8, 14, 34, 0.38) 100%);
}
.hero__title { max-width: 820px; font-size: clamp(30px, 3.6vw, 52px); }
.hero__lead { max-width: 460px; }
.search { width: min(100%, 860px); }

/* hero search: a full pill, with a round-ended Search button to match */
.search__body { border-radius: 999px; padding: 8px 8px 8px 14px; }
.search__submit { border-radius: 999px; height: 54px; padding: 0 28px; }
@media (max-width: 991.98px) {
  /* stacked on smaller screens, so a pill would squash - keep soft corners there */
  .search__body { border-radius: 24px; padding: 10px; }
  .search__field { border-radius: 16px; }
}

/* hero search: white frosted glass, dark text on it */
.search__tabs {
  border: 1px solid rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 1px 0 #fff, 0 14px 34px -18px rgba(8, 14, 34, 0.55);
}
.search__tab { color: #3d4756; }
.search__tab:hover { color: #04223f; }
.search__tab.is-active { color: #fff; }
.search__tab-pill { background: linear-gradient(135deg, #06264d 0%, #020f22 100%); box-shadow: 0 6px 16px -8px rgba(2, 15, 34, 0.7); }
.search__body {
  color: #0e1620;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: inset 0 1px 0 #fff, 0 30px 70px -30px rgba(8, 14, 34, 0.6);
}
.search__field + .search__field { border-left-color: rgba(14, 22, 32, 0.12); }
.search__label { color: #1f5fa8; }
.search__select {
  color: #0e1620;
  text-shadow: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230e1620' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.search__submit { color: #fff; background: linear-gradient(135deg, #06264d 0%, #020f22 100%); }
.search__submit:hover { color: #fff; background: linear-gradient(135deg, #0a3566 0%, #06264d 100%); }
@media (max-width: 991.98px) {
  .search__field { background: rgba(14, 22, 32, 0.05); }
}

/* ==========================================================================
   Mobile menu: a clean white panel
   Logo and close button on top, the main links in clear dark type with thin
   dividers, sub-pages indented along a light guide line, contact at the foot.
   ========================================================================== */
.mobile-menu {
  --bs-offcanvas-width: min(88vw, 380px);
  padding: 18px 22px 26px;
  color: #0e1620;
  background: #fff;
  box-shadow: -30px 0 60px -30px rgba(4, 34, 63, 0.45);
}
.mobile-menu__head { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.mobile-menu .logo--light .logo__img { height: 38px; padding: 0; border-radius: 0; background: none; }
.mobile-menu__close {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  color: #0e1620;
  background: #f4f7fb;
  transition: background 0.3s, color 0.3s;
}
.mobile-menu__close:hover { background: #04223f; color: #fff; }
.mobile-menu__links { margin: 8px 0 auto; }
.mobile-menu__links > li > a {
  align-items: center;
  gap: 0;
  padding: 15px 2px;
  font-family: var(--font-body);
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #0e1620;
  border-bottom: 1px solid var(--line);
}
.mobile-menu__links > li > a:hover { color: #1f5fa8; padding-left: 6px; }
/* a parent that has sub-pages loses its divider; the sub list carries it */
.mobile-menu__links > li > a:has(+ .mobile-menu__sub) { border-bottom: 0; padding-bottom: 8px; }
.mobile-menu__sub {
  margin: 0 0 4px;
  padding: 0 0 12px 14px;
  gap: 0;
  border-bottom: 1px solid var(--line);
}
.mobile-menu__links .mobile-menu__sub li { border-left: 2px solid #e3ebf5; }
.mobile-menu__links .mobile-menu__sub a {
  padding: 8px 0 8px 14px;
  font-size: 14.5px;
  font-weight: 500;
  color: #5a6575;
}
.mobile-menu__links .mobile-menu__sub a:hover { color: #1f5fa8; padding-left: 18px; }
.mobile-menu__links .mobile-menu__sub li:has(a:hover) { border-left-color: #1f5fa8; }

.mobile-menu__foot {
  gap: 4px;
  margin-top: 22px;
  padding: 18px;
  border-radius: 16px;
  background: #f4f7fb;
  color: #3d4756;
  font-size: 14.5px;
  font-weight: 600;
}
.mobile-menu__foot a:not(.btn-lux):hover { color: #1f5fa8; }
.mobile-menu__foot .btn-lux { justify-self: stretch; justify-content: space-between; color: #fff; background: linear-gradient(135deg, #06264d 0%, #020f22 100%); }
.mobile-menu__foot .btn-lux:hover { color: #fff; background: linear-gradient(135deg, #0a3566 0%, #06264d 100%); }
.mobile-menu__foot .btn-lux .btn-icon { color: #fff; background: rgba(255, 255, 255, 0.14); }

/* mobile menu: About Us and Projects open as simple dropdowns */
.mobile-menu__links > li > a:has(+ .mobile-menu__sub) {
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding-bottom: 15px;
}
.mobile-menu__links > li > a:has(+ .mobile-menu__sub)::after {
  content: '';
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.35s var(--ease);
}
.mobile-menu__links > li.is-open > a::after { transform: rotate(225deg) translateY(-3px); }
.mobile-menu__links > li.is-open > a { color: #1f5fa8; border-bottom-color: transparent; padding-bottom: 8px; }
.mobile-menu__sub { display: none; }
.mobile-menu__links > li.is-open > .mobile-menu__sub { display: grid; animation: mmDrop 0.3s var(--ease); }
@keyframes mmDrop { from { opacity: 0; transform: translateY(-6px); } }

/* ==========================================================================
   Mobile menu, matched to the reference: full-screen white sheet, plain
   regular-weight links with hairline dividers, a faint logo watermark in the
   open space, and contact plus a pill button pinned to the bottom.
   ========================================================================== */
.mobile-menu {
  --bs-offcanvas-width: 100vw;
  padding: 18px 22px 28px;
  box-shadow: none;
}
.mobile-menu__head { padding-bottom: 18px; }
.mobile-menu__close { width: 44px; height: 44px; background: #fff; }
.mobile-menu__links { margin: 6px 0 0; position: relative; z-index: 1; }
.mobile-menu__links > li > a {
  padding: 18px 2px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0;
}
.mobile-menu__links > li > a:has(+ .mobile-menu__sub) { padding-bottom: 18px; }
.mobile-menu__links > li > a:has(+ .mobile-menu__sub)::after { width: 8px; height: 8px; border-width: 0 1.5px 1.5px 0; color: #5a6575; }
.mobile-menu__links > li.is-open > a { padding-bottom: 10px; }
.mobile-menu__links .mobile-menu__sub a { font-size: 15.5px; }

/* the faint watermark in the empty space below the links */
.mobile-menu::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 73%;
  width: 46%;
  aspect-ratio: 781 / 219;
  transform: translate(-50%, -50%);
  background: url("../assets/images/truegrowth-realty.372c8ba9036c.png") center / contain no-repeat;
  opacity: 0.06;
  pointer-events: none;
}

.mobile-menu__foot {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding: 24px 2px 0;
  border-radius: 0;
  background: none;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  color: #6b7686;
}
.mobile-menu__foot .btn-lux {
  justify-self: stretch;
  justify-content: center;
  gap: 16px;
  height: 58px;
  margin-top: 18px !important;
  border-radius: 999px;
  font-size: 17px;
  color: #0e1620;
  background: var(--brand);
}
.mobile-menu__foot .btn-lux:hover { color: #0e1620; background: var(--accent); }
.mobile-menu__foot .btn-lux .btn-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #fff;
  background: #0e1620;
}

/* mobile menu, closer to the reference: open sub-pages sit in a soft grey
   rounded box, no focus ring after a tap, and no watermark while a menu is open */
.mobile-menu__links a:focus:not(:focus-visible),
.mobile-menu__close:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.mobile-menu__links > li.is-open { border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.mobile-menu__links > li.is-open > a { padding-bottom: 14px; }
.mobile-menu__links > li.is-open > .mobile-menu__sub {
  margin: 0;
  padding: 8px 0;
  border: 0;
  border-radius: 14px;
  background: #f3f5f9;
}
.mobile-menu__links .mobile-menu__sub li { border-left: 0; }
.mobile-menu__links .mobile-menu__sub a {
  padding: 11px 18px;
  font-size: 15.5px;
  font-weight: 500;
  color: #3d4756;
}
.mobile-menu__links .mobile-menu__sub a:hover { padding-left: 22px; color: #1f5fa8; }
.mobile-menu:has(.is-open)::after { display: none; }

/* footer on phones: brand and contact take the full width, while the two link
   lists (Explore, Properties) sit side by side as two equal columns */
@media (max-width: 575.98px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  .footer__grid > :not(.footer__col), .footer__grid > :last-child { grid-column: 1 / -1; }
}

/* Why Choose TGR on phones: the cards stack as you scroll - each one pins just
   under the header, 12px lower than the last, and the next slides up over it */
@media (max-width: 575.98px) {
  .whyus__stack { gap: 16px; padding-bottom: 8px; }
  .whyc {
    position: sticky;
    top: calc(var(--hdr-h) + 16px + var(--i) * 12px);
    width: 100%;
    border-radius: 16px;
  }
  .whyc:hover { transform: none; }
}

/* Who We Are on phones: the small photo and the Truegrowth wordmark sit centred */
@media (max-width: 575.98px) {
  .wabout__sm { justify-self: center; width: 100%; }
  .wabout__sm figure { transform: none !important; }
  .vmark__word { transform: none !important; text-align: center; font-size: clamp(44px, 14vw, 64px); }
  .vmark__art { right: 50%; transform: translateX(50%); }
}

/* pill buttons: the arrow inside is a full circle to match the pill */
.btn-lux--pill .btn-icon { border-radius: 50%; }
.btn-lux--pill { padding-right: 8px; }

/* breadcrumbs: plain text on the banner - no pill, border, blur or tint */
.phero__crumbs,
.pdhead .phero__crumbs {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  font-size: 14px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}
.phero__crumbs a { color: rgba(255, 255, 255, 0.9); }
.phero__crumbs span { color: #fff; font-weight: 600; }

/* Core values on phones: the four cards stack as you scroll. Each pins under
   the header a little lower than the last; main.js eases the covered ones back */
@media (max-width: 767.98px) {
  .cvalues__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-bottom: 12px; }
  .cvalues__grid > li { margin-top: 0 !important; position: sticky; top: calc(var(--hdr-h) + 18px); }
  .cvalues__grid > li:nth-child(2) { top: calc(var(--hdr-h) + 30px); }
  .cvalues__grid > li:nth-child(3) { top: calc(var(--hdr-h) + 42px); }
  .cvalues__grid > li:nth-child(4) { top: calc(var(--hdr-h) + 54px); }
  .cval { min-height: 0; transform-origin: center top; transition: box-shadow 0.45s var(--ease); will-change: transform, filter; }
  .cval:hover { transform: none; }
}

/* clip (not hidden) still crops the blobs but lets the cards stick */
.cvalues { overflow: clip; }

/* careers on phones: title on its own line with the toggle beside it, then
   the positions pill and the job type on a second line */
@media (max-width: 575.98px) {
  .job__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "title toggle" "meta toggle";
    align-items: center;
    column-gap: 14px;
    row-gap: 8px;
  }
  .job__title { grid-area: title; font-size: 18px; line-height: 1.25; }
  .job__toggle { grid-area: toggle; opacity: 1; }
  .job__openings, .job[open] .job__type { grid-row: 2; grid-column: 1; justify-self: start; }
  .job[open] .job__type { justify-self: end; }
  .job__place { display: none; }
}

/* ==========================================================================
   Testimonials: light theme. Heading on the left; on the right a vertical
   stack of review cards with the featured one raised in the middle - accent
   bar, quote mark, full opacity - and the neighbours smaller and softer.
   ========================================================================== */
.treviews { position: relative; overflow: clip; background: linear-gradient(180deg, #f6f9fd 0%, #ffffff 100%); }
.treviews::before {
  content: '';
  position: absolute;
  right: -10%;
  top: 10%;
  width: 46vw;
  max-width: 640px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(114, 184, 250, 0.18), transparent 65%);
  pointer-events: none;
}
.treviews__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: center;
}
.treviews__title { margin: 6px 0 16px; font-size: clamp(32px, 3.8vw, 54px); line-height: 1.08; letter-spacing: -0.025em; color: var(--ink); }
.treviews__title em { font-style: normal; color: #1f5fa8; }
.treviews__lead { margin: 0 0 30px; max-width: 440px; font-size: 16.5px; line-height: 1.75; color: var(--muted); }

.treviews__stage { position: relative; height: 470px; }
/* a soft brand ring behind the featured card */
.treviews__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  border: 1px dashed rgba(31, 95, 168, 0.25);
  transform: translate(-50%, -50%);
}
.treviews__list { position: relative; list-style: none; margin: 0; padding: 0; height: 100%; }
.rcard {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  gap: 16px;
  width: min(100%, 520px);
  padding: 22px 26px 22px 22px;
  border-radius: 20px;
  border: 1px solid rgba(14, 22, 32, 0.06);
  background: #fff;
  box-shadow: 0 18px 40px -26px rgba(4, 34, 63, 0.35);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.86);
  transition: transform 0.7s var(--ease), opacity 0.7s var(--ease), box-shadow 0.7s var(--ease);
}
.rcard::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 22px;
  bottom: 22px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, #1f5fa8, #72b8fa);
  opacity: 0;
  transition: opacity 0.5s;
}
.rcard.is-prev { opacity: 0.55; pointer-events: auto; transform: translate(-44%, calc(-50% - 158px)) scale(0.86); }
.rcard.is-next { opacity: 0.55; pointer-events: auto; transform: translate(-44%, calc(-50% + 158px)) scale(0.86); }
.rcard.is-active {
  z-index: 2;
  opacity: 1;
  pointer-events: auto;
  cursor: default;
  transform: translate(-56%, -50%) scale(1);
  box-shadow: 0 34px 70px -30px rgba(4, 34, 63, 0.45);
}
.rcard.is-active::before { opacity: 1; }
.rcard__avatar { flex: none; width: 58px; height: 58px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 6px 16px -6px rgba(4, 34, 63, 0.35); }
.rcard__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 8px; }
.rcard__name { font-size: 16px; color: var(--ink); }
.rcard__place { font-size: 13px; color: var(--muted); }
.rcard__stars { flex-basis: 100%; font-size: 13px; letter-spacing: 2px; color: #f2b01e; }
.rcard__text { margin: 0; font-size: 14.5px; line-height: 1.65; color: #4a5361; }
.rcard__quote { position: absolute; right: 20px; top: 18px; width: 30px; fill: #1f5fa8; opacity: 0; transition: opacity 0.5s; }
.rcard.is-active .rcard__quote { opacity: 0.85; }

.treviews__dots { position: absolute; right: 0; top: 50%; display: grid; gap: 10px; transform: translateY(-50%); }
.treviews__dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(31, 95, 168, 0.25); transition: height 0.4s var(--ease), background 0.4s; }
.treviews__dots button.is-active { height: 26px; background: #1f5fa8; }

@media (max-width: 991.98px) {
  .treviews__grid { grid-template-columns: minmax(0, 1fr); }
  .treviews__intro { text-align: center; }
  .treviews__lead { margin-inline: auto; }
}
@media (max-width: 575.98px) {
  .treviews__stage { height: 430px; }
  .treviews__ring { width: 280px; height: 280px; }
  .rcard { width: calc(100% - 28px); padding: 18px 18px 18px 16px; gap: 12px; }
  .rcard.is-active { transform: translate(-52%, -50%) scale(1); }
  .rcard.is-prev { transform: translate(-48%, calc(-50% - 150px)) scale(0.88); }
  .rcard.is-next { transform: translate(-48%, calc(-50% + 150px)) scale(0.88); }
  .rcard__avatar { width: 48px; height: 48px; }
  .rcard__text { font-size: 14px; }
  .treviews__dots { right: -6px; }
}

/* testimonials: one review card at a time, on a warm ivory section */
.treviews { background: linear-gradient(180deg, #faf7f1 0%, #f4efe6 100%); }
.treviews::before { background: radial-gradient(circle, rgba(201, 164, 106, 0.16), transparent 65%); }
.treviews__ring { display: none; }
.treviews__stage { height: 300px; }
.rcard.is-prev, .rcard.is-next { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) translateY(24px) scale(0.97); }
.rcard.is-active { transform: translate(-50%, -50%) scale(1); }
.rcard { width: min(100%, 560px); padding: 32px 34px 30px 30px; gap: 20px; border-color: rgba(14, 22, 32, 0.05); }
.rcard__avatar { width: 66px; height: 66px; }
.rcard__name { font-size: 17px; }
.rcard__text { font-size: 16px; line-height: 1.75; color: #3d4756; }
.rcard__quote { width: 36px; top: 24px; right: 26px; }
.rcard::before { top: 30px; bottom: 30px; }
.treviews__dots { right: auto; left: 50%; top: auto; bottom: 0; display: flex; transform: translateX(-50%); }
.treviews__dots button.is-active { height: 8px; width: 26px; }
@media (max-width: 575.98px) {
  .treviews__stage { height: 340px; }
  .rcard { width: 100%; padding: 22px 20px; gap: 14px; }
  .rcard.is-active { transform: translate(-50%, -50%) scale(1); }
  .rcard.is-prev, .rcard.is-next { transform: translate(-50%, -50%) translateY(24px) scale(0.97); }
  .rcard__avatar { width: 52px; height: 52px; }
  .rcard__text { font-size: 15px; }
}

/* testimonial card, as in the reference: a soft beige card with the photo
   overlapping its top edge, a round quote badge, centred name, place, review
   and the stars at the foot */
.treviews__stage { height: 400px; }
.rcard {
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: min(100%, 520px);
  padding: 74px 36px 30px;
  border: 1px solid rgba(160, 120, 60, 0.12);
  border-radius: 18px;
  text-align: center;
  background: #f6ead8;
  box-shadow: 0 30px 60px -38px rgba(80, 52, 18, 0.45);
}
.treviews__stage { padding-top: 46px; }
.rcard.is-active { transform: translate(-50%, calc(-50% + 23px)) scale(1); }
.rcard.is-prev, .rcard.is-next { transform: translate(-50%, calc(-50% + 47px)) scale(0.97); }
.rcard::before { display: none; }
.rcard__avatar {
  position: absolute;
  left: 50%;
  top: 0;
  width: 92px;
  height: 92px;
  border: 5px solid #fff;
  transform: translate(-50%, -50%);
  box-shadow: 0 10px 24px -10px rgba(14, 22, 32, 0.45);
}
.rcard__qbadge {
  position: absolute;
  left: 22px;
  top: 22px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #e6cfa9;
}
.rcard__qbadge .rcard__quote { position: static; width: 20px; fill: #fff; opacity: 1; }
.rcard__name { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: #1a1d22; }
.rcard__place { margin: 4px 0 14px; font-size: 14px; color: #6b6255; }
.rcard__text { margin: 0 0 16px; font-size: 15.5px; line-height: 1.7; color: #3f3a33; }
.rcard__stars { flex-basis: auto; font-size: 20px; letter-spacing: 3px; color: #f29a1f; }
@media (max-width: 575.98px) {
  .treviews__stage { height: 420px; }
  .rcard { width: 100%; padding: 66px 20px 26px; }
  .rcard.is-active { transform: translate(-50%, calc(-50% + 23px)) scale(1); }
  .rcard.is-prev, .rcard.is-next { transform: translate(-50%, calc(-50% + 47px)) scale(0.97); }
  .rcard__avatar { width: 80px; height: 80px; }
  .rcard__qbadge { left: 16px; top: 16px; width: 40px; height: 40px; }
  .rcard__name { font-size: 20px; }
  .rcard__text { font-size: 15px; }
}
.treviews__dots { bottom: -26px; }

/* testimonials: smaller heading, prev / next arrows under the card */
.treviews__title { font-size: clamp(28px, 2.8vw, 40px); }
.treviews__nav { position: absolute; left: 50%; bottom: -58px; display: flex; gap: 12px; transform: translateX(-50%); }
.treviews__arrow {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(14, 22, 32, 0.12);
  background: #fff;
  color: #0e1620;
  box-shadow: 0 10px 22px -14px rgba(14, 22, 32, 0.5);
  transition: background 0.3s, color 0.3s, transform 0.3s var(--ease);
}
.treviews__arrow:hover { color: #fff; background: #04223f; border-color: #04223f; transform: translateY(-2px); }
.treviews__stage { margin-bottom: 40px; }
.treviews__stage { margin-bottom: 64px; }

/* ==========================================================================
   Testimonials in the site theme: deep navy ground with a brand-blue glow and
   a faint grid, white type on the left, and a crisp white card on the right
   with navy and soft-gold detailing
   ========================================================================== */
.treviews {
  color: #fff;
  background:
    radial-gradient(60% 80% at 85% 20%, rgba(114, 184, 250, 0.16), transparent 60%),
    radial-gradient(50% 70% at 0% 100%, rgba(31, 95, 168, 0.22), transparent 60%),
    linear-gradient(135deg, #04223f 0%, #021226 100%);
}
.treviews::before {
  inset: 0;
  right: auto;
  top: auto;
  width: 100%;
  max-width: none;
  aspect-ratio: auto;
  border-radius: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(70% 70% at 70% 50%, #000, transparent);
  mask-image: radial-gradient(70% 70% at 70% 50%, #000, transparent);
}
.treviews .eyebrow { color: #fff; background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.22); }
.treviews__title { color: #fff; }
.treviews__title em { color: var(--accent); }
.treviews__lead { color: rgba(255, 255, 255, 0.7); }
.treviews .btn-lux { color: #04223f; background: #fff; }
.treviews .btn-lux .btn-icon { color: #fff; background: #04223f; }
.treviews .btn-lux:hover { background: var(--accent); color: #04223f; }

.rcard {
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: linear-gradient(180deg, #ffffff 0%, #f5f8fc 100%);
  box-shadow: 0 40px 80px -36px rgba(0, 0, 0, 0.7), inset 0 1px 0 #fff;
}
.rcard__avatar { border-color: #fff; box-shadow: 0 0 0 4px rgba(114, 184, 250, 0.45), 0 14px 30px -12px rgba(0, 0, 0, 0.6); }
.rcard__qbadge { background: linear-gradient(135deg, #06264d 0%, #020f22 100%); box-shadow: 0 8px 18px -10px rgba(2, 15, 34, 0.8); }
.rcard__name { color: #04223f; }
.rcard__place { color: #1f5fa8; font-weight: 600; letter-spacing: 0.04em; }
.rcard__text { color: #3d4756; }
.rcard__stars { color: #d6a64a; }

.treviews__arrow {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: none;
}
.treviews__arrow:hover { color: #04223f; background: #fff; border-color: #fff; }

/* testimonials: the township at golden hour, under a deep navy veil */
.treviews__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; z-index: 0; }
.treviews {
  isolation: isolate;
  background: #021226;
}
.treviews::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(2, 18, 38, 0.94) 0%, rgba(4, 34, 63, 0.82) 45%, rgba(4, 34, 63, 0.62) 100%),
    radial-gradient(60% 80% at 85% 20%, rgba(114, 184, 250, 0.18), transparent 60%);
}
.treviews::before { z-index: 1; }
.treviews__grid { z-index: 2; }
@media (max-width: 991.98px) {
  .treviews::after { background: linear-gradient(180deg, rgba(2, 18, 38, 0.92) 0%, rgba(4, 34, 63, 0.8) 100%); }
}

/* testimonials: frosted-glass review card over the township */
.treviews::after {
  background:
    linear-gradient(90deg, rgba(2, 18, 38, 0.92) 0%, rgba(4, 34, 63, 0.7) 45%, rgba(4, 34, 63, 0.38) 100%),
    radial-gradient(60% 80% at 85% 20%, rgba(114, 184, 250, 0.16), transparent 60%);
}
.rcard {
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.06) 100%);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(255, 255, 255, 0.06), 0 40px 80px -36px rgba(0, 0, 0, 0.75);
}
.rcard__avatar { border-color: rgba(255, 255, 255, 0.9); box-shadow: 0 0 0 4px rgba(114, 184, 250, 0.35), 0 14px 30px -12px rgba(0, 0, 0, 0.6); }
.rcard__qbadge {
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: none;
}
.rcard__name { color: #fff; }
.rcard__place { color: var(--accent); }
.rcard__text { color: rgba(255, 255, 255, 0.85); }
.rcard__stars { color: #e7b45a; }
@media (max-width: 991.98px) {
  .treviews::after { background: linear-gradient(180deg, rgba(2, 18, 38, 0.86) 0%, rgba(4, 34, 63, 0.6) 100%); }
}

/* pill buttons keep their own width inside stretching (column) layouts */
.btn-lux--pill { align-self: flex-start; width: fit-content; max-width: 100%; }

/* ==========================================================================
   One button style site-wide: a full pill with the arrow in a round chip on
   the right (as "View all projects"). Colour still follows the background -
   navy on light sections, white on dark ones.
   ========================================================================== */
.btn-lux {
  --h: 52px;
  border-radius: 999px;
  padding: 0 7px 0 26px;
  gap: 14px;
  width: fit-content;
  max-width: 100%;
}
.btn-lux .btn-icon { border-radius: 50%; width: calc(var(--h) - 12px); height: calc(var(--h) - 12px); }
/* buttons without an arrow chip get even padding */
.btn-lux:not(:has(.btn-icon)) { padding: 0 28px; }
/* in a stretching column, a button keeps its own width */
.btn-lux { align-self: flex-start; }
.text-center > .btn-lux, .partners__cta > .btn-lux, .text-center .btn-lux { align-self: center; }

/* form and action buttons share the pill shape */
.eform__submit,
.aform__submit,
.hform__submit,
.search__submit,
.pay__cta,
.pay__dl,
.ccard__btn,
.faq-help__btn,
.stabs__btn,
.price-table__btn,
.mobile-menu__foot .btn-lux { border-radius: 999px; }

/* testimonials: the two auto-sliding columns on desktop and tablet, the glass
   single-card section on phones */
.treviews--mobile { display: none; }
@media (max-width: 767.98px) {
  .tst--desktop { display: none; }
  .treviews--mobile { display: block; }
}

/* ==========================================================================
   Homepage hero: a smaller, refined headline with a soft light sheen that
   sweeps across it, and the popular-location chips under the search
   ========================================================================== */
.hero__title {
  font-size: clamp(28px, 3.1vw, 44px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.02em;
  text-shadow: none;
  filter: drop-shadow(0 2px 14px rgba(8, 14, 34, 0.45));
}
.hero__title .line > span,
.hero__title em {
  color: transparent;
  background: linear-gradient(110deg, #ffffff 0%, #ffffff 40%, #cfe6ff 47%, #ffffff 50%, #e6f2ff 53%, #ffffff 60%, #ffffff 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: heroSheen 6s ease-in-out infinite;
}
@keyframes heroSheen { 0%, 20% { background-position: 120% 0; } 70%, 100% { background-position: -40% 0; } }
@media (prefers-reduced-motion: reduce) { .hero__title .line > span, .hero__title em { animation: none; } }

.popular { margin-top: 24px; justify-content: center; flex-wrap: wrap; gap: 10px; }
.popular__label { color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4); }
.popular__chip {
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
}
.popular__chip:hover { background: #fff; color: #04223f; border-color: #fff; }
@media (max-width: 767.98px) {
  .popular { gap: 8px; margin-top: 18px; }
  .popular__label { width: 100%; text-align: center; margin: 0; }
}

/* hero headline: a polished-metal finish on every letter - bright white at the
   top shading to cool silver-blue, a fine light band through the middle, and a
   gloss that sweeps across on a loop */
.hero__title .line > span,
.hero__title em {
  background:
    linear-gradient(110deg, transparent 0%, transparent 40%, rgba(255, 255, 255, 0.95) 48%, transparent 56%, transparent 100%),
    linear-gradient(180deg, #ffffff 0%, #ffffff 26%, #cfe2f8 50%, #ffffff 58%, #e3effc 70%, #8fb6e3 100%);
  background-size: 250% 100%, 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: heroSheen 5s ease-in-out infinite;
}
@keyframes heroSheen { 0%, 15% { background-position: 130% 0, 0 0; } 65%, 100% { background-position: -50% 0, 0 0; } }
.hero__title { filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.35)) drop-shadow(0 4px 18px rgba(8, 14, 34, 0.5)); }

/* hero headline: a touch of gold - champagne at the base of each letter, a
   warm golden gloss that sweeps across, and a slow breathing golden glow */
.hero__title .line > span,
.hero__title em {
  background:
    linear-gradient(110deg, transparent 0%, transparent 40%, rgba(255, 231, 168, 0.95) 46%, #fff6dc 49%, rgba(255, 219, 140, 0.9) 52%, transparent 58%, transparent 100%),
    linear-gradient(180deg, #ffffff 0%, #ffffff 28%, #f3f6fb 48%, #ffffff 56%, #f8ecd0 72%, #e2bf7c 100%);
  background-size: 250% 100%, 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: heroSheen 4.5s ease-in-out infinite;
}
.hero__title { animation: heroGlow 4.5s ease-in-out infinite; }
@keyframes heroGlow {
  0%, 100% { filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.3)) drop-shadow(0 4px 16px rgba(8, 14, 34, 0.5)) drop-shadow(0 0 0 rgba(226, 191, 124, 0)); }
  50% { filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.4)) drop-shadow(0 4px 16px rgba(8, 14, 34, 0.45)) drop-shadow(0 0 18px rgba(226, 191, 124, 0.45)); }
}
@media (prefers-reduced-motion: reduce) { .hero__title { animation: none; } }

/* hero headline: premium blue - white shading into deep sapphire, an icy-blue
   gloss sweeping across and a soft royal-blue glow (replaces the gold) */
.hero__title .line > span,
.hero__title em {
  background:
    linear-gradient(110deg, transparent 0%, transparent 40%, rgba(190, 225, 255, 0.95) 46%, #ffffff 49%, rgba(150, 205, 255, 0.9) 52%, transparent 58%, transparent 100%),
    linear-gradient(180deg, #ffffff 0%, #ffffff 26%, #e4f0fd 46%, #ffffff 54%, #9cc6f2 72%, #3f7fcf 100%);
  background-size: 250% 100%, 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@keyframes heroGlow {
  0%, 100% { filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.3)) drop-shadow(0 4px 16px rgba(4, 14, 34, 0.55)) drop-shadow(0 0 0 rgba(31, 95, 168, 0)); }
  50% { filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.4)) drop-shadow(0 4px 16px rgba(4, 14, 34, 0.5)) drop-shadow(0 0 20px rgba(63, 127, 207, 0.6)); }
}

/* project page, key highlights on phones and small tablets: the list takes the
   full width and the photo sits underneath it (the desktop two-column rule above
   was overriding the earlier single-column one) */
@media (max-width: 767.98px) {
  .hl-split { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .hl-split__media { min-height: 0; }
  .hl-split__media img { position: static; height: auto; aspect-ratio: 16 / 10; border-radius: 18px; }
  .sec--highlights .blk__title { font-size: 26px; }
  .hl-list li { font-size: 15px; }
}

/* project page, location on phones: a shorter map, then the details card at
   full width beneath it (no overlap), compact rows and a full-width button */
@media (max-width: 767.98px) {
  .ploc-grid { gap: 16px; }
  .sec--location .loc-map { height: 240px; border-radius: 18px; }
  .loc-card { margin: 0; padding: 22px 18px; border-radius: 18px; box-shadow: 0 20px 44px -30px rgba(6, 42, 86, 0.45); }
  .loc-card .blk__title { font-size: 26px; margin-bottom: 12px; }
  .loc-card .loc-addr { align-items: flex-start; font-size: 15px; line-height: 1.5; }
  .loc-card .loc-addr svg { flex: none; margin-top: 3px; }
  .loc-adv li { align-items: flex-start; gap: 12px; padding: 11px 0; font-size: 14px; line-height: 1.45; }
  .loc-adv li span { flex: 1; min-width: 0; }
  .loc-adv b { white-space: nowrap; }
  .loc-card__actions { margin-top: 14px; }
  .loc-card__actions .pay__cta { width: 100%; justify-content: center; }
}

/* ==========================================================================
   Project page: Location & Connectivity
   A centred heading with the address, then one rounded panel - the map fills
   the left half, "What's nearby" fills the right with icon rows and value pills
   ========================================================================== */
.locx__head { margin-bottom: clamp(26px, 3vw, 40px); }
.locx__addr { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; font-weight: 600; color: #3d4756; }
.locx__addr svg { flex: none; color: #1f5fa8; }
.locx {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(14, 22, 32, 0.07);
  background: #fff;
  box-shadow: 0 40px 80px -50px rgba(4, 34, 63, 0.45);
}
.locx .loc-map { height: auto; min-height: 460px; margin: 0; border-radius: 0; }
.locx__side { display: flex; flex-direction: column; padding: clamp(26px, 3vw, 40px); background: linear-gradient(180deg, #ffffff 0%, #f6f9fd 100%); }
.locx__title { margin: 0 0 16px; font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #1f5fa8; }
.locx__list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; }
.locx__list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(14, 22, 32, 0.06);
  background: #fff;
  transition: border-color 0.3s, transform 0.3s var(--ease), box-shadow 0.3s;
}
.locx__list li:hover { border-color: rgba(31, 95, 168, 0.3); transform: translateX(4px); box-shadow: 0 12px 26px -20px rgba(4, 34, 63, 0.5); }
.locx__ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #06264d 0%, #020f22 100%); }
.locx__name { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 500; line-height: 1.4; color: #0e1620; }
.locx__val { flex: none; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; color: #04223f; background: #e6eef8; }
.locx__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.locx__actions .pay__cta { width: auto; margin: 0; padding: 0 26px; height: 50px; color: #fff; background: linear-gradient(135deg, #06264d 0%, #020f22 100%); }
.locx__actions .pay__cta:hover { color: #fff; background: linear-gradient(135deg, #0a3566 0%, #06264d 100%); }
.locx__dir {
  display: inline-flex;
  align-items: center;
  height: 50px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid rgba(4, 34, 63, 0.25);
  font-size: 14.5px;
  font-weight: 700;
  color: #04223f;
  transition: background 0.3s, color 0.3s;
}
.locx__dir:hover { color: #fff; background: #04223f; }

@media (max-width: 991.98px) {
  .locx { grid-template-columns: minmax(0, 1fr); border-radius: 22px; }
  .locx .loc-map { min-height: 260px; }
}
@media (max-width: 575.98px) {
  .locx__addr { font-size: 14.5px; align-items: flex-start; text-align: left; }
  .locx__addr svg { margin-top: 3px; }
  .locx__side { padding: 20px 16px; }
  .locx__list li { padding: 10px 12px; gap: 12px; }
  .locx__ico { width: 32px; height: 32px; }
  .locx__name { font-size: 14px; }
  .locx__actions > * { flex: 1 1 100%; justify-content: center; }
}

/* enquiry popup: a more compact form */
.page-project .emodal__side { padding: 16px 22px 14px; }
.page-project .emodal__side .emodal__img { width: 62px; height: 62px; margin-right: 14px; }
.page-project .emodal__side-body strong { font-size: 19px; }
.page-project .emodal__side-body ul { margin-top: 12px; gap: 6px; font-size: 12px; }
.page-project .emodal__side-body li { padding: 4px 10px; }
.page-project .emodal__main { padding: 18px 22px 18px; }
.page-project .emodal__title { font-size: 18px; margin-bottom: 2px; }
.page-project .emodal__sub { margin-bottom: 12px; font-size: 13px; }
#modalForm .eform__fields { gap: 10px; }
#modalForm .eform__field { gap: 4px; }
#modalForm .eform__field > span, #modalForm .eform__pref legend { font-size: 11px; }
#modalForm input, #modalForm select { height: 44px; }
#modalForm .eform__chip span { padding: 7px 13px; font-size: 12.5px; }
#modalForm .eform__consent { margin: 10px 0; font-size: 11.5px; }
#modalForm .eform__submit { height: 48px; }
#modalForm .eform__consent { display: flex; flex-direction: row; align-items: center; gap: 8px; }
#modalForm .eform__consent input { order: -1; flex: none; width: 16px; height: 16px; margin: 0; }

/* ==========================================================================
   Mobile menu, luxury pass: deep navy gradient with a soft blue glow, an icon
   tile on every menu item, frosted dropdowns, glass contact cards and a
   gradient call-to-action
   ========================================================================== */
.mobile-menu {
  color: #fff;
  background:
    radial-gradient(80% 50% at 100% 0%, rgba(114, 184, 250, 0.22), transparent 60%),
    radial-gradient(70% 40% at 0% 100%, rgba(31, 95, 168, 0.35), transparent 60%),
    linear-gradient(160deg, #06264d 0%, #031630 55%, #020c1c 100%);
}
.mobile-menu::after { display: none; }
.mobile-menu__head { border-bottom-color: rgba(255, 255, 255, 0.12); }
.mobile-menu .logo--light .logo__img { height: 40px; padding: 5px 10px; border-radius: 12px; background: #fff; }
.mobile-menu__close { color: #fff; border-color: rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.08); }
.mobile-menu__close:hover { color: #04223f; background: #fff; }

.mobile-menu__links > li > a {
  gap: 14px;
  justify-content: flex-start;
  padding: 13px 4px;
  font-size: 17px;
  font-weight: 500;
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.mobile-menu__links > li > a::before {
  content: '';
  flex: none;
  width: 18px;
  height: 18px;
  padding: 10px;
  box-sizing: content-box;
  border-radius: 12px;
  background: linear-gradient(135deg, #72b8fa 0%, #3f7fcf 55%, #1f5fa8 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 18px 18px;
  mask-size: 18px 18px;
  -webkit-mask-composite: source-over;
  mask-composite: add;
  /* the tile behind the icon */
  box-shadow: none;
}
/* the icon is masked out of a gradient; a sibling tile sits behind it */
.mobile-menu__links > li > a { position: relative; padding-left: 52px; }
.mobile-menu__links > li > a::before { position: absolute; left: 4px; top: 50%; padding: 0; width: 18px; height: 18px; margin: -9px 0 0 9px; border-radius: 0; background: #fff; }


.mobile-menu__links > li > a:hover,
.mobile-menu__links > li.is-open > a { color: #bfe0ff; padding-left: 56px; }
.mobile-menu__links > li > a:has(+ .mobile-menu__sub) { justify-content: flex-start; }
.mobile-menu__links > li > a:has(+ .mobile-menu__sub)::after { margin-left: auto; color: rgba(255, 255, 255, 0.7); }
.mobile-menu__links > li.is-open { border-bottom-color: rgba(255, 255, 255, 0.08); }
.mobile-menu__links > li.is-open > .mobile-menu__sub {
  margin: 0 0 4px 50px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.mobile-menu__links .mobile-menu__sub a { color: rgba(255, 255, 255, 0.78); background: none; padding-left: 18px; }
.mobile-menu__links .mobile-menu__sub a::before { display: none; }
.mobile-menu__links .mobile-menu__sub a:hover { color: #fff; }

.mobile-menu__foot { gap: 10px; padding-top: 22px; color: #fff; }
.mobile-menu__foot a:not(.btn-lux) {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 16px 0 52px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}
.mobile-menu__foot a:not(.btn-lux)::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  background: #72b8fa;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.mobile-menu__foot .btn-lux {
  justify-content: space-between;
  width: 100%;
  margin-top: 6px !important;
  padding-left: 26px;
  color: #04223f;
  background: linear-gradient(135deg, #ffffff 0%, #dbeeff 55%, #9ccbf6 100%);
  box-shadow: 0 16px 34px -18px rgba(114, 184, 250, 0.8);
}
.mobile-menu__foot .btn-lux:hover { color: #04223f; background: #fff; }
.mobile-menu__foot .btn-lux .btn-icon { color: #fff; background: #04223f; }
.mobile-menu__foot a[href^="tel:"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M22%2016.9v3a2%202%200%200%201-2.2%202%2019.8%2019.8%200%200%201-8.6-3.1%2019.5%2019.5%200%200%201-6-6A19.8%2019.8%200%200%201%202.1%204.2%202%202%200%200%201%204.1%202h3a2%202%200%200%201%202%201.7c.1.9.4%201.9.7%202.8a2%202%200%200%201-.5%202.1L8%209.9a16%2016%200%200%200%206%206l1.3-1.3a2%202%200%200%201%202.1-.4c.9.3%201.9.6%202.8.7a2%202%200%200%201%201.7%202z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M22%2016.9v3a2%202%200%200%201-2.2%202%2019.8%2019.8%200%200%201-8.6-3.1%2019.5%2019.5%200%200%201-6-6A19.8%2019.8%200%200%201%202.1%204.2%202%202%200%200%201%204.1%202h3a2%202%200%200%201%202%201.7c.1.9.4%201.9.7%202.8a2%202%200%200%201-.5%202.1L8%209.9a16%2016%200%200%200%206%206l1.3-1.3a2%202%200%200%201%202.1-.4c.9.3%201.9.6%202.8.7a2%202%200%200%201%201.7%202z%22%2F%3E%3C%2Fsvg%3E"); }
.mobile-menu__foot a[href^="mailto:"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22m3%207%209%206%209-6%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22m3%207%209%206%209-6%22%2F%3E%3C%2Fsvg%3E"); }
/* menu icon tiles: a rounded gradient tile with the white icon drawn on it */
.mobile-menu__links > li > a::before { width: 38px; height: 38px; margin: -19px 0 0 0; left: 0; border-radius: 12px; -webkit-mask: none; mask: none; box-shadow: 0 8px 18px -10px rgba(114, 184, 250, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.mobile-menu__links > li > a:has(+ .mobile-menu__sub) { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.mobile-menu__links > li:nth-child(1) > a::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M3%2010.5%2012%203l9%207.5V21a1%201%200%200%201-1%201h-5v-7H9v7H4a1%201%200%200%201-1-1z%22%2F%3E%3C%2Fsvg%3E") center / 18px 18px no-repeat, linear-gradient(135deg, #72b8fa 0%, #3f7fcf 55%, #1f5fa8 100%); }
.mobile-menu__links > li:nth-child(2) > a::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M12%2016v-4M12%208h.01%22%2F%3E%3C%2Fsvg%3E") center / 18px 18px no-repeat, linear-gradient(135deg, #72b8fa 0%, #3f7fcf 55%, #1f5fa8 100%); }
.mobile-menu__links > li:nth-child(3) > a::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M3%2021h18%22%2F%3E%3Cpath%20d%3D%22M5%2021V7l7-4v18%22%2F%3E%3Cpath%20d%3D%22M19%2021V11l-7-4%22%2F%3E%3Cpath%20d%3D%22M9%209v.01M9%2012v.01M9%2015v.01M9%2018v.01%22%2F%3E%3C%2Fsvg%3E") center / 18px 18px no-repeat, linear-gradient(135deg, #72b8fa 0%, #3f7fcf 55%, #1f5fa8 100%); }
.mobile-menu__links > li:nth-child(4) > a::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M12%2022s7-6.2%207-12a7%207%200%201%200-14%200c0%205.8%207%2012%207%2012z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%222.5%22%2F%3E%3C%2Fsvg%3E") center / 18px 18px no-repeat, linear-gradient(135deg, #72b8fa 0%, #3f7fcf 55%, #1f5fa8 100%); }
.mobile-menu__links > li:nth-child(5) > a::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M4%204h12l4%204v12H4z%22%2F%3E%3Cpath%20d%3D%22M8%2010h8M8%2014h8M8%2018h5%22%2F%3E%3C%2Fsvg%3E") center / 18px 18px no-repeat, linear-gradient(135deg, #72b8fa 0%, #3f7fcf 55%, #1f5fa8 100%); }
.mobile-menu__links > li:nth-child(6) > a::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%223%22%20y%3D%227%22%20width%3D%2218%22%20height%3D%2213%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M9%207V5a2%202%200%200%201%202-2h2a2%202%200%200%201%202%202v2M3%2013h18%22%2F%3E%3C%2Fsvg%3E") center / 18px 18px no-repeat, linear-gradient(135deg, #72b8fa 0%, #3f7fcf 55%, #1f5fa8 100%); }
.mobile-menu__links > li:nth-child(7) > a::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M22%2016.9v3a2%202%200%200%201-2.2%202%2019.8%2019.8%200%200%201-8.6-3.1%2019.5%2019.5%200%200%201-6-6A19.8%2019.8%200%200%201%202.1%204.2%202%202%200%200%201%204.1%202h3a2%202%200%200%201%202%201.7c.1.9.4%201.9.7%202.8a2%202%200%200%201-.5%202.1L8%209.9a16%2016%200%200%200%206%206l1.3-1.3a2%202%200%200%201%202.1-.4c.9.3%201.9.6%202.8.7a2%202%200%200%201%201.7%202z%22%2F%3E%3C%2Fsvg%3E") center / 18px 18px no-repeat, linear-gradient(135deg, #72b8fa 0%, #3f7fcf 55%, #1f5fa8 100%); }
/* the menu slides in as a panel, leaving a strip of the page visible beside it */
.mobile-menu { --bs-offcanvas-width: min(84vw, 360px); border-left: 1px solid rgba(255, 255, 255, 0.1); box-shadow: -30px 0 60px -20px rgba(2, 12, 28, 0.7); }
.offcanvas-backdrop.show { opacity: 0.55; }
@media (max-width: 575.98px) {
  .mobile-menu { padding: 16px 18px 22px; }
  .mobile-menu__links > li > a { font-size: 16px; padding-top: 11px; padding-bottom: 11px; }
  .mobile-menu__links > li > a::before { width: 34px; height: 34px; margin-top: -17px; border-radius: 10px; }
  .mobile-menu__links > li > a { padding-left: 48px; }
  .mobile-menu__links > li.is-open > .mobile-menu__sub { margin-left: 46px; }
}

/* mobile menu, light theme: a white panel, keeping the blue icon tiles */
.mobile-menu {
  color: #0e1620;
  background:
    radial-gradient(80% 40% at 100% 0%, rgba(114, 184, 250, 0.16), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f6f9fd 100%);
  border-left-color: rgba(14, 22, 32, 0.06);
  box-shadow: -30px 0 60px -24px rgba(4, 34, 63, 0.35);
}
.mobile-menu__head { border-bottom-color: rgba(14, 22, 32, 0.08); }
.mobile-menu .logo--light .logo__img { padding: 0; background: none; border-radius: 0; }
.mobile-menu__close { color: #0e1620; border-color: rgba(14, 22, 32, 0.12); background: #f3f6fa; }
.mobile-menu__close:hover { color: #fff; background: #04223f; }
.mobile-menu__links > li > a { color: #0e1620; border-bottom-color: rgba(14, 22, 32, 0.07); }
.mobile-menu__links > li > a:has(+ .mobile-menu__sub) { border-bottom-color: rgba(14, 22, 32, 0.07); }
.mobile-menu__links > li.is-open { border-bottom-color: rgba(14, 22, 32, 0.07); }
.mobile-menu__links > li > a:hover,
.mobile-menu__links > li.is-open > a { color: #1f5fa8; }
.mobile-menu__links > li > a:has(+ .mobile-menu__sub)::after { color: #6b7686; }
.mobile-menu__links > li.is-open > .mobile-menu__sub { border-color: rgba(14, 22, 32, 0.06); background: #f1f5fa; backdrop-filter: none; -webkit-backdrop-filter: none; }
.mobile-menu__links .mobile-menu__sub a { color: #3d4756; }
.mobile-menu__links .mobile-menu__sub a:hover { color: #1f5fa8; }
.mobile-menu__foot a:not(.btn-lux) { color: #0e1620; border-color: rgba(14, 22, 32, 0.08); background: #fff; box-shadow: 0 8px 20px -16px rgba(4, 34, 63, 0.4); }
.mobile-menu__foot a:not(.btn-lux)::before { background: #1f5fa8; }
.mobile-menu__foot .btn-lux { color: #fff; background: linear-gradient(135deg, #0a3d7a 0%, #04223f 100%); box-shadow: 0 16px 30px -18px rgba(4, 34, 63, 0.7); }
.mobile-menu__foot .btn-lux:hover { color: #fff; background: linear-gradient(135deg, #1f5fa8 0%, #04223f 100%); }
.mobile-menu__foot .btn-lux .btn-icon { color: #04223f; background: #fff; }

/* mobile menu icons: small, dark navy line icons with no tile behind them */
.mobile-menu__links > li > a::before { width: 22px; height: 22px; margin-top: -11px; left: 2px; border-radius: 0; box-shadow: none; }
.mobile-menu__links > li > a { padding-left: 38px; }
.mobile-menu__links > li > a:hover, .mobile-menu__links > li.is-open > a { padding-left: 40px; }
.mobile-menu__links > li.is-open > .mobile-menu__sub { margin-left: 36px; }
.mobile-menu__links a:focus, .mobile-menu__links a:focus-visible { outline: none; box-shadow: none; }
@media (max-width: 575.98px) {
  .mobile-menu__links > li > a::before { width: 20px; height: 20px; margin-top: -10px; }
  .mobile-menu__links > li > a { padding-left: 36px; }
  .mobile-menu__links > li.is-open > .mobile-menu__sub { margin-left: 34px; }
}
.mobile-menu__links > li:nth-child(1) > a::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2304223f%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M3%2010.5%2012%203l9%207.5V21a1%201%200%200%201-1%201h-5v-7H9v7H4a1%201%200%200%201-1-1z%22%2F%3E%3C%2Fsvg%3E") center / 20px 20px no-repeat, transparent; }
.mobile-menu__links > li:nth-child(2) > a::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2304223f%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M12%2016v-4M12%208h.01%22%2F%3E%3C%2Fsvg%3E") center / 20px 20px no-repeat, transparent; }
.mobile-menu__links > li:nth-child(3) > a::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2304223f%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M3%2021h18%22%2F%3E%3Cpath%20d%3D%22M5%2021V7l7-4v18%22%2F%3E%3Cpath%20d%3D%22M19%2021V11l-7-4%22%2F%3E%3Cpath%20d%3D%22M9%209v.01M9%2012v.01M9%2015v.01M9%2018v.01%22%2F%3E%3C%2Fsvg%3E") center / 20px 20px no-repeat, transparent; }
.mobile-menu__links > li:nth-child(4) > a::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2304223f%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M12%2022s7-6.2%207-12a7%207%200%201%200-14%200c0%205.8%207%2012%207%2012z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%222.5%22%2F%3E%3C%2Fsvg%3E") center / 20px 20px no-repeat, transparent; }
.mobile-menu__links > li:nth-child(5) > a::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2304223f%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M4%204h12l4%204v12H4z%22%2F%3E%3Cpath%20d%3D%22M8%2010h8M8%2014h8M8%2018h5%22%2F%3E%3C%2Fsvg%3E") center / 20px 20px no-repeat, transparent; }
.mobile-menu__links > li:nth-child(6) > a::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2304223f%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%223%22%20y%3D%227%22%20width%3D%2218%22%20height%3D%2213%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M9%207V5a2%202%200%200%201%202-2h2a2%202%200%200%201%202%202v2M3%2013h18%22%2F%3E%3C%2Fsvg%3E") center / 20px 20px no-repeat, transparent; }
.mobile-menu__links > li:nth-child(7) > a::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2304223f%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M22%2016.9v3a2%202%200%200%201-2.2%202%2019.8%2019.8%200%200%201-8.6-3.1%2019.5%2019.5%200%200%201-6-6A19.8%2019.8%200%200%201%202.1%204.2%202%202%200%200%201%204.1%202h3a2%202%200%200%201%202%201.7c.1.9.4%201.9.7%202.8a2%202%200%200%201-.5%202.1L8%209.9a16%2016%200%200%200%206%206l1.3-1.3a2%202%200%200%201%202.1-.4c.9.3%201.9.6%202.8.7a2%202%200%200%201%201.7%202z%22%2F%3E%3C%2Fsvg%3E") center / 20px 20px no-repeat, transparent; }
.mobile-menu__foot a:not(.btn-lux)::before { background: #04223f; width: 18px; height: 18px; margin-top: -9px; }

/* project page section headings: two-tone, like the rest of the site */
.page-project .blk__title em,
.page-project .sec__sub em { font-style: normal; color: var(--brand-deep, #063b73); }
.page-project .blk--amenities .blk__title em { color: #1f5fa8; }
.page-project .sec--developer .blk__title em { color: var(--accent); }
.page-project .blk__title em,
.page-project .sec__sub em { color: #1f5fa8; }
.page-project .sec--developer .blk__title em { color: var(--accent); }
/* slightly smaller section headings */
.page-project .sec .blk__title { font-size: clamp(24px, 2.2vw, 32px); }
.page-project .blk--amenities .blk__title { font-size: clamp(22px, 2vw, 28px); }
.page-project .sec__sub { font-size: clamp(18px, 1.5vw, 21px); }
@media (max-width: 767.98px) { .page-project .sec .blk__title, .page-project .loc-card .blk__title { font-size: 24px; } }

/* ==========================================================================
   Project page: Key Highlights, Amenities, Key Features (editorial layout)
   ========================================================================== */
/* 1. highlights - photo with an icon strip, numbered list beside it */
.hx__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
.hx__art { position: relative; padding-bottom: 44px; }
.hx__photo { margin: 0; overflow: hidden; border-radius: 26px; box-shadow: 0 40px 70px -44px rgba(4, 34, 63, 0.55); }
.hx__photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hx__strip {
  position: absolute; left: 6%; right: 6%; bottom: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  list-style: none; margin: 0; padding: 16px 10px;
  border-radius: 20px; background: #fff;
  box-shadow: 0 24px 50px -28px rgba(4, 34, 63, 0.5);
}
.hx__strip li { display: grid; justify-items: center; gap: 6px; text-align: center; }
.hx__strip li + li { border-left: 1px solid rgba(14, 22, 32, 0.07); }
.hx__sico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: #04223f; background: #eef4fb; }
.hx__sico svg { width: 20px; height: 20px; }
.hx__strip small { font-size: 11px; font-weight: 600; line-height: 1.25; color: #3d4756; padding: 0 4px; }
.hx__list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 14px; }
.hx__list li { display: flex; align-items: center; gap: 16px; font-size: 15.5px; color: #1d2633; }
.hx__no { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: 12.5px; font-weight: 700; color: #1f5fa8; border: 1px solid rgba(31, 95, 168, 0.3); background: #f4f8fd; }

/* 2. amenities - intro with arrows, a sliding row of cards */
.page-project .ax { background: #f6f8fb; }
.ax__grid { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 60px); align-items: center; }
.ax__intro .sec__lead { margin: 0 0 22px; }
.ax__nav { display: flex; gap: 10px; }
.ax__btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(14, 22, 32, 0.14); background: #fff; color: #04223f; transition: background 0.3s, color 0.3s; }
.ax__btn--on, .ax__btn:hover { color: #fff; background: #04223f; border-color: #04223f; }
.ax__track { list-style: none; margin: 0; padding: 6px 4px 18px; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.ax__track::-webkit-scrollbar { display: none; }
.ax__card {
  flex: 0 0 clamp(150px, 15vw, 180px); scroll-snap-align: start;
  display: grid; justify-items: center; align-content: center; gap: 16px;
  min-height: 190px; padding: 22px 14px; text-align: center;
  border-radius: 20px; background: #fff; border: 1px solid rgba(14, 22, 32, 0.05);
  box-shadow: 0 18px 36px -28px rgba(4, 34, 63, 0.45);
  transition: transform 0.4s var(--ease), box-shadow 0.4s;
}
.ax__card:hover { transform: translateY(-6px); box-shadow: 0 28px 50px -30px rgba(4, 34, 63, 0.55); }
.ax__ico { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; color: #04223f; background: linear-gradient(145deg, #eef4fb, #dde9f7); }
.ax__ico .am-grid__icon { display: contents; color: inherit; }
.ax__ico svg { width: 30px; height: 30px; }
.ax__card strong { font-size: 14px; font-weight: 600; line-height: 1.35; color: #0e1620; }

/* 3. key features - list on the left, big photo with an overlapping note */
.fx__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
.fx__list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 18px; }
.fx__list li { display: flex; gap: 16px; align-items: flex-start; }
.fx__ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, #06264d 0%, #020f22 100%); }
.fx__ico .kf-grid__icon { display: contents; color: inherit; background: none; box-shadow: none; }
.fx__ico svg { width: 20px; height: 20px; }
.fx__list h3 { margin: 2px 0 4px; font-size: 16px; color: #0e1620; }
.fx__list p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.fx__art { position: relative; padding: 0 0 50px 50px; }
.fx__photo { margin: 0; overflow: hidden; border-radius: 26px; }
.fx__photo img { display: block; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.fx__note {
  position: absolute; left: 0; bottom: 0; width: min(300px, 70%);
  padding: 20px 22px; border-radius: 18px; background: #fff;
  box-shadow: 0 30px 60px -30px rgba(4, 34, 63, 0.5);
}
.fx__note p { margin: 0 0 14px; font-size: 14.5px; font-weight: 600; line-height: 1.5; color: #0e1620; }
.fx__cta { display: inline-flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; font-size: 14px; font-weight: 700; color: #04223f; }
.fx__cta span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; background: #04223f; }

@media (max-width: 991.98px) {
  .hx__grid, .ax__grid, .fx__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
  .hx__strip { position: static; margin-top: -30px; left: auto; right: auto; width: 92%; margin-inline: auto; padding: 12px 4px; position: relative; }
  .hx__art { padding-bottom: 0; }
  .hx__sico { width: 32px; height: 32px; }
  .hx__strip small { font-size: 9.5px; }
  .hx__list li { font-size: 14.5px; }
  .ax__card { flex-basis: 140px; min-height: 160px; }
  .ax__ico { width: 58px; height: 58px; }
  .fx__art { padding: 0; }
  .fx__note { position: relative; width: 90%; margin: -40px auto 0; }
}

/* ==========================================================================
   Project page rhythm: tighter spacing between sections, and backgrounds that
   alternate plain / tinted down the page so each section reads on its own
   overview white - highlights cool tint - amenities white - features warm -
   price list white - developer navy - location white - FAQs cool tint
   ========================================================================== */
.page-project .blk { padding-top: clamp(44px, 4.6vw, 72px); padding-bottom: clamp(44px, 4.6vw, 72px); }
.page-project .sec--overview { background: #fff; padding-bottom: clamp(40px, 4vw, 60px); }
.page-project .hx { background: linear-gradient(180deg, #f3f7fc 0%, #f7f9fc 100%); }
.page-project .ax { background: #fff; }
.page-project .ax .ax__card { border-color: rgba(14, 22, 32, 0.08); background: #fbfcfe; }
.page-project .fx { background: linear-gradient(180deg, #faf5ec 0%, #f6efe3 100%); }
.page-project .fx .fx__note { box-shadow: 0 30px 60px -30px rgba(80, 52, 18, 0.35); }
.page-project .fx .eyebrow { background: rgba(255, 255, 255, 0.7); }
.page-project .sec--plans { background: #fff; }
.page-project .sec--location { background: #fff; }
.page-project .sec--faqs { background: linear-gradient(180deg, #f3f7fc 0%, #f7f9fc 100%); }
.page-project .hx .eyebrow, .page-project .sec--faqs .eyebrow { background: #fff; }
.page-project .sec--plans .price-table, .page-project .sec--plans .pay--card { box-shadow: 0 24px 50px -36px rgba(6, 42, 86, 0.35); }
@media (max-width: 767.98px) {
  .page-project .blk { padding-top: 40px; padding-bottom: 40px; }
}

/* ==========================================================================
   Project amenities: a checkerboard of photo tiles and icon tiles
   ========================================================================== */
.page-project .am2 { background: #fff; }
.am2__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden; border-radius: 22px;
  box-shadow: 0 30px 60px -40px rgba(4, 34, 63, 0.45);
}
.am2__tile { position: relative; height: clamp(150px, 13vw, 190px); }
.am2__tile--photo { overflow: hidden; background: #0e1620; }
.am2__tile--photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.am2__tile--photo:hover img { transform: scale(1.07); }
.am2__tile--photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(2, 15, 34, 0.85) 100%); }
.am2__cap { position: absolute; left: 18px; right: 18px; bottom: 14px; z-index: 1; font-size: 15px; font-weight: 600; color: #fff; }
.am2__tile--icon {
  display: grid; align-content: center; justify-items: center; gap: 10px;
  padding: 16px; text-align: center; background: #f6f9fd;
  transition: background 0.35s;
}
.am2__tile--icon:hover { background: #eaf2fb; }
.am2__ico { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #06264d 0%, #020f22 100%); }
.am2__ico .am-grid__icon { display: contents; color: inherit; }
.am2__ico svg { width: 24px; height: 24px; }
.am2__tile--icon strong { font-size: 15px; font-weight: 600; color: #0e1620; }
.am2__tile--icon i { width: 28px; height: 2px; border-radius: 2px; background: #1f5fa8; }
@media (max-width: 767.98px) {
  .am2__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 18px; }
  .am2__tile { height: 140px; }
  /* keep the checkerboard on two columns */
  .am2__grid > :nth-child(1) { order: 1; } .am2__grid > :nth-child(2) { order: 2; } .am2__grid > :nth-child(4) { order: 3; } .am2__grid > :nth-child(3) { order: 4; } .am2__grid > :nth-child(6) { order: 5; } .am2__grid > :nth-child(5) { order: 6; } .am2__grid > :nth-child(7) { order: 7; } .am2__grid > :nth-child(8) { order: 8; }
  .am2__cap { left: 12px; bottom: 10px; font-size: 13.5px; }
  .am2__ico { width: 44px; height: 44px; }
  .am2__tile--icon strong { font-size: 13.5px; }
}

/* amenities: an open, edge-to-edge mosaic (no card frame) with a title and a
   short line on every tile */
.page-project .am2 { padding-bottom: 0; }
.page-project .am2 .sec__head { margin-bottom: clamp(28px, 3vw, 40px); }
.am2__grid { margin: 0 calc(50% - 50vw); border-radius: 0; box-shadow: none; gap: 0; }
.am2__tile { height: clamp(210px, 17vw, 260px); }
.am2__tile--icon { justify-items: start; align-content: center; gap: 12px; padding: clamp(22px, 2.6vw, 40px); text-align: left; background: #fff; border-bottom: 1px solid rgba(14, 22, 32, 0.06); }
.am2__grid > .am2__tile--icon:nth-child(odd) { background: #f6f9fd; }
.am2__tile--icon:hover { background: #eef4fb; }
.am2__ico { width: 52px; height: 52px; border-radius: 16px; }
.am2__tile--icon strong { font-size: 18px; letter-spacing: -0.01em; }
.am2__tile small { display: block; max-width: 280px; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.am2__tile--photo::after { background: linear-gradient(180deg, rgba(2, 15, 34, 0.05) 20%, rgba(2, 15, 34, 0.88) 100%); }
.am2__cap { left: clamp(20px, 2.4vw, 34px); right: clamp(20px, 2.4vw, 34px); bottom: clamp(18px, 2vw, 28px); display: grid; gap: 6px; }
.am2__cap strong { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: #fff; }
.am2__cap small { color: rgba(255, 255, 255, 0.82); max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.5s var(--ease), opacity 0.4s; }
.am2__tile--photo:hover .am2__cap small { max-height: 80px; opacity: 1; }
@media (hover: none) { .am2__cap small { max-height: 80px; opacity: 1; } }
@media (max-width: 767.98px) {
  .am2__tile { height: auto; min-height: 200px; }
  .am2__tile--photo { min-height: 200px; }
  .am2__tile--photo img { position: absolute; inset: 0; }
  .am2__tile--icon { padding: 20px 16px; }
  .am2__tile--icon strong, .am2__cap strong { font-size: 15.5px; }
  .am2__tile small { font-size: 12.5px; }
  .am2__ico { width: 42px; height: 42px; border-radius: 12px; }
}

/* key highlights: a soft sage-green ground, with a faint radial light, so it
   reads apart from the blue-tinted and warm sections around it */
.page-project .hx {
  background:
    radial-gradient(60% 80% at 85% 20%, rgba(255, 255, 255, 0.7), transparent 60%),
    linear-gradient(160deg, #e9f1ec 0%, #f2f7f3 55%, #e6efe9 100%);
}
.page-project .hx .hx__no { color: #2f6b4f; border-color: rgba(47, 107, 79, 0.3); background: #fff; }
.page-project .hx .hx__sico { color: #2f6b4f; background: #eef5f0; }

/* highlights icon strip: frosted glass with navy icon medallions */
.page-project .hx__strip {
  padding: 18px 12px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.6) 100%);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 1px 0 #fff, 0 30px 60px -30px rgba(4, 34, 63, 0.55);
}
.page-project .hx__strip li { gap: 9px; transition: transform 0.35s var(--ease); }
.page-project .hx__strip li:hover { transform: translateY(-4px); }
.page-project .hx__strip li + li { border-left-color: rgba(4, 34, 63, 0.1); }
.page-project .hx .hx__sico {
  width: 46px; height: 46px; border-radius: 50%;
  color: #fff;
  background: linear-gradient(140deg, #1f5fa8 0%, #06264d 60%, #020f22 100%);
  box-shadow: 0 10px 20px -10px rgba(4, 34, 63, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.page-project .hx__strip small { font-size: 11.5px; font-weight: 700; letter-spacing: 0.01em; color: #0e1620; }

/* features note: a navy card with a location tag and a white pill button */
.page-project .fx .fx__note {
  overflow: hidden;
  padding: 26px 26px 22px;
  border-radius: 20px;
  color: #fff;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(114, 184, 250, 0.22), transparent 55%),
    linear-gradient(145deg, #06264d 0%, #031630 100%);
  box-shadow: 0 34px 60px -26px rgba(2, 15, 34, 0.65);
}
.fx__note::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #72b8fa, #1f5fa8 60%, transparent); }
.fx__tag { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; padding: 5px 11px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #bfe0ff; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); }
.page-project .fx .fx__note p { margin-bottom: 18px; font-size: 15px; line-height: 1.55; color: #fff; }
.page-project .fx .fx__cta { gap: 12px; height: 44px; padding: 0 6px 0 18px; border-radius: 999px; color: #04223f; background: #fff; transition: background 0.3s; }
.page-project .fx .fx__cta:hover { background: #bfe0ff; }
.page-project .fx .fx__cta span { width: 32px; height: 32px; }
.page-project .hx .hx__sico .am-grid__icon, .page-project .hx .hx__sico svg { color: #fff; stroke: #fff; }
.page-project .hx .hx__sico .am-grid__icon { display: contents; }

/* features note: the same frosted-glass look as the highlights icon strip */
.page-project .fx .fx__note {
  color: #0e1620;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.6) 100%);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 1px 0 #fff, 0 30px 60px -30px rgba(4, 34, 63, 0.55);
}
.page-project .fx .fx__note::before { display: none; }
.page-project .fx .fx__tag { color: #fff; border: 0; background: linear-gradient(140deg, #1f5fa8 0%, #06264d 60%, #020f22 100%); box-shadow: 0 8px 18px -10px rgba(4, 34, 63, 0.8); }
.page-project .fx .fx__note p { color: #0e1620; font-weight: 700; }
.page-project .fx .fx__cta { color: #fff; background: linear-gradient(140deg, #1f5fa8 0%, #06264d 60%, #020f22 100%); box-shadow: 0 10px 20px -10px rgba(4, 34, 63, 0.8); }
.page-project .fx .fx__cta:hover { background: linear-gradient(140deg, #2a72c4 0%, #0a3566 60%, #031630 100%); }
.page-project .fx .fx__cta span { color: #04223f; background: #fff; }

/* key features: the same sage-green ground as key highlights */
.page-project .fx {
  background:
    radial-gradient(60% 80% at 15% 20%, rgba(255, 255, 255, 0.7), transparent 60%),
    linear-gradient(160deg, #e9f1ec 0%, #f2f7f3 55%, #e6efe9 100%);
}
.page-project .fx .fx__ico { background: linear-gradient(140deg, #1f5fa8 0%, #06264d 60%, #020f22 100%); }

/* WhatsApp button: a 56px disc with the logo dead centre */
.float-wa { width: 56px; justify-content: center; padding: 0; }
.float-wa > svg { display: block; flex: none; width: 28px; height: 28px; margin: 0; }

/* highlights icon strip on phones: smaller medallions, tighter labels, and the
   strip spans the photo width so all five fit without colliding */
@media (max-width: 575.98px) {
  .page-project .hx__strip { width: 94%; padding: 12px 4px; border-radius: 16px; }
  .page-project .hx__strip li { gap: 6px; padding: 0 2px; }
  .page-project .hx__strip li + li { border-left: 0; }
  .page-project .hx .hx__sico { width: 34px; height: 34px; }
  .page-project .hx .hx__sico svg { width: 16px; height: 16px; }
  .page-project .hx__strip small { padding: 0; font-size: 9.5px; line-height: 1.2; letter-spacing: 0; word-break: break-word; }
}
@media (max-width: 374.98px) {
  .page-project .hx .hx__sico { width: 30px; height: 30px; }
  .page-project .hx__strip small { font-size: 8.5px; }
}

/* ==========================================================================
   Team page: intro, founder feature, directors
   ========================================================================== */
/* --- intro: centred, words rise in one by one --- */
.tintro { position: relative; overflow: clip; padding-block: clamp(60px, 7vw, 110px); text-align: center; background: #fff; }
.tintro__glow { position: absolute; left: 50%; top: 50%; width: min(900px, 90vw); aspect-ratio: 2 / 1; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(114, 184, 250, 0.22), transparent); animation: tinGlow 8s ease-in-out infinite; pointer-events: none; }
@keyframes tinGlow { 50% { transform: translate(-50%, -50%) scale(1.15); opacity: 0.7; } }
.tintro__inner { position: relative; max-width: 860px; }
.tintro__eyebrow { margin-inline: auto; }
.tintro__title { margin: 6px 0 20px; font-size: clamp(30px, 3.8vw, 52px); line-height: 1.12; letter-spacing: -0.025em; color: #0e1620; }
.tintro__title em { font-style: normal; background: linear-gradient(90deg, #1f5fa8, #72b8fa, #1f5fa8); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: tinShine 5s linear infinite; }
.tintro__title em .tw { color: transparent; background: inherit; -webkit-background-clip: text; background-clip: text; }
@keyframes tinShine { to { background-position: -200% 0; } }
.tintro__lead { max-width: 680px; margin: 0 auto 26px; font-size: 17px; line-height: 1.75; color: var(--muted); }
.tintro__pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tintro__pills li { display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; color: #04223f; background: #f3f7fc; border: 1px solid rgba(31, 95, 168, 0.15); }
.tintro__pills span { width: 8px; height: 8px; border-radius: 50%; background: #1f5fa8; box-shadow: 0 0 0 4px rgba(31, 95, 168, 0.15); }
.tw { display: inline-block; opacity: 0; transform: translateY(0.6em) rotate(2deg); filter: blur(6px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), filter 0.7s var(--ease); transition-delay: calc(var(--w) * 70ms); }
.is-in .tw { opacity: 1; transform: none; filter: none; }
.tintro [data-tin] { opacity: 0; transform: translateY(18px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.tintro.is-in [data-tin] { opacity: 1; transform: none; }
.tintro .tintro__lead[data-tin] { transition-delay: 0.6s; }
.tintro .tintro__pills[data-tin] { transition-delay: 0.8s; }

/* --- founder: deep navy feature --- */
.tfounder { position: relative; overflow: clip; color: #fff; background: radial-gradient(70% 90% at 90% 10%, rgba(114, 184, 250, 0.16), transparent 60%), linear-gradient(135deg, #04223f 0%, #021226 100%); }
.tfounder__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.tfounder__art { position: relative; padding: 0 26px 26px 0; }
.tfounder__frame { position: absolute; inset: 26px 0 0 26px; border-radius: 26px; background: linear-gradient(140deg, #72b8fa 0%, #1f5fa8 100%); opacity: 0.85; }
.tfounder__photo { position: relative; margin: 0; overflow: hidden; border-radius: 26px; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8); }
.tfounder__photo img { display: block; width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; object-position: 62% center; transition: transform 1.2s var(--ease); }
.tfounder__art:hover .tfounder__photo img { transform: scale(1.04); }
.tfounder__badge { position: absolute; left: -16px; bottom: 56px; display: grid; gap: 2px; padding: 14px 20px; border-radius: 16px; color: #04223f; background: #fff; box-shadow: 0 20px 44px -20px rgba(0, 0, 0, 0.6); animation: tfFloat 5s ease-in-out infinite; }
@keyframes tfFloat { 50% { transform: translateY(-8px); } }
.tfounder__badge strong { font-size: 18px; }
.tfounder__badge span { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.tfounder__eyebrow { display: inline-flex; padding: 6px 14px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #04223f; background: #bfe0ff; }
.tfounder__name { margin: 16px 0 6px; font-size: clamp(32px, 3.6vw, 50px); letter-spacing: -0.02em; color: #fff; }
.tfounder__role { margin: 0 0 18px; font-size: 15px; color: #8fc2f5; font-weight: 600; }
.tfounder__bio { margin: 0 0 22px; max-width: 600px; font-size: 16px; line-height: 1.8; color: rgba(255, 255, 255, 0.78); }
.tfounder__quote { position: relative; margin: 0 0 26px; padding: 20px 22px 20px 60px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.06); font-size: 18px; font-weight: 600; line-height: 1.5; color: #fff; }
.tfounder__quote svg { position: absolute; left: 20px; top: 22px; width: 26px; fill: #72b8fa; }
.tfounder__facts { list-style: none; margin: 0; padding: 18px 0 0; display: flex; flex-wrap: wrap; gap: 14px 40px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.tfounder__facts li { display: grid; gap: 2px; }
.tfounder__facts strong { font-size: 20px; color: #fff; }
.tfounder__facts span { font-size: 12.5px; color: rgba(255, 255, 255, 0.6); }

/* --- directors: filter chips and cards --- */
.tmem { background: #f6f8fb; }
.tmem__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: clamp(26px, 3vw, 40px); }
.tmem__title { margin: 6px 0 10px; font-size: clamp(28px, 3vw, 42px); letter-spacing: -0.02em; color: #0e1620; }
.tmem__title em { font-style: normal; color: #1f5fa8; }
.tmem__lead { margin: 0; max-width: 520px; color: var(--muted); }
.tmem__filters { display: flex; flex-wrap: wrap; gap: 8px; }
.tmem__chip { height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(14, 22, 32, 0.12); background: #fff; font-size: 14px; font-weight: 600; color: #3d4756; transition: background 0.3s, color 0.3s, border-color 0.3s; }
.tmem__chip:hover { border-color: #1f5fa8; color: #1f5fa8; }
.tmem__chip.is-active { color: #fff; background: #04223f; border-color: #04223f; }
.tmem__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 28px); }
.tmem__card { overflow: hidden; border-radius: 22px; background: #fff; border: 1px solid rgba(14, 22, 32, 0.06); box-shadow: 0 24px 50px -36px rgba(4, 34, 63, 0.45); transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.tmem__card:hover { transform: translateY(-8px); box-shadow: 0 36px 70px -36px rgba(4, 34, 63, 0.55); }
.tmem__card.is-hidden { display: none; }
.tmem__photo { position: relative; margin: 0; overflow: hidden; }
.tmem__photo img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center 20%; transition: transform 0.9s var(--ease); }
.tmem__card:hover .tmem__photo img { transform: scale(1.06); }
.tmem__tag { position: absolute; left: 14px; top: 14px; padding: 5px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #04223f; background: rgba(255, 255, 255, 0.92); }
.tmem__body { padding: 20px 22px 22px; }
.tmem__name { margin: 0 0 4px; font-size: 19px; color: #0e1620; }
.tmem__role { margin: 0 0 12px; font-size: 13.5px; font-weight: 600; color: #1f5fa8; }
.tmem__bio { margin: 0 0 18px; font-size: 14px; line-height: 1.65; color: var(--muted); }
.tmem__links { display: flex; gap: 8px; padding-top: 14px; border-top: 1px solid rgba(14, 22, 32, 0.07); }
.tmem__links a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #04223f; background: #eef4fb; transition: background 0.3s, color 0.3s; }
.tmem__links a:hover { color: #fff; background: #04223f; }

@media (max-width: 991.98px) {
  .tfounder__grid { grid-template-columns: minmax(0, 1fr); }
  .tfounder__art { max-width: 520px; }
  .tmem__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .tintro__title { font-size: 28px; }
  .tintro__lead { font-size: 15.5px; }
  .tfounder__badge { left: 10px; bottom: 40px; }
  .tfounder__quote { font-size: 16px; padding: 18px 18px 18px 52px; }
  .tmem__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .tw, .tintro [data-tin] { opacity: 1; transform: none; filter: none; }
  .tintro__glow, .tfounder__badge, .tintro__title em { animation: none; }
}

/* ==========================================================================
   Team page, pass 2
   ========================================================================== */
/* --- statement intro: large centred text that inks in as you scroll, with
   round team photos set inline, over a faint building sketch --- */
.tstate { position: relative; overflow: clip; padding-block: clamp(70px, 8vw, 120px); text-align: center; background: linear-gradient(180deg, #ffffff 0%, #f6f9fd 100%); }
.tstate__sketch { position: absolute; inset: 0; background: url("../assets/images/building-sketch.94e2da5ceecd.png") center bottom / min(1200px, 120%) auto no-repeat; opacity: 0.07; pointer-events: none; }
.tstate__inner { position: relative; max-width: 1080px; }
.tstate__label { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 22px; font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #1f5fa8; }
.tstate__label::before, .tstate__label::after { content: ''; width: 34px; height: 1px; background: currentColor; opacity: 0.6; }
.tstate__text { margin: 0 0 34px; font-size: clamp(26px, 3.4vw, 48px); font-weight: 600; line-height: 1.32; letter-spacing: -0.02em; }
.tstate__text .sw { color: #c9d3df; transition: color 0.35s ease; }
.tstate__text .sw.on { color: #0e1620; }
.tst2__chip { display: inline-block; width: 1.9em; height: 1em; margin: 0 0.12em; overflow: hidden; vertical-align: -0.08em; border-radius: 999px; box-shadow: 0 6px 16px -8px rgba(4, 34, 63, 0.5); transform: scale(0.6); opacity: 0.3; transition: transform 0.5s var(--ease), opacity 0.5s; }
.tst2__chip.on { transform: none; opacity: 1; }
.tst2__chip img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
@media (max-width: 575.98px) { .tstate__text { font-size: 24px; line-height: 1.4; } }

/* --- founder: architectural shapes --- */
.tfounder { isolation: isolate; }
.tfounder__shape { position: absolute; z-index: -1; pointer-events: none; }
.tfounder__shape--a { right: -120px; top: -160px; width: 520px; height: 520px; border-radius: 50%; border: 1px solid rgba(114, 184, 250, 0.18); box-shadow: inset 0 0 0 60px rgba(114, 184, 250, 0.03), 0 0 0 60px rgba(114, 184, 250, 0.03); }
.tfounder__shape--b { left: 0; bottom: 0; width: 46%; height: 45%; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 22px); -webkit-mask-image: linear-gradient(45deg, #000, transparent 75%); mask-image: linear-gradient(45deg, #000, transparent 75%); }
.tfounder__grid { position: relative; }
.tfounder__art { padding: 30px 30px 30px 0; }
/* arch-topped portrait */
.tfounder__photo, .tfounder__frame { border-radius: 999px 999px 28px 28px; }
.tfounder__photo img { aspect-ratio: 4 / 5; object-position: 62% 30%; }
.tfounder__frame { inset: 30px 0 0 30px; background: transparent; border: 2px solid rgba(114, 184, 250, 0.55); opacity: 1; }
.tfounder__rings { position: absolute; left: -60px; top: 40%; width: 220px; height: 220px; border-radius: 50%; border: 1px dashed rgba(114, 184, 250, 0.35); animation: tfSpin 40s linear infinite; }
.tfounder__rings::after { content: ''; position: absolute; inset: 30px; border-radius: 50%; border: 1px solid rgba(114, 184, 250, 0.2); }
@keyframes tfSpin { to { transform: rotate(360deg); } }
.tfounder__dots { position: absolute; right: -6px; top: -10px; width: 120px; height: 120px; background: radial-gradient(rgba(191, 224, 255, 0.55) 1.4px, transparent 1.6px) 0 0 / 16px 16px; }
.tfounder__word { position: absolute; left: -54px; bottom: 30px; font-size: 64px; font-weight: 800; letter-spacing: 0.08em; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(191, 224, 255, 0.22); writing-mode: vertical-rl; transform: rotate(180deg); pointer-events: none; }
.tfounder__badge { left: auto; right: 0; bottom: 70px; border-radius: 18px 18px 18px 4px; }
/* facts as tiles */
.tfounder__facts { gap: 12px; padding: 0; border-top: 0; }
.tfounder__facts li { flex: 1 1 140px; padding: 16px 18px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.12); background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)); }
.tfounder__facts strong { color: #bfe0ff; }
.tfounder__name { position: relative; }
.tfounder__name::after { content: ''; display: block; width: 70px; height: 3px; margin-top: 14px; border-radius: 3px; background: linear-gradient(90deg, #72b8fa, transparent); }
@media (max-width: 991.98px) {
  .tfounder__rings, .tfounder__word { display: none; }
  .tfounder__art { padding: 20px 20px 20px 0; margin-inline: auto; }
}
@media (max-width: 575.98px) {
  .tfounder__badge { right: 8px; bottom: 50px; }
  .tfounder__shape--a { width: 320px; height: 320px; }
}

/* ==========================================================================
   Team page: founder card - photo left behind a curved gold edge, navy panel
   with serif name, gold accents, a faint skyline on the far right
   ========================================================================== */
.fcard-sec { background: linear-gradient(180deg, #f6f9fd 0%, #ffffff 100%); }
.fcard {
  --gold: #c9a46a;
  --gold-2: #e9c98a;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  min-height: 430px;
  overflow: hidden;
  isolation: isolate;
  border-radius: 26px;
  color: #fff;
  background: radial-gradient(70% 90% at 70% 10%, rgba(40, 80, 140, 0.35), transparent 60%), linear-gradient(120deg, #0a1f3c 0%, #071830 50%, #0a2342 100%);
  box-shadow: 0 50px 90px -50px rgba(2, 12, 28, 0.75);
}
.fcard__media { position: relative; z-index: 1; overflow: hidden; clip-path: ellipse(100% 120% at 0% 50%); }
.fcard__media img { width: 100%; height: 100%; object-fit: cover; object-position: 55% center; transition: transform 1.4s var(--ease); }
.fcard:hover .fcard__media img { transform: scale(1.04); }
.fcard__arc { position: absolute; z-index: 2; top: 0; bottom: 0; left: calc(42% - 8%); width: 8%; height: 100%; pointer-events: none; }
.fcard__city {
  position: absolute; z-index: -1; right: 0; top: 0; bottom: 0; width: 34%;
  background: url("../assets/images/truegrowth-realty2.264e80c59247.webp") 70% center / cover no-repeat;
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 60%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 60%);
}
.fcard__body { position: relative; z-index: 2; padding: clamp(30px, 3.4vw, 48px) clamp(26px, 3vw, 44px) clamp(28px, 3vw, 40px) clamp(30px, 3.2vw, 46px); max-width: 640px; }
.fcard__eyebrow { display: inline-flex; align-items: center; gap: 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-2); }
.fcard__eyebrow::after { content: ''; width: 64px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); }
.fcard__name { margin: 12px 0 6px; font-family: var(--font-display); font-size: clamp(34px, 3.6vw, 52px); font-weight: 500; line-height: 1.05; letter-spacing: 0; color: #fff; }
.fcard__role { margin: 0 0 18px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #9cc4f0; }
.fcard__bio { margin: 0 0 22px; font-size: 15px; line-height: 1.75; color: rgba(255, 255, 255, 0.82); }
.fcard__quote {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 18px;
  margin: 0 0 22px; padding: 16px 22px; max-width: 460px;
  border-radius: 12px; border: 1px solid rgba(201, 164, 106, 0.28);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
}
.fcard__qmark { grid-row: span 2; font-family: var(--font-display); font-size: 56px; line-height: 0.6; color: var(--gold); }
.fcard__qtext { font-family: var(--font-display); font-size: clamp(17px, 1.5vw, 21px); font-style: italic; line-height: 1.4; color: #f3f6fb; }
.fcard__qline { justify-self: end; width: 46px; height: 1px; margin-top: 6px; background: var(--gold); }
.fcard__facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fcard__facts li { display: flex; align-items: center; gap: 12px; padding: 14px 14px; border-radius: 12px; border: 1px solid rgba(201, 164, 106, 0.28); background: rgba(255, 255, 255, 0.03); }
.fcard__ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(201, 164, 106, 0.55); color: var(--gold-2); }
.fcard__facts strong { display: block; font-size: 17px; font-weight: 600; color: #fff; }
.fcard__facts small { display: block; font-size: 11.5px; line-height: 1.35; color: rgba(255, 255, 255, 0.6); }

@media (max-width: 991.98px) {
  .fcard { grid-template-columns: minmax(0, 1fr); }
  .fcard__media { height: 360px; clip-path: ellipse(120% 100% at 50% 0%); }
  .fcard__arc { display: none; }
  .fcard__city { width: 100%; top: auto; height: 45%; opacity: 0.25; -webkit-mask-image: linear-gradient(0deg, #000, transparent); mask-image: linear-gradient(0deg, #000, transparent); }
}
@media (max-width: 575.98px) {
  .fcard__media { height: 300px; }
  .fcard__body { padding: 24px 18px 22px; }
  .fcard__facts { grid-template-columns: minmax(0, 1fr); }
  .fcard__eyebrow::after { width: 36px; }
}
/* gold rim that follows the photo's curved edge exactly */
.fcard__arc { display: none; }
.fcard::before {
  content: ''; position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; width: calc(42% + 3px);
  clip-path: ellipse(100% 120% at 0% 50%);
  background: linear-gradient(180deg, rgba(233, 201, 138, 0) 0%, #e9c98a 30%, #c9a46a 75%, rgba(201, 164, 106, 0) 100%);
}
.fcard__city { width: 26%; opacity: 0.5; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 70%); mask-image: linear-gradient(90deg, transparent 0%, #000 70%); }
.fcard__body { max-width: 600px; }
.fcard__facts li { padding: 12px; gap: 10px; }
.fcard__ico { width: 36px; height: 36px; }
.fcard__facts strong { font-size: 16px; white-space: nowrap; }
.fcard__facts small { font-size: 11px; }
@media (max-width: 991.98px) { .fcard::before { display: none; } }
@media (max-width: 991.98px) { .fcard__city { width: 100%; height: 40%; top: auto; opacity: 0.22; -webkit-mask-image: linear-gradient(0deg, #000, transparent); mask-image: linear-gradient(0deg, #000, transparent); } }

/* ==========================================================================
   Team page: directors - light glass section with faint skylines at the
   edges, serif heading with a gold accent, frosted cards with gold details
   ========================================================================== */
.tmem { position: relative; overflow: clip; isolation: isolate; background: linear-gradient(180deg, #f3f7fc 0%, #eaf1f9 100%); }
.tmem__city { position: absolute; z-index: -1; top: 0; bottom: 0; width: 22%; background: url("../assets/images/truegrowth-realty2.264e80c59247.webp") center / cover no-repeat; opacity: 0.22; filter: saturate(0.7); pointer-events: none; }
.tmem__city--l { left: 0; -webkit-mask-image: linear-gradient(90deg, #000, transparent); mask-image: linear-gradient(90deg, #000, transparent); background-position: 20% center; }
.tmem__city--r { right: 0; -webkit-mask-image: linear-gradient(270deg, #000, transparent); mask-image: linear-gradient(270deg, #000, transparent); background-position: 80% center; }
.tmem__eyebrow { display: inline-flex; align-items: center; gap: 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: #b8904f; }
.tmem__eyebrow::after { content: ''; width: 80px; height: 1px; background: linear-gradient(90deg, #c9a46a, transparent); }
.tmem .tmem__title { margin: 10px 0 10px; font-family: var(--font-display); font-weight: 500; font-size: clamp(32px, 3.6vw, 50px); letter-spacing: -0.01em; color: #0b1f3a; }
.tmem .tmem__title em { color: #b8904f; font-style: normal; }
.tmem .tmem__lead { color: #5a6575; font-size: 15.5px; }
/* chips in one glass pill */
.tmem .tmem__filters { gap: 0; padding: 5px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 12px 30px -20px rgba(4, 34, 63, 0.45); }
.tmem .tmem__chip { height: 40px; border: 1px solid transparent; background: transparent; color: #0b1f3a; font-size: 13.5px; }
.tmem .tmem__chip + .tmem__chip { position: relative; }
.tmem .tmem__chip:hover { color: #1f5fa8; border-color: transparent; }
.tmem .tmem__chip.is-active { color: #fff; background: #0b1f3a; border-color: #c9a46a; }
/* cards */
.tmem .tmem__card {
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 60px -36px rgba(4, 34, 63, 0.5);
}
.tmem .tmem__photo img { aspect-ratio: 16 / 11; object-position: center 25%; }
.tmem .tmem__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(11, 31, 58, 0.25) 100%); pointer-events: none; }
.tmem__slash { position: absolute; z-index: 1; left: -10%; bottom: 18%; width: 60%; height: 1.5px; background: linear-gradient(90deg, transparent, #e9c98a 40%, #c9a46a 70%, transparent); transform: rotate(-24deg); transform-origin: left center; opacity: 0.9; pointer-events: none; }
.tmem .tmem__tag { z-index: 2; left: 14px; top: 14px; padding: 6px 13px; font-size: 10.5px; letter-spacing: 0.1em; color: #fff; background: #0b1f3a; border: 1px solid rgba(201, 164, 106, 0.6); }
.tmem .tmem__body { padding: 20px 22px 18px; }
.tmem .tmem__name { margin: 0 0 6px; font-family: var(--font-display); font-weight: 600; font-size: 22px; color: #0b1f3a; }
.tmem .tmem__role { margin: 0 0 10px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #0b1f3a; }
.tmem__rule { display: block; width: 34px; height: 2px; margin-bottom: 14px; border-radius: 2px; background: #c9a46a; }
.tmem .tmem__bio { font-size: 13.5px; line-height: 1.65; color: #5a6575; }
.tmem .tmem__links { align-items: center; border-top: 0; padding-top: 4px; }
.tmem .tmem__links a { width: 36px; height: 36px; color: #0b1f3a; background: #e9eff7; }
.tmem .tmem__links a:hover { color: #fff; background: #0b1f3a; }
.tmem .tmem__links .tmem__go { margin-left: auto; width: 40px; height: 40px; color: #fff; background: linear-gradient(140deg, #e3c07f 0%, #c9a46a 55%, #a8803f 100%); box-shadow: 0 8px 18px -8px rgba(168, 128, 63, 0.7); }
.tmem .tmem__links .tmem__go:hover { color: #fff; background: linear-gradient(140deg, #c9a46a, #8c6a31); }
@media (max-width: 767.98px) {
  .tmem__city { width: 40%; opacity: 0.14; }
  .tmem .tmem__filters { width: auto; }
}
.tmem__slash { bottom: 2%; left: -6%; width: 46%; transform: rotate(-30deg); }

/* team statement: smaller and lighter, text only */
.tstate__text { font-size: clamp(20px, 2.2vw, 30px); font-weight: 400; line-height: 1.55; letter-spacing: -0.01em; max-width: 880px; margin-inline: auto; }
@media (max-width: 575.98px) { .tstate__text { font-size: 19px; } }

/* directors as alternating rows: photo / text, then text / photo */
.tmem .tmem__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 2.6vw, 34px); max-width: 1100px; margin-inline: auto; }
.tmem .tmem__card { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: stretch; }
.tmem .tmem__card:nth-child(even) .tmem__photo { order: 2; }
.tmem .tmem__photo img { height: 100%; min-height: 320px; aspect-ratio: auto; object-position: center 25%; }
.tmem .tmem__body { display: flex; flex-direction: column; justify-content: center; padding: clamp(26px, 3vw, 44px); }
.tmem .tmem__name { font-size: clamp(24px, 2.2vw, 30px); }
.tmem .tmem__bio { font-size: 15px; max-width: 520px; }
.tmem .tmem__links { margin-top: 6px; max-width: 520px; }
.tmem .tmem__card:hover { transform: translateY(-4px); }
.tmem .tmem__card:nth-child(even) .tmem__tag { left: auto; right: 14px; }
@media (max-width: 767.98px) {
  .tmem .tmem__card { grid-template-columns: minmax(0, 1fr); }
  .tmem .tmem__card:nth-child(even) .tmem__photo { order: 0; }
  .tmem .tmem__photo img { min-height: 0; aspect-ratio: 4 / 3; }
  .tmem .tmem__card:nth-child(even) .tmem__tag { right: auto; left: 14px; }
}
.tmem .tmem__card { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.tmem .tmem__photo { height: 340px; }
.tmem .tmem__photo img { min-height: 0; height: 100%; object-position: center 22%; }
@media (max-width: 767.98px) { .tmem .tmem__photo { height: 300px; } }
.tmem .tmem__card:nth-child(even) { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
@media (max-width: 767.98px) { .tmem .tmem__card:nth-child(even) { grid-template-columns: minmax(0, 1fr); } }

/* directors blend into the section: no card, photos dissolve into the
   background with a smoky fade on both sides */
.tmem .tmem__card,
.tmem .tmem__card:hover {
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  transform: none;
  overflow: visible;
}
.tmem .tmem__grid { gap: clamp(10px, 2vw, 24px); }
.tmem .tmem__photo { overflow: hidden; border-radius: 0; height: 380px; }
.tmem .tmem__photo img {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 62%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 14%, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 62%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 14%, #000 82%, transparent 100%);
  mask-composite: intersect;
}
.tmem .tmem__card:nth-child(even) .tmem__photo img {
  -webkit-mask-image: linear-gradient(270deg, transparent 0%, #000 22%, #000 62%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 14%, #000 82%, transparent 100%);
  mask-image: linear-gradient(270deg, transparent 0%, #000 22%, #000 62%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 14%, #000 82%, transparent 100%);
}
/* a soft haze behind each portrait so it melts into the page */
.tmem .tmem__photo::before {
  content: ''; position: absolute; inset: 10% 8%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(201, 164, 106, 0.22), rgba(114, 184, 250, 0.12) 60%, transparent);
  filter: blur(30px);
}
.tmem .tmem__photo { isolation: isolate; }
.tmem .tmem__photo::after, .tmem__slash { display: none; }
.tmem .tmem__tag { top: 26px; left: 22%; }
.tmem .tmem__card:nth-child(even) .tmem__tag { left: auto; right: 22%; }
.tmem .tmem__body { padding: clamp(20px, 3vw, 40px) clamp(10px, 2vw, 30px); }
@media (max-width: 767.98px) {
  .tmem .tmem__photo { height: 300px; }
  .tmem .tmem__photo img, .tmem .tmem__card:nth-child(even) .tmem__photo img {
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
  }
  .tmem .tmem__tag, .tmem .tmem__card:nth-child(even) .tmem__tag { left: 14px; right: auto; top: 14px; }
  .tmem .tmem__body { padding: 8px 4px 20px; }
}

/* ==========================================================================
   Team page: nothing boxed - the founder fills its section edge to edge and
   the career points sit as open columns
   ========================================================================== */
/* founder: the navy ground is the section itself */
.fcard-sec { padding: 0; background: linear-gradient(120deg, #0a1f3c 0%, #071830 50%, #0a2342 100%); }
.fcard-sec > .container-xl { max-width: none; padding: 0; }
.fcard { border-radius: 0; box-shadow: none; min-height: 520px; background: radial-gradient(60% 90% at 70% 10%, rgba(40, 80, 140, 0.35), transparent 60%); }
.fcard::before { display: none; }
.fcard__media { clip-path: none; }
.fcard__media img { -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent 100%); mask-image: linear-gradient(90deg, #000 55%, transparent 100%); }
.fcard__body { padding-block: clamp(50px, 6vw, 90px); max-width: 680px; }
.fcard__quote { border: 0; border-left: 2px solid #c9a46a; border-radius: 0; background: none; padding: 4px 0 4px 22px; }
.fcard__qline { display: none; }
.fcard__facts li { border: 0; background: none; padding: 0; }
.fcard__facts { gap: 26px; padding-top: 22px; border-top: 1px solid rgba(201, 164, 106, 0.25); }
@media (max-width: 991.98px) {
  .fcard__media img { -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 60%, transparent 100%); }
  .fcard__body { padding: 10px 20px 50px; }
  .fcard__facts { gap: 16px; }
}

/* directors: plain round icons, no tinted chips */
.tmem .tmem__links a { background: none; border: 1px solid rgba(11, 31, 58, 0.18); }

/* career band: open columns with thin dividers */
.pband__grid li,
.pband__item {
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.pband__grid { gap: 0 !important; }
.pband__item + .pband__item { border-left: 1px solid rgba(255, 255, 255, 0.18) !important; }
@media (max-width: 767.98px) {
  .pband__item + .pband__item { border-left: 0 !important; border-top: 1px solid rgba(255, 255, 255, 0.18) !important; }
}
.pband__item:nth-child(2) { border-left: 1px solid rgba(255, 255, 255, 0.18) !important; }
.pband__item { padding-inline: clamp(18px, 2.4vw, 34px) !important; }
.pband__item:hover { transform: none !important; }
@media (max-width: 767.98px) { .pband__item:nth-child(2) { border-left: 0 !important; } }

/* founder photo: curved right edge with the gold arc, restored */
.fcard__media { clip-path: ellipse(100% 120% at 0% 50%); }
.fcard__media img { -webkit-mask-image: none; mask-image: none; }
.fcard::before { display: block; }
@media (max-width: 991.98px) {
  .fcard__media { clip-path: ellipse(120% 100% at 50% 0%); }
  .fcard::before { display: none; }
}

/* ==========================================================================
   Directors, clean architecture: arched portraits with a gold outline offset
   behind them, crisp edges, no haze - still no card box
   ========================================================================== */
.tmem .tmem__photo img,
.tmem .tmem__card:nth-child(even) .tmem__photo img { -webkit-mask-image: none; mask-image: none; }
.tmem .tmem__photo::before { display: none; }
.tmem .tmem__card { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); align-items: center; gap: clamp(30px, 4vw, 64px); padding-block: clamp(18px, 2vw, 28px); }
.tmem .tmem__card:nth-child(even) { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); }
.tmem .tmem__card + .tmem__card { border-top: 1px solid rgba(11, 31, 58, 0.08); }
.tmem .tmem__photo {
  position: relative;
  overflow: visible;
  height: auto;
  justify-self: center;
  width: min(100%, 320px);
}
.tmem .tmem__photo img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 22%;
  border-radius: 999px 999px 18px 18px;
  box-shadow: 0 30px 50px -34px rgba(11, 31, 58, 0.55);
}
/* the gold outline, offset behind the arch */
.tmem .tmem__photo::after {
  display: block;
  content: '';
  position: absolute;
  z-index: 0;
  inset: 16px -16px -16px 16px;
  border: 1.5px solid #c9a46a;
  border-radius: 999px 999px 18px 18px;
  background: none;
}
.tmem .tmem__card:nth-child(even) .tmem__photo::after { inset: 16px 16px -16px -16px; }
.tmem .tmem__tag { z-index: 2; top: auto; bottom: 18px; left: 50%; right: auto; transform: translateX(-50%); }
.tmem .tmem__card:nth-child(even) .tmem__tag { left: 50%; right: auto; }
.tmem .tmem__card:hover .tmem__photo img { transform: none; }
.tmem .tmem__body { padding: 0; max-width: 560px; }
.tmem .tmem__card:nth-child(even) .tmem__body { justify-self: end; }
/* a slim gold rule on the text's outer edge ties each row together */
.tmem .tmem__body { position: relative; padding-left: 28px; }
.tmem .tmem__body::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, #c9a46a, rgba(201, 164, 106, 0)); }
@media (max-width: 767.98px) {
  .tmem .tmem__card, .tmem .tmem__card:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .tmem .tmem__photo { width: min(78%, 280px); }
  .tmem .tmem__photo img { height: auto; }
  .tmem .tmem__card:nth-child(even) .tmem__photo::after { inset: 16px -16px -16px 16px; }
  .tmem .tmem__body { padding-left: 20px; }
}

/* ==========================================================================
   Directors as full-width split bands: the photo fills half the screen edge
   to edge, the text takes the other half, sides alternating. No frames.
   ========================================================================== */
.tmem .tmem__grid { max-width: none; margin: 0 calc(50% - 50vw); gap: 0; }
.tmem .tmem__card,
.tmem .tmem__card:nth-child(even) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  padding: 0;
  align-items: stretch;
  border-top: 0;
}
.tmem .tmem__card:nth-child(even) .tmem__photo { order: 2; }
.tmem .tmem__photo { width: 100%; height: clamp(380px, 34vw, 500px); justify-self: stretch; overflow: hidden; }
.tmem .tmem__photo::after { display: none; }
.tmem .tmem__photo img { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; object-position: center 22%; transition: transform 1.2s var(--ease); }
.tmem .tmem__card:hover .tmem__photo img { transform: scale(1.04); }
.tmem .tmem__tag { top: 24px; bottom: auto; left: 24px; right: auto; transform: none; }
.tmem .tmem__card:nth-child(even) .tmem__tag { left: auto; right: 24px; }
.tmem .tmem__body,
.tmem .tmem__card:nth-child(even) .tmem__body {
  justify-self: stretch;
  max-width: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(36px, 5vw, 80px) clamp(28px, 6vw, 110px);
  background: #fff;
}
.tmem .tmem__card:nth-child(even) .tmem__body { background: #f4f7fb; }
.tmem .tmem__body::before { display: none; }
.tmem .tmem__bio { max-width: 520px; }
.tmem .tmem__links { max-width: 520px; }
@media (max-width: 767.98px) {
  .tmem .tmem__card, .tmem .tmem__card:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  .tmem .tmem__card:nth-child(even) .tmem__photo { order: 0; }
  .tmem .tmem__photo { height: 320px; width: 100%; }
  .tmem .tmem__card:nth-child(even) .tmem__tag { right: auto; left: 16px; }
  .tmem .tmem__tag { left: 16px; top: 16px; }
  .tmem .tmem__body, .tmem .tmem__card:nth-child(even) .tmem__body { padding: 28px 20px 36px; }
}

/* directors heading in the site theme: centred, pill label, sans heading in
   navy with the accent words in brand blue */
.tmem .tmem__head { display: block; max-width: 720px; margin: 0 auto clamp(30px, 3.4vw, 46px); text-align: center; }
.tmem .tmem__head .eyebrow { margin-inline: auto; }
.tmem .tmem__title { font-family: var(--font-head); font-weight: 600; font-size: clamp(28px, 3vw, 42px); letter-spacing: -0.02em; color: #0e1620; }
.tmem .tmem__title em { color: #1f5fa8; }
.tmem .tmem__lead { margin-inline: auto; }

/* team statement: smaller type, room for a fuller paragraph */
.tstate__text { font-size: clamp(17px, 1.55vw, 22px); line-height: 1.75; max-width: 940px; margin-bottom: 0; }
@media (max-width: 575.98px) { .tstate__text { font-size: 16.5px; } }

/* ==========================================================================
   Directors: arch-topped portraits in a row. On hover a navy details panel
   slides out beside the photo; the photo itself never resizes or crops.
   ========================================================================== */
.tmem { --pw: clamp(240px, 21vw, 300px); --dw: clamp(250px, 24vw, 340px); --ph: calc(var(--pw) * 1.42); }
.tmem .tmem__grid {
  display: flex;
  justify-content: center;
  gap: 22px;
  max-width: none;
  height: auto;
  margin: 0;
  padding: 10px 0 20px;
}
.tmem .tmem__card,
.tmem .tmem__card:nth-child(even) {
  position: relative;
  display: flex;
  flex: none;
  height: var(--ph);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
  transform: none;
}
.tmem .tmem__card:hover { transform: none; }
/* the portrait */
.tmem .tmem__card .tmem__photo,
.tmem .tmem__card:nth-child(even) .tmem__photo {
  position: relative;
  z-index: 2;
  order: 0;
  flex: none;
  width: var(--pw);
  height: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: 999px 999px 24px 24px;
  box-shadow: 0 30px 60px -32px rgba(11, 31, 58, 0.6);
  transition: border-radius 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.tmem .tmem__card .tmem__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; border-radius: 0; transition: transform 1.1s var(--ease); }
.tmem .tmem__card:hover .tmem__photo img { transform: scale(1.05); }
.tmem .tmem__card .tmem__photo::before { display: none; }
.tmem .tmem__card .tmem__photo::after { display: block; content: ''; position: absolute; inset: 0; border: 0; border-radius: 0; background: linear-gradient(180deg, transparent 52%, rgba(4, 18, 38, 0.82) 100%); }
/* thin gold arch traced just inside the photo */
.tmem .tmem__card .tmem__photo { outline: 1.5px solid rgba(201, 164, 106, 0.0); }
.tmem .tmem__card .tmem__tag,
.tmem .tmem__card:nth-child(even) .tmem__tag { z-index: 3; top: 26px; left: 50%; right: auto; bottom: auto; transform: translateX(-50%); }
.tmem__cap { position: absolute; z-index: 3; left: 16px; right: 16px; bottom: 22px; display: grid; gap: 6px; text-align: center; color: #fff; }
.tmem__cap strong { font-family: var(--font-display); font-size: 21px; font-weight: 600; }
.tmem__cap span { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #e9c98a; }
.tmem__cap::before { content: ''; justify-self: center; width: 46px; height: 2px; margin-bottom: 4px; border-radius: 2px; background: #c9a46a; }

/* the details panel, tucked behind the portrait until hover */
.tmem .tmem__card .tmem__body,
.tmem .tmem__card:nth-child(even) .tmem__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: none;
  width: 0;
  max-width: none;
  height: 88%;
  align-self: center;
  margin-left: -24px;
  padding: 0;
  overflow: hidden;
  text-align: left;
  border-radius: 0 26px 26px 0;
  background: radial-gradient(120% 80% at 100% 0%, rgba(114, 184, 250, 0.18), transparent 60%), linear-gradient(150deg, #0d2747 0%, #071830 100%);
  box-shadow: 0 30px 60px -32px rgba(11, 31, 58, 0.6);
  transform: none;
  transition: width 0.75s cubic-bezier(.2, .8, .2, 1);
}
.tmem .tmem__card .tmem__body::before { display: block; content: ''; position: absolute; left: 24px; top: 26px; bottom: 26px; width: 1.5px; inset: 26px auto 26px 24px; border-radius: 2px; background: linear-gradient(180deg, transparent, #c9a46a, transparent); clip-path: none; backdrop-filter: none; }
.tmem .tmem__card .tmem__body::after { display: none; }
.tmem .tmem__card .tmem__body > * { width: calc(var(--dw) - 24px); padding-left: 52px; padding-right: 30px; opacity: 0; transform: translateX(-14px); transition: opacity 0.4s, transform 0.5s var(--ease); }
.tmem .tmem__card:hover .tmem__body { width: var(--dw); }
.tmem .tmem__card:hover .tmem__body > * { opacity: 1; transform: none; transition-delay: 0.25s; }
.tmem .tmem__card .tmem__name { margin: 0 0 6px; font-size: 22px; color: #fff; white-space: normal; }
.tmem .tmem__card .tmem__role { margin: 0 0 10px; font-size: 10.5px; color: #e9c98a; }
.tmem .tmem__card .tmem__rule { margin: 0 0 14px 52px; width: 34px; padding: 0; }
.tmem .tmem__card .tmem__bio { margin: 0 0 18px; max-width: none; font-size: 13.5px; line-height: 1.65; color: rgba(255, 255, 255, 0.8); }
.tmem .tmem__card .tmem__links { justify-content: flex-start; gap: 8px; margin: 0; max-width: none; padding-top: 0; border: 0; }
.tmem .tmem__card .tmem__links a { color: #fff; border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.06); }
.tmem .tmem__card .tmem__links a:hover { color: #0b1f3a; background: #fff; }
.tmem .tmem__card .tmem__links .tmem__go { margin-left: auto; color: #fff; border: 0; background: linear-gradient(140deg, #e3c07f 0%, #c9a46a 55%, #a8803f 100%); }
.tmem .tmem__card:hover .tmem__photo { border-radius: 999px 999px 24px 24px; box-shadow: 0 40px 70px -32px rgba(11, 31, 58, 0.75); }

/* touch screens and narrow layouts: portrait on top, details always below */
@media (max-width: 991.98px), (hover: none) {
  .tmem { --pw: min(84vw, 320px); }
  .tmem .tmem__grid { flex-direction: column; align-items: center; gap: 34px; }
  .tmem .tmem__card, .tmem .tmem__card:nth-child(even) { flex-direction: column; align-items: center; height: auto; }
  .tmem .tmem__card .tmem__photo { height: calc(var(--pw) * 1.3); }
  .tmem .tmem__card .tmem__body, .tmem .tmem__card:nth-child(even) .tmem__body, .tmem .tmem__card:hover .tmem__body {
    width: calc(var(--pw) - 20px); height: auto; margin: -20px 0 0; padding: 40px 0 24px; border-radius: 0 0 22px 22px;
  }
  .tmem .tmem__card .tmem__body::before { display: none; }
  .tmem .tmem__card .tmem__body > * { width: auto; padding: 0 22px; opacity: 1; transform: none; }
  .tmem .tmem__card .tmem__rule { margin-left: 22px; }
  .tmem .tmem__card .tmem__name, .tmem .tmem__card .tmem__role, .tmem .tmem__card .tmem__rule { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tmem .tmem__card .tmem__body, .tmem .tmem__card .tmem__body > * { transition: none; }
}
.tmem .tmem__card + .tmem__card { border-top: 0; }
.tmem .tmem__card .tmem__photo,
.tmem .tmem__card:hover .tmem__photo { border-radius: calc(var(--pw) / 2) calc(var(--pw) / 2) 24px 24px; }
.tmem .tmem__card .tmem__body, .tmem .tmem__card:nth-child(even) .tmem__body { margin-left: 0; transition: width 0.75s cubic-bezier(.2, .8, .2, 1), margin 0.75s cubic-bezier(.2, .8, .2, 1); }
.tmem .tmem__card:hover .tmem__body { margin-left: -24px; }
@media (max-width: 991.98px), (hover: none) {
  .tmem .tmem__card:hover .tmem__body { margin: -20px 0 0; }
}
.tmem .tmem__card:nth-child(even) .tmem__photo, .tmem .tmem__card:nth-child(even):hover .tmem__photo { border-radius: calc(var(--pw) / 2) calc(var(--pw) / 2) 24px 24px; }

/* director photos: the same rounded rectangle as the details panel */
.tmem .tmem__card .tmem__photo, .tmem .tmem__card:hover .tmem__photo, .tmem .tmem__card:nth-child(even) .tmem__photo, .tmem .tmem__card:nth-child(even):hover .tmem__photo { border-radius: 26px; }
.tmem .tmem__card .tmem__body, .tmem .tmem__card:nth-child(even) .tmem__body { height: 100%; align-self: stretch; }
.tmem .tmem__card:hover .tmem__photo { border-radius: 26px 0 0 26px; }
@media (max-width: 991.98px), (hover: none) { .tmem .tmem__card:hover .tmem__photo { border-radius: 26px; } .tmem .tmem__card .tmem__body, .tmem .tmem__card:nth-child(even) .tmem__body { height: auto; } }

/* team members: plain white section, slower opening, smoky overlay on photos */
.tmem { background: #fff; }
.tmem__city { display: none; }
.tmem .tmem__card .tmem__body,
.tmem .tmem__card:nth-child(even) .tmem__body { transition: width 1.2s cubic-bezier(.25, .8, .25, 1) 0.12s, margin 1.2s cubic-bezier(.25, .8, .25, 1) 0.12s; }
.tmem .tmem__card:hover .tmem__body > * { transition-duration: 0.6s, 0.7s; transition-delay: 0.6s; }
.tmem .tmem__card .tmem__photo { transition: border-radius 0.9s var(--ease) 0.12s, box-shadow 0.9s var(--ease); }
.tmem .tmem__card .tmem__photo::after {
  background:
    radial-gradient(120% 60% at 50% 100%, rgba(4, 14, 30, 0.85) 0%, rgba(4, 14, 30, 0.55) 40%, transparent 75%),
    linear-gradient(180deg, rgba(4, 14, 30, 0.25) 0%, transparent 25%, transparent 50%, rgba(4, 14, 30, 0.7) 100%);
}
.tmem__cap { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5); }
.tmem .tmem__grid .tmem__card .tmem__photo::after, .tmem .tmem__grid .tmem__card:nth-child(even) .tmem__photo::after { display: block; content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(130% 55% at 50% 100%, rgba(4, 14, 30, 0.92) 0%, rgba(4, 14, 30, 0.6) 45%, transparent 80%), linear-gradient(180deg, rgba(4, 14, 30, 0.3) 0%, transparent 22%, transparent 48%, rgba(4, 14, 30, 0.75) 100%); }

/* department label inside the caption; middle card open until another is hovered */
.tmem__dept { font-style: normal; justify-self: center; order: -1; padding: 4px 12px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.tmem__cap::before { order: 0; }
.tmem__cap strong { order: 1; }
.tmem__cap span { order: 2; }
@media (min-width: 992px) and (hover: hover) {
  .tmem .tmem__grid:not(:hover) .tmem__card:nth-child(2) .tmem__body { width: var(--dw); margin-left: -24px; }
  .tmem .tmem__grid:not(:hover) .tmem__card:nth-child(2) .tmem__body > * { opacity: 1; transform: none; }
  .tmem .tmem__grid:not(:hover) .tmem__card:nth-child(2) .tmem__photo { border-radius: 26px 0 0 26px; }
}

/* team slices driven by .is-open (set by main.js): one open card, fixed row
   width, smooth easing on the panel and its contents */
.tmem .tmem__grid.js-slices .tmem__card .tmem__body,
.tmem .tmem__grid.js-slices .tmem__card:hover .tmem__body,
.tmem .tmem__grid.js-slices:not(:hover) .tmem__card:nth-child(2) .tmem__body {
  width: 0; margin-left: 0;
  transition: width 0.9s cubic-bezier(.65, 0, .35, 1), margin-left 0.9s cubic-bezier(.65, 0, .35, 1);
  will-change: width;
}
.tmem .tmem__grid.js-slices .tmem__card .tmem__body > *,
.tmem .tmem__grid.js-slices .tmem__card:hover .tmem__body > *,
.tmem .tmem__grid.js-slices:not(:hover) .tmem__card:nth-child(2) .tmem__body > * {
  opacity: 0; transform: translateX(-10px);
  transition: opacity 0.25s ease, transform 0.25s ease; transition-delay: 0s;
}
.tmem .tmem__grid.js-slices .tmem__card.is-open .tmem__body { width: var(--dw); margin-left: -24px; }
.tmem .tmem__grid.js-slices .tmem__card.is-open .tmem__body > * { opacity: 1; transform: none; transition: opacity 0.5s ease 0.45s, transform 0.6s cubic-bezier(.2, .8, .2, 1) 0.45s; }
.tmem .tmem__grid.js-slices .tmem__card .tmem__photo,
.tmem .tmem__grid.js-slices .tmem__card:hover .tmem__photo,
.tmem .tmem__grid.js-slices:not(:hover) .tmem__card:nth-child(2) .tmem__photo { border-radius: 26px; transition: border-radius 0.9s cubic-bezier(.65, 0, .35, 1), box-shadow 0.6s ease; }
.tmem .tmem__grid.js-slices .tmem__card.is-open .tmem__photo { border-radius: 26px 0 0 26px; }
.tmem .tmem__grid.js-slices .tmem__card .tmem__photo img { transition: transform 1.4s cubic-bezier(.2, .8, .2, 1); }
.tmem .tmem__grid.js-slices .tmem__card:hover .tmem__photo img { transform: scale(1.03); }
.tmem .tmem__grid.js-slices .tmem__card.is-open:nth-child(n) .tmem__body,
.tmem .tmem__grid.js-slices:not(:hover) .tmem__card.is-open:nth-child(n) .tmem__body { width: var(--dw); margin-left: -24px; }
.tmem .tmem__grid.js-slices .tmem__card.is-open:nth-child(n) .tmem__body > *,
.tmem .tmem__grid.js-slices:not(:hover) .tmem__card.is-open:nth-child(n) .tmem__body > * { opacity: 1; transform: none; transition: opacity 0.5s ease 0.45s, transform 0.6s cubic-bezier(.2, .8, .2, 1) 0.45s; }
.tmem .tmem__grid.js-slices .tmem__card.is-open:nth-child(n) .tmem__photo,
.tmem .tmem__grid.js-slices:not(:hover) .tmem__card.is-open:nth-child(n) .tmem__photo { border-radius: 26px 0 0 26px; }

/* founder section: a deeper navy */
.fcard-sec { background: linear-gradient(120deg, #06142a 0%, #040e1f 50%, #071a33 100%); }
.fcard { background: radial-gradient(60% 90% at 70% 10%, rgba(30, 64, 120, 0.28), transparent 60%); }

/* team statement: soft city illustration behind the text, kept very faint */
.tstate__sketch {
  background: url("../assets/images/bg-shapes2.68ffd243d059.avif") center 70% / min(1100px, 110%) auto no-repeat;
  opacity: 0.55;
  -webkit-mask-image: radial-gradient(75% 70% at 50% 55%, #000 40%, transparent 100%);
  mask-image: radial-gradient(75% 70% at 50% 55%, #000 40%, transparent 100%);
}
.tstate__sketch { opacity: 0.32; }

/* project description: the building line-drawing rising from the corners,
   kept faint behind the text */
.page-project .sec--overview { position: relative; overflow: clip; isolation: isolate; }
.page-project .sec--overview::before,
.page-project .sec--overview::after {
  content: '';
  position: absolute;
  z-index: -1;
  bottom: 0;
  width: min(420px, 34vw);
  aspect-ratio: 1;
  background: url("../assets/images/bg-shapes1-lines.dcafd3cd936d.webp") bottom / contain no-repeat;
  opacity: 0.12;
  pointer-events: none;
}
.page-project .sec--overview::before { left: 0; }
.page-project .sec--overview::after { right: 0; transform: scaleX(-1); }
@media (max-width: 767.98px) {
  .page-project .sec--overview::before, .page-project .sec--overview::after { width: 46vw; opacity: 0.08; }
}

/* team cards on phones and tablets: one joined unit - photo on top, details
   panel the same width directly beneath, every card identical */
@media (max-width: 991.98px), (hover: none) {
  .tmem .tmem__grid { gap: 26px; padding-inline: 0; }
  .tmem .tmem__grid .tmem__card,
  .tmem .tmem__grid .tmem__card:nth-child(n) {
    width: min(100%, 380px);
    flex-direction: column;
    align-items: stretch;
    height: auto;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 30px 60px -36px rgba(11, 31, 58, 0.6);
  }
  .tmem .tmem__grid .tmem__card .tmem__photo,
  .tmem .tmem__grid .tmem__card:nth-child(n) .tmem__photo,
  .tmem .tmem__grid .tmem__card:nth-child(n):hover .tmem__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 4.4;
    border-radius: 0;
    box-shadow: none;
  }
  .tmem .tmem__grid .tmem__card .tmem__body,
  .tmem .tmem__grid .tmem__card:nth-child(n) .tmem__body,
  .tmem .tmem__grid .tmem__card:nth-child(n):hover .tmem__body {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 22px 0 24px;
    border-radius: 0;
    box-shadow: none;
    align-self: stretch;
  }
  .tmem .tmem__grid .tmem__card .tmem__body > * { width: auto; padding: 0 22px; opacity: 1; transform: none; }
}

/* ==========================================================================
   One heading style everywhere: dark ink with the accent words in the site's
   deep navy-blue (as "Our Top Projects"), same size and weight as .section-title
   ========================================================================== */
.tmem .tmem__title,
.page-project .sec .blk__title,
.page-project .blk--amenities .blk__title,
.resi__title,
.tintro__title,
.crew__title {
  font-family: var(--font-head);
  font-size: clamp(24px, 2.86vw, 39px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #1b2430;
}
.tmem .tmem__title em,
.page-project .blk__title em,
.page-project .sec__sub em,
.page-project .blk--amenities .blk__title em,
.resi__title em,
.cfilter__count em,
.locx__head .blk__title em { color: #063b73; background: none; -webkit-text-fill-color: currentColor; }
/* the developer band is dark navy, so its accent stays light */
.page-project .sec--developer .blk__title { color: #fff; }
.page-project .sec--developer .blk__title em { color: var(--accent); }

/* project cards: breathing room between the "Starting from" label and the price */
.pc__price small, .pcard__price small { display: block; margin-bottom: 6px; line-height: 1.2; }

/* team cards: no gold arrow button, no gold line over the photo caption */
.tmem .tmem__card .tmem__links .tmem__go { display: none; }
.tmem__cap::before { display: none; }
.tmem .tmem__card .tmem__rule, .tmem__rule { display: none; }
.tmem .tmem__card .tmem__role { margin-bottom: 16px; }

/* category filter bar: search plus four dropdowns on one line */
.cfilter__tools { flex-wrap: wrap; }
.cfilter__search { flex: 1 1 260px; }
.cfilter__field { flex: 0 1 auto; }
@media (max-width: 1199.98px) { .cfilter__search { flex-basis: 100%; } .cfilter__field { flex: 1 1 calc(50% - 5px); justify-content: space-between; } }

/* category filter dropdowns: stacked label over value in soft rounded boxes,
   sharing the row equally */
.cfilter__field {
  position: relative;
  flex: 1 1 0;
  display: grid;
  gap: 4px;
  height: auto;
  min-height: 72px;
  align-content: center;
  padding: 12px 20px;
  border: 1px solid rgba(14, 22, 32, 0.06);
  border-radius: 18px;
  background: #f3f6fa;
}
.cfilter__field span { font-size: 11.5px; letter-spacing: 0.12em; color: #1f5fa8; }
.cfilter__field select {
  width: 100%;
  padding: 0 22px 0 0;
  font-size: 16px;
  font-weight: 500;
  color: #0e1620;
  appearance: none;
  -webkit-appearance: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230e1620' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right center no-repeat;
}
.cfilter__field:focus-within { border-color: rgba(31, 95, 168, 0.4); background: #eef4fb; }
.cfilter__tools { flex-wrap: nowrap; align-items: stretch; }
.cfilter__search { flex: 1.2 1 0; align-self: center; }
@media (max-width: 1199.98px) {
  .cfilter__tools { flex-wrap: wrap; }
  .cfilter__search { flex: 1 1 100%; }
  .cfilter__field { flex: 1 1 calc(33.33% - 7px); }
}
@media (max-width: 575.98px) { .cfilter__field { flex: 1 1 100%; min-height: 64px; } }

/* filter dropdowns on white, and a Reset button at the end of the row */
.cfilter__field { background: #fff; border-color: rgba(14, 22, 32, 0.08); }
.cfilter__field:focus-within { background: #fff; border-color: rgba(31, 95, 168, 0.45); box-shadow: 0 0 0 3px rgba(31, 95, 168, 0.08); }
.cfilter__reset-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 72px;
  padding: 0 22px;
  border: 1px solid rgba(14, 22, 32, 0.12);
  border-radius: 18px;
  background: #fff;
  font-size: 15px;
  font-weight: 700;
  color: #0e1620;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.cfilter__reset-btn:hover { color: #fff; background: #04223f; border-color: #04223f; }
.cfilter__reset-btn:hover svg { transform: rotate(-120deg); }
.cfilter__reset-btn svg { transition: transform 0.4s var(--ease); }
@media (max-width: 1199.98px) { .cfilter__reset-btn { flex: 1 1 calc(33.33% - 7px); min-height: 64px; } }
@media (max-width: 575.98px) { .cfilter__reset-btn { flex: 1 1 100%; min-height: 52px; } }

/* projects sidebar: everything sits inside the card's padding */
#filters { padding: 20px; }
#filters .ftabs,
#filters .filters__top,
#filters .filters__row,
#filters .fsel,
#filters .freset,
#filters input[name="q"],
#filters .filters__top > * { box-sizing: border-box; width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; }
#filters .freset { height: 48px; min-height: 48px; flex: none; justify-content: center; border-radius: 14px; }

/* project banner: type and status as two glass pills */
.dh__eyebrow { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; letter-spacing: 0; }
.dh__eyebrow::after { display: none; }
.dh__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.dh__pill--status { color: #04223f; border-color: transparent; background: #e9c98a; }
.dh__pill--status i { width: 7px; height: 7px; border-radius: 50%; background: #04223f; box-shadow: 0 0 0 3px rgba(4, 34, 63, 0.18); animation: dhDot 2s ease-in-out infinite; }
@keyframes dhDot { 50% { box-shadow: 0 0 0 6px rgba(4, 34, 63, 0); } }
@media (prefers-reduced-motion: reduce) { .dh__pill--status i { animation: none; } }

/* blogs banner: the journal artwork carries its own title, so it shows in
   full colour, centred, with the page name kept for screen readers only and
   the trail at the foot */
.phero--blog { align-items: flex-end; }
.phero--blog .phero__bg img { object-position: center 50%; }
.phero--blog .phero__shade { background: linear-gradient(180deg, transparent 72%, rgba(4, 14, 30, 0.6) 100%); }
.phero--blog .phero__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.phero--blog .phero__crumbs { margin: 0; }
.phero--blog .phero__shade { background: linear-gradient(180deg, transparent 62%, rgba(4, 14, 30, 0.82) 100%); }

/* WhatsApp button stays a circle on hover: the text label is not shown */
.float-wa__label, .float-wa:hover .float-wa__label, .float-wa:focus-visible .float-wa__label { display: none; }
.float-wa:hover, .float-wa:focus-visible { width: 56px; }

/* custom dropdown panel (js/main.js replaces the native list on desktop) */
.dd {
  position: fixed;
  z-index: 2000;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  border-radius: 16px;
  border: 1px solid rgba(14, 22, 32, 0.08);
  background: #fff;
  box-shadow: 0 24px 50px -20px rgba(4, 34, 63, 0.35), 0 2px 8px rgba(4, 34, 63, 0.06);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(.2, .8, .2, 1);
  scrollbar-width: thin;
}
.dd.is-in { opacity: 1; transform: none; }
.dd__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  border-radius: 10px;
  background: none;
  font: inherit;
  font-size: 15px;
  text-align: left;
  color: #1b2430;
  cursor: pointer;
}
.dd__opt svg { flex: none; opacity: 0; }
.dd__opt:hover { background: #f1f5fa; }
.dd__opt.is-sel { color: #fff; background: #1f5fa8; }
.dd__opt.is-sel svg { opacity: 1; }
.dd__group { padding: 10px 14px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #8a94a3; }
.dd-open .search__select, .dd-open select { color: #1f5fa8; }

/* mobile menu: links, sub-links and icons in the same deep-blue gradient as
   the Get Appointment button */
.mobile-menu { --mm-grad: linear-gradient(135deg, #0a3d7a 0%, #04223f 100%); --mm-grad-hover: linear-gradient(135deg, #2a6fc0 0%, #0a3d7a 100%); }
.mobile-menu__links > li > a,
.mobile-menu__links .mobile-menu__sub a,
.mobile-menu__foot a:not(.btn-lux) {
  background-image: var(--mm-grad);
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #0a3d7a;
}
.mobile-menu__foot a:not(.btn-lux) { background-color: transparent; background-image: var(--mm-grad), linear-gradient(#fff, #fff); }
.mobile-menu__links > li > a:hover,
.mobile-menu__links > li.is-open > a,
.mobile-menu__links .mobile-menu__sub a:hover { background-image: var(--mm-grad-hover); }
/* the icons are painted with the gradient through their own outline */
.mobile-menu__links > li > a::before,
.mobile-menu__foot a:not(.btn-lux)::before { background: var(--mm-grad); -webkit-text-fill-color: initial; }
.mobile-menu__links > li > a:hover::before,
.mobile-menu__links > li.is-open > a::before { background: var(--mm-grad-hover); }
/* dropdown chevrons: solid, as borders cannot take a gradient */
.mobile-menu__links > li > a:has(+ .mobile-menu__sub)::after { color: #0a3d7a; border-color: #0a3d7a; }
.mobile-menu__links > li.is-open > a::after { color: #2a6fc0; border-color: #2a6fc0; }
.mobile-menu__links > li:nth-child(1) > a::before { -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2304223f%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M3%2010.5%2012%203l9%207.5V21a1%201%200%200%201-1%201h-5v-7H9v7H4a1%201%200%200%201-1-1z%22%2F%3E%3C%2Fsvg%3E") center / 20px 20px no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2304223f%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M3%2010.5%2012%203l9%207.5V21a1%201%200%200%201-1%201h-5v-7H9v7H4a1%201%200%200%201-1-1z%22%2F%3E%3C%2Fsvg%3E") center / 20px 20px no-repeat; }
.mobile-menu__links > li:nth-child(2) > a::before { -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2304223f%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M12%2016v-4M12%208h.01%22%2F%3E%3C%2Fsvg%3E") center / 20px 20px no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2304223f%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M12%2016v-4M12%208h.01%22%2F%3E%3C%2Fsvg%3E") center / 20px 20px no-repeat; }
.mobile-menu__links > li:nth-child(3) > a::before { -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2304223f%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M3%2021h18%22%2F%3E%3Cpath%20d%3D%22M5%2021V7l7-4v18%22%2F%3E%3Cpath%20d%3D%22M19%2021V11l-7-4%22%2F%3E%3Cpath%20d%3D%22M9%209v.01M9%2012v.01M9%2015v.01M9%2018v.01%22%2F%3E%3C%2Fsvg%3E") center / 20px 20px no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2304223f%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M3%2021h18%22%2F%3E%3Cpath%20d%3D%22M5%2021V7l7-4v18%22%2F%3E%3Cpath%20d%3D%22M19%2021V11l-7-4%22%2F%3E%3Cpath%20d%3D%22M9%209v.01M9%2012v.01M9%2015v.01M9%2018v.01%22%2F%3E%3C%2Fsvg%3E") center / 20px 20px no-repeat; }
.mobile-menu__links > li:nth-child(4) > a::before { -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2304223f%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M12%2022s7-6.2%207-12a7%207%200%201%200-14%200c0%205.8%207%2012%207%2012z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%222.5%22%2F%3E%3C%2Fsvg%3E") center / 20px 20px no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2304223f%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M12%2022s7-6.2%207-12a7%207%200%201%200-14%200c0%205.8%207%2012%207%2012z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%222.5%22%2F%3E%3C%2Fsvg%3E") center / 20px 20px no-repeat; }
.mobile-menu__links > li:nth-child(5) > a::before { -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2304223f%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M4%204h12l4%204v12H4z%22%2F%3E%3Cpath%20d%3D%22M8%2010h8M8%2014h8M8%2018h5%22%2F%3E%3C%2Fsvg%3E") center / 20px 20px no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2304223f%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M4%204h12l4%204v12H4z%22%2F%3E%3Cpath%20d%3D%22M8%2010h8M8%2014h8M8%2018h5%22%2F%3E%3C%2Fsvg%3E") center / 20px 20px no-repeat; }
.mobile-menu__links > li:nth-child(6) > a::before { -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2304223f%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%223%22%20y%3D%227%22%20width%3D%2218%22%20height%3D%2213%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M9%207V5a2%202%200%200%201%202-2h2a2%202%200%200%201%202%202v2M3%2013h18%22%2F%3E%3C%2Fsvg%3E") center / 20px 20px no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2304223f%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%223%22%20y%3D%227%22%20width%3D%2218%22%20height%3D%2213%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M9%207V5a2%202%200%200%201%202-2h2a2%202%200%200%201%202%202v2M3%2013h18%22%2F%3E%3C%2Fsvg%3E") center / 20px 20px no-repeat; }
.mobile-menu__links > li:nth-child(7) > a::before { -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2304223f%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M22%2016.9v3a2%202%200%200%201-2.2%202%2019.8%2019.8%200%200%201-8.6-3.1%2019.5%2019.5%200%200%201-6-6A19.8%2019.8%200%200%201%202.1%204.2%202%202%200%200%201%204.1%202h3a2%202%200%200%201%202%201.7c.1.9.4%201.9.7%202.8a2%202%200%200%201-.5%202.1L8%209.9a16%2016%200%200%200%206%206l1.3-1.3a2%202%200%200%201%202.1-.4c.9.3%201.9.6%202.8.7a2%202%200%200%201%201.7%202z%22%2F%3E%3C%2Fsvg%3E") center / 20px 20px no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2304223f%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M22%2016.9v3a2%202%200%200%201-2.2%202%2019.8%2019.8%200%200%201-8.6-3.1%2019.5%2019.5%200%200%201-6-6A19.8%2019.8%200%200%201%202.1%204.2%202%202%200%200%201%204.1%202h3a2%202%200%200%201%202%201.7c.1.9.4%201.9.7%202.8a2%202%200%200%201-.5%202.1L8%209.9a16%2016%200%200%200%206%206l1.3-1.3a2%202%200%200%201%202.1-.4c.9.3%201.9.6%202.8.7a2%202%200%200%201%201.7%202z%22%2F%3E%3C%2Fsvg%3E") center / 20px 20px no-repeat; }

/* mobile menu dropdown: the soft panel spans the full menu width; its links
   are indented inside it to line up under the parent's text */
.mobile-menu__links > li.is-open > .mobile-menu__sub,
.mobile-menu .mobile-menu__links > li.is-open > .mobile-menu__sub {
  box-sizing: border-box;
  width: 100%;
  margin: 2px 0 10px;
  padding: 6px 0;
  border-radius: 14px;
}
.mobile-menu .mobile-menu__links .mobile-menu__sub a { padding: 10px 14px 10px 38px; font-size: 15px; }
.mobile-menu .mobile-menu__links .mobile-menu__sub a:hover { padding-left: 42px; }

/* dropdown panel: compact rows and a shorter list */
.dd { max-height: 240px; padding: 5px; border-radius: 14px; }
.dd__opt { padding: 7px 12px; font-size: 14px; border-radius: 9px; }
.dd__opt svg { width: 14px; height: 14px; }
.dd__group { padding: 8px 12px 3px; font-size: 10.5px; }
/* the whole field box is clickable */
.search__field, .cfilter__field, .fsel { cursor: pointer; }
.search__field *, .cfilter__field *, .fsel * { cursor: pointer; }

/* Amenity tiles fill their grid row. The icon tiles grow with their
   description, so a fixed height left the photographs short with a gap
   underneath. Keeps the design's floor height at every breakpoint. */
.page-project .am2__grid > .am2__tile { height: auto; min-height: clamp(210px, 17vw, 260px); }
.page-project .am2__grid > .am2__tile--photo img { height: 100%; }
@media (max-width: 767.98px) {
  .page-project .am2__grid > .am2__tile { min-height: 200px; }
}

/* The brochure CTA is a button now (it opens the enquiry form first), so give
   it the same box the anchor had. */
button.pay__dl { width: 100%; font: inherit; cursor: pointer; background: transparent; color: inherit; }

/* Developer credit in the footer bar. Inherits the footer's muted white and
   brightens on hover, like the legal links beside it. */
.footer__credit { white-space: nowrap; }
.footer__credit::before { content: "·"; margin: 0 6px; opacity: 0.6; }
.footer__credit a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  transition: color 0.25s, border-color 0.25s;
}
.footer__credit a:hover,
.footer__credit a:focus-visible { color: #fff; border-bottom-color: currentColor; }

@media (max-width: 575.98px) {
  /* let it wrap onto its own line rather than squeezing the copyright */
  .footer__credit { display: block; white-space: normal; margin-top: 4px; }
  .footer__credit::before { content: none; }
}

/* ==========================================================================
   Footer — royal blue panel with a white logo and white text
   The uploaded logo is navy on an opaque white background, so a CSS invert
   would flatten it to a solid white block. SiteSettings.logo_light holds a
   proper white, transparent-background version for use down here instead.
   ========================================================================== */
:root { --royal: #12439b; --royal-deep: #0b2f73; }

.footer {
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(255, 255, 255, 0.1), transparent 62%),
    linear-gradient(180deg, var(--royal) 0%, var(--royal-deep) 100%);
  color: rgba(255, 255, 255, 0.78);
}
/* A white, transparent-background logo needs no chip behind it. */
.footer .logo--onblue .logo__img {
  background: none;
  padding: 0;
  border-radius: 0;
}
.footer__title,
.footer__invite-title { color: #fff; }
.footer__about,
.footer__links a,
.footer__bottom { color: rgba(255, 255, 255, 0.78); }
.footer__contact small { color: rgba(255, 255, 255, 0.62); }
.footer__landmark {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.72);
}
.footer__social a { border-color: rgba(255, 255, 255, 0.28); }
.footer__contact a:hover,
.footer__links a:hover { color: #fff; }

/* ==========================================================================
   Team profile pages
   The cards on /team/ now open a person's own page, so the photo and name
   became links — these keep them looking exactly as they did before.
   ========================================================================== */
.tmem__open { display: block; color: inherit; text-decoration: none; }
.tmem__name a,
.fcard__name a { color: inherit; text-decoration: none; }
.tmem__name a:hover,
.fcard__name a:hover { color: var(--brand-deep); }
.tmem__profile-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-deep);
  transition: gap 0.3s var(--ease);
}
.tmem__profile-link:hover { gap: 12px; }

.tprofile__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
  margin-top: 26px;
}
.tprofile__link {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--brand-deep);
  border-bottom: 1px solid rgba(6, 59, 115, 0.3);
}
.tprofile__link:hover { border-bottom-color: var(--brand-deep); }
/* The profile card body sits on the dark blue panel, so the link inverts. */
.fcard .tprofile__link {
  color: rgba(255, 255, 255, 0.92);
  border-bottom-color: rgba(255, 255, 255, 0.35);
}
.fcard .tprofile__link:hover { color: #fff; border-bottom-color: #fff; }
.page-team-member .fcard__bio + .fcard__bio { margin-top: 14px; }

/* ==========================================================================
   Floating "Quick Query" button + its popup
   Mirrors the WhatsApp float, stacked directly above it. The popup reuses the
   project enquiry modal's styles; --solo drops the picture column.
   ========================================================================== */
.float-query {
  position: fixed;
  right: clamp(16px, 2.5vw, 28px);
  /* clears the WhatsApp button (56px tall) plus a gap */
  bottom: calc(clamp(16px, 2.5vw, 28px) + 68px);
  z-index: 1030;
  height: 56px;
  display: inline-flex;
  align-items: center;
  border: 0;
  padding: 0;
  border-radius: 999px;
  overflow: hidden;
  background: var(--brand-deep);
  color: #fff;
  box-shadow: 0 12px 28px -14px rgba(6, 59, 115, 0.9);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.3s;
}
/* With WhatsApp hidden it takes the bottom slot instead. */
body:not(:has(.float-wa)) .float-query { bottom: clamp(16px, 2.5vw, 28px); }
.float-query__icon { width: 56px; flex: none; display: grid; place-items: center; }
.float-query__label {
  max-width: 0;
  padding-right: 0;
  opacity: 0;
  white-space: nowrap;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: max-width 0.5s var(--ease), padding-right 0.5s var(--ease), opacity 0.35s var(--ease);
}
.float-query:hover,
.float-query:focus-visible {
  background: #0a4f9e;
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -14px rgba(6, 59, 115, 0.95);
}
.float-query:hover .float-query__label,
.float-query:focus-visible .float-query__label {
  max-width: 180px;
  padding-right: 22px;
  opacity: 1;
}
@media (max-width: 575.98px) {
  .float-query__label { display: none; }
}

/* Single-column variant of the enquiry modal. */
.emodal--solo .emodal__box { grid-template-columns: 1fr; max-width: 520px; }
.emodal--solo .emodal__side { display: none; }