/*
  Polar Stork theme for Kiln.
  Ported from the "next" Vue site: src/style.css first, then each component's scoped
  styles inside @scope (.cmp-<component>), so their short class names never clash.
  Brand colours come from the theme settings (layouts/base.liquid sets them on :root).
*/
@font-face to (:scope [class*="cmp-"] > *) {
  font-family: 'Outfit Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/outfit-latin-ext-wght-normal.0f53d1c0.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/outfit-latin-wght-normal.6c18d579.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/fonts/jetbrains-mono-latin-ext-500-normal.879df931.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/fonts/jetbrains-mono-latin-500-normal.cb182fee.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/fonts/jetbrains-mono-latin-ext-700-normal.45a606d8.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/fonts/jetbrains-mono-latin-700-normal.d0d4e818.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --blue: #1a5ac1;
  --blue-600: #154a9f;
  --blue-50: #eef4fd;
  --blue-100: #dbe7fb;
  --mint: #2de2aa;
  --mint-600: #12b985;
  --mint-50: #e6fcf5;
  --ink: #0b1d3f;
  --ink-2: #3c4a66;
  --ink-3: #5a6680;
  --paper: #ffffff;
  --snow: #eef4fc; /* polar ice — alternate sections, clearly different from white */
  --ice-2: #e2ebf8; /* a step deeper, for "before" / problem cards */
  --line: #e1e8f3;
  --on-dark: #c7d2e8; /* body text on navy */
  --on-dark-2: #8796b5; /* quieter text on navy */
  --error: #b42318; /* form hints */

  /* "Frost": soft mint + blue glows that make light areas feel icy-aqua, and dark ones glow.
     Use on heroes and one or two key sections only — not everywhere. */
  /* icy canvas: a cool blue-mint tint across the whole section, with large soft glows
     (sized to the section, so they don't fade to white on wide screens) */
  --frost:
    radial-gradient(ellipse 55% 80% at 0% 0%, rgb(45 226 170 / 0.24), transparent 72%),
    radial-gradient(ellipse 55% 80% at 100% 0%, rgb(26 90 193 / 0.2), transparent 72%),
    radial-gradient(ellipse 70% 55% at 45% 110%, rgb(45 226 170 / 0.16), transparent 72%),
    linear-gradient(165deg, #e8f4f6, #e5eef9 60%, #e1eaf8);
  --frost-dark:
    radial-gradient(circle at 85% 12%, rgb(45 226 170 / 0.2), transparent 42%),
    radial-gradient(circle at 12% 88%, rgb(26 90 193 / 0.45), transparent 50%),
    linear-gradient(135deg, #0a1931, #0b1d3f 55%, #102a52);

  --radius: 20px;
  --radius-lg: 32px;
  --shadow: 0 1px 2px rgb(11 29 63 / 0.06), 0 12px 32px -14px rgb(11 29 63 / 0.18);
  --shadow-lg: 0 30px 70px -32px rgb(11 29 63 / 0.35);
  --max: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --font: 'Outfit Variable', 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Labels use the friendly main font; the code font is kept for the prompt and boarding pass only. */
  --mono: var(--font);
  --code: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a {
  color: inherit;
}

h1,
h2,
h3,
h4 {
  line-height: 1.12;
  /* even line lengths — no single orphaned word on the last line */
  text-wrap: balance;
  margin: 0 0 0.4em;
  letter-spacing: -0.02em;
  font-weight: 700;
}

h1 {
  font-size: clamp(2.6rem, 6.4vw, 5rem);
}
/* Section headings: clearly smaller and a touch lighter than page titles. */
h2 {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 650;
  letter-spacing: -0.015em;
}
h3 {
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  font-weight: 650;
}

p {
  margin: 0 0 1em;
  text-wrap: pretty;
}

/* "POLAR STORK" headline rhythm: <span class="lt">light</span> bold — page titles only */
.lt {
  font-weight: 250;
}
h2 .lt,
h3 .lt {
  font-weight: inherit;
}

/* the logo's mint underscore, used as a highlighter */
.mark {
  position: relative;
  white-space: nowrap;
  z-index: 0;
}
.mark::after {
  content: '';
  position: absolute;
  left: -0.05em;
  right: -0.05em;
  bottom: 0.06em;
  height: 0.22em;
  background: var(--mint);
  z-index: -1;
  transform-origin: left;
  animation: mark-in 0.9s 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes mark-in {
  from {
    transform: scaleX(0);
  }
}

/* blinking cursor — the "_" in the logo */
.cursor {
  display: inline-block;
  width: 0.55em;
  height: 0.12em;
  background: var(--mint);
  margin-left: 0.08em;
  vertical-align: baseline;
  animation: blink 1.05s steps(1) infinite;
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}

.container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: clamp(64px, 10vw, 128px);
}
/* two sections with the same background in a row (white "plain", or icy "ice") would stack
   both paddings into one big empty gap */
.section.plain + .section.plain,
.section.ice + .section.ice {
  padding-top: 0;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--blue);
  margin-bottom: 0.75rem;
}
/* mint used as light: a small glowing dot, never as small text */
.eyebrow::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 4px rgb(45 226 170 / 0.18), 0 0 14px rgb(45 226 170 / 0.7);
  flex: none;
}

.lead {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  color: var(--ink-2);
  max-width: 40em;
}

/* Buttons: pill + chevron, like the logo moving forward */
.btn {
  --bg: var(--blue);
  --fg: #fff;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.85em 1.4em;
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  font: 600 1rem/1 var(--font);
  text-decoration: none;
  border: 2px solid var(--bg);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
  min-height: 48px;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -10px var(--bg);
}
.btn .chev {
  transition: transform 0.2s;
}
.btn:hover .chev {
  transform: translateX(4px);
}
.btn--mint {
  --bg: var(--mint);
  --fg: var(--ink);
}
.btn--ghost {
  background: transparent;
  color: var(--blue);
  border-color: var(--blue-100);
}
.btn--ghost:hover {
  border-color: var(--blue);
  box-shadow: none;
}
.btn--light {
  --bg: #fff;
  --fg: var(--blue);
}

.chip {
  display: inline-block;
  padding: 0.3em 0.8em;
  border-radius: 999px;
  background: var(--blue-50);
  color: var(--blue);
  font-size: 0.8rem;
  font-weight: 500;
}

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

:focus-visible {
  outline: 3px solid var(--mint);
  outline-offset: 3px;
  border-radius: 6px;
}

/* scroll reveal (see directives/reveal.js) */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: var(--d, 0s);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* page transitions */
.page-enter-active,
.page-leave-active {
  transition: opacity 0.25s, transform 0.25s;
}
.page-enter-from {
  opacity: 0;
  transform: translateY(10px);
}
.page-leave-to {
  opacity: 0;
}

/* Short summary shown above a client quote (the quote itself stays word-for-word). */
.q-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 12px;
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  text-wrap: balance;
}
.q-head::before {
  content: '';
  flex: none;
  width: 18px;
  height: 4px;
  border-radius: 2px;
  background: var(--mint);
  transform: translateY(-0.3em);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* the skip link appears when a keyboard user tabs to it */
.skip:focus {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  width: auto;
  height: auto;
  clip: auto;
  overflow: visible;
  padding: 10px 18px;
  border-radius: 999px;
  background: #fff;
  color: var(--blue);
  font-weight: 600;
  box-shadow: var(--shadow-lg);
}
main:focus {
  outline: none;
}

/* ---------- forms (Contact and the website check-up share one look) ---------- */
.form label,
.form .field {
  display: grid;
  gap: 8px;
}
.form label > span,
.form legend {
  font-weight: 600;
  font-size: 1rem;
}
.form legend small {
  font-weight: 400;
  color: var(--ink-3);
}
.form fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}
.form legend {
  margin-bottom: 10px;
}
.form input,
.form textarea {
  width: 100%;
  font: 400 1.05rem var(--font);
  padding: 14px 16px;
  border-radius: 12px;
  border: 2px solid var(--line);
  background: var(--snow);
  color: var(--ink);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.form textarea {
  resize: vertical;
}
.form [aria-invalid='true'] {
  border-color: var(--error);
}
/* a clear focus ring, not just a border colour change */
.form input:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--blue);
  background: #fff;
  box-shadow: 0 0 0 4px rgb(26 90 193 / 0.18);
}
.form .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start; /* a hint under one field shouldn't stretch its neighbour */
}
.form .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.form .chips button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 2px solid var(--line);
  background: #fff;
  font: 500 0.95rem var(--font);
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.form .chips button:hover {
  border-color: var(--blue-100);
}
.form .chips button.on {
  border-color: var(--blue);
  background: var(--blue-50);
  color: var(--blue);
}
.form .chips svg {
  color: var(--mint-600);
}
@media (max-width: 520px) {
  .form .row {
    grid-template-columns: 1fr;
  }
}

/* ---------- Kiln additions ---------- */
/* panels, tabs and messages are hidden with the hidden attribute, whatever their display */
[hidden] { display: none !important; }
/* the logo's chevron, used inline (was Chev.vue) */
.chev { display: inline-block; vertical-align: -0.08em; }
/* Liquid icons ({% icon %}) */
.icon { display: inline-block; flex: none; }
/* islands are custom elements: let their markup take part in the layout */
kiln-hero-prompt, kiln-tabs, kiln-work-filter, kiln-office-clocks, kiln-planner, kiln-marquee, kiln-video, kiln-faq { display: block; }

/* components/Tbc.vue */
@scope (.cmp-tbc) to (:scope [class*="cmp-"] > *) {
  .tbc, :where(:scope):is(.tbc) {
    background: #fff3c4;
    color: #2b2200; /* always dark, so it stays readable on dark sections too */
    border-radius: 6px;
    padding: 0 4px;
    box-shadow: inset 0 -2px 0 #f2c94c;
    /* long placeholders wrap like normal text, keeping the highlight on every line */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  .tag, :where(:scope):is(.tag) {
    display: inline-block;
    white-space: nowrap;
    margin-left: 4px;
    padding: 1px 5px;
    border-radius: 4px;
    background: #f2c94c;
    color: #3d2e00;
    font-size: 0.62em;
    font-weight: 700;
    letter-spacing: 0.04em;
    vertical-align: 0.2em;
  }
}

/* components/DraftBanner.vue */
@scope (.cmp-draft-banner) to (:scope [class*="cmp-"] > *) {
  .draft, :where(:scope):is(.draft) {
    background: #fff3c4;
    color: #3d2e00;
    font-size: 0.9rem;
    border-bottom: 1px solid #f2c94c;
  }
  .container, :where(:scope):is(.container) {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    justify-content: space-between;
    align-items: center;
    padding-block: 8px;
  }
  a, :where(:scope):is(a) {
    font-weight: 700;
    color: #3d2e00;
  }
  .short, :where(:scope):is(.short) {
    display: none;
  }
  /* one line on phones */
  @media (max-width: 640px) {
    .long, :where(:scope):is(.long) {
      display: none;
    }
    .short, :where(:scope):is(.short) {
      display: inline;
    }
    .container, :where(:scope):is(.container) {
      flex-wrap: nowrap;
    }
  }
}

/* components/SiteHeader.vue */
@scope (.cmp-site-header) to (:scope [class*="cmp-"] > *) {
  .hdr, :where(:scope):is(.hdr) {
    --hdr-h: 76px;
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgb(255 255 255 / 0.86);
    backdrop-filter: saturate(1.6) blur(14px);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  /* a slimmer header once you scroll, to leave more room for reading */
  .hdr.scrolled, :where(:scope):is(.hdr.scrolled) {
    --hdr-h: 64px;
    border-color: var(--line);
    box-shadow: 0 6px 20px -16px rgb(11 29 63 / 0.4);
  }
  .bar, :where(:scope):is(.bar) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--hdr-h);
    transition: height 0.2s;
  }
  .brand .logo, :where(:scope):is(.brand) .logo {
    height: 20px;
  }
  .nav, :where(:scope):is(.nav) {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .link, :where(:scope):is(.link) {
    position: relative;
    padding: 10px 14px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    color: var(--ink-2);
    border-radius: 10px;
    transition: color 0.2s;
  }
  .link:hover, :where(:scope):is(.link:hover), .link.router-link-active, :where(:scope):is(.link.router-link-active) {
    color: var(--blue);
  }
  .link.router-link-active::after, :where(:scope):is(.link.router-link-active)::after {
    content: '';
    position: absolute;
    left: 14px;
    width: 14px;
    bottom: 4px;
    height: 3px;
    background: var(--mint);
  }
  .cta, :where(:scope):is(.cta) {
    margin-left: 12px;
    white-space: nowrap;
  }
  .drop, :where(:scope):is(.drop) {
    position: relative;
  }
  .drop-btn, :where(:scope):is(.drop-btn) {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 0;
    background: none;
    font: inherit;
    cursor: pointer;
  }
  .caret, :where(:scope):is(.caret) {
    transition: transform 0.2s;
  }
  .drop.on .caret, :where(:scope):is(.drop.on) .caret {
    transform: rotate(180deg);
  }
  .menu, :where(:scope):is(.menu) {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 290px;
    display: grid;
    gap: 4px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.15s, transform 0.15s, visibility 0s 0.15s;
  }
  /* invisible bridge so the hover menu doesn't close in the gap below the button */
  .menu::before, :where(:scope):is(.menu)::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    height: 10px;
  }
  .drop.on .menu, :where(:scope):is(.drop.on) .menu {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    visibility: visible;
    transition-delay: 0s;
  }
  .m-item, :where(:scope):is(.m-item) {
    display: grid;
    padding: 10px 14px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--ink);
  }
  .m-item small, :where(:scope):is(.m-item) small {
    color: var(--ink-3);
    font-size: 0.85rem;
  }
  .m-item:hover, :where(:scope):is(.m-item:hover), .m-item.router-link-active, :where(:scope):is(.m-item.router-link-active) {
    background: var(--blue-50);
  }
  .m-item:hover strong, :where(:scope):is(.m-item:hover) strong {
    color: var(--blue);
  }
  .m-contact, :where(:scope):is(.m-contact) {
    display: none;
  }
  .burger, :where(:scope):is(.burger) {
    display: none;
    width: 48px;
    height: 48px;
    border: 0;
    background: none;
    cursor: pointer;
    padding: 12px;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
  }
  .burger span, :where(:scope):is(.burger) span {
    display: block;
    height: 2.5px;
    background: var(--blue);
    border-radius: 2px;
    transition: transform 0.25s, opacity 0.2s, width 0.25s;
  }
  .burger span:last-child, :where(:scope):is(.burger) span:last-child {
    width: 50%;
    background: var(--mint);
  }
  .open .burger span:nth-child(1), :where(:scope):is(.open) .burger span:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg);
  }
  .open .burger span:nth-child(2), :where(:scope):is(.open) .burger span:nth-child(2) {
    opacity: 0;
  }
  .open .burger span:nth-child(3), :where(:scope):is(.open) .burger span:nth-child(3) {
    width: 100%;
    transform: translateY(-7.5px) rotate(-45deg);
  }

  /* ---------- phone & small-laptop menu ---------- */
  @media (max-width: 1140px) {
    .burger, :where(:scope):is(.burger) {
      display: flex;
    }
    .nav, :where(:scope):is(.nav) {
      position: fixed;
      inset: var(--hdr-h) 0 auto;
      max-height: calc(100dvh - var(--menu-top, 76px));
      overflow-y: auto;
      overscroll-behavior: contain;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      padding: 12px var(--gutter) 28px;
      background: #fff;
      border-bottom: 1px solid var(--line);
      box-shadow: 0 30px 40px -30px rgb(11 29 63 / 0.35);
      transform: translateY(-12px);
      opacity: 0;
      pointer-events: none;
      visibility: hidden;
      transition: opacity 0.2s, transform 0.2s, visibility 0s 0.2s;
    }
    .nav.open, :where(:scope):is(.nav.open) {
      opacity: 1;
      transform: none;
      pointer-events: auto;
      visibility: visible;
      transition-delay: 0s;
    }
    .link, :where(:scope):is(.link) {
      font-size: 1.25rem;
      padding: 14px 0;
      border-bottom: 1px solid var(--line);
    }
    .link.router-link-active::after, :where(:scope):is(.link.router-link-active)::after {
      left: auto;
      right: 0;
      bottom: 50%;
    }
    /* the three audience pages are simply listed */
    .drop-btn, :where(:scope):is(.drop-btn) {
      width: 100%;
      pointer-events: none;
      border-bottom: 0 !important;
      padding-bottom: 4px !important;
    }
    .caret, :where(:scope):is(.caret) {
      display: none;
    }
    .menu, :where(:scope):is(.menu) {
      position: static;
      min-width: 0;
      opacity: 1;
      transform: none;
      pointer-events: auto;
      visibility: inherit;
      box-shadow: none;
      border: 0;
      padding: 0 0 12px;
      border-bottom: 1px solid var(--line);
      border-radius: 0;
    }
    .m-item, :where(:scope):is(.m-item) {
      padding: 8px 12px;
    }
    .cta, :where(:scope):is(.cta) {
      margin: 20px 0 0;
      justify-content: center;
    }
    .m-contact, :where(:scope):is(.m-contact) {
      display: grid;
      gap: 4px;
      margin-top: 24px;
      padding: 20px;
      border-radius: var(--radius);
      background: var(--snow);
    }
    .m-contact .talk, :where(:scope):is(.m-contact) .talk {
      margin-bottom: 8px;
    }
    .m-way, :where(:scope):is(.m-way) {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 0;
      color: var(--ink);
      font-weight: 500;
      text-decoration: none;
      overflow-wrap: anywhere;
    }
    .m-way svg, :where(:scope):is(.m-way) svg {
      color: var(--blue);
      flex: none;
    }
    .m-ts, :where(:scope):is(.m-ts) {
      margin-top: 8px;
      justify-self: start;
    }
  }
}

