/*
Theme Name: Twenty Twenty-Five Child
Template: twentytwentyfive
Version: 1.0
*/

/* =========================
   Global Variables
========================= */
:root{
  --merlot: #561C27;
  --cream: #F9F6E8;
  --dusty-rose: #A88B89;
  --headline-brown: #704525;
}

html{
  scroll-behavior: smooth;
}

/* =========================
   Block Theme Safety Resets
   (only for this landing page)
========================= */
.marston-landing{
  margin: 0;
  padding: 0;
}

.marston-landing .wp-block-group{
  margin: 0;
}

/* =========================
   Shared Layout Helpers
========================= */

/* Container matches Figma: desktop gutters = 50px */
.marston-landing .lp-container{
  max-width: 1340px; /* 1440 - 100 */
  margin: 0 auto;
  padding-left: clamp(24px, 4vw, 50px);
  padding-right: clamp(24px, 4vw, 50px);
}

/* Mono labels */
.marston-landing .mono-label{
  font-family: "ABC Favorit Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--dusty-rose);
}

/* =========================
   SECTION 1: HERO HEADER
========================= */

.marston-landing .lp-hero{
  background: var(--merlot);
  color: var(--dusty-rose);
  margin: 0;
}

/* Hide the mobile-only leasing label on desktop */
.marston-landing .lp-hero__mobile-left{
  display: none;
}


