@charset "UTF-8";
/* ==========================================================================
   NSW Book Publishers — service pages
   Shared by service.php (all 8 services) and services.php (the index).
   ========================================================================== */

/* --- Breadcrumb ----------------------------------------------------------- */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--muted);
}
.crumbs a { transition: color var(--dur) var(--ease); }
.crumbs a:hover { color: var(--red-500); }
.crumbs svg { width: 12px; height: 12px; opacity: .5; }
.crumbs [aria-current] { color: var(--navy-700); }

/* ==========================================================================
   Service page layout — ported from
   queenslandbookpublishers.com.au/book-cover-design
   ========================================================================== */

/* .qbp-container / .qbp-row / .qbp-col and the .sec-h2 / .sec-p / .btn-dark-pill
   type scale now live in components.css — they are shared with the homepage. */

/* --- Banner --------------------------------------------------------------- */
.publishing-banner-section { padding: 50px 0 70px; }
.banner__title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: 1.15;
  color: #1F1E24;
  margin: 0;
}
.banner__lede {
  font-family: var(--font-sans);
  font-size: var(--fs-lede);
  font-weight: 400;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 24px 0 16px;
}
.banner__reviews {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}
.banner__review-logo { max-height: 42px; width: auto; }
.banner__reviews .art-placeholder { width: 110px; height: 34px; aspect-ratio: auto; font-size: 9px; padding: 2px; }
.banner__img { width: 100%; height: auto; }

/* Dark gradient pill — the same one used on the homepage differentiator. */
.publishing-banner-section .btn-dark-pill,
.service-about .btn-dark-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 220px;
  padding: 12px 30px;
  border-radius: 50px;
  background: linear-gradient(to top, var(--navy-grad-a), var(--navy-grad-b));
  font-family: var(--font-sans);
  font-size: var(--fs-h5);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .02em;
  color: #fff;
  transition: transform .3s, box-shadow .3s;
}
.publishing-banner-section .btn-dark-pill:hover,
.service-about .btn-dark-pill:hover { transform: scale(1.04); box-shadow: 0 12px 30px rgba(14, 26, 69, .4); }

/* .brand-area__title moved to components.css — the homepage logo strip
   uses it too and does not load service.css. */

/* --- About split ---------------------------------------------------------- */
.service-about { background: var(--bg-light); padding: 70px 0; }
.service-about__media { order: 1; }
.service-about__copy  { order: 2; }
.service-about__img { width: 100%; height: auto; }
.service-about .sec-p { margin-bottom: 26px; }
@media (max-width: 767.98px) {
  .service-about__media { order: 2; margin-top: 28px; }
  .service-about__copy  { order: 1; }
}

/* --- Types grid ----------------------------------------------------------- */
.services-section {
  padding: 80px 20px;
  background: #16265C;
  color: #fff;
}
.services-section__head { text-align: center; max-width: 900px; margin: 0 auto 40px; }
.services-section__head h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 8px;
}
.services-section__head p {
  font-family: var(--font-sans);
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: rgba(255, 255, 255, .82);
  margin: 0;
}

.service-row { padding: 15px; border-radius: 12px; }
.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-radius: 12px;
  overflow: hidden;
}
.crd {
  display: flex;
  flex-direction: column;
  padding: 32px;
  border-right: 1px solid rgba(255, 255, 255, .08);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
/* Trim the rules on the closing column and final row. */
.crd:nth-child(4n) { border-right: 0; }
.crd:nth-last-child(-n+4) { border-bottom: 0; }
.crd h4 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 8px;
}
.crd p {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: rgba(255, 255, 255, .78);
  margin: 0 0 20px;
}
.crd-arrow {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  margin-top: auto;
  border-radius: 50%;
  background: #2A3C78;
  color: #fff;
  transition: background .25s, transform .25s;
}
.crd-arrow svg { width: 16px; height: 16px; }
.crd-arrow:hover { background: var(--red-500); transform: translateX(3px); }

@media (max-width: 1199px) { .service-grid { grid-template-columns: repeat(2, 1fr); }
  .crd:nth-child(4n) { border-right: 1px solid rgba(255,255,255,.08); }
  .crd:nth-child(2n) { border-right: 0; }
  .crd:nth-last-child(-n+4) { border-bottom: 1px solid rgba(255,255,255,.08); }
  .crd:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 640px) { .service-grid { grid-template-columns: 1fr; }
  .crd { border-right: 0 !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; }
  .crd:last-child { border-bottom: 0 !important; }
}

