.inner-page {
  --gold: #e4eee9;
  --gold-soft: #d5e5de;
  --green: #789087;
  --green-deep: #526a61;
  --maroon: #637d73;
  --cream: #f3f7f5;
  --paper: #ffffff;
  --ink: #26342f;
  --muted: #64736d;
  --line: rgba(82, 106, 97, 0.18);
  background: var(--paper);
  animation: inner-page-fade 520ms ease both;
}

.inner-page .site-header,
.inner-page .site-footer {
  --gold: #f7e4da;
  --gold-soft: #f1d4cc;
  --green: #7c6166;
  --green-deep: #684b52;
  --maroon: #765a60;
  --cream: #f3ede6;
  --paper: #fcf9f4;
  --ink: #3b2b2e;
  --muted: #6e5a5e;
  --line: rgba(104, 75, 82, 0.2);
}

.inner-hero {
  --inner-image: url("assets/environment.jpeg");
  position: relative;
  min-height: 570px;
  padding: calc(var(--header-h, 170px) + 34px) clamp(24px, 8vw, 132px) 86px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  background-image:
    linear-gradient(rgba(123, 91, 69, 0.24), rgba(123, 91, 69, 0.24)),
    var(--inner-image);
  background-color: #8f7969;
  background-position: center top, center var(--header-h, 150px);
  background-size: cover;
  background-attachment: scroll;
  background-blend-mode: color, luminosity;
  color: white;
}

/* These banners have their subject mid-frame, so they centre their
   photograph rather than anchoring it to the top. Centred on the band below
   the bar, not the whole box, so the header does not push the visible crop
   downwards. */
[data-page="facility"] .inner-hero,
[data-page="careers"] .inner-hero,
[data-page="contact"] .inner-hero {
  background-position: center top, center calc(50% + var(--header-h, 150px) / 2);
}

.inner-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(25, 38, 34, 0.76) 0%, rgba(38, 55, 49, 0.38) 52%, rgba(38, 55, 49, 0.1) 100%),
    linear-gradient(0deg, rgba(20, 31, 27, 0.52), transparent 55%);
  animation: inner-overlay-in 900ms ease-out both;
}

.inner-hero-content {
  width: min(840px, 100%);
  text-shadow: 0 3px 24px rgba(12, 24, 20, 0.48);
  animation: inner-hero-rise 820ms 120ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.inner-breadcrumb {
  width: fit-content;
  margin-bottom: 22px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(31, 47, 42, 0.22);
  backdrop-filter: blur(10px);
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.inner-breadcrumb a:hover,
.inner-breadcrumb a:focus-visible {
  color: white;
}

.inner-hero h1 {
  max-width: 820px;
  margin: 0 0 24px;
  font-family: var(--serif);
  font-size: clamp(3.2rem, 6.2vw, 6.4rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 0.96;
  text-wrap: balance;
}

/* The school name carries the brand typeface on its own cream ground. */
.inner-hero .school-name-accent {
  display: inline-block;
  padding: 0.1em 0.34em 0.14em;
  background: var(--brand-cream);
  border-radius: 0.22em;
  color: #692532;
  font-family: var(--brand);
  font-size: 0.74em;
  font-weight: 700;
  letter-spacing: -0.055em;
  text-transform: uppercase;
  text-shadow: none;
  /* The wordmark always reads as one line. */
  white-space: nowrap;
  box-shadow: 0 8px 22px rgba(20, 31, 27, 0.24);
}

@media (max-width: 760px) {
  /* The boxed wordmark all but fills a narrow line at the headline size, so
     it is set smaller here. */
  .inner-hero .school-name-accent {
    font-size: 0.5em;
    padding: 0.14em 0.28em 0.18em;
  }
}

.inner-hero p {
  max-width: 680px;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.12rem, 1.7vw, 1.35rem);
  line-height: 1.6;
}

.inner-hero p + p {
  margin-top: 14px;
  font-size: clamp(1rem, 1.3vw, 1.12rem);
}

.inner-intro {
  position: relative;
  padding: clamp(52px, 5.5vw, 80px) clamp(24px, 8vw, 132px);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.55fr);
  gap: clamp(50px, 9vw, 145px);
  align-items: end;
  background: var(--cream);
  overflow: hidden;
}

.inner-intro::before {
  content: "\201C";
  position: absolute;
  top: -70px;
  right: clamp(18px, 6vw, 90px);
  color: rgba(82, 106, 97, 0.08);
  font-family: var(--serif);
  font-size: clamp(13rem, 24vw, 25rem);
  line-height: 1;
  pointer-events: none;
}

.inner-intro blockquote {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2rem, 3.7vw, 4rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.inner-intro blockquote:last-child {
  grid-column: 1 / -1;
}

.inner-intro aside {
  position: relative;
  z-index: 1;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 1.16rem;
  line-height: 1.75;
}

.inner-intro cite {
  display: block;
  margin-top: 20px;
  text-align: right;
  color: var(--maroon);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.inner-section {
  position: relative;
  padding: clamp(54px, 6vw, 86px) clamp(24px, 8vw, 132px);
  overflow: hidden;
}

/* Two same-coloured sections meeting stack their padding, so the second one
   sits closer when it follows the intro directly. */
.inner-intro + .inner-section {
  padding-top: clamp(28px, 3vw, 44px);
}

.inner-section.alt {
  background: var(--cream);
}

.inner-section.dark {
  background: #eef4f1;
  color: var(--ink);
}

.inner-heading {
  position: relative;
  max-width: 860px;
  margin-bottom: clamp(34px, 4vw, 52px);
  padding-top: 20px;
}

.inner-heading::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 54px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--maroon), var(--gold-soft));
}

