/* =========================================================================
   MySpace v2 — home.css
   Brand-level multi-property site. Bloom-aligned, budget-feel, boxes layout.
   Loaded AFTER ../gdh-site/assets/css/styles.css — overrides where needed.
   ========================================================================= */

/* ---------- 1. v2 tokens — MySpace identity (the four logo colours) ----------
   The MySpace logo is a vertical stack of four colour blocks:
     Yellow (welcome)  →  Coral (warmth)  →  Navy (wordmark)  →  Teal (calm)
   These four colours drive the entire palette. Strict roles below. */

:root {
  /* The four brand blocks */
  --ms-yellow:      #FFCC2E;   /* role: warmth / welcome / focus rings */
  --ms-coral:       #EF6C2C;   /* role: action accent / hover reveal / eyebrow text */
  --ms-navy:        #15355B;   /* role: primary action bg / headlines / links */
  --ms-teal:        #3FA9B5;   /* role: calm / tier badges / right-block on CTAs */

  /* Tints (~5–8% saturation) for section backgrounds */
  --ms-yellow-tint: #FFF7DD;
  --ms-coral-tint:  #FCEFE7;
  --ms-teal-tint:   #EDF6F8;
  --ms-navy-tint:   #EFF1F5;

  /* The universal "stack-mark" gradient — the brand's signature device.
     Use anywhere a coloured stripe is needed: eyebrow marks, card edges,
     hero rail, footer top, CTA ribbons. */
  --ms-stack-v: linear-gradient(
    to bottom,
    var(--ms-yellow) 0 25%,
    var(--ms-coral)  25% 50%,
    var(--ms-navy)   50% 75%,
    var(--ms-teal)   75% 100%
  );
  --ms-stack-h: linear-gradient(
    to right,
    var(--ms-yellow) 0 25%,
    var(--ms-coral)  25% 50%,
    var(--ms-navy)   50% 75%,
    var(--ms-teal)   75% 100%
  );

  /* Cards / boxes */
  --card-bg:     #FFFFFF;
  --card-border: 1px solid #ECE4D0;
  --card-radius: 8px;
  --card-pad:    24px;
  --card-shadow: 0 1px 2px rgba(42,40,35,.04);
  --card-shadow-hover: 0 6px 20px rgba(21,53,91,.10);

  /* v2 layout */
  --container-v2: 1200px;
  --pad-section:  96px;
  --gutter:       24px;
}

@media (max-width: 768px) {
  :root {
    --pad-section: 64px;
    --card-pad:    20px;
    --gutter:      16px;
  }
}

/* ---------- 2. Override: kill serif inside v2 page sections ---------- */
/* The parent uses Playfair Display for h1/h2 (luxury serif).
   v2 is budget mid-market — single sans across the page sections only.
   Header/footer chrome inherits parent styles unchanged. */

main.v2 h1,
main.v2 h2,
main.v2 h3,
main.v2 h4,
main.v2 h5 {
  font-family: var(--fb);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.2;
}

main.v2 h1 { font-size: clamp(32px, 4.4vw, 48px); font-weight: 600; }
main.v2 h2 { font-size: clamp(24px, 2.6vw, 32px); }
main.v2 h3 { font-size: 18px; }
main.v2 h4 { font-size: 16px; }

main.v2 em,
main.v2 i {
  font-style: normal;     /* no italics in v2 — italics signal luxury */
  color: var(--ms-coral);
}

main.v2 a:hover {
  color: var(--ms-coral);
}

/* ---------- 3. Container + section rhythm ---------- */

.v2-container {
  max-width: var(--container-v2);
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
}

@media (max-width: 768px) {
  .v2-container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.v2-section {
  padding: var(--pad-section) 0;
}

.v2-section-head {
  margin-bottom: 48px;
  text-align: center;
}

/* Every section eyebrow is preceded by the MySpace mini-logo: a 5×14 px
   four-block vertical stripe. This is the brand's signature appearing
   ~10 times on the page — small, deliberate, unmistakable. */
.v2-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ms-coral);
  margin-bottom: 12px;
}
.v2-eyebrow::before {
  content: "";
  width: 5px;
  height: 14px;
  background: var(--ms-stack-v);
  border-radius: 1px;
  flex-shrink: 0;
}

.v2-lead {
  max-width: 56ch;
  margin: 12px auto 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.6;
}

