/* =================================================================
   ELMORE ESTATE — HOLDING PAGE
   Framework:  Finsweet Client-First
   Sizing:     Fluid Responsive (fluid root font-size; all values in rem)
   Structure:  1. Variables
               2. Fonts
               3. Base / reset
               4. Utilities (Client-First)
               5. Components
               6. Registration form (custom → HubSpot Forms API)
               7. Modal
               8. Responsive breakpoints
   Units:      rem throughout (root scales fluidly; 1rem = 16px at 1440px)
   ================================================================= */


/* =================================================================
   1. VARIABLES
   ================================================================= */
:root {

  /* ---- Brand colours (from Figma design system) ---- */
  --color--estate-cream:  #f4f0e9;
  --color--estate-green:  #677045;
  --color--court-black:   #000000;
  --color--wild-yellow:   #f2a500;
  --color--white:         #ffffff;
  --color--off-white:     #f6f6f6;

  --color--black-tint-60: #666666;  /* muted labels on cream */
  --color--grey-90:       #2f2f2f;
  --color--grey-60:       #6d6d6d;
  --color--grey-40:       #9b9b9b;
  --color--grey-20:       #cccccc;

  /* ---- Semantic tokens ---- */
  --color--background:    var(--color--estate-cream);
  --color--text:          var(--color--grey-90);
  --color--text-muted:    var(--color--black-tint-60);
  --color--accent:        var(--color--estate-green);
  --color--border:        var(--color--grey-20);
  --color--error:         #b3261e;

  /* ---- Typography ---- */
  --font--primary:   "Cambon", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font--secondary: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --weight--regular:  400;
  --weight--medium:   500;
  --weight--semibold: 600;
  --weight--bold:     700;

  /* ---- Radius ---- */
  --radius--button: 3rem;      /* 48px pill        */
  --radius--input:  0.375rem;  /* 6px              */
  --radius--card:   0rem;      /* square per design */

  /* ---- Border ---- */
  --border--width: 0.0625rem;  /* 1px */

  /* ---- Spacing scale (Client-First, rem) ---- */
  --space--0:      0rem;
  --space--4:      0.25rem;   /* 4px  */
  --space--8:      0.5rem;    /* 8px  */
  --space--12:     0.75rem;   /* 12px */
  --space--16:     1rem;      /* 16px */
  --space--24:     1.5rem;    /* 24px */
  --space--32:     2rem;      /* 32px */
  --space--48:     3rem;      /* 48px */
  --space--64:     4rem;      /* 64px */
  --space--96:     6rem;      /* 96px */

  /* ---- Fluid Responsive tokens (rem) ----
     These are the 1440px design sizes (root = 16px there). The fluid root
     font-size scales every rem smoothly with the viewport; a few of these
     tokens also step at breakpoints (section 8) where the mobile layout needs
     proportionally smaller values than a uniform scale would give. */
  --fluid--gutter:        2.8125rem;   /* global side padding — 45px */
  --fluid--section-x:     6.75rem;     /* hero/card inline padding — 108px */
  --fluid--section-y:     2rem;        /* hero/card block padding — 32px */
  --fluid--edge:          0.5rem;      /* outer image gap — 8px */
  --fluid--modal-pad:     3rem;        /* modal panel padding — 48px */
  --fluid--wordmark:      35.8125rem;  /* hero wordmark width — up to 573px */

  --fluid--display:       6.5rem;      /* display utility */
  --fluid--h2:            2.5rem;      /* h2 utility */
  --fluid--h3:            2rem;        /* modal titles — 32px */
  --fluid--crest-large:   9.6875rem;   /* hero crest — 155px */

  /* ---- Layers ---- */
  --z--header: 10;
  --z--modal:  1000;

  /* ---- Motion ---- */
  --ease--out:  cubic-bezier(0.22, 1, 0.36, 1);
  --dur--fast:  0.18s;
  --dur--base:  0.28s;
}


/* =================================================================
   2. FONTS
   ---------------------------------------------------------------
   "Cambon" (display serif) — self-hosted from /assets/fonts/WOFF.
   "DM Sans" (UI sans) — loaded from Google Fonts in index.html.
   ================================================================= */
