/* =============================================================================
   SOBHA Realty — campaign landing page
   -----------------------------------------------------------------------------
   Palette: warm white / off-white ground, deep charcoal ink, muted bronze accent.
   The bronze is used sparingly — rules, eyebrows and price emphasis only.
   ========================================================================== */

:root {
  /* Ground */
  --paper:        #FBF9F5;
  --paper-2:      #F3F0EA;
  --paper-3:      #EAE6DE;
  --white:        #FFFFFF;

  /* Ink */
  --ink:          #14140F;
  --ink-2:        #26251F;
  --ink-3:        #55534B;
  --muted:        #7A776D;

  /* Accent */
  --bronze:       #8C6E44;
  --bronze-soft:  #B39463;
  --bronze-tint:  #F0E9DD;
  --bronze-deep:  #6A4F2E;   /* text on --bronze-tint; 5.9:1, passes AA */

  /* Lines */
  --line:         #E1DCD2;
  --line-strong:  #CFC8BA;

  /* Feedback */
  --danger:       #9A3B2E;
  --success:      #3E6B4F;

  /* Type — Ringside first (self-hosted, licensed), Hanken Grotesk as the
     free stand-in. Display and UI share one family; hierarchy comes from
     weight (300 for display) and tracking, not from a second typeface. */
  --sans: "Ringside", "Ringside Regular", "Hanken Grotesk",
          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: var(--sans);

  /* Rhythm */
  --shell:  1280px;
  --gutter: 28px;
  --header-h: 84px;
}

/* --------------------------------------------------------------- reset ---- */

*, *::before, *::after { box-sizing: border-box; }

/* The UA rule for the hidden attribute is `[hidden] { display: none }`, which
   any author rule setting `display` silently beats — .modal-overlay and
   .mobile-menu both do. Left unguarded, those panels stay in the layout at
   opacity 0 and swallow every click on the page. Enforce hidden globally. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

/* Display headings: one family, Light 300, slightly tightened. */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -.015em;
}
p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
  border-radius: 2px;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 20px;
  font-size: 14px;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ================================================================ BUTTONS == */

.btn {
  --btn-py: 13px;
  --btn-px: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: var(--btn-py) var(--btn-px);
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.btn--sm  { --btn-py: 10px; --btn-px: 20px; font-size: 12px; }
.btn--lg  { --btn-py: 16px; --btn-px: 34px; }
.btn--block { width: 100%; }

.btn__icon { width: 16px; height: 16px; flex: none; }

.btn--primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn--primary:hover { background: var(--bronze); border-color: var(--bronze); }

/* Translucent hero pill: soft frosted fill over the photograph, inverting to
   solid white on hover. Both hero CTAs use it, so neither outranks the other. */
.btn--pill {
  border-radius: 999px;
  padding: 17px 44px;
  background: rgba(255, 255, 255, .24);
  color: #fff;
  border-color: rgba(255, 255, 255, .46);
  letter-spacing: .2em;
  font-weight: 400;
  /* No backdrop-filter here on purpose. Applying one to a child of the hero
     promotes a backdrop root that made the compositor drop the hero image
     underneath entirely — the photograph rendered as solid black. The plain
     translucent fill gives the same frosted read with none of the risk. */
}
.btn--pill:hover {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}
.btn--pill:focus-visible { outline-color: #fff; }

.btn--outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--outline:hover { border-color: var(--ink); background: var(--white); }

/* WhatsApp CTAs sit one step below the ink Enquire button: a light, bordered
   secondary action. Used identically in the header, on every card, in the
   final CTA, in the mobile menu and in the sticky bar. */
.btn--whatsapp {
  background: var(--white);
  color: var(--ink-2);
  border-color: var(--line-strong);
}
.btn--whatsapp:hover { border-color: var(--ink); color: var(--ink); }

.btn.is-loading { opacity: .6; cursor: progress; }
.btn:disabled { cursor: not-allowed; }

/* ================================================================= HEADER == */

.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  height: var(--header-h);
  background: rgba(251, 249, 245, .88);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background-color .25s ease;
}
.site-header.is-scrolled {
  border-bottom-color: var(--line);
  background: rgba(251, 249, 245, .96);
}

.site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 32px;
}

/* The lockup is a wide 3.9:1 image — height drives it, width follows. */
.brand {
  display: flex;
  align-items: center;
  flex: none;
}
.brand img {
  height: 48px;
  width: auto;
}

