:root {
  --navy: #0B2545;
  --teal: #13A89E;      /* decorative: underlines, glow, arrows */
  --teal-ink: #0E9A90;  /* large text + focus rings (>= 3:1 on white) */
  --teal-text: #0B7F77; /* small text (>= 4.5:1 on white) */
  --gray: #5B6B7B;
  --ink: #2B3440;
  --line: #E8ECF0;
  --header-h: 76px;
  --font-body: "Public Sans", system-ui, sans-serif;
  --font-heading: "Manrope", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #FFFFFF;
  color: var(--navy);
  font-family: var(--font-body);
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
ul { list-style: none; margin: 0; padding: 0; }
a { color: inherit; }

.container {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 56px);
  box-sizing: border-box;
}

.skip-link { /* off-screen until keyboard-focused, so mouse/touch users never see it */
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 1000;
  padding: 12px 20px;
  background: var(--navy);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  border-radius: 8px;
  text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 16px; }

/* ---------- Header: see the "Global header" block at the end ---------- */
:where(a, button):focus-visible {
  outline: 3px solid var(--teal-ink);
  outline-offset: 3px;
}
:where(a, button):focus:not(:focus-visible) { outline: none; } /* no ring on mouse click or page load */
a, button { -webkit-tap-highlight-color: transparent; }

/* ---------- Buttons ---------- */
.btn-primary {
  --chip: 44px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: 60px;
  padding: 0 7px 0 30px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: linear-gradient(135deg, #0B2545 0%, #0F4C75 55%, #13A89E 130%);
  background-size: 130% 100%; /* room for the hover shift; keeps the label over navy/blue for AA contrast */
  background-position: 0 0;
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.005em;
  text-decoration: none;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55),
              inset 0 -10px 18px rgba(19, 168, 158, 0.25),
              0 10px 30px -8px rgba(19, 168, 158, 0.55),
              0 4px 12px rgba(11, 37, 69, 0.25);
  transition: transform .2s ease-out, box-shadow .2s ease-out, background-position .2s ease-out;
}
.btn-primary::before { /* glass gloss */
  content: "";
  position: absolute;
  inset: 0 0 50% 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0));
  pointer-events: none;
  z-index: -1;
  transition: opacity .2s ease-out;
}
.btn-primary::after { /* light sweep, runs once per hover */
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: translateX(-160%) skewX(-20deg);
  pointer-events: none;
  z-index: -1;
}
.btn-label { position: relative; }
.btn-chip {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--chip);
  height: var(--chip);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color .2s ease-out;
}
.btn-chip svg { display: block; transition: transform .2s ease-out; }

.btn-primary:hover {
  transform: translateY(-2px);
  background-position: 100% 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55),
              inset 0 -10px 18px rgba(19, 168, 158, 0.35),
              0 14px 36px -8px rgba(19, 168, 158, 0.75),
              0 6px 16px rgba(11, 37, 69, 0.28);
}
.btn-primary:hover::after { transform: translateX(400%) skewX(-20deg); transition: transform .7s ease-out; }
.btn-primary:hover .btn-chip { background: rgba(255, 255, 255, 0.3); }
.btn-primary:hover .btn-chip svg { transform: translateX(3px); }
.btn-primary:active {
  transform: translateY(0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45),
              inset 0 -10px 18px rgba(19, 168, 158, 0.25),
              0 5px 16px -6px rgba(19, 168, 158, 0.5),
              0 2px 6px rgba(11, 37, 69, 0.25);
}
.btn-primary:active::before { opacity: 0.7; }

.btn-primary--sm { --chip: 32px; height: 44px; gap: 10px; padding: 0 5px 0 22px; font-size: 15px; }

@media (prefers-color-scheme: dark) {
  .btn-primary { border-color: rgba(255, 255, 255, 0.4); }
}

/* ---------- Hero ---------- */
.hero {
  --space-h1-sub: 28px;
  --space-sub-btn: 44px;
  --space-btn-link: 26px; /* + 2px padding on the link = 28px to its text */
  display: grid;
  align-items: center;
  padding-block: clamp(36px, 5vw, 72px); /* hero is only as tall as its content */
  overflow-x: clip; /* guards against horizontal scroll from the scaled video */
}
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  column-gap: clamp(32px, 4vw, 64px);
  align-items: center;
}

.hero-copy { position: relative; z-index: 1; } /* text stays above the video box */

h1 {
  margin: 0 0 var(--space-h1-sub);
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 4.5vw - 5.3px, 3.35rem); /* sized for the old Title Case line 2 (10.09em); sentence case is narrower, so it still fits the 1fr column at 1024-1920 */
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  -webkit-text-stroke: 0.025em; /* thickens the strokes: Manrope tops out at 800 */
  color: var(--navy);
}
h1 .line { display: block; }
h1 .accent { color: var(--teal-ink); white-space: nowrap; }

.sub {
  margin: 0 0 var(--space-sub-btn);
  max-width: 34rem;
  font-size: clamp(1.1rem, 1.4vw, 1.3rem);
  font-weight: 400;
  line-height: 1.65;
  color: #4A5A6A;
}

.cta-row { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-btn-link); margin: 0; }
.text-link {
  padding-block: 2px; /* 26px tall: meets the 24px touch-target minimum */
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--navy);
  text-decoration: none;
}
@media (min-width: 1200px) { .text-link { white-space: nowrap; } }
.text-link span {
  background: linear-gradient(var(--teal), var(--teal)) 0 100% / 0 2px no-repeat;
  padding-bottom: 2px;
  transition: background-size .25s ease-out;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.text-link:hover span, .text-link:focus-visible span { background-size: 100% 2px; }
.text-link svg {
  display: inline-block;
  vertical-align: -3px;
  margin-left: 4px;
  color: var(--teal);
  transition: transform .2s ease-out;
}
.text-link:hover svg { transform: translateX(3px); }

/* Shared sizing for every section's hero-style visual (video/illustration) -- ONE class so the
   hero and the problem section (and any future section) are pixel-identical in size by
   construction, not by typing the same numbers twice. Only scale/transform-origin/aspect-ratio/
   object-fit live here; anything section-specific (poster image, mask fade, border-radius, blend
   mode) stays on that section's own class. */
.section-visual {
  scale: var(--visual-scale, 1.05); /* `scale` (not transform) so it doesn't fight the reveal transform. Higher values leave < 64px clear of the text */
  transform-origin: center right;
  aspect-ratio: 16 / 9;
}
.section-visual video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (max-width: 1319px) { .section-visual { --visual-scale: 1.03; } }
@media (max-width: 1199px) { .section-visual { --visual-scale: 1; } }

/* Video: poster shows first, video fades in once playing; edges melt into the white page */
.hero-media {
  background: url("assets/home-hero-poster.jpg") center / contain no-repeat;
  filter: brightness(1.01); /* lifts encoded near-white (253) to 255 */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 3%);
  mask-image: linear-gradient(to right, transparent, #000 3%);
}
.hero-media video {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity .3s ease;
}
.hero-media video.ready { opacity: 1; }
.hero-media.done { background-image: none; } /* poster removed after the fade so multiply doesn't double-darken */

/* ---------- Logo strip ---------- */
.logo-strip {
  background: #FFFFFF;
  padding-block: 40px 36px;
  border-block: 1px solid rgba(11, 37, 69, 0.08);
  overflow-x: clip; /* only guards the viewport edge; never cuts an item inside the container */
}
.logo-strip__list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  column-gap: clamp(24px, 3vw, 56px);
}
.logo-strip__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  max-width: 100%;
  height: 44px;
  border-radius: 4px;
  text-decoration: none;
}
.logo-strip img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transform: scale(var(--logo-scale, 1)); /* optical size per logo: style="--logo-scale:1.2" on the <li> */
  mix-blend-mode: multiply; /* white logo backgrounds vanish into the white page */
  opacity: var(--logo-opacity, 0.75); /* per-logo tweak for very light marks */
  transition: opacity .25s ease;
}
.logo-strip__item:hover img,
.logo-strip__item:focus-visible img { opacity: 1; }
.logo-strip__item:focus-visible { outline: 2px solid var(--teal-ink); outline-offset: 6px; }
.logo-strip__wordmark { /* text stand-in when a logo file is missing */
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  color: #8A97A5;
  transition: color .25s ease;
}
.logo-strip__item:hover .logo-strip__wordmark,
.logo-strip__item:focus-visible .logo-strip__wordmark { color: var(--navy); }


.logo-strip__list > .is-clone { display: none; } /* loop copies, phones only */
@media (max-width: 1024px) {
  .logo-strip__list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; }
}
/* mobile override removed -- the desktop value (40px 36px) is already tighter than the
   old 48px/40px mobile override was, so mobile now correctly inherits the smaller value
   instead of exceeding it */
@media (max-width: 480px) { /* 2 columns: wordmarks and wide logos don't fit 3-up at 28px */
  .logo-strip__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
}

/* Dark theme (opt-in: the page has no dark theme yet, so white logos on the white page would vanish) */
:root[data-theme="dark"] .logo-strip { border-color: rgba(255, 255, 255, 0.10); }
:root[data-theme="dark"] .logo-strip img { filter: grayscale(1) brightness(0) invert(1); opacity: 0.55; }
:root[data-theme="dark"] .logo-strip__item:hover img,
:root[data-theme="dark"] .logo-strip__item:focus-visible img { filter: none; opacity: 1; }

/* ---------- The problem ---------- */
.problem {
  background: #FFFFFF;
  padding-block: clamp(64px, 8vw, 108px); /* matches .services -- keeps the two adjacent sections' rhythm in sync */
  overflow-x: clip; /* guards against horizontal scroll from the scaled illustration, same as .hero */
}

.section-heading { text-align: center; margin-bottom: clamp(40px, 5vw, 64px); }
.section-heading h2 {
  margin: 0 auto;
  max-width: max-content;
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  font-size: clamp(1.5rem, 1.05rem + 2.8vw, 2.75rem); /* shrinks to fit one line down to 520px */
  color: var(--navy);
  white-space: nowrap;
}
@media (max-width: 520px) { .section-heading h2 { white-space: normal; max-width: none; } }

/* text column left, illustration right -- same column-gap as .hero-inner, but a wider media
   column (1.25fr vs the hero's 1.05fr) so this video is larger. Grow it via the column, not
   a bigger --visual-scale: scale overlaps the text and the video's white paints over it. */
.problem__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  column-gap: clamp(32px, 4vw, 64px);
  align-items: center;
}
@media (max-width: 900px) { .problem__grid { grid-template-columns: minmax(0, 1fr); row-gap: 44px; } }

.problem__copy { min-width: 0; }
.problem__copy h2 { /* left-aligned in its own column, not the centered standalone .section-heading treatment */
  margin: 0 0 28px;
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  font-size: clamp(1.5rem, 1.05rem + 2.8vw, 2.75rem);
  color: var(--navy);
}

/* sizing (scale/transform-origin/aspect-ratio/object-fit) comes entirely from .section-visual --
   only the visual chrome unique to this section (rounded card, clip, white blend) lives here */
.problem__media {
  border-radius: 20px;
  overflow: hidden;
}
.problem__media video {
  mix-blend-mode: multiply;
  background: #FFFFFF;
  opacity: 0;
  transition: opacity .3s ease;
}
.problem__media video.ready { opacity: 1; }

.problem__list { position: relative; padding-left: 26px; }
.problem__list::before { /* one line running behind all three items */
  content: "";
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 1.5px;
  background: linear-gradient(180deg, #13A89E 0%, rgba(19, 168, 158, 0.15) 100%);
}
.problem__item { position: relative; padding-bottom: 26px; }
.problem__item:last-child { padding-bottom: 0; }
.problem__item::before { /* marker on the shared line */
  content: "";
  position: absolute;
  left: -30px; top: 6px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1.5px solid var(--teal-ink);
}
.problem__quote {
  margin: 0 0 4px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.35;
  color: var(--navy);
}
.problem__consequence {
  margin: 0;
  max-width: 34rem;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(0.9rem, 1.02vw, 0.98rem);
  line-height: 1.55;
  color: var(--gray);
}


/* ---------- Services (expanding panels) ---------- */
.services { background: #F6F9FA; padding-block: clamp(64px, 8vw, 108px); }

.services__panels { display: flex; gap: 14px; height: 420px; }

.services__panel {
  position: relative;
  flex: 1 1 0%;
  min-width: 0;
  border-radius: 20px;
  background: linear-gradient(180deg, #F7FAFC, #EEF3F7);
  border: 1px solid rgba(11, 37, 69, 0.10);
  overflow: hidden;
  transition: flex-grow 550ms cubic-bezier(0.65, 0, 0.35, 1), background-color 550ms ease;
}
.services__panel.is-active { flex-grow: 6; background: #FFFFFF; }

.services__trigger {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 20px;
  text-align: left;
}
.services__number {
  position: absolute;
  top: 20px;
  left: 20px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--teal-text);
}
.services__label {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  color: var(--navy);
  transition: opacity 200ms ease;
}
.services__panel.is-active .services__label { opacity: 0; pointer-events: none; }

.services__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); /* media a bit bigger than the text column */
  gap: 36px;
  padding: 36px;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transform: translateX(12px);
  transition: opacity 400ms ease-out 150ms, transform 400ms ease-out 150ms;
}
.services__panel.is-active .services__content { opacity: 1; pointer-events: auto; transform: translateX(0); }

.services__media { width: 100%; height: 100%; } /* height-constrained to the panel's fixed 480px row, so a wider column never overflows it */
.services__media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain; /* scales down to fit the shorter of width/height, so it's never taller than the panel */
  border: 0;
  background: none;
  transition: transform 200ms ease;
}
.services__panel.is-active .services__media img { transform: translateY(-4px) scale(1.02); }
.services__placeholder { /* shown via JS if an illustration file is missing, same box as the <img> */
  display: none;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  background: #F5F8FA;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--gray);
}

.services__text h2 {
  margin: 0 0 14px;
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-size: clamp(1.4rem, 1.8vw, 1.75rem);
  color: var(--navy);
}
.services__text p {
  margin: 0 0 22px;
  max-width: 36ch;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--gray);
}
.services__text a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-block: 5px; /* 27px tall: meets the 24px touch-target minimum */
  margin-block: -5px; /* keeps the visual baseline where it was */
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--navy);
  text-decoration: none;
}
.services__text a svg { transition: transform 200ms ease, color 200ms ease; }
.services__text a:hover { color: var(--teal-text); }
.services__text a:hover svg { transform: translateX(3px); color: var(--teal-ink); }

@media (max-width: 899px) {
  /* Accordion. Same .is-active class as the desktop strip; panels are auto height and the
     content collapses with max-height + overflow, so a closing panel can never show clipped
     content (it used to keep an absolutely positioned, still-fading content layer on top of
     a fixed 88px header). */
  .services__panels { flex-direction: column; height: auto; gap: 12px; }
  .services__panel { flex: none; height: auto; transition: background-color 550ms ease; }
  .services__trigger { position: relative; inset: auto; height: 64px; display: flex; align-items: center; gap: 14px; padding: 0 24px; }
  .services__number, .services__label { position: static; transform: none; }
  .services__label { writing-mode: horizontal-tb; font-size: 16px; }
  .services__trigger::after { /* chevron: points down when closed, up when open */
    content: "";
    flex: none;
    margin-left: auto;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--navy);
    border-bottom: 2px solid var(--navy);
    transform: translateY(-3px) rotate(45deg);
    transition: transform 350ms ease;
  }
  .services__panel.is-active .services__trigger::after { transform: translateY(2px) rotate(225deg); }
  .services__content {
    position: static;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    max-height: 0;
    padding: 0 24px;
    overflow: hidden;
    visibility: hidden; /* closed content is out of the tab order too */
    transform: none;
    transition: max-height 550ms cubic-bezier(0.65, 0, 0.35, 1), padding-bottom 550ms cubic-bezier(0.65, 0, 0.35, 1), opacity 250ms ease, visibility 0s 550ms;
  }
  .services__panel.is-active .services__content {
    max-height: 560px; /* comfortably above the tallest open panel (~440px at 768px) */
    padding-bottom: 24px;
    visibility: visible;
    transform: none;
    transition: max-height 550ms cubic-bezier(0.65, 0, 0.35, 1), padding-bottom 550ms cubic-bezier(0.65, 0, 0.35, 1), opacity 400ms ease 150ms, visibility 0s;
  }
  /* panel height is auto here (not a fixed 420px row), so size the image by its own aspect-ratio, capped */
  .services__media, .services__media img { height: auto; }
  .services__media img { width: auto; max-width: 100%; max-height: 240px; margin-inline: auto; }
}


/* ---------- Responsive ---------- */
/* (the 1319px/1199px --visual-scale steps live with .section-visual itself, above) */
@media (max-width: 1023px) {
  .hero { padding-block: 48px; }
  .hero-inner { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .hero-media { scale: 1; }
  h1 { font-size: clamp(2rem, 8.5vw, 4rem); }
  h1 .line { text-wrap: balance; }
  .cta-row .btn-primary { width: 100%; max-width: 360px; justify-content: space-between; }
}

@media (max-width: 900px) { .problem { padding-block: 80px; } .problem__media { scale: 1; } }
/* stacked: the illustration is a centred accent, not full width (16:9 box = the video's own ratio) */
@media (max-width: 899px) {
  .problem__media { width: 100%; max-width: 320px; margin-inline: auto; }
  /* stacked order: heading, illustration, then the quotes (the copy column dissolves so its
     heading and list can sit either side of the illustration) */
  .problem__grid { row-gap: 24px; }
  .problem__copy { display: contents; }
  .problem__copy h2 { order: 1; margin-bottom: 0; }
  .problem__media { order: 2; }
  .problem__list { order: 3; }
}
@media (max-width: 480px) { .problem__media { max-width: min(220px, 62%); } }
@media (max-width: 480px) { .problem { padding-block: 64px; } }


/* ---------- Work / portfolio carousel ---------- */
.work {
  position: relative;
  padding-top: clamp(64px, 8vw, 108px);
  padding-bottom: 32px; /* tightened -- was matching the top (64-108px), now just a little */
  background:
    radial-gradient(45% 55% at 15% 20%, rgba(19, 168, 158, 0.14), transparent 60%),
    radial-gradient(40% 50% at 85% 80%, rgba(11, 37, 69, 0.12), transparent 60%),
    #FFFFFF;
  overflow: hidden; /* belt-and-braces: the track clips its own scroll, this guards against any sub-pixel bleed */
}
.work .section-heading { margin-bottom: 0; }
.work__sub {
  margin: 14px auto 0;
  max-width: 46rem;
  font-family: var(--font-body);
  font-size: clamp(0.98rem, 1.1vw, 1.05rem);
  line-height: 1.6;
  color: var(--gray);
  text-align: center;
}

.work__viewport { position: relative; margin-top: clamp(32px, 4vw, 48px); }
.work__fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8%;
  z-index: 3;
  pointer-events: none;
}
.work__fade--left { left: 0; background: linear-gradient(90deg, #FFFFFF, rgba(255, 255, 255, 0)); }
.work__fade--right { right: 0; background: linear-gradient(270deg, #FFFFFF, rgba(255, 255, 255, 0)); }

.work__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab; /* mouse (no trackpad) users can click-drag horizontally -- see script.js */
}
.work__track::-webkit-scrollbar { display: none; }
.work__track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.work__track.no-smooth { scroll-behavior: auto; } /* toggled by JS during loop-wrap jumps and initial position */

.work__slide {
  /* sized to the card (760px) + a little breathing room, NOT a percentage of the much-wider
     track -- at 84% of the track, the card's own empty padding ate the entire "peek" window
     before it ever reached the neighbouring card, so nothing but blank space ever showed */
  flex: 0 0 min(88vw, 820px);
  width: min(88vw, 820px);
  box-sizing: border-box;
  scroll-snap-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 56px clamp(16px, 3vw, 40px); /* vertical room for the card's drop-shadow so it isn't clipped */
}

.work__card-wrap {
  width: 100%;
  max-width: 760px;
  transform: scale(0.94);
  opacity: 0.55;
  filter: drop-shadow(0 28px 46px rgba(11, 37, 69, 0.20)) blur(3px); /* peeking neighbours: visible but blurred */
  transition: transform 300ms ease, opacity 300ms ease, filter 300ms ease;
}
.work__card-wrap.is-active {
  transform: scale(1);
  opacity: 1;
  filter: drop-shadow(0 28px 46px rgba(11, 37, 69, 0.20)) blur(0px);
}

.work__card {
  position: relative;
  border-radius: 34px;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(18px) saturate(190%);
  -webkit-backdrop-filter: blur(18px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  isolation: isolate;
  overflow: hidden;
  box-shadow:
    0 1px 1px rgba(255, 255, 255, 0.9) inset,
    0 -14px 30px rgba(255, 255, 255, 0.25) inset;
}
.work__card::before { /* specular highlight */
  content: "";
  position: absolute;
  top: -45%;
  left: -10%;
  width: 120%;
  height: 75%;
  background: radial-gradient(60% 100% at 50% 0%, rgba(255, 255, 255, 0.6), transparent 70%);
  z-index: 1;
  pointer-events: none;
}
.work__card::after { /* rim-light border -- mask-composite:exclude shows only the ring, not the fill */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 34px;
  padding: 1.5px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.05) 60%, rgba(255, 255, 255, 0.3) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 1;
  pointer-events: none;
}

.work__content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 40px);
  padding: clamp(28px, 3.5vw, 48px);
}
@media (max-width: 720px) {
  .work__content { grid-template-columns: minmax(0, 1fr); }
  /* single column: a screenshot area with nothing in it yet takes no space; a real image
     dropped in later shows at the same 4:3 as on desktop */
  .work__media:empty { display: none; }
}

.work__text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.work__eyebrow {
  margin: 0 0 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-text);
}
.work__text h3 {
  margin: 0 0 12px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  line-height: 1.2;
  color: var(--navy);
}
.work__desc {
  margin: 0 0 22px;
  max-width: 36ch;
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--gray);
}
.work__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--navy);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  border: 1px solid rgba(11, 37, 69, 0.08);
  box-shadow: 0 4px 14px rgba(11, 37, 69, 0.16);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.work__cta svg { color: var(--teal-ink); transition: transform 200ms ease; }
