/* ===================================================================
   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;
}

/* The browser default (16px above and below, 40px either side) spaced the
   "Ce oferim" cards 92px apart instead of 12 - scroll-snap hid the offset of
   the first card, so it went unnoticed. */
figure {
  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 ------------------------------------------------------- */

/* Figma: 16/24 padding with the outline stroke drawn INSIDE, so the button
   is 50px tall. The 1px border here sits outside the padding, hence 15/23. */
.button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 23px;
  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 header is drawn on a wider column (1600 at 160) than the page content,
   on every page frame. Scoala's frame drew its own bar on the 1440 column;
   that bar now lives in .sub-nav-row below and keeps the 1440 column. */
.site-header .header-row {
  width: min(1600px, 92%);
}

/* --- Scoala's in-page anchor bar, under the main navigation -------- */

/* Derived placement (client request, 2026-11-02): the Figma frame draws these
   anchors in place of the site navigation. Same type, spacing and button as
   that bar, right-aligned where its items already sat. */
.sub-nav-row {
  justify-content: flex-end;
  margin-top: 24px;
}

.sub-nav {
  display: flex;
  align-items: center;
  gap: 40px;
}

.sub-nav a:not(.button) {
  font-weight: 600;
  font-size: 16px;
  line-height: 18px;
  text-decoration: none;
  color: var(--ink);
}

.sub-nav a:not(.button):hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

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

/* Figma draws the nav row 6.5px below the logo's centre line (centre 79 vs
   72.5), so it is nudged down rather than centred on the logo. */
.main-nav {
  margin-left: auto;
  margin-top: 13px;
  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;
}

/* Links only: the Contact button keeps its own ink on yellow, as drawn on
   every page including home. */
.site-header--overlay .main-nav a:not(.button),
.site-header--overlay .main-nav .is-pending {
  color: #fff;
}

.site-header--solid .main-nav a:not(.button),
.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 ---------------------------------------------------------- */

/* Figma's own crop of the hero photo, plus the navy fade it lays over the top
   35% so the white navigation reads against the sky. The file name changed
   when the crop was applied, which also busts the cache: a CSS url() cannot
   go through the PHP asset() helper. */
.hero {
  position: relative;
  min-height: 758px;
  display: flex;
  align-items: flex-start;
  background-image: linear-gradient(to bottom, rgba(1, 27, 83, 0.5) 0%, rgba(1, 27, 83, 0) 35%), url("../home-hero-crop.jpg");
  background-image: linear-gradient(to bottom, rgba(1, 27, 83, 0.5) 0%, rgba(1, 27, 83, 0) 35%),
    image-set(url("../home-hero-crop.webp") type("image/webp"), url("../home-hero-crop.jpg") type("image/jpeg"));
  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;
}

/* Outlined 40px circles, 20 apart (Group 900 in Figma). Shared by every card
   row; the drawing itself is the exported SVG. */
.carousel-arrows {
  display: flex;
  gap: 20px;
}

.carousel-arrows button {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: none;
  padding: 0;
  cursor: pointer;
}

.carousel-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;
  /* Room for the focus outline inside the scroller, cancelled outside it so
     the next section keeps its 120px gap. */
  padding-bottom: 4px;
  margin-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;
}

/* Title 444px down the 540 card, its underline 3px under it. */
.offer-card figcaption {
  position: absolute;
  z-index: 1;
  left: 24px;
  bottom: 37px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 36px;
  line-height: 36px;
  letter-spacing: -0.03em;
}

/* 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;
}

/* Each word has its own hand-drawn underline, at its drawn size. */
.offer-card .squiggle {
  display: block;
  width: auto;
  height: auto;
  margin-top: 3px;
}

/* --- Photo cards (shared) ------------------------------------------ */

/* A photo with Figma's black fade, 60% at full strength, rising from the
   bottom. Where the fade starts and ends varies by card group (and, on the
   home row, by card), so both ends are custom properties. */
.photo-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  color: #fff;
  --shade-from: 51.9%;
  --shade-to: 89.6%;
}

.photo-card > picture,
.photo-card > picture img {
  display: block;
  width: 100%;
  height: 100%;
}

.photo-card > picture img {
  object-fit: cover;
}

.photo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) var(--shade-from), rgba(0, 0, 0, 0.6) var(--shade-to));
}

.offer-card {
  --shade-from: 36.9%;
}

/* --- 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;
}

/* Icon 40px from the top, title 24 under it, text 4 under the title. Each
   card's text box has its own width in Figma, which sets its line breaks. */
