/* ========== RESET & VARIABLES ========== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --nav-height: 82px;
    --primary: #1C4F32;
    --primary-dark: #123622;
    --accent: #F68926;
    --accent-light: #FFB067;
    --accent-hover: #FF9E4A;
    --accent-text: #9C3D00;
    --accent-on-dark: #FFB067;
    --text: #1D2A23;
    --text-light: #4D5E55;
    --white: #ffffff;
    --light-bg: #F8F7F4;
    --section-bg: #F0EDE6;
    --surface: #ffffff;
    --on-primary: #ffffff;
    --on-accent: #123622;
    --success: #25D366;
    --on-success: #123622;
    --success-text: #0B6B3A;
    --whatsapp: #0F7A40;
    --whatsapp-hover: #0B6B3A;
    --danger: #B3261E;
    --info: #1C4F32;            /* brand green - no blue in the palette */
    --border: #D9DED9;
    --control-border: #83938A;
    --shadow-sm: 0 3px 15px rgba(18, 54, 34, 0.08);
    --shadow-md: 0 10px 30px rgba(18, 54, 34, 0.12);
}

html {
    scroll-behavior: smooth;
    overflow-x: clip;
    scroll-padding-top: 90px;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--text);
    background: var(--surface);
    line-height: 1.6;
    min-width: 0;
    overflow-x: clip;
    overflow-wrap: break-word;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }

button,
input,
select,
textarea {
    color: inherit;
    font: inherit;
}

button,
a,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

a,
button {
    touch-action: manipulation;
}

:focus-visible {
    outline: 3px solid var(--white);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px var(--accent-text);
}

::selection {
    background: var(--accent);
    color: var(--on-accent);
}

/* ========== NAVBAR ========== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10020;
    background: rgba(18, 54, 34, 0.97);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.navbar.scrolled {
    box-shadow: 0 2px 20px rgba(0,0,0,0.2);
}

.nav-container {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    height: var(--nav-height);
}

/* Logo mark with the affiliation line stacked beneath it. */
.nav-logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.nav-logo img {
    height: 60px;
    width: auto;
}

.nav-logo-text {
    color: var(--white);
}

.nav-logo-text span {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    line-height: 1.1;
    opacity: 0.85;
    white-space: nowrap;
}

/* Top-level nav */
.nav-menu {
    display: flex;
    gap: 0;
    align-items: center;
}

.nav-item {
    position: relative;
}

.nav-item > a {
    color: var(--white);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.3px;
    padding: 26px 14px;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    transition: color 0.3s, background 0.3s;
}

.nav-item > a:hover,
.nav-item:hover > a,
.nav-item > a.is-current {
    color: var(--accent-on-dark);
    background: rgba(255,255,255,0.05);
}

.hi-icon.nav-arrow {
    width: 0.75rem;
    height: 0.75rem;
    flex: 0 0 auto;
    transition: transform 0.3s;
}

.nav-item:hover .nav-arrow,
.nav-item:focus-within .nav-arrow {
    transform: rotate(180deg);
}

/* Dropdown */
.nav-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background: var(--white);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 100;
    padding: 8px 0;
    max-height: calc(100vh - var(--nav-height));
    max-height: calc(100dvh - var(--nav-height));
    overflow-y: auto;
    overscroll-behavior: contain;
}

.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-dropdown a {
    display: block;
    padding: 10px 20px;
    color: var(--text);
    font-size: 0.88rem;
    transition: all 0.2s;
    border-left: 3px solid transparent;
}

.nav-dropdown a:hover {
    background: var(--light-bg);
    color: var(--primary);
    border-left-color: var(--accent);
    padding-left: 24px;
}

/* Apply Now CTA */
.nav-cta {
    background: var(--accent) !important;
    color: var(--on-accent) !important;
    padding: 10px 22px !important;
    border-radius: 50px;
    font-weight: 700 !important;
    margin-left: 10px;
    transition: transform 0.3s, box-shadow 0.3s !important;
}

.nav-dropdown a .hi-icon,
.mobile-submenu a .hi-icon {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-right: 0.25rem;
    vertical-align: -0.2em;
}

.nav-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(246, 137, 38, 0.45);
    background: var(--accent-hover) !important;
}

/* Mobile nav */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 10px;
    width: 44px;
    height: 44px;
    z-index: 10022;
}

.hamburger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.hamburger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

.hamburger span {
    width: 28px;
    height: 3px;
    background: var(--white);
    border-radius: 3px;
    transition: all 0.3s;
}

.mobile-menu {
    display: none;
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--primary);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: calc(6rem + env(safe-area-inset-bottom));
    z-index: 10010;
    padding-top: 1rem;
}

.mobile-menu.open {
    display: block;
}

.mobile-menu .mobile-item {
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.mobile-menu .mobile-item > a,
.mobile-menu .mobile-item > button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 24px;
    color: var(--white);
    font-size: 0.95rem;
    font-weight: 500;
    min-height: 48px;
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.mobile-menu .mobile-item > a:hover,
.mobile-menu .mobile-item > button:hover {
    background: rgba(255,255,255,0.05);
}

.mobile-submenu {
    display: none;
    background: rgba(0,0,0,0.15);
    padding: 4px 0;
}

.mobile-submenu.open {
    display: block;
}

.mobile-submenu a {
    display: block;
    padding: 10px 40px;
    color: rgba(255,255,255,0.75);
    font-size: 0.88rem;
    transition: all 0.2s;
    min-height: 44px;
}

.mobile-submenu a:hover {
    color: var(--accent-on-dark);
    padding-left: 46px;
}

.mobile-cta {
    display: block;
    margin: 1rem 24px;
    padding: 14px;
    background: var(--accent);
    color: var(--on-accent) !important;
    text-align: center;
    border-radius: 50px;
    font-weight: 700;
}

body.mobile-menu-open {
    overflow: hidden;
}

/* ========== PAGE HERO / BANNER ========== */
.page-banner {
    position: relative;
    height: auto;
    min-height: 350px;
    padding: 3rem 0;
    margin-top: var(--nav-height);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-banner img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(8, 36, 22, 0.52) 0%, rgba(0, 0, 0, 0.38) 100%);
}

.page-banner-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: var(--white);
    width: min(100% - 2rem, 1000px);
}

.page-banner-content h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 0.75rem;
    text-wrap: balance;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.42);
}

.breadcrumb {
    display: flex;
    justify-content: center;
    gap: 8px;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.88);
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.42);
}

.breadcrumb a {
    color: var(--accent-on-dark);
    transition: color 0.3s;
    /* Keep the tappable area at least 24px tall without changing the visual size. */
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

.breadcrumb a:hover {
    color: var(--accent-light);
}

.breadcrumb span {
    color: rgba(255,255,255,0.85);
}

/* ========== HERO SLIDER (home) ========== */
.hero {
    position: relative;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
}

.hero-slider { position: absolute; inset: 0; }

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.2s ease;
}

.hero-slide.active { opacity: 1; }

.hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(8, 36, 22, 0.62) 0%, rgba(0, 0, 0, 0.34) 58%, rgba(0, 0, 0, 0.1) 100%);
}

.hero-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 2rem;
    width: 100%;
}

.hero-badge {
    display: inline-block;
    background: rgba(18, 54, 34, 0.94);
    border: 1px solid var(--accent-on-dark);
    color: var(--accent-on-dark);
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    animation: fadeInUp 0.8s ease;
}

.hero-content h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.25rem, 6vw, 4rem);
    font-weight: 700;
    color: var(--white);
    line-height: 1.15;
    max-width: 700px;
    margin-bottom: 1.5rem;
    text-wrap: balance;
    text-shadow: 0 3px 24px rgba(0, 0, 0, 0.42);
    animation: fadeInUp 0.8s ease 0.2s both;
}

.hero-content p {
    font-size: 1.2rem;
    color: rgba(255,255,255,0.85);
    max-width: 550px;
    margin-bottom: 2.5rem;
    font-weight: 300;
    line-height: 1.8;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.42);
    animation: fadeInUp 0.8s ease 0.4s both;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    animation: fadeInUp 0.8s ease 0.6s both;
}

/* ========== BUTTONS ========== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 600;
    transition: all 0.3s;
    cursor: pointer;
    border: none;
    font-family: 'Inter', sans-serif;
    min-height: 48px;
    justify-content: center;
    text-align: center;
}

.btn-primary {
    background: var(--accent);
    color: var(--on-accent);
}

.btn-primary:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(246, 137, 38, 0.4);
}

.btn-outline {
    background: transparent;
    color: var(--white);
    border: 2px solid rgba(255,255,255,0.5);    padding: 12px 30px;
}

.btn-outline:hover {
    border-color: var(--white);
    background: rgba(255,255,255,0.1);
    transform: translateY(-2px);
}

.btn-dark {
    background: var(--primary);
    color: var(--white);
}

.btn-dark:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(18, 54, 34, 0.3);
}

/* ========== STATS BAR ========== */
.stats-bar {
    background: var(--primary);
    position: relative;
    z-index: 5;
    clear: both;
}

.stats-container {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.stat-item {
    padding: 2.5rem 2rem;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,0.1);
    transition: background 0.3s;
}

.stat-item:last-child { border-right: none; }
.stat-item:hover { background: rgba(255,255,255,0.05); }

.stat-number {
    font-family: 'Playfair Display', serif;
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--accent-on-dark);
    line-height: 1;
}

.stat-label {
    color: rgba(255,255,255,0.7);
    font-size: 0.9rem;
    margin-top: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ========== SECTION HELPERS ==========
   Vertical rhythm was 5rem/4rem/3rem/2.5rem top and bottom, which stacked to
   roughly 15 screenfuls on the homepage. Tightened by 30% at every breakpoint
   so the page reads as a sequence of bands rather than a scroll marathon. The
   horizontal padding and every section background are untouched. */
.section { padding: 3.5rem 0; }
.section--light { background: var(--light-bg); }
.section--white { background: var(--white); }
.section--tinted { background: linear-gradient(135deg, var(--light-bg) 0%, var(--section-bg) 100%); }

.container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 2rem;
}

.section-header {
    text-align: center;
    margin-bottom: 2.25rem;
}

.section-tag {
    display: inline-block;
    color: var(--accent-text);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.85rem;
    margin-bottom: 0.6rem;
}

.cta-section .section-tag {
    color: var(--accent-on-dark);
}

.section-header h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.9rem, 4vw, 2.8rem);
    color: var(--primary);
    margin-bottom: 0.75rem;
    text-wrap: balance;
}

.section-header p {
    color: var(--text-light);
    max-width: 600px;
    margin: 0 auto;
    font-size: 1.05rem;
}

/* ========== CONTENT LAYOUT ========== */
.content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.content-grid > *,
.card-grid > *,
.contact-grid > *,
.footer-grid > * {
    min-width: 0;
}

.content-grid--reverse { direction: rtl; }
.content-grid--reverse > * { direction: ltr; }

.content-img {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.12);
}

.content-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.content-text h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    color: var(--primary);
    margin-bottom: 1.5rem;
}

.content-text h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    color: var(--primary);
    margin-bottom: 1rem;
}

.content-text p {
    color: var(--text-light);
    margin-bottom: 1.2rem;
    line-height: 1.8;
}

.content-text ul {
    list-style: none;
    margin: 1.5rem 0;
}

.content-text ul li {
    padding: 6px 0 6px 28px;
    position: relative;
    color: var(--text);
    font-weight: 500;
}

.content-text ul li::before {
    content: '';
    position: absolute;
    top: 11px;
    left: 5px;
    width: 6px;
    height: 11px;
    border: solid var(--primary);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* ========== CARDS ========== */
.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.card-grid--4 { grid-template-columns: repeat(4, 1fr); }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }

.card {
    background: var(--white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    transition: all 0.4s;
}

.card--accent {
    border: 2px solid var(--accent);
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.12);
}

.card-img {
    height: 220px;
    overflow: hidden;
}

.card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.card:hover .card-img img {
    transform: scale(1.08);
}

.card-body {
    padding: 1.8rem;
}

.card-body h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    color: var(--primary);
    margin-bottom: 0.75rem;
}

.card-body p {
    color: var(--text-light);
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 1rem;
}

.card-link {
    color: var(--accent-text);
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.3s;
}

.card-link:hover { gap: 10px; }

/* Icon cards (why us etc) */
.icon-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s;
}

.icon-card:hover {
    background: rgba(255,255,255,0.1);
    transform: translateY(-5px);
}

.icon-card--light {
    background: var(--white);
    border: 1px solid var(--border);
}

.icon-card--light:hover {
    background: var(--white);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.icon-card .icon-box { color: var(--white) !important; 
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 1.8rem;
}

.icon-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
}

.icon-card p {
    color: rgba(255,255,255,0.8);
    font-size: 0.9rem;
    line-height: 1.7;
}

.icon-card--light p { color: var(--text-light); }
.icon-card--light h3 { color: var(--primary); }

/* ========== GALLERY GRID ========== */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 250px;
    gap: 1rem;
}

.gallery-item {
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.gallery-item--wide { grid-column: span 2; }
.gallery-item--tall { grid-row: span 2; }

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.gallery-item:hover img { transform: scale(1.08); }

.gallery-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(28, 79, 50, 0.65) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s;
}

.gallery-item:hover::after { opacity: 1; }

/* ========== GALLERY YEAR FILTER ==========
   A centred row of pill tabs above .gallery-grid. The buttons never shrink, so
   a long row wraps onto a second line rather than squashing the labels; if a
   single row still cannot fit it scrolls sideways instead of clipping. The
   8px vertical padding is what keeps the focus ring inside that scroll box. */
