/* =====================================================================
   Nwafor Orizu College Demonstration Secondary School, Awka
   Public website styles (Bootstrap 5.3 base)
   Colours below are defaults; the admin Branding settings override
   --brand, --brand-dark and --accent from Site.master.
   ===================================================================== */

/* ---------- fonts (bundled, no external requests) ----------
   Inter, the typeface of the eMIS portal (variable font: one file covers every weight).
   The latin-ext and vietnamese files load only for text that needs them,
   for example names with dotted Igbo vowels. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../vendor/fonts/inter-latin-wght-normal.woff2) format('woff2-variations'), url(../vendor/fonts/inter-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../vendor/fonts/inter-latin-ext-wght-normal.woff2) format('woff2-variations'), url(../vendor/fonts/inter-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../vendor/fonts/inter-vietnamese-wght-normal.woff2) format('woff2-variations'), url(../vendor/fonts/inter-vietnamese-wght-normal.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url(../vendor/fonts/inter-latin-wght-italic.woff2) format('woff2-variations'), url(../vendor/fonts/inter-latin-wght-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url(../vendor/fonts/inter-latin-ext-wght-italic.woff2) format('woff2-variations'), url(../vendor/fonts/inter-latin-ext-wght-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url(../vendor/fonts/inter-vietnamese-wght-italic.woff2) format('woff2-variations'), url(../vendor/fonts/inter-vietnamese-wght-italic.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }

/* ---------- tokens ---------- */
:root {
  --brand: #24408E;
  --brand-dark: #16295E;
  --brand-deeper: #0F1E46;
  --brand-rgb: 36, 64, 142;
  --brand-soft: #E7ECF6;
  --accent: #D42A2F;
  --accent-dark: #B0201F;
  --accent-rgb: 212, 42, 47;
  --slate: #44464C;
  --ink: #1C1F26;
  --muted: #586070;
  --mist: #F1F4F8;
  --rule: #D8DEE8;
  --paper: #FFFFFF;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --radius: 3px;
  --header-h: 88px;

  --bs-body-font-family: var(--font-body);
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.7;
  --bs-body-font-weight: 400;
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--paper);
  --bs-link-color: var(--brand);
  --bs-link-color-rgb: var(--brand-rgb);
  --bs-link-hover-color: var(--brand-dark);
  --bs-border-color: var(--rule);
  --bs-border-radius: 3px;
  --bs-border-radius-sm: 2px;
  --bs-border-radius-lg: 4px;
  --bs-border-radius-xl: 4px;
  --bs-border-radius-xxl: 4px;
  --bs-border-radius-pill: 4px;
  --bs-focus-ring-color: rgba(var(--brand-rgb), .35);
}

