/* ==========================================================================
   DIRECT ADVENTURES — GLOBAL DESIGN SYSTEM
   styles.css
   Contains: design tokens, resets, typography, layout primitives,
   and every reusable component class used across the site.
   Do not add page-specific rules here — see individual page notes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* Colour — core palette */
  --color-direct-navy: #06265C;
  --color-body-navy: #18345F;
  --color-adventure-pink: #F41483;
  --color-adventure-magenta: #D914A6;
  --color-adventure-purple: #67209A;
  --color-adventure-blue: #0969D7;
  --color-adventure-cyan: #09A9E6;

  --color-soft-pink: #FDEBF5;
  --color-soft-blue: #EAF7FD;
  --color-soft-purple: #F3ECFB;

  --color-white: #FFFFFF;
  --color-warm-white: #FFFEFC;
  --color-soft-grey: #F6F7FA;
  --color-border: #E8EDF5;

  /* Colour — gradients */
  --gradient-brand: linear-gradient(90deg, #F41483 0%, #D914A6 25%, #67209A 45%, #0969D7 72%, #09A9E6 100%);
  --gradient-izzie: linear-gradient(90deg, #F41483, #67209A);
  --gradient-anna: linear-gradient(90deg, #0969D7, #09A9E6);
  --gradient-footer: linear-gradient(120deg, #041E4A, #07356F);

  /* Colour — footer text */
  --color-footer-text-secondary: #C9D7EC;

  /* Typography */
  /* Typography roles:
     Poppins  = primary Direct Adventures brand/editorial typography —
                headlines, body copy, UI, navigation, buttons.
     Caveat   = character voice — handwritten annotations, personality
                moments, informal callouts. Never used for long body copy. */
  --font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-personality: 'Caveat', cursive;

  --fs-hero: clamp(2.75rem, 6vw, 4.5rem);
  --fs-h2: clamp(1.75rem, 3.2vw, 2.625rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.75rem);
  --fs-eyebrow: 0.875rem;
  --fs-body: 1.0625rem;
  --fs-body-lg: 1.125rem;
  --fs-nav: 0.9375rem;
  --fs-button: 0.9375rem;
  --fs-annotation: 1.5rem;

  --lh-hero: 0.95;
  --lh-body: 1.6;
  --lh-heading: 1.2;

  /* Radius */
  --radius-card: 22px;
  --radius-image: 18px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-card: 0 8px 30px rgba(6, 38, 92, 0.08);
  --shadow-card-hover: 0 14px 40px rgba(6, 38, 92, 0.12);

  /* Layout
     Density re-derived from the approved mock-up (measured at 1024px
     canvas width, scaled to this max-width) — sections sit much closer
     together than a generic marketing-site rhythm. */
  --max-width: 1440px;
  --section-padding-desktop: 48px 6%;
  --section-padding-mobile: 32px 20px;
  --header-height: 84px;
  --header-height-mobile: 72px;

  /* Motion */
  --transition-fast: 180ms ease;
  --transition-base: 260ms ease;
}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-body-navy);
  background-color: var(--color-warm-white);
  -webkit-font-smoothing: antialiased;
}

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

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

input,
button {
  font-size: inherit;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  line-height: var(--lh-heading);
  color: var(--color-direct-navy);
}

p {
  margin: 0;
}

/* Respect reduced motion universally */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Visible focus states — never suppressed */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-adventure-blue);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -60px;
  background: var(--color-direct-navy);
  color: var(--color-white);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-image);
  font-weight: 600;
  z-index: 1000;
  transition: top var(--transition-base);
}

.skip-link:focus {
  top: 1rem;
}

/* Screen-reader only content */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */

.container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: 6%;
}

.section {
  padding: var(--section-padding-desktop);
}

.section-inner {
  position: relative;
  max-width: var(--max-width);
  margin-inline: auto;
}

.section--soft-pink { background-color: var(--color-soft-pink); }
.section--soft-blue { background-color: var(--color-soft-blue); }
.section--soft-purple { background-color: var(--color-soft-purple); }
.section--soft-grey { background-color: var(--color-soft-grey); }
.section--white { background-color: var(--color-white); }

.section-head {
  max-width: 640px;
  margin-bottom: 3rem;
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

/* --------------------------------------------------------------------------
   4. TYPOGRAPHY COMPONENTS
   -------------------------------------------------------------------------- */

.eyebrow {
  display: inline-block;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-adventure-purple);
  margin-bottom: 0.75rem;
}

.eyebrow--izzie { color: var(--color-adventure-pink); }
.eyebrow--anna { color: var(--color-adventure-blue); }

.heading-hero {
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: var(--fs-hero);
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--color-direct-navy);
}

.heading-hero__accent {
  color: var(--color-adventure-pink);
}

.heading-2 {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: var(--fs-h2);
}

.heading-3 {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: var(--fs-h3);
}

.body-lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--color-body-navy);
}

.handwritten {
  font-family: var(--font-personality);
  font-weight: 600;
  font-size: var(--fs-annotation);
  line-height: 1.25;
}

.handwritten--pink { color: var(--color-adventure-pink); }
.handwritten--blue { color: var(--color-adventure-blue); }
.handwritten--navy { color: var(--color-direct-navy); }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: var(--fs-button);
  padding: 0.9rem 1.75rem;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  white-space: nowrap;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover {
    transform: none;
  }
}

.btn--primary {
  background: var(--gradient-brand);
  color: var(--color-white);
  box-shadow: var(--shadow-card);
}

.btn--secondary {
  background: var(--color-white);
  color: var(--color-direct-navy);
  border-color: var(--color-direct-navy);
}

.btn--secondary:hover {
  background-color: var(--color-soft-grey);
}

.btn--izzie {
  background: var(--gradient-izzie);
  color: var(--color-white);
}

.btn--anna {
  background: var(--gradient-anna);
  color: var(--color-white);
}

.btn--sm {
  padding: 0.65rem 1.35rem;
  font-size: 0.875rem;
}

.btn__icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   6. HEADER & NAVIGATION
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background-color: rgba(255, 254, 252, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: 6%;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.site-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.site-logo img {
  height: 44px;
  width: auto;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 2.25rem;
}

.primary-nav__list {
  display: flex;
  align-items: center;
  gap: 2.25rem;
}

.primary-nav__link {
  font-weight: 500;
  font-size: var(--fs-nav);
  color: var(--color-body-navy);
  padding: 0.5rem 0;
  position: relative;
}

.primary-nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--gradient-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-fast);
}

.primary-nav__link:hover::after,
.primary-nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

.primary-nav__link[aria-current="page"] {
  color: var(--color-direct-navy);
  font-weight: 600;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 0.5rem;
  border-radius: var(--radius-image);
  flex-direction: column;
  gap: 5px;
}

.nav-toggle__bar {
  width: 24px;
  height: 2px;
  background-color: var(--color-direct-navy);
  border-radius: 2px;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

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

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   7. MOBILE NAVIGATION
   -------------------------------------------------------------------------- */

.mobile-nav {
  display: none;
}

@media (max-width: 1023px) {
  .primary-nav__list {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }

  /* The mobile nav panel carries its own Join Adventure CTA (.mobile-nav__cta),
     so the header's copy is hidden here — this also removes the header's only
     overflow risk at very narrow widths (e.g. 320px). */
  .header-actions .btn {
    display: none;
  }

  .mobile-nav {
    position: fixed;
    top: var(--header-height);
    right: 0;
    bottom: 0;
    left: 0;
    height: calc(100vh - var(--header-height));
    height: calc(100dvh - var(--header-height));
    background-color: var(--color-warm-white);
    z-index: 499;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    transition: transform var(--transition-base);
    display: block;
  }

  .mobile-nav[data-open="true"] {
    transform: translateX(0);
  }

  .mobile-nav__list {
    display: flex;
    flex-direction: column;
    padding: 1.5rem 6%;
    gap: 0.25rem;
  }

  .mobile-nav__link {
    display: block;
    padding: 1rem 0;
    font-weight: 500;
    font-size: 1.125rem;
    color: var(--color-body-navy);
    border-bottom: 1px solid var(--color-border);
  }

  .mobile-nav__link[aria-current="page"] {
    color: var(--color-direct-navy);
    font-weight: 600;
  }

  .mobile-nav__cta {
    margin: 1.5rem 6% 0;
  }

  .mobile-nav__cta .btn {
    width: 100%;
  }

  body[data-nav-open="true"] {
    overflow: hidden;
  }
}

/* --------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding: 2rem 6% 0;
  overflow: hidden;
}

.hero__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  padding-bottom: 1.75rem;
}

.hero__content {
  max-width: 560px;
  position: relative;
  z-index: 2;
}

.hero__headline {
  margin: 0.75rem 0 1.5rem;
}

.hero__lead {
  margin-bottom: 1.5rem;
}

.hero__lead p {
  margin-bottom: 0.85rem;
}

.hero__lead p:last-child {
  margin-bottom: 0;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

/* ---- Hero stage: layered, open composition ----
   The production photo (Izzie + Anna only) is the sole raster image.
   Everything else — books, mug, annotations, paws — is an independent
   HTML/CSS component absolutely positioned within this stage, so each
   can move, resize or be hidden per breakpoint without ever touching
   the character photo itself. */
.hero__stage {
  position: relative;
  min-height: 400px;
  padding: 1.25rem 1.5rem 2rem 0.5rem;
}

.hero__portrait {
  position: relative;
  width: min(420px, 84%);
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  z-index: 3;
  border-radius: 48% 52% 54% 46% / 54% 48% 52% 46%;
  overflow: hidden;
}

.hero__portrait img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 18px 28px rgba(6, 38, 92, 0.18));
}

.hero__annotation {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-personality);
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.15;
  text-align: center;
  z-index: 4;
  margin: 0;
  pointer-events: none;
}

.hero__annotation--izzie {
  top: 0;
  left: -4%;
  color: var(--color-adventure-pink);
}

.hero__annotation--anna {
  top: -2%;
  right: -8%;
  color: var(--color-adventure-purple);
}

.hero__crown {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.hero__scribble {
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.hero__books {
  position: absolute;
  left: -2%;
  bottom: 4%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: 168px;
}

.hero__book {
  display: flex;
  align-items: center;
  padding: 0.55rem 1rem;
  border-radius: 8px;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--color-white);
  box-shadow: 0 6px 14px rgba(6, 38, 92, 0.16);
  margin-top: -6px;
}

.hero__book--1 {
  background: var(--gradient-izzie);
  transform: rotate(-2deg);
}

.hero__book--2 {
  background: var(--gradient-anna);
  transform: rotate(1.5deg);
}

.hero__book--3 {
  background: var(--color-direct-navy);
  transform: rotate(-1deg);
}

.hero__mug {
  position: absolute;
  right: 4%;
  bottom: 9%;
  z-index: 2;
  width: 100px;
  height: 100px;
  border-radius: 12px 16px 16px 16px;
  background: var(--color-white);
  border: 2px solid var(--color-border);
  box-shadow: 0 8px 20px rgba(6, 38, 92, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.65rem;
}

.hero__mug::after {
  content: '';
  position: absolute;
  right: -13px;
  top: 26%;
  width: 16px;
  height: 30px;
  border: 5px solid var(--color-white);
  outline: 2px solid var(--color-border);
  border-left: none;
  border-radius: 0 14px 14px 0;
}

.hero__mug span {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 0.625rem;
  line-height: 1.25;
  color: var(--color-direct-navy);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.hero__paw {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

.hero__paw--1 {
  bottom: -2%;
  left: 30%;
  width: 22px;
  opacity: 0.55;
  transform: rotate(-18deg);
}

.hero__paw--2 {
  bottom: 8%;
  right: 22%;
  width: 18px;
  opacity: 0.4;
  transform: rotate(12deg);
}

.hero__paw--3 {
  top: 44%;
  left: 4%;
  width: 16px;
  opacity: 0.3;
  transform: rotate(-6deg);
}

.hero__wave {
  position: relative;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  line-height: 0;
}

/* Perspective strip */
.perspective-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
}

.perspective-strip__item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-body-navy);
}

.perspective-strip__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   9. CHARACTER ROWS
   Rebuilt to match the approved mock-up literally: no card box, no
   shadow, no border — the photo and copy sit directly on the section
   background, exactly as the reference shows. Measured from the
   mock-up: image ≈32% of row width, positioned left; Izzie's portrait
   is taller/more dominant than Anna's (matches the reference).
   -------------------------------------------------------------------------- */

.meet-girls-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.meet-girls-bg__paw {
  position: absolute;
  opacity: 0.05;
}

.meet-girls-bg__paw--1 {
  width: 130px;
  top: 6%;
  right: 8%;
}

.meet-girls-bg__paw--2 {
  width: 110px;
  bottom: 4%;
  left: 4%;
}

.character-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  margin-top: 2rem;
  align-items: start;
}

.character-grid > * {
  min-width: 0;
}

.character-row {
  display: grid;
  grid-template-columns: 32% 1fr;
  gap: 1.5rem;
  align-items: start;
  min-width: 0;
  scroll-margin-top: calc(var(--header-height) + 24px);
}

.character-row__portrait {
  position: relative;
  aspect-ratio: 33 / 47;
  border-radius: var(--radius-image);
}

.character-row__portrait--anna {
  aspect-ratio: 29 / 40;
}

.character-row__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius-image);
}

.character-row__badge {
  position: absolute;
  top: -20px;
  left: 12%;
  width: 32px;
  height: 32px;
  z-index: 2;
  filter: drop-shadow(0 2px 4px rgba(6, 38, 92, 0.25));
}

.character-row__badge--anna {
  width: 44px;
  height: 26px;
  top: -14px;
  left: 8%;
}

.character-row__content {
  min-width: 0;
}

.character-row__name {
  font-family: var(--font-personality);
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 1;
  margin-bottom: 0.1rem;
}

.character-row--izzie .character-row__name { color: var(--color-adventure-pink); }
.character-row--anna .character-row__name { color: var(--color-adventure-blue); }

.character-row__role {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-body-navy);
  margin-bottom: 0.35rem;
}

.character-row__tagline {
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--color-body-navy);
  opacity: 0.75;
  margin-bottom: 0.5rem;
}

.character-row__question {
  font-family: var(--font-personality);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

.character-row__copy {
  max-width: 40ch;
}

.character-row__copy p {
  margin-bottom: 0.6rem;
  font-size: 0.9375rem;
}

.character-row__copy p:last-child {
  margin-bottom: 0;
}

.character-row__traits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem 1rem;
  margin: 0.85rem 0 1.1rem;
  max-width: 40ch;
}

.character-row__traits li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.875rem;
  font-weight: 500;
  min-width: 0;
}

.character-row__traits svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   10. BOOK CARDS
   -------------------------------------------------------------------------- */

.book-feature {
  display: grid;
  grid-template-columns: 34% 1fr;
  gap: 2.75rem;
  align-items: center;
}

.book-feature > * {
  min-width: 0;
}

.book-feature__cover-wrap {
  position: relative;
  margin-top: -3.5rem;
  padding-top: 1.25rem;
}

.book-feature__cover {
  width: 100%;
  max-width: 380px;
  margin-inline: auto;
  aspect-ratio: 3 / 4.5;
  border-radius: var(--radius-image);
  overflow: hidden;
  box-shadow: 0 24px 40px rgba(6, 38, 92, 0.22);
  transform: rotate(-5deg);
  transition: transform var(--transition-base);
}

.book-feature__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.book-feature__sticky-note {
  position: absolute;
  top: 0;
  right: 8%;
  background-color: var(--color-soft-pink);
  color: var(--color-direct-navy);
  padding: 1rem 1.25rem;
  border-radius: 4px;
  box-shadow: var(--shadow-card);
  max-width: 170px;
  font-family: var(--font-personality);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.25;
  transform: rotate(6deg);
  z-index: 2;
}

.book-feature__sticky-note--pending {
  background-color: var(--color-white);
  border: 1.5px dashed var(--color-border);
  color: var(--color-body-navy);
  opacity: 0.85;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 0.8125rem;
  text-align: center;
  padding: 0.9rem 1rem;
}

.book-feature__sticky-paw {
  width: 20px;
  height: 20px;
  display: block;
  margin: 0 auto 0.35rem;
  opacity: 0.5;
}

.book-feature__paw {
  position: absolute;
  pointer-events: none;
}

.book-feature__paw--1 {
  bottom: -1.5rem;
  right: 4%;
  width: 20px;
  opacity: 0.4;
  transform: rotate(-10deg);
}

.book-feature__paw--2 {
  bottom: -2.75rem;
  right: 16%;
  width: 15px;
  opacity: 0.28;
  transform: rotate(14deg);
}

.book-feature__title {
  font-family: var(--font-personality);
  font-weight: 700;
  font-size: clamp(1.875rem, 3.2vw, 2.75rem);
  line-height: 1.1;
  color: var(--color-direct-navy);
  margin: 0.35rem 0 0.15rem;
}

.book-feature__subtitle {
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--color-adventure-purple);
  margin-bottom: 0.85rem;
}

.book-feature__opening p {
  font-weight: 600;
  color: var(--color-direct-navy);
  margin-bottom: 0.3rem;
}

.book-feature__opening {
  margin-bottom: 0.85rem;
}

.book-feature__description p {
  margin-bottom: 0.6rem;
  font-size: 0.9375rem;
}

