/* =========================================================================
   Juniors Book Publishing — homepage

   The design is a fixed 1920 x 8160 artboard. To reproduce it exactly while
   still behaving like a website, the root font size is tied to the viewport
   (1rem = viewport / 120), so 1rem = 16px at 1920px wide and every measurement
   below — expressed as design-px / 16 — scales proportionally. Below 1200px
   the layout switches to a normal responsive flow.
   ========================================================================= */

:root {
  --navy:        #144068;
  --navy-deep:   #044e8d;   /* footer background */
  --yellow:      #ffd166;
  --yellow-soft: #f4c863;
  --yellow-bar:  #f7ca64;
  --sky:         #8ad0fc;
  --pale:        #e3f6fe;
  --pink:        #ffd2ee;
  --purple:      #e7c6fa;
  --coral:       #ec6b4e;
  --cream:       #fffaef;
  --page:        #fffefb;
  --ink:         #242424;

  --font-body:    'Baloo 2', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-ui:      'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-contact: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --shadow-card: 0.625rem 0.25rem 2.5rem rgba(0, 0, 0, 0.16);
  --shadow-soft: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.25);
}

/* ─────────────────────────── Reset / base ─────────────────────────── */

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;      /* clears the condensed fixed header */
  overflow-x: hidden;
  overflow-x: clip;
}

/* Proportional scaling of the whole artboard between 1440px and 1920px. Below
   1440 the scale would push body copy under ~13px, so the layout reflows
   instead (see the responsive section). */
@media (min-width: 1440px) and (max-width: 1919.98px) {
  html { font-size: calc(100vw / 120); }
}

body {
  margin: 0;
  background: var(--page);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.5;
  overflow-x: hidden;
  overflow-x: clip;
}

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

/* Inline SVG presentation lives here rather than on the elements themselves.
   Line icons: carousel chevrons, FAQ chevrons. Solid icons: social marks.
   (Genre pills use raster icons, so they are not listed here.) */
.carousel__chevron,
.faq-item__chevron {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.carousel__chevron { stroke-width: 2.5; }
.faq-item__chevron { stroke-width: 2.6; }
.social__icon      { fill: currentColor; }
h1, h2, h3, p, blockquote, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; border-radius: 4px; }

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

.skip-link {
  position: absolute; left: 50%; top: -100px; transform: translateX(-50%);
  z-index: 999; padding: 12px 22px; background: var(--yellow);
  color: var(--ink); border-radius: 0 0 12px 12px; font-weight: 500; transition: top 0.2s;
}
.skip-link:focus { top: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;   /* stops the marquee rather than strobing it */
    transition-duration: 0.01ms !important;
  }
}

/* The 1920px artboard column. */
.canvas {
  position: relative;
  width: 120rem;
  height: 100%;
  margin-inline: auto;
}

main > section { position: relative; overflow: hidden; }

/* Wave dividers sit at the top of the section they introduce. */
.wave {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 120rem;
  max-width: none;   /* waves may be wider than the artboard; the section clips them */
  z-index: 2;
  pointer-events: none;
}

/* Decorative artwork (paper planes, clouds). */
.deco { position: absolute; z-index: 1; pointer-events: none; user-select: none; }
/* Over the sky bands the design uses a soft white cloud, not a flat silhouette:
   the Figma clip path masks a white→sky gradient, with a second masked copy
   offset behind it for the hard blue edge (5 × 3 design px, and itself a
   gradient — lighter beside the dome, navy along the bottom). */
/* z-index 3 puts the clouds above the wave dividers (z-index 2), as the design
   has them — the why and ages clouds overlap their section's wave. */
.deco--cloud {
  z-index: 3;
  width: 12.1146rem;                       /* 193.834 — the mask's own size */
  aspect-ratio: 193.834 / 110.068;
}
.deco--cloud::before,
.deco--cloud::after {
  content: '';
  position: absolute;
  inset: 0;
  -webkit-mask: url('../img/services/cloud-mask.svg') 0 0 / 100% 100% no-repeat;
          mask: url('../img/services/cloud-mask.svg') 0 0 / 100% 100% no-repeat;
}
.deco--cloud::before {
  transform: translate(2.58%, 2.73%);
  background: linear-gradient(180deg, #3d8bde, #015cae);
}
.deco--cloud::after { background: linear-gradient(180deg, #fff 5%, #77dbfb 97%); }

/* No opacity here: each ghost SVG already carries the design's own value
   (0.07 / 0.09), and a second one on top multiplies them away to ~1%. */
.deco--cloud-ghost { z-index: 3; width: 13.125rem; }

/* ─────────────────────────── Shared type ─────────────────────────── */

.eyebrow {
  font-weight: 500;
  font-size: 1.75rem;            /* 28 */
  line-height: 1;
  text-transform: uppercase;
  color: var(--navy);
}
.eyebrow--light { color: #fff; }
.eyebrow--center { text-align: center; }
/* The About page's "Who We are" sets its eyebrow in sentence case. */
.eyebrow--sentence { text-transform: none; }

.section-title {
  font-weight: 700;
  font-size: 3rem;               /* 48 */
  line-height: 1;
  color: var(--navy);
}
.section-title--center { text-align: center; }

.accent { color: var(--yellow); }
.accent--soft { color: var(--yellow-soft); }

/* A line break the design makes by hand, which no wrap width can reproduce.
   It only applies on the fixed artboard; the reflow below 1440px drops it and
   lets the copy wrap to the column. */
.artboard-break { display: inline; }

/* Its mirror: a hand-placed break that only the narrower columns need. The
   artboard has room for the line in full, so the break is dropped there. */
.reflow-break { display: none; }

/* A break that belongs to the laptop range alone: off on the artboard, off
   below 1024 where the columns widen again. Switched on in that one query. */
.laptop-break { display: none; }

.section-lead {
  width: 50.0625rem;             /* 801 */
  margin-inline: auto;
  text-align: center;
  font-size: 1.375rem;           /* 22 */
  line-height: 1.5;
}

.section-cta { text-align: center; }

/* ────────────────────────────── Button ────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.9375rem;                /* 15 */
  height: 3.3125rem;             /* 53 */
  padding-inline: 2.25rem;       /* 36 — the artboard's 28 left long labels
                                    crowding the pill's edges */
  border-radius: 1.1875rem;      /* 19 */
  font-weight: 500;
  font-size: 1.625rem;           /* 26 */
  line-height: 1;
  white-space: nowrap;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.btn--primary { background: var(--yellow); color: var(--ink); }
.btn--sky     { background: var(--sky);    color: var(--ink); }
.btn--primary:hover,
.btn--primary:focus-visible,
.btn--sky:hover,
.btn--sky:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1.25rem rgba(20, 64, 104, 0.22);
}
.btn img { width: 2rem; height: auto; flex: none; }

/* ────────────────────────────── Header ────────────────────────────── */

/* Fixed rather than sticky: the condensed state changes the bar's height, and a
   sticky header's height is also its flow height — the page would jump 58px. */
.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 50; background: var(--page);
  transition: box-shadow 0.22s ease;
}

/* Holds the artboard's 146px that the fixed header no longer occupies. */
#main { padding-top: 9.125rem; }

.site-header__inner {
  display: flex;
  align-items: center;
  height: 9.125rem;              /* 146 */
  padding-left: 16.1875rem;      /* 259 */
  padding-right: 4.0625rem;      /* 65 */
  transition: height 0.22s ease;
}

/* Once the page scrolls, the bar condenses so it costs less of the screen.
   At the top of the page it still shows the design's full 146px. */
.site-header.is-stuck { box-shadow: 0 0.125rem 0.875rem rgba(20, 64, 104, 0.12); }
.site-header.is-stuck .site-header__inner { height: 5.5rem; }   /* 88 */
.site-header.is-stuck .logo { transform: scale(0.66); }

/* Three stacked SVG layers, as composed in Figma. */
.logo {
  position: relative; flex: none; width: 6.625rem; height: 6.4375rem;
  transform-origin: left center;
  transition: transform 0.22s ease;
}
.logo__art  { position: absolute; left: 0.125rem; top: 0;        width: 6.375rem; }
.logo__word { position: absolute; left: 0;        top: 4.25rem;  width: 6.625rem; }
.logo__sub  { position: absolute; left: 0.3125rem; top: 6rem;    width: 6rem; }

.primary-nav { display: flex; align-items: center; flex: 1; }

.primary-nav__list {
  display: flex;
  align-items: center;
  gap: 3rem;                     /* 48 */
  margin-left: 21.3125rem;       /* 341 → first link lands at x706 */
  font-size: 1.4375rem;          /* 23 */
  color: #000;
}
/* Direct children only: the services panel's own links sit inside this list and
   must not pick up the top-level underline. */
.primary-nav__list > li > a,
.primary-nav__trigger { position: relative; padding-block: 0.375rem; }
.primary-nav__list > li > a::after,
.primary-nav__trigger::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; border-radius: 3px; background: var(--yellow);
  transform: scaleX(0); transition: transform 0.2s ease;
}
.primary-nav__list > li > a:hover::after,
.primary-nav__list > li > a:focus-visible::after,
.primary-nav__trigger:hover::after,
.primary-nav__trigger:focus-visible::after,
.has-mega:hover .primary-nav__trigger::after { transform: scaleX(1); }

/* ─────────────────────────── Services mega menu ───────────────────────────
   The trigger is a button, not a link: the services hub page does not exist
   yet, so there is nowhere for a top-level link to go. Swap it for an anchor
   once `services.php` is built.

   The panel is hidden with visibility rather than display, so it stays out of
   the tab order and the accessibility tree while still being able to animate.
   It opens on hover, on focus-within for keyboard users, and on click — the
   last of those is what `.is-open` and `aria-expanded` track. */
.primary-nav__trigger {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font: inherit; color: inherit; cursor: pointer;
}
.primary-nav__caret {
  width: 0.75rem; height: auto; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.2s ease;
}
.has-mega:hover .primary-nav__caret,
.has-mega:focus-within .primary-nav__caret,
.has-mega.is-open .primary-nav__caret { transform: rotate(180deg); }

.has-mega { position: relative; }

.mega {
  position: absolute; left: 50%; top: 100%;
  z-index: 60;
  width: min(50rem, calc(100vw - 3rem));         /* 800, never past the viewport */
  margin-top: 1.125rem;                          /* 18 — clears the underline */
  padding: 1.75rem;                              /* 28 */
  background: #fff;
  border-radius: 1.5rem;                         /* 24 */
  box-shadow: 0 1.25rem 2.5rem rgba(20, 64, 104, 0.16);
  opacity: 0; visibility: hidden;
  transform: translate(-50%, 0.625rem);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.has-mega:hover .mega,
.has-mega:focus-within .mega,
.has-mega.is-open .mega {
  opacity: 1; visibility: visible;
  transform: translate(-50%, 0);
}

/* A hover bridge across the 18px gap, so the panel does not close while the
   pointer travels from the trigger down into it. */
.mega::before {
  content: ''; position: absolute; left: 0; right: 0; top: -1.125rem; height: 1.125rem;
}

.mega__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.375rem 1rem;                            /* 6 / 16 */
}
.mega__link {
  display: flex; align-items: flex-start; gap: 0.875rem;   /* 14 */
  padding: 0.75rem;                              /* 12 */
  border-radius: 1rem;                           /* 16 */
  transition: background 0.18s ease;
}
.mega__link:hover,
.mega__link:focus-visible { background: var(--pale); }
.mega__icon { width: 2.625rem; height: 2.625rem; flex: none; }   /* 42 */
/* min-width:0 lets the two nowrap lines below shrink inside the flex row
   instead of pushing the card wider than its grid track. */
.mega__body { display: block; min-width: 0; }

/* Both lines stay on one line: the panel is sized so the longest of each fits
   (titles ~28 characters at 18px, blurbs ~37 at 15px). The ellipsis is a
   backstop only — if it ever shows, the copy has outgrown the panel and wants
   shortening rather than a wider menu. Wrapping comes back on mobile, where
   the grid is a single column. */
.mega__title,
.mega__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mega__title {
  display: block;
  font-weight: 700; font-size: 1.125rem; line-height: 1.25;      /* 18 */
  color: var(--navy);
}
.mega__text {
  display: block; margin-top: 0.1875rem;
  font-size: 0.9375rem; line-height: 1.35;                       /* 15 */
  color: var(--ink);
}

.primary-nav__actions { display: flex; align-items: center; margin-left: auto; gap: 1.5rem; }

.live-chat { display: inline-flex; align-items: center; gap: 0.5625rem; font-size: 1.4375rem; color: var(--ink); white-space: nowrap; }
.live-chat img { width: 1.75rem; height: auto; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 10px; margin-left: auto; }
.nav-toggle__bar { display: block; width: 26px; height: 3px; border-radius: 3px; background: var(--navy); }

/* ─────────────────────────────── Hero ─────────────────────────────── */

.hero { height: 45.375rem; background: var(--page); }   /* 726 */

.hero__copy { position: absolute; left: 16.1875rem; top: 7.4375rem; }   /* 259 / 119 */

.hero__title {
  margin-top: 1.1875rem;         /* 19 — eyebrow → 312 */
  font-weight: 700;
  font-size: 4.5625rem;          /* 73 */
  line-height: 1;
  width: 41.125rem;              /* 658 */
}

.hero__lead {
  margin-top: 0.25rem;
  width: 42.5rem;                /* 680 — wraps to the design's three lines */
  font-size: 1.5rem;             /* 24 */
  line-height: 2.375rem;         /* 38 */
}

.hero .btn { margin-top: 2.5625rem; width: 18.3125rem; }   /* 41 / 293 */

.rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 3.75rem;           /* 60 */
  font-family: var(--font-ui);
  font-size: 1.1875rem;          /* 19 */
  white-space: nowrap;
}
.rating__mark  { width: 0.9375rem; transform: rotate(180deg); }
.rating__badge { width: 1.25rem; }
.rating__stars { display: inline-flex; gap: 0.1875rem; margin-left: 0.5rem; }
.rating__stars img { width: 1rem; }
.rating__count { margin-left: 0.5rem; }

.hero__art {
  position: absolute;
  left: 60.3125rem;              /* 965 */
  top: 3.9375rem;                /* 209 */
  width: 61rem;                  /* 976 */
  height: 42.5rem;               /* 680 */
}
.hero__art-mask {
  position: absolute; left: 6.5574%; top: 0; width: 96.2486%; height: 100%;
  overflow: hidden;
  -webkit-mask: url('../img/hero/hero-mask.svg') 0 0 / 100% 100% no-repeat;
          mask: url('../img/hero/hero-mask.svg') 0 0 / 100% 100% no-repeat;
}
.hero__art-mask img {
  position: absolute; left: -12.231%; top: 0;
  width: 107.994%; height: 98.794%; max-width: none; object-fit: cover;
}

/* ─────────────────────── Publishing platforms ─────────────────────── */

/* Centred so the logos sit on the band's midline. */
.platforms {
  display: flex;
  align-items: center;
  height: 8.5rem;                /* 136 */
  background: var(--sky);
}

.platforms__viewport { width: 100%; overflow: hidden; }

.platforms__track {
  display: flex;
  width: max-content;
  animation: platforms-marquee 24s linear infinite;
}

/* The trailing padding belongs to the group, so one group's total width is
   exactly half the track — which is what the animation travels. */
.platforms__group {
  display: flex;
  align-items: center;
  gap: 5rem;
  padding-right: 5rem;
  opacity: 0.46;
}

/* -25% == one of the track's four groups. */
@keyframes platforms-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-25%); }
}

/* Each logo keeps its own Figma frame width. */
.platform-logo { height: auto; flex: none; }
.platform-logo--ingram { width: 12.668rem; }   /* 202.684 */
.platform-logo--kindle { width: 13.162rem; }   /* 210.585 */
.platform-logo--forbes { width: 10.094rem; }   /* 161.501 */
.platform-logo--amazon { width: 8.681rem; }    /* 138.891 */
.platform-logo--herald { width: 12.920rem; }   /* 206.721 */

/* ─────────────────────────────── About ─────────────────────────────── */

/* 704 — the design's 745 less the 41px the services wave crest reaches up into. */
.about { height: 44rem; background: var(--cream); }