/* ---------- base ---------- */
html { scroll-padding-top: calc(var(--header-h) + 16px); }
body { font-family: var(--font-body); font-weight: 400; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
strong, b { font-weight: 600; }
h1, h2, h3, h4, .h1, .h2, .h3, .h4, .display-font { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
h3, h4, .h3, .h4 { letter-spacing: -0.012em; }
h5, h6, .h5, .h6 { font-weight: 600; letter-spacing: -0.005em; }
h1 { line-height: 1.12; }
h2 { line-height: 1.18; }
h3, h4 { line-height: 1.25; }
p { max-width: 72ch; }
a { color: var(--brand); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--brand-dark); }
img { max-width: 100%; height: auto; }
::selection { background: rgba(var(--brand-rgb), .18); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.container { max-width: 1240px; }

.skip-link { position: absolute; left: 12px; top: -60px; z-index: 2000; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--radius); text-decoration: none; }
.skip-link:focus { top: 12px; color: #fff; }

.text-muted-ink { color: var(--muted) !important; }
.lead-text { font-size: 1.18rem; line-height: 1.6; color: var(--ink); }

/* ---------- buttons ---------- */
.btn { --bs-btn-border-radius: var(--radius); --bs-btn-font-weight: 600; --bs-btn-padding-x: 1.2rem; --bs-btn-padding-y: .66rem; letter-spacing: .005em; }
.btn-sm { --bs-btn-padding-x: .8rem; --bs-btn-padding-y: .38rem; }
.btn-accent { --bs-btn-color: #fff; --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--accent-dark); --bs-btn-hover-border-color: var(--accent-dark);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--accent-dark); --bs-btn-active-border-color: var(--accent-dark);
  --bs-btn-focus-shadow-rgb: var(--accent-rgb); }
.btn-brand { --bs-btn-color: #fff; --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--brand-dark); --bs-btn-hover-border-color: var(--brand-dark);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--brand-dark); --bs-btn-active-border-color: var(--brand-dark);
  --bs-btn-focus-shadow-rgb: var(--brand-rgb); }
.btn-outline-brand { --bs-btn-color: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--brand-dark);
  --bs-btn-focus-shadow-rgb: var(--brand-rgb); }
.btn-ghost-light { --bs-btn-color: #fff; --bs-btn-border-color: rgba(255,255,255,.55); --bs-btn-hover-color: var(--brand-dark);
  --bs-btn-hover-bg: #fff; --bs-btn-hover-border-color: #fff; --bs-btn-active-color: var(--brand-dark); --bs-btn-active-bg: #fff; }
.btn i { margin-right: .45rem; }
.link-quiet { color: inherit; text-decoration: none; }
.link-quiet:hover { color: var(--brand); text-decoration: underline; }
.text-link { font-weight: 600; text-decoration: underline; text-decoration-color: rgba(var(--brand-rgb), .35); }
.text-link:hover { text-decoration-color: currentColor; }

/* ---------- notice bar ---------- */
.notice-bar { background: var(--accent); color: #fff; font-size: .95rem; }
.notice-bar .container { display: flex; align-items: center; gap: .9rem; min-height: 42px; }
.notice-bar__icon { flex: 0 0 auto; font-size: 1.05rem; opacity: .9; }
.notice-bar__items { position: relative; flex: 1 1 auto; min-height: 1.6em; overflow: hidden; }
.notice-bar__item { display: block; color: #fff; text-decoration: none; padding: .45rem 0; }
.notice-bar__items.is-rotating .notice-bar__item { position: absolute; inset: 0 auto auto 0; width: 100%; opacity: 0; transform: translateY(6px); transition: opacity .45s ease, transform .45s ease; pointer-events: none; }
.notice-bar__items.is-rotating .notice-bar__item.is-current { position: relative; opacity: 1; transform: none; pointer-events: auto; }
a.notice-bar__item:hover { color: #fff; text-decoration: underline; }
.notice-bar__count { flex: 0 0 auto; font-size: .82rem; opacity: .85; }

/* ---------- utility bar ---------- */
.utility-bar { background: var(--slate); color: rgba(255,255,255,.86); font-size: .875rem; }
.utility-bar .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 40px; }
.utility-bar__info { display: flex; flex-wrap: wrap; gap: .35rem 1.4rem; }
.utility-bar a { color: rgba(255,255,255,.9); text-decoration: none; }
.utility-bar a:hover { color: #fff; text-decoration: underline; }
.utility-bar i { margin-right: .4rem; opacity: .75; }
.social-links { display: flex; gap: .25rem; }
.social-links a { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: var(--radius); }
.social-links a i { margin: 0; opacity: 1; }
.utility-bar .social-links a:hover { background: rgba(255,255,255,.12); text-decoration: none; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 1030; background: var(--paper); border-bottom: 1px solid var(--rule); transition: box-shadow .2s ease; }
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(15, 30, 70, .08); }
.site-header .container { display: flex; align-items: center; gap: 1.25rem; min-height: var(--header-h); }
.brand { display: flex; align-items: center; gap: .85rem; text-decoration: none; color: var(--ink); min-width: 0; margin-right: auto; }
.brand:hover { color: var(--ink); }
.brand__logo { height: 62px; width: auto; flex: 0 0 auto; }
.brand__text { display: flex; flex-direction: column; min-width: 0; }
.brand__line1 { font-family: var(--font-display); font-size: 1.12rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; color: var(--brand-dark); white-space: nowrap; }
.brand__line2 { font-size: .86rem; line-height: 1.35; color: var(--slate); font-weight: 400; white-space: nowrap; }

.main-nav { display: none; }
.main-nav > ul { list-style: none; display: flex; align-items: stretch; gap: .1rem; margin: 0; padding: 0; }
.main-nav li { position: relative; }
.main-nav__link { display: flex; align-items: center; gap: .3rem; height: var(--header-h); padding: 0 .8rem; color: var(--ink); text-decoration: none; font-weight: 500; font-size: .96rem; border: 0; background: none; position: relative; white-space: nowrap; }
.main-nav__link::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: 18px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.main-nav__link:hover, .main-nav li:focus-within > .main-nav__link { color: var(--brand); }
.main-nav__link:hover::after, .main-nav__link.is-active::after { transform: scaleX(1); }
.main-nav__link.is-active { color: var(--brand-dark); }
.main-nav__link .bi-chevron-down { font-size: .7rem; margin-top: 2px; transition: transform .2s ease; }
.main-nav__menu { list-style: none; position: absolute; top: calc(100% - 10px); left: 0; min-width: 250px; margin: 0; padding: .4rem 0; background: var(--paper); border: 1px solid var(--rule); border-top: 2px solid var(--accent); border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 18px 40px rgba(15, 30, 70, .12); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .16s ease, transform .16s ease, visibility .16s; }
.main-nav li:hover > .main-nav__menu, .main-nav li:focus-within > .main-nav__menu, .main-nav li.is-open > .main-nav__menu { opacity: 1; visibility: visible; transform: none; }
.main-nav li:hover > .main-nav__link .bi-chevron-down, .main-nav li.is-open > .main-nav__link .bi-chevron-down { transform: rotate(180deg); }
.main-nav__menu a { display: block; padding: .55rem 1.1rem; color: var(--ink); text-decoration: none; font-size: .96rem; }
.main-nav__menu a:hover, .main-nav__menu a:focus { background: var(--mist); color: var(--brand-dark); }
.main-nav__menu a.is-active { color: var(--brand); font-weight: 600; }

.header-actions { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }
.portal-menu { position: relative; }
.portal-menu .dropdown-menu { border-radius: var(--radius); border-color: var(--rule); box-shadow: 0 18px 40px rgba(15, 30, 70, .12); min-width: 260px; }
.portal-menu .dropdown-item { padding: .6rem 1rem; white-space: normal; }
.portal-menu .dropdown-item small { display: block; color: var(--muted); }
.soon-tag { display: inline-block; margin-left: .4rem; padding: 0 .35rem; font-size: .72rem; font-weight: 600; color: var(--accent); border: 1px solid rgba(var(--accent-rgb), .45); border-radius: 2px; vertical-align: middle; }

.menu-toggle { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; height: 44px; padding: 0 .9rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); color: var(--ink); font-weight: 600; }
.menu-toggle i { font-size: 1.25rem; }
.menu-toggle:hover { border-color: var(--brand); color: var(--brand); }

@media (min-width: 1200px) {
  .main-nav { display: block; }
  .menu-toggle { display: none; }
}
@media (max-width: 575.98px) {
  :root { --header-h: 76px; }
  .site-header .container { gap: .6rem; }
  .brand { gap: .55rem; }
  .brand__logo { height: 48px; }
  .brand__line1 { font-size: .98rem; white-space: normal; }
  .brand__line2 { font-size: .74rem; line-height: 1.25; white-space: normal; }
  .header-actions .btn { padding-left: .75rem; padding-right: .75rem; }
  .header-actions .btn i { margin-right: 0; }
  .menu-toggle { padding: 0 .7rem; }
  .principal__photo { max-width: 260px; }
  .header-actions .portal-label { display: none; }
  .menu-toggle .menu-label { display: none; }
  .utility-bar .utility-bar__hide-sm { display: none; }
}

/* ---------- drawer (mobile and tablet menu) ---------- */
.drawer-backdrop { position: fixed; inset: 0; z-index: 1040; background: rgba(12, 20, 44, .45); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s; }
.drawer { position: fixed; top: 0; bottom: 0; left: 0; z-index: 1045; width: min(86vw, 340px); background: var(--paper); box-shadow: 18px 0 48px rgba(12, 20, 44, .22); transform: translateX(-104%); transition: transform .28s cubic-bezier(.2, .7, .2, 1); display: flex; flex-direction: column; }
body.drawer-open .drawer { transform: none; }
body.drawer-open .drawer-backdrop { opacity: 1; visibility: visible; }
body.drawer-open { overflow: hidden; }
.drawer__head { display: flex; align-items: center; gap: .7rem; padding: 1rem 1rem .9rem; border-bottom: 1px solid var(--rule); }
.drawer__head img { height: 46px; width: auto; }
.drawer__head .brand__line1 { font-size: .98rem; }
.drawer__head .brand__line2 { font-size: .78rem; }
.drawer__close { margin-left: auto; width: 40px; height: 40px; border: 1px solid var(--rule); border-radius: var(--radius); background: none; color: var(--ink); font-size: 1.2rem; flex: 0 0 auto; }
.drawer__body { overflow-y: auto; padding: .4rem 0 1.2rem; flex: 1 1 auto; }
.drawer__body ul { list-style: none; margin: 0; padding: 0; }
.drawer__link, .drawer summary { display: flex; align-items: center; justify-content: space-between; padding: .78rem 1.15rem; color: var(--ink); text-decoration: none; font-weight: 600; cursor: pointer; list-style: none; }
.drawer summary::-webkit-details-marker { display: none; }
.drawer summary .bi { transition: transform .2s ease; font-size: .8rem; }
.drawer details[open] > summary .bi { transform: rotate(180deg); }
.drawer details ul a { display: block; padding: .55rem 1.15rem .55rem 2rem; color: var(--slate); text-decoration: none; }
.drawer .is-active { color: var(--brand); }
.drawer__link:hover, .drawer summary:hover, .drawer details ul a:hover { background: var(--mist); color: var(--brand-dark); }
.drawer__foot { padding: 1rem 1.15rem 1.4rem; border-top: 1px solid var(--rule); font-size: .92rem; color: var(--muted); }
.drawer__foot a { color: var(--brand); }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--brand-dark); color: #fff; padding: 64px 0 132px; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(120% 90% at 78% -10%, rgba(255,255,255,.09), transparent 55%), linear-gradient(180deg, var(--brand-dark), var(--brand-deeper)); }
.hero__sun { position: absolute; top: 0; z-index: -1; width: 760px; height: 400px; left: 72%; transform: translateX(-50%); pointer-events: none; }
.hero__sun svg { width: 100%; height: 100%; display: block; }
.hero__sun .ray { transform-box: view-box; transform-origin: 380px 0; }
.js .hero__sun .ray { transform: scaleY(0.001); transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.js .hero.is-ready .hero__sun .ray { transform: none; }
.hero__water { position: absolute; left: 0; right: 0; bottom: 0; height: 96px; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(180deg, transparent 0 9px, rgba(255,255,255,.07) 9px 12px, transparent 12px 22px, rgba(255,255,255,.1) 22px 27px); }
.hero .container { position: relative; }
.hero__grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.hero__copy { position: relative; max-width: 640px; }
.hero__slide-copy { transition: opacity .5s ease; }
.hero__slide-copy[hidden] { display: none; }
.hero__title { font-size: clamp(2.15rem, 1.3rem + 3.2vw, 3.55rem); font-weight: 800; letter-spacing: -0.03em; color: #fff; margin: 0 0 1.1rem; text-wrap: balance; }
.hero__text { font-size: clamp(1.05rem, .98rem + .35vw, 1.25rem); color: rgba(255,255,255,.88); margin: 0 0 1.9rem; max-width: 52ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero__admissions { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.25rem; padding: .35rem .7rem; border: 1px solid rgba(255,255,255,.35); border-radius: 2px; font-size: .92rem; color: #fff; text-decoration: none; }
.hero__admissions:hover { color: #fff; background: rgba(255,255,255,.08); }
.hero__admissions .dot { width: 8px; height: 8px; background: #48d38a; border-radius: 1px; }
.hero__media { position: relative; }
.hero__frame { position: relative; aspect-ratio: 4 / 3; background: rgba(255,255,255,.06); box-shadow: 0 30px 70px rgba(4, 10, 30, .45); border-radius: var(--radius); overflow: hidden; }
.hero__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s ease; }
.hero__frame img.is-current { opacity: 1; }
.hero__emblem { display: flex; align-items: center; justify-content: center; padding: 10px 0 0; }
.hero__emblem img { width: min(78%, 360px); height: auto; filter: drop-shadow(0 24px 40px rgba(4, 10, 30, .45)); }
.hero__controls { display: flex; align-items: center; gap: .6rem; margin-top: 1rem; }
.hero__dots { display: flex; gap: .4rem; margin-right: auto; }
.hero__dot { width: 28px; height: 4px; border: 0; padding: 0; background: rgba(255,255,255,.35); border-radius: 1px; }
.hero__dot.is-current { background: #fff; }
.hero__arrow { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.35); border-radius: var(--radius); background: transparent; color: #fff; }
.hero__arrow:hover { background: rgba(255,255,255,.1); }
@media (min-width: 992px) {
  .hero { padding: 84px 0 150px; }
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; }
}
@media (max-width: 991.98px) {
  .hero__sun { left: 50%; width: 620px; height: 330px; opacity: .8; }
  .hero__media { order: -1; }
  .hero__emblem { display: none; }
}

/* ---------- facts strip ---------- */
.facts { position: relative; z-index: 2; margin-top: -78px; }
.facts__card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: 0 20px 50px rgba(15, 30, 70, .10); }
.facts__item { padding: 1.15rem 1.35rem; border-top: 1px solid var(--rule); }
.facts__item:nth-child(-n+2) { border-top: 0; }
.facts__item:nth-child(2n) { border-left: 1px solid var(--rule); }
.facts__label { display: block; font-size: .86rem; color: var(--muted); margin-bottom: .2rem; }
.facts__value { display: block; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.015em; font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); line-height: 1.2; color: var(--brand-dark); }
@media (min-width: 992px) {
  .facts__card { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .facts__item { border-top: 0; padding: 1.5rem 1.6rem; }
  .facts__item + .facts__item { border-left: 1px solid var(--rule); }
}

/* ---------- sections ---------- */
.section { padding: 88px 0; }
.section--mist { background: var(--mist); }
.section--tight { padding: 64px 0; }
.section--after-facts { padding-top: 72px; }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 2rem; margin-bottom: 2.2rem; }
.section-head h2 { font-size: clamp(1.65rem, 1.3rem + 1.2vw, 2.35rem); margin: 0; }
.section-head p { color: var(--muted); margin: .6rem 0 0; max-width: 60ch; }
.section-head__link { font-weight: 600; white-space: nowrap; }
@media (max-width: 767.98px) {
  .section { padding: 64px 0; }
  .section--tight { padding: 48px 0; }
}

/* about */
.about-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
.about-grid h2 { font-size: clamp(1.65rem, 1.3rem + 1.2vw, 2.35rem); margin-bottom: 1rem; }
.statement { padding: 1.4rem 0; border-top: 1px solid var(--rule); }
.statement:first-child { border-top: 2px solid var(--brand); padding-top: 1.2rem; }
.statement h3 { font-size: 1.28rem; margin: 0 0 .5rem; color: var(--brand-dark); }
.statement p { margin: 0; color: var(--slate); }
.values { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.values li { padding: .35rem .7rem; border: 1px solid var(--rule); border-radius: 2px; background: var(--paper); font-weight: 600; font-size: .94rem; color: var(--brand-dark); }
@media (min-width: 992px) {
  .about-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; }
}

/* principal */
.principal { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
.principal__photo { position: relative; aspect-ratio: 4 / 5; max-width: 380px; background: var(--brand-dark); border-radius: var(--radius); overflow: hidden; }
.principal__photo img { width: 100%; height: 100%; object-fit: cover; }
.principal__photo--empty { display: flex; align-items: center; justify-content: center; background:
  repeating-linear-gradient(180deg, transparent 0 14px, rgba(255,255,255,.05) 14px 18px), var(--brand-dark); }
.principal__photo--empty img { width: 52%; height: auto; object-fit: contain; opacity: .9; }
.principal h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2.1rem); margin-bottom: 1.1rem; }
.principal__quote { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; font-size: clamp(1.15rem, 1.03rem + .5vw, 1.42rem); line-height: 1.55; color: var(--ink); margin: 0 0 1.4rem; max-width: 46ch; }
.principal__name { font-weight: 600; font-size: 1.05rem; margin: 0; }
.principal__role { color: var(--muted); margin: 0 0 1.2rem; }
@media (min-width: 992px) {
  .principal { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 72px; }
}

/* programmes */
.programmes { display: grid; grid-template-columns: 1fr; gap: 0 48px; }
.programme { display: grid; grid-template-columns: 52px 1fr; gap: 0 16px; padding: 1.5rem 0; border-top: 1px solid var(--rule); }
.programme__icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--brand); background: var(--brand-soft); border-radius: var(--radius); }
.programme h3 { font-size: 1.28rem; margin: .1rem 0 .15rem; }
.programme__stage { display: block; font-size: .9rem; font-weight: 600; color: var(--accent); margin-bottom: .45rem; }
.programme p { margin: 0; color: var(--slate); }
.programme__subjects { margin: .7rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; }
.programme__subjects li { font-size: .86rem; padding: .15rem .5rem; background: var(--mist); border-radius: 2px; color: var(--slate); }
@media (min-width: 768px) { .programmes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* key figures */
.figures { background: var(--brand); color: #fff; }
.figures__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.figure-item { padding: 1.6rem 1.2rem; border-left: 1px solid rgba(255,255,255,.18); }
.figure-item:nth-child(2n+1) { border-left: 0; }
.figure-item i { font-size: 1.3rem; opacity: .7; }
.figure-item strong { display: block; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; font-size: clamp(2rem, 1.6rem + 1.5vw, 2.8rem); line-height: 1.1; margin: .35rem 0 .2rem; }
.figure-item span { color: rgba(255,255,255,.82); }
@media (min-width: 992px) {
  .figures__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .figure-item:nth-child(2n+1) { border-left: 1px solid rgba(255,255,255,.18); }
  .figure-item:first-child { border-left: 0; }
}

/* news */
.news-layout { display: grid; grid-template-columns: 1fr; gap: 48px; }
@media (min-width: 992px) { .news-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 56px; } }
.column-title { font-size: 1.35rem; margin: 0 0 1.1rem; padding-bottom: .7rem; border-bottom: 2px solid var(--ink); display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.column-title a { font-family: var(--font-body); font-size: .95rem; font-weight: 600; }
.story-lead { display: grid; gap: 1.1rem; margin-bottom: 1.6rem; }
.story-lead__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); background: var(--brand-dark); }
.story-lead__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.story-lead:hover .story-lead__media img { transform: scale(1.025); }
.story-lead h3 { font-size: clamp(1.35rem, 1.15rem + .7vw, 1.75rem); margin: .3rem 0 .5rem; }
.story-lead h3 a, .story-item h3 a, .news-card h3 a { color: var(--ink); text-decoration: none; }
.story-lead h3 a:hover, .story-item h3 a:hover, .news-card h3 a:hover { color: var(--brand); text-decoration: underline; }
.story-lead p { color: var(--slate); margin: 0; }
.story-meta { display: flex; flex-wrap: wrap; gap: .2rem .9rem; font-size: .88rem; color: var(--muted); }
.story-meta .category { color: var(--accent); font-weight: 600; }
.story-list { list-style: none; margin: 0; padding: 0; }
.story-item { display: grid; grid-template-columns: 112px 1fr; gap: 16px; padding: 1rem 0; border-top: 1px solid var(--rule); }
.story-item__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; background: var(--brand-dark); }
.story-item__media img { width: 100%; height: 100%; object-fit: cover; }
.story-item h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.04rem; line-height: 1.35; margin: .15rem 0 .3rem; }

