/* ==========================================================================
   MXW — Design tokens + utilities
   Exported from Figma: MXW-Full-Website (file 4YQ1MB0lEvpAJH4v0VNKC0, Page 1)
   Source frames: Header, What, Properties, Who, Track, Footer, Property,
                  nav pill, filter dropdowns, property card component.

   NOTE: the Figma file defines no Variables/Styles, so these tokens are
   derived from the actual painted values on the frames. Names are ours.
   ========================================================================== */

:root {
  /* ---------- Brand palette ------------------------------------------- */
  --mxw-ink:            #01010a;  /* near-black, page gradient start        */
  --mxw-navy:           #1f2751;  /* page gradient end                      */
  --mxw-navy-deep:      #040b41;  /* hero video overlay                     */
  --mxw-navy-ink:       #040a41;  /* text on light/lime buttons             */
  --mxw-lime:           #abec46;  /* primary accent / CTA                   */
  --mxw-blue-200:       #bbd8ef;  /* headings, secondary button             */
  --mxw-blue-100:       #d6e8f6;  /* display text, eyebrows, nav            */
  --mxw-blue-050:       #d7e6f0;  /* body copy, light button, panel base    */

  /* ---------- Semantic colour ----------------------------------------- */
  --mxw-page-bg:        linear-gradient(to right, var(--mxw-ink), var(--mxw-navy));
  --mxw-text:           var(--mxw-blue-050);
  --mxw-text-heading:   var(--mxw-blue-200);
  --mxw-text-display:   var(--mxw-blue-100);
  --mxw-text-accent:    var(--mxw-lime);
  --mxw-text-on-accent: var(--mxw-navy-ink);
  --mxw-rule:           rgba(255, 255, 255, 0.30);

  /* ---------- Surfaces ------------------------------------------------- */
  --mxw-surface-card:   rgba(255, 255, 255, 0.18);   /* flat card          */
  --mxw-surface-tint:   rgba(255, 255, 255, 0.08);   /* section wash       */
  --mxw-surface-glass:  linear-gradient(
                          53.642deg,
                          rgba(255, 255, 255, 0.18) 4.4547%,
                          rgba(255, 255, 255, 0.036) 95.545%
                        );                            /* value cards       */
  --mxw-surface-nav:    rgba(217, 217, 217, 0.30);   /* nav pill          */
  --mxw-surface-menu:   rgba(215, 230, 240, 0.85);   /* filter dropdown   */
  --mxw-overlay-hero:   rgba(4, 11, 65, 0.41);       /* over hero video   */

  --mxw-blur-nav:       9.9px;
  --mxw-blur-menu:      4.2px;

  /* ---------- Typography ----------------------------------------------- */
  /* Adobe Fonts (Typekit kit qrt3lmj) — Neue Haas Grotesk Display + Text.
     Display is used at 20px and above; Text at 19px and below.            */
  --mxw-font-display: "neue-haas-grotesk-display", "Helvetica Neue",
                      Helvetica, Arial, sans-serif;
  --mxw-font-text:    "neue-haas-grotesk-text", "Helvetica Neue",
                      Helvetica, Arial, sans-serif;
  --mxw-font:         var(--mxw-font-text);   /* default / back-compat     */

  /* IMPORTANT: the two families are numbered differently in this kit.
     Display:  400=45 Light  500=55 Roman  600=65 Medium  700=75 Bold
     Text:                   400=55 Roman  500=65 Medium  700=75 Bold
     Never use a bare weight number — always use the matching token below. */
  --mxw-fw-d-light:   400;   /* Display · 45 Light  */
  --mxw-fw-d-regular: 500;   /* Display · 55 Roman  */
  --mxw-fw-d-medium:  600;   /* Display · 65 Medium */
  --mxw-fw-d-bold:    700;   /* Display · 75 Bold   */

  --mxw-fw-t-regular: 400;   /* Text · 55 Roman  */
  --mxw-fw-t-medium:  500;   /* Text · 65 Medium */
  --mxw-fw-t-bold:    700;   /* Text · 75 Bold   */

  /* size / line-height / tracking, paired per role */
  --mxw-fs-display:  64px;  --mxw-lh-display:  71px;  --mxw-ls-display: -0.64px;
  --mxw-fs-lead:     31px;  --mxw-lh-lead:     1.2;   --mxw-ls-lead:    -0.62px;
  --mxw-fs-h2:       23px;  --mxw-lh-h2:       1.203; --mxw-ls-h2:       0;
  --mxw-fs-strap:    23px;  --mxw-lh-strap:    1.2;   --mxw-ls-strap:   -0.46px;
  --mxw-fs-eyebrow:  20px;  --mxw-lh-eyebrow:  22px;  --mxw-ls-eyebrow:  6.2px;
  --mxw-fs-address:  19px;  --mxw-lh-address:  1.2;   --mxw-ls-address:  0;
  --mxw-fs-contact:  18px;  --mxw-lh-contact:  22px;  --mxw-ls-contact:  0;
  --mxw-fs-body:     16px;  --mxw-lh-body:     22px;  --mxw-ls-body:     0;
  --mxw-fs-meta:     16px;  --mxw-lh-meta:     22px;  --mxw-ls-meta:     1.6px;
  --mxw-fs-nav:      14px;  --mxw-lh-nav:      22px;  --mxw-ls-nav:      2.94px;

  /* ---------- Spacing scale (px, from the 1440 layout) ------------------ */
  --mxw-space-1:   4px;
  --mxw-space-2:   8px;
  --mxw-space-3:  12px;
  --mxw-space-4:  16px;
  --mxw-space-5:  20px;   /* card gutter                                   */
  --mxw-space-6:  24px;
  --mxw-space-7:  28px;   /* card inner padding                            */
  --mxw-space-8:  32px;
  --mxw-space-9:  40px;
  --mxw-space-10: 48px;
  --mxw-space-11: 64px;
  --mxw-space-12: 80px;
  --mxw-space-13: 96px;
  --mxw-space-14: 120px;

  --mxw-page-max:    1440px;
  --mxw-content-max: 1349px;
  --mxw-page-pad:      43px;
  --mxw-gutter:        var(--mxw-space-5);
  --mxw-card-pad:      var(--mxw-space-7);

  /* ---------- Radii & shapes -------------------------------------------- */
  --mxw-radius-sm: 5px;   /* buttons, images, icon tiles                   */
  --mxw-radius-md: 7px;   /* cards, panels                                 */

  --mxw-icon-tile:   48px;
  --mxw-icon:        23px;
  --mxw-btn-h:       40px;
  --mxw-btn-w:      148px;
  --mxw-btn-sm-h:    32px;
  --mxw-card-w:     322px;
  --mxw-card-h:     439px;
  --mxw-hero-h:     880px;

  /* ---------- Opacity --------------------------------------------------- */
  --mxw-opacity-hero:  0.41;
  --mxw-opacity-muted: 0.68;
  --mxw-opacity-dim:   0.50;
}