.book-feature__description p:last-child {
  margin-bottom: 0;
}

.book-feature__supporting {
  font-style: italic;
  font-size: 0.875rem;
  color: var(--color-body-navy);
  margin: 0.85rem 0;
}

.book-feature__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 1rem 0;
}

.book-feature__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-adventure-purple);
}

.book-feature__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* --------------------------------------------------------------------------
   11. PERSPECTIVE CARDS
   -------------------------------------------------------------------------- */

.perspective-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.perspective-grid > * {
  min-width: 0;
}

.perspective-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  border-radius: var(--radius-card);
  padding: 1.1rem 1.25rem;
  text-align: left;
}

.perspective-card--children { background-color: var(--color-soft-pink); }
.perspective-card--dachshund { background-color: var(--color-soft-blue); }
.perspective-card--grownups { background-color: var(--color-soft-purple); }

.perspective-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
}

.perspective-card__badge--pink { background: var(--gradient-izzie); }
.perspective-card__badge--blue { background: var(--gradient-anna); }
.perspective-card__badge--purple { background: var(--color-adventure-purple); }

.perspective-card__icon {
  width: 22px;
  height: 22px;
}

.perspective-card__body {
  min-width: 0;
}

.perspective-card__title {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 0.1rem;
}

.perspective-card--children .perspective-card__title { color: var(--color-adventure-pink); }
.perspective-card--dachshund .perspective-card__title { color: var(--color-adventure-blue); }
.perspective-card--grownups .perspective-card__title { color: var(--color-adventure-purple); }

.perspective-card__body p {
  font-size: 0.9375rem;
  line-height: 1.3;
  color: var(--color-body-navy);
}

.closing-statement {
  text-align: center;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-direct-navy);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   12. ARTICLE / CONTENT CARDS
   -------------------------------------------------------------------------- */

.article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.article-grid > * {
  min-width: 0;
}

.article-card {
  background-color: var(--color-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
  scroll-margin-top: calc(var(--header-height) + 24px);
  border-top: 4px solid transparent;
}

.article-card--izzie { border-top-color: var(--color-adventure-pink); }
.article-card--anna { border-top-color: var(--color-adventure-blue); }
.article-card--shared { border-top-color: var(--color-adventure-purple); }

.article-card--link {
  display: flex;
  color: inherit;
  text-decoration: none;
}

.article-card__byline {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-body-navy);
  opacity: 0.75;
  margin-top: 0.35rem;
}

.article-card__cta {
  display: inline-block;
  margin-top: 1rem;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--color-adventure-pink);
}

.article-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
  .article-card:hover {
    transform: none;
  }
}

.article-card__image-frame {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.article-card__image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.article-card__body {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.article-card__category {
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

.article-card--izzie .article-card__category { color: var(--color-adventure-pink); }
.article-card--anna .article-card__category { color: var(--color-adventure-blue); }
.article-card--shared .article-card__category { color: var(--color-adventure-purple); }

.article-card__category.handwritten {
  font-size: 1.375rem;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 0.4rem;
}

.article-card__title {
  margin-bottom: 0.6rem;
}

.article-card__description {
  color: var(--color-body-navy);
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.article-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-direct-navy);
}

.article-card__link-icon {
  width: 16px;
  height: 16px;
  transition: transform var(--transition-fast);
}

.article-card__link:hover .article-card__link-icon {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .article-card__link:hover .article-card__link-icon {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   13. BRAND STORY
   -------------------------------------------------------------------------- */

.brand-story {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 2.75rem;
  align-items: center;
}

.brand-story > * {
  min-width: 0;
}

.brand-story__figure {
  position: relative;
}

.brand-story__image-frame {
  width: 100%;
  aspect-ratio: 4 / 3.4;
  border-radius: var(--radius-image);
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(6, 38, 92, 0.18);
}

.brand-story__image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.brand-story__paw {
  position: absolute;
  bottom: -18px;
  right: -14px;
  width: 54px;
  opacity: 0.85;
  filter: drop-shadow(0 4px 8px rgba(6, 38, 92, 0.15));
}

.brand-story__copy p {
  margin-bottom: 1rem;
}

.brand-story__closing {
  display: block;
  font-size: clamp(1.75rem, 3vw, 2.375rem);
  margin: 1.75rem 0;
  line-height: 1.15;
}

/* --------------------------------------------------------------------------
   14. GALLERY
   -------------------------------------------------------------------------- */

.social-block {
  display: block;
}

.social-block__header {
  max-width: 560px;
  margin-bottom: 1.75rem;
}

/* ---- Gallery: fixed grid, no scrolling — column count changes per
   breakpoint (6 desktop / 3 tablet / 2 mobile) rather than a
   horizontally-scrolling strip. ---- */

.gallery {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.85rem;
  margin-bottom: 2.5rem;
}

.gallery__frame {
  width: 100%;
  aspect-ratio: 5 / 6;
  border-radius: var(--radius-image);
  overflow: hidden;
}

.gallery__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Per-photo focal points so each real photograph keeps its dog(s)
   fully in frame inside the 5:6 gallery crop, tuned per image rather
   than relying on a single default center position. */
.gallery__frame:nth-child(1) img { object-position: center 22%; }
.gallery__frame:nth-child(2) img { object-position: center 30%; }
.gallery__frame:nth-child(3) img { object-position: center 40%; }
.gallery__frame:nth-child(4) img { object-position: center 62%; }
.gallery__frame:nth-child(5) img { object-position: 32% 42%; }
.gallery__frame:nth-child(6) img { object-position: 78% 45%; }

/* ---- Social row: four equal, clearly labelled items. The two
   Instagram accounts are distinguished by title/subtitle/handle so
   neither reads as an ambiguous duplicate icon. ---- */

.social-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.social-item {
  text-align: left;
}

.social-item__link-wrap {
  display: block;
  padding: 1.25rem 1.1rem;
  border-radius: var(--radius-card);
  background-color: var(--color-soft-grey);
  border: 1px solid var(--color-border);
  color: inherit;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.social-item__link-wrap:hover {
  border-color: var(--color-adventure-purple);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .social-item__link-wrap:hover {
    transform: none;
  }
}

.social-item__icon {
  width: 30px;
  height: 30px;
  margin-bottom: 0.7rem;
  display: block;
}

.social-item__title {
  display: block;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--color-direct-navy);
  margin-bottom: 0.15rem;
}

.social-item__subtitle {
  display: block;
  font-size: 0.8125rem;
  color: var(--color-body-navy);
  opacity: 0.75;
  margin-bottom: 0.5rem;
}

.social-item__handle {
  display: block;
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--color-adventure-purple);
  word-break: break-word;
}

.social-item__link-wrap:hover .social-item__handle {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   15. NEWSLETTER
   -------------------------------------------------------------------------- */

.newsletter {
  position: relative;
  background-color: var(--color-soft-purple);
  border-radius: var(--radius-card);
  padding: 2.25rem 2.5rem;
  overflow: hidden;
  scroll-margin-top: calc(var(--header-height) + 16px);
}

.newsletter::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: var(--gradient-brand);
}

.newsletter__paw {
  position: absolute;
  pointer-events: none;
}

.newsletter__paw--1 {
  top: 1.75rem;
  left: 2rem;
  width: 30px;
  opacity: 0.18;
  transform: rotate(-15deg);
}

.newsletter__paw--2 {
  bottom: 1.75rem;
  right: 2rem;
  width: 36px;
  opacity: 0.14;
  transform: rotate(20deg);
}

.newsletter__eyebrow {
  font-size: 2rem;
  margin-bottom: 0.25rem;
}

.newsletter__inner {
  position: relative;
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}

.newsletter__copy {
  margin: 1rem 0 2rem;
}

.newsletter__copy p {
  margin-bottom: 0.5rem;
}

.newsletter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  text-align: left;
}

.newsletter-form__field {
  flex: 1 1 260px;
}

.newsletter-form__label {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 0.4rem;
  color: var(--color-direct-navy);
}

.newsletter-form__input {
  width: 100%;
  padding: 0.9rem 1.1rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-white);
  color: var(--color-body-navy);
}

.newsletter-form__input:focus-visible {
  border-color: var(--color-adventure-blue);
}

.newsletter-form__submit {
  flex-shrink: 0;
  align-self: flex-end;
}

.newsletter__consent {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--color-body-navy);
  text-align: center;
}

.newsletter__consent a {
  text-decoration: underline;
  font-weight: 600;
}

.newsletter__status {
  margin-top: 1rem;
  font-size: 0.9375rem;
  font-weight: 500;
  text-align: center;
}

.newsletter__status[hidden] {
  display: none;
}

.newsletter-form__error {
  display: block;
  font-size: 0.8125rem;
  color: var(--color-adventure-pink);
  margin-top: 0.35rem;
  min-height: 1em;
}

/* --------------------------------------------------------------------------
   16. QUOTE / STATEMENT BLOCKS
   -------------------------------------------------------------------------- */

.quote-block {
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
}

.quote-block__mark {
  font-family: var(--font-personality);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--color-direct-navy);
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   17. SECTION DIVIDERS
   -------------------------------------------------------------------------- */

.section-divider {
  border: none;
  height: 1px;
  background-color: var(--color-border);
  margin: 0;
}

.wave-divider {
  display: block;
  width: 100%;
  height: auto;
  line-height: 0;
}

.wave-divider svg {
  display: block;
  width: 100%;
  height: auto;
}

.wave-divider--footer {
  position: relative;
  margin-top: -48px;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   18. FOOTER
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--gradient-footer);
  color: var(--color-white);
  position: relative;
}

.site-footer__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding: 1.5rem 6% 1rem;
}

.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.site-footer__about {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: none;
}

.site-footer__brand-logo {
  height: 34px;
  width: auto;
}

.site-footer__description {
  color: var(--color-footer-text-secondary);
  font-size: 0.75rem;
  max-width: 220px;
  line-height: 1.3;
}

.site-footer__nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}

.site-footer__list--row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.5rem;
}

.site-footer__link {
  color: var(--color-footer-text-secondary);
  font-size: 0.875rem;
  transition: color var(--transition-fast);
}

.site-footer__link:hover {
  color: var(--color-white);
}

.site-footer__tagline {
  font-size: 1.375rem;
  line-height: 1.1;
  text-align: right;
  color: var(--color-white);
  white-space: nowrap;
}

.site-footer__heart {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-left: 0.2rem;
}

.site-footer__closing {
  text-align: center;
  color: var(--color-footer-text-secondary);
  font-size: 0.75rem;
  max-width: 640px;
  margin: 0.9rem auto 0;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.site-footer__bottom-inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding: 0.85rem 6%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.8125rem;
  color: var(--color-footer-text-secondary);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.1rem;
}

.site-footer__legal a {
  color: var(--color-footer-text-secondary);
  transition: color var(--transition-fast);
}

.site-footer__legal a:hover {
  color: var(--color-white);
}

.site-footer__paw {
  width: 18px;
  height: 18px;
  opacity: 0.6;
}

/* --------------------------------------------------------------------------
   19. IMAGE PLACEHOLDER SYSTEM
   Intentional branded placeholders — used until production assets
   are dropped into their reserved paths. Applied via a data attribute
   on the image container so swapping the <img src> later requires
   no markup or CSS changes.
   -------------------------------------------------------------------------- */

[data-placeholder] {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-placeholder] img {
  background-color: var(--color-soft-grey);
}

/* Applied by main.js when a reserved image path has no file yet.
   Content and layout never depend on this — see main.js notes. */
[data-placeholder] img.img-missing {
  display: none;
}

[data-placeholder]::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
}

[data-placeholder="izzie"]::after {
  background: linear-gradient(160deg, var(--color-soft-pink) 0%, rgba(253, 235, 245, 0.4) 100%);
}

[data-placeholder="anna"]::after {
  background: linear-gradient(160deg, var(--color-soft-blue) 0%, rgba(234, 247, 253, 0.4) 100%);
}

[data-placeholder="shared"]::after {
  background: linear-gradient(160deg, var(--color-soft-pink) 0%, var(--color-soft-blue) 100%);
  opacity: 0.55;
}

[data-placeholder]::before {
  content: '';
  position: absolute;
  width: 34px;
  height: 34px;
  background-color: var(--color-white);
  border-radius: 50%;
  box-shadow: var(--shadow-card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2306265C'%3E%3Cpath d='M12 14.5c-3 0-6 2-6 4.2 0 1.3 1 2.3 2.3 2.3.8 0 1.5-.3 2.2-.5.5-.2 1-.3 1.5-.3s1 .1 1.5.3c.7.2 1.4.5 2.2.5 1.3 0 2.3-1 2.3-2.3 0-2.2-3-4.2-6-4.2z'/%3E%3Cellipse cx='7.5' cy='9.5' rx='1.6' ry='2.1'/%3E%3Cellipse cx='16.5' cy='9.5' rx='1.6' ry='2.1'/%3E%3Cellipse cx='10.2' cy='6' rx='1.4' ry='1.9'/%3E%3Cellipse cx='13.8' cy='6' rx='1.4' ry='1.9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px;
  z-index: 1;
  opacity: 0.55;
}

/* Placeholder icon scales down inside small containers */
.character-card__image-frame[data-placeholder]::before,
.gallery__frame[data-placeholder]::before {
  width: 26px;
  height: 26px;
  background-size: 14px;
}

/* --------------------------------------------------------------------------
   20. INTERIOR PAGE HERO
   Shared, smaller hero treatment for every page other than Home. Same
   language (eyebrow, bold editorial headline, gradient wave) at reduced
   scale/density so interior pages read as the same designed system.
   -------------------------------------------------------------------------- */

.page-hero {
  position: relative;
  padding: 2.25rem 6% 0;
  overflow: hidden;
}

.page-hero__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-bottom: 2rem;
  max-width: 760px;
}

.page-hero__inner--wide {
  max-width: 900px;
}

.page-hero__headline {
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: clamp(2.25rem, 4.2vw, 3.25rem);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--color-direct-navy);
  margin: 0.5rem 0 0.85rem;
}

.page-hero__headline em {
  display: block;
  font-style: normal;
  color: var(--color-adventure-pink);
}

.page-hero__lead {
  font-size: 1.0625rem;
  line-height: 1.5;
  max-width: 46rem;
}

.page-hero__wave {
  position: relative;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  line-height: 0;
}

/* --------------------------------------------------------------------------
   21. EDITORIAL GRID (Their World)
   Varied tile sizes rather than seven identical cards — spans are set
   per tile via modifier classes.
   -------------------------------------------------------------------------- */

.editorial-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.25rem;
}

.editorial-tile {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  grid-column: span 2;
  min-height: 220px;
  display: flex;
  align-items: flex-end;
  color: var(--color-white);
}

.editorial-tile--wide { grid-column: span 4; }
.editorial-tile--tall { min-height: 320px; }

.editorial-tile__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.editorial-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.editorial-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,38,92,0) 40%, rgba(6,38,92,0.72) 100%);
  z-index: 1;
}

.editorial-tile__body {
  position: relative;
  z-index: 2;
  padding: 1.5rem;
}

.editorial-tile__category {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: 0.9;
  margin-bottom: 0.35rem;
}

.editorial-tile__title {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 1.375rem;
  margin-bottom: 0.35rem;
}

.editorial-tile__note {
  font-size: 0.875rem;
  opacity: 0.92;
  max-width: 34ch;
}

/* --------------------------------------------------------------------------
   22. GALLERY GRID (Meet the Girls — "The Girls in Action")
   -------------------------------------------------------------------------- */

.action-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.action-gallery__item {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-image);
  overflow: hidden;
}

.action-gallery__item:nth-child(3n+1) { aspect-ratio: 4 / 6; }

.action-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   23. TIMELINE (About)
   -------------------------------------------------------------------------- */

.timeline {
  position: relative;
  max-width: 760px;
  margin-inline: auto;
  padding-left: 2rem;
  border-left: 2px solid var(--color-border);
}

.timeline__item {
  position: relative;
  padding-bottom: 2rem;
}

.timeline__item:last-child { padding-bottom: 0; }

.timeline__item::before {
  content: '';
  position: absolute;
  left: -2.4rem;
  top: 0.3rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gradient-brand);
}

.timeline__title {
  font-weight: 700;
  color: var(--color-direct-navy);
  margin-bottom: 0.25rem;
}

.timeline__body {
  font-size: 0.9375rem;
  color: var(--color-body-navy);
}

/* --------------------------------------------------------------------------
   24. VALUES GRID (About)
   -------------------------------------------------------------------------- */

.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.value-card {
  padding: 1.5rem;
  border-radius: var(--radius-card);
  background-color: var(--color-soft-grey);
}

.value-card__title {
  font-weight: 700;
  color: var(--color-direct-navy);
  margin-bottom: 0.4rem;
}

.value-card__body {
  font-size: 0.875rem;
  color: var(--color-body-navy);
}

/* --------------------------------------------------------------------------
   25. FOUNDER / PERSON BLOCK (About)
   -------------------------------------------------------------------------- */

.person-block {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 2.5rem;
  align-items: center;
}

.person-block__portrait {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-image);
}

.person-block__name {
  font-weight: 700;
  color: var(--color-direct-navy);
  font-size: 1.25rem;
  margin-bottom: 0.15rem;
}

.person-block__role {
  font-size: 0.875rem;
  color: var(--color-adventure-purple);
  font-weight: 600;
  margin-bottom: 0.85rem;
}

