/* ============================================================
   LEGACIE — NEWSPAPER BROADSHEET REDESIGN
   Direction : Newspaper broadsheet  +  Wax Seal & Letterhead
   Palette   : Cream stock · black ink · spot red · blush #ecd9d9
   Fonts     : Libre Baskerville (display) · Lora (body) · Space Mono (labels)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

/* ─── Custom properties ─────────────────────────────────── */
:root {
  --blush:     #ecd9d9;
  --blush-lt:  #f6eeed;

  --cream:     #f7f2ea;
  --cream-mid: #ede4d4;
  --cream-dk:  #dfd3bc;
  --white:     #fdfaf5;
  --ink:       #16100a;
  --ink-mid:   #3d3028;
  --ink-faint: #6b5e56;
  --red:       #c0202f;
  --red-dk:    #8f1622;
  --red-pale:  #f0d4d7;

  --rule:      rgba(22,16,10,.16);
  --rule-bold: rgba(22,16,10,.65);

  --fd: 'Libre Baskerville', Georgia, serif;
  --fb: 'Lora', Georgia, serif;
  --fm: 'Space Mono', 'Courier New', monospace;

  --xs:   .7rem;
  --sm:   .8125rem;
  --base: 1rem;
  --md:   1.125rem;
  --lg:   1.375rem;
  --xl:   1.875rem;
  --2xl:  2.5rem;
  --3xl:  3.5rem;
  --4xl:  clamp(2.5rem, 5.5vw, 4.75rem);
  --hero: clamp(3rem, 8vw, 6.25rem);

  --sp-xs: .5rem;
  --sp-sm: 1rem;
  --sp-md: 2rem;
  --sp-lg: 3.5rem;
  --sp-xl: 6rem;

  --mw:  1200px;
  --mww: 1400px;
  --mwn: 780px;
}

/* ─── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--fb);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
address { font-style: normal; }

/* ─── Skip link ──────────────────────────────────────────── */
.skip-link {
  position: absolute; top: -200%; left: 1rem;
  background: var(--red); color: var(--cream);
  font-family: var(--fm); font-size: var(--xs); letter-spacing: .1em;
  padding: .5rem 1rem; z-index: 9999; transition: top .2s;
}
.skip-link:focus { top: 0; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* ─── Containers ─────────────────────────────────────────── */
.container        { max-width: var(--mw);  margin: 0 auto; padding: 0 var(--sp-md); }
.container--wide  { max-width: var(--mww); margin: 0 auto; padding: 0 var(--sp-md); }
.container--narrow{ max-width: var(--mwn); margin: 0 auto; padding: 0 var(--sp-md); }

/* ─── Typography ─────────────────────────────────────────── */
.kicker {
  font-family: var(--fm); font-size: var(--xs);
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--red); display: block; margin-bottom: .75rem;
}
.kicker--muted { color: var(--ink-faint); }
.kicker--pale  { color: rgba(247,242,234,.5); }

.dateline {
  font-family: var(--fm); font-size: var(--xs);
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--ink-faint);
  display: flex; align-items: center; gap: .75rem;
}
.dateline::before,.dateline::after {
  content: ''; display: block; height: 1px;
  background: var(--rule); flex: 1;
}
.dateline--left::after  { display: none; }
.dateline--right::before{ display: none; }

.h-d { font-family: var(--fd); font-weight: 700; line-height: 1.1; color: var(--ink); }
.h-d--hero { font-size: var(--hero); }
.h-d--xl   { font-size: var(--4xl); }
.h-d--lg   { font-size: var(--3xl); }
.h-d--md   { font-size: var(--2xl); }
.h-d--sm   { font-size: var(--xl); }
.h-d--xs   { font-size: var(--lg); }
.h-d--cream{ color: var(--cream); }

.bc { font-family: var(--fb); font-size: var(--md); line-height: 1.8; color: var(--ink-mid); }
.bc--sm    { font-size: var(--base); }
.bc--lg    { font-size: var(--lg); }
.bc--muted { color: var(--ink-faint); }
.bc--cream { color: rgba(247,242,234,.7); }

.pull-quote {
  font-family: var(--fd); font-style: italic;
  font-size: var(--lg); line-height: 1.55;
  border-left: 3px solid var(--red);
  padding-left: 1.5rem; color: var(--ink-mid);
}

.hr      { border: none; border-top: 1px solid var(--rule); }
.hr--bold{ border-top: 2px solid var(--ink); }
.hr--red { border-top: 2px solid var(--red); }