/* ==========================================================================
   Global base
   ========================================================================== */

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

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

body {
  margin: 0;
  font-family: var(--mxw-font-text);
  font-weight: var(--mxw-fw-t-regular);
  font-size: var(--mxw-fs-body);
  line-height: var(--mxw-lh-body);
  letter-spacing: var(--mxw-ls-body);
  color: var(--mxw-text);
  background: var(--mxw-page-bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--mxw-font-display);
  font-weight: var(--mxw-fw-d-regular);
}

p, ul, ol, figure { margin: 0; }

button, input, select, textarea { font: inherit; color: inherit; }

/* height:auto is load-bearing: without it the width/height attributes WordPress
   prints supply a used height, and any `aspect-ratio` on the image is ignored. */
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   Utilities
   ========================================================================== */

/* ---- Type ---------------------------------------------------------------- */
.mxw-display,
.mxw-lead,
.mxw-h2,
.mxw-strap,
.mxw-eyebrow { font-family: var(--mxw-font-display); font-style: normal; }

.mxw-address,
.mxw-contact,
.mxw-body,
.mxw-meta,
.mxw-nav-link { font-family: var(--mxw-font-text); font-style: normal; }

.mxw-display {
  font-weight: var(--mxw-fw-d-regular);
  font-size: var(--mxw-fs-display);
  line-height: var(--mxw-lh-display);
  letter-spacing: var(--mxw-ls-display);
  color: var(--mxw-text-display);
}

.mxw-lead {
  font-weight: var(--mxw-fw-d-regular);
  font-size: var(--mxw-fs-lead);
  line-height: var(--mxw-lh-lead);
  letter-spacing: var(--mxw-ls-lead);
  color: var(--mxw-text);
}

