/* ==========================================================================
   Saturday Cloud site.css
   Mobile-first. No inline styles anywhere (the CSP blocks them).

   Colour rules from the brand guidelines:
     --purple  #6300FF  passes AA on white (7.06:1), safe for text
     --orange  #F15A24  3.37:1 on white, so accents, rules and icons only.
     On the dark hero the orange is lightened to #FFC08F to #FF8A4C, which
     clears 12:1 against the darkest and lightest parts of that gradient.

   Depth comes from CSS gradients and shadows. The only decorative image is
   the cloud mark that is already in the repo.
   ========================================================================== */

@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --purple: #6300ff;
  --purple-mid: #5200d6;
  --purple-dark: #4a00bf;
  --purple-deeper: #33008a;
  --purple-deep: #1c0640;
  --purple-tint: #f6f2ff;
  --purple-tint-2: #fbfaff;

  --orange: #f15a24;
  --orange-ink: #c4491c;      /* darker orange, safe for icons on white */
  --orange-light: #ffc08f;    /* for dark backgrounds only */
  --orange-light-2: #ff8a4c;

  --grey-mid: #666666;
  --grey-light: #dddddd;
  --ink: #1a1a1a;
  --white: #ffffff;

  --line: rgba(99, 0, 255, 0.13);
  --shadow-sm: 0 1px 2px rgba(24, 0, 64, 0.05), 0 6px 18px rgba(60, 0, 150, 0.05);
  --shadow-md: 0 1px 2px rgba(24, 0, 64, 0.06), 0 14px 34px rgba(60, 0, 150, 0.09);
  --shadow-lg: 0 2px 4px rgba(24, 0, 64, 0.07), 0 24px 52px rgba(60, 0, 150, 0.13);
  --shadow-float: 0 2px 6px rgba(40, 0, 110, 0.06), 0 20px 54px rgba(40, 0, 110, 0.16);

  --font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1140px;
  --gutter: 1.25rem;
  --radius: 14px;
  --radius-lg: 20px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
}

h1, h2, h3, h4 { font-weight: 700; line-height: 1.14; margin: 0 0 0.5em; text-wrap: balance; }

h1 { font-size: clamp(2.125rem, 5.6vw, 3.5rem); letter-spacing: -0.025em; }
h2 { font-size: clamp(1.625rem, 3.8vw, 2.5rem); letter-spacing: -0.02em; }
h3 { font-size: clamp(1.125rem, 2.2vw, 1.375rem); letter-spacing: -0.01em; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--purple); }
a:hover { color: var(--purple-dark); }

img, svg { max-width: 100%; height: auto; }
blockquote { margin: 0; }

.icon { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--purple); color: var(--white);
  padding: 0.75rem 1rem; z-index: 100;
}
.skip:focus { left: 0; }

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8125rem 1.5rem;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  border: 2px solid transparent;
  min-height: 50px;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}
.btn .icon { width: 1.125rem; height: 1.125rem; }

.btn--primary {
  background: linear-gradient(135deg, var(--purple) 0%, var(--purple-dark) 100%);
  color: var(--white);
  box-shadow: 0 2px 6px rgba(60, 0, 150, 0.22), 0 12px 26px rgba(60, 0, 150, 0.20);
}
.btn--primary:hover, .btn--primary:focus {
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(60, 0, 150, 0.26), 0 18px 38px rgba(60, 0, 150, 0.24);
}

.btn--ghost { background: transparent; border-color: var(--purple); color: var(--purple); }
.btn--ghost:hover, .btn--ghost:focus { background: var(--purple); color: var(--white); }

/* On dark backgrounds */
.btn--on-dark {
  background: var(--white);
  color: var(--purple);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.24), 0 16px 36px rgba(0, 0, 0, 0.22);
}
.btn--on-dark:hover, .btn--on-dark:focus {
  background: var(--purple-tint);
  color: var(--purple-dark);
  transform: translateY(-2px);
}
.btn--ghost-on-dark {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--white);
}
.btn--ghost-on-dark:hover, .btn--ghost-on-dark:focus {
  background: var(--white);
  border-color: var(--white);
  color: var(--purple);
}

/* --------------------------------------------------------------------------
   Shared bits: eyebrow, pill, icon tile, arrow link
   -------------------------------------------------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0 0 0.625rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--purple);
}
.eyebrow::before {
  content: "";
  width: 1.75rem; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--purple), var(--orange));
}
.eyebrow--on-dark { color: #dcc6ff; }
.eyebrow--on-dark::before { background: linear-gradient(90deg, var(--orange-light), var(--orange-light-2)); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5625rem;
  margin: 0 0 1.5rem;
  padding: 0.4375rem 1rem 0.4375rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.24);
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
}
.pill .icon { width: 1.125rem; height: 1.125rem; color: var(--orange-light); }

.icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem; height: 3rem;
  border-radius: 14px;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, rgba(99, 0, 255, 0.13), rgba(99, 0, 255, 0.03));
  border: 1px solid rgba(99, 0, 255, 0.15);
  color: var(--purple);
}
.icon-tile .icon { width: 1.5rem; height: 1.5rem; }
.icon-tile--accent {
  background: linear-gradient(135deg, rgba(241, 90, 36, 0.15), rgba(241, 90, 36, 0.04));
  border-color: rgba(241, 90, 36, 0.24);
  color: var(--orange-ink);
}

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  text-decoration: none;
}
.arrow-link .icon { width: 1.125rem; height: 1.125rem; transition: transform 0.18s ease; }
.arrow-link:hover { text-decoration: underline; }
.arrow-link:hover .icon { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: relative;
  border-bottom: 1px solid var(--line);
  padding-block: calc(1rem + 4px) 1rem;
  background: var(--white);
}
.site-header::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--purple) 0%, #8b3cff 55%, var(--orange) 100%);
}

.header-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }

.logo { flex: 0 0 auto; line-height: 0; }
.logo img { width: 175px; height: auto; }

.header-phone {
  margin-left: auto;
  display: flex; flex-direction: column;
  text-decoration: none; line-height: 1.2;
  order: 1;
}
.header-phone__label {
  font-size: 0.6875rem; color: var(--grey-mid); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.025em;
}
.header-phone__number { font-size: 1.0625rem; font-weight: 700; color: var(--purple); }

.site-nav {
  flex: 1 1 100%; order: 2;
  border-top: 1px solid var(--line);
  padding-top: 0.75rem;
}
.site-nav ul {
  display: flex; flex-wrap: wrap; gap: 0.375rem 1.125rem;
  list-style: none; margin: 0; padding: 0;
}
.site-nav a {
  color: var(--ink); text-decoration: none; font-weight: 600;
  font-size: 0.9375rem; display: inline-block; padding-block: 0.25rem;
}
.site-nav a:hover, .site-nav a:focus { color: var(--purple); text-decoration: underline; }

@media (min-width: 62rem) {
  .logo img { width: 215px; }
  .header-phone { order: 2; }
  .site-nav { flex: 1 1 auto; order: 1; border-top: 0; padding-top: 0; margin-left: 1.5rem; }
  .site-nav ul { gap: 0.5rem 1.5rem; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--white);
  padding-block: 3rem 5.5rem;
  background:
    radial-gradient(58rem 38rem at 80% -12%, rgba(122, 42, 255, 0.60), transparent 62%),
    radial-gradient(40rem 26rem at -6% 108%, rgba(241, 90, 36, 0.22), transparent 64%),
    linear-gradient(158deg, #190638 0%, #26094f 46%, #3d0f8a 100%);
}

.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, 0.13) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(200deg, rgba(0, 0, 0, 0.9), transparent 62%);
  mask-image: linear-gradient(200deg, rgba(0, 0, 0, 0.9), transparent 62%);
  pointer-events: none;
}

.hero__inner { position: relative; display: grid; gap: 3rem; }

.hero h1 { margin-bottom: 1rem; color: var(--white); }

.hero__accent { color: var(--orange-light); }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .hero__accent {
    background: linear-gradient(100deg, var(--orange-light) 0%, var(--orange-light-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

.hero__lead {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.88);
  max-width: 44ch;
  margin-bottom: 1.75rem;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; }

.hero__micro { font-size: 0.9375rem; color: rgba(255, 255, 255, 0.74); font-weight: 600; }

/* Media panel. Hidden on small screens so the hero stays compact. */
.hero__media { display: none; position: relative; }

