/* ============================================================
   Digital Experts — ported design system (CMS-compatible)
   v2: rebuilt against the real production site (askdigitalexperts.com)
   Fonts: Bitter + Work Sans standing in for Noto Serif Condensed /
   Open Sauce (real font files can't be hosted through this connector).
   ============================================================ */

:root {
  /* Neutrals */
  --de-black:#000000; --de-ink:#14140F; --de-cream:#E2DCD2; --de-cream-deep:#D5CDBF;
  --de-cream-soft:#EFEAE1; --de-white:#FFFFFF;
  /* Brand */
  --de-gold-light:#EED484; --de-gold:#DAAA00; --de-gold-deep:#4A412A;
  --de-green:#154734; --de-green-deep:#0E2F23; --de-green-mid:#1F6249; --de-green-soft:#E4ECE7;
  --de-navy:#00205B; --de-navy-mid:#123A7E; --de-navy-soft:#E5E9F0;
  --de-burgundy:#5E2436; --de-burgundy-mid:#7A3145; --de-burgundy-deep:#431A27;
  --de-success:#1F6249; --de-warning:#DC582A; --de-alert:#C1502E;
  /* Semantic */
  --text-strong:var(--de-ink); --text-body:#3A382F; --text-muted:#6B675A; --text-invert:var(--de-cream);
  --border-hairline:rgba(20,20,15,0.14); --border-strong:rgba(20,20,15,0.32);
  /* Type */
  --font-display:"Bitter","Georgia",serif;
  --font-body:"Work Sans","Segoe UI",system-ui,sans-serif;
  /* Spacing / radius / shadow */
  --sp-6:2rem; --sp-7:3rem; --sp-8:4rem; --sp-9:6rem;
  --radius-lg: 18px;
  --shadow-sm: 0 2px 8px rgba(20,20,15,0.07);
  --shadow-md: 0 10px 30px -12px rgba(20,20,15,0.22);
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --container-max:1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family:var(--font-body); font-size:17px; line-height:1.6; color:var(--text-body); background:var(--de-cream); -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:500; color:var(--text-strong); line-height:1.1; letter-spacing:-0.01em; margin:0 0 0.5em; text-wrap:balance; }
p { margin:0 0 1.15em; }
a { color:var(--de-green); }
img { max-width:100%; display:block; }

.de-wrap { max-width:var(--container-max); margin:0 auto; padding:0 44px; }
.de-eyebrow { font-size:12px; letter-spacing:0.24em; text-transform:uppercase; font-weight:600; color:var(--de-gold); margin:0 0 20px; }

/* Nav — fixed, transparent + white/cream over the hero video, solid cream
   with dark text once the page is scrolled (toggled via .is-scrolled, see
   main.js). Fixed rather than sticky so the hero video runs edge-to-edge
   behind it instead of the nav reserving its own flow space above it. */
.de-header { position:fixed; top:0; left:0; right:0; z-index:50; background:transparent; border-bottom:1px solid transparent; transition:background 0.35s ease, border-color 0.35s ease; }
.de-header.is-scrolled { background:rgba(226,220,210,0.92); backdrop-filter:blur(10px); border-bottom-color:var(--border-hairline); }
.de-header .de-wrap { display:flex; align-items:center; height:150px; gap:36px; }
.de-logo { display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:19px; font-weight:600; color:var(--de-cream); text-decoration:none; transition:color 0.35s ease; }
.de-header.is-scrolled .de-logo { color:var(--de-ink); }
.de-logo svg { height:30px; width:auto; flex:none; fill:var(--de-cream); transition:fill 0.35s ease; }
.de-header.is-scrolled .de-logo svg { fill:var(--de-green); }
.de-nav { display:flex; align-items:center; gap:28px; margin-left:auto; flex-wrap:wrap; }
.de-nav a { font-size:12px; letter-spacing:0.12em; text-transform:uppercase; font-weight:600; color:var(--de-cream); text-decoration:none; transition:color 0.35s ease; }
.de-header.is-scrolled .de-nav a { color:var(--de-ink); }
.de-nav a.de-cta { display:inline-flex; align-items:center; padding:12px 24px; border:1px solid rgba(238,232,222,0.6); border-radius:5px; transition:border-color 0.35s ease, background 0.35s ease, color 0.35s ease; }
.de-nav a.de-cta:hover { background:rgba(238,232,222,0.15); }
.de-header.is-scrolled .de-nav a.de-cta { border-color:var(--de-ink); }
.de-header.is-scrolled .de-nav a.de-cta:hover { background:var(--de-ink); color:var(--de-cream); }

