/* Additions on top of the source stylesheets, kept separate so the originals stay untouched. */

/* The source sets this from a script; declared here instead. */
.logo-track {
  animation-duration: 24s;
}

/* The source markup ships a hamburger with no open state, leaving mobile with no
   navigation at all. This gives the toggle something to reveal. */
.aps-header-inner {
  position: relative;
}

@media (max-width: 1024px) {
  .aps-nav.is-open {
    display: block;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    padding: 18px 20px;
    z-index: 999;
  }

  .aps-nav.is-open ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .aps-nav.is-open ul li a {
    text-align: left;
  }

  .aps-nav.is-open .dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    padding: 6px 0 0 12px;
    background: transparent;
  }

  .aps-nav.is-open .dropdown li a {
    color: #131921 !important;
  }
}

/* ==========================================================================
   Mobile fixes
   The source's phone layout has a few sections that never adapt: cards keep
   their desktop percentage widths, a vertical connector stays put after the
   timeline turns horizontal, and off-screen reveal animations push the page
   sideways. These are corrections, not part of the original design.
   ========================================================================== */

/* Reveal animations translate elements in from off-screen, which widens the
   page on phones until they play. Nothing on this site scrolls sideways. */
html,
body {
  overflow-x: hidden;
}

/* Review carousel: the cards are locked to 25% at every width, so on a phone
   four of them share the screen and each line holds one word. */
@media (max-width: 991.98px) {
  .slider-content .review-card {
    width: calc(50% - 20px);
    min-width: calc(50% - 20px);
  }
}

@media (max-width: 767.98px) {
  .slider-content .review-card {
    width: 100%;
    min-width: 100%;
  }

  .slider-section .slider-container {
    width: calc(100% - 70px);
  }

  .slider-section .prev,
  .slider-section .next {
    width: 40px;
    height: 40px;
  }
}

/* Timeline: below 992px the steps switch from a vertical column to a row, but
   the connector line and the 100px grid gap are still the desktop ones. */
@media (max-width: 992px) {
  .timeline-section .timeline-wrapper {
    gap: 30px;
  }

  .timeline-section .timeline-center {
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0 !important;
  }

  .timeline-section .timeline-center .line {
    display: none;
  }

  .timeline-section .step {
    margin: 0 !important;
  }
}

/* Mobile navigation. The source ships a hamburger with no open state at all;
   this is the panel it opens, sized to the viewport and scrollable. */
@media (max-width: 1024px) {
  .aps-nav.is-open {
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .aps-nav.is-open ul {
    gap: 0;
  }

  .aps-nav.is-open ul li {
    width: 100%;
    border-bottom: 1px solid #f0f0f0;
  }

  .aps-nav.is-open ul li:last-child {
    border-bottom: 0;
  }

  .aps-nav.is-open ul li a {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 12px 0;
    font-size: 15px;
  }

  /* The category tags read as headings when stacked; inline and muted instead. */
  .aps-nav.is-open ul li a strong {
    position: static;
    transform: none;
    visibility: visible;
    font-size: 10px;
    letter-spacing: 0.08em;
    color: #9a9a9a;
  }

  /* The decorative underline doubles up once items are stacked. */
  .aps-nav.is-open ul li a::after {
    display: none;
  }

  .aps-nav.is-open .dropdown {
    padding: 0 0 6px 14px;
    gap: 0;
  }

  .aps-nav.is-open .dropdown li {
    border-bottom: 0;
  }

  .aps-nav.is-open .dropdown li a {
    padding: 9px 0;
    font-size: 14px;
  }
}


/* Payment methods in the footer: four separate logos in place of the source's
   single composite image, sized to a common height so the row reads evenly. */
.payments .payment-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.payments .payment-logos li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 3px 10px;
  background: #fff;
  border-radius: 5px;
}

