/* ===================================================================
   Leisure Garden - 2026 site
   Values taken from the Figma file "leisure garden", frame "home".

   Deliberately separate from the legacy styles.css: that file styles the
   obsolete Summer School page and uses the same class names (.site-header,
   .hero, .button), so sharing one stylesheet would make the two designs
   fight each other.
   =================================================================== */

:root {
  /* Brand. Yellow, green and purple are identical to the legacy
     styles.css - the palette carried over into the redesign. */
  --yellow: #fcee21;
  --green: #7ac943;
  --purple: #a748a8;
  --pink: #f1aec8;
  --red: #ed1c24;
  --blue: #119dda;

  /* Text. Deep navy, not the legacy #1e1e1e. */
  --ink: #160c43;

  /* Section tints */
  --tint-green: #f1f9ec;
  --tint-purple: #f6ecf6;
  --tint-yellow: #fefde8;
  --tint-blue: #f0f9ff;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Wix Madefor Display", Arial, sans-serif;

  /* Figma draws at 1920: content 1440 (240 gutters), header 1600 (160). */
  --radius: 40px;
  --section-gap: 120px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 22px;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  /* Every Fraunces size in the design uses -1.92/64 = -0.03em. */
  letter-spacing: -0.03em;
  margin: 0;
}

h2 {
  font-size: 40px;
  line-height: 40px;
}

p {
  margin: 0;
}

a {
  color: inherit;
}

:where(a, button):focus-visible {
  outline: 3px solid var(--purple);
  outline-offset: 3px;
  border-radius: 4px;
}

/* At 1920 this resolves to exactly 1440px with 240px gutters. */
.container {
  width: min(1440px, 92%);
  margin-inline: auto;
}

/* --- Buttons ------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 16px;
  line-height: 18px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter 0.15s ease, background-color 0.15s ease;
}

.button-yellow {
  background: var(--yellow);
  color: var(--ink);
}

.button-yellow:hover {
  filter: brightness(0.94);
}

/* Outlined pill, used under "Cine suntem". */
.button-outline {
  border-color: var(--purple);
  color: var(--purple);
  background: transparent;
}

.button-outline:hover {
  background: var(--purple);
  color: #fff;
}

.button-icon {
  width: 18px;
  height: 18px;
  flex: none;
}

/* --- Site header --------------------------------------------------- */

.site-header {
  z-index: 10;
  padding-top: 25px;
}

/* Home: transparent, sitting over the hero photo. */
.site-header--overlay {
  position: absolute;
  inset: 0 0 auto;
}

/* Scoala: ordinary white band at the top of the page. */
.site-header--solid {
  position: relative;
  background: #fff;
}

.site-header .container {
  display: flex;
  align-items: center;
  gap: 40px;
}

/* The overlay header is drawn on a wider column (1600 at 160) than the page
   content; the solid one shares the 1440 content column. */
.site-header--overlay .container {
  width: min(1600px, 92%);
  display: flex;
  align-items: center;
  gap: 40px;
}

.brand-logo {
  width: 141px;
  height: 95px;
}

.main-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 40px;
}

/* Hamburger. Hidden until the horizontal nav stops fitting (measured: the
   home nav overflows at 1024). Three bars that become an X when open. */
.nav-toggle {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.nav-toggle-bars {
  display: block;
  width: 26px;
  height: 18px;
  position: relative;
}

.nav-toggle-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease;
}

.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 8px; }
.nav-toggle-bars span:nth-child(3) { top: 16px; }

.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) {
  top: 8px;
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) {
  top: 8px;
  transform: rotate(-45deg);
}

