/*
 * Our own components, in the template's visual language.
 *
 * Loaded last, after style.css, so anything here wins. Every class is prefixed
 * ds- so nothing collides with the template's own selectors — the template is
 * still doing all the section work; this file only covers the pieces we wrote
 * ourselves because the template has no equivalent: a sticky header, a real
 * mega panel, a drawer, and a footer that doubles as a sitemap.
 *
 * Colour comes from the logo — #009688 — and is already the template's --theme,
 * so these rules read from the token rather than repeating the hex.
 */

:root {
  --ds-teal: #009688;
  --ds-teal-deep: #00796b;
  --ds-teal-wash: #f0faf9;
  --ds-ink: #1c1c25;
  --ds-muted: #797e88;
  --ds-line: #e5e5e5;
  --ds-header-h: 96px;
  /* How far the white bar climbs into the teal band above it. */
  --ds-lap: 24px;

  /* One glass recipe, used by the header, the mega panel and the drawer so
     they read as a single pane rather than three tinted surfaces. */
  --ds-glass: rgba(255, 255, 255, 0.72);
  --ds-glass-solid: rgba(255, 255, 255, 0.94);
  --ds-glass-edge: rgba(255, 255, 255, 0.55);
  --ds-glass-blur: saturate(180%) blur(18px);
}

/* ------------------------------------------------------------------ */
/* container                                                           */
/* ------------------------------------------------------------------ */

/* Bootstrap gives .container a stepped max-width — 720 / 960 / 1140 / 1320 —
 * and 12px of gutter. The template's .rr-container-1410 sets max-width:1410px
 * and, loading after Bootstrap, wins at every breakpoint. The stepped widths
 * therefore never apply, and on a tablet the container becomes the full
 * viewport with 12px of air either side: content runs edge to edge.
 *
 * The 1410px ceiling is what the design wants on a large screen, so it stays.
 * What it needs is real gutters below that, which is what these add. */
.container.rr-container-1410 {
  padding-inline: 40px;
}
@media (max-width: 1199px) {
  .container.rr-container-1410 {
    padding-inline: 32px;
  }
}
@media (max-width: 991px) {
  .container.rr-container-1410 {
    padding-inline: 24px;
  }
}
@media (max-width: 575px) {
  .container.rr-container-1410 {
    padding-inline: 18px;
  }
}

/* ------------------------------------------------------------------ */
/* loading screen                                                      */
/* ------------------------------------------------------------------ */

/* The template's loader is a deep purple ground with a black curtain sweeping
   over it — two colours the site-wide recolour missed, because both were
   written as literals rather than through --theme. The ground goes to a very
   dark teal and the curtain to the logo teal, so the first thing anyone sees is
   the brand colour rather than someone else's. */
.loader-wrap {
  background: #00302c;
}
.loader-wrap svg {
  fill: var(--ds-teal);
}
.loader-wrap .loader-wrap-heading .load-text {
  color: #fff;
}

/* ------------------------------------------------------------------ */
/* header                                                              */
/* ------------------------------------------------------------------ */

.ds-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 900;
  transition: transform 0.5s ease, box-shadow 0.3s ease;
}
.ds-header.is-pinned .ds-header-top {
  display: none;
}
/* Pinned: the teal band is gone, so there is nothing left for the white sheet
   to be seated into. It drops back to a flat, full-bleed bar. */
.ds-header.is-pinned .ds-header-main {
  margin-top: 0;
  border-radius: 0;
  box-shadow: 0 6px 30px rgba(28, 28, 37, 0.08);
}
.ds-header.is-pinned .ds-header-bar {
  height: 80px;
}
.ds-header.is-pinned .ds-logo img {
  height: 52px;
}
.ds-header.is-hidden {
  transform: translateY(-100%);
}

/* Top strip — the coloured band, in the logo teal.
 *
 * The band is deliberately taller than its content by --ds-lap. That surplus is
 * the overlap zone: the white bar below is pulled up into it by the same
 * amount, so the two rows stop reading as two stacked strips and start reading
 * as one teal plate with a white card seated in it. */