.hero__placeholder,
.hero__photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.40);
}
.hero__photo { object-fit: cover; }

.hero__placeholder {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.03) 58%, rgba(241, 90, 36, 0.14) 100%);
}
.hero__placeholder::after {
  content: "";
  position: absolute; inset: 0;
  background: url("/assets/img/logo-mark-white.svg") no-repeat center / 42%;
  opacity: 0.17;
}

.hero__proof {
  position: absolute;
  left: -2rem;
  bottom: 2rem;
  z-index: 2;
  max-width: 22.5rem;
  margin: 0;
  padding: 1.25rem 1.5rem;
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius);
  border-left: 5px solid var(--orange);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.36);
}
.hero__proof blockquote p {
  margin: 0 0 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  font-weight: 600;
}
.hero__proof figcaption { display: flex; flex-direction: column; line-height: 1.3; }
.hero__proof figcaption strong { font-size: 0.9375rem; }
.hero__proof figcaption span { font-size: 0.78125rem; color: var(--grey-mid); }

.stars { display: flex; gap: 0.125rem; margin: 0 0 0.625rem; color: var(--orange); }
.stars .icon { width: 1rem; height: 1rem; }

@media (min-width: 62rem) {
  .hero { padding-block: 4.5rem 7rem; }
  .hero__inner { grid-template-columns: 1.08fr 0.92fr; gap: 4rem; align-items: center; }
  .hero__media { display: block; }
  .hero__lead { font-size: 1.25rem; }
}

/* --------------------------------------------------------------------------
   Trust strip, floating over the bottom of the hero
   -------------------------------------------------------------------------- */

.trust { position: relative; z-index: 3; margin-top: -3rem; }

.trust__inner {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-float);
  padding: 1.25rem 0.25rem;
  display: grid;
  gap: 1.125rem;
}

.trust__item {
  margin: 0;
  padding-inline: 1.25rem;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon figure" "icon label";
  column-gap: 0.75rem;
  align-items: center;
}
.trust__item .icon { grid-area: icon; width: 1.625rem; height: 1.625rem; color: var(--purple); }
.trust__item:nth-child(2) .icon { color: var(--orange); }
.trust__figure { grid-area: figure; font-weight: 700; font-size: 1.125rem; line-height: 1.2; }
.trust__label { grid-area: label; font-size: 0.8125rem; color: var(--grey-mid); line-height: 1.35; }
.trust__label a { color: var(--purple); }

@media (min-width: 44rem) {
  .trust__inner { grid-template-columns: repeat(2, 1fr); gap: 1.375rem 0; }
  .trust__item + .trust__item { border-left: 1px solid var(--line); }
  .trust__item:nth-child(odd) { border-left: 0; }
}
@media (min-width: 68rem) {
  .trust__inner { grid-template-columns: repeat(4, 1fr); padding: 1.5rem 0.5rem; }
  .trust__item:nth-child(odd) { border-left: 1px solid var(--line); }
  .trust__item:first-child { border-left: 0; }
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section { padding-block: 3.25rem; }

.section--tint,
.contact-light {
  background:
    radial-gradient(46rem 22rem at 100% 0%, rgba(99, 0, 255, 0.08), transparent 62%),
    radial-gradient(34rem 20rem at 0% 100%, rgba(241, 90, 36, 0.055), transparent 62%),
    linear-gradient(180deg, var(--purple-tint) 0%, var(--purple-tint-2) 100%);
  border-block: 1px solid var(--line);
}

.section__head { display: grid; gap: 1rem; margin-bottom: 2rem; }
.section__head h2 { margin-bottom: 0; }
.section__head .section__lead { margin-bottom: 0; }

.section__lead {
  font-size: 1.0625rem;
  color: var(--grey-mid);
  max-width: 62ch;
  margin-bottom: 2rem;
}

.section__after { margin-top: 1.75rem; }

.section__note {
  font-size: 0.9375rem;
  color: var(--grey-mid);
  max-width: 52ch;
  margin-bottom: 1.125rem;
}

.subhead {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--grey-mid);
  margin-top: 2.75rem;
  margin-bottom: 0.5rem;
}

@media (min-width: 48rem) { .section { padding-block: 4.75rem; } }
@media (min-width: 62rem) {
  .section__head { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: end; margin-bottom: 2.75rem; }
}

/* --------------------------------------------------------------------------
   Problems
   -------------------------------------------------------------------------- */