/* Mobile nav toggle (hamburger) — hidden on desktop, shown ≤860px. */
.de-nav-toggle { display:none; margin-left:auto; width:44px; height:44px; border:1px solid rgba(238,232,222,0.5); border-radius:8px; background:transparent; padding:0; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px; transition:border-color 0.35s ease; }
.de-nav-toggle span { display:block; width:20px; height:2px; background:var(--de-cream); border-radius:2px; transition:transform 0.25s var(--ease-out), opacity 0.25s var(--ease-out), background 0.35s ease; }
.de-header.is-scrolled .de-nav-toggle, .de-header.is-open .de-nav-toggle { border-color:var(--de-ink); }
.de-header.is-scrolled .de-nav-toggle span, .de-header.is-open .de-nav-toggle span { background:var(--de-ink); }
.de-header.is-open .de-nav-toggle span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.de-header.is-open .de-nav-toggle span:nth-child(2) { opacity:0; }
.de-header.is-open .de-nav-toggle span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Nav dropdowns (Platform / Solutions) — hover- and keyboard-revealed
   panel anchored under the trigger link. Panel is always on the cream
   background regardless of header scroll state, so its links get a
   fixed dark color rather than inheriting the cream/ink toggle.

   .de-nav-item gets extra padding-bottom (cancelled by an equal negative
   margin-bottom, so it doesn't affect nav-bar layout/height) so its
   :hover / :focus-within hit area reaches all the way down to the
   .de-nav-menu panel below. Because .de-nav-menu is `top:100%` of
   .de-nav-item's own (now taller) padding box, that padding-bottom IS
   the visual gap between the trigger and the panel — so .de-nav-menu
   must NOT add its own extra margin-top on top of that, or the gap
   doubles and half of it (the menu's own margin) sits outside the
   hoverable box again, breaking hover exactly like before. */
.de-nav-item { position:relative; padding-bottom:18px; margin-bottom:-18px; }
.de-nav-trigger { display:inline-flex; align-items:center; gap:5px; }
.de-nav-caret { font-size:9px; position:relative; top:1px; transition:transform 0.25s var(--ease-out); }
.de-nav-item:hover .de-nav-caret, .de-nav-item:focus-within .de-nav-caret { transform:rotate(180deg); }
.de-nav-menu { position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(6px); margin-top:0; min-width:260px; background:var(--de-cream); border-radius:14px; box-shadow:0 22px 44px -18px rgba(20,20,15,0.35); padding:10px; opacity:0; visibility:hidden; pointer-events:none; transition:opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out); z-index:60; }
.de-nav-item:hover .de-nav-menu, .de-nav-item:focus-within .de-nav-menu { opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.de-nav-menu a { display:block; padding:11px 16px; font-size:12.5px; letter-spacing:0.02em; text-transform:none; font-weight:600; color:var(--text-strong) !important; border-radius:8px; white-space:nowrap; }
.de-nav-menu a:hover { background:rgba(20,20,15,0.06); }

/* Buttons */
.de-btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:15px 30px; border-radius:5px; font-family:var(--font-body); font-size:13px; letter-spacing:0.14em; text-transform:uppercase; font-weight:600; text-decoration:none; border:1px solid transparent; transition:transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.de-btn:active { transform:translateY(1px); }
.de-btn { white-space:nowrap; }
.de-btn-primary { background:var(--de-green); color:var(--de-cream); border-color:var(--de-green); }
.de-btn-primary:hover { background:var(--de-green-mid); }
.de-btn-invert { background:var(--de-cream); color:var(--de-green-deep); border-color:var(--de-cream); }
.de-btn-invert:hover { background:var(--de-white); }
.de-btn-outline { background:transparent; color:var(--de-cream); border-color:rgba(238,232,222,0.5); }
.de-btn-outline:hover { background:rgba(238,232,222,0.1); }
.de-btn-gold { background:var(--de-gold); color:var(--de-white); border-color:var(--de-gold); }

/* Sections */
.de-section { padding:128px 0; }
.de-section-navy { background:var(--de-navy); color:var(--de-cream); }
.de-section-navy h2 { color:var(--de-cream); }
.de-section-green { background:var(--de-green-deep); color:var(--de-cream); }
.de-section-green h2 { color:var(--de-cream); }
.de-section-burgundy { background:var(--de-burgundy); color:var(--de-cream); }
.de-section-burgundy h2 { color:var(--de-cream); }
.de-section-soft { background:var(--de-cream-soft); border-top:1px solid var(--border-hairline); border-bottom:1px solid var(--border-hairline); }
.de-center { text-align:center; }

/* Photo-backed sections (hero, final CTA) — image placeholder + dark tint */
.de-photo-section { position:relative; z-index:0; color:var(--de-cream); padding:176px 0; background:linear-gradient(160deg, #3a2c1e, #1c150e); background-size:cover; background-position:center; overflow:hidden; }
.de-photo-section::before { content:""; position:absolute; inset:0; background:rgba(10,8,5,0.42); }
.de-photo-section .de-wrap { position:relative; z-index:1; }
.de-photo-section h1, .de-photo-section h2 { color:var(--de-cream); font-style:italic; }
.de-photo-tint-green::before { background:rgba(14,47,35,0.62); }
.de-photo-tint-navy::before { background:rgba(0,20,58,0.68); }
.de-photo-tint-burgundy::before { background:rgba(67,26,39,0.66); }

/* Hero section specifically (video header) — taller than the standard
   .de-photo-section padding used by the other photo-backed sections, so
   this is scoped to its own class rather than changing the shared one. */
.de-hero-section { padding:230px 0; }

/* Sub-page hero — shorter than the home hero (no video), used at the top
   of internal Platform / Solutions / Customers / Pricing / Demo pages. */
.de-subhero { padding:190px 0 96px; }

/* Background video (hero + final CTA) — embedded via JS, cropped to cover,
   ghosted by each section's own dark tint. The iframe's own opacity is
   knocked back (in addition to the dark scrim) to push the video further
   into the background behind the copy. Reusable across any .de-photo-section
   via the data-bg-video attribute (see main.js), so it isn't limited to
   the hero. */
.de-bg-video { position:absolute; inset:0; overflow:hidden; z-index:-1; pointer-events:none; }
.de-bg-video::after { content:""; position:absolute; inset:0; background:rgba(0,0,0,0.2); }
.de-bg-video iframe { position:absolute; top:50%; left:50%; width:177.78vh; height:56.25vw; min-width:100%; min-height:100%; transform:translate(-50%,-50%); border:0; pointer-events:none; opacity:0.7; }

/* Hero */
.de-hero h1 { font-size:clamp(38px,6vw,68px); max-width:16ch; }
.de-hero p { font-size:17px; line-height:1.65; color:rgba(238,232,222,0.9); max-width:56ch; }

/* Grid helpers */
.de-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.de-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:44px; }
.de-grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }

/* Cards */
.de-card { background:var(--de-cream-soft); border:1px solid var(--border-hairline); border-radius:var(--radius-lg); padding:36px 32px; box-shadow:var(--shadow-sm); transition:box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.de-card h3 { font-size:24px; margin:0 0 10px; }
.de-card p { font-size:14.5px; color:var(--text-body); }

/* Icon cards — dark bordered cards used in Key Benefits (shield/lightning/etc) */
.de-icon-card { border:1px solid rgba(238,232,222,0.22); border-radius:var(--radius-lg); padding:40px; }
.de-icon-card .de-icon-circle { width:44px; height:44px; border-radius:50%; border:1px solid rgba(238,232,222,0.4); display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.de-icon-card h3 { color:var(--de-cream); font-size:22px; }
.de-icon-card p { color:rgba(238,232,222,0.78); font-size:14.5px; }

/* Persona split-card (2-tone: cream + soft-green halves) */
.de-persona-card { display:grid; grid-template-columns:1fr 1fr; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); }
.de-persona-card .de-persona-left { background:var(--de-cream-soft); padding:40px; }
.de-persona-card .de-persona-right { background:var(--de-navy-soft); padding:40px; display:flex; flex-direction:column; gap:20px; justify-content:center; }
.de-persona-card h3 { font-size:26px; }
.de-persona-tag { font-size:11px; letter-spacing:0.16em; text-transform:uppercase; font-weight:600; color:var(--text-muted); margin-top:20px; }
.de-persona-row { display:flex; align-items:center; gap:14px; }
.de-persona-avatar { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:600; color:var(--de-white); flex:none; }
.de-persona-row h4 { margin:0; font-size:16px; font-family:var(--font-body); font-weight:600; }
.de-persona-row p { margin:0; font-size:13px; color:var(--text-muted); }

/* Phone mockup — animated chat conversation ("What is a Digital Expert").
   A center phone flanked by two feature callouts (Branded / Intelligent).
   Slim, modern bezel (not a chunky retro frame) with a small camera
   island inset into the display, and the chat anchored to the bottom
   (justify-content:flex-end) so a short conversation never leaves a
   dead gap floating above the input bar. */
.de-phone-flanked { display:grid; grid-template-columns:1fr 300px 1fr; gap:56px; align-items:center; text-align:left; }
.de-phone-feature h3 { font-size:22px; }
.de-phone-feature p { font-size:15px; }
.de-phone-feature .de-orb { width:14px; height:14px; display:block; margin-bottom:14px; }
.de-phone-wrap { display:flex; justify-content:center; }
.de-phone { width:280px; max-width:100%; background:linear-gradient(165deg, #2b2b2e, #050505); border-radius:38px; padding:6px; box-shadow:0 24px 48px -18px rgba(20,20,15,0.45), inset 0 0 0 1px rgba(255,255,255,0.06); }
.de-phone-screen { position:relative; background:var(--de-cream-soft); border-radius:33px; overflow:hidden; height:540px; display:flex; flex-direction:column; box-shadow:inset 0 0 0 1px rgba(20,20,15,0.08); }
.de-phone-notch { position:absolute; top:8px; left:50%; transform:translateX(-50%); width:72px; height:20px; background:#0b0b0b; border-radius:11px; z-index:2; }
.de-phone-status { display:flex; align-items:center; justify-content:space-between; padding:14px 20px 2px; font-size:12.5px; font-weight:600; color:var(--de-ink); font-family:var(--font-body); flex:none; background:var(--de-white); }
.de-phone-status-icons { display:flex; align-items:center; gap:4px; color:var(--de-ink); }
.de-phone-head { display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--border-hairline); background:var(--de-white); flex:none; }
.de-phone-avatar { width:32px; height:32px; flex:none; border-radius:50%; aspect-ratio:1/1; }
.de-phone-head h4 { margin:0; font-family:var(--font-display); font-weight:600; font-size:14px; display:flex; align-items:center; gap:6px; }
.de-phone-live { font-size:9px; letter-spacing:0.08em; text-transform:uppercase; font-weight:700; color:var(--de-green); background:var(--de-green-soft); padding:2px 7px; border-radius:999px; }
.de-phone-head p { margin:0; font-size:11px; color:var(--text-muted); }
.de-phone-body { flex:1; overflow-y:auto; overflow-x:hidden; padding:14px; display:flex; flex-direction:column; justify-content:flex-end; gap:9px; scrollbar-width:none; }
.de-phone-body::-webkit-scrollbar { display:none; }
.de-phone-bubble { max-width:82%; padding:9px 12px; border-radius:14px; font-size:12.5px; line-height:1.4; opacity:0; transform:translateY(8px); animation:de-bubble-in 0.4s var(--ease-out) forwards; flex:none; }
.de-phone-bubble.user { align-self:flex-end; background:var(--de-white); box-shadow:var(--shadow-sm); border-bottom-right-radius:4px; }
.de-phone-bubble.bot { align-self:flex-start; background:var(--de-green); color:var(--de-cream); border-bottom-left-radius:4px; }
@keyframes de-bubble-in { to { opacity:1; transform:translateY(0); } }
.de-phone-typing { align-self:flex-start; background:var(--de-green); border-radius:14px; border-bottom-left-radius:4px; padding:11px 14px; display:flex; gap:4px; opacity:0; animation:de-bubble-in 0.3s var(--ease-out) forwards; flex:none; }
.de-phone-typing span { width:5px; height:5px; border-radius:50%; background:rgba(238,232,222,0.85); animation:de-typing-dot 1s infinite ease-in-out; }
.de-phone-typing span:nth-child(2) { animation-delay:0.15s; }
.de-phone-typing span:nth-child(3) { animation-delay:0.3s; }
@keyframes de-typing-dot { 0%,60%,100% { transform:translateY(0); opacity:0.5; } 30% { transform:translateY(-3px); opacity:1; } }
.de-phone-input { display:flex; align-items:center; gap:10px; margin:0 12px 12px; background:var(--de-white); border-radius:999px; padding:9px 7px 9px 15px; box-shadow:var(--shadow-sm); flex:none; }
.de-phone-input span { font-size:12.5px; color:var(--text-muted); flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.de-phone-send { width:26px; height:26px; border-radius:50%; background:var(--de-navy); color:var(--de-cream); display:flex; align-items:center; justify-content:center; font-size:12px; flex:none; }
.de-phone-input .de-phone-send { flex:none; flex-shrink:0; width:26px; height:26px; }

@media (prefers-reduced-motion: reduce) {
  .de-phone-bubble, .de-phone-typing { animation:none; opacity:1; transform:none; }
  .de-phone-typing span { animation:none; }
}

.de-solution-card { display:block; position:relative; border-radius:var(--radius-lg); overflow:hidden; text-decoration:none; min-height:340px; background:linear-gradient(160deg,#4a4030,#241f16); background-size:cover; background-position:center; box-shadow:var(--shadow-sm); transition:box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.de-solution-card::before { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(6,5,3,0.96), rgba(6,5,3,0.84) 60%, rgba(6,5,3,0.65) 100%); }
.de-solution-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.de-solution-card .de-solution-body { position:relative; z-index:1; padding:26px 26px 30px; align-self:flex-end; margin-top:auto; }
.de-solution-card { display:flex; flex-direction:column; }
.de-solution-card .de-eyebrow { color:rgba(238,232,222,0.9); font-size:11px; }
.de-solution-card h3 { color:var(--de-cream); font-size:23px; line-height:1.25; margin-bottom:14px; }
.de-solution-card span.de-link { font-size:12px; letter-spacing:0.12em; text-transform:uppercase; font-weight:600; color:var(--de-gold-light); }

/* Horizontally-scrolling card row — used where a card set has grown too
   long for a fixed grid (e.g. the "Who It's For" preview on the home
   page). Cards keep a fixed flex-basis instead of stretching to fill a
   grid column, and scroll-snap gives a clean swipe/scroll stop on each
   card rather than landing mid-card. */
.de-scroll-row { display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x proximity; padding:4px 4px 18px; margin:0 -4px -14px; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent; }
.de-scroll-row::-webkit-scrollbar { height:6px; }
.de-scroll-row::-webkit-scrollbar-track { background:transparent; }
.de-scroll-row::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:999px; }
.de-scroll-row .de-solution-card { flex:0 0 300px; scroll-snap-align:start; }
@media (max-width: 860px) {
  .de-scroll-row .de-solution-card { flex-basis:260px; }
}

/* ---- Storytelling components ----------------------------------------
   Small, reusable pieces for breaking a page into visual beats instead of
   text blocks. All compose with the existing section/grid classes. */

/* Static example conversation — a short, illustrative exchange (no
   animation, unlike the home-page phone). Works on light and dark sections. */
.de-chat { background:var(--de-cream-soft); border:1px solid var(--border-hairline); border-radius:var(--radius-lg); padding:22px; display:flex; flex-direction:column; gap:10px; box-shadow:var(--shadow-sm); }
.de-chat-label { font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; font-weight:600; color:var(--text-muted); margin:0 0 4px; }
.de-chat-line { max-width:85%; padding:11px 14px; border-radius:14px; font-size:14px; line-height:1.45; margin:0; }
.de-chat-line.user { align-self:flex-end; background:var(--de-white); box-shadow:var(--shadow-sm); border-bottom-right-radius:4px; color:var(--text-strong); }
.de-chat-line.bot { align-self:flex-start; background:var(--de-green); color:var(--de-cream); border-bottom-left-radius:4px; }
.de-chat-line.bot a { color:var(--de-gold-light); }
.de-chat-note { font-size:12.5px; color:var(--text-muted); margin:6px 0 0; font-style:italic; }
.de-photo-section .de-chat, .de-section-navy .de-chat, .de-section-green .de-chat, .de-section-burgundy .de-chat { background:rgba(238,232,222,0.08); border-color:rgba(238,232,222,0.18); }
.de-photo-section .de-chat-label, .de-section-navy .de-chat-label, .de-section-green .de-chat-label, .de-section-burgundy .de-chat-label,
.de-photo-section .de-chat-note, .de-section-navy .de-chat-note, .de-section-green .de-chat-note, .de-section-burgundy .de-chat-note { color:rgba(238,232,222,0.7); }

/* Before / after comparison — two columns, the "after" carries the accent. */
.de-compare { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.de-compare-col { border-radius:var(--radius-lg); padding:28px 28px 24px; border:1px solid var(--border-hairline); background:var(--de-cream-soft); }
.de-compare-col.is-after { background:var(--de-green-soft); border-color:rgba(21,71,52,0.25); }
.de-compare-col h4 { font-size:11px; letter-spacing:0.16em; text-transform:uppercase; font-weight:600; color:var(--text-muted); margin:0 0 14px; font-family:var(--font-body); }
.de-compare-col.is-after h4 { color:var(--de-green); }
.de-compare-col p { font-size:14.5px; margin:0 0 10px; }
.de-compare-col p:last-child { margin-bottom:0; }
.de-compare-col ul { margin:0; padding:0; list-style:none; }
.de-compare-col li { font-size:14.5px; padding:8px 0; border-top:1px solid var(--border-hairline); }
.de-compare-col li:first-child { border-top:none; padding-top:0; }
.de-photo-section .de-compare-col, .de-section-navy .de-compare-col, .de-section-green .de-compare-col, .de-section-burgundy .de-compare-col { background:rgba(238,232,222,0.08); border-color:rgba(238,232,222,0.18); color:var(--de-cream); }
.de-photo-section .de-compare-col.is-after, .de-section-navy .de-compare-col.is-after, .de-section-green .de-compare-col.is-after, .de-section-burgundy .de-compare-col.is-after { background:rgba(238,232,222,0.16); }
.de-photo-section .de-compare-col h4, .de-section-navy .de-compare-col h4, .de-section-green .de-compare-col h4, .de-section-burgundy .de-compare-col h4 { color:rgba(238,232,222,0.7); }
.de-photo-section .de-compare-col.is-after h4, .de-section-navy .de-compare-col.is-after h4, .de-section-green .de-compare-col.is-after h4, .de-section-burgundy .de-compare-col.is-after h4 { color:var(--de-gold-light); }

/* Checklist — "what's included / what it does" lists with a check mark. */
.de-checklist { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.de-checklist li { position:relative; padding-left:30px; font-size:15px; line-height:1.5; }
.de-checklist li::before { content:"\2713"; position:absolute; left:0; top:1px; width:20px; height:20px; border-radius:50%; background:var(--de-green); color:var(--de-cream); font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.de-checklist li strong { color:var(--text-strong); font-weight:600; }
.de-checklist.de-checklist-2col { grid-template-columns:1fr 1fr; gap:12px 32px; }
.de-photo-section .de-checklist li, .de-section-navy .de-checklist li, .de-section-green .de-checklist li, .de-section-burgundy .de-checklist li { color:rgba(238,232,222,0.88); }
.de-photo-section .de-checklist li strong, .de-section-navy .de-checklist li strong, .de-section-green .de-checklist li strong, .de-section-burgundy .de-checklist li strong { color:var(--de-cream); }
.de-photo-section .de-checklist li::before, .de-section-navy .de-checklist li::before, .de-section-green .de-checklist li::before, .de-section-burgundy .de-checklist li::before { background:var(--de-gold); color:var(--de-ink); }

/* Callout — one-line stat or key sentence as a horizontal strip. */
.de-callout { display:flex; align-items:center; gap:22px; background:var(--de-green-soft); border-left:4px solid var(--de-green); border-radius:0 12px 12px 0; padding:20px 26px; }
.de-callout .de-callout-num { font-family:var(--font-display); font-style:italic; font-size:clamp(30px,3.6vw,44px); color:var(--de-green); line-height:1; flex:none; }
.de-callout p { margin:0; font-size:15px; color:var(--text-body); }
.de-callout p strong { color:var(--text-strong); }
.de-photo-section .de-callout, .de-section-navy .de-callout, .de-section-green .de-callout, .de-section-burgundy .de-callout { background:rgba(238,232,222,0.1); border-left-color:var(--de-gold); }
.de-photo-section .de-callout .de-callout-num, .de-section-navy .de-callout .de-callout-num, .de-section-green .de-callout .de-callout-num, .de-section-burgundy .de-callout .de-callout-num { color:var(--de-gold-light); }
.de-photo-section .de-callout p, .de-section-navy .de-callout p, .de-section-green .de-callout p, .de-section-burgundy .de-callout p { color:rgba(238,232,222,0.88); }

/* Light-section icon card — the dark .de-icon-card, restyled for cream sections. */
.de-section .de-icon-card, .de-section-soft .de-icon-card { border-color:var(--border-hairline); background:var(--de-cream-soft); }
.de-section .de-icon-card .de-icon-circle, .de-section-soft .de-icon-card .de-icon-circle { border-color:var(--de-green); color:var(--de-green); }
.de-section .de-icon-card h3, .de-section-soft .de-icon-card h3 { color:var(--text-strong); }
.de-section .de-icon-card p, .de-section-soft .de-icon-card p { color:var(--text-body); }
.de-section-navy .de-icon-card, .de-section-green .de-icon-card, .de-section-burgundy .de-icon-card, .de-photo-section .de-icon-card { border-color:rgba(238,232,222,0.22); background:transparent; }
.de-section-navy .de-icon-card h3, .de-section-green .de-icon-card h3, .de-section-burgundy .de-icon-card h3, .de-photo-section .de-icon-card h3 { color:var(--de-cream); }
.de-section-navy .de-icon-card p, .de-section-green .de-icon-card p, .de-section-burgundy .de-icon-card p, .de-photo-section .de-icon-card p { color:rgba(238,232,222,0.78); }

/* Feature row — alternating image + copy rows for walking through a product
   step by step. Add .is-flipped to put the image on the right. */
.de-feature-row { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.de-feature-row + .de-feature-row { margin-top:72px; }
.de-feature-row.is-flipped > :first-child { order:2; }
.de-feature-media { border-radius:16px; min-height:320px; background:linear-gradient(160deg,#3a2c1e,#1c150e); background-size:cover; background-position:center; box-shadow:var(--shadow-md); }
.de-feature-row h3 { font-size:clamp(24px,3vw,32px); }
.de-feature-row p { font-size:15.5px; }

@media (max-width: 860px) {
  .de-compare, .de-feature-row, .de-checklist.de-checklist-2col { grid-template-columns:1fr; }
  .de-feature-row.is-flipped > :first-child { order:0; }
  .de-feature-row + .de-feature-row { margin-top:48px; }
  .de-callout { flex-direction:column; align-items:flex-start; gap:10px; }
}

.de-quote { border:1px solid var(--border-hairline); border-radius:var(--radius-lg); padding:44px 44px 36px; }
.de-quote .de-quote-mark { font-family:var(--font-display); font-style:italic; font-size:40px; color:var(--de-gold); line-height:1; margin-bottom:12px; display:block; }
.de-quote blockquote { margin:0 0 20px; font-size:17px; line-height:1.55; color:var(--de-ink); }
.de-quote figcaption { font-size:12px; letter-spacing:0.06em; text-transform:uppercase; font-weight:600; color:var(--text-muted); }

/* "Right now, while you're closed" message cards */
.de-msg-card { background:var(--de-cream-soft); border-radius:12px; padding:24px 26px; box-shadow:var(--shadow-sm); }
.de-msg-meta { font-size:11px; letter-spacing:0.1em; text-transform:uppercase; font-weight:600; color:var(--text-muted); margin-bottom:8px; }
.de-msg-meta .de-msg-flag { color:var(--de-alert); font-weight:700; margin-left:6px; }
.de-msg-card blockquote { margin:0; font-family:var(--font-display); font-style:italic; font-size:17px; color:var(--de-ink); }

/* Live message ticker (Problem section) — decorative, mirrors production site */
.de-msg-card-enter { animation: de-msg-in 0.55s var(--ease-out); }
.de-msg-card-exit { animation: de-msg-out 0.45s var(--ease-out) forwards; }
@keyframes de-msg-in { from { opacity:0; transform:translateY(-14px); } to { opacity:1; transform:translateY(0); } }
@keyframes de-msg-out { from { opacity:1; } to { opacity:0; transform:translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  .de-msg-card-enter, .de-msg-card-exit { animation: none; }
}

/* Notification cards (Agentic Actions) */
.de-notif-card { background:var(--de-white); border:1px solid var(--border-hairline); border-radius:12px; padding:22px 26px; }
.de-notif-meta { font-size:11px; letter-spacing:0.1em; text-transform:uppercase; font-weight:600; color:var(--text-muted); margin-bottom:6px; display:flex; align-items:center; gap:6px; }
.de-notif-dot { width:7px; height:7px; border-radius:50%; flex:none; }

/* Timeline (How it works) */
.de-timeline-track { position:relative; height:2px; background:var(--border-hairline); margin:64px 0 40px; }
.de-timeline-dot { position:absolute; top:50%; width:11px; height:11px; border-radius:50%; transform:translate(-50%,-50%); }
.de-numbered { font-family:var(--font-display); font-style:italic; font-size:36px; color:var(--de-gold); line-height:1; }
.de-step-head { display:flex; align-items:baseline; gap:14px; margin-bottom:6px; }
.de-step-head h3 { margin:0; }

/* Orb — signature brand motif */
.de-orb { display:inline-block; border-radius:50%; }
.de-orb-green { background:radial-gradient(circle at 38% 34%, #3f9a77, var(--de-green)); box-shadow:0 0 40px -6px rgba(31,98,73,0.55); }
.de-orb-navy { background:radial-gradient(circle at 38% 34%, #3a63b0, var(--de-navy)); box-shadow:0 0 40px -6px rgba(17,58,126,0.6); }
.de-orb-white { background:radial-gradient(circle at 38% 34%, #ffffff, #d9e6df); box-shadow:0 0 40px -6px rgba(255,255,255,0.6); }
.de-orb-gold { background:radial-gradient(circle at 38% 34%, #e9c65f, var(--de-gold)); box-shadow:0 0 40px -6px rgba(183,138,46,0.6); }
.de-orb-pulse { animation:de-orb-pulse 3.2s var(--ease-out) infinite; }
@keyframes de-orb-pulse { 0%,100% { transform:scale(1); opacity:1; } 50% { transform:scale(1.04); opacity:.88; } }

/* Photo grid strip */
.de-photo-strip { display:grid; grid-template-columns:repeat(4,1fr); }
.de-photo-strip .de-photo-cell { aspect-ratio:3/4; background:linear-gradient(160deg,#4a4030,#241f16); }

/* Persistent "Ask us anything" widget — appears on every page via footer.php.
   Rebuilt to match the real structure/styling of the widget on the live
   production site: a fixed, vertically-centered flex row (hover tooltip
   bubble + card), a dedicated soft green glow blob clipped behind the
   avatars, and left-aligned card copy. */
.de-ask-widget-root { position:fixed; right:26px; top:50%; transform:translateY(-50%); z-index:200; display:flex; align-items:center; gap:14px; animation:de-widget-in 0.55s cubic-bezier(0.16,1,0.3,1) 0.8s 1 both; }
@keyframes de-widget-in { from { opacity:0; transform:translateY(-50%) translateX(24px); } to { opacity:1; transform:translateY(-50%) translateX(0); } }

/* Hover explainer bubble — sits to the left of the card in normal flex flow
   (not absolutely positioned), hidden until the root is hovered. */
.de-ask-tip { display:block; width:210px; max-width:210px; padding:13px 18px; margin:0; background-color:var(--de-cream); border-radius:14px 14px 4px 14px; box-shadow:0 22px 44px -22px rgba(20,20,15,0.55); font-size:17px; font-family:var(--font-body); color:var(--text-body); line-height:1.5; opacity:0; transform:translateX(10px); transition:opacity 0.28s var(--ease-out), transform 0.28s cubic-bezier(0.16,1,0.3,1); pointer-events:none; flex:none; }
.de-ask-tip em { font-style:italic; }
.de-ask-widget-root:hover .de-ask-tip { opacity:1; transform:translateX(0); }

.de-ask-widget { position:relative; display:block; background-color:transparent; background-image:linear-gradient(168deg, #12382A 0%, #0E2F23 46%, #0A2018 100%); border-radius:22px; padding:22px 20px 20px; width:172px; text-align:left; text-decoration:none; overflow:hidden; flex:none; box-shadow:0 24px 60px -24px rgba(6,26,19,0.65), inset 0 0 0 1px rgba(238,232,222,0.14), 0 0 50px -0.3px rgba(161,214,202,0.4); transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.de-ask-widget:hover { transform:translateY(-2px); box-shadow:0 28px 64px -24px rgba(6,26,19,0.72), inset 0 0 0 1px rgba(238,232,222,0.18), 0 0 58px -0.3px rgba(161,214,202,0.5); }

/* Decorative ambient glow — a soft green radial blob sitting behind the
   avatar cluster, clipped by the card's own overflow:hidden. This (not a
   box-shadow around the card edge) is what produces the "green glow". */
.de-ask-widget .de-ask-glow { position:absolute; top:14px; left:8px; width:132px; height:132px; border-radius:50%; background-image:radial-gradient(circle, rgba(161,214,202,0.45) 0%, rgba(161,214,202,0) 70%); pointer-events:none; }

.de-ask-widget .de-ask-badge { position:relative; z-index:1; display:flex; align-items:center; gap:7px; width:fit-content; padding:6px 12px; margin:0 0 16px; border:1px solid rgba(238,232,222,0.28); border-radius:999px; font-size:9px; letter-spacing:1.8px; text-transform:uppercase; font-weight:700; color:rgba(238,232,222,0.92); }
.de-ask-widget .de-ask-badge .de-dot-live { width:7px; height:7px; border-radius:50%; background-color:rgb(80,200,140); box-shadow:0 0 0 6px rgba(80,200,140,0.09); flex:none; animation:de-widget-dot 2s ease-in-out infinite; }
@keyframes de-widget-dot { 0%,100% { box-shadow:0 0 0 6px rgba(80,200,140,0.09); } 50% { box-shadow:0 0 0 3px rgba(80,200,140,0.2); } }

.de-ask-widget .de-ask-avatars { position:relative; z-index:1; display:flex; height:56px; margin-bottom:14px; }
.de-ask-widget .de-ask-avatars img { width:52px; height:52px; border-radius:50%; border:2px solid rgba(238,232,222,0.85); box-shadow:0 6px 16px -6px rgba(0,0,0,0.5); object-fit:cover; display:block; margin-left:-15px; }
.de-ask-widget .de-ask-avatars img:first-child { margin-left:0; }

.de-ask-widget .de-ask-title { position:relative; z-index:1; display:block; font-family:var(--font-display); font-size:19px; font-weight:400; font-style:normal; color:var(--de-cream); margin:0 0 14px; line-height:1.22; }
.de-ask-widget .de-ask-title em { font-style:italic; color:var(--de-cream); }
.de-ask-widget .de-ask-sub { position:relative; z-index:1; display:flex; align-items:center; gap:8px; white-space:nowrap; font-size:11px; line-height:1; color:rgba(238,232,222,0.55); }
.de-ask-widget .de-ask-sub-name { font-size:8px; letter-spacing:2.08px; text-transform:uppercase; font-weight:700; color:rgba(218,170,0,0.9); }

@media (max-width: 860px) { .de-ask-widget-root { display:none; } }

/* FAQ list — used on Platform / Solutions / Pricing sub-pages */
.de-faq-item { border-top:1px solid var(--border-hairline); padding:26px 0; }
.de-faq-item:first-child { border-top:none; }
.de-faq-item h3 { font-size:17px; margin-bottom:8px; }
.de-faq-item p { font-size:14.5px; color:var(--text-body); margin:0; }
.de-photo-section .de-faq-item, .de-section-navy .de-faq-item, .de-section-green .de-faq-item, .de-section-burgundy .de-faq-item { border-top-color:rgba(238,232,222,0.2); }
.de-photo-section .de-faq-item h3, .de-section-navy .de-faq-item h3, .de-section-green .de-faq-item h3, .de-section-burgundy .de-faq-item h3 { color:var(--de-cream); font-style:normal; }
.de-photo-section .de-faq-item p, .de-section-navy .de-faq-item p, .de-section-green .de-faq-item p, .de-section-burgundy .de-faq-item p { color:rgba(238,232,222,0.82); }

/* Stat strip — customer case-study numbers on a dark/photo section */
.de-stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; }
.de-stat { text-align:center; }
.de-stat-num { font-family:var(--font-display); font-style:italic; font-size:clamp(28px,3.4vw,42px); color:var(--de-gold-light); line-height:1; margin-bottom:8px; }
.de-stat-label { font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase; font-weight:600; color:rgba(238,232,222,0.7); }

/* Pricing tiers */
.de-price-card { background:var(--de-cream-soft); border:1px solid var(--border-hairline); border-radius:var(--radius-lg); padding:36px 30px; display:flex; flex-direction:column; }
.de-price-card.is-featured { background:var(--de-green-deep); border-color:var(--de-green-deep); box-shadow:var(--shadow-md); }
.de-price-card.is-featured .de-price-tier-name { color:var(--de-gold-light); }
.de-price-card.is-featured .de-price-amount, .de-price-card.is-featured .de-price-amount small { color:var(--de-cream); }
.de-price-card.is-featured .de-price-desc { color:rgba(238,232,222,0.82); }
.de-price-tier-name { font-size:11px; letter-spacing:0.14em; text-transform:uppercase; font-weight:600; color:var(--de-gold); margin-bottom:10px; }
.de-price-amount { font-family:var(--font-display); font-size:26px; margin-bottom:10px; }
.de-price-amount small { font-size:12px; font-weight:400; color:var(--text-muted); }
.de-price-desc { font-size:14px; color:var(--text-body); margin-bottom:22px; min-height:3.4em; }
.de-price-feat { list-style:none; margin:0 0 26px; padding:0; font-size:13.5px; flex:1; }
.de-price-feat li { display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-top:1px solid var(--border-hairline); }
.de-price-feat li:first-child { border-top:none; }
.de-price-feat li span:last-child { font-weight:600; color:var(--text-strong); text-align:right; }
.de-price-card.is-featured .de-price-feat li { border-top-color:rgba(238,232,222,0.18); color:rgba(238,232,222,0.9); }
.de-price-card.is-featured .de-price-feat li span:last-child { color:var(--de-cream); }

/* Small named-expert / mini card (Build page team grid, Customers expert architecture) */
.de-mini-card { background:var(--de-cream-soft); border-radius:12px; padding:22px 24px; }
.de-mini-card h4 { font-size:15.5px; margin:0 0 4px; }
.de-mini-card p { font-size:13px; color:var(--text-muted); margin:0; }
.de-photo-section .de-mini-card, .de-section-navy .de-mini-card, .de-section-green .de-mini-card, .de-section-burgundy .de-mini-card { background:rgba(238,232,222,0.08); }
.de-photo-section .de-mini-card h4, .de-section-navy .de-mini-card h4, .de-section-green .de-mini-card h4, .de-section-burgundy .de-mini-card h4 { color:var(--de-cream); font-style:normal; }
.de-photo-section .de-mini-card p, .de-section-navy .de-mini-card p, .de-section-green .de-mini-card p, .de-section-burgundy .de-mini-card p { color:rgba(238,232,222,0.75); }

/* Simple contact/demo form */
.de-form { display:grid; gap:18px; max-width:560px; }
.de-form label { display:block; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; font-weight:600; color:var(--text-muted); margin-bottom:7px; }
.de-form input, .de-form textarea, .de-form select { width:100%; padding:13px 15px; border:1px solid var(--border-strong); border-radius:6px; background:var(--de-white); font-family:var(--font-body); font-size:15px; color:var(--text-strong); }
.de-form textarea { resize:vertical; min-height:100px; }
.de-form-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; }

/* Footer — navy, matching production */
.de-footer { background:var(--de-navy); color:var(--de-cream); padding:64px 0 32px; }
.de-footer .de-logo { color:var(--de-cream); }
.de-footer .de-logo svg { fill:var(--de-cream); }
.de-footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; margin-bottom:44px; }
.de-footer h4 { font-size:11px; letter-spacing:0.24em; text-transform:uppercase; font-weight:600; color:rgba(238,232,222,0.55); margin:0 0 16px; }
.de-footer a { display:block; font-size:14px; color:rgba(238,232,222,0.92); text-decoration:none; margin-bottom:10px; }
.de-footer-bottom { display:flex; align-items:center; gap:24px; border-top:1px solid rgba(238,232,222,0.15); padding-top:24px; font-size:13px; color:rgba(238,232,222,0.6); }
.de-footer-bottom a { color:rgba(238,232,222,0.6); }
.de-footer-bottom .de-legal { display:flex; gap:20px; margin-left:auto; }

/* Mobile */
@media (max-width: 860px) {
  .de-wrap { padding:0 22px; }
  .de-grid-2, .de-grid-3, .de-grid-4, .de-footer-grid, .de-persona-card, .de-photo-strip, .de-stat-grid, .de-compare, .de-feature-row, .de-checklist.de-checklist-2col { grid-template-columns:1fr !important; }
  .de-stat-grid { grid-template-columns:1fr 1fr !important; }

  /* Header: shorter bar, hamburger, nav becomes a full-width panel. */
  .de-header .de-wrap { height:84px; gap:16px; }
  .de-logo svg { height:24px; }
  .de-nav-toggle { display:flex; }
  .de-header.is-open { background:var(--de-cream); border-bottom-color:var(--border-hairline); }
  .de-header.is-open .de-logo { color:var(--de-ink); }
  .de-header.is-open .de-logo svg { fill:var(--de-green); }
  .de-nav { display:none; }
  .de-header.is-open .de-nav { display:flex; flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:0; position:absolute; top:100%; left:0; right:0; margin:0; padding:10px 22px 26px; background:var(--de-cream); border-bottom:1px solid var(--border-hairline); box-shadow:0 24px 40px -24px rgba(20,20,15,0.35); max-height:calc(100vh - 84px); overflow-y:auto; }
  .de-header.is-open .de-nav > a, .de-header.is-open .de-nav .de-nav-trigger { display:block; padding:14px 0; font-size:13px; color:var(--de-ink); border-bottom:1px solid var(--border-hairline); }
  .de-header.is-open .de-nav .de-nav-item { padding:0; margin:0; }
  .de-header.is-open .de-nav .de-nav-caret { display:none; }
  .de-header.is-open .de-nav .de-nav-menu { position:static; transform:none; opacity:1; visibility:visible; pointer-events:auto; min-width:0; background:transparent; box-shadow:none; padding:0 0 8px 14px; border-bottom:1px solid var(--border-hairline); }
  .de-header.is-open .de-nav .de-nav-menu a { padding:9px 0; font-size:13.5px; font-weight:500; white-space:normal; }
  .de-header.is-open .de-nav a.de-cta { margin-top:18px; justify-content:center; border:1px solid var(--de-ink); border-radius:5px; padding:14px 20px; }

  .de-bg-video { display:none; }
  .de-photo-section .de-wrap > div[style*="display:flex"] { flex-wrap:wrap; }
  .de-btn { padding:14px 22px; }
  .de-card, .de-icon-card, .de-quote { padding:26px 22px; }
  .de-compare-col { padding:22px 20px; }
  .de-footer-bottom { flex-wrap:wrap; gap:12px; }
  .de-footer-bottom .de-legal { margin-left:0; }
  .de-timeline-track { display:none; }
  .de-hero h1, h1 { font-size:clamp(30px,8vw,40px) !important; }
  .de-chat-line { max-width:92%; }
  .de-hero h1 { max-width:100%; }
  .de-section { padding:72px 0; }
  .de-photo-section { padding:108px 0; }
  .de-hero-section { padding:140px 0; }
  .de-subhero { padding:150px 0 64px; }
  .de-grid-2 { gap:36px; }
  .de-grid-3 { gap:32px; }
  .de-phone-flanked { grid-template-columns:1fr; gap:40px; text-align:center; }
  .de-phone-feature { text-align:center !important; }
  .de-phone-feature .de-orb { margin-left:auto; margin-right:auto; }
  .de-phone-wrap { order:-1; }
  .de-phone { width:250px; }
  .de-phone-screen { height:480px; }
  .de-form-row-2 { grid-template-columns:1fr; }
  .de-stat-grid { gap:24px; }
}