/* ============================================================
   The Creators Firm — hero
   Figma: Stroom Identity, node 3357:2 (Desktop, 1440x810)
   ============================================================ */

/* The display face from the design. One variable file covers both weights it
   uses — Medium (500) for the nav, Bold (700) for the headline — so the
   whole masthead and hero cost a single request. Subset to Latin from
   "TT Ramillas Trial Variable Roman.ttf"; the unsubset original and the full
   woff2 are kept in source/fonts/.

   NOTE: this is the TRIAL cut of TT Ramillas. It is licensed for evaluation
   only — a production licence has to be bought from TypeType before launch. */
@font-face {
  font-family: 'TT Ramillas Trl Variable Roman';
  src: url('/assets/fonts/tt-ramillas-roman-var.woff2') format('woff2');
  font-weight: 200 900;          /* the file's own wght axis range */
  font-style: normal;
  font-display: swap;
}

:root {
  --purple-fill: #824F9A;   /* selected tile, pill, menu item. Nothing else */
  --purple-text: #B082CE;   /* eyebrows, slogans, icons, focus ring */
  --ink: #ffffff;
  --ink-dim: rgba(255, 255, 255, 0.7);

  --font-display: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI',
             system-ui, sans-serif;
  --font-ui: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI',
             system-ui, sans-serif;

  /* 48px at the 1440 design width, holding its proportion as the page scales */
  --edge: clamp(20px, 3.334vw, 48px);

  /* Soft, deep shadow used in place of borders to lift containers off the page */
  --shadow-pop: 0 22px 50px rgba(0, 0, 0, 0.45);
  --shadow-pop-sm: 0 14px 34px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }

html {
  background: #0a0a0a;
}

body {
  margin: 0;
  background: #0a0a0a;
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  letter-spacing: -0.035em;
}


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

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

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

/* --- Hero stage ------------------------------------------
   True parallax: the hero is pinned full-screen (position: fixed) behind
   everything, unchanging — no shrink, no scale, no rounding. A spacer the
   same height as the viewport holds its place in the document flow, so the
   "Trusted by" section (and everything after it) scrolls up in front of it
   like a page being lifted over a fixed background, covering it as it goes. */

.hero {
  position: fixed;
  inset: 0;
  /* Pin to the largest viewport height so the mobile browser bar
     collapsing on scroll doesn't resize (and visibly slide) the image. */
  height: 100lvh;
  z-index: 0;
}

.hero-spacer {
  height: 100vh;
  height: 100lvh;
}

.hero__stage {
  position: absolute;
  inset: 0;
  background: #0a0a0a;
}

/* --- Hero image -------------------------------------------- */

.hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #0a0a0a;
}

.hero__media picture {
  position: absolute;
  inset: 0;
}

.hero__image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /* cover: the hero is a full-bleed fixed background (see .hero) and has to
     run edge-to-edge behind the nav with no letterboxed gap at any viewport
     shape, even at the cost of trimming the image's own far top/bottom. */
  object-fit: cover;
  object-position: 50% 50%;
  pointer-events: none;
}

/* Dark overlay behind the page titles: keeps the headline, sub and button
   readable over bright paintings at the top (behind the nav) and bottom
   (where the copy sits on mobile). */
.hero__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(10, 10, 10, 0.68) 0%,
    rgba(10, 10, 10, 0.22) 32%,
    rgba(10, 10, 10, 0.3) 58%,
    rgba(10, 10, 10, 0.88) 100%
  );
}

/* --- Masthead -------------------------------------------
   Logo, nav and button all centre on the same line (y 87.5 in the design):
   the header starts at the 48px edge and centres a 79px-tall logo. The
   1fr auto 1fr grid puts the nav on the page centre, not between its
   neighbours, which is where the design has it. */

.masthead {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: clamp(14px, 1.8vw, 22px) var(--edge);
  opacity: 0;                       /* faded in on .is-ready */
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.35s ease,
    padding 0.35s ease,
    background 0.3s ease;
}

/* Away from the very top: condense slightly and turn glassy. */
.masthead.is-stuck {
  padding-block: clamp(8px, 1.2vw, 12px);
  background: rgba(10, 10, 10, 0.72);
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
}

.masthead__logo {
  justify-self: start;
  display: block;
}

.masthead__logo img {
  width: auto;
  height: clamp(48px, 5.486vw, 79px);
}

.masthead__social {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}

.masthead__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--ink-dim);
  transition: color 0.2s ease, background 0.2s ease;
}

.masthead__social a:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.08);
}

.masthead__social svg {
  width: 17px;
  height: 17px;
}


.masthead__nav {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  border-radius: 999px;
  box-shadow: var(--shadow-pop-sm);
}

.masthead__nav::-webkit-scrollbar { display: none; }

.masthead__right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 12px;
}

.masthead__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 999px;
  background: #fff;
  color: #0a0a0a;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.4;
  white-space: nowrap;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.25));
  transition: background 0.25s ease, color 0.25s ease;
}

.masthead__cta:hover {
  background: var(--purple-fill);
  color: #fff;
}

/* --- Headline -------------------------------------------
   In the design the block's centre sits at 57.8% of the frame height
   (top 268px, 400px tall, in an 810px frame). Anchoring the centre keeps
   that relationship at any viewport height. */

.hero__copy {
  position: absolute;
  z-index: 2;
  left: var(--edge);
  top: 57.8%;
  transform: translateY(-50%);
  width: clamp(280px, 39.723vw, 572px);
}

/* Image-backed heroes (every page except Home) pin the copy to the
   bottom-left, with the same margin from the bottom as from the left. */
.hero__copy--bottom {
  top: auto;
  bottom: var(--edge);
  transform: none;
}

.hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(38px, 5.834vw, 84px);
  line-height: 0.857;          /* 72 / 84 */
  color: var(--ink);
}

.hero__accent { color: var(--purple-text); }

.hero__sub {
  margin: 16px 0 0;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: clamp(15px, 1.389vw, 20px);
  line-height: 1.35;
  color: var(--ink-dim);
}

/* --- Scroll cue -----------------------------------------
   Not in the static design: the hero does nothing until you scroll, so it
   earns its place. Fades out for good on the first scrub. */

.hero__cue {
  position: absolute;
  z-index: 3;
  right: var(--edge);
  bottom: calc(var(--edge) + 4px);
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0.55;
  transition: opacity 0.6s ease;
}

.hero__cue-text {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}

.hero__cue-line {
  display: block;
  width: 56px;
  height: 1px;
  background: rgba(255, 255, 255, 0.45);
  overflow: hidden;
  position: relative;
}

.hero__cue-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #fff;
  transform-origin: left;
  animation: cue-sweep 2.4s ease-in-out infinite;
}

@keyframes cue-sweep {
  0%        { transform: scaleX(0); }
  45%, 55%  { transform: scaleX(1); }
  100%      { transform: scaleX(0); transform-origin: right; }
}

/* --- Entrance -------------------------------------------
   Held until the hero image has loaded, so the page arrives in one piece
   rather than in the order things happened to load. */

