/* ════════════════════════════════════════════════════════════════════════
   C DELL STUDIO TEMPLATE — scoped stylesheet  (GENERATED, do not edit by hand)
   Source: content/templates/c-dell-studio/styles/_source/*.css
   Regenerate: node scripts/build-c-dell-studio-css.mjs
   Everything is scoped under the .cds root applied by <CDellScope>.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 01-colors.css ── */
/* C-Dell color tokens.
   Brand teal sampled from the logo (#0B4656); paper sampled from logo background (#FBFBF5). */
.cds {
  /* ----- Base: petrol teal ramp (brand) ----- */
  --teal-950: #04161C;
  --teal-900: #062430;
  --teal-800: #083442;
  --teal-700: #0B4656; /* brand — logo color */
  --teal-600: #0E5A6E;
  --teal-500: #15748C;
  --teal-400: #2E94AC;
  --teal-300: #67B6C8;
  --teal-200: #A7D4DF;
  --teal-100: #D7EAEF;
  --teal-050: #EEF6F8;

  /* ----- Base: paper neutrals (warm off-white) ----- */
  --paper-0: #FDFDF8;
  --paper-1: #FBFBF5; /* page background — logo background */
  --paper-2: #F2F1E8;
  --paper-3: #E6E4D8;
  --paper-4: #CFCDBF;

  /* ----- Base: ink neutrals (dark sections) ----- */
  --ink-1: #0A1216;   /* near-black, teal-cast */
  --ink-2: #101C22;
  --ink-3: #18272F;
  --ink-4: #2A3B44;

  /* ----- Base: copper accent (warm signal, used sparingly) ----- */
  --copper-600: #A8532B;
  --copper-500: #C4683A;
  --copper-400: #DA8254;
  --copper-300: #EBA985;

  /* ----- Base: grays on paper ----- */
  --gray-700: #3D4543;
  --gray-500: #6B736F;
  --gray-300: #A9AFA8;

  /* ----- Semantic: surfaces ----- */
  --bg-page: var(--paper-1);
  --bg-inverse: var(--ink-1);
  --surface-card: var(--paper-0);
  --surface-card-inverse: var(--ink-2);
  --surface-raised: #FFFFFF;
  --surface-brand: var(--teal-700);
  --surface-tint: var(--teal-050);

  /* ----- Semantic: text ----- */
  --text-heading: var(--teal-950);
  --text-body: var(--gray-700);
  --text-muted: var(--gray-500);
  --text-on-dark: #F4F6F4;
  --text-on-dark-muted: #93A3A8;
  --text-brand: var(--teal-700);
  --text-accent: var(--copper-500);

  /* ----- Semantic: interactive ----- */
  --accent: var(--teal-700);
  --accent-hover: var(--teal-600);
  --accent-press: var(--teal-800);
  --accent-warm: var(--copper-500);
  --accent-warm-hover: var(--copper-400);
  --focus-ring: var(--teal-400);

  /* ----- Semantic: lines ----- */
  --border-subtle: rgba(10, 18, 22, 0.12);
  --border-strong: rgba(10, 18, 22, 0.28);
  --border-on-dark: rgba(244, 246, 244, 0.16);
  --border-on-dark-strong: rgba(244, 246, 244, 0.34);

  /* ----- Semantic: feedback ----- */
  --success: #2E7D4F;
  --warning: #B07A1E;
  --danger: #B0402E;
}


/* ── 02-typography.css ── */
/* C-Dell typography tokens. */
.cds {
  /* ----- Families ----- */
  --font-display: 'Archivo', 'Helvetica Neue', sans-serif;
  --font-body: 'Archivo', 'Helvetica Neue', sans-serif;
  --font-serif-accent: 'Instrument Serif', Georgia, serif;  /* italic emphasis words only */
  --font-mono: 'Space Mono', 'Courier New', monospace;       /* indices, labels, coordinates */
  --font-wordmark: 'Poppins', sans-serif;                    /* logo recreations only */

  /* ----- Sizes (rem) ----- */
  --text-mega: clamp(4rem, 11vw, 11rem);     /* full-bleed hero wordmark rows */
  --text-display: clamp(3rem, 6vw, 5.5rem);  /* hero headline */
  --text-h1: 3rem;
  --text-h2: 2.25rem;
  --text-h3: 1.5rem;
  --text-h4: 1.125rem;
  --text-lede: 1.25rem;
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-caption: 0.75rem;

  /* ----- Weights ----- */
  --weight-black: 900;   /* mega / display caps */
  --weight-extrabold: 800;
  --weight-bold: 700;
  --weight-semibold: 600;
  --weight-medium: 500;
  --weight-regular: 400;

  /* ----- Leading ----- */
  --leading-mega: 0.86;
  --leading-display: 0.95;
  --leading-heading: 1.1;
  --leading-body: 1.6;

  /* ----- Tracking ----- */
  --tracking-mega: -0.03em;     /* huge caps tighten */
  --tracking-display: -0.02em;
  --tracking-body: 0;
  --tracking-label: 0.14em;     /* mono caps labels widen */
}


/* ── 03-spacing.css ── */
/* C-Dell spacing, radii, shadows, motion. */
.cds {
  /* ----- Spacing (4px base) ----- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;   /* section rhythm on marketing pages */

  /* ----- Container ----- */
  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);

  /* ----- Radii ----- */
  --radius-xs: 2px;    /* tags, hairline chips */
  --radius-sm: 6px;    /* buttons, inputs */
  --radius-md: 12px;   /* cards */
  --radius-lg: 20px;   /* media frames, large cards */
  --radius-pill: 999px;

  /* ----- Borders ----- */
  --border-hairline: 1px;

  /* ----- Shadows (used sparingly; brand leans on flat surfaces + hairlines) ----- */
  --shadow-card: 0 1px 2px rgba(10, 18, 22, 0.06), 0 8px 24px rgba(10, 18, 22, 0.07);
  --shadow-raised: 0 2px 6px rgba(10, 18, 22, 0.10), 0 20px 48px rgba(10, 18, 22, 0.16);
  --shadow-inverse-glow: 0 0 0 1px var(--border-on-dark), 0 24px 64px rgba(0, 0, 0, 0.5);

  /* ----- Motion ----- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */ /* default: fast-out, settle */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 150ms; /* @kind other */ /* hovers, presses */
  --dur-med: 300ms; /* @kind other */ /* reveals, accordions */
  --dur-slow: 700ms; /* @kind other */ /* hero entrances, image scale-in */
}


/* ── 04-base.css ── */
/* C-Dell base element styles. */
.cds, .cds * { box-sizing: border-box; }

.cds { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

.cds {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-body);
  background: var(--bg-page);
}

.cds h1, .cds h2, .cds h3, .cds h4 {
  font-family: var(--font-display);
  color: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-display);
  margin: 0 0 var(--space-4);
}

.cds p { margin: 0 0 var(--space-4); text-wrap: pretty; }

.cds a { color: var(--text-brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cds a:hover { color: var(--accent-hover); }

.cds ::selection { background: var(--teal-200); color: var(--teal-950); }

.cds :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Serif accent — italic emphasis inside display headlines */
.cds .cd-serif { font-family: var(--font-serif-accent); font-style: italic; font-weight: 400; letter-spacing: 0; }

/* Mono label — caps, wide tracking, used for eyebrows / indices / coordinates */
.cds .cd-label {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}


/* ── 05-components.css ── */
/* C-Dell component classes — consumed by the React primitives in components/. */

/* ============ Buttons ============ */
.cds .cd-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-small);
  line-height: 1;
  border: var(--border-hairline) solid transparent;
  border-radius: var(--radius-pill);
  padding: 0.875rem 1.5rem;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.cds .cd-btn:active { transform: scale(0.98); }
.cds .cd-btn[disabled] { opacity: 0.45; pointer-events: none; }

.cds .cd-btn--primary { background: var(--accent); color: var(--text-on-dark); }
.cds .cd-btn--primary:hover { background: var(--accent-hover); color: var(--text-on-dark); }
.cds .cd-btn--primary:active { background: var(--accent-press); }

.cds .cd-btn--warm { background: var(--accent-warm); color: #FFF8F2; }
.cds .cd-btn--warm:hover { background: var(--accent-warm-hover); color: #FFF8F2; }

.cds .cd-btn--outline { background: transparent; color: var(--text-heading); border-color: var(--border-strong); }
.cds .cd-btn--outline:hover { border-color: var(--text-heading); color: var(--text-heading); }

.cds .cd-btn--ghost { background: transparent; color: var(--text-heading); }
.cds .cd-btn--ghost:hover { background: var(--paper-2); color: var(--text-heading); }

/* On dark sections */
.cds .cd-btn--inverse { background: var(--text-on-dark); color: var(--ink-1); }
.cds .cd-btn--inverse:hover { background: #FFFFFF; color: var(--ink-1); }
.cds .cd-btn--outline-inverse { background: transparent; color: var(--text-on-dark); border-color: var(--border-on-dark-strong); }
.cds .cd-btn--outline-inverse:hover { border-color: var(--text-on-dark); color: var(--text-on-dark); }

.cds .cd-btn--sm { padding: 0.625rem 1.125rem; font-size: var(--text-caption); }
.cds .cd-btn--lg { padding: 1.125rem 2rem; font-size: var(--text-body); }

.cds .cd-btn__arrow { display: inline-block; transition: transform var(--dur-fast) var(--ease-out); }
.cds .cd-btn:hover .cd-btn__arrow { transform: translateX(3px); }

/* ============ Arrow link ============ */
.cds .cd-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-semibold);
  font-size: var(--text-small);
  color: var(--text-heading);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--border-strong);
  transition: color var(--dur-fast) var(--ease-out);
}
.cds .cd-arrow-link:hover { color: var(--accent); }
.cds .cd-arrow-link .cd-btn__arrow { font-family: var(--font-body); }
.cds .cd-arrow-link--inverse { color: var(--text-on-dark); text-decoration-color: var(--border-on-dark-strong); }
.cds .cd-arrow-link--inverse:hover { color: #FFFFFF; }

/* ============ Tags ============ */
.cds .cd-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.04em;
  color: var(--text-body);
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 0.375rem 0.75rem;
  background: transparent;
  white-space: nowrap;
}
.cds .cd-tag--filled { background: var(--paper-2); border-color: transparent; }
.cds .cd-tag--brand { color: var(--text-brand); border-color: var(--teal-200); background: var(--teal-050); }
.cds .cd-tag--inverse { color: var(--text-on-dark-muted); border-color: var(--border-on-dark); }

/* ============ Eyebrow ============ */
.cds .cd-eyebrow {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
}
.cds .cd-eyebrow__index { color: var(--text-accent); }
.cds .cd-eyebrow--inverse { color: var(--text-on-dark-muted); }

/* ============ Inputs ============ */
.cds .cd-field { display: flex; flex-direction: column; gap: var(--space-2); }
.cds .cd-field__label {
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cds .cd-input, .cds .cd-textarea {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--text-heading);
  background: var(--surface-raised);
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.875rem 1rem;
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.cds .cd-input::placeholder, .cds .cd-textarea::placeholder { color: var(--gray-300); }
.cds .cd-input:hover, .cds .cd-textarea:hover { border-color: var(--border-strong); }
.cds .cd-input:focus, .cds .cd-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--teal-100);
}
.cds .cd-input--error { border-color: var(--danger); }
.cds .cd-textarea { resize: vertical; min-height: 120px; }
.cds .cd-field__hint { font-size: var(--text-caption); color: var(--text-muted); }
.cds .cd-field__hint--error { color: var(--danger); }