/* placeholder picture when no image is uploaded */
.media-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 100%;
  background: repeating-linear-gradient(180deg, transparent 0 13px, rgba(255,255,255,.06) 13px 17px), linear-gradient(160deg, var(--brand), var(--brand-dark)); }
.media-ph img { width: 30% !important; height: auto !important; max-width: 120px; object-fit: contain !important; opacity: .55; transform: none !important; }

/* events */
.event-list { list-style: none; margin: 0; padding: 0; }
.event-item { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 1rem 0; border-top: 1px solid var(--rule); }
.event-item:first-child { border-top: 0; padding-top: .2rem; }
.date-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 64px; height: 68px; border: 1px solid var(--rule); border-top: 3px solid var(--accent); border-radius: 2px; background: var(--paper); line-height: 1; }
.date-tile__day { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.date-tile__month { font-size: .82rem; font-weight: 600; color: var(--muted); margin-top: .3rem; }
.event-item h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.04rem; line-height: 1.35; margin: .1rem 0 .3rem; }
.event-item h3 a { color: var(--ink); text-decoration: none; }
.event-item h3 a:hover { color: var(--brand); text-decoration: underline; }
.event-meta { font-size: .9rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: .1rem .9rem; }
.event-meta i { margin-right: .3rem; }
.empty-note { padding: 1.4rem; background: var(--mist); border-radius: var(--radius); color: var(--slate); }
.section--mist .empty-note { background: var(--paper); }

