/*
Theme Name: Trinity Education
Theme URI: https://trinityeducation.vn/
Author: Trinity Education
Description: A bilingual English/Vietnamese admissions-consulting theme with editorial typography, image-led Services and Process pages, Vietnamese-safe fonts, fully block-editable pages, managed student results, resources/blog integration, contact settings, and a working enquiry form.
Version: 10.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: trinity-education
*/

:root{
  --cream:      #FDF5EB;
  --sage:       #A3C0AC;
  --sage-deep:  #7FA38C;
  --espresso:   #32221A;
  --forest:     #253C2D;
  --moss:       #90A17B;
  --white:      #FFFFFF;

  --ink: var(--espresso);
  --ink-soft: #6B5A4E;

  --font-display: 'Avenir Next', Avenir, 'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'Avenir Next', Avenir, 'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --container: 1120px;
  --radius: 4px;
  --shadow: 0 1px 2px rgba(50,34,26,0.08), 0 6px 20px rgba(50,34,26,0.08);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4{
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1.15;
  margin: 0 0 0.5em;
  color: var(--ink);
}
h3{ font-weight: 500; }
h1{ font-size: clamp(2rem, 3.4vw + 1rem, 3rem); }
h2{ font-size: clamp(1.6rem, 2.2vw + 1rem, 2.3rem); }
h3{ font-size: 1.3rem; }
p{ margin: 0 0 1em; color: var(--ink-soft); }
a{ color: var(--forest); text-decoration: none; }
a:hover{ text-decoration: underline; }

img, svg{ max-width: 100%; display: block; }

:focus-visible{
  outline: 2px solid var(--moss);
  outline-offset: 3px;
}

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.section{ padding: 84px 0; }
.section--tight{ padding: 56px 0; }
.section--pale{ background: #F4ECDF; }
.section--ink{ background: var(--espresso); color: var(--cream); }
.section--ink h1, .section--ink h2, .section--ink h3{ color: var(--cream); }
.section--ink p{ color: rgba(253,245,235,0.78); }

.eyebrow{
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--sage-deep);
  margin: 0 0 0.9em;
  display: inline-block;
}
.section--ink .eyebrow{ color: var(--sage); }

.btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.98rem;
  padding: 13px 26px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color .15s ease;
  text-decoration: none;
}
.btn:hover{ text-decoration: none; transform: translateY(-1px); }
.btn-primary{ background: var(--espresso); color: var(--cream); }
.btn-primary:hover{ background: #241812; }
.btn-ghost{ background: transparent; color: var(--ink); border-color: rgba(50,34,26,0.3); }
.btn-ghost:hover{ border-color: var(--ink); }
.section--ink .btn-ghost{ color: var(--cream); border-color: rgba(253,245,235,0.4); }
.section--ink .btn-ghost:hover{ border-color: var(--cream); }
.btn-moss{ background: var(--moss); color: var(--white); }
.btn-moss:hover{ background: #7C8E68; }

.btn-row{ display: flex; gap: 14px; flex-wrap: wrap; margin-top: 1.6em; }

.nav{
  position: sticky; top: 0; z-index: 50;
  background: rgba(253,245,235,0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(50,34,26,0.1);
}
.nav__inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav__brand{ display: flex; align-items: center; }
.nav__brand img{ height: 34px; width: auto; }
.nav__links{
  display: flex; align-items: center; gap: 28px;
  list-style: none; margin: 0; padding: 0;
}
.nav__links a{ color: var(--ink); font-weight: 500; font-size: 0.95rem; }
.nav__links a[aria-current="page"]{ color: var(--forest); font-weight: 700; }
.nav__toggle{ display: none; background: none; border: none; cursor: pointer; width: 36px; height: 36px; }
.nav__toggle span{ display: block; height: 2px; background: var(--ink); margin: 7px 0; }

@media (max-width: 780px){
  .nav__links{
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--cream);
    flex-direction: column; align-items: flex-start;
    padding: 20px 24px 28px;
    display: none;
    border-bottom: 1px solid rgba(50,34,26,0.1);
  }
  .nav__links.is-open{ display: flex; }
  .nav__toggle{ display: block; }
}

.hero{
  padding: 90px 0 64px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--cream) 60%, #F4ECDF 100%);
}
.hero__grid{ display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
/* Padding-based ratio (works everywhere), with aspect-ratio as a
   progressive enhancement for modern browsers. */
.hero__panel{
  position: relative;
  width: 100%;
  padding-top: 85%;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--sage);
}
.hero__panel img{
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.9;
}
@supports (aspect-ratio: 4/3.4){
  .hero__panel{ padding-top: 0; aspect-ratio: 4/3.4; }
}

.hero__pattern{
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background-image: url('assets/images/pattern/pattern-2.jpg');
  background-size: 900px;
  background-repeat: repeat;
  opacity: 0.05;
  pointer-events: none;
}
@media (max-width: 900px){ .hero__grid{ grid-template-columns: 1fr; } }

.logo-strip{
  display: flex; flex-wrap: wrap; gap: 32px 44px;
  align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink-soft);
  padding: 28px 0;
  border-top: 1px solid rgba(50,34,26,0.12);
  border-bottom: 1px solid rgba(50,34,26,0.12);
}

.grid{ display: grid; gap: 28px; }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px){ .grid-2, .grid-3{ grid-template-columns: 1fr; } }

.card{
  background: var(--white);
  border: 1px solid rgba(50,34,26,0.1);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow);
}

.pkg-card{
  background: var(--white);
  border: 1px solid rgba(50,34,26,0.1);
  border-top: 4px solid var(--sage);
  border-radius: var(--radius);
  padding: 32px;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow);
}
.pkg-card--flagship{ border-top-color: var(--moss); }
.pkg-card__price{ font-family: var(--font-display); font-weight: 900; font-size: 2.1rem; margin: 6px 0 2px; }
.pkg-card__hours{ color: var(--ink-soft); font-size: 0.92rem; margin-bottom: 18px; }
.pkg-card ul{ padding-left: 20px; margin: 0 0 22px; color: var(--ink-soft); }
.pkg-card ul li{ margin-bottom: 8px; }
.pkg-card .btn{ margin-top: auto; align-self: flex-start; }

.testimonial{ background: var(--white); border-radius: var(--radius); border: 1px solid rgba(50,34,26,0.1); padding: 26px 28px; }
.testimonial__quote{ font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; margin-bottom: 14px; }
.testimonial__meta{ color: var(--ink-soft); font-size: 0.85rem; }

.founder{ display: grid; grid-template-columns: 140px 1fr; gap: 24px; align-items: start; }
.founder__portrait{ width: 140px; height: 140px; border-radius: 50%; background: #EFE6D6; border: 2px solid var(--sage); }
@media (max-width: 600px){
  .founder{ grid-template-columns: 84px 1fr; }
  .founder__portrait{ width: 84px; height: 84px; }
}

.timeline{ position: relative; padding-left: 40px; }
.timeline::before{ content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 2px; background: var(--sage-deep); border-radius: 2px; }
.timeline__step{ position: relative; padding-bottom: 40px; }
.timeline__step:last-child{ padding-bottom: 0; }
.timeline__marker{
  position: absolute; left: -40px; top: 2px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--espresso); color: var(--cream);
  font-family: var(--font-display); font-weight: 700; font-size: 0.8rem;
  display: flex; align-items: center; justify-content: center;
}

.deadline-row{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 32px; }
@media (max-width: 860px){ .deadline-row{ grid-template-columns: repeat(2, 1fr); } }
.deadline{ border-left: 3px solid var(--moss); padding-left: 14px; }
.deadline__date{ font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; }
.deadline__label{ color: var(--ink-soft); font-size: 0.88rem; }

.contact-rail{ position: fixed; right: 20px; bottom: 20px; z-index: 60; display: flex; gap: 10px; }
.contact-rail .btn{ box-shadow: var(--shadow); }

.footer{ background: var(--espresso); color: rgba(253,245,235,0.75); padding: 56px 0 32px; font-size: 0.92rem; position: relative; }
.footer a{ color: var(--cream); }
.footer__grid{ display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; margin-bottom: 36px; }
@media (max-width: 700px){ .footer__grid{ grid-template-columns: 1fr; } }
.footer__brand img{ height: 30px; width: auto; margin-bottom: 10px; filter: brightness(0) invert(1); }
.footer h4{ color: var(--cream); font-size: 0.9rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 14px; }
.footer ul{ list-style: none; padding: 0; margin: 0; }
.footer li{ margin-bottom: 8px; }
.footer__bottom{ border-top: 1px solid rgba(253,245,235,0.15); padding-top: 20px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 0.82rem; }