.problems { list-style: none; margin: 0 0 2.75rem; padding: 0; display: grid; gap: 1.75rem; }

.problem { display: grid; grid-template-columns: auto 1fr; gap: 1rem; }

.problem__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 12px;
  background: linear-gradient(135deg, rgba(241, 90, 36, 0.15), rgba(241, 90, 36, 0.04));
  border: 1px solid rgba(241, 90, 36, 0.24);
  color: var(--orange-ink);
}
.problem__icon .icon { width: 1.375rem; height: 1.375rem; }

.problem h3 { margin-bottom: 0.25rem; }
.problem p { margin: 0; color: var(--grey-mid); }

@media (min-width: 48rem) { .problems { grid-template-columns: repeat(2, 1fr); gap: 2.25rem 3rem; } }

/* --------------------------------------------------------------------------
   Sourced statistic
   -------------------------------------------------------------------------- */

.stat {
  margin: 0;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(30rem 14rem at 100% 0%, rgba(99, 0, 255, 0.07), transparent 65%),
    var(--white);
  border: 1px solid var(--line);
  border-left: 5px solid var(--purple);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 1.375rem 1.375rem 1.125rem;
}
.stat__quote p { font-size: 1.0625rem; margin-bottom: 0.75rem; }
.stat__source { font-size: 0.8125rem; color: var(--grey-mid); line-height: 1.5; }

@media (min-width: 48rem) {
  .stat { padding: 1.875rem 2.25rem 1.625rem; }
  .stat__quote p { font-size: 1.1875rem; }
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.cards { display: grid; gap: 1.25rem; margin-bottom: 1rem; }

@media (min-width: 48rem) {
  .cards { gap: 1.75rem; }
  .cards--2 { grid-template-columns: repeat(2, 1fr); }
  .cards--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) { .cards--4 { grid-template-columns: repeat(4, 1fr); } }

/* Used by the related reading blocks, where the number of cards depends on how
   many of the named posts are published rather than being fixed in the markup. */
@media (min-width: 48rem) {
  .cards--auto { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
}

.card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
}

.card__title { margin-bottom: 0.5rem; }
.card__title a { color: var(--ink); text-decoration: none; }
.card__title a:hover, .card__title a:focus { color: var(--purple); text-decoration: underline; }

.card__badge {
  position: absolute;
  top: 1.75rem; right: 1.75rem;
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--purple);
  background: rgba(99, 0, 255, 0.09);
  border: 1px solid rgba(99, 0, 255, 0.16);
  border-radius: 999px;
  padding: 0.3125rem 0.75rem;
}

.card__strap { font-weight: 600; color: var(--grey-mid); margin-bottom: 1.125rem; }