.mxw-h2 {
  font-weight: var(--mxw-fw-d-regular);
  font-size: var(--mxw-fs-h2);
  line-height: var(--mxw-lh-h2);
  color: var(--mxw-text-heading);
}

.mxw-strap {
  font-weight: var(--mxw-fw-d-regular);
  font-size: var(--mxw-fs-strap);
  line-height: var(--mxw-lh-strap);
  letter-spacing: var(--mxw-ls-strap);
  color: var(--mxw-text-display);
}

.mxw-eyebrow {
  font-weight: var(--mxw-fw-d-medium);
  font-size: var(--mxw-fs-eyebrow);
  line-height: var(--mxw-lh-eyebrow);
  letter-spacing: var(--mxw-ls-eyebrow);
  text-transform: uppercase;
  color: var(--mxw-text-display);
}

.mxw-eyebrow--muted { opacity: var(--mxw-opacity-muted); font-size: var(--mxw-fs-body); letter-spacing: 4.96px; }

.mxw-address {
  font-weight: var(--mxw-fw-t-regular);
  font-size: var(--mxw-fs-address);
  line-height: var(--mxw-lh-address);
  color: var(--mxw-text-heading);
}

.mxw-contact {
  font-weight: var(--mxw-fw-t-regular);
  font-size: var(--mxw-fs-contact);
  line-height: var(--mxw-lh-contact);
  color: var(--mxw-text);
}
.mxw-contact b,
.mxw-contact .mxw-contact__key { font-weight: var(--mxw-fw-t-regular); color: var(--mxw-lime); }

.mxw-body {
  font-weight: var(--mxw-fw-t-regular);
  font-size: var(--mxw-fs-body);
  line-height: var(--mxw-lh-body);
  color: var(--mxw-text);
}

.mxw-meta {
  font-weight: var(--mxw-fw-t-medium);
  font-size: var(--mxw-fs-meta);
  line-height: var(--mxw-lh-meta);
  letter-spacing: var(--mxw-ls-meta);
  text-transform: uppercase;
  color: var(--mxw-text-display);
}

.mxw-nav-link {
  font-weight: var(--mxw-fw-t-medium);
  font-size: var(--mxw-fs-nav);
  line-height: var(--mxw-lh-nav);
  letter-spacing: var(--mxw-ls-nav);
  text-transform: uppercase;
  color: var(--mxw-text-display);
  text-decoration: none;
}
.mxw-nav-link:hover,
.mxw-nav-link[aria-current] { color: var(--mxw-lime); }

/* ---- Colour helpers ------------------------------------------------------ */
.mxw-text-accent  { color: var(--mxw-text-accent); }
.mxw-text-heading { color: var(--mxw-blue-200); }
.mxw-text-display { color: var(--mxw-blue-100); }
.mxw-text-body    { color: var(--mxw-blue-050); }
.mxw-text-ink     { color: var(--mxw-navy-ink); }

.mxw-bg-page  { background: var(--mxw-page-bg); }
.mxw-bg-lime  { background-color: var(--mxw-lime); }
.mxw-bg-pale  { background-color: var(--mxw-blue-050); }
.mxw-bg-blue  { background-color: var(--mxw-blue-200); }
.mxw-bg-tint  { background-color: var(--mxw-surface-tint); }

/* ---- Layout -------------------------------------------------------------- */
.mxw-container {
  width: 100%;
  /* content band + both gutters, so the inner width matches the design's 1349px */
  max-width: calc(var(--mxw-content-max) + var(--mxw-page-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--mxw-page-pad);
}

@media (max-width: 900px) {
  :root { --mxw-page-pad: 24px; }
}

.mxw-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--mxw-gutter);
}
.mxw-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--mxw-gutter);
}

@media (max-width: 1024px) {
  .mxw-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mxw-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .mxw-grid-4,
  .mxw-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .mxw-display { font-size: 40px; line-height: 46px; }
  .mxw-lead    { font-size: 22px; }
}

/* ---- Surfaces ------------------------------------------------------------ */
.mxw-card {
  background: var(--mxw-surface-card);
  border-radius: var(--mxw-radius-md);
  padding: var(--mxw-card-pad);
}

.mxw-card--glass {
  background: var(--mxw-surface-glass);
}