/* --- Legacy hero (kept for services.php) ---------------------------------- */
.service-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 100%);
  padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(3rem, 1.5rem + 5vw, 5rem);
}
.service-hero__glow {
  position: absolute;
  right: -10%;
  top: -20%;
  width: min(680px, 65vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(201,162,39,.4), rgba(201,162,39,0) 64%);
  pointer-events: none;
}
.service-hero .container { position: relative; }

.service-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
}
@media (max-width: 900px) {
  .service-hero__grid { grid-template-columns: 1fr; }
  .service-hero__art { order: -1; max-width: 520px; }
}
.service-hero__title { margin-top: var(--sp-5); font-size: var(--fs-h1); }

.service-hero__abn {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--sp-3);
  align-items: start;
  max-width: 52ch;
  margin-top: var(--sp-6);
  font-size: var(--fs-small);
  color: var(--muted);
}
.service-hero__abn svg { width: 20px; height: 20px; margin-top: 2px; color: var(--red-500); }

.service-hero__art { position: relative; }
.service-hero__img,
.service-hero__art .art-placeholder {
  width: 100%;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  object-fit: cover;
}
.service-hero__icon {
  position: absolute;
  left: -18px;
  bottom: -18px;
  display: grid;
  place-items: center;
  width: 88px; height: 88px;
  border-radius: 24px;
  background: var(--navy-800);
  color: #fff;
  box-shadow: var(--sh-lg);
}
.service-hero__icon svg { width: 40px; height: 40px; }
@media (max-width: 560px) {
  .service-hero__icon { width: 64px; height: 64px; left: -10px; bottom: -10px; border-radius: 18px; }
  .service-hero__icon svg { width: 30px; height: 30px; }
}

.service-hero--index { padding-bottom: clamp(2.5rem, 1.5rem + 4vw, 4rem); }

/* Photograph behind the services hero, same treatment as the homepage: the
   image is the top background layer with the original cream wash beneath, so
   a missing file degrades to the previous look. */
.service-hero--index {
  background-image:
    url("../img/hero/services-bg.webp"),
    linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 100%);
  background-size: cover, auto;
  background-position: center 52%, 0 0;
  background-repeat: no-repeat;
}
/* This hero centres its copy, so the veil is centre-weighted rather than
   left-weighted like the homepage. */
.service-hero--index::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(125% 105% at 50% 45%,
      rgba(255, 255, 255, .96) 0%,
      rgba(255, 255, 255, .92) 52%,
      rgba(255, 255, 255, .70) 80%,
      rgba(255, 255, 255, .52) 100%);
}
/* Keep the copy and the decorative orb above the veil. */
.service-hero--index > .container { position: relative; z-index: 1; }
.service-hero--index .service-hero__glow { z-index: 0; }

/* --- Review badges -------------------------------------------------------- */
.review-badges {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  margin-top: clamp(2rem, 1rem + 3vw, 3.5rem);
  padding: var(--sp-5);
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.review-badges__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-inline: var(--sp-4);
  text-align: center;
}
.review-badges__item + .review-badges__item { border-left: 1px solid var(--line); }
.review-badges__name { font-size: var(--fs-micro); font-weight: 700; color: var(--navy-700); }
.review-badges__score { font-size: var(--fs-micro); color: var(--muted); }
@media (max-width: 720px) {
  .review-badges { grid-template-columns: repeat(2, 1fr); }
  .review-badges__item { border-left: 0 !important; }
}

/* --- Feature cards -------------------------------------------------------- */
.feature-card { position: relative; background: #fff; }
.feature-card__num {
  display: block;
  margin-bottom: var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--red-100);
  line-height: 1;
}
.feature-card:hover .feature-card__num { color: var(--red-500); transition: color var(--dur) var(--ease); }

/* --- Differentiator panels ------------------------------------------------ */
.diff-panel {
  padding: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  background: var(--navy-800);
  border-radius: var(--r-xl);
  color: rgba(255, 255, 255, .78);
}
.diff-panel:nth-child(2) { background: var(--red-600); }
.diff-panel .h3 { color: #fff; }
.diff-panel__icon {
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  margin-bottom: var(--sp-5);
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
}
.diff-panel__icon svg { width: 28px; height: 28px; }

/* --- Inline form band ----------------------------------------------------- */
.inline-form { background: var(--cream); }
.inline-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: start;
}
@media (max-width: 940px) { .inline-form__grid { grid-template-columns: 1fr; } }
.inline-form__grid > * { min-width: 0; }

