/*
 * Homepage sections, in the template's visual language.
 *
 * Loaded after ds-theme.css. Same rules as that file: every class is ds-
 * prefixed, colour comes from the logo teal already sitting in --theme, and the
 * motion timings are the template's own — 0.3s for small state changes, 0.5s
 * for anything that moves a whole card.
 */

/* Matches the template's .section-subtitle exactly: 14px, medium, uppercase,
   pill border rather than a filled chip. */
/* Filled, not outlined.
   It was a hairline pill with teal text on the page ground, which at 14px
   uppercase read as a caption rather than as a label - on the tinted sections
   it barely separated from the background at all. Solid teal with white type
   gives it the weight the thing is for. */
.ds-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 8px 20px;
  border: 1px solid var(--ds-teal);
  border-radius: 50px;
  background: var(--ds-teal);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
}

/* The template's .section-spacing. */
.ds-section {
  padding: 120px 0;
}
.ds-section-grey {
  background: var(--ds-teal-wash);
}

/* Eyebrow on its own row; heading and the optional link share the next one.
 *
 * This used to be a 720px-wide box with the link absolutely positioned at its
 * right edge, which collided with any heading long enough to reach 720px — at
 * 1024px "Built for the environments that get audited" ran straight through
 * "All sectors". Flow layout cannot overlap, and when the two no longer fit
 * side by side the link wraps onto its own line by itself. */
/* Grid, not flex.
 *
 * Flex was giving the eyebrow `flex: 0 0 100%` to force it onto its own row,
 * and that stretched the pill to the full width of the section — a two-word
 * label inside a container-wide box. In grid the eyebrow can span both columns
 * and still shrink to its own text, which is what `justify-self: start` does. */
.ds-head {
  display: grid;
  /* `minmax(0, 1fr)`, not `1fr`. A bare `1fr` floors at the heading's
     min-content width, so on a narrow screen the first column refuses to
     shrink and the link in the second is pushed past the container — measured
     at 360px as "All sectors" sitting 8px outside the page. */
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 14px 40px;
  margin-bottom: 48px;
}
.ds-head .ds-eyebrow {
  grid-column: 1 / -1;
  justify-self: start;
  margin-bottom: 2px;
}
/* .section-title in the template: 44px, stepping down at its own breakpoints. */
.ds-head h2 {
  flex: 1 1 420px;
  max-width: 22ch;
  margin: 0;
  font-size: 44px;
  font-weight: 600;
  line-height: 1.22;
  color: var(--ds-ink);
}
/* A line of qualification under a section heading, inside the grid's first
   column so it wraps against the heading rather than the whole row. */
.ds-head-note {
  grid-column: 1 / -1;
  max-width: 64ch;
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ds-muted);
}
.ds-head-link {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ds-teal);
  white-space: nowrap;
}
.ds-head-link i {
  transition: transform 0.3s ease;
}
.ds-head-link:hover {
  color: var(--ds-teal-deep);
}
.ds-head-link:hover i {
  transform: translateX(5px);
}

.ds-grid {
  display: grid;
  gap: 24px;
}
.ds-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ds-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ds-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ---------------- hero ---------------- */

.ds-hero {
  position: relative;
  padding: 220px 0 110px;
  overflow: hidden;
  background: var(--ds-ink);
}
.ds-hero-bg {
  position: absolute;
  inset: 0;
}

/* Drifting binary behind the headline.

   The photograph alone left the hero flat. This lays columns of 1s and 0s over
   it, very faint, sliding downward at different speeds so the field never
   repeats visibly. It is drawn in CSS from a repeating linear-gradient of text
   - no image, no script, nothing to download.

   Opacity is the whole design here: at 0.06 it is texture the eye finds only
   when it looks for it, and the headline keeps every bit of contrast. Anything
   brighter turns the hero into a novelty. */
.ds-hero-code {
  position: absolute;
  inset: -10% 0 -10%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  font-family: "Consolas", "Courier New", monospace;
  font-size: 13px;
  line-height: 1.9;
  letter-spacing: 2px;
  /* A lighter teal than the brand one: --ds-teal is mixed for white grounds and
     disappears against the ink. */
  color: #6fd8cb;
  /* 0.06 was invisible over a dark photograph - measured by looking, not by
     reasoning about it. 0.14 is legible as texture when you look for it and
     still leaves the headline the only thing with contrast. */
  opacity: 0.14;
  user-select: none;
}
.ds-hero-code span {
  position: absolute;
  top: -120%;
  white-space: pre;
  writing-mode: vertical-rl;
  animation: ds-code-fall linear infinite;
}
@keyframes ds-code-fall {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(220%);
  }
}