@font-face {
  font-family: "Cambon";
  src: url("../assets/fonts/WOFF/Cambon-Thin.woff2") format("woff2"),
       url("../assets/fonts/WOFF/Cambon-Thin.woff") format("woff");
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cambon";
  src: url("../assets/fonts/WOFF/Cambon-Light.woff2") format("woff2"),
       url("../assets/fonts/WOFF/Cambon-Light.woff") format("woff");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cambon";
  src: url("../assets/fonts/WOFF/Cambon-Regular.woff2") format("woff2"),
       url("../assets/fonts/WOFF/Cambon-Regular.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cambon";
  src: url("../assets/fonts/WOFF/Cambon-Demi.woff2") format("woff2"),
       url("../assets/fonts/WOFF/Cambon-Demi.woff") format("woff");
  font-weight: 600; font-style: normal; font-display: swap;
}


/* =================================================================
   3. BASE / RESET
   ================================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

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

  /* Fluid typography + layout: the root font-size scales with the viewport, so
     every rem-based value in this sheet scales smoothly. 20px @ ≥1920 →
     16px @ 1440 → ~14px @ ≤479. */
  font-size: 1.25rem;
}
@media screen and (max-width: 1920px) { html { font-size: calc(0.2499999999999999rem + 0.8333333333333335vw); } }
@media screen and (max-width: 1440px) { html { font-size: calc(0.8126951092611863rem + 0.20811654526534862vw); } }
@media screen and (max-width: 479px)  { html { font-size: calc(0.7497384937238494rem + 0.41841004184100417vw); } }

body {
  margin: 0;
  height: 100vh;
  height: 100dvh;            /* fit the visible viewport, incl. mobile browser UI */
  overflow: hidden;          /* single-screen holding page — no page scroll */
  display: flex;
  flex-direction: column;
  background-color: var(--color--background);
  color: var(--color--text);
  font-family: var(--font--secondary);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Scroll lock applied by JS while a modal is open */
body.is-modal-open { overflow: hidden; }

img,
svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, p { margin: 0; }

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

button {
  font: inherit;
  color: inherit;
  margin: 0;
  cursor: pointer;
  background: none;
  border: none;
}

ul[role="list"] { list-style: none; margin: 0; padding: 0; }

/* Visible focus for keyboard users (a11y) */
:focus-visible {
  outline: 0.125rem solid var(--color--accent);
  outline-offset: 0.1875rem;
  border-radius: 0.125rem;
}

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


/* =================================================================
   4. UTILITIES (Client-First)
   ================================================================= */
.page-wrapper {
  flex: 1 1 auto;
  min-height: 0;             /* allow the flex chain to shrink to fit the viewport */
  display: flex;
  flex-direction: column;
}

/* Fill all vertical space between header and footer, and share it between
   the hero and the cards at roughly the Figma ratio (~72% / 28%). */
.main-wrapper {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Global horizontal padding wrapper */
.padding-global {
  padding-left: var(--fluid--gutter);
  padding-right: var(--fluid--gutter);
}

/* Screen-reader-only helper */
.u-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.u-hide { display: none !important; }

/* ---- Text styles ---- */
.text-style-eyebrow {
  font-family: var(--font--secondary);
  font-size: 0.75rem;
  font-weight: var(--weight--semibold);
  letter-spacing: 0.075rem;
  text-transform: uppercase;
  color: var(--color--text-muted);
  line-height: 1.25;
}

.text-style-legal {
  font-family: var(--font--secondary);
  font-size: 0.625rem;
  font-weight: var(--weight--medium);
  letter-spacing: 0.0625rem;
  text-transform: uppercase;
  color: var(--color--text-muted);
  line-height: 1.5;
}

.heading-style-display {
  font-family: var(--font--primary);
  font-weight: var(--weight--regular);
  font-size: var(--fluid--display);
  line-height: 1;
  letter-spacing: -0.01em;
}

.heading-style-h2 {
  font-family: var(--font--primary);
  font-weight: var(--weight--regular);
  font-size: var(--fluid--h2);
  line-height: 1.05;
}

.heading-style-h3 {
  font-family: var(--font--primary);
  font-weight: var(--weight--regular);
  font-size: var(--fluid--h3);
  line-height: 1.1;
}


/* =================================================================
   5. COMPONENTS
   ================================================================= */

/* ---- Button ---- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space--8);
  padding: var(--space--16) var(--space--24);
  border-radius: var(--radius--button);
  font-family: var(--font--secondary);
  font-size: 0.6875rem;         /* 11px */
  font-weight: var(--weight--bold);
  letter-spacing: 0.055rem;
  text-transform: uppercase;
  line-height: 1;
  color: var(--color--white);
  background-color: var(--color--accent);
  border: var(--border--width) solid transparent;
  transition: background-color var(--dur--fast) var(--ease--out),
              color var(--dur--fast) var(--ease--out),
              transform var(--dur--fast) var(--ease--out);
  white-space: nowrap;
}
.button:hover { transform: translateY(-0.0625rem); }
.button:active { transform: translateY(0); }

.button.is-estate { background-color: var(--color--estate-green); }
.button.is-estate:hover { background-color: #565d39; }

.button.is-court { background-color: var(--color--court-black); }
.button.is-court:hover { background-color: #1f1f1f; }

.button.is-wild { background-color: var(--color--wild-yellow); }
.button.is-wild:hover { background-color: #d99400; }

.button.is-ghost {
  background-color: transparent;
  color: var(--color--estate-green);
  border-color: var(--color--estate-green);
}
.button.is-ghost:hover {
  background-color: var(--color--estate-green);
  color: var(--color--white);
}


/* ---- Header ---- */
.header {
  position: relative;
  z-index: var(--z--header);
  background-color: var(--color--estate-cream);
}
.header_inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space--16);
  padding-top: var(--space--16);
  padding-bottom: var(--space--16);
}
.header_eyebrow { flex: 1 1 0; min-width: 0; }
.header_brand {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.header_actions {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  justify-content: flex-end;
}

.crest { color: var(--color--court-black); }
.crest-small  { width: 3.965rem; height: auto; }   /* ~63px */
.crest-large  { width: var(--fluid--crest-large); height: auto; color: var(--color--white); }


/* ---- Hero ---- */
.section-hero {
  flex: 5 1 0%;                 /* ~72% of the space between header and footer */
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: var(--fluid--edge);
  padding-bottom: 0;
}

.hero_frame {
  flex: 1 1 auto;
  display: flex;
  width: 100%;
  min-height: 0;
}

.hero_visual {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--radius--card);
  display: flex;
  padding: var(--fluid--section-y) var(--fluid--section-x);
}
.hero_image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}
.hero_scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0) 45%);
}
.hero_content {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  gap: var(--space--32);
}
.hero_title { display: flex; }
.hero_wordmark {
  width: var(--fluid--wordmark);
  height: auto;
}


