/* ============================================================
   America Book Publisher — style.css
   Premium navy / red / cream book brand
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  --navy: #0d1b3e;
  --navy-dark: #081229;
  --red: #b01e2e;
  --red-soft: #c8384a;
  --cream: #f7f4ee;
  --cream-2: #efeae0;
  --text-dark: #1a1a2e;
  --text-muted: #5a5f72;
  --white: #ffffff;
  --line: rgba(13, 27, 62, 0.10);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 0.4s;
  --t: 0.6s;
  --t-slow: 0.85s;

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --container: 1200px;
  --radius: 16px;
  --shadow-sm: 0 6px 20px rgba(13, 27, 62, 0.08);
  --shadow-md: 0 18px 50px rgba(13, 27, 62, 0.14);
  --shadow-lg: 0 30px 80px rgba(13, 27, 62, 0.22);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
  -webkit-text-size-adjust: 100%;
  /* Global type scale — slightly smaller across the whole page */
  font-size: 15px;
}

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--text-dark);
  background: var(--cream);
  line-height: 1.58;
  font-size: 15px;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

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

/* Lock scroll while loader is active */
body.is-loading { overflow: hidden; height: 100vh; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: 72px 0; }
.section--tight { padding: 42px 0; }

/* ---------- Typography helpers ---------- */
.h2 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.65rem, 1.1rem + 2vw, 2.6rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  color: var(--navy);
}
.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}
.lead {
  font-size: 0.96rem;
  color: var(--text-muted);
  margin: 0 0 24px;
  max-width: 60ch;
}
.accent { color: var(--red); }

.section-head {
  max-width: 720px;
  margin: 0 auto 40px;
  text-align: center;
}
.section-head .lead { margin-left: auto; margin-right: auto; }
.section-head--left { text-align: left; margin-left: 0; }
.section-head--left .lead { margin-left: 0; }

/* ---------- Service page structure ---------- */
.service-page { background: var(--cream); }
.service-hero {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: #fff;
  /* Fill the viewport minus the header so the whole hero is visible on load. */
  min-height: calc(100vh - 124px);
  min-height: calc(100svh - 124px);
  display: flex;
  align-items: center;
  padding: 32px 0;
}
.service-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Image-free: deep navy with soft red glows top-right and bottom-left */
  background:
    radial-gradient(circle at 82% 6%, rgba(200,56,74,0.30), transparent 42%),
    radial-gradient(circle at 12% 104%, rgba(200,56,74,0.16), transparent 46%),
    linear-gradient(160deg, #0d1b3e 0%, #081229 100%);
}
.service-hero > .container { position: relative; z-index: 1; width: 100%; }
.service-hero__content { max-width: 760px; }
/* Centered spotlight variant (service pages without an image) */
.service-hero__content--center { max-width: 780px; margin: 0 auto; text-align: center; }
.service-hero__content--center .lead { margin-left: auto; margin-right: auto; }
.service-hero__content--center .service-hero__cta,
.service-hero__content--center .service-hero__chips { justify-content: center; }

/* Split variant (text + image) used on the 4 main pages */
.service-hero__split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 46px;
  align-items: center;
  width: 100%;
}
.service-hero__split .service-hero__content { max-width: none; margin: 0; text-align: left; }
.service-hero__split .service-hero__cta,
.service-hero__split .service-hero__chips { justify-content: flex-start; }
.service-hero__art { justify-self: end; width: min(430px, 100%); }
.service-hero__art img {
  width: 100%;
  height: auto;
  max-height: 52vh;
  object-fit: contain;
  border-radius: 18px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.45);
  display: block;
}
@media (max-width: 860px) {
  .service-hero__split { grid-template-columns: 1fr; text-align: center; gap: 24px; }
  .service-hero__split .service-hero__content { text-align: center; }
  .service-hero__split .service-hero__cta,
  .service-hero__split .service-hero__chips { justify-content: center; }
  .service-hero__art { display: none; }
}
.service-hero .eyebrow {
  display: inline-block;
  color: var(--red-soft);
  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.06);
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.service-hero__chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.service-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.07);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #fff;
}
.service-hero__chip svg { color: var(--red-soft); flex-shrink: 0; }

/* Eye-catching process timeline (used on the Publishing page) */
.process { background: var(--cream); }
.process__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
}
.process__step {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 30px 26px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.process__step::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--red), var(--red-soft));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-slow) var(--ease);
}
.process__step:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.process__step:hover::after { transform: scaleX(1); }
.process__num {
  display: inline-grid;
  place-items: center;
  width: 50px; height: 50px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--red), var(--red-soft));
  color: #fff;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 18px;
  box-shadow: 0 12px 26px rgba(176,30,46,0.3);
  transition: transform var(--t) var(--ease);
}
.process__step:hover .process__num { transform: rotate(-8deg) scale(1.1); }
.process__step h3 { font-family: var(--serif); color: var(--navy); font-size: 1.2rem; margin: 0 0 8px; }
.process__step p { margin: 0; color: var(--text-muted); font-size: 0.95rem; }
.service-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 54px;
  align-items: center;
}
.service-hero .eyebrow { color: var(--red-soft); }
.service-hero .h2 { color: #fff; font-size: clamp(1.7rem, 1.15rem + 1.9vw, 2.6rem); line-height: 1.12; margin-bottom: 12px; }
.service-hero .lead { color: rgba(255,255,255,0.78); max-width: 58ch; font-size: 0.98rem; margin-bottom: 16px; }
/* Compact CTA + tighter rhythm so the whole hero fits the viewport */
.service-hero .btn--lg { padding: 13px 26px; font-size: 0.95rem; }
.service-hero .eyebrow { margin-bottom: 14px; }
.service-hero__panel {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  padding: 26px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.26);
}
.service-hero__panel h3 {
  font-family: var(--serif);
  font-size: 1.35rem;
  margin: 0 0 14px;
}
.service-hero__panel ul { display: grid; gap: 10px; }
.service-hero__panel li {
  position: relative;
  padding-left: 22px;
  color: rgba(255,255,255,0.82);
}
.service-hero__panel li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red-soft);
}
.service-structure { background: var(--white); }
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.service-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px;
  box-shadow: var(--shadow-sm);
}
.service-card {
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.service-card__ic {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #fff;
  color: var(--red);
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
  transition: background var(--t) var(--ease), color var(--t) var(--ease), transform var(--t) var(--ease);
}
.service-card:hover .service-card__ic {
  background: var(--red);
  color: #fff;
  transform: rotate(-6deg) scale(1.05);
}
.service-card h3 {
  font-family: var(--serif);
  color: var(--navy);
  font-size: 1.22rem;
  margin: 0 0 10px;
}
.service-card p { margin: 0; color: var(--text-muted); font-size: 0.95rem; }

/* Service hero + CTA button rows */
.service-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
.service-cta__btns { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 26px; }
.service-band {
  background: var(--navy);
  color: #fff;
}
.service-band .h2 { color: #fff; }
.service-band .lead { color: rgba(255,255,255,0.74); }
.service-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  counter-reset: service-step;
}
.service-step {
  counter-increment: service-step;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 22px;
}
.service-step::before {
  content: counter(service-step, decimal-leading-zero);
  display: inline-flex;
  margin-bottom: 18px;
  font-weight: 800;
  color: var(--red-soft);
}
.service-step h3 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: 1.18rem;
}
.service-step p { margin: 0; color: rgba(255,255,255,0.72); }
.service-cta {
  background: var(--cream);
  text-align: center;
}
.service-cta .lead { margin-left: auto; margin-right: auto; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 13px 26px;
  border-radius: 10px;
  transition: transform var(--t) var(--ease),
              box-shadow var(--t) var(--ease),
              background var(--t) var(--ease),
              color var(--t) var(--ease),
              border-color var(--t) var(--ease);
  will-change: transform;
  text-align: center;
}
.btn--pill { border-radius: 999px; }
.btn--sm { padding: 9px 18px; font-size: 0.85rem; }
.btn--lg { padding: 16px 34px; font-size: 1rem; }

.btn--red {
  background: var(--red);
  color: #fff;
  box-shadow: 0 10px 26px rgba(176, 30, 46, 0.30);
}
.btn--red:hover {
  background: var(--red-soft);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(176, 30, 46, 0.42);
}
.btn--outline {
  border: 1.5px solid var(--navy);
  color: var(--navy);
}
.btn--outline:hover {
  background: var(--navy);
  color: #fff;
  transform: translateY(-3px);
}
.btn--ghost {
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(4px);
}
.btn--ghost:hover {
  background: #fff;
  color: var(--navy);
  transform: translateY(-3px);
}

/* Image fallback placeholder (added by JS onerror) */
.img-fallback {
  position: relative;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  min-height: 120px;
}
.img-fallback img { display: none; }
.img-fallback::after {
  content: "Image";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.5);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
}

/* ============================================================
   0. Loader
   ============================================================ */
.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  transition: opacity var(--t-slow) var(--ease), visibility var(--t-slow) var(--ease);
}
.loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader__inner { text-align: center; width: 280px; max-width: 80vw; }
.loader__logo img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  margin: 0 auto 22px;
  border-radius: 14px;
  background: #fff;
  padding: 8px;
  animation: loaderPulse 2.2s var(--ease) infinite;
}
@keyframes loaderPulse {
  0%, 100% { transform: scale(1); opacity: 0.92; }
  50% { transform: scale(1.06); opacity: 1; }
}
/* Opening book animation */
.loader__book {
  position: relative;
  width: 60px;
  height: 44px;
  margin: 0 auto 24px;
  perspective: 600px;
}
.loader__page {
  position: absolute;
  top: 0; left: 50%;
  width: 28px; height: 40px;
  background: var(--cream);
  border-radius: 2px 6px 6px 2px;
  transform-origin: left center;
  animation: pageFlip 1.8s var(--ease) infinite;
}
.loader__page:nth-child(2) { animation-delay: 0.3s; opacity: 0.8; }
.loader__page:nth-child(3) { animation-delay: 0.6s; opacity: 0.6; }
@keyframes pageFlip {
  0% { transform: rotateY(0deg); }
  50% { transform: rotateY(-150deg); }
  100% { transform: rotateY(-150deg); }
}
.loader__bar {
  width: 180px; height: 3px;
  margin: 0 auto 16px;
  background: rgba(255,255,255,0.16);
  border-radius: 999px;
  overflow: hidden;
}
.loader__bar span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--red), var(--red-soft));
  border-radius: 999px;
  transition: width 0.3s linear;
}
.loader__text {
  font-family: var(--serif);
  color: var(--cream);
  letter-spacing: 0.18em;
  font-size: 0.82rem;
  text-transform: uppercase;
  margin: 0;
}

/* ============================================================
   1. Top bar
   ============================================================ */
.topbar {
  background: var(--navy-dark);
  color: rgba(255,255,255,0.85);
  font-size: 0.82rem;
  position: relative;
  z-index: 60;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 40px;
}
.topbar__marquee {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
}
.topbar__track {
  display: flex;
  align-items: center;
  width: 300%;
  gap: 0;
  animation: topbarSlide 24s linear infinite;
  will-change: transform;
}
/* Single message that gently appears, holds, then leaves — slow loop */
.topbar__item {
  flex: 0 0 calc(100% / 3);
  text-align: center;
  color: var(--cream);
  font-weight: 500;
}
.topbar__item::before {
  content: "★";
  color: var(--red-soft);
  margin-right: 12px;
}
@keyframes topComeGo {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% / 3)); }
}
@keyframes topbarSlide {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% / 3)); }
}
.topbar__contact {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-shrink: 0;
}
.topbar__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255,255,255,0.8);
  transition: color var(--t-fast) var(--ease);
}
.topbar__link svg { color: var(--red-soft); }
.topbar__link:hover { color: #fff; }

/* ============================================================
   2. Nav
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 244, 238, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--t) var(--ease),
              background var(--t) var(--ease),
              padding var(--t) var(--ease);
}
.nav__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 84px;
  transition: min-height var(--t) var(--ease);
}
.nav.is-stuck {
  background: rgba(247, 244, 238, 0.98);
  box-shadow: var(--shadow-sm);
  border-bottom-color: var(--line);
}
.nav.is-stuck .nav__inner { min-height: 66px; }

.nav__logo { display: flex; align-items: center; margin-right: auto; }
.nav__logo img {
  height: 76px;
  width: auto;
  object-fit: contain;
  transition: height var(--t) var(--ease);
}
.nav.is-stuck .nav__logo img { height: 60px; }
.nav__logo-fallback {
  display: none;
  font-family: var(--serif);
  font-weight: 700;
  color: var(--navy);
  font-size: 1.2rem;
}
.nav__logo--fallback img { display: none; }
.nav__logo--fallback .nav__logo-fallback { display: block; }

.nav__list { display: flex; align-items: center; gap: 4px; }
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 16px;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--navy);
  transition: color var(--t-fast) var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px; bottom: 6px;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t) var(--ease);
}
.nav__link:hover { color: var(--red); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__caret { transition: transform var(--t-fast) var(--ease); }

.nav__cta { margin-left: 8px; }

/* Mega menu */
.nav__item-has-mega { position: static; }
.mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: var(--container);
  padding: 0 24px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity var(--t) var(--ease),
              transform var(--t) var(--ease),
              visibility var(--t) var(--ease);
  pointer-events: none;
}
.mega.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.nav__item-has-mega:hover .nav__caret,
.mega.is-open .nav__caret { transform: rotate(180deg); }

