/**
 * "The World Is Your Stage" builder blocks — page-scoped styles.
 * Loaded only on pages that use a twiys_* layout (see lib/twiys.php).
 * The global main.min.css is never touched.
 *
 * TYPOGRAPHY (measured from the R5 design):
 *   Display / headings ...... Poppins  600 / 700   (enqueued page-scoped)
 *   Body / labels / italics . Open Sans 300 / 400 / 700 + italics (theme global)
 *
 *   Scale is anchored on an 18px body (design hero cap is ~4x the body cap):
 *     hero h1 ~72 · accommodations ~54 · faculty ~40 · panel Q ~26
 *     hero-sub ~30 · quote ~30 · tuition head ~20 · labels ~14
 *     body 18 · panel/small body 16 · policy body 16
 *   Accent gold #b4762c · light gold #f7cb66 · ink #2b2b2b
 *
 *   Sizes are scoped to .twiys-* content classes ONLY (never the page <body>),
 *   so the theme header/footer typography on this page is left untouched.
 */

.twiys-landing-body {
  --twiys-display: "Poppins", "Century Gothic", "Trebuchet MS", sans-serif;
  --twiys-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --twiys-gold: #b4762c;
  --twiys-gold-lt: #f7cb66;
  --twiys-ink: #2b2b2b;
  /* How far a feature image rises into the section above it. The section above
     reserves this same amount as bottom padding so the image never lands on the
     text (see the :has() rule under FEATURE BAND). A fixed estimate, not JS. */
  --twiys-overlap: 140px;
  --twiys-header-h: 68px; /* height of the theme's fixed header */
}
body.twiys-landing-body { overflow-x: hidden; }
.twiys-landing-body .page-banner-image { display: none !important; }

/* ================= LAYOUT NORMALIZATION (page-scoped) =================
 * The theme header is position:fixed and the theme pulls .content up 94px (a
 * rule meant for the banner image, which this page hides). That drags the hero
 * up under the header. We cancel that pull here. Whether the hero then sits
 * clear of the header (desktop) is controlled by the Hero's "keep clear of the
 * fixed header" toggle, which adds .twiys-hero--offset (see HERO below). On
 * mobile there is no offset, so the hero has no padding at the very top.
 */
.twiys-landing-body .content { margin-top: 0; }
.twiys-landing-body .wrap { margin-top: 0; padding-top: 0; }

/* Every section is normalized to ONE content measure (1170 / 30px gutters),
 * so hero, intro, feature and bio all share the same left edge. Hero and
 * feature inners already use this; the intro and bio use a Bootstrap .container
 * (narrower + differently offset), so re-base those here. */
.twiys-landing-body .twiys-intro-section > .container,
.twiys-landing-body .twiys-bio > .container {
  width: 100%; max-width: 1170px; margin-left: auto; margin-right: auto;
  padding-left: 30px; padding-right: 30px;
}
/* Let the pricing panel use the space on the right (the notes re-inset below). */
.twiys-landing-body .twiys-intro-section > .container { padding-right: 0; }

/* full-bleed breakout (hero + feature band) */
.twiys-landing-body .twiys-hero,
.twiys-landing-body .twiys-feature--fullbleed {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ================= HERO (image + overlay text) ================= */
.twiys-landing-body .twiys-hero { display: flex; align-items: center; overflow: hidden; background: #14161c; }
/* "Keep clear of the fixed header" toggle — desktop only. content-box makes the
   reserved header height ADD to the hero rather than eat into its content. The
   compound selector outranks the theme's `.page-custom-content > section:first-child
   { padding-top: 0 }` in main.min.css. */
@media (min-width: 768px) {
  .twiys-landing-body .twiys-hero.twiys-hero--offset { box-sizing: content-box; padding-top: var(--twiys-header-h); }
}
.twiys-landing-body .twiys-hero__media { position: absolute; inset: 0; z-index: 0; }
.twiys-landing-body .twiys-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.twiys-landing-body .twiys-hero__bg--mobile { display: none; }
.twiys-landing-body .twiys-hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, #000 0%, #000 30%, rgba(0,0,0,.55) 46%, rgba(0,0,0,0) 72%);
}
.twiys-landing-body .twiys-hero__inner { position: relative; z-index: 2; width: 100%; max-width: 1170px; margin: 0 auto; padding: 48px 30px; }
.twiys-landing-body .twiys-hero--center .twiys-hero__inner { text-align: center; }
.twiys-landing-body .twiys-hero--center .twiys-hero__scrim { background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.6)); }