/* ---------- 4. CTAs — the MySpace block-stack pattern ----------
   Every primary CTA is composed like the logo: a stack of coloured blocks.
   Yellow + coral fixed bricks on the left = the "logo stamp."
   Navy main body = where the wordmark sits in the actual logo (label here).
   Teal end-block = the calm-secondary slot. On hover, the teal block
   widens to reveal a forward arrow and shifts to coral.

   Default state:                       Hover state:
   ┌──┬─────────────┬──┐                ┌──┬─────────────┬───────┐
   │Y │             │T │                │Y │             │  →    │
   │C │   Label     │  │      ─►        │C │   Label     │ coral │
   └──┴─────────────┴──┘                └──┴─────────────┴───────┘
*/

.v2-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  height: 46px;
  padding: 0 28px 0 32px;          /* 18 px left brick + 14 px gap; 18 px right teal + 10 px gap */
  font-family: var(--fb);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #fff;
  background: var(--ms-navy);
  border: none;
  border-radius: var(--card-radius);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: padding-right 220ms ease-out, background 220ms ease-out, transform 120ms ease-out;
}

/* Left brick: yellow on top, coral below — vertical 50/50 split.
   This is the top half of the MySpace logo, miniaturised. */
.v2-btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 18px;
  background: linear-gradient(
    to bottom,
    var(--ms-yellow) 0 50%,
    var(--ms-coral)  50% 100%
  );
  z-index: 1;
}

/* Right block: teal by default with a hidden arrow.
   On hover, expands and shifts to coral; arrow fades in. */
.v2-btn::after {
  content: "→";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 18px;
  background: var(--ms-teal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fb);
  font-size: 18px;
  font-weight: 700;
  color: transparent;             /* arrow hidden by default */
  transition: width 220ms ease-out, background 220ms ease-out, color 220ms ease-out;
  z-index: 1;
}

.v2-btn:hover {
  padding-right: 60px;
  background: var(--ms-navy);
  color: #fff;
}
.v2-btn:hover::after {
  width: 50px;
  background: var(--ms-coral);
  color: #fff;
}
.v2-btn:active { transform: translateY(1px); }
.v2-btn:focus-visible {
  outline: 2px solid var(--ms-yellow);
  outline-offset: 3px;
}

/* Ghost variant — same logo bricks on left, transparent center, teal end */
.v2-btn-ghost {
  background: transparent;
  color: var(--ms-navy);
  border: 1px solid var(--line);
}
.v2-btn-ghost::before {
  width: 6px;                     /* slimmer brick on the ghost variant */
}
.v2-btn-ghost::after {
  background: transparent;
  color: transparent;
  border-left: 1px solid var(--line);
  width: 18px;
}
.v2-btn-ghost:hover {
  background: var(--ms-yellow-tint);
  color: var(--ms-navy);
  border-color: var(--ms-yellow);
}
.v2-btn-ghost:hover::after {
  background: var(--ms-coral);
  color: #fff;
  border-left-color: var(--ms-coral);
  width: 50px;
}

/* Text-link CTA — the logo stack rendered as a 4-colour underline bar.
   Arrow already in HTML content (e.g. "Book early →") shifts on hover. */
.v2-btn-arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ms-navy);
  font-size: 14px;
  font-weight: 600;
  padding: 4px 4px 8px 0;
  background-image: var(--ms-stack-h);
  background-size: 100% 3px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: color 200ms ease-out, padding-right 200ms ease-out, background-size 200ms ease-out;
}
.v2-btn-arrow:hover {
  color: var(--ms-coral);
  padding-right: 14px;
  background-size: 100% 4px;
}

/* ---------- 5. Section 2.1 — Hero ---------- */

.v2-hero {
  position: relative;
  min-height: 640px;
  padding: 80px 0 64px;
  background-image:
    linear-gradient(180deg, rgba(21,53,91,.30) 0%, rgba(21,53,91,.65) 100%),
    url('https://images.unsplash.com/photo-1611892440504-42a792e24d32?w=1800&q=82&auto=format&fit=crop');
  background-size: cover;
  background-position: center;
  color: #fff;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* The MySpace logo manifest as a 12 px vertical 4-colour rail down the
   right edge of the hero. Brand-fingerprint, immediately visible. */
.v2-hero::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 12px;
  background: var(--ms-stack-v);
  z-index: 6;
}

