/* ============================================================================
   REALTYTHANKYOU — ART DIRECTION
   The listing sheet: architectural, squared corners, hard photographic crops.

   Every sub-brand ships the SAME markup (.vhero / .vhero__overlay / h1.display /
   .gal-grid). This file therefore differentiates through art direction only: a
   different display face, eyebrow ornament, hero composition, surface treatment
   and section rhythm -- not a recoloured copy of the others.
   ========================================================================= */
:root{
  /* The shipped CSS REFERENCES --color-primary / --color-primary-dark (the
     mission hero and the sub-brand location hero both build their gradient from
     them) but nothing ever DEFINES them, so every brand fell back to a generic
     navy. Defining them here is what makes those heroes brand-coloured. */
  --color-primary:#0284C7; --color-primary-dark:#0B2436; --color-primary-mid:#065985;
  --bx-ink:#0B2436; --bx-accent:#0284C7; --bx-accent-d:#065985;
  --bx-paper:#F6F7F5; --bx-paper-2:#E9EDE9; --bx-rule:#D2D9D6; --bx-ash:#4C5C63;
  --focus-ring:#065985;
}

/* The sub-brand hero paints its own scrim in .vhero__scrim, so --grad-hero (the
   HIP hook) does nothing here. The shipped gradient was too light for white
   type over a pale photograph; this deepens it and anchors it where the text
   actually sits, without hiding the photograph. */
.vhero__scrim{
  background:linear-gradient(168deg, rgba(8,10,26,.58), rgba(8,10,26,.66) 46%, rgba(8,10,26,.86)) !important;
}

body{ background:var(--bx-paper); }
main section:not(.section--dark){ background:var(--bx-paper); }
main section.section:not(.section--dark):nth-of-type(even){ background:var(--bx-paper-2); }
main section.section--dark{ background:var(--bx-ink); }

/* --- rhythm: three densities, never one repeated value ------------------- */
/* Headings read --heading-ink (foundation.css). Setting the TOKEN rather than
   the colour keeps brand identity intact without a specificity fight. */
:root{ --heading-ink:#0B2436; --body-ink:#4C5C63; }
.vhero, .vhero .vhero__overlay{ --heading-ink:#ffffff; }

main section{ padding-block:var(--rhythm-base); }
main section.gallery{ padding-block:var(--rhythm-open); }
main section.section--dark:last-of-type{ padding-block:var(--rhythm-open); }

/* --- type --------------------------------------------------------------- */
h1,h2,h3,.display{ font-family:var(--display), "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing:-.022em; line-height:1.08; }
h2{ font-size:clamp(1.65rem,2.4vw,2.35rem); }
p,li{ font-family:var(--display), "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif; line-height:1.62; color:var(--body-ink, var(--bx-ash)); }
/* dark grounds come from --body-ink (foundation.css) */

.eyebrow{ font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:#0284C7; }
.eyebrow::before{ content:"["; margin-right:.45em; opacity:.7; }
.eyebrow::after{ content:"]"; margin-left:.45em; opacity:.7; }

/* --- hero --------------------------------------------------------------- */
.vhero{ padding:0 !important; }
.vhero__media{ border-radius:0 !important; max-width:none !important; }
.vhero__img{ object-position:50% 34% !important; }
.vhero .vhero__overlay{ text-align:left; max-width:38rem; margin-inline:0 auto 0 0; }
.vhero .display, .vhero h1.display{
  /* foundation.css has already disabled the background-clip:text trick, so a
     plain colour is now the thing that actually paints the headline. */
  color:#fff !important;
  font-size:clamp(2.1rem,4.9vw,3.7rem) !important;
  text-shadow:0 2px 26px rgba(0,0,0,.55);
}
.vhero .lead{ color:rgba(255,255,255,.93) !important; text-shadow:0 1px 14px rgba(0,0,0,.5); }
.vhero .eyebrow{ color:#fff; }

/* --- surfaces and controls --------------------------------------------- */
.card,[class*="__card"],.gal-grid > *,.uc{ background:#fff; border:1px solid #D2D9D6;
  border-radius:0px; box-shadow:none; }
.btn,a.btn,button.btn{ border-radius:0px; font-weight:700; letter-spacing:-.01em; }
.btn-primary,a.btn.btn-primary{ background:var(--bx-accent); border:1px solid var(--bx-accent-d); color:#fff; }
.btn-primary:hover,a.btn.btn-primary:hover{ background:var(--bx-accent-d); }
.vhero__ghost{ background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.55); color:#fff; }
.vhero__ghost:hover{ background:rgba(255,255,255,.2); }
hr,.divider{ border:0; border-top:1px solid var(--bx-rule); }
.gal-meta{ font-family:ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; font-size:.72rem; letter-spacing:.02em; color:var(--bx-ash); }

/* --- signature: the plan grid --------------------------------------------
   Squared corners throughout and a faint measured grid behind the gallery, the
   way a floor plan or a listing sheet is drawn. */
.gal-grid{ background-image:linear-gradient(var(--bx-rule) 1px,transparent 1px),
  linear-gradient(90deg,var(--bx-rule) 1px,transparent 1px);
  background-size:44px 44px; background-position:-1px -1px; padding:18px; }
.gal-grid > *{ border-radius:0; }

/* --- mission page ----------------------------------------------------------
   The shipped CSS pins the mission hero to a hardcoded navy:
       .mission-hero{ background:linear-gradient(180deg,#141a3a,#0d1024)!important }
   so all ten brands' mission pages read as HIP regardless of identity. Matching
   its !important is the only way to reach it; the gradient is built from this
   brand's own ink and accent. Text stays white -- the shipped rule already
   sets that, and the ground is still dark. */
.mission-hero{
  background:linear-gradient(150deg, var(--bx-accent-d) 0%, var(--bx-ink) 68%) !important;
}
.mission-badge{ background:rgba(255,255,255,.14); color:#fff; }


/* --- house mark ------------------------------------------------------------
   The papers mark is shared across all ten brands by design. It is kept, and
   only its rendering is regularised: a consistent optical size, real spacing
   from the wordmark, and no filter stack fighting the brand's own colour. */
.text-logo__icon{
  height: 1.28em;
  width: auto;
  margin-left: 10px;
  opacity: 1;
  flex: none;
}
.text-logo{ display: inline-flex; align-items: center; }