.payments .payment-logos img {
  max-width: 74px;
  max-height: 26px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* This artwork is square with the card centred inside it, so it needs a taller
   box than the card logos to read at the same optical size. */
.payments .payment-logos img[src*="bank-transfer"] {
  max-width: 52px;
  max-height: 38px;
}

/* Social marks are SVG now, so they scale cleanly; the source's raster icons
   were sized by width alone. */
.social-stats .stat .social-icon {
  width: 42px;
  height: 42px;
  display: block;
  margin: 0 auto 5px;
}

/* --------------------------------------------------------------------------
   Touch targets
   The source sizes its links for a mouse: footer links are 14px tall, the top
   bar and contact links 20px, and the carousel dots 12px. On a phone those are
   awkward to hit, so the tappable area is grown without moving anything
   visually — padding and hit areas only, no change to type or colour.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .footer-links .link-col a {
    padding: 10px 0;
    margin-bottom: 0;
  }

  .top-bar-info a,
  .top-right-bar a,
  .content-2 a,
  .footer-bottom p a {
    display: inline-block;
    padding: 7px 0;
  }

  /* Card CTAs sit at 27px tall, under a comfortable thumb size. */
  .service-card .btn-custom,
  .Promotion .btn-custom,
  .service-card .btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* The dot keeps its 12px look; the button around it is what grows. */
  .slick-dots li {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .slick-dots li button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: transparent;
  }

  .Packagesmain .Packages-slider .slick-dots li button {
    width: 26px;
    height: 26px;
    background: transparent;
    position: relative;
  }

  .Packagesmain .Packages-slider .slick-dots li button::after {
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #dcdcdc;
  }

  .Packagesmain .Packages-slider .slick-dots li.slick-active button::after {
    background: #f7941d;
  }
}

/* --------------------------------------------------------------------------
   Phone layout corrections
   Below 992px the hero centres its text, but several components were only ever
   laid out for a wide column and break once that happens.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  /* The tick is absolutely positioned at the left edge while the text centres,
     which strands it a long way from the words it belongs to. Pair them up. */
  .aps-hero-banner-v2 .aps-list {
    display: inline-block;
    text-align: left;
    max-width: 100%;
  }

  .aps-hero-banner-v2 .aps-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-left: 0;
  }

  .aps-hero-banner-v2 .aps-list li::before {
    position: static;
    flex: 0 0 auto;
    line-height: 1.5;
  }
}

@media (max-width: 575.98px) {
  /* Two pill buttons cannot sit side by side at this width without their labels
     wrapping mid-phrase, so they stack at full width. */
  .aps-hero-banner-v2 .aps-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .aps-hero-banner-v2 .aps-btn-v2 {
    width: 100%;
    text-align: center;
    padding: 14px 20px;
    white-space: nowrap;
  }
}

@media (max-width: 767.98px) {
  /* The copyright and the policy links were sharing a row and being squeezed
     into two narrow columns, with the last link running under the scroll
     button. Stacked, and given room to clear it. */
  .footer-bottom {
    flex-direction: column;
    gap: 6px;
    padding-bottom: 84px;
    text-align: center;
  }

  .footer-bottom p {
    margin: 0;
  }

  /* Keep the scroll-to-top button clear of content in the corner. */
  button.back-to-top {
    right: 18px;
    bottom: 18px;
  }
}

/* --------------------------------------------------------------------------
   Theme
   The source's dark panels use a teal ramp that reads as a different brand to
   the orange accent everywhere else. These use the Amazon-style navy instead,
   which is what the rest of the palette is built around.
   -------------------------------------------------------------------------- */