/* ─── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--fm); font-size: var(--xs);
  text-transform: uppercase; letter-spacing: .12em;
  padding: .9rem 2rem; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s;
}
.btn--red   { background: var(--red);  color: var(--cream); border-color: var(--red); }
.btn--red:hover { background: var(--red-dk); border-color: var(--red-dk); }
.btn--ink   { background: var(--ink);  color: var(--cream); border-color: var(--ink); }
.btn--ink:hover { background: var(--ink-mid); }
.btn--ghost { background: transparent; color: var(--cream); border-color: rgba(247,242,234,.45); }
.btn--ghost:hover { background: rgba(247,242,234,.1); border-color: var(--cream); }
.btn--ghost-ink { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost-ink:hover { background: var(--ink); color: var(--cream); }

/* ─── Site header / Masthead ─────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--cream);
  border-bottom: 2px solid var(--ink);
}
.mast-band { height: 3px; background: var(--red); }

.mast-plate {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem var(--sp-md);
  border-bottom: 1px solid var(--rule);
  max-width: var(--mw); margin: 0 auto;
}
.mast-meta {
  font-family: var(--fm); font-size: .62rem;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-faint); line-height: 1.5;
}
.mast-meta--r { text-align: right; }

.mast-logo { display: flex; flex-direction: column; align-items: center; text-decoration: none; }
.mast-wordmark {
  font-family: var(--fd); font-size: clamp(1.6rem, 3.5vw, 2.5rem);
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink); line-height: 1;
}
.mast-sub {
  font-family: var(--fm); font-size: .52rem;
  text-transform: uppercase; letter-spacing: .2em;
  color: var(--ink-faint); margin-top: .2rem;
}

.site-nav .container {
  display: flex; align-items: stretch; justify-content: space-between;
  max-width: var(--mw); position: relative;
}
.nav-list { display: flex; align-items: stretch; flex: 1; }
.nav-link {
  display: flex; align-items: center;
  font-family: var(--fm); font-size: .62rem;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--ink); padding: .85rem .8rem;
  border-right: 1px solid var(--rule);
  white-space: nowrap;
  transition: color .2s, background .2s;
}
.nav-list li:first-child .nav-link { border-left: 1px solid var(--rule); }
.nav-link:hover,
.nav-link[aria-current="page"] { color: var(--red); background: var(--blush-lt); }
.nav-link--cta {
  background: var(--red); color: var(--cream);
  border-right: none; padding-inline: 1.25rem;
}
.nav-link--cta:hover { background: var(--red-dk); color: var(--cream); }

.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: .75rem;
  flex-shrink: 0; align-self: center;
}
.nav-toggle span { display: block; width: 22px; height: 1px; background: var(--ink); transition: transform .3s, opacity .3s; }
.nav-toggle.is-open span:nth-child(1) { transform: rotate(45deg) translate(4px,4px); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: rotate(-45deg) translate(4px,-4px); }

/* ─── Wax seal inline SVG wrapper ────────────────────────── */
.seal { display: inline-block; line-height: 0; color: var(--ink); }
.seal svg { width: 80px; height: 80px; }
.seal--sm svg { width: 56px; height: 56px; }
.seal--lg svg { width: 130px; height: 130px; }
.seal--cream { color: var(--cream); }
.seal--red   { color: var(--red); }