/* Someone who has asked the operating system to stop animation gets the field
   as a still. Removing it entirely would leave the hero emptier than it was
   before, which is not what that setting is asking for. */
@media (prefers-reduced-motion: reduce) {
  .ds-hero-code span {
    animation: none;
    top: 0;
  }
}
/* Kept very low. This is texture behind the headline, not something to look at —
   at 0.15 it registers in peripheral vision and the type stays the only thing
   with contrast. */
.ds-hero-bg img {
  width: 100%;
  height: 118%;
  object-fit: cover;
  /* Down from 0.15. At that level the photograph was neither visible enough to
     be an image nor faint enough to be texture - it just greyed the ink out.
     The binary field carries the movement now, so the photograph only has to
     stop the ground being flat. */
  opacity: 0.1;
}

/* The reduced-motion block that used to live here hid the background video and
   swapped in its poster. There is no video any more - the hero is a still - so
   there is nothing to stop, and a rule naming an element the markup no longer
   contains is just something for the next person to puzzle over. */
.ds-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(28, 28, 37, 0.94) 30%, rgba(0, 150, 136, 0.45) 100%);
}
.ds-hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 60px;
  align-items: center;
}
/* The template's hero-3 title: 72px / 1.11, stepping to 62 and 46. */
.ds-hero-title {
  margin: 0 0 20px;
  font-size: 72px;
  font-weight: 600;
  line-height: 1.11;
  color: #fff;
}
.ds-hero-title span {
  display: block;
  color: var(--ds-teal);
}
.ds-hero-lead {
  max-width: 56ch;
  margin: 0 0 32px;
  font-size: 18px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.74);
}
.ds-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
/* The ghost sweeps too, in white rather than deep teal, and its label flips to
   ink as the fill arrives. Without overriding ::before it would inherit the
   solid button's teal and sweep the wrong colour over a transparent button. */
.ds-btn-ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
}
.ds-btn-ghost::before {
  background: #fff;
}
.ds-btn-ghost:hover {
  background: transparent;
  border-color: #fff;
  color: var(--ds-ink);
}
.ds-hero-marks {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}
.ds-hero-marks li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
}
.ds-hero-marks i {
  color: var(--ds-teal);
}

/* The booking panel.

   It was a plain white rounded rectangle - the same shape as every card further
   down the page, which left the one thing in the hero asking for an action
   looking like a content tile. It now has a shape of its own: a teal band across
   the top that ties it to the brand, and the two outer corners cut square so the
   silhouette is asymmetric rather than another pill-cornered box.

   The band is a pseudo-element rather than a border so it can sit inside the
   clipped corner radius without fighting it. */
.ds-hero-panel {
  position: relative;
  padding: 34px 30px 30px;
  border-radius: 18px 4px 18px 4px;
  background: #fff;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}
.ds-hero-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: linear-gradient(90deg, var(--ds-teal), var(--ds-teal) 55%, #7fd6cb);
}
/* A soft teal wash bleeding out of the top-left corner, so the panel reads as
   lit rather than flat. Kept under the content. */
.ds-hero-panel::after {
  content: "";
  position: absolute;
  top: -70px;
  left: -70px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: var(--ds-teal);
  opacity: 0.07;
  pointer-events: none;
}
.ds-hero-panel > * {
  position: relative;
  z-index: 1;
}
.ds-hero-panel h3 {
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.22;
  color: var(--ds-ink);
}
.ds-hero-panel > p {
  margin: 0 0 22px;
  font-size: 14.5px;
  color: var(--ds-muted);
}
/* The fields themselves are .ds-field, styled once in ds-page.css and shared
   by all three forms on the site. What is left here is only the stacking this
   panel wants - the old bespoke label/input rules were a second, slightly
   different field treatment for no reason other than that this form was built
   first. */
.ds-hero-form {
  display: grid;
  gap: 16px;
}

/* ---------------- proof strip ---------------- */

.ds-proof {
  position: relative;
  z-index: 5;
  margin-top: -46px;
  padding: 0;
}
.ds-proof-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 34px 20px;
  list-style: none;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 20px 50px rgba(28, 28, 37, 0.1);
}
.ds-proof-row li {
  text-align: center;
  border-right: 1px solid var(--ds-line);
}
.ds-proof-row li:last-child {
  border-right: 0;
}
.ds-proof-row strong {
  display: block;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--ds-teal);
}
/* The figure is rendered by <Counter>. Reserve a little width so the strip does
   not jitter as the digits climb from 0 to 100 — but leave the numerals alone:
   forcing tabular figures here changed the shape of every digit, which is not
   what the type is supposed to look like. */