.aas-form-wrapper,
.cta-book-writting,
.cta-book-writting-2,
.top-footer,
.footer-bottom {
  background: linear-gradient(135deg, #131921 0%, #232f3e 55%, #37475a 100%);
}

.aas-form-wrapper {
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 18px 40px rgba(19, 25, 33, 0.18);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
/* The pair sat 8px in from the copy above them because of Bootstrap's ml-2
   utility, so the column edge looked ragged. That utility is !important. */
.btn-container .btn-main-2,
.btn-container .btn-main-3,
.btn-container .btn.ml-2 {
  margin-left: 0 !important;
}

/* The label length was setting the width, so the two buttons never matched. */
.btn-main-2,
.btn-main-3 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 190px;
}

/* The live chat glyph was set at 14px against a 15px label, which reads as an
   afterthought rather than part of the button. */
.btn-main-3 i,
.btn-main-2 i,
.aps-btn-v2 i {
  font-size: 18px;
  line-height: 1;
}

@media (max-width: 575.98px) {
  /* Stacked, they should be the same width as each other. */
  .btn-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .btn-container .btn-main-2,
  .btn-container .btn-main-3 {
    width: 100%;
    max-width: 320px;
  }

  /* Centred CTA bands keep their buttons centred, but matched in width. */
  .cta-book-writting .btn-container,
  .cta-book-writting-2 .btn-container,
  .text-center .btn-container {
    align-items: center;
  }
}

/* --------------------------------------------------------------------------
   Headings
   At 28px the section headings break to three lines on a phone, orphaning a
   word like "Of" on its own row. A step down keeps them to two.
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .container .section-heading,
  .container .main-heading,
  .container .main-heading-2,
  .section .main-heading,
  .services-sec .main-heading,
  .timeline-section .section-heading {
    font-size: 23px;
    line-height: 1.3;
    text-wrap: balance;
  }
}

/* --------------------------------------------------------------------------
   Review badges
   Four badges wrapped 3 + 1, leaving a stranded row. They stay on one line.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .aas-trust-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    align-items: start;
  }

  .aas-trust-list li {
    min-width: 0;
    text-align: center;
  }

  .aas-trust-list li img {
    max-width: 100%;
    height: auto;
  }

  .aas-trust-list li strong {
    font-size: 11px;
    white-space: nowrap;
  }

  .aas-trust-list .aas-stars {
    font-size: 9px;
  }
}

/* --------------------------------------------------------------------------
   Top bar
   The contact strip scrolls past on a 15s marquee. On a phone that leaves a
   tall empty orange band above the logo for most of the cycle, so it is held
   still and the details stay readable.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  #scroll-text {
    animation: none !important;
    transform: none !important;
    text-align: center;
  }

  .header-top-bar {
    padding: 6px 0;
  }

  .header-top-bar .top-bar-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 16px;
  }

  .header-top-bar .top-bar-info li {
    font-size: 12px;
  }

  .header-top-bar .top-right-bar {
    margin-top: 2px !important;
    text-align: center;
  }

  .header-top-bar .top-right-bar .h4 {
    font-size: 15px;
  }
}

/* --------------------------------------------------------------------------
   Section rhythm
   Several blocks keep their desktop padding on a phone, which stretches short
   content over whole screens of empty space.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .cta-section .counter-stat {
    padding-top: 22px;
    padding-bottom: 22px;
  }

  .sec-pad,
  .services-sec,
  .books-dif {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */
/* Field labels. The design is placeholder-driven, so these are read out and
   clickable without being seen — a placeholder disappears the moment someone
   types, leaving no clue what the field was for. */
.sr-only-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Nothing in the source shows keyboard focus, so tabbing through the site is
   invisible. Only keyboard focus is styled, so mouse users see no change. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #f6921e;
  outline-offset: 3px;
  border-radius: 4px;
}

/* On the dark panels the orange ring needs a light halo to stay visible. */
.aas-form-wrapper input:focus-visible,
.aas-form-wrapper button:focus-visible,
.top-footer a:focus-visible,
.footer-bottom a:focus-visible,
.main-footer a:focus-visible {
  outline-color: #ffb457;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.18);
}

/* Skip-link style target for the hero, kept out of the way until focused. */
.skip-to-content {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 12px 18px;
  background: #131921;
  color: #fff;
  border-radius: 0 0 6px 0;
}

.skip-to-content:focus {
  left: 0;
}

/* Pause control for the auto-advancing carousels. Sits quietly in the corner
   until hovered or focused; moving content should always be stoppable. */
.slider-section,
.usp-slider,
.Packages-slider {
  position: relative;
}

.carousel-pause {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 12;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  color: #131921;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(19, 25, 33, 0.12);
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.carousel-pause:hover,
.carousel-pause:focus-visible {
  opacity: 1;
  background: #fff;
}

.usp-slider .carousel-pause,
.Packages-slider .carousel-pause {
  top: -6px;
}

/* --------------------------------------------------------------------------
   Heading order
   Several section headings jumped h2 -> h4, which leaves gaps in the outline a
   screen reader announces. The tags are h3 now; these carry the styling the h4
   rules used to provide, so nothing moves visually.
   -------------------------------------------------------------------------- */
/* Matches the h4 sizing this card heading used before it was promoted. */
.service-card h3 {
  font-size: 18px;
}

@media (max-width: 991.98px) {
  .service-card h3 {
    font-size: 16px;
  }
}

h3.service-title {
  font-size: 16px;
  font-weight: 600;
  color: #131921;
  margin: 0;
}

.link-col h3 {
  font-size: 16px;
  font-weight: 700;
  color: #131921;
  margin-bottom: 12px;
}

.payments h3 {
  font-size: 14px;
  margin: 15px 0 10px;
}

.payments h3 span {
  color: #ff9800;
}

.text-block h3 {
  font-size: 18px;
  font-weight: 700;
  color: #131921;
  margin-bottom: 6px;
}

/* --------------------------------------------------------------------------
   Hero legibility
   The headline sits straight on a photograph, so how readable it is depends on
   what happens to be behind it. A scrim guarantees the contrast.
   -------------------------------------------------------------------------- */
.aps-hero-banner-v2 {
  position: relative;
}

.aps-hero-banner-v2::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(19, 25, 33, 0.86) 0%, rgba(19, 25, 33, 0.66) 45%, rgba(19, 25, 33, 0.34) 100%);
  pointer-events: none;
}