.inline-form__points { display: grid; gap: var(--sp-3); }
.inline-form__points li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--sp-3);
  align-items: start;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--navy-700);
}
.inline-form__points svg { width: 20px; height: 20px; margin-top: 2px; color: var(--red-500); }

.inline-form__contact { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.inline-form__contact a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--navy-700);
  transition: color var(--dur) var(--ease);
}
.inline-form__contact a:hover { color: var(--red-500); }
.inline-form__contact svg { width: 16px; height: 16px; color: var(--red-500); }

/* --- Related services ----------------------------------------------------- */
.related-card { background: #fff; }
.related-card .link-arrow { pointer-events: none; }

/* ==========================================================================
   Author pain-point band
   Ported from australianpublishingpress.com.au/publishing (.strunglingwrp).
   Geometry follows the reference — 70px band, 45px tick pills on a 15px/9px
   rhythm, 54px buttons — while the palette and type come from our tokens.
   ========================================================================== */
.struggles {
  background: var(--navy-900);
  padding: 70px 0;
}
.struggles__container {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: 15px;
}

.struggles__head { text-align: center; }
.struggles__title {
  max-width: 777px;          /* the reference wraps the question onto two lines */
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.11;
  letter-spacing: -.015em;
  color: #fff;
}
.struggles__lede {
  margin: 12px 0 0;
  font-family: var(--font-sans);
  font-size: var(--fs-h5);
  line-height: 1.5;
  color: rgba(255, 255, 255, .82);
}

/* Pills wrap and stay centred; the reference sets them 9px apart on a 15px
   baseline, which lands the rows 60px apart. */
.struggles__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px 9px;
  max-width: 1110px;
  margin: 20px auto 0;
  padding: 0;
  list-style: none;
}
.struggles__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 45px;
  /* The reference reserves the tick's space in the left padding rather than
     letting the icon add width, which is what keeps the pills at 177px and
     the rows at 5 / 5 / 1. */
  padding: 10px 30px 10px 36px;
  border-radius: 6px;
  background: var(--navy-800);
  font-family: var(--font-sans);
  font-size: var(--fs-h5);
  font-weight: 400;
  line-height: 1.4;
  color: #fff;
}
.struggles__tick {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--lilac);
}

/* Shared CTA pair — the reference repeats the same "Let's Get Started" +
   phone buttons in several bands, so they live here rather than per section.
   --on-dark flips the ghost button for navy backgrounds. */
.svc-cta { display: flex; flex-wrap: wrap; gap: 19px; }
.svc-cta--center { justify-content: center; }
.svc-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 14px 40px;
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.5;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.svc-cta__btn--fill {
  background: var(--red-500);
  border: 1px solid var(--red-500);
  color: #fff;
}
.svc-cta__btn--fill:hover { background: var(--red-600); border-color: var(--red-600); transform: translateY(-2px); }
.svc-cta__btn--ghost {
  background: transparent;
  border: 1px solid rgba(27, 46, 99, .3);
  color: var(--navy-700);
}
.svc-cta__btn--ghost:hover { border-color: var(--navy-700); background: rgba(27, 46, 99, .06); transform: translateY(-2px); }
.svc-cta--on-dark .svc-cta__btn--ghost { border-color: rgba(255, 255, 255, .3); color: #fff; }
.svc-cta--on-dark .svc-cta__btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }

.struggles .svc-cta { padding-top: 30px; }

@media (max-width: 767px) {
  .struggles { padding: 50px 0; }
  .struggles__item { padding: 10px 16px 10px 34px; font-size: var(--fs-body); }
  .svc-cta__btn { padding: 14px 28px; }
  .svc-cta > * { flex: 1 1 100%; }
}

/* ==========================================================================
   Client review carousel
   Ported from australianpublishingpress.com.au/publishing (section.testimonial):
   50px band, 315px cards on a 55px gap, 70px avatar disc overhanging the card
   by 35px. Palette and type are ours; stars reuse the site's red rating colour.
   ========================================================================== */
.creviews {
  background: var(--bg-light);
  padding: 50px 0;
}
.creviews__container {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: 15px;
}

.creviews__head { text-align: center; }
.creviews__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.11;
  letter-spacing: -.015em;
  color: var(--navy-700);
}
/* Sits on the text baseline and scales with the heading. */
.creviews__heart {
  display: inline-block;
  vertical-align: -.18em;
  width: 1.15em;
  height: 1.15em;
  margin: 0 .12em;
  color: var(--red-500);
}
.creviews__heart svg { width: 100%; height: 100%; stroke-width: 1.4; }