.hero__copy > *,
.hero__cue {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Masthead fades in the same way, but never via transform — transform is
   reserved for the hide-on-scroll slide. */
.is-ready .masthead      { opacity: 1; transition-delay: 0.05s; }
.is-ready .hero__eyebrow { opacity: 1; transform: none; transition-delay: 0.10s; }
.is-ready .hero__title   { opacity: 1; transform: none; transition-delay: 0.18s; }
.is-ready .hero__sub     { opacity: 1; transform: none; transition-delay: 0.30s; }
.is-ready .hero__actions { opacity: 1; transform: none; transition-delay: 0.40s; }
.is-ready .hero__cue     { opacity: 0.55; transform: none; transition-delay: 0.55s; }

/* Declared after the entrance rules so it outranks them: once the hero has
   been scrolled the cue has made its point and does not come back. */
.hero__cue.is-gone,
.is-ready .hero__cue.is-gone {
  opacity: 0;
  pointer-events: none;
}

.boot {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: #0a0a0a;
  pointer-events: none;
  transition: opacity 1s ease;
}

.is-ready .boot { opacity: 0; }

/* --- Trusted by ------------------------------------------
   Three logo carousels. Each row scrolls on its own and adjacent rows run
   in opposite directions. The company list is the COMPANIES array in
   app.js, split across the three rows; each row's logos are rendered twice
   so the scroll can loop seamlessly. Every logo is forced to flat white by
   a filter, so any coloured source file (transparent PNG or SVG) drops in
   without editing. */

.trusted {
  position: relative;
  z-index: 1;
  padding: 64px 0;
  /* Same tone as the rest of the page — no seam where the shrunk hero ends. */
  background: #0a0a0a;
  overflow: hidden;
}

/* Reveal: the label and rows rise and fade in when the section scrolls into
   view (JS adds .is-in — see app.js), so it arrives rather than just being
   there. */
.trusted__label,
.trusted__row {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.trusted.is-in .trusted__label,
.trusted.is-in .trusted__row {
  opacity: 1;
  transform: none;
}

.trusted.is-in .trusted__label          { transition-delay: 0s; }
.trusted.is-in .trusted__row:nth-child(1) { transition-delay: 0.1s; }
.trusted.is-in .trusted__row:nth-child(2) { transition-delay: 0.18s; }
.trusted.is-in .trusted__row:nth-child(3) { transition-delay: 0.26s; }

.trusted__label {
  margin: 0 0 clamp(24px, 3.5vw, 40px);
  padding: 0 var(--edge);
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(255, 255, 255, 0.45);
}

.trusted__rows {
  display: flex;
  flex-direction: column;
}

/* Clips the wide track to the row and fades both edges into the background.
   The vertical padding is the row spacing AND the room the card shadows need
   so `overflow: hidden` doesn't slice them off top and bottom. */
.trusted__row {
  overflow: hidden;
  padding-block: 22px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.trusted__track {
  display: flex;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
  animation-name: trusted-marquee-left;
  animation-duration: var(--marquee-duration, 60s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.trusted__row[data-dir="right"] .trusted__track {
  animation-name: trusted-marquee-right;
}

/* Hovering or tab-focusing a row holds it still. */
.trusted__row:hover .trusted__track,
.trusted__row:focus-within .trusted__track {
  animation-play-state: paused;
}

/* Content is rendered twice; -50% lands copy 2 exactly where copy 1 began. */
@keyframes trusted-marquee-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes trusted-marquee-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

.trusted__item {
  flex: 0 0 auto;
  width: clamp(150px, 18vw, 188px);
  margin-right: clamp(10px, 1.4vw, 16px);
  aspect-ratio: 10 / 6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 1.6vw, 22px);
  /* No border — a raised panel: a touch lighter than the section, lifted on
     a soft shadow. */
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  box-shadow:
    0 6px 16px -4px rgba(0, 0, 0, 0.75),
    0 2px 6px rgba(0, 0, 0, 0.5);
}

.trusted__item img {
  max-width: 80%;
  max-height: 80%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Flatten any logo — colour, greyscale, whatever — to pure white. */
  filter: brightness(0) invert(1);
  opacity: 0.7;
  transition: opacity 0.25s ease;
}

.trusted__item:hover img {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .trusted__track {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
  }

  .trusted__item[aria-hidden="true"] { display: none; }

  .trusted__label,
  .trusted__row {
    opacity: 1;
    transform: none;
    transition: none;
    -webkit-mask-image: none;
            mask-image: none;
  }
}

/* --- Narrow -------------------------------------------- */

@media (max-width: 860px) {
  .masthead {
    grid-template-columns: 1fr auto;
    row-gap: 10px;
  }

  /* Second row: the nav pills span the full width and scroll sideways. */
  .masthead__nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: stretch;
    width: 100%;
  }

  .masthead__nav .tab {
    flex: 1 0 auto;
    text-align: center;
  }

  .masthead__logo img {
    height: 40px;
  }

  /* Home keeps its original centred position; image heroes pin to the bottom. */
  .hero__copy {
    top: calc(var(--edge) + 144px);
    bottom: auto;
    left: var(--edge);
    right: var(--edge);
    /* Lift the block up by 20% of its own height. */
    transform: translateY(-20%);
    width: auto;
    max-width: 30rem;
  }

  .hero__copy--bottom {
    top: auto;
    bottom: 40px;
    transform: none;
  }

  .hero__title  {
    font-size: clamp(42px, 11.5vw, 68px);
    line-height: 0.92;
  }
  .hero__sub    { font-size: 17px; }

  .hero__cue { display: none; }
}

/* --- Reduced motion -------------------------------------
   Scrubbing stays: it is direct manipulation, not motion the page inflicts.
   The decorative entrance and the sweeping cue do not. */

@media (prefers-reduced-motion: reduce) {
  .hero__copy > *,
  .hero__cue {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .masthead {
    opacity: 1;
    transition: background 0.2s ease, backdrop-filter 0.2s ease, border-color 0.2s ease;
  }

  /* Keep the glass, but never slide the header out of view. */
  .masthead.is-hidden { transform: none; }

  .is-ready .hero__cue:not(.is-gone) { opacity: 0.55; }
  .hero__cue-line::after { animation: none; transform: scaleX(1); }
  .boot { transition-duration: 0.2s; }
}

/* ========================================================
   Content sections — Who we are / What we do / How we do it
   / Book a call / Footer
   ======================================================== */

.section {
  position: relative;
  z-index: 1;
  /* Opaque by default — every section after the hero is its own solid black
     layer that slides up and covers the fixed hero behind it (see .hero).
     Nothing here should ever let that fixed layer show back through. */
  background: #0a0a0a;
  padding: 64px var(--edge);
  scroll-margin-top: clamp(80px, 14vw, 128px);
}

.section__inner {
  max-width: 1120px;
  margin: 0 auto;
}

.kicker {
  margin: 0 0 clamp(20px, 3vw, 32px);
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--purple-text);
}

.section__headline {
  margin: 0 0 32px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 4.4vw, 56px);
  line-height: 1.04;
  color: var(--ink);
  max-width: 22ch;
}

/* --- Shared button ------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  border: 0;
  border-radius: 999px;
  background: var(--purple-fill);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1;
  color: #fff;
  white-space: nowrap;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.25));
  transition: background 0.25s ease, color 0.25s ease;
}

.btn:hover {
  background: #fff;
  color: #0a0a0a;
}

.btn--lg {
  padding: 17px 40px;
  font-size: clamp(16px, 1.4vw, 20px);
}

/* --- Who we are --------------------------------------- */

.who__headline {
  margin: 0 0 clamp(24px, 3.5vw, 40px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 6vw, 76px);
  line-height: 0.98;
  color: var(--ink);
}

.who__lead {
  margin: 0;
  max-width: 60ch;
  font-size: clamp(16px, 1.55vw, 21px);
  line-height: 1.55;
  color: var(--ink-dim);
}

.why-exist {
  padding-top: clamp(72px, 10vw, 120px);
  padding-bottom: clamp(72px, 10vw, 120px);
}

.why-exist__inner {
  max-width: 1120px;
}

.why-exist__kicker {
  margin: 0 0 clamp(24px, 3vw, 32px);
}

.why-exist__headline {
  margin: 0 0 32px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 4.4vw, 56px);
  line-height: 1.18;
  color: var(--ink);
  max-width: 22ch;
}

.why-exist__headline span {
  display: block;
  margin-top: 0.15em;
  color: rgba(255, 255, 255, 0.42);
  text-decoration: underline;
  text-decoration-color: var(--purple-text);
  text-decoration-thickness: 4px;
  text-underline-offset: 10px;
}

.why-exist__cta {
  margin-bottom: clamp(48px, 6vw, 72px);
}

.why-exist__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 4vw, 48px) clamp(24px, 5vw, 64px);
  margin-bottom: clamp(48px, 6vw, 72px);
  padding-left: clamp(16px, 2.5vw, 32px);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.why-exist__item-lead {
  margin: 0 0 10px;
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
}

.why-exist__item-lead em {
  font-style: italic;
  font-weight: 400;
  color: var(--ink-dim);
}

.why-exist__label {
  color: var(--purple-text);
}

.why-exist__item-gap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  font-size: clamp(15px, 1.3vw, 18px);
  color: var(--ink-dim);
}

.why-exist__chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-dim);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: var(--shadow-pop-sm);
}

.why-exist__footer {
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.why-exist__close {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 32px);
  line-height: 1.25;
  color: var(--ink);
  max-width: 34ch;
}

.why-exist__close .accent {
  color: var(--purple-text);
}

@media (min-width: 640px) {
  .why-exist__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.who__pillars {
  list-style: none;
  margin: clamp(48px, 7vw, 88px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.5vw, 36px);
}

.who__pillars li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 20px;
  border-top: 2px solid var(--purple-text);
}

.who__pillars strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(16px, 1.5vw, 20px);
  color: var(--ink);
}

.who__pillars span {
  font-size: clamp(13px, 1.15vw, 15px);
  line-height: 1.45;
  color: var(--ink-dim);
}

/* --- What we do -------------------------------------- */

.do__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2vw, 28px);
}

.practice {
  padding: clamp(28px, 3.2vw, 44px);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 16px;
  box-shadow: var(--shadow-pop);
}

.practice__name {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 32px);
  color: var(--ink);
}

.practice__tag {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.35;
  color: var(--purple-text);
}

.practice__body {
  margin: 0 0 22px;
  font-size: clamp(14px, 1.25vw, 16px);
  line-height: 1.6;
  color: var(--ink-dim);
}

.practice__list {
  list-style: none;
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: grid;
  gap: 9px;
}

.practice__list li {
  padding-left: 18px;
  position: relative;
  font-size: clamp(13px, 1.15vw, 15px);
  line-height: 1.4;
  color: var(--ink-dim);
}

.practice__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--purple-text);
}

/* --- How we do it ---------------------------------- */

/* Glass segmented control for the tracks. */
.how__tabs {
  display: inline-flex;
  max-width: 100%;
  gap: 4px;
  padding: 6px;
  margin-bottom: clamp(36px, 5vw, 56px);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 18px;
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow: var(--shadow-pop-sm);
  overflow-x: auto;
  scrollbar-width: none;
}

.how__tabs::-webkit-scrollbar { display: none; }

.how__tab {
  padding: 10px 22px;
  background: transparent;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: clamp(13px, 1.15vw, 14px);
  font-weight: 500;
  white-space: nowrap;
  color: var(--ink-dim);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}

.how__tab:hover {
  color: var(--ink);
}

.how__tab.is-active {
  background: var(--purple-fill);
  color: #fff;
}

.how__panel {
  max-width: none;
}

.how__panel:not([hidden]) {
  animation: how-panel-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes how-panel-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.how__lead {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 4.4vw, 58px);
  line-height: 1.08;
  color: var(--ink);
}

.how__lead em {
  font-style: italic;
  color: #b87fd3;
}

.how__intro {
  margin: 0 0 clamp(40px, 5vw, 60px);
  max-width: 56ch;
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--ink-dim);
}

/* Four containers using the same surface, border and corner treatment as
   the service cards elsewhere on the site. */
.how__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
}

.how__steps h4 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.22;
  color: var(--ink);
  max-width: 22ch;
}

.how__steps p {
  margin: 0;
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.6;
  color: var(--ink-dim);
  max-width: 34ch;
}

@media (max-width: 700px) {
  .how__steps { grid-template-columns: 1fr; }
  .how__steps li { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .how__steps li,
  .how__steps li::before,
  .how__num { transition: none; }
  .how__panel:not([hidden]) { animation: none; }
}

.how__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
  margin-bottom: 14px;
}

.how__top .how__lead {
  flex: 1 1 320px;
  margin: 0;
}

.how__top .btn {
  flex: 0 0 auto;
}

/* --- FAQ -------------------------------------------- */