.inner-heading.center {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.inner-heading.center::before {
  left: 50%;
  transform: translateX(-50%);
}

.inner-section.dark .inner-heading::before {
  background: linear-gradient(90deg, var(--green-deep), var(--gold-soft));
}

.inner-heading h2 + .eyebrow {
  margin-top: -8px;
  margin-bottom: 0;
}

.inner-heading .eyebrow {
  margin-bottom: 16px;
}

.inner-section.dark .eyebrow {
  color: var(--green-deep);
}

.inner-heading h2,
.inner-split h2,
.inner-cta h2 {
  margin: 0 0 22px;
  font-family: var(--serif);
  font-size: clamp(2.5rem, 4.8vw, 4.8rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.02;
  text-wrap: balance;
}

.inner-heading > p,
.inner-split-copy > p,
.inner-prose p {
  color: var(--muted);
  font-family: var(--serif);
  font-size: 1.16rem;
  line-height: 1.78;
}

.inner-section.dark .inner-heading > p,
.inner-section.dark .inner-prose p {
  color: var(--muted);
}

.inner-split {
  display: grid;
  grid-template-columns: minmax(320px, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(48px, 8vw, 120px);
  align-items: center;
}

.inner-split.reverse .inner-split-media {
  order: 2;
}

.inner-split-media {
  position: relative;
  isolation: isolate;
}

.inner-split-media::after {
  content: "";
  position: absolute;
  inset: 12px -12px -12px 12px;
  z-index: -1;
  border: 1px solid rgba(82, 106, 97, 0.22);
  pointer-events: none;
}

.inner-split-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  box-shadow: 22px 22px 0 var(--gold-soft);
  filter: saturate(0.92) contrast(1.02);
  transition: transform 600ms cubic-bezier(0.2, 0.75, 0.25, 1), filter 350ms ease;
}

.inner-split-copy .eyebrow {
  margin-bottom: 14px;
}

.inner-prose p:last-child,
.inner-split-copy p:last-child {
  margin-bottom: 0;
}

.inner-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.inner-card-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.inner-card {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 3.5vw, 46px);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(8px);
  box-shadow: 0 16px 38px rgba(38, 52, 47, 0.08);
}

.inner-card::before,
.contact-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--maroon), var(--gold-soft));
  transform: scaleX(0.28);
  transform-origin: left;
  transition: transform 350ms ease;
}

.inner-card::after {
  content: "";
  position: absolute;
  top: -72px;
  right: -72px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(213, 229, 222, 0.4), transparent 70%);
  pointer-events: none;
}

.inner-section.dark .inner-card {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 16px 38px rgba(38, 52, 47, 0.07);
}

.inner-section.dark .inner-card::before {
  background: linear-gradient(90deg, var(--green-deep), var(--gold-soft));
}

.inner-card-number,
.inner-card-label {
  display: block;
  margin-bottom: 18px;
  color: var(--maroon);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.inner-section.dark .inner-card-number,
.inner-section.dark .inner-card-label {
  color: var(--green-deep);
}

.inner-card h3 {
  margin: 0 0 16px;
  font-family: var(--serif);
  font-size: clamp(1.55rem, 2.3vw, 2.3rem);
  font-weight: 500;
  line-height: 1.12;
}

.inner-card p,
.inner-card li {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.72;
}

.inner-card p + p {
  margin-top: 16px;
}

.inner-section.dark .inner-card p,
.inner-section.dark .inner-card li {
  color: var(--muted);
}

.card-links {
  margin-top: 18px;
  display: grid;
  gap: 8px;
  font-size: 0.95rem;
}

.card-links a,
.card-links address {
  color: var(--muted);
  font-style: normal;
  line-height: 1.6;
}

.card-links address strong {
  display: block;
  color: var(--green-deep);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.card-links a {
  width: fit-content;
  border-bottom: 1px solid rgba(104, 75, 82, 0.3);
  transition: color 180ms ease, border-color 180ms ease;
}

.card-links a:hover,
.card-links a:focus-visible {
  color: var(--green-deep);
  border-bottom-color: currentColor;
}

.card-links .card-link-primary {
  color: var(--green-deep);
  font-weight: 700;
}

.inner-card ul {
  margin: 18px 0 0;
  padding-left: 20px;
}

/* This heading is a full sentence rather than a title, so it is set as a
   quiet statement: smaller, roomier lines, and a rule to open it. */
[data-page="academic"] .inner-section.alt .inner-heading {
  max-width: 780px;
}

[data-page="academic"] .inner-section.alt .inner-heading h2 {
  margin: 0;
  color: var(--green-deep);
  font-size: clamp(1.35rem, 1.9vw, 1.72rem);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0;
  line-height: 1.62;
}

/* Photograph on the left, the two statements on the right. */
.learning-split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(30px, 3.6vw, 58px);
  align-items: stretch;
}

.learning-split-media {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 18px 42px rgba(38, 52, 47, 0.09);
}

.learning-split-media img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  display: block;
  object-fit: cover;
  object-position: center center;
}

