/*
Theme Name: Divi Child - Creation Talent Academy
Theme URI: https://www.creationtalentacademy.com
Description: Child theme for Creation Talent Academy. Adds the editorial design system (Marcellus + Ubuntu, monochrome palette, hairline borders) ported from the original site. Built to keep Divi Builder fully editable while delivering a consistent visual identity across the Theme Builder header/footer and every page.
Author: Creation Talent Academy
Author URI: https://www.creationtalentacademy.com
Template: Divi
Version: 1.1.2
License: GNU General Public License v2
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: divi-child-cta
*/

/* ========================================================================
   DESIGN TOKENS
   Ported from the summer-camp embed source. Use these everywhere in Divi:
     - Background:      #FFFFFF (--white), section tints #FAFAFA / #F5F5F5
     - Foreground:      #020202 (--ink), #222 (--charcoal)
     - Hairline border: #E6E6E6 (--hair)
     - Light gray hover #CFD3D6 (--mist)
     - Accent yellow:   #F5C518 (urgency / IMDb yellow)
   ======================================================================== */

:root {
    --ink:        #020202;
    --charcoal:   #222;
    --overlay:    rgba(2, 2, 2, .6);
    --white:      #ffffff;
    --mist:       #CFD3D6;
    --hair:       #E6E6E6;
    --logo:       #181818;
    --accent:     #F5C518;
    --tint-soft:  #FAFAFA;
    --tint-form:  #F5F5F5;
    --display:    'Marcellus', 'Cormorant Garamond', Georgia, serif;
    --ui:         'Ubuntu', 'Inter', -apple-system, Arial, sans-serif;
    --section-pad: clamp(64px, 9vw, 128px);
    --max:         1200px;
    --reading:     1080px;
    --gutter:      clamp(20px, 5vw, 40px);
    --call-bar-h: 64px;
}

/* ========================================================================
   GLOBAL TYPOGRAPHY DEFAULTS
   These set the *fallback* font + line-height for the whole site, but DO NOT
   set color. Letting color stay un-asserted is critical — it lets Divi's
   per-module color settings (header_text_color, body_text_color, the
   et_pb_bg_layout_dark class etc.) win without needing !important.
   ======================================================================== */

body,
body p,
body li,
body td,
body input,
body select,
body textarea,
body button {
    font-family: var(--ui);
    font-weight: 400;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Apply our display serif to every heading EXCEPT when it sits inside a Divi
   module that has set its own font (the module rule will already override
   ours because module CSS comes after — but we still want our fonts to win
   over Divi's defaults). */
body h1, body h2, body h3, body h4, body h5, body h6 {
    font-family: var(--display);
    font-weight: 400;
    line-height: 1.1;
}

/* Default heading colors *only when no other color is set* — Divi's per-
   instance CSS for h1-h6 inside et_pb_text uses !important so it always
   wins. This rule just colors raw site headings (e.g. the H1 in the Divi
   loop placeholder) so they aren't pure black on the default light bg. */
:root { color: var(--charcoal); }

body h1 { font-size: clamp(34px, 6.6vw, 58px); }
body h2 { font-size: clamp(28px, 4.4vw, 42px); line-height: 1.15; }
body h3 { font-size: clamp(22px, 2.6vw, 28px); }

/* When a Divi section, row, or column has the dark-layout class, force
   default text colors to white inside it. Divi normally does this but our
   inline <p> / <h*> tags inside et_pb_text content sometimes bypass its
   rules — this catches them. */
.et_pb_bg_layout_dark,
.et_pb_bg_layout_dark p,
.et_pb_bg_layout_dark li,
.et_pb_bg_layout_dark h1,
.et_pb_bg_layout_dark h2,
.et_pb_bg_layout_dark h3,
.et_pb_bg_layout_dark h4,
.et_pb_bg_layout_dark h5,
.et_pb_bg_layout_dark h6 {
    color: #ffffff;
}

/* ========================================================================
   COMPONENT: OVERLINE LABEL
   Used as a section "eyebrow" — small caps small-letterspaced label.
   ======================================================================== */

.cta-overline,
.cta-overline p {
    font-family: var(--ui);
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--charcoal);
    opacity: .7;
    font-weight: 500;
    line-height: 1;
}

/* ========================================================================
   COMPONENT: PRIMARY BUTTON (used in Theme Builder header + heroes + CTAs)
   Add class "cta-btn" or "cta-btn-white" to any Divi button module.
   ======================================================================== */

.et_pb_button.cta-btn,
.cta-btn {
    background: var(--ink) !important;
    color: var(--white) !important;
    font-family: var(--ui) !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    padding: 16px 28px !important;
    border-radius: 0 !important;
    border: none !important;
    transition: background .2s !important;
    min-height: 52px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    letter-spacing: 0 !important;
}
.et_pb_button.cta-btn:hover,
.cta-btn:hover {
    background: var(--charcoal) !important;
    padding: 16px 28px !important; /* prevent Divi's hover padding bump */
}
.et_pb_button.cta-btn:after,
.cta-btn:after {
    display: none !important;
}

.et_pb_button.cta-btn-white,
.cta-btn-white {
    background: var(--white) !important;
    color: var(--ink) !important;
    font-family: var(--ui) !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    padding: 16px 28px !important;
    border-radius: 0 !important;
    border: none !important;
    transition: background .2s !important;
    min-height: 52px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
}
.et_pb_button.cta-btn-white:hover,
.cta-btn-white:hover {
    background: var(--mist) !important;
    padding: 16px 28px !important;
}
.et_pb_button.cta-btn-white:after,
.cta-btn-white:after {
    display: none !important;
}

/* Outline variant */
.et_pb_button.cta-btn-outline,
.cta-btn-outline {
    background: transparent !important;
    color: var(--ink) !important;
    border: 1px solid var(--ink) !important;
}
.et_pb_button.cta-btn-outline:hover,
.cta-btn-outline:hover {
    background: var(--ink) !important;
    color: var(--white) !important;
}

/* ========================================================================
   COMPONENT: URGENCY BADGE (the pulsing yellow box on the camp page hero)
   ======================================================================== */

.cta-urgency {
    display: inline-block;
    background: var(--accent);
    color: var(--ink);
    font-family: var(--ui);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 10px 16px;
    line-height: 1;
    box-shadow: 0 2px 14px rgba(245, 197, 24, .35);
    animation: cta-urgency-pulse 2.6s ease-in-out infinite;
}
@keyframes cta-urgency-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.035); }
}

/* ========================================================================
   COMPONENT: DATES STRIP (5-column inverted strip below the hero)
   ======================================================================== */

.cta-dates-strip {
    background: var(--ink);
    color: var(--white);
}
.cta-dates-strip .cta-date-item {
    padding: 22px var(--gutter);
    border-right: 1px solid rgba(255, 255, 255, .16);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cta-dates-strip .cta-date-label {
    font-family: var(--ui);
    font-size: 11px;
    letter-spacing: .24em;
    text-transform: uppercase;
    opacity: .6;
    font-weight: 500;
}
.cta-dates-strip .cta-date-value {
    font-family: var(--display);
    font-size: clamp(17px, 1.9vw, 22px);
    line-height: 1.15;
    color: var(--white);
}
.cta-dates-strip .cta-date-sub {
    font-size: 12px;
    opacity: .65;
    letter-spacing: .02em;
    line-height: 1.35;
}

/* ========================================================================
   COMPONENT: INSTRUCTORS-FROM (faded grayscale logo strip)
   ======================================================================== */

.cta-instructors-from {
    background: var(--tint-soft);
    border-top: 1px solid var(--hair);
    border-bottom: 1px solid var(--hair);
    padding: 36px 0;
}
.cta-instructors-from .cta-if-label {
    font-size: 11px;
    letter-spacing: .26em;
    text-transform: uppercase;
    opacity: .6;
    font-weight: 500;
    text-align: center;
    margin-bottom: 22px;
}
.cta-instructors-from .cta-if-marks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 24px 40px;
    max-width: 920px;
    margin: 0 auto;
    padding: 0 var(--gutter);
}
.cta-instructors-from .cta-if-marks img {
    display: block;
    height: 38px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
    filter: grayscale(1) contrast(.9);
    opacity: .62;
    transition: filter .25s, opacity .25s;
}
.cta-instructors-from .cta-if-marks img:hover {
    filter: none;
    opacity: 1;
}
.cta-instructors-from .cta-if-marks .cta-wordmark {
    font-family: var(--display);
    font-size: 24px;
    letter-spacing: .22em;
    color: var(--charcoal);
    opacity: .62;
    text-transform: uppercase;
    transition: opacity .25s;
    line-height: 1;
    white-space: nowrap;
}
.cta-instructors-from .cta-if-marks .cta-wordmark:hover { opacity: 1; }
@media (max-width: 559px) {
    .cta-instructors-from .cta-if-marks { gap: 18px 26px; }
    .cta-instructors-from .cta-if-marks img { height: 28px; max-width: 110px; }
    .cta-instructors-from .cta-if-marks .cta-wordmark { font-size: 17px; letter-spacing: .18em; }
}

/* ========================================================================
   COMPONENT: HEADER (sticky white header with logo + nav + intro-call CTA)
   Used in Theme Builder.
   ======================================================================== */

.cta-header {
    background: rgba(255, 255, 255, .94);
    backdrop-filter: saturate(160%) blur(8px);
    border-bottom: 1px solid var(--hair);
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Compensate for the WP admin bar — when logged in, body gets .admin-bar
   and WP shoves a 32px (46px on mobile) bar at the top of the viewport.
   Our sticky header needs to sit below it, not behind it. */
body.admin-bar .cta-header {
    top: 32px;
}
@media (max-width: 782px) {
    body.admin-bar .cta-header { top: 46px; }
}

.cta-header .cta-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 80px;
    padding: 10px var(--gutter);
    max-width: var(--max);
    margin: 0 auto;
    gap: 28px;
}
.cta-header .cta-logo img {
    display: block;
    height: 64px;
    width: auto;
}
.cta-header nav.cta-nav {
    display: flex;
    gap: 28px;
    align-items: center;
}
.cta-header nav.cta-nav a {
    font-family: var(--ui);
    font-size: 14px;
    font-weight: 500;
    color: var(--charcoal);
    transition: opacity .15s;
    letter-spacing: .01em;
    text-decoration: none;
}
.cta-header nav.cta-nav a:hover { opacity: .55; }
@media (max-width: 900px) {
    .cta-header nav.cta-nav { display: none; }
    .cta-header .cta-logo img { height: 52px; }
}

/* ========================================================================
   COMPONENT: STICKY MOBILE CALL BAR
   ======================================================================== */

.cta-call-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    background: var(--ink);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: var(--call-bar-h);
    font-family: var(--ui);
    font-weight: 500;
    font-size: 16px;
    text-decoration: none;
    padding: 0 16px;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.cta-call-bar:hover { background: var(--charcoal); color: var(--white); }
.cta-call-bar .cta-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    position: relative;
    animation: cta-pulse 2.2s ease-out infinite;
    flex: none;
}
.cta-call-bar .cta-pulse::after {
    content: "";
    position: absolute;
    inset: -6px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 50%;
    animation: cta-ring 2.2s ease-out infinite;
}
@keyframes cta-pulse { 0%, 60% { opacity: 1; } 80%, 100% { opacity: .6; } }
@keyframes cta-ring  { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
@media (min-width: 840px) {
    .cta-call-bar { display: none; }
}
body { padding-bottom: var(--call-bar-h); }
@media (min-width: 840px) { body { padding-bottom: 0; } }

/* ========================================================================
   COMPONENT: FOUR-WEEK ARC (alternating left/right card with image)
   ======================================================================== */

.cta-arc {
    background: var(--white);
    border-bottom: 1px solid var(--hair);
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 56px;
    padding: 72px clamp(20px, 4vw, 40px) !important;
    align-items: center;
    max-width: var(--max);
    margin: 0 auto;
}
.cta-arc:nth-of-type(even) .cta-arc-text { order: 2; }
.cta-arc .cta-arc-tag {
    font-family: var(--ui);
    font-size: 11px;
    letter-spacing: .26em;
    text-transform: uppercase;
    opacity: .55;
    font-weight: 500;
    margin-bottom: 12px;
}
.cta-arc h3 {
    font-family: var(--display);
    font-size: clamp(26px, 3vw, 34px);
    line-height: 1.15;
    margin-bottom: 12px;
}
.cta-arc p {
    font-size: 14px;
    line-height: 1.65;
    opacity: .82;
    color: var(--charcoal);
}
.cta-arc .cta-arc-img {
    aspect-ratio: 4/3;
    background: #1c1c1c;
    overflow: hidden;
}
.cta-arc .cta-arc-img img,
.cta-arc .cta-arc-img video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cta-arc--finale {
    background: var(--ink) !important;
    color: var(--white) !important;
}
.cta-arc--finale .cta-arc-tag,
.cta-arc--finale h3,
.cta-arc--finale p { color: var(--white); }
.cta-arc--finale .cta-arc-tag { opacity: .7; }
.cta-arc--finale p { opacity: .85; }
@media (max-width: 759px) {
    .cta-arc { grid-template-columns: 1fr !important; padding: 40px 24px !important; column-gap: 0; }
    .cta-arc:nth-of-type(even) .cta-arc-text { order: 0; }
    .cta-arc .cta-arc-img { margin-top: 22px; }
}

/* ========================================================================
   COMPONENT: NUMBERED LIST GRID (used by 'Deliverables' section)
   ======================================================================== */

.cta-numbered-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 56px;
    border-top: 1px solid var(--hair);
}
.cta-numbered-grid .cta-numbered-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    padding: 24px 0;
    border-bottom: 1px solid var(--hair);
    align-items: start;
}
.cta-numbered-grid .cta-num {
    font-family: var(--display);
    font-size: 30px;
    line-height: 1;
    color: var(--charcoal);
    opacity: .5;
    min-width: 46px;
}
.cta-numbered-grid h3 {
    font-size: clamp(18px, 2vw, 22px);
    margin-bottom: 6px;
    font-family: var(--display);
}
.cta-numbered-grid p {
    font-size: 14px;
    line-height: 1.6;
    opacity: .78;
    max-width: 46ch;
}
@media (max-width: 759px) {
    .cta-numbered-grid { grid-template-columns: 1fr; gap: 0; }
}