.site-header--solid .nav-toggle { color: var(--ink); }
.site-header--overlay .nav-toggle { color: #fff; }

/* Pending items are <span>, not <a>, so they must be styled alongside the
   links - otherwise they inherit the body colour and vanish against the
   header. */
.main-nav a,
.main-nav .is-pending {
  font-weight: 600;
  font-size: 16px;
  line-height: 18px;
  text-decoration: none;
}

.site-header--overlay .main-nav a,
.site-header--overlay .main-nav .is-pending {
  color: #fff;
}

.site-header--solid .main-nav a,
.site-header--solid .main-nav .is-pending {
  color: var(--ink);
}

.main-nav a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Pages the designer has not delivered yet: styled exactly as designed
   but inert, so nobody lands on a page that does not exist. */
.main-nav .is-pending {
  cursor: default;
  opacity: 1;
}

.main-nav .is-pending:hover {
  text-decoration: none;
}

/* --- Hero ---------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 758px;
  display: flex;
  align-items: flex-start;
  background-image: url("../home-hero.jpg");
  background-size: cover;
  background-position: center;
}

.hero .container {
  padding-top: 240px;
}

.hero-title {
  font-size: 64px;
  line-height: 64px;
  color: var(--purple);
  max-width: 668px;
  position: relative;
}

/* "Leisure Garden." is Fraunces Light 300; the rest of the headline is 600. */
.hero-title .light {
  font-weight: 300;
  display: block;
}

/* Hand-drawn underline under "ritmul", 257x30 at x611 y429 in the design. */
.hero-squiggle {
  position: absolute;
  left: 371px;
  top: 189px;
  width: 257px;
  height: 30px;
  pointer-events: none;
}

/* --- Cine suntem --------------------------------------------------- */

.about {
  padding-top: var(--section-gap);
}

.about .container {
  display: grid;
  grid-template-columns: 549px 1fr;
  gap: 107px;
  align-items: start;
}

.about-copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 38px;
}

.about-lede {
  font-size: 24px;
  line-height: 29px;
  font-weight: 500;
}

.about-body {
  white-space: pre-line;
}

.about-copy .button {
  align-self: start;
  margin-top: 12px;
}

.about-image {
  width: 100%;
  height: 440px;
  object-fit: cover;
  border-radius: var(--radius);
}

/* --- Ce oferim ----------------------------------------------------- */

.offer {
  padding-top: var(--section-gap);
}

.offer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}

.offer-arrows {
  display: flex;
  gap: 24px;
}

.offer-arrows button {
  width: 32px;
  height: 32px;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--ink);
}

.offer-arrows button:disabled {
  opacity: 0.3;
  cursor: default;
}

/* In the design the card row starts at the content column but runs off the
   right edge of the page (1985px of cards from x=240), so roughly four and
   a bit cards are visible. Cancel the right gutter to reproduce that.
   Left edge stays aligned to the heading above it. */
.offer-scroller {
  /* Full width with the left edge padded to line up with the content
     column, so the row runs off the right of the page as designed.
     A negative margin-right cannot be used here: it makes the
     container's `margin-inline: auto` re-resolve and shifts the row right. */
  width: auto;
  margin-inline: 0;
  padding-left: max(4vw, calc(50vw - 720px));
}

.offer-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.offer-track::-webkit-scrollbar {
  display: none;
}

.offer-card {
  position: relative;
  flex: none;
  width: 386px;
  height: 540px;
  border-radius: var(--radius);
  overflow: hidden;
  scroll-snap-align: start;
  text-decoration: none;
  color: #fff;
}

.offer-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.offer-card figcaption {
  position: absolute;
  left: 24px;
  bottom: 28px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 36px;
  line-height: 36px;
  letter-spacing: -0.03em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

/* Stretched so the whole card is the click target, while the accessible
   name stays on the caption text. */
.offer-link {
  color: inherit;
  text-decoration: none;
}

.offer-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.offer-card .squiggle {
  display: block;
  width: 120px;
  margin-top: 4px;
}

/* --- Ce ne diferentiaza -------------------------------------------- */

.values {
  padding-top: var(--section-gap);
}

.values h2 {
  margin-bottom: 36px;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.value-card {
  border-radius: var(--radius);
  min-height: 376px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  color: #000;
}

.value-card img {
  width: 200px;
  height: 200px;
}

.value-card h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 24px;
  line-height: 34px;
  letter-spacing: 0;
}

.value-card p {
  max-width: 365px;
}

.value-green {
  background: var(--tint-green);
}

.value-purple {
  background: var(--tint-purple);
}

.value-yellow {
  background: var(--tint-yellow);
}

/* --- Hai sa ne cunoastem ------------------------------------------- */

.cta {
  padding-top: var(--section-gap);
}

.cta-panel {
  position: relative;
  min-height: 440px;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  align-items: center;
  color: #fff;
}

.cta-panel > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Keeps the white copy legible over a bright photo. */
.cta-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 60%, transparent 100%);
}

