/* ==========================================================================
   Ctrl O — Site styles
   Bootstrap 5.3 first: the HTML uses Bootstrap's grid, utilities, buttons,
   navbar, accordion and carousel, so the pages still have a working layout
   and spacing if this file does not load. This file only adds what
   Bootstrap cannot do: brand colours (via Bootstrap's own variables),
   exact font sizes, the shapes and the hover effects.

   !important is used only where the design needs more space than
   Bootstrap's largest spacing step (48px); those lines override the
   Bootstrap utility class that is the fallback in the HTML.

   1. Design tokens
   2. Base
   3. Layout helpers
   4. Typography
   5. Buttons
   6. Header
   7. Hero
   8. LinkSpace intro
   9. Products
   10. Why work with Ctrl O
   11. Trusted partner
   12. Testimonials
   13. Talk to us
   14. Footer
   ========================================================================== */

/* 1. Design tokens
   ========================================================================== */
:root {
  /* Brand colours */
  --ctrl-off-white: #f3eee5;
  --ctrl-light-purple: #a9adff;
  --ctrl-light-purple-tint: #d4d6ff;
  --ctrl-lavender: #cecdf2; /* dashboard showcase background */
  --ctrl-purple: #7663ff;
  --ctrl-green: #00b55c;
  --ctrl-dark: #241e1c;
  --ctrl-black: #000;
  --ctrl-white: #fff;
  --ctrl-grey: #8a8a8a;
  --ctrl-rule: rgba(36, 30, 28, 0.45);
  --ctrl-rule-light: rgba(243, 238, 229, 0.45);

  /* Fonts */
  --ctrl-font: "Geist", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --ctrl-font-alt: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* Type scale — mobile first. All sizes are in rem (1rem = 16px), so
     changing one value here resizes that text on every page. */
  --ctrl-fs-xl: 1.5rem;      /* H1               24px */
  --ctrl-fs-md: 1.25rem;     /* H2               20px */
  --ctrl-fs-sm: 1rem;        /* H3 / subheading  16px */
  --ctrl-fs-body: 0.9375rem; /* Body             15px */
  --ctrl-fs-small: 0.9375rem;/* Body small       15px */
  --ctrl-fs-btn: 1rem;       /* Button           16px (same on mobile and desktop) */

  /* Spacing */
  --ctrl-gutter: 20px;

  /* Shared shape geometry (desktop): the testimonials panel width and the
     footer overlap are used by several sections, so they live here once. */
  --ctrl-testimonials-panel: 350px;
  --ctrl-footer-overlap: 180px;

  /* Buttons */
  --ctrl-btn-py: 15px;
  --ctrl-btn-px: 30px;
  --ctrl-btn-px-end: 35px;
  --ctrl-btn-radius: 25px;

  /* Bootstrap theme colours = brand colours. The HTML uses Bootstrap's own
     classes (bg-dark, bg-success, text-light, btn-dark, btn-primary, ...);
     these lines only change their colour. Without this file the same
     classes still give Bootstrap's default colours. */
  --bs-primary: var(--ctrl-purple);
  --bs-primary-rgb: 118, 99, 255;
  --bs-success: var(--ctrl-green);
  --bs-success-rgb: 0, 181, 92;
  --bs-dark: var(--ctrl-dark);
  --bs-dark-rgb: 36, 30, 28;
  --bs-light: var(--ctrl-off-white);
  --bs-light-rgb: 243, 238, 229;
  --bs-primary-bg-subtle: var(--ctrl-light-purple);    /* bg-primary-subtle */
  --bs-info-bg-subtle: var(--ctrl-light-purple-tint);  /* bg-info-subtle */
  --bs-secondary-bg-subtle: var(--ctrl-lavender);      /* bg-secondary-subtle */

  /* Bootstrap overrides */
  --bs-body-font-family: var(--ctrl-font);
  --bs-body-color: var(--ctrl-black);
  --bs-body-bg: var(--ctrl-off-white);
  --bs-link-color-rgb: 0, 0, 0;
  --bs-link-hover-color-rgb: 118, 99, 255;
  --bs-border-color: var(--ctrl-rule);
}

@media (min-width: 992px) {
  :root {
    --ctrl-fs-xl: 2.5rem;    /* 40px */
    --ctrl-fs-md: 2rem;      /* 32px */
    --ctrl-fs-sm: 1.25rem;   /* 20px */
    --ctrl-fs-body: 1.25rem; /* 20px */
    --ctrl-fs-small: 1rem;   /* 16px */

    --ctrl-gutter: 40px;
  }
}

/* 2. Base
   ========================================================================== */
/* Smooth scroll for in-page links like "Talk to us" */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%; /* iPhone: keep the sizes we set */
  text-size-adjust: 100%;
}

/* No single word alone on the last line (browsers that support it) */
p, li, blockquote, figcaption, h1, h2, h3, h4, h5, h6 {
  text-wrap: pretty;
}

body {
  overflow-wrap: break-word; /* long emails / URLs wrap instead of overflowing */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: var(--ctrl-fs-body);
}

img {
  max-width: 100%;
  height: auto;
}

a:not(.blogs a, .blog a) {
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--ctrl-purple);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1080;
  padding: 10px 16px;
  background: var(--ctrl-dark);
  color: var(--ctrl-white);
}

/* 3. Layout helpers
   ========================================================================== */
/* Used together with Bootstrap .container (the fallback: centred content
   with side space). Here: design width 1440px with 20px / 40px side
   padding. */
.container-ctrl {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--ctrl-gutter);
}

/* Full-bleed columns that carry their own padding (cards, list items) */
.container-ctrl--flush {
  padding-inline: 0;
}


/* 4. Typography
   ========================================================================== */
.heading-xl,
.heading-md,
.heading-sm {
  font-weight: 400;
  margin: 0;
}

.heading-xl {
  font-size: var(--ctrl-fs-xl);
  line-height: 1.1;
}

.heading-md {
  font-size: var(--ctrl-fs-md);
  line-height: 1.2;
}

.heading-sm {
  font-size: var(--ctrl-fs-sm);
  font-weight: 600;
  line-height: 1.3;
}

.text-body-lg {
  font-size: var(--ctrl-fs-body);
  line-height: 1.3;
}

.text-body-sm {
  font-family: var(--ctrl-font-alt);
  font-size: var(--ctrl-fs-small);
  line-height: 1.4;
}

/* 5. Buttons
   HTML: Bootstrap .btn + .btn-dark / .btn-primary (works without this file).
   Here: brand colours and shape. Single button: rounded bottom-right
   corner. Button group (.btn-row, Bootstrap d-flex gap-1): square
   buttons, only the last one is rounded.
   ========================================================================== */