.ds-header-top {
  position: relative;
  background: var(--ds-teal);
  padding-bottom: var(--ds-lap);
}
.ds-header-top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 11px 0 9px;
}
.ds-header-note {
  margin: 0;
  font-size: 14.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}
.ds-header-note span {
  margin-right: 10px;
  padding: 3px 12px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ds-header-contact {
  display: flex;
  gap: 26px;
}
.ds-header-contact a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  transition: color 0.3s ease;
}
.ds-header-contact a i {
  color: #fff;
}
.ds-header-contact a:hover {
  color: #fff;
}

/* Main bar.
 *
 * At the top of the page the white is carried by .ds-header-bar, which is a
 * rounded card seated into the teal band; .ds-header-main stays transparent so
 * the teal shows to the left and right of that card and the two rows connect.
 * Once pinned the teal band is gone, so the white moves back out to full bleed
 * and the card flattens — see the .is-pinned rules below. */
.ds-header-main {
  position: relative;
  background: #fff;
  /* Rise into the teal band and round the two corners that end up inside it.
     Full-bleed, so the curve happens at the screen edges and the teal reads as
     a plate the white sheet is seated into rather than a separate strip. */
  margin-top: calc(var(--ds-lap) * -1);
  border-radius: 30px 30px 0 0;
  transition: margin-top 0.3s ease, border-radius 0.3s ease, box-shadow 0.3s ease;
}
.ds-header-bar {
  display: flex;
  align-items: center;
  gap: 32px;
  height: var(--ds-header-h);
  transition: height 0.3s ease;
}
.ds-logo img {
  height: 62px;
  width: auto;
  object-fit: contain;
}

.ds-nav {
  margin-left: auto;
}
.ds-nav > ul {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ds-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  border: 0;
  border-radius: 10px;
  background: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--ds-ink);
  cursor: pointer;
  transition: color 0.3s, background-color 0.3s;
}
.ds-nav-link i {
  font-size: 12px;
  transition: transform 0.3s;
}
.ds-nav-link:hover,
.ds-nav-link.is-active,
.ds-nav-link[aria-expanded="true"] {
  color: var(--ds-teal);
  background: var(--ds-teal-wash);
}
.ds-nav-link[aria-expanded="true"] i {
  transform: rotate(180deg);
}

.ds-header-cta {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* the template's pill button, in teal */
/* The fill sweeps in; it does not just swap.

   Hover used to cross-fade background-color, which at any duration reads as the
   colour changing rather than as the button responding - the whole surface
   moves at once and there is nothing to follow. The darker tone now arrives as
   a layer that scales in from the left, so the eye gets a direction.

   It is a pseudo-element behind the label rather than a background-position
   trick, because the label and the icon have to stay put and stay legible while
   it crosses. transform is the only thing animating, so this stays on the
   compositor. */
.ds-btn {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  border: 0;
  border-radius: 100px;
  background: var(--ds-teal);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ds-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ds-teal-deep);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}
.ds-btn:hover::before,
.ds-btn:focus-visible::before {
  transform: scaleX(1);
}
.ds-btn:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
}
/* The label and the icon sit above the sweeping layer. */
.ds-btn > * {
  position: relative;
  z-index: 1;
}
.ds-btn i {
  position: relative;
  z-index: 1;
  font-size: 13px;
  transition: transform 0.3s ease;
}
.ds-btn:hover i {
  transform: translateX(3px);
}

/* Someone who asked the OS to stop animation gets the colour, immediately. */
@media (prefers-reduced-motion: reduce) {
  .ds-btn,
  .ds-btn::before,
  .ds-btn i {
    transition: none;
  }
  .ds-btn:hover {
    transform: none;
  }
}
.ds-btn-block {
  width: 100%;
  justify-content: center;
  margin-top: 22px;
}