.gallery-years {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin: 0 0 1.75rem;
    padding: 8px 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

.gallery-year-btn {
    flex: 0 0 auto;
    padding: 9px 20px;
    min-height: 40px;
    background: var(--white);
    color: var(--text-light);
    border: 1.5px solid var(--control-border);
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.25s;
}

.gallery-year-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.gallery-year-btn.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
    box-shadow: 0 4px 12px rgba(28, 79, 50, 0.22);
}

.gallery-year-btn.is-active:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: var(--on-primary);
}

/* Restate the site-wide ring - the active tab sets its own box-shadow, which
   would otherwise be what a focused tab shows instead of a focus indicator. */
.gallery-year-btn:focus-visible {
    outline: 3px solid var(--white);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px var(--accent-text);
}

/* Filtered-out tiles. Display none rather than visibility so the grid reflows
   and does not leave holes where the hidden items were. */
.gallery-item.is-hidden { display: none; }

@media (max-width: 480px) {
    .gallery-years { gap: 0.45rem; margin-bottom: 1.25rem; }
    .gallery-year-btn { padding: 8px 15px; font-size: 0.85rem; }
}

/* ========== CTA SECTION ========== */
.cta-section {
    padding: 3.5rem 2rem;
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-section::before,
.cta-section::after {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(246, 137, 38, 0.08);
}

.cta-section::before { top: -150px; left: -150px; }
.cta-section::after { bottom: -150px; right: -150px; }

.cta-section h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.9rem, 4vw, 2.8rem);
    color: var(--white);
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
    text-wrap: balance;
}

.cta-section p {
    color: rgba(255,255,255,0.85);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto 2.5rem;
    position: relative;
    z-index: 1;
    line-height: 1.7;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
}

.button-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
}

.content-text .button-row {
    justify-content: flex-start;
}

.cta-buttons .btn-primary {
    background: var(--accent);
    color: var(--on-accent);
    box-shadow: 0 4px 15px rgba(246, 137, 38, 0.4);
}

.cta-buttons .btn-primary:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(246, 137, 38, 0.55);
}

/* ========== FORMS ========== */
.form-card {
    background: var(--light-bg);
    padding: 2.5rem;
    border-radius: 16px;
}

.form-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    color: var(--primary);
    margin-bottom: 1.5rem;
}

.form-group { margin-bottom: 1.2rem; }

.form-group label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--primary);
    margin-bottom: 0.4rem;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--control-border);
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    transition: border-color 0.3s;
    background: var(--white);
}

.form-group input::placeholder,
.form-group textarea::placeholder,
.apply-form-card input::placeholder {
    color: #68776F;
    opacity: 1;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(28, 79, 50, 0.14);
}

.form-group textarea {
    height: 120px;
    resize: vertical;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.btn-submit {
    width: 100%;
    background: var(--primary);
    color: var(--white);
    padding: 14px;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all 0.3s;
}

.btn-submit:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(18, 54, 34, 0.3);
}

/* ========== CONTACT ========== */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}

.contact-info h3 {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    color: var(--primary);
    margin-bottom: 1.5rem;
}

.contact-info > p {
    color: var(--text-light);
    margin-bottom: 2rem;
    line-height: 1.8;
}

.contact-details { display: flex; flex-direction: column; gap: 1.5rem; }

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.contact-item-text {
    min-width: 0;
}

.contact-icon {
    width: 50px;
    height: 50px;
    background: var(--light-bg);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--accent-text);
    flex-shrink: 0;
}

.contact-item-text h4 {
    font-size: 1rem;
    color: var(--primary);
    margin-bottom: 0.3rem;
}

.contact-item-text p {
    font-size: 0.9rem;
    color: var(--text-light);
    overflow-wrap: anywhere;
}

/* ========== TABLES ========== */
.table-wrapper {
    overflow-x: auto;
    margin: 1.5rem 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-color: var(--primary) var(--section-bg);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 15px rgba(0,0,0,0.06);
}

.data-table thead {
    background: var(--primary);
    color: var(--white);
}

.data-table th {
    padding: 14px 20px;
    text-align: left;
    font-weight: 600;
    font-size: 0.9rem;
}

.data-table td {
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}

/* Plain links in cells (email, phone) need a finger-sized tap area, buttons already have one. */
.data-table td a:not(.btn) {
    display: inline-block;
    padding: 4px 0;
}

.data-table tbody tr:hover {
    background: var(--light-bg);
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

/* ========== FAQ ACCORDION ========== */
.faq-item {
    background: var(--white);
    border-radius: 12px;
    margin-bottom: 1rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    overflow: hidden;
}

.faq-question {
    width: 100%;
    padding: 1.2rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary);
    text-align: left;
    transition: background 0.3s;
    min-height: 56px;
}

.faq-question:hover { background: var(--light-bg); }

.faq-icon {
    position: relative;
    width: 24px;
    height: 24px;
    font-size: 0;
    color: var(--accent-text);
    transition: transform 0.3s;
    flex-shrink: 0;
    margin-left: 1rem;
}

.faq-icon::before,
.faq-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transform: translate(-50%, -50%);
}

.faq-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item.open .faq-icon { transform: rotate(45deg); }

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.faq-answer-inner {
    padding: 0 1.5rem 1.2rem;
    color: var(--text-light);
    line-height: 1.8;
}

/* ========== TIMELINE ========== */
.timeline {
    position: relative;
    padding-left: 40px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--accent);
}

.timeline-item {
    position: relative;
    margin-bottom: 2rem;
    padding-left: 30px;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -32px;
    top: 6px;
    width: 14px;
    height: 14px;
    background: var(--accent);
    border-radius: 50%;
    border: 3px solid var(--surface);
    box-shadow: 0 0 0 3px var(--accent);
}

.timeline-item h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.timeline-item p {
    color: var(--text-light);
    line-height: 1.7;
}

/* ========== TEXT PAGE ========== */
.text-content {
    max-width: 900px;
    margin: 0 auto;
}

/* Full-row prose: aligns with card and table sections instead of sitting
   inset at 900px, so every section on a page shares the same left edge. */
.text-content--wide {
    max-width: none;
}

.text-content h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    color: var(--primary);
    margin: 2rem 0 1rem;
}

.text-content h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    color: var(--primary);
    margin: 1.5rem 0 0.75rem;
}

.text-content p {
    color: var(--text-light);
    line-height: 1.9;
    margin-bottom: 1.2rem;
}

.text-content ul, .text-content ol {
    margin: 1rem 0 1.5rem 1.5rem;
}

.text-content li {
    color: var(--text-light);
    line-height: 1.8;
    margin-bottom: 0.5rem;
}

.text-content strong { color: var(--text); }

/* ========== OUR ASSOCIATES (orbit) ==========
   DGS at the centre with partner marks on an arc beneath it. Collapses to a
   plain row of tiles on small screens, where the orbit would be unreadable. */
/* Pull the section in tighter - the default .section padding left too much
   empty space around the orbit. */
#associates { padding-top: 3rem; padding-bottom: 3rem; }
#associates .section-header { margin-bottom: 1.5rem; }

.associates-orbit {
    position: relative;
    height: 530px;
    max-width: 560px;
    margin: 0 auto;
}

.orbit-ring {
    position: absolute;
    top: 64px;
    left: 50%;
    width: 400px;
    height: 400px;
    margin-left: -200px;
    border: 2px dashed rgba(28, 79, 50, 0.22);
    border-radius: 50%;
    pointer-events: none;
    animation: orbit-spin 46s linear infinite;
}

/* A brighter arc segment rides the ring so the rotation is visible. */
.orbit-ring::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: var(--accent);
    border-right-color: var(--accent-light);
    opacity: 0.55;
}

.orbit-hub {
    position: absolute;
    top: 0;
    left: 50%;
    width: 128px;
    height: 128px;
    margin-left: -64px;
    border-radius: 50%;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 34px rgba(18, 54, 34, 0.28);
    z-index: 3;
    animation: orbit-hub-pulse 3.6s ease-in-out infinite;
}

.orbit-hub img { width: 78px; height: auto; }

@keyframes orbit-spin { to { transform: rotate(360deg); } }

@keyframes orbit-hub-pulse {
    0%, 100% { box-shadow: 0 12px 34px rgba(18, 54, 34, 0.28), 0 0 0 0 rgba(246, 137, 38, 0.35); }
    50%      { box-shadow: 0 12px 34px rgba(18, 54, 34, 0.28), 0 0 0 14px rgba(246, 137, 38, 0); }
}

@keyframes orbit-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

.orbit-node {
    position: absolute;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    z-index: 2;
    animation: orbit-float 5s ease-in-out infinite;
}

/* Stagger the float so the tiles do not bob in unison. */
.orbit-node:nth-of-type(1) { animation-delay: 0s; }
.orbit-node:nth-of-type(2) { animation-delay: 0.6s; }
.orbit-node:nth-of-type(3) { animation-delay: 1.2s; }
.orbit-node:nth-of-type(4) { animation-delay: 1.8s; }
.orbit-node:nth-of-type(5) { animation-delay: 2.4s; }

.orbit-node:hover,
.orbit-node:focus-visible {
    /* cancel the float so this transform actually takes effect on hover */
    animation: none;
    transform: translateY(-6px);
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
}

.orbit-node img {
    max-width: 74px;
    max-height: 52px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.orbit-node .orbit-name {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-light);
    line-height: 1.2;
}

/* Five nodes evenly across the lower half of the ring, 45 deg apart, with the
   hub capping the top. Ring centre is (50%, 264px), radius 200; each node is
   112px so its top/left back off by 56. Widest reach is 256px either side,
   inside the 560px container. */
.orbit-node:nth-of-type(1) { top: 208px; left: 50%; margin-left: -256px; }
.orbit-node:nth-of-type(2) { top: 349px; left: 50%; margin-left: -197px; }
.orbit-node:nth-of-type(3) { top: 408px; left: 50%; margin-left: -56px; }
.orbit-node:nth-of-type(4) { top: 349px; left: 50%; margin-left: 85px; }
.orbit-node:nth-of-type(5) { top: 208px; left: 50%; margin-left: 144px; }

/* Respect users who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
    .orbit-ring, .orbit-hub, .orbit-node { animation: none !important; }
}

@media (max-width: 700px) {
    /* The arc does not survive narrow screens - show a simple row instead. */
    .associates-orbit {
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }
    .orbit-ring { display: none; }
    .orbit-hub { position: static; margin: 0; }

    /* The orbit offsets above are set per node with :nth-of-type, which
       outranks a plain .orbit-node rule - a media query adds no specificity.
       They must be cancelled at matching specificity or every tile keeps its
       ring offset and the row staggers off both edges of the screen. */
    .orbit-node:nth-of-type(1),
    .orbit-node:nth-of-type(2),
    .orbit-node:nth-of-type(3),
    .orbit-node:nth-of-type(4),
    .orbit-node:nth-of-type(5) {
        top: auto;
        left: auto;
        margin-left: 0;
    }

    .orbit-node {
        position: static;
        margin: 0;
        width: 100%;
        max-width: 320px;
        height: auto;
        border-radius: 16px;
        flex-direction: row;
        justify-content: flex-start;
        gap: 14px;
        padding: 14px 18px;
        text-align: left;
    }
    .orbit-node img { max-width: 56px; max-height: 40px; }
    .orbit-node .orbit-name { font-size: 0.78rem; }
}

/* ========== EXPLORE CARDS ==========
   Whole-card links for the homepage pillar hub. The entire card is the target
   (same idiom as .blog-list-card), so there is one clear action per card
   instead of a row of competing primary buttons. */
/* 320px min keeps six cards as a tidy 3 x 2 rather than 4 + 2 with a gap. */
.explore-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}

.explore-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.9rem 1.75rem;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    text-align: left;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.explore-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent);
}

/* Keep the global :focus-visible ring - listing box-shadow here would otherwise
   replace it and leave keyboard users with no visible focus indicator. */
.explore-card:focus-visible {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow: 0 0 0 6px var(--accent-text), var(--shadow-md);
}

.explore-card .explore-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    color: var(--on-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.15rem;
    flex-shrink: 0;
}

.explore-card .explore-icon svg { width: 26px; height: 26px; }

.explore-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.18rem;
    line-height: 1.35;
    color: var(--primary);
    margin-bottom: 0.55rem;
}

.explore-card p {
    color: var(--text-light);
    font-size: 0.93rem;
    line-height: 1.7;
    margin-bottom: 1.35rem;
}

/* Pins the affordance to the bottom so it lines up across every card. */
.explore-card .explore-go {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent-text);
    font-weight: 600;
    font-size: 0.9rem;
    transition: gap 0.3s ease;
}

.explore-card:hover .explore-go,
.explore-card:focus-visible .explore-go { gap: 12px; }

.explore-card .explore-go svg { width: 18px; height: 18px; }

@media (max-width: 768px) {
    .explore-grid { grid-template-columns: 1fr; gap: 1rem; }
    .explore-card { padding: 1.5rem 1.35rem; }
}

/* ========== ARTICLE & PAGE POLISH ==========
   Shared components used by blog posts and the SEO landing pages:
   jump-list, highlight callouts, inline related-reading cards and a stat band. */

/* "In this article" jump list - also gives Google and AI assistants a clean
   outline of the page structure. */
.toc {
    background: var(--light-bg);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: 12px;
    padding: 1.5rem 1.75rem;
    margin: 2rem 0 2.5rem;
}

/* Two classes so this beats `.blog-content h2` regardless of source order. */
.toc .toc-title {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent-text);
    margin: 0 0 0.9rem;
    line-height: 1.4;
}

