/* danelian designs v4 — Homepage stylesheet
   Loaded only on the front-page template via wp_enqueue_style.
   Survives Vite rebuilds (lives outside resources/css/). */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: rgb(7, 9, 13);
  --bg-elev: rgb(11, 13, 19);
  --ink: #e9ebf2;
  --ink-muted: rgba(233, 235, 242, 0.62);
  --ink-subtle: rgba(233, 235, 242, 0.38);
  --border-faint: rgba(255, 255, 255, 0.08);
  --border: rgba(255, 255, 255, 0.14);
  --display: "Zen Dots", system-ui, sans-serif;
  --sans: "DM Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono", monospace;
  --aurora: linear-gradient(135deg, #8ec5ff 0%, #a78bfa 45%, #f472b6 100%);
  --aurora-glow: radial-gradient(closest-side, rgba(167, 139, 250, 0.35), transparent 70%);
}
html { scroll-behavior: smooth; }
body.home {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Twinkling stars + aurora blobs */
.dd-stars { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.dd-star { position: absolute; width: 2px; height: 2px; background: #fff; border-radius: 50%; opacity: 0; animation: ddTwinkle 4s ease-in-out infinite; }
@keyframes ddTwinkle { 0%, 100% { opacity: 0; } 50% { opacity: 0.7; } }
.dd-glow-blob { position: fixed; width: 600px; height: 600px; border-radius: 50%; background: var(--aurora-glow); filter: blur(40px); pointer-events: none; z-index: 0; }
.dd-glow-blob.tl { top: -200px; left: -200px; }
.dd-glow-blob.br { bottom: -200px; right: -200px; opacity: 0.6; }

.dd-container { max-width: 1320px; margin: 0 auto; padding: 0 32px; position: relative; z-index: 2; }
.dd-container.inner { max-width: 1180px; }

/* Top nav */
.dd-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 18px 0; background: rgba(7, 9, 13, 0.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border-faint); transition: background 0.3s; }
.dd-nav.scrolled { background: rgba(7, 9, 13, 0.88); }
.dd-nav .inner { display: flex; align-items: center; justify-content: space-between; }
.dd-wordmark { font-family: var(--display); font-size: 16px; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
.dd-nav ul { list-style: none; display: flex; align-items: center; gap: 28px; }
.dd-nav ul a { font-family: var(--display); font-size: 11px; color: var(--ink-muted); text-decoration: none; letter-spacing: 0.08em; text-transform: lowercase; transition: color 0.2s; }
.dd-nav ul a:hover { color: var(--ink); }
.dd-nav ul a.btn { background: var(--aurora); color: #0a0a0f; padding: 9px 18px; border-radius: 999px; font-weight: 500; transition: transform 0.2s, box-shadow 0.2s; }
.dd-nav ul a.btn:hover { transform: translateY(-1px); box-shadow: 0 12px 28px -8px rgba(167, 139, 250, 0.5); }

/* Hero */
.dd-hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 120px 0 80px; }
.dd-hero-video { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.dd-hero-video::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 0%, rgba(7, 9, 13, 0.45) 70%, rgba(7, 9, 13, 0.85) 100%), linear-gradient(180deg, transparent 60%, rgba(7, 9, 13, 0.95) 100%); z-index: 2; }
.dd-hero-video video { width: 100%; height: 100%; object-fit: cover; opacity: 0.45; }
.dd-hero .dd-container { text-align: center; }
.dd-hero-wordmark { font-family: var(--display); font-size: clamp(72px, 14vw, 220px); line-height: 1.05; letter-spacing: -0.02em; background: var(--aurora); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 36px; padding-bottom: 0.08em; }
.dd-hero-wordmark .line { display: block; }
.dd-hero-pillars { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.dd-hero-pillars span { font-family: var(--mono); font-size: 11px; color: var(--ink-muted); padding: 8px 16px; border: 1px solid var(--border-faint); border-radius: 999px; background: rgba(255, 255, 255, 0.02); backdrop-filter: blur(8px); letter-spacing: 0.04em; }
.dd-scroll-indicator { position: absolute; bottom: 32px; right: 32px; display: flex; flex-direction: column; align-items: center; gap: 12px; z-index: 5; }
.dd-scroll-indicator span { font-family: var(--mono); font-size: 10px; color: var(--ink-subtle); letter-spacing: 0.2em; text-transform: uppercase; writing-mode: vertical-lr; }
.dd-scroll-indicator .bar { width: 1px; height: 64px; background: var(--border-faint); position: relative; overflow: hidden; }
.dd-scroll-indicator .bar::after { content: ""; position: absolute; top: -50%; left: 0; width: 100%; height: 50%; background: linear-gradient(to bottom, transparent, #fff, transparent); animation: ddScrollbar 2.4s ease-in-out infinite; }
@keyframes ddScrollbar { 0% { top: -50%; } 100% { top: 120%; } }

/* Section base */
.dd-section { position: relative; padding: 120px 0; z-index: 2; }
.dd-eyebrow { display: inline-block; font-family: var(--mono); font-size: 11px; color: var(--ink-subtle); letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 28px; }
.dd-gradient-text { background: var(--aurora); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dd-section h1, .dd-section h2, .dd-section h3, .dd-section h4 { font-family: var(--display); font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); }
.dd-section h1 { font-size: clamp(36px, 5.5vw, 72px); margin-bottom: 32px; }
.dd-section h2 { font-size: clamp(32px, 4.5vw, 56px); margin-bottom: 28px; }
.dd-section h3 { font-size: clamp(22px, 2.4vw, 28px); margin-bottom: 16px; }

/* Pitch */
.dd-pitch h1 { max-width: 1000px; }
.dd-pitch .sub { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.7; color: var(--ink-muted); max-width: 760px; }

@media (max-width: 768px) {
  .dd-nav ul li:not(:last-child) { display: none; }
  .dd-scroll-indicator { display: none; }
  .dd-section { padding: 80px 0; }
}

/* === CHUNK 2: clients + services === */

.dd-clients { padding: 80px 0 120px; }
.dd-clients .head { text-align: center; margin-bottom: 56px; }
.dd-clients .head h3 { font-family: var(--mono); font-size: 13px; color: var(--ink-subtle); letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; }
.dd-client-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.dd-client-card { position: relative; aspect-ratio: 3 / 2; background: rgba(255, 255, 255, 0.025); border: 1px solid var(--border-faint); border-radius: 14px; display: flex; align-items: center; justify-content: center; overflow: hidden; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform 0.4s ease, border-color 0.3s; }
.dd-client-card:hover { transform: translateY(-3px); border-color: rgba(167, 139, 250, 0.4); }
.dd-client-card img { max-width: 130px; max-height: 70px; width: auto; height: auto; object-fit: contain; opacity: 0.75; transition: opacity 0.3s; image-rendering: -webkit-optimize-contrast; }
.dd-client-card:hover img { opacity: 1; }
.dd-client-card::before { content: ""; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent); pointer-events: none; }
.dd-client-card.shine-active::before { animation: ddShine 1.4s ease-out; }
@keyframes ddShine { 0% { left: -100%; } 100% { left: 200%; } }

.dd-services .head { max-width: 720px; margin-bottom: 72px; }
.dd-services .head .sub { font-size: 17px; line-height: 1.7; color: var(--ink-muted); margin-top: 8px; }
.dd-service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border-faint); border: 1px solid var(--border-faint); border-radius: 16px; overflow: hidden; }
.dd-service { background: var(--bg-elev); padding: 48px 36px; transition: background 0.3s; }
.dd-service:hover { background: rgba(167, 139, 250, 0.04); }
.dd-service .num { font-family: var(--mono); font-size: 11px; color: var(--ink-subtle); letter-spacing: 0.15em; margin-bottom: 20px; }
.dd-service h3 { background: var(--aurora); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 18px; padding-bottom: 0.05em; }
.dd-service p { font-size: 14px; color: var(--ink-muted); line-height: 1.7; }
.dd-service ul { list-style: none; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border-faint); }
.dd-service ul li { font-family: var(--mono); font-size: 11px; color: var(--ink-muted); padding: 6px 0; letter-spacing: 0.04em; }

@media (max-width: 1024px) {
  .dd-client-grid { grid-template-columns: repeat(3, 1fr); }
  .dd-service-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .dd-client-grid { grid-template-columns: repeat(2, 1fr); }
}

/* === CHUNK 3: why + work === */

/* Why WordPress */
.dd-why { background: linear-gradient(180deg, transparent, rgba(167, 139, 250, 0.04), transparent); }
.dd-why .head { max-width: 800px; margin-bottom: 64px; }
.dd-why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 56px 40px; }
.dd-why-item .icon { width: 36px; height: 36px; border-radius: 10px; background: var(--aurora); margin-bottom: 18px; opacity: 0.9; box-shadow: 0 8px 24px -6px rgba(167, 139, 250, 0.4); }
.dd-why-item h3 { font-size: 18px; margin-bottom: 12px; color: var(--ink); }
.dd-why-item p { font-size: 15px; color: var(--ink-muted); line-height: 1.7; }