/* ============ Cards ============ */
.cds .cd-card {
  background: var(--surface-card);
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}
.cds .cd-card--inverse { background: var(--surface-card-inverse); border-color: var(--border-on-dark); color: var(--text-on-dark-muted); }
.cds .cd-card--flat { border: none; background: var(--paper-2); }

/* ============ Project card ============ */
.cds .cd-project-card { display: block; text-decoration: none; color: inherit; cursor: pointer; }
.cds .cd-project-card__media {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--paper-3);
  margin-bottom: var(--space-4);
}
.cds .cd-project-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}
.cds .cd-project-card:hover .cd-project-card__media img { transform: scale(1.04); }
.cds .cd-project-card__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.cds .cd-project-card__title { font-size: var(--text-h4); font-weight: var(--weight-bold); color: var(--text-heading); margin: 0; }
.cds .cd-project-card__meta { font-size: var(--text-small); color: var(--text-muted); margin: var(--space-1) 0 0; }
.cds .cd-project-card__year { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--text-muted); }
.cds .cd-project-card--inverse .cd-project-card__title { color: var(--text-on-dark); }
.cds .cd-project-card--inverse .cd-project-card__meta,
.cds .cd-project-card--inverse .cd-project-card__year { color: var(--text-on-dark-muted); }

/* ============ Pricing card ============ */
.cds .cd-pricing-card {
  display: flex; flex-direction: column; gap: var(--space-4);
  background: var(--surface-card-inverse);
  border: var(--border-hairline) solid var(--border-on-dark);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  color: var(--text-on-dark-muted);
}
.cds .cd-pricing-card--featured { background: var(--surface-brand); border-color: transparent; }
.cds .cd-pricing-card__name { font-size: var(--text-small); font-weight: var(--weight-semibold); color: var(--text-on-dark); margin: 0; }
.cds .cd-pricing-card__price { font-size: var(--text-h1); font-weight: var(--weight-extrabold); letter-spacing: var(--tracking-display); color: var(--text-on-dark); line-height: 1; }
.cds .cd-pricing-card__price small { font-size: var(--text-small); font-weight: var(--weight-regular); color: var(--text-on-dark-muted); letter-spacing: 0; }
.cds .cd-pricing-card__desc { font-size: var(--text-small); margin: 0; }
.cds .cd-pricing-card__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-small); }
.cds .cd-pricing-card__list li { display: flex; gap: var(--space-2); align-items: baseline; }
.cds .cd-pricing-card__check { color: var(--copper-300); font-family: var(--font-mono); }
.cds .cd-pricing-card--featured .cd-pricing-card__check { color: var(--teal-200); }
.cds .cd-pricing-card__cta { margin-top: auto; }

/* ============ Navbar ============ */
.cds .cd-nav {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  padding: var(--space-4) var(--container-pad);
}
.cds .cd-nav__brand { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.cds .cd-nav__wordmark { font-family: var(--font-wordmark); font-weight: var(--weight-bold); font-size: 1.25rem; letter-spacing: -0.01em; color: var(--text-heading); }
.cds .cd-nav__links { display: flex; align-items: center; gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
.cds .cd-nav__link {
  font-size: var(--text-small); font-weight: var(--weight-medium);
  color: var(--text-body); text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.cds .cd-nav__link:hover { color: var(--text-heading); }
.cds .cd-nav__link--active { color: var(--text-heading); font-weight: var(--weight-semibold); }
.cds .cd-nav--inverse .cd-nav__wordmark { color: var(--text-on-dark); }
.cds .cd-nav--inverse .cd-nav__link { color: var(--text-on-dark-muted); }
.cds .cd-nav--inverse .cd-nav__link:hover, .cds .cd-nav--inverse .cd-nav__link--active { color: var(--text-on-dark); }

/* ============ Section heading ============ */
.cds .cd-section-heading { display: flex; flex-direction: column; gap: var(--space-4); max-width: 720px; }
.cds .cd-section-heading__title {
  font-size: var(--text-h2); font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-display); line-height: var(--leading-heading);
  color: var(--text-heading); margin: 0;
}
.cds .cd-section-heading__lede { font-size: var(--text-lede); line-height: 1.5; color: var(--text-muted); margin: 0; }
.cds .cd-section-heading--inverse .cd-section-heading__title { color: var(--text-on-dark); }
.cds .cd-section-heading--inverse .cd-section-heading__lede { color: var(--text-on-dark-muted); }

/* ============ Footer ============ */
.cds .cd-footer { background: var(--bg-inverse); color: var(--text-on-dark-muted); padding: var(--space-9) var(--container-pad) var(--space-6); }
.cds .cd-footer__statement {
  font-size: var(--text-h2); font-weight: var(--weight-extrabold); letter-spacing: var(--tracking-display);
  color: var(--text-on-dark); margin: 0 0 var(--space-8); line-height: var(--leading-heading);
}
.cds .cd-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-6); margin-top: var(--space-8); margin-bottom: var(--space-8); }
.cds .cd-footer__col h4 {
  font-family: var(--font-mono); font-size: var(--text-caption); text-transform: uppercase;
  letter-spacing: var(--tracking-label); color: var(--text-on-dark-muted); margin: 0 0 var(--space-3);
}
.cds .cd-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.cds .cd-footer__col a { color: var(--text-on-dark); text-decoration: none; font-size: var(--text-small); }
.cds .cd-footer__col a:hover { color: var(--teal-300); }
.cds .cd-footer__bottom {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  border-top: var(--border-hairline) solid var(--border-on-dark);
  padding-top: var(--space-5);
  font-size: var(--text-caption); font-family: var(--font-mono);
}


/* ── 06-site.css ── */
/* c-dell site layer — composes with the C-Dell design-system tokens + component CSS. */

.cds {
  /* user-directed bright accents — oklch-derived amplifications of the brand copper */
  --flame-500: #E8581F;
  --flame-600: #C9461A;
  --ember-500: #C12A12;
  --ember-600: #A52310;
}

.cds { scroll-behavior: auto; }
.cds { margin: 0; background: var(--bg-page); }

/* ---------- copper-off override (Tweaks) ---------- */
.cds.cd-no-copper {
  --text-accent: var(--teal-400);
  --accent-warm: var(--teal-600);
  --accent-warm-hover: var(--teal-500);
  --copper-300: var(--teal-300);
  --copper-400: var(--teal-400);
  --copper-500: var(--teal-500);
  --copper-600: var(--teal-600);
}

/* ---------- layout primitives ---------- */
.cds .cdx-container { max-width: var(--container-max); margin: 0 auto; padding-left: var(--container-pad); padding-right: var(--container-pad); }
.cds .cdx-section { padding: var(--space-10) 0; position: relative; }
.cds .cdx-section--tight { padding: var(--space-9) 0; }
.cds .cdx-ink { background: var(--ink-1); color: var(--text-on-dark-muted); }
.cds .cdx-ink2 { background: var(--ink-2); color: var(--text-on-dark-muted); }
.cds .cdx-paper { background: var(--paper-1); }
.cds .cdx-paper2 { background: var(--paper-2); }
.cds .cdx-brandband { background: var(--surface-brand); }
.cds .cdx-rule { border: 0; border-top: var(--border-hairline) solid var(--border-subtle); margin: 0; }
.cds .cdx-ink .cdx-rule, .cds .cdx-ink2 .cdx-rule { border-top-color: var(--border-on-dark); }

/* ---------- nav shell ---------- */
.cds .cdx-nav-shell { position: fixed; top: 0; left: 0; right: 0; z-index: 120; transition: background var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out); }
.cds .cdx-nav-shell.is-scrolled { background: var(--paper-1) !important; box-shadow: 0 1px 0 var(--border-subtle); transition: none; }
.cds .cdx-nav-shell.is-solid-ink { background: var(--ink-1); box-shadow: 0 1px 0 var(--border-on-dark); }

/* ---------- monogram logo (recolors via currentColor) ---------- */
.cds .cd-nav__brand { color: var(--teal-700); display: inline-flex; align-items: center; }
.cds .cd-nav--inverse .cd-nav__brand { color: #fff; }
.cds .cdx-logo { height: 30px; width: auto; display: block; color: inherit; }
.cds .cdx-logo path { transition: fill var(--dur-med) var(--ease-out); }
@media (max-width: 600px) { .cds .cdx-logo { height: 26px; } }

/* ---------- grain overlay ---------- */
.cds #cdx-grain { position: fixed; inset: 0; z-index: 220; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay; }

/* ---------- type ---------- */
.cds .cdx-mega {
  font-family: var(--font-display); font-weight: var(--weight-black);
  font-size: var(--text-mega); line-height: var(--leading-mega);
  letter-spacing: var(--tracking-mega); text-transform: uppercase;
  color: var(--text-heading); margin: 0; text-wrap: balance;
}
.cds .cdx-display {
  font-family: var(--font-display); font-weight: var(--weight-black);
  font-size: var(--text-display); line-height: var(--leading-display);
  letter-spacing: var(--tracking-display); text-transform: uppercase;
  color: var(--text-heading); margin: 0; text-wrap: balance;
}
.cds .cdx-mega .cd-serif, .cds .cdx-display .cd-serif { text-transform: none; font-weight: 400; }
.cds .cdx-ink .cdx-mega, .cds .cdx-ink .cdx-display, .cds .cdx-ink2 .cdx-mega, .cds .cdx-ink2 .cdx-display, .cds .cdx-brandband .cdx-mega, .cds .cdx-brandband .cdx-display { color: var(--text-on-dark); }
.cds .cdx-lede { font-size: var(--text-lede); line-height: 1.5; color: var(--text-muted); max-width: 560px; margin: 0; text-wrap: pretty; }
.cds .cdx-ink .cdx-lede, .cds .cdx-ink2 .cdx-lede { color: var(--text-on-dark-muted); }
.cds .cdx-body { font-size: var(--text-body); line-height: var(--leading-body); color: var(--text-body); margin: 0; text-wrap: pretty; }
.cds .cdx-ink .cdx-body, .cds .cdx-ink2 .cdx-body { color: var(--text-on-dark-muted); }
.cds .cdx-mono { font-family: var(--font-mono); font-size: var(--text-caption); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-muted); }
.cds .cdx-ink .cdx-mono, .cds .cdx-ink2 .cdx-mono, .cds .cdx-brandband .cdx-mono { color: var(--text-on-dark-muted); }