.mxw-panel-nav {
  background: var(--mxw-surface-nav);
  backdrop-filter: blur(var(--mxw-blur-nav));
  -webkit-backdrop-filter: blur(var(--mxw-blur-nav));
  border-radius: var(--mxw-radius-sm);
}

.mxw-panel-menu {
  background: var(--mxw-surface-menu);
  backdrop-filter: blur(var(--mxw-blur-menu));
  -webkit-backdrop-filter: blur(var(--mxw-blur-menu));
  border-bottom-left-radius: var(--mxw-radius-sm);
  border-bottom-right-radius: var(--mxw-radius-sm);
  color: var(--mxw-ink);
}
.mxw-panel-menu .mxw-count { opacity: var(--mxw-opacity-dim); }

.mxw-overlay-hero {
  position: absolute;
  inset: 0;
  background-color: var(--mxw-overlay-hero);
}

.mxw-rule {
  border: 0;
  border-top: 1px solid var(--mxw-rule);
  margin: 0;
}

/* ---- Buttons ------------------------------------------------------------- */
.mxw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mxw-space-3);
  min-height: var(--mxw-btn-h);
  padding: 9px var(--mxw-space-4);
  border: 0;
  border-radius: var(--mxw-radius-sm);
  font-family: var(--mxw-font-text);
  font-weight: var(--mxw-fw-t-regular);
  font-size: var(--mxw-fs-body);
  line-height: var(--mxw-lh-body);
  color: var(--mxw-text-on-accent);
  text-decoration: none;
  cursor: pointer;
}
.mxw-btn--primary   { background-color: var(--mxw-lime); }
.mxw-btn--secondary { background-color: var(--mxw-blue-200); }
.mxw-btn--pale      { background-color: var(--mxw-blue-050); }
.mxw-btn--light     { background-color: #fff; }
.mxw-btn--sm        { min-height: var(--mxw-btn-sm-h); padding: 5px var(--mxw-space-3); }

.mxw-btn__icon { flex: none; }

/* Hover swaps lime and pale blue, as specified on the button sheet. */
.mxw-btn--primary:hover,
.mxw-btn--primary:focus-visible   { background-color: var(--mxw-blue-200); }

.mxw-btn--secondary:hover,
.mxw-btn--secondary:focus-visible { background-color: var(--mxw-lime); }

.mxw-btn--pale:hover,
.mxw-btn--pale:focus-visible      { background-color: var(--mxw-lime); }

.mxw-btn--light:hover,
.mxw-btn--light:focus-visible     { background-color: var(--mxw-lime); }

.mxw-btn { transition: background-color 0.18s ease; }

@media (prefers-reduced-motion: reduce) {
  .mxw-btn { transition: none; }
}

/* ---- Icon tile ----------------------------------------------------------- */
.mxw-icon-tile {
  display: grid;
  place-items: center;
  width: var(--mxw-icon-tile);
  height: var(--mxw-icon-tile);
  background-color: var(--mxw-lime);
  border-radius: var(--mxw-radius-sm);
}
.mxw-icon-tile > img,
.mxw-icon-tile > svg { width: var(--mxw-icon); height: var(--mxw-icon); }

/* ---- Media --------------------------------------------------------------- */
.mxw-media {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--mxw-radius-sm);
  object-fit: cover;
}
.mxw-media--square { aspect-ratio: 1 / 1; }
.mxw-media--card   { aspect-ratio: 267 / 224; }

/* ---- Filter bar ---------------------------------------------------------- */
.mxw-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mxw-space-3);
  width: 100%;
  padding: 0 var(--mxw-space-3) 9px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--mxw-rule);
  font-family: var(--mxw-font-text);
  font-size: var(--mxw-fs-body);
  line-height: var(--mxw-lh-body);
  color: var(--mxw-text);
  cursor: pointer;
}

/* ---- Card hover ---------------------------------------------------------- */
.mxw-card { transition: background-color 0.18s ease; }
a.mxw-card:hover,
.mxw-property-card:hover { background: rgba(255, 255, 255, 0.24); }

.mxw-property-card__media img { transition: transform 0.4s ease; }
.mxw-property-card:hover .mxw-property-card__media img { transform: scale(1.03); }
.mxw-property-card__media { overflow: hidden; border-radius: var(--mxw-radius-sm); }

@media (prefers-reduced-motion: reduce) {
  .mxw-card,
  .mxw-property-card__media img { transition: none; }
  .mxw-property-card:hover .mxw-property-card__media img { transform: none; }
}