:root {
  --dm-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --dm-heading-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --dm-body-weight: 400;
  --dm-heading-weight: 900;
  --dm-text-color: #F9F2E8;
  --dm-muted-color: #D6C9BD;
  --dm-bg-color: #0B1020;
  --dm-surface-color: #141B2E;
  --dm-accent-color: #DDA867;
  --dm-secondary-accent-color: #7DCCD5;
  --dm-glow-color: #F08DB4;
  --dm-container-width: 1180px;
  --dm-section-spacing: 96px;
  --dm-hero-min-height: 760px;
  --dm-card-radius: 8px;
  --dm-button-radius: 8px;
  --dm-card-blur: 18px;
  --dm-card-opacity: 0.78;
  --dm-h1-size: 86px;
  --dm-h2-size: 56px;
  --dm-body-size: 16px;
  --dm-line-height: 1.72;
  --dm-nav-bg: #0B1020;
  --dm-card-bg: #141B2E;
  --dm-button-start: #DDA867;
  --dm-button-end: #F0C987;
  --dm-button-text: #090E1D;
  --dm-footer-bg: #090E1D;
  --dm-contact-container-width: 1180px;
  --dm-contact-padding-top: 58px;
  --dm-contact-padding-bottom: 86px;
  --dm-contact-hero-min-height: 440px;
  --dm-contact-hero-gap: 26px;
  --dm-contact-workspace-gap: 22px;
  --dm-contact-side-width: 38%;
  --dm-contact-card-padding: 34px;
  --dm-contact-side-card-padding: 22px;
  --dm-contact-action-height: 84px;
  --dm-contact-choice-columns: 3;
  --dm-contact-option-columns: 3;
  --dm-contact-h1-desktop: 80px;
  --dm-contact-h1-tablet: 61px;
  --dm-contact-h1-mobile: 41px;
  --dm-contact-card-bg: #141B2E;
  --dm-contact-border-color: #2B334A;
  --dm-contact-action-bg: #182238;
  --dm-contact-overlay-color: #090E1D;
  --dm-contact-step-bg: #172033;
  --dm-cta-image: url("https://images.unsplash.com/photo-1507504031003-b417219a0fde?auto=format&fit=crop&w=1400&q=80");
}
.landing-page.studio-redesign { --studio-bg: var(--dm-bg-color); --studio-bg-lift: color-mix(in srgb, var(--dm-bg-color) 82%, var(--dm-surface-color)); --studio-panel: var(--dm-card-bg); --studio-panel-soft: color-mix(in srgb, var(--dm-card-bg) 88%, var(--dm-text-color)); --studio-paper: color-mix(in srgb, var(--dm-bg-color) 78%, var(--dm-surface-color)); --studio-paper-soft: color-mix(in srgb, var(--dm-surface-color) 82%, var(--dm-accent-color)); --studio-text: var(--dm-text-color); --studio-muted: var(--dm-muted-color); --studio-line: color-mix(in srgb, var(--dm-text-color) 16%, transparent); --studio-gold: var(--dm-accent-color); --studio-teal: var(--dm-secondary-accent-color); --studio-coral: var(--dm-glow-color); --studio-ink: var(--dm-button-text); }
.landing-page, .landing-page .page-shell, .landing-page .app-shell { background: linear-gradient(180deg, color-mix(in srgb, var(--dm-accent-color) 8%, transparent), transparent 28rem), linear-gradient(90deg, color-mix(in srgb, var(--dm-text-color) 4%, transparent) 0 1px, transparent 1px 86px), linear-gradient(180deg, var(--dm-bg-color), color-mix(in srgb, var(--dm-bg-color) 88%, var(--dm-surface-color))); color: var(--dm-text-color); font-family: var(--dm-font-family); font-size: var(--dm-body-size); font-weight: var(--dm-body-weight); line-height: var(--dm-line-height); }
.public-page:not(.landing-page), .public-page:not(.landing-page) .page-shell, .public-page:not(.landing-page) .app-shell { background: linear-gradient(180deg, color-mix(in srgb, var(--dm-accent-color) 5%, transparent), transparent 28rem), linear-gradient(90deg, color-mix(in srgb, var(--dm-text-color) 4%, transparent) 0 1px, transparent 1px 86px), linear-gradient(180deg, var(--dm-bg-color), color-mix(in srgb, var(--dm-bg-color) 82%, var(--dm-surface-color))); color: var(--dm-text-color); font-family: var(--dm-font-family); font-size: var(--dm-body-size); font-weight: var(--dm-body-weight); line-height: var(--dm-line-height); }
.landing-page h1, .landing-page h2, .landing-page h3 { font-family: var(--dm-heading-font-family); font-weight: var(--dm-heading-weight); color: var(--dm-text-color); }
.public-page:not(.landing-page) h1, .public-page:not(.landing-page) h2, .public-page:not(.landing-page) h3 { font-family: var(--dm-heading-font-family); font-weight: var(--dm-heading-weight); color: var(--dm-text-color); }
.public-page:not(.landing-page) .content-wrap { width: min(var(--dm-container-width), calc(100% - 40px)); }
.public-page:not(.landing-page) .page-heading h1 { font-size: var(--dm-h2-size); }
.public-page:not(.landing-page) .page-heading p:not(.eyebrow), .public-page:not(.landing-page) .split-grid p, .public-page:not(.landing-page) label { color: var(--dm-muted-color); }
.public-page:not(.landing-page) .eyebrow { color: var(--dm-accent-color); }
.public-page:not(.landing-page) .split-grid > div, .public-page:not(.landing-page) .form-card { border-radius: var(--dm-card-radius); background: color-mix(in srgb, var(--dm-card-bg) 78%, transparent); border-color: color-mix(in srgb, var(--dm-text-color) 14%, transparent); box-shadow: 0 24px 64px color-mix(in srgb, var(--dm-glow-color) 12%, transparent); backdrop-filter: blur(var(--dm-card-blur)); -webkit-backdrop-filter: blur(var(--dm-card-blur)); }
.public-page:not(.landing-page) input, .public-page:not(.landing-page) textarea, .public-page:not(.landing-page) select { border-radius: var(--dm-card-radius); border-color: color-mix(in srgb, var(--dm-text-color) 18%, transparent); background: color-mix(in srgb, var(--dm-card-bg) 72%, transparent); color: var(--dm-text-color); }
.public-page:not(.landing-page) .primary-button { border-radius: var(--dm-button-radius); background: linear-gradient(135deg, var(--dm-button-start), var(--dm-button-end)); color: var(--dm-button-text); }
.contact-booking-page .content-wrap { width: min(var(--dm-contact-container-width), calc(100% - 48px)); padding-top: var(--dm-contact-padding-top); padding-bottom: var(--dm-contact-padding-bottom); } .contact-booking-page .contact-hero { gap: var(--dm-contact-hero-gap); grid-template-columns: minmax(0, 1fr) minmax(280px, var(--dm-contact-side-width)); } .contact-booking-page .contact-workspace { gap: var(--dm-contact-workspace-gap); grid-template-columns: minmax(0, 1fr) minmax(280px, var(--dm-contact-side-width)); } .contact-booking-page .contact-hero-copy, .contact-booking-page .contact-hero-visual, .contact-booking-page .contact-intake-form, .contact-booking-page .contact-detail-card, .contact-booking-page .contact-process-card { border-radius: min(var(--dm-card-radius), 8px); background: color-mix(in srgb, var(--dm-contact-card-bg) 78%, transparent); border-color: color-mix(in srgb, var(--dm-contact-border-color) 84%, transparent); box-shadow: 0 24px 64px color-mix(in srgb, var(--dm-glow-color) 12%, transparent); } .contact-booking-page .contact-hero-copy, .contact-booking-page .contact-hero-visual { min-height: var(--dm-contact-hero-min-height); } .contact-booking-page .contact-hero-copy, .contact-booking-page .contact-intake-form { padding: var(--dm-contact-card-padding); } .contact-booking-page .contact-detail-card, .contact-booking-page .contact-process-card { padding: var(--dm-contact-side-card-padding); } .contact-booking-page .contact-hero-copy h1 { color: var(--dm-text-color); font-size: var(--dm-contact-h1-desktop); } .contact-booking-page .contact-quick-actions a, .contact-booking-page .contact-choice-grid label, .contact-booking-page .contact-option-grid label { border-radius: min(var(--dm-card-radius), 8px); border-color: color-mix(in srgb, var(--dm-contact-border-color) 84%, transparent); background: color-mix(in srgb, var(--dm-contact-action-bg) 72%, transparent); } .contact-booking-page .contact-quick-actions a { min-height: var(--dm-contact-action-height); } .contact-booking-page .contact-choice-grid { grid-template-columns: repeat(var(--dm-contact-choice-columns), minmax(0, 1fr)); } .contact-booking-page .contact-option-grid { grid-template-columns: repeat(var(--dm-contact-option-columns), minmax(0, 1fr)); } .contact-booking-page .contact-hero-visual::after { background: linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--dm-contact-overlay-color) 90%, transparent)); } .contact-booking-page .contact-hero-visual figcaption { background: color-mix(in srgb, var(--dm-contact-overlay-color) 78%, transparent); border-color: color-mix(in srgb, var(--dm-contact-border-color) 84%, transparent); } .contact-booking-page .contact-process-card li::before { background: color-mix(in srgb, var(--dm-contact-step-bg) 82%, transparent); color: var(--dm-secondary-accent-color); } .contact-booking-page .contact-hero-visual img { object-position: center center; } @media (max-width: 1080px) { .contact-booking-page .contact-hero, .contact-booking-page .contact-workspace { grid-template-columns: 1fr; } .contact-booking-page .contact-hero-copy h1 { font-size: var(--dm-contact-h1-tablet); } } @media (max-width: 680px) { .contact-booking-page .content-wrap { width: min(100% - 28px, var(--dm-contact-container-width)); } .contact-booking-page .contact-hero-copy, .contact-booking-page .contact-hero-visual { min-height: auto; } .contact-booking-page .contact-hero-copy h1 { font-size: var(--dm-contact-h1-mobile); } .contact-booking-page .contact-choice-grid, .contact-booking-page .contact-option-grid, .contact-booking-page .contact-side-panel { grid-template-columns: 1fr; } }
.landing-page .studio-container, .landing-page .studio-nav, .studio-redesign .footer-newsletter, .studio-redesign .footer-grid, .studio-redesign .footer-bottom { width: min(var(--dm-container-width), calc(100% - 40px)); }
.landing-page .studio-nav { background: color-mix(in srgb, var(--dm-nav-bg) 76%, transparent); border-color: color-mix(in srgb, var(--dm-text-color) 18%, transparent); border-radius: min(var(--dm-card-radius), 8px); }
.landing-page .studio-hero { min-height: min(var(--dm-hero-min-height), 88svh); }
.landing-page .studio-hero h1 { font-size: var(--dm-h1-size); }
.landing-page .studio-section, .landing-page .studio-process, .landing-page .studio-editorial { padding-top: var(--dm-section-spacing); padding-bottom: var(--dm-section-spacing); }
.landing-page .studio-section h2, .landing-page .studio-cta h2 { font-size: var(--dm-h2-size); }
.landing-page .pricing-heading h2 { color: #fff5ec; font-family: Georgia, "Times New Roman", serif; font-size: 2.9rem; font-weight: 400; line-height: 1.08; } .landing-page .pricing-price { font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
.landing-page .studio-eyebrow, .landing-page .service-card-index, .landing-page .review-card div, .landing-page .footer-grid a:hover { color: var(--dm-secondary-accent-color); }
.landing-page .studio-hero-copy > p:not(.studio-eyebrow), .landing-page .studio-section-head > p:not(.studio-eyebrow), .landing-page .studio-reviews p, .landing-page .studio-cta p, .landing-page .footer-brand p, .landing-page .footer-contact p, .landing-page .footer-grid a { color: var(--dm-muted-color); }
.landing-page .studio-stats { background: color-mix(in srgb, var(--dm-bg-color) 88%, var(--dm-surface-color)); color: var(--dm-text-color); } .landing-page .stats-grid strong { color: var(--dm-text-color); } .landing-page .stats-grid span { color: var(--dm-muted-color); }
.landing-page .studio-editorial, .landing-page .studio-process { background: linear-gradient(180deg, color-mix(in srgb, var(--dm-accent-color) 4%, transparent), transparent 36%), color-mix(in srgb, var(--dm-bg-color) 88%, var(--dm-surface-color)); color: var(--dm-text-color); } .landing-page .studio-editorial h2 { color: var(--dm-text-color); } .landing-page .studio-editorial p { color: var(--dm-muted-color); } .landing-page .studio-editorial .studio-eyebrow { color: var(--dm-accent-color); }
.landing-page .service-card, .landing-page .process-card, .landing-page .review-card, .landing-page .studio-hero-panel, .landing-page .hero-proof-strip, .landing-page .portfolio-card, .landing-page .studio-editorial figure, .landing-page .cta-panel { border-radius: min(var(--dm-card-radius), 8px); background: color-mix(in srgb, var(--dm-card-bg) 78%, transparent); border-color: color-mix(in srgb, var(--dm-text-color) 14%, transparent); box-shadow: 0 24px 64px color-mix(in srgb, var(--dm-glow-color) 16%, transparent); backdrop-filter: blur(var(--dm-card-blur)); -webkit-backdrop-filter: blur(var(--dm-card-blur)); }
.landing-page .studio-button, .landing-page .studio-nav-action, .landing-page .portfolio-card figcaption, .landing-page .footer-newsletter input, .landing-page .footer-newsletter button { border-radius: min(var(--dm-button-radius), 8px); }
.landing-page .studio-button.primary, .landing-page .footer-newsletter button, .landing-page .footer-logo span, .landing-page .footer-social a, .landing-page .studio-logo span { background: linear-gradient(135deg, var(--dm-button-start), var(--dm-button-end)); color: var(--dm-button-text); }
.landing-page .studio-hero-media img { object-position: center 44%; }
.landing-page .studio-editorial figure img { object-position: center center; }
.landing-page .cta-panel { background-image: linear-gradient(115deg, color-mix(in srgb, var(--dm-bg-color) 42%, transparent), color-mix(in srgb, var(--dm-bg-color) 92%, transparent)), var(--dm-cta-image); background-position: center center; background-size: cover; }
.landing-page .landing-footer { background: var(--dm-footer-bg); color: var(--dm-muted-color); }
@media (max-width: 980px) { :root { --dm-h1-size: 66px; --dm-h2-size: 42px; } }
@media (max-width: 820px) { .landing-page .pricing-heading h2 { font-size: 2.35rem; } }
@media (max-width: 640px) { :root { --dm-h1-size: 41px; --dm-h2-size: 34px; --dm-body-size: 15px; --dm-section-spacing: 52px; } .landing-page .studio-container, .landing-page .studio-nav, .studio-redesign .footer-newsletter, .studio-redesign .footer-grid, .studio-redesign .footer-bottom { width: min(100% - 24px, var(--dm-container-width)); } .landing-page .pricing-heading h2 { font-size: 2rem; } }