/* split-line wrappers for GSAP entrances */
.cds .cdx-line { display: block; overflow: hidden; }
.cds .cdx-line > span { display: block; will-change: transform; }

/* ---------- loader ---------- */
.cds #cdx-loader { position: fixed; inset: 0; background: var(--ink-1); z-index: 400; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); }
.cds #cdx-loader .cdx-loader-logo { width: clamp(140px, 24vw, 240px); height: auto; color: var(--paper-1); }
.cds #cdx-loader .cdx-mono { color: var(--text-on-dark-muted); }

/* ---------- hero ---------- */
.cds .cdx-hero { position: relative; height: 100vh; min-height: 620px; overflow: hidden; background: var(--ink-1); display: flex; align-items: flex-end; }
.cds .cdx-hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Readability scrim over the WebGL world. The reference hero uses NO CSS scrim
   (it relies on the in-shader photo dim), so this stays minimal and WARM-NEUTRAL
   — not the old cold navy, which fought the golden-hour grade. A whisper of dark
   at the very top keeps the transparent navbar legible; the middle is fully
   clear so the warm sky + particles pop; a soft warm-dark vignette at the bottom
   anchors the headline + lede. */
.cds .cdx-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(14, 11, 8, 0.24) 0%, rgba(14, 11, 8, 0) 26%, rgba(14, 11, 8, 0) 55%, rgba(14, 11, 8, 0.58) 100%);
}
/* Hero eyebrow rides the photo (not solid ink), so the default cool-grey muted
   tone washes out against the warm grade. Lift it with a bright warm copper +
   a punchier index + a soft dark halo so it pops and stays legible. Scoped to
   #hero-eyebrow so the eyebrows on solid-dark sections keep their muted tone. */
.cds .cdx-hero #hero-eyebrow.cd-eyebrow {
  color: var(--copper-300);
  text-shadow: 0 1px 16px rgba(8, 12, 16, 0.6);
}
.cds .cdx-hero #hero-eyebrow .cd-eyebrow__index { color: var(--copper-400); }

.cds .cdx-hero-content { position: relative; z-index: 2; width: 100%; padding-bottom: var(--space-7); }
.cds .cdx-hero-meta { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-5); margin-top: var(--space-6); flex-wrap: wrap; }
.cds .cdx-scrollcue { display: inline-flex; align-items: center; gap: var(--space-2); }
.cds .cdx-scrollcue::after { content: ''; display: block; width: 1px; height: 36px; background: var(--border-on-dark-strong); }

/* subpage hero (shorter, paper or ink) */
.cds .cdx-pagehero { padding: calc(var(--space-10) + 64px) 0 var(--space-8); position: relative; overflow: hidden; }
/* This h1 is split into per-word spans for the GSAP entrance (web-design-lp)
   — GSAP's own SplitText docs call out text-wrap:balance as a known source
   of layout/spacing glitches once text is split into inline-block word
   units, so this h1 opts out (the shared .cdx-display default is untouched
   for every other, unsplit heading). */
.cds .cdx-lp-hero h1.cdx-display { text-wrap: pretty; }
.cds .cdx-pagehero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0.5; }
.cds .cdx-pagehero .cdx-container { position: relative; z-index: 2; }

/* ---------- statement (scrubbed word reveal) ---------- */
.cds .cdx-statement {
  font-family: var(--font-display); font-weight: var(--weight-extrabold);
  font-size: clamp(1.65rem, 3.5vw, 3.1rem); line-height: 1.18;
  letter-spacing: var(--tracking-display); color: var(--text-heading);
  max-width: 1080px; margin: 0;
}
.cds .cdx-statement .w { opacity: 0.14; }
.cds .cdx-statement .cd-serif { font-weight: 400; }

/* ---------- services rows ---------- */
.cds .cdx-service { display: grid; grid-template-columns: 88px 1.1fr 1.3fr auto; gap: var(--space-6); align-items: baseline; padding: var(--space-6) 0; border-top: 2px solid var(--text-heading); }
.cds .cdx-service h3 { font-size: var(--text-h3); font-weight: var(--weight-extrabold); letter-spacing: var(--tracking-display); color: var(--text-heading); margin: 0; }
.cds .cdx-service .cdx-service-tags { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ---------- horizontal work scroller (home) ---------- */
.cds .cdx-hscroll { overflow: hidden; }
.cds .cdx-htrack { display: flex; gap: var(--space-6); padding: 0 var(--container-pad); width: max-content; align-items: stretch; will-change: transform; }
.cds .cdx-work-tile { width: min(46vw, 620px); flex: none; display: flex; flex-direction: column; gap: var(--space-4); }
.cds .cdx-work-endcap { width: min(34vw, 420px); flex: none; display: flex; align-items: center; justify-content: center; border: var(--border-hairline) solid var(--border-on-dark); border-radius: var(--radius-lg); }

/* ---------- media frames + distortion canvas ---------- */
.cds .cdx-frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--ink-3); aspect-ratio: 4 / 3; }
.cds .cdx-frame--wide { aspect-ratio: 16 / 9; }
.cds .cdx-frame--tall { aspect-ratio: 3 / 4; }
/* Product-screenshot frame: matches the uniform 16:10 case-study screenshots so
   object-fit:cover shows each one in full (no awkward cropping). */
.cds .cdx-frame--shot { aspect-ratio: 16 / 10; }
.cds .cdx-frame .cdx-distort, .cds .cdx-frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cds .cdx-frame > img { transition: transform var(--dur-slow) var(--ease-out); }
.cds a:hover .cdx-frame > img { transform: scale(1.04); }
.cds .cdx-tile-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.cds .cdx-tile-row h3 { font-size: var(--text-h4); font-weight: var(--weight-bold); color: var(--text-on-dark); margin: 0; }
.cds .cdx-tile-row p { font-size: var(--text-small); color: var(--text-on-dark-muted); margin: var(--space-1) 0 0; }
.cds .cdx-tile-row .cdx-year { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--text-on-dark-muted); }

/* ---------- work grid (Work page) ---------- */
.cds .cdx-workgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8) var(--space-6); }
.cds .cdx-workgrid .cdx-tile-row h3 { color: var(--text-heading); }
.cds .cdx-workgrid .cdx-tile-row p, .cds .cdx-workgrid .cdx-year { color: var(--text-muted); }
.cds .cdx-work-link { display: block; text-decoration: none; color: inherit; }
.cds .cdx-work-link .cdx-frame { margin-bottom: var(--space-4); }

/* ---------- marquee (scroll-driven, CTA band) ---------- */
.cds .cdx-marquee-wrap { overflow: hidden; padding: var(--space-6) 0; }
.cds .cdx-marquee-wrap + .cdx-marquee-wrap { padding-top: 0; }
.cds .cdx-marquee { white-space: nowrap; will-change: transform; display: inline-block; }
.cds .cdx-marquee .cdx-mega { color: var(--paper-1); display: inline; }
/* secondary, smaller kinetic line that drifts the opposite way for depth */
.cds .cdx-marquee--sub { opacity: 0.85; }
.cds .cdx-marquee .cdx-display { display: inline; white-space: nowrap; font-family: var(--font-display); font-weight: var(--weight-black); text-transform: uppercase; letter-spacing: var(--tracking-display); color: rgba(251, 251, 245, 0.5); }
.cds .cdx-marquee .cdx-display .cd-serif { color: rgba(251, 251, 245, 0.74); }

/* ---------- closing CTA block (home #cta) ---------- */
.cds .cdx-cta-final { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-5); max-width: 880px; margin: var(--space-8) auto 0; }
.cds .cdx-cta-final .cdx-display { margin: 0; }
.cds .cdx-cta-final .cdx-lede { max-width: 640px; margin: 0 auto; }
.cds .cdx-cta-final__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-4); margin-top: var(--space-2); }
.cds .cdx-cta-final__locator { margin-top: var(--space-5); letter-spacing: var(--tracking-label); }

/* ---------- stats ---------- */
.cds .cdx-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.cds .cdx-stat { border-top: 2px solid currentColor; padding-top: var(--space-4); }
.cds .cdx-stat b { display: block; font-family: var(--font-display); font-weight: var(--weight-black); font-size: clamp(2.4rem, 4.5vw, 4rem); letter-spacing: var(--tracking-display); line-height: 1; color: var(--text-heading); }
.cds .cdx-ink .cdx-stat b, .cds .cdx-ink2 .cdx-stat b { color: var(--text-on-dark); }

/* ---------- about ---------- */
.cds .cdx-about-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-8); align-items: start; }
.cds .cdx-headshot { border-radius: var(--radius-lg); overflow: hidden; background: var(--paper-3); }
.cds .cdx-headshot img { width: 100%; display: block; }
.cds .cdx-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cds .cdx-facts li { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-top: var(--border-hairline) solid var(--border-subtle); font-size: var(--text-small); color: var(--text-body); }
.cds .cdx-facts li span:last-child { text-align: right; max-width: 58%; text-wrap: pretty; }
.cds .cdx-facts li .cdx-mono { white-space: nowrap; }

/* timeline */
.cds .cdx-timeline { list-style: none; margin: 0; padding: 0; }
.cds .cdx-timeline li { display: grid; grid-template-columns: 110px 1fr; gap: var(--space-5); padding: var(--space-4) 0; border-top: var(--border-hairline) solid var(--border-subtle); align-items: baseline; }

/* ---------- case study ---------- */
.cds .cdx-cs-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); border-top: var(--border-hairline) solid var(--border-subtle); padding-top: var(--space-5); }
.cds .cdx-cs-meta div b { display: block; font-size: var(--text-small); font-weight: var(--weight-semibold); color: var(--text-heading); margin-top: var(--space-1); }
.cds .cdx-ink .cdx-cs-meta { border-top-color: var(--border-on-dark); }
.cds .cdx-ink .cdx-cs-meta div b { color: var(--text-on-dark); }
.cds .cdx-quote { font-family: var(--font-serif-accent); font-style: italic; font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1.3; color: var(--text-heading); margin: 0; max-width: 880px; }
.cds .cdx-ink .cdx-quote, .cds .cdx-ink2 .cdx-quote { color: var(--text-on-dark); }