.btn-ctrl {
  --bs-btn-font-family: var(--ctrl-font);
  --bs-btn-font-size: var(--ctrl-fs-btn);
  --bs-btn-font-weight: 400;
  --bs-btn-line-height: 1.3;
  --bs-btn-padding-y: var(--ctrl-btn-py);
  --bs-btn-padding-x: var(--ctrl-btn-px);
  --bs-btn-border-width: 0;
  --bs-btn-border-radius: 0 0 var(--ctrl-btn-radius) 0;
  --bs-btn-focus-box-shadow: 0 0 0 3px color-mix(in srgb, var(--ctrl-purple) 50%, transparent);
  padding-right: var(--ctrl-btn-px-end);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-row > .btn-ctrl:not(:last-child) {
  --bs-btn-border-radius: 0;
  padding-right: var(--ctrl-btn-px);
}

/* Primary: on light backgrounds */
.btn-ctrl-dark {
  --bs-btn-color: var(--ctrl-white);
  --bs-btn-bg: var(--ctrl-dark);
  --bs-btn-hover-color: var(--ctrl-white);
  --bs-btn-hover-bg: var(--ctrl-purple);
  --bs-btn-active-color: var(--ctrl-white);
  --bs-btn-active-bg: var(--ctrl-purple);
}

/* Secondary: on green backgrounds */
.btn-ctrl-dark-alt {
  --bs-btn-color: var(--ctrl-white);
  --bs-btn-bg: var(--ctrl-dark);
  --bs-btn-hover-color: var(--ctrl-black);
  --bs-btn-hover-bg: var(--ctrl-off-white);
  --bs-btn-active-color: var(--ctrl-black);
  --bs-btn-active-bg: var(--ctrl-off-white);
}

/* On dark backgrounds */
.btn-ctrl-purple {
  --bs-btn-color: var(--ctrl-white);
  --bs-btn-bg: var(--ctrl-purple);
  --bs-btn-hover-color: var(--ctrl-black);
  --bs-btn-hover-bg: var(--ctrl-off-white);
  --bs-btn-active-color: var(--ctrl-black);
  --bs-btn-active-bg: var(--ctrl-off-white);
}

/* 6. Header
   ========================================================================== */
.site-header {
  z-index: 10;
  background-color: var(--ctrl-light-purple);
  border-bottom-right-radius: 20px;
}

.site-header__inner {
  min-height: 70px; /* mobile nav bar (design) */
}

/* Bootstrap py-2 on the navbar is only the no-CSS fallback */
.site-header .navbar {
  padding-block: 0 !important;
}

.site-header__brand img {
  display: block;
  width: 102px; /* mobile logo (design) */
  height: auto;
}

.site-header__brand,
.site-header__toggler {
  height: 70px;
}

.site-header__icon-open {
  width: 23px; /* mobile menu icon (design) */
  height: auto;
}

.site-header__toggler {
  font-size: 1.75rem;
  line-height: 1;
  color: var(--ctrl-black);
}

.site-header__icon-close,
.site-header__toggler[aria-expanded="true"] .site-header__icon-open {
  display: none;
}

.site-header__toggler[aria-expanded="true"] .site-header__icon-close {
  display: block !important; /* beats Bootstrap d-none (fallback: burger only) */
  font-size: 1.5rem;
}

/* Nav link states: hover, keyboard focus and current page share one look */
/* The underline is a background line that grows from left to right */
.site-nav__link,
.mega-menu__heading,
.mega-menu__link > span,
.footer-links a {
  color: var(--ctrl-black);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  padding-bottom: 2px;
  transition: background-size 0.3s ease, color 0.2s ease, background-color 0.2s ease;
}

.site-nav__link:hover,
.site-nav__link:focus-visible,
.site-nav__link.active,
.mega-menu__link.active > span,
.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--ctrl-black);
  background-size: 100% 1px;
}