.ds-burger {
  display: none;
  width: 46px;
  height: 46px;
  border: 1px solid var(--ds-line);
  border-radius: 12px;
  background: #fff;
  color: var(--ds-ink);
  font-size: 18px;
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s;
}
.ds-burger:hover {
  border-color: var(--ds-teal);
  color: var(--ds-teal);
}

/* ------------------------------------------------------------------ */
/* mega panel                                                          */
/* ------------------------------------------------------------------ */

.ds-mega {
  background: var(--ds-glass-solid);
  -webkit-backdrop-filter: var(--ds-glass-blur);
  backdrop-filter: var(--ds-glass-blur);
  border-top: 1px solid var(--ds-glass-edge);
  box-shadow: 0 24px 48px rgba(28, 28, 37, 0.12);
  animation: ds-mega-in 0.28s ease both;
}
@keyframes ds-mega-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}
.ds-mega-inner {
  display: grid;
  grid-template-columns: 1fr 1fr 320px;
  gap: 40px;
  padding: 34px 0 38px;
}
.ds-mega-inner.no-feature {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 720px;
}
.ds-mega-heading {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ds-muted);
}
.ds-mega-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ds-mega-item {
  display: flex;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 12px;
  transition: background-color 0.3s ease;
}
.ds-mega-item:hover {
  background: var(--ds-teal-wash);
}
/* The icon is drawn with currentColor, so the circle only has to change two
   properties on hover and the glyph follows: teal on a pale wash, white on a
   filled teal disc. */
.ds-mega-ic {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ds-teal-wash);
  color: var(--ds-teal);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.ds-mega-item:hover .ds-mega-ic {
  background: var(--ds-teal);
  color: #fff;
}
.ds-mega-txt strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--ds-ink);
  transition: color 0.3s;
}
.ds-mega-item:hover .ds-mega-txt strong {
  color: var(--ds-teal);
}
.ds-mega-txt span {
  display: block;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ds-muted);
}

/* feature card — the one thing we would rather they clicked */
.ds-mega-feature {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 15px;
  background: var(--ds-ink);
  min-height: 260px;
}
.ds-mega-feature > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.42;
  transition: transform 0.5s ease, opacity 0.5s ease;
}
.ds-mega-feature:hover > img {
  transform: scale(1.08);
  opacity: 0.3;
}
.ds-mega-feature-body {
  position: relative;
  display: block;
  padding: 24px;
}
.ds-mega-feature-eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 12px;
  border-radius: 100px;
  background: var(--ds-teal);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ds-mega-feature strong {
  display: block;
  margin-bottom: 8px;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
}
.ds-mega-feature-text {
  display: block;
  margin-bottom: 18px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}
.ds-mega-feature-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}
.ds-mega-feature-cta i {
  transition: transform 0.3s ease;
}
.ds-mega-feature:hover .ds-mega-feature-cta i {
  transform: translateX(5px);
}

/* ------------------------------------------------------------------ */
/* products panel                                                      */
/* ------------------------------------------------------------------ */

/* Pick on the left, read in the middle, act on the right. The middle and right
   columns are driven entirely by whichever entry on the left is hovered, so a
   second product is a data change and nothing else. */
.ds-prod-panel {
  display: grid;
  grid-template-columns: 330px 1fr 320px;
  gap: 36px;
  padding: 30px 0 34px;
}

/* ---- left: the picker ---- */
.ds-prod-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 14px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.ds-prod-item img {
  flex: 0 0 74px;
  width: 74px;
  height: auto;
  object-fit: contain;
  /* The box art is a lit 3D render; a soft drop keeps it from floating. */
  filter: drop-shadow(0 6px 12px rgba(28, 28, 37, 0.18));
  transition: transform 0.5s ease;
}
.ds-prod-item.is-on {
  background: var(--ds-teal-wash);
  border-color: rgba(0, 150, 136, 0.28);
}
.ds-prod-item.is-on img {
  transform: scale(1.06);
}
.ds-prod-item > span {
  display: block;
  min-width: 0;
}
.ds-prod-item strong {
  display: block;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ds-ink);
  transition: color 0.3s ease;
}
.ds-prod-item.is-on strong {
  color: var(--ds-teal-deep);
}
.ds-prod-item span span {
  display: block;
  font-size: 13.5px;
  color: var(--ds-muted);
}