/* ========================================================================
   COMPONENT: GUESTS / CAST PORTRAIT GRID (dark theme variant)
   ======================================================================== */

.cta-guests-section {
    background: var(--ink);
    color: var(--white);
}
.cta-guests-section h2,
.cta-guests-section .cta-overline { color: var(--white); }
.cta-guests-section .cta-overline { opacity: .6; }

.cta-guest-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 18px;
}
@media (min-width: 680px)  { .cta-guest-grid { grid-template-columns: repeat(3, 1fr); gap: 36px 22px; } }
@media (min-width: 1000px) { .cta-guest-grid { grid-template-columns: repeat(6, 1fr); gap: 28px 16px; } }
.cta-guest {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cta-guest .cta-portrait {
    position: relative;
    aspect-ratio: 2/3;
    width: 100%;
    overflow: hidden;
    background: #1a1a1a;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    transition: transform .3s, box-shadow .3s;
}
.cta-guest:hover .cta-portrait {
    transform: translateY(-5px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .3);
}
.cta-guest .cta-portrait img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cta-guest .cta-name {
    font-family: var(--display);
    font-size: 18px;
    line-height: 1.2;
    color: var(--white);
    margin: 0;
}
.cta-guest .cta-credit {
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    opacity: .65;
    line-height: 1.45;
    color: var(--white);
}

/* ========================================================================
   COMPONENT: FACULTY GRID (light theme variant of portrait grid)
   ======================================================================== */

.cta-faculty-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
}
@media (min-width: 680px)  { .cta-faculty-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 32px; } }
@media (min-width: 1000px) { .cta-faculty-grid { grid-template-columns: repeat(3, 1fr); gap: 48px 36px; } }
.cta-faculty {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.cta-faculty .cta-portrait {
    width: 100%;
    aspect-ratio: 1/1;
    background: #1c1c1c;
    position: relative;
    overflow: hidden;
}
.cta-faculty .cta-portrait img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cta-faculty .cta-role {
    font-size: 11px;
    letter-spacing: .24em;
    text-transform: uppercase;
    opacity: .6;
    font-weight: 500;
}
.cta-faculty h3 { font-size: 22px; line-height: 1.2; margin: 0; }
.cta-faculty .cta-credit {
    font-size: 14px;
    line-height: 1.65;
    opacity: .82;
    color: var(--charcoal);
}
.cta-faculty .cta-credit strong { font-weight: 500; }

/* ========================================================================
   COMPONENT: COHORT CARDS (Youth + Teen side-by-side)
   ======================================================================== */

.cta-cohorts-section { background: var(--tint-soft); }
.cta-cohort {
    background: var(--white);
    border: 1px solid var(--hair);
    padding: 36px clamp(24px, 4vw, 40px) 40px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.cta-cohort .cta-c-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ui);
    font-size: 11px;
    letter-spacing: .26em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--charcoal);
}
.cta-cohort .cta-c-tag::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 1px;
    background: var(--ink);
}
.cta-cohort h3 {
    font-size: clamp(24px, 2.6vw, 30px);
    line-height: 1.15;
    margin: 0;
}
.cta-cohort .cta-c-seats {
    font-family: var(--display);
    font-size: 15px;
    font-style: italic;
    opacity: .7;
    letter-spacing: .02em;
    margin-top: -6px;
}
.cta-cohort .cta-c-lede {
    font-size: 15px;
    line-height: 1.65;
    opacity: .85;
    margin-bottom: 8px;
    font-weight: 500;
}
.cta-cohort ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    line-height: 1.6;
    opacity: .78;
    padding: 0;
    margin: 0;
}
.cta-cohort ul li {
    padding-left: 24px;
    position: relative;
}
.cta-cohort ul li::before {
    content: "\2014";
    position: absolute;
    left: 4px;
    opacity: .55;
}
.cta-cohort .cta-c-showcase {
    margin-top: 12px;
    padding: 14px 16px;
    background: var(--tint-soft);
    border-left: 2px solid var(--ink);
    font-size: 13px;
    line-height: 1.55;
}
.cta-cohort .cta-c-showcase strong {
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: 11px;
    display: block;
    margin-bottom: 4px;
    opacity: .7;
}

/* ========================================================================
   COMPONENT: REVIEW CARDS (4 Google reviews on light bg)
   ======================================================================== */

.cta-reviews-section {
    background: var(--tint-soft);
    border-top: 1px solid var(--hair);
    border-bottom: 1px solid var(--hair);
}
.cta-reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
}
.cta-review {
    background: var(--white);
    border: 1px solid var(--hair);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.cta-review .cta-stars {
    color: var(--accent);
    font-size: 18px;
    letter-spacing: 2px;
    line-height: 1;
}
.cta-review blockquote {
    font-family: var(--display);
    font-size: 18px;
    line-height: 1.5;
    color: var(--charcoal);
    margin: 0;
    flex: 1;
}
.cta-review .cta-attr {
    font-family: var(--ui);
    font-size: 14px;
    color: var(--charcoal);
    opacity: .65;
    border-top: 1px solid var(--hair);
    padding-top: 14px;
}

/* ========================================================================
   COMPONENT: ALUMNI SUCCESS CARD (dark with 9:16 video right column)
   ======================================================================== */

.cta-alumni-card {
    background: var(--ink);
    color: var(--white);
    padding: 48px clamp(28px, 4vw, 56px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}
.cta-alumni-card .cta-a-mark {
    font-family: var(--display);
    font-size: clamp(48px, 6vw, 80px);
    line-height: 1;
    color: #fff;
    opacity: .9;
}
.cta-alumni-card .cta-a-mark span {
    display: block;
    font-size: 13px;
    letter-spacing: .26em;
    text-transform: uppercase;
    font-family: var(--ui);
    opacity: .6;
    margin-bottom: 12px;
}
.cta-alumni-card h3 {
    color: #fff;
    font-size: clamp(24px, 2.8vw, 30px);
    line-height: 1.2;
    max-width: 24ch;
    margin-bottom: 14px;
}
.cta-alumni-card p {
    color: #fff;
    font-size: 15px;
    line-height: 1.65;
    opacity: .85;
    max-width: 60ch;
}
.cta-alumni-card em { font-style: italic; }
.cta-alumni-video {
    position: relative;
    aspect-ratio: 9/16;
    width: 100%;
    max-width: 360px;
    background: #000;
    justify-self: end;
    overflow: hidden;
}
.cta-alumni-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media (max-width: 840px) {
    .cta-alumni-card { grid-template-columns: 1fr; padding: 32px; }
    .cta-alumni-video { justify-self: center; max-width: 320px; }
}

/* ========================================================================
   COMPONENT: SKILLS ICON ROW (4 SVG icons + labels)
   ======================================================================== */

.cta-skills-section {
    background: var(--tint-soft);
    border-top: 1px solid var(--hair);
    border-bottom: 1px solid var(--hair);
    padding: clamp(56px, 7vw, 96px) 0;
}
.cta-skills-section h2 {
    text-align: center;
    margin: 0 auto 52px;
    max-width: 600px;
}
.cta-skills-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 24px;
    align-items: start;
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}
@media (min-width: 680px) { .cta-skills-grid { grid-template-columns: repeat(4, 1fr); } }
.cta-skill {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}
.cta-skill svg {
    color: var(--charcoal);
    fill: currentColor;
    display: block;
    width: 64px;
    height: 64px;
}
@media (min-width: 760px) { .cta-skill svg { width: 72px; height: 72px; } }
.cta-skill .cta-skill-name {
    font-family: var(--display);
    font-size: 22px;
    color: var(--charcoal);
    line-height: 1.2;
}

/* ========================================================================
   COMPONENT: SECTION HEAD (overline + h2 + lede)
   ======================================================================== */

.cta-section-head {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 48px;
    max-width: 720px;
}
.cta-section-head .cta-overline { margin-bottom: 0; }
.cta-section-head .cta-lede {
    opacity: .78;
    max-width: 60ch;
    font-size: 16px;
    line-height: 1.65;
}

/* ========================================================================
   COMPONENT: HERO VIDEO BACKGROUND
   ======================================================================== */

.cta-hero {
    position: relative;
    color: var(--white);
    background: var(--ink);
    overflow: hidden;
    min-height: min(760px, 92vh);
}
.cta-hero .cta-hero-media {
    position: absolute;
    inset: 0;
}
.cta-hero .cta-hero-media video,
.cta-hero .cta-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cta-hero .cta-hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--overlay) 0%, var(--overlay) 45%, rgba(2, 2, 2, .35) 75%, rgba(2, 2, 2, .15) 100%);
}
@media (max-width: 760px) {
    .cta-hero .cta-hero-media::after {
        background: linear-gradient(180deg, rgba(2, 2, 2, .3) 0%, rgba(2, 2, 2, .55) 55%, rgba(2, 2, 2, .85) 100%);
    }
}
.cta-hero-inner {
    position: relative;
    z-index: 2;
    padding: 120px var(--gutter) 56px;
    max-width: var(--max);
    margin: 0 auto;
    min-height: inherit;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
@media (min-width: 840px) {
    .cta-hero-inner { padding: 160px var(--gutter) 120px; }
}
.cta-hero .cta-hero-eyebrow {
    font-family: var(--ui);
    font-size: 12px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--white);
    opacity: .85;
    margin-bottom: 20px;
}
.cta-hero h1 {
    color: var(--white) !important;
    max-width: 18ch;
    margin-bottom: 20px;
    font-size: clamp(34px, 6vw, 56px);
}
.cta-hero .cta-hero-sub {
    font-size: 17px;
    line-height: 1.55;
    max-width: 50ch;
    color: var(--white);
    opacity: .92;
    margin-bottom: 32px;
}
@media (min-width: 840px) { .cta-hero .cta-hero-sub { font-size: 19px; } }
.cta-hero .cta-trial-note {
    margin-top: 26px;
    font-size: 13px;
    letter-spacing: .04em;
    color: var(--white);
    opacity: .78;
    max-width: 46ch;
    border-top: 1px solid rgba(255, 255, 255, .2);
    padding-top: 18px;
}

/* ========================================================================
   DIVI BUTTON OVERRIDES — make Divi's default button render flat
   ======================================================================== */

.et_pb_button_module_wrapper { line-height: 1; }

/* Smooth scroll for anchor links */
html { scroll-behavior: smooth; scroll-padding-top: 100px; }

/* ========================================================================
   FOOTER STYLING
   ======================================================================== */

.cta-footer {
    background: var(--white);
    border-top: 1px solid var(--hair);
    padding: 48px 0 32px;
    font-size: 14px;
}
.cta-footer h4 {
    font-size: 12px !important;
    letter-spacing: .24em;
    text-transform: uppercase;
    font-family: var(--ui) !important;
    font-weight: 500 !important;
    opacity: .6;
    margin-bottom: 14px;
}
.cta-footer p, .cta-footer a {
    font-size: 14px;
    line-height: 1.7;
    color: var(--charcoal);
}
.cta-footer a { display: block; opacity: .82; text-decoration: none; }
.cta-footer a:hover { opacity: 1; }

.cta-footer-socials { display: flex; gap: 12px; margin-top: 12px; }
.cta-footer-socials a {
    width: 40px;
    height: 40px;
    border: 1px solid var(--charcoal);
    display: flex !important;
    align-items: center;
    justify-content: center;
    opacity: 1 !important;
}
.cta-footer-socials a:hover { background: var(--ink); color: var(--white); }

.cta-footer-legal {
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid var(--hair);
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: space-between;
    font-size: 12px;
    opacity: .6;
}

/* ========================================================================
   SECTION TINT UTILITY CLASSES (for Divi sections)
   ======================================================================== */

.cta-bg-ink { background-color: var(--ink) !important; color: var(--white); }
.cta-bg-ink h1, .cta-bg-ink h2, .cta-bg-ink h3, .cta-bg-ink h4, .cta-bg-ink h5,
.cta-bg-ink p, .cta-bg-ink li { color: var(--white) !important; }
.cta-bg-soft { background-color: var(--tint-soft) !important; }
.cta-bg-form { background-color: var(--tint-form) !important; }

/* ========================================================================
   HOME HERO — Dark base with radial gold/red glow.
   Applied via module_class="cta-home-hero" on the Hero section.
   ======================================================================== */

.et_pb_section.cta-home-hero {
    position: relative;
    background-color: #0b0b0d !important;
    background-image:
        radial-gradient(1100px 700px at 85% 0%, rgba(230, 196, 107, .22), transparent 60%),
        radial-gradient(900px 600px at 8% 100%, rgba(255, 90, 79, .18), transparent 60%),
        linear-gradient(180deg, #0b0b0d 0%, #14141a 100%);
    overflow: hidden;
}

/* Force white text inside dark sections regardless of the per-module
   bg_layout that Divi auto-detects. Targets ALL text inside the hero or
   any section explicitly marked dark via module_class="cta-bg-dark". */
.cta-home-hero,
.cta-home-hero p,
.cta-home-hero li,
.cta-home-hero a:not(.et_pb_button):not([class*="btn-"]),
.cta-home-hero h1, .cta-home-hero h2, .cta-home-hero h3, .cta-home-hero h4, .cta-home-hero h5, .cta-home-hero h6,
.cta-bg-dark,
.cta-bg-dark p,
.cta-bg-dark li,
.cta-bg-dark a:not(.et_pb_button):not([class*="btn-"]),
.cta-bg-dark h1, .cta-bg-dark h2, .cta-bg-dark h3, .cta-bg-dark h4, .cta-bg-dark h5, .cta-bg-dark h6,
.cta-bg-dark blockquote {
    color: #ffffff;
}
.cta-home-hero em {
    color: #e6c46b; /* keep the gold accent */
}

/* ========================================================================
   SUMMER CAMP PAGE — section-specific styles (target module_class hooks).
   These styles let our PHP-generated Divi sections inherit the embed design
   without depending on Divi's per-attribute CSS generation (which silently
   drops multi-line shortcode attrs).
   ======================================================================== */

/* HERO ---------------------------------------------------------- */
.cta-sc-hero { position: relative; overflow: hidden; }
.cta-sc-hero::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(2,2,2,.6) 0%, rgba(2,2,2,.45) 45%, rgba(2,2,2,.35) 75%, rgba(2,2,2,.15) 100%);
    z-index: 1; pointer-events: none;
}
@media (max-width: 760px) {
    .cta-sc-hero::before {
        background: linear-gradient(180deg, rgba(2,2,2,.3) 0%, rgba(2,2,2,.55) 55%, rgba(2,2,2,.85) 100%);
    }
}
.cta-sc-hero .et_pb_row { position: relative; z-index: 2; }