.about__art {
  position: absolute;
  left: 3.3125rem;               /* 53 */
  top: 10.25rem;                 /* 164 */
  width: 55.75rem;               /* 892 */
  height: 32.3125rem;            /* 517 */
}
/* Mask lands at design x110 / y1172, matching the 821.232 × 463.385 export. */
.about__art-mask {
  position: absolute; left: 6.3901%; top: 0; width: 92.0663%; height: 89.6295%;
  overflow: hidden;
  -webkit-mask: url('../img/about/about-mask.svg') 0 0 / 100% 100% no-repeat;
          mask: url('../img/about/about-mask.svg') 0 0 / 100% 100% no-repeat;
}
/* The illustration fills the mask exactly; only the 1.5 → 1.77 aspect difference
   is cropped, biased above centre to frame the girl as the design does. */
.about__art-mask img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 23%;
}

.about__copy { position: absolute; left: 62.5625rem; top: 9.5rem; }   /* 1001 / 152 */
.about__copy .section-title { margin-top: 1.8125rem; font-size: 3.125rem; width: 41.125rem; }  /* 50 */
.about__body { margin-top: 1.25rem; width: 42.5rem; font-size: 1.375rem; line-height: 1.5; }
.about__body p + p { margin-top: 2.0625rem; }   /* the design leaves a blank line */
.about__btn { margin-top: 2.4375rem; margin-left: -0.5rem; }

.deco--about-plane {
  left: 109.93rem; top: 28.68rem;         /* centre of the Figma frame */
  width: 15.3231rem;                      /* 245.17 */
  transform: translate(-50%, -50%) rotate(25.96deg);
}

/* ────────────────────────────── Services ────────────────────────────── */

/* Starts 41px early (1712, not 1753) so the wave's tallest crest has room; the
   section is 41px taller to match and every offset below is shifted the same 41. */
.services { height: 59.0625rem; background: var(--sky); } /* 945 */
.wave--services { height: 8.625rem; }                     /* 138 */

.services .eyebrow { padding-top: 11.9375rem; }           /* → 1903 */
.services .section-title { margin-top: 1.75rem; font-size: 3.125rem; }   /* → 1959, 50px */

.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 21.3044rem);   /* 340.87 */
  gap: 2.5rem 2.5107rem;
  width: 92.75rem;                                /* 1484 */
  margin: 3.1413rem auto 0;                       /* → 2058.26 */
}

.service-card {
  position: relative;                             /* anchor for the card link */
  width: 21.3044rem;
  height: 13.984rem;                              /* 223.744 */
  padding: 1.3594rem 1.5rem 0;
  background: #fff;
  border-radius: 1.875rem;                        /* 30 */
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.service-card:hover,
.service-card:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 0.75rem 1.5rem rgba(20, 64, 104, 0.14);
}

/* The whole card is the hit area. The anchor wraps the title — so the link has
   a real name rather than "read more" — and its stretched ::after covers the
   rest of the card, which leaves the body copy selectable. */
.service-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 1.875rem;                        /* follows the card */
}
.service-card__icon { width: 3.25rem; height: 3.25rem; }
/* Width forces the design's break after "Book" on every card. */
.service-card__title { margin-top: 0.9375rem; width: 12rem; font-weight: 700; font-size: 1.5625rem; line-height: 1.12; }
.service-card__text { margin-top: 0.375rem; font-size: 1rem; line-height: 1.38; }

/* The homepage lists only the six services that have a page of their own, so its
   grid runs three across in two rows. The About page's grid still carries all
   eight in four, so this is a modifier rather than an edit to `.service-grid`.
   Same 1484 measure and gap as everywhere else — 3 × 467.82 + 2 × 40.17 — and the
   card and title widths are the service pages', which already run three columns.
   Still two rows, so the 945 band is unchanged. */
.service-grid--three { grid-template-columns: repeat(3, 29.2387rem); }   /* 467.82 */
.service-grid--three .service-card { width: 29.2387rem; }
.service-grid--three .service-card__title { width: 16.25rem; }           /* 260 */

.services .section-cta { margin-top: 2.8913rem; }         /* → 2592 */

.deco--cloud-svc-l { left: -1.375rem; top: 10.75rem; }    /* -22 / 1884 */
.deco--cloud-svc-r { left: 109.9375rem; top: 46.1875rem; }/* 1759 / 2451 */

/* ────────────────────────────── Portfolio ────────────────────────────── */

.portfolio { height: 46.3125rem; background: var(--cream); }   /* 741 */
.wave--portfolio { height: 9rem; }                             /* 144 */

.portfolio .eyebrow { padding-top: 9.5rem; }                   /* → 2809 */
.portfolio .section-title { margin-top: 1.0625rem; font-size: 3.125rem; }  /* → 2854 */
.portfolio .section-lead { margin-top: 0.375rem; }             /* → 2910 */

.carousel { position: relative; margin-top: 1.75rem; }         /* → 3004 */

/* Five covers are visible; the track holds more and rotates, so the loop never
   runs out of covers at either edge. */
.carousel__viewport { width: 84.9375rem; margin-inline: auto; overflow: hidden; }  /* 1359 */

.carousel__track { display: flex; align-items: center; gap: 4.125rem; }  /* 66 */
.carousel__item { flex: none; width: 13.6875rem; }                       /* 219 */
.carousel__item img { width: 100%; height: auto; }

.carousel__btn {
  position: absolute;
  top: 7.625rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  color: #9aa3ad;
  transition: color 0.2s ease;
}
.carousel__btn:hover { color: var(--navy); }
.carousel__chevron { width: 1.125rem; height: 1.9375rem; }
.carousel__btn--prev { left: 13.9375rem; }    /* 223 */
.carousel__btn--next { left: 104.375rem; }    /* 1670 */

.portfolio .section-cta { margin-top: 2.375rem; }   /* → 3342 */

.deco--pf-plane {
  left: 8.946rem; top: 18.009rem;     /* centre of the Figma frame */
  width: 19.644rem;                   /* 314.3 */
  transform: translate(-50%, -50%) rotate(35.42deg);
}

/* ───────────────────────────── Why choose ───────────────────────────── */

.why { height: 47.5rem; background: var(--pale); }   /* 760 */
/* Exported from a 2064.57-wide frame, so it keeps that width and centres —
   stretching it to the 1920 artboard would flatten the curve. */
.wave--why { width: 129.0356rem; height: 7.75rem; }  /* 2064.57 × 124 */

.why__art {
  position: absolute;
  left: 10.5625rem;               /* 169 */
  top: 12.125rem;                 /* 194 */
  width: 42.125rem;               /* 674 */
  height: 28rem;                  /* 448 */
}
.why__art-mask {
  position: absolute; inset: 0; overflow: hidden;
  -webkit-mask: url('../img/why/why-mask.svg') 0 0 / 100% 100% no-repeat;
          mask: url('../img/why/why-mask.svg') 0 0 / 100% 100% no-repeat;
}
.why__art-mask img { width: 100%; height: 100%; object-fit: cover; }

.why__copy { position: absolute; left: 56.4375rem; top: 12.5rem; width: 49.5rem; }  /* 903 / 200 */
.why__copy .eyebrow { margin-left: 0.75rem; }
/* Same indent as the eyebrow above it, so the two start on one edge. */
.why__title { margin-top: 1.5625rem; margin-left: 0.75rem; }

.why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 2.1875rem;
  row-gap: 2.25rem;
  margin-top: 2.3125rem;          /* → 3736 */
}
.why-item { display: flex; gap: 1rem; align-items: flex-start; }
/* object-fit matters here: the icons are not all square — light-bulb.png is
   42 x 54 where the rest are 512 x 512 — and a forced square box stretched
   that one out of shape. `contain` lets each keep its own ratio and centre in
   the box, so the row still lines up. */
.why-item__icon {
  width: 2.625rem; height: 2.625rem; flex: none;   /* 42 */
  object-fit: contain;
  object-position: center;
}
.why-item__body { min-width: 0; }
.why-item__title { font-weight: 700; font-size: 1.5rem; line-height: 1.17; }
.why-item__text { margin-top: 0.125rem; font-size: 1rem; line-height: 1.38; }

.deco--cloud-why-l { left: -4.25rem; top: 1.9375rem; width: 23.1875rem; }
.deco--cloud-why-r { left: 105.125rem; top: 34rem;   width: 23.1875rem; }

/* ───────────────────────────── Our process ───────────────────────────── */

.process { height: 28.9375rem; background: var(--cream); }   /* 463 */

.process .eyebrow { padding-top: 3.6875rem; }                /* → 4217 */
.process .section-title { margin-top: 1.0625rem; }           /* → 4262 */

.process-grid {
  display: grid;
  grid-template-columns: repeat(5, 16.5362rem);   /* 264.579 */
  gap: 1.6419rem;
  width: 89.25rem;                                /* 1428 */
  margin: 3.125rem auto 0;                        /* → 4360 */
}

/* z-index 2 keeps the cards above the paper plane's dotted trail, which runs
   behind them in the design — only the part right of card 5 shows. */
.process-card {
  position: relative;
  z-index: 2;
  height: 12.8867rem;                             /* 206.187 */
  padding: 1.125rem 0.6875rem 0;                  /* 18 / 11 — the design's inset */
  background: #fff;
  border-radius: 2.0625rem;                       /* 33 */
  box-shadow: 0 0.5rem 1.25rem rgba(20, 64, 104, 0.07);
}
.process-card__head { display: flex; align-items: flex-start; justify-content: space-between; }
.process-card__icon { width: 2.625rem; height: 3.25rem; object-fit: contain; object-position: left top; }
.process-card__step { font-weight: 700; font-size: 1.5rem; line-height: 1; }
.process-card__title { margin-top: 0.75rem; font-weight: 700; font-size: 1.5rem; line-height: 1.17; }
/* The design steps the two longest titles down a size so each stays on one line. */
.process-card:nth-child(4) .process-card__title,
.process-card:nth-child(5) .process-card__title { font-size: 1.375rem; }   /* 22 */
.process-card__text { margin-top: 0.0625rem; font-size: 1rem; line-height: 1.625; }   /* 26 */

/* Dashed connectors: each is placed and rotated exactly as in the design,
   centred on the gap between two cards. */
.process-card__arrow { position: absolute; z-index: 2; max-width: none; }
.process-card:nth-child(1) .process-card__arrow {
  left: 17.432rem; top: 0.216rem; width: 3.349rem; height: 7.749rem;
  transform: translate(-50%, -50%) rotate(105.58deg);
}
.process-card:nth-child(2) .process-card__arrow {
  left: 17.526rem; top: 12.861rem; width: 2.322rem; height: 5.374rem;
  transform: translate(-50%, -50%) rotate(-75.48deg);
}
.process-card:nth-child(3) .process-card__arrow {
  left: 16.868rem; top: 0.323rem; width: 2.322rem; height: 5.374rem;
  transform: translate(-50%, -50%) rotate(98.51deg);
}
.process-card:nth-child(4) .process-card__arrow {
  left: 17.198rem; top: 12.443rem; width: 2.322rem; height: 5.374rem;
  transform: translate(-50%, -50%) rotate(-66.35deg);
}

.deco--process-plane {
  left: 105.009rem; top: 14.571rem; width: 14.3rem;
  transform: translate(-50%, -50%) rotate(35.42deg);
}
.deco--cloud-proc-l  { left: 3.75rem;  top: 2.25rem; }
.deco--cloud-proc-r  { left: 109.625rem; top: 22.75rem; }

/* ─────────────────────────────── Ages ─────────────────────────────── */

.ages { height: 37.5625rem; background: var(--sky); }   /* 601 */
.wave--ages { width: 129.0625rem; height: 5.25rem; }    /* 2065 × 84 */

.ages .eyebrow { padding-top: 8.0625rem; }              /* → 4750 */
.ages .section-title { margin-top: 1.0625rem; }         /* → 4795 */

.age-grid {
  display: grid;
  grid-template-columns: repeat(4, 17.375rem);   /* 278 */
  gap: 3.8125rem;                                /* 61 */
  width: 80.875rem;                              /* 1294 */
  margin: 2.375rem auto 0;                       /* → 4881 */
}

.age-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 18.5625rem;                            /* 297 */
  padding: 0.4375rem 1.25rem 0;
  border-radius: 2.875rem;                       /* 46 */
  box-shadow: var(--shadow-soft);
}
.age-card--pink   { background: var(--pink); }
.age-card--cream  { background: var(--cream); }
.age-card--pale   { background: var(--pale); }
.age-card--purple { background: var(--purple); }

.age-card__art { width: 6.875rem; height: 9rem; object-fit: contain; }
.age-card__title { margin-top: 0.3125rem; font-weight: 700; font-size: 1.75rem; line-height: 1.12; }
.age-card__text { margin-top: 0.25rem; font-size: 1rem; line-height: 1.4; }

.deco--cloud-ages-l { left: -1.5rem;  top: 4.5rem; }
.deco--cloud-ages-r { left: 109.5rem; top: 24rem; }

/* ────────────────────────────── Genres ────────────────────────────── */

.genres { height: 35.5rem; background: var(--cream); }   /* 568 */

.genres .eyebrow { padding-top: 3.6875rem; }             /* → 5281 */
.genres .section-title { margin-top: 1.25rem; }          /* → 5329 */

.genre-rows { display: flex; flex-direction: column; gap: 2.75rem; margin-top: 3.4375rem; }  /* → 5432 */
.genre-row { display: flex; justify-content: center; gap: 2.3125rem; }

.genre-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: 17.8125rem;              /* 285 */
  height: 3.5rem;                 /* 56 */
  border-radius: 1.5625rem;       /* 25 */
  font-weight: 700;
  font-size: 1.75rem;             /* 28 */
  color: var(--navy);
}
.genre-pill--sky   { background: var(--sky); }
.genre-pill--pink  { background: var(--pink); }
.genre-pill--pale  { background: var(--pale); }
.genre-pill--coral { background: var(--coral); color: #fff; }
.genre-pill__icon { width: 1.875rem; height: 1.875rem; flex: none; }

/* ── Genres, phone strip ──────────────────────────────────────────────
   At phone widths the four rows stack into a ten-pill column that runs most
   of a screen. This is the same pills as one auto-scrolling strip, built the
   way the publishing-platforms band is: the set is laid down twice and the
   track travels exactly one copy, so the loop has no seam. Hidden above the
   phone breakpoint, where the design's 4-3-2-1 pyramid still fits. */
.genre-marquee { display: none; }
.genre-marquee__track {
  display: flex;
  width: max-content;
  animation: genre-marquee 30s linear infinite;
}
.genre-marquee__group { display: flex; align-items: center; gap: 14px; padding-right: 14px; }

/* -50% == one of the track's two groups. */
@keyframes genre-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.deco--genres-plane {
  left: 103.195rem; top: 25.346rem; width: 19.941rem;
  transform: translate(-50%, -50%) rotate(35.42deg);
}
.deco--cloud-gen-l  { left: 2.5rem;  top: 2.5rem; }
.deco--cloud-gen-r  { left: 109.1875rem; top: 25rem; }

/* ─────────────────────────── Testimonials ─────────────────────────── */

.testimonials { height: 39.1875rem; background: var(--sky); }   /* 627 */
.wave--testimonials { height: 7.5rem; }                         /* 120 */

.testimonials .eyebrow { padding-top: 7.875rem; }               /* → 5916 */
.testimonials .section-title { margin-top: 1.25rem; }           /* → 5964 */
.testimonials .section-lead { margin-top: 0.5625rem; }          /* → 6021 */

/* Three cards are on show; the track holds six and rotates, so the loop always
   has a card waiting off both edges. */
.testimonials__viewport {
  width: 73.48rem;
  margin: 0 auto;                                /* → 6085 */
  overflow: hidden;
  overflow-x: clip;                              /* lets the card shadows show */
  overflow-y: visible;
}
.testimonial-track { display: flex; gap: 2.4575rem; }

/* Card geometry mirrors the Figma component: a yellow plate behind a pale
   panel, with the avatar straddling the panel's left edge. */
/* Taller than the Figma component: the real author quotes run to about seven
   lines where the placeholder ran to four, so the panel and the card grow to
   hold them and the plate drops with the card's lower edge. */
.testimonial { position: relative; flex: none; width: 22.855rem; height: 16.1563rem; }   /* 365.678 × 258.5 */

.testimonial__plate {
  position: absolute;
  left: 0; top: 11.3106rem;       /* 180.97 */
  width: 10.3019rem;              /* 164.83 */
  height: 4.8457rem;              /* 77.531 */
  background: var(--yellow);
  border-radius: 0.9157rem;       /* 14.652 */
}

.testimonial__card {
  position: absolute;
  left: 1.4375rem; top: 2.8125rem;   /* 23 / 45 */
  width: 18.4375rem;                 /* 295 */
  height: 10.5rem;                   /* 168 — was 125, see .testimonial */
  background: var(--pale);
  border-radius: 0.875rem;           /* 14 */
  box-shadow: var(--shadow-card);
}

/* The author's initials stand in for a photo, on the same footprint the
   portrait occupied so the card's composition is unchanged. */
.testimonial__avatar {
  position: absolute;
  left: 1.1875rem; top: 1.5625rem;   /* card-relative: 42-23 / 70-45 */
  width: 4rem; height: 4.625rem;     /* 64 x 74 */
  border-radius: 2.3125rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--sky);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 1.5rem;                 /* 24 */
  line-height: 1;
  letter-spacing: 0.03em;
  color: var(--navy);
  user-select: none;
}