.reveal{ opacity: 1; transform: none; }
.js .reveal{ opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-visible{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .js .reveal{ opacity: 1; transform: none; transition: none; } }

.text-center{ text-align: center; }
.max-w-sm{ max-width: 620px; }
.mx-auto{ margin-left: auto; margin-right: auto; }
.mt-0{ margin-top: 0; }
.pill{ display: inline-block; background: #EDE3D2; color: var(--ink); border-radius: 999px; padding: 5px 14px; font-size: 0.82rem; font-weight: 700; margin: 0 8px 8px 0; }

/* Page styles imported from index.html */
/* --- page-specific --- */

.hero--home {
  padding: 110px 0 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: var(--cream);
}
.hero--home__bg {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-image: url('assets/images/pattern/pattern-3.jpg');
  background-size: 800px;
  background-repeat: repeat;
  opacity: 0.07;
  pointer-events: none;
}
@media (max-width: 600px) {
  .hero--home { padding: 72px 0 56px; }
  }

.problem-section {
  position: relative;
  overflow: hidden;
}
.problem-section__bg {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-image: url('assets/images/pattern/pattern-2.jpg');
  background-size: 700px;
  background-repeat: repeat;
  opacity: 0.05;
  pointer-events: none;
}

.diff-card {
  background: var(--white);
  border: 1px solid rgba(50,34,26,0.1);
  border-radius: var(--radius);
  padding: 40px 32px 32px;
  text-align: center;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.diff-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--sage);
}
.diff-card__label {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.35rem;
  color: var(--ink);
  margin-bottom: 16px;
}
.diff-card__quote {
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ink-soft);
}
.diff-card__name {
  font-weight: 700;
  font-size: 0.85rem;
  margin-top: 16px;
}
.diff-card__school {
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.results-section {
  background: var(--espresso);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
.results-section__pattern {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-image: url('assets/images/pattern/pattern-1.jpg');
  background-size: 500px;
  background-repeat: repeat;
  opacity: 0.04;
  pointer-events: none;
}

/* tiered university grid */
.uni-grid {
  text-align: center;
  margin-bottom: 48px;
}
.uni-grid__top {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.2rem;
  color: var(--cream);
  margin-bottom: 14px;
}
.uni-grid__top span {
  opacity: 0.9;
}
.uni-grid__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.88rem;
  color: rgba(253,245,235,0.5);
}
.uni-grid__divider {
  width: 60px;
  height: 1px;
  background: rgba(253,245,235,0.15);
  margin: 6px auto 10px;
}

.testimonial--dark {
  background: rgba(253,245,235,0.06);
  border: 1px solid rgba(253,245,235,0.1);
  border-radius: var(--radius);
  padding: 28px 28px 24px;
}
.testimonial--dark p { color: rgba(253,245,235,0.82); }
.testimonial--dark .t-name { font-weight: 700; font-size: 0.9rem; color: var(--cream); margin-top: 14px; }
.testimonial--dark .t-school { font-size: 0.82rem; color: rgba(253,245,235,0.55); }

.process-section {
  position: relative;
  overflow: hidden;
}
.process-section__pattern {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-image: url('assets/images/pattern/pattern-2.jpg');
  background-size: 600px;
  background-repeat: repeat;
  opacity: 0.04;
  pointer-events: none;
}

.cta-band {
  background: var(--forest);
  color: var(--cream);
  padding: 72px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band__bg {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-image: url('assets/images/pattern/pattern-3.jpg');
  background-size: 500px;
  background-repeat: repeat;
  opacity: 0.06;
  pointer-events: none;
}
.cta-band h2 { color: var(--cream); }
.cta-band p { color: rgba(253,245,235,0.75); }

/* Page styles imported from about.html */
.founder-full {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
  align-items: start;
  margin-bottom: 28px;
}
.founder-full__photo {
  width: 260px;
  height: 320px;
  border-radius: var(--radius);
  object-fit: cover;
  object-position: center top;
  border: 2px solid var(--sage);
}
.founder-full__name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.6rem;
  margin-bottom: 4px;
}
.founder-full__sub {
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.founder-full__bio p {
  font-size: 0.98rem;
  line-height: 1.7;
  margin-bottom: 1em;
}
@media (max-width: 700px) {
  .founder-full {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .founder-full__photo {
    width: 180px;
    height: 220px;
  }
}

/* Page styles imported from results.html */
.tcard {
  background: var(--white);
  border: 1px solid rgba(50,34,26,0.1);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.tcard:hover {
  box-shadow: 0 2px 6px rgba(50,34,26,0.1), 0 10px 28px rgba(50,34,26,0.12);
  transform: translateY(-2px);
}
.tcard__top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}
.tcard__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--sage);
  color: var(--espresso);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tcard__name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.05rem;
  line-height: 1.2;
}
.tcard__school {
  font-size: 0.82rem;
  color: var(--ink-soft);
  font-weight: 500;
}
.tcard__mentor {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sage-deep);
}
.tcard__pull {
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.tcard__read {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--forest);
}
.tcard__read::after {
  content: " \2192";
}

/* expanded overlay */
.overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(50,34,26,0.5);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.overlay__card {
  background: var(--white);
  border-radius: var(--radius);
  max-width: 680px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 40px;
  box-shadow: 0 4px 20px rgba(50,34,26,0.2);
  position: relative;
}
.overlay__close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--ink-soft);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.overlay__close:hover { color: var(--ink); }
.overlay__name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.4rem;
  margin-bottom: 4px;
}
.overlay__school {
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.overlay__mentor {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sage-deep);
  margin-bottom: 20px;
}
.overlay__body p {
  font-size: 0.98rem;
  line-height: 1.75;
  margin-bottom: 0.9em;
}
.overlay__body p:last-child { margin-bottom: 0; }