.work__cta:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(11, 37, 69, 0.22); }
.work__cta:hover svg { transform: translateX(3px); }
.work__cta:focus-visible { outline: 2px solid var(--teal-ink); outline-offset: 3px; }

.work__media {
  display: block;
  border-radius: 22px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(180deg, #F3F7F9, #E9EFF3); /* placeholder until real screenshots are added */
}
.work__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.work__dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(28px, 4vw, 40px);
}
.work__dot {
  width: 24px; /* WCAG touch-target minimum -- the visible dot is smaller, drawn via ::before */
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.work__dot::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(11, 37, 69, 0.18);
  transition: background 200ms ease, transform 200ms ease;
}
.work__dot.is-active::before { background: var(--teal-ink); transform: scale(1.4); }
.work__dot:focus-visible { outline: 2px solid var(--teal-ink); outline-offset: 3px; border-radius: 50%; }

/* ---------- Insights teaser ---------- */
.insights { background: #FFFFFF; padding-top: 32px; padding-bottom: clamp(80px, 10vw, 130px); } /* top tightened to match .work's reduced bottom gap above it */

.insights__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: clamp(48px, 6vw, 76px);
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(11, 37, 69, 0.10);
}
.insights__top h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  color: var(--navy);
}
.insights__viewall {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-block: 4px; /* 26px tall: meets the 24px touch-target minimum */
  margin-block: -4px; /* keeps the visual baseline where it was */
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--navy);
  text-decoration: none;
  transition: color 200ms ease;
}
.insights__viewall svg { transition: transform 200ms ease; }
.insights__viewall:hover { color: var(--teal-ink); }
.insights__viewall:hover svg { transform: translateX(4px); }
.insights__viewall:focus-visible { outline: 3px solid var(--teal-ink); outline-offset: 3px; }

.article-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-block: clamp(28px, 3.4vw, 44px);
  border-bottom: 1px solid rgba(11, 37, 69, 0.10);
  text-decoration: none;
  cursor: pointer;
  position: relative;
}
.article-row:first-child { padding-top: 0; }
.article-row:focus-visible { outline: 3px solid var(--teal-ink); outline-offset: 3px; }

.article-row__index {
  flex: none;
  width: 28px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8rem;
  color: rgba(11, 37, 69, 0.3);
}
.article-row__main { min-width: 0; }
.article-row__title {
  display: inline-block;
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  color: var(--navy);
  transition: transform 300ms ease, color 300ms ease;
}
.article-row:hover .article-row__title { transform: translateX(10px); color: var(--teal-ink); }
.article-row__summary {
  margin: 0;
  max-width: 44ch;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--gray);
}
.article-row__meta {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: #9AA7B4;
  text-align: right;
}
.article-row__arrow {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid rgba(11, 37, 69, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  transition: background 250ms ease, border-color 250ms ease, transform 250ms ease, color 250ms ease;
}
.article-row:hover .article-row__arrow {
  background: var(--teal-ink);
  border-color: var(--teal-ink);
  color: #FFFFFF;
  transform: rotate(45deg);
}

/* Cursor-following preview: fixed, position set via JS (left/top), centring + scale via CSS so
   the two never fight each other. Placeholder gradient shows until real thumbnails exist. */
.hover-preview {
  position: fixed;
  top: 0;
  left: 0;
  width: 220px;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  pointer-events: none;
  z-index: 50;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.85);
  box-shadow: 0 24px 48px -16px rgba(11, 37, 69, 0.35);
  background: linear-gradient(160deg, #F3F7F9, #E9EFF3) center / cover;
  transition: opacity 250ms ease, transform 250ms ease;
}
.hover-preview.is-active { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@media (hover: none) { .hover-preview { display: none; } } /* no cursor to follow on touch */


@media (max-width: 720px) {
  .article-row { flex-wrap: wrap; }
  .article-row__meta { align-items: flex-start; text-align: left; }
  .hover-preview { display: none; }
}

/* ---------- Closing CTA: editorial ---------- */
.cta-editorial { background: #FFFFFF; padding-top: clamp(8px, 1.5vw, 24px); padding-bottom: clamp(48px, 6vw, 88px); }
.cta-editorial__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  column-gap: clamp(32px, 5vw, 80px);
  row-gap: 32px;
  align-items: center;
}
.cta-editorial h2 {
  margin: 0 0 20px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.8rem, 3.6vw, 2.9rem);
  letter-spacing: -0.04em;
  line-height: 1.02;
  color: var(--navy);
}
.cta-editorial__accent { color: var(--teal-ink); } /* --teal (#13A89E) is 2.9:1 on white, below AA large */
.cta-editorial__body {
  max-width: 46ch;
  margin: 0 0 24px;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.7;
  color: var(--gray);
}
.cta-editorial__small { margin: 0; font-size: 0.9rem; color: var(--gray); } /* #8A97A5 is 2.9:1, below AA */
.hl {
  font-weight: 600;
  background-image: linear-gradient(var(--teal), var(--teal));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 0% 3px;
  transition: background-size 500ms ease;
}
.hl.is-on { background-size: 100% 3px; }

.cta-editorial__cta { display: flex; justify-content: center; }
.badge {
  position: relative;
  display: block;
  width: clamp(150px, 15vw, 190px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  transition: transform 300ms cubic-bezier(.2, .8, .2, 1);
}
.badge:hover { transform: scale(1.07); }
.badge:focus-visible { outline: 3px solid var(--teal-ink); outline-offset: 6px; }
/* Ring turns at 20s/rev; the text inside adds a second spin that only runs on hover
   (1/8 = 1/20 + 1/13.333), so the speed-up to 8s/rev never jumps position. */
.badge__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: badge-spin 20s linear infinite;
}
.badge__ring text {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: 0.5px;
  fill: var(--navy);
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: badge-spin 13.333s linear infinite paused;
}
.badge:hover .badge__ring text { animation-play-state: running; }
@keyframes badge-spin { to { transform: rotate(360deg); } }
.badge__core {
  position: absolute;
  inset: 26%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #003E52, #006E8C);
  color: #FFFFFF;
  box-shadow: 0 18px 36px -12px rgba(0, 62, 82, 0.6);
}
.badge__core::before { /* hover gradient, faded in (gradients can't transition directly) */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, #0E8C84, var(--teal-text)); /* white arrow >= 4:1; #13A89E was 2.9:1 */
  opacity: 0;
  transition: opacity 300ms ease;
}
.badge:hover .badge__core::before { opacity: 1; }
.badge__core svg { position: relative; transition: transform 300ms ease; }
.badge:hover .badge__core svg { transform: rotate(-45deg); }

@media (max-width: 819px) {
  .cta-editorial__grid { grid-template-columns: minmax(0, 1fr); }
  .cta-editorial__cta { justify-content: flex-start; }
}

/* ---------- Footer (global) ---------- */
.site-footer { background: #FFFFFF; border-top: 1px solid rgba(11, 37, 69, 0.10); padding-top: clamp(32px, 4vw, 48px); padding-bottom: 24px; }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
.footer__logo { margin-bottom: 16px; }
@media (min-width: 1024px) {
  .footer__grid { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); column-gap: clamp(32px, 4vw, 64px); }
}
.footer__heading {
  margin: 0 0 16px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray); /* #9AA7B4 is 2.4:1 on white, below AA */
}
.footer__tagline { margin: 0 0 8px; max-width: 32ch; font-size: 15px; line-height: 1.6; color: var(--ink); }
.footer__contact { display: flex; flex-direction: column; align-items: flex-start; }
.footer__links a, .footer__contact a {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 2.2;
  color: var(--ink);
  text-decoration: none;
  transition: color 150ms ease;
}
.footer__links a:hover, .footer__contact a:hover { color: var(--teal-text); }
.footer__links a:focus-visible, .footer__contact a:focus-visible { outline: 3px solid var(--teal-ink); outline-offset: 2px; border-radius: 4px; }
.footer__ext { margin-left: 4px; vertical-align: -1px; color: #9AA7B4; transition: color 150ms ease; } /* decorative */
.footer__links a:hover .footer__ext { color: var(--teal-text); }
.footer__contact-tag {
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(11, 37, 69, 0.06);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--gray);
  vertical-align: 1px;
}
.footer__legal {
  margin: clamp(24px, 3vw, 32px) 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(11, 37, 69, 0.10);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--gray); /* #9AA7B4 is 2.4:1 on white, below AA */
}
@media (max-width: 639px) {
  .footer__links a, .footer__contact a { padding-block: 6px; } /* 33px line + 12px = 45px tap target */
}

/* ---------- Services page (/services) ---------- */
/* Five sections back to back: tighter padding than Home (64-108px) so they read as one flow */
.svc-hero, .svc-list, .svc-process, .svc-faq, .svc-cta, .erp-cover, .erp-industries, .erp-case, .cs-compare, .cs-mobile, .cs-tools, .pilot, .ai-two, .sm-strip, .sm-week, .sm-where, .cs-problem, .cs-built, .cs-changed, .cs-quote { padding-block: clamp(48px, 6vw, 80px); }
.svc-h2, .erp-h2 {
  margin: 0 0 clamp(32px, 3.5vw, 40px);
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  font-size: clamp(1.5rem, 1.05rem + 2.8vw, 2.75rem);
  color: var(--navy);
}

/* 1. Hero -- same columns and gap as Home's .hero-inner */
.svc-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  column-gap: clamp(32px, 4vw, 64px);
  row-gap: 32px;
  align-items: center;
}
.svc-eyebrow {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal-text); /* #13A89E is 2.9:1 at 12px, below AA */
}
.svc-hero h1 {
  margin: 0 0 24px;
  font-size: clamp(2.4rem, 4.6vw, 4rem);
  letter-spacing: -0.035em;
}
.svc-hero__body { margin: 0; max-width: 56ch; font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.7; color: var(--gray); }
.svc-hero__body strong { font-weight: 600; color: var(--navy); }
.svc-hero { padding-block: clamp(32px, 4vw, 56px); }
.svc-hero__media { aspect-ratio: 1280 / 1006; } /* matches the 1280x1006 video (and its poster) */
.svc-hero__media :is(img, video) { display: block; width: 100%; height: 100%; object-fit: contain; }
.svc-hero__media video { mix-blend-mode: multiply; } /* the video's white background melts into the page, like the Home videos */
.img-fallback { /* shown by script.js when an illustration file is missing */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 16px;
  background: #F5F8FA;
  color: var(--gray);
  font-size: 14px;
  text-align: center;
}
@media (max-width: 899px) {
  .svc-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .svc-hero__media { order: -1; width: 100%; max-width: 420px; margin-inline: auto; }
}

/* 2. Service rows */
.svc-list { background: #F8FAFB; }
.svc-rows { border-bottom: 1px solid rgba(11, 37, 69, 0.10); }
.svc-rows > li { border-top: 1px solid rgba(11, 37, 69, 0.10); }
.svc-row {
  display: grid;
  grid-template-columns: clamp(48px, 5vw, 72px) 110px minmax(0, 1fr) 48px;
  column-gap: clamp(16px, 3vw, 40px);
  align-items: center;
  padding-block: 28px;
  color: inherit;
  text-decoration: none;
}
.svc-row:focus-visible { outline: 3px solid var(--teal-ink); outline-offset: 4px; border-radius: 12px; }
.svc-row__num {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.6rem, 2.4vw, 2.4rem);
  letter-spacing: -0.03em;
  color: rgba(11, 37, 69, 0.15);
  transition: color 350ms ease;
}
.svc-row__thumb { width: 110px; aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; background: #FFFFFF; }
.svc-row__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter 350ms ease, opacity 350ms ease, transform 350ms ease;
}
.svc-row__thumb .img-fallback { font-size: 11px; padding: 8px; }
.svc-row__name { margin: 0 0 6px; font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.1rem, 1.5vw, 1.35rem); color: var(--navy); }
.svc-row__desc { display: block; max-width: 64ch; font-size: 1rem; line-height: 1.6; color: var(--gray); }
.svc-row__arrow {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid rgba(11, 37, 69, 0.25);
  color: var(--navy);
  transition: background 350ms ease, border-color 350ms ease, color 350ms ease;
}
.svc-row__arrow svg { transition: transform 350ms ease; }
.svc-row:hover .svc-row__num, .svc-row:focus-visible .svc-row__num { color: var(--teal); }
.svc-row:hover .svc-row__thumb img, .svc-row:focus-visible .svc-row__thumb img { filter: none; opacity: 1; transform: scale(1.04); }
.svc-row:hover .svc-row__arrow, .svc-row:focus-visible .svc-row__arrow { background: var(--teal-ink); border-color: var(--teal-ink); color: #FFFFFF; } /* white arrow 3.5:1 */
.svc-row:hover .svc-row__arrow svg, .svc-row:focus-visible .svc-row__arrow svg { transform: rotate(45deg); }
@media (max-width: 859px) {
  .svc-row { grid-template-columns: 32px 80px minmax(0, 1fr); padding-block: 22px; }
  .svc-row__thumb { width: 80px; }
  .svc-row__num { font-size: 1.25rem; }
  .svc-row__arrow { display: none; }
}

/* 3. Process timeline -- each step draws the dashed segment to the next node, so the
   line always spans node to node whatever the column width */
.svc-steps { --gap: clamp(24px, 3vw, 48px); margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); }
.svc-process .svc-h2, .svc-process__note, .svc-faq .svc-h2 { text-align: center; }
.svc-step { position: relative; text-align: center; }
/* nodes are centred, so each segment runs from 8px past this node's edge (50% + 14 + 8)
   to 8px before the next one's (next centre sits at 150% + gap) */
.svc-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 13px;
  left: calc(50% + 22px);
  right: calc(22px - 50% - var(--gap));
  border-top: 2px dashed var(--teal);
}
.svc-step__node {
  display: block;
  width: 28px;
  height: 28px;
  margin: 0 auto 20px;
  border-radius: 50%;
  border: 2px solid var(--teal);
  background: radial-gradient(circle, var(--teal) 0 4px, #FFFFFF 4.5px);
}
/* travel dot: lives in step 1, spans node 1 centre to node 4 centre (3 columns + 3 gaps);
   container units let the keyframe translate by that width with a plain translateX */
.svc-travel {
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(3 * (100% + var(--gap)));
  height: 28px;
  container-type: inline-size;
  pointer-events: none;
}
.svc-travel svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  /* glow sits on the svg, not the circle: Safari ignores CSS filter on SVG child elements */
  filter: drop-shadow(0 0 7px rgba(19, 168, 158, 1)) drop-shadow(0 0 14px rgba(19, 168, 158, 0.6));
}
.travel-dot {
  fill: var(--teal);
  transform-box: fill-box;
  opacity: 0;
  animation: travel 4.5s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes travel {
  0%   { transform: translateX(0); opacity: 0; }
  6%   { opacity: 1; }
  94%  { opacity: 1; }
  100% { transform: translateX(100cqw); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .travel-dot { animation: none; opacity: 0; }
}
.svc-step__title { margin: 0 0 8px; font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem; color: var(--navy); }
/* "First month free" pill under step 4. Fill is --teal-text, not #13A89E: white on
   #13A89E is 2.9:1 at this size (below AA); the pulse keeps the brand teal */
.tstep__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--teal-text);
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  animation: tstep-pulse 2.4s ease-out infinite;
}
@keyframes tstep-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(19, 168, 158, 0.45); }
  70%  { box-shadow: 0 0 0 8px rgba(19, 168, 158, 0); }
  100% { box-shadow: 0 0 0 0 rgba(19, 168, 158, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .tstep__badge { animation: none; }
}
.svc-step__text { margin: 0; font-size: 0.98rem; line-height: 1.65; color: var(--gray); }
.svc-process__note { margin: clamp(32px, 3.5vw, 40px) 0 0; font-size: 0.95rem; color: var(--gray); }
@media (max-width: 859px) {
  .svc-steps { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .svc-step::after, .svc-travel { display: none; }
  .svc-step__node { margin-bottom: 12px; }
}

.svc-faq .svc-faq__heading { margin-bottom: 12px; }
.svc-faq__more { margin: 0 0 clamp(32px, 3.5vw, 40px); text-align: center; font-size: 15px; color: var(--gray); }
.svc-faq__more .text-link { display: inline-block; } /* inline-block so its padding counts: 26px tap target */

/* 4. Questions selector -- list + rail on the left, one answer panel on the right.
   Inactive questions use --gray, not navy at 42% (~2.6:1, below AA) */
.qsel { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 4vw, 64px); align-items: start; }
/* the list scrolls once it outgrows ~4.5 questions (script.js sets max-height); the rail is a
   local background so it spans the scrolled content, and it sits 12px in so the bar's glow
   isn't clipped by the scroll box. script.js toggles --fade-top and .is-end */
.qsel__list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 4px 4px 32px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(11, 37, 69, 0.18) transparent;
  background: linear-gradient(rgba(11, 37, 69, 0.08), rgba(11, 37, 69, 0.08)) 12px 0 / 2px 100% no-repeat local;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-top, 0px));
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-top, 0px));
}
/* blur strip pinned to the bottom of the scroll box: the half-visible next question reads
   as "more below"; hidden once the list is scrolled to the end */