/* gallery strip */
.photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.photo-grid a { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 2px; background: var(--brand-dark); }
.photo-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease, opacity .3s ease; }
.photo-grid a:hover img { transform: scale(1.04); }
@media (max-width: 767.98px) { .photo-grid a:nth-child(n+7) { display: none; } }
@media (min-width: 768px) { .photo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } }
@media (min-width: 992px) {
  .photo-grid--feature a:first-child { grid-column: span 2; grid-row: span 2; }
}

/* testimonials */
.quotes { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 768px) { .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.quote { display: flex; flex-direction: column; gap: 1.1rem; margin: 0; padding: 1.6rem; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); }
.quote blockquote { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 1.06rem; line-height: 1.6; color: var(--ink); }
.quote figcaption { display: flex; align-items: center; gap: .75rem; margin-top: auto; }
.quote figcaption img, .avatar-initials { width: 46px; height: 46px; border-radius: 2px; object-fit: cover; flex: 0 0 auto; }
.avatar-initials { display: inline-flex; align-items: center; justify-content: center; background: var(--brand-soft); color: var(--brand-dark); font-weight: 600; }
.quote figcaption strong { display: block; }
.quote figcaption span { font-size: .9rem; color: var(--muted); }

/* portal band */
.portal-band { position: relative; overflow: hidden; background: var(--brand-dark); color: #fff; padding: 64px 0; isolation: isolate; }
.portal-band::after { content: ""; position: absolute; z-index: -1; right: -60px; top: -40px; width: 340px; height: 340px; opacity: .14;
  background: radial-gradient(circle at 50% 0, var(--accent) 0 18%, transparent 18.5%), repeating-conic-gradient(from 90deg at 50% 0, var(--accent) 0 4deg, transparent 4deg 12deg); }
.portal-band__grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; }
.portal-band h2 { color: #fff; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); margin: 0 0 .6rem; }
.portal-band p { color: rgba(255,255,255,.85); margin: 0; }
.portal-band__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.portal-status { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1rem; border: 1px dashed rgba(255,255,255,.5); border-radius: var(--radius); color: #fff; font-weight: 600; }

/* visit band */
.visit { display: grid; grid-template-columns: 1fr; gap: 0; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); }
.visit__item { padding: 1.5rem 1.6rem; border-top: 1px solid var(--rule); }
.visit__item:first-child { border-top: 0; }
.visit__item i { font-size: 1.3rem; color: var(--accent); }
.visit__item h3 { font-size: 1.15rem; margin: .5rem 0 .4rem; }
.visit__item p { margin: 0 0 .4rem; color: var(--slate); }
@media (min-width: 992px) {
  .visit { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .visit__item { border-top: 0; }
  .visit__item + .visit__item { border-left: 1px solid var(--rule); }
}

/* ---------- inner page banner ---------- */
.page-banner { position: relative; overflow: hidden; background: var(--brand-dark); color: #fff; padding: 52px 0 56px; isolation: isolate; }
.page-banner::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 54px;
  background: repeating-linear-gradient(180deg, transparent 0 9px, rgba(255,255,255,.06) 9px 12px, transparent 12px 22px, rgba(255,255,255,.08) 22px 26px); }
.page-banner__sun { position: absolute; z-index: -1; top: 0; right: 6%; width: 420px; height: 220px; opacity: .55; pointer-events: none; }
.page-banner__sun svg { width: 100%; height: 100%; display: block; }
.page-banner h1 { color: #fff; font-size: clamp(1.95rem, 1.4rem + 2.3vw, 3rem); font-weight: 800; letter-spacing: -0.028em; margin: 0; max-width: 24ch; text-wrap: balance; }
.page-banner__lead { color: rgba(255,255,255,.86); font-size: 1.14rem; margin: .9rem 0 0; max-width: 60ch; }
.crumbs { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 1rem; padding: 0; font-size: .9rem; color: rgba(255,255,255,.7); }
.crumbs li + li::before { content: "/"; margin-right: .3rem; opacity: .6; }
.crumbs a { color: rgba(255,255,255,.88); text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.page-banner--image { padding: 0; }
.page-banner__image { display: block; width: 100%; max-height: 380px; object-fit: cover; }

/* ---------- long-form text (editor content) ---------- */
.prose { font-size: 1.08rem; line-height: 1.75; color: var(--ink); max-width: 72ch; }
.prose > *:first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol { margin: 0 0 1.15rem; }
.prose h2 { font-size: 1.65rem; margin: 2.2rem 0 .8rem; }
.prose h3 { font-size: 1.32rem; margin: 1.8rem 0 .6rem; }
.prose h4, .prose h5 { font-family: var(--font-body); font-weight: 600; font-size: 1.1rem; margin: 1.5rem 0 .5rem; }
.prose a { text-decoration: underline; }
.prose blockquote { margin: 1.6rem 0; padding: 1.2rem 1.4rem; background: var(--mist); border-top: 2px solid var(--brand); font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; line-height: 1.6; }
.prose img { border-radius: var(--radius); margin: .5rem 0 1.2rem; }
.prose iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--radius); margin: .5rem 0 1.2rem; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.4rem; font-size: .98rem; }
.prose th, .prose td { border: 1px solid var(--rule); padding: .55rem .7rem; text-align: left; vertical-align: top; }
.prose th { background: var(--mist); }
.prose hr { margin: 2rem 0; border-color: var(--rule); opacity: 1; }
.prose pre { background: var(--mist); padding: 1rem; border-radius: var(--radius); }
.prose .ql-align-center { text-align: center; }
.prose .ql-align-right { text-align: right; }
.prose .ql-align-justify { text-align: justify; }
.prose .ql-indent-1 { padding-left: 2em; } .prose .ql-indent-2 { padding-left: 4em; } .prose .ql-indent-3 { padding-left: 6em; }
.prose li.ql-indent-1 { margin-left: 2em; padding-left: 0; } .prose li.ql-indent-2 { margin-left: 4em; padding-left: 0; }
.prose .ql-size-small { font-size: .85em; } .prose .ql-size-large { font-size: 1.3em; } .prose .ql-size-huge { font-size: 1.7em; }
.prose strong { font-weight: 600; }

/* ---------- inner page layouts ---------- */
.page-layout { display: grid; grid-template-columns: 1fr; gap: 48px; }
@media (min-width: 992px) { .page-layout { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 64px; } }
.side-panel { border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.4rem 1.5rem; background: var(--paper); }
.side-panel + .side-panel { margin-top: 1.5rem; }
.side-panel h2, .side-panel h3 { font-size: 1.2rem; margin: 0 0 .9rem; }
.side-panel ul { list-style: none; margin: 0; padding: 0; }
.side-panel li + li { border-top: 1px solid var(--rule); }
.side-panel li a { display: block; padding: .6rem 0; text-decoration: none; color: var(--ink); }
.side-panel li a:hover { color: var(--brand); }
.side-panel li a.is-active { color: var(--brand); font-weight: 600; }
.fact-list { margin: 0; }
.fact-list div { display: grid; grid-template-columns: 9.5rem 1fr; gap: .8rem; padding: .7rem 0; border-top: 1px solid var(--rule); }
.fact-list div:first-child { border-top: 0; padding-top: 0; }
.fact-list dt { font-weight: 400; color: var(--muted); }
.fact-list dd { margin: 0; font-weight: 600; }

/* staff */
.staff-group + .staff-group { margin-top: 3.5rem; }
.staff-group h2 { font-size: 1.6rem; margin-bottom: 1.4rem; }
.staff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 28px 24px; }
.staff-card { display: flex; flex-direction: column; }
.staff-card__photo { aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--brand-soft); display: flex; align-items: center; justify-content: center; margin-bottom: .9rem; }
.staff-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.staff-card__photo .initials { font-family: var(--font-display); font-size: 2.8rem; font-weight: 700; letter-spacing: -0.02em; color: var(--brand); }
.staff-card h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.08rem; margin: 0 0 .15rem; }
.staff-card__role { color: var(--accent); font-weight: 600; font-size: .94rem; margin: 0 0 .3rem; }
.staff-card__meta { color: var(--muted); font-size: .92rem; margin: 0; }
.staff-card__bio { color: var(--slate); font-size: .95rem; margin: .5rem 0 0; }