/* ─── Hero ───────────────────────────────────────────────── */
.hero {
  position: relative; height: 100svh; min-height: 600px;
  overflow: hidden; display: flex; align-items: flex-end;
  background: var(--ink);
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__video {
  width: 100%; height: 100%; object-fit: cover;
  background: linear-gradient(160deg,#2a1a10,#16100a 50%,#3b1420);
}
.hero__media::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(22,16,10,.04) 3px,rgba(22,16,10,.04) 4px);
}
.hero__overlay {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to top,rgba(22,16,10,.93) 0%,rgba(22,16,10,.5) 35%,rgba(22,16,10,.12) 65%,transparent 100%);
}
.hero__content {
  position: relative; z-index: 3;
  padding: 0 var(--sp-md) var(--sp-xl);
  width: 100%; max-width: var(--mw); margin: 0 auto;
}
.hero__dl {
  font-family: var(--fm); font-size: var(--xs);
  text-transform: uppercase; letter-spacing: .2em;
  color: rgba(247,242,234,.5); margin-bottom: 1rem;
  display: flex; align-items: center; gap: 1rem;
}
.hero__dl::before { content: ''; width: 36px; height: 1px; background: var(--red); flex-shrink: 0; }
.hero__hl {
  font-family: var(--fd); font-size: var(--hero); font-weight: 700;
  color: var(--cream); line-height: 1.04; letter-spacing: -.02em; margin-bottom: 1.25rem;
}
.hero__hl em { font-style: italic; color: var(--blush); }
.hero__sub {
  font-family: var(--fb); font-size: var(--md);
  color: rgba(247,242,234,.72); max-width: 520px; line-height: 1.75; margin-bottom: 2.5rem;
}
.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero__scroll {
  position: absolute; bottom: 2rem; right: 2.5rem; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
.hero__scroll-lbl {
  font-family: var(--fm); font-size: .52rem;
  text-transform: uppercase; letter-spacing: .2em;
  color: rgba(247,242,234,.3); writing-mode: vertical-rl;
}
.hero__scroll-line {
  width: 1px; height: 48px;
  background: linear-gradient(to bottom,rgba(192,32,47,.65),transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%,100% { opacity: 1; transform: scaleY(1); transform-origin: top; }
  50%      { opacity: .3; transform: scaleY(.4); }
}

/* ─── Page hero (inner pages) ────────────────────────────── */
.ph {
  background: var(--ink); position: relative; overflow: hidden;
  padding: var(--sp-xl) 0 var(--sp-lg);
}
.ph::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(22,16,10,.1) 3px,rgba(22,16,10,.1) 4px);
}
.ph::after {
  content: ''; position: absolute; right: -10rem; top: -10rem;
  width: 420px; height: 420px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle,rgba(236,217,217,.07) 0%,transparent 70%);
}
.ph__inner { position: relative; z-index: 1; }
.ph__kicker {
  font-family: var(--fm); font-size: var(--xs);
  text-transform: uppercase; letter-spacing: .2em;
  color: var(--red); margin-bottom: 1rem;
  display: flex; align-items: center; gap: .75rem;
}
.ph__kicker::before { content: ''; width: 28px; height: 1px; background: var(--red); flex-shrink: 0; }
.ph__title {
  font-family: var(--fd); font-size: var(--4xl); font-weight: 700;
  color: var(--cream); line-height: 1.1; max-width: 700px; margin-bottom: 1.25rem;
}
.ph__desc {
  font-family: var(--fb); font-size: var(--md);
  color: rgba(247,242,234,.65); max-width: 560px; line-height: 1.75;
}
.ph__rule { width: 72px; height: 2px; background: var(--red); margin-top: 2rem; }

/* ─── Section wrappers ───────────────────────────────────── */
.section      { padding: var(--sp-xl) 0; }
.section--sm  { padding: var(--sp-lg) 0; }
.section--cream{ background: var(--cream); }
.section--white{ background: var(--white); }
.section--mid  { background: var(--cream-mid); }
.section--blush{ background: var(--blush); }
.section--ink  { background: var(--ink); color: var(--cream); }
.section--ink .kicker   { color: rgba(236,217,217,.7); }
.section--ink .h-d      { color: var(--cream); }
.section--ink .bc       { color: rgba(247,242,234,.7); }

.sec-hd { margin-bottom: var(--sp-lg); }
.sec-hd--center { text-align: center; }
.sec-hd--center .kicker { display: flex; justify-content: center; }
.sec-hd--split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); align-items: end; }

/* ─── Broadsheet columns ─────────────────────────────────── */
.bs {
  display: grid; grid-template-columns: repeat(3,1fr);
  border: 1px solid var(--rule); border-right: none; border-bottom: none;
}
.bs--2 { grid-template-columns: repeat(2,1fr); }
.bs--4 { grid-template-columns: repeat(4,1fr); }
.bcol {
  padding: var(--sp-md);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.bcol--ink   { background: var(--ink); color: var(--cream); }
.bcol--blush { background: var(--blush-lt); }

/* ─── Standard grids ─────────────────────────────────────── */
.g3 { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-md); }
.g2 { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--sp-md); }
.g4 { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-md); }
.split    { display: grid; grid-template-columns: 1fr 1fr; }
.split--6 { grid-template-columns: 3fr 2fr; }
.split--4 { grid-template-columns: 2fr 3fr; }

/* ─── Stats band ─────────────────────────────────────────── */
.stats-band {
  background: var(--ink);
  border-top: 2px solid var(--red); border-bottom: 2px solid var(--red);
  padding: var(--sp-md) 0;
}
.sb-inner { display: flex; align-items: center; justify-content: space-around; }
.sb-item {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; flex: 1; position: relative; padding: 0 var(--sp-sm);
}
.sb-item + .sb-item::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 60%; background: rgba(247,242,234,.14);
}
.sb-num {
  font-family: var(--fd); font-size: var(--2xl); font-weight: 700;
  color: var(--red); line-height: 1;
}
.sb-lbl {
  font-family: var(--fm); font-size: .62rem;
  text-transform: uppercase; letter-spacing: .12em;
  color: rgba(247,242,234,.5); margin-top: .3rem;
}