/* DATES STRIP -------------------------------------------------- */
.cta-sc-dates .et_pb_row { display: grid !important; grid-template-columns: repeat(5, 1fr) !important; }
@media (max-width: 899px) { .cta-sc-dates .et_pb_row { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 559px) { .cta-sc-dates .et_pb_row { grid-template-columns: repeat(2, 1fr) !important; } }
.cta-sc-dates .et_pb_column { border-right: 1px solid rgba(255,255,255,.16); }
.cta-sc-dates .et_pb_column:last-child { border-right: 0; }
/* Color rules with the cta-sc-dates ancestor to beat Divi's
   .et_pb_bg_layout_light text rules that win on specificity otherwise. */
.cta-sc-dates .cta-sc-date-label {
    font-family: var(--ui);
    font-size: 11px;
    letter-spacing: .24em;
    text-transform: uppercase;
    opacity: .6;
    font-weight: 500;
    color: #ffffff !important;
    margin-bottom: 8px;
}
.cta-sc-dates .cta-sc-date-value {
    font-family: var(--display);
    font-size: clamp(17px, 1.9vw, 22px);
    line-height: 1.15;
    color: #ffffff !important;
    margin-bottom: 8px;
}
.cta-sc-dates .cta-sc-date-sub {
    font-size: 12px;
    opacity: .65;
    letter-spacing: .02em;
    line-height: 1.35;
    color: #ffffff !important;
}

/* SKILLS ICONS (native SVGs from landing page) -------------------------- */
.cta-sc-skill-icon img {
    width: 64px !important;
    height: 64px !important;
    color: #222222;
}
@media (min-width: 760px) {
    .cta-sc-skill-icon img { width: 72px !important; height: 72px !important; }
}

/* VERTICAL CENTERING in columns (Divi has no native attribute for this) - */
.et_pb_column.cta-vcenter {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start; /* default to left-aligned children */
}
.et_pb_column.cta-vcenter > .et_pb_module {
    width: 100%;
    text-align: left;
}

/* CAMPUS MOSAIC — moved out of inline <style> (Divi strips it). */
.cta-sc-mosaic {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 14px;
    max-width: 1200px;
    margin: 0 auto;
}
.cta-sc-mc {
    position: relative;
    background: #1a1a1a;
    overflow: hidden;
    display: block;
    aspect-ratio: 1/1;
    text-decoration: none;
}
.cta-sc-mc > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s;
}
.cta-sc-mc:hover > img { transform: scale(1.04); }
.cta-sc-mc::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.55) 100%);
    z-index: 1;
    pointer-events: none;
}
.cta-sc-mc-cap {
    position: absolute;
    left: 18px;
    bottom: 16px;
    color: #fff;
    font-family: var(--ui);
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 500;
    z-index: 2;
}
.cta-sc-mc--lg    { grid-row: 1 / 3; grid-column: 1 / 2; aspect-ratio: auto; min-height: 520px; }
.cta-sc-mc--wide  { grid-row: 1 / 2; grid-column: 2 / 4; aspect-ratio: 16/9; }
.cta-sc-mc--banner{ grid-row: 3 / 4; grid-column: 1 / 4; aspect-ratio: 21/9; }
@media (max-width: 760px) {
    .cta-sc-mosaic { grid-template-columns: 1fr; }
    .cta-sc-mc { grid-column: 1 / 2 !important; grid-row: auto !important; aspect-ratio: 16/9 !important; min-height: 0 !important; }
    .cta-sc-mc--lg { aspect-ratio: 4/5 !important; }
    .cta-sc-mc--banner { aspect-ratio: 21/9 !important; }
}

/* DIVI ANIMATION-WAYPOINT FIX --------------------------------------------
   Divi wraps images in .et-waypoint.et_pb_animation_off then JS removes
   the class on scroll into view. Until JS fires, images can render hidden
   in static-output / pre-scroll contexts (and on the screenshot tool
   which doesn't fire intersection observers). Force-visible by default. */
.et-waypoint,
.et_pb_team_member_image.et-waypoint,
.et_pb_image .et-waypoint,
.et_pb_animation_off {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

/* LOGOS BAND --------------------------------------------------- */
.cta-sc-logos .cta-sc-logo-mark img {
    filter: grayscale(1) contrast(.9);
    opacity: .62;
    transition: filter .25s, opacity .25s;
    object-fit: contain;
    max-height: 42px;
    width: auto;
}
.cta-sc-logos .cta-sc-logo-mark:hover img { filter: none; opacity: 1; }

/* NYFA logo is WHITE — needs invert to show on light bg */
.cta-sc-logos .cta-sc-logo-mark img[alt="New York Film Academy"] {
    filter: invert(1) grayscale(1);
    opacity: .62;
}
.cta-sc-logos .cta-sc-logo-mark img[alt="New York Film Academy"]:hover {
    filter: invert(1);
    opacity: 1;
}

/* ========================================================================
   THEME BUILDER HEADER LAYOUT
   The menu sits in a 3/5 col (gives 7 items room to fit on one line on
   desktop). Logo + CTA flank it at 1/5 each.
   ======================================================================== */

.cta-header-section { z-index: 100; position: relative; }
.cta-header-row { align-items: center; }
.cta-header-logo .et_pb_image_wrap img { max-height: 60px; width: auto; }
.cta-header-menu ul.nav { display: flex !important; flex-wrap: nowrap !important; justify-content: center; gap: 24px !important; }
.cta-header-menu ul.nav > li { padding-right: 0 !important; white-space: nowrap; }
.cta-header-menu ul.nav > li > a { font-family: var(--ui) !important; font-size: 14px !important; font-weight: 500 !important; color: var(--charcoal) !important; opacity: 1 !important; padding: 0 !important; }
.cta-header-menu ul.nav > li > a:hover { opacity: .55 !important; }
@media (max-width: 980px) {
    .cta-header-menu ul.nav { display: none !important; }
}
.cta-header-btn .et_pb_button {
    background: var(--ink) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 12px 22px !important;
    font-family: var(--ui) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
}
.cta-header-btn .et_pb_button:hover { background: var(--charcoal) !important; }
.cta-header-btn .et_pb_button:after { color: #fff !important; }

/* SKILLS ------------------------------------------------------- */
.cta-sc-skills .et_pb_blurb_main_image {
    color: var(--charcoal) !important;
    fill: currentColor !important;
}

/* FOUR-WEEK ARC ----------------------------------------------- */
.cta-sc-arc .et_pb_row { align-items: center; }
.cta-sc-arc-img img { width: 100%; height: 100%; object-fit: cover; }
.cta-sc-arc-finale { color: #fff !important; }
.cta-sc-arc-finale * { color: #fff !important; }

/* WEEKLY GUESTS ----------------------------------------------- */
.cta-sc-guest-img img {
    aspect-ratio: 2/3;
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    transition: transform .3s, box-shadow .3s;
}
.cta-sc-guest-img:hover img {
    transform: translateY(-5px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .3);
}

/* DELIVERABLES ------------------------------------------------- */
.cta-sc-deliv-item .cta-sc-deliv-num {
    font-family: var(--display);
    font-size: 30px;
    line-height: 1;
    color: var(--charcoal);
    opacity: .5;
    margin-bottom: 14px;
}
.cta-sc-deliv-item .cta-sc-deliv-h3 {
    font-family: var(--display);
    font-size: clamp(18px, 2vw, 22px);
    margin-bottom: 6px;
    line-height: 1.2;
}
.cta-sc-deliv-item .cta-sc-deliv-p {
    font-family: var(--ui);
    font-size: 14px;
    line-height: 1.6;
    opacity: .78;
    max-width: 46ch;
    margin: 0;
}

/* WHY CTA ----------------------------------------------------- */
.cta-sc-why-card .cta-sc-why-num {
    font-family: var(--ui);
    font-size: 12px;
    letter-spacing: .24em;
    opacity: .55;
    font-weight: 500;
    margin-bottom: 12px;
    text-transform: uppercase;
}
.cta-sc-why-card .cta-sc-why-h3 {
    font-family: var(--display);
    font-size: 21px;
    line-height: 1.2;
    margin-bottom: 8px;
}
.cta-sc-why-card .cta-sc-why-p {
    font-family: var(--ui);
    font-size: 14px;
    line-height: 1.6;
    color: var(--charcoal);
    opacity: .78;
    margin: 0;
}
.cta-sc-why-card .cta-sc-stars {
    display: block;
    color: #F5C518;
    font-size: 18px;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

/* ALUMNI ------------------------------------------------------- */
.cta-sc-alumni-video { aspect-ratio: 9/16; max-width: 360px; margin-left: auto; }
.cta-sc-alumni-video .et_pb_video_box { aspect-ratio: 9/16 !important; }
.cta-sc-alumni-video video { width: 100%; height: 100%; object-fit: cover; }

/* COHORT CARDS ------------------------------------------------- */
.cta-sc-cohort .cta-sc-cohort-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ui);
    font-size: 11px;
    letter-spacing: .26em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--charcoal);
    margin-bottom: 14px;
}
.cta-sc-cohort .cta-sc-cohort-tag::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 1px;
    background: var(--ink);
}
.cta-sc-cohort .cta-sc-cohort-age {
    font-family: var(--display);
    font-size: clamp(24px, 2.6vw, 30px);
    line-height: 1.15;
    margin: 0;
}
.cta-sc-cohort .cta-sc-cohort-seats {
    font-family: var(--display);
    font-size: 15px;
    font-style: italic;
    opacity: .7;
    margin-bottom: 14px;
}
.cta-sc-cohort .cta-sc-cohort-lede {
    font-size: 15px;
    line-height: 1.65;
    opacity: .85;
    margin-bottom: 14px;
    font-weight: 500;
}
.cta-sc-cohort .cta-sc-cohort-list {
    list-style: none;
    padding: 0;
    margin: 0 0 14px 0;
}
.cta-sc-cohort .cta-sc-cohort-li {
    padding-left: 24px;
    position: relative;
    font-size: 14px;
    line-height: 1.6;
    opacity: .78;
    margin-bottom: 6px;
    color: var(--charcoal);
}
.cta-sc-cohort .cta-sc-cohort-li::before {
    content: "\2014";
    position: absolute;
    left: 4px;
    opacity: .55;
}
.cta-sc-cohort .cta-sc-cohort-showcase {
    margin-top: 12px;
    padding: 14px 16px;
    background: var(--tint-soft);
    border-left: 2px solid var(--ink);
    font-size: 13px;
    line-height: 1.55;
}
.cta-sc-cohort .cta-sc-cohort-showcase strong {
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: 11px;
    display: block;
    margin-bottom: 4px;
    opacity: .7;
}

/* ========================================================================
   DIVI INTEGRATION FIXES
   Override Divi parent-theme assumptions that conflict with our custom header.
   ======================================================================== */

/* Divi adds padding-top: 80px to #page-container when body has et_fixed_nav
   et_show_nav (the default classes). That's space for Divi's own fixed
   #main-header. We don't use #main-header — our custom sticky header sits
   inside #page-container — so the compensation pad just creates a gap. */
body.et_fixed_nav.et_show_nav #page-container,
body.et_fixed_nav #page-container,
body.et_non_fixed_nav #page-container,
body.et_transparent_nav #page-container {
    padding-top: 0 !important;
}

/* Divi's own #main-header / #top-header are not rendered by our header.php,
   but some Divi CSS still assumes they exist. Hide them defensively. */
#top-header, #main-header { display: none !important; }

/* Divi sets html { padding-top } via inline JS in some configurations.
   Re-zero it. */
html { padding-top: 0 !important; }

/* The first section after our header should NOT have a top margin. */
#main-content > .et-l, #main-content > .et_pb_section:first-child { margin-top: 0; }

/* Our header is the only top nav — keep its z-index above Divi sections. */
.cta-header { z-index: 100 !important; }

/* ========================================================================
   SUMMER CAMP — clean rebuild, values from creationtalentacademy.com inspector
   Three rules:
     1. Anything Divi can natively express (font_size, color, padding) lives in
        shortcode attributes, NOT here.
     2. CSS here is only for layout primitives Divi can't natively do (grid,
        flex equal-height, max-content widths, pseudo-element fixes).
     3. No `et_pb_text` inline `style="..."` strings — they would override
        Divi attrs and break the visual builder.
   ======================================================================== */

/* --- Call-now buttons: Divi's :before is absolute + opacity-fade-on-hover.
       Make it inline-flex with a real gap, padding 16px 28px, icon left of text. --- */
a.et_pb_button.cta-call-btn,
.cta-call-btn .et_pb_button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 16px 28px !important;
    white-space: nowrap !important; /* keep "Call now · 626-790-1941" on one line on mobile */
}
a.et_pb_button.cta-call-btn:before,
.cta-call-btn .et_pb_button:before {
    position: static !important;
    display: inline-block !important;
    opacity: 1 !important;
    margin: 0 !important;
    line-height: inherit !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    vertical-align: middle;
}

/* --- Hero urgency badge: max-content + flex centering not expressible in Divi.
       Font/color/padding are also forced here so the inline <p> inherits cleanly. --- */
.et_pb_module.cta-sc-urgency,
.et_pb_module.cta-sc-urgency .et_pb_text_inner {
    background: transparent !important;
    padding: 0 !important;
    max-width: max-content !important;
    width: max-content !important;
}
.cta-sc-urgency .et_pb_text_inner > p,
.cta-sc-urgency p {
    background: var(--accent) !important;
    color: var(--ink) !important;
    font-family: var(--ui) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: 0.14em !important;
    line-height: 1 !important;
    padding: 10px 16px !important;
    display: inline-block !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    /* Ported from live Wix site: subtle amber glow + slow pulse */
    box-shadow: 0 2px 14px rgba(245, 197, 24, 0.35) !important;
    animation: cta-urgency-pulse 2.6s ease-in-out infinite !important;
    transform-origin: center !important;
    will-change: transform !important;
}
@keyframes cta-urgency-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.035); }
}
@media (prefers-reduced-motion: reduce) {
    .cta-sc-urgency p { animation: none !important; }
}

