/* ─── Pico CSS variable overrides + our own variables ────────── */
:root {
  /* Pico primary colour = our purple */
  --pico-primary:            #4d0d6c;
  --pico-primary-hover:      #3a0950;
  --pico-primary-background: #4d0d6c;
  --pico-primary-border:     #4d0d6c;
  --pico-primary-focus:      rgba(77, 13, 108, 0.25);
  --pico-primary-inverse:    #ffffff;

  /* Body text = purple */
  --pico-color:              #4d0d6c;
  --pico-background-color:   #ffffff;

  /* Font */
  --pico-font-family-sans-serif: 'Source Sans 3', sans-serif;
  --pico-font-weight:        400;
  --pico-border-radius:      4px;
  --pico-border-color:       #4d0d6c;

  /* Headings - Pico makes these bigger; we control size per element */
  --pico-font-size:          1.0625rem;
  --pico-line-height:        1.7;

  /* Our own */
  --purple:        #4d0d6c;
  --white:         #ffffff;
  --black:         #000000;
  --grey-mid:      #999999;
  --purple-light:  rgba(77, 13, 108, 0.65);
  --grey-border:   #e0e0e0;
  --font-brand:    'Montserrat', 'Trebuchet MS', 'Arial', sans-serif;
  --col-margin:        200px;
  --navbar-height:     64px;
  --section-gap:       96px;
  --content-max-width: 960px;
  --content-pad:       2.5rem;
}

/* ─── Base resets ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* html carries the white canvas so the fixed #page-bg (z-index:-1)
   is not painted over by body's background */
html {
  background: var(--white);
}

body {
  margin: 0;
  padding: 0;
  background: transparent;
  font-family: 'Source Sans 3', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  position: relative;
}

img {
  display: block;
  max-width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}

/* Remove Pico's default container behaviour on block-level elements
   so our sections control their own max-width and padding */
header, main, footer, section, article {
  padding: 0;
  margin: 0;
}

/* ─── Reset Pico's <nav> defaults ─────────────────────────────── */
nav {
  padding: 0;
  margin: 0;
  overflow: visible;
  background: none;
  border: none;
}

nav ul, nav ol {
  margin: 0;
  padding: 0;
}

/* ─── Page background ────────────────────────────────────────── */
#page-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: max(250vh, 156.25vw);
  z-index: -1;
  pointer-events: none;
  opacity: 0.2;
  overflow: hidden;
}

#page-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* ─── Navbar ─────────────────────────────────────────────────── */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--navbar-height);
  /* visual fade props (bg, border, blur, brand opacity) are set by JS */
  background-color: rgba(255, 255, 255, 0.82);
  border-bottom: 1.5px solid var(--purple);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
}

.navbar__brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  flex-shrink: 0;
}


.navbar__logo {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.navbar__name {
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: 1.125rem;
  color: var(--black);
  letter-spacing: 0.05em;
}

.navbar__links {
  display: flex;
  gap: 0;
  list-style: none;
  align-self: stretch;   /* fill full navbar height */
  align-items: stretch;  /* stretch each <li> to match */
}

.navbar__links li {
  display: flex;         /* lets the <a> fill the <li> height */
}

.navbar__links a {
  display: flex;
  align-items: center;   /* centre text vertically within full height */
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--purple);
  text-decoration: none;
  border-radius: 0;
  /* horizontal padding absorbs the old 2rem gap (1rem each side)
     plus the original 0.625rem inner padding = 1.625rem per side */
  padding: 0 1.625rem;
  transition: background-color 0.15s ease;
}

.navbar__links a:hover {
  background-color: #f0e8f8;
  text-decoration: none;
}

/* Dropdown nav item */
.navbar__item--has-dropdown {
  position: relative;
  display: flex;
  align-items: stretch;
}

/* "Use cases" trigger — styled identically to other navbar links.
   Pico gives <a> inside nav li a margin of -0.5rem on all sides via
   nav li :where(a); in flex-stretch mode this makes the <a> expand
   beyond the li's content area to fill the full navbar height/width.
   We replicate that here so the trigger highlight matches exactly. */
.navbar__tab-trigger {
  display: flex;
  align-items: center;
  margin: -0.5rem;
  padding: 0 1.625rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--purple);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}

.navbar__item--has-dropdown:hover > .navbar__tab-trigger {
  background-color: #f0e8f8;
}

/* Dropdown panel — hidden by default, revealed on li:hover */
.navbar__dropdown {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 100%;
  background: var(--white);
  border: none;
  display: none;
  flex-direction: column;
  align-items: stretch; /* override Pico's nav ul { align-items: center } */
  z-index: 200;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Hovering the li (or any descendant) keeps the dropdown open */
.navbar__item--has-dropdown:hover > .navbar__dropdown {
  display: flex;
}

.navbar__dropdown > li {
  display: block;
  margin: 0;  /* override Pico's nav li margin */
  padding: 0; /* override Pico's nav li { padding: 1rem 0.5rem } */
}

.navbar__dropdown a {
  display: block;
  margin: 0; /* override Pico's nav li :where(a) { margin: -0.5rem -0.5rem } */
  padding: 0.75rem 1.625rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--purple);
  white-space: nowrap;
  text-align: left;
  transition: background-color 0.15s ease;
}

.navbar__dropdown a:hover {
  background-color: #f0e8f8;
}

/* Hamburger - hidden on desktop, shown on mobile */
.navbar__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  box-shadow: none;
  cursor: pointer;
  padding: 4px;
  width: auto;
  margin: 0;
  color: inherit;
}

.navbar__hamburger:focus {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
  box-shadow: none;
}