/* ─── Stat block ─────────────────────────────────────────── */
.stat { border-top: 2px solid var(--ink); padding: var(--sp-md) 0 var(--sp-sm); }
.stat--cream { border-top-color: rgba(247,242,234,.25); }
.stat__num {
  font-family: var(--fd); font-size: var(--3xl); font-weight: 700;
  color: var(--red); line-height: 1; margin-bottom: .375rem;
}
.stat__lbl {
  font-family: var(--fm); font-size: var(--xs);
  text-transform: uppercase; letter-spacing: .12em; color: var(--ink-faint);
}
.stat--cream .stat__lbl { color: rgba(247,242,234,.5); }
.stat__desc { font-family: var(--fb); font-size: var(--sm); color: var(--ink-mid); margin-top: .5rem; line-height: 1.6; }

/* ─── Development card ───────────────────────────────────── */
.dev-card {
  background: var(--white); border: 1px solid var(--rule);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .3s, box-shadow .3s;
}
.dev-card:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(22,16,10,.1); }
.dev-card__thumb {
  aspect-ratio: 4/3; overflow: hidden; position: relative;
  background: linear-gradient(135deg, var(--cream-dk) 0%, var(--blush) 100%);
}
.dev-card__thumb img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s;
  filter: sepia(0.12) contrast(1.08) brightness(0.97);
}
.dev-card:hover .dev-card__thumb img { transform: scale(1.04); }
.dev-card__mono {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--fd); font-size: 3rem; font-weight: 700;
  color: rgba(22,16,10,.12); letter-spacing: .06em;
}
.dev-card__body {
  padding: 1.25rem var(--sp-md) var(--sp-md); flex: 1;
  display: flex; flex-direction: column;
  border-top: 2px solid var(--ink);
}
.dev-card__loc {
  font-family: var(--fm); font-size: .63rem;
  text-transform: uppercase; letter-spacing: .15em;
  color: var(--red); margin-bottom: .5rem;
}
.dev-card__title {
  font-family: var(--fd); font-size: var(--lg); font-weight: 700;
  color: var(--ink); line-height: 1.2; margin-bottom: .5rem;
}
.dev-card__desc {
  font-family: var(--fb); font-size: var(--sm); color: var(--ink-faint);
  line-height: 1.65; flex: 1; margin-bottom: 1rem;
}
.dev-card__meta {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: var(--sp-sm); border-top: 1px solid var(--rule);
  font-family: var(--fm); font-size: .63rem;
  text-transform: uppercase; letter-spacing: .12em;
}
.dev-card__units { color: var(--ink-faint); }
.dev-card__arrow { color: var(--red); }

/* ─── News card ──────────────────────────────────────────── */
.news-card { display: flex; flex-direction: column; }
.news-card__date {
  font-family: var(--fm); font-size: var(--xs);
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-faint); margin-bottom: .5rem;
}
.news-card__title {
  font-family: var(--fd); font-size: var(--lg); font-weight: 700;
  line-height: 1.25; color: var(--ink); margin-bottom: .625rem;
  transition: color .2s;
}
.news-card:hover .news-card__title { color: var(--red); }
.news-card__excerpt {
  font-family: var(--fb); font-size: var(--sm); color: var(--ink-faint);
  line-height: 1.65; flex: 1;
}

/* ─── Service card ───────────────────────────────────────── */
.svc-card {
  padding: var(--sp-md); background: var(--white); border: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: .75rem;
  transition: border-color .25s, box-shadow .25s;
}
.svc-card:hover { border-color: var(--red); box-shadow: 0 4px 20px rgba(192,32,47,.08); }
.svc-card__num   { font-family: var(--fm); font-size: .63rem; color: var(--red); }
.svc-card__title { font-family: var(--fd); font-size: var(--lg); font-weight: 700; color: var(--ink); line-height: 1.2; }
.svc-card__desc  { font-family: var(--fb); font-size: var(--sm); color: var(--ink-faint); line-height: 1.65; flex: 1; }
.svc-card__link  { font-family: var(--fm); font-size: var(--xs); color: var(--red); margin-top: auto; }