/* --- Eyebrow text style is set via Divi attrs on individual modules.
       This rule just enforces the lowercase paragraph wrapping inside et_pb_text. --- */
.cta-eyebrow p { margin: 0 !important; }

/* --- Vertical-center a column's content (used for arc rows, alumni, form). --- */
.et_pb_column.cta-vcenter > .et_pb_module:first-child { margin-top: auto; }
.et_pb_column.cta-vcenter > .et_pb_module:last-child  { margin-bottom: auto; }
.et_pb_column.cta-vcenter {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* --- Dark sections: white text default. --- */
.cta-bg-dark, .cta-bg-dark * { color: #FFFFFF; }
.cta-bg-dark strong { color: #FFFFFF; }
.cta-bg-dark .et_pb_text_inner em { color: #FFFFFF; }

/* --- Force full column width inside our custom sections.
       Divi 4.27 uses CSS Grid for rows and the row's grid-template-columns
       sometimes shows 5 slots (legacy / cached layout) even when our shortcode
       has a single 4_4 column. Pin the row to a single-column grid so the
       column fills 100% of the row inner area. --- */
.cta-sc-dates .et_pb_row,
.cta-sc-logos .et_pb_row,
.cta-sc-guests .et_pb_row,
.cta-sc-closing .et_pb_row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
}
.cta-sc-dates .et_pb_row > .et_pb_column,
.cta-sc-logos .et_pb_row > .et_pb_column,
.cta-sc-guests .et_pb_row > .et_pb_column,
.cta-sc-closing .et_pb_row > .et_pb_column {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ========== DATES STRIP ============================================== */
.cta-dates-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    padding: 32px 0;
}
.cta-date {
    padding: 12px 24px;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.cta-date:last-child { border-right: 0; }
.cta-date-label {
    font-family: var(--ui);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.24em;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    margin-bottom: 8px;
}
.cta-date-value {
    font-family: var(--display);
    font-size: 22px;
    line-height: 1.2;
    color: #FFFFFF;
    margin-bottom: 8px;
}
.cta-date-sub {
    font-family: var(--ui);
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 2px;
}
@media (max-width: 900px) {
    .cta-dates-grid { grid-template-columns: 1fr 1fr; gap: 16px; padding: 24px 0; }
    .cta-date { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); padding: 16px 0; }
}
@media (max-width: 600px) {
    .cta-dates-grid { grid-template-columns: 1fr; gap: 0; padding: 16px 0; }
    .cta-date { padding: 14px 0; }
}

/* ========== LOGOS BAND ================================================= */
.cta-logos-eyebrow {
    font-family: var(--ui);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.26em;
    color: rgba(34, 34, 34, 0.7);
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 28px;
}
.cta-logos-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px 28px;       /* tighter than live — fits all 8 logos on one row at 1568px */
    max-width: 1040px;
    margin: 0 auto;
}
.cta-logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
}
.cta-logo img {
    max-height: 40px;
    max-width: 90px;      /* shrunk so 8 logos + gaps fit in 1040px */
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%) brightness(0.7);
    opacity: 0.85;
}
.cta-logo--nyfa img { filter: grayscale(100%) brightness(0.5); }
.cta-logo-word {
    font-family: var(--display);
    font-size: 22px;
    letter-spacing: 0.22em;
    color: var(--charcoal);
    opacity: 0.75;
    text-transform: uppercase;
}

/* ========== SKILLS ===================================================== */
.cta-skills-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px 24px;
    max-width: 1080px;
    margin: 0 auto;
}
.cta-skill {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.cta-skill-icon {
    width: 72px;
    height: 72px;
    color: var(--charcoal);
    margin-bottom: 16px;
}
.cta-skill-icon svg { width: 100%; height: 100%; fill: currentColor; }
.cta-skill-label {
    font-family: var(--ui);
    font-size: 16px;
    color: var(--charcoal);
    line-height: 1.5;
}
@media (max-width: 768px) {
    .cta-skills-grid { grid-template-columns: 1fr 1fr; gap: 32px 16px; }
}

/* ========== GUESTS ===================================================== */
.cta-guests-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 28px 16px;
}
.cta-guest-card { display: flex; flex-direction: column; }
.cta-guest-poster {
    background:
        repeating-linear-gradient(135deg,
            rgba(255,255,255,0.043) 0,
            rgba(255,255,255,0.043) 14px,
            rgba(255,255,255,0) 14px,
            rgba(255,255,255,0) 28px),
        linear-gradient(#1f1f1f, #0a0a0a);
    aspect-ratio: 2/3;
    overflow: hidden;
    margin-bottom: 12px;
}
.cta-guest-poster img {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
}
.cta-guest-name {
    font-family: var(--display);
    font-size: 18px;
    line-height: 1.2;
    color: #FFFFFF;
    margin: 2px 0 0;
}
.cta-guest-credit {
    font-family: var(--ui);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
    line-height: 1.3;
    margin-top: 4px;
}
@media (max-width: 900px) {
    .cta-guests-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .cta-guests-grid { grid-template-columns: 1fr 1fr; }
}

/* ========== DELIVERABLES =============================================== */
.cta-deliver-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 56px;
}
.cta-deliver-grid li {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 18px;
    padding: 24px 0;
    border-bottom: 1px solid var(--hair);
    margin: 0;
}
.cta-deliver-grid .d-num {
    font-family: var(--display);
    font-size: 30px;
    line-height: 1;
    color: var(--charcoal);
}
.cta-deliver-grid h3 {
    font-family: var(--display);
    font-size: 22px;
    font-weight: 400;
    line-height: 1.1;
    margin: 0 0 6px;
    color: var(--charcoal);
}
.cta-deliver-grid p {
    font-family: var(--ui);
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
    color: var(--charcoal);
}
.cta-deliver-grid p strong { font-weight: 600; }
@media (max-width: 768px) {
    .cta-deliver-grid { grid-template-columns: 1fr; gap: 0; }
}

/* ========== WHY CTA ==================================================== */
.cta-why-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    /* hairline color shows through the 1px gap → creates visible dividers between cards */
    background: var(--hair);
}
.cta-why-card {
    list-style: none;
    background: var(--tint-soft);
    padding: 32px 24px 36px;
    display: flex;
    flex-direction: column;
}
.cta-why-num {
    font-family: var(--ui);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.24em;
    color: var(--charcoal);
    margin-bottom: 16px;
}
.cta-why-card h3 {
    font-family: var(--display);
    font-size: 21px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--charcoal);
    margin: 0 0 10px;
}
.cta-why-card p {
    font-family: var(--ui);
    font-size: 16px;
    line-height: 1.6;
    color: var(--charcoal);
    margin: 0;
}
.cta-why-stars {
    color: var(--accent);
    font-size: 18px;
    letter-spacing: 2px;
    margin: 0 0 8px;
}
@media (max-width: 900px) {
    .cta-why-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .cta-why-grid { grid-template-columns: 1fr; }
}

/* --- Hero CTA pair: keep two buttons inline on desktop, stack on mobile --- */
.cta-home-hero .et_pb_button_module_wrapper {
    display: inline-block !important;
    vertical-align: middle;
}
@media (max-width: 600px) {
    .cta-home-hero .et_pb_button_module_wrapper {
        display: block !important;
        margin-bottom: 12px;
    }
}

/* --- Force the ROW into flex-column on phone so children naturally fill width. --- */
/* Also undo Divi's default `.et_pb_row { width: 80% }` — at mobile the section's
   own side padding handles the gutter, so the 80% inset just squeezes content. */
@media (max-width: 768px) {
    body #page-container .et_pb_row.et_pb_equal_columns,
    body #page-container .et_pb_section .et_pb_row {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* --- Force fractional columns to full-width on phone + clear floats. --- */
@media (max-width: 768px) {
    body #page-container .et_pb_row .et_pb_column.et_pb_column_1_2,
    body #page-container .et_pb_row .et_pb_column.et_pb_column_2_5,
    body #page-container .et_pb_row .et_pb_column.et_pb_column_3_5,
    body #page-container .et_pb_row .et_pb_column.et_pb_column_1_3,
    body #page-container .et_pb_row .et_pb_column.et_pb_column_2_3,
    body #page-container .et_pb_row .et_pb_column.et_pb_column_1_4,
    body #page-container .et_pb_row .et_pb_column.et_pb_column_3_4,
    body #page-container .et_pb_row .et_pb_column.et_pb_column_1_5,
    body #page-container .et_pb_row .et_pb_column.et_pb_column_1_6 {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        clear: both !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 24px;
        box-sizing: border-box;
    }
    body #page-container .et_pb_row .et_pb_column:last-child { margin-bottom: 0; }
}

/* ========== CLASSES: discipline blocks (image + text stacked rows) ====== */
.cta-disciplines { display: grid; grid-template-columns: 1fr; gap: 64px; }
.cta-discipline {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
    padding-bottom: 64px;
    border-bottom: 1px solid var(--hair);
}
.cta-discipline:last-child { border-bottom: 0; padding-bottom: 0; }
.cta-discipline:nth-child(even) .cta-discipline-media { order: 2; }
.cta-discipline-media img { display: block; width: 100%; height: auto; object-fit: cover; }
.cta-discipline-tagline {
    font-family: var(--ui);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.24em;
    color: var(--charcoal);
    text-transform: uppercase;
    margin-bottom: 12px;
}
.cta-discipline-title {
    font-family: var(--display);
    font-size: 42px;
    font-weight: 400;
    line-height: 1.1;
    color: var(--charcoal);
    margin: 0 0 14px;
}
.cta-discipline-levels {
    font-family: var(--display);
    font-style: italic;
    font-size: 16px;
    color: var(--charcoal);
    opacity: 0.7;
    margin-bottom: 18px;
}
.cta-discipline-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.cta-discipline-list li {
    list-style: none;
    position: relative;
    padding-left: 24px;
    font-family: var(--ui);
    font-size: 16px;
    line-height: 1.6;
    color: var(--charcoal);
    margin-bottom: 6px;
}
.cta-discipline-list li::before {
    content: "\2014";
    position: absolute;
    left: 0;
    color: var(--charcoal);
    opacity: 0.55;
}
@media (max-width: 900px) {
    .cta-disciplines { gap: 48px; }
    .cta-discipline { grid-template-columns: 1fr; gap: 24px; padding-bottom: 48px; }
    .cta-discipline:nth-child(even) .cta-discipline-media { order: 0; }
    .cta-discipline-title { font-size: 32px; }
}

/* ========== PRICING: tier cards ======================================== */
.cta-price-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.cta-price-card {
    background: #FFFFFF;
    border: 1px solid var(--hair);
    padding: 36px 28px 32px;
    display: flex;
    flex-direction: column;
}
.cta-price-card--featured {
    border-color: var(--ink);
    border-width: 2px;
    position: relative;
}
.cta-price-card--featured::before {
    content: 'MOST POPULAR';
    position: absolute;
    top: -10px;
    left: 28px;
    background: var(--accent);
    color: var(--ink);
    font-family: var(--ui);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    padding: 4px 10px;
}
.cta-price-tier {
    font-family: var(--ui);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.26em;
    color: var(--charcoal);
    margin-bottom: 18px;
}
.cta-price-amt { display: flex; align-items: baseline; gap: 8px; margin-bottom: 16px; }
.cta-price-num {
    font-family: var(--display);
    font-size: 48px;
    line-height: 1;
    color: var(--charcoal);
}
.cta-price-cadence {
    font-family: var(--ui);
    font-size: 14px;
    color: var(--charcoal);
    opacity: 0.7;
}
.cta-price-blurb {
    font-family: var(--ui);
    font-size: 15px;
    line-height: 1.55;
    color: var(--charcoal);
    margin: 0 0 18px;
}
.cta-price-list {
    list-style: none;
    padding: 0;
    margin: 0 0 8px;
}
.cta-price-list li {
    list-style: none;
    position: relative;
    padding-left: 22px;
    font-family: var(--ui);
    font-size: 14px;
    line-height: 1.65;
    color: var(--charcoal);
    margin-bottom: 6px;
}
.cta-price-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--ink);
    font-weight: 700;
}
@media (max-width: 900px) {
    .cta-price-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ========== HOME: 5 DISCIPLINE PILLARS =================================== */
.cta-pillars-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 32px;
}
.cta-pillar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}
.cta-pillar-icon {
    width: 56px;
    height: 56px;
    color: var(--charcoal);
    margin-bottom: 18px;
}
.cta-pillar-icon svg { width: 100%; height: 100%; fill: currentColor; }
.cta-pillar-title {
    font-family: var(--display);
    font-size: 22px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--charcoal);
    margin: 0 0 8px;
}
.cta-pillar-blurb {
    font-family: var(--ui);
    font-size: 14px;
    line-height: 1.6;
    color: var(--charcoal);
    margin: 0;
}
@media (max-width: 900px) {
    .cta-pillars-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
}
@media (max-width: 600px) {
    .cta-pillars-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* --- Home faculty card variant: clickable link --- */
a.cta-faculty-card--link {
    text-decoration: none;
    color: inherit;
    transition: transform 240ms;
}
a.cta-faculty-card--link:hover { transform: translateY(-4px); }

/* ========== FACULTY ==================================================== */
.cta-faculty-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px 36px;
}
.cta-faculty-card {
    display: flex;
    flex-direction: column;
}
/* Show faculty headshots at their natural aspect ratio (matches live).
   Forcing 3/4 was cropping heads off Lauren/EJ. */
.cta-faculty-img {
    overflow: hidden;
    margin-bottom: 16px;
}
.cta-faculty-img img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}
.cta-faculty-role {
    font-family: var(--ui);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.24em;
    color: var(--charcoal);
    text-transform: uppercase;
    margin-bottom: 6px;
}
.cta-faculty-name {
    font-family: var(--display);
    font-size: 22px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--charcoal);
    margin: 0 0 8px;
}
.cta-faculty-bio {
    font-family: var(--ui);
    font-size: 16px;
    line-height: 1.65;
    color: var(--charcoal);
    margin: 0;
}
.cta-faculty-bio strong { font-weight: 600; }
@media (max-width: 900px) {
    .cta-faculty-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .cta-faculty-grid { grid-template-columns: 1fr; }
}

/* --- Arc week rows: hairline divider between weeks.
       Fallback in case Divi's border_color_bottom attr doesn't paint. --- */