/* components/TextSize.vue */
@scope (.cmp-text-size) to (:scope [class*="cmp-"] > *) {
  .ts, :where(:scope):is(.ts) {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    height: 44px;
    padding: 0 12px;
    border-radius: 999px;
    border: 2px solid var(--line);
    background: #fff;
    color: var(--blue);
    font-family: var(--font);
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.2s;
  }
  .ts:hover, :where(:scope):is(.ts:hover) {
    border-color: var(--blue);
  }
  .aa, :where(:scope):is(.aa) {
    display: inline-flex;
    align-items: baseline;
  }
  .txt, :where(:scope):is(.txt) {
    margin-left: 8px;
    font-weight: 500;
    font-size: 0.92rem;
    color: var(--ink-2);
  }
  .txt strong, :where(:scope):is(.txt) strong {
    color: var(--ink);
  }
  .dark, :where(:scope):is(.dark) {
    background: transparent;
    border-color: rgb(255 255 255 / 0.2);
    color: var(--mint);
  }
  .dark .txt, :where(:scope):is(.dark) .txt {
    color: var(--on-dark);
  }
  .dark .txt strong, :where(:scope):is(.dark) .txt strong {
    color: #fff;
  }
  .dark .bars i, :where(:scope):is(.dark) .bars i {
    background: rgb(255 255 255 / 0.2);
  }
  .dark .bars i.on, :where(:scope):is(.dark) .bars i.on {
    background: var(--mint);
  }
  .a1, :where(:scope):is(.a1) {
    font-size: 13px;
  }
  .a2, :where(:scope):is(.a2) {
    font-size: 19px;
  }
  .bars, :where(:scope):is(.bars) {
    display: inline-flex;
    gap: 2px;
    margin-left: 8px;
    align-items: flex-end;
  }
  .bars i, :where(:scope):is(.bars) i {
    width: 3px;
    border-radius: 2px;
    background: var(--line);
  }
  .bars i:nth-child(1), :where(:scope):is(.bars) i:nth-child(1) {
    height: 6px;
  }
  .bars i:nth-child(2), :where(:scope):is(.bars) i:nth-child(2) {
    height: 10px;
  }
  .bars i:nth-child(3), :where(:scope):is(.bars) i:nth-child(3) {
    height: 14px;
  }
  .bars i.on, :where(:scope):is(.bars) i.on {
    background: var(--mint-600);
  }
}

/* components/YoullTalkTo.vue */
@scope (.cmp-youll-talk-to) to (:scope [class*="cmp-"] > *) {
  .talk, :where(:scope):is(.talk) {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 0.95rem;
    color: var(--ink-2);
    line-height: 1.4;
  }
  .talk img, :where(:scope):is(.talk) img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--mint);
    flex: none;
  }
  .talk strong, :where(:scope):is(.talk) strong {
    color: var(--ink);
  }
  .dark, :where(:scope):is(.dark) {
    color: var(--blue-100);
  }
  .dark strong, :where(:scope):is(.dark) strong {
    color: #fff;
  }
}

/* components/MobileCta.vue */
@scope (.cmp-mobile-cta) to (:scope [class*="cmp-"] > *) {
  .mcta, :where(:scope):is(.mcta) {
    display: none;
  }
  @media (max-width: 860px) {
    .mcta, :where(:scope):is(.mcta) {
      position: fixed;
      left: 12px;
      right: 12px;
      bottom: calc(12px + env(safe-area-inset-bottom));
      z-index: 40;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 8px 8px 8px 20px;
      border-radius: 999px;
      background: var(--ink);
      color: #fff;
      font-weight: 600;
      box-shadow: 0 16px 40px -12px rgb(11 29 63 / 0.6);
    }
    b, :where(:scope):is(b) {
      color: var(--mint);
      font-family: var(--code);
      margin-right: 4px;
    }
  }
  .up-enter-active, :where(:scope):is(.up-enter-active), .up-leave-active, :where(:scope):is(.up-leave-active) {
    transition: transform 0.3s, opacity 0.3s;
  }
  .up-enter-from, :where(:scope):is(.up-enter-from), .up-leave-to, :where(:scope):is(.up-leave-to) {
    transform: translateY(120%);
    opacity: 0;
  }
}

/* components/SiteFooter.vue */
@scope (.cmp-site-footer) to (:scope [class*="cmp-"] > *) {
  .ftr, :where(:scope):is(.ftr) {
    background:
      radial-gradient(circle at 0% 0%, rgb(45 226 170 / 0.1), transparent 35%),
      radial-gradient(circle at 100% 100%, rgb(26 90 193 / 0.3), transparent 45%),
      var(--ink);
    color: var(--on-dark);
    padding: 80px 0 32px;
    font-size: 0.95rem;
  }
  .top, :where(:scope):is(.top) {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.3fr 1fr 1fr;
    gap: 40px;
  }
  .about .logo, :where(:scope):is(.about) .logo {
    height: 20px;
    width: auto;
    align-self: flex-start;
    margin-bottom: 20px;
  }
  .follow, :where(:scope):is(.follow) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    font-size: 0.9rem;
  }
  .b-right, :where(:scope):is(.b-right) {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  .about p, :where(:scope):is(.about) p {
    max-width: 22em;
  }
  .fh, :where(:scope):is(.fh) {
    color: #fff;
    font-size: 1rem;
    letter-spacing: 0;
    margin-bottom: 14px;
  }
  .office, :where(:scope):is(.office) {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 14px;
  }
  .office strong, :where(:scope):is(.office) strong {
    color: #fff;
    font-weight: 600;
  }
  .top > div, :where(:scope):is(.top) > div, nav, :where(:scope):is(nav) {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  a, :where(:scope):is(a) {
    text-decoration: none;
    color: var(--on-dark);
    width: fit-content;
    transition: color 0.2s;
    overflow-wrap: anywhere;
  }
  a:hover, :where(:scope):is(a:hover) {
    color: var(--mint);
  }
  .bottom, :where(:scope):is(.bottom) {
    margin-top: 64px;
    padding-top: 24px;
    border-top: 1px solid rgb(255 255 255 / 0.1);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: var(--on-dark-2);
  }
  @media (max-width: 960px) {
    .top, :where(:scope):is(.top) {
      grid-template-columns: 1fr 1fr;
    }
    .about, :where(:scope):is(.about) {
      grid-column: 1 / -1;
    }
  }
  @media (max-width: 860px) {
    .ftr, :where(:scope):is(.ftr) {
      padding-bottom: 104px;
    }
  }
  /* phones: two short columns (Explore | Who we help), then contact details and offices across */
  @media (max-width: 480px) {
    .c-explore, :where(:scope):is(.c-explore) {
      order: 1;
    }
    .c-who, :where(:scope):is(.c-who) {
      order: 2;
    }
    .c-talk, :where(:scope):is(.c-talk) {
      order: 3;
      grid-column: 1 / -1;
    }
    .c-offices, :where(:scope):is(.c-offices) {
      order: 4;
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 16px;
    }
    .c-offices .fh, :where(:scope):is(.c-offices) .fh {
      grid-column: 1 / -1;
    }
  }
}

/* components/PageHero.vue */
@scope (.cmp-page-hero) to (:scope [class*="cmp-"] > *) {
  .phero, :where(:scope):is(.phero) {
    position: relative;
    padding: clamp(48px, 8vw, 104px) 0 clamp(48px, 7vw, 88px);
    background: var(--frost);
    overflow: hidden;
  }
  .phero::before, :where(:scope):is(.phero)::before {
    content: '';
    position: absolute;
    right: -60px;
    bottom: -80px;
    width: 340px;
    height: 420px;
    background: var(--blue);
    opacity: 0.05;
    clip-path: polygon(13% 0, 100% 53%, 14% 100%, 0 84%, 59% 51%, 0 16%);
  }
  .inner, :where(:scope):is(.inner) {
    position: relative;
  }
  .has-img, :where(:scope):is(.has-img) {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
  }
  h1, :where(:scope):is(h1) {
    font-size: clamp(2.4rem, 5.6vw, 4.2rem);
  }
  .art, :where(:scope):is(.art) {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    aspect-ratio: 4 / 3;
    padding: 32px 32px 0;
    border-radius: var(--radius-lg);
    background: radial-gradient(80% 70% at 50% 100%, #fff, var(--blue-50));
    border: 1px solid var(--blue-100);
  }
  .art img, :where(:scope):is(.art) img {
    max-height: 92%;
    width: auto;
  }
  .pic, :where(:scope):is(.pic) {
    position: relative;
  }
  .badge, :where(:scope):is(.badge) {
    position: absolute;
    left: -24px;
    bottom: -24px;
    max-width: 260px;
    padding: 16px 20px;
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-lg);
  }
  @media (max-width: 860px) {
    .badge, :where(:scope):is(.badge) {
      left: 12px;
      bottom: -20px;
    }
  }
  .pic img, :where(:scope):is(.pic) img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%, 0 14%);
  }
  @media (max-width: 860px) {
    .has-img, :where(:scope):is(.has-img) {
      grid-template-columns: 1fr;
    }
  }
}

/* components/HeroPrompt.vue */
@scope (.cmp-hero-prompt) to (:scope [class*="cmp-"] > *) {
  /* layout */
  .hero, :where(:scope):is(.hero) {
    position: relative;
    padding-top: clamp(32px, 6vw, 72px);
    background: var(--frost);
    overflow: hidden;
  }
  .hero-grid, :where(:scope):is(.hero-grid) {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
    padding-bottom: clamp(28px, 4vw, 44px);
  }
  h1, :where(:scope):is(h1) {
    font-size: clamp(2.5rem, 4.6vw, 4.1rem);
    margin-bottom: 0.3em;
  }
  .lead strong, :where(:scope):is(.lead) strong {
    color: var(--ink);
    font-weight: 600;
  }

  /* the big "You" prompt — the original dark chat bubble, grown up */
  .you, :where(:scope):is(.you) {
    margin-top: 32px;
    background:
      radial-gradient(circle at 100% 0%, rgb(45 226 170 / 0.18), transparent 45%),
      radial-gradient(circle at 0% 100%, rgb(26 90 193 / 0.35), transparent 50%),
      var(--ink);
    color: #fff;
    border-radius: 24px;
    border-bottom-left-radius: 6px;
    padding: 20px 20px 16px 24px;
    box-shadow: 0 24px 60px -24px rgb(11 29 63 / 0.6);
    transition: box-shadow 0.2s;
  }
  .you.focused, :where(:scope):is(.you.focused) {
    box-shadow: 0 0 0 4px var(--mint), 0 24px 60px -24px rgb(11 29 63 / 0.6);
  }
  .who, :where(:scope):is(.who) {
    display: block;
    font: 500 0.72rem var(--code);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-dark-2);
    margin-bottom: 6px;
  }
  .row, :where(:scope):is(.row) {
    display: flex;
    gap: 12px;
    align-items: flex-start;
  }
  .gt, :where(:scope):is(.gt) {
    font: 700 clamp(1.4rem, 2.4vw, 1.8rem) / 1.35 var(--code);
    color: var(--mint);
    flex: none;
  }
  .field, :where(:scope):is(.field) {
    position: relative;
    flex: 1;
    min-width: 0;
  }
  textarea, :where(:scope):is(textarea), .ghost, :where(:scope):is(.ghost) {
    font: 400 clamp(1.25rem, 2.2vw, 1.6rem) / 1.35 var(--font);
  }
  textarea, :where(:scope):is(textarea) {
    display: block;
    width: 100%;
    min-height: 2.7em;
    border: 0;
    outline: none;
    resize: none;
    background: transparent;
    color: #fff;
    padding: 0;
  }
  textarea::placeholder, :where(:scope):is(textarea)::placeholder {
    color: var(--on-dark-2);
  }
  .ghost, :where(:scope):is(.ghost) {
    position: absolute;
    inset: 0;
    color: var(--on-dark);
    pointer-events: none;
  }
  .foot, :where(:scope):is(.foot) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgb(255 255 255 / 0.1);
  }
  .hint, :where(:scope):is(.hint) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--on-dark-2);
  }
  .send, :where(:scope):is(.send) {
    flex: none;
  }

  .snap-row, :where(:scope):is(.snap-row) {
    position: relative;
    padding-bottom: clamp(32px, 5vw, 56px);
  }
  .talk-row, :where(:scope):is(.talk-row) {
    margin-top: 20px;
  }
  .below, :where(:scope):is(.below) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 28px;
    margin-top: 28px;
  }
  .planner, :where(:scope):is(.planner) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--blue);
    text-decoration: none;
  }
  .planner:hover, :where(:scope):is(.planner:hover) {
    text-decoration: underline;
  }
  .trust, :where(:scope):is(.trust) {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    list-style: none;
    margin: 0;
    padding: 0;
    color: var(--ink-3);
    font-size: 0.95rem;
  }
  .trust strong, :where(:scope):is(.trust) strong {
    color: var(--blue);
    font-size: 1.15rem;
  }

  /* photo side — same blob and photo as the current homepage, with the stork's answer on top */
  .hero-art, :where(:scope):is(.hero-art) {
    position: relative;
    min-height: 500px;
  }
  .blob, :where(:scope):is(.blob) {
    position: absolute;
    inset: 4% -10% 10% 12%;
    background: var(--blue);
    clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%, 26% 50%);
    border-radius: 32px;
  }
  .blob::after, :where(:scope):is(.blob)::after {
    content: '';
    position: absolute;
    left: 30%;
    bottom: 9%;
    width: 26%;
    height: 22px;
    background: var(--mint);
  }
  .photo-wrap, :where(:scope):is(.photo-wrap) {
    position: relative;
    width: 86%;
    margin-left: auto;
    margin-top: 4%;
  }
  .photo, :where(:scope):is(.photo) {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 24px;
    box-shadow: var(--shadow-lg);
    border: 6px solid #fff;
  }
  /* the team photo doubles as the poster for the intro video */
  .photo-wrap .play, :where(:scope):is(.photo-wrap) .play {
    position: absolute;
    top: 34%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .photo-wrap .play:hover, :where(:scope):is(.photo-wrap) .play:hover {
    transform: translate(-50%, -50%) scale(1.04);
  }
  .us-slot, :where(:scope):is(.us-slot) {
    position: absolute;
    left: -4%;
    bottom: -2%;
    width: min(480px, 92%);
    min-height: 150px;
    display: flex;
    align-items: flex-end;
  }
  .us-slot-mobile, :where(:scope):is(.us-slot-mobile) {
    display: none;
  }

  @media (max-width: 960px) {
    .hero-grid, :where(:scope):is(.hero-grid) {
      grid-template-columns: 1fr;
    }
    .hero-art, :where(:scope):is(.hero-art) {
      min-height: 0;
    }
    .us-slot, :where(:scope):is(.us-slot) {
      display: none;
    }
    /* a fixed-height slot, so the content below doesn't jump as answers come and go */
    .us-slot-mobile, :where(:scope):is(.us-slot-mobile) {
      display: flex;
      align-items: flex-start;
      min-height: 168px;
      margin: 12px 0 0 28px;
    }
    .photo-wrap, :where(:scope):is(.photo-wrap) {
      width: 92%;
    }
  }
  @media (max-width: 640px) {
    .you, :where(:scope):is(.you) {
      padding: 16px;
    }
    .gt, :where(:scope):is(.gt) {
      display: none;
    }
    .foot, :where(:scope):is(.foot) {
      flex-direction: column-reverse;
      align-items: stretch;
    }
    .hint, :where(:scope):is(.hint) {
      display: none;
    }
    .send, :where(:scope):is(.send) {
      justify-content: center;
    }
    .us-slot-mobile, :where(:scope):is(.us-slot-mobile) {
      margin-left: 16px;
      min-height: 190px;
    }
    /* phones: a shorter hero, so the first section isn't three screens down. Wider, shorter photo;
       no numbers line (they're on About); and no results snapshot — the "What changed for our
       clients" section shows the same results a little further down. */
    .trust, :where(:scope):is(.trust) {
      display: none;
    }
    .below, :where(:scope):is(.below) {
      margin-top: 20px;
    }
    .photo-wrap, :where(:scope):is(.photo-wrap) {
      width: 100%;
      margin-top: 0;
    }
    .photo, :where(:scope):is(.photo) {
      aspect-ratio: 16 / 9;
    }
    .photo-wrap .play, :where(:scope):is(.photo-wrap) .play {
      top: 50%;
    }
    .blob, :where(:scope):is(.blob) {
      inset: 10% -6% -6% 20%;
    }
    .snap-row, :where(:scope):is(.snap-row) {
      display: none;
    }
    .hero-grid, :where(:scope):is(.hero-grid) {
      padding-bottom: 32px;
    }
  }
}