.mega__inner {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 26px;
  margin-top: 14px;
  background: #fff;
  border-radius: 18px;
  padding: 30px 32px 32px;
  box-shadow: 0 44px 90px rgba(8, 18, 41, 0.26), 0 8px 22px rgba(8, 18, 41, 0.08);
  border: 1px solid rgba(13, 27, 62, 0.06);
}
/* Slim brand accent bar along the top edge */
.mega__inner::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--red), #e7b15a 55%, var(--navy));
}
.mega__col {
  position: relative;
  z-index: 1;
  padding: 6px 0;
}
/* Subtle dividers between the three groups */
.mega__col + .mega__col {
  border-left: 1px solid var(--line);
  padding-left: 26px;
}
.mega__eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 14px;
  padding: 0 12px;
}
.mega__eyebrow::before {
  content: "";
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--red);
}
.mega__list li {
  opacity: 0;
  transform: translateY(8px);
}
.nav__item-has-mega:hover .mega__list li,
.mega.is-open .mega__list li {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
  transition-delay: calc(var(--i) * 45ms + 80ms);
}
.mega__list a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: 10px;
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1.3;
  color: var(--text-dark);
  transition: color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              padding var(--t-fast) var(--ease);
}
/* Small refined marker dot */
.mega__dot {
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cream-2);
  box-shadow: inset 0 0 0 1px rgba(13, 27, 62, 0.12);
  transition: background var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
/* Arrow that slides in on hover */
.mega__list a::after {
  content: "→";
  margin-left: auto;
  color: var(--red);
  font-weight: 600;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.mega__list a:hover {
  background: var(--cream);
  color: var(--red);
  padding-left: 16px;
}
.mega__list a:hover .mega__dot {
  background: var(--red);
  transform: scale(1.5);
  box-shadow: 0 0 0 4px rgba(176, 30, 46, 0.12);
}
.mega__list a:hover::after { opacity: 1; transform: translateX(0); }
.mega__list a:focus-visible {
  background: var(--cream);
  color: var(--red);
}

/* Burger */
.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 10px;
  min-width: 44px;
  min-height: 44px; /* comfortable iOS tap target */
}
.nav__burger span {
  display: block; width: 26px; height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform var(--t) var(--ease), opacity var(--t) var(--ease);
}

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 80;
  visibility: hidden;
  pointer-events: none;
}
.drawer.is-open { visibility: visible; pointer-events: auto; }
.drawer__backdrop {
  position: absolute; inset: 0;
  /* The backdrop sits AFTER the panel in the DOM, so without an explicit
     stack it painted on top of the menu and swallowed every tap (each one
     landing on the backdrop's close handler). Keep it behind the panel. */
  z-index: 1;
  background: rgba(8, 18, 41, 0.5);
  opacity: 0;
  transition: opacity var(--t) var(--ease);
}
.drawer.is-open .drawer__backdrop { opacity: 1; }
.drawer__panel {
  position: absolute;
  z-index: 2;            /* must stay above .drawer__backdrop */
  top: 0; right: 0;
  width: min(360px, 86vw);
  height: 100%;
  background: var(--cream);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform var(--t-slow) var(--ease);
  padding: 80px 28px 28px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;  /* momentum scrolling on older iOS */
  overscroll-behavior: contain;       /* don't chain the scroll to the page behind */
}
.drawer.is-open .drawer__panel { transform: translateX(0); }
.drawer__close {
  position: absolute; top: 14px; right: 14px;
  z-index: 3;                 /* above the nav rows inside the panel */
  display: grid; place-items: center;
  width: 46px; height: 46px;  /* comfortable tap target, was 32px */
  border-radius: 50%;
  font-size: 1.9rem; line-height: 1;
  color: var(--navy);
  background: rgba(13, 27, 62, 0.05);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.drawer__close:hover, .drawer__close:active { background: var(--red); color: #fff; transform: rotate(90deg); }
.drawer__nav { display: flex; flex-direction: column; gap: 4px; }
.drawer__link, .drawer__summary {
  display: block;
  padding: 14px 4px;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--navy);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
/* Accordion is a plain button + class toggle (native <details> is unreliable on iOS) */
.drawer__summary {
  width: 100%;
  text-align: left;
  background: none;
  border-left: 0; border-right: 0; border-top: 0;
  font-family: inherit;
}
.drawer__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.drawer__details.is-open .drawer__summary { color: var(--red); border-bottom-color: transparent; }

/* Animated +/- puck: the vertical bar folds away and the puck spins. */
.drawer__toggle {
  position: relative;
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(176, 30, 46, 0.10);
  transition: background var(--t) var(--ease), transform var(--t-slow) var(--ease);
}
.drawer__toggle::before,
.drawer__toggle::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 10px; height: 2px;
  border-radius: 2px;
  background: var(--red);
  transform: translate(-50%, -50%);
  transition: transform var(--t) var(--ease), opacity var(--t) var(--ease), background var(--t) var(--ease);
}
.drawer__toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.drawer__details.is-open .drawer__toggle { background: var(--red); transform: rotate(180deg); }
.drawer__details.is-open .drawer__toggle::before,
.drawer__details.is-open .drawer__toggle::after { background: #fff; }
.drawer__details.is-open .drawer__toggle::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }

/* Expanding panel. display:none can't animate, so the section is a 1-row grid
   collapsed from 1fr to 0fr, which the browser can transition smoothly.
   visibility is delayed off so collapsed links stay out of the tab order. */
.drawer__sub {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows var(--t-slow) var(--ease), visibility 0s linear var(--t-slow);
}
.drawer__details.is-open .drawer__sub {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows var(--t-slow) var(--ease), visibility 0s;
}
.drawer__sub-in {
  position: relative;
  min-height: 0;          /* lets the grid row actually collapse */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 2px 0 12px 16px;
}
/* Accent rail that draws itself down the group as it opens. */
.drawer__sub-in::before {
  content: "";
  position: absolute;
  left: 3px; top: 8px; bottom: 14px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--red), rgba(176, 30, 46, 0));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.9s var(--ease) 0.08s;
}
.drawer__details.is-open .drawer__sub-in::before { transform: scaleY(1); }

/* Group headings mirror the desktop mega menu's eyebrows. */
.drawer__group {
  margin: 16px 0 4px;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
}
.drawer__group:first-child { margin-top: 6px; }

.drawer__sub-in a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 8px;
  margin-left: -4px;
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 0.94rem;
  line-height: 1.35;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
              padding-left var(--t-fast) var(--ease);
}
.drawer__dot {
  flex-shrink: 0;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(13, 27, 62, 0.22);
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.drawer__sub-in a:hover,
.drawer__sub-in a:active {
  color: var(--red);
  background: var(--cream-2);
  padding-left: 14px;
}
.drawer__sub-in a:hover .drawer__dot,
.drawer__sub-in a:active .drawer__dot { background: var(--red); transform: scale(1.6); }

/* Staggered reveal: each row slides in just behind the one above it. */
.drawer__group,
.drawer__sub-in a {
  opacity: 0;
  transform: translateX(16px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease),
              color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
              padding-left var(--t-fast) var(--ease);
}
.drawer__details.is-open .drawer__group,
.drawer__details.is-open .drawer__sub-in a {
  opacity: 1;
  transform: none;
  /* Cap the stagger: without min() the 20th row waited half a second before it
     even started, which felt sluggish and left it briefly untappable. */
  transition-delay: calc(0.09s + min(var(--i, 0), 11) * 0.026s);
}

/* Drawer contents fan in when the panel slides open. */
.drawer.is-open .drawer__nav > * { animation: drawerRowIn 0.55s var(--ease) both; }
.drawer.is-open .drawer__nav > *:nth-child(1) { animation-delay: 0.14s; }
.drawer.is-open .drawer__nav > *:nth-child(2) { animation-delay: 0.20s; }
.drawer.is-open .drawer__nav > *:nth-child(3) { animation-delay: 0.26s; }
.drawer.is-open .drawer__nav > *:nth-child(4) { animation-delay: 0.32s; }
.drawer.is-open .drawer__nav > *:nth-child(5) { animation-delay: 0.38s; }
.drawer.is-open .drawer__nav > *:nth-child(6) { animation-delay: 0.44s; }
.drawer.is-open .drawer__nav > *:nth-child(7) { animation-delay: 0.50s; }
@keyframes drawerRowIn {
  from { opacity: 0; transform: translateX(26px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .drawer__sub { transition: none; }
  .drawer__group, .drawer__sub-in a { opacity: 1; transform: none; transition: none; }
  .drawer__sub-in::before { transform: scaleY(1); transition: none; }
  .drawer.is-open .drawer__nav > * { animation: none; }
}
.drawer__cta { margin-top: 18px; }

/* ============================================================
   3. Hero
   ============================================================ */
.hero {
  position: relative;
  /* Keep the hero visible on load while leaving a small hint of the next section.
     svh accounts for mobile browser chrome; vh is the fallback for old browsers. */
  min-height: calc(100vh - 124px);
  min-height: calc(100svh - 124px);
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  color: #fff;
  padding: 16px 0 20px;
}
.hero__media { position: absolute; inset: 0; z-index: -1; background: var(--navy); }
.hero__video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 18%; /* nudge the video frame up so it reads clearly */
}
.hero__overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(8,18,41,0.92) 0%, rgba(8,18,41,0.72) 42%, rgba(8,18,41,0.35) 100%),
    linear-gradient(0deg, rgba(8,18,41,0.55), rgba(8,18,41,0.15));
}
.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(280px, 0.72fr);
  gap: 42px;
  /* Align text column to the top so the tall book-cover collage doesn't
     center (and push) the content — keeps the CTA buttons above the fold. */
  align-items: start;
}
.hero__content { max-width: 590px; }
.hero__eyebrow {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red-soft);
  margin-bottom: 8px;
  padding: 6px 13px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
}
.hero__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.12rem + 2.35vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
}
.hero__lead {
  font-size: 0.94rem;
  color: rgba(255,255,255,0.82);
  margin: 0 0 12px;
  max-width: 54ch;
}
.hero__offer { margin-bottom: 12px; }
.hero__offer-label {
  display: block;
  font-weight: 700;
  margin-bottom: 12px;
  color: #fff;
}
.hero__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 20px;
  max-width: 440px;
}
.hero__offer-label { margin-bottom: 8px; }
.hero__list li {
  position: relative;
  padding-left: 28px;
  color: rgba(255,255,255,0.9);
  font-weight: 500;
  font-size: 0.91rem;
}
.hero__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 16px; height: 16px;
  background: var(--red);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(176,30,46,0.25);
}
.hero__list li::after {
  content: "";
  position: absolute;
  left: 5px; top: 10px;
  width: 4px; height: 7px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; margin-bottom: 12px; }