.twiys-landing-body .twiys-eyebrow {
  font-family: var(--twiys-display); text-transform: uppercase; letter-spacing: .2em;
  font-weight: 600; font-size: 14px; margin: 0 0 18px;
}
.twiys-landing-body .twiys-hero__title {
  font-family: var(--twiys-display); text-transform: uppercase; font-weight: 700;
  font-size: clamp(46px, 6vw, 76px); line-height: .92; letter-spacing: .01em;
  margin: 0 0 22px; max-width: 8em;
}
.twiys-landing-body .twiys-hero__sub {
  font-family: var(--twiys-body); font-weight: 300;
  font-size: clamp(20px, 2.3vw, 30px); line-height: 1.25; margin: 0; max-width: 50%;
}
.twiys-landing-body .twiys-hero__sub em { font-style: italic; }

/* ================= INTRO + PRICING PANEL ================= */
.twiys-landing-body .twiys-intro-section { padding: 0 0; }
.twiys-landing-body .twiys-intro { display: flex; gap: 60px; align-items: flex-start; padding: 0 0 12px; }
.twiys-landing-body .twiys-intro__main { flex: 1 1 60%; min-width: 0; padding: 54px 0 0; }
.twiys-landing-body .twiys-intro__side { flex: 0 0 34%; }

/* body copy (design body ~= 18/1.6) */
.twiys-landing-body .twiys-intro__main { font-family: var(--twiys-body); font-size: 18px; line-height: 1.6; color: var(--twiys-ink); }
.twiys-landing-body .twiys-intro__main p { font-weight: 500; line-height: 1.3; margin: 0 0 18px; }
/* Reserve room for an overlapping feature image that follows this section, so
   the image lands on empty space instead of the last paragraph. Only applies
   when the very next section is a feature with overlap enabled. */
.twiys-landing-body .twiys-intro-section:has(+ .twiys-feature--has-overlap) .twiys-intro__main {
  padding-bottom: var(--twiys-overlap);
}

.twiys-landing-body p.eyebrow {
  font-family: var(--twiys-body); color: var(--twiys-gold); text-transform: uppercase;
  letter-spacing: .06em; font-weight: 700; font-size: 14px; margin: 0 0 6px;
}
/* .lead: explicit props neutralize Bootstrap's global .lead on this page */
.twiys-landing-body .lead { font-size: 18px; font-weight: 400; line-height: 1.5; margin: 0 0 30px; }
.twiys-landing-body .lead strong { font-weight: 700; }
.twiys-landing-body .inset { padding-left: 40px; margin: 0 0 4px; }
.twiys-landing-body .inset p { margin: 0 0 16px; }
.twiys-landing-body p.pull-quote {
  font-family: var(--twiys-body); color: var(--twiys-gold); font-style: italic; font-weight: 600;
  font-size: clamp(24px, 3.4vw, 31px); line-height: 1.3;
  border-top: 1px solid #d8b483; border-bottom: 1px solid #d8b483; padding: 26px 0; margin: 30px 0 60px;;
}