.navbar__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--purple);
}

/* ─── Hero ───────────────────────────────────────────────────── */
/* Hero ends so About peeks exactly 25vh into the viewport.
   Navbar (var(--navbar-height)) is in normal flow, so:
   peek = 100vh - navbar - hero → hero = 75vh - navbar-height */
.hero {
  min-height: calc(100vh - var(--navbar-height));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Gap between the hero content block and the announcement below it. The
     whole stack is vertically centred in the viewport, so the announcement
     lands in the first screenful on page load. */
  gap: 2.5rem;
  position: relative;
}

.hero__split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--content-max-width);
  width: calc(100% - 6rem);
  margin: 0 auto;
  gap: 4rem;
}

.hero__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 1.25rem;
  flex: 1 1 0;
}

.hero__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 2.5rem;
  flex: 0 0 auto;
}

.hero__feature-title {
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  color: var(--black);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 0.35rem;
}

.hero__feature-desc {
  font-size: 0.95rem;
  color: var(--black);
  margin: 0;
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
}

/* Logo + brand name side by side, mirroring the navbar layout */
.hero__brand-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.hero__logo {
  width: 96px;
  height: 96px;
  flex-shrink: 0;
}

.hero__brand {
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: clamp(2.25rem, 5.5vw, 3.5rem);
  color: var(--black);
  letter-spacing: 0.04em;
  margin: 0;
  line-height: 1;
}

.hero__headline {
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: clamp(2.25rem, 5.5vw, 3.5rem);
  color: var(--black);
  letter-spacing: 0.04em;
  margin: 0;
  line-height: 1.1;
  text-align: left;
}

.hero__headline--mobile {
  display: none;
}

.hero__tagline {
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--black);
  margin: 0;
  text-align: left;
}

/* Announcement banner: sits below the hero content block (no longer inside the
   left split), spanning the full content width and aligned to the same
   container edges as .hero__split above it. No border/background/padding. */
.hero__announce {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: calc(100% - 6rem);
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0;
  border: none;
  text-decoration: none;
  color: var(--black);
  animation: announce-bob 2.4s ease-in-out infinite;
  will-change: transform;
}

.hero__announce:hover {
  color: var(--black);
  text-decoration: none;
}

.hero__announce:hover .hero__announce-body {
  text-decoration: underline;
}

.hero__announce-tag {
  flex: 0 0 auto;
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--purple);
  /* A light lilac streak glides continuously across the NEW letters. The
     gradient is mostly purple with one brighter band, swept via
     background-position; both ends of the loop show the band off-screen (solid
     purple), so it repeats seamlessly with no pause. Tunable: highlight colour
     (#b98fd6) and cycle length (2.4s). */
  background-image: linear-gradient(
    100deg,
    var(--purple) 0%,
    var(--purple) 42%,
    #b98fd6 50%,
    var(--purple) 58%,
    var(--purple) 100%
  );
  background-size: 250% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: announce-shimmer 2.4s linear infinite;
  will-change: background-position;
}

@keyframes announce-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

@keyframes announce-shimmer {
  0%   { background-position: 100% 0; } /* band off to the left */
  100% { background-position: 0% 0; }   /* band has swept across to the right */
}

.hero__announce-divider {
  flex: 0 0 auto;
  align-self: stretch;
  width: 1px;
  background-color: var(--grey-border);
}

.hero__announce-text {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

/* Lead line matches .hero__feature-title: Montserrat ExtraBold, black, larger. */
.hero__announce-lead {
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  line-height: 1.2;
  color: var(--black);
}

/* Body line matches the hero tagline's font-size. */
.hero__announce-body {
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1.35;
  color: var(--black);
}

/* CTA button */
.hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  background-color: #7a3fa8;
  color: var(--white);
  border: none;
  border-radius: 6px;
  padding: 0.55rem 1.25rem;
  font-family: var(--pico-font-family-sans-serif);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  margin-top: 0.25rem;
  gap: 2rem;
}

.hero__cta-arrows {
  font-weight: 400;
  letter-spacing: 0.05em;
}

.hero__cta:hover {
  background-color: #6a3092;
  color: var(--white);
  text-decoration: none;
}

/* Email CTA in the hero column: +0.625rem on top of the column's
   1.25rem gap → 1.875rem (1.5x) above. Kept at ~half the hero width
   (25.5rem); it shrinks to fit on mobile via the base .email-cta width:100%. */
.hero__email-cta {
  margin-top: 0.625rem;
  max-width: 25.5rem;
}

/* "Or email …" hint under the hero CTA. Negative margin pulls it in against
   the column's 1.25rem gap so it sits close under the email box (≈0.6rem).
   The compound selector outranks `.contact-form__hint { margin: 0 }`, which is
   the element's other class and otherwise wins on later source order. */
.contact-form__hint.hero__email-hint {
  margin-top: -0.65rem;
  margin-bottom: 0;
}

.hero__contact-hint {
  font-size: 0.875rem;
  font-style: italic;
  color: var(--grey-mid);
  margin: 0;
}

.hero__contact-hint a {
  color: var(--grey-mid);
  text-decoration: underline;
}

.hero__contact-hint a:hover {
  color: var(--purple);
}

.contact-form__hint {
  font-size: 0.8rem;
  color: var(--purple-light);
  margin: 0;
}

.contact-form__hint a {
  color: var(--purple-light);
  text-decoration: underline;
}

.contact-form__hint a:hover {
  color: var(--purple);
}

