/* ============================================================
   Crown Publishers UK — RESPONSIVE STYLES
   All @media query rules live here. Loaded after style.css.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .util,
  nav.top,
  .hero .eyebrow-pill,
  .hero .hero-title,
  .hero .hero-sub,
  .hero .hero-lede,
  .hero .trust-badges,
  .hero .hero-ctas,
  .hero-book img,
  .about-hero .eyebrow-pill,
  .about-hero h1,
  .about-hero p,
  .about-hero .about-hero-actions {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

@media (max-width: 1280px) {
  .nav-dd--wide { min-width: 460px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero .hero-video { display: none; }
  .hero:has(.hero-video) .hero-bg { background-image: url("../images/hero-background.webp"); }
}

@media (max-width: 991px) {
  .hero {
    padding: 56px 0 70px;
  }
  .hero-grid {
    min-height: auto;
  }
  .hero-copy {
    max-width: 100%;
    margin-bottom: 40px;
  }
  .hero-books {
    min-height: 480px;
  }
  .hero-book.hb-left {
    width: 32%;
    left: 4%;
  }
  .hero-book.hb-center {
    width: 40%;
  }
  .hero-book.hb-right {
    width: 35%;
    right: 2%;
  }
}

@media (max-width: 640px) {
  .hero {
    padding: 40px 0 60px;
  }
  .hero .container-xxl {
    padding: 0 20px;
  }
  .hero-title {
    gap: 0 10px;
    font-size: clamp(32px, 9vw, 44px);
  }
  .hero-sub {
    font-size: 18px;
  }
  .trust-badges {
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .trust-badges::-webkit-scrollbar { display: none; }
  .tb-img { height: 26px; flex-shrink: 0; }
  .tb-mark {
    font-size: 18px;
  }
  .tb-name {
    font-size: 15px;
  }
  .tb-bark .tb-name {
    font-size: 17px;
  }
  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .hero-ctas .btn {
    width: 100%;
    justify-content: center;
  }
  .hero-books {
    display: none;
    min-height: 380px;
    transform: scale(0.92);
  }
}

@media (max-width: 1100px) {
  .pkg-head { grid-template-columns: 1fr; gap: 22px; }
  .pkg-head-left h2 { font-size: 42px; }
  .pkg.feature { transform: none; }
  .pkg.feature:hover { transform: translateY(-6px); }
  .pkg-price-int { font-size: 52px; }
  .pkg-shell { padding: 16px 56px 40px; }
  .pkg-compare { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .pkc-stat + .pkc-stat::before { display: none; }
  .pkc-stat:nth-child(odd) + .pkc-stat::before {
    /* re-add divider between even pairs on 2-col layout */
    content: "";
    position: absolute;
    left: -6px; top: 14px; bottom: 14px;
    width: 1px;
    background: var(--rule);
  }
}

/* Packages: the slider now runs at every width. There are four tiers and three
   show at a time on desktop, so there is always something to slide to - which
   is why the grid override that used to sit here (and the Swiper teardown in
   includes/footer.php that went with it) has gone. Arrows and pagination stay
   visible on desktop for the same reason.

   Nothing here may set display:grid or transform:none on .swiper-wrapper:
   Swiper drives both, and overriding them freezes the slider mid-track. */
@media (min-width: 1100px) {
  .pkg-shell { padding-left: 56px; padding-right: 56px; }
}