/* Work */
.dd-work .head { margin-bottom: 64px; }
.dd-project-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.dd-project { position: relative; aspect-ratio: 4 / 3; border: 1px solid var(--border-faint); border-radius: 16px; overflow: hidden; background: var(--bg-elev); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s; text-decoration: none; display: block; }
.dd-project:hover { transform: translateY(-4px); border-color: rgba(167, 139, 250, 0.4); }
.dd-project .placeholder { position: absolute; inset: 0; }
.dd-project .placeholder.p1 { background: radial-gradient(circle at 30% 30%, rgba(142, 197, 255, 0.25), transparent 60%), radial-gradient(circle at 70% 70%, rgba(244, 114, 182, 0.2), transparent 60%), var(--bg-elev); }
.dd-project .placeholder.p2 { background: radial-gradient(circle at 70% 30%, rgba(167, 139, 250, 0.3), transparent 55%), radial-gradient(circle at 20% 80%, rgba(94, 220, 220, 0.18), transparent 60%), var(--bg-elev); }
.dd-project .placeholder.p3 { background: radial-gradient(circle at 50% 50%, rgba(255, 200, 100, 0.18), transparent 60%), radial-gradient(circle at 90% 10%, rgba(167, 139, 250, 0.22), transparent 50%), var(--bg-elev); }
.dd-project .placeholder.p4 { background: radial-gradient(circle at 20% 30%, rgba(244, 114, 182, 0.22), transparent 55%), radial-gradient(circle at 80% 80%, rgba(142, 197, 255, 0.22), transparent 60%), var(--bg-elev); }
.dd-project .placeholder::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 40px 40px; mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }
.dd-project .meta { position: absolute; bottom: 0; left: 0; right: 0; padding: 28px; background: linear-gradient(0deg, rgba(7, 9, 13, 0.95) 0%, transparent 100%); z-index: 2; }
.dd-project .tag { font-family: var(--mono); font-size: 10px; color: var(--ink-subtle); letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 8px; }
.dd-project h3 { font-size: 22px; color: var(--ink); margin: 0; }
.dd-project .arrow { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; border: 1px solid var(--border-faint); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ink); font-size: 14px; opacity: 0; transition: opacity 0.3s, background 0.3s, transform 0.3s; z-index: 3; background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(8px); }
.dd-project:hover .arrow { opacity: 1; transform: translate(-2px, 2px); }