.card__list { list-style: none; margin: 0 0 1.375rem; padding: 0; }
.card__list li { position: relative; padding-left: 1.625rem; margin-bottom: 0.5rem; }
.card__list li::before {
  content: "";
  position: absolute; left: 0.125rem; top: 0.6em;
  width: 0.5625rem; height: 0.5625rem; border-radius: 50%;
  background: linear-gradient(135deg, var(--purple) 0%, #9a5cff 100%);
}

.card__more { margin: 0; }

.card--service, .card--feature {
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card--service::before, .card--feature::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 5px;
}
.card--service::before { background: linear-gradient(90deg, var(--purple) 0%, #9a5cff 100%); }
.card--service-alt::before { background: linear-gradient(90deg, var(--orange) 0%, var(--purple) 100%); }
.card--feature::before { background: linear-gradient(90deg, var(--orange) 0%, #ff8f5e 100%); }

.card--service:hover, .card--feature:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.card--feature { margin-bottom: 0; }

/* Numbered reason cards */
.card--reason {
  background:
    radial-gradient(22rem 12rem at 100% 0%, rgba(99, 0, 255, 0.08), transparent 70%),
    var(--white);
}
.card__num {
  display: block;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0.625rem;
  color: rgba(99, 0, 255, 0.35);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .card__num {
    background: linear-gradient(135deg, rgba(99, 0, 255, 0.62), rgba(241, 90, 36, 0.52));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

/* Extras: the four services that sit outside the monthly fee */

.extras {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--line);
}
.extras__head { margin-bottom: 1.75rem; }
.extras__title {
  font-size: clamp(1.25rem, 2.6vw, 1.625rem);
  letter-spacing: -0.015em;
  margin-bottom: 0.5rem;
}
.extras__note {
  color: var(--grey-mid);
  max-width: 64ch;
  margin: 0;
}

.card--mini {
  padding: 1.625rem 1.375rem 1.375rem;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
/* Same cap as the two headline cards, one step thinner so the hierarchy holds.
   The two security lines echo the cyber card, the two infrastructure lines
   echo the IT support card. */
.card--mini::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--purple) 0%, #9a5cff 100%);
}
.card--mini-security::before {
  background: linear-gradient(90deg, var(--orange) 0%, var(--purple) 100%);
}
.card--mini:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card--mini .card__title { font-size: 1.0625rem; line-height: 1.25; margin-bottom: 0.375rem; }
.card--mini p { font-size: 0.9375rem; color: var(--grey-mid); margin-bottom: 0.875rem; }

.card--mini .card__more { margin: auto 0 0; } /* arrows line up across the row */

.icon-tile--sm {
  width: 2.5rem; height: 2.5rem;
  border-radius: 11px;
  margin-bottom: 0.75rem;
}
.icon-tile--sm .icon { width: 1.25rem; height: 1.25rem; }

.arrow-link--sm { font-size: 0.875rem; }
.arrow-link--sm .icon { width: 1rem; height: 1rem; }

@media (min-width: 62rem) {
  .extras__head {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 2.5rem;
    align-items: baseline;
    margin-bottom: 2rem;
  }
  .extras__title { margin-bottom: 0; }
}

/* Pills row (service links) */

.pills { display: flex; flex-wrap: wrap; gap: 0.625rem; list-style: none; margin: 0; padding: 0; }
.pills a {
  display: inline-block;
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: 0.5rem 1.125rem;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform 0.16s ease, background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.pills a:hover, .pills a:focus {
  background: var(--purple);
  border-color: var(--purple);
  color: var(--white);
  transform: translateY(-2px);
}

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

.person {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.25rem;
  margin-top: 2.5rem;
  padding: 1.75rem;
  background:
    radial-gradient(28rem 14rem at 0% 0%, rgba(99, 0, 255, 0.08), transparent 66%),
    var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.person__monogram {
  flex: 0 0 auto;
  width: 5rem; height: 5rem; margin: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--purple) 0%, var(--purple-deeper) 100%);
  color: var(--white);
  font-weight: 700; font-size: 1.75rem;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 22px rgba(60, 0, 150, 0.30);
}
.person__photo {
  flex: 0 0 auto;
  width: 5rem; height: 5rem;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 8px 22px rgba(60, 0, 150, 0.30);
}

.person__body { flex: 1 1 18rem; }
.person__name { margin-bottom: 0.125rem; }
.person__role { color: var(--grey-mid); font-weight: 600; font-size: 0.9375rem; margin-bottom: 0.875rem; }
.person__quote {
  font-size: 1.0625rem;
  border-left: 4px solid var(--orange);
  padding-left: 1rem;
  margin-bottom: 0.875rem;
}
.person__contact { font-weight: 700; margin: 0; }

@media (min-width: 48rem) {
  .person { padding: 2.25rem; gap: 2rem; }
  .person__monogram, .person__photo { width: 6.5rem; height: 6.5rem; }
  .person__monogram { font-size: 2.25rem; }
}

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */

.quote {
  margin: 0;
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.quote blockquote p { margin-bottom: 1.25rem; }

.quote figcaption {
  display: flex; flex-direction: column; line-height: 1.35;
  border-top: 3px solid var(--orange);
  padding-top: 0.75rem;
  margin-top: auto;
}
.quote figcaption strong { font-weight: 700; }
.quote figcaption span { font-size: 0.9375rem; color: var(--grey-mid); }

.reviews-line {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.75rem;
  margin-bottom: 0;
  font-weight: 700;
  font-size: 1.0625rem;
}
.reviews-line .icon { width: 1.25rem; height: 1.25rem; color: var(--orange); }

@media (min-width: 48rem) { .quote blockquote p { font-size: 1.0625rem; } }

/* --------------------------------------------------------------------------
   Accreditation
   -------------------------------------------------------------------------- */

.credential {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1.25rem 2rem;
  margin-top: 2rem;
  padding: 1.75rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 5px solid var(--purple);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.credential__badge { flex: 0 0 auto; width: 190px; height: auto; }
.credential__body { flex: 1 1 20rem; }
.credential__title { font-size: 1.125rem; margin-bottom: 0.5rem; }
.credential__more { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin: 0.875rem 0 0; }

@media (min-width: 48rem) {
  .credential { padding: 2rem 2.25rem; }
  .credential__badge { width: 220px; }
}

/* --------------------------------------------------------------------------
   Contact, light card variant
   -------------------------------------------------------------------------- */

.contact-card {
  display: grid;
  gap: 1.75rem;
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background:
    radial-gradient(30rem 16rem at 100% 0%, rgba(99, 0, 255, 0.09), transparent 65%),
    var(--white);
  box-shadow: var(--shadow-md);
}
.contact-card h2 { font-size: clamp(1.375rem, 3vw, 1.875rem); margin-bottom: 0.5rem; }
.contact-card__text p { color: var(--grey-mid); max-width: 52ch; }
.contact-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.contact-card__alt { flex: 1 1 100%; margin: 0; font-weight: 600; }

@media (min-width: 56rem) {
  .contact-card { grid-template-columns: 1.2fr 1fr; gap: 2.5rem; align-items: center; padding: 2.25rem 2.5rem; }
}

/* --------------------------------------------------------------------------
   Contact, dark band
   -------------------------------------------------------------------------- */

.contact-block {
  position: relative;
  overflow: hidden;
  color: var(--white);
  padding-block: 3rem;
  background:
    radial-gradient(38rem 22rem at 4% 118%, rgba(241, 90, 36, 0.26), transparent 62%),
    radial-gradient(40rem 24rem at 92% -24%, rgba(122, 42, 255, 0.55), transparent 62%),
    linear-gradient(158deg, #190638 0%, #26094f 48%, #3d0f8a 100%);
}
.contact-block::after {
  content: "";
  position: absolute;
  right: -4rem; top: 50%;
  width: 20rem; height: 20rem;
  transform: translateY(-50%);
  background: url("/assets/img/logo-mark-white.svg") no-repeat center / contain;
  opacity: 0.07;
  pointer-events: none;
}

.contact-block__inner { position: relative; z-index: 1; display: grid; gap: 1.75rem; }
.contact-block h2 { color: var(--white); margin-bottom: 0.625rem; }
.contact-block__text p { max-width: 52ch; margin: 0; color: rgba(255, 255, 255, 0.88); }

.contact-block__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.contact-block__alt { flex: 1 1 100%; margin: 0; font-weight: 600; }
.contact-block__alt a { color: rgba(255, 255, 255, 0.92); }

@media (min-width: 56rem) {
  .contact-block { padding-block: 4rem; }
  .contact-block__inner { grid-template-columns: 1fr 1.05fr; gap: 3rem; align-items: center; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  position: relative;
  overflow: hidden;
  color: var(--white);
  padding-block: 3rem 2rem;
  background:
    radial-gradient(42rem 24rem at 88% -25%, rgba(99, 0, 255, 0.50), transparent 62%),
    radial-gradient(30rem 18rem at 0% 120%, rgba(241, 90, 36, 0.13), transparent 62%),
    var(--purple-deep);
}
.site-footer > .wrap { position: relative; z-index: 1; }

.footer-grid { display: grid; gap: 2rem; }

.footer-logo { width: 205px; margin-bottom: 1rem; }
.footer-line { font-size: 0.9375rem; max-width: 40ch; color: rgba(255, 255, 255, 0.86); }

.footer-heading {
  font-size: 0.75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em;
  margin-bottom: 0.875rem;
  color: rgba(255, 255, 255, 0.66);
}

.footer-list { list-style: none; margin: 0; padding: 0; font-size: 0.9375rem; }
.footer-list li { margin-bottom: 0.4375rem; color: rgba(255, 255, 255, 0.86); }

.site-footer a { color: var(--white); text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }

.footer-legal {
  font-size: 0.8125rem;
  margin-top: 2.25rem; margin-bottom: 0.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.20);
  color: rgba(255, 255, 255, 0.72);
}

.footer-credit {
  font-size: 0.8125rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
}

@media (min-width: 40rem) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem; } }

/* --------------------------------------------------------------------------
   Contact page
   -------------------------------------------------------------------------- */

.hero--short { padding-block: 2.75rem 4.5rem; }
.hero__inner--single { display: block; }
.hero--short .hero__text { max-width: 40ch; }
.hero--short .hero__lead { max-width: 56ch; }

@media (min-width: 62rem) {
  .hero--short { padding-block: 4rem 6rem; }
  .hero--short .hero__text { max-width: 52ch; }
}

/* Three ways to get in touch, floating over the bottom of the hero */

.routes { position: relative; z-index: 3; margin-top: -3rem; }

.routes__inner {
  display: grid;
  gap: 1rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-float);
  padding: 1.25rem;
}

.route {
  display: block;
  padding: 1rem 1.125rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.route:hover, .route:focus {
  color: var(--ink);
  transform: translateY(-2px);
  border-color: rgba(99, 0, 255, 0.35);
  box-shadow: var(--shadow-md);
}
.route .icon-tile { margin-bottom: 0.75rem; }
.route__label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey-mid);
  margin-bottom: 0.25rem;
}
.route__value {
  display: block;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--purple);
  line-height: 1.25;
}
.route__note {
  display: block;
  font-size: 0.8125rem;
  color: var(--grey-mid);
  margin-top: 0.25rem;
}

@media (min-width: 48rem) {
  .routes__inner { grid-template-columns: repeat(3, 1fr); gap: 1.125rem; padding: 1.5rem; }
}

/* Form and sidebar */

.contact-grid { display: grid; gap: 2.5rem; }

@media (min-width: 64rem) {
  .contact-grid { grid-template-columns: 1.15fr 1fr; gap: 3.5rem; align-items: start; }
}

.form { margin-top: 1.5rem; }

.field { margin-bottom: 1.125rem; }

.field label {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
  margin-bottom: 0.375rem;
}

.field input,
.field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--grey-light);
  border-radius: var(--radius);
  padding: 0.75rem 0.875rem;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.field textarea { resize: vertical; min-height: 9rem; }

.field input::placeholder,
.field textarea::placeholder { color: #8a8a8a; }

.field input:hover,
.field textarea:hover { border-color: #bbb; }

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 4px rgba(99, 0, 255, 0.14);
}
.field input:focus-visible,
.field textarea:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

.field-row { display: grid; gap: 0; }
@media (min-width: 34rem) {
  .field-row { grid-template-columns: 1fr 1fr; gap: 0 1rem; }
}

.form-hint {
  font-size: 0.875rem;
  color: var(--grey-mid);
  margin: -0.25rem 0 1.25rem;
}

.form-privacy {
  font-size: 0.8125rem;
  color: var(--grey-mid);
  margin-top: 1.25rem;
  max-width: 52ch;
}

.form-error {
  border: 1px solid rgba(241, 90, 36, 0.4);
  border-left: 5px solid var(--orange);
  background: rgba(241, 90, 36, 0.07);
  border-radius: var(--radius);
  padding: 1rem 1.125rem;
  margin-top: 1.5rem;
}
.form-error__text { margin: 0; font-weight: 600; }

/* Honeypot. Present in the DOM, out of sight and out of the tab order.
   Do not switch this to display:none, plenty of bots check for that. */
.hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Sidebar panels */

.contact-grid__side { display: grid; gap: 1.25rem; align-content: start; }

.panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
}
.panel--tint {
  background:
    radial-gradient(22rem 12rem at 100% 0%, rgba(99, 0, 255, 0.09), transparent 70%),
    var(--purple-tint-2);
}
.panel__title { font-size: 1.125rem; margin-bottom: 1rem; }
.panel__line { margin-bottom: 0.375rem; }
.panel__note { font-size: 0.875rem; color: var(--grey-mid); margin: 0; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.step { display: grid; grid-template-columns: auto 1fr; gap: 0.875rem; align-items: start; }
.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--purple) 0%, var(--purple-deeper) 100%);
  color: var(--white);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
}
.step p { margin: 0; font-size: 0.9375rem; }