/* facilities */
.facility { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; padding: 2.4rem 0; border-top: 1px solid var(--rule); }
.facility:first-child { border-top: 0; padding-top: 0; }
.facility__media { aspect-ratio: 3 / 2; border-radius: var(--radius); overflow: hidden; background: var(--brand-dark); }
.facility__media img { width: 100%; height: 100%; object-fit: cover; }
.facility h2 { font-size: 1.6rem; margin-bottom: .6rem; }
@media (min-width: 992px) {
  .facility { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; }
  .facility:nth-child(even) .facility__media { order: 2; }
}

/* news listing */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: 2rem; }
.filter-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.filter-tags a { padding: .35rem .75rem; border: 1px solid var(--rule); border-radius: 2px; text-decoration: none; color: var(--slate); font-size: .94rem; }
.filter-tags a:hover { border-color: var(--brand); color: var(--brand); }
.filter-tags a.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.search-form { display: flex; gap: .4rem; margin-left: auto; min-width: 260px; }
.search-form .form-control { border-radius: var(--radius); }
.news-grid { display: grid; grid-template-columns: 1fr; gap: 40px 32px; }
@media (min-width: 768px) { .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .news-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.news-card { display: flex; flex-direction: column; gap: .8rem; }
.news-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius); background: var(--brand-dark); }
.news-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.news-card:hover .news-card__media img { transform: scale(1.03); }
.news-card h3 { font-size: 1.28rem; margin: 0; }
.news-card p { color: var(--slate); margin: 0; }