.ds-proof-row strong span {
  display: inline-block;
  min-width: 2.4ch;
}
/* Direct child of the <li> only. Written as a bare `.ds-proof-row span` this
   also matched the <span> that <Counter> renders inside the <strong>, which
   dropped the figure from 40px teal to 15px grey. */
.ds-proof-row li > span {
  font-size: 15px;
  color: var(--ds-muted);
}

/* ---------------- card ---------------- */

.ds-card {
  position: relative;
  z-index: 1;
  padding: 30px;
  border: 1px solid var(--ds-line);
  border-radius: 15px;
  background: #fff;
  overflow: hidden;
  transition: border-color 0.5s ease, transform 0.5s ease;
}
/* The template's signature hover: a heavily blurred orb drifts in from the
   bottom-right corner and settles behind the icon. */
.ds-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 131px;
  left: 113px;
  width: 212px;
  height: 212px;
  background-color: var(--ds-teal);
  filter: blur(125px);
  opacity: 0;
  transition: all 0.5s;
}
.ds-card:hover::before {
  top: -81px;
  left: -63px;
  opacity: 0.5;
}
.ds-card:hover {
  border-color: var(--ds-teal);
  transform: translateY(-4px);
}
/* Teal glyph on a pale disc; on hover the disc fills and the glyph — drawn
   with currentColor — turns white with it. */
.ds-card-ic {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: 22px;
  border-radius: 50%;
  background: var(--ds-teal-wash);
  color: var(--ds-teal);
  transition: background-color 0.5s ease, color 0.5s ease;
}
.ds-card:hover .ds-card-ic {
  background: var(--ds-teal);
  color: #fff;
}
.ds-card h3 {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 600;
  color: var(--ds-ink);
}
.ds-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ds-muted);
}
.ds-card-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ds-teal);
}
.ds-card-more i {
  transition: transform 0.3s ease;
}
.ds-card-link:hover .ds-card-more i {
  transform: translateX(5px);
}

/* ---------------- brand wall ---------------- */

/* The panel, on the template's brand-2 measurements: 1px theme border, 30px
   radius, tinted ground, 100px of inset. The tint is the template's #EBEDF5
   shifted off lavender onto our teal. */
.ds-brandwrap {
  padding: 100px;
  border: 1px solid var(--ds-teal);
  border-radius: 30px;
  background-color: #e9f0ef;
}
/* Title left, action right, both sitting on the same baseline. */
.ds-brand-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px 60px;
  align-items: flex-end;
}
.ds-brand-header h2 {
  margin: 19px 0 0;
  font-size: 44px;
  font-weight: 600;
  line-height: 1.22;
  color: var(--ds-ink);
}
.ds-brand-header .ds-btn {
  margin-bottom: 12px;
}

.ds-brands {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 59px 0 0;
  padding: 0;
  list-style: none;
}
/* The template's brand box: 100px tall, white, 15px radius, no border — the
   panel behind it is what separates them — and a lifting shadow on hover. */
.ds-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  padding: 20px;
  border-radius: 15px;
  background: #fff;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.ds-brand:hover {
  box-shadow: 0 11px 38px rgba(25, 14, 50, 0.17);
  transform: translateY(-3px);
}
/* Grey at rest so thirteen different brand palettes do not fight the page;
   full colour on hover. */
.ds-brand img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter 0.3s ease, opacity 0.3s ease;
}
.ds-brand:hover img {
  filter: grayscale(0);
  opacity: 1;
}

/* .ds-eyebrow-dots used to add a mirrored pair of teal dots either side of the
   label. Teal is now the pill's own ground, so they would have had to be
   recoloured to be visible at all - and they were decoration that made a short
   label wider without saying anything. The class is kept as a no-op so the
   eleven places that still name it do not have to change together. */