/* ---------- case-study logo lockup + tech strip (flagship platforms) ---------- */
/* Brand logos stay CRISP — never run through the distortion shader. */
.cds .cdx-cs-logo { display: inline-flex; align-items: center; gap: var(--space-3); align-self: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: var(--border-hairline) solid var(--border-on-dark); }
.cds .cdx-cs-logo img { height: 30px; width: auto; display: block; }
.cds .cdx-cs-logo__word { display: inline-flex; align-items: baseline; gap: 6px; font-family: var(--font-display); font-weight: var(--weight-black); font-size: 1.5rem; letter-spacing: var(--tracking-display); line-height: 1; color: var(--text-on-dark); }
.cds .cdx-cs-logo__word small { font-family: var(--font-mono); font-size: 0.55em; font-weight: 400; opacity: 0.8; }
.cds .cdx-cs-tech { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cds .cdx-ink .cdx-cs-tech .cd-tag { border-color: var(--border-on-dark-strong); color: var(--text-on-dark-muted); background: transparent; }

/* ---------- case-study "under the hood" capability columns ---------- */
.cds .cdx-caps { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7) var(--space-8); }
.cds .cdx-caps__group > .cdx-mono { display: block; margin-bottom: var(--space-3); color: var(--text-accent); }
.cds .cdx-ink .cdx-check li { color: var(--text-on-dark-muted); border-top-color: var(--border-on-dark); }
@media (max-width: 900px) { .cds .cdx-caps { grid-template-columns: 1fr; gap: var(--space-6); } }

/* ---------- portfolio tile logo overlay (Work + home rail) ---------- */
.cds .cdx-tile-media { position: relative; display: block; }
.cds .cdx-tile-logo { position: absolute; top: var(--space-4); left: var(--space-4); z-index: 2; height: 26px; width: auto; max-width: 62%; pointer-events: none; filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.55)); }
.cds .cdx-tile-wordmark { position: absolute; top: var(--space-4); left: var(--space-4); z-index: 2; pointer-events: none; font-family: var(--font-display); font-weight: var(--weight-black); font-size: var(--text-h4); letter-spacing: var(--tracking-display); line-height: 1; color: var(--paper-1); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55); }

/* ---------- founder logo lockups (About + Services) ---------- */
.cds .cdx-founder-logos { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-7); }
.cds .cdx-founder-logo { display: inline-flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; text-decoration: none; }
.cds .cdx-founder-logo img { height: 40px; width: auto; display: block; opacity: 0.92; transition: transform var(--dur-med) var(--ease-out), opacity var(--dur-med) var(--ease-out); }
.cds .cdx-founder-logo:hover img { transform: translateY(-2px); opacity: 1; }
.cds .cdx-founder-logo .cdx-mono { color: var(--text-on-dark-muted); }
.cds .cdx-founder-logos--inline { align-items: center; gap: var(--space-6); }
.cds .cdx-founder-logos--inline .cdx-founder-logo { flex-direction: row; align-items: center; }

/* ---------- services: platform-builds capability grid ---------- */
.cds .cdx-platform-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.cds .cdx-platform-cap { display: flex; flex-direction: column; gap: var(--space-2); border-top: 2px solid var(--border-on-dark-strong); padding-top: var(--space-4); }
.cds .cdx-platform-cap .cdx-mono { color: var(--text-accent); }
.cds .cdx-platform-cap h3 { margin: 0; font-size: var(--text-h4); font-weight: var(--weight-bold); color: var(--text-on-dark); }
.cds .cdx-platform-cap .cdx-body { color: var(--text-on-dark-muted); }

/* ---------- service cards (services hub + service-detail related/proof) ---------- */
.cds .cdx-svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.cds .cdx-svc-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); border: var(--border-hairline) solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--paper-0); text-decoration: none; color: inherit; transition: transform var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out); }
.cds .cdx-svc-card .cdx-mono { color: var(--text-accent); }
.cds .cdx-svc-card h3 { margin: 0; font-size: var(--text-h4); font-weight: var(--weight-bold); color: var(--text-heading); }
.cds .cdx-svc-card .cdx-body { color: var(--text-body); flex: 1 1 auto; }
.cds .cdx-svc-card .cd-arrow-link { margin-top: var(--space-2); }
.cds .cdx-svc-card:hover { transform: translateY(-4px); border-color: var(--text-accent); box-shadow: 0 18px 40px -24px rgba(11, 70, 86, 0.45); }
.cds .cdx-svc-card--inverse { background: var(--ink-2); border-color: var(--border-on-dark); }
.cds .cdx-svc-card--inverse h3 { color: var(--text-on-dark); }
.cds .cdx-svc-card--inverse .cdx-body { color: var(--text-on-dark-muted); }
.cds .cdx-svc-card--inverse:hover { border-color: var(--border-on-dark-strong); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.5); }
@media (max-width: 1100px) { .cds .cdx-svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cds .cdx-svc-grid { grid-template-columns: 1fr; } }

/* ---------- footer "founder of" strip ---------- */
.cds .cd-footer__founded { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); padding: var(--space-5) 0; border-top: var(--border-hairline) solid var(--border-on-dark); }
.cds .cd-footer__founded .cdx-mono { color: var(--text-on-dark-muted); }
.cds .cd-footer__founded img { height: 24px; width: auto; display: block; opacity: 0.9; transition: opacity var(--dur-med) var(--ease-out); }
.cds .cd-footer__founded a:hover img { opacity: 1; }

/* ---------- pricing / faq ---------- */
.cds .cdx-pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5); align-items: stretch; }
.cds .cdx-faq details { border-top: var(--border-hairline) solid var(--border-subtle); }
.cds .cdx-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: var(--space-5) 0; font-size: var(--text-h4); font-weight: var(--weight-bold); color: var(--text-heading); }
.cds .cdx-faq summary::-webkit-details-marker { display: none; }
.cds .cdx-faq summary::after { content: '+'; font-family: var(--font-mono); color: var(--text-accent); transition: transform var(--dur-fast) var(--ease-out); }
.cds .cdx-faq details[open] summary::after { content: '–'; }
.cds .cdx-faq details p { margin: 0; padding: 0 0 var(--space-5); max-width: 640px; }

/* ---------- resource-guide table of contents ---------- */
.cds .cdx-toc { list-style: none; margin: 0; padding: 0; max-width: 720px; }
.cds .cdx-toc li { padding: var(--space-4) 0; border-top: var(--border-hairline) solid var(--border-subtle); font-family: var(--font-mono); font-size: var(--text-small); letter-spacing: 0.01em; color: var(--text-body); }
.cds .cdx-toc li:last-child { border-bottom: var(--border-hairline) solid var(--border-subtle); }

/* ---------- contact ---------- */
.cds .cdx-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; }
.cds .cdx-form { display: flex; flex-direction: column; gap: var(--space-5); }
.cds .cdx-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.cds .cdx-detail-list { list-style: none; margin: 0; padding: 0; }
.cds .cdx-detail-list li { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0; border-top: var(--border-hairline) solid var(--border-subtle); font-size: var(--text-small); }
.cds .cdx-ink .cdx-detail-list li { border-top-color: var(--border-on-dark); color: var(--text-on-dark); }

/* ---------- playground ---------- */
.cds .cdx-lab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.cds .cdx-lab-card { display: flex; flex-direction: column; gap: var(--space-4); }
.cds .cdx-lab-frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--ink-2); aspect-ratio: 4 / 3; border: var(--border-hairline) solid var(--border-on-dark); }
.cds .cdx-lab-frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cds .cdx-lab-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
.cds .cdx-lab-row h3 { font-size: var(--text-h4); font-weight: var(--weight-bold); color: var(--text-on-dark); margin: 0; }
/* slider row (was an inline \3c style> in Playground.html) */
.cds .cdx-lab-slider { display: flex; align-items: center; gap: var(--space-3); }
.cds .cdx-lab-slider input[type="range"] { flex: 1; accent-color: var(--teal-400); height: 2px; cursor: pointer; }

/* ---------- misc ---------- */
.cds .cdx-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.cds .cdx-stack-2 { display: flex; flex-direction: column; gap: var(--space-2); }
.cds .cdx-stack-3 { display: flex; flex-direction: column; gap: var(--space-3); }
.cds .cdx-stack-4 { display: flex; flex-direction: column; gap: var(--space-4); }
.cds .cdx-stack-5 { display: flex; flex-direction: column; gap: var(--space-5); }
.cds .cdx-stack-6 { display: flex; flex-direction: column; gap: var(--space-6); }
.cds .cdx-stack-7 { display: flex; flex-direction: column; gap: var(--space-7); }
.cds .cdx-stack-8 { display: flex; flex-direction: column; gap: var(--space-8); }
.cds .cdx-split { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-6); flex-wrap: wrap; }
.cds .cdx-next-link { display: block; text-decoration: none; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .cds .cdx-workgrid, .cds .cdx-about-grid, .cds .cdx-contact-grid, .cds .cdx-lab-grid { grid-template-columns: 1fr; }
  .cds .cdx-pricing-grid { grid-template-columns: 1fr; }
  .cds .cdx-service { grid-template-columns: 56px 1fr; }
  .cds .cdx-service .cdx-body { grid-column: 2; }
  .cds .cdx-service .cdx-service-tags { grid-column: 2; }
  .cds .cdx-cs-meta { grid-template-columns: 1fr 1fr; }
  .cds .cdx-stats { grid-template-columns: 1fr; }
  .cds .cdx-work-tile { width: 78vw; }
  .cds .cdx-form-row { grid-template-columns: 1fr; }
  .cds .cdx-platform-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .cds .cd-nav__links { display: none; }
}
@media (max-width: 600px) {
  .cds .cdx-platform-grid { grid-template-columns: 1fr; }
}

/* ---------- story mode (homepage scroll experience) ---------- */
.cds.cdx-story { background: var(--ink-1); }
.cds .cdx-world { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; }
.cds .cdx-chapter { position: relative; z-index: 2; }
.cds .cdx-clear { background: transparent; }
.cds .cdx-statement--inverse { color: var(--text-on-dark); }
.cds .cdx-statement--inverse .w { opacity: 0.12; }
.cds .cdx-line .ch { display: inline-block; will-change: transform; }
/* Word box: keeps the per-char inline-block .ch from breaking mid-word, so the
   headline only wraps at real spaces (never "THEY HI" / "TIT OFF"). */
.cds .cdx-line .cdx-word { display: inline-block; white-space: nowrap; }

/* chapter rail */
.cds .cdx-rail { position: fixed; right: clamp(0.8rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); z-index: 115; display: flex; flex-direction: column; gap: var(--space-4); }
.cds .cdx-rail button { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--font-mono); font-size: var(--text-caption); letter-spacing: var(--tracking-label); color: var(--text-on-dark-muted); transition: color var(--dur-fast) var(--ease-out); }
.cds .cdx-rail button .cdx-rail-tick { display: block; width: 14px; height: 1px; background: currentColor; transition: width var(--dur-fast) var(--ease-out); }
.cds .cdx-rail button:hover { color: var(--text-on-dark); }
.cds .cdx-rail.on-light button { color: var(--text-muted); }
.cds .cdx-rail.on-light button:hover { color: var(--text-heading); }
.cds .cdx-rail button.is-active { color: var(--text-accent); }
.cds .cdx-rail button.is-active .cdx-rail-tick { width: 30px; }
@media (max-width: 960px) { .cds .cdx-rail { display: none; } }