.v2-hero-inner {
  max-width: var(--container-v2);
  margin: 0 auto;
  padding: 0 32px;
  width: 100%;
}
.v2-hero .v2-eyebrow {
  color: var(--ms-yellow);
}
.v2-hero .v2-eyebrow::before {
  /* On dark hero, give the stack-mark a faint white hairline so it stays legible */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}
.v2-hero h1 {
  color: #fff;
  margin: 0 0 16px;
  max-width: 16ch;
}
.v2-hero-sub {
  color: rgba(255,255,255,.86);
  font-size: 18px;
  line-height: 1.5;
  max-width: 52ch;
  margin: 0 0 36px;
}

@media (max-width: 768px) {
  .v2-hero { min-height: 540px; padding: 56px 0 32px; }
  .v2-hero-sub { font-size: 16px; margin-bottom: 28px; }
}

/* Booking widget */
.v2-booking {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr auto;
  gap: 0;
  background: #fff;
  border-radius: var(--card-radius);
  padding: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  align-items: stretch;
  max-width: 920px;
}
.v2-booking-field {
  position: relative;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-right: 1px solid var(--line-soft);
}
.v2-booking-field:last-of-type { border-right: none; }
.v2-booking-field label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.v2-booking-field select,
.v2-booking-field input {
  font-family: var(--fb);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  border: none;
  outline: none;
  padding: 4px 0;
  background: transparent;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.v2-booking-submit {
  display: flex;
  align-items: center;
  margin-left: 8px;
}
.v2-booking-submit .v2-btn {
  height: 100%;
  min-height: 46px;
  /* Keep block-stack structure: 32px left for yellow/coral brick, 28px right for teal */
  padding: 0 28px 0 50px;
  font-size: 14px;
}
.v2-booking-submit .v2-btn:hover { padding-right: 60px; }

@media (max-width: 768px) {
  .v2-booking {
    grid-template-columns: 1fr 1fr;
    padding: 12px;
  }
  .v2-booking-field {
    border-right: none;
    border-bottom: 1px solid var(--line-soft);
    padding: 12px;
  }
  .v2-booking-field:nth-child(odd) { border-right: 1px solid var(--line-soft); }
  .v2-booking-field:last-of-type   { border-bottom: none; }
  .v2-booking-submit {
    grid-column: span 2;
    margin: 8px 0 0;
  }
  .v2-booking-submit .v2-btn { width: 100%; padding: 0 28px 0 50px; min-height: 50px; }
}

/* ---------- 6. Section 2.2 — Snippet bar (chips) ---------- */

.v2-snippets {
  background: var(--paper);
  padding: 40px 0;
  border-bottom: 1px solid var(--line-soft);
}
.v2-snippets-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.v2-chip {
  background: #fff;
  border: var(--card-border);
  border-radius: var(--card-radius);
  padding: 18px 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 110px;
  justify-content: center;
}
.v2-chip-num {
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.01em;
}
.v2-chip-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-mute);
  line-height: 1.3;
}

@media (max-width: 768px) {
  .v2-snippets-grid { grid-template-columns: repeat(2, 1fr); }
  .v2-chip { min-height: 100px; }
}

/* ---------- 7. Section 2.3 — Why MySpace (3×2 grid) ---------- */

.v2-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
}
.v2-why-card {
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 200px;
}
/* "Why MySpace" — each icon sits on a 64×64 coloured backplate so the
   glyph carries the message before the user reads a word. The 6 cards
   cycle through the four logo colours; together the grid mirrors the
   logo's stack of coloured rooms.

   Contrast rule: white icon on navy/coral/teal; navy icon on yellow.   */
.v2-why-icon {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--ms-yellow);
  color: var(--ms-navy);                /* default = navy icon on yellow plate */
  margin-bottom: 8px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(21,53,91,.08);
  transition: transform 220ms ease-out, box-shadow 220ms ease-out;
}
.v2-why-icon svg {
  width: 32px;
  height: 32px;
  display: block;
  flex-shrink: 0;
}