/* ─── Feature strip ──────────────────────────────────────── */
.fstrip {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 2px solid var(--ink); min-height: 500px;
}
.fstrip--rev .fstrip__img  { order: 2; }
.fstrip--rev .fstrip__body { order: 1; }
.fstrip__img {
  overflow: hidden; min-height: 380px; position: relative;
  background: linear-gradient(135deg, var(--cream-dk) 0%, var(--blush) 100%);
}
.fstrip__img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: sepia(0.18) contrast(1.08) brightness(0.85);
}
.fstrip__mono {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--fd); font-size: 5rem; font-weight: 700; color: rgba(22,16,10,.1);
}
.fstrip__body {
  padding: var(--sp-xl) var(--sp-lg); display: flex; flex-direction: column;
  justify-content: center; background: var(--white);
}
.fstrip__body--ink {
  background: var(--ink);
}
.fstrip__body--ink .kicker   { color: rgba(236,217,217,.6); }
.fstrip__body--ink .h-d      { color: var(--cream); }
.fstrip__body--ink .bc       { color: rgba(247,242,234,.7); }
.fstrip__body--ink .pull-quote { color: rgba(247,242,234,.7); border-color: var(--red); }
.fstrip__body--blush { background: var(--blush-lt); }

/* ─── Programme card ─────────────────────────────────────── */
.prog {
  padding: var(--sp-md); background: var(--white);
  border-left: 3px solid var(--red); border-top: 1px solid var(--rule);
}
.prog__label {
  font-family: var(--fm); font-size: var(--xs); text-transform: uppercase;
  letter-spacing: .16em; color: var(--red); margin-bottom: .75rem;
}
.prog__title { font-family: var(--fd); font-size: var(--xl); font-weight: 700; color: var(--ink); margin-bottom: 1rem; line-height: 1.2; }
.prog__text  { font-family: var(--fb); font-size: var(--base); color: var(--ink-mid); line-height: 1.75; }

/* ─── Person card ────────────────────────────────────────── */
.person { border-top: 2px solid var(--ink); padding-top: var(--sp-sm); }
.person__name { font-family: var(--fd); font-weight: 700; font-size: var(--md); color: var(--ink); margin-bottom: .2rem; }
.person__role { font-family: var(--fm); font-size: .63rem; text-transform: uppercase; letter-spacing: .12em; color: var(--red); }

/* ─── Biz grid ───────────────────────────────────────────── */
.biz-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
}
.biz-item { background: var(--white); padding: var(--sp-md); }
.biz-item__num  { font-family: var(--fm); font-size: .63rem; color: var(--red); margin-bottom: .5rem; }
.biz-item__name { font-family: var(--fd); font-size: var(--md); font-weight: 700; color: var(--ink); margin-bottom: .375rem; }
.biz-item__desc { font-family: var(--fb); font-size: var(--sm); color: var(--ink-faint); line-height: 1.6; }

/* ─── Supply chain item ──────────────────────────────────── */
.supply {
  display: grid; grid-template-columns: 2.5rem 1fr; gap: 1.5rem;
  padding: var(--sp-md) 0; border-bottom: 1px solid var(--rule); align-items: start;
}
.supply__idx { font-family: var(--fm); font-size: 1.5rem; font-weight: 700; color: var(--red); line-height: 1; }
.supply__name{ font-family: var(--fd); font-size: var(--md); font-weight: 700; color: var(--ink); margin-bottom: .375rem; }
.supply__desc{ font-family: var(--fb); font-size: var(--sm); color: var(--ink-faint); line-height: 1.65; }

/* ─── Amenity list ───────────────────────────────────────── */
.am-list { display: flex; flex-direction: column; gap: .6rem; }
.am-list li {
  display: flex; align-items: flex-start; gap: .75rem;
  font-family: var(--fb); font-size: var(--base); color: var(--ink-mid);
}
.am-list li::before { content: '—'; color: var(--red); font-family: var(--fm); flex-shrink: 0; }

/* ─── Charity card ───────────────────────────────────────── */
.charity {
  padding: var(--sp-md); background: var(--white); border: 1px solid var(--rule);
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: .75rem;
}
.charity__icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--red-pale); display: flex; align-items: center; justify-content: center;
  font-family: var(--fd); font-size: 1.5rem; font-weight: 700; color: var(--red);
}
.charity__name { font-family: var(--fd); font-size: var(--md); font-weight: 700; color: var(--ink); }
.charity__desc { font-family: var(--fb); font-size: var(--sm); color: var(--ink-faint); line-height: 1.65; }

