/* ==========================================================================
   Investors Planet 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: #1f5c9e;
  --gold: var(--brand);
  --gold-2: var(--brand-light);
  --gold-deep: var(--brand-deep);
  /* dropdown chevron. A stand-in element gets no native arrow, so the forms that
     relied on the browser's own have to draw it. */
  /* a paler step again than --brand-light, for accent words set over a photograph */
  --brand-pale: #cfe1f5;
  --chev: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --ivory: #f8f5ef;
  --sand: #efe8dc;
  --line: rgba(14, 22, 32, 0.1);
  --line-light: rgba(255, 255, 255, 0.14);
  --text: #1b2430;
  --muted: #667085;

  --font-head: 'Stack Sans Headline', 'Geist', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-script: 'Mrs Saint Delafield', 'Brush Script MT', cursive;

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --ease: cubic-bezier(0.22, 1, 0.36, 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: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

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.
*/
/*
  The container's inline padding is clamp(16px, 3vw, 28px), so it only reaches
  Bootstrap's 24px g-5 pull once the viewport passes 800px. Below that the row
  leaked past the edge and the page could be dragged sideways. Cap the gutter for
  the whole range where the padding is too small, not just on phones.
*/
@media (max-width: 799.98px) {
  .row.g-5, .row.gx-5 { --bs-gutter-x: 2rem; }
}
@media (max-width: 575.98px) {
}

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

/* ---------- Section heading ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: '';
  width: 36px;
  height: 1px;
  background: currentColor;
}
.section--dark .eyebrow,
.eyebrow--light { color: var(--gold); }
/* 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. */
.hero__eyebrow,
.phero .eyebrow--light {
  color: #ffffff;
  /* the hero cycles photos of differing brightness, so a flat colour alone is not
     reliable here; the shadow keeps it readable over the lighter slides too */
  text-shadow: 0 1px 14px rgba(14, 22, 32, 0.65);
}

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

/* --------------------------------------------------------------------------
   Heading accents: a glassy run from the logo's navy through the brand blue.
   The solid colours above stay as the fallback; the text only goes transparent
   where background-clip: text is supported.
   -------------------------------------------------------------------------- */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .section-title em,
  .logo-wall__title em,
  .tile__title em {
    background-image: linear-gradient(100deg, #12315f 0%, var(--brand-deep) 30%, #2f78c4 52%, var(--brand-deep) 74%, #12315f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  .section--dark .section-title em {
    background-image: linear-gradient(100deg, var(--brand) 0%, var(--brand-light) 28%, #eaf3fd 52%, var(--brand-light) 74%, var(--brand) 100%);
  }
  .cta__box .section-title em {
    background-image: linear-gradient(100deg, var(--brand-light) 0%, #dceafa 26%, #ffffff 52%, #dceafa 74%, var(--brand-light) 100%);
  }
}

.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 ---------- */
.btn-lux {
  --h: 54px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: var(--h);
  /* in a column flex container the height is the main axis, so without this the
     button gets compressed and the round icon bulges out of it */
  flex-shrink: 0;
  padding: 0 8px 0 26px;
  border-radius: 999px;
  border: 0;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  background: var(--gold);
  color: var(--ink);
  overflow: hidden;
  isolation: isolate;
  transition: color 0.5s var(--ease);
}
.btn-lux::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ink);
  border-radius: inherit;
  transform: translateY(101%);
  transition: transform 0.5s var(--ease);
  z-index: -1;
}
.btn-lux:hover { color: #fff; }
.btn-lux:hover::before { transform: translateY(0); }
.btn-lux .btn-icon {
  flex-shrink: 0;
  width: calc(var(--h) - 14px);
  height: calc(var(--h) - 14px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: #ffffff;
  transition: transform 0.5s var(--ease), background 0.5s var(--ease);
}
.btn-lux:hover .btn-icon { transform: rotate(45deg); background: var(--gold); color: var(--ink); }
/* arrow glyph size */
.btn-lux .btn-icon svg { width: 21px; height: 21px; }
.pc__btn svg, .pcard__btn svg, .bcard__btn svg { width: 24px; height: 24px; }

.btn-lux--ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
}
.btn-lux--ghost .btn-icon { background: var(--ink); color: #fff; }

.btn-lux--light { background: #fff; }
.btn-lux--light::before { background: var(--gold); }
.btn-lux--light:hover { color: var(--ink); }
.btn-lux--light:hover .btn-icon { background: var(--ink); color: var(--gold); }

.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 ---------- */
.float-wa {
  position: fixed;
  right: clamp(16px, 2.5vw, 28px);
  bottom: clamp(16px, 2.5vw, 28px);
  z-index: 1030;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #25d366;
  color: #fff;
  box-shadow: 0 14px 34px -10px rgba(37, 211, 102, 0.7);
  transition: transform 0.4s var(--ease);
}
.float-wa::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #25d366;
  animation: pulse 2.2s ease-out infinite;
}
.float-wa:hover { transform: scale(1.08); color: #fff; }
@keyframes pulse { from { transform: scale(1); opacity: 0.8; } to { transform: scale(1.7); opacity: 0; } }

@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: 105px;
  width: auto;
  display: block;
  transition: height 0.5s var(--ease);
}
.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: 52px;
  padding: 5px 7px;
  border-radius: 10px;
  background: #fff;
}

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

@media (max-width: 991.98px) {
  .logo__img { height: 62px; }
}
@media (max-width: 575.98px) {
  .logo__img { height: 56px; }
  .logo--light .logo__img { height: 48px; }
  .footer .logo__img { height: 92px; }
}

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

/*
  A centred white "tab" hanging from the top edge: rounded bottom corners
  and a concave flare on each side that melts into the top of the screen.
*/
.site-header {
  --r: 48px; /* corner radius */
  position: fixed;
  inset: 0 0 auto;
  z-index: 1040;
  pointer-events: none;
  transition: transform 0.6s var(--ease);
}
.site-header.is-hidden { transform: translateY(-110%); }

/*
  Intro: the bar waits a second above the screen, then drops into place.
  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.
  "backwards" holds the off-screen frame during the delay, so the bar is never
  painted in place first; once it 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 { transform: translateY(-120%); }
}
/* Tune the intro here: first number = how long the drop takes, second = the wait before it. */
.js .site-header {
  animation: headerIn 0.75s var(--ease) 1s backwards;
}

.navbar-lux {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: center;
  gap: 32px;
  width: min(calc(100% - 2 * var(--r) - 16px), 1400px);
  height: 105px;
  margin: 0 auto;
  padding: 0 clamp(20px, 3.4vw, 52px);
  background: #fff;
  color: var(--ink);
  border-radius: 0 0 var(--r) var(--r);
  transition: height 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
/* Concave flares at top-left and top-right */
.navbar-lux::before,
.navbar-lux::after {
  content: "";
  position: absolute;
  top: 0;
  width: var(--r);
  height: var(--r);
}
.navbar-lux::before {
  left: calc(var(--r) * -1 + 1px);
  background: radial-gradient(circle at 0 100%, transparent calc(var(--r) - 0.5px), #fff var(--r));
}
.navbar-lux::after {
  right: calc(var(--r) * -1 + 1px);
  background: radial-gradient(circle at 100% 100%, transparent calc(var(--r) - 0.5px), #fff var(--r));
}
.is-scrolled .navbar-lux {
  height: 90px;
  box-shadow: 0 14px 40px -18px rgba(14, 22, 32, 0.35);
}
/* Only the desktop bar shrinks on scroll (105 -> 90), so only there does the mark. */
@media (min-width: 992px) {
  .is-scrolled .logo__img { height: 86px; }
}

.navbar-lux__links {
  display: flex;
  align-self: stretch;
  gap: 4px;
  list-style: none;
  margin: 0 auto;
  padding: 0;
}
.navbar-lux__link {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 18px;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--ink);
  transition: color 0.3s;
}
.navbar-lux__link::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform 0.45s var(--ease);
}
.navbar-lux__link:hover,
.navbar-lux__link.is-active { color: var(--gold-deep); }
.navbar-lux__link:hover::after,
.navbar-lux__link.is-active::after { transform: scaleX(1); }

.navbar-lux__actions { display: flex; align-items: center; gap: 12px; }
.navbar-lux__phone { display: flex; align-items: center; gap: 10px; }
.navbar-lux__phone-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--brand-deep);
  color: #fff;
  transition: background 0.4s;
}
.navbar-lux__phone:hover .navbar-lux__phone-icon { background: var(--ink); }
.navbar-lux__phone-text { font-weight: 600; font-size: 15px; white-space: nowrap; }

.navbar-lux__burger {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 0;
  background: var(--ink);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
.navbar-lux__burger span {
  display: block;
  width: 20px;
  height: 1.6px;
  background: #fff;
  transition: width 0.3s var(--ease), margin 0.3s var(--ease);
}
.navbar-lux__burger span:last-child { width: 12px; margin-left: 8px; }
.navbar-lux__burger:hover span:last-child { width: 20px; margin-left: 0; }

@media (max-width: 1199.98px) {
  .navbar-lux { gap: 16px; }
  .navbar-lux__link { padding: 0 11px; font-size: 14px; }
  .navbar-lux__phone-text { display: none; }
}
@media (max-width: 991.98px) {
  .site-header { --r: 30px; }
  .navbar-lux { height: 80px; width: calc(100% - 2 * var(--r) - 8px); }
  .is-scrolled .navbar-lux { height: 74px; }
  .navbar-lux__links { display: none; }
  .navbar-lux__actions { margin-left: auto; }
  .navbar-lux__burger { display: flex; }
}
@media (max-width: 575.98px) {
  .site-header { --r: 22px; }
  .navbar-lux { height: 74px; padding: 0 10px 0 14px; width: calc(100% - 2 * var(--r)); }
  .navbar-lux__phone-text { display: none; }
}

/* Mobile menu */
/* a plain white panel: one type size for the links, hairline dividers */
.mobile-menu {
  --bs-offcanvas-width: min(100vw, 400px);
  background: #fff;
  color: var(--ink);
  padding: 16px 20px 24px;
  display: flex;
  flex-direction: column;
}
.mobile-menu__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
/* the panel is already white, so the logo needs no chip */
.mobile-menu .logo__img { height: 46px; padding: 0; background: none; border-radius: 0; }
.mobile-menu__close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  display: grid;
  place-items: center;
}
.mobile-menu__close svg { width: 18px; height: 18px; }
.mobile-menu__links {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}
.mobile-menu__links > li { border-bottom: 1px solid var(--line); }
.mobile-menu__links a {
  display: block;
  padding: 14px 0;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  transition: color 0.2s;
}
.mobile-menu__links a:hover { color: var(--gold-deep); }
/* Projects opens a short list in place instead of leaving the page */
.mobile-menu__toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  text-align: left;
}
.mobile-menu__toggle svg { color: var(--muted); transition: transform 0.25s var(--ease); }
.mobile-menu__toggle:not(.collapsed) { color: var(--gold-deep); }
.mobile-menu__toggle:not(.collapsed) svg { transform: rotate(180deg); color: var(--gold-deep); }
.mobile-menu__foot {
  display: grid;
  gap: 4px;
  margin-top: auto;
  padding-top: 24px;
  font-size: 14px;
  color: var(--muted);
}
.mobile-menu__foot a:hover { color: var(--gold-deep); }
.mobile-menu__foot .btn-lux { justify-content: center; }

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