.mega-menu__link {
  color: var(--ctrl-black);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.site-nav {
  /* Bootstrap .navbar-nav / .nav-link: remove their padding and colours */
  --bs-nav-link-padding-y: 0;
  --bs-navbar-nav-link-padding-x: 0;
}

.site-nav__link {
  display: inline; /* underline sits right under the text */
}

/* Mega menu — mobile: full menu below the logo bar (Bootstrap collapse).
   Limited to the screen height and scrollable, so every link can be
   reached on short screens and phones in landscape. */
.mega-menu {
  flex-basis: 100%;
}

@media (max-width: 991.98px) {
  .mega-menu.show,
  .mega-menu.collapsing {
    max-height: calc(100vh - 70px);
    max-height: calc(100dvh - 70px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.mega-menu__col {
  padding: 35px var(--ctrl-gutter) 29px;
}

.mega-menu__col + .mega-menu__col {
  border-top: 1px solid var(--ctrl-black);
}

.mega-menu__col:last-child {
  padding-block: 33px;
}

.mega-menu__heading {
  display: inline-block;
  font-size: 1.5rem;
  line-height: 1.2;
}

.mega-menu__links {
  margin: 8px 0 0;
}

.mega-menu__link {
  display: block;
  padding-block: 3px;
  font-size: 1rem;
  line-height: 1.3;
}

/* Mobile: links reach the menu edges, so the green bar fills the full
   width; the text stays in line with the heading */
@media (max-width: 991.98px) {
  .mega-menu__link {
    margin-inline: calc(-1 * var(--ctrl-gutter));
    padding-inline: var(--ctrl-gutter);
  }
}

/* Hover and keyboard focus: green highlight bar from the design */
.mega-menu__link:hover,
.mega-menu__link:focus-visible {
  outline: 0;
  background-color: var(--ctrl-green);
}

@media (min-width: 992px) {
  .site-header {
    border-bottom-right-radius: 80px;
  }

  .site-header__inner {
    position: relative;
    z-index: 2;
    min-height: 98px;
  }

  .site-header__brand {
    height: auto;
  }

  .site-header__brand img {
    width: 106px;
  }

  .site-nav {
    gap: 36px;
    margin-right: 60px;
    font-size: 1rem;
    font-weight: 600;
    transition: opacity 0.2s ease; /* fades out while the mega menu is open */
  }

  .site-header.is-open .site-nav {
    opacity: 0;
    pointer-events: none;
  }

  /* Mega menu — desktop: overlay that covers the header and page top */
  .mega-menu,
  .mega-menu.collapse:not(.show) {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    background-color: var(--ctrl-light-purple);
    border-bottom-right-radius: 80px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity 0.25s ease, transform 0.3s ease, visibility 0s linear 0.3s;
  }

  .site-header.is-open .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.25s ease, transform 0.3s ease, visibility 0s;
  }

  .mega-menu__grid {
    display: grid;
    grid-template-columns: 365fr 345fr 345fr 386fr;
    min-height: 636px;
  }

  .mega-menu__col,
  .mega-menu__col:last-child {
    padding: 238px 0 40px;
  }

  .mega-menu__col + .mega-menu__col {
    border-top: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.6);
  }

  .mega-menu__heading {
    margin-inline: 20px;
    font-size: 2rem;
  }

  .mega-menu__col:first-child .mega-menu__heading {
    margin-left: 40px;
  }

  /* 62px gap to the first link text (minus the link's own top padding) */
  .mega-menu__links {
    margin-top: 55.5px;
  }

  /* Links span the full column and the full row height, so the green
     hover bar fills it edge to edge with no gap between rows */
  .mega-menu__link {
    padding: 9.5px 20px;
  }

  /* First column: text stays 40px in; the bar starts 20px before the
     text, the same as in the other columns */
  .mega-menu__col:first-child .mega-menu__link {
    margin-left: 20px;
  }
}

@media (min-width: 1400px) {
  .site-nav {
    margin-right: 135px;
  }
}

/* Government logo lock-up: crest + coloured rule + name
   Sized in em, so one --gov-size value scales the whole logo. */
.gov-logo {
  /*gap: 0.4em;*/
  /*min-height: 5.1em; */ /* grows if a longer name needs more lines */
  /*padding-left: 0.45em;
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--gov-size, 1.625rem);
  line-height: 1.05;
  color: var(--ctrl-black);*/

  height: 100%;
  width: 100%;
  gap: 0 15%;
  object-fit: contain;
}

.gov-logo__crest {
  /*display: block;
  width: auto;
  height: 2em; */
  height: 100%;
  width: 100%;
  padding: 0 15% 0 0;
  object-fit: contain;
}

.gov-logo__name {
  margin-top: auto;
  white-space: nowrap;
}

.gov-logo--ccs {
  min-height: 0;
  font-size: calc(var(--gov-size, 1.625rem) * 1.15);
}

.gov-logo--ccs .gov-logo__name {
  margin-top: 0;
}

.gov-logo--ccs em {
  color: var(--ctrl-grey);
}

/* 7. Hero
   ========================================================================== */
.hero {
  padding-top: 80px !important; /* more than Bootstrap's py-5 (fallback) */
}

@media (min-width: 992px) {
  .hero {
    padding-top: 240px !important;
  }

  .hero__content {
    max-width: 700px;
  }

  .hero__title {
    font-size: var(--ctrl-fs-xl);
  }

  .hero__text {
    max-width: 600px;
    margin: 24px 0 75px !important; /* beats Bootstrap my-5 (mobile 48px) */
  }
}

/* Homepage hero background shape.
   Mobile: small shape (1216px wide), right-aligned at the bottom.
   Desktop: big shape (3002px wide), centred up to 3000px screens.
   Below 1440px it stops at its 1440 position (max) so the green
   shape never runs under the hero text. */
.hero--shape {
  /* Mobile: fixed space below the buttons (as in the design) instead of a
     fixed height, so longer text pushes the shape down instead of
     running into it. */
  padding-bottom: 208px !important; /* room for the shape (Bootstrap py-5 = fallback) */
  background-image: url("../images/mobile-hero-shape.svg");
  background-repeat: no-repeat;
  background-size: auto;
  background-position: right bottom;
}

/* Very narrow phones: the buttons would reach the quarter-circle */
@media (max-width: 369.98px) {
  .hero--shape {
    padding-bottom: 276px !important;
  }
}

@media (min-width: 992px) {
  /* 240px = the ~200px green band at the bottom of the shape + 40px gap,
     so longer text pushes the shape down instead of onto the buttons.
     min-height keeps the upper arcs visible when the text is short. */
  .hero--shape {
    min-height: 911px;
    padding-bottom: 240px !important;
    background-image: url("../images/hero-shape.svg");
    background-position: max(50%, -781px) bottom;
  }
}

/* 8. LinkSpace intro
   ========================================================================== */
/* HTML: Bootstrap py-5 / my-5 spacing. Line under the intro on desktop
   only (mobile runs into the coloured cards). */
.intro__logo {
  display: block;
  width: 140px;
  max-width: 100%; /* a wider image shrinks instead of touching the text */
}

@media (min-width: 992px) {
  .intro {
    padding-block: 105px !important; /* more than Bootstrap's py-5 */
    border-bottom: 1px solid var(--ctrl-rule);
  }

  .intro__logo {
    width: 280px;
  }

  .intro__text {
    margin-bottom: 75px !important; /* text-to-button gap, same as the hero (Figma) */
  }
}

/* 9. Products
   Mobile: coloured stacked cards whose rounded top-right corner overlaps
   the card above. Desktop: three equal off-white columns with dividers.
   ========================================================================== */
.product-card {
  --card-overlap: 50px;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 40px 20px calc(20px + var(--card-overlap));
  background-color: var(--card-bg, var(--ctrl-off-white));
}

/* .accordion-item added: beats Bootstrap's accordion corner radius */
.accordion-item.product-card {
  border-top-right-radius: var(--card-overlap);
}

.products .col-lg-4 + .col-lg-4 .product-card {
  margin-top: calc(var(--card-overlap) * -1);
}

.products .col-lg-4:last-child .product-card {
  padding-bottom: 20px;
}

/* Closed card (mobile): same space below the title as above it (40px),
   so the title sits in the middle of the visible band. The padding
   animates together with the accordion, so nothing jumps. */
@media (max-width: 991.98px) {
  .product-card {
    transition: padding-bottom 0.35s ease;
  }

  .product-card:has(> .product-card__body.collapse:not(.show)) {
    padding-bottom: calc(40px + var(--card-overlap));
  }

  .products .col-lg-4:last-child .product-card:has(> .product-card__body.collapse:not(.show)) {
    padding-bottom: 40px;
  }
}

.product-card--green { --card-bg: var(--ctrl-green); }
.product-card--purple { --card-bg: var(--ctrl-light-purple); }
.product-card--light { --card-bg: var(--ctrl-off-white); }

.product-card__title {
  margin: 0;
}

/* Bigger plus / minus to match the card title size */
.product-card {
  --bs-accordion-btn-icon-width: 20px;
}

.product-card .btn-ctrl {
  align-self: flex-start;
  margin-top: auto;
}

@media (min-width: 992px) {
  .product-card {
    --card-bg: var(--ctrl-off-white);
    min-height: 430px;
    padding: 40px 38px;
  }

  .accordion-item.product-card {
    border-top-right-radius: 140px; /* only visible when the card turns green */
  }

  .products .col-lg-4 + .col-lg-4 .product-card {
    margin-top: 0;
    border-left: 1px solid var(--ctrl-rule);
  }

  .products .col-lg-4:last-child .product-card {
    padding-bottom: 40px;
  }

  .product-card__text {
    margin-bottom: 40px !important; /* beats Bootstrap my-5 */
  }

  /* Hover / keyboard focus: card turns green */
  .product-card {
    transition: background-color 0.3s ease;
  }

  .product-card:hover,
  .product-card:focus-within {
    --card-bg: var(--ctrl-green);
  }

  /* On the green card, the button hover is off-white (like .btn-ctrl-dark-alt) */
  .product-card .btn-ctrl-dark {
    --bs-btn-hover-color: var(--ctrl-black);
    --bs-btn-hover-bg: var(--ctrl-off-white);
    --bs-btn-active-color: var(--ctrl-black);
    --bs-btn-active-bg: var(--ctrl-off-white);
  }

  /* Wide screens: the green first card continues to the left screen edge */
  .products {
    overflow-x: hidden; /* fallback for browsers without clip */
    overflow-x: clip;
  }

  .products .col-lg-4:first-child .product-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 100%;
    width: 100vw;
    height: 100%;
    background-color: var(--card-bg);
    transition: background-color 0.3s ease;
  }

  /* Screens wider than the 1440px design: the last card also continues to
     the right screen edge, and the rounded corner moves to that edge.
     The card itself is square there, so the green has no notch where the
     extension starts. */
  .products {
    container-type: inline-size; /* gives cqw = width without the scrollbar */
  }

  @media (min-width: 1441px) {
    .products .col-lg-4:last-child .accordion-item.product-card {
      border-top-right-radius: 0; /* beats the 140px corner above */
    }

    .products .col-lg-4:last-child .product-card::after {
      content: "";
      position: absolute;
      top: 0;
      left: 100%;
      width: 100vw; /* fallback */
      width: calc(50cqw - 720px); /* exactly to the screen edge */
      height: 100%;
      border-top-right-radius: 140px;
      background-color: var(--card-bg);
      transition: background-color 0.3s ease;
      }
  }

  /* Accordion is mobile only: card body fills the card, button at the bottom */
  .products .accordion-ctrl .product-card__body.collapse,
  .product-card__inner {
    display: flex;
    flex: 1;
    flex-direction: column;
  }
}

/* 10. Why work with Ctrl O
   ========================================================================== */
/* HTML: Bootstrap py-5, mb-5, mt-5, py-4 and flex utilities */

.why__list {
  border-top: 1px solid var(--ctrl-rule-light);
  border-bottom: 1px solid var(--ctrl-rule-light);
}

.why__item {
  min-height: 123px;
  padding-inline: var(--ctrl-gutter);
}

.why__item + .why__item {
  border-top: 1px solid var(--ctrl-rule-light);
}

@media (min-width: 992px) {
  /* Desktop spacing is bigger than Bootstrap's largest step (48px),
     so it overrides the utilities in the HTML */
  .why {
    padding-block: 120px !important;
  }

  .why__title {
    margin-bottom: 104px !important;
  }

  .why__item {
    min-height: 268px;
    padding: 58px 40px !important;
  }

  .why__item + .why__item {
    border-top: 0;
    border-left: 1px solid var(--ctrl-rule-light);
  }

  .why__actions {
    margin-top: 100px !important;
  }
}

/* 11. Trusted partner
   ========================================================================== */
/* HTML: Bootstrap py-5 / mb-5 spacing and d-flex for the logo row.
   Mobile: 3 logos spread over a 362px row (402px design). Extra logos
   wrap to a new row instead of causing sideways scroll. */
.partners__logos {
  --gov-size: 0.9375rem;
  justify-content: space-between;
  gap: 20px 30px;
  max-width: 362px;
}

@media (min-width: 992px) {
  .partners {
    padding-block: 120px !important; /* more than Bootstrap's py-5 */
  }

  /* Desktop: logo left edges match the Figma design (1440px) through a
     fixed share of the row per logo; padding keeps a minimum gap when the
     screen is narrower. Extra logos wrap. */
  .partners__logos {
    --gov-size: 1.625rem;
    max-width: none;
    justify-content: flex-start;
    padding-left: 7px;
  }

  .partners__logos > li:nth-child(1) { flex: 0 0 23%; }
  .partners__logos > li:nth-child(2) { flex: 0 0 23%; }
  .partners__logos > li:nth-child(3) { flex: 0 0 40%; }

  /* Bigger names: 30.5px on large screens, scaling down to 26px on small
     desktops so the 3 logos stay on one row. Crest and line keep their size. */
  .partners__logos .gov-logo__name {
    font-size: clamp(1em, calc(1.6vw + 0.5rem), 1.175em);
  }

  .partners__cta {
    margin-top: 80px !important; /* more than Bootstrap's mt-5 */
  }
}

/* 12. Testimonials
   Mobile: Bootstrap carousel (one quote, dots).
   Desktop: the same markup shown as a stacked list.
   ========================================================================== */
.testimonials__aside {
  min-height: 127px;
  padding-inline: var(--ctrl-gutter);
  background-color: var(--ctrl-light-purple);
}

/* Mobile: small dark quarter-circle in the bottom-right corner */
.testimonials__carousel {
  /* Right padding keeps the quote clear of the corner shape */
  padding: 30px 150px 20px var(--ctrl-gutter);
  /* At least as tall as the 127px corner shape so it is never cut off;
     quote + dots sit in the vertical centre. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 127px;
  background: var(--ctrl-light-purple-tint) url("../images/testimonials-section-mobile-shape.svg") no-repeat right bottom / auto;
}

.testimonial {
  margin: 0;
}

.testimonial__quote {
  margin: 0;
  font-size: 1rem;
  line-height: 1.3;
  /* Hanging opening quote mark */
  padding-left: 0.4em;
  text-indent: -0.4em;
}

.testimonials__dots {
  position: static;
  justify-content: flex-start;
  gap: 0;
  margin: 12px 0 0 -8.5px; /* left: the first dot lines up with the text */
}

/* The dot is 7px, but the button around it is 24px so it is easy to tap */
.testimonials__dots [data-bs-target] {
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 8.5px;
  border: 0;
  border-radius: 50%;
  background-color: var(--ctrl-purple);
  background-clip: content-box;
  opacity: 0.35;
}

.testimonials__dots .active {
  opacity: 1;
}

@media (min-width: 992px) {
  /* Content stays in the 1440 container; the purple panel and the
     row lines stretch to the screen edges. */
  .testimonials {
    overflow-x: hidden; /* fallback for browsers without clip */
    overflow-x: clip;
    border-top: 1px solid var(--ctrl-rule);
  }

  /* Fixed-width panel (350px, as in the design); quotes take the rest */
  .testimonials__row > .testimonials__aside {
    flex: 0 0 var(--ctrl-testimonials-panel);
    width: var(--ctrl-testimonials-panel);
  }

  .testimonials__row > .testimonials__main {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }

  /* Bottom padding = 203px shape + 20px gap, so the heading never sits
     on the dark shape, even with only one testimonial. The shape sits
     bottom-right of the purple panel; the image is 1133px wide, so the dark
     block still reaches the left screen edge on wide screens. */
  .testimonials__aside {
    position: relative;
    isolation: isolate;
    min-height: 0;
    padding: 65px 40px 223px;
    background-color: transparent;
  }

  /* Starts 1px higher so the purple covers the section's top line:
     the line only shows above the quotes, as in the design */
  .testimonials__aside::before {
    content: "";
    position: absolute;
    inset: -1px 0 0 -100vw;
    z-index: -1;
    background: var(--ctrl-light-purple) url("../images/testimonials-section-shape.svg") no-repeat right bottom / auto;
  }

  .testimonials__carousel {
    display: block;
    min-height: 0;
    padding: 0;
    background: none;
  }

  /* Show every slide as a list row */
  .testimonials__carousel .carousel-inner {
    display: block;
    overflow: visible;
  }

  .testimonials__carousel .carousel-item {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 189px;
    padding: 20px clamp(40px, 10.4vw, 150px);
    opacity: 1;
    visibility: visible;
    transition: none;
  }

  .testimonials__carousel .carousel-item + .carousel-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    border-top: 1px solid var(--ctrl-rule);
  }

  .testimonial__quote {
    max-width: 800px;
    font-size: var(--ctrl-fs-md);
    line-height: 1.2;
  }

  .testimonials__dots {
    display: none;
  }
}