.person--compact { margin-top: 0; padding: 1.5rem; gap: 1rem; }
.person--compact .person__monogram { width: 3.75rem; height: 3.75rem; font-size: 1.25rem; }
.person--compact .person__name { font-size: 1.125rem; }
.person--compact .person__body { flex: 1 1 10rem; }

@media (min-width: 48rem) {
  .person--compact { padding: 1.75rem; }
  .person--compact .person__monogram { width: 4rem; height: 4rem; font-size: 1.375rem; }
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq {
  border-top: 1px solid var(--line);
  max-width: 60rem;
}

.faq__item { border-bottom: 1px solid var(--line); }

.faq__item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  cursor: pointer;
  list-style: none;
  padding: 1.125rem 0;
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.35;
}
.faq__item summary::-webkit-details-marker { display: none; }

/* Plus and minus drawn in CSS, so there is no icon to load and no JS to run. */
.faq__item summary::after {
  content: "";
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.2rem;
  background:
    linear-gradient(var(--purple), var(--purple)) center / 100% 2.5px no-repeat,
    linear-gradient(var(--purple), var(--purple)) center / 2.5px 100% no-repeat;
  transition: transform 0.18s ease;
}
.faq__item[open] summary::after {
  background: linear-gradient(var(--purple), var(--purple)) center / 100% 2.5px no-repeat;
  transform: rotate(180deg);
}

.faq__item summary:hover { color: var(--purple); }

.faq__body { padding: 0 0 1.375rem; max-width: 68ch; }
.faq__body p { color: var(--grey-mid); margin-bottom: 0; }

/* A tighter version of the floating card, used for a stat row on inner pages */
.routes__inner--tight { gap: 1.125rem; }
@media (min-width: 48rem) {
  .routes__inner--tight { grid-template-columns: repeat(3, 1fr); }
  .routes__inner--tight .trust__item + .trust__item { border-left: 1px solid var(--line); }
}

/* --------------------------------------------------------------------------
   Vendor cards
   -------------------------------------------------------------------------- */

.vendor__mark {
  display: flex;
  align-items: center;
  min-height: 3rem;
  margin-bottom: 0.875rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--line);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
/* The badge files are white, shared with the logo strips, which sit on deep
   purple. These cards are white, so the artwork is painted black. brightness(0)
   takes every opaque pixel to black and leaves the transparency alone, so it
   works whatever colour the source is. */
.vendor__mark img { max-height: 2.25rem; width: auto; filter: brightness(0); opacity: 0.78; }

