/* ---------- TOKENS ---------- */
:root {
  --bg:        #0a0a0a;
  --bg-2:      #111111;
  --surface:   #141414;
  --surface-2: #1a1a1a;
  --ink:       #ededed;
  --ink-soft:  #b8b8b8;
  --muted:     #6f6f6f;
  --border:    rgba(255,255,255,0.08);
  --border-2:  rgba(255,255,255,0.14);
  --accent:    #0a0a0a;
  --accent-dk: #1a1a1a;

  --f-sans:   'Inter Tight', system-ui, -apple-system, sans-serif;

  --pad-x:    clamp(1.25rem, 4vw, 4rem);
  --max-w:    1280px;
  --radius:   14px;
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background-color: #0a0a0a; }
body {
  font-family: var(--f-sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-x); }

/* ---------- NAV ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(10,10,10,0.65);
  border-bottom: 1px solid var(--border);
}
.nav__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0.85rem var(--pad-x);
  padding-top: max(0.85rem, env(safe-area-inset-top));
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem;
}
.nav__brand {
  display: inline-flex; align-items: center;
  height: 28px;
  cursor: pointer;
  transition: opacity 0.2s;
}
.nav__brand:hover,
.nav__brand:focus-visible { opacity: 0.75; }
.nav__brand img {
  height: 100%;
  width: auto;
  display: block;
}
.nav__menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 8px 4px;
}
.nav__menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink-soft);
  border-radius: 1px;
}
.nav__mobile-menu {
  display: none;
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 0.25rem var(--pad-x) 0.75rem;
  flex-direction: column;
}
/* Direct-child <a> only. The .nav__mobile-cta wrapper for the
   "Get a Quote" button sits as a sibling and must not inherit the
   menu link styling. */
.nav__mobile-menu > a {
  display: block;
  padding: 0.95rem 0;
  font-size: 1rem;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--border);
  transition: color 0.2s;
}
.nav__mobile-menu > a:last-child { border-bottom: 0; }
.nav__mobile-menu > a:hover { color: var(--ink); }
.nav__mobile-cta {
  padding: 1.25rem 0 0.25rem;
  display: flex;
}
.nav__mobile-cta .btn {
  flex: 1;
  justify-content: center;
}
.nav__links {
  display: none;
  align-items: center;
  gap: 1.5rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
  flex: 1; /* fills space between logo and right edge so the CTA can be
              pushed to the far right via margin-left: auto */
}
.nav__links a:hover { color: var(--ink); }
/* aria-current colours the plain text links teal. Excludes the .btn
   CTA so it doesn't fight the button's own colour scheme. */
.nav__links a:not(.btn)[aria-current="page"],
.nav__mobile-menu > a[aria-current="page"] { color: var(--accent); }
/* Compact CTA inside the desktop nav. margin-left: auto pushes it to the
   far-right of .nav__links (which now has flex:1), separating the button
   from the left-grouped tabs. */
.nav__cta {
  padding: 0.5rem 1rem;
  font-size: 0.88rem;
  min-height: 36px;
  margin-left: auto;
}

/* ---------- DROPDOWN (desktop Services menu) ----------
   Hybrid: opens on hover for pointer devices AND on click (JS toggles
   aria-expanded) for keyboard / touch / accessibility. The "Services"
   word is a <button>, not an <a>, so it never navigates. A small caret
   rotates to indicate state. */
.nav__dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav__dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0;
  font: inherit;
  font-size: 0.92rem;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color 0.2s ease;
}
.nav__dropdown-toggle:hover,
.nav__dropdown-toggle:focus-visible { color: var(--ink); }
.nav__dropdown--active > .nav__dropdown-toggle { color: var(--accent); }
.nav__caret {
  width: 12px;
  height: 12px;
  transition: transform 0.2s ease;
}
.nav__dropdown-toggle[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }
@media (hover: hover) {
  .nav__dropdown:hover .nav__caret { transform: rotate(180deg); }
}

.nav__dropdown-menu {
  position: absolute;
  top: calc(100% + 0.65rem);
  left: -0.75rem;
  min-width: 200px;
  padding: 0.4rem;
  margin: 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 60;
}
/* Invisible bridge so the menu doesn't close as the cursor crosses the
   gap between the toggle and the menu. */
.nav__dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 0.65rem;
  pointer-events: none;
}
@media (hover: hover) {
  .nav__dropdown:hover .nav__dropdown-menu { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .nav__dropdown:hover::after { pointer-events: auto; }
}
.nav__dropdown-toggle[aria-expanded="true"] + .nav__dropdown-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.nav__dropdown-menu a {
  display: block;
  padding: 0.55rem 0.85rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
  border-radius: 8px;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav__dropdown-menu a:hover,
.nav__dropdown-menu a:focus-visible {
  background: rgba(53, 226, 235, 0.08);
  color: var(--ink);
  outline: none;
}
.nav__dropdown-menu a[aria-current="page"] { color: var(--accent); }

/* ---------- DROPDOWN (mobile in-menu accordion) ----------
   Inside the hamburger menu the dropdown opens inline on tap, expanding
   to reveal the 4 sub-links. Tap again to collapse. */
.nav__mobile-dropdown {
  border-bottom: 1px solid var(--border);
}
.nav__mobile-dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.95rem 0;
  font: inherit;
  font-size: 1rem;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s ease;
}
.nav__mobile-dropdown-toggle:hover { color: var(--ink); }
.nav__mobile-dropdown-toggle[aria-expanded="true"] { color: var(--ink); }
.nav__mobile-dropdown-toggle[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }
.nav__mobile-dropdown-menu {
  list-style: none;
  padding: 0 0 0.5rem 1rem;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.nav__mobile-dropdown-toggle[aria-expanded="true"] + .nav__mobile-dropdown-menu {
  max-height: 320px;
}
.nav__mobile-dropdown-menu a {
  display: block;
  padding: 0.7rem 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
  transition: color 0.2s ease;
}
.nav__mobile-dropdown-menu a:hover { color: var(--ink); }
.nav__mobile-dropdown-menu a[aria-current="page"] { color: var(--accent); }
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 999px;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
  min-height: 40px;
  white-space: nowrap;
}
.btn--ghost {
  color: var(--ink);
  border: 1px solid var(--border-2);
}
.btn--ghost:hover { background: rgba(255,255,255,0.06); }
.btn--primary {
  background: var(--accent);
  color: #ffffff;
  font-weight: 600;
}
.btn--primary:hover { background: #333333; transform: translateY(-1px); }
.btn--lg { padding: 0.85rem 1.4rem; font-size: 0.98rem; min-height: 48px; }

@media (min-width: 860px) {
  .nav__links { display: inline-flex; }
}

/* Below the desktop-nav breakpoint (860px), the text links are hidden, so
   the hamburger must show across this whole range — not just on phones.
   Layout: logo far left, menu button far right. Flexbox + order keeps it
   correct regardless of DOM order (the toggle comes first in markup). */
@media (max-width: 859.98px) {
  .nav__inner { justify-content: space-between; }
  .nav__brand { height: 32px; order: 1; }
  .nav__menu-toggle { display: inline-flex; order: 2; }
  .nav__mobile-menu.is-open { display: flex; }
}

/* ---------- HERO ---------- */
.hero {
  position: relative;
  padding: 9rem var(--pad-x) 5rem;
  overflow: hidden;
  text-align: center;
  /* Site-wide: every page's hero fills at least the small-viewport
     height so the next section always starts below the fold on first
     paint. 100svh dodges the iOS Safari address-bar bug. min-height
     (not height) means longer-content heroes simply grow past 100svh
     instead of clipping. Flex column + justify-content: center
     vertically balances the pill/heading/sub/CTAs inside the section. */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero--sm { padding: 8rem var(--pad-x) 3rem; }
.hero__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(53,226,235,0.12), transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 100%, rgba(53,226,235,0.05), transparent 60%);
  pointer-events: none;
}
.hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  pointer-events: none;
}
.hero__inner { position: relative; max-width: 880px; margin: 0 auto; }
.hero__pill {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.45rem 0.9rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-2);
  border-radius: 999px;
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-bottom: 1.75rem;
}
.hero__pill::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--accent);
}
.hero__title {
  font-size: clamp(2.6rem, 7.5vw, 5.5rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin-bottom: 1.5rem;
}
.hero__title em {
  font-style: normal;
  color: var(--accent);
}
.hero__sub {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  color: var(--ink-soft);
  max-width: 580px;
  margin: 0 auto 2.25rem;
  line-height: 1.55;
}
.hero__ctas {
  display: inline-flex; flex-wrap: wrap; gap: 0.75rem;
  justify-content: center;
}
.hero__meta {
  margin-top: 3rem;
  font-size: 0.82rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* Mobile + small tablet: tighten hero padding so the flex-centred
   content sits closer to the true viewport centre (the base 9rem top
   padding is too generous on short phone viewports). The 100svh
   min-height and flex centering come from the base .hero rule. */
@media (max-width: 768px) {
  .hero {
    padding-top: clamp(5rem, 12vh, 8rem);
    padding-bottom: clamp(3rem, 6vh, 5rem);
  }

  /* Home page mobile hero: instead of centring pill + heading + CTAs
     as one block, stretch .hero__inner to fill the available height
     and use space-evenly so there's an equal gap above the pill, on
     either side of the heading, and below the CTAs. Pill sits in the
     upper-third (not flush to the top), heading near the middle,
     CTAs in the lower-third. Zero out the inline bottom margins on
     pill and title so the distribution gaps drive the rhythm, not
     hard-coded spacing. */
  .page-home .hero__inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
  }
  .page-home .hero__pill,
  .page-home .hero__title {
    margin-bottom: 0;
  }

  /* Home hero CTAs stack vertically on mobile instead of sitting
     side by side. */
  .page-home .hero__ctas {
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 0.65rem;
  }
  .page-home .hero__ctas .btn {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }

  /* Small heroes (Our Work, Team, Contact, Process) opt out of the
     universal full-viewport hero on mobile so their content sits right
     below the intro instead of below the fold. Big heroes (Home,
     Services) keep the full 100svh so the next section drops below the
     fold on first paint. */
  .hero--sm {
    min-height: auto;
  }

  /* Team page: pull the team cards up close to the hero on mobile. */
  .page-team .section { padding-top: clamp(1.25rem, 5vw, 2.5rem); }
}

/* About page hero: lots of content (pill + heading + 3 paragraphs +
   2 CTAs). Tighten the typography with clamp() so it scales smoothly
   and the entire hero fits within one viewport on every screen size
   from iPhone SE (375x667) up to desktop. Pill near the top, heading
   below it, paragraphs in the middle, buttons at the bottom, driven
   by space-between on the inner flex column. */
/* About hero: a full-viewport shader band holding only the pill + heading,
   vertically centred so the heading commands the screen. */
.page-about .hero {
  justify-content: center;
  min-height: 100svh;
}
@media (min-width: 769px) {
  .page-about .hero { min-height: 100vh; }
}
.page-about .hero__inner {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 3vh, 2.25rem);
  width: 100%;
  /* Sit above the shader canvas (z 0) and the legibility overlay (z 1). */
  position: relative;
  z-index: 2;
}
.page-about .hero__pill { margin-bottom: 0; }
.page-about .hero__title {
  font-size: clamp(2.5rem, 7vw, 6rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 0;
  max-width: 18ch;
}
.hero__visual {
  margin: 4rem auto 0;
  max-width: 1100px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border-2);
  position: relative;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 80px rgba(53,226,235,0.08);
}
.hero__visual::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(10,10,10,0.6));
  pointer-events: none;
}
.hero__visual img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.hero__visual-fill {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(53,226,235,0.18), transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(120,80,255,0.22), transparent 55%),
    radial-gradient(ellipse at 60% 100%, rgba(255,80,140,0.15), transparent 60%),
    linear-gradient(135deg, #14142a, #08081a);
  position: relative;
}
.hero__visual-fill span {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  font-weight: 500;
}
.hero__visual-fill::before {
  content: '';
  position: absolute; inset: 1.5rem;
  border: 1px dashed rgba(255,255,255,0.08);
  border-radius: calc(var(--radius) - 4px);
  pointer-events: none;
}