/* Backplate cycle — Y → C → N → T → Y → C across the 6 cards */
.v2-why-card:nth-child(1) .v2-why-icon { background: var(--ms-yellow); color: var(--ms-navy); }
.v2-why-card:nth-child(2) .v2-why-icon { background: var(--ms-coral);  color: #fff; }
.v2-why-card:nth-child(3) .v2-why-icon { background: var(--ms-navy);   color: #fff; }
.v2-why-card:nth-child(4) .v2-why-icon { background: var(--ms-teal);   color: #fff; }
.v2-why-card:nth-child(5) .v2-why-icon { background: var(--ms-yellow); color: var(--ms-navy); }
.v2-why-card:nth-child(6) .v2-why-icon { background: var(--ms-coral);  color: #fff; }

/* Lift the icon plate slightly on card hover for a subtle interaction */
.v2-why-card { transition: transform 220ms ease-out, box-shadow 220ms ease-out; }
.v2-why-card:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-hover); }
.v2-why-card:hover .v2-why-icon { transform: scale(1.04); }

/* Card layout adjustments — give icons space to breathe at the top of each card */
.v2-why-card { gap: 16px; padding-top: 28px; }
.v2-why-card h3 { line-height: 1.25; }
.v2-why-card h3 {
  margin: 0;
}
.v2-why-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 36ch;
}

@media (max-width: 1024px) { .v2-why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .v2-why-grid { grid-template-columns: 1fr; } }

/* ---------- 8. Section 2.4 — Browse by city ---------- */

.v2-cities-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
}
.v2-city-tile {
  border: var(--card-border);
  border-radius: var(--card-radius);
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
  display: block;
  text-decoration: none;
  color: inherit;
}
.v2-city-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover);
  color: inherit;
}
.v2-city-img {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
}
.v2-city-body {
  padding: 14px 16px;
}
.v2-city-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}
.v2-city-count {
  font-size: 12px;
  color: var(--ink-mute);
}

@media (max-width: 1024px) { .v2-cities-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .v2-cities-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- 9. Section 2.5 — All properties (the main section) ---------- */

.v2-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 28px;
  padding: 16px;
  background: #fff;
  border: var(--card-border);
  border-radius: var(--card-radius);
}
.v2-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  padding: 8px 12px;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--fb);
  appearance: none;
  -webkit-appearance: none;
  padding-right: 28px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-mute) 50%), linear-gradient(135deg, var(--ink-mute) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 10px) 50%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
.v2-filter:focus { outline: 2px solid var(--ms-yellow); outline-offset: 2px; }

.v2-filter-count {
  margin-left: auto;
  font-size: 13px;
  color: var(--ink-mute);
}

.v2-property-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--gutter);
}
@media (max-width: 1024px) { .v2-property-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .v2-property-grid { grid-template-columns: 1fr; } }

.v2-property-card {
  position: relative;
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}

/* The MySpace spine — a 4 px left edge in the four logo colours.
   Every card is "a space in the building." Scanning the grid feels like
   reading a stack of MySpace marks. */
.v2-property-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--ms-stack-v);
  z-index: 3;
}

.v2-property-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover);
  color: inherit;
}
.v2-pc-image {
  position: relative;
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
}
.v2-pc-tier {
  position: absolute;
  top: 12px;
  left: 16px;             /* offset 4 px more to clear the brand spine */
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--ms-navy);     /* MySpace tier — wordmark colour */
  color: #fff;
  padding: 5px 9px;
  border-radius: 4px;
}
.v2-pc-tier[data-tier="Signature"] { background: var(--ms-yellow); color: var(--ms-navy); }
.v2-pc-tier[data-tier="Express"]   { background: var(--ms-teal);   color: #fff; }
.v2-pc-fav {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.88);
  border: none;
  color: var(--ink);
  font-size: 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.v2-pc-fav.is-fav { color: var(--ms-coral); }
.v2-pc-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1;
}
.v2-pc-name { font-size: 17px; font-weight: 600; margin: 0; }
.v2-pc-loc  { font-size: 13px; color: var(--ink-mute); margin: 0; }
.v2-pc-meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 14px;
  font-size: 12px;
  color: var(--ink-soft);
}
.v2-pc-meta li::before { content: "·"; margin-right: 14px; color: var(--line); }
.v2-pc-meta li:first-child::before { content: ""; margin-right: 0; }
.v2-pc-price {
  margin-top: auto;
  padding-top: 12px;
  font-size: 13px;
  color: var(--ink-soft);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.v2-pc-price strong {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  margin-right: 4px;
}
.v2-pc-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ms-coral);
}

.v2-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 20px;
  color: var(--ink-mute);
  font-size: 14px;
}