.ds-eyebrow-dots {
  padding-inline: 20px;
}

@media (max-width: 1199px) {
  .ds-brandwrap {
    padding: 60px 44px;
  }
  .ds-brands {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 44px;
  }
  .ds-brand-header h2 {
    font-size: 34px;
  }
}
@media (max-width: 767px) {
  .ds-brandwrap {
    padding: 36px 22px;
    border-radius: 20px;
  }
  .ds-brand-header {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 20px;
  }
  .ds-brand-header h2 {
    font-size: 30px;
    margin-top: 12px;
  }
  .ds-brand-header .ds-btn {
    margin-bottom: 0;
  }
  .ds-brands {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 30px;
  }
  .ds-brand {
    height: 84px;
    padding: 16px;
  }
}

/* ---------------- product showcase ---------------- */

.ds-prodshow {
  padding: 0 0 120px;
}
/* The shape: a deep teal plate with a generous radius, lit from behind the box
   art. The reference for this section was a flat full-bleed band, which made
   the artwork look pasted on; seating it in a rounded panel with its own light
   source gives the render somewhere to sit. */
.ds-prodshow-panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.85fr 1.35fr auto;
  gap: 40px 56px;
  align-items: center;
  padding: 64px 60px;
  border-radius: 30px;
  overflow: hidden;
  background: linear-gradient(115deg, #00302c 0%, #004b44 46%, #01655c 100%);
}
/* A large, very soft light behind the box. */
.ds-prodshow-glow {
  position: absolute;
  z-index: -1;
  left: -6%;
  top: 50%;
  width: 460px;
  height: 460px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--ds-teal);
  filter: blur(150px);
  opacity: 0.55;
}

/* The hex field sits at z-index 0 inside the panel, so everything the reader
   is meant to look at has to be lifted above it. */
.ds-prodshow-art,
.ds-prodshow-body,
.ds-prodshow-caps {
  position: relative;
  z-index: 1;
}

.ds-prodshow-art img {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 26px 44px rgba(0, 0, 0, 0.42));
}

.ds-prodshow-body h2 {
  margin: 0 0 8px;
  font-size: 44px;
  font-weight: 600;
  line-height: 1.15;
  color: #fff;
}
.ds-prodshow-body h2 span {
  color: var(--ds-teal);
}
/* The eyebrow is a light-ground component; on the dark plate it needs its own
   border and colour rather than the teal wash. */
.ds-eyebrow.is-onDark {
  border-color: rgba(255, 255, 255, 0.22);
  background: transparent;
  color: #6fded4;
}
.ds-prodshow-tag {
  margin: 0 0 26px;
  font-size: 17px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.ds-prodshow-list {
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
}
.ds-prodshow-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 16.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
}
.ds-prodshow-list i {
  flex: 0 0 auto;
  margin-top: 4px;
  font-size: 14px;
  color: var(--ds-teal);
}

.ds-prodshow-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 26px;
}
/* The second action is a link with an icon, not a second button — two filled
   buttons side by side make neither of them the primary one. */
/* A text link wearing the button class. It has no surface to fill, so the sweep
   is switched off rather than left to slide an invisible rectangle around. */
.ds-btn-plain {
  padding: 13px 0;
  background: transparent;
  color: #fff;
}
.ds-btn-plain::before {
  display: none;
}
.ds-btn-plain:hover {
  background: transparent;
  color: var(--ds-teal);
  transform: none;
  box-shadow: none;
}

.ds-prodshow-marks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.ds-prodshow-marks li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.66);
}
.ds-prodshow-marks i {
  color: var(--ds-teal);
}

.ds-prodshow-caps {
  margin: 0;
  padding: 0 0 0 56px;
  list-style: none;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.ds-prodshow-caps li {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}
.ds-prodshow-caps li:last-child {
  margin-bottom: 0;
}
.ds-prodshow-capic {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--ds-teal);
}

