/* ── RESET & BASE ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  color: var(--ink);
  background: #fff;
  overflow-x: hidden;
}

/* ── COLORS ───────────────────────────────────────────────────── */
/* All colors live here. Change a value in this :root block and it
   updates everywhere — pages, hero, footer, buttons, everything.
   The *-rgb variables are the same colors expressed as raw RGB
   components, used inside rgba() for translucent overlays/shadows.
   If you change a hex value above, update its *-rgb partner below.

   Palette mirrors Amber's site: navy + honey + sage on warm cream. */
:root {
  /* Brand accent — honey (warm, slightly muted gold) */
  --accent:        #c5904f;       /* honey */
  --accent-dark:   #a4733a;       /* honey-deep */
  --accent-light:  #efd9b1;       /* honey-soft (light cream-gold) */

  /* Dark surfaces — navy (trust, steadiness) */
  --dark:          #1f2a44;       /* primary navy — navbar, dark sections, footer */
  --dark2:         #3a486a;       /* lifted navy — hover states */
  --dark-deep:     #141c30;       /* deepest navy — footer accents */

  /* Light surfaces — soft off-white (matches --hero-base for unified palette) */
  --off-white:     #F9F9F7;       /* soft off-white — used across all light sections */

  /* Hero & accent surface colors */
  --hero-base:     #F9F9F7;       /* soft off-white — hero background */
  --sage:          #8ba394;       /* mid sage — used for hover states only */
  --sage-deep:     #617a6d;       /* deep sage — eyebrows, link accents */
  --sage-mist:     #E6E9EE;       /* pale cool blue — verse + visit section bg */

  /* Logo / flag-trigger fill — same soft off-white as the hero so the
     accent surfaces feel like one unified palette across the site. */
  --logo-fill:     #F9F9F7;

  /* Text & lines */
  --ink:           #242a36;       /* primary body text (warm near-navy) */
  --ink-soft:      #4c5361;       /* secondary text */
  --gray:          #7a8291;       /* muted text */
  --light-gray:    #e4dfd4;       /* borders/dividers (warm sand) */

  /* RGB component versions (for use inside rgba(...) only) */
  --accent-rgb:       197, 144, 79;    /* mirrors --accent       #c5904f */
  --accent-light-rgb: 239, 217, 177;   /* mirrors --accent-light #efd9b1 */
  --dark-rgb:         31, 42, 68;      /* mirrors --dark         #1f2a44 */
}

/* ── LANGUAGE SWITCHER — two-letter code pill with dropdown of codes ─
   Uses text codes (EN / MK / SQ) rather than flag emoji: flags render as
   plain letter-pairs on Windows, and a flag names a country rather than a
   language — Albanian here is a local community language, not a foreign one. */
.lang-code {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--dark);
}
/* Trigger: same outline as Activities, sized to match the Activities
   button height. Filled with --logo-fill (matches the Soulcraft logo
   icon block). Just the active language code inside — no chevron. */
.nav-lang-trigger {
  padding: 6px 14px !important;
  gap: 0;
  background: var(--logo-fill) !important;
  min-width: 56px;
  justify-content: center;
}
.nav-lang-trigger:hover {
  background: var(--sage) !important;
  border-color: var(--sage) !important;
}
.nav-lang-trigger:hover .lang-code {
  color: #fff;
}
/* Dropdown: three language codes stacked vertically. */
.nav-lang-dropdown .nav-dropdown-menu {
  min-width: 0;
  padding: 4px;
}
.nav-lang-dropdown .nav-dropdown-menu .lang-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 7px 14px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}
.nav-lang-dropdown .nav-dropdown-menu .lang-btn:hover {
  background: var(--off-white);
}
.nav-lang-dropdown .nav-dropdown-menu .lang-btn.active {
  background: rgba(var(--accent-rgb), 0.15);
}
.nav-lang-dropdown .nav-dropdown-menu .lang-code { font-size: 14px; }