.site-nav {
  display: flex;
  gap: 30px;
  margin-inline: auto;
}
.site-nav a {
  position: relative;
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--ink-3);
  padding-block: 6px;
  transition: color .2s ease;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1px;
  background: var(--bronze);
  transition: right .25s ease;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a:hover::after { right: 0; }

.site-header__actions { display: flex; gap: 10px; flex: none; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 10px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 2px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 1px;
  background: var(--ink);
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------- mobile menu ---- */

.mobile-menu {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 88;
  background: var(--paper);
  padding: 34px var(--gutter) 40px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease;
  overflow-y: auto;
}
.mobile-menu.is-open { opacity: 1; transform: none; }

.mobile-menu nav { display: flex; flex-direction: column; }
.mobile-menu nav a {
  font-family: var(--display);
  font-size: 26px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}

.mobile-menu__actions { display: grid; gap: 12px; }

/* =================================================================== HERO == */
/* Full-bleed architectural image with the copy anchored low and centred, in
   SOBHA's own house style. The sticky header stays opaque above it because
   the lockup is dark artwork and would vanish over the photograph. */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  background: var(--ink);
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
}

.hero__media { position: absolute; inset: 0; }
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Keeps the marina and the built edge in frame as the viewport changes. */
  object-position: center 55%;
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* The render is brightest exactly where the copy sits (water and rooftops),
     so the lower third needs a firm base, not a token wash. */
  background: linear-gradient(
    180deg,
    rgba(8,10,12,.30) 0%,
    rgba(8,10,12,.03) 22%,
    rgba(8,10,12,.16) 52%,
    rgba(8,10,12,.56) 76%,
    rgba(8,10,12,.82) 100%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-bottom: clamp(52px, 8vh, 96px);
}

.hero__title {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2.4rem, 6vw, 5rem);
  line-height: 1.06;
  letter-spacing: -.005em;
  color: #fff;
  text-shadow: 0 2px 30px rgba(0,0,0,.45);
}

.hero__lede {
  margin: clamp(14px, 1.6vw, 22px) auto 0;
  max-width: 62ch;
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 300;
  line-height: 1.5;
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 20px rgba(0,0,0,.5);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: clamp(28px, 3.4vw, 44px);
}

/* ======================================================== SECTION HEADING == */

.section-head { max-width: 640px; }

.section-head__eyebrow {
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-head__eyebrow::after {
  content: "";
  flex: 1;
  max-width: 60px;
  height: 1px;
  background: var(--line-strong);
}

.section-head__title {
  font-family: var(--display);
  font-size: clamp(1.85rem, 3.4vw, 2.7rem);
  font-weight: 300;
  letter-spacing: -.01em;
}

.section-head__lede {
  margin-top: 16px;
  color: var(--ink-3);
  font-weight: 300;
  font-size: 16.5px;
}

.section-head--light .section-head__title { color: var(--paper); }
.section-head--light .section-head__eyebrow { color: var(--bronze-soft); }
.section-head--light .section-head__eyebrow::after { background: rgba(255,255,255,.22); }

/* ============================================================= PROPERTIES == */

.properties { padding-block: clamp(64px, 8vw, 104px); }

.filters {
  margin-top: 44px;
  padding-block: 26px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 48px;
}

.filters__group { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.filters__label {
  font-size: 10.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
  flex: none;
}

.filters__chips { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  padding: 8px 17px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--ink-3);
  cursor: pointer;
  transition: all .18s ease;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.results-bar {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 24px;
}

.results-count {
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.results-note {
  font-size: 12px;
  font-weight: 300;
  letter-spacing: .02em;
  color: var(--muted);
}

.grid {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px 26px;
}

.grid-empty {
  margin-top: 40px;
  padding: 48px 24px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--line-strong);
}

/* ------------------------------------------------------------- the card --- */

.card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
  transition: border-color .25s ease, transform .25s ease;
}
.card:hover { border-color: var(--line-strong); transform: translateY(-2px); }

.card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--paper-3);
  overflow: hidden;
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.card:hover .card__media img { transform: scale(1.035); }

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 22px 20px;
}

.card__eyebrow {
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bronze);
}

.card__dot { margin-inline: 7px; color: var(--line-strong); }

.card__title {
  margin-top: 9px;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 300;
  letter-spacing: -.005em;
  color: var(--ink);
}