.cta { background: var(--ink); padding-top: clamp(24px, 3vw, 40px); position: relative; }
.cta__box {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  padding: clamp(32px, 6vw, 80px);
  color: #fff;
  isolation: isolate;
}
.cta__box .cta__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.cta__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    rgba(14, 22, 32, 0.95) 8%,
    rgba(14, 22, 32, 0.89) 46%,
    rgba(14, 22, 32, 0.62) 70%,
    rgba(14, 22, 32, 0.4) 100%
  );
}
/* the accent half of the CTA headline, over a dark photograph: the mid-tone brand
   blue reads as grey there, so the light tint carries it instead */
.text-gold { color: var(--brand-pale) !important; }
/* drop-shadow, not text-shadow: the accent is a gradient clipped to the glyphs,
   and text-shadow would paint a slab behind the transparent fill */
.cta__box .section-title { filter: drop-shadow(0 2px 14px rgba(14, 22, 32, 0.85)); }
.cta__lead { color: rgba(255, 255, 255, 0.75); font-size: 16px; margin: 18px 0 0; max-width: 440px; }
.cta__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(14px);
}
.cta__form input,
.cta__form select,
.cta__form .selx__face {
  height: 56px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.96);
  padding: 0 18px;
  font-size: 15px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.3s;
}
.cta__form input:focus, .cta__form select:focus, .cta__form .selx__face:focus { border-color: var(--gold); }
/* Row 1 name + phone, row 2 interest + city, then the button across the full width. */
.cta__form select, .cta__form .selx__face { appearance: none; -webkit-appearance: none; padding-right: 40px; 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
.cta__submit {
  grid-column: 1 / -1;
  height: 58px;
  border: 0;
  border-radius: 14px;
  background: var(--gold);
  color: var(--ink);
  font-weight: 700;
  font-size: 15px;
  transition: background 0.4s, color 0.4s;
}
.cta__submit:hover { background: #fff; }

/* ==========================================================================
   Legal documents (privacy policy, terms)
   Set as a printed instrument rather than a web article: a white sheet on the
   sand ground, a letterhead that carries the RERA number, and clauses numbered
   by a CSS counter so a section can be inserted without renumbering by hand.
   ========================================================================== */
.doc { background: var(--sand); padding-block: clamp(112px, 9vw, 150px) clamp(52px, 6vw, 90px); }
.doc__sheet {
  max-width: 940px;
  margin-inline: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: clamp(28px, 4.2vw, 68px) clamp(22px, 4.4vw, 78px) clamp(34px, 4.6vw, 72px);
  /* a close, low shadow reads as paper; a soft wide one reads as a card */
  box-shadow: 0 1px 2px rgba(14, 22, 32, 0.06), 0 18px 48px -28px rgba(14, 22, 32, 0.3);
}

/* letterhead */
.doc__head { text-align: center; padding-bottom: clamp(18px, 2.2vw, 28px); border-bottom: 2px solid var(--brand-deep); }
.doc__logo { display: inline-block; }
.doc__logo img { height: clamp(62px, 6vw, 84px); width: auto; display: block; }
.doc__org { margin: 12px 0 0; font-family: var(--font-head); font-size: clamp(17px, 1.8vw, 22px); font-weight: 500; letter-spacing: 0.01em; color: var(--ink); }
.doc__addr { margin: 6px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--muted); }
.doc__addr a { color: var(--muted); }
.doc__addr a:hover { color: var(--brand-deep); }
.doc__rera { display: inline-block; margin-top: 10px; padding: 3px 12px; border-radius: 999px; background: rgba(106, 151, 204, 0.14); font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-deep); }