/* ---- Link cards ---- */
.section-cards {
  flex: 2 1 0%;                 /* ~28% of the space between header and footer */
  min-height: 0;
  display: flex;
  padding: var(--fluid--edge);
}

.cards_grid {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;          /* rows fill the grid height so cards stretch */
  gap: var(--fluid--edge);
}

.card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius--card);
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: var(--fluid--section-y) var(--fluid--section-x);
  color: var(--color--white);
  transition: transform var(--dur--base) var(--ease--out);
}
.card_image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform var(--dur--base) var(--ease--out);
}
.card_scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0,0,0,0.5);
  transition: background var(--dur--fast) var(--ease--out);
}
.card:hover .card_image { transform: scale(1.03); }
.card:hover .card_scrim { background: rgba(0,0,0,0.42); }

.card_content {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--space--24);
  text-align: center;
}
.card_heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space--12);
}
/* Wordmark images share a consistent cap-height across both cards */
.card_wordmark {
  height: 2rem;               /* 32px @1440, scales with the fluid root */
  width: auto;
}
.card_subtitle {
  font-family: var(--font--primary);
  font-size: 1.125rem;
  line-height: 1;
  color: var(--color--white);
}
/* the .button inside a card is a visual span, not interactive */
.card .button { pointer-events: none; }

/* Button hover states, driven by hovering the whole card */
.card.is-court:hover .button {
  background-color: var(--color--off-white);   /* court white */
  color: var(--color--court-black);
}
.card.is-wild:hover .button {
  background-color: var(--color--off-white);   /* court white */
  color: var(--color--wild-yellow);
}


/* ---- Footer ---- */
.footer {
  background-color: var(--color--estate-cream);
}
.footer_inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space--16);
  padding-top: var(--space--12);
  padding-bottom: var(--space--16);
}
.footer_left,
.footer_right {
  display: flex;
  align-items: center;
  gap: var(--space--32);
}
.footer_links {
  display: flex;
  align-items: center;
  gap: var(--space--16);
}
.footer_link {
  padding: 0;
  color: var(--color--accent);
  font-weight: var(--weight--bold);
  transition: opacity var(--dur--fast) var(--ease--out);
}
.footer_link:hover { opacity: 0.7; text-decoration: underline; }

.footer_follow { line-height: 1; }