/* ---- middle: features of the picked product ---- */
.ds-prod-features ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Copy, not a control — so no hover state and no pointer. The teal rule on the
   left is what marks each one as an item in a list. */
.ds-prod-feature {
  display: block;
  padding: 9px 0 9px 14px;
  border-left: 2px solid var(--ds-teal);
}
.ds-prod-feature strong {
  display: block;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ds-ink);
}
.ds-prod-feature span {
  display: block;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ds-muted);
}

/* ---- right: artwork and the download ---- */
.ds-prod-promo {
  padding: 22px;
  border-radius: 15px;
  background: var(--ds-teal-wash);
  border: 1px solid rgba(0, 150, 136, 0.18);
  text-align: center;
}
.ds-prod-promo > img {
  width: 100%;
  max-width: 230px;
  height: auto;
  margin: 0 auto 16px;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(28, 28, 37, 0.2));
}
.ds-prod-promo strong {
  display: block;
  margin-bottom: 6px;
  font-size: 18px;
  font-weight: 600;
  color: var(--ds-ink);
}
.ds-prod-promo > span {
  display: block;
  margin-bottom: 16px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ds-muted);
}
.ds-prod-promo .ds-btn {
  margin-top: 0;
}

/* ------------------------------------------------------------------ */
/* mobile drawer                                                       */
/* ------------------------------------------------------------------ */

.ds-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  width: min(360px, 88vw);
  background: var(--ds-glass-solid);
  -webkit-backdrop-filter: var(--ds-glass-blur);
  backdrop-filter: var(--ds-glass-blur);
  transform: translateX(102%);
  transition: transform 0.4s ease;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.ds-drawer.is-open {
  transform: translateX(0);
}
.ds-drawer-veil {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(28, 28, 37, 0.45);
}
.ds-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--ds-line);
}
.ds-drawer-close {
  width: 40px;
  height: 40px;
  border: 1px solid var(--ds-line);
  border-radius: 10px;
  background: #fff;
  font-size: 17px;
  cursor: pointer;
}
.ds-drawer-body {
  padding: 14px 22px 32px;
}
.ds-drawer-group {
  border-bottom: 1px solid var(--ds-line);
}
.ds-drawer-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 15px 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  color: var(--ds-ink);
  text-align: left;
  cursor: pointer;
}
.ds-drawer-sub {
  margin: 0;
  padding: 0 0 14px 4px;
  list-style: none;
}
.ds-drawer-sub li {
  margin-bottom: 11px;
}
.ds-drawer-sub a {
  font-size: 15px;
  color: var(--ds-muted);
}
.ds-drawer-sub a:hover {
  color: var(--ds-teal);
}
.ds-drawer-contact {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}
.ds-drawer-contact a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--ds-muted);
}
.ds-drawer-contact i {
  color: var(--ds-teal);
}

/* ------------------------------------------------------------------ */
/* mobile action bar                                                   */
/* ------------------------------------------------------------------ */

.ds-mbar {
  display: none;
  position: fixed;
  inset: auto 0 0 0;
  z-index: 890;
  /* Four equal columns. `minmax(0, 1fr)` rather than `1fr`, because a bare
     `1fr` floors at the column's min-content width — one long label ("WhatsApp")
     would then widen its own column and push the last one off a 360px screen. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  box-shadow: 0 -6px 24px rgba(28, 28, 37, 0.14);
  border-top: 1px solid var(--ds-line);
  /* Clears the home-indicator strip on iOS without adding it elsewhere. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: #fff;
  /* Parked below the fold until the reader has started scrolling. */
  transform: translateY(110%);
  transition: transform 0.35s ease;
}
.ds-mbar.is-shown {
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .ds-mbar {
    transition: none;
  }
}