.testimonial__content { position: absolute; left: 6.1875rem; top: 1.6875rem; width: 11.6875rem; }

.testimonial__stars { display: flex; align-items: center; gap: 0.0625rem; font-family: var(--font-ui); }
.testimonial__stars img { width: 0.5342rem; height: 0.5342rem; }
.testimonial__stars span { margin-left: 0.25rem; font-size: 0.3816rem; }

.testimonial__text {
  margin-top: 0.4375rem;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.6875rem;              /* 11 */
  line-height: 1.249;
  color: #252525;
}

.testimonial__name { margin-top: 0.5rem; font-family: var(--font-ui); font-weight: 700; font-size: 0.4579rem; line-height: 1; }
.testimonial__role { margin-top: 0.1rem; font-family: var(--font-ui); font-size: 0.3053rem; line-height: 1; }

.testimonial__badge { position: absolute; left: 19.375rem; top: 4.75rem; width: 1.0302rem; height: auto; }

/* 8px dots, 6px apart — the 36px row the design draws. */
.testimonials__dots { display: flex; justify-content: center; gap: 0.375rem; margin-top: 4.5rem; }  /* → 6372 */
.testimonials__dot {
  width: 0.5rem; height: 0.5rem; padding: 0;
  border-radius: 50%;
  background: #7aafdf;
  transition: background 0.2s ease;
}
.testimonials__dot.is-active { background: var(--navy); }

/* ──────────────────────────────── FAQ ──────────────────────────────── */

/* The band grows rather than standing at a fixed 591: `main > section` clips,
   so a fixed height cut an open answer off at the section edge instead of
   pushing the page down. The 73 of slack the artboard left below the list is
   padding now, so a closed accordion still measures the design's 591. */
.faq { height: auto; padding-bottom: 4.5625rem; background: var(--cream); }   /* 591 closed = 518 + 73 */

.faq .section-title { padding-top: 5.125rem; }           /* → 6499 */

.faq-list {
  width: 57.625rem;                /* 922 */
  margin: 3.0625rem auto 0;        /* → 6596 */
  display: flex;
  flex-direction: column;
  gap: 1.625rem;                   /* 26 */
}

.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  width: 100%;
  min-height: 2.9375rem;           /* 47 */
  padding: 0.5rem 2.0625rem 0.5rem 1.75rem;
  background: var(--yellow-bar);
  border-radius: 0.8125rem;        /* 13 */
  font-weight: 500;
  font-size: 1.375rem;             /* 22 */
  line-height: 1.2;
  color: var(--navy);
  text-align: left;
  transition: filter 0.18s ease;
}
.faq-item__question:hover { filter: brightness(1.04); }
.faq-item__chevron { width: 1.25rem; height: 0.75rem; flex: none; transition: transform 0.22s ease; }
.faq-item__question[aria-expanded='true'] .faq-item__chevron { transform: rotate(180deg); }

.faq-item__answer { padding: 0.875rem 1.75rem 0; font-size: 1.125rem; line-height: 1.55; }
.faq-item__answer[hidden] { display: none; }

/* The design crops this frame so only the dotted flight path shows, not the plane. */
.deco--faq-trail {
  left: 113.05rem; top: 10.358rem;
  width: 26.098rem;                 /* 417.563 */
  height: 23.189rem;                /* 371.031 */
  background: url('../img/about/paper-plane.png') -9.075rem -16.638rem / 42.95rem 42.95rem no-repeat;
  opacity: 0.3;
  transform: translate(-50%, -50%) rotate(45deg);
}
.deco--cloud-faq-l { left: 2.5rem; top: 3.75rem; }
.deco--cloud-faq-r { left: 108.75rem; top: 26.25rem; }

/* ─────────────────────────── Closing CTA ─────────────────────────── */

.cta { height: 27.875rem; }   /* 446 */

.cta__bg {
  position: absolute;
  left: 50%;
  top: -24.89%;
  width: 125.856rem;           /* 104.88% of 1920 */
  height: 150.9%;
  transform: translateX(-50%);
  max-width: none;
  object-fit: fill;
  z-index: 0;
}

.cta__inner { z-index: 1; }
.cta .eyebrow { padding-top: 3.4375rem; }        /* → 7063 */
.cta .section-title { margin-top: 1.9375rem; }   /* → 7122 */
.cta .section-lead { margin-top: 0.6875rem; }    /* → 7181 */
.cta .btn { display: flex; width: 23.875rem; margin: 1.25rem auto 0; }   /* → 7300 */

/* ────────────────────────────── Footer ────────────────────────────── */

.site-footer {
  position: relative;
  height: 44.125rem;             /* 706 */
  background: var(--navy-deep);
  color: #fff;
  overflow: hidden;
}

.footer-logo {
  position: absolute;
  left: 56.1875rem; top: 2.6875rem;    /* 899 / 43 */
  width: 7.625rem; height: 7.375rem;   /* 122 x 118 */
}
.footer-logo__art  { position: absolute; left: 0.125rem; top: 0;       width: 7.375rem; }
.footer-logo__word { position: absolute; left: 0;        top: 4.875rem; width: 7.625rem; filter: brightness(0) invert(1); }
.footer-logo__sub  { position: absolute; left: 0.375rem; top: 6.875rem; width: 6.875rem; filter: brightness(0) invert(1); }

.footer-heading { font-weight: 400; font-size: 1.75rem; line-height: 1.18; }   /* 28 */

/* The four columns share one row instead of sitting at the artboard's hand-
   placed x positions, which left a hole where the removed second services
   column used to be. space-between gives identical gutters, and the row runs
   edge to edge with the rule above the payment strip (259 … 1634).
   The logo and that strip stay absolute, so they are out of this flow. */
.site-footer .canvas {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 12.75rem 17.875rem 0 16.1875rem;   /* 204 top · 259 left · 286 right */
}
.footer-menu, .footer-services, .footer-policies, .footer-contact { flex: none; }

/* One rhythm for all three link columns — same heading offset, same gap under
   it, same row height — so the lists share a baseline grid across the footer.
   The artboard had Menu on its own looser spacing with an oversized "Home";
   that read as a misalignment next to Services and Policies. */
.footer-menu ul,
.footer-policies ul,
.footer-services__cols { margin-top: 1.1875rem; font-size: 1.125rem; }   /* 19 */

.footer-menu li,
.footer-services li,
.footer-policies li { line-height: 2.31; }

.footer-services li,
.footer-policies li { white-space: nowrap; }

.footer-services__cols { display: flex; gap: 2.5rem; }   /* 40 between the two lists */

.footer-menu a:hover,
.footer-services a:hover,
.footer-policies a:hover { text-decoration: underline; }

/* The contact block sits 32px below the headings' line, as on the artboard, so
   its three rows stay bottom-balanced against the taller services list. */
.footer-contact {
  margin-top: 2rem;                   /* 32 */
  font-family: var(--font-contact);
}
.footer-contact__row { display: flex; gap: 0.625rem; align-items: flex-start; margin-bottom: 1.5rem; }
.footer-contact__icon {
  display: grid; place-items: center; flex: none;
  width: 1.9375rem; height: 1.9375rem;
  background: #fff; border-radius: 50%;
}
.footer-contact__icon img { width: 1.9375rem; height: 1.9375rem; }
.footer-contact__row h3 { font-weight: 600; font-size: 0.875rem; line-height: 1.75; }
.footer-contact__row p  { font-weight: 400; font-size: 0.875rem; line-height: 1.45; }
.footer-contact__row a:hover { text-decoration: underline; }

