/* ════════════════════════════════════════════════════════════════════
   CleanDesignGroup — Stripe-style modern fintech landing page
   Cool palette · gradient meshes · refined typography · clean grid
   Class prefix: cdg-
   ════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────
   DESIGN TOKENS
   ────────────────────────────────────────────────────────────────── */
:root {
    /* Surface — cool whites, never warm */
    --cdg-paper:        #FFFFFF;          /* pure white surface */
    --cdg-canvas:       #F6F9FC;          /* cool light grey-blue (Stripe-like) */
    --cdg-canvas-deep:  #ECF0F4;          /* slightly deeper backgrounds */
    --cdg-mist:         #E4E9EE;          /* hairline separators */

    /* Text */
    --cdg-ink:          #0A2540;          /* deep navy — primary text */
    --cdg-ink-soft:     #425466;          /* secondary text */
    --cdg-ink-mute:     #697386;          /* tertiary text */
    --cdg-ink-faint:    #8898AA;          /* faint, labels */
    --cdg-rule:         #D8DEE5;          /* visible rule */

    /* Cool accents */
    --cdg-indigo:       #635BFF;          /* primary brand */
    --cdg-indigo-50:    #EFEEFF;
    --cdg-indigo-100:   #DAD7FF;
    --cdg-indigo-deep:  #4F46E5;

    --cdg-teal:         #00C4B4;
    --cdg-teal-50:      #E0F7F5;
    --cdg-teal-deep:    #009E92;

    --cdg-violet:       #A879FF;
    --cdg-violet-50:    #F1E9FF;

    --cdg-azure:        #0073E6;
    --cdg-azure-50:     #E0F0FF;

    --cdg-cyan:         #00B7E0;
    --cdg-cyan-50:      #E0F5FB;

    --cdg-navy:         #1A365D;
    --cdg-navy-50:      #E5EBF2;

    /* Hero gradient stops */
    --cdg-grad-1: #635BFF;
    --cdg-grad-2: #00C4B4;
    --cdg-grad-3: #A879FF;
    --cdg-grad-4: #0073E6;

    /* Typography — Inter Tight for display, Inter for body, JetBrains Mono for labels */
    --cdg-display: 'Inter Tight', 'Helvetica Neue', system-ui, sans-serif;
    --cdg-body:    'Inter', 'Helvetica Neue', system-ui, sans-serif;
    --cdg-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* Spacing — 8px scale */
    --cdg-sp-1:   4px;
    --cdg-sp-2:   8px;
    --cdg-sp-3:  12px;
    --cdg-sp-4:  16px;
    --cdg-sp-5:  24px;
    --cdg-sp-6:  32px;
    --cdg-sp-7:  48px;
    --cdg-sp-8:  64px;
    --cdg-sp-9:  96px;
    --cdg-sp-10: 128px;

    /* Radii */
    --cdg-r-sm:  6px;
    --cdg-r:    10px;
    --cdg-r-lg: 16px;
    --cdg-r-xl: 24px;
    --cdg-r-2xl: 32px;

    /* Shadows — cool, subtle */
    --cdg-shadow-sm: 0 1px 2px rgba(10, 37, 64, 0.06);
    --cdg-shadow:    0 4px 12px rgba(10, 37, 64, 0.05), 0 1px 3px rgba(10, 37, 64, 0.04);
    --cdg-shadow-md: 0 8px 24px rgba(10, 37, 64, 0.07), 0 2px 6px rgba(10, 37, 64, 0.04);
    --cdg-shadow-lg: 0 24px 48px rgba(10, 37, 64, 0.10), 0 4px 12px rgba(10, 37, 64, 0.05);
    --cdg-shadow-glow: 0 8px 24px rgba(99, 91, 255, 0.18);

    /* Container */
    --cdg-shell:        1200px;
    --cdg-shell-narrow:  960px;
    --cdg-shell-prose:   720px;
}

/* ──────────────────────────────────────────────────────────────────
   RESET + BASE
   ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0; padding: 0;
    font-family: var(--cdg-body);
    font-size: 16px;
    line-height: 1.55;
    color: var(--cdg-ink);
    background: var(--cdg-paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
hr { border: 0; height: 1px; background: var(--cdg-mist); margin: var(--cdg-sp-7) 0; }

h1, h2, h3, h4 {
    font-family: var(--cdg-display);
    font-weight: 600;
    line-height: 1.1;
    margin: 0 0 var(--cdg-sp-4) 0;
    letter-spacing: -0.02em;
    color: var(--cdg-ink);
}
h1 { font-size: clamp(40px, 6vw, 76px); letter-spacing: -0.03em; }
h2 { font-size: clamp(30px, 4vw, 48px); letter-spacing: -0.025em; }
h3 { font-size: clamp(22px, 2vw, 28px); }
h4 { font-size: clamp(17px, 1.2vw, 19px); font-weight: 600; line-height: 1.3; }

p { margin: 0 0 var(--cdg-sp-4) 0; }

::selection { background: var(--cdg-indigo); color: white; }

/* ──────────────────────────────────────────────────────────────────
   LAYOUT — shells + sections
   ────────────────────────────────────────────────────────────────── */
.cdg-shell        { width: 100%; max-width: var(--cdg-shell);        margin: 0 auto; padding: 0 var(--cdg-sp-5); }
.cdg-shell--narrow{ max-width: var(--cdg-shell-narrow); }
.cdg-shell--prose { max-width: var(--cdg-shell-prose); }

.cdg-section { padding: var(--cdg-sp-9) 0; position: relative; }
.cdg-section--tight { padding: var(--cdg-sp-7) 0; }
.cdg-section--canvas { background: var(--cdg-canvas); }
.cdg-section--paper  { background: var(--cdg-paper); }
.cdg-section--deep   { background: var(--cdg-canvas-deep); }
.cdg-section--ink    { background: var(--cdg-ink); color: white; }
.cdg-section--ink h1, .cdg-section--ink h2, .cdg-section--ink h3 { color: white; }

.cdg-section__head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--cdg-sp-7);
    align-items: end;
    margin-bottom: var(--cdg-sp-7);
}
@media (max-width: 760px) {
    .cdg-section__head { grid-template-columns: 1fr; gap: var(--cdg-sp-4); }
}
.cdg-section__label {
    font-family: var(--cdg-mono);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--cdg-indigo);
    margin-bottom: var(--cdg-sp-3);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.cdg-section__label::before {
    content: "";
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--cdg-indigo);
    display: inline-block;
}
.cdg-section__title { margin: 0; }
.cdg-section__caption {
    font-size: 17px;
    color: var(--cdg-ink-soft);
    max-width: 480px;
    line-height: 1.6;
    margin: 0;
}

/* ──────────────────────────────────────────────────────────────────
   TOPBAR
   ────────────────────────────────────────────────────────────────── */
.cdg-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--cdg-ink);
    color: white;
    padding: var(--cdg-sp-3) var(--cdg-sp-5);
    z-index: 10000;
}
.cdg-skip:focus { left: var(--cdg-sp-4); top: var(--cdg-sp-4); }

.cdg-nav {
    position: sticky;
    top: 0;
    z-index: 200;
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--cdg-mist);
}
.cdg-nav__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--cdg-sp-5);
    padding: var(--cdg-sp-3) var(--cdg-sp-5);
    max-width: var(--cdg-shell);
    margin: 0 auto;
    height: 64px;
}

.cdg-nav__brand {
    display: flex;
    align-items: center;
    gap: var(--cdg-sp-2);
    font-family: var(--cdg-display);
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -0.01em;
    color: var(--cdg-ink);
}
.cdg-nav__brand__mark {
    width: 28px; height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--cdg-grad-1) 0%, var(--cdg-grad-4) 100%);
    display: grid; place-items: center;
    color: white;
    font-family: var(--cdg-display);
    font-weight: 700;
    font-size: 15px;
}

.cdg-nav__links {
    display: flex;
    justify-content: center;
    gap: var(--cdg-sp-5);
}
.cdg-nav__links a {
    font-size: 14px;
    font-weight: 500;
    color: var(--cdg-ink-soft);
    padding: 4px 0;
    position: relative;
    transition: color .15s ease;
}
.cdg-nav__links a:hover { color: var(--cdg-ink); }
.cdg-nav__links a.is-active { color: var(--cdg-indigo); }