/* Icon over label, not beside it. Two side-by-side halves could carry a 17px
   label; four columns on a 360px screen cannot, and shrinking the text until it
   fits sideways is how a tap target ends up unreadable. Stacked, each column is
   90px wide at 360px with room to spare. */
.ds-mbar-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 60px;
  padding: 9px 4px;
  border-radius: 0;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.005em;
  text-align: center;
  color: var(--ds-ink);
  background: #fff;
  border-left: 1px solid var(--ds-line);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.ds-mbar-btn:first-child {
  border-left: 0;
}
/* One line each. A label that wrapped would push the icon up and leave the four
   columns at different heights. */
.ds-mbar-btn span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-mbar-btn i {
  font-size: 17px;
  line-height: 1;
  color: var(--ds-teal);
}
.ds-mbar-btn:active {
  background: var(--ds-teal-wash);
}
/* The one action that leaves for the store keeps the teal fill it always had. */
.ds-mbar-btn.is-product {
  background: var(--ds-teal);
  color: #fff;
  border-left: 0;
}
.ds-mbar-btn.is-product i {
  color: #fff;
}
.ds-mbar-btn.is-product:active {
  background: var(--ds-teal-deep);
}

/* Under ~340px four labels stop being honest even at 11.5px. Drop to the two
   actions that matter most rather than letting all four ellipsise. */
@media (max-width: 339px) {
  .ds-mbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ds-mbar-btn:nth-child(3),
  .ds-mbar-btn:nth-child(4) {
    display: none;
  }
}

@media (max-width: 991px) {
  .ds-mbar {
    display: grid;
  }
  /* Keep the bar off the last rows of the footer. */
  #smooth-content {
    padding-bottom: 61px;
  }
  /* The scroll-to-top ring sits at bottom:20px and z-index 99, so the action
     bar (z-index 890, 62px tall) covered it completely. Lift it clear. */
  .progress-wrap {
    bottom: calc(81px + env(safe-area-inset-bottom, 0px));
    right: 16px;
  }
}

/* ------------------------------------------------------------------ */
/* footer                                                              */
/* ------------------------------------------------------------------ */

.ds-footer {
  background: var(--ds-ink);
  color: rgba(255, 255, 255, 0.68);
}
.ds-footer-top {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 56px;
  padding: 72px 0 56px;
}
.ds-footer-brand img {
  height: 84px;
  width: auto;
  margin-bottom: 24px;
  object-fit: contain;
}
.ds-footer-brand p {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.65;
}
.ds-footer-social {
  display: flex;
  gap: 10px;
}
.ds-footer-social a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 15px;
  transition: background-color 0.3s ease;
}
.ds-footer-social a:hover {
  background: var(--ds-teal);
}
.ds-footer-cols {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 32px;
}
.ds-footer-cols h4 {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}
.ds-footer-cols ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ds-footer-cols li {
  margin-bottom: 10px;
}
.ds-footer-cols a {
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.62);
  transition: color 0.3s ease, padding-left 0.3s ease;
}
.ds-footer-cols a:hover {
  color: var(--ds-teal);
  padding-left: 4px;
}
.ds-footer-base {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 14px;
}
.ds-footer-base a:hover {
  color: var(--ds-teal);
}
.ds-footer-legal {
  display: flex;
  gap: 22px;
}

/* ------------------------------------------------------------------ */
/* responsive                                                          */
/* ------------------------------------------------------------------ */