.et_pb_row.cta-arc-row {
    border-bottom: 1px solid var(--hair) !important;
}

/* --- Arc finale (Live, on stage) row background.
       Divi's `background_color` shortcode attribute on et_pb_row sometimes
       doesn't paint when the row also has `make_equal`. Force the dark bg
       and inner spacing via the cta-arc-finale class. --- */
.et_pb_row.cta-arc-finale {
    background: var(--ink) !important;
}
.et_pb_row.cta-arc-finale .et_pb_column { background: transparent; }

/* --- Arc journey video (opening video below "From their first day to the final performance.")
       Values pulled from live: 14px border-radius, soft 0 12px 32px / .2 shadow,
       40px bottom margin, object-fit: contain so the full frame shows. --- */
.cta-journey-video {
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
    margin: 0 0 40px;
}
.cta-journey-video video {
    display: block;
    width: 100%; height: 100%;
    object-fit: contain;
}

/* ========== ALUMNI (Mystic) ============================================ */
.cta-alumni-card { /* row-level — most styling via Divi attrs */ }
.cta-alumni-video {
    aspect-ratio: 9 / 16;
    max-width: 360px;
    margin: 0 auto;
    overflow: hidden;
    background: #000;
}
.cta-alumni-video video {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
}

/* ========== REVIEWS ==================================================== */
.cta-reviews-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.cta-review-card {
    list-style: none;
    background: #FFFFFF;
    border-top: 1px solid var(--hair);
    border-bottom: 1px solid var(--hair);
    padding: 28px;
    display: flex;
    flex-direction: column;
}
.cta-review-stars {
    color: var(--accent);
    font-size: 18px;
    letter-spacing: 2px;
    line-height: 1;
    margin-bottom: 18px;
}
.cta-review-body {
    font-family: var(--display);
    font-style: italic;
    font-size: 18px;
    line-height: 1.5;
    color: var(--charcoal);
    margin: 0 0 18px;
    padding: 0;
    border: 0;
}
.cta-review-attrib {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--hair);
    font-family: var(--ui);
    font-size: 13px;
    color: var(--charcoal);
}
@media (max-width: 900px) {
    .cta-reviews-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .cta-reviews-grid { grid-template-columns: 1fr; }
}

/* ========== COHORTS ==================================================== */
.cta-cohorts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}
.cta-cohort-card {
    background: transparent;
    border: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.cta-cohort-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--ui);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.26em;
    color: var(--charcoal);
    text-transform: uppercase;
    margin-bottom: 14px;
}
.cta-cohort-dash {
    display: inline-block;
    width: 24px;
    height: 1px;
    background: var(--ink);
}
.cta-cohort-h3 {
    font-family: var(--display);
    font-size: 30px;
    line-height: 1.15;
    color: var(--charcoal);
    margin: 0 0 6px;
    font-weight: 400;
}
.cta-cohort-seats {
    font-family: var(--display);
    font-style: italic;
    font-size: 15px;
    color: var(--charcoal);
    opacity: 0.7;
    margin-bottom: 14px;
}
.cta-cohort-lead {
    font-family: var(--ui);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.55;
    color: var(--charcoal);
    margin: 0 0 14px;
}
.cta-cohort-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 14px;
}
.cta-cohort-list li {
    list-style: none !important;
    list-style-type: none !important;
    position: relative;
    padding-left: 24px;
    font-family: var(--ui);
    font-size: 16px;
    line-height: 1.6;
    color: var(--charcoal);
    margin: 0 0 4px;
}
.cta-cohort-list li::before {
    content: "\2014";
    position: absolute;
    left: 0;
    color: var(--charcoal);
    opacity: 0.55;
}
.cta-cohort-showcase {
    margin-top: 12px;
    padding: 14px 16px;
    background: var(--tint-soft);
    border-left: 2px solid var(--ink);
    font-family: var(--ui);
    font-size: 13px;
    line-height: 1.55;
    color: var(--charcoal);
}
.cta-cohort-showcase-label {
    font-family: var(--ui);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--charcoal);
    opacity: 0.7;
    margin-bottom: 4px;
}
.cta-cohort-showcase p { margin: 0; }
@media (max-width: 768px) {
    .cta-cohorts-grid { grid-template-columns: 1fr; }
}

/* ========== FORM ======================================================= */
.cta-contact-form .et_pb_contact_field { padding: 0 0 16px !important; }
.cta-contact-form .input,
.cta-contact-form .et_pb_contact_field input,
.cta-contact-form .et_pb_contact_field textarea,
.cta-contact-form .et_pb_contact_field select {
    height: 48px;
    padding: 0 14px !important;
    background: #FFFFFF !important;
    border: 1px solid var(--charcoal) !important;
    border-radius: 0 !important;
    font-family: var(--ui) !important;
    font-size: 16px !important;
    color: var(--charcoal) !important;
}
.cta-contact-form .et_pb_button {
    padding: 16px 28px !important;
    background: var(--ink) !important;
    color: #FFFFFF !important;
    font-family: var(--ui) !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    border-radius: 0 !important;
}

/* ========== CAMPUS MOSAIC ============================================== */
.cta-mosaic {
    display: grid;
    grid-template-columns: 448fr 320fr 320fr;
    grid-template-rows: 369px 320px 480px;
    gap: 16px;
    max-width: 1200px;
    margin: 0 auto;
}
.cta-mc {
    position: relative;
    overflow: hidden;
    background: #000;
    cursor: pointer;
}
.cta-mc img {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.6s;
}
.cta-mc:hover img { transform: scale(1.04); }
.cta-mc-cap {
    position: absolute;
    left: 20px; bottom: 20px;
    font-family: var(--ui);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.22em;
    color: #FFFFFF;
    text-transform: uppercase;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}
.cta-mc--lg     { grid-column: 1 / 2; grid-row: 1 / 3; }
.cta-mc--wide   { grid-column: 2 / 4; grid-row: 1 / 2; }
.cta-mc--banner { grid-column: 1 / 4; grid-row: 3 / 4; }
@media (max-width: 768px) {
    .cta-mosaic { grid-template-columns: 1fr; grid-template-rows: auto; }
    .cta-mc--lg, .cta-mc--wide, .cta-mc--banner { grid-column: auto; grid-row: auto; aspect-ratio: 3/2; }
}

/* ========== HERO GRADIENT OVERLAY ====================================== */
/* Divi's video bg sits inside .et_pb_section_video_bg with z-index 0; we add
   a second overlay layer over it that the gradient stops apply through. */
.et_pb_section.cta-sc-hero .et_pb_section_video_bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(2,2,2,0.88) 0%,
        rgba(2,2,2,0.88) 45%,
        rgba(2,2,2,0.55) 75%,
        rgba(2,2,2,0.35) 100%);
    pointer-events: none;
    z-index: 2;
}

/* ========================================================================
   THEME BUILDER HEADER — custom desktop dropdowns + mobile drawer
   Targets Divi's .et_pb_menu output. Keeps menu editable in Appearance > Menus.
   ======================================================================== */

/* --- Section + row reset for header --- */
.et_pb_section.cta-header,
.et_pb_section.cta-header.et_pb_section_0_tb_header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #FFFFFF !important;
    border-bottom: 1px solid var(--hair);
    box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}

/* --- Desktop menu links --- */
.et_pb_menu .et_pb_menu__wrap .et_pb_menu__menu > nav > ul > li > a,
.et_pb_menu_inner_container nav.et-menu-nav > ul > li > a {
    font-family: var(--ui) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--charcoal) !important;
    letter-spacing: 0.02em;
    padding: 26px 0 !important;
    position: relative;
    transition: color 200ms;
}

.et_pb_menu nav.et-menu-nav > ul > li > a::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    bottom: 18px;
    height: 1px;
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 240ms;
}
.et_pb_menu nav.et-menu-nav > ul > li:hover > a::after,
.et_pb_menu nav.et-menu-nav > ul > li.current-menu-item > a::after,
.et_pb_menu nav.et-menu-nav > ul > li.current_page_item > a::after {
    transform: scaleX(1);
}

/* --- Menu items spacing --- */
.et_pb_menu nav.et-menu-nav > ul > li {
    padding: 0 18px !important;
}
.et_pb_menu nav.et-menu-nav > ul > li:first-child { padding-left: 0 !important; }
.et_pb_menu nav.et-menu-nav > ul > li:last-child { padding-right: 0 !important; }

/* --- Dropdown caret on items with children — sits AFTER the link text.
       Divi's default puts an absolutely-positioned ::after — override to inline. --- */
body #page-container .cta-header .et_pb_menu nav.et-menu-nav > ul > li.menu-item-has-children > a::after,
.et_pb_menu nav.et-menu-nav > ul > li.menu-item-has-children > a::after {
    content: '' !important;
    display: inline-block !important;
    position: static !important;
    width: 6px !important;
    height: 6px !important;
    margin-left: 8px !important;
    top: auto !important;
    right: auto !important;
    border-right: 1.5px solid currentColor !important;
    border-bottom: 1.5px solid currentColor !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    transform: rotate(45deg) translateY(-2px) !important;
    opacity: 0.55 !important;
    transition: transform 200ms, opacity 200ms !important;
    vertical-align: middle;
}
.et_pb_menu nav.et-menu-nav > ul > li.menu-item-has-children:hover > a::after {
    opacity: 1 !important;
}

/* --- Submenu dropdown --- */
/* Bumped specificity past Divi's body #page-container chain so background sticks. */
body #page-container .cta-header .et_pb_menu nav.et-menu-nav ul.sub-menu,
.et_pb_menu nav.et-menu-nav ul.sub-menu {
    background: #FFFFFF !important;
    border: 1px solid var(--hair) !important;
    border-radius: 0 !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.08) !important;
    padding: 8px 0 !important;
    min-width: 220px !important;
    top: 100% !important;
    margin-top: -1px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 220ms, transform 220ms, visibility 0s 220ms;
    display: block !important;
}
/* Specificity must match the base .sub-menu rule above (which has `body #page-container .cta-header` prefix),
   otherwise the `visibility: hidden` on the base rule wins on hover. */
body #page-container .cta-header .et_pb_menu nav.et-menu-nav > ul > li:hover > ul.sub-menu,
body #page-container .cta-header .et_pb_menu nav.et-menu-nav > ul > li.menu-item-has-children:hover > ul.sub-menu,
body #page-container .cta-header .et_pb_menu nav.et-menu-nav > ul > li.menu-item-has-children:focus-within > ul.sub-menu,
.et_pb_menu nav.et-menu-nav > ul > li:hover > ul.sub-menu,
.et_pb_menu nav.et-menu-nav > ul > li.menu-item-has-children:focus-within > ul.sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    transition: opacity 220ms, transform 220ms, visibility 0s !important;
}
.et_pb_menu nav.et-menu-nav ul.sub-menu li {
    padding: 0 !important;
}
.et_pb_menu nav.et-menu-nav ul.sub-menu li a {
    font-family: var(--ui) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--charcoal) !important;
    padding: 12px 22px !important;
    display: block !important;
    line-height: 1.4 !important;
    transition: background 160ms, color 160ms;
    border-bottom: 1px solid transparent;
    width: 100%;
}
.et_pb_menu nav.et-menu-nav ul.sub-menu li a:hover {
    background: var(--tint-soft) !important;
    color: var(--ink) !important;
}
.et_pb_menu nav.et-menu-nav ul.sub-menu li:not(:last-child) > a {
    border-bottom-color: var(--hair);
}

/* --- MOBILE: hamburger button + drawer --- */
.et_pb_menu .et_mobile_nav_menu {
    display: none;
}
@media (max-width: 980px) {
    .et_pb_menu .et_pb_menu__wrap > .et_pb_menu__menu,
    .et_pb_menu nav.et-menu-nav {
        display: none !important;
    }
    .et_pb_menu .et_mobile_nav_menu {
        display: block !important;
        margin: 0 !important;
    }
}

/* Hamburger icon — 3 lines that morph to X */
.et_pb_menu .mobile_menu_bar {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    cursor: pointer;
    position: relative;
}
.et_pb_menu .mobile_menu_bar::before {
    content: '' !important;
    display: block;
    width: 22px;
    height: 1.5px;
    background: var(--ink);
    box-shadow: 0 -7px 0 var(--ink), 0 7px 0 var(--ink);
    transition: all 240ms ease;
    color: transparent !important;
}
.et_pb_menu.et_mobile_menu_active .mobile_menu_bar::before {
    box-shadow: none;
    transform: rotate(45deg);
}
.et_pb_menu.et_mobile_menu_active .mobile_menu_bar::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 1.5px;
    background: var(--ink);
    transform: rotate(-45deg);
}