.creviews__lede {
  max-width: 722px;
  margin: 12px auto 0;
  font-family: var(--font-sans);
  font-size: var(--fs-h5);
  line-height: 1.5;
  color: var(--muted);
}

/* The reference runs three 315px cards 55px apart, so the shell is capped at
   their combined width and centred rather than filling the page container. */
.creviews__carousel {
  position: relative;
  max-width: 1055px;
  margin: 40px auto 0;
}
.creviews__track { --per-view: 3; --slide-gap: 55px; }
/* carousel__viewport clips, and the avatar overhangs the card by 35px — the
   slide carries that much top padding so the disc stays inside the clip. */
.creviews__item { padding-top: 35px; }

.creviews__card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 315px;
  padding: 30px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 5px 6px 30px rgba(14, 26, 69, .07);
}
.creviews__avatar {
  position: absolute;
  top: -35px;
  left: 25px;
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--navy-700);
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
  box-shadow: 8px 9px 30px rgba(14, 26, 69, .16);
}
.creviews__name {
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.3;
  color: var(--navy-700);
}
.creviews__body {
  display: -webkit-box;
  -webkit-line-clamp: 6;      /* the reference scrolls the overflow; clamping
                                 keeps the cards a matching height instead */
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
  margin: 12px 0 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--muted);
}
.creviews__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.creviews__stars { display: inline-flex; gap: 2px; color: var(--gold-600); }
.creviews__stars svg { width: 14px; height: 14px; }
.creviews__source {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--muted);
}

/* 50px discs, as the reference. It offsets them asymmetrically (-60 / -40),
   which reads as a slick quirk rather than intent, so ours are symmetric. */
/* The reference navigates by arrows alone. The shared carousel JS emits one
   dot per slide rather than per page, so hiding them also avoids dots that
   clamp to the same position at the end of the run. */
.creviews .dots { display: none; }
.creviews__nav { width: 50px; height: 50px; background: var(--line); box-shadow: none; }
.creviews__nav:hover { background: var(--red-500); color: #fff; }
.creviews .carousel__nav--prev { left: -60px; }
.creviews .carousel__nav--next { right: -60px; }

.creviews__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 30px 0 0;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  color: var(--muted);
}
.creviews__summary strong { color: var(--navy-700); font-weight: 700; }

@media (max-width: 1199px) {
  .creviews__carousel { max-width: 100%; }
  .creviews__track { --per-view: 2; --slide-gap: 30px; }
  .creviews .carousel__nav--prev { left: -8px; }
  .creviews .carousel__nav--next { right: -8px; }
}
@media (max-width: 767px) {
  .creviews { padding: 40px 0; }
  .creviews__track { --per-view: 1; }
  .creviews__nav { width: 40px; height: 40px; }
}

/* ==========================================================================
   Genre / formats split
   Ported from australianpublishingpress.com.au/publishing (.secndwrpr):
   70px band, Bootstrap col-md-5 copy beside col-md-7 artwork.
   ========================================================================== */
.formats {
  background: var(--bg-light);
  padding: 70px 0;
}
.formats__container {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: 15px;
}
.formats__row {
  display: grid;
  grid-template-columns: 5fr 7fr;   /* the reference's col-md-5 / col-md-7 */
  gap: 40px;
  align-items: center;
}
.formats__row > * { min-width: 0; }

.formats__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.11;
  letter-spacing: -.015em;
  color: var(--navy-700);
}
.formats__para {
  margin: 22px 0 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--muted);
}
.formats__para--lede { font-size: var(--fs-h5); }
.formats__link {
  color: var(--red-500);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--dur) var(--ease);
}
.formats__link:hover { color: var(--red-600); }

.formats__cta { margin-top: 28px; }

.formats__media { position: relative; }
.formats__img,
.formats__media .art-placeholder { width: 100%; height: auto; }

@media (max-width: 991px) {
  .formats__row { grid-template-columns: 1fr; gap: 32px; }
  /* Artwork leads on narrow screens, as it does on the reference. */
  .formats__media { order: -1; }
}
@media (max-width: 767px) {
  .formats { padding: 50px 0; }
}

/* ==========================================================================
   Recent book releases — category tabs + per-tab carousel
   Header and tab row follow australianpublishingpress.com.au/publishing; the
   cards are the site's own .book-card (components.css), matching the homepage
   portfolio carousel rather than the reference's bare 3D mockups.
   ========================================================================== */