.hero__trust { display: flex; align-items: center; gap: 14px; }
.hero__trust img { height: 32px; width: auto; }
.hero__trust-text { font-size: 0.85rem; color: rgba(255,255,255,0.7); }
.hero__art {
  justify-self: end;
  width: min(430px, 100%);
  /* Nudge the collage down, and slightly left off the right edge. */
  margin-top: 56px;
  transform: translate(-116px, 128px);
  filter: drop-shadow(0 30px 55px rgba(0,0,0,0.38));
}
.hero__art img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.hero__scroll {
  position: absolute;
  left: 50%; bottom: 10px;
  transform: translateX(-50%);
  z-index: 2;
}
.hero__scroll-mouse {
  display: block;
  width: 24px; height: 38px;
  border: 2px solid rgba(255,255,255,0.5);
  border-radius: 14px;
  position: relative;
}
.hero__scroll-mouse::after {
  content: "";
  position: absolute;
  left: 50%; top: 7px;
  width: 4px; height: 8px;
  background: #fff;
  border-radius: 2px;
  transform: translateX(-50%);
  animation: scrollDot 1.8s var(--ease) infinite;
}
@keyframes scrollDot {
  0% { opacity: 0; transform: translate(-50%, 0); }
  40% { opacity: 1; }
  80%, 100% { opacity: 0; transform: translate(-50%, 12px); }
}

/* Hero load animation */
.reveal-on-load {
  opacity: 0;
  transform: translateY(28px);
}
body.is-ready .reveal-on-load {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
  transition-delay: calc(var(--d) * 0.12s + 0.2s);
}

/* ============================================================
   4 & 9. Marquees
   ============================================================ */
.awards { background: var(--white); padding: 30px 0; border-bottom: 1px solid var(--line); }
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: 52px;
  width: max-content;
  will-change: transform;
  animation: marqueeScroll var(--marquee-duration, 38s) linear infinite;
}
.marquee[data-marquee-reverse] .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(var(--marquee-shift, -50%)); }
}
.marquee__item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 170px;
  height: 82px;
}
.marquee__item img {
  max-height: 68px;
  width: auto;
  object-fit: contain;
  /* Shown in full color (no greyscale) per request */
  opacity: 1;
  transition: transform var(--t) var(--ease);
}
.marquee__item:hover img { transform: scale(1.08); }
.marquee__item--plat { height: 50px; min-width: 118px; }
.marquee__item--plat img { max-height: 38px; }

.platforms { background: var(--cream-2); }
.platforms__title {
  text-align: center;
  font-family: var(--serif);
  color: var(--navy);
  font-size: 1.15rem;
  margin-bottom: 36px;
}

/* ============================================================
   5. Masterpiece + reusable ROW SLIDER (graphs / covers / reviews)
   ============================================================ */
.masterpiece { background: var(--white); }
.masterpiece .section-head { margin-bottom: 32px; }

/* Auto-sliding row carousel: shows multiple items, advances one at a time */
.rowslider { position: relative; }
.rowslider__viewport { overflow: hidden; padding: 6px 0; }
.rowslider__track {
  display: flex;
  gap: 20px;
  will-change: transform;
}
.rowslider__slide {
  flex: 0 0 calc((100% - 40px) / 3); /* 3 visible on desktop */
}

/* Graphs: full image, uncropped, on a clean card */
.rowslider__slide--graph {
  background: #fff;
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rowslider__slide--graph img {
  width: 100%;
  height: 200px;
  object-fit: contain;
}

/* Reviews: 3 cards visible on desktop */
.rowslider--reviews .rowslider__slide { flex-basis: calc((100% - 40px) / 3); }

@media (max-width: 1024px) {
  .rowslider__slide,
  .rowslider--reviews .rowslider__slide { flex-basis: calc((100% - 20px) / 2); }
}
@media (max-width: 600px) {
  .rowslider__slide,
  .rowslider--reviews .rowslider__slide { flex-basis: 100%; }
  .rowslider__slide--graph img { height: 180px; }
}

/* ============================================================
   6. Why choose us
   ============================================================ */
.why { background: var(--cream); }
.why__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 70px;
  align-items: center;
}
.why__features { display: grid; gap: 22px; margin: 30px 0; }
.why__feature { display: flex; gap: 16px; align-items: flex-start; }
.why__icon {
  flex-shrink: 0;
  width: 50px; height: 50px;
  border-radius: 14px;
  background: var(--white);
  color: var(--red);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t) var(--ease), background var(--t) var(--ease), color var(--t) var(--ease);
}
.why__feature:hover .why__icon {
  transform: translateY(-4px) rotate(-4deg);
  background: var(--red);
  color: #fff;
}
.why__feature h3 {
  font-family: var(--serif);
  font-size: 1.18rem;
  margin: 0 0 4px;
  color: var(--navy);
}
.why__feature p { margin: 0; color: var(--text-muted); font-size: 0.96rem; }
.why__cta { display: flex; gap: 14px; flex-wrap: wrap; }

.why__media { position: relative; }
.why__img {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.why__img img { width: 100%; height: 390px; object-fit: cover; }
.why__badge {
  position: absolute;
  left: -22px; bottom: 36px;
  background: var(--navy);
  color: #fff;
  padding: 20px 24px;
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  max-width: 200px;
}
.why__badge strong {
  display: block;
  font-family: var(--serif);
  font-size: 2.2rem;
  color: var(--red-soft);
  line-height: 1;
}
.why__badge span { font-size: 0.85rem; color: rgba(255,255,255,0.78); }

/* Floating animation for images */
.float { animation: floaty 6s ease-in-out infinite; }
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

/* ============================================================
   7. Services grid
   ============================================================ */
.services { background: var(--white); }
.services__layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 46px;
  align-items: start;
}
.services__visual {
  position: sticky;
  top: 110px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.services__visual img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; }
.services__visual-tag {
  position: absolute;
  left: 24px; bottom: 24px;
  background: rgba(8,18,41,0.82);
  backdrop-filter: blur(6px);
  color: #fff;
  padding: 16px 22px;
  border-radius: 12px;
}
.services__visual-tag span { font-size: 0.82rem; color: rgba(255,255,255,0.7); display: block; }
.services__visual-tag strong { font-family: var(--serif); font-size: 1.4rem; }

.services__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.svc-card {
  position: relative;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px 24px;
  overflow: hidden;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.svc-card__icon {
  width: 50px; height: 50px;
  border-radius: 12px;
  background: var(--white);
  color: var(--navy);
  display: grid; place-items: center;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
  transition: background var(--t) var(--ease), color var(--t) var(--ease), transform var(--t) var(--ease);
}
.svc-card h3 {
  font-family: var(--serif);
  font-size: 1.18rem;
  color: var(--navy);
  margin: 0 0 8px;
  transition: color var(--t) var(--ease);
}
.svc-card p { margin: 0; color: var(--text-muted); font-size: 0.93rem; }
.svc-card__sweep {
  position: absolute;
  left: 0; bottom: 0;
  height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--red), var(--red-soft));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-slow) var(--ease);
}
.svc-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.svc-card:hover .svc-card__icon { background: var(--red); color: #fff; transform: rotate(-6deg) scale(1.05); }
.svc-card:hover h3 { color: var(--red); }
.svc-card:hover .svc-card__sweep { transform: scaleX(1); }

/* ============================================================
   8. Audiobook
   ============================================================ */
.audiobook { background: var(--cream); }
.audiobook__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.audiobook__img {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.audiobook__img img {
  width: 100%;
  height: 360px;
  object-fit: contain;
  background: #fff;
}
.audiobook__list { display: grid; gap: 14px; margin: 0 0 28px; }
.audiobook__list li {
  position: relative;
  padding-left: 34px;
  color: var(--text-dark);
}
.audiobook__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 2px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--red);
}
.audiobook__list li::after {
  content: "";
  position: absolute;
  left: 7px; top: 7px;
  width: 6px; height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ============================================================
   10. Interactive services explorer
   ============================================================ */
.explorer { background: var(--white); }
.explorer__layout {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 30px;
  background: var(--cream);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.explorer__list { display: flex; flex-direction: column; gap: 4px; }
.explorer__tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  padding: 15px 20px;
  border-radius: 12px;
  font-weight: 600;
  color: var(--navy);
  transition: background var(--t) var(--ease), color var(--t) var(--ease), padding-left var(--t) var(--ease);
}
.explorer__tab::after {
  content: "→";
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.explorer__tab:hover { background: rgba(176,30,46,0.07); padding-left: 26px; }
.explorer__tab.is-active {
  background: var(--red);
  color: #fff;
  box-shadow: 0 10px 26px rgba(176,30,46,0.3);
}
.explorer__tab.is-active::after { opacity: 1; transform: translateX(0); }

.explorer__detail {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 26px;
  align-items: center;
  background: #fff;
  border-radius: 14px;
  padding: 26px;
}
.explorer__detail.is-fading { opacity: 0; transform: translateY(10px); }
.explorer__detail { transition: opacity var(--t) var(--ease), transform var(--t) var(--ease); }
.explorer__img {
  position: relative;
  border-radius: 12px;
  min-height: 260px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(150deg, var(--navy), var(--navy-dark));
  transition: background var(--t-slow) var(--ease);
}
.explorer__img-label {
  font-family: var(--serif);
  color: rgba(255,255,255,0.92);
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  text-align: center;
  padding: 0 16px;
}
.explorer__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 20%, rgba(176,30,46,0.45), transparent 60%);
}
/* Real photo: fills the box at its natural aspect (no blue letterbox, no crop) */
.explorer__img--photo { min-height: 0; background: transparent !important; }
.explorer__img--photo::after { display: none; }
.explorer__photo {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}
.explorer__title {
  font-family: var(--serif);
  color: var(--navy);
  font-size: 1.6rem;
  margin: 0 0 12px;
}
.explorer__text { color: var(--text-muted); margin: 0 0 22px; }
.explorer__cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* ============================================================
   11. Key features
   ============================================================ */
.keyfeat { background: var(--cream); }
.keyfeat__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.keyfeat__card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 34px 22px;
  text-align: center;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.keyfeat__icon {
  display: inline-grid;
  place-items: center;
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--red);
  margin-bottom: 18px;
  transition: transform var(--t) var(--ease), background var(--t) var(--ease), color var(--t) var(--ease);
}
.keyfeat__card p { margin: 0; font-weight: 600; color: var(--navy); font-size: 0.96rem; }
.keyfeat__card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); }
.keyfeat__card:hover .keyfeat__icon { transform: scale(1.1); background: var(--red); color: #fff; }

/* ============================================================
   12. Portfolio
   ============================================================ */
.portfolio { background: var(--navy); color: #fff; }
.portfolio .h2 { color: #fff; }
.portfolio .lead { color: rgba(255,255,255,0.74); }
.portfolio .eyebrow { color: var(--red-soft); }

.coverflow {
  position: relative;
  height: 470px;
  margin-top: 12px;
  overflow: hidden;
}
.coverflow__stage {
  position: relative;
  height: 100%;
  perspective: 1300px;
  transform-style: preserve-3d;
}
.coverflow__item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 270px;
  height: 380px;
  margin: 0;
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  box-shadow: 0 28px 60px rgba(0,0,0,0.42);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.78);
  transition: transform 850ms var(--ease), opacity 850ms var(--ease), filter 850ms var(--ease);
  will-change: transform, opacity;
}
.coverflow__item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: rgba(8,18,41,0.32);
}
.coverflow__item.is-active {
  box-shadow: 0 34px 80px rgba(0,0,0,0.52);
}

/* ============================================================
   13. Testimonials
   ============================================================ */
