/* ==========================================================================
   SECTIONS — home page composition.
   One block per Figma section; each becomes a React section component.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HERO
   Figma: bg image 1728x656, copy column on the left, figure on the right.
   -------------------------------------------------------------------------- */
/* The banner is a stage for a photograph now: each slide carries its own
   full-bleed image with a dark scrim over it and white copy on top, sitting
   left, right, left as you page through. The section keeps a dark base
   colour so nothing flashes white while the first photograph decodes. */
.hero {
  position: relative;
  background-color: var(--c-navy-900);
  overflow: hidden;
  isolation: isolate;
}

/* Holds the copy block and sets the banner's height. The block sits at the
   start of the banner by default; slides carrying --end put it at the other
   side, so the three alternate as you page through them. */
/* The banner fills the first screen: everything under the sticky header, at
   every viewport height. It was a flat 656px, which with the 104px header came
   to 760px — below the fold on a 1366x768 laptop, and short of the fold on
   anything taller, so the strip beneath it showed through.

   svh, not vh or dvh: the small viewport height is the screen with the mobile
   address bar SHOWING, so the banner is never taller than what is actually
   visible. dvh would re-run this on every address-bar show/hide and resize the
   banner mid-scroll. The vh line above it is the fallback for browsers with no
   svh support.

   min-height, not height: it stays a floor, so copy that needs more room than
   the screen has still gets it rather than being clipped. */
.hero__inner {
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  display: grid;
  align-items: center;
  justify-items: start;
  /* Height-aware. The old value keyed off vw, which cannot tell that a screen
     is short — on a 768px-tall laptop it still spent 137px on padding alone.
     Only bites when the viewport is too short for the cap above: at any greater
     height min-height wins and the copy is centred in it, so this is really
     "how little padding is acceptable when squeezed". */
  padding-block: clamp(1.25rem, 3vh, 4.29rem);
}

/* Under the overlay header the banner owns the whole screen, because the header
   is out of the flow and no longer takes a slice off the top. The extra top
   padding is the header's height: without it the copy centres against the full
   height and drifts up under the nav. */
.overlay-header .hero__inner {
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(var(--header-h) + clamp(1.25rem, 3vh, 4.29rem));
}

.hero__copy {
  max-width: 46rem;
  text-align: left;
  /* Photographs are never uniform; a soft shadow keeps the text legible over
     whichever part of the picture ends up behind it. */
  text-shadow: 0 1px 24px rgba(4, 12, 22, 0.45);
}

/* --end moves the whole block to the right of the banner; the type inside it
   stays left-aligned, so every slide reads down the same edge no matter which
   side the block is parked on. */
.hero__slide--end .hero__inner {
  justify-items: end;
}

.hero__title {
  font-family: var(--font-body);
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: 1.18;
  letter-spacing: -0.44px;
  color: var(--c-white);
  margin-bottom: 1.1rem;
}

/* First line stays brand — the lighter accent blue, which holds up on a
   photograph where the primary would go muddy. */
.hero__title-accent {
  display: block;
  color: var(--c-accent);
}

.hero__title-sub {
  display: block;
  font-weight: var(--fw-regular);
}

/* Each slide carries a different supporting block under its lead — chips on
   slide 1, live figures on slide 2, a checklist on slide 3 — so the three
   read as three messages rather than one headline being retyped. */
.hero__eyebrow {
  display: inline-block;
  margin-bottom: 0.9rem;
  padding: 0.34rem 0.9rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--c-white);
}

.hero__chips {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.hero__chips li {
  padding: 0.4rem 0.9rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.24);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--c-white);
}

.hero__figures {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 0 2rem;
}

.hero__figures > div {
  padding-right: clamp(1.1rem, 0.6rem + 1.4vw, 2.1rem);
  margin-right: clamp(1.1rem, 0.6rem + 1.4vw, 2.1rem);
  border-right: 1px solid rgba(255, 255, 255, 0.25);
}

