/* Public website design layer. Keeps the prototype independent of the portal UI. */
:root {
  --ink: #173d30;
  --text: #324c41;
  --muted: #607269;
  --ivory: #faf9f5;
  --line: #dfe6de;
  --shadow: 0 16px 40px rgba(17, 54, 38, .07);
}
body { font-size: 16px; }
.container { width: min(1280px, calc(100% - 96px)); }
.utility-bar { height: 31px; font-size: 11px; }
.site-header { background: #fffefb; box-shadow: none; }
.brand { padding: 17px 0; }
.brand-mark, .brand-mark img { width: 52px; height: 52px; }
.brand-english { font-size: 12px; letter-spacing: .06em; }
.brand-short { font-size: 9px; }
.main-nav { height: 51px; }
.nav-main { font-size: 12px; font-weight: 650; padding: 0 9px; letter-spacing: 0; }
.nav-main.active { color: var(--pine); border-bottom-width: 3px; }
.nav-popover { border-radius: 0 0 12px 12px; padding: 20px; }
.nav-sub { font-size: 13px; padding: 10px 8px; }
.portal-button { border-radius: 6px; font-size: 12px; padding: 12px 18px; }
.button { border-radius: 6px; min-height: 50px; font-size: 13px; font-weight: 650; padding: 13px 21px; gap: 24px; }
.button-gold { background: #e5c58c; border-color: #e5c58c; }
.text-link { font-size: 13px; font-weight: 650; }
.eyebrow, .overline { font-size: 10px; letter-spacing: .17em; font-weight: 750; }

/* A quieter editorial hero: readable copy and a distinct learning image. */
.hero { background: #0b3529; min-height: 0; padding: 58px 0; }
.hero::before, .hero::after { content: none; }
.hero-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.hero-copy { width: 100%; padding: 14px 0; }
.hero-brow { color: #e6c58e; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 24px; gap: 9px; font-weight: 700; }
.hero-brow::before { content: none; }
.hero-status { width: 7px; height: 7px; border-radius: 50%; background: #ad8a4f; display: inline-block; flex: none; box-shadow: 0 0 0 4px rgba(173,138,79,.1); }
.hero h1 { color: #fffdf7; font-size: clamp(48px,4.4vw,68px); letter-spacing: -.04em; line-height: 1.06; margin-bottom: 24px; }
.hero h1 em { color: #50745c; }
.hero-intro { color: #e0ece4; font-size: 15px; line-height: 1.85; max-width: 430px; margin-bottom: 27px; }
.hero-note { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 28px; padding-top: 23px; border-top: 1px solid #527568; color: #d9e8df; font-size: 11px; }
.hero-note span { display: flex; gap: 7px; align-items: center; }
.hero-note svg { color: #e6c58e; }
.hero-visual { position: relative; min-width: 0; align-self: stretch; min-height: 490px; background: #103b2b; margin: 0; border: 1px solid #547367; border-radius: 8px; overflow: hidden; }
.hero-image-wrap { position: absolute; inset: 0; opacity: 1; height: auto; }
.hero-image { width: 100%; height: 100%; object-fit: cover; object-position: 90% center; }
.hero-visual::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg,rgba(9,40,28,.35),transparent 30%,transparent 65%,rgba(9,40,28,.45)); }
.hero-visual-label { position: absolute; z-index: 2; bottom: 18px; left: 18px; display: flex; align-items: center; gap: 9px; color: #fff; background: rgba(15,49,35,.75); padding: 9px 13px; border: 1px solid rgba(255,255,255,.18); border-radius: 4px; font-size: 11px; }
.hero-visual-label .hero-status { background: #e0c28a; }
.hero-image-caption { position: absolute; display: flex; align-items: center; gap: 13px; left: 22px; right: 22px; bottom: 42px; padding: 17px; border-radius: 8px; background: #fffef7; box-shadow: none; z-index: 3; }
.hero-caption-icon { color: #306449; background: #eaf0e7; width: 43px; height: 43px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.hero-image-caption strong { font-size: 14px; font-weight: 650; }
.hero-image-caption small { font-size: 10px; margin-top: 2px; }
.hero-caption-arrow { margin-left: auto; color: #426c53; font-size: 23px; }
.hero-visual-index { position: absolute; z-index: 3; bottom: 17px; left: 26px; color: #fff; letter-spacing: .18em; font-size: 8px; opacity: .85; }

/* Academic information first; smaller artwork, clear fee and structure. */
.highlights-wrap { margin-top: 0; border-bottom: 1px solid var(--line); background: #fffefb; }
.highlights { background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.highlight { min-height: 102px; padding: 23px 28px; gap: 15px; }
.highlight:first-child { padding-left: 0; }
.highlight-icon { border-radius: 50%; background: #eef2e8; }
.highlight strong { font-size: 13px; font-weight: 650; }
.highlight span { font-size: 11px; }
.section { padding: 80px 0; }
.section-small { padding: 60px 0; }
.section-heading { margin-bottom: 32px; }
.section-heading h2, .section-heading-title h2 { font-size: clamp(32px,3vw,44px); line-height: 1.14; margin-top: 12px; }
.section-heading p, .section-heading-title p { font-size: 14px; line-height: 1.85; max-width: 610px; }
.program-grid { gap: 24px; }
.program-card { border-radius: 10px; border-color: #dce4d9; box-shadow: 0 2px 4px rgba(20,50,30,.02); }
.program-card:hover { border-color: #a5baa8; transform: translateY(-4px); }
.program-art { height: 94px; padding: 20px 24px; align-items: center; background: #e8eee2; }
.program-art::before { width: 170px; height: 170px; right: -36px; bottom: -105px; border-color: rgba(39,83,56,.12); box-shadow: 0 0 0 28px rgba(39,83,56,.03); }
.program-art::after { content: none; }
.program-art-green { background: #e4eee5; }
.program-art-gold { background: #f0eadd; }
.program-art-sage { background: #e9edde; }
.program-art-plum { background: #e9e8ed; }
.program-art .program-symbol { width: 48px; height: 48px; background: rgba(255,255,255,.65); color: #2b6046; border: 1px solid rgba(38,83,56,.1); border-radius: 10px; backdrop-filter: none; }
.program-art-plum .program-symbol { color: #685670; }
.program-number { font: 650 9px var(--font-ui); color: #60715f; letter-spacing: .12em; right: 24px; bottom: auto; top: 43px; }
.program-card-body { padding: 25px; }
.program-tag { color: #61735f; font-size: 9px; letter-spacing: .13em; margin-bottom: 12px; }
.program-card h3 { font-size: 27px; line-height: 1.17; }
.program-card p { font-size: 13px; line-height: 1.8; margin-bottom: 23px; }
.course-structure { display: flex; flex-wrap: wrap; gap: 8px 14px; border-top: 1px solid #e7ece4; padding-top: 17px; margin-bottom: 18px; }
.course-structure span { display: inline-flex; align-items: center; gap: 6px; color: #5e7264; font-size: 11px; }
.program-card-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 18px; border-top: 0; padding-top: 0; }
.program-card-meta>span:first-child { font-size: 10px; max-width: 60%; }
.program-card-meta .course-fee { display: block; text-align: right; flex: none; }
.course-fee small { display: block; font-size: 9px; color: #788374; margin-bottom: 1px; }
.course-fee strong { font-size: 24px; font-weight: 600; letter-spacing: -.04em; color: var(--pine); }
.program-card .card-link { justify-content: space-between; border-top: 1px solid #e7ece4; padding-top: 16px; font-size: 12px; font-weight: 650; }
.program-after { gap: 20px; font-size: 12px; line-height: 1.8; }
.learning-teaser-section { background: #eeeFE7; padding: 70px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.learning-teaser { background: #fffefb; border: 1px solid #dce4d7; border-radius: 10px; box-shadow: none; padding: 32px; }
.learning-teaser h3 { font-size: 29px; }
.learning-teaser p { font-size: 13px; }
.learning-teaser-icon { border-radius: 50%; }
.about-grid { gap: 72px; }
.about-visual { min-height: 420px; border-radius: 10px 90px 10px 10px; background: #e0e8d9; }
.about-copy p { font-size: 14px; line-height: 1.9; }
.value-card { border-radius: 8px; background: #fafcf8; padding: 26px; }
.value-card h3 { font-size: 15px; }
.value-card p { font-size: 13px; }
.steps-grid { grid-template-columns: repeat(5,minmax(0,1fr)); border: 0; gap: 14px; }
.step-card { border: 1px solid var(--line); background: #fffefb; border-radius: 8px; min-height: 0; padding: 24px 20px; }
.step-card .step-num { margin-bottom: 22px; color: #9e824f; font-size: 27px; }
.step-card h3 { line-height: 1.4; font-size: 14px; }
.step-card p { font-size: 12px; line-height: 1.8; }
.journey-title p { font-size: 14px; }
.journey-footer p { font-size: 12px; }
.resource-card { border-radius: 8px; }
.resource-card p { font-size: 13px; }
.portal-band { padding: 60px 0; }
.portal-band p { font-size: 14px; }
.site-footer { padding-top: 60px; }
.footer-top { grid-template-columns: 1.7fr 1fr 1fr 1.1fr; gap: 36px; }
.footer-about .brand-english { max-width: 250px; line-height: 1.4; font-size: 10px; }
.footer-about .brand-arabic { font-size: 12px; }
.footer-about p, .footer-contact p, .footer-links a { font-size: 12px; line-height: 1.8; }

/* Shared interior pages. */
.page-banner { background: #eef1e8; color: var(--pine); padding: 42px 0 48px; border-bottom: 1px solid #dce5d7; }
.page-banner::after { border-color: rgba(53,96,64,.035); }
.breadcrumb { margin-bottom: 24px; font-size: 12px; color: #647862; }
.breadcrumb span { opacity: 1; }
.breadcrumb a:hover { color: var(--pine); text-decoration: underline; }
.page-banner .overline { color: #708161; font-size: 9px; }
.page-banner h1 { color: var(--pine); font-size: clamp(36px,4vw,54px); max-width: 920px; }
.page-banner p { color: #5b7162; font-size: 14px; max-width: 760px; }
.page-shell { grid-template-columns: 240px minmax(0,1fr); gap: 48px; padding-top: 48px; }
.page-sidebar { padding: 18px 12px; border-radius: 8px; box-shadow: none; }
.sidebar-link { font-size: 12px; line-height: 1.5; padding: 11px 10px; }
.sidebar-link.selected { background: #eaf0e4; border-radius: 5px; }
.content-section h2 { font-size: 31px; }
.content-section p, .content-section li, .check-item { font-size: 14px; line-height: 1.85; }
.content-section { padding-bottom: 30px; margin-bottom: 30px; }
.content-section .lead { font-size: 16px; }
.program-facts { border-radius: 8px; gap: 12px; }
.program-facts>div { border-radius: 6px; padding: 20px; background: #f0f3eb; }
.program-facts strong { font-size: 16px; }
.notice-box { border-radius: 6px; background: #f0f3e9; border-color: #dbe4d1; }
.notice-box p { font-size: 13px; }
.catalog-grid { gap: 24px; grid-template-columns: repeat(3,minmax(0,1fr)); }
.catalog-grid .program-art { height: 94px; }
.catalog-grid .program-card-body { padding: 25px; }
.catalog-grid .program-card h3 { font-size: 26px; }
.catalog-grid .program-card p { font-size: 13px; }
.filter-pill { border-radius: 5px; font-size: 12px; padding: 10px 16px; }
.filter-pill.is-active { background: var(--pine); color: #fff; }
.catalog-counter { font-size: 12px; }
.learning-card { border-radius: 8px; box-shadow: none; }
.learning-card h3 { font-size: 23px; }
.learning-card p { font-size: 13px; }
.faq-list { display: grid; gap: 12px; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.faq-item summary { font-size: 14px; padding: 21px 24px; font-weight: 650; }
.faq-answer { font-size: 14px; line-height: 1.85; padding: 0 24px 22px; }
.fee-table th { background: #edf2e7; }
.fee-table td { font-size: 13px; padding: 17px; }

@media (max-width: 1100px) {
  .container { width: calc(100% - 64px); }
  .hero-layout { gap: 32px; }
  .hero h1 { font-size: 56px; }
  .hero-visual { min-height: 460px; }
  .hero-note { flex-direction: column; }
  .steps-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .footer-top { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 980px) {
  .brand { padding: 14px 0; }
  .main-nav { height: auto; }
  .nav-main { padding: 14px 8px; font-size: 14px; }
  .nav-sub { font-size: 13px; }
  .mobile-portal-link { display: flex; padding: 13px; border-radius: 6px; background: #edf2e7; color: var(--pine); font-size: 13px; font-weight: 650; }
  .hero { padding: 38px 0 42px; }
  .hero-layout { gap: 26px; }
  .hero h1 { font-size: 49px; }
  .hero-visual { min-height: 400px; }
  .hero-brow { font-size: 8px; }
  .hero-intro { font-size: 14px; }
  .hero-actions { gap: 10px; }
  .hero-actions .button { font-size: 12px; padding: 12px 14px; gap: 15px; }
  .highlight { padding: 20px 16px; gap: 10px; }
  .highlight-icon { width: 34px; height: 34px; }
  .highlight strong { font-size: 12px; }
  .highlight span { font-size: 10px; }
  .program-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .catalog-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .program-grid .program-card:last-child { grid-column: 1 / -1; }
  .about-grid { gap: 35px; }
  .page-shell { grid-template-columns: 190px minmax(0,1fr); gap: 28px; }
  .page-sidebar { top: 95px; }
}
@media (max-width: 700px) {
  .container { width: calc(100% - 36px); }
  .brand-mark, .brand-mark img { width: 40px; height: 40px; }
  .brand { padding: 11px 0; }
  .header-inner .brand-english { font-size: 8px; max-width: 145px; line-height: 1.2; }
  .header-inner .brand-arabic { font-size: 9px; }
  .brand-short { font-size: 7px; }
  .portal-button { font-size: 0; min-width: 40px; padding: 9px; }
  .header-actions { gap: 0; }
  .hero { padding: 26px 0 30px; }
  .hero-layout { display: flex; flex-direction: column; gap: 25px; }
  .hero-copy { padding: 3px 0 0; }
  .hero-brow { font-size: 8px; margin-bottom: 21px; letter-spacing: .1em; }
  .hero h1 { font-size: clamp(36px,9vw,58px); line-height: 1.07; margin-bottom: 20px; }
  .hero h1 em br { display: none; }
  .hero-intro { font-size: 14px; line-height: 1.8; margin-bottom: 23px; }
  .hero-actions .button { min-height: 47px; font-size: 12px; padding: 12px 17px; }
  .hero-note { flex-direction: row; margin-top: 24px; padding-top: 18px; gap: 9px 16px; font-size: 10px; }
  .hero-visual { min-height: 300px; width: 100%; border-radius: 8px; }
  .hero-image-wrap { position: absolute; inset: 0; height: auto; }
  .hero-image { object-position: 94% center; }
  .hero-visual-label { bottom: 14px; left: 14px; font-size: 10px; padding: 7px 10px; }
  .hero-image-caption { display: flex; left: 14px; right: 14px; bottom: 32px; padding: 12px; }
  .hero-caption-icon { width: 34px; height: 34px; }
  .hero-image-caption strong { font-size: 12px; }
  .hero-image-caption small { font-size: 9px; }
  .hero-visual-index { bottom: 13px; font-size: 7px; left: 18px; }
  .highlights { grid-template-columns: 1fr; }
  .highlight, .highlight:first-child { min-height: 77px; padding: 16px 0; gap: 15px; }
  .highlight + .highlight { border-left: 0; border-top: 1px solid var(--line); }
  .highlight-icon { width: 38px; height: 38px; }
  .highlight strong { font-size: 13px; }
  .highlight span { font-size: 11px; }
  .section { padding: 54px 0; }
  .section-small { padding: 38px 0; }
  .section-heading h2, .section-heading-title h2 { font-size: 34px; }
  .section-heading p, .section-heading-title p { font-size: 14px; }
  .section-heading { margin-bottom: 26px; }
  .program-grid, .catalog-grid { grid-template-columns: 1fr; gap: 18px; }
  .program-card-body { padding: 23px; }
  .program-card h3 { font-size: 27px; }
  .program-art { height: 84px; }
  .catalog-grid .program-art { height: 84px; }
  .program-number { top: 38px; }
  .program-after { display: grid; gap: 14px; }
  .program-after a { justify-self: start; }
  .learning-teaser-section { padding: 48px 0; }
  .learning-teaser { padding: 23px; }
  .learning-teaser h3 { font-size: 26px; }
  .about-grid { grid-template-columns: 1fr; gap: 30px; }
  .about-visual { min-height: 330px; }
  .about-copy h2 { font-size: 35px; }
  .values-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 28px; }
  .value-card { padding: 23px; }
  .value-card .value-icon { margin-bottom: 19px; }
  .steps-grid { grid-template-columns: 1fr; gap: 0; }
  .step-card { padding: 22px 0 22px 52px; position: relative; border: 0; border-radius: 0; border-top: 1px solid var(--line); background: none; }
  .step-card .step-num { position: absolute; top: 21px; left: 0; font-size: 25px; }
  .step-card h3 { font-size: 15px; }
  .step-card p { font-size: 13px; }
  .journey-title h2 { font-size: 35px; }
  .portal-band { padding: 48px 0; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px 24px; padding-bottom: 35px; }
  .footer-about, .footer-contact { grid-column: 1 / -1; }
  .footer-about .brand-english { max-width: 230px; }
  .footer-bottom { font-size: 10px; }
  .page-banner { padding: 30px 0 36px; }
  .page-banner h1 { font-size: 37px; }
  .page-banner p { font-size: 14px; }
  .page-shell { display: block; padding-top: 25px; padding-bottom: 55px; }
  .page-sidebar { margin-bottom: 28px; padding: 8px; border-radius: 6px; }
  .sidebar-link { padding: 10px; font-size: 11px; }
  .content-section h2 { font-size: 29px; }
  .program-facts>div { padding: 16px 13px; }
  .program-facts strong { font-size: 14px; }
  .catalog-top { margin-bottom: 24px; }
  .filter-bar { gap: 7px; }
  .filter-pill { font-size: 11px; padding: 9px 12px; }
  .faq-item summary { padding: 18px; font-size: 13px; }
  .faq-answer { padding: 0 18px 18px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .program-card:hover, .resource-card:hover, .button:hover { transform: none; }
}

/* Align dropdown indicators with labels rather than the text baseline. */
.nav-caret { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 32px; padding: 0; margin-left: 0; color: #41634f; border-radius: 5px; }
.nav-caret svg { display: block; width: 14px; height: 14px; transition: transform .18s ease; }
.nav-caret:hover { background: #eaf0e4; color: var(--pine); }
.nav-item.menu-open .nav-caret svg { transform: rotate(180deg); }
@media (max-width: 980px) {
  .nav-caret { width: 44px; height: 44px; margin-left: 0; padding: 0; }
  .nav-caret svg { width: 16px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) { .nav-caret svg { transition: none; } }

/* Dropdowns follow their toggle state, so hover/focus cannot reopen them after navigation. */
@media (min-width: 981px) {
  .nav-popover { max-height: calc(100dvh - 180px); overflow-y: auto; }
}
@media (min-width: 981px) and (max-width: 1100px) {
  .nav-main { font-size: 11px; padding-left: 5px; padding-right: 5px; }
  .nav-caret { width: 24px; }
  .nav-item { flex-shrink: 0; }
}
@media (max-width: 980px) {
  .main-nav { max-height: calc(100dvh - 85px); }
}
.icon-button { min-width: 40px; min-height: 40px; }
.search-dialog { max-height: calc(100dvh - 40px); }
.search-empty { overflow-wrap: anywhere; }
.search-dialog[open] { display: flex; flex-direction: column; overflow: hidden; }
.search-dialog .dialog-head, .search-dialog .search-field, .search-dialog .dialog-bottom { flex-shrink: 0; }
.search-dialog .search-results { flex: 1 1 auto; min-height: 0; }
.search-field:focus-within { outline: 2px solid var(--jade); outline-offset: 2px; }
@media (max-width: 700px) {
  .search-dialog .dialog-head { margin-bottom: 16px; }
  .search-dialog .dialog-head h2 { font-size: 26px; }
}
.page-main:focus, #main-content:focus { outline: none; }

/* Readability fixes identified during the full prototype review. */
.course-fee small, .search-result small, .dialog-bottom, .program-facts span,
.learning-card-foot span, .sidebar-heading { color: #52675a; }
.catalog-heading { font: 500 32px/1.2 var(--font-serif); color: var(--pine); margin-bottom: 24px; }
input::placeholder, textarea::placeholder { color: #647267; opacity: 1; }


/* Keep static content and page links usable before scripts load. */
.static-site:not(.interactive) :is(.header-actions button, .nav-caret, .filter-bar, .learning-filter) {
  display: none;
}
.static-site:not(.interactive) .site-header { position: static; }
.static-site:not(.interactive) .main-nav {
  display: flex;
  flex-flow: row wrap;
  height: auto;
  max-height: none;
  padding: 0;
  overflow: visible;
}
.static-site:not(.interactive) .nav-item { width: auto; border: 0; }
.static-site:not(.interactive) .nav-main { padding: 10px 8px; }
.static-site:not(.interactive) .mobile-portal { display: none; }



.contact-heading { font: 500 clamp(27px, 3vw, 36px)/1.2 var(--font-serif); margin: 10px 0 20px; }
.contact-pathways { display: grid; gap: 14px; }
.contact-pathways .text-link { margin-top: 12px; }
.contact-method a { overflow-wrap: anywhere; }


.highlights .highlight:hover { background: #f2f6ef; }
.highlights .highlight:focus-visible { outline-offset: -4px; }
.highlights .quick-link-arrow { margin-left: auto; color: #345b48; font-size: 17px; }
.header-actions .portal-button .portal-full { font: inherit; margin: 0; }
.header-actions .portal-short { display: none; }
@media (max-width: 700px) {
  .highlights .highlight { padding-right: 10px; }
  .metric-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-item { min-width: 0; padding: 12px; }
  .metric-item strong { font-size: clamp(19px, 5.5vw, 27px); }
}
@media (min-width: 380px) and (max-width: 700px) {
  .header-actions .portal-button .portal-short { display: inline; font-size: 11px; font-weight: 650; margin: 0 4px 0 0; }
  .header-actions .portal-button .portal-arrow { font-size: 15px; }
}

/* Shared public-site palette and page structure. */
:root {
  --ink: #12382c;
  --pine: #143e30;
  --text: #30483e;
  --muted: #50675b;
  --ivory: #f7f4ea;
  --line: #d9e0d7;
  --site-dark: #10382c;
  --site-gold: #e8c786;
}

html { scroll-behavior: auto; }
body { background: #fffefa; }
.site-header { background: #fffefa; border-bottom: 1px solid var(--line); }
.utility-bar { background: var(--site-dark); }
.nav-main.active { border-color: #8b641d; }
.nav-popover, .search-dialog { border-radius: 4px; }
.nav-popover { border-top: 3px solid #a97d36; }
.button, .header-actions .portal-button { border-radius: 4px; }
.button-dark { background: var(--site-dark); border-color: var(--site-dark); color: #fff; }
.button-dark:hover { background: #205741; border-color: #205741; color: #fff; }
.button-outline { border-color: #758d7d; color: var(--pine); }
.button-gold { background: var(--site-gold); border-color: var(--site-gold); color: #14362a; }
.eyebrow { color: #5a521e; letter-spacing: .14em; }

.home-masthead {
  background: radial-gradient(ellipse at 50% 25%, #fffdf6 8%, transparent 72%), #f0ede1;
  padding: clamp(36px, 3.7vw, 58px) 0 0;
}
.masthead-copy { text-align: center; }
.masthead-kicker { margin-bottom: 19px; }
.masthead-copy h1 {
  color: var(--pine);
  font: 500 clamp(42px, 5.9vw, 86px)/.99 var(--font-serif);
  letter-spacing: -.045em;
  margin: 0 auto 20px;
}
.masthead-copy h1 span { display: block; }
.masthead-copy > p:not(.masthead-kicker) {
  max-width: 42ch;
  margin: 0 auto;
  color: var(--text);
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.55;
}
.masthead-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 22px 0 26px; }
.masthead-photo {
  position: relative;
  margin: 0 auto;
  height: clamp(245px, 32vw, 432px);
  overflow: hidden;
  border-radius: 6px 6px 0 0;
  background: var(--site-dark);
}
.masthead-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 52% 58%; }
.masthead-photo figcaption {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(13, 48, 37, .92);
  color: #fff;
  padding: 11px clamp(12px, 2.5vw, 28px);
  font-size: 13px;
}
.masthead-photo figcaption span { display: flex; align-items: center; gap: 8px; }
.masthead-photo figcaption small { color: #edf2ec; font-size: 11px; }
.home-shortcuts { border-bottom: 1px solid var(--line); background: #fffefa; }
.home-shortcuts .highlight strong { font-size: 15px; }
.home-shortcuts .highlight span { font-size: 12px; }
.home-shortcuts .highlight .quick-link-arrow { font-size: 18px; }

.home-course-grid, .home-admissions-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(30px, 8vw, 115px);
  align-items: start;
}
.home-section-intro h2 { font-size: clamp(34px, 4.7vw, 62px); line-height: 1.04; letter-spacing: -.035em; margin: 10px 0 17px; }
.home-section-intro p { max-width: 42ch; line-height: 1.7; margin-bottom: 23px; }
.course-index, .admission-index, .home-directory ul { list-style: none; padding: 0; margin: 0; }
.course-index { border-top: 1px solid var(--line); }
.course-index a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: clamp(9px, 1.7vw, 22px);
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 15px 6px;
  color: var(--pine);
}
.course-index a:hover { background: #f4f6ee; }
.course-index-icon, .directory-icon {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  color: var(--pine);
  background: #eaf0e6;
  border-radius: 4px;
}
.course-index small { display: block; margin-bottom: 2px; color: var(--muted); font-size: 12px; }
.course-index strong { display: block; font: 600 clamp(18px, 2.2vw, 26px)/1.12 var(--font-serif); }
.index-fee { font-size: 15px; font-weight: 700; white-space: nowrap; }
.index-arrow { font-size: 18px; }
.home-admissions { padding: clamp(48px, 6vw, 90px) 0; color: #fffdf5; background: var(--site-dark); }
.home-admissions h2, .home-admissions h3 { color: inherit; }
.home-admissions .eyebrow { color: var(--site-gold); }
.home-admissions p { color: #d9e7df; }
.admission-index { counter-reset: application; border-top: 1px solid #547567; }
.admission-index li { display: flex; align-items: baseline; gap: 16px; padding: 13px 0; border-bottom: 1px solid #547567; }
.admission-index li::before { counter-increment: application; content: counter(application, decimal-leading-zero); color: var(--site-gold); font-size: 13px; font-weight: 700; }
.admission-index h3 { font: 700 16px/1.4 var(--font-ui); margin-bottom: 2px; }
.admission-index p { font-size: 14px; margin: 0; }
.home-university { background: var(--ivory); }
.university-feature {
  display: grid;
  grid-template-columns: minmax(0, .65fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 6vw, 90px);
  padding-bottom: clamp(34px, 5vw, 62px);
}
.university-seal {
  min-height: clamp(180px, 23vw, 275px);
  display: grid;
  place-items: center;
  background: radial-gradient(circle, #f8f6ec 0 37%, transparent 37.4% 44%, #d8e2d5 44.4% 45%, transparent 45.4%), #e8eee3;
  border-radius: 6px;
}
.university-seal img { width: clamp(110px, 15vw, 156px); height: auto; }
.home-directory { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #cbd5c9; }
.home-directory section { padding: 25px clamp(12px, 3vw, 32px) 0; }
.home-directory section:first-child { padding-left: 0; }
.home-directory section + section { border-left: 1px solid #cbd5c9; }
.home-directory h3 { margin: 13px 0 10px; font-size: clamp(21px, 2.5vw, 31px); }
.home-directory a { display: inline-flex; min-height: 36px; align-items: center; color: var(--pine); text-decoration: underline; text-underline-offset: .24em; }

.page-banner {
  background: var(--site-dark);
  border: 0;
  color: #fffdf4;
  padding: clamp(28px, 4vw, 54px) 0 clamp(36px, 5vw, 72px);
}
.page-banner::after { border-color: rgba(232, 199, 134, .12); }
.page-banner :is(.breadcrumb, .breadcrumb a, .overline) { color: var(--site-gold); }
.page-banner .breadcrumb a:hover { color: #fffdf4; }
.page-banner h1 { color: #fffdf4; font-size: clamp(36px, 5.6vw, 70px); line-height: 1.04; letter-spacing: -.035em; }
.page-banner p { color: #e4eee7; font-size: clamp(15px, 1.6vw, 18px); line-height: 1.6; }
.page-sidebar { border: 1px solid var(--line); border-top: 3px solid #a97d36; border-radius: 4px; background: #f4f5ec; }
.sidebar-link { border-radius: 3px; }
.sidebar-link span { color: inherit; }
.page-main .content-section { border-bottom-color: var(--line); }
.content-section { scroll-margin-top: 0; }
.page-main .content-section h2 { letter-spacing: -.025em; }
.catalog-top { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.catalog-grid .program-card { border-radius: 5px; background: #fffefa; }
.catalog-grid .program-art { height: 65px; border-bottom: 1px solid var(--line); }
.catalog-grid .program-symbol { width: 39px; height: 39px; border-radius: 4px; }
.catalog-grid .program-number { top: 26px; }
.catalog-grid .program-card-body { padding: clamp(16px, 2.5vw, 28px); }
.catalog-grid .program-card h3 { font-size: clamp(24px, 3vw, 35px); }
.catalog-grid .program-card p { font-size: 14px; }
.catalog-grid .course-structure span { font-size: 12px; }
.program-card h3 { color: var(--pine); }
.program-tag, .course-fee small { color: #4e6657; }
.catalog-counter, .program-number, .program-card-meta > span:first-child,
.topic-search-wrap span, .learning-caveat p { color: var(--muted); }
.learning-topic-index { color: #805b29; }
.check-item .checkmark { color: #20623e; }
.fee-table { min-width: 0; }
.step-card, .learning-card, .faq-item, .small-panel, .notice-box { border-radius: 4px; }
.contact-grid { align-items: start; }
.contact-panel { border-radius: 5px; background: var(--site-dark); }
.contact-panel .contact-heading, .contact-method :is(a, p) { color: #fffdf4; }
.contact-panel .overline, .contact-method strong { color: var(--site-gold); }
.contact-method { border-bottom-color: #648073; }
.contact-method a { text-decoration: underline; text-underline-offset: .2em; }
.contact-pathways { margin-top: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.contact-form { margin-top: 22px; border-radius: 5px; padding: clamp(16px, 3vw, 30px); }
.contact-form .form-field label { font-size: 14px; }
.contact-form .form-field :is(input, select, textarea) { font: inherit; min-height: 44px; }
.contact-form .form-hint { color: var(--muted); font-size: 13px; }
.contact-form .form-status { margin: 12px 0; color: var(--pine); }
.contact-form .form-status:empty { display: none; }
.contact-form .form-status.is-error { color: #8d241e; }
.site-footer { background: var(--site-dark); border-top: 4px solid #b89551; }
.footer-top { padding-bottom: 38px; }
.footer-title { color: var(--site-gold); }
.site-footer .brand-short { color: var(--site-gold); }
.legal-copy { max-width: 76ch; }
.legal-copy p { margin-bottom: 16px; }
.legal-copy ol { padding-left: 24px; margin: 22px 0 10px; }

@media (max-width: 980px) {
  .nav-popover { border: 0; }
  .fee-table :is(th, td) { padding: 12px 8px; }
}
@media (max-width: 700px) {
  .masthead-kicker { font-size: 10px; }
  .masthead-copy h1 { font-size: clamp(35px, 8vw, 58px); }
  .masthead-actions { margin-bottom: 24px; }
  .masthead-photo { height: clamp(220px, 55vw, 300px); }
  .home-shortcuts .highlight { padding: 12px 0; min-height: 66px; }
  .home-course-grid, .home-admissions-grid, .university-feature { grid-template-columns: 1fr; }
  .home-directory { grid-template-columns: 1fr; }
  .home-directory section, .home-directory section:first-child { padding: 20px 0; }
  .home-directory section + section { border-left: 0; border-top: 1px solid #cbd5c9; }
  .contact-pathways { grid-template-columns: 1fr; }
  .catalog-grid { grid-template-columns: 1fr; }
  .page-sidebar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    overflow: visible;
    white-space: normal;
  }
  .page-sidebar .sidebar-heading {
    display: block;
    grid-column: 1 / -1;
    padding: 8px 10px;
  }
  .page-sidebar .sidebar-link { min-height: 44px; font-size: 12px; }
}