/* pricing / subscriber panel */
.twiys-landing-body .twiys-tuition { padding: 46px 34px 34px; font-family: var(--twiys-body); font-size: 16px; line-height: 1.45; }
.twiys-landing-body .twiys-tuition h2, .twiys-landing-body .twiys-tuition h3 { color: inherit; }
.twiys-landing-body .twiys-tuition__q {
  font-family: var(--twiys-display); text-transform: uppercase; font-weight: 700;
  font-size: clamp(22px, 2.2vw, 26px); line-height: 1.05; letter-spacing: .005em; margin: 0 0 10px;
}
.twiys-landing-body .twiys-tuition__save {
  font-family: var(--twiys-body); color: var(--twiys-gold-lt); font-style: italic; font-weight: 600;
  font-size: 16px; line-height: 1.25; margin: 0 0 22px;
}
.twiys-landing-body .twiys-tuition h3 {
  font-family: var(--twiys-display); text-transform: uppercase; font-weight: 700;
  font-size: clamp(22px, 2.2vw, 26px); letter-spacing: .01em; line-height: 1.1; margin: 26px 0 8px;
}
.twiys-landing-body .twiys-tuition p { margin: 0 0 6px; }
.twiys-landing-body .twiys-tuition ul { list-style: disc; margin: 6px 0 6px; padding-left: 20px; }
.twiys-landing-body .twiys-tuition li { margin: 0 0 8px; }
/* inline links inside the gold panel = white + underlined (per design) */
.twiys-landing-body .twiys-tuition a:not(.twiys-btn) { color: #fff; text-decoration: underline; }
.twiys-landing-body .twiys-tuition a:not(.twiys-btn):hover { text-decoration: none; }

.twiys-landing-body .twiys-btn {
  display: inline-block; background: #fff; color: var(--twiys-gold);
  font-family: var(--twiys-body); text-transform: uppercase; font-weight: 600; letter-spacing: .05em; font-size: 14px;
  padding: 5px 24px; text-decoration: none; border: 2px solid #fff; border-radius: 30px; margin: 14px 0; text-align: center;
}
.twiys-landing-body .twiys-btn:hover, .twiys-landing-body .twiys-btn:focus { background: transparent; color: inherit; text-decoration: none; }

/* notes + contact block below the panel (white bg) */
/* Notes sit below the panel, narrower than it: aligned with the panel's text on
   the left and inset from the right (matches the design). */
.twiys-landing-body .twiys-notes { padding: 22px 48px 0 34px; font-family: var(--twiys-body); }
.twiys-landing-body .twiys-notes p { font-size: 14px; font-weight: 500; line-height: 1.5; color: #555; margin: 0 0 14px; }
.twiys-landing-body .twiys-notes em, .twiys-landing-body .twiys-notes i { font-style: italic; }
.twiys-landing-body .twiys-notes strong, .twiys-landing-body .twiys-notes b { color: var(--twiys-gold); font-weight: 700; }

/* ================= FEATURE BAND ================= */
.twiys-landing-body .twiys-feature { position: relative; }
.twiys-landing-body .twiys-feature--has-overlap { z-index: 3; }
.twiys-landing-body .twiys-feature__band { position: relative; }
.twiys-landing-body .twiys-feature__inner { max-width: 1170px; margin: 0 auto; padding: 0 30px; display: flex; gap: 52px; align-items: center; }
.twiys-landing-body .twiys-feature--right .twiys-feature__inner { flex-direction: row-reverse; }
.twiys-landing-body .twiys-feature__media { flex: 0 0 45%; }
.twiys-landing-body .twiys-feature__media img { display: block; width: 100%; height: auto; }
.twiys-landing-body .twiys-feature__text { flex: 1 1 auto; }

/* --- Image overlap (pure CSS, fixed estimate) ---
 * The image rises --twiys-overlap into the section above. The image and title
 * are bottom-aligned, with the title sitting ~20px above the image's base. The
 * previous section reserves the same overlap as bottom padding on its left
 * column (the :has() rule under INTRO) so the image lands on empty space, never
 * on the text above. */
.twiys-landing-body .twiys-feature--has-overlap .twiys-feature__inner { align-items: flex-end; }
.twiys-landing-body .twiys-feature--has-overlap .twiys-feature__media {
  position: relative; z-index: 2; margin-top: calc(-1 * var(--twiys-overlap) - 40px);
}
.twiys-landing-body .twiys-feature--has-overlap .twiys-feature__text { margin-bottom: 20px; }
.twiys-landing-body .twiys-feature__text h2 {
  font-family: var(--twiys-display); font-weight: 600;
  font-size: clamp(34px, 4vw, 50px); line-height: 1.0; letter-spacing: .005em; margin: 0 0 12px; max-width: 8em;
}
.twiys-landing-body .twiys-feature__sub {
  font-family: var(--twiys-body); font-weight: 400; font-size: clamp(18px, 1.8vw, 22px); line-height: 1.3; margin: 0;
}
.twiys-landing-body .twiys-feature__body {
  max-width: 1170px; margin: 0 auto; padding: 36px 30px 6px;
  font-family: var(--twiys-body); font-size: 18px; line-height: 1.6;
}
.twiys-landing-body .twiys-feature__body p { line-height: 1.3; margin: 0 0 18px; }

/* ================= BIO / RICH SECTION ================= */
.twiys-landing-body .twiys-bio { padding: 46px 0 10px; font-family: var(--twiys-body); font-size: 18px; line-height: 1.6; color: var(--twiys-ink); }
.twiys-landing-body .twiys-heading-orange {
  font-family: var(--twiys-display); text-transform: uppercase; font-weight: 700;
  font-size: clamp(30px, 3.6vw, 42px); letter-spacing: .01em; line-height: 1.05; margin: 0 0 20px;
}
/* small section (e.g. cancellation policy): a tracked Open Sans label, NOT a display heading */
.twiys-landing-body .twiys-bio--small { margin-top: 10px; font-size: 16px; }
/* Rule above the heading: gold and only as wide as the content (not the full
   section width). Drawn on the container, inset to align with the text. */
.twiys-landing-body .twiys-bio--small > .container { position: relative; padding-top: 44px; }
.twiys-landing-body .twiys-bio--small > .container::before {
  content: ""; display: block; position: absolute; top: 0; left: 30px; right: 30px; height: 1px; background: #c49760;
}
.twiys-landing-body .twiys-bio--small .twiys-heading-orange {
  font-family: var(--twiys-body); font-weight: 500; font-size: 18px; letter-spacing: .09em; margin: 0 0 16px;
}
.twiys-landing-body .twiys-bio__photo--right { float: right; width: 400px; max-width: 46%; margin: 4px 0 20px 40px; }
.twiys-landing-body .twiys-bio__photo--left { float: left; width: 450px; max-width: 46%; margin: 4px 40px 20px 0; }
.twiys-landing-body .twiys-bio p { font-weight: 500; line-height: 1.3; margin: 0 0 16px; }
.twiys-landing-body .twiys-bio:after { content: ""; display: table; clear: both; }

/* ================= LINKS (body context, white bg) ================= */
/* per design: gold + bold, underline on hover only (e.g. "Cynthia Barnett") */
.twiys-landing-body .twiys-intro__main a,
.twiys-landing-body .twiys-notes a,
.twiys-landing-body .twiys-feature__body a,
.twiys-landing-body .twiys-bio a {
  color: var(--twiys-gold); font-weight: 700; text-decoration: none;
}
.twiys-landing-body .twiys-intro__main a:hover,
.twiys-landing-body .twiys-notes a:hover,
.twiys-landing-body .twiys-feature__body a:hover,
.twiys-landing-body .twiys-bio a:hover { color: var(--twiys-gold); text-decoration: underline; }

/* ================= RESPONSIVE ================= */
@media (min-width: 1025px) {
  .twiys-landing-body .twiys-feature__body {
        padding: 36px 100px 6px 30px;
  }
}

@media (max-width: 767px) {
  .twiys-landing-body .twiys-hero__bg--desktop { display: none; }
  .twiys-landing-body .twiys-hero__bg--mobile { display: block; }
  .twiys-landing-body .twiys-hero__scrim { background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.72) 100%) !important; }
  .twiys-landing-body .twiys-hero__sub { max-width: 100%; }

  /* Mobile stack: mobile image on top, text below on a solid background. */
  .twiys-landing-body .twiys-hero--mobile-stack { display: block; min-height: 0 !important; background: none; }
  .twiys-landing-body .twiys-hero--mobile-stack .twiys-hero__media { position: static; }
  .twiys-landing-body .twiys-hero--mobile-stack .twiys-hero__bg--mobile { position: static; width: 100%; height: auto; object-fit: initial; display: block; }
  .twiys-landing-body .twiys-hero--mobile-stack .twiys-hero__scrim { display: none; }
  .twiys-landing-body .twiys-hero--mobile-stack .twiys-hero__inner {
    position: static; background: var(--twiys-hero-mbg, #14161c); padding: 34px 24px 60px; max-width: none;
  }
  .twiys-landing-body .twiys-intro { flex-direction: column; gap: 30px; padding-top: 34px; }
  .twiys-landing-body .twiys-intro__main { padding-top: 0; padding-right: 30px;}
  /* no overlap when stacked, so drop the reserved space too */
  .twiys-landing-body .twiys-intro-section:has(+ .twiys-feature--has-overlap) .twiys-intro__main { padding-bottom: 0; }
  .twiys-landing-body .twiys-intro__side { flex-basis: auto; width: 100%; }
  .twiys-landing-body .twiys-feature__inner { flex-direction: column !important; text-align: center; }
  .twiys-landing-body .twiys-feature--has-overlap .twiys-feature__text { margin-bottom: 0; }
  .twiys-landing-body .twiys-feature__media { flex-basis: auto; width: 100%; margin-top: 0 !important; }
 .twiys-landing-body .twiys-feature--has-overlap .twiys-feature__text {
    text-align: left;
    width: 100%;
  }
  .twiys-landing-body .twiys-feature__text h2 {
    max-width: 100%;
  }
  .twiys-landing-body .twiys-bio__photo--right, .twiys-landing-body .twiys-bio__photo--left { float: none; display: block; margin: 0 auto 30px; max-width: 100%; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .twiys-landing-body .twiys-intro { gap: 30px; }
}