/* ─── Contact form ───────────────────────────────────────── */
.form-wrap   { background: var(--white); padding: var(--sp-lg); border: 1px solid var(--rule); }
.form-tabs   { display: flex; border-bottom: 2px solid var(--ink); margin-bottom: var(--sp-md); }
.ftab {
  font-family: var(--fm); font-size: var(--xs); text-transform: uppercase; letter-spacing: .12em;
  padding: .75rem 1.5rem; border: none; background: none;
  color: var(--ink-faint); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: color .2s, border-color .2s;
}
.ftab.active,.ftab:hover { color: var(--red); border-bottom-color: var(--red); }
.fpanel { display: none; }
.fpanel.active { display: block; }
.fg { margin-bottom: 1.5rem; }
.fl {
  display: block; font-family: var(--fm); font-size: .63rem;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-faint); margin-bottom: .5rem;
}
.fi, .fa, .fs {
  width: 100%; padding: .75rem 1rem;
  border: 1px solid var(--rule); background: var(--cream);
  font-family: var(--fb); font-size: var(--base); color: var(--ink);
  outline: none; transition: border-color .2s; appearance: none;
}
.fi:focus,.fa:focus,.fs:focus { border-color: var(--ink); }
.fa { min-height: 140px; resize: vertical; }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-sm); }

/* ─── CTA block ──────────────────────────────────────────── */
.cta-b {
  background: var(--ink); padding: var(--sp-xl) 0;
  text-align: center; position: relative; overflow: hidden;
}
.cta-b::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(22,16,10,.2) 3px,rgba(22,16,10,.2) 4px);
}
.cta-b__in  { position: relative; z-index: 1; }
.cta-b__act { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2.5rem; }

/* ─── Letterhead divider with wax seal ───────────────────── */
.lh-div {
  display: flex; align-items: center; gap: 1.5rem;
  padding: var(--sp-sm) 0;
}
.lh-div::before,.lh-div::after { content: ''; flex: 1; height: 1px; background: var(--rule); }

/* ─── Real logo — masthead plate + footer ────────────────── */
/* Masthead is cream so the white logo needs an ink backing   */
.mast-logo-plate {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink);
  padding: .45rem 1.3rem;
  line-height: 0;
}
.mast-logo-img {
  height: 26px; width: auto; display: block;
}
/* Footer is ink, white logo reads perfectly here             */
.ft-logo-img {
  height: 34px; width: auto; display: block; opacity: .88;
}