.cdg-nav__cta {
    display: flex;
    align-items: center;
    gap: var(--cdg-sp-3);
}
.cdg-nav__cta__signin {
    font-size: 14px;
    font-weight: 500;
    color: var(--cdg-ink-soft);
}
.cdg-nav__cta__signin:hover { color: var(--cdg-indigo); }

.cdg-nav__burger {
    display: none;
    background: none;
    border: 0;
    padding: 8px;
    cursor: pointer;
    color: var(--cdg-ink);
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
}
.cdg-nav__burger__bars {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
}
.cdg-nav__burger__bars span {
    width: 18px; height: 2px;
    background: currentColor;
    border-radius: 2px;
}

@media (max-width: 920px) {
    .cdg-nav__links, .cdg-nav__cta { display: none; }
    .cdg-nav__burger { display: inline-flex; }
    .cdg-nav__inner { grid-template-columns: auto 1fr; }
}

/* Mobile drawer */
.cdg-drawer {
    position: fixed;
    inset: 0;
    background: var(--cdg-paper);
    z-index: 9999;
    display: none;
    flex-direction: column;
    padding: var(--cdg-sp-5);
    overflow-y: auto;
}
.cdg-drawer.is-open { display: flex; }
.cdg-drawer__top {
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: var(--cdg-sp-5);
    border-bottom: 1px solid var(--cdg-mist);
}
.cdg-drawer__close {
    background: var(--cdg-canvas);
    border: 1px solid var(--cdg-mist);
    width: 40px; height: 40px;
    border-radius: 50%;
    font-size: 22px;
    color: var(--cdg-ink);
    display: grid; place-items: center;
}
.cdg-drawer__list {
    display: flex;
    flex-direction: column;
    padding: var(--cdg-sp-5) 0;
}
.cdg-drawer__list a {
    font-family: var(--cdg-display);
    font-size: 28px;
    font-weight: 600;
    color: var(--cdg-ink);
    padding: var(--cdg-sp-4) 0;
    border-bottom: 1px solid var(--cdg-mist);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cdg-drawer__list a small {
    font-family: var(--cdg-mono);
    font-size: 12px;
    font-weight: 500;
    color: var(--cdg-ink-faint);
}
.cdg-drawer__foot {
    margin-top: auto;
    padding-top: var(--cdg-sp-5);
    border-top: 1px solid var(--cdg-mist);
    display: flex;
    flex-direction: column;
    gap: var(--cdg-sp-3);
    font-size: 14px;
}
.cdg-drawer__foot a {
    color: var(--cdg-indigo);
    font-weight: 500;
}

/* ──────────────────────────────────────────────────────────────────
   BUTTONS
   ────────────────────────────────────────────────────────────────── */
.cdg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 18px;
    background: var(--cdg-indigo);
    color: white;
    border: 1px solid var(--cdg-indigo);
    border-radius: var(--cdg-r);
    font-family: var(--cdg-body);
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: transform .12s ease, background .15s ease, box-shadow .2s ease;
    box-shadow: var(--cdg-shadow-sm);
    text-align: center;
    white-space: nowrap;
}
.cdg-btn:hover {
    transform: translateY(-1px);
    background: var(--cdg-indigo-deep);
    border-color: var(--cdg-indigo-deep);
    box-shadow: var(--cdg-shadow-glow);
}
.cdg-btn--ghost {
    background: transparent;
    color: var(--cdg-ink);
    border-color: var(--cdg-rule);
    box-shadow: none;
}
.cdg-btn--ghost:hover {
    background: var(--cdg-canvas);
    border-color: var(--cdg-ink-faint);
    color: var(--cdg-ink);
    box-shadow: var(--cdg-shadow-sm);
}
.cdg-btn--lg { padding: 14px 24px; font-size: 15px; border-radius: 12px; }
.cdg-btn--sm { padding: 7px 12px; font-size: 13px; border-radius: 8px; }
.cdg-btn--block { width: 100%; }
.cdg-btn--white { background: white; color: var(--cdg-ink); border-color: white; }
.cdg-btn--white:hover { background: var(--cdg-canvas); color: var(--cdg-indigo); border-color: var(--cdg-canvas); }
.cdg-btn--on-ink { background: transparent; color: white; border-color: rgba(255,255,255,0.3); box-shadow: none; }
.cdg-btn--on-ink:hover { background: white; color: var(--cdg-ink); border-color: white; box-shadow: var(--cdg-shadow-md); }

/* ──────────────────────────────────────────────────────────────────
   HERO — gradient mesh background, refined composition
   ────────────────────────────────────────────────────────────────── */
.cdg-hero {
    position: relative;
    padding: var(--cdg-sp-9) 0 var(--cdg-sp-10);
    overflow: hidden;
    background: var(--cdg-paper);
}
.cdg-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.cdg-hero__bg::before,
.cdg-hero__bg::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.45;
}
.cdg-hero__bg::before {
    top: -200px;
    right: -100px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--cdg-grad-1) 0%, transparent 70%);
}
.cdg-hero__bg::after {
    top: 200px;
    left: -150px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--cdg-grad-2) 0%, transparent 70%);
}
.cdg-hero__bg__c {
    position: absolute;
    bottom: -200px;
    left: 30%;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--cdg-grad-3) 0%, transparent 70%);
    filter: blur(100px);
    opacity: 0.3;
    pointer-events: none;
}

.cdg-hero__inner {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 820px;
    margin: 0 auto;
}

.cdg-hero__pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--cdg-paper);
    border: 1px solid var(--cdg-mist);
    border-radius: 100px;
    padding: 6px 14px 6px 6px;
    font-size: 13px;
    color: var(--cdg-ink-soft);
    margin-bottom: var(--cdg-sp-5);
    box-shadow: var(--cdg-shadow);
    transition: transform .2s ease;
}
.cdg-hero__pill:hover { transform: translateY(-1px); }
.cdg-hero__pill__tag {
    background: var(--cdg-indigo);
    color: white;
    padding: 2px 10px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cdg-hero__title {
    margin: 0 0 var(--cdg-sp-5);
}
.cdg-hero__title__gradient {
    background: linear-gradient(135deg, var(--cdg-grad-1) 0%, var(--cdg-grad-2) 50%, var(--cdg-grad-4) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.cdg-hero__lead {
    font-size: clamp(17px, 1.4vw, 20px);
    line-height: 1.55;
    color: var(--cdg-ink-soft);
    max-width: 640px;
    margin: 0 auto var(--cdg-sp-6);
}

.cdg-hero__actions {
    display: flex;
    gap: var(--cdg-sp-3);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--cdg-sp-8);
}

.cdg-hero__metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--cdg-sp-5);
    padding-top: var(--cdg-sp-6);
    border-top: 1px solid var(--cdg-mist);
    max-width: 720px;
    margin: 0 auto;
    text-align: left;
}
.cdg-hero__metrics__cell small {
    font-family: var(--cdg-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cdg-ink-faint);
    display: block;
    margin-bottom: 4px;
}
.cdg-hero__metrics__cell strong {
    font-family: var(--cdg-display);
    font-size: clamp(22px, 2vw, 28px);
    font-weight: 600;
    color: var(--cdg-ink);
    letter-spacing: -0.02em;
}
@media (max-width: 640px) {
    .cdg-hero__metrics { grid-template-columns: repeat(2, 1fr); gap: var(--cdg-sp-4); }
}

/* ──────────────────────────────────────────────────────────────────
   LOGO CLOUD — clients we work with
   ────────────────────────────────────────────────────────────────── */
.cdg-logos {
    padding: var(--cdg-sp-7) 0;
    background: var(--cdg-canvas);
    border-bottom: 1px solid var(--cdg-mist);
}
.cdg-logos__title {
    text-align: center;
    font-family: var(--cdg-mono);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--cdg-ink-faint);
    margin-bottom: var(--cdg-sp-5);
}
.cdg-logos__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--cdg-sp-6);
    align-items: center;
    justify-items: center;
    opacity: 0.85;
}
@media (max-width: 880px) {
    .cdg-logos__grid { grid-template-columns: repeat(3, 1fr); gap: var(--cdg-sp-5); }
}
.cdg-logos__item {
    font-family: var(--cdg-display);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--cdg-ink-mute);
    text-align: center;
    transition: color .2s ease;
}
.cdg-logos__item:hover { color: var(--cdg-ink); }

/* ──────────────────────────────────────────────────────────────────
   FEATURE TRIO — three columns of value props
   ────────────────────────────────────────────────────────────────── */
