/**
 * Homepage — the layout that actually ships.
 *
 * The live homepage (page 132 and its Vietnamese counterpart) is a "v18"
 * document authored in the block editor and stored in post_content. None of
 * its section class names existed anywhere in this theme, so several sections
 * were rendering with no styling at all and falling through to WordPress core
 * defaults. This file is written against the served DOM, not against
 * patterns/page-home.php, which only ever seeds new pages.
 *
 * Deliberately NOT touched here: the split hero. Its layout and type scale are
 * owned by the Customizer's Additional CSS, which loads after every theme
 * stylesheet. Overriding it would be fighting a hand-authored decision.
 */

/* ==========================================================================
   SURFACE SYSTEM

   Five separate gradients had accumulated across the homepage, one per build,
   four of them near-identical warm creams and one — #dfe2df — a cool grey that
   is not in the palette at all. Four of seven sections rendered dark, in two
   different darks, one of them a floating box rather than a band. Nothing was
   anchored because everything was.

   Two surfaces. A third, cream-deep #F4ECDF, was tried and removed: against
   cream #FDF5EB it is a 4% difference, too small to read as a decision and
   large enough to read as a seam between blocks.

     Ground   cream     #FDF5EB   every light section
     Anchor   espresso  #32221A   the hero, the proof, and the closing ask

   Light sections are separated by spacing, imagery and content, not by tints
   that differ by a few percent.

   And one action colour: forest. Buttons, links and the focus ring on light
   ground; cream inverted on anchor. Sage is an accent on anchor only. Moss is
   retired from the interface and kept only as an editor palette entry.

   The page now reads:

     ANCHOR   hero             the opening statement
     ground   why trinity
     ANCHOR   results          proof
     ground   how we work
     ground   the journey
     ground   services gateway
     ANCHOR   deadlines close  the ask

   The hero was forest; it is espresso here so the page carries one dark tone
   rather than two, and forest is left to mean "action". Reverting that is the
   single declaration below.
   ========================================================================== */

/* --- Anchor: the opening ------------------------------------------------- */
html body .site-main .wp-block-group.split-hero {
  background: var(--anchor) !important;
  background-image: none !important;
  color: var(--cream) !important;
}

/* --- Ground: why trinity. Was a cool grey-green gradient, the single most
       off-palette surface on the page. ------------------------------------- */
html body .site-main .wp-block-group.trinity-why-section-v10 {
  background: var(--cream) !important;
  background-image: none !important;
}

html body .site-main .wp-block-group.trinity-why-section-v10::after {
  background: none !important;
  content: none !important;
}

/* --- Ground: how we work. Its white cards give it definition without a tint. */
html body .site-main .wp-block-group.trinity-explainer-section {
  background: var(--cream) !important;
  background-image: none !important;
}

/* --- Ground: the journey ------------------------------------------------- */
html body .site-main .wp-block-group.process-section {
  background: var(--cream) !important;
  background-image: none !important;
}

/* --- Ground: services gateway. The full-bleed image gives it its own
       presence; it needs no tint. ------------------------------------------ */
/* The gateway is the page dark band: it carries the image, the strongest claim
   and the route into Services, so it is the section that should stop the eye.
   Full treatment -- surface, type, button -- is in anchor.css. */
html body .site-main .trinity-services-gateway-v18 {
  background: var(--anchor) !important;
  background-image: none !important;
}

/* --- Anchor: the closing band -------------------------------------------
       Deadlines and the ask are one continuous dark band at the end of the
       page. The CTA used to be a dark box inside a light section; a 100vw
       break-out could not fix that, because .container and the section both
       carry overflow: hidden and clip it. An earlier build had already tried
       the same break-out and been clipped the same way. Making the section
       itself the anchor needs no break-out at all. ------------------------- */
html body .site-main .wp-block-group.trinity-deadlines-v18,
html body .site-main .wp-block-group.cta-band,
html body .site-main .wp-block-group.trinity-deadlines-v18 > .container,
html body .site-main .wp-block-group.cta-band > .container {
  background: var(--anchor) !important;
  background-image: none !important;
  /* Set with the surface, never separately. */
  color: var(--cream) !important;
}