.footer-bar {
  position: absolute;
  left: 16.1875rem; top: 36.0625rem;   /* 259 / 577 */
  width: 85.9375rem;                   /* 1375 */
  padding-top: 0.625rem;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Card-brand wordmarks (the design's bitmap strip was not exportable). */
.payments { display: flex; align-items: center; gap: 1.375rem; color: #fff; }
.pay { display: flex; align-items: center; font-family: var(--font-contact); }
.pay--visa { font-weight: 600; font-style: italic; font-size: 1.625rem; letter-spacing: -0.02em; }
.pay--mastercard { gap: 0.4rem; font-size: 1rem; }
.pay__circles { position: relative; display: block; width: 2.1rem; height: 1.3rem; }
.pay__circles::before,
.pay__circles::after {
  content: ''; position: absolute; top: 0; width: 1.3rem; height: 1.3rem; border-radius: 50%;
  background: #fff; opacity: 0.85;
}
.pay__circles::before { left: 0; }
.pay__circles::after  { right: 0; opacity: 0.6; }
.pay--amex { flex-direction: column; line-height: 1.02; font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.02em; }
.pay--discover { font-weight: 700; font-size: 1.1875rem; letter-spacing: -0.01em; }
.pay__dot { display: inline-block; width: 0.75rem; height: 0.75rem; margin: 0 0.05rem; border-radius: 50%; background: #f28b26; }

.social { display: flex; gap: 0.75rem; }
.social a {
  display: grid; place-items: center;
  width: 2.1875rem; height: 2.1875rem;
  border-radius: 50%; background: #fff; color: var(--navy-deep);
  transition: transform 0.18s ease;
}
.social a:hover { transform: translateY(-2px); }
.social__icon { width: 1.25rem; height: 1.25rem; }

/* ═══════════════════════════ About page ═══════════════════════════ */

/* ──────────────────────── About page — hero ───────────────────────── */

/* Same 726px band as the homepage hero, and the same page colour. The copy
   column shares the hero's x259, but starts 42px higher (eyebrow at y223
   against the homepage's 265) and runs a four-line lead. */
.about-hero { height: 45.375rem; background: var(--page); }   /* 726 */

.about-hero__copy { position: absolute; left: 16.1875rem; top: 4.8125rem; }   /* 259 / 77 */

.about-hero__title {
  margin-top: 1rem;              /* 16 — eyebrow → 267 */
  font-weight: 700;
  font-size: 4.5625rem;          /* 73 */
  line-height: 1;
  width: 41.125rem;              /* 658 — breaks after "Children's" */
}

.about-hero__lead {
  margin-top: 1rem;              /* 16 */
  width: 43.75rem;               /* 700 — wraps to the design's four lines */
  font-size: 1.5rem;             /* 24 */
  line-height: 2.375rem;         /* 38 */
}

/* Wider than the hero's 293 because the label is longer; the flex centring
   does the rest. */
.about-hero .btn { margin-top: 2.5625rem; width: 20.25rem; }   /* 41 / 324 */

/* 50 rather than the shared 60: the design closes the gap on this page. */
.about-hero .rating { margin-top: 3.125rem; }                  /* 50 */

/* No mask here — unlike the homepage illustrations, this PNG is already cut
   out, so it is placed at its exported size. */
.about-hero__art {
  position: absolute;
  left: 73.625rem;               /* 1178 */
  top: 4.125rem;                 /* 66 */
  width: 38.75rem;               /* 620 */
  height: 39.4375rem;            /* 631 */
}
/* The img's height attribute is a presentational hint, so without this it
   keeps its 631 once the reflow narrows the box. */
.about-hero__art img { height: auto; }

/* Likewise flat artwork, not the masked gradients the homepage clouds use.
   The design places the same cloud twice, the upper one 10% larger.
   height:auto is needed because the img's own height attribute is a
   presentational hint, and would otherwise hold the taller copy at 102. */
.about-hero__cloud { height: auto; }
.about-hero__cloud--1 { left: 67.125rem; top: 5.125rem;   width: 13.3125rem; }   /* 1074 / 82  / 213 */
.about-hero__cloud--2 { left: 59.625rem; top: 19.8125rem; width: 12.125rem; }    /* 954  / 317 / 194 */
/* The artboard has two clouds; the third belongs to the reflowed layout only,
   where the illustration stands alone above the copy. */
.about-hero__cloud--3 { display: none; }

/* ───────────────────────── Contact page — banner ───────────────────── */

/* The contact banner is the About hero with different copy, so it reuses that
   block wholesale. Only the three measurements the new wording needs are
   restated here — the About page keeps its own. */
.contact-hero .about-hero__title { width: 43.75rem; }   /* 700 — "Let's Talk About Your" measures 686 and will not fit the About page's 658 */
.contact-hero .about-hero__lead  { width: 42.5rem; }    /* 680 — holds the design's three lines */
.contact-hero .btn               { width: 20rem; }      /* 320 */

/* The contact art is a square export whose plane and trail sit inside a wide
   transparent margin, so the canvas is the designer's own placement — it is
   dropped in at native size rather than cropped to the ink. Centred on the
   About art's axis (1488), which is why the left differs from that block's. */
.contact-hero .about-hero__art {
  left: 73.9375rem;              /* 1183 */
  width: 38.125rem;              /* 610 */
  height: 38.125rem;             /* 610 */
}

/* ──────────────────────── Contact page — form ──────────────────────── */

.contact-form { height: 48.1875rem; background: var(--cream); }   /* 771 */

/* Left column. The illustration sits 25px left of the copy, as the design has
   it, so the block is anchored on the artwork and the text is indented. */
.contact-form__intro {
  position: absolute;
  left: 17.125rem;               /* 274 */
  top: 7.625rem;                 /* 122 */
}
.contact-form__art { width: 21.125rem; height: auto; }            /* 338, native */
.contact-form__title {
  margin: 0.9375rem 0 0 1.5625rem;   /* 15 / indent 25 */
  font-size: 3.125rem;               /* 50 */
}
.contact-form__text {
  margin: 0.6875rem 0 0 1.5625rem;   /* 11 */
  width: 26.25rem;                   /* 420 — breaks after "form" */
  font-size: 1.375rem;               /* 22 */
  line-height: 2.1875rem;            /* 35 */
}

/* Right column: two 357 columns, with the long fields spanning both. */
.contact-form__form {
  position: absolute;
  left: 57.125rem;               /* 914 */
  top: 9.375rem;                 /* 150 */
  width: 46.625rem;              /* 746 */
  display: grid;
  grid-template-columns: repeat(2, 22.3125rem);   /* 357 */
  gap: 2.3125rem 2rem;           /* 37 / 32 */
}
.field { margin: 0; }
.field--full { grid-column: 1 / -1; }

/* Transparent, so the section's cream reads through rather than a white box.
   display:block because a textarea is inline by default, and the baseline gap
   that leaves under it pushes the send button off its row. */
.field__input {
  display: block;
  width: 100%;
  height: 3.5rem;                /* 56 */
  padding-inline: 1.875rem;      /* 30 */
  background: transparent;
  border: 1px solid #d1dadb;
  border-radius: 0.75rem;        /* 12 */
  font-family: inherit;
  font-weight: 500;
  font-size: 1.25rem;            /* 20 */
  line-height: 1.2;
  color: var(--navy);
}
/* navy at 0.72 over cream resolves to the design's #5e7b92. */
.field__input::placeholder { color: rgba(20, 64, 104, 0.72); opacity: 1; }
.field__input--area {
  height: 10.125rem;             /* 162 */
  padding-block: 1.0625rem;
  resize: vertical;
}

/* Project Type is a select rather than free text, so the handler can check it
   against the services the site offers. appearance:none drops the native arrow
   so the caret below sits in the same place on every browser. */
.field--select { position: relative; }
.field__input--select {
  appearance: none;
  padding-right: 3.75rem;
  cursor: pointer;
}
.field__input--select:invalid { color: rgba(20, 64, 104, 0.72); }   /* placeholder state */
.field__caret {
  position: absolute;
  right: 1.875rem; top: 50%;
  width: 0.9375rem; height: 0.5625rem;
  transform: translateY(-50%);
  fill: none; stroke: var(--navy); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none;          /* clicks pass through to the select */
}

.contact-form__send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.9375rem;
  width: 100%;
  height: 3.4375rem;             /* 55 */
  background: var(--sky);
  color: var(--cream);
  border-radius: 0.75rem;
  font-weight: 500;
  font-size: 1.375rem;           /* 22 */
  transition: filter 0.18s ease;
}
/* The shared arrow asset is dark; invert it to sit on the sky plate. */
.contact-form__send img { width: 1.5rem; height: auto; filter: brightness(0) invert(1); }
.contact-form__send:hover,
.contact-form__send:focus-visible { filter: brightness(1.06); }

/* ─────────────────────── About page — who we are ───────────────────── */

/* The homepage's About section mirrored: copy on the left, art on the right.
   Same cream band, same 50px two-tone title, same 22px body. */
/* 723 — the body's own bottom. The design runs the next section's wave crest a
   little over the last line, so its frame ends ~20px higher; carrying that into
   the build would clip the line, since sections hide their overflow. */
.whoweare { height: 45.1875rem; background: var(--cream); }   /* 723 */

.whoweare__copy { position: absolute; left: 17.375rem; top: 4.75rem; }   /* 278 / 76 */
.whoweare__copy .section-title { margin-top: 0.8125rem; font-size: 3.125rem; width: 41.125rem; }  /* 13 / 50 / 658 */

/* 634 is a 4px window: the longest line is 633 and the shortest line-plus-next-word
   is 636, so this is the only width that gives the design's twelve lines. */
.whoweare__body {
  margin-top: 1rem;              /* 16 */
  width: 39.625rem;              /* 634 */
  font-size: 1.375rem;           /* 22 */
  line-height: 2.1875rem;        /* 35 */
}
.whoweare__body p + p { margin-top: 2.1875rem; }   /* the design leaves a blank line */

/* No mask: this PNG is already cut out, so it sits at its exported size. */
.whoweare__art {
  position: absolute;
  left: 62.75rem;                /* 1004 */
  top: 10.0625rem;               /* 161 */
  width: 47rem;                  /* 752 */
  height: 27.375rem;             /* 438 */
}
.whoweare__art img { height: auto; }

/* Unrotated, unlike the homepage's copy: the design keeps the plane upright
   here, trail looping down-left, visible ink 136 x 189 ending at x1843. */
.deco--whoweare-plane {
  left: 103.8125rem;             /* 1661 */
  top: 22.75rem;                 /* 364 */
  width: 14.1875rem;             /* 227 */
}

/* ─────────────────────── About page — our mission ──────────────────── */

/* Opens with the same cream→sky wave the homepage's Services section uses, so
   the band is what separates it from the cream above. */
.mission { height: 41rem; background: var(--sky); }   /* 656 */

/* Clears the 138px wave band; the pattern the sky sections already use. */
.mission .eyebrow { padding-top: 13rem; }             /* → 208 */
.mission__title { margin-top: 1.0625rem; font-size: 3.125rem; }   /* 17 / 50 */

/* 910 is inside a 19px window: the longest line is 902 and the shortest
   line-plus-next-word is 921. */
.mission__body {
  margin-top: 1.6875rem;         /* 27 */
  width: 56.875rem;              /* 910 */
  margin-inline: auto;
  text-align: center;
  font-size: 1.375rem;           /* 22 */
  line-height: 2.1875rem;        /* 35 */
}
.mission__body p + p { margin-top: 2.1875rem; }   /* the design leaves a blank line */

/* The About page's own cloud PNG, at the same 213 as the hero's upper copy —
   not the homepage's masked-gradient clouds, which fill their whole box. */
.mission__cloud { width: 13.3125rem; height: auto; }              /* 213 */
.mission__cloud--left  { left: 0.6875rem;  top: 10.1875rem; }     /* 11   / 163 */
.mission__cloud--right { left: 106.75rem;  top: 28rem; }          /* 1708 / 448 */

/* ─────────── About page — services (cream, wave at the bottom) ─────────── */

/* Same markup, cards and copy as the homepage's Services section. What changes
   is the band: cream instead of sky, and the wave closing the section into the
   pale below rather than opening it from the cream above. Scoped to a modifier
   so the homepage keeps its own treatment. */
/* 934 — ends flush. The cream→pale wave that used to close this section now
   opens the process section below, where the project's convention puts it. */
.services--cream { height: 58.375rem; background: var(--cream); }   /* 934 */

/* Top of the section is a plain edge now, so the copy no longer has to clear a
   138px wave band. */
.services--cream .eyebrow { padding-top: 8.375rem; }                /* 134 */


/* The page's own cloud PNG, as in the hero and our-mission sections — the
   homepage's masked white clouds are built to read against sky, not cream. */
.services--cream__cloud { width: 13.3125rem; height: auto; }        /* 213 */
.services--cream__cloud--left  { left: -0.5rem;    top: 13.5rem; }  /* -8   / 216 */
.services--cream__cloud--right { left: 106.5rem;   top: 49rem; }    /* 1704 / 784 */

/* ──────────── About page — process (pale, wave at the top) ──────────── */

/* The homepage's Process section on a pale band instead of cream, opened by the
   cream→pale wave rather than meeting the section above at a flat edge.
   Scoped to a modifier so the homepage keeps its own cream treatment. */
.process--pale { height: 36.6875rem; background: var(--pale); }   /* 463 + the 124 band */

/* Wider than the artboard, as on the homepage's why-choose section; the section
   clips the overhang. `cream-bottom.svg` paints only the cream above its curve
   and is transparent below, so the pale showing through is this section's own
   background — the band below is a token here, not a baked-in asset colour. */
.wave--process {
  width: 129.0356rem;            /* 2064.57 */
  height: 7.75rem;               /* 124 */
}

/* Everything inside shifts down by the band's height; the section's own rhythm
   is otherwise the homepage's, untouched. */
.process--pale .eyebrow { padding-top: 11.4375rem; }              /* 59 + 124 */
.process--pale .deco--cloud-proc-l { top: 10rem; }                /* 36 + 124 */
.process--pale .deco--cloud-proc-r { top: 30.5rem; }              /* 364 + 124 */
.process--pale .deco--process-plane { top: 22.321rem; }           /* 233.1 + 124 */

/* Square icons here, against the homepage's 42 x 52 portrait box. */
.process--pale .process-card__icon { width: 2.875rem; height: 2.875rem; }   /* 46 */

/* Every title on this page runs to two lines, so they are set tight and all at
   one size — the homepage steps its two longest down to keep them on one line,
   which has nothing to do here. */
.process--pale .process-card__title,
.process--pale .process-card:nth-child(4) .process-card__title,
.process--pale .process-card:nth-child(5) .process-card__title {
  font-size: 1.5rem;             /* 24 */
  line-height: 1;
}

/* 14, not the homepage's 16: three of the five steps run to three lines, and
   that plus a two-line title is what the 206px card has room for. */
.process--pale .process-card__text { font-size: 0.875rem; }       /* 14 */

/* ──────────────── About page — why choose (sky band) ──────────────── */

/* The homepage's Why-choose section on a sky band instead of pale. Its wave
   swaps to `pale-top.svg`, which carries the pale of the process section above
   and is transparent below the curve, so this background shows through.
   Scoped to a modifier; the homepage keeps its pale version.
   Geometry, copy and grid are the homepage's, untouched. */
.why--sky { background: var(--sky); }

/* ───────── About page — for authors with stories to share ───────── */

/* Meets the sky band above at a flat edge, as the homepage's why → process
   boundary does; the design draws no divider here. */
.stories { height: 45rem; background: var(--cream); }   /* 720 */

.stories .eyebrow { padding-top: 3.4375rem; }           /* 55 */
.stories .section-title { margin-top: 1.0625rem; }      /* 17 → 100 */

/* 28/500 on a 45px line — heavier and larger than the shared .section-lead,
   which is 22/400. */
.stories__lead {
  margin: 0.625rem auto 0;       /* 10 */
  width: 50rem;                  /* 800 — holds the design's two lines */
  text-align: center;
  font-weight: 500;
  font-size: 1.75rem;            /* 28 */
  line-height: 2.8125rem;        /* 45 */
}

.stories-grid {
  display: grid;
  grid-template-columns: repeat(4, 21.3125rem);   /* 341 */
  gap: 1.7875rem;                                 /* 28.6 */
  width: 90.625rem;                               /* 1450 */
  margin: 1.6875rem auto 0;                       /* 27 → 275 */
}

.story-card {
  /* Each artwork's own design width, carried as a custom property so the
     reflow below can hand all four back to `auto` in one rule. They must be
     set in rem, not left at the file's natural pixel size: the artboard's root
     font-size tracks the viewport, so a pixel-sized image keeps its full 292
     while the card around it shrinks — artwork 03 (the narrowest, and so the
     only one the card never has to clamp) then stood taller than the art box
     and pushed its title and text below the other three. */
  --story-art-w: 18.25rem;       /* 292 */
  height: 20.375rem;             /* 326 */
  padding: 0.625rem 1rem 0;      /* 10 */
  background: var(--pale);
  border-radius: 1.25rem;        /* 20 */
  text-align: center;
}
.story-card:nth-child(2) { --story-art-w: 18.875rem; }   /* 302 */
.story-card:nth-child(3) { --story-art-w: 13.375rem; }   /* 214 */
.story-card:nth-child(4) { --story-art-w: 17.8125rem; }  /* 285 */

/* A fixed-height box with the illustration standing on its floor. The four
   artworks differ in height (195 / 173 / 174 / 165), and this is what keeps
   the titles on one line across the row. */
.story-card__art {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 12.1875rem;            /* 195 — the tallest of the four */
}
.story-card__art img {
  width: var(--story-art-w);
  max-width: 100%;
  max-height: 100%;              /* never taller than the box it stands in */
  height: auto;
}

/* The art box bottom-aligns its illustration, so without this the tallest of
   the four sits flush on the title. */
.story-card__title { margin-top: 1rem; font-weight: 600; font-size: 1.5rem; line-height: 1.17; }   /* 16 / 24 */

/* 246, not the card's full inner width: the design's two-line breaks need a
   column narrower than the box. */
.story-card__text {
  margin: 0.125rem auto 0;       /* 2 */
  width: 15.375rem;              /* 246 */
  font-size: 1rem;               /* 16 */
  line-height: 1.625;            /* 26 */
}

/* Closing note. The rule between icon and copy is the text block's own left
   border, so it stretches with the copy rather than needing an element. */
.stories__note {
  display: flex;
  align-items: center;
  width: 37.5rem;                /* 600 */
  height: 3.25rem;               /* 52 */
  margin: 2.09375rem auto 0;     /* 33.5 → 635 */
  padding-left: 2.625rem;        /* 42 */
  background: var(--pale);
  border-radius: 0.75rem;
}
.stories__note-icon { width: 2.8125rem; height: auto; flex: none; }   /* 45 */
.stories__note-text {
  margin-left: 0.9375rem;        /* 15 */
  padding-left: 0.875rem;        /* 14 */
  border-left: 1px solid rgba(20, 64, 104, 0.25);
  font-size: 1rem;               /* 16 */
  line-height: 1.375;            /* 22 */
}

/* ═══════════════════════════ Service pages ═══════════════════════════ */

/* Every service page (book-editing.php, book-cover-design.php,
   book-formatting.php and the five to follow) reuses the
   homepage sections, so each one carries a companion `svc-*` class beside the
   shared block: `class="services svc-services"`. Service-page work belongs in
   this block, written as `.svc-services .service-card { … }` — never as an edit
   to `.services` itself, which the homepage still owns. The companions are
   `.svc-hero`, `.svc-about`, `.svc-services`, `.svc-process`, `.svc-ages`,
   `.svc-genres`, `.svc-why`, `.svc-portfolio` and `.svc-faq`.

   Each lands after its shared block in source order, so a plain companion
   selector already outranks the block it overrides; no `!important` and no
   stacked selectors are needed for a straight property swap.

   The service pages reorder the sections, which breaks the homepage's band
   sequence — the bands and wave dividers are tuned to the homepage's order, so
   the colours no longer meet. The corrections go here once the reference crops
   for each section are in hand. */

/* ───────────────────────── Service page — ages ──────────────────────── */

/* The section drops the eyebrow, which is what carried the top padding, so the
   title takes it over and clears the wave. A lead joins it, and the longer card
   copy needs taller cards, so the band grows to hold both. */
.svc-ages { height: 44.9375rem; }                         /* 719 — grid ends at 677, plus the band's usual 42 */
.svc-ages .section-title { padding-top: 10.875rem; }      /* 174 — where the eyebrow used to put it */
.svc-ages .section-lead { margin-top: 0.875rem; }         /* 14 */
.svc-ages .age-card { height: 20rem; }                    /* 320 */

/* ─────────────── Formatting page — choose the right format ─────────────── */

/* Sits between the genres band and why-choose, and takes over the cream→pale
   wave that used to open why-choose — so the page steps into pale once, here,
   and why-choose carries on flat against it. */
.formats { height: 60.5625rem; background: var(--pale); }   /* 969 */
.wave--formats { width: 129.0356rem; height: 7.75rem; }     /* 2064.57 × 124 — as on why-choose */

.formats__title { padding-top: 11.5rem; }                   /* 184 — clears the 124 wave band */

.format-grid {
  display: grid;
  grid-template-columns: repeat(3, 16.6875rem);   /* 267 — the artwork's own width */
  gap: 5.1875rem;                                 /* 83 */
  width: 60.4375rem;                              /* 967 */
  margin: 3.5rem auto 0;                          /* 56 */
  text-align: center;
}
.format-card__art {
  width: 16.6875rem; height: 18.5625rem;          /* 267 × 297 */
  border-radius: 1rem;
  object-fit: cover;
}
.format-card__title {
  margin-top: 1.125rem;                           /* 18 */
  font-weight: 700;
  font-size: 1.375rem;                            /* 22 */
  line-height: 1.2;
}

/* The design's rule sits above the two notes, narrower than the row itself. */
.format-notes {
  display: grid;
  grid-template-columns: repeat(2, 27.875rem);    /* 446 */
  gap: 1.4375rem;                                 /* 23 */
  width: 57.1875rem;                              /* 915 */
  margin: 3.5rem auto 0;                          /* 56 */
  padding-top: 2.5rem;                            /* 40 */
  border-top: 1px solid rgba(20, 64, 104, 0.18);
}
.format-note {
  padding: 1.5rem 1.75rem 1.625rem;               /* 24 / 28 / 26 */
  background: #fff;
  border-radius: 1.125rem;                        /* 18 */
  box-shadow: var(--shadow-soft);
}
.format-note__icon  { width: 1.5rem; height: auto; }   /* 24 */
.format-note__title {
  margin-top: 0.625rem;                           /* 10 */
  font-weight: 700;
  font-size: 1.375rem;                            /* 22 */
  line-height: 1.2;
}
.format-note__text { margin-top: 0.375rem; font-size: 1rem; line-height: 1.5; }

/* ───────── Publishing page — publishing support for every kind of story ─────────
   Same grid as the formatting page, but six covers over two rows and no note cards under them, so the
   band has to grow: 184 title padding + 48 title + 56 + two 367.8 rows + the 40
   between them + the ~110 of trailing space the formatting page leaves. The row
   height is the art (297) + 18 + a two-line 22/1.2 label (52.8) — four of the six
   labels wrap at the 267 column width, as the design shows them. Row gap and band
   height are computed, not measured: check them in the measured pass. */
.bpb-formats { height: 73.375rem; }                 /* 1174 */
.bpb-formats .format-grid { row-gap: 2.5rem; }      /* 40 — column gap stays 83 */

/* ───────── Illustration page — find the perfect look for your book ─────────
   Six cards over two rows as on the publishing page, but the design diverges
   from there: landscape art instead of covers, titles ranged left rather than
   centred, and a sentence under each title. The art is the supplied 417 × 262
   at its own size, so nothing is cropped and the grid widens to 1347
   (3 × 417 + 2 × 48) from the publishing page's 967.

   Row height is art (262) + 18 + a 22/1.2 title (26.4) + 6 + a two-line 16/1.5
   sentence (48) = 360.4. Band: 184 title padding + 48 title + 56 + 360.4 + 28
   + 360.4, plus the ~110 of trailing space the other format bands leave.

   Row gap and band height are computed, not measured: check them in the
   measured pass. */
.bil-formats { height: 71.6875rem; }                /* 1147 */
.bil-formats .format-grid {
  grid-template-columns: repeat(3, 26.0625rem);     /* 417 — the art's own width */
  gap: 1.75rem 3rem;                                /* 28 / 48 */
  width: 84.1875rem;                                /* 1347 */
  text-align: left;
}
.bil-formats .format-card__art {
  width: 26.0625rem; height: 16.375rem;             /* 417 × 262 */
}
.bil-formats .format-card__text {
  margin-top: 0.375rem;                             /* 6 */
  font-size: 1rem;
  line-height: 1.5;
}

/* ───────── Formatting page — formatting for the way readers read ───────── */

/* A cream band between the pale format section and why-choose, so it opens
   with a pale→cream wave and why-choose takes its cream→pale wave back. */
.readformat { height: 56.25rem; background: var(--cream); }   /* 900 */
.wave--readformat { height: 9rem; }                           /* 144 */

.readformat__title { padding-top: 12.0625rem; }               /* 193 — clears the 144 wave band */

.readformat-grid {
  display: grid;
  grid-template-columns: repeat(2, 34.5625rem);   /* 553 */
  gap: 3.6875rem;                                 /* 59 */
  width: 72.8125rem;                              /* 1165 */
  margin: 2.5625rem auto 0;                       /* 41 */
}

.readformat-card {
  padding: 2.0625rem;                             /* 33 */
  background: #fff;
  border-radius: 1.5rem;                          /* 24 */
  box-shadow: var(--shadow-soft);
}
.readformat-card__art {
  width: 30.4375rem; height: 14.625rem;           /* 487 × 234 — the artwork's own size */
  border-radius: 0.75rem;
  object-fit: cover;
}

/* The rule under each heading is the heading's own bottom border, so it spans
   the column rather than needing an element of its own. */
.readformat-card__title {
  margin-top: 1.75rem;                            /* 28 */
  padding-bottom: 0.875rem;                       /* 14 */
  border-bottom: 1px solid rgba(20, 64, 104, 0.18);
  font-weight: 700;
  font-size: 1.375rem;                            /* 22 */
  line-height: 1.2;
}

.readformat-list { margin-top: 1.25rem; }         /* 20 */
.readformat-list li {
  display: flex;
  align-items: center;
  gap: 0.625rem;                                  /* 10 */
  min-height: 2.5rem;                             /* 40 — the design's row pitch */
  font-size: 1rem;
  line-height: 1.4;
}
/* Inline SVG presentation lives here rather than on the element, as it does
   for the genre, carousel and FAQ icons. */
.readformat-check {
  width: 1rem; height: 1rem; flex: none;          /* 16 */
  fill: none;
  stroke: rgba(20, 64, 104, 0.55);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ───────── Publishing page — publishing for the way readers read ─────────
   The illustration page was cloned from this one but its design diverged
   completely — see `.bil-chars` below — so these rules are the publishing
   page's alone again.

   The same band and the same two-column grid, but four cards over two rows
   instead of the formatting page's two, and each is art + heading + a single
   sentence rather than a checklist. So the heading drops its rule here and the
   `.readformat-list` rules above simply never apply.

   The art is 487 × 227, the supplied 397 × 185 scaled to the card's inner
   width, so `object-fit` has nothing to crop. `l-4` is the placeholder the
   design hands the fourth card — a 344 × 54 info bar, not a cover — so that
   card sits at its own size: the bar is centred at 344 × 54 instead of being
   blown up to fill the art slot, and `align-self: start` keeps the card from
   stretching to the row, which is how the design shows it — noticeably shorter
   than the eBook card beside it. Swap the placeholder for real art and both
   `--note` classes come off with it.

   Row gap and band height are computed, not measured: check them in the
   measured pass. Row 2's height is set by the eBook card, not the short one. */
.bpb-readformat { height: 72.6875rem; }                          /* 1163 */
.bpb-readformat .readformat-grid { row-gap: 1.5rem; }            /* 24 — column gap stays 59 */
.bpb-readformat .readformat-card__art { height: 14.1875rem; }    /* 227 */
.bpb-readformat .readformat-card__title { padding-bottom: 0; border-bottom: 0; }
.bpb-readformat .readformat-card__text {
  margin-top: 0.6875rem;                                         /* 11 */
  font-size: 1rem;
  line-height: 1.5;
}
.bpb-readformat .readformat-card--note { align-self: start; }
.bpb-readformat .readformat-card__art--note {
  display: block;
  width: 21.5rem; height: 3.375rem;                              /* 344 × 54 — its own size */
  margin: 0 auto;
}

/* ───────── Illustration page — characters children remember ─────────
   Where the publishing page runs a four-card grid, the illustration page puts
   copy on the left and one tall character sheet on the right. That is the
   About section's shape mirrored, so the section carries `.about` and reuses
   `.about__copy` / `.about__body` / `.about__btn` / `.about__art` — which also
   means the sub-1440 stacking rules for those classes apply unchanged. This
   block only moves the two columns and sizes the art.

   Copy 273 with a 702 measure, so both paragraphs run to three lines as the
   design shows; art 523 × 622 at 1085 / 152, its own exported size.

   The art clears the 144 wave band by 8. An earlier pass put it at 37, inside
   the band, and its top corner showed against the pale side of the wave. The
   band is sized from the art, the taller column: 152 + 622 + 82 of trailing
   space.

   The copy is then centred on the art rather than top-aligned with it. Its
   content runs 393 — title 50, +20, two three-line 22/1.5 paragraphs at 99
   with the design's 33 between them, +39, button 53 — so it opens at the art's
   centre (152 + 311) less half of that: 266. Re-derive this if the copy
   changes length enough to reflow a paragraph.

   Band height and both column offsets are computed, not measured: check them
   in the measured pass. */
.bil-chars { height: 53.5rem; }                     /* 856 */
.bil-chars .about__copy {
  left: 17.0625rem;                                 /* 273 */
  top: 16.625rem;                                   /* 266 — centres the 393 of copy on the art */
}
.bil-chars .about__copy .section-title {
  margin-top: 0;
  width: 44rem;                                     /* 704 — the headline holds one line */
}
.bil-chars .about__body { width: 43.875rem; }       /* 702 */
.bil-chars .about__btn  { margin-left: 0; }
.bil-chars .about__art {
  left: 67.8125rem;                                 /* 1085 */
  top: 9.5rem;                                      /* 152 — 8 below the 144 wave band */
  width: 32.6875rem;                                /* 523 */
  height: 38.875rem;                                /* 622 */
}
.bil-chars .about__art img { width: 100%; height: auto; }

/* ──────────────────────── Service page — process ────────────────────── */

/* This page's steps run to longer titles and a third line of body copy, which
   overflows the homepage's fixed card. The titles come down a size and the
   cards take the remaining 17.8px; the section grows by the same amount, so the
   grid still ends clear of the wave. */
.svc-process { height: 30.05rem; }                   /* 480.8 — 463 + 17.813 */
.svc-process .process-card { height: 12rem; }        /* 224 — 206.187 + 17.813 */

/* 19.2 on every step. The shared block steps titles 4 and 5 down on their own,
   with a :nth-child that outranks a plain companion selector, so those two are
   named again here rather than left to win. */
.svc-process .process-card__title,
.svc-process .process-card:nth-child(4) .process-card__title,
.svc-process .process-card:nth-child(5) .process-card__title { font-size: 1.2rem; }   /* 19.2 */

/* The connectors leaving cards 2 and 4 are anchored to the card's bottom edge,
   so they move down with it; the ones on 1 and 3 hang off the top and don't. */
.svc-process .process-card:nth-child(2) .process-card__arrow { top: 11.7235rem; }
.svc-process .process-card:nth-child(4) .process-card__arrow { top: 11.3055rem; }

/* Cover design page. Its process closes with a button the editing and
   formatting pages' do not have, so the band grows to hold it. */
.bcd-process { height: 37.4375rem; }                 /* 599 — 480.8 + 56 gap + 53 button + 9 */
.bcd-process__cta { margin-top: 3.5rem; }            /* 56 */

/* ─────────────────────── Service page — services ────────────────────── */

/* Six cards in three columns, against the homepage's eight in four. The grid
   keeps its 1484 width and its gap, so the cards take up the slack. */
.svc-service-grid { grid-template-columns: repeat(3, 29.2387rem); }   /* 467.82 */
.svc-service-grid .service-card { width: 29.2387rem; }
/* Wide enough that each title breaks only where the design breaks it by hand. */
.svc-service-grid .service-card__title { width: 16.25rem; }           /* 260 */

/* ──────────────────────── Service page — about ──────────────────────── */

/* No mask here — this illustration is already cut to the blob shape, at exactly
   the size the homepage's mask box has, so it drops straight into its place. */
.svc-about__art {
  left: 6.875rem;                /* 110 — where the homepage's mask box lands */
  top: 10.25rem;                 /* 164 */
  width: 51.375rem;              /* 822 */
  height: 29rem;                 /* 464 */
}
.svc-about__art img { width: 100%; height: auto; }

/* The section drops the eyebrow, so the title takes the top of the column. */
.svc-about .about__copy { top: 8.3125rem; }                  /* 133 */
.svc-about .about__copy .section-title { margin-top: 0; }
.svc-about .about__btn { margin-left: 0; }

/* ──────────────────────── Service page — hero ───────────────────────── */

/* Three title lines and a four-line lead against the homepage's two and three,
   so the column starts higher and the gaps below it close up. */
.svc-hero .hero__copy  { top: 5.4375rem; }                    /* 87 */
.svc-hero .hero__title { width: 47.5rem; }                    /* 760 — set to break the editing page's headline into three lines */
.svc-hero .hero__lead  { margin-top: 1rem; width: 45rem; }    /* 16 / 720 — holds the design's four lines; the window is 705–735 */
.svc-hero .rating      { margin-top: 1.875rem; }              /* 30 */

/* Two buttons side by side, where the homepage hero has one. */
/* Capped to the headline's own measure and allowed to wrap. The buttons size to
   their labels now, and the copy column is absolutely positioned with no width
   of its own — without this a long pair would keep growing to the right and run
   under the hero illustration. Stacking is the graceful failure; overlapping the
   artwork is not. */
.svc-hero__actions {
  display: flex; flex-wrap: wrap;
  gap: 1.75rem;                  /* 28 */
  max-width: 47.5rem;            /* 760 — matches .svc-hero .hero__title */
  margin-top: 1.4375rem;         /* 23 */
}
.svc-hero__actions .btn { margin-top: 0; }
/* min-width, not width: these are the artboard's sizes, but a fixed width plus
   white-space:nowrap means a long label simply overruns the pill and ends up
   touching both edges. As a floor it still holds short labels to the design's
   proportions while letting longer ones grow and keep their padding. */
.svc-hero__actions .btn--primary { min-width: 14rem; }        /* 224 */
.svc-hero__actions .btn--sky     { min-width: 22.375rem; }    /* 358 */

/* Every service page but editing. Their headlines are two lines against the
   editing page's three, so the columns' own values differ from the shared
   `.svc-hero` ones above. Each page started from the cover design page's
   numbers because each was copied from it, directly or at one remove; they are
   listed separately so any one page's copy can be fitted on its own later.

   The `p + p` rule only fires where the lead is two paragraphs: cover design,
   formatting and illustration. Publishing and writing lead with one. */
.bcd-hero .hero__title,
.bfm-hero .hero__title,
.bpb-hero .hero__title,
.bil-hero .hero__title,
.bwr-hero .hero__title { width: 48.75rem; }                   /* 780 — breaks the cover headline after "That Spark", the publishing one after "Book", the illustration one after "Children's", the writing one after "Book Writing" */
.bcd-hero .hero__lead,
.bfm-hero .hero__lead,
.bpb-hero .hero__lead,
.bil-hero .hero__lead,
.bwr-hero .hero__lead  { width: 44.375rem; }                  /* 710 */
.bcd-hero__lead p + p,
.bfm-hero__lead p + p,
.bpb-hero__lead p + p,
.bil-hero__lead p + p  { margin-top: 2.0625rem; }             /* 33 — the design's blank line */
.bcd-hero .svc-hero__actions .btn--primary,
.bcd-hero .svc-hero__actions .btn--sky,
.bfm-hero .svc-hero__actions .btn--primary,
.bfm-hero .svc-hero__actions .btn--sky,
.bpb-hero .svc-hero__actions .btn--primary,
.bpb-hero .svc-hero__actions .btn--sky,
.bil-hero .svc-hero__actions .btn--primary,
.bil-hero .svc-hero__actions .btn--sky,
.bwr-hero .svc-hero__actions .btn--primary,
.bwr-hero .svc-hero__actions .btn--sky { min-width: 19.25rem; }   /* 308 */

/* No mask here — this PNG is already cut out, so it is placed at its exported
   size, as the About page's hero art is. */
.svc-hero__art {
  left: 60.3125rem;              /* 965 — 965 + 955 lands the art flush on the artboard's right edge */
  top: 3.9375rem;                /* 63 */
  width: 59.6875rem;             /* 955 */
  height: 42.5rem;               /* 680 */
}
.svc-hero__art img { width: 100%; height: auto; }

/* The About page's flat cloud art, placed twice over the illustration's left
   edge. height:auto is needed because the img's own height attribute is a
   presentational hint and would otherwise hold both copies at 102. */
.svc-hero__cloud { height: auto; z-index: 3; }
.svc-hero__cloud--1 { left: 67.1875rem; top: 5.625rem;   width: 11.25rem; }   /* 1075 / 90  / 180 */
.svc-hero__cloud--2 { left: 58.5625rem; top: 20.4375rem; width: 12.625rem; }  /* 937  / 327 / 202 */

/* ═══════════════════════════ Policy pages ═══════════════════════════ */

/* terms.php, privacy.php, revision-policy.php and refund-policy.php share
   these two sections. Unlike the rest of the site they were never drawn on the
   1920 artboard, so they are built fluid from the outset: everything is in rem,
   which keeps them scaling with the artboard's root font-size above 1440px, but
   the measure is capped rather than pinned to a column, so the one set of rules
   carries all the way down and the responsive block below needs only the type
   sizes. A flat colour change divides the two bands — as the About page's
   stories section does — rather than a wave, which would need a matching
   artboard and reflow pair for a page that has no artboard. */

.legal-hero { background: var(--pale); padding-block: 4.25rem 3.25rem; }
.legal-hero__title { margin-top: 0.75rem; }
.legal-hero__meta {
  margin-top: 1.125rem;
  text-align: center;
  font-size: 1rem;
  color: rgba(20, 64, 104, 0.72);
}

.legal { background: var(--cream); padding-block: 3.75rem 4.5rem; }

/* 54rem holds roughly 70 characters a line at the body size — the comfortable
   measure for a page that is read through rather than scanned. */
.legal__body { width: min(54rem, 100%); margin-inline: auto; }

/* The reset clears heading and list formatting site-wide, so prose has to ask
   for it back. These are the only element selectors in the file; they are
   scoped to `.legal__body`, which is the one place the markup is prose rather
   than a named component. */
.legal__intro { font-size: 1.1875rem; line-height: 1.75; }        /* 19 */

.legal__body h2 {
  margin-top: 2.75rem;
  font-weight: 700;
  font-size: 1.625rem;                                            /* 26 */
  line-height: 1.25;
}
.legal__body h2:first-child { margin-top: 0; }
.legal__body h3 {
  margin-top: 1.75rem;
  font-weight: 700;
  font-size: 1.1875rem;                                           /* 19 */
  line-height: 1.35;
}
.legal__body p  { margin-top: 0.875rem; font-size: 1.0625rem; line-height: 1.75; }   /* 17 */
.legal__body ul { margin-top: 0.875rem; padding-left: 1.375rem; list-style: disc; }
.legal__body li { margin-top: 0.5rem; font-size: 1.0625rem; line-height: 1.7; }
.legal__body li::marker { color: rgba(20, 64, 104, 0.45); }

.legal__body a {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(20, 64, 104, 0.4);
}
.legal__body a:hover,
.legal__body a:focus-visible { text-decoration-color: currentColor; }

/* Closing contact block — the same pale card the About page's stories note
   uses, widened to the measure and set as a stack rather than a row. */
.legal__contact {
  margin-top: 2.75rem;
  padding: 1.75rem 2rem 2rem;
  background: var(--pale);
  border-radius: 1.25rem;
}
.legal__contact h2 { margin-top: 0; }

/* ═══════════════════════════ Responsive ═══════════════════════════ */

@media (max-width: 1439.98px) {

  /* Everything leaves the fixed artboard and flows normally. */
  .canvas {
    width: 100%; max-width: 1200px; height: auto;
    margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px);
  }

  /* [class] raises specificity above the per-section `.hero { height: … }`
     artboard rules, which would otherwise keep their fixed heights and clip. */
  main > section[class],
  .site-footer { height: auto; }

  .hero__copy, .about__copy, .why__copy, .about-hero__copy, .whoweare__copy,
  .footer-logo, .footer-menu, .footer-services, .footer-policies,
  .footer-contact, .footer-bar {
    position: static;
    width: auto;
    inset: auto;
  }

  /* The masked illustrations must keep a positioning context: their mask layer
     is absolutely placed against them, so going static would anchor it to the
     canvas and stretch it over the copy. */
  .hero__art, .about__art, .why__art, .about-hero__art, .whoweare__art {
    position: relative;
    width: auto;
    inset: auto;
  }

  .deco { display: none; }
  .wave { position: static; transform: none; width: 100%; height: auto; }

  /* Header */
  .site-header__inner { height: 84px; padding-inline: clamp(20px, 5vw, 48px); }
  #main { padding-top: 84px; }
  .site-header.is-stuck .site-header__inner { height: 64px; }
  .site-header.is-stuck .logo { transform: scale(0.78); }
  .logo { width: 72px; height: 70px; }
  .logo__art { width: 69px; } .logo__word { top: 46px; width: 72px; } .logo__sub { top: 65px; width: 65px; }

  .nav-toggle { display: flex; }
  /* Anchored to the header's own bottom edge so it follows the condensed height. */
  .primary-nav {
    position: absolute; inset: 100% 0 auto; flex-direction: column; align-items: stretch;
    padding: 20px clamp(20px, 5vw, 48px) 28px; background: var(--page);
    box-shadow: 0 18px 30px rgba(20, 64, 104, 0.14);
    transform: translateY(-130%); transition: transform 0.26s ease; z-index: 40;
  }
  .primary-nav.is-open { transform: translateY(0); }
  .primary-nav__list { flex-direction: column; align-items: stretch; margin: 0 0 16px; gap: 0; font-size: 18px; }
  .primary-nav__list > li { border-bottom: 1px solid rgba(20, 64, 104, 0.12); }
  .primary-nav__list > li > a,
  .primary-nav__trigger { display: block; width: 100%; padding: 13px 2px; text-align: left; }
  .primary-nav__list > li > a::after,
  .primary-nav__trigger::after { display: none; }
  .primary-nav__actions { flex-direction: column; align-items: stretch; gap: 12px; margin-left: 0; }

  /* Mega menu becomes a plain nested list that taps open. Hover and focus must
     not reveal it here — only the click handler's `.is-open` does, which is why
     this switches to `display` where the desktop rules use visibility. */
  .primary-nav__trigger { display: flex; align-items: center; justify-content: space-between; }
  .mega {
    position: static; width: auto; margin: 0 0 10px; padding: 4px 0 0;
    background: none; border-radius: 0; box-shadow: none;
    opacity: 1; visibility: visible; transform: none; transition: none;
    display: none;
  }
  .mega::before { display: none; }
  .has-mega.is-open .mega { display: block; }
  /* The panel is a nested list here, not a centred dropdown, so it must not
     keep the `translate(-50%)` the shared open/hover rule applies — that rule
     carries three classes and outranks `.mega` above, which is why the list
     was sliding half its own width off the left edge the moment it opened.
     Restated at the same weight; the laptop block below puts the centring
     transform back for the range where the panel really is a dropdown. */
  .has-mega:hover .mega,
  .has-mega:focus-within .mega,
  .has-mega.is-open .mega { transform: none; }
  .mega__grid { grid-template-columns: 1fr; gap: 2px; }
  .mega__link { padding: 10px 8px; gap: 12px; border-radius: 12px; }
  .mega__icon { width: 34px; height: 34px; }
  /* One column and a narrow screen: let both lines wrap again. */
  .mega__title,
  .mega__text { white-space: normal; overflow: visible; }
  .mega__title { font-size: 16px; }
  .mega__text { font-size: 14px; }
  .live-chat { justify-content: center; font-size: 17px; }

  /* Shared type */
  .eyebrow { font-size: clamp(14px, 2.4vw, 20px); text-align: center; }
  .section-title,
  .about__copy .section-title,
  .services .section-title,
  .portfolio .section-title { font-size: clamp(26px, 4.6vw, 38px); text-align: center; line-height: 1.12; }
  .section-lead { width: 100%; font-size: clamp(15px, 2.1vw, 18px); }
  .artboard-break { display: none; }
  .reflow-break { display: inline; }
  .btn { height: 48px; font-size: clamp(16px, 2.2vw, 20px); }
  .btn img { width: 22px; }

  /* Hero */
  .hero { padding-block: 40px 48px; }
  .hero .canvas { display: flex; flex-direction: column; gap: 28px; }
  .hero__copy { order: 2; text-align: center; }
  .hero__art { order: 1; width: 100%; height: auto; aspect-ratio: 976 / 680; }
  /* The artboard runs the art past the section's bottom edge, where the 1.2%
     the image leaves under itself is clipped away. Once the box reflows to sit
     flush on that edge the sliver shows as a white strip under the picture, so
     here the image fills its mask. */
  .hero__art-mask img { height: 100%; }
  .hero__title { width: 100%; margin-top: 12px; font-size: clamp(32px, 6.4vw, 56px); }
  .hero__lead { width: 100%; margin-top: 14px; font-size: clamp(15px, 2.3vw, 19px); line-height: 1.55; }
  .hero .btn { width: auto; margin-top: 24px; }
  .rating { justify-content: center; flex-wrap: wrap; white-space: normal; font-size: 13px; }
  .rating__stars img { width: 13px; }

  /* About page — hero. Same reflow as the homepage hero, but the illustration
     is nearly square, so it is capped rather than run to the full column. */
  .about-hero { padding-block: 40px 48px; }
  .about-hero .canvas { display: flex; flex-direction: column; gap: 28px; }
  .about-hero__copy { order: 2; text-align: center; }
  .about-hero__art {
    order: 1; width: 100%; max-width: 420px; height: auto; margin-inline: auto;
    z-index: 1;
  }

  /* The clouds go down with the rest of the artboard trim (`.deco` above),
     which left this illustration — a cut-out with no ground under it — floating
     by itself in a wide empty column, on the About hero and the contact banner
     alike. They come back here as sky around it: pinned to the canvas rather
     than the art box, so they sit out at the edges on a laptop and tuck in
     behind the cut-out's transparent margin on a phone. Widths are fluid for
     the same reason — a fixed cloud would swamp a 400px canvas.
     The art carries z-index 1 above, so it always passes in front. */
  .about-hero__cloud { display: block; z-index: 0; }
  .about-hero__cloud--1 {
    left: auto; right: 3%; top: 44px;  width: clamp(100px, 15vw, 205px);
  }
  .about-hero__cloud--2 {
    left: 3%;   right: auto; top: 268px; width: clamp(84px, 13vw, 176px);
  }
  .about-hero__cloud--3 {
    display: block; left: 12%; top: 96px; width: clamp(62px, 9vw, 122px);
  }

  /* The banner illustrations belong to the artboard only: below 1440 the
     plane and its clouds come down and the banner is copy alone. Covers the
     About page and the Contact page, which reuses this block's classes. */
  .about-hero__art,
  .about-hero__cloud { display: none; }

  .about-hero__title { width: 100%; margin-top: 12px; font-size: clamp(32px, 6.4vw, 56px); }
  .about-hero__lead { width: 100%; margin-top: 14px; font-size: clamp(15px, 2.3vw, 19px); line-height: 1.55; }
  .about-hero .btn { width: auto; margin-top: 24px; }
  .about-hero .rating { margin-top: 22px; }

  /* The contact banner's artboard values are two-class selectors, so they would
     otherwise outrank the fluid rules above and stay pinned down to 390px —
     the art box in particular would keep its left:1183 and fly off-canvas. */
  .contact-hero .about-hero__title,
  .contact-hero .about-hero__lead { width: 100%; }
  .contact-hero .btn { width: auto; }
  .contact-hero .about-hero__art {
    left: auto; width: 100%; max-width: 420px; height: auto;
  }

  /* Service page — hero. Same leak as the contact banner: the artboard values
     are two-class selectors, so they would outrank the fluid rules above and
     hold the copy at its 760px artboard width. The art box is a single class
     and already loses to `.hero__art` on source order, but it carries its own
     aspect ratio, since this illustration is 955 wide, not the shared 976. */
  .svc-hero .hero__title,
  .svc-hero .hero__lead { width: 100%; }
  .svc-hero__art { aspect-ratio: 955 / 680; }

  /* The two buttons stay on one line, as they do on the artboard. They were
     wrapping because each still carried the artboard's 308px floor and its
     full-size padding — about 630px of pills against a copy column only
     420-500px wide. The floor comes off and the pill scales with the column,
     which fits the longest pair ("Illustrate My Book" / "Discuss Your
     Illustration") with room to spare. */
  .svc-hero__actions {
    flex-wrap: nowrap; justify-content: flex-start;
    gap: clamp(8px, 1vw, 14px); margin-top: 24px;
  }
  /* Three classes to outrank the per-page `.bwr-hero .svc-hero__actions
     .btn--primary` min-widths, which are the same weight but come earlier. */
  .svc-hero .svc-hero__actions .btn {
    min-width: 0; width: auto; margin-top: 0;
    padding-inline: clamp(12px, 1.4vw, 20px);
    font-size: clamp(14px, 1.25vw, 17px);
    gap: clamp(6px, 0.7vw, 10px);
  }
  .svc-hero .svc-hero__actions .btn img { width: clamp(15px, 1.4vw, 18px); }

  /* About page — who we are. Art above the copy, same as the homepage About. */
  .whoweare { padding-block: 44px 56px; }
  .whoweare .canvas { display: flex; flex-direction: column; gap: 26px; }
  .whoweare__art { order: 1; width: 100%; max-width: 560px; height: auto; margin-inline: auto; }
  .whoweare__copy { order: 2; text-align: center; }
  .whoweare__copy .section-title { width: 100%; margin-top: 10px; }
  .whoweare__body {
    width: 100%; margin-top: 14px;
    font-size: clamp(15px, 2.2vw, 18px); line-height: 1.6;
  }
  .whoweare__body p + p { margin-top: 14px; }

  /* About page — our mission. No top padding: the section opens with a wave,
     and padding above it would show the sky as a seam over the transition. */
  .mission { padding-block: 0 56px; }
  .mission .eyebrow { padding-top: 0; margin-top: clamp(20px, 3.2vw, 44px); }
  .mission__title { margin-top: 10px; }
  .mission__body {
    width: 100%; margin-top: 14px;
    font-size: clamp(15px, 2.2vw, 18px); line-height: 1.6;
  }
  .mission__body p + p { margin-top: 14px; }

  /* About page — services. Unlike the homepage's copy this one has no wave of
     its own, so it takes padding on both edges. Two classes, so it beats
     `.services` whichever order the two land in. */
  .services.services--cream { padding-block: 44px 56px; }
  .services.services--cream .eyebrow { padding-top: 0; margin-top: 0; }

  /* About page — process. Opens with a wave, so no top padding: padding above
     it would show the section's own pale as a seam over the transition. */
  .process.process--pale { padding-block: 0 52px; }
  .process.process--pale .eyebrow { padding-top: 0; margin-top: clamp(20px, 3.2vw, 44px); }

  /* Contact page — form. Both columns leave the artboard and stack. */
  .contact-form { padding-block: 44px 56px; }
  .contact-form .canvas { display: flex; flex-direction: column; gap: 30px; }
  .contact-form__intro,
  .contact-form__form { position: static; width: 100%; inset: auto; }
  .contact-form__intro { text-align: center; }
  .contact-form__art { width: min(100%, 260px); margin-inline: auto; }
  .contact-form__title { margin: 14px 0 0; }
  .contact-form__text {
    width: 100%; margin: 10px 0 0;
    font-size: clamp(15px, 2.2vw, 18px); line-height: 1.55;
  }
  /* Fluid columns: the artboard's fixed 357 would overflow the canvas below
     ~1000px and the section's overflow:hidden would simply clip the right
     field out of sight. */
  .contact-form__form { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .field__input { height: 50px; padding-inline: 18px; font-size: 16px; }
  .field__input--area { height: 140px; padding-block: 14px; }
  .contact-form__send { height: 50px; font-size: 18px; }
  .contact-form__send img { width: 20px; }

  /* About page — for authors with stories to share */
  .stories { padding-block: 44px 56px; }
  .stories .eyebrow { padding-top: 0; }
  .stories .section-title { margin-top: 10px; }
  .stories__lead {
    width: 100%; margin-top: 12px;
    font-size: clamp(15px, 2.3vw, 19px); line-height: 1.55;
  }
  .stories-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
    width: 100%; gap: 20px; margin-top: 28px;
  }
  /* Off the artboard the cards are fluid, so the artworks' design widths go
     back to `auto` and each one is fitted to the art box instead. The box
     keeps the tallest artwork's ratio rather than a fixed height, so it still
     gives the four illustrations a common floor to stand on — without it the
     box collapsed onto each image and the row's titles and text landed at
     four different heights. */
  .story-card { --story-art-w: auto; height: auto; padding: 16px 16px 22px; border-radius: 18px; }
  .story-card__art { height: auto; aspect-ratio: 292 / 195; }
  /* "Parents and Story Creators" takes two lines here while the other three
     titles take one; reserving both keeps the paragraphs on a common line. */
  .story-card__title { min-height: 1.34em; font-size: clamp(18px, 2.6vw, 19px); }
  .story-card__text { width: 100%; font-size: 15px; }

  .stories__note {
    width: 100%; height: auto; margin-top: 26px; padding: 14px 16px;
  }
  .stories__note-text { font-size: 14px; line-height: 1.5; }

  /* Platforms */
  .platforms { height: auto; padding-block: 22px; }
  .platforms__group { gap: clamp(30px, 7vw, 64px); padding-right: clamp(30px, 7vw, 64px); }
  .platform-logo--ingram { width: min(203px, 26vw); }
  .platform-logo--kindle { width: min(211px, 26vw); }
  .platform-logo--forbes { width: min(162px, 22vw); }
  .platform-logo--amazon { width: min(139px, 20vw); }
  .platform-logo--herald { width: min(207px, 26vw); }

  /* About */
  .about { padding-block: 44px 56px; }
  .about .canvas { display: flex; flex-direction: column; gap: 26px; }
  .about__art { width: 100%; height: auto; aspect-ratio: 892 / 517; }
  .about__copy { text-align: center; }
  .about__copy .section-title { width: 100%; margin-top: 10px; }
  .about__body { width: 100%; margin-top: 14px; font-size: clamp(15px, 2.2vw, 18px); }
  .about__body p + p { margin-top: 14px; }
  .about__btn { margin: 22px 0 0; }

  /* The illustration page's character sheet borrows `.about__art` but is a tall
     523 x 622 portrait, not the section's landscape blob. Its artboard width
     and height are a two-class selector, so they outrank the rule above and
     survive the reflow; cleared here so the box follows the image instead of
     holding a fixed height the enlarged art would overflow.
     `inset` has to go with them: the same rule pins the box at left 1085 / top
     152 for the artboard, and `.about__art`'s reflow `inset: auto` is only a
     single class. The box stays in flow and keeps its place in the row, but
     paints 1085px to the right of it — off the canvas, where the section's
     overflow clips it — so the artwork simply never appeared. */
  .bil-chars .about__art { width: auto; height: auto; aspect-ratio: auto; inset: auto; }
  /* It is also the only `.about` section that opens with a wave, so `.about`'s
     44px top padding was laying a band of this section's cream above the
     transition — a seam between the pale band overhead and the wave's own
     pale. The other wave-led sections already set their top padding to 0. */
  .bil-chars { padding-top: 0; }
  /* Its headline and body are held at the artboard's 704/702 by two- and
     three-class selectors, which outrank `.about__copy .section-title` and
     `.about__body` above. In a column that is 44% of the canvas here, that ran
     both of them out under the character sheet. */
  .bil-chars .about__copy .section-title,
  .bil-chars .about__body { width: 100%; }

  /* Services */
  /* No top padding: these sections open with a wave, and padding above it
     would show the section's own colour as a seam over the transition. */
  .services { padding-block: 0 56px; }
  .services .eyebrow { padding-top: 0; margin-top: clamp(20px, 3.2vw, 44px); }
  .services .section-title { margin-top: 10px; }
  .service-grid { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); width: 100%; gap: 20px; margin-top: 28px; }
  .service-card { width: auto; height: auto; padding: 22px 22px 26px; border-radius: 24px; }
  /* The desktop modifier is a two-class selector, so it would otherwise hold the
     homepage cards at their artboard width here and overflow the auto-fit track.
     `.svc-service-grid` is the service pages' copy of that modifier and was
     missed: its cards stayed 467.82px wide inside a track a third of the
     viewport, so each one's body copy ran out under the card beside it. */
  .service-grid--three .service-card,
  .svc-service-grid .service-card { width: auto; }
  .service-grid--three .service-card__title,
  .svc-service-grid .service-card__title { width: auto; }
  .service-card__link::after { border-radius: 24px; }
  .service-card__icon { width: 44px; height: 44px; }
  .service-card__title { font-size: clamp(18px, 2.6vw, 22px); }
  .service-card__text { font-size: 15px; }
  .services .section-cta { margin-top: 30px; }

  /* Portfolio */
  .portfolio { padding-block: 0 56px; }
  .portfolio .eyebrow { padding-top: 0; margin-top: clamp(20px, 3.2vw, 44px); }
  .portfolio .section-title { margin-top: 10px; }
  .carousel { margin-top: 26px; padding-inline: 44px; }
  .carousel__viewport { width: 100%; }
  .carousel__track { gap: clamp(16px, 3vw, 44px); }
  .carousel__item { width: clamp(118px, 19vw, 200px); }
  .carousel__btn { top: 50%; transform: translateY(-50%); }
  .carousel__btn--prev { left: 0; }
  .carousel__btn--next { left: auto; right: 0; }
  .portfolio .section-cta { margin-top: 28px; }

  /* Why */
  .why { padding-block: 0 52px; }
  /* Same clearance below the wave as the other wave-opened sections. */
  .why .canvas { display: flex; flex-direction: column; gap: 24px; margin-top: clamp(20px, 3.2vw, 44px); }
  .why__art { width: 100%; max-width: 620px; margin-inline: auto; height: auto; aspect-ratio: 674 / 448; }
  .why__copy { width: 100%; text-align: center; }
  .why__copy .eyebrow, .why__title { margin-left: 0; }
  .why-grid { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 22px; margin-top: 24px; text-align: left; }
  .why-item__icon { width: 50px; height: 50px; }
  .why-item__title { font-size: clamp(17px, 2.5vw, 21px); }
  .why-item__text { font-size: 15px; }

  /* Process */
  .process { padding-block: 44px 52px; }
  .process .eyebrow { padding-top: 0; }
  .process .section-title { margin-top: 10px; }
  .process-grid { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); width: 100%; gap: 18px; margin-top: 28px; }
  .process-card { height: auto; padding: 20px 10px 24px; border-radius: 26px; }
  .process-card__arrow { display: none; }
  .process-card__icon { width: 50px; height: 50px; }
  .process-card__title { font-size: clamp(17px, 2.5vw, 21px); }
  .process-card__text { font-size: 15px; }

  /* The About page's artboard overrides are two-class selectors, so they would
     otherwise outrank the single-class rules above and keep its cards at their
     desktop sizes right down to 390px. */
  .process.process--pale .process-card__title,
  .process.process--pale .process-card:nth-child(4) .process-card__title,
  .process.process--pale .process-card:nth-child(5) .process-card__title {
    font-size: clamp(17px, 2.5vw, 21px);
    line-height: 1.17;
  }
  .process.process--pale .process-card__text { font-size: 15px; }

  /* The homepage's own process never got this override, so cards 4 and 5 kept
     the artboard's smaller 22px title — set there to hold two long headings on
     one line — while 1-3 reflowed to 21px. The 1px gap pushed those two cards'
     body copy off the row's baseline. The About and service blocks either side
     of this already do the same; `:nth-child()` counts as a class, so this
     needs all three to outrank the artboard rule. */
  .process-card:nth-child(4) .process-card__title,
  .process-card:nth-child(5) .process-card__title {
    font-size: clamp(17px, 2.5vw, 21px);
  }

  /* Same leak on the service page: its titles are set by two- and three-class
     selectors, and `.process-card { height: auto }` above is a single class. */
  .svc-process .process-card__title,
  .svc-process .process-card:nth-child(4) .process-card__title,
  .svc-process .process-card:nth-child(5) .process-card__title {
    font-size: clamp(17px, 2.5vw, 21px);
  }
  .process.svc-process .process-card { height: auto; }
  .process.process--pale .process-card__icon { width: 54px; height: 54px; }

  /* Ages */
  .ages { padding-block: 0 52px; }
  .ages .eyebrow { padding-top: 0; margin-top: clamp(20px, 3.2vw, 44px); }
  .ages .section-title { margin-top: 10px; }
  .age-grid { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); width: 100%; gap: 20px; margin-top: 28px; }
  .age-card { height: auto; padding: 22px 20px 26px; border-radius: 32px; }
  /* The service pages drop the eyebrow and push the title down with a 174px
     padding to where the eyebrow used to sit. Both of those are two-class
     selectors that outrank the rules above, so off the artboard the title kept
     that padding — a dead 174px of sky under the wave against 52px at the foot
     — and the cards kept a fixed 320px height. The title takes the eyebrow's
     opening gap instead, matched to the section's own bottom padding. */
  .svc-ages .section-title { padding-top: 0; margin-top: clamp(28px, 3.8vw, 52px); }
  .svc-ages .age-card { height: auto; }
  .age-card__art { width: 92px; height: 120px; }
  .age-card__title { font-size: clamp(19px, 2.8vw, 24px); }
  .age-card__text { font-size: 15px; }

  /* Genres */
  .genres { padding-block: 44px 52px; }
  .genres .eyebrow { padding-top: 0; }
  .genres .section-title { margin-top: 10px; }
  .genre-rows { gap: 14px; margin-top: 26px; }
  .genre-row { flex-wrap: wrap; gap: 14px; }
  .genre-pill { width: min(285px, 100%); height: 50px; font-size: clamp(16px, 2.6vw, 23px); }
  .genre-pill__icon { width: 24px; height: 24px; }

  /* Formats, and the read-format band under it — the formatting, publishing
     and illustration pages. The whole family had no reflow rules at all, so
     below 1440px it kept its artboard geometry: a 184px title padding that
     opened the band with a dead strip of colour, grids pinned at 967–1347px
     wide in fixed columns that ran off the right of the viewport, and art
     boxes at their exported pixel sizes. Each grid becomes fluid and each art
     box keeps its own ratio instead of a fixed width and height. */
  .formats { padding-block: 0 56px; }
  .formats__title { padding-top: 0; margin-top: clamp(28px, 3.8vw, 52px); }
  .format-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    width: 100%; gap: 32px 24px; margin-top: 28px;
  }
  .format-card__art { width: 100%; height: auto; aspect-ratio: 267 / 297; }
  .format-card__title { margin-top: 14px; font-size: clamp(18px, 2.6vw, 22px); }
  .format-notes {
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    width: 100%; gap: 20px; margin-top: 40px; padding-top: 28px;
  }
  .format-note { padding: 20px 22px 22px; }
  .format-note__title { font-size: clamp(18px, 2.6vw, 22px); }
  .format-note__text { font-size: 15px; }

  /* The illustration page's own grid: landscape art, ranged left, and its own
     column width — all two-class selectors, so they need clearing too. */
  .bil-formats .format-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    width: 100%;
  }
  .bil-formats .format-card__art { width: 100%; height: auto; aspect-ratio: 417 / 262; }

  .readformat { padding-block: 0 56px; }
  .readformat__title { padding-top: 0; margin-top: clamp(28px, 3.8vw, 52px); }
  .readformat-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    width: 100%; gap: 24px; margin-top: 28px;
  }
  .readformat-card { padding: 24px; }
  .readformat-card__art,
  .bpb-readformat .readformat-card__art { width: 100%; height: auto; aspect-ratio: 487 / 234; }
  /* The publishing page's fourth card holds a 344 x 54 info bar, not a cover,
     so it keeps its own size rather than being blown up to the art slot. */
  .bpb-readformat .readformat-card__art--note {
    width: min(344px, 100%); height: auto; aspect-ratio: 344 / 54;
  }
  .readformat-card__title { margin-top: 20px; font-size: clamp(18px, 2.6vw, 22px); }
  .readformat-card__text { font-size: 15px; }
  .readformat-list li { font-size: 15px; min-height: 34px; }

  /* Policy pages — the rules above are already fluid, so only the type steps
     down with the viewport. */
  .legal-hero { padding-block: 48px 40px; }
  .legal-hero__meta { font-size: 15px; }
  .legal { padding-block: 44px 56px; }
  .legal__intro { font-size: clamp(16px, 2.2vw, 19px); }
  .legal__body h2 { margin-top: 36px; font-size: clamp(20px, 3vw, 26px); }
  .legal__body h3 { margin-top: 24px; font-size: clamp(17px, 2.4vw, 19px); }
  .legal__body p,
  .legal__body li { font-size: clamp(15px, 2.1vw, 17px); }
  .legal__contact { margin-top: 36px; padding: 22px 22px 26px; }

  /* Testimonials */
  .testimonials { padding-block: 0 52px; }
  .testimonials .eyebrow { padding-top: 0; margin-top: clamp(20px, 3.2vw, 44px); }
  .testimonials .section-title { margin-top: 10px; }
  .testimonials .section-lead { margin-top: 12px; }
  .testimonials__viewport { width: 100%; margin-top: 30px; }
  .testimonial-track { gap: clamp(16px, 3vw, 26px); }
  /* The card drops its Figma coordinates and becomes a normal flow card, so the
     text can be read; the yellow plate stays as a peek behind its lower edge. */
  .testimonial { height: auto; max-width: 420px; width: 100%; margin-inline: auto; padding-bottom: 16px; }
  .testimonial__plate { left: 16px; right: 16px; top: auto; bottom: 0; width: auto; height: 56px; border-radius: 16px; }
  .testimonial__card  {
    position: relative; left: auto; top: auto; width: 100%; height: auto;
    padding: 18px 18px 20px 100px; border-radius: 16px;
  }
  .testimonial__avatar { left: 18px; top: 20px; width: 66px; height: 76px; border-radius: 33px; }
  .testimonial__content { position: static; width: auto; }
  .testimonial__stars img { width: 13px; height: 13px; }
  .testimonial__stars span { margin-left: 6px; font-size: 11px; }
  .testimonial__text { margin-top: 8px; font-size: 14px; line-height: 1.45; }
  .testimonial__name { margin-top: 10px; font-size: 13px; }
  .testimonial__role { margin-top: 3px; font-size: 11px; }
  .testimonial__badge { left: auto; right: 12px; top: 14px; width: 20px; }
  /* The old fixed 34px width made this flex row narrower than its own three
     dots and pinned it to the left of the band; `justify-content: center` had
     nothing to centre inside. Sized to its content and centred by auto
     margins, it sits under the middle of the carousel as the design has it. */
  .testimonials__dots { width: fit-content; margin: 30px auto 0; }

  /* FAQ */
  .faq { padding-block: 44px 52px; }
  .faq .section-title { padding-top: 0; }
  .faq-list { width: 100%; max-width: 922px; margin-top: 26px; gap: 14px; }
  .faq-item__question { padding: 12px 18px; font-size: clamp(15px, 2.2vw, 19px); }
  .faq-item__chevron { width: 16px; height: 10px; }
  .faq-item__answer { padding: 12px 18px 0; font-size: 15px; }

  /* CTA */
  /* meadow-banner.png is 2170×725 with the artwork in rows 111–613 — flat
     white above and below it — and the footer's navy wave painted along the
     artwork's foot. Stretching it over the whole section with `object-fit:
     cover` only lands on that band while the section stays 23.18% of its own
     width tall, the band's own ratio. The copy here is set in fixed pixels
     rather than the artboard's rem, so it outgrew the band as the viewport
     narrowed and the crest came out under the button.
     So the image is given the band's ratio outright and parked on the
     section's floor — the navy therefore always runs into the footer — and
     the section grows upward in the cream that every page's last section
     already ends in. Wide, the copy still sits on the sky; the narrow rule
     further down lifts it onto the cream rather than zooming the meadow until
     the girl and the book stack are cropped off its edges. */
  .cta { padding-block: 64px 84px; background: var(--cream); }
  .cta__bg {
    left: 0; top: auto; bottom: 0;
    width: 100%; height: auto;
    /* 492, not the artwork's full 503: rows 111 and 613 are the anti-aliased
       edge of the fade to the white margin, and at the exact bounds rounding
       let the bottom one through as a hairline above the footer. This keeps
       the crop ~5 rows inside the artwork at both ends, where there is only
       navy below and sky above to lose. */
    aspect-ratio: 2170 / 492;
    transform: none; object-fit: cover;
  }
  .cta .eyebrow { padding-top: 0; }
  .cta .section-title { margin-top: 10px; }
  /* The artboard holds this lead to 801 of its 1920 so it sits in the clear
     middle of the meadow. At `width: 100%` it ran the full canvas and its
     first line crossed the girl on one side and the book stack on the other;
     capped, it stays inside the band's open centre. */
  .cta .section-lead { max-width: 760px; margin: 12px auto 0; }
  /* `width: auto` alone left the button stretched edge to edge: the artboard
     rule above sets `display: flex`, so the pill is a block-level box and auto
     resolves to the full canvas. It has to be sized to its label instead, then
     centred. */
  .cta .btn { width: fit-content; margin: 24px auto 0; }

  /* Footer */
  .site-footer { padding-block: 34px 28px; }
  /* Padding is restated, not just zeroed: the desktop row's `.site-footer
     .canvas` rule outranks the reflow block's plain `.canvas` padding-inline. */
  .site-footer .canvas {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 28px;
    padding: 0 clamp(20px, 5vw, 48px);
  }
  .footer-logo { grid-column: 1 / -1; position: relative; width: 104px; height: 100px; margin: 0 auto 6px; }
  .footer-logo__art { width: 100px; } .footer-logo__word { top: 66px; width: 104px; } .footer-logo__sub { top: 93px; width: 94px; }
  .footer-heading { font-size: 21px; }
  .footer-menu ul, .footer-policies ul { margin-top: 10px; font-size: 16px; }
  .footer-menu li { line-height: 2; }
  .footer-services__cols { flex-direction: column; gap: 0; margin-top: 10px; font-size: 16px; }
  .footer-services li, .footer-policies li { line-height: 2; white-space: normal; }
  .footer-contact { margin-top: 0; font-size: 14px; }
  .footer-bar {
    grid-column: 1 / -1; width: 100%; flex-wrap: wrap; gap: 20px;
    justify-content: center; margin-top: 10px; padding-top: 20px;
  }
  .payments { flex-wrap: wrap; justify-content: center; gap: 18px; }
  .pay--visa { font-size: 22px; } .pay--discover { font-size: 17px; } .pay--amex { font-size: 11px; }
  .pay__circles { width: 30px; height: 19px; }
  .pay__circles::before, .pay__circles::after { width: 19px; height: 19px; }
  .pay__dot { width: 11px; height: 11px; }
  .social a { width: 34px; height: 34px; }
  .social__icon { width: 18px; height: 18px; }
}