.cdg-trio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--cdg-sp-6);
}
@media (max-width: 880px) { .cdg-trio { grid-template-columns: 1fr; gap: var(--cdg-sp-5); } }
.cdg-trio__item {
    padding: var(--cdg-sp-2) 0;
}
.cdg-trio__icon {
    width: 44px; height: 44px;
    border-radius: var(--cdg-r);
    display: grid; place-items: center;
    margin-bottom: var(--cdg-sp-4);
    background: linear-gradient(135deg, var(--cdg-indigo-50) 0%, var(--cdg-teal-50) 100%);
    color: var(--cdg-indigo);
    font-size: 22px;
}
.cdg-trio__item h3 {
    margin: 0 0 var(--cdg-sp-3);
    font-size: 22px;
    letter-spacing: -0.015em;
}
.cdg-trio__item p {
    color: var(--cdg-ink-soft);
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

/* ──────────────────────────────────────────────────────────────────
   SERVICE CARDS
   ────────────────────────────────────────────────────────────────── */
.cdg-services {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--cdg-sp-5);
}
@media (max-width: 980px) { .cdg-services { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cdg-services { grid-template-columns: 1fr; } }

.cdg-service {
    display: flex;
    flex-direction: column;
    background: var(--cdg-paper);
    border: 1px solid var(--cdg-mist);
    border-radius: var(--cdg-r-lg);
    padding: var(--cdg-sp-6);
    color: var(--cdg-ink);
    transition: transform .25s cubic-bezier(.4, 0, .2, 1), box-shadow .25s ease, border-color .25s ease;
    position: relative;
    overflow: hidden;
}
.cdg-service:hover {
    transform: translateY(-4px);
    box-shadow: var(--cdg-shadow-lg);
    border-color: transparent;
}

.cdg-service__tag {
    position: absolute;
    top: var(--cdg-sp-4);
    right: var(--cdg-sp-4);
    font-family: var(--cdg-mono);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 8px;
    background: var(--cdg-indigo-50);
    color: var(--cdg-indigo-deep);
    border-radius: 100px;
}
.cdg-service[data-accent="teal"]   .cdg-service__tag { background: var(--cdg-teal-50); color: var(--cdg-teal-deep); }
.cdg-service[data-accent="violet"] .cdg-service__tag { background: var(--cdg-violet-50); color: var(--cdg-violet); }
.cdg-service[data-accent="azure"]  .cdg-service__tag { background: var(--cdg-azure-50); color: var(--cdg-azure); }
.cdg-service[data-accent="cyan"]   .cdg-service__tag { background: var(--cdg-cyan-50); color: var(--cdg-cyan); }
.cdg-service[data-accent="navy"]   .cdg-service__tag { background: var(--cdg-navy-50); color: var(--cdg-navy); }

.cdg-service__title {
    font-size: 24px;
    line-height: 1.2;
    margin: 0 0 8px;
    font-weight: 600;
    letter-spacing: -0.02em;
    padding-right: 80px;
}
.cdg-service__subtitle {
    font-size: 15px;
    color: var(--cdg-ink-soft);
    margin: 0 0 var(--cdg-sp-5);
    line-height: 1.5;
}

.cdg-service__price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding-top: var(--cdg-sp-5);
    border-top: 1px solid var(--cdg-mist);
    margin-bottom: var(--cdg-sp-4);
}
.cdg-service__price {
    font-family: var(--cdg-display);
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--cdg-ink);
}
.cdg-service__price__sub {
    font-size: 13px;
    color: var(--cdg-ink-faint);
    font-family: var(--cdg-mono);
}

.cdg-service__short {
    color: var(--cdg-ink-soft);
    font-size: 14.5px;
    line-height: 1.55;
    margin: 0 0 var(--cdg-sp-5);
}

.cdg-service__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: var(--cdg-sp-4);
    border-top: 1px solid var(--cdg-mist);
}
.cdg-service__duration {
    font-family: var(--cdg-mono);
    font-size: 12px;
    color: var(--cdg-ink-faint);
}
.cdg-service__cta {
    font-family: var(--cdg-body);
    font-weight: 500;
    font-size: 14px;
    color: var(--cdg-indigo);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.cdg-service__cta::after { content: "→"; transition: transform .2s ease; }
.cdg-service:hover .cdg-service__cta::after { transform: translateX(4px); }

/* Detail variant on /services index */
.cdg-service--detail .cdg-service__incl {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--cdg-sp-5);
    display: grid;
    gap: 6px;
}
.cdg-service--detail .cdg-service__incl li {
    font-size: 13.5px;
    color: var(--cdg-ink-soft);
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 8px;
    line-height: 1.5;
}
.cdg-service--detail .cdg-service__incl li::before {
    content: "✓";
    color: var(--cdg-teal-deep);
    font-weight: 600;
    font-size: 13px;
    line-height: 1.5;
}

/* ──────────────────────────────────────────────────────────────────
   PAGE HEAD — used on inner pages
   ────────────────────────────────────────────────────────────────── */
.cdg-pagehead {
    padding: var(--cdg-sp-8) 0 var(--cdg-sp-7);
    border-bottom: 1px solid var(--cdg-mist);
    background: var(--cdg-canvas);
    position: relative;
    overflow: hidden;
}
.cdg-pagehead__crumb {
    font-family: var(--cdg-mono);
    font-size: 12px;
    color: var(--cdg-ink-faint);
    margin-bottom: var(--cdg-sp-4);
    display: inline-block;
}
.cdg-pagehead__crumb em { color: var(--cdg-indigo); font-style: normal; font-weight: 500; }
.cdg-pagehead__crumb a { color: var(--cdg-ink-mute); }
.cdg-pagehead__crumb a:hover { color: var(--cdg-indigo); }

.cdg-pagehead__title { margin: 0 0 var(--cdg-sp-4); max-width: 18ch; }
.cdg-pagehead__kicker {
    font-size: 19px;
    color: var(--cdg-indigo);
    margin: 0 0 var(--cdg-sp-4);
    font-weight: 500;
}
.cdg-pagehead__lead {
    font-size: 18px;
    line-height: 1.6;
    color: var(--cdg-ink-soft);
    max-width: 680px;
    margin: 0 0 var(--cdg-sp-5);
}
.cdg-pagehead__lead a { color: var(--cdg-indigo); border-bottom: 1px solid currentColor; }

.cdg-pagehead__meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--cdg-sp-4);
    padding-top: var(--cdg-sp-5);
    border-top: 1px solid var(--cdg-mist);
}
@media (max-width: 720px) { .cdg-pagehead__meta { grid-template-columns: repeat(2, 1fr); } }
.cdg-pagehead__meta > div small {
    display: block;
    font-family: var(--cdg-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cdg-ink-faint);
    margin-bottom: 4px;
}
.cdg-pagehead__meta > div strong {
    font-family: var(--cdg-display);
    font-size: 22px;
    font-weight: 600;
    color: var(--cdg-ink);
    letter-spacing: -0.015em;
}
.cdg-pagehead__action {
    display: flex;
    gap: var(--cdg-sp-3);
    flex-wrap: wrap;
    margin-top: var(--cdg-sp-6);
}