.toc ol {
    margin: 0;
    padding-left: 1.15rem;
    columns: 2;
    column-gap: 2.5rem;
}

.toc li {
    margin-bottom: 0.5rem;
    break-inside: avoid;
    color: var(--text-light);
}

.toc a {
    color: var(--primary);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}

.toc a:hover { border-bottom-color: var(--accent); }

/* Highlighted takeaway / note box */
.callout {
    background: var(--white);
    border: 1px solid var(--border);
    border-top: 3px solid var(--primary);
    border-radius: 12px;
    padding: 1.5rem 1.75rem;
    margin: 2rem 0;
    box-shadow: var(--shadow-sm);
}

.callout--accent { border-top-color: var(--accent); }

.callout h3,
.callout h4 {
    font-family: 'Playfair Display', serif;
    color: var(--primary);
    font-size: 1.2rem;
    margin: 0 0 0.75rem;
}

.callout p:last-child,
.callout ul:last-child { margin-bottom: 0; }

.callout ul { margin: 0.5rem 0 0 1.1rem; }
.callout li { color: var(--text-light); line-height: 1.75; margin-bottom: 0.4rem; }

/* Inline "read next" card that links deeper into the site mid-article */
.read-next {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    background: linear-gradient(135deg, rgba(28,79,50,0.06), rgba(246,137,38,0.08));
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.35rem 1.6rem;
    margin: 2.25rem 0;
}

.read-next-label {
    font-size: 0.72rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--accent-text);
    flex-basis: 100%;
}

.read-next p {
    margin: 0;
    flex: 1 1 260px;
    color: var(--text);
    font-weight: 500;
    line-height: 1.6;
}

.read-next a.btn {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Row of headline figures - used at the top of landing pages */
.stat-band {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin: 0 0 2.5rem;
}

.stat-band .stat {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.4rem 1rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.stat-band .stat .num {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.15;
}

.stat-band .stat .label {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.82rem;
    color: var(--text-light);
    line-height: 1.45;
}

@media (max-width: 768px) {
    .toc { padding: 1.25rem; }
    .toc ol { columns: 1; }
    .read-next { padding: 1.15rem; }
    .read-next a.btn { width: 100%; text-align: center; }
    .stat-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ========== BLOG POST ========== */
.blog-post {
    max-width: 850px;
    margin: 0 auto;
    padding: 0 1rem;
}

.blog-meta {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid var(--light-bg);
    flex-wrap: wrap;
}

.blog-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-light);
    font-size: 0.88rem;
}

.blog-meta-item .icon {
    color: var(--accent-text);
    font-size: 1rem;
}

/* Reading estimate sits last in the meta row and reads as secondary. */
.blog-meta-item.reading-time {
    color: var(--text-light);
    white-space: nowrap;
}

.blog-meta-item.reading-time svg { color: var(--accent-text); }

.blog-featured-image {
    width: 100%;
    max-height: 480px;
    object-fit: cover;
    border-radius: 16px;
    margin-bottom: 2rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

.blog-content {
    font-size: 1.05rem;
    line-height: 1.9;
    color: var(--text);
}

.blog-content .lead {
    font-size: 1.2rem;
    color: var(--text-light);
    font-weight: 400;
    line-height: 1.8;
    margin-bottom: 2rem;
    padding-left: 1.2rem;
    border-left: 4px solid var(--primary);
    font-style: italic;
}

.blog-content h2 {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: var(--primary);
    margin: 2.5rem 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--light-bg);
}

.blog-content h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.35rem;
    color: var(--primary);
    margin: 2rem 0 0.75rem;
}

.blog-content p {
    color: var(--text-light);
    line-height: 1.9;
    margin-bottom: 1.3rem;
}

.blog-content ul, .blog-content ol {
    margin: 1.2rem 0 1.5rem 1.8rem;
}

.blog-content li {
    color: var(--text-light);
    line-height: 1.9;
    margin-bottom: 0.6rem;
}

.blog-content strong {
    color: var(--primary);
    font-weight: 600;
}

.blog-content blockquote {
    margin: 2rem 0;
    padding: 1.5rem 2rem;
    background: var(--light-bg);
    border-left: 4px solid var(--primary);
    border-radius: 8px;
    font-style: italic;
    color: var(--primary);
    font-size: 1.1rem;
    line-height: 1.8;
}

.blog-share {
    margin-top: 3rem;
    padding: 2rem;
    background: var(--light-bg);
    border-radius: 16px;
    text-align: center;
}

.blog-share h4 {
    font-family: 'Playfair Display', serif;
    color: var(--primary);
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

.blog-share p {
    color: var(--text-light);
    margin-bottom: 1.5rem;
}

.blog-share .share-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.blog-share .share-btn {
    padding: 10px 24px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.blog-share .btn-wa {
    background: var(--success);
    color: var(--on-success);
}

.blog-share .btn-wa:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(37,211,102,0.4); }

.blog-share .btn-contact {
    background: var(--primary);
    color: var(--on-primary);
}

.blog-share .btn-contact:hover { background: var(--primary-dark); transform: translateY(-2px); }

/* Related Posts */
.related-posts {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid var(--light-bg);
}

.related-posts h3 {
    font-family: 'Playfair Display', serif;
    color: var(--primary);
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.related-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.related-post-card {
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 15px rgba(0,0,0,0.05);
    transition: all 0.3s;
    text-decoration: none;
    display: block;
}

.related-post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.related-post-card img {
    width: 100%;
    height: 160px;
    object-fit: cover;
}

.related-post-card .body {
    padding: 1.2rem;
}

.related-post-card h4 {
    font-family: 'Playfair Display', serif;
    color: var(--primary);
    font-size: 1rem;
    line-height: 1.4;
    margin-bottom: 0.5rem;
}

.related-post-card .date {
    color: var(--text-light);
    font-size: 0.8rem;
}

/* Blog listing cards with dates */
.blog-list-card {
    background: var(--white);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    transition: all 0.4s;
    display: block;
    text-decoration: none;
    color: inherit;
}

.blog-list-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 35px rgba(0,0,0,0.12);
}

.blog-list-card .card-img {
    height: 220px;
    overflow: hidden;
}

.blog-list-card .card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.blog-list-card:hover .card-img img { transform: scale(1.05); }

.blog-list-card .card-body {
    padding: 1.5rem;
}

.blog-list-card .blog-date {
    display: inline-block;
    background: var(--light-bg);
    color: var(--primary);
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
}

.blog-list-card h3 {
    font-family: 'Playfair Display', serif;
    color: var(--primary);
    font-size: 1.2rem;
    line-height: 1.35;
    margin-bottom: 0.75rem;
    min-height: 3.2em;
}

.blog-list-card .excerpt {
    color: var(--text-light);
    font-size: 0.9rem;
    line-height: 1.65;
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-list-card .read-more {
    color: var(--accent-text);
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.3s;
}

.blog-list-card:hover .read-more { gap: 10px; }

@media (max-width: 768px) {
    .blog-post { padding: 0 0.5rem; }
    .blog-content { font-size: 0.95rem; }
    .blog-content h2 { font-size: 1.5rem; }
    .blog-content h3 { font-size: 1.2rem; }
    .blog-featured-image { max-height: 280px; }
    .blog-meta { gap: 1rem; }
    .related-posts-grid { grid-template-columns: 1fr; }
    .blog-share { padding: 1.5rem 1rem; }
    .blog-share .share-buttons { flex-direction: column; }
}

/* ========== FOOTER ========== */
.footer {
    background: var(--primary-dark);
    color: rgba(255,255,255,0.7);
    padding: 4rem 0 0;
}

.footer-grid {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 2rem 3rem;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 3rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-brand img {
    height: clamp(112px, 8vw, 132px);
    width: auto;
    max-width: 200px;
    margin-bottom: 1rem;
}

.footer-contact-copy {
    font-size: 0.9rem;
}

.footer-contact-copy {
    line-height: 1.7;
}

.site-admission-cta p {
    width: 100%;
    max-width: 820px;
}

.footer-brand p {
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.footer-social {
    display: flex;
    gap: 10px;
}

.footer-social a {
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    transition: all 0.3s;
    font-size: 0.9rem;
}

.footer-social a svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
}

.footer-social a:hover {
    background: var(--accent);
    color: var(--primary-dark);
}

.footer h4 {
    color: var(--white);
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    font-family: 'Playfair Display', serif;
}

.footer-links li { margin-bottom: 0.8rem; }

.footer-links a {
    color: rgba(255,255,255,0.6);
    font-size: 0.9rem;
    transition: color 0.3s;
}

.footer-links a:hover { color: var(--accent-on-dark); }

.footer-bottom {
    max-width: 1300px;
    margin: 0 auto;
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
}

.footer-bottom a {
    color: rgba(255,255,255,0.5);
    transition: color 0.3s;
}

.footer-bottom a:hover { color: var(--accent-on-dark); }

/* ========== FEATURES LIST ========== */
.features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1.5rem 0;
    max-width: 100%;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    color: var(--primary);
    min-width: 0;
}

.feature-item .check {
    width: 24px;
    height: 24px;
    background: var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--on-accent);
    font-size: 0.75rem;
    flex-shrink: 0;
}

/* ========== MAP ========== */
.map-section { height: 350px; }
.map-section iframe { width: 100%; height: 100%; border: 0; }

/* ========== FEE CALCULATOR ========== */
.fee-calculator {
    max-width: 700px;
    margin: 0 auto;
    background: var(--white);
    border-radius: 20px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.08);
    overflow: hidden;
}

.fee-calc-header {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    padding: 2rem;
    text-align: center;
}

.fee-calc-header h3 {
    font-family: 'Playfair Display', serif;
    color: var(--white);
    font-size: 1.5rem;
    margin-bottom: 0.3rem;
}

.fee-calc-header p {
    color: rgba(255,255,255,0.7);
    font-size: 0.9rem;
}

.fee-calc-body {
    padding: 2rem;
}

.fee-calc-selectors {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.fee-calc-selectors select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--control-border);
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: var(--text);
    background: var(--white);
    cursor: pointer;
    transition: border-color 0.3s;
    appearance: auto;
}

.fee-calc-selectors select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(28, 79, 50, 0.14);
}

.fee-calc-result {
    display: none;
    background: var(--light-bg);
    border-radius: 14px;
    padding: 1.5rem;
    margin-top: 1rem;
}

.fee-calc-result.show { display: block; }

.fee-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    font-size: 0.95rem;
}

.fee-row:last-child { border-bottom: none; }

.fee-row .fee-label {
    color: var(--text-light);
}

.fee-row .fee-value {
    font-weight: 600;
    color: var(--primary);
}

.fee-row.fee-total {
    border-top: 2px solid var(--accent);
    border-bottom: none;
    margin-top: 0.5rem;
    padding-top: 1rem;
}

.fee-row.fee-total .fee-label {
    font-weight: 700;
    color: var(--primary);
    font-size: 1.05rem;
}

.fee-row.fee-total .fee-value {
    font-size: 1.3rem;
    color: var(--accent-text);
    font-family: 'Playfair Display', serif;
}

.fee-calc-cta {
    display: flex;
    gap: 0.8rem;
    margin-top: 1.5rem;
}

.fee-calc-cta a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 16px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s;
}

.fee-calc-cta .btn-fee-primary {
    background: var(--accent);
    color: var(--primary-dark);
}

.fee-calc-cta .btn-fee-primary:hover {
    background: var(--accent-light);
    transform: translateY(-2px);
}

.fee-calc-cta .btn-fee-outline {
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
}

.fee-calc-cta .btn-fee-outline:hover {
    background: var(--primary);
    color: var(--white);
}

.fee-calc-note {
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-light);
    margin-top: 1rem;
    line-height: 1.5;
}

/* ========== WHATSAPP FLOATING BUTTON ==========
   The Ask DGS chat pill docks to the bottom-right and is about 52px tall, so
   the button is lifted clear of it: 24px base inset + 52px pill + 16px gap.
   Both controls stay reachable and neither covers the other. */
.whatsapp-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: bottom 0.3s ease, opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.whatsapp-float.is-over-footer {
    visibility: hidden;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}

.whatsapp-float .wa-tooltip {
    background: var(--white);
    color: var(--text);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    white-space: nowrap;
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.3s;
    pointer-events: none;
}

.whatsapp-float:hover .wa-tooltip {
    opacity: 1;
    transform: translateX(0);
}

.whatsapp-float a {
    width: 60px;
    height: 60px;
    background: var(--whatsapp);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(15, 122, 64, 0.35);
    transition: all 0.3s;
    animation: wa-pulse 2s infinite;
}

.whatsapp-float a:hover {
    transform: scale(1.1);
    background: var(--whatsapp-hover);
    box-shadow: 0 6px 25px rgba(15, 122, 64, 0.5);
}

.whatsapp-float a svg {
    width: 32px;
    height: 32px;
    fill: none;
    color: var(--white);
    stroke: currentColor;
}