/* One padding rhythm for the band, keyed to its own classes at (0,4,2) so it
   governs both languages. English took its padding from a body.home rule and
   Vietnamese fell through to the generic `.section { padding: 84px 0 }`, so the
   two had visibly different amounts of dead space above the label. */
html body .site-main .wp-block-group.section.trinity-deadlines-v18,
html body .site-main .wp-block-group.section.cta-band {
  margin: 0 !important;
  padding: clamp(52px, 5vw, 72px) 0 clamp(52px, 5vw, 72px) !important;
}

/* The inner container carried its own vertical padding on top of the section's,
   which is where the rest of the dead space came from. */
html body .site-main .wp-block-group.trinity-deadlines-v18 > .container,
html body .site-main .wp-block-group.cta-band > .container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* The ask is a continuation of the same band, not a new section. */
html body .site-main .trinity-deadlines-v18 .trinity-deadlines-v18__cta {
  margin: clamp(36px, 3.5vw, 48px) 0 0 !important;
  padding: clamp(36px, 3.5vw, 48px) 0 0 !important;
  border-top: 1px solid rgba(50, 34, 26, 0.14) !important;
  background: transparent !important;
}

/* Everything in the band reads in cream. Keyed to the band's own classes so it
   works on the Vietnamese homepage too, which has no body.home. */
html body .site-main .trinity-deadlines-v18 h1,
html body .site-main .trinity-deadlines-v18 h2,
html body .site-main .trinity-deadlines-v18 h3,
html body .site-main .trinity-deadlines-v18 p,
html body .site-main .trinity-deadlines-v18 .deadline__date,
html body .site-main .cta-band h1,
html body .site-main .cta-band h2,
html body .site-main .cta-band h3,
html body .site-main .cta-band p {
  color: var(--espresso) !important;
}

html body .site-main .trinity-deadlines-v18 .deadline__label,
html body .site-main .cta-band .deadline__label {
  color: rgba(50, 34, 26, 0.82) !important;
}

html body .site-main .trinity-deadlines-v18 .eyebrow,
html body .site-main .cta-band .eyebrow {
  color: var(--sage) !important;
}

/* The date panels sat on cream and used a hairline rule to separate them. On
   the green ground they need a ground of their own, or the four dates read as
   one undifferentiated block. */
html body .site-main .trinity-deadlines-v18 .deadline,
html body .site-main .wp-block-group.trinity-deadlines-v18 .deadline {
  border: 1px solid rgba(253,245,235,0.14) !important;
  border-top: 2px solid var(--sage) !important;
  background: rgba(253,245,235,0.06) !important;
}

/* --------------------------------------------------------------------------
   Buttons: one class, two surfaces.

   `.trinity-button-light` had no rule anywhere in the theme, so it inherited
   the core default (#32373c on white) — a near-black box sitting on the
   espresso results band. Forest on light ground, cream on dark ground.
   -------------------------------------------------------------------------- */

.trinity-button-light .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 26px;
  border: 1px solid var(--forest);
  border-radius: var(--radius, 3px);
  background: var(--forest);
  color: var(--cream);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

.trinity-button-light .wp-block-button__link:hover {
  background: #182F26;
  border-color: #182F26;
  text-decoration: none;
}

/* On espresso the same button inverts, so the label keeps 14:1 rather than
   disappearing into the band. */
.section--ink .trinity-button-light .wp-block-button__link,
.results-section .trinity-button-light .wp-block-button__link,
.trinity-deadlines-v18 .trinity-button-light .wp-block-button__link,
.trinity-deadlines-v18__cta .trinity-button-light .wp-block-button__link {
  border-color: var(--cream);
  background: var(--cream);
  color: var(--espresso);
}

.section--ink .trinity-button-light .wp-block-button__link:hover,
.results-section .trinity-button-light .wp-block-button__link:hover,
.trinity-deadlines-v18 .trinity-button-light .wp-block-button__link:hover,
.trinity-deadlines-v18__cta .trinity-button-light .wp-block-button__link:hover {
  border-color: var(--sage);
  background: var(--sage);
  color: var(--espresso);
}

/* Any button that lands on the closing band inverts to cream, whichever button
   class the block editor gave it. Without this, a forest button on espresso
   measures 1.4:1 against its own ground. */