.testi { background: var(--white); }
.testi__card {
  margin: 0;
  padding: 28px 24px;
  text-align: center;
  background: var(--cream);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.testi__stars { color: #e8b53d; font-size: 1rem; letter-spacing: 2px; margin-bottom: 12px; }
.testi__card blockquote {
  font-family: var(--serif);
  font-size: clamp(0.94rem, 0.88rem + 0.35vw, 1.08rem);
  line-height: 1.5;
  color: var(--navy);
  margin: 0 0 18px;
  font-style: italic;
  flex: 1;
}
.testi__author { display: inline-flex; align-items: center; gap: 14px; }
.testi__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.testi__meta { text-align: left; }
.testi__meta strong { display: block; color: var(--text-dark); }
.testi__meta small { color: var(--text-muted); }
.testi__dots { display: flex; justify-content: center; gap: 9px; margin-top: 26px; }
.testi__dots button {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--cream-2);
  border: 1px solid var(--line);
  transition: width var(--t) var(--ease), background var(--t) var(--ease);
}
.testi__dots button.is-active { width: 26px; border-radius: 999px; background: var(--red); }

/* ============================================================
   14. FAQ
   ============================================================ */
.faq { background: var(--cream); }
.faq__inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: start;
}
.faq__list { display: flex; flex-direction: column; gap: 14px; }
.faq__item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.faq__item.is-open { box-shadow: var(--shadow-sm); border-color: transparent; }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  text-align: left;
  padding: 22px 24px;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--navy);
}
.faq__chev { flex-shrink: 0; color: var(--red); transition: transform var(--t) var(--ease); }
.faq__item.is-open .faq__chev { transform: rotate(180deg); }
.faq__a {
  height: 0;
  overflow: hidden;
  transition: height var(--t-slow) var(--ease);
}
.faq__a-inner { padding: 0 24px 24px; }
.faq__a-inner p { margin: 0; color: var(--text-muted); }

/* ============================================================
   15. Contact
   ============================================================ */
.contact { background: var(--navy); color: #fff; }
.contact .h2 { color: #fff; }
.contact .lead { color: rgba(255,255,255,0.74); }
.contact .eyebrow { color: var(--red-soft); }
.contact__inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 60px;
  align-items: start;
}
.contact__details { margin-top: 30px; display: grid; gap: 16px; }
.contact__details li { display: flex; align-items: center; gap: 14px; }
.contact__ic {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: rgba(255,255,255,0.08);
  color: var(--red-soft);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.contact__details a { color: rgba(255,255,255,0.9); transition: color var(--t-fast) var(--ease); }
.contact__details a:hover { color: #fff; }

.contact__form {
  background: var(--white);
  border-radius: var(--radius);
  padding: 36px;
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: 18px;
}
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 0.85rem; font-weight: 600; color: var(--navy); }
.field input, .field textarea {
  font-family: inherit;
  font-size: 0.96rem;
  padding: 13px 16px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--cream);
  color: var(--text-dark);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  resize: vertical;
}
.field input::placeholder, .field textarea::placeholder { color: #9a9fb0; }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--red);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(176,30,46,0.1);
}
.field.has-error input, .field.has-error textarea { border-color: var(--red); }
.field__error { color: var(--red); font-size: 0.8rem; min-height: 0; }
.field.has-error .field__error { min-height: 1em; }
.contact__submit { width: 100%; margin-top: 6px; }
.contact__success {
  margin: 0;
  padding: 14px 18px;
  background: rgba(40,160,90,0.12);
  border: 1px solid rgba(40,160,90,0.4);
  color: #1c7a47;
  border-radius: 10px;
  font-weight: 600;
  text-align: center;
}

/* ============================================================
   16. Recognition
   ============================================================ */
.recognition { background: var(--white); }
.recognition__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.rec-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 34px 28px;
  text-align: center;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.rec-card__badge {
  display: inline-block;
  color: var(--red);
  margin-bottom: 16px;
  transition: transform var(--t) var(--ease);
}
.rec-card h3 {
  font-family: var(--serif);
  font-size: 1.18rem;
  color: var(--navy);
  margin: 0 0 10px;
}
.rec-card p { margin: 0; color: var(--text-muted); font-size: 0.93rem; }
.rec-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); }
.rec-card:hover .rec-card__badge { transform: scale(1.08) rotate(-3deg); }

/* ============================================================
   17. Footer
   ============================================================ */
.footer { background: var(--navy-dark); color: rgba(255,255,255,0.75); padding-top: 70px; }
.footer__inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.2fr 1.2fr;
  gap: 40px;
  padding-bottom: 50px;
}
/* Transparent logo sits on a soft light chip so it stays visible on the navy footer */
.footer__logo img { height: 88px; width: auto; margin-bottom: 18px; background: #fff; padding: 10px 14px; border-radius: 12px; }
.footer__trust { display: inline-block; margin-bottom: 20px; }
.footer__trust img { height: 34px; width: auto; }
.footer__logo-fallback { font-family: var(--serif); color: #fff; font-size: 1.3rem; font-weight: 700; margin-bottom: 18px; }
.footer__blurb { font-size: 0.92rem; max-width: 36ch; margin: 0 0 20px; }
.footer__social { display: flex; gap: 12px; }
.footer__social a {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  display: grid; place-items: center;
  color: rgba(255,255,255,0.8);
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.footer__social a:hover { background: var(--red); color: #fff; transform: translateY(-3px); }
.footer__col h4 {
  font-family: var(--serif);
  color: #fff;
  font-size: 1.1rem;
  margin: 0 0 18px;
}
.footer__col ul { display: grid; gap: 11px; }
.footer__col a { font-size: 0.92rem; transition: color var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease); }
.footer__col a:hover { color: #fff; padding-left: 5px; }
.footer__cta { margin-top: 18px; }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 22px 0;
}
.footer__bottom p { margin: 0; font-size: 0.85rem; text-align: center; color: rgba(255,255,255,0.6); }

/* ============================================================
   Back to top
   ============================================================ */
.totop {
  position: fixed;
  right: 26px; bottom: 26px;
  z-index: 40;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 12px 30px rgba(176,30,46,0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility var(--t) var(--ease), background var(--t-fast) var(--ease);
}
.totop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.totop:hover { background: var(--red-soft); transform: translateY(-4px); }

/* ============================================================
   Scroll reveal
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
  transition-delay: calc(var(--d, 0) * 0.1s);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-on-load { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .section { padding: 72px 0; }
  .nav__menu, .nav__cta { display: none; }
  .nav__burger { display: flex; }
  .hero__inner { grid-template-columns: 1fr; gap: 24px; }
  .hero__art { display: none; }
  .service-hero__inner { grid-template-columns: 1fr; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .service-steps { grid-template-columns: repeat(2, 1fr); }
  .masterpiece__inner,
  .why__inner,
  .audiobook__inner,
  .contact__inner,
  .faq__inner { grid-template-columns: 1fr; gap: 44px; }
  .services__layout { grid-template-columns: 1fr; }
  .services__visual { position: relative; top: 0; }
  .services__visual img { min-height: 300px; max-height: 380px; }
  .explorer__layout { grid-template-columns: 1fr; }
  .explorer__list { flex-direction: row; flex-wrap: wrap; }
  .explorer__tab { flex: 1 1 auto; }
  .keyfeat__grid { grid-template-columns: repeat(3, 1fr); }
  .recognition__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .why__img img { height: 380px; }
}

@media (max-width: 768px) {
  html { scroll-padding-top: 90px; }
  .topbar__inner { justify-content: center; min-height: 34px; }
  .topbar__marquee { min-width: 0; }
  .topbar__item { font-size: 0.74rem; }
  .topbar__contact { display: none; }
  .topbar__contact .topbar__link:last-child span { display: none; }
  .hero { min-height: calc(100svh - 132px); text-align: left; padding: 24px 0 32px; }
  .hero__eyebrow { font-size: 0.66rem; letter-spacing: 0.14em; max-width: 100%; white-space: normal; }
  .nav__logo img, .nav.is-stuck .nav__logo img { height: 60px; }
  .hero__title { font-size: clamp(1.7rem, 1.05rem + 3.4vw, 2.3rem); max-width: none; overflow-wrap: normal; }
  .hero__lead { font-size: 0.92rem; }
  .hero__list { grid-template-columns: 1fr; }
  .hero__trust { gap: 10px; }
  .hero__trust-text { display: none; }
  .explorer__detail { grid-template-columns: 1fr; }
  .explorer__img { min-height: 200px; }
  .keyfeat__grid { grid-template-columns: repeat(2, 1fr); }
  .coverflow { height: 430px; }
  .coverflow__item { width: 230px; height: 330px; }
  .footer__inner { grid-template-columns: 1fr; gap: 34px; }
  .why__badge { left: 16px; right: 16px; max-width: none; }
}

@media (max-width: 480px) {
  .container { padding: 0 18px; }
  .section { padding: 64px 0; }
  .topbar__contact { gap: 12px; }
  .topbar__contact .topbar__link:first-child span { font-size: 0.78rem; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }
  .services__grid { grid-template-columns: 1fr; }
  .recognition__grid { grid-template-columns: 1fr; }
  .keyfeat__grid { grid-template-columns: 1fr; }
  .explorer__list { flex-direction: column; }
  .testi__card { padding: 28px 20px; }
  .contact__form { padding: 24px; }
  .coverflow { height: 390px; }
  .coverflow__item { width: 200px; height: 292px; }
  .why__img img, .audiobook__img img { height: 360px; }
  .service-hero { padding: 64px 0 52px; }
  .service-grid,
  .service-steps { grid-template-columns: 1fr; }
  .service-card,
  .service-step,
  .service-hero__panel { padding: 20px; }
  /* Stack the service-page CTA buttons full-width on small screens */
  .service-hero__cta,
  .service-cta__btns { flex-direction: column; align-items: stretch; }
  .service-hero__cta .btn,
  .service-cta__btns .btn { width: 100%; }
  .rowslider--reviews .testi__card { padding: 26px 22px; }
}

/* ============================================================
   Promo popup (auto-appears after 5s)
   ============================================================ */
.promo {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  /* Scroll the overlay (not clip) so a tall card is always fully reachable. */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 24px 18px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.45s var(--ease), visibility 0.45s var(--ease);
}
.promo.is-open { visibility: visible; opacity: 1; }
.promo__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 18, 41, 0.66);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.promo__card {
  position: relative;
  z-index: 1;
  /* margin:auto centers the card yet keeps the top reachable when it's taller
     than the viewport, so the Submit button never gets cropped. */
  margin: auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  width: min(880px, 100%);
  background: var(--cream);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 44px 110px rgba(8, 18, 41, 0.55);
  opacity: 0;
  transform: translateY(30px) scale(0.92);
}
.promo.is-open .promo__card {
  animation: promoPop 0.7s cubic-bezier(0.34, 1.4, 0.5, 1) 0.05s both;
}
@keyframes promoPop {
  0%   { opacity: 0; transform: translateY(34px) scale(0.9); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .promo.is-open .promo__card { animation: none; opacity: 1; transform: none; }
}

/* Left image panel */
.promo__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px;
  background:
    radial-gradient(circle at 30% 20%, rgba(176, 30, 46, 0.10), transparent 55%),
    linear-gradient(160deg, #fbf1de 0%, #f2e0c1 100%);
}
.promo__media::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px dashed rgba(13, 27, 62, 0.16);
  border-radius: 16px;
  pointer-events: none;
}
.promo__media img {
  position: relative;
  width: 100%;
  max-height: 430px;
  object-fit: contain;
  filter: drop-shadow(0 26px 44px rgba(0, 0, 0, 0.30));
}

/* Right form panel */
.promo__body {
  padding: 28px 34px 30px;
  display: flex;
  flex-direction: column;
}
.promo__logo { height: 46px; width: auto; margin-bottom: 12px; align-self: flex-start; }
.promo__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.55rem, 1.15rem + 1.5vw, 2.15rem);
  line-height: 1.12;
  color: var(--navy);
  margin: 0 0 6px;
}
.promo__title span { color: var(--red); }
.promo__sub { color: var(--text-muted); font-size: 0.94rem; margin: 0 0 18px; }
.promo__form { display: grid; gap: 11px; }
.promo__field { display: flex; flex-direction: column; gap: 3px; }
.promo__field input,
.promo__field textarea {
  font-family: inherit;
  font-size: 0.95rem;
  padding: 12px 15px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--text-dark);
  width: 100%;
  resize: vertical;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.promo__field input::placeholder,
.promo__field textarea::placeholder { color: #9a9fb0; }
.promo__field input:focus,
.promo__field textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(176, 30, 46, 0.10);
}
.promo__field.has-error input,
.promo__field.has-error textarea { border-color: var(--red); }
.promo__err { color: var(--red); font-size: 0.74rem; min-height: 0; }
.promo__field.has-error .promo__err { min-height: 1em; }
.promo__submit { width: 100%; margin-top: 6px; }
.promo__success {
  margin: 10px 0 0;
  padding: 12px 16px;
  background: rgba(40, 160, 90, 0.12);
  border: 1px solid rgba(40, 160, 90, 0.4);
  color: #1c7a47;
  border-radius: 10px;
  font-weight: 600;
  text-align: center;
  font-size: 0.9rem;
}