.cta-copy {
  position: relative;
  z-index: 1;
  padding: 48px;
  max-width: 533px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.cta-copy h2 {
  color: #fff;
}

/* --- Footer -------------------------------------------------------- */

.site-footer {
  margin-top: var(--section-gap);
  background: var(--tint-green);
  padding: 40px 0 41px;
}

/* Column offsets measured from the design: brand at 0, first link column
   at 544, second at 824, social flush to the right edge. */
.footer-top {
  display: grid;
  grid-template-columns: 544px 280px 1fr auto;
  align-items: start;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 299px;
}

.footer-brand p {
  font-size: 14px;
  line-height: 20px;
}

/* Link columns sit 52px below the top of the logo in the design. */
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding-top: 52px;
}

.footer-links a,
.footer-links .is-pending {
  font-weight: 600;
  font-size: 16px;
  line-height: 18px;
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer-social {
  display: flex;
  gap: 14px;
  justify-self: end;
  align-self: start;
  padding-top: 48px;
}

.footer-social a {
  display: inline-flex;
  border-radius: 4px;
  transition: opacity 0.15s ease;
}

.footer-social a:hover {
  opacity: 0.7;
}

.footer-social img {
  width: 29px;
  height: 29px;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 80px;
  font-size: 12px;
  line-height: 17px;
}

.footer-legal {
  display: flex;
  gap: 24px;
}

.footer-legal a,
.footer-legal .is-pending {
  text-decoration: none;
  line-height: 18px;
}

.footer-legal a:hover {
  text-decoration: underline;
}

/* ===================================================================
   Responsive.

   The designer supplied desktop frames only (1920). Everything below is
   derived, not designed - it preserves the desktop composition and
   reflows it. Flagged so the designer can correct it later.
   =================================================================== */

@media (max-width: 1280px) {
  .hero-title {
    font-size: 52px;
    line-height: 54px;
  }

  /* The squiggle is positioned for the 64px headline, so it stops
     tracking the word once the type scales down. */
  .hero-squiggle {
    display: none;
  }

  .about .container {
    gap: 56px;
    grid-template-columns: 1fr 1fr;
  }

  .values-grid {
    gap: 24px;
  }
}

@media (max-width: 900px) {
  :root {
    --section-gap: 72px;
  }

  .hero {
    min-height: 460px;
  }

  .hero .container {
    padding-top: 80px;
    padding-bottom: 64px;
  }

  .hero-title {
    font-size: 40px;
    line-height: 44px;
  }

  .about .container {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .about-copy {
    padding-top: 0;
  }

  .about-image {
    height: 320px;
  }

  .values-grid {
    grid-template-columns: 1fr;
  }

  .value-card {
    min-height: 0;
    padding: 32px 24px;
  }

  .cta-panel::after {
    background: rgba(0, 0, 0, 0.45);
  }

  .cta-copy {
    padding: 32px;
    max-width: none;
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: 32px;
    justify-items: center;
    text-align: center;
  }

  .footer-brand {
    align-items: center;
  }

  .footer-links {
    align-items: center;
    padding-top: 0;
  }

  .site-footer .footer-social {
    justify-self: center;
    justify-content: center;
    padding-top: 0;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 32px;
  }

  .footer-legal {
    justify-content: center;
    flex-wrap: wrap;
  }
}

@media (max-width: 560px) {
  .hero-title {
    font-size: 32px;
    line-height: 36px;
  }

  h2 {
    font-size: 30px;
    line-height: 34px;
  }

  .offer-card {
    width: 280px;
    height: 400px;
  }

  .offer-card figcaption {
    font-size: 28px;
    line-height: 28px;
  }

  .footer-top {
    grid-template-columns: 1fr;
  }

  .footer-legal {
    flex-direction: column;
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .offer-track {
    scroll-behavior: auto;
  }

  * {
    transition: none !important;
  }
}

/* ===================================================================
   Scoala page - Figma frame "scoala" (node 603:1015)
   =================================================================== */

/* --- Text + image split sections ----------------------------------- */

/* 549 + 107 + 784 = the 1440 content column. fr units keep that ratio
   as the column narrows. */
.split {
  padding-top: var(--section-gap);
}

.split .container {
  display: grid;
  grid-template-columns: 549fr 784fr;
  gap: 107px;
  align-items: center;
}

/* Image first in the source, so it lands on the left. */
.split--image-left .container {
  grid-template-columns: 784fr 549fr;
}

.split-copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.split-lede {
  font-size: 24px;
  line-height: 29px;
  font-weight: 500;
}

/* Figma preserves runs of multiple spaces inside a paragraph, and some of
   them sit right on a wrap boundary - collapsing them costs a whole line.
   pre-wrap keeps them while still wrapping normally. */
.split-body p,
.panel-levels-col p,
.panel-support-body p {
  white-space: pre-wrap;
}

.split-body p + p {
  /* The design separates these with a blank line, which is one 22px line. */
  margin-top: 22px;
}

/* "Povestea locului" and "Renovarea" use single newlines, not blank lines -
   the lines run straight on. Adding paragraph gaps there would push those
   sections past their drawn height. */
.split-body--tight p + p {
  margin-top: 0;
}

.split-body--narrow {
  max-width: 531px;
}

.split-media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
}

/* Full-height photo column, matching the hero. */
.split-media--tall {
  height: 886px;
}


.split-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Figma puts a 784x1046 rectangle inside an 886-tall clipping frame, offset
   70px up. Percentages keep that exact crop as the column narrows:
   1046/886 = 118.06% of the box height, offset 70/886 = 7.9%. */
.split-media--crop img {
  position: absolute;
  top: -7.9%;
  left: 0;
  width: 100%;
  height: 118.06%;
}

/* --- Scoala hero --------------------------------------------------- */

/* Every section's copy is vertically centred against its photo in the new
   design, so .split's default align-items:center is correct throughout. */
.scoala-hero {
  padding-top: 80px;
}

.scoala-hero h1 {
  font-size: 48px;
  line-height: 48px;
}

/* The 40.9% offset came from Figma's STRETCH crop of the ORIGINAL hero photo.
   The replacement (client request, 2026-10-20) is a different shot, so that
   number no longer refers to anything - centred is the sensible default. */
.scoala-hero .split-media img {
  object-position: center;
}

.split--flat .split-media {
  height: 440px;
}

/* Two section gaps the designer drew wider than the standard 120. */
#de-ce {
  padding-top: 126px;
}

#povestea-locului {
  padding-top: 134px;
}