.qsel__list::after {
  content: "";
  position: sticky;
  bottom: -4px;
  flex-shrink: 0;
  height: 40px;
  margin-top: -44px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55));
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 60%);
  mask-image: linear-gradient(to bottom, transparent, #000 60%);
  transition: opacity 200ms ease;
}
.qsel__list.is-end::after { opacity: 0; }
.qsel__bar {
  position: absolute;
  left: 11px;
  width: 4px;
  border-radius: 2px;
  background: var(--teal);
  box-shadow: 0 0 8px rgba(19, 168, 158, 0.7), 0 0 16px rgba(19, 168, 158, 0.35);
  transition: top 350ms cubic-bezier(.4, 0, .2, 1), height 350ms cubic-bezier(.4, 0, .2, 1);
}
.qsel__bar:not([style]) { display: none; } /* no JS: nothing to point at */
.qsel__q {
  flex-shrink: 0; /* the list scrolls; buttons must keep their height, not squeeze to fit */
  min-height: 44px;
  padding: 16px 20px;
  border: 0;
  border-radius: 12px;
  background: none;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  color: var(--gray);
  text-align: left;
  cursor: pointer;
  transition: color 200ms ease, background-color 200ms ease;
}
.qsel__q:hover { color: var(--navy); }
.qsel__q[aria-expanded="true"] { color: var(--navy); background: rgba(19, 168, 158, 0.07); }
.qsel__q:focus-visible { outline: 3px solid var(--teal-ink); outline-offset: 2px; }
.qsel__panel { padding: clamp(28px, 4vw, 48px); border-radius: 24px; background: #F8FAFB; }
.qsel__a { animation: qsel-in 450ms ease both; }
.qsel__a:not([hidden]) + .qsel__a:not([hidden]) { margin-top: 32px; } /* no-JS stacked fallback: only between answers that are both showing */
.qsel__num { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--teal-text); }
.qsel__title { margin: 0 0 16px; font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.3rem, 2vw, 1.6rem); letter-spacing: -0.02em; color: var(--navy); }
.qsel__a p:not(.qsel__num) { margin: 0; max-width: 60ch; font-size: 1.05rem; line-height: 1.7; color: var(--gray); }
@keyframes qsel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .qsel__bar { transition-duration: 80ms; }
  .qsel__a { animation-duration: 80ms; }
}
@media (max-width: 819px) {
  .qsel { grid-template-columns: minmax(0, 1fr); }
  .qsel__list { padding-left: 4px; background: none; }
  .qsel__bar { display: none; }
}