/* article */
.article-header { margin-bottom: 1.8rem; }
.article-figure { margin: 0 0 2rem; }
.article-figure img { width: 100%; max-height: 560px; object-fit: cover; border-radius: var(--radius); }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 2.5rem; padding-top: 1.4rem; border-top: 1px solid var(--rule); }
.share span { font-weight: 600; margin-right: .3rem; }
.share a, .share button { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .75rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); color: var(--ink); text-decoration: none; font-size: .93rem; }
.share a:hover, .share button:hover { border-color: var(--brand); color: var(--brand); }

/* events listing */
.tabs-simple { display: flex; gap: .2rem; border-bottom: 1px solid var(--rule); margin-bottom: 1.8rem; }
.tabs-simple a { padding: .7rem 1rem; text-decoration: none; color: var(--slate); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs-simple a:hover { color: var(--brand); }
.tabs-simple a.is-active { color: var(--brand-dark); border-bottom-color: var(--accent); }
.event-row { display: grid; grid-template-columns: 76px 1fr; gap: 20px; padding: 1.5rem 0; border-top: 1px solid var(--rule); }
.event-row:first-child { border-top: 0; padding-top: 0; }
.event-row .date-tile { width: 76px; height: 82px; }
.event-row h2 { font-size: 1.35rem; margin: 0 0 .4rem; }
.event-row h2 a { color: var(--ink); text-decoration: none; }
.event-row h2 a:hover { color: var(--brand); text-decoration: underline; }
.event-row p { margin: .5rem 0 0; color: var(--slate); }
.detail-list { list-style: none; margin: 0 0 1.6rem; padding: 0; }
.detail-list li { display: flex; gap: .7rem; padding: .55rem 0; border-top: 1px solid var(--rule); }
.detail-list li:first-child { border-top: 0; }
.detail-list i { color: var(--accent); }

/* albums */
.album-grid { display: grid; grid-template-columns: 1fr; gap: 36px 28px; }
@media (min-width: 576px) { .album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .album-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.album-card { text-decoration: none; color: var(--ink); display: block; }
.album-card__media { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--brand-dark); margin-bottom: .85rem; }
.album-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.album-card:hover .album-card__media img { transform: scale(1.03); }
.album-card__count { position: absolute; right: 10px; bottom: 10px; padding: .2rem .55rem; background: rgba(12, 20, 44, .78); color: #fff; font-size: .85rem; border-radius: 2px; }
.album-card h2 { font-size: 1.25rem; margin: 0 0 .2rem; }
.album-card:hover h2 { color: var(--brand); text-decoration: underline; }
.album-card p { color: var(--muted); margin: 0; font-size: .94rem; }
.photo-wall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 768px) { .photo-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 1200px) { .photo-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.photo-wall a { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; background: var(--brand-dark); }
.photo-wall img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.photo-wall a:hover img { transform: scale(1.04); }

/* downloads */
.download-group + .download-group { margin-top: 2.6rem; }
.download-group h2 { font-size: 1.45rem; margin-bottom: .6rem; }
.download-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.download-item { display: grid; grid-template-columns: 44px 1fr auto; gap: 16px; align-items: center; padding: 1.1rem 0; border-bottom: 1px solid var(--rule); }
.download-item__icon { font-size: 1.9rem; color: var(--brand); text-align: center; }
.download-item h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.05rem; margin: 0 0 .15rem; }
.download-item p { margin: 0; color: var(--slate); font-size: .95rem; }
.download-item__meta { font-size: .86rem; color: var(--muted); }
@media (max-width: 575.98px) {
  .download-item { grid-template-columns: 36px 1fr; }
  .download-item .btn { grid-column: 2; justify-self: start; }
}

/* faqs */
.faq { border-top: 1px solid var(--rule); }
.faq:last-child { border-bottom: 1px solid var(--rule); }
.faq summary { display: flex; justify-content: space-between; gap: 1rem; padding: 1.05rem 0; cursor: pointer; font-weight: 600; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { transition: transform .2s ease; color: var(--brand); }
.faq[open] summary i { transform: rotate(45deg); }
.faq__answer { padding: 0 0 1.2rem; color: var(--slate); }

/* contact */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 48px; }
@media (min-width: 992px) { .contact-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; } }
.contact-list { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.contact-list li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 1rem 0; border-top: 1px solid var(--rule); }
.contact-list li:first-child { border-top: 0; }
.contact-list i { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--brand-soft); color: var(--brand); border-radius: var(--radius); font-size: 1.15rem; }
.contact-list strong { display: block; }
.contact-list a { word-break: break-word; }
.form-panel { padding: 2rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); }
.form-panel h2 { font-size: 1.55rem; margin-bottom: .4rem; }
.form-label { font-weight: 600; margin-bottom: .35rem; }
.form-control, .form-select { border-radius: var(--radius); border-color: #C5CDDA; padding: .62rem .8rem; }
.form-control:focus, .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 .2rem rgba(var(--brand-rgb), .18); }
.form-hint { font-size: .88rem; color: var(--muted); margin-top: .3rem; }
.req { color: var(--accent); }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.map-frame { margin-top: 2rem; aspect-ratio: 16 / 10; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: var(--mist); }
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.iti { width: 100%; }
.iti__country-container { border-radius: var(--radius) 0 0 var(--radius); }