/* Mobile: Bootstrap's carousel slides the quotes left/right. All slides share
   one grid cell, so the box is always as tall as the longest quote and
   does not jump between slides. Slides that are not showing are hidden
   from screen readers. */
@media (max-width: 991.98px) {
  .testimonials__carousel .carousel-inner {
    display: grid;
  }

  .testimonials__carousel .carousel-item {
    display: block;
    float: none;
    margin: 0;
    grid-area: 1 / 1;
  }

  .testimonials__carousel .carousel-item:not(.active, .carousel-item-next, .carousel-item-prev) {
    visibility: hidden;
  }

  /* The next quote jumps straight to its start position (off to the side)
     before sliding in. Without this it would animate there first and
     appear on top of the current quote. */
  .testimonials__carousel .carousel-item-next:not(.carousel-item-start),
  .testimonials__carousel .carousel-item-prev:not(.carousel-item-end) {
    transition: none;
  }
}

/* 13. Talk to us
   ========================================================================== */
/* HTML: Bootstrap py-5 (top space), mb-4 gaps.
   Extra bottom space sits under the footer's rounded corner. */
.contact {
  padding-bottom: 90px !important;
}

/* Homepage: mobile shape across the top, right-aligned (1216px wide).
   164px top padding = 128px shape + 36px space above the heading. */