.releases {
  background: var(--lavender);
  padding: 50px 0;
  border-radius: 0 0 20px 20px;
}
.releases__container {
  width: 100%;
  max-width: 1330px;
  margin-inline: auto;
  padding-inline: 15px;
}

.releases__head { text-align: center; }
.releases__head .eyebrow-pill { margin-bottom: 14px; }
.releases__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.11;
  letter-spacing: -.015em;
  color: var(--navy-700);
}
.releases__lede {
  max-width: 720px;
  margin: 12px auto 0;
  font-family: var(--font-sans);
  font-size: var(--fs-h5);
  line-height: 1.5;
  color: var(--muted);
}

/* Tab row — white chips, the active one filled navy. */
.releases__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}
.releases__tab {
  padding: 11px 18px;
  border: 1px solid rgba(27, 46, 99, .12);
  border-radius: 6px;
  background: #fff;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.4;
  color: var(--navy-700);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.releases__tab:hover { border-color: var(--navy-700); }
.releases__tab.is-active {
  background: var(--navy-700);
  border-color: var(--navy-700);
  color: #fff;
  box-shadow: 0 6px 18px -6px rgba(14, 26, 69, .45);
}

.releases__panels { margin-top: 34px; }
.releases__panel[hidden] { display: none; }

/* Same slide rhythm as the homepage portfolio carousel. */
.releases__track { --per-view: 4; --slide-gap: 10px; }
@media (max-width: 1199px) { .releases__track { --per-view: 3; } }
@media (max-width: 900px)  { .releases__track { --per-view: 2; } }
@media (max-width: 575px)  { .releases__track { --per-view: 1; } }
.releases__slide { display: flex; justify-content: center; }
.releases__slider .dots { display: none; }
/* The slider is full-bleed, so the shared nav's negative offset would hang off
   the page and add a horizontal scrollbar. Inset the arrows over the outer
   cards instead — the homepage portfolio hides them for the same reason, but
   here there are more titles than fit, so they need to stay reachable. */
.releases .carousel__nav--prev { left: 10px; }
.releases .carousel__nav--next { right: 10px; }

@media (max-width: 767px) {
  .releases { padding: 40px 0; }
  .releases__tabs { gap: 8px; }
  .releases__tab { padding: 9px 13px; font-size: var(--fs-micro); }
}

/* ==========================================================================
   Publishing services we offer
   Six compact cards in one row; round icon badges alternate navy / red.
   ========================================================================== */
.offer {
  background: var(--white);
  padding: 60px 0;
}
.offer__container {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: 15px;
}

.offer__head { text-align: center; margin-bottom: 34px; }
.offer__title {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.11;
  letter-spacing: -.015em;
  color: var(--navy-700);
}
.offer__lede {
  max-width: 680px;
  margin: 10px auto 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--muted);
}

.offer__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.offer__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 26px 18px 28px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  text-align: center;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.offer__card:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--sh-md);
}

.offer__badge {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  border-radius: 50%;
  color: #fff;
}
.offer__badge svg { width: 24px; height: 24px; }
.offer__badge--navy { background: var(--navy-700); }
.offer__badge--red  { background: var(--red-500); }

.offer__card-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  font-weight: 700;
  line-height: 1.3;
  color: var(--navy-700);
}
.offer__card-copy {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--muted);
}

@media (max-width: 1199px) { .offer__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  { .offer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .offer__grid { grid-template-columns: 1fr; } }
@media (max-width: 767px)  { .offer { padding: 44px 0; } }

/* ==========================================================================
   Genres we publish — three tinted cards with numbered genre lists
   Card tints use our own lavender / cream / slate rather than the mockup's
   blue-gold-green, per the sitewide palette.
   ========================================================================== */
.gcards {
  background: var(--white);
  padding: 60px 0;
}
.gcards__container {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: 15px;
}

.gcards__head { text-align: center; margin-bottom: 34px; }
.gcards__head .eyebrow-pill { margin-bottom: 14px; text-transform: uppercase; letter-spacing: .1em; }
.gcards__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.11;
  letter-spacing: -.015em;
  color: var(--navy-700);
}
.gcards__lede {
  max-width: 700px;
  margin: 12px auto 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--muted);
}