/* Close button */
.promo__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  color: var(--navy);
  border: 2px solid var(--red);
  font-size: 1.6rem;
  line-height: 1;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 22px rgba(8, 18, 41, 0.28);
  transition: transform 0.4s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
}
.promo__close:hover { background: var(--red); color: #fff; transform: rotate(90deg); }

@media (max-width: 680px) {
  .promo__card { grid-template-columns: 1fr; max-height: 90vh; }
  .promo__media { padding: 18px; }
  .promo__media img { max-height: 150px; }
  .promo__media::before { inset: 10px; }
  .promo__body { padding: 22px 22px 24px; }
  .promo__logo { height: 44px; }
}

/* ============================================================
   Cover Design portfolio grid
   ============================================================ */
.coverwork { background: var(--cream); }
.coverwork__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px 30px;
  /* Smaller, centered tiles */
  max-width: 860px;
  margin: 0 auto;
  perspective: 1200px;
}
.coverwork__item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 2 / 3;
  /* light frame so the full cover shows, zoomed out */
  background: #fff;
  box-shadow: 0 16px 34px rgba(13, 27, 62, 0.18);
  transform-style: preserve-3d;
  transition: transform 0.25s var(--ease), box-shadow 0.4s var(--ease);
  will-change: transform;
  cursor: pointer;
}
.coverwork__item img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* full cover visible, not cropped/zoomed */
  display: block;
  padding: 10px;
}
/* Moving gloss sweep on hover */
.coverwork__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,0) 42%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 58%);
  transform: translateX(-130%);
  transition: transform 0.75s var(--ease);
  pointer-events: none;
  z-index: 2;
}
.coverwork__item:hover::after { transform: translateX(130%); }
.coverwork__item:hover { box-shadow: 0 30px 60px rgba(13, 27, 62, 0.30); }
@media (max-width: 768px) { .coverwork__grid { grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 460px; } }
@media (prefers-reduced-motion: reduce) { .coverwork__item { transform: none !important; } }

/* ============================================================
   Children's Book Illustrations — playful portfolio
   ============================================================ */
.kidfolio {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 18%, rgba(255, 205, 112, 0.22), transparent 32%),
    radial-gradient(circle at 92% 12%, rgba(140, 200, 255, 0.22), transparent 30%),
    radial-gradient(circle at 80% 88%, rgba(255, 150, 170, 0.20), transparent 32%),
    radial-gradient(circle at 18% 92%, rgba(150, 230, 180, 0.20), transparent 30%),
    var(--cream);
}
/* floating decorative doodles */
.kidfolio__doodle {
  position: absolute;
  font-size: 2rem;
  opacity: 0.5;
  animation: kidFloat 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes kidFloat {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-16px) rotate(6deg); }
}