/* Below roughly 1100px the banner's sky band — 18.99% of the viewport's width
   — is shorter than the CTA copy, so the copy can no longer sit inside it.
   The bottom padding is grown to the band's full height plus a gap, which
   lifts the whole block clear and leaves the meadow as a strip along the
   section's foot. The alternative, scaling the banner up until the sky is
   deep enough again, crops its width by a fifth or more and takes the girl
   and the book stack with it. */
@media (max-width: 1099.98px) {
  .cta { padding-bottom: calc(22.67vw + 34px); }
}

/* ── Laptop / large tablet ──────────────────────────────────────────────
   The reflowed layout still has plenty of width here, so the design's
   two-column rhythm and column counts come back. */
@media (min-width: 900px) and (max-width: 1439.98px) {

  .hero .canvas,
  .about .canvas,
  .why .canvas { flex-direction: row; align-items: center; gap: clamp(28px, 4vw, 56px); }

  .hero .eyebrow, .about .eyebrow, .why .eyebrow { text-align: left; }
  .about__copy .section-title,
  .why__copy .section-title { text-align: left; }

  .hero__copy { order: 1; flex: 1 1 52%; min-width: 0; text-align: left; }
  .hero__art  { order: 2; flex: 1 1 48%; min-width: 0; }
  .rating { justify-content: flex-start; }

  section.about-hero .rating {
    justify-content: center;
}

  /* Hero — the artboard runs the illustration off the bottom-right corner of
     the band (its frame ends at x1941 / y743 against a 1920 x 726 section).
     Restored here rather than floating the art in a padded box: the column
     sits on the section's bottom edge and bleeds to the viewport's right,
     which `main > section`'s overflow then clips.

     The negative margin is exactly the distance from the canvas's content edge
     out to the viewport — its own padding plus the centring gutter. A margin
     percentage resolves against the flex container's content box, so
     `50% - 50vw` is that distance at every width in this range, with no
     breakpoint to keep in step. */
  .hero { padding-block: 40px 0; }
  .hero .canvas { align-items: flex-end; gap: clamp(20px, 2.6vw, 40px); }
  .hero__copy { flex: 1 1 auto; padding-bottom: 52px; }
  .hero__art {
    flex: none;
    width: calc(50vw + 1rem);
    margin-right: calc(50% - 50vw);
  }
  /* The column is narrower than it was, so the headline steps down with it. */
  .hero__title { font-size: clamp(30px, 3.6vw, 50px); }

  /* About — the illustration carries this section, so it takes the larger
     share of the row and the gutter tightens to give it the room. Applies to
     the service pages' about band and the illustration page's character sheet
     too: both reuse these classes. */
  .about .canvas { gap: clamp(24px, 3vw, 44px); }
  .about__art  { flex: 1 1 56%; min-width: 0; }
  .about__copy { flex: 1 1 44%; min-width: 0; text-align: left; }

  /* The About page's "Who we are" is that same component mirrored — copy left,
     art right. It was still stacking here while the homepage's went side by
     side, which left its illustration capped at 560px and the two pages
     reading differently. */
  .whoweare .canvas {
    flex-direction: row; align-items: center; gap: clamp(24px, 3vw, 44px);
  }
  .whoweare .eyebrow,
  .whoweare__copy .section-title { text-align: left; }
  .whoweare__copy { order: 1; flex: 1 1 44%; min-width: 0; text-align: left; }
  .whoweare__art  {
    order: 2; flex: 1 1 56%; min-width: 0; max-width: none; margin-inline: 0;
  }

  .why__art  { flex: 0 1 46%; min-width: 0; max-width: 560px; margin-inline: 0; }
  .why__copy { flex: 1 1 54%; min-width: 0; text-align: left; }
  .why-grid  { text-align: left; }

  /* The column counts the artboard uses. Services runs three across, not the
     artboard's four: every page carries six cards, so four left a ragged 4 + 2
     where three gives the even 3 x 3 block. */
  .why-grid         { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-grid     { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .age-grid         { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Same reasoning for the format bands: six cards, so `auto-fit` found room
     for four and left a ragged 4 + 2 where three gives an even 3 x 3 block.
     Read-format carries four and the artboard pairs them, so two across.
     The illustration page's grid is named by a two-class selector, which would
     otherwise hold its own auto-fit track against the plain one here. */
  .format-grid,
  .bil-formats .format-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .readformat-grid  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .testimonial { width: calc((100% - 2 * clamp(16px, 3vw, 26px)) / 3); max-width: none; }

  /* Footer — four even columns. `auto-fit` with a 190px floor fitted five
     tracks in this range, so the four blocks sat bunched to the left with a
     whole empty column beside them and uneven-looking gutters. Fixing the
     count keeps every gutter identical and squares the row off against the
     payment strip below, which spans the same four tracks. */
  .site-footer .canvas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* The genre pills keep the design's 4 · 3 · 2 · 1 pyramid from here up. One
   width for every pill, derived so the first row's four exactly fill the
   column; the shorter rows then centre under it. Below this the four no longer
   fit at a readable size, so the rows wrap instead. */
@media (min-width: 1024px) and (max-width: 1439.98px) {
  .genre-row  { flex-wrap: nowrap; gap: clamp(16px, 1.8vw, 26px); }
  .genre-pill {
    width: calc((100% - 3 * clamp(16px, 1.8vw, 26px)) / 4);
    font-size: clamp(15px, 1.7vw, 23px);
    white-space: nowrap;
  }
}

/* Two cards fit between tablet and the laptop tier; one card below that. */
@media (min-width: 600px) and (max-width: 899.98px) {
  .testimonial { width: calc((100% - clamp(16px, 3vw, 26px)) / 2); max-width: none; }
  .testimonial      { max-width: none; }
}

@media (min-width: 1100px) and (max-width: 1439.98px) {
  .process-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Hand-placed break that belongs to the laptop range only — see .laptop-break. */
@media (min-width: 1024px) and (max-width: 1439.98px) {
  .laptop-break { display: inline; }
}

/* Laptops have room for the real nav bar, so the hamburger stands down. */
@media (min-width: 1024px) and (max-width: 1439.98px) {
  .nav-toggle { display: none; }

  /* Three tracks: logo · links · actions. The logo and the actions size to
     their contents and the middle track takes everything left over, with the
     links centred inside it — so the leftover space falls as one even gap
     either side of the menu instead of collecting in a void after the logo.

     `display: contents` lifts the list and the actions out of the nav so each
     becomes a track of its own; the <nav> keeps its landmark, it just stops
     drawing a box. The bar keeps the 1200px `.canvas` width it had, so the
     logo still lines up with the page content under it. */
  .site-header__inner { display: grid; grid-template-columns: auto 1fr auto; }

  .primary-nav {
    display: contents;
    position: static; inset: auto; padding: 0;
    background: none; box-shadow: none; transform: none; z-index: auto;
  }
  .logo { justify-self: start; }
  .primary-nav__list {
    flex-direction: row; align-items: center; justify-self: center;
    margin: 0; gap: clamp(20px, 2.6vw, 44px);
    font-size: clamp(15px, 1.4vw, 20px);
  }
  .primary-nav__list > li { border-bottom: 0; }
  .primary-nav__list > li > a { display: inline; padding: 6px 2px; }
  .primary-nav__list > li > a::after,
  .primary-nav__trigger::after { display: block; }
  .primary-nav__actions {
    flex-direction: row; align-items: center; justify-self: end;
    gap: clamp(12px, 1.6vw, 24px); margin-left: 0;
  }

  /* The bar is back, so the mega menu is a dropdown panel again rather than the
     nested list the narrower breakpoint turns it into. */
  .primary-nav__trigger { display: inline-flex; width: auto; padding: 6px 2px; }
  .mega {
    position: absolute; top: 100%; width: min(50rem, calc(100vw - 3rem));
    margin-top: 14px; padding: 20px;
    background: #fff; border-radius: 20px;
    box-shadow: 0 1.25rem 2.5rem rgba(20, 64, 104, 0.16);
    display: block; opacity: 0; visibility: hidden;
    transform: translate(-50%, 10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  }
  .mega::before { display: block; top: -14px; height: 14px; }
  .has-mega:hover .mega,
  .has-mega:focus-within .mega,
  .has-mega.is-open .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
  .mega__grid { grid-template-columns: repeat(2, 1fr); gap: 4px 12px; }
  /* Back to one line per row, as on the full-width layout. */
  .mega__title,
  .mega__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .live-chat { font-size: clamp(14px, 1.3vw, 19px); }
}

@media (max-width: 599.98px) {
  /* The two-up fields go single file before the cards do. */
  .contact-form__form { grid-template-columns: 1fr; }

  /* The stacked pyramid gives way to the scrolling strip. */
  .genre-rows { display: none; }

  .genre-marquee {
    display: block;
    overflow: hidden;
    margin-top: 26px;
    /* Full bleed out of the canvas padding, so the strip runs edge to edge
       and pills enter and leave at the screen's own edges. */
    width: 100vw;
    margin-inline: calc(50% - 50vw);
  }
  /* Content-width pills: the 285px column width would put barely one on
     screen, and a strip reads better with several in view. */
  .genre-marquee .genre-pill {
    width: auto;
    flex: none;
    height: 46px;
    padding-inline: 20px;
    font-size: 17px;
    white-space: nowrap;
  }
  .genre-marquee .genre-pill__icon { width: 22px; height: 22px; }
}

/* With motion turned down the strip holds still and becomes a swipeable row
   instead — stopping the animation outright would hide most of the pills. */
@media (prefers-reduced-motion: reduce) {
  .genre-marquee { overflow-x: auto; }
  .genre-marquee__track { animation: none; }
}

@media (max-width: 560px) {
  /* Shorter track, so a shorter cycle keeps the scroll speed roughly constant. */
  .platforms__track { animation-duration: 13s; }

  .service-grid, .process-grid, .age-grid { grid-template-columns: minmax(0, 1fr); }
  .carousel { padding-inline: 34px; }
  .footer-bar { flex-direction: column; }

  /* Avatar moves above the quote so the text keeps a usable measure. */
  .testimonial__card { padding: 18px 16px 20px; }
  .testimonial__avatar { position: static; margin-bottom: 12px; }
  .testimonial__badge { top: 12px; right: 10px; }
}

/* ═══════════════════════════ Lead popup ═══════════════════════════════
   Sits at the end of the sheet so it is not caught by the responsive
   overrides above, which it has no reason to share. Measured in px rather
   than rem on purpose: a modal should be the same comfortable size on every
   screen, not scale with the 1920 artboard the way the page sections do. */

.lead-popup {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.lead-popup[hidden] { display: none; }

.lead-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 42, 72, 0.62);
  backdrop-filter: blur(3px);
  animation: lead-popup-fade 0.22s ease;
}

.lead-popup__panel {
  position: relative;
  display: grid;
  grid-template-columns: 40% 1fr;
  width: min(940px, 100%);
  max-height: min(680px, calc(100vh - 40px));
  background: var(--page);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(4, 48, 88, 0.34);
  overflow: hidden;
  animation: lead-popup-rise 0.26s cubic-bezier(0.2, 0.8, 0.3, 1);
}

/* The illustration is a wide landscape crop, so it is cover-fit and nudged
   toward the children rather than centred, which would cut them in half. */
.lead-popup__art { position: relative; background: var(--pale); overflow: hidden; }
.lead-popup__art img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 42% center;
}

.lead-popup__body {
  padding: 34px 36px 32px;
  overflow-y: auto;          /* the form scrolls, the panel stays put */
}

.lead-popup__title {
  margin-top: 6px;
  font-size: 30px;
  line-height: 1.2;
}
.lead-popup__lead {
  margin-top: 8px;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.55;
  color: rgba(20, 64, 104, 0.78);
}

.lead-popup__close {
  position: absolute;
  right: 12px; top: 12px;
  z-index: 2;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(4, 48, 88, 0.22);
  transition: transform 0.15s ease, background 0.15s ease;
}
.lead-popup__close svg {
  width: 17px; height: 17px;
  fill: none; stroke: var(--navy); stroke-width: 2.4; stroke-linecap: round;
}
.lead-popup__close:hover { transform: rotate(90deg); background: #fff; }

/* ── The form ────────────────────────────────────────────────────────── */

.lead-form { margin-top: 18px; display: grid; gap: 12px; }

/* Off-screen rather than display:none — a bot reading the markup should not
   be able to tell this field is the trap. */
.lead-form__trap {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

.lead-field { position: relative; margin: 0; }

.lead-field__input {
  display: block;
  width: 100%;
  height: 48px;
  padding-inline: 18px;
  background: #fff;
  border: 1px solid #d1dadb;
  border-radius: 10px;
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--navy);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lead-field__input::placeholder { color: rgba(20, 64, 104, 0.6); opacity: 1; }
.lead-field__input:focus {
  outline: none;
  border-color: var(--sky);
  box-shadow: 0 0 0 3px rgba(138, 208, 252, 0.45);
}
/* The browser flags a required field only once it has been interacted with
   and left, so this never shouts at someone still filling the form in. */
.lead-field__input:user-invalid { border-color: var(--coral); }

.lead-field__input--area {
  height: 96px;
  padding-block: 12px;
  resize: vertical;
}

/* appearance:none drops the native arrow so the caret below can sit in the
   same spot on every browser. */
.lead-field__input--select {
  appearance: none;
  padding-right: 44px;
  cursor: pointer;
}
.lead-field__input--select:invalid { color: rgba(20, 64, 104, 0.6); }   /* placeholder state */
.lead-field__caret {
  position: absolute;
  right: 18px; top: 50%;
  width: 13px; height: 8px;
  transform: translateY(-50%);
  fill: none; stroke: var(--navy); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none;           /* clicks pass through to the select */
}

.lead-form__send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 50px;
  margin-top: 4px;
  background: var(--sky);
  color: var(--cream);
  border-radius: 10px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 16px;
  transition: filter 0.15s ease;
}
.lead-form__send img { width: 22px; height: auto; filter: brightness(0) invert(1); }
.lead-form__send:hover:not(:disabled) { filter: brightness(1.06); }
.lead-form__send:disabled { opacity: 0.62; cursor: progress; }

.lead-form__status {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
}
.lead-form__status:empty { display: none; }
.lead-form__status--ok    { color: #1c7a4a; }
.lead-form__status--error { color: var(--coral); }

/* Stops the page behind scrolling while the modal is open. */
body.has-popup-open { overflow: hidden; }

@keyframes lead-popup-fade { from { opacity: 0; } }
@keyframes lead-popup-rise {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
}

@media (prefers-reduced-motion: reduce) {
  .lead-popup__backdrop,
  .lead-popup__panel { animation: none; }
  .lead-popup__close:hover { transform: none; }
}

/* ── Narrow screens ──────────────────────────────────────────────────── */

/* Below this the illustration would squeeze the fields past usefulness, so it
   becomes a short banner across the top instead of a side panel. */
@media (max-width: 760px) {
  .lead-popup { padding: 12px; }
  .lead-popup__panel {
    grid-template-columns: 1fr;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
  }
  .lead-popup__art { height: 132px; }
  .lead-popup__art img { object-position: center 38%; }
  .lead-popup__body { padding: 22px 20px 24px; }
  .lead-popup__title { font-size: 24px; }
}

/* On a short landscape phone even the banner is too much — the keyboard
   leaves almost no room, so every pixel goes to the fields. */
@media (max-height: 520px) {
  .lead-popup__art { display: none; }
  .lead-popup__panel { grid-template-columns: 1fr; }
}