/* title block */
.doc__titleblock { text-align: center; margin: clamp(26px, 3.2vw, 44px) 0 clamp(20px, 2.4vw, 32px); }
.doc__title { margin: 0; font-family: var(--font-head); font-size: clamp(23px, 2.9vw, 34px); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
.doc__rule { width: 56px; height: 2px; margin: 14px auto 0; background: var(--brand); border: 0; }
.doc__date { margin: 14px 0 0; font-size: 13px; color: var(--muted); }
.doc__date b { color: var(--ink); font-weight: 600; }

/* body */
.doc__body { counter-reset: clause; }
.doc__lead { font-size: 15.5px; line-height: 1.85; color: var(--ink-2); margin: 0 0 8px; }
.doc__body h2 {
  counter-increment: clause;
  display: flex;
  gap: 12px;
  margin: clamp(28px, 3vw, 40px) 0 12px;
  font-size: clamp(16.5px, 1.6vw, 19px);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  scroll-margin-top: 120px;
}
.doc__body h2::before { content: counter(clause) "."; flex: 0 0 auto; color: var(--brand-deep); font-variant-numeric: tabular-nums; }
.doc__body p { font-size: 15px; line-height: 1.85; color: var(--muted); margin: 0 0 14px; }
.doc__body > p, .doc__body > ol { padding-left: clamp(0px, 2.2vw, 30px); }
.doc__body a { color: var(--brand-deep); border-bottom: 1px solid rgba(31, 92, 158, 0.35); }
.doc__body a:hover { border-bottom-color: var(--brand-deep); }
.doc__body b { color: var(--ink); font-weight: 600; }

/* sub-clauses: 1.1, 1.2 … numbered off the parent so inserts renumber themselves */
.doc__list { list-style: none; counter-reset: sub; margin: 0 0 16px; padding: 0; display: grid; gap: 11px; }
.doc__list > li { position: relative; counter-increment: sub; padding-left: 38px; font-size: 15px; line-height: 1.8; color: var(--muted); }
.doc__list > li::before {
  content: counter(clause) "." counter(sub);
  position: absolute; left: 0; top: 0;
  font-size: 13px; font-weight: 600; color: var(--brand-deep);
  font-variant-numeric: tabular-nums;
}

/* the contact panel that closes the document */
.doc__contact { margin-top: 10px; padding: 22px 26px; border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 4px; background: var(--ivory); }
.doc__contact dl { display: grid; grid-template-columns: 116px 1fr; gap: 10px 18px; margin: 0; }
.doc__contact dt { font-size: 12px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.doc__contact dd { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink); }
.doc__contact dd a { color: var(--ink); border-bottom: 1px solid rgba(31, 92, 158, 0.35); }
.doc__contact dd a:hover { color: var(--brand-deep); }

/* sign-off */
.doc__foot { margin-top: clamp(28px, 3vw, 40px); padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; font-size: 12.5px; color: var(--muted); }
.doc__foot a { color: var(--brand-deep); }

@media (max-width: 575.98px) {
  .doc__sheet { border-radius: 0; margin-inline: calc(-1 * clamp(16px, 3vw, 28px)); border-left: 0; border-right: 0; }
  .doc__title { letter-spacing: 0.1em; }
  .doc__contact dl { grid-template-columns: 1fr; gap: 3px; }
  .doc__contact dt { padding-top: 10px; }
}

/* Printing one of these should give a clean instrument, not a screenshot of a site. */
@media print {
  .site-header, .footer, .float-wa, .cta, .doc__foot { display: none !important; }
  .doc { background: #fff; padding: 0; }
  .doc__sheet { max-width: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
  .doc__body h2 { break-after: avoid; }
  .doc__list > li, .doc__contact { break-inside: avoid; }
  .doc__body a { border-bottom: 0; }
}

/* ==========================================================================
   First-visit splash
   Plain white. The exit is a CSS animation rather than a JS callback, so the
   screen always clears itself even if a script later on the page fails.
   ========================================================================== */
.splash { display: none; }
.has-splash .splash {
  display: grid;
  position: fixed;
  inset: 0;
  z-index: 9999;
  place-items: center;
  padding: 24px;
  background: #fff;
  animation: splashOut 2.4s var(--ease) forwards;
}
.splash__inner { display: grid; justify-items: center; gap: clamp(20px, 2.6vw, 30px); text-align: center; }

/* ----- the mark ----- */
.splash__mark {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
  /* square, so the halo and ring below are circles rather than ellipses */
  width: clamp(152px, 17.5vw, 206px);
  aspect-ratio: 1;
}
/* a ring that pushes outwards and dissolves, twice over the hold */
.splash__mark::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 4%;
  border-radius: 50%;
  border: 1px solid rgba(31, 92, 158, 0.4);
  animation: splashRing 1.9s var(--ease) 0.45s infinite;
}
.splash__logo {
  position: relative;
  width: clamp(96px, 11vw, 132px);
  height: auto;
  animation: splashLogo 0.95s var(--ease) both;
}

/* ----- the headline ----- */
.splash__line {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(17px, 2.2vw, 24px);
  line-height: 1.22;
  font-weight: 400;
  color: var(--ink);
}
/* the outer span clips, the inner one travels up through it */
.splash__l { display: block; overflow: hidden; padding-bottom: 0.08em; }
.splash__l > i { display: block; font-style: normal; animation: splashLine 0.85s var(--ease) both; }
.splash__l:first-child > i { animation-delay: 0.3s; }
.splash__l:last-child > i { animation-delay: 0.44s; }
/* "into reality" carries the same gradient the section headings use */
.splash__line em { font-style: normal; color: var(--brand-deep); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .splash__line em {
    background-image: linear-gradient(100deg, var(--brand-deep) 0%, #2f78c4 28%, #7fb0e6 50%, #2f78c4 72%, var(--brand-deep) 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: splashShine 2.6s linear 0.9s infinite;
  }
}

@keyframes splashLogo {
  from { opacity: 0; transform: translateY(12px) scale(0.88); filter: blur(7px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes splashRing {
  0% { transform: scale(0.8); opacity: 0; }
  22% { opacity: 0.85; }
  100% { transform: scale(1.5); opacity: 0; }
}
@keyframes splashLine {
  from { opacity: 0; transform: translateY(110%); letter-spacing: 0.06em; }
  to { opacity: 1; transform: none; letter-spacing: normal; }
}
@keyframes splashShine { from { background-position: 180% 0; } to { background-position: -80% 0; } }
@keyframes splashOut {
  0%, 78% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
  .has-splash .splash { animation: splashOut 1.2s linear forwards; }
  .splash__logo, .splash__l > i, .splash__mark::after, .splash__line em { animation: none; }
  .splash__mark::after { opacity: 0; }
}


/* ==========================================================================
   Select menu
   A native select's open list is drawn by the operating system and cannot be
   styled, so each one is paired with this panel. The <select> itself stays in
   the DOM and remains the source of truth for its value and for form submission;
   this only replaces the list the browser would have drawn.
   ========================================================================== */
.selx { position: relative; }
/* The stand-in is a <div>, so it has to be told to centre its label vertically
   and to look clickable; a real select does both by itself. */
.selx__face { display: flex; align-items: center; cursor: pointer; }
/* the whole box is the hit area, so it should read as one */
.selx--box { cursor: pointer; }
/* the native control stays for forms and for scripts that read it, but is never shown */
.selx > select { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.selx__panel {
  /* parked on <body>: the hero and several cards clip their overflow, which would
     cut the menu off. Positioned in viewport space from the field's own rect. */
  position: fixed;
  z-index: 9998;
  max-height: 232px;
  overflow-y: auto;
  padding: 4px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(14, 22, 32, 0.08);
  box-shadow: 0 16px 36px -20px rgba(14, 22, 32, 0.4), 0 2px 6px rgba(14, 22, 32, 0.05);
  display: none;
}
.selx__panel.is-open { display: block; animation: selxIn 0.18s var(--ease) both; }

.selx__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  line-height: 1.25;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.selx__opt + .selx__opt { margin-top: 1px; }
.selx__opt:hover, .selx__opt.is-cursor { background: var(--ivory); }
.selx__opt[aria-selected='true'] { background: var(--brand-deep); color: #fff; }
.selx__opt[aria-selected='true']:hover { background: var(--brand-deep); }
/* the tick only shows on the chosen row, and holds its space so nothing shifts */
.selx__opt svg { flex-shrink: 0; opacity: 0; }
.selx__opt[aria-selected='true'] svg { opacity: 1; }

.selx__panel::-webkit-scrollbar { width: 8px; }
.selx__panel::-webkit-scrollbar-thumb { background: rgba(14, 22, 32, 0.18); border-radius: 99px; border: 2px solid #fff; }

@keyframes selxIn { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .selx__panel.is-open { animation: none; } }

.footer { background: var(--ink); color: rgba(255, 255, 255, 0.7); padding-top: clamp(64px, 8vw, 110px); overflow: hidden; }
.footer__about { margin: 22px 0 26px; line-height: 1.7; max-width: 360px; }
.footer__social { display: flex; gap: 10px; }
.footer__social a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-light);
  color: #fff;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.footer__social a:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.footer__title {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 22px;
}
.footer__links { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.footer__links a { 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 0 24px; display: grid; gap: 16px; }
.footer__contact li { display: grid; gap: 2px; }
.footer__contact small { font-size: 12px; color: rgba(255, 255, 255, 0.45); }
.footer__contact a, .footer__contact span { color: #fff; font-weight: 500; }
.footer__contact a:hover { color: var(--gold); }
.footer__word {
  font-size: clamp(16px, 6.2vw, 96px); /* sized so the full name fits on one line */
  white-space: nowrap;
  /* lowercase has descenders, so the box needs room below the baseline and the
     fade has to run past them, or the tails of "p" and "y" vanish */
  line-height: 1.2;
  text-transform: capitalize;
  text-align: center;
  letter-spacing: -0.02em;
  margin-top: clamp(40px, 6vw, 80px);
  background: linear-gradient(180deg, rgba(106, 151, 204, 0.38) 10%, rgba(106, 151, 204, 0.06) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  user-select: none;
}
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 26px 0 32px;
  border-top: 1px solid var(--line-light);
  font-size: 14px;
}
.footer__legal { display: flex; gap: 20px; }
.footer__legal a:hover { color: var(--gold); }

@media (max-width: 575.98px) {
  .cta__form { grid-template-columns: 1fr; }
  .cta__box { border-radius: 24px; }
  .footer__bottom { flex-direction: column; }
}

/* ==========================================================================
   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 4s, then cross-fades
  into the next over 1.5s. Both slides run the same loop, offset by 5.5s.
*/
.hero__slide {
  --dur: 11s; /* 2 slides × (4s 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; }
  13.64% { opacity: 1; }  /* 1.5s dissolve in */
  50% { opacity: 1; }     /* hold */
  63.64% { 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.38), transparent 72%),
    linear-gradient(180deg, rgba(14, 22, 32, 0.58) 0%, rgba(14, 22, 32, 0.12) 35%, rgba(14, 22, 32, 0.2) 65%, rgba(14, 22, 32, 0.82) 100%);
}
.hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero__eyebrow::after {
  content: '';
  width: 36px;
  height: 1px;
  background: currentColor;
}
/* the company name, in the same blue gradient as "into reality" below it */
.hero__brand {
  margin: 0 0 10px;
  font-family: var(--font-head);
  font-size: clamp(26px, 4vw, 56px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  background-image: linear-gradient(100deg, var(--brand) 0%, var(--brand-light) 28%, #eaf3fd 52%, var(--brand-light) 74%, var(--brand) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.hero__title {
  font-size: clamp(19px, 2.3vw, 32px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 0 0 20px;
}
/* both halves sit on one line; each still clips its own reveal */
.hero__title .line { display: inline-block; overflow: hidden; padding-bottom: 0.06em; vertical-align: top; }
.hero__title .line + .line { margin-left: 0.25em; }
.hero__title .line > span { display: inline-block; }
.hero__title em {
  font-style: normal;
  background-image: linear-gradient(100deg, var(--brand) 0%, var(--brand-light) 28%, #eaf3fd 52%, var(--brand-light) 74%, var(--brand) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
/* hero text legibility: carried by the glyphs, not by dimming the photo */
.hero__brand, .hero__title { filter: drop-shadow(0 2px 10px rgba(14, 22, 32, 0.7)); }
.hero__eyebrow, .hero__lead { text-shadow: 0 1px 10px rgba(14, 22, 32, 0.75); }

.hero__lead {
  max-width: 640px;
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: 500;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 36px;
}

/* ---------- Search ---------- */
.search {
  width: min(100%, 980px);
  text-align: left;
}
.search__tabs {
  position: relative;
  display: inline-flex;
  padding: 5px;
  border-radius: 16px 16px 0 0;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
}
.search__tab {
  position: relative;
  z-index: 1;
  border: 0;
  background: transparent;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 12px;
  color: var(--muted);
  transition: color 0.4s var(--ease);
}
.search__tab.is-active { color: #fff; }
.search__tab-pill {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  border-radius: 12px;
  background: var(--ink);
  transition: transform 0.5s var(--ease), width 0.5s var(--ease);
}
.search__body {
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  align-items: center;
  background: #fff;
  color: var(--ink);
  border-radius: 0 22px 22px 22px;
  padding: 12px 12px 12px 8px;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6);
}
.search__field {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 8px 22px;
  margin: 0;
  cursor: pointer;
}
.search__field + .search__field { border-left: 1px solid var(--line); }
.search__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.search__select { accent-color: var(--brand-deep); }

/* dropdown list */
.search__select option {
  background: #ffffff;
  color: var(--ink);
  font-size: 15px;
  padding: 10px 12px;
}
.search__select option:checked,
.search__select option:hover { background: var(--brand-deep); color: #ffffff; }
.search__select option:disabled { color: var(--muted); }
.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='%230e1620' 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: var(--ink);
  width: 100%;
  cursor: pointer;
  outline: none;
}
.search__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 60px;
  padding: 0 34px;
  border: 0;
  border-radius: 16px;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.search__submit:hover { background: var(--gold); color: var(--ink); }

.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(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.popular__chip:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }

@media (max-width: 991.98px) {
  .search__body { grid-template-columns: 1fr 1fr; gap: 4px; padding: 12px; }
  .search__field { padding: 12px 14px; border: 0 !important; background: var(--ivory); 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: 0 0 18px 18px; }
  .search__tabs { display: flex; width: 100%; border-radius: 18px 18px 0 0; }
  .search__tab { flex: 1; padding: 10px 8px; }
  .popular__label { width: 100%; margin: 0; }
  .hero__eyebrow { font-size: 11px; letter-spacing: 0.18em; }
  .hero__eyebrow::before, .hero__eyebrow::after { display: none; }
}

/* ==========================================================================
   Home: offerings
   ========================================================================== */

.offer-panels {
  display: flex;
  gap: 18px;
  height: clamp(380px, 30vw, 460px);
}
.offer {
  position: relative;
  flex: 1;
  min-width: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px;
  transition: flex 0.9s var(--ease);
  isolation: isolate;
}
.offer.is-open { flex: 1.9; }
.offer .offer__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transform: scale(1.05);
  transition: transform 1.4s var(--ease);
}
.offer.is-open .offer__img { transform: scale(1); }
.offer__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(14, 22, 32, 0.4) 0%,
    rgba(14, 22, 32, 0.06) 26%,
    rgba(14, 22, 32, 0.32) 48%,
    rgba(14, 22, 32, 0.64) 66%,
    rgba(14, 22, 32, 0.86) 82%,
    rgba(14, 22, 32, 0.96) 100%
  );
}
.offer__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.offer__no {
  font-family: var(--font-head);
  font-size: 15px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(6px);
}
.offer__count {
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  white-space: nowrap;
}
.offer__body { max-width: 440px; padding-right: 60px; }
.offer__title { font-size: clamp(21px, 1.9vw, 28px); margin: 0; }
.offer__more {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.8s var(--ease), opacity 0.6s var(--ease);
}
.offer__more > * { overflow: hidden; }
.offer.is-open .offer__more { grid-template-rows: 1fr; opacity: 1; }
.offer__text { display: block; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.8); padding-top: 12px; }
.offer__tags { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 16px; }
.offer__tags span {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.offer__arrow {
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:#486a91;
  color: #ffff;
  transition: transform 0.6s var(--ease);
}
.offer:hover .offer__arrow { transform: rotate(45deg); }

@media (max-width: 991.98px) {
  .offer-panels { flex-direction: column; height: auto; }
  /* stacked cards show their whole body, so the smoke has to start higher up */
  .offer__shade {
    background: linear-gradient(
      180deg,
      rgba(14, 22, 32, 0.46) 0%,
      rgba(14, 22, 32, 0.3) 20%,
      rgba(14, 22, 32, 0.66) 38%,
      rgba(14, 22, 32, 0.76) 56%,
      rgba(14, 22, 32, 0.88) 76%,
      rgba(14, 22, 32, 0.94) 100%
    );
  }
  .offer, .offer.is-open { flex: none; min-height: 340px; }
  .offer__more { grid-template-rows: 1fr; opacity: 1; }
  .offer .offer__img { transform: none; }
}
@media (max-width: 575.98px) {
  .offer, .offer.is-open { min-height: 300px; padding: 20px; border-radius: 22px; }
  .offer__arrow { width: 48px; height: 48px; right: 18px; bottom: 18px; }
}

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

/* Editorial text tabs with a sliding gold underline */
.filters {
  position: relative;
  display: flex;
  gap: clamp(22px, 3vw, 40px);
  border-bottom: 1px solid var(--line);
}
.filters__btn {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: 4px;
  border: 0;
  background: none;
  padding: 0 0 14px;
  font-family: var(--font-head);
  font-size: clamp(17px, 1.5vw, 20px);
  white-space: nowrap;
  color: var(--muted);
  transition: color 0.35s var(--ease);
}
.filters__btn sup {
  top: 0;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gold-deep);
  opacity: 0.6;
  transition: opacity 0.35s;
}
.filters__btn:hover,
.filters__btn.is-active { color: var(--ink); }
.filters__btn.is-active sup { opacity: 1; }
.filters__bar {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 0;
  background: var(--gold);
  transition: transform 0.55s var(--ease), width 0.55s var(--ease);
}

.featured__item.is-hidden { display: none; }

.pcard {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 10px;
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.pcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.pcard__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 20px;
}
.pcard__media img { width: 100%; height: 100%; object-fit: cover; }
.pcard__status {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: #486a91;
  color: #fff;
}
.pcard__type {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
  background: rgba(14, 22, 32, 0.55);
  color: #fff;
  backdrop-filter: blur(8px);
}
.pcard__body { padding: 20px 14px 10px; display: flex; flex-direction: column; flex: 1; }
.pcard__dev {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.pcard__name { font-size: 21px; margin: 8px 0 8px; }
.pcard__name a { transition: color 0.3s; }
.pcard__name a:hover { color: var(--gold-deep); }
.pcard__loc { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); margin: 0 0 18px; }
.pcard__meta {
  list-style: none;
  padding: 14px 0;
  margin: 0 0 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-block: 1px solid var(--line);
}
.pcard__meta li { font-size: 14px; font-weight: 600; display: grid; gap: 2px; }
.pcard__meta li + li { padding-left: 16px; border-left: 1px solid var(--line); }
.pcard__meta small, .pcard__price small { font-size: 12px; font-weight: 500; color: var(--muted); }
.pcard__foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; }
.pcard__price { display: grid; font-family: var(--font-head); font-size: 21px; line-height: 1.2; }
.pcard__price small { font-family: var(--font-body); }
.pcard__btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: #fff;
  transition: background 0.4s, color 0.4s, transform 0.6s var(--ease);
}
.pcard:hover .pcard__btn { background: #486a91; color: #fffcf6; transform: rotate(45deg); }

@media (max-width: 575.98px) {
  .filters { overflow-x: auto; scrollbar-width: none; max-width: 100%; padding-top: 8px; gap: 26px; }
  .filters::-webkit-scrollbar { display: none; }
  .pcard__meta li { font-size: 13px; min-width: 0; }
  .pcard__meta li + li { padding-left: 12px; }
  .pcard__name { font-size: 20px; }
}

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

.why { overflow: hidden; }
.why::before {
  content: '';
  position: absolute;
  width: 700px;
  height: 700px;
  right: -250px;
  top: -250px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(106, 151, 204, 0.16), transparent 65%);
  pointer-events: none;
}
.why__media { position: relative; padding: 0 0 40px 0; }
.why__img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 608 / 682;
}
.why__img img { width: 100%; height: 100%; object-fit: cover; }
.why__badge {
  position: absolute;
  left: clamp(-10px, -2vw, -30px);
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 26px;
  border-radius: 22px;
  background: var(--gold);
  color: var(--ink);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5);
}
.why__badge-num { font-size: 46px; line-height: 1; }
.why__badge-num sup { font-size: 28px; top: -0.9em; }
.why__badge-text { font-size: 14px; font-weight: 600; line-height: 1.4; }

.why__title { font-size: clamp(23px, 2.2vw, 31px); }
.reasons { list-style: none; padding: 0; margin: 0; }
.reason {
  display: flex;
  gap: 18px;
  padding: 20px 0;
  border-top: 1px solid var(--line-light);
}
.reason:last-child { border-bottom: 1px solid var(--line-light); }
.reason__icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: var(--gold);
  background: rgba(106, 151, 204, 0.1);
  border: 1px solid rgba(106, 151, 204, 0.25);
  transition: background 0.4s, color 0.4s;
}
.reason:hover .reason__icon { background: var(--gold); color: var(--ink); }
.reason__title { font-size: 18px; margin: 0 0 8px; }
.reason__text { margin: 0; font-size: 15px; color: rgba(255, 255, 255, 0.62); line-height: 1.65; }

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(64px, 8vw, 110px);
  border-top: 1px solid var(--line-light);
}
.stat { padding: 36px 24px 0; }
.stat + .stat { border-left: 1px solid var(--line-light); }
.stat__num { font-size: clamp(32px, 3.4vw, 48px); line-height: 1; color: var(--gold); }
.stat__label { margin-top: 12px; color: rgba(255, 255, 255, 0.65); font-weight: 500; }

@media (max-width: 991.98px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(n + 3) { border-top: 1px solid var(--line-light); margin-top: 36px; }
  .why__badge { left: 16px; }
}
@media (max-width: 575.98px) {
  .stat { padding: 24px 10px 0; text-align: center; }
  .stat__num { font-size: 27px; white-space: nowrap; }
  .stat__label { margin-top: 8px; font-size: 13px; line-height: 1.4; }
  .why__badge { padding: 16px 18px; }
  .why__badge-num { font-size: 44px; }
}

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

.developers {
  background:
    radial-gradient(ellipse 50% 60% at 50% 50%, rgba(106, 151, 204, 0.12), transparent 70%),
    var(--ivory);
}

/* ---------- Grid ---------- */
.logo-wall {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 132px;
  gap: 1px;
  background: rgba(14, 22, 32, 0.08); /* the 1px gaps become the grid lines */
  border: 1px solid rgba(14, 22, 32, 0.08);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 40px 80px -50px rgba(14, 22, 32, 0.35);
}

.logo-wall__center {
  grid-column: 2 / span 3;
  grid-row: 2 / span 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 32px;
  background:
    radial-gradient(ellipse 80% 90% at 50% 100%, rgba(106, 151, 204, 0.18), transparent 70%),
    linear-gradient(180deg, #fffdf9, #faf5ec);
}
.logo-wall__center .eyebrow { margin-bottom: 12px; }
.logo-wall__center .eyebrow::after {
  content: '';
  width: 36px;
  height: 1px;
  background: currentColor;
}
.logo-wall__title {
  font-size: clamp(24px, 2.4vw, 34px);
  margin: 0 0 10px;
}
.logo-wall__title em { font-style: normal; color: var(--gold-deep); }
.logo-wall__text {
  font-size: 15px;
  color: var(--muted);
  max-width: 420px;
  margin: 0 0 22px;
}
.logo-wall__center .btn-lux { --h: 50px; font-size: 14px; }

/* ---------- Cells ---------- */
.logo-cell {
  position: relative;
  display: grid;
  place-items: center;
  background: #fff;
  overflow: hidden;
  transition: background 0.5s var(--ease);
}
.logo-cell::after {
  /* gold hairline that grows along the bottom on hover / swap */
  content: '';
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: scaleX(0);
  transition: transform 0.7s var(--ease);
}
.logo-cell:hover,
.logo-cell.is-swapping { background: #fffcf6; }
.logo-cell:hover::after,
.logo-cell.is-swapping::after { transform: scaleX(1); }

.logo-cell__name { font-size: 17px; font-weight: 600; letter-spacing: 0.02em; color: rgba(14, 22, 32, 0.32); }
.logo-cell__img {
  grid-area: 1 / 1;
  max-width: 62%;
  max-height: calc(44px * var(--s, 1));
  object-fit: contain;
  filter: grayscale(0.15);
  transition: transform 0.6s var(--ease), filter 0.6s var(--ease);
  will-change: opacity, filter, transform;
}
.logo-cell:hover .logo-cell__img { transform: scale(1.06); filter: none; }

/* 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.35), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  opacity: 0;
  z-index: 2;
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  .logo-wall { grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(112px, auto); }
  .logo-wall__center { grid-column: 1 / -1; grid-row: auto; order: -1; padding: 40px 24px; }
  .logo-cell:nth-of-type(n + 14) { display: none; } /* keep a full last row (12 logos) */
}
@media (max-width: 575.98px) {
  .logo-wall { grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(92px, auto); border-radius: 22px; }
  .logo-cell__img { max-width: 72%; max-height: calc(34px * var(--s, 1)); }
}

/* ==========================================================================
   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(42px, 4.4vw, 64px);
}
.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(31, 92, 158, 0.22); }
.blogs > .container-xl { position: relative; z-index: 1; }

.blogs__grid { display: grid; grid-template-columns: repeat(3, 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%);
}
/* the edge light: a conic gradient spun behind the card, masked to a hairline
   ring so only the outline carries it. The movement the old sweep had, without
   dragging a white band across the photograph. */
@property --bcard-trace {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes bcardTrace { to { --bcard-trace: 360deg; } }

@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .bcard::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    border-radius: inherit;
    padding: 1.6px;
    background: conic-gradient(
      from var(--bcard-trace),
      transparent 0%,
      transparent 58%,
      rgba(156, 188, 227, 0.75) 72%,
      var(--brand-deep) 83%,
      rgba(156, 188, 227, 0.7) 90%,
      transparent 100%
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.45s var(--ease);
  }
  .bcard:hover::after {
    opacity: 1;
    animation: bcardTrace 2.4s linear infinite;
  }
}
.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);
}
/* the headline rule draws itself left to right, the way a printed deck underscores */
.bcard__title {
  font-size: 20px;
  margin: 6px 0 6px;
  /* hug the headline so the rule reads as deliberate, not as a divider */
  width: fit-content;
  max-width: 100%;
  background-image: linear-gradient(var(--brand-deep), var(--brand-deep));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: color 0.3s, background-size 0.45s var(--ease);
}
.bcard:hover .bcard__title { color: var(--brand-deep); background-size: 100% 2px; }
.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;
  -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, 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 .bcard__title { background-size: 100% 2px; }
  .bcard:hover::after { animation: none; }
}

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

.phero {
  position: relative;
  min-height: min(76svh, 720px);
  display: flex;
  align-items: flex-end;
  padding: 168px 0 92px; /* top clears the fixed 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;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-bottom: 18px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 6px rgba(14, 22, 32, 0.8);
}
/* each item stays whole; only the row between items may break */
.phero__crumbs > * { white-space: nowrap; }
.phero__crumbs a { color: rgba(255, 255, 255, 0.72); transition: color 0.3s; }
.phero__crumbs a:hover { color: var(--gold-2); }
.phero__crumbs svg { width: 11px; height: 11px; opacity: 0.45; }
.phero__crumbs span { color: var(--gold-2); font-weight: 600; }

.phero__title {
  font-size: clamp(28px, 3.6vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  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; }
.phero__title em {
  font-style: normal;
  background-image: linear-gradient(100deg, var(--brand) 0%, var(--brand-light) 28%, #eaf3fd 52%, var(--brand-light) 74%, var(--brand) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.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 {
    align-items: center;
    padding: 102px 0 28px; /* 74px navbar + 28px, matching the 28px below */
    min-height: min(58svh, 460px);
  }
  .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.2s 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(21px, 1.9vw, 28px); 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; justify-items: start; }
  /* a portrait, not a landscape still: hold it square so it is never upscaled */
  .tile--quote__img { aspect-ratio: 1; width: 150px; }
  .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.5s var(--ease), box-shadow 0.5s 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(26px, 2.6vw, 36px);
  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.5s var(--ease), color 0.5s var(--ease), transform 0.6s 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.6s var(--ease), transform 0.8s 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.5vw, 34px); }

/* ---------- 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: 22px; 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: 999px;
  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); }
.channels__grid { position: relative; z-index: 3; list-style: none; margin: -56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.channel { position: relative; display: flex; gap: 14px; height: 100%; padding: 22px 20px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: 0 20px 40px -32px rgba(14, 22, 32, 0.35); transition: transform 0.4s var(--ease), border-color 0.3s; }
.channel:hover { transform: translateY(-4px); border-color: rgba(106, 151, 204, 0.6); }
.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.4vw, 33px); 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(--ivory); color: var(--ink); border: 1px solid var(--line); }
.hq__tag { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand-deep); }
.hq__addr { display: flex; gap: 10px; margin: 10px 0 12px; line-height: 1.6; color: var(--ink); }
.hq__addr svg { flex-shrink: 0; margin-top: 3px; color: var(--brand); }
.hq .link-arrow { color: var(--brand-deep); font-size: 14px; }
.hours { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.hours div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.hours dt { font-weight: 500; color: var(--muted); }
.hours dd { margin: 0; font-weight: 600; text-align: right; color: var(--ink); }

/* offices */
.offices { background: #fff; }
.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; }

@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 */
.join { background: var(--ivory); }
.join__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.join__media { position: relative; padding: 0 0 60px 0; }
.join__img { border-radius: 26px; overflow: hidden; }
.join__img img { width: 100%; height: 100%; object-fit: cover; }
.join__img--a { width: 78%; aspect-ratio: 4 / 4.4; }
.join__img--b { position: absolute; right: 0; bottom: 0; width: 48%; aspect-ratio: 1; border: 8px solid var(--ivory); }
.join__badge { position: absolute; left: 18px; bottom: 90px; display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-radius: 18px; background: var(--gold); color: var(--ink); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.4); }
.join__badge strong { font-size: 34px; font-weight: 400; line-height: 1; }
.join__badge span { font-size: 13px; font-weight: 600; line-height: 1.3; }
.join__title { font-size: clamp(24px, 2.5vw, 34px); margin-bottom: 18px; }
.join__p { color: var(--muted); line-height: 1.8; }
.join__stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 28px 0 0; border-block: 1px solid var(--line); }
.join__stats div { padding: 18px 0; }
.join__stats div + div { padding-left: 18px; border-left: 1px solid var(--line); }
.join__stats dd { margin: 0; font-size: 30px; color: var(--gold-deep); line-height: 1.1; }
.join__stats dt { font-size: 13px; font-weight: 500; color: var(--muted); }