.cdg-state-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--cdg-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cdg-teal-deep);
    padding: 5px 12px;
    border: 1px solid var(--cdg-teal-50);
    background: var(--cdg-teal-50);
    border-radius: 100px;
    margin-bottom: var(--cdg-sp-4);
    font-weight: 500;
}
.cdg-state-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cdg-teal); }
.cdg-state-pill--warn { color: #B91C1C; border-color: #FEE2E2; background: #FEE2E2; }
.cdg-state-pill--warn .cdg-state-pill__dot { background: #DC2626; }

/* ──────────────────────────────────────────────────────────────────
   PROSE
   ────────────────────────────────────────────────────────────────── */
.cdg-prose {
    max-width: var(--cdg-shell-prose);
    font-size: 17px;
    line-height: 1.7;
    color: var(--cdg-ink);
}
.cdg-prose__lead {
    font-size: 21px;
    line-height: 1.6;
    color: var(--cdg-ink);
    margin-bottom: var(--cdg-sp-6);
    font-weight: 400;
}
.cdg-prose p { margin: 0 0 1.3em; color: var(--cdg-ink-soft); }
.cdg-prose p strong { color: var(--cdg-ink); font-weight: 600; }
.cdg-prose a {
    color: var(--cdg-indigo);
    border-bottom: 1px solid var(--cdg-indigo-100);
    transition: border-color .15s ease;
}
.cdg-prose a:hover { border-bottom-color: var(--cdg-indigo); }
.cdg-prose h2 {
    font-size: clamp(24px, 2.5vw, 32px);
    margin: 2em 0 0.6em;
}
.cdg-prose code {
    background: var(--cdg-canvas);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--cdg-mono);
    font-size: 0.88em;
    color: var(--cdg-ink);
    border: 1px solid var(--cdg-mist);
}
.cdg-prose ul {
    margin: 0 0 1.3em;
    padding-left: 1.2em;
}
.cdg-prose ul li {
    margin-bottom: 0.5em;
    color: var(--cdg-ink-soft);
}

.cdg-code-block {
    background: var(--cdg-ink);
    color: #C4F1F9;
    border: 0;
    border-radius: var(--cdg-r-lg);
    padding: var(--cdg-sp-5);
    font-family: var(--cdg-mono);
    font-size: 13px;
    line-height: 1.65;
    overflow-x: auto;
    white-space: pre;
    margin: var(--cdg-sp-5) 0;
}

/* ──────────────────────────────────────────────────────────────────
   CHECKLIST + STEPS
   ────────────────────────────────────────────────────────────────── */
.cdg-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--cdg-sp-3);
    max-width: 820px;
}
.cdg-checklist li {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: var(--cdg-sp-3);
    padding: var(--cdg-sp-4);
    background: var(--cdg-paper);
    border: 1px solid var(--cdg-mist);
    border-radius: var(--cdg-r);
    align-items: start;
}
.cdg-checklist__num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--cdg-indigo-50);
    color: var(--cdg-indigo-deep);
    display: grid;
    place-items: center;
    font-family: var(--cdg-mono);
    font-size: 11px;
    font-weight: 700;
}
.cdg-checklist__line {
    font-size: 15px;
    color: var(--cdg-ink);
    line-height: 1.55;
}

.cdg-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--cdg-sp-4);
}
@media (min-width: 760px) { .cdg-steps { grid-template-columns: repeat(4, 1fr); } }
.cdg-steps__step {
    background: var(--cdg-paper);
    border: 1px solid var(--cdg-mist);
    border-radius: var(--cdg-r-lg);
    padding: var(--cdg-sp-5);
    transition: transform .2s ease, box-shadow .2s ease;
}
.cdg-steps__step:hover {
    transform: translateY(-2px);
    box-shadow: var(--cdg-shadow);
}
.cdg-steps__num {
    font-family: var(--cdg-mono);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cdg-indigo);
    margin-bottom: var(--cdg-sp-3);
    display: block;
}
.cdg-steps__step h3 {
    font-size: 19px;
    margin: 0 0 8px;
    letter-spacing: -0.015em;
}
.cdg-steps__step p {
    font-size: 14px;
    color: var(--cdg-ink-soft);
    margin: 0;
    line-height: 1.55;
}

/* ──────────────────────────────────────────────────────────────────
   TEAM
   ────────────────────────────────────────────────────────────────── */
.cdg-team {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--cdg-sp-5);
}
@media (max-width: 880px) { .cdg-team { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cdg-team { grid-template-columns: 1fr; gap: var(--cdg-sp-5); } }
.cdg-team__card { display: flex; flex-direction: column; }
.cdg-team__portrait {
    aspect-ratio: 4/5;
    border-radius: var(--cdg-r-lg);
    display: grid;
    place-items: center;
    font-family: var(--cdg-display);
    font-size: 72px;
    font-weight: 600;
    letter-spacing: -0.03em;
    overflow: hidden;
    position: relative;
    margin-bottom: var(--cdg-sp-4);
    box-shadow: var(--cdg-shadow);
}
.cdg-team__portrait[data-accent="indigo"] { background: linear-gradient(135deg, var(--cdg-indigo) 0%, var(--cdg-azure) 100%); color: white; }
.cdg-team__portrait[data-accent="teal"]   { background: linear-gradient(135deg, var(--cdg-teal) 0%, var(--cdg-cyan) 100%); color: white; }
.cdg-team__portrait[data-accent="violet"] { background: linear-gradient(135deg, var(--cdg-violet) 0%, var(--cdg-indigo) 100%); color: white; }
.cdg-team__portrait[data-accent="cyan"]   { background: linear-gradient(135deg, var(--cdg-cyan) 0%, var(--cdg-teal) 100%); color: white; }
.cdg-team__portrait[data-accent="azure"]  { background: linear-gradient(135deg, var(--cdg-azure) 0%, var(--cdg-indigo) 100%); color: white; }
.cdg-team__portrait[data-accent="navy"]   { background: linear-gradient(135deg, var(--cdg-navy) 0%, var(--cdg-indigo) 100%); color: white; }
.cdg-team__portrait__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}
.cdg-team__body h3 {
    font-size: 19px;
    margin: 0 0 4px;
    letter-spacing: -0.015em;
}
.cdg-team__role {
    font-family: var(--cdg-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cdg-ink-faint);
    margin-bottom: var(--cdg-sp-3);
}
.cdg-team__bio {
    font-size: 14px;
    line-height: 1.55;
    color: var(--cdg-ink-soft);
    margin: 0;
}

/* ──────────────────────────────────────────────────────────────────
   PRINCIPLES
   ────────────────────────────────────────────────────────────────── */
.cdg-principles {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--cdg-sp-4);
}
@media (max-width: 720px) { .cdg-principles { grid-template-columns: 1fr; } }
.cdg-principles__item {
    background: var(--cdg-paper);
    border: 1px solid var(--cdg-mist);
    border-radius: var(--cdg-r-lg);
    padding: var(--cdg-sp-5);
    transition: transform .2s ease, box-shadow .2s ease;
}
.cdg-principles__item:hover {
    transform: translateY(-2px);
    box-shadow: var(--cdg-shadow-md);
}
.cdg-principles__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    font-family: var(--cdg-mono);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: var(--cdg-sp-3);
}
.cdg-principles__item[data-accent="indigo"] .cdg-principles__num { background: var(--cdg-indigo-50); color: var(--cdg-indigo-deep); }
.cdg-principles__item[data-accent="teal"]   .cdg-principles__num { background: var(--cdg-teal-50);   color: var(--cdg-teal-deep); }
.cdg-principles__item[data-accent="violet"] .cdg-principles__num { background: var(--cdg-violet-50); color: var(--cdg-violet); }
.cdg-principles__item[data-accent="azure"]  .cdg-principles__num { background: var(--cdg-azure-50);  color: var(--cdg-azure); }
.cdg-principles__item[data-accent="cyan"]   .cdg-principles__num { background: var(--cdg-cyan-50);   color: var(--cdg-cyan); }
.cdg-principles__item[data-accent="navy"]   .cdg-principles__num { background: var(--cdg-navy-50);   color: var(--cdg-navy); }
.cdg-principles__title {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin: 0 0 8px;
}
.cdg-principles__detail {
    font-size: 14.5px;
    color: var(--cdg-ink-soft);
    line-height: 1.55;
    margin: 0;
}

/* ──────────────────────────────────────────────────────────────────
   PRICING TABLE
   ────────────────────────────────────────────────────────────────── */
.cdg-pricing-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--cdg-paper);
    border: 1px solid var(--cdg-mist);
    border-radius: var(--cdg-r-lg);
    overflow: hidden;
}
.cdg-pricing-table th,
.cdg-pricing-table td {
    text-align: left;
    padding: var(--cdg-sp-4) var(--cdg-sp-5);
    border-bottom: 1px solid var(--cdg-mist);
    vertical-align: middle;
}
.cdg-pricing-table tbody tr:last-child td { border-bottom: 0; }
.cdg-pricing-table th {
    font-family: var(--cdg-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cdg-ink-faint);
    font-weight: 600;
    background: var(--cdg-canvas);
}
.cdg-pricing-table tbody tr { transition: background .15s ease; }
.cdg-pricing-table tbody tr:hover { background: var(--cdg-canvas); }
.cdg-pricing-table__r { text-align: right; }
.cdg-pricing-table__price {
    font-family: var(--cdg-display);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
}
.cdg-pricing-table__name {
    font-weight: 600;
    color: var(--cdg-ink);
    font-size: 15.5px;
}
.cdg-pricing-table__name a:hover { color: var(--cdg-indigo); }
.cdg-pricing-table__sub {
    display: block;
    font-size: 13px;
    color: var(--cdg-ink-mute);
    margin-top: 2px;
    font-weight: 400;
}
@media (max-width: 720px) {
    .cdg-pricing-table__hide-sm { display: none; }
    .cdg-pricing-table th,
    .cdg-pricing-table td { padding: var(--cdg-sp-3) var(--cdg-sp-4); }
}