.aps-hero-banner-v2 > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 991.98px) {
  /* Centred text on a phone sits over the middle of the photo, so the scrim is
     evened out rather than weighted to one side. */
  .aps-hero-banner-v2::before {
    background: linear-gradient(180deg, rgba(19, 25, 33, 0.82) 0%, rgba(19, 25, 33, 0.74) 60%, rgba(19, 25, 33, 0.82) 100%);
  }
}

/* Sub-headings promoted from h5/h6 to close gaps in the outline. They keep the
   smaller size those levels gave them. */
.promoted-sub {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.usp-card .usp-title {
  color: #fff;
  font-weight: 600;
  margin-bottom: 40px;
}

/* The numbered sections of the legal pages sit directly under the page title,
   so they are h2. Their size comes from the .sn/.st spans inside, which are
   unchanged; this only removes the browser's default h2 margin difference. */
.serviceLeadingSection .legal-section-title {
  margin: 0;
  font-weight: 700;
}

/* The contact page had no h1 at all. Its main heading is now one, sized to
   match the h2 it replaced so the page looks unchanged. */
.appoinment-wrap .contact-page-title {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  color: #131921;
}

@media (max-width: 575.98px) {
  .appoinment-wrap .contact-page-title {
    font-size: 1.6rem;
  }
}

/* --------------------------------------------------------------------------
   Intrinsic image dimensions
   Every <img> now carries its real width and height so the browser can reserve
   the space before the file arrives, which is what stops the page jumping
   about as it loads. Those attributes would otherwise fight the stylesheet, so
   images scale to their container by default...
   -------------------------------------------------------------------------- */
/* Only the height is released. Setting max-width here would outrank the
   design's own `max-width` on icons and blow them up to container width. */
img[width][height] {
  height: auto;
}

/* ...except where the design sets the box itself and crops the picture into
   it. Letting these compute their own height would break the crop. */
.book-card img,
.horizontal-ticker__slide img,
.book-section img,
.book-section .book-img,
.book-section .dribbble img,
.marquee__group img,
.logo-item img,
.award-img,
.dashboard-img,
.book-image img,
.testimonial-block.style-2 .testimonial-thumb img,
.company-box-inner .company-box-top img,
.swiper-slide--inner .testimonial-detail img {
  height: revert-layer;
}

/* --------------------------------------------------------------------------
   Service detail
   The section carrying each service's own copy. Built from the palette and
   spacing already in use so it reads as part of the page, not bolted on.
   -------------------------------------------------------------------------- */
.service-detail {
  background: #fff;
}

.service-detail .service-detail__title {
  /* Some page stylesheets colour .main-heading white for dark sections; this
     one sits on white, so the colour is stated rather than inherited. */
  color: #131921;
  margin-bottom: 20px;
}

.service-detail .service-detail__title span {
  color: #f6921e;
}

.service-detail__lead {
  font-size: 16px;
  line-height: 1.75;
  color: #4a4a4a;
  margin-bottom: 18px;
}

.service-detail__includes {
  background: linear-gradient(135deg, #131921 0%, #232f3e 100%);
  border-radius: 16px;
  padding: 28px 26px;
  height: 100%;
}

.service-detail__includes h3 {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 16px;
}

.service-detail__includes ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.service-detail__includes li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
  color: #d8dde3;
  font-size: 15px;
  line-height: 1.55;
}

.service-detail__includes li::before {
  content: '✔';
  position: absolute;
  left: 0;
  top: 0;
  color: #f6921e;
}

.service-detail__steps {
  margin-top: 46px;
}

.service-detail__steps-title {
  font-size: 20px;
  font-weight: 700;
  color: #131921;
  margin-bottom: 22px;
}

.service-detail__step {
  border: 1px solid #ececec;
  border-radius: 14px;
  padding: 22px 20px;
  height: 100%;
  margin-bottom: 24px;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.service-detail__step:hover {
  box-shadow: 0 14px 34px rgba(19, 25, 33, 0.09);
  transform: translateY(-4px);
}

.service-detail__step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #f6921e;
  color: #fff;
  font-weight: 700;
  margin-bottom: 12px;
}

.service-detail__step h4 {
  font-size: 16px;
  font-weight: 700;
  color: #131921;
  margin-bottom: 8px;
}

.service-detail__step p {
  font-size: 14px;
  line-height: 1.6;
  color: #5a5a5a;
  margin: 0;
}

@media (max-width: 991.98px) {
  .service-detail__includes {
    margin-top: 28px;
  }
}

/* ---------------------------------------------------------------------------
   Top bar contrast

   The bar carried white text on the brand orange (#F6921E) — 2.32:1, where
   WCAG AA asks for 4.5:1. The email, address and phone number were the least
   readable text on the site. Darkening the text instead of the background
   keeps the brand colour and reaches 7.1:1.
   --------------------------------------------------------------------------- */
.header-top-bar,
.header-top-bar a,
.header-top-bar a i,
.header-top-bar a span,
.header-top-bar .top-bar-info li,
.header-top-bar .top-bar-info li a,
.header-top-bar .top-right-bar a,
.header-top-bar .top-right-bar a i,
.header-top-bar .top-right-bar a span {
  color: #131921;
}

.header-top-bar a:hover,
.header-top-bar a:hover i,
.header-top-bar a:hover span {
  color: #000;
  text-decoration: underline;
}

/* Contextual links out of a service page: to the services that genuinely sit
   next to it, and to the articles that answer the questions people have before
   buying. Styled as content rather than as a footer widget, because that is
   what they are. */
.service-detail__related,
.service-detail__reading {
  margin-top: 48px;
  padding: 30px 34px;
  background: #f7f8fa;
  border-radius: 12px;
}

.service-detail__reading {
  margin-top: 20px;
}

.service-detail__related h3,
.service-detail__reading h3 {
  font-size: 1.15rem;
  margin-bottom: 16px;
}

.service-detail__related ul,
.service-detail__reading ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.service-detail__related li,
.service-detail__reading li {
  margin-bottom: 12px;
  line-height: 1.65;
  color: #55565a;
}

.service-detail__related li:last-child,
.service-detail__reading li:last-child {
  margin-bottom: 0;
}

.service-detail__related a,
.service-detail__reading a {
  color: #f47c20;
  font-weight: 600;
}

@media (max-width: 575px) {
  .service-detail__related,
  .service-detail__reading {
    padding: 24px 22px;
  }
}

/* Images given intrinsic width/height attributes need `width: auto` wherever
   the stylesheet clamps only their height.
   
   With `width="1821"` on the element and `max-height: 55px` in CSS, the width
   is *specified* rather than auto, so the browser honours both literally: the
   logo rendered 1821x55. As a flex item that box consumed the entire header
   and pushed the nav to left: 2076px in a 1800px viewport — the whole menu sat
   off the right edge, on every page.

   To find others after adding width/height attributes to an <img>, compare
   rendered aspect ratio against naturalWidth/naturalHeight and flag anything
   that has drifted; these two were the only offenders across 65 images. */
.aps-logo img,
.aas-trust-list img {
  width: auto;
}

/* The "Others" dropdown hangs left-aligned off its parent item, which is the
   last thing in the nav — so its 220px ran past the right edge of the viewport
   at every desktop width, and `html { overflow-x: hidden }` then swallowed it.
   All thirteen links inside it, including the blog, were unreachable. Anchor
   the last item's panel to its right edge instead. */
.aps-nav > ul > li:last-child .dropdown {
  left: auto;
  right: 0;
}

/* The two books in this band are absolutely positioned at bottom: -180px, so
   they hang deliberately past the bottom of the dark panel. Nothing reserved
   room for that overhang, so they landed on top of the reviews slider that
   follows it. Reserve the 180px they stick out by, plus a gap so the books
   have visible space beneath them rather than merely clearing the next
   section.

   Desktop only: below 991px custom.css switches the books to position:
   relative and they flow inline, so there is no overhang to allow for. */
@media (min-width: 992px) {
  .cta-book-writting-2 {
    margin-bottom: 220px;
  }
}