/* ---------- 10. Section 2.6 — Brand tiers ---------- */

.v2-tiers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
}
.v2-tier-card {
  background: #fff;
  border: var(--card-border);
  border-radius: var(--card-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.v2-tier-img {
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
}
.v2-tier-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 1;
}
.v2-tier-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ms-coral);
}
.v2-tier-card[data-tier="MySpace"]   .v2-tier-label { color: var(--ms-navy); }
.v2-tier-card[data-tier="Signature"] .v2-tier-label { color: var(--ms-coral); }
.v2-tier-card[data-tier="Express"]   .v2-tier-label { color: var(--ms-teal); }
.v2-tier-card h3 { margin: 0; }
.v2-tier-card p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
}
.v2-tier-link {
  margin-top: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  display: inline-flex;
  gap: 6px;
  align-items: center;
  cursor: pointer;
}
.v2-tier-link:hover { color: var(--ms-coral); }

@media (max-width: 1024px) { .v2-tiers-grid { grid-template-columns: 1fr; } }

/* ---------- 11. Section 2.7 — Direct-discount banner ---------- */

.v2-direct {
  position: relative;
  background: var(--ms-yellow-tint);
  border-radius: var(--card-radius);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
/* Banner gets the same brand spine on its left edge */
.v2-direct::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: var(--ms-stack-v);
  z-index: 2;
}
.v2-direct-img {
  aspect-ratio: auto;
  background-image: url('https://images.unsplash.com/photo-1582719478250-c89cae4dc85b?w=1200&q=82&auto=format&fit=crop');
  background-size: cover;
  background-position: center;
  min-height: 280px;
}
.v2-direct-body {
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
}
.v2-direct-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ms-coral);
}
.v2-direct-eyebrow::before {
  content: "";
  width: 5px;
  height: 14px;
  background: var(--ms-stack-v);
  border-radius: 1px;
  flex-shrink: 0;
}
.v2-direct h2 {
  margin: 0;
  font-size: clamp(22px, 2.4vw, 28px) !important;
}
.v2-direct p {
  margin: 0;
  font-size: 15px;
  color: var(--ink-soft);
  max-width: 42ch;
  line-height: 1.55;
}

@media (max-width: 768px) {
  .v2-direct { grid-template-columns: 1fr; }
  .v2-direct-img { aspect-ratio: 16 / 9; }
  .v2-direct-body { padding: 28px 20px; }
}

/* ---------- 12. Section 2.8 — Offers ---------- */

.v2-offers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
}
.v2-offer-card {
  position: relative;
  background: #fff;
  border: var(--card-border);
  border-radius: var(--card-radius);
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 220px;
}
/* Offer cards rotate through the brand colours — yellow / coral / teal —
   so the three offer tiles together echo the logo block sequence. */
.v2-offer-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 3px;
  background: var(--ms-yellow);
  color: var(--ms-navy);
  margin-bottom: 6px;
}
.v2-offer-card:nth-child(2) .v2-offer-tag { background: var(--ms-coral); color: #fff; }
.v2-offer-card:nth-child(3) .v2-offer-tag { background: var(--ms-teal);  color: #fff; }

.v2-offer-card {
  position: relative;
  overflow: hidden;
}
/* Each offer card carries a thin top stripe in its assigned colour —
   tying back to the logo block it represents. */
.v2-offer-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--ms-yellow);
}
.v2-offer-card:nth-child(2)::before { background: var(--ms-coral); }
.v2-offer-card:nth-child(3)::before { background: var(--ms-teal); }
.v2-offer-card h3 { margin: 0; }
.v2-offer-card p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
  flex-grow: 1;
}
.v2-offer-card .v2-btn-arrow { margin-top: 8px; }

@media (max-width: 1024px) { .v2-offers-grid { grid-template-columns: 1fr; } }

/* ---------- 13. Section 2.9 — Stories ---------- */

