/* Dark full-page reference skin. Testimonial and About keep their approved compositions. */
:root {
  --ref-bg: var(--color-bg);
  --ref-surface: var(--color-surface-1);
  --ref-surface-2: var(--color-surface-2);
  --ref-ink: var(--color-heading);
  --ref-body: var(--color-text);
  --ref-muted: var(--color-muted);
  --ref-line: var(--color-border);
  --ref-accent: var(--color-accent);
  --ref-accent-strong: var(--color-accent-soft);
  --ref-accent-ink: var(--color-accent-ink);
  --ref-white: #fff;
  --ref-deep: var(--color-bg-deep);
  --ref-case-1: color-mix(in srgb, var(--color-surface-1) 88%, var(--color-accent));
  --ref-case-2: color-mix(in srgb, var(--color-surface-2) 90%, var(--color-accent));
  --ref-case-3: color-mix(in srgb, var(--color-surface-1) 94%, #c9cbff);
}
html { background-color: var(--ref-bg) !important; max-width: 100%; }
body { background-color: var(--ref-bg) !important; color: var(--ref-body); font-family: var(--font-sans); max-width: 100%; }
.container { max-width: 1180px; width: calc(100% - 80px); }
.section { scroll-margin-top: 78px; }
.skip-link:not(:focus) { transform: translateY(-180%); }
.eyebrow { font-family: var(--font-sans); color: var(--ref-muted); font-size: 11px; font-weight: 600; letter-spacing: .1em; }
.eyebrow > span::after { content: none; }
.section-heading h2, .faq-intro h2, .pricing-section h2, .home-playbook h2, .cta-inner h2 { font-family: var(--font-display); font-weight: 500; letter-spacing: -.025em; line-height: 1.12; color: var(--ref-ink); }
.section-heading h2 .muted-heading, .faq-intro .muted-heading, .pricing-section h2 .muted-heading { color: var(--ref-accent-strong); }
.text-link { color: var(--ref-accent-strong); }
.button-primary { background: var(--ref-accent); color: var(--ref-accent-ink); box-shadow: 0 6px 16px rgba(84,88,255,.21); }
.button-primary:hover { background: var(--color-accent-hover); color: var(--ref-accent-ink); }
.button-outline { border-color: var(--ref-line); color: var(--ref-ink); }
.button-outline:hover { background: var(--ref-surface-2); border-color: var(--ref-accent-strong); }

/* Fixed navy header with pill navigation and a filled circular action. */
.site-header, .site-header.is-scrolled { background: color-mix(in srgb, var(--ref-deep) 94%, transparent); border-color: rgba(255,255,255,.08); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.header-inner { height: 70px; gap: 18px; }
.brand-link { flex-shrink: 0; }
.wordmark { font-family: var(--font-display); color: var(--ref-white); font-size: 23px; font-weight: 600; letter-spacing: -.035em; }
.wordmark > span { color: var(--ref-accent-strong); }
.desktop-nav { margin-left: auto; margin-right: auto; }
.nav-pill, .desktop-nav-list { display: flex; align-items: center; gap: 4px; padding: 10px 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09); border-radius: 999px; }
.nav-pill a, .desktop-nav-list a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; color: var(--ref-body); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: color .2s, background .2s; }
.nav-link::after, .nav-link:hover::after, .nav-link.is-active::after, .nav-pill a::after, .desktop-nav-list a::after { display: none !important; }
.nav-pill a:hover, .desktop-nav-list a:hover, .nav-pill a.is-active { background: rgba(255,255,255,.1); color: var(--ref-white); }
.header-actions { gap: 10px; }
.header-cta { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 4px 4px 18px; gap: 14px; background: var(--ref-white); color: var(--ref-deep); border: 0; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.header-cta:hover { background: var(--color-heading-warm); color: #0f1020; }
body .site-header .header-cta.button-small { color: #0f1020; }
.header-cta-icon { display: grid; place-items: center; width: 34px; height: 34px; color: var(--ref-white); background: var(--ref-accent); border-radius: 50%; }
.header-cta-icon svg { width: 16px; height: 16px; }
.mobile-menu-toggle { color: var(--ref-white); }
.mobile-nav { background: var(--ref-deep); color: var(--ref-white); }
.mobile-nav a { color: var(--ref-white); border-color: rgba(255,255,255,.1); }

/* Hero: dark grid, Fraunces headline, white stat bar. */
.hero.hero--grid { background: var(--ref-bg); padding-block: 153px 84px; }
.hero.hero--grid::before { background-image: linear-gradient(rgba(255,255,255,.043) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.043) 1px,transparent 1px); }
.hero.hero--grid::after { background: radial-gradient(circle,var(--color-hero-glow-strong),transparent 65%); opacity: .62; }
.hero-badge { color: var(--ref-body); background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.13); }
.hero-badge-highlight { background: var(--ref-accent); color: var(--ref-accent-ink); }
.hero-badge-text, .hero-badge > svg { color: var(--ref-body); }
.hero h1 { font-family: var(--font-display); color: var(--ref-white); font-weight: 500; font-size: clamp(52px,7vw,84px); letter-spacing: -.035em; }
.hero h1 > span { color: var(--ref-accent-strong); }
.hero h2 { margin: 11px 0 0; font-family: var(--font-display); color: var(--ref-white); font-size: clamp(37px,5.8vw,66px); font-weight: 500; line-height: 1.14; letter-spacing: -.03em; }
.hero h2 em { font-family: var(--font-display); font-style: italic; color: var(--ref-accent-strong); font-weight: 400; letter-spacing: -.035em; }
.hero-description { color: var(--ref-body); font-size: 17px; max-width: 580px; }
.hero-actions .button { min-height: 48px; padding-inline: 22px; }
.hero-secondary { background: rgba(255,255,255,.07); color: var(--ref-white); border-color: rgba(255,255,255,.2); }
.hero-secondary:hover { background: rgba(255,255,255,.13); border-color: var(--ref-accent-strong); color: var(--ref-white); }
.hero-stats { background: var(--ref-surface-2); border-color: var(--ref-line); box-shadow: 0 12px 32px -18px rgba(0,0,0,.45); }
.hero-stats > div { border-color: var(--ref-line); }
.hero-stats dt, .hero-stats .is-text dt { color: var(--ref-ink); }
.hero-stats dd { color: var(--ref-muted); }
.technology-section { background: var(--ref-bg); border-color: var(--ref-line); }
.technology-inner > p { color: var(--ref-ink); }
.technology-inner > p > span, .technology-logos { color: var(--ref-muted); }

/* Rounded image-led service cards. */
.services-section { padding-block: 115px 130px; background: var(--ref-bg); }
.services-section .container, .work-section .container, .home-playbook .container { max-width: 1180px; }
.services-section .section-heading, .work-section .section-heading { align-items: center; margin-bottom: 0; }
.services-section .eyebrow, .work-section .eyebrow, .home-playbook .eyebrow { color: var(--ref-muted); font-size: 11px; font-weight: 700; }
.services-section h2, .work-section h2 { font-family: var(--font-display); font-size: clamp(34px,3.6vw,48px); letter-spacing: -.025em; font-weight: 500; color: var(--ref-ink); }
.services-section .muted-heading, .work-section .muted-heading { color: var(--ref-accent-strong); }
.home-section-link { background: var(--ref-accent); color: var(--ref-accent-ink); border: 0; padding: 0 23px; min-height: 48px; gap: 15px; box-shadow: 0 8px 20px rgba(84,88,255,.17); font-size: 13px; }
.home-section-link > span { background: none; color: inherit; width: auto; height: auto; }
.home-section-link:hover { background: var(--color-accent-hover); }
.home-section-link--light { background: var(--ref-surface); border: 1px solid var(--ref-line); box-shadow: none; color: var(--ref-ink); }
.home-section-link--light > span { background: none; color: inherit; }
.home-section-link--light:hover { background: var(--ref-accent); color: var(--ref-accent-ink); }
.home-services-list { display: flex; flex-direction: column; gap: 24px; border: none; margin-top: 58px; }
.home-service-row { grid-template-columns: 35% 60px minmax(0,1fr) auto; min-height: 0; gap: 0; border: 1px solid var(--ref-line); border-radius: 24px; padding: 24px; background: var(--ref-surface); box-shadow: 0 1px 2px rgba(0,0,0,.12); transition: transform .3s, border-color .3s, box-shadow .3s; }
.home-service-row:hover { transform: translateY(-3px); border-color: var(--ref-accent-strong); box-shadow: 0 18px 36px -27px rgba(84,88,255,.45); }
.home-service-image { height: auto; aspect-ratio: 16/10; border-radius: 12px; background: var(--ref-surface-2); }
.home-service-number { text-align: center; color: var(--ref-accent-strong); font-size: 13px; }
.home-service-copy { padding: 0 30px 0 12px; }
.home-service-copy h3 { max-width: 450px; font-family: var(--font-display); font-size: clamp(22px,2.3vw,29px); font-weight: 500; letter-spacing: -.02em; color: var(--ref-ink); }
.home-service-copy p { max-width: 480px; margin-top: 10px; font-size: 14px; color: var(--ref-muted); }
.home-service-more { display: inline-flex; justify-content: center; align-items: center; gap: 9px; min-height: 44px; padding: 0 16px; border: 1px solid var(--ref-line); border-radius: 999px; font-size: 12px; color: var(--ref-ink); }
.home-service-more span { width: auto; height: auto; border: 0; }
.home-service-more:hover { border-color: var(--ref-accent-strong); color: var(--ref-accent-strong); }
.home-service-more:hover span { background: none; border: 0; color: inherit; }
body .home-service-row { background: var(--ref-surface); border-color: var(--ref-line); }
body .home-service-row .home-service-number { color: var(--ref-accent-strong); }
body .home-service-row .home-service-copy h3 { color: var(--ref-ink); }
body .home-service-row .home-service-copy p { color: var(--ref-muted); }
body .home-service-row .home-service-more { color: var(--ref-ink); border-color: var(--ref-line); }

/* Sticky proof-of-work stories driven by published Works. */
.work-section { padding-block: 112px 125px; background: var(--ref-bg); }
.home-case-list { gap: 24px; margin-top: 58px; }
.home-case-study { position: relative; top: auto; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); min-height: 435px; padding: 42px 48px; gap: 20px 40px; border-radius: 28px; background: var(--ref-case-1); border-color: var(--ref-line); box-shadow: 0 24px 42px -30px rgba(0,0,0,.65); }
.home-case-list--sticky .home-case-study { position: sticky; top: 85px; }
.home-case-study:nth-child(3n + 2) { background: var(--ref-case-2); }
.home-case-study:nth-child(3n + 3) { background: var(--ref-case-3); }
.home-case-list--sticky .home-case-study:nth-child(1) { z-index: 1; }
.home-case-list--sticky .home-case-study:nth-child(2) { z-index: 2; }
.home-case-list--sticky .home-case-study:nth-child(3) { z-index: 3; }
.portfolio-page .home-case-study, .archive .home-case-study { position: relative; top: auto; z-index: auto; }
.home-case-copy { max-width: 490px; padding: 0 0 0 3px; }
.home-case-eyebrow { color: var(--indigo-300); font-size: 10px; letter-spacing: .07em; }
.home-case-copy h3 { font-family: var(--font-display); font-size: clamp(30px,3vw,42px); font-weight: 500; line-height: 1.15; letter-spacing: -.03em; color: var(--ref-ink); }
.home-case-copy h3 button, .home-case-copy h3 a { color: inherit; }
.home-case-summary { color: var(--ref-body); font-size: 14px; line-height: 1.8; }
.home-case-visual { height: 250px; border-radius: 13px; background: var(--ref-surface-2); }
.home-case-button { color: var(--ref-white); background: var(--ref-deep); }
.home-case-button span { background: var(--ref-white); color: var(--ref-deep); }
.home-case-details { gap: 12px 22px; }
.home-case-details dt { color: var(--ref-muted); }
.home-case-details dd { color: var(--ref-body); }
.home-case-details > div { border-color: rgba(255,255,255,.14); }
.home-case-fallback { color: var(--ref-ink); }