@media (max-width: 1399px) {
  .ds-mega-inner {
    grid-template-columns: 1fr 1fr 280px;
    gap: 28px;
  }
  .ds-prod-panel {
    grid-template-columns: 290px 1fr 270px;
    gap: 24px;
  }
  .ds-prod-item img {
    flex-basis: 62px;
    width: 62px;
  }
}
/* Tablet landscape and below take the drawer.
 *
 * The audit found the full nav still rendering at 1024 and 1180: six mega
 * triggers plus Contact, a 62px logo and a CTA button, all competing for a
 * container that has already lost 200px. It fits only by shrinking the labels
 * to the point of illegibility. The drawer is the honest answer at this size. */
@media (max-width: 1199px) {
  .ds-nav,
  .ds-header-cta .ds-btn {
    display: none;
  }
  .ds-header-cta {
    margin-left: auto;
  }
  .ds-burger {
    display: grid;
    place-items: center;
  }
  .ds-mbar {
    display: grid;
  }
  #smooth-content {
    padding-bottom: 61px;
  }
  .progress-wrap {
    bottom: calc(81px + env(safe-area-inset-bottom, 0px));
    right: 16px;
  }
  .ds-mega-inner {
    grid-template-columns: 1fr 1fr;
  }
  .ds-mega-feature {
    grid-column: 1 / -1;
    min-height: 200px;
  }
  /* Below this the three product columns will not hold their widths; the
     download card drops under the other two and goes horizontal. */
  .ds-prod-panel {
    grid-template-columns: 280px 1fr;
  }
  .ds-prod-promo {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 170px 1fr auto;
    gap: 20px;
    align-items: center;
    text-align: left;
  }
  .ds-prod-promo > img {
    margin: 0;
    max-width: 170px;
  }
  .ds-prod-promo strong,
  .ds-prod-promo > span {
    margin: 0;
  }
  .ds-prod-promo .ds-btn-block {
    width: auto;
  }
  .ds-footer-top {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .ds-footer-cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 991px) {
  /* No teal band on a phone, so nothing to seat the white sheet into.
     Above this width the band stays — a tablet has room for it. */
  .ds-header-top {
    display: none;
  }
  .ds-header-main {
    margin-top: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--ds-line);
  }
  .ds-header-bar,
  .ds-header.is-pinned .ds-header-bar {
    height: 80px;
  }
  .ds-logo img,
  .ds-header.is-pinned .ds-logo img {
    height: 52px;
  }
}
@media (max-width: 767px) {
  .ds-footer-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ds-footer-top {
    padding: 48px 0 36px;
  }
}
@media (max-width: 479px) {
  .ds-footer-cols {
    grid-template-columns: 1fr;
  }
}

/* ---------------- navigation progress ---------------- */

/* The bar sits above everything including the sticky header, and is only in the
   document while a navigation is actually in flight - see NavProgress. */
.ds-navprogress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  height: 3px;
  background: rgba(0, 150, 136, 0.14);
  pointer-events: none;
}
/* Runs to 70% on its own, because the real figure is unknowable until the route
   resolves and a bar that stalls at a number looks broken. The last 30% is the
   arrival. */
.ds-navprogress-bar {
  display: block;
  height: 100%;
  width: 70%;
  background: var(--ds-teal);
  transform-origin: left center;
  animation: ds-navprogress-run 900ms cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
.ds-navprogress-bar.is-done {
  width: 100%;
  animation: none;
  transition: width 180ms ease-out, opacity 180ms ease-out 120ms;
  opacity: 0;
}
@keyframes ds-navprogress-run {
  from {
    width: 8%;
  }
  to {
    width: 70%;
  }
}

/* Text for a screen reader that should not take up space. */
.ds-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .ds-navprogress-bar {
    animation: none;
    width: 70%;
  }
}

/* The loading curtain, suppressed after the first page of a visit.
   Set before the first paint by the inline script in layout.tsx — see the
   comment there. The element is also removed on DOMContentLoaded so main.js
   skips its timeline; this rule is what stops it being seen in the moments
   before that. */
.ds-no-loader .loader-wrap {
  display: none !important;
}