.footer_social {
  display: flex;
  align-items: center;
  gap: var(--space--16);
  line-height: 1;            /* stop the inherited 1.5 line-height oversizing
                                the icons' line box and offsetting them */
}
.footer_social-link {
  display: inline-flex;
  line-height: 1;
  transition: opacity var(--dur--fast) var(--ease--out);
}
.footer_social-link img { width: 1.25rem; height: 1.25rem; }
.footer_social-link:hover { opacity: 0.7; }


/* =================================================================
   6. REGISTRATION FORM (custom — submits to HubSpot via the Forms API)
   Styled directly to the Figma spec; full control, no third-party CSS.
   ================================================================= */
.reg-form {
  display: flex;
  flex-direction: column;
  gap: var(--space--24);
  width: 100%;
  text-align: left;
}

.reg-form_field { display: flex; flex-direction: column; gap: var(--space--12); }
.reg-form_fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
/* A <legend> doesn't take the fieldset's flex gap, so match the field spacing */
.reg-form_fieldset > .reg-form_label { margin-bottom: var(--space--12); }

/* First name + last name share a row, stacking on narrow screens */
.reg-form_row { display: flex; gap: var(--space--24); }
.reg-form_row > .reg-form_field { flex: 1 1 0; min-width: 0; }
@media (max-width: 29.9375rem) {
  .reg-form_row { flex-direction: column; gap: var(--space--24); }
}

.reg-form_label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space--16);
}
.reg-form_label {
  font-family: var(--font--secondary);
  font-size: 0.875rem;                 /* 14px */
  font-weight: var(--weight--semibold);
  letter-spacing: 0.0875rem;
  text-transform: uppercase;
  color: var(--color--grey-90);
  padding: 0;
}
.reg-form_hint {
  font-family: var(--font--secondary);
  font-size: 0.75rem;                  /* 12px */
  color: var(--color--grey-60);
}

/* Inputs */
.reg-form_input {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font--secondary);
  font-size: 1rem;                     /* 16px */
  font-weight: var(--weight--medium);
  color: var(--color--grey-90);
  background-color: var(--color--white);
  border: 0.09375rem solid var(--color--grey-20);   /* 1.5px #ccc */
  border-radius: 0.5rem;               /* 8px */
  padding: var(--space--16);
  line-height: 1.4;
  transition: border-color var(--dur--fast) var(--ease--out),
              box-shadow var(--dur--fast) var(--ease--out);
}
.reg-form_input::placeholder { color: var(--color--grey-40); }
.reg-form_input:focus {
  outline: none;
  border-color: var(--color--accent);
  box-shadow: 0 0 0 0.1875rem rgba(103, 112, 69, 0.18);
}

/* Checkbox group */
.reg-form_options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space--12) var(--space--24);
}
.reg-form_check {
  display: inline-flex;
  align-items: center;
  gap: var(--space--12);
  font-family: var(--font--secondary);
  font-size: 0.8125rem;                /* 13px */
  font-weight: var(--weight--semibold);
  letter-spacing: 0.08125rem;
  text-transform: uppercase;
  color: var(--color--grey-90);
  cursor: pointer;
}
.reg-form_check input {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 1.5rem;                       /* 24px */
  height: 1.5rem;
  margin: 0;
  background-color: var(--color--white);
  border: 0.09375rem solid #d5d5d5;    /* colour-1 tint-30 */
  border-radius: 0.25rem;              /* 4px */
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  transition: background-color var(--dur--fast) var(--ease--out),
              border-color var(--dur--fast) var(--ease--out);
}
.reg-form_check input::before {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  transform: scale(0);
  transition: transform var(--dur--fast) var(--ease--out);
  background-color: var(--color--white);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.reg-form_check input:checked {
  background-color: var(--color--accent);
  border-color: var(--color--accent);
}
.reg-form_check input:checked::before { transform: scale(1); }
.reg-form_check input:focus-visible {
  outline: 0.125rem solid var(--color--accent);
  outline-offset: 0.125rem;
}

/* Submit + status message */
.reg-form_submit {
  align-self: center;
  margin-top: var(--space--8);
  letter-spacing: 0.06875rem;          /* 1.1px */
}
.reg-form_submit:disabled { opacity: 0.6; cursor: default; transform: none; }

.reg-form_message {
  margin: 0;
  text-align: center;
  font-family: var(--font--secondary);
  font-size: 0.875rem;
  color: var(--color--grey-60);
}
.reg-form_message.is-success { color: var(--color--accent); }
.reg-form_message.is-error { color: var(--color--error); }

/* Thank-you state */
.reg-form_success {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--space--16);
  text-align: center;
  padding: var(--space--16) 0;
}
.reg-form_success-title { color: var(--color--text); outline: none; }
.reg-form_success-text {
  margin: 0;
  max-width: 34rem;
  font-family: var(--font--secondary);
  font-size: 0.9375rem;
  color: var(--color--grey-60);
}
/* On success, hide the header + form and reveal the thank-you */
.modal_panel.is-submitted .modal_header,
.modal_panel.is-submitted #reg-form { display: none; }
.modal_panel.is-submitted .reg-form_success { display: flex; }