/* --------------------------------------------------------------------------
   Pricing tiers
   -------------------------------------------------------------------------- */

.tiers { display: grid; gap: 1.5rem; margin-top: 2.25rem; }

@media (min-width: 46rem) { .tiers { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .tiers { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; align-items: start; } }

.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.75rem;
}

.tier--recommended {
  border: 2px solid var(--purple);
  box-shadow: var(--shadow-lg);
  background:
    radial-gradient(26rem 14rem at 100% 0%, rgba(99, 0, 255, 0.09), transparent 70%),
    var(--white);
}

@media (min-width: 68rem) {
  .tier--recommended { margin-top: -1.25rem; padding-block: 2.25rem 1.75rem; }
}

.tier__flag {
  position: absolute;
  top: -0.875rem;
  left: 1.75rem;
  margin: 0;
  background: linear-gradient(135deg, var(--purple) 0%, var(--purple-dark) 100%);
  color: var(--white);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.375rem 0.875rem;
  box-shadow: 0 6px 16px rgba(60, 0, 150, 0.28);
}

.tier__name { font-size: 1.25rem; margin-bottom: 0.75rem; }

.tier__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 0.875rem; }
.tier__currency { font-size: 1.5rem; font-weight: 700; color: var(--purple); }
.tier__figure { font-size: 3rem; font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--purple); }
.tier__unit { flex: 1 1 100%; font-size: 0.8125rem; color: var(--grey-mid); font-weight: 600; }

.tier__strap { font-weight: 700; margin-bottom: 0.625rem; }
.tier__body { color: var(--grey-mid); font-size: 0.9375rem; }

/* Sits under the tier it refers to, never spanning the ones it does not.
   The widths match one grid column exactly at each breakpoint. */
.tier-note {
  margin-top: 1.5rem;
  padding: 1.125rem 1.25rem;
  border: 1px solid rgba(241, 90, 36, 0.30);
  border-left: 5px solid var(--orange);
  background: rgba(241, 90, 36, 0.05);
  border-radius: var(--radius);
}
@media (min-width: 46rem) {
  .tier-note { max-width: calc((100% - 1.5rem) / 2); }
}
@media (min-width: 68rem) {
  .tier-note { max-width: calc((100% - 3.5rem) / 3); }
}
.tier-note__label {
  margin: 0 0 0.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--orange-ink);
}
.tier-note__text { margin: 0; font-size: 0.9375rem; }

@media (min-width: 48rem) {
  .tier-note__text { font-size: 0.9375rem; }
}

.tier__list { list-style: none; margin: 1.25rem 0; padding: 0; }
.tier__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.625rem;
  align-items: start;
  margin-bottom: 0.5rem;
  font-size: 0.9375rem;
}
.tier__list .icon { width: 1.125rem; height: 1.125rem; margin-top: 0.2rem; color: var(--purple); }

.tier__cta { margin: auto 0 0; }
.tier__cta .btn { width: 100%; }

.pricing-note {
  margin-top: 1.75rem;
  font-size: 0.875rem;
  color: var(--grey-mid);
}

/* --------------------------------------------------------------------------
   Highlighted word
   -------------------------------------------------------------------------- */

/* <mark> reset. The browser default is a yellow block, which is not the brand.
   This is a highlighter stroke sitting behind the bottom of the word. */
mark {
  background: none;
  color: var(--purple);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-skip-ink: none;
}

/* --------------------------------------------------------------------------
   Story block
   -------------------------------------------------------------------------- */

.story {
  max-width: 62ch;
  margin-top: 2rem;
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  border-left: 5px solid var(--orange);
  background:
    radial-gradient(30rem 16rem at 100% 0%, rgba(99, 0, 255, 0.07), transparent 68%),
    var(--white);
  box-shadow: var(--shadow-md);
}
.story p { font-size: 1.0625rem; }

.story__beat,
.story__punch {
  font-weight: 700;
  font-size: 1.1875rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
  padding-left: 1rem;
  border-left: 4px solid var(--purple);
  margin-block: 1.5rem;
}
.story__punch { border-left-color: var(--orange); margin-bottom: 0; }
.story .stat__source { display: block; margin-top: 1.5rem; }
/* A story followed straight by a feature card needs air between them.
   Used on /cyber-security for the email spoofing section. */
.story + .card--feature { margin-top: 2rem; }

@media (min-width: 48rem) {
  .story { padding: 2.25rem 2.5rem; }
  .story p { font-size: 1.125rem; }
  .story__beat, .story__punch { font-size: 1.375rem; }
}

/* --------------------------------------------------------------------------
   Team cards, and the smaller quotes on /about
   -------------------------------------------------------------------------- */

.profiles { display: grid; gap: 1.25rem; }

.profile {
  display: grid;
  gap: 1.25rem;
  padding: 1.75rem;
  background:
    radial-gradient(26rem 13rem at 0% 0%, rgba(99, 0, 255, 0.07), transparent 66%),
    var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.profile__aside { display: grid; gap: 0.125rem; justify-items: start; }

/* Named contact panel on /contact. Sits in the sidebar aside and upgrades from
   initials to a photo on its own as soon as team.js has one.
   Deliberately NOT called .person: that name is already a full card component
   used on the homepage, and reusing it here would nest a card inside a panel. */
.panel--person { border-top: 3px solid var(--orange); }
.contact-lead {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.875rem;
  align-items: center;
  margin-bottom: 1rem;
}
.contact-lead__monogram,
.contact-lead__photo {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  margin: 0;
  box-shadow: 0 6px 16px rgba(60, 0, 150, 0.26);
}
.contact-lead__monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--purple) 0%, var(--purple-deeper) 100%);
  color: var(--white);
  font-weight: 700;
  font-size: 1rem;
}
.contact-lead__photo { object-fit: cover; }
.contact-lead__id { display: grid; gap: 0.125rem; }
.contact-lead__name { margin: 0; font-weight: 700; font-size: 1.0625rem; }
.contact-lead__role {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--purple);
}
.contact-lead__call { margin: 1rem 0 0.75rem; }
.btn--full { width: 100%; justify-content: center; }

.profile__monogram,
.profile__photo {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  margin: 0 0 0.875rem;
  box-shadow: 0 8px 20px rgba(60, 0, 150, 0.28);
}
.profile__monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--purple) 0%, var(--purple-deeper) 100%);
  color: var(--white);
  font-weight: 700;
  font-size: 1.25rem;
}
.profile__photo { object-fit: cover; }

