/* Deft Digital Media — Home (October 16, 2026). Follows design-system/DECISIONS.md: Studio light, Sunflower as a fill,
   Geist, approved glass recipe, lens hero, one obsidian chapter (Services + Working with Deft). Scoped to .ddm-site.ddm-x. */
@font-face { font-family:'DDM Geist'; src:url('https://deftdigitalmedia.com/wp-content/uploads/ddm/assets/fonts/Geist-VariableFont_wght.ttf') format('truetype'); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face { font-family:'DDM Geist Mono'; src:local('Geist Mono'), local('GeistMono-Regular'); font-weight:400 600; font-style:normal; font-display:swap; }
/* Label face (Oct 24, Daniel): Archivo pinned at Semi Expanded (wdth 112), Latin. Swap the --mono line below to change it. */
@font-face { font-family:'DDM Label'; src:url('https://deftdigitalmedia.com/wp-content/uploads/ddm/assets/fonts/Archivo-SemiExpanded.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face { font-family:'DDM Space Grotesk'; src:url('https://deftdigitalmedia.com/wp-content/uploads/ddm/assets/fonts/SpaceGrotesk.ttf') format('truetype'); font-weight:300 700; font-style:normal; font-display:swap; }

.ddm-x {
  --sun:#FFC700; --sun-hover:#FFD23A; --ink:#111111; --ink-2:#4A4A47; --ink-3:#7A7A76;
  --canvas:#ECECEA; --paper:#F7F7F5; --lens-bg:#EEEEEC; --obsidian:#0B0B0C; --cool:#3B5BFF; --blue:#3B5BFF; --blue-ink:#3350F0; --blue-light:#7D93FF;
  --line:rgba(17,17,17,.12); --line-dark:rgba(255,255,255,.12); --on-dark:#E9E9E6; --on-dark-2:#A3A39E;
  --sans:'DDM Geist','Helvetica Neue',Arial,sans-serif;
  /* --mono is the eyebrow/label token (name kept so every page picks it up). Alternatives, one-line swaps:
     put 'DDM Space Grotesk' or 'DDM Geist' (all-Geist caps) first. Old mono look: archive/label-font-pre-2026-10-24. */
  --mono:'DDM Label','DDM Geist','Helvetica Neue',Arial,sans-serif;
  --shell:min(1320px,calc(100% - 40px));
  --radius:20px;
  --ease:cubic-bezier(.22,1,.36,1);
  --nav-h:76px;
  color-scheme:light;
  font:400 1rem/1.6 var(--sans); color:var(--ink); background:var(--canvas);
  overflow-wrap:break-word; -webkit-font-smoothing:antialiased; overflow-x:clip;
}
.ddm-x *, .ddm-x *::before, .ddm-x *::after { box-sizing:border-box; }
.ddm-x [hidden] { display:none !important; }
.ddm-x img { display:block; max-width:100%; height:auto; }
.ddm-x a { color:inherit; text-decoration:none; }
.ddm-x p { margin:0 0 1rem; }
.ddm-x :is(h1,h2,h3) { font-family:var(--sans); font-weight:600; margin:0; letter-spacing:-.045em; }
.ddm-x h2 { font-size:clamp(2.4rem,5.4vw,4.8rem); line-height:.92; }
.ddm-x h3 { font-size:1.45rem; line-height:1.1; letter-spacing:-.03em; }
.ddm-x :is(a,button):focus-visible { border-radius:6px; } /* colour and offset: light.css (Blue ink, white on dark) */
.ddm-x :is(.ddm-obsidian,.ddm-nav.is-dark) :is(a,button):focus-visible { outline-color:#fff; }
.ddm-x :is(section,main,[id]) { scroll-margin-top:calc(var(--nav-h) + 16px); }
.ddm-x #main:focus { outline:none; }
.ddm-x .ddm-shell { width:var(--shell); margin-inline:auto; position:relative; z-index:2; }
.ddm-x .ddm-section { position:relative; padding-block:clamp(88px,11vw,160px); }
.ddm-x .ddm-skip { position:fixed; left:16px; top:8px; z-index:60; padding:12px 20px; color:#fff; background:var(--ink); border-radius:10px; transform:translateY(-160%); }
.ddm-x .ddm-skip:focus { transform:none; }

/* Labels, highlighter, links */
.ddm-x .ddm-eyebrow { margin:0 0 22px; font:500 .75rem/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.ddm-x .ddm-mark { background:linear-gradient(transparent 12%,var(--sun) 12%,var(--sun) 92%,transparent 92%); padding:0 .04em; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.ddm-x h2 .ddm-mark { background:linear-gradient(transparent 20%,var(--sun) 20%,var(--sun) 90%,transparent 90%); }
.ddm-x .ddm-link { display:inline-flex; align-items:center; gap:8px; width:fit-content; font-weight:500; text-decoration:underline; text-decoration-color:var(--sun); text-decoration-thickness:4px; text-underline-offset:6px; transition:text-underline-offset .3s var(--ease); }
.ddm-x .ddm-link:hover { text-underline-offset:3px; }
.ddm-x .ddm-link-light { color:#fff; }

/* Buttons */
.ddm-x .ddm-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:44px; padding:0 18px; border:0; border-radius:999px; font:500 .9rem/1 var(--sans); white-space:nowrap; cursor:pointer; transition:transform .5s var(--ease), background .3s var(--ease); }
.ddm-x .ddm-btn:active { transform:scale(.97); }
/* Yellow buttons share the ticker's depth (Daniel, Oct 18; same recipe as the footer logo bar): hairline edge, a white
   highlight along the top fading to the right, a slightly darker inner bottom and a soft shadow. Size unchanged. */
.ddm-x { --sun-depth:inset 0 1.5px 0 rgb(255 255 255/.75), inset 0 0 0 1px rgb(17 17 17/.08), inset 0 -2px 3px -1px rgb(150 100 0/.22), 0 3px 6px -3px rgb(0 0 0/.28);
  --sun-sheen:linear-gradient(90deg,rgb(255 255 255/.95),rgb(255 255 255/.35) 55%,rgb(255 255 255/0) 85%) top / 100% 2px no-repeat; }
/* The top highlight was made stronger at Daniel's request (Oct 18): an inset white line that follows the pill's curve plus a 2px sheen */
.ddm-x .ddm-btn-sun { color:var(--ink); background:var(--sun-sheen), var(--sun); box-shadow:var(--sun-depth); }
.ddm-x .ddm-btn-sun:hover { background-color:var(--sun-hover); }
.ddm-x .ddm-btn-ink { background:var(--ink); color:#fff; }
.ddm-x .ddm-btn-ink:hover { background:#2b2b2b; }
.ddm-x .ddm-btn-lg { min-height:54px; padding:0 26px; font-size:1rem; }
.ddm-x .ddm-btn-xl { min-height:62px; padding:0 32px; font-size:1.08rem; }
.ddm-x .ddm-arrow { display:inline-block; transition:transform .5s var(--ease); }
.ddm-x .ddm-btn:hover .ddm-arrow { transform:translateX(4px); }

/* Glass recipe (approved values). Pointer highlight sits beneath the content. */
.ddm-x .ddm-glass { position:relative; isolation:isolate; background:rgb(255 255 255/0);
  -webkit-backdrop-filter:blur(10px) saturate(130%); backdrop-filter:blur(10px) saturate(130%);
  box-shadow:inset 0 1px 0 rgb(255 255 255/.9), inset 0 -1px 0 rgb(0 0 0/.05), inset 0 0 14px rgb(255 255 255/.45), 0 1px 2px rgb(0 0 0/.06), 0 14px 34px -10px rgb(0 0 0/.22); }
.ddm-x .ddm-glass::before { content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(135deg,rgb(255 255 255/.95),rgb(255 255 255/.15) 38%,rgb(0 0 0/.10) 62%,rgb(255 255 255/.75));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0); }
.ddm-x .ddm-glass::after { content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  background:radial-gradient(140px circle at var(--mx,28%) var(--my,0%),rgb(255 255 255/.6),transparent 65%); }

/* Navigation: floating glass pill */
.ddm-x .ddm-nav { position:fixed; top:calc(14px + env(safe-area-inset-top,0px)); left:0; right:0; z-index:50; pointer-events:none; }
.ddm-x .ddm-nav-bar { pointer-events:auto; width:min(860px,calc(100% - 32px)); margin-inline:auto; display:flex; align-items:center; gap:4px; padding:7px 7px 7px 10px; border-radius:999px; transition:transform .5s var(--ease), color .3s, border-radius .3s; }
.ddm-x .ddm-nav.is-dark .ddm-nav-bar { color:#fff; box-shadow:inset 0 1px 0 rgb(255 255 255/.18), inset 0 0 14px rgb(255 255 255/.05), 0 14px 34px -10px rgb(0 0 0/.5); }
.ddm-x .ddm-nav.is-dark .ddm-nav-bar::before { background:linear-gradient(135deg,rgb(255 255 255/.45),rgb(255 255 255/.06) 38%,rgb(255 255 255/.04) 62%,rgb(255 255 255/.3)); }
.ddm-x .ddm-nav.is-dark .ddm-nav-bar::after { background:radial-gradient(140px circle at var(--mx,28%) var(--my,0%),rgb(255 255 255/.12),transparent 65%); }
/* Brand (Oct 24): the d mark alone, no wordmark (logo.png, bar-free). */
.ddm-x .ddm-brand { display:flex; align-items:center; height:40px; padding:0 8px; margin-right:12px; border-radius:999px; }
.ddm-x .ddm-brand-mark { position:relative; display:block; width:50px; height:30px; flex:none; transition:scale .45s var(--ease); }
.ddm-x .ddm-brand:hover .ddm-brand-mark { scale:1.06; }
.ddm-x .ddm-brand-mark img { position:absolute; inset:0; width:100%; height:100%; transition:opacity .35s var(--ease); }
.ddm-x .ddm-brand-wht, .ddm-x .ddm-nav.is-dark .ddm-brand-blk { opacity:0; }
.ddm-x .ddm-nav.is-dark .ddm-brand-wht { opacity:1; }
/* Links (Oct 24): centred between the mark and the CTA. One glass pill glides to the hovered link and rests on the
   current page (on Home, the section in view); scripts/home.js writes --gx/--gw. */
.ddm-x .ddm-nav-links { position:relative; display:flex; align-items:center; gap:2px; margin-inline:auto; }
.ddm-x .ddm-nav-links > a, .ddm-x .ddm-nav-sub > a { position:relative; z-index:1; padding:9px 14px; border-radius:999px; font-size:14px; opacity:.72; transition:opacity .35s var(--ease); }
.ddm-x .ddm-nav-links > a:is(:hover,.is-glided), .ddm-x .ddm-nav-sub:is(:hover,.is-glided) > a, .ddm-x .ddm-nav-links a[aria-current] { opacity:1; }
.ddm-x .ddm-nav-glide { position:absolute; z-index:0; top:50%; left:0; width:var(--gw,0px); height:36px; translate:var(--gx,0px) -50%; border-radius:999px; pointer-events:none; opacity:0;
  background:rgb(255 255 255/.7); box-shadow:inset 0 1px 0 #fff, inset 0 0 0 1px rgb(17 17 17/.05), 0 6px 16px -10px rgb(0 0 0/.35);
  transition:translate .55s var(--ease), width .55s var(--ease), opacity .3s var(--ease), background .3s; }
.ddm-x .ddm-nav-links.has-glide .ddm-nav-glide { opacity:1; }
.ddm-x .ddm-nav.is-dark .ddm-nav-glide { background:rgb(255 255 255/.1); box-shadow:inset 0 1px 0 rgb(255 255 255/.22), inset 0 0 0 1px rgb(255 255 255/.06); }
/* Services dropdown (Oct 24): the five service pages drawn as the client path (dots on a line, like the service
   pages' path bar), Branding & print after a dashed break. Glass panel on light, white glowing rim on dark. */
.ddm-x .ddm-nav-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.ddm-x .ddm-nav-sub { position:relative; z-index:1; display:flex; align-items:center; }
.ddm-x .ddm-nav-sub > a { padding-right:4px; }
.ddm-x .ddm-nav-sub-btn { display:grid; place-items:center; width:26px; height:32px; margin:0 4px 0 -2px; border:0; border-radius:999px; background:transparent; color:inherit; cursor:pointer; opacity:.72; transition:opacity .35s var(--ease); }
.ddm-x .ddm-nav-sub:is(:hover,.is-glided,.is-open) .ddm-nav-sub-btn { opacity:1; }
.ddm-x .ddm-nav-sub-btn i { width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; rotate:45deg; translate:0 -2px; transition:rotate .35s var(--ease), translate .35s var(--ease); }
.ddm-x .ddm-nav-sub.is-open .ddm-nav-sub-btn i { rotate:225deg; translate:0 2px; }
.ddm-x .ddm-nav-menu { position:absolute; top:calc(100% + 18px); left:50%; width:290px; display:grid; padding:10px; border-radius:24px; color:var(--ink);
  background:rgb(247 247 245/.95); -webkit-backdrop-filter:blur(24px) saturate(140%); backdrop-filter:blur(24px) saturate(140%);
  box-shadow:inset 0 1px 0 rgb(255 255 255/.9), inset 0 0 0 1px rgb(255 255 255/.6), inset 0 0 18px rgb(255 255 255/.5), 0 1px 2px rgb(0 0 0/.06), 0 28px 56px -22px rgb(0 0 0/.32);
  opacity:0; visibility:hidden; translate:-50% -8px; scale:.97; transform-origin:50% 0;
  transition:opacity .3s var(--ease), translate .45s var(--ease), scale .45s var(--ease), visibility 0s .45s; }
.ddm-x .ddm-nav-menu::before { content:""; position:absolute; inset:-20px 0 auto; height:20px; } /* hover bridge from the link */
.ddm-x .ddm-nav-sub.is-open .ddm-nav-menu { opacity:1; visibility:visible; translate:-50% 0; scale:1; transition:opacity .3s var(--ease), translate .45s var(--ease), scale .45s var(--ease), visibility 0s; }
.ddm-x .ddm-nav.is-dark .ddm-nav-menu { color:#fff; background:rgb(18 18 20/.9); box-shadow:inset 0 0 0 1px rgb(255 255 255/.9), 0 0 1.5px #fff, 0 0 8px rgb(255 255 255/.4), inset 0 0 14px rgb(255 255 255/.1), 0 28px 56px -22px rgb(0 0 0/.6); }
.ddm-x .ddm-nav-links .ddm-nav-menu a { position:relative; display:grid; grid-template-columns:22px 1fr auto; align-items:center; gap:10px; padding:9px 12px 9px 8px; border-radius:16px; font-size:14px;
  opacity:0; translate:0 6px; filter:blur(3px); transition:opacity .35s var(--ease), translate .45s var(--ease), filter .45s var(--ease), background .3s var(--ease); transition-delay:0s; }
.ddm-x .ddm-nav-sub.is-open .ddm-nav-menu a { opacity:1; translate:0 0; filter:none; transition-delay:calc(60ms + var(--i,0) * 35ms), calc(60ms + var(--i,0) * 35ms), calc(60ms + var(--i,0) * 35ms), 0s; }
.ddm-x .ddm-nav-menu a > span { display:grid; line-height:1.2; }
.ddm-x .ddm-nav-menu small { font:500 .62rem/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.ddm-x .ddm-nav-menu b { font-weight:600; letter-spacing:-.01em; }
.ddm-x .ddm-nav-menu a > i { position:relative; z-index:1; justify-self:center; width:10px; height:10px; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 1.5px rgb(17 17 17/.3); transition:box-shadow .35s var(--ease); }
.ddm-x .ddm-nav-menu:not(.ddm-nav-work) a:nth-child(-n+3)::before { content:""; position:absolute; left:18.25px; top:50%; height:100%; width:1.5px; background:rgb(17 17 17/.16); }
.ddm-x .ddm-nav-menu a:not(.is-all)::after { content:"\2192"; opacity:0; translate:-6px 0; transition:opacity .3s var(--ease), translate .45s var(--ease); }
.ddm-x .ddm-nav-links .ddm-nav-menu a:is(:hover,:focus-visible,[aria-current]) { background:rgb(255 255 255/.75); box-shadow:inset 0 0 0 1px rgb(17 17 17/.05), 0 8px 20px -14px rgb(0 0 0/.45); }
.ddm-x .ddm-nav-menu a:is(:hover,:focus-visible)::after { opacity:.55; translate:0 0; }
.ddm-x .ddm-nav-menu a:is(:hover,:focus-visible,[aria-current]) > i { box-shadow:0 0 0 3px var(--sun), 0 0 12px 2px rgb(255 199 0/.5); }
.ddm-x .ddm-nav-menu .is-side { margin-top:7px; }
.ddm-x .ddm-nav-menu .is-side > i { background:transparent; box-shadow:none; border:1.5px dashed rgb(17 17 17/.34); }
.ddm-x .ddm-nav-menu .is-side::before { content:""; position:absolute; left:12px; right:12px; top:-4px; border-top:1px dashed rgb(17 17 17/.16); }
.ddm-x .ddm-nav-links .ddm-nav-menu .is-all { display:flex; justify-content:space-between; margin-top:8px; padding:11px 14px; border-radius:999px; font-size:13px; font-weight:500; background:rgb(17 17 17/.05); }
.ddm-x .ddm-nav-links .ddm-nav-menu .is-all:hover { background:rgb(17 17 17/.08); box-shadow:none; }
.ddm-x .ddm-nav-menu .is-all:hover .ddm-arrow { transform:translateX(4px); }
.ddm-x .ddm-nav.is-dark .ddm-nav-menu small { color:var(--on-dark-2); }
.ddm-x .ddm-nav.is-dark .ddm-nav-menu a > i { background:transparent; box-shadow:inset 0 0 0 1.5px rgb(255 255 255/.45); }
.ddm-x .ddm-nav.is-dark .ddm-nav-menu:not(.ddm-nav-work) a:nth-child(-n+3)::before { background:rgb(255 255 255/.18); }
.ddm-x .ddm-nav.is-dark .ddm-nav-links .ddm-nav-menu a:is(:hover,:focus-visible,[aria-current]) { background:rgb(255 255 255/.08); box-shadow:inset 0 0 0 1px rgb(255 255 255/.08); }
.ddm-x .ddm-nav.is-dark .ddm-nav-menu a:is(:hover,:focus-visible,[aria-current]) > i { background:#fff; box-shadow:0 0 0 3px var(--sun), 0 0 12px 2px rgb(255 199 0/.45); }
.ddm-x .ddm-nav.is-dark .ddm-nav-menu .is-side > i { border-color:rgb(255 255 255/.4); background:transparent; box-shadow:none; }
.ddm-x .ddm-nav.is-dark .ddm-nav-menu .is-side::before { border-color:rgb(255 255 255/.16); }
.ddm-x .ddm-nav.is-dark .ddm-nav-links .ddm-nav-menu .is-all { background:rgb(255 255 255/.08); }
.ddm-x .ddm-nav.is-dark .ddm-nav-links .ddm-nav-menu .is-all:hover { background:rgb(255 255 255/.13); }
.ddm-x .ddm-nav-cta { margin-left:4px; font-size:14px; min-height:40px; padding:0 16px; }
.ddm-x .ddm-nav-toggle { display:inline-flex; align-items:center; gap:10px; min-height:40px; padding:0 14px; border:0; border-radius:999px; background:transparent; color:inherit; font:500 14px var(--sans); cursor:pointer; }
.ddm-x .ddm-nav-toggle i { position:relative; width:16px; height:1.5px; background:currentColor; box-shadow:0 -5px 0 currentColor,0 5px 0 currentColor; transition:box-shadow .3s; }
.ddm-x .ddm-nav-toggle[aria-expanded="true"] i { box-shadow:none; }

/* Hero: type-led, the headline is the image */
/* The first screen is exactly one viewport: the hero plus the ticker (43px) under it. Taller content still grows it. */
.ddm-x .ddm-hero { position:relative; min-height:max(620px,calc(100svh - 43px)); overflow:hidden; touch-action:pan-y; isolation:isolate; }
.ddm-x .ddm-digits { position:absolute; inset:0; z-index:0; width:100%; height:100%; pointer-events:none; }
.ddm-x .ddm-hero .ddm-digits { -webkit-mask:linear-gradient(90deg,transparent 0 38%,#000 78%); mask:linear-gradient(90deg,transparent 0 38%,#000 78%); opacity:.9; }
/* Hero depth (Oct 17): two digit layers with pointer parallax (offsets set by scripts/home.js on the canvases) and scroll
   lag on the far one, plus the lens's cast. The studio light was dropped (Daniel: not worth its cost). */
.ddm-x .ddm-lens-cast { position:absolute; z-index:2; left:0; top:0; width:0; height:0; pointer-events:none; opacity:0; will-change:transform;
  border-radius:50%; background:radial-gradient(closest-side,rgb(17 17 17/.1),rgb(17 17 17/.05) 45%,rgb(17 17 17/.015) 75%,rgb(17 17 17/0)); }
/* The light the glass gathers lands as a small white focus spot on the far side of the shadow.
   It blends as overlay, so it brightens light surfaces and leaves dark ones (the black button, the headline) dark
   instead of painting a pale patch over them. */
.ddm-x .ddm-lens-caustic { position:absolute; z-index:2; left:0; top:0; width:0; height:0; pointer-events:none; opacity:0; will-change:transform; mix-blend-mode:overlay;
  border-radius:50%; background:radial-gradient(closest-side,rgb(255 255 255/.95),rgb(255 255 255/.55) 40%,rgb(255 255 255/.15) 75%,rgb(255 255 255/0)); }
.ddm-x .ddm-hero:not(.lens-on) :is(.ddm-lens-cast,.ddm-lens-caustic), .ddm-x .ddm-hero.lens-on.lens-gone :is(.ddm-lens-cast,.ddm-lens-caustic) { visibility:hidden; }
.ddm-x .ddm-grain { position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.35; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.ddm-x .ddm-hero-in { position:relative; z-index:1; max-width:1440px; margin:0 auto; padding:clamp(128px,18vh,190px) max(20px,env(safe-area-inset-right,0px)) 56px max(20px,env(safe-area-inset-left,0px)); display:grid; gap:28px; justify-items:start; }
.ddm-x .ddm-hero-in > * { margin:0; }
.ddm-x .ddm-hero-title { font:700 clamp(54px,11.2vw,196px)/.86 var(--sans); letter-spacing:-.062em; }
.ddm-x .ddm-hero-title .ddm-line { display:block; overflow:hidden; padding:0 .04em .14em 0; margin-bottom:-.14em; }
.ddm-x .ddm-hero-title .ddm-line > span { display:inline-block; }
/* Descenders on the first line (the p in "up") sit over the second line's yellow highlight (Daniel, Oct 18): line one paints on top, with a deeper mask so the whole descender shows */
.ddm-x .ddm-hero-title .ddm-line:first-child { position:relative; z-index:1; padding-bottom:.3em; margin-bottom:-.3em; }
.ddm-x .ddm-sub { max-width:44ch; font-size:clamp(18px,1.6vw,21px); line-height:1.5; color:var(--ink-2); }
.ddm-x .ddm-ctas { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.ddm-x .ddm-fine { font-size:13px; line-height:1.4; color:var(--ink-3); }
.ddm-x .ddm-hero .ddm-fine { margin-top:-14px; }
.ddm-x .ddm-proof { display:flex; flex-wrap:wrap; gap:10px 28px; align-items:center; width:100%; padding-top:22px; border-top:1px solid var(--line); }
.ddm-x .ddm-proof .ddm-eyebrow { margin:0; }
.ddm-x .ddm-proof-clients { display:flex; flex-wrap:wrap; gap:6px 22px; margin:0; padding:0; list-style:none; font-size:14px; font-weight:500; }

/* Latest projects (Daniel, Oct 18): floating glass lenses on the right, built by scripts/home.js from the [data-latest] list,
   which is the no-script fallback row. The tracked lens is off while they hold the right side (data-lens="off"). */
.ddm-x .ddm-hero[data-lens="off"] :is(.ddm-lens-clip,.ddm-lens-ring,.ddm-lens-cast,.ddm-lens-caustic) { display:none; }
.ddm-x .ddm-latest[hidden] { display:none; }
.ddm-js .ddm-x .ddm-latest { display:none; } /* with script the lenses carry these links; set before first paint (index.html) */
.ddm-x .ddm-proof-clients a { text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:4px; }
.ddm-x .ddm-latest-side { position:absolute; left:58%; right:max(20px,env(safe-area-inset-right,0px)); top:46%; bottom:40px; pointer-events:none; }
.ddm-x .ddm-orbs { position:absolute; inset:-28% 0 0; }
.ddm-x .ddm-orb { position:absolute; left:0; top:0; width:118px; height:118px; border-radius:50%; overflow:hidden; opacity:0; pointer-events:auto; transform-origin:50% 50%; will-change:transform;
  color:var(--ink); text-align:center; text-decoration:none;
  background:radial-gradient(circle at 32% 26%,rgb(255 255 255/.75),rgb(255 255 255/.28) 46%,rgb(255 255 255/.16) 70%,rgb(255 255 255/.34));
  -webkit-backdrop-filter:blur(5px) saturate(1.2) brightness(1.04); backdrop-filter:blur(5px) saturate(1.2) brightness(1.04);
  box-shadow:inset 0 1px 1px rgb(255 255 255/.95), inset 0 -10px 18px -10px rgb(17 17 17/.18), inset 0 0 0 1px rgb(255 255 255/.6), 0 22px 34px -22px rgb(17 17 17/.45); }
.ddm-x .ddm-orb.is-open { background:rgb(247 247 245/.9); -webkit-backdrop-filter:blur(18px) saturate(1.2); backdrop-filter:blur(18px) saturate(1.2); transition:background .5s var(--ease); }
.ddm-x .ddm-orb:focus-visible { outline:none; }
/* Rim light: a blue arc and a Sunflower arc on opposite sides chase each other round (angle --la, strength --lg from home.js).
   Blue beside yellow is fine here as a subtle contour highlight, like light refracting through glass; never as a fill (Daniel, Oct 18). */
.ddm-x .ddm-orb::after { content:""; position:absolute; inset:0; z-index:2; border-radius:inherit; padding:2px; pointer-events:none; opacity:var(--lg,.8);
  background:conic-gradient(from var(--la,0deg),transparent 0deg,rgb(59 91 255/.5) 30deg,rgb(59 91 255) 60deg,#fff 72deg,rgb(59 91 255/.9) 84deg,transparent 125deg 180deg,rgb(255 199 0/.5) 210deg,rgb(255 199 0) 240deg,#fff 252deg,rgb(255 199 0/.9) 264deg,transparent 305deg 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  filter:drop-shadow(0 0 2px rgb(255 255 255/.9)); }
.ddm-x .ddm-orb-face { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:4px; padding:12px; }
.ddm-x .ddm-orb-logo { display:block; border-radius:50%; object-fit:cover; background:#fff; box-shadow:0 0 0 1px rgb(17 17 17/.08); }
.ddm-x .ddm-orb-face .ddm-orb-logo { width:34px; height:34px; }
.ddm-x .ddm-orb-face b { font:600 12px/1.15 var(--sans); letter-spacing:-.01em; max-width:88px; }
.ddm-x .ddm-orb-m { font:500 .68rem/1.2 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.ddm-x .ddm-orb-face .ddm-orb-m { font-size:9.5px; }
.ddm-x .ddm-orb-card { position:absolute; left:50%; top:50%; display:grid; gap:12px; padding:10px 10px 14px; text-align:left; opacity:0; transform:translate(-50%,-50%); pointer-events:none; }
.ddm-x .ddm-orb-shot { display:block; padding:6px; border-radius:14px; background:linear-gradient(140deg,rgb(255 255 255/.9),rgb(255 255 255/.35)); box-shadow:inset 0 0 0 1px rgb(255 255 255/.9), 0 10px 24px -16px rgb(17 17 17/.5); }
.ddm-x .ddm-orb-shot img { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top; border-radius:9px; }
.ddm-x .ddm-orb-meta { display:grid; gap:6px; padding:2px 6px 0; }
.ddm-x .ddm-orb-top { display:flex; align-items:center; gap:10px; }
.ddm-x .ddm-orb-top .ddm-orb-logo { width:24px; height:24px; }
.ddm-x .ddm-orb-meta b { font:600 1.15rem/1.15 var(--sans); letter-spacing:-.03em; }
.ddm-x .ddm-orb-link { display:inline-flex; gap:8px; align-items:center; width:fit-content; font-size:14px; font-weight:500; text-decoration:underline; text-decoration-color:var(--sun); text-decoration-thickness:3px; text-underline-offset:5px; }
@media (max-width:900px) {
  .ddm-x .ddm-latest-side { position:relative; left:auto; right:auto; top:auto; bottom:auto; width:100%; height:340px; margin-top:-8px; }
  .ddm-x .ddm-orbs { inset:0; }
}
@media (max-width:560px) {
  .ddm-x .ddm-orb { width:96px; height:96px; }
  .ddm-x .ddm-orb-face b { font-size:11px; }
}
@media (forced-colors:active) { .ddm-x .ddm-orb::after { display:none; } .ddm-x .ddm-orb { border:1px solid CanvasText; } }

/* Lens: three copies of the hero content (yellow, blue, black) under a moving clip */
.ddm-x .ddm-lens-clip { position:absolute; left:0; top:0; z-index:3; width:var(--w); height:var(--h); border-radius:var(--rad); overflow:hidden; isolation:isolate; pointer-events:none; opacity:0; transition:opacity .5s var(--ease);
  transform:translate3d(calc(var(--x) - var(--w) / 2),calc(var(--y) - var(--h) / 2),0); }
.ddm-x .ddm-lens-stage { position:absolute; left:0; top:0; width:var(--hw,100vw); height:var(--hh,100vh); isolation:isolate; transform:translate3d(calc(var(--w) / 2 - var(--x)),calc(var(--h) / 2 - var(--y)),0); }
.ddm-x .ddm-lens-bg { position:absolute; inset:0; background:var(--lens-bg); }
.ddm-x .cw.cg { height:100%; transform:scale(var(--m)); }
.ddm-x .cw { position:absolute; left:0; top:0; width:100%; transform-origin:var(--x) var(--y); mix-blend-mode:multiply; }
.ddm-x .cw.cy { transform:scale(calc(var(--m) + var(--d))); filter:blur(.6px); }
.ddm-x .cw.cb { transform:scale(calc(var(--m) - var(--d))); filter:blur(.6px); }
.ddm-x .cw.ck { transform:scale(var(--m)); }
.ddm-x .cw.cy *, .ddm-x .cw.cb * { background:transparent !important; box-shadow:none !important; border-color:transparent !important; }
.ddm-x .cw.cy * { color:var(--sun) !important; text-decoration-color:var(--sun) !important; }
.ddm-x .cw.cb * { color:var(--cool) !important; text-decoration-color:var(--cool) !important; }
/* Light text on dark fills (Book a call) can't take a multiplied fringe: it would turn olive. Only the black copy draws it. */
.ddm-x .cw.cy .ddm-btn-ink, .ddm-x .cw.cb .ddm-btn-ink { visibility:hidden; }
.ddm-x .ddm-lens-ring { position:absolute; z-index:4; left:calc(var(--x) - var(--w) / 2); top:calc(var(--y) - var(--h) / 2); width:var(--w); height:var(--h); border-radius:var(--rad); pointer-events:none; opacity:0; transition:opacity .5s var(--ease);
  background:radial-gradient(circle at 32% 22%,rgb(255 255 255/.55),rgb(255 255 255/0) 18%),radial-gradient(circle at 68% 84%,rgb(255 199 0/.22),rgb(255 199 0/0) 26%);
  box-shadow:inset 0 0 0 1px rgb(255 255 255/.8), inset 0 -12px 26px rgb(0 0 0/.08), inset 0 10px 18px rgb(255 255 255/.32), inset 0 0 0 6px rgb(255 255 255/.12), 0 22px 44px -16px rgb(0 0 0/.35); }
/* Contour light on the lens rim: blue and white only (no Sunflower), angle and strength written by scripts/home.js (--la, --lg) */
.ddm-x .ddm-lens-ring::after { content:""; position:absolute; inset:-1.5px; border-radius:inherit; padding:2px; pointer-events:none; opacity:var(--lg,0);
  background:conic-gradient(from calc(var(--la,-45deg) - 95deg),transparent 0deg,rgb(59 91 255/.45) 34deg,rgb(59 91 255/.95) 64deg,rgb(125 147 255) 84deg,#fff 93deg 97deg,rgb(125 147 255) 106deg,rgb(59 91 255/.9) 126deg,rgb(59 91 255/.4) 156deg,transparent 190deg 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  filter:drop-shadow(0 0 4px rgb(59 91 255/.55)) drop-shadow(0 0 1px rgb(255 255 255/.9)); }
.ddm-x .ddm-hero.lens-on .ddm-lens-clip, .ddm-x .ddm-hero.lens-on .ddm-lens-ring { opacity:1; }
.ddm-x .ddm-hero.lens-on.lens-gone .ddm-lens-clip, .ddm-x .ddm-hero.lens-on.lens-gone .ddm-lens-ring { opacity:0; }
.ddm-x .ddm-hero .ddm-hero-in { translate:0 var(--par,0px); }

/* Ticker: yellow as a fill */
.ddm-x .ddm-ticker { position:relative; z-index:3; overflow:hidden; background:var(--sun); color:var(--ink); padding:14px 0; border-block:1px solid rgb(17 17 17/.08); }
.ddm-x .ddm-ticker-track { display:flex; width:max-content; align-items:center; font:500 .82rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.ddm-x .ddm-ticker-track i { font-style:normal; }
/* Two identical sets, each with trailing space, so -50% lands exactly on the seam */
.ddm-x .ddm-ticker-set { display:flex; flex:none; gap:26px; padding-right:26px; align-items:center; }


/* Shared section heads */
.ddm-x .ddm-head { max-width:760px; margin-bottom:clamp(40px,6vw,72px); }
.ddm-x .ddm-head h2 { margin-bottom:24px; }
.ddm-x .ddm-head > p:not(.ddm-eyebrow) { font-size:1.1rem; color:var(--ink-2); max-width:540px; }


/* Services, ticker motion, closing CTA and footer edge: styles/sections.css (October 17 light overhaul) */

/* The one obsidian chapter: How it works (styles/offer.css). Yellow text allowed here */
.ddm-x .ddm-obsidian { background:var(--obsidian); color:var(--on-dark); overflow:hidden; isolation:isolate; }
.ddm-x .ddm-obsidian .ddm-digits { opacity:.7; -webkit-mask:radial-gradient(ellipse 70% 80% at 80% 50%,#000 15%,transparent 70%); mask:radial-gradient(ellipse 70% 80% at 80% 50%,#000 15%,transparent 70%); }
.ddm-x .ddm-obsidian .ddm-grain { mix-blend-mode:overlay; opacity:.5; }
.ddm-x .ddm-obsidian .ddm-eyebrow { color:var(--on-dark-2); }
.ddm-x .ddm-obsidian h2 { color:#fff; }
.ddm-x .ddm-obsidian h2 > span:not(.ddm-mark) { color:var(--sun); }
.ddm-x .ddm-obsidian .ddm-head > p:not(.ddm-eyebrow) { color:var(--on-dark-2); }

/* People */
.ddm-x .ddm-people-grid { display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(40px,6vw,96px); align-items:center; }
.ddm-x .ddm-team { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* Closing CTA (light) */
.ddm-x .ddm-ctas-center { justify-content:center; }

/* Footer (light) */
.ddm-x .ddm-footer { padding:clamp(96px,10.5vw,190px) 0 28px; background:var(--canvas); /* same off-white as People (Daniel, Oct 18) */ border-top:1px solid var(--line); overflow:hidden; }
/* Footer top: a dark card with the Services rim (one crisp 1px white line, soft white glow) above the big logo */
.ddm-x .ddm-footer-card { position:relative; isolation:isolate; overflow:hidden; border-radius:var(--radius); background:var(--obsidian); color:var(--on-dark); padding:clamp(28px,4vw,56px);
  border:1px solid rgb(255 255 255/.92); box-shadow:0 0 1.5px #fff, 0 0 8px rgb(255 255 255/.55), inset 0 0 14px rgb(255 255 255/.12), 0 34px 60px -34px rgb(0 0 0/.55); }
.ddm-x .ddm-footer-card .ddm-digits { opacity:.55; -webkit-mask:radial-gradient(ellipse 60% 90% at 88% 50%,#000 10%,transparent 72%); mask:radial-gradient(ellipse 60% 90% at 88% 50%,#000 10%,transparent 72%); }
.ddm-x .ddm-footer-card .ddm-grain { mix-blend-mode:overlay; opacity:.5; }
.ddm-x .ddm-footer-card.ddm-contour::before { inset:-1px; padding:2px; }
.ddm-x .ddm-footer-top { position:relative; z-index:1; display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:32px; }
.ddm-x .ddm-footer-intro { display:grid; justify-items:start; align-content:start; gap:18px; }
.ddm-x .ddm-footer-intro p { margin:0; }
.ddm-x .ddm-footer-tag { color:#fff; font-size:clamp(1.15rem,1.6vw,1.45rem); line-height:1.35; letter-spacing:-.015em; }
.ddm-x .ddm-footer-mail { color:var(--on-dark-2); text-decoration:underline; text-decoration-color:rgb(255 255 255/.25); text-underline-offset:5px; transition:color .3s, text-decoration-color .3s; }
.ddm-x .ddm-footer-mail:hover { color:#fff; text-decoration-color:currentColor; }
.ddm-x .ddm-footer-h { margin:0 0 6px; font:500 .72rem/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--on-dark-2); }
.ddm-x .ddm-footer nav { display:grid; gap:10px; align-content:start; }
.ddm-x .ddm-footer nav a { width:fit-content; color:var(--on-dark); text-decoration:underline; text-decoration-color:transparent; text-decoration-thickness:1.5px; text-underline-offset:6px; transition:text-decoration-color .3s, color .3s; }
.ddm-x .ddm-footer nav a:hover { color:#fff; text-decoration-color:var(--sun); }
.ddm-x .ddm-footer-word { margin:clamp(48px,6vw,80px) 0 0; padding-bottom:28px; }
.ddm-x .ddm-footer-word svg { display:block; width:100%; height:auto; overflow:visible; }
.ddm-x .ddm-logo-ink { fill:var(--ink); fill-rule:evenodd; }
/* The logo's yellow line, styled like the hero ticker so it has depth (Daniel, Oct 18): Sunflower, hairline edges,
   a white highlight along the top that fades to the right, and a soft shadow underneath. Taller than the logo file's bar (Daniel, Oct 18): 22/1418 of the logo width, about 20px on desktop. */
.ddm-x .ddm-logo-bar { position:relative; display:block; width:100%; aspect-ratio:1418/22; min-height:12px; background:var(--sun);
  border-block:1px solid rgb(17 17 17/.08); box-shadow:inset 0 -2px 3px -1px rgb(150 100 0/.22), 0 3px 6px -3px rgb(0 0 0/.28); }
.ddm-x .ddm-logo-bar::after { content:""; position:absolute; left:0; right:0; top:0; height:2px; pointer-events:none; background:linear-gradient(90deg,rgb(255 255 255/.95),rgb(255 255 255/.35) 55%,rgb(255 255 255/0) 85%); }
/* Glint on the logo (Daniel picked it over an edge light, Oct 18): a narrow white sheen fills the letters where the moving
   gradient passes (scripts/sections.js); hidden between sweeps */
.ddm-x .ddm-logo-glint { fill-rule:evenodd; opacity:0; }
.ddm-x .ddm-footer-word.is-glided .ddm-logo-glint { opacity:1; }
.ddm-x .ddm-logo-edge { fill:none; stroke-width:2.4px; stroke-linejoin:round; vector-effect:non-scaling-stroke; opacity:0; transition:opacity .5s var(--ease); }
.ddm-x .ddm-footer-word.is-edge-lit .ddm-logo-edge { opacity:1; }
.ddm-x .ddm-footer-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding-top:20px; border-top:1px solid var(--line); font:500 .75rem var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }

/* Load + reveal motion (only when the script marks the page ready) */
.ddm-x.is-ready [data-reveal] { opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.ddm-x.is-ready [data-reveal].is-in { opacity:1; transform:none; }
.ddm-x.is-ready .ddm-hero-title .ddm-line > span { transform:translateY(160%); transition:transform 1.15s var(--ease); }
.ddm-x.is-ready .ddm-hero-title .ddm-line:nth-child(2) > span { transition-delay:.08s; }
.ddm-x.is-ready:not(.is-loaded) .ddm-hero-title:not(.is-split) .ddm-line > span { opacity:0; } /* nothing peeks out of the masks while the web font loads */
.ddm-x.is-ready.is-loaded .ddm-hero-title .ddm-line > span { transform:none; }
.ddm-x.is-ready .ddm-hero-in > :not(.ddm-hero-title) { opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.ddm-x.is-ready .ddm-hero-in > :nth-child(3) { transition-delay:.4s; }
.ddm-x.is-ready .ddm-hero-in > :nth-child(4) { transition-delay:.47s; }
.ddm-x.is-ready .ddm-hero-in > :nth-child(5) { transition-delay:.54s; }
.ddm-x.is-ready .ddm-hero-in > :nth-child(6) { transition-delay:.61s; }
.ddm-x.is-ready.is-loaded .ddm-hero-in > :not(.ddm-hero-title) { opacity:1; transform:none; }
.ddm-x.is-ready .ddm-nav-bar { opacity:0; translate:0 -36px; transition:opacity 1s var(--ease), translate 1s var(--ease), transform .5s var(--ease); }
.ddm-x.is-ready.is-loaded .ddm-nav-bar { opacity:1; translate:0 0; }
.ddm-x .cw .ddm-hero-in > *, .ddm-x .cw .ddm-hero-title .ddm-line > span { transition:none !important; }
/* Hero intro v2 (Daniel, Oct 18): scripts/home.js splits the headline and paragraph into words and sets .is-intro for ~3s */
.ddm-x .ddm-hero-title .ddm-hword, .ddm-x .ddm-sub .ddm-sw { display:inline-block; }
.ddm-x.is-ready .ddm-hero-title.is-split .ddm-line > span { transform:none; transition:none; }
.ddm-x .is-intro .ddm-hword { transform-origin:0 100%; }
.ddm-x.is-ready.is-loaded .is-intro .ddm-hword { transition:translate 1.1s cubic-bezier(.2,1,.25,1) calc(.05s + var(--w) * 90ms), rotate 1.1s cubic-bezier(.2,1,.25,1) calc(.05s + var(--w) * 90ms); }
.ddm-x .is-intro .ddm-mark.is-swipe { background-repeat:no-repeat; background-size:100% 100%; }
.ddm-x.is-ready.is-loaded .is-intro .ddm-mark.is-swipe { transition:background-size .75s cubic-bezier(.65,0,.35,1) calc(.4s + var(--sw) * 90ms); }
.ddm-x.is-ready:not(.is-loaded) .is-intro .ddm-hword { translate:0 160%; rotate:4deg; }
.ddm-x.is-ready:not(.is-loaded) .is-intro .ddm-mark.is-swipe { background-size:0% 100%; }
.ddm-x.is-ready .ddm-hero-in > .ddm-sub.is-split { opacity:1; transform:none; transition:none; }
.ddm-x.is-ready.is-loaded .is-intro .ddm-sw { transition:opacity .6s var(--ease) calc(.45s + var(--w) * 14ms), translate .8s var(--ease) calc(.45s + var(--w) * 14ms); }
.ddm-x.is-ready:not(.is-loaded) .is-intro .ddm-sw { opacity:0; translate:0 .6em; }
.ddm-x.is-ready .ddm-hero-in.is-intro > .ddm-ctas { opacity:1; transform:none; transition:none; }
.ddm-x.is-ready.is-loaded .is-intro .ddm-ctas .ddm-btn { transition:opacity .5s var(--ease) .85s, translate .85s cubic-bezier(.34,1.5,.64,1) .85s, scale .85s cubic-bezier(.34,1.5,.64,1) .85s; }
.ddm-x.is-ready.is-loaded .is-intro .ddm-ctas .ddm-btn + .ddm-btn { transition-delay:.95s; }
.ddm-x.is-ready:not(.is-loaded) .is-intro .ddm-ctas .ddm-btn { opacity:0; translate:0 18px; scale:.9; }
.ddm-x.is-ready.is-loaded .is-intro .ddm-ctas .ddm-arrow { transition:transform .5s var(--ease), opacity .4s var(--ease) 1.25s, translate .6s var(--ease) 1.25s; }
.ddm-x.is-ready:not(.is-loaded) .is-intro .ddm-ctas .ddm-arrow { opacity:0; translate:-10px 0; }
.ddm-x.is-ready .ddm-hero-in.is-intro > .ddm-fine { transition-delay:1.25s; }

/* Responsive */
@media (max-width:900px) {
  .ddm-x { --nav-h:64px; }
  .ddm-x .ddm-nav { top:calc(10px + env(safe-area-inset-top,0px)); }
  .ddm-x .ddm-nav-bar { flex-wrap:wrap; gap:4px; }
  .ddm-x .ddm-nav.is-open .ddm-nav-bar { border-radius:26px; background:rgb(247 247 245/.94); color:var(--ink); }
  .ddm-x .ddm-nav.is-dark.is-open .ddm-brand-blk { opacity:1; }
  .ddm-x .ddm-nav.is-dark.is-open .ddm-brand-wht { opacity:0; }
  .ddm-x .ddm-nav-cta { display:none; }
  .ddm-x .ddm-nav.is-open .ddm-nav-cta { display:flex; order:4; width:100%; margin:4px 0 6px; min-height:50px; }
  .ddm-x .ddm-brand { margin-right:auto; }
  .ddm-x .ddm-nav-glide { display:none; }
  .ddm-x .ddm-nav-links { order:3; width:100%; flex-direction:column; align-items:stretch; margin:0; padding:8px 8px 4px; }
  .ddm-x .ddm-nav-links > a, .ddm-x .ddm-nav-sub > a { padding:14px 4px; font-size:1.25rem; font-weight:600; letter-spacing:-.03em; border-top:1px solid var(--line); border-radius:0; opacity:1; }
  .ddm-x .ddm-nav-sub { display:block; }
  .ddm-x .ddm-nav-sub > a { display:block; padding-right:4px; }
  .ddm-x .ddm-nav-sub-btn { display:none; }
  .ddm-x .ddm-nav-menu, .ddm-x .ddm-nav-sub.is-open .ddm-nav-menu, .ddm-x .ddm-nav.is-dark .ddm-nav-menu { position:static; width:auto; padding:0 0 10px; background:none; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; opacity:1; visibility:visible; translate:none; scale:none; transition:none; color:inherit; }
  .ddm-x .ddm-nav-menu::before { content:none; }
  .ddm-x .ddm-nav-links .ddm-nav-menu a { grid-template-columns:22px 1fr; padding:8px 4px; opacity:1; translate:none; filter:none; transition:none; }
  .ddm-x .ddm-nav-menu a:not(.is-all)::after { content:none; }
  .ddm-x .ddm-nav-links .ddm-nav-menu a:is(:hover,:focus-visible,[aria-current]) { background:none; box-shadow:none; }
  .ddm-x .ddm-nav-menu:not(.ddm-nav-work) a:nth-child(-n+3)::before { left:14.25px; }
  .ddm-x .ddm-nav-links .ddm-nav-menu .is-all { display:none; }
  .ddm-x .ddm-people-grid { grid-template-columns:1fr; }
  .ddm-x .ddm-footer-top { grid-template-columns:1fr 1fr; }
  .ddm-x .ddm-footer-intro { grid-column:1 / -1; }
}
@media (min-width:901px) { .ddm-x .ddm-nav-toggle { display:none !important; } }
@media (max-width:620px) {
  .ddm-x .ddm-hero .ddm-digits { -webkit-mask:linear-gradient(90deg,transparent 0 62%,#000 100%); mask:linear-gradient(90deg,transparent 0 62%,#000 100%); opacity:.55; }
  .ddm-x .ddm-hero-in > .ddm-ctas { width:100%; }
  .ddm-x .ddm-ctas .ddm-btn { flex:1 1 100%; }
  .ddm-x .ddm-team { gap:10px; }
  .ddm-x .ddm-footer-top { grid-template-columns:1fr; }
}

/* Preferences */
@media (prefers-reduced-motion:reduce) {
  .ddm-x *, .ddm-x *::before, .ddm-x *::after { animation:none !important; transition:none !important; }
  .ddm-x.is-ready [data-reveal], .ddm-x.is-ready .ddm-hero-title .ddm-line > span, .ddm-x.is-ready .ddm-hero-in > *, .ddm-x.is-ready .ddm-nav-bar { opacity:1; transform:none; translate:none; }
}
@media (prefers-reduced-transparency:reduce) {
  .ddm-x .ddm-glass { -webkit-backdrop-filter:none; backdrop-filter:none; }
  .ddm-x .ddm-nav-bar { background:var(--paper); }
  .ddm-x .ddm-nav.is-dark .ddm-nav-bar { background:#1b1b1c; }
}
@media (forced-colors:active) {
  .ddm-x .ddm-lens-clip, .ddm-x .ddm-lens-ring, .ddm-x .ddm-digits, .ddm-x .ddm-grain, .ddm-x .ddm-lens-cast, .ddm-x .ddm-lens-caustic { display:none; }
  .ddm-x .ddm-btn, .ddm-x .ddm-nav-bar { border:1px solid CanvasText; }
  .ddm-x .ddm-mark { background:none; text-decoration:underline; }
}

/* Nav B (Oct 24, 2026): the seven pitched ideas; Daniel picked B over A, so the header always carries .is-v2 now.
   Undo: source/archive/nav-ab-2026-10-24/ (A/B switch) and source/archive/nav-pre-b-2026-10-24/ (before B). */
/* Smoother dropdowns (Daniel, Oct 24): no blur on the items, a shorter rise and stagger; a swap between menus skips the stagger
   and the outgoing menu just fades out fast, so two menus never sit on top of each other. */
.ddm-x .ddm-nav-menu { transition:opacity .25s var(--ease), translate .4s var(--ease), scale .4s var(--ease), visibility 0s .4s; }
.ddm-x .ddm-nav-links .ddm-nav-menu a { filter:none; translate:0 4px; transition:opacity .3s var(--ease), translate .4s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease); }
.ddm-x .ddm-nav-sub.is-open .ddm-nav-menu a { transition-delay:calc(40ms + var(--i,0) * 25ms), calc(40ms + var(--i,0) * 25ms), 0s, 0s; }
.ddm-x .ddm-nav-sub.is-swap .ddm-nav-menu, .ddm-x .ddm-nav-sub.is-swap.is-open .ddm-nav-menu { transition:opacity .08s linear, visibility 0s .08s; translate:-50% 0; scale:1; }
.ddm-x .ddm-nav-sub.is-swap:not(.is-open) { z-index:0; }
.ddm-x .ddm-nav-sub.is-swap .ddm-nav-sub-btn i { transition-duration:.2s; }
.ddm-x .ddm-nav.is-v2 .ddm-nav-sub.is-swap #ddm-nav-services { translate:0 0; }
.ddm-x .ddm-nav-sub.is-swap.is-open .ddm-nav-menu { transition:opacity .2s var(--ease), visibility 0s; }
.ddm-x .ddm-nav-sub.is-swap .ddm-nav-menu a { translate:0 0; transition:opacity .14s linear, background .25s var(--ease), box-shadow .25s var(--ease); transition-delay:0s !important; }
.ddm-x .ddm-nav-sub.is-swap .ddm-nav-peek { animation:none; }
/* 4 Smart scroll: slimmer once past the top, tucks away on the way down, back on the way up */
.ddm-x .ddm-nav { transition:translate .5s var(--ease), top .4s var(--ease); }
.ddm-x .ddm-nav.is-v2.is-slim { top:calc(8px + env(safe-area-inset-top,0px)); }
.ddm-x .ddm-nav.is-v2.is-slim .ddm-nav-bar { padding-block:4px; }
.ddm-x .ddm-nav.is-v2.is-slim .ddm-brand-mark { scale:.88; }
.ddm-x .ddm-nav.is-v2.is-tucked { translate:0 calc(-100% - 24px); }
.ddm-x .ddm-nav-bar { transition:transform .5s var(--ease), color .3s, border-radius .3s, padding .4s var(--ease); }
/* 1 Message us + 5 EN/ES */
.ddm-x .ddm-nav.is-v2 .ddm-nav-bar { width:min(940px,calc(100% - 32px)); }
.ddm-x .ddm-nav-wa { display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 15px 0 13px; border-radius:999px; font-size:14px; white-space:nowrap; box-shadow:inset 0 0 0 1px rgb(17 17 17/.14); transition:background .3s var(--ease), box-shadow .3s var(--ease); }
.ddm-x .ddm-nav-wa:hover { background:rgb(255 255 255/.7); box-shadow:inset 0 0 0 1px rgb(17 17 17/.06), 0 6px 16px -10px rgb(0 0 0/.35); }
.ddm-x .ddm-nav.is-dark .ddm-nav-wa { box-shadow:inset 0 0 0 1px rgb(255 255 255/.22); }
.ddm-x .ddm-nav.is-dark .ddm-nav-wa:hover { background:rgb(255 255 255/.1); }
/* 2 Services preview: the menu widens, the hovered service shows on the right */
.ddm-x .ddm-nav.is-v2 #ddm-nav-services { left:-12px; width:560px; grid-template-columns:270px 1fr; column-gap:10px; translate:0 -8px; transform-origin:12% 0; }
.ddm-x .ddm-nav.is-v2 .ddm-nav-sub.is-open #ddm-nav-services { translate:0 0; }
.ddm-x .ddm-nav.is-v2 #ddm-nav-services > a { grid-column:1; }
.ddm-x .ddm-nav-peek { grid-column:2; grid-row:1 / span 6; position:relative; overflow:hidden; border-radius:16px; background:var(--obsidian); min-height:300px; }
.ddm-x .ddm-nav-peek-item { position:absolute; inset:0; opacity:0; transition:opacity .45s var(--ease); }
.ddm-x .ddm-nav-peek-item.is-on { opacity:1; }
.ddm-x .ddm-nav-peek-item :is(img,video) { width:100%; height:100%; object-fit:cover; scale:1.06; transition:scale 1.2s var(--ease); }
.ddm-x .ddm-nav-peek-item.is-on :is(img,video) { scale:1; }
.ddm-x .ddm-nav-peek-item b { position:absolute; left:12px; right:12px; bottom:12px; padding:10px 12px; border-radius:12px; font-size:13px; font-weight:600; line-height:1.3; color:#fff; background:rgb(17 17 17/.62); box-shadow:inset 0 0 0 1px rgb(255 255 255/.14); }
.ddm-x .ddm-nav-sub.is-open .ddm-nav-peek { animation:ddm-peek-in .5s var(--ease) both; }
@keyframes ddm-peek-in { from { opacity:0; translate:8px 0; } }
/* 3 Work: newest projects as small logo lenses */
.ddm-x .ddm-nav-work { width:270px; }
.ddm-x .ddm-nav-links .ddm-nav-work a:not(.is-all) { grid-template-columns:44px 1fr auto; gap:12px; padding:7px 12px 7px 7px; }
.ddm-x .ddm-nav-lens { display:block; width:44px; height:44px; border-radius:50%; overflow:hidden; background:rgb(255 255 255/.75); box-shadow:inset 0 1px 0 #fff, inset 0 0 0 1px rgb(17 17 17/.08), 0 6px 14px -10px rgb(0 0 0/.4); transition:box-shadow .35s var(--ease); }
.ddm-x .ddm-nav-lens img { width:100%; height:100%; object-fit:contain; padding:7px; }
.ddm-x .ddm-nav-work a:is(:hover,:focus-visible,[aria-current]) .ddm-nav-lens { box-shadow:0 0 0 3px var(--sun), 0 0 14px 2px rgb(255 199 0/.45); }
.ddm-x .ddm-nav.is-dark .ddm-nav-lens { background:rgb(255 255 255/.92); }
/* 7 Reading bar on project stories and the blog */
.ddm-x .ddm-nav-progress { position:absolute; left:28px; right:28px; bottom:0; height:2px; border-radius:2px; overflow:hidden; pointer-events:none; opacity:0; transition:opacity .3s; }
.ddm-x .ddm-nav.is-v2.has-progress .ddm-nav-progress { opacity:1; }
.ddm-x .ddm-nav-progress i { display:block; height:100%; background:var(--sun); transform-origin:0 50%; transform:scaleX(var(--p,0)); box-shadow:0 0 8px rgb(255 199 0/.6); }
/* 6 Phone menu as a dark sheet: the open menu fills the screen on obsidian with the number field behind it */
.ddm-x .ddm-nav-sheet-bg, .ddm-x .ddm-nav-sheet-actions { display:none !important; }
@media (max-width:900px) {
  .ddm-x .ddm-nav.is-v2 .ddm-nav-bar { width:min(860px,calc(100% - 32px)); }
  .ddm-x .ddm-nav.is-v2 :is(.ddm-nav-wa,.ddm-nav-peek,.ddm-nav-work) { display:none !important; }
  .ddm-x .ddm-nav .ddm-nav-sub .ddm-nav-menu { translate:none !important; transition:none !important; }
  .ddm-x .ddm-nav-links .ddm-nav-menu a { translate:none; transition:none; }
  .ddm-x .ddm-nav.is-v2.is-open { top:0; translate:none; }
  .ddm-x .ddm-nav.is-v2.is-open .ddm-nav-bar { position:fixed; inset:0; width:auto; min-height:100dvh; overflow-y:auto; align-content:flex-start; padding:calc(16px + env(safe-area-inset-top,0px)) 20px calc(24px + env(safe-area-inset-bottom,0px)); border-radius:0; background:var(--obsidian); color:#fff; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .ddm-x .ddm-nav.is-v2.is-open .ddm-nav-bar::before, .ddm-x .ddm-nav.is-v2.is-open .ddm-nav-bar::after { display:none; }
  .ddm-x .ddm-nav.is-v2.is-open .ddm-brand-blk { opacity:0; }
  .ddm-x .ddm-nav.is-v2.is-open .ddm-brand-wht { opacity:1; }
  .ddm-x .ddm-nav.is-v2.is-open .ddm-nav-sheet-bg { display:block !important; position:absolute; inset:0; z-index:-1; pointer-events:none; -webkit-mask:linear-gradient(transparent 0, #000 30%, #000 70%, transparent); mask:linear-gradient(transparent 0, #000 30%, #000 70%, transparent); opacity:.6; }
  .ddm-x .ddm-nav.is-v2.is-open .ddm-nav-links { position:relative; padding-top:20px; }
  .ddm-x .ddm-nav.is-v2.is-open .ddm-nav-links > a, .ddm-x .ddm-nav.is-v2.is-open .ddm-nav-sub > a { padding:16px 4px; font-size:clamp(1.8rem,8vw,2.4rem); letter-spacing:-.045em; border-top-color:var(--line-dark); }
  .ddm-x .ddm-nav.is-v2.is-open .ddm-nav-menu small { color:var(--on-dark-2); }
  .ddm-x .ddm-nav.is-v2.is-open .ddm-nav-menu a > i { background:transparent; box-shadow:inset 0 0 0 1.5px rgb(255 255 255/.45); }
  .ddm-x .ddm-nav.is-v2.is-open .ddm-nav-menu:not(.ddm-nav-work) a:nth-child(-n+3)::before { background:rgb(255 255 255/.18); }
  .ddm-x .ddm-nav.is-v2.is-open .ddm-nav-menu .is-side > i { border-color:rgb(255 255 255/.4); }
  .ddm-x .ddm-nav.is-v2.is-open .ddm-nav-menu .is-side::before { border-color:rgb(255 255 255/.16); }
  .ddm-x .ddm-nav.is-v2.is-open .ddm-nav-sheet-actions { display:grid !important; order:5; grid-template-columns:1fr 1fr; gap:8px; width:100%; margin-top:auto; }
  .ddm-x .ddm-nav.is-v2.is-open .ddm-nav-cta { order:6; margin:8px 0 0; }
  .ddm-x .ddm-nav-sheet-btn { display:flex; align-items:center; justify-content:center; gap:8px; min-height:50px; border-radius:999px; font-weight:500; color:#fff; box-shadow:inset 0 0 0 1px rgb(255 255 255/.85), 0 0 1.5px #fff, 0 0 8px rgb(255 255 255/.35); }
  .ddm-x .ddm-nav.is-v2.is-open .ddm-nav-toggle { color:#fff; }
}