/* ─── Footer ─────────────────────────────────────────────── */
.site-footer { background: var(--ink); color: var(--cream); border-top: 3px solid var(--red); }
.ft-top { padding: var(--sp-xl) 0 var(--sp-lg); border-bottom: 1px solid rgba(247,242,234,.07); }
.ft-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: var(--sp-lg); }
.ft-brand { display: flex; flex-direction: column; gap: 1rem; }
.ft-wordmark {
  font-family: var(--fd); font-size: 2rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--cream);
}
.ft-tagline {
  font-family: var(--fb); font-style: italic; font-size: var(--sm);
  color: rgba(247,242,234,.5); line-height: 1.65; max-width: 280px;
}
.ft-col-h {
  font-family: var(--fm); font-size: .62rem; text-transform: uppercase; letter-spacing: .18em;
  color: var(--red); margin-bottom: 1.25rem;
  padding-bottom: .75rem; border-bottom: 1px solid rgba(247,242,234,.07);
}
.ft-links { display: flex; flex-direction: column; gap: .6rem; }
.ft-link  { font-family: var(--fb); font-size: var(--sm); color: rgba(247,242,234,.6); transition: color .2s; }
.ft-link:hover { color: var(--cream); }
.ft-addr { font-family: var(--fb); font-size: var(--sm); color: rgba(247,242,234,.6); line-height: 1.75; }
.ft-tel  { font-family: var(--fm); font-size: var(--sm); color: var(--cream); margin-top: .75rem; display: block; transition: color .2s; }
.ft-tel:hover { color: var(--red); }
.ft-social { display: flex; gap: .625rem; margin-top: 1rem; flex-wrap: wrap; }
.ft-soc {
  font-family: var(--fm); font-size: .58rem; text-transform: uppercase; letter-spacing: .1em;
  color: rgba(247,242,234,.4); padding: .35rem .7rem;
  border: 1px solid rgba(247,242,234,.12);
  transition: color .2s, border-color .2s;
}
.ft-soc:hover { color: var(--cream); border-color: rgba(247,242,234,.4); }
.ft-bot {
  padding: var(--sp-md) 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.ft-copy { font-family: var(--fm); font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(247,242,234,.28); }
.ft-legal { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.ft-leg { font-family: var(--fm); font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(247,242,234,.28); transition: color .2s; }
.ft-leg:hover { color: rgba(247,242,234,.6); }

/* ─── Reveal animations ──────────────────────────────────── */
[data-reveal] { opacity:0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
[data-reveal].is-vis { opacity:1; transform: none; }
[data-reveal="fade"]  { transform: none; }
[data-reveal="left"]  { transform: translateX(-22px); }
[data-reveal="right"] { transform: translateX(22px); }
[data-reveal="left"].is-vis,[data-reveal="right"].is-vis { transform: none; }

[data-stagger]>* { opacity:0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
[data-stagger].is-vis>*:nth-child(1){opacity:1;transform:none;transition-delay:.00s}
[data-stagger].is-vis>*:nth-child(2){opacity:1;transform:none;transition-delay:.09s}
[data-stagger].is-vis>*:nth-child(3){opacity:1;transform:none;transition-delay:.18s}
[data-stagger].is-vis>*:nth-child(4){opacity:1;transform:none;transition-delay:.27s}
[data-stagger].is-vis>*:nth-child(5){opacity:1;transform:none;transition-delay:.36s}
[data-stagger].is-vis>*:nth-child(6){opacity:1;transform:none;transition-delay:.45s}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],[data-stagger]>*{opacity:1;transform:none;transition:none}
  .hero__scroll-line{animation:none}
  html{scroll-behavior:auto}
}

/* ─── Utilities ──────────────────────────────────────────── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.text-red   { color:var(--red); }
.text-muted { color:var(--ink-faint); }
.tc         { text-align:center; }
.mt-sm{margin-top:var(--sp-sm)}.mt-md{margin-top:var(--sp-md)}.mt-lg{margin-top:var(--sp-lg)}
.mb-sm{margin-bottom:var(--sp-sm)}.mb-md{margin-bottom:var(--sp-md)}.mb-lg{margin-bottom:var(--sp-lg)}
.flex-center{display:flex;align-items:center;justify-content:center}
.gap-sm{gap:var(--sp-sm)}

/* process steps */
.steps { counter-reset: step; display:flex; flex-direction:column; gap:0; }
.step  { display:grid; grid-template-columns:3rem 1fr; gap:1.5rem; padding:var(--sp-md) 0; border-bottom:1px solid var(--rule); }
.step::before {
  content: counter(step,decimal-leading-zero); counter-increment:step;
  font-family:var(--fm); font-size:1.5rem; font-weight:700; color:var(--red); line-height:1;
}
.step__title { font-family:var(--fd); font-size:var(--md); font-weight:700; color:var(--ink); margin-bottom:.375rem; }
.step__desc  { font-family:var(--fb); font-size:var(--sm); color:var(--ink-faint); line-height:1.65; }

/* ─── Responsive 900 px ──────────────────────────────────── */
@media(max-width:900px){
  .g3,.g4 { grid-template-columns:repeat(2,1fr); }
  .bs,.bs--4{ grid-template-columns:repeat(2,1fr); }
  .ft-grid { grid-template-columns:1fr 1fr; gap:var(--sp-md); }
  .fstrip  { grid-template-columns:1fr; }
  .fstrip--rev .fstrip__img,.fstrip--rev .fstrip__body { order:0; }
  .fstrip__img { min-height:300px; }
  .fstrip__body { padding:var(--sp-lg) var(--sp-md); }
  .split,.split--6,.split--4 { grid-template-columns:1fr; }
  .sec-hd--split { grid-template-columns:1fr; }
  .biz-grid { grid-template-columns:repeat(2,1fr); }
  .mast-meta { display:none; }
  .sb-num { font-size:var(--xl); }
}

/* ─── Responsive 800 px ──────────────────────────────────── */
@media(max-width:800px){
  .nav-list   { display:none; }
  .nav-toggle { display:flex; }
  .site-nav .container { justify-content:flex-end; min-height:44px; }
}

/* ─── Responsive 480 px ──────────────────────────────────── */
@media(max-width:480px){
  .g3,.g4,.g2            { grid-template-columns:1fr; }
  .bs,.bs--2,.bs--4      { grid-template-columns:1fr; }
  .biz-grid              { grid-template-columns:1fr; }
  .ft-grid               { grid-template-columns:1fr; }
  .ft-bot                { flex-direction:column; align-items:flex-start; gap:.75rem; }
  .ft-legal              { flex-wrap:wrap; gap:.75rem; }
  .section               { padding:var(--sp-lg) 0; }
  .ph                    { padding:var(--sp-lg) 0; }
  .hero__actions         { flex-direction:column; }
  .hero__scroll          { display:none; }
  .cta-b__act            { flex-direction:column; align-items:center; }
  .frow                  { grid-template-columns:1fr; }
  .mast-plate            { justify-content:center; padding:.9rem 1rem; }
  .sb-inner {
    display:grid; grid-template-columns:1fr 1fr;
    gap:1px; background:rgba(247,242,234,.1);
  }
  .sb-item { background:var(--ink); padding:var(--sp-sm); }
  .sb-item+.sb-item::before { display:none; }
  .supply { grid-template-columns:2rem 1fr; }
  .step   { grid-template-columns:2rem 1fr; }

  /* Full-screen mobile nav */
  .nav-list.is-open {
    display:flex; flex-direction:column;
    position:fixed; inset:0; background:var(--ink);
    z-index:200; justify-content:center; align-items:center; padding:2rem;
  }
  .nav-list.is-open .nav-link {
    font-size:.78rem; padding:1rem 2rem;
    border:none; border-bottom:1px solid rgba(247,242,234,.07);
    color:rgba(247,242,234,.8); width:100%; text-align:center; justify-content:center;
  }
  .nav-list.is-open li:first-child .nav-link { border-left:none; }
  .nav-list.is-open .nav-link:hover,
  .nav-list.is-open .nav-link[aria-current="page"] { color:var(--cream); background:rgba(192,32,47,.2); }
  .nav-list.is-open .nav-link--cta { background:var(--red); color:var(--cream); margin-top:1rem; border:none; }
  .nav-toggle { z-index:201; }

  /* ─── Phone layout fixes: overflow / clipping ────────────
     Problem: large clamp() minima + explicit <br> tags + overflow:hidden
     on .hero/.ph clip text at 390 px. Fix: smaller font-sizes, tighter
     padding, strip redundant inter-column padding from stacked columns.
  ─────────────────────────────────────────────────────────── */

  /* 1. Hero headline — clamp(3rem,…) kept single words too wide for
        the 326 px content column; push the minimum down to ~1.75 rem   */
  .hero__hl {
    font-size: clamp(1.75rem, 7.5vw, 2.25rem);
    letter-spacing: -.01em;
  }

  /* 2. Page-hero title and section display headings                     */
  .ph__title { font-size: clamp(1.375rem, 6.5vw, 1.875rem); }
  .h-d--xl   { font-size: clamp(1.375rem, 6.5vw, 1.875rem); }
  .h-d--lg   { font-size: clamp(1.25rem,  5.5vw, 1.625rem); }

  /* 3. Overflow-wrap safety net on all display headings                 */
  .h-d, .hero__hl, .ph__title {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  /* 4. Container horizontal padding: 2 rem → 1.25 rem (20 px each side)
        widens the usable column from 326 px to 350 px                   */
  .container,
  .container--wide,
  .container--narrow { padding: 0 1.25rem; }

  /* 5. Hero content uses its own padding (not a container), match it    */
  .hero__content { padding-left: 1.25rem; padding-right: 1.25rem; }

  /* 6. fstrip body: the 900 px rule leaves 32 px side padding; trim it  */
  .fstrip__body { padding: var(--sp-md) 1.25rem; }

  /* 7. Split-column children: inline styles add padding-left/right
        var(--sp-lg) = 56 px to create the desktop gap. Once columns are
        stacked that whitespace is dead weight — remove it.              */
  .split > *,
  .split--6 > *,
  .split--4 > * {
    padding-left:  0 !important;
    padding-right: 0 !important;
    border-right:  none !important;
    border-left:   none !important;
  }
}

/* ─── Mobile overflow hard-stop (2026-06-03 QA fix) ───────────
   Grid/flex children default to min-width:auto, so wide content
   (big stat numbers, long words) blows the track wider than the
   viewport and clips text at the right edge. Forbid it. */
.g2 > *, .g3 > *, .g4 > *, .bs > *, .bs--2 > *, .bs--4 > *,
.split > *, .split--6 > *, .split--4 > *, .sb-inner > *,
.sec-hd--split > *, .biz-grid > *, .ft-grid > *, .frow > * { min-width: 0; }
p, .stat__num, .sb-num { overflow-wrap: break-word; }
h1, h2, h3, h4, .h-d, .hero__hl, .ph__title { overflow-wrap: normal; word-break: normal; hyphens: none; }
@media (max-width: 480px) {
  .sb-num, .stat__num { font-size: clamp(1.5rem, 8vw, 2.2rem); }
  .sb-inner { grid-template-columns: 1fr; }
}

/* ─── Subpage hero video treatment (matches home; 2026-06-03) ── */
.ph { position: relative; overflow: hidden; }
.ph--video .ph__media { position: absolute; inset: 0; z-index: 0; }
.ph--video .ph__media video {
  width: 100%; height: 100%; object-fit: cover; opacity: .38;
  filter: saturate(.85);
}
.ph--video::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(20,16,12,.5), rgba(20,16,12,.8));
}
.ph--video .ph__inner { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .ph--video .ph__media video { display: none; } }


/* ─── Heading fit: split-section XL headings scale with viewport so long
   words ("Developments") never exceed the half-width column (2026-06-03) ── */
.sec-hd--split .h-d--xl { font-size: clamp(1.6rem, 3.4vw, var(--4xl)); }