.page-nav a.active:after { transform: scaleX(1); }
.page-hero { position: relative; min-height: 440px; display: grid; align-items: end; padding: 95px 0 76px; color: #fff; background: var(--teal); overflow: hidden; isolation: isolate; }
.page-hero:before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(7,61,64,.95) 0%, rgba(7,61,64,.86) 45%, rgba(7,61,64,.35) 100%), var(--hero-image) center/cover no-repeat; }
.page-hero:after { content: ""; position: absolute; z-index: -1; width: 560px; height: 560px; border: 1px dashed rgba(255,255,255,.18); border-radius: 50%; right: -175px; top: -280px; box-shadow: inset 0 0 0 35px rgba(255,255,255,.025); }
.page-hero-content { max-width: 760px; }
.page-hero .breadcrumb { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin: 0 0 21px; color: #c9e4dd; font-size: .72rem; font-weight: 700; }
.page-hero .breadcrumb a { color: var(--gold); }
.page-hero h1 { margin: 0; max-width: 720px; color: #fff; font-family: var(--heading); font-size: clamp(3.2rem, 6vw, 5.5rem); line-height: .98; letter-spacing: -.055em; }
.page-hero h1 em { color: var(--gold); font-style: italic; }
.page-hero-copy { max-width: 650px; margin: 22px 0 0; color: #d7ebe6; font-size: 1rem; line-height: 1.75; }
.page-main { padding: 90px 0 110px; }
.page-layout { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 70px; align-items: start; }
.rich-content h2 { margin: 42px 0 16px; color: var(--ink); font-family: var(--heading); font-size: clamp(2rem, 3.5vw, 3.15rem); line-height: 1.08; letter-spacing: -.045em; }
.rich-content h2:first-child { margin-top: 0; }
.rich-content h3 { margin: 31px 0 12px; font-family: var(--heading); font-size: 1.55rem; }
.rich-content p, .rich-content li { color: var(--ink-soft); font-size: .94rem; line-height: 1.86; }
.rich-content ul, .rich-content ol { padding-left: 22px; }
.rich-content li { padding-left: 5px; margin-bottom: 8px; }
.page-sidebar { position: sticky; top: 105px; display: grid; gap: 16px; }
.side-card { padding: 23px; background: #f8efd9; border-top: 3px solid var(--gold); }
.side-card.teal-card { color: #fff; background: var(--teal); border-top-color: var(--coral); }
.side-card h3 { margin: 0 0 10px; font-family: var(--heading); font-size: 1.35rem; line-height: 1.15; }
.side-card p { margin: 0 0 17px; color: var(--ink-soft); font-size: .75rem; line-height: 1.6; }
.side-card.teal-card p { color: #cde4df; }
.side-card a { color: var(--teal); font-size: .72rem; font-weight: 700; }
.side-card.teal-card a { color: var(--gold); }
.content-section { margin-top: 68px; }
.content-heading { display: flex; justify-content: space-between; gap: 25px; align-items: end; margin-bottom: 30px; }
.content-heading h2 { margin: 0; font-family: var(--heading); font-size: clamp(2.2rem, 4vw, 3.7rem); line-height: 1.05; letter-spacing: -.05em; }
.content-heading p { max-width: 470px; margin: 0; color: var(--ink-soft); font-size: .85rem; }
.data-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.data-card { min-width: 0; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 28px rgba(14,65,65,.07); transition: transform .2s, box-shadow .2s; }
.data-card:hover { transform: translateY(-4px); box-shadow: 0 18px 35px rgba(14,65,65,.11); }
.data-card-image { height: 205px; overflow: hidden; background: #dbeae6; }
.data-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.data-card:hover .data-card-image img { transform: scale(1.04); }
.data-card-body { padding: 20px; }
.data-card-meta { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; color: #c96751; font-size: .61rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.data-card h3 { margin: 0 0 8px; font-family: var(--heading); font-size: 1.38rem; line-height: 1.13; letter-spacing: -.035em; }
.data-card p { margin: 0; color: var(--ink-soft); font-size: .75rem; line-height: 1.6; }
.empty-state { grid-column: 1 / -1; padding: 45px 25px; text-align: center; color: var(--ink-soft); background: #f8f3e8; }
.empty-state span { display: block; margin-bottom: 8px; font-size: 2rem; }
.notice-board-list { display: grid; gap: 13px; }
.notice-row { display: grid; grid-template-columns: 72px 1fr auto; gap: 19px; align-items: center; padding: 19px; border: 1px solid var(--line); background: #fff; }
.notice-row.important { border-left: 4px solid var(--coral); }
.notice-row time { display: grid; place-items: center; align-content: center; min-height: 64px; color: #fff; background: var(--teal); font-family: var(--heading); font-size: 1.65rem; line-height: 1; }
.notice-row time small { margin-top: 4px; font-family: var(--body); font-size: .56rem; letter-spacing: .1em; }
.notice-row h3 { margin: 0 0 5px; font-family: var(--heading); font-size: 1.32rem; }
.notice-row p { margin: 0; color: var(--ink-soft); font-size: .75rem; }
.notice-tag { padding: 5px 9px; color: #a84e3d; background: #fce3dc; font-size: .58rem; font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.gallery-grid-page { grid-template-columns: repeat(3, 1fr); }
.gallery-card { position: relative; min-height: 290px; overflow: hidden; background: var(--teal); }
.gallery-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.gallery-card:after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(5,45,48,.9)); }
.gallery-card:hover img { transform: scale(1.05); }
.gallery-card-info { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 17px; color: #fff; }
.gallery-card-info span { color: var(--gold); font-size: .59rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.gallery-card-info h3 { margin: 3px 0 0; font-family: var(--heading); font-size: 1.35rem; }
.filter-bar { display: flex; gap: 10px; margin-bottom: 25px; flex-wrap: wrap; }
.filter-bar input, .filter-bar select { min-height: 43px; padding: 8px 12px; border: 1px solid #c8d8d4; background: #fff; color: var(--ink); font-size: .76rem; }
.filter-bar input { flex: 1; min-width: 220px; }
.download-list { display: grid; gap: 12px; }
.download-row { display: grid; grid-template-columns: 47px 1fr auto; gap: 16px; align-items: center; padding: 16px 18px; border: 1px solid var(--line); background: #fff; }
.file-icon { display: grid; width: 47px; height: 47px; place-items: center; color: #fff; background: var(--coral); border-radius: 4px; font-size: .68rem; font-weight: 800; }
.download-row h3 { margin: 0 0 3px; font-size: .87rem; }
.download-row p { margin: 0; color: var(--ink-soft); font-size: .67rem; }
.download-row a { padding: 8px 12px; color: var(--teal); border: 1px solid var(--teal); font-size: .67rem; font-weight: 700; }
.form-card { padding: 30px; background: #fff; border-top: 4px solid var(--gold); box-shadow: var(--shadow); }
.public-form { display: grid; gap: 14px; }
.public-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.public-form label { display: grid; gap: 6px; color: var(--ink); font-size: .7rem; font-weight: 700; }
.public-form input, .public-form select, .public-form textarea { width: 100%; padding: 11px 12px; border: 1px solid #c7d7d3; border-radius: 3px; color: var(--ink); background: #fffefa; font: inherit; font-size: .78rem; }
.public-form textarea { min-height: 110px; resize: vertical; }
.public-form-status { min-height: 22px; margin: 0; color: var(--teal); font-size: .75rem; font-weight: 700; }
.public-form-status.error { color: #b23e32; }
.contact-info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 30px; }
.contact-info-card { padding: 21px; background: #f8efd9; }
.contact-info-card span { display: block; color: var(--coral); font-size: 1.3rem; }
.contact-info-card strong { display: block; margin: 7px 0 4px; font-family: var(--heading); font-size: 1.2rem; }
.contact-info-card p, .contact-info-card a { margin: 0; color: var(--ink-soft); font-size: .72rem; }
.programme-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; }
.programme-feature { padding: 24px; min-height: 190px; border-radius: 4px; }
.programme-feature:nth-child(3n+1) { background: #f9ded5; }
.programme-feature:nth-child(3n+2) { background: #c8e6df; }
.programme-feature:nth-child(3n+3) { background: #f6d479; }
.programme-feature span { font-size: 1.7rem; }
.programme-feature h3 { margin: 17px 0 7px; font-family: var(--heading); font-size: 1.4rem; }
.programme-feature p { margin: 0; color: #436062; font-size: .73rem; }
.schedule-table-wrap { overflow-x: auto; border: 1px solid var(--line); background: #fff; }
.public-schedule-table { width: 100%; min-width: 780px; border-collapse: collapse; }
.public-schedule-table th { padding: 13px 16px; text-align: left; color: #667f7e; background: #f3f6f2; border-bottom: 1px solid var(--line); font-size: .61rem; text-transform: uppercase; letter-spacing: .09em; }
.public-schedule-table td { max-width: 280px; padding: 17px 16px; color: var(--ink-soft); border-bottom: 1px solid var(--line); font-size: .74rem; vertical-align: top; }
.public-schedule-table tr:last-child td { border-bottom: 0; }
.public-schedule-table td strong, .public-schedule-table td small { display: block; }
.public-schedule-table td strong { color: var(--ink); font-size: .81rem; }
.public-schedule-table td small { margin-top: 3px; color: var(--ink-soft); font-size: .65rem; }
.route-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.route-card { padding: 23px; border: 1px solid var(--line); border-top: 4px solid var(--gold); background: #fff; box-shadow: 0 10px 28px rgba(14,65,65,.07); }
.route-card header { display: flex; align-items: center; gap: 12px; }
.route-card header > span { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 50%; color: #fff; background: var(--teal); }
.route-card header small { color: #c96751; font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; }
.route-card h3 { margin: 1px 0 0; font-family: var(--heading); font-size: 1.45rem; }
.route-times { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 20px 0; }
.route-times p { margin: 0; padding: 10px 12px; background: #edf5f1; }
.route-times span, .route-times strong { display: block; }
.route-times span { color: var(--ink-soft); font-size: .58rem; }
.route-times strong { color: var(--teal); font-size: .79rem; }
.route-stops { min-height: 55px; color: var(--ink-soft); font-size: .73rem; line-height: 1.75; }
.route-alert { padding: 9px 11px; color: #775415; background: #fff0c8; font-size: .67rem; }
.route-card footer { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: .63rem; }
.route-card footer a { color: var(--teal); font-weight: 700; }
.committee-card p + p { margin-top: 9px; }
.committee-card p strong { color: var(--ink); }
.public-filter-form { display: grid; grid-template-columns: 1fr .7fr 1fr auto; gap: 10px; margin-bottom: 25px; padding: 16px; background: #f5f0e4; }
.public-filter-form select { min-height: 43px; padding: 8px 10px; border: 1px solid #c8d8d4; color: var(--ink); background: #fff; font-size: .73rem; }
.timetable-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; }
.timetable-period { min-height: 155px; padding: 18px; border-top: 4px solid var(--teal); background: #e1f0eb; }
.timetable-period.break, .timetable-period.lunch { border-top-color: var(--gold); background: #fff0c8; }
.timetable-period.assembly, .timetable-period.activity { border-top-color: var(--coral); background: #f9dfd8; }
.timetable-period > span { color: #c96751; font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.timetable-period time { display: block; margin-top: 3px; color: var(--ink-soft); font-size: .61rem; }
.timetable-period h3 { margin: 23px 0 4px; font-family: var(--heading); font-size: 1.25rem; line-height: 1.1; }
.timetable-period p { margin: 0; color: var(--ink-soft); font-size: .66rem; }
.birthday-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.birthday-card { position: relative; display: flex; align-items: center; gap: 16px; min-height: 120px; padding: 19px; overflow: hidden; border: 1px solid var(--line); background: #fff0c8; }
.birthday-card img, .birthday-avatar { width: 72px; height: 72px; flex: 0 0 72px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; }
.birthday-avatar { display: grid; place-items: center; color: #fff; background: var(--teal); font-family: var(--heading); font-size: 2rem; }
.birthday-card small { color: #c15e48; font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; }
.birthday-card h3 { margin: 2px 0 3px; font-family: var(--heading); font-size: 1.35rem; }
.birthday-card p { margin: 0; color: var(--ink-soft); font-size: .68rem; }
.birthday-spark { position: absolute; right: 14px; top: 9px; color: var(--coral); font-size: 1.7rem; }
.site-search-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; max-width: 760px; margin: 0 auto 32px; }
.site-search-form input { min-height: 52px; padding: 11px 15px; border: 1px solid #bfd0cc; color: var(--ink); background: #fff; font-size: .87rem; }
.search-summary { margin: 0 0 19px; color: var(--ink-soft); font-size: .8rem; }
.search-results { display: grid; gap: 12px; }
.search-result { position: relative; display: block; padding: 21px 90px 21px 23px; border: 1px solid var(--line); border-left: 4px solid var(--teal); background: #fff; transition: transform .2s, box-shadow .2s; }
.search-result:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.search-result > span { color: #c96751; font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.search-result h2 { margin: 3px 0 5px; font-size: 1.35rem; }
.search-result p { margin: 0; color: var(--ink-soft); font-size: .73rem; }
.search-result strong { position: absolute; right: 23px; top: 50%; transform: translateY(-50%); color: var(--teal); font-size: .68rem; }

@media (max-width: 900px) {
  .page-layout { grid-template-columns: 1fr; gap: 50px; }
  .page-sidebar { position: static; grid-template-columns: 1fr 1fr; }
  .data-grid, .gallery-grid-page { grid-template-columns: repeat(2, 1fr); }
  .timetable-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .page-hero { min-height: 375px; padding: 70px 0 55px; }
  .page-hero:before { background: linear-gradient(90deg, rgba(7,61,64,.95), rgba(7,61,64,.68)), var(--hero-image) center/cover no-repeat; }
  .page-hero h1 { font-size: clamp(2.8rem, 14vw, 4rem); }
  .page-main { padding: 65px 0 80px; }
  .page-layout { gap: 38px; }
  .page-sidebar { grid-template-columns: 1fr; }
  .content-heading { display: block; }
  .content-heading p { margin-top: 13px; }
  .data-grid, .gallery-grid-page, .programme-feature-grid { grid-template-columns: 1fr; }
  .notice-row { grid-template-columns: 58px 1fr; gap: 13px; }
  .notice-row time { min-height: 56px; }
  .notice-tag { grid-column: 2; justify-self: start; }
  .public-form-grid { grid-template-columns: 1fr; gap: 14px; }
  .contact-info-grid { grid-template-columns: 1fr; }
  .route-grid, .birthday-grid { grid-template-columns: 1fr; }
  .public-filter-form { grid-template-columns: 1fr 1fr; }
  .public-filter-form .button { grid-column: span 2; }
  .timetable-grid { grid-template-columns: 1fr 1fr; }
  .search-result { padding-right: 23px; }
  .search-result strong { position: static; display: block; margin-top: 10px; transform: none; }
  .download-row { grid-template-columns: 43px 1fr; }
  .download-row a { grid-column: 2; justify-self: start; }
}