html body .site-main .trinity-deadlines-v18 .wp-block-button__link,
html body .site-main .cta-band .wp-block-button__link,
html body .site-main .wp-block-group.trinity-deadlines-v18 .wp-block-button__link,
html body .site-main .section--ink .wp-block-button__link,
html body .site-main .results-section .wp-block-button__link,
html body .footer .wp-block-button__link {
  background: var(--cream) !important;
  border-color: var(--cream) !important;
  color: var(--anchor) !important;
}

html body .site-main .trinity-deadlines-v18 .wp-block-button__link:hover,
html body .site-main .cta-band .wp-block-button__link:hover,
html body .site-main .wp-block-group.trinity-deadlines-v18 .wp-block-button__link:hover,
html body .site-main .section--ink .wp-block-button__link:hover,
html body .site-main .results-section .wp-block-button__link:hover {
  background: var(--sage) !important;
  border-color: var(--sage) !important;
  color: var(--anchor) !important;
}

/* --------------------------------------------------------------------------
   How we work — the three principles.

   `.diff-card__number` had no rule at all, so "01 / 02 / 03" rendered as loose
   unstyled body copy above each card title. These are three principles, not
   ordered steps, so the numerals carry nothing the reader needs. The section
   labels are a different matter and are kept — see style.css.
   -------------------------------------------------------------------------- */

.diff-card__number {
  display: none !important;
}

/* --------------------------------------------------------------------------
   The journey — intro measure.
   -------------------------------------------------------------------------- */

.trinity-process-intro-v18 {
  max-width: 56ch;
}

/* --------------------------------------------------------------------------
   Services gateway.

   Entirely unstyled before this: a two-column image/copy block rendering as
   two stacked full-width blocks. It also sat between two cream sections, so
   the lower half of the page ran cream-on-cream-on-cream. Now an image-led
   band on cream-deep — a third surface that separates the journey above from
   the deadlines below without competing with the espresso closing ask.
   -------------------------------------------------------------------------- */

.trinity-services-gateway-v18 {
  width: 100%;
  margin: 0;
  padding: 0;
  background: var(--anchor);
}

.trinity-services-gateway-v18__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 !important;
  align-items: stretch;
  width: 100%;
  max-width: none;
  margin: 0 !important;
  min-height: clamp(400px, 42vw, 560px);
}

.trinity-services-gateway-v18__media {
  position: relative;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
}

.trinity-services-gateway-v18__media .wp-block-image,
.trinity-services-gateway-v18__media figure {
  height: 100%;
  margin: 0;
}

.trinity-services-gateway-v18__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}

.trinity-services-gateway-v18__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 5vw, 76px) clamp(24px, 5vw, 80px) !important;
}

/* px, not ch: this selector targets children that inherit 17px, so 30ch would
   resolve to about 255px rather than the intended measure. */
.trinity-services-gateway-v18__copy > * {
  max-width: 460px;
}

.trinity-services-gateway-v18__copy h2 {
  margin: 0 0 18px !important;
  font-size: clamp(29px, 2.4vw, 40px) !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.025em !important;
  color: var(--espresso) !important;
  text-wrap: balance;
}

/* Size and leading are left to refinements-v40, which owns body copy with
   !important. Only the measure is set here. */
.trinity-services-gateway-v18__copy .trinity-lead {
  max-width: 44ch;
  margin: 0;
}

.trinity-services-gateway-v18__copy .wp-block-buttons {
  max-width: none;
  margin-top: clamp(24px, 2.4vw, 34px) !important;
  justify-content: flex-start;
}

/* --------------------------------------------------------------------------
   Deadlines — the closing ask.

   The espresso surface itself is restored in refinements-v48.css, where it can
   outrank the :has() rule that was forcing it back to cream. What is left here
   is the measure and rhythm inside the band.
   -------------------------------------------------------------------------- */

/* The .container inside the band paints cream, which put a cream box in the
   middle of the espresso band and dropped the cream CTA text onto cream. The
   band owns the surface; nothing inside it should paint one. */
html body .site-main .wp-block-group.trinity-deadlines-v18 > .container,
html body .site-main .wp-block-group.trinity-deadlines-v18 .container:has(> .deadline-row) {
  background: transparent !important;
  background-image: none !important;
}

