/* ============================================================
   theme.css — TC Resources 2026 visual direction
   Loaded LAST, after biodata.css.

   Client references: jiunjewelry.com (editorial, image-led,
   serif display, heavy negative space), toni-guy.com (the FAQ
   pattern), and the supplied red / black / blush palette.

   Built as a re-skin, not a rebuild: it mostly redefines the
   custom properties the earlier layers already use, so the green
   scheme becomes the black-and-red one without touching markup.
   Delete this file and its link tags to return to the previous
   look exactly.

   The accessibility floor from accessible.css is preserved
   throughout — 17px minimum, AA contrast, 48px targets. The one
   rule that governs this palette: #FF3D3D carries white at only
   3.9:1, so red is a FILL colour with near-black text on it, and
   #B22222 is the red used for type on white.
   ============================================================ */

:root {
  /* --- supplied palette --- */
  --tc-red:   #ff3d3d;
  --tc-ink:   #1a1a1a;
  --tc-blush: #ffe4e1;
  --tc-deep:  #b22222;
  --tc-grey:  #e0e0e0;

  /* --- redefinitions: the earlier layers read these --- */
  --red:      #ff3d3d;
  --red-deep: #b22222;
  --red-text: #b22222;   /* red that is safe for body-size type */
  --green:    #1a1a1a;   /* every former green panel becomes near-black */
  --ink:      #1a1a1a;
  --cream:    #ffe4e1;
  --warm:     #fff6f5;
  --mist:     #f4f4f4;
  --line:     #e0e0e0;
  --rule:     #e0e0e0;
  --eyebrow:  #1a1a1a;
  --eyebrow-light: rgba(255,255,255,.74);
  --slate:    #4a4d53;

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
}

/* ============================================================
   1. Typography
   The serif is display-only. Small high-contrast serif type is
   hard work for older eyes, so headings get the character and
   everything anyone has to actually read stays in the sans.
   ============================================================ */

h1, h2,
.service-panel h2,
.home-cta h2,
.warranty-copy h2,
.testimonial-heading h2,
.bio-hero h1,
.detail-bar h2 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.06;
}

h1, .bio-hero h1 { font-size: clamp(2.6rem, 5.4vw, 5rem); }
.section-heading h2,
.about-copy h2,
.contact-copy h2,
.testimonial-heading h2 { font-size: clamp(2.4rem, 4.4vw, 4rem); }
.service-panel h2 { font-size: clamp(2.6rem, 4.6vw, 4.2rem); }
.home-cta h2 { font-size: clamp(2.8rem, 5vw, 5.2rem); }
.warranty-copy h2 { font-size: clamp(2.3rem, 3.8vw, 3.4rem); }

/* Eyebrows: the reference's wide-tracked capitals, but held at a
   readable size rather than the 11px the look usually implies. */