@media (max-width: 1399px) {
  .ds-prodshow-panel {
    grid-template-columns: 0.8fr 1.3fr auto;
    gap: 32px 40px;
    padding: 52px 44px;
  }
  .ds-prodshow-caps {
    padding-left: 40px;
  }
  .ds-prodshow-body h2 {
    font-size: 38px;
  }
}
@media (max-width: 1199px) {
  /* The capability rail cannot hold a column of its own here — it drops below
     and goes horizontal, which also gives the box art room back. */
  .ds-prodshow-panel {
    grid-template-columns: 0.9fr 1.4fr;
  }
  .ds-prodshow-caps {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px 28px;
    padding: 30px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }
  .ds-prodshow-caps li {
    margin-bottom: 0;
    white-space: normal;
  }
}
@media (max-width: 991px) {
  .ds-prodshow {
    padding-bottom: 80px;
  }
  .ds-prodshow-panel {
    grid-template-columns: 1fr;
    padding: 40px 30px;
    text-align: left;
  }
  .ds-prodshow-art {
    max-width: 340px;
  }
  .ds-prodshow-glow {
    left: 20%;
    top: 20%;
    width: 320px;
    height: 320px;
  }
  .ds-prodshow-body h2 {
    font-size: 32px;
  }
}
@media (max-width: 767px) {
  .ds-prodshow-panel {
    padding: 30px 20px;
    border-radius: 20px;
    gap: 26px;
  }
  .ds-prodshow-art {
    max-width: 100%;
  }
  .ds-prodshow-list li,
  .ds-prodshow-caps li {
    font-size: 15px;
  }
  .ds-prodshow-cta .ds-btn {
    width: 100%;
    justify-content: center;
  }
  .ds-btn-plain {
    padding: 10px 0;
  }
}

/* ---------------- steps ---------------- */

.ds-step {
  padding: 34px 30px 30px;
  border-radius: 15px;
  background: var(--ds-teal-wash);
}
.ds-step-n {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--ds-teal);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
}
.ds-step h3 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.22;
  color: var(--ds-ink);
}
.ds-step p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ds-muted);
}

/* ---------------- cta band ---------------- */

.ds-cta-band {
  padding: 0 0 96px;
}
.ds-cta-inner {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 52px;
  border-radius: 20px;
  background: var(--ds-ink);
}
/* Lifted above the band background. */
.ds-cta-inner > .ds-cta-copy,
.ds-cta-inner > .ds-btn {
  position: relative;
  z-index: 1;
}
.ds-cta-inner h2 {
  max-width: 20ch;
  margin: 0 0 10px;
  font-size: 36px;
  font-weight: 600;
  line-height: 1.22;
  color: #fff;
}
.ds-cta-inner p {
  max-width: 52ch;
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}

/* ---------------- faq ---------------- */

/* Full width, and two columns once there is room for them.
 *
 * This used to be capped at 860px, which on the 1410px container left the
 * right-hand half of every FAQ section empty. A single full-width accordion
 * would fix the gap but give the answers 150-character lines; two columns fill
 * the width and keep the measure readable. `align-items: start` stops a tall
 * open answer from stretching its neighbour. */
.ds-faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 12px 20px;
}
@media (max-width: 991px) {
  .ds-faq {
    grid-template-columns: 1fr;
  }
}
.ds-faq details {
  margin-bottom: 0;
  border: 1px solid var(--ds-line);
  border-radius: 12px;
  background: #fff;
  transition: border-color 0.3s ease;
}
.ds-faq details[open] {
  border-color: var(--ds-teal);
}
.ds-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  font-size: 17px;
  font-weight: 600;
  color: var(--ds-ink);
  cursor: pointer;
  list-style: none;
}
.ds-faq summary::-webkit-details-marker {
  display: none;
}
.ds-faq summary i {
  flex: 0 0 auto;
  font-size: 14px;
  color: var(--ds-teal);
  transition: transform 0.3s ease;
}
.ds-faq details[open] summary i {
  transform: rotate(45deg);
}
.ds-faq p {
  margin: 0;
  padding: 0 24px 22px;
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--ds-muted);
}

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

/* The template steps its own scale at 1919 / 1399 / 1199 / 991 / 767.
   These follow the same ladder so nothing jumps out of rhythm. */