.person-block__body p {
  margin-bottom: 0.75rem;
  font-size: 0.9375rem;
}

.pending-note {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-adventure-purple);
  background: var(--color-soft-purple);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  margin-top: 0.75rem;
}

/* --------------------------------------------------------------------------
   26. BLOG
   -------------------------------------------------------------------------- */

.blog-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2rem;
}

.blog-categories a {
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  background: var(--color-soft-grey);
  color: var(--color-body-navy);
  border: 1px solid var(--color-border);
}

.blog-categories a.is-active {
  background: var(--gradient-brand);
  color: var(--color-white);
  border-color: transparent;
}

.blog-featured {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2.5rem;
  align-items: center;
  margin-bottom: 3rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--color-border);
}

.blog-featured__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-image);
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.popular-posts {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.popular-post {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 1rem;
  align-items: center;
}

.popular-post__media {
  width: 72px;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
}

.popular-post__title {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-direct-navy);
}

/* --------------------------------------------------------------------------
   27. BOOKS PAGE — series / coming-next card
   -------------------------------------------------------------------------- */

.series-note {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 2rem;
}

.coming-next-card {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-card);
  padding: 2.5rem;
  text-align: center;
  max-width: 480px;
  margin-inline: auto;
}

.coming-next-card svg {
  width: 32px;
  height: 32px;
  margin-bottom: 0.75rem;
  opacity: 0.5;
}

/* --------------------------------------------------------------------------
   28. FAQ (native <details>/<summary> — no JS required, keyboard-native)
   -------------------------------------------------------------------------- */

.faq {
  max-width: 760px;
  margin-inline: auto;
}

.faq details {
  border-bottom: 1px solid var(--color-border);
  padding: 1.1rem 0;
}

.faq summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-direct-navy);
  font-size: 1rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

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

.faq summary::after {
  content: '+';
  font-size: 1.25rem;
  color: var(--color-adventure-pink);
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq details p {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  color: var(--color-body-navy);
}

/* --------------------------------------------------------------------------
   29. CONTACT FORM
   -------------------------------------------------------------------------- */

.contact-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 3rem;
}

.contact-form {
  background: var(--color-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 2rem;
}

.form-field {
  margin-bottom: 1.25rem;
}

.form-field label {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 0.4rem;
  color: var(--color-direct-navy);
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 2px solid var(--color-border);
  border-radius: 12px;
  font-family: var(--font-primary);
  font-size: 0.9375rem;
  color: var(--color-body-navy);
  background: var(--color-white);
}

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

.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  border-color: var(--color-adventure-blue);
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.contact-info__block h3 {
  font-size: 1rem;
  color: var(--color-direct-navy);
  margin-bottom: 0.4rem;
}

.contact-info__block p {
  font-size: 0.9375rem;
  color: var(--color-body-navy);
}

.config-placeholder {
  font-style: italic;
  color: var(--color-adventure-purple);
  font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   30. LEGAL / SYSTEM PAGES
   -------------------------------------------------------------------------- */

.legal-content {
  max-width: 760px;
  margin-inline: auto;
}

.legal-content h2 {
  font-size: 1.375rem;
  color: var(--color-direct-navy);
  margin: 2rem 0 0.75rem;
}

.legal-content h2:first-child { margin-top: 0; }

.legal-content p,
.legal-content li {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-body-navy);
  margin-bottom: 0.85rem;
}

.legal-content ul {
  padding-left: 1.25rem;
  list-style: disc;
}

.legal-notice {
  background: var(--color-soft-purple);
  border-radius: var(--radius-image);
  padding: 1.25rem 1.5rem;
  font-size: 0.875rem;
  color: var(--color-direct-navy);
  margin-bottom: 2rem;
}

.legal-updated {
  font-size: 0.8125rem;
  color: var(--color-body-navy);
  opacity: 0.7;
  margin-bottom: 2rem;
}

/* --------------------------------------------------------------------------
   31. 404 PAGE
   -------------------------------------------------------------------------- */

.error-page {
  text-align: center;
  padding: 4rem 6% 5rem;
  max-width: 640px;
  margin-inline: auto;
}

.error-page__code {
  font-family: var(--font-personality);
  font-weight: 700;
  font-size: 6rem;
  line-height: 1;
  color: var(--color-adventure-pink);
}

.error-page__art {
  width: 160px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  margin: 1rem auto 1.5rem;
}

.error-page__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   32. LAYOUT UTILITIES
   Small set of reusable utility/modifier classes used across interior
   pages, replacing what would otherwise be one-off inline styles — kept
   in the stylesheet so responsive overrides in responsive.css always
   win at the correct breakpoint (an inline style's specificity would
   defeat them).
   -------------------------------------------------------------------------- */

.u-center { text-align: center; }
.u-center-block { text-align: center; max-width: 760px; margin-inline: auto; }
.u-narrow { max-width: 820px; margin-inline: auto; }
.u-narrow-md { max-width: 760px; margin-inline: auto; }
.u-mt-sm { margin-top: 0.75rem; }
.u-mt-md { margin-top: 1.5rem; }
.u-mb-md { margin-bottom: 1.25rem; }
.u-mb-lg { margin-bottom: 2rem; }
.u-inline-btn { margin-top: 1.5rem; display: inline-flex; }
.u-flex-center { justify-content: center; display: flex; }
.u-heading-sub { font-size: 1.75rem; margin-bottom: 0.5rem; }
.u-note-strong { font-weight: 600; color: var(--color-direct-navy); }
.u-note-sm { font-size: 0.875rem; margin-top: 0.4rem; }
.u-form-note { font-size: 0.8125rem; color: var(--color-body-navy); margin-top: 0.85rem; }
.u-hero-sm { font-size: 2.25rem; }
.u-round { border-radius: 50%; }

.character-row__copy--wide { max-width: 56ch; }
.character-row__traits--3col { grid-template-columns: 1fr 1fr 1fr; }

/* --------------------------------------------------------------------------
   33. HOME PAGE — APPROVED PRODUCTION IMAGE OVERRIDES
   Scoped to #meet-the-girls / .book-feature__cover--photo so these
   display rules apply ONLY on the Home page and never leak into
   meet-the-girls.html or books.html, which still use the shared,
   unmodified .character-row / .book-feature components with their
   original placeholder-oriented crop behaviour until they receive
   their own approved photos.
   -------------------------------------------------------------------------- */

#meet-the-girls .character-row__portrait img {
  object-fit: contain;
  object-position: center bottom;
}

.book-feature__cover--photo {
  aspect-ratio: 1145 / 1374;
}

.book-feature__cover--photo img {
  object-fit: contain;
}

/* Izzie's approved photo is a wider/landscape composition rather than
   the tall-portrait shape the placeholder aspect-ratio assumed — this
   matches her container to her actual supplied artwork so she reads
   at a comparable scale to Anna instead of shrinking inside letterbox
   space. Scoped to this one Home-page instance only. */
.character-row__portrait--izzie-photo {
  aspect-ratio: 1351 / 1164;
}

/* --------------------------------------------------------------------------
   34. MEET THE GIRLS — RICH CHARACTER PAGE COMPONENTS
   -------------------------------------------------------------------------- */

/* ---- Hero: text + real photo, two columns ---- */

.girls-hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 3rem;
  align-items: center;
  max-width: var(--max-width);
  margin-inline: auto;
  padding: 2.25rem 6% 3rem;
}

.girls-hero__eyebrow { margin-bottom: 0.5rem; }

.girls-hero__headline {
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--color-direct-navy);
  margin-bottom: 1rem;
}

.girls-hero__headline em {
  display: block;
  font-style: normal;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.girls-hero__lead p {
  font-size: 1.0625rem;
  margin-bottom: 0.75rem;
}

.girls-hero__tagline {
  font-family: var(--font-personality);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--color-adventure-purple);
  margin-top: 1rem;
}

.girls-hero__figure {
  aspect-ratio: 4 / 3.6;
  border-radius: var(--radius-image);
  overflow: hidden;
  box-shadow: 0 24px 44px rgba(6, 38, 92, 0.18);
}

.girls-hero__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Rich per-character section ---- */

.character-feature {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 3rem;
  align-items: center;
  max-width: var(--max-width);
  margin-inline: auto;
}

.character-feature--reverse {
  grid-template-columns: 1.15fr 1fr;
}

.character-feature--reverse .character-feature__images { order: 2; }
.character-feature--reverse .character-feature__content { order: 1; }

.character-feature__images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.character-feature__images--single {
  grid-template-columns: 1fr;
}

.character-feature__images--triptych {
  grid-template-columns: 1.3fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.character-feature__img {
  border-radius: var(--radius-image);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

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

.character-feature__img--tall { aspect-ratio: 3 / 4; }
.character-feature__img--square { aspect-ratio: 1 / 1; }
.character-feature__img--wide { aspect-ratio: 5 / 4; grid-row: span 2; }
.character-feature__img--small { aspect-ratio: 4 / 3; }

.character-feature__name {
  font-family: var(--font-personality);
  font-weight: 700;
  font-size: 2.75rem;
  line-height: 1;
  margin-bottom: 0.2rem;
}

.character-feature--izzie .character-feature__name { color: var(--color-adventure-pink); }
.character-feature--anna .character-feature__name { color: var(--color-adventure-blue); }

.character-feature__role {
  font-size: 1rem;
  color: var(--color-direct-navy);
  margin-bottom: 0.5rem;
}

.character-feature__role strong {
  font-weight: 800;
  font-size: 1.1875rem;
}

.character-feature__role-sub {
  font-weight: 500;
  opacity: 0.75;
}

.character-feature__question {
  font-family: var(--font-personality);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.character-feature--izzie .character-feature__question { color: var(--color-adventure-pink); }
.character-feature--anna .character-feature__question { color: var(--color-adventure-blue); }

.character-feature__copy p {
  margin-bottom: 0.85rem;
  font-size: 0.9375rem;
}

.character-feature__facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
  margin: 1.25rem 0;
}

.character-feature__fact {
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
}

.character-feature__fact-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 0.1rem;
}

.character-feature--izzie .character-feature__fact-label { color: var(--color-adventure-pink); }
.character-feature--anna .character-feature__fact-label { color: var(--color-adventure-blue); }

.character-feature__fact-value {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-direct-navy);
}

.character-feature__quote {
  font-family: var(--font-personality);
  font-weight: 700;
  font-size: 1.625rem;
  line-height: 1.25;
  color: var(--color-direct-navy);
  padding-left: 1.1rem;
  border-left: 4px solid;
  margin-top: 1.25rem;
}

.character-feature--izzie .character-feature__quote { border-left-color: var(--color-adventure-pink); }
.character-feature--anna .character-feature__quote { border-left-color: var(--color-adventure-blue); }

/* ---- Same Family. Very Different Dogs — playful comparison, not a table ---- */

.versus {
  max-width: 960px;
  margin-inline: auto;
}

.versus__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-border);
}

.versus__row:last-child { border-bottom: none; }

.versus__izzie,
.versus__anna {
  padding: 0.75rem 1.1rem;
  border-radius: var(--radius-card);
  font-weight: 600;
  font-size: 0.9375rem;
}

.versus__izzie {
  background-color: var(--color-soft-pink);
  color: var(--color-adventure-pink);
  text-align: right;
}

.versus__anna {
  background-color: var(--color-soft-blue);
  color: var(--color-adventure-blue);
  text-align: left;
}

.versus__divider {
  font-family: var(--font-personality);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-adventure-purple);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-soft-purple);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ---- Real Dogs / Illustrated Adventures pairing ---- */

.real-illustrated {
  max-width: var(--max-width);
  margin-inline: auto;
}

.real-illustrated__pairs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 2rem;
}

.pair-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pair-card__images {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.6rem;
}

.pair-card__arrow {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-adventure-purple);
  flex-shrink: 0;
}

.pair-card__img {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-image);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  position: relative;
}

.pair-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pair-card__img--contain {
  background-color: var(--color-soft-grey);
}

.pair-card__img--contain img {
  object-fit: contain;
}

.pair-card__img-label {
  position: absolute;
  bottom: 0.6rem;
  left: 0.6rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-white);
  background: rgba(6, 38, 92, 0.65);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
}

.pair-card__name {
  font-family: var(--font-personality);
  font-weight: 700;
  font-size: 1.375rem;
  text-align: center;
}

.pair-card--izzie .pair-card__name { color: var(--color-adventure-pink); }
.pair-card--anna .pair-card__name { color: var(--color-adventure-blue); }

/* ---- Better Together closing band ---- */

.better-together {
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
}

.better-together__mark {
  font-family: var(--font-personality);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--color-direct-navy);
  margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   35. BLOG ARTICLE — reusable template for Izzie Reviews / Anna Investigates
   / Behind the Adventures individual posts.
   -------------------------------------------------------------------------- */

.article-hero {
  width: 100%;
  max-height: 460px;
  overflow: hidden;
}

.article-hero img {
  width: 100%;
  height: 100%;
  max-height: 460px;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

.article-header {
  position: relative;
  max-width: 1240px;
  margin-inline: auto;
  padding: 2rem 5% 0;
}

.article-header__inner {
  max-width: 880px;
}

.article-header__category {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-adventure-pink);
  margin-bottom: 0.6rem;
}

.article-header__title {
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  line-height: 1.1;
  color: var(--color-direct-navy);
  margin-bottom: 0.75rem;
}

.article-header__subtitle {
  font-size: 1.125rem;
  color: var(--color-body-navy);
  margin-bottom: 1rem;
}

.article-header__byline {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-body-navy);
  opacity: 0.8;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border);
}

.article-body {
  max-width: 1240px;
  margin-inline: auto;
  padding: 0 5% 3.5rem;
}

/* Comfortable long-form reading column for plain narrative paragraphs.
   Special editorial moments (images, grids, panels, assessment, verdict)
   are siblings that use the wider canvas. */
.article-col {
  max-width: 760px;
  margin-inline: auto;
}

/* Opening intro spans the same editorial canvas as every section below
   it — the readable text column stays centred and narrow, with the
   decorative paw filling the canvas's own right-hand margin rather
   than the intro box floating narrower than the rest of the page. */
.article-intro {
  position: relative;
}

.article-intro__paw {
  position: absolute;
  top: 0.25rem;
  right: 0;
  width: 110px;
  height: 110px;
  opacity: 0.08;
}

/* The opening narrative gets its own natural editorial width, aligned
   left with everything else — not centred with matching gaps on both
   sides, which reads as an accidental sidebar next to the paw. */
.article-intro .article-col {
  max-width: 800px;
  margin-inline: 0;
}

.article-body h2 {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 1.625rem;
  color: var(--color-direct-navy);
  margin: 3.75rem 0 1.1rem;
}

.article-body > .article-intro h2:first-child,
.article-body > .article-col:first-of-type h2:first-child {
  margin-top: 0;
}

.article-body p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-body-navy);
  margin-bottom: 1.1rem;
}

.article-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-soft-pink);
  color: var(--color-adventure-pink);
  font-weight: 700;
  font-size: 0.875rem;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  margin: 0.5rem 0 1.25rem;
}

.article-rating__stars {
  letter-spacing: 1px;
}

.article-pull-quote {
  background: var(--color-soft-pink);
  border-radius: var(--radius-card);
  padding: 2rem;
  margin: 1.5rem 0;
  text-align: center;
}

.article-pull-quote p {
  font-family: var(--font-personality);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--color-direct-navy);
  margin: 0;
}

/* A pull-quote used standalone (not inside the two-column productivity
   row) still needs the same treatment but full-height alignment isn't
   relevant, so it's just the base .article-pull-quote — this modifier
   only adds vertical centering when placed as a grid cell. */
.article-pull-quote--aside {
  display: flex;
  align-items: center;
  height: 100%;
  margin: 0;
}

/* A full-canvas-width soft panel holding a normal-width reading column
   inside it — gives "Do humans actually need more technology?" real
   visual weight without stretching the paragraph line length itself. */
.article-panel {
  background: var(--color-soft-grey);
  border-radius: var(--radius-card);
  padding: 3rem 4rem;
  margin: 3rem 0;
}

.article-panel .article-col {
  max-width: 700px;
  margin-inline: auto;
}

.article-panel h2 {
  margin-top: 0 !important;
}

/* ---- Wide editorial moments — direct children of .article-body, using
   the full canvas rather than the narrow reading column ---- */

.article-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  margin: 2.5rem 0;
}

.article-two-col--rating {
  grid-template-columns: 1fr 280px;
  align-items: center;
  gap: 2.75rem;
}

.article-two-col--split {
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 3.5rem;
}

.article-two-col--split h2 {
  margin-top: 0;
}

.article-stat-card {
  background: var(--color-soft-pink);
  border-radius: var(--radius-card);
  padding: 2rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.article-stat-card__stars {
  display: block;
  font-size: 1.75rem;
  color: var(--color-adventure-pink);
  letter-spacing: 2px;
  margin-bottom: 0.6rem;
}

.article-stat-card__label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-direct-navy);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ---- The Productivity Question — three-row storytelling moment ----
   Row 1: copy (left) + pull quote (right), two columns.
   Row 2: the full image at its true native aspect ratio — width:100%,
   height:auto, NO object-fit, NO fixed-height container, NO cropping.
   Row 3: closing lines, back in the narrow reading column. */