@keyframes wa-pulse {
    0% { box-shadow: 0 0 0 0 rgba(15, 122, 64, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(15, 122, 64, 0); }
    100% { box-shadow: 0 0 0 0 rgba(15, 122, 64, 0); }
}

/* ========== AWARDS SHOWCASE ========== */
.awards-showcase {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.award-item {
    background: var(--white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 25px rgba(0,0,0,0.06);
    transition: all 0.4s ease;
    border: 1px solid rgba(246, 137, 38, 0.1);
    position: relative;
}

.award-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.12);
    border-color: var(--accent);
}

.award-img-wrap {
    width: 100%;
    height: 180px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
}

.award-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.award-item:hover .award-img-wrap img {
    transform: scale(1.05);
}

.award-details {
    padding: 1.3rem;
    position: relative;
}

.award-ribbon {
    display: inline-block;
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    color: var(--primary-dark);
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 0.7rem;
}

.award-details h4 {
    font-family: 'Playfair Display', serif;
    color: var(--primary);
    font-size: 1.05rem;
    line-height: 1.3;
    margin-bottom: 0.5rem;
    min-height: 2.6em;
}

.award-details p {
    color: var(--text-light);
    font-size: 0.82rem;
    line-height: 1.5;
    margin-bottom: 0.8rem;
    min-height: 3em;
}

.award-year-tag {
    display: inline-block;
    background: var(--light-bg);
    color: var(--primary);
    padding: 3px 12px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid rgba(18, 54, 34, 0.1);
}

/* ========== CAMPUS VISIT CTA BAR ========== */
.visit-cta-bar {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 5;
}

.visit-cta-bar p {
    color: var(--on-accent);
    font-weight: 700;
    font-size: 1.05rem;
    margin: 0;
    text-shadow: none;
}

.visit-cta-bar .btn-visit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 28px;
    background: var(--primary);
    color: var(--white);
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s;
    text-decoration: none;
    border: 2px solid var(--primary);
}

.visit-cta-bar .btn-visit:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.visit-cta-bar .btn-visit-outline {
    background: var(--white);
    color: var(--primary-dark);
    border: 2px solid var(--white);
}

.visit-cta-bar .btn-visit-outline:hover {
    background: var(--primary-dark);
    color: var(--white);
    border-color: var(--primary-dark);
}

/* ========== ANIMATIONS ========== */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
    animation: fadeInFallback 0.6s ease forwards;
    animation-delay: 2s;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
    animation: none;
}

@keyframes fadeInFallback {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========== RESPONSIVE ========== */

/* Tighten the top-level nav on narrower desktops so all nine items fit on one line. */
@media (min-width: 1181px) and (max-width: 1440px) {
    .nav-item > a { padding: 26px 9px; font-size: 0.78rem; }
}

/* Switch to the mobile navigation before the full menu runs out of space. */
@media (max-width: 1180px) {
    .nav-menu { display: none; }
    .hamburger { display: flex; }
    .footer-contact-copy a {
        display: inline-flex;
        min-height: 44px;
        align-items: center;
    }
    .hero-overlay {
        background: linear-gradient(135deg, rgba(8, 36, 22, 0.62) 0%, rgba(0, 0, 0, 0.42) 100%);
    }
}

/* --- Tablet (max 1024px) --- */
@media (max-width: 1024px) {
    .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .card-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .card-grid--3 { grid-template-columns: repeat(2, 1fr); }

    .awards-showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 200px;
    }

    .footer-grid { grid-template-columns: 1fr 1fr; }

    .content-grid { gap: 2rem; }

    .section { padding: 2.75rem 0; }
    .cta-section { padding: 2.75rem 1.5rem; }
    .container { padding: 0 1.5rem; }
}

/* --- Mobile (max 768px) --- */
@media (max-width: 768px) {
    /* Typography */
    .hero-content h1 { font-size: 2.2rem; }
    .hero-content p { font-size: 0.95rem; max-width: 100%; }
    .hero-buttons { flex-direction: column; width: 100%; }
    .hero-buttons .btn { width: 100%; justify-content: center; }
    .hero-badge { font-size: 0.75rem; letter-spacing: 1px; padding: 6px 14px; }
    .hero {
        height: auto;
        min-height: 100vh;
        min-height: 100svh;
        padding: calc(var(--nav-height) + 2.5rem) 0 4.5rem;
    }
    .hero-content { height: auto; justify-content: center; }
    .section-header h2 { font-size: 1.75rem; }
    .cta-section h2 { font-size: 1.75rem; }
    .cta-section p { font-size: 0.95rem; }
    .content-text h2 { font-size: 1.6rem; }
    .content-text h3 { font-size: 1.3rem; }
    .text-content h2 { font-size: 1.5rem; }
    .text-content h3 { font-size: 1.25rem; }

    /* Sections & containers */
    .section { padding: 2.125rem 0; }
    .cta-section { padding: 2.125rem 1rem; }
    .container { padding: 0 1rem; }
    .section-header { margin-bottom: 1.75rem; }

    /* Stats */
    .stats-container { grid-template-columns: repeat(2, 1fr); }
    .stat-item { padding: 1.5rem 1rem; }
    .stat-item:nth-child(2) { border-right: none; }
    .stat-item:nth-child(3) { border-right: 1px solid rgba(255,255,255,0.1); }
    .stat-number { font-size: 2rem; }
    .stat-label { font-size: 0.75rem; }

    /* Grids → single column */
    .content-grid,
    .contact-grid,
    .card-grid--2 { grid-template-columns: 1fr !important; gap: 1.75rem; }
    .card-grid { grid-template-columns: 1fr; }
    .card-grid--4 { grid-template-columns: 1fr; }
    .card-grid--3 { grid-template-columns: 1fr; }

    /* Fix intentionally reversed desktop grids on mobile. */
    .content-grid--reverse { direction: ltr !important; }
    .content-grid--reverse > * { direction: ltr !important; }

    /* Content images */
    .content-img { border-radius: 12px; max-height: 300px; }
    .content-img img { max-height: 300px; }

    /* Cards */
    .card-img { height: 200px; }
    .card-body { padding: 1.2rem; }
    .card-body h3 { font-size: 1.15rem; }

    /* Icon cards */
    .icon-card { padding: 1.5rem; }
    .icon-card .icon-box { color: var(--on-primary) !important; width: 56px; height: 56px; font-size: 1.4rem; border-radius: 16px; }

    /* Gallery */
    .gallery-grid {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 160px;
    }
    .gallery-item--wide { grid-column: span 2; }
    .gallery-item--tall { grid-row: span 1; }

    /* Page banner */
    .page-banner { height: auto; min-height: 220px; padding: 2.5rem 0; margin-top: var(--nav-height); }
    .page-banner-content h1 { font-size: 1.75rem; }
    .breadcrumb { font-size: 0.8rem; flex-wrap: wrap; justify-content: center; row-gap: 2px; }
    .breadcrumb a { min-height: 32px; padding-inline: 2px; }

    /* Buttons */
    .btn { padding: 12px 24px; font-size: 0.9rem; justify-content: center; text-align: center; }
    .cta-buttons { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; margin-left: auto; margin-right: auto; }
    .cta-buttons .btn { width: 100%; }
    .button-row {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
    }
    .button-row .btn { width: 100%; }

    /* Forms */
    .form-card { padding: 1.5rem; }
    .form-row { grid-template-columns: 1fr; }
    .form-group input,
    .form-group textarea,
    .form-group select { padding: 10px 14px; font-size: 16px; /* Prevent zoom on iOS */ }
    .btn-submit { padding: 14px; font-size: 1rem; }

    /* Contact */
    .contact-grid { gap: 2rem; }
    .contact-info h3 { font-size: 1.5rem; }
    .contact-icon { width: 42px; height: 42px; font-size: 1rem; }

    /* Tables */
    .data-table th,
    .data-table td { padding: 10px 12px; font-size: 0.8rem; white-space: nowrap; }
    .table-wrapper { max-width: 100%; }
    .blog-post .table-wrapper { margin-inline: 0; padding-inline: 0; }

    /* FAQ */
    .faq-question { padding: 1rem; font-size: 0.9rem; }
    .faq-answer-inner { padding: 0 1rem 1rem; font-size: 0.9rem; }

    /* Timeline */
    .timeline { padding-left: 30px; }
    .timeline-item { padding-left: 20px; }
    .timeline-item::before { left: -24px; width: 12px; height: 12px; }
    .timeline-item h3 { font-size: 1.05rem; }

    /* Features */
    .features-grid { grid-template-columns: 1fr; }
    .feature-item { font-size: 0.9rem; }

    /* Footer */
    .footer { padding: 3rem 0 0; }
    .footer-grid { grid-template-columns: 1fr; gap: 2rem; padding: 0 1rem 2rem; }
    .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; padding: 1rem; }
    .footer-links li { margin-bottom: 0; }
    .footer-links a,
    .footer-contact-copy a,
    .footer-bottom a {
        display: inline-flex;
        min-height: 44px;
        align-items: center;
    }
    /* Map */
    .map-section { height: 250px; }

    /* Text content */
    .text-content ul, .text-content ol { margin-left: 1rem; }

    /* Awards showcase */
    .awards-showcase { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .award-img-wrap { height: 140px; }
    .award-details { padding: 1rem; }
    .award-details h4 { font-size: 0.95rem; min-height: auto; }
    .award-details p { font-size: 0.78rem; min-height: auto; }

    /* Fee calculator */
    .fee-calc-selectors { grid-template-columns: 1fr; }
    .fee-calc-body { padding: 1.2rem; }
    .fee-calc-header { padding: 1.3rem; }
    .fee-calc-header h3 { font-size: 1.2rem; }
    .fee-calc-cta { flex-direction: column; }
    .fee-row { font-size: 0.85rem; }
    .fee-row.fee-total .fee-value { font-size: 1.1rem; }

    /* Hide logo text on mobile to prevent overlap */
    /* Only the affiliation line remains, and it still fits the mobile bar. */
    .nav-logo-text span { font-size: 0.6rem; letter-spacing: 1px; }

    /* Visit CTA */
    .visit-cta-bar { padding: 0.8rem 1rem; gap: 0.8rem; text-align: center; }
    .visit-cta-bar p { width: 100%; font-size: 0.9rem; }
    .visit-cta-bar .btn-visit {
        width: min(100%, 360px);
        min-height: 44px;
        justify-content: center;
        padding: 8px 18px;
        font-size: 0.8rem;
    }

}

/* --- Small mobile (max 480px) --- */
@media (max-width: 480px) {
    :root { --nav-height: 70px; }

    /* Same clearance on a phone: 14px base inset + 52px pill + 12px gap. */
    .whatsapp-float {
        right: 14px;
        bottom: 14px;
    }

    .whatsapp-float .wa-tooltip { display: none; }
    .whatsapp-float a { width: 52px; height: 52px; }
    .whatsapp-float a svg { width: 28px; height: 28px; }

    .hero-content h1 { font-size: 1.8rem; }
    .hero-content p { font-size: 0.9rem; }
    .hero-badge { font-size: 0.75rem; padding: 5px 12px; }
    .hero-content { padding: 0 1rem; }

    .section-header h2 { font-size: 1.5rem; }
    .section-header p { font-size: 0.9rem; }
    .cta-section h2 { font-size: 1.5rem; }

    .page-banner { height: auto; min-height: 200px; padding: 2rem 0; }
    .page-banner-content h1 { font-size: 1.5rem; }
    .breadcrumb { font-size: 0.8rem; }

    .stats-container { grid-template-columns: 1fr 1fr; }
    .stat-item { padding: 1rem 0.5rem; }
    .stat-number { font-size: 1.6rem; }
    .stat-label { font-size: 0.75rem; letter-spacing: 0.5px; }

    .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 200px; }
    .gallery-item--wide { grid-column: span 1; }

    .card-body h3 { font-size: 1.05rem; }
    .card-body p { font-size: 0.875rem; }
    .card-img { height: 180px; }

    .icon-card { padding: 1.2rem; }
    .icon-card h3 { font-size: 1rem; }
    .icon-card p { font-size: 0.875rem; }
    .icon-card .icon-box { color: var(--on-primary) !important; width: 48px; height: 48px; font-size: 1.2rem; }

    .content-text p { font-size: 0.9rem; }
    .content-text ul li { font-size: 0.9rem; padding-left: 24px; }

    .text-content p { font-size: 0.9rem; }
    .text-content li { font-size: 0.9rem; }

    .section { padding: 1.75rem 0; }
    .cta-section { padding: 1.75rem 0.75rem; }

    .form-card { padding: 1.2rem; }

    .footer-brand img { height: 108px; }
    .footer h4 { font-size: 1rem; margin-bottom: 1rem; }
    .footer-links a { font-size: 0.85rem; }
    .footer-bottom { font-size: 0.8rem; }

    .data-table th,
    .data-table td { padding: 8px; font-size: 0.8125rem; }

    .faq-question { font-size: 0.9rem; padding: 0.8rem; }

    .nav-container { padding: 0 1rem; }
    .nav-logo img { height: 54px; }
    .nav-logo-text span { font-size: 0.6rem; letter-spacing: 1px; }

    .hero { margin-top: 0; }
    .hero { padding-top: calc(var(--nav-height) + 2rem); }

    .visit-cta-bar { flex-direction: column; gap: 0.6rem; }
    .visit-cta-bar p { font-size: 0.8rem; text-align: center; }

    .awards-showcase { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

    .fade-in {
        opacity: 1;
        transform: none;
    }
}

/* ========== SKIP TO CONTENT (Accessibility) ========== */
.skip-to-content {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: var(--primary-dark);
    padding: 12px 24px;
    border-radius: 0 0 8px 8px;
    font-weight: 700;
    font-size: 0.9rem;
    z-index: 10040;
    transition: top 0.3s;
    text-decoration: none;
}
.skip-to-content:focus {
    top: 0;
}


/* ========== HUGEICONS VECTOR ICON SYSTEM ========== */
.icon-badge svg,
.icon-box svg {
    width: 22px;
    height: 22px;
    stroke: var(--white) !important;
    fill: none;
    display: block;
}