/* --- Ce nivel oferim / Ce va fi diferit ---------------------------- */

.panel-levels {
  margin-top: var(--section-gap);
  background: var(--tint-green);
  border-radius: var(--radius);
  /* 83 left, and the right column stops 241px short of the panel edge,
     exactly as drawn. */
  padding: 80px 0 79px 83px;
  display: grid;
  /* 83 left + 505 + 775 = 1363 of the 1440 panel, as drawn. */
  grid-template-columns: 505px 775px;
}

.panel-levels h2 {
  font-size: 40px;
  line-height: 40px;
}

.panel-levels-col {
  display: flex;
  flex-direction: column;
}

/* The copy is drawn 7px below the label. */
.panel-levels-col {
  padding-top: 7px;
}

.panel-levels-lede {
  font-size: 24px;
  line-height: 29px;
  font-weight: 500;
  /* The ledes are drawn 549 wide while the lists beside them run to 611,
     which is what sets their line breaks. */
  max-width: 549px;
}

.panel-levels-col p + p {
  margin-top: 22px;
}

/* --- Sustine proiectul --------------------------------------------- */

.panel-support {
  /* The old design drew this gap at 60; the new one uses the standard 120
     (green panel ends 4338, grey starts 4458). */
  margin-top: var(--section-gap);
  background: #f9f9f9;
  border-radius: var(--radius);
  padding: 80px 24px;
  text-align: center;
}