.article-productivity__row1 {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3.5rem;
  align-items: center;
  margin-bottom: 2.25rem;
}

.article-productivity__image {
  width: 100%;
  margin: 0 0 2.25rem;
  border-radius: var(--radius-image);
  overflow: hidden;
  box-shadow: var(--shadow-card-hover);
}

.article-productivity__image img {
  width: 100%;
  height: auto;
  display: block;
}

.article-image-break {
  width: 100%;
  border-radius: var(--radius-image);
  overflow: hidden;
  margin: 2rem 0;
  box-shadow: var(--shadow-card);
}

.article-image-break img {
  width: 100%;
  height: auto;
  display: block;
}

.article-wide-image {
  width: 100%;
  border-radius: var(--radius-image);
  overflow: hidden;
  margin: 3rem 0;
  box-shadow: var(--shadow-card-hover);
}

.article-wide-image img {
  width: 100%;
  height: auto;
  display: block;
}

.article-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 1.5rem 0 2.5rem;
}

.article-feature-card {
  background: var(--color-soft-pink);
  border-radius: var(--radius-card);
  padding: 1.75rem;
}

.article-feature-card__label {
  display: block;
  font-weight: 800;
  color: var(--color-adventure-pink);
  font-size: 1rem;
  margin-bottom: 0.4rem;
}

.article-feature-card__desc {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-body-navy);
}

.article-assessment {
  max-width: 1040px;
  background: var(--color-white);
  border: 2px solid var(--color-adventure-pink);
  border-radius: var(--radius-card);
  padding: 2.5rem 3rem;
  margin: 2.75rem auto;
  box-shadow: var(--shadow-card);
}

.article-assessment__title {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 1.375rem;
  color: var(--color-direct-navy);
  margin-bottom: 1.25rem;
}

.article-assessment__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 1rem;
}

.article-assessment__row:last-child { border-bottom: none; }

.article-assessment__label { color: var(--color-body-navy); }

.article-assessment__value {
  font-weight: 700;
  color: var(--color-adventure-pink);
  text-align: right;
  white-space: nowrap;
}

.article-verdict {
  max-width: 1040px;
  display: flex;
  align-items: center;
  gap: 1.75rem;
  background: var(--gradient-izzie);
  border-radius: var(--radius-card);
  padding: 2.5rem 3rem;
  margin: 2.25rem auto;
  color: var(--color-white);
}

.article-verdict__icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  opacity: 0.9;
}

.article-body p.article-verdict__label {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-white);
  opacity: 0.9;
  margin-bottom: 0.35rem;
}

.article-body p.article-verdict__value {
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: 2.125rem;
  text-transform: uppercase;
  color: var(--color-white);
}

.article-body p.article-signature {
  font-family: var(--font-personality);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-adventure-pink);
  margin-top: 1.5rem;
}

/* ---- Bottom of article: About Izzie + Next teaser side by side on
   desktop, stacked on tablet/mobile ---- */

.article-bottom-grid {
  max-width: 1240px;
  margin-inline: auto;
  padding: 1.5rem 5% 3.5rem;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

.article-author__card {
  background: var(--color-soft-pink);
  border-radius: var(--radius-card);
  padding: 1.75rem 2rem;
  height: 100%;
}

.article-author__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-adventure-pink);
  margin-bottom: 0.6rem;
}

.article-author__name {
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--color-direct-navy);
}

.article-author__tagline {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-body-navy);
  margin-bottom: 0.6rem;
}

.article-author__bio {
  font-size: 0.9375rem;
  color: var(--color-body-navy);
  margin-bottom: 1.1rem;
}

.article-author__ctas {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.article-next {
  background: var(--color-soft-grey);
  border-radius: var(--radius-card);
  padding: 1.75rem 2rem;
  height: 100%;
}

.article-next__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-adventure-purple);
  margin-bottom: 0.6rem;
}

.article-next__title {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-direct-navy);
  margin-bottom: 0.35rem;
}

.article-next__sub {
  font-size: 0.9375rem;
  color: var(--color-body-navy);
}

/* --------------------------------------------------------------------------
   36. IZZIE REVIEWS — EV ARTICLE — components not shared with the iPhone
   Duo template. Everything else (hero, header, intro, two-col patterns,
   pull-quote, feature grid, assessment, verdict, author/next, bottom
   grid) is reused as-is from section 35.
   -------------------------------------------------------------------------- */

.article-concern-badge {
  position: absolute;
  top: 0;
  right: 0;
  width: 210px;
  text-align: right;
}

.article-concern-badge__paw {
  width: 30px;
  height: 30px;
  margin-left: auto;
  margin-bottom: 0.4rem;
  opacity: 0.6;
}

.article-concern-badge__label {
  font-family: var(--font-personality);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-adventure-pink);
  line-height: 1.2;
}

.article-concern-badge__text {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-direct-navy);
}

.article-mini-assessment {
  background: var(--color-soft-pink);
  border-radius: var(--radius-card);
  padding: 1.5rem 1.75rem;
  height: 100%;
}

.article-mini-assessment__title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-adventure-pink);
  margin-bottom: 0.9rem;
}

.article-mini-assessment__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(6, 38, 92, 0.08);
  font-size: 0.875rem;
}

.article-mini-assessment__row:last-child { border-bottom: none; }

.article-mini-assessment__label { color: var(--color-body-navy); }

.article-mini-assessment__value {
  font-weight: 700;
  color: var(--color-adventure-pink);
  text-align: right;
  white-space: nowrap;
}

.article-mini-assessment__value--text {
  color: var(--color-direct-navy);
  font-style: italic;
}

/* ---- ROARRRR vs "..." — a wide soft-blue panel with a VS split ---- */

.article-panel--blue {
  background: var(--color-soft-blue);
}

.roar-split {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
}

.roar-split__side {
  text-align: center;
}

.roar-split__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-body-navy);
  opacity: 0.7;
  margin-bottom: 0.4rem;
}

.roar-split__sound {
  font-family: var(--font-personality);
  font-weight: 700;
  font-size: 2.25rem;
  color: var(--color-direct-navy);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.roar-split__side--audi .roar-split__sound { color: var(--color-adventure-blue); letter-spacing: 4px; }
.roar-split__side--mercedes .roar-split__sound { color: var(--color-adventure-pink); }

.roar-split__caption {
  font-size: 0.875rem;
  color: var(--color-body-navy);
}

.roar-split__vs {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-personality);
  font-weight: 700;
  color: var(--color-adventure-purple);
  font-size: 0.9375rem;
}

/* ---- Journey flow strip (Drive -> Charge -> Walk -> Sniff -> Treat -> Bed) ---- */

.journey-flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 0;
  margin: 1.75rem 0;
}

.journey-flow__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 90px;
}

.journey-flow__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
  box-shadow: var(--shadow-card);
}

.journey-flow__label {
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--color-direct-navy);
}

.journey-flow__sub {
  font-size: 0.6875rem;
  color: var(--color-body-navy);
  opacity: 0.75;
}

.journey-flow__arrow {
  color: var(--color-adventure-blue);
  opacity: 0.5;
  font-size: 1.25rem;
  flex-shrink: 0;
}

/* ---- Little things — rated feature cards ---- */

.little-things-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin: 1.5rem 0 2.5rem;
}

.little-things-grid .article-feature-card:nth-child(2n) {
  transform: translateY(1rem);
}

.little-thing__title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-adventure-pink);
  margin-bottom: 0.5rem;
  display: block;
}

.little-thing__stars {
  display: block;
  color: var(--color-adventure-pink);
  font-size: 1.125rem;
  letter-spacing: 1px;
  margin-bottom: 0.6rem;
}

.little-thing__desc {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-body-navy);
}

/* ---- Real-world evidence: before / now photo strip ---- */

.evidence-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 2rem 0;
}

.evidence-strip__col {
  text-align: center;
}

.evidence-strip__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-body-navy);
  opacity: 0.7;
  margin-bottom: 0.6rem;
}

.evidence-strip__img {
  border-radius: var(--radius-image);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  aspect-ratio: 3 / 4;
}

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

/* ---- Two cars, different jobs — spec comparison cards ---- */

.car-spec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin: 2rem 0;
}

.car-spec-card {
  border-radius: var(--radius-card);
  padding: 2rem;
  box-shadow: var(--shadow-card);
}

.car-spec-card--audi { background: var(--color-soft-blue); }
.car-spec-card--mercedes { background: var(--color-soft-pink); }

.car-spec-card__name {
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: 1.125rem;
  color: var(--color-direct-navy);
  margin-bottom: 1.1rem;
}

.car-spec-card__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(6, 38, 92, 0.08);
  font-size: 0.875rem;
}

.car-spec-card__row:last-child { border-bottom: none; }

.car-spec-card__label { color: var(--color-body-navy); }

.car-spec-card__value {
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.car-spec-card--audi .car-spec-card__value { color: var(--color-adventure-blue); }
.car-spec-card--mercedes .car-spec-card__value { color: var(--color-adventure-pink); }

.article-rating--center {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  text-align: center;
}

/* Opt-in: hero artwork shown at its full native aspect ratio, no crop.
   Used by the EV article; the iPhone Duo hero keeps the base crop. */
.article-hero.article-hero--full,
.article-hero.article-hero--full img {
  max-height: none;
}

.article-hero.article-hero--full img {
  height: auto;
  object-fit: fill;
}

/* ---- EV article fixes: photo compositions (no crop, no distortion) and
   specificity for <p>-based components inside .article-body ---- */

.article-photo-split {
  display: grid;
  grid-template-columns: 5fr 6fr;
  align-items: center;
  gap: 3.5rem;
  margin: 3rem 0;
}

.article-photo-split--reverse {
  grid-template-columns: 6fr 5fr;
}

.article-photo-split__img {
  border-radius: var(--radius-image);
  overflow: hidden;
  box-shadow: var(--shadow-card-hover);
}

.article-photo-split__img img {
  width: 100%;
  height: auto;
  display: block;
}

.article-photo-split h2 { margin-top: 0; }

.article-body .article-photo-split .article-pull-quote--aside {
  height: auto;
  margin: 1.25rem 0 0;
}

.article-mini-assessment {
  height: auto;
  align-self: start;
}

.article-panel > h2 { margin: 0 0 1.5rem; }

.article-body p.article-mini-assessment__title {
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--color-adventure-pink);
  margin-bottom: 0.9rem;
}

.article-body p.roar-split__eyebrow {
  font-size: 0.75rem;
  line-height: 1.3;
  margin-bottom: 0.4rem;
}

.article-body p.roar-split__sound {
  font-size: 2.75rem;
  line-height: 1.05;
  margin-bottom: 0.5rem;
  color: var(--color-adventure-pink);
}

.article-body p.roar-split__side--audi .roar-split__sound,
.article-body .roar-split__side--audi p.roar-split__sound {
  color: var(--color-adventure-blue);
}

.article-body p.roar-split__caption {
  font-size: 0.9375rem;
  margin-bottom: 0;
}

.article-body p.evidence-strip__label {
  font-size: 0.75rem;
  line-height: 1.3;
  margin-bottom: 0.6rem;
}

.article-body p.car-spec-card__name {
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--color-direct-navy);
  margin-bottom: 1.1rem;
}

/* Real-world evidence: two portrait photos of different proportions,
   given widths proportional to their aspect ratios so both display at
   the same height, uncropped. */
.evidence-strip {
  grid-template-columns: 75fr 46fr;
  align-items: start;
  max-width: 820px;
  margin-inline: auto;
  gap: 1.5rem;
}

.evidence-strip__img {
  aspect-ratio: auto;
}

.evidence-strip__img img {
  height: auto;
  object-fit: fill;
}

.evidence-strip.evidence-strip--three {
  grid-template-columns: 75fr 46fr 75fr;
  max-width: 1000px;
  gap: 1.25rem;
}

.evidence-strip__label--wide { grid-column: 1 / span 2; }

.evidence-strip.evidence-strip--three .evidence-strip__label { text-align: center; }

.car-spec-grid { margin-bottom: 2.5rem; }

/* --------------------------------------------------------------------------
   37. ANNA INVESTIGATES — reusable article identity
   Observation -> Hypothesis -> Testing -> Evidence -> Findings -> Case Status
   Blue/cyan scrapbook treatment, distinct from the pink-led Izzie Reviews.
   Every text element carries its own class (no generic p rules), so nothing
   here can be overridden by, or leak into, the Izzie article styles.
   -------------------------------------------------------------------------- */

.anna-shell {
  width: min(1240px, calc(100% - 80px));
  margin-inline: auto;
}

.anna-tape {
  display: inline-block;
  padding: 0.4rem 1.1rem;
  background: #BDE9F9;
  color: var(--color-direct-navy);
  font-family: var(--font-personality);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.1;
  transform: rotate(-2deg);
  box-shadow: 0 2px 6px rgba(6, 38, 92, 0.12);
}

.anna-tape--green  { background: #BFE6C8; }
.anna-tape--orange { background: #FFD9B0; }
.anna-tape--title  { font-size: 1.75rem; padding: 0.5rem 1.5rem; }

.anna-h2 {
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.15;
  color: var(--color-direct-navy);
  margin: 0;
}

.anna-text {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-body-navy);
  margin: 0 0 1rem;
}

.anna-hand {
  font-family: var(--font-personality);
  font-weight: 700;
  color: var(--color-adventure-blue);
  line-height: 1.25;
}

/* ---- Breadcrumb ---- */
.anna-crumbs {
  padding: 0.9rem 0 0;
  font-size: 0.8125rem;
}
.anna-crumbs ol { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.anna-crumbs li { color: var(--color-body-navy); }
.anna-crumbs li + li::before { content: "\203A"; margin-right: 0.4rem; opacity: 0.6; }
.anna-crumbs a { color: var(--color-adventure-blue); font-weight: 600; }

/* ---- Hero ---- */
.anna-hero {
  position: relative;
  background:
    radial-gradient(circle at 85% 20%, rgba(9, 169, 230, 0.18), transparent 45%),
    linear-gradient(180deg, var(--color-soft-blue) 0%, var(--color-warm-white) 100%);
  padding-bottom: 3rem;
  overflow: hidden;
}

.anna-hero__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 3rem;
  align-items: center;
  padding-top: 1.5rem;
}

.anna-hero__title {
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: clamp(2.5rem, 5.2vw, 4.25rem);
  line-height: 1.02;
  color: var(--color-direct-navy);
  margin: 1.25rem 0 1.5rem;
}

.anna-hero__title em {
  font-style: normal;
  color: var(--color-adventure-blue);
}

.anna-hero__lead {
  background: var(--color-white);
  border-radius: 6px;
  padding: 1.25rem 1.5rem;
  max-width: 460px;
  box-shadow: var(--shadow-card);
  transform: rotate(-1deg);
}

.anna-hero__lead-line {
  font-family: var(--font-personality);
  font-weight: 700;
  font-size: 1.625rem;
  line-height: 1.25;
  color: var(--color-direct-navy);
  margin: 0;
}

.anna-hero__figure {
  position: relative;
  justify-self: center;
  max-width: 440px;
}

.anna-hero__figure img {
  width: 100%;
  height: auto;
  display: block;
}

.anna-hero__doodle {
  position: absolute;
  top: -0.5rem;
  right: 0;
  width: 84px;
  height: 84px;
  color: var(--color-adventure-blue);
  opacity: 0.85;
}

/* ---- Case-file process strip (reusable) ---- */
.anna-process {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 0.4rem;
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
}

.anna-process__step {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-white);
  border: 1.5px solid #BDE9F9;
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.95rem 0.4rem 0.45rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-direct-navy);
}

.anna-process__num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-adventure-blue);
  color: var(--color-white);
  font-size: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.anna-process__step:not(:last-child)::after {
  content: "\2192";
  color: var(--color-adventure-blue);
  margin-left: 0.15rem;
}

/* ---- Opening case ---- */
.anna-case {
  padding: 3.5rem 0 1rem;
}

.anna-paper {
  background: var(--color-white);
  border-radius: 8px;
  padding: 2.5rem 3rem;
  box-shadow: var(--shadow-card);
  max-width: 940px;
  margin-inline: auto;
  position: relative;
}

.anna-paper .anna-tape {
  position: absolute;
  top: -0.9rem;
  left: 2rem;
}

.anna-paper__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

/* ---- Meet the robots ---- */
.anna-robots {
  padding: 4rem 0 2rem;
}

.anna-section-head {
  text-align: center;
  margin-bottom: 2.5rem;
}

.anna-robots__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
}

.anna-robot {
  display: grid;
  grid-template-columns: minmax(180px, 250px) 1fr;
  gap: 1.75rem;
  align-items: start;
}

.anna-polaroid {
  background: var(--color-white);
  padding: 0.6rem 0.6rem 0.9rem;
  box-shadow: var(--shadow-card-hover);
  transform: rotate(-2.5deg);
  position: relative;
}

.anna-robot--larry .anna-polaroid { transform: rotate(2.5deg); }

.anna-polaroid img {
  width: 100%;
  height: auto;
  display: block;
}

.anna-polaroid::before {
  content: "";
  position: absolute;
  top: -0.7rem;
  left: 50%;
  width: 84px;
  height: 22px;
  transform: translateX(-50%) rotate(2deg);
  background: rgba(189, 233, 249, 0.85);
}