/* =================================================================
   7. MODAL
   ================================================================= */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z--modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space--24);
}
.modal[hidden] { display: none; }

.modal_overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 18, 0.6);
  -webkit-backdrop-filter: blur(0.5rem);
  backdrop-filter: blur(0.5rem);
  animation: modal-fade var(--dur--base) var(--ease--out);
}

.modal_dialog {
  position: relative;
  width: 100%;
  max-width: 40.25rem;              /* ~644px */
  max-height: calc(100dvh - 3rem);
  display: flex;
  flex-direction: column;
  animation: modal-rise var(--dur--base) var(--ease--out);
}

.modal_close {
  position: absolute;
  top: var(--space--24);
  right: var(--space--24);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--color--white);
  border-radius: 50%;
  transition: background var(--dur--fast) var(--ease--out);
}
.modal_close svg { width: 1rem; height: 1rem; }
.modal_close:hover { background: rgba(255,255,255,0.14); }

.modal_panel {
  background-color: var(--color--estate-cream);
  border-radius: var(--radius--input);
  padding: var(--fluid--modal-pad);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 3rem);
}

.modal_header {
  text-align: center;
  margin-bottom: var(--space--24);
}
.modal_title {
  color: var(--color--text);
  padding-bottom: var(--space--16);
  letter-spacing: -0.05rem;          /* -0.8px */
}
.modal_intro {
  margin-top: var(--space--12);
  font-size: 0.9375rem;
  color: var(--color--grey-60);
  max-width: 34rem;
  margin-inline: auto;
}

.modal_body { min-height: 0; }

/* Scrollable content area (policy modals) */
.modal_body-scroll {
  overflow-y: auto;
  max-height: 60dvh;
  padding-right: var(--space--8);
  text-align: left;
}
.modal_body-scroll h3 {
  font-family: var(--font--primary);
  font-weight: var(--weight--medium);
  font-size: 1.25rem;
  margin-top: var(--space--24);
  margin-bottom: var(--space--8);
}
.modal_body-scroll p {
  font-size: 0.9375rem;
  color: var(--color--grey-60);
  margin-bottom: var(--space--12);
}

@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-rise {
  from { opacity: 0; transform: translateY(1.25rem); }
  to   { opacity: 1; transform: translateY(0); }
}


/* =================================================================
   CONSENT BANNER (cookie consent — gates GA4 + HubSpot tracking)
   ================================================================= */
.cookie-consent {
  position: fixed;
  left: var(--space--16);
  right: var(--space--16);
  bottom: var(--space--24);
  margin-inline: auto;          /* float, centred */
  max-width: 42rem;
  z-index: 900;                 /* below modals (1000), above the page */
  background-color: var(--color--estate-cream);
  border: 0.0625rem solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;         /* fully rounded ends, like the buttons */
  box-shadow: 0 0.5rem 1.75rem rgba(0, 0, 0, 0.18);
  animation: consent-rise var(--dur--base) var(--ease--out);
}
.cookie-consent[hidden] { display: none; }

.cookie-consent_inner {
  padding: var(--space--12) var(--space--16) var(--space--12) var(--space--24);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space--8) var(--space--16);
  flex-wrap: wrap;
}
.cookie-consent_text {
  margin: 0;
  flex: 1 1 15rem;
  font-family: var(--font--secondary);
  font-size: 0.75rem;           /* 12px */
  line-height: 1.45;
  color: var(--color--grey-90);
}
.cookie-consent_link {
  padding: 0;
  font: inherit;
  color: var(--color--accent);
  font-weight: var(--weight--bold);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: 0;
}
.cookie-consent_link:hover { opacity: 0.7; }
.cookie-consent_actions {
  display: flex;
  align-items: center;
  gap: var(--space--8);
  flex-shrink: 0;
}
/* Smaller pills just for the consent bar */
.cookie-consent .button {
  padding: var(--space--8) var(--space--16);
  font-size: 0.625rem;          /* 10px */
}