/* Every recolour for this band lived under `body.home`, which the Vietnamese
   homepage does not carry — it is page-template-page-designed. These are
   scoped to the band itself so they hold in both languages. */
html body .site-main .wp-block-group.trinity-deadlines-v18,
html body .site-main .wp-block-group.cta-band {
  color: var(--espresso) !important;
}

html body .site-main .trinity-deadlines-v18 h1,
html body .site-main .trinity-deadlines-v18 h2,
html body .site-main .trinity-deadlines-v18 h3,
html body .site-main .trinity-deadlines-v18 .deadline__date {
  color: var(--espresso) !important;
}

html body .site-main .trinity-deadlines-v18 .deadline__label {
  color: rgba(50, 34, 26, 0.82) !important;
}

html body .site-main .trinity-deadlines-v18 .deadline {
  border: 1px solid rgba(253, 245, 235, 0.14) !important;
  border-top: 2px solid var(--sage) !important;
  background: rgba(253, 245, 235, 0.07) !important;
}

/* Default: the ask paints its own dark surface. On the Vietnamese homepage this
   block sits in a top-level div with no class, outside the deadlines band, so it
   cannot rely on inheriting a dark ground. */
html body .site-main .trinity-deadlines-v18__cta {
  width: auto !important;
  max-width: none !important;
  /* No top margin: the ask paints its own ground, and a transparent margin
     between it and an espresso block above showed as a cream stripe. */
  margin: 0 !important;
  padding: clamp(52px, 5vw, 76px) clamp(24px, 4vw, 48px) !important;
  border-top: 0 !important;
  /* Cream, with the band. Was var(--anchor): on the Vietnamese homepage this
     block paints its own ground, so a dark ground here put espresso type on
     forest and the line under the heading disappeared. */
  background: var(--cream) !important;
  color: var(--espresso) !important;
  background-image: none !important;
  color: var(--cream) !important;
}

/* Inside the band it inherits that ground, so it only needs a divider. */
html body .site-main .trinity-deadlines-v18 .trinity-deadlines-v18__cta {
  padding: clamp(44px, 4.5vw, 64px) 0 0 !important;
  border-top: 1px solid rgba(50, 34, 26, 0.14) !important;
  background: transparent !important;
}

.trinity-deadlines-v18__cta > * {
  max-width: 52ch;
  margin-inline: auto;
}

body .site-main .trinity-deadlines-v18__cta h3.wp-block-heading,
body .site-main .trinity-deadlines-v18__cta h3 {
  margin: 0 0 12px !important;
  font-size: clamp(26px, 2.3vw, 36px) !important;
  font-weight: 900 !important;
  line-height: 1.14 !important;
  letter-spacing: -0.02em !important;
  text-wrap: balance;
}

.trinity-deadlines-v18__cta p {
  margin: 0 0 28px !important;
}

.trinity-deadlines-v18__cta .wp-block-buttons {
  margin-top: 0 !important;
}

/* --------------------------------------------------------------------------
   Vietnamese: stacked diacritics need vertical room, and the VI strings in
   these sections run longer than their English counterparts.
   -------------------------------------------------------------------------- */

body.trinity-lang-vi .trinity-services-gateway-v18__copy h2 {
  font-size: clamp(27px, 2.2vw, 37px) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.018em !important;
  max-width: 22ch;
}

body.trinity-lang-vi .trinity-deadlines-v18__cta h3 {
  font-size: clamp(24px, 2.1vw, 33px) !important;
  line-height: 1.24 !important;
  letter-spacing: -0.014em !important;
}

body.trinity-lang-vi .trinity-services-gateway-v18__copy .trinity-lead,
body.trinity-lang-vi .trinity-process-intro-v18,
body.trinity-lang-vi .trinity-deadlines-v18__cta p {
  line-height: 1.7 !important;
  letter-spacing: 0 !important;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .trinity-services-gateway-v18__grid {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .trinity-services-gateway-v18__media {
    height: clamp(240px, 42vw, 340px);
  }

  .trinity-services-gateway-v18__copy > *,
  .trinity-services-gateway-v18__copy h2 {
    max-width: none;
  }
}