.icon-badge {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%) !important;
    box-shadow: 0 4px 15px rgba(246, 137, 38, 0.45) !important;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* White, matching every other icon on the orange accent. This used to be
   --on-accent, which also contradicted the rule 20 lines above that already
   asked for white - the later declaration simply won. */
.icon-badge svg {
    stroke: var(--white) !important;
}

.icon-box {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
    color: var(--on-primary) !important;
    box-shadow: 0 4px 15px rgba(28, 79, 50, 0.25) !important;
}

.check svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
}


/* ========== APPLY NOW PAGE STYLES ========== */
.apply-hero {
    position: relative;
    min-height: 460px;
    margin-top: var(--nav-height);
    background: linear-gradient(135deg, rgba(8, 36, 22, 0.72) 0%, rgba(0, 0, 0, 0.5) 100%), url('../images/campus/dgs-photo-dsc06415.webp') center/cover;
    display: flex;
    align-items: center;
    padding: 4rem 2rem;
    overflow: hidden;
}
.apply-hero::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    background: rgba(246, 137, 38, 0.12);
    border-radius: 50%;
}
.apply-hero::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -80px;
    width: 300px;
    height: 300px;
    background: rgba(246, 137, 38, 0.08);
    border-radius: 50%;
}
.apply-hero-content {
    position: relative;
    z-index: 2;
    max-width: 1300px;
    margin: 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 3rem;
    align-items: center;
}
.apply-hero-text .badge {
    display: inline-block;
    background: rgba(18, 54, 34, 0.94);
    border: 1px solid var(--accent-on-dark);
    color: var(--accent-on-dark);
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}
.apply-hero-text h1 {
    font-family: 'Playfair Display', serif;
    color: var(--white);
    font-size: 3rem;
    line-height: 1.15;
    margin-bottom: 1rem;
    text-shadow: 0 3px 24px rgba(0, 0, 0, 0.42);
}
.apply-hero-text h1 span { color: var(--accent-on-dark); }
.apply-hero-text p {
    color: rgba(255,255,255,0.8);
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 2rem;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.42);
}
.apply-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}
.apply-stat { text-align: left; }
.apply-stat .num {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    color: var(--accent-on-dark);
    font-weight: 700;
    line-height: 1;
}
.apply-stat .lbl {
    color: rgba(255,255,255,0.7);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 0.4rem;
}
.apply-form-card {
    background: var(--white);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 25px 70px rgba(0,0,0,0.3);
    position: relative;
}
.apply-form-card::before {
    content: 'Limited Seats';
    position: absolute;
    top: -14px;
    right: 20px;
    background: var(--primary);
    color: var(--white);
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(28, 79, 50, 0.3);
}
.apply-form-card h3 {
    font-family: 'Playfair Display', serif;
    color: var(--primary);
    font-size: 1.4rem;
    margin-bottom: 0.3rem;
}
.apply-form-card > p {
    color: var(--text-light);
    font-size: 0.85rem;
    margin-bottom: 1.2rem;
}
.apply-form-card .form-group { margin-bottom: 0.9rem; }
.apply-form-card input,
.apply-form-card select,
.apply-form-card textarea {
    width: 100%;
    padding: 11px 14px;
    border: 2px solid var(--control-border);
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    transition: border-color 0.3s;
}
.apply-form-card input:focus,
.apply-form-card select:focus,
.apply-form-card textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(28, 79, 50, 0.12);
}
.apply-form-card .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
}
.apply-form-card .btn-submit-apply {
    width: 100%;
    padding: 14px;
    background: var(--accent);
    color: var(--on-accent);
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all 0.3s;
    margin-top: 0.3rem;
    box-shadow: 0 4px 15px rgba(246, 137, 38, 0.4);
}
.apply-form-card .btn-submit-apply:hover {
    transform: translateY(-2px);
    background: var(--accent-hover);
    box-shadow: 0 8px 25px rgba(246, 137, 38, 0.55);
}
.form-note {
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-light);
    margin-top: 0.8rem;
}
.process-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    max-width: 1200px;
    margin: 0 auto;
}
.process-step {
    text-align: center;
    padding: 1.5rem 1rem;
    background: var(--white);
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    position: relative;
    transition: all 0.3s;
}
.process-step:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(0,0,0,0.1);
}
.process-step .step-num {
    width: 50px;
    height: 50px;
    background: var(--accent);
    color: var(--on-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 auto 1rem;
}
.process-step h4 {
    font-family: 'Playfair Display', serif;
    color: var(--primary);
    font-size: 1rem;
    margin-bottom: 0.5rem;
}
.process-step p {
    color: var(--text-light);
    font-size: 0.8rem;
    line-height: 1.5;
}
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.benefit-card {
    background: var(--white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    transition: all 0.3s;
    position: relative;
}
.benefit-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.12);
}
.benefit-card-img {
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: relative;
}
.benefit-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}
.benefit-card:hover .benefit-card-img img {
    transform: scale(1.08);
}
.benefit-card-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(18, 54, 34, 0.75) 0%, transparent 50%);
}
.benefit-card-body {
    padding: 1.5rem;
    border: 1px solid rgba(0,0,0,0.08);
}
.benefit-card h4 {
    font-family: 'Playfair Display', serif;
    color: var(--primary);
    font-size: 1.15rem;
    margin-bottom: 0.6rem;
}
.benefit-card p {
    color: var(--text-light);
    font-size: 0.9rem;
    line-height: 1.6;
}
.docs-wrap {
    max-width: 950px;
    margin: 0 auto;
    background: var(--white);
    border-radius: 20px;
    padding: 2.5rem;
    border: 1px solid rgba(28, 79, 50, 0.12);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
}
.docs-wrap h3 {
    font-family: 'Playfair Display', serif;
    color: var(--primary);
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--section-bg);
    padding-bottom: 0.8rem;
}
.docs-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.doc-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--light-bg);
    border: 1px solid rgba(28, 79, 50, 0.08);
    border-radius: 12px;
    transition: all 0.3s ease;
}
.doc-item:hover {
    background: var(--white);
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(28, 79, 50, 0.08);
}
.doc-item .check {
    width: 26px;
    height: 26px;
    background: rgba(28, 79, 50, 0.12);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.doc-item .check svg {
    width: 14px;
    height: 14px;
    stroke: var(--primary) !important;
}
.doc-item span {
    color: var(--primary);
    font-size: 0.92rem;
    font-weight: 600;
}
@media (max-width: 1024px) {
    .apply-hero-content { grid-template-columns: 1fr; }
    .process-steps { grid-template-columns: repeat(3, 1fr); }
    .benefits-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .apply-hero { padding: 3rem 1rem; min-height: auto; }
    .apply-hero-text h1 { font-size: 2rem; }
    .apply-hero-text p { font-size: 0.95rem; }
    .apply-hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
    .apply-stat { text-align: center; min-width: 0; }
    .apply-stat .num { font-size: 1.5rem; }
    .apply-form-card { padding: 1.5rem; }
    .apply-form-card .form-row { grid-template-columns: 1fr; }
    .process-steps { grid-template-columns: 1fr; }
    .benefits-grid { grid-template-columns: 1fr; }
    .docs-list { grid-template-columns: 1fr; }
    .docs-wrap { padding: 1.5rem; }
}

@media (max-width: 480px) {
    .apply-hero { margin-top: var(--nav-height); }
}

@media (max-height: 520px) and (orientation: landscape) {
    .hero {
        height: auto;
        min-height: 100svh;
        padding-top: calc(var(--nav-height) + 1.5rem);
        padding-bottom: 2rem;
    }

    .hero-content { height: auto; }
    .hero-content h1 {
        font-size: clamp(1.9rem, 5vw, 2.6rem);
        margin-bottom: 0.75rem;
    }
    .hero-content p {
        max-width: 600px;
        margin-bottom: 1.25rem;
        font-size: 0.95rem;
        line-height: 1.5;
    }
    .hero-badge { margin-bottom: 0.75rem; }
    .hero-buttons .btn {
        min-height: 44px;
        padding: 10px 22px;
    }
    .whatsapp-float { display: none !important; }
}

/* ========== STANDALONE ERROR PAGE (404.html) ========== */
.page-error {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--primary-dark);
    color: var(--on-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.page-error .nav-bar {
    background: rgba(18, 54, 34, 0.95);
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.page-error .nav-bar img { height: 45px; width: auto; }
.page-error .nav-bar-text h1 { font-size: 1.1rem; color: var(--on-primary); font-weight: 700; }
.page-error .nav-bar-text span { font-size: 0.75rem; color: rgba(255,255,255,0.72); text-transform: uppercase; letter-spacing: 1.5px; }

.page-error .error-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
}

.page-error .error-content { max-width: 600px; }
.page-error .error-code {
    font-size: 8rem;
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
}

.page-error .error-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--on-primary);
}

.page-error .error-desc {
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.7);
    margin-bottom: 2.5rem;
}

.page-error .error-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 3rem;
}

.page-error .btn-404 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.3s;
}

.page-error .btn-404:hover { transform: translateY(-3px); }
.page-error .btn-primary-404 { background: var(--accent); color: var(--on-accent); }
.page-error .btn-primary-404:hover { background: var(--accent-hover); box-shadow: 0 8px 25px rgba(246, 137, 38, 0.4); }
.page-error .btn-outline-404 { background: transparent; color: var(--on-primary); border: 2px solid rgba(255,255,255,0.5); }
.page-error .btn-outline-404:hover { border-color: var(--on-primary); background: rgba(255,255,255,0.05); }
.page-error .btn-wa-404 { background: var(--success); color: var(--on-success); }
.page-error .btn-wa-404:hover { filter: brightness(0.92); box-shadow: 0 8px 25px rgba(37, 211, 102, 0.3); }

.page-error .quick-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem;
}

.page-error .quick-links a {
    padding: 8px 18px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50px;
    color: rgba(255,255,255,0.7);
    font-size: 0.85rem;
    text-decoration: none;
    transition: all 0.3s;
}

.page-error .quick-links a:hover {
    background: rgba(246, 137, 38, 0.15);
    border-color: var(--accent);
    color: var(--accent-on-dark);
}

.page-error .footer-404 {
    padding: 1.5rem 2rem;
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.08);
    font-size: 0.8rem;
    color: rgba(255,255,255,0.7);
}

.page-error .footer-404 a { color: var(--accent-on-dark); text-decoration: none; }

@media (max-width: 768px) {
    .page-error .error-code { font-size: 5rem; }
    .page-error .error-title { font-size: 1.4rem; }
    .page-error .error-desc { font-size: 0.95rem; }
    .page-error .btn-404 { padding: 12px 24px; font-size: 0.85rem; width: 100%; justify-content: center; }
    .page-error .error-actions { flex-direction: column; align-items: stretch; max-width: 320px; margin-left: auto; margin-right: auto; }
}

/* ========== STANDALONE OFFLINE PAGE (offline.html) ========== */
.page-offline {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--primary-dark);
    color: var(--on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    text-align: center;
    padding: 2rem;
}

.page-offline .offline-container { max-width: 500px; }
.page-offline .offline-icon { font-size: 4rem; margin-bottom: 1.5rem; }
.page-offline h1 { font-size: 2rem; margin-bottom: 1rem; color: var(--accent-on-dark); }
.page-offline p { color: rgba(255,255,255,0.82); font-size: 1.1rem; line-height: 1.6; margin-bottom: 2rem; }

.page-offline .btn-retry {
    display: inline-block;
    padding: 14px 32px;
    background: var(--accent);
    color: var(--on-accent);
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s;
}

.page-offline .btn-retry:hover { background: var(--accent-hover); transform: translateY(-2px); }
.page-offline .contact-info {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,0.15);
    font-size: 0.9rem;
}

.page-offline .contact-info p {
    margin-bottom: 0;
    color: rgba(255,255,255,0.78);
    font-size: 0.9rem;
}

.page-offline .contact-info a { color: var(--accent-on-dark); }
.page-offline .contact-info a[href^="https://wa.me"] { color: var(--success); }

/* ========== ABOUT PAGE: WHY DGS CARDS (pages/about.html) ========== */
.page-about .why-dgs-section {
    padding: 3.5rem 2rem;
    background: linear-gradient(135deg, var(--light-bg) 0%, var(--section-bg) 100%);
    position: relative;
    overflow: hidden;
}

.page-about .why-dgs-section::before,
.page-about .why-dgs-section::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(246, 137, 38, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.page-about .why-dgs-section::before {
    width: 400px;
    height: 400px;
    top: -150px;
    right: -100px;
}

.page-about .why-dgs-section::after {
    width: 500px;
    height: 500px;
    bottom: -200px;
    left: -150px;
}

.page-about .why-dgs-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.page-about .why-dgs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.8rem;
    margin-top: 3rem;
}

.page-about .why-dgs-card {
    background: var(--surface);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.06);
    transition: all 0.4s ease;
    position: relative;
    border: 1px solid rgba(246, 137, 38, 0.08);
}

.page-about .why-dgs-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--accent-light));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
}

.page-about .why-dgs-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

.page-about .why-dgs-card:hover::before { transform: scaleX(1); }
.page-about .why-dgs-card:hover .why-dgs-icon {
    transform: rotate(-5deg) scale(1.1);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: var(--accent-on-dark);
}

.page-about .why-dgs-card-inner { padding: 2rem; }
.page-about .why-dgs-card-header {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 1.2rem;
}

.page-about .why-dgs-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: var(--on-accent);
    flex-shrink: 0;
    transition: all 0.4s ease;
    box-shadow: 0 6px 20px rgba(246, 137, 38, 0.3);
}