@keyframes consent-rise {
  from { opacity: 0; transform: translateY(1rem); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 47.9375rem) {
  .cookie-consent {
    left: var(--space--12);
    right: var(--space--12);
    bottom: var(--space--12);
    border-radius: 1.25rem;      /* rounded rectangle — not a tall pill when stacked */
  }
  .cookie-consent_inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space--8);
    padding: var(--space--12) var(--space--16);
  }
  /* Reset the row-layout flex-basis so it isn't read as a HEIGHT in the
     column layout (that was inflating the banner + the text→button gap). */
  .cookie-consent_text { flex: 0 0 auto; }
  .cookie-consent_actions { justify-content: center; flex: 0 0 auto; }
  /* Slightly larger tap targets on mobile only */
  .cookie-consent .button {
    padding: var(--space--12) var(--space--24);
    font-size: 0.6875rem;
  }
}


/* =================================================================
   8. RESPONSIVE BREAKPOINTS
   Client-First: mobile styles inherit; overrides layer down.
   ================================================================= */

/* Tablet — scale big layout tokens down from the desktop values */
@media (max-width: 61.9375rem) {   /* < 991px */
  :root {
    --fluid--section-x: 4rem;
    --fluid--wordmark:  28rem;
  }
}

/* Mobile landscape & below */
@media (max-width: 47.9375rem) {   /* < 767px */

  /* Layout tokens for phones — smaller than a uniform root scale would give */
  :root {
    --fluid--gutter:      1.5rem;
    --fluid--section-x:   1.75rem;
    --fluid--section-y:   1.5rem;
    --fluid--modal-pad:   2rem;
    --fluid--wordmark:    20rem;
    --fluid--crest-large: 6rem;
  }

  /* Header: crest on the left, eyebrow stacked over the button on the right */
  .header_inner {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "brand eyebrow"
      "brand actions";
    align-items: center;
    column-gap: var(--space--16);
    row-gap: var(--space--8);
  }
  .header_brand   { grid-area: brand; justify-self: start; }
  .header_eyebrow { grid-area: eyebrow; text-align: right; }
  .header_actions { grid-area: actions; justify-content: flex-end; }

  /* Cards stay two-up; tighten padding + wordmark so they fit narrow widths */
  .card          { padding: var(--space--16) var(--space--12); }
  .card_content  { gap: var(--space--16); }
  .card_wordmark { height: 1.25rem; }
  .card_subtitle { font-size: 1rem; }

  /* Footer: "Follow us" row on top, legal row below, both centred */
  .footer_inner {
    flex-direction: column-reverse;
    align-items: center;
    text-align: center;
    gap: var(--space--12);
  }
  .footer_left  { justify-content: center; flex-wrap: wrap; gap: var(--space--16); }
  .footer_right { justify-content: center; gap: var(--space--12); }
}

/* Mobile portrait */
@media (max-width: 29.9375rem) {   /* < 479px */
  :root {
    --fluid--gutter:      1.25rem;
    --fluid--section-x:   1.5rem;
    --fluid--wordmark:    20rem;
    --fluid--crest-large: 5.25rem;
  }
  .card          { padding: var(--space--12) var(--space--8); }
  .card_wordmark { height: 1.125rem; }
  .footer_left   { gap: var(--space--12); }
  .footer_links  { gap: var(--space--12); }
}

/* Below 375 x 667: too small to fit one screen. Stop the viewport fill —
   lock the hero and card heights, stack them vertically, and bring back
   page scrolling. Triggers on any device narrower than 375px, or a
   phone-width device shorter than 667px (e.g. landscape). */
@media (max-width: 374px),
       (max-width: 767px) and (max-height: 666px) {

  body {
    height: auto;
    min-height: 100dvh;
    overflow: auto;              /* re-enable page scroll */
  }
  .main-wrapper { flex: 0 0 auto; }

  /* Lock heights so the stacked boxes keep their proportions */
  .section-hero {
    flex: 0 0 auto;
    height: 26rem;
  }
  .section-cards { flex: 0 0 auto; }
  .cards_grid {
    grid-template-columns: 1fr;  /* stack Elmore Court above Elmore Wild */
    grid-auto-rows: 13rem;       /* locked card heights */
  }

  /* Full-width stacked cards have room for larger wordmarks + padding */
  .card          { padding: var(--space--24) var(--space--32); }
  .card_wordmark { height: 1.5rem; }
}