/* ──────────────────────────────────────────────────────────────────
   BUILDER
   ────────────────────────────────────────────────────────────────── */
.cdg-builder__cols {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--cdg-sp-7);
    align-items: start;
}
@media (max-width: 940px) { .cdg-builder__cols { grid-template-columns: 1fr; gap: var(--cdg-sp-6); } }

.cdg-builder__step { margin-bottom: var(--cdg-sp-7); }
.cdg-builder__step__head {
    margin-bottom: var(--cdg-sp-4);
    display: flex;
    align-items: baseline;
    gap: var(--cdg-sp-3);
    flex-wrap: wrap;
}
.cdg-builder__step__num {
    font-family: var(--cdg-mono);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cdg-indigo);
    padding: 4px 10px;
    background: var(--cdg-indigo-50);
    border-radius: 100px;
}
.cdg-builder__step__head h3 { margin: 0; font-size: 24px; letter-spacing: -0.02em; }
.cdg-builder__step__head small {
    font-family: var(--cdg-mono);
    font-size: 11px;
    color: var(--cdg-ink-faint);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.cdg-builder__addons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--cdg-sp-3);
}
@media (max-width: 520px) { .cdg-builder__addons { grid-template-columns: 1fr; } }

.cdg-builder__addon {
    display: flex;
    flex-direction: column;
    gap: var(--cdg-sp-2);
    padding: var(--cdg-sp-4);
    background: var(--cdg-paper);
    border: 1px solid var(--cdg-mist);
    border-radius: var(--cdg-r);
    cursor: pointer;
    transition: border-color .15s ease, transform .15s ease, box-shadow .2s ease;
    position: relative;
}
.cdg-builder__addon:hover {
    border-color: var(--cdg-indigo-100);
    transform: translateY(-1px);
    box-shadow: var(--cdg-shadow-sm);
}
.cdg-builder__addon:focus-within {
    outline: 2px solid var(--cdg-indigo);
    outline-offset: 2px;
}
.cdg-builder__addon input[type="checkbox"] {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.cdg-builder__addon__top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-weight: 500;
    font-size: 14.5px;
    color: var(--cdg-ink);
}
.cdg-builder__addon__top strong {
    font-family: var(--cdg-display);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -0.015em;
}
.cdg-builder__addon__price {
    font-family: var(--cdg-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--cdg-ink);
}
.cdg-builder__addon__note {
    font-size: 13px;
    color: var(--cdg-ink-mute);
    line-height: 1.5;
    margin: 0;
}

/* Selected state */
.cdg-builder__addon.is-on {
    background: var(--cdg-ink);
    border-color: var(--cdg-ink);
}
.cdg-builder__addon.is-on .cdg-builder__addon__top,
.cdg-builder__addon.is-on .cdg-builder__addon__top strong,
.cdg-builder__addon.is-on .cdg-builder__addon__price {
    color: white;
}
.cdg-builder__addon.is-on .cdg-builder__addon__note {
    color: rgba(255, 255, 255, 0.65);
}

/* Pace selector */
.cdg-builder__pace { display: grid; gap: var(--cdg-sp-3); }
.cdg-builder__pace__opt {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--cdg-sp-3);
    padding: var(--cdg-sp-4);
    background: var(--cdg-paper);
    border: 1px solid var(--cdg-mist);
    border-radius: var(--cdg-r);
    cursor: pointer;
    transition: border-color .15s ease;
    align-items: center;
    position: relative;
}
.cdg-builder__pace__opt:hover { border-color: var(--cdg-indigo-100); }
.cdg-builder__pace__opt:focus-within {
    outline: 2px solid var(--cdg-indigo);
    outline-offset: 2px;
}
.cdg-builder__pace__opt input[type="radio"] {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.cdg-builder__pace__opt span { display: flex; flex-direction: column; gap: 2px; }
.cdg-builder__pace__opt span strong {
    font-family: var(--cdg-display);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -0.015em;
}
.cdg-builder__pace__opt span small {
    font-size: 13px;
    color: var(--cdg-ink-mute);
}
.cdg-builder__pace__opt em {
    font-family: var(--cdg-mono);
    font-style: normal;
    font-size: 13px;
    color: var(--cdg-indigo);
    font-weight: 600;
}
.cdg-builder__pace__opt.is-on {
    background: var(--cdg-ink);
    border-color: var(--cdg-ink);
}
.cdg-builder__pace__opt.is-on strong { color: white; }
.cdg-builder__pace__opt.is-on small { color: rgba(255, 255, 255, 0.65); }
.cdg-builder__pace__opt.is-on em    { color: var(--cdg-teal); }

/* Receipt */
.cdg-receipt {
    position: sticky;
    top: 88px;
    background: var(--cdg-paper);
    border: 1px solid var(--cdg-mist);
    border-radius: var(--cdg-r-xl);
    padding: var(--cdg-sp-6);
    box-shadow: var(--cdg-shadow-md);
}
.cdg-receipt__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--cdg-sp-5);
    padding-bottom: var(--cdg-sp-4);
    border-bottom: 1px solid var(--cdg-mist);
}
.cdg-receipt__head h3 { margin: 0; font-size: 22px; letter-spacing: -0.02em; }
.cdg-receipt__live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--cdg-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cdg-teal-deep);
    padding: 3px 10px;
    background: var(--cdg-teal-50);
    border-radius: 100px;
    font-weight: 500;
}
.cdg-receipt__live::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--cdg-teal);
    animation: cdg-pulse 1.6s ease infinite;
}
@keyframes cdg-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.cdg-receipt__list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--cdg-sp-4);
}
.cdg-receipt__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px solid var(--cdg-mist);
    font-size: 14px;
}
.cdg-receipt__row:last-child { border-bottom: 0; }
.cdg-receipt__row span { color: var(--cdg-ink); }
.cdg-receipt__row strong {
    font-family: var(--cdg-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--cdg-ink);
}
.cdg-receipt__row--empty {
    color: var(--cdg-ink-faint);
    font-style: normal;
    text-align: center;
    padding: var(--cdg-sp-5) 0;
    justify-content: center;
    border-bottom: 0;
}

.cdg-receipt__pace {
    padding: 10px 0;
    border-top: 1px dashed var(--cdg-mist);
    font-size: 13px;
    color: var(--cdg-ink-soft);
    display: none;
}
.cdg-receipt__pace.is-visible {
    display: flex;
    justify-content: space-between;
}

.cdg-receipt__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--cdg-sp-4) 0;
    margin-bottom: var(--cdg-sp-4);
    border-top: 2px solid var(--cdg-ink);
    margin-top: var(--cdg-sp-3);
}
.cdg-receipt__total small {
    font-family: var(--cdg-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cdg-ink-faint);
    font-weight: 500;
}
.cdg-receipt__total strong {
    font-family: var(--cdg-display);
    font-size: 32px;
    font-weight: 600;
    color: var(--cdg-ink);
    letter-spacing: -0.025em;
}
.cdg-receipt__note {
    font-size: 12px;
    color: var(--cdg-ink-faint);
    line-height: 1.5;
    margin: var(--cdg-sp-3) 0 0;
}

/* ──────────────────────────────────────────────────────────────────
   RETAINERS — three pricing cards
   ────────────────────────────────────────────────────────────────── */
.cdg-retainers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--cdg-sp-5);
}
@media (max-width: 880px) { .cdg-retainers { grid-template-columns: 1fr; } }