/* Top + bottom rows */
.marston-landing .lp-hero__row{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.marston-landing .lp-hero__left{ justify-self: start; }
.marston-landing .lp-hero__right{ justify-self: end; text-align: right; }

.marston-landing .lp-hero__brand{
  grid-column: 2;          /* force center column */
  justify-self: center;    /* center within grid cell */
  display: block;
  height: auto;
  max-width: 426px;
  margin-left: auto;
  margin-right: auto;
}

/* Figma spacing */
.marston-landing .lp-hero__top{ padding-top: 41px; }
.marston-landing .lp-hero__images{ overflow: hidden; padding-top: 138px; }
.marston-landing .lp-hero__after-images{ padding-top: 85px; padding-bottom: 7px; }

/* ---------- HERO MARQUEE (auto-scrolling carousel) ---------- */

.marston-landing .lp-hero__marquee{
  overflow: hidden;
  width: 100%;
}

/* The moving track (we output 2 sets in PHP for seamless looping) */
.marston-landing .lp-hero__track{
  width: max-content;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  column-gap: 50px;                 /* gap between slides like Figma */
  align-items: stretch;
  transform: translateX(-130px);    /* same left shift you had */
  will-change: transform;
  animation: marstonHeroMarquee 26s linear infinite;
}

/* Each slide is a fixed-width box (match Figma widths) */
.marston-landing .lp-hero__img{
  height: 539px;
  overflow: hidden;
  margin: 0;
}

.marston-landing .lp-hero__img--left{  width: 390px; }
.marston-landing .lp-hero__img--center{ width: 820px; }
.marston-landing .lp-hero__img--right{ width: 312px; }

.marston-landing .lp-hero__img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Move by exactly one “set”: (390+50+820+50+312) = 1622px */
@keyframes marstonHeroMarquee{
  from { transform: translateX(-130px); }
  to   { transform: translateX(calc(-130px - 1622px)); }
}

/* Pause on hover (nice for desktop) */
@media (hover: hover){
  .marston-landing .lp-hero__marquee:hover .lp-hero__track{
    animation-play-state: paused;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .marston-landing .lp-hero__track{
    animation: none;
  }
}

/* Bottom center mark */
.marston-landing .lp-hero__mark{
  justify-self: center;
  width: 99px;
  height: auto;
  opacity: 0.9;
  margin-bottom: 2em;
}

.marston-landing .lp-hero__signup{
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  color: var(--dusty-rose);
}
.marston-landing .lp-hero__signup:hover{ opacity: 0.85; }

/* =========================
   SECTION 2: CREAM CONTENT + FORM
========================= */

.marston-landing .lp-cream{
  background: var(--cream);
  color: #000;
  margin: 0;
}

/* Tighten the top spacing so it doesn't read like "whitespace" */
.marston-landing .lp-cream__inner{
  padding-top: 40px;     /* was 94px */
  padding-bottom: 90px;
}

/* Headline */
.marston-landing .lp-cream__headline{
  max-width: 914px;
  margin: 0 auto 64px;
  text-align: center;

  color: var(--headline-brown);
  font-family: "Sometimes Times", Georgia, "Times New Roman", serif; /* until font is loaded */
  font-weight: 400;
  font-size: 60px;
  line-height: 70px;
}

.marston-landing .lp-cream__headline em{
  font-style: italic;
}

/* Two-column layout under headline */
.marston-landing .lp-cream__grid{
  display: grid;
  grid-template-columns: 376px 390px; /* from Figma */
  justify-content: center;
  column-gap: 148px; /* computed */
  align-items: start;
}

/* Body copy */
.marston-landing .lp-cream__copy{
  font-family: "ABC Favorit", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; /* until font is loaded */
  font-weight: 300;
  font-size: 18px;
  line-height: 26px;
  color: #000;
}

/* Form wrapper */
.marston-landing .lp-cream__form{
  width: 390px;
}

/* If you render a shortcode block inside here, it sometimes adds extra margins */
.marston-landing .lp-cream__form > *{
  margin-top: 0;
}

/* Flower mark */
.marston-landing .lp-cream__mark{
  display: flex;
  justify-content: center;
  margin-top: 96px; /* tune */
}

.marston-landing .lp-cream__mark img{
  width: 58px;
  height: auto;
  display: block;
  opacity: 0.9;
}

/* =========================
   SECTION 3: LOUNGE + FOOTER
========================= */

.marston-landing .lp-lounge{
  background: var(--headline-brown); /* #704525 */
  margin: 0;
}

.marston-landing .lp-lounge__inner{
  padding-top: 50px;    /* section top space */
  padding-bottom: 50px; /* section bottom space */
}

/* Big image wrapper */
.marston-landing .lp-lounge__image{
  position: relative;
  width: 100%;
  height: 812px; /* Figma */
  overflow: hidden;
}

.marston-landing .lp-lounge__image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Gradient overlay from Figma */
.marston-landing .lp-lounge__gradient{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180.53deg,
    rgba(0,0,0,0) 56.34%,
    rgba(0,0,0,0.5) 101.93%
  );
}

/* Footer row under image */
.marston-landing .lp-lounge__footer{
  margin-top: 14px; /* was 26px (tighten + helps sell the overlap) */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 16px;
}

/* Left legal */
.marston-landing .lp-lounge__legal{
  justify-self: start;
  font-family: "ABC Favorit", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 300;
  font-size: 10px;
  line-height: 1.2;
  color: var(--cream);
}

.marston-landing .lp-lounge__legal a{
  color: var(--cream);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.marston-landing .lp-lounge__legal a:hover{
  opacity: 0.85;
}

/* Center logo (OVERLAP FIX) */
.marston-landing .lp-lounge__logo{
  justify-self: center;
  position: relative;
  z-index: 3;                 /* ensures it sits above the image */
  transform: translateY(-50%); /* overlap amount: tune -14 to -32 */
}

.marston-landing .lp-lounge__logo img{
  width: 151px; /* Figma */
  height: auto;
  display: block;
}

/* Right social */
.marston-landing .lp-lounge__social{
  justify-self: end;
  text-align: right;
  font-family: "ABC Favorit", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.2;
  color: var(--cream);
  white-space: nowrap;
}

.marston-landing .lp-lounge__social a{
  color: var(--cream);
  text-decoration: none;
}
.marston-landing .lp-lounge__social a:hover{
  opacity: 0.85;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 900px){

   /* =========================
     HERO — Mobile (match Figma)
  ========================= */

  /* Match phone gutter feel */
  .marston-landing .lp-container{
    padding-left: 26px;
    padding-right: 17px;
  }

  /*
    TOP AREA:
    Row 1 = [LEASING] [AUTHENTIC...] [1740...]
    Row 2 = Marston logo centered
  */
  .marston-landing .lp-hero__row--top{
    display: grid;
    grid-template-columns: 120px 1fr 206px; /* Figma widths */
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 0;
    row-gap: 48px; /* pushes logo down like Figma */
  }

  /* Show leasing only on mobile */
  .marston-landing .lp-hero__mobile-left{
    display: block;
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    text-align: left;
    white-space: nowrap;
  }

  /* AUTHENTIC centered */
  .marston-landing .lp-hero__row--top .lp-hero__left{
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    text-align: center;
    white-space: nowrap;
  }

  /* ADDRESS right aligned */
  .marston-landing .lp-hero__row--top .lp-hero__right{
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    text-align: right;
    white-space: nowrap;
  }

  /* Logo goes to row 2 and spans full width */
  .marston-landing .lp-hero__brand{
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    margin: 0 auto;
    width: 322px;
    max-width: 322px;
    height: auto;
    display: block;
  }

  /* Label typography (Figma) */
  .marston-landing .lp-hero .mono-label{
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.25em;
    line-height: 25px;
    color: var(--dusty-rose);
  }

  /* Top padding (Figma top = ~13px) */
  .marston-landing .lp-hero__top{
    padding-top: 13px;
    padding-bottom: 0;
  }

  /*
    IMAGES:
    Mobile should feel like a single framed image (404x387)
  */
  .marston-landing .lp-hero__images{
    padding-top: 58px;
    overflow: hidden;
  }

  .marston-landing .lp-hero__track{
    animation: none !important;
    transform: none !important;
    column-gap: 0 !important;
  }

  .marston-landing .lp-hero__img{
    width: 404px !important;
    height: 387px !important;
    max-width: 100%;
    margin: 0 auto;
  }

  .marston-landing .lp-hero__img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /*
    BOTTOM STRIP:
    Figma shows: M centered, SIGN UP centered under it
    Hide leasing/address down here.
  */
  .marston-landing .lp-hero__after-images{
    padding-top: 54px;
    padding-bottom: 24px;
  }

  .marston-landing .lp-hero__row--bottom{
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    row-gap: 18px;
  }

  .marston-landing .lp-hero__row--bottom .lp-hero__left,
  .marston-landing .lp-hero__row--bottom .lp-hero__right{
    display: none;
  }

  .marston-landing .lp-hero__mark{
    width: 89px;
    height: auto;
    margin: 0;
  }

  .marston-landing .lp-hero__signup{
    justify-self: center;
    margin-top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    color: var(--dusty-rose);
    white-space: nowrap;
  }

  /* =========================
     SECTION 2/3 — keep your existing mobile rules
  ========================= */

  .marston-landing .lp-cream__inner{
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .marston-landing .lp-cream__headline{
    font-size: 36px;
    line-height: 44px;
    margin-bottom: 32px;
    padding: 0 10px;
  }

  .marston-landing .lp-cream__grid{
    grid-template-columns: 1fr;
    row-gap: 32px;
    column-gap: 0;
  }

  .marston-landing .lp-cream__copy{
    max-width: 420px;
    margin: 0 auto;
  }

  .marston-landing .lp-cream__form{
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
  }

  .marston-landing .lp-cream__mark{
    margin-top: 56px;
  }

  .marston-landing .lp-lounge__inner{
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .marston-landing .lp-lounge__image{
    height: 420px;
  }

  .marston-landing .lp-lounge__footer{
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
    row-gap: 18px;
    margin-top: 18px;
  }

  .marston-landing .lp-lounge__logo{
    transform: translateY(-10px);
  }

  .marston-landing .lp-lounge__legal{
    justify-self: center;
    text-align: center;
  }

  .marston-landing .lp-lounge__social{
    justify-self: center;
    text-align: center;
    white-space: normal;
    font-size: 14px;
  }
}



body.page-id-6 #header,
body.page-id-6 #footer,
body.page-id-6 hr{
  display: none !important;
}

body.page-id-6 #page{
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================
   FORMIDABLE FORM (Marston Landing)
   - Using Formidable "Label Position = Placeholder inside the field"
   - So the LABEL is the placeholder UI
   - We style the label like the Figma placeholder
========================= */

/* Make each field a positioning context for the label */
.marston-landing .lp-cream__form .frm_form_field{
  position: relative;
  margin-bottom: 12px; /* UPDATED: tighter stack (was 18px) */
}

/* Kill hidden Formidable spacing that can sneak in */
.marston-landing .lp-cream__form .frm_form_field .frm_input_container,
.marston-landing .lp-cream__form .frm_form_field .frm_inside_container,
.marston-landing .lp-cream__form .frm_form_field .frm_field_inner{
  margin: 0 !important;
  padding: 0 !important;
}

/* Style the label to look like the Figma placeholder text */
.marston-landing .lp-cream__form .frm_primary_label{
  font-family: "ABC Favorit Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important; /* 20% */
  text-transform: uppercase !important;
  line-height: 20px !important;

  color: #6f7a90 !important; /* placeholder tone */
}

/* Optional: hide the required asterisk if you don’t want it in the “placeholder” */
.marston-landing .lp-cream__form .frm_primary_label .frm_required{
  display: none !important;
}

/* Tighten container spacing */
.marston-landing .lp-cream__form .frm_form_fields,
.marston-landing .lp-cream__form fieldset{
  margin: 0;
  padding: 0;
  border: 0;
}

/* =========================
   INPUTS (underline only) + typed text styling
========================= */
.marston-landing .lp-cream__form input[type="text"],
.marston-landing .lp-cream__form input[type="email"],
.marston-landing .lp-cream__form input[type="tel"]{
  width: 389px;
  max-width: 100%;

  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid #704525 !important;
  border-radius: 0 !important;

  height: 24.6116px;
  line-height: 20px;
  padding: 0 !important;
  margin: 0 !important;

  /* Typed text should match the same mono style */
  font-family: "ABC Favorit Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;

  color: #704525 !important;

  box-shadow: none !important;
  outline: none !important;
  box-sizing: border-box;
}

/* Keep focus clean */
.marston-landing .lp-cream__form input:focus{
  border-bottom-color: #704525 !important;
  box-shadow: none !important;
}

/* =========================
   SUBMIT BUTTON — Marston Landing (override ALL Formidable styles)
========================= */

/* UPDATED: Spacing from last field */
body.page-id-6 .marston-landing .lp-cream__form .frm_submit{
  margin-top: 18px; /* UPDATED: was 22px */
}

/* Hard override the Formidable button styles no matter what style preset is active */
body.page-id-6 .marston-landing .lp-cream__form .frm_submit button.frm_button_submit,
body.page-id-6 .marston-landing .lp-cream__form button.frm_button_submit{
  appearance: none !important;
  -webkit-appearance: none !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;

  width: 124.4406px !important;
  height: 40px !important;
  padding: 10px !important;

  background: #561C27 !important;
  color: #F9F6E8 !important;

  border: 0 !important;
  border-radius: 30px !important;

  box-shadow: none !important;
  text-shadow: none !important;

  margin: 0 !important;          /* Formidable adds margin */
  line-height: 1 !important;

  font-family: "ABC Favorit Mono",
               ui-monospace,
               SFMono-Regular,
               Menlo,
               Monaco,
               Consolas,
               "Liberation Mono",
               "Courier New",
               monospace !important;

  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;

  cursor: pointer !important;
  transition: opacity 0.2s ease, transform 0.15s ease;
}

/* Arrow */
body.page-id-6 .marston-landing .lp-cream__form .frm_submit button.frm_button_submit::after,
body.page-id-6 .marston-landing .lp-cream__form button.frm_button_submit::after{
  content: "→";
  font-size: 14px;
  line-height: 1;
  display: inline-block;
}

/* Hover / Active */
body.page-id-6 .marston-landing .lp-cream__form .frm_submit button.frm_button_submit:hover,
body.page-id-6 .marston-landing .lp-cream__form button.frm_button_submit:hover{
  opacity: 0.85;
}

body.page-id-6 .marston-landing .lp-cream__form .frm_submit button.frm_button_submit:active,
body.page-id-6 .marston-landing .lp-cream__form button.frm_button_submit:active{
  transform: translateY(1px);
}

/* Focus */
body.page-id-6 .marston-landing .lp-cream__form .frm_submit button.frm_button_submit:focus-visible,
body.page-id-6 .marston-landing .lp-cream__form button.frm_button_submit:focus-visible{
  outline: 2px solid rgba(86, 28, 39, 0.35);
  outline-offset: 4px;
}

/* =========================
   CLEANUP
========================= */
.marston-landing .lp-cream__form input,
.marston-landing .lp-cream__form button{
  box-shadow: none !important;
}

/* Hide honeypot row (container, not just the input) */
.marston-landing .lp-cream__form #frm_field_8_container{
  display: none !important;
}

/* Force label color in ALL states (Formidable overrides these otherwise) */
.marston-landing .lp-cream__form .frm_form_field .frm_primary_label{
  color: #704525 !important;
  opacity: 1 !important;
}

/* When floating (focused / has value) keep it the same */
.marston-landing .lp-cream__form .frm_form_field.frm_focus .frm_primary_label,
.marston-landing .lp-cream__form .frm_form_field.frm_has_value .frm_primary_label{
  color: #704525 !important;
  opacity: 1 !important;
}

/* =========================
   HERO VISIBILITY TOGGLE
========================= */
.lp-hero--mobile{ display:none; }

@media (max-width: 900px){
  .lp-hero--desktop{ display:none; }
  .lp-hero--mobile{ display:block; }
}

/* =========================
   DESKTOP HERO (locked)
========================= */
.lp-hero--desktop .lp-hero__row{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
}

.lp-hero--desktop .lp-hero__brand{
  grid-column:2;
  margin:0 auto;
}

.lp-hero--desktop .lp-hero__left{
  justify-self:start;
}

.lp-hero--desktop .lp-hero__right{
  justify-self:end;
  text-align:right;
}

/* =========================
   MOBILE HERO (FIGMA MATCH)
========================= */
.lp-hero--mobile{
  background:#561C27;
  color:#A88B89;
}

.lp-hero-mobile__top{
  display:grid;
  grid-template-columns:120px 1fr 206px;
  align-items:center;
  margin-top:13px;
}

.lp-hero-mobile__top .mono-label{
  font-size:12px;
  letter-spacing:0.25em;
  line-height:25px;
  white-space:nowrap;
}

.lp-hero-mobile__top span:nth-child(1){
  text-align:left;
}

.lp-hero-mobile__top span:nth-child(2){
  text-align:center;
}

.lp-hero-mobile__top span:nth-child(3){
  text-align:right;
}

.lp-hero-mobile__brand{
  width:322px;
  max-width:100%;
  margin:48px auto 0;
  display:block;
}

.lp-hero-mobile__image{
  width:100%;
  max-width:404px;
  height:387px;
  margin:58px auto 0;
  overflow:hidden;
}

.lp-hero-mobile__image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.lp-hero-mobile__mark{
  width:89px;
  margin:54px auto 0;
  display:block;
}

.lp-hero-mobile__signup{
  margin:26px auto 24px;
  display:flex;
  justify-content:center;
  gap:18px;
  color:#A88B89;
  text-decoration:none;
}



/* =========================================================
   FINAL LAYOUT LOCK (Desktop + Mobile)
   - separate DOM structures
   - flexbox-based alignment
   - appended at end to override earlier grid rules
========================================================= */

/* HERO (DESKTOP) */
.marston-landing .lp-hero--desktop .lp-hero__row{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.marston-landing .lp-hero--desktop .lp-hero__brand{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  grid-column: auto; /* override earlier grid intent */
  justify-self: auto;
  max-width: 426px;
}

.marston-landing .lp-hero--desktop .lp-hero__row--top{
  padding-top: 41px;
}

.marston-landing .lp-hero--desktop .lp-hero__row--bottom{
  padding-top: 85px;
  padding-bottom: 7px;
}

/* Center M mark in bottom row */
.marston-landing .lp-hero--desktop .lp-hero__mark{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  width: 99px;
}

/* Keep signup/right aligned */
.marston-landing .lp-hero--desktop .lp-hero__signup{
  justify-content: flex-end;
}

/* HERO (MOBILE) — dedicated classes only */
.lp-hero--mobile{ display:none; }
@media (max-width: 900px){
  .lp-hero--desktop{ display:none; }
  .lp-hero--mobile{ display:block; }
}

/* Cream section two-column via flex on desktop */
@media (min-width: 901px){
  .marston-landing .lp-cream__grid{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 148px;
  }
  .marston-landing .lp-cream__grid > :first-child{ width: 376px; }
  .marston-landing .lp-cream__grid > :last-child{ width: 390px; }
}

/* Lounge footer via flex (center logo overlap preserved) */
@media (min-width: 901px){
  .marston-landing .lp-lounge__footer{
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
  }

  .marston-landing .lp-lounge__logo{
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
  }
}

/* ===== FIX: Desktop top row must be true 3-column flex (no absolute brand) ===== */
@media (min-width: 901px){
  /* make the top row a real flex row */
  .marston-landing .lp-hero__row--top{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-top: 41px; /* keep your spacing */
  }

  /* left + right labels become equal columns */
  .marston-landing .lp-hero__row--top .lp-hero__left,
  .marston-landing .lp-hero__row--top .lp-hero__right{
    flex: 1 1 0;
    white-space: nowrap;
  }

  .marston-landing .lp-hero__row--top .lp-hero__left{ text-align: left; }
  .marston-landing .lp-hero__row--top .lp-hero__right{ text-align: right; }

  /* IMPORTANT: brand must NOT be absolute in the TOP row */
  .marston-landing .lp-hero__row--top .lp-hero__brand{
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;

    flex: 0 0 auto;
    margin: 0 32px;         /* space between labels and brand */
    max-width: 426px;
  }

  /* keep the logo image from blowing up */
  .marston-landing .lp-hero__row--top .lp-hero__brand img{
    display: block;
    width: 100%;
    height: auto;
  }
}

/* ===== FIX #2: Header bottom spacing stays merlot ===== */
.marston-landing .lp-hero{
  background-color: var(--merlot);
  padding-bottom: 72px; /* adjust to match Figma */
  margin-bottom: 0 !important;
}

/* ===== FIX #3: Overlap the circular logo onto the bottom image ===== */
@media (min-width: 901px){

  /* Make the lounge section the positioning context */
  .marston-landing .lp-lounge{
    position: relative;
  }

  /* Ensure the image area is the anchor */
  .marston-landing .lp-lounge__image-wrap{
    position: relative;
  }

  /* Push the footer up into the image so overlap is real (not just floating) */
  .marston-landing .lp-lounge__footer{
    position: relative;
    margin-top: -64px !important;  /* overlap amount */
    padding-top: 0 !important;
    z-index: 5;
  }

  /* Center the logo and keep it sitting on the image edge */
  .marston-landing .lp-lounge__logo{
    position: absolute !important;
    left: 50%;
    top: 0; /* top of footer */
    transform: translate(-50%, -55%) !important;
    z-index: 20 !important;
    margin: 0 !important;
  }
}

/* ===== FIX #3 (REPAIR): restore footer bar + overlap logo correctly ===== */
@media (min-width: 901px){

  /* Make sure the photo + footer touch (no gap) */
  .marston-landing .lp-lounge__image-wrap{
    margin-bottom: 0 !important;
    position: relative;
    z-index: 1;
  }

  /* Restore footer to normal flow + brown band */
  .marston-landing .lp-lounge__footer{
    margin-top: 0 !important;                /* undo the negative pull-up */
    background: var(--bronze) !important;    /* or your footer brown var */
    position: relative;
    z-index: 2;
    padding-top: 80px !important;            /* room for the overlapped logo */
    padding-bottom: 32px !important;
  }

  /* Put the circular logo centered, overlapping UP into the image */
  .marston-landing .lp-lounge__logo{
    position: absolute !important;
    left: 50% !important;
    top: 0 !important;                       /* top edge of footer */
    transform: translate(-50%, -42%) !important; /* overlap amount */
    z-index: 10 !important;
    margin: 0 !important;
  }
}