@media (max-width: 1919px) {
  .ds-section {
    padding: 100px 0;
  }
  .ds-cta-band {
    padding-bottom: 100px;
  }
  .ds-head h2 {
    font-size: 42px;
  }
  .ds-hero-title {
    font-size: 62px;
  }
}
@media (max-width: 1399px) {
  .ds-head h2 {
    font-size: 38px;
  }
  .ds-hero-title {
    font-size: 54px;
  }
}
@media (max-width: 1199px) {
  .ds-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ds-head h2 {
    font-size: 34px;
  }
  .ds-hero-title {
    font-size: 46px;
  }
  .ds-cta-inner h2 {
    font-size: 32px;
  }
  .ds-hero {
    padding: 170px 0 90px;
  }
  /* Stays two columns here. Collapsing at 1199 dropped the form below the
     headline on every tablet and left the whole right half of the hero empty —
     there is room for both at this width, the panel just has to be narrower. */
  .ds-hero-inner {
    grid-template-columns: 1fr 330px;
    gap: 36px;
  }
  .ds-hero-panel {
    padding: 24px;
  }
  /* The narrow-panel squeeze. Padding-top has to stay large enough for the
     floating label to park in, so only the bottom and sides come in. */
  .ds-hero-form {
    gap: 12px;
  }
  .ds-hero-form .ds-field input {
    padding: 21px 14px 7px;
  }
}
@media (max-width: 991px) {
  .ds-section {
    padding: 80px 0;
  }
  .ds-cta-band {
    padding-bottom: 80px;
  }
  .ds-head h2 {
    font-size: 32px;
  }
  .ds-hero-title {
    font-size: 40px;
  }
  /* Below a tablet there genuinely is not room for two columns, so the panel
     goes under the headline — but only here, not at 1199. */
  .ds-hero-inner {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .ds-hero-panel {
    max-width: 460px;
    padding: 26px;
  }
  .ds-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ds-proof-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 0;
  }
  .ds-proof-row li:nth-child(2) {
    border-right: 0;
  }
  /* Heading and link stop sharing a row. Side by side there is not enough
     width left for either, and the link — which is nowrap, because "All
     sectors" broken over two lines reads as two links — is the one that ends
     up outside the container. On its own row it always fits. */
  .ds-head {
    grid-template-columns: minmax(0, 1fr);
  }
  .ds-head-link {
    position: static;
    justify-self: start;
    margin-left: 0;
    margin-top: 16px;
  }
  .ds-hero {
    padding: 130px 0 80px;
  }
}
@media (max-width: 767px) {
  .ds-grid-3,
  .ds-grid-4 {
    grid-template-columns: 1fr;
  }
  .ds-cta-inner {
    padding: 34px;
  }
  .ds-proof-row li {
    border-right: 0;
  }
}

/* The topic and reading time above an article title in the homepage list. */
.ds-readcard-topic {
  display: block;
  margin-bottom: 4px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-teal);
}

/* ---------------- recent posts ---------------- */

/* Three across, image led.

   Two earlier attempts at this section got the shape wrong. The first was a
   stack of icon-title-chevron rows, which is an FAQ accordion and was read as
   one. The second put image tiles down the left with an explanation beside
   them, which is a sidebar layout, not a posts row. This is the shape people
   actually recognise as a blog: a card each, thumbnail on top, date on the
   thumbnail, meta bar across its foot, then title, standfirst and a button. */
.ds-postgrid {
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 44px;
}
.ds-post {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ds-line);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  transition: box-shadow 0.28s ease, transform 0.28s ease;
}
.ds-post:hover {
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}

.ds-post-art {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--ds-teal-wash);
}
.ds-post-art img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.55s ease;
}
.ds-post:hover .ds-post-art img {
  transform: scale(1.06);
}

/* The date block, top left over the art. */
.ds-post-date {
  position: absolute;
  top: 0;
  left: 16px;
  display: grid;
  justify-items: center;
  padding: 10px 14px 8px;
  background: var(--ds-teal);
  color: #fff;
  line-height: 1;
}
.ds-post-date strong {
  font-size: 21px;
  font-weight: 700;
}
.ds-post-date em {
  margin-top: 4px;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 500;
  opacity: 0.92;
}