/* Drifting rows */
.kidfolio__rows { display: grid; gap: 26px; }
.kidfolio__row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.kidfolio__track {
  display: flex;
  align-items: center;
  gap: 26px;
  width: max-content;
  animation: kidScroll var(--kid-duration, 70s) linear infinite;
}
.kidfolio__row--reverse .kidfolio__track { animation-direction: reverse; }
.kidfolio__row:hover .kidfolio__track { animation-play-state: paused; }
@keyframes kidScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Polaroid-style cards */
.kidfolio__card {
  flex-shrink: 0;
  background: #fff;
  padding: 8px 8px 14px;
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(13, 27, 62, 0.14);
  cursor: zoom-in;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.kidfolio__card img {
  height: 168px;
  width: auto;
  max-width: 260px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
/* playful alternating tilts + pastel frames */
.kidfolio__card:nth-child(5n+1) { transform: rotate(-2.5deg); background: #fff6ea; }
.kidfolio__card:nth-child(5n+2) { transform: rotate(2deg);   background: #eaf4ff; }
.kidfolio__card:nth-child(5n+3) { transform: rotate(-1.5deg); background: #ffeef1; }
.kidfolio__card:nth-child(5n+4) { transform: rotate(2.5deg);  background: #eefbf0; }
.kidfolio__card:nth-child(5n+5) { transform: rotate(-2deg);  background: #f6efff; }
.kidfolio__card:hover {
  transform: rotate(0deg) scale(1.09);
  box-shadow: 0 22px 48px rgba(13, 27, 62, 0.26);
  animation: kidWobble 0.5s var(--ease);
  z-index: 2;
  position: relative;
}
@keyframes kidWobble {
  0% { transform: rotate(0) scale(1.02); }
  35% { transform: rotate(2.5deg) scale(1.07); }
  70% { transform: rotate(-1.5deg) scale(1.09); }
  100% { transform: rotate(0) scale(1.09); }
}

/* Lightbox */
.kidbox {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  background: rgba(8, 18, 41, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease);
}
.kidbox.is-open { opacity: 1; visibility: visible; }
.kidbox__img {
  max-width: min(920px, 92vw);
  max-height: 84vh;
  border-radius: 14px;
  box-shadow: 0 40px 100px rgba(0,0,0,0.5);
  background: #fff;
  padding: 10px;
  transform: scale(0.94);
  transition: transform 0.4s var(--ease);
}
.kidbox.is-open .kidbox__img { transform: scale(1); }
.kidbox__close, .kidbox__nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.94);
  color: var(--navy);
  box-shadow: 0 10px 26px rgba(0,0,0,0.3);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}
.kidbox__close { top: 22px; right: 24px; font-size: 1.7rem; line-height: 1; }
.kidbox__close:hover { background: var(--red); color: #fff; transform: rotate(90deg); }
.kidbox__nav { top: 50%; transform: translateY(-50%); }
.kidbox__nav:hover { background: var(--red); color: #fff; }
.kidbox__nav--prev { left: 22px; }
.kidbox__nav--next { right: 22px; }

@media (max-width: 600px) {
  .kidfolio__card img { height: 120px; max-width: 190px; }
  .kidbox__nav { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .kidfolio__track { animation: none; }
  .kidfolio__row { overflow-x: auto; }
}

/* "How it works" photo steps */
.howsteps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.howstep {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.howstep:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); }
/* contain (not cover) so small photos aren't zoom-cropped and pixelated */
.howstep img { width: 100%; height: 185px; object-fit: contain; display: block; background: var(--cream); padding: 10px; }
.howstep__body { padding: 20px 22px 24px; }
.howstep__body .process__num { width: 42px; height: 42px; font-size: 1.05rem; margin: -42px 0 12px; position: relative; box-shadow: 0 10px 22px rgba(176,30,46,0.35); }
.howstep__body h3 { font-family: var(--serif); color: var(--navy); font-size: 1.15rem; margin: 0 0 6px; }
.howstep__body p { margin: 0; color: var(--text-muted); font-size: 0.93rem; }
@media (max-width: 768px) { .howsteps { grid-template-columns: 1fr; } }

/* ---- Responsive utilities (replace inline grid styles) ---- */
.list--2col { grid-template-columns: 1fr 1fr; gap: 8px 26px; }
@media (max-width: 600px) { .list--2col { grid-template-columns: 1fr; } }
.cta-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  text-align: left;
}
@media (max-width: 860px) { .cta-split { grid-template-columns: 1fr; gap: 30px; } }

/* ============================================================
   Ghostwriting — writing-types tab explorer
   ============================================================ */
.gwtabs__pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 34px; }
.gwtabs__pill {
  padding: 10px 20px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--navy);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.gwtabs__pill:hover { border-color: var(--red); color: var(--red); transform: translateY(-2px); }
.gwtabs__pill.is-active {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  box-shadow: 0 10px 24px rgba(176,30,46,0.3);
}
.gwtabs__panel {
  display: none;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 40px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 34px;
  box-shadow: var(--shadow-sm);
}
.gwtabs__panel.is-active { display: grid; animation: gwFade 0.55s var(--ease); }
@keyframes gwFade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.gwtabs__panel img { width: 100%; height: auto; border-radius: 12px; display: block; }
.gwtabs__panel h3 { font-family: var(--serif); color: var(--navy); font-size: 1.5rem; margin: 0 0 10px; }
.gwtabs__panel p { color: var(--text-muted); margin: 0 0 20px; }
@media (max-width: 860px) {
  .gwtabs__panel { grid-template-columns: 1fr; padding: 22px; }
  .gwtabs__pill { padding: 8px 14px; font-size: 0.82rem; }
}

/* ============================================================
   Audiobook — sample players
   ============================================================ */
.absamples { background: var(--navy); color: #fff; }
.absamples .h2 { color: #fff; }
.absamples .lead { color: rgba(255,255,255,0.75); }
.absamples .eyebrow { color: var(--red-soft); }
.absamples__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.abplayer {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  overflow: hidden;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.abplayer:hover { transform: translateY(-6px); border-color: rgba(200,56,74,0.5); box-shadow: 0 24px 55px rgba(0,0,0,0.35); }
.abplayer__thumb { position: relative; }
.abplayer__thumb img { width: 100%; height: 210px; object-fit: cover; display: block; }
.abplayer__thumb::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(8,18,41,0.72), transparent 55%);
}
.abplayer__badge {
  position: absolute; top: 12px; left: 12px; z-index: 1;
  background: var(--red); color: #fff;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
}
.abplayer__body { padding: 18px 20px 22px; }
.abplayer__title { font-family: var(--serif); font-size: 1.12rem; margin: 0 0 14px; color: #fff; }
.abplayer__row { display: flex; align-items: center; gap: 14px; }
.abplayer__btn {
  flex-shrink: 0;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 12px 26px rgba(176,30,46,0.45);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.abplayer__btn:hover { transform: scale(1.1); background: var(--red-soft); }
.abplayer__btn .ic-pause { display: none; }
.abplayer.is-playing .ic-play { display: none; }
.abplayer.is-playing .ic-pause { display: block; }
.abplayer__meter { flex: 1; }
.abplayer__bar {
  height: 7px; border-radius: 999px;
  background: rgba(255,255,255,0.15);
  overflow: hidden;
  cursor: pointer;
}
.abplayer__fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--red), var(--red-soft)); transition: width 0.2s linear; }
.abplayer__time { display: flex; justify-content: space-between; font-size: 0.74rem; color: rgba(255,255,255,0.6); margin-top: 6px; }
/* animated equalizer bars while playing */
.abplayer__eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; margin-left: 8px; opacity: 0; transition: opacity 0.3s; }
.abplayer.is-playing .abplayer__eq { opacity: 1; }
.abplayer__eq span { width: 3px; border-radius: 2px; background: var(--red-soft); height: 30%; }
.abplayer.is-playing .abplayer__eq span { animation: eqBounce 0.9s ease-in-out infinite; }
.abplayer.is-playing .abplayer__eq span:nth-child(2) { animation-delay: 0.15s; }
.abplayer.is-playing .abplayer__eq span:nth-child(3) { animation-delay: 0.3s; }
.abplayer.is-playing .abplayer__eq span:nth-child(4) { animation-delay: 0.45s; }
@keyframes eqBounce { 0%,100% { height: 25%; } 50% { height: 100%; } }
.abplayer__note { margin: 12px 0 0; font-size: 0.78rem; color: rgba(255,255,255,0.55); }
.abplayer__note strong { color: var(--red-soft); }
/* offer cards */
.aboffer__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.aboffer__card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.aboffer__card:hover { transform: translateY(-8px) rotate(-1deg); box-shadow: var(--shadow-md); }
.aboffer__card img { width: 100%; height: 170px; object-fit: contain; padding: 14px; display: block; background: var(--cream); }
.aboffer__card p { margin: 0; padding: 14px 16px 18px; font-weight: 600; color: var(--navy); font-size: 0.92rem; text-align: center; }
@media (max-width: 1024px) { .absamples__grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } .aboffer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .aboffer__grid { grid-template-columns: 1fr; } }

/* ============================================================
   Author Website — live-site showcase (browser mockups)
   ============================================================ */
.awsites { background: var(--navy); }
.awsites .h2 { color: #fff; }
.awsites .lead { color: rgba(255,255,255,0.75); }
.awsites .eyebrow { color: var(--red-soft); }
.awsites__grid {
  /* flex so the odd last card centers */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px;
}
.awsites__grid .awsite { width: calc(50% - 13px); }
.awsite {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  background: #1a2647;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 24px 55px rgba(0,0,0,0.35);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.awsite:hover {
  transform: translateY(-8px);
  border-color: rgba(200,56,74,0.55);
  box-shadow: 0 34px 80px rgba(0,0,0,0.5);
}
/* All projects equal size: a wide "featured" card rendered the 1100px
   screenshot near 1:1, which looked zoomed-in. */
.awsite--featured { grid-column: auto; }
/* mock browser chrome */
.awsite__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: #101b38;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.awsite__dots { display: inline-flex; gap: 5px; }
.awsite__dots span { width: 10px; height: 10px; border-radius: 50%; }
.awsite__dots span:nth-child(1) { background: #ff5f57; }
.awsite__dots span:nth-child(2) { background: #febc2e; }
.awsite__dots span:nth-child(3) { background: #28c840; }
.awsite__url {
  flex: 1;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.awsite__visit {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red-soft);
  flex-shrink: 0;
}
/* screenshot window: landscape (laptop 16:9-ish), slow pan down on hover */
.awsite__shot { height: 320px; overflow: hidden; }
.awsite__shot img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 6s ease-in-out;
}
.awsite:hover .awsite__shot img { transform: translateY(calc(-100% + 320px)); }
@media (max-width: 1024px) {
  /* single wide card per row keeps the laptop aspect on tablets */
  .awsites__grid .awsite { width: 100%; max-width: 640px; }
  .awsite__shot { height: 360px; }
  .awsite:hover .awsite__shot img { transform: translateY(calc(-100% + 360px)); }
}
@media (max-width: 640px) {
  .awsite__shot { height: 205px; }
  .awsite:hover .awsite__shot img { transform: translateY(calc(-100% + 205px)); }
}

/* ============================================================
   Shared: dark gradient CTA band (Marketing + Social pages)
   ============================================================ */
.darkcta {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 10%, rgba(200,56,74,0.28), transparent 45%),
    radial-gradient(circle at 6% 96%, rgba(200,56,74,0.16), transparent 46%),
    linear-gradient(160deg, #0d1b3e 0%, #081229 100%);
  color: #fff;
}
.darkcta .h2 { color: #fff; }
.darkcta .lead { color: rgba(255,255,255,0.76); }
.darkcta .eyebrow { color: var(--red-soft); }
.darkcta > .container { position: relative; z-index: 1; }
.darkcta__art img {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.5));
}

/* ============================================================
   Marketing Services — stats strip
   ============================================================ */
.mkstats {
  background: var(--navy-dark);
  color: #fff;
  padding: 30px 0;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.mkstats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.mkstat { position: relative; text-align: center; padding: 6px 12px; }
.mkstat + .mkstat::before {
  content: ""; position: absolute; left: 0; top: 15%;
  height: 70%; width: 1px; background: rgba(255,255,255,0.13);
}
.mkstat strong {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.4rem);
  line-height: 1;
  color: #fff;
}
.mkstat strong i { font-style: normal; color: var(--red-soft); }
.mkstat em {
  font-style: normal; display: block; margin-top: 9px;
  font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
@media (max-width: 700px) {
  .mkstats__grid { grid-template-columns: repeat(2, 1fr); gap: 22px 14px; }
  .mkstat:nth-child(3)::before { display: none; }
}

/* ============================================================
   Marketing Services — channel tiles (types of book marketing)
   ============================================================ */
.mkchan { background: var(--white); }
.mkchan__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mkchan__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px 20px 22px;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.mkchan__card::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(155deg, #101f47 0%, #0d1b3e 55%, #2a1830 100%);
  transform: translateY(101%);
  transition: transform 0.55s var(--ease);
}
.mkchan__card:hover::before { transform: translateY(0); }
.mkchan__card:hover {
  transform: translateY(-8px);
  border-color: transparent;
  box-shadow: var(--shadow-md);
}
.mkchan__no {
  position: absolute; top: 6px; right: 14px;
  font-family: var(--serif); font-weight: 700; font-size: 2.7rem;
  color: rgba(13,27,62,0.07);
  transition: color 0.55s var(--ease);
  pointer-events: none;
}
.mkchan__card:hover .mkchan__no { color: rgba(255,255,255,0.12); }
.mkchan__ic {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: #fff; color: var(--red);
  box-shadow: var(--shadow-sm);
  margin-bottom: 14px;
  transition: background 0.5s var(--ease), color 0.5s var(--ease), transform 0.5s var(--ease);
}
.mkchan__card:hover .mkchan__ic { background: var(--red); color: #fff; transform: rotate(-8deg) scale(1.07); }
.mkchan__card h3 {
  font-family: var(--serif); color: var(--navy);
  font-size: 1.04rem; margin: 0 0 7px;
  transition: color 0.5s var(--ease);
}
.mkchan__card p { margin: 0; font-size: 0.87rem; color: var(--text-muted); transition: color 0.5s var(--ease); }
.mkchan__card:hover h3 { color: #fff; }
.mkchan__card:hover p { color: rgba(255,255,255,0.76); }
@media (max-width: 1024px) { .mkchan__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .mkchan__grid { grid-template-columns: 1fr; } }

/* ============================================================
   Marketing Services — reader journey track
   ============================================================ */
.mkflow { background: var(--cream); }
.mkflow__track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  padding-top: 56px;
}
.mkflow__rail {
  position: absolute;
  left: 10%; right: 10%; top: 22px;
  height: 2px;
  background: linear-gradient(90deg, rgba(176,30,46,0.12), rgba(176,30,46,0.55), rgba(176,30,46,0.12));
  overflow: hidden;
}
.mkflow__rail::after {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 22%; height: 100%;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  animation: mkRail 4.5s linear infinite;
}
@keyframes mkRail { from { transform: translateX(-120%); } to { transform: translateX(560%); } }
.mkstep { position: relative; text-align: center; }
.mkstep__dot {
  position: absolute; top: -56px; left: 50%;
  transform: translateX(-50%);
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--red);
  color: var(--red);
  font-weight: 800; font-size: 0.85rem;
  box-shadow: 0 10px 22px rgba(176,30,46,0.22);
  z-index: 1;
  transition: background var(--t) var(--ease), color var(--t) var(--ease), transform var(--t) var(--ease);
}
.mkstep:hover .mkstep__dot { background: var(--red); color: #fff; transform: translateX(-50%) scale(1.14); }
.mkstep__card {
  height: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 18px 20px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.mkstep:hover .mkstep__card { transform: translateY(-7px); box-shadow: var(--shadow-md); }
.mkstep__stage {
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--red);
}
.mkstep h3 { font-family: var(--serif); color: var(--navy); font-size: 1.06rem; margin: 8px 0; }
.mkstep p { margin: 0 0 13px; font-size: 0.87rem; color: var(--text-muted); }
.mkstep__tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.mkstep__tags span {
  font-size: 0.71rem; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
  background: var(--cream-2); color: var(--navy);
}
@media (max-width: 1024px) {
  .mkflow__track { grid-template-columns: repeat(2, 1fr); gap: 56px 14px; }
  .mkflow__rail { display: none; }
}
@media (max-width: 560px) { .mkflow__track { grid-template-columns: 1fr; } }

/* ============================================================
   Marketing Services — genre showcase (covers with 3D tilt)
   ============================================================ */
.mkgenre { background: var(--navy); position: relative; overflow: hidden; }
.mkgenre .h2 { color: #fff; }
.mkgenre .lead { color: rgba(255,255,255,0.75); }
.mkgenre .eyebrow { color: var(--red-soft); }
.mkgenre__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
  max-width: 820px;
  margin: 0 auto;
  perspective: 1200px;
}
.mkgenre__item {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 2 / 3;
  background: #fff;
  box-shadow: 0 22px 50px rgba(0,0,0,0.45);
  transform-style: preserve-3d;
  transition: transform 0.25s var(--ease), box-shadow 0.5s var(--ease);
  will-change: transform;
}
.mkgenre__item img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.mkgenre__meta {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 40px 14px 14px;
  color: #fff;
  text-align: left;
  background: linear-gradient(0deg, rgba(6,13,32,0.96) 30%, rgba(6,13,32,0.72) 65%, transparent);
  transform: translateY(101%);
  opacity: 0;
  transition: transform 0.45s var(--ease), opacity 0.45s var(--ease);
}
.mkgenre__item:hover .mkgenre__meta { transform: translateY(0); opacity: 1; }
.mkgenre__meta em {
  font-style: normal; display: block;
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--red-soft); margin-bottom: 5px;
}
.mkgenre__meta strong { display: block; font-family: var(--serif); font-size: 0.96rem; line-height: 1.25; }
.mkgenre__meta span { display: block; margin-top: 7px; font-size: 0.73rem; color: rgba(255,255,255,0.7); }
.mkgenre__note {
  max-width: 660px; margin: 34px auto 0; text-align: center;
  font-size: 0.9rem; color: rgba(255,255,255,0.62);
}
@media (max-width: 768px) { .mkgenre__grid { grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 440px; } }
@media (prefers-reduced-motion: reduce) { .mkgenre__item { transform: none !important; } }

/* ============================================================
   Social Media — hero phone with a live-cycling feed
   ============================================================ */
.smhero__art { position: relative; justify-self: center; width: min(310px, 100%); }
.phone {
  position: relative;
  padding: 17px 11px 13px;
  border-radius: 40px;
  background: linear-gradient(160deg, #2a3a5f, #0a1129);
  box-shadow: 0 34px 76px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.12);
}
.phone::before {
  content: "";
  position: absolute; top: 6px; left: 50%;
  transform: translateX(-50%);
  width: 70px; height: 5px; border-radius: 999px;
  background: rgba(255,255,255,0.24);
  z-index: 4;
}
.phone__screen {
  position: relative;
  border-radius: 30px;
  overflow: hidden;
  background: #fff;
}
.smhero__bar {
  display: flex; align-items: center; gap: 9px;
  padding: 14px 13px 10px;
  background: #fff;
  border-bottom: 1px solid rgba(13,27,62,0.08);
}
.smhero__bar i {
  width: 27px; height: 27px; border-radius: 50%;
  background: linear-gradient(135deg, var(--red), #f0a640);
  flex-shrink: 0;
}
.smhero__bar b { font-size: 0.76rem; color: var(--navy); }
.smhero__bar s { margin-left: auto; text-decoration: none; color: #98a0b5; letter-spacing: 2px; font-size: 0.9rem; }
.smhero__feed { position: relative; aspect-ratio: 4 / 5; background: #0b1533; }
.smhero__feed img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  animation: smSwap 16s var(--ease) infinite;
}
.smhero__feed img:nth-child(1) { animation-delay: 0s; }
.smhero__feed img:nth-child(2) { animation-delay: 4s; }
.smhero__feed img:nth-child(3) { animation-delay: 8s; }
.smhero__feed img:nth-child(4) { animation-delay: 12s; }
@keyframes smSwap {
  0%   { opacity: 0; transform: scale(1.05); }
  4%   { opacity: 1; transform: scale(1); }
  23%  { opacity: 1; transform: scale(1); }
  28%  { opacity: 0; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.05); }
}
.smhero__ui {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px 15px;
  background: #fff;
}
.smhero__ui svg { color: #26314d; }
.smhero__ui b { margin-left: auto; font-size: 0.68rem; font-weight: 700; color: var(--navy); opacity: 0.5; }
.smhero__chip {
  position: absolute; z-index: 5;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.96);
  color: var(--navy);
  font-size: 0.77rem; font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 14px 32px rgba(0,0,0,0.34);
  animation: floaty 6s ease-in-out infinite;
}
.smhero__chip svg { color: var(--red); flex-shrink: 0; }
.smhero__chip--a { top: 14%; left: -40px; animation-delay: 0s; }
.smhero__chip--b { top: 48%; right: -34px; animation-delay: 1.4s; }
.smhero__chip--c { bottom: 12%; left: -32px; animation-delay: 2.6s; }
.smhero__days { position: absolute; top: -20px; right: 4px; z-index: 5; display: flex; gap: 5px; }
.smhero__days span {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--red);
  color: #fff;
  font-size: 0.71rem; font-weight: 800;
  box-shadow: 0 12px 26px rgba(176,30,46,0.45);
  animation: smPop 3s var(--ease) infinite;
}
.smhero__days span:nth-child(2) { animation-delay: 0.4s; }
.smhero__days span:nth-child(3) { animation-delay: 0.8s; }
@keyframes smPop { 0%, 70%, 100% { transform: translateY(0); } 82% { transform: translateY(-7px); } }
/* The phone is the whole point of this page, so it stays on mobile too -- it
   just moves under the copy and loses the floating chips, which would push
   past the edge of a narrow screen. */
@media (max-width: 860px) {
  .smhero__art {
    justify-self: center;
    width: min(210px, 58vw);
    margin: 14px auto 0;
  }
  .smhero__chip { display: none; }
  .smhero__days {
    top: -15px; right: 50%;
    transform: translateX(50%);
    gap: 4px;
  }
  .smhero__days span { width: 28px; height: 28px; border-radius: 9px; font-size: 0.58rem; }
  /* Let the hero size to its content once the phone is stacked below. */
  .service-hero--compact { min-height: 0; padding: 30px 0 44px; }
}
@media (max-width: 380px) {
  .smhero__art { width: 62vw; }
}

/* ============================================================
   Social Media — platform setup tiles
   ============================================================ */
.smplat { background: var(--white); }
.smplat__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.smplat__card {
  position: relative;
  overflow: hidden;
  display: flex; gap: 14px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 18px 18px 20px;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.smplat__card::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  height: 3px; width: 100%;
  background: var(--brand, var(--red));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-slow) var(--ease);
}
.smplat__card:hover { transform: translateY(-7px); box-shadow: var(--shadow-md); border-color: transparent; }
.smplat__card:hover::after { transform: scaleX(1); }
.smplat__ic {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: var(--brand, var(--navy));
  color: #fff;
  box-shadow: 0 10px 22px rgba(13,27,62,0.18);
  transition: transform var(--t) var(--ease);
}
.smplat__card:hover .smplat__ic { transform: rotate(-8deg) scale(1.08); }
.smplat__card h3 { font-family: var(--serif); font-size: 1rem; color: var(--navy); margin: 0 0 4px; }
.smplat__card p { margin: 0; font-size: 0.83rem; color: var(--text-muted); }
.smplat__list {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px 26px;
  max-width: 920px; margin: 38px auto 0;
}
.smplat__list li {
  position: relative; padding-left: 28px;
  font-size: 0.9rem; color: var(--text-dark);
}
.smplat__list li::before {
  content: ""; position: absolute; left: 0; top: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--red);
}
.smplat__list li::after {
  content: ""; position: absolute; left: 6px; top: 7px;
  width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
@media (max-width: 1024px) { .smplat__grid { grid-template-columns: repeat(2, 1fr); } .smplat__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .smplat__grid { grid-template-columns: 1fr; } .smplat__list { grid-template-columns: 1fr; } }

/* ============================================================
   Social Media — Mon / Wed / Fri posting rhythm
   ============================================================ */
.smweek { background: var(--cream); }
.smweek__strip {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  max-width: 800px; margin: 0 auto 46px;
}
.smday {
  border-radius: 14px;
  padding: 18px 6px 16px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--text-muted);
}
.smday strong { display: block; font-family: var(--serif); font-size: 1rem; color: var(--navy); }
.smday span { display: block; margin-top: 5px; font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; }
.smday--on {
  position: relative;
  transform: translateY(-8px);
  background: linear-gradient(160deg, #16264f, #0d1b3e);
  border-color: transparent;
  box-shadow: 0 20px 40px rgba(13,27,62,0.28);
}
.smday--on strong { color: #fff; }
.smday--on span { color: var(--red-soft); }
.smday--on::after {
  content: "";
  position: absolute; left: 50%; bottom: -16px;
  transform: translateX(-50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--red);
  animation: smPulse 2.4s ease-in-out infinite;
}
.smday--on.d2::after { animation-delay: 0.5s; }
.smday--on.d3::after { animation-delay: 1s; }
@keyframes smPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(176,30,46,0.45); }
  55% { box-shadow: 0 0 0 11px rgba(176,30,46,0); }
}
.smweek__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.smweek__card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 24px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.smweek__card:hover { transform: translateY(-7px); box-shadow: var(--shadow-md); }
.smweek__card b {
  display: inline-block;
  font-size: 0.69rem; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #fff; background: var(--red);
  padding: 5px 12px; border-radius: 999px;
  margin-bottom: 14px;
}
.smweek__card h3 { font-family: var(--serif); font-size: 1.12rem; color: var(--navy); margin: 0 0 8px; }
.smweek__card p { margin: 0; font-size: 0.89rem; color: var(--text-muted); }
@media (max-width: 760px) {
  .smweek__strip { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .smweek__cards { grid-template-columns: 1fr; }
  .smday--on { transform: none; }
}

/* ============================================================
   Social Media — the interactive monthly calendar
   ============================================================ */
.smcal {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 86% 4%, rgba(200,56,74,0.22), transparent 42%),
    radial-gradient(circle at 8% 98%, rgba(200,56,74,0.14), transparent 44%),
    linear-gradient(165deg, #0d1b3e, #081229);
  color: #fff;
}
.smcal .h2 { color: #fff; }
.smcal .lead { color: rgba(255,255,255,0.75); }
.smcal .eyebrow { color: var(--red-soft); }
.smcal__tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.smcal__tab {
  display: flex; align-items: center; gap: 11px;
  padding: 7px 20px 7px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  text-align: left;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.smcal__tab img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.smcal__tab b { display: block; font-size: 0.84rem; font-weight: 700; line-height: 1.25; }
.smcal__tab em { font-style: normal; display: block; font-size: 0.7rem; opacity: 0.66; }
.smcal__tab:hover { transform: translateY(-3px); border-color: rgba(200,56,74,0.5); }
.smcal__tab.is-active {
  background: var(--red);
  border-color: var(--red);
  box-shadow: 0 14px 32px rgba(176,30,46,0.42);
}
.smcal__tab.is-active em { opacity: 0.85; }

.smcal__panel { display: none; }
.smcal__panel.is-active { display: block; animation: gwFade 0.5s var(--ease); }
.smcal__sheet {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 22px;
  padding: 20px;
  box-shadow: 0 34px 80px rgba(0,0,0,0.4);
}
.smcal__head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px;
  padding: 2px 6px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 16px;
}
.smcal__month { font-family: var(--serif); font-size: 1.28rem; margin: 0; }
.smcal__month span {
  display: block; font-family: var(--sans);
  font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.5); margin-top: 5px;
}
.smcal__status {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.71rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #7fe0a4;
  background: rgba(127,224,164,0.12);
  border: 1px solid rgba(127,224,164,0.32);
  padding: 7px 14px; border-radius: 999px;
}
.smcal__dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 8px; }
.smcal__dow span {
  text-align: center;
  font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.42);
}
.smcal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.smcal__cell {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
}
.smcal__cell .d {
  position: absolute; top: 6px; left: 8px; z-index: 3;
  font-size: 0.69rem; font-weight: 600;
  color: rgba(255,255,255,0.55);
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.smcal__cell--post { cursor: zoom-in; border-color: rgba(200,56,74,0.3); }
.smcal__cell--post img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.55s var(--ease);
}
.smcal__cell--post::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, rgba(8,18,41,0.8), rgba(8,18,41,0.06) 48%);
}
.smcal__cell--post:hover { border-color: var(--red-soft); box-shadow: 0 16px 34px rgba(0,0,0,0.4); }
.smcal__cell--post:hover img { transform: scale(1.09); }
.smcal__tag {
  position: absolute; left: 5px; right: 5px; bottom: 5px; z-index: 2;
  text-align: center;
  font-size: 0.57rem; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff;
  background: rgba(176,30,46,0.92);
  border-radius: 999px;
  padding: 3px 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.smcal__cell--note {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 5px; padding: 12px 8px;
  text-align: center;
  background: linear-gradient(160deg, rgba(200,56,74,0.24), rgba(255,255,255,0.03));
  border-color: rgba(200,56,74,0.3);
}
.smcal__cell--note svg { color: var(--red-soft); }
.smcal__cell--note b { font-family: var(--serif); font-size: 0.75rem; line-height: 1.2; }
.smcal__cell--note em { font-style: normal; font-size: 0.61rem; color: rgba(255,255,255,0.6); line-height: 1.3; }
.smcal__legend {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px;
  margin-top: 26px;
  font-size: 0.82rem; color: rgba(255,255,255,0.68);
}
.smcal__legend span { display: inline-flex; align-items: center; gap: 8px; }
.smcal__legend i { width: 11px; height: 11px; border-radius: 4px; background: var(--red); display: inline-block; }
.smcal__legend i.n { background: rgba(200,56,74,0.4); }
.smcal__legend i.e { background: rgba(255,255,255,0.14); }
@media (max-width: 860px) {
  .smcal__dow { display: none; }
  .smcal__grid { grid-template-columns: repeat(3, 1fr); }
  .smcal__cell--empty { display: none; }
  .smcal__sheet { padding: 14px; }
}
@media (max-width: 420px) { .smcal__grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   Social Media — campaign feed wall (phone mockups)
   ============================================================ */
.smwall { background: var(--cream); position: relative; overflow: hidden; }
.smwall__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 44px 40px;
  max-width: 860px;
  margin: 0 auto;
}
.smwall__col { text-align: center; }
.smwall__col .phone { max-width: 330px; margin: 0 auto; }
.smwall__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 14px 12px;
  background: #fff;
  border-bottom: 1px solid rgba(13,27,62,0.08);
  text-align: left;
}
.smwall__ava {
  width: 34px; height: 34px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--red);
}
.smwall__bar b { display: block; font-size: 0.76rem; color: var(--navy); line-height: 1.3; }
.smwall__bar em { font-style: normal; display: block; font-size: 0.68rem; color: var(--text-muted); }
.smwall__bar s { margin-left: auto; text-decoration: none; color: #98a0b5; letter-spacing: 2px; }
.smwall__scroll { height: 340px; overflow: hidden; background: #fff; }
.smwall__strip {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px;
  transition: transform 7s linear;
}
/* The feed used to scroll only on hover, which meant it never moved on a
   phone. It now plays itself whenever the section is on screen (JS adds
   .is-playing via IntersectionObserver), on every device, and reverses so
   the loop is continuous. Hover still nudges it on pointer devices. */
.smwall__col:hover .smwall__strip,
.smwall__col:focus-within .smwall__strip { transform: translateY(calc(340px - 100%)); }
.smwall__col.is-playing .smwall__strip {
  animation: smWallScroll 16s ease-in-out infinite alternate;
  will-change: transform;
}
.smwall__col.is-playing:nth-child(2) .smwall__strip { animation-delay: -4s; }
.smwall__col.is-playing:nth-child(3) .smwall__strip { animation-delay: -8s; }
.smwall__col.is-playing:nth-child(4) .smwall__strip { animation-delay: -12s; }
@keyframes smWallScroll {
  0%,   6%   { transform: translateY(0); }
  94%, 100%  { transform: translateY(calc(340px - 100%)); }
}
@media (prefers-reduced-motion: reduce) {
  .smwall__col.is-playing .smwall__strip { animation: none; }
}
.smwall__cell { position: relative; aspect-ratio: 4 / 5; overflow: hidden; cursor: zoom-in; background: #eee; }
.smwall__cell img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.smwall__cell::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(13,27,62,0);
  transition: background 0.4s var(--ease);
}
.smwall__cell:hover img { transform: scale(1.1); }
.smwall__cell:hover::after { background: rgba(13,27,62,0.24); }
.smwall__foot { padding: 12px 14px 16px; background: #fff; text-align: left; }
.smwall__foot strong { display: block; font-family: var(--serif); font-size: 0.95rem; color: var(--navy); line-height: 1.3; }
.smwall__foot span { display: block; margin-top: 4px; font-size: 0.76rem; color: var(--text-muted); }
.smwall__badge {
  display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: 14px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  font-size: 0.73rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--navy);
}
.smwall__badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); display: inline-block; }
.smwall__hint {
  max-width: 620px; margin: 34px auto 0; text-align: center;
  font-size: 0.9rem; color: var(--text-muted);
}
@media (max-width: 820px) {
  .smwall__grid { grid-template-columns: 1fr; gap: 44px; max-width: 380px; }
  /* Keep the window fixed on mobile so there is something to auto-scroll;
     it used to expand to full height, which left nothing to animate. */
  .smwall__scroll { height: 340px; }
  .smwall__col:hover .smwall__strip { transform: none; }
}