/* ─── Email CTA ──────────────────────────────────────────────────
   Single-line email textbox + submit button. This block is the
   shared source of truth: keep it in sync with
   blogpost_ramv2/src/styles/global.css (.email-cta) so both sites
   render the same control. Values are hardcoded (no repo-specific
   vars) so the block can be copied verbatim between repos. Width is
   driven by the parent, so the control fills the content column. */
.email-cta {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  margin: 0;
}

/* Selectors are prefixed with `.email-cta` so they outrank Pico's
   `button[type=submit]` / `input:not(...)` rules that force width:100%. */
.email-cta .email-cta__input {
  flex: 1 1 auto;
  width: auto !important;
  min-width: 0;
  margin: 0 !important;
  /* Match the control height to the site's buttons (e.g. "Join us",
     45px). Pico forces inputs to a tall `height: calc(1rem *
     --pico-line-height + …)` (≈56px here); override it or the box stays
     taller than every button no matter what padding/line-height we set. */
  height: 45px;
  padding: 8px 14px 8px 42px;
  border: 1px solid rgba(77, 13, 108, 0.24);
  border-radius: 6px !important;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23695875' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 5L2 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 14px center;
  font-size: 15px;
  line-height: 1.4;
  color: #000;
}

.email-cta .email-cta__input::placeholder {
  color: #695875;
  opacity: 1;
}

.email-cta .email-cta__input:focus-visible {
  outline: none;
  border-color: #7a3fa8;
  box-shadow: 0 0 0 2px #d7b6ea;
}

.email-cta .email-cta__button {
  display: inline-flex !important;
  flex: 0 0 auto;
  width: auto !important;
  height: 45px;           /* same height as the input / site buttons */
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 !important;
  padding: 8px 22px;
  border: none !important;
  border-radius: 6px !important;
  background: #7a3fa8 !important;
  color: #fff !important;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  transition: background 140ms ease;
}

.email-cta .email-cta__button:hover,
.email-cta .email-cta__button:focus-visible {
  background: #6a3092 !important;
  outline: none;
}

.email-cta__arrows {
  font-weight: 400;
  letter-spacing: 0.05em;
}

/* ─── Submit cross-fade ──────────────────────────────────────────
   The form and the thank-you note share one grid cell so they swap
   in place with no layout jump. On submit the JS sets data-state="thanks"
   on the wrapper, then clears it after ~2.6s so the form fades back.
   Mirrors ../blogpost_ramv2 (.getstarted-actions). */
.email-cta-swap {
  display: grid;
  /* minmax(0,1fr) pins the single column to the container width. Without the
     0 minimum, the grid track grows to the form's max-content (the email
     input's intrinsic width + button), so on narrow mobiles the control
     overflows .hero__left and shoves the hero text off the left edge. */
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  width: 100%;
}

.email-cta-swap .email-cta,
.email-cta-swap .email-cta-thanks {
  grid-area: 1 / 1;
}

.email-cta-swap .email-cta {
  transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 0s;
}

.email-cta-thanks {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 39px;
  margin: 0;
  color: #000;
  font-weight: 600;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
    visibility 0s linear 260ms;
}

.email-cta-swap[data-state="thanks"] .email-cta {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms;
}

.email-cta-swap[data-state="thanks"] .email-cta-thanks {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 260ms cubic-bezier(0.22, 0.61, 0.36, 1) 60ms,
    transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1) 60ms,
    visibility 0s linear 0s;
}

/* ─── Page hero (Technology, company, Industries sub-pages) ─────── */
/* Title sits at bottom of a 2/3-viewport section, left-aligned,
   matching the card width so it aligns with content below. */