.profile__name { font-size: 1.125rem; margin: 0 0 0.125rem; }
.profile__role {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--purple);
}

.profile__body p { font-size: 0.9375rem; }
.profile__line {
  font-weight: 600;
  color: var(--ink);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.profile__body p:not(.profile__line) { color: var(--grey-mid); }
/* No bio yet, so no rule hanging under the role line. */
.profile__line:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }

@media (min-width: 46rem) {
  .profile { grid-template-columns: 12rem 1fr; gap: 2rem; padding: 2rem 2.25rem; align-items: start; }
  .profile__body p { font-size: 1rem; }
  .profile__monogram, .profile__photo { width: 5rem; height: 5rem; font-size: 1.5rem; }
}

.quotes--extra { margin-top: 1.25rem; }
.quote--sm { padding: 1.25rem; border-radius: var(--radius); }
.quote--sm blockquote p { font-size: 0.875rem; margin-bottom: 1rem; }
.quote--sm figcaption { border-top-width: 2px; padding-top: 0.625rem; }
.quote--sm figcaption strong { font-size: 0.875rem; }
.quote--sm figcaption span { font-size: 0.8125rem; }

@media (min-width: 48rem) {
  .quote--sm blockquote p { font-size: 0.875rem; }
}

/* --------------------------------------------------------------------------
   Support ticket. Used on the 404 page only. Looks like a ticket in a PSA,
   which is the joke.
   -------------------------------------------------------------------------- */

.ticket {
  max-width: 46rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.ticket__head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, var(--purple) 0%, var(--purple-deeper) 100%);
  color: var(--white);
}
.ticket__ref {
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.875rem;
}
.ticket__status {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.3125rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.34);
}
.ticket__meta {
  display: grid;
  gap: 0.625rem;
  margin: 0;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--line);
  background: var(--purple-tint-2);
}
.ticket__meta > div { display: grid; grid-template-columns: 8rem 1fr; gap: 0.5rem; }
.ticket__meta dt {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--purple);
  padding-top: 0.125rem;
}
.ticket__meta dd { margin: 0; font-size: 0.9375rem; }
.ticket__label {
  margin: 1.875rem 1.5rem 0.75rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--grey-mid);
}
.ticket__log { margin: 0 1.5rem; padding: 0; list-style: none; }
.ticket__log li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.625rem;
  font-size: 0.9375rem;
  color: var(--grey-mid);
}
.ticket__log li:last-child { margin-bottom: 0; }
.ticket__log li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.5rem;
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: var(--orange);
}
.ticket__body { margin: 0 1.5rem 1.5rem; font-size: 0.9375rem; color: var(--grey-mid); }
.ticket__sig {
  margin: 0;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--line);
  background: var(--purple-tint-2);
  font-size: 0.8125rem;
}

@media (min-width: 48rem) {
  .ticket__head, .ticket__meta, .ticket__sig { padding-inline: 2rem; }
  .ticket__label, .ticket__log, .ticket__body { margin-inline: 2rem; }
  .ticket__meta > div { grid-template-columns: 9rem 1fr; }
}

/* --------------------------------------------------------------------------
   Prose. Long form text pages: privacy, cookies, and later blog posts.
   Constrains the measure so a paragraph does not run the full 1140px.
   -------------------------------------------------------------------------- */

.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1.125rem; }
.prose h2 {
  font-size: 1.375rem;
  line-height: 1.25;
  margin-top: 2.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { font-size: 1.0625rem; margin-top: 1.75rem; }
.prose p, .prose li { color: var(--grey-mid); }
.prose strong { color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li + li { margin-top: 0.5rem; }
.prose a { font-weight: 600; }
.footer-legal a {
  color: inherit;
  margin-left: 0.75rem;
  white-space: nowrap;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.prose__updated {
  font-size: 0.875rem;
  color: var(--grey-mid);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.prose .callout {
  background: var(--purple-tint);
  border: 1px solid var(--line);
  border-left: 3px solid var(--purple);
  border-radius: var(--radius);
  padding: 1.25rem 1.375rem;
}
.prose .callout p { color: var(--ink); margin: 0; }
.prose .callout p + p { margin-top: 0.75rem; }

@media (min-width: 48rem) {
  .prose h2 { font-size: 1.625rem; }
}

/* --------------------------------------------------------------------------
   Case study, and the placeholder that stands in for one
   -------------------------------------------------------------------------- */

.quote--case { max-width: 60ch; border-left: 5px solid var(--orange); }
.quote__scale {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 0.875rem;
}
.quote--case blockquote p { font-size: 1.125rem; }

/* Deliberately ugly. If this ends up on the live site it should be obvious. */
.placeholder {
  max-width: 60ch;
  padding: 1.5rem;
  border: 2px dashed var(--orange);
  border-radius: var(--radius);
  background: rgba(241, 90, 36, 0.05);
}
.placeholder__label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange-ink);
  margin-bottom: 0.5rem;
}
.placeholder__note { font-size: 0.875rem; color: var(--grey-mid); margin-bottom: 0; }
.placeholder code {
  font-size: 0.8125rem;
  background: rgba(99, 0, 255, 0.08);
  border-radius: 4px;
  padding: 0.0625rem 0.3125rem;
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover, .card--service:hover, .card--feature:hover, .card--mini:hover,
  .pills a:hover, .arrow-link:hover .icon { transform: none; }
}

/* ==========================================================================
   Blog

   RESTORED 28 Aug 2026 after a whole-file rewrite dropped it. If you are
   rewriting this stylesheet, keep this block. `npm run verify` fails without it
   and every blog post renders as unstyled markdown.

   Two genuinely new components here, because no other page has long form
   flowing body text or a list of dated items:

     .post__body   typographic rules for Markdown output. Everything else on the
                   site is hand built components, so there was nothing to
                   inherit for a paragraph that simply follows a heading.
     .post-card    the index row. Deliberately not .card, because the service
                   cards are a grid of equals and a blog index is a list in date
                   order, which reads better as full width rows.

   Everything else reuses what already exists: .hero--short for the post header,
   .section, .faq, .cards for related reading, .stat__source for a sourced claim
   inside a post.
   ========================================================================== */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

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

.post__hero .hero__text { max-width: 34ch; }
.post__hero .hero__lead { max-width: 60ch; }

@media (min-width: 62rem) {
  .post__hero .hero__text { max-width: 46ch; }
}

.post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 1.75rem 0 0;
  font-size: 0.9375rem;
  color: #dcc6ff;
}

.post__dot { color: var(--orange-light); }

/* Post body --------------------------------------------------------------- */

/* 68 characters is the readable measure. The site wrap is 1140px, which is
   right for a grid of cards and far too wide for a column of prose. */
.post__body { max-width: 68ch; }

.post__body > * + * { margin-top: 1.25rem; }

.post__body p { margin-bottom: 0; }

.post__body h2 {
  font-size: clamp(1.375rem, 2.9vw, 1.875rem);
  margin: 2.75rem 0 0;
  padding-top: 2.25rem;
  border-top: 2px solid var(--line);
}

.post__body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.post__body h3 {
  font-size: 1.1875rem;
  margin: 2rem 0 0;
}

.post__body h2 + *,
.post__body h3 + * { margin-top: 1rem; }

.post__body a {
  color: var(--purple);
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}
.post__body a:hover, .post__body a:focus { color: var(--purple-dark); }

.post__body ul, .post__body ol { padding-left: 0; margin-bottom: 0; }
.post__body ul { list-style: none; }
.post__body ol { padding-left: 1.25rem; }

.post__body ul li {
  position: relative;
  padding-left: 1.625rem;
  margin-bottom: 0.625rem;
}
.post__body ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.6em;
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: var(--orange);
}
.post__body ol li { margin-bottom: 0.625rem; padding-left: 0.25rem; }