.page-about .why-dgs-number {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    font-weight: 700;
    color: rgba(246, 137, 38, 0.15);
    line-height: 1;
    margin-left: auto;
}

.page-about .why-dgs-card h4 {
    font-family: 'Playfair Display', serif;
    color: var(--primary);
    font-size: 1.25rem;
    margin-bottom: 0.6rem;
}

.page-about .why-dgs-card p {
    color: var(--text-light);
    font-size: 0.92rem;
    line-height: 1.7;
    margin-bottom: 1rem;
}

.page-about .why-dgs-card-footer {
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--accent-text);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.page-about .why-dgs-card-footer .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    animation: about-pulse-dot 2s infinite;
}

@keyframes about-pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.4); }
}

@media (max-width: 1024px) {
    .page-about .why-dgs-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .page-about .why-dgs-section { padding: 2.125rem 1rem; }
    .page-about .why-dgs-grid { grid-template-columns: 1fr; gap: 1.2rem; }
    .page-about .why-dgs-card-inner { padding: 1.5rem; }
    .page-about .why-dgs-icon { width: 54px; height: 54px; font-size: 1.5rem; }
    .page-about .why-dgs-number { font-size: 2.2rem; }
    .page-about .why-dgs-card h4 { font-size: 1.1rem; }
}

/* ========== ACADEMICS PAGE: FEATURE CARDS (pages/academics.html) ========== */
.page-academics .academic-features {
    padding: 3.5rem 2rem;
    background: var(--surface);
    position: relative;
}

.page-academics .acad-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.8rem;
    margin-top: 3rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.page-academics .acad-feature-card {
    background: var(--surface);
    border-radius: 18px;
    padding: 2rem;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.06);
    transition: all 0.4s ease;
    border: 1px solid rgba(246, 137, 38, 0.08);
    position: relative;
    overflow: hidden;
}

.page-academics .acad-feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--accent-light));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
}

.page-academics .acad-feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.1);
}

.page-academics .acad-feature-card:hover::before { transform: scaleX(1); }
.page-academics .acad-feature-card:hover .acad-feature-icon { transform: rotate(-5deg) scale(1.1); }
.page-academics .acad-feature-icon {
    width: 68px;
    height: 68px;
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--on-accent);
    margin-bottom: 1.3rem;
    transition: all 0.4s ease;
    box-shadow: 0 6px 20px rgba(246, 137, 38, 0.3);
}

.page-academics .acad-feature-card h3 {
    font-family: 'Playfair Display', serif;
    color: var(--primary);
    font-size: 1.25rem;
    margin-bottom: 0.6rem;
}

.page-academics .acad-feature-card p {
    color: var(--text-light);
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 1rem;
}

.page-academics .acad-feature-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.page-academics .acad-feature-highlights span {
    background: rgba(246, 137, 38, 0.1);
    color: var(--accent-text);
    padding: 4px 10px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

@media (max-width: 1024px) {
    .page-academics .acad-features-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .page-academics .academic-features { padding: 2.125rem 1rem; }
    .page-academics .acad-features-grid { grid-template-columns: 1fr; gap: 1.2rem; }
    .page-academics .acad-feature-card { padding: 1.5rem; }
    .page-academics .acad-feature-icon { width: 56px; height: 56px; font-size: 1.6rem; }
}

/* ========== CALENDAR PAGE: PRINT LAYOUT (pages/calender.html) ========== */
@media print {
    .page-calendar #site-header,
    .page-calendar #site-footer,
    .page-calendar .page-banner,
    .page-calendar .visit-cta-bar,
    .page-calendar .cta-section,
    .page-calendar .whatsapp-float,
    .page-calendar .breadcrumb,
    .page-calendar .btn { display: none !important; }

    .page-calendar { background: white; color: black; }
    .page-calendar .section { padding: 1rem 0; }
    .page-calendar .data-table { font-size: 11pt; }
    .page-calendar .data-table th {
        background: var(--primary-dark) !important;
        color: var(--on-primary) !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .page-calendar h2::before { content: "Doon Global School - "; font-size: 0.8em; color: #666; }
}

/* ========== CAMPUS PAGE: FACILITY CARDS (pages/dgs-campus.html) ========== */
.page-campus .facilities-section {
    padding: 3.5rem 2rem;
    background: var(--surface);
    position: relative;
}

.page-campus .facilities-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    max-width: 1300px;
    margin: 3rem auto 0;
}

.page-campus .facility-card {
    background: var(--surface);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: all 0.4s ease;
    position: relative;
    border: 1px solid rgba(246, 137, 38, 0.08);
}

.page-campus .facility-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(246, 137, 38, 0), rgba(246, 137, 38, 0.05));
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.page-campus .facility-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
    border-color: var(--accent);
}

.page-campus .facility-card:hover::before { opacity: 1; }
.page-campus .facility-card:hover .facility-icon {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: var(--accent-on-dark);
    transform: rotate(-8deg) scale(1.1);
}

.page-campus .facility-card-inner {
    padding: 2rem 1.5rem;
    text-align: center;
    position: relative;
    z-index: 1;
}

.page-campus .facility-icon {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--on-accent);
    margin: 0 auto 1.2rem;
    transition: all 0.4s ease;
    box-shadow: 0 8px 25px rgba(246, 137, 38, 0.3);
}

.page-campus .facility-card h4 {
    font-family: 'Playfair Display', serif;
    color: var(--primary);
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
}

.page-campus .facility-card p {
    color: var(--text-light);
    font-size: 0.85rem;
    line-height: 1.65;
    margin-bottom: 1rem;
}

.page-campus .facility-tag {
    display: inline-block;
    background: rgba(246, 137, 38, 0.1);
    color: var(--accent-text);
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@media (max-width: 1024px) {
    .page-campus .facilities-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .page-campus .facilities-section { padding: 2.125rem 1rem; }
    .page-campus .facilities-grid { grid-template-columns: 1fr; gap: 1rem; }
    .page-campus .facility-card-inner { padding: 1.5rem; }
    .page-campus .facility-icon { width: 60px; height: 60px; font-size: 1.6rem; }
}

/* ========== FOUNDER PAGE: INTRO AND MESSAGE (pages/founders-message.html) ========== */
.page-founder .founder-intro {
    padding: 3.5rem 2rem;
    background: linear-gradient(135deg, var(--light-bg) 0%, var(--section-bg) 100%);
    position: relative;
    overflow: hidden;
}

.page-founder .founder-intro::before {
    content: '';
    position: absolute;
    top: -150px;
    right: -150px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(246, 137, 38, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}

.page-founder .founder-intro::after {
    content: '';
    position: absolute;
    bottom: -100px;
    left: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(18, 54, 34, 0.06) 0%, transparent 70%);
    border-radius: 50%;
}

.page-founder .founder-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 2;
}

.page-founder .founder-photo-wrap { position: relative; }
.page-founder .founder-photo-wrap::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    width: 100%;
    height: 100%;
    border: 3px solid var(--accent);
    border-radius: 20px;
    z-index: 0;
}

.page-founder .founder-photo {
    position: relative;
    z-index: 2;
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
    display: block;
}

.page-founder .founder-photo-badge {
    position: absolute;
    bottom: 30px;
    right: -20px;
    z-index: 3;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
    color: var(--on-accent);
    padding: 1.2rem 1.5rem;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(246, 137, 38, 0.4);
    text-align: center;
}

.page-founder .founder-photo-badge .num {
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
}

.page-founder .founder-photo-badge .lbl {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 4px;
}

.page-founder .founder-info .section-tag {
    color: var(--accent-text);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.85rem;
    margin-bottom: 1rem;
    display: inline-block;
}

.page-founder .founder-info h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.8rem;
    color: var(--primary);
    line-height: 1.15;
    margin-bottom: 0.8rem;
}

.page-founder .founder-info .founder-title {
    color: var(--accent-text);
    font-weight: 700;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1.5rem;
}

.page-founder .founder-info .founder-quote {
    color: var(--text-light);
    font-size: 1.1rem;
    line-height: 1.8;
    font-style: italic;
    padding-left: 1.5rem;
    border: 1px solid rgba(0,0,0,0.08);
    margin-bottom: 2rem;
}

.page-founder .founder-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 2rem;
}

.page-founder .founder-stat {
    background: var(--surface);
    padding: 1.2rem 1rem;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    text-align: center;
    border-top: 3px solid var(--accent);
}

.page-founder .founder-stat .n {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
}

.page-founder .founder-stat .l {
    font-size: 0.8rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-top: 6px;
}

.page-founder .founder-message {
    padding: 3.5rem 2rem;
    background: var(--surface);
}

.page-founder .message-letter {
    max-width: 900px;
    margin: 0 auto;
    background: var(--surface);
    border-radius: 20px;
    padding: 3.5rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
    position: relative;
    border: 1px solid rgba(246, 137, 38, 0.15);
}

.page-founder .message-letter::before {
    content: '\201C';
    position: absolute;
    top: -30px;
    left: 40px;
    font-family: 'Playfair Display', serif;
    font-size: 10rem;
    color: var(--accent);
    line-height: 1;
    opacity: 0.3;
}

.page-founder .message-header {
    text-align: center;
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 2px dashed var(--light-bg);
}

.page-founder .message-header .section-tag {
    display: inline-block;
    background: rgba(246, 137, 38, 0.15);
    color: var(--accent-text);
    padding: 5px 16px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 0.8rem;
}

.page-founder .message-header h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.page-founder .message-header p { color: var(--text-light); font-size: 0.95rem; }
.page-founder .message-body {
    color: var(--text);
    line-height: 1.9;
    font-size: 1.02rem;
}

.page-founder .message-body .greeting {
    font-family: 'Playfair Display', serif;
    font-size: 1.35rem;
    color: var(--primary);
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.page-founder .message-body p { color: var(--text-light); margin-bottom: 1.3rem; }
.page-founder .message-body .highlight-quote {
    margin: 2rem 0;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(246, 137, 38, 0.08) 0%, rgba(246, 137, 38, 0.03) 100%);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    color: var(--primary);
    line-height: 1.7;
    font-style: italic;
    position: relative;
}

.page-founder .message-body .highlight-quote::before {
    content: '\275D';
    position: absolute;
    top: 10px;
    left: 15px;
    font-size: 2.5rem;
    color: var(--accent);
    opacity: 0.3;
    line-height: 1;
}

.page-founder .message-body .highlight-quote p { color: var(--primary); margin: 0; padding-left: 2.5rem; }
.page-founder .message-signature {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid var(--light-bg);
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.page-founder .signature-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--accent);
    flex-shrink: 0;
}

.page-founder .signature-details .name {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    color: var(--primary);
    font-weight: 700;
    margin-bottom: 2px;
}

.page-founder .signature-details .role {
    color: var(--accent-text);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 2px;
}

.page-founder .signature-details .org { color: var(--text-light); font-size: 0.85rem; }

@media (max-width: 1024px) {
    .page-founder .founder-grid { grid-template-columns: 1fr; gap: 3rem; }
    .page-founder .founder-photo-wrap { max-width: 450px; margin: 0 auto; }
}

@media (max-width: 768px) {
    .page-founder .founder-intro { padding: 2.125rem 1rem; }
    .page-founder .founder-photo-wrap::before { left: 0; top: -10px; }
    .page-founder .founder-info h2 { font-size: 2rem; }
    .page-founder .founder-info .founder-quote { font-size: 0.95rem; padding-left: 1rem; }
    .page-founder .founder-stats-row { grid-template-columns: 1fr; gap: 0.8rem; }
    .page-founder .founder-stat { padding: 1rem; }
    .page-founder .founder-stat .n { font-size: 1.5rem; }
    .page-founder .founder-photo-badge { bottom: 20px; right: 10px; padding: 0.8rem 1rem; }
    .page-founder .founder-photo-badge .num { font-size: 1.6rem; }
    .page-founder .founder-message { padding: 2.125rem 1rem; }
    .page-founder .message-letter { padding: 2rem 1.3rem; }
    .page-founder .message-letter::before { font-size: 6rem; top: -15px; left: 15px; }
    .page-founder .message-header h2 { font-size: 1.5rem; }
    .page-founder .message-body { font-size: 0.92rem; }
    .page-founder .message-body .greeting { font-size: 1.1rem; }
    .page-founder .message-body .highlight-quote { padding: 1.3rem; font-size: 1rem; }
    .page-founder .message-body .highlight-quote p { padding-left: 1.5rem; }
    .page-founder .message-signature { flex-direction: column; text-align: center; gap: 1rem; }
}

/* ========== DANCE COMPETITION PAGE: CATEGORIES (pages/inter-school-dance-competition.html) ========== */
.page-dance-competition .dance-categories {
    padding: 3.5rem 2rem;
    background: linear-gradient(135deg, var(--light-bg) 0%, var(--section-bg) 100%);
    position: relative;
    overflow: hidden;
}

.page-dance-competition .dance-categories::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(246, 137, 38, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.page-dance-competition .dance-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.8rem;
    max-width: 1200px;
    margin: 3rem auto 0;
    position: relative;
    z-index: 2;
}

.page-dance-competition .dance-card {
    background: var(--surface);
    border-radius: 20px;
    padding: 2.2rem 1.8rem;
    text-align: center;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.06);
    transition: all 0.4s ease;
    border: 1px solid rgba(246, 137, 38, 0.08);
    position: relative;
    overflow: hidden;
}

.page-dance-competition .dance-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--accent), var(--accent-light));
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.5s ease;
}

.page-dance-competition .dance-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
    border-color: var(--accent);
}