.v2-stories-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
}
.v2-story-card {
  border: var(--card-border);
  border-radius: var(--card-radius);
  overflow: hidden;
  background: #fff;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: transform 200ms ease-out;
}
.v2-story-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover);
  color: inherit;
}
.v2-story-img {
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
}
.v2-story-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.v2-story-headline {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.v2-story-meta {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

@media (max-width: 1024px) { .v2-stories-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .v2-stories-grid { grid-template-columns: 1fr; } }

/* ---------- 14. Section 2.10 — About block ---------- */

.v2-about {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 56px;
  align-items: start;
}
.v2-about-body { max-width: 56ch; }
.v2-about-body p {
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.65;
  margin-bottom: 20px;
}
.v2-about-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.v2-stat-tile {
  background: #fff;
  border: var(--card-border);
  border-radius: var(--card-radius);
  padding: 22px 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 110px;
  justify-content: center;
}
.v2-stat-num {
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}
.v2-stat-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

@media (max-width: 1024px) {
  .v2-about { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- 15. Section 2.11 — Trust strip ---------- */

/* Trust strip — navy tint ground so the section reads as "deep / trusted."
   Cells stay white-ish: each cell becomes its own crisp box on the tinted
   ground, with the brand-coloured headline inside. */
.v2-trust {
  background: var(--ms-navy-tint);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: 44px 0;
}
.v2-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  background: #fff;
  border-radius: var(--card-radius);
  border: var(--card-border);
  padding: 4px;
}
.v2-trust-cell {
  padding: 18px 20px 16px;
  border-right: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #fff;
  border-radius: 6px;
}
.v2-trust-cell:last-child { border-right: none; }

/* Trust-cell icon — 32 px line-style SVG sitting at the top of each cell.
   Cycles through the four logo colours so the row of four cells echoes
   the MySpace stack horizontally. Icons communicate the cell's meaning
   before the user reads a word. */
.v2-trust-icon {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  color: var(--ms-yellow);
  flex-shrink: 0;
}
.v2-trust-icon svg {
  width: 56px;
  height: 56px;
  display: block;
}
.v2-trust-cell:nth-child(1) .v2-trust-icon { color: var(--ms-yellow); }
.v2-trust-cell:nth-child(2) .v2-trust-icon { color: var(--ms-coral); }
.v2-trust-cell:nth-child(3) .v2-trust-icon { color: var(--ms-navy); }
.v2-trust-cell:nth-child(4) .v2-trust-icon { color: var(--ms-teal); }
.v2-trust-line1 {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.v2-trust-line2 {
  font-size: 12px;
  color: var(--ink-mute);
  line-height: 1.4;
}
@media (max-width: 768px) {
  .v2-trust-grid { grid-template-columns: 1fr; }
  .v2-trust-cell {
    border-right: none;
    border-bottom: 1px solid var(--line-soft);
    padding: 16px 0;
  }
  .v2-trust-cell:last-child { border-bottom: none; }
}

/* ---------- 16. Section 2.12 — Newsletter / contact ---------- */

.v2-news {
  position: relative;
  background: var(--ms-teal-tint);
  text-align: center;
  padding: 80px 0 64px;
}
/* Closing brand mark — a 6 px 4-colour stripe across the top of the section */
.v2-news::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--ms-stack-h);
}
.v2-news-card {
  max-width: 520px;
  margin: 0 auto 48px;
}
.v2-news-card h2 {
  margin: 0 0 12px;
}
.v2-news-form {
  display: flex;
  gap: 8px;
  margin-top: 24px;
  background: #fff;
  border: var(--card-border);
  border-radius: var(--card-radius);
  padding: 6px;
}
.v2-news-form input[type="email"] {
  flex: 1;
  border: none;
  outline: none;
  padding: 10px 14px;
  font-family: var(--fb);
  font-size: 14px;
  color: var(--ink);
  background: transparent;
}
.v2-news-form .v2-btn {
  /* Keep block-stack structure visible inside the newsletter form too */
  height: 44px;
  padding: 0 28px 0 44px;
}
.v2-news-form .v2-btn:hover { padding-right: 60px; }
.v2-news-confirm {
  display: none;
  margin-top: 12px;
  font-size: 13px;
  color: var(--ms-coral);
  font-weight: 600;
}
.v2-news-confirm.is-shown { display: block; }
.v2-news-or {
  margin-top: 16px;
  font-size: 13px;
  color: var(--ink-mute);
}

.v2-contact-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
  max-width: 880px;
  margin: 0 auto;
  text-align: left;
}
.v2-contact-cell {
  background: #fff;
  border: var(--card-border);
  border-radius: var(--card-radius);
  padding: 20px;
}
.v2-contact-cell h4 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.v2-contact-cell p {
  margin: 0;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.v2-contact-cell a { color: var(--ink); border-bottom: 1px solid var(--line); }
.v2-contact-cell a:hover { color: var(--ms-coral); border-color: currentColor; }

@media (max-width: 768px) {
  .v2-news-form { flex-direction: column; padding: 8px; }
  .v2-news-form .v2-btn { width: 100%; }
  .v2-contact-row { grid-template-columns: 1fr; }
}

/* ---------- 17. Reveal-on-scroll (subtle, 8 px y-fade) ---------- */

.v2-reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 250ms ease-out, transform 250ms ease-out;
}
.v2-reveal.is-revealed {
  opacity: 1;
  transform: none;
}

/* ---------- 18. Section background tints (the four-block rhythm) ----------
   The page itself is a stack of "spaces" — each section subtly tinted with
   one of the brand colours at ~5–8% saturation, alternated with paper/white
   so the page never feels heavy. */

.v2-bg-paper       { background: var(--paper); }
.v2-bg-white       { background: #fff; }
.v2-bg-yellow-tint { background: var(--ms-yellow-tint); }
.v2-bg-coral-tint  { background: var(--ms-coral-tint); }
.v2-bg-teal-tint   { background: var(--ms-teal-tint); }
.v2-bg-navy-tint   { background: var(--ms-navy-tint); }

/* ---------- 19. Snippet chips — top stripe in the four logo colours ----------
   Each chip in the row gets a 2 px top stripe in a brand colour, cycling.
   Together the row of 6 chips reads as a horizontal echo of the logo stack. */

.v2-chip {
  position: relative;
  overflow: hidden;
}
.v2-chip::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--ms-yellow);
}
.v2-chip:nth-child(2)::before { background: var(--ms-coral); }
.v2-chip:nth-child(3)::before { background: var(--ms-navy); }
.v2-chip:nth-child(4)::before { background: var(--ms-teal); }
.v2-chip:nth-child(5)::before { background: var(--ms-yellow); }
.v2-chip:nth-child(6)::before { background: var(--ms-coral); }