.value-card {
  border-radius: var(--radius);
  min-height: 376px;
  padding: 40px 32px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #000;
}

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

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

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

.value-green p {
  max-width: 258px;
}

/* Drawn as a fixed 275px box with a tighter 28.8 line height. */
.value-purple h3 {
  max-width: 275px;
  line-height: 28.8px;
  margin-top: 4px;
}

.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: flex-start;
  color: #fff;
}

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

/* Figma lays a flat 20% black over the home photo. */
.cta-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
}

/* Copy 86px in from the 1440 column (x=326) and 114px from the top - Figma
   does not centre it - heading-to-text 14, text-to-button 30, as drawn. */
.cta-copy {
  position: relative;
  z-index: 1;
  padding: 114px 48px 48px 86px;
  max-width: calc(533px + 134px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.cta-copy .button {
  margin-top: 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,
.page-hero {
  padding-top: 80px;
}

.scoala-hero h1,
.page-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,
  .page-hero .split-copy {
    padding-top: 120px;
  }

  .scoala-hero .split-media,
  .page-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,
  .page-hero .split-copy,
  .page-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,
  .page-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,
  .page-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,
  .sub-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;
  }

  /* The anchor bar stays out of the hamburger: it is page navigation, and
     hiding it behind the site menu would bury it. It becomes one scrollable
     row instead. Vertical padding keeps focus outlines inside the scroller. */
  .sub-nav-row {
    justify-content: flex-start;
    margin-top: 8px;
  }

  .sub-nav {
    gap: 24px;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
    padding: 8px 6px;
    margin-inline: -6px;
  }

  .sub-nav::-webkit-scrollbar {
    display: none;
  }

  .sub-nav .button {
    flex: none;
  }
}

/* ===================================================================
   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;
  }
}

/* ===================================================================
   Site pages - concept, grădiniță, vacanțe, evenimente, comunitate,
   blog, article, contact (Figma file SP6rs7wEKZhPwKAzdxvHF0, 2026-10-27).
   They reuse the scoala split sections (.split, .split-copy, ...) and the
   home card row (.offer-scroller, .offer-track); what follows is only what
   those pages add.
   =================================================================== */

:root {
  --tint-grey: #f9f9f9;
}

/* Text box widths. Figma's text boxes are fixed-width and their width sets
   the line breaks, so each is reproduced exactly. */
.mw-479 { max-width: 479px; }
.mw-501 { max-width: 501px; }
.mw-505 { max-width: 505px; }
.mw-512 { max-width: 512px; }
.mw-531 { max-width: 531px; }

.title-48 {
  font-size: 48px;
  line-height: 48px;
}

/* A lede of two paragraphs: Figma separates them with one blank line. */
.split-lede p + p {
  margin-top: 29px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Heading on the left, arrows on the right, 40px above the row. The arrows
   are drawn 4px lower than the heading. */
.row-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 40px;
}

.row-head .carousel-arrows {
  position: relative;
  top: 4px;
}

/* --- Concept cards (concept educațional) ---------------------------- */

.concept-track {
  gap: 40px;
}

/* 1048x548, icon 110px in and vertically centred, copy column 524px in. */
.concept-card {
  flex: none;
  width: 1048px;
  min-height: 548px;
  border-radius: var(--radius);
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  gap: 114px;
  padding: 40px 48px 40px 110px;
}

.concept-card > img {
  flex: none;
  width: 300px;
  height: 300px;
}

.concept-card-copy {
  width: 450px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.concept-card h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 32px;
  line-height: 32px;
}

/* The third card's title is drawn at 36px, and its text in black rather
   than ink - reproduced as drawn (TODO.md). */
.concept-card--large-title h3 {
  font-size: 36px;
  line-height: 36px;
}

.concept-card--large-title .split-body {
  color: #000;
}

.tint-green { background: var(--tint-green); }
.tint-purple { background: var(--tint-purple); }
.tint-yellow { background: var(--tint-yellow); }
.tint-blue { background: var(--tint-blue); }
.tint-grey { background: var(--tint-grey); }

/* --- Rows panel (concept "Principiile", grădiniță "Curriculum") ------ */

.panel-rows {
  margin-top: var(--section-gap);
  background: var(--tint-grey);
  border-radius: var(--radius);
  padding: 79px 83px;
}

.panel-rows > h2 {
  margin-bottom: 60px;
}

/* Title column 384, text from 505 in. */
.panel-row {
  display: grid;
  grid-template-columns: 384px minmax(0, 772px);
  column-gap: 121px;
  align-items: start;
}

.panel-row + .panel-row {
  margin-top: 40px;
}

.panel-row h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 24px;
  line-height: 29px;
}