.cdg-retainer {
    background: var(--cdg-paper);
    border: 1px solid var(--cdg-mist);
    border-radius: var(--cdg-r-xl);
    padding: var(--cdg-sp-6);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform .2s ease, box-shadow .2s ease;
}
.cdg-retainer:hover {
    transform: translateY(-3px);
    box-shadow: var(--cdg-shadow-lg);
}
.cdg-retainer--featured {
    background: linear-gradient(180deg, var(--cdg-indigo-50) 0%, transparent 60%);
    border-color: var(--cdg-indigo);
    box-shadow: var(--cdg-shadow-glow);
}
.cdg-retainer__badge {
    position: absolute;
    top: -12px;
    left: var(--cdg-sp-5);
    background: var(--cdg-indigo);
    color: white;
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 11px;
    font-family: var(--cdg-mono);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.cdg-retainer__name {
    font-size: 22px;
    margin: 0 0 6px;
    letter-spacing: -0.02em;
}
.cdg-retainer__tagline {
    font-size: 14.5px;
    color: var(--cdg-ink-soft);
    margin: 0 0 var(--cdg-sp-5);
    line-height: 1.5;
}
.cdg-retainer__price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: var(--cdg-sp-4);
}
.cdg-retainer__price {
    font-family: var(--cdg-display);
    font-size: 40px;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--cdg-ink);
    line-height: 1;
}
.cdg-retainer__price__unit {
    font-size: 14px;
    color: var(--cdg-ink-mute);
    font-family: var(--cdg-body);
}
.cdg-retainer__hours {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: var(--cdg-sp-3) var(--cdg-sp-4);
    background: var(--cdg-canvas);
    border-radius: var(--cdg-r);
    margin-bottom: var(--cdg-sp-5);
}
.cdg-retainer__hours strong {
    font-family: var(--cdg-display);
    font-size: 20px;
    font-weight: 600;
    color: var(--cdg-indigo);
}
.cdg-retainer__hours span {
    font-size: 14px;
    color: var(--cdg-ink-soft);
}
.cdg-retainer__note {
    font-size: 14px;
    color: var(--cdg-ink-soft);
    line-height: 1.6;
    margin: 0 0 var(--cdg-sp-6);
    flex: 1;
}
.cdg-retainer form { margin: 0; }

/* ──────────────────────────────────────────────────────────────────
   FAQ — accordion
   ────────────────────────────────────────────────────────────────── */
.cdg-faq {
    max-width: 820px;
    display: grid;
    gap: var(--cdg-sp-3);
}
.cdg-faq__item {
    background: var(--cdg-paper);
    border: 1px solid var(--cdg-mist);
    border-radius: var(--cdg-r);
    padding: 0;
    overflow: hidden;
    transition: border-color .15s ease;
}
.cdg-faq__item[open] { border-color: var(--cdg-indigo-100); }
.cdg-faq__item summary {
    list-style: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: 1fr 24px;
    gap: var(--cdg-sp-3);
    padding: var(--cdg-sp-4) var(--cdg-sp-5);
    align-items: center;
}
.cdg-faq__item summary::-webkit-details-marker { display: none; }
.cdg-faq__q {
    font-size: 16.5px;
    font-weight: 500;
    color: var(--cdg-ink);
    line-height: 1.4;
    letter-spacing: -0.005em;
}
.cdg-faq__chev {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    color: var(--cdg-indigo);
    font-size: 18px;
    font-weight: 500;
    transition: transform .25s ease;
    line-height: 1;
}
.cdg-faq__item[open] .cdg-faq__chev { transform: rotate(45deg); }
.cdg-faq__a {
    padding: 0 var(--cdg-sp-5) var(--cdg-sp-5);
    color: var(--cdg-ink-soft);
    line-height: 1.65;
    font-size: 15px;
    margin: 0;
    max-width: 720px;
}

/* ──────────────────────────────────────────────────────────────────
   CASE STUDY LIST (work)
   ────────────────────────────────────────────────────────────────── */
.cdg-cases {
    display: grid;
    gap: var(--cdg-sp-4);
}
.cdg-case {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: var(--cdg-sp-6);
    padding: var(--cdg-sp-5);
    background: var(--cdg-paper);
    border: 1px solid var(--cdg-mist);
    border-radius: var(--cdg-r-lg);
    align-items: start;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.cdg-case:hover {
    transform: translateY(-2px);
    box-shadow: var(--cdg-shadow-md);
    border-color: transparent;
}
@media (max-width: 720px) {
    .cdg-case {
        grid-template-columns: 1fr;
        gap: var(--cdg-sp-4);
        padding: var(--cdg-sp-4);
    }
}
.cdg-case__thumb {
    aspect-ratio: 4/3;
    width: 100%;
    border-radius: var(--cdg-r);
    overflow: hidden;
    position: relative;
}
.cdg-case__thumb[data-accent="indigo"] { background: linear-gradient(135deg, var(--cdg-indigo) 0%, var(--cdg-azure) 100%); }
.cdg-case__thumb[data-accent="teal"]   { background: linear-gradient(135deg, var(--cdg-teal) 0%, var(--cdg-cyan) 100%); }
.cdg-case__thumb[data-accent="violet"] { background: linear-gradient(135deg, var(--cdg-violet) 0%, var(--cdg-indigo) 100%); }
.cdg-case__thumb[data-accent="cyan"]   { background: linear-gradient(135deg, var(--cdg-cyan) 0%, var(--cdg-teal) 100%); }
.cdg-case__thumb[data-accent="azure"]  { background: linear-gradient(135deg, var(--cdg-azure) 0%, var(--cdg-indigo) 100%); }
.cdg-case__thumb[data-accent="navy"]   { background: linear-gradient(135deg, var(--cdg-navy) 0%, var(--cdg-indigo) 100%); }
.cdg-case__thumb__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cdg-case__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cdg-case__meta {
    display: flex;
    gap: var(--cdg-sp-4);
    font-family: var(--cdg-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cdg-ink-faint);
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.cdg-case__year {
    font-weight: 600;
    color: var(--cdg-indigo);
}
.cdg-case__title {
    font-size: clamp(22px, 2.2vw, 26px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0;
}
.cdg-case__kind {
    font-size: 14px;
    color: var(--cdg-ink-mute);
    margin: 0;
}
.cdg-case__note {
    font-size: 15px;
    color: var(--cdg-ink-soft);
    line-height: 1.6;
    margin: var(--cdg-sp-2) 0 0;
    max-width: 64ch;
}

/* ──────────────────────────────────────────────────────────────────
   JOURNAL
   ────────────────────────────────────────────────────────────────── */
.cdg-journal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--cdg-sp-5);
}
@media (max-width: 760px) { .cdg-journal-grid { grid-template-columns: 1fr; } }

.cdg-journal-card {
    display: flex;
    flex-direction: column;
    background: var(--cdg-paper);
    border: 1px solid var(--cdg-mist);
    border-radius: var(--cdg-r-lg);
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.cdg-journal-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--cdg-shadow-lg);
    border-color: transparent;
}
.cdg-journal-card__cover {
    aspect-ratio: 16/9;
    position: relative;
    overflow: hidden;
}
.cdg-journal-card__cover[data-accent="indigo"] { background: linear-gradient(135deg, var(--cdg-indigo) 0%, var(--cdg-violet) 100%); }
.cdg-journal-card__cover[data-accent="teal"]   { background: linear-gradient(135deg, var(--cdg-teal) 0%, var(--cdg-cyan) 100%); }
.cdg-journal-card__cover[data-accent="violet"] { background: linear-gradient(135deg, var(--cdg-violet) 0%, var(--cdg-indigo) 100%); }
.cdg-journal-card__cover[data-accent="cyan"]   { background: linear-gradient(135deg, var(--cdg-cyan) 0%, var(--cdg-teal) 100%); }
.cdg-journal-card__cover[data-accent="azure"]  { background: linear-gradient(135deg, var(--cdg-azure) 0%, var(--cdg-indigo) 100%); }
.cdg-journal-card__cover[data-accent="navy"]   { background: linear-gradient(135deg, var(--cdg-navy) 0%, var(--cdg-indigo) 100%); }
.cdg-journal-card__cover__art {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--cdg-display);
    font-style: italic;
    font-size: 96px;
    font-weight: 600;
}
.cdg-journal-card__cover__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}
.cdg-journal-card__body {
    padding: var(--cdg-sp-5);
    display: flex;
    flex-direction: column;
    flex: 1;
}
.cdg-journal-card__meta {
    display: flex;
    gap: var(--cdg-sp-4);
    font-family: var(--cdg-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cdg-ink-faint);
    margin-bottom: var(--cdg-sp-3);
}
.cdg-journal-card__title {
    font-size: 24px;
    margin: 0 0 var(--cdg-sp-3);
    line-height: 1.2;
    letter-spacing: -0.02em;
}
.cdg-journal-card__lead {
    font-size: 14.5px;
    color: var(--cdg-ink-soft);
    line-height: 1.55;
    margin: 0 0 var(--cdg-sp-3);
}
.cdg-journal-card__author {
    font-size: 13px;
    color: var(--cdg-ink-mute);
    margin: auto 0 0;
}
.cdg-journal-card__author strong {
    color: var(--cdg-ink);
    font-weight: 500;
}