/* Preserve the existing testimonial section: soft lavender panel and dark ink. */
.testimonial-section { background: var(--indigo-200); color: var(--ink-950); text-align: center; padding-block: 74px 54px; }
.testimonial-section .eyebrow { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.testimonial-section .testimonial-bottom > p { display: none; }
.testimonial-section .testimonial-content { min-height: 0; padding-left: 0; }
.testimonial-section blockquote { position: relative; max-width: 940px; margin: 0 auto 30px; color: var(--ink-950); font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(28px,3.3vw,44px); letter-spacing: -.025em; line-height: 1.32; text-align: center; }
.testimonial-section .quote-mark { position: static; display: block; margin: 0 0 -12px; color: var(--indigo-600); font-family: var(--font-display); font-style: italic; font-size: 70px; line-height: 1; }
.testimonial-section .testimonial-author { justify-content: center; align-items: center; margin-top: 0; }
.testimonial-section .testimonial-author strong { color: var(--ink-950); font-family: var(--font-display); font-size: 16px; font-style: italic; font-weight: 500; }
.testimonial-section .testimonial-author > span:last-child > span { color: var(--ink-600); }
.testimonial-section .testimonial-bottom { justify-content: center; align-items: center; margin-top: 36px; }
.testimonial-section .carousel-controls { justify-content: center; }
.testimonial-section .carousel-controls > span { color: var(--ink-950); }
.testimonial-section .carousel-controls .icon-button { border-color: var(--ink-400); color: var(--ink-950); }
.testimonial-section .carousel-controls .icon-button:hover { background: var(--indigo-100); border-color: var(--ink-400); }
.testimonial-section .author-avatar { background: var(--indigo-700); color: #fff; }

/* Preserve the existing About section: white panel, portrait left, ink text right. */
.about-section { background: #fefefe; color: #0f1020; }
.about-section .eyebrow, .about-section .eyebrow > span { color: #5458ff; opacity: 1; }
.about-section h2, .about-section .about-intro h2 { color: #0f1020; }
.about-section .muted-heading { color: #5458ff; }
.about-section p, .about-section .about-intro > p:not(.eyebrow) { color: #5b5e7a; }
.about-section .home-about-highlights div { color: #2b2d45; }
.about-section .home-about-highlights svg { color: #5458ff; }
.about-section .signature { color: #5458ff; }
.about-section .signature > span { color: #5b5e7a; border-color: #e1e3ee; }
.about-section .about-link { color: #3f42e6; }
.about-section .home-about-media { background: linear-gradient(145deg,#e5e7ff,#f5f6fa 60%,#eef0ff); }
.about-section .home-about-media-mark { color: #fff; background: #5458ff; }

/* Playbook: dark process section with the orbit motif and five steps. */
.home-playbook { padding-block: 120px; background: var(--ref-bg); color: var(--ref-ink); }
.home-playbook h2 { max-width: 690px; margin: 14px 0 50px; color: var(--ref-ink); }
.home-playbook h2 span { color: var(--ref-accent-strong); }
.playbook-layout { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 95px; }
.playbook-art { position: relative; display: grid; place-items: center; min-height: 460px; isolation: isolate; }
.playbook-art::before { content: ''; position: absolute; z-index: -1; inset: 10%; background: radial-gradient(circle,var(--color-accent-10),transparent 72%); }
.playbook-orbit { position: absolute; border: 1px solid var(--ref-line); border-radius: 50%; }
.orbit-one { width: 300px; height: 300px; }
.orbit-two { width: 370px; height: 370px; border-style: dashed; }
.orbit-three { width: 435px; height: 435px; border-color: var(--color-border-soft); }
.playbook-core { display: grid; place-items: center; width: 145px; height: 145px; transform: rotate(-45deg); border-radius: 33px; color: var(--ref-white); background: linear-gradient(140deg,var(--ref-accent-strong),var(--ref-accent)); box-shadow: 0 22px 50px rgba(63,66,230,.27); }
.playbook-core svg { transform: rotate(45deg); }
.orbit-dot { position: absolute; width: 14px; height: 14px; border: 3px solid var(--ref-surface); border-radius: 50%; background: var(--ref-accent); box-shadow: 0 1px 12px rgba(84,88,255,.35); }
.dot-one { top: 12%; left: 24%; } .dot-two { right: 16%; top: 32%; } .dot-three { bottom: 17%; left: 27%; }
.playbook-steps { display: grid; gap: 0; padding: 0; list-style: none; }
.playbook-steps li { display: grid; grid-template-columns: 62px 38px 1fr; align-items: center; gap: 18px; min-height: 85px; border-bottom: 1px solid var(--ref-line); }
.playbook-steps li:last-child { border: 0; }
.playbook-step-index { font-size: 11px; font-weight: 700; color: var(--ref-muted); white-space: nowrap; }
.playbook-step-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--ref-accent); color: var(--ref-accent-ink); }
.playbook-step-copy { display: grid; gap: 5px; }
.playbook-step-copy strong { color: var(--ref-ink); font-size: 14px; }
.playbook-step-copy > span { color: var(--ref-muted); font-size: 12px; line-height: 1.55; }
.playbook-stack { display: grid; grid-template-columns: 240px 1fr; gap: 65px; margin-top: 82px; padding-top: 35px; border-top: 1px solid var(--ref-line); }
.playbook-stack h3 { font-family: var(--font-display); font-size: 23px; font-weight: 500; color: var(--ref-ink); }
.playbook-stack p { margin-top: 11px; font-size: 12px; line-height: 1.7; color: var(--ref-muted); }
.playbook-stack a, .playbook-stack button { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--ref-accent-strong); font-size: 12px; font-weight: 600; }
.playbook-stack ul { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0 24px; list-style: none; padding: 0; }
.playbook-stack li { padding: 9px 0; border-bottom: 1px solid var(--ref-line); color: var(--ref-body); font-size: 12px; }
.playbook-stack li::before { content: '·'; margin-right: 8px; color: var(--ref-accent-strong); }

/* Pricing, FAQ, CTA and footer on the dark canvas. */
.pricing-section, .faq-section { background: var(--ref-bg); color: var(--ref-ink); }
.pricing-section { padding-block: 112px 125px; }
.pricing-section .section-intro, .faq-intro > p:not(.eyebrow) { color: var(--ref-muted); }
.pricing-section .eyebrow > span, .faq-section .eyebrow > span { color: var(--ref-muted); opacity: 1; }
.pricing-switch { background: var(--ref-surface-2); border: 1px solid var(--ref-line); border-radius: 999px; }
.pricing-switch button { border-radius: 999px; color: var(--color-heading-soft); }
.pricing-switch button[aria-pressed=true] { color: var(--ref-accent-ink); background: var(--ref-accent); }
.pricing-plan { padding: 31px; min-height: 535px; border: 1px solid var(--ref-line); border-radius: 24px; background: var(--ref-surface); }
.pricing-plan:hover { border-color: var(--ref-accent-strong); }
.featured-plan { background: var(--ref-surface); border-color: var(--ref-accent); box-shadow: 0 12px 32px -12px rgba(63,66,230,.25); }
.plan-name-line h3, .plan-price strong { color: var(--ref-ink); font-family: var(--font-display); }
.plan-description, .price-suffix, .price-prefix, .plan-features li, .pricing-note { color: var(--ref-body); }
.plan-features li svg, .plan-features li::before { color: var(--ref-accent-strong); }
.plan-recommended { color: var(--ref-accent-strong); background: var(--color-accent-10); }
.pricing-plan .button { border-radius: 999px; }
.faq-section { border-top: 1px solid var(--ref-line); padding-block: 112px 125px; }
.faq-item, .faq-item:first-child { border-color: var(--ref-line); }
.faq-item h3 button { color: var(--ref-ink); }
.faq-item h3 button:hover, .faq-item.is-open h3 button { color: var(--ref-accent-strong); }
.faq-answer p { color: var(--ref-body); }
.faq-intro .text-link { color: var(--ref-accent-strong); }
.cta-section { background: var(--ref-deep); color: var(--ref-white); padding-block: 125px; }
.cta-ambient { background: radial-gradient(ellipse 55% 70% at 50% 117%,rgba(84,88,255,.26),transparent 75%); }
.cta-section::before, .cta-section::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: radial-gradient(var(--ref-accent-strong) 1px,transparent 1px); background-size: 19px 19px; mask-image: radial-gradient(ellipse 45% 85% at 50% 100%,black 15%,transparent 72%); }
.cta-section::before { transform: scaleX(.75); opacity: .25; }
.cta-inner { z-index: 1; }
.cta-inner h2 { color: var(--ref-white); font-family: var(--font-display); }
.cta-inner h2 em { color: var(--ref-accent-strong); }
.cta-inner > p:not(.eyebrow), .cta-footnote { color: var(--ref-body); }
.cta-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 30px; }
.cta-inner > .button { margin-top: 0; }
.cta-email { display: inline-flex; align-items: center; min-height: 48px; padding: 0 19px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; color: var(--ref-white); font-size: 13px; }
.cta-email:hover { background: rgba(255,255,255,.08); }
.site-footer { color: var(--ref-body); background: var(--ref-deep); border-color: rgba(255,255,255,.1); }
.site-footer .wordmark { color: var(--ref-white); }
.site-footer .container { max-width: 1180px; }
.footer-main.footer-columns { display: grid; grid-template-columns: 1.35fr .85fr 1.15fr 1fr; gap: 32px; padding: 36px 40px; background: var(--ref-surface); border: 1px solid rgba(255,255,255,.07); border-radius: 18px; }
.footer-columns > nav, .footer-columns .footer-contact { display: flex; align-items: flex-start; flex-direction: column; gap: 13px; }
.footer-columns h3 { margin: 0 0 5px; font: 700 11px var(--font-sans); letter-spacing: .08em; color: var(--ref-accent-strong); }
.footer-columns .footer-brand p { max-width: 230px; margin-top: 19px; font-size: 12px; line-height: 1.75; }
.footer-columns nav a, .footer-columns .footer-contact a, .footer-columns .footer-contact span { font-size: 12px; line-height: 1.55; }
.footer-columns .footer-contact span { color: var(--ref-muted); }
.footer-social { margin-top: 12px; display: flex; flex-direction: column; align-items: center; gap: 13px; padding: 22px; background: var(--ref-surface); border: 1px solid rgba(255,255,255,.07); border-radius: 15px; }
.footer-social > span { color: var(--ref-accent-strong); font-size: 11px; font-weight: 700; }
.footer-social > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.footer-social a { border: 1px solid rgba(255,255,255,.12); border-radius: 7px; padding: 8px 11px; color: var(--ref-body); font-size: 11px; }
.footer-social a:hover { background: var(--color-surface-4); color: var(--ref-white); }
.footer-main p, .footer-bottom { color: var(--ref-muted); }
.footer-main nav a, .footer-main nav button { color: var(--ref-body); }
.footer-main nav a:hover, .footer-main nav button:hover { color: var(--ref-accent-strong); }
.footer-bottom { border-color: rgba(255,255,255,.1); }
.modal { background: var(--ref-surface); color: var(--ref-body); border-color: var(--ref-line); }
.modal .eyebrow { color: var(--ref-body); }
.modal-heading h2 { color: var(--ref-ink); }
.inquiry-form input, .inquiry-form textarea, .inquiry-form select { background: var(--ref-bg); border-color: var(--ref-line); color: var(--ref-ink); }
.inquiry-form label { color: var(--ref-body); }

/* Inner pages share the dark editorial canvas. */
.portfolio-page, .services-page, .about-page, .contact-page, .journal, .article-page, .portfolio-single { background: var(--ref-bg); color: var(--ref-body); }
.page-hero { background: var(--ref-bg); }
html, body { max-width: 100%; }
body:has(.contact-page) { overflow-x: clip; }
.contact-page, .contact-page .page-hero, .contact-page .contact-layout, .contact-page .contact-faq, .contact-page .cta-card { max-width: 100%; overflow-x: clip; }
.contact-page .inquiry-form .hp-field { position: fixed !important; left: -10000px !important; width: 1px !important; min-width: 0 !important; max-width: 1px !important; opacity: 0; pointer-events: none; }
.page-title, .journal-title, .article-title, .portfolio-single h1 { color: var(--ref-ink); font-family: var(--font-display); }
.page-title em, .page-title-sub em, .page-title-dot { color: var(--ref-accent-strong); }
.page-title-sub { color: var(--ref-ink); }
.page-intro, .journal-intro, .article-lead { color: var(--ref-muted); }
.portfolio-page .home-case-list { margin-top: 24px; }
.journal-card, .contact-form-card, .contact-detail-card, .contact-hire-card, .contact-availability, .about-values .benefit, .about-side-card { background: var(--ref-surface); border-color: var(--ref-line); color: var(--ref-body); }
.journal-card-title, .contact-form-head h2, .contact-hire-card h2, .service-detail-head h2, .about-story-grid h2, .toolkit-grid h2, .process-step h3 { color: var(--ref-ink); }
.journal-card-excerpt, .journal-card-meta, .contact-form-head p:not(.eyebrow), .contact-hire-card p:not(.eyebrow), .service-detail-head p, .service-includes li, .about-story-copy p, .toolkit-grid > div > p:not(.eyebrow), .process-step p, .about-direct p, .page-intro, .journal-intro { color: var(--ref-muted); }
.portfolio-page .chip[aria-pressed="true"], .portfolio-page .chip[aria-current="page"] { color: var(--ref-accent-ink); background: var(--color-accent-hover); }
.portfolio-meta, .portfolio-meta > span, .portfolio-filters .chip { color: var(--ref-muted); }
.portfolio-meta strong { color: var(--ref-ink); }
.services-page .service-detail, .services-page .process-step, .about-page .about-values .benefit, .about-page .about-quote { border-color: var(--ref-line); }
.services-page .service-detail-number, .services-page .service-detail-icon, .contact-page .contact-detail-icon, .about-page .signature, .about-page .muted-heading, .about-page .stack-list li, .contact-page .contact-quick > a, .contact-page .contact-socials a { color: var(--ref-accent-strong); }
.services-page .services-process, .about-page .about-values, .about-page .about-process { background: transparent; border-color: var(--ref-line); }
.services-page .services-process .section-heading .section-intro, .about-page .about-values .section-heading .section-intro, .about-page .about-process .section-intro, .about-page .about-quote > .container > p { color: var(--ref-muted); }
.services-page .services-process .eyebrow > span, .about-page .about-values .benefit-number, .about-page .about-process .eyebrow > span, .contact-page .eyebrow > span { color: var(--ref-muted); opacity: 1; }
.about-page .signature > span, .about-page .about-direct a { color: var(--ref-muted); }
.about-page .about-direct a { color: var(--ref-accent-strong); }
.about-page .about-quote blockquote, .about-page .stack-list li { color: var(--ref-ink); }
.about-page .stack-list li { border-color: var(--ref-line); background: var(--ref-surface); }
.contact-page .contact-form-head p:not(.eyebrow), .contact-page .inquiry-form label, .contact-page .inquiry-form .field-optional, .contact-page .inquiry-form .field-help, .contact-page .inquiry-form .form-privacy, .contact-page .inquiry-form .consent-field, .contact-page .inquiry-form .consent-field > span { color: var(--ref-muted); }
.contact-page .inquiry-form input, .contact-page .inquiry-form textarea, .contact-page .inquiry-form select { background: var(--ref-bg); border: 1px solid var(--ref-line); color: var(--ref-ink); }
.contact-page .inquiry-form input::placeholder, .contact-page .inquiry-form textarea::placeholder { color: var(--ref-muted); }
.contact-page .contact-detail-row strong { color: var(--ref-muted); }
.contact-page .contact-detail-row > span:last-child > span { color: var(--ref-ink); }
.contact-page .contact-faq { background: var(--ref-bg); border-color: var(--ref-line); }

@keyframes ofs-dots { from { opacity: .32; } to { opacity: .58; } }
.cta-section::after { animation: ofs-dots 8s ease-in-out infinite alternate; }

@media (max-width: 1050px) {
  .header-inner { gap: 10px; }
  .nav-pill a, .desktop-nav-list a { padding-inline: 10px; font-size: 12px; }
  .home-service-row { grid-template-columns: 32% 45px minmax(0,1fr) auto; gap: 0; }
  .home-service-copy { padding-right: 15px; }
  .playbook-layout { gap: 25px; }
}
@media (max-width: 860px) {
  .desktop-nav { display: none; }
  .container { width: calc(100% - 40px); }
  .mobile-menu-toggle { display: inline-flex; }
  .hero.hero--grid { padding-block: 128px 70px; }
  .home-service-row { grid-template-columns: 30% 35px minmax(0,1fr); gap: 10px; }
  .home-service-more { grid-column: 3; justify-self: start; }
  .playbook-layout { grid-template-columns: 1fr 1fr; }
  .playbook-art { transform: scale(.75); min-height: 350px; }
  .playbook-stack { grid-template-columns: 1fr; gap: 20px; }
  .footer-main.footer-columns { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 650px) {
  .container { width: calc(100% - 40px); }
  .header-inner { height: 72px; }
  .header-cta { padding: 4px 4px 4px 12px; font-size: 10px; }
  .header-cta-icon { width: 29px; height: 29px; }
  .hero.hero--grid { padding-block: 125px 65px; }
  .hero h1 { font-size: clamp(43px,10vw,60px); }
  .hero h2 { font-size: clamp(32px,8vw,46px); }
  .hero-description { font-size: 14px; }
  .services-section, .work-section, .home-playbook, .pricing-section, .faq-section { padding-block: 78px 90px; }
  .services-section .section-heading, .work-section .section-heading { display: block; }
  .home-section-link { margin-top: 22px; }
  .home-services-list { margin-top: 35px; gap: 15px; }
  .home-service-row { grid-template-columns: 112px minmax(0,1fr); padding: 14px; gap: 8px 14px; border-radius: 17px; }
  .home-service-image { grid-row: span 3; height: 116px; aspect-ratio: auto; }
  .home-service-number { display: none; }
  .home-service-copy { padding: 0; }
  .home-service-copy h3 { font-size: 18px; }
  .home-service-copy p { font-size: 11px; }
  .home-service-more { grid-column: 2; margin: 0; min-height: 30px; padding-inline: 10px; font-size: 11px; }
  .home-case-list { margin-top: 35px; }
  .home-case-study { position: relative; top: auto; display: flex; flex-direction: column; align-items: stretch; width: 100%; max-width: 100%; min-width: 0; min-height: 0; padding: 20px; gap: 20px; border-radius: 22px; overflow: hidden; }
  .home-case-copy, .home-case-visual, .home-case-details { width: 100%; max-width: 100%; min-width: 0; }
  .home-case-copy h3 { font-size: 28px; overflow-wrap: anywhere; }
  .home-case-visual { width: 100%; height: 210px; }
  .home-case-details { width: 100%; grid-column: auto; }
  .home-case-button { margin-top: 18px; }
  .playbook-layout { grid-template-columns: 1fr; gap: 12px; }
  .playbook-art { transform: scale(.75); margin-block: -30px; }
  .playbook-stack ul { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .cta-section { padding-block: 95px; }
  .footer-main.footer-columns { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 25px; gap: 35px 20px; }
  .footer-columns .footer-brand { grid-column: 1 / -1; }
  .footer-columns .footer-contact { grid-column: 1 / -1; }
}
@media (max-width: 380px) {
  .hero h1 { font-size: 41px; }
  .header-cta { font-size: 0; padding: 4px; gap: 0; }
  .playbook-art { max-width: 100%; overflow: hidden; }
  .playbook-orbit.orbit-three { display: none; }
  .home-service-row { grid-template-columns: 95px minmax(0,1fr); }
  .home-service-image { height: 116px; }
}
@media (prefers-reduced-motion: reduce) {
  .cta-section::after { animation: none; }
  .home-case-study, .home-service-row { transition: none; }
}