@media (max-width: 720px) {
  .packages-sec { padding: 80px 0 90px; }
  .pkg-head-left h2 { font-size: 32px; }
  .pkg-compare { padding: 22px 16px; }
  .pkc-num { font-size: 30px; }
  /* Slider controls stack under the cards on a phone: dots first, then the two
     arrows side by side. The shell reserves the room they sit in.
     Both arrows are anchored from the left edge with a margin, so they are
     guaranteed to line up rather than depending on two separate calcs from
     opposite sides. */
  .pkg { padding: 32px 26px; }
  /* Feature rows are centred on desktop, where the cards sit side by side. On
     one narrow card a wrapped row reads as a ragged block, so range them left
     against the tick. */
  .pkg-list li { text-align: left; }
  .pkg-shell { padding: 12px 0 84px; }
  .pkg-pagination { margin-top: 26px; }
  .pkg-nav {
    width: 42px;
    height: 42px;
    top: auto;
    bottom: 0;
    right: auto;
    transform: none;
  }
  .pkg-prev { left: 50%; margin-left: -52px; }
  .pkg-next { left: 50%; margin-left: 10px; }
  .pkg-nav:hover { transform: scale(1.06); }
  /* The desktop rule re-applies translateY(-50%) when a button is disabled,
     which lifted the greyed-out arrow half its height above the other one. */
  .pkg-nav.swiper-button-disabled { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ah-grid,
  .ah-glow,
  .ah-shape,
  .ah-icon,
  .ah-dot,
  .ah-scan { animation: none; }
  .ah-shape { opacity: .55; }
}

@media (max-width: 1100px) {
  .about-hero-inner h1 { font-size: 48px; }
  .promise-grid,
  .ma-grid { grid-template-columns: 1fr; gap: 48px; }
  .promise-side { position: static; }
  .ma-stat { max-width: 460px; margin: 0 auto; }
  .special-grid { grid-template-columns: repeat(2, 1fr); }
  .promise-side h2,
  .ma-body h2,
  .special-sec .head h2 { font-size: 38px; }
}

@media (max-width: 720px) {
  .about-hero { padding: 80px 0 90px; }
  .about-hero-inner h1 { font-size: 36px; }
  .promise,
  .meet-authors,
  .special-sec { padding: 80px 0; }
  .promise-side h2,
  .ma-body h2,
  .special-sec .head h2 { font-size: 30px; }
  .ma-bignum { font-size: 64px; }
  .pcard { grid-template-columns: 50px 1fr; gap: 16px; padding: 24px 22px; }
  .pcard-ico { width: 50px; height: 50px; font-size: 22px; }
  .special-grid { grid-template-columns: 1fr; }
  .special-card { padding: 32px 24px 28px; }
}





@media (max-width: 768px) {

body{
  zoom: unset !important;
}

  .pf-page { padding: 80px 0 90px; }
  .pf-page .head h2 { font-size: 32px; }
  .pf-search input { padding: 14px 44px 14px 48px; font-size: 14px; }
  .pf-search > i.bi { left: 18px; font-size: 16px; }
  .pf-page-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
}

@media (max-width: 1100px) {
  .cb-grid { grid-template-columns: 1fr; }
  .cr-head h2 { font-size: 36px; }
  .cr-shell { padding: 0 44px; }
}

@media (max-width: 720px) {
  .contract-benefits { padding: 70px 0 80px; }
  .cb-col { padding: 32px 26px 28px; }
  .cb-head h2 { font-size: 22px; }
  .cb-list li { font-size: 15px; }
  .contract-reader { padding: 80px 0 90px; }
  .cr-head h2 { font-size: 28px; }
  .cr-shell { padding: 0 14px; }
  .cr-nav { width: 42px; height: 42px; }
  .cr-nav i.bi { font-size: 18px; }
  .cr-prev { left: -6px; } .cr-next { right: -6px; }
  .cr-page-frame { padding: 10px 10px 22px; }
  .cr-page-num { font-size: 9.5px; padding: 4px 10px; top: 18px; }
  .cr-page-zoom { width: 36px; height: 36px; bottom: 14px; right: 14px; }
}

@media (max-width: 1024px) {
  .bfc-sec { padding: 70px 0 80px; }
  .bfc-head h2 { font-size: 30px; }
  .bfc-slide { width: 200px; }
  .hero-lede{ max-width: 100%;}
  .trust-badges{ justify-content: center; }
  .hero-ctas { justify-content: center; }
}

@media (max-width: 640px) {
  .bfc-sec { padding: 60px 0 70px; }
  .bfc-head h2 { font-size: 24px; }
  .bfc-head { margin-bottom: 28px; }
  .bfc-slide { width: 160px; border-radius: 10px; }
  .bfc-overlay i.bi { width: 44px; height: 44px; font-size: 18px; }
  .bfc-swiper {
    -webkit-mask-image: none;
            mask-image: none;
  }
}

@media (max-width: 1100px) {
  .lbf-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .lbf-stat + .lbf-stat::before { display: none; }
  .lbf-video-grid { grid-template-columns: 1fr; gap: 40px; }
  .lbf-video-side h2 { font-size: 36px; }
  .lbf-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 720px) {
  .lbf-stats { padding: 40px 0; }
  .lbf-stat-num { font-size: 40px; }
  .lbf-video-sec, .lbf-gallery { padding: 80px 0; }
  .lbf-video-side h2,
  .lbf-gallery .head h2 { font-size: 30px; }
  .lbf-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .lbf-tile-overlay i.bi { width: 50px; height: 50px; font-size: 22px; }
  .lbf-cta-inner { flex-direction: column; text-align: center; }
  .lbf-cta-text { flex-direction: column; gap: 12px; }
  .lbf-cta-text h3 { font-size: 20px; }
}

@media (max-width: 420px) {
  .lbf-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1100px) {
  .contact-info h2 { font-size: 40px; }
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .contact-info { position: static; }
  .marquee-item { font-size: 18px; }
}

@media (max-width: 640px) {
  .contact-sec { padding: 80px 0 90px; }
  .contact-info h2 { font-size: 32px; }
  .contact-form { padding: 32px 24px; }
  .marquee-strip { padding: 18px 0; }
  .marquee-item { font-size: 16px; }
  .marquee-track { gap: 22px; }
  .ccard { padding: 16px 18px; grid-template-columns: 48px 1fr; gap: 14px; }
  .ccard-ico { width: 48px; height: 48px; font-size: 19px; }
  .ccard-value { font-size: 16px; }
  .contact-trust { gap: 12px 16px; font-size: 11.5px; }
}

@media (max-width: 1100px) {
  .split { padding: 90px 0; }
  .split-grid { gap: 56px; }
  .split-body h2 { font-size: 38px; }
}

@media (max-width: 860px) {
  .split { padding: 72px 0; }
  .split.tight { padding: 56px 0; }
  .split-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .split.reverse .split-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  /* On mobile, image always sits above body — overrides .reverse */
  .split.reverse .split-media,
  .split .split-media { order: 1; }
  .split.reverse .split-body,
  .split .split-body { order: 2; }

  /* Exception — the intro split on service pages. It follows the hero, whose
     own image is the last thing on screen, so keeping this one's image first
     stacked two photographs back to back with no copy between them. Copy
     first here, image after it. Service pages only: .split on the home and
     about pages keeps the order above. */
  .split.svc-split .split-body  { order: 1; }
  .split.svc-split .split-media { order: 2; }
  .split-body h2 { font-size: 30px; }
  .split-media::after { width: 70px; height: 70px; left: -10px; top: -10px; }
  .split.reverse .split-media::after { left: auto; right: -10px; }
  .split-badge {
    right: 12px;
    bottom: -14px;
    padding: 10px 16px;
    min-width: 0;
  }
  .split.reverse .split-badge { left: 12px; right: auto; }
  .split-badge .num { font-size: 24px; }
}

@media (max-width: 1100px) {
  .bsp-head h2 { font-size: 44px; }
  .bsp-grid { gap: 48px; }
}

@media (max-width: 860px) {
  .bsprocess { padding: 80px 0 90px; }
  .bsp-head h2 { font-size: 34px; }
  .bsp-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .bsp-image {
    position: static;
    top: auto;
    max-width: 460px;
    margin: 0 auto;
  }
  .bsp-steps { gap: 32px 24px; }
}

@media (max-width: 560px) {
  .bsp-head h2 { font-size: 28px; }
  .bsp-steps { grid-template-columns: 1fr; gap: 28px; }
  .bsp-icon { width: 50px; height: 50px; font-size: 21px; margin-bottom: 18px; }
  .bsp-step h3 { font-size: 19px; }
}

@media (max-width: 1100px) {
  .topgenres .head h2 { font-size: 40px; }
  .tg-grid { grid-template-columns: repeat(3, 1fr); }
  .genre-cols { gap: 18px; }
  .genre-col { padding: 26px 22px; }
  .genre-col-title { font-size: 22px; }
}

@media (max-width: 900px) {
  .genre-cols { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .topgenres { padding: 80px 0; }
  .topgenres .head h2 { font-size: 32px; }
  .tg-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .tg-tile { padding: 14px 16px; gap: 12px; }
  .tg-ico { width: 38px; height: 38px; font-size: 17px; }
  .tg-name { font-size: 14.5px; }
  .genre-col { padding: 24px 20px; }
  .genre-col-title { font-size: 20px; margin-bottom: 18px; }
  .genre-text { font-size: 15px; }
}

@media (max-width: 420px) {
  .tg-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1100px) {
  .portfolio-sec .head h2 { font-size: 42px; }
  .pf-slide { width: 340px; }
}

@media (max-width: 640px) {
  .portfolio-sec { padding: 80px 0 90px; }
  .portfolio-sec .head h2 { font-size: 32px; }
  .pf-slide { width: 260px; }
  /* The .pf-info / .pf-amazon rules that used to sit here went with the title
     row and Amazon button when the slides became bare covers. */
  .portfolio-swiper {
    -webkit-mask-image: none;
            mask-image: none;
  }
}

@media (max-width: 1100px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .services-sec .head h2 { font-size: 42px; }
}

@media (max-width: 640px) {
  .services-sec { padding: 80px 0; }
  .svc-grid { grid-template-columns: 1fr; gap: 18px; }
  .svc-card { padding: 30px 26px 28px; }
  .services-sec .head h2 { font-size: 32px; }
  .svc-icon { width: 56px; height: 56px; margin-bottom: 22px; }
  .svc-icon svg { width: 26px; height: 26px; }
  .svc-card h3 { font-size: 22px; }
}

@media (max-width: 1024px) {
  .vt-shell { padding: 0 48px; }
  .vt-card { width: 240px; }
}

@media (max-width: 640px) {
  .videotesti { padding: 80px 0; }
  .vt-shell { padding: 0 12px; }
  .vt-card { width: 220px; }
  .vt-nav { width: 40px; height: 40px; }
  .vt-nav i.bi { font-size: 18px; }
  .vt-prev { left: -4px; }
  .vt-next { right: -4px; }
  .videotesti .head h2 { font-size: 36px; }
}

@media (max-width: 1024px) {
  .rv-shell { padding: 0 48px; }
  .rv-head h2 { font-size: 42px; }
}

@media (max-width: 640px) {
  .rv-sec { padding: 50px 0; }
  .rv-head h2 { font-size: 30px; }
  .rv-shell { padding: 0 14px; }
  .rv-inner { padding: 28px 22px 22px; }
  .rv-quote { font-size: 74px; left: 26px; }
  .rv-title { font-size: 18px; }
  /* Only one card is on screen here, so it does not have to match the height of
     the others. Dropping the eight-line floor lets each card end where its
     review ends instead of leaving a block of empty white under a short one. */
  .rv-text {
    font-size: 14.5px;
    margin-bottom: 20px;
    min-height: 0;
    display: block;
    overflow: visible;
    -webkit-line-clamp: none;
  }
  .rv-avatar { width: 48px; height: 48px; font-size: 15px; }
  .rv-name { font-size: 16px; }
}

@media (max-width: 860px) {
  .ctabanner { padding: 90px 0; }
  .ctabanner h2 { font-size: 38px; }
  .ctabanner p { font-size: 16px; }
}

@media (max-width: 540px) {
  .ctabanner { padding: 72px 0; }
  .ctabanner h2 { font-size: 28px; line-height: 1.18; }
  .ctabanner p { font-size: 15px; margin-bottom: 30px; }
  .cta-pill { padding: 6px 6px 6px 22px; gap: 10px; font-size: 12px; }
  .cta-pill-arr { width: 32px; height: 32px; }
  .ctabanner-actions { gap: 12px; }
}

@media (max-width: 1280px) {
  .wrap {
    padding: 0 32px;
  }
  .navlinks {
    gap: 2px;
    font-size: 13.5px;
  }
  .navlinks a {
    padding: 8px 10px;
  }
  .nav-cta {
    padding: 10px 16px;
    font-size: 13px;
  }
  .hero h1 {
    font-size: 56px;
  }
  .sec-head h2 {
    font-size: 50px;
  }
}

@media (max-width: 1100px) {
  /* Hide desktop nav links + CTA, show hamburger */
  .navlinks {
    display: none;
  }
  .navactions .nav-cta {
    display: none;
  }
  .navtoggle {
    display: flex;
  }
  nav.top .wrap {
    height: 74px;
  }
  .util .right .tag {
    display: none;
  }
  .partners-row {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px 20px;
  }
  .hero h1 {
    font-size: 48px;
  }
  .sec-head h2 {
    font-size: 44px;
  }
}

@media (max-width: 1024px) {
  .wrap {
    padding: 0 24px;
  }

  .hero {
    padding: 48px 0 40px;
  }
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hero h1 {
    font-size: 46px;
  }
  .hero h1.sub {
    font-size: 22px;
  }
  .books {
    height: 480px;
  }
  .hero-stats .wrap {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 0;
  }
  .hstat {
    padding: 14px 18px;
  }
  .hstat:nth-child(2) {
    border-right: none;
  }

  .genres .head h2,
  .about .right h2,
  .talk .head h2,
  .portfolio .head h2,
  .faq-left h2 {
    font-size: 38px;
  }
  .genre-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .about {
    padding: 80px 0;
  }
  .about .grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .about .ms {
    padding: 36px 28px;
  }

  .trust {
    padding: 48px 0;
  }
  .trust .wrap {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .trust .head {
    grid-column: span 2;
    border-right: none;
    padding-right: 0;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }

  .sec {
    padding: 80px 0;
  }
  .sec-head {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 40px;
  }
  .sec-head h2 {
    font-size: 36px;
  }
  .sec-head .desc {
    text-align: left;
    max-width: none;
  }
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .process {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .process-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .process-left {
    position: static;
  }
  .book-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .portfolio {
    padding: 80px 0;
  }
  .pkg-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .pkg.feature {
    transform: none;
  }

  .testi-grid {
    grid-template-columns: repeat(6, 1fr);
  }
  .tcard.a {
    grid-column: span 6;
  }
  .tcard.b,
  .tcard.c,
  .tcard.d,
  .tcard.e,
  .tcard.f {
    grid-column: span 3;
  }

  .faq-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .faq-left {
    position: static;
  }

  .bigcta {
    padding: 80px 0 64px;
  }
  .bigcta h2 {
    font-size: 60px;
  }
  .bigcta .wrap {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .bigcta .ghost {
    font-size: 420px;
  }
  footer.site-footer {
    padding: 64px 0 28px;
  }
  footer.site-footer .top {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-bottom: 48px;
  }
  footer.site-footer .brandcol {
    grid-column: span 2;
  }
}

@media (max-width: 991.98px) {
  .hero-grid.row {
    min-height: auto;
  }
  .hero-copy {
    text-align: center;
  }
  .hero .lede {
    margin-left: auto;
    margin-right: auto;
  }
  .hero .ctas,
  .hero .badges {
    justify-content: center;
  }
  .hero-books {
    min-height: 480px;
  }
}

@media (max-width: 768px) {
  .wrap {
    padding: 0 20px;
  }
  .util {
    font-size: 12px;
  }
  .util .wrap {
    min-height: 0;
    gap: 14px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .util .left {
    gap: 14px;
  }
  .util-email {
    display: none;
  }
  nav.top .wrap {
    height: 72px;
  }
  .brand img {
    height: 56px;
  }

  .hero {
    padding: 40px 0 32px;
  }
  .hero .cloud {
    width: 700px;
    height: 540px;
    right: -200px;
    top: 0;
  }
  .hero h1 {
    font-size: 38px;
  }
  .hero h1.sub {
    font-size: 20px;
  }
  .hero .lede {
    font-size: 15px;
  }
  .books {
    height: 420px;
    max-width: 560px;
    margin: 0 auto;
  }
  .hero-book.b1 {
    --tx: -124%;
    --ty: -45%;
    width: 180px;
    height: 260px;
  }
  .hero-book.b2 {
    --tx: -50%;
    --ty: -52%;
    width: 220px;
    height: 340px;
  }
  .hero-book.b3 {
    --tx: 31%;
    --ty: -44%;
    width: 185px;
    height: 285px;
  }
  .books .badge-circle {
    right: 6px;
    bottom: 18px;
    width: 96px;
    height: 96px;
  }
  .books .plane {
    right: 18px;
    top: 18px;
    width: 42px;
    height: 42px;
  }
  .hero .ctas {
    gap: 10px;
  }
  .hero .ctas .btn {
    padding: 12px 20px;
    font-size: 13.5px;
  }

  .hero .badges {
    gap: 14px;
  }
  .hero .badges .b {
    flex-basis: 100%;
  }
  .hero .badges .b + .b {
    padding-left: 0;
    border-left: none;
  }

  .genres,
  .talk {
    padding: 72px 0;
  }
  .genres .head {
    margin-bottom: 40px;
  }
  .genres .head h2,
  .about .right h2,
  .talk .head h2,
  .portfolio .head h2,
  .faq-left h2 {
    font-size: 32px;
  }
  .genres .head p,
  .talk .head p,
  .portfolio .head p {
    font-size: 14px;
  }
  .gcard {
    padding: 32px 24px 28px;
  }

  .about .ms {
    padding: 32px 24px;
  }
  .about .ms h3 {
    font-size: 30px;
  }
  .about .right h2 {
    font-size: 32px;
  }

  .trust .wrap {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .trust .head {
    grid-column: span 1;
  }
  .stat .num {
    font-size: 44px;
  }

  .sec {
    padding: 64px 0;
  }
  .sec-head h2 {
    font-size: 30px;
  }
  .services-grid {
    grid-template-columns: 1fr;
  }
  .svc {
    min-height: auto;
    padding: 28px 24px;
  }
  .svc h3 {
    font-size: 26px;
    margin-top: 20px;
  }

  .step {
    grid-template-columns: 48px 1fr;
    gap: 14px;
    padding: 20px 0;
  }
  .step .stepnum {
    font-size: 32px;
  }
  .step h4 {
    font-size: 18px;
  }

  .book-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .pcard {
    flex: 0 0 220px;
  }

  .testi-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .tcard.a,
  .tcard.b,
  .tcard.c,
  .tcard.d,
  .tcard.e,
  .tcard.f {
    grid-column: span 1;
  }
  .tcard {
    padding: 28px 24px;
  }
  .tcard.a h4 {
    font-size: 22px;
  }
  .tcard.f h4 {
    font-size: 19px;
  }

  .pkg {
    padding: 28px 24px;
  }
  .pkg h3 {
    font-size: 28px;
  }
  .partners-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }

  .faq-item summary {
    font-size: 16px;
    padding: 18px 0;
    gap: 10px;
  }
  .faq-item .qnum {
    width: 28px;
    font-size: 10px;
  }
  .faq-item .answer {
    padding-left: 28px;
    font-size: 14px;
  }

  .bigcta {
    padding: 64px 0 48px;
  }
  .bigcta h2 {
    font-size: 38px;
  }
  .bigcta .lede {
    font-size: 16px;
  }
  .bigcta .ghost {
    font-size: 240px;
    bottom: -80px;
  }
  .bigcta .panel {
    padding: 24px 20px;
  }
  .bigcta .panel h4 {
    font-size: 22px;
  }

  footer.site-footer .top {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  footer.site-footer .brandcol {
    grid-column: span 1;
  }
  footer.site-footer .bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .util .wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .util .left {
    gap: 14px;
    flex-wrap: wrap;
  }
  .hero h1 {
    font-size: 32px;
  }
  .hero h1.sub {
    font-size: 18px;
  }
  .books {
    height: 330px;
    transform: none;
    max-width: 360px;
  }
  .hero-book.b1 {
    --tx: -110%;
    --ty: -44%;
    width: 140px;
    height: 205px;
  }
  .hero-book.b2 {
    --tx: -50%;
    --ty: -52%;
    width: 168px;
    height: 260px;
  }
  .hero-book.b3 {
    --tx: 18%;
    --ty: -42%;
    width: 140px;
    height: 218px;
  }
  .books .badge-circle {
    width: 78px;
    height: 78px;
    right: 0;
    bottom: 12px;
  }
  .badge-circle b {
    font-size: 17px;
  }
  .badge-circle span {
    font-size: 9px;
  }
  .books .plane {
    display: none;
  }
  .hero .ctas {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .hero .ctas .btn {
    width: 100%;
  }
  .hero-stats .wrap {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .hstat {
    border-right: none;
    border-bottom: 1px solid #e5dfcd;
    padding: 18px 0;
  }
  .hstat:last-child {
    border-bottom: none;
  }
  .partners-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1100px) {
  .catalogue-grid { grid-template-columns: repeat(3, 1fr); }
  .upcoming-grid { grid-template-columns: repeat(2, 1fr); }
  .topcats-grid { grid-template-columns: repeat(2, 1fr); }
  .services-grid.services-six { grid-template-columns: repeat(2, 1fr); }
  .video-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .distrib-grid { gap: 32px; }
  .cost-grid { grid-template-columns: 1fr; gap: 40px; }
  .cost-left { position: static; }
  .whyback-grid { grid-template-columns: 1fr; gap: 48px; }
  .aboutus-grid { grid-template-columns: 1fr; gap: 48px; }
  .best-grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 768px) {
  .catalogue,
  .upcoming,
  .topcats,
  .cost,
  .whyback,
  .aboutus,
  .distrib,
  .videotesti,
  .blogs,
  .bestsec,
  .finalcta { padding: 80px 0; }

  .catalogue .head h2,
  .upcoming .head h2,
  .topcats .head h2,
  .distrib .head h2,
  .videotesti .head h2,
  .blogs .head h2 { font-size: 36px; }

  .cost-left h2,
  .wb-left h2,
  .au-right h2,
  .best-head h2,
  .finalcta h2 { font-size: 38px; }
  .au-card h3 { font-size: 30px; }

  .catalogue-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .upcoming-grid { grid-template-columns: repeat(2, 1fr); }
  .topcats-grid { grid-template-columns: 1fr; }
  .services-grid.services-six { grid-template-columns: 1fr; }
  .video-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .distrib-grid { grid-template-columns: 1fr; }
  .partners-row.partners-row-5 { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .bf-row { grid-template-columns: 1fr; }
  .wb-card { grid-template-columns: 44px 1fr; gap: 18px; padding: 22px; }
  .wb-icon { width: 44px; height: 44px; }
  .bstep { gap: 16px; padding: 22px 20px; border-radius: 12px; }
  .bs-num { width: 44px; height: 44px; font-size: 18px; }
  .bstep h4 { font-size: 18px; }
  .best-head h2 { font-size: 38px; }
  .au-card { padding: 32px 24px; }
  .au-right h2 { font-size: 42px; }
  .dist-col { padding: 28px 22px; }
  .best-form { padding: 32px 24px; }

  /* "Get My Free Publishing Quote" is 28 uppercase characters in a full-width
     button; at the desktop 14px/.04em it wraps onto a second line on a phone.
     nowrap keeps it on one line and the font scales with the viewport so it
     still fits at 320px. */
  .best-form button[type="submit"] {
    white-space: nowrap;
    padding: 16px 12px;
    gap: 6px;
    font-size: clamp(10px, 3vw, 14px);
    letter-spacing: .02em;
  }
  .best-form button[type="submit"] .arr {
    width: 18px;
    height: 18px;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .catalogue-grid { grid-template-columns: 1fr; }
  .upcoming-grid { grid-template-columns: 1fr; }
  .partners-row.partners-row-5 { grid-template-columns: 1fr; }
  .ucover .uttl { font-size: 24px; }
  .ucover .uttl span { font-size: 18px; }
  .catalogue .head h2,
  .upcoming .head h2,
  .topcats .head h2,
  .distrib .head h2,
  .videotesti .head h2,
  .blogs .head h2,
  .cost-left h2,
  .wb-left h2,
  .au-right h2,
  .best-head h2,
  .finalcta h2 { font-size: 30px; }
}

/* ============== SERVICE PAGES — responsive ============== */
@media (max-width: 1100px) {
  .svc-offer-grid     { grid-template-columns: 1fr; max-width: 640px; }
  .svc-offer-grid.svc-offer-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
  .svc-process-grid   { grid-template-columns: 1fr; max-width: 700px; }
  .svc-offer .head h2,
  .svc-process .head h2 { font-size: 36px; }
}
@media (max-width: 720px) {
  .svc-split          { padding: 70px 0 80px; }
  .svc-offer          { padding: 80px 0 90px; }
  .svc-process        { padding: 80px 0 90px; }
  .svc-offer .head h2,
  .svc-process .head h2 { font-size: 28px; }
  .svco-card          { padding: 28px 24px; }
  .svc-offer-grid.svc-offer-grid-3 { grid-template-columns: 1fr; max-width: 480px; }
  .svco-card-tall     { min-height: 0; padding: 24px 22px; }
  .svco-card-tall .svco-body { max-height: 140px; }
  .svco-card-tall h3  { font-size: 18px; }
  .svcp-step          { grid-template-columns: 54px 1fr; gap: 14px; padding: 20px 18px; }
  .svcp-num           { font-size: 40px; }
  .svc-deliver-list   { padding: 18px 18px; }
}

/* ============== SERVICE PAGE HERO — responsive ============== */
@media (max-width: 1100px) {
  .svc-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .svc-hero-content h1 { font-size: 46px; }
  .svc-hero-media { order: 2; max-width: 460px; margin: 0 auto; }
  .svc-hero-accent { inset: 22px -22px -22px 22px; }
}
@media (max-width: 720px) {
  .svc-hero { padding: 70px 0 60px; }
  .svc-hero-content h1 { font-size: 32px; }
  .svc-hero-stats { gap: 22px; flex-wrap: wrap; padding-top: 22px; }
  .svc-hero-stat b { font-size: 26px; }
  .svc-hero-image { max-width: 360px; aspect-ratio: 4 / 4.5; }
  .svc-hero-badge { top: -10px; right: -10px; padding: 8px 12px; font-size: 10px; }
}

/* =============================================================
   Mobile: centre all body content (headings, paragraphs, CTAs).
   Excludes nav, footer columns, forms, FAQ accordions, card grids,
   tables, and lists (those keep their natural alignment).
   ============================================================= */
@media (max-width: 720px) {
  /* Reusable text-block containers across the site */
  .hero-copy,
  .au-right,
  .au-left,
  .split-body,
  .split-media,
  .about-hero-inner,
  .contact-hero-inner,
  .contract-hero-inner,
  .svc-hero-content,
  .legal-hero,
  .legal-hero .wrap,
  .blog-hero,
  .blog-hero .wrap,
  .bsp-head,
  .bsp-step,
  .bfc-head,
  .head,
  .section-head,
  .bigcta,
  .bigcta .wrap,
  .au-card,
  .feature-card,
  .feat-card,
  .pkg-card,
  .svc-card,
  .step-card,
  .timeline-item,
  .testimonial,
  .testimonial-card,
  .video-testimonial,
  .author-card,
  .blog-card,
  .blog-featured,
  .blog-featured-body,
  .blog-single-head,
  .contact-info,
  .submissions-hero,
  .stats-wrap,
  .promise-card { text-align: center; }

  /* Every text block on this page is centred at phone width (the list above),
     so the headings are centred with them. Ranging a heading left over centred
     copy was tried and read as a mistake in every section it touched. */
  .wcu-intro { text-align: center; }
  section h1,
  section h2,
  section h3,
  section h4,
  section h5,
  section h6,
  section .hero-sub,
  section .hero-title { text-align: center; }

  /* Exceptions - the two About Us bands that stay ranged left. */
  .promise-side,
  .ma-body { text-align: left; }
  .promise-side h2,
  .ma-body h2 { text-align: left; }
  .promise-side h2::after,
  .ma-body h2::after { left: 0 !important; transform: none !important; }

  /* Paragraphs inside common section wrappers */
  section > .wrap > p,
  section > .wrap > .head p,
  section > .container-xxl > .head p,
  section .lead,
  section .hero-lede { text-align: center; }

  /* Eyebrow pill — center as flex/inline so the underline/dot pattern stays */
  .eyebrow-pill,
  .legal-tag { display: inline-block; }

  /* CTA / button groups */
  .hero-ctas,
  .about-hero-actions,
  .contract-hero-actions,
  .svc-hero-actions,
  .submissions-actions,
  .legal-actions,
  .cd-actions,
  .actions,
  .btn-group,
  .blog-meta {
    justify-content: center !important;
    text-align: center;
    flex-wrap: wrap;
  }

  .ucard .umeta {
    display: inline-flex;
    justify-content: center;
    gap: 12px;
  }

  /* FAQ intro block — centre on mobile (sitewide). The consultation CTA used
     to be centred here too; the redesigned .ctaband sets its own stacked
     alignment, so it is no longer part of this rule. */
  .faq-left { text-align: center; }

  /* Underline accents under centered headings — re-anchor to center */
  section h1::after,
  section h2::after,
  section h3::after,
  .head h2::after { left: 50% !important; transform: translateX(-50%) !important; }

  /* KEEP-LEFT exclusions: anything where centering would harm UX */
  nav, nav *,
  .navlinks, .navlinks *,
  .mobile-menu, .mobile-menu *,
  .nav-dd, .nav-dd *,
  .util, .util *,
  .site-footer .top,
  .site-footer .linkcol,
  .site-footer .linkcol *,
  .site-footer .brandcol p,
  .site-footer .addr,
  .site-footer .contact-rows,
  .site-footer .bottom,
  form, form *,
  .quote-form, .quote-form *,
  .qf-wrap, .qf-wrap *,
  .faq-item summary,
  .faq-item .answer,
  .blog-faqs .answer,
  .contact-cards,
  .ccard,
  .ccard-body,
  table, table *,
  pre, code,
  .legal-content > ul,
  .legal-content > ol,
  .cd-paper > ul,
  .cd-paper > ol,
  .blog-single-content > ul,
  .blog-single-content > ol { text-align: left; }

  /* Centering wrappers themselves shouldn't apply to flex card grids */
  .bsp-grid,
  .feature-grid,
  .pkg-grid,
  .svc-grid,
  .blog-grid,
  .testimonial-grid { text-align: initial; }

  /* ---- Specific card-content centering ---- */

  /* Bestseller-process step cards (Step 02, Step 03 etc.) */
  .bsp-step { text-align: center; }
  .bsp-step .bsp-icon { margin-left: auto; margin-right: auto; }
  .bsp-step .bsp-step-label,
  .bsp-step h3,
  .bsp-step p { text-align: center; }

  /* Service cards on home + service pages (Ghostwriting Services etc.) */
  .svc-card { text-align: center; }
  .svc-card .svc-icon { margin-left: auto; margin-right: auto; }
  .svc-card h3,
  .svc-card p { text-align: center; }
  .svc-card .svc-link {
    display: inline-flex !important;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
  }

  /* Sign Up / Project Discussion process steps (.bstep on home) */
  .bstep { flex-direction: column; align-items: center; text-align: center; }
  .bstep .bs-num { margin: 0 auto 8px; }
  .bstep .bstep-body { text-align: center; }
  .bstep h4,
  .bstep p { text-align: center; }

  /* Blog listing cards (Punctuating Quotes etc.) */
  .blog-card-body,
  .blog-card-body .blog-meta,
  .blog-card-body h3,
  .blog-card-body p,
  .blog-card-body .blog-readmore { text-align: center; }
  .blog-card-body .blog-meta { justify-content: center; flex-wrap: wrap; }
  .blog-card-body .blog-readmore { display: inline-flex; justify-content: center; }

  /* "Recent posts" mini blog cards on home (.bpost / .bbody) */
  .bbody,
  .bbody .bdate,
  .bbody h4,
  .bbody p,
  .bbody .readmore { text-align: center; }
  .bbody .bdate { justify-content: center; }
  .bbody .readmore { display: inline-flex; justify-content: center; }

  /* Testimonial cards are centred by the stacking rule further up; the avatar,
     rating and platform-link rules that used to sit here went with the redesign. */

  /* ---- Upcoming Authors: convert grid → horizontal swipe slider ---- */
  .upcoming-grid {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 16px;
    padding: 6px 16px 22px;
    margin: 0 -16px;
    scroll-padding-left: 16px;
  }
  .upcoming-grid::-webkit-scrollbar { display: none; }
  .upcoming-grid .ucard {
    flex: 0 0 72%;
    max-width: 260px;
    min-width: 200px;
    scroll-snap-align: start;
  }
  /* Subtle right-edge fade so the next card peek is obvious */
  .upcoming { position: relative; overflow: hidden; }
  .upcoming::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 28px;
    background: linear-gradient(to right, transparent, var(--paper, #fbf5ee));
    pointer-events: none;
    z-index: 1;
  }

  /* ---- "How We Publish Your Book" (.bsp-steps) → swipe slider ---- */
  .bsp-steps {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 16px;
    padding: 6px 16px 22px;
    margin: 0 -16px;
    scroll-padding-left: 16px;
  }
  .bsp-steps::-webkit-scrollbar { display: none; }
  .bsp-steps .bsp-step {
    flex: 0 0 82%;
    max-width: 320px;
    min-width: 240px;
    scroll-snap-align: start;
    box-sizing: border-box;
  }

  /* ---- "How We Make Your Bestseller" (.best-steps) → swipe slider ---- */
  .best-steps {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 14px;
    padding: 6px 16px 22px;
    margin: 0 -16px;
    scroll-padding-left: 16px;
  }
  .best-steps::-webkit-scrollbar { display: none; }
  .best-steps .bstep {
    flex: 0 0 80%;
    max-width: 300px;
    min-width: 220px;
    scroll-snap-align: start;
    box-sizing: border-box;
  }

  /* ---- Home "Newest Blog Posts" (.blogs .blog-grid) → swipe slider.
     Scoped so the /blogs.php listing keeps its grid layout. ---- */
  .blogs .blog-grid {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 16px;
    padding: 6px 16px 22px;
    margin: 0 -16px;
    scroll-padding-left: 16px;
  }
  .blogs .blog-grid::-webkit-scrollbar { display: none; }
  .blogs .blog-grid .bpost {
    flex: 0 0 82%;
    max-width: 320px;
    min-width: 240px;
    scroll-snap-align: start;
    box-sizing: border-box;
  }
}

/* =============================================================
   Mobile: hide table-of-contents sidebars on blog / legal / contract
   pages, and centre long-form copy for readability.
   ============================================================= */
@media (max-width: 900px) {
  /* Blog single article TOC card */
  .blog-side-toc { display: none !important; }

  /* Legal pages (privacy, terms, scam-alert) */
  .legal-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
  .legal-toc  { display: none !important; }
  .legal-content {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  .legal-content h2,
  .legal-content h3,
  .legal-content h4 { text-align: center; }
  .legal-content h2::after,
  .legal-content h3::after { left: 50%; transform: translateX(-50%); }
  .legal-content ul,
  .legal-content ol { display: inline-block; text-align: left; max-width: 100%; }

  /* Independent publishing contract document */
  .cd-layout { grid-template-columns: 1fr !important; gap: 0 !important; }
  .cd-toc    { display: none !important; }
  .cd-paper,
  .cd-intro  { text-align: center; margin-left: auto; margin-right: auto; }
  .cd-paper h2,
  .cd-paper h3,
  .cd-paper h4 { text-align: center; }
  .cd-paper ul,
  .cd-paper ol { display: inline-block; text-align: left; max-width: 100%; }

  /* Blog single article: centre content when sidebar drops away.
     `minmax(0, 1fr)` is critical — without it the grid track expands to
     fit its widest child and pushes content past the viewport. */
  .blog-single,
  .blog-single .wrap,
  .blog-single-grid,
  .blog-single-content { max-width: 100%; min-width: 0; }
  .blog-single .wrap { overflow-x: hidden; }
  .blog-single-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 32px !important;
    max-width: 100% !important;
  }
  .blog-single-content {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .blog-single-content h2,
  .blog-single-content h3,
  .blog-single-content h4 { text-align: center; max-width: 100%; }
  .blog-single-content h2::after { left: 50%; transform: translateX(-50%); }
  .blog-single-content p { max-width: 100%; }
  .blog-single-content ul,
  .blog-single-content ol { display: inline-block; text-align: left; max-width: 100%; }
  .blog-single-content img,
  .blog-single-content figure,
  .blog-single-content .aligncenter,
  .blog-single-content .alignleft,
  .blog-single-content .alignright {
    max-width: 100% !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
  }
  .blog-single-content blockquote { text-align: left; }
  .blog-single-content table {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
  }
  /* Belt-and-braces: any child that supplies an explicit width can't push
     the article wider than its container. */
  .blog-single-content > * { max-width: 100%; box-sizing: border-box; }
}


/* ---- Publishing process section ---- */
@media (max-width: 1100px) {
  .process-grid { grid-template-columns: 1fr; gap: 48px; }
  /* Nothing left to stick to once the columns stack. */
  .process-sticky { position: static; }
  .process-sticky h2 { font-size: 32px; }
}

@media (max-width: 640px) {
  .process-sec { padding: 80px 0 90px; }
  .process-sticky h2 { font-size: 27px; }
  .process-logo { width: 200px; }
  .process-list { padding-left: 20px; }
  .process-list li::after { left: -20px; top: 38px; border-left-width: 9px; border-top-width: 9px; border-bottom-width: 9px; }
  .process-card { flex-direction: column; gap: 10px; padding: 28px 22px; }
  .process-num span { font-size: 34px; }
  .process-body h4 { font-size: 19px; }
}

/* ---- Services · how-it-works steps ---- */
@media (max-width: 1024px) {
  .spro { padding: 80px 0 90px; }
  .spro-head h2 { font-size: 32px; }
  .spro-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 28px; }
}

@media (max-width: 720px) {
  .spro { padding: 64px 0 72px; }
  .spro-head { margin-bottom: 44px; }
  .spro-head h2 { font-size: 26px; }
  .spro-grid { grid-template-columns: 1fr; gap: 36px; }
  .spro-ico { width: 64px; height: 64px; font-size: 24px; margin-bottom: 20px; }
  /* Stacked one per row, the big 01/02/03 numerals only repeat what the order
     of the steps already says, and they push the icons further apart. */
  .spro-num { display: none; }
}

/* Other Services, four-across variant */
@media (max-width: 1200px) {
  .svc-grid.svc-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .svc-grid.svc-grid-4 { grid-template-columns: 1fr; gap: 18px; }
}

/* Home services, centred icon cards */
@media (max-width: 1100px) {
  .hsvc-sec { padding: 84px 0; }
  .hsvc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .hsvc-head { margin-bottom: 44px; }
}
@media (max-width: 640px) {
  .hsvc-sec { padding: 64px 0; }
  .hsvc-grid { grid-template-columns: 1fr; gap: 18px; }
  .hsvc-card { padding: 36px 24px 32px; }
  .hsvc-ico { width: 66px; height: 66px; font-size: 28px; margin-bottom: 20px; }
  .hsvc-cta { margin-top: 36px; }
}

/* Thank you page */
@media (max-width: 768px) {
  .ty-sec { padding: 80px 0 70px; }
  .ty-ico { width: 86px; height: 86px; font-size: 42px; margin-bottom: 24px; }
  .ty-lede { font-size: 16px; }
}
@media (max-width: 480px) {
  .ty-sec { padding: 60px 0 56px; }
  .ty-actions .btn { width: 100%; }
  .ty-contact { gap: 12px; flex-direction: column; align-items: center; }
}

/* Five key stages - the arc only works with room, so below 1100px it becomes a
   plain vertical list: icon, number, then the text. */
@media (max-width: 1100px) {
  .aproc { padding: 72px 0; }
  .aproc-stage { height: auto; margin: 48px 0 0; display: grid; gap: 30px; }
  .aproc-stage::before,
  .aproc-arc { display: none; }
  .aproc-logo { position: static; transform: none; margin: 4px auto 0; }
  .aproc-node { position: static; width: auto; height: auto; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 20px; align-items: start; }
  .aproc-ico { position: static; transform: none; }
  .aproc-num { position: static; transform: none; grid-column: 1; justify-self: center; margin-top: 10px; }
  .aproc-card { position: static; transform: none; width: auto; grid-column: 2; grid-row: 1 / span 2; bottom: auto; }
  .aproc-card h3,
  .aproc-card p { text-align: left; }
}
@media (max-width: 560px) {
  .aproc-node { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; }
  .aproc-ico { width: 64px; height: 64px; font-size: 26px; }
}

/* Stages: hold the curve, the light and the floating icons still for anyone
   who has asked for reduced motion. Hover styling still applies. */
@media (prefers-reduced-motion: reduce) {
  .aproc-ico { animation: none; }
  .aproc-line { stroke-dashoffset: 0; animation: none; }
  .aproc-comet { display: none; }
}




@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
body {
zoom: 66.5% !important;
}

}

@media (-webkit-min-device-pixel-ratio: 1.25) and (-webkit-max-device-pixel-ratio: 1.49),
(min-resolution: 120dpi) and (max-resolution: 143dpi) {
body {
zoom: 80% !important;
}
}




@media only screen and (max-width: 600px) {

body{
  zoom: unset !important;
}
}

/* How we publish: three across drops to two, then one. The cell rules have to
   be recalculated at each step or the grid lines land in the wrong places. */
@media (max-width: 1100px) {
  .xstep { padding: 76px 0; }
  .xstep-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xstep-item { padding: 26px 28px 30px; }
  .xstep-item:nth-child(3n) { border-right: 1px solid var(--rule); }
  .xstep-item:nth-child(2n) { border-right: 0; }
  .xstep-item:nth-last-child(-n + 3) { border-bottom: 1px solid var(--rule); padding-bottom: 30px; }
  .xstep-item:nth-last-child(-n + 2) { border-bottom: 0; padding-bottom: 8px; }
  .xstep-item:nth-child(-n + 3) { padding-top: 26px; }
  .xstep-item:nth-child(-n + 2) { padding-top: 0; }
}
@media (max-width: 640px) {
  .xstep { padding: 60px 0; }
  .xstep-grid { grid-template-columns: 1fr; }
  .xstep-item,
  .xstep-item:nth-child(3n),
  .xstep-item:nth-child(2n) { border-right: 0; }
  .xstep-item { padding: 24px 0 26px; border-bottom: 1px solid var(--rule); }
  .xstep-item:nth-child(-n + 3),
  .xstep-item:nth-child(-n + 2) { padding-top: 24px; }
  .xstep-item:first-child { padding-top: 0; }
  .xstep-item:last-child { border-bottom: 0; padding-bottom: 8px; }
  .xstep-item h3 { font-size: 17.5px; }
  .xstep-cta { margin-top: 36px; }
}

/* Why choose us: the two-column split collapses first, then the reason grid. */
@media (max-width: 1100px) {
  .wcu { padding: 78px 0; }
  .wcu-grid { grid-template-columns: 1fr; gap: 44px; }
  .wcu-intro { position: static; }
}
@media (max-width: 640px) {
  .wcu { padding: 60px 0; }
  .wcu-list { grid-template-columns: 1fr; gap: 26px; }
  .wcu-item { grid-template-columns: 46px minmax(0, 1fr); gap: 14px; }
  .wcu-ico { width: 46px; height: 46px; font-size: 20px; border-radius: 12px; }
  /* A narrow-screen rule elsewhere centres headings; keep these ranged left
     so each title sits over its own paragraph. */
  .wcu-body h3,
  .wcu-body p { text-align: left; }
}


/* =============================================================
   Consultation CTA band - phone layout
   -------------------------------------------------------------
   The card sets overflow:hidden, so anything that will not shrink
   is silently clipped at its right edge instead of wrapping. These
   rules make every part of it shrinkable: the grid drops to one
   column with zero-minimum tracks, the button fills the column
   instead of sizing to its own text, and the email address - one
   26-character unbreakable token - is allowed to break.
   ============================================================= */
@media (max-width: 720px) {
  .ctaband-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
    padding: 32px 22px;
  }
  .ctaband-body,
  .ctaband-action { min-width: 0; }

  /* The sitewide "section h3" mobile rule centres this; the trust points and
     the email line below it are ranged left, so the heading is ranged left
     too rather than sitting centred over left-aligned content. */
  .ctaband h3 {
    max-width: none;
    font-size: clamp(22px, 6.2vw, 28px);
    text-align: left;
  }
  .ctaband p { max-width: none; }

  .ctaband-action { align-items: stretch; }
  .ctaband-btn {
    width: 100%;
    justify-content: center;
    gap: 9px;
    padding: 14px 16px;
    /* "Start Your Publishing Journey Today" is long for a phone-width button -
       smaller type keeps it comfortably on one line. */
    font-size: 12.5px;
    letter-spacing: 0;
    text-align: center;
  }
  .ctaband-btn-arr {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    font-size: 12px;
  }

  .ctaband-alt {
    justify-content: center;
    text-align: center;
    overflow-wrap: anywhere;
  }
}