/* 5. Closing CTA -- reuses Home's .badge */
.svc-cta { position: relative; overflow: hidden; }
.svc-cta__grid { position: relative; z-index: 1; } /* content above any section-level orbs */
/* section-level ambient orbs (Odoo ERP page), behind the content; fade in with the reveal */
.cta-orb { position: absolute; border-radius: 50%; filter: blur(40px); opacity: 0.5; pointer-events: none; }
.cta-orb--1 { width: 260px; height: 260px; left: -5%; top: 10%; background: radial-gradient(circle, rgba(19, 168, 158, 0.3), transparent 70%); }
.cta-orb--2 { width: 200px; height: 200px; right: 4%; bottom: -6%; background: radial-gradient(circle, rgba(0, 110, 140, 0.28), transparent 70%); }
.svc-cta__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(32px, 5vw, 80px); row-gap: 32px; align-items: center; }
.svc-cta__heading {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--navy);
}
.svc-cta__badge { position: relative; display: grid; place-items: center; }
.svc-cta__badge .badge { z-index: 1; }
.svc-cta__orb { position: absolute; width: 70%; aspect-ratio: 1 / 1; border-radius: 50%; filter: blur(40px); opacity: 0.35; pointer-events: none; }
.svc-cta__orb--teal { top: -12%; left: -16%; background: var(--teal); }
.svc-cta__orb--blue { bottom: -12%; right: -16%; background: #3A86C8; }
@media (max-width: 819px) {
  .svc-cta__grid { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-row__num, .svc-row__thumb img, .svc-row__arrow, .svc-row__arrow svg { transition: none; }
  .svc-row:hover .svc-row__thumb img, .svc-row:focus-visible .svc-row__thumb img { transform: none; }
  html { scroll-behavior: auto; }
  .hl { background-size: 100% 3px; transition: none; }
  .badge__ring, .badge__ring text { animation: none; } /* hover scale + colour stay: user-triggered */
  .text-link span, .text-link svg,
  .hero-media video { transition: none; }
  /* buttons: colour/glow changes only, no lift, slide or sweep */
  .btn-primary:hover, .btn-primary:active, .text-link:hover svg { transform: none; }
  .btn-primary:hover .btn-chip svg { transform: none; }
  .btn-primary::after { display: none; }
  .logo-strip img, .logo-strip__wordmark { transition: none; }
  .problem__media video { transition: none; opacity: 1; } /* paused, so it never gets .ready: show the poster still */
  /* keep the expand/fade functionality, just make it fast rather than instant */
  .services__panel, .services__label, .services__content, .services__media img {
    transition-duration: 80ms;
    transition-delay: 0ms;
  }
  /* still functionally loops (script.js checks matchMedia itself for scroll-behavior), just no
     animated easing on the active-card scale/opacity or the CTA hover lift */
  .work__card-wrap { transition: none; }
  .work__cta, .work__cta svg { transition: none; }
  .work__cta:hover { transform: none; }
  .work__cta:hover svg { transform: none; }
  .work__dot::before { transition: none; }
  .article-row__title, .article-row__arrow, .insights__viewall, .insights__viewall svg { transition: none; }
  .article-row:hover .article-row__title { transform: none; }
  .article-row:hover .article-row__arrow { transform: none; }
  /* preview stays functional (JS still snaps it to the cursor, no lerp trail), just a near-instant fade */
  .hover-preview { transition: opacity 80ms ease, transform 80ms ease; }
}



/* ===== Phones: compact components so each section fits one screen =====
   A 390x844 phone leaves ~764px under the 80px header. Buttons, panels, rows and the
   footer are tightened here; tap targets stay >= 44px. */
@media (max-width: 1023px) {
  /* footer: brand across the top, link groups in two columns (was one long stack) */
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 20px; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__grid > nav:first-of-type { grid-row: span 2; }
}
@media (max-width: 639px) {
  /* Home hero: smaller type, tighter gaps, a normal-width button and a smaller video */
  .hero { --space-h1-sub: 14px; --space-sub-btn: 22px; --space-btn-link: 16px; padding-block: 20px 28px; }
  .hero-inner { row-gap: 20px; }
  h1 { font-size: clamp(1.75rem, 7.4vw, 2.25rem); }
  .sub { font-size: 1rem; line-height: 1.6; }
  .cta-row .btn-primary { width: auto; max-width: none; height: 46px; --chip: 34px; padding: 0 6px 0 20px; font-size: 14px; }
  .hero .text-link { font-size: 14px; }
  .hero-media { width: 100%; max-width: 340px; justify-self: center; }
  /* illustration sits between the paragraph and the button: the copy column dissolves so its
     children become grid items that can be reordered around the video */
  .hero-copy { display: contents; }
  .hero-inner { row-gap: 0; }
  .hero-inner h1 { order: 1; }
  .hero-inner .sub { order: 2; }
  .hero-media { order: 3; margin-bottom: var(--space-sub-btn); }
  .hero-inner .cta-row { order: 4; }

  /* logos: one swipeable row that loops (the list holds two copies; script.js wraps the
     scroll position by one copy's width at either end) */
  .logo-strip { padding-block: 28px; }
  .logo-strip .container {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }
  .logo-strip .container::-webkit-scrollbar { display: none; }
  .logo-strip__list { display: flex; width: max-content; column-gap: 0; } /* no gap: half the width must equal one copy exactly */
  .logo-strip__list > li { flex: none; padding-inline: 12px; }
  .logo-strip__list > .is-clone { display: block; }
  .logo-strip__item { width: 104px; }

  /* logos: no optical up-scaling on phones -- a 1.45x wordmark overflows its half-width column */
  .logo-strip img { transform: scale(min(var(--logo-scale, 1), 1)); }

  /* buttons and the CTA badge: one step smaller */
  .btn-primary { --chip: 38px; height: 50px; gap: 12px; padding: 0 6px 0 22px; font-size: 15px; }
  .badge { width: 120px; }
  .work__cta { padding: 10px 16px; font-size: 13px; min-height: 44px; }

  /* Home: services accordion */
  .services { padding-block: 48px; }
  .services__panels { gap: 8px; }
  .services__trigger { height: 56px; padding: 0 18px; }
  .services__label { font-size: 15px; }
  .services__content { padding-inline: 18px; gap: 12px; }
  .services__panel.is-active .services__content { padding-bottom: 20px; }
  .services__media img { max-height: 150px; }
  .services__text h2 { font-size: 1.25rem; margin-bottom: 6px; }
  .services__text p { font-size: 0.92rem; line-height: 1.5; margin-bottom: 10px; }

  /* Home: work carousel */
  .work { padding-top: 48px; padding-bottom: 20px; }
  .work__viewport { margin-top: 16px; }
  .work__slide { padding-block: 20px; }
  .work__card { border-radius: 24px; }
  .work__content { padding: 22px; gap: 14px; }
  .work__desc { margin-bottom: 14px; }
  .work__media { border-radius: 14px; }
  /* all 19 dots on one centred line: 16px-wide tap columns (24px tall) instead of 24px squares */
  .work__dots { flex-wrap: nowrap; gap: 0; margin-top: 12px; }
  .work__dot { width: 16px; }
  .work__dot::before { width: 4px; height: 4px; }

  /* Home: problem + insights */
  .problem { padding-block: 48px; }

  /* Services: rows -- small thumb beside the name, description full width under it */
  .svc-hero, .svc-list, .svc-process, .svc-faq, .svc-cta, .erp-cover, .erp-industries, .erp-case, .cs-compare, .cs-mobile, .cs-tools, .pilot, .ai-two, .sm-strip, .sm-week, .sm-where, .cs-problem, .cs-built, .cs-changed, .cs-quote { padding-block: 40px; }
  .svc-hero { padding-block: 24px 40px; }
  .svc-h2 { margin-bottom: 20px; }
  .svc-row {
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-areas: "thumb name" "desc desc";
    column-gap: 12px;
    row-gap: 8px;
    padding-block: 16px;
  }
  .svc-row__num, .svc-row__arrow { display: none; }
  .svc-row__thumb { grid-area: thumb; width: 44px; border-radius: 10px; }
  .svc-row__text { display: contents; }
  .svc-row__name { grid-area: name; align-self: center; margin: 0; font-size: 1.05rem; }
  .svc-row__desc {
    grid-area: desc;
    font-size: 0.9rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* the full text is on each service's own page */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Services: timeline becomes a left-aligned vertical list, node beside its text */
  .svc-steps { row-gap: 18px; }
  .svc-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; text-align: left; }
  .svc-step__node { grid-row: 1 / span 3; margin: 0; }
  .svc-step > :not(.svc-step__node):not(.svc-travel) { grid-column: 2; }
  .svc-step__title { margin-bottom: 4px; font-size: 1.02rem; }
  .svc-step__text { font-size: 0.9rem; line-height: 1.55; }
  .tstep__badge { justify-self: start; margin-top: 8px; }
  .svc-step:not(:last-child)::after { /* dashed line runs down from each node to the next */
    display: block;
    top: 32px;
    bottom: -14px;
    left: 13px;
    right: auto;
    border-top: 0;
    border-left: 2px dashed var(--teal);
  }
  .svc-process__note { margin-top: 20px; font-size: 0.88rem; }

  /* Services: FAQ */
  .svc-faq__more { margin-bottom: 20px; font-size: 14px; }
  .qsel { gap: 16px; }
  .qsel__q { min-height: 44px; padding: 10px 14px; font-size: 0.95rem; border-radius: 10px; }
  .qsel__panel { padding: 20px; border-radius: 18px; }
  .qsel__num { margin-bottom: 6px; }
  .qsel__title { margin-bottom: 10px; font-size: 1.15rem; }
  .qsel__a p:not(.qsel__num) { font-size: 0.95rem; line-height: 1.6; }

  /* footer: tighter rhythm, links keep their 45px tap height */
  .footer__heading { margin-bottom: 6px; }
  .footer__logo { margin-bottom: 10px; }
}

/* ===== Section reveals (every page) =====
   script.js adds .in-view to each .reveal-section once, the first time it scrolls into view.
   Every hidden state lives under html.reveal-ready + .reveal-section:not(.in-view), so:
   no JS or reduced motion = .reveal-ready never set = everything visible, no animation.
   Opacity/transform only (never display/visibility), so nothing reflows and links stay
   clickable mid-transition. --r = stagger index, set by script.js.
     1 hero / opening    .reveal-line + .reveal-media     staggered rise + settle
     2 rows / lists      .reveal-row                      curtain wipe, --reveal-cover = section bg
     3 process / steps   .reveal-steps (+ section rules)  line draws, nodes pop, text follows
     4 FAQ / selector    .reveal-item + .reveal-panel     list slides in, panel tilts open
     5 closing CTA       .reveal-from-left/-right, .reveal-spring, .reveal-ambient */
:root { --reveal-ease: cubic-bezier(.2, .8, .2, 1); --reveal-spring: cubic-bezier(.34, 1.56, .64, 1); }
span:is(.reveal-from-left, .reveal-from-right) { display: inline-block; } /* inline spans can't be transformed */

/* 1. staggered rise + settle */
.reveal-ready .reveal-line { transition: opacity 1100ms var(--reveal-ease), transform 1100ms var(--reveal-ease); transition-delay: calc(var(--r, 0) * 220ms); }
.reveal-ready .reveal-section:not(.in-view) .reveal-line { opacity: 0; transform: translateY(22px); }
.reveal-ready .reveal-media { transition: opacity 1300ms var(--reveal-ease) 500ms, transform 1300ms var(--reveal-ease) 500ms; }
.reveal-ready .reveal-section:not(.in-view) .reveal-media { opacity: 0; transform: scale(0.92) rotate(-2deg); }

/* 2. curtain wipe: a section-coloured cover shrinks toward the right edge, row by row */
.logo-strip, .work, .insights { --reveal-cover: #FFFFFF; }
.services { --reveal-cover: #F6F9FA; }
.erp-industries { --reveal-cover: #F8FAFB; }
.svc-list { --reveal-cover: #F8FAFB; }
.reveal-ready .reveal-row { position: relative; }
.reveal-ready .reveal-row::before {
  content: "";
  position: absolute;
  inset: -1px; /* covers the row's own 1px borders too */
  z-index: 5;
  background: var(--reveal-cover, #FFFFFF);
  transform-origin: right;
  transition: transform 1200ms cubic-bezier(.65, 0, .35, 1);
  transition-delay: calc(var(--r, 0) * 280ms);
  pointer-events: none; /* the row underneath stays clickable */
}
.reveal-ready .reveal-section.in-view .reveal-row::before { transform: scaleX(0); }

/* 3. process: each dashed segment draws from its node to the next, nodes pop as the line
   arrives (480ms apart), each step's text rises with its node. Our line is CSS segments, not
   one SVG path, so it draws as 3 x 480ms segments (1.44s) to stay in step with the nodes;
   a future single-SVG line would use stroke-dasharray/-dashoffset over 1900ms instead. */
.reveal-ready .svc-process .svc-h2 { transition: opacity 750ms var(--reveal-ease), transform 750ms var(--reveal-ease); }
.reveal-ready .reveal-steps > * :is(.svc-step__title, .svc-step__text, .tstep__badge) {
  transition: opacity 750ms var(--reveal-ease), transform 750ms var(--reveal-ease);
  transition-delay: calc(300ms + var(--r, 0) * 480ms);
}
.reveal-ready .svc-process__note { transition: opacity 750ms var(--reveal-ease) 2220ms, transform 750ms var(--reveal-ease) 2220ms; }
.reveal-ready .reveal-section:not(.in-view) :is(.svc-process .svc-h2, .svc-step__title, .svc-step__text, .tstep__badge, .svc-process__note) { opacity: 0; transform: translateY(16px); }
.reveal-ready .svc-step__node { transition: opacity 450ms var(--reveal-spring), transform 450ms var(--reveal-spring); transition-delay: calc(300ms + var(--r, 0) * 480ms); }
.reveal-ready .reveal-section:not(.in-view) .svc-step__node { opacity: 0; transform: scale(0); }
.reveal-ready .svc-step:not(:last-child)::after { transform-origin: left; transition: transform 480ms var(--reveal-ease); transition-delay: calc(300ms + var(--r, 0) * 480ms); }
.reveal-ready .reveal-section:not(.in-view) .svc-step:not(:last-child)::after { transform: scaleX(0); }
.reveal-ready .svc-travel { transition: opacity 600ms ease 1800ms; } /* the glow dot starts once the line is drawn */
.reveal-ready .reveal-section:not(.in-view) .svc-travel { opacity: 0; }
@media (max-width: 639px) { /* phones: the line runs down, so it draws top to bottom */
  .reveal-ready .svc-step:not(:last-child)::after { transform-origin: top; }
  .reveal-ready .reveal-section:not(.in-view) .svc-step:not(:last-child)::after { transform: scaleY(0); }
}

/* 4. list slides in, panel tilts open */
.reveal-ready .reveal-item { transition: opacity 800ms var(--reveal-ease), transform 800ms var(--reveal-ease); transition-delay: calc(var(--r, 0) * 160ms); }
.reveal-ready .qsel__q.reveal-item { /* keep the buttons' own hover/active colour transitions */
  transition-property: opacity, transform, color, background-color;
  transition-duration: 800ms, 800ms, 200ms, 200ms;
  transition-delay: calc(var(--r, 0) * 160ms), calc(var(--r, 0) * 160ms), 0s, 0s;
}
.reveal-ready .reveal-section:not(.in-view) .reveal-item { opacity: 0; transform: translateX(-24px); }
.reveal-ready :is(.qsel, .spectrum) { perspective: 1200px; } /* parents of a .reveal-panel */
.reveal-ready .reveal-panel { transform-origin: top center; transition: opacity 1100ms var(--reveal-ease) 350ms, transform 1100ms var(--reveal-ease) 350ms; }
.reveal-ready .reveal-section:not(.in-view) .reveal-panel { opacity: 0; transform: rotateX(8deg) translateY(16px); }
.reveal-ready .qsel__bar { transition: top 350ms cubic-bezier(.4, 0, .2, 1), height 350ms cubic-bezier(.4, 0, .2, 1), opacity 800ms ease 480ms; }
.reveal-ready .reveal-section:not(.in-view) .qsel__bar { opacity: 0; }

/* 5. converging headline + spring-in badge + slow ambient glow */
.reveal-ready .reveal-from-left { transition: opacity 1100ms var(--reveal-ease), transform 1100ms var(--reveal-ease); transition-delay: calc(var(--r, 0) * 220ms); }
.reveal-ready .reveal-from-right { transition: opacity 1100ms var(--reveal-ease) 220ms, transform 1100ms var(--reveal-ease) 220ms; }
.reveal-ready .reveal-section:not(.in-view) .reveal-from-left { opacity: 0; transform: translateX(-40px); }
.reveal-ready .reveal-section:not(.in-view) .reveal-from-right { opacity: 0; transform: translateX(40px); }
/* the badge springs in on the individual scale/rotate properties, so its own hover transform keeps working */
.reveal-ready .reveal-spring {
  transition-property: opacity, scale, rotate, transform;
  transition-duration: 1100ms, 1100ms, 1100ms, 300ms;
  transition-timing-function: var(--reveal-spring), var(--reveal-spring), var(--reveal-spring), cubic-bezier(.2, .8, .2, 1);
  transition-delay: 450ms, 450ms, 450ms, 0s;
}
.reveal-ready .reveal-section:not(.in-view) .reveal-spring { opacity: 0; scale: 0.4; rotate: -25deg; }
.reveal-ready .reveal-ambient { transition: opacity 1800ms ease 600ms; }
.reveal-ready .reveal-section:not(.in-view) .reveal-ambient { opacity: 0; }

/* ===== Odoo ERP page (/services/odoo-erp) ===== */

/* Hosting: a 3-station spectrum. Stations are 28px buttons (tap target) drawing a 20px dot,
   so the track runs between dot centres (14px in from each end) and fill % lands on a dot. */
.hosting { background: #F8FAFB; padding-block: clamp(48px, 6vw, 80px); }
.hosting h2 {
  margin: 0 0 14px;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  font-size: clamp(1.5rem, 1.05rem + 2.8vw, 2.75rem);
  color: var(--navy);
}
.hosting__intro { max-width: 56ch; margin: 0 auto clamp(40px, 5vw, 56px); text-align: center; font-size: 1.02rem; line-height: 1.65; color: var(--gray); }
.spectrum { max-width: 760px; margin-inline: auto; }
.spectrum__track { position: relative; height: 4px; margin: 0 14px; border-radius: 2px; background: rgba(11, 37, 69, 0.1); }
.spectrum__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), #003E52);
  transition: width 450ms cubic-bezier(.2, .8, .2, 1);
}
.spectrum__stations { display: flex; justify-content: space-between; margin-top: -16px; } /* 28px buttons centred on the 4px track */
.station {
  position: relative;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.station::before { /* the visible 20px dot */
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 2px solid rgba(11, 37, 69, 0.2);
  background: #FFFFFF;
  transition: border-color 300ms ease, background-color 300ms ease, transform 300ms ease, box-shadow 300ms ease;
}
.station.is-active::before { border-color: var(--teal); background: var(--teal); transform: scale(1.25); box-shadow: 0 0 0 6px rgba(19, 168, 158, 0.18); }
.station:focus-visible { outline: 3px solid var(--teal-ink); outline-offset: 4px; }
.station__label { /* 28px below the dot (dot top = 4px) */
  position: absolute;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.82rem;
  color: rgba(11, 37, 69, 0.45);
  transition: color 300ms ease;
}
.station:first-child .station__label { left: 0; transform: none; text-align: left; }
.station:last-child .station__label { left: auto; right: 0; transform: none; text-align: right; }
.station.is-active .station__label { color: var(--navy); }
.spectrum__axis { display: flex; justify-content: space-between; margin-top: 56px; text-transform: uppercase; font-size: 0.74rem; letter-spacing: 0.04em; color: #9AA7B4; }
.spectrum__panel {
  position: relative;
  overflow: hidden;
  min-height: 150px;
  margin-top: 48px;
  padding: 36px;
  border-radius: 24px;
  border: 1px solid rgba(11, 37, 69, 0.08);
  background: #FFFFFF;
  box-shadow: 0 18px 40px -24px rgba(11, 37, 69, 0.25);
}
.spectrum__slide { display: none; }
.spectrum__slide.is-active { display: block; animation: spectrum-slide 450ms cubic-bezier(.2, .8, .2, 1); }
@keyframes spectrum-slide { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.spectrum__slide h3 { margin: 0 0 10px; font-family: var(--font-heading); font-weight: 800; font-size: 1.3rem; color: var(--navy); }
.spectrum__slide .suits { margin: 0 0 18px; max-width: 52ch; font-size: 0.96rem; line-height: 1.65; color: var(--gray); }
.spectrum__slide .example { display: inline-block; padding: 6px 14px; border-radius: 999px; background: rgba(19, 168, 158, 0.1); color: var(--teal-text); font-size: 0.85rem; font-weight: 700; }

/* click hint on "Odoo Community": a system arrow pointer whose tip lands on the dot, tapping */
.click-hint { position: absolute; top: 8px; left: 4px; width: 26px; height: 26px; pointer-events: none; z-index: 1; transition: opacity 300ms ease; }
.click-hint svg { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 20% 12%; animation: cursorTap 1.6s ease-in-out infinite; }
.click-hint .ripple { position: absolute; top: -3px; left: -1px; width: 12px; height: 12px; border: 2px solid var(--teal); border-radius: 50%; animation: cursorRipple 1.6s ease-out infinite; animation-delay: 0.6s; }
.click-hint.is-gone { opacity: 0; }
@keyframes cursorTap { 0%, 100% { transform: none; } 50% { transform: translateY(5px) scale(0.92); } }
@keyframes cursorRipple { 0% { transform: scale(0.4); opacity: 0.9; } 100% { transform: scale(1.8); opacity: 0; } }

@media (max-width: 639px) {
  .hosting { padding-block: 40px; }
  /* labels wrap instead of colliding: left / centred / right, each with its own width */
  .station__label { white-space: normal; width: max-content; line-height: 1.3; }
  .station:first-child .station__label { max-width: 96px; }
  .station:nth-child(2) .station__label { max-width: 132px; text-align: center; }
  .station:last-child .station__label { max-width: 84px; }
  .spectrum__slide .example { border-radius: 14px; } /* may wrap to two lines here */
  .spectrum__axis { margin-top: 72px; }
  .spectrum__panel { margin-top: 32px; padding: 24px; border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .click-hint svg, .click-hint .ripple { animation: none; } /* static, still a visible hint */
  .click-hint .ripple { opacity: 0.6; }
  .spectrum__fill, .station::before, .station__label { transition: none; }
  .spectrum__slide.is-active { animation: none; }
}

/* Odoo ERP page (the .erp-hero / .erp-h2 / .erp-intro / .erp-case pieces are shared by the
   other service pages, e.g. /services/custom-software): hero -- same columns and gap as Home's hero */
.erp-hero { padding-block: clamp(32px, 4vw, 56px); }
.erp-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: clamp(32px, 4vw, 64px); row-gap: 32px; align-items: center; }
.erp-hero h1 { margin: 0 0 20px; font-size: clamp(2rem, 3.8vw, 3.2rem); letter-spacing: -0.03em; line-height: 1.12; }
.erp-hero__body { margin: 0 0 32px; max-width: 56ch; font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.7; color: var(--gray); }
.erp-hero__body strong { font-weight: 600; color: var(--navy); }
.erp-hero__media { aspect-ratio: 1 / 1; border-radius: 24px; overflow: hidden; }
.erp-hero__media :is(video, img) { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; } /* white background melts into the page */
@media (max-width: 639px) { .erp-hero { padding-block: 24px 40px; } } /* after the base rule, so it wins */
@media (max-width: 899px) {
  .erp-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .erp-hero__media { order: -1; width: 100%; max-width: 420px; margin-inline: auto; }
}
.erp-cover .erp-h2, .erp-industries .erp-h2, .cs-compare .erp-h2, .cs-tools .erp-h2, .ai-two .erp-h2, .sm-strip .erp-h2, .sm-week .erp-h2, .sm-where .erp-h2 { text-align: center; }
.cs-compare .erp-h2, .cs-tools .erp-h2, .ai-two .erp-h2, .sm-week .erp-h2 { margin-bottom: 14px; }
.erp-cover .erp-h2 { margin-bottom: 14px; }
.erp-intro { max-width: 56ch; margin: 0 auto clamp(32px, 4vw, 48px); text-align: center; font-size: 1.02rem; line-height: 1.65; color: var(--gray); text-wrap: balance; } /* no one-word last lines */

/* What an Odoo project covers: a hub with 8 cards orbiting it (36s a turn). The ring turns;
   each card counter-rotates by the same angle, so it travels the circle but stays upright.
   The dotted line is part of each card's arm, so it travels with the card. */
.orbit { --R: 268px; position: relative; max-width: 760px; height: 650px; margin-inline: auto; }
.orbit__hub { position: absolute; left: 50%; top: 50%; z-index: 2; width: 150px; height: 150px; translate: -50% -50%; }
.orbit__glow {
  position: absolute;
  inset: -80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(113, 75, 103, 0.30) 0%, rgba(113, 75, 103, 0.10) 40%, rgba(113, 75, 103, 0) 68%);
  animation: orbit-breathe 3.2s ease-in-out infinite;
  pointer-events: none;
}
.orbit__shadow { position: absolute; left: 50%; bottom: -14px; width: 120px; height: 18px; translate: -50% 0; border-radius: 50%; background: rgba(11, 37, 69, 0.16); filter: blur(8px); }
.orbit__logo { position: relative; width: 150px; height: 150px; border-radius: 50%; overflow: hidden; }
.orbit__logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.orbit__logo .img-fallback { border-radius: 50%; border: 2px dashed rgba(113, 75, 103, 0.45); background: rgba(255, 255, 255, 0.85); font-size: 12px; padding: 20px; color: #714B67; }
.orbit__ring { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; animation: orbit-spin 36s linear infinite; }
.orbit__item { position: absolute; left: 50%; top: 50%; width: 0; height: 0; rotate: var(--deg); }
.orbit__line { position: absolute; left: 0; top: -3px; width: var(--R); height: 6px; overflow: visible; pointer-events: none; } /* from the hub centre (under the hub) to the card centre */
.orbit__line line { stroke: rgba(11, 37, 69, 0.18); stroke-width: 1.5px; stroke-dasharray: 1 6; stroke-linecap: round; transition: stroke 250ms ease; }
.orbit__node { fill: var(--teal); opacity: 0; transition: opacity 250ms ease; }
.orbit__item:hover .orbit__line line { stroke: var(--teal); stroke-dasharray: none; } /* hovering a card lights its connector */
.orbit__item:hover .orbit__node { opacity: 1; }
.orbit__pos { position: absolute; left: var(--R); top: 0; }
.orbit__card {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  width: 158px; /* fixed, never content-sized */
  min-height: 104px; /* = the tallest card (3-line text), so all 8 are one size */
  padding: 14px 12px;
  translate: -50% -50%;
  rotate: calc(var(--deg) * -1);
  border-radius: 16px;
  border: 1px solid rgba(11, 37, 69, 0.1);
  background: #FFFFFF;
  box-shadow: 0 10px 24px -14px rgba(11, 37, 69, 0.15);
  text-align: center;
  animation: orbit-counter 36s linear infinite;
  transition: border-color 250ms ease, box-shadow 250ms ease, translate 250ms ease;
}
.orbit__card h3 { margin: 0 0 4px; font-family: var(--font-heading); font-weight: 700; font-size: 0.82rem; color: var(--navy); }
.orbit__card p { margin: 0; font-size: 0.74rem; line-height: 1.4; color: var(--gray); }
.orbit__card:hover { border-color: var(--teal); box-shadow: 0 14px 30px -14px rgba(19, 168, 158, 0.35); translate: -50% calc(-50% - 3px); }
.orbit:hover :is(.orbit__ring, .orbit__card) { animation-play-state: paused; }
.reveal-ready .reveal-section:not(.in-view) :is(.orbit__ring, .orbit__card) { animation-play-state: paused; } /* starts once scrolled into view */
@keyframes orbit-spin { to { rotate: 360deg; } }
@keyframes orbit-counter { from { rotate: calc(var(--deg) * -1); } to { rotate: calc(var(--deg) * -1 - 360deg); } }
@keyframes orbit-breathe { 0%, 100% { scale: 0.92; opacity: 0.75; } 50% { scale: 1.06; opacity: 1; } }
@media (max-width: 1023px) { .orbit { --R: 245px; height: 610px; } }

/* below 860px the radial geometry does not fit: the same railed list as Home's problem section */
.erp-steps { display: none; position: relative; max-width: 640px; margin: 0 auto; padding: 0 0 0 26px; list-style: none; }
.erp-steps::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1.5px; background: linear-gradient(180deg, #13A89E 0%, rgba(19, 168, 158, 0.15) 100%); }
.erp-steps__item { position: relative; padding-bottom: 22px; }
.erp-steps__item:last-child { padding-bottom: 0; }
.erp-steps__item::before { content: ""; position: absolute; left: -30px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: #FFFFFF; border: 1.5px solid var(--teal-ink); }
.erp-steps h3 { margin: 0 0 4px; font-family: var(--font-heading); font-weight: 700; font-size: 1.02rem; color: var(--navy); }
.erp-steps p { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--gray); }
@media (max-width: 859px) {
  .orbit { display: none; }
  .erp-steps { display: block; }
}

/* Industries: plain pill links */
.erp-industries { background: #F8FAFB; border-top: 1px solid rgba(11, 37, 69, 0.06); } /* separates it from the tinted hosting section above */
.erp-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; max-width: 820px; margin: 0 auto; padding: 0; list-style: none; }
.erp-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(11, 37, 69, 0.1);
  background: #FFFFFF;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--navy);
  text-decoration: none;
  transition: border-color 200ms ease, color 200ms ease;
}
.erp-pill__icon { opacity: 0.5; }
.erp-pill:hover { border-color: var(--teal-ink); color: var(--teal-text); }
.erp-pill:focus-visible { outline: 3px solid var(--teal-ink); outline-offset: 3px; }

/* Featured case study: text left, screenshot right */
.erp-case__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: clamp(32px, 4vw, 64px); row-gap: 28px; align-items: center; }
.erp-case .erp-h2 { margin-bottom: 16px; }
.erp-case__body { margin: 0 0 20px; max-width: 52ch; font-size: 1.02rem; line-height: 1.7; color: var(--gray); }
.erp-case__link { margin: 0; }
.erp-case__media { aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: #F5F8FA; box-shadow: 0 24px 48px -28px rgba(11, 37, 69, 0.35); }
.erp-case__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 899px) { .erp-case__grid { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .orbit__ring, .orbit__card, .orbit__glow { animation: none; } /* cards sit still, upright, in their default places */
  .orbit__card, .orbit__line line, .orbit__node { transition: none; }
  .erp-pill { transition: none; }
}

/* ===== Custom Software & Mobile page (/services/custom-software) ===== */
/* Custom build or ready-made: one rounded panel, two full-bleed halves, a VS badge on the seam.
   The badge lives in the right half (so it sits on that half's leading edge in both layouts). */
.cs-compare { background: #F8FAFB; }
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1000px; margin-inline: auto; border-radius: 24px; overflow: hidden; border: 1px solid rgba(11, 37, 69, 0.08); box-shadow: 0 24px 48px -32px rgba(11, 37, 69, 0.3); }
.compare__side { position: relative; padding: clamp(28px, 4vw, 48px); }
.compare__side--ready { background: #FFFFFF; color: var(--navy); }
.compare__side--custom { background: linear-gradient(135deg, #003E52, #006E8C); color: #FFFFFF; }
.compare__side h3 { margin: 0 0 20px; font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.1rem, 1.6vw, 1.3rem); letter-spacing: -0.01em; }
.compare__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.compare__list li { position: relative; padding-left: 30px; font-size: 0.98rem; line-height: 1.55; }
.compare__side--ready .compare__list li { color: var(--gray); }
.compare__list li::before { /* checkmark */
  content: "";
  position: absolute;
  left: 4px;
  top: 0.38em;
  width: 11px;
  height: 6px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  rotate: -45deg;
}
.compare__side--ready .compare__list li::before { color: var(--teal-ink); }
.compare__side--custom .compare__list li::before { color: #8FE3D8; } /* mint */
.compare__vs {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  translate: -50% -50%;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 8px 22px -6px rgba(11, 37, 69, 0.35);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--navy);
}
@media (max-width: 759px) {
  .compare { grid-template-columns: minmax(0, 1fr); }
  .compare__vs { left: 50%; top: 0; } /* on the horizontal seam between the stacked halves */
  .compare__side--custom { padding-top: clamp(40px, 6vw, 56px); } /* room under the badge */
}

/* Mobile apps: text left, the mobile illustration right (transparent, sits straight on the page) */
.cs-mobile__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(40px, 6vw, 96px); row-gap: 28px; align-items: center; } /* it is also the .container, so no max-width here */
.cs-mobile .erp-h2 { margin-bottom: 16px; }
.cs-mobile__body { margin: 0; max-width: 54ch; font-size: 1.02rem; line-height: 1.7; color: var(--gray); }
.cs-mobile__media { width: clamp(280px, 32vw, 420px); aspect-ratio: 1 / 1; }
.cs-mobile__media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cs-mobile__media .img-fallback { border-radius: 24px; } /* only if the file is missing */
@media (max-width: 859px) {
  .cs-mobile__grid { grid-template-columns: minmax(0, 1fr); }
  .cs-mobile__media { order: -1; width: min(320px, 80%); margin-inline: auto; }
}

/* Tools we use: deliberately flat -- text tabs over a hairline with a sliding underline. No
   box, border, fill, shadow or icon; it should read as plain content, not a component. */
.cs-tools { background: #F8FAFB; }
.reveal { max-width: 620px; margin-inline: auto; }
.reveal__tabs { position: relative; display: flex; justify-content: center; gap: clamp(20px, 4vw, 40px); border-bottom: 1px solid rgba(11, 37, 69, 0.1); }
.reveal__tab {
  padding: 0 2px 16px;
  border: 0;
  background: none;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.96rem;
  color: rgba(11, 37, 69, 0.4);
  cursor: pointer;
  transition: color 250ms ease;
}
.reveal__tab:hover, .reveal__tab.is-active { color: var(--navy); }
.reveal__tab:focus-visible { outline: 3px solid var(--teal-ink); outline-offset: 2px; border-radius: 2px; }
.reveal__indicator { position: absolute; bottom: -1px; left: 0; width: 0; height: 2px; border-radius: 2px; background: var(--teal); transition: left 350ms cubic-bezier(.2, .8, .2, 1), width 350ms cubic-bezier(.2, .8, .2, 1); }
.reveal__content { display: none; padding-top: clamp(32px, 4.5vw, 44px); text-align: center; }
.reveal__content.is-active { display: block; animation: tool-in 420ms cubic-bezier(.2, .8, .2, 1); }
@keyframes tool-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.reveal__content p { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.15rem, 1.9vw, 1.4rem); line-height: 1.5; color: var(--navy); }
.reveal__content .accent { color: var(--teal-ink); } /* #13A89E is ~2.9:1 at this size, below AA; --teal-ink passes */

@media (prefers-reduced-motion: reduce) { /* still works, just near-instant */
  .reveal__indicator, .reveal__tab { transition-duration: 80ms; }
  .reveal__content.is-active { animation-duration: 80ms; }
}

/* ===== AI & Analytics page (/services/ai-analytics) ===== */

/* Pilot programme: a dark olive panel; the only teal-ish accent is #8FE3D6 on the badge text and the bold label */
.pilot { position: relative; overflow: hidden; }
.pilot__panel { position: relative; overflow: hidden; padding: clamp(40px, 5.5vw, 64px); border-radius: 32px; background: linear-gradient(135deg, #1a1f14, #3a3420); }
.pilot__panel::before { content: ""; position: absolute; inset: 0; background: radial-gradient(45% 60% at 15% 20%, rgba(26, 31, 20, 0.5), transparent 60%); pointer-events: none; } /* olive depth, top-left */
.pilot__inner { position: relative; z-index: 1; max-width: 680px; }
.pilot__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 18px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8FE3D6;
}
.pilot h2 { margin: 0 0 16px; font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; font-size: clamp(1.6rem, 2.8vw, 2.1rem); color: #FFFFFF; }
.pilot__inner > p { margin: 0 0 16px; max-width: 56ch; font-size: 0.98rem; line-height: 1.75; color: rgba(255, 255, 255, 0.75); }
.pilot__inner > p.pilot__suits { margin-bottom: 28px; font-size: 0.88rem; color: rgba(255, 255, 255, 0.6); }
.pilot__suits :is(b, strong) { color: #8FE3D6; font-weight: 700; }
/* white pill on the dark panel: the site's pill button, recoloured */
.pilot__btn, .pilot__btn:hover, .pilot__btn:active { background: #FFFFFF; color: #1a1f14; border-color: #FFFFFF; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.4); }
.pilot__btn::before { display: none; } /* the glass gloss is for the dark gradient pill */
.pilot__btn .btn-chip, .pilot__btn:hover .btn-chip { background: rgba(26, 31, 20, 0.1); border-color: rgba(26, 31, 20, 0.12); }
.pilot__btn:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }

/* AI and Social heroes: their own heading size, a slightly smaller stacked media */
:is(.ai-hero, .sm-hero) h1 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.14; }
@media (max-width: 899px) { :is(.ai-hero, .sm-hero) .erp-hero__media { max-width: 380px; } }

/* Two things, clearly separated: one list, a "stamp" per row -- a solid teal stamp for what is
   live, a dashed grey outline (draft) for what is still R&D */
.ai-two { background: #F8FAFB; }
.stamps { max-width: 680px; margin: 0 auto; padding: 0; list-style: none; }
.stamp-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 20px; align-items: start; padding-block: 24px; }
.stamp-row + .stamp-row { border-top: 1px solid rgba(11, 37, 69, 0.1); }
.stamp { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; }
.stamp--live { background: linear-gradient(135deg, #13A89E, #0E8C84); box-shadow: 0 10px 20px -8px rgba(19, 168, 158, 0.55); }
.stamp--draft { border: 2px dashed #B9C2CA; color: #8A96A3; }
.stamp-row__head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 4px; margin-bottom: 6px; }
.stamp-row h3 { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 1.08rem; color: var(--navy); }
.stamp-row__tag { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.stamp-row__tag--live { color: var(--teal-text); } /* #13A89E is 2.9:1 at 11.5px, below AA */
.stamp-row__tag--draft { color: var(--gray); }
.stamp-row p { margin: 0; font-size: 0.96rem; line-height: 1.6; color: var(--gray); }
@media (max-width: 559px) {
  .stamp-row { grid-template-columns: 42px minmax(0, 1fr); column-gap: 14px; padding-block: 20px; }
  .stamp { width: 42px; height: 42px; }
  .stamp svg { width: 18px; height: 18px; }
}

/* ===== Social Media & Advertising page (/services/social-media-advertising) ===== */
/* What's included: a dark film strip that scrolls sideways inside its own section */
.sm-strip { background: #0D1B24; }
.sm-strip .erp-h2 { color: #FFFFFF; }
.strip__track {
  display: flex;
  gap: 14px;
  margin: 0;
  padding: 0 0 6px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch; /* momentum on older iOS; default everywhere else */
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.strip__track::-webkit-scrollbar { display: none; }
.strip__track:focus-visible { outline: 3px solid #8FE3D6; outline-offset: 4px; border-radius: 6px; }
@media (min-width: 1180px) { .strip__track { justify-content: center; } } /* all five fit: centre them */
.frame { position: relative; flex: 0 0 220px; padding: 34px 16px 34px; border-radius: 4px; background: #17262F; scroll-snap-align: start; }
.frame::before, .frame::after { /* sprocket holes along the top and bottom edges */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 14px;
  background: repeating-linear-gradient(90deg, #0D1B24 0 8px, transparent 8px 20px);
  background-size: 100% 6px;
  background-position: 0 center;
  background-repeat: repeat-x;
}
.frame::before { top: 0; }
.frame::after { bottom: 0; }
.frame__num { position: absolute; top: 18px; right: 14px; font-family: var(--font-heading); font-weight: 700; font-size: 0.72rem; color: rgba(255, 255, 255, 0.3); }
.frame__icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 16px; border-radius: 10px; background: rgba(19, 168, 158, 0.14); color: #8FE3D6; }
.frame h3 { margin: 0 0 8px; font-family: var(--font-heading); font-weight: 700; font-size: 1rem; line-height: 1.3; color: #FFFFFF; }
.frame p { margin: 0; font-size: 0.88rem; line-height: 1.55; color: rgba(255, 255, 255, 0.68); }
.strip__hint { margin: 18px 0 0; text-align: center; font-size: 0.8rem; color: rgba(255, 255, 255, 0.6); } /* 35% white is below AA on this background */
.strip.fits .strip__hint { display: none; } /* script.js adds .fits when every frame is already visible */

/* How we work, week to week: four stops on a dashed line */
.sm-week { background: #F8FAFB; }
.week { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; row-gap: 32px; max-width: 820px; margin: 0 auto; padding: 0; list-style: none; }
.week::before { content: ""; position: absolute; top: 27px; left: 12.5%; right: 12.5%; border-top: 2px dashed rgba(19, 168, 158, 0.55); transform-origin: left; }
.week__stop { position: relative; flex: 1 1 0; min-width: 140px; padding-inline: 8px; text-align: center; }
.week__node {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  border: 2px solid #D5DCE2;
  background: #FFFFFF;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.74rem;
  color: var(--navy);
}
.week__stop.is-now .week__node { border-color: transparent; background: linear-gradient(135deg, #13A89E, #0E8C84); color: #FFFFFF; box-shadow: 0 10px 22px -8px rgba(19, 168, 158, 0.6); }
.week__stop h3 { margin: 0 0 6px; font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; color: var(--navy); }
.week__stop p { margin: 0 auto; max-width: 22ch; font-size: 0.92rem; line-height: 1.55; color: var(--gray); }
@media (max-width: 639px) {
  .week { flex-direction: column; align-items: center; }
  .week::before { display: none; }
  .week__stop { flex: none; width: 100%; }
}

/* Where you show up: three text cards fanned like a hand of cards */
.fan { position: relative; height: 300px; max-width: 700px; margin: 0 auto; padding: 0; list-style: none; }
.fan__card {
  position: absolute;
  top: 40px;
  left: 50%;
  width: 220px;
  margin-left: -110px;
  padding: 26px 22px;
  border-radius: 18px;
  border: 1px solid rgba(11, 37, 69, 0.08);
  background: #FFFFFF;
  box-shadow: 0 18px 40px -22px rgba(11, 37, 69, 0.35);
  translate: var(--x, 0) 0;
  rotate: var(--rot, 0deg);
  transition: translate 300ms ease, rotate 300ms ease, box-shadow 300ms ease;
}
.fan__card--left { --x: -205px; --rot: -8deg; z-index: 1; } /* far enough out that each side card's name stays readable */
.fan__card--centre { z-index: 2; }
.fan__card--right { --x: 205px; --rot: 8deg; z-index: 1; }
@media (max-width: 899px) { /* tablets: narrower cards in a tighter fan, names still clear of the centre card */
  .fan__card { width: 190px; margin-left: -95px; padding: 22px 18px; }
  .fan__card--left { --x: -175px; }
  .fan__card--right { --x: 175px; }
}
.fan__card:hover { z-index: 3; rotate: 0deg; translate: var(--x, 0) -8px; box-shadow: 0 28px 50px -22px rgba(11, 37, 69, 0.45); }
.fan__card h3 { margin: 0 0 10px; font-family: var(--font-heading); font-weight: 800; font-size: 1.2rem; color: var(--navy); }
.fan__card p { margin: 0; font-size: 0.94rem; line-height: 1.6; color: var(--gray); }
@media (max-width: 639px) {
  .fan { height: auto; display: grid; justify-items: center; gap: 16px; }
  .fan__card { position: static; width: 100%; max-width: 280px; margin: 0; translate: none; rotate: none; }
  .fan__card:hover { translate: 0 -4px; rotate: none; }
}

/* reveals for this page's sections (shared system: html.reveal-ready + .in-view) */
.reveal-ready .reveal-section:not(.in-view) .week::before { transform: scaleX(0); }
.reveal-ready .week::before { transition: transform 1200ms cubic-bezier(.2, .8, .2, 1) 200ms; }
.reveal-ready .week__node { transition: opacity 450ms var(--reveal-spring), transform 450ms var(--reveal-spring); transition-delay: calc(200ms + var(--r, 0) * 300ms); }
.reveal-ready .reveal-section:not(.in-view) .week__node { opacity: 0; transform: scale(0); }
.reveal-ready .week__stop :is(h3, p) { transition: opacity 700ms var(--reveal-ease), transform 700ms var(--reveal-ease); transition-delay: calc(300ms + var(--r, 0) * 300ms); }
.reveal-ready .reveal-section:not(.in-view) .week__stop :is(h3, p) { opacity: 0; transform: translateY(14px); }
/* fanned cards deal out from one flat stack: an entry animation (not a transition) so the
   300ms hover transition stays snappy afterwards; left first, then centre, then right */
.reveal-ready .reveal-section:not(.in-view) .fan__card { opacity: 0; }
.reveal-ready .reveal-section.in-view .fan__card { animation: fan-deal 900ms cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(250ms + var(--r) * 160ms); }
@keyframes fan-deal { from { opacity: 0; translate: 0 24px; rotate: 0deg; } }
@media (max-width: 639px) { @keyframes fan-deal { from { opacity: 0; translate: 0 16px; } } }
@media (prefers-reduced-motion: reduce) {
  .fan__card { transition: none; }
}

/* ===== Work page (/work) ===== */
/* shared glass bubble: same specular highlight and rim light as Home's .work__card */
.glass {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  box-shadow: 0 1px 1px rgba(255, 255, 255, 0.9) inset, 0 20px 40px -20px rgba(11, 37, 69, 0.25);
}
.glass::before { /* specular highlight */
  content: "";
  position: absolute;
  top: -50%;
  left: -10%;
  width: 120%;
  height: 70%;
  background: radial-gradient(60% 100% at 50% 0%, rgba(255, 255, 255, 0.6), transparent 70%);
  z-index: 1;
  pointer-events: none;
}
.glass::after { /* rim-light border -- mask-composite:exclude shows only the ring, not the fill */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.05) 60%, rgba(255, 255, 255, 0.3) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 1;
  pointer-events: none;
}
.glass > * { position: relative; z-index: 2; } /* content above the highlight */

/* 1. Introduction */
.work-intro { padding-block: clamp(72px, 9vw, 110px); text-align: center; }
.work-intro h1 { max-width: 16ch; margin: 0 auto 20px; font-size: clamp(2.2rem, 5vw, 3.8rem); letter-spacing: -0.035em; line-height: 1.08; }
.work-intro__body { max-width: 52ch; margin: 0 auto; font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.7; color: var(--gray); }

/* 2. By the numbers */
.work-stats { padding-block: clamp(48px, 6vw, 72px); background: radial-gradient(40% 70% at 10% 30%, rgba(19, 168, 158, 0.12), transparent 60%), radial-gradient(40% 70% at 90% 70%, rgba(0, 62, 82, 0.10), transparent 60%), #FFFFFF; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.stat { padding: 28px 16px; border-radius: 20px; border-color: rgba(255, 255, 255, 0.65); background: rgba(255, 255, 255, 0.5); -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%); box-shadow: 0 1px 1px rgba(255, 255, 255, 0.9) inset, 0 20px 40px -22px rgba(11, 37, 69, 0.22); text-align: center; }
.stat__num { margin: 0 0 6px; font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.8rem, 3.4vw, 2.6rem); letter-spacing: -0.03em; line-height: 1.1; color: var(--navy); }
.stat__label { margin: 0; font-size: 0.8rem; color: var(--gray); }
@media (max-width: 759px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* section header row: heading + count pill */
.work-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: clamp(40px, 5vw, 56px); }
.work-head h2 { margin: 0; font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; font-size: clamp(1.5rem, 1.05rem + 2.8vw, 2.75rem); color: var(--navy); }
.work-count { flex: none; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(11, 37, 69, 0.1); background: rgba(255, 255, 255, 0.7); font-size: 0.82rem; font-weight: 700; color: var(--navy); }

/* 3. ERP Projects: bento grid of glass tiles */
.work-erp { overflow: hidden; padding-block: clamp(64px, 8vw, 100px); background: radial-gradient(45% 55% at 15% 20%, rgba(19, 168, 158, 0.14), transparent 60%), radial-gradient(40% 50% at 85% 80%, rgba(11, 37, 69, 0.12), transparent 60%), #F4F8FA; }
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 160px; gap: 18px; }
.bento-card { display: flex; align-items: flex-end; padding: 18px 20px; border-radius: 22px; color: inherit; text-decoration: none; transition: transform 300ms ease, box-shadow 300ms ease; }
.bento-card--xl { grid-column: span 2; grid-row: span 2; }
.bento-card--tall { grid-row: span 2; }
.bento-card--wide { grid-column: span 2; }
.bento-card:hover { transform: translateY(-5px); box-shadow: 0 1px 1px rgba(255, 255, 255, 0.9) inset, 0 28px 48px -20px rgba(11, 37, 69, 0.32); }
.bento-card:focus-visible, .web-card:focus-visible { outline: 3px solid var(--teal-ink); outline-offset: 3px; }
.bento-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.bento-card__tag { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #0E8C84; }
.bento-card__title { font-family: var(--font-heading); font-weight: 800; font-size: 1.05rem; line-height: 1.25; color: var(--navy); }
.bento-card--xl .bento-card__title { font-size: clamp(1.3rem, 2vw, 1.7rem); }
.bento-card__chip { margin-top: 4px; padding: 3px 10px; border-radius: 999px; background: rgba(11, 37, 69, 0.08); font-size: 0.72rem; font-weight: 700; color: var(--navy); }
/* real screenshot dropped in: photo fills the tile, a scrim keeps the caption readable over it.
   No <img> (not sourced yet, or a confidential client) -- unaffected, stays the plain glass tile. */
.bento-card__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.bento-card__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 35%, rgba(11, 37, 69, 0.82) 100%); pointer-events: none; }
.bento-card:has(.bento-card__media) .bento-card__tag { color: #8FF3E8; }
.bento-card:has(.bento-card__media) .bento-card__title { color: #FFFFFF; }
.bento-card:has(.bento-card__media) .bento-card__chip { background: rgba(255, 255, 255, 0.2); color: #FFFFFF; }
@media (max-width: 859px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; } /* backfill the hole beside the tall tile */
  .bento-card--xl { grid-row: span 1; } /* xl becomes a 2-wide tile */
}
@media (max-width: 559px) {
  .bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .bento-card, .bento-card--xl, .bento-card--tall, .bento-card--wide { grid-column: span 1; grid-row: span 1; aspect-ratio: 4 / 3; }
}

/* 4. Web App: a sideways-scrolling gallery of glass cards */
.work-web { padding-block: clamp(64px, 8vw, 100px); background: radial-gradient(40% 55% at 85% 15%, rgba(19, 168, 158, 0.12), transparent 60%), radial-gradient(45% 55% at 10% 85%, rgba(0, 110, 140, 0.10), transparent 60%), #FFFFFF; }
.gallery__track {
  display: flex;
  gap: 22px;
  margin: 0;
  padding: 6px 2px 24px; /* room for the cards' shadows inside the scroll box */
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track:focus-visible { outline: 3px solid var(--teal-ink); outline-offset: 4px; border-radius: 8px; }
.gallery__track > li { flex: 0 0 320px; scroll-snap-align: start; }
.web-card { display: flex; flex-direction: column; height: 100%; border-radius: 24px; background: rgba(255, 255, 255, 0.5); color: inherit; text-decoration: none; transition: transform 300ms ease, box-shadow 300ms ease; }
.web-card:hover { transform: translateY(-5px); }
.web-card__media { margin: 14px 14px 0; aspect-ratio: 16 / 10; border-radius: 16px; background: linear-gradient(160deg, #EEF3F7, #DCE6EE); } /* placeholder until real screenshots */
.web-card__media img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.web-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 18px 20px; }
.web-card__title { font-family: var(--font-heading); font-weight: 800; font-size: 1.1rem; color: var(--navy); }
.web-card__desc { font-size: 0.9rem; line-height: 1.55; color: var(--gray); }
.gallery__hint { margin: 10px 0 0; text-align: center; font-size: 0.82rem; color: var(--gray); }
.gallery.fits .gallery__hint { display: none; }

/* 5. Mobile App: an honest gap, with a slowly turning dashed ring */
.work-mobile { padding-block: clamp(64px, 8vw, 100px); background: #F8FAFB; text-align: center; }
.ring { display: grid; place-items: center; width: 100px; height: 100px; margin: 0 auto 28px; border-radius: 50%; border: 2px dashed rgba(19, 168, 158, 0.4); animation: ring-spin 16s linear infinite; }
.ring__icon { display: grid; color: var(--teal-ink); animation: ring-spin 16s linear infinite reverse; } /* counter-rotates: the phone stays upright */
@keyframes ring-spin { to { rotate: 360deg; } }
.work-mobile h2 { max-width: 28ch; margin: 0 auto 18px; font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; font-size: clamp(1.5rem, 1.05rem + 2vw, 2.3rem); color: var(--navy); }
.work-mobile p { max-width: 62ch; margin: 0 auto 16px; font-size: 1rem; line-height: 1.7; color: var(--gray); }
.work-mobile p:last-of-type { margin-bottom: 30px; }

/* 6. Industries */
.work-industries { padding-block: clamp(56px, 7vw, 88px); text-align: center; }
.work-industries h2 { margin: 0 0 28px; font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; font-size: clamp(1.5rem, 1.05rem + 2.8vw, 2.75rem); color: var(--navy); }
.work-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 760px; margin: 0 auto; padding: 0; list-style: none; }
.work-pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(11, 37, 69, 0.1); background: #F8FAFB; font-family: var(--font-heading); font-weight: 600; font-size: 0.92rem; color: var(--navy); transition: border-color 200ms ease; }
.work-pill::after { content: ""; order: -1; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); } /* the small teal dot (::before is the reveal curtain) */
.work-pill:hover { border-color: var(--teal-ink); }

/* reveal timing: tiles and stats come in quicker than text lines */
.reveal-ready .bento-card.reveal-line, .reveal-ready .stat.reveal-line { transition-delay: calc(var(--r, 0) * 70ms); }
.reveal-ready .bento-card.reveal-line { transition-property: opacity, transform, box-shadow; transition-duration: 900ms, 900ms, 300ms; }

@media (prefers-reduced-motion: reduce) {
  .ring, .ring__icon { animation: none; } /* both frozen at rest: the phone upright */
  .bento-card, .web-card, .work-pill { transition: none; }
  .bento-card:hover, .web-card:hover { transform: none; }
}

/* ===== Case study template (/work/<slug>, generated by source/case-studies/build.py) ===== */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cs-hero { padding-block: clamp(24px, 3vw, 40px); }
/* case-study sections run tighter than the service pages: hero and problem are both white, so
   full padding on each stacked into ~190px of empty space between them */
.cs-problem, .cs-built, .cs-changed, .cs-quote { padding-block: clamp(40px, 5vw, 64px); }
.cs-problem { padding-top: clamp(24px, 3vw, 40px); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 clamp(20px, 3vw, 32px); padding: 0; list-style: none; font-size: 0.85rem; color: var(--gray); }
.breadcrumb li + li::before { content: "/"; margin-right: 8px; color: #B9C2CA; }
.breadcrumb a { color: var(--gray); text-decoration: none; }
.breadcrumb a:hover { color: var(--teal-text); text-decoration: underline; }
.breadcrumb [aria-current] { font-weight: 700; color: var(--navy); }

/* 1. product-display hero: screenshot left, a compact spec sheet right */
.cs-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); column-gap: clamp(32px, 4vw, 56px); row-gap: 28px; align-items: center; }
.cs-hero__media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 24px; border: 1px solid rgba(11, 37, 69, 0.08); background: #F5F8FA; box-shadow: 0 30px 60px -30px rgba(11, 37, 69, 0.3); }
.cs-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero__details { display: flex; flex-direction: column; align-items: flex-start; }
.cs-tag { margin-bottom: 16px; padding: 5px 12px; border-radius: 999px; background: rgba(19, 168, 158, 0.1); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--teal-text); }
.cs-hero h1 { margin: 0 0 14px; font-size: clamp(1.4rem, 2.4vw, 1.85rem); letter-spacing: -0.025em; line-height: 1.22; -webkit-text-stroke: 0; } /* compact: a product display, not a landing hero */
.cs-context { margin: 0 0 24px; font-size: 0.95rem; line-height: 1.6; color: var(--gray); }
.meta-list { width: 100%; margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(11, 37, 69, 0.1); }
.meta-list__row { display: flex; align-items: center; gap: 12px; padding-block: 13px; border-bottom: 1px solid rgba(11, 37, 69, 0.1); font-size: 0.92rem; }
.meta-list__icon { display: grid; flex: none; color: var(--teal-ink); }
.meta-list__label { flex: none; min-width: 90px; color: var(--gray); }
.meta-list__value { font-weight: 700; color: var(--navy); }
@media (max-width: 859px) { .cs-hero__grid { grid-template-columns: minmax(0, 1fr); } }

/* the section label used across the page: a short teal rule, then muted uppercase text */
.cs-label { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray); }
.cs-label::before { content: ""; width: 24px; height: 2px; border-radius: 2px; background: var(--teal); }
.cs-h2 { margin: 0 0 12px; font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; font-size: clamp(1.5rem, 1.05rem + 2.2vw, 2.4rem); color: var(--navy); }
.cs-intro { max-width: 60ch; margin: 0 0 clamp(32px, 4vw, 44px); font-size: 1.02rem; line-height: 1.7; color: var(--gray); }

/* 2. the problem: narrative + amber pain-point callouts */
.cs-problem__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.6fr); gap: clamp(32px, 4vw, 56px); align-items: start; }
.cs-problem__text p { margin: 0 0 18px; font-size: 1.05rem; line-height: 1.85; color: var(--navy); }
.cs-problem__text p:last-child { margin-bottom: 0; }
.cs-mark { /* a soft marker band behind the lower third of the phrase; one per case study */
  color: inherit;
  background-color: transparent;
  background-image: linear-gradient(rgba(19, 168, 158, 0.18), rgba(19, 168, 158, 0.18));
  background-repeat: no-repeat;
  background-size: 100% 36%;
  background-position: 0 92%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.pains { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pain { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 14px; border: 1px solid rgba(200, 140, 60, 0.18); background: #FBF8F4; font-size: 0.94rem; font-weight: 600; line-height: 1.5; color: var(--navy); }
.pain__icon { display: grid; flex: none; margin-top: 1px; color: #B4741A; }
@media (max-width: 759px) { .cs-problem__grid { grid-template-columns: minmax(0, 1fr); } }

/* 3. what we built: app nodes on one dashed line, then detail rows */
.cs-built { background: #F8FAFB; }
.flow { position: relative; display: flex; justify-content: space-between; margin: 0 0 clamp(36px, 4.5vw, 52px); padding: 0; list-style: none; }
.flow::before { content: ""; position: absolute; top: 25px; left: calc(100% / 12); right: calc(100% / 12); border-top: 2px dashed rgba(19, 168, 158, 0.5); transform-origin: left; }
.flow__node { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.flow__circle { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid #D5DCE2; background: #FFFFFF; color: var(--teal-ink); }
.flow__label { font-family: var(--font-heading); font-weight: 700; font-size: 0.86rem; color: var(--navy); }
.build-rows { display: grid; gap: 14px; max-width: 760px; margin: 0; padding: 0; list-style: none; }
.build-row { display: flex; gap: 14px; align-items: flex-start; font-size: 1rem; line-height: 1.6; color: var(--navy); }
.build-row__icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: rgba(19, 168, 158, 0.12); color: var(--teal-ink); }
@media (max-width: 759px) {
  .flow { flex-wrap: wrap; justify-content: center; row-gap: 20px; }
  .flow::before { display: none; }
  .flow__node { flex: 0 0 33.33%; }
}

/* 4. what changed: before -> after rows */
.ba { margin: clamp(24px, 3vw, 36px) 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(11, 37, 69, 0.1); }
.ba-row { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); align-items: center; gap: 16px; padding-block: 18px; border-bottom: 1px solid rgba(11, 37, 69, 0.1); }
.ba-row__before { text-align: right; text-decoration: line-through; color: var(--gray); font-size: 0.98rem; } /* #9AA7B4 is ~2.4:1, below AA; the strike already marks it as old */
.ba-row__arrow { display: grid; place-items: center; color: var(--teal-ink); }
.ba-row__after { font-weight: 700; color: var(--navy); font-size: 1rem; }
@media (max-width: 639px) {
  .ba-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .ba-row__before { text-align: left; }
  .ba-row__arrow { justify-content: start; rotate: 90deg; width: 18px; }
}

/* What changed: centred heading block (both layouts) */
.cs-changed .cs-label { justify-content: center; }
.cs-changed .cs-h2 { text-align: center; }
/* 4b. what changed, when only an outcome exists: one confident statement, no invented rows */
.cs-outcome { max-width: 56ch; margin: clamp(16px, 2vw, 24px) auto 0; text-align: center; font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.5; color: var(--navy); }

/* 5. quote (only when a named, approved quote exists) */
.cs-quote__fig { max-width: 760px; margin: 0 auto; text-align: center; }
.cs-quote__fig blockquote { margin: 0 0 18px; }
.cs-quote__fig blockquote p { margin: 0; font-family: var(--font-heading); font-style: italic; font-weight: 600; font-size: clamp(1.25rem, 2.2vw, 1.7rem); line-height: 1.45; color: var(--navy); }
.cs-quote__fig figcaption { font-size: 0.92rem; color: var(--gray); }

/* 6. closing CTA: tinted, with a supporting sentence under the heading */
.cs-cta { background: #F8FAFB; }
.cs-cta__text { max-width: 46ch; margin: 16px 0 0; font-size: 1.02rem; line-height: 1.7; color: var(--gray); }
@media (max-width: 819px) { .cs-cta__text { margin-inline: auto; } }

/* reveals: nodes pop along the line, the line draws */
.reveal-ready .reveal-section:not(.in-view) .flow::before { transform: scaleX(0); }
.reveal-ready .flow::before { transition: transform 1200ms cubic-bezier(.2, .8, .2, 1) 150ms; }
.reveal-ready .flow__node { transition: opacity 450ms var(--reveal-spring), transform 450ms var(--reveal-spring); transition-delay: calc(150ms + var(--r, 0) * 180ms); }
.reveal-ready .reveal-section:not(.in-view) .flow__node { opacity: 0; transform: scale(0.6); }

/* ===== Insights + Questions: /insights, /insights/<slug>, /questions, /questions/<slug>, /questions/ask =====
   Frontend only. Built by source/community/build.py from community-data.js; interactions in community.js reset on reload. */

/* sub-header tabs (all 5 pages) */
.hub-tabs { height: 52px; background: #FBFCFD; border-bottom: 1px solid rgba(11, 37, 69, 0.1); }
.hub-tabs__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; height: 100%; } /* logo / menu / button, under the main header's */
.hub-logo { justify-self: start; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; color: var(--navy); text-decoration: none; border-radius: 6px; }
.hub-tabs__nav { display: flex; align-self: stretch; gap: 28px; }
.hub-tabs__tab { display: inline-flex; align-items: center; gap: 6px; border-bottom: 2px solid transparent; font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem; color: var(--gray); text-decoration: none; transition: color 200ms ease; }
.hub-tabs__tab:hover, .hub-tabs__tab.is-active { color: var(--navy); }
.hub-tabs__tab.is-active { border-bottom-color: var(--teal); }
.hub-tabs__tab:focus-visible { outline: 3px solid var(--teal-ink); outline-offset: -3px; }
.hub-ask { --chip: 28px; justify-self: end; height: 38px; gap: 10px; padding: 0 5px 0 16px; font-size: 0.88rem; }
@media (max-width: 639px) {
  .hub-tabs__inner { gap: 10px; }
  .hub-tabs__nav { gap: 16px; }
  .hub-logo { font-size: 1rem; }
  .hub-ask { padding-left: 12px; gap: 6px; }
  .hub-ask__more { display: none; } /* "Ask" on phones */
}
@media (max-width: 400px) {
  .hub-tabs__nav { gap: 12px; }
  .hub-tabs__tab { font-size: 0.88rem; }
  .hub-logo svg { width: 20px; height: 20px; }
}
.hub-tabs__count { font-size: 0.78rem; font-weight: 600; color: var(--gray); }

/* main + sidebar layout */
.hub-main { padding-block: 0 clamp(48px, 6vw, 80px); }
.hub-main--detail { padding-top: clamp(24px, 3vw, 40px); }
.hub-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(32px, 4vw, 56px); align-items: start; }
.hub-side { display: grid; gap: 20px; }
@media (min-width: 960px) and (min-height: 820px) { .hub-side { position: sticky; top: calc(var(--header-h) + 24px); } }
@media (max-width: 959px) { .hub-layout { grid-template-columns: minmax(0, 1fr); } }
.hub-h2 { margin: 0 0 20px; font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.02em; font-size: 1.4rem; color: var(--navy); }

/* sidebar boxes */
.side-box { padding: 22px; border-radius: 18px; background: #F8FAFB; }
.side-box h2, .side-box h3 { margin: 0 0 8px; font-family: var(--font-heading); font-weight: 800; font-size: 0.95rem; color: var(--navy); }
.side-list { margin: 0; padding: 0; list-style: none; }
.side-list li + li { border-top: 1px solid rgba(11, 37, 69, 0.08); }
.topic-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 0; border: 0; background: none; font: inherit; font-size: 0.92rem; font-weight: 600; text-align: left; color: var(--ink); cursor: pointer; }
.topic-row svg { flex: none; color: var(--gray); }
.topic-row__n { margin-left: auto; min-width: 26px; padding: 1px 8px; border-radius: 999px; background: #FFFFFF; font-size: 0.78rem; text-align: center; color: var(--gray); }
.topic-row:hover, .topic-row.is-active, .topic-row.is-active svg { color: var(--teal-text); }
.topic-row.is-active .topic-row__n { background: rgba(19, 168, 158, 0.12); color: var(--teal-text); }
.side-q, .side-art { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 0; color: inherit; text-decoration: none; }
.side-q__stats { font-size: 0.76rem; color: var(--gray); }
.side-q__title, .side-art__title { font-weight: 600; font-size: 0.92rem; line-height: 1.4; color: var(--navy); }
.side-q:hover .side-q__title, .side-art:hover .side-art__title { color: var(--teal-text); text-decoration: underline; }
.topic-row:focus-visible, .side-q:focus-visible, .side-art:focus-visible { outline: 3px solid var(--teal-ink); outline-offset: 2px; border-radius: 6px; }
.ask-box { padding: 24px 22px; border-radius: 18px; background: linear-gradient(135deg, #0B2545 0%, #0F4C75 55%, #13A89E 130%); color: #FFFFFF; }
.ask-box h2 { margin: 0 0 8px; font-family: var(--font-heading); font-weight: 800; font-size: 1.15rem; color: #FFFFFF; }
.ask-box p { margin: 0 0 18px; font-size: 0.9rem; line-height: 1.6; color: rgba(255, 255, 255, 0.85); }
.ask-box__btn, .ask-box__btn:hover, .ask-box__btn:active { height: 48px; padding-left: 22px; background: #FFFFFF; color: var(--navy); border-color: #FFFFFF; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.4); }
.ask-box__btn::before { display: none; }
.ask-box__btn .btn-chip, .ask-box__btn:hover .btn-chip { --chip: 36px; background: rgba(11, 37, 69, 0.08); border-color: rgba(11, 37, 69, 0.1); }
.ask-box__btn:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }

/* shared bits */
.cat-tag { display: inline-flex; align-items: center; gap: 7px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--teal-text); }
.cat-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.tag-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; background: rgba(19, 168, 158, 0.1); font-size: 0.76rem; font-weight: 600; color: var(--teal-text); }
.thumb-ph { display: block; background: linear-gradient(150deg, #EEF4F7, #D9E6EC); } /* placeholder until real article images */
.avatar { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #0B2545, #13A89E); font-family: var(--font-heading); font-weight: 700; font-size: 0.82rem; color: #FFFFFF; }
.avatar--sm { width: 28px; height: 28px; font-size: 0.68rem; }
.filter-empty, .comments-empty, .answers-empty { margin: 20px 0 0; color: var(--gray); }
.form-error { margin: 6px 0 10px; font-size: 0.88rem; font-weight: 600; color: #B42318; }

/* Insights hub: article rows (buttons that open the reading panel) */
.art-list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.art-row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 22px; align-items: center; width: 100%; padding: 14px; border: 1px solid rgba(11, 37, 69, 0.08); border-radius: 20px; background: #FFFFFF; font: inherit; text-align: left; color: inherit; cursor: pointer; box-shadow: 0 18px 40px -28px rgba(11, 37, 69, 0.3); transition: transform 250ms ease, box-shadow 250ms ease; }
.art-row:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -28px rgba(11, 37, 69, 0.4); }
.art-row:focus-visible { outline: 3px solid var(--teal-ink); outline-offset: 3px; }
.art-row__img { aspect-ratio: 16 / 10; border-radius: 14px; }
.art-row__body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.art-row__title { font-family: var(--font-heading); font-weight: 800; font-size: 1.15rem; line-height: 1.3; color: var(--navy); }
.art-row__excerpt { font-size: 0.94rem; line-height: 1.55; color: var(--gray); }
.art-row__meta { font-size: 0.82rem; color: var(--gray); }
@media (max-width: 639px) { .art-row { grid-template-columns: minmax(0, 1fr); gap: 14px; } .art-row__img { aspect-ratio: 16 / 6; } }

/* reading panel (native <dialog>: focus trap, Escape and inert page come free) */
.read-panel { position: fixed; inset: 0 0 0 auto; width: min(760px, 92vw); max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: #FFFFFF; color: var(--navy); box-shadow: -30px 0 60px -30px rgba(11, 37, 69, 0.4); transform: translateX(100%); transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1); }
.read-panel.is-open { transform: none; }
.read-panel::backdrop { background: rgba(11, 37, 69, 0.55); opacity: 0; transition: opacity 350ms ease; }
.read-panel.is-open::backdrop { opacity: 1; }
html:has(.read-panel[open]) { overflow: hidden; }
.read-panel__inner { height: 100%; overflow-y: auto; overscroll-behavior: contain; }
.read-panel__bar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px clamp(20px, 4vw, 40px); background: rgba(255, 255, 255, 0.94); border-bottom: 1px solid rgba(11, 37, 69, 0.08); }
.read-panel__close { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(11, 37, 69, 0.12); border-radius: 50%; background: #FFFFFF; color: var(--navy); cursor: pointer; }
.read-panel__close:focus-visible { outline: 3px solid var(--teal-ink); outline-offset: 2px; }
.read-panel__article { padding: clamp(20px, 3vw, 32px) clamp(20px, 4vw, 40px) 48px; }
.read-panel__title { margin: 12px 0 10px; font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--navy); }
.read-panel__related { margin-top: 32px; }
@media (prefers-reduced-motion: reduce) { .read-panel, .read-panel::backdrop { transition: none; } }

/* article (detail page + panel) */
.article-head { margin-bottom: 24px; }
.article-head h1 { margin: 12px 0 10px; font-size: clamp(1.8rem, 3.6vw, 2.6rem); letter-spacing: -0.03em; line-height: 1.15; }
.article-head__meta { margin: 0 0 20px; font-size: 0.9rem; color: var(--gray); }
.article-img { aspect-ratio: 16 / 8; margin-bottom: 28px; border-radius: 20px; }
.article-body h2, .article-body h3 { margin: 32px 0 12px; font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.02em; font-size: 1.35rem; color: var(--navy); }
.article-body p { margin: 0 0 20px; font-size: 1.05rem; line-height: 1.85; color: var(--navy); }
.source { margin-top: 40px; }
.source__strip { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 0.88rem; font-weight: 600; color: var(--teal-text); }
.source__check { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: rgba(19, 168, 158, 0.12); color: var(--teal-ink); }
.related-card { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 22px; align-items: center; padding: 16px; border-radius: 22px; border: 1px solid rgba(11, 37, 69, 0.08); background: #FFFFFF; color: inherit; text-decoration: none; box-shadow: 0 20px 44px -30px rgba(11, 37, 69, 0.35); transition: transform 250ms ease; }
.related-card:hover { transform: translateY(-3px); }
.related-card:focus-visible { outline: 3px solid var(--teal-ink); outline-offset: 3px; }
.related-card__img { aspect-ratio: 4 / 3; border-radius: 14px; }
.related-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.related-card__eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--teal-text); }
.related-card__title { font-family: var(--font-heading); font-weight: 800; font-size: 1.1rem; line-height: 1.3; color: var(--navy); }
.related-card__text { font-size: 0.92rem; line-height: 1.55; color: var(--gray); }
@media (max-width: 559px) { .related-card { grid-template-columns: minmax(0, 1fr); } }
.hub-cta { position: relative; overflow: hidden; margin-top: 48px; padding: clamp(36px, 5vw, 56px) 24px; border-radius: 24px; background: #F8FAFB; text-align: center; }
.hub-cta > :not(.cta-orb) { position: relative; z-index: 1; }
.hub-cta h2 { margin: 0 0 22px; font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.03em; font-size: clamp(1.4rem, 1rem + 1.6vw, 2rem); color: var(--navy); }

/* comments */
.comments { margin-top: 48px; padding-top: 32px; border-top: 1px solid rgba(11, 37, 69, 0.1); }
.comments h2, .answers h2, .your-answer h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.02em; font-size: 1.4rem; color: var(--navy); }
.count-badge { min-width: 28px; padding: 2px 9px; border-radius: 999px; background: rgba(19, 168, 158, 0.12); font-size: 0.85rem; text-align: center; color: var(--teal-text); }
.comment-form, .ask-form, .field { display: grid; gap: 6px; }
.comment-form { margin-bottom: 20px; }
.comment-form label, .field label { font-size: 0.85rem; font-weight: 700; color: var(--navy); }
:where(.comment-form, .reply-form, #answerForm, .ask-form) :is(input, textarea), .tag-input { width: 100%; padding: 12px 14px; border: 1px solid rgba(11, 37, 69, 0.15); border-radius: 14px; background: #FFFFFF; font: inherit; color: var(--navy); }
:where(.comment-form, #answerForm, .ask-form) textarea { min-height: 90px; resize: vertical; }
:where(.comment-form, .reply-form, #answerForm, .ask-form) :is(input, textarea):focus, .tag-input:focus-within { outline: none; border-color: var(--teal-ink); box-shadow: 0 0 0 3px rgba(19, 168, 158, 0.18); }
.comment-form__note { margin: 2px 0 8px; font-size: 0.84rem; color: var(--gray); }
:is(.comment-form, #answerForm) .btn-primary { justify-self: start; height: 50px; }
.comment-list, .replies { margin: 0; padding: 0; list-style: none; }
.comment { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; padding-block: 18px; border-bottom: 1px solid rgba(11, 37, 69, 0.08); }
.comment__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 4px; }
.comment__author { font-weight: 700; color: var(--navy); }
.comment__time { font-size: 0.82rem; color: var(--gray); }
.comment__text { margin: 0; line-height: 1.65; color: var(--navy); overflow-wrap: anywhere; }
.comment__actions { display: flex; gap: 6px; margin-top: 8px; }
.like-btn, .reply-btn, .reply-form__send { min-height: 32px; padding: 4px 12px; border: 1px solid rgba(11, 37, 69, 0.12); border-radius: 999px; background: #FFFFFF; font: inherit; font-size: 0.84rem; font-weight: 600; color: var(--navy); cursor: pointer; }
.like-btn[aria-pressed="true"] { border-color: var(--teal-ink); background: rgba(19, 168, 158, 0.1); color: var(--teal-text); }
:is(.like-btn, .reply-btn, .reply-form__send, .vote__btn, .q-filter):focus-visible { outline: 3px solid var(--teal-ink); outline-offset: 2px; }
.replies { grid-column: 2; margin-top: 10px; padding-left: 16px; border-left: 2px solid var(--teal); }
.replies .comment { border-bottom: 0; padding-block: 10px; }
.reply-form { grid-column: 2; display: grid; gap: 6px; margin-top: 10px; }
.reply-form__send { justify-self: start; }
.badge-author, .badge-team { padding: 2px 8px; border-radius: 999px; background: var(--teal-text); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #FFFFFF; }

/* Questions hub */
.q-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.q-head h1 { margin: 0 0 8px; font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: -0.03em; }
.q-head p { margin: 0; max-width: 56ch; color: var(--gray); }
.q-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.q-filter { min-height: 38px; padding: 6px 14px; border: 0; border-radius: 999px; background: none; font: inherit; font-weight: 600; font-size: 0.92rem; color: var(--gray); cursor: pointer; }
.q-filter:hover { color: var(--navy); }
.q-filter.is-active { background: #EEF2F5; color: var(--navy); }
.q-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(11, 37, 69, 0.1); }
.q-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; padding: 20px 8px; border-bottom: 1px solid rgba(11, 37, 69, 0.1); color: inherit; text-decoration: none; transition: background-color 200ms ease; }
.q-row:hover { background: #F8FAFB; }
.q-row:focus-visible { outline: 3px solid var(--teal-ink); outline-offset: -3px; }
.q-row__stats { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 0.8rem; color: var(--gray); }
.q-stat strong { color: var(--navy); }
.q-stat--answers { padding: 2px 8px; border-radius: 8px; border: 1px solid rgba(11, 37, 69, 0.12); }
.q-stat--answers.has-answers { border-color: transparent; background: rgba(19, 168, 158, 0.12); color: var(--teal-text); }
.q-stat--answers.has-answers strong { color: var(--teal-text); }
.q-row__main { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.q-row__title { font-family: var(--font-heading); font-weight: 700; font-size: 1.08rem; line-height: 1.35; color: var(--navy); }
.q-row__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.q-row__meta { font-size: 0.84rem; color: var(--gray); }
@media (max-width: 639px) {
  .q-head { flex-direction: column; }
  .q-row { grid-template-columns: 70px minmax(0, 1fr); gap: 14px; }
}

/* Question detail */
.q-detail h1 { margin: 0 0 10px; font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -0.025em; line-height: 1.2; }
.q-detail__meta { margin: 0 0 24px; font-size: 0.88rem; color: var(--gray); }
.q-post, .answer { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; }
.q-post { padding-bottom: 28px; border-bottom: 1px solid rgba(11, 37, 69, 0.1); }
.q-post__main p { margin: 0 0 14px; line-height: 1.75; color: var(--navy); }
.vote { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.vote__btn { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(11, 37, 69, 0.12); border-radius: 50%; background: #FFFFFF; color: var(--navy); cursor: pointer; }
.vote__btn:hover:not(:disabled) { border-color: var(--teal-ink); color: var(--teal-text); }
.vote__btn:disabled { cursor: default; opacity: 0.45; }
.vote__btn.is-voted { opacity: 1; border-color: var(--teal-ink); background: rgba(19, 168, 158, 0.12); color: var(--teal-text); }
.vote__n { font-family: var(--font-heading); font-weight: 800; font-size: 1.1rem; color: var(--navy); }
.answers { margin-top: 32px; }
.answer-list { margin: 0; padding: 0; list-style: none; }
.answer { padding-block: 22px; border-bottom: 1px solid rgba(11, 37, 69, 0.1); }
.answer--accepted { margin-bottom: 8px; padding: 22px; border-bottom: 0; border-radius: 18px; background: rgba(19, 168, 158, 0.07); }
.accepted-badge { display: inline-block; margin: 0 0 10px; padding: 3px 10px; border-radius: 999px; background: var(--teal-text); font-size: 0.74rem; font-weight: 700; color: #FFFFFF; }
.answer__text { margin: 0 0 12px; line-height: 1.75; color: var(--navy); overflow-wrap: anywhere; }
.answer__by { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 0.9rem; }
.your-answer { margin-top: 36px; }
#answerForm { display: grid; gap: 10px; }

/* Ask a question */
.ask-col { max-width: 680px; margin-inline: auto; }
.ask-col h1 { margin: 0 0 20px; font-size: clamp(1.8rem, 3.4vw, 2.4rem); letter-spacing: -0.03em; }
.title-preview { margin-bottom: 24px; padding: 18px 20px; border-radius: 18px; border: 1px dashed rgba(11, 37, 69, 0.18); background: #F8FAFB; }
.title-preview__text { margin: 0; font-family: var(--font-heading); font-weight: 800; font-size: 1.2rem; line-height: 1.35; color: var(--navy); overflow-wrap: anywhere; }
.title-preview__text.is-empty { font-family: var(--font-body); font-weight: 400; font-style: italic; font-size: 1rem; color: var(--gray); }
.ask-form { gap: 20px; }
.field__hint { margin: 0; font-size: 0.82rem; color: var(--gray); }
.field-row { display: grid; align-items: start; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 559px) { .field-row { grid-template-columns: minmax(0, 1fr); } }
.tag-input { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; cursor: text; }
.tag-input__list { display: contents; list-style: none; }
.tag-input input { flex: 1 1 120px; min-width: 0; min-height: 32px; padding: 0 4px; border: 0; background: none; font: inherit; color: var(--navy); }
.tag-input input:focus { outline: none; }
.tag-chip { display: inline-flex; align-items: center; gap: 4px; padding-right: 4px; }
.tag-chip__x { display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 50%; background: none; font-size: 1rem; line-height: 1; color: var(--teal-text); cursor: pointer; }
.tag-chip__x:hover { background: rgba(19, 168, 158, 0.15); }
.tag-chip__x:focus-visible { outline: 2px solid var(--teal-ink); }
.ask-form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 8px; }
.ask-form__note { flex: 1 1 240px; margin: 0; font-size: 0.84rem; line-height: 1.55; color: var(--gray); }
.ask-form__foot .btn-primary { height: 50px; }
.ask-form__status { min-height: 1.4em; margin: 0; font-weight: 600; color: var(--navy); }
.guidelines { margin-top: 32px; padding: 22px 24px; border-radius: 18px; background: #F4F6F8; }
.guidelines h2 { margin: 0 0 10px; font-family: var(--font-heading); font-weight: 800; font-size: 1.05rem; color: var(--navy); }
.guidelines ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; line-height: 1.6; color: var(--ink); }
.guidelines a { color: var(--teal-text); }

/* ===== About page (/about) ===== */
.ab-hero, .ab-lead, .ab-why, .ab-how, .ab-journey, .ab-chat, .ab-team { padding-block: clamp(48px, 6vw, 80px); }
.ab-hero { padding-block: clamp(32px, 4vw, 56px); }
.ab-center { text-align: center; }
.role-tag { display: inline-block; margin: 0 0 12px; padding: 4px 12px; border-radius: 999px; background: rgba(19, 168, 158, 0.12); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--teal-text); }

/* 1 opening */
.ab-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(32px, 4vw, 56px); align-items: center; }
.ab-hero h1 { margin: 0 0 20px; font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; font-size: clamp(2rem, 3.8vw, 2.9rem); color: var(--navy); }
.ab-hero__body { margin: 0; max-width: 50ch; font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.7; color: var(--gray); }
.ab-hero__media { aspect-ratio: 1 / 1; border-radius: 24px; overflow: hidden; }
.ab-hero__media :is(video, img) { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; } /* white background melts into the page */
@media (max-width: 899px) {
  .ab-hero__grid { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .ab-hero__media { order: -1; width: 100%; max-width: 380px; margin-inline: auto; }
  .ab-hero__body { margin-inline: auto; }
}

/* 2 leadership */
.ab-lead { background: linear-gradient(180deg, #F8FAFB 0%, #FFFFFF 100%); }
.lead-pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(24px, 3vw, 48px); align-items: center; max-width: 980px; margin-inline: auto; }
.lead-card { display: flex; flex-direction: column; align-items: center; height: 100%; padding: clamp(32px, 4vw, 44px); border-radius: 28px; background: #FFFFFF; text-align: center; box-shadow: 0 24px 60px -32px rgba(11, 37, 69, 0.35); }
.lead-card__photo { width: 140px; height: 140px; margin-bottom: 20px; border-radius: 50%; overflow: hidden; border: 4px solid #FFFFFF; box-shadow: 0 0 0 6px rgba(19, 168, 158, 0.12), 0 14px 30px -12px rgba(11, 37, 69, 0.35); }
.lead-card__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lead-card__photo .img-fallback { padding: 0; background: linear-gradient(135deg, #0B2545, #13A89E); font-family: var(--font-heading); font-weight: 800; font-size: 2.2rem; color: #FFFFFF; } /* initials until the photo exists */
.lead-card h3 { margin: 0 0 10px; font-family: var(--font-heading); font-weight: 800; font-size: 1.3rem; color: var(--navy); }
.lead-card__bio { max-width: 30ch; margin: 0; line-height: 1.6; color: var(--gray); }
.lead-pair__link { position: relative; display: grid; place-items: center; align-self: stretch; width: 48px; }
.lead-pair__link::before { content: ""; position: absolute; top: 10%; bottom: 10%; left: 50%; border-left: 2px dashed var(--teal); }
.lead-pair__badge { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #0B2545, #13A89E); color: #FFFFFF; box-shadow: 0 10px 24px -10px rgba(11, 37, 69, 0.5); }
@media (max-width: 759px) {
  .lead-pair { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .lead-pair__link { width: auto; height: 48px; }
  .lead-pair__link::before { top: 50%; bottom: auto; left: 25%; right: 25%; border-left: 0; border-top: 2px dashed var(--teal); }
}

/* 3 why we exist */
.ab-why__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(40px, 5vw, 64px); align-items: center; }
.ab-why__p { margin: 0 0 16px; max-width: 58ch; line-height: 1.75; color: var(--gray); }
.ab-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.ab-stat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: clamp(24px, 3vw, 36px) 16px; border-radius: 22px; background: #F8FAFB; text-align: center; }
.ab-stat strong { font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.03em; font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1; color: var(--navy); }
.ab-stat span { font-size: 0.92rem; color: var(--gray); }
@media (max-width: 859px) { .ab-why__grid { grid-template-columns: minmax(0, 1fr); } }

/* 4 how we work: flip cards. Hover/keyboard focus flip on mouse devices; tap toggles .is-flipped on touch */
.ab-how { background: #F8FAFB; }
.flips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 859px) { .flips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .flips { grid-template-columns: minmax(0, 1fr); } }
.flip { display: block; width: 100%; height: 200px; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: center; cursor: pointer; perspective: 1200px; }
.flip__inner { position: relative; display: block; height: 100%; transform-style: preserve-3d; transition: transform 500ms cubic-bezier(0.4, 0.2, 0.2, 1); }
.flip__face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px; border-radius: 20px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip__front { border: 1px solid rgba(11, 37, 69, 0.08); background: #FFFFFF; box-shadow: 0 18px 40px -28px rgba(11, 37, 69, 0.35); }
.flip__back { transform: rotateY(180deg); background: linear-gradient(135deg, #0B2545 0%, #0F4C75 55%, #13A89E 130%); font-size: 0.95rem; line-height: 1.6; color: #FFFFFF; }
.flip__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: rgba(19, 168, 158, 0.12); color: var(--teal-ink); }
.flip__title { font-family: var(--font-heading); font-weight: 800; font-size: 1.1rem; color: var(--navy); }
.flip__hint { font-size: 0.78rem; color: var(--gray); }
.flip__hint--tap { display: none; }
.flip:focus-visible { outline: 3px solid var(--teal-ink); outline-offset: 4px; border-radius: 20px; }
@media (hover: hover) { .flip:hover .flip__inner, .flip:focus-visible .flip__inner { transform: rotateY(180deg); } }
@media (hover: none) {
  .flip.is-flipped .flip__inner, .flip:focus-visible .flip__inner { transform: rotateY(180deg); }
  .flip__hint--hover { display: none; }
  .flip__hint--tap { display: inline; }
}
@media (prefers-reduced-motion: reduce) { .flip__inner { transition: none; } }
@media (max-width: 559px) { .flip { height: 168px; } }

/* 5 journey */
.journey { position: relative; max-width: 720px; margin: 0 auto; padding: 0 0 0 44px; list-style: none; }
.journey::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 11px; border-left: 2px dotted var(--teal); }
.journey__step { position: relative; padding-bottom: 32px; }
.journey__step:last-child { padding-bottom: 0; }
.journey__step::before { content: ""; position: absolute; left: -41px; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: #FFFFFF; border: 3px solid var(--teal); box-sizing: border-box; }
.journey__step h3 { margin: 0 0 6px; font-family: var(--font-heading); font-weight: 800; font-size: 1.15rem; color: var(--navy); }
.journey__step p { margin: 0; line-height: 1.7; color: var(--gray); }

/* 6 conversation bubbles */
.ab-chat { background: #F8FAFB; }
.chat { display: flex; flex-direction: column; gap: 22px; max-width: 640px; margin: 0 auto; padding: 0; list-style: none; }
.bubble { max-width: 78%; margin: 0; padding: 14px 18px; line-height: 1.6; }
.bubble--q { align-self: flex-start; border: 1px solid rgba(11, 37, 69, 0.1); border-radius: 18px 18px 18px 4px; background: #FFFFFF; font-style: italic; color: var(--gray); }
.bubble-row { display: flex; align-items: flex-end; justify-content: flex-end; gap: 10px; }
.bubble--a { border-radius: 18px 18px 4px 18px; background: linear-gradient(135deg, #0B2545 0%, #0F4C75 55%, #13A89E 130%); color: #FFFFFF; box-shadow: 0 16px 34px -18px rgba(11, 37, 69, 0.5); }
.bubble--a strong { display: block; margin-bottom: 2px; font-family: var(--font-heading); font-weight: 800; }
.bubble__avatar { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(11, 37, 69, 0.1), 0 6px 14px -6px rgba(11, 37, 69, 0.35); }
.bubble__avatar img { width: 22px; height: 22px; } /* the X mark from the logo */
@media (max-width: 559px) { .bubble { max-width: 88%; } .bubble-row .bubble { max-width: calc(88% - 42px); } }

/* 7 team */
.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 780px; margin: 0 auto; padding: 0; list-style: none; }
@media (max-width: 639px) { .team-grid { grid-template-columns: minmax(0, 1fr); } }
.team-card { display: flex; flex-direction: column; align-items: center; padding: 28px 20px; border-radius: 20px; background: #FFFFFF; text-align: center; box-shadow: 0 20px 48px -28px rgba(11, 37, 69, 0.35); }
.team-card__avatar { display: grid; place-items: center; width: 88px; height: 88px; margin-bottom: 16px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(11, 37, 69, 0.1), 0 0 0 6px rgba(19, 168, 158, 0.08), 0 12px 26px -12px rgba(11, 37, 69, 0.35); }
.team-card__avatar img { width: 50px; height: 50px; } /* the X mark from the logo, until real photos */
.team-card h3 { margin: 0 0 8px; font-family: var(--font-heading); font-weight: 800; font-size: 1.15rem; color: var(--navy); }
.team-card .role-tag { font-size: 0.7rem; }
.team-card__bio { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--gray); }

/* 8 CTA (reuses .svc-cta + .badge + .cta-orb) */
.ab-cta { background: #F8FAFB; }

/* ===== Contact page (/contact). Content sits in a 900px column (.ct-wrap) inside the normal .container,
   so container edges still line up with the header. Form is frontend-only for now. ===== */
.ct-wrap { max-width: 900px; margin-inline: auto; }
.ct-intro { padding-block: clamp(40px, 5vw, 64px) clamp(24px, 3vw, 32px); text-align: center; }
.ct-intro h1 { max-width: 20ch; margin: 0 auto 16px; font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; font-size: clamp(2rem, 3.8vw, 2.9rem); color: var(--navy); }
.ct-intro__body { max-width: 52ch; margin: 0 auto; font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.7; color: var(--gray); }
.ct-main, .ct-faq, .ct-next { padding-block: clamp(40px, 5vw, 64px); }
.ct-main { padding-top: 0; }

/* tabs */
.ct-tabs { display: flex; max-width: 420px; margin: 0 auto clamp(24px, 3vw, 32px); padding: 5px; border-radius: 999px; background: #F4F6F8; }
.ct-tab { flex: 1; min-height: 44px; padding: 8px 14px; border: 0; border-radius: 999px; background: none; font-family: var(--font-heading); font-weight: 700; font-size: 0.92rem; color: var(--gray); cursor: pointer; transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease; }
.ct-tab:hover { color: var(--navy); }
.ct-tab.is-active { background: #FFFFFF; color: var(--navy); box-shadow: 0 4px 14px -6px rgba(11, 37, 69, 0.3); }
.ct-tab:focus-visible, .ct-panel:focus-visible { outline: 3px solid var(--teal-ink); outline-offset: 2px; }
.ct-panel.is-active { animation: ct-fade-up 350ms ease both; }
@keyframes ct-fade-up { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .ct-panel.is-active { animation: none; } }

/* form */
.ct-form { padding: clamp(28px, 4vw, 40px); border-radius: 24px; background: #F8FAFB; }
.ct-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.ct-field { display: grid; gap: 6px; }
.ct-field--full { grid-column: 1 / -1; }
@media (max-width: 559px) { .ct-grid { grid-template-columns: minmax(0, 1fr); } }
.ct-field label { font-family: var(--font-heading); font-weight: 700; font-size: 0.84rem; color: var(--navy); }
.req { margin-left: 3px; color: var(--teal-text); }
.ct-field :is(input, select, textarea) { width: 100%; min-height: 48px; padding: 11px 14px; border: 1.5px solid rgba(11, 37, 69, 0.16); border-radius: 10px; background: #FFFFFF; font: inherit; color: var(--navy); transition: border-color 200ms ease, box-shadow 200ms ease; }
.ct-field textarea { min-height: 110px; resize: vertical; }
.ct-field :is(input, select, textarea):focus { outline: none; border-color: var(--teal-ink); box-shadow: 0 0 0 3px rgba(19, 168, 158, 0.18); }
.ct-form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; }
.ct-form__note { flex: 1 1 240px; margin: 0; font-size: 0.88rem; line-height: 1.55; color: var(--gray); }
.ct-form .btn-primary { height: 52px; }
.ct-form__status { min-height: 1.4em; margin: 14px 0 0; font-weight: 600; color: var(--navy); }
.ct-form__status:empty { display: none; }

.ct-success { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: clamp(48px, 7vw, 72px) clamp(28px, 4vw, 40px); border-radius: 24px; background: #F8FAFB; text-align: center; }
.ct-success[hidden] { display: none; } /* author display:flex above would otherwise beat the UA's [hidden] default at equal specificity */
.ct-success__icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--teal-ink); color: #FFFFFF; }
.ct-success__title { margin: 4px 0 0; font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.02em; font-size: clamp(1.3rem, 2.2vw, 1.6rem); color: var(--navy); }
.ct-success__body { margin: 0; max-width: 42ch; font-size: 1rem; line-height: 1.6; color: var(--gray); }

/* direct tiles */
.ct-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.ct-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; padding: 28px 18px; border-radius: 20px; background: #F8FAFB; text-align: center; color: inherit; text-decoration: none; transition: transform 250ms ease, box-shadow 250ms ease, background-color 250ms ease; }
.ct-tile:hover { transform: translateY(-4px); background: #FFFFFF; box-shadow: 0 22px 44px -26px rgba(11, 37, 69, 0.4); }
.ct-tile:focus-visible { outline: 3px solid var(--teal-ink); outline-offset: 3px; }
.ct-tile__icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 4px; border-radius: 16px; background: rgba(19, 168, 158, 0.12); color: var(--teal-ink); }
.ct-tile__label { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray); }
.ct-tile__value { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-heading); font-weight: 800; font-size: 1.08rem; color: var(--navy); overflow-wrap: anywhere; }
.ct-tile__tag { padding: 1px 7px; border-radius: 6px; background: rgba(19, 168, 158, 0.12); font-family: var(--font-body); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; color: var(--teal-text); }
@media (max-width: 479px) { .ct-tile { padding: 22px 12px; } .ct-tile__value { font-size: 0.95rem; } }
.ct-247 { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 16px 0 0; padding: 18px 22px; border-radius: 20px; background: linear-gradient(135deg, #0B2545 0%, #0F4C75 55%, #13A89E 130%); font-family: var(--font-heading); font-weight: 800; font-size: 1.1rem; color: #FFFFFF; }
.ct-247__dot { width: 10px; height: 10px; border-radius: 50%; background: #FFFFFF; animation: ct-pulse 2s ease-in-out infinite; }
@keyframes ct-pulse { 50% { transform: scale(1.5); opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .ct-247__dot { animation: none; } }

/* FAQ accordion: only max-height animates */
.ct-faq { background: #F8FAFB; }
.ct-acc { max-width: 680px; margin: 0 auto; border-top: 1px solid rgba(11, 37, 69, 0.1); }
.ct-acc__item { border-bottom: 1px solid rgba(11, 37, 69, 0.1); }
.ct-acc__item h3 { margin: 0; }
.ct-acc__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 56px; padding: 16px 4px; border: 0; background: none; font-family: var(--font-heading); font-weight: 700; font-size: 1.02rem; text-align: left; color: var(--navy); cursor: pointer; }
.ct-acc__q:focus-visible { outline: 3px solid var(--teal-ink); outline-offset: 2px; border-radius: 8px; }
.ct-acc__icon { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: rgba(19, 168, 158, 0.12); transition: transform 350ms ease; }
.ct-acc__icon::before, .ct-acc__icon::after { content: ""; position: absolute; left: 8px; right: 8px; top: 13px; height: 2px; border-radius: 2px; background: var(--teal-ink); }
.ct-acc__icon::after { transform: rotate(90deg); }
.ct-acc__q[aria-expanded="true"] .ct-acc__icon { transform: rotate(45deg); } /* plus turns into an X */
.ct-acc__a { max-height: 0; overflow: hidden; visibility: hidden; transition: max-height 350ms ease, visibility 0s 350ms; }
.ct-acc__q[aria-expanded="true"] + .ct-acc__a, .ct-acc__item:has([aria-expanded="true"]) .ct-acc__a { visibility: visible; transition: max-height 350ms ease; }
.ct-acc__a p { margin: 0; padding: 0 44px 18px 4px; line-height: 1.7; color: var(--gray); }
@media (prefers-reduced-motion: reduce) { .ct-acc__a, .ct-acc__icon { transition: none; } }

/* timeline: the About page's .journey, narrower */
.ct-journey { max-width: 640px; margin-top: clamp(24px, 3vw, 36px); }

.ct-close { padding-block: clamp(32px, 4vw, 48px) clamp(48px, 6vw, 72px); text-align: center; }
.ct-close__line { max-width: 48ch; margin: 0 auto; font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; line-height: 1.5; color: var(--navy); }

/* ===== Privacy Policy (/privacy-policy): an 800px reading column (.pp-wrap) inside the normal .container ===== */
.pp { padding-block: clamp(32px, 4vw, 56px) clamp(48px, 6vw, 80px); }
.pp-wrap { max-width: 800px; margin-inline: auto; }
.pp-head { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid rgba(11, 37, 69, 0.1); }
.pp-head h1 { margin: 0 0 8px; font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.025em; font-size: clamp(1.8rem, 3.2vw, 2.4rem); color: var(--navy); }
.pp-date { margin: 0; font-size: 0.86rem; color: var(--gray); }
.pp-note { margin: 0 0 24px; padding: 16px 18px; border: 1px dashed #E8C38A; border-radius: 12px; background: #FFF8EC; font-size: 0.88rem; line-height: 1.6; color: #6B4A12; }
.pp-toc { margin-bottom: clamp(16px, 2vw, 24px); padding: 24px 26px; border-radius: 18px; background: #F8FAFB; }
.pp-toc__label { margin: 0 0 10px; font-family: var(--font-heading); font-weight: 800; color: var(--navy); }
.pp-toc ol { display: grid; gap: 6px; margin: 0; padding-left: 22px; color: var(--gray); }
.pp-toc a { color: var(--teal-text); text-decoration: none; }
.pp-toc a:hover { text-decoration: underline; }
.pp-toc a:focus-visible, .pp-mail a:focus-visible { outline: 3px solid var(--teal-ink); outline-offset: 2px; border-radius: 4px; }
.pp-sec { padding-block: 28px; border-bottom: 1px solid rgba(11, 37, 69, 0.1); scroll-margin-top: calc(var(--header-h) + 16px); } /* anchor jumps clear the sticky header */
.pp-sec:last-child { border-bottom: 0; }
.pp-sec h2 { margin: 0 0 12px; font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.02em; font-size: 1.3rem; color: var(--navy); }
.pp-sec__n { color: var(--teal-text); }
.pp-sec p { margin: 0 0 12px; font-size: 0.96rem; line-height: 1.75; color: var(--navy); }
.pp-sec p:last-child { margin-bottom: 0; }
.pp-mail { margin-top: 16px !important; padding: 20px; border-radius: 18px; background: #F8FAFB; text-align: center; }
.pp-mail a { font-weight: 700; color: var(--navy); text-decoration: none; transition: color 200ms ease; }
.pp-mail a:hover { color: var(--teal-text); }
@media (prefers-reduced-motion: no-preference) { html:has(.pp) { scroll-behavior: smooth; } }

/* ===== 404 page (design/404.html) ===== */
.nf { display: flex; align-items: center; justify-content: center; min-height: calc(100svh - var(--header-h)); padding-block: 48px; text-align: center; } /* fills the screen under the header */
.nf .container { width: 100%; }
.nf-wrap { max-width: 700px; margin-inline: auto; }
.nf-art { display: block; width: 200px; max-width: 100%; height: auto; margin: 0 auto 12px; }
.nf-node { animation: nf-pulse 2.4s ease-in-out infinite; }
.nf-node--lost { animation-delay: 1.2s; }
@keyframes nf-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .nf-node { animation: none; opacity: 0.6; } }
.nf-code { margin: 0; font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-size: clamp(3.5rem, 8vw, 5.5rem); color: var(--navy); }
.nf-code span { color: var(--teal-ink); }
.nf h1 { margin: 12px 0; font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.02em; font-size: clamp(1.3rem, 2.4vw, 1.7rem); color: var(--navy); }
.nf-body { max-width: 44ch; margin: 0 auto 28px; line-height: 1.7; color: var(--gray); }
.nf-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 24px; }
.nf-actions .btn-primary { height: 52px; }
.btn-outline { display: inline-flex; align-items: center; height: 52px; padding: 0 26px; border: 1.5px solid rgba(11, 37, 69, 0.2); border-radius: 999px; background: #FFFFFF; font-family: var(--font-heading); font-weight: 700; color: var(--navy); text-decoration: none; transition: border-color 200ms ease, color 200ms ease; }
.btn-outline:hover { border-color: var(--teal-ink); color: var(--teal-text); }
.nf-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.nf-pill { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: 999px; background: #F4F6F8; font-size: 0.88rem; font-weight: 600; color: var(--ink); text-decoration: none; transition: background-color 200ms ease, color 200ms ease; }
.nf-pill:hover { background: rgba(19, 168, 158, 0.12); color: var(--teal-text); }
.btn-outline:focus-visible, .nf-pill:focus-visible { outline: 3px solid var(--teal-ink); outline-offset: 3px; }

/* Insights + About heroes: the square video matches the Home hero video's height (~25vw, max 360px),
   with tighter padding, so the hero is no taller than Home's */
.ins-hero, .ab-hero { padding-block: clamp(24px, 3vw, 44px); }
.ins-hero .erp-hero__media, .ab-hero__media { justify-self: center; width: clamp(220px, 25vw, 360px); }
@media (max-width: 899px) { .ins-hero .erp-hero__media, .ab-hero__media { width: min(240px, 66%); max-width: none; } }

/* ===== Global header (markup written into every page by source/header/apply_header.py) ===== */
.site-header { position: sticky; top: 0; z-index: 100; background: #FFFFFF; border-bottom: 1px solid transparent; transition: border-color 200ms ease, box-shadow 200ms ease; }
.site-header.is-scrolled { border-bottom-color: rgba(11, 37, 69, 0.08); box-shadow: 0 4px 20px -8px rgba(11, 37, 69, 0.08); }
.header__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--header-h); }
.logo { display: inline-flex; align-items: center; flex: none; border-radius: 6px; }
.logo img { display: block; width: auto; height: 40px; }
.nav-wrap { position: relative; flex: 1; align-self: stretch; display: flex; align-items: center; justify-content: center; }
.nav { display: flex; align-items: center; justify-content: center; gap: 8px; }
.nav__link { padding: 10px 16px; border-radius: 10px; font-family: var(--font-body); font-weight: 600; font-size: 0.94rem; color: #2B3440; text-decoration: none; transition: color 180ms ease, background-color 180ms ease; }
.nav__link:hover { color: var(--navy); background: #F4F6F8; }
.nav__link.is-current { color: var(--navy); }
/* active-page indicator: the site's dotted connector line + glowing node */
.nav__rail { position: absolute; left: 0; right: 0; bottom: 2px; height: 3px; pointer-events: none; }
.nav__rail::before { content: ""; position: absolute; left: var(--rail-start, 14px); right: var(--rail-end, 14px); top: 50%; height: 1.5px; transform: translateY(-50%); background: repeating-linear-gradient(90deg, rgba(19, 168, 158, 0.35) 0 4px, transparent 4px 9px); } /* start/end set by script.js to match the Home..About link centres -- the dot's actual travel range */
.nav__node { position: absolute; top: 50%; left: 0; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px rgba(19, 168, 158, 0.18), 0 0 8px rgba(19, 168, 158, 0.5); opacity: 0; } /* hidden until script.js places it */
.nav__node.is-placed { transition: left 350ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 250ms ease; } /* no slide-in from 0 on load */
@media (prefers-reduced-motion: reduce) { .nav__node.is-placed { transition: opacity 250ms ease; } }
.btn-book { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 22px; border-radius: 999px; background: linear-gradient(135deg, #003E52, #006E8C); font-family: var(--font-heading); font-weight: 700; font-size: 0.9rem; color: #FFFFFF; text-decoration: none; white-space: nowrap; box-shadow: 0 10px 22px -10px rgba(0, 62, 82, 0.55); transition: transform 180ms ease, box-shadow 180ms ease; }
.btn-book:hover { transform: translateY(-1px); box-shadow: 0 14px 26px -10px rgba(0, 62, 82, 0.6); }
@media (prefers-reduced-motion: reduce) { .btn-book:hover { transform: none; } }
.header__cta { flex: none; }
:is(.nav__link, .btn-book, .hamburger, .mobile-link, .logo):focus-visible { outline: 3px solid var(--teal-ink); outline-offset: 3px; }
.hamburger, .mobile-panel { display: none; }

@media (max-width: 899px) {
  .nav-wrap, .header__cta .btn-book { display: none; }
  .hamburger { position: relative; display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1.5px solid rgba(11, 37, 69, 0.16); border-radius: 10px; background: #FFFFFF; cursor: pointer; }
  .hamburger span, .hamburger span::before, .hamburger span::after { position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; margin-left: -9px; border-radius: 2px; }
  .hamburger span::before, .hamburger span::after { content: ""; background: var(--navy); transition: transform 220ms ease; }
  .hamburger span::before { transform: translateY(-4px); }
  .hamburger span::after { transform: translateY(4px); }
  .hamburger[aria-expanded="true"] span::before { transform: rotate(45deg); } /* two bars cross into an X */
  .hamburger[aria-expanded="true"] span::after { transform: rotate(-45deg); }
  .mobile-panel { position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; overflow-y: auto; padding: 8px clamp(20px, 5vw, 56px) 32px; background: #FFFFFF; border-top: 1px solid rgba(11, 37, 69, 0.08); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 220ms ease, transform 220ms ease, visibility 0s 220ms; }
  .mobile-panel.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity 220ms ease, transform 220ms ease; }
  .mobile-link { display: flex; align-items: center; min-height: 72px; padding: 22px 4px; border-bottom: 1px solid rgba(11, 37, 69, 0.08); font-family: var(--font-heading); font-weight: 700; font-size: 1.2rem; color: var(--navy); text-decoration: none; }
  .mobile-link.is-current { color: var(--teal-text); }
  .mobile-panel .btn-book { width: 100%; height: 52px; margin-top: 24px; font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .mobile-panel, .mobile-panel.is-open, .hamburger span::before, .hamburger span::after { transition: none; } }

/* ===== Phones: every page follows the Home phone rules (2026-10-03) =====
   Each section fits one 390x844 screen (768px under the header): ~40px section padding, Home-size
   headings and buttons, hero order headline -> paragraph -> video -> button, cards compacted. */
@media (max-width: 639px) {
  /* section rhythm */
  .ab-lead, .ab-why, .ab-how, .ab-journey, .ab-chat, .ab-team, .ct-faq, .ct-next, .work-erp, .work-web, .work-mobile, .work-industries, .hosting { padding-block: 40px; }
  .work-intro { padding-block: 32px 24px; }
  .work-stats { padding-block: 24px; }

  /* heroes: same order and sizes as Home (the copy column dissolves so the video can sit between paragraph and button) */
  .erp-hero__grid { row-gap: 0; }
  .erp-hero__copy, .ab-hero__copy { display: contents; }
  .erp-hero__media, .ab-hero__media, .ins-hero .erp-hero__media, :is(.ai-hero, .sm-hero) .erp-hero__media { order: 4; width: 200px; max-width: none; margin: 0 auto 22px; }
  .erp-hero__cta { order: 5; }
  .erp-hero h1, :is(.ai-hero, .sm-hero) h1, .ab-hero h1 { margin-bottom: 14px; font-size: clamp(1.75rem, 7.4vw, 2.25rem); line-height: 1.15; }
  .erp-hero__body, .ab-hero__body { margin-bottom: 22px; font-size: 1rem; line-height: 1.6; }
  .ab-hero__grid { row-gap: 0; }
  .ab-hero__body { margin-bottom: 22px; }
  .erp-hero__cta .btn-primary { height: 46px; --chip: 34px; padding: 0 6px 0 20px; font-size: 14px; }

  /* Odoo ERP: "what a project covers" list */
  .erp-steps__item { padding-bottom: 14px; }
  .erp-steps h3 { font-size: 0.98rem; }
  .erp-steps p { font-size: 0.86rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

  /* ...in two columns on phones, so all eight fit one screen */
  .erp-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 14px; padding-left: 0; }
  .erp-steps::before { display: none; }
  .erp-steps__item { padding: 0 0 0 14px; }
  .erp-steps__item::before { left: 0; top: 7px; }
  .erp-steps h3 { font-size: 0.92rem; line-height: 1.3; }
  .erp-steps p { font-size: 0.8rem; -webkit-line-clamp: 3; }

  /* Custom software: compare panels */
  .compare__side { padding: 22px 20px; }
  .compare__side h3 { margin-bottom: 12px; font-size: 1.02rem; }
  .compare__list { gap: 8px; }
  .compare__list li { padding-left: 26px; font-size: 0.9rem; line-height: 1.45; }

  /* AI: two things */
  .stamp-row { padding-block: 16px; column-gap: 14px; grid-template-columns: 44px minmax(0, 1fr); }
  .stamp { width: 44px; height: 44px; }
  .stamp-row p { font-size: 0.9rem; line-height: 1.5; }

  /* Social media: the week as a 2x2 grid */
  .week { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; column-gap: 12px; }
  .week__stop { min-width: 0; padding-inline: 0; }
  .week__stop h3 { font-size: 0.98rem; margin-bottom: 4px; }
  .week__stop p { font-size: 0.85rem; line-height: 1.45; }

  /* Work: the 12 ERP tiles become one swipeable row (like the Web App gallery) instead of a 3,500px stack */
  .bento { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; grid-auto-rows: auto; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; }
  .bento::-webkit-scrollbar { display: none; }
  .bento-card, .bento-card--xl, .bento-card--tall, .bento-card--wide { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; scroll-snap-align: start; }
  .bento-card--xl .bento-card__title { font-size: 1.05rem; }

  /* case studies */
  .pain { padding: 12px 14px; font-size: 0.92rem; }
  .build-rows { gap: 10px; }
  .build-row { font-size: 0.93rem; line-height: 1.5; }
  .build-row__icon { width: 30px; height: 30px; }
  .cs-built .cs-h2 { margin-bottom: 8px; }
  .build-rows { gap: 8px; }
  .build-row { font-size: 0.88rem; }

  /* Insights list: thumbnail beside the text */
  .art-row { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; align-items: start; padding: 12px; }
  .art-row__img, .art-row .art-row__img { aspect-ratio: 1 / 1; border-radius: 12px; }
  .art-row__title { font-size: 1rem; }
  .art-row__excerpt { font-size: 0.88rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

  /* About: leaders as compact rows (photo beside name, title and line) */
  .lead-pair { gap: 10px; }
  .lead-card { display: grid; grid-template-columns: 88px minmax(0, 1fr); grid-template-areas: "photo name" "photo tag" "photo bio"; column-gap: 16px; align-items: start; justify-items: start; padding: 18px; text-align: left; border-radius: 22px; }
  .lead-card__photo { grid-area: photo; width: 88px; height: 88px; margin: 0; border-width: 3px; }
  .lead-card h3 { grid-area: name; margin: 2px 0 6px; font-size: 1.1rem; }
  .lead-card .role-tag { grid-area: tag; margin-bottom: 8px; font-size: 0.7rem; }
  .lead-card__bio { grid-area: bio; max-width: none; font-size: 0.9rem; line-height: 1.5; }
  .lead-pair__link { height: 28px; }
  /* About: stats */
  .ab-stat { padding: 18px 12px; }
  .ab-stats { gap: 12px; }
  /* About: flip cards in a 2x2 grid */
  .flips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .flip { height: 172px; }
  .flip__face { padding: 14px 12px; gap: 6px; }
  .flip__icon { width: 42px; height: 42px; border-radius: 12px; }
  .flip__title { font-size: 0.96rem; }
  .flip__back { font-size: 0.8rem; line-height: 1.45; }
  /* About: journey */
  .journey__step { padding-bottom: 18px; }
  .journey__step h3 { font-size: 1.02rem; margin-bottom: 4px; }
  .journey__step p { font-size: 0.88rem; line-height: 1.55; }
  /* About: chat */
  .chat { gap: 12px; }
  .bubble { max-width: 86%; padding: 10px 14px; font-size: 0.9rem; line-height: 1.5; }
  .bubble-row .bubble { max-width: calc(100% - 44px); }
  .bubble__avatar { width: 32px; height: 32px; }
  .bubble__avatar img { width: 19px; height: 19px; }
  .chat { gap: 10px; }
  .bubble { padding: 9px 12px; font-size: 0.86rem; line-height: 1.45; }
  .bubble--q { max-width: 92%; }
  .bubble-row { gap: 8px; }
  .bubble-row .bubble { max-width: calc(100% - 40px); }
  .ab-chat { padding-block: 28px; }
  .ab-chat .erp-intro { margin-bottom: 16px; }
  .chat { gap: 8px; }
  /* About: rest of the team as compact rows */
  .team-grid { gap: 10px; }
  .team-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "av name" "av tag" "av bio"; column-gap: 14px; justify-items: start; align-items: start; padding: 16px; text-align: left; }
  .team-card__avatar { grid-area: av; width: 56px; height: 56px; margin: 0; }
  .team-card__avatar img { width: 32px; height: 32px; }
  .team-card h3 { grid-area: name; margin: 0 0 4px; font-size: 1.02rem; }
  .team-card .role-tag { grid-area: tag; margin-bottom: 6px; }
  .team-card__bio { grid-area: bio; font-size: 0.88rem; line-height: 1.5; }

  /* page titles at Home's phone size */
  .q-head h1, .ct-intro h1 { font-size: clamp(1.75rem, 7.4vw, 2.25rem); }

  /* Contact: tighter form, the two optional fields side by side */
  .ct-intro { padding-block: 24px 20px; }
  .ct-tabs { margin-bottom: 16px; }
  .ct-form { padding: 20px 18px; }
  .ct-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ct-field { grid-column: 1 / -1; gap: 4px; }
  .ct-field:nth-child(3), .ct-field:nth-child(4) { grid-column: auto; }
  .ct-field :is(input, select) { min-height: 44px; padding-block: 9px; }
  .ct-field textarea { min-height: 88px; }
  .ct-form__foot { margin-top: 14px; gap: 12px; }
  .ct-form__note { font-size: 0.82rem; }
  .ct-tile { padding: 18px 10px; }
}

/* ===== Backend hooks ===== */
/* honeypot: a field bots fill and people never see. Off-screen (not display:none, which some bots skip), out of the tab order */
.hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* result line under a comment / answer form (posted, held for review, or refused) */
.form-status { min-height: 0; margin: 4px 0 8px; font-size: 0.9rem; font-weight: 600; color: var(--navy); }
.form-status:empty { display: none; }
.form-status.is-error { color: #B42318; }
#answerForm input[name="author_name"] { max-width: 320px; }
.accept-btn { min-height: 32px; margin-top: 10px; padding: 4px 12px; border: 1px solid var(--teal-ink); border-radius: 999px; background: #FFFFFF; font: inherit; font-size: 0.84rem; font-weight: 600; color: var(--teal-text); cursor: pointer; }
.accept-btn:focus-visible { outline: 3px solid var(--teal-ink); outline-offset: 2px; }