@media (max-width: 900px) {
  .learning-split {
    grid-template-columns: 1fr;
  }

  .learning-split-media img {
    aspect-ratio: 4 / 3;
    height: auto;
  }
}

.learning-split-copy {
  display: grid;
  align-content: start;
  gap: clamp(26px, 3vw, 40px);
}

/* "Learning Space", "Focused on:" and "The Way of Life" are all titles and
   share one style. */
.learning-split-copy h3,
.learning-split-copy h4 {
  margin: 0 0 14px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.1vw, 2.15rem);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.learning-split-copy p + h4 {
  margin-top: 26px;
}

.learning-split-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 1.03rem;
  line-height: 1.78;
}

.learning-split-copy p + p {
  margin-top: 14px;
}

.environment-feature {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.8fr);
  min-height: 470px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 24px 60px rgba(38, 52, 47, 0.11);
}

.environment-feature::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 34%;
  height: 4px;
  background: linear-gradient(90deg, var(--green-deep), var(--gold-soft));
}

.environment-feature-media {
  position: relative;
  min-height: 470px;
  margin: 0;
  overflow: hidden;
}

.environment-feature-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(24, 40, 34, 0.46), transparent 48%);
  pointer-events: none;
}

.environment-feature-media img {
  width: 100%;
  height: 100%;
  min-height: 470px;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.92) contrast(1.02);
  transition: transform 700ms cubic-bezier(0.2, 0.75, 0.25, 1), filter 350ms ease;
}