.card__beds {
  margin-top: 7px;
  font-size: 13.5px;
  font-weight: 300;
  color: var(--ink-3);
}

/* Both currencies are headline information for this campaign: AED is the
   contract currency, ₹ is what the Indian buyer actually thinks in. They are
   stacked so each gets a full line, with the ₹ carried on a bronze tint so it
   reads at a glance rather than as a footnote. */
.card__price {
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}

.card__price-aed {
  font-size: 21px;
  font-weight: 500;
  letter-spacing: .005em;
  line-height: 1.1;
  color: var(--ink);
}

.card__price-inr {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 5px 11px;
  background: var(--bronze-tint);
  border-radius: 2px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .005em;
  line-height: 1.2;
  color: var(--bronze-deep);
  white-space: nowrap;
}
.card__price-inr .approx {
  font-size: 12px;
  font-weight: 400;
  opacity: .75;
}

.card__facts {
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 300;
  color: var(--muted);
}

/* Payment plan — the strongest commercial hook on the card after the price,
   so it gets a panel of its own rather than another line of text. The bar is
   drawn to the real split, which makes 40/60, 50/50 and 60/40 distinguishable
   before the numbers are read. */
.card__plan {
  margin-top: auto;          /* pushes plan + CTAs to the bottom as one block */
  padding: 12px 14px 13px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 3px;
}

.card__plan-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.card__plan-label {
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}

.card__plan-ratio {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--bronze-deep);
  font-variant-numeric: tabular-nums;
}
.card__plan-slash {
  margin-inline: 2px;
  font-weight: 400;
  color: var(--line-strong);
}

.card__plan-bar {
  margin-top: 9px;
  height: 6px;
  border-radius: 100px;
  background: var(--paper-3);
  overflow: hidden;
}
.card__plan-fill {
  display: block;
  height: 100%;
  border-radius: 100px;
  background: var(--bronze);
}

.card__plan-keys {
  margin-top: 7px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  color: var(--muted);
}
.card__plan-keys span:first-child { color: var(--bronze-deep); }

.card__actions {
  padding-top: 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}
.card__actions .btn { --btn-py: 12px; --btn-px: 16px; font-size: 11.5px; }

.card__brochure {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--muted);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color .2s ease, border-color .2s ease;
}
.card__brochure svg { width: 13px; height: 13px; }
.card__brochure:hover { color: var(--bronze); border-bottom-color: var(--bronze); }

/* ============================================================== WHY SOBHA == */

.why {
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(64px, 8vw, 104px);
}

.why__grid {
  margin-top: 54px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255,255,255,.14);
}

.value {
  padding: 34px 30px 30px 0;
  border-right: 1px solid rgba(255,255,255,.14);
}
.value:last-child { border-right: 0; }
.value:not(:first-child) { padding-left: 30px; }

.value__num {
  display: block;
  font-family: var(--display);
  font-size: 12px;
  color: var(--bronze-soft);
  letter-spacing: .14em;
  margin-bottom: 18px;
}

.value h3 {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 300;
  color: var(--paper);
}

.value p {
  margin-top: 12px;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(251,249,245,.66);
}

/* ============================================================== FINAL CTA == */

.final-cta {
  padding-block: clamp(72px, 9vw, 116px);
  background: var(--paper-2);
  border-top: 1px solid var(--line);
}

.final-cta__inner { text-align: center; max-width: 720px; margin-inline: auto; }

.final-cta__title {
  font-family: var(--display);
  font-size: clamp(1.95rem, 3.8vw, 2.95rem);
  font-weight: 300;
}

.final-cta__lede {
  margin-top: 18px;
  max-width: 48ch;
  margin-inline: auto;
  color: var(--ink-3);
  font-weight: 300;
  font-size: 17px;
}

.final-cta__actions {
  margin-top: 36px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* ================================================================= FOOTER == */

.site-footer {
  background: var(--ink);
  color: rgba(251,249,245,.7);
  padding-top: 56px;
}

.site-footer__inner {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding-bottom: 40px;
}

.site-footer__logo { height: 54px; width: auto; }
.site-footer__brand p {
  margin-top: 18px;
  max-width: 34ch;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
}

.site-footer__links { display: flex; flex-direction: column; gap: 14px; align-items: flex-end; }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: 12px 28px; align-content: start; justify-content: flex-end; }
.site-footer__nav a {
  font-size: 13px;
  letter-spacing: .05em;
  transition: color .2s ease;
}
.site-footer__nav a:hover { color: var(--paper); }