/* Journal list page */
.cdg-journal-list {
    display: grid;
    gap: var(--cdg-sp-6);
}
.cdg-journal-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--cdg-sp-6);
    align-items: center;
    padding: var(--cdg-sp-5);
    background: var(--cdg-paper);
    border: 1px solid var(--cdg-mist);
    border-radius: var(--cdg-r-xl);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.cdg-journal-row:hover {
    transform: translateY(-2px);
    box-shadow: var(--cdg-shadow-md);
    border-color: transparent;
}
@media (max-width: 760px) {
    .cdg-journal-row { grid-template-columns: 1fr; padding: var(--cdg-sp-4); }
}
.cdg-journal-row__cover {
    aspect-ratio: 4/3;
    border-radius: var(--cdg-r);
    overflow: hidden;
    position: relative;
}
.cdg-journal-row__cover[data-accent="indigo"] { background: linear-gradient(135deg, var(--cdg-indigo) 0%, var(--cdg-violet) 100%); }
.cdg-journal-row__cover[data-accent="teal"]   { background: linear-gradient(135deg, var(--cdg-teal) 0%, var(--cdg-cyan) 100%); }
.cdg-journal-row__cover[data-accent="violet"] { background: linear-gradient(135deg, var(--cdg-violet) 0%, var(--cdg-indigo) 100%); }
.cdg-journal-row__cover[data-accent="cyan"]   { background: linear-gradient(135deg, var(--cdg-cyan) 0%, var(--cdg-teal) 100%); }
.cdg-journal-row__cover[data-accent="azure"]  { background: linear-gradient(135deg, var(--cdg-azure) 0%, var(--cdg-indigo) 100%); }
.cdg-journal-row__cover[data-accent="navy"]   { background: linear-gradient(135deg, var(--cdg-navy) 0%, var(--cdg-indigo) 100%); }
.cdg-journal-row__cover__art {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--cdg-display);
    font-style: italic;
    font-size: clamp(80px, 12vw, 140px);
    font-weight: 600;
}
.cdg-journal-row__cover__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}
.cdg-journal-row__meta {
    display: flex;
    gap: var(--cdg-sp-4);
    margin-bottom: var(--cdg-sp-3);
    font-family: var(--cdg-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cdg-ink-faint);
    flex-wrap: wrap;
}
.cdg-journal-row__title {
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1.2;
    margin: 0 0 var(--cdg-sp-3);
    letter-spacing: -0.02em;
}
.cdg-journal-row__title a:hover { color: var(--cdg-indigo); }
.cdg-journal-row__lead {
    font-size: 16px;
    line-height: 1.6;
    color: var(--cdg-ink-soft);
    margin: 0 0 var(--cdg-sp-4);
}
.cdg-journal-row__cta {
    color: var(--cdg-indigo);
    font-weight: 500;
    font-size: 14.5px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.cdg-journal-row__cta::after { content: "→"; transition: transform .2s ease; }
.cdg-journal-row:hover .cdg-journal-row__cta::after { transform: translateX(4px); }

/* Single post */
.cdg-post__head { padding: var(--cdg-sp-8) 0 var(--cdg-sp-5); }
.cdg-post__title { margin: 0 0 var(--cdg-sp-4); max-width: 18ch; }
.cdg-post__lead {
    font-size: clamp(19px, 1.8vw, 22px);
    color: var(--cdg-ink-soft);
    line-height: 1.55;
    margin: 0 0 var(--cdg-sp-5);
    max-width: 720px;
}
.cdg-post__meta {
    display: flex;
    gap: var(--cdg-sp-4);
    font-family: var(--cdg-mono);
    font-size: 12px;
    color: var(--cdg-ink-faint);
    padding-top: var(--cdg-sp-4);
    border-top: 1px solid var(--cdg-mist);
}
.cdg-post__cover {
    aspect-ratio: 21/9;
    margin: var(--cdg-sp-7) 0;
    border-radius: var(--cdg-r-xl);
    overflow: hidden;
    position: relative;
}
.cdg-post__cover[data-accent="indigo"] { background: linear-gradient(135deg, var(--cdg-indigo) 0%, var(--cdg-violet) 100%); }
.cdg-post__cover[data-accent="teal"]   { background: linear-gradient(135deg, var(--cdg-teal) 0%, var(--cdg-cyan) 100%); }
.cdg-post__cover[data-accent="violet"] { background: linear-gradient(135deg, var(--cdg-violet) 0%, var(--cdg-indigo) 100%); }
.cdg-post__cover[data-accent="cyan"]   { background: linear-gradient(135deg, var(--cdg-cyan) 0%, var(--cdg-teal) 100%); }
.cdg-post__cover[data-accent="azure"]  { background: linear-gradient(135deg, var(--cdg-azure) 0%, var(--cdg-indigo) 100%); }
.cdg-post__cover[data-accent="navy"]   { background: linear-gradient(135deg, var(--cdg-navy) 0%, var(--cdg-indigo) 100%); }
.cdg-post__cover__art {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--cdg-display);
    font-style: italic;
    font-size: clamp(120px, 18vw, 240px);
    font-weight: 600;
}
.cdg-post__cover__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}
.cdg-post__body { padding-bottom: var(--cdg-sp-9); }
.cdg-post__foot {
    display: flex;
    justify-content: space-between;
    gap: var(--cdg-sp-3);
    margin-top: var(--cdg-sp-7);
    padding-top: var(--cdg-sp-5);
    border-top: 1px solid var(--cdg-mist);
    flex-wrap: wrap;
}

/* ──────────────────────────────────────────────────────────────────
   FORMS
   ────────────────────────────────────────────────────────────────── */
.cdg-form { display: flex; flex-direction: column; gap: var(--cdg-sp-4); }
.cdg-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--cdg-sp-4);
}
@media (max-width: 600px) { .cdg-form__row { grid-template-columns: 1fr; } }

.cdg-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}
.cdg-form__field > span {
    font-size: 13px;
    color: var(--cdg-ink);
    font-weight: 500;
}
.cdg-form__field input,
.cdg-form__field select,
.cdg-form__field textarea {
    background: var(--cdg-paper);
    border: 1px solid var(--cdg-rule);
    border-radius: var(--cdg-r);
    padding: 12px 14px;
    font: inherit;
    font-size: 15px;
    color: var(--cdg-ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.cdg-form__field input:focus,
.cdg-form__field select:focus,
.cdg-form__field textarea:focus {
    outline: none;
    border-color: var(--cdg-indigo);
    box-shadow: 0 0 0 3px var(--cdg-indigo-50);
}
.cdg-form__field textarea {
    font-family: var(--cdg-body);
    resize: vertical;
    min-height: 140px;
}
.cdg-form__field--err input,
.cdg-form__field--err select,
.cdg-form__field--err textarea {
    border-color: #DC2626;
}
.cdg-form__field--err input:focus,
.cdg-form__field--err select:focus,
.cdg-form__field--err textarea:focus {
    box-shadow: 0 0 0 3px #FEE2E2;
}
.cdg-form__err {
    font-size: 12px;
    color: #DC2626;
    font-style: normal;
    font-weight: 500;
}
.cdg-form__honey { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }
.cdg-form__foot {
    display: flex;
    align-items: center;
    gap: var(--cdg-sp-4);
    margin-top: var(--cdg-sp-3);
    flex-wrap: wrap;
}
.cdg-form__status {
    flex: 1;
    font-size: 13.5px;
    color: var(--cdg-ink-mute);
    margin: 0;
}
.cdg-form__status.is-ok { color: var(--cdg-teal-deep); }
.cdg-form__status.is-error { color: #DC2626; }

/* ──────────────────────────────────────────────────────────────────
   CONTACT GRID
   ────────────────────────────────────────────────────────────────── */
.cdg-contact-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--cdg-sp-7);
}
@media (max-width: 940px) { .cdg-contact-grid { grid-template-columns: 1fr; } }
.cdg-contact-side {
    background: var(--cdg-paper);
    border: 1px solid var(--cdg-mist);
    border-radius: var(--cdg-r-xl);
    padding: var(--cdg-sp-6);
}
.cdg-contact-side h3 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cdg-ink-faint);
    margin: 0 0 var(--cdg-sp-2);
    font-weight: 600;
    font-family: var(--cdg-mono);
}
.cdg-contact-side p {
    font-size: 16px;
    color: var(--cdg-ink);
    font-weight: 500;
    line-height: 1.4;
    margin: 0 0 var(--cdg-sp-5);
}
.cdg-contact-side p a { color: var(--cdg-indigo); }
.cdg-contact-side p a:hover { color: var(--cdg-indigo-deep); }
.cdg-contact-side p small {
    font-weight: 400;
    font-size: 13px;
    color: var(--cdg-ink-mute);
    display: block;
    margin-top: 4px;
}