.page-dance-competition .dance-card:hover::before { transform: scaleX(1); }
.page-dance-competition .dance-card:hover .dance-icon {
    transform: rotate(10deg) scale(1.1);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: var(--accent-on-dark);
}

.page-dance-competition .dance-icon {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    color: var(--on-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.8rem;
    margin: 0 auto 1.3rem;
    transition: all 0.4s ease;
    box-shadow: 0 8px 25px rgba(246, 137, 38, 0.35);
}

.page-dance-competition .dance-card h4 {
    font-family: 'Playfair Display', serif;
    color: var(--primary);
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}

.page-dance-competition .dance-subtitle {
    color: var(--accent-text);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 1rem;
}

.page-dance-competition .dance-card p {
    color: var(--text-light);
    font-size: 0.85rem;
    line-height: 1.7;
    margin-bottom: 1.2rem;
}

.page-dance-competition .dance-styles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    padding-top: 1rem;
    border-top: 1px dashed rgba(0, 0, 0, 0.08);
}

.page-dance-competition .dance-styles span {
    background: rgba(246, 137, 38, 0.1);
    color: var(--primary);
    padding: 4px 10px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
}

@media (max-width: 1024px) {
    .page-dance-competition .dance-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .page-dance-competition .dance-categories { padding: 2.125rem 1rem; }
    .page-dance-competition .dance-grid { grid-template-columns: 1fr; gap: 1.2rem; }
    .page-dance-competition .dance-card { padding: 1.8rem 1.5rem; }
    .page-dance-competition .dance-icon { width: 72px; height: 72px; font-size: 2.2rem; }
}

/* ========== MESSAGE TO PARENTS PAGE: PRINCIPAL CARD (pages/message-parents.html) ========== */
.page-message-parents .principal-card {
    background: var(--surface);
    border-radius: 20px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.08);
    overflow: hidden;
    max-width: 900px;
    margin: 0 auto;
}

.page-message-parents .principal-header {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    padding: 2.5rem;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: var(--on-primary);
}

.page-message-parents .principal-photo {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid var(--accent);
    flex-shrink: 0;
}

.page-message-parents .principal-info h2 {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    margin-bottom: 0.3rem;
    color: var(--on-primary);
}

.page-message-parents .principal-info .role {
    color: var(--accent-on-dark);
    font-weight: 600;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.page-message-parents .principal-info .quals {
    color: rgba(255,255,255,0.7);
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

.page-message-parents .principal-message { padding: 2.5rem; }
.page-message-parents .principal-message p {
    color: var(--text-light);
    line-height: 1.9;
    margin-bottom: 1.2rem;
    font-size: 1.02rem;
}

.page-message-parents .principal-message .signature {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--light-bg);
}

.page-message-parents .principal-message .signature p { margin-bottom: 0.3rem; }
.page-message-parents .principal-message .signature strong { color: var(--primary); font-size: 1.1rem; }
.page-message-parents .principal-message .jai-hind {
    color: var(--accent-text);
    font-weight: 700;
    font-size: 1.1rem;
    font-style: italic;
}

@media (max-width: 768px) {
    .page-message-parents .principal-header { flex-direction: column; text-align: center; padding: 1.5rem; gap: 1.5rem; }
    .page-message-parents .principal-photo { width: 120px; height: 120px; }
    .page-message-parents .principal-info h2 { font-size: 1.4rem; }
    .page-message-parents .principal-info .role { font-size: 0.8rem; }
    .page-message-parents .principal-message { padding: 1.5rem; }
    .page-message-parents .principal-message p { font-size: 0.9rem; }
}

@media (max-width: 480px) {
    .page-message-parents .principal-header { padding: 1.2rem; gap: 1rem; }
    .page-message-parents .principal-photo { width: 100px; height: 100px; border-width: 3px; }
    .page-message-parents .principal-info h2 { font-size: 1.2rem; }
    .page-message-parents .principal-message { padding: 1rem; }
    .page-message-parents .principal-message p { font-size: 0.85rem; line-height: 1.7; }
}

/* ========== ORIENTATION PAGE: PROGRAM CARDS (pages/orientation.html) ========== */
.page-orientation .orientation-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.8rem;
    margin-top: 3rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.page-orientation .orientation-card {
    background: var(--surface);
    border-radius: 16px;
    padding: 2rem 1.8rem;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.06);
    transition: all 0.4s ease;
    border: 1px solid rgba(246, 137, 38, 0.08);
    position: relative;
}

.page-orientation .orientation-number {
    position: absolute;
    top: -15px;
    right: 20px;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    color: var(--on-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    font-weight: 700;
    box-shadow: 0 6px 20px rgba(246, 137, 38, 0.4);
    border: 4px solid var(--light-bg);
}

.page-orientation .orientation-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
    border-color: var(--accent);
}

.page-orientation .orientation-card:hover .orientation-number {
    transform: rotate(360deg);
    transition: transform 0.6s ease;
}

.page-orientation .orientation-card:hover .orientation-icon { transform: scale(1.1); }
.page-orientation .orientation-icon {
    width: 56px;
    height: 56px;
    background: rgba(246, 137, 38, 0.12);
    color: var(--accent-text);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 1.2rem;
    transition: all 0.4s ease;
}

.page-orientation .orientation-card h3 {
    font-family: 'Playfair Display', serif;
    color: var(--primary);
    font-size: 1.2rem;
    margin-bottom: 0.6rem;
}

.page-orientation .orientation-card p {
    color: var(--text-light);
    font-size: 0.88rem;
    line-height: 1.7;
}

@media (max-width: 1024px) {
    .page-orientation .orientation-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .page-orientation .orientation-grid { grid-template-columns: 1fr; gap: 1.2rem; }
    .page-orientation .orientation-card { padding: 1.5rem; }
}

/* ========== SAFETY PAGE: PROTOCOL CARDS (pages/safety-security.html) ========== */
.page-safety-security .safety-protocols {
    padding: 3.5rem 2rem;
    background: linear-gradient(135deg, var(--light-bg) 0%, var(--section-bg) 100%);
    position: relative;
    overflow: hidden;
}

.page-safety-security .safety-protocols::before {
    content: '';
    position: absolute;
    top: -150px;
    right: -150px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(231, 76, 60, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.page-safety-security .protocols-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1200px;
    margin: 3rem auto 0;
    position: relative;
    z-index: 2;
}

.page-safety-security .protocol-card {
    background: var(--surface);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
    text-align: center;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    border-top: 5px solid var(--accent);
}

.page-safety-security .protocol-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--accent-light));
    transition: all 0.4s ease;
    transform: translateX(-50%);
}

.page-safety-security .protocol-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

.page-safety-security .protocol-card:hover::after { width: 60%; }
.page-safety-security .protocol-card:hover .protocol-icon {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: var(--accent-on-dark);
}

.page-safety-security .protocol-icon {
    width: 90px;
    height: 90px;
    border-radius: 24px;
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    color: var(--on-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin: 0 auto 1.5rem;
    transition: all 0.4s ease;
    box-shadow: 0 10px 30px rgba(246, 137, 38, 0.35);
}

.page-safety-security .protocol-card h3 {
    font-family: 'Playfair Display', serif;
    color: var(--primary);
    font-size: 1.25rem;
    margin-bottom: 0.8rem;
}

.page-safety-security .protocol-card p {
    color: var(--text-light);
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 1.2rem;
}

.page-safety-security .protocol-checklist {
    list-style: none;
    padding: 1rem 0 0;
    margin: 0;
    text-align: left;
    border-top: 1px dashed rgba(0, 0, 0, 0.08);
}

.page-safety-security .protocol-checklist li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    color: var(--text-light);
    font-size: 0.82rem;
}

.page-safety-security .protocol-checklist li::before {
    content: '';
    width: 7px;
    height: 12px;
    margin: 0 6px 3px 3px;
    border: solid var(--primary);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    flex-shrink: 0;
}

@media (max-width: 1024px) {
    .page-safety-security .protocols-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .page-safety-security .safety-protocols { padding: 2.125rem 1rem; }
    .page-safety-security .protocols-grid { grid-template-columns: 1fr; gap: 1.2rem; }
    .page-safety-security .protocol-card { padding: 2rem 1.5rem; }
    .page-safety-security .protocol-icon { width: 72px; height: 72px; font-size: 2rem; }
}

/* ========== TEACHERS PAGE: FACULTY CARDS (pages/teachers.html) ========== */
.page-teachers .teacher-card { text-align: center; }
.page-teachers .teacher-card .card-img { height: 280px; }
.page-teachers .teacher-card .card-img img { object-position: top; }
.page-teachers .teacher-card .card-body h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    color: var(--primary);
    margin-bottom: 0.3rem;
}

.page-teachers .teacher-card .card-body .role {
    color: var(--accent-text);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.4rem;
}

.page-teachers .teacher-card .card-body .qual {
    color: var(--text-light);
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 0.3rem;
}

.page-teachers .teacher-card .card-body .exp { color: var(--primary); font-weight: 600; font-size: 0.8rem; }
.page-teachers .leadership-grid { grid-template-columns: repeat(3, 1fr) !important; }

@media (max-width: 1024px) {
    .page-teachers .leadership-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .page-teachers .teacher-card .card-img { height: 240px; }
}

@media (max-width: 768px) {
    .page-teachers .leadership-grid { grid-template-columns: 1fr !important; }
    .page-teachers .teacher-card .card-img { height: 280px; }
    .page-teachers .teacher-card .card-body h4 { font-size: 1rem; }
    .page-teachers .teacher-card .card-body .qual { font-size: 0.8rem; }
    .page-teachers .teacher-card .card-body .role { font-size: 0.8rem; }
}

@media (max-width: 480px) {
    .page-teachers .teacher-card .card-img { height: 220px; }
    .page-teachers .teacher-card .card-body { padding: 1rem; }
    .page-teachers .teacher-card .card-body h4 { font-size: 0.95rem; }
}

/* ========== SHARED SEMANTIC UTILITIES & ICONS ========== */
[hidden] { display: none !important; }

.mt-1 { margin-top: 1rem !important; }
.mt-2 { margin-top: 2rem !important; }
.section--flush-bottom { padding-bottom: 0 !important; }

.hi-icon,
.btn svg,
.btn-visit svg {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
}

.why-dgs-icon svg,
.acad-feature-icon svg,
.facility-icon svg {
    width: 2rem;
    height: 2rem;
}

.dance-icon svg,
.protocol-icon svg {
    width: 2.25rem;
    height: 2.25rem;
}

.orientation-icon svg,
.contact-icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.page-offline .offline-icon svg {
    width: 4rem;
    height: 4rem;
}

.mobile-menu button[aria-expanded="true"] .nav-arrow {
    transform: rotate(180deg);
}

.visit-cta-bar p {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}

.visit-cta-bar .hi-icon {
    width: 1.4rem;
    height: 1.4rem;
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.footer-social a:hover,
.footer-social a:focus-visible {
    background: var(--accent);
    color: var(--on-accent);
}

.legacy-badge-wrap {
    display: flex;
    justify-content: center;
    margin-top: 2.5rem;
}

.legacy-badge {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    max-width: 580px;
    padding: 1rem 1.4rem;
    border: 1px solid rgba(28, 79, 50, 0.16);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.legacy-badge-logo {
    width: 76px;
    height: 76px;
    object-fit: contain;
    flex: 0 0 auto;
}

.legacy-badge-title {
    margin-bottom: 0.2rem;
    color: var(--primary);
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    font-weight: 700;
}

.legacy-badge-text,
.principal-signature-role {
    color: var(--text-light);
    font-size: 0.88rem;
}

/* ========== CONTACT MAP ========== */
.map-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-bottom: 2rem;
}

.map-title {
    margin-bottom: 0.4rem;
    color: var(--primary);
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.75rem, 4vw, 2.35rem);
}

.map-subtitle { color: var(--text-light); }

.btn-map {
    flex: 0 0 auto;
    background: var(--primary);
    color: var(--white);
}

.btn-map:hover { background: var(--primary-dark); }
.map-section--large { height: 450px; }

/* ========== FEE PAGE COMPONENTS ========== */
.fee-summary-row {
    background: rgba(28, 79, 50, 0.08);
    color: var(--primary-dark);
    font-weight: 800;
}

.fee-table-note {
    margin-top: 1rem;
    color: var(--text-light);
    font-size: 0.84rem;
    line-height: 1.65;
}