.post__body blockquote {
  margin: 0;
  padding: 1.25rem 0 1.25rem 1.5rem;
  border-left: 3px solid var(--orange);
  font-size: 1.0625rem;
  color: var(--grey-mid);
}
.post__body blockquote p + p { margin-top: 0.75rem; }

.post__body strong { font-weight: 700; }

.post__body hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2.5rem 0;
}

.post__body .stat__source { margin-top: 0.5rem; }

.post__body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.post__body th, .post__body td {
  text-align: left;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.post__body th { font-weight: 700; }

@media (min-width: 48rem) {
  .post__body { font-size: 1.0625rem; }
}

/* Index list -------------------------------------------------------------- */

.post-list { display: grid; gap: 0; }

.post-card {
  padding: 1.75rem 0;
  border-top: 1px solid var(--line);
}
.post-card:last-child { border-bottom: 1px solid var(--line); }

.post-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.625rem;
  font-size: 0.8125rem;
  color: var(--grey-mid);
}

.post-card__topic {
  display: inline-block;
  padding: 0.1875rem 0.625rem;
  border-radius: 999px;
  background: var(--purple-tint);
  color: var(--purple-dark);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

.post-card__title {
  font-size: clamp(1.25rem, 2.6vw, 1.625rem);
  margin-bottom: 0.5rem;
}
.post-card__title a { color: var(--ink); text-decoration: none; }
.post-card__title a:hover, .post-card__title a:focus {
  color: var(--purple);
  text-decoration: underline;
}

.post-card__standfirst {
  color: var(--grey-mid);
  max-width: 68ch;
  margin-bottom: 1rem;
}

.post-list__feed { font-size: 0.9375rem; color: var(--grey-mid); }

@media (min-width: 48rem) {
  .post-card { padding: 2.25rem 0; }
}

/* --------------------------------------------------------- logo strip ----- */
/* Vendor and carrier logos. The image files are already a single colour, so
   there is no filter here: a CSS filter would be one more thing to go wrong and
   would not survive a logo supplied as a solid dark badge. Sizes come from
   width and height attributes in the markup, set from partners.js, so nothing
   moves as the images load and no inline style is needed. */

.logos {
  background: var(--purple-deep);
  padding: 2.75rem 0;
}

.logos__label {
  margin: 0 0 1.75rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.logos__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.75rem 2.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.logos__item { display: flex; align-items: center; }

.logos__img {
  display: block;
  max-width: 100%;
  height: auto;
  opacity: 0.8;
}

@media (min-width: 48rem) {
  .logos { padding: 3.25rem 0; }
  .logos__row { gap: 2rem 3.5rem; }
}

/* ------------------------------------------------------- product shot ----- */
/* A vendor supplied product image sitting in its own band. Capped so it never
   dominates the page, and centred with the caption underneath. */

.shot { margin-top: 2.25rem; text-align: center; }
.shot__img { display: block; width: 100%; max-width: 46rem; height: auto; margin: 0 auto; }
.shot__caption { margin: 1rem auto 0; max-width: 34rem; font-size: 0.875rem; color: var(--grey-mid); }

/* ------------------------------------------------------ hero product ------ */
/* A vendor product image in the hero media slot, as opposed to a photograph of
   a person. No rounded corners, border or fixed aspect ratio: the artwork has a
   transparent background and its own silhouette, so a drop-shadow that follows
   the shape is right where a box shadow would be wrong. Inherits .hero__media,
   so it is hidden below the two column breakpoint like the rest. */

.hero__product {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 24px 58px rgba(0, 0, 0, 0.45));
}

/* Wider media column for a product image, which needs more room than a portrait
   photograph does. The image is allowed to run past the wrap on the right and
   is clipped by the overflow already on .hero, which is a deliberate bleed
   rather than an accident. Only inside the two column breakpoint: below it
   .hero__media is hidden anyway. */
@media (min-width: 62rem) {
  .hero__inner--product { grid-template-columns: 0.95fr 1.3fr; gap: 2.5rem; }
  .hero__inner--product .hero__product { width: 122%; max-width: none; margin-right: -22%; }
}

@media (min-width: 90rem) {
  .hero__inner--product .hero__product { width: 112%; margin-right: -12%; }
}

/* ------------------------------------------------------------- areas ------ */
/* Areas covered, sitting below the main footer. A shade darker than the footer
   so it reads as a separate band rather than more footer. Entries with no page
   are plain text and are styled the same as the links deliberately: the point
   is that a reader sees where we work, not that they click nine towns. */

.areas {
  background: #150331;
  color: rgba(255, 255, 255, 0.72);
  padding-block: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.areas__title {
  margin: 0 0 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.areas__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
}

.areas__item { color: rgba(255, 255, 255, 0.72); }
.areas .areas__item a { color: rgba(255, 255, 255, 0.92); text-decoration: none; }
.areas .areas__item a:hover { color: var(--white); text-decoration: underline; }

.areas__note {
  margin: 1.25rem 0 0;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.5);
  max-width: 60ch;
}