.anna-robot__name {
  display: inline-block;
  margin: 0 0 0.5rem;
  font-family: var(--font-personality);
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 1;
  color: var(--color-direct-navy);
  padding: 0.15rem 0.9rem;
  background: #BFE6C8;
  transform: rotate(-1.5deg);
}

.anna-robot--larry .anna-robot__name { background: #FFD9B0; }

.anna-robot__model {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-direct-navy);
  margin: 0.6rem 0 1rem;
}

.anna-note {
  background: #D9EFFB;
  border-radius: 4px;
  padding: 1rem 1.15rem;
  transform: rotate(0.8deg);
}

.anna-note__text {
  margin: 0;
  font-family: var(--font-personality);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.25;
  color: var(--color-direct-navy);
}

/* ---- Testing programme ---- */
.anna-testing {
  padding: 3.5rem 0 1rem;
}

.anna-testing__intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1.75rem;
}

.anna-testing__lede {
  max-width: 520px;
  margin: 0;
  font-family: var(--font-personality);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.25;
  color: var(--color-body-navy);
}

/* The approved artwork: true aspect ratio, never cropped. */
.anna-testing__figure {
  margin: 0;
  background: var(--color-white);
  padding: 0.75rem;
  border-radius: 8px;
  box-shadow: var(--shadow-card-hover);
}

.anna-testing__figure img {
  width: 100%;
  height: auto;
  display: block;
}

.anna-testlog {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.anna-testlog__item {
  background: var(--color-soft-blue);
  border-radius: var(--radius-card);
  padding: 1.1rem 1.25rem;
}

.anna-testlog__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-adventure-blue);
  margin-bottom: 0.3rem;
}

.anna-testlog__text {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-body-navy);
}

/* ---- Findings + Case status (reusable) ---- */
.anna-findings-wrap {
  padding: 3.5rem 0 1rem;
}

.anna-findings {
  display: grid;
  grid-template-columns: auto 1fr 300px;
  gap: 2.5rem;
  align-items: center;
  background: #DFF2FC;
  border-radius: var(--radius-card);
  padding: 2.5rem 3rem;
}

.anna-findings__title {
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1.1;
  color: var(--color-direct-navy);
  margin: 0;
}

.anna-findings__list {
  list-style: none;
  margin: 0;
  padding: 1.25rem 1.5rem;
  background: var(--color-warm-white);
  border-radius: 8px;
}

.anna-findings__item {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.5rem 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--color-body-navy);
}

.anna-findings__item + .anna-findings__item { border-top: 1px dashed #BDE9F9; }

.anna-findings__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  transform: translateY(1px);
}

.anna-findings__dot--barry  { background: #2E9E4F; }
.anna-findings__dot--larry  { background: #F28A1F; }
.anna-findings__dot--anna   { background: var(--color-adventure-blue); }
.anna-findings__dot--mummy  { background: #E8579E; }

.anna-findings__who {
  font-weight: 700;
  color: var(--color-direct-navy);
  min-width: 4.5rem;
}

.anna-status {
  background: #FFF3B8;
  padding: 1.5rem 1.5rem 1.4rem;
  transform: rotate(1.5deg);
  box-shadow: 0 6px 18px rgba(6, 38, 92, 0.12);
}

.anna-status__title {
  font-family: var(--font-personality);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
  color: var(--color-direct-navy);
  margin: 0 0 0.75rem;
}

.anna-status__open {
  display: block;
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: 2.25rem;
  color: var(--color-direct-navy);
}

.anna-status__text {
  font-family: var(--font-personality);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.25;
  color: var(--color-direct-navy);
  margin: 0;
}

.anna-closing {
  text-align: center;
  font-family: var(--font-personality);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  color: var(--color-adventure-blue);
  margin: 2.5rem auto 0;
  max-width: 720px;
}

/* ---- About Anna ---- */
.anna-about-wrap { padding: 3.5rem 0 1rem; }

.anna-about {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
  background: var(--color-soft-blue);
  border-radius: var(--radius-card);
  padding: 2rem 2.5rem;
}

.anna-about__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-adventure-blue);
  margin: 0 0 0.5rem;
}

.anna-about__name {
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: 1.375rem;
  color: var(--color-direct-navy);
  margin: 0;
}

.anna-about__tagline {
  font-weight: 600;
  color: var(--color-body-navy);
  margin: 0.15rem 0 0.6rem;
}

.anna-about__bio {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-body-navy);
  max-width: 640px;
}

.anna-about__ctas { display: flex; flex-direction: column; gap: 0.75rem; }

.anna-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.9375rem;
  background: var(--color-adventure-blue);
  color: var(--color-white);
  border: 2px solid var(--color-adventure-blue);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.anna-btn:hover { background: var(--color-direct-navy); border-color: var(--color-direct-navy); }
.anna-btn--outline { background: transparent; color: var(--color-direct-navy); border-color: var(--color-direct-navy); }
.anna-btn--outline:hover { background: var(--color-direct-navy); color: var(--color-white); }

/* ---- Post navigation ---- */
.anna-postnav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  padding: 2.5rem 0 3.5rem;
  border-top: 1px solid var(--color-border);
  margin-top: 3rem;
}

.anna-postnav__prev { justify-self: start; }
.anna-postnav__back { justify-self: center; font-weight: 700; }

.anna-postnav__label {
  display: block;
  font-size: 0.75rem;
  color: var(--color-body-navy);
  opacity: 0.75;
}

.anna-postnav__link {
  font-weight: 700;
  color: var(--color-adventure-blue);
}

/* ---- Blog card: live Anna card uses blue CTA ---- */
.article-card--anna .article-card__cta { color: var(--color-adventure-blue); }

.anna-findings__line { display: block; }
.anna-postnav { padding-bottom: 5.5rem; }

/* --------------------------------------------------------------------------
   38. BEHIND THE ADVENTURES: From Real Dogs to Big Adventures
   Warm scrapbook treatment with the purple Behind the Adventures accent.
   Every rule is scoped to .bta-* so nothing reaches the Izzie or Anna
   articles or any other page.
   -------------------------------------------------------------------------- */

.bta { background: var(--color-warm-white); }

.bta-shell {
  width: min(1240px, calc(100% - 80px));
  margin-inline: auto;
}

.bta-text {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-body-navy);
  margin: 0 0 1rem;
}

.bta-heart {
  width: 0.8em;
  height: 0.8em;
  display: inline-block;
  vertical-align: middle;
  color: var(--color-adventure-pink);
  margin-left: 0.15em;
}

.bta-h2 {
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.3vw, 1.875rem);
  line-height: 1.18;
  color: var(--color-direct-navy);
  margin: 0 0 1rem;
}

.bta-h2__pink {
  display: block;
  margin-top: 0.35rem;
  font-weight: 600;
  font-size: 0.8em;
  color: var(--color-adventure-pink);
}

/* Brush stroke headings */
.bta-brush {
  display: inline-block;
  font-family: var(--font-personality);
  font-weight: 700;
  font-size: clamp(1.875rem, 2.8vw, 2.375rem);
  line-height: 1.05;
  color: var(--color-direct-navy);
  margin: 0 0 1.1rem;
  padding: 0.3rem 1.4rem 0.4rem 1rem;
  border-radius: 4px 18px 6px 16px;
}
.bta-brush--pink { background: linear-gradient(100deg, #FBD3E7 0%, #FDEBF5 80%, rgba(253,235,245,0) 100%); }
.bta-brush--blue { background: linear-gradient(100deg, #CFEAFB 0%, #EAF7FD 80%, rgba(234,247,253,0) 100%); }

/* Handwritten notes */
.bta-note {
  font-family: var(--font-personality);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--color-direct-navy);
  margin: 0;
}

/* Paper tags */
.bta-tag {
  display: inline-block;
  font-family: var(--font-personality);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.2;
  color: var(--color-direct-navy);
  padding: 0.45rem 1.2rem;
  border-radius: 4px;
  transform: rotate(-1.5deg);
  box-shadow: 0 2px 6px rgba(6, 38, 92, 0.08);
  margin: 0.5rem 0 0;
}
.bta-tag--pink { background: #FBD3E7; }

/* ---- Breadcrumb ---- */
.bta-crumbs { padding: 0.9rem 0 0; font-size: 0.8125rem; }
.bta-crumbs ol { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.bta-crumbs li { color: var(--color-body-navy); }
.bta-crumbs li + li::before { content: "\203A"; margin-right: 0.4rem; opacity: 0.6; }
.bta-crumbs a { color: var(--color-adventure-purple); font-weight: 600; }

/* ---- Hero ---- */
.bta-hero {
  background:
    radial-gradient(circle at 80% 30%, rgba(103, 32, 154, 0.07), transparent 50%),
    linear-gradient(180deg, var(--color-soft-purple) 0%, var(--color-warm-white) 100%);
  padding-bottom: 2.5rem;
  overflow: hidden;
}

.bta-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 3rem;
  align-items: center;
  padding-top: 1.25rem;
}

.bta-hero__title { margin: 0.75rem 0 1.25rem; }

.bta-hero__kicker {
  display: block;
  font-family: var(--font-personality);
  font-weight: 700;
  font-size: clamp(2.5rem, 4.4vw, 3.75rem);
  line-height: 1;
  color: var(--color-direct-navy);
}

.bta-hero__sub {
  display: block;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 1.2;
  color: var(--color-adventure-purple);
  margin-top: 0.4rem;
}

.bta-hero__main {
  display: block;
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: clamp(2.5rem, 5vw, 4.25rem);
  line-height: 1;
  color: var(--color-direct-navy);
}

.bta-hero__lede {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--color-direct-navy);
  margin: 0 0 1rem;
  max-width: 34rem;
}

.bta-hero__copy .bta-text { max-width: 36rem; }

.bta-hero__figure {
  position: relative;
  margin: 0;
}

.bta-hero__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: 50% 8%;
  border-radius: 28px;
  box-shadow: var(--shadow-card-hover);
}

.bta-note--top,
.bta-note--side {
  position: absolute;
  background: rgba(255, 254, 252, 0.92);
  padding: 0.5rem 0.9rem;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(6, 38, 92, 0.1);
  font-size: 1.3rem;
}
.bta-note--top  { top: -1rem; left: 1.5rem; transform: rotate(-3deg); }
.bta-note--side { bottom: -1.25rem; right: 1.25rem; transform: rotate(2deg); color: var(--color-adventure-purple); }

/* ---- Story rows (Izzie / Anna) ---- */
.bta-story {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr) 200px;
  gap: 2.25rem;
  align-items: start;
  padding: 3.5rem 0 1.5rem;
}

.bta-stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.75rem 0 0;
  padding: 0.6rem 1.4rem 0.6rem 1rem;
  background: #F7EEDF;
  border-radius: 4px;
  transform: rotate(-2deg);
  font-weight: 800;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--color-direct-navy);
  box-shadow: 0 2px 6px rgba(6, 38, 92, 0.08);
}
.bta-stamp__icon { width: 34px; height: 34px; color: var(--color-adventure-pink); }

/* Polaroid collage */
.bta-collage {
  display: grid;
  gap: 1.5rem 1.25rem;
}
.bta-collage--izzie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bta-collage--anna  { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 470px; justify-self: center; width: 100%; }

.bta-polaroid {
  margin: 0;
  background: var(--color-white);
  padding: 0.55rem 0.55rem 0;
  box-shadow: var(--shadow-card-hover);
  position: relative;
}
.bta-tilt-l { transform: rotate(-1.6deg); }
.bta-tilt-r { transform: rotate(1.6deg); }

.bta-polaroid img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.bta-collage--anna .bta-polaroid img { aspect-ratio: 1 / 1; }

.bta-polaroid__cap {
  font-family: var(--font-personality);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.1;
  text-align: center;
  color: var(--color-direct-navy);
  padding: 0.55rem 0.3rem 0.7rem;
}
.bta-polaroid__small { display: block; font-size: 0.95rem; opacity: 0.8; }

/* Per photo framing, keeps each face in view inside its crop */
.bta-img--izzie-puppy-02 { object-position: 50% 42%; }
.bta-img--izzie-puppy-03 { object-position: 50% 32%; }
.bta-img--izzie-puppy-04 { object-position: 50% 52%; }
.bta-img--izzie-puppy-05 { object-position: 34% 50%; }
.bta-img--izzie-puppy-06 { object-position: 48% 50%; }
.bta-img--anna-puppy-02  { object-position: 50% 40%; }
.bta-img--anna-puppy-03  { object-position: 55% 40%; }

/* Side cards */
.bta-sidecard {
  border-radius: 18px;
  padding: 1.5rem 1.25rem;
  text-align: center;
  color: var(--color-direct-navy);
}
.bta-sidecard--pink     { background: var(--color-soft-pink); }
.bta-sidecard--pinkblue { background: linear-gradient(180deg, var(--color-soft-pink), var(--color-soft-blue)); align-self: center; }

.bta-sidecard__globe { width: 44px; height: 44px; color: var(--color-adventure-blue); }
.bta-sidecard__title {
  font-family: var(--font-personality);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.1;
  margin: 0.4rem 0 0.9rem;
}
.bta-ticks { list-style: none; margin: 0; padding: 0; text-align: left; display: inline-block; }
.bta-ticks li {
  position: relative;
  padding-left: 1.4rem;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.75;
}
.bta-ticks li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.55em;
  width: 0.4rem;
  height: 0.7rem;
  border: solid var(--color-adventure-pink);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.bta-sidecard__more {
  font-family: var(--font-personality);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--color-adventure-blue);
  margin: 0.4rem 0 0;
}

.bta-sidecard--pinkblue .bta-heart { width: 2.25rem; height: 2.25rem; margin: 0; }
.bta-sidecard__name {
  font-family: var(--font-personality);
  font-weight: 700;
  font-size: 2.75rem;
  line-height: 1;
  margin: 0.25rem 0 0.5rem;
}
.bta-sidecard__line { margin: 0 0 0.6rem; font-size: 1rem; line-height: 1.35; }
.bta-sidecard__line--strong { font-weight: 700; font-size: 1.125rem; }

/* ---- Senior Management + bed situation ---- */
.bta-duo {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 2.5rem;
  align-items: center;
  padding: 3rem 0 1.5rem;
}

.bta-org {
  position: relative;
  margin: 0;
  background: #F7EEDF;
  border-radius: 24px;
  padding: 1rem;
}
.bta-org img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 42%;
  border-radius: 16px;
}
.bta-org__label {
  position: absolute;
  font-family: var(--font-personality);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.05;
  color: var(--color-direct-navy);
  background: rgba(255, 254, 252, 0.94);
  padding: 0.45rem 0.8rem;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(6, 38, 92, 0.12);
  margin: 0;
}
.bta-org__label--izzie { left: -0.75rem; bottom: 1.5rem; transform: rotate(-4deg); border-left: 4px solid var(--color-adventure-pink); }
.bta-org__label--anna  { right: -0.75rem; top: 1.5rem; transform: rotate(3deg); border-left: 4px solid var(--color-adventure-blue); }

.bta-beds {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) auto auto;
  gap: 2rem;
  align-items: center;
}

.bta-stats { margin: 0; }
.bta-stats__row { display: flex; align-items: baseline; gap: 0.6rem; }
.bta-stats__num {
  font-weight: 800;
  font-size: 3rem;
  line-height: 1.05;
  color: var(--color-direct-navy);
  min-width: 3.4rem;
  text-align: right;
}
.bta-stats__label { margin: 0; font-weight: 600; font-size: 1.125rem; color: var(--color-adventure-purple); }

.bta-paws { list-style: none; margin: 0; padding: 0; }
.bta-paws li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.85;
  color: var(--color-body-navy);
  white-space: nowrap;
}
.bta-paw { width: 15px; height: 15px; flex: none; color: var(--color-direct-navy); }

/* ---- Perspectives trio ---- */
.bta-trio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
  padding: 3.5rem 0 1.5rem;
}

.bta-quote { color: var(--color-direct-navy); font-weight: 700; }

.bta-roles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.bta-role {
  position: relative;
  text-align: center;
  border-radius: 24px;
  padding: 4.5rem 0.75rem 1rem;
}
.bta-role--izzie { background: radial-gradient(circle at 50% 55%, var(--color-soft-pink) 0%, rgba(253,235,245,0) 70%); }
.bta-role--anna  { background: radial-gradient(circle at 50% 55%, var(--color-soft-blue) 0%, rgba(234,247,253,0) 70%); }

.bta-role img {
  display: block;
  width: 100%;
  max-width: 220px;
  height: 200px;
  object-fit: contain;
  object-position: 50% 100%;
  margin: 0 auto;
}

.bta-bubble {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 9.5rem;
  margin: 0;
  padding: 0.5rem 0.9rem;
  border-radius: 50%;
  background: var(--color-white);
  border: 2px solid currentColor;
  font-family: var(--font-personality);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.05;
  text-align: center;
}
.bta-bubble--pink { color: var(--color-adventure-pink); left: 35%; }
.bta-bubble--blue { color: var(--color-adventure-blue); left: 65%; }

.bta-plaque {
  display: inline-flex;
  flex-direction: column;
  margin: -0.5rem 0 0;
  padding: 0.5rem 1rem;
  background: #F7EEDF;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(6, 38, 92, 0.1);
  position: relative;
}
.bta-plaque__name { font-weight: 800; font-size: 1.125rem; color: var(--color-direct-navy); }
.bta-plaque__role { font-weight: 600; font-size: 0.8125rem; color: var(--color-body-navy); }
.bta-role--izzie .bta-plaque { border-top: 3px solid var(--color-adventure-pink); }
.bta-role--anna  .bta-plaque { border-top: 3px solid var(--color-adventure-blue); }