/* ── NAVBAR — dark navy (Amber-style) ─────────────────────────── */
/* Padding lives on the nav element itself (not nav-inner) so the
   inner content matches the 1200px max-width of all other sections —
   prevents the navbar logo/lang from sitting closer to the viewport
   edge than the hero/sections below. */
nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--dark);
  padding: 0 24px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.15);
  transition: all 0.3s;
}
.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.nav-logo-icon {
  width: 40px;
  height: 40px;
  background: var(--logo-fill);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-logo-icon svg { fill: var(--dark); width: 22px; height: 22px; }
.nav-logo-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.3px;
}
.nav-logo-text span { color: var(--accent-light); }
.nav-links {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 4px;
}
.nav-links a {
  text-decoration: none;
  color: rgba(255,255,255,0.9);
  font-size: 15px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 6px;
  transition: all 0.2s;
}
.nav-links a:hover { background: rgba(255,255,255,0.08); color: var(--accent-light); }
.nav-links a.active { color: var(--accent-light); }
.nav-cta {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.4) !important;
  padding: 9px 20px !important;
  border-radius: 6px !important;
}
.nav-cta:hover { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--dark) !important; }

/* ── NAV DROPDOWN ─────────────────────────────────────────────── */
.nav-dropdown { position: relative; }
.nav-dropdown-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: #fff;
  padding: 9px 20px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  border: 1px solid rgba(255,255,255,0.4);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  white-space: nowrap;
}
.nav-dropdown-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--dark); }
.nav-dropdown-btn svg {
  width: 16px; height: 16px; fill: currentColor;
  transition: transform 0.25s;
  flex-shrink: 0;
}
.nav-dropdown:hover .nav-dropdown-btn svg,
.nav-dropdown.open .nav-dropdown-btn svg { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.13);
  padding: 6px;
  min-width: 210px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  z-index: 1001;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown-menu a {
  display: block;
  padding: 10px 14px;
  color: var(--dark);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.nav-dropdown-menu a:hover { background: var(--off-white); color: var(--accent); }

.nav-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  margin: 5px 0;
  border-radius: 2px;
  transition: all 0.3s;
}

/* ── SECTIONS ─────────────────────────────────────────────────── */
section { padding: 80px 24px; }
/* Anchor offset — sticky nav is 70px tall, so any section that's an
   anchor target needs this scroll-margin so a click on #foo lands
   right where the section's background color starts (just under the
   nav) instead of letting the nav cover the colored top edge. */