/* components/StorkReply.vue */
@scope (.cmp-stork-reply) to (:scope [class*="cmp-"] > *) {
  .us, :where(:scope):is(.us) {
    width: 100%;
    background: #fff;
    border-radius: 24px;
    border-top-left-radius: 6px;
    padding: 20px 24px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--line);
  }
  .us.typing, :where(:scope):is(.us.typing) {
    width: auto;
    display: inline-flex;
    padding: 18px 22px;
  }
  .who, :where(:scope):is(.who) {
    display: block;
    font: 600 0.85rem var(--font);
    color: var(--blue);
    margin-bottom: 6px;
  }
  p, :where(:scope):is(p) {
    margin: 0;
    font-size: clamp(1.1rem, 1.6vw, 1.3rem);
    line-height: 1.4;
  }
  a, :where(:scope):is(a) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-weight: 600;
    color: var(--blue);
    text-decoration: none;
  }
  a:hover, :where(:scope):is(a:hover) {
    text-decoration: underline;
  }
  .dots, :where(:scope):is(.dots) {
    display: inline-flex;
    gap: 6px;
  }
  .dots i, :where(:scope):is(.dots) i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--blue);
    opacity: 0.35;
    animation: dot 1.2s infinite ease-in-out;
  }
  .dots i:nth-child(2), :where(:scope):is(.dots) i:nth-child(2) {
    animation-delay: 0.15s;
  }
  .dots i:nth-child(3), :where(:scope):is(.dots) i:nth-child(3) {
    animation-delay: 0.3s;
  }

  .pop-enter-active, :where(:scope):is(.pop-enter-active), .pop-leave-active, :where(:scope):is(.pop-leave-active) {
    transition: opacity 0.25s, transform 0.3s cubic-bezier(0.2, 1.3, 0.4, 1);
  }
  .pop-enter-from, :where(:scope):is(.pop-enter-from) {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
  .pop-leave-to, :where(:scope):is(.pop-leave-to) {
    opacity: 0;
  }
}
@keyframes dot {
  30% {
    opacity: 1;
    transform: translateY(-4px);
  }
}

/* components/IntroVideo.vue */
@scope (.cmp-intro-video) to (:scope [class*="cmp-"] > *) {
  .play, :where(:scope):is(.play) {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 18px 8px 8px;
    border: 0;
    border-radius: 999px;
    background: rgb(255 255 255 / 0.94);
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow-lg);
    color: var(--ink);
    font: 600 0.98rem var(--font);
    cursor: pointer;
    transition: transform 0.2s;
  }
  .play:hover, :where(:scope):is(.play:hover) {
    transform: scale(1.04);
  }
  .circle, :where(:scope):is(.circle) {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    box-shadow: 0 0 0 6px rgb(26 90 193 / 0.18);
  }
  .circle svg, :where(:scope):is(.circle) svg {
    margin-left: 3px;
  }
  .video, :where(:scope):is(.video) {
    width: min(960px, 94vw);
    padding: 0;
    border: 0;
    border-radius: 20px;
    background: #000;
    overflow: visible;
  }
  .video::backdrop, :where(:scope):is(.video)::backdrop {
    background: rgb(11 29 63 / 0.8);
    backdrop-filter: blur(4px);
  }
  .frame, :where(:scope):is(.frame) {
    position: relative;
    aspect-ratio: 16 / 9;
  }
  iframe, :where(:scope):is(iframe) {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 20px;
  }
  .x, :where(:scope):is(.x) {
    position: absolute;
    top: -18px;
    right: -18px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 0;
    background: #fff;
    color: var(--ink);
    box-shadow: var(--shadow);
    cursor: pointer;
  }
  @media (max-width: 640px) {
    .x, :where(:scope):is(.x) {
      top: -54px;
      right: 0;
    }
  }
}

/* components/ResultsSnapshot.vue */
@scope (.cmp-results-snapshot) to (:scope [class*="cmp-"] > *) {
  .snap, :where(:scope):is(.snap) {
    background: #fff;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    padding: 20px 24px 22px;
  }
  .head, :where(:scope):is(.head) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    margin-bottom: 16px;
  }
  .title, :where(:scope):is(.title) {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-weight: 700;
    color: var(--blue);
  }
  .title svg, :where(:scope):is(.title) svg {
    color: var(--mint-600);
  }
  .tabs, :where(:scope):is(.tabs) {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .tabs button, :where(:scope):is(.tabs) button {
    padding: 8px 14px;
    min-height: 40px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #fff;
    font: 500 0.92rem var(--font);
    color: var(--ink-2);
    cursor: pointer;
    transition: all 0.15s;
  }
  .tabs button:hover, :where(:scope):is(.tabs) button:hover {
    border-color: var(--blue);
    color: var(--blue);
  }
  .tabs button.on, :where(:scope):is(.tabs) button.on {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
  }
  .panel, :where(:scope):is(.panel) {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 16px 32px;
    align-items: center;
  }
  .sector, :where(:scope):is(.sector) {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--blue);
  }
  .headline, :where(:scope):is(.headline) {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 2px 0 8px;
  }
  .more, :where(:scope):is(.more) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--blue);
    text-decoration: none;
  }
  .stats, :where(:scope):is(.stats) {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .stats li, :where(:scope):is(.stats) li {
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--snow);
  }
  .stats strong, :where(:scope):is(.stats) strong {
    display: block;
    font-size: 1.5rem;
    line-height: 1.1;
    color: var(--blue);
  }
  .stats span, :where(:scope):is(.stats) span {
    font-size: 0.88rem;
    color: var(--ink-2);
  }
  @media (max-width: 760px) {
    .panel, :where(:scope):is(.panel) {
      grid-template-columns: 1fr;
    }
  }
  @media (max-width: 420px) {
    .stats, :where(:scope):is(.stats) {
      grid-template-columns: 1fr 1fr;
    }
  }
}

/* components/LogoMarquee.vue */
@scope (.cmp-logo-marquee) to (:scope [class*="cmp-"] > *) {
  .marquee, :where(:scope):is(.marquee) {
    position: relative;
    display: flex;
    align-items: center;
    /* frosted glass, so it sits on the hero's icy tint instead of cutting it off */
    border-top: 1px solid rgb(255 255 255 / 0.8);
    border-bottom: 1px solid var(--line);
    background: rgb(255 255 255 / 0.5);
    padding: 22px 0;
  }
  /* Logos fade out at both edges; the right fade ends before the pause button,
     so nothing ever slides underneath it. */
  .viewport, :where(:scope):is(.viewport) {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 96px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 96px), transparent);
  }
  .track, :where(:scope):is(.track) {
    display: flex;
    align-items: center;
    width: max-content;
    list-style: none;
    margin: 0;
    padding: 0;
    animation: slide 50s linear infinite;
  }
  .marquee.paused .track, :where(:scope):is(.marquee.paused) .track, .viewport:hover .track, :where(:scope):is(.viewport:hover) .track {
    animation-play-state: paused;
  }
  li, :where(:scope):is(li) {
    flex: none;
    padding-right: 64px; /* spacing lives on each item so the duplicated half lines up seamlessly */
  }
  img, :where(:scope):is(img) {
    display: block;
    width: auto;
    max-width: none;
    opacity: 0.8;
    transition: opacity 0.2s;
  }
  img:hover, :where(:scope):is(img:hover) {
    opacity: 1;
  }
  .toggle, :where(:scope):is(.toggle) {
    flex: none;
    margin: 0 16px 0 4px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--blue);
    cursor: pointer;
    transition: border-color 0.2s;
  }
  .toggle:hover, :where(:scope):is(.toggle:hover) {
    border-color: var(--blue);
  }
}
@keyframes slide {
  to {
    transform: translateX(-50%);
  }
}

/* components/StagePicker.vue */
@scope (.cmp-stage-picker) to (:scope [class*="cmp-"] > *) {
  .tabs, :where(:scope):is(.tabs) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 40px 0 20px;
  }
  .tabs button, :where(:scope):is(.tabs) button {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    padding: 18px 20px;
    border-radius: 16px;
    border: 2px solid var(--line);
    background: #fff;
    font: 500 1.05rem/1.3 var(--font);
    color: var(--ink-2);
    cursor: pointer;
    transition: all 0.2s;
    min-height: 64px;
  }
  .tabs button:hover, :where(:scope):is(.tabs) button:hover {
    border-color: var(--blue-100);
    color: var(--ink);
  }
  .tabs button.on, :where(:scope):is(.tabs) button.on {
    border-color: var(--blue);
    background: var(--blue);
    color: #fff;
    box-shadow: var(--shadow-lg);
  }
  .em, :where(:scope):is(.em) {
    flex: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--blue-50);
    color: var(--blue);
    transition: background 0.2s, color 0.2s;
  }
  .tabs button.on .em, :where(:scope):is(.tabs) button.on .em {
    background: var(--mint);
    color: var(--ink);
  }
  .panel, :where(:scope):is(.panel) {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
    background: var(--snow);
    border-radius: var(--radius-lg);
    padding: clamp(24px, 5vw, 56px);
  }
  .stage-art, :where(:scope):is(.stage-art) {
    height: 110px;
    width: auto;
    margin-bottom: 16px;
  }
  .timeline, :where(:scope):is(.timeline) {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--ink) !important;
    margin: -8px 0 24px;
  }
  .txt p, :where(:scope):is(.txt) p {
    color: var(--ink-2);
    font-size: 1.1rem;
  }
  h4, :where(:scope):is(h4) {
    margin: 24px 0 12px;
    font-size: 1rem;
    color: var(--blue);
  }
  ul, :where(:scope):is(ul) {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
    display: grid;
    gap: 12px;
  }
  li, :where(:scope):is(li) {
    display: flex;
    gap: 12px;
    align-items: baseline;
    font-size: 1.1rem;
  }
  li .chev, :where(:scope):is(li) .chev {
    color: var(--mint-600);
    flex: none;
  }
  .ex, :where(:scope):is(.ex) {
    position: relative;
    display: block;
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    text-decoration: none;
    box-shadow: var(--shadow);
  }
  .ex img, :where(:scope):is(.ex) img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s;
  }
  .ex:hover img, :where(:scope):is(.ex:hover) img {
    transform: scale(1.05);
  }
  .cap, :where(:scope):is(.cap) {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    background: rgb(255 255 255 / 0.95);
    backdrop-filter: blur(8px);
    border-radius: 14px;
    padding: 14px 18px;
    font-weight: 600;
    line-height: 1.35;
  }
  .cap small, :where(:scope):is(.cap) small {
    display: block;
    font: 600 0.85rem var(--font);
    color: var(--blue);
    margin-bottom: 4px;
  }
  .swap-enter-active, :where(:scope):is(.swap-enter-active), .swap-leave-active, :where(:scope):is(.swap-leave-active) {
    transition: opacity 0.25s, transform 0.25s;
  }
  .swap-enter-from, :where(:scope):is(.swap-enter-from) {
    opacity: 0;
    transform: translateY(12px);
  }
  .swap-leave-to, :where(:scope):is(.swap-leave-to) {
    opacity: 0;
  }
  @media (max-width: 860px) {
    .tabs, :where(:scope):is(.tabs) {
      grid-template-columns: 1fr;
    }
    .panel, :where(:scope):is(.panel) {
      grid-template-columns: 1fr;
    }
  }
}

/* views/Home.vue: the first results card fills the height of the two beside it.
   These rules reach into the project card (Vue's :deep), so this scope has no lower boundary. */
@scope (.cmp-home) to (.no-boundary) {
  .results, :where(:scope):is(.results) {
    background: var(--snow);
  }
  .head, :where(:scope):is(.head) {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 40px;
  }
  .cases, :where(:scope):is(.cases) {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 24px;
  }
  .cases .first, :where(:scope):is(.cases) .first {
    grid-row: span 2;
  }
  .cases .first .pcard, :where(:scope):is(.cases) .first .pcard {
    height: 100%;
  }
  .cases .first .media, :where(:scope):is(.cases) .first .media {
    flex: 1;
    aspect-ratio: auto;
    min-height: 320px;
  }
  .cases .first .body, :where(:scope):is(.cases) .first .body {
    flex: none;
  }
  @media (max-width: 860px) {
    .cases, :where(:scope):is(.cases) {
      grid-template-columns: 1fr;
    }
    .cases .first, :where(:scope):is(.cases) .first {
      grid-row: auto;
    }
    .cases .first .media, :where(:scope):is(.cases) .first .media {
      flex: none;
      aspect-ratio: 16 / 10;
      min-height: 0;
    }
  }
}

/* components/ProjectCard.vue */
@scope (.cmp-project-card) to (:scope [class*="cmp-"] > *) {
  .pcard, :where(:scope):is(.pcard) {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    background: #fff;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s;
    height: 100%;
  }
  .pcard:hover, :where(:scope):is(.pcard:hover) {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
  }
  .media, :where(:scope):is(.media) {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--snow);
  }
  /* Every project image sits in the same rounded frame on an ice mat, with a soft blue
     tint that lifts on hover — so photos, screenshots and mockups read as one set. */
  .frame, :where(:scope):is(.frame) {
    position: absolute;
    inset: 10px 10px 0;
    overflow: hidden;
    border-radius: 12px;
    background: var(--blue-50);
  }
  .frame::after, :where(:scope):is(.frame)::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(26 90 193 / 0) 40%, rgb(26 90 193 / 0.14));
    pointer-events: none;
    transition: opacity 0.35s;
  }
  .pcard:hover .frame::after, :where(:scope):is(.pcard:hover) .frame::after {
    opacity: 0;
  }
  .media img, :where(:scope):is(.media) img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.45s, transform 0.6s;
  }
  .media .b, :where(:scope):is(.media) .b {
    opacity: 0;
    transform: scale(1.06);
  }
  .pcard:hover .b, :where(:scope):is(.pcard:hover) .b {
    opacity: 1;
    transform: none;
  }
  .pcard:hover .a, :where(:scope):is(.pcard:hover) .a {
    transform: scale(1.04);
  }
  .body, :where(:scope):is(.body) {
    padding: 22px 24px 26px;
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  h3, :where(:scope):is(h3) {
    margin: 12px 0 6px;
  }
  p, :where(:scope):is(p) {
    color: var(--ink-2);
    font-size: 1rem;
    flex: 1;
  }
  /* cards lead with what changed for the client */
  .outcome, :where(:scope):is(.outcome) {
    color: var(--ink);
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.4;
  }
  .more, :where(:scope):is(.more) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--blue);
  }
  .more .chev, :where(:scope):is(.more) .chev {
    transition: transform 0.2s;
  }
  .pcard:hover .more .chev, :where(:scope):is(.pcard:hover) .more .chev {
    transform: translateX(5px);
  }
  .big h3, :where(:scope):is(.big) h3 {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
  }
}

/* components/AudienceCards.vue */
@scope (.cmp-audience-cards) to (:scope [class*="cmp-"] > *) {
  .who, :where(:scope):is(.who) {
    /* one of the two "frosted" key sections */
    background: var(--frost);
  }
  .grid, :where(:scope):is(.grid) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 36px;
  }
  .card, :where(:scope):is(.card) {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    box-shadow: var(--shadow);
    transition: transform 0.25s, box-shadow 0.25s;
  }
  .card:hover, :where(:scope):is(.card:hover) {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
  }
  .pic, :where(:scope):is(.pic) {
    aspect-ratio: 16 / 9;
    overflow: hidden;
  }
  .pic img, :where(:scope):is(.pic) img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .body, :where(:scope):is(.body) {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px 24px 24px;
  }
  h3, :where(:scope):is(h3) {
    margin-bottom: 2px;
  }
  .short, :where(:scope):is(.short) {
    color: var(--ink-3);
    font-size: 0.95rem;
    margin-bottom: 14px;
  }
  .stat, :where(:scope):is(.stat) {
    flex: 1;
    color: var(--ink-2);
    font-size: 0.95rem;
    line-height: 1.4;
  }
  .stat strong, :where(:scope):is(.stat) strong {
    display: block;
    font-size: 1.8rem;
    line-height: 1.1;
    color: var(--blue);
  }
  .more, :where(:scope):is(.more) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--blue);
  }
  @media (max-width: 900px) {
    .grid, :where(:scope):is(.grid) {
      grid-template-columns: 1fr;
    }
  }
}

/* components/Journey.vue */
@scope (.cmp-journey) to (:scope [class*="cmp-"] > *) {
  .journey, :where(:scope):is(.journey) {
    background: var(--snow);
  }
  .head, :where(:scope):is(.head) {
    max-width: 720px;
  }
  .steps, :where(:scope):is(.steps) {
    list-style: none;
    padding: 0;
    margin: 48px 0 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  li, :where(:scope):is(li) {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
  }
  .art, :where(:scope):is(.art) {
    height: 170px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 20px 20px 0;
    background: linear-gradient(180deg, var(--blue-50), #fff);
  }
  .art img, :where(:scope):is(.art) img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
  }
  /* the two eggs sit on the card's bottom edge; the storks float a little */
  li:nth-child(n + 3) .art, :where(:scope):is(li:nth-child(n + 3)) .art {
    padding-bottom: 12px;
  }
  .body, :where(:scope):is(.body) {
    padding: 20px 24px 26px;
  }
  .phase, :where(:scope):is(.phase) {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--blue);
    margin-bottom: 4px;
  }
  h3, :where(:scope):is(h3) {
    margin-bottom: 6px;
  }
  p, :where(:scope):is(p) {
    color: var(--ink-2);
    font-size: 1rem;
    margin: 0;
  }
  @media (max-width: 960px) {
    .steps, :where(:scope):is(.steps) {
      grid-template-columns: 1fr 1fr;
    }
  }
  @media (max-width: 560px) {
    .steps, :where(:scope):is(.steps) {
      grid-template-columns: 1fr;
    }
    .art, :where(:scope):is(.art) {
      height: 150px;
    }
  }
}

/* components/WaysToWork.vue */
@scope (.cmp-ways-to-work) to (:scope [class*="cmp-"] > *) {
  .head, :where(:scope):is(.head) {
    max-width: 720px;
  }
  .grid, :where(:scope):is(.grid) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
  }
  .plan, :where(:scope):is(.plan) {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 32px 28px;
    border-radius: var(--radius-lg);
    background: #fff;
    border: 1px solid var(--line);
  }
  .plan.highlight, :where(:scope):is(.plan.highlight) {
    border: 2px solid var(--blue);
    box-shadow: var(--shadow-lg);
  }
  .for, :where(:scope):is(.for) {
    color: var(--ink-2);
    min-height: 3.2em;
  }
  .price, :where(:scope):is(.price) {
    font-size: 1.7rem;
    font-weight: 700;
    margin: 8px 0 0;
  }
  .note, :where(:scope):is(.note) {
    color: var(--ink-3);
    font-size: 0.92rem;
    margin-bottom: 20px;
  }
  ul, :where(:scope):is(ul) {
    list-style: none;
    padding: 20px 0 0;
    margin: 0;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 10px;
  }
  li, :where(:scope):is(li) {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 0.98rem;
  }
  li svg, :where(:scope):is(li) svg {
    color: var(--mint-600);
    flex: none;
    margin-top: 3px;
  }
  .foot, :where(:scope):is(.foot) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 32px;
    margin-top: 32px;
  }
  .checkup, :where(:scope):is(.checkup) {
    color: var(--ink-2);
    text-decoration: none;
  }
  .checkup .chev, :where(:scope):is(.checkup) .chev {
    vertical-align: -0.1em;
    margin-left: 4px;
  }
  .checkup strong, :where(:scope):is(.checkup) strong {
    color: var(--blue);
  }
  .checkup:hover strong, :where(:scope):is(.checkup:hover) strong {
    text-decoration: underline;
  }
  @media (max-width: 900px) {
    .grid, :where(:scope):is(.grid) {
      grid-template-columns: 1fr;
    }
    .for, :where(:scope):is(.for) {
      min-height: 0;
    }
  }
}

/* components/Translator.vue */
@scope (.cmp-translator) to (:scope [class*="cmp-"] > *) {
  .tint, :where(:scope):is(.tint) {
    background: var(--snow);
  }
  /* ---- dark variant: the homepage's one navy section ---- */
  .dark, :where(:scope):is(.dark) {
    background: var(--frost-dark);
    color: #fff;
  }
  .dark h2, :where(:scope):is(.dark) h2 {
    color: #fff;
  }
  .dark .eyebrow, :where(:scope):is(.dark) .eyebrow {
    color: var(--mint);
  }
  .dark .lead, :where(:scope):is(.dark) .lead {
    color: var(--on-dark);
  }
  .dark .goals button, :where(:scope):is(.dark) .goals button {
    background: rgb(255 255 255 / 0.04);
    border-color: rgb(255 255 255 / 0.18);
    color: var(--blue-100);
  }
  .dark .goals button:hover, :where(:scope):is(.dark) .goals button:hover {
    border-color: var(--mint);
    color: #fff;
  }
  .dark .goals button.on, :where(:scope):is(.dark) .goals button.on {
    background: var(--mint);
    border-color: var(--mint);
    color: var(--ink);
  }
  .dark .they, :where(:scope):is(.dark) .they {
    background: rgb(255 255 255 / 0.05);
    border: 1px dashed rgb(255 255 255 / 0.22);
  }
  .dark .they .who, :where(:scope):is(.dark) .they .who, .dark .note, :where(:scope):is(.dark) .note {
    color: var(--on-dark);
  }
  .dark .jargon, :where(:scope):is(.dark) .jargon {
    color: var(--blue-100);
  }
  /* the plain-English answer is the bright, clear card */
  .dark .we, :where(:scope):is(.dark) .we {
    background: #fff;
    color: var(--ink);
    box-shadow: 0 0 0 1px rgb(45 226 170 / 0.5), 0 24px 60px -24px rgb(45 226 170 / 0.55);
  }
  .dark .we .who, :where(:scope):is(.dark) .we .who {
    color: var(--blue);
  }
  .dark .outcome, :where(:scope):is(.dark) .outcome {
    color: var(--ink-2);
  }
  .dark .outcome strong, :where(:scope):is(.dark) .outcome strong {
    color: var(--blue);
  }
  .dark .arrow, :where(:scope):is(.dark) .arrow {
    color: var(--mint);
  }
  .dark .more, :where(:scope):is(.dark) .more {
    color: var(--mint);
  }
  .tint .they, :where(:scope):is(.tint) .they {
    background: #fff;
  }
  .head, :where(:scope):is(.head) {
    max-width: 720px;
  }
  .goals, :where(:scope):is(.goals) {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 32px 0 20px;
  }
  .goals button, :where(:scope):is(.goals) button {
    padding: 10px 16px;
    min-height: 44px;
    border-radius: 999px;
    border: 2px solid var(--line);
    background: #fff;
    font: 500 0.95rem var(--font);
    color: var(--ink-2);
    cursor: pointer;
    transition: all 0.15s;
  }
  .goals button:hover, :where(:scope):is(.goals) button:hover {
    border-color: var(--blue-100);
    color: var(--blue);
  }
  .goals button.on, :where(:scope):is(.goals) button.on {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
  }
  .pair, :where(:scope):is(.pair) {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    align-items: stretch;
  }
  .they, :where(:scope):is(.they), .we, :where(:scope):is(.we) {
    border-radius: var(--radius);
    padding: 26px 28px;
  }
  .they, :where(:scope):is(.they) {
    background: var(--snow);
    border: 1px dashed var(--blue-100);
  }
  .we, :where(:scope):is(.we) {
    background: var(--ink);
    color: #fff;
  }
  .who, :where(:scope):is(.who) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--ink-3);
  }
  .we .who, :where(:scope):is(.we) .who {
    color: var(--mint);
  }
  .jargon, :where(:scope):is(.jargon) {
    font-family: var(--code);
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--ink-2);
  }
  .note, :where(:scope):is(.note) {
    margin: 0;
    font-size: 0.9rem;
    color: var(--ink-3);
  }
  .plain, :where(:scope):is(.plain) {
    font-size: 1.2rem;
    line-height: 1.45;
    font-weight: 500;
  }
  .outcome, :where(:scope):is(.outcome) {
    margin: 0;
    color: var(--on-dark);
  }
  .outcome strong, :where(:scope):is(.outcome) strong {
    color: var(--mint);
  }
  .arrow, :where(:scope):is(.arrow) {
    align-self: center;
    color: var(--mint-600);
  }
  .more, :where(:scope):is(.more) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    font-weight: 600;
    color: var(--blue);
    text-decoration: none;
  }
  .swap-enter-active, :where(:scope):is(.swap-enter-active), .swap-leave-active, :where(:scope):is(.swap-leave-active) {
    transition: opacity 0.2s, transform 0.2s;
  }
  .swap-enter-from, :where(:scope):is(.swap-enter-from) {
    opacity: 0;
    transform: translateY(8px);
  }
  .swap-leave-to, :where(:scope):is(.swap-leave-to) {
    opacity: 0;
  }
  @media (max-width: 760px) {
    .pair, :where(:scope):is(.pair) {
      grid-template-columns: 1fr;
    }
    .arrow, :where(:scope):is(.arrow) {
      justify-self: center;
      transform: rotate(90deg);
    }
  }
}

/* components/PeopleQuote.vue */
@scope (.cmp-people-quote) to (:scope [class*="cmp-"] > *) {
  .grid, :where(:scope):is(.grid) {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: clamp(32px, 6vw, 80px);
    align-items: center;
  }
  .faces, :where(:scope):is(.faces) {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 28px 0 24px;
  }
  .faces li + li, :where(:scope):is(.faces) li + li {
    margin-left: -14px;
  }
  .faces img, :where(:scope):is(.faces) img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: var(--shadow);
  }
  .more, :where(:scope):is(.more) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--blue);
    text-decoration: none;
  }
  .quote, :where(:scope):is(.quote) {
    margin: 0;
    background: #fff;
    border-radius: var(--radius-lg);
    padding: clamp(28px, 4vw, 44px);
    box-shadow: var(--shadow);
    border-top: 6px solid var(--mint);
  }
  blockquote, :where(:scope):is(blockquote) {
    margin: 0 0 24px;
    font-size: clamp(1.1rem, 1.8vw, 1.3rem);
    line-height: 1.55;
  }
  figcaption, :where(:scope):is(figcaption) {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--ink-3);
    font-size: 0.95rem;
  }
  figcaption strong, :where(:scope):is(figcaption) strong {
    color: var(--ink);
  }
  figcaption img, :where(:scope):is(figcaption) img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
  }
  @media (max-width: 900px) {
    .grid, :where(:scope):is(.grid) {
      grid-template-columns: 1fr;
    }
  }
  @media (max-width: 420px) {
    .faces img, :where(:scope):is(.faces) img {
      width: 56px;
      height: 56px;
    }
  }
}

/* components/CtaBand.vue */
@scope (.cmp-cta-band) to (:scope [class*="cmp-"] > *) {
  .band, :where(:scope):is(.band) {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    /* mint as light: a soft glow in the blue */
    background:
      radial-gradient(circle at 8% 110%, rgb(45 226 170 / 0.35), transparent 45%),
      radial-gradient(circle at 45% -10%, rgb(255 255 255 / 0.12), transparent 40%),
      var(--blue);
    color: #fff;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    align-items: stretch;
    box-shadow: var(--shadow-lg);
  }
  .copy, :where(:scope):is(.copy) {
    position: relative;
    z-index: 1;
    padding: clamp(32px, 6vw, 72px);
  }
  h2, :where(:scope):is(h2) {
    color: #fff;
  }
  p, :where(:scope):is(p) {
    color: var(--blue-100);
    font-size: 1.15rem;
    max-width: 30em;
  }
  .actions, :where(:scope):is(.actions) {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
  }
  .talk, :where(:scope):is(.talk) {
    margin-top: 24px;
  }
  .pic, :where(:scope):is(.pic) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
  }
  .bg-chev, :where(:scope):is(.bg-chev) {
    position: absolute;
    left: 38%;
    top: -10%;
    height: 130%;
    fill: rgb(255 255 255 / 0.06);
  }
  @media (max-width: 820px) {
    .band, :where(:scope):is(.band) {
      grid-template-columns: 1fr;
    }
    .pic, :where(:scope):is(.pic) {
      height: 220px;
      clip-path: polygon(0 18%, 100% 0, 100% 100%, 0 100%);
    }
  }
}

/* views/Services.vue */
@scope (.cmp-services) to (:scope [class*="cmp-"] > *) {
  .offer-grid, :where(:scope):is(.offer-grid) {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 40px;
  }
  .offer, :where(:scope):is(.offer) {
    padding: 28px 24px;
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
  }
  .offer:hover, :where(:scope):is(.offer:hover) {
    transform: translateY(-6px);
    border-color: var(--mint);
    box-shadow: var(--shadow-lg);
  }
  .icon, :where(:scope):is(.icon) {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--blue-50);
    color: var(--blue);
    margin-bottom: 20px;
  }
  .offer p, :where(:scope):is(.offer) p {
    color: var(--ink-2);
    font-size: 1rem;
  }
  .offer ul, :where(:scope):is(.offer) ul {
    list-style: none;
    padding: 16px 0 0;
    margin: 0;
    border-top: 1px dashed var(--line);
    display: grid;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 500;
  }
  .offer li, :where(:scope):is(.offer) li {
    display: flex;
    gap: 10px;
    align-items: baseline;
  }
  .offer li .chev, :where(:scope):is(.offer) li .chev {
    color: var(--mint-600);
    flex: none;
  }

  @media (max-width: 1000px) {
    .offer-grid, :where(:scope):is(.offer-grid) {
      grid-template-columns: 1fr 1fr;
    }
  }
  @media (max-width: 640px) {
    .offer-grid, :where(:scope):is(.offer-grid) {
      grid-template-columns: 1fr;
    }
  }
}

/* components/Audiences.vue */
@scope (.cmp-audiences) to (:scope [class*="cmp-"] > *) {
  .a-grid, :where(:scope):is(.a-grid) {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 40px;
  }
  .a-card, :where(:scope):is(.a-card) {
    padding: 28px 24px;
    border-radius: var(--radius);
    background: var(--snow);
    border-top: 6px solid var(--blue);
    display: flex;
    flex-direction: column;
  }
  .a-card:nth-child(even), :where(:scope):is(.a-card:nth-child(even)) {
    border-top-color: var(--mint);
  }
  .n, :where(:scope):is(.n) {
    font-size: 2.6rem;
    line-height: 1;
    color: var(--blue);
    margin-bottom: 12px;
  }
  p, :where(:scope):is(p) {
    color: var(--ink-2);
    font-size: 1rem;
    flex: 1;
  }
  ul, :where(:scope):is(ul) {
    list-style: none;
    padding: 16px 0 0;
    margin: 0;
    border-top: 1px dashed var(--line);
    display: grid;
    gap: 6px;
  }
  a, :where(:scope):is(a) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--blue);
    text-decoration: none;
  }
  a:hover, :where(:scope):is(a:hover) {
    text-decoration: underline;
  }
  .page, :where(:scope):is(.page) {
    margin-top: 14px;
    color: var(--ink);
  }
  a .chev, :where(:scope):is(a) .chev {
    color: var(--mint-600);
  }
  @media (max-width: 1000px) {
    .a-grid, :where(:scope):is(.a-grid) {
      grid-template-columns: 1fr 1fr;
    }
  }
  @media (max-width: 560px) {
    .a-grid, :where(:scope):is(.a-grid) {
      grid-template-columns: 1fr;
    }
  }
}

/* components/Tools.vue */
@scope (.cmp-tools) to (:scope [class*="cmp-"] > *) {
  .tools, :where(:scope):is(.tools) {
    background: var(--snow);
  }
  .head, :where(:scope):is(.head) {
    max-width: 720px;
    margin-bottom: 40px;
  }
  .groups, :where(:scope):is(.groups) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .group, :where(:scope):is(.group) {
    padding: 24px;
    border-radius: var(--radius);
    background: #fff;
    border: 1px solid var(--line);
  }
  h3, :where(:scope):is(h3) {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.1rem;
    margin-bottom: 16px;
  }
  .ico, :where(:scope):is(.ico) {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--blue-50);
    color: var(--blue);
    flex: none;
  }
  ul, :where(:scope):is(ul) {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
  }
  li, :where(:scope):is(li) {
    padding: 10px 0;
    border-top: 1px solid var(--line);
    line-height: 1.4;
  }
  li strong, :where(:scope):is(li) strong {
    color: var(--ink);
    font-weight: 600;
  }
  li span, :where(:scope):is(li) span {
    color: var(--ink-3);
  }
  li span::before, :where(:scope):is(li) span::before {
    content: '— ';
  }
  @media (max-width: 900px) {
    .groups, :where(:scope):is(.groups) {
      grid-template-columns: 1fr;
    }
  }
}

/* components/Faq.vue */
@scope (.cmp-faq) to (:scope [class*="cmp-"] > *) {
  .tint, :where(:scope):is(.tint) {
    background: var(--snow);
  }
  .head, :where(:scope):is(.head) {
    text-align: center;
    margin-bottom: 40px;
  }
  .list, :where(:scope):is(.list) {
    max-width: 820px;
    margin: 0 auto;
    display: grid;
    gap: 12px;
  }
  details, :where(:scope):is(details) {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  details[open], :where(:scope):is(details[open]) {
    border-color: var(--blue);
    box-shadow: var(--shadow);
  }
  summary, :where(:scope):is(summary) {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    font-size: 1.1rem;
  }
  summary::-webkit-details-marker, :where(:scope):is(summary)::-webkit-details-marker {
    display: none;
  }
  .qm, :where(:scope):is(.qm) {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--blue-50);
    color: var(--blue);
    font: 700 1rem var(--mono);
    transition: background 0.2s, color 0.2s;
  }
  details[open] .qm, :where(:scope):is(details[open]) .qm {
    background: var(--mint);
    color: var(--ink);
  }
  .a, :where(:scope):is(.a) {
    padding: 0 24px 22px 76px;
  }
  .a p, :where(:scope):is(.a) p {
    color: var(--ink-2);
    margin-bottom: 8px;
  }
  .more, :where(:scope):is(.more) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--blue);
    text-decoration: none;
  }
  @media (max-width: 520px) {
    .a, :where(:scope):is(.a) {
      padding-left: 24px;
    }
  }
}

/* views/Work.vue */
@scope (.cmp-work) to (:scope [class*="cmp-"] > *) {
  .work, :where(:scope):is(.work) {
    padding-top: 48px;
  }
  .filters, :where(:scope):is(.filters) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 40px;
  }
  .lbl, :where(:scope):is(.lbl) {
    font-weight: 600;
    margin-right: 6px;
  }
  .filters button, :where(:scope):is(.filters) button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    padding: 10px 14px;
    min-height: 44px;
    border-radius: 999px;
    border: 2px solid var(--line);
    background: #fff;
    font: 500 0.95rem var(--font);
    color: var(--ink-2);
    cursor: pointer;
    transition: all 0.2s;
  }
  .filters button:hover, :where(:scope):is(.filters) button:hover {
    border-color: var(--blue-100);
  }
  .filters button.on, :where(:scope):is(.filters) button.on {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
  }
  .filters small, :where(:scope):is(.filters) small {
    font-family: var(--mono);
    font-size: 0.72rem;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--blue-50);
    color: var(--blue);
  }
  .filters .on small, :where(:scope):is(.filters) .on small {
    background: var(--mint);
    color: var(--ink);
  }
  /* phones: one row you swipe sideways, instead of five rows of buttons */
  @media (max-width: 760px) {
    .filters, :where(:scope):is(.filters) {
      flex-wrap: nowrap;
      overflow-x: auto;
      scroll-snap-type: x proximity;
      scroll-padding-inline: var(--gutter);
      scrollbar-width: none;
      margin-inline: calc(var(--gutter) * -1);
      padding: 4px var(--gutter);
      mask-image: linear-gradient(to right, transparent, #000 var(--gutter), #000 calc(100% - 40px), transparent);
    }
    .filters::-webkit-scrollbar, :where(:scope):is(.filters)::-webkit-scrollbar {
      display: none;
    }
    .filters button, :where(:scope):is(.filters) button {
      scroll-snap-align: start;
    }
    .lbl, :where(:scope):is(.lbl) {
      flex: none;
      scroll-snap-align: start; /* so the row starts at "Show me:", not the first button */
    }
  }
  .spot, :where(:scope):is(.spot) {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    margin-bottom: 32px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--ink);
    color: #fff;
    text-decoration: none;
    box-shadow: var(--shadow-lg);
    transition: transform 0.3s;
  }
  .spot:hover, :where(:scope):is(.spot:hover) {
    transform: translateY(-4px);
  }
  .s-pic, :where(:scope):is(.s-pic) {
    position: relative;
    min-height: 320px;
  }
  .s-pic img, :where(:scope):is(.s-pic) img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .s-badge, :where(:scope):is(.s-badge) {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--mint);
    color: var(--ink);
    font: 700 0.85rem var(--font);
  }
  .s-body, :where(:scope):is(.s-body) {
    padding: clamp(24px, 4vw, 44px);
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .s-body .chip, :where(:scope):is(.s-body) .chip {
    align-self: flex-start;
    background: rgb(255 255 255 / 0.1);
    color: var(--mint);
  }
  .s-body h2, :where(:scope):is(.s-body) h2 {
    color: #fff;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    margin: 12px 0 4px;
  }
  .s-body > p, :where(:scope):is(.s-body) > p {
    color: var(--on-dark);
  }
  .s-res, :where(:scope):is(.s-res) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 8px 0 16px;
  }
  .s-res strong, :where(:scope):is(.s-res) strong {
    display: block;
    font-size: 1.8rem;
    line-height: 1;
    color: var(--mint);
  }
  .s-res span, :where(:scope):is(.s-res) span {
    font-size: 0.8rem;
    color: var(--on-dark);
    line-height: 1.3;
    display: block;
    margin-top: 6px;
  }
  .s-q, :where(:scope):is(.s-q) {
    font-style: italic;
    color: var(--blue-100);
    font-size: 0.98rem;
  }
  .s-q small, :where(:scope):is(.s-q) small {
    font-style: normal;
    color: var(--on-dark-2);
  }
  .spot .more, :where(:scope):is(.spot) .more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--mint);
    margin-top: auto;
  }
  .logos-strip, :where(:scope):is(.logos-strip) {
    padding: 56px 0 0;
  }
  @media (max-width: 900px) {
    .spot, :where(:scope):is(.spot) {
      grid-template-columns: 1fr;
    }
    .s-pic, :where(:scope):is(.s-pic) {
      min-height: 220px;
    }
  }
  .grid, :where(:scope):is(.grid) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  .grid-move, :where(:scope):is(.grid-move), .grid-enter-active, :where(:scope):is(.grid-enter-active) {
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .grid, :where(:scope):is(.grid) {
    position: relative;
  }
  .grid-leave-active, :where(:scope):is(.grid-leave-active) {
    position: absolute;
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
  }
  .grid-enter-from, :where(:scope):is(.grid-enter-from) {
    opacity: 0;
    transform: scale(0.96) translateY(16px);
  }
  @media (max-width: 960px) {
    .grid, :where(:scope):is(.grid) {
      grid-template-columns: 1fr 1fr;
    }
  }
  @media (max-width: 600px) {
    .grid, :where(:scope):is(.grid) {
      grid-template-columns: 1fr;
    }
  }
}

/* components/ClientLogos.vue */
@scope (.cmp-client-logos) to (:scope [class*="cmp-"] > *) {
  .logos, :where(:scope):is(.logos) {
    text-align: center;
  }
  .t, :where(:scope):is(.t) {
    font: 600 0.85rem var(--font);
    color: var(--ink-3);
    margin-bottom: 24px;
  }
  ul, :where(:scope):is(ul) {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 24px 48px;
  }
  a, :where(:scope):is(a) {
    display: block;
    border-radius: 6px;
  }
  img, :where(:scope):is(img) {
    width: auto;
    opacity: 0.75;
    transition: opacity 0.2s;
  }
  img:hover, :where(:scope):is(img:hover) {
    opacity: 1;
  }
  .more, :where(:scope):is(.more) {
    font-weight: 600;
    color: var(--blue);
  }
}

/* views/Project.vue */
@scope (.cmp-project) to (:scope [class*="cmp-"] > *) {
  .top, :where(:scope):is(.top) {
    padding: 40px 0 0;
    background: linear-gradient(180deg, var(--snow), #fff 70%);
  }
  .back, :where(:scope):is(.back) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 24px;
    color: var(--blue);
    font-weight: 600;
    text-decoration: none;
  }
  h1, :where(:scope):is(h1) {
    margin-top: 16px;
  }
  .big, :where(:scope):is(.big) {
    font-size: clamp(1.25rem, 2.2vw, 1.6rem);
    margin-bottom: 40px;
  }
  .cover, :where(:scope):is(.cover) {
    width: 100%;
    max-height: 560px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
  }
  .summary, :where(:scope):is(.summary) {
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-weight: 300;
    line-height: 1.5;
  }
  .summary, :where(:scope):is(.summary) {
    max-width: 46em;
  }
  .ba, :where(:scope):is(.ba) {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    align-items: stretch;
    margin-top: 32px;
  }
  .before, :where(:scope):is(.before), .after, :where(:scope):is(.after) {
    border-radius: var(--radius);
    padding: 28px;
  }
  .before, :where(:scope):is(.before) {
    background: var(--ice-2);
  }
  .after, :where(:scope):is(.after) {
    background:
      radial-gradient(circle at 100% 0%, rgb(45 226 170 / 0.22), transparent 50%),
      var(--ink);
    color: #fff;
  }
  .ba-label, :where(:scope):is(.ba-label) {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    margin-bottom: 12px;
    background: #fff;
    color: var(--ink-2);
  }
  .after .ba-label, :where(:scope):is(.after) .ba-label {
    background: var(--mint);
    color: var(--ink);
  }
  .before p, :where(:scope):is(.before) p {
    margin: 0;
    color: var(--ink-2);
  }
  .ba-outcome, :where(:scope):is(.ba-outcome) {
    font-size: clamp(1.3rem, 2.4vw, 1.7rem);
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 12px;
  }
  .ba-link, :where(:scope):is(.ba-link) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--mint);
    text-decoration: none;
  }
  .ba-arrow, :where(:scope):is(.ba-arrow) {
    align-self: center;
    font-size: 1.6rem;
    color: var(--mint-600);
  }
  @media (max-width: 760px) {
    .ba, :where(:scope):is(.ba) {
      grid-template-columns: 1fr;
    }
    .ba-arrow, :where(:scope):is(.ba-arrow) {
      justify-self: center;
      transform: rotate(90deg);
    }
  }
  .challenge, :where(:scope):is(.challenge) {
    background: var(--ink);
    color: var(--on-dark);
    border-radius: var(--radius);
    padding: 32px;
    position: relative;
    overflow: hidden;
  }
  .challenge::after, :where(:scope):is(.challenge)::after {
    content: '';
    position: absolute;
    left: 32px;
    bottom: 0;
    width: 60px;
    height: 6px;
    background: var(--mint);
  }
  .challenge h3, :where(:scope):is(.challenge) h3 {
    color: #fff;
  }
  .did, :where(:scope):is(.did) {
    background: var(--snow);
  }
  .did-grid, :where(:scope):is(.did-grid) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 32px;
  }
  .did-item, :where(:scope):is(.did-item) {
    background: #fff;
    border-radius: var(--radius);
    padding: 28px;
    border: 1px solid var(--line);
  }
  .num, :where(:scope):is(.num) {
    font: 700 0.85rem var(--mono);
    color: var(--blue);
    display: inline-block;
    padding: 4px 10px;
    border-radius: 8px;
    background: var(--mint-50);
    margin-bottom: 16px;
  }
  .did-item p, :where(:scope):is(.did-item) p {
    color: var(--ink-2);
    font-size: 1rem;
    margin: 0;
  }
  .g-grid, :where(:scope):is(.g-grid) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .g-grid img, :where(:scope):is(.g-grid) img {
    width: 100%;
    aspect-ratio: 16 / 10; /* photos come in different shapes: line them up */
    object-fit: cover;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    background: var(--snow);
  }
  figure, :where(:scope):is(figure) {
    margin: 0 0 32px;
  }
  blockquote, :where(:scope):is(blockquote) {
    margin: 0 0 24px;
    font-size: clamp(1.3rem, 2.6vw, 2rem);
    font-weight: 300;
    line-height: 1.4;
    max-width: 40em;
  }
  figcaption, :where(:scope):is(figcaption) {
    display: flex;
    gap: 16px;
    align-items: center;
    color: var(--ink-3);
  }
  figcaption strong, :where(:scope):is(figcaption) strong {
    color: var(--ink);
  }
  /* at a glance */
  .glance, :where(:scope):is(.glance) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0;
    margin: -48px 24px 0;
    position: relative;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--line);
    overflow: hidden;
  }
  .glance > div, :where(:scope):is(.glance) > div {
    padding: 20px 24px;
    border-right: 1px solid var(--line);
  }
  .glance > div:last-child, :where(:scope):is(.glance) > div:last-child {
    border-right: 0;
  }
  .glance dt, :where(:scope):is(.glance) dt {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 600 0.85rem var(--font);
    color: var(--blue);
    margin-bottom: 6px;
  }
  .glance dd, :where(:scope):is(.glance) dd {
    margin: 0;
    font-weight: 600;
    line-height: 1.35;
  }
  .glance .visit, :where(:scope):is(.glance) .visit {
    display: flex;
    align-items: center;
    background: var(--mint-50);
  }
  .glance .visit a, :where(:scope):is(.glance) .visit a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--blue);
    text-decoration: none;
  }
  .glance .visit a:hover, :where(:scope):is(.glance) .visit a:hover {
    text-decoration: underline;
  }

  /* results */
  .results, :where(:scope):is(.results) {
    padding: 56px 0 0;
  }
  .res-grid, :where(:scope):is(.res-grid) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .res, :where(:scope):is(.res) {
    background: var(--blue);
    color: #fff;
    border-radius: var(--radius);
    padding: 28px;
    position: relative;
    overflow: hidden;
  }
  .res::after, :where(:scope):is(.res)::after {
    content: '';
    position: absolute;
    left: 28px;
    bottom: 0;
    width: 48px;
    height: 6px;
    background: var(--mint);
  }
  .res strong, :where(:scope):is(.res) strong {
    display: block;
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    line-height: 1;
    margin-bottom: 8px;
  }
  .res span, :where(:scope):is(.res) span {
    color: var(--blue-100);
  }

  /* how we did it */
  .how-grid, :where(:scope):is(.how-grid) {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: clamp(32px, 6vw, 80px);
    align-items: start;
  }
  .steps, :where(:scope):is(.steps) {
    list-style: none;
    margin: 0;
    padding: 0 0 0 28px;
    border-left: 2px dashed var(--blue-100);
    display: grid;
    gap: 28px;
  }
  .steps li, :where(:scope):is(.steps) li {
    position: relative;
  }
  .steps .dot, :where(:scope):is(.steps) .dot {
    position: absolute;
    left: -47px;
    top: 0;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--blue);
    color: var(--mint);
    border: 4px solid #fff;
  }
  .steps h3, :where(:scope):is(.steps) h3 {
    margin-bottom: 4px;
  }
  .steps p, :where(:scope):is(.steps) p {
    color: var(--ink-2);
    margin: 0;
  }

  /* pager */
  .pager, :where(:scope):is(.pager) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding-bottom: 56px;
  }
  .pg, :where(:scope):is(.pg) {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    text-decoration: none;
    font-weight: 600;
    transition: border-color 0.2s, transform 0.2s;
    color: var(--blue);
  }
  .pg span, :where(:scope):is(.pg) span {
    color: var(--ink);
  }
  .pg small, :where(:scope):is(.pg) small {
    display: block;
    font: 600 0.85rem var(--font);
    color: var(--ink-3);
  }
  .pg:hover, :where(:scope):is(.pg:hover) {
    border-color: var(--blue);
  }
  .pg.nx, :where(:scope):is(.pg.nx) {
    justify-content: flex-end;
    text-align: right;
  }
  .avatar, :where(:scope):is(.avatar) {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--blue);
    color: #fff;
    font-weight: 700;
    border: 3px solid var(--mint);
    flex: none;
  }
  figcaption img, :where(:scope):is(figcaption) img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--mint);
  }
  .related, :where(:scope):is(.related) {
    background: var(--snow);
  }
  .r-grid, :where(:scope):is(.r-grid) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 32px;
  }
  @media (max-width: 900px) {
    .how-grid, :where(:scope):is(.how-grid), .g-grid, :where(:scope):is(.g-grid) {
      grid-template-columns: 1fr;
    }
    .did-grid, :where(:scope):is(.did-grid), .r-grid, :where(:scope):is(.r-grid) {
      grid-template-columns: 1fr 1fr;
    }
  }
  @media (max-width: 600px) {
    .res-grid, :where(:scope):is(.res-grid) {
      grid-template-columns: 1fr;
    }
    .glance, :where(:scope):is(.glance) {
      margin: 16px 0 0;
    }
    .glance > div, :where(:scope):is(.glance) > div {
      border-right: 0;
      border-bottom: 1px solid var(--line);
    }
    .pager, :where(:scope):is(.pager) {
      grid-template-columns: 1fr;
    }
    .did-grid, :where(:scope):is(.did-grid), .r-grid, :where(:scope):is(.r-grid) {
      grid-template-columns: 1fr;
    }
  }
}

/* views/About.vue */
@scope (.cmp-about) to (:scope [class*="cmp-"] > *) {
  .story, :where(:scope):is(.story) {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: clamp(32px, 6vw, 80px);
    align-items: center;
  }
  .mark-fig, :where(:scope):is(.mark-fig) {
    margin: 0;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    border-radius: var(--radius-lg);
    padding: 40px;
    text-align: center;
  }
  .mark-fig img, :where(:scope):is(.mark-fig) img {
    margin: 0 auto;
    max-width: 320px;
    width: 100%;
  }
  .mark-fig figcaption, :where(:scope):is(.mark-fig) figcaption {
    margin-top: 12px;
    color: var(--ink-3);
    font-family: var(--mono);
    font-size: 0.9rem;
  }
  .mark-fig b, :where(:scope):is(.mark-fig) b {
    color: var(--blue);
  }
  .values, :where(:scope):is(.values) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 48px;
  }
  @media (max-width: 760px) {
    .values, :where(:scope):is(.values) {
      grid-template-columns: 1fr;
    }
  }
  .value, :where(:scope):is(.value) {
    padding: 24px 28px;
    border-radius: var(--radius);
    background: var(--snow);
    border-left: 6px solid var(--mint);
  }
  .value p, :where(:scope):is(.value) p {
    margin: 0;
    color: var(--ink-2);
  }
  .impact, :where(:scope):is(.impact) {
    background: var(--blue);
    color: #fff;
  }
  .impact h2, :where(:scope):is(.impact) h2 {
    color: #fff;
  }
  .impact .eyebrow, :where(:scope):is(.impact) .eyebrow {
    color: #fff;
  }
  .imp-grid, :where(:scope):is(.imp-grid) {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 40px 0 0;
  }
  .imp, :where(:scope):is(.imp) {
    padding: 28px 24px;
    border-radius: var(--radius);
    background: rgb(255 255 255 / 0.08);
    border: 1px solid rgb(255 255 255 / 0.15);
  }
  .imp strong, :where(:scope):is(.imp) strong {
    display: block;
    font-size: 3rem;
    line-height: 1;
    color: var(--mint);
    margin-bottom: 10px;
  }
  .imp span, :where(:scope):is(.imp) span {
    color: #fff;
  }
  .team, :where(:scope):is(.team) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 24px;
    margin-top: 40px;
  }
  .member, :where(:scope):is(.member) {
    text-align: center;
    padding: 32px 20px 24px;
    border-radius: var(--radius);
    background: var(--snow);
  }
  /* Round, tightly-cropped portraits on one ice tile, so photos with different
     coloured backdrops still read as one team. */
  .ph, :where(:scope):is(.ph) {
    width: 156px;
    height: 156px;
    margin: 0 auto 18px;
    border-radius: 50%;
    overflow: hidden;
    border: 5px solid #fff;
    box-shadow: 0 0 0 2px var(--mint), var(--shadow);
  }
  .ph img, :where(:scope):is(.ph) img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 22%;
    transform: scale(1.18);
    transition: transform 0.5s;
  }
  .member:hover .ph img, :where(:scope):is(.member:hover) .ph img {
    transform: scale(1.26);
  }
  .member h3, :where(:scope):is(.member) h3 {
    margin-bottom: 2px;
  }
  .role, :where(:scope):is(.role) {
    font: 600 0.85rem var(--font);
    color: var(--blue);
  }
  .member p, :where(:scope):is(.member) p {
    margin-top: 6px;
    color: var(--ink-2);
    font-size: 1rem;
  }
  .logos-strip, :where(:scope):is(.logos-strip) {
    padding: 56px 0;
    border-bottom: 1px solid var(--line);
  }
  .careers, :where(:scope):is(.careers) {
    background: var(--snow);
  }
  .c-grid, :where(:scope):is(.c-grid) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 6vw, 80px);
    align-items: center;
  }
  .c-grid img, :where(:scope):is(.c-grid) img {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
  }
  .careers .btn, :where(:scope):is(.careers) .btn {
    margin-top: 16px;
  }
  .crew, :where(:scope):is(.crew) {
    position: relative;
    padding: 24px 0 64px;
  }
  .crew-view, :where(:scope):is(.crew-view) {
    overflow: hidden;
  }
  .crew-track, :where(:scope):is(.crew-track) {
    display: flex;
    gap: 16px;
    width: max-content;
    animation: crew 60s linear infinite;
  }
  .crew-view:hover .crew-track, :where(:scope):is(.crew-view:hover) .crew-track, .crew.paused .crew-track, :where(:scope):is(.crew.paused) .crew-track {
    animation-play-state: paused;
  }
  .crew-track img, :where(:scope):is(.crew-track) img {
    flex: none;
    height: 240px;
    width: auto;
    border-radius: var(--radius);
  }

  .crew-toggle, :where(:scope):is(.crew-toggle) {
    position: absolute;
    right: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
    bottom: 24px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--blue);
    cursor: pointer;
    transition: border-color 0.2s;
  }
  .crew-toggle:hover, :where(:scope):is(.crew-toggle:hover) {
    border-color: var(--blue);
  }
  @media (prefers-reduced-motion: reduce) {
    .crew-view, :where(:scope):is(.crew-view) {
      overflow-x: auto;
    }
    .crew-toggle, :where(:scope):is(.crew-toggle) {
      display: none;
    }
  }
  @media (max-width: 900px) {
    .c-grid, :where(:scope):is(.c-grid), .story, :where(:scope):is(.story) {
      grid-template-columns: 1fr;
    }
    .imp-grid, :where(:scope):is(.imp-grid) {
      grid-template-columns: 1fr 1fr;
    }
    .team, :where(:scope):is(.team) {
      grid-template-columns: 1fr 1fr;
    }
  }
  @media (max-width: 520px) {
    .imp-grid, :where(:scope):is(.imp-grid) {
      grid-template-columns: 1fr;
    }
    .crew-track img, :where(:scope):is(.crew-track) img {
      height: 160px;
    }
  }
}
@keyframes crew {
  to {
    transform: translateX(calc(-50% - 8px)); /* half the strip, plus half a gap, so the loop is seamless */
  }
}

/* components/LatestArticles.vue */
@scope (.cmp-latest-articles) to (:scope [class*="cmp-"] > *) {
  .head, :where(:scope):is(.head) {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 40px;
  }
  .grid, :where(:scope):is(.grid) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  .post, :where(:scope):is(.post) {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: #fff;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.3s, box-shadow 0.3s;
  }
  .post:hover, :where(:scope):is(.post:hover) {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
  }
  .pic, :where(:scope):is(.pic) {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--blue-50);
  }
  .pic img, :where(:scope):is(.pic) img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .body, :where(:scope):is(.body) {
    padding: 20px 24px 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .meta, :where(:scope):is(.meta) {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--ink-3);
  }
  h3, :where(:scope):is(h3) {
    margin: 12px 0 8px;
    font-size: 1.2rem;
    line-height: 1.25;
  }
  p, :where(:scope):is(p) {
    color: var(--ink-2);
    font-size: 0.98rem;
    flex: 1;
  }
  .more, :where(:scope):is(.more) {
    order: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--blue);
  }
  @media (max-width: 960px) {
    .grid, :where(:scope):is(.grid) {
      grid-template-columns: 1fr 1fr;
    }
  }
  @media (max-width: 640px) {
    .grid, :where(:scope):is(.grid) {
      grid-template-columns: 1fr;
    }
  }
  .award, :where(:scope):is(.award) {
    flex: none;
    order: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: -4px 0 12px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--blue);
  }
}

/* views/Pricing.vue */
@scope (.cmp-pricing) to (:scope [class*="cmp-"] > *) {
  .promises, :where(:scope):is(.promises) {
    background: var(--frost-dark);
    color: #fff;
  }
  .promises h2, :where(:scope):is(.promises) h2 {
    color: #fff;
  }
  .promises .eyebrow, :where(:scope):is(.promises) .eyebrow {
    color: var(--mint);
  }
  .p-grid, :where(:scope):is(.p-grid) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 32px;
  }
  .promise, :where(:scope):is(.promise) {
    padding: 28px;
    border-radius: var(--radius);
    background: rgb(255 255 255 / 0.06);
  }
  .promise svg, :where(:scope):is(.promise) svg {
    color: var(--mint);
    margin-bottom: 14px;
  }
  .promise h3, :where(:scope):is(.promise) h3 {
    color: #fff;
  }
  .promise .tbc, :where(:scope):is(.promise) .tbc {
    color: var(--ink);
  }
  .promise p, :where(:scope):is(.promise) p {
    color: var(--on-dark);
    margin: 0;
  }
  .f-grid, :where(:scope):is(.f-grid) {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 32px;
  }
  .factor, :where(:scope):is(.factor) {
    padding: 24px;
    border-radius: var(--radius);
    background: var(--snow);
  }
  .ico, :where(:scope):is(.ico) {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #fff;
    color: var(--blue);
    margin-bottom: 14px;
  }
  .factor h3, :where(:scope):is(.factor) h3 {
    font-size: 1.1rem;
  }
  .factor p, :where(:scope):is(.factor) p {
    color: var(--ink-2);
    font-size: 1rem;
    margin: 0;
  }
  .tip, :where(:scope):is(.tip) {
    margin-top: 28px;
    color: var(--ink-2);
  }
  .tip a, :where(:scope):is(.tip) a {
    color: var(--blue);
    font-weight: 600;
    text-decoration: none;
  }
  .tip a:hover, :where(:scope):is(.tip) a:hover {
    text-decoration: underline;
  }
  .tip .chev, :where(:scope):is(.tip) .chev {
    vertical-align: -0.1em;
    margin-left: 2px;
  }
  @media (max-width: 960px) {
    .p-grid, :where(:scope):is(.p-grid), .f-grid, :where(:scope):is(.f-grid) {
      grid-template-columns: 1fr 1fr;
    }
  }
  @media (max-width: 600px) {
    .p-grid, :where(:scope):is(.p-grid), .f-grid, :where(:scope):is(.f-grid) {
      grid-template-columns: 1fr;
    }
  }
}

/* views/Audience.vue */
@scope (.cmp-audience) to (:scope [class*="cmp-"] > *) {
  .stat, :where(:scope):is(.stat) {
    margin: 0;
    color: var(--ink-2);
    font-size: 0.95rem;
    line-height: 1.35;
  }
  .stat strong, :where(:scope):is(.stat) strong {
    display: block;
    font-size: 2rem;
    color: var(--blue);
    line-height: 1;
  }
  .two, :where(:scope):is(.two) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 6vw, 72px);
    align-items: start;
  }
  .two > :first-child, :where(:scope):is(.two) > :first-child {
    position: sticky;
    top: 96px;
  }
  .list, :where(:scope):is(.list) {
    list-style: none;
    padding: 0;
    margin: 28px 0 0;
    display: grid;
    gap: 14px;
  }
  .list li, :where(:scope):is(.list) li {
    display: flex;
    gap: 16px;
    padding: 20px 22px;
    border-radius: var(--radius);
  }
  .pains li, :where(:scope):is(.pains) li {
    background: var(--ice-2);
  }
  .pains svg, :where(:scope):is(.pains) svg {
    color: var(--blue);
  }
  .help li, :where(:scope):is(.help) li {
    background: #fff;
    border: 1px solid var(--line);
  }
  .help svg, :where(:scope):is(.help) svg {
    color: var(--mint-600);
  }
  .list svg, :where(:scope):is(.list) svg {
    flex: none;
    margin-top: 2px;
  }
  .list h3, :where(:scope):is(.list) h3 {
    font-size: 1.1rem;
    margin-bottom: 4px;
  }
  .list p, :where(:scope):is(.list) p {
    margin: 0;
    color: var(--ink-2);
    font-size: 1rem;
  }
  .proof, :where(:scope):is(.proof) {
    background: var(--snow);
  }
  .grid, :where(:scope):is(.grid) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 32px;
  }
  .q, :where(:scope):is(.q) {
    max-width: 900px;
  }
  blockquote, :where(:scope):is(blockquote) {
    margin: 0 0 24px;
    font-size: clamp(1.25rem, 2.4vw, 1.75rem);
    font-weight: 300;
    line-height: 1.45;
  }
  .who, :where(:scope):is(.who) {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--ink-3);
  }
  .who strong, :where(:scope):is(.who) strong {
    color: var(--ink);
  }
  .who img, :where(:scope):is(.who) img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
  }
  @media (max-width: 900px) {
    .two, :where(:scope):is(.two), .grid, :where(:scope):is(.grid) {
      grid-template-columns: 1fr;
    }
    .two > :first-child, :where(:scope):is(.two) > :first-child {
      position: static;
    }
  }
}

/* views/CheckUp.vue */
@scope (.cmp-check-up) to (:scope [class*="cmp-"] > *) {
  .offer-note, :where(:scope):is(.offer-note) {
    font-weight: 600;
  }
  .grid, :where(:scope):is(.grid) {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(32px, 6vw, 72px);
    align-items: start;
  }
  .gets, :where(:scope):is(.gets) {
    list-style: none;
    padding: 0;
    margin: 28px 0 32px;
    display: grid;
    gap: 18px;
  }
  .gets li, :where(:scope):is(.gets) li {
    display: flex;
    gap: 16px;
  }
  .ico, :where(:scope):is(.ico) {
    flex: none;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--mint-50);
    color: var(--mint-600);
  }
  .gets h3, :where(:scope):is(.gets) h3 {
    font-size: 1.1rem;
    margin-bottom: 4px;
  }
  .gets p, :where(:scope):is(.gets) p {
    margin: 0;
    color: var(--ink-2);
  }
  .form-card, :where(:scope):is(.form-card) {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: clamp(24px, 4vw, 40px);
    border-top: 8px solid var(--mint);
  }
  .form, :where(:scope):is(.form) {
    display: grid;
    gap: 20px;
  }
  .form h2, :where(:scope):is(.form) h2, .done h2, :where(:scope):is(.done) h2 {
    font-size: 1.6rem;
  }
  .send, :where(:scope):is(.send) {
    justify-self: start;
  }
  .small, :where(:scope):is(.small) {
    font-size: 0.85rem;
    color: var(--ink-3);
    margin: 0;
  }
  .done, :where(:scope):is(.done) {
    text-align: center;
  }
  .done img, :where(:scope):is(.done) img {
    height: 150px;
    margin: 0 auto 16px;
  }
  .done p, :where(:scope):is(.done) p {
    color: var(--ink-2);
  }
  @media (max-width: 900px) {
    .grid, :where(:scope):is(.grid) {
      grid-template-columns: 1fr;
    }
  }
}

/* components/FieldHint.vue */
@scope (.cmp-field-hint) to (:scope [class*="cmp-"] > *) {
  .field-hint, :where(:scope):is(.field-hint) {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--error);
  }
  .field-hint:empty, :where(:scope):is(.field-hint:empty) {
    display: none;
  }
  .field-hint svg, :where(:scope):is(.field-hint) svg {
    flex: none;
    margin-top: 1px;
  }
}

/* views/Contact.vue */
@scope (.cmp-contact) to (:scope [class*="cmp-"] > *) {
  .contact, :where(:scope):is(.contact) {
    padding: clamp(40px, 7vw, 96px) 0;
    background: var(--frost);
  }
  .grid, :where(:scope):is(.grid) {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: clamp(32px, 6vw, 80px);
    align-items: start;
  }
  h1, :where(:scope):is(h1) {
    font-size: clamp(2.4rem, 5vw, 3.8rem);
  }
  .ways, :where(:scope):is(.ways) {
    display: grid;
    gap: 12px;
    margin: 32px 0 40px;
  }
  .way, :where(:scope):is(.way) {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 16px 20px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--line);
    text-decoration: none;
    color: var(--ink-3);
    font-size: 0.95rem;
    transition: border-color 0.2s, transform 0.2s;
    overflow-wrap: anywhere;
  }
  .way strong, :where(:scope):is(.way) strong {
    color: var(--ink);
    font-size: 1.05rem;
  }
  .way:hover, :where(:scope):is(.way:hover) {
    border-color: var(--blue);
    transform: translateX(4px);
  }
  .ico, :where(:scope):is(.ico) {
    color: var(--mint-600);
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    background: var(--mint-50);
    border-radius: 12px;
    flex: none;
  }
  .elias, :where(:scope):is(.elias) {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin: 28px 0 8px;
    padding: 24px;
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow);
  }
  .elias img, :where(:scope):is(.elias) img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--mint);
    flex: none;
  }
  .elias p, :where(:scope):is(.elias) p {
    margin: 0;
    color: var(--ink-2);
  }
  .elias .e-name, :where(:scope):is(.elias) .e-name {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 4px;
  }
  button.way, :where(:scope):is(button.way) {
    width: 100%;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  .ico.wa, :where(:scope):is(.ico.wa) {
    background: #e7f9ee;
    color: #1a9e55;
  }
  .calendar, :where(:scope):is(.calendar) {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: #fff;
  }
  .calendar iframe, :where(:scope):is(.calendar) iframe {
    display: block;
    width: 100%;
    height: 640px;
    border: 0;
  }
  .calendar a, :where(:scope):is(.calendar) a {
    display: block;
    padding: 10px 16px;
    font-size: 0.9rem;
    color: var(--blue);
  }
  .offices, :where(:scope):is(.offices) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .offices .city, :where(:scope):is(.offices) .city {
    font-size: 1.15rem;
  }
  .offices small, :where(:scope):is(.offices) small {
    font-weight: 400;
    color: var(--ink-3);
  }
  .offices p, :where(:scope):is(.offices) p {
    font-size: 0.95rem;
    color: var(--ink-2);
  }
  .offices a, :where(:scope):is(.offices) a {
    color: var(--blue);
  }
  .form-wrap, :where(:scope):is(.form-wrap) {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: clamp(24px, 5vw, 48px);
    border-top: 8px solid var(--mint);
  }
  .form h2, :where(:scope):is(.form) h2, .done h2, :where(:scope):is(.done) h2 {
    font-size: 1.8rem;
  }
  .form, :where(:scope):is(.form) {
    display: grid;
    gap: 24px;
  }
  .send, :where(:scope):is(.send) {
    justify-self: start;
    font-size: 1.1rem;
    padding: 1em 1.8em;
  }
  .next .n-grid, :where(:scope):is(.next) .n-grid {
    list-style: none;
    padding: 0;
    margin: 40px 0 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    counter-reset: none;
  }
  .n-grid li, :where(:scope):is(.n-grid) li {
    position: relative;
    padding: 28px 24px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: #fff;
  }
  .n-grid li:not(:last-child)::after, :where(:scope):is(.n-grid) li:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 52px;
    right: -16px;
    width: 12px;
    height: 12px;
    border-top: 3px solid var(--mint);
    border-right: 3px solid var(--mint);
    transform: rotate(45deg);
  }
  .n-ico, :where(:scope):is(.n-ico) {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: var(--blue);
    color: #fff;
    margin-bottom: 16px;
  }
  .n-num, :where(:scope):is(.n-num) {
    display: block;
    font: 600 0.85rem var(--font);
    color: var(--blue);
    margin-bottom: 4px;
  }
  .n-grid p, :where(:scope):is(.n-grid) p {
    color: var(--ink-2);
    font-size: 1rem;
    margin: 0;
  }
  @media (max-width: 960px) {
    .next .n-grid, :where(:scope):is(.next) .n-grid {
      grid-template-columns: 1fr 1fr;
    }
    .n-grid li::after, :where(:scope):is(.n-grid) li::after {
      display: none;
    }
  }
  @media (max-width: 560px) {
    .next .n-grid, :where(:scope):is(.next) .n-grid {
      grid-template-columns: 1fr;
    }
  }
  .carried, :where(:scope):is(.carried) {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -12px 0 0;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--mint-50);
    color: var(--ink);
    font-size: 0.95rem;
  }
  .small, :where(:scope):is(.small) {
    font-size: 0.85rem;
    color: var(--ink-3);
    margin: 0;
  }
  .done, :where(:scope):is(.done) {
    text-align: center;
    padding: 32px 0;
  }
  .done-stork, :where(:scope):is(.done-stork) {
    height: 160px;
    width: auto;
    margin: 0 auto 16px;
  }
  .done p, :where(:scope):is(.done) p {
    color: var(--ink-2);
  }
  .done .btn, :where(:scope):is(.done) .btn {
    margin-top: 16px;
  }
  .swap-enter-active, :where(:scope):is(.swap-enter-active), .swap-leave-active, :where(:scope):is(.swap-leave-active) {
    transition: opacity 0.25s;
  }
  .swap-enter-from, :where(:scope):is(.swap-enter-from), .swap-leave-to, :where(:scope):is(.swap-leave-to) {
    opacity: 0;
  }
  @media (max-width: 900px) {
    .grid, :where(:scope):is(.grid) {
      grid-template-columns: 1fr;
    }
  }
  @media (max-width: 520px) {
    .offices, :where(:scope):is(.offices) {
      grid-template-columns: 1fr;
    }
  }
}

/* components/OfficeClocks.vue */
@scope (.cmp-office-clocks) to (:scope [class*="cmp-"] > *) {
  .clocks, :where(:scope):is(.clocks) {
    min-height: 186px;
    background: var(--ink);
    color: #fff;
    border-radius: var(--radius);
    padding: 20px 22px;
    margin-bottom: 32px;
  }
  .title, :where(:scope):is(.title) {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    margin-bottom: 14px;
  }
  .dot, :where(:scope):is(.dot) {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--on-dark-2);
    flex: none;
  }
  .dot.on, :where(:scope):is(.dot.on) {
    background: var(--mint);
    box-shadow: 0 0 0 0 rgb(45 226 170 / 0.6);
    animation: ping 1.8s infinite;
  }

  .row, :where(:scope):is(.row) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .clock, :where(:scope):is(.clock) {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 14px;
    background: rgb(255 255 255 / 0.06);
  }
  strong, :where(:scope):is(strong) {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 1.1rem;
  }
  .sky, :where(:scope):is(.sky) {
    color: #8fb3ec;
  }
  .awake .sky, :where(:scope):is(.awake) .sky {
    color: var(--mint);
  }
  span, :where(:scope):is(span) {
    display: block;
    font-size: 0.85rem;
    color: var(--on-dark);
    white-space: nowrap;
  }
  .note, :where(:scope):is(.note) {
    margin: 12px 0 0;
    font-size: 0.85rem;
    color: var(--on-dark-2);
  }
  @media (max-width: 420px) {
    .row, :where(:scope):is(.row) {
      grid-template-columns: 1fr;
    }
  }
}
@keyframes ping {
  to {
    box-shadow: 0 0 0 10px rgb(45 226 170 / 0);
  }
}

/* views/Guides.vue */
@scope (.cmp-guides) to (:scope [class*="cmp-"] > *) {
  .grid, :where(:scope):is(.grid) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .guide, :where(:scope):is(.guide) {
    display: grid;
    grid-template-columns: 160px 1fr;
    border-radius: var(--radius-lg);
    background: #fff;
    border: 1px solid var(--line);
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.25s, box-shadow 0.25s;
  }
  .guide:hover, :where(:scope):is(.guide:hover) {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
  }
  .art, :where(:scope):is(.art) {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 20px;
    background: var(--snow);
  }
  .art img, :where(:scope):is(.art) img {
    max-height: 120px;
    width: auto;
  }
  .body, :where(:scope):is(.body) {
    padding: 24px 28px;
  }
  .meta, :where(:scope):is(.meta) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--ink-3);
  }
  h2, :where(:scope):is(h2) {
    font-size: 1.35rem;
    margin: 8px 0;
  }
  p, :where(:scope):is(p) {
    color: var(--ink-2);
  }
  .more, :where(:scope):is(.more) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--blue);
  }
  @media (max-width: 900px) {
    .grid, :where(:scope):is(.grid) {
      grid-template-columns: 1fr;
    }
  }
  @media (max-width: 520px) {
    .guide, :where(:scope):is(.guide) {
      grid-template-columns: 1fr;
    }
    .art img, :where(:scope):is(.art) img {
      max-height: 100px;
    }
  }
}

/* components/JargonBuster.vue */
@scope (.cmp-jargon-buster) to (:scope [class*="cmp-"] > *) {
  .grid, :where(:scope):is(.grid) {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: clamp(32px, 6vw, 80px);
    align-items: start;
  }
  .intro img, :where(:scope):is(.intro) img {
    border-radius: var(--radius);
    margin-top: 32px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
  }
  .item, :where(:scope):is(.item) {
    border-bottom: 1px solid var(--line);
  }
  button, :where(:scope):is(button) {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 0;
    background: none;
    border: 0;
    text-align: left;
    font: 600 1.15rem/1.3 var(--font);
    color: var(--ink);
    cursor: pointer;
  }
  .on .term, :where(:scope):is(.on) .term {
    color: var(--blue);
  }
  .plus, :where(:scope):is(.plus) {
    position: relative;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--blue-50);
    transition: background 0.2s, transform 0.3s;
  }
  .plus::before, :where(:scope):is(.plus)::before, .plus::after, :where(:scope):is(.plus)::after {
    content: '';
    position: absolute;
    left: 11px;
    right: 11px;
    top: 17px;
    height: 2px;
    background: var(--blue);
  }
  .plus::after, :where(:scope):is(.plus)::after {
    transform: rotate(90deg);
    transition: transform 0.3s;
  }
  .on .plus, :where(:scope):is(.on) .plus {
    background: var(--mint);
    transform: rotate(180deg);
  }
  .on .plus::after, :where(:scope):is(.on) .plus::after {
    transform: rotate(0);
  }
  .ans, :where(:scope):is(.ans) {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
  }
  .on .ans, :where(:scope):is(.on) .ans {
    grid-template-rows: 1fr;
  }
  .ans > div, :where(:scope):is(.ans) > div {
    overflow: hidden;
  }
  .ans p, :where(:scope):is(.ans) p {
    color: var(--ink-2);
    padding-bottom: 22px;
    margin: 0;
  }
  @media (max-width: 860px) {
    .grid, :where(:scope):is(.grid) {
      grid-template-columns: 1fr;
    }
    .intro img, :where(:scope):is(.intro) img {
      display: none;
    }
  }
}

/* views/Guide.vue */
@scope (.cmp-guide) to (:scope [class*="cmp-"] > *) {
  .narrow, :where(:scope):is(.narrow) {
    max-width: 760px;
  }
  .guide, :where(:scope):is(.guide) {
    padding: 48px 0 32px;
  }
  .back, :where(:scope):is(.back) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--blue);
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 24px;
  }
  .art, :where(:scope):is(.art) {
    height: 120px;
    width: auto;
    margin-bottom: 20px;
  }
  h1, :where(:scope):is(h1) {
    font-size: clamp(2rem, 4.4vw, 3rem);
  }
  .meta, :where(:scope):is(.meta) {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-3);
    font-size: 0.95rem;
  }
  .content, :where(:scope):is(.content) {
    margin-top: 24px;
  }
  .content section, :where(:scope):is(.content) section {
    padding-top: 24px;
  }
  .content h2, :where(:scope):is(.content) h2 {
    font-size: 1.5rem;
  }
  .content p, :where(:scope):is(.content) p {
    font-size: 1.12rem;
    line-height: 1.75;
    color: var(--ink-2);
  }
  .content ul, :where(:scope):is(.content) ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1em;
    display: grid;
    gap: 10px;
  }
  .content li, :where(:scope):is(.content) li {
    display: flex;
    gap: 12px;
    align-items: baseline;
    font-size: 1.08rem;
    color: var(--ink-2);
  }
  .content li .chev, :where(:scope):is(.content) li .chev {
    color: var(--mint-600);
    flex: none;
  }
  .next, :where(:scope):is(.next) {
    display: block;
    margin-top: 48px;
    padding: 24px 28px;
    border-radius: var(--radius);
    background: var(--snow);
    text-decoration: none;
    font-weight: 600;
    color: var(--blue);
  }
  .next small, :where(:scope):is(.next) small {
    display: block;
    color: var(--ink-3);
    font-weight: 500;
    margin-bottom: 4px;
  }
}

/* views/Plan.vue */
@scope (.cmp-plan) to (:scope [class*="cmp-"] > *) {
  .plan, :where(:scope):is(.plan) {
    padding: clamp(40px, 7vw, 88px) 0 clamp(64px, 10vw, 120px);
    background: var(--frost);
  }
  .intro, :where(:scope):is(.intro) {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 32px 56px;
    align-items: center;
    margin-bottom: 40px;
  }
  .intro.started, :where(:scope):is(.intro.started) {
    grid-template-columns: 1fr;
    max-width: 720px;
  }
  .preview, :where(:scope):is(.preview) {
    position: relative;
    padding: 28px 28px 24px;
    border-radius: var(--radius-lg);
    background: #fff;
    border: 1px solid var(--blue-100);
    box-shadow: var(--shadow);
  }
  .p-art, :where(:scope):is(.p-art) {
    position: absolute;
    right: 18px;
    top: -46px;
    width: 120px;
  }
  .p-title, :where(:scope):is(.p-title) {
    font-weight: 700;
    margin-bottom: 12px;
  }
  .preview ul, :where(:scope):is(.preview) ul {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
    display: grid;
    gap: 10px;
  }
  .preview li, :where(:scope):is(.preview) li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink-2);
  }
  .preview li svg, :where(:scope):is(.preview) li svg {
    color: var(--mint-600);
    flex: none;
  }
  .p-time, :where(:scope):is(.p-time) {
    margin: 0;
    font-size: 0.9rem;
    color: var(--ink-3);
  }
  @media (max-width: 860px) {
    .intro, :where(:scope):is(.intro) {
      grid-template-columns: 1fr;
    }
    .p-art, :where(:scope):is(.p-art) {
      width: 96px;
      top: -36px;
    }
  }
  h1, :where(:scope):is(h1) {
    font-size: clamp(2.4rem, 5.6vw, 4.2rem);
  }
  .board, :where(:scope):is(.board) {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: clamp(24px, 5vw, 56px);
  }
  .progress, :where(:scope):is(.progress) {
    display: flex;
    gap: 8px;
    margin-bottom: 32px;
  }
  .progress span, :where(:scope):is(.progress) span {
    flex: 1;
    height: 6px;
    border-radius: 6px;
    background: var(--line);
    transition: background 0.3s;
  }
  .progress .on, :where(:scope):is(.progress) .on {
    background: var(--blue);
  }
  .progress .now, :where(:scope):is(.progress) .now {
    background: var(--mint);
  }
  .count, :where(:scope):is(.count) {
    font: 600 0.85rem var(--font);
    color: var(--blue);
    margin-bottom: 8px;
  }
  .hint, :where(:scope):is(.hint) {
    color: var(--ink-3);
  }
  .options, :where(:scope):is(.options) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 24px 0;
  }
  .options.multi, :where(:scope):is(.options.multi) {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
  .options button, :where(:scope):is(.options) button {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    padding: 18px 20px;
    min-height: 72px;
    border-radius: 16px;
    border: 2px solid var(--line);
    background: #fff;
    font: 500 1.05rem/1.3 var(--font);
    color: var(--ink);
    cursor: pointer;
    transition: all 0.15s;
  }
  .options button:hover, :where(:scope):is(.options) button:hover {
    border-color: var(--blue-100);
    transform: translateY(-2px);
  }
  .options button.on, :where(:scope):is(.options) button.on {
    border-color: var(--blue);
    background: var(--blue-50);
    box-shadow: inset 0 0 0 1px var(--blue);
  }
  .em, :where(:scope):is(.em) {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--blue-50);
    color: var(--blue);
    transition: background 0.15s, color 0.15s;
  }
  .options button.on .em, :where(:scope):is(.options) button.on .em {
    background: var(--blue);
    color: #fff;
  }
  .lbl, :where(:scope):is(.lbl) {
    flex: 1;
  }
  .tick, :where(:scope):is(.tick) {
    flex: none;
    color: var(--mint-600);
  }
  .nav, :where(:scope):is(.nav) {
    display: flex;
    gap: 12px;
  }
  .btn:disabled, :where(:scope):is(.btn:disabled) {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }

  /* focus lands here between questions; it isn't something to click, so no ring */
  .question h2:focus, :where(:scope):is(.question) h2:focus, .pass:focus, :where(:scope):is(.pass:focus) {
    outline: none;
  }
  /* boarding pass */
  .pass, :where(:scope):is(.pass) {
    display: grid;
    grid-template-columns: 1fr 160px;
    border-radius: 24px;
    overflow: hidden;
    background: var(--ink);
    color: #fff;
    position: relative;
  }
  .main, :where(:scope):is(.main) {
    padding: clamp(20px, 4vw, 40px);
    display: grid;
    gap: 24px;
  }
  header, :where(:scope):is(header) {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    font: 700 0.8rem var(--code);
    letter-spacing: 0.08em;
  }
  .air, :where(:scope):is(.air) {
    color: var(--mint);
  }
  .cls, :where(:scope):is(.cls) {
    color: var(--on-dark-2);
    text-transform: uppercase;
  }
  small, :where(:scope):is(small) {
    display: block;
    font: 500 0.7rem var(--code);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--on-dark-2);
    margin-bottom: 4px;
  }
  .route, :where(:scope):is(.route) {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
  }
  .route strong, :where(:scope):is(.route) strong {
    display: block;
    font: 700 clamp(2.4rem, 6vw, 3.6rem) / 1 var(--code);
  }
  .route span, :where(:scope):is(.route) span {
    color: var(--on-dark);
    font-size: 0.95rem;
  }
  .to, :where(:scope):is(.to) {
    text-align: right;
  }
  .to strong, :where(:scope):is(.to) strong {
    color: var(--mint);
  }
  .plane, :where(:scope):is(.plane) {
    width: 36px;
    fill: var(--mint);
    animation: hop 1.6s ease-in-out infinite;
  }

  .facts, :where(:scope):is(.facts) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 20px 0;
    border-top: 1px dashed rgb(255 255 255 / 0.2);
    border-bottom: 1px dashed rgb(255 255 255 / 0.2);
    font-weight: 600;
  }
  .pack ul, :where(:scope):is(.pack) ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .pack li, :where(:scope):is(.pack) li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgb(255 255 255 / 0.08);
    font-size: 0.95rem;
  }
  .pack li .chev, :where(:scope):is(.pack) li .chev {
    color: var(--mint);
  }
  .first p, :where(:scope):is(.first) p {
    margin: 0;
    font-size: 1.1rem;
  }
  .stub, :where(:scope):is(.stub) {
    position: relative;
    background: var(--blue);
    padding: 32px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 3px dashed var(--ink);
  }
  .stub strong, :where(:scope):is(.stub) strong {
    font: 700 1.6rem var(--code);
    margin-bottom: 16px;
  }
  .stub small, :where(:scope):is(.stub) small {
    color: var(--blue-100);
  }
  .barcode, :where(:scope):is(.barcode) {
    height: 56px;
    margin-bottom: 24px;
    background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 4px, #fff 4px 5px, transparent 5px 9px, #fff 9px 12px, transparent 12px 14px);
    opacity: 0.9;
  }
  .pass::before, :where(:scope):is(.pass)::before, .pass::after, :where(:scope):is(.pass)::after {
    content: '';
    position: absolute;
    right: 148px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
  }
  .pass::before, :where(:scope):is(.pass)::before {
    top: -12px;
  }
  .pass::after, :where(:scope):is(.pass)::after {
    bottom: -12px;
  }
  .next, :where(:scope):is(.next) {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: start;
    margin-top: 40px;
  }
  .next p, :where(:scope):is(.next) p {
    color: var(--ink-2);
  }
  .actions, :where(:scope):is(.actions) {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
  }
  .similar small, :where(:scope):is(.similar) small {
    color: var(--blue);
    margin-bottom: 12px;
  }
  .swap-enter-active, :where(:scope):is(.swap-enter-active), .swap-leave-active, :where(:scope):is(.swap-leave-active) {
    transition: opacity 0.25s, transform 0.25s;
  }
  .swap-enter-from, :where(:scope):is(.swap-enter-from) {
    opacity: 0;
    transform: translateX(20px);
  }
  .swap-leave-to, :where(:scope):is(.swap-leave-to) {
    opacity: 0;
    transform: translateX(-20px);
  }
  @media (max-width: 860px) {
    .options, :where(:scope):is(.options) {
      grid-template-columns: 1fr;
    }
    .next, :where(:scope):is(.next) {
      grid-template-columns: 1fr;
    }
  }
  @media (max-width: 600px) {
    .pass, :where(:scope):is(.pass) {
      grid-template-columns: 1fr;
    }
    .stub, :where(:scope):is(.stub) {
      border-left: 0;
      border-top: 3px dashed var(--ink);
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      gap: 4px 16px;
      padding: 20px;
    }
    .stub strong, :where(:scope):is(.stub) strong {
      margin: 0 12px 0 0;
    }
    .barcode, :where(:scope):is(.barcode) {
      width: 100%;
      height: 40px;
      margin-bottom: 8px;
    }
    .pass::before, :where(:scope):is(.pass)::before, .pass::after, :where(:scope):is(.pass)::after {
      display: none;
    }
    .facts, :where(:scope):is(.facts) {
      grid-template-columns: 1fr 1fr;
    }
    .route strong, :where(:scope):is(.route) strong {
      font-size: 2rem;
    }
    /* side by side, the descriptions get squeezed into one-word lines: stack From → To instead */
    .route, :where(:scope):is(.route) {
      grid-template-columns: 1fr;
      gap: 8px;
    }
    .to, :where(:scope):is(.to) {
      text-align: left;
    }
    .plane, :where(:scope):is(.plane) {
      width: 22px;
      margin-left: 4px;
      rotate: 90deg;
    }
  }
}
@keyframes hop {
  50% {
    transform: translateX(10px);
  }
}

/* views/Privacy.vue */
@scope (.cmp-privacy) to (:scope [class*="cmp-"] > *) {
  .narrow, :where(:scope):is(.narrow) {
    max-width: 760px;
  }
  .placeholder, :where(:scope):is(.placeholder) {
    padding: 32px;
    border-radius: var(--radius);
    background: var(--snow);
    border: 1px dashed var(--blue-100);
  }
  .placeholder p:last-child, :where(:scope):is(.placeholder) p:last-child {
    margin: 0;
    color: var(--ink-2);
  }
  a, :where(:scope):is(a) {
    color: var(--blue);
    font-weight: 600;
  }
}

/* views/WhatsNew.vue */
@scope (.cmp-whats-new) to (:scope [class*="cmp-"] > *) {
  .two, :where(:scope):is(.two) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 6vw, 72px);
    align-items: start;
  }
  h2, :where(:scope):is(h2) {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.6rem;
  }
  h2 svg, :where(:scope):is(h2) svg {
    color: var(--blue);
    flex: none;
  }
  .hint, :where(:scope):is(.hint) {
    color: var(--ink-3);
  }
  .open, :where(:scope):is(.open) {
    padding: 0;
    margin: 20px 0 0;
    list-style: none;
    counter-reset: q;
    display: grid;
    gap: 12px;
  }
  .open li, :where(:scope):is(.open) li {
    counter-increment: q;
    position: relative;
    padding: 16px 20px 16px 56px;
    border-radius: 16px;
    background: #fffbea;
    border: 1px solid #f6e3a1;
  }
  .open li::before, :where(:scope):is(.open) li::before {
    content: counter(q);
    position: absolute;
    left: 16px;
    top: 16px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #f2c94c;
    color: #3d2e00;
    font-weight: 700;
    font-size: 0.85rem;
  }
  .open p, :where(:scope):is(.open) p {
    margin: 0;
  }
  .where, :where(:scope):is(.where) {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 6px !important;
    font-size: 0.9rem;
  }
  .where a, :where(:scope):is(.where) a {
    color: var(--blue);
    font-weight: 600;
  }
  .later-h, :where(:scope):is(.later-h) {
    margin-top: 40px;
  }
  .later, :where(:scope):is(.later), .group ul, :where(:scope):is(.group) ul {
    padding-left: 1.2em;
    color: var(--ink-2);
  }
  .later li, :where(:scope):is(.later) li, .group li, :where(:scope):is(.group) li {
    margin-bottom: 8px;
  }
  .group, :where(:scope):is(.group) {
    margin-top: 20px;
    padding: 20px 24px;
    border-radius: var(--radius);
    background: var(--snow);
  }
  .group h3, :where(:scope):is(.group) h3 {
    font-size: 1.1rem;
    color: var(--blue);
  }
  .group ul, :where(:scope):is(.group) ul {
    margin: 0;
  }
  @media (max-width: 900px) {
    .two, :where(:scope):is(.two) {
      grid-template-columns: 1fr;
    }
  }
}

/* views/NotFound.vue */
@scope (.cmp-not-found) to (:scope [class*="cmp-"] > *) {
  .lost, :where(:scope):is(.lost) {
    min-height: 70vh;
    display: grid;
    align-items: center;
    padding: 80px 0;
    background: var(--snow);
  }
  .lost-stork, :where(:scope):is(.lost-stork) {
    width: 180px;
    margin-bottom: 16px;
    animation: drift 6s ease-in-out infinite;
  }

  .code, :where(:scope):is(.code) {
    font: 700 clamp(4rem, 14vw, 9rem) / 1 var(--code);
    color: var(--blue);
    margin-bottom: 24px;
  }
  .actions, :where(:scope):is(.actions) {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 32px;
  }
}
@keyframes drift {
  50% {
    transform: translate(16px, -10px) rotate(-4deg);
  }
}
/* components/Logo.vue */
@scope (.cmp-logo) to (:scope [class*="cmp-"] > *) {
  .logo, :where(:scope):is(.logo) {
    height: 22px;
    width: auto;
    display: block;
    overflow: visible;
  }
  .chev, :where(:scope):is(.chev), .word, :where(:scope):is(.word) {
    fill: var(--blue);
  }
  .light .chev, :where(:scope):is(.light) .chev, .light .word, :where(:scope):is(.light) .word {
    fill: #fff;
  }
  .under, :where(:scope):is(.under) {
    fill: var(--mint);
    animation: blink 1.05s steps(1) infinite;
  }
}

/* ---------- Kiln port: additions to the components above ---------- */
@scope (.cmp-logo-marquee) to (:scope [class*="cmp-"] > *) {
  li img, :where(:scope):is(li) img { height: var(--h, 34px); }
}
@media (prefers-reduced-motion: reduce) {
  .cmp-logo-marquee .viewport { overflow-x: auto; }
  .cmp-logo-marquee .toggle { display: none; }
}
@media (max-width: 860px) {
  .cmp-mobile-cta { transform: translateY(120%); opacity: 0; transition: transform 0.3s, opacity 0.3s; pointer-events: none; }
  .cmp-mobile-cta.is-shown { transform: none; opacity: 1; pointer-events: auto; }
}
@scope (.cmp-client-logos) to (:scope [class*="cmp-"] > *) {
  li img, :where(:scope):is(li) img { height: var(--h, 30px); }
}
/* filtered-out cards (Our work) */
.cmp-work [data-tags][hidden] { display: none; }
@scope (.cmp-latest-articles) to (:scope [class*="cmp-"] > *) {
  .pic.pos-right img, :where(:scope):is(.pic.pos-right) img { object-position: right; }
  .pic.pos-left img, :where(:scope):is(.pic.pos-left) img { object-position: left; }
}
@scope (.cmp-about) to (:scope [class*="cmp-"] > *) {
  .story-text p, :where(:scope):is(.story-text) p { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--ink-2); max-width: 40em; }
}
/* the jargon list uses <details>, so it opens without JavaScript */
@scope (.cmp-jargon-buster) to (:scope [class*="cmp-"] > *) {
  summary, :where(:scope):is(summary) { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; list-style: none; font: 600 1.15rem/1.3 var(--font); color: var(--ink); cursor: pointer; }
  summary::-webkit-details-marker, :where(:scope):is(summary)::-webkit-details-marker { display: none; }
  details[open] .term, :where(:scope):is(details[open]) .term { color: var(--blue); }
  details[open] .plus, :where(:scope):is(details[open]) .plus { background: var(--mint); transform: rotate(180deg); }
  details[open] .plus::after, :where(:scope):is(details[open]) .plus::after { transform: rotate(0); }
  details .ans, :where(:scope):is(details) .ans { grid-template-rows: 1fr; }
}
/* What's new: the rich text takes the look of the Next site's lists */
@scope (.cmp-whats-new) to (:scope [class*="cmp-"] > *) {
  .open-list ol, :where(:scope):is(.open-list) ol { padding: 0; margin: 20px 0 0; list-style: none; counter-reset: q; display: grid; gap: 12px; }
  .open-list ol > li, :where(:scope):is(.open-list) ol > li { counter-increment: q; position: relative; padding: 16px 20px 16px 56px; border-radius: 16px; background: #fffbea; border: 1px solid #f6e3a1; }
  .open-list ol > li::before, :where(:scope):is(.open-list) ol > li::before { content: counter(q); position: absolute; left: 16px; top: 16px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #f2c94c; color: #3d2e00; font-weight: 700; font-size: 0.85rem; }
  .open-list li p, :where(:scope):is(.open-list) li p { margin: 0; }
  .open-list li p + p, :where(:scope):is(.open-list) li p + p { margin-top: 6px; font-size: 0.9rem; display: flex; flex-wrap: wrap; gap: 6px 14px; }
  .open-list li p + p a, :where(:scope):is(.open-list) li p + p a { color: var(--blue); font-weight: 600; }
  .later ul, :where(:scope):is(.later) ul { padding-left: 1.2em; color: var(--ink-2); }
  .later li, :where(:scope):is(.later) li, .changed li, :where(:scope):is(.changed) li { margin-bottom: 8px; }
  .changed h3, :where(:scope):is(.changed) h3 { font-size: 1.1rem; color: var(--blue); margin: 20px 0 8px; padding: 20px 24px 0; }
  .changed ul, :where(:scope):is(.changed) ul { margin: 0; padding: 0 24px 20px calc(24px + 1.2em); color: var(--ink-2); background: var(--snow); border-radius: 0 0 var(--radius) var(--radius); }
  .changed h3, :where(:scope):is(.changed) h3 { background: var(--snow); border-radius: var(--radius) var(--radius) 0 0; margin-bottom: 0; padding-bottom: 8px; }
}
@scope (.cmp-privacy) to (:scope [class*="cmp-"] > *) {
  .prose a, :where(:scope):is(.prose) a, .placeholder a, :where(:scope):is(.placeholder) a { color: var(--blue); font-weight: 600; }
}

/* ---------- Kiln port: rich text in guides, the answer bubble's entrance ---------- */
@scope (.cmp-guide) to (.no-boundary) {
  .guide-body h2, :where(:scope):is(.guide-body) h2 { font-size: 1.5rem; padding-top: 24px; }
  .guide-body p, :where(:scope):is(.guide-body) p { font-size: 1.12rem; line-height: 1.75; color: var(--ink-2); }
  .guide-body ul, :where(:scope):is(.guide-body) ul { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 10px; }
  .guide-body li, :where(:scope):is(.guide-body) li { position: relative; padding-left: 24px; font-size: 1.08rem; color: var(--ink-2); }
  .guide-body li p, :where(:scope):is(.guide-body) li p { margin: 0; font-size: inherit; line-height: 1.6; }
  .guide-body li::before, :where(:scope):is(.guide-body) li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 0.62em; height: 0.75em; background: var(--mint-600); clip-path: polygon(13% 0, 100% 53%, 14% 100%, 0 84%, 59% 51%, 0 16%); }
}
.cmp-stork-reply.pop { animation: pop-in 0.3s cubic-bezier(0.2, 1.3, 0.4, 1); }
@keyframes pop-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } }

/* ---------- Kiln's form markup in the Next site's form style (Contact, check-up) ---------- */
.form-box > h2, .form-card > h2 { font-size: 1.8rem; margin-bottom: 24px; }
.form-card > h2 { font-size: 1.6rem; }
.kiln-form__form { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; align-items: start; }
.kiln-form__form > * { grid-column: 1 / -1; }
.kiln-form__form > [data-kiln-field="name"], .kiln-form__form > [data-kiln-field="email"] { grid-column: auto; }
.kiln-form__field { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.kiln-form__label { font-weight: 600; font-size: 1rem; padding: 0; }
legend.kiln-form__label { margin-bottom: 10px; }
.kiln-form__label small { font-weight: 400; color: var(--ink-3); }
.kiln-form__required { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kiln-form__help { margin: 0; font-size: 0.92rem; color: var(--ink-3); }
.kiln-form__input { width: 100%; font: 400 1.05rem var(--font); padding: 14px 16px; border-radius: 12px; border: 2px solid var(--line); background: var(--snow); color: var(--ink); transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; }
textarea.kiln-form__input { resize: vertical; min-height: 9em; }
.kiln-form__input:focus { outline: none; border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px rgb(26 90 193 / 0.18); }
.kiln-form__input[aria-invalid="true"] { border-color: var(--error); }
.kiln-form__error { margin: 0; display: flex; gap: 6px; font-size: 0.92rem; font-weight: 500; color: var(--error); }
/* choices as chips: the box itself stays in the page for keyboards and screen readers */
.kiln-form__options { display: flex; flex-wrap: wrap; gap: 8px; }
.kiln-form__option { position: relative; }
.kiln-form__check { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.kiln-form__option label { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 10px 16px; border-radius: 999px; border: 2px solid var(--line); background: #fff; font: 500 0.95rem var(--font); color: var(--ink-2); cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; }
.kiln-form__option label:hover { border-color: var(--blue-100); }
.kiln-form__check:checked + label { border-color: var(--blue); background: var(--blue-50); color: var(--blue); }
.kiln-form__check:checked + label::before { content: ''; width: 12px; height: 7px; border: solid var(--mint-600); border-width: 0 0 3px 3px; transform: rotate(-45deg) translate(1px, -2px); }
.kiln-form__check:focus-visible + label { outline: 3px solid var(--mint); outline-offset: 3px; }
.kiln-form__actions { margin: 0; }
.kiln-form__submit.button { --bg: var(--blue); display: inline-flex; align-items: center; gap: 0.6em; min-height: 48px; padding: 1em 1.8em; border-radius: 999px; border: 2px solid var(--blue); background: var(--blue); color: #fff; font: 600 1.1rem/1 var(--font); cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }
.kiln-form__submit.button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px var(--blue); }
.kiln-form__status:empty { display: none; }
.kiln-form__sent { text-align: center; padding: 32px 0; font-size: 1.15rem; }
.form-box > p:last-child, .form-card > p:last-child { font-size: 0.85rem; color: var(--ink-3); margin: 16px 0 0; }
.form-box a, .form-card a { color: var(--blue); }
.tbc-tag { display: inline-block; margin-left: 4px; padding: 1px 5px; border-radius: 4px; background: #f2c94c; color: #3d2e00; font-size: 0.62em; font-weight: 700; letter-spacing: 0.04em; vertical-align: 0.2em; }
@media (max-width: 520px) {
  .kiln-form__form > [data-kiln-field="name"], .kiln-form__form > [data-kiln-field="email"] { grid-column: 1 / -1; }
}
@scope (.cmp-whats-new) to (.no-boundary) {
  .changed li p, :where(:scope):is(.changed) li p, .later li p, :where(:scope):is(.later) li p { margin: 0; }
}
/* the hero's "You'll talk to" line (a nested component's root loses to its own margin: 0 otherwise) */
.hero-copy > .talk-row { margin-top: 20px; }
/* the logo's chevron on Kiln's submit button, as on every other button */
.kiln-form__submit.button::after { content: ''; width: 0.62em; height: 0.75em; background: currentColor; clip-path: polygon(13% 0, 100% 53%, 14% 100%, 0 84%, 59% 51%, 0 16%); transition: transform 0.2s; }
.kiln-form__submit.button:hover::after { transform: translateX(4px); }
.form-card .kiln-form__submit.button { font-size: 1rem; padding: 0.85em 1.4em; }