/* craft chapter stepper */
.cds .cdx-craft-grid { display: grid; grid-template-columns: minmax(180px, 0.55fr) 1.45fr; gap: var(--space-8); align-items: start; }
.cds .cdx-craft-num { position: relative; height: clamp(8rem, 16vw, 13rem); }
.cds .cdx-craft-num span { position: absolute; top: 0; left: 0; font-family: var(--font-display); font-weight: var(--weight-black); font-size: clamp(8rem, 16vw, 13rem); line-height: 0.86; letter-spacing: var(--tracking-mega); color: var(--paper-3); }
@media (max-width: 960px) {
  .cds .cdx-craft-grid { grid-template-columns: 1fr; }
  .cds .cdx-craft-num { display: none; }
}

/* ---------- bright color bands (scroll-story color journey) ---------- */
.cds .cdx-band-orange { background: var(--flame-500); color: var(--ink-1); }
.cds .cdx-band-orange .cdx-mega, .cds .cdx-band-orange .cdx-display, .cds .cdx-band-orange .cd-section-heading__title, .cds .cdx-band-orange .cdx-service h3 { color: var(--ink-1); }
.cds .cdx-band-orange .cd-section-heading__lede, .cds .cdx-band-orange .cdx-lede, .cds .cdx-band-orange .cdx-body { color: var(--ink-1); }
.cds .cdx-band-orange .cdx-service h3 { color: var(--ink-1); }
.cds .cdx-band-orange .cdx-mono, .cds .cdx-band-orange .cd-eyebrow { color: rgba(10, 18, 22, 0.9); }
.cds .cdx-band-orange .cd-eyebrow__index { color: var(--ink-1); }
.cds .cdx-band-orange .cdx-service { border-top-color: var(--ink-1); }
.cds .cdx-band-orange .cd-tag { border-color: rgba(10, 18, 22, 0.4); color: var(--ink-1); background: transparent; }
.cds .cdx-band-orange .cdx-rule { border-top-color: rgba(10, 18, 22, 0.32); }
.cds .cdx-band-orange .cdx-craft-num span { color: rgba(10, 18, 22, 0.18); }
.cds .cdx-band-orange .cd-btn--outline { border-color: var(--ink-1); color: var(--ink-1); }
.cds .cdx-band-orange .cd-btn--outline:hover { background: var(--ink-1); color: var(--paper-1); }

.cds .cdx-band-ember { background: var(--ember-500); color: var(--paper-1); }
.cds .cdx-band-ember .cdx-mega, .cds .cdx-band-ember .cdx-display { color: var(--paper-1); }
.cds .cdx-band-ember .cdx-lede { color: rgba(251, 251, 245, 0.88); }
.cds .cdx-band-ember .cdx-mono { color: rgba(251, 251, 245, 0.7); }
.cds .cdx-band-ember .cdx-marquee .cdx-mega { color: var(--paper-1); }

/* on the red world backdrop, keep the statement eyebrow legible */
.cds #statement .cd-eyebrow__index { color: var(--paper-2); }

/* ---------- photo frames & location pages ---------- */
.cds .cdx-frame--photo { aspect-ratio: 16 / 9; background: var(--paper-3); }
.cds .cdx-frame--photo-tall { aspect-ratio: 4 / 5; }
.cds .cdx-frame:hover > img { transform: scale(1.04); }
.cds a.cdx-frame { display: block; }

.cds .cdx-azhero { position: relative; height: 72vh; min-height: 460px; background: var(--ink-1); overflow: hidden; }
.cds .cdx-azhero .cdx-distort { position: absolute; inset: 0; width: 100%; height: 100%; }
.cds .cdx-azhero-cue { position: absolute; right: var(--container-pad); bottom: var(--space-4); z-index: 2; }

.cds .cdx-citygrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.cds .cdx-city-card { display: flex; flex-direction: column; gap: var(--space-3); text-decoration: none; }
.cds .cdx-city-card .cdx-frame { aspect-ratio: 4 / 3; }
.cds .cdx-city-card h3 { font-size: var(--text-h4); font-weight: var(--weight-bold); color: var(--text-heading); margin: 0; }
.cds .cdx-city-card p { font-size: var(--text-small); color: var(--text-muted); margin: 0; }
.cds .cdx-ink .cdx-city-card h3 { color: var(--text-on-dark); }
.cds .cdx-ink .cdx-city-card p { color: var(--text-on-dark-muted); }

.cds .cdx-crosslinks { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-7); align-items: baseline; }

.cds .cdx-imgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.cds .cdx-imgrid .cdx-frame { aspect-ratio: 4 / 5; }

@media (max-width: 960px) {
  .cds .cdx-imgrid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- blog & resources ---------- */
.cds .cdx-postgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.cds .cdx-post-card { display: flex; flex-direction: column; gap: var(--space-3); text-decoration: none; }
.cds .cdx-post-card .cdx-frame { aspect-ratio: 16 / 10; }
.cds .cdx-post-card h3 { font-size: var(--text-h4); font-weight: var(--weight-bold); color: var(--text-heading); margin: 0; text-wrap: balance; }
.cds .cdx-post-card p { font-size: var(--text-small); color: var(--text-muted); margin: 0; text-wrap: pretty; }
/* Resource-guide covers are PDF pages — render at the true portrait Letter
   shape (816×1056 ≈ 51/66) and show the whole page (object-fit: contain) so
   the first PDF page is never cropped to a landscape sliver. The doubled-up
   selector wins the equal-specificity tie against `.cdx-post-card .cdx-frame`
   on the resources listing. */
.cds .cdx-frame--doc,
.cds .cdx-post-card .cdx-frame--doc { aspect-ratio: 51 / 66; background: var(--paper-2); }
.cds .cdx-frame--doc > img { object-fit: contain; }
.cds .cdx-prose { max-width: 720px; display: flex; flex-direction: column; gap: var(--space-5); }
.cds .cdx-prose--full { max-width: none; }
/* pager (blog + resources pagination) */
.cds .cdx-pager { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-6); }
.cds .cdx-pager__btn { background: none; border: var(--border-hairline) solid var(--border-strong); border-radius: var(--radius-pill); padding: 0.55rem 1.1rem; font-family: var(--font-mono); font-size: var(--text-caption); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-heading); cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.cds .cdx-pager__btn:hover:not(:disabled) { border-color: var(--text-heading); }
.cds .cdx-pager__btn:disabled, .cds .cdx-pager__btn--disabled { opacity: 0.35; cursor: default; pointer-events: none; }
.cds a.cdx-pager__btn { text-decoration: none; }
.cds .cdx-pager__status { font-family: var(--font-mono); font-size: var(--text-caption); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.cds .cdx-prose h2 { font-size: var(--text-h3); font-weight: var(--weight-extrabold); letter-spacing: var(--tracking-display); color: var(--text-heading); margin: var(--space-4) 0 0; }
.cds .cdx-prose p { margin: 0; font-size: var(--text-body); line-height: var(--leading-body); color: var(--text-body); text-wrap: pretty; }
.cds .cdx-prose ul { margin: 0; padding-left: 1.2em; color: var(--text-body); line-height: var(--leading-body); }
.cds .cdx-check { list-style: none; margin: 0; padding: 0; }
.cds .cdx-check li { display: flex; gap: var(--space-3); padding: var(--space-3) 0; border-top: var(--border-hairline) solid var(--border-subtle); font-size: var(--text-body); color: var(--text-body); }
.cds .cdx-check li::before { content: '✓'; font-family: var(--font-mono); color: var(--text-accent); flex: none; }
.cds .cdx-meta-row { display: flex; gap: var(--space-2) var(--space-6); flex-wrap: wrap; }
@media (max-width: 960px) { .cds .cdx-postgrid { grid-template-columns: 1fr; } }

/* ---------- mega menu ---------- */
.cds .cdx-mega-panel { position: absolute; top: 100%; left: 0; right: 0; background: var(--paper-1); border-bottom: var(--border-hairline) solid var(--border-subtle); box-shadow: var(--shadow-card); }
.cds .cdx-mega-inner { max-width: var(--container-max); margin: 0 auto; padding: var(--space-6) var(--container-pad) var(--space-7); display: grid; grid-template-columns: 1.1fr 1fr 1fr 300px; gap: var(--space-7); align-items: start; }
.cds .cdx-mega-blurb { display: flex; flex-direction: column; gap: var(--space-3); }
.cds .cdx-mega-blurb p { margin: 0; font-family: var(--font-serif-accent); font-style: italic; font-size: var(--text-h3); line-height: 1.2; color: var(--text-heading); }
.cds .cdx-mega-col { display: flex; flex-direction: column; gap: var(--space-3); }
.cds .cdx-mega-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.cds .cdx-mega-col a { text-decoration: none; color: var(--text-heading); font-weight: var(--weight-semibold); font-size: var(--text-body); transition: color var(--dur-fast) var(--ease-out); }
.cds .cdx-mega-col a .cd-btn__arrow { display: inline-block; transition: transform var(--dur-fast) var(--ease-out); color: var(--text-accent); }
.cds .cdx-mega-col a:hover { color: var(--teal-600); }
.cds .cdx-mega-col a:hover .cd-btn__arrow { transform: translateX(3px); }
.cds .cdx-mega-canvas { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius-md); overflow: hidden; background: var(--ink-1); }
.cds .cdx-mega-canvas canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (max-width: 900px) { .cds .cdx-mega-panel { display: none; } }