.faq .kicker,
.faq .section__headline {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.faq .section__headline {
  max-width: 26ch;
}

.faq__list {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

.faq__item {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 16px;
  box-shadow: var(--shadow-pop-sm);
  margin-bottom: 8px;
}

.faq__item:last-child {
  margin-bottom: 0;
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 28px);
  width: 100%;
  padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2.2vw, 28px);
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 1.7vw, 22px);
  line-height: 1.3;
  color: var(--ink);
  cursor: pointer;
}

.faq__icon {
  position: relative;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--purple-text);
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
}

.faq__icon::before {
  width: 14px;
  height: 2px;
}

.faq__icon::after {
  width: 2px;
  height: 14px;
}

.faq__q[aria-expanded="true"] .faq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg) scaleY(0);
}

.faq__a-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}

.faq__q[aria-expanded="true"] + .faq__a-wrap {
  grid-template-rows: 1fr;
}

.faq__a {
  overflow: hidden;
  min-height: 0;
  padding: 0 clamp(18px, 2.2vw, 28px);
}

.faq__a p {
  margin: 0 0 clamp(16px, 1.8vw, 22px);
  max-width: 62ch;
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.6;
  color: var(--ink-dim);
}

@media (prefers-reduced-motion: reduce) {
  .faq__a-wrap { transition: none; }
  .faq__icon::after { transition: none; }
}

/* --- Book a call ---------------------------------- */

.cta-band {
  text-align: center;
}

/* The CTA is a contained card: same edge margins as every section, with the
   hero image dimmed behind the copy so it reads as a framed end-of-page band. */
.cta-band .section__inner {
  padding: clamp(56px, 8vw, 96px) var(--edge);
  border-radius: 28px;
  background: #141414;
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.95);
}


.cta-band__headline {
  margin: 0 auto 16px;
  max-width: 20ch;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 5.4vw, 68px);
  line-height: 1.02;
  color: var(--ink);
}

.cta-band__sub {
  margin: 0 auto clamp(32px, 4.5vw, 44px);
  max-width: 44ch;
  font-size: clamp(15px, 1.5vw, 19px);
  line-height: 1.5;
  color: var(--ink-dim);
}

/* --- Footer -------------------------------------- */

.footer {
  position: relative;
  z-index: 1;
  /* Opaque, like every section above it — otherwise the fixed hero behind
     everything (see .hero) shows through at the very bottom of the page. */
  background: #0a0a0a;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: clamp(48px, 7vw, 80px) var(--edge) clamp(28px, 4vw, 40px);
}

.footer__inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: clamp(20px, 4vw, 48px);
}

.footer__wordmark {
  display: inline-block;
  line-height: 0;
}

.footer__wordmark img {
  width: auto;
  height: clamp(34px, 4vw, 48px);
  object-fit: contain;
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 2.5vw, 32px);
}

.footer__nav a {
  font-family: var(--font-ui);
  font-size: clamp(13px, 1.2vw, 15px);
  color: var(--ink-dim);
  transition: color 0.2s ease;
}

.footer__nav a:hover { color: var(--ink); }

.footer__social {
  display: flex;
  align-items: center;
  gap: 14px;
}

.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--ink-dim);
  background: rgba(255, 255, 255, 0.06);
  transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.footer__social a:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
}

.footer__social svg {
  width: 18px;
  height: 18px;
}


.footer__legal {
  max-width: 1120px;
  margin: clamp(36px, 5vw, 56px) auto 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.32);
}

/* --- Reveal-on-scroll for content sections ------------- */

/* Only the content rises in — the section box and its opaque black ground
   stay put, so the fixed hero never shows through mid-animation. The who
   panel is excluded: its transform is scroll-driven inline by app.js. */
.section[data-reveal] > :not(.who__panel) {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.section[data-reveal].is-in > :not(.who__panel) {
  opacity: 1;
  transform: none;
}

/* --- Narrow ------------------------------------------- */

@media (max-width: 860px) {
  .do__grid {
    grid-template-columns: 1fr;
  }

  .who__pillars {
    grid-template-columns: repeat(2, 1fr);
  }

  .how__tabs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    padding: 6px;
    overflow: visible;
    border-radius: 16px;
  }

  .how__tab {
    white-space: normal;
    text-align: center;
    padding: 12px 10px;
    font-size: 13px;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
  }


  .footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
}

@media (max-width: 480px) {
  .who__pillars {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section[data-reveal] > :not(.who__panel) {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ========================================================
   Interior pages — page head, industries, audiences, team
   ======================================================== */

.page-head {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(132px, 22vw, 232px) var(--edge) clamp(40px, 7vw, 84px);
}

.page-head__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 8vw, 96px);
  line-height: 0.96;
  color: var(--ink);
}

.page-head__sub {
  margin: clamp(20px, 3vw, 30px) 0 0;
  max-width: 58ch;
  font-size: clamp(16px, 1.6vw, 21px);
  line-height: 1.55;
  color: var(--ink-dim);
}

/* --- Who-panel video decorations -------------------------
   Optional extras for pages that reuse the "Who we are" panel component
   (see .who__panel / #who-video) but want a bit more life around the
   statue than the home page's version has. Only present where the markup
   includes them (currently: about.html), so they don't affect the home
   page's panel. Positioned to roughly frame .who__video's own box. */
.who__ring {
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  border: 1.5px solid rgba(138, 76, 158, 0.3);
  pointer-events: none;
  animation: who-spin 26s linear infinite;
}

.who__ring--b {
  inset: 10px;
  border-color: rgba(138, 76, 158, 0.16);
  animation-duration: 40s;
  animation-direction: reverse;
}

.who__orbit-dot {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.who__orbit-dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--purple-text);
  animation: who-orbit 13s linear infinite;
}

.who__orbit-dot--b::before {
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  background: var(--purple-text);
  opacity: 0.55;
  animation-duration: 19s;
  animation-direction: reverse;
}

@keyframes who-spin {
  to { transform: rotate(360deg); }
}