/* ---------- BUILT FOR / CLIENT MARQUEE ---------- */
.built {
  padding: clamp(3rem, 6vw, 5rem) var(--pad-x);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
}
.built__label {
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 2rem;
}
.built__marquee {
  position: relative;
  max-width: var(--max-w);
  margin: 0 auto;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
          mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
/* The track holds 2 identical copies of the logo list. translating by -50%
   lands the start of copy 2 exactly where copy 1 began, so the loop is
   seamless. Per-item horizontal padding (not flex gap) keeps spacing
   uniform across the copy boundary. flex `gap` would leave the wrap
   point a half-gap short and produce a jump.

   The CSS animation is a no-JS fallback. When script.js loads, it sets
   `animation: none` inline and drives the transform via rAF so the track
   can be swiped/dragged. touch-action: pan-y keeps vertical page scroll
   working on touch devices, so only horizontal-intent gestures reach JS. */
.built__track {
  list-style: none;
  display: flex;
  width: max-content;
  margin: 0;
  padding: 0.5rem 0;
  animation: built-scroll 30s linear infinite;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;
}
.built__item {
  flex: 0 0 auto;
  padding: 0 clamp(1.75rem, 4vw, 3rem);
}
.built__link {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.built__item figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}
/* A single border (not box-shadow) traces the same anti-aliased curve as
   border-radius, so the rounded frame is one continuous outline with no
   sub-pixel seam at the corners. box-sizing: border-box is global. */
.built__item img {
  width: 60px; height: 60px;
  border: 1px solid var(--border);
  border-radius: 12px;
  filter: brightness(0.9);
  pointer-events: none; /* drag/click goes to the <a>, never the <img> */
  -webkit-user-drag: none;
  transition: filter 0.25s ease, border-color 0.25s ease;
}
.built__item figcaption {
  font-size: 0.78rem;
  letter-spacing: -0.01em;
  color: var(--ink-soft);
  white-space: nowrap;
}
.built__link:hover img,
.built__link:focus-visible img {
  filter: brightness(1.1);
  border-color: var(--border-2);
}

@keyframes built-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 560px) {
  .built__item { padding: 0 1.25rem; }
  .built__item img { width: 52px; height: 52px; border-radius: 10px; }
}

/* ---------- BUILT FOR / STATIC 12-CELL GRID (circular client wall) ---------- */
.built__head {
  max-width: 720px;
  margin: 0 auto clamp(2.25rem, 5vw, 3.5rem);
  text-align: center;
}
.built__head .eyebrow { margin-bottom: 1rem; }
.built__head .h2 { margin: 0; }

.built__grid {
  list-style: none;
  max-width: 880px;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1rem, 2vw, 1.5rem);
  justify-items: center;
}
.built__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.5rem;
}
.built__cell .built__link {
  display: block;
  -webkit-tap-highlight-color: transparent;
}
.built__cell figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  margin: 0;
}
/* Circular icon container. Fixed size keeps all circles identical
   regardless of source-image aspect ratio; object-fit: cover crops to fill.
   border-radius: 22% reads as an iOS-style rounded-square app icon, so
   the border + teal hover ring follow the same shape automatically. */
.built__cell img {
  width: 88px;
  height: 88px;
  border-radius: 22%;
  object-fit: cover;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 0 0 1px rgba(53, 226, 235, 0.10) inset;
  filter: brightness(0.92);
  transition: filter 0.25s ease, border-color 0.25s ease,
              box-shadow 0.25s ease, transform 0.25s ease;
}
.built__cell figcaption {
  font-size: 0.85rem;
  letter-spacing: -0.01em;
  color: var(--ink-soft);
  white-space: nowrap;
}
.built__link:hover img,
.built__link:focus-visible img {
  filter: brightness(1.1);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(53, 226, 235, 0.18),
              0 6px 18px rgba(0, 0, 0, 0.35);
  transform: translateY(-2px);
}

@media (max-width: 900px) {
  .built__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .built__cell img { width: 80px; height: 80px; }
}
@media (max-width: 560px) {
  .built__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 1rem;
  }
  .built__cell img { width: 72px; height: 72px; }
  .built__cell figcaption { font-size: 0.78rem; }
}

/* ---------- SECTION SHELL ---------- */
.section { padding: clamp(5rem, 10vh, 8rem) var(--pad-x); }
.section__head { max-width: 720px; margin: 0 auto 4rem; text-align: center; }
.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
  font-weight: 500;
}
.h2 {
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin-bottom: 1rem;
}
.h2 em {
  font-style: normal;
  color: var(--accent);
}
.section__sub {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--ink-soft);
  max-width: 540px;
  margin: 0 auto;
  line-height: 1.55;
}

/* ---------- FEATURE GRID ---------- */
.features__grid {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
.feature {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem 1.75rem;
  overflow: hidden;
  transition: border-color 0.3s, background 0.3s;
}
.feature:hover { border-color: var(--border-2); background: var(--surface-2); }
.feature__icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(53,226,235,0.1);
  border: 1px solid rgba(53,226,235,0.25);
  display: grid; place-items: center;
  margin-bottom: 1.5rem;
  color: var(--accent);
}
.feature__icon svg { width: 18px; height: 18px; }
.feature__num { font-size: 0.85rem; font-weight: 600; color: var(--accent); letter-spacing: 0.02em; line-height: 1; }
.feature__title {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 0.5rem;
}
.feature__body {
  font-size: 0.96rem;
  color: var(--ink-soft);
  line-height: 1.55;
}
.feature__meta {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.6rem;
}
.feature__result {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.feature__result strong { color: var(--accent); font-weight: 500; }
.feature--wide { grid-column: 1 / -1; }

@media (min-width: 760px) {
  .features__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px) {
  .features__grid {
    grid-template-columns: repeat(6, 1fr);
  }
  .feature { grid-column: span 3; }
  .feature--wide { grid-column: span 6; }
  .feature--third { grid-column: span 2; }
}

/* ---------- SHOWCASE / MASONRY ---------- */
.showcase { background: var(--bg-2); }
.masonry {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.55rem;
}
@media (min-width: 600px) {
  .masonry { grid-template-columns: repeat(3, 1fr); gap: 0.8rem; }
}
@media (min-width: 900px) {
  .masonry {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 90px;
    grid-auto-flow: dense;
    gap: 1.1rem;
  }
}

.tile {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  aspect-ratio: 3 / 4;
  display: flex; flex-direction: column;
  transition: transform 0.4s, border-color 0.3s;
  isolation: isolate;
}
.tile:hover { transform: translateY(-4px); border-color: var(--border-2); }
@media (min-width: 900px) {
  .tile { aspect-ratio: auto; grid-row: span 4; }
  .tile--lg    { grid-column: span 2; grid-row: span 5; }
  .tile--wide  { grid-column: span 2; grid-row: span 4; }
  .tile--tall  { grid-row: span 5; }
  .tile--short { grid-row: span 3; }
}

.tile__tag {
  position: absolute;
  top: 0.85rem; right: 0.85rem;
  padding: 0.3rem 0.65rem;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  z-index: 3;
  text-transform: uppercase;
}
.tile__tag--dark {
  background: rgba(255,255,255,0.85);
  border-color: rgba(0,0,0,0.1);
  color: #0a0a0a;
}

/* tiles with real photo */
.tile__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.tile__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.85));
  z-index: 1;
}