/* 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__grid li:hover { border-color: rgba(106, 151, 204, 0.6); transform: translateY(-4px); }
.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 { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 32px; }
.jobs__filter { border: 0; background: none; padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--muted); transition: background 0.3s, color 0.3s; }
.jobs__filter span { margin-left: 4px; font-size: 11px; opacity: 0.7; }
.jobs__filter.is-active { background: var(--ink); color: #fff; }
.jobs__list { display: grid; gap: 12px; }
.job { border-radius: 20px; border: 1px solid var(--line); transition: border-color 0.3s, box-shadow 0.4s; }
.job[hidden] { display: none; }
.job:hover { border-color: rgba(106, 151, 204, 0.55); }
.job[open] { border-color: rgba(106, 151, 204, 0.6); box-shadow: 0 24px 50px -36px rgba(14, 22, 32, 0.45); }
.job__row { list-style: none; display: flex; align-items: center; gap: 20px; padding: 22px 24px; cursor: pointer; }
.job__row::-webkit-details-marker { display: none; }
.job__main { flex: 1; display: grid; gap: 8px; min-width: 0; }
.job__title { font-family: var(--font-head); font-size: clamp(18px, 1.6vw, 22px); font-weight: 400; 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); }
.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 li { padding: 28px 24px; border-radius: 22px; background: #fff; border: 1px solid var(--line); }
.hire__no { font-size: 38px; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--gold-deep); }
.hire__steps h3 { font-size: 20px; margin: 14px 0 8px; }
.hire__steps p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.6; }

/* apply */
/*
  A photograph behind the application block rather than flat ink. The overlay is
  heavier on the left, where the white copy sits, and lighter on the right, where
  the form's own white panel covers it anyway.
*/
.apply { position: relative; overflow: hidden; }
.apply__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.apply__bg img { width: 100%; height: 100%; object-fit: cover; }
.apply__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(14, 22, 32, 0.95) 0%, rgba(14, 22, 32, 0.88) 45%, rgba(14, 22, 32, 0.72) 100%),
    linear-gradient(180deg, rgba(14, 22, 32, 0.5), rgba(14, 22, 32, 0.5));
}
.apply > .container-xl { position: relative; z-index: 1; }
.apply__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
.apply__facts { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 16px; }
.apply__facts li { display: grid; gap: 3px; padding-left: 16px; border-left: 2px solid var(--brand); }
.apply__facts span:first-child { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }
.apply__facts a, .apply__facts li > span:last-child { color: #fff; font-weight: 500; font-size: 15px; line-height: 1.5; }
.apply__facts a { transition: color 0.3s var(--ease); }
.apply__facts a:hover { color: var(--brand-light); }
.aform { padding: clamp(24px, 3vw, 40px); border-radius: 26px; background: #fff; 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, .aform .selx__face { 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, .aform .selx__face:focus { border-color: var(--gold); }
.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(31, 92, 158, 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: var(--gold); color: var(--ink); font-weight: 700; font-size: 15px; transition: background 0.3s; }
.aform__submit:hover { background: var(--gold-2); }
.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) {
  .join__grid, .apply__grid { grid-template-columns: 1fr; }
  .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__body { margin: 0 18px; }
}

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

.pc {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 10px;
  border: 1px solid var(--line);
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease), border-color 0.6s var(--ease);
}
.pc:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); border-color: transparent; }
.pc__media { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; }
.pc__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.pc:hover .pc__media img { transform: scale(1.06); }
.pc__status, .pc__type {
  position: absolute;
  top: 14px;
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.pc__status { left: 14px; background: #5f87b7; color: #fff; }
.pc__type { right: 14px; text-transform: capitalize; background: rgba(14, 22, 32, 0.55); color: #fff; backdrop-filter: blur(8px); }
/* how far along the build is: shown only when the stage is actually known */
.pc__stage {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.93);
  color: var(--brand-deep);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 18px -12px rgba(14, 22, 32, 0.75);
}

.pc__body { padding: 20px 14px 10px; display: flex; flex-direction: column; flex: 1; }
.pc__dev { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep); }
.pc__name { font-size: 21px; margin: 8px 0; }
.pc__name a { transition: color 0.3s; }
.pc__name a:hover { color: var(--gold-deep); }
.pc__loc { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); margin: 0 0 18px; }
.pc__loc svg { flex-shrink: 0; }
.pc__meta {
  list-style: none;
  padding: 14px 0;
  margin: 0 0 16px;
  display: grid;
  grid-template-columns: 1.1fr 1.2fr 0.9fr;
  border-block: 1px solid var(--line);
}
.pc__meta li { font-size: 13.5px; font-weight: 600; display: grid; gap: 2px; min-width: 0; }
.pc__meta li + li { padding-left: 12px; border-left: 1px solid var(--line); }
.pc__meta small, .pc__price small { font-size: 12px; font-weight: 500; color: var(--muted); }
.pc__foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; }
.pc__price { display: grid; font-family: var(--font-head); font-size: 21px; line-height: 1.2; }
.pc__price small { font-family: var(--font-body); }
.pc__btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: #fff;
  transition: background 0.4s, color 0.4s, transform 0.6s var(--ease);
}
.pc:hover .pc__btn { background: var(--gold); color: var(--ink); transform: rotate(45deg); }

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