/* ---------- burger + mobile menu ---------- */
.cds .cdx-burger { display: none; position: absolute; top: 50%; right: var(--container-pad); transform: translateY(-50%); width: 44px; height: 44px; flex-direction: column; align-items: center; justify-content: center; gap: 7px; background: none; border: 0; cursor: pointer; padding: 0; z-index: 5; }
.cds .cdx-burger span { display: block; width: 26px; height: 2px; background: var(--ink-1); transition: background var(--dur-fast) var(--ease-out); }
.cds .cdx-burger.is-light span { background: var(--paper-1); }
.cds .cdx-mobile-menu { position: fixed; inset: 0; z-index: 340; background: var(--ink-1); overflow-y: auto; padding: var(--space-5) var(--container-pad) var(--space-8); display: flex; flex-direction: column; gap: var(--space-6); }
.cds .cdx-mm-top { display: flex; justify-content: space-between; align-items: center; }
.cds .cdx-mm-close { background: none; border: var(--border-hairline) solid var(--border-on-dark); border-radius: 999px; color: var(--paper-1); width: 44px; height: 44px; font-size: 1.5rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cds .cdx-mm-group { display: flex; flex-direction: column; gap: var(--space-3); }
.cds .cdx-mm-label { color: var(--text-on-dark-muted); }
.cds .cdx-mm-links { display: flex; flex-direction: column; }
.cds .cdx-mm-link { font-family: var(--font-display); font-weight: var(--weight-extrabold); font-size: clamp(1.6rem, 6.5vw, 2.2rem); letter-spacing: var(--tracking-display); text-transform: uppercase; color: var(--paper-1); text-decoration: none; padding: var(--space-2) 0; border-bottom: var(--border-hairline) solid var(--border-on-dark); }
.cds .cdx-mm-link:active { color: var(--copper-300); }
.cds .cdx-mm-cta { align-self: flex-start; }
@media (max-width: 720px) {
  .cds .cdx-burger { display: flex; }
  .cds .cdx-nav-shell .cd-nav .cd-btn { display: none; } /* hamburger replaces the pill on phones */
}

/* responsive tightening (mobile audit) */
@media (max-width: 600px) {
  .cds .cdx-cs-meta { grid-template-columns: 1fr; }
  .cds .cdx-stats { gap: var(--space-5); }
  .cds .cdx-service { gap: var(--space-3) var(--space-4); padding: var(--space-5) 0; }
  .cds .cdx-work-tile { width: 86vw; }
  .cds .cdx-hero { min-height: 540px; }
  .cds .cdx-timeline li { grid-template-columns: 64px 1fr; }
  .cds .cdx-postgrid--2 { grid-template-columns: 1fr !important; }
}

@media (max-width: 960px) {
  .cds .cdx-mega-inner { grid-template-columns: 1fr 1fr; }
  .cds .cdx-citygrid { grid-template-columns: 1fr; }
  .cds .cdx-azhero { height: 54vh; }
}

/* ── AEO offer funnel (/aeo) ───────────────────────────────────────────── */
.cds .cdx-bonus-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.cds .cdx-bonus-card { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.cds .cdx-ink .cdx-bonus-card { background: var(--surface-card-inverse); border-color: var(--border-on-dark); }
.cds .cdx-ink .cdx-bonus-card .cdx-body { color: var(--text-on-dark); }

.cds .cdx-checkout-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-8); align-items: start; }

.cds .cdx-bump { display: flex; gap: var(--space-3); padding: var(--space-4); cursor: pointer; align-items: flex-start; transition: border-color 0.2s ease, background 0.2s ease; }
.cds .cdx-bump--on { border-color: var(--teal-400); background: var(--teal-050); }
.cds .cdx-bump__check { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--teal-600); flex: 0 0 auto; }
.cds .cdx-bump__body { display: flex; flex-direction: column; gap: 4px; }
.cds .cdx-bump__head { display: flex; justify-content: space-between; gap: var(--space-3); align-items: baseline; }
.cds .cdx-bump__label { font-weight: 600; color: var(--text-heading); }
.cds .cdx-bump__price { font-weight: 700; color: var(--text-brand); white-space: nowrap; }
.cds .cdx-bump__desc { color: var(--text-muted); font-size: var(--text-small); }

.cds .cdx-summary { padding: var(--space-5); position: sticky; top: var(--space-6); }
.cds .cdx-summary__title { font-weight: 700; margin-bottom: var(--space-3); color: var(--text-heading); }
.cds .cdx-summary__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.cds .cdx-summary__list li { display: flex; justify-content: space-between; gap: var(--space-3); color: var(--text-body); font-size: var(--text-small); }
.cds .cdx-summary__total { display: flex; justify-content: space-between; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); font-weight: 700; font-size: var(--text-h4); color: var(--text-heading); }

.cds .cdx-cal-days { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cds .cdx-cal-day { padding: var(--space-2) var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); background: transparent; cursor: pointer; font-size: var(--text-small); color: var(--text-body); }
.cds .cdx-cal-day--active { background: var(--teal-600); color: #fff; border-color: var(--teal-600); }
.cds .cdx-cal-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: var(--space-2); margin-top: var(--space-3); }
.cds .cdx-slot { padding: var(--space-2) var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: transparent; cursor: pointer; font-size: var(--text-small); color: var(--text-body); }
.cds .cdx-slot--active { background: var(--teal-600); color: #fff; border-color: var(--teal-600); }
.cds .cdx-slot--disabled { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }

@media (max-width: 880px) {
  .cds .cdx-checkout-grid { grid-template-columns: 1fr; }
  .cds .cdx-bonus-grid { grid-template-columns: 1fr; }
  /* Value-stack summary card lives in a normal section → static on mobile. */
  .cds .cdx-summary { position: static; }
  /* Checkout summary: keep it pinned + compact so the running total stays
     visible while the buyer works through the payment step on mobile. */
  .cds .cdx-checkout-grid .cdx-summary {
    position: sticky;
    top: var(--space-3);
    z-index: 5;
    padding: var(--space-4);
    box-shadow: 0 6px 24px rgba(10, 18, 22, 0.12);
  }
}

.cds .cdx-actions--center { justify-content: center; }

/* ── AEO funnel hero — compact so the title + VSL sit above the fold ───── */
/* The shared cdx-mega (up to 11rem, for one-word wordmark rows) is far too big
   for this multi-word headline and buries the video. Scope a readable size +
   tighter rhythm here only — the global cdx-mega is untouched. */
.cds .cdx-aeo-hero {
  padding-top: calc(var(--space-5) + 64px);
  padding-bottom: var(--space-6);
}
.cds .cdx-aeo-hero > .cdx-container {
  gap: var(--space-4);
}
.cds .cdx-aeo-hero .cdx-mega {
  font-size: clamp(1.7rem, 3.6vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-transform: none;
  text-wrap: balance;
}
.cds .cdx-aeo-hero .cdx-lede {
  font-size: 1.05rem;
  line-height: 1.45;
  max-width: 640px;
}
.cds .cdx-aeo-hero .cdx-vsl {
  max-width: 720px;
  margin-top: var(--space-1);
}
@media (max-width: 768px) {
  .cds .cdx-aeo-hero {
    padding-top: calc(var(--space-4) + 56px);
    padding-bottom: var(--space-5);
  }
  .cds .cdx-aeo-hero .cdx-mega {
    font-size: clamp(1.5rem, 6.8vw, 2.1rem);
  }
}

/* ── AEO funnel — centered, uniform landing treatment ──────────────────── */
/* Center the section heading (eyebrow + title + lede) inside flagged sections.
   Card grids below keep their left-aligned body text for readability. */
.cds .cdx-aeo-center .cd-section-heading {
  align-items: center;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Centered prose block (the "shift" narrative). */
.cds .cdx-aeo-prose { max-width: 720px; margin-left: auto; margin-right: auto; text-align: center; }

/* Uniform 4-up stat strip — no orphan wrap, no per-item divider. */
.cds .cdx-aeo-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); text-align: center; }
.cds .cdx-aeo-stats .cdx-stat { border-top: none; padding-top: 0; display: flex; flex-direction: column; gap: var(--space-2); align-items: center; }

/* Balanced 3-up (6 items → 3 + 3) for "what $27 buys". */
.cds .cdx-platform-grid.cdx-aeo-grid-3 { grid-template-columns: repeat(3, 1fr); }
.cds .cdx-platform-grid.cdx-aeo-grid-3 .cdx-platform-cap { max-width: 320px; }

@media (max-width: 980px) {
  .cds .cdx-aeo-stats { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-7); }
  .cds .cdx-platform-grid.cdx-aeo-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .cds .cdx-aeo-stats { grid-template-columns: 1fr; }
  .cds .cdx-platform-grid.cdx-aeo-grid-3 { grid-template-columns: 1fr; }
}

/* ── AEO funnel — VSL (sales video) player ─────────────────────────────── */
.cds .cdx-vsl {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  max-width: 880px;
  margin: var(--space-2) auto 0;
}
.cds .cdx-vsl__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: var(--radius-lg, 14px);
  overflow: hidden;
  background: #000;
  border: 1px solid var(--border-on-dark, rgba(255, 255, 255, 0.14));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
/* Portrait source (web-design-lp's VSL) — narrower box, 9:16 frame instead of
   16:9, so a vertical video fills it with no side letterboxing. Sits in the
   video column of .cdx-lp-seo-split (text left, video right) — capped at
   phone-mockup scale so it doesn't dominate the section on mobile, where a
   9:16 box at full container width would eat the whole viewport height.
   Opt-in modifier: the AEO funnel's landscape VSLPlayer is untouched. */
.cds .cdx-vsl--portrait {
  max-width: 300px;
}
.cds .cdx-vsl--portrait .cdx-vsl__frame {
  aspect-ratio: 9 / 16;
}
.cds .cdx-vsl__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: contain;
  background: #000;
}
.cds .cdx-vsl__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  text-align: center;
  padding: var(--space-6);
  background: radial-gradient(120% 120% at 50% 0%, rgba(224, 91, 47, 0.18), rgba(8, 12, 14, 0.96));
  color: var(--text-on-dark, #fff);
}
.cds .cdx-vsl__play {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  padding-left: 4px;
  background: var(--flame-500, #e05b2f);
  color: var(--ink-1, #0a1216);
  box-shadow: 0 8px 24px rgba(224, 91, 47, 0.4);
}
.cds .cdx-vsl__placeholder-line {
  max-width: 38ch;
  color: rgba(255, 255, 255, 0.82);
}
.cds .cdx-vsl__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  text-align: center;
  padding: var(--space-6);
  background: rgba(8, 12, 14, 0.88);
  color: var(--text-on-dark, #fff);
  animation: cdx-modal-fade var(--dur-med, 0.4s) var(--ease-out, ease-out);
}
.cds .cdx-vsl__overlay-line {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.1;
  color: #fff;
}
.cds .cdx-vsl__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.cds .cdx-vsl__cta-note {
  opacity: 0.72;
}

/* ── AEO funnel — mobile sticky CTA bar ────────────────────────────────── */
.cds .cdx-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
  background: var(--ink-1, #0a1216);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.3);
  transform: translateY(0);
  transition: transform 0.3s var(--ease-out, ease-out);
}
.cds .cdx-sticky-cta--hidden {
  transform: translateY(120%);
}
/* First-paint entrance (LP only — .cdx-sticky-cta is shared with /aeo, which
   keeps its plain appearance). No fill-mode needed: the keyframe's "to"
   state already matches the resting cascade value above (translateY(0),
   opacity 1), so control hands back cleanly with zero visual jump, and the
   existing transition still owns the ongoing show/hide toggle afterward. */
@keyframes cdx-lp-sticky-cta-in {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.cds .cdx-lp-scope .cdx-sticky-cta {
  animation: cdx-lp-sticky-cta-in 0.5s var(--ease-out, ease-out);
}
.cds .cdx-sticky-cta__info {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.cds .cdx-sticky-cta__price {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: 1.4rem;
  color: var(--text-on-dark, #fff);
}
.cds .cdx-sticky-cta__note {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.6);
}
.cds .cdx-sticky-cta .cd-btn {
  flex: 0 0 auto;
}
@media (max-width: 880px) {
  .cds .cdx-sticky-cta {
    display: flex;
  }
  /* Reserve room so the fixed bar never covers a mid-page buy button. Scoped
     via :has() to ONLY pages that render the bar (the /aeo funnel) — other
     c-dell pages get no extra bottom padding. */
  .cds .cds:has(.cdx-sticky-cta) {
    padding-bottom: calc(3.5rem + var(--space-3) * 2 + env(safe-area-inset-bottom));
  }
}

/* ── AEO funnel — illustrative AI-answer mock (blind spot) ─────────────── */
.cds .cdx-aichat {
  max-width: 560px;
  margin: var(--space-4) auto 0;
  text-align: left;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 14px);
  background: var(--surface-card, #fff);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  box-shadow: 0 12px 32px rgba(10, 18, 22, 0.08);
}
.cds .cdx-aichat__q {
  align-self: flex-end;
  max-width: 85%;
  background: var(--teal-600, #0b4656);
  color: #fff;
  padding: var(--space-3) var(--space-4);
  border-radius: 14px 14px 2px 14px;
  font-weight: 600;
}
.cds .cdx-aichat__a {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  max-width: 92%;
}
.cds .cdx-aichat__a p {
  background: var(--paper-2, #f3efe7);
  color: var(--text-body);
  padding: var(--space-3) var(--space-4);
  border-radius: 14px 14px 14px 2px;
  margin: 0;
}
.cds .cdx-aichat__mark {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: var(--flame-500, #e05b2f);
  color: var(--ink-1, #0a1216);
}
.cds .cdx-aichat__cap {
  margin: 0;
  font-size: var(--text-small);
  color: var(--text-muted);
  text-align: center;
}

/* ── AEO funnel — order bumps: tag, value anchor, reassurance ──────────── */
.cds .cdx-bump__intro {
  color: var(--text-muted);
  font-size: var(--text-small);
  margin: 0;
}
.cds .cdx-bump__tag {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 1px 8px;
  border-radius: var(--radius-pill, 999px);
  background: var(--flame-500, #e05b2f);
  color: var(--ink-1, #0a1216);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
}
.cds .cdx-bump__was {
  color: var(--text-muted);
  font-weight: 500;
  opacity: 0.7;
  margin-right: 2px;
}

/* ── AEO funnel — checkout summary: FREE bonus lines + value anchor ────── */
.cds .cdx-summary__free {
  color: var(--text-muted);
}
.cds .cdx-summary__free s {
  opacity: 0.6;
  margin-right: 4px;
}
.cds .cdx-summary__anchor {
  margin: var(--space-3) 0 0;
  text-align: center;
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--text-brand);
}

/* ── Branded cover fallback (no cover image yet) ───────────────────────── */
.cds .cdx-cover-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  background: radial-gradient(130% 130% at 100% 0%, var(--ink-2), var(--ink-1));
}
.cds .cdx-cover-fallback__mark {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: var(--text-small);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
}
.cds .cdx-cover-fallback__title {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: clamp(1.15rem, 2.2vw, 2rem);
  line-height: 1.06;
  letter-spacing: var(--tracking-display);
  color: var(--text-on-dark);
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Generic centered hero/heading treatment (blog, resources, guide detail) ── */
.cds .cdx-center { text-align: center; }
.cds .cdx-center.cdx-stack-6,
.cds .cdx-center.cdx-stack-8 { align-items: center; }
.cds .cdx-center .cdx-lede,
.cds .cdx-center .cdx-prose { margin-left: auto; margin-right: auto; max-width: 720px; }
.cds .cdx-center .cdx-prose { text-align: center; }
.cds .cdx-center .cdx-meta-row { justify-content: center; }
.cds .cdx-center .cd-section-heading { align-items: center; text-align: center; margin-left: auto; margin-right: auto; }
/* A hero's lede+tag split becomes a centered stack when centered. */
.cds .cdx-center .cdx-split { flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); }

/* ── Lead-capture popup (sitewide first-visit resource-guide modal) ─────── */
.cds .cdx-modal {
  position: fixed;
  inset: 0;
  z-index: 360;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background: rgba(10, 18, 22, 0.62);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  overflow-y: auto;
  animation: cdx-modal-fade var(--dur-med) var(--ease-out);
}
@keyframes cdx-modal-fade { from { opacity: 0; } to { opacity: 1; } }
.cds .cdx-modal-card {
  position: relative;
  width: min(720px, 100%);
  margin: auto;
  background: var(--paper-1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card), 0 24px 80px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  display: grid;
  grid-template-columns: 0.78fr 1fr;
  animation: cdx-modal-rise var(--dur-med) var(--ease-out);
}
@keyframes cdx-modal-rise { from { transform: translateY(14px) scale(0.985); opacity: 0; } to { transform: none; opacity: 1; } }
.cds .cdx-modal-card--noart { grid-template-columns: 1fr; }
.cds .cdx-modal-cover { background: var(--paper-2); padding: var(--space-6); display: flex; align-items: center; justify-content: center; }
.cds .cdx-modal-cover .cdx-frame { width: 100%; max-width: 220px; }
.cds .cdx-modal-body { padding: var(--space-7); }
.cds .cdx-modal-title {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.08;
  letter-spacing: var(--tracking-display);
  color: var(--text-heading);
}
.cds .cdx-modal-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--paper-1);
  border: var(--border-hairline) solid var(--border-subtle);
  color: var(--text-heading);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.cds .cdx-modal-close:hover { border-color: var(--border-strong); background: var(--paper-2); }
@media (max-width: 680px) {
  .cds .cdx-modal { padding: 0; align-items: stretch; }
  .cds .cdx-modal-card { grid-template-columns: 1fr; border-radius: 0; min-height: 100%; }
  .cds .cdx-modal-cover { display: none; }
  .cds .cdx-modal-body { padding: var(--space-8) var(--space-5) var(--space-6); }
}
@media (prefers-reduced-motion: reduce) {
  .cds .cdx-modal, .cds .cdx-modal-card { animation: none; }
}

/* ── Google Ads LP (web-design-lp) ──────────────────────────────────────── */

/* [ HERO ] full-bleed astronaut background + dark scrim. The source image
   (astronaught-desert.webp) has the astronaut standing at roughly 75-80%
   across / mid-height — object-position keeps them in frame on both very
   wide (vertical crop) and narrow (horizontal crop) viewports. The scrim is
   darkest on the left (under the lede text) and lightest on the right (so
   the astronaut still reads through), plus a soft bottom fade so the image
   doesn't end in a hard photo edge above the stat strip. */
.cds .cdx-lp-hero { position: relative; overflow: hidden; }
/* ~12% headroom baked into the box (vs. a plain inset:0) so the GSAP scroll
   parallax (yPercent drift on this element) never reveals an edge below/
   above the frame — the hero section's overflow:hidden clips the excess. */
.cds .cdx-lp-hero__bg {
  position: absolute; top: -12%; left: 0; right: 0; bottom: -12%;
  width: 100%; height: 124%;
  object-fit: cover; object-position: 75% 40%;
  display: block;
}
.cds .cdx-lp-hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 18, 22, 0.88) 0%, rgba(10, 18, 22, 0.72) 55%, rgba(10, 18, 22, 0.45) 100%),
    linear-gradient(to bottom, transparent 78%, var(--paper-1) 100%);
}

/* [ 02 ] free-mockup split — steps stacked vertically beside a pure-CSS
   browser-frame mockup graphic. (cdx-platform-cap hard-codes h3 { color:
   var(--text-on-dark) } for its dark-only sections; these are new,
   paper-safe classes.) */
.cds .cdx-lp-mockup-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: start; }
.cds .cdx-lp-steps { display: flex; flex-direction: column; gap: var(--space-5); }
.cds .cdx-lp-step {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-6);
  border: var(--border-hairline) solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--paper-2);
}
.cds .cdx-lp-step .cdx-mono { color: var(--text-accent); }
.cds .cdx-lp-step h3 { margin: 0; font-size: var(--text-h4); font-weight: var(--weight-bold); color: var(--text-heading); }
.cds .cdx-lp-step p.cdx-body { font-size: 1.02rem; line-height: 1.55; }

/* Pure-CSS browser-frame graphic — chrome bar (3 dots + mono address pill)
   over abstract wireframe blocks, no real/fake site content. The --shot
   modifier reuses the same frame to wrap real portfolio screenshots in
   [ 06 ] for visual cohesion. */
.cds .cdx-lp-browser {
  border-radius: var(--radius-lg);
  border: var(--border-hairline) solid var(--border-strong);
  overflow: hidden;
  background: var(--paper-0);
  box-shadow: var(--shadow-card);
}
.cds .cdx-lp-browser__bar {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--paper-3);
  border-bottom: var(--border-hairline) solid var(--border-subtle);
}
.cds .cdx-lp-browser__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); flex: none; }
.cds .cdx-lp-browser__dot:nth-child(1) { background: var(--ember-500); }
.cds .cdx-lp-browser__dot:nth-child(2) { background: var(--flame-500); }
.cds .cdx-lp-browser__dot:nth-child(3) { background: var(--copper-400); }
.cds .cdx-lp-browser__url {
  margin-left: var(--space-3);
  font-family: var(--font-mono); font-size: var(--text-caption); letter-spacing: var(--tracking-label);
  color: var(--text-muted); background: var(--paper-1);
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 3px 12px;
}
.cds .cdx-lp-browser__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
/* transform-origin:left so the GSAP draw-in (scaleX 0 -> 1) grows the block
   from its left edge, matching how a wireframe would "draw" in. Static —
   harmless with no transform applied (JS-off / reduced-motion states). */
.cds .cdx-lp-browser__nav,
.cds .cdx-lp-browser__hero,
.cds .cdx-lp-browser__lines span,
.cds .cdx-lp-browser__cta { transform-origin: left center; }
.cds .cdx-lp-browser__nav { height: 14px; width: 40%; border-radius: var(--radius-pill); background: var(--border-subtle); }
.cds .cdx-lp-browser__hero { height: 90px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--text-accent), var(--flame-500)); opacity: 0.85; }
.cds .cdx-lp-browser__lines { display: flex; flex-direction: column; gap: var(--space-2); }
.cds .cdx-lp-browser__lines span { display: block; height: 10px; border-radius: var(--radius-pill); background: var(--border-subtle); }
.cds .cdx-lp-browser__lines span:nth-child(1) { width: 90%; }
.cds .cdx-lp-browser__lines span:nth-child(2) { width: 75%; }
.cds .cdx-lp-browser__lines span:nth-child(3) { width: 55%; }
.cds .cdx-lp-browser__cta { width: 130px; height: 34px; border-radius: var(--radius-pill); background: var(--text-accent); }
.cds .cdx-lp-browser--shot img { width: 100%; display: block; }

/* [ 01 ] problem/solution cards — 2x2 grid on ink, sized to pop off the dark
   background (replaces the old thin on-ink rows). */