/* --- Centred tinted CTA (concept) ------------------------------------- */

.cta-tint {
  margin-top: var(--section-gap);
  border-radius: var(--radius);
  min-height: 320px;
  padding: 60px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cta-tint p {
  max-width: 533px;
  margin-top: 14px;
}

.cta-tint .button {
  margin-top: 30px;
}

/* --- Full-bleed tinted bands (vacanțe, evenimente, grădiniță) -------- */

/* 80px inside top and bottom; consecutive bands sit edge to edge. */
.band {
  margin-top: var(--section-gap);
  padding: 80px 0;
}

.band + .band {
  margin-top: 0;
}

/* Title and lede on the left (549), body on the right starting 952px in.
   That body column runs 17px past the 1440 content column in Figma
   (x 1192, 505 wide), hence the negative margin. */
.band-intro {
  display: grid;
  grid-template-columns: minmax(0, 549px) minmax(0, 505px);
  justify-content: space-between;
  align-items: start;
  margin-right: -17px;
}

/* A button under the lede sits 40px below it. */
.band-intro .split-copy > .button {
  align-self: flex-start;
  margin-top: 28px;
}

/* Inert: Figma gives this button no destination (TODO.md). */
.button.is-inert {
  cursor: default;
}

/* Intro, then gallery or cards 40px below it. */
.band > * + * {
  margin-top: 40px;
}

/* --- Photo gallery (Figma "Group 894") -------------------------------- */

/* Full width: the middle photo 1195 wide, the neighbouring photos 339 wide
   at both edges, 24 apart, the peeks darkened by 40% black and rounded only
   on their inner side. Proportional, so it holds below 1920. */
.stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 3.525fr 1fr;
  column-gap: 24px;
}

.stage-slide {
  grid-row: 1;
  display: none;
  position: relative;
  overflow: hidden;
}

.stage-slide picture,
.stage-slide img {
  display: block;
  width: 100%;
  height: 100%;
}

.stage-slide img {
  object-fit: cover;
}

.stage-slide.is-prev,
.stage-slide.is-current,
.stage-slide.is-next {
  display: block;
}

.stage-slide.is-prev {
  grid-column: 1;
  border-radius: 0 var(--radius) var(--radius) 0;
}

.stage-slide.is-current {
  grid-column: 2;
  border-radius: var(--radius);
  aspect-ratio: 1195 / 796;
}

.stage-slide.is-next {
  grid-column: 3;
  border-radius: var(--radius) 0 0 var(--radius);
}

.stage-slide.is-prev::after,
.stage-slide.is-next::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

/* White 70% discs, centred vertically, 80px in from the left edge and 88px
   from the right as drawn. */
.stage-arrow {
  position: absolute;
  z-index: 1;
  top: 50%;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

.stage-arrow--prev {
  left: 80px;
}

.stage-arrow--next {
  right: 88px;
}

/* --- Photo card rows (vacanțe) ------------------------------------------ */

.card-row {
  display: grid;
  gap: 15px;
}

.card-row--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Four 356px cards, 11 apart: 1458 wide, past the 1440 column like the band
   body above it. */
.card-row--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px;
  margin-right: -18px;
}

.card-row .photo-card {
  height: 540px;
}

.photo-card figcaption {
  position: absolute;
  z-index: 1;
  left: 37px;
  right: 24px;
  bottom: 36px;
}

.photo-card-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 36px;
  line-height: 36px;
  letter-spacing: -0.03em;
}

/* Title with a short text under it: a shorter fade, copy 28px in and 18px
   from the bottom. */
.photo-card--text {
  --shade-to: 76.6%;
}

.photo-card--text figcaption {
  left: 28px;
  bottom: 18px;
}

.photo-card--text .photo-card-title {
  margin-bottom: 4px;
}

.photo-card--text p {
  max-width: 378px;
  font-size: 14px;
  line-height: 20px;
}

/* --- CTA panel variants ------------------------------------------------- */

/* Vacanțe, evenimente: a black fade from the left (50% at the edge, gone by
   64%), narrower copy, heading-to-text 13 and text-to-button 20. */
.cta-panel--fade::after {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 64.2%);
}

.cta-panel--fade .cta-copy {
  max-width: calc(398px + 134px);
  gap: 13px;
}