.tile__body {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: 1.25rem 1.4rem 1.35rem;
}
.tile__meta {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-bottom: 0.45rem;
}
.tile__title {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: white;
  line-height: 1.1;
}

/* big-type block for placeholder tiles */
.tile__big {
  flex: 1;
  display: flex; align-items: flex-end;
  padding: 1.5rem 1.4rem 0.25rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.95;
  font-size: clamp(1.9rem, 2.8vw, 2.6rem);
}

/* placeholder visual variants */
.tile--orange { background: linear-gradient(135deg, #ef5a26, #d8431a); }
.tile--orange .tile__big, .tile--orange .tile__title { color: #0a0a0a; }
.tile--orange .tile__meta { color: rgba(0,0,0,0.55); }

.tile--cream  { background: #ece3d2; }
.tile--cream .tile__big { color: #0a0a0a; font-weight: 500; }
.tile--cream .tile__title { color: #0a0a0a; }
.tile--cream .tile__meta  { color: rgba(0,0,0,0.5); }

.tile--yellow { background: #f5d935; }
.tile--yellow .tile__big {
  color: #0a0a0a; font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  letter-spacing: -0.01em;
}
.tile--yellow .tile__title { color: #0a0a0a; }
.tile--yellow .tile__meta  { color: rgba(0,0,0,0.55); }

.tile--mint   { background: #c8e0c2; }
.tile--mint .tile__big   { color: #0a2018; font-weight: 500; }
.tile--mint .tile__title { color: #0a2018; }
.tile--mint .tile__meta  { color: rgba(10,32,24,0.5); }

.tile--blob {
  background:
    radial-gradient(circle at 28% 38%, rgba(255,140,80,0.85), transparent 38%),
    radial-gradient(circle at 65% 60%, rgba(255,80,160,0.7), transparent 45%),
    radial-gradient(circle at 50% 55%, rgba(120,80,255,0.55), transparent 55%),
    linear-gradient(135deg, #15102e, #0a0a18);
  color: white;
}

.tile--midnight {
  background:
    radial-gradient(ellipse at top, rgba(0, 0, 0,0.5), transparent 60%),
    linear-gradient(180deg, #160a2e, #08040f);
  color: white;
}

.tile--forest {
  background:
    radial-gradient(ellipse at bottom, rgba(95,158,99,0.3), transparent 60%),
    linear-gradient(180deg, #0a1815, #050d0a);
  color: white;
}

.tile--data {
  background: linear-gradient(135deg, #0d1530, #0a0f24);
  color: white;
}

.tile--crimson {
  background:
    radial-gradient(ellipse at 70% 30%, rgba(200,32,31,0.55), transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(120,20,20,0.4), transparent 60%),
    linear-gradient(180deg, #1c0808, #060202);
  color: white;
}
.tile--crimson::before {
  content: '';
  position: absolute;
  right: -10%; top: 10%; bottom: 10%;
  width: 35%;
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,0.04) 0 14px,
      transparent 14px 28px);
  transform: rotate(8deg);
  z-index: 1;
}

.tile--ember {
  background:
    radial-gradient(circle at 50% 55%, rgba(220,60,40,0.7), transparent 55%),
    radial-gradient(circle at 80% 20%, rgba(255,140,80,0.35), transparent 50%),
    linear-gradient(135deg, #2a0606, #0a0202);
  color: white;
}

/* Tighten tile content on small screens (mobile/tablet packs 2-3 cols) */
@media (max-width: 899px) {
  .tile__body { padding: 0.75rem 0.85rem 0.9rem; }
  .tile__meta { font-size: 0.55rem; letter-spacing: 0.1em; margin-bottom: 0.3rem; }
  .tile__title { font-size: 0.9rem; line-height: 1.1; }
  .tile__big { font-size: clamp(0.95rem, 4vw, 1.5rem); padding: 0.85rem 0.85rem 0.2rem; }
  .tile__tag { font-size: 0.48rem; padding: 0.18rem 0.45rem; top: 0.5rem; right: 0.5rem; letter-spacing: 0.14em; }
  .tile--yellow .tile__big { font-size: clamp(0.85rem, 3.6vw, 1.3rem); }
}
.tile--data::before {
  content: '';
  position: absolute;
  top: 22%; left: 1.2rem; right: 1.2rem; bottom: 30%;
  background:
    repeating-linear-gradient(0deg, transparent 0 18px, rgba(53,226,235,0.12) 18px 19px),
    repeating-linear-gradient(90deg, transparent 0 26px, rgba(255,255,255,0.05) 26px 27px);
  -webkit-mask: linear-gradient(180deg, transparent, black 50%, black);
  mask: linear-gradient(180deg, transparent, black 50%, black);
  z-index: 1;
}
.tile--data::after {
  content: '';
  position: absolute;
  left: 1.4rem; right: 25%; top: 45%; height: 32%;
  background: linear-gradient(180deg, rgba(53,226,235,0.5), transparent);
  -webkit-clip-path: polygon(0% 90%, 12% 60%, 25% 75%, 38% 35%, 52% 55%, 68% 22%, 82% 40%, 100% 12%, 100% 100%, 0% 100%);
  clip-path: polygon(0% 90%, 12% 60%, 25% 75%, 38% 35%, 52% 55%, 68% 22%, 82% 40%, 100% 12%, 100% 100%, 0% 100%);
  z-index: 1;
}

/* ---------- QUOTE ---------- */
.quote {
  padding: clamp(5rem, 10vh, 8rem) var(--pad-x);
  text-align: center;
}
.quote__text {
  max-width: 880px;
  margin: 0 auto;
  font-size: clamp(1.5rem, 3.5vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.quote__text em {
  font-style: normal;
  color: var(--accent);
}
.quote__cite {
  margin-top: 2rem;
  font-size: 0.92rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.quote__cite strong { color: var(--ink-soft); font-weight: 500; }

/* ---------- PROCESS ---------- */
.process { background: var(--bg-2); }
.process__grid {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
.step {
  position: relative;
  padding: 2rem 1.75rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 1.5rem;
}
.step__text { flex: 1 1 220px; min-width: 0; }
.step__art {
  flex: 0 0 auto;
  width: clamp(64px, 24%, 104px);
  margin-left: auto;
  color: var(--accent);
}
.step__art svg { width: 100%; height: auto; display: block; }
.step__num {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--accent);
  margin-bottom: 0.75rem;
}
.step__title {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 0.75rem;
}
.step__body {
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.55;
}
/* "You receive:" line, italic, slightly muted, separated by a thin
   divider so it reads as a distinct deliverable rather than continuing
   the description paragraph. The "You receive:" prefix itself stays
   upright + teal so it scans at a glance. */
.step__receive,
.proc-flow__receive {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
  font-size: 0.88rem;
  font-style: italic;
  color: var(--ink-soft);
  line-height: 1.5;
}
.step__receive strong,
.proc-flow__receive strong {
  font-style: normal;
  font-weight: 500;
  color: var(--accent);
}
/* 4 cards: 1 col on mobile, 2x2 on tablet, 4 across on desktop. Even
   spacing, no orphan. */
@media (min-width: 720px) {
  .process__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .process__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- HOW WE DELIVER / editorial process list (process.html) ---------- */
.proc-flow { background: var(--bg-2); }

.proc-flow__list {
  list-style: none;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0;
}
.proc-flow__step {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: clamp(2.25rem, 4.5vw, 3.5rem) 0;
  border-top: 1px solid var(--border);
}
.proc-flow__step:last-child { border-bottom: 1px solid var(--border); }

.proc-flow__head {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.proc-flow__num {
  display: inline-block;
  font-size: clamp(2.25rem, 4.5vw, 3.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.proc-flow__title {
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
}
.proc-flow__body {
  max-width: 60ch;
}
.proc-flow__body p {
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  color: var(--ink-soft);
  line-height: 1.6;
}

@media (min-width: 820px) {
  .proc-flow__step {
    grid-template-columns: minmax(220px, 0.9fr) minmax(0, 2fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
  }
}

/* ---------- PRICING ---------- */
.pricing__grid {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .pricing__grid { grid-template-columns: repeat(3, 1fr); }
}
.tier {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem 1.75rem;
  display: flex; flex-direction: column;
  transition: border-color 0.3s, background 0.3s;
}
.tier:hover { border-color: var(--border-2); background: var(--surface-2); }
.tier--feature { border-color: var(--border-2); background: var(--surface-2); }
.tier__name {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 0.75rem;
}
.tier__price {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 0.4rem;
}
.tier__price small {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--muted);
  margin-left: 0.3rem;
}
.tier__desc {
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.55;
  margin-bottom: 1.5rem;
}
.tier__list {
  list-style: none;
  display: flex; flex-direction: column;
  gap: 0.7rem;
  margin-bottom: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.tier__list li {
  font-size: 0.92rem;
  color: var(--ink-soft);
  padding-left: 1.4rem;
  position: relative;
  line-height: 1.5;
}
.tier__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.55em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.tier__cta { margin-top: auto; }

/* ---------- FORM ---------- */
.form {
  max-width: 560px;
  margin: 0 auto;
  display: flex; flex-direction: column;
  gap: 1.1rem;
}
.form__row { display: flex; flex-direction: column; gap: 0.45rem; }
.form__row label {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.form__row input,
.form__row textarea {
  font: inherit;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  transition: border-color 0.2s, background 0.2s;
}
.form__row input:focus,
.form__row textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface-2);
}
.form__row textarea { resize: vertical; min-height: 140px; line-height: 1.5; }
.form__contact {
  text-align: center;
  margin-bottom: 2.5rem;
  font-size: 1.05rem;
  color: var(--ink-soft);
}
.form__contact a { color: var(--accent); }
.form__contact a:hover { color: var(--ink); }
.form__submit { align-self: flex-start; margin-top: 0.5rem; }

/* ---------- CTA ---------- */
.cta {
  padding: clamp(5rem, 10vh, 8rem) var(--pad-x);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 50% 50% at 50% 50%, rgba(53,226,235,0.12), transparent 60%);
  pointer-events: none;
}
.cta__inner { position: relative; max-width: 720px; margin: 0 auto; }

/* ---------- FOOTER ---------- */
.footer {
  padding: 4rem var(--pad-x) 2.5rem;
  padding-bottom: max(2.5rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.footer__inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.footer__top {
  margin-bottom: 3rem;
}
.footer__top .nav__brand img { height: 36px; display: block; }
.footer__tagline {
  color: var(--ink-soft);
  font-size: 0.95rem;
  max-width: 48ch;
  margin-top: 0.85rem;
  line-height: 1.5;
}
.footer__cols {
  display: grid;
  /* Mobile/tablet: two columns. DOM order Explore, Contact, Legal, Social
     auto-flows into [Explore][Contact] / [Legal][Social], using the full
     width instead of stacking down the left. */
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1.5rem;
}
@media (min-width: 720px) {
  .footer__cols {
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem;
  }
}
.footer__col h4 {
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}
.footer__col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0;
  margin: 0;
}
.footer__col a {
  font-size: 0.95rem;
  color: var(--ink-soft);
  transition: color 0.2s;
}
.footer__col a:hover { color: var(--ink); }

.footer__social a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.footer__social svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--ink-soft);
  transition: color 0.2s;
}
.footer__social a:hover svg { color: var(--ink); }

.footer__legal {
  max-width: var(--max-w);
  margin: 3rem auto 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 0.82rem;
  color: var(--muted);
}
.footer__url {
  max-width: var(--max-w);
  margin: 0.65rem auto 0;
  text-align: center;
  font-size: 0.82rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* ---------- LEGAL PAGES (privacy.html / terms.html) ---------- */
.legal__wrap {
  max-width: 760px;
  margin: 0 auto;
}
.legal__notice {
  margin-bottom: 2.5rem;
  padding: 0.9rem 1.15rem;
  background: rgba(53, 226, 235, 0.06);
  border: 1px solid rgba(53, 226, 235, 0.25);
  border-radius: 12px;
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.legal__notice strong { color: var(--accent); font-weight: 500; }
.legal__wrap > p {
  font-size: 1rem;
  color: var(--ink-soft);
  line-height: 1.65;
  margin-bottom: 1.1rem;
}
.legal__h2 {
  font-size: clamp(1.2rem, 2.2vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 2.5rem 0 0.85rem;
}
.legal__list {
  list-style: disc;
  padding-left: 1.4rem;
  margin: 0 0 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.legal__list li {
  font-size: 1rem;
  color: var(--ink-soft);
  line-height: 1.6;
}
.legal__wrap a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.2s;
}
.legal__wrap a:hover { color: #333333; }
.legal__wrap strong { color: var(--ink); font-weight: 600; }

/* ---------- BACK-TO-TOP BUTTON ----------
   Fixed bottom-right. Hidden until scrolled past ~400px (JS toggles
   .is-visible). Subtle dark pill with teal hover. */
.back-to-top {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(20, 20, 20, 0.75);
  border: 1px solid var(--border-2);
  color: var(--ink);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 40;
  transition: opacity 0.25s ease, transform 0.25s ease,
              background 0.2s ease, border-color 0.2s ease,
              color 0.2s ease;
}
.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top:hover,
.back-to-top:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  transform: translateY(-2px);
}
.back-to-top svg { width: 20px; height: 20px; display: block; }
@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: opacity 0.2s ease; }
  .back-to-top:hover { transform: none; }
}

/* ---------- REVEAL ANIMATIONS ---------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: var(--d, 0s);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

html, body { overscroll-behavior-y: none; }

/* ==========================================================================
   SERVICES PAGE, SHARED COMPONENTS (tabs · carousel · accordion)
   --------------------------------------------------------------------------
   Used by sections in services.html. All visuals come from existing tokens
   (--bg/--surface/--border/--accent/--radius/--pad-x/--max-w). No new
   colors, no new fonts. Section rhythm uses the existing .section shell;
   reveal animations use the existing .reveal utility (script.js wires it).
   ========================================================================== */

/* ---- Tabs ---- */
.tabs { max-width: var(--max-w); margin: 0 auto; }
.tabs__list {
  display: flex;
  gap: 0.4rem;
  padding: 0.4rem;
  margin: 0 auto 2.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs__list::-webkit-scrollbar { display: none; }
.tabs__tab {
  padding: 0.65rem 1.1rem;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-soft);
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}
.tabs__tab:hover { color: var(--ink); }
.tabs__tab[aria-selected="true"] {
  background: var(--accent);
  color: #ffffff;
}
.tabs__panels { position: relative; }
.tabs__panel { display: none; }
.tabs__panel[data-active="true"] { display: block; }
.tabs__panel-grid {
  display: grid;
  gap: 2rem;
  align-items: center;
  grid-template-columns: 1fr;
}
.tabs__panel-text  { max-width: 520px; }
.tabs__panel-media {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.tabs__panel-media img { width: 100%; height: auto; display: block; }

@media (min-width: 1080px) {
  .tabs__panel-grid {
    grid-template-columns: 1fr 1.2fr;
    gap: 3.5rem;
  }
}

/* ---- Horizontal carousel ---- */
.carousel {
  max-width: var(--max-w);
  margin: 0 auto;
  position: relative;
}
.carousel__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent);
          mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent);
}
.carousel__track {
  list-style: none;
  display: flex;
  gap: 1.25rem;
  margin: 0;
  padding: 0.5rem 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* Vertical page scroll is never hijacked. Native scroller + pan-y means
     vertical-dominant gestures bubble out as page scroll. JS adds mouse-drag
     and arrow paging on top. */
  touch-action: pan-y;
  overscroll-behavior-inline: contain;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--radius); }
.carousel__card {
  flex: 0 0 clamp(240px, 28vw, 320px);
  scroll-snap-align: start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
  min-height: 220px;
  transition: border-color 0.3s, background 0.3s;
}
.carousel__card:hover {
  border-color: var(--border-2);
  background: var(--surface-2);
}
.carousel__card-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(53,226,235,0.1);
  border: 1px solid rgba(53,226,235,0.25);
  display: grid; place-items: center;
  margin-bottom: 1.25rem;
  color: var(--accent);
}
.carousel__card-icon svg { width: 18px; height: 18px; }
.carousel__card-title {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 0.45rem;
}
.carousel__card-body {
  font-size: 0.94rem;
  color: var(--ink-soft);
  line-height: 1.55;
}
.carousel__nav {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
  margin-top: 1.5rem;
}
.carousel__btn {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 50%;
  color: var(--ink);
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}
.carousel__btn:hover {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}
.carousel__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.carousel__btn svg { width: 18px; height: 18px; }

@media (max-width: 720px) {
  .carousel__card { flex: 0 0 80vw; }
  .carousel__nav  { justify-content: center; }
}

/* ---------- TESTIMONIALS (white block on dark page) ---------- */
.testimonials {
  background: #ffffff;
  color: #0a0a0a;
  padding: clamp(4rem, 9vh, 6.5rem) var(--pad-x);
}
.testimonials__inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.testimonials__head { text-align: center; margin-bottom: clamp(2rem, 4vw, 2.75rem); }
.testimonials__head .eyebrow { color: var(--accent-dk); }
.testimonials__head .h2 { color: #0a0a0a; }
.testimonials__head .h2 em { color: var(--accent-dk); font-style: normal; }

/* ---- AnimatedReviewCards: stacked drag/swipe deck (vanilla port) ---- */
@property --reviewcards-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.reviewcards {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* The stage holds the stacked cards; cards are absolutely positioned so
   they overlap, and JS sets each card's depth/position via transforms. */
.reviewcards__stage {
  position: relative;
  width: min(620px, 90vw);
  height: 350px;
  margin: 0 auto;
}

.reviewcards__card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transform-origin: center bottom;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s;
  will-change: transform, opacity;
  touch-action: pan-y;
  -webkit-user-select: none;
          user-select: none;
}
/* The front (active) card can be grabbed and dragged to advance. */
.reviewcards__card[data-active="true"] {
  cursor: grab;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.1);
}
.reviewcards__card[data-active="true"][data-dragging="true"] {
  cursor: grabbing;
  transition: none;
}

/* Border beam: a glowing point travelling around the card edge, drawn as
   a rotating conic-gradient masked down to a thin border ring. */
.reviewcards__beam {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--reviewcards-angle),
              transparent 0deg,
              var(--accent) 12deg,
              var(--accent-dk) 22deg,
              transparent 40deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.reviewcards[data-border-beam="true"] .reviewcards__card[data-active="true"] .reviewcards__beam {
  opacity: 1;
  animation: reviewcards-beam 6s linear infinite;
}
@keyframes reviewcards-beam {
  to { --reviewcards-angle: 360deg; }
}

.reviewcards__top {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.reviewcards__avatar {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-dk));
  color: #062a2c;
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1;
}
.reviewcards__id {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.reviewcards__name { color: #0a0a0a; font-weight: 600; font-size: 1rem; }
.reviewcards__role { color: #5a5a5a; font-size: 0.85rem; }

.reviewcards__stars {
  display: flex;
  gap: 0.2rem;
}
.reviewcards__stars svg {
  width: 18px;
  height: 18px;
  fill: #F5A623;
}

.reviewcards__quote {
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: #0a0a0a;
}
.reviewcards__quote em {
  font-style: normal;
  color: var(--accent-dk);
}

/* Dots reuse the dark-on-white tones from the old white block. */
.reviewcards__dots {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 0.55rem;
  padding: 0;
  margin: 1.6rem 0 0;
}
.reviewcards__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.18);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.reviewcards__dot:hover { background: rgba(0, 0, 0, 0.32); }
.reviewcards__dot--active {
  background: var(--accent-dk);
  transform: scale(1.25);
}
.reviewcards__dot:focus-visible {
  outline: 2px solid var(--accent-dk);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .reviewcards__stage { height: 400px; }
}

/* Motion-sensitive users: no travelling beam, no spring transitions. */
@media (prefers-reduced-motion: reduce) {
  .reviewcards[data-border-beam="true"] .reviewcards__card[data-active="true"] .reviewcards__beam {
    animation: none;
  }
  .reviewcards__card { transition: opacity 0.2s; }
}

/* 5-star rating row sitting under the section heading. */
.testimonials__stars {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 0.85rem;
}
.testimonials__stars svg {
  width: 22px;
  height: 22px;
  fill: #F5A623;
}

/* Dot indicators (one per card). Auto-managed by the carousel JS:
   click a dot to snap to that card, and the active dot is set to the
   nearest card to the viewport centre on any scroll. */
.carousel__dots {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 0.55rem;
  padding: 0;
  margin: 1.4rem 0 0;
}
.carousel__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.carousel__dot:hover { background: rgba(255, 255, 255, 0.45); }
.carousel__dot--active {
  background: var(--accent);
  transform: scale(1.25);
}
.carousel__dot:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
/* ---- Accordion ---- */
.accordion { max-width: 760px; margin: 0 auto; }
.accordion__item { border-bottom: 1px solid var(--border); }
.accordion__item:first-child { border-top: 1px solid var(--border); }
.accordion__heading { margin: 0; }
.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0;
  text-align: left;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
  transition: color 0.2s;
}
.accordion__trigger:hover { color: var(--accent); }
.accordion__trigger::after {
  content: '';
  width: 10px; height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.25s ease;
  flex: 0 0 auto;
  margin-right: 4px;
}
.accordion__trigger[aria-expanded="true"] { color: var(--accent); }
.accordion__trigger[aria-expanded="true"]::after { transform: rotate(-135deg); }
.accordion__panel {
  padding: 0 0 1.25rem;
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.6;
}
.accordion__panel[hidden] { display: none; }

/* ---- Tabs panel content (typography + media variants) ---- */
.tabs__panel-title {
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 1rem;
}
.tabs__panel-text > p {
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
.tabs__panel-list {
  list-style: none;
  display: grid;
  gap: 0.65rem;
  padding: 0;
  margin: 0;
}
.tabs__panel-list li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.5;
}
.tabs__panel-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.55em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(53,226,235,0.5);
}

/* Fill variant (branded panel when no real screenshot exists). */
.tabs__panel-media--fill {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  position: relative;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(53,226,235,0.16), transparent 55%),
    radial-gradient(ellipse at 75% 75%, rgba(53,226,235,0.06), transparent 55%),
    linear-gradient(135deg, var(--surface), var(--bg));
}
.tabs__panel-media--fill::before {
  content: '';
  position: absolute; inset: 1.25rem;
  border: 1px dashed rgba(255,255,255,0.06);
  border-radius: calc(var(--radius) - 4px);
  pointer-events: none;
}
.tabs__panel-icons {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 0.9rem;
  position: relative;
  z-index: 1;
}
.tabs__panel-icons img {
  width: 56px; height: 56px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
}
.tabs__panel-diagram {
  position: relative;
  width: min(80%, 320px);
  aspect-ratio: 1;
  color: var(--accent);
}
.tabs__panel-diagram svg { width: 100%; height: 100%; }

/* Key-points card variant (right side of "Built to last" panels). */
.tabs__panel-points {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.tabs__panel-points h4 {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 0.25rem;
}
.tabs__panel-points ul {
  list-style: none;
  display: grid;
  gap: 0.8rem;
  padding: 0;
  margin: 0;
}
.tabs__panel-points li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  color: var(--ink-soft);
  font-size: 0.96rem;
  line-height: 1.5;
}
.tabs__panel-points li::before {
  content: '✓';
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 20px; height: 20px;
  margin-top: 0.1rem;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  background: rgba(53,226,235,0.12);
  border: 1px solid rgba(53,226,235,0.3);
  border-radius: 6px;
}

/* ==========================================================================
   PRICING PAGE, COMPARISON LAYOUT
   Two-up "vs" sections used twice: ownership/brand contrast, then cost
   contrast. Variants distinguish the "marketplace" (busy/shared) and
   "Erdel" (focused/exclusive) panels.
   ========================================================================== */

.compare {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  align-items: stretch;
}
@media (min-width: 900px) {
  .compare { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}
.compare__card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  overflow: hidden;
  isolation: isolate;
}
.compare__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted);
  width: max-content;
}
.compare__tag::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.compare__title {
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.compare__list {
  list-style: none;
  display: grid;
  gap: 0.7rem;
  padding: 0;
  margin: 0;
}
.compare__list li {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.5;
}
.compare__list li::before {
  content: '';
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin-top: 0.15rem;
  border-radius: 5px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-2);
}

/* "Erdel side" variant (teal accents, premium feel). */
.compare__card--ours {
  border-color: rgba(53,226,235,0.35);
  background:
    radial-gradient(ellipse at 100% 0%, rgba(53,226,235,0.10), transparent 55%),
    var(--surface);
  box-shadow: 0 0 60px rgba(53,226,235,0.08);
}
.compare__card--ours .compare__tag { color: var(--accent); }
.compare__card--ours .compare__list li::before {
  content: '✓';
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  background: rgba(53,226,235,0.12);
  border: 1px solid rgba(53,226,235,0.35);
}

/* "Marketplace" visual (crowded grid of dummy listings, your shop highlighted). */
.compare__crowd {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
  padding: 0.85rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 4px);
}
.compare__crowd-tile {
  aspect-ratio: 1;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  position: relative;
}
.compare__crowd-tile--you {
  background:
    radial-gradient(ellipse at center, rgba(53,226,235,0.18), transparent 70%),
    rgba(53,226,235,0.06);
  border-color: rgba(53,226,235,0.4);
  color: var(--accent);
  font-weight: 600;
}
.compare__crowd-tile--you::after {
  content: '';
  position: absolute; inset: -3px;
  border: 1px solid rgba(53,226,235,0.5);
  border-radius: 10px;
  pointer-events: none;
  animation: compare-pulse 2.4s ease-in-out infinite;
}
@keyframes compare-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 0.9; transform: scale(1.04); }
}

/* "Yours" visual (single focused brand panel). */
.compare__solo {
  aspect-ratio: 16 / 10;
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid rgba(53,226,235,0.25);
  background:
    radial-gradient(ellipse at 30% 30%, rgba(53,226,235,0.18), transparent 55%),
    radial-gradient(ellipse at 75% 75%, rgba(53,226,235,0.08), transparent 55%),
    linear-gradient(135deg, var(--surface), var(--bg));
  display: grid;
  place-items: center;
  gap: 0.85rem;
  position: relative;
  overflow: hidden;
}
.compare__solo-inner {
  display: flex; flex-direction: column; align-items: center; gap: 0.85rem;
  position: relative;
}
.compare__solo img {
  width: 72px; height: 72px;
  border-radius: 18px;
  border: 1px solid var(--border-2);
  box-shadow:
    0 0 0 6px rgba(53,226,235,0.08),
    0 0 40px rgba(53,226,235,0.25);
}
.compare__solo-name {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.compare__solo-meta {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Cost contrast: itemized line lists + a "total" footer. */
.compare__lines {
  list-style: none;
  display: grid;
  gap: 0.65rem;
  padding: 0;
  margin: 0;
}
.compare__line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--border);
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.compare__line:last-child { border-bottom: 0; }
.compare__line-label { line-height: 1.35; }
.compare__line-label small {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 0.15rem;
}
.compare__line-price {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
}
.compare__total {
  margin-top: 0.75rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--border-2);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: 0.95rem;
  color: var(--muted);
}
.compare__total strong {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Hero price block (Erdel side of the cost contrast). */
.compare__price {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0.5rem 0 0.25rem;
}
.compare__price-amount {
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--accent);
}
/* Headline variant (same weight/colour/letter-spacing), but the longer
   string ("One app. / One bill.") needs a smaller clamp so it fits the
   card on mobile without overflowing. */
.compare__price-amount--headline {
  font-size: clamp(1.7rem, 4.5vw, 2.8rem);
  line-height: 1.05;
}
.compare__price-unit {
  font-size: 1rem;
  color: var(--ink-soft);
}
.compare__price-note {
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.compare__price-note strong {
  color: var(--ink);
  font-weight: 600;
}
.compare__cta { margin-top: auto; padding-top: 0.5rem; }
.compare__disclaimer {
  max-width: var(--max-w);
  margin: 1.5rem auto 0;
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.55;
}

/* "What's included" simple checklist (Pricing). */
.included {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  gap: 0.85rem 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px)  { .included { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .included { grid-template-columns: repeat(3, 1fr); } }
.included__item {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 1.1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.96rem;
  color: var(--ink);
  line-height: 1.4;
  transition: border-color 0.25s, background 0.25s;
}
.included__item:hover { border-color: var(--border-2); background: var(--surface-2); }
.included__check {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: rgba(53,226,235,0.12);
  border: 1px solid rgba(53,226,235,0.3);
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}

/* ============================================================
   WORK PAGE, compact two-panel project cards (.case-card)
   ------------------------------------------------------------
   Cards are dark, business-card proportioned, text-left /
   image-right on every screen size from 820px up, stacking
   text-on-top / placeholder-below below that. Uniform size,
   uniform radius, generous breathing room on all sides.
   ============================================================ */
/* Filter, single segmented control bar (one rounded outer pill, three
   connected segments inside). Never wraps; padding + font-size clamp so
   all three fit on one line down to ~320px viewports. */
.case-filter {
  display: flex;
  flex-wrap: nowrap;
  width: fit-content;
  margin: 0 auto clamp(1.5rem, 3vw, 2.25rem);
  padding: 4px;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 999px;
  /* Pin the filter to the top of the flex column. Visible cards get
     order values from -N..N via JS (reverse-sort for the Website
     filter), so without this they could end up above the filter. */
  order: -9999;
}
.case-filter__btn {
  flex: 0 0 auto;
  padding: 0.55rem clamp(0.85rem, 3vw, 1.4rem);
  font-size: clamp(0.8rem, 2.4vw, 0.9rem);
  font-weight: 500;
  font-family: inherit;
  line-height: 1.2;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  border-radius: 999px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.case-filter__btn:hover { color: var(--ink); }
.case-filter__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.case-filter__btn--active,
.case-filter__btn--active:hover {
  background: var(--accent);
  color: #ffffff;
}

.cases {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  /* No padding override here. The parent <section class="section cases">
     inherits .section's own clamped horizontal padding so cards have
     consistent breathing room on every screen size. */
}
/* Tighten the gap between the hero intro and the filter bar. The
   .section default top padding (5 to 8rem) plus the hero's own bottom
   padding leaves a visible empty band, so we shrink the top padding
   on the cases section specifically. The bottom padding stays at the
   default to keep balance below the cards. */
section.cases.section {
  padding-top: clamp(1.25rem, 3vh, 2.25rem);
}
/* Mobile: keep the horizontal padding generous so the cards visibly
   float off the edges instead of butting up against them. */
@media (max-width: 640px) {
  section.cases.section {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: clamp(1rem, 3vh, 2rem);
    padding-bottom: clamp(3rem, 8vh, 5rem);
  }
}

.case-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  /* Mobile (stacked): text row auto-sizes to fit the full description
     plus actions, image row is capped at a sensible ~4:3-ish height so
     it never dominates the screen. */
  grid-template-rows: auto 240px;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease,
              background 0.3s ease, box-shadow 0.3s ease;
}
/* Stretched-link: the whole card surface becomes the click target,
   while the accessible name remains the inner anchor's text. */
.case-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
}
/* The class selector above wins over the UA stylesheet's [hidden]
   rule, so [hidden] wouldn't actually hide a filtered-out card. This
   higher-specificity rule restores the expected behaviour. */
.case-card[hidden] { display: none; }
.case-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-2);
  background: var(--surface-2);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.3);
}

/* TEXT PANEL */
.case-card__text {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1.5rem, 3vw, 2rem);
}
.case-card__tags {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}
.case-card__title {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
}
.case-card__desc {
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  color: var(--ink-soft);
  line-height: 1.5;
  max-width: 44ch;
}
.case-card__link {
  margin-top: auto;          /* pin to bottom of text panel */
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding-top: 0.85rem;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  transition: gap 0.2s ease;
}
.case-card__link:hover,
.case-card__link:focus-visible { gap: 0.7rem; }
.case-card__link span { display: inline-block; transition: transform 0.25s ease; }
.case-card:hover .case-card__link span { transform: translateX(4px); }

/* Action row: pin to bottom of the text panel and pair the primary
   "Case study" link with the secondary "Visit site" pill. Generous
   top padding keeps the buttons clear of the description text; the
   row gap keeps the two buttons visibly separated. */
.case-card__actions {
  margin-top: auto;
  padding-top: 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.case-card__actions .case-card__link {
  margin-top: 0;
  padding-top: 0;
  align-self: center;
}
/* Secondary outline pill. position:relative + z-index lifts it above
   the stretched .case-card__link::after so the external link is clickable. */
.case-card__visit {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: transparent;
  transition: background 0.2s ease, color 0.2s ease, gap 0.2s ease;
}
.case-card__visit:hover,
.case-card__visit:focus-visible {
  background: var(--accent);
  color: #ffffff;
  gap: 0.55rem;
}

/* IMAGE PANEL (or per-project placeholder block) */
.case-card__media {
  position: relative;
  overflow: hidden;
  background: var(--bg-2);
  min-height: 180px;
}
.case-card__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s ease, filter 0.6s ease;
}
.case-card:hover .case-card__media img {
  transform: scale(1.04);
  filter: brightness(1.06);
}

/* Per-project coloured placeholders. Same footprint as the <img>; swap
   the placeholder <div> for an <img> when real imagery is ready (see
   the HTML comment in each card). */
.case-card__placeholder {
  width: 100%;
  height: 100%;
  min-height: 180px;
  display: grid;
  place-items: center;
  position: relative;
  transition: filter 0.6s ease, transform 0.6s ease;
}
.case-card__placeholder > span {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.32);
  font-weight: 500;
}
.case-card:hover .case-card__placeholder {
  filter: brightness(1.08);
  transform: scale(1.02);
}

.case-card__placeholder--neck-tapers  { background: linear-gradient(135deg, #1a3d2e 0%, #b8923f 110%); }
.case-card__placeholder--quizly       { background: linear-gradient(135deg, #1a1f4d 0%, #6b46c1 110%); }
.case-card__placeholder--imjustsports { background: linear-gradient(135deg, #0d0d0d 0%, #c8102e 110%); }
.case-card__placeholder--jet-cupping  { background: linear-gradient(135deg, #4a0e0e 0%, #8b1a1a 110%); }
.case-card__placeholder--butterfly    { background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 110%); }
.case-card__placeholder--ezel-world   { background: linear-gradient(135deg, #2a1015 0%, #8b5a2b 110%); }
.case-card__placeholder--hustle       { background: linear-gradient(135deg, #1f1f1f 0%, #3a3a3a 110%); }
.case-card__placeholder--in-season-london { background: linear-gradient(135deg, #2d4a3e 0%, #d4a574 110%); }

/* DESKTOP: two-column, text ALWAYS left, image/placeholder ALWAYS right.
   Every card uses the SAME fixed height. Copy length never changes the
   shape of the card; the image is cover-cropped to fit. */
@media (min-width: 820px) {
  .case-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    grid-template-rows: 1fr;
    /* Fixed height (not min-height) so a tall intrinsic image cannot
       stretch the card. Every card is exactly 380px; the image fills
       its column at 100% height and cover-crops to fit. Text column
       comfortably fits tags + title + the longest current description
       + actions inside this height. */
    height: 380px;
  }
  .case-card__text {
    padding: clamp(1.75rem, 3vw, 2.25rem);
    overflow: hidden;
  }
  .case-card__media { min-height: 0; height: 100%; }
  .case-card__placeholder { min-height: 0; height: 100%; }
}

/* Respect reduced-motion: no hover lift/zoom, no link shift. */
@media (prefers-reduced-motion: reduce) {
  .case-card,
  .case-card__media img,
  .case-card__link,
  .case-card__link span {
    transition: none;
  }
  .case-card:hover { transform: none; box-shadow: none; }
  .case-card:hover .case-card__media img { transform: none; filter: none; }
  .case-card:hover .case-card__placeholder { transform: none; filter: none; }
  .case-card:hover .case-card__link span { transform: none; }
}

/* ============================================================
   .page-light WORK PAGE light-theme overrides
   ------------------------------------------------------------
   Scoped via <body class="page-light"> so only work.html flips
   to a white page. The dark case-cards, dark CTA panel, and
   dark footer stay dark (they're islands on the white canvas).
   Nav backdrop becomes white-translucent, nav text + logo go
   dark so they stay visible. All previously light-on-dark
   text (hero sub, section sub, etc.) is repainted to dark.
   ============================================================ */
.page-light {
  /* Flip the design tokens so every token-driven component (sections,
     cards, borders, muted text, surfaces) repaints for a white page
     automatically. Accent stays the same teal. The footer + any
     intentionally-dark island re-declare these tokens locally below. */
  --bg:        #ffffff;
  --bg-2:      #f7f7f8;
  --surface:   #ffffff;
  --surface-2: #f4f4f5;
  --ink:       #0a0a0a;
  --ink-soft:  #4a4a4a;
  --muted:     #767676;
  --border:    rgba(0,0,0,0.10);
  --border-2:  rgba(0,0,0,0.16);

  background: #ffffff;
  color: #0a0a0a;
}

/* Cards/surfaces sit on a white page: give them a hairline + faint
   lift so they don't disappear into the background. */
.page-light .feature,
.page-light .tier,
.page-light .role-card,
.page-light .team-card,
.page-light .included__item,
.page-light .platform-badge {
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

/* Ghost button hover: the dark-theme white wash is invisible on white. */
.page-light .btn--ghost:hover { background: rgba(0,0,0,0.05); }

/* FOOTER stays dark on light pages (per design): re-declare the dark
   tokens locally so everything inside the footer keeps its dark look,
   and the white logo stays visible. */
.page-light .footer {
  --bg:        #0a0a0a;
  --surface:   #141414;
  --surface-2: #1a1a1a;
  --ink:       #ededed;
  --ink-soft:  #b8b8b8;
  --muted:     #6f6f6f;
  --border:    rgba(255,255,255,0.08);
  --border-2:  rgba(255,255,255,0.14);
  background: #0a0a0a;
  color: #ededed;
}
.page-light .footer .nav__brand img { filter: none; }

/* NAV (light translucent backdrop, dark text, inverted logo).
   Logo invert scoped to .nav so the dark-footer logo stays white. */
.page-light .nav {
  background: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.page-light .nav .nav__brand img { filter: invert(1); }
.page-light .nav__links { color: #4a4a4a; }
.page-light .nav__links a:hover { color: #0a0a0a; }
.page-light .nav__menu-toggle span { background: #333; }
.page-light .nav__mobile-menu {
  background: #ffffff;
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
.page-light .nav__mobile-menu > a {
  color: #333;
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
.page-light .nav__mobile-menu > a:hover { color: #0a0a0a; }
/* Services dropdown toggle on light pages, match the other mobile nav
   items (Home, Our Work, About) so it doesn't read as faded/disabled. */
.page-light .nav__mobile-dropdown-toggle,
.page-light .nav__mobile-dropdown-toggle[aria-expanded="true"] { color: #333; }
.page-light .nav__mobile-dropdown-toggle:hover { color: #0a0a0a; }
/* Services dropdown MENU items (Custom Apps, Booking Apps, E-Commerce
   website, Custom website) on light pages: the base light-grey colour
   is unreadable on the white menu background, so match the parent
   items' #333. Smaller font-size already differentiates them as
   sub-items. */
.page-light .nav__mobile-dropdown-menu a { color: #333; }
.page-light .nav__mobile-dropdown-menu a:hover { color: #0a0a0a; }
/* aria-current stays teal via existing rule, fine on white. */

/* HERO, repaint subdued text + grid pattern for white backdrop. */
.page-light .hero__grid {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.045) 1px, transparent 1px);
}
.page-light .hero__pill {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
  color: #444;
}
.page-light .hero__sub  { color: #555; }
.page-light .hero__meta { color: #777; }

/* Home page: dark teal-tinted charcoal background (still near-black). */
/* Home keeps the white (page-light) theme; the page-home class only
   scopes the mobile hero layout (space-evenly + stacked CTAs) above. */
/* Home page only: footer goes solid black; text colours unchanged. */
.page-home .footer { background: #000000; }

/* ---------- PLATFORM AVAILABILITY (non-clickable capability tags) ---------- */
.platforms {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3.5rem) var(--pad-x);
  text-align: center;
}
.platforms__label {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.1rem;
}
.platforms__list {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0;
  margin: 0;
}
/* Capability tag: rounded pill, subtle surface + border, brand-teal
   icon. Non-interactive: no pointer cursor, no hover state, no link. */
.platform-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 1.05rem;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
  cursor: default;
  user-select: none;
}
.platform-badge svg {
  width: 17px;
  height: 17px;
  fill: var(--accent);
  flex-shrink: 0;
}

/* ---------- CASE STUDY HERO (brand-coloured per page) ----------
   Each case study body carries two CSS vars set inline:
       --cs-hero-bg: <brand colour>
       --cs-hero-ink: <readable text colour against that bg>
   To restyle a case study later, just edit those two values on its
   <body>. Only the hero section is affected; everything below is
   unchanged. */
.case-study .hero {
  background: var(--cs-hero-bg, var(--bg));
  color: var(--cs-hero-ink, var(--ink));
}
/* Hide the default teal radial + grid overlays so the brand colour
   reads cleanly. */
.case-study .hero .hero__bg,
.case-study .hero .hero__grid { display: none; }
/* Title + pill text follow the chosen ink colour. */
.case-study .hero .hero__title,
.case-study .hero .hero__pill { color: var(--cs-hero-ink, var(--ink)); }
/* Pill surface tinted from the ink colour so it stays legible on
   any brand background without per-page tuning. */
.case-study .hero .hero__pill {
  background: color-mix(in srgb, var(--cs-hero-ink) 14%, transparent);
  border-color: color-mix(in srgb, var(--cs-hero-ink) 28%, transparent);
}
.case-study .hero .hero__pill::before {
  background: var(--cs-hero-ink);
  box-shadow: 0 0 8px color-mix(in srgb, var(--cs-hero-ink) 55%, transparent);
}
/* Home page only: "Built for" logo band stands out as a slightly
   lifted dark charcoal between the testimonials and the process
   section. Borders stay subtle so the colour change does the
   separation, not a hard line. */
.page-home .built {
  background: #1A1F22;
  padding-top: clamp(4rem, 7vw, 6rem);
  padding-bottom: clamp(4rem, 7vw, 6rem);
  border-top-color: rgba(255, 255, 255, 0.06);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* Work page: pull the filter toggle closer to the hero intro. */
.page-light .hero--sm { padding-bottom: 1rem; }
.page-light section.cases.section { padding-top: clamp(0.25rem, 1vh, 0.75rem); }

/* SECTION HEADS (h2 inherits black from body; only sub needs repaint). */
.page-light .section__sub { color: #555; }

/* CTA, anchor as a full-width dark band on the white page so its
   internal light text stays legible. */
.page-light .cta {
  background: var(--bg);
  color: var(--ink);
}

/* Segmented filter control on the light work page, repaint the outer bar
   and inactive labels for white. Active segment stays teal (both themes). */
.page-light .case-filter {
  background: rgba(0, 0, 0, 0.04);
  border-color: var(--accent);
}
.page-light .case-filter__btn { color: #4a4a4a; }
.page-light .case-filter__btn:hover { color: #0a0a0a; }
/* Active segment: white text. Needs page-light scope to beat the
   .page-light .case-filter__btn grey rule above (same specificity, later). */
.page-light .case-filter__btn--active,
.page-light .case-filter__btn--active:hover { color: #ffffff; }
/* Footer is self-contained dark already, no override needed. */
/* ---------- SHOWREEL ----------
   Contained, well under half a desktop screen, centred horizontally
   with the section's own padding giving generous side gutters.
   !important is used so any earlier full-bleed rule (max-w, 100vw,
   100vh) elsewhere in the cascade cannot win. */
.showreel {
  margin: 0 auto !important;
  width: 100% !important;
  max-width: 600px !important;
  padding: 1.5rem 0 !important;
  text-align: left;
}
.showreel__frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  max-width: 600px;
  max-height: none;
  min-height: 0;
  margin: 0 auto;
}
.showreel__video {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain;
  cursor: pointer;
}
/* Mobile: scale down further so it stays a contained vignette, not
   a near-full-width block. */
@media (max-width: 640px) {
  .showreel {
    max-width: min(420px, 85vw) !important;
  }
  .showreel__frame { max-width: 100%; }
}
.showreel__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: clamp(64px, 8vw, 88px);
  height: clamp(64px, 8vw, 88px);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(10,10,10,0.55);
  border: 1px solid var(--border-2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ink);
  transition: background 0.2s, transform 0.2s, opacity 0.25s;
}
.showreel__play:hover {
  background: var(--accent);
  color: var(--bg);
  transform: scale(1.04);
}
.showreel__play svg {
  width: 38%;
  height: 38%;
  fill: currentColor;
  transform: translateX(2px);
}
.showreel__frame.is-playing .showreel__play {
  opacity: 0;
  pointer-events: none;
}
/* Speaker icon, only shown when sound couldn't start automatically
   (rare edge case for users who reach the video before any click/tap). */
.showreel__unmute {
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: rgba(10, 10, 10, 0.65);
  border: 1px solid var(--border-2);
  border-radius: 50%;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  z-index: 3;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.showreel__unmute svg {
  width: 18px;
  height: 18px;
  display: block;
}
.showreel__unmute:hover {
  background: var(--accent);
  color: var(--bg);
  transform: translateY(-1px);
}
.showreel__unmute[hidden] { display: none; }


/* ============================================================
   ABOUT PAGE, per-section colored bands + readability overrides
   ------------------------------------------------------------
   Flow: purple hero → white values → yellow fit/compare → black
   careers/CTA. Each band is a solid colour; adjacent bands meet
   at a crisp horizontal edge (no gradient blends between them).
   ============================================================ */

/* ----- HERO PURPLE BAND ----- */
.about-band--purple {
  background: #2a1a4d;
  color: var(--ink);
}
/* WebGL plasma canvas: sits at the very back of the hero. It fades in only
   once the JS confirms it can run (desktop, motion allowed, WebGL present);
   otherwise it stays invisible and the solid purple band shows through. */
.hero__shader {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.hero__shader[data-active="true"] { opacity: 1; }
/* Dark legibility layer between the shader and the hero content. Only
   visible while the shader is active so the static purple band is unaffected. */
.hero__shader-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(10, 6, 24, 0.38);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.hero__shader-overlay[data-active="true"] { opacity: 1; }
/* On phones the moving shader is now enabled, so darken the legibility layer a
   touch more to keep the heading crisp against it. */
@media (max-width: 768px) {
  .hero__shader-overlay { background: rgba(10, 6, 24, 0.48); }
}
/* Clean fade at the hero's bottom edge: eases the shader into the solid dark
   intro band that follows, so there is no abrupt seam. */
.about-band--purple.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 160px;
  z-index: 1;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
}

/* ---- About intro: solid dark band under the shader hero ---- */
.about-intro {
  background: var(--bg);
  color: var(--ink);
  text-align: center;
  padding: clamp(4.5rem, 10vh, 7.5rem) var(--pad-x);
}
.about-intro__inner {
  max-width: 65ch;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
.about-intro__p {
  font-size: clamp(1rem, 0.5rem + 1.1vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 60ch;
}
.about-intro__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.6rem, 1.5vw, 0.9rem);
  margin-top: 1.25rem;
}
.about-band--purple .hero__bg {
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(53, 226, 235, 0.20), transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 100%, rgba(53, 226, 235, 0.08), transparent 60%);
}
.about-band--purple .hero__grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}

/* Hero checkmark row (used in the purple band) */
.hero__checks {
  list-style: none;
  margin: 2.25rem auto 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem 1.75rem;
  max-width: 740px;
}
.hero__checks li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.hero__checks svg {
  width: 18px;
  height: 18px;
  color: var(--accent);
  flex-shrink: 0;
}

/* ----- WHITE BAND (values) ----- */
.about-band--white {
  background: #ffffff;
  color: #0a0a0a;
}
.about-band--white .eyebrow { color: #0a0a0a; }              /* dark teal */
.about-band--white .h2 { color: #0a0a0a; }
.about-band--white .h2 em { color: #0a0a0a; }
.about-band--white .section__sub { color: #4a4a4a; }
.about-band--white .feature {
  background: #f6f6f6;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.about-band--white .feature:hover {
  background: #efefef;
  border-color: rgba(0, 0, 0, 0.16);
}
.about-band--white .feature__icon {
  background: rgba(0, 0, 0, 0.10);
  border-color: rgba(0, 0, 0, 0.32);
  color: #0a0a0a;
}
.about-band--white .feature__title { color: #0a0a0a; }
.about-band--white .feature__body { color: #4a4a4a; }

/* ----- YELLOW BAND (fit + compare) ----- */
.about-band--yellow {
  background: #f6e158;
  color: #0a0a0a;
}
.about-band--yellow .eyebrow { color: #0a0a0a; }
.about-band--yellow .h2 { color: #0a0a0a; }
.about-band--yellow .h2 em { color: #0a0a0a; }  /* dark amber accent for readability on yellow */
.about-band--yellow .section__sub { color: #1f1f1f; }

/* Fit cards on yellow */
.fit {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .fit { grid-template-columns: repeat(2, 1fr); } }
.fit__card {
  padding: 1.75rem;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.12);
}
.fit__title {
  font-size: 1.15rem;
  font-weight: 600;
  color: #0a0a0a;
  margin-bottom: 1rem;
}
.fit__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0;
  margin: 0;
}
.fit__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #2a2a2a;
}
.fit__mark {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  margin-top: 1px;
}
.fit__card--yes .fit__mark {
  background: rgba(0, 0, 0, 0.15);
  color: #0a0a0a;
}
.fit__card--no .fit__mark {
  background: rgba(0, 0, 0, 0.08);
  color: #555;
}
.fit__mark svg { width: 14px; height: 14px; }

/* Comparison table on yellow */
.cmp-table-wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  overflow-x: auto;
}
.cmp-table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.12);
}
.cmp-table thead { background: rgba(0, 0, 0, 0.04); }
.cmp-table th,
.cmp-table td {
  padding: 0.95rem 1.15rem;
  text-align: left;
  vertical-align: middle;
  font-size: 0.95rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.cmp-table tr:last-child th,
.cmp-table tr:last-child td { border-bottom: 0; }
.cmp-table__row-head {
  font-weight: 500;
  color: #2a2a2a;
  width: 32%;
}
.cmp-table__col {
  font-weight: 600;
  color: #0a0a0a;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cmp-table__col span {
  display: block;
  font-weight: 400;
  font-size: 0.78rem;
  color: #4a4a4a;
  text-transform: none;
  letter-spacing: 0;
  margin-top: 2px;
}
.cmp-table__col--ours { color: #0a0a0a; }
.cmp-table__cell { color: #2a2a2a; }
.cmp-table__cell--ours {
  color: #0a0a0a;
  font-weight: 500;
  background: rgba(0, 0, 0, 0.06);
}
.cmp-table__note {
  max-width: var(--max-w);
  margin: 1rem auto 0;
  font-size: 0.82rem;
  color: rgba(0, 0, 0, 0.55);
  text-align: center;
}

/* Mobile/tablet: collapse the 3-column table into a stack of cards,
   one per row. The original column headers become inline `::before`
   labels on each value cell, so the row reads top-to-bottom with no
   horizontal overflow. Desktop layout is untouched. */
@media (max-width: 720px) {
  .cmp-table-wrap { overflow-x: visible; }
  .cmp-table {
    display: block;
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }
  .cmp-table thead { display: none; }
  .cmp-table tbody { display: block; }
  .cmp-table tbody tr {
    display: block;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 14px;
    margin-bottom: 0.85rem;
    padding: 0.9rem 1.05rem 0.4rem;
  }
  .cmp-table tbody tr:last-child { margin-bottom: 0; }

  .cmp-table__row-head {
    display: block;
    width: auto;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #5a5a5a;
    padding: 0 0 0.7rem 0;
    margin-bottom: 0.65rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }

  .cmp-table__cell {
    display: block;
    padding: 0.55rem 0;
    border-bottom: 0;
    background: transparent;
    color: #2a2a2a;
    font-size: 0.95rem;
    line-height: 1.45;
  }
  .cmp-table__cell--ours {
    background: transparent;
    color: #0a0a0a;
    font-weight: 500;
  }
  /* Column-name label printed above each value. Default = the right
     column ("Templates & marketplaces"); the --ours override below
     swaps it to the left column's label. */
  .cmp-table__cell::before {
    content: "Templates & marketplaces";
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #6a6a6a;
    margin-bottom: 0.2rem;
  }
  .cmp-table__cell--ours::before {
    content: "A bespoke Erdel build";
    color: #0a0a0a;
  }
}

/* ----- BLACK BAND (careers + CTA) ----- */
.about-band--black {
  background: #0a0a0a;
  color: var(--ink);
}

/* Team grid */
.team {
  list-style: none;
  max-width: 880px;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
@media (max-width: 760px) {
  .team { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 380px) {
  .team { grid-template-columns: 1fr; }
}
.team li { display: flex; }
.team-card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  text-align: center;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.team-card:hover {
  border-color: var(--border-2);
  background: var(--surface-2);
  transform: translateY(-3px);
}
.team-card__avatar {
  display: block;
  width: 84px;
  height: 84px;
  margin: 0 auto 1.1rem;
  border-radius: 50%;
  object-fit: cover;
  background: linear-gradient(145deg, var(--accent), #1a1a1a);
  border: 2px solid rgba(0,0,0,0.05);
}
.team-card__name {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 0.3rem;
}
.team-card__role {
  font-size: 0.84rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  font-weight: 500;
}

/* Tighter top spacing where one section follows another */
.section--tight { padding-top: 0; }
.roles__lead {
  font-size: 0.98rem;
  color: var(--ink-soft);
  line-height: 1.55;
  margin-top: 0.5rem;
}

/* Careers / role cards (live in the black band, dark card on dark bg) */
.roles {
  list-style: none;
  max-width: 720px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.role-card {
  padding: 1.5rem 1.75rem;
  border: 1px solid var(--accent);
  border-radius: 16px;
  background: var(--surface);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem 1.5rem;
  align-items: center;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.role-card:hover {
  border-color: var(--border-2);
  background: var(--surface-2);
}
@media (max-width: 560px) {
  .role-card { grid-template-columns: 1fr; }
}
.role-card__meta {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 0.55rem;
  font-weight: 500;
}
.role-card__title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 0.4rem;
}
.role-card__desc {
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.55;
}
.role-card__apply {
  padding: 0.55rem 1.05rem;
  font-size: 0.85rem;
  white-space: nowrap;
  min-height: 36px;
}
.roles__open-apply {
  max-width: 720px;
  margin: 2rem auto 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
  text-align: center;
}
.roles__open-apply a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Accessibility helper for the table caption */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- CASE STUDY PAGES (casestudy-*.html) ----------
   Editorial two-column layout per row: label on the left (eyebrow style,
   teal), body copy on the right. Stacks on mobile, thin divider between
   rows for a clean read. */
.cs-content { background: var(--bg-2); }
.cs-section {
  max-width: 1080px;
  margin: 0 auto;
}
.cs-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  padding: clamp(2.25rem, 4.5vw, 3.5rem) 0;
  border-top: 1px solid var(--border);
}
.cs-row:last-child { border-bottom: 1px solid var(--border); }
.cs-label {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  line-height: 1.3;
}
.cs-body { max-width: 65ch; }
.cs-body p {
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  color: var(--ink-soft);
  line-height: 1.65;
  margin: 0;
}
.cs-body p + p { margin-top: 1rem; }
@media (min-width: 820px) {
  .cs-row {
    grid-template-columns: minmax(220px, 0.9fr) minmax(0, 2fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
  }
}

/* ============================================================
   PURPLE THEME — About page: keep the purple hero, make every
   section below it white, and give cards/boxes dark-purple
   (#0a0a0a) borders.
   ============================================================ */
/* Keep the purple hero's teal highlight + dot, even though the
   global accent is now dark purple. */
.about-band--purple .hero__title em { color: #35E2EB; }
.about-band--purple .hero__pill::before {
  background: #35E2EB;
  box-shadow: 0 0 8px #35E2EB;
}
/* About's dark nav bar: active link stays teal so it reads on dark. */
.page-about .nav__links a:not(.btn)[aria-current="page"],
.page-about .nav__mobile-menu > a[aria-current="page"] { color: #35E2EB; }
/* Purple hero fades into white now, not the old dark band. */
.about-band--purple.hero::after {
  background: linear-gradient(to bottom, transparent, #ffffff);
}
/* Intro band: white with dark text + a readable purple ghost button. */
.about-intro { background: #ffffff; color: #0a0a0a; }
.about-intro__p { color: #4a4a4a; }
.about-intro .btn--ghost { color: #0a0a0a; border-color: #0a0a0a; }
.about-intro .btn--ghost:hover { background: rgba(0, 0, 0, 0.06); }
/* "What we believe" cards: white with a dark-purple border. */
.about-band--white .feature { background: #ffffff; border: 1px solid #0a0a0a; }
.about-band--white .feature:hover { background: #faf9ff; border-color: #0a0a0a; }
/* "Right fit" band: yellow -> white, dark-purple bordered cards. */
.about-band--yellow { background: #ffffff; color: #0a0a0a; }
.about-band--yellow .section__sub { color: #4a4a4a; }
.fit__card { border: 1px solid #0a0a0a; }

/* ============================================================
   Consistent purple card borders — every "box" on the light
   pages uses the accent border so it matches the role cards,
   step cards and About cards.
   ============================================================ */
.page-light .feature,
.page-light .feature:hover,
.page-light .tier,
.page-light .tier:hover,
.page-light .tier--feature,
.page-light .case-card,
.page-light .included__item,
.page-light .included__item:hover,
.page-light .platform-badge,
.page-light .team-card,
.page-light .team-card:hover,
.page-light .compare__card,
.page-light .cmp-table {
  border-color: var(--accent);
}