/* Mobile drawer — full-screen slide-down with backdrop */
.et_pb_menu .et_mobile_menu {
    position: fixed !important;
    inset: 60px 0 0 0 !important;
    width: 100% !important;
    max-height: calc(100vh - 60px) !important;
    overflow-y: auto !important;
    background: #FFFFFF !important;
    border: 0 !important;
    border-top: 1px solid var(--hair) !important;
    padding: 24px 0 !important;
    margin: 0 !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.06) !important;
    /* hidden by default — Divi adds .et_mobile_menu when toggled */
}
body.admin-bar .et_pb_menu .et_mobile_menu {
    inset: 92px 0 0 0 !important;
}
.et_pb_menu .et_mobile_menu li {
    border: 0 !important;
    padding: 0 !important;
}
.et_pb_menu .et_mobile_menu li a {
    font-family: var(--display) !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    color: var(--charcoal) !important;
    padding: 16px 28px !important;
    display: block !important;
    border-bottom: 1px solid var(--hair) !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.et_pb_menu .et_mobile_menu li a:hover {
    background: var(--tint-soft) !important;
}
/* Submenu items in mobile drawer — smaller + indented */
.et_pb_menu .et_mobile_menu ul.sub-menu {
    display: block !important;
    padding: 0 !important;
    background: var(--tint-soft) !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    position: static !important;
    width: 100% !important;
}
.et_pb_menu .et_mobile_menu ul.sub-menu li a {
    font-family: var(--ui) !important;
    font-size: 15px !important;
    padding: 12px 28px 12px 48px !important;
    color: var(--charcoal) !important;
    border-bottom: 1px solid var(--hair) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* --- Intro Call button (header right) on mobile: smaller --- */
@media (max-width: 980px) {
    .et_pb_section.cta-header .et_pb_button {
        font-size: 13px !important;
        padding: 10px 18px !important;
    }
}
@media (max-width: 559px) {
    .et_pb_section.cta-header .et_pb_button {
        font-size: 12px !important;
        padding: 8px 14px !important;
    }
}

/* --- Header logo size --- */
.et_pb_section.cta-header .et_pb_image {
    margin: 0 !important;
}
.et_pb_section.cta-header .et_pb_image img {
    max-height: 56px !important;
    width: auto !important;
}
@media (max-width: 559px) {
    .et_pb_section.cta-header .et_pb_image img { max-height: 44px !important; }
}

/* --- Header row vertical alignment --- */
.et_pb_section.cta-header .et_pb_row {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}
.et_pb_section.cta-header .et_pb_column {
    display: flex !important;
    align-items: center !important;
}
.et_pb_section.cta-header .et_pb_column:first-child { justify-content: flex-start; }
.et_pb_section.cta-header .et_pb_column:nth-child(2) { justify-content: center; }
.et_pb_section.cta-header .et_pb_column:last-child { justify-content: flex-end; }

/* ========================================================================
   HOME PAGE — matches live creationtalentacademy.com structure.
   ======================================================================== */

/* --- Hero: accent the headline + inline CTA row with badge --- */
.cta-home-hero .cta-hero-accent { color: #E6B85A; }

.cta-hero-cta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}
.cta-hero-btn {
    display: inline-flex;
    align-items: center;
    padding: 14px 24px;
    font-family: var(--ui);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: background 200ms, color 200ms, transform 200ms;
}
.cta-hero-btn--primary {
    background: #F5C518;
    color: #020202;
    border: none;
    border-radius: 999px;
}
.cta-hero-btn--primary:hover {
    background: #FFD43B;
    transform: translateY(-1px);
}
.cta-hero-btn--outline {
    background: transparent;
    color: #FFFFFF;
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 999px;
}
.cta-hero-btn--outline:hover {
    background: rgba(255,255,255,0.08);
    border-color: #FFFFFF;
}
.cta-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(220, 70, 50, 0.18);
    border: 1px solid rgba(220, 70, 50, 0.5);
    color: #FFD7CC;
    font-family: var(--ui);
    font-size: 13px;
    font-weight: 500;
    border-radius: 999px;
}
.cta-hero-badge-icon { color: #FF8B6E; font-weight: 700; }

/* Stats row inside hero */
.cta-hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}
.cta-hero-stat-label {
    font-family: var(--ui);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: #E6B85A;
    margin-bottom: 8px;
    text-transform: uppercase;
}
.cta-hero-stat-value {
    font-family: var(--display);
    font-size: 24px;
    color: #FFFFFF;
    line-height: 1.2;
    margin-bottom: 4px;
}
.cta-hero-stat-sub {
    font-family: var(--ui);
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    line-height: 1.45;
}

/* Footer row (5-star left + faculty right) */
.cta-hero-foot-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    font-family: var(--ui);
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    line-height: 1.55;
}
.cta-hero-foot-left strong { color: #F5C518; }
.cta-hero-foot-right strong { color: #FFFFFF; }

@media (max-width: 980px) {
    .cta-hero-stats { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 768px) {
    .cta-hero-cta-row { flex-direction: column; align-items: stretch; }
    .cta-hero-btn, .cta-hero-badge {
        justify-content: center;
        text-align: center;
        width: 100%;
        box-sizing: border-box;
    }
    .cta-hero-foot-row { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (max-width: 559px) {
    .cta-hero-stats { grid-template-columns: 1fr; gap: 18px; }
}

/* --- Dates strip: 4-col on desktop, 2-col on tablet, 1-col on phone --- */
.cta-home-dates .cta-dates-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    border-top: 1px solid rgba(255,255,255,0.2);
    padding-top: 24px;
}
.cta-home-dates .cta-date-label {
    font-family: var(--ui);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    color: #E6B85A;
    margin-bottom: 8px;
    text-transform: uppercase;
}
.cta-home-dates .cta-date-value {
    font-family: var(--display);
    font-size: 22px;
    color: #FFFFFF;
    line-height: 1.2;
    margin-bottom: 4px;
}
.cta-home-dates .cta-date-sub {
    font-family: var(--ui);
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    line-height: 1.4;
}
@media (max-width: 980px) {
    .cta-home-dates .cta-dates-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 559px) {
    .cta-home-dates .cta-dates-grid { grid-template-columns: 1fr; }
}

/* --- Intro to CTA: photo collage --- */
.cta-collage {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 8px;
    aspect-ratio: 1;
}
.cta-collage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 4px;
}
@media (max-width: 768px) {
    .cta-collage { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); }
}

/* --- Our Team grid: 5 cards in row on desktop, scrollable carousel on tablet, stack on phone --- */
.cta-home-team-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
}
.cta-home-team-card {
    text-align: center;
    transition: transform 220ms;
}
.cta-home-team-card:hover { transform: translateY(-6px); }
.cta-home-team-img {
    width: 160px;
    height: 160px;
    margin: 0 auto 16px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--tint-soft);
    transition: box-shadow 220ms;
}
.cta-home-team-card:hover .cta-home-team-img {
    box-shadow: 0 12px 32px rgba(0,0,0,0.18);
}
.cta-home-team-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 400ms;
}
.cta-home-team-card:hover .cta-home-team-img img {
    transform: scale(1.08);
}
.cta-home-team-name {
    font-family: var(--display);
    font-size: 18px;
    color: var(--charcoal);
    margin: 0 0 8px;
    line-height: 1.2;
}
.cta-home-team-role {
    font-family: var(--ui);
    font-size: 12px;
    color: var(--charcoal);
    line-height: 1.45;
    margin: 0;
}
@media (max-width: 980px) {
    .cta-home-team-grid { grid-template-columns: repeat(3, 1fr); }
    .cta-home-team-grid > :nth-child(n+4) { display: none; } /* hide last 2 on tablet to keep grid neat */
}
@media (max-width: 559px) {
    .cta-home-team-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .cta-home-team-grid > :nth-child(n+5) { display: none; }
    .cta-home-team-img { width: 120px; height: 120px; }
}

/* --- Voices of Rising Stars: featured Kris Phillips video card + student testimonial --- */
.cta-voices {
    display: flex;
    flex-direction: column;
    gap: 28px;
    max-width: 1100px;
    margin: 0 auto;
}
/* Featured card: video left, quote right on dark bg */
.cta-voice--featured {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: transparent;
    padding: 0;
    border-radius: 4px;
    overflow: hidden;
    align-items: stretch;
}
.cta-voice-video {
    background: #000;
    aspect-ratio: 16/9;
    overflow: hidden;
}
.cta-voice-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cta-voice-quote {
    background: #1a1a1a;
    color: #FFFFFF;
    padding: 48px 40px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* Student card: single black card */
.cta-voice--student {
    background: #1a1a1a;
    color: #FFFFFF;
    padding: 48px 40px;
    position: relative;
    border-radius: 4px;
}
.cta-voice-q {
    position: absolute;
    top: 8px;
    right: 24px;
    font-family: var(--display);
    font-size: 96px;
    line-height: 1;
    color: rgba(255,255,255,0.18);
}
.cta-voice-intro {
    font-family: var(--ui);
    font-size: 16px;
    color: #FFFFFF;
    line-height: 1.5;
    margin: 0 0 18px;
}
.cta-voice-title {
    font-family: var(--display);
    font-size: 22px;
    color: #FFFFFF;
    margin: 0 0 16px;
    line-height: 1.2;
}
.cta-voice-body {
    font-family: var(--ui);
    font-size: 15px;
    color: rgba(255,255,255,0.92);
    line-height: 1.6;
    margin: 0 0 18px;
    font-style: italic;
    border: 0;
    padding: 0;
}
.cta-voice-attrib {
    font-family: var(--ui);
    font-size: 14px;
    color: #E6B85A;
    text-align: right;
}
@media (max-width: 768px) {
    .cta-voice--featured {
        grid-template-columns: 1fr;
    }
    .cta-voice-quote,
    .cta-voice--student {
        padding: 32px 24px;
    }
}

/* --- Closing CTA contact section --- */
.cta-home-contact-left h3 {
    font-family: var(--display);
    font-size: 22px;
    color: #FFFFFF;
    margin: 0 0 24px;
}
.cta-home-contact-left p {
    font-family: var(--ui);
    font-size: 15px;
    color: rgba(255,255,255,0.92);
    line-height: 1.6;
    margin: 0 0 14px;
}
.cta-home-contact-left p a {
    color: rgba(255,255,255,0.92);
    text-decoration: none;
}
.cta-home-contact-left p a:hover { color: #E6B85A; }
.cta-home-contact-social {
    display: flex;
    gap: 12px;
    margin-top: 18px;
}
.cta-home-contact-social a {
    display: inline-block;
    border: 1px solid rgba(255,255,255,0.3);
    padding: 8px 14px;
    font-family: var(--ui);
    font-size: 13px;
    color: #FFFFFF;
    text-decoration: none;
    transition: border-color 160ms, color 160ms;
}
.cta-home-contact-social a:hover { border-color: #E6B85A; color: #E6B85A; }

/* Contact form on dark — make inputs visible */
.cta-home-form .et_pb_contact_field input,
.cta-home-form .et_pb_contact_field textarea {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    color: #FFFFFF !important;
    font-family: var(--ui) !important;
}
.cta-home-form .et_pb_contact_field input::placeholder,
.cta-home-form .et_pb_contact_field textarea::placeholder {
    color: rgba(255,255,255,0.5) !important;
}

/* ========================================================================
   ABOUT PAGE — campus + certificates + partners (matches live)
   ======================================================================== */

/* Hero: H1 ABOUT in spaced caps, breadcrumb below */
.cta-about-hero h1 { letter-spacing: 0.15em !important; }

/* About Us — 4-photo collage in 2x2 grid */
.cta-about-collage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.cta-about-collage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1;
    display: block;
    border-radius: 4px;
}
.cta-about-spaces {
    list-style: none;
    padding: 0;
    margin: 0;
    font-family: var(--ui);
    font-size: 15px;
    color: var(--charcoal);
    line-height: 1.9;
}
.cta-about-spaces li::before {
    content: "• ";
    color: #888;
    margin-right: 6px;
}

/* Our Certificates — 4-card grid on dark */
.cta-cert-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.cta-cert-card {
    text-align: center;
}
.cta-cert-frame {
    width: 100%;
    aspect-ratio: 3/4;
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 4px;
    margin-bottom: 16px;
    position: relative;
}
.cta-cert-frame::before {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(255,255,255,0.18);
}
.cta-cert-card p {
    font-family: var(--ui);
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    margin: 0;
}
@media (max-width: 980px) {
    .cta-cert-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .cta-cert-grid { grid-template-columns: 1fr; max-width: 280px; margin: 0 auto; }
}

/* Partners & Industry Resources — 4-col grid, NYFA card first */
.cta-partners-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.cta-partners-grid > * {
    aspect-ratio: 1;
    border-radius: 4px;
    overflow: hidden;
    display: block;
}
.cta-partners-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cta-partner--nyfa {
    background: #020202;
    color: #FFFFFF;
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--display);
    font-size: 32px;
    letter-spacing: 0.05em;
}
.cta-partner--nyfa small {
    font-family: var(--ui);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.15em;
    display: block;
    margin-top: 6px;
    color: rgba(255,255,255,0.7);
}
@media (max-width: 768px) {
    .cta-partners-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ========================================================================
   TEAM PAGE — slanted parallelogram faculty cards (matches live)
   ======================================================================== */
.cta-team-list {
    display: flex;
    flex-direction: column;
    gap: 64px;
    max-width: 1100px;
    margin: 48px auto 0;
}

.cta-team-mem {
    position: relative;
    background: #F2F2F2;
    transform: skewX(-12deg);
    padding: 36px 56px 36px 0;
    margin-left: 90px;
    border-radius: 4px;
    overflow: visible;
    transition: background 220ms, box-shadow 220ms;
}
.cta-team-mem:hover {
    background: #FAFAFA;
    box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}
.cta-team-mem:nth-child(even) {
    transform: skewX(12deg);
    margin-left: 0;
    margin-right: 90px;
    padding: 36px 0 36px 56px;
}

/* Un-skew the inner content */
.cta-team-mem-photo,
.cta-team-mem-info {
    transform: skewX(12deg);
}
.cta-team-mem:nth-child(even) .cta-team-mem-photo,
.cta-team-mem:nth-child(even) .cta-team-mem-info {
    transform: skewX(-12deg);
}

/* Photo: circular, large, breaks out the left edge */
.cta-team-mem-photo {
    position: absolute;
    left: -90px;
    top: 50%;
    transform: skewX(12deg) translateY(-50%);
    width: 180px;
    height: 180px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--tint-soft);
    border: 4px solid #FFFFFF;
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}
.cta-team-mem:nth-child(even) .cta-team-mem-photo {
    left: auto;
    right: -90px;
    transform: skewX(-12deg) translateY(-50%);
}
.cta-team-mem-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: none !important;
}

/* Info block: name + role + bio */
.cta-team-mem-info {
    padding-left: 140px;
    padding-right: 32px;
    max-width: 100%;
}
.cta-team-mem:nth-child(even) .cta-team-mem-info {
    padding-left: 32px;
    padding-right: 140px;
    text-align: right;
}

.cta-team-mem-name {
    font-family: var(--display);
    font-size: 38px;
    color: var(--charcoal);
    margin: 0 0 4px;
    line-height: 1.1;
}
.cta-team-mem-role {
    font-family: var(--ui);
    font-size: 13px;
    font-weight: 500;
    color: var(--charcoal);
    margin: 0 0 14px;
    line-height: 1.4;
    opacity: 0.8;
}
.cta-team-mem-bio {
    font-family: var(--ui);
    font-size: 14px;
    line-height: 1.65;
    color: var(--charcoal);
}
.cta-team-mem-bio p {
    margin: 0 0 10px;
}
.cta-team-mem-bio p:last-child { margin-bottom: 0; }