/* The big-number colour rotates through brand palette too, but tinted
   slightly toward navy so all six remain readable on white. */
.v2-chip:nth-child(odd)  .v2-chip-num { color: var(--ms-navy); }
.v2-chip:nth-child(even) .v2-chip-num { color: var(--ms-navy); }

/* ---------- 20. City-tile coloured corner tag (subtle brand presence) ---------- */

.v2-city-tile { position: relative; }
.v2-city-tile::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 24px;
  background: var(--ms-stack-v);
  z-index: 2;
}

/* ---------- 21. Tier cards — top stripe per tier (assigned to brand colour) ---------- */

.v2-tier-card { position: relative; }
.v2-tier-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--ms-navy);   /* default tier (MySpace) — navy, the wordmark colour */
  z-index: 2;
}
.v2-tier-card[data-tier="Signature"]::before { background: var(--ms-yellow); }
.v2-tier-card[data-tier="Express"]::before   { background: var(--ms-teal); }

/* ---------- 22. Story cards — small coloured corner mark ---------- */

.v2-story-card { position: relative; }
.v2-story-card::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 12px;
  width: 16px;
  height: 4px;
  background: var(--ms-stack-h);
  border-radius: 1px;
  z-index: 2;
}

/* ---------- 23. About stat tiles — each tile in a brand colour ---------- */

.v2-stat-tile {
  position: relative;
  overflow: hidden;
}
.v2-stat-tile::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--ms-yellow);
}
.v2-stat-tile:nth-child(2)::before { background: var(--ms-coral); }
.v2-stat-tile:nth-child(3)::before { background: var(--ms-navy); }
.v2-stat-tile:nth-child(4)::before { background: var(--ms-teal); }

/* ---------- 24. Trust strip — coloured number/check rotates per cell ---------- */

.v2-trust-cell:nth-child(1) .v2-trust-line1 { color: var(--ms-yellow); }
.v2-trust-cell:nth-child(2) .v2-trust-line1 { color: var(--ms-coral); }
.v2-trust-cell:nth-child(3) .v2-trust-line1 { color: var(--ms-navy); }
.v2-trust-cell:nth-child(4) .v2-trust-line1 { color: var(--ms-teal); }
/* Make the number/symbol the brand colour, but keep the body text dark for readability */

/* ---------- 25. Footer — closing brand stripe at the top edge ----------
   The footer is the page's last word — and it carries the full logo stack
   as a 4 px horizontal stripe across its top. Page begins with the logo
   (in nav) and ends with the logo (footer top). */