.listing { background: var(--ivory); padding: 0 0 clamp(44px, 5.4vw, 76px); }

/* ---------- Filters panel (overlaps the hero) ---------- */
.listing-filters {
  position: relative;
  z-index: 3;
  margin-top: -56px;
  padding: 22px;
  background: #fff;
  border-radius: 26px;
  box-shadow: 0 30px 70px -36px rgba(14, 22, 32, 0.4);
  display: grid;
  gap: 18px;
}
.listing-filters > * { min-width: 0; }
/*
  On the projects page this bar lifts to overlap the hero. The category pages place
  it under a section heading instead, so there it sits where it falls. The two-class
  selector also beats the smaller lift set at the mobile breakpoint.
*/
.cprojects .listing-filters { margin-top: 0; }
.filters__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }

.ftabs { display: flex; gap: 6px; padding: 5px; border-radius: 999px; 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: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: repeat(4, 1fr) auto; gap: 12px; }
.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, .fsel .selx__face {
  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: 36px 0 22px; }
.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(3, 1fr); gap: 24px; }
.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(31, 92, 158, 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: 56px; 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; }
}

/* types */
.types { background: var(--ivory); }
.tcard:hover .tcard__arrow, .ocard:hover .tcard__arrow { transform: rotate(45deg); }
.why-cat > .container-xl { position: relative; z-index: 1; }