.contact--shape {
  padding-top: 164px !important;
  background-image: url("../images/talk-to-us-mobile-shape.svg");
  background-repeat: no-repeat;
  background-size: auto;
  /* Right-aligned: the curve always sits under the Testimonials corner
     shape and is never cut off on narrow phones */
  background-position: right top;
}

.contact__title {
  padding-right: 40px; /* gap to the text column on smaller desktops */
}

.contact__text a {
  color: inherit;
}

@media (min-width: 992px) {
  /* Bottom padding = footer overlap + 122px space under the buttons */
  .contact {
    padding-block: 128px calc(var(--ctrl-footer-overlap) + 122px) !important;
  }

  /* Desktop shape (3019 x 203px, real size). It is pinned to the content
     container, not the screen centre, so its curve always lines up with the
     Testimonials panel above at any screen width.
     --shape-joint = where the curve meets the panel inside the image. */
  .contact--shape {
    --shape-h: 203px;
    --shape-gap: 131px;
    --shape-joint: 1149.8px;
    padding-top: calc(var(--shape-h) + var(--shape-gap)) !important;
    background-image: none;
    overflow-x: hidden; /* fallback for browsers without clip */
    overflow-x: clip;
  }

  .contact--shape > .container-ctrl {
    position: relative;
  }

  .contact--shape > .container-ctrl::before {
    content: "";
    position: absolute;
    top: calc(-1 * (var(--shape-h) + var(--shape-gap)));
    left: calc(var(--ctrl-testimonials-panel) - var(--shape-joint));
    width: 3019.3px;
    height: var(--shape-h);
    background: url("../images/talk-to-us-section-shape.svg") no-repeat left top / auto;
    pointer-events: none;
  }

  .contact__text {
    max-width: 434px;
    margin: -6px 0 75px !important; /* 75px text-to-button gap, same as the hero (Figma) */
  }

  .contact__text--narrow {
    max-width: 330px;
  }
}

/* 14. Footer
   HTML: Bootstrap row / col / order (mobile order: links, text, logos,
   copyright) and py-5, d-flex, gap utilities.
   ========================================================================== */
.site-footer {
  position: relative;
  margin-top: -50px;
  border-top-right-radius: 50px;
  background-color: var(--ctrl-off-white);
}

/* Bootstrap gy-4 on the row is only the no-CSS fallback */
.site-footer .site-footer__grid {
  --bs-gutter-y: 0;
}

/* Mobile: logos keep the 402px-design spacing (362px row) and stay
   left-aligned on wider screens instead of spreading out. */
.footer-logos {
  --gov-size: 0.75rem;
  flex-wrap: nowrap !important; /* Bootstrap flex-wrap / gap-3 = fallback only */
  justify-content: space-between;
  gap: 30px !important;
  max-width: 362px;
}

.footer-logos + .footer-logos {
  margin-top: 40px;
}

.footer-logos li:not(.gov-logo) img {
  display: block;
  width: auto;
  max-width: 100%;
  /* If space is tight the logo shrinks but keeps its shape */
  object-fit: contain;
  object-position: center;
}

.footer-logos > li {
  min-width: 0;
}

/* Mobile: spacing and logo positions from the 402px Figma footer */
@media (max-width: 991.98px) {
  .site-footer__about {
    margin-top: 9px;
  }

  .site-footer__logos {
    padding-block: 31px 0;
  }

  .site-footer__copy {
    padding-top: 38px;
  }

  .footer-logos + .footer-logos {
    margin-top: 38px;
  }

  /* Gov logos start at 20 / 147 / 276px on the 402px design. Shares of
     the row (127 / 129 of 362px), so they also fit narrower phones. */
  .footer-logos:not(.footer-logos--small) {
    justify-content: flex-start;
    gap: 0 !important;
  }

  .footer-logos:not(.footer-logos--small) > li:nth-child(1) { flex: 0 0 35.08%; }
  .footer-logos:not(.footer-logos--small) > li:nth-child(2) { flex: 0 0 35.64%; }

  /* Crown Commercial Service: same rule height as the other two logos */
  .footer-logos .gov-logo--ccs {
    min-height: calc(var(--gov-size) * 5.1);
  }
}