/* pagination */
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: 3rem; }
.pager a, .pager span { min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0 .8rem; border: 1px solid var(--rule); border-radius: var(--radius); text-decoration: none; color: var(--ink); font-weight: 600; }
.pager a:hover { border-color: var(--brand); color: var(--brand); }
.pager .is-current { background: var(--brand); border-color: var(--brand); color: #fff; }
.pager .is-disabled { color: #A8AFBC; }
.pager .gap { border: 0; min-width: 20px; padding: 0; }

/* ---------- footer ---------- */
.site-footer { background: var(--brand-deeper); color: rgba(255,255,255,.82); padding: 72px 0 0; font-size: .97rem; }
.site-footer a { color: rgba(255,255,255,.9); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .footer-grid { grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2.2fr)); gap: 48px; } }
.footer-brand { display: flex; gap: 1rem; align-items: flex-start; }
.footer-brand img { width: 74px; height: auto; flex: 0 0 auto; }
.footer-brand strong { display: block; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.015em; font-size: 1.15rem; line-height: 1.25; color: #fff; }
.footer-motto { display: block; margin-top: .35rem; font-style: italic; color: rgba(255,255,255,.75); }
.footer-about { margin: 1.2rem 0 0; max-width: 40ch; }
.site-footer h2 { font-family: var(--font-body); font-weight: 600; font-size: 1rem; color: #fff; margin: 0 0 1rem; padding-bottom: .6rem; border-bottom: 1px solid rgba(255,255,255,.14); }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { padding: .28rem 0; }
.footer-contact li { display: flex; gap: .6rem; }
.footer-contact i { opacity: .7; margin-top: .15rem; }
.site-footer .social-links { margin-top: 1.2rem; }
.site-footer .soon-tag { color: #FFC2C4; border-color: rgba(255, 194, 196, .55); }
.site-footer .social-links a { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.2); }
.site-footer .social-links a:hover { background: rgba(255,255,255,.1); text-decoration: none; }
.footer-base { margin-top: 56px; padding: 1.3rem 0; border-top: 1px solid rgba(255,255,255,.12); font-size: .88rem; color: rgba(255,255,255,.65); }
.footer-base .container { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; justify-content: space-between; }
.footer-base__links { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }

/* ---------- floating WhatsApp ---------- */
.whatsapp-float { position: fixed; right: 18px; bottom: 18px; z-index: 1020; display: inline-flex; align-items: center; gap: .55rem; height: 52px; padding: 0 1rem 0 .9rem; background: #1FA855; color: #fff; border-radius: 4px; box-shadow: 0 10px 28px rgba(0,0,0,.22); text-decoration: none; font-weight: 600; }
.whatsapp-float i { font-size: 1.5rem; }
.whatsapp-float:hover { background: #178A45; color: #fff; }
@media (max-width: 575.98px) { .whatsapp-float span { display: none; } .whatsapp-float { padding: 0 .85rem; } }

/* ---------- lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 2000; background: rgba(6, 10, 24, .94); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 64px; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s; }
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 150px); object-fit: contain; border-radius: 2px; }
.lightbox__caption { color: rgba(255,255,255,.88); margin-top: .9rem; text-align: center; max-width: 70ch; }
.lightbox__count { color: rgba(255,255,255,.6); font-size: .9rem; margin-top: .3rem; }
.lightbox button { position: absolute; width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.3); border-radius: var(--radius); background: rgba(255,255,255,.06); color: #fff; font-size: 1.3rem; }
.lightbox button:hover { background: rgba(255,255,255,.16); }
.lightbox__close { top: 14px; right: 14px; }
.lightbox__prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 12px; top: 50%; transform: translateY(-50%); }
@media (max-width: 575.98px) { .lightbox { padding: 64px 10px; } .lightbox__prev, .lightbox__next { top: auto; bottom: 14px; transform: none; } }

/* ---------- modal ---------- */
.modal-content { border-radius: 4px; border: 0; }
.modal-header { border-bottom-color: var(--rule); }
.modal-title { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.015em; }
.modal-footer { border-top-color: var(--rule); }
.msg-icon { font-size: 1.8rem; line-height: 1; }
.msg-icon.is-error { color: var(--accent); }
.msg-icon.is-success { color: #1E8A4C; }
.msg-icon.is-info { color: var(--brand); }

/* ---------- not found ---------- */
.notfound { text-align: left; padding: 96px 0; }
.notfound h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); }

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .hero__sun .ray { transform: none; }
}

/* ---------- print ---------- */
@media print {
  .utility-bar, .notice-bar, .site-header, .drawer, .drawer-backdrop, .site-footer, .whatsapp-float, .share, .hero__controls { display: none !important; }
  .page-banner, .hero { background: none !important; color: #000 !important; padding: 0 0 1rem !important; }
  .page-banner h1, .hero__title { color: #000 !important; }
}