/* projects */
.cprojects { background: var(--ivory); }
.cities { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; border-radius: 999px; background: #fff; }
.cities__btn.is-active { background: var(--ink); color: #fff; }

/* process */
.process { background: #fff; position: relative; overflow: hidden; padding-top: clamp(44px, 5vw, 72px); padding-bottom: clamp(96px, 10vw, 150px); }
.process__city {
  position: absolute; left: 0; right: 0; bottom: 0; height: clamp(140px, 13vw, 200px); pointer-events: none;
  /* fade the rooftops so they never compete with the step text */
  mask-image: linear-gradient(to top, #000 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, #000 70%, transparent 100%);
}
.process__bld { position: absolute; bottom: 0; height: 100%; width: auto; max-width: 50%; object-fit: contain; opacity: 0.85; }
.process::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(31, 92, 158, 0.45), transparent); }
.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); }
@media (max-width: 767.98px) {
  .why-cat__list, .cprojects__grid, .others__grid { grid-template-columns: 1fr; }
  .process__city { height: 130px; }
  .process { padding-bottom: 130px; }
  .process__bld { max-width: 60%; }
  /*
    The white pill container only reads correctly while the chips fit one line.
    Once they wrap it becomes an odd two-row blob, so on small screens drop the
    container and let each chip stand on its own, flowing into as many rows as
    it needs.
  */
  .cities { background: none; padding: 0; gap: 8px; border-radius: 0; width: 100%; }
  .cities__btn.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
}