@media (max-width: 900px) {
  .dd-why-grid { grid-template-columns: 1fr; gap: 40px; }
  .dd-project-grid { grid-template-columns: 1fr; }
}

/* Chunk 3 extras: more project gradients, logo frames, contribution note */
.dd-project .placeholder.p5 { background: radial-gradient(circle at 30% 70%, rgba(94, 220, 220, 0.22), transparent 55%), radial-gradient(circle at 80% 20%, rgba(244, 114, 182, 0.22), transparent 60%), var(--bg-elev); }
.dd-project .placeholder.p6 { background: radial-gradient(circle at 60% 40%, rgba(255, 100, 100, 0.18), transparent 55%), radial-gradient(circle at 10% 90%, rgba(255, 200, 100, 0.18), transparent 60%), var(--bg-elev); }

.dd-project .logo-frame { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px 32px 120px; z-index: 1; }\n.dd-project .logo-frame img, .dd-project .logo-frame picture { display: block; }
.dd-project .logo-frame img { width: auto; height: auto; max-width: 220px; max-height: 100px; object-fit: contain; opacity: 0.75; transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); image-rendering: -webkit-optimize-contrast; }
.dd-project:hover .logo-frame img { opacity: 0.9; transform: scale(1.05); }

.dd-work .head .contrib-note { margin-top: 18px; font-size: 13px; color: var(--ink-subtle); font-style: italic; max-width: 680px; line-height: 1.7; }