/* Tablet: keep skew but shrink */
@media (max-width: 980px) {
    .cta-team-mem {
        padding: 32px 40px 32px 0;
        margin-left: 70px;
    }
    .cta-team-mem:nth-child(even) {
        padding: 32px 0 32px 40px;
        margin-right: 70px;
    }
    .cta-team-mem-photo {
        width: 140px;
        height: 140px;
        left: -70px;
    }
    .cta-team-mem:nth-child(even) .cta-team-mem-photo {
        right: -70px;
    }
    .cta-team-mem-info { padding-left: 100px; padding-right: 20px; }
    .cta-team-mem:nth-child(even) .cta-team-mem-info { padding-left: 20px; padding-right: 100px; }
    .cta-team-mem-name { font-size: 30px; }
}

/* Phone: drop the skew, stack photo on top */
@media (max-width: 600px) {
    .cta-team-list { gap: 40px; }
    .cta-team-mem,
    .cta-team-mem:nth-child(even) {
        transform: none;
        margin: 0;
        padding: 100px 24px 32px;
        text-align: center;
    }
    .cta-team-mem-photo,
    .cta-team-mem:nth-child(even) .cta-team-mem-photo,
    .cta-team-mem-info,
    .cta-team-mem:nth-child(even) .cta-team-mem-info {
        transform: none;
    }
    .cta-team-mem-photo,
    .cta-team-mem:nth-child(even) .cta-team-mem-photo {
        position: absolute;
        top: -50px;
        left: 50%;
        transform: translateX(-50%);
        right: auto;
        width: 120px;
        height: 120px;
    }
    .cta-team-mem-info,
    .cta-team-mem:nth-child(even) .cta-team-mem-info {
        padding: 0;
        text-align: center;
    }
    .cta-team-mem-name { font-size: 26px; }
}

/* ========================================================================
   CLASSES PAGE — 4 disciplines, alternating image+text rows (matches live)
   ======================================================================== */
.cta-disc-stack {
    display: flex;
    flex-direction: column;
    gap: 96px;
    max-width: 1100px;
    margin: 0 auto;
}
.cta-disc-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}
.cta-disc-row:nth-child(even) .cta-disc-media {
    order: 2;
}
.cta-disc-media img {
    width: 100%;
    height: 100%;
    max-height: 420px;
    object-fit: cover;
    display: block;
    border-radius: 6px;
}
.cta-disc-name {
    font-family: var(--display);
    font-size: 42px;
    color: var(--charcoal);
    margin: 0 0 18px;
    line-height: 1.15;
}
.cta-disc-intro {
    font-family: var(--ui);
    font-size: 16px;
    color: var(--charcoal);
    line-height: 1.7;
    margin: 0 0 28px;
}
.cta-disc-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 24px;
}
.cta-disc-bullets li {
    font-family: var(--ui);
    font-size: 14px;
    color: var(--charcoal);
    line-height: 1.5;
    padding-left: 16px;
    position: relative;
}
.cta-disc-bullets li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: #888;
}

@media (max-width: 768px) {
    .cta-disc-stack { gap: 64px; }
    .cta-disc-row {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .cta-disc-row:nth-child(even) .cta-disc-media {
        order: 0;
    }
    .cta-disc-name { font-size: 32px; }
    .cta-disc-bullets { grid-template-columns: 1fr; }
}

/* ========================================================================
   PACKAGES & PRICING PAGE (matches live)
   ======================================================================== */

/* Comparison table — wrap in horizontal scroll on mobile */
.cta-pkg-table {
    width: 100%;
    border-collapse: collapse;
    background: #FFFFFF;
    font-family: var(--ui);
    font-size: 15px;
    color: var(--charcoal);
    max-width: 1000px;
    margin: 0 auto;
    display: table;
}
/* Wrap the table in a scroll container at narrow widths */
@media (max-width: 768px) {
    .et_pb_code .cta-pkg-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 13px;
        max-width: 100%;
    }
    .cta-pkg-table thead, .cta-pkg-table tbody,
    .cta-pkg-table tr, .cta-pkg-table th, .cta-pkg-table td {
        white-space: nowrap;
    }
    .cta-pkg-table th, .cta-pkg-table td {
        padding: 10px 12px;
    }
}
.cta-pkg-table th,
.cta-pkg-table td {
    padding: 14px 16px;
    text-align: center;
    border-bottom: 1px solid var(--hair);
}
.cta-pkg-table th {
    background: #F5F5F5;
    font-family: var(--display);
    font-size: 17px;
    font-weight: normal;
    color: var(--ink);
}
.cta-pkg-table th.cta-pkg-featured {
    background: var(--ink);
    color: #FFFFFF;
}
.cta-pkg-table th.cta-pkg-feat,
.cta-pkg-table td:first-child {
    text-align: left;
    font-weight: 500;
}
.cta-pkg-table tr:hover td {
    background: rgba(245,197,24,0.06);
    transition: background 160ms;
}
.cta-pkg-table .cta-pkg-price td {
    font-family: var(--display);
    font-size: 20px;
    color: var(--ink);
    background: #FAFAFA;
}
.cta-pkg-note {
    font-family: var(--ui);
    font-size: 13px;
    color: #666;
    text-align: center;
    max-width: 1000px;
    margin: 14px auto 0;
}

/* Why families choose */
.cta-pkg-why {
    max-width: 800px;
    margin: 48px auto 0;
    padding: 32px 28px;
    background: var(--tint-soft);
    border-radius: 6px;
}
.cta-pkg-why h3 {
    font-family: var(--display);
    font-size: 24px;
    color: var(--charcoal);
    margin: 0 0 16px;
}
.cta-pkg-why ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.cta-pkg-why li {
    font-family: var(--ui);
    font-size: 15px;
    line-height: 1.7;
    padding-left: 24px;
    position: relative;
    color: var(--charcoal);
}
.cta-pkg-why li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #F5C518;
    font-weight: bold;
}

/* Growth paths */
.cta-pkg-paths {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.cta-pkg-path {
    padding: 32px 28px;
    background: #FFFFFF;
    border: 1px solid var(--hair);
    border-radius: 6px;
}
.cta-pkg-path--featured {
    background: var(--ink);
    color: #FFFFFF;
    border-color: var(--ink);
}
.cta-pkg-path h3 {
    font-family: var(--display);
    font-size: 26px;
    color: var(--charcoal);
    margin: 0 0 16px;
    line-height: 1.2;
}
.cta-pkg-path h3 span {
    display: block;
    font-size: 16px;
    color: #666;
    font-style: italic;
    margin-top: 4px;
}
.cta-pkg-path--featured h3 { color: #FFFFFF; }
.cta-pkg-path--featured h3 span { color: rgba(255,255,255,0.7); }
.cta-pkg-path-lead {
    font-family: var(--ui);
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 12px;
    color: #F5C518;
}
.cta-pkg-path ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.cta-pkg-path li {
    font-family: var(--ui);
    font-size: 15px;
    line-height: 1.65;
    padding-left: 20px;
    position: relative;
    margin-bottom: 8px;
}
.cta-pkg-path li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: #888;
}
.cta-pkg-path--featured li::before { color: rgba(255,255,255,0.5); }
@media (max-width: 768px) {
    .cta-pkg-paths { grid-template-columns: 1fr; }
}

/* Value props */
.cta-pkg-value {
    list-style: none;
    padding: 0;
    margin: 0;
}
.cta-pkg-value li {
    font-family: var(--ui);
    font-size: 16px;
    line-height: 1.7;
    color: var(--charcoal);
    padding: 16px 0 16px 36px;
    border-bottom: 1px solid var(--hair);
    position: relative;
}
.cta-pkg-value li::before {
    content: "★";
    position: absolute;
    left: 0;
    top: 16px;
    color: #F5C518;
    font-size: 18px;
}
.cta-pkg-value li strong {
    color: var(--ink);
}

/* Admissions process flow */
.cta-pkg-flow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.cta-pkg-flow-step {
    padding: 24px 20px;
    background: #FFFFFF;
    border: 1px solid var(--hair);
    border-radius: 6px;
    position: relative;
    transition: transform 200ms, box-shadow 200ms;
}
.cta-pkg-flow-step:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.08);
}
.cta-pkg-flow-num {
    font-family: var(--display);
    font-size: 36px;
    color: #E6B85A;
    line-height: 1;
    margin-bottom: 8px;
}
.cta-pkg-flow-step h3 {
    font-family: var(--display);
    font-size: 20px;
    color: var(--charcoal);
    margin: 0 0 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--hair);
    line-height: 1.2;
}
.cta-pkg-flow-step ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.cta-pkg-flow-step li {
    font-family: var(--ui);
    font-size: 13px;
    line-height: 1.65;
    color: var(--charcoal);
    margin-bottom: 4px;
}
.cta-pkg-flow-step li::before {
    content: "→ ";
    color: #888;
}
@media (max-width: 980px) {
    .cta-pkg-flow { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 559px) {
    .cta-pkg-flow { grid-template-columns: 1fr; }
}

/* FAQ accordion */
.cta-pkg-faq-list {
    max-width: 800px;
    margin: 0 auto;
}
.cta-pkg-faq {
    border-bottom: 1px solid var(--hair);
    padding: 0;
}
.cta-pkg-faq summary {
    cursor: pointer;
    padding: 20px 36px 20px 0;
    font-family: var(--ui);
    font-size: 16px;
    font-weight: 500;
    color: var(--charcoal);
    list-style: none;
    position: relative;
    transition: color 160ms;
}
.cta-pkg-faq summary::-webkit-details-marker { display: none; }
.cta-pkg-faq summary::after {
    content: "+";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: #888;
    transition: transform 200ms;
}
.cta-pkg-faq[open] summary::after {
    transform: translateY(-50%) rotate(45deg);
    color: #F5C518;
}
.cta-pkg-faq summary:hover {
    color: var(--ink);
}
.cta-pkg-faq p {
    font-family: var(--ui);
    font-size: 15px;
    line-height: 1.7;
    color: var(--charcoal);
    margin: 0 0 20px;
    padding-right: 36px;
}
.cta-pkg-faq-empty { color: #888 !important; font-style: italic; }

/* ========================================================================
   CONTACT PAGE
   ======================================================================== */
.cta-contact-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    align-items: start;
}
.cta-contact-block h3 {
    font-family: var(--display);
    font-size: 22px;
    color: var(--charcoal);
    margin: 0 0 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--hair);
}
.cta-contact-block p {
    font-family: var(--ui);
    font-size: 15px;
    line-height: 1.7;
    color: var(--charcoal);
    margin: 0 0 8px;
}
.cta-contact-block a {
    color: var(--charcoal);
    text-decoration: none;
    transition: color 160ms;
}
.cta-contact-block a:hover { color: #F5C518; }
.cta-contact-qr {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #1a1a1a 0%, #333 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.6);
    font-family: var(--ui);
    font-size: 14px;
    letter-spacing: 0.2em;
    margin-top: 8px;
}
.cta-contact-map iframe {
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
@media (max-width: 768px) {
    .cta-contact-info { grid-template-columns: 1fr; gap: 32px; }
}

/* Contact form on slanted-card background */
.cta-contact-form-wrap .et_pb_contact_form_container {
    background: #FFFFFF;
    padding: 40px;
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    border-left: 4px solid #F5C518;
}
.cta-contact-form-wrap .et_pb_contact_field input,
.cta-contact-form-wrap .et_pb_contact_field textarea {
    background: #FAFAFA !important;
    border: 1px solid var(--hair) !important;
    color: var(--charcoal) !important;
    font-family: var(--ui) !important;
    transition: border-color 160ms, background 160ms;
}
.cta-contact-form-wrap .et_pb_contact_field input:focus,
.cta-contact-form-wrap .et_pb_contact_field textarea:focus {
    border-color: #F5C518 !important;
    background: #FFFFFF !important;
}

/* ========================================================================
   SELF-TAPE STUDIO
   ======================================================================== */
.cta-st-pricing {
    background: var(--ink);
    color: #FFFFFF;
    padding: 36px 40px;
    text-align: center;
    border-radius: 6px;
    max-width: 600px;
    margin: 0 auto;
}
.cta-st-pricing-label {
    font-family: var(--ui);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    margin-bottom: 12px;
}
.cta-st-pricing-price {
    font-family: var(--display);
    font-size: 64px;
    color: #F5C518;
    line-height: 1;
}
.cta-st-pricing-price span {
    font-size: 18px;
    color: rgba(255,255,255,0.7);
    margin-left: 6px;
    letter-spacing: normal;
}
.cta-st-why {
    background: #FFFFFF;
    padding: 40px;
    border-radius: 6px;
    border-left: 4px solid #F5C518;
}
.cta-st-why h3 {
    font-family: var(--display);
    font-size: 28px;
    color: var(--charcoal);
    margin: 0 0 24px;
    line-height: 1.2;
}
.cta-st-why ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.cta-st-why li {
    font-family: var(--ui);
    font-size: 16px;
    line-height: 1.75;
    color: var(--charcoal);
    padding: 12px 0 12px 32px;
    border-bottom: 1px solid var(--hair);
    position: relative;
}
.cta-st-why li:last-child { border-bottom: 0; }
.cta-st-why li::before {
    content: "✓";
    position: absolute;
    left: 4px;
    top: 12px;
    color: #F5C518;
    font-weight: bold;
    font-size: 18px;
}

/* ========================================================================
   MOMENTO / PHOTO STUDIO
   ======================================================================== */
.cta-momento-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.cta-momento-grid img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
    border-radius: 6px;
    transition: transform 300ms, filter 300ms;
}
.cta-momento-grid img:hover {
    transform: scale(1.02);
    filter: brightness(1.05);
}
@media (max-width: 600px) {
    .cta-momento-grid { grid-template-columns: 1fr; }
}

/* ========================================================================
   GALLERY (testimonials)
   ======================================================================== */
/* Full-width gallery section — override Divi's row max-width so grid bleeds edge-to-edge */
body #page-container .cta-gallery-fullwidth .et_pb_row {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
body #page-container .cta-gallery-fullwidth .et_pb_column {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Student portrait grid — full-width edge-to-edge, larger cards.
   Live uses ~4-col on desktop. Per request, our tiles are bigger than the
   previous 7-9 col layout. */
.cta-student-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    padding: 0;
}
.cta-student-card {
    aspect-ratio: 3/4;
    overflow: hidden;
    background: var(--tint-soft);
    position: relative;
    transition: transform 240ms ease-out;
}
.cta-student-card:hover {
    transform: scale(1.03);
    z-index: 2;
}
.cta-student-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: filter 320ms;
}
.cta-student-card:hover img {
    filter: brightness(1.08);
}
/* Responsive: column count shrinks as viewport shrinks, but each card
   stays as large as possible at every breakpoint. */