/* ============================================================
   Social Media — post lightbox with caption + hashtags
   ============================================================ */
.postbox {
  position: fixed; inset: 0; z-index: 10002;
  display: flex; align-items: center; justify-content: center;
  padding: 26px;
  background: rgba(8,18,41,0.88);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease);
}
.postbox.is-open { opacity: 1; visibility: visible; }
.postbox__card {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  width: min(940px, 94vw);
  max-height: 86vh;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 44px 110px rgba(0,0,0,0.6);
  transform: scale(0.95);
  transition: transform 0.4s var(--ease);
}
.postbox.is-open .postbox__card { transform: scale(1); }
.postbox__img { background: #0b1533; display: grid; place-items: center; overflow: hidden; }
.postbox__img img { width: 100%; height: 100%; max-height: 86vh; object-fit: contain; }
.postbox__side { display: flex; flex-direction: column; padding: 24px 26px 26px; overflow-y: auto; }
.postbox__meta { display: flex; align-items: center; gap: 11px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.postbox__meta img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--red); }
.postbox__meta b { display: block; font-size: 0.9rem; color: var(--navy); line-height: 1.3; }
.postbox__meta em { font-style: normal; display: block; font-size: 0.76rem; color: var(--text-muted); }
.postbox__when {
  display: inline-flex; align-items: center; gap: 7px;
  align-self: flex-start;
  margin: 16px 0 12px;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--cream-2);
  font-size: 0.71rem; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--navy);
}
.postbox__when i { width: 7px; height: 7px; border-radius: 50%; background: var(--red); display: inline-block; }
.postbox__caption { margin: 0 0 18px; font-size: 0.95rem; line-height: 1.62; color: var(--text-dark); }
.postbox__label {
  font-size: 0.68rem; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 9px;
}
.postbox__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.postbox__tags span {
  font-size: 0.78rem; font-weight: 600;
  color: #2f5fb8;
  background: rgba(47,95,184,0.09);
  border-radius: 7px;
  padding: 4px 9px;
}
.postbox__acts { display: flex; align-items: center; gap: 16px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); color: #26314d; }
.postbox__acts small { margin-left: auto; color: var(--text-muted); font-size: 0.74rem; }
.postbox__close, .postbox__nav {
  position: absolute;
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,0.94);
  color: var(--navy);
  box-shadow: 0 10px 26px rgba(0,0,0,0.34);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}