/* === CHUNK 4: FAQ + CTA + Footer === */

/* FAQ accordion (reusable as .dd-accordion for blog TOC etc.) */
.dd-faq .head, .dd-accordion-section .head { margin-bottom: 56px; max-width: 720px; }
.dd-faq-item, .dd-accordion-item { border-top: 1px solid var(--border-faint); padding: 0; }
.dd-faq-item:last-child, .dd-accordion-item:last-of-type { border-bottom: 1px solid var(--border-faint); }
.dd-faq-item summary, .dd-accordion-item summary { list-style: none; cursor: pointer; padding: 24px 0; display: flex; justify-content: space-between; align-items: center; gap: 24px; font-family: var(--display); font-size: 17px; color: var(--ink); line-height: 1.4; }
.dd-faq-item summary::-webkit-details-marker, .dd-accordion-item summary::-webkit-details-marker { display: none; }
.dd-faq-item summary::after, .dd-accordion-item summary::after { content: "+"; font-family: var(--sans); font-size: 26px; color: var(--ink-subtle); font-weight: 300; transition: transform 0.3s, color 0.3s; flex-shrink: 0; line-height: 1; }
.dd-faq-item[open] summary::after, .dd-accordion-item[open] summary::after { transform: rotate(45deg); color: var(--ink); }
.dd-faq-item[open] summary, .dd-accordion-item[open] summary { background: linear-gradient(135deg, #8ec5ff 0%, #a78bfa 45%, #f472b6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dd-faq-item .answer, .dd-accordion-item .answer { padding: 0 0 24px; color: var(--ink-muted); font-size: 15px; line-height: 1.75; max-width: 760px; }
.dd-faq-item .answer p, .dd-accordion-item .answer p { margin-bottom: 12px; }
.dd-faq-item .answer p:last-child, .dd-accordion-item .answer p:last-child { margin-bottom: 0; }

/* CTA */
.dd-cta { text-align: center; background: radial-gradient(ellipse at center top, rgba(167, 139, 250, 0.12), transparent 60%); }
.dd-cta .inner { max-width: 760px; margin: 0 auto; }
.dd-cta h2 { margin-bottom: 24px; padding-bottom: 0.08em; }
.dd-cta p { color: var(--ink-muted); font-size: 17px; margin-bottom: 36px; }
.dd-cta a.dd-btn { display: inline-block; background: var(--aurora); color: #0a0a0f; padding: 16px 32px; border-radius: 999px; text-decoration: none; font-family: var(--display); font-size: 13px; letter-spacing: 0.02em; transition: transform 0.2s, box-shadow 0.2s; }
.dd-cta a.dd-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -10px rgba(167, 139, 250, 0.55); }

/* Footer */
.dd-footer { padding: 80px 0 40px; border-top: 1px solid var(--border-faint); background: var(--bg-elev); position: relative; z-index: 2; }
.dd-footer .grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 64px; }
.dd-footer .brand .dd-wordmark { display: block; margin-bottom: 24px; font-size: 18px; }
.dd-footer .brand p { font-size: 14px; color: var(--ink-muted); max-width: 320px; line-height: 1.65; }
.dd-footer h5 { font-family: var(--display); font-size: 10px; background: var(--aurora); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 22px; letter-spacing: 0.1em; padding-bottom: 0.08em; }
.dd-footer ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.dd-footer ul a { font-family: var(--display); font-size: 11px; color: var(--ink-muted); letter-spacing: 0.04em; text-transform: lowercase; text-decoration: none; transition: color 0.2s; }
.dd-footer ul a:hover { background: var(--aurora); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dd-footer .bottom { border-top: 1px solid var(--border-faint); padding-top: 28px; display: flex; justify-content: space-between; font-family: var(--display); font-size: 10px; color: var(--ink-subtle); letter-spacing: 0.08em; flex-wrap: wrap; gap: 16px; }

@media (max-width: 880px) {
  .dd-footer .grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 500px) {
  .dd-footer .grid { grid-template-columns: 1fr; }
}

/* === LCP optimisation: poster as LCP, video lazy-faded in === */
.dd-hero-video .dd-hero-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; transition: opacity 0.8s ease; z-index: 1; }
.dd-hero-video .dd-hero-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s ease; z-index: 2; }
.dd-hero-video::after { z-index: 3; }
.dd-hero-video video { opacity: 0; }