.page-hero {
  min-height: calc(100vh - var(--navbar-height));
  max-width: var(--content-max-width);
  width: calc(100% - 6rem);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.page-hero__scroll-btn {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 28px;
  cursor: pointer;
  z-index: 1;
}

.page-hero::after {
  content: '';
  position: absolute;
  bottom: 1.5rem;
  left: calc(50% - 8px);
  width: 16px;
  height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10' fill='none'%3E%3Cpath d='M1 1 L8 9 L15 1' stroke='%23aaa' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  pointer-events: none;
  animation: scroll-bob 1s ease-in-out infinite alternate;
}

.page-hero__title {
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: clamp(3rem, 7vw, 5rem);
  color: var(--black);
  letter-spacing: 0.04em;
  margin: 0;
  line-height: 1;
}

/* ─── Scroll-hint arrow (index page only) ────────────────────── */
.scroll-arrow {
  position: absolute;
  bottom: 1.5rem;
  left: calc(50% - 8px);
  cursor: pointer;
  animation: scroll-bob 1s ease-in-out infinite alternate;
}
/* Override Pico's prefers-reduced-motion block which kills all animations */
@media (prefers-reduced-motion: reduce) {
  .scroll-arrow, .page-hero::after { animation-duration: 1s !important; animation-iteration-count: infinite !important; }
  .hero__announce { animation-duration: 2.4s !important; animation-iteration-count: infinite !important; }
  /* No shimmer under reduced motion: show NEW as plain solid purple. */
  .hero__announce-tag { animation: none !important; background-image: none; -webkit-text-fill-color: var(--purple); }
}
@keyframes scroll-bob {
  to { transform: translateY(4px); }
}

/* Tagline between page-hero and first card */
.page-tagline {
  max-width: var(--content-max-width);
  width: calc(100% - 6rem);
  margin: 0 auto 1.5rem;
  font-size: 1.125rem;
  line-height: 1.7;
}

/* ─── Page Section - 3-column grid ───────────────────────────── */
.page-section {
  display: grid;
  grid-template-columns: var(--col-margin) 1fr var(--col-margin);
  column-gap: 3rem;
  padding: var(--section-gap) 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.page-section__heading {
  grid-column: 1;
  text-align: right;
  padding-top: 0.15em; /* optical alignment with first body line */
}

.page-section__heading h2 {
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: 0.9375rem;
  color: var(--purple);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0;
}

.page-section__body {
  grid-column: 2;
}

.page-section__body p + p {
  margin-top: 1.25em;
}

.page-section__body h3 {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--black);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.page-section__body h3:first-child {
  margin-top: 0;
}

/* ─── Section card - boxed accordion layout ──────────────────── */
/* First card on pages with no hero gets a top gap */
.section-card:first-child {
  margin-top: 3rem;
}

/* On index the hero is above the cards; reset top margin */
.hero + .section-card {
  margin-top: 0;
}

.section-card {
  max-width: var(--content-max-width);
  width: calc(100% - 6rem);
  margin: 0 auto 1rem;
  border: 1.5px solid var(--grey-border);
  border-radius: 8px;
  background: var(--white);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.section-card--alt {
  background: var(--white);
}

/* Borderless variant - used on index, technology, company */
.section-card--borderless {
  border: none;
}

.section-card--borderless .section-card__header {
  border-bottom: none;
}

/* structural wrapper - sizing handled by .section-card */
.section-card__inner {}

.section-card__header {
  padding: 1.375rem 2rem;
  border-bottom: 1.5px solid var(--grey-border);
}

.section-card__header h2 {
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--purple);
  margin: 0;
  letter-spacing: 0.03em;
}

.section-card__body {
  padding: 2rem;
}

.section-card__body p {
  font-size: 1.125rem;
  line-height: 1.7;
}

.section-card__body p + p {
  margin-top: 1.25em;
}

.section-card__body h3 {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--black);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.section-card__body h3:first-child {
  margin-top: 0;
}

/* ─── Industries accordion ───────────────────────────────────── */
.section-card--accordion .section-card__header {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}

.section-card--accordion .section-card__header::after {
  content: '+';
  font-size: 1.375rem;
  font-weight: 400;
  color: var(--purple);
  line-height: 1;
  flex-shrink: 0;
  margin-left: 1rem;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.section-card--accordion.is-open .section-card__header::after {
  content: '−';
  opacity: 1;
}

.section-card--accordion .section-card__body {
  overflow: hidden;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  transition: max-height 0.4s ease, padding-top 0.35s ease, padding-bottom 0.35s ease;
}

.section-card--accordion.is-open .section-card__body {
  max-height: 800px;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* Large rectangular CTA button */
/* ─── Feature grid (2×2, top of use-case subpages) ──────────── */
.feature-grid {
  max-width: var(--content-max-width);
  width: calc(100% - 6rem);
  margin: 0 auto 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.feature-card {
  border: none;
  border-radius: 8px;
  background: var(--white);
  overflow: hidden;
  aspect-ratio: 3 / 1;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.feature-card__header {
  padding: 1.125rem 1.5rem 0.75rem;
}

.feature-card__header h2 {
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--purple);
  margin: 0;
  letter-spacing: 0.03em;
}

.feature-card--link {
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.feature-card--link:hover {
  background-color: #f0e8f8;
}

.feature-card__body {
  padding: 0.875rem 1.5rem;
  flex: 1;
}

.feature-card__body p {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}

/* ─── Section card row (Technology + Use Cases on index) ─────── */
.section-card-row {
  max-width: var(--content-max-width);
  width: calc(100% - 6rem);
  margin: 0 auto 1rem;
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
}

.section-card-row .section-card {
  flex: 3;
  width: auto;
  max-width: none;
  margin: 0;
}

.section-card-row__image {
  flex: 1;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  background-color: #ede5f5;
}

.section-card-row__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ─── Feature carousel heading + carousel (index page) ──────── */
.carousel-heading {
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  color: var(--purple);
  letter-spacing: 0.03em;
  line-height: 1.15;
  margin: 0;
  max-width: var(--content-max-width);
  width: calc(100% - 6rem);
  margin-left: auto;
  margin-right: auto;
  margin-top: 10rem;
  margin-bottom: 1.5rem;
}

.carousel {
  overflow: hidden;
  padding: 1.5rem 0;
  margin-bottom: 2rem;
  max-width: var(--content-max-width);
  width: calc(100% - 6rem);
  margin-left: auto;
  margin-right: auto;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.carousel__track {
  display: flex;
  gap: 0.75rem;
  width: max-content;
  will-change: transform;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.carousel__card {
  flex: 0 0 calc(var(--content-max-width) / 3.25);
  background: rgba(237, 229, 245, 0.18);
  border-radius: 8px;
  padding: 1.5rem 1.75rem;
  text-align: center;
  transition: background-color 0.3s ease;
}

.carousel__card:hover {
  background: rgba(237, 229, 245, 0.35);
}

.carousel__title {
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: clamp(1rem, 2.5vw, 1.35rem);
  color: var(--black);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}

.carousel__desc {
  font-size: 0.95rem;
  color: var(--black);
  margin: 0;
}

/* ─── Image strip (between About and Technology on index) ────── */
.image-strip {
  max-width: var(--content-max-width);
  width: calc(100% - 6rem);
  margin: 0 auto 1rem;
  display: flex;
  gap: 0.75rem;
}

.image-strip__img {
  flex: 1 1 0;
  aspect-ratio: 4 / 3;
  background-color: #ede5f5;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

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

/* ─── Industries hero (index page) ──────────────────────────── */
.industries-hero {
  max-width: var(--content-max-width);
  width: calc(100% - 6rem);
  margin: 10rem auto 3rem;
}

.industries-hero__split {
  display: flex;
  align-items: center;
  gap: 3rem;
}

.industries-hero__text {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

.industries-hero__headline {
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  color: var(--purple);
  letter-spacing: 0.03em;
  line-height: 1.15;
  margin: 0;
}

.industries-hero__image {
  flex: 0 0 40%;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.industries-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ─── Vertical use-case carousel ────────────────────────────── */
.vcarousel {
  max-width: var(--content-max-width);
  width: calc(100% - 6rem);
  margin: 0 auto 10rem;
  height: calc(10rem * 3 + 0.75rem * 2.5);
  overflow: hidden;
  --vfade-top: transparent;
  --vfade-bottom: transparent;
  -webkit-mask-image: linear-gradient(to bottom, var(--vfade-top), black 15%, black 85%, var(--vfade-bottom));
  mask-image: linear-gradient(to bottom, var(--vfade-top), black 15%, black 85%, var(--vfade-bottom));
}

.vcarousel__track {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  will-change: transform;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.vcarousel__card {
  display: flex;
  align-items: stretch;
  gap: 1.25rem;
  background: rgba(237, 229, 245, 0.18);
  border-radius: 8px;
  padding: 0;
  min-height: 10rem;
  flex-shrink: 0;
  transition: background-color 0.3s ease;
  overflow: hidden;
}

.vcarousel__card:hover {
  background: rgba(237, 229, 245, 0.35);
}

.vcarousel__img {
  width: 10rem;
  flex-shrink: 0;
  background: rgba(77, 13, 108, 0.12);
  overflow: hidden;
}

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

.vcarousel__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.75rem 1.25rem 0.75rem 0;
  min-width: 0;
}

.vcarousel__category {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--purple);
  display: block;
  margin-bottom: 0.15rem;
}

.vcarousel__title {
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--black);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 0.2rem;
}

.vcarousel__desc {
  font-size: 0.85rem;
  color: var(--black);
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  max-height: 1.3em;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.vcarousel__card:hover .vcarousel__desc {
  -webkit-line-clamp: unset;
  text-overflow: unset;
}

/* ─── Open-source hero (index page) ─────────────────────────── */
.oss-hero {
  max-width: var(--content-max-width);
  width: calc(100% - 6rem);
  margin: 10rem auto;
}

.oss-hero__split {
  display: flex;
  align-items: center;
  gap: 3rem;
}

.oss-hero__image {
  flex: 0 0 28%;
  border-radius: 8px;
  overflow: hidden;
}

.oss-hero__image img {
  width: 100%;
  height: auto;
  display: block;
}

.oss-hero__text {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

.oss-hero__headline {
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  color: var(--purple);
  letter-spacing: 0.03em;
  line-height: 1.15;
  margin: 0;
}

.oss-hero__stats {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.oss-hero__stat {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 1rem;
  color: var(--black);
}

.oss-hero__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--black);
  text-decoration: none;
  transition: color 0.2s ease;
}

.oss-hero__link:hover {
  color: var(--purple);
}

.oss-hero__gh-icon {
  flex-shrink: 0;
}

.oss-hero__link-name {
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
}

/* ─── News section (index page) ─────────────────────────────── */
.news-section {
  max-width: var(--content-max-width);
  width: calc(100% - 6rem);
  margin: 10rem auto;
}

.news-section__inner {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.news-section__title {
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  color: var(--purple);
  letter-spacing: 0.03em;
  margin: 0;
  flex-shrink: 0;
}

.news-section__carousel {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.news-section__arrow {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--purple);
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--purple);
  transition: background-color 0.2s ease, color 0.2s ease;
  padding: 0;
}

.news-section__arrow:hover {
  background: var(--purple);
  color: var(--white);
}

.news-section__track-wrapper {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}

.news-section__track {
  display: flex;
  gap: 0.75rem;
  will-change: transform;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.news-section__card {
  flex: 0 0 calc(33.333% - 0.5rem);
  background: rgba(237, 229, 245, 0.18);
  border-radius: 8px;
  padding: 1.25rem;
  text-align: center;
  text-decoration: none;
  color: var(--black);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  transition: background-color 0.3s ease;
}

.news-section__card:hover {
  background: rgba(237, 229, 245, 0.35);
  text-decoration: none;
  color: var(--black);
}

.news-section__card-img {
  width: 5.5rem;
  height: 5.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.news-section__card-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(100%);
}

.news-section__card-img--color img {
  filter: none;
  border-radius: 4px;
}

.news-section__card-title {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.3;
  margin: 0;
  color: var(--black);
}

.news-section__card-cta {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--purple);
  margin-top: auto;
}

/* ─── Company banner (index page) ───────────────────────────── */
.careers-banner {
  max-width: var(--content-max-width);
  width: calc(100% - 6rem);
  margin: 10rem auto;
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.careers-banner__images {
  display: flex;
  gap: 0.75rem;
  flex: 0 0 40%;
}

.careers-banner__img {
  flex: 1 1 0;
  aspect-ratio: 2 / 3;
  border-radius: 8px;
  overflow: hidden;
  background: #ede5f5;
}

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

.careers-banner__right {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.careers-banner__title {
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  color: var(--purple);
  letter-spacing: 0.03em;
  margin: 0;
}

.careers-banner__text {
  font-size: 1rem;
  color: var(--black);
  margin: 0;
  line-height: 1.5;
}

.careers-banner__email {
  font-size: 0.8em;
  font-weight: 400;
  opacity: 0.75;
}

/* ─── Contact headline size ─────────────────────────────────── */
.contact-section {
  max-width: var(--content-max-width);
  width: calc(100% - 6rem);
  margin: 10rem auto;
}

.contact-section__split {
  display: flex;
  align-items: flex-start;
  gap: 2.5rem;
}

.contact-section__headline {
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  color: var(--purple);
  letter-spacing: 0.03em;
  margin: 0;
  flex-shrink: 0;
  line-height: 1.15;
  text-transform: uppercase;
}

.contact-section__right {
  flex: 1 1 0;
  min-width: 0;
}

.card-cta-btn {
  display: block;
  background-color: #7a3fa8;
  color: var(--white);
  font-family: var(--pico-font-family-sans-serif);
  font-weight: 600;
  font-size: 1.0625rem;
  padding: 1.1rem 1.5rem;
  text-align: left;
  text-decoration: none;
  border-radius: 0;
  margin-top: 1.5rem;
}

.card-cta-btn:hover {
  background-color: #6a3092;
  color: var(--white);
  text-decoration: none;
}

/* ─── Placeholder text ───────────────────────────────────────── */
.placeholder {
  color: var(--grey-mid);
  font-style: italic;
}

.img-placeholder {
  color: var(--grey-mid);
  font-style: italic;
  font-size: 0.8rem;
  margin-left: 0.375rem;
}

/* ─── Reference / citation chip ──────────────────────────────── */
.ref-chip {
  display: inline;
  font-size: 0.8125rem;
  background-color: #f0e6f7;
  color: var(--purple);
  border-radius: 8px;
  padding: 0.15em 0.45em;
  text-decoration: none;
  line-height: 1.6;
}

.ref-chip:hover {
  background-color: #e4d0f0;
  text-decoration: none;
}

/* ─── Team ───────────────────────────────────────────────────── */
.team__grid {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.team__member {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
}

.team__photo-wrap {
  width: 160px;
  height: 160px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.team__photo {
  width: 160px;
  height: 160px;
  object-fit: cover;
  display: block;
  filter: grayscale(100%);
  transition: filter 0.25s ease;
}

.team__photo-wrap:hover {
  transform: scale(1.04);
}

.team__photo-wrap:hover .team__photo {
  filter: grayscale(0%);
}

.team__name {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--purple);
  text-align: center;
  margin: 0;
}

.team__role {
  font-size: 0.8125rem;
  color: var(--grey-mid);
  text-align: center;
  margin: 0;
}

/* LinkedIn + web icon row below name */
.team__links {
  display: flex;
  gap: 0.625rem;
  align-items: center;
}

.team__icon-link {
  display: flex;
  align-items: center;
  color: var(--grey-mid);
}

.team__icon-link:hover {
  color: var(--purple);
}

.team__icon {
  width: 18px;
  height: 18px;
}

/* Partner logos */
/* ─── Card image break (between cards on use-case subpages) ─── */
.card-img-break {
  max-width: var(--content-max-width);
  width: calc(100% - 6rem);
  margin: 0 auto 1rem;
  display: flex;
  gap: 0.75rem;
}

.card-img-break__img {
  flex: 1 1 0;
  aspect-ratio: 5 / 3;
  background-color: #ede5f5;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.card-img-break__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.partners__heading {
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: 0.9375rem;
  color: var(--purple);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  margin: 2.5rem 0 1rem;
}

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

.partners__logo {
  height: 40px;
  width: auto;
  filter: grayscale(100%);
  opacity: 0.55;
}

.partners__link:hover .partners__logo {
  opacity: 0.85;
}

/* ─── Contact Form ───────────────────────────────────────────── */
/* Pico handles input, textarea, checkbox, and button visuals.
   We only add layout. */

/* Two columns on desktop: title + hint on the left, form on the right */
#contact .section-card__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

#contact .section-card__header {
  padding: 2rem 0 2rem 2rem;
  border-bottom: none;
}

#contact .section-card__body {
  padding: 2rem 2rem 2rem 0;
}

.contact-form__feedback {
  font-size: 0.9rem;
  min-height: 1.4em;
  margin-top: 0.5rem;
  margin-bottom: 0;
}

.contact-form__feedback--success { color: #1a7a4a; }
.contact-form__feedback--error   { color: #b00020; }

/* ─── Footer ─────────────────────────────────────────────────── */
/* ─── News listing - card grid ───────────────────────────────── */
.news-grid {
  max-width: var(--content-max-width);
  width: calc(100% - 6rem);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.news-card {
  border: 1.5px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.news-card:hover {
  border-color: var(--purple);
}

/* Horizontal layout: image left, content right */
.news-card__link {
  display: flex;
  flex-direction: row;
  text-decoration: none;
  color: inherit;
}

.news-card__image {
  width: 140px;
  height: 140px;
  flex-shrink: 0;
  object-fit: cover;
  display: block;
}

.news-card__body {
  padding: 0.875rem 1.125rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.news-card__date {
  display: block;
  font-size: 0.8125rem;
  color: var(--grey-mid);
  margin-bottom: 0;
}

.news-card__title {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 1rem;
  color: var(--black);
  margin: 0 0 0.5rem;
  line-height: 1.35;
}

.news-card__desc {
  font-size: 0.875rem;
  color: var(--purple);
  margin: 0;
}

/* ─── News article page ──────────────────────────────────────── */
.news-article__back {
  display: inline-block;
  font-size: 0.875rem;
  color: var(--purple);
  text-decoration: none;
  margin-bottom: 0.75rem;
}

.news-article__back:hover { text-decoration: underline; }

.news-article__date {
  display: block;
  font-size: 0.875rem;
  color: var(--grey-mid);
  margin-top: 0.5rem;
}

.news-article__image {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 1.5rem;
}

/* ─── Footer ─────────────────────────────────────────────────── */
.footer {
  border-top: 1.5px solid var(--grey-border);
  font-size: 0.875rem;
  color: var(--grey-mid);
}

.footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.5rem 2rem 1.75rem;
}

/* Sitemap */
.footer__sitemap {
  margin-bottom: 2rem;
}

.footer__sitemap-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-start; /* override Pico nav ul { align-items: center } */
  gap: 2.5rem;
  flex-wrap: wrap;
}

.footer__sitemap-list > li {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0; /* override Pico: nav li { padding: 1rem 0.5rem } */
}

.footer__sitemap-list a {
  color: var(--grey-mid);
  text-decoration: none;
  font-size: 0.8125rem;
}

.footer__sitemap-list > li > a {
  font-weight: 700;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--purple);
}

.footer__sitemap-list a:hover {
  color: var(--purple);
  text-decoration: underline;
}

.footer__sitemap-sub {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* override Pico nav ul { align-items: center } */
  gap: 0;
}

.footer__sitemap-sub li {
  padding: 0; /* override Pico: nav li { padding: 1rem 0.5rem } */
  margin: 0;
}

.footer__sitemap-sub a {
  color: var(--purple);
  font-weight: 400;
  text-align: left;
  margin: 0; /* override Pico: nav li :where(a) { margin: -0.5rem } */
}

/* Bottom row: copyright + LinkedIn icon */
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--grey-border);
  padding-top: 1.25rem;
}

.footer__bottom p { margin: 0; }

.footer__linkedin {
  display: flex;
  align-items: center;
  color: var(--grey-mid);
  text-decoration: none;
}

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

.footer__linkedin-icon {
  width: 20px;
  height: 20px;
}

/* ─── Responsive: Tablet (≤1024px) ──────────────────────────── */
@media (max-width: 1024px) {
  :root {
    --col-margin: 140px;
    --section-gap: 72px;
  }

  /* Tighter link padding so the full navbar never clips */
  .navbar__links a,
  .navbar__tab-trigger {
    padding: 0 1rem;
  }

  .navbar__dropdown a {
    padding: 0.75rem 1rem;
  }
}

/* ─── Responsive: Mobile (≤768px) ───────────────────────────── */
@media (max-width: 768px) {
  .navbar {
    /* Do NOT use flex-wrap or height:auto - the dropdown is
       absolutely positioned so it never pushes content down */
    padding: 0.75rem 1.25rem;
  }

  .navbar__hamburger {
    display: flex;
  }

  /* Dropdown overlays page content - no layout shift on open */
  .navbar__links {
    position: absolute;
    top: 100%;        /* flush below the sticky navbar */
    left: 0;
    right: 0;
    background-color: var(--white);
    border-bottom: 1.5px solid var(--purple);
    display: none;
    flex-direction: column;
    /* reset desktop stretch behaviour */
    align-self: auto;
    align-items: stretch;
    padding: 0;
  }

  .navbar__links.is-open {
    display: flex;
  }

  /* Switch all li to block to remove desktop flex interactions */
  .navbar__links li {
    display: block;
    padding: 0;
    border-top: 1px solid var(--grey-border);
  }

  .navbar__links a {
    display: block;
    padding: 0.5rem 1.25rem;
    margin: 0;
    width: 100%;
  }

  /* Dropdown on mobile: same hover behaviour, appears inline */
  .navbar__item--has-dropdown {
    display: block;
  }

  .navbar__tab-trigger {
    display: block;
    padding: 0.5rem 1.25rem;
    margin: 0;
    height: auto;
    width: 100%;
  }

  /* Switch to static so the dropdown expands inline within the mobile nav.
     display remains none/flex as controlled by the :hover rule above. */
  .navbar__dropdown {
    position: static;
    box-shadow: none;
    border: none;
    min-width: 0;
    width: 100%;
    padding: 0;
  }

  .navbar__dropdown > li {
    display: block;
    border-top: 1px solid var(--grey-border);
  }

  .navbar__dropdown a {
    padding: 0.5rem 1.25rem 0.5rem 2.5rem;
    margin: 0;
  }

  /* Collapse 3-col grid to single column */
  .page-section {
    grid-template-columns: 1fr;
    column-gap: 0;
    padding: 3rem 1.25rem;
  }

  .page-section__heading {
    grid-column: 1;
    text-align: left;
    padding-top: 0;
    margin-bottom: 0.75rem;
  }

  .page-section__body {
    grid-column: 1;
  }

  /* Hero */
  .hero {
    /* No side padding: .hero__split / .hero__announce already carry
       width: calc(100% - 2rem) + margin:0 auto, giving the same 1rem side
       margin as every other section (carousel, vcarousel, industries…).
       Adding hero padding on top double-insets the hero content. */
    padding-left: 0;
    padding-right: 0;
  }

  .hero__headline {
    font-size: clamp(1.75rem, 8vw, 2.5rem);
  }

  /* Team */
  .team__grid {
    gap: 1.5rem;
  }

  .team__photo-wrap,
  .team__photo {
    width: 120px;
    height: 120px;
  }

  /* Footer sitemap: stack vertically on mobile */
  .footer__sitemap-list {
    flex-direction: column;
    gap: 0;
  }

  .footer__sitemap-list a {
    display: block;
    padding: 0.25rem 0;
    margin: 0;
  }

  .footer__bottom {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }

  /* Contact form: collapse to one column on mobile */
  #contact .section-card__inner {
    grid-template-columns: 1fr;
    gap: 0;
  }

  #contact .section-card__header {
    padding: 1rem 1.25rem;
  }

  #contact .section-card__body {
    padding: 1.25rem;
  }

  /* Page hero */
  .page-hero {
    width: calc(100% - 2rem);
    padding-bottom: 1.75rem;
  }

  .page-hero__title {
    font-size: clamp(2.25rem, 10vw, 3rem);
  }

  .page-tagline {
    width: calc(100% - 2rem);
  }

  /* Section cards: tighter on mobile */
  .section-card {
    width: calc(100% - 2rem);  /* 1rem margin on each side */
    margin-bottom: 0.75rem;
  }

  .section-card__header {
    padding: 1rem 1.25rem;
  }

  .section-card__header h2 {
    font-size: 1.0625rem;
  }

  .section-card__body {
    padding: 1.25rem;
  }

  .section-card__body p {
    font-size: 1rem;
  }

  .section-card--accordion.is-open .section-card__body {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  /* News cards: shrink image on mobile */
  .news-card__image {
    width: 100px;
    height: 100px;
  }

  .news-grid {
    width: calc(100% - 1.25rem);
  }

  /* Section card row: stack vertically on mobile */
  .section-card-row {
    flex-direction: column;
    width: calc(100% - 2rem);
  }

  .section-card-row .section-card {
    flex: none;
    width: 100%;
  }

  .section-card-row__image {
    flex: none;
    width: 100%;
    aspect-ratio: 3 / 1;
  }

  /* On mobile, always put image below card */
  #industries .section-card-row__image {
    order: 1;
  }

  /* Hero: stack on mobile */
  .hero__split {
    flex-direction: column;
    gap: 2.5rem;
    width: calc(100% - 2rem);
  }

  .hero__left {
    padding-left: 0;
    align-items: flex-start;
  }

  /* Match the announcement to the hero content width on mobile */
  .hero__announce {
    width: calc(100% - 2rem);
  }

  /* Hero headline: swap desktop/mobile variants */
  .hero__headline--desktop {
    display: none;
  }

  .hero__headline--mobile {
    display: block;
  }

  .hero__right {
    align-items: flex-start;
    text-align: left;
    padding-right: 0;
    gap: 1.75rem;
  }

  /* CTA buttons: never wrap text */
  .hero__cta {
    white-space: nowrap;
    font-size: clamp(0.7rem, 2.5vw, 1rem);
  }

  /* Feature carousel cards: constrain title/desc lines */
  .carousel {
    width: calc(100% - 2rem);
  }

  .carousel__card {
    flex: 0 0 calc((100vw - 2rem) / 2);
    padding: 1.25rem 1.25rem;
  }

  /* Industries hero: stack on mobile */
  .industries-hero {
    width: calc(100% - 2rem);
  }

  .industries-hero__split {
    flex-direction: column;
    gap: 1.5rem;
  }

  .industries-hero__image {
    flex: none;
    width: 100%;
  }

  .carousel-heading {
    width: calc(100% - 2rem);
  }

  /* Vertical carousel: mobile */
  .vcarousel {
    width: calc(100% - 2rem);
    height: calc(12rem * 3 + 0.75rem * 2.5);
  }

  .vcarousel__img {
    width: 5rem;
  }

  /* OSS hero: stack on mobile */
  .oss-hero {
    width: calc(100% - 2rem);
  }

  .oss-hero__split {
    flex-direction: column;
    gap: 1.5rem;
  }

  .oss-hero__image {
    flex: none;
    width: 100%;
  }

  .oss-hero__stats {
    gap: 1rem;
  }

  /* News section: stack title, constrain carousel width */
  .news-section {
    width: calc(100% - 2rem);
  }

  .news-section__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .news-section__carousel {
    width: 100%;
  }

  .news-section__track-wrapper {
    flex: none;
    width: 100%;
  }

  .news-section__title {
    text-align: left;
  }

  .news-section__card {
    flex: 0 0 calc((100vw - 2rem) / 2.5);
  }

  .news-section__card-title {
    font-size: 0.75rem;
  }

  /* Careers banner: stack on mobile */
  .careers-banner {
    width: calc(100% - 2rem);
    flex-direction: column;
    gap: 1.5rem;
  }

  .careers-banner__images {
    flex: none;
    width: 100%;
  }

  .careers-banner__img {
    aspect-ratio: 3 / 4;
  }

  /* Contact section: mobile */
  .contact-section {
    width: calc(100% - 2rem);
  }

  .contact-section__split {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  /* Image strip: 2×2 grid on mobile */
  .image-strip {
    flex-wrap: wrap;
  }

  .image-strip__img {
    flex: 1 1 calc(50% - 0.375rem); /* two per row, accounting for half the 0.75rem gap */
  }

  /* Card image break: stack on mobile */
  .card-img-break {
    flex-direction: column;
    width: calc(100% - 2rem);
  }

  /* Feature grid: single column on mobile */
  .feature-grid {
    grid-template-columns: 1fr;
  }

  .feature-card {
    aspect-ratio: auto;
    min-height: 0;
  }
}

/* ─── Responsive: Small phones (≤480px) ─────────────────────── */
@media (max-width: 480px) {
  /* Hero: tighten everything to fit a 320px screen */
  .hero__headline {
    font-size: clamp(1.5rem, 9vw, 2rem);
  }

  .hero__tagline {
    font-size: 1.0625rem;
  }

  /* Sub-page title: keep legible but not overwhelming */
  .page-hero__title {
    font-size: clamp(1.75rem, 12vw, 2.25rem);
  }

  /* Cards: minimal side margin */
  .section-card {
    width: calc(100% - 1.25rem);
  }

  .page-hero,
  .page-tagline {
    width: calc(100% - 1.25rem);
  }
}