/* banner centred on phones */
@media (max-width: 575.98px) {
  .phero__inner { text-align: center; }
  .phero__crumbs { margin-inline: auto; justify-content: center; }
  .phero .eyebrow { justify-content: center; }
  .phero__title, .phero__text { margin-inline: auto; }
  .phero__title .line { justify-content: center; }
}


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

.eform { --bg: var(--ivory); --fg: var(--ink); --muted-c: var(--muted); --line-c: var(--line); position: relative; }
.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, .eform .selx__face {
  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, .eform .selx__face:focus { border-color: var(--gold); }
.eform .selx__face, .aform .selx__face { padding-right: 40px; background-image: var(--chev); background-repeat: no-repeat; background-position: right 16px center; }
.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(100svh, 900px); 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: 150px; padding-bottom: 48px; }
.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(40px, 5.6vw, 80px); 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; -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(6, 1fr); margin: 0; }
.dh__facts div { padding: 22px 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 {
  /* how far the bar steps down when the main navbar is on screen; read by the
     anchor-scroll handler too, so both agree on how much room to leave */
  --stabs-push: 80px;
  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: var(--stabs-push); }
.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 { --stabs-push: 64px; } .stabs__link { padding: 18px 12px; font-size: 12px; } }

/* ==========================================================================
   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, 1fr) 440px; gap: clamp(32px, 5vw, 72px); align-items: start; }

.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(21px, 1.9vw, 28px); 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 {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #fff;
  color: var(--gold-deep);
  box-shadow: inset 0 0 0 1px rgba(14, 22, 32, 0.05);
  transition: color 0.4s, background 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); background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); transform: scale(1.06); }

/* 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: 999px; 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__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__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__specs dd.font-head { font-weight: 400; font-size: 20px; color: var(--gold-deep); }

.pay { margin-top: 28px; }
.pay__title { font-size: 20px; 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(31, 92, 158, 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); }

/* 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: calc(var(--stabs-space, 76px) + 20px); transition: top 0.6s var(--ease); }
.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: 23px; 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, 1fr) 380px; } .am-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 991.98px) {
  .pb__grid { grid-template-columns: 1fr; }
  .side { position: static; order: -1; 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(31, 92, 158, 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(24px, 2.4vw, 30px); 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: 22px 18px 18px; }
  .emodal__close { top: 10px; right: 10px; width: 38px; height: 38px; }
  .emodal__title { font-size: 21px; margin: 4px 34px 4px 0; }
  .emodal__sub { font-size: 13.5px; margin-bottom: 14px; }
  .emodal .eform__fields { gap: 10px; }
  .emodal .eform__field { gap: 4px; }
  .emodal .eform__field > span, .emodal .eform__pref legend { font-size: 11px; }
  .emodal .eform input[type='text'], .emodal .eform input[type='tel'], .emodal .eform input[type='email'], .emodal .eform select, .emodal .eform .selx__face { height: 46px; }
  .emodal .eform__chip span { padding: 7px 14px; font-size: 13px; }
  .emodal .eform__pref { gap: 6px; }
  .emodal .eform__consent { margin: 12px 0; font-size: 12px; }
  .emodal .eform__submit { height: 50px; }
}

/* ==========================================================================
   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, 1fr); gap: 18px; }

/* ---------- City card ---------- */
.loccard {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 420px;
  padding: 32px 30px 28px;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background: var(--ink);
}
.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); }
.loccard__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* dark at the top so the project count stays readable over a bright sky,
     clear through the middle, dark again behind the name and copy */
  background:
    linear-gradient(180deg, rgba(14, 22, 32, 0.58) 0%, rgba(14, 22, 32, 0.1) 26%, rgba(14, 22, 32, 0.06) 40%, rgba(14, 22, 32, 0.84) 74%, rgba(14, 22, 32, 0.96) 100%);
}
/* hairline frame that lifts to gold on hover */
.loccard::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: inherit;
  pointer-events: none;
  transition: border-color 0.5s var(--ease);
}
.loccard:hover::after { border-color: rgba(106, 151, 204, 0.55); }