.postbox__close { top: 20px; right: 22px; font-size: 1.7rem; line-height: 1; }
.postbox__close:hover { background: var(--red); color: #fff; transform: rotate(90deg); }
.postbox__nav { top: 50%; transform: translateY(-50%); }
.postbox__nav:hover { background: var(--red); color: #fff; }
.postbox__nav--prev { left: 18px; }
.postbox__nav--next { right: 18px; }
@media (max-width: 820px) {
  .postbox { padding: 14px; }
  .postbox__card { grid-template-columns: 1fr; max-height: 92vh; overflow-y: auto; }
  .postbox__img img { max-height: 46vh; }
  .postbox__side { padding: 18px 20px 22px; }
  .postbox__nav { width: 38px; height: 38px; }
  .postbox__nav--prev { left: 8px; }
  .postbox__nav--next { right: 8px; }
  .postbox__close { top: 12px; right: 12px; width: 38px; height: 38px; }
}

/* ============================================================
   Social Media — caption + hashtag sample card
   ============================================================ */
.smcap { background: var(--white); }
.smcap__inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 54px; align-items: center; }
.smcap__card {
  max-width: 380px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.smcap__card img.post { width: 100%; height: auto; display: block; }
.smcap__head { display: flex; align-items: center; gap: 10px; padding: 13px 14px; }
.smcap__head img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--red); }
.smcap__head b { display: block; font-size: 0.78rem; color: var(--navy); line-height: 1.3; }
.smcap__head em { font-style: normal; display: block; font-size: 0.68rem; color: var(--text-muted); }
.smcap__acts { display: flex; align-items: center; gap: 14px; padding: 12px 14px 6px; color: #26314d; }
.smcap__body { padding: 4px 14px 18px; }
.smcap__body p { margin: 0 0 10px; font-size: 0.87rem; line-height: 1.55; color: var(--text-dark); }
.smcap__body p b { color: var(--navy); }
.smcap__body .tags { font-size: 0.85rem; color: #2f5fb8; word-spacing: 2px; line-height: 1.6; }
.smcap__points { display: grid; gap: 18px; margin: 26px 0 28px; }
.smcap__point { display: flex; gap: 15px; align-items: flex-start; }
.smcap__point span {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 13px;
  background: var(--cream);
  color: var(--red);
  box-shadow: var(--shadow-sm);
  transition: background var(--t) var(--ease), color var(--t) var(--ease), transform var(--t) var(--ease);
}
.smcap__point:hover span { background: var(--red); color: #fff; transform: translateY(-4px) rotate(-6deg); }
.smcap__point h3 { font-family: var(--serif); font-size: 1.1rem; color: var(--navy); margin: 0 0 4px; }
.smcap__point p { margin: 0; font-size: 0.9rem; color: var(--text-muted); }
@media (max-width: 900px) { .smcap__inner { grid-template-columns: 1fr; gap: 34px; } }

/* ============================================================
   Social Media — ad campaign flow to the buy button
   ============================================================ */
.smads { background: var(--cream); }
.smads__flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-bottom: 42px; }
.smads__node {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 20px 24px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.smads__node:hover { transform: translateY(-7px); box-shadow: var(--shadow-md); }
.smads__node:not(:last-child)::after {
  content: "";
  position: absolute; top: 50%; right: -22px;
  width: 14px; height: 14px;
  border-top: 2px solid var(--red);
  border-right: 2px solid var(--red);
  transform: translateY(-50%) rotate(45deg);
  opacity: 0.65;
}
.smads__node em {
  font-style: normal;
  font-size: 0.66rem; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--red);
}
.smads__node span {
  display: grid; place-items: center;
  width: 50px; height: 50px;
  margin: 12px auto 14px;
  border-radius: 15px;
  background: linear-gradient(150deg, var(--navy), #1c2f63);
  color: #fff;
  box-shadow: 0 12px 26px rgba(13,27,62,0.26);
}
.smads__node h3 { font-family: var(--serif); font-size: 1.08rem; color: var(--navy); margin: 0 0 7px; }
.smads__node p { margin: 0; font-size: 0.87rem; color: var(--text-muted); }
.smads__split { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: center; }
.smads__targets { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 26px; }
.smads__targets span {
  font-size: 0.8rem; font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--navy);
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.smads__targets span:hover { transform: translateY(-3px); border-color: var(--red); color: var(--red); }
.smads__stores {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px;
  box-shadow: var(--shadow-md);
}
.smads__stores img { width: 100%; height: auto; display: block; border-radius: 10px; }
.smads__stores p {
  margin: 18px 0 0; text-align: center;
  font-size: 0.84rem; color: var(--text-muted);
}
@media (max-width: 1024px) {
  .smads__flow { grid-template-columns: repeat(2, 1fr); gap: 30px 26px; }
  .smads__node:nth-child(2)::after { display: none; }
}
@media (max-width: 900px) { .smads__split { grid-template-columns: 1fr; gap: 30px; } }
@media (max-width: 560px) {
  .smads__flow { grid-template-columns: 1fr; gap: 34px; }
  .smads__node::after { top: auto !important; bottom: -26px; right: 50% !important; transform: translateX(50%) rotate(135deg) !important; }
}


/* ---- Clickable calendar / feed cells are <button>: strip UA styling ---- */
.smcal__cell, .smwall__cell { padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; }
.smcal__cell--post, .smwall__cell { display: block; width: 100%; }
.smcal__cell--post:focus-visible, .smwall__cell:focus-visible { outline: 2px solid var(--red-soft); outline-offset: 2px; }

/* ---- Ads section on a white band (keeps the page rhythm alternating) ---- */
.smads--light { background: var(--white); }
.smads--light .smads__node,
.smads--light .smads__stores { background: var(--cream); }
.smads--light .smads__targets span { background: var(--cream); }

/* ============================================================
   Compact hero variant — for pages whose hero carries a lot of
   copy plus a tall visual (Social Media Marketing). Everything
   is dialled down a step so the whole hero fits the viewport
   instead of being clipped by the section's overflow.
   ============================================================ */
.service-hero--compact { min-height: calc(100vh - 140px); min-height: calc(100svh - 140px); }
.service-hero--compact .service-hero__split { gap: 34px; align-items: center; }
.service-hero--compact .eyebrow { font-size: 0.72rem; padding: 6px 13px; margin-bottom: 12px; }
.service-hero--compact .h2 {
  font-size: clamp(1.45rem, 1.05rem + 1.35vw, 2.15rem);
  line-height: 1.14;
  margin-bottom: 10px;
}
.service-hero--compact .lead {
  font-size: 0.92rem;
  max-width: 50ch;
  margin-bottom: 12px;
}
.service-hero--compact .service-hero__cta { gap: 11px; margin-top: 14px; }
.service-hero--compact .btn--lg { padding: 11px 22px; font-size: 0.9rem; }
.service-hero--compact .service-hero__chips { gap: 7px; margin-top: 13px; }
.service-hero--compact .service-hero__chip { padding: 7px 12px; font-size: 0.78rem; gap: 6px; }

/* Smaller phone so the art column stops driving the hero height */
.smhero__art { width: min(244px, 100%); }
.smhero__days { top: -17px; right: 2px; gap: 4px; }
.smhero__days span { width: 30px; height: 30px; border-radius: 10px; font-size: 0.64rem; }
.smhero__bar { padding: 12px 11px 9px; }
.smhero__bar i { width: 24px; height: 24px; }
.smhero__bar b { font-size: 0.72rem; }
.smhero__ui { gap: 10px; padding: 10px 12px 13px; }
.smhero__ui b { font-size: 0.62rem; }
.smhero__chip { padding: 7px 12px; font-size: 0.72rem; gap: 6px; }
.smhero__chip--a { top: 13%; left: -30px; }
.smhero__chip--b { top: 47%; right: -26px; }
.smhero__chip--c { bottom: 11%; left: -24px; }

/* Short laptop viewports: shrink another step rather than crop */
@media (min-width: 861px) and (max-height: 820px) {
  .service-hero--compact .h2 { font-size: clamp(1.35rem, 1rem + 1.1vw, 1.85rem); }
  .service-hero--compact .lead { font-size: 0.88rem; max-width: 46ch; }
  .service-hero--compact .service-hero__chip { padding: 6px 10px; font-size: 0.73rem; }
  .smhero__art { width: min(206px, 100%); }
  .smhero__days span { width: 27px; height: 27px; font-size: 0.6rem; }
  .smhero__chip { padding: 6px 10px; font-size: 0.68rem; }
}
@media (min-width: 861px) and (max-height: 700px) {
  .service-hero--compact { min-height: 0; padding: 46px 0; }
  .smhero__art { width: min(180px, 100%); }
}


/* ---- Form failure notices (Formspree unreachable / rejected) ---- */
.contact__error {
  margin: 0;
  padding: 14px 18px;
  background: rgba(176,30,46,0.12);
  border: 1px solid rgba(176,30,46,0.42);
  color: #b01e2e;
  border-radius: 10px;
  font-weight: 600;
  text-align: center;
}
.contact__error a { text-decoration: underline; }
.promo__error {
  margin: 10px 0 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--red);
  text-align: center;
}
/* A submit button mid-request stays put but reads as unavailable. */
.btn[aria-busy="true"] { opacity: 0.72; cursor: progress; }
.btn:disabled { pointer-events: none; }