@keyframes who-orbit {
  from { transform: rotate(0deg) translateX(60%) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(60%) rotate(-360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .who__ring,
  .who__orbit-dot::before { animation: none; }
}

.about-lead {
  margin: clamp(20px, 3vw, 28px) 0 0;
  max-width: 60ch;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.6;
  color: var(--ink-dim);
}

/* --- Team ------------------------------------------------ */

.team__photo {
  aspect-ratio: 1;
  margin-bottom: clamp(16px, 2vw, 22px);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}

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


/* --- Industry grid ------------------------------------- */

.ind__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
}

.ind__grid li {
  padding: clamp(20px, 2.6vw, 32px) clamp(18px, 2vw, 26px);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 14px;
  box-shadow: var(--shadow-pop-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(16px, 1.6vw, 21px);
  color: var(--ink);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

.ind__grid li:hover {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.5);
}

.ind__more {
  margin: clamp(28px, 4vw, 44px) 0 0;
  text-align: center;
}

.ind .kicker,
.ind .ind__head .section__headline {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.ind .ind__head .section__headline {
  max-width: 32ch;
  margin-bottom: 0;
}

/* --- Industries stage (home page only) -----------------
   The statue sits centred; the industry chips are placed around her by JS
   (app.js) with randomised start offsets and a residual tilt, then "join"  
   settle into their orbit position, un-rotating and fading in — as the
   section scrolls into view. --settle (0..1, driven by JS) carries the whole
   animation; --fx/--fy/--sx/--sy/--srot/--frot are set per chip by JS too. */
/* The stage pins (position: sticky) for the scroll distance app.js sets on
   .ind__track, so scrolling can't carry you past it until every chip has
   joined — a genuine hold, not a reveal that can be scrolled past early. */
.ind__track {
  position: relative;
  margin-top: 0;
}

/* Title and statue share the pinned 100vh stage, so the whole section reads
   in one viewport while the chips join. Top padding clears the fixed nav. */
.ind__stage {
  position: sticky;
  top: 104px;
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 32px;
  padding-block: 40px 32px;
}

.ind__head {
  flex: 0 0 auto;
}

/* Chips' --fx/--fy percentages resolve against this box. */
.ind__field {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

.ind__statue {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  height: 100%;
  max-height: 620px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 30px 70px rgba(0, 0, 0, 0.6));
  pointer-events: none;
  user-select: none;
}

.ind__orbit {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ind__chip {
  --settle: 1;
  --sx: 0px;
  --sy: 0px;
  --srot: 0deg;
  --frot: 0deg;
  position: absolute;
  left: var(--fx, 50%);
  top: var(--fy, 50%);
  z-index: 2;
  transform:
    translate(-50%, -50%)
    translate(calc((1 - var(--settle)) * var(--sx)), calc((1 - var(--settle)) * var(--sy)))
    rotate(calc((1 - var(--settle)) * var(--srot) + var(--settle) * var(--frot)))
    scale(calc(0.55 + var(--settle) * 0.45));
  opacity: var(--settle);
  padding: 14px 26px;
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(14px, 1.3vw, 17px);
  color: var(--ink);
  white-space: nowrap;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .ind__chip { --settle: 1 !important; }
}

@media (max-width: 860px) {
  .ind__track {
    height: auto !important;
  }

  .ind__stage {
    position: static;
    height: auto;
    min-height: 0;
    padding-block: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }

  .ind__field {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(24px, 6vw, 40px);
  }

  .ind__statue {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    max-height: 62vw;
  }

  .ind__orbit {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  .ind__chip {
    --settle: 1 !important;
    position: relative;
    left: auto !important;
    top: auto !important;
    transform: none !important;
  }
}

/* --- Audiences ---------------------------------------- */

.aud__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(24px, 3vw, 36px);
}

.aud__list li {
  display: grid;
  grid-template-columns: minmax(200px, 0.9fr) 1.6fr;
  gap: clamp(14px, 3vw, 48px);
  padding-top: clamp(20px, 2.6vw, 30px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.aud__list h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(19px, 2vw, 27px);
  line-height: 1.1;
  color: var(--ink);
}

.aud__list p {
  margin: 0;
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.55;
  color: var(--ink-dim);
}

/* --- Team -------------------------------------------- */

.team__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 44px);
}

.team__info {
  padding-top: 22px;
  border-top: 2px solid var(--purple-text);
}

.team__list h2 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(19px, 2vw, 26px);
  line-height: 1.1;
  color: var(--ink);
}

.team__list p {
  margin: 0;
  font-size: clamp(13px, 1.2vw, 15px);
  line-height: 1.4;
  color: var(--ink-dim);
}

@media (max-width: 860px) {
  .aud__list li {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .team__list {
    grid-template-columns: 1fr;
  }
}

/* ========================================================
   Who we are — clou.ch-style panel with a dark→white
   scroll colour switch
   ======================================================== */

/* The panel is now a centred card that shares the same outer margins as
   .section__inner, so the section keeps its horizontal padding only for the
   kicker above the panel. */
.who.section {
  padding-inline: 0;
  /* Opaque in its own right — not just the inner panel — so the fixed hero
     behind it (see .hero) is fully covered the instant this section starts,
     with no gap where the page background would otherwise bleed through. */
  background: #0a0a0a;
}

/* Interior-page hero (about.html, industries.html): the panel is the very
   first thing on the page, so it should run edge-to-edge — full width, full
   height, right up against the top of the viewport — with the fixed nav
   overlaid on top of it, not pushed down to clear it. No section padding,
   no page-title kicker above it. */
.who--hero {
  padding-block: 0;
}

.who--hero .who__panel {
  border-radius: 0;
}

.who > .kicker,
.who__more {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--edge);
}

.who__panel {
  /* JS eases these four as the panel scrolls, plus transform + radius:
     the panel starts full-screen and minimises into a rounded card. */
  --panel-bg: #101114;
  --panel-fg: rgba(255, 255, 255, 0.95);
  --panel-fg-dim: rgba(255, 255, 255, 0.6);
  --panel-pill-bg: rgba(255, 255, 255, 0.1);

  position: relative;
  width: calc(100% - 2 * var(--edge));
  max-width: 1120px;
  margin-inline: auto;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  border-radius: 0;
  background: var(--panel-bg);
  color: var(--panel-fg);
  padding: clamp(40px, 4vw, 56px) var(--edge) clamp(48px, 8vw, 112px);
  overflow: hidden;
  transform-origin: center;
  will-change: transform;
  transition: background 0.15s linear, color 0.15s linear;
  box-shadow: var(--shadow-pop);
}

.who__dot {
  display: none;
}

.who__panel .who__headline {
  margin: clamp(34px, 5vw, 68px) 0 0;
  max-width: 16ch;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 6.4vw, 86px);
  line-height: 0.98;
  color: inherit;
}

.who__aside {
  /* Occupies the same bottom-anchored band as the video, with its content
     vertically centred — so the copy lines up with the middle of the
     statue rather than sitting above or below it. */
  position: absolute;
  right: 0;
  bottom: 0;
  height: min(calc(min(34%, 320px) * 16 / 9), 64vh);
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 42ch;
  padding-right: var(--edge);
}

.who__aside-text {
  margin: 0 0 clamp(20px, 3vw, 30px);
  font-size: clamp(15px, 1.5vw, 19px);
  line-height: 1.5;
  color: var(--panel-fg-dim);
  transition: color 0.15s linear;
}

/* Mirrored layout (currently: about.html) — title, subtitle and the "Why we
   exist" pill stacked in one column on the left; the statue a column of its
   own on the right, both vertically centred side by side. A different
   composition from the home page's version (full-width headline on top,
   video and copy anchored to the panel's bottom corners), so it overrides
   most of that positioning rather than reusing it. */
.who__panel--mirror {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(32px, 6vw, 72px);
}

.who__panel--mirror .who__copy-col {
  flex: 1 1 320px;
  max-width: 46ch;
}

.who__panel--mirror .who__headline {
  margin: 0 0 clamp(18px, 2.4vw, 26px);
  max-width: none;
}

.who__panel--mirror .who__aside-text {
  margin: 0 0 clamp(20px, 3vw, 30px);
  max-width: 42ch;
}

.who__media-col {
  position: relative;
  flex: 0 0 auto;
  width: min(34%, 320px);
  aspect-ratio: 9 / 16;
}

/* Industries hero: a wider, shorter box than the plain-video one, so the
   chips scattered around the statue have room to sit without crowding her
   or spilling out of the panel. */
.who__media-col--statue {
  width: min(46%, 400px);
  aspect-ratio: 4 / 5;
}

.who__statue {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.5));
  pointer-events: none;
}

.who__chip-set {
  position: absolute;
  inset: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.who__chip {
  position: absolute;
  left: var(--cx, 50%);
  top: var(--cy, 50%);
  transform: translate(-50%, -50%);
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(11px, 0.85vw, 13px);
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
}

.who__media-col .who__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
}

.who__pill {
  display: inline-flex;
  align-self: flex-start;          /* don't stretch to the aside's width */
  align-items: center;
  justify-content: center;
  margin-top: clamp(20px, 3vw, 30px);
  padding: 15px 26px;
  border-radius: 999px;
  background: var(--purple-fill);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.25));
  transition: background 0.25s ease, color 0.25s ease;
}

.who__pill:hover {
  background: #0a0a0a;
  color: #fff;
}

.who__more {
  margin-top: clamp(56px, 9vw, 120px);
}

@media (max-width: 860px) {
  /* The hero panel carries no section padding of its own (.who--hero), so
     give it enough top clearance to clear the fixed nav on narrow screens  
     the panel's own top padding alone shrinks below what the nav needs. */
  .who--hero .who__panel {
    padding-top: clamp(96px, 26vw, 132px);
  }

  /* Mirror layout (about.html, industries.html, services.html): stack copy
     above the statue/video instead of sitting side by side, and centre
     both — there's no room for two columns on a phone-width screen. */
  .who__panel--mirror {
    flex-direction: column;
    text-align: center;
  }

  .who__panel--mirror .who__copy-col {
    max-width: none;
  }

  .who__panel--mirror .who__pill {
    align-self: center;
  }

  .who__media-col,
  .who__media-col--statue {
    width: min(70%, 300px);
    margin: 0 auto;
  }

  .who__chip {
    padding: 6px 11px;
    font-size: 10px;
  }
}

/* Scroll-scrubbed clip on the left, under the heading. The source is
   portrait (9:16) with a black background baked in (mp4 has no alpha), so
   the black is keyed out with a blend mode:
     - on the dark panel: `screen` (black drops out, the marble stays light)
     - on the white panel: invert + `multiply` (the now-white background
       drops out, the marble reads as a dark negative)
   JS toggles `.is-inverted` at the colour-switch midpoint. */
.who__video {
  position: absolute;
  left: 0;
  bottom: 0;                       /* base sits on the panel's bottom edge */
  width: min(34%, 320px);
  max-height: min(64vh, 620px);
  aspect-ratio: 9 / 16;
  /* contain, never cover: the whole statue always shows. object-position
     bottom keeps its base at the box's bottom if `contain` letterboxes.
     The blend mode keys out the background so the empty space is invisible. */
  object-fit: contain;
  object-position: bottom;
  mix-blend-mode: screen;
  pointer-events: none;
}

.who__video.is-inverted {
  mix-blend-mode: multiply;
  filter: invert(1);
}

@media (max-width: 860px) {
  .who__aside {
    position: static;
    max-width: none;
    margin-top: clamp(28px, 6vw, 44px);
    order: 2;
  }

  .who__video {
    position: static;
    width: min(72%, 320px);
    max-height: none;
    margin-top: clamp(28px, 6vw, 48px);
    order: 1;
    align-self: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .who__panel {
    min-height: auto;
    border-radius: clamp(20px, 3vw, 36px);
    transform: none !important;
  }
}

/* ========================================================
   What we do — practice grid
   ======================================================== */

.do {
  position: relative;
  z-index: 1;
  background: #0a0a0a;
}

/* --- Where we work: sticky split ------------------------ */

.work__inner {
  display: grid;
  grid-template-columns: minmax(300px, 420px) 1fr;
  gap: clamp(40px, 6vw, 110px);
  align-items: start;
}

.work__left {
  position: sticky;
  top: 110px;
  align-self: start;
}

.work__headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 4.2vw, 58px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: clamp(16px, 2vw, 24px) 0 0;
  color: var(--ink);
}

.work__headline em {
  font-style: italic;
  color: #b87fd3;
}

.work__intro {
  margin: clamp(18px, 2.2vw, 26px) 0 clamp(15px, 1.7vw, 23px);
  max-width: 44ch;
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.55);
}

.work__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.work__list li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.work__item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 13px 4px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  transition: color 0.25s ease, padding-left 0.25s ease;
}

.work__item::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  margin-right: 14px;
  background: var(--purple-text);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.work__item:hover {
  color: rgba(255, 255, 255, 0.85);
}

.work__item.is-active {
  color: var(--ink);
  padding-left: 10px;
}

.work__item.is-active::before {
  opacity: 1;
  transform: scale(1);
}

.work__cards {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 40px);
}

.work__card {
  position: relative;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: #0a0a0c;
  box-shadow: var(--shadow-pop);
  scroll-margin-top: 120px;
}

.work__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.work__card:hover img {
  transform: scale(1.03);
}

.work__card figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: clamp(20px, 2.4vw, 32px);
  background: linear-gradient(to top, rgba(5, 5, 8, 0.92) 0%, rgba(5, 5, 8, 0.55) 55%, rgba(5, 5, 8, 0) 100%);
  pointer-events: none;
}

.work__card-title {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.work__card-num {
  font-size: 12px;
  letter-spacing: 0.24em;
  color: #b87fd3;
}

.work__card-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.1;
  color: var(--ink);
}