/* Legal row sits under the main footer nav, quieter and rule-separated. */
.site-footer__nav--legal {
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.12);
  gap: 10px 22px;
}
.site-footer__nav--legal a { font-size: 12.5px; color: rgba(251,249,245,.55); }
.site-footer__nav--legal a:hover { color: var(--paper); }

.site-footer__legal {
  border-top: 1px solid rgba(255,255,255,.12);
  padding-block: 24px 32px;
}

.site-footer__disclaimer {
  max-width: 108ch;
  font-size: 11.5px;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(251,249,245,.42);
  text-align: justify;
  text-wrap: pretty;
}
.site-footer__disclaimer strong {
  font-weight: 500;
  color: rgba(251,249,245,.62);
}

.site-footer__copyright {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: 12px;
  font-weight: 300;
  color: rgba(251,249,245,.45);
}

/* ====================================================== MOBILE STICKY CTA == */

.sticky-cta {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  gap: 10px;
  padding: 11px var(--gutter) calc(11px + env(safe-area-inset-bottom));
  background: rgba(251,249,245,.96);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
.sticky-cta .btn { flex: 1; --btn-py: 14px; --btn-px: 12px; }

/* ================================================================== MODAL == */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(14,14,11,.62);
  opacity: 0;
  transition: opacity .2s ease;
  overflow-y: auto;
}
.modal-overlay.is-open { opacity: 1; }

.modal {
  position: relative;
  width: 100%;
  max-width: 470px;
  background: var(--paper);
  border-radius: 3px;
  padding: 38px 34px 32px;
  transform: translateY(10px);
  transition: transform .22s ease;
  max-height: 100%;
  overflow-y: auto;
}
.modal-overlay.is-open .modal { transform: none; }

.modal__close {
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.modal__close svg { width: 18px; height: 18px; }
.modal__close:hover { background: var(--paper-3); color: var(--ink); }

.modal__eyebrow {
  font-size: 10.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--bronze);
}

.modal__title {
  margin-top: 10px;
  font-family: var(--display);
  font-size: 25px;
  font-weight: 300;
}

.modal__property {
  margin-top: 20px;
  padding: 14px 16px;
  background: var(--bronze-tint);
  border-left: 2px solid var(--bronze);
}
.modal__property-label {
  display: block;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bronze);
}
.modal__property-name {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
}
.modal__property-price {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-3);
}

#enquiry-form { margin-top: 22px; }

.field { margin-bottom: 16px; }

.field label {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.field .req { color: var(--bronze); }
.field .opt { text-transform: none; letter-spacing: 0; color: var(--muted); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 14px;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  transition: border-color .18s ease;
}
.field textarea { resize: vertical; min-height: 84px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--bronze);
  box-shadow: 0 0 0 3px rgba(140,110,68,.12);
}

.field__error {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--danger);
  min-height: 0;
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--danger); }

.modal__note {
  margin-top: 14px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
}

.form-status {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 2px;
  font-size: 14.5px;
  line-height: 1.55;
}
.form-status--success {
  background: #EDF3EE;
  color: var(--success);
  border-left: 2px solid var(--success);
}
.form-status--error {
  background: #F7EBE8;
  color: var(--danger);
  border-left: 2px solid var(--danger);
}

/* ============================================================= RESPONSIVE == */