@media (min-width: 992px) {
  .site-footer {
    margin-top: calc(-1 * var(--ctrl-footer-overlap));
    padding-block: 74px 42px !important; /* beats Bootstrap py-5 */
    border-top-right-radius: 240px 180px;
  }

  /* 80px between the two footer rows */
  .site-footer__links,
  .site-footer__copy {
    margin-top: 80px;
  }

  .site-footer__about p {
    max-width: 440px;
  }

  .site-footer__logos {
    padding: 6px 0 0;
  }

  .site-footer__copy {
    padding-top: 0;
  }

  /* Logo left edges match the Figma design (1440px) through a fixed share
     of the row per logo; padding keeps a minimum 16px gap on smaller
     desktops so badges never touch. Extra logos wrap. */
  .footer-logos {
    --gov-size: 1.125rem;
    max-width: none;
    justify-content: flex-start;
    /* gap: 40px 0 !important; */
    padding-left: 12px;
  }

  .footer-logos--small li {
      flex: 1 1 25%;
  }
  .footer-logos--small > li:nth-child(3) { flex-basis: 20%; }
  .footer-logos--small > li:nth-child(4) { flex-basis: 20%; }

  .footer-logos + .footer-logos {
    margin-top: 83px;
  }

}


/* ==========================================================================
   LinkSpace for Professional Standards page
   15. Product hero
   16. Accordion toggles (shared by features + team)
   17. Features
   18. Dashboard showcase
   19. Security
   20. Team
   ========================================================================== */

/* 15. Product hero
   ========================================================================== */
.ps-hero {
  padding-top: 72px !important; /* more than Bootstrap's pt-5 (fallback) */
}

.ps-hero__logo {
  display: block;
  width: 279px; /* size in the 402px Figma design */
  max-width: 100%;
}

/* The shape sits at the top of its own full-width band below the hero
   text, and the subtitle sits inside that band below the shape's dark
   strip. The band starts after the text, so longer text pushes the shape
   down instead of running into it, and a longer subtitle makes the band
   taller instead of growing up into the dark strip.

   If the subtitle is taller than the shape, the second background layer
   (the same purple column with its lines, drawn with a gradient)
   continues the column down to the bottom of the band.

   Mobile: 966 x 128px shape, right-aligned. 60px gap below the buttons;
   166px = dark strip (127px) + gap to the subtitle (as in the design). */
.ps-hero__band {
  --line: var(--ctrl-off-white);
  --col: var(--ctrl-purple);
  min-height: 298px;
  margin-top: 40px !important; /* beats Bootstrap mt-5 (fallback) */
  padding: 166px 0 40px;
  background:
    url("../images/linkspace-professional-standards-hero-mobile-shape.svg") no-repeat right -20.6px top / auto,
    /* All layers are moved 20.6px right so the curve and column touch the
       right screen edge. The image is only the dark stripes + curve (128px tall). The straight
       purple column below it is a 2nd SVG with the SAME width (966.5px) and
       the same coordinates, so its white lines meet the curved lines exactly
       at any zoom. A 1px tan line sits under the curve. */
    linear-gradient(var(--line), var(--line)) no-repeat right -1px top 127px / 128px 1px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='966.5' height='2000'%3E%3Crect x='819.5' width='126.4' height='2000' fill='%237663FF'/%3E%3Cg stroke='%23F2EEE6' stroke-width='0.99'%3E%3Cpath d='M851.3 0V2000M882.7 0V2000M914.2 0V2000'/%3E%3C/g%3E%3C/svg%3E") no-repeat right -20.6px top 128px / 966.5px 2000px;
}

/* Right padding keeps the text clear of the purple column
   (column 126px wide at the screen edge + 20px gap - 20px gutter). */
.ps-hero__subtitle {
  padding-right: 127px;
}

.ps-hero__lead {
  font-size: var(--ctrl-fs-xl); /* H1 style on mobile (client) */
  line-height: 1.1;
  margin-bottom: 0 !important; /* beats Bootstrap my-5 */
}

@media (min-width: 992px) {
  .ps-hero {
    padding-top: 160px !important;
  }

  .ps-hero__brand {
    padding-right: 40px; /* gap to the lead text on smaller desktops */
  }

  .ps-hero__logo {
    width: 480px;
    max-width: 100%;
  }

  .ps-hero__lead {
    max-width: 680px;
    margin: 66px 0 0 !important; /* beats Bootstrap my-5 (mobile) */
    font-size: var(--ctrl-fs-md); /* desktop stays as in the design */
    line-height: 1.2;
  }

  /* Desktop: 3001 x 669px shape, centred. Its top arc starts 63px above
     the end of the hero text (as in the design); the dark strip starts
     204px into the shape, so the lead always has 141px of space above it.
     527px = from the top of the shape to the subtitle. */
  .ps-hero__band {
    min-height: 669px;
    margin-top: -63px !important;
    padding: 527px 0 64px;
    /* The column stripes are listed first (painted on top), so they cover
       the image's thin tan bottom edge and the purple runs right down to
       the line under the hero. */
    background:
      linear-gradient(to right,
        var(--line) 0 1px, var(--col) 1px 51px, var(--line) 51px 52px,
        var(--col) 52px 102px, var(--line) 102px 103px,
        var(--col) 103px 152px, var(--line) 152px 153px,
        var(--col) 153px 204px, var(--line) 204px 205px)
        no-repeat calc(50% + 621px) 668px / 205px 100%,
      url("../images/linkspace-professional-standards-hero-shape.svg") no-repeat center top / auto;
  }

  .ps-hero__subtitle {
    max-width: 785px;
    padding: 0 0 0 118px;
  }
}

/* 16. Accordions (Bootstrap .accordion: products, features, team)
   HTML is Bootstrap's own accordion, so it still works and looks like a
   normal accordion without this file. Here we only restyle it:
   no borders or padding, plus / minus icon.
   Desktop: main.js opens every panel (Bootstrap .show) and disables
   the buttons, so this also works without this file.
   ========================================================================== */
.accordion-ctrl {
  --bs-accordion-bg: transparent;
  --bs-accordion-color: inherit;
  --bs-accordion-border-width: 0;
  --bs-accordion-border-radius: 0;
  --bs-accordion-inner-border-radius: 0;
  --bs-accordion-btn-padding-x: 0;
  --bs-accordion-btn-padding-y: 0;
  --bs-accordion-btn-color: inherit;
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-active-color: inherit;
  --bs-accordion-active-bg: transparent;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-body-padding-x: 0;
  --bs-accordion-body-padding-y: 0;
  --bs-accordion-btn-icon-width: 14px;
  --bs-accordion-btn-icon-transform: none;
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2'/%3E%3C/svg%3E");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M2 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11A.5.5 0 0 1 2 8'/%3E%3C/svg%3E");
}

.accordion-ctrl .accordion-button {
  align-items: flex-start;
  gap: 20px;
  font: inherit;
  overflow-wrap: anywhere; /* long words / URLs wrap inside the flex row */
}