.work__card-desc {
  margin: 10px 0 0;
  max-width: 44ch;
  font-family: var(--font-ui);
  font-size: clamp(13px, 1.05vw, 15px);
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 900px) {
  .work__inner {
    grid-template-columns: 1fr;
    gap: clamp(20px, 3vw, 55px);
  }
  .work__left {
    position: static;
  }
  .work__list {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .work__card img {
    transition: none;
  }
}



/* One-pager: per-section call to action */
.section__cta{
  margin-top: clamp(28px, 3.4vw, 48px);
}
.work .section__cta,
.who .section__cta{ margin-left: 0; }

/* --- Section tabs (one-pager) --------------------------
   Floating pill nav with a glass backdrop. Active tab sits inside
   a filled pill; inactive tabs are text-only. Inspired by the
   uploaded reference: rounded track, frosted surface, separated CTA. */
.tabs-bar {
  position: sticky;
  top: 0;
  z-index: 90;
  display: flex;
  justify-content: center;
  padding: 10px var(--edge);
  background: #0a0a0a;
}

/* Separate small logo on the left of the tab bar. Hidden until the bar
   reaches the top of the viewport, then fades in. */
.tabs-bar__logo {
  position: absolute;
  left: var(--edge);
  top: 50%;
  transform: translateY(-50%);
  height: clamp(24px, 2.6vw, 34px);
  width: auto;
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

.tabs-bar.is-logo-visible .tabs-bar__logo {
  opacity: 1;
  pointer-events: auto;
}

.tabs-bar__track {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(16px) saturate(1.6);
  border-radius: 999px;
  box-shadow: var(--shadow-pop-sm);
}

.tabs-bar__track::-webkit-scrollbar { display: none; }

.tab {
  flex: 0 0 auto;
  padding: 10px 20px;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.tab:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.95);
}

.tab.is-active {
  background: var(--purple-fill);
  color: #fff;
  box-shadow: 0 6px 22px rgba(138, 76, 158, 0.35);
}

/* Separated CTA tab — the "Sign Up" equivalent in the reference. */
.tab--cta {
  margin-left: 4px;
  padding-left: 18px;
  padding-right: 18px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.tab--cta:hover {
  background: rgba(255, 255, 255, 0.14);
}

.tab--cta.is-active {
  background: var(--purple-fill);
}

/* Tab panels: only the active group is visible. */
[data-tab-panel] {
  display: none;
}

[data-tab-panel].is-tab-active {
  display: block;
}

/* Give the opening title in every tab a consistent, tight landing area below
   the bar. Panels with a pinned stage (Services, Industries on desktop) let
   the stage supply the gap, so they get no extra panel padding here. */
#who-we-are.is-tab-active,
#contact.is-tab-active {
  padding-top: 40px;
}

#what-we-do.is-tab-active,
.aud.is-tab-active {
  padding-top: 0;
}

/* --- Floating Book a call button -------------------------
   Appears once the user has scrolled past the hero and stays within
   reach until they actually reach the contact section. */
.fab {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 95;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 999px;
  background: var(--purple-fill);
  color: #fff;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 8px 28px rgba(138, 76, 158, 0.45);
  opacity: 0;
  transform: translate3d(-50%, 20px, 0);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease, background 0.25s ease;
}

.fab.is-visible {
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
  pointer-events: auto;
}

.fab:hover { background: #9d5ab3; }

@media (max-width: 860px) {
  .fab {
    bottom: 16px;
    padding: 10px 20px;
    font-size: 13px;
  }
}

@media (max-width: 860px) {
  .tabs-bar {
    padding: 8px 16px;
  }

  .tabs-bar__track {
    width: 100%;
    gap: 2px;
  }

  .tab {
    flex: 1 1 0;
    padding: 8px 10px;
    font-size: 12px;
    text-align: center;
  }

  .tab--cta {
    display: none;
  }

  /* The full-width track leaves no room for the side logo on mobile. */
  .tabs-bar__logo {
    display: none;
  }

  /* Tight, consistent landing gap on mobile. The static Industries panel
     needs its own padding because its stage is no longer sticky. */
  #who-we-are.is-tab-active,
  #contact.is-tab-active,
  .aud.is-tab-active {
    padding-top: 24px;
  }

  #what-we-do.is-tab-active {
    padding-top: 0;
  }
}

@media (min-width: 861px) {
  .fab {
    display: none;
  }

  .btn {
    background: #fff;
    color: #0a0a0a;
  }

  .btn:hover {
    background: var(--purple-fill);
    color: #fff;
  }

  .tab--cta {
    background: #fff;
    color: #0a0a0a;
  }

  .tab--cta:hover {
    background: var(--purple-fill);
    color: #fff;
  }

  .tab--cta.is-active {
    background: var(--purple-fill);
    color: #fff;
  }
}

/* ===== What we do — pinned horizontal scroll + zoom (restored) ===== */
.do {
  position: relative;
  z-index: 1;
  background: #0a0a0a;
}

.do__track {
  min-height: 100vh;        /* real height set by JS: 100vh + card-row travel */
}

.do__pin {
  position: sticky;
  top: 104px;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(11px, 2vh, 22px);
  padding: 28px 0 48px;
}

/* Matches .section__inner: --edge gutter, widening to center a 1120px
   column on wide screens, so every section shares the same left edge. */
.do__head {
  /* Sits inside .section__inner now, so no extra gutter of its own — the
     old pinned-scroll padding double-indented the title. */
  padding-inline: 0;
}


.do__head .kicker {
  margin: 0 0 clamp(12px, 2vw, 20px);
}

.do__head .section__headline {
  margin: 0;
}

.do__row {
  display: flex;
  gap: clamp(16px, 2vw, 28px);
  padding-inline: max(var(--edge), calc((100vw - 1120px) / 2));
  width: max-content;
  will-change: transform;
}

.pcard {
  flex: 0 0 auto;
  width: clamp(280px, 34vw, 420px);
  display: flex;
  flex-direction: column;
}

.pcard__media {
  position: relative;
  height: clamp(170px, 34vh, 380px);
  flex: 0 0 auto;
  margin-bottom: clamp(12px, 1.6vw, 22px);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  display: grid;
  place-items: center;
  perspective: 720px;
  box-shadow:
    0 10px 26px -6px rgba(0, 0, 0, 0.8),
    0 3px 8px rgba(0, 0, 0, 0.5);
}

.pcard__num {
  position: absolute;
  top: 14px;
  left: 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.4);
}

/* --- Card visuals -----------------------------------
   Preferred: a three.js scene rendered into .pv-gl (app.js adds .has-gl to
   the media when it initialises). Fallback: the CSS-3D .pv3d layer stack,
   shown on narrow screens or when WebGL / three.js is unavailable. */

.pv-gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
}

.pcard__media.has-gl .pv-gl { display: block; }
.pcard__media.has-gl .pv3d  { display: none; }

.pv3d {
  position: relative;
  width: min(58%, 170px);
  aspect-ratio: 1;
  color: var(--purple-text);
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.2s ease-out;
}

.pv3d > * {
  position: absolute;
  inset: 0;
  margin: auto;
  transform-style: preserve-3d;
}

/* rings ------------------------------------------------ */
.pv3d__ring {
  width: var(--s);
  height: var(--s);
  border: 2px solid currentColor;
  border-radius: 50%;
  opacity: 0.4;
  transform: translateZ(var(--z));
}
.pv3d__ring:nth-child(2) { opacity: 0.28; }
.pv3d__ring:nth-child(3) { opacity: 0.16; }
.pv3d__core {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: currentColor;
  transform: translateZ(var(--z));
}
.pv3d__spark {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  transform: translateZ(var(--z));
  animation: pv-orbit 5s linear infinite;
}

/* bars ------------------------------------------------- */
.pv3d--bars { align-items: flex-end; }
.pv3d__bar {
  width: 20px;
  height: var(--h);
  inset: auto;
  bottom: 6%;
  border-radius: 5px;
  background: currentColor;
  transform: translateZ(var(--z)) scaleY(0.6);
  transform-origin: 50% 100%;
  animation: pv-rise 2.8s ease-in-out infinite;
}
.pv3d__bar:nth-child(1) { left: 14%; right: auto; }
.pv3d__bar:nth-child(2) { left: 40%; right: auto; animation-delay: 0.18s; }
.pv3d__bar:nth-child(3) { left: 66%; right: auto; animation-delay: 0.36s; }

/* nodes ---------------------------------------------- */
.pv3d__link {
  width: 58%;
  height: 2px;
  background: currentColor;
  opacity: 0.35;
}
.pv3d__node {
  width: 26px;
  height: 26px;
  border: 2.5px solid currentColor;
  border-radius: 50%;
}
.pv3d__node--a { transform: translate(-64%, 0) translateZ(var(--z)); }
.pv3d__node--b { transform: translate(64%, 0) translateZ(var(--z)); }
.pv3d__pulse {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  transform: translateZ(var(--z));
  animation: pv-shuttle 2s ease-in-out infinite;
}

/* room --------------------------------------------- */
.pv3d__wave {
  width: 24px;
  height: 24px;
  border: 2px solid currentColor;
  border-radius: 50%;
  opacity: 0;
  transform: translateZ(var(--z));
  animation: pv-wave 3s ease-out infinite;
}
.pv3d__wave--2 { animation-delay: 1s; }
.pv3d__wave--3 { animation-delay: 2s; }
.pv3d--room .pv3d__core {
  transform: translateZ(var(--z));
}
.pv3d__seat {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
  transform: translate(var(--tx), var(--ty)) translateZ(var(--z));
}

@keyframes pv-rise    { 0%, 100% { transform: translateZ(var(--z)) scaleY(0.55); } 50% { transform: translateZ(var(--z)) scaleY(1); } }
@keyframes pv-orbit   { to { transform: translateZ(var(--z)) rotate(360deg) translateX(46px) rotate(-360deg); } }
@keyframes pv-shuttle { 0%, 100% { transform: translate(-64%, 0) translateZ(var(--z)); } 50% { transform: translate(64%, 0) translateZ(var(--z)); } }
@keyframes pv-wave    { 0% { opacity: 0.9; transform: translateZ(var(--z)) scale(0.4); } 100% { opacity: 0; transform: translateZ(var(--z)) scale(3.4); } }