.footer { position: relative; }
.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--ms-stack-h);
  z-index: 1;
}

/* ---------- 26. MySpace logo treatment in chrome ----------
   Replaces the parent's text-only wordmark with the actual MySpace logo.
   The full SVG appears in two places: (1) masthead — small mark beside text;
   (2) footer — larger mark beside the brand line. The nav-brand inline shows
   a 14×22 micro version. */

.ms-wordmark {
  display: inline-flex !important;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}
.ms-logo-mark {
  display: block;
  width: 34px;
  height: 55px;
  flex-shrink: 0;
  object-fit: contain;
  /* Real PNG mark — no border-radius / shadow forced; let the asset speak */
}
.ms-wordmark-text {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.15;
  gap: 12px;
}
.ms-wordmark-text .line-1 {
  font-family: var(--fb);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ms-navy);
}
.ms-wordmark-text .line-2 {
  font-family: var(--fb);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin-top: 3px;
}

/* Nav-brand inline mark + text */
.ms-nav-brand {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  font-family: var(--fb) !important;
  font-weight: 700 !important;
  font-style: normal !important;
  color: var(--ms-navy) !important;
  letter-spacing: 0.01em;
}
.ms-nav-mark {
  display: block;
  width: 14px;
  height: 23px;
  flex-shrink: 0;
  object-fit: contain;
}
.ms-nav-brand:hover { color: var(--ms-coral) !important; }

/* Footer brand: full logo + brand line */
.ms-footer-brand {
  display: flex !important;
  align-items: center;
  gap: 18px;
}
.ms-footer-logo {
  display: block;
  width: 56px;
  height: 91px;
  flex-shrink: 0;
  object-fit: contain;
  /* Real PNG mark — no border-radius / shadow forced */
}
.ms-footer-text { flex: 1; min-width: 0; }
.ms-footer-text .wm {
  font-family: var(--fb) !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  letter-spacing: -0.005em !important;
  color: var(--ms-navy) !important;
  font-style: normal !important;
}
.ms-footer-text .wm em { font-style: normal !important; }
.ms-footer-text .sub {
  font-family: var(--fb) !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  color: var(--ink-mute) !important;
  margin-top: 4px;
}

/* Mobile — masthead stacks compact, footer brand stays horizontal */
@media (max-width: 768px) {
  .ms-logo-mark    { width: 28px; height: 46px; }
  .ms-wordmark-text .line-1 { font-size: 16px; }
  .ms-wordmark-text .line-2 { font-size: 10px; }
  .ms-footer-logo  { width: 44px; height: 72px; }
  .ms-footer-text .wm { font-size: 18px !important; }
}

/* ---------- 27. Reveal-footer peel-up — v2 overrides ----------
   The peel-up mechanism is in the parent CSS (.footer.is-reveal etc.).
   v2 only needs three small overrides:
     (a) Keep our 4-colour brand top stripe instead of the parent's gold hairline.
     (b) Force footer text colours that work on the dark fixed footer bg
         (parent's footer is `var(--ink)`; my v2 wm/sub were navy + ink-mute,
         which would disappear on a dark background).
     (c) Make the footer .v2-bg-* helpers no-op inside the fixed footer
         in case any nested element inherits a tint that fights legibility. */

/* (a) Override parent's 1-px gold hairline at the top of the fixed footer
       with our 4-colour MySpace brand stripe (4 px). */
.footer.is-reveal::before,
.footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--ms-stack-h);
  opacity: 1;
  z-index: 2;
}

/* (b) Footer text recolouring on the dark fixed footer */
.footer.is-reveal .ms-footer-text .wm {
  color: var(--paper) !important;          /* was navy — invisible on dark */
}
.footer.is-reveal .ms-footer-text .sub {
  color: rgba(250,246,238,.6) !important;  /* was ink-mute — too dark on dark */
}
.footer.is-reveal .ms-footer-brand {
  /* Slim the bottom margin a touch — fixed footer has its own padding scale */
  margin-bottom: var(--s7);
}

/* Lightly nudge the brand spotlight: a thin coloured halo behind the logo */
.footer.is-reveal .ms-footer-logo {
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}

/* ---------- 28. Skip-link safety on v2 main ---------- */

main.v2 { display: block; }
main.v2:focus { outline: none; }