/* WordPress integration */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background: var(--cream);
  clip: auto !important;
  clip-path: none;
  color: var(--ink);
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  height: auto;
  left: 12px;
  padding: 12px 16px;
  top: 12px;
  width: auto;
  z-index: 100000;
  box-shadow: var(--shadow);
}
.admin-bar .nav { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .nav { top: 46px; } }
.site-main { min-height: 50vh; }
.custom-logo-link { display: flex; align-items: center; }
.custom-logo-link img { height: 34px; width: auto; }
.nav__links .menu-item--cta > a {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border-radius: var(--radius);
  background: var(--moss);
  color: var(--white);
  font-weight: 700;
}
.nav__links .menu-item--cta > a:hover { background: #7C8E68; text-decoration: none; }
@media (max-width: 780px) {
  .nav__links .menu-item--cta > a { padding: 11px 18px; }
}

/* Forms */
.trinity-form label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 5px; }
.trinity-form__field { margin-bottom: 15px; }
.trinity-form input,
.trinity-form select,
.trinity-form textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid rgba(50,34,26,0.25);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font: inherit;
}
.trinity-form textarea { resize: vertical; min-height: 110px; }
.trinity-form input:focus,
.trinity-form select:focus,
.trinity-form textarea:focus { border-color: var(--sage-deep); outline: 2px solid rgba(127,163,140,0.22); }
.trinity-form__honeypot { position: absolute !important; left: -9999px !important; }
.form-notice { border-radius: var(--radius); padding: 13px 15px; margin: 0 0 20px; font-size: 0.92rem; }
.form-notice--success { background: #E3EFE5; color: #1E4A2A; border: 1px solid #AAC9B0; }
.form-notice--error { background: #F8E3DF; color: #702B22; border: 1px solid #D9A59D; }
.booking-placeholder { background: #EFE6D6; border-radius: var(--radius); min-height: 420px; display: flex; flex-direction: column; gap: 14px; align-items: center; justify-content: center; color: var(--ink-soft); text-align: center; padding: 32px; }
.calendly-inline-widget { min-width: 280px; height: 620px; }

/* Resources and posts */
.resource-card { display: flex; flex-direction: column; }
.resource-card__image { aspect-ratio: 16 / 9; overflow: hidden; margin: -32px -32px 24px; background: #EDE3D2; }
.resource-card__image img { width: 100%; height: 100%; object-fit: cover; }
.resource-card__meta { margin-bottom: 12px; }
.resource-card__title a { color: var(--ink); }
.resource-card__title a:hover { color: var(--forest); }
.resource-card__link { margin-top: auto; font-weight: 700; }
.pagination { margin-top: 42px; display: flex; gap: 8px; flex-wrap: wrap; }
.pagination .page-numbers { padding: 8px 12px; border: 1px solid rgba(50,34,26,0.18); border-radius: var(--radius); }
.pagination .current { background: var(--espresso); color: var(--cream); }
.article-header { padding-bottom: 28px; }
.article-meta { color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 16px; }
.article-content { max-width: 760px; }
.article-content > * { max-width: 100%; }
.article-content p,
.article-content li { font-size: 1.03rem; line-height: 1.75; }
.article-content h2 { margin-top: 1.7em; }
.article-content h3 { margin-top: 1.5em; }
.article-content blockquote { margin: 1.6em 0; padding: 8px 0 8px 24px; border-left: 4px solid var(--sage); }
.article-content img { height: auto; }
.post-navigation { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 48px; }
.post-navigation a { display: block; padding: 20px; background: #F4ECDF; border-radius: var(--radius); }
@media (max-width: 700px) { .post-navigation { grid-template-columns: 1fr; } }

/* Accessible testimonial cards and modal */
.tcard[role="button"] { width: 100%; text-align: left; font: inherit; }
.tcard[role="button"]:focus-visible { outline: 3px solid var(--sage-deep); outline-offset: 3px; }
.overlay[aria-hidden="true"] { visibility: hidden; }
.overlay.is-open { visibility: visible; }

/* Content entered into the WordPress editor beneath a designed page */
.trinity-page-extra { padding-top: 0; }
.trinity-page-extra .article-content { margin: 0 auto; }

/* Minor utilities */
.empty-state { text-align: center; padding: 48px 28px; background: #F4ECDF; border-radius: var(--radius); }
.site-notice { font-size: 0.86rem; color: var(--ink-soft); margin-top: 14px; }


/* --------------------------------------------------------------------------
   Block-editor page layouts (version 2)
   -------------------------------------------------------------------------- */
.site-main > .wp-block-group,
.site-main > .wp-block-columns,
.site-main > .wp-block-shortcode{
  margin-top: 0;
  margin-bottom: 0;
}
.site-main > .alignfull{
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.wp-block-group.container{
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}
.wp-block-columns.grid,
.wp-block-columns.deadline-row{
  margin-bottom: 0;
}
.wp-block-column.diff-card,
.wp-block-column.testimonial--dark,
.wp-block-column.pkg-card,
.wp-block-column.deadline{
  min-width: 0;
}
.wp-block-image.founder-full__figure{
  margin: 0;
}
.wp-block-image.founder-full__figure img{
  width: 260px;
}
.trinity-center{ text-align: center; }
.trinity-center-block{ margin-left: auto; margin-right: auto; }
.trinity-narrow{ max-width: 620px; }
.trinity-copy-narrow{ max-width: 720px; }
.trinity-timeline-width{ max-width: 640px; position: relative; }
.trinity-timeline-width-left{ max-width: 640px; }
.trinity-lead{ font-size: 1.05rem; line-height: 1.7; }
.trinity-emphasis{ font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.trinity-small{ font-size: 0.88rem; color: var(--ink-soft); }
.trinity-section-header{ padding-bottom: 20px; }
.trinity-section-after-header{ padding-top: 10px; }
.trinity-pricing-header{ padding-bottom: 40px; }
.trinity-pricing-body{ padding-top: 0; }
.trinity-grid-top{ margin-top: 36px; }
.trinity-grid-second-row{ margin-top: 28px; }
.trinity-link-row{ margin-top: 24px; }
.trinity-paragraph-top{ margin-top: 32px; }
.trinity-heading-top{ margin-top: 48px; }
.trinity-founder-card{ margin-bottom: 36px; padding: 40px; }
.trinity-founder-card:last-child{ margin-bottom: 0; }
.trinity-info-card{ margin-top: 40px; }
.trinity-legal-note{ margin: 32px 0; background: #F4ECDF; }
.trinity-legal-note p{ margin-bottom: 0; font-size: 0.9rem; }
.pkg-card--disabled{ opacity: 0.55; }
.timeline__marker{ margin: 0; }
.deadline__date,
.deadline__label,
.pkg-card__price,
.pkg-card__hours,
.diff-card__name,
.diff-card__school,
.t-name,
.t-school,
.pill{ margin-top: 0; }

/* Native Button blocks styled like the original site buttons. */
.wp-block-buttons{ gap: 14px; }
.wp-block-button__link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.2;
  padding: 13px 26px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  text-decoration: none;
}
.wp-block-button__link:hover{ text-decoration: none; transform: translateY(-1px); }
.trinity-button-primary .wp-block-button__link{ background: var(--espresso); color: var(--cream); }
.trinity-button-primary .wp-block-button__link:hover{ background: #241812; }
.trinity-button-ghost .wp-block-button__link{ background: transparent; color: var(--ink); border-color: rgba(50,34,26,0.3); }
.trinity-button-ghost .wp-block-button__link:hover{ border-color: var(--ink); }
.trinity-button-moss .wp-block-button__link{ background: var(--moss); color: var(--white); }
.trinity-button-moss .wp-block-button__link:hover{ background: #7C8E68; }
.section--ink .trinity-button-ghost .wp-block-button__link{ color: var(--cream); border-color: rgba(253,245,235,0.4); }

/* Keep card buttons aligned at the bottom in editable pricing columns. */
.wp-block-column.pkg-card > .wp-block-buttons{ margin-top: auto; }

/* Shortcode-backed areas. */
.trinity-contact-grid{ align-items: start; }
.trinity-form-divider{ border: 0; border-top: 1px solid rgba(50,34,26,0.12); margin: 28px 0; }
.trinity-form-subheading{ font-size: 1.05rem; }
.tcard__full[hidden]{ display: none; }

@media (max-width: 700px){
  .trinity-founder-card{ padding: 28px; }
  .wp-block-image.founder-full__figure img{ width: 180px; }
}

/* --------------------------------------------------------------------------
   Trinity brand-aligned split hero (version 3)

   Apply the "Trinity Split Hero" block style to an outer Group containing:
   Columns > first Column > Group > Heading/Paragraph/Buttons
           > second Column > Image
   -------------------------------------------------------------------------- */
.wp-block-group.is-style-trinity-split-hero,
.wp-block-group.trinity-split-hero,
.wp-block-group.split-hero{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--cream) !important;
  color: var(--espresso);
  text-align: left !important;
}

/* One approved brand motif, cropped and faded into the lower-left field. */
.wp-block-group.is-style-trinity-split-hero::before,
.wp-block-group.trinity-split-hero::before,
.wp-block-group.split-hero::before{
  content: "";
  position: absolute;
  z-index: 0;
  left: -5%;
  bottom: -4%;
  width: 900px;
  width: min(64vw, 980px);
  height: 310px;
  background: url('assets/images/pattern/trinity-wave-band.png') left bottom / 100% auto no-repeat;
  opacity: 0.18;
  pointer-events: none;
}

/* Gentle veil keeps the motif secondary and the copy fully legible. */
.wp-block-group.is-style-trinity-split-hero::after,
.wp-block-group.trinity-split-hero::after,
.wp-block-group.split-hero::after{
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 48% 0 0;
  background: linear-gradient(
    180deg,
    rgba(253,245,235,0.98) 0%,
    rgba(253,245,235,0.90) 45%,
    rgba(253,245,235,0.62) 82%,
    rgba(253,245,235,0.78) 100%
  );
  pointer-events: none;
}

.wp-block-group.is-style-trinity-split-hero > .wp-block-columns,
.wp-block-group.trinity-split-hero > .wp-block-columns,
.wp-block-group.split-hero > .wp-block-columns{
  position: relative;
  z-index: 1;
  display: flex !important;
  align-items: stretch !important;
  width: 100%;
  max-width: none !important;
  min-height: 700px;
  min-height: clamp(640px, 76vh, 780px);
  margin: 0 !important;
  gap: 0 !important;
}

.wp-block-group.is-style-trinity-split-hero > .wp-block-columns > .wp-block-column,
.wp-block-group.trinity-split-hero > .wp-block-columns > .wp-block-column,
.wp-block-group.split-hero > .wp-block-columns > .wp-block-column{
  min-width: 0;
  margin: 0 !important;
}

/* Text column: deliberately starts near the top rather than floating low in a tall hero. */
.wp-block-group.is-style-trinity-split-hero > .wp-block-columns > .wp-block-column:first-child,
.wp-block-group.trinity-split-hero > .wp-block-columns > .wp-block-column:first-child,
.wp-block-group.split-hero > .wp-block-columns > .wp-block-column:first-child{
  flex-basis: 48% !important;
  align-self: stretch !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  padding: 88px 72px 64px !important;
  padding: clamp(72px, 8vh, 102px) clamp(36px, 5.5vw, 108px) 64px !important;
}

.wp-block-group.is-style-trinity-split-hero > .wp-block-columns > .wp-block-column:first-child > .wp-block-group,
.wp-block-group.trinity-split-hero > .wp-block-columns > .wp-block-column:first-child > .wp-block-group,
.wp-block-group.split-hero > .wp-block-columns > .wp-block-column:first-child > .wp-block-group{
  width: 100%;
  max-width: 620px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* The pixel width controls editorial wrapping; words never split mid-word. */
.wp-block-group.is-style-trinity-split-hero h1,
.wp-block-group.trinity-split-hero h1,
.wp-block-group.split-hero h1{
  width: 100%;
  max-width: 570px !important;
  margin: 0 0 26px !important;
  padding: 0 !important;
  font-family: var(--font-display);
  font-size: 72px !important;
  font-size: clamp(54px, 4.35vw, 80px) !important;
  font-weight: 900;
  line-height: 0.99;
  letter-spacing: -0.045em;
  text-align: left !important;
  text-wrap: balance;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

.wp-block-group.is-style-trinity-split-hero p,
.wp-block-group.trinity-split-hero p,
.wp-block-group.split-hero p{
  width: 100%;
  max-width: 470px !important;
  margin: 0 0 32px !important;
  padding: 0 !important;
  font-size: 20px !important;
  font-size: clamp(18px, 1.25vw, 21px) !important;
  line-height: 1.55;
  text-align: left !important;
  color: var(--ink-soft);
}

.wp-block-group.is-style-trinity-split-hero .wp-block-buttons,
.wp-block-group.trinity-split-hero .wp-block-buttons,
.wp-block-group.split-hero .wp-block-buttons{
  justify-content: flex-start !important;
  margin: 0 !important;
}

/* The photograph is an architectural field, not a rounded card. */
.wp-block-group.is-style-trinity-split-hero > .wp-block-columns > .wp-block-column:last-child,
.wp-block-group.trinity-split-hero > .wp-block-columns > .wp-block-column:last-child,
.wp-block-group.split-hero > .wp-block-columns > .wp-block-column:last-child{
  flex-basis: 52% !important;
  align-self: stretch !important;
  overflow: hidden;
  background: var(--sage);
}

.wp-block-group.is-style-trinity-split-hero > .wp-block-columns > .wp-block-column:last-child > .wp-block-image,
.wp-block-group.trinity-split-hero > .wp-block-columns > .wp-block-column:last-child > .wp-block-image,
.wp-block-group.split-hero > .wp-block-columns > .wp-block-column:last-child > .wp-block-image{
  width: 100%;
  height: 100%;
  margin: 0 !important;
}

.wp-block-group.is-style-trinity-split-hero > .wp-block-columns > .wp-block-column:last-child img,
.wp-block-group.trinity-split-hero > .wp-block-columns > .wp-block-column:last-child img,
.wp-block-group.split-hero > .wp-block-columns > .wp-block-column:last-child img{
  display: block;
  width: 100%;
  height: 100%;
  min-height: 700px;
  min-height: clamp(640px, 76vh, 780px);
  border-radius: 0 !important;
  object-fit: cover;
  object-position: center;
}


/* Remove manual line breaks left over from the original centred hero. */
.wp-block-group.is-style-trinity-split-hero h1 br,
.wp-block-group.trinity-split-hero h1 br,
.wp-block-group.split-hero h1 br,
.wp-block-group.is-style-trinity-split-hero p br,
.wp-block-group.trinity-split-hero p br,
.wp-block-group.split-hero p br{
  display: none;
}

@media (max-width: 980px){
  .wp-block-group.is-style-trinity-split-hero > .wp-block-columns,
  .wp-block-group.trinity-split-hero > .wp-block-columns,
  .wp-block-group.split-hero > .wp-block-columns{
    display: block !important;
    min-height: 0;
  }

  .wp-block-group.is-style-trinity-split-hero::after,
  .wp-block-group.trinity-split-hero::after,
  .wp-block-group.split-hero::after{
    inset: 0;
    background: linear-gradient(180deg, rgba(253,245,235,0.98), rgba(253,245,235,0.76));
  }

  .wp-block-group.is-style-trinity-split-hero::before,
  .wp-block-group.trinity-split-hero::before,
  .wp-block-group.split-hero::before{
    width: 105%;
    height: 230px;
    left: -10%;
    bottom: 390px;
    opacity: 0.14;
  }

  .wp-block-group.is-style-trinity-split-hero > .wp-block-columns > .wp-block-column:first-child,
  .wp-block-group.trinity-split-hero > .wp-block-columns > .wp-block-column:first-child,
  .wp-block-group.split-hero > .wp-block-columns > .wp-block-column:first-child{
    padding: 64px 24px 70px !important;
  }

  .wp-block-group.is-style-trinity-split-hero h1,
  .wp-block-group.trinity-split-hero h1,
  .wp-block-group.split-hero h1{
    max-width: 650px !important;
    font-size: clamp(44px, 10.5vw, 64px) !important;
  }

  .wp-block-group.is-style-trinity-split-hero > .wp-block-columns > .wp-block-column:last-child img,
  .wp-block-group.trinity-split-hero > .wp-block-columns > .wp-block-column:last-child img,
  .wp-block-group.split-hero > .wp-block-columns > .wp-block-column:last-child img{
    min-height: 430px;
    max-height: 560px;
  }
}


/* --------------------------------------------------------------------------
   Navigation and content curation (version 4)
   -------------------------------------------------------------------------- */

/* Desktop dropdown navigation. */
.nav__links > li{
  position: relative;
  display: flex;
  align-items: center;
}
.nav__links > li > a{
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}
.nav__links .current-menu-ancestor > a,
.nav__links .current-menu-parent > a{
  color: var(--forest);
  font-weight: 700;
}
.submenu-toggle{
  position: relative;
  width: 28px;
  height: 36px;
  margin-left: -4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.submenu-toggle::before{
  content: "";
  position: absolute;
  left: 9px;
  top: 13px;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.18s ease, top 0.18s ease;
}
.menu-item-has-children.is-submenu-open > .submenu-toggle::before{
  top: 16px;
  transform: rotate(225deg);
}
.nav__links .sub-menu{
  position: absolute;
  z-index: 80;
  top: calc(100% + 8px);
  left: -18px;
  min-width: 190px;
  margin: 0;
  padding: 10px;
  list-style: none;
  background: var(--cream);
  border: 1px solid rgba(50,34,26,0.12);
  box-shadow: 0 12px 30px rgba(50,34,26,0.12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-5px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
}
.nav__links .sub-menu::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
}
.nav__links .sub-menu li{
  display: block;
}
.nav__links .sub-menu a{
  display: block;
  min-height: 0;
  padding: 10px 12px;
  white-space: nowrap;
  font-size: 0.91rem;
  line-height: 1.25;
}
.nav__links .sub-menu a:hover,
.nav__links .sub-menu a:focus-visible{
  background: rgba(163,192,172,0.18);
  text-decoration: none;
}
.nav__links .menu-item-has-children:hover > .sub-menu,
.nav__links .menu-item-has-children:focus-within > .sub-menu,
.nav__links .menu-item-has-children.is-submenu-open > .sub-menu{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

@media (max-width: 780px){
  .nav__links{
    gap: 0;
    align-items: stretch;
  }
  .nav__links > li{
    width: 100%;
    flex-wrap: wrap;
    border-bottom: 1px solid rgba(50,34,26,0.08);
  }
  .nav__links > li:last-child{
    border-bottom: 0;
  }
  .nav__links > li > a{
    flex: 1;
    min-height: 0;
    padding: 11px 0;
  }
  .submenu-toggle{
    width: 42px;
    height: 44px;
    margin-left: 0;
  }
  .submenu-toggle::before{
    left: 16px;
    top: 15px;
  }
  .menu-item-has-children.is-submenu-open > .submenu-toggle::before{
    top: 18px;
  }
  .nav__links .sub-menu{
    position: static;
    flex-basis: 100%;
    width: 100%;
    min-width: 0;
    display: none;
    margin: 0 0 10px;
    padding: 2px 0 6px 18px;
    border: 0;
    border-left: 1px solid rgba(50,34,26,0.16);
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    background: transparent;
  }
  .nav__links .menu-item-has-children.is-submenu-open > .sub-menu{
    display: block;
  }
  .nav__links .sub-menu a{
    padding: 9px 10px;
    white-space: normal;
  }
}

/* The three principles now explain the method rather than quote students. */
.diff-card--explain{
  text-align: left;
  padding: 40px 32px 34px;
}
.diff-card--explain .diff-card__label{
  margin-bottom: 18px;
}
.diff-card__body{
  margin: 0 0 14px;
  color: var(--ink-soft);
  font-size: 0.96rem;
  line-height: 1.7;
}
.diff-card__body:last-child{
  margin-bottom: 0;
}

/* Editorial service lists: restrained rules rather than generic feature cards. */
.service-card{
  min-width: 0;
  padding: 26px 4px 24px;
  border-top: 2px solid var(--sage-deep);
}
.service-card h3{
  max-width: 18ch;
  margin-bottom: 12px;
  font-size: 1.2rem;
  font-weight: 700;
}
.service-card p:not(.service-card__number){
  margin-bottom: 0;
  font-size: 0.94rem;
  line-height: 1.65;
}
.service-card__number{
  margin: 0 0 14px;
  color: var(--sage-deep);
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.trinity-service-links{
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
}
.trinity-service-links span{
  display: none;
}
.service-detail{
  min-width: 0;
  padding: 34px 0 30px;
  border-top: 1px solid rgba(50,34,26,0.2);
}
.service-detail h2{
  max-width: 22ch;
  margin-bottom: 16px;
  font-size: clamp(1.35rem, 1.2vw + 1rem, 1.8rem);
}
.service-detail p{
  max-width: 62ch;
  line-height: 1.75;
}

/* Four selected student stories on the homepage. */
.trinity-home-results-v4 .trinity-results-widget{
  margin-top: 40px;
}
.trinity-results-widget--home .tcard{
  background: rgba(253,245,235,0.065);
  border-color: rgba(253,245,235,0.14);
  box-shadow: none;
}
.trinity-results-widget--home .tcard:hover{
  background: rgba(253,245,235,0.09);
  box-shadow: none;
}
.trinity-results-widget--home .tcard__avatar{
  background: var(--sage);
  color: var(--espresso);
}
.trinity-results-widget--home .tcard__name{
  color: var(--cream);
}
.trinity-results-widget--home .tcard__school,
.trinity-results-widget--home .tcard__pull{
  color: rgba(253,245,235,0.72);
}
.trinity-results-widget--home .tcard__mentor{
  color: var(--sage);
}
.trinity-results-widget--home .tcard__read{
  color: var(--cream);
}

@media (max-width: 860px){
  .diff-card--explain{
    padding: 32px 26px 28px;
  }
  .service-detail{
    padding: 28px 0 24px;
  }
}

@media (min-width: 701px){
  .footer__grid{ grid-template-columns: 2fr 1fr 1fr 1fr; }
}

/* Version 5: six Services entries in a deliberate 3-by-2 editorial grid. */
.trinity-services-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 28px 36px !important;
  align-items: stretch !important;
}
.trinity-services-grid > .wp-block-column{
  min-width: 0;
  margin-left: 0 !important;
}
@media (max-width: 980px){
  .trinity-services-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px){
  .trinity-services-grid{
    grid-template-columns: 1fr !important;
  }
}

/* Version 6: bilingual navigation */
.nav__actions{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  margin-left: auto;
}
.language-switcher{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 0.76rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.language-switcher__link{
  color: var(--ink-soft);
  padding: 6px 1px;
  text-decoration: none;
}
.language-switcher__link:hover{
  color: var(--forest);
  text-decoration: none;
}
.language-switcher__link.is-active{
  color: var(--ink);
  font-weight: 900;
}
.language-switcher__divider{
  color: rgba(50,34,26,0.35);
}
.trinity-lang-vi .nav__links{
  gap: 22px;
}
.trinity-lang-vi .nav__links > li > a{
  font-size: 0.92rem;
}

@media (max-width: 920px) and (min-width: 781px){
  .nav__links{ gap: 18px; }
  .trinity-lang-vi .nav__links{ gap: 15px; }
  .nav__links a{ font-size: 0.9rem; }
  .nav__links .menu-item--cta > a{ padding-left: 14px; padding-right: 14px; }
  .nav__actions{ gap: 14px; }
}

@media (max-width: 780px){
  .nav__actions{
    gap: 12px;
  }
  .language-switcher{
    font-size: 0.74rem;
  }
  .nav__links{
    z-index: 75;
  }
}

/* --------------------------------------------------------------------------
   Version 7: Vietnamese-safe typography

   Jost does not provide a complete Vietnamese glyph set. Vietnamese pages use
   Be Vietnam Pro as their primary family, with more generous diacritic spacing
   and a slightly smaller hero scale. English pages retain the existing Jost
   treatment.
   -------------------------------------------------------------------------- */
.trinity-lang-vi{
  --font-display: 'Be Vietnam Pro', Arial, 'Helvetica Neue', Helvetica, sans-serif;
  --font-body: 'Be Vietnam Pro', Arial, 'Helvetica Neue', Helvetica, sans-serif;
  font-family: var(--font-body);
}

.trinity-lang-vi h1,
.trinity-lang-vi h2,
.trinity-lang-vi h3,
.trinity-lang-vi h4,
.trinity-lang-vi .eyebrow,
.trinity-lang-vi .btn,
.trinity-lang-vi .nav,
.trinity-lang-vi .language-switcher{
  font-family: var(--font-display);
}

.trinity-lang-vi h1,
.trinity-lang-vi h2{
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.trinity-lang-vi h3,
.trinity-lang-vi h4{
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.012em;
}

/* Vietnamese hero copy is naturally longer and its stacked diacritics need
   additional vertical room. */
.trinity-lang-vi .wp-block-group.is-style-trinity-split-hero h1,
.trinity-lang-vi .wp-block-group.trinity-split-hero h1,
.trinity-lang-vi .wp-block-group.split-hero h1{
  max-width: 650px !important;
  font-family: 'Be Vietnam Pro', Arial, 'Helvetica Neue', Helvetica, sans-serif !important;
  font-size: clamp(46px, 3.55vw, 66px) !important;
  font-weight: 800 !important;
  line-height: 1.085 !important;
  letter-spacing: -0.032em !important;
  text-wrap: pretty;
}

.trinity-lang-vi .wp-block-group.is-style-trinity-split-hero p,
.trinity-lang-vi .wp-block-group.trinity-split-hero p,
.trinity-lang-vi .wp-block-group.split-hero p{
  font-family: 'Be Vietnam Pro', Arial, 'Helvetica Neue', Helvetica, sans-serif !important;
  font-size: clamp(17px, 1.15vw, 20px) !important;
  line-height: 1.65 !important;
}

@media (max-width: 980px){
  .trinity-lang-vi .wp-block-group.is-style-trinity-split-hero h1,
  .trinity-lang-vi .wp-block-group.trinity-split-hero h1,
  .trinity-lang-vi .wp-block-group.split-hero h1{
    max-width: 720px !important;
    font-size: clamp(40px, 8.7vw, 58px) !important;
    line-height: 1.1 !important;
  }
}

@media (max-width: 520px){
  .trinity-lang-vi .wp-block-group.is-style-trinity-split-hero h1,
  .trinity-lang-vi .wp-block-group.trinity-split-hero h1,
  .trinity-lang-vi .wp-block-group.split-hero h1{
    font-size: clamp(36px, 10.2vw, 48px) !important;
    letter-spacing: -0.025em !important;
  }
}

/* --------------------------------------------------------------------------
   Version 8: larger editorial typography

   Section headings use 37px, supporting copy uses 19px and the uppercase
   labels above headings use 18px. The hero remains on its own display scale.
   -------------------------------------------------------------------------- */
body{
  font-size: 19px;
  line-height: 1.68;
}

h2,
h2.wp-block-heading{
  font-size: 37px !important;
  line-height: 1.14;
  letter-spacing: -0.025em;
}

h3,
h3.wp-block-heading{
  font-size: 25px;
  line-height: 1.22;
}

.eyebrow{
  margin-bottom: 16px;
  font-size: 18px !important;
  line-height: 1.3;
  letter-spacing: 0.1em;
}

.trinity-lead,
.trinity-emphasis,
.diff-card__body,
.service-card p:not(.service-card__number),
.service-detail p,
.problem-section p:not(.eyebrow),
.trinity-explainer-section p:not(.eyebrow),
.timeline__step > p:not(.timeline__marker){
  font-size: 19px;
  line-height: 1.65;
}

.diff-card--explain .diff-card__label,
.service-card h3,
.timeline__step h3{
  font-size: 25px;
  line-height: 1.22;
}

.trinity-lang-vi h2,
.trinity-lang-vi h2.wp-block-heading{
  font-size: 37px !important;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.trinity-lang-vi .eyebrow{
  font-size: 18px !important;
  line-height: 1.35;
  letter-spacing: 0.08em;
}

.trinity-lang-vi .trinity-lead,
.trinity-lang-vi .trinity-emphasis,
.trinity-lang-vi .diff-card__body,
.trinity-lang-vi .service-card p:not(.service-card__number),
.trinity-lang-vi .service-detail p,
.trinity-lang-vi .problem-section p:not(.eyebrow),
.trinity-lang-vi .trinity-explainer-section p:not(.eyebrow),
.trinity-lang-vi .timeline__step > p:not(.timeline__marker){
  font-size: 19px;
  line-height: 1.72;
}

@media (max-width: 600px){
  h2,
  h2.wp-block-heading,
  .trinity-lang-vi h2,
  .trinity-lang-vi h2.wp-block-heading{
    font-size: 37px !important;
  }

  .eyebrow,
  .trinity-lang-vi .eyebrow{
    font-size: 18px !important;
  }
}


/* Narrative copy in theme components follows the 19px body scale too.
   Small metadata labels and navigation remain intentionally smaller. */
.founder-full__bio p,
.tcard__pull,
.overlay__body p,
.article-content p,
.article-content li,
.testimonial__quote,
.testimonial--dark > p{
  font-size: 19px;
  line-height: 1.68;
}

.trinity-lang-vi .founder-full__bio p,
.trinity-lang-vi .tcard__pull,
.trinity-lang-vi .overlay__body p,
.trinity-lang-vi .article-content p,
.trinity-lang-vi .article-content li,
.trinity-lang-vi .testimonial__quote,
.trinity-lang-vi .testimonial--dark > p{
  font-size: 19px;
  line-height: 1.72;
}

/* --------------------------------------------------------------------------
   Version 9: image-led Services and Process pages
   -------------------------------------------------------------------------- */

/* Services hero: editorial split rather than a wall of introductory copy. */
.trinity-services-hero-v9{
  background: var(--cream);
  padding: clamp(64px, 8vw, 112px) 0;
  overflow: hidden;
}
.trinity-services-hero-v9__grid{
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(420px, 1.12fr);
  gap: clamp(44px, 7vw, 92px);
  align-items: center;
}
.trinity-services-hero-v9__copy{
  max-width: 570px;
}
.trinity-services-hero-v9__copy h1{
  max-width: 12ch;
  margin-bottom: 24px;
  font-size: clamp(46px, 5vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.04em;
}
.trinity-services-hero-v9__copy .trinity-lead{
  max-width: 34ch;
  margin-bottom: 0;
}
.trinity-services-hero-v9__figure{
  position: relative;
  width: 100%;
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid rgba(50,34,26,0.12);
  border-radius: var(--radius);
  box-shadow: 18px 18px 0 rgba(163,192,172,0.32);
}
.trinity-services-hero-v9__figure img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Compact service descriptions in an intentional 3 by 2 composition. */
.trinity-services-body-v9{
  background: #F4ECDF;
}
.trinity-services-body-v9__intro{
  max-width: 760px;
  margin-bottom: 42px;
}
.trinity-services-body-v9__intro .trinity-lead{
  max-width: 48ch;
  margin-bottom: 0;
}
.trinity-services-grid-v9{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.trinity-service-card-v9{
  position: relative;
  min-width: 0;
  min-height: 238px;
  padding: 30px 28px 28px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(50,34,26,0.11);
  border-top: 3px solid var(--sage-deep);
  border-radius: var(--radius);
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}
.trinity-service-card-v9:hover{
  transform: translateY(-3px);
  background: var(--white);
  border-color: rgba(50,34,26,0.18);
}
.trinity-service-card-v9__number{
  margin: 0 0 22px;
  color: var(--sage-deep);
  font-size: 14px !important;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.13em;
}
.trinity-service-card-v9 h3{
  max-width: 19ch;
  margin-bottom: 14px;
  font-size: 25px;
  line-height: 1.18;
}
.trinity-service-card-v9 > p:last-child{
  margin-bottom: 0;
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.58;
}

/* A second campus photograph adds visual rhythm to the Process page. */
.trinity-process-visual-v9{
  overflow: hidden;
}
.trinity-process-visual-v9__grid{
  display: grid;
  grid-template-columns: minmax(260px, 0.68fr) minmax(0, 1.32fr);
  gap: clamp(48px, 8vw, 108px);
  align-items: center;
}
.trinity-process-visual-v9__figure{
  width: min(100%, 410px);
  margin: 0;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border: 1px solid rgba(50,34,26,0.12);
  border-radius: var(--radius);
  box-shadow: 16px 16px 0 rgba(144,161,123,0.28);
}
.trinity-process-visual-v9__figure img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.trinity-process-visual-v9__copy{
  max-width: 620px;
}
.trinity-process-visual-v9__copy .trinity-lead{
  max-width: 47ch;
  margin-bottom: 0;
}

/* Testimonial dialogs sit inside dark Results sections. Explicit colours stop
   the student's name and story from inheriting the pale section colour. */
.overlay__card{
  color: var(--espresso) !important;
  border-top: 5px solid var(--sage);
}
.overlay__name{
  color: var(--espresso) !important;
}
.overlay__school{
  color: var(--ink-soft) !important;
}
.overlay__mentor{
  color: var(--sage-deep) !important;
}
.overlay__body,
.overlay__body p{
  color: var(--ink-soft) !important;
}

@media (max-width: 980px){
  .trinity-services-hero-v9__grid{
    grid-template-columns: minmax(0, 0.9fr) minmax(340px, 1.1fr);
    gap: 42px;
  }
  .trinity-services-grid-v9{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px){
  .trinity-services-hero-v9{
    padding: 58px 0 76px;
  }
  .trinity-services-hero-v9__grid,
  .trinity-process-visual-v9__grid{
    grid-template-columns: 1fr;
  }
  .trinity-services-hero-v9__copy h1{
    max-width: 14ch;
    font-size: clamp(42px, 11vw, 58px);
  }
  .trinity-services-hero-v9__figure{
    aspect-ratio: 4 / 3;
    box-shadow: 12px 12px 0 rgba(163,192,172,0.32);
  }
  .trinity-process-visual-v9__figure{
    width: min(82vw, 390px);
    justify-self: center;
    box-shadow: 12px 12px 0 rgba(144,161,123,0.28);
  }
}

@media (max-width: 620px){
  .trinity-services-grid-v9{
    grid-template-columns: 1fr;
  }
  .trinity-service-card-v9{
    min-height: 0;
    padding: 27px 24px 25px;
  }
}

/* --------------------------------------------------------------------------
   Version 9.2: bolder, image-led homepage hero (+ 9.1 polish)

   The homepage opened flat — centred text on cream while the rest of the site
   used photography and dark, cinematic bands. This makes the hero image-led:
   a full-bleed campus photograph under an espresso scrim, with the headline
   and call to action in cream. Same palette, same type, same content — the
   hero simply reaches the conviction the results and CTA sections already had.
   Everything below the hero keeps the 9.1 polish (button depth, card lift,
   nav hover, reveal easing). Scoped so nothing outside the homepage moves.

   The photograph lives at assets/images/campus/hero.jpg — swap that one file
   to change the image; nothing else references it.
   -------------------------------------------------------------------------- */

.hero--home{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(128px, 24vh, 232px) 0 clamp(104px, 17vh, 184px);
  background: var(--forest);          /* fallback while the photo loads */
}
/* The existing empty .hero--home__bg layer now carries the photograph and its
   scrim, so no page markup has to change for the image to appear. */
.hero--home__bg{
  z-index: 0;
  opacity: 1;
  background-image:
    linear-gradient(180deg, rgba(28,20,14,0.74) 0%, rgba(37,60,45,0.40) 44%, rgba(28,20,14,0.72) 100%),
    radial-gradient(112% 80% at 50% 42%, rgba(28,20,14,0) 28%, rgba(28,20,14,0.44) 100%),
    url('assets/images/campus/hero.jpg');
  background-size: cover, cover, cover;
  background-position: center, center, center 38%;
  background-repeat: no-repeat;
}
.hero--home > .container{
  position: relative;
  z-index: 1;
}
.hero--home h1{
  max-width: 20ch;
  margin-left: auto;
  margin-right: auto;
  color: var(--cream);
  font-size: clamp(2.6rem, 5.6vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
  text-shadow: 0 2px 34px rgba(20,14,10,0.45);
}
.hero--home .trinity-lead{
  margin-top: 12px;
  color: rgba(253,245,235,0.92);
  font-size: clamp(1.08rem, 1.45vw, 1.25rem);
  text-shadow: 0 1px 22px rgba(20,14,10,0.4);
}
/* A cream call to action carries authority on the darkened photograph. */
.hero--home .trinity-button-primary .wp-block-button__link,
.hero--home .btn-primary{
  background: var(--cream);
  color: var(--espresso);
}
.hero--home .trinity-button-primary .wp-block-button__link:hover,
.hero--home .btn-primary:hover{
  background: #FFFFFF;
  box-shadow: 0 16px 34px rgba(20,14,10,0.42);
}
@media (max-width: 640px){
  .hero--home{ padding: clamp(96px, 20vh, 150px) 0 clamp(80px, 14vh, 120px); }
}

/* Calls to action — still restrained, but with a real, tactile response:
   a soft warm shadow and a 2px rise on an eased curve, not a flat colour swap. */
.btn-primary,
.btn-moss,
.trinity-button-primary .wp-block-button__link,
.trinity-button-moss .wp-block-button__link{
  transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.2, 1),
              background 0.18s ease,
              box-shadow 0.18s ease;
}
.btn-primary:hover,
.trinity-button-primary .wp-block-button__link:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(50, 34, 26, 0.18);
}
.btn-moss:hover,
.trinity-button-moss .wp-block-button__link:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(144, 161, 123, 0.34);
}

/* The dark home results cards should lift on hover like every other .tcard,
   for consistent interaction language across the site. */
.trinity-results-widget--home .tcard{
  transition: transform 0.18s ease, background 0.18s ease;
}
.trinity-results-widget--home .tcard:hover{
  transform: translateY(-2px);
}

/* Navigation links shift colour on hover instead of the browser's default
   underline — quieter and more in keeping with the editorial voice. */
.nav__links a:hover{
  text-decoration: none;
  color: var(--forest);
}

/* Reveal — keep the single, calm entrance, but on a proper exponential
   ease-out with a touch more travel so it reads as intentional, not linear. */
.js .reveal{
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Respect reduced-motion for every interaction the polish introduces. */
@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity: 1; transform: none; transition: none; }
  .btn-primary:hover,
  .btn-moss:hover,
  .trinity-button-primary .wp-block-button__link:hover,
  .trinity-button-moss .wp-block-button__link:hover,
  .trinity-results-widget--home .tcard:hover{ transform: none; }
}

/* --------------------------------------------------------------------------
   Version 9.3: interior-page polish

   Refinement only — same cream/editorial world, same content, same identity.
   Raises the About, Process, Results, Services, Resources, Contact and Privacy
   pages to the homepage's finish: a considered page-header rhythm, consistent
   card interaction, crisper founder and resource cards, and a more generous
   contact form. The 9.1 global polish (button depth, nav hover, card lift,
   reveal easing) already applies to all of these pages; this adds the
   page-specific craft. Every rule is scoped to interior-page components.
   -------------------------------------------------------------------------- */

/* Interior page header — give eyebrow → heading → lead a confident, consistent
   rhythm across every interior page, and cap the heading measure so it balances
   instead of running the full container width. */
.trinity-section-header{
  padding-top: clamp(64px, 8vh, 108px);
  padding-bottom: clamp(26px, 3.2vh, 40px);
}
.trinity-section-header h1{
  max-width: 22ch;
  margin-bottom: 0;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.trinity-section-header.trinity-center h1{
  margin-left: auto;
  margin-right: auto;
}
.trinity-section-header .trinity-lead{
  margin-top: 18px;
  margin-bottom: 0;
}
.trinity-section-after-header{
  padding-top: clamp(28px, 3.6vh, 44px);
}

/* Founder cards (About) — tighten the name and give the in-text consultation
   link a real affordance instead of a default underline. */
.founder-full__name{
  letter-spacing: -0.015em;
}
.founder-full__bio a{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--forest);
}
.founder-full__bio a:hover{
  text-decoration: none;
  color: var(--espresso);
}

/* Resource cards — the same quiet lift the testimonial cards use, plus a gentle
   image push, so the blog index feels as considered as the rest of the site. */
.resource-card{
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.resource-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 2px 6px rgba(50, 34, 26, 0.1), 0 10px 28px rgba(50, 34, 26, 0.12);
}
.resource-card__image img{
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.resource-card:hover .resource-card__image img{
  transform: scale(1.03);
}
.resource-card__link:hover{
  text-decoration: none;
  color: var(--espresso);
}

/* Contact form — a more generous, legible field rhythm and a clearer label
   voice. The submit is already .btn-primary and inherits the 9.1 hover depth. */
.trinity-form__field{
  margin-bottom: 18px;
}
.trinity-form label{
  font-size: 0.9rem;
  color: var(--ink);
  margin-bottom: 7px;
}
.trinity-form input,
.trinity-form select,
.trinity-form textarea{
  padding: 13px 14px;
}
.trinity-form button[type="submit"]{
  margin-top: 4px;
}

/* Reduced-motion: no image push on resource cards. */
@media (prefers-reduced-motion: reduce){
  .resource-card:hover{ transform: none; }
  .resource-card:hover .resource-card__image img{ transform: none; }
}

/* --------------------------------------------------------------------------
   Version 9.4: Services & Process polish

   Refinement only — same v9 image-led layouts, same content. Two things:
   (1) the campus figures kept a hard, zero-blur offset block behind them,
   which reads a little like a flat sticker in this refined world; this keeps
   the same sage/moss offset gesture but tucks it and adds a soft, warm drop so
   it reads as crafted depth (in line with the system's warm ambient shadows).
   (2) the service cards changed on hover without the soft lift the rest of the
   site's cards have; this adds it. Scoped to the v9 Services/Process blocks.
   -------------------------------------------------------------------------- */

/* Services hero figure — keep the sage offset, tuck it, add a warm ambient drop. */
.trinity-services-hero-v9__figure{
  box-shadow:
    18px 18px 0 -2px rgba(163, 192, 172, 0.38),
    22px 26px 46px -18px rgba(50, 34, 26, 0.30);
}
/* Process visual figure — same treatment in its moss key. */
.trinity-process-visual-v9__figure{
  box-shadow:
    16px 16px 0 -2px rgba(144, 161, 123, 0.34),
    20px 24px 42px -18px rgba(50, 34, 26, 0.28);
}

/* Service cards — add the site's soft ambient lift on hover, alongside the
   existing rise and fill, so interaction depth matches every other card. */
.trinity-service-card-v9{
  transition: transform 180ms ease, background 180ms ease,
              border-color 180ms ease, box-shadow 180ms ease;
}
.trinity-service-card-v9:hover{
  box-shadow: 0 2px 6px rgba(50, 34, 26, 0.08), 0 12px 28px rgba(50, 34, 26, 0.12);
}

@media (prefers-reduced-motion: reduce){
  .trinity-service-card-v9:hover{ transform: none; }
}

/* --------------------------------------------------------------------------
   Version 9.5: full-bleed chapel homepage hero (targets .split-hero)

   The live homepage is built as a custom ".split-hero" block (headline left,
   chapel photo right). This turns that same markup into a single full-bleed
   stage: the chapel photograph fills the hero, a warm espresso scrim keeps the
   copy legible, and the headline + call to action sit centred in cream on top.

   Selectors are high-specificity + !important so this reliably overrides both
   the theme's earlier "version 3" split-hero rules and any matching rules in
   Appearance > Customize > Additional CSS. Because .split-hero already exists
   in the homepage content, no page edit is needed — this lands on upload.
   The photo is the image already placed in the hero's second column.
   -------------------------------------------------------------------------- */

/* Remove the older cream veil + wave motif on the split hero. */
.wp-block-group.split-hero::before,
.wp-block-group.split-hero::after{ display: none !important; }

/* Hero becomes one full-bleed stage. */
.wp-block-group.split-hero{
  position: relative !important;
  overflow: hidden !important;
  background: #253C2D !important;
}
.wp-block-group.split-hero > .wp-block-columns.split-hero__columns{
  position: relative !important;
  display: flex !important;
  align-items: center !important;      /* vertically centre the copy in the stage */
  justify-content: center !important;
  min-height: clamp(600px, 82vh, 820px) !important;
  margin: 0 !important;
}

/* The chapel photo fills the whole hero as the background. */
.wp-block-group.split-hero > .wp-block-columns > .wp-block-column.split-hero__media{
  position: absolute !important;
  inset: 0 !important;
  flex-basis: auto !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  z-index: 0 !important;
  overflow: hidden !important;
}
.wp-block-group.split-hero .split-hero__media .wp-block-image,
.wp-block-group.split-hero .split-hero__media figure{
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}
.wp-block-group.split-hero > .wp-block-columns > .wp-block-column.split-hero__media img{
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center 38% !important;
  border-radius: 0 !important;
}

/* Warm scrim so cream text stays readable over the photograph. */
.wp-block-group.split-hero .split-hero__media::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(28,20,14,0.74) 0%, rgba(37,60,45,0.40) 45%, rgba(28,20,14,0.72) 100%),
    radial-gradient(120% 80% at 50% 42%, rgba(28,20,14,0) 30%, rgba(28,20,14,0.42) 100%) !important;
}

/* Headline + copy sit centred, above the photo, in cream. */
.wp-block-group.split-hero > .wp-block-columns > .wp-block-column.split-hero__text-column{
  position: relative !important;
  z-index: 2 !important;
  flex-basis: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  align-items: center !important;
  justify-content: center !important;
}
.wp-block-group.split-hero .split-hero__copy{
  max-width: 820px !important;
  margin: 0 auto !important;
  padding: 40px 24px !important;      /* the flex stage centres it; this is just breathing room */
  text-align: center !important;
}
.wp-block-group.split-hero .split-hero__copy h1.wp-block-heading{
  max-width: 20ch !important;
  margin: 0 auto 20px !important;
  color: #FDF5EB !important;
  text-align: center !important;
  font-size: clamp(2.6rem, 5.6vw, 4.4rem) !important;
  line-height: 1.03 !important;
  letter-spacing: -0.03em !important;
  text-wrap: balance !important;
  text-shadow: 0 2px 34px rgba(20,14,10,0.45) !important;
}
.wp-block-group.split-hero .split-hero__copy p.wp-block-paragraph{
  max-width: 52ch !important;
  margin: 0 auto 12px !important;
  color: rgba(253,245,235,0.92) !important;
  text-align: center !important;
  text-shadow: 0 1px 22px rgba(20,14,10,0.4) !important;
}
.wp-block-group.split-hero .split-hero__copy .wp-block-buttons{
  justify-content: center !important;
  margin-top: 20px !important;
}
/* Cream call to action reads with authority on the darkened photo. */
.wp-block-group.split-hero .split-hero__copy .trinity-button-primary .wp-block-button__link{
  background: #FDF5EB !important;
  color: #32221A !important;
}

@media (max-width: 800px){
  .wp-block-group.split-hero > .wp-block-columns.split-hero__columns{
    min-height: clamp(520px, 82vh, 680px) !important;
  }
  .wp-block-group.split-hero .split-hero__copy{
    padding: 40px 22px !important;
  }
}

/* --------------------------------------------------------------------------
   Version 9.6: Resources thumbnails fallback

   The Resources shortcode now always renders a card image: the post's featured
   image when set, otherwise a rotating campus photograph so the grid never
   shows a card with a missing thumbnail. This styles that fallback element.
   -------------------------------------------------------------------------- */
.resource-card__image--fallback{
  display: block;
  background-color: #EDE3D2;
  background-size: cover;
  background-position: center;
}

/* In-page anchor links (e.g. the About dropdown jumping to #founders /
   #process / #results) must clear the sticky navigation so the target
   heading isn't hidden underneath it. */
.site-main [id]{
  scroll-margin-top: clamp(84px, 12vh, 112px);
}
.admin-bar .site-main [id]{
  scroll-margin-top: clamp(116px, 12vh, 144px);
}

/* --------------------------------------------------------------------------
   Version 10: bilingual Why Trinity consistency
   -------------------------------------------------------------------------- */
.trinity-why-section-v10{
  position: relative !important;
  isolation: isolate;
  overflow: hidden !important;
  width: 100% !important;
}

.trinity-why-section-v10 > .problem-section__bg{
  position: absolute !important;
  inset: 0 !important;
  z-index: 0;
  width: 100% !important;
  max-width: none !important;
  min-height: 100% !important;
  margin: 0 !important;
  background-image: url('assets/images/pattern/pattern-2.jpg');
  background-size: 700px;
  background-repeat: repeat;
  opacity: 0.05;
  pointer-events: none;
}

.trinity-why-section-v10 > .trinity-why-section-v10__inner{
  position: relative;
  z-index: 1;
  width: min(calc(100% - 48px), 900px) !important;
  max-width: 900px !important;
  margin-right: auto !important;
  margin-left: auto !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  text-align: center !important;
}

.trinity-why-section-v10 .eyebrow{
  display: block !important;
  margin: 0 auto 14px !important;
  font-size: 18px !important;
  line-height: 1.3 !important;
  text-align: center !important;
}

.trinity-why-section-v10 h2.wp-block-heading{
  max-width: 850px !important;
  margin: 0 auto 26px !important;
  font-size: 37px !important;
  line-height: 1.14 !important;
  text-align: center !important;
  text-wrap: balance;
}

.trinity-why-section-v10 .trinity-lead{
  max-width: 880px !important;
  margin: 0 auto 24px !important;
  font-size: 19px !important;
  line-height: 1.65 !important;
  text-align: center !important;
}

.trinity-why-section-v10 .trinity-emphasis{
  max-width: 800px !important;
  margin: 28px auto 0 !important;
  font-size: 19px !important;
  line-height: 1.5 !important;
  text-align: center !important;
}

.trinity-lang-vi .trinity-why-section-v10 .trinity-lead{
  line-height: 1.72 !important;
}

@media (max-width: 700px){
  .trinity-why-section-v10{
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  .trinity-why-section-v10 > .trinity-why-section-v10__inner{
    width: min(calc(100% - 40px), 900px) !important;
  }

  .trinity-why-section-v10 h2.wp-block-heading{
    font-size: 34px !important;
    line-height: 1.18 !important;
  }

  .trinity-why-section-v10 .trinity-lead,
  .trinity-why-section-v10 .trinity-emphasis{
    font-size: 18px !important;
  }
}

/* Keep the remaining homepage typography aligned between EN and VI even when
   older blocks still carry different inline font-size selections. */
.trinity-explainer-section .diff-card__label{
  font-size: 25px !important;
  line-height: 1.22 !important;
}
.trinity-explainer-section .diff-card__body,
.process-section .timeline__step > p:not(.timeline__marker),
.trinity-services-preview .trinity-lead,
.trinity-services-preview .service-card p:not(.service-card__number){
  font-size: 19px !important;
  line-height: 1.65 !important;
}
.trinity-lang-vi .trinity-explainer-section .diff-card__body,
.trinity-lang-vi .process-section .timeline__step > p:not(.timeline__marker),
.trinity-lang-vi .trinity-services-preview .trinity-lead,
.trinity-lang-vi .trinity-services-preview .service-card p:not(.service-card__number){
  line-height: 1.72 !important;
}

/* --------------------------------------------------------------------------
   Version 10.1: bilingual homepage typography parity

   WordPress preset font-size classes and old inline block settings differed
   between the English and Vietnamese homepages. These rules make the shared
   homepage sections obey one hierarchy in both languages without replacing
   their wording or block order.
   -------------------------------------------------------------------------- */
.trinity-explainer-section .diff-card__label,
.process-section .timeline__step h3,
.trinity-services-preview .service-card h3{
  font-size: 25px !important;
  line-height: 1.22 !important;
}

.trinity-explainer-section .diff-card__body,
.process-section .timeline__step > p:not(.timeline__marker),
.trinity-services-preview .trinity-lead,
.trinity-services-preview .service-card p:not(.service-card__number),
.cta-band .trinity-center-block{
  font-size: 19px !important;
  line-height: 1.68 !important;
}

.trinity-explainer-section h2.wp-block-heading,
.process-section h2.wp-block-heading,
.trinity-services-preview h2.wp-block-heading,
.cta-band h2.wp-block-heading{
  font-size: 37px !important;
  line-height: 1.16 !important;
  text-wrap: balance;
}

.trinity-lang-vi .trinity-explainer-section .diff-card__body,
.trinity-lang-vi .process-section .timeline__step > p:not(.timeline__marker),
.trinity-lang-vi .trinity-services-preview .trinity-lead,
.trinity-lang-vi .trinity-services-preview .service-card p:not(.service-card__number),
.trinity-lang-vi .cta-band .trinity-center-block{
  line-height: 1.72 !important;
}

@media (max-width: 700px){
  .trinity-explainer-section h2.wp-block-heading,
  .process-section h2.wp-block-heading,
  .trinity-services-preview h2.wp-block-heading,
  .cta-band h2.wp-block-heading{
    font-size: 34px !important;
    line-height: 1.18 !important;
  }

  .trinity-explainer-section .diff-card__label,
  .process-section .timeline__step h3,
  .trinity-services-preview .service-card h3{
    font-size: 23px !important;
  }
}