.fee-policy-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.fee-policy-card {
    position: relative;
    min-width: 0;
    padding: 1.4rem;
    overflow: hidden;
    border: 1px solid var(--border);
    border-top: 4px solid var(--primary);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.fee-policy-icon {
    display: grid;
    width: 46px;
    height: 46px;
    margin-bottom: 1rem;
    place-items: center;
    border-radius: 13px;
    background: rgba(28, 79, 50, 0.11);
    color: var(--primary);
}

.fee-policy-icon svg { width: 24px; height: 24px; }
.fee-policy-card--warning { border-top-color: var(--accent-text); }
.fee-policy-card--warning .fee-policy-icon {
    background: rgba(156, 61, 0, 0.1);
    color: var(--accent-text);
}
.fee-policy-card--withdrawal { border-top-color: var(--danger); }
.fee-policy-card--withdrawal .fee-policy-icon {
    background: rgba(179, 38, 30, 0.1);
    color: var(--danger);
}
.fee-policy-card--info { border-top-color: var(--info); }
.fee-policy-card--info .fee-policy-icon {
    background: rgba(28, 79, 50, 0.1);
    color: var(--info);
}
.fee-policy-card--success { border-top-color: var(--success-text); }
.fee-policy-card--success .fee-policy-icon {
    background: rgba(11, 107, 58, 0.1);
    color: var(--success-text);
}

.fee-policy-title {
    margin-bottom: 0.6rem;
    color: var(--primary);
    font-family: 'Playfair Display', serif;
    font-size: 1.05rem;
}

.fee-policy-copy {
    color: var(--text-light);
    font-size: 0.86rem;
    line-height: 1.65;
}

.fee-notice {
    margin-top: 1.25rem;
    padding: 1.25rem 1.4rem;
    border-left: 4px solid var(--accent-text);
    border-radius: 0 12px 12px 0;
    background: rgba(156, 61, 0, 0.07);
}

.fee-notice-copy {
    color: var(--text);
    font-size: 0.86rem;
    line-height: 1.8;
}

.fee-status {
    display: inline-block;
    margin-left: 0.3rem;
    font-size: 0.8em;
    font-weight: 700;
}
.fee-status--nonrefundable { color: var(--accent-text); }
.fee-status--refundable { color: var(--success-text); }
.fee-result-note {
    margin-top: 0.75rem;
    color: var(--text-light);
    font-size: 0.84rem;
}

@media (max-width: 1024px) {
    .fee-policy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .legacy-badge {
        width: 100%;
        align-items: flex-start;
    }

    .map-heading-row {
        align-items: stretch;
        flex-direction: column;
    }

    .btn-map { width: 100%; }
    .map-section--large { height: 300px; }
    .fee-policy-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .legacy-badge { padding: 1rem; }
    .legacy-badge-logo { width: 60px; height: 60px; }
    .legacy-badge-title { font-size: 1rem; }

    .fee-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.35rem;
    }

    .fee-row .fee-value {
        text-align: left;
        white-space: normal;
    }
}

/* ========== ADMISSION INQUIRY POPUP (restored) ========== */
.admission-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s;
    padding: 1rem;
}

.admission-popup-overlay.show {
    opacity: 1;
    visibility: visible;
}

.admission-popup {
    background: var(--white);
    border-radius: 20px;
    max-width: 440px;
    width: 100%;
    overflow: hidden;
    transform: scale(0.9) translateY(20px);
    transition: all 0.4s;
    box-shadow: 0 25px 60px rgba(0,0,0,0.3);
}

.admission-popup-overlay.show .admission-popup {
    transform: scale(1) translateY(0);
}

.admission-popup-header {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    padding: 1.8rem;
    text-align: center;
    position: relative;
}

/* School mark at the top of the popup, above the heading. The header paints a
   dark green gradient, so this is the white logo variant sitting straight on it
   with no plate or panel behind it. Width drives the size and height stays auto
   so the 1024x752 asset keeps its proportions - 110px wide renders ~81px tall. */
.popup-logo {
    display: block;
    width: 110px;
    height: auto;
    margin: 0 auto 0.9rem;
    background: none;
}

.admission-popup-header h3 {
    font-family: 'Playfair Display', serif;
    color: var(--white);
    font-size: 1.4rem;
    margin-bottom: 0.3rem;
}

.admission-popup-header p {
    /* --accent is only 3.59:1 on this gradient; 13.6px text needs 4.5:1. */
    color: var(--accent-on-dark);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.admission-popup-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    font-size: 1.5rem;
    cursor: pointer;
    transition: color 0.3s;
    line-height: 1;
}

.admission-popup-close:hover { color: var(--white); }

.admission-popup-body {
    padding: 1.5rem 1.8rem 1.8rem;
}

.admission-popup-body .form-group {
    margin-bottom: 1rem;
}

.admission-popup-body select {
    width: 100%;
    padding: 11px 14px;
    border: 2px solid #e0dcd4;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    transition: border-color 0.3s;
}

.admission-popup-body select:focus {
    outline: none;
    border-color: var(--accent);
}

.admission-popup-body .btn-popup-submit {
    width: 100%;
    padding: 13px;
    background: var(--accent);
    color: var(--primary-dark);
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all 0.3s;
}

.admission-popup-body .btn-popup-submit:hover {
    background: var(--accent-light);
    transform: translateY(-2px);
}

.admission-popup-body .popup-note {
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-light);
    margin-top: 0.8rem;
}

@media (max-width: 768px) {
    .admission-popup-header { padding: 1.3rem; }
    .admission-popup-header h3 { font-size: 1.2rem; }
    .admission-popup-body { padding: 1.2rem; }
    /* 82px wide renders ~60px tall at the same aspect ratio. */
    .popup-logo { width: 82px; margin-bottom: 0.7rem; }
}


/* ========== CLASSES THE MARKUP USES ==========
   These were referenced in HTML but never declared, so the elements fell back
   to unstyled defaults (btn-secondary rendered as plain bold text). */

/* Secondary button: outlined brand green, pairs with the solid orange primary. */
.btn-secondary {
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
    /* trim the padding by the border width so bordered and solid buttons
       finish the same height when they sit side by side */
    padding: 12px 30px;
}

.btn-secondary:hover {
    background: var(--primary);
    color: var(--white);
}

.section--dark .btn-secondary,
.cta-section .btn-secondary {
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.6);
}

.section--dark .btn-secondary:hover,
.cta-section .btn-secondary:hover {
    background: var(--white);
    color: var(--primary);
    border-color: var(--white);
}

/* Inline "see also" link used under a few section headers. */
.section-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent-text);
    font-weight: 600;
    transition: gap 0.3s ease;
}

.section-link:hover { gap: 10px; }

/* Timeline: the year chip and the copy beside it. */
.timeline-year {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    color: var(--accent-text);
    font-size: 1.05rem;
    margin-bottom: 0.35rem;
}

.timeline-content h4 {
    font-family: 'Playfair Display', serif;
    color: var(--primary);
    font-size: 1.15rem;
    margin-bottom: 0.4rem;
}

.timeline-content p {
    color: var(--text-light);
    line-height: 1.8;
    margin-bottom: 0;
}

/* Fee policy variant, matching the existing --info / --success / --withdrawal set. */
.fee-policy-card--schedule { border-top-color: var(--accent); }

.fee-policy-card--schedule .fee-policy-icon {
    background: rgba(246, 137, 38, 0.12);
    color: var(--accent-text);
}

/* Small print under the anniversary badge. */
.legacy-badge-copy {
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.7;
    margin-top: 0.5rem;
}

/* ========== FORM SUBMISSION STATE ==========
   Forms POST to /form-handler.php. These styles cover the honeypot that
   catches bots and the inline sending/success/error feedback. */

/* Bot trap. Kept out of sight and out of the tab order, never display:none -
   some bots skip hidden inputs, which would defeat the trap. */
.dgs-hp {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.form-status {
    margin-top: 1rem;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: 0.95rem;
    line-height: 1.6;
    border-left: 4px solid var(--primary);
    background: var(--light-bg);
    color: var(--text);
}

.form-status[hidden] { display: none; }

.form-status--ok {
    border-left-color: var(--primary);
    background: #eef6f0;
    color: var(--primary);
    font-weight: 600;
}

.form-status--error {
    border-left-color: #b3261e;
    background: #fdeeec;
    color: #8c1d18;
}

.form-status--sending {
    border-left-color: var(--accent);
    background: #fff6ec;
    color: #8a4a06;
}

/* Submit button while the request is in flight. */
button[disabled].btn, .btn[disabled] {
    opacity: 0.65;
    cursor: not-allowed;
}

/* ========== MOBILE FORM INPUTS ==========
   iOS Safari zooms the whole page when a focused field has a font-size below
   16px, which shoves the layout sideways mid-form. The desktop size (0.95rem)
   is kept; only touch widths are bumped to exactly 16px. */
@media (max-width: 768px) {
    .form-group input,
    .form-group textarea,
    .form-group select,
    .admission-popup .form-group input {
        font-size: 16px;
    }
}

/* ========== TOUCH TARGET MINIMUMS ==========
   WCAG 2.2 AA (2.5.8) asks for at least 24x24 CSS px on pointer targets.
   Links sitting inside a sentence are exempt, so this only lifts the
   standalone ones - card CTAs, section links, contents lists and the
   contact details - which measured 18-23px tall on a phone. */
.card-link,
.section-link {
    min-height: 24px;
}

.toc a,
.contact-details a,
.contact-item a,
.footer-col a {
    display: inline-block;
    min-height: 24px;
    line-height: 24px;
}

/* On touch widths give standalone links a little vertical breathing room so
   the target grows without changing the visual rhythm of the text. */
@media (max-width: 768px) {
    .card-link,
    .section-link,
    .toc a,
    .contact-details a,
    .contact-item a {
        padding-block: 3px;
        min-height: 30px;
    }
}

/* Bare standalone links closing an icon-card - no class of their own, but
   they are block-level CTAs rather than links inside a sentence, so they
   need the same 24px minimum as the other standalone targets. */
.icon-card > a:not([class]) {
    display: inline-block;
    min-height: 24px;
    line-height: 24px;
    font-weight: 600;
    color: var(--accent-text);
}

@media (max-width: 768px) {
    .icon-card > a:not([class]) {
        padding-block: 3px;
        min-height: 30px;
    }
}

/* Small helper text under a file input - tells applicants the accepted
   formats before they pick a file rather than after an error. */
.field-hint {
    display: block;
    margin-top: 5px;
    font-size: 0.8rem;
    color: var(--text-light);
}

/* ========== APPLY CTA PANEL ==========
   A contained card rather than loose centred text. It previously reused
   .section-header, which is built for tag + heading + one paragraph and
   carries a bottom margin of its own - so the button sat flush against the
   copy and the whole block floated in the section with no rhythm. */
.apply-cta {
    max-width: 660px;
    margin: 0 auto;
    padding: 3rem 2.5rem 2.6rem;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 18px;
    text-align: center;
    box-shadow: 0 2px 14px rgba(28, 79, 50, 0.06);
}

.apply-cta .section-tag { margin-bottom: 0.75rem; }

.apply-cta h2 {
    margin: 0 0 0.85rem;
    font-size: 2rem;
    line-height: 1.25;
    color: var(--primary);
}

.apply-cta > p:not(.apply-cta-note) {
    max-width: 430px;
    margin: 0 auto;
    color: var(--text-light);
    font-size: 1.02rem;
    line-height: 1.65;
}

.apply-cta-action {
    margin-top: 1.9rem;
    /* A flex row, not a line box. The button is inline-flex and ~52px tall;
       inside a text line it overflowed its own box and the divider below
       ended up drawn across it. As a flex container this wrapper takes the
       button's real height, so the rule sits cleanly underneath. */
    display: flex;
    justify-content: center;
}

/* Separated by a rule so the phone option reads as an alternative to the
   button above it, not as more of the same paragraph. */
.apply-cta-note {
    margin: 1.9rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--text-light);
}
/* Never let a phone number break across two lines - it stops being readable
   as a number the moment it wraps. */
.apply-cta-note a {
    color: var(--primary);
    font-weight: 600;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .apply-cta { padding: 2.2rem 1.4rem 1.8rem; border-radius: 14px; }
    .apply-cta h2 { font-size: 1.6rem; }
    .apply-cta .btn { width: 100%; }
    .apply-cta-note { font-size: 0.88rem; }
}

/* ============================================================================
   ICONS ON THE ORANGE ACCENT ARE WHITE
   ----------------------------------------------------------------------------
   These tiles paint the accent gradient and previously drew their glyph in
   --on-accent (the dark green). Icons only.

   Buttons that use the same orange - Apply Now, the primary CTAs, the popup
   submit - deliberately keep --on-accent. That is TEXT, and white text on this
   orange measures 2.46:1, which fails the 4.5:1 WCAG needs for body text. The
   icons are exempt because every one is aria-hidden and sits beside a heading
   carrying the same meaning, so they are decorative rather than informative.

   The SVGs all draw with stroke="currentColor" / fill="currentColor", so
   setting colour here is enough - no per-icon edits needed.
   ========================================================================== */
.explore-card .explore-icon,
.icon-card .icon-box,
.feature-item .check,
.icon-badge,
.page-about .why-dgs-icon,
.page-academics .acad-feature-icon,
.page-campus .facility-icon,
.page-dance-competition .dance-icon,
.page-safety-security .protocol-icon,
.page-founder .founder-photo-badge {
    color: #fff;
}
.explore-card .explore-icon svg,
.icon-card .icon-box svg,
.feature-item .check svg,
.icon-badge svg,
.page-about .why-dgs-icon svg,
.page-academics .acad-feature-icon svg,
.page-campus .facility-icon svg,
.page-dance-competition .dance-icon svg,
.page-safety-security .protocol-icon svg,
.page-founder .founder-photo-badge svg {
    stroke: currentColor;
}

/* ---- Hub links on a blog post -------------------------------------------
   Sends the reader from an article to the commercial page it is about. Sits
   above Related Articles deliberately: the next step should be offered before
   another article is. Anchors carry each page's own target phrase rather than
   "read more", so the link means something to a search engine as well. */
.hub-links { margin: 2.5rem 0 0; }
.hub-links h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem; color: var(--primary-dark); margin: 0 0 1rem;
}
.hub-links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.hub-links li {
    padding: .8rem 1rem;
    background: var(--surface, #fff);
    border: 1px solid rgba(28, 79, 50, .12);
    border-left: 3px solid var(--accent);
    border-radius: 10px;
    font-size: .95rem; line-height: 1.5; color: var(--text-muted, #5a6b60);
}
.hub-links li a { font-weight: 600; color: var(--primary-dark); }
.hub-links li a:hover { color: var(--accent-text); }
@media (min-width: 760px) { .hub-links ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }