/* Design System V2 */
:root {
  --brand-input: #e2af36;
  --brand-contrast-input: #0b0b0b;
  --font-heading-input: 'Manrope', system-ui, sans-serif;
  --font-body-input: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Design System V2: primitives.css */
@layer reset, primitives, semantic, base, components, utilities;

@layer primitives {
  :root {
    --step--2: clamp(0.69rem, 0.66rem + 0.14vw, 0.78rem);
    --step--1: clamp(0.83rem, 0.79rem + 0.2vw, 0.94rem);
    --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.13rem);
    --step-1: clamp(1.2rem, 1.13rem + 0.36vw, 1.35rem);
    --step-2: clamp(1.44rem, 1.34rem + 0.51vw, 1.63rem);
    --step-3: clamp(1.73rem, 1.59rem + 0.71vw, 1.95rem);
    --step-4: clamp(2.07rem, 1.88rem + 0.98vw, 2.34rem);
    --step-5: clamp(2.49rem, 2.21rem + 1.34vw, 2.8rem);
    --step-6: clamp(2.99rem, 2.61rem + 1.82vw, 3.37rem);
    --step-7: clamp(3.58rem, 3.05rem + 2.46vw, 4.04rem);

    --space-3xs: clamp(0.25rem, 0.24rem + 0.07vw, 0.31rem);
    --space-2xs: clamp(0.5rem, 0.48rem + 0.12vw, 0.63rem);
    --space-xs: clamp(0.75rem, 0.71rem + 0.2vw, 0.94rem);
    --space-sm: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
    --space-md: clamp(1.5rem, 1.42rem + 0.4vw, 1.88rem);
    --space-lg: clamp(2rem, 1.86rem + 0.7vw, 2.5rem);
    --space-xl: clamp(3rem, 2.75rem + 1.25vw, 3.75rem);
    --space-2xl: clamp(4rem, 3.6rem + 2vw, 5rem);
    --space-3xl: clamp(6rem, 5.4rem + 3vw, 7.5rem);

    --radius-xs: 0.375rem;
    --radius-sm: 0.625rem;
    --radius-md: 0.875rem;
    --radius-lg: 1.25rem;
    --radius-xl: 1.75rem;
    --radius-pill: 999px;

    --shadow-xs: 0 1px 2px rgb(15 23 42 / 0.05);
    --shadow-sm: 0 2px 8px -2px rgb(15 23 42 / 0.08);
    --shadow-md: 0 12px 32px -12px rgb(15 23 42 / 0.16);
    --shadow-lg: 0 28px 64px -24px rgb(15 23 42 / 0.22);
    --shadow-glow: 0 24px 70px -30px var(--accent-primary, #b89a58);

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast: 160ms;
    --dur-base: 260ms;
    --dur-slow: 520ms;

    --z-base: 1;
    --z-raised: 10;
    --z-sticky: 100;
    --z-overlay: 1000;

    --container-sm: 640px;
    --container-md: 820px;
    --container-lg: 1080px;
    --container-xl: 1280px;
    --container-2xl: 1440px;

    --border-hairline: 1px;
  }
}

/* Design System V2: semantic.css */
@layer semantic {
  :root {
    --brand: var(--brand-input, var(--accent-primary, #b89a58));
    --brand-contrast: var(--brand-contrast-input, #ffffff);

    --surface-primary: light-dark(oklch(0.995 0.003 95), oklch(0.17 0.012 260));
    --surface-secondary: light-dark(oklch(0.972 0.005 95), oklch(0.22 0.015 260));
    --surface-tertiary: light-dark(oklch(0.945 0.007 95), oklch(0.27 0.018 260));
    --surface-inverse: light-dark(oklch(0.18 0.014 260), oklch(0.97 0.005 95));
    --surface-brand-soft: color-mix(in oklch, var(--brand) 12%, var(--surface-primary));
    --surface-brand-wash: color-mix(in oklch, var(--brand) 6%, var(--surface-primary));

    --text-primary: light-dark(oklch(0.24 0.014 260), oklch(0.97 0.004 95));
    --text-secondary: light-dark(oklch(0.46 0.014 260), oklch(0.8 0.008 95));
    --text-muted: light-dark(oklch(0.6 0.012 260), oklch(0.68 0.01 95));
    --text-inverse: light-dark(oklch(0.97 0.004 95), oklch(0.2 0.014 260));
    --text-accent: color-mix(in oklch, var(--brand) 82%, black);

    --border-subtle: light-dark(oklch(0.9 0.006 260), oklch(0.32 0.014 260));
    --border-strong: light-dark(oklch(0.82 0.01 260), oklch(0.42 0.016 260));
    --border-brand: color-mix(in oklch, var(--brand) 42%, transparent);

    --accent-primary: var(--brand);
    --accent-hover: color-mix(in oklch, var(--brand) 84%, black);
    --accent-active: color-mix(in oklch, var(--brand) 72%, black);
    --accent-soft: color-mix(in oklch, var(--brand) 14%, var(--surface-primary));
    --accent-ring: color-mix(in oklch, var(--brand) 45%, transparent);

    --focus-ring: 0 0 0 3px var(--accent-ring);

    --font-heading: var(--font-heading-input, 'Inter', system-ui, sans-serif);
    --font-body: var(--font-body-input, 'Inter', system-ui, sans-serif);

    --section-y: var(--space-2xl);
    --container-pad: var(--space-md);
    --measure: 68ch;

    --overlay-hero: linear-gradient(
      to bottom,
      color-mix(in oklch, var(--surface-inverse) 32%, transparent) 0%,
      color-mix(in oklch, var(--surface-inverse) 78%, transparent) 100%
    );
  }

  /* ---------- Density (from the builder's Visual Density control) ----------
     <body data-density> is emitted by templates/v2/base.html from the V2 brief.
     These override the spacing scale so the choice has a visible effect:
     minimal -> more air and a narrower measure, dense -> tighter rhythm. */
  .v2-body[data-density="airy"] {
    --section-y: var(--space-3xl);
    --container-pad: var(--space-lg);
    --measure: 62ch;
  }
  .v2-body[data-density="dense"] {
    --section-y: var(--space-xl);
    --container-pad: var(--space-sm);
    --measure: 76ch;
  }
}

/* Design System V2: base.css */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  img, svg, video, canvas { display: block; max-width: 100%; }
  button, input, select, textarea { font: inherit; color: inherit; }
  a { color: inherit; text-decoration: none; }
  ul[class] { list-style: none; }
  :where(h1, h2, h3, h4, h5, h6, p) { overflow-wrap: break-word; }
}

@layer base {
  :root { color-scheme: light; }
  :root[data-color-scheme="dark"] { color-scheme: dark; }
  :root[data-color-scheme="auto"] { color-scheme: light dark; }

  html {
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
    font-family: var(--font-body);
    font-size: 100%;
  }

  body {
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.65;
    color: var(--text-primary);
    background-color: var(--surface-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
    text-rendering: optimizeLegibility;
  }

  h1, h2, h3, h4 {
    font-family: var(--font-heading);
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-wrap: balance;
    color: var(--text-primary);
  }

  h1 { font-size: var(--step-6); font-weight: 620; }
  h2 { font-size: var(--step-4); font-weight: 600; }
  h3 { font-size: var(--step-2); font-weight: 600; }
  h4 { font-size: var(--step-1); font-weight: 600; }

  p { text-wrap: pretty; }

  :focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-xs);
  }

  ::selection {
    background: color-mix(in oklch, var(--brand) 30%, transparent);
    color: var(--text-primary);
  }

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

  .container--narrow { max-width: var(--container-md); }

  .section {
    padding-block: var(--section-y);
    container-type: inline-size;
    container-name: section;
  }

  .section--tight { padding-block: var(--space-xl); }
  .section--alt { background-color: var(--surface-secondary); }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-accent);
  }

  .section-head {
    max-width: var(--measure);
    margin-inline: auto;
    text-align: center;
    margin-bottom: var(--space-xl);
  }

  .section-head--start { margin-inline: 0; text-align: start; }

  .section-head h2 { margin-block: var(--space-xs); }

  .section-head p { color: var(--text-secondary); font-size: var(--step-1); }

  /* Injected page H1 on subpages (output-integrity adds <h1 class="page-title">).
     Give it a contained, intentional page-hero treatment instead of a raw flush H1. */
  .page-title {
    max-width: var(--container-xl);
    margin-inline: auto;
    padding-inline: var(--container-pad);
    padding-block: var(--space-2xl) var(--space-lg);
    font-size: var(--step-5);
    font-weight: 640;
    letter-spacing: -0.03em;
    line-height: 1.05;
  }

  .visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }

  /* Prose defaults for article/service fragments rendered inside the V2 shell. */
  .v2-body main ul, .v2-body main ol { padding-inline-start: 1.35em; display: grid; gap: 0.4em; }
  .v2-body main li { line-height: 1.7; }
  .v2-body main blockquote {
    margin-block: var(--space-md);
    padding-inline-start: var(--space-md);
    border-inline-start: 3px solid var(--brand);
    color: var(--text-secondary);
    font-style: italic;
  }
  .v2-body main table { inline-size: 100%; border-collapse: collapse; margin-block: var(--space-md); }
  .v2-body main th, .v2-body main td { border: 1px solid var(--border-subtle); padding: 0.6rem 0.8rem; text-align: start; }
  .v2-body main img { border-radius: var(--radius-md); }
  .v2-body main hr { border: 0; border-block-start: 1px solid var(--border-subtle); margin-block: var(--space-lg); }
  .v2-body main a:not([class]) { color: var(--text-accent); text-decoration: underline; text-underline-offset: 3px; }

  .skip-link {
    position: absolute; inset-inline-start: var(--space-sm);
    inset-block-start: -4rem; z-index: var(--z-overlay);
    background: var(--surface-inverse); color: var(--text-inverse);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    transition: inset-block-start var(--dur-base) var(--ease-out);
  }
  .skip-link:focus-visible { inset-block-start: var(--space-sm); box-shadow: none; }

  /* Safety net: legacy injected chrome ships inline SVGs with Tailwind size
     classes that do not exist in the V2 foundation, so they default to the
     SVG intrinsic 300x150 box. Constrain any SVG that has no explicit size. */
  .v2-body svg:not([width]):not([height]) {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    flex: none;
  }
}

/* Design System V2: components.css */
@layer components {
  /* ---------- Buttons ---------- */
  .v2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 0.7em 1.35em;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: transform var(--dur-fast) var(--ease-out),
      background-color var(--dur-base) var(--ease-out),
      color var(--dur-base) var(--ease-out),
      box-shadow var(--dur-base) var(--ease-out),
      border-color var(--dur-base) var(--ease-out);
  }
  .v2-btn:active { transform: translateY(1px); }
  .v2-btn--primary {
    background: var(--brand);
    color: var(--brand-contrast);
    box-shadow: 0 1px 0 color-mix(in oklch, var(--brand) 60%, white) inset;
  }
  .v2-btn--primary:hover {
    background: var(--accent-hover);
    box-shadow: var(--shadow-md);
  }
  .v2-btn--ghost {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--border-subtle);
  }
  .v2-btn--ghost:hover { border-color: var(--border-strong); background: var(--surface-secondary); }
  .v2-btn--on-dark {
    background: color-mix(in oklch, white 12%, transparent);
    color: #fff;
    border-color: color-mix(in oklch, white 28%, transparent);
    backdrop-filter: blur(10px);
  }
  .v2-btn--on-dark:hover { background: color-mix(in oklch, white 20%, transparent); }
  .v2-btn--lg { padding: 0.95em 1.85em; font-size: var(--step-0); }
  .v2-btn--block { width: 100%; }

  /* ---------- Nav ---------- */
  .v2-nav {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-sticky);
    background: transparent;
    transition: background-color var(--dur-base) var(--ease-out),
      box-shadow var(--dur-base) var(--ease-out),
      border-color var(--dur-base) var(--ease-out);
    border-block-end: 1px solid transparent;
  }
  .v2-nav.is-scrolled {
    background: color-mix(in oklch, var(--surface-primary) 88%, transparent);
    backdrop-filter: saturate(1.4) blur(14px);
    border-block-end-color: var(--border-subtle);
    box-shadow: var(--shadow-xs);
  }
  .v2-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    min-height: 4.5rem;
  }
  .v2-nav__brand {
    font-family: var(--font-heading);
    font-size: var(--step-1);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    gap: 0.15em;
  }
  .v2-nav__brand-dot { color: var(--brand); }
  .v2-nav__links { display: none; align-items: center; gap: var(--space-md); }
  .v2-nav__link {
    position: relative;
    font-size: var(--step--1);
    font-weight: 500;
    color: var(--text-secondary);
    padding-block: 0.5rem;
    transition: color var(--dur-base) var(--ease-out);
  }
  .v2-nav__link::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0.15rem;
    block-size: 1.5px;
    background: var(--brand);
    transform: scaleX(0);
    transform-origin: inline-start;
    transition: transform var(--dur-base) var(--ease-out);
  }
  .v2-nav__link:hover, .v2-nav__link[aria-current="page"] { color: var(--text-primary); }
  .v2-nav__link:hover::after, .v2-nav__link[aria-current="page"]::after { transform: scaleX(1); }
  .v2-nav__actions { display: flex; align-items: center; gap: var(--space-xs); }
  .v2-nav__cta { display: none; }
  .v2-nav__toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    padding: 0.6rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--surface-primary);
    cursor: pointer;
  }
  .v2-nav__toggle span {
    display: block;
    block-size: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) linear;
  }
  .v2-nav__drawer {
    border-block-start: 1px solid var(--border-subtle);
    background: var(--surface-primary);
    padding: var(--space-md) var(--container-pad) var(--space-lg);
    max-block-size: calc(100svh - 4.5rem);
    overflow-y: auto;
  }
  .v2-nav__drawer[hidden] { display: none; }
  .v2-nav__drawer a {
    display: block;
    padding: var(--space-xs) 0;
    font-size: var(--step-1);
    font-weight: 500;
    border-block-end: 1px solid var(--border-subtle);
  }
  .v2-nav__drawer .v2-btn { margin-block-start: var(--space-md); }

  @media (min-width: 60rem) {
    .v2-nav__links { display: flex; }
    .v2-nav__cta { display: inline-flex; }
    .v2-nav__toggle { display: none; }
    .v2-nav__drawer { display: none !important; }
  }

  /* ---------- Hero ---------- */
  .v2-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: center;
    min-block-size: min(92svh, 54rem);
    padding-block: var(--space-3xl);
    overflow: clip;
  }
  .v2-hero__media { position: absolute; inset: 0; z-index: -2; }
  .v2-hero__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: var(--hero-focus, 50% 45%);
    animation: v2-hero-kenburns 18s var(--ease-in-out) both;
  }
  @keyframes v2-hero-kenburns {
    from { transform: scale(1.06); }
    to { transform: scale(1); }
  }
  .v2-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--overlay-hero);
  }
  .v2-hero__inner { max-inline-size: 62rem; }
  .v2-hero[data-align="start"] .v2-hero__inner { margin-inline-end: auto; text-align: start; }
  .v2-hero[data-align="center"] .v2-hero__inner { margin-inline: auto; text-align: center; }
  .v2-hero__kicker { color: color-mix(in oklch, #fff 82%, var(--brand)); margin-block-end: var(--space-sm); }
  .v2-hero__title {
    color: #fff;
    font-size: var(--step-7);
    font-weight: 640;
    line-height: 1.02;
    letter-spacing: -0.03em;
    text-wrap: balance;
  }
  .v2-hero__sub {
    color: color-mix(in oklch, #fff 86%, transparent);
    font-size: var(--step-1);
    font-weight: 350;
    line-height: 1.55;
    max-inline-size: 44rem;
    margin-block: var(--space-md) 0;
  }
  .v2-hero[data-align="center"] .v2-hero__sub { margin-inline: auto; }
  .v2-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-block-start: var(--space-lg);
  }
  .v2-hero[data-align="center"] .v2-hero__actions { justify-content: center; }
  .v2-hero__proof {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    margin-block-start: var(--space-lg);
    padding: 0.6rem 1.1rem;
    border-radius: var(--radius-pill);
    background: color-mix(in oklch, #fff 12%, transparent);
    border: 1px solid color-mix(in oklch, #fff 24%, transparent);
    backdrop-filter: blur(12px);
    color: #fff;
    font-size: var(--step--1);
    font-weight: 600;
  }
  .v2-hero__stars { display: inline-flex; gap: 2px; color: #f5b301; }

  .v2-hero[data-variant="split"] { min-block-size: auto; padding-block: var(--space-2xl); }
  .v2-hero[data-variant="split"] .v2-hero__media {
    position: relative;
    z-index: 0;
    border-radius: var(--radius-lg);
    overflow: clip;
    aspect-ratio: 4 / 5;
    min-block-size: 22rem;
  }
  .v2-hero[data-variant="split"] .v2-hero__overlay { display: none; }
  .v2-hero[data-variant="split"] .v2-hero__title,
  .v2-hero[data-variant="split"] .v2-hero__sub { color: var(--text-primary); }
  .v2-hero[data-variant="split"] .v2-hero__sub { color: var(--text-secondary); }
  .v2-hero[data-variant="split"] .hero-split {
    display: grid;
    gap: var(--space-xl);
    align-items: center;
  }

  .v2-hero__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
    margin-block-start: var(--space-xl);
    max-inline-size: 40rem;
  }
  .v2-stat {
    padding: var(--space-md);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-secondary);
  }
  .v2-stat__value { font-family: var(--font-heading); font-size: var(--step-3); font-weight: 640; color: var(--text-primary); }
  .v2-stat__label { font-size: var(--step--1); color: var(--text-secondary); }
  .v2-hero[data-variant="split"] .v2-stat,
  .v2-hero[data-variant="bento"] .v2-stat { background: var(--surface-secondary); }

  @container section (min-width: 56rem) {
    .v2-hero[data-variant="split"] .hero-split { grid-template-columns: 1.05fr 0.95fr; }
    .v2-hero__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  .v2-hero[data-variant="slideshow"] .v2-hero__slide {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    opacity: 0;
    animation: v2-hero-slide 18s infinite;
  }
  .v2-hero[data-variant="slideshow"] .v2-hero__slide:nth-child(1) { animation-delay: 0s; }
  .v2-hero[data-variant="slideshow"] .v2-hero__slide:nth-child(2) { animation-delay: 6s; }
  .v2-hero[data-variant="slideshow"] .v2-hero__slide:nth-child(3) { animation-delay: 12s; }
  @keyframes v2-hero-slide {
    0% { opacity: 0; }
    4% { opacity: 1; }
    33% { opacity: 1; }
    37% { opacity: 0; }
    100% { opacity: 0; }
  }

  /* ---------- Trust strip ---------- */
  .v2-trust {
    border-block: 1px solid var(--border-subtle);
    background: var(--surface-secondary);
  }
  .v2-trust__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-md) var(--space-xl);
    padding-block: var(--space-md);
  }
  .v2-trust__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--step--1);
    font-weight: 500;
    color: var(--text-secondary);
  }
  .v2-trust__item svg { color: var(--brand); flex: none; }

  .v2-trust[data-layout="grid"] .v2-trust__inner {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: stretch;
    gap: var(--space-sm);
  }
  .v2-trust[data-layout="grid"] .v2-trust__item { justify-content: center; }
  @container section (min-width: 40rem) {
    .v2-trust[data-layout="grid"] .v2-trust__inner { grid-template-columns: repeat(3, 1fr); }
  }
  .v2-trust[data-layout="cards"] .v2-trust__inner {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: stretch;
    gap: var(--space-md);
  }
  @container section (min-width: 40rem) {
    .v2-trust[data-layout="cards"] .v2-trust__inner { grid-template-columns: repeat(3, 1fr); }
  }
  .v2-trust[data-layout="cards"] .v2-trust__item {
    flex-direction: column;
    text-align: center;
    gap: var(--space-xs);
    padding: var(--space-lg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-primary);
    font-size: var(--step-0);
    font-weight: 600;
    color: var(--text-primary);
  }
  .v2-trust[data-layout="cards"] .v2-trust__item svg { inline-size: 1.4rem; block-size: 1.4rem; }
  .v2-trust[data-layout="carousel"] .v2-trust__inner {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .v2-trust[data-layout="carousel"] .v2-trust__item { flex: none; scroll-snap-align: start; }

  /* ---------- Stakes ---------- */
  .v2-stakes__grid { display: grid; gap: var(--space-md); }
  .v2-stake {
    padding: var(--space-lg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-primary);
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  }
  .v2-stake:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
  .v2-stake__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: var(--radius-sm);
    background: color-mix(in oklch, oklch(0.58 0.2 25) 12%, var(--surface-primary));
    color: oklch(0.52 0.19 25);
    margin-block-end: var(--space-sm);
  }
  .v2-stake h4 { margin-block-end: var(--space-2xs); }
  .v2-stake p { color: var(--text-secondary); font-size: var(--step--1); }
  @container section (min-width: 48rem) { .v2-stakes__grid { grid-template-columns: repeat(3, 1fr); } }

  /* ---------- Services ---------- */
  .v2-services__grid { display: grid; gap: var(--space-md); }
  .v2-service {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-lg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-primary);
    overflow: clip;
    transition: transform var(--dur-base) var(--ease-out),
      box-shadow var(--dur-base) var(--ease-out),
      border-color var(--dur-base) var(--ease-out);
  }
  .v2-service::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 2px;
    background: var(--brand);
    transform: scaleX(0);
    transform-origin: inline-start;
    transition: transform var(--dur-base) var(--ease-out);
  }
  .v2-service:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--border-brand);
  }
  .v2-service:hover::before { transform: scaleX(1); }
  .v2-service__index {
    font-family: var(--font-heading);
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--brand);
    letter-spacing: 0.08em;
  }
  .v2-service__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 3rem;
    block-size: 3rem;
    border-radius: var(--radius-md);
    background: var(--surface-brand-soft);
    color: var(--text-accent);
  }
  .v2-service h3 { font-size: var(--step-2); }
  .v2-service p { color: var(--text-secondary); font-size: var(--step--1); flex: 1; }
  .v2-service__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--text-accent);
  }
  .v2-service__link svg { transition: transform var(--dur-base) var(--ease-out); }
  .v2-service:hover .v2-service__link svg { transform: translateX(4px); }

  .v2-services[data-layout="bento"] .v2-services__grid { grid-template-columns: repeat(2, 1fr); }
  .v2-services[data-layout="bento"] .v2-service:first-child { grid-column: span 2; }
  .v2-services[data-layout="list"] .v2-service {
    flex-direction: row;
    align-items: center;
    gap: var(--space-md);
    border-radius: var(--radius-md);
  }
  @container section (min-width: 48rem) {
    .v2-services__grid { grid-template-columns: repeat(2, 1fr); }
  }
  @container section (min-width: 64rem) {
    .v2-services[data-layout="grid"] .v2-services__grid { grid-template-columns: repeat(3, 1fr); }
    .v2-services[data-layout="bento"] .v2-services__grid { grid-template-columns: repeat(3, 1fr); }
    .v2-services[data-layout="bento"] .v2-service:first-child { grid-column: span 2; }
  }
  @container section (min-width: 48rem) {
    .v2-services[data-layout="zigzag"] .v2-services__grid { grid-template-columns: repeat(2, 1fr); align-items: start; }
    .v2-services[data-layout="zigzag"] .v2-service:nth-child(even) { margin-block-start: var(--space-2xl); }
  }

  /* ---------- Products ---------- */
  /* Products are goods, not services: no icon, no "learn more" link, and the card
     must still read well with no image (a details-only build often has no product
     photography, so the name carries the card). */
  .v2-products__grid { display: grid; gap: var(--space-md); }
  .v2-product {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-lg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-primary);
    overflow: clip;
    transition: transform var(--dur-base) var(--ease-out),
      box-shadow var(--dur-base) var(--ease-out),
      border-color var(--dur-base) var(--ease-out);
  }
  .v2-product::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 2px;
    background: var(--brand);
    transform: scaleX(0);
    transform-origin: inline-start;
    transition: transform var(--dur-base) var(--ease-out);
  }
  .v2-product:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--border-brand);
  }
  .v2-product:hover::before { transform: scaleX(1); }
  .v2-product__media {
    margin: calc(var(--space-lg) * -1) calc(var(--space-lg) * -1) 0;
    aspect-ratio: 4 / 3;
    overflow: clip;
    background: var(--surface-tertiary);
  }
  .v2-product__media img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
  .v2-product__body { display: flex; flex-direction: column; gap: var(--space-2xs); }
  .v2-product__name {
    font-family: var(--font-heading);
    font-size: var(--step-1);
    line-height: var(--leading-tight);
    margin: 0;
  }
  .v2-product__detail { color: var(--text-secondary); margin: 0; }

  .v2-products[data-layout="bento"] .v2-products__grid { grid-template-columns: repeat(2, 1fr); }
  .v2-products[data-layout="bento"] .v2-product:first-child { grid-column: span 2; }
  .v2-products[data-layout="list"] .v2-product {
    flex-direction: row;
    align-items: center;
    gap: var(--space-md);
    border-radius: var(--radius-md);
  }
  .v2-products[data-layout="list"] .v2-product__media {
    margin: 0;
    inline-size: 6rem;
    flex: 0 0 auto;
  }
  @container section (min-width: 48rem) {
    .v2-products__grid { grid-template-columns: repeat(2, 1fr); }
  }
  @container section (min-width: 64rem) {
    .v2-products[data-layout="grid"] .v2-products__grid { grid-template-columns: repeat(3, 1fr); }
    .v2-products[data-layout="bento"] .v2-products__grid { grid-template-columns: repeat(3, 1fr); }
    .v2-products[data-layout="bento"] .v2-product:first-child { grid-column: span 2; }
  }

  /* ---------- Gallery ---------- */
  .v2-gallery__grid {
    display: grid;
    gap: var(--space-sm);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  }
  .v2-gallery__item {
    position: relative;
    overflow: clip;
    border-radius: var(--radius-md);
    aspect-ratio: 4 / 3;
    background: var(--surface-tertiary);
    margin: 0;
  }
  .v2-gallery__item img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
  }
  .v2-gallery__item:hover img { transform: scale(1.05); }
  .v2-gallery__item { cursor: zoom-in; }
  .v2-gallery__item:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
  .v2-gallery__item:focus-visible img { transform: scale(1.05); }

  /* Gallery layout variants (canonical galleryStyle → v2 data-layout) */
  .v2-gallery[data-layout="cinematic"] .v2-gallery__grid {
    display: flex;
    gap: var(--space-sm);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 11%;
    padding-inline: 11%;
    padding-block-end: var(--space-xs);
    scrollbar-width: none;
  }
  .v2-gallery[data-layout="cinematic"] .v2-gallery__grid::-webkit-scrollbar { display: none; }
  .v2-gallery[data-layout="cinematic"] .v2-gallery__item {
    flex: 0 0 min(78%, 46rem);
    scroll-snap-align: center;
    aspect-ratio: 16 / 10;
  }
  @container section (min-width: 64rem) {
    .v2-gallery[data-layout="cinematic"] .v2-gallery__grid { padding-inline: 20%; scroll-padding-inline: 20%; }
    .v2-gallery[data-layout="cinematic"] .v2-gallery__item { flex-basis: min(60%, 46rem); }
  }

  .v2-gallery[data-layout="mosaic"] .v2-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 8.5rem;
    grid-auto-flow: dense;
  }
  .v2-gallery[data-layout="mosaic"] .v2-gallery__item { aspect-ratio: auto; grid-row: span 2; }
  .v2-gallery[data-layout="mosaic"] .v2-gallery__item:nth-child(6n + 1) { grid-column: span 2; grid-row: span 3; }
  @container section (min-width: 64rem) {
    .v2-gallery[data-layout="mosaic"] .v2-gallery__grid { grid-template-columns: repeat(4, 1fr); }
  }

  .v2-gallery[data-layout="story"] .v2-gallery__grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
    counter-reset: gstep;
  }
  .v2-gallery[data-layout="story"] .v2-gallery__item { aspect-ratio: 16 / 9; }
  .v2-gallery[data-layout="story"] .v2-gallery__item::after {
    counter-increment: gstep;
    content: counter(gstep, decimal-leading-zero);
    position: absolute;
    inset-block-start: var(--space-xs);
    inset-inline-start: var(--space-xs);
    display: grid;
    place-items: center;
    min-inline-size: 2.25rem;
    block-size: 2.25rem;
    padding-inline: 0.5rem;
    border-radius: 999px;
    background: color-mix(in oklch, black 55%, transparent);
    color: #fff;
    font-family: var(--font-heading);
    font-size: var(--step--1);
    font-weight: 700;
    letter-spacing: 0.04em;
    backdrop-filter: blur(4px);
  }
  @container section (min-width: 64rem) { .v2-gallery[data-layout="story"] .v2-gallery__grid { grid-template-columns: repeat(2, 1fr); } }

  .v2-gallery[data-layout="before-after"] .v2-gallery__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2xs); }
  .v2-gallery[data-layout="before-after"] .v2-gallery__item { aspect-ratio: 4 / 3; border-radius: var(--radius-sm); }
  .v2-gallery[data-layout="before-after"] .v2-gallery__item:nth-child(odd)::after {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-end: calc(var(--space-2xs) / -2);
    inline-size: 2px;
    background: var(--brand);
  }
  @container section (min-width: 64rem) { .v2-gallery[data-layout="before-after"] .v2-gallery__grid { grid-template-columns: repeat(4, 1fr); } }

  .v2-gallery[data-layout="masonry"] .v2-gallery__grid { display: block; columns: 1; column-gap: var(--space-sm); }
  .v2-gallery[data-layout="masonry"] .v2-gallery__item {
    display: block;
    break-inside: avoid;
    margin-block-end: var(--space-sm);
    aspect-ratio: auto;
  }
  .v2-gallery[data-layout="masonry"] .v2-gallery__item img { block-size: auto; }
  @container section (min-width: 40rem) { .v2-gallery[data-layout="masonry"] .v2-gallery__grid { columns: 2; } }
  @container section (min-width: 64rem) { .v2-gallery[data-layout="masonry"] .v2-gallery__grid { columns: 3; } }

  /* ---------- Videos ---------- */
  .v2-videos__grid {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  }
  .v2-video {
    position: relative;
    display: block;
    inline-size: 100%;
    padding: 0;
    border: 0;
    border-radius: var(--radius-lg);
    overflow: clip;
    aspect-ratio: 16 / 9;
    background: var(--surface-inverse);
    cursor: pointer;
  }
  .v2-video img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
  .v2-video:hover img { transform: scale(1.05); }
  .v2-video__blank { position: absolute; inset: 0; background: color-mix(in oklch, var(--brand) 22%, var(--surface-inverse)); }
  .v2-video__play {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    inline-size: 3.5rem;
    block-size: 3.5rem;
    border-radius: 50%;
    background: color-mix(in oklch, white 92%, transparent);
    color: var(--text-primary);
    box-shadow: var(--shadow-md);
    transition: transform var(--dur-base) var(--ease-out);
  }
  .v2-video:hover .v2-video__play { transform: translate(-50%, -50%) scale(1.1); }
  .v2-video__title {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    padding: var(--space-md);
    background: linear-gradient(to top, color-mix(in oklch, black 78%, transparent), transparent);
    color: #fff;
    font-size: var(--step--1);
    font-weight: 600;
    text-align: start;
  }

  /* ---------- Video modal ---------- */
  .v2-video-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: clamp(1rem, 4vw, 3rem);
    background: color-mix(in oklch, black 88%, transparent);
    animation: v2-lightbox-in var(--dur-base) var(--ease-out) both;
  }
  .v2-video-modal[hidden] { display: none; }
  .v2-video-modal__frame {
    inline-size: min(96vw, 60rem);
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--radius-md);
    overflow: clip;
    box-shadow: var(--shadow-lg);
  }
  .v2-video-modal__frame iframe,
  .v2-video-modal__frame video { inline-size: 100%; block-size: 100%; border: 0; display: block; }
  .v2-video-modal__close {
    position: absolute;
    inset-block-start: clamp(0.75rem, 2.5vw, 1.5rem);
    inset-inline-end: clamp(0.75rem, 2.5vw, 1.5rem);
    display: grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: 999px;
    border: 1px solid color-mix(in oklch, white 30%, transparent);
    background: color-mix(in oklch, black 40%, transparent);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
  }
  .v2-video-modal__close:hover { background: color-mix(in oklch, white 18%, black); }

  /* ---------- Lightbox ---------- */
  .v2-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-sm);
    padding: clamp(1rem, 4vw, 3rem);
    background: color-mix(in oklch, black 86%, transparent);
    animation: v2-lightbox-in var(--dur-base) var(--ease-out) both;
  }
  .v2-lightbox[hidden] { display: none; }
  .v2-lightbox__img[hidden] { display: none; }
  .v2-lightbox__img {
    grid-column: 2;
    max-inline-size: min(92vw, 72rem);
    max-block-size: 86vh;
    inline-size: auto;
    block-size: auto;
    margin: auto;
    object-fit: contain;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
  }
  .v2-lightbox__nav,
  .v2-lightbox__close {
    display: grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border: 1px solid color-mix(in oklch, white 30%, transparent);
    border-radius: 999px;
    background: color-mix(in oklch, black 40%, transparent);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  }
  .v2-lightbox__nav { align-self: center; }
  .v2-lightbox__nav:hover,
  .v2-lightbox__close:hover { background: color-mix(in oklch, white 18%, black); border-color: color-mix(in oklch, white 55%, transparent); }
  .v2-lightbox__close { position: absolute; top: clamp(0.75rem, 2.5vw, 1.5rem); inset-inline-end: clamp(0.75rem, 2.5vw, 1.5rem); }
  @keyframes v2-lightbox-in { from { opacity: 0; } to { opacity: 1; } }
  @media (max-width: 40rem) { .v2-lightbox__nav { display: none; } }

  /* ---------- Process ---------- */
  .v2-process__list { display: grid; gap: var(--space-md); counter-reset: step; }
  .v2-step { position: relative; padding-block-start: var(--space-md); border-block-start: 2px solid var(--border-subtle); }
  .v2-step__num {
    font-family: var(--font-heading);
    font-size: var(--step-3);
    font-weight: 640;
    color: var(--brand);
    line-height: 1;
    margin-block-end: var(--space-xs);
  }
  .v2-step h4 { margin-block-end: var(--space-2xs); }
  .v2-step p { color: var(--text-secondary); font-size: var(--step--1); }
  @container section (min-width: 48rem) { .v2-process__list { grid-template-columns: repeat(2, 1fr); } }
  @container section (min-width: 64rem) { .v2-process__list { grid-template-columns: repeat(4, 1fr); } }

  /* ---------- Proof / testimonials ---------- */
  .v2-proof__grid { columns: 1; column-gap: var(--space-md); }
  .v2-quote {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-lg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-primary);
    box-shadow: var(--shadow-xs);
  }
  .v2-quote__stars { display: inline-flex; gap: 2px; color: #f5b301; }
  .v2-quote__text { font-size: var(--step-0); color: var(--text-primary); flex: 1; }
  .v2-quote__author { display: flex; align-items: center; gap: var(--space-xs); }
  .v2-quote__avatar {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--surface-brand-soft);
    color: var(--text-accent);
    font-weight: 700;
    flex: none;
  }
  .v2-quote__name { font-weight: 600; font-size: var(--step--1); }
  .v2-quote__meta { font-size: var(--step--2); color: var(--text-muted); }
  .v2-proof[data-layout="carousel"] .v2-proof__grid {
    columns: auto;
    display: flex;
    gap: var(--space-md);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-block-end: var(--space-sm);
    -webkit-overflow-scrolling: touch;
  }
  .v2-proof[data-layout="carousel"] .v2-quote {
    flex: 0 0 min(22rem, 82vw);
    margin: 0;
    scroll-snap-align: start;
  }
  .v2-quote { break-inside: avoid; margin-block-end: var(--space-md); }
  @container section (min-width: 40rem) { .v2-proof__grid { columns: 2; } }
  @container section (min-width: 64rem) { .v2-proof__grid { columns: 3; } }

  .v2-proof[data-layout="grid"] .v2-proof__grid,
  .v2-proof[data-layout="spotlight"] .v2-proof__grid { columns: auto; display: grid; gap: var(--space-md); }
  .v2-proof[data-layout="grid"] .v2-quote,
  .v2-proof[data-layout="spotlight"] .v2-quote { break-inside: auto; margin: 0; }
  @container section (min-width: 48rem) {
    .v2-proof[data-layout="grid"] .v2-proof__grid { grid-template-columns: repeat(2, 1fr); }
  }
  @container section (min-width: 64rem) {
    .v2-proof[data-layout="grid"] .v2-proof__grid { grid-template-columns: repeat(3, 1fr); }
  }
  @container section (min-width: 56rem) {
    .v2-proof[data-layout="spotlight"] .v2-proof__grid { grid-template-columns: repeat(3, 1fr); }
    .v2-proof[data-layout="spotlight"] .v2-quote:first-child { grid-column: span 2; grid-row: span 2; justify-content: center; }
    .v2-proof[data-layout="spotlight"] .v2-quote:first-child .v2-quote__text {
      font-family: var(--font-heading);
      font-size: var(--step-2);
      line-height: 1.28;
    }
  }

  /* ---------- Map ---------- */
  .v2-map__card {
    display: grid;
    gap: var(--space-lg);
    padding: var(--space-xl);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    background: var(--surface-secondary);
    align-items: center;
  }
  .v2-map__embed {
    border-radius: var(--radius-lg);
    overflow: clip;
    min-block-size: 18rem;
    border: 1px solid var(--border-subtle);
  }
  .v2-map__embed iframe { inline-size: 100%; block-size: 100%; min-block-size: 18rem; border: 0; }
  .v2-map__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-pill);
    background: var(--surface-brand-soft);
    color: var(--text-accent);
    font-weight: 600;
    font-size: var(--step--1);
  }
  @container section (min-width: 56rem) { .v2-map__card { grid-template-columns: 0.8fr 1.2fr; } }

  /* ---------- CTA ---------- */
  .v2-cta {
    position: relative;
    background: var(--surface-inverse);
    color: var(--text-inverse);
    border-radius: var(--radius-xl);
    overflow: clip;
  }
  .v2-cta__inner {
    display: grid;
    gap: var(--space-xl);
    padding: var(--space-2xl) var(--space-lg);
    align-items: center;
  }
  .v2-cta h2 { color: var(--text-inverse); }
  .v2-cta p { color: color-mix(in oklch, var(--text-inverse) 78%, transparent); margin-block-start: var(--space-sm); }
  .v2-cta__meta { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-block-start: var(--space-lg); }
  .v2-cta__meta a { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text-inverse); font-weight: 600; }
  .v2-cta__form {
    display: grid;
    gap: var(--space-sm);
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    background: color-mix(in oklch, var(--surface-primary) 96%, transparent);
    color: var(--text-primary);
    box-shadow: var(--shadow-lg);
  }
  .v2-field { display: grid; gap: 0.35rem; }
  .v2-field label { font-size: var(--step--2); font-weight: 600; color: var(--text-secondary); }
  .v2-field input, .v2-field select, .v2-field textarea {
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--surface-primary);
    font-size: var(--step--1);
    transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  }
  .v2-field input:focus, .v2-field select:focus, .v2-field textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: var(--focus-ring);
  }
  @container section (min-width: 56rem) { .v2-cta__inner { grid-template-columns: 1.1fr 0.9fr; padding-inline: var(--space-2xl); } }

  /* ---------- FAQ ---------- */
  .v2-faq__list { display: grid; gap: var(--space-sm); max-inline-size: 52rem; margin-inline: auto; }
  .v2-faq__item {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-primary);
    overflow: clip;
  }
  .v2-faq__item[open] { border-color: var(--border-brand); box-shadow: var(--shadow-sm); }
  .v2-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    font-weight: 600;
    font-size: var(--step-1);
    cursor: pointer;
    list-style: none;
  }
  .v2-faq__q::-webkit-details-marker { display: none; }
  .v2-faq__q::after {
    content: "";
    inline-size: 0.7rem;
    block-size: 0.7rem;
    border-inline-end: 2px solid var(--brand);
    border-block-end: 2px solid var(--brand);
    rotate: 45deg;
    transition: rotate var(--dur-base) var(--ease-out);
    flex: none;
  }
  .v2-faq__item[open] .v2-faq__q::after { rotate: 225deg; }
  .v2-faq__a { padding: 0 var(--space-lg) var(--space-lg); color: var(--text-secondary); }

  /* ---------- Footer ---------- */
  .v2-footer {
    background: var(--surface-inverse);
    color: var(--text-inverse);
    padding-block: var(--space-2xl) var(--space-lg);
    margin-block-start: var(--space-2xl);
  }
  .v2-footer__grid {
    display: grid;
    gap: var(--space-xl);
    grid-template-columns: 1fr;
  }
  .v2-footer__brand h3 { color: var(--text-inverse); font-size: var(--step-1); }
  .v2-footer__brand p { color: color-mix(in oklch, var(--text-inverse) 72%, transparent); margin-block-start: var(--space-sm); max-inline-size: 32rem; }
  .v2-footer__col h4 {
    font-size: var(--step--2);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: color-mix(in oklch, var(--text-inverse) 66%, transparent);
    margin-block-end: var(--space-sm);
  }
  .v2-footer__col ul { display: grid; gap: var(--space-2xs); }
  .v2-footer__col a { color: color-mix(in oklch, var(--text-inverse) 84%, transparent); font-size: var(--step--1); }
  .v2-footer__col a:hover { color: var(--text-inverse); }
  .v2-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-block-start: var(--space-xl);
    padding-block-start: var(--space-md);
    border-block-start: 1px solid color-mix(in oklch, var(--text-inverse) 16%, transparent);
    font-size: var(--step--2);
    color: color-mix(in oklch, var(--text-inverse) 68%, transparent);
  }
  .v2-footer__bottom a { color: inherit; }
  .v2-social { display: flex; gap: var(--space-xs); }
  .v2-social a {
    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: 50%;
    background: color-mix(in oklch, var(--text-inverse) 12%, transparent);
    transition: background-color var(--dur-base) var(--ease-out);
  }
  .v2-social a:hover { background: var(--brand); }
  @media (min-width: 56rem) { .v2-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }

  /* ---------- Mobile action bar ---------- */
  .v2-mobile-bar {
    position: sticky;
    inset-block-end: 0;
    z-index: var(--z-sticky);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--border-subtle);
    border-block-start: 1px solid var(--border-subtle);
  }
  .v2-mobile-bar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: var(--space-sm);
    font-weight: 600;
    font-size: var(--step--1);
    background: var(--surface-primary);
  }
  .v2-mobile-bar a:last-child { background: var(--brand); color: var(--brand-contrast); }
  @media (min-width: 60rem) { .v2-mobile-bar { display: none; } }

  /* ---------- Split-hero light-surface fixes ---------- */
  .v2-hero[data-variant="split"] .v2-hero__kicker { color: var(--text-accent); }
  .v2-hero[data-variant="split"] .v2-hero__proof {
    background: var(--surface-secondary);
    border-color: var(--border-subtle);
    color: var(--text-primary);
    backdrop-filter: none;
  }
  .v2-hero[data-variant="split"] .v2-btn--on-dark {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--border-subtle);
  }
  .v2-hero[data-variant="split"] .v2-btn--on-dark:hover {
    background: var(--surface-secondary);
    border-color: var(--border-strong);
  }

  /* ---------- Inline SVG sizing ---------- */
  .v2-body .v2-service__icon svg { inline-size: 1.5rem; block-size: 1.5rem; }
  .v2-trust__item svg { inline-size: 1rem; block-size: 1rem; }
  .v2-quote__avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .v2-quote__avatar svg { color: var(--text-accent); }
  .v2-quote__name { display: block; }
  .v2-quote__meta { display: block; color: var(--text-muted); }
  .v2-map__pill svg { inline-size: 1rem; block-size: 1rem; }
  .v2-cta__meta svg { flex: none; }

  /* ---------- About ---------- */
  .v2-about__grid { display: grid; gap: var(--space-xl); align-items: center; }
  .v2-about__lead { color: var(--text-secondary); font-size: var(--step-0); max-inline-size: var(--measure); margin-block-start: var(--space-xs); }
  .v2-about__trust { color: var(--text-accent); font-weight: 600; font-size: var(--step--1); margin-block-start: var(--space-sm); }
  .v2-about__founder { margin-block: var(--space-md); padding-inline-start: var(--space-md); border-inline-start: 3px solid var(--brand); color: var(--text-secondary); font-style: italic; }
  .v2-about__founder cite { display: block; margin-block-start: var(--space-2xs); font-style: normal; font-weight: 600; color: var(--text-primary); }
  .v2-about__metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-sm); margin-block-start: var(--space-lg); }
  .v2-about__media { border-radius: var(--radius-lg); overflow: clip; aspect-ratio: 4 / 5; background: var(--surface-tertiary); }
  .v2-about__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  @media (min-width: 56rem) { .v2-about__grid { grid-template-columns: 1.1fr 0.9fr; } }

  /* ---------- Case studies / stories ---------- */
  .v2-stories__list { display: grid; gap: var(--space-lg); }
  .v2-story {
    display: grid;
    gap: var(--space-md);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-primary);
    overflow: clip;
  }
  .v2-story--featured { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
  .v2-story__media { background: var(--surface-tertiary); min-block-size: 14rem; }
  .v2-story__media img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
  .v2-story__body { padding: var(--space-md); display: grid; gap: var(--space-sm); }
  .v2-story__head { display: flex; align-items: center; gap: var(--space-2xs); flex-wrap: wrap; }
  .v2-story__tag {
    display: inline-block;
    padding: 0.25em 0.75em;
    border-radius: var(--radius-pill);
    background: var(--surface-inverse);
    color: var(--text-inverse);
    font-size: var(--step--2);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .v2-story__locality { color: var(--text-muted); font-size: var(--step--1); }
  .v2-story__block { display: grid; gap: 0.25rem; }
  .v2-story__label {
    font-size: var(--step--2);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .v2-story__block p { margin: 0; color: var(--text-secondary); }
  .v2-story__block--outcome p { color: var(--text-primary); font-weight: 500; }
  .v2-story__quote {
    margin: 0;
    padding-inline-start: var(--space-sm);
    border-inline-start: 2px solid var(--border-brand);
    color: var(--text-secondary);
    font-style: italic;
  }
  @media (min-width: 56rem) {
    .v2-story { grid-template-columns: 0.9fr 1.1fr; }
    .v2-story__media { min-block-size: 100%; }
    .v2-story__body { padding: var(--space-lg); }
  }

  /* ---------- Contact ---------- */
  .v2-contact__grid { display: grid; gap: var(--space-lg); }
  .v2-contact__details { display: grid; gap: var(--space-md); align-content: start; }
  .v2-contact__item { display: grid; gap: 0.25rem; }
  .v2-contact__item p { margin: 0; color: var(--text-secondary); }
  .v2-contact__label {
    font-size: var(--step--2);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .v2-contact__link { color: var(--text-accent); text-decoration: none; font-weight: 600; }
  .v2-contact__link:hover { text-decoration: underline; }
  .v2-contact__map {
    border-radius: var(--radius-lg);
    overflow: clip;
    border: 1px solid var(--border-subtle);
    min-block-size: 20rem;
  }
  .v2-contact__map iframe { inline-size: 100%; block-size: 100%; min-block-size: 20rem; border: 0; display: block; }
  @media (min-width: 56rem) { .v2-contact__grid { grid-template-columns: 1fr 1fr; } }

  /* ---------- Blog index ---------- */
  .v2-blog__grid { display: grid; gap: var(--space-lg); }
  .v2-post {
    display: grid;
    gap: var(--space-sm);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-primary);
    overflow: clip;
  }
  .v2-post__media { display: block; aspect-ratio: 16 / 10; background: var(--surface-tertiary); }
  .v2-post__media img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
  .v2-post__body { padding: var(--space-md); display: grid; gap: var(--space-2xs); align-content: start; }
  .v2-post__meta {
    display: flex;
    gap: var(--space-2xs);
    margin: 0;
    font-size: var(--step--2);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
  }
  .v2-post__title { margin: 0; font-size: var(--step-1); }
  .v2-post__title a { color: inherit; text-decoration: none; }
  .v2-post__title a:hover { color: var(--text-accent); }
  .v2-post__excerpt { margin: 0; color: var(--text-secondary); }
  .v2-post__more {
    margin-block-start: var(--space-2xs);
    color: var(--text-accent);
    font-weight: 600;
    font-size: var(--step--1);
  }
  @media (min-width: 48rem) { .v2-blog__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 64rem) { .v2-blog__grid { grid-template-columns: repeat(3, 1fr); } }

  /* ---------- Legal (privacy / terms) ---------- */
  .v2-legal__container { max-inline-size: 48rem; }
  .v2-legal__head { margin-block-end: var(--space-lg); }
  .v2-legal__head h1 { font-size: var(--step-3); margin-block: 0 var(--space-2xs); }
  .v2-legal__updated { margin: 0; color: var(--text-muted); font-size: var(--step--1); }
  .v2-legal__body { color: var(--text-secondary); line-height: 1.75; }
  .v2-legal__body h2 { margin-block-start: var(--space-lg); font-size: var(--step-1); color: var(--text-primary); }
  .v2-legal__body h3 { margin-block-start: var(--space-md); font-size: var(--step-0); color: var(--text-primary); }
  .v2-legal__body p { margin-block: 0 var(--space-sm); }
  .v2-legal__body ul, .v2-legal__body ol { margin-block: 0 var(--space-sm); padding-inline-start: 1.25em; }
  .v2-legal__body li { margin-block-end: 0.35em; }
  .v2-legal__body a { color: var(--text-accent); }
}

/* Design System V2: motion.css */
@layer components {
  /* Scroll-driven reveal. IMPORTANT: the animated element must NOT be inside a
     size container (`.section` sets container-type: inline-size), otherwise
     `animation-timeline: view()` resolves against the wrong scroll container and
     the element stays stuck at opacity 0 (invisible content). The hero/services/
     gallery/proof children are inside `.section`, so we drive the reveal from a
     plain wrapper and, crucially, always land on opacity 1 when the timeline is
     unavailable. */
  .v2-reveal {
    opacity: 0;
    transform: translate3d(0, 1.5rem, 0);
  }

  /* Only opt into the scroll timeline when it actually resolves. Any failure
     leaves content visible rather than blank. */
  @supports (animation-timeline: view()) {
    .v2-reveal {
      animation: v2-rise both var(--dur-slow) var(--ease-out);
      animation-timeline: view();
      animation-range: entry 4% cover 26%;
    }
  }

  .v2-reveal--stagger { animation-delay: calc(var(--i, 0) * 80ms); }

  /* Safety net: if a reveal never advances (timeline unsupported, element inside
     a container query context, reduced motion, JS-disabled, print), show it. */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .v2-reveal,
    .v2-intro {
      opacity: 1 !important;
      transform: none !important;
      animation: none !important;
    }
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  @media print {
    .v2-reveal, .v2-intro { opacity: 1 !important; transform: none !important; animation: none !important; }
  }

  /* Above-the-fold entrance — runs once on load instead of on scroll. Used where
     content is the first section on a page (e.g. About), so it wouldn't otherwise
     animate because it is already in view. */
  .v2-intro {
    animation: v2-rise var(--dur-slow) var(--ease-out) both;
  }
  .v2-intro--stagger { animation-delay: calc(var(--i, 0) * 90ms); }

  @keyframes v2-rise {
    from { opacity: 0; transform: translate3d(0, 1.5rem, 0); }
    to { opacity: 1; transform: none; }
  }

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

/* Design System V2: utilities.css */
@layer utilities {
  .u-center { margin-inline: auto; }
  .u-text-center { text-align: center; }
  .u-text-start { text-align: start; }
  .u-full { inline-size: 100%; }
  .u-stack { display: grid; gap: var(--space-md); }
  .u-cluster { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
  .u-hidden { display: none; }
  .u-mt-sm { margin-block-start: var(--space-sm); }
  .u-mt-md { margin-block-start: var(--space-md); }
  .u-mt-lg { margin-block-start: var(--space-lg); }
  .u-mb-sm { margin-block-end: var(--space-sm); }
  .u-mb-md { margin-block-end: var(--space-md); }
  .u-muted { color: var(--text-secondary); }
  .u-accent { color: var(--text-accent); }
  .u-balance { text-wrap: balance; }
  .u-pretty { text-wrap: pretty; }
  .u-grid-2 { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
  .u-grid-3 { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
  .u-card {
    padding: var(--space-lg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-primary);
  }
  @supports (container-type: inline-size) {
    .u-cq { container-type: inline-size; }
  }
}

.bg-emerald-800 {
  background-color: #065f46 !important;
}

.bg-gray-100 {
  background-color: #f3f4f6 !important;
}

.bg-gray-300 {
  background-color: #d1d5db !important;
}

.bg-gray-50 {
  background-color: #f9fafb !important;
}

.bg-gray-50\/50 {
  background-color: #f9fafb80 !important;
}

.bg-gray-900 {
  background-color: #111827 !important;
}

.bg-red-50\/50 {
  background-color: #fef2f280 !important;
}

.bg-red-500 {
  background-color: #ef4444 !important;
}

.bg-white {
  background-color: #ffffff !important;
}

.bg-zinc-900 {
  background-color: #18181b !important;
}

.block {
  display: block !important;
}

.border {
  border-width: 1px !important;
  border-style: solid !important;
}

.border-b {
  border-bottom-width: 1px !important;
  border-bottom-style: solid !important;
}

.border-emerald-200 {
  border-color: #a7f3d0 !important;
}

.border-gray-100 {
  border-color: #f3f4f6 !important;
}

.border-gray-200 {
  border-color: #e5e7eb !important;
}

.border-gray-300 {
  border-color: #d1d5db !important;
}

.border-red-100 {
  border-color: #fee2e2 !important;
}

.border-t {
  border-top-width: 1px !important;
  border-top-style: solid !important;
}

.fixed {
  position: fixed;
}

.flex {
  display: flex !important;
}

.flex-1 {
  flex: 1 1 0% !important;
}

.flex-col {
  flex-direction: column !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.font-bold {
  font-weight: 700 !important;
}

.font-light {
  font-weight: 300 !important;
}

.font-medium {
  font-weight: 500 !important;
}

.font-semibold {
  font-weight: 600 !important;
}

.gap-10 {
  gap: 2.5rem !important;
}

.gap-12 {
  gap: 3rem !important;
}

.gap-2 {
  gap: 0.5rem !important;
}

.gap-3 {
  gap: 0.75rem !important;
}

.gap-4 {
  gap: 1rem !important;
}

.gap-6 {
  gap: 1.5rem !important;
}

.gap-8 {
  gap: 2rem !important;
}

.gap-x-12 {
  column-gap: 3rem !important;
}

.gap-x-6 {
  column-gap: 1.5rem !important;
}

.gap-x-8 {
  column-gap: 2rem !important;
}

.gap-y-2 {
  row-gap: 0.5rem !important;
}

.grid {
  display: grid !important;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.h-12 {
  height: 3rem !important;
}

.h-16 {
  height: 4rem !important;
}

.h-4 {
  height: 1rem !important;
}

.h-5 {
  height: 1.25rem !important;
}

.h-full {
  height: 100% !important;
}

.hidden {
  display: none !important;
}

.hover\:bg-emerald-50:hover {
  background-color: #ecfdf5 !important;
}

.hover\:bg-gray-100:hover {
  background-color: #f3f4f6 !important;
}

.hover\:bg-gray-50:hover {
  background-color: #f9fafb !important;
}

.hover\:bg-white:hover {
  background-color: #ffffff !important;
}

.hover\:bg-zinc-800:hover {
  background-color: #27272a !important;
}

.hover\:border-emerald-300:hover {
  border-color: #6ee7b7 !important;
}

.hover\:border-gray-400:hover {
  border-color: #9ca3af !important;
}

.hover\:shadow-sm:hover {
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
}

.hover\:text-gray-900:hover {
  color: #111827 !important;
}

.inline-block {
  display: inline-block !important;
}

.inline-flex {
  display: inline-flex !important;
}

.items-center {
  align-items: center !important;
}

.items-start {
  align-items: flex-start !important;
}

.justify-between {
  justify-content: space-between !important;
}

.justify-center {
  justify-content: center !important;
}

.leading-none {
  line-height: 1 !important;
}

.leading-relaxed {
  line-height: 1.625 !important;
}

.max-w-2xl {
  max-width: 42rem !important;
}

.max-w-3xl {
  max-width: 48rem !important;
}

.max-w-4xl {
  max-width: 56rem !important;
}

.max-w-5xl {
  max-width: 64rem !important;
}

.max-w-7xl {
  max-width: 80rem !important;
}

.max-w-md {
  max-width: 28rem !important;
}

.mb-1 {
  margin-bottom: 0.25rem !important;
}

.mb-10 {
  margin-bottom: 2.5rem !important;
}

.mb-12 {
  margin-bottom: 3rem !important;
}

.mb-2 {
  margin-bottom: 0.5rem !important;
}

.mb-3 {
  margin-bottom: 0.75rem !important;
}

.mb-4 {
  margin-bottom: 1rem !important;
}

.mb-5 {
  margin-bottom: 1.25rem !important;
}

.mb-6 {
  margin-bottom: 1.5rem !important;
}

.mb-8 {
  margin-bottom: 2rem !important;
}

.ml-2 {
  margin-left: 0.5rem !important;
}

.mr-2 {
  margin-right: 0.5rem !important;
}

.mt-0\.5 {
  margin-top: 0.125rem !important;
}

.mt-1 {
  margin-top: 0.25rem !important;
}

.mt-10 {
  margin-top: 2.5rem !important;
}

.mt-16 {
  margin-top: 4rem !important;
}

.mt-2 {
  margin-top: 0.5rem !important;
}

.mt-3 {
  margin-top: 0.75rem !important;
}

.mt-4 {
  margin-top: 1rem !important;
}

.mt-6 {
  margin-top: 1.5rem !important;
}

.mt-8 {
  margin-top: 2rem !important;
}

.mx-2 {
  margin-left: 0.5rem !important;
  margin-right: 0.5rem !important;
}

.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

.opacity-50 {
  opacity: 0.5 !important;
}

.opacity-60 {
  opacity: 0.6 !important;
}

.opacity-70 {
  opacity: 0.7 !important;
}

.opacity-75 {
  opacity: 0.75 !important;
}

.opacity-80 {
  opacity: 0.8 !important;
}

.p-10 {
  padding: 2.5rem !important;
}

.p-3 {
  padding: 0.75rem !important;
}

.p-4 {
  padding: 1rem !important;
}

.p-5 {
  padding: 1.25rem !important;
}

.p-6 {
  padding: 1.5rem !important;
}

.p-8 {
  padding: 2rem !important;
}

.pb-4 {
  padding-bottom: 1rem !important;
}

.pl-1 {
  padding-left: 0.25rem !important;
}

.pl-4 {
  padding-left: 1rem !important;
}

.pt-4 {
  padding-top: 1rem !important;
}

.pt-8 {
  padding-top: 2rem !important;
}

.px-2 {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

.px-3 {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}

.px-4 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.px-6 {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

.py-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

.py-1\.5 {
  padding-top: 0.375rem !important;
  padding-bottom: 0.375rem !important;
}

.py-16 {
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}

.py-3 {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

.py-3\.5 {
  padding-top: 0.875rem !important;
  padding-bottom: 0.875rem !important;
}

.py-4 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.py-5 {
  padding-top: 1.25rem !important;
  padding-bottom: 1.25rem !important;
}

.relative {
  position: relative;
}

.rounded {
  border-radius: 0.25rem !important;
}

.rounded-2xl {
  border-radius: 1rem !important;
}

.rounded-full {
  border-radius: 9999px !important;
}

.rounded-lg {
  border-radius: 0.5rem !important;
}

.rounded-md {
  border-radius: 0.375rem !important;
}

.rounded-xl {
  border-radius: 0.75rem !important;
}

.shadow-2xl {
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25) !important;
}

.shadow-sm {
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
}

.shadow-xl {
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) !important;
}

 .space-y-10 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 2.5rem !important;
}

 .space-y-12 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 3rem !important;
}

 .space-y-2 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0.5rem !important;
}

 .space-y-3 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0.75rem !important;
}

 .space-y-4 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 1rem !important;
}

 .space-y-8 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 2rem !important;
}

.sticky {
  position: sticky;
}

.text-2xl {
  font-size: 1.5rem !important;
  line-height: 1.5 !important;
}

.text-3xl {
  font-size: 1.875rem !important;
  line-height: 1.5 !important;
}

.text-4xl {
  font-size: 2.25rem !important;
  line-height: 1.5 !important;
}

.text-center {
  text-align: center !important;
}

.text-emerald-600 {
  color: #059669 !important;
}

.text-emerald-700 {
  color: #047857 !important;
}

.text-gray-400 {
  color: #9ca3af !important;
}

.text-gray-500 {
  color: #6b7280 !important;
}

.text-gray-600 {
  color: #4b5563 !important;
}

.text-gray-700 {
  color: #374151 !important;
}

.text-gray-800 {
  color: #1f2937 !important;
}

.text-gray-900 {
  color: #111827 !important;
}

.text-green-600 {
  color: #16a34a !important;
}

.text-green-700 {
  color: #15803d !important;
}

.text-left {
  text-align: left !important;
}

.text-lg {
  font-size: 1.125rem !important;
  line-height: 1.5 !important;
}

.text-red-500 {
  color: #ef4444 !important;
}

.text-red-700 {
  color: #b91c1c !important;
}

.text-sm {
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
}

.text-white {
  color: #ffffff !important;
}

.text-xl {
  font-size: 1.25rem !important;
  line-height: 1.5 !important;
}

.text-xs {
  font-size: 0.75rem !important;
  line-height: 1.5 !important;
}

.tracking-\[2\.5px\] {
  letter-spacing: 2.5px !important;
}

.tracking-tight {
  letter-spacing: -0.025em !important;
}

.tracking-tighter {
  letter-spacing: -0.05em !important;
}

.tracking-wide {
  letter-spacing: 0.025em !important;
}

.tracking-wider {
  letter-spacing: 0.05em !important;
}

.tracking-widest {
  letter-spacing: 0.1em !important;
}

.transition {
  transition: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter 150ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.transition-all {
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.transition-colors {
  transition: color, background-color, border-color, text-decoration-color, fill, stroke 150ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.uppercase {
  text-transform: uppercase !important;
}

.w-12 {
  width: 3rem !important;
}

.w-16 {
  width: 4rem !important;
}

.w-5 {
  width: 1.25rem !important;
}

.w-full {
  width: 100% !important;
}

.z-10 {
  z-index: 10 !important;
}

@media (min-width: 640px) {
.sm\:flex-row {
  flex-direction: row !important;
}
}

@media (min-width: 640px) {
.sm\:grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
}

@media (min-width: 640px) {
.sm\:items-center {
  align-items: center !important;
}
}

@media (min-width: 768px) {
.md\:block {
  display: block !important;
}
}

@media (min-width: 768px) {
.md\:flex-row {
  flex-direction: row !important;
}
}

@media (min-width: 768px) {
.md\:grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}

@media (min-width: 768px) {
.md\:grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
}

@media (min-width: 768px) {
.md\:hidden {
  display: none !important;
}
}

@media (min-width: 768px) {
.md\:justify-between {
  justify-content: space-between !important;
}
}

@media (min-width: 768px) {
.md\:px-8 {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}
}

@media (min-width: 768px) {
.md\:w-64 {
  width: 16rem !important;
}
}

@media (min-width: 1024px) {
.lg\:col-span-2 {
  grid-column: span 2 / span 2 !important;
}
}

@media (min-width: 1024px) {
.lg\:col-span-3 {
  grid-column: span 3 / span 3 !important;
}
}

@media (min-width: 1024px) {
.lg\:col-span-5 {
  grid-column: span 5 / span 5 !important;
}
}

@media (min-width: 1024px) {
.lg\:col-span-7 {
  grid-column: span 7 / span 7 !important;
}
}

@media (min-width: 1024px) {
.lg\:grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
}
}

@media (min-width: 1024px) {
.lg\:grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}

@media (min-width: 1024px) {
.lg\:grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
}

@media (min-width: 1024px) {
.lg\:grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
}

@media (min-width: 1024px) {
.lg\:mt-0 {
  margin-top: 0 !important;
}
}

@media (min-width: 1024px) {
.lg\:pl-6 {
  padding-left: 1.5rem !important;
}
}

@media (min-width: 1024px) {
.lg\:text-\[42px\] {
  font-size: 42px !important;
}
}