/* Option D: black, white and grey with a cobalt accent. Loaded after Option B's styles.css and overrides it. */

body { font-family: "Inter Tight", sans-serif; }

/* Large, tight, medium-weight headlines; plain accent words */
h1.font-light, h2.font-light, h3.font-light, p.font-display.font-light { font-weight: 600; letter-spacing: -0.035em; }
h3.font-medium, h3.font-normal { font-weight: 600; }
.accent { font-style: normal; font-weight: inherit; color: inherit; }
.bg-ink .accent, .bg-navy .accent, .page-hero .accent { color: inherit; }

/* Plan builder, carousel dots, reels */
.chip:has(input:checked) { background: #0A0A0B; border-color: #0A0A0B; color: #FFFFFF; }
.match-bar > span { background: #0A0A0B; }
.dot.active { background: #0A0A0B; }
.reel-frame { background: #000000; }

/* Header: white text over the dark top of every page. Once scrolled it stays see-through with only a blur,
   and its text turns dark over light sections (d.js sets .on-light). Solid white while the mobile menu is open. */
#site-header { background-color: transparent; border-color: transparent; color: #FFFFFF; }
#site-header .logo { color: #FFFFFF; }
#site-header .nav-pill { color: rgba(255, 255, 255, 0.82); }
#site-header .nav-pill:hover { color: #FFFFFF; background-color: rgba(255, 255, 255, 0.12); }
#site-header .nav-pill[aria-current="page"] { color: #FFFFFF; background-color: rgba(255, 255, 255, 0.16); }
#site-header .hdr-mail { color: rgba(255, 255, 255, 0.82); }
#site-header .hdr-cta { background-color: #FFFFFF; color: #0A0A0B; }
#site-header .hdr-cta:hover { background-color: #E4E4E7; }
#site-header .menu-icon span { background: #FFFFFF; }
#site-header { transition: color .3s ease, border-color .3s ease, -webkit-backdrop-filter .3s ease, backdrop-filter .3s ease; }
#site-header.is-scrolled { background-color: transparent; -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); border-color: transparent; }
/* Keep Option B's scrolled colours from applying: on dark sections the scrolled header keeps the white styles above */
#site-header.is-scrolled .logo { color: #FFFFFF; }
#site-header.is-scrolled .nav-pill { color: rgba(255, 255, 255, 0.82); }
#site-header.is-scrolled .nav-pill:hover { color: #FFFFFF; background-color: rgba(255, 255, 255, 0.12); }
#site-header.is-scrolled .nav-pill[aria-current="page"] { color: #FFFFFF; background-color: rgba(255, 255, 255, 0.16); }
#site-header.is-scrolled .hdr-mail { color: rgba(255, 255, 255, 0.82); }
#site-header.is-scrolled .hdr-cta { background-color: #FFFFFF; color: #0A0A0B; }
#site-header.is-scrolled .hdr-cta:hover { background-color: #E4E4E7; }
#site-header.is-scrolled .menu-icon span { background: #FFFFFF; }
/* Over light sections, and while the mobile menu is open: dark text */
body.menu-open #site-header { background-color: rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-color: #E4E4E7; }
#site-header.on-light .logo, body.menu-open #site-header .logo { color: #0A0A0B; }
#site-header.on-light .nav-pill, body.menu-open #site-header .nav-pill { color: #52525B; }
#site-header.on-light .nav-pill:hover, body.menu-open #site-header .nav-pill:hover { color: #0A0A0B; background-color: rgba(10, 10, 11, 0.06); }
#site-header.on-light .nav-pill[aria-current="page"], body.menu-open #site-header .nav-pill[aria-current="page"] { color: #0A0A0B; background-color: rgba(10, 10, 11, 0.08); }
#site-header.on-light .hdr-mail { color: #52525B; }
#site-header.on-light .hdr-mail:hover { color: #0A0A0B; }
#site-header.on-light .hdr-cta { background-color: #0A0A0B; color: #FFFFFF; }
#site-header.on-light .hdr-cta:hover { background-color: #27272A; }
#site-header.on-light .menu-icon span, body.menu-open #site-header .menu-icon span { background: #0A0A0B; }
/* The drawer is always white, so its Solutions toggle can't inherit the header's white text */
#mobile-menu summary { color: #52525B; }
#mobile-menu details[open] summary, #mobile-menu summary:hover { color: #0A0A0B; }

/* Dark page headers (inner pages borrowed from Option B) */
.page-hero { background: radial-gradient(120% 80% at 85% -10%, #2B3A8F 0%, rgba(43, 58, 143, 0) 55%), radial-gradient(90% 70% at 5% 110%, #1D3557 0%, rgba(29, 53, 87, 0) 60%), #0A0A0B; color: #FFFFFF; }
.page-hero .text-secondary, .page-hero .text-muted { color: rgba(255, 255, 255, 0.72); }
.page-hero .text-ink, .page-hero h1 { color: #FFFFFF; }
.page-hero a.hover\:text-ink:hover { color: #FFFFFF; }
.page-hero .bg-white { background-color: rgba(255, 255, 255, 0.1); }
.page-hero .border-outline { border-color: rgba(255, 255, 255, 0.2); }
.page-hero .hover\:border-ink:hover { border-color: rgba(255, 255, 255, 0.5); }
.page-hero .hero-glow::before { background: radial-gradient(closest-side, rgba(61, 90, 254, 0.25), rgba(61, 90, 254, 0) 70%); }

/* Pill buttons */
.d-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: 999px; padding: .9rem 1.6rem; font-weight: 600; transition: background-color .2s ease, color .2s ease, scale .2s ease; }
.d-btn:active { scale: .97; }
.d-btn-white { background: #FFFFFF; color: #0A0A0B; } .d-btn-white:hover { background: #E4E4E7; }
.d-btn-black { background: #0A0A0B; color: #FFFFFF; } .d-btn-black:hover { background: #27272A; }
.d-btn-ghost { background: rgba(255, 255, 255, 0.14); color: #FFFFFF; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .d-btn-ghost:hover { background: rgba(255, 255, 255, 0.24); }

/* Frosted glass cards */
.d-glass { background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.28); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); color: #FFFFFF; }

/* 1. Hero: the full-screen photo shrinks into a phone frame as you scroll */
.d-hero { position: relative; height: 240vh; background: #000; }
.d-hero-sticky { position: sticky; top: 0; height: 100vh; min-height: 560px; overflow: hidden; }
.d-blur { position: absolute; inset: -60px; width: calc(100% + 120px); height: calc(100% + 120px); object-fit: cover; filter: blur(40px) brightness(0.55) saturate(1.2); }
.d-hero-photo { position: absolute; inset: 0; will-change: clip-path; }
.d-hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.d-hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 60%, rgba(0, 0, 0, 0) 100%); }
.d-phone { position: absolute; left: 50%; top: 52%; width: min(340px, 72vw); aspect-ratio: 9 / 18.5; max-height: 78vh; translate: -50% -50%; border-radius: 46px; border: 1.5px solid rgba(255, 255, 255, 0.7); opacity: 0; pointer-events: none; }
.d-slot { position: absolute; left: 50%; top: 52%; width: min(340px, 72vw); aspect-ratio: 9 / 18.5; max-height: 78vh; translate: -50% -50%; pointer-events: none; }
.d-hero-copy { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; }
.d-hero-after { opacity: 0; }

/* 2. Scenes switched by pills */
.d-pane { opacity: 0; scale: 1.03; transition: opacity .8s ease, scale 1.2s ease; pointer-events: none; }
.d-pane.is-active { opacity: 1; scale: 1; pointer-events: auto; }
.d-tab { padding: .65rem 1.25rem; border-radius: 999px; font-weight: 600; font-size: .9rem; background: rgba(255, 255, 255, 0.16); color: #FFFFFF; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background-color .25s ease, color .25s ease; }
.d-tab:hover { background: rgba(255, 255, 255, 0.26); }
.d-tab.is-active { background: #FFFFFF; color: #0A0A0B; }

/* 3. Cards fanning out in perspective */
.d-tray { position: relative; height: 220vh; }
.d-tray-sticky { position: sticky; top: 0; height: 100vh; min-height: 640px; overflow: hidden; display: flex; flex-direction: column; }
/* Headline and pills stay in front of the cards; the headline shrinks on short screens */
.d-tray-sticky > div:first-child, .d-tray-sticky > div:last-child { position: relative; z-index: 2; }
.d-tray-sticky > div:first-child { padding-top: calc(76px + 3vh); }
.d-tray-sticky h2 { font-size: clamp(2.25rem, min(6vw, 8.5vh), 4.5rem); }
.d-tray-sticky > div:first-child p { font-size: clamp(.9rem, 2.2vh, 1rem); }
.d-cards { position: relative; z-index: 1; flex: 1; min-height: 0; perspective: 1400px; }
/* Card size follows the space available (d.js sets --card-h on the section) */
.d-card { position: absolute; left: 50%; top: 50%; height: var(--card-h, 340px); width: calc(var(--card-h, 340px) * 0.68); margin: calc(var(--card-h, 340px) / -2) 0 0 calc(var(--card-h, 340px) * -0.34); border-radius: 22px; padding: calc(var(--card-h, 340px) * 0.065); display: flex; flex-direction: column; justify-content: space-between; color: #FFFFFF; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8); will-change: transform; }
.d-card-1 { background: linear-gradient(150deg, #FF3DCA 0%, #6B2BFF 45%, #1F3BFF 100%); }
.d-card-2 { background: linear-gradient(150deg, #8C93A8 0%, #3B4152 55%, #1C2030 100%); }
.d-card-3 { background: linear-gradient(150deg, #2A2A2E 0%, #0B0B0D 100%); border: 1px solid rgba(255, 255, 255, 0.12); }
.d-card-4 { background: repeating-linear-gradient(115deg, #D9DCE3 0 2px, #BFC4CF 2px 5px); color: #0A0A0B; }
.d-cardset { position: absolute; inset: 0; }
@media (max-width: 767px) {
  .d-tray { height: auto; }
  .d-tray-sticky { position: relative; height: auto; min-height: 0; }
  .d-cards { flex: none; perspective: none; }
  .d-cardset { position: relative; display: none; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px 20px 30px; scrollbar-width: none; }
  .d-cardset.is-active { display: flex; }
  .d-card { position: relative; left: auto; top: auto; margin: 0; flex: 0 0 72%; height: 300px; scroll-snap-align: center; transform: none !important; }
}

/* 4. Phone demo that rises into view, with a chat that plays itself */
.d-device { width: min(360px, 82vw); aspect-ratio: 9 / 18.5; border-radius: 52px; padding: 12px; background: #1B1B1E; box-shadow: 0 0 0 1.5px #3A3A40, 0 60px 120px -40px rgba(61, 90, 254, 0.45); will-change: transform; }
.d-screen { width: 100%; height: 100%; border-radius: 42px; background: #050506; overflow: hidden; display: flex; flex-direction: column; }
.d-chat .msg { opacity: 0; translate: 0 14px; transition: opacity .5s ease, translate .5s ease; }
.d-chat.in .msg { opacity: 1; translate: 0 0; }
.d-typing span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.6); animation: d-dot 1.2s infinite ease-in-out; }
.d-typing span:nth-child(2) { animation-delay: .15s; } .d-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes d-dot { 0%, 80%, 100% { opacity: .25; translate: 0 0; } 40% { opacity: 1; translate: 0 -3px; } }

/* 5. Work gallery that moves sideways while you scroll down (desktop) */
.d-hscroll { position: relative; }
.d-hscroll-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.d-track { display: flex; gap: 24px; will-change: transform; }
@media (max-width: 767px) {
  .d-hscroll { height: auto !important; }
  .d-hscroll-sticky { position: relative; height: auto; padding: 4rem 0; }
  .d-track { overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 20px; scrollbar-width: none; }
  .d-track > * { scroll-snap-align: start; }
}

/* Service tiles */
.d-tile { transition: background-color .3s ease, translate .3s ease; }
.d-tile:hover { translate: 0 -4px; }
.d-tile .d-arrow { transition: translate .3s ease, background-color .3s ease, color .3s ease; }
.d-tile:hover .d-arrow { translate: 4px 0; background: #0A0A0B; color: #FFFFFF; }

/* Reduced motion: no pinning or scroll-driven movement, everything shown in its final place */
.d-static .d-hero, .d-static .d-tray { height: auto; }
.d-static .d-hero-sticky, .d-static .d-tray-sticky, .d-static .d-hscroll-sticky { position: relative; }
.d-static .d-hero-sticky { height: 100vh; }
.d-static .d-tray-sticky { height: 100vh; }
.d-static .d-hscroll { height: auto !important; }
.d-static .d-track { overflow-x: auto; padding-bottom: 1rem; }
.d-static .d-chat .msg { opacity: 1; translate: none; }
@media (prefers-reduced-motion: reduce) { .d-typing span { animation: none; } }