.cta-panel--fade .cta-copy .button {
  margin-top: 7px;
}

/* --- Grădiniță: groups ---------------------------------------------- */

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

/* Figma starts the cards 16px left of the content column (x=224) and
   centres the heading over the cards, not the page, so both move together.
   The text box sits left-aligned under the heading, its text centred. */
.groups-inner {
  margin-left: -16px;
}

.groups-head {
  max-width: 549px;
  margin: 0 auto 40px;
  text-align: center;
}

.groups-head p {
  max-width: 505px;
  margin-top: 12px;
}

/* 2x2 cards of 716x399, 24 apart. */
.groups-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.group-card {
  min-height: 399px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 53px;
  padding: 40px 31px 40px 73px;
}

.group-card > img {
  flex: none;
  width: 200px;
  height: 200px;
}

.group-card-copy {
  max-width: 359px;
}

.group-card h3 {
  font-size: 36px;
  line-height: 36px;
}

.group-age {
  margin-top: 2px;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
}

.group-desc {
  max-width: 341px;
  margin-top: 12px;
  font-size: 14px;
  line-height: 20px;
}

.group-team {
  margin-top: 12px;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
}

.text-green { color: var(--green); }
.text-blue { color: var(--blue); }
.text-yellow { color: var(--yellow); }
.text-purple { color: var(--purple); }

/* "O zi obișnuită" rows sit 60 apart, not the usual 120. */
.split--close {
  padding-top: 60px;
}

/* Grădiniță's curriculum panel ends with a note, 60 under the rows, and
   only 55 above the panel's bottom edge. */
.panel-rows--note {
  padding-bottom: 55px;
}

.panel-rows-note {
  max-width: 505px;
  margin-top: 60px;
}

/* --- Grădiniță: team ---------------------------------------------- */

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

.team .split-copy {
  max-width: 549px;
}

/* Four 386x540 portraits per row, 12 apart: 1580 wide, so the grid runs
   140px past the content column on the right, as drawn. Below 1870 that
   would run off the screen, so it fits the column instead. */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 60px;
}

@media (min-width: 1870px) {
  .team-grid {
    width: 1580px;
  }
}

.team-card {
  height: 540px;
}

/* Name 444px down, its underline 6px under it and 5px further left. */
.team-card figcaption {
  position: absolute;
  z-index: 1;
  left: 24px;
  bottom: 60px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 36px;
  line-height: 36px;
  letter-spacing: -0.03em;
}

/* Six of the lines sit a little off that in Figma; those cards pass their
   own offsets (gradinita.php). */
.team-card .squiggle {
  position: absolute;
  left: var(--line-x, -5px);
  top: calc(100% + var(--line-y, 6px));
  max-width: none;
}

/* --- Grădiniță: "Ce pregătești de acasă" ---------------------------- */

/* Copy on the left; the pink panel starts 52px after it and runs off the
   right edge of the page, so only its left corners are rounded. The
   container reaches the viewport's right edge for that. */
.prep {
  margin-top: var(--section-gap);
}

.prep .container {
  width: auto;
  margin-left: max(4vw, calc(50vw - 720px));
  margin-right: 0;
  display: grid;
  grid-template-columns: minmax(0, 549px) minmax(0, 1fr);
  column-gap: 52px;
  align-items: center;
}

.prep-panel {
  min-height: 397px;
  border-radius: var(--radius) 0 0 var(--radius);
  padding: 80px 76px 79px;
}

.prep-panel-top {
  display: grid;
  grid-template-columns: 241px minmax(0, 443px);
  column-gap: 72px;
  align-items: start;
}

.prep-panel h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 24px;
  line-height: 29px;
}

.prep-panel ul {
  margin: 0;
  padding-left: 24px;
}

.prep-panel-note {
  max-width: 757px;
  margin-top: 40px;
}

/* --- Closing grey band (grădiniță, comunitate) ---------------------- */

/* Centred heading, text and button, then a photo panel 40 below, the band
   running straight into the footer. */
.cta-band {
  margin-top: var(--section-gap);
  padding: 80px 0;
  text-align: center;
}

.prep + .cta-band {
  margin-top: 130px;
}

.cta-band p {
  max-width: 533px;
  margin: 14px auto 0;
}

.cta-band .button {
  margin-top: 30px;
}

.cta-photo {
  margin-top: 40px;
  height: 440px;
  border-radius: var(--radius);
  overflow: hidden;
}