/* ---- Real to illustrated + book ---- */
.bta-final {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.75fr) minmax(0, 1.25fr);
  gap: 2.25rem;
  align-items: center;
  padding: 3rem 0 3rem;
}

.bta-pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.bta-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  padding: 0.75rem;
  border-radius: 18px;
}
.bta-pair--izzie { background: var(--color-soft-pink); }
.bta-pair--anna  { background: var(--color-soft-blue); }
.bta-pair__item { margin: 0; text-align: center; }
.bta-pair__item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 10px;
  background: var(--color-white);
}
.bta-pair__cap {
  display: inline-block;
  margin-top: 0.5rem;
  font-family: var(--font-personality);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.1;
  white-space: nowrap;
  color: var(--color-direct-navy);
}

.bta-work {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 1.25rem;
  align-items: center;
}
.bta-work .bta-brush { font-size: clamp(1.625rem, 2.4vw, 2rem); }
.bta-note--inline { color: var(--color-adventure-purple); transform: rotate(-3deg); display: inline-block; }
.bta-note--inline span { color: var(--color-adventure-pink); }

.bta-book {
  display: block;
  border-radius: 6px;
  box-shadow: 0 14px 34px rgba(6, 38, 92, 0.22);
  transform: rotate(2.5deg);
  transition: transform var(--transition-base);
}
.bta-book:hover, .bta-book:focus-visible { transform: rotate(0deg) translateY(-3px); }
.bta-book img { display: block; width: 100%; height: auto; border-radius: 6px; }

/* ---- Closing band ---- */
.bta-closing {
  position: relative;
  background: linear-gradient(180deg, var(--color-warm-white) 0%, #EEF1FA 100%);
  padding: 3rem 0 7rem;
  text-align: center;
  overflow: hidden;
}
.bta-closing__inner { position: relative; z-index: 1; }
.bta-closing__title {
  font-weight: 800;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.15;
  color: var(--color-direct-navy);
  margin: 0 0 0.75rem;
}
.bta-closing__text {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--color-body-navy);
  margin: 0 auto 1.5rem;
  max-width: 44rem;
}
.bta-tag--next {
  background: #FBD3E7;
  font-size: 1.5rem;
  text-align: center;
}
.bta-closing__hills {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 110px;
}

/* ---- Post navigation ---- */
.bta-postnav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 2rem 0 5.5rem;
}
.bta-postnav__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-body-navy);
  opacity: 0.7;
  margin-bottom: 0.25rem;
}
.bta-postnav__link { font-weight: 700; color: var(--color-adventure-purple); }
.bta-postnav__back {
  justify-self: center;
  padding: 0.6rem 1.4rem;
  border: 2px solid var(--color-adventure-purple);
  border-radius: var(--radius-pill);
}
.bta-nowrap { white-space: nowrap; }
.bta-plaque { min-width: 9.5rem; min-height: 3.6rem; justify-content: center; }
.bta-tag__book { font-family: var(--font-primary); font-weight: 700; font-size: 1.0625rem; color: var(--color-adventure-purple); letter-spacing: 0.01em; }

/* Blog featured post: shows the full wide artwork at its natural ratio,
   no crop and no distortion, in place of the fixed 4:3 frame. */