/* ==================================================================== */
/* mobile menu — larger, centred                                        */
/*                                                                      */
/* The drawer is the only navigation that exists below 992px, so its
   targets should not be smaller than the ones on a desktop that has a
   mouse. 17px was the template's; a top-level menu item on a phone is
   worth more than that, and centring gives every row the same optical
   axis as the logo above it. */
/* ==================================================================== */

.ds-drawer-toggle {
  /* Was space-between, which parked the chevron on the far right and left
     the label hard against the left edge. Centred as a pair, the label and
     its chevron read as one control. */
  justify-content: center;
  gap: 10px;
  padding: 17px 0;
  font-size: 19px;
  text-align: center;
}
.ds-drawer-sub {
  padding: 0 0 16px;
  text-align: center;
}
.ds-drawer-sub li {
  margin-bottom: 13px;
}
.ds-drawer-sub a {
  font-size: 16.5px;
}
.ds-drawer-contact {
  justify-items: center;
  text-align: center;
}
.ds-drawer-head {
  /* The logo takes the middle, the close button keeps the corner it is
     easiest to reach with a thumb. */
  justify-content: center;
  position: relative;
}
.ds-drawer-head .ds-drawer-close {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
}

/* ==================================================================== */
/* footer columns — accordions on a phone                               */
/*                                                                      */
/* Five columns stacked one under another is most of three screens of
   scrolling before the copyright line. Collapsed, the whole footer is one
   screen and the column you want is one tap away. Every link stays in the
   markup either way — the footer is the site's second sitemap and a
   crawler must still see all of it. */
/* ==================================================================== */

.ds-footer-cols h4 {
  /* The heading is now a button wrapper; the type styling moves inward. */
  font-size: inherit;
  font-weight: inherit;
}
.ds-footer-acc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  text-align: left;
  /* Above a phone this is a heading that happens to be a button element. */
  cursor: default;
  pointer-events: none;
}
.ds-footer-acc > i {
  display: none;
  font-size: 12px;
  transition: transform 0.25s ease;
}

@media (max-width: 767px) {
  .ds-footer-cols {
    /* One accordion per row — a two-column grid of collapsible rows reads
       as four unrelated controls. */
    grid-template-columns: 1fr;
    gap: 0;
  }
  .ds-footer-col {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  .ds-footer-col:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
  .ds-footer-cols h4 {
    margin: 0;
  }
  .ds-footer-acc {
    justify-content: center;
    padding: 16px 0;
    font-size: 17px;
    text-align: center;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
  }
  .ds-footer-acc > i {
    display: inline-block;
  }
  .ds-footer-col.is-open .ds-footer-acc > i {
    transform: rotate(180deg);
  }
  /* Collapsed by CSS rather than by not rendering, so the links are always
     in the HTML. */
  .ds-footer-cols ul {
    display: none;
    padding-bottom: 14px;
    text-align: center;
  }
  .ds-footer-col.is-open ul {
    display: block;
  }
  .ds-footer-cols a {
    font-size: 15.5px;
  }
  /* The hover nudge is a pointer affordance; on a phone it just makes a
     centred list twitch off its axis. */
  .ds-footer-cols a:hover {
    padding-left: 0;
  }

  /* The brand block above the columns centres with them. */
  .ds-footer-brand {
    text-align: center;
  }
  .ds-footer-brand img {
    margin-left: auto;
    margin-right: auto;
  }
  .ds-footer-social {
    justify-content: center;
  }
  .ds-footer-base,
  .ds-footer-legal {
    justify-content: center;
    text-align: center;
  }
}

/* The scroll-to-top ring is fixed at bottom:81px on a phone, clear of the
   action bar — but the footer's own last row lands in exactly that band once
   you have scrolled to the end of the page, and the ring then sits on top of
   "Terms & Conditions", hiding the end of the label and swallowing the tap.
   Measured at 390px: the legal row spans y 865-917, the ring 869-919.
   The gutter below the row is what keeps the two apart. */
@media (max-width: 991px) {
  .ds-footer-base {
    padding-bottom: 84px;
  }
}