@media (prefers-reduced-motion: reduce) {
  .pv3d { transition: none; }
  .pv3d__spark, .pv3d__bar, .pv3d__pulse, .pv3d__wave { animation: none !important; }
  .pv3d__wave { opacity: 0.2; }
  .pv3d__bar { transform: translateZ(var(--z)) scaleY(1); }
}

.pcard__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 1.9vw, 25px);
  color: var(--ink);
}

.pcard__desc {
  margin: 0;
  font-size: clamp(13px, 1.2vw, 16px);
  line-height: 1.55;
  color: var(--ink-dim);
}

/* The CTA card's copy lives inside its panel, so it scales with the panel
   when the zoom "flies into" the card (see app.js). */
.pcard--cta {
  align-self: stretch;
}

.pcard--cta .pcard__media {
  aspect-ratio: auto;
  align-self: stretch;
  flex: 1;
  margin-bottom: 0;
  padding: clamp(24px, 3vw, 40px);
  background: var(--purple-fill);
  border-color: transparent;
  place-items: center;
  overflow: hidden;
  transform-origin: center;
  will-change: transform;
}

.pcard__cta-inner {
  max-width: 22ch;
  text-align: center;
}

.pcard--cta .kicker {
  margin: 0 0 14px;
  color: rgba(255, 255, 255, 0.72);
}

.pcard--cta .pcard__title {
  color: #fff;
  font-size: clamp(20px, 5vw, 40px);
  line-height: 1.06;
  white-space: nowrap;
}

.pcard--cta .btn {
  margin-top: 18px;
}

.pcard--cta .btn:hover {
  background: #0a0a0a;
  color: #fff;
}

/* Crisp copy for the "What we do" zoom (see app.js). The CTA panel's real
   copy lives inside the row that gets scaled up to ~7x — great for the panel
   itself, but text riding that same transform gets rasterised once and then
   stretched, so it blurs at high scale. This is a plain, untransformed
   overlay that tracks the panel's on-screen centre and grows its own
   font-size for real, so it re-lays-out (and stays sharp) at every size. The
   original copy is hidden during the zoom and this stands in for it. */
.do-zoom-copy {
  position: fixed;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  z-index: 121;
  opacity: 0;
}

.do-zoom-copy .kicker {
  margin: 0 0 14px;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
}

.do-zoom-copy .pcard__title {
  margin: 0;
  color: #fff;
  line-height: 1.06;
  white-space: nowrap;
}

@media (max-width: 860px) {
  .do__track {
    min-height: 100vh;
  }

  .do__pin {
    position: sticky;
    top: 118px;
    height: 100vh;
    overflow: hidden;
    justify-content: center;
    gap: 10px;
    padding: 17px 0 12px;
  }

  .do__row {
    flex-direction: row;
    width: max-content;
    gap: 16px;
    padding-inline: var(--edge);
  }

  .pcard {
    width: calc(100vw - 48px);
  }

  .pcard__media {
    height: clamp(140px, 24vh, 240px);
  }

  .pcard__title {
    font-size: 20px;
    margin-bottom: 7px;
  }

  .pcard__desc {
    font-size: 13px;
    line-height: 1.4;
  }

  .pcard--cta .pcard__media {
    aspect-ratio: auto;
  }

  .pcard--cta .pcard__title,
  .do-zoom-copy .pcard__title {
    white-space: normal;
  }
}

.pcard__tag {
  margin: 0 0 10px;
  font-style: italic;
  font-size: clamp(13px, 1.2vw, 15px);
  line-height: 1.5;
  color: #b87fd3;
}

.pcard__list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 7px;
}

.pcard__list li {
  position: relative;
  padding-left: 16px;
  font-size: clamp(12.5px, 1.1vw, 14px);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.55);
}

.pcard__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--purple-text);
}

.pcard {
  overflow: hidden;
}

/* ============================================================
   What we do — four tiles, one shared panel
   Handoff pp. 5 to 7 and p. 12. Desktop: tiles in one row, the panel
   underneath. Tablet: tiles 2x2. Mobile: the pair becomes an accordion,
   because a tile row and a separate panel cannot both fit a 390 screen.
   ============================================================ */

.do__head { margin-bottom: 8px; }

.section__lede {
  margin: 0 0 8px;
  max-width: 60ch;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.5;
  color: #b9b9b9;
}

.svc__hint {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 20px;
  color: #8c8c8c;
}

/* display: contents lets each tile and its panel be placed independently on
   the grid while staying a single unit in the DOM — which is what turns the
   same markup into an accordion on mobile. */