.cta-photo picture,
.cta-photo img {
  display: block;
  width: 100%;
  height: 100%;
}

.cta-photo img {
  object-fit: cover;
}

.site-footer--flush {
  margin-top: 0;
}

/* --- Comunitate ------------------------------------------------------ */

/* "Servicii educaționale" is drawn 12px below centre against its photo. */
@media (min-width: 901px) {
  .split-copy--low {
    position: relative;
    top: 12px;
  }
}

/* Accordion (Figma "FAQs Item desktop"): native <details>, so it opens and
   closes without JavaScript and with the keyboard. 40px inside a 1px grey
   outline, 20px radius, 20 apart; the open item is filled white. */
.accordion {
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.accordion-item {
  border: 1px solid #d3d5d6;
  border-radius: 20px;
  padding: 39px;
}

.accordion-item[open] {
  background: #fff;
}

.accordion-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 24px;
  line-height: 30px;
  color: #000;
}

.accordion-item summary::-webkit-details-marker {
  display: none;
}

/* Open questions are drawn in ink, closed ones in black. */
.accordion-item[open] summary {
  color: var(--ink);
}

.accordion-item summary:focus-visible {
  outline: 3px solid var(--purple);
  outline-offset: 6px;
  border-radius: 4px;
}

.accordion-icon {
  flex: none;
  width: 24px;
  height: 24px;
}

.accordion-item .accordion-icon--collapse,
.accordion-item[open] .accordion-icon--expand {
  display: none;
}

.accordion-item[open] .accordion-icon--collapse {
  display: block;
}

.accordion-answer {
  max-width: 740px;
  margin-top: 24px;
  font-size: 20px;
  line-height: 30px;
}

.accordion-answer:empty {
  margin-top: 0;
}

.accordion-answer p + p {
  margin-top: 30px;
}

/* --- Blog listing ------------------------------------------------------ */

/* Centred title 120px under the header, cards 120px under it. */
.page-title {
  padding-top: var(--section-gap);
  text-align: center;
}

.page-title h1 {
  font-size: 48px;
  line-height: 48px;
}

.page-title p {
  max-width: 549px;
  margin: 21px auto 0;
}

.blog-grid {
  margin-top: var(--section-gap);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 15px;
  row-gap: 14px;
}

.blog-card {
  height: 541px;
  --shade-to: 76.6%;
}

/* Title 27px in, 31px from the bottom, wrapping at 421. */
.blog-card figcaption {
  left: 27px;
  right: 22px;
  bottom: 31px;
  font-weight: 600;
  font-size: 32px;
  line-height: 35.2px;
  letter-spacing: -0.03em;
}

/* --- Article (Figma "blog–2") --------------------------------------- */

.article {
  padding-top: 80px;
}

.article-hero {
  height: 541px;
  border-radius: var(--radius);
  overflow: hidden;
}

.article-hero picture,
.article-hero img {
  display: block;
  width: 100%;
  height: 100%;
}

.article-hero img {
  object-fit: cover;
}

.article-head {
  margin-top: 81px;
}

.article-head h1 {
  font-size: 48px;
  line-height: 57.6px;
}

.article-lede {
  margin-top: 12px;
  font-weight: 500;
  font-size: 24px;
  line-height: 33.6px;
}

.article-section {
  margin-top: 40px;
}

.article-section h2 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 32px;
  line-height: 35.2px;
  margin-bottom: 10px;
}

.article-section > p + p,
.article-section > p + ul {
  margin-top: 22px;
}

.article-section ul {
  margin-bottom: 0;
  padding-left: 24px;
}

/* Pink panel 80 under the text, copy 80px in and 58 from the top; the
   footer follows 80 below rather than the usual 120. */
.article-cta {
  margin-top: 80px;
  margin-bottom: -40px;
  min-height: 375px;
  border-radius: var(--radius);
  padding: 58px 80px 57px;
}

.article-cta p {
  max-width: 1005px;
  font-weight: 500;
  font-size: 24px;
  line-height: 33.6px;
}

.article-cta p + p {
  margin-top: 33.6px;
}

.article-cta .button {
  margin-top: 40px;
}

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

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

/* --- Site pages responsive (derived - no mobile frames exist) -------- */