.gcards__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.gcards__card {
  min-width: 0;
  padding: 26px 26px 30px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.gcards__card--lilac { background: #FBF5EA; border-color: #F3E7D2; }
.gcards__card--cream { background: var(--cream); border-color: #EADFCB; }
.gcards__card--slate { background: var(--slate); border-color: #E9E2D6; }

.gcards__card-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.gcards__badge {
  display: grid;
  place-items: center;
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--navy-700);
  color: #fff;
}
.gcards__card--cream .gcards__badge { background: var(--red-500); }
.gcards__badge svg { width: 26px; height: 26px; }
.gcards__card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--navy-700);
}

.gcards__list { margin: 0; padding: 0; list-style: none; counter-reset: none; }
.gcards__list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-soft);
}
.gcards__list li + li { margin-top: 12px; }
.gcards__num {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--red-500);
  font-size: var(--fs-nano);
  font-weight: 700;
  line-height: 1;
  color: #fff;
}

@media (max-width: 991px) { .gcards__grid { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; } }
@media (max-width: 767px) {
  .gcards { padding: 44px 0; }
  .gcards__card { padding: 22px 20px 26px; }
  .gcards__badge { flex-basis: 48px; width: 48px; height: 48px; border-radius: 12px; }
  .gcards__badge svg { width: 22px; height: 22px; }
}

/* ==========================================================================
   From Manuscript to Market — five steps in a bordered panel
   ========================================================================== */
.pplan {
  background: var(--bg-light);
  padding: 60px 0;
}
.pplan__container {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: 15px;
}

.pplan__head { text-align: center; margin-bottom: 30px; }
.pplan__head .eyebrow-pill { margin-bottom: 16px; text-transform: uppercase; letter-spacing: .1em; }

/* Heading sits between two rules, each carrying a dot at its inner end. */
.pplan__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin: 0;
}
.pplan__title-text {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.11;
  letter-spacing: -.015em;
  color: var(--navy-700);
}
.pplan__title-accent { color: var(--red-500); }
.pplan__rule {
  position: relative;
  flex: 1 1 40px;
  max-width: 210px;
  height: 1px;
  background: var(--line);
}
.pplan__rule::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lilac);
  transform: translateY(-50%);
}
.pplan__rule:first-child::before  { right: 0; }
.pplan__rule:last-of-type::before { left: 0; }

.pplan__panel {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 30px;
  margin: 0;
  padding: 32px 26px 34px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  list-style: none;
}
.pplan__step { position: relative; min-width: 0; }

/* Chevron connector, level with the badge. */
.pplan__step:not(:last-child)::after {
  content: "»";
  position: absolute;
  top: 14px;
  left: calc(100% + 6px);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: var(--red-500);
}

.pplan__top { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.pplan__badge {
  display: grid;
  place-items: center;
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  color: #fff;
}
.pplan__badge svg { width: 32px; height: 32px; }
.pplan__badge--navy { background: var(--navy-700); }
.pplan__badge--red  { background: var(--red-500); }

.pplan__label { min-width: 0; }
.pplan__num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1;
  color: var(--red-500);
}
.pplan__step-title {
  margin: 8px 0 0;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.3;
  color: var(--navy-700);
}
.pplan__step-title::after {
  content: "";
  display: block;
  width: 58px;
  height: 2px;
  margin-top: 8px;
  border-radius: 2px;
  background: var(--lilac);
}
.pplan__copy {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  line-height: 1.75;
  color: var(--muted);
}

@media (max-width: 1099px) {
  .pplan__panel { grid-template-columns: repeat(3, 1fr); gap: 30px 24px; }
  /* Connectors only read along an unbroken row; match the base rule's
     specificity or :not(:last-child) wins here. */
  .pplan__step:not(:last-child)::after { display: none; }
  .pplan__title { gap: 14px; }
  .pplan__rule { max-width: 90px; }
}
@media (max-width: 680px) { .pplan__panel { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .pplan__panel { grid-template-columns: 1fr; } }
@media (max-width: 767px) {
  .pplan { padding: 44px 0; }
  .pplan__panel { padding: 24px 18px 26px; }
  .pplan__rule { display: none; }
  .pplan__badge { flex-basis: 60px; width: 60px; height: 60px; }
  .pplan__badge svg { width: 26px; height: 26px; }
}

/* Additional text supplied in the service content brief. */
.banner__benefits { display:flex; flex-wrap:wrap; gap:10px 20px; margin:20px 0; padding:0; list-style:none; }
.banner__benefits li { color:var(--navy-700); font-size:var(--fs-small); }
.banner__benefits li span { color:var(--red-500); }
.struggles__list-heading { text-align:center; color:inherit; font-size:var(--fs-body); margin:24px 0 16px; }