.blog-featured__media--art {
  display: block;
  aspect-ratio: auto;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.blog-featured__media--art img {
  display: block;
  width: 100%;
  height: auto;
}
.blog-featured__media--art:hover,
.blog-featured__media--art:focus-visible {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
  .blog-featured__media--art:hover { transform: none; }
}
@media (min-width: 1200px) {
  .bta-story .bta-brush { white-space: nowrap; }
}

/* --------------------------------------------------------------------------
   39. THEIR WORLD (their-world.html)
   Real life, perspectives, follow, books, closing statement.
   Every rule is scoped to .tw-* so no other page is affected.
   -------------------------------------------------------------------------- */

.tw { background: var(--color-warm-white); overflow-x: clip; }

.tw-shell { width: min(1240px, calc(100% - 80px)); margin-inline: auto; position: relative; }

.tw-heart {
  width: 0.8em; height: 0.8em; display: inline-block; vertical-align: middle;
  color: var(--color-adventure-pink); margin-left: 0.15em;
}
.tw-nowrap { white-space: nowrap; }
.tw-paw { width: 100%; height: 100%; }

.tw-h2 {
  font-family: var(--font-primary); font-weight: 800;
  font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.12;
  color: var(--color-direct-navy); margin: 0 0 0.5rem;
}
.tw-sub {
  font-weight: 600; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.4;
  color: var(--color-direct-navy); margin: 0 0 0.75rem;
}
.tw-text { font-size: 1rem; line-height: 1.7; color: var(--color-body-navy); margin: 0 0 1rem; }

.tw-note {
  font-family: var(--font-personality); font-weight: 700; font-size: 1.5rem; line-height: 1.15;
  color: var(--color-direct-navy); margin: 0;
}

/* Buttons: reuse .btn, allow long labels to wrap on small screens */
.tw-btn { min-height: 48px; }
.tw-btn--purple {
  background: linear-gradient(135deg, #7A2FB0 0%, var(--color-adventure-purple) 100%);
  color: var(--color-white);
}

.tw-tilt-l { transform: rotate(-1.8deg); }
.tw-tilt-r { transform: rotate(1.8deg); }

/* ---- 1. Hero ---- */
.tw-hero {
  background:
    radial-gradient(circle at 12% 20%, rgba(244, 20, 131, 0.08), transparent 45%),
    radial-gradient(circle at 90% 80%, rgba(9, 169, 230, 0.10), transparent 45%),
    linear-gradient(180deg, var(--color-soft-pink) 0%, var(--color-warm-white) 100%);
  padding: 3.5rem 0 4rem;
}
.tw-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 3.5rem; align-items: center;
}
.tw-hero__title {
  font-family: var(--font-primary); font-weight: 800;
  font-size: clamp(2.375rem, 4.3vw, 3.5rem); line-height: 1.04;
  color: var(--color-direct-navy); margin: 0 0 1.25rem;
}
.tw-hero__title-accent {
  display: inline-block;
  background: var(--gradient-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tw-hero__lead {
  font-size: 1.1875rem; line-height: 1.6; color: var(--color-body-navy);
  margin: 0 0 1.75rem; max-width: 33rem;
}
.tw-hero__media { position: relative; }
.tw-hero__photo {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3;
  object-fit: cover; object-position: 50% 58%;
  border-radius: 32px; box-shadow: var(--shadow-card-hover);
}
.tw-note--hero {
  position: absolute; right: -1rem; bottom: -1.5rem; max-width: 15rem;
  background: rgba(255, 254, 252, 0.95); padding: 0.6rem 1rem; border-radius: 8px;
  box-shadow: 0 4px 14px rgba(6, 38, 92, 0.12); transform: rotate(2.5deg);
  font-size: 1.45rem;
}

/* ---- 2. Life strip ---- */
.tw-life { padding: 4.5rem 0 4rem; background: #FBF6EE; }
.tw-life__head {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 2rem; align-items: end; margin-bottom: 2.5rem;
}
.tw-life__intro .tw-text { max-width: 36rem; }
.tw-note--life { justify-self: end; transform: rotate(-3deg); color: var(--color-adventure-purple); }

.tw-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; }

.tw-polaroid {
  margin: 0; background: var(--color-white); padding: 0.6rem 0.6rem 0;
  box-shadow: var(--shadow-card-hover);
}
.tw-polaroid img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.tw-polaroid__cap {
  font-family: var(--font-personality); font-weight: 700; font-size: 1.3rem; line-height: 1.12;
  text-align: center; color: var(--color-direct-navy); padding: 0.6rem 0.25rem 0.8rem;
}
.tw-cap-name {
  display: block; font-family: var(--font-primary); font-weight: 700; font-size: 0.75rem;
  letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.2rem;
}
.tw-cap-name--izzie { color: var(--color-adventure-pink); }
.tw-cap-name--anna  { color: var(--color-adventure-blue); }
.tw-polaroid--izzie { border-bottom: 4px solid var(--color-adventure-pink); }
.tw-polaroid--anna  { border-bottom: 4px solid var(--color-adventure-blue); }

.tw-strip img[src*="izzie-executive-life"] { object-position: 70% 60%; }
.tw-strip img[src*="mercedes-anna-bed"]    { object-position: 50% 42%; }
.tw-strip img[src*="izzie-anna-social-03"] { object-position: 50% 45%; }

/* ---- 3. Perspectives ---- */
.tw-views { padding: 4.5rem 0; background: linear-gradient(180deg, var(--color-soft-pink) 0%, #FDF3F8 100%); }
.tw-views__head { text-align: center; max-width: 44rem; margin: 0 auto 2.5rem; }
.tw-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; }

.tw-card {
  display: flex; flex-direction: column; border-radius: 24px; overflow: hidden;
  background: var(--color-white); box-shadow: var(--shadow-card);
  border: 1px solid rgba(6, 38, 92, 0.06);
}
.tw-card__media { position: relative; }
.tw-card__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.tw-card--izzie .tw-card__media img { object-position: 50% 40%; }
.tw-card--anna  .tw-card__media img { object-position: 50% 45%; }
.tw-card--bta   .tw-card__media img { object-position: 50% 35%; }

.tw-card__badge {
  position: absolute; top: 0.9rem; right: 0.9rem; width: 2.75rem; height: 2.75rem; padding: 0.55rem;
  border-radius: 50%; background: rgba(255, 255, 255, 0.92); box-shadow: 0 2px 8px rgba(6, 38, 92, 0.15);
}
.tw-card--izzie .tw-card__badge { color: var(--color-adventure-pink); }
.tw-card--anna  .tw-card__badge { color: var(--color-adventure-blue); }
.tw-card__badge--heart { display: grid; place-items: center; }
.tw-card__badge--heart .tw-heart { width: 1.4rem; height: 1.4rem; margin: 0; color: var(--color-adventure-purple); }

.tw-card__body {
  flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 1.75rem 1.5rem 2rem;
}
.tw-card--izzie .tw-card__body { background: var(--color-soft-pink); }
.tw-card--anna  .tw-card__body { background: var(--color-soft-blue); }
.tw-card--bta   .tw-card__body { background: #F7EEDF; }
.tw-card__title {
  font-weight: 800; font-size: 1.5rem; line-height: 1.2; color: var(--color-direct-navy); margin: 0 0 0.6rem;
}
.tw-card__text { font-size: 1rem; line-height: 1.6; color: var(--color-body-navy); margin: 0 0 1.5rem; flex: 1; }

/* ---- 4. Follow the girls ---- */
.tw-follow { padding: 4.5rem 0; background: linear-gradient(180deg, var(--color-soft-blue) 0%, #F2FAFE 100%); }
.tw-follow__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 3rem; align-items: center;
}
.tw-follow__title { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; }
.tw-follow__ig { width: 2.25rem; height: 2.25rem; color: var(--color-adventure-pink); flex: none; }
.tw-follow__copy .tw-text { max-width: 30rem; margin-bottom: 1.5rem; }

.tw-snaps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem;
}
.tw-snap { background: var(--color-white); padding: 0.5rem 0.5rem 1.6rem; box-shadow: var(--shadow-card-hover); }
.tw-snap img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.tw-snap--art img { object-fit: contain; background: #0B0B12; }
.tw-snaps img[src*="izzie-anna-social-06"] { object-position: 78% 50%; }

/* ---- 5. From their world to the books ---- */
.tw-books {
  padding: 4rem 0;
  background: #FBF6EE;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
  border-image: linear-gradient(90deg, #CFEAFB, #FBD3E7, #E9DDF6, #CFEAFB) 1;
}
.tw-books__grid {
  display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 2rem; align-items: center;
}
.tw-books__icon { width: 64px; height: 56px; display: block; margin-bottom: 0.5rem; }
.tw-books__copy .tw-btn { margin-top: 0.5rem; }

/* Journey: real girls, illustrated girls, the book.
   On wide screens it bleeds into the right margin to give the artwork room. */
.tw-journey {
  list-style: none; margin: 0; padding: 0; position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) 34px minmax(0, 2.35fr) 34px minmax(0, 1.5fr);
  align-items: end; gap: 0.7rem;
}
@media (min-width: 1320px) {
  .tw-journey { margin-right: calc((1240px - 100vw) / 2 + 36px); }
}
.tw-journey__step { display: flex; align-items: flex-end; position: relative; }
.tw-journey__step--book { justify-content: center; }
.tw-journey__arrow { align-self: center; margin-top: 2.5rem; }
.tw-journey__arrow svg { width: 34px; height: 18px; display: block; }

/* Real girls: overlapping polaroid style frames in their character colours */
.tw-real { margin: 0; flex: 1; min-width: 0; text-align: center; position: relative; }
.tw-real + .tw-real { margin-left: -0.9rem; }
.tw-real--izzie { transform: rotate(-2.5deg); z-index: 1; }
.tw-real--anna  { transform: rotate(2.5deg) translateY(-0.6rem); }
.tw-real img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: 18px; border: 4px solid; box-shadow: var(--shadow-card-hover);
}
.tw-real--izzie img { border-color: var(--color-adventure-pink); box-shadow: 0 0 0 5px #FBD3E7, var(--shadow-card-hover); object-position: 50% 45%; }
.tw-real--anna img  { border-color: var(--color-adventure-blue); box-shadow: 0 0 0 5px #CFEAFB, var(--shadow-card-hover); object-position: 50% 30%; }
.tw-real__label {
  display: flex; flex-direction: column; justify-content: flex-end; min-height: 3.2em;
  font-family: var(--font-personality); font-weight: 700; font-size: 1.1rem; line-height: 1.1;
  white-space: nowrap; margin-bottom: 0.65rem;
}
.tw-real__name { display: block; font-size: 1.5rem; }
.tw-real--izzie .tw-real__label { color: #B8126A; }
.tw-real--anna  .tw-real__label { color: #0757B3; }
.tw-real--izzie .tw-real__name { color: var(--color-adventure-pink); }
.tw-real--anna  .tw-real__name { color: var(--color-adventure-blue); }

/* Illustrated girls: soft colour pools and small character accents */
.tw-illus { position: relative; flex: 1; min-width: 0; display: block; }
.tw-illus + .tw-illus { margin-left: -1.1rem; }
.tw-illus::before {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: -4%; height: 26%;
  border-radius: 50%; filter: blur(2px); z-index: 0;
}
.tw-illus--izzie::before { background: radial-gradient(ellipse at center, rgba(244, 20, 131, 0.28), rgba(244, 20, 131, 0) 70%); }
.tw-illus--anna::before  { background: radial-gradient(ellipse at center, rgba(9, 169, 230, 0.32), rgba(9, 169, 230, 0) 70%); }
.tw-illus img { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
.tw-illus__accent { position: absolute; z-index: 2; width: 30px; height: 22px; }
.tw-illus__accent--crown { color: var(--color-adventure-pink); top: -1.4rem; left: 50%; transform: translateX(-60%) rotate(-8deg); }
.tw-illus__accent--spark { color: #09A9E6; top: -1.3rem; left: 50%; transform: translateX(-40%); }

/* The book, larger, with a soft brand glow */
.tw-book {
  display: block; width: 100%; max-width: 250px; border-radius: 6px; position: relative;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.9), 0 18px 40px rgba(103, 32, 154, 0.28);
  transform: rotate(2deg);
  transition: transform var(--transition-base);
}
.tw-book:hover, .tw-book:focus-visible { transform: rotate(0deg) translateY(-3px); }
.tw-book img { display: block; width: 100%; height: auto; border-radius: 6px; }

.tw-butterfly { position: absolute; width: 38px; height: 30px; pointer-events: none; }
.tw-butterfly--pink { color: #F58CC4; top: -1.9rem; left: 0; transform: rotate(-12deg); z-index: 1; }
.tw-butterfly--blue { color: #7CC7F0; top: 45%; right: -1.6rem; transform: rotate(14deg); width: 30px; height: 24px; }
.tw-deco { position: absolute; pointer-events: none; z-index: 2; }
.tw-deco--paw1 { width: 20px; height: 20px; color: #09A9E6; right: -0.6rem; bottom: 0.25rem; transform: rotate(15deg); }
.tw-deco--heart1 { left: -0.6rem; bottom: 0.4rem; }
.tw-deco--heart1 .tw-heart { width: 1.3rem; height: 1.3rem; color: var(--color-adventure-pink); }

/* ---- 6. Closing statement ---- */
.tw-close {
  padding: 4.5rem 0 5.5rem;
  background:
    radial-gradient(circle at 15% 30%, rgba(244, 20, 131, 0.10), transparent 45%),
    radial-gradient(circle at 85% 70%, rgba(9, 169, 230, 0.12), transparent 45%),
    var(--color-soft-purple);
}
.tw-close__grid {
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 3rem; align-items: center;
}
.tw-close__statement {
  font-family: var(--font-primary); font-weight: 800;
  font-size: clamp(1.625rem, 3vw, 2.4rem); line-height: 1.25;
  color: var(--color-direct-navy); margin: 0;
}
.tw-close__statement > span { display: block; }
.tw-close__kw { font-style: normal; }
.tw-close__kw--pink   { color: var(--color-adventure-pink); }
.tw-close__kw--purple { color: var(--color-adventure-purple); }
.tw-close__kw--blue   { color: var(--color-adventure-blue); }
.tw-close__media { margin: 0; max-width: 420px; justify-self: end; width: 100%; }
.tw-close__media img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 62%;
  border-radius: 50% 50% 32px 32px; box-shadow: var(--shadow-card-hover);
  border: 8px solid var(--color-white);
}

/* --------------------------------------------------------------------------
   40. BOOKS (books.html): Book One, Izzie & Anna Go to Work
   Every rule is scoped to .bk-* so no other page is affected.
   The launch list reuses the global .newsletter-form styles and main.js.
   -------------------------------------------------------------------------- */

.bk { background: var(--color-warm-white); overflow-x: clip; }
.bk-shell { width: min(1240px, calc(100% - 80px)); margin-inline: auto; position: relative; }
.bk-heart {
  width: 0.8em; height: 0.8em; display: inline-block; vertical-align: middle;
  color: var(--color-adventure-pink); margin-left: 0.15em;
}
.bk-nowrap { white-space: nowrap; }
.bk-h2 {
  font-family: var(--font-primary); font-weight: 800;
  font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.15;
  color: var(--color-direct-navy); margin: 0 0 0.75rem;
}
.bk-text { font-size: 1rem; line-height: 1.7; color: var(--color-body-navy); margin: 0 0 1rem; }
.bk-note {
  font-family: var(--font-personality); font-weight: 700; font-size: 1.45rem; line-height: 1.12;
  color: var(--color-direct-navy); margin: 0;
}
.bk-tilt-l { transform: rotate(-2deg); }
.bk-tilt-r { transform: rotate(2deg); }

.bk-butterfly { position: absolute; width: 36px; height: 28px; pointer-events: none; z-index: 0; }

/* Pink round "Coming November 2026" badge, used in hero and launch list */
.bk-date {
  display: grid; place-items: center; align-content: center;
  width: 190px; aspect-ratio: 1; margin: 0; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #FDE3F0 0%, #FBD3E7 60%, #F7C1DD 100%);
  box-shadow: 0 10px 30px rgba(244, 20, 131, 0.15);
  font-family: var(--font-personality); font-weight: 700; font-size: 2.1rem; line-height: 1;
  color: var(--color-direct-navy); text-align: center; transform: rotate(-6deg);
}
.bk-date span { font-size: 1.7rem; }

/* ---- 1. Hero ---- */
.bk-hero {
  padding: 3rem 0 3.5rem;
  background:
    radial-gradient(circle at 8% 25%, rgba(244, 20, 131, 0.07), transparent 40%),
    radial-gradient(circle at 92% 30%, rgba(9, 169, 230, 0.12), transparent 42%),
    linear-gradient(180deg, #FFF 0%, var(--color-warm-white) 100%);
}
.bk-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) 210px;
  gap: 2.5rem; align-items: center;
}
.bk-hero__kicker {
  font-family: var(--font-personality); font-weight: 700; font-size: 2rem; line-height: 1;
  color: var(--color-adventure-purple); margin: 0 0 0.35rem;
}
.bk-hero__kicker-paw { display: inline-block; width: 1.4rem; height: 1.4rem; color: var(--color-adventure-pink); vertical-align: 0.05em; }
.bk-paw { width: 100%; height: 100%; display: block; }
.bk-hero__title {
  font-family: var(--font-primary); font-weight: 800;
  font-size: clamp(2.5rem, 4.6vw, 4rem); line-height: 1.02; letter-spacing: -0.01em;
  color: var(--color-direct-navy); margin: 0 0 1rem;
}
.bk-hero__tagline { margin: 0 0 1.5rem; }
.bk-hero__tagline span {
  display: inline-block; padding: 0.45rem 1.1rem 0.5rem; border-radius: 4px 16px 6px 14px;
  background: linear-gradient(100deg, #FBD3E7 0%, #FDE3F0 85%, rgba(253, 227, 240, 0) 100%);
  font-family: var(--font-personality); font-weight: 700; font-size: 1.6rem; line-height: 1.1;
  color: var(--color-adventure-pink); transform: rotate(-1.5deg);
}
.bk-hero__lead {
  font-weight: 600; font-size: 1.25rem; line-height: 1.45; color: var(--color-direct-navy); margin: 0 0 0.9rem;
}
.bk-hero__copy .bk-text { max-width: 30rem; }
.bk-hero__cover { margin: 0; justify-self: center; width: 100%; max-width: 470px; }
.bk-hero__cover img {
  display: block; width: 100%; height: auto; border-radius: 6px;
  box-shadow: 0 2px 0 #E9E3DA, 0 24px 50px rgba(6, 38, 92, 0.25);
  transform: rotate(1.5deg);
}
.bk-hero__side { display: flex; flex-direction: column; align-items: center; gap: 2rem; }
.bk-note--hero { color: var(--color-direct-navy); text-align: center; transform: rotate(-3deg); }
.bk-butterfly--a { color: #9FC8F2; top: 0.25rem; left: 28%; transform: rotate(-14deg); }
.bk-butterfly--b { color: #F58CC4; bottom: 0.5rem; right: 0; transform: rotate(12deg); }

/* ---- 2. Story beats ---- */
.bk-story { padding: 4rem 0 4.5rem; background: #FFF; }
.bk-story__head { text-align: center; max-width: 46rem; margin: 0 auto 2.75rem; }
.bk-story__summary { font-size: 1.0625rem; }
.bk-beats {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem;
}
.bk-beat { text-align: center; }
.bk-beat__icon {
  display: grid; place-items: center; width: 84px; height: 84px; margin: 0 auto 1rem; border-radius: 50%;
}
.bk-beat__icon svg { width: 40px; height: 40px; }
.bk-beat--pink   .bk-beat__icon { background: var(--color-soft-pink); color: var(--color-adventure-pink); }
.bk-beat--blue   .bk-beat__icon { background: var(--color-soft-blue); color: var(--color-adventure-blue); }
.bk-beat--purple .bk-beat__icon { background: var(--color-soft-purple); color: var(--color-adventure-purple); }
.bk-beat__title { font-weight: 700; font-size: 1.1875rem; line-height: 1.25; color: var(--color-direct-navy); margin: 0 0 0.4rem; }
.bk-beat__text { font-size: 0.9375rem; line-height: 1.6; color: var(--color-body-navy); margin: 0; }

/* ---- 3. Two perspectives ---- */
.bk-views { display: grid; grid-template-columns: 1fr 1fr; }
.bk-view {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 1rem;
  padding: 2.75rem max(2.5rem, calc((100vw - 1240px) / 2)) 2.75rem 2.5rem;
}
.bk-view--izzie {
  background: linear-gradient(120deg, #FDEBF5 0%, #FBD3E7 100%);
  padding-left: max(40px, calc((100vw - 1240px) / 2)); padding-right: 2.5rem;
}
.bk-view--anna { background: linear-gradient(120deg, #EAF7FD 0%, #CFEAFB 100%); }
.bk-view__title {
  font-family: var(--font-personality); font-weight: 700; font-size: clamp(2.1rem, 3vw, 2.65rem); line-height: 1;
  margin: 0 0 0.9rem; white-space: nowrap;
}
.bk-view--izzie .bk-view__title { color: var(--color-adventure-pink); }
.bk-view--anna  .bk-view__title { color: var(--color-adventure-blue); }
.bk-view__role { font-weight: 700; font-size: 1rem; color: var(--color-direct-navy); margin: 0; }
.bk-view__text { font-size: 1rem; line-height: 1.6; color: var(--color-body-navy); margin: 0 0 1rem; }
.bk-view__quote { font-family: var(--font-personality); font-weight: 700; font-size: 1.5rem; line-height: 1.1; margin: 0; }
.bk-view--izzie .bk-view__quote { color: #C2126F; }
.bk-view--anna  .bk-view__quote { color: #0757B3; }
.bk-view__art { position: relative; display: flex; flex-direction: column; align-items: center; }
.bk-view__art img { display: block; width: 100%; max-width: 260px; height: auto; margin-inline: auto; }
.bk-note--view { order: -1; align-self: flex-end; font-size: 1.3rem; text-align: right; transform: rotate(4deg); margin-bottom: 0.25rem; }

/* ---- 4. Real dogs to book characters ---- */
.bk-real { padding: 4rem 0; background: #FBF6EE; }
.bk-real__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); gap: 3rem; align-items: center; }
.bk-real__pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; }
.bk-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.bk-polaroid { margin: 0; background: #FFF; padding: 0.55rem 0.55rem 0; box-shadow: var(--shadow-card-hover); }
.bk-polaroid img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.bk-polaroid__cap {
  font-family: var(--font-personality); font-weight: 700; font-size: 1.25rem; line-height: 1.1;
  text-align: center; padding: 0.55rem 0.2rem 0.7rem; white-space: nowrap;
}
.bk-polaroid--izzie { border-bottom: 4px solid var(--color-adventure-pink); }
.bk-polaroid--anna  { border-bottom: 4px solid var(--color-adventure-blue); }
.bk-polaroid--izzie .bk-polaroid__cap { color: #C2126F; }
.bk-polaroid--anna  .bk-polaroid__cap { color: #0757B3; }
.bk-pair--anna .bk-polaroid:first-child img { object-position: 50% 30%; }
.bk-butterfly--c { color: #9FC8F2; top: -2.25rem; right: 0; transform: rotate(10deg); }

/* ---- 5. Take a peek inside ---- */
.bk-peek { padding: 4rem 0 4.5rem; background: linear-gradient(180deg, var(--color-soft-purple) 0%, #F7F2FD 100%); }
.bk-peek__grid { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 2.3fr); gap: 2.5rem; align-items: center; }
.bk-peek__arrow { width: 90px; height: 40px; display: block; margin-top: 0.5rem; }
.bk-spreads { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.bk-spread { margin: 0; }
/* Spreads are shown whole at their natural 3:2 ratio: never cropped */
.bk-spread img {
  display: block; width: 100%; height: auto; border-radius: 4px;
  box-shadow: 0 2px 0 #E5DFF0, 0 18px 36px rgba(6, 38, 92, 0.2);
}
.bk-spread__cap { font-size: 0.8125rem; line-height: 1.4; color: var(--color-body-navy); margin-top: 0.7rem; text-align: center; }
.bk-butterfly--d { color: #B98BE0; bottom: -2rem; left: 12%; transform: rotate(-10deg); }

/* ---- 6. Launch list ---- */
.bk-launch { padding: 4rem 0 4.5rem; background: #FFF; }
.bk-launch__grid { display: grid; grid-template-columns: 220px minmax(0, 1fr) 300px; gap: 2.5rem; align-items: center; }
.bk-launch__main { text-align: center; }
.bk-launch__main .bk-text { max-width: 34rem; margin-inline: auto; }
.bk-form { max-width: 34rem; margin: 1.5rem auto 0; }
.bk-launch .newsletter__consent { margin-top: 1rem; }
.bk-launch__art { position: relative; display: flex; flex-direction: column; }
.bk-launch__art img { display: block; width: 100%; height: auto; }
.bk-note--launch { order: -1; align-self: flex-end; color: var(--color-adventure-purple); transform: rotate(-4deg); text-align: right; font-size: 1.35rem; margin-bottom: 0.25rem; }
.bk-form { align-items: flex-start; }
.bk-form .newsletter-form__input { min-height: 57px; font-family: var(--font-primary); }
.bk-form .newsletter-form__submit { align-self: flex-start; }

/* --------------------------------------------------------------------------
   41. FOLLOW THE GIRLS (follow-the-girls.html)
   Scoped to .ftg-*. Elfsight is treated as a black box: nothing here
   targets the widget's internal markup.
   -------------------------------------------------------------------------- */

.ftg { background: var(--color-warm-white); overflow-x: clip; }
.ftg-shell { width: min(1240px, calc(100% - 80px)); margin-inline: auto; position: relative; }
.ftg-heart { width: 0.55em; height: 0.55em; display: inline-block; vertical-align: 0.35em; color: var(--color-adventure-pink); margin-left: 0.2em; }
.ftg-nowrap { white-space: nowrap; }
.ftg-butterfly { position: absolute; width: 36px; height: 28px; pointer-events: none; }

/* ---- Hero ---- */
.ftg-hero {
  position: relative; overflow: hidden; text-align: center;
  padding: 3.25rem 0 3.5rem;
  background:
    radial-gradient(circle at 20% 30%, rgba(244, 20, 131, 0.08), transparent 40%),
    radial-gradient(circle at 80% 30%, rgba(9, 169, 230, 0.10), transparent 40%),
    linear-gradient(180deg, #FFF 0%, var(--color-warm-white) 100%);
}
.ftg-hero__copy { position: relative; z-index: 1; max-width: 44rem; }
.ftg-hero__title {
  font-family: var(--font-personality); font-weight: 700;
  font-size: clamp(3rem, 6.5vw, 5.5rem); line-height: 1; color: var(--color-direct-navy); margin: 0 0 0.75rem;
}
.ftg-hero__sub { font-weight: 700; font-size: clamp(1.25rem, 2.1vw, 1.75rem); line-height: 1.3; color: var(--color-direct-navy); margin: 0 0 0.6rem; }
.ftg-hero__lead { font-size: 1.0625rem; line-height: 1.6; color: var(--color-body-navy); margin: 0; }
.ftg-hero__dog {
  position: absolute; bottom: 0; width: clamp(190px, 21vw, 300px); height: 100%;
  object-fit: cover; z-index: 0;
  -webkit-mask-image: linear-gradient(var(--ftg-dir, 90deg), #000 0%, #000 30%, rgba(0, 0, 0, 0.55) 62%, transparent 100%);
          mask-image: linear-gradient(var(--ftg-dir, 90deg), #000 0%, #000 30%, rgba(0, 0, 0, 0.55) 62%, transparent 100%);
}
.ftg-hero__dog--izzie { left: 0; object-position: 30% 45%; --ftg-dir: 90deg; }
.ftg-hero__dog--anna  { right: 0; object-position: 50% 30%; --ftg-dir: 270deg; }
.ftg-butterfly--a { color: #F58CC4; top: 1.5rem; left: 26%; transform: rotate(-14deg); }
.ftg-butterfly--b { color: #7CC7F0; bottom: 1.75rem; right: 25%; transform: rotate(12deg); width: 30px; height: 24px; }

/* ---- Two account panels ---- */
.ftg-panels {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem;
  padding: 2.5rem 0 3.5rem;
}
.ftg-panel {
  display: flex; flex-direction: column; min-width: 0;
  border-radius: 28px; padding: 2rem 2rem 2.25rem;
  box-shadow: var(--shadow-card); border: 1px solid rgba(6, 38, 92, 0.06);
}
.ftg-panel--real { background: linear-gradient(160deg, #FFF5FA 0%, var(--color-soft-pink) 100%); }
.ftg-panel--da   { background: linear-gradient(160deg, #F4FBFF 0%, var(--color-soft-blue) 100%); }
.ftg-panel__head { margin-bottom: 1.5rem; }
.ftg-panel__title {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  font-family: var(--font-personality); font-weight: 700; font-size: clamp(2.25rem, 3.4vw, 3rem); line-height: 1;
  color: var(--color-direct-navy); margin: 0 0 0.75rem;
}
.ftg-panel__icon { width: 2.4rem; height: 2.4rem; flex: none; }
.ftg-panel--real .ftg-panel__icon { color: var(--color-adventure-pink); }
.ftg-panel--da   .ftg-panel__icon { color: var(--color-adventure-blue); width: 2.75rem; }
.ftg-panel__text { font-size: 1rem; line-height: 1.6; color: var(--color-body-navy); margin: 0 0 1rem; max-width: 34rem; }
.ftg-handle {
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px;
  font-weight: 700; font-size: 1.0625rem; color: var(--color-direct-navy); text-decoration: none;
}
.ftg-handle:hover span, .ftg-handle:focus-visible span { text-decoration: underline; }
.ftg-ig { width: 30px; height: 30px; flex: none; }
.ftg-chev { width: 1em; height: 1em; flex: none; }

.ftg-feed { flex: 1; min-width: 0; }
.ftg-gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.ftg-tile img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 12px; box-shadow: 0 4px 12px rgba(6, 38, 92, 0.12);
}
.ftg-gallery img[src*="izzie-executive-life"] { object-position: 72% 60%; }
.ftg-gallery img[src*="izzie-anna-social-03"] { object-position: 50% 45%; }
.ftg-gallery img[src*="meet-girls-hero"]      { object-position: 50% 65%; }

/* Live feed: the fallback note shows only while the widget slot is still empty */
.ftg-feed--live { position: relative; display: flex; flex-direction: column; }
.ftg-feed__fallback {
  flex: 1; min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9rem;
  margin: 0; padding: 2.5rem 1.5rem; border-radius: 16px; text-align: center;
  background: rgba(255, 255, 255, 0.6); border: 2px dashed rgba(9, 105, 215, 0.25);
  font-size: 0.9375rem; line-height: 1.6; color: var(--color-body-navy);
}
.ftg-feed__fallback .ftg-ig { width: 44px; height: 44px; }
.ftg-feed__fallback span { max-width: 22rem; }
.ftg-feed__fallback a { font-weight: 700; color: var(--color-adventure-blue); }
.ftg-feed--live [class^="elfsight-app-"]:not(:empty) ~ .ftg-feed__fallback { display: none; }

.ftg-btn { align-self: center; margin-top: 1.75rem; min-height: 52px; gap: 0.6rem; }
.ftg-btn-ig { width: 1.2em; height: 1.2em; }

/* ---- Social bridge ---- */
.ftg-bridge {
  padding: 3rem 0 4.5rem;
  background:
    radial-gradient(circle at 15% 50%, rgba(244, 20, 131, 0.07), transparent 40%),
    radial-gradient(circle at 85% 50%, rgba(9, 169, 230, 0.09), transparent 40%),
    #FBF6EE;
}
.ftg-bridge__inner { display: grid; grid-template-columns: 190px minmax(0, 1fr) 190px; gap: 1.5rem 2rem; align-items: center; }
.ftg-plats { grid-column: 2; }
.ftg-bridge__title {
  grid-column: 1 / -1; text-align: center;
  font-family: var(--font-personality); font-weight: 700; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.15;
  color: var(--color-direct-navy); margin: 0 0 0.5rem;
}
.ftg-underline { text-decoration: underline; text-decoration-color: var(--color-adventure-pink); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.ftg-plats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem 2.25rem; }
.ftg-plat__link {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.2rem;
  min-width: 110px; text-decoration: none; color: var(--color-direct-navy);
}
.ftg-plat__icon {
  display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; margin-bottom: 0.45rem;
  background: #FFF; box-shadow: 0 6px 18px rgba(6, 38, 92, 0.10);
  transition: transform var(--transition-base);
}
.ftg-plat__icon svg { width: 32px; height: 32px; }
a.ftg-plat__link:hover .ftg-plat__icon, a.ftg-plat__link:focus-visible .ftg-plat__icon { transform: translateY(-3px); }
.ftg-plat--rg .ftg-plat__icon { color: var(--color-adventure-pink); box-shadow: 0 0 0 6px #FBD3E7, 0 6px 18px rgba(6, 38, 92, 0.10); }
.ftg-plat--da .ftg-plat__icon { color: var(--color-adventure-blue); box-shadow: 0 0 0 6px #CFEAFB, 0 6px 18px rgba(6, 38, 92, 0.10); }
.ftg-plat--tt .ftg-plat__icon { color: #111; }
.ftg-plat--fb .ftg-plat__icon { color: #1877F2; }
.ftg-plat--li .ftg-plat__icon { color: #0A66C2; }
.ftg-plat__title { font-weight: 700; font-size: 0.9375rem; }
.ftg-plat__sub { font-size: 0.8125rem; color: var(--color-body-navy); max-width: 9rem; line-height: 1.3; }
.ftg-plat--soon .ftg-plat__icon { opacity: 0.55; }
.ftg-plat--soon .ftg-plat__sub { font-style: italic; }

.ftg-sign { position: relative; width: 190px; height: 130px; }
.ftg-sign__post { position: absolute; left: 50%; top: 10px; bottom: 0; width: 8px; margin-left: -4px; border-radius: 3px; background: #B98E63; }
.ftg-sign__board {
  position: absolute; z-index: 1; left: 50%; padding: 0.45rem 1.4rem 0.45rem 1rem;
  font-weight: 800; font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-direct-navy);
  white-space: nowrap; border-radius: 4px; box-shadow: 0 3px 8px rgba(6, 38, 92, 0.12);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
}
.ftg-sign__board--a { top: 18px; background: #FBD3E7; transform: translateX(-45%) rotate(-3deg); }
.ftg-sign__board--b {
  top: 66px; background: #CFEAFB; transform: translateX(-55%) rotate(3deg);
  padding: 0.45rem 1rem 0.45rem 1.4rem; clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);
}

/* Follow the Girls: Real Girls live feed fallback in the pink world.
   Styles only this page's own placeholder, never the Elfsight widget. */
.ftg-panel--real .ftg-feed__fallback { border-color: rgba(244, 20, 131, 0.25); }
.ftg-panel--real .ftg-feed__fallback a { color: var(--color-adventure-pink); }

/* --------------------------------------------------------------------------
   42. ABOUT (about.html): Direct Adventures and the Direct Networks ecosystem
   Scoped to .ab-*. The newsletter section reuses the existing component.
   -------------------------------------------------------------------------- */

.ab { background: #FFF; overflow-x: clip; }
.ab-shell { width: min(1240px, calc(100% - 80px)); margin-inline: auto; position: relative; }
.ab-heart { width: 1em; height: 1em; display: block; }
.ab-paw { width: 100%; height: 100%; display: block; }
.ab-nowrap { white-space: nowrap; }
.ab-eyebrow { margin-bottom: 0.75rem; }
.ab-h2 {
  font-family: var(--font-primary); font-weight: 800;
  font-size: clamp(1.875rem, 3.2vw, 2.75rem); line-height: 1.12;
  color: var(--color-direct-navy); margin: 0 0 1.1rem;
}
.ab-text { font-size: 1.0625rem; line-height: 1.7; color: var(--color-body-navy); margin: 0 0 1rem; }
.ab-text--strong { font-weight: 700; color: var(--color-direct-navy); }
.ab-note { font-family: var(--font-personality); font-weight: 700; color: var(--color-direct-navy); margin: 0; }

/* ---- Hero ---- */
.ab-hero { padding: 3rem 0 0; background: #FFF; }
.ab-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 2rem; align-items: center; }
.ab-hero__copy { padding-bottom: 3rem; }
.ab-hero__title {
  font-family: var(--font-primary); font-weight: 800;
  font-size: clamp(2.5rem, 4.4vw, 3.75rem); line-height: 1.04; letter-spacing: -0.015em;
  color: var(--color-direct-navy); margin: 0 0 1.5rem;
}
.ab-hero__line { display: block; }
.ab-hero__line--pink { color: var(--color-adventure-pink); }
.ab-hero__lead { font-size: 1.125rem; line-height: 1.65; color: var(--color-body-navy); margin: 0 0 1.75rem; max-width: 33rem; }
.ab-note--titles { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1.85rem; transform: rotate(-3deg); margin-left: 1.5rem; }
.ab-note__paw { width: 1.3rem; height: 1.3rem; color: var(--color-adventure-pink); }

.ab-hero__media { position: relative; margin: 0; padding: 2.25rem 4.75rem 0; align-self: end; }
.ab-hero__wash {
  position: absolute; inset: 0 0 0 1rem; border-radius: 48% 52% 0 0 / 40% 44% 0 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(244, 20, 131, 0.16), transparent 55%),
    radial-gradient(circle at 75% 35%, rgba(123, 63, 184, 0.16), transparent 55%),
    linear-gradient(180deg, #FDEBF5 0%, #F3ECFB 100%);
}
.ab-hero__photo {
  position: relative; display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 42%;
  border-radius: 40% 40% 0 0 / 30% 30% 0 0;
}
.ab-ann {
  position: absolute; z-index: 2; margin: 0; display: flex; flex-direction: column;
  font-family: var(--font-personality); font-weight: 700; line-height: 1.05; color: var(--color-direct-navy);
}
.ab-ann__name { font-size: 1.75rem; }
.ab-ann__role { font-size: 1.1rem; }
.ab-ann__icon { width: 30px; height: 22px; color: var(--color-adventure-pink); margin-bottom: 0.15rem; }
.ab-ann__arrow { width: 36px; height: 36px; margin-top: 0.3rem; }
.ab-ann--izzie { right: -0.25rem; top: 1rem; text-align: right; align-items: flex-end; transform: rotate(5deg); }
.ab-ann--izzie .ab-ann__name { color: #C2126F; }
.ab-ann--izzie .ab-ann__arrow { color: var(--color-adventure-pink); align-self: flex-start; }
.ab-ann--anna { left: -0.25rem; top: 20%; transform: rotate(-6deg); }
.ab-ann--anna .ab-ann__name { color: #0757B3; }
.ab-ann--anna .ab-ann__arrow { color: var(--color-adventure-blue); align-self: flex-end; }
.ab-deco { position: absolute; z-index: 1; color: #C98FE0; width: 1.6rem; height: 1.6rem; }
.ab-deco--h1 { top: 0.25rem; left: 46%; color: #B98BE0; }
.ab-deco--h2 { top: 40%; left: 1rem; width: 1.3rem; height: 1.3rem; color: var(--color-adventure-pink); }

/* ---- Stories + north star ---- */
.ab-stories { padding: 4.5rem 0; background: #FBF6EE; }
.ab-stories__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: center; }
.ab-stories__copy .ab-text { max-width: 34rem; }
.ab-quote {
  position: relative; margin: 0; padding: 2.5rem 2.5rem 2.75rem 3.5rem; border-radius: 6px 28px 10px 24px;
  background: linear-gradient(110deg, #FDE3F0 0%, #FBD3E7 55%, rgba(251, 211, 231, 0.55) 100%);
  transform: rotate(-1.5deg);
}
.ab-quote__mark { position: absolute; left: 1rem; top: 1rem; width: 2.25rem; height: 1.7rem; color: var(--color-adventure-pink); }
.ab-quote__text { margin: 0; }
.ab-quote__text p {
  font-family: var(--font-personality); font-weight: 700; font-size: clamp(1.75rem, 2.8vw, 2.4rem); line-height: 1.3;
  color: var(--color-direct-navy); margin: 0;
}
.ab-quote__text p::after {
  content: ""; display: block; width: 7rem; height: 4px; margin-top: 1rem; border-radius: 4px; background: var(--color-adventure-pink);
}
.ab-quote__paw { position: absolute; right: 1.25rem; bottom: 1.1rem; width: 1.6rem; height: 1.6rem; color: var(--color-adventure-pink); }

/* ---- Direct Networks ecosystem ---- */
.ab-net {
  padding: 4.5rem 0 4.5rem;
  background:
    radial-gradient(circle at 12% 15%, rgba(9, 169, 230, 0.10), transparent 40%),
    radial-gradient(circle at 88% 10%, rgba(123, 63, 184, 0.08), transparent 40%),
    linear-gradient(180deg, #EEF6FD 0%, #FFF 100%);
}
.ab-net__head { text-align: center; max-width: 62rem; margin: 0 auto 2.25rem; }
.ab-net__head .ab-text { max-width: 52rem; margin-inline: auto; }
.ab-net__title { font-size: clamp(1.75rem, 3vw, 2.6rem); }
.ab-net__head .ab-text { margin-bottom: 0.6rem; }

.ab-hub { position: relative; display: flex; flex-direction: column; align-items: center; }
.ab-hub__brand {
  display: inline-flex; align-items: center; gap: 0.9rem; padding: 0.5rem 1rem; border-radius: 14px;
  text-decoration: none; color: var(--color-direct-navy); position: relative; z-index: 1;
}
.ab-hub__brand:hover .ab-hub__name, .ab-hub__brand:focus-visible .ab-hub__name { text-decoration: underline; }
.ab-hub__dots { display: grid; grid-template-columns: repeat(3, 12px); gap: 4px; }
.ab-hub__dots i { width: 12px; height: 12px; border-radius: 50%; display: block; }
.ab-hub__dots i:nth-child(1) { background: #0F8F86; }
.ab-hub__dots i:nth-child(2) { background: #0969D7; }
.ab-hub__dots i:nth-child(3) { background: #7B3FB8; }
.ab-hub__dots i:nth-child(4) { background: #B44FD1; grid-column: 1 / 2; margin-left: 8px; }
.ab-hub__dots i:nth-child(5) { background: #F41483; margin-left: 8px; }
.ab-hub__words { display: flex; flex-direction: column; text-align: left; }
.ab-hub__name { font-weight: 800; font-size: 1.6rem; letter-spacing: 0.04em; line-height: 1.1; }
.ab-hub__name b { font-weight: 500; }
.ab-hub__tag { font-size: 0.875rem; color: var(--color-body-navy); }
.ab-hub__lines { display: block; width: 100%; height: 70px; margin-top: -0.25rem; }

.ab-bizs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.ab-biz {
  display: flex; flex-direction: column; padding: 1.75rem 1.5rem 1.6rem; border-radius: 20px;
  background: #FFF; border: 1px solid; box-shadow: var(--shadow-card);
  --biz: var(--color-direct-navy);
}
.ab-biz--agility { --biz: #0F8F86; border-color: rgba(15, 143, 134, 0.22); background: linear-gradient(180deg, #F2FBFA 0%, #FFF 60%); }
.ab-biz--ewow    { --biz: #1F5BD6; border-color: rgba(31, 91, 214, 0.20); background: linear-gradient(180deg, #F1F6FE 0%, #FFF 60%); }
.ab-biz--os      { --biz: #7B3FB8; border-color: rgba(123, 63, 184, 0.20); background: linear-gradient(180deg, #F6F1FC 0%, #FFF 60%); }
.ab-biz--da      { --biz: var(--color-adventure-pink); border-color: rgba(244, 20, 131, 0.22); background: linear-gradient(180deg, #FFF2F8 0%, #FFF 60%); }
.ab-biz__name {
  margin: 0 0 1.1rem; min-height: 3.2rem; display: flex; align-items: center;
  font-weight: 800; font-size: 1.45rem; line-height: 1.05; letter-spacing: 0.03em; color: var(--biz);
}
.ab-biz__name b { font-weight: 800; margin-left: 0.3em; }
.ab-biz--da .ab-biz__name { letter-spacing: 0; color: var(--color-direct-navy); font-size: 1.6rem; }
.ab-biz__script { font-family: var(--font-personality); font-weight: 700; font-size: 1.35em; color: var(--color-adventure-blue); margin-left: 0.25em; }
.ab-biz__title { font-weight: 700; font-size: 1.0625rem; line-height: 1.3; color: var(--color-direct-navy); margin: 0 0 0.5rem; }
.ab-biz--da .ab-biz__title { color: #C2126F; }
.ab-biz__text { font-size: 0.9375rem; line-height: 1.6; color: var(--color-body-navy); margin: 0 0 1.4rem; flex: 1; }
.ab-biz__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 48px; margin: 0;
  padding: 0.75rem 1.1rem; border-radius: var(--radius-pill); background: var(--biz); color: #FFF;
  font-weight: 600; font-size: 0.9375rem; text-decoration: none; text-align: center;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
a.ab-biz__cta:hover, a.ab-biz__cta:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(6, 38, 92, 0.18); }
.ab-biz__cta--here { background: linear-gradient(90deg, #F41483, #F66BAE); }
.ab-biz__here-paw { width: 1rem; height: 1rem; }

/* ---- Different worlds. Same curiosity. ---- */
.ab-close { background: linear-gradient(90deg, #FFF 0%, #EEF4FC 100%); }
.ab-close__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.ab-close__media { margin: 0; position: relative; min-height: 460px; }
.ab-close__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%;
  -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 70%, transparent 100%);
}
.ab-close__copy {
  padding: 4.5rem max(40px, calc((100vw - 1240px) / 2)) 4.5rem 2.5rem; align-self: center;
}
.ab-close__copy .ab-text { max-width: 32rem; }
.ab-inline-paw { display: inline-block; width: 1.1rem; height: 1.1rem; color: var(--color-adventure-pink); vertical-align: -0.1em; }
.ab-close__ctas { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; }

/* --------------------------------------------------------------------------
   FOOTER: "Come and say hello" social contact route (all pages)
   -------------------------------------------------------------------------- */
.site-footer__social { text-align: center; margin: 0.5rem auto 1.25rem; }
.site-footer__social-title {
  font-family: var(--font-personality); font-weight: 700; font-size: 1.5rem; line-height: 1.1;
  color: #FFF; margin: 0 0 0.25rem;
}
.site-footer__social-text { font-size: 0.875rem; line-height: 1.5; color: #C9D7EC; margin: 0 0 0.75rem; }
.site-footer__social-list { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 0.75rem; }
.site-footer__social-link {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  color: #FFF; border: 1.5px solid rgba(255, 255, 255, 0.35);
  transition: background-color var(--transition-base), border-color var(--transition-base);
}
.site-footer__social-link svg { width: 20px; height: 20px; }
.site-footer__social-link:hover, .site-footer__social-link:focus-visible { background: rgba(255, 255, 255, 0.12); border-color: #FFF; }

/* --------------------------------------------------------------------------
   FOOTER: company and VAT details (legal, deliberately subtle)
   -------------------------------------------------------------------------- */
.site-footer__company {
  max-width: var(--max-width); margin-inline: auto; padding: 0.75rem 6% 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center; font-size: 0.75rem; line-height: 1.6;
  color: var(--color-footer-text-secondary); opacity: 0.85;
}
.site-footer__company p { margin: 0; }
.site-footer__nowrap { white-space: nowrap; }

/* --------------------------------------------------------------------------
   NEWSLETTER TEMPORARILY REMOVED (Home): Follow the Chaos is now the last
   section, so give it room to clear the footer wave (which overlaps by 48px).
   Remove this rule when the newsletter section is restored beneath it.
   -------------------------------------------------------------------------- */
#follow-the-chaos { padding-bottom: calc(48px + 3.5rem); }
/* Same reason: these sections are now the last before the footer wave on Books, About and Blog */
.bk-peek { padding-bottom: calc(48px + 3.5rem); }
.ab-close { padding-bottom: 48px; }
section[aria-labelledby="popular-heading"] { padding-bottom: calc(48px + 3.5rem); }