/* Icon sits in the middle of the first text line */
.accordion-ctrl .accordion-button::after {
  margin-top: calc((1lh - var(--bs-accordion-btn-icon-width)) / 2);
}

.accordion-ctrl .accordion-button:focus-visible {
  outline: 2px solid var(--ctrl-purple);
  outline-offset: 3px;
}

@media (min-width: 992px) {
  .accordion-ctrl .accordion-button {
    cursor: default;
  }

  .accordion-ctrl .accordion-button::after {
    display: none;
  }
}

/* 17. Features
   ========================================================================== */
/* Row lines run full screen width; content stays in the container.
   Mobile: the section has the same purple as the rows, so the
   semi-transparent lines all look the same colour. */
.features {
  border-bottom: 1px solid var(--ctrl-rule);
  background-color: var(--ctrl-light-purple);
}

@media (min-width: 992px) {
  .features {
    background-color: transparent;
  }
}

.features__row {
  border-top: 1px solid var(--ctrl-rule);
}

.feature {
  gap: 20px !important;       /* beats Bootstrap gap-3 / p-3 (fallback) */
  padding: 18px 20px !important;
  background-color: var(--ctrl-light-purple);
}

.feature + .feature {
  border-top: 1px solid var(--ctrl-rule);
}

/* Mobile: tan (off-white) lines around and between the purple accordion
   rows, including the line under the hero. Desktop keeps dark lines. */
@media (max-width: 991.98px) {
  /* Title sits in the middle of the 28px icon, so a closed row has its
     title centred vertically ((28px icon - 21px title) / 2 = 3.5px) */
  .feature .feature__title {
    margin-top: 3.5px;
  }

  .features,
  .features__row,
  .feature + .feature {
    border-color: var(--ctrl-off-white);
  }
}

.feature__icon {
  flex: 0 0 22px;
  width: 22px;
  height: 28px;
  object-fit: contain;
}

.feature__title {
  font-size: var(--ctrl-fs-sm);
  line-height: 1.3;
}

.feature__body p {
  margin: 0;
  font-size: var(--ctrl-fs-body);
  line-height: 1.3;
}

@media (min-width: 992px) {
  .feature {
    gap: 36px !important;
    min-height: 148px;
    padding: 34px 40px 34px 60px !important;
    background-color: transparent;
  }

  .feature + .feature {
    border-top: 0;
    border-left: 1px solid var(--ctrl-rule);
  }

  /* A little more space between the title and the text below it */
  .feature__title {
    margin-bottom: 6px;
  }

  /* Icon sizes from the design. Each icon sits in a 56 x 64px box
     (the margins fill the box), so the text always lines up. */
  .feature__icon {
    flex: 0 0 auto;
  }

  .features__row:nth-child(1) .feature:nth-child(1) .feature__icon { width: 32px; height: 47px; margin: 8.5px 12px; }  /* modern policing */
  .features__row:nth-child(1) .feature:nth-child(2) .feature__icon { width: 28px; height: 52px; margin: 6px 14px; }    /* bespoke workflows */
  .features__row:nth-child(2) .feature:nth-child(1) .feature__icon { width: 44px; height: 44px; margin: 10px 6px; }    /* reporting */
  .features__row:nth-child(2) .feature:nth-child(2) .feature__icon { width: 38px; height: 43px; margin: 10.5px 9px; }  /* audit history */
  .features__row:nth-child(3) .feature:nth-child(1) .feature__icon { width: 31px; height: 46px; margin: 9px 12.5px; }  /* controlled access */
  .features__row:nth-child(3) .feature:nth-child(2) .feature__icon { width: 37px; height: 48px; margin: 8px 9.5px; }   /* updated fast */
}

/* 18. Dashboard showcase
   ========================================================================== */
/* HTML: Bootstrap bg-secondary-subtle (lavender) and pt-4 / pb-5 / mt-5 */

/* Centred block; image and caption stay left-aligned inside it */
.showcase__inner {
  max-width: 1131px;
  margin: 0 auto;
}

.showcase__image {
  display: block;
  width: 100%;
}

@media (min-width: 992px) {
  .showcase {
    padding-block: 122px 104px !important; /* more than Bootstrap's pt-4 / pb-5 */
  }

  .showcase__caption {
    max-width: 781px;
    margin-top: 82px !important;
  }
}

/* 19. Security
   ========================================================================== */
/* HTML: Bootstrap pt-5 / pb-5 / mb-3 / mb-4 / p-4 and flex utilities */
.security__quote-text {
  padding-left: 0.4em;
  text-indent: -0.4em;
}

.security__quote figcaption {
  padding-left: 0.4em;
}

.security__list {
  border-top: 1px solid var(--ctrl-rule-light);
}

/* Mobile/tablet: content centred in the cell (Bootstrap flex utilities),
   so top and bottom space always match. */
.security__item {
  min-height: 122px;
}

.security__item:nth-child(odd) {
  border-right: 1px solid var(--ctrl-rule-light);
}

.security__item:nth-child(n + 3) {
  border-top: 1px solid var(--ctrl-rule-light);
}

@media (min-width: 992px) {
  /* Desktop spacing is bigger than Bootstrap's largest step (48px) */
  .security {
    padding-top: 120px !important;
  }

  .security__intro {
    padding-bottom: 120px !important;
  }

  .security__title {
    max-width: 560px;
    padding-right: 40px; /* gap to the quote on smaller desktops */
  }

  .security__item {
    min-height: 416px;
    padding: 137px 40px 40px !important;
  }

  .security__item:nth-child(n) {
    border-top: 0;
    border-right: 0;
  }

  .security__item + .security__item {
    border-left: 1px solid var(--ctrl-rule-light);
  }
}

/* 20. Team
   ========================================================================== */
.team {
  /* keeps the extended row line from causing sideways scroll */
  overflow-x: hidden; /* fallback for browsers without clip */
  overflow-x: clip;
}

/* Mobile: small purple quarter-circle, bottom-right of the intro */
.team__intro {
  padding-inline: var(--ctrl-gutter);
  background: url("../images/expert-section-mobile-shape.svg") no-repeat right bottom / auto;
}

.team__title {
  font-size: var(--ctrl-fs-xl);
}

/* Mobile: a longer button label wraps before it reaches the
   126px quarter-circle in the corner */
.team__intro .btn {
  max-width: calc(100% - 146px);
}

/* Mobile: dark line above every person (Bootstrap removes the top
   border from accordion items after the first, so this is more specific) */
@media (max-width: 991.98px) {
  .team .accordion-ctrl .person {
    border-top: 1px solid var(--ctrl-dark);
  }
}

/* Mobile: photo on top; when the bio is open and the row grows,
   the striped purple block fills the space under the photo. */
.person__photo {
  flex: 0 0 127px;
  overflow: hidden;
  background: url("../images/expert-image-bottom-mobile-shape.svg") repeat-y left top / auto;
}