.section-index,
.hero-kicker {
  font-family: "DM Sans", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* Sub-headings stay in the sans for legibility. */
h3 { font-family: "DM Sans", sans-serif; font-weight: 700; }

/* ============================================================
   2. Buttons
   Primary is near-black with white text: it is the strongest
   thing on a light page, it matches both references, and it
   clears contrast. Red is the accent fill, and text on red is
   always near-black.
   ============================================================ */

.button,
.form-button {
  border-radius: 6px;
  background: var(--tc-ink);
  color: #fff;
  font-weight: 700;
  letter-spacing: .02em;
}
.button:hover, .form-button:hover { background: #000; }

.hero-actions .button,
.home-cta .button,
.light-button {
  background: var(--tc-red);
  color: var(--tc-ink);
}
.hero-actions .button:hover,
.home-cta .button:hover,
.light-button:hover { background: #ff6262; color: var(--tc-ink); }

.header-cta { background: var(--tc-red); color: var(--tc-ink); }
.header-cta:hover { background: #ff6262; }
.site-header:not(.scrolled):not(.menu-open) .header-cta {
  border: 0;
  background: var(--tc-red);
  color: var(--tc-ink);
  backdrop-filter: none;
}

/* ============================================================
   3. Green-scheme leftovers
   A handful of sage values were written as literals rather than
   through the variables, so they are re-pointed here.
   ============================================================ */

.care-icon,
.preview-avatar { background: var(--tc-blush); color: var(--tc-deep); }
.promise-icon { color: var(--tc-deep); border-color: var(--tc-grey); }
.care-need:hover .care-icon { background: var(--tc-red); color: var(--tc-ink); }
.care-need:hover { box-shadow: 0 10px 26px rgba(26,26,26,.09); }
.preview-card:hover,
.article-card:hover { box-shadow: 0 10px 26px rgba(26,26,26,.09); }
.caregiver-panel:hover { background: #ffd9d5; }
.elderly-panel:hover { background: #000; }
.warranty-points li::before { border-color: #ff8f8f; }
.testimonial-stars { color: #c98a00; }
.map-point .pulse { fill: rgba(255,61,61,.2); }

/* ============================================================
   4. FAQ — the Toni&Guy pattern
   Each question is a filled bar rather than a hairline row. It
   is the more striking treatment AND the more legible one: a
   bigger target, a clearer boundary, and no reliance on a thin
   rule to separate items.
   ============================================================ */

.faq-item {
  margin-bottom: 12px;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--tc-ink);
}
.faq-item summary {
  padding: 24px 72px 24px 26px;
  color: #fff;
  font-family: "DM Sans", sans-serif;
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.35;
}
.faq-item[open] > summary,
.faq-item summary:hover { color: #fff; }
.faq-item summary span {
  right: 24px;
  top: 50%;
  margin-top: -17px;
  width: 34px; height: 34px;
  border-color: rgba(255,255,255,.42);
}
.faq-item summary span::before,
.faq-item summary span::after { background: #fff; left: 9px; right: 9px; top: 16px; }
.faq-item[open] summary span { border-color: var(--tc-red); background: var(--tc-red); }
.faq-item[open] summary span::before,
.faq-item[open] summary span::after { background: var(--tc-ink); }

.faq-answer { background: #fff; }
.faq-answer p {
  max-width: none;
  padding: 24px 26px 26px;
  color: var(--slate);
}
.faq-list { border-top: 0; }

/* ============================================================
   5. Chapters — the stacking scroll
   Each panel sticks to the top of the viewport while the next
   one rides up and covers it. The whole effect is scroll-driven
   and reversible; nothing auto-plays, and prefers-reduced-motion
   turns it into an ordinary stacked list further down.
   ============================================================ */

.chapters { background: var(--tc-ink); }
.chapter {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  align-items: stretch;
  /* Each panel is opaque, which is what makes the one above
     disappear cleanly rather than bleeding through. */
  background: var(--tc-ink);
}
.chapter-media { position: relative; overflow: hidden; }
.chapter-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.chapter-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  padding: clamp(40px, 6vw, 96px) clamp(28px, 5vw, 90px);
  color: #fff;
}
.chapter:nth-child(1) .chapter-copy { background: #1a1a1a; }
.chapter:nth-child(2) .chapter-copy { background: var(--tc-deep); }
.chapter:nth-child(3) .chapter-copy { background: #2a2a2a; }

.chapter-num {
  display: block;
  font-family: var(--serif);
  font-size: 1.4rem;
  color: rgba(255,255,255,.6);
  font-variant-numeric: tabular-nums;
}
.chapter-copy h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.5rem, 4.4vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #fff;
}
.chapter-copy p {
  margin: 0;
  max-width: 46ch;
  color: rgba(255,255,255,.9);
  font-size: 1.12rem;
  line-height: 1.65;
}
.chapter-copy .button { align-self: flex-start; margin-top: 8px; }

@media (max-width: 900px) {
  /* Stacking two half-width panels on a phone leaves neither
     readable, so the effect is dropped and the chapters simply
     follow one another. */
  .chapter {
    position: static;
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .chapter-media { height: 260px; }
  .chapter-copy { padding: 34px 24px 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .chapter { position: static; min-height: 0; }
  .chapter-media { max-height: 420px; }
}

/* ============================================================
   6. Editorial surfaces
   ============================================================ */

/* Dark sections lose the green cast; the credentials row and
   other blush panels replace the old cream. */
.testimonial-section { background: var(--tc-blush); }
.marquee blockquote { border-color: rgba(26,26,26,.12); }
.biodata-preview { background: var(--tc-blush); }
.care-needs-section { background: #faf8f8; }
.caregiver-panel { background: var(--tc-blush); border-color: rgba(26,26,26,.1); }
.promise-list li { background: var(--tc-blush); border-color: rgba(26,26,26,.09); }
.promise-list li:hover { background: #ffd9d5; }
.credentials-list li + li { border-left-color: var(--tc-grey); }

/* The hero scrim goes cooler and deeper so white type holds over
   any photograph. */
.hero-shade {
  background:
    linear-gradient(90deg, rgba(12,12,12,.88) 0%, rgba(12,12,12,.74) 38%, rgba(12,12,12,.26) 68%, rgba(12,12,12,.1) 100%),
    linear-gradient(0deg, rgba(0,0,0,.44), transparent 50%);
}
body[data-page="home"] .inner-header:not(.scrolled):not(.menu-open) {
  background: linear-gradient(180deg, rgba(10,10,10,.76) 0%, rgba(10,10,10,.44) 60%, rgba(10,10,10,0) 100%);
}

/* Footer and page heroes follow the ink. */
.site-footer, .page-hero.dark, .page-hero.green, .coverage-section { background: var(--tc-ink); }
.warranty-band { background: var(--tc-ink); }
.warranty-band .section-index { color: #ff8f8f; }
.coverage-section .section-index,
.coverage-copy .section-index { color: #ff8f8f; }
.map-card { background: #f4f2f2; }

/* Focus stays the high-visibility blue: on a red-and-black page a
   red focus ring would be invisible against half the surfaces. */
:focus-visible { outline-color: #4d90fe; }

/* ============================================================
   7. Section rhythm
   The references breathe. Sections get more air, and the
   credential row loses its box.
   ============================================================ */

.section { padding: clamp(72px, 8vw, 128px) 0; }
.promise-section, .home-articles { background: #fff; }

/* ============================================================
   8. The red-fill contrast rule, applied everywhere
   #FF3D3D carries white at only 3.5:1. Every surface that fills
   with red therefore switches its text to near-black, and every
   place red was used as TYPE moves to #B22222. This is the same
   inversion the client's own reference uses on its lime chips.
   ============================================================ */

/* --- red bands: text and buttons go near-black --- */
.home-cta,
.page-cta,
.contact-section { color: var(--tc-ink); background: var(--tc-red); }
.home-cta h2, .page-cta h2, .contact-copy h2 { color: var(--tc-ink); }
.home-cta p, .page-cta p { color: rgba(26,26,26,.82); }
.contact-copy .section-index { color: rgba(26,26,26,.72); }
.contact-copy > p:not(.section-index) { color: rgba(26,26,26,.84); }
.contact-copy a[href^="tel:"],
.contact-copy a[href^="mailto:"] { color: var(--tc-ink); }
.contact-address, .contact-licence { color: rgba(26,26,26,.82); }

/* The button inside a red band inverts to near-black. */
.home-cta .button,
.page-cta .button,
.contact-section .button,
.home-cta .light-button,
.page-cta .light-button {
  background: var(--tc-ink);
  color: #fff;
}
.home-cta .button:hover,
.page-cta .button:hover,
.contact-section .button:hover { background: #000; color: #fff; }

/* --- selected states on a red fill --- */
.area-directory button:hover,
.area-directory button.active,
.filter.active, .filter:hover,
.mobile-languages button.active,
.group-trust-inner > a:hover { color: var(--tc-ink); background: var(--tc-red); border-color: var(--tc-red); }

/* --- the sticky mobile contact bar --- */
.contact-bar .bar-call { background: var(--tc-red); color: var(--tc-ink); }
.contact-bar .bar-call:active { background: #e02f2f; }

/* --- red used as TYPE moves to the readable red --- */
.step-number,
.home-steps span,
.feature-row > span,
.blog-card span,
.support-icon,
.coverage-country,
.mobile-nav p,
.desktop-nav > a[aria-current="page"],
.nav-group.active > button,
.language-options button:hover,
.language-options button.active,
.about-mark { color: var(--tc-deep); }

/* .light-button sits on dark grounds, where the bright red is fine
   as a fill but needs near-black type. */
.light-button { color: var(--tc-ink); background: var(--tc-red); }
.light-button:hover { background: #ff6262; color: var(--tc-ink); }

/* Red type on the near-black grounds needs the lighter tint, not the
   deep red — #B22222 on #1A1A1A is only 2.6:1. */
.home-scope-note strong,
.care-boundary strong,
.section-heading.inverse .section-index,
.aftercare-section .section-index { color: #ff8f8f; }
/* The testimonial band moved to blush, so its eyebrow needs the dark
   treatment rather than the light-on-dark one it inherited. */
.testimonial-heading .section-index { color: var(--tc-ink); }
.testimonial-heading > p:last-child { color: var(--slate); }
.home-scope-note { background: var(--tc-ink); }

/* ============================================================
   9. Landing hero — the jiun arrangement
   Logo standing alone top-left, the menu as a vertical stack on
   the right, the headline block sitting at the foot of the
   frame, contact and language bottom-right, and a scroll cue
   centred beneath.

   Desktop composition only. Below 960px the ordinary header and
   the stacked mobile hero take over — two half-width columns of
   type do not survive a phone.
   ============================================================ */

@media (min-width: 961px) {
  /* The sticky header is suppressed while the landing frame is on
     screen, then fades in as its scrolled state. visibility, not
     opacity alone, so its links leave the focus order too. */
  body[data-page="home"] .site-header:not(.scrolled):not(.menu-open) {
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s;
  }

  .landing {
    display: block;
    min-height: 100vh;
    height: auto;
    padding: 0;
    align-items: stretch;
  }
  /* If the photograph fails to load, the frame must still be dark:
     the hero's stock fallback was a mid brown, which left every
     white and pink label on this layout unreadable. */
  .hero.landing { background: #141414; }
  .landing > .hero-image { position: absolute; inset: 0; }

  /* One grid over the whole frame: logo and nav on the top row,
     copy and actions on the bottom, everything else flexible. */
  .landing::after { content: none; }
  .landing-logo,
  .landing-nav,
  .landing-copy,
  .landing-actions { position: absolute; z-index: 3; }

  .landing-logo { top: clamp(30px, 3.4vw, 52px); left: clamp(28px, 3.6vw, 62px); }
  .landing-logo img { width: clamp(150px, 13vw, 208px); height: auto; }

  .landing-nav {
    top: clamp(30px, 3.4vw, 52px);
    right: clamp(28px, 3.6vw, 62px);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
  }
  .landing-group {
    margin: 22px 0 8px;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #ffb3b2;
  }
  .landing-group:first-child { margin-top: 0; }
  .landing-nav > a {
    display: block;
    min-height: 44px;
    padding: 5px 0;
    font-family: var(--serif);
    font-size: clamp(1.32rem, 1.6vw, 1.72rem);
    font-weight: 500;
    line-height: 1.25;
    color: #fff;
    letter-spacing: .01em;
    transition: color .2s ease, transform .2s ease;
  }
  .landing-nav > a:hover { color: var(--tc-red); transform: translateX(-4px); }

  .landing-lang { display: flex; gap: 6px; margin-top: 26px; }
  .landing-lang button {
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,.4);
    border-radius: 999px;
    background: transparent;
    color: rgba(255,255,255,.9);
    font: 600 .96rem/1 "DM Sans", sans-serif;
    cursor: pointer;
  }
  .landing-lang button:hover { border-color: #fff; color: #fff; }
  .landing-lang button.active { background: var(--tc-red); border-color: var(--tc-red); color: var(--tc-ink); }

  /* Headline block sits at the foot of the frame. */
  .landing-copy {
    left: clamp(28px, 3.6vw, 62px);
    bottom: clamp(104px, 11vh, 148px);
    width: min(640px, 52vw);
    padding: 0;
  }
  .landing-copy h1 { font-size: clamp(2.8rem, 4.2vw, 4.4rem); }
  .landing-copy .hero-intro { font-size: 1.1rem; margin: 20px 0 28px; }

  .landing-actions {
    right: clamp(28px, 3.6vw, 62px);
    bottom: clamp(104px, 11vh, 148px);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 18px;
  }
  .landing-advisor {
    display: inline-flex;
    align-items: center;
    min-height: 52px;
    padding: 0 26px;
    border-radius: 999px;
    background: var(--tc-red);
    color: var(--tc-ink);
    font-weight: 700;
    letter-spacing: .02em;
  }
  .landing-advisor:hover { background: #ff6262; }
  .landing-social { display: flex; gap: 10px; }
  .landing-social a,
  .landing-social button {
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    border: 1px solid rgba(255,255,255,.4);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
  }
  .landing-social a:hover,
  .landing-social button:hover { border-color: #fff; background: rgba(255,255,255,.14); }
  .landing-social svg { width: 20px; height: 20px; fill: currentColor; }

  /* Scroll cue, centred. */
  .landing-scroll {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: clamp(30px, 4vh, 52px);
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    color: rgba(255,255,255,.85);
    font-size: .96rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 600;
  }
  .landing-scroll:hover { color: #fff; }
  .landing-scroll-line {
    width: 1px;
    height: 42px;
    background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0));
    animation: scroll-cue 2.4s ease-in-out infinite;
    transform-origin: top;
  }
  @keyframes scroll-cue {
    0%, 100% { transform: scaleY(.45); opacity: .5; }
    50%      { transform: scaleY(1);   opacity: 1; }
  }

  /* The hero photo needs a fuller scrim now that type sits along
     three edges rather than only the left. */
  .landing .hero-shade {
    background:
      linear-gradient(90deg, rgba(10,10,10,.86) 0%, rgba(10,10,10,.6) 42%, rgba(10,10,10,.34) 100%),
      linear-gradient(0deg, rgba(8,8,8,.86) 0%, rgba(8,8,8,.3) 34%, rgba(8,8,8,.5) 100%);
  }
}

/* Below the breakpoint the landing furniture is dropped and the
   ordinary header carries navigation. */
@media (max-width: 960px) {
  .landing-logo, .landing-nav, .landing-actions, .landing-scroll { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-scroll-line { animation: none; opacity: .7; transform: scaleY(1); }
  .landing-nav > a:hover { transform: none; }
}

/* ============================================================
   10. Statement — the panel that follows the hero
   The reference opens its story with a centred positioning
   sentence and then a monumental stacked word-mark, with small
   tracked facts pinned to the margins. Same composition, TC's
   own words and credentials.
   ============================================================ */

.statement {
  background: var(--tc-ink);
  color: #fff;
  padding: clamp(84px, 11vw, 168px) 0 clamp(72px, 9vw, 140px);
  overflow: hidden;
}
.statement-inner {
  position: relative;
  width: min(calc(100% - 48px), 1180px);
  margin-inline: auto;
  text-align: center;
}
.statement-eyebrow {
  margin: 0 0 30px;
  font-size: .94rem;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #ff8f8f;
}
.statement-lede {
  max-width: 68ch;
  margin: 0 auto clamp(56px, 7vw, 104px);
  font-size: clamp(1.06rem, 1.35vw, 1.24rem);
  line-height: 1.85;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(255,255,255,.86);
}

/* The stacked word-mark. Decorative, and marked aria-hidden — the
   same message is already carried by the sentence above it, so a
   screen reader is not made to spell it out line by line. */
.statement-display {
  display: grid;
  gap: clamp(2px, .5vw, 8px);
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(3.2rem, 10vw, 9rem);
  line-height: .92;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #fff;
}
.statement-display span:nth-child(2) { color: var(--tc-red); }
.statement-display span:nth-child(3) { font-size: .5em; align-self: center; color: rgba(255,255,255,.55); }

.statement-mark {
  margin: 0;
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
@media (min-width: 981px) {
  .statement-mark { position: absolute; bottom: 6px; }
  .statement-mark--left  { left: 0;  text-align: left; }
  .statement-mark--right { right: 0; text-align: right; }
}
@media (max-width: 980px) {
  .statement-mark { margin-top: 26px; }
  .statement-lede { letter-spacing: .05em; line-height: 1.75; }
}

/* The floating WhatsApp bubble sat on top of the landing frame's
   own contact row, so on the homepage at desktop the row is the
   one that stays. */
@media (min-width: 961px) {
  body[data-page="home"] .whatsapp-bubble { display: none; }
}

/* ============================================================
   11. Title block below the hero
   The hero frame is now the photograph, the identity and the
   navigation — nothing else. The headline follows underneath, so
   the image is uninterrupted and the words get a ground of their
   own rather than fighting the picture for contrast.
   ============================================================ */

.hero-title {
  background: var(--tc-ink);
  color: #fff;
  padding: clamp(56px, 7vw, 104px) 0 clamp(44px, 5.5vw, 80px);
}
.hero-title-inner { width: min(calc(100% - 48px), 1180px); margin-inline: auto; }
/* The measure belongs on the headline, not on the block — it was
   squeezing the kicker to three lines and the h1 to one word each. */
.hero-title-copy { max-width: none; }
.hero-title-copy .hero-kicker { color: #fff; }
.hero-title-copy h1 {
  margin: 0;
  font-size: clamp(2.6rem, 5.6vw, 5.2rem);
  max-width: 16ch;
  text-wrap: balance;
}
.hero-title-copy .hero-intro {
  max-width: 62ch;
  margin: 26px 0 32px;
  font-size: 1.12rem;
  color: rgba(255,255,255,.86);
}
.hero-title-copy .hero-actions { display: flex; align-items: center; gap: 20px; }
.hero-title-copy .text-link { color: #fff; text-decoration-color: rgba(255,255,255,.45); }
.hero-title-copy .text-link:hover { color: #fff; text-decoration-color: #fff; }

/* The statement now follows straight on, so it loses its top padding
   and keeps only the word-mark. */
.statement { padding-top: clamp(24px, 3vw, 56px); }

@media (min-width: 961px) {
  /* With the words gone, the hero is a clean full-bleed frame. */
  .hero.landing { min-height: 100vh; }
  .landing-actions { bottom: clamp(74px, 8vh, 104px); }
}
@media (max-width: 960px) {
  .hero.landing { min-height: 0; padding: 0; }
  .hero.landing .hero-image { position: static; width: 100%; height: 46vh; min-height: 260px; object-fit: cover; }
  .hero.landing .hero-shade { display: none; }
  .hero-title { padding: 34px 0 40px; }
  .hero-title-inner { width: calc(100% - 32px); }
  .hero-title-copy .hero-actions { flex-direction: column; align-items: stretch; gap: 14px; }
  .hero-title-copy .hero-actions .button,
  .hero-title-copy .hero-actions .text-link { width: 100%; justify-content: center; }
}

/* ============================================================
   12. Inner page heroes — image-led
   Every page now opens on a photograph, as the reference does,
   with the title block at the foot of the frame over a scrim.
   ============================================================ */

.page-hero--image {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(520px, 72vh, 760px);
  padding: 150px 0 clamp(48px, 6vw, 84px);
  overflow: hidden;
  color: #fff;
  background: #141414;
  border-radius: 0;
}
.page-hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.page-hero-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(10,10,10,.84) 0%, rgba(10,10,10,.56) 46%, rgba(10,10,10,.28) 100%),
    linear-gradient(0deg, rgba(8,8,8,.86) 0%, rgba(8,8,8,.24) 46%, rgba(8,8,8,.42) 100%);
}
.page-hero-copy { position: relative; z-index: 2; }
.page-hero--image .section-index { color: #ffb3b2; }
.page-hero--image h1 {
  margin: 0 0 18px;
  max-width: 16ch;
  font-size: clamp(2.6rem, 5vw, 4.6rem);
  text-wrap: balance;
}
.page-hero--image p:not(.section-index) {
  max-width: 62ch;
  margin: 0;
  color: rgba(255,255,255,.9);
  font-size: 1.1rem;
}
@media (max-width: 760px) {
  .page-hero--image { min-height: 0; padding: 118px 0 36px; }
  .page-hero--image h1 { font-size: clamp(2.1rem, 8vw, 2.8rem); }
}

/* ============================================================
   13. Closing note and footer — the reference's sign-off
   A centred statement, then the address block with T. / M. / E.
   prefixes and social links as plain text.
   ============================================================ */

.closing {
  background: var(--tc-blush);
  color: var(--tc-ink);
  padding: clamp(72px, 9vw, 130px) 0;
  text-align: center;
}
.closing-text {
  max-width: 62ch;
  margin: 0 auto 32px;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 2.3rem);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: .005em;
  text-wrap: balance;
}

.site-footer { background: var(--tc-ink); color: #fff; }
.footer-top { padding-top: clamp(56px, 6vw, 84px); }
.footer-brand p { color: rgba(255,255,255,.72); }
.footer-nav strong,
.footer-address strong {
  display: block;
  margin-bottom: 14px;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #ffb3b2;
}
.footer-nav a { color: rgba(255,255,255,.88); }
.footer-nav a:hover { color: #fff; }
.footer-address address { margin: 0 0 18px; font-style: normal; line-height: 1.6; color: rgba(255,255,255,.88); }
.footer-lines { margin: 0 0 20px; display: grid; gap: 6px; }
.footer-lines > div { display: grid; grid-template-columns: 26px 1fr; align-items: baseline; }
.footer-lines dt { color: #ffb3b2; font-weight: 700; font-size: .95rem; letter-spacing: .08em; }
.footer-lines dd { margin: 0; }
.footer-lines a { color: rgba(255,255,255,.9); min-height: 0; display: inline; }
.footer-lines a:hover { color: #fff; text-decoration: underline; text-underline-offset: .25em; }
.footer-social { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-social a,
.footer-social button {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font: 700 .95rem/1 "DM Sans", sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .35em;
  text-decoration-color: rgba(255,255,255,.4);
}
.footer-social a:hover,
.footer-social button:hover { text-decoration-color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.62); }
/* Footer contact lines keep their inline look but carry a 44px hit
   area — negative margin cancels the padding visually. */
.footer-lines a { display: inline-block; padding: 12px 0; margin: -12px 0; }
.footer-nav a, .footer-address address, .footer-lines dd, .footer-brand p { font-size: var(--fs-small); }