@media (max-width: 1280px) {
  .concept-card {
    width: min(1048px, 88vw);
    gap: 48px;
    padding-left: 64px;
  }

  .concept-card > img {
    width: 220px;
    height: 220px;
  }

  .panel-row {
    grid-template-columns: 300px minmax(0, 1fr);
    column-gap: 48px;
  }

  .groups-inner {
    margin-left: 0;
  }

  .group-card {
    gap: 32px;
    padding-left: 40px;
  }

  .group-card > img {
    width: 140px;
    height: 140px;
  }

  .team-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .prep-panel-top {
    grid-template-columns: 1fr;
    row-gap: 16px;
  }

  .prep-panel {
    padding: 56px 48px;
  }
}

@media (max-width: 900px) {
  .concept-card {
    width: 82vw;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 32px 24px;
  }

  .concept-card > img {
    width: 140px;
    height: 140px;
  }

  .concept-card-copy {
    width: auto;
  }

  .concept-card h3,
  .concept-card--large-title h3 {
    font-size: 26px;
    line-height: 28px;
  }

  .panel-rows {
    padding: 40px 24px;
  }

  .panel-rows > h2 {
    margin-bottom: 32px;
  }

  .panel-row {
    grid-template-columns: 1fr;
    row-gap: 8px;
  }

  .panel-row + .panel-row {
    margin-top: 28px;
  }

  .cta-tint {
    padding: 48px 24px;
  }

  .title-48 {
    font-size: 36px;
    line-height: 40px;
  }

  .band {
    padding: 56px 0;
  }

  .band-intro {
    grid-template-columns: 1fr;
    row-gap: 16px;
    margin-right: 0;
  }

  .band > * + * {
    margin-top: 32px;
  }

  /* One photo, full content width; the peeks would be slivers. */
  .stage {
    grid-template-columns: 1fr;
    width: 92%;
    margin-inline: auto;
  }

  .stage-slide.is-prev,
  .stage-slide.is-next {
    display: none;
  }

  .stage-slide.is-current {
    grid-column: 1;
  }

  .stage-arrow--prev {
    left: 12px;
  }

  .stage-arrow--next {
    right: 12px;
  }

  .card-row--3,
  .card-row--4 {
    grid-template-columns: 1fr;
    margin-right: 0;
  }

  .card-row .photo-card {
    height: 440px;
  }

  .photo-card figcaption {
    left: 24px;
  }

  .photo-card-title {
    font-size: 30px;
    line-height: 32px;
  }

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

  .group-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 32px 24px;
  }

  .group-card > img {
    width: 120px;
    height: 120px;
  }

  .group-card h3 {
    font-size: 30px;
    line-height: 32px;
  }

  .split--close {
    padding-top: 40px;
  }

  .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 32px;
  }

  .team-card {
    height: 280px;
  }

  .team-card figcaption {
    left: 16px;
    right: 12px;
    bottom: 40px;
    font-size: 22px;
    line-height: 24px;
  }

  .team-card .squiggle {
    width: 70%;
    height: auto;
    left: -3px;
    top: calc(100% + 4px);
  }

  .prep .container {
    width: 92%;
    margin-inline: auto;
    grid-template-columns: 1fr;
    row-gap: 32px;
  }

  .prep-panel {
    border-radius: var(--radius);
    padding: 40px 24px;
  }

  .cta-band {
    padding: 56px 0;
  }

  .prep + .cta-band {
    margin-top: var(--section-gap);
  }

  .cta-photo {
    height: 260px;
  }

  .accordion {
    margin-top: 40px;
  }

  .accordion-item {
    padding: 23px;
  }

  .accordion-item summary {
    font-size: 20px;
    line-height: 26px;
  }

  .accordion-answer {
    font-size: 17px;
    line-height: 26px;
  }

  .accordion-answer p + p {
    margin-top: 20px;
  }

  .page-title h1,
  .article-head h1 {
    font-size: 36px;
    line-height: 42px;
  }

  .blog-grid {
    grid-template-columns: 1fr;
    margin-top: 48px;
  }

  .blog-card {
    height: 420px;
  }

  .blog-card figcaption {
    left: 24px;
    font-size: 26px;
    line-height: 30px;
  }

  .article {
    padding-top: 32px;
  }

  .article-hero {
    height: 260px;
  }

  .article-head {
    margin-top: 40px;
  }

  .article-lede,
  .article-cta p {
    font-size: 20px;
    line-height: 29px;
  }

  .article-section h2 {
    font-size: 26px;
    line-height: 30px;
  }

  .article-cta {
    margin-top: 56px;
    padding: 40px 24px;
    min-height: 0;
  }
}

@media (min-width: 901px) and (max-width: 1280px) {
  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 901px) and (max-width: 1280px) {
  .card-row--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-right: 0;
  }

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