/* ──────────────────────────────────────────────────────────────────
   CTA card
   ────────────────────────────────────────────────────────────────── */
.cdg-cta {
    background: var(--cdg-ink);
    color: white;
    padding: var(--cdg-sp-8);
    border-radius: var(--cdg-r-2xl);
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--cdg-sp-5);
    align-items: center;
    position: relative;
    overflow: hidden;
}
@media (max-width: 760px) {
    .cdg-cta { grid-template-columns: 1fr; padding: var(--cdg-sp-6); }
}
.cdg-cta::before {
    content: "";
    position: absolute;
    top: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--cdg-grad-1) 0%, transparent 70%);
    filter: blur(60px);
    opacity: 0.45;
    pointer-events: none;
}
.cdg-cta::after {
    content: "";
    position: absolute;
    bottom: -80px;
    left: -80px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, var(--cdg-grad-2) 0%, transparent 70%);
    filter: blur(60px);
    opacity: 0.35;
    pointer-events: none;
}
.cdg-cta > * { position: relative; z-index: 1; }
.cdg-cta h2 { color: white; margin: 0 0 var(--cdg-sp-3); }
.cdg-cta__sub {
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    line-height: 1.55;
    margin: 0;
}
.cdg-cta__actions {
    display: flex;
    gap: var(--cdg-sp-3);
    flex-wrap: wrap;
    justify-content: flex-end;
}
@media (max-width: 760px) {
    .cdg-cta__actions { justify-content: flex-start; }
}

.cdg-inline-form { display: inline-flex; }

/* ──────────────────────────────────────────────────────────────────
   FOOTER
   ────────────────────────────────────────────────────────────────── */
.cdg-footer {
    background: var(--cdg-ink);
    color: rgba(255, 255, 255, 0.7);
    padding: var(--cdg-sp-9) 0 var(--cdg-sp-5);
    position: relative;
    overflow: hidden;
}
.cdg-footer__signoff {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--cdg-sp-5);
    align-items: end;
    padding-bottom: var(--cdg-sp-7);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: var(--cdg-sp-7);
}
@media (max-width: 760px) {
    .cdg-footer__signoff { grid-template-columns: 1fr; }
}
.cdg-footer__signoff h2 {
    color: white;
    margin: 0;
    max-width: 16ch;
}
.cdg-footer__signoff__cta {
    display: flex;
    gap: var(--cdg-sp-3);
}
.cdg-footer__signoff__cta .cdg-btn {
    background: white;
    color: var(--cdg-ink);
    border-color: white;
}
.cdg-footer__signoff__cta .cdg-btn:hover {
    background: var(--cdg-indigo);
    color: white;
    border-color: var(--cdg-indigo);
}

.cdg-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: var(--cdg-sp-6);
}
@media (max-width: 880px) { .cdg-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .cdg-footer__grid { grid-template-columns: 1fr; } }
.cdg-footer__col h4 {
    font-family: var(--cdg-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
    margin: 0 0 var(--cdg-sp-3);
}
.cdg-footer__col strong {
    font-family: var(--cdg-display);
    font-size: 18px;
    font-weight: 600;
    color: white;
    display: block;
    margin-bottom: var(--cdg-sp-3);
    letter-spacing: -0.015em;
}
.cdg-footer__col p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin: 0 0 var(--cdg-sp-4);
}
.cdg-footer__col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cdg-footer__col ul a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    transition: color .15s ease;
}
.cdg-footer__col ul a:hover { color: white; }
.cdg-footer__hours {
    font-family: var(--cdg-mono);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
}

.cdg-footer__bottom {
    display: flex;
    justify-content: space-between;
    gap: var(--cdg-sp-4);
    padding-top: var(--cdg-sp-5);
    margin-top: var(--cdg-sp-6);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-family: var(--cdg-mono);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    flex-wrap: wrap;
}
.cdg-footer__bottom a { color: rgba(255, 255, 255, 0.7); }
.cdg-footer__bottom a:hover { color: white; }

/* ──────────────────────────────────────────────────────────────────
   COOKIE BANNER
   ────────────────────────────────────────────────────────────────── */
.cdg-cookie {
    position: fixed;
    bottom: var(--cdg-sp-5);
    right: var(--cdg-sp-5);
    width: 380px;
    max-width: calc(100vw - var(--cdg-sp-7));
    background: var(--cdg-paper);
    border: 1px solid var(--cdg-mist);
    border-radius: var(--cdg-r-lg);
    padding: var(--cdg-sp-5);
    box-shadow: var(--cdg-shadow-lg);
    z-index: 8000;
    transform: translateY(140%);
    opacity: 0;
    transition: transform .4s cubic-bezier(.4, 0, .2, 1), opacity .25s ease;
}
.cdg-cookie.is-visible {
    transform: translateY(0);
    opacity: 1;
}
.cdg-cookie__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--cdg-sp-3);
    font-family: var(--cdg-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cdg-ink-faint);
    font-weight: 600;
}
.cdg-cookie__head__dot {
    width: 8px;
    height: 8px;
    background: var(--cdg-indigo);
    border-radius: 50%;
}
.cdg-cookie__txt {
    font-size: 14px;
    line-height: 1.6;
    color: var(--cdg-ink-soft);
    margin: 0 0 var(--cdg-sp-4);
}
.cdg-cookie__txt a {
    color: var(--cdg-indigo);
    border-bottom: 1px solid currentColor;
}
.cdg-cookie__btns {
    display: flex;
    gap: var(--cdg-sp-2);
}
.cdg-cookie__btn {
    flex: 1;
    padding: 9px 14px;
    border-radius: var(--cdg-r);
    border: 1px solid var(--cdg-rule);
    background: var(--cdg-paper);
    color: var(--cdg-ink);
    font-family: var(--cdg-body);
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.cdg-cookie__btn--accept {
    background: var(--cdg-indigo);
    color: white;
    border-color: var(--cdg-indigo);
}
.cdg-cookie__btn--accept:hover {
    background: var(--cdg-indigo-deep);
    border-color: var(--cdg-indigo-deep);
}
.cdg-cookie__btn--decline:hover {
    background: var(--cdg-canvas);
    border-color: var(--cdg-ink-faint);
}

/* ──────────────────────────────────────────────────────────────────
   STRIPE STATUS PILL (on /checkout)
   ────────────────────────────────────────────────────────────────── */
.cdg-stripe-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--cdg-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 4px 12px;
    border-radius: 100px;
    margin-left: var(--cdg-sp-3);
    font-weight: 500;
}
.cdg-stripe-pill--live { color: var(--cdg-teal-deep); border: 1px solid var(--cdg-teal-50); background: var(--cdg-teal-50); }
.cdg-stripe-pill--demo { color: #B91C1C; border: 1px solid #FEE2E2; background: #FEE2E2; }
.cdg-stripe-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}
.cdg-stripe-pill--live::before { background: var(--cdg-teal); }
.cdg-stripe-pill--demo::before { background: #DC2626; }

/* ──────────────────────────────────────────────────────────────────
   ARROW LINK + REVEAL
   ────────────────────────────────────────────────────────────────── */
.cdg-arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    font-size: 15px;
    color: var(--cdg-indigo);
    transition: gap .2s ease;
}
.cdg-arrow-link::after {
    content: "→";
    transition: transform .2s ease;
}
.cdg-arrow-link:hover { gap: 14px; }
.cdg-arrow-link:hover::after { transform: translateX(2px); }

.cdg-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.2, 1, .4, 1);
}
.cdg-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .cdg-reveal { opacity: 1; transform: none; transition: none; }
}

/* ──────────────────────────────────────────────────────────────────
   UTILITY
   ────────────────────────────────────────────────────────────────── */
.cdg-mt-3 { margin-top: var(--cdg-sp-3); }
.cdg-mt-4 { margin-top: var(--cdg-sp-4); }
.cdg-mt-6 { margin-top: var(--cdg-sp-6); }
.cdg-mt-7 { margin-top: var(--cdg-sp-7); }
.cdg-mb-7 { margin-bottom: var(--cdg-sp-7); }
.cdg-foot-link {
    padding-top: var(--cdg-sp-6);
    text-align: right;
}
@media (max-width: 600px) { .cdg-foot-link { text-align: left; } }