.loccard__count {
  position: absolute;
  top: 26px;
  left: 30px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-2);
}
.loccard__body { display: grid; gap: 0; width: 100%; }
.loccard__name {
  font-family: var(--font-head);
  font-size: clamp(26px, 2.1vw, 33px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
}
/* gold rule that draws out from under the name */
.loccard__rule {
  height: 1px;
  width: 34px;
  margin: 16px 0 14px;
  background: var(--gold);
  transition: width 0.6s var(--ease);
}
.loccard:hover .loccard__rule { width: 72px; }
.loccard__text {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  max-width: 34ch;
}
.loccard__go {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0.75;
  transition: opacity 0.4s, gap 0.4s var(--ease), color 0.4s;
}
.loccard:hover .loccard__go { opacity: 1; gap: 15px; color: var(--gold-2); }

/* ---------- 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: 6px;
  min-width: 248px;
  padding-top: 12px; /* keeps hover contiguous with the bar */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s;
}
.navbar-lux__has-menu:hover .navbar-lux__menu,
.navbar-lux__has-menu:focus-within .navbar-lux__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.navbar-lux__panel {
  display: grid;
  padding: 8px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 26px 52px -30px rgba(14, 22, 32, 0.5);
}
.navbar-lux__panel a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 11px 14px;
  border-radius: 11px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  transition: background 0.3s, color 0.3s;
}
.navbar-lux__panel a:hover { background: var(--ivory); color: var(--gold-deep); }
.navbar-lux__panel a span {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.navbar-lux__panel a:hover span { color: var(--gold-deep); }

/* Mobile menu: the same four links, nested under Projects */
.mobile-menu { overflow-y: auto; }
.mobile-menu__sub {
  list-style: none;
  margin: 0 0 12px;
  padding: 4px;
  border-radius: 10px;
  background: #f5f7fa;
  display: grid;
}
.mobile-menu__links .mobile-menu__sub a {
  font-size: 14px;
  font-weight: 400;
  padding: 10px 12px;
  border-radius: 7px;
  color: var(--ink-3);
}
.mobile-menu__links .mobile-menu__sub a:hover { background: #fff; color: var(--gold-deep); }

/* ==========================================================================
   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; }
}

/* ==========================================================================
   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(36px, 3.8vw, 56px); }
.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(22px, 2.1vw, 30px); }
.team__head .section-lead { margin-top: 10px; font-size: 14.5px; }

.team__grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 228px), 1fr));
  gap: clamp(22px, 2.6vw, 38px);
  max-width: 1180px;
}

/*
  Portrait-led: the photograph carries the card and the chrome is gone. One corner
  of each frame opens into a wide arc, mirrored along the row so the line-up reads
  as a set rather than four identical tiles.
*/
.tmember { position: relative; display: block; }

.tmember__well {
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1.08;
  background: var(--ivory);
  border-radius: 14px 42% 14px 14px;
  transition: border-radius 0.75s var(--ease), box-shadow 0.6s var(--ease);
}
/* the arc alternates sides down the row */
.tmember:nth-child(even) .tmember__well { border-radius: 42% 14px 14px 14px; }
/* and swings to the far corner on hover, which is where the motion comes from */
.tmember:hover .tmember__well { border-radius: 14px 14px 42% 14px; box-shadow: 0 30px 56px -34px rgba(18, 49, 95, 0.55); }
.tmember:nth-child(even):hover .tmember__well { border-radius: 14px 14px 14px 42%; }

.tmember__well img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
  /* monochrome at rest, colour as the viewer settles on a face */
  filter: grayscale(1) contrast(1.04);
  transition: filter 0.75s var(--ease), transform 0.9s var(--ease);
}
.tmember:hover .tmember__well img { filter: grayscale(0) contrast(1); transform: scale(1.045); }

.tmember__body { display: block; padding: 18px 2px 0; }
.tmember__name {
  margin: 0;
  font-size: clamp(19px, 1.5vw, 24px);
  line-height: 1.2;
  color: var(--ink);
  transition: color 0.45s var(--ease);
}
.tmember:hover .tmember__name { color: var(--brand-deep); }
.tmember__role {
  display: block;
  margin-top: 7px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.45;
  color: var(--muted);
}

@media (max-width: 575.98px) {
  .team__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .tmember__name { font-size: 17px; }
  .tmember__role { font-size: 12.5px; margin-top: 5px; }
  .tmember__body { padding-top: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .tmember__well, .tmember__well img, .tmember__name { transition: none; }
  .tmember:hover .tmember__well { border-radius: 14px 42% 14px 14px; }
  .tmember:nth-child(even):hover .tmember__well { border-radius: 42% 14px 14px 14px; }
  .tmember:hover .tmember__well img { transform: none; }
}

/* ========== Home testimonials ========== */
.tst { background: linear-gradient(180deg, var(--sand) 0%, #f4efe6 58%, var(--ivory) 100%); overflow: hidden;
  padding: clamp(42px, 4.6vw, 68px) 0; }
.tst__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr); gap: clamp(26px, 4.2vw, 60px); align-items: center; }

/* ----- left: the review ----- */
.tst__content { min-width: 0; }
.tst .section-title { font-size: clamp(22px, 2.2vw, 30px); }
.tst__stage { display: grid; margin-top: 20px; }
.tst__item { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(18px); pointer-events: none;
  transition: opacity 0.5s var(--ease), transform 0.7s var(--ease), visibility 0.5s linear; }
.tst__item.is-active { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.tst__mark { width: 34px; height: auto; color: var(--gold); opacity: 0.55; margin-bottom: 12px; }
.tst__text { font-family: var(--font-head); font-weight: 400; font-size: clamp(15px, 1.26vw, 17.5px); line-height: 1.62;
  letter-spacing: -0.002em; color: var(--text); margin: 0; }
.tst__by { display: flex; flex-direction: column; gap: 2px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.tst__stars { color: var(--brand-deep); font-size: 13px; letter-spacing: 3px; line-height: 1; margin-bottom: 7px; }
.tst__name { font-size: 15.5px; font-weight: 600; color: var(--text); letter-spacing: 0.01em; }
.tst__role { font-size: 12.5px; color: var(--muted); }

.tst__nav { display: flex; align-items: center; gap: 16px; margin-top: 24px; }
.tst__arrow { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.6);
  color: var(--text); display: grid; place-items: center; cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease); }
.tst__arrow:hover { background: var(--ink); border-color: var(--ink); color: #fff; transform: translateY(-2px); }
.tst__arrow:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.tst__count { font-family: var(--font-head); font-size: 13px; color: var(--muted); letter-spacing: 0.08em; }
.tst__count strong { color: var(--text); font-weight: 600; }
.tst__count i { font-style: normal; margin: 0 5px; opacity: 0.45; }

/* ----- right: the constellation ----- */
.tst__cloudwrap { display: flex; justify-content: center; }
.tst__cloud { position: relative; width: 100%; max-width: 420px; aspect-ratio: 1 / 0.88; }
.tavatar { position: absolute; left: var(--x); top: var(--y); width: var(--size); aspect-ratio: 1;
  translate: -50% -50%; min-width: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer;
  container-type: inline-size;
  animation: tstDissolve 7.5s var(--delay, 0s) ease-in-out infinite;
  transition: transform 0.5s var(--ease), opacity 0.45s var(--ease), filter 0.45s var(--ease); }

/* .tavatar__ini is the stand-in until real client photos exist — swapping one for an
   <img> needs no CSS change, both are styled here. */
.tavatar img,
.tavatar__ini { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
  box-shadow: 0 14px 30px -12px rgba(14, 22, 32, 0.45); filter: grayscale(0.4); opacity: 0.8;
  outline: 2px solid transparent; outline-offset: 3px;
  transition: filter 0.45s var(--ease), opacity 0.45s var(--ease), outline-color 0.45s var(--ease), box-shadow 0.45s var(--ease); }

/* the one being read, the one under the cursor and the focused one hold still */
.tavatar.is-active, .tavatar:hover, .tavatar:focus-visible { animation: none; opacity: 1; filter: none; }
.tavatar:hover { transform: scale(1.07); }
.tavatar:hover img,
.tavatar:hover .tavatar__ini { filter: none; opacity: 1; }
.tavatar:focus-visible { outline: none; }
.tavatar:focus-visible img,
.tavatar:focus-visible .tavatar__ini { outline-color: var(--gold); }
.tavatar.is-active { transform: scale(1.04); }
.tavatar.is-active img,
.tavatar.is-active .tavatar__ini { filter: none; opacity: 1; outline-color: var(--gold);
  box-shadow: 0 20px 44px -14px rgba(14, 22, 32, 0.5); }

/* the dissolve: each face softens away and re-forms on its own offset */
@keyframes tstDissolve {
  0%, 100% { opacity: 1; filter: blur(0); }
  50% { opacity: 0.2; filter: blur(3px); }
}

@media (max-width: 991.98px) {
  .tst__grid { grid-template-columns: 1fr; gap: 28px; }
  .tst__cloudwrap { order: -1; }
  .tst__cloud { max-width: 300px; }
  .tst__stage { margin-top: 16px; }
}
@media (max-width: 575.98px) {
  .tst__cloud { max-width: 270px; }
  .tst__nav { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .tavatar { animation: none; opacity: 1; filter: none; }
  .tst__item { transition: opacity 0.2s linear, visibility 0.2s linear; transform: 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: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: clamp(28px, 3vw, 44px);
}
.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; }
.bloglist__grid { list-style: none; margin: 0; padding: 0; }
.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(24px, 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(31, 92, 158, 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: 78%; 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; }

/* ---------- sidebar ---------- */
.post__aside { position: sticky; top: 104px; display: grid; gap: 18px; }
.post__aside-title { font-size: 20px; 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: 17px; 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;
  -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: 18px; 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; }
}