@media (max-width: 1080px) {
  .site-nav { gap: 22px; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .why__grid { grid-template-columns: repeat(2, 1fr); }
  .value:nth-child(2) { border-right: 0; }
  .value:nth-child(3),
  .value:nth-child(4) { border-top: 1px solid rgba(255,255,255,.14); }
  .value:nth-child(3) { padding-left: 0; }
}

@media (max-width: 900px) {
  :root { --gutter: 22px; --header-h: 76px; }
  .brand img { height: 42px; }

  .site-nav,
  .site-header__actions { display: none; }
  .nav-toggle { display: flex; }
  .site-header__inner { justify-content: space-between; }


  /* Room for the mobile sticky CTA bar — including under the hero, whose
     content is bottom-anchored and would otherwise sit behind it. */
  .hero__inner { padding-bottom: 112px; }
  .sticky-cta { display: flex; }
  body { padding-bottom: 72px; }
  .modal-overlay { padding-bottom: 88px; }
}

@media (max-width: 640px) {
  .brand img { height: 38px; }
  .site-footer__logo { height: 44px; }
  .site-footer__disclaimer { text-align: left; font-size: 11px; }
  .hero__title { font-size: clamp(2rem, 9vw, 2.8rem); }
  .hero__lede { max-width: 30ch; }
  /* Side by side would leave each pill too cramped to read at 375px. */
  .hero__actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero__actions .btn { padding: 15px 24px; }

  .filters { gap: 20px; }
  .filters__group { align-items: flex-start; flex-direction: column; gap: 10px; }

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

  .why__grid { grid-template-columns: 1fr; }
  .value {
    border-right: 0;
    padding: 28px 0;
    border-top: 1px solid rgba(255,255,255,.14);
  }
  .value:first-child { border-top: 0; }
  .value:not(:first-child) { padding-left: 0; }

  .modal { padding: 34px 24px 26px; }
  .modal__title { font-size: 26px; }

  .final-cta__actions .btn { flex: 1; }
  .mobile-menu nav a { font-size: 26px; }
}

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


/* ============================================================ INNER PAGES == */

.page--inner { display: flex; flex-direction: column; min-height: 100vh; }
.page--inner main { flex: 1; }

/* No hamburger on inner pages, so the header CTAs must survive small screens. */
.site-header--inner .nav-toggle { display: none; }

/* ------------------------------------------------------------------ legal -- */

.legal { padding-block: clamp(46px, 6vw, 84px) clamp(64px, 8vw, 110px); }

.legal__inner { max-width: 760px; }

.legal__eyebrow {
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 14px;
}

.legal__title {
  font-size: clamp(2rem, 4.2vw, 3rem);
  font-weight: 300;
  letter-spacing: -.02em;
}

.legal__updated {
  margin-top: 12px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}

.legal__lede {
  margin-top: 28px;
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--ink-2);
}

.legal h2 {
  margin-top: 42px;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--ink);
}

.legal p {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-3);
}

.legal ul {
  margin: 14px 0 0;
  padding-left: 20px;
  color: var(--ink-3);
}
.legal li {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.7;
  padding-left: 4px;
}
.legal li::marker { color: var(--bronze-soft); }
.legal strong { font-weight: 500; color: var(--ink-2); }

.legal a {
  color: var(--bronze-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.legal a:hover { color: var(--ink); }

/* -------------------------------------------------------------- thank you -- */

.thanks {
  padding-block: clamp(56px, 8vw, 104px) clamp(64px, 8vw, 112px);
  background: var(--paper);
}

.thanks__inner { max-width: 820px; text-align: center; }

.thanks__mark {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin: 0 auto 26px;
  border-radius: 50%;
  background: var(--bronze-tint);
  color: var(--bronze-deep);
}
.thanks__mark svg { width: 34px; height: 34px; }

.thanks__eyebrow {
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 14px;
}

.thanks__title {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 300;
  letter-spacing: -.02em;
}

.thanks__lede {
  margin: 18px auto 0;
  max-width: 52ch;
  font-size: 17.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-3);
}

.thanks__steps {
  margin: clamp(44px, 5vw, 66px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  text-align: left;
  border-top: 1px solid var(--line);
}
.thanks__steps li {
  padding: 30px 26px 30px 0;
  border-right: 1px solid var(--line);
}
.thanks__steps li:last-child { border-right: 0; }
.thanks__steps li:not(:first-child) { padding-left: 26px; }

.thanks__step-num {
  display: block;
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--bronze);
  margin-bottom: 14px;
}
.thanks__steps h2 {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -.005em;
}
.thanks__steps p {
  margin-top: 10px;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-3);
}

.thanks__actions {
  margin-top: clamp(38px, 4.5vw, 54px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

@media (max-width: 900px) {
  /* Inner pages have no mobile menu, so keep the CTAs reachable. */
  .site-header--inner .site-header__actions { display: flex; }
  .site-footer__links { align-items: flex-start; }
  .site-footer__nav { justify-content: flex-start; }
  .thanks__steps { grid-template-columns: 1fr; }
  .thanks__steps li {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 24px 0;
  }
  .thanks__steps li:last-child { border-bottom: 0; }
  .thanks__steps li:not(:first-child) { padding-left: 0; }
}

@media (max-width: 640px) {
  /* At phone width the logo plus two buttons will not fit; Enquire wins. */
  .site-header--inner .btn--whatsapp { display: none; }
  .thanks__actions .btn { width: 100%; }
}