/* Shared page geometry: cream surfaces, narrow green seams and aligned cards. */
:root {
  --page-gutter: 16px;
  --panel-gap: 16px;
  --panel-pad: 28px;
  --card-pad: 28px;
}
/* Keep the approved header and world-map opening at their original width. */
main > .section > .wrap,
.page-work .work-main > .wrap,
.page-explorer main.wrap,
.localized-page main > .wrap,
footer > .wrap { width: min(1600px, calc(100% - var(--page-gutter) * 2)); max-width: 1600px; }
body::before { background: #153f31; filter: none; }
body::after { opacity: .035; background-size: min(60vw, 760px); }
/* Diffused light lives behind the panels, never on top of the reading text. */
body::before {
  background:
    radial-gradient(ellipse at 0% 18%, #a3c78140, transparent 42%),
    radial-gradient(ellipse at 100% 58%, #adc78432, transparent 44%),
    radial-gradient(ellipse at 48% 105%, #779d6333, transparent 55%),
    linear-gradient(135deg, #123c2e, #153f31 52%, #10372b);
}
.language-bar {
  background: radial-gradient(ellipse at 82% -80%, #6d945634, transparent 68%), #0d3025;
  isolation: isolate;
}
.language-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url('img/crossgates-watermark.svg') right 9% center / 58px 58px no-repeat,
              url('img/crossgates-watermark.svg') 34% center / 30px 30px no-repeat;
  opacity: .12;
}
/* On homepages the language selector sits directly on the continuous map. */
body:has(.home-hero) { --home-language-height: 57px; }
/* Keep the original green logo/navigation bar and its thin lower border. */
body:has(.home-hero) > .site-header { z-index: 40; }
body:has(.home-hero) .brand svg { width: clamp(170px, 13.2vw, 190px); }
body:has(.home-hero) > .language-bar {
  height: var(--home-language-height);
  margin-bottom: calc(-1 * var(--home-language-height));
  padding: 4px 0 13px;
  background: transparent;
  border: 0;
}
body:has(.home-hero) > .language-bar::before { display: none; }
.home-hero { padding-top: calc(68px + var(--home-language-height, 0px)); overflow: hidden; }
.language-switch > summary { background: #0d302538; }

/* Preserve the green world map; refine only the requested type and light. */
.home-intro { --hero-copy-gap: 52px; align-self: start; margin-top: -22px; }
.home-intro > .hero-title {
  font-size: clamp(2rem, 3.8vw, 3.4rem);
  line-height: 1.08;
  max-width: none;
  letter-spacing: -.035em;
}
.home-intro > .hero-title .hero-line { display: block; white-space: nowrap; }
.home-intro > p.hero-promise {
  font-size: clamp(1.75rem, 2.55vw, 2.25rem);
  font-weight: 650;
  line-height: 1.3;
  margin-top: var(--hero-copy-gap);
  color: #fff;
}
.home-intro > .hero-promise span { color: inherit; }
/* Match the two gaps; the paragraph, actions and supporting link move together. */
.home-intro > .hero-promise + p { margin-top: var(--hero-copy-gap); }
.home-intro > .hero-title, .home-intro > .hero-promise + p { transform: translateX(-24px); }
/* Lift only the headline; keep the supporting message and actions in place. */
.home-intro > .hero-title { transform: translate(-24px, -14px); }
/* Give the actions the same spacing rhythm as the introductory text. */
.home-intro > .actions { margin-top: var(--hero-copy-gap); }
.home-intro > .programme-link,
.home-intro > .actions + .text-link { margin-top: var(--hero-copy-gap); }
@media (min-width: 681px) {
  .page-home .home-intro { display: flex; flex-direction: column; align-self: stretch; }
  .page-home .home-intro > .actions,
  .page-home .home-intro > .programme-link { margin-top: auto; align-self: flex-start; }
  .page-home .home-passport { align-self: end; }
}
/* A very soft symbol-only watermark behind the coffee/example details. */
.home-passport .passport-content { position: relative; isolation: isolate; }
.home-passport .passport-content::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 37%;
  width: 184px;
  height: 184px;
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
  background: url('img/crossgates-passport-watermark.svg') center / contain no-repeat;
  opacity: .055;
  filter: blur(9px);
}
.home-hero::after {
  background-image: url('img/map-connections.svg'),
    linear-gradient(180deg, transparent 55%, #153f31 100%),
    linear-gradient(90deg, #0c302694 0%, #103a2e48 48%, #153f3110 100%);
  background-size: cover, auto, auto;
  background-position: center;
  background-repeat: no-repeat;
}
main > .section, .localized-page main > .section { padding: 8px 0; background: transparent; }
main > .section:first-child { padding-top: var(--panel-gap); }
main > .section > .wrap,
.page-guide main > .section > .wrap,
.inner-intro > .wrap {
  background: var(--cream);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: var(--panel-pad);
}
main > .section > .wrap,
.page-guide main > .section > .wrap,
.inner-intro > .wrap {
  background: linear-gradient(90deg, var(--cream) 0 12px, #fff 12px calc(100% - 12px), var(--cream) calc(100% - 12px));
  box-shadow: 0 0 18px #b7d09116, 0 12px 32px #00170d24;
}
/* Composite panels already provide the padding within their two columns. */
main > .section > .audience-layout,
main > .section > .field-grid,
main > .section > .questions-grid,
main > .section > .contact-layout { padding: 0; overflow: hidden; background: var(--cream); }
main > .field-section > .wrap + .wrap {
  margin-top: var(--panel-gap);
  padding: 0;
  background: transparent;
  border: 0;
}
.field-section .watch { margin-top: 0; }
.section-heading, .section-head { margin-bottom: 24px; }
.process-section .section-heading,
.process-section .process-intro,
.process-section .process-limit,
.story-section .section-heading,
.story-section .section-heading .eyebrow,
.story-section .section-heading .small,
.passport-section .section-heading,
.passport-section .document-label,
.passport-section .scope-note { color: var(--ink); }
.section > .wrap > .section-heading,
.section > .wrap > .section-heading .eyebrow,
.section > .wrap > .section-heading .small { color: var(--ink); }
.process-limit { margin-top: 24px; }
.process-grid { margin-top: 24px; }
.process-grid > a { padding: var(--panel-pad); background: #fff; }
.story-controls { gap: 12px; margin-bottom: 16px; }
.passport-layout, .two-col, .enquiry-shell { gap: 24px; align-items: stretch; }
.audience-layout, .questions-grid, .contact-layout, .field-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
.audience-layout > *, .questions-grid > *, .contact-layout > *, .field-grid > *,
.local-grid > *, .work-grid > * { min-width: 0; }
.field-grid .field-copy { justify-content: flex-start; }
.event-photo img { height: 420px; }
.event-thumbnails { margin-top: 16px; }

/* Compact spacing begins below the unchanged green world-map opening. */
.principles {
  width: min(1600px, calc(100% - var(--page-gutter) * 2));
  margin: 8px auto;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.principles .wrap { width: 100%; padding: 18px var(--panel-pad); gap: 16px; }

/* Photo stories share one frame size and stretch to the same row height. */
.page-work .work-main { padding: var(--panel-gap) 0 8px; }
.page-work .work-intro { padding: var(--panel-pad); }
.work-nav { gap: 8px; margin: var(--panel-gap) 0; }
.page-work .work-panel {
  background: var(--cream);
  color: var(--ink);
  padding: var(--panel-pad);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: var(--panel-gap);
}
.page-work .work-panel-heading { margin-bottom: 24px; color: var(--ink); }
.page-work .work-panel-heading .eyebrow { color: var(--forest); }
.page-work .work-panel-heading > p { color: var(--muted); }
.work-grid, .work-grid-three, .local-grid { gap: var(--panel-gap); align-items: stretch; }
.work-card, .localized-page .work-card { align-self: stretch; height: 100%; }
.work-card figcaption { padding: var(--panel-pad); flex: 1; background: #fff; }
.work-card .work-photo {
  position: relative;
  height: 440px;
  aspect-ratio: auto;
  overflow: hidden;
  flex-shrink: 0;
  background: #edf0e6;
  container-type: size;
}
.work-card .work-photo img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* The upright originals stay intact, including the two rotated photographs. */
.work-card .photo-turn-left img, .work-card .photo-turn-right img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 440px;
  height: 100cqw;
  max-width: none;
  object-fit: contain;
}
.work-card .photo-turn-left img { transform: translate(-50%, -50%) rotate(-90deg); }
.work-card .photo-turn-right img { transform: translate(-50%, -50%) rotate(90deg); }
.work-card .photo-social img { object-fit: contain; object-position: center; }
.work-card .work-video video { height: 440px; object-fit: contain; }
.work-films, .work-next, .press-card, .media-links { margin-top: var(--panel-gap); }
.work-next { padding: var(--panel-pad); }
.local-grid .local-card { height: 100%; background: #fff; }
.local-faq, .passport-copy, .passport-annotation, .passport-shell .panel { background: #fff; }
.local-passport > section { padding: 20px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.work-card, .page-work .work-intro, .page-work .work-panel {
  box-shadow: 0 0 16px #b7d09112, 0 12px 32px #00170d24;
}
.localized-page main > .wrap { margin-top: 8px; }
.localized-page .section .work-grid { margin-top: 24px; }
.localized-page main > .wrap > .work-nav { margin: 8px 0; }
.local-notice { margin-bottom: var(--panel-gap); }
.local-passport { margin-bottom: 8px; }
.local-faq { margin: 12px 0; }
.localized-page .section > .wrap > p + p { margin-top: 16px; }
.localized-page .section > .wrap > .btn { margin-top: 20px; margin-right: 16px; }
.page-explorer main.wrap { padding-top: var(--panel-gap); padding-bottom: 8px; }
.page-explorer .intro {
  padding: var(--panel-pad);
  margin: 0 0 var(--panel-gap);
  background: var(--cream);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 14px;
  max-width: none;
}
.page-explorer .intro p { color: var(--muted); }
.page-explorer .intro > .eyebrow { color: var(--forest); }
.page-explorer .source-notice { margin-bottom: var(--panel-gap); }
.page-explorer .passport-shell { margin-bottom: 0; }
body > footer {
  width: min(1600px, calc(100% - var(--page-gutter) * 2));
  margin: 8px auto var(--panel-gap);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: var(--panel-pad);
  background: var(--cream);
}
footer > .wrap { width: 100%; }
.footer-main, .footer-grid, .localized-page .local-footer { gap: 24px; }

@media (max-width: 900px) {
  :root { --panel-pad: 24px; --card-pad: 24px; }
  .home-intro { --hero-copy-gap: 36px; margin-top: -16px; }
}
@media (max-width: 760px) {
  body:has(.home-hero) .brand svg { width: 175px; }
  :root { --page-gutter: 12px; --panel-gap: 12px; --panel-pad: 20px; --card-pad: 20px; }
  main > .section, .localized-page main > .section { padding: 6px 0; }
  .audience-layout, .questions-grid, .contact-layout, .field-grid,
  .passport-layout, .two-col, .enquiry-shell { grid-template-columns: minmax(0, 1fr); }
  .passport-layout, .two-col, .enquiry-shell { gap: 20px; }
  .section-heading, .section-head, .page-work .work-panel-heading { margin-bottom: 20px; }
  .work-card .work-photo, .work-card .work-video video { height: 360px; }
  .work-card .photo-turn-left img, .work-card .photo-turn-right img { width: 360px; }
  .work-grid, .work-grid-three { grid-template-columns: minmax(0, 1fr); }
  .work-grid-three .work-card { display: flex; }
  .event-photo img { height: 360px; }
  .principles { margin-top: 6px; margin-bottom: 6px; }
  .principles .wrap { gap: 12px; padding: 16px 20px; }
  .page-work .work-main { padding-bottom: 6px; }
  .localized-page .local-passport { padding: 20px; }
  body > footer { margin-top: 6px; }
}
@media (max-width: 680px) {
  .home-intro > .hero-title, .home-intro > .hero-promise + p { transform: translateX(-6px); }
  .home-intro > .hero-title { transform: translate(-6px, -10px); }
  .home-hero { padding-top: calc(42px + var(--home-language-height, 0px)); }
  .home-intro { --hero-copy-gap: 38px; margin-top: -12px; }
  .home-intro > .hero-title { font-size: clamp(1.5625rem, 8.2vw, 3.4rem); }
  .home-intro > p.hero-promise { font-size: 1.75rem; }
  .home-hero::after {
    background-image: url('img/map-connections.svg'), linear-gradient(180deg, #0c302650 0%, #12392d38 300px, #153f31 660px);
    background-size: auto 650px, auto;
    background-position: center top;
  }
  .language-bar::before { background-position: right 24px center, 26% center; }
}
@media (max-width: 360px) {
  body:has(.home-hero) .brand svg { width: 165px; }
  .home-intro > p.hero-promise { font-size: 1.625rem; }
  .local-passport > section { padding: 16px; }
}