.cds .cdx-lp-probsol { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.cds .cdx-lp-probsol__card {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-6);
  background: rgba(255, 255, 255, 0.04);
  border: var(--border-hairline) solid var(--border-on-dark-strong);
  border-radius: var(--radius-lg);
  position: relative; z-index: 0; overflow: hidden;
}
.cds .cdx-lp-probsol__card .cdx-mono { color: var(--text-accent); }
.cds .cdx-lp-probsol__problem { margin: 0; font-size: var(--text-h4); font-weight: var(--weight-semibold); line-height: 1.4; color: var(--text-on-dark); }
.cds .cdx-lp-probsol__divider { border: 0; border-top: var(--border-hairline) solid var(--border-on-dark-strong); margin: 0; }
.cds .cdx-lp-probsol__answer { margin: 0; font-size: 1.1rem; line-height: 1.5; color: var(--text-on-dark-muted); }
/* ghosted index numeral — decoration only, clipped to the card, sits behind
   the content (negative z-index inside the card's own stacking context). */
.cds .cdx-lp-probsol__num {
  position: absolute; top: var(--space-3); right: var(--space-4); z-index: -1;
  font-family: var(--font-serif-accent); font-style: italic;
  font-size: 6rem; line-height: 1;
  color: rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

/* [ 03 ] service-card ghost glyphs — small abstract CSS marks (no SVG, no
   icon lib) echoing the template's generative-art language, one per card. */
.cds .cdx-lp-glyph { display: block; width: 40px; height: 40px; opacity: 0.55; flex: none; }
.cds .cdx-lp-glyph--grid {
  background-image: radial-gradient(var(--text-accent) 2px, transparent 2.5px);
  background-size: 12px 12px;
}
.cds .cdx-lp-glyph--rings { position: relative; border: 2px solid var(--text-accent); border-radius: 50%; }
.cds .cdx-lp-glyph--rings::before {
  content: ""; position: absolute; inset: 9px;
  border: 2px solid var(--text-accent); border-radius: 50%;
}
.cds .cdx-lp-glyph--lines { display: flex; flex-direction: column; justify-content: center; gap: 5px; }
.cds .cdx-lp-glyph--lines span { display: block; height: 3px; border-radius: 2px; background: var(--text-accent); }
.cds .cdx-lp-glyph--lines span:nth-child(1) { width: 100%; }
.cds .cdx-lp-glyph--lines span:nth-child(2) { width: 68%; }
.cds .cdx-lp-glyph--lines span:nth-child(3) { width: 42%; }
.cds .cdx-lp-glyph--node { position: relative; border: 2px solid var(--text-accent); border-radius: 50%; }
.cds .cdx-lp-glyph--node::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%; background: var(--text-accent);
}

/* [ 04 ] process timeline — 2-col split ≥880px: timeline left, sticky
   supporting image right. The media column stretches (default align-items)
   to match the tall timeline column's row height; the figure inside it is
   the sticky element, so it rides from the top of that tall box down to its
   bottom instead of the whole column snapping to the viewport at once. */
.cds .cdx-lp-timeline-split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-7); }
/* position:relative anchors the .cdx-lp-timeline__rail below, which replaces
   the old per-step border-left with one continuous line the GSAP scroll
   scrub draws (scaleY 0 -> 1) down the whole stack. */
.cds .cdx-lp-timeline { display: flex; flex-direction: column; gap: var(--space-5); position: relative; }
.cds .cdx-lp-timeline__rail {
  position: absolute; top: 0; left: 0; bottom: 0; width: 2px;
  background: var(--text-accent);
  transform-origin: top center;
}
.cds .cdx-lp-timeline__step {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4) 0 var(--space-4) var(--space-5);
}
.cds .cdx-lp-timeline__step .cdx-mono { color: var(--text-accent); }
.cds .cdx-lp-timeline__num { font-weight: var(--weight-extrabold); }
.cds .cdx-lp-timeline__head { margin: 0; font-size: var(--text-h4); font-weight: var(--weight-bold); color: var(--text-heading); }
.cds .cdx-lp-timeline__body { margin: 0; font-size: 1.05rem; line-height: 1.55; color: var(--text-body); }
.cds .cdx-lp-timeline__figure {
  position: sticky; top: var(--space-7); margin: 0;
  border: var(--border-hairline) solid var(--border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.cds .cdx-lp-timeline__figure img { width: 100%; height: auto; display: block; }

/* atmospheric full-bleed image band between [ 04 ] and [ 05 ]. */
.cds .cdx-lp-band-img { position: relative; width: 100%; height: clamp(180px, 28vw, 320px); overflow: hidden; }
/* 15% headroom top/bottom — the GSAP parallax drifts this img yPercent -10 to
   10 (a wider swing than the hero's), so it needs more spare height than the
   hero to never reveal an edge. */
.cds .cdx-lp-band-img img {
  position: absolute; left: 0; right: 0; top: -15%;
  width: 100%; height: 130%;
  object-fit: cover; display: block;
}
.cds .cdx-lp-band-img__cap {
  position: absolute; left: var(--container-pad); bottom: var(--space-4);
  color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

/* [ 05 ] SEO/AEO — lede copy + illustrative AI-answer card split (reuses
   .cdx-aichat from the AEO funnel — see "AEO funnel" block above). */
.cds .cdx-lp-lede { margin: 0; font-size: 1.15rem; line-height: 1.6; color: var(--text-on-dark-muted); }
.cds .cdx-lp-seo-split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-7); align-items: center; }
.cds .cdx-lp-checklist { display: flex; flex-direction: column; gap: var(--space-3); }
.cds .cdx-lp-checklist__item {
  display: flex; align-items: baseline; gap: var(--space-2);
  font-family: var(--font-mono); font-size: 1rem; letter-spacing: var(--tracking-label);
  color: var(--text-on-dark);
}
.cds .cdx-lp-checklist__check { color: var(--text-accent); font-weight: var(--weight-bold); }

/* [ 06 ] the work — large alternating case rows (replaces a small card grid). */
.cds .cdx-lp-work { display: flex; flex-direction: column; gap: var(--space-8); }
.cds .cdx-lp-work__row { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-7); align-items: center; }
.cds .cdx-lp-work__row--flip .cdx-lp-work__shot { order: 2; }
.cds .cdx-lp-work__row--flip .cdx-lp-work__text { order: 1; }
.cds .cdx-lp-work__shot img { width: 100%; display: block; }
.cds .cdx-lp-work__text h3 { font-size: var(--text-h3); font-weight: var(--weight-extrabold); letter-spacing: var(--tracking-display); color: var(--text-heading); margin: 0; }

/* [ 07 ] city split w/ image. */
.cds .cdx-lp-city { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: stretch; }
.cds .cdx-lp-city__img img {
  width: 100%; height: 100%; min-height: 320px; object-fit: cover; display: block;
  border: var(--border-hairline) solid var(--border-strong);
  border-radius: var(--radius-lg);
}

/* [ 08 ] FAQ — 2-col split ≥880px: FAQ list left, bordered supporting
   figure right (caption below, reuses .cdx-mono — not stickied, unlike the
   timeline figure, since it isn't asked to ride a taller column). */
.cds .cdx-lp-faq-split { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--space-7); align-items: start; }
.cds .cdx-lp-faq__figure {
  margin: 0;
  border: var(--border-hairline) solid var(--border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.cds .cdx-lp-faq__figure img { width: 100%; height: 320px; object-fit: cover; display: block; }
.cds .cdx-lp-faq__figure figcaption {
  padding: var(--space-3) var(--space-4);
  border-top: var(--border-hairline) solid var(--border-subtle);
  background: var(--paper-0);
}

@media (max-width: 880px) {
  .cds .cdx-lp-mockup-split { grid-template-columns: 1fr; }
  .cds .cdx-lp-probsol { grid-template-columns: 1fr; }
  .cds .cdx-lp-work__row { grid-template-columns: 1fr; gap: var(--space-5); }
  .cds .cdx-lp-work__row--flip .cdx-lp-work__shot,
  .cds .cdx-lp-work__row--flip .cdx-lp-work__text { order: initial; }
  .cds .cdx-lp-city { grid-template-columns: 1fr; }
  .cds .cdx-lp-city__img img { min-height: 240px; }
  .cds .cdx-lp-seo-split { grid-template-columns: 1fr; }
  .cds .cdx-lp-hero__bg { object-position: 82% 40%; }
  .cds .cdx-lp-timeline-split { grid-template-columns: 1fr; }
  .cds .cdx-lp-timeline__figure { position: static; margin-top: var(--space-5); }
  .cds .cdx-lp-faq-split { grid-template-columns: 1fr; }
  .cds .cdx-lp-faq__figure { margin-top: var(--space-6); }
}

/* ── Google Ads LP — micro-interactions ─────────────────────────────────
   Scoped under .cdx-lp-scope (the LP's own outermost wrapper class, set in
   web-design-lp.tsx) wherever the base selector is shared with other c-dell
   pages/templates (.cdx-svc-card--inverse, .cd-btn) so this page's slightly
   punchier hover treatment never leaks into their existing behavior. */

/* card hover lift */
.cds .cdx-lp-scope .cdx-lp-probsol__card,
.cds .cdx-lp-scope .cdx-lp-step {
  transition: transform 0.35s var(--ease-out, ease-out), border-color 0.35s var(--ease-out, ease-out);
}
.cds .cdx-lp-scope .cdx-lp-probsol__card:hover,
.cds .cdx-lp-scope .cdx-lp-step:hover {
  transform: translateY(-4px);
  border-color: var(--text-accent);
}
/* .cdx-svc-card--inverse already has its own sitewide hover (border-color +
   box-shadow, 06-site.css above) — only ADD the lift here, don't touch it. */
.cds .cdx-lp-scope .cdx-svc-card--inverse:hover { transform: translateY(-4px); }

/* button arrow nudge — .cd-btn__arrow already has a sitewide 3px nudge
   (05-components.css); this page gets a slightly punchier 4px, LP-scoped
   only (its own transition is inherited from that shared rule). */
.cds .cdx-lp-scope .cd-btn:hover .cd-btn__arrow { transform: translateX(4px); }

/* portfolio screenshot hover — [ 06 ] THE WORK case-study shots */
.cds .cdx-lp-scope .cdx-lp-browser--shot img { transition: transform 0.35s var(--ease-out, ease-out); }
.cds .cdx-lp-scope .cdx-lp-browser--shot:hover img { transform: scale(1.02); }

@media (prefers-reduced-motion: reduce) {
  .cds .cdx-lp-scope .cdx-lp-probsol__card,
  .cds .cdx-lp-scope .cdx-lp-step,
  .cds .cdx-lp-scope .cd-btn__arrow,
  .cds .cdx-lp-scope .cdx-lp-browser--shot img {
    transition: none;
  }
  .cds .cdx-lp-scope .cdx-sticky-cta { animation: none; }
}