section[id] { scroll-margin-top: 70px; }
.section-inner { max-width: 1200px; margin: 0 auto; }
.section-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
  display: block;
}
.section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 3.5vw, 46px);
  font-weight: 700;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 20px;
}
.section-sub {
  font-size: 17px;
  color: var(--gray);
  line-height: 1.7;
  max-width: 600px;
}

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s;
  cursor: pointer;
  border: 2px solid transparent;
}
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-dark); }
.btn-dark { background: var(--dark); color: #fff; }
.btn-dark:hover { background: var(--dark2); }
.btn-outline-white { border-color: rgba(255,255,255,0.6); color: #fff; background: transparent; }
.btn-outline-white:hover { background: rgba(255,255,255,0.1); border-color: #fff; }
.btn-outline-dark { border-color: var(--dark); color: var(--dark); background: transparent; }
.btn-outline-dark:hover { background: var(--dark); color: #fff; }

/* ── FOOTER ───────────────────────────────────────────────────── */
footer { background: var(--dark); color: rgba(255,255,255,0.6); padding: 64px 24px 32px; }
.footer-inner { max-width: 1200px; margin: 0 auto; }
.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.footer-brand .nav-logo { margin-bottom: 16px; display: inline-flex; }
.footer-brand .nav-logo-text { color: #fff; }
.footer-brand p { font-size: 14px; line-height: 1.7; margin-bottom: 24px; }
.footer-socials { display: flex; gap: 10px; }
.footer-social-btn {
  width: 36px; height: 36px;
  border-radius: 4px;
  background: rgba(255,255,255,0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background 0.2s;
}
.footer-social-btn:hover { background: var(--accent); }
.footer-social-btn svg { fill: rgba(255,255,255,0.7); width: 16px; height: 16px; }
.footer-brand-contact {
  margin-top: 16px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.footer-brand-contact a {
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  font-size: 13px;
  line-height: 1.5;
  transition: color 0.2s;
}
.footer-brand-contact a:hover { color: #fff; }
.footer-col h4 {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--accent-light);
  margin-bottom: 18px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col ul a { color: rgba(255,255,255,0.55); text-decoration: none; font-size: 14px; transition: color 0.2s; }
.footer-col ul a:hover { color: #fff; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 28px;
  font-size: 13px;
  color: rgba(255,255,255,0.3);
  gap: 16px;
  flex-wrap: wrap;
}
.footer-bottom a { color: rgba(255,255,255,0.35); text-decoration: none; }
.footer-bottom a:hover { color: rgba(255,255,255,0.7); }

/* ── VERSE SECTION — poem-style card on sage mist (Amber pattern) ─ */
/* Positioned directly after the hero on every page. The ::before
   pseudo-element layers a fine SVG noise grain over the section
   background so the strip reads like aged paper rather than flat color. */
.verse-section {
  position: relative;
  background: var(--sage-mist);
  padding: clamp(3rem, 6vw, 4.5rem) 24px;
  border-bottom: 1px solid rgba(var(--dark-rgb), 0.28);
  overflow: hidden;
}
.verse-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity: 0.55;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.verse-card {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
  background: var(--hero-base);
  border: 1px solid rgba(var(--dark-rgb), 0.28);
  border-radius: 10px;
  padding: clamp(2.5rem, 5vw, 3.75rem) clamp(2rem, 4vw, 3rem);
  text-align: center;
  box-shadow: 0 10px 30px -15px rgba(var(--dark-rgb), 0.22);
}
.verse-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.2rem, 1.8vw, 1.4rem);
  line-height: 1.75;
  color: var(--dark);
  margin: 0;
}
.verse-final {
  display: block;
  margin-top: 0.85rem;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.7rem, 2.8vw, 2.1rem);
  color: var(--accent-dark);
  letter-spacing: 0.005em;
}
.verse-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 1.75rem 0 0;
  color: var(--gray);
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.verse-caption::before,
.verse-caption::after {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--light-gray);
}

/* ── MINISTRY ABOUT GRID (shared 2-col image+text layout) ───── */
.ministry-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center;
}
.ministry-img-wrap { position: relative; }
.ministry-img-wrap img {
  width: 100%; height: 440px; object-fit: cover; border-radius: 4px;
}
.ministry-badge {
  position: absolute; bottom: -20px; right: -20px;
  background: var(--dark); color: #fff;
  width: 108px; height: 108px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; text-align: center; text-transform: uppercase;
  letter-spacing: 0.5px; line-height: 1.3;
  border: 4px solid var(--off-white); box-shadow: 0 4px 20px rgba(var(--dark-rgb),0.15);
}
.ministry-badge .badge-icon { font-size: 24px; display: block; margin-bottom: 4px; }
.ministry-text .section-sub { margin-bottom: 16px; }
.ministry-details {
  display: flex; flex-direction: column; gap: 16px; margin-top: 32px;
}
.ministry-detail {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 18px 20px; border-radius: 4px;
  background: #fff; border: 1px solid var(--light-gray);
}
.ministry-detail-icon {
  width: 40px; height: 40px; background: var(--dark); border-radius: 4px;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.ministry-detail-icon svg { fill: #fff; width: 18px; height: 18px; }
.ministry-detail-label {
  font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent); margin-bottom: 4px; display: block;
}
.ministry-detail-value {
  font-size: 15px; color: var(--dark); font-weight: 500; line-height: 1.5;
}

/* ── DARK FEATURES SECTION (shared 3-col cards on dark bg) ──── */
/* Note: class names retain "dark-" prefix from earlier styling for now;
   palette is fully light to keep navy reserved for header/footer. */
.dark-features { background: var(--sage-mist); }
.dark-features .section-eyebrow { color: var(--sage-deep); }
.dark-features .section-title { color: var(--dark); }
.dark-features .section-sub { color: var(--ink-soft); max-width: 680px; }
.dark-features-header { margin-bottom: 52px; }
.dark-features-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.dark-feature-card {
  background: rgba(255,255,255,0.55); border: 1px solid var(--light-gray);
  border-radius: 8px; padding: 32px 28px;
}
.dark-feature-icon {
  width: 48px; height: 48px; background: var(--dark); border-radius: 8px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
}
.dark-feature-icon svg { fill: #fff; width: 24px; height: 24px; }
.dark-feature-card h3 {
  font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 500;
  color: var(--dark); margin-bottom: 12px; line-height: 1.3;
}
.dark-feature-card p { font-size: 15px; color: var(--ink-soft); line-height: 1.7; }

/* ── PAGE HEADER (dark header without hero image) ───────────── */
.page-header {
  background: var(--dark); padding: 120px 24px 80px; text-align: center;
}
.page-header-inner { max-width: 700px; margin: 0 auto; }
.page-header .section-eyebrow { color: var(--accent-light); margin-bottom: 16px; }
.page-header-title {
  font-family: 'Cormorant Garamond', serif; font-size: clamp(36px, 5vw, 58px);
  font-weight: 900; color: #fff; line-height: 1.1; margin-bottom: 20px;
}
.page-header-sub {
  font-size: 17px; font-weight: 300; color: rgba(255,255,255,0.75);
  line-height: 1.75; max-width: 600px; margin: 8px auto 0;
}

/* ── RESPONSIVE ───────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .welcome-grid, .visit-grid { grid-template-columns: 1fr; gap: 40px; }
  .services-cards { grid-template-columns: 1fr 1fr; }
  .sermons-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .visit-img-grid { display: none; }
  .ministry-grid { grid-template-columns: 1fr; gap: 40px; }
  .ministry-badge { display: none; }
  .dark-features-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-hamburger { display: block; }
  .services-cards { grid-template-columns: 1fr; }
  .visit-img-grid { display: none; }
  .community-cards-grid { grid-template-columns: 1fr !important; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .newsletter-inner { flex-direction: column; align-items: flex-start; }
  .newsletter-form { width: 100%; }
  .newsletter-form input { flex: 1; width: auto; min-width: 0; }
  .welcome-img-badge { display: none; }
  .dark-features-grid { grid-template-columns: 1fr; }
  .page-header { padding: 100px 24px 60px; }
}
/* ── MOBILE MENU OVERLAY — Amber pattern: dark navy panel that
      drops below the navbar and overlays everything beneath it.
      All rules scoped to .nav-links so they don't affect the
      language flag trigger that lives outside the menu list. ── */
.nav-mobile-open .nav-links {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--dark-deep);
  padding: 8px 24px 20px;
  border-top: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  z-index: 999;
}
.nav-mobile-open .nav-links li {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nav-mobile-open .nav-links li:last-child { border-bottom: none; }
.nav-mobile-open .nav-links a {
  padding: 14px 0;
  font-size: 16px;
  display: block;
  color: rgba(255,255,255,0.9);
}
.nav-mobile-open .nav-links a:hover {
  background: transparent;
  color: var(--accent-light);
}

/* Activities label inside the mobile menu — flat, full-width,
   white text, no outline, no chevron. The sub-menu below is always
   shown rather than collapsed-and-tap-to-open. */
.nav-mobile-open .nav-links .nav-dropdown-btn {
  background: transparent !important;
  border: none !important;
  color: rgba(255,255,255,0.9) !important;
  padding: 14px 0 !important;
  border-radius: 0 !important;
  font-size: 16px !important;
  width: 100%;
  justify-content: flex-start;
  cursor: default;
}
.nav-mobile-open .nav-links .nav-dropdown-btn svg { display: none; }

/* Activities sub-menu inside the mobile menu — always visible (no
   click-to-expand) with a gold left bar for hierarchy. */
.nav-mobile-open .nav-links .nav-dropdown-menu {
  position: static;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  box-shadow: none;
  border-radius: 0;
  padding: 0 0 12px 16px;
  border-left: 3px solid var(--accent);
  margin-left: 8px;
  background: transparent;
  display: block;
  transition: none;
  min-width: 0;
}
.nav-mobile-open .nav-links .nav-dropdown-menu a {
  padding: 12px 8px;
  font-size: 15px;
  border-radius: 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.85);
}
.nav-mobile-open .nav-links .nav-dropdown-menu a:last-child { border-bottom: none; }
.nav-mobile-open .nav-links .nav-dropdown-menu a:hover {
  color: var(--accent-light);
  background: transparent;
}

/* ============================================================
   PAGE HERO — split frame (text left, photo right)
   Reusable across home and all interior pages via _includes/partials/hero.njk
   The H1 sizing uses a container query (13.5cqi) so the line count stays
   stable at every viewport width — DO NOT change without testing across
   breakpoints from 320px up to wide desktop.
============================================================ */
.page-hero {
  position: relative;
  background: var(--hero-base);
  padding: clamp(3rem, 6vw, 5rem) 24px clamp(2.5rem, 4vw, 3.5rem);
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 5rem;
  height: 3px;
  background: var(--accent);
  border-top-left-radius: 3px;
}
.page-hero__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  position: relative;
}
/* Make the content column itself a "container" so the H1 sizes
   based on the column's own width (not the viewport width). */
.page-hero__content {
  container-type: inline-size;
  container-name: hero-text;
}
.page-hero__title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  color: var(--dark);
  /* 13.5cqi = 13.5% of the content column's inline size. While the column
     is at its max width (wide desktop) this evaluates above 5rem and the
     clamp holds at 5rem. The moment the column itself starts shrinking,
     the H1 scales down proportionally — so the line count stays stable
     and the text never jumps to a third line at an in-between width. */
  font-size: clamp(2.75rem, 13.5cqi, 5rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
}
.page-hero__title-line { display: block; }
.page-hero__eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
  display: block;
}
.page-hero__lead {
  font-size: 1.2rem;
  color: var(--ink-soft);
  line-height: 1.65;
  max-width: 48ch;
  margin: 0;
}
.page-hero__actions {
  margin-top: 1.75rem;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.page-hero__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 30px -15px rgba(var(--dark-rgb), 0.22);
  background: var(--off-white);
}
.page-hero__frame > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.page-hero__caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 56px 28px 24px;
  background: linear-gradient(to top, rgba(20, 28, 48, 0.85) 0%, rgba(20, 28, 48, 0.45) 55%, transparent 100%);
  color: #fff;
  pointer-events: none;
}
.page-hero__caption-label {
  display: block;
  color: var(--accent-light);
  font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
  margin-bottom: 6px;
}
.page-hero__caption-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px; font-weight: 600; line-height: 1.15;
  color: #fff;
  display: block;
}

@media (max-width: 780px) {
  /* On phones we want a custom stacking order:
       1. eyebrow
       2. headline
       3. image
       4. lead paragraph
       5. buttons (full image width)
     `.page-hero__content` is dissolved with `display: contents` so its
     children sit as direct siblings of `.page-hero__frame` in the flex
     column, and `order` controls the sequence. */
  .page-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    text-align: center;
  }
  .page-hero__content { display: contents; }

  .page-hero__eyebrow { order: 1; margin: 0 0 14px; }
  .page-hero__title   { order: 2; margin: 0 0 1.5rem;
    font-size: clamp(2.75rem, 8vw, 4rem);
    line-height: 1.08;
  }
  .page-hero__frame   { order: 3; max-width: 420px; margin: 0 auto; width: 100%; }
  .page-hero__lead    { order: 4; margin: 1.75rem auto 0; max-width: 420px; }
  .page-hero__actions {
    order: 5;
    margin: 1.5rem auto 0;
    max-width: 420px;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .page-hero__actions .btn {
    width: 100%;
    text-align: center;
  }
}