.person__photo img {
  display: block;
  width: 100%;
  height: 161px;
  object-fit: cover;
  object-position: center top;
}

.person__info {
  flex: 1;
  padding: 20px;
}

.person__name {
  font-size: var(--ctrl-fs-sm);
  font-weight: 400;
  line-height: 1.3;
}

/* Name + role sit together on the left of the icon */
.accordion-ctrl .person__toggle {
  flex-wrap: wrap;
  row-gap: 0;
}

.person__toggle strong {
  flex: 1 1 calc(100% - 34px);
  order: 0;
  font-weight: 600;
}

.person__toggle::after {
  order: 1;
}

.person__toggle > span {
  order: 2;
  flex-basis: 100%;
  margin-top: -2px;
}

.person__bio {
  font-family: var(--ctrl-font-alt);
  font-size: var(--ctrl-fs-small);
  line-height: 1.4;
}

@media (min-width: 992px) {
  /* Bottom padding = 205px shape + 40px gap, so the shape never covers
     the button, even with only one team member. */
  .team__intro {
    position: relative;
    z-index: 1;
    padding: 40px 40px 245px !important; /* room for the shape (beats py-5) */
    background: none;
  }

  .team__intro .btn {
    max-width: none;
  }

  /* Fixed-width intro column (480px, as in the design); people take the rest */
  .team .row > .team__aside {
    position: relative;
    flex: 0 0 480px;
    width: 480px;
  }

  .team .row > .team__main {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }

  /* Purple shape at the bottom-left, shown at its real size (983 x 205).
     Its quarter-circle ends 202px into the column; the straight part runs
     off to the left edge of the screen on wide screens. */
  .team__aside::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: -781px;
    width: 983px;
    height: 205px;
    background: url("../images/expert-section-shape.svg") no-repeat left bottom / auto;
    pointer-events: none;
  }

  .team__title {
    margin-bottom: 64px !important; /* more than Bootstrap's mb-5 */
  }

  .person {
    position: relative;
    min-height: 400px;
    border-top: 0;
  }

  /* Line between people: from the photo to the right edge of the screen */
  .person + .person::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    border-top: 1px solid var(--ctrl-rule);
  }

  /* Desktop: photo keeps its natural shape (no stretching); the striped
     purple block sits behind it and only shows if the text is taller. */
  .person__photo {
    flex-basis: 33.85%;
    background: url("../images/expert-image-bottom-mobile-shape.svg") repeat-y left top / 100% auto;
  }

  /* Photo box fills the row height; the whole photo stays visible
     (contain, no cropping or stretching) */
  .person__photo img {
    height: 100%;
    aspect-ratio: 650 / 800;
    object-fit: contain;
  }

  .person__info {
    padding: 32px 40px;
    border-top-right-radius: 180px; /* only visible when the info turns purple */
    transition: background-color 0.3s ease;
  }

  /* Hover / keyboard focus: info turns purple */
  .person:hover .person__info,
  .person:focus-within .person__info {
    background-color: var(--ctrl-light-purple);
  }

  .person__bio {
    max-width: 440px;
  }
}

/* 21. Page load and scroll animations (OFF: the "anim" class is no longer added in partials.js, so none of this runs)
   ==========================================================================
   Only active when <html> has .anim (added by partials.js when JavaScript
   runs, this file is loaded and the visitor has not asked for less motion).
   Without it everything simply shows, so nothing can stay hidden.

   HTML:
     data-anim="left|right|up"  fade in and slide from that side
     data-anim-children="left|right"  same, but only the content inside slides
                                (the element's own border lines stay still)
     Background shapes are not animated.
   main.js adds .is-in when the element scrolls into view (once), and a
   short --anim-delay so elements that appear together follow each other. */
:root {
  --anim-dist: 100px; /* how far elements slide */
  --anim-dur: 1.2s;   /* how long the slide takes */
  --anim-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (max-width: 991.98px) {
  :root {
    --anim-dist: 60px; /* shorter on phones so content never leaves the screen */
  }
}

[data-anim="left"],
[data-anim-children="left"]  { --anim-x: calc(-1 * var(--anim-dist)); }
[data-anim="right"],
[data-anim-children="right"] { --anim-x: var(--anim-dist); }
[data-anim="up"]    { --anim-y: var(--anim-dist); }

@keyframes anim-in {
  from {
    opacity: 0;
    transform: translate(var(--anim-x, 0), var(--anim-y, 0));
  }
}

@media screen {
  /* Sliding elements never cause sideways scrolling */
  .anim main {
    overflow-x: clip;
  }

  .anim [data-anim] {
    opacity: 0;
  }

  .anim [data-anim].is-in {
    opacity: 1;
    animation: anim-in var(--anim-dur) var(--anim-ease) var(--anim-delay, 0s) backwards;
  }

  /* data-anim-children: the element itself (with its border lines and
     background) stays still; only what is inside it fades and slides in */
  .anim [data-anim-children] > * {
    opacity: 0;
  }

  .anim [data-anim-children].is-in > * {
    opacity: 1;
    animation: anim-in var(--anim-dur) var(--anim-ease) var(--anim-delay, 0s) backwards;
  }

  /* Testimonials (desktop): the quotes slide in one by one (data-anim on
     each quote), so the carousel itself does not animate. */
  /* Mobile: these sections do not animate (product cards, partner logos,
     testimonials, talk to us and the features list). Desktop is unchanged. */
  @media (max-width: 991.98px) {
    .anim .products [data-anim],
    .anim .partners [data-anim],
    .anim .testimonials [data-anim],
    .anim .contact [data-anim],
    .anim .testimonial[data-anim-children] > *,
    .anim .features [data-anim-children] > * {
      opacity: 1;
      animation: none;
    }
  }

  @media (min-width: 992px) {
    .anim .testimonials__carousel[data-anim] {
      opacity: 1;
      animation: none;
    }
  }
}

/* Users who ask their device for less motion get instant changes */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* new */

.blog .author-thumbnail {
    height: 100px;
    border-radius: var(--bs-border-radius);
}
.blogs .post-thumbnail {
    height: fit-content;
    border-radius: var(--bs-border-radius);
}

@media only screen and (min-width: 768px) {
    .blogs .post-thumbnail {
        width: 200px;
        /* Ignore 100% max-width from img-fluid class used in narrower
         * viewports */
        max-width: 200px;
        margin-top: 0.5rem;
    }
}

/* Images full-width in mobile view, slightly narrower in wider views */
.page-content img, .blog img:not(.author-thumbnail) {
    max-width: 100%;
    padding-top: 1em;
    padding-bottom: 1em;
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: auto;
}
@media (min-width:768px) {
    .page-content img:not(.author-thumbnail, .gallery img), .blog img:not(.author-thumbnail, .gallery img) {
        max-width: 80%;
    }
}