/* Logo cards — keep logos consistent and crisp on mobile */
@media (max-width: 900px) {
  .dd-project .logo-frame { padding: 18px 24px 95px; align-items: center; }
  .dd-project .logo-frame img { max-width: 180px; max-height: 80px; }
}
/* SVG logos still need to be tinted white via filter (they're vector, no compression artefacts) */
.dd-client-card img[src$=".svg"], .dd-project .logo-frame img[src$=".svg"] { filter: brightness(0) invert(1); }


/* === Mobile menu: gauge toggle + slide-in panel === */

/* Gauge toggle button — hidden by default, shown on mobile */
.dd-menu-toggle { display: none; position: relative; background: transparent; border: 1px solid var(--border-faint); border-radius: 999px; padding: 8px 12px; cursor: pointer; transition: border-color 0.3s, background 0.3s; z-index: 60; }
.dd-menu-toggle:hover { border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.03); }
.dd-menu-toggle svg { display: block; width: 44px; height: 28px; }

/* Gauge needle — idle pulse, full-tilt when menu is open */
.dd-gauge-needle { transform-origin: 40px 45px; transform: rotate(-72deg); transition: transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.dd-menu-toggle:hover .dd-gauge-needle { animation: ddGaugeRev 1.2s cubic-bezier(0.5,0,0.5,1) infinite; }
@keyframes ddGaugeRev {
  0% { transform: rotate(-72deg); }
  60% { transform: rotate(72deg); }
  100% { transform: rotate(-72deg); }
}
.dd-menu-toggle.active .dd-gauge-needle { transform: rotate(72deg); animation: none; }
.dd-menu-toggle.active { background: rgba(167,139,250,0.08); border-color: rgba(167,139,250,0.4); }

/* Glow on the needle and centre cap */
.dd-gauge-glow { transition: opacity 0.3s ease; }
.dd-menu-toggle.active .dd-gauge-glow { opacity: 1; }

/* Slide-in panel */
.dd-mobile-menu { position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 380px; background: var(--bg-elev); border-left: 1px solid var(--border-faint); z-index: 55; transform: translateX(100%); transition: transform 0.55s cubic-bezier(0.16,1,0.3,1); padding: 96px 40px 40px; overflow-y: auto; box-shadow: -24px 0 60px -20px rgba(0,0,0,0.6); }
.dd-mobile-menu.open { transform: translateX(0); }
.dd-mobile-menu::before { content: ""; position: absolute; top: 0; left: 0; width: 1px; height: 100%; background: var(--aurora); opacity: 0.3; }
.dd-mobile-menu::after { content: ""; position: absolute; top: -200px; right: -200px; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(closest-side, rgba(167,139,250,0.18), transparent 70%); pointer-events: none; }

.dd-mobile-menu .label { font-family: var(--mono); font-size: 10px; color: var(--ink-subtle); letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 28px; display: block; }
.dd-mobile-menu ul { list-style: none; padding: 0; margin: 0 0 48px; display: flex; flex-direction: column; gap: 4px; position: relative; z-index: 2; }
.dd-mobile-menu ul li { border-bottom: 1px solid var(--border-faint); }
.dd-mobile-menu ul li:first-child { border-top: 1px solid var(--border-faint); }
.dd-mobile-menu ul a { font-family: var(--display); font-size: 22px; color: var(--ink); text-decoration: none; padding: 18px 0; display: flex; justify-content: space-between; align-items: center; letter-spacing: -0.01em; transition: padding 0.3s ease; }
.dd-mobile-menu ul a::after { content: "→"; font-family: var(--sans); font-size: 18px; color: var(--ink-subtle); opacity: 0; transform: translateX(-8px); transition: opacity 0.3s, transform 0.3s, color 0.3s; }
.dd-mobile-menu ul a:hover, .dd-mobile-menu ul a:focus { padding-left: 8px; background: var(--aurora); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dd-mobile-menu ul a:hover::after { opacity: 1; transform: translateX(0); background: var(--aurora); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dd-mobile-menu .cta-pill { display: inline-block; background: var(--aurora); color: #0a0a0f !important; font-family: var(--display); font-size: 12px; letter-spacing: 0.04em; padding: 14px 22px; border-radius: 999px; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; position: relative; z-index: 2; }
.dd-mobile-menu .cta-pill:hover { transform: translateY(-1px); box-shadow: 0 12px 28px -8px rgba(167,139,250,0.5); }
.dd-mobile-menu .footer-note { position: absolute; bottom: 32px; left: 40px; right: 40px; font-family: var(--mono); font-size: 10px; color: var(--ink-subtle); letter-spacing: 0.15em; text-transform: uppercase; }

/* Backdrop */
.dd-mobile-backdrop { position: fixed; inset: 0; background: rgba(7,9,13,0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity 0.4s ease; z-index: 54; }
.dd-mobile-backdrop.open { opacity: 1; pointer-events: auto; }

/* Show toggle on mobile, hide desktop nav links */
@media (max-width: 768px) {
  .dd-nav ul { display: none !important; }
  .dd-menu-toggle { display: flex; align-items: center; gap: 8px; }
}

/* === MOBILE MENU v2 — constellation icon, animated close prompt === */

/* Override toggle button look (gauge → constellation) */
.dd-menu-toggle { display: none; position: relative; background: transparent; border: 1px solid var(--border-faint); border-radius: 999px; padding: 10px 14px; cursor: pointer; transition: border-color 0.3s, background 0.3s, transform 0.3s; z-index: 60; }
.dd-menu-toggle svg { display: block; width: 28px; height: 28px; overflow: visible; }
.dd-menu-toggle:hover { border-color: rgba(167,139,250,0.45); background: rgba(167,139,250,0.06); }
.dd-menu-toggle.active { background: rgba(167,139,250,0.1); border-color: rgba(244,114,182,0.45); transform: rotate(45deg); }

/* Constellation — 5 dots connected by faint lines, gradient stroke */
.dd-const-line { stroke: url(#ddConstGrad); stroke-width: 1.3; stroke-linecap: round; opacity: 0.5; transition: opacity 0.4s ease; stroke-dasharray: 80; stroke-dashoffset: 0; }
.dd-const-dot { fill: #fff; transition: r 0.4s ease, opacity 0.4s ease, fill 0.4s ease; }
.dd-const-dot.glow { filter: url(#ddConstGlow); }
.dd-menu-toggle:hover .dd-const-line { opacity: 1; animation: ddConstDraw 1.6s cubic-bezier(0.5,0,0.5,1) infinite; }
.dd-menu-toggle:hover .dd-const-dot { r: 1.8; }
.dd-menu-toggle:hover .dd-const-dot.glow { r: 2.5; }
@keyframes ddConstDraw {
  0% { stroke-dashoffset: 80; opacity: 0.3; }
  50% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: -80; opacity: 0.3; }
}

/* Close arrow prompt inside the menu — a glowing chevron at the top-left of panel */
.dd-menu-close-prompt { position: absolute; top: 28px; left: 28px; display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 0; background: transparent; border: 0; z-index: 3; transition: transform 0.3s ease; }
.dd-menu-close-prompt:hover { transform: translateX(-3px); }
.dd-menu-close-prompt svg { width: 26px; height: 26px; }
.dd-menu-close-prompt .label { font-family: var(--mono); font-size: 10px; color: var(--ink-subtle); letter-spacing: 0.18em; text-transform: uppercase; transition: color 0.3s ease; }
.dd-menu-close-prompt:hover .label { color: var(--ink); }
.dd-menu-close-prompt .chev-shaft { stroke: url(#ddCloseGrad); stroke-width: 1.6; stroke-linecap: round; fill: none; }
.dd-menu-close-prompt .chev-arrow { stroke: url(#ddCloseGrad); stroke-width: 1.6; stroke-linecap: round; fill: none; transform-origin: 12px 13px; }

/* Subtle continuous nudge animation on the chevron so users see it's interactive */
.dd-mobile-menu.open .dd-menu-close-prompt svg { animation: ddCloseHint 2.6s cubic-bezier(0.5,0,0.5,1) infinite; }
@keyframes ddCloseHint {
  0%, 60%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(0); }
}

/* Stronger panel entrance — slight scale and shadow on entry */
.dd-mobile-menu { padding-top: 82px; }

/* === FINAL: mobile toggle visibility (must come last to win cascade) === */
@media (max-width: 768px) {
  .dd-menu-toggle { display: flex !important; align-items: center; gap: 8px; }
  .dd-nav ul { display: none !important; }
}
.dd-project .placeholder.p7 { background: radial-gradient(circle at 30% 25%, rgba(94, 220, 220, 0.22), transparent 55%), radial-gradient(circle at 70% 75%, rgba(167, 139, 250, 0.26), transparent 60%), var(--bg-elev); }

.dd-project .placeholder.p8 { background: radial-gradient(circle at 25% 30%, rgba(244, 114, 182, 0.22), transparent 55%), radial-gradient(circle at 80% 80%, rgba(94, 220, 220, 0.20), transparent 60%), var(--bg-elev); }
.dd-project .placeholder.p9 { background: radial-gradient(circle at 75% 25%, rgba(167, 139, 250, 0.26), transparent 55%), radial-gradient(circle at 20% 75%, rgba(255, 200, 100, 0.18), transparent 60%), var(--bg-elev); }

.dd-project .placeholder.p10 { background: radial-gradient(circle at 30% 30%, rgba(255, 100, 100, 0.20), transparent 55%), radial-gradient(circle at 75% 75%, rgba(167, 139, 250, 0.22), transparent 60%), var(--bg-elev); }

.dd-project .placeholder.p11 { background: radial-gradient(circle at 25% 35%, rgba(255, 200, 100, 0.20), transparent 55%), radial-gradient(circle at 75% 70%, rgba(94, 220, 220, 0.22), transparent 60%), var(--bg-elev); }

.dd-project .placeholder.p12 { background: radial-gradient(circle at 30% 25%, rgba(94, 220, 220, 0.20), transparent 55%), radial-gradient(circle at 75% 75%, rgba(142, 197, 255, 0.22), transparent 60%), var(--bg-elev); }
.dd-project .placeholder.p13 { background: radial-gradient(circle at 70% 30%, rgba(255, 200, 100, 0.18), transparent 55%), radial-gradient(circle at 25% 75%, rgba(167, 139, 250, 0.24), transparent 60%), var(--bg-elev); }


/* Per-logo aspect-ratio fine-tunes — attribute selectors target specific files for precision */
/* Royal Scots is portrait (taller than wide) — cap it tighter so it doesn't dominate */
.dd-project .logo-frame img[src*="royal-scots"] { max-height: 110px; max-width: 90px; }
@media (max-width: 900px) {
  .dd-project .logo-frame img[src*="royal-scots"] { max-height: 90px; max-width: 72px; }
}
/* Sxollie and Square are square-ish stacked marks (icon + wordmark) — want a touch more height */
.dd-project .logo-frame img[src*="sxollie"], .dd-project .logo-frame img[src*="square-white"] { max-height: 110px; max-width: 95px; }
@media (max-width: 900px) {
  .dd-project .logo-frame img[src*="sxollie"], .dd-project .logo-frame img[src*="square-white"] { max-height: 95px; max-width: 80px; }
}
/* Wilderness Ventures is a perfect square — standard square sizing works well */
.dd-project .logo-frame img[src*="wilderness"] { max-height: 110px; max-width: 110px; }
/* Very wide logos (Inkthreadable, Christian BSL) — allow them slightly more horizontal room */
.dd-project .logo-frame img[src*="inkthreadable"], .dd-project .logo-frame img[src*="christian-bsl"] { max-width: 240px; max-height: 75px; }
@media (max-width: 900px) {
  .dd-project .logo-frame img[src*="inkthreadable"], .dd-project .logo-frame img[src*="christian-bsl"] { max-width: 200px; max-height: 65px; }
}