.hero__figures > div:last-child {
  padding-right: 0;
  margin-right: 0;
  border-right: 0;
}

.hero__figures dt {
  font-family: var(--font-body);
  font-size: clamp(1.3rem, 1.05rem + 0.9vw, 1.7rem);
  font-weight: var(--fw-bold);
  letter-spacing: -0.5px;
  line-height: 1.1;
  color: var(--c-accent);
}

.hero__figures dd {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-light);
  color: rgba(255, 255, 255, 0.82);
  margin: 0.25rem 0 0;
  max-width: 14rem;
}

/* One column: the copy block is only ~46rem wide, and these lines are long
   enough that two columns would wrap every one of them. */
.hero__points {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: grid;
  gap: 0.55rem;
  max-width: 40rem;
  text-align: left;
}

.hero__points li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 0.65rem;
  align-items: start;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
}

.hero__points svg {
  width: 20px;
  height: 20px;
  margin-top: 0.1em;
  color: var(--c-accent);
}

.hero__lead {
  max-width: 43rem;
  margin: 0 0 2.35rem;
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
  letter-spacing: 0.55px;
  color: rgba(255, 255, 255, 0.9);
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* The outline button is drawn for a light background; on the photograph it
   has to be white on nothing. */
.hero__actions .btn-sysin--outline {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--c-white);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.hero__actions .btn-sysin--outline:hover {
  background: var(--c-white);
  border-color: var(--c-white);
  color: var(--c-navy-900);
}

/* Hero slider ------------------------------------------------------------- */
.hero__slider {
  position: relative;
}

.hero__slide {
  position: relative;
  display: block;
  isolation: isolate;
  /* The photograph is overscaled; without this each slide's picture spills a
     few per cent over its neighbour, and the next slide shows as a strip down
     the edge of the current one. */
  overflow: hidden;
}

/* The photograph. Object-fit keeps whatever aspect the source has filling the
   banner, and the slight overscale leaves room for the pointer drift to move
   it without pulling an edge into view. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.1);
}

/* Scrim. Darker at the edges than in the middle so the picture still reads
   behind the copy, and heavier at the bottom where the page continues. */
.hero__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
      180deg,
      rgba(6, 16, 28, 0.62) 0%,
      rgba(6, 16, 28, 0.5) 45%,
      rgba(6, 16, 28, 0.78) 100%
    ),
    radial-gradient(
      120% 90% at 50% 50%,
      rgba(6, 16, 28, 0.15) 0%,
      rgba(6, 16, 28, 0.55) 100%
    );
}

/* Prev / next sit at the far ends of the banner — a small fixed gap in from
   each edge, vertically centred. Where the window is too narrow for the copy
   to clear them on its own, the hero widens its own inline padding by the
   shortfall, so a button never lands on the headline and the copy edge still
   moves smoothly as the window resizes.

   --hero-gutter  space outside the container, if any
   --hero-pad     the hero container's inline padding
   --hero-edge    where the hero's content starts (gutter + padding) */
.hero {
  --hero-arrow: 46px;
  --hero-arrow-inset: 16px;
  --hero-arrow-clear: calc(var(--hero-arrow) + var(--hero-arrow-inset) * 2);
  --hero-gutter: max(
    0px,
    50vw - var(--container-max) / 2 - var(--container-pad)
  );
  --hero-pad: var(--container-pad);
  --hero-edge: calc(var(--hero-gutter) + var(--hero-pad));
}

/* Reserve room for the buttons: the hero's own padding grows by whatever the
   gutter cannot cover, so the copy always starts clear of them. */
@media (min-width: 576px) {
  .hero {
    --hero-pad: max(
      var(--container-pad),
      calc(var(--hero-arrow-clear) - var(--hero-gutter))
    );
  }
}

/* On a phone that reservation would eat the line length, and swiping is the
   natural gesture there — dots and drag carry the slider instead. */