/* The bar across the foot of the image. */
.ds-post-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  padding: 10px 16px;
  background: rgba(20, 24, 28, 0.82);
  color: #fff;
  font-size: 12px;
}
.ds-post-meta i {
  margin-right: 6px;
  font-size: 11px;
  color: var(--ds-teal-light, #6fd8cb);
}

.ds-post-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 20px 22px;
}
.ds-post-body h3 {
  margin: 0 0 10px;
  font-size: 17.5px;
  font-weight: 600;
  line-height: 1.35;
}
.ds-post-body h3 a {
  color: var(--ds-ink);
  text-decoration: none;
  transition: color 0.2s ease;
}
.ds-post-body h3 a:hover {
  color: var(--ds-teal);
}
.ds-post-body p {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.62;
  color: var(--ds-muted);
  /* Three lines, so the buttons line up across the row whatever the
     standfirsts do. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Outlined, so it reads as secondary to the page's own teal buttons. */
.ds-post-more {
  align-self: flex-start;
  margin-top: auto;
  padding: 9px 20px;
  border: 1px solid var(--ds-line);
  border-radius: 50px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ds-ink);
  text-decoration: none;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.ds-post-more:hover {
  border-color: var(--ds-teal);
  background: var(--ds-teal);
  color: #fff;
}

.ds-postall {
  margin-top: 36px;
  text-align: center;
}

@media (max-width: 991px) {
  .ds-postgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .ds-postgrid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* A centred section head, for the posts row. .ds-head is a two-column grid
   built for a heading with a link opposite it; centring needs the columns
   collapsed as well as the text aligned. */
.ds-head-center {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}
.ds-head-center .ds-eyebrow {
  justify-self: center;
}
.ds-head-center .ds-head-note {
  max-width: 56ch;
}

/* ==================================================================== */
/* centred layout on tablet and phone                                   */
/*                                                                      */
/* From 991px down every one of these blocks is already a single column
   — the hero panel sits under the headline, the section head's link has
   dropped onto its own row, the card grids are one or two across. Left
   alignment is what a two-column page wants; once there is only one
   column, a centred axis is what reads as deliberate rather than as
   text that ran out of room.
                                                                        */
/* Text inputs are the deliberate exception throughout: a centred caret
   in a form field is unusable, so fields stay left wherever they appear. */
/* ==================================================================== */

@media (max-width: 991px) {
  /* ---------------- hero ---------------- */
  .ds-hero-inner {
    justify-items: center;
    text-align: center;
  }
  .ds-hero-lead {
    margin-left: auto;
    margin-right: auto;
  }
  .ds-hero-cta,
  .ds-hero-marks {
    justify-content: center;
  }
  .ds-hero-panel {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
  /* The panel's own heading and standfirst centre with the rest; its form
     does not follow them, for the reason above. */
  .ds-hero-panel h3,
  .ds-hero-panel > p {
    text-align: center;
  }
  .ds-hero-form,
  .ds-hero-form .ds-field,
  .ds-hero-form .ds-field input {
    text-align: left;
  }

  /* ---------------- section heads ---------------- */
  .ds-head {
    justify-items: center;
    text-align: center;
  }
  .ds-head .ds-eyebrow {
    justify-self: center;
  }
  .ds-head h2 {
    margin-left: auto;
    margin-right: auto;
  }
  .ds-head-note {
    margin-left: auto;
    margin-right: auto;
  }
  /* Overrides the `justify-self: start` the 991 block sets a few rules up,
     which put the link back on the left once it had its own row. */
  .ds-head-link {
    justify-self: center;
  }

  /* A bare eyebrow that is not inside a .ds-head — the product showcase and
     the CTA band each carry one. */
  .ds-section > .container > .ds-eyebrow,
  .ds-prodshow-body .ds-eyebrow,
  .ds-cta-inner .ds-eyebrow {
    display: inline-flex;
  }
  .ds-prodshow-body,
  .ds-cta-inner {
    text-align: center;
  }
  .ds-prodshow-cta,
  .ds-prodshow-marks,
  .ds-prodshow-caps {
    justify-content: center;
  }
  .ds-prodshow-list {
    display: inline-block;
    text-align: left;
  }
}

@media (max-width: 991px) {
  /* ---------------- cards ----------------
     The icon, the card's title and the line under it centre as a group, so a
     tablet reads on the same axis as the section head above it rather than
     switching back to a left edge halfway down the page. */
  .ds-card {
    text-align: center;
  }
  .ds-card .ds-card-ic {
    margin-left: auto;
    margin-right: auto;
  }
  .ds-step,
  .ds-proof-row li,
  .ds-post-body {
    text-align: center;
  }
  .ds-step-n {
    margin-left: auto;
    margin-right: auto;
  }
  .ds-post-meta {
    justify-content: center;
  }
}