.panel-support h2 {
  max-width: 572px;
  margin: 0 auto;
}

.panel-support-lede {
  max-width: 572px;
  margin: 12px auto 0;
  font-size: 24px;
  line-height: 29px;
  font-weight: 500;
}

.panel-support-body {
  max-width: 499px;
  margin: 12px auto 0;
}

.panel-support-body p + p {
  margin-top: 22px;
}

/* Numbered steps stay centred like the surrounding copy, so the markers
   sit inside the text flow rather than hanging in the left margin. */
.support-steps {
  max-width: 499px;
  margin: 22px auto 0;
  padding: 0;
  list-style-position: inside;
  display: flex;
  flex-direction: column;
  /* The design separates these with blank lines, which is a full 22px line. */
  gap: 22px;
}

.support-steps + .panel-support-body {
  margin-top: 22px;
}

.button-purple {
  background: var(--purple);
  color: #fff;
  font-weight: 700;
  border-radius: 50px;
  width: 598px;
  max-width: 100%;
  justify-content: center;
  height: 66px;
  margin-top: 60px;
}

.button-purple:hover {
  filter: brightness(0.92);
}

/* --- Compact footer ------------------------------------------------ */

.site-footer--compact {
  margin-top: var(--section-gap);
  background: transparent;
  padding: 0 0 44px;
}

.site-footer--compact .container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
}

.footer-logo {
  width: 132px;
  height: 89px;
  /* The social icons sit flush with the top of the footer block; the logo
     is drawn 5px lower. */
  margin-top: 5px;
}

.footer-contact {
  font-size: 14px;
  line-height: 18px;
  color: #000;
}

.site-footer--compact .footer-social {
  padding-top: 0;
  margin-bottom: 13px;
  /* The base rule sets justify-self:end for the home footer's grid. Chromium
     honours justify-self in block layout too, which pushed the icons to the
     right edge here. Align them with the phone number instead. */
  justify-self: start;
}

.footer-phones {
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  color: var(--green);
}

.footer-phones a,
.footer-email a {
  text-decoration: none;
}

.footer-phones a:hover,
.footer-email a:hover {
  text-decoration: underline;
}

.footer-email {
  margin-top: 18px;
}

.site-footer--compact address {
  font-style: normal;
  margin-top: 18px;
}

/* --- Scoala responsive --------------------------------------------- */

@media (max-width: 1280px) {
  .split .container {
    gap: 56px;
  }

  .scoala-hero .split-copy {
    padding-top: 120px;
  }

  .scoala-hero .split-media {
    height: 640px;
  }

  .panel-levels {
    padding: 64px 48px;
    grid-template-columns: 340px 1fr;
    column-gap: 40px;
  }
}

@media (max-width: 900px) {
  /* The design's hard break in the lede is right at 549px wide, but at
     phone width it strands a word on its own line. Let the text flow. */
  .split-lede br {
    display: none;
  }

  .split .container,
  .split--image-left .container {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Keep the photo under the copy on every split, including the ones
     drawn image-first. */
  .split--image-left .split-media {
    order: 2;
  }

  .scoala-hero .split-copy,
  .scoala-hero .split-media {
    padding-top: 0;
  }

  /* 126px and 134px are Figma's DESKTOP gaps. Left unscoped they also apply
     on phones, where every other section uses --section-gap (72px), so these
     two titles sat noticeably lower than the rest. */
  #de-ce,
  #povestea-locului {
    padding-top: var(--section-gap);
  }

  /* All four photos share one height on phones. Without the --tall override
     the "De ce o școală?" and "Povestea locului" images keep their 886px
     desktop height, which at ~358px wide is a 1:2.5 box - cover-fit then
     throws away about 70% of the width. 360px is roughly square at phone
     width, matching the hero and Renovarea. */
  .scoala-hero .split-media,
  .split--flat .split-media,
  .split-media--tall {
    height: 360px;
  }

  /* Figma's 70px crop offset is calibrated to the 886px box. At 360px it only
     deepens the side cropping, so fall back to a plain centred cover fit. */
  .split-media--crop img {
    position: static;
    top: auto;
    height: 100%;
  }

  .scoala-hero h1 {
    font-size: 36px;
    line-height: 40px;
  }

  .panel-levels {
    grid-template-columns: 1fr;
    row-gap: 24px;
    padding: 40px 24px;
  }

  .panel-support {
    padding: 48px 24px;
  }

  .panel-support h2 {
    font-size: 30px;
    line-height: 34px;
  }

  .site-footer--compact .container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
  }

  /* justify-self is what positions this row in block layout (see the
     desktop note above), so it has to be re-pointed, not just the
     flex justification. */
  .site-footer--compact .footer-social {
    justify-self: center;
    justify-content: center;
  }

  .site-footer--compact address {
    text-align: center;
  }
}