@media (max-width: 575.98px) {
  .hero .carousel__arrow {
    display: none;
  }
}

.hero .container {
  padding-inline: var(--hero-pad);
}

/* Sits back at rest so it never competes with the headline, and comes up to
   solid white under the pointer. Translucent rather than solid now — a hard
   white disc on a photograph reads as a sticker. */
.hero .carousel__arrow {
  width: var(--hero-arrow);
  height: var(--hero-arrow);
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--c-white);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 16px rgba(4, 12, 22, 0.25);
  opacity: 0.85;
  transition: opacity var(--t-base), background var(--t-base),
    color var(--t-base), border-color var(--t-base),
    transform 0.16s var(--ease);
}

.hero .carousel__arrow--prev {
  left: var(--hero-arrow-inset);
}

.hero .carousel__arrow--next {
  right: var(--hero-arrow-inset);
}

/* Stays white on hover — the shared blue fill would shout on a banner. The
   base arrow is centred with translateY(-50%), so every state has to carry
   that through or the button drops half its height. */
.hero .carousel__arrow:hover,
.hero .carousel__arrow:focus-visible {
  opacity: 1;
  background: var(--c-white);
  border-color: var(--c-border-mid);
  color: var(--c-navy-900);
  transform: translateY(-50%) scale(1.06);
}

.hero .carousel__arrow:active {
  transform: translateY(-50%) scale(0.94);
}

/* Centred under the copy, in white — the light-background dot colours are
   invisible on a photograph. */
.hero .carousel__dot {
  background: rgba(255, 255, 255, 0.45);
}

.hero .carousel__dot:hover {
  background: rgba(255, 255, 255, 0.7);
}

.hero .carousel__dot.is-active {
  background: var(--c-white);
}

.hero .carousel__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 34px;
  z-index: 3;
  margin-top: 0;
  justify-content: center;
}

/* Slide content eases in behind the moving track. */
.hero__slide .hero__copy > * {
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

/* --------------------------------------------------------------------------
   2. ABOUT
   -------------------------------------------------------------------------- */
.about__title {
  font-family: var(--font-body);
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: -0.44px;
  color: var(--c-ink-900);
  margin: 1.1rem 0 1.6rem;
}

.about__title span {
  display: block;
  font-weight: var(--fw-regular);
}

/* The leading clause is the claim the section is making, so it keeps the
   display weight and takes the brand accent the page-hero headings use. */
.about__title .text-brand {
  font-weight: var(--fw-bold);
  color: var(--c-primary);
}

.about__text {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-800);
  margin-bottom: 1.35rem;
}

.about__certs {
  display: flex;
  align-items: center;
  margin: 2.4rem 0 1.5rem;
}

.about__certs img {
  width: 246px;
  max-width: 100%;
}

/* Right column: photo with a floating ISO badge, stat strip underneath. */
.about__media {
  position: relative;
}

.about__photo {
  width: 100%;
  overflow: hidden;
}

.about__photo img {
  width: 100%;
  height: 415px;
  object-fit: cover;
}

.about__badge {
  position: absolute;
  top: -42px;
  /* The Figma overhang (-30px) only fits where there is spare gutter; see
     responsive.css for the wide-viewport variant. Default sits flush inside
     the column so the badge can never widen the document. */
  right: 0;
  width: 96px;
  height: 96px;
  border-radius: var(--r-pill);
  object-fit: contain;
  z-index: 2;
}

.about__stats {
  display: flex;
  width: 100%;
  overflow: hidden;
}

/* Count-up animation (see main.js) — fixed-width digits stop the number
   from twitching as it ticks. */