.environment-feature-media figcaption {
  position: absolute;
  right: 28px;
  bottom: 24px;
  left: 28px;
  z-index: 1;
  color: white;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.environment-feature-copy {
  position: relative;
  padding: clamp(42px, 5vw, 76px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.environment-feature-copy::after {
  content: "\201C";
  position: absolute;
  top: 8px;
  right: 28px;
  color: rgba(82, 106, 97, 0.08);
  font-family: var(--serif);
  font-size: 10rem;
  line-height: 1;
  pointer-events: none;
}

.environment-feature-copy h3 {
  position: relative;
  z-index: 1;
  margin: 0 0 28px;
  font-family: var(--serif);
  font-size: clamp(2.25rem, 3.4vw, 3.9rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.02;
}

.environment-feature-copy blockquote {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.75vw, 1.65rem);
  line-height: 1.55;
}

.environment-feature-copy cite {
  display: block;
  margin-top: 18px;
  text-align: right;
  color: var(--green-deep);
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.environment-feature-copy > p {
  margin: 30px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  line-height: 1.75;
}

.programme-detail-list {
  border-top: 1px solid var(--line);
}

.programme-detail {
  position: relative;
  padding: clamp(34px, 5vw, 64px) 0;
  display: grid;
  grid-template-columns: 70px minmax(220px, 0.55fr) minmax(0, 1fr);
  gap: clamp(22px, 4vw, 60px);
  border-bottom: 1px solid var(--line);
  transition: background-color 280ms ease, box-shadow 280ms ease;
}

.programme-detail::before {
  content: "";
  position: absolute;
  top: 18%;
  bottom: 18%;
  left: 0;
  width: 3px;
  border-radius: 999px;
  background: var(--maroon);
  transform: scaleY(0);
  transition: transform 280ms ease;
}

.programme-detail h3 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 2.7vw, 2.7rem);
  font-weight: 500;
}

.programme-detail p {
  margin-bottom: 12px;
  color: var(--muted);
  line-height: 1.75;
}

.programme-detail .years {
  color: var(--maroon);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.inner-page .curriculum-programmes {
  height: auto;
  min-height: 0;
  padding: clamp(76px, 9vw, 126px) clamp(24px, 8vw, 132px);
  display: block;
  overflow: visible;
  background-color: var(--paper);
  background-image: none;
}

.curriculum-programmes .programme-heading {
  display: block;
  max-width: 900px;
  margin-bottom: clamp(42px, 6vw, 72px);
}

.curriculum-programmes .programme-heading > div {
  max-width: 900px;
}

.curriculum-programmes .programme-introduction {
  max-width: 780px;
  margin: 22px 0 0;
  color: var(--muted);
  font-family: var(--serif);
  font-size: clamp(1.08rem, 1.5vw, 1.28rem);
  font-weight: 500;
  line-height: 1.75;
}

.curriculum-programmes .programme-list {
  display: block;
  min-height: 0;
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 20px 52px rgba(38, 52, 47, 0.09);
  backdrop-filter: none;
}

.curriculum-programmes .programme-list article {
  min-height: 0;
  padding-top: clamp(34px, 4vw, 54px);
  padding-bottom: clamp(34px, 4vw, 54px);
  grid-template-columns: 64px minmax(220px, 0.48fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(24px, 4vw, 58px);
  border-bottom-color: var(--line);
}

.curriculum-programmes .programme-list article:last-child {
  border-bottom: 0;
}

.curriculum-programmes .programme-list article:hover {
  background: var(--cream);
}

.curriculum-programmes .programme-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.78;
}

.curriculum-programmes .programme-copy p + p {
  margin-top: 16px;
}

.inner-page[data-page="curriculum"] .inner-cta {
  min-height: 0;
  margin: 0;
  padding-top: clamp(64px, 8vw, 104px);
  padding-bottom: clamp(64px, 8vw, 104px);
  background: linear-gradient(120deg, #ffffff 0%, #edf4f1 56%, #dce9e3 100%);
  border-top: 1px solid var(--line);
}

.inner-page[data-page="curriculum"] .inner-cta::before {
  right: -4%;
  bottom: -230%;
}

@media (max-width: 900px) {
  .curriculum-programmes .programme-list article {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .curriculum-programmes .programme-copy {
    grid-column: 2;
  }
}

@media (max-width: 560px) {
  .curriculum-programmes .programme-list {
    padding-right: 16px;
    padding-left: 16px;
  }

  .curriculum-programmes .programme-list article {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .curriculum-programmes .programme-copy {
    grid-column: 1;
  }
}

.facility-grid,
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

@media (min-width: 1081px) {
  .facility-grid--center-tail {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .facility-grid--center-tail > .facility-card {
    grid-column: span 2;
  }

  .facility-grid--center-tail > .facility-card:nth-child(4) {
    grid-column: 2 / span 2;
  }

  .facility-grid--center-tail > .facility-card:nth-child(5) {
    grid-column: 4 / span 2;
  }
}

.facility-card,
.gallery-item {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line);
  box-shadow: 0 14px 34px rgba(38, 52, 47, 0.09);
  transition: transform 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}

.facility-card img,
.gallery-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: saturate(0.92);
  transition: transform 600ms cubic-bezier(0.2, 0.75, 0.25, 1), filter 350ms ease;
}

/* Photographs supplied for these cards keep their own tone. */
.facility-card img.no-filter,
.gallery-item img.no-filter {
  filter: none;
}

/* These are pieces of the children's work and photographs of the spaces,
   several of them portrait, so each is shown whole rather than cropped to
   the frame. */
.facility-card img {
  padding: 10px;
  background: #fff;
  object-fit: contain;
}

/* The garage mark is a flat graphic and needs more air around it. */
.facility-card img.contain {
  padding: 14%;
}

.facility-card > div {
  padding: 26px;
}

.facility-card h3 {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 500;
}

.facility-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

/* Gallery and Curriculum show their banner photograph whole: a blurred copy
   of the same picture is the ground, with the sharp image on the left and
   the heading beside it. Each page sets the shape and size of its photo. */
[data-page="gallery"] .inner-hero {
  --banner-aspect: 4 / 3;
  --banner-photo: 46vw;
  --banner-photo-m: 63vw;
}

[data-page="curriculum"] .inner-hero {
  --banner-aspect: 1 / 1;
  --banner-photo: 36vw;
  --banner-photo-m: 80vw;
}

[data-page="gallery"] .inner-hero,
[data-page="curriculum"] .inner-hero {
  min-height: 0;
  padding: calc(var(--header-h, 150px) + 34px) clamp(24px, 8vw, 132px) 44px;
  padding-left: calc(var(--banner-photo) + clamp(24px, 8vw, 132px) + 46px);
  align-items: center;
  background-image: none;
  background-color: #4a3238;
}

/* Blurred ground. Scaled up so the blur has no soft edge at the sides. */
[data-page="gallery"] .inner-hero::before,
[data-page="curriculum"] .inner-hero::before {
  z-index: 0;
  inset: var(--header-h, 150px) 0 0 0;
  background-image:
    linear-gradient(90deg, rgba(25, 38, 34, 0.42) 0%, rgba(38, 55, 49, 0.5) 52%, rgba(20, 31, 27, 0.62) 100%),
    var(--inner-image);
  background-size: cover, cover;
  background-position: center, center;
  filter: blur(26px) saturate(0.9);
  transform: scale(1.12);
}

/* The photograph itself, uncropped. */
[data-page="gallery"] .inner-hero::after,
[data-page="curriculum"] .inner-hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: calc(var(--header-h, 150px) + 34px);
  left: clamp(24px, 8vw, 132px);
  width: var(--banner-photo);
  aspect-ratio: var(--banner-aspect);
  background: var(--inner-image) center / contain no-repeat;
  box-shadow: 0 24px 60px rgba(12, 24, 20, 0.42);
}

[data-page="gallery"] .inner-hero-content,
[data-page="curriculum"] .inner-hero-content {
  position: relative;
  z-index: 2;
}

/* The heading shares the banner with the photograph, so the wordmark is
   sized to the narrower column rather than the full width. */
[data-page="gallery"] .inner-hero .school-name-accent {
  font-size: 0.5em;
}

@media (max-width: 900px) {
  /* Too narrow to sit side by side: the photo goes on top, heading below. */
  [data-page="gallery"] .inner-hero,
  [data-page="curriculum"] .inner-hero {
    padding: calc(var(--header-h, 104px) + var(--banner-photo-m) + 30px) clamp(24px, 8vw, 132px) 40px;
  }

  [data-page="gallery"] .inner-hero::before,
  [data-page="curriculum"] .inner-hero::before {
    inset: var(--header-h, 104px) 0 0 0;
  }

  [data-page="gallery"] .inner-hero::after,
  [data-page="curriculum"] .inner-hero::after {
    top: calc(var(--header-h, 104px) + 22px);
    left: 8vw;
    width: 84vw;
  }
}

.gallery-section {
  background:
    radial-gradient(circle at 92% 4%, rgba(213, 229, 222, 0.38), transparent 24%),
    var(--paper);
}

.gallery-section .inner-heading {
  max-width: 760px;
  margin-bottom: clamp(52px, 7vw, 86px);
}

/* ----- Slider: one photograph at a time, thumbnails beneath ----- */
.gallery-grid[hidden] {
  display: none;
}

.gallery-slider {
  display: grid;
  gap: 14px;
}

.gallery-stage {
  position: relative;
  border: 1px solid var(--line);
  background: var(--cream);
}

.gallery-main {
  width: 100%;
  aspect-ratio: 16 / 9;
  /* Capped against the viewport so the stage never dominates the screen. */
  max-height: 54svh;
  display: block;
  /* Contained, so portrait and landscape both show whole. */
  object-fit: contain;
}

.slider-nav {
  position: absolute;
  top: 50%;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  background: rgba(252, 249, 244, 0.9);
  color: var(--ink);
  font-size: 1.05rem;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}

.slider-nav:hover {
  background: var(--brand-maroon);
  color: var(--cream);
}

.slider-prev {
  left: 14px;
}

.slider-next {
  right: 14px;
}

.slider-count {
  position: absolute;
  right: 14px;
  bottom: 12px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(30, 20, 23, 0.62);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.gallery-thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
}

.gallery-thumb {
  flex: 0 0 auto;
  width: clamp(64px, 6vw, 86px);
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 1px solid var(--line);
  background: none;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 180ms ease, border-color 180ms ease;
}

.gallery-thumb:hover {
  opacity: 0.85;
}

.gallery-thumb.is-active {
  opacity: 1;
  border-color: var(--brand-maroon);
  box-shadow: inset 0 0 0 2px var(--brand-maroon);
}

.gallery-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

@media (max-width: 700px) {
  .slider-nav {
    width: 38px;
    height: 38px;
  }

  .slider-prev {
    left: 8px;
  }

  .slider-next {
    right: 8px;
  }
}

.gallery-group + .gallery-group {
  margin-top: clamp(44px, 5vw, 74px);
}

.gallery-group-title span {
  margin-left: auto;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.gallery-group-title {
  margin: 0 0 22px;
  padding-bottom: 14px;
  display: flex;
  align-items: baseline;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.2vw, 2.05rem);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.gallery-item {
  position: relative;
  border-color: var(--line);
  background: var(--cream);
}

@media (min-width: 1081px) {
  .gallery-grid--editorial {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: 24px;
  }

  .gallery-grid--editorial > .gallery-item {
    grid-column: span 4;
  }

  .gallery-grid--editorial > .gallery-item:nth-child(1),
  .gallery-grid--editorial > .gallery-item:nth-child(7),
  .gallery-grid--editorial > .gallery-item:nth-child(11),
  .gallery-grid--editorial > .gallery-item:nth-child(14) {
    grid-column: span 8;
  }

  .gallery-grid--editorial .gallery-item img {
    height: clamp(280px, 24vw, 390px);
    aspect-ratio: auto;
  }
}

.gallery-item figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 34px 18px 16px;
  background: linear-gradient(0deg, rgba(28, 43, 38, 0.78), transparent);
  color: white;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  transform: translateY(5px);
  transition: transform 300ms ease, background 300ms ease;
}

.gallery-item figcaption::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  margin-right: 9px;
  vertical-align: middle;
  background: rgba(255, 255, 255, 0.72);
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.contact-overview {
  background:
    radial-gradient(circle at 8% 12%, rgba(213, 229, 222, 0.48), transparent 29%),
    var(--cream);
}

.contact-overview-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(56px, 8vw, 130px);
  align-items: center;
}

.contact-overview .inner-heading {
  margin-bottom: 26px;
}

.contact-overview-note {
  max-width: 520px;
  margin: 0;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.75;
}

.contact-grid--featured {
  /* The numbers are short and the addresses are long, so the second card
     takes the extra width and the emails stay on one line. */
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
}

.contact-grid--featured .contact-card {
  min-height: 200px;
  padding: clamp(28px, 3vw, 40px);
  justify-content: flex-start;
}

.contact-grid--featured .contact-card::after {
  position: absolute;
  top: 24px;
  right: 26px;
  color: rgba(82, 106, 97, 0.12);
  font-family: var(--serif);
  font-size: 2.35rem;
  line-height: 1;
}

.contact-grid--featured .contact-card:nth-child(1)::after {
  content: "01";
}

.contact-grid--featured .contact-card:nth-child(2)::after {
  content: "02";
}

.contact-grid--featured .contact-card a,
.contact-grid--featured .contact-card address {
  max-width: 680px;
  margin-top: clamp(30px, 5vw, 54px);
}

/* Several labelled entries inside one card. */
.contact-lines {
  margin-top: clamp(22px, 2.6vw, 32px);
  display: grid;
  gap: clamp(16px, 1.8vw, 22px);
}

.contact-grid--featured .contact-card .contact-lines a {
  max-width: none;
  margin-top: 0;
  /* Block rather than grid, so the trailing arrow sits after the value
     instead of dropping onto a row of its own. */
  display: block;
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  line-height: 1.45;
}

.contact-lines em {
  display: block;
  margin-bottom: 3px;
  color: var(--maroon);
  font-family: var(--sans);
  font-size: 0.63rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.contact-grid--featured .contact-card a::after {
  content: "\2197";
  display: inline-block;
  margin-left: 10px;
  color: var(--green-deep);
  font-family: var(--sans);
  font-size: 0.8em;
  transition: transform 180ms ease;
}

.contact-grid--featured .contact-card a:hover,
.contact-grid--featured .contact-card a:focus-visible {
  color: var(--green-deep);
}

.contact-grid--featured .contact-card a:hover::after,
.contact-grid--featured .contact-card a:focus-visible::after {
  transform: translate(3px, -3px);
}

.contact-card {
  position: relative;
  overflow: hidden;
  min-height: 240px;
  padding: 34px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--line);
  background: linear-gradient(145deg, var(--paper), rgba(228, 238, 233, 0.46));
  box-shadow: 0 14px 36px rgba(38, 52, 47, 0.07);
}

.contact-card span {
  color: var(--maroon);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.contact-card a,
.contact-card address {
  margin-top: 28px;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-style: normal;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.campus-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.campus-card {
  position: relative;
  padding: clamp(28px, 3vw, 40px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 3vw, 38px);
  align-items: center;
  border: 1px solid var(--line);
  background: linear-gradient(145deg, var(--paper), rgba(228, 238, 233, 0.46));
  box-shadow: 0 14px 36px rgba(38, 52, 47, 0.07);
}

.campus-card span {
  display: block;
  color: var(--maroon);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.campus-card address {
  margin-top: 20px;
  font-family: var(--serif);
  font-size: clamp(1.12rem, 1.5vw, 1.4rem);
  font-style: normal;
  line-height: 1.5;
}

.campus-card-copy > a {
  display: inline-block;
  margin-top: 20px;
  color: var(--green-deep);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.campus-card-copy > a span {
  display: inline;
  margin-left: 6px;
  font-size: inherit;
  letter-spacing: normal;
  transition: transform 180ms ease;
}

/* The live map sits under the address and code, spanning the card. */
.campus-map {
  grid-column: 1 / -1;
  width: 100%;
  height: clamp(200px, 22vw, 260px);
  border: 1px solid var(--line);
  filter: saturate(0.92);
}

.campus-qr {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 10px;
}

.campus-qr img {
  width: clamp(104px, 9vw, 132px);
  height: auto;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--line);
}

.campus-qr figcaption {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.form-section {
  background: var(--cream);
}

.form-shell {
  position: relative;
  max-width: 1080px;
  padding: clamp(28px, 4.5vw, 58px);
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 22px 58px rgba(38, 52, 47, 0.09);
}

.form-shell::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, #684b52, #d5e5de);
}

.inner-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.form-field {
  display: grid;
  gap: 9px;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.form-field--full {
  grid-column: 1 / -1;
}

.form-field small {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  min-height: 54px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: #fbfdfc;
  color: var(--ink);
  font: 500 1rem/1.45 var(--sans);
  outline: none;
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.form-field textarea {
  min-height: 138px;
  resize: vertical;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: #87948f;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--green-deep);
  background: white;
  box-shadow: 0 0 0 4px rgba(99, 125, 115, 0.13);
}

.form-field .file-input {
  padding: 10px;
  cursor: pointer;
}

.form-field .file-input::file-selector-button {
  margin-right: 14px;
  padding: 10px 14px;
  border: 0;
  background: var(--gold-soft);
  color: var(--ink);
  font: 800 0.68rem/1 var(--sans);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
}

.form-actions {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 22px;
}

.inner-form .button {
  border: 0;
  background: var(--brand-maroon);
  color: white;
  cursor: pointer;
}

.inner-form .button:hover,
.inner-form .button:focus-visible {
  background: var(--brand-maroon-soft);
}

.form-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.form-status {
  min-height: 24px;
  margin: 18px 0 0;
  color: var(--green-deep);
  font-weight: 750;
}

.form-status.is-success {
  padding: 13px 15px;
  border-left: 3px solid var(--green-deep);
  background: var(--gold);
}

.inner-cta {
  position: relative;
  padding: clamp(70px, 9vw, 120px) clamp(24px, 8vw, 132px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: center;
  background: linear-gradient(120deg, #ffffff 0%, #edf4f1 54%, #dce9e3 100%);
  color: var(--green-deep);
  overflow: hidden;
  isolation: isolate;
}

.inner-cta::before {
  content: "";
  position: absolute;
  width: min(44vw, 620px);
  aspect-ratio: 1;
  right: -12%;
  bottom: -185%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.5), transparent 68%);
  pointer-events: none;
}

.inner-cta h2 {
  max-width: 850px;
  margin-bottom: 0;
}

.inner-cta .button {
  background: var(--brand-maroon);
  color: white;
}

.inner-cta .button:hover,
.inner-cta .button:focus-visible {
  background: var(--brand-maroon-soft);
  color: white;
}

.inner-page .site-footer {
  margin-top: 0;
  background: var(--brand-maroon);
}

.inner-page .back-to-top,
.inner-page .back-to-top:hover,
.inner-page .back-to-top:focus-visible {
  background: #684b52;
  color: white;
}

@media (hover: hover) and (pointer: fine) {
  .environment-feature:hover .environment-feature-media img {
    transform: scale(1.035);
    filter: saturate(1.02) contrast(1.02);
  }

  .inner-split-media:hover img {
    transform: translate(-4px, -4px) scale(1.012);
    filter: saturate(1) contrast(1.02);
  }

  .facility-card:hover img,
  .gallery-item:hover img {
    transform: scale(1.045);
    filter: saturate(1.04);
  }

  .facility-card:hover img.no-filter,
  .gallery-item:hover img.no-filter {
    filter: none;
  }

  .facility-card:hover img.contain {
    transform: none;
  }

  .inner-card:hover,
  .contact-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 44px rgba(38, 52, 47, 0.13);
  }

  .inner-card:hover::before,
  .contact-card:hover::before {
    transform: scaleX(1);
  }

  .programme-detail:hover {
    background: rgba(228, 238, 233, 0.34);
    box-shadow: inset 14px 0 0 rgba(213, 229, 222, 0.24);
  }

  .programme-detail:hover::before {
    transform: scaleY(1);
  }

  .facility-card:hover,
  .gallery-item:hover {
    transform: translateY(-5px);
    border-color: rgba(143, 169, 158, 0.46);
    box-shadow: 0 22px 48px rgba(38, 52, 47, 0.17);
  }

  .gallery-item:hover figcaption {
    transform: translateY(0);
    background: linear-gradient(0deg, rgba(28, 43, 38, 0.9), transparent);
  }
}

.inner-card,
.contact-card {
  transition: transform 240ms ease, box-shadow 240ms ease;
}

@media (max-width: 1080px) {
  .campus-grid {
    grid-template-columns: 1fr;
  }

  .inner-hero {
    min-height: 520px;
    padding-top: calc(var(--header-h, 104px) + 30px);
    background-attachment: scroll;
  }

  .inner-intro,
  .inner-split {
    grid-template-columns: 1fr;
  }

  .environment-feature {
    grid-template-columns: 1fr;
  }

  .environment-feature::before {
    width: 100%;
  }

  .environment-feature-media,
  .environment-feature-media img {
    min-height: 420px;
  }

  .contact-overview-layout {
    grid-template-columns: 1fr;
    gap: 46px;
  }

  .contact-overview-copy {
    max-width: 780px;
  }

  .inner-split.reverse .inner-split-media {
    order: 0;
  }

  .inner-split-media {
    max-width: 760px;
  }

  .inner-card-grid,
  .facility-grid,
  .gallery-grid,
  .contact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .programme-detail {
    grid-template-columns: 54px minmax(190px, 0.55fr) minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .inner-hero {
    min-height: 500px;
    padding: 132px 22px 58px;
    background-position: center top, center var(--header-h, 104px);
  }

  .inner-hero h1 {
    font-size: clamp(2.85rem, 13vw, 4.2rem);
  }

  .inner-intro,
  .inner-section,
  .inner-cta {
    padding-right: 22px;
    padding-left: 22px;
  }

  .inner-card-grid,
  .inner-card-grid.two,
  .facility-grid,
  .gallery-grid,
  .contact-grid,
  .inner-cta {
    grid-template-columns: 1fr;
  }

  .contact-grid--featured {
    grid-template-columns: 1fr;
  }

  .contact-grid--featured .contact-card {
    min-height: 180px;
  }

  .campus-card {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .campus-qr {
    justify-items: start;
  }

  .gallery-item img {
    aspect-ratio: 4 / 3;
  }

  .programme-detail {
    grid-template-columns: 38px 1fr;
  }

  .programme-detail > div:last-child {
    grid-column: 2;
  }

  .inner-split-media img {
    box-shadow: 12px 12px 0 var(--gold-soft);
  }

  .inner-form-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .form-field--full {
    grid-column: auto;
  }

  .form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .inner-form .button {
    width: 100%;
  }

  .environment-feature {
    min-height: 0;
  }

  .environment-feature-media,
  .environment-feature-media img {
    min-height: 300px;
  }

  .environment-feature-copy {
    padding: 34px 26px 38px;
  }

  .environment-feature-copy h3 {
    margin-bottom: 20px;
  }

  .environment-feature-copy > p {
    margin-top: 24px;
    padding-top: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .inner-page,
  .inner-hero::before,
  .inner-hero-content {
    animation: none;
  }

  .inner-hero {
    background-attachment: scroll;
  }

  .inner-split-media img,
  .environment-feature-media img,
  .facility-card img,
  .gallery-item img,
  .facility-card,
  .gallery-item,
  .programme-detail,
  .programme-detail::before,
  .inner-card,
  .contact-card,
  .inner-card::before,
  .contact-card::before,
  .gallery-item figcaption {
    transition: none;
  }
}

@keyframes inner-page-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes inner-overlay-in {
  from {
    opacity: 0.35;
  }
  to {
    opacity: 1;
  }
}

@keyframes inner-hero-rise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Board advisors */
.advisor-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.advisor-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 760px;
  margin: 0 auto;
}

.advisor-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 16px 38px rgba(38, 52, 47, 0.08);
}

.advisor-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2;
  height: 3px;
  background: linear-gradient(90deg, var(--maroon), var(--gold-soft));
  transform: scaleX(0.28);
  transform-origin: left;
  transition: transform 350ms ease;
}

.advisor-portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: linear-gradient(160deg, var(--cream), var(--gold));
}

.advisor-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  transition: transform 700ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

/* An empty portrait frame, shown until a photograph is supplied. */
.advisor-portrait.is-empty {
  background: var(--cream);
}

.advisor-portrait.is-empty::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  transform: translate(-50%, calc(-50% - 14px));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23684b52'%3E%3Ccircle cx='12' cy='8.2' r='3.6'/%3E%3Cpath d='M12 13.4c-4.1 0-7.4 2.9-7.4 6.6h14.8c0-3.7-3.3-6.6-7.4-6.6z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.22;
}

.advisor-portrait.is-empty::after {
  content: "Photograph awaited";
  position: absolute;
  top: calc(50% + 30px);
  right: 0;
  left: 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
}

.advisor-copy {
  padding: clamp(22px, 2.4vw, 30px);
}

.advisor-copy h3 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.5vw, 1.28rem);
  line-height: 1.3;
}

.advisor-role {
  margin: 0 0 4px;
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.5;
}

.advisor-place {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

@media (hover: hover) and (pointer: fine) {
  .advisor-card:hover::before {
    transform: scaleX(1);
  }

  .advisor-card:hover .advisor-portrait img {
    transform: scale(1.04);
  }
}

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

@media (max-width: 700px) {
  .advisor-grid,
  .advisor-grid.two {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Zoho-hosted enquiry forms */
/* The height is a starting point only: each form reports its rendered
   height back to the page and script.js resizes the frame to match, so
   there is no dead space beneath a short form. */
.zoho-form {
  display: block;
  width: 100%;
  height: 620px;
  border: none;
  background: transparent;
  transition: height 220ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .zoho-form {
    transition: none;
  }
}