/* ===================================================================
   Navigation at narrow widths.

   Derived, not designed - the Figma file has desktop frames only. The
   horizontal nav is measured to overflow at 1024 on the home page, so the
   hamburger takes over below that and the links become a disclosure panel.
   =================================================================== */

@media (max-width: 1279px) {
  /* Relieve the squeeze before switching to the hamburger. */
  .site-header .container,
  .main-nav {
    gap: 20px;
  }
}

@media (max-width: 1023px) {
  .nav-toggle {
    display: inline-flex;
  }

  /* The overlay header stops floating over the photo: white-on-photo is
     unreadable at this size, and the panel needs something to anchor to. */
  .site-header--overlay {
    inset: auto;
    background: var(--ink);
  }

  .site-header {
    position: relative;
    padding: 16px 0;
  }

  .brand-logo {
    width: 100px;
    height: 67px;
  }

  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 8px 4vw 20px;
  }

  .main-nav.is-open {
    display: flex;
  }

  .site-header--solid .main-nav {
    background: #fff;
    box-shadow: 0 14px 28px rgba(22, 12, 67, 0.14);
  }

  .site-header--overlay .main-nav {
    background: var(--ink);
  }

  /* Generous tap targets. The CTA is excluded - it keeps its pill padding. */
  .main-nav a:not(.button),
  .main-nav .is-pending:not(.button) {
    padding: 14px 0;
    font-size: 17px;
    line-height: 24px;
  }

  .site-header--solid .main-nav a:not(.button),
  .site-header--solid .main-nav .is-pending:not(.button) {
    border-bottom: 1px solid rgba(22, 12, 67, 0.1);
  }

  .site-header--overlay .main-nav a:not(.button),
  .site-header--overlay .main-nav .is-pending:not(.button) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  }

  .main-nav .button {
    margin-top: 16px;
    align-self: flex-start;
  }
}

/* ===================================================================
   Donate button.

   Not in the Figma file - requested by the client after the design was
   delivered. Built from the existing design system (yellow primary CTA,
   40px radius) rather than inventing a new visual language.
   =================================================================== */

/* The two support routes sit side by side: the contract is for companies,
   the donate button is for individuals. */
/* Stacked, not side by side: the contract button keeps the exact centred
   position and 598px width it has in Figma, and the two audiences
   (companies above, individuals below) read as separate. */
.support-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: 40px;
}

.support-actions .button-purple {
  margin-top: 0;
}

.support-note {
  flex-basis: 100%;
  font-size: 14px;
  line-height: 20px;
  opacity: 0.7;
}

/* Floating button. Bottom-right rather than bottom-left so it never sits
   under a phone's back gesture area. */
.donate-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 50;
}

.donate-float .button {
  box-shadow: 0 10px 28px rgba(22, 12, 67, 0.25);
  padding: 16px 28px;
}

/* It is inert until the Stripe link exists, so make that visible rather
   than shipping a button that silently does nothing. */
.donate-float .is-pending,
.support-actions .is-pending {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (max-width: 900px) {
  .support-actions {
    margin-top: 40px;
  }

  .donate-float {
    right: 16px;
    bottom: 16px;
  }

  .donate-float .button {
    padding: 14px 22px;
    font-size: 15px;
  }
}