.stat-card__value {
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   3. SERVICES
   -------------------------------------------------------------------------- */
.services__title span {
  font-weight: var(--fw-bold);
}

.services__title-line2 {
  display: block;
  font-weight: var(--fw-regular);
  font-size: 0.86em;
  margin-top: 0.2em;
}

.services__grid {
  margin-top: var(--head-gap);
}

/* --------------------------------------------------------------------------
   4. OUR SOLUTIONS
   Rounded panel: text + 3 features on the left, two photos bleeding
   off the right edge of the panel.
   -------------------------------------------------------------------------- */
.solutions {
  padding-block: var(--section-py);
}

/* .row g-0 + .col-xl-7 / .col-xl-5 supply the split; col-5 of the 1630px
   panel is ~679px, which holds the two 330px photos exactly. */
.solutions__panel {
  position: relative;
  background: var(--c-surface-alt);
  border-radius: var(--r-2xl);
  min-height: 501px;
  overflow: hidden;
}

.solutions__photos {
  gap: 1rem;
  padding-left: 1rem;
}

.solutions__content {
  padding: 3.3rem clamp(1.5rem, 1rem + 1.6vw, 2.4rem) 3rem;
}

.solutions__title {
  font-size: var(--fs-h2);
  margin-bottom: 1.1rem;
}

.solutions__lead {
  max-width: 52rem;
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
  letter-spacing: 0.51px;
  color: var(--c-ink-850);
  margin-bottom: 2.9rem;
}

.solutions__features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
}

/* Bootstrap's .d-xl-none hides this at xl and up, where .solutions__photos
   (.d-none .d-xl-flex) takes over. */
.solutions__photos-mobile {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  padding: 0 clamp(1.5rem, 1rem + 1.6vw, 2.4rem) clamp(1.5rem, 1rem + 1.6vw, 2.4rem);
}

.solutions__photo {
  flex: 1 1 0;
  min-width: 0;
  border-radius: var(--r-sm);
  overflow: hidden;
}

.solutions__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   5. INDUSTRIES
   Full-bleed carousel. The markup puts this element OUTSIDE .container, so it
   already spans the viewport — no negative margins or 100vw (which would
   include the scrollbar and cause overflow). The inset below is its own
   gutter, matching the ~23px the Figma frame leaves at the left edge.
   -------------------------------------------------------------------------- */
.industries__carousel {
  margin-top: var(--head-gap);
  padding-inline: clamp(1rem, 1.35vw, 1.5rem);
  /* Room for the tile shadow + hover lift so nothing is clipped by the
     carousel viewport's overflow:hidden. */
  padding-block: 12px 20px;
}

.industries__carousel .carousel__viewport {
  padding-block: 12px;
  margin-block: -12px;
}

/* Full bleed leaves no page gutter to hang the arrows in, and floating them
   over the tiles covers the copy. So for this carousel they drop down and
   flank the dots instead.

   The 5px offset centres a 38px button on the dots row: the root has 20px of
   bottom padding and the 8px dots sit directly above it, putting the dot
   centre 24px up — so 24 − 38/2 = 5. */
.industries__carousel .carousel__arrow {
  top: auto;
  bottom: 5px;
  transform: none;
  width: 38px;
  height: 38px;
}

.industries__carousel .carousel__arrow svg {
  width: 15px;
  height: 15px;
}

.industries__carousel .carousel__arrow--prev {
  left: 50%;
  margin-left: -92px;
}

.industries__carousel .carousel__arrow--next {
  right: 50%;
  margin-right: -92px;
}

/* --------------------------------------------------------------------------
   6. MEDIA CORNER
   -------------------------------------------------------------------------- */
.media__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--head-gap);
}

/* .row g-4 + .col-lg-7 / .col-lg-5 ≈ the 865:613 split in the design. */

/* Featured article */
.media-featured {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 624px;
  border-radius: var(--r-xl);
  overflow: hidden;
  isolation: isolate;
}

.media-featured__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform var(--t-slow);
}

.media-featured:hover .media-featured__img {
  transform: scale(1.04);
}

.media-featured::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--g-media-overlay);
  z-index: -1;
}

.media-featured__body {
  padding: 2.6rem 2.9rem 2.5rem;
  width: 100%;
  color: var(--c-white);
}