.svc {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.svc__pair { display: contents; }

/* --- Tile --- */

.svc__tile {
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-height: 228px;
  padding: 24px;
  border: 1px solid #262626;
  border-radius: 20px;
  background: #121212;
  font-family: var(--font-ui);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.svc__tile-label { font-size: 14px; line-height: 20px; color: #8c8c8c; transition: color 180ms ease; }
.svc__tile-name  { font-size: clamp(19px, 1.9vw, 28px); font-weight: 500; line-height: 1.3;
                   letter-spacing: 0.015em; color: #fff;
                   min-width: 0; overflow-wrap: anywhere; text-wrap: balance; }
.svc__tile-quote { margin-top: auto; font-size: 16px; line-height: 1.4; color: #b9b9b9;
                   transition: color 180ms ease; }

.svc__tile:hover { border-color: #4a4a4a; }
.svc__tile:hover .svc__tile-quote { color: #fff; }

.svc__tile.is-active {
  background: var(--purple-fill);
  border-color: var(--purple-fill);
}
.svc__tile.is-active .svc__tile-label,
.svc__tile.is-active .svc__tile-quote { color: #fff; }

/* --- Panel --- */

.svc__panel {
  grid-column: 1 / -1;
  grid-row: 2;
  min-height: 520px;          /* content-driven, so switching barely shifts the page */
  padding: 40px 48px;
  border-radius: 24px;
  background: #121212;
  animation: svc-fade 180ms ease both;
}

@keyframes svc-fade { from { opacity: 0; } to { opacity: 1; } }

.svc__panel-head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
                   margin-bottom: 28px; min-width: 0; }
.svc__panel-name { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.2; color: #fff; }

.svc__chip {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: #1d1820;
  font-size: 13px;
  white-space: nowrap;
  color: var(--purple-text);
}

.svc__cols {
  display: grid;
  grid-template-columns: 5fr 4fr;
  gap: 40px;
}


.svc__small {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 20px;
  color: #8c8c8c;
}

.svc__what   { margin: 0 0 14px; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.25; color: #fff; }
.svc__slogan { margin: 0 0 28px; font-family: Georgia, 'Times New Roman', serif; font-style: italic;
               font-size: clamp(19px, 1.7vw, 25px); line-height: 1.3; color: var(--purple-text); }
.svc__who    { margin: 0; font-size: 17px; line-height: 1.5; color: #b9b9b9; }

.svc__get { margin: 0; padding: 0; list-style: none; }
.svc__get li {
  position: relative;
  padding: 12px 0 12px 34px;
  border-bottom: 1px solid #262626;
  font-size: 17px;
  line-height: 1.5;
  color: #b9b9b9;
}
.svc__get li:first-child { padding-top: 0; }
.svc__get li:last-child  { border-bottom: 0; }
.svc__get li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 17px;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--purple-text);
  border-bottom: 2px solid var(--purple-text);
  transform: rotate(-45deg);
}
.svc__get li:first-child::before { top: 5px; }

.svc__steps { margin: 0; padding: 0; list-style: none; counter-reset: svcstep; }
.svc__steps li {
  counter-increment: svcstep;
  position: relative;
  padding: 0 0 18px 38px;
  font-size: 17px;
  line-height: 1.4;
  color: #b9b9b9;
}
.svc__steps li::before {
  content: counter(svcstep);
  position: absolute;
  left: 0;
  top: -2px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid #444;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

.svc__cta { margin-top: 24px; align-self: flex-start; }

/* --- Tablet: tiles 2x2, panel columns collapse to two rows --- */

@media (max-width: 1199px) {
  .svc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Rows must be assigned explicitly: the base rule pins every tile to row 1,
     which at two columns makes the grid invent extra columns instead of
     wrapping, squashing all four tiles onto one line. */
  .svc__pair:nth-child(1) > .svc__tile,
  .svc__pair:nth-child(2) > .svc__tile { grid-row: 1; }
  .svc__pair:nth-child(3) > .svc__tile,
  .svc__pair:nth-child(4) > .svc__tile { grid-row: 2; }
  .svc__panel { grid-row: 3; }
  .svc__cols { grid-template-columns: 1fr 1fr; gap: 32px; }

  .svc__cta { align-self: flex-end; margin-top: 8px; }
}

/* --- Mobile: accordion, one open at a time --- */

@media (max-width: 767px) {
  .svc { display: block; }
  .svc__pair { display: block; margin-bottom: 12px; }

  .svc__tile {
    width: 100%;
    min-height: 0;
    padding: 18px 20px;
    border-radius: 20px;
  }
  .svc__tile-quote { margin-top: 10px; }

  .svc__tile.is-active { border-radius: 20px 20px 0 0; }

  .svc__panel {
    min-height: 0;
    padding: 24px 20px;
    border-radius: 0 0 20px 20px;
  }
  .svc__cols { grid-template-columns: 1fr; gap: 24px; }
  .svc__cta { width: 100%; align-self: stretch; margin-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .svc__tile { transition: none; }
  .svc__panel { animation: none; }
}

/* ============================================================
   Touch targets — handoff p. 4 and p. 14: "Tap targets: 44 px or
   taller, everywhere." Audited at 390 and these all came in short:
   the tab pills (34), footer links (20), the buttons (37 to 40).
   ============================================================ */

/* Tablet is a touch device too - the handoff's breakpoints run to 1199. */
@media (max-width: 1199px) {
  .masthead__cta,
  .btn,
  .fab,
  .tab,
  .how__tab,
  .footer__wordmark {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .footer__nav a,
  .footer__social a,
  .masthead__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
  }

  /* Kills the 300ms double-tap zoom delay on everything tappable. */
  a, button, [role="tab"] { touch-action: manipulation; }
}

/* Renaming Industries to "Who we work with" widened the tab row past a 390
   screen. The track already scrolls horizontally, so Book a call was simply
   scrolling out of sight - and p. 14 says it must never hide. Shrinking the
   pills is not enough (four full labels cannot fit 390), so the CTA sticks to
   the right edge while the other three scroll under it.
   The proper fix is the spec's mobile menu: logo + Book a call + a 44px
   hamburger opening a full-screen overlay. Not built yet. */
@media (max-width: 767px) {
  .tabs-bar__track { gap: 2px; padding: 4px; }
  .tab { padding: 10px 12px; font-size: 13px; }

  .tab--cta {
    position: sticky;
    right: 0;
    z-index: 1;
    padding: 10px 14px;
    /* Opaque, so the scrolling pills pass behind it rather than through it. */
    background: #fff;
    color: #0a0a0a;
    box-shadow: -12px 0 12px -6px #1b1b1b;
  }

  .tab--cta.is-active {
    background: var(--purple-fill);
    color: #fff;
  }
}

/* The Book a call FAB is fixed above the fold and was sitting on top of the
   last lines of copy. Give the page floor enough room to clear it. */
@media (max-width: 767px) {
  .footer { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================
   Audit fixes — tab bar CTA and the floating Book a call
   ============================================================ */

/* Between 768 and 860 the Book a call pill was set to display:none, so the
   tab bar lost its only button and the floating FAB became the sole CTA.
   p. 14: "Book a call never hides." There is room for it at this width. */
@media (min-width: 768px) and (max-width: 860px) {
  .tab--cta { display: inline-flex; }
}

/* The FAB was centred (left: 50%), which parked it directly on top of the
   body column at every scroll position - it was sitting over the "You get"
   list in the services panel. Moved out of the reading column.
   Note: the handoff does not specify a floating CTA at all (p. 7: "One Book
   a call per section, at the end"), so this may want removing outright. */
@media (min-width: 768px) {
  .fab {
    left: auto;
    right: max(24px, env(safe-area-inset-right, 0px));
    transform: translate3d(0, 12px, 0);
  }
  .fab.is-visible { transform: translate3d(0, 0, 0); }
}

@media (max-width: 767px) {
  .fab {
    left: auto;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    transform: translate3d(0, 12px, 0);
  }
  .fab.is-visible { transform: translate3d(0, 0, 0); }
}

/* ============================================================
   Hero — eyebrow, longer headline, two actions (handoff p. 1)
   ============================================================ */

.hero__eyebrow {
  margin: 0 0 18px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--purple-text);
}

/* The new H1 is a full sentence rather than four stacked words, so it needs
   a wider measure and tighter tracking than the old one. */
.hero__copy .hero__title {
  /* The old H1 was four stacked words; this one is a sentence, so it needs a
     wider measure or it runs to six lines and fills the whole frame. */
  max-width: 24ch;
  font-size: clamp(30px, 4.1vw, 60px);
  line-height: 1.02;
  text-wrap: balance;
}

.hero__copy .hero__sub {
  max-width: 46ch;
  margin-top: 20px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* Secondary action: the same pill, outlined instead of filled, so only one
   button on the screen carries a fill. */
.btn--ghost {
  background: transparent;
  border: 1px solid #4a4a4a;
  color: #fff;
}

.btn--ghost:hover {
  background: #fff;
  border-color: #fff;
  color: #0a0a0a;
}

/* Wordmark stand-in for a client with no logo file yet. */
.trusted__mark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(14px, 1.5vw, 19px);
  letter-spacing: 0.04em;
  text-align: center;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.82);
  text-transform: uppercase;
}

@media (max-width: 767px) {
  .hero__actions { gap: 10px; }
  .hero__actions .btn { flex: 1 1 auto; justify-content: center; }
  .hero__eyebrow { font-size: 11px; letter-spacing: 0.18em; margin-bottom: 12px; }
}

/* ============================================================
   How we do it — "I am a" selector, one panel, four steps
   Handoff pp. 8 to 10 and p. 13.
   ============================================================ */

.how__selector {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 24px;
}

.how__selector-label {
  font-size: 18px;
  color: #b9b9b9;
}

/* The pills live in their own track, per p. 8. */
.how__track {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px;
  border-radius: 999px;
  background: #1b1b1b;
}

.how__pill {
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  color: #b9b9b9;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 180ms ease, color 180ms ease;
}

.how__pill:hover { color: #fff; }

.how__pill.is-active {
  background: var(--purple-fill);
  color: #fff;
}

.how__panel {
  display: flex;
  flex-direction: column;
  min-height: 640px;
  padding: 48px;
  border-radius: 24px;
  background: #121212;
  animation: svc-fade 180ms ease both;
}

.how__sentence {
  margin: 0 0 16px;
  max-width: 860px;
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 500;
  line-height: 1.3;
  color: #fff;
}

.how__slogan {
  margin: 0 0 56px;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: clamp(20px, 1.9vw, 27px);
  line-height: 1.3;
  color: var(--purple-text);
}

.how__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
  counter-reset: howstep;
}

.how__steps li {
  counter-increment: howstep;
  position: relative;
  padding-top: 60px;
}

.how__steps li::before {
  content: counter(howstep);
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid #444;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}

/* Connector line to the next step; the last one has none. */
.how__steps li::after {
  content: '';
  position: absolute;
  top: 22px;
  left: 56px;
  right: -24px;
  height: 1px;
  background: #333;
}
.how__steps li:last-child::after { display: none; }

.how__step-title {
  margin: 0 0 10px;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
}

.how__step-desc {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: #b9b9b9;
}

.how__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid #262626;
}

.how__helper {
  margin: 0;
  font-size: 15px;
  color: #8c8c8c;
}

/* --- Tablet: steps 2x2, no connectors, footer stacks (p. 10) --- */

@media (max-width: 1199px) {
  .how__panel { min-height: 0; padding: 32px; }
  .how__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .how__steps li::after { display: none; }
  .how__footer { flex-direction: column; align-items: flex-start; }
}

/* --- Mobile: pills 2x2, steps stack, CTA full width (p. 13) --- */

@media (max-width: 767px) {
  .how__selector { gap: 12px; }
  .how__selector-label { font-size: 16px; }

  .how__track {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
    border-radius: 20px;
  }

  .how__pill {
    min-height: 56px;
    padding: 8px 12px;
    border-radius: 16px;
    background: #121212;
    font-size: 14px;
  }

  .how__panel { padding: 24px 20px; border-radius: 20px; }
  .how__sentence { font-size: 20px; }
  .how__slogan { margin-bottom: 32px; font-size: 21px; }
  .how__steps { grid-template-columns: 1fr; gap: 28px; }
  .how__steps li { padding-top: 0; padding-left: 60px; }
  .how__steps li::before { top: -2px; }
  .how__footer { flex-direction: column-reverse; align-items: stretch; }
  .how__footer .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .how__pill { transition: none; }
  .how__panel { animation: none; }
}

/* The old .how__steps h4/p rules targeted the previous markup; the rebuilt
   steps use explicit classes, so keep the type but drop the narrow measures
   that were tuned for a card. */
.how__steps .how__step-title { max-width: none; }
.how__steps .how__step-desc  { max-width: 34ch; }

/* ============================================================
   Work — index and case pages
   Case-studies handoff, components table p. 12.
   ============================================================ */

/* These are real routes, so the masthead is not the home page's fixed,
   hide-on-scroll one. */
.masthead--static {
  position: fixed;
  z-index: 100;
  background: rgba(10, 10, 10, 0.72);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.work-page { display: block; }

/* The masthead is fixed on case pages, so the first section needs extra
   top padding to clear it. */
.case { padding-top: clamp(120px, 17vw, 160px); }

.work-index__headline,
.case__title {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 5.2vw, 76px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
}

/* --- Index: four cards --- */

.work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: 48px 0 56px;
}

.wcard {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 320px;
  padding: 32px;
  border: 1px solid #262626;
  border-radius: 24px;
  background: #121212;
  transition: border-color 180ms ease;
}

.wcard:hover { border-color: #4a4a4a; }
.wcard:hover .wcard__arrow { transform: translateX(4px); }

.wcard__top { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 20px; }

.wcard__chip {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: #1d1820;
  font-size: 13px;
  white-space: nowrap;
  color: var(--purple-text);
}

.wcard__client { font-size: 14px; color: #8c8c8c; }

/* The hero figure is text, not an image (p. 4). */
.wcard__figure {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 4.4vw, 60px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
}

.wcard__figure-label { margin: 8px 0 22px; font-size: 14px; color: #8c8c8c; }

.wcard__title { margin: 0 0 10px; font-size: clamp(20px, 1.9vw, 26px); font-weight: 600; line-height: 1.2; color: #fff; }

/* Stretched link: the card is one target, but the anchor text stays the
   case title so the accessible name is meaningful. */
.wcard__link { color: inherit; }
.wcard__link::after { content: ""; position: absolute; inset: 0; border-radius: 24px; }
.wcard__link:focus-visible { outline: none; }
.wcard__link:focus-visible::after { outline: 2px solid var(--purple-text); outline-offset: 3px; }

.wcard__line { margin: 0 0 20px; max-width: 46ch; font-size: 16px; line-height: 1.5; color: #b9b9b9; }

.wcard__more { margin-top: auto; font-size: 15px; color: var(--purple-text); }
.wcard__arrow { display: inline-block; transition: transform 180ms ease; }

.work-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.work-cta__note { margin: 0; font-size: 14px; color: #8c8c8c; }

/* --- Case page --- */

.case__chip { margin: 0 0 18px; font-size: 14px; color: #8c8c8c; }
.case__line { margin: 0 0 40px; max-width: 60ch; font-size: clamp(18px, 1.8vw, 22px); line-height: 1.45; color: #b9b9b9; }

/* Figure band: four columns with hairlines between. */
.figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 40px;
  padding: 32px 0;
  border-top: 1px solid #262626;
  border-bottom: 1px solid #262626;
  list-style: none;
}

.figures__item { padding: 0 24px; border-left: 1px solid #262626; }
.figures__item:first-child { padding-left: 0; border-left: 0; }

.figures__value {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1;
  letter-spacing: 0.03em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.figures__label { margin: 10px 0 0; font-size: 14px; line-height: 1.35; color: #b9b9b9; }

.meta { margin: 0 0 48px; }
.meta__row { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px solid #262626; }
.meta__row dt { font-size: 13px; color: #8c8c8c; }
.meta__row dd { margin: 0; font-size: 15px; color: #fff; }

.case__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-bottom: 48px; }

.case__h { margin: 0 0 18px; font-size: 22px; font-weight: 600; color: #fff; }

.scope { margin: 0; padding: 0; list-style: none; }
.scope li { position: relative; padding: 8px 0 8px 22px; font-size: 17px; line-height: 1.45; color: #fff; }
.scope li::before { content: ""; position: absolute; left: 0; top: 16px; width: 8px; height: 8px; background: var(--purple-text); }

.results { margin: 0; padding: 0; list-style: none; }
.results li { position: relative; padding: 12px 0 12px 32px; border-bottom: 1px solid #262626; font-size: 17px; line-height: 1.45; color: #b9b9b9; }
.results li:last-child { border-bottom: 0; }
.results li.is-strong { font-weight: 600; color: #fff; }
.results li::before {
  content: ""; position: absolute; left: 0; top: 18px;
  width: 12px; height: 7px;
  border-left: 2px solid var(--purple-text); border-bottom: 2px solid var(--purple-text);
  transform: rotate(-45deg);
}

/* --- Chart: divs with widths, no library --- */

.chart { padding: 28px 32px; border-radius: 24px; background: #121212; margin-bottom: 48px; }
.chart__title { margin: 0 0 20px; font-size: 18px; font-weight: 600; color: #fff; }
.chart__bars { margin: 0; padding: 0; list-style: none; }

.chart__row { display: grid; grid-template-columns: 150px 1fr 80px; gap: 16px; align-items: center; padding: 8px 0; }
.chart__label { display: flex; flex-direction: column; }
.chart__name { font-size: 15px; color: #fff; }
.chart__sub { font-size: 13px; color: #8c8c8c; }

.chart__track { height: 8px; border-radius: 999px; background: #262626; }
.chart__bar { height: 8px; border-radius: 999px; background: var(--purple-fill); }
/* Dashed outline = a target or a plan, never a result. */
.chart__bar--plan { background: transparent; border: 1px dashed var(--purple-text); }

.chart__value { font-size: 15px; text-align: right; color: #fff; font-variant-numeric: tabular-nums; }
.chart__note { margin: 18px 0 0; font-size: 13px; color: #8c8c8c; }

.sentiment { margin-top: 26px; padding-top: 22px; border-top: 1px solid #262626; }
.sentiment__caption { margin: 0 0 10px; font-size: 13px; color: #8c8c8c; }
.sentiment__bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: #262626; }
.sentiment__seg--pos { background: var(--purple-fill); }
.sentiment__seg--neu { background: #3a3a3a; }
.sentiment__seg--neg { background: #6b6b6b; }
.sentiment__key { display: flex; flex-wrap: wrap; gap: 18px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 13px; color: #b9b9b9; }

/* --- Closing card and next case --- */

.case__closing { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 32px; border-radius: 24px; background: #121212; }

.case__quote {
  margin: 0;
  max-width: 30ch;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(22px, 2.3vw, 30px);
  line-height: 1.25;
  color: var(--purple-text);
}

.case__note { margin: 0; font-size: 14px; color: #8c8c8c; }

.next-case {
  display: flex; align-items: center; gap: 14px;
  margin-top: 48px; padding-top: 22px;
  border-top: 1px solid #262626;
  color: #fff;
}
.next-case__label { font-size: 13px; color: #8c8c8c; }
.next-case__title { font-size: 24px; font-weight: 600; }
.next-case__arrow { transition: transform 180ms ease; }
.next-case:hover .next-case__arrow { transform: translateX(4px); }

.case__all { margin: 28px 0 0; font-size: 15px; }
.case__all a { color: var(--purple-text); }

/* --- Tablet and mobile (p. 9) --- */

@media (max-width: 1023px) {
  .work-grid { gap: 20px; }
  .case__cols { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 767px) {
  .work-grid { grid-template-columns: 1fr; margin: 32px 0 40px; }
  .wcard { min-height: 0; padding: 24px; }

  .figures { grid-template-columns: 1fr 1fr; gap: 24px 0; padding: 24px 0; }
  .figures__item:nth-child(odd) { padding-left: 0; border-left: 0; }
  .figures__value { font-size: 34px; }

  .meta__row { grid-template-columns: 1fr; gap: 2px; }

  .chart { padding: 22px 18px; }
  .chart__row { grid-template-columns: 1fr 64px; grid-template-areas: "label value" "track track"; row-gap: 6px; }
  .chart__label { grid-area: label; }
  .chart__value { grid-area: value; }
  .chart__track { grid-area: track; }

  .case__closing { padding: 24px 20px; }
  .case__closing .btn { width: 100%; }
  .next-case { flex-wrap: wrap; gap: 8px; }
  .next-case__title { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .wcard, .wcard__arrow, .next-case__arrow { transition: none; }
}

/* Work is a route, not a tab panel, so it sits in the bar as a link. */
.tab--link { display: inline-flex; align-items: center; text-decoration: none; }

/* The home page hides the masthead until app.js marks the document ready.
   The /work routes do not load app.js, so the static masthead must opt out
   of that entrance or it never appears. */
.masthead--static {
  opacity: 1;
  transform: none;
  transition: none;
}

@media (max-width: 1199px) {
  /* "All work" was a 19px line of text. The card links look short to an
     automated sweep too, but their hit area is the whole card (the stretched
     ::after above), so only this one needed padding. */
  .case__all a,
  .next-case {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}


/* ============================================================
   Burger menu — mobile and tablet (<=1024px). The pill nav is
   desktop-only; smaller screens get a burger that opens a
   full-screen menu overlay.
   ============================================================ */

.masthead__burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  cursor: pointer;
}

.masthead__burger span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.masthead__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.masthead__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.masthead__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.menu {
  position: fixed;
  inset: 0;
  z-index: 99; /* just under the masthead so the burger stays tappable */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
  padding: 96px var(--edge) 48px;
  background: rgba(10, 10, 10, 0.97);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.menu.is-open { opacity: 1; }
.menu[hidden] { display: none; }

.menu__nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.menu__link {
  display: block;
  padding: 12px 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 8vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink-dim);
  text-decoration: none;
  transition: color 0.2s ease;
}

.menu__link:hover,
.menu__link.is-active { color: #fff; }

.menu__link--cta {
  margin-top: 16px;
  color: #0a0a0a;
  background: #fff;
  border-radius: 999px;
  padding: 14px 28px;
  font-size: 20px;
  align-self: flex-start;
}

.menu__social { display: flex; gap: 10px; }

@media (max-width: 1024px) {
  .masthead__nav { display: none; }
  .masthead__burger { display: flex; }
  /* Socials and Book a call live inside the burger menu on mobile/tablet. */
  .masthead__social,
  .masthead__cta { display: none; }
  /* The pill track no longer takes a second row. */
  .masthead { grid-template-columns: 1fr auto; }
}

/* While the menu is open, lock the page behind it. */
body.menu-open { overflow: hidden; }

/* ===== Contact us page ===== */
.contact-info__list {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  gap: 20px;
}

.contact-info__list li {
  display: grid;
  gap: 6px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.contact-info__label {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.contact-info__list a,
.contact-info__list li > span:last-child {
  color: var(--ink);
  font-size: clamp(18px, 2.6vw, 26px);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.contact-info__list a:hover { text-decoration: underline; }

/* --- Contact us: Calendly area + message form ------------- */

.booking .section__inner {
  max-width: 1280px;
}

.booking__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.booking .section__headline {
  font-size: clamp(26px, 2.6vw, 38px);
  margin-bottom: 24px;
}

@media (max-width: 1024px) {
  .booking__grid { grid-template-columns: 1fr; gap: 48px; }
}

.calendly__frame {
  margin-top: 32px;
  border-radius: 28px;
  overflow: hidden;
  background: #101010;
  box-shadow: 0 30px 70px -40px rgba(0,0,0,0.95);
  min-height: 700px;
}

.calendly__frame iframe {
  display: block;
  width: 100%;
  height: 700px;
  border: 0;
}

.cform .section__inner {
  max-width: 720px;
}

.cform__form {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.cform__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

@media (max-width: 640px) {
  .cform__row { grid-template-columns: 1fr; }
}

.cform__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cform__field span {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9a9a9a;
}

.cform__field input,
.cform__field textarea {
  font: inherit;
  color: #f2f2f2;
  background: #101010;
  border: 1px solid #262626;
  border-radius: 12px;
  padding: 14px 16px;
  outline: none;
  transition: border-color 0.2s ease;
}

.cform__field input:focus,
.cform__field textarea:focus {
  border-color: #6d5bd0;
}

.cform__field textarea { resize: vertical; }

.cform__error {
  color: #e07a7a;
  font-size: 14px;
}

.cform__form .btn {
  align-self: flex-start;
}

@media (max-width: 640px) {
  .cform__form .btn { align-self: stretch; }
  .calendly__frame { min-height: 560px; }
  .calendly__frame iframe { height: 560px; }
}

/* --- Where we work: icon grid (replaces the old list + card scroller) --- */
.work__grid {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.work__cell {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #141414;
  border: 1px solid #222;
  border-radius: 16px;
  padding: 26px 24px;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.work__cell:hover { border-color: #333; background: #181818; }
.work__cell svg { width: 22px; height: 22px; flex: none; color: #b9a3e3; }
.work .section__cta { margin-top: 48px; }
@media (max-width: 1024px) {
  .work__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .work__grid { grid-template-columns: 1fr; gap: 12px; }
  .work__cell { padding: 20px; font-size: 16px; }
}