@media (min-width: 1800px) { .cta-student-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 1280px) { .cta-student-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px)  { .cta-student-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 559px)  { .cta-student-grid { grid-template-columns: repeat(2, 1fr); } }

.cta-gallery-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}
.cta-gallery-list > :first-child {
    grid-column: 1 / -1;
}
.cta-gallery-testimonial {
    background: #FFFFFF;
    padding: 40px 36px;
    border-radius: 6px;
    border: 1px solid var(--hair);
    position: relative;
    transition: transform 240ms, box-shadow 240ms;
}
.cta-gallery-testimonial:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.08);
    border-color: #F5C518;
}
.cta-gallery-q {
    position: absolute;
    top: 8px;
    right: 28px;
    font-family: var(--display);
    font-size: 96px;
    line-height: 1;
    color: rgba(245,197,24,0.15);
}
.cta-gallery-testimonial blockquote {
    font-family: var(--ui);
    font-size: 16px;
    line-height: 1.7;
    color: var(--charcoal);
    margin: 0 0 20px;
    border: 0;
    padding: 0;
    font-style: italic;
}
.cta-gallery-attrib {
    font-family: var(--ui);
    font-size: 13px;
    color: #666;
    font-weight: 500;
    letter-spacing: 0.05em;
}
@media (max-width: 768px) {
    .cta-gallery-list { grid-template-columns: 1fr; gap: 20px; }
    .cta-gallery-list > :first-child { grid-column: auto; }
    .cta-gallery-testimonial { padding: 32px 24px; }
}

/* ========================================================================
   END
   ======================================================================== */


/* ============================================================
   Header language switcher
     - Desktop (>980px): inline "English | 中文" text
     - Mobile  (<=980px): compact globe icon that toggles language
   ============================================================ */
.cta-header .cta-header-lang {
    margin: 0 24px 0 0 !important;
    display: inline-block;
    vertical-align: middle;
    text-align: right;
    line-height: 1 !important;
}
.cta-header .cta-header-lang .et_pb_code_inner,
.cta-header .cta-header-lang > .et_pb_code_inner > .et_pb_module_header { line-height: 1 !important; }

/* Desktop inline text version */
.cta-lang {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 500 13px/1 Ubuntu, sans-serif;
    letter-spacing: 0.02em;
}
.cta-lang a.cta-lang-link {
    color: #444;
    text-decoration: none;
    padding: 4px 2px;
    transition: color 0.15s ease;
    cursor: pointer;
}
.cta-lang a.cta-lang-link:hover,
.cta-lang a.cta-lang-link:focus { color: #020202; }
.cta-lang a.cta-lang-link.is-active { color: #020202; font-weight: 700; }
.cta-lang-sep { color: #cccccc; font-weight: 400; }

/* Mobile globe-icon variant (hidden on desktop) */
.cta-lang-globe {
    display: none;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: 1px solid #E6E6E6;
    border-radius: 999px;
    color: #333;
    padding: 5px 10px 5px 8px;
    cursor: pointer;
    font: 600 11px/1 Ubuntu, sans-serif;
    letter-spacing: 0.06em;
    line-height: 1;
    vertical-align: middle;
    text-transform: uppercase;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.cta-lang-globe svg { display: block; flex-shrink: 0; }
.cta-lang-globe:hover,
.cta-lang-globe:focus {
    color: #020202;
    border-color: #bdbdbd;
    background: #fafafa;
}
.cta-lang-globe-label {
    pointer-events: none;
    line-height: 1;
}

/* Hide GTranslate's default widget UI — we use our own buttons. */
.cta-lang-hidden,
.cta-lang-hidden * {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Prevent the Intro Call button from breaking onto two lines. */
.cta-header .cta-header-cta { white-space: nowrap !important; }
.cta-header .et_pb_column:last-child .et_pb_module {
    display: inline-block;
    vertical-align: middle;
}

/* ============================================================
   Mobile/tablet header layout
   ============================================================ */
@media (max-width: 980px) {
    /* Show globe icon, hide text variant */
    .cta-lang { display: none !important; }
    .cta-lang-globe { display: inline-flex !important; }

    /* Keep the 3 columns laid out in a single row on mobile so logo + lang
       + hamburger live on one line. Divi normally stacks columns; we override. */
    .cta-header .et_pb_row { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; width: 100% !important; }
    .cta-header .et_pb_column { width: auto !important; flex: 0 0 auto !important; margin-right: 0 !important; }
    .cta-header .et_pb_column:nth-child(1) { flex: 0 0 auto; }   /* logo */
    .cta-header .et_pb_column:nth-child(2) { flex: 1 1 auto; text-align: right; }  /* spacer / menu wrapper for hamburger */
    .cta-header .et_pb_column:nth-child(3) { flex: 0 0 auto; text-align: right; white-space: nowrap; }

    /* Slightly trim Intro Call to keep it on one line */
    .cta-header .cta-header-cta {
        margin: 0 !important;
    }
    .cta-header .cta-header-cta .et_pb_button {
        padding: 10px 14px !important;
        font-size: 13px !important;
    }
    .cta-header .cta-header-lang { margin: 0 8px 0 0 !important; }
}

@media (max-width: 600px) {
    /* On very small phones make the Intro Call button extra compact and
       tighten paddings so the header fits a 320–390px viewport. */
    .cta-header .et_pb_row { padding: 6px 12px !important; }
    .cta-header .et_pb_column:nth-child(1) img { max-height: 44px !important; }
    .cta-header .cta-header-cta .et_pb_button {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }
    .cta-lang-globe {
        padding: 4px 8px 4px 6px;
        font-size: 10px;
    }
    .cta-lang-globe svg { width: 18px; height: 18px; }
}

/* ============================================================
   Slide-out drawer mobile menu
   ============================================================ */
.cta-burger {
    display: none;
    background: transparent;
    border: 0;
    padding: 8px 10px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    vertical-align: middle;
    line-height: 0;
}
.cta-burger span {
    display: block;
    width: 26px;
    height: 2px;
    background: #020202;
    margin: 5px 0;
    transition: transform 0.25s ease, opacity 0.2s ease;
    transform-origin: center;
}
body.cta-drawer-open .cta-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.cta-drawer-open .cta-burger span:nth-child(2) { opacity: 0; }
body.cta-drawer-open .cta-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.cta-drawer {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    visibility: hidden;
}
.cta-drawer.is-open { pointer-events: auto; visibility: visible; }
.cta-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 2, 2, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.cta-drawer.is-open .cta-drawer-backdrop { opacity: 1; }
.cta-drawer-panel {
    position: absolute;
    top: 0; right: 0;
    height: 100%;
    width: 86%;
    max-width: 380px;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    transform: translateX(105%);
    transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: -16px 0 40px rgba(0,0,0,0.15);
    overflow: hidden;
}
.cta-drawer.is-open .cta-drawer-panel { transform: translateX(0); }

.cta-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px 18px;
    border-bottom: 1px solid #EFEFEF;
    flex-shrink: 0;
}
.cta-drawer-eyebrow {
    font: 500 12px/1 Ubuntu, sans-serif;
    color: #020202;
    letter-spacing: 0.36em;
    text-transform: uppercase;
}
.cta-drawer-close {
    background: transparent;
    border: 0;
    color: #020202;
    cursor: pointer;
    padding: 6px;
    margin: -6px;
    line-height: 0;
    border-radius: 999px;
    transition: background 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.cta-drawer-close:hover, .cta-drawer-close:focus { background: #F5F5F5; }
.cta-drawer-close svg { display: block; }

.cta-drawer-nav { flex: 1; overflow-y: auto; padding: 8px 0 16px; -webkit-overflow-scrolling: touch; }
.cta-drawer-nav ul { list-style: none; margin: 0; padding: 0; }
.cta-drawer-nav .cta-drawer-menu-list > li { border-bottom: 1px solid #F5F5F5; }
.cta-drawer-nav .cta-drawer-menu-list > li:last-child { border-bottom: 0; }
.cta-drawer-nav .cta-drawer-menu-list > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    font: 400 22px/1.2 Marcellus, Georgia, serif;
    color: #020202;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    letter-spacing: 0.01em;
}
.cta-drawer-nav .cta-drawer-menu-list > li > a:hover,
.cta-drawer-nav .cta-drawer-menu-list > li > a:focus { background: #FAFAFA; }
.cta-drawer-nav .cta-drawer-menu-list > li.has-sub > a:after {
    content: '';
    width: 8px; height: 8px;
    border-right: 1.5px solid #888;
    border-bottom: 1.5px solid #888;
    transform: rotate(-45deg);
    transition: transform 0.25s ease, border-color 0.2s ease;
    margin-left: 16px;
    flex-shrink: 0;
}
.cta-drawer-nav .cta-drawer-menu-list > li.is-expanded > a:after {
    transform: rotate(45deg);
    border-color: #020202;
}
.cta-drawer-nav .cta-drawer-menu-list ul {
    display: none;
    background: #FBFBFB;
    border-top: 1px solid #F0F0F0;
    padding: 4px 0;
}
.cta-drawer-nav .cta-drawer-menu-list li.is-expanded > ul { display: block; }
.cta-drawer-nav .cta-drawer-menu-list ul a {
    display: block;
    padding: 12px 24px 12px 40px;
    font: 500 14px/1.4 Ubuntu, sans-serif;
    color: #444;
    text-decoration: none;
    transition: color 0.15s, background 0.15s;
    letter-spacing: 0.02em;
}
.cta-drawer-nav .cta-drawer-menu-list ul a:hover,
.cta-drawer-nav .cta-drawer-menu-list ul a:focus { color: #020202; background: #F2F2F2; }

.cta-drawer-foot {
    border-top: 1px solid #EFEFEF;
    padding: 18px 24px 22px;
    background: #FFFFFF;
    flex-shrink: 0;
}
.cta-drawer-lang {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 14px;
    font: 500 13px/1 Ubuntu, sans-serif;
    letter-spacing: 0.04em;
}
.cta-drawer-lang a {
    color: #555;
    text-decoration: none;
    padding: 6px 4px;
    transition: color 0.15s;
    cursor: pointer;
}
.cta-drawer-lang a:hover { color: #020202; }
.cta-drawer-lang a.is-active { color: #020202; font-weight: 700; }
.cta-drawer-lang-sep { color: #CCC; }

.cta-drawer-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #020202;
    color: #FFFFFF;
    padding: 14px 18px;
    border-radius: 999px;
    font: 500 14px/1 Ubuntu, sans-serif;
    text-decoration: none;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 12px;
    transition: background 0.15s, transform 0.1s;
}
.cta-drawer-cta:hover { background: #222; color: #FFFFFF; }
.cta-drawer-cta:active { transform: scale(0.98); }
.cta-drawer-cta svg { flex-shrink: 0; }
.cta-drawer-meta {
    font: 400 11px/1.5 Ubuntu, sans-serif;
    color: #888;
    text-align: center;
    letter-spacing: 0.04em;
}

body.cta-drawer-open { overflow: hidden; }

/* Hide Divi's broken default mobile menu artifacts */
.cta-header .et_mobile_menu,
.cta-header .mobile_nav,
.cta-header .mobile_menu_bar,
.cta-header .et_pb_menu__wrap > .et_mobile_nav_menu { display: none !important; }

@media (max-width: 980px) {
    .cta-burger { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; }

    /* Force the header row into a single horizontal flex row (Divi defaults
       to column stacking on mobile, which gives a 188px-tall header). */
    .cta-header .et_pb_section_inner,
    .cta-header .et_pb_row,
    .cta-header .et_pb_row_inner {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 8px 16px !important;
        margin: 0 auto !important;
    }
    .cta-header .et_pb_column {
        width: auto !important;
        max-width: none !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .cta-header .et_pb_column:nth-child(1) { flex: 0 0 auto; }
    .cta-header .et_pb_column:nth-child(2) { flex: 1 1 auto; min-width: 0; }
    .cta-header .et_pb_column:nth-child(3) { flex: 0 0 auto; text-align: right; }
    .cta-header .et_pb_column:nth-child(1) img { max-height: 42px !important; width: auto !important; display: block; }

    
    /* Logo bigger on mobile */
    .cta-header .et_pb_column:nth-child(1) img { max-height: 54px !important; width: auto !important; display: block !important; }
    .cta-header .et_pb_column:nth-child(1) .et_pb_image_wrap { display: block !important; line-height: 0 !important; }
    .cta-header .et_pb_column:nth-child(1) .et_pb_module { margin: 0 !important; padding: 0 !important; line-height: 0 !important; }

    /* Burger smaller + no bottom margin from Divi defaults */
    .cta-header .et_pb_column:nth-child(3) .et_pb_module,
    .cta-header .et_pb_column:nth-child(3) > div { margin: 0 !important; padding: 0 !important; line-height: 0 !important; min-height: 0 !important; }
    .cta-header .cta-header-burger { line-height: 0 !important; }
    .cta-burger { padding: 4px 6px !important; }
    .cta-burger span { width: 24px !important; height: 2px !important; margin: 4px 0 !important; }

    /* Hide Divi desktop menu + items the drawer handles */
    .cta-header .et_pb_menu .et-menu-nav,
    .cta-header .et_pb_menu .et-menu,
    .cta-header .et_pb_menu .et_pb_menu__menu { display: none !important; }
    .cta-header .et_pb_menu, .cta-header .et_pb_menu .et_pb_menu_inner_container { padding: 0 !important; margin: 0 !important; min-height: 0 !important; }
    .cta-header .cta-header-lang,
    .cta-header .cta-header-cta { display: none !important; }
    /* The empty et_pb_module placeholders inside col 2 shouldn't take space */
    .cta-header .et_pb_column:nth-child(2) .et_pb_module:empty,
    .cta-header .et_pb_column:nth-child(2) > div:empty { display: none !important; }
}

/* ============================================================
   Sticky header (mobile + desktop) — position:fixed with
   JS-driven body padding-top accounting for WP admin bar.
   ============================================================ */
.cta-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100 !important;
    background: #FFFFFF;
    box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04);
}
/* Below 600px WP hides the admin bar entirely; nothing to offset. */