.media-featured__tag {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.69px;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 1rem;
}

.media-featured__title {
  font-family: var(--font-body);
  font-size: var(--fs-featured);
  font-weight: var(--fw-bold);
  line-height: 1.35;
  letter-spacing: -0.91px;
  color: var(--c-white);
  margin-bottom: 1.35rem;
}

.media-featured__excerpt {
  max-width: 47rem;
  font-family: var(--font-body);
  font-size: 1.0125rem;
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  letter-spacing: 0.35px;
  color: var(--c-mist);
  margin-bottom: 1.6rem;
}

.media-featured__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--c-slate-400);
}

.media-featured__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: var(--fw-semibold);
  color: var(--c-accent);
}

.media-featured__cta svg {
  width: 14px;
  height: 14px;
  transition: transform var(--t-base);
}

.media-featured__cta:hover {
  color: var(--c-accent);
}

.media-featured__cta:hover svg {
  transform: translateX(4px);
}

/* Briefings list */
.briefing-list {
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid #e8e8e8;
  border-radius: var(--r-xl);
  overflow: hidden;
}

.briefing-list__head {
  padding: 1.4rem 1.6rem;
  border-bottom: 1px solid var(--c-border-soft);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 2.08px;
  text-transform: uppercase;
  color: var(--c-ink-100);
}

.briefing-list__items {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.briefing-list__items > * {
  flex: 1;
}

/* --------------------------------------------------------------------------
   7. TESTIMONIALS
   -------------------------------------------------------------------------- */
.testimonials {
  background: var(--c-surface);
}

.testimonials__carousel {
  margin-top: var(--head-gap);
}

/* Same trick as above: let the hover lift breathe inside the viewport. */
.testimonials__carousel .carousel__viewport {
  padding: 14px 0 18px;
  margin: -14px 0 -18px;
}

/* --------------------------------------------------------------------------
   8. CTA BANNER
   -------------------------------------------------------------------------- */
.cta {
  padding-block: var(--section-py);
}

.cta__panel {
  position: relative;
  max-width: 1111px;
  margin-inline: auto;
  min-height: 422px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(2.5rem, 1.5rem + 4vw, 3.59rem) clamp(1.5rem, 1rem + 3vw, 3.5rem);
  border-radius: var(--r-3xl);
  background-color: var(--c-navy-700);
  overflow: hidden;
  isolation: isolate;
}

.cta__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.include-card .outcome-list{
      gap: 2px;
      margin-top: 10px;
}
.include-card .outcome-list li{
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: var(--fw-light);
    line-height: var(--lh-relaxed);
    color: var(--c-ink-500);
}

/* Layered overlay: a navy duotone wash for legibility, a diagonal depth
   gradient, and a soft blue glow behind the headline. */
.cta__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
   radial-gradient(118% 82% at 50% 0%, rgb(3 47 88 / 49%) 0%, rgb(8 44 78 / 70%) 62%), linear-gradient(118deg, rgba(0, 42, 85, 0.95) 0%, rgba(0, 42, 85, 0.8) 46%, rgba(3, 18, 36, 0.94) 100%)
}

/* Hairline inner edge — keeps the panel crisp against the white page. */
.cta__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.09);
  pointer-events: none;
}

.cta__title {
  max-width: 44rem;
  font-family: var(--font-heading);
  font-size: var(--fs-h2-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.31;
  color: var(--c-white);
  margin: 0 auto 1.4rem;
}

.cta__text {
  max-width: 45rem;
  font-family: var(--font-alt);
  font-size: 1.0625rem;
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
  color: var(--c-white);
  margin: 0 auto 2.6rem;
}

.cta__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   9. TRUST STRIP / PROCESS / CONTACT  (home page)
   -------------------------------------------------------------------------- */
.trust {
  border-bottom: 1px solid var(--c-border);
  background: var(--c-white);
}

.process-section {
  background: var(--c-surface-alt);
}

.contact {
  background: var(--c-white);
}