/* ============================================================
   Dr Triage. Home page styles
   Loads after colors_and_type.css (design tokens).
   Warm, minimal, midcentury-modern tech. Portable into WordPress.
   ============================================================ */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-sans);background:var(--bg);color:var(--fg1);
  line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  transition:background-color .7s var(--ease),color .7s var(--ease);
}
a{color:inherit;text-decoration:none}
img{display:block}
ul{list-style:none}

/* ---------- shared layout ---------- */
.dt-section{width:100%;max-width:var(--maxw-content);margin-inline:auto;padding-inline:var(--gutter)}
.dt-section--wide{max-width:var(--maxw-wide)}
.dt-section--prose{max-width:var(--maxw-prose)}
main > section{margin-top:var(--sp-9)}
.dt-sec-head{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:48px;max-width:none}
.dt-sec-head .dt-h2{max-width:min(40ch,90%)}
.dt-h2{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h2);line-height:clamp(1.02, 1.0 + 0.4vw, 1.1);letter-spacing:-.01em;color:var(--heading);text-wrap:balance;max-width:min(40ch,90%)}

/* ---------- reveal ---------- */
/* only hide-for-reveal when JS is running; without JS everything stays visible */
html.js .dt-reveal{opacity:0;transform:translateY(20px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.dt-reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.js .dt-reveal{opacity:1;transform:none;transition:none}
  /* every animation-hidden element renders in its final state */
  .dt-eyebrow-space,.dt-space-head,.dt-rline,.dt-disclaimer,
  .soc-kicker,.soc-lead,.soc-cta{opacity:1;transform:none;pointer-events:auto}
}

/* ---------- graceful degradation: if JS does not run, the sites-of-care worlds fall back
   to three stacked, fully-visible sections instead of three half-hidden columns ---------- */
html:not(.js) .soc{flex-direction:column;height:auto}
html:not(.js) .soc-panel{flex:none;min-height:80vh;cursor:default}
html:not(.js) .soc-panel + .soc-panel{margin-left:0;clip-path:none;filter:none}
html:not(.js) .soc-panel .soc-scene{left:0;-webkit-mask-image:none;mask-image:none}
html:not(.js) .soc-copy{top:50%;transform:translateY(-50%);text-align:left}
html:not(.js) .soc-kicker,html:not(.js) .soc-lead,html:not(.js) .soc-cta{opacity:1;transform:none}
html:not(.js) .w-snf .soc-name{color:var(--forest)}
html:not(.js) .w-snf .soc-wash-rest{background:linear-gradient(90deg,#f4ead4 0%,rgba(244,234,212,.6) 50%,rgba(244,234,212,0) 80%)}

/* ---------- buttons ---------- */
/* skip-to-content: invisible until keyboard focus (WCAG 2.4.1) */
.dt-skip{position:fixed;top:12px;left:12px;z-index:3000;background:var(--forest);color:var(--cream);
  font-family:var(--font-sans);font-weight:600;font-size:15px;padding:12px 20px;border-radius:10px;
  text-decoration:none;transform:translateY(-300%);transition:transform .15s ease}
.dt-skip:focus{transform:none;outline:2px solid var(--tan);outline-offset:2px}
.dt-btn{font-family:var(--font-sans);font-weight:600;font-size:16px;padding:16px 32px;
        border:0;box-shadow:none;cursor:pointer;display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
        border-radius:0;border-top-left-radius:22px 43px;            /* smooth circular sweep into the top, point at bottom-left */
        --cut:16px;
        -webkit-clip-path:polygon(0 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
                clip-path:polygon(0 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
        transition:transform .28s var(--ease),background .3s var(--ease),color .3s var(--ease)}
.dt-btn:hover{transform:translateY(-2px)}
.dt-btn-primary{background:var(--brown);color:var(--cream)}
.dt-btn-primary:hover{background:var(--brown-deep)}
.dt-btn-primary:active{background:var(--brown-deep)}
.dt-btn-glass{background:var(--glass-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--glass-bd);color:var(--fg1)}
.dt-btn-glass:hover{box-shadow:var(--shadow-sm)}
.dt-btn-onlight{background:var(--cream);color:var(--forest);box-shadow:0 10px 28px -14px rgba(0,0,0,.4)}
.dt-btn-onlight:hover{box-shadow:0 16px 36px -16px rgba(0,0,0,.5)}
.dt-btn-outline{background:transparent;border-color:var(--hairline);color:var(--fg1)}
.dt-btn-outline:hover{border-color:var(--brown);color:var(--brown)}

/* text link with arrow */
.dt-textlink{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-sans);font-weight:500;font-size:16px;color:var(--brown);
             opacity:.9;transition:opacity .2s var(--ease)}
.dt-textlink:hover{opacity:1}
.dt-textlink .dt-arrow{transition:transform .3s var(--ease)}
.dt-textlink:hover .dt-arrow{transform:translateX(4px)}

/* ---------- top promo bar ---------- */
.dt-topbar{background:var(--forest);color:var(--cream);font-family:var(--font-sans);
           overflow:hidden;transition:height .45s var(--ease),opacity .35s var(--ease)}
.dt-topbar-inner{max-width:var(--maxw-band);margin:0 auto;padding:9px var(--gutter);display:flex;align-items:center;justify-content:center;gap:10px;position:relative}
.dt-topbar p{font-size:var(--fs-small);font-weight:300;color:rgba(255,255,255,.92);text-align:center}
.dt-topbar a{color:var(--tan);font-weight:500;border-bottom:1px solid rgba(201,166,143,.45);padding-bottom:1px;transition:color .2s,border-color .2s}
.dt-topbar a:hover{color:var(--cream);border-color:var(--cream)}
.dt-topbar-x{position:absolute;right:20px;top:50%;transform:translateY(-50%);background:none;border:0;color:rgba(255,255,255,.7);
             font-size:20px;line-height:1;cursor:pointer;padding:4px;transition:color .2s}
.dt-topbar-x:hover{color:var(--cream)}
.dt-topbar.dismissed{height:0;opacity:0}

/* ---------- nav ---------- */
.dt-nav{position:sticky;top:0;z-index:60;width:100%;
        background:var(--glass-bg);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);
        border-bottom:1px solid var(--hairline);box-shadow:0 8px 28px -22px rgba(57,68,60,.5);
        transition:background-color .7s var(--ease),border-color .7s var(--ease)}
.dt-nav-inner{max-width:var(--maxw-wide);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;padding-inline:var(--gutter);padding-block:clamp(14px,1.1vw,26px);transition:padding-block .4s var(--ease)}
.dt-nav.scrolled{box-shadow:0 12px 34px -18px rgba(57,68,60,.6)}
.dt-nav.scrolled .dt-nav-inner{padding-block:clamp(9px,.7vw,16px)}
.dt-brand{display:flex;align-items:center}
.dt-brand img{height:clamp(24px,1.7vw,40px)}
.dt-brand-dark{display:none}
body.space .dt-brand-light{display:none}
body.space .dt-brand-dark{display:block}
.dt-nav-links{display:flex;gap:8px;align-items:center}

/* nav item + dropdown */
.dt-navitem{position:relative}
.dt-navlink{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-sans);font-size:clamp(16px,1.0vw,21px);font-weight:400;
            color:var(--fg1);opacity:.82;padding:10px 14px;border-radius:var(--r-pill);cursor:pointer;
            transition:opacity .2s,background .25s var(--ease),color .7s var(--ease)}
.dt-navlink:hover{opacity:1}
.dt-navitem:hover .dt-navlink,.dt-navitem:focus-within .dt-navlink{opacity:1;background:rgba(57,68,60,.06)}
body.space .dt-navitem:hover .dt-navlink,body.space .dt-navitem:focus-within .dt-navlink{background:rgba(255,255,255,.08)}
.dt-caret{width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
          transform:translateY(-2px) rotate(45deg);opacity:.6;transition:transform .3s var(--ease)}
.dt-navitem:hover .dt-caret,.dt-navitem:focus-within .dt-caret{transform:translateY(0) rotate(225deg)}

.dt-dropdown{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(8px);min-width:248px;
             background:var(--white);
             border:1px solid var(--hairline);border-radius:var(--r-md);box-shadow:var(--shadow-md);
             padding:10px;opacity:0;visibility:hidden;pointer-events:none;
             transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s}
/* dark/space theme: keep the dropdown opaque (no see-through) */
body.space .dt-dropdown{background:#10160F;border-color:rgba(201,166,143,.22);box-shadow:0 30px 70px -30px rgba(0,0,0,.8)}
.dt-navitem:hover .dt-dropdown,.dt-navitem:focus-within .dt-dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.dt-dropdown::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.dt-ditem{display:flex;flex-direction:column;gap:2px;padding:11px 14px;border-radius:var(--r-sm);transition:background .2s var(--ease)}
.dt-ditem:hover{background:rgba(127,87,66,.08)}
.dt-ditem-t{font-family:var(--font-display);font-weight:600;font-size:15.5px;color:var(--fg1)}
.dt-ditem-d{font-size:13.5px;font-weight:300;color:var(--fg3)}
.dt-nav-cta{margin-left:10px}

.dt-burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.dt-burger span{width:24px;height:2px;background:var(--fg1);border-radius:2px;transition:background .7s var(--ease)}

/* mobile menu */
.dt-mobile{display:none;flex-direction:column;gap:6px;padding:16px 28px 26px;border-top:1px solid var(--hairline);
           background:var(--glass-bg);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
/* The panel lives inside the sticky nav: taller-than-viewport content is
   unreachable unless the panel scrolls itself (Brian's phone, 7/13).
   The precise max-height is set by the burger toggle JS at open time;
   the calc here is a conservative backstop only. */
.dt-mobile.open{display:flex;max-height:calc(100svh - 56px);overflow-y:auto;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding-bottom:max(26px,env(safe-area-inset-bottom))}
.dt-mobile a{font-size:18px;padding:10px 0;border-bottom:1px solid var(--hairline-soft)}
.dt-mobile .dt-mob-sub{font-size:15px;color:var(--fg3);padding:7px 0 7px 16px;border:0;
  display:flex;align-items:center;gap:16px}
/* Same icon set as the desktop dropdowns so the two navs read as one nav.
   Colour is NOT the desktop brown. Desktop pairs a solid brown icon with
   solid forest text on white, and the icon reads as an accent. Here the
   label is forest at 62% on cream, so solid brown out-shouts the word it is
   labelling, and brown at reduced alpha turns pink over the warm background.
   Forest at 70% keeps the icon a shade firmer than its label without
   competing with it. No hover redraw: there is no hover on a phone.
   The 1px drop is deliberate and must not be "corrected" back to 0.
   align-items:center centres the icon on the label's cap-height band, but
   these labels are Title Case, so most of the word's visual mass sits in the
   lowercase x-height, below that centre. Geometrically centred therefore
   reads high. 1px lands it on the word's optical centre; 1.5px reads low. */
.dt-mobile .dt-mob-ic{width:17px;height:17px;flex:none;stroke-width:1.6;
  color:rgba(57,68,60,.7);transform:translateY(1px)}
.dt-mobile .dt-btn{margin-top:16px;justify-content:center}

/* ---------- HERO (full-bleed, video-reserved) ---------- */
.dt-hero{position:relative;width:100%;min-height:100svh;display:flex;align-items:center;overflow:hidden}
.dt-hero-bg{position:absolute;inset:0;
  background:
    radial-gradient(38% 56% at 16% 32%, rgba(201,166,143,.85), transparent 60%),
    radial-gradient(44% 52% at 84% 22%, rgba(139,148,147,.55), transparent 64%),
    radial-gradient(58% 64% at 74% 84%, rgba(127,87,66,.62), transparent 60%),
    radial-gradient(70% 80% at 30% 86%, rgba(57,68,60,.40), transparent 66%),
    linear-gradient(120deg,#efe9e2,#e6e2da)}
.dt-hero-bg::after{content:"";position:absolute;inset:0;backdrop-filter:blur(46px);-webkit-backdrop-filter:blur(46px)}
/* legibility scrim: the copy side resolves to TRUE #fff so the hero matches
   the pure-white canvas below (Brian 7/23 — the old .94 alpha over the warm
   base read off-white against --bg); warm glow only survives toward the video */
.dt-hero-scrim{position:absolute;inset:0;
  background:
    linear-gradient(90deg, #fff 0%, #fff 30%, rgba(255,255,255,.72) 48%, rgba(255,255,255,0) 72%),
    radial-gradient(120% 100% at 50% 50%, transparent 58%, rgba(13,20,16,.16))}
/* MDU footage on the right; its left edge fades into the cream where the copy sits */
.dt-hero-video{position:absolute;top:0;right:0;height:100%;width:64%;object-fit:cover;z-index:1;pointer-events:none;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 20%, #000 50%);
          mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 20%, #000 50%)}
.dt-hero-inner{position:relative;z-index:2;max-width:var(--maxw-wide);margin:0 auto;padding:clamp(48px,6vw,120px) var(--gutter);width:100%}
.dt-hero-copy{max-width:none}
.dt-hero-h1{font-family:var(--font-display);font-weight:700;font-size:var(--fs-display);line-height:1.0;letter-spacing:-.02em;margin:18px 0;color:var(--heading);text-wrap:balance;max-width:17ch}
.dt-hero-sub{font-weight:300;font-size:var(--fs-subtitle);color:var(--fg2);max-width:50ch;line-height:1.5}
.dt-hero-cta{display:flex;gap:22px;margin-top:34px;flex-wrap:wrap;align-items:center}
.dt-hero-reserve{position:absolute;right:30px;bottom:24px;z-index:2;color:rgba(57,68,60,.55);display:flex;align-items:center;gap:9px}
.dt-hero-reserve .dt-dot{width:7px;height:7px;border-radius:50%;background:var(--brown);opacity:.7;
                         box-shadow:0 0 0 0 rgba(127,87,66,.5);animation:dtpulse 2.6s var(--ease) infinite}
@keyframes dtpulse{0%{box-shadow:0 0 0 0 rgba(127,87,66,.45)}70%{box-shadow:0 0 0 10px rgba(127,87,66,0)}100%{box-shadow:0 0 0 0 rgba(127,87,66,0)}}

/* ---------- MDU walkthrough reserved island ---------- */
.dt-island{position:relative;min-height:520px;border-radius:var(--r-lg);overflow:hidden;
           background:linear-gradient(160deg,#f2efe9,#e8e4dc);border:1px solid var(--hairline);
           display:flex;align-items:center;justify-content:center;text-align:center}
.dt-island::before{content:"";position:absolute;inset:18px;border:1.5px dashed rgba(127,87,66,.28);border-radius:calc(var(--r-lg) - 8px);pointer-events:none}
.dt-island-mark{position:absolute;right:-40px;bottom:-50px;width:340px;opacity:.05}
.dt-island-mark img{width:100%}
.dt-island-copy{position:relative;z-index:2;max-width:min(760px,90%);padding:40px 32px;display:flex;flex-direction:column;align-items:center;gap:16px}
.dt-island-badge{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:var(--r-pill);
                 background:rgba(127,87,66,.10);color:var(--brown)}
.dt-island-badge .dt-dot{width:7px;height:7px;border-radius:50%;background:var(--brown);
                         animation:dtpulse 2.6s var(--ease) infinite}
.dt-island-title{font-family:var(--font-display);font-weight:600;font-size:clamp(26px,2.3vw,40px);color:var(--heading);line-height:1.06;text-wrap:balance}
.dt-island-p{font-weight:300;font-size:17px;color:var(--fg2);max-width:40ch}

/* ---------- SOLUTIONS (staggered, soft-shape, accent line) ---------- */
.dt-solns{display:flex;flex-direction:column;gap:84px;margin-top:48px}
.dt-soln{display:grid;grid-template-columns:1fr 1fr;gap:clamp(48px,5vw,120px);align-items:center}
.dt-soln:nth-child(even){direction:rtl}
.dt-soln:nth-child(even) > *{direction:ltr}
.dt-soln-copy{max-width:min(100%,36rem)}
.dt-accentline{width:54px;height:3px;border-radius:3px;margin-bottom:22px}
.dt-soln-title{font-family:var(--font-display);font-weight:600;font-size:clamp(22px,1.6vw,30px);color:var(--heading);line-height:1.12;margin-bottom:14px;text-wrap:balance;max-width:none}
.dt-soln-p{font-weight:300;font-size:18px;color:var(--fg2);margin-bottom:24px;line-height:1.5}
.dt-soln-art{position:relative}

/* frames */
.dt-frame{position:relative;overflow:hidden;box-shadow:var(--shadow-md);
          transition:transform .55s var(--ease),box-shadow .55s var(--ease);will-change:transform}
.dt-frame .dt-frame-img{position:absolute;inset:0;transition:transform var(--dur-slow) var(--ease)}
.dt-frame:hover{transform:translateY(-14px);box-shadow:var(--shadow-lg)}
.dt-frame:hover .dt-frame-img{transform:scale(1.10)}
/* radius does NOT animate. The capsule stays a capsule, the soft-bar stays a soft-bar. */
.dt-frame-rect{border-radius:var(--r-lg)}
.dt-frame-softbar{border-radius:14px 14px 14px 86px}
.dt-frame-softbar-alt{border-radius:14px 86px 14px 14px}
.dt-frame-capsule{border-radius:var(--r-capsule)}
.dt-frame-tag{
  position:absolute; left:clamp(16px,1.4vw,28px); bottom:clamp(14px,1.2vw,24px); z-index:2;
  font-family:var(--font-mono);
  font-size:clamp(13px,0.92vw,18px);          /* explicit, scales, legible at 6K */
  letter-spacing:.14em; text-transform:uppercase;
  color:#fff;                                  /* full opacity, was .92 */
  background:rgba(13,20,16,.62);               /* solid-enough fallback, was .30 */
  backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3);
  padding:clamp(6px,0.5vw,10px) clamp(12px,0.9vw,18px);
  border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.18);      /* hairline lift so it never melts into the photo */
  box-shadow:0 6px 20px -10px rgba(0,0,0,.5);
}
/* the tag spans also carry .mono (re-declared later with slate); keep the tag white and legible */
.dt-frame-tag.mono{color:#fff}

/* solution-specific frame sizes / offsets (deliberate scale hierarchy) */
.dt-soln-1 .dt-frame{height:clamp(420px,30vw,720px)}
.dt-soln-2 .dt-frame-capsule{height:clamp(460px,34vw,820px);width:78%;margin:0 auto}
.dt-soln-3 .dt-soln-art{height:clamp(420px,30vw,720px)}
.dt-soln-3 .dt-frame-big{position:absolute;inset:0 70px 60px 0}
.dt-soln-3 .dt-frame-small{position:absolute;right:0;bottom:0;width:56%;height:54%;border:6px solid var(--bg)}

/* ---------- full-width tonal band (rhythm break between cream sections) ---------- */
.dt-band{background:var(--surface);padding:clamp(72px,8vw,108px) 0;border-top:1px solid var(--hairline-soft);border-bottom:1px solid var(--hairline-soft)}
.dt-band-inner{max-width:var(--maxw-wide);margin:0 auto;padding:0 var(--gutter)}

/* ---------- WHAT THE MDU DELIVERS (annotated unit) ---------- */
/* cinematic dark money-shot. Dark the whole way, so it blends the dark disaster panel above
   and the forest ROI grid below (no cream seams). Cart spotlit, screen glowing, labels in light type. */
.dt-mdu-band{position:relative;isolation:isolate;margin-top:0;border-top:0;border-bottom:0;color:var(--cream);
  background:
    radial-gradient(46% 40% at 48% 28%, rgba(112,136,110,.6) 0%, rgba(30,40,30,0) 62%),
    linear-gradient(180deg,
      #0b0f0d 0%,
      #11160f 26%,
      #161d15 50%,
      #1b2318 74%,
      #2b352a 92%,
      #39443c 100%)}
/* the ROI grid emerges in the lower MDU section and fades up into the green, so the two sections flow */
.dt-mdu-band::after{content:"";position:absolute;left:0;right:0;bottom:0;height:48%;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(201,166,143,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(201,166,143,.16) 1px,transparent 1px);
  background-size:clamp(40px,3.4vw,58px) clamp(40px,3.4vw,58px);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.35) 58%, #000 100%);
  mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.35) 58%, #000 100%)}
.dt-mdu-grid{display:grid;grid-template-columns:1fr;gap:clamp(20px,2vw,36px);align-items:center}
/* 7/22 v3 (Brian): single column; the fig spans the full rail and carries the
   whole two-zone composition (intro card, cart, callouts | laptop, bubble). */
/* #mdu is a flex column; the inner's margin:0 auto overrides cross-axis stretch,
   which shrink-wrapped the whole composition to ~fit-content and floated it
   centered on wide monitors (Brian's 7/22 screenshot). Fill the rail instead. */
#mdu > .dt-band-inner{width:100%}

/* "on site." accent: tan, nothing else (Brian 7/22 final; underline and all
   animated treatments retired) */
.dt-onsite{color:var(--tan)}

/* two-zone story (Brian 7/22): centered heading; a dotted tan meridian splits
   the composition into ON SITE (the MDU, callouts, intro card) and
   ON SCREEN (the laptop + virtual clinical oversight) */
.dt-mdu-head{align-items:center}
.dt-mdu-head .dt-h2{text-align:center}
.dt-mdu-divide{position:absolute;left:50%;top:9%;bottom:0;width:2px;z-index:2;opacity:.5;
  background:repeating-linear-gradient(180deg,var(--tan) 0 4px,transparent 4px 11px)}
.dt-mdu-zone{position:absolute;top:0;z-index:4;font-family:var(--font-mono);
  font-size:clamp(19px,1.7vw,32px);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tan);white-space:nowrap;transform:translateX(-50%)}
.dt-mdu-zone--site{left:25%}
.dt-mdu-zone--screen{left:75%}
/* the intro paragraph rides in the same glass card as the oversight bubble */
.dt-mdu-intro-card{position:absolute;left:1%;bottom:6%;width:min(430px,28%);z-index:6;background:rgba(16,22,18,.66);
  backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 60px -28px rgba(0,0,0,.82);
  border-radius:16px 5px 16px 16px;padding:19px 22px}
.dt-mdu-intro-card .dt-mdu-lead{font-size:clamp(16px,1.05vw,19px);max-width:none}
@media (max-width:1024px){
  .dt-mdu-divide,.dt-mdu-zone{display:none}
  .dt-mdu-head .dt-h2{text-align:left}
  .dt-mdu-intro-card{position:static;width:auto;margin:0 0 20px}
  .dt-emr-bubble{margin-left:0}
  .dt-laptop{margin-left:0}
}

/* loadout platform section reuses the home two-zone composition (Brian 7/22):
   spec card in the left half where the home page keeps its callouts/intro */
.dtl-fig{margin-top:clamp(26px,3vw,48px)}
.dtl-fig .dtl-spec{position:absolute;left:1%;top:50%;transform:translateY(-50%);
  width:min(380px,25%);z-index:6}
/* the spec card owns the far-left column, so the ON SITE label centers over
   the cart instead of under the card */
.dtl-fig .dt-mdu-zone--site{left:37%}
/* content-page typography darkens paragraph text; the bubble sits on forest */
.dtp-main .dt-emr-bubble p{color:rgba(255,255,255,.9)}
.dtp-main .dt-emr-bubble strong{color:var(--cream)}
/* mobile: the spec card joins the stacked column (must come AFTER the base
   absolute rule above; same-specificity tie goes to the later rule) */
@media (max-width:1024px){
  .dtl-fig .dtl-spec{position:static;transform:none;width:100%;max-width:440px;margin:0 auto 20px}
}
/* 1080p-class screens: the fig is height-floored (min-height) while the callout
   lists keep near-fixed heights, so the Diagnostics-shelf stack collided with
   On-board supplies between ~1366-1680px. Tighten the callout type there. */
@media (min-width:1025px) and (max-width:1600px){
  .dt-mdu-intro-card{bottom:3.5%}  /* the supplies callout caps the lift here */
}
@media (min-width:1025px) and (max-width:1919px){
  .dt-callout li{font-size:14.5px;line-height:1.12}
  .dt-callout ul{gap:5px}
  .dt-callout-eyebrow{margin-bottom:6px}
  .dt-mdu-intro-card .dt-mdu-lead{font-size:15px}
}
/* section heading rides its own full-rail row above the composition (Brian 7/22) */
.dt-mdu-grid > .dt-mdu-head{grid-column:1/-1;margin-bottom:clamp(6px,1vw,18px)}
.dt-mdu-intro{align-self:center}
.dt-mdu-band .mono{color:var(--tan)}
.dt-mdu-band .dt-h2{color:var(--cream)}
.dt-mdu-lead{font-weight:300;font-size:clamp(18px,1.4vw,23px);color:rgba(255,255,255,.82);max-width:44ch;line-height:1.5;margin:0}
.dt-mdu-lead strong{font-weight:500;color:var(--cream)}
.dt-mdu-fig{position:relative;width:100%;aspect-ratio:170/100;min-height:620px;max-height:940px}
.dt-mdu-cartwrap{position:absolute;left:27.5%;top:52%;transform:translateY(-50%);height:76%;z-index:1}
.dt-mdu-cart{display:block;height:100%;width:auto;filter:drop-shadow(0 52px 64px rgba(0,0,0,.55))}
/* green bloom on the lit screen */
.dt-mdu-screenglow{position:absolute;left:46%;top:22%;width:66%;height:32%;transform:translate(-50%,-50%);z-index:2;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, rgba(126,200,156,.32), rgba(126,200,156,0) 70%);filter:blur(26px);mix-blend-mode:screen}
/* pool of light the cart stands in */
.dt-mdu-cartwrap::after{content:"";position:absolute;left:50%;bottom:-2%;width:90%;height:9%;transform:translateX(-50%);z-index:-1;
  background:radial-gradient(50% 50% at 50% 50%, rgba(152,178,150,.30), rgba(152,178,150,0) 70%);filter:blur(11px)}
.dt-mdu-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:3;pointer-events:none}
.dt-mdu-lines path{fill:none;stroke:var(--tan);stroke-width:1.4;vector-effect:non-scaling-stroke;opacity:.6;stroke-dasharray:1 4;stroke-linecap:round}
.dt-mdu-dot{position:absolute;z-index:4;width:9px;height:9px;border-radius:50%;background:var(--tan);transform:translate(-50%,-50%);box-shadow:0 0 0 4px rgba(201,166,143,.16),0 0 12px rgba(201,166,143,.55)}
.dt-callout{position:absolute;z-index:4;width:min(300px,25%);padding-right:16px;border-right:2px solid var(--tan);will-change:transform}
.dt-callout-eyebrow{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--tan);margin-bottom:12px}
.dt-callout ul{display:flex;flex-direction:column;gap:9px}
.dt-callout li{font-family:var(--font-display);font-weight:500;font-size:clamp(16px,1.2vw,22px);color:var(--cream);line-height:1.15}
/* live consult on a front-facing laptop: lid opens on scroll-in, EKG animates over the real EMR capture.
   Screen faces us flat when open, so the EMR sits as a clean rectangle (no perspective warp). */
.dt-laptop{position:absolute;left:75%;top:15%;width:min(680px,38%);margin-left:calc(min(680px,38%) / -2);z-index:5;perspective:1600px;will-change:transform}
/* centered in the right half via margin (transform belongs to the parallax) */
.dt-laptop-3d{position:relative;transform-style:preserve-3d}
.dt-lid{position:relative;z-index:2;transform-origin:50% 100%;transform:rotateX(-90deg);
  transition:transform 2.6s cubic-bezier(.45,.03,.18,1);
  padding:2%;border-radius:13px 13px 5px 5px;background:linear-gradient(#20262a,#0e1314);
  box-shadow:0 38px 70px -26px rgba(0,0,0,.82),0 0 0 1px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.05)}
.dt-laptop.open .dt-lid{transform:rotateX(0deg)}
.dt-lid-cam{position:absolute;left:50%;top:3px;width:5px;height:5px;border-radius:50%;background:#2b322f;transform:translateX(-50%)}
.dt-screen{position:relative;border-radius:4px;overflow:hidden;line-height:0;background:#0a0d0b;box-shadow:inset 0 0 0 1px rgba(0,0,0,.6)}
.dt-emr-img{display:block;width:100%;height:auto}
.dt-emr-ekg{position:absolute;left:67.19%;top:15.46%;width:23.59%;height:21.38%}
/* stethoscope panel trace: replaces the static flat line in the capture
   (Brian 7/22: a flat line next to a patient reads as asystole) */
.dt-emr-steth{position:absolute;left:33.54%;top:55%;width:32.81%;height:22%}
.dt-emr-badge{position:absolute;left:2.4%;top:7.5%;display:flex;align-items:center;gap:6px;padding:4px 9px;border-radius:99px;
  background:rgba(10,12,11,.6);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);font-family:var(--font-sans);font-weight:600;font-size:clamp(9px,.62vw,12px);letter-spacing:.12em;color:#fff}
.dt-emr-led{width:7px;height:7px;border-radius:50%;background:#ff4d4d;box-shadow:0 0 6px #ff4d4d;animation:dt-emr-blink 1.4s ease infinite}
@keyframes dt-emr-blink{0%,100%{opacity:1}50%{opacity:.35}}
/* front edge of the closed clamshell base with the thumb notch (reads as a MacBook, no fake perspective) */
.dt-base{position:relative;z-index:1;height:clamp(9px,1.05vw,16px);width:107%;margin-left:-3.5%;margin-top:2px;
  background:linear-gradient(180deg,#cdd2d0,#a0a6a3 42%,#727976);border-radius:3px 3px 9px 9px;
  box-shadow:0 28px 36px -16px rgba(0,0,0,.62)}
.dt-base::before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:15%;height:50%;background:#7d837f;border-radius:0 0 7px 7px}
@media (prefers-reduced-motion:reduce){.dt-lid{transition-duration:.01ms}}

/* explainer bubble below the laptop, tail pointing up to the screen */
.dt-emr-bubble{position:absolute;left:75%;top:60%;width:min(620px,35%);margin-left:calc(min(620px,35%) / -2);z-index:6;padding:17px 20px;border-radius:5px 16px 16px 16px;
  background:rgba(16,22,18,.66);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 60px -28px rgba(0,0,0,.82)}
.dt-emr-bubble::after{content:"";position:absolute;left:calc(50% - 8px);top:-8px;width:16px;height:16px;background:rgba(16,22,18,.66);
  border-left:1px solid rgba(255,255,255,.16);border-top:1px solid rgba(255,255,255,.16);transform:rotate(45deg)}
.dt-emr-bubble-h{display:block;font-family:var(--font-mono);font-size:clamp(11px,.7vw,13px);letter-spacing:.16em;text-transform:uppercase;color:var(--tan);margin-bottom:10px}
.dt-emr-bubble p{font-family:var(--font-sans);font-weight:300;font-size:clamp(16px,1.05vw,19px);line-height:1.5;color:rgba(255,255,255,.9)}
.dt-emr-bubble strong{font-weight:500;color:var(--cream)}

/* ---------- ROI invitation (full-bleed forest grid band, content kept aligned) ---------- */
.dt-roi{position:relative;overflow:hidden;background:var(--forest);padding:clamp(76px,10vw,150px) 0;margin-top:0}
.dt-roi::before{content:"";position:absolute;inset:0;opacity:.5;
     background-image:linear-gradient(rgba(201,166,143,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(201,166,143,.18) 1px,transparent 1px);
     background-size:clamp(40px,3.4vw,58px) clamp(40px,3.4vw,58px)}
/* uniform forest so the top edge matches the MDU section's flat green bottom (no seam line).
   any depth shading is masked to fade in low, well below the transition. */
.dt-roi::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(90% 120% at 16% 78%,transparent,rgba(13,20,16,.32));
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, transparent 30%, #000 70%);mask-image:linear-gradient(180deg, transparent 0%, transparent 30%, #000 70%)}
.dt-grid-inner{position:relative;z-index:2;max-width:var(--maxw-wide);margin:0 auto;padding:0 var(--gutter)}
.dt-grid-inner > *{max-width:var(--maxw-prose)}
.dt-grid-title{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h1);color:var(--cream);line-height:clamp(1.02, 1.0 + 0.4vw, 1.1);margin:14px 0 16px;text-wrap:balance}
.dt-grid-p{font-weight:300;font-size:17px;color:rgba(255,255,255,.82);max-width:54ch;margin-bottom:30px;line-height:1.5}
.dt-grid-cta{display:flex;gap:16px;flex-wrap:wrap}
/* the CMS-SNF-VBP subtext was removed (Brian 7/22); this margin holds the
   button at the exact position it had below that paragraph (title MB 16 +
   p height 51 + p MB 30; the title margin collapses into this one) */
.dt-roi .dt-grid-cta{margin-top:97px}

/* ---------- WHERE WE DEPLOY ---------- */
.dt-deploy-head{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:end;margin-bottom:44px}
.dt-deploy-statement{font-family:var(--font-display);font-weight:600;font-size:clamp(24px,2.3vw,34px);line-height:1.1;color:var(--fg1);text-wrap:balance;max-width:26ch}
.dt-deploy-note{font-weight:300;font-size:17px;color:var(--fg2);line-height:1.5}
.dt-deploy-states{display:flex;gap:10px;margin-top:18px}
.dt-statepill{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border:1px solid var(--hairline);border-radius:var(--r-pill);
              font-family:var(--font-sans);font-weight:500;font-size:15px;color:var(--fg1)}
.dt-statepill .dt-dot{width:7px;height:7px;border-radius:50%;background:var(--brown)}
.dt-logo-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.dt-logo-slot{height:96px;border:1px solid var(--hairline);border-radius:var(--r-md);background:var(--surface-2);
              display:flex;align-items:center;justify-content:center;transition:box-shadow .4s var(--ease),transform .4s var(--ease)}
.dt-logo-slot:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.dt-logo-slot span{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg3)}
.dt-quote-reserve{margin-top:18px;border-top:1px solid var(--hairline);padding-top:26px;
                  font-family:var(--font-display);font-weight:500;font-size:clamp(20px,2.4vw,28px);line-height:1.3;
                  color:var(--fg3);max-width:46ch}
.dt-quote-reserve .dt-quote-mark{color:var(--brown);opacity:.5}

/* ---------- SPACE BEAT ---------- */
/* butts directly against the black-faded ROI band (no white gap); carries its
   own black so the seam holds even before the body.space inversion kicks in.
   The last stretch fades back out so the exit stays the soft page-wide
   crossfade it was before. */
.dt-space-section{position:relative;height:260vh;margin-top:0;background:var(--space-bg)}
.dt-stage{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center}
.dt-field{position:absolute;inset:0;width:100%;height:100%;display:block}
.dt-stage-content{position:relative;z-index:3;text-align:left;width:100%;max-width:var(--maxw-wide);padding:0 var(--gutter)} /* rail bounds = nav logo to demo button (Brian 7/22) */
.dt-eyebrow-space{color:var(--tan);margin-bottom:20px;opacity:0;transform:translateY(16px);transition:.8s var(--ease)}
.dt-space-head{font-family:var(--font-display);font-weight:700;font-size:clamp(36px,5.6vw,96px);line-height:1.02;color:var(--cream);opacity:0;transform:translateY(20px);transition:.9s var(--ease);text-wrap:balance}
.dt-space-head .accent{color:var(--tan)}
.dt-stage.lit .dt-eyebrow-space,.dt-stage.lit .dt-space-head{opacity:1;transform:none}
/* title spans the top; bullets on the left, voxel mark on the right */
.dt-space-row{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,76px);align-items:center;margin-top:clamp(30px,4vw,56px)}
.dt-space-left{min-width:0}
.dt-space-right{min-width:0;display:flex;align-items:center;justify-content:center;position:relative}
/* soft halo behind the transparent voxel canvas (replaces WebGL bloom, stays seamless on the starfield) */
.dt-space-right::before{content:"";position:absolute;left:50%;top:48%;width:78%;aspect-ratio:1;transform:translate(-50%,-50%);z-index:0;pointer-events:none;
  background:radial-gradient(circle at 50% 46%, rgba(150,210,170,.20), rgba(201,166,143,.10) 42%, transparent 70%);filter:blur(22px)}
.dt-voxel{position:relative;z-index:1;width:100%;max-width:min(880px,74vh);aspect-ratio:1;display:block}
.dt-roadmap{display:flex;flex-direction:column;gap:clamp(16px,2.2vh,30px);align-items:flex-start}
/* one shared status chip above the list (per-item chips wrapped ugly in mono) */
.dt-roadmap-tag{margin:0 0 clamp(14px,2vh,24px);opacity:0;transition:.8s var(--ease)}
.dt-stage.lit .dt-roadmap-tag{opacity:1}
.dt-rline{font-family:var(--font-display);font-weight:300;font-size:clamp(20px,2.15vw,46px);color:rgba(255,255,255,.92);
     opacity:0;transform:translateY(22px);transition:.7s var(--ease);display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;justify-content:flex-start}
.dt-rline.in{opacity:1;transform:none}
.dt-rtag{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--tan);
         border:1px solid rgba(201,166,143,.4);border-radius:var(--r-pill);padding:4px 11px;transform:translateY(-4px)}
.dt-disclaimer{margin-top:40px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
               color:rgba(255,255,255,.5);opacity:0;transition:.7s var(--ease)}
.dt-stage.deep .dt-disclaimer{opacity:1}

/* ---------- BOTTOM CTA (centered) ---------- */
/* bottom CTA = the content pages' forest CTA close, replicated exactly
   (Brian 7/22): full-bleed forest band + tan glow, cream display heading,
   cream button, mono contact line, all stacked and centered */
.dt-ctaband{position:relative;background:
  radial-gradient(120% 140% at 50% -20%,rgba(201,166,143,.16),rgba(201,166,143,0) 55%),
  var(--forest);
  padding:clamp(150px,17vh,260px) var(--gutter) clamp(64px,7vw,130px)}
/* the roadmap black dissolves over the band OWN composite background
   (fading to plain --forest left a hard edge against the tan glow).
   The fade stays SHORTER than the top padding so it finishes in the green
   headroom, above the heading (Brian 7/22). */
.dt-ctaband::before{content:"";position:absolute;left:0;right:0;top:0;
  height:clamp(110px,13vh,200px);pointer-events:none;
  background:linear-gradient(180deg,var(--space-bg),rgba(7,11,9,0))}
.dt-space-section + .dt-ctaband{margin-top:0}
/* footer tucks flush under the band (the 115px footer top-margin was the white
   bar Brian flagged) */
main:has(.dt-ctaband) + footer,main:has(.dt-ctaband) ~ footer{margin-top:0}
.dt-bottomcta{text-align:center;display:flex;flex-direction:column;align-items:center;
  max-width:var(--maxw-wide);margin:0 auto;position:relative;z-index:1}
.dt-bottomcta .dt-bc-title{font-family:var(--font-display);font-weight:600;
  font-size:clamp(34px,3.4vw,68px);line-height:1.05;letter-spacing:-.02em;
  color:var(--cream);max-width:20ch;text-wrap:balance}
.dt-bottomcta .dt-bc-cta{display:flex;gap:22px;align-items:center;flex-wrap:wrap;
  justify-content:center;margin-top:34px}
.dt-bottomcta .dt-btn{min-width:min(340px,78vw);justify-content:center;text-align:center;
  font-size:clamp(18px,1.25vw,22px)}
.dt-bc-contact{font-family:var(--font-mono);font-size:13.5px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:30px;
  max-width:56ch;line-height:1.9} /* wraps before the tagline, same as the dtp CTAs */
.dt-bc-contact .dt-nobreak{white-space:nowrap}

/* ---------- FOOTER ---------- */
.dt-footer{position:relative;overflow:visible;margin-top:var(--sp-9);background:var(--forest);color:var(--cream);padding:72px 28px 0;
  min-height:clamp(360px,42vh,560px);--cart-r:clamp(16px,7vw,180px);
  /* the viewport-height cap used to live only in front-page-head.css, so the
     cart was ~40% wider on content pages than on the home page and squeezed
     their footer legal row onto two lines at 1728-1920 (Brian 7/26) */
  --cart-w:min(clamp(320px,36vw,660px), 46vh)}
/* brand + nav columns cluster on the left; the right is reserved for the cart overlay */
.dt-footer-inner{max-width:var(--maxw-wide);margin:0 auto;display:flex;flex-wrap:wrap;align-items:flex-start;
  gap:clamp(34px,4vw,80px);padding-right:calc(var(--cart-w) + var(--cart-r))}
.dt-footer-brand{flex:0 0 auto;max-width:300px}
.dt-footer-brand img{height:clamp(26px,1.6vw,40px);margin-bottom:18px}
.dt-footer-tag{font-weight:300;font-size:16px;color:rgba(255,255,255,.72);max-width:30ch;margin-bottom:24px;line-height:1.5}
.dt-footer-addr{font-style:normal;font-weight:300;font-size:15px;color:rgba(255,255,255,.62);line-height:1.5}
.dt-footer-cols{display:flex;flex-wrap:wrap;gap:clamp(28px,3vw,56px)}
.dt-footer-col{display:flex;flex-direction:column;gap:12px}
.dt-footer-h{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--tan);margin-bottom:6px}
.dt-footer-col a{font-size:15px;color:rgba(255,255,255,.78);transition:color .2s,opacity .2s}
.dt-footer-col a:hover{color:var(--cream)}

/* ---- footer at laptop/1080p widths (Brian 7/24) ----------------------------
   The brand block used to wrap ABOVE the link columns on the home page at any
   width below 2560 (only the home page reserves room for the rising cart).
   Two causes, both fixed here:
   1. The cart reservation assumed the content block was full-bleed, but
      .dt-footer-inner is centered inside the rail, so it already clears the
      cart by its own left margin — (100vw - rail)/2, which is 7vw while the
      rail is fluid. Reclaiming 6vw of that keeps a ~20px safety gap.
   2. The gaps were vw-scaled and enormous (77px between columns at 1080p),
      so four columns could never fit beside the brand.
   Columns now condense, then wrap 2x2 as a unit if they truly run out of
   room — the brand never jumps rows again. Scoped 1025-2559px: phones keep
   the stacked footer, and >=2560 (Brian's work displays) is untouched. */
@media (min-width:1025px) and (max-width:2559px){
  /* reclaim exactly the centering slack the inner already has — (100vw - rail)/2
     — minus a 20px safety margin, and never below zero (under ~1280px the rail
     sits on its 1100px floor, so there is no slack to take) */
  .dt-footer-inner{gap:clamp(28px,2.4vw,44px);
    padding-right:calc(var(--cart-w) + var(--cart-r)
      - max(0px, (100vw - var(--maxw-wide)) / 2 - 20px))}
  .dt-footer-brand{max-width:260px}
  .dt-footer-cols{flex:1 1 auto;min-width:0;gap:26px clamp(22px,2vw,40px);justify-content:space-between}
  .dt-footer-col{flex:0 1 auto;min-width:140px}
}
/* holding the brand inline needs room for four columns beside it; below
   1200px there isn't any, so wrapping stays allowed there (no overflow) */
@media (min-width:1200px) and (max-width:2559px){
  .dt-footer-inner{flex-wrap:nowrap}
}
/* the legal/social base row needs the same cart clearance as the columns —
   without it the X and YouTube icons sat behind the cart (Brian 7/24) */
/* NOTE: the base-row rules below live EARLIER in this file than the original
   .dt-footer-base declaration, and a media query adds no specificity — so the
   later plain rule would win and zero this padding out. Scoped one level
   deeper (.dt-footer .dt-footer-base) so order cannot beat it. */
@media (min-width:1025px) and (max-width:2559px){
  /* --cart-clear = the width the rising cart really occupies, minus the slack
     the centred content block already has on its left. */
  .dt-footer .dt-footer-base{--cart-clear:calc(var(--cart-w) + var(--cart-r)
    - max(0px, (100vw - var(--maxw-wide)) / 2 - 20px))}
  /* the legal links can never run under the cart art */
  .dt-footer .dt-footer-base .dt-legal{max-width:calc(100% - var(--cart-clear))}
  /* social icons sit on their own line, left-aligned under the legal links
     (Brian 7/26). Keeps the six links on one clean row at every width and
     puts the icons nowhere near the cart, so they need no clearance. */
  .dt-footer .dt-footer-base .dt-social{flex:0 0 100%;display:flex;
    justify-content:flex-start;margin:16px 0 0;padding:0}
}
/* Below ~1700 the cart reserves more width than the six legal links have left,
   so the decorative cart gives some back and the row tightens to match. */
@media (min-width:1025px) and (max-width:1700px){
  /* body-scoped: front-page-head.css re-declares --cart-w on .dt-footer and is
     enqueued after this sheet, so equal specificity would lose on the home page */
  body .dt-footer{--cart-w:clamp(240px,22vw,360px)}
  .dt-footer .dt-footer-base .dt-legal{gap:15px}
  .dt-footer .dt-footer-base a,.dt-footer .dt-footer-base span{font-size:12.5px}
}
@media (min-width:1025px) and (max-width:1365px){
  body .dt-footer{--cart-w:clamp(210px,17vw,290px)}
  .dt-footer .dt-footer-base .dt-legal{gap:12px}
  .dt-footer .dt-footer-base a,.dt-footer .dt-footer-base span{font-size:12px}
}

/* ---- pinned roadmap stage on SHORT viewports (Brian 7/24) ------------------
   .dt-stage pins at top:0, but the nav is sticky above it, so the vertically
   centered content is clipped whenever the window is short: the box needs
   content(864) + 2x navH to clear, i.e. ~1026px, so any laptop clips the
   "What's coming to the MDU." title. Height-scoped, because that is the real
   trigger — tall displays are untouched and keep the approved composition. */
/* ---- locked MDU band on SHORT viewports (Brian 7/24) ----------------------
   The band pins under the nav and holds a full screen, but its composition
   (108px of band padding + heading + a 793px figure) needs ~1080px of window
   height to fit. On a laptop the intro card ran ~114px off the bottom. Pull
   the title up toward the nav and cap the figure to the space that is
   actually left, so the whole composition lands inside the locked frame.
   Height-scoped: tall displays keep the approved composition untouched. */
@media (min-width:1025px) and (max-height:1120px){
  #mdu.dt-band{padding-top:clamp(28px,4.4vh,52px);padding-bottom:clamp(24px,3.2vh,44px)}
  #mdu .dt-mdu-head{margin-bottom:clamp(6px,1.2vh,16px)}
  #mdu .dt-mdu-fig{min-height:0;max-height:calc(100svh - var(--navH) - 192px)}
  /* the callouts sit at fixed % tops inside the figure, so a shorter figure
     pulls the three stacks together — they collided at every laptop height
     (Brian 7/24). Compress the stacks by the same order the figure lost. */
  #mdu .dt-callout-eyebrow{font-size:11px;letter-spacing:.12em;margin-bottom:3px}
  #mdu .dt-callout ul{gap:1px}
  #mdu .dt-callout li{font-size:clamp(11.5px,1.45vh,14px);line-height:1.08}
  /* the intro card also has to give back height, or the supplies callout
     lands on it once the figure gets really short (1280x800) */
  #mdu .dt-mdu-intro-card{padding:12px 14px}
  #mdu .dt-mdu-intro-card .dt-emr-bubble-h{margin-bottom:4px}
  #mdu .dt-mdu-intro-card .dt-mdu-lead{font-size:clamp(12.5px,1.5vh,16px);line-height:1.32}
}

@media (min-width:1025px) and (max-height:1120px){
  .dt-stage{top:var(--navH);height:calc(100svh - var(--navH))}
  .dt-space-head{font-size:clamp(30px,3.5vw,56px)}
  .dt-rline{font-size:clamp(16px,1.55vw,30px)}
  .dt-ri-ic{width:clamp(20px,1.7vw,28px);height:clamp(20px,1.7vw,28px)}
  .dt-space-row{margin-top:clamp(16px,2vw,30px)}
  .dt-roadmap{gap:clamp(10px,1.1vw,18px)}
}
.dt-footer-base{position:relative;z-index:2;max-width:var(--maxw-wide);margin:52px auto 0;padding:24px 0 36px;border-top:1px solid rgba(255,255,255,.14);
     display:flex;justify-content:flex-start;align-items:center;gap:clamp(20px,3vw,52px);flex-wrap:wrap}
.dt-footer-base .dt-legal{display:flex;gap:22px;flex-wrap:wrap}
.dt-footer-base a,.dt-footer-base span{font-size:13.5px;color:rgba(255,255,255,.6);transition:color .2s}
.dt-footer-base a:hover{color:rgba(255,255,255,.9)}
.dt-social{display:flex;gap:12px}
.dt-social a{width:36px;height:36px;border:1px solid rgba(255,255,255,.2);border-radius:50%;
             display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.7);transition:border-color .25s,color .25s}
.dt-social a:hover{border-color:var(--tan);color:var(--tan)}
.dt-social svg{width:16px;height:16px}

/* ---------- MODAL ---------- */
.dt-modal-scrim{position:fixed;inset:0;z-index:100;background:rgba(13,20,16,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
     display:none;align-items:center;justify-content:center;padding:24px;opacity:0;transition:opacity .3s var(--ease)}
.dt-modal-scrim.open{display:flex;opacity:1}
.dt-modal{position:relative;width:100%;max-width:448px;padding:38px;border-radius:var(--r-lg);
     background:rgba(247,248,246,.88);backdrop-filter:blur(26px) saturate(1.5);-webkit-backdrop-filter:blur(26px) saturate(1.5);
     border:1px solid var(--glass-bd);box-shadow:0 30px 80px -30px rgba(13,20,16,.6),inset 0 1px 0 rgba(255,255,255,.8);
     animation:dtpop .4s var(--ease)}
@keyframes dtpop{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
.dt-modal-x{position:absolute;right:20px;top:16px;background:none;border:0;font-size:28px;line-height:1;color:var(--fg3);cursor:pointer}
.dt-modal-x:hover{color:var(--fg1)}
.dt-modal-title{font-family:var(--font-display);font-weight:600;font-size:27px;color:var(--heading);line-height:1.08;margin:10px 0 8px}
.dt-modal-sub{font-weight:300;font-size:16px;color:var(--fg2);margin-bottom:24px;line-height:1.45}
.dt-form{display:flex;flex-direction:column;gap:12px}
.dt-input{font-family:var(--font-sans);font-size:15px;padding:14px 16px;border-radius:var(--r-sm);border:1px solid var(--hairline);
     background:rgba(255,255,255,.7);color:var(--forest);outline:none;transition:border-color .2s,box-shadow .2s}
.dt-input:focus{border-color:var(--brown);box-shadow:0 0 0 3px rgba(127,87,66,.18)}
.dt-form .dt-btn{margin-top:8px;justify-content:center}
.dt-sent .dt-btn{margin-top:20px}

/* eyebrow + accent helpers */
.mono{font-family:var(--font-mono);font-weight:400;font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase;color:var(--slate)}
.accent{color:var(--accent);font-style:italic}

/* arrow glyph */
.dt-arrow{width:16px;height:16px;flex:none}
/* reduced motion: drop the autoplaying footage, the mesh hero bg stands in */
/* reduced motion: playback never starts (JS-gated), the poster stands in statically */

/* ---------- RESPONSIVE ---------- */
@media (max-width:1024px){
  .dt-nav-links{display:none}
  .dt-burger{display:flex}
  .dt-hero-scrim{background:linear-gradient(90deg, rgba(255,255,255,.95), rgba(255,255,255,.7) 60%, rgba(255,255,255,.4)),radial-gradient(120% 100% at 50% 50%, transparent 56%, rgba(13,20,16,.16))}
  /* on small screens the footage is a faint full-width backdrop so the copy clearly wins */
  .dt-hero-video{width:100%;opacity:.4;-webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 64%);mask-image:linear-gradient(180deg, transparent 0%, #000 64%)}
  .dt-hero-scrim{background:linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.72) 46%, rgba(255,255,255,.5) 100%)}
  .dt-soln,.dt-deploy-head{grid-template-columns:1fr;gap:32px}
  .dt-soln:nth-child(even){direction:ltr}
  .dt-soln-art,.dt-soln-3 .dt-soln-art{height:380px}
  /* annotated unit collapses to a simple stack: cart on top, labelled list below */
  .dt-mdu-grid{grid-template-columns:1fr;gap:clamp(28px,5vw,44px)}
  .dt-mdu-fig{aspect-ratio:auto;min-height:0;max-height:none;display:flex;flex-direction:column;align-items:center;gap:8px}
  .dt-mdu-cartwrap{position:relative;left:auto;top:auto;transform:none;height:auto;width:min(300px,72vw);margin:0 auto}
  .dt-mdu-cart{height:auto;width:100%}
  .dt-mdu-lines,.dt-mdu-dot{display:none}
  .dt-callout{position:relative;left:auto!important;top:auto!important;transform:none!important;width:100%;max-width:440px;margin-top:22px}
  .dt-laptop{position:relative;left:auto;top:auto;transform:none!important;width:100%;max-width:420px;margin:26px auto 0;perspective:none}
  .dt-laptop-3d{transform:none}
  .dt-lid{transform:none!important;padding:6px;background:linear-gradient(#20262a,#0e1314);box-shadow:0 30px 60px -28px rgba(0,0,0,.7);border-radius:12px}
  .dt-base{display:none}
  .dt-screen{border-radius:6px}
  .dt-emr-bubble{position:relative;left:auto;top:auto;width:100%;max-width:420px;margin:20px auto 0}
  .dt-emr-bubble::after{display:none}
  .dt-soln-2 .dt-frame-capsule{height:420px;width:100%}
  .dt-footer-inner{flex-direction:column;padding-right:0;gap:40px}
  .dt-footer{overflow:hidden;min-height:0;padding-bottom:0}
  .dt-footer .dt-bw{position:relative;right:auto;bottom:auto;width:min(380px,84vw);margin:40px auto 0}
  .dt-space-row{grid-template-columns:1fr;gap:clamp(22px,4vw,36px);margin-top:30px}
  .dt-voxel{max-width:min(380px,54vw)}
}
@media (max-width:640px){
  .dt-soln-copy{max-width:none}
  .dt-load-list{grid-template-columns:1fr}
  .dt-logo-row{grid-template-columns:repeat(2,1fr)}
  .dt-footer-cols{gap:22px 40px}
  .dt-footer-base{flex-direction:column;align-items:flex-start}
  .dt-footer .dt-bw{width:min(320px,90vw)}
  .dt-voxel{max-width:min(290px,64vw)}
  .dt-hero-reserve{display:none}
}

/* ---------- footer boot wall (rising MDU, screen boots, schedule CTA) ---------- */
/* cart anchored to the page bottom, on top of the footer + the section above (not encapsulated) */
.dt-bw{position:absolute;right:var(--cart-r);bottom:0;width:var(--cart-w);z-index:40;pointer-events:none}
/* soft ground glow where the cart meets the page bottom */
.dt-bw::after{content:"";position:absolute;left:50%;bottom:0;width:128%;height:32%;transform:translateX(-50%);z-index:0;pointer-events:none;
  background:radial-gradient(60% 80% at 50% 100%, rgba(150,210,170,.20), rgba(150,210,170,.05) 48%, transparent 74%);
  opacity:0;transition:opacity 1.4s ease .5s}
.dt-bw.live::after{opacity:1}
/* full cart visible (no clip); base sits on the page edge; slow rise from fully below the window */
.dt-bw-stage{position:relative;width:100%;aspect-ratio:.7485;display:block;pointer-events:none;
  transform:translateY(112%);opacity:0;transition:transform 2.2s var(--ease),opacity 1s ease}
.dt-bw.live .dt-bw-stage{transform:translateY(0);opacity:1}
.dt-bw-cart{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:bottom;z-index:1;pointer-events:none;filter:drop-shadow(0 30px 44px rgba(0,0,0,.55))}
.dt-bw-screen{position:absolute;top:0;left:0;width:600px;height:1060px;transform-origin:0 0;z-index:2;overflow:hidden;background:#eef1ec}
.dt-bw-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.dt-bw-home{opacity:0;transition:opacity .6s ease}
.dt-bw-screen.showhome .dt-bw-home{opacity:1}
.dt-bw-off{position:absolute;inset:0;background:#0c0e0d;z-index:6;transition:opacity .7s ease}
.dt-bw-screen.booted .dt-bw-off{opacity:0}
.dt-bw-glow{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 42%, rgba(150,210,170,.55), transparent 60%);transition:opacity .5s ease}
.dt-bw-screen.booting .dt-bw-glow{opacity:1}
.dt-bw-type{position:absolute;z-index:7;color:#2a2f2c;font-family:var(--font-sans);font-weight:400;font-size:25px;letter-spacing:.01em;white-space:nowrap;transform:translateY(-50%);transition:opacity .3s ease}
.dt-bw-user{left:34%;top:46.2%}
.dt-bw-pass{left:34%;top:49.9%;letter-spacing:4px;font-size:30px}
.dt-bw-screen.showhome .dt-bw-type{opacity:0}
.dt-bw-caret{display:inline-block;width:2px;height:1.05em;background:#2a2f2c;margin-left:1px;vertical-align:-2px;animation:dtblink 1s steps(1) infinite}
@keyframes dtblink{50%{opacity:0}}
.dt-bw-flash{position:absolute;left:25%;right:25%;top:53.5%;height:6.2%;z-index:7;border-radius:8px;background:rgba(255,255,255,.45);opacity:0}
.dt-bw-screen.unlocking .dt-bw-flash{animation:dtflash .4s ease}
@keyframes dtflash{0%,100%{opacity:0}40%{opacity:1}}
/* flat schedule CTA: sits over the screen but is not warped, so it stays crisp and responsive */
.dt-bw-cta{position:absolute;z-index:8;left:50%;top:65%;transform:translate(-50%,-50%) scale(.96);pointer-events:none;
  font-family:var(--font-display);font-weight:600;font-size:clamp(13px,1.2vw,19px);color:var(--cream);white-space:nowrap;
  background:rgba(57,68,60,.96);padding:11px 22px;border-radius:9px 18px 9px 18px;
  box-shadow:0 16px 38px -12px rgba(13,20,16,.6);opacity:0;transition:opacity .5s ease,transform .5s var(--ease)}
.dt-bw.cta-on .dt-bw-cta{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto;cursor:pointer}
@media (prefers-reduced-motion:reduce){
  .dt-bw-stage{transform:translateY(0);opacity:1}
  .dt-bw-off{opacity:0}
  .dt-bw::after{opacity:1}
}

/* ---------- SITES OF CARE: side-by-side expanding worlds (SNF / Corrections / Disaster) ----------
   Rest: three equal columns, the site name big at the top of each over its photo.
   Hover: that panel expands to the full split world (scene shifts right, narrative slides down-left),
   the others shrink to comfortable slivers. Heavy motion (rain, leaf parallax, daylight) is gated
   to the active panel. Narrow / reduced-motion / no-JS fall back to three stacked full sections. */
.soc{position:relative;display:flex;height:100vh;min-height:600px;overflow:hidden;background:#0b0f0c;margin-top:0;
  --ease:cubic-bezier(.66,0,.18,1)}
.soc-panel{position:relative;flex:1 1 0;min-width:0;overflow:hidden;cursor:pointer;isolation:isolate;
  --slant:clamp(46px,4.8vw,104px);transition:flex-grow .82s var(--ease)}
/* leaning dividers: every panel after the first overlaps the previous and is clipped with a diagonal
   left edge so the bottom sits toward the left and the top leans right ("/") */
.soc-panel + .soc-panel{margin-left:calc(-1 * var(--slant));clip-path:polygon(var(--slant) 0,100% 0,100% 100%,0 100%);
  filter:drop-shadow(-7px 0 16px rgba(0,0,0,.45))}
.soc-panel.is-active{flex-grow:4.4}
.soc-panel.is-dormant{flex-grow:1.15}   /* keep dormant panels a comfortable hit target */
/* layers (bottom -> top): base | scene | motion | washes | copy */
.soc-base{position:absolute;inset:0;z-index:0}
.soc-scene{position:absolute;inset:0;z-index:1;overflow:hidden;transition:left .82s var(--ease),right .82s var(--ease)}
.soc-scene img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.05)}
.soc-panel.is-active .soc-scene{left:46%}   /* scene retreats right ~54%, clears the copy column */
.soc-wash-rest{position:absolute;inset:0;z-index:4;pointer-events:none;transition:opacity .6s var(--ease)}
.soc-wash-act{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .7s var(--ease) .08s}
.soc-panel.is-active .soc-wash-rest{opacity:0}
.soc-panel.is-active .soc-wash-act{opacity:1}
/* copy: rest/dormant = big label at the TOP of the card, centered; active = slides down into the left column */
.soc-copy{position:absolute;z-index:6;left:var(--gutter);right:var(--gutter);top:8%;text-align:center;max-width:none;pointer-events:none;
  transition:top .72s var(--ease),left .72s var(--ease),right .72s var(--ease),transform .72s var(--ease)}
.soc-panel.is-active .soc-copy{top:50%;left:clamp(72px,18.5%,400px);right:46%;transform:translateY(-50%);text-align:left}
.soc-kicker{display:flex;align-items:center;gap:12px;opacity:0;transform:translateY(10px);
  transition:opacity .55s var(--ease) .12s,transform .55s var(--ease) .12s;margin-bottom:20px}
.soc-kicker i{display:block;width:38px;height:3px;border-radius:3px;background:var(--tan)}
.soc-kicker span{font-family:var(--font-display);font-size:clamp(13px,.9vw,18px);font-weight:600;letter-spacing:.24em;text-transform:uppercase}
.soc-name{font-family:var(--font-display);font-weight:700;font-size:clamp(38px,3.5vw,84px);line-height:1.0;letter-spacing:-.02em;
  transition:font-size .82s var(--ease),text-shadow .6s var(--ease)}
.soc-lead{font-family:var(--font-sans);font-weight:400;font-size:clamp(17px,1.2vw,25px);line-height:1.5;margin-top:24px;max-width:42ch;
  opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease) .16s,transform .6s var(--ease) .16s}
.soc-cta{display:inline-flex;align-items:center;gap:10px;margin-top:30px;font-family:var(--font-display);font-weight:600;font-size:clamp(16px,1.05vw,22px);
  padding:14px 26px;border-radius:4px;border:1px solid currentColor;opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .6s var(--ease) .22s,transform .6s var(--ease) .22s,gap .25s var(--ease),background .25s,color .25s}
.soc-cta svg{transition:transform .25s var(--ease)}
.soc-panel.is-active .soc-kicker,.soc-panel.is-active .soc-lead,.soc-panel.is-active .soc-cta{opacity:1;transform:none}
.soc-panel.is-active .soc-cta{pointer-events:auto}
.soc-panel.is-active .soc-cta:hover{gap:14px}
.soc-panel:not(.is-active):not(.is-dormant) .soc-name{font-size:clamp(42px,4.4vw,92px)}
.soc-panel.is-dormant .soc-name{font-size:clamp(20px,1.4vw,30px);opacity:.92}
/* SNF: clean white, leaf-shade gobo, ken-burns photo */
.w-snf .soc-base{background:radial-gradient(130% 120% at 18% -8%, #FFFFFF 0%, #FBFCFA 45%, #F2F4F1 100%)}
.w-snf .soc-paper{display:none}
.w-snf.is-active .soc-scene img{animation:kb 26s ease-in-out infinite alternate}
.w-snf.is-active .soc-scene{-webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 12%, #000 32%);mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 12%, #000 32%)}
.w-snf .soc-shade{position:absolute;z-index:3;pointer-events:none;mix-blend-mode:multiply;inset:-34%;width:168%;height:168%;background:url("assets/textures/leaf-shadow.webp") center/cover;
  -webkit-mask-image:radial-gradient(ellipse 66% 62% at 50% 47%, transparent 4%, rgba(0,0,0,.42) 32%, #000 70%);mask-image:radial-gradient(ellipse 66% 62% at 50% 47%, transparent 4%, rgba(0,0,0,.42) 32%, #000 70%)}
.w-snf .soc-shade.far{opacity:.42;filter:blur(1.4px)}
.w-snf .soc-shade.near{opacity:.32;background-size:132%;filter:blur(.4px)}
.w-snf .soc-wash-rest{background:linear-gradient(0deg, rgba(38,30,18,.66) 0%, rgba(38,30,18,.18) 40%, rgba(38,30,18,0) 70%)}
.w-snf .soc-wash-act{background:linear-gradient(90deg, #f4ead4 0%, rgba(244,234,212,.95) 32%, rgba(244,234,212,.6) 48%, rgba(244,234,212,0) 62%)}
.w-snf .soc-name{color:var(--cream);text-shadow:0 2px 26px rgba(20,12,0,.5)}
.w-snf.is-active .soc-name{color:var(--forest);text-shadow:none}
.w-snf .soc-kicker span{color:var(--brown)}
.w-snf .soc-lead{color:#555046}
.w-snf .soc-cta{color:var(--brown)}
.w-snf .soc-cta:hover{background:var(--brown);color:#fff;border-color:var(--brown)}
/* Corrections: concrete + warm daylight + drifting presences, the bolted MDU bay as the highlight */
.w-corr .soc-base{background:url("assets/textures/concrete.webp") center/cover,#2a2d2f}
.w-corr.is-active .soc-scene img{animation:kb 30s ease-in-out infinite alternate}
.w-corr.is-active .soc-scene{-webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 12%, #000 30%);mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 12%, #000 30%)}
.w-corr .soc-day{position:absolute;inset:0;z-index:3;pointer-events:none;will-change:transform,opacity;background:radial-gradient(48% 62% at 80% 2%, rgba(255,242,212,.42), rgba(255,242,212,0) 60%)}
.w-corr .soc-alive{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;mix-blend-mode:screen}
.w-corr .figure{position:absolute;bottom:-8%;width:clamp(80px,9vw,150px);height:64%;border-radius:50% 50% 46% 46%;filter:blur(34px);opacity:0;background:radial-gradient(50% 55% at 50% 42%, rgba(255,234,196,.16), rgba(255,234,196,0) 72%)}
.w-corr.is-active .figure{animation:pass linear infinite}
.w-corr.is-active .figure.f1{animation-duration:27s;animation-delay:-4s;opacity:1}
.w-corr.is-active .figure.f2{animation-duration:35s;animation-delay:-18s;height:54%;opacity:.8}
.w-corr.is-active .figure.f3{animation-duration:31s;animation-delay:-24s;height:74%;opacity:.7}
.w-corr .soc-wash-rest{background:linear-gradient(0deg, rgba(8,11,9,.78) 0%, rgba(8,11,9,.28) 42%, rgba(8,11,9,0) 72%),linear-gradient(90deg, rgba(8,11,9,.5) 0%, rgba(8,11,9,0) 46%)}
.w-corr .soc-wash-act{background:linear-gradient(96deg, rgba(11,15,12,.92) 0%, rgba(11,15,12,.74) 26%, rgba(11,15,12,.28) 46%, rgba(11,15,12,0) 64%)}
.w-corr .soc-name{color:var(--cream);text-shadow:0 2px 30px rgba(0,0,0,.55)}
.w-corr .soc-kicker span{color:var(--tan)}
.w-corr .soc-lead{color:rgba(255,255,255,.84)}
.w-corr .soc-cta{color:var(--cream)}
.w-corr .soc-cta:hover{background:var(--cream);color:#0D1410;border-color:var(--cream)}
/* Disaster: dark, field staging scene as the foreground, lightweight CSS rain */
.w-dis .soc-base{background:#0b0f0d}
.w-dis.is-active .soc-scene{-webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 12%, #000 32%);mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 12%, #000 32%)}
.w-dis.is-active .soc-scene img{animation:kb 30s ease-in-out infinite alternate}
.w-dis .soc-rain{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;mix-blend-mode:screen;transition:opacity .55s var(--ease)}
.w-dis .soc-rain::before,.w-dis .soc-rain::after{content:"";position:absolute;inset:0;background-image:url("assets/imagery/rain.webp");background-repeat:repeat}
.w-dis .soc-rain::before{background-size:320px 480px}
.w-dis .soc-rain::after{background-size:200px 300px;opacity:.6;filter:blur(.4px)}
.w-dis.is-active .soc-rain{opacity:1}
.w-dis.is-active .soc-rain::before{animation:rainNear .7s linear infinite}
.w-dis.is-active .soc-rain::after{animation:rainFar 1.25s linear infinite}
.w-dis .soc-wash-rest{background:linear-gradient(0deg, rgba(6,10,9,.74) 0%, rgba(6,10,9,.24) 44%, rgba(6,10,9,0) 72%)}
.w-dis .soc-wash-act{background:linear-gradient(96deg, rgba(7,11,10,.9) 0%, rgba(7,11,10,.66) 26%, rgba(7,11,10,.22) 46%, rgba(7,11,10,0) 64%)}
.w-dis .soc-name{color:var(--cream);text-shadow:0 2px 30px rgba(0,0,0,.5)}
.w-dis .soc-kicker span{color:var(--tan)}
.w-dis .soc-lead{color:rgba(255,255,255,.84)}
.w-dis .soc-cta{color:var(--cream)}
.w-dis .soc-cta:hover{background:var(--cream);color:#0D1410;border-color:var(--cream)}
/* keyframes */
@keyframes kb{from{transform:scale(1.05)}to{transform:scale(1.13) translate(-1.4%,-2%)}}
@keyframes pass{0%{transform:translateX(-18vw)}100%{transform:translateX(120vw)}}
@keyframes rainNear{to{background-position:0 480px}}
@keyframes rainFar{to{background-position:0 300px}}
/* large-display tiers: a gentle bump on 2K/4K, not a jump to max */
@media (min-width:1700px){
  .soc-panel:not(.is-active):not(.is-dormant) .soc-name{font-size:clamp(48px,3.3vw,78px)}
  .soc-panel.is-active .soc-name{font-size:clamp(44px,2.9vw,72px)}
  .soc-lead{font-size:clamp(17px,1.0vw,22px);max-width:40ch}
  .soc-kicker span{font-size:clamp(13px,.7vw,16px)}
  .soc-cta{font-size:clamp(15px,.78vw,18px);padding:14px 26px}
}
@media (min-width:2560px){
  .soc-panel:not(.is-active):not(.is-dormant) .soc-name{font-size:clamp(70px,3.5vw,96px)}
  .soc-panel.is-active .soc-name{font-size:clamp(62px,3.1vw,86px)}
  .soc-panel.is-dormant .soc-name{font-size:clamp(24px,1.2vw,32px)}
  .soc-lead{font-size:clamp(20px,1.1vw,26px)}
  .soc-kicker span{font-size:clamp(15px,.7vw,18px)}
  .soc-kicker i{width:46px}
  .soc-cta{font-size:clamp(16px,.82vw,20px);padding:16px 30px}
}
/* stacked fallback: narrow screens + reduced motion */
@media (max-width:1024px){
  .soc{flex-direction:column;height:auto}
  .soc-panel{flex:none;min-height:86vh;cursor:default;border-bottom:1px solid rgba(0,0,0,.5)}
  .soc-panel + .soc-panel{margin-left:0;clip-path:none;filter:none}
  .soc-panel .soc-scene{left:0!important;-webkit-mask-image:none!important;mask-image:none!important}
  .w-dis .soc-rain{opacity:1}
  .w-dis .soc-rain::before{animation:rainNear .7s linear infinite}
  .w-dis .soc-rain::after{animation:rainFar 1.25s linear infinite}
  .soc-copy{max-width:none;left:var(--gutter);right:var(--gutter);top:50%;transform:translateY(-50%);text-align:left}
  .soc-kicker,.soc-lead,.soc-cta{opacity:1!important;transform:none!important}
  .soc-cta{pointer-events:auto}
  .w-snf .soc-name{color:var(--forest);text-shadow:0 1px 10px rgba(255,255,255,.4)}
  .w-snf .soc-wash-rest{background:linear-gradient(90deg,#f4ead4 0%,rgba(244,234,212,.6) 50%,rgba(244,234,212,0) 80%)}
}
@media (prefers-reduced-motion:reduce){ .soc-scene img,.w-snf .soc-shade,.w-corr .figure{animation:none} }

/* ---------- LARGE-DISPLAY TEXT SCALING ----------
   The smallest fixed-px text (buttons, dropdown items, footer, mono labels) does not scale and
   reads tiny on big monitors. Bump it on wide viewports only. Mobile and laptops (<1700px) are untouched. */
@media (min-width:1700px){
  .dt-btn{font-size:18px;padding:17px 36px}
  .dt-textlink{font-size:18px} /* tracks .dt-btn so "See how it works" matches the demo button (Brian 7/22) */
  .dt-ditem-t{font-size:17px} .dt-ditem-d{font-size:15px}
  .dt-callout-eyebrow{font-size:13px}
  .dt-logo-slot span,.dt-rtag,.dt-footer-h,.dt-disclaimer,.dt-frame-tag{font-size:13px}
  .dt-footer-tag{font-size:18px}
  .dt-footer-addr,.dt-footer-col a{font-size:17px}
  .dt-footer-base a,.dt-footer-base span{font-size:15px}
  .dt-island-p,.dt-grid-p,.dt-deploy-note,.dt-modal-sub,.dt-emr-bubble p{font-size:19px}
  .dt-emr-bubble-h{font-size:13px}
  .dt-statepill,.dt-input{font-size:16px}
}
@media (min-width:2560px){
  .dt-btn{font-size:22px;padding:20px 44px}
  .dt-textlink{font-size:22px}
  .dt-navlink{font-size:24px}
  .dt-ditem-t{font-size:21px} .dt-ditem-d{font-size:18px}
  .dt-callout-eyebrow{font-size:15px}
  .dt-logo-slot span,.dt-rtag,.dt-footer-h,.dt-disclaimer,.dt-frame-tag{font-size:15px}
  .dt-topbar p{font-size:18px}
  .dt-footer-tag{font-size:23px}
  .dt-footer-addr,.dt-footer-col a{font-size:20px}
  .dt-footer-base a,.dt-footer-base span{font-size:17px}
  .dt-island-p,.dt-grid-p,.dt-deploy-note,.dt-modal-sub,.dt-emr-bubble p{font-size:22px}
  .dt-emr-bubble-h{font-size:15px}
  .dt-statepill,.dt-input{font-size:19px}
}

/* ---------- MDU EVOLUTION CAROUSEL (#walkthrough): drag-spin lazy-susan of the four cart generations ---------- */
.dt-mc{text-align:center;overflow:visible;position:relative}
#walkthrough{padding-bottom:clamp(90px,11vh,150px)}   /* breathing room below the timeline before the next section */
.dt-mc-head{max-width:900px;margin:0 auto}
.dt-mc-eyebrow{font-family:var(--font-mono);font-size:var(--fs-label);font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--brown);margin-bottom:14px}
.dt-mc-title{font-family:var(--font-display);font-size:clamp(26px,2.4vw,52px);font-weight:700;letter-spacing:-.025em;line-height:1.05;color:var(--heading)}
.dt-mc-title .dt-mc-accent{color:var(--brown)}
.dt-mc-hint{margin-top:14px;font-family:var(--font-sans);font-size:var(--fs-small);font-weight:500;color:rgba(57,68,60,.55)}
.dt-mc-stage{position:relative;height:46vh;min-height:330px;margin-top:6px;width:100vw;margin-left:calc(50% - 50vw);
  cursor:grab;user-select:none;-webkit-user-select:none;touch-action:pan-y;overflow-x:clip;overflow-y:visible}
.dt-mc-stage.grabbing{cursor:grabbing}
.dt-mc-ground{position:absolute;left:50%;bottom:5.6vh;width:30%;max-width:540px;height:60px;transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%, rgba(57,68,60,.22), transparent 66%);filter:blur(13px);pointer-events:none;z-index:1}
.dt-mc-item{position:absolute;top:0;bottom:7vh;left:50%;width:460px;margin-left:-230px;
  display:flex;align-items:flex-end;justify-content:center;transform-origin:50% 100%;will-change:transform,opacity,filter;pointer-events:none}
.dt-mc-item img{max-height:calc(100% * var(--hf,1));max-width:100%;object-fit:contain}
.dt-mc-info{margin-top:4px;min-height:118px}
.dt-mc-ihead{display:flex;align-items:center;justify-content:center;gap:12px}
.dt-mc-itag{font-family:var(--font-mono);font-size:var(--fs-label);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--brown)}
.dt-mc-ibadge{display:none;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--brown);padding:5px 11px;border-radius:999px}
.dt-mc-ibadge.show{display:inline-block}
.dt-mc-iname{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:700;letter-spacing:-.01em;margin-top:8px;color:var(--heading);transition:color .3s}
.dt-mc-iname.today{color:var(--brown)}
.dt-mc-idesc{font-family:var(--font-sans);font-size:var(--fs-body);font-weight:400;color:rgba(57,68,60,.72);margin-top:10px;max-width:min(900px,80vw);margin-inline:auto;line-height:1.45;min-height:calc(1.45em * 2)}
/* timeline as a precision progress rail: hairline base, warm brown->tan fill to the active node */
.dt-mc-controls{margin-top:32px;display:flex;align-items:center;justify-content:center;gap:clamp(16px,2vw,36px);position:relative}
.dt-mc-arrow{width:52px;height:52px;border-radius:50%;border:1px solid rgba(57,68,60,.14);background:#fff;cursor:pointer;
  display:grid;place-items:center;color:var(--forest);flex:0 0 auto;box-shadow:0 6px 16px -10px rgba(57,68,60,.45);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.dt-mc-arrow svg{transition:transform .3s var(--ease)}
.dt-mc-arrow:hover{background:var(--brown);border-color:var(--brown);color:#fff;transform:translateY(-2px);box-shadow:0 16px 28px -12px rgba(127,87,66,.6)}
.dt-mc-arrow:active{transform:translateY(0)}
#mc-prev:hover svg{transform:translateX(-2px)} #mc-next:hover svg{transform:translateX(2px)}
.dt-mc-track{position:relative;display:flex;align-items:flex-start;gap:0;padding:0 6px}
.dt-mc-trkline{position:absolute;left:var(--rail-x,12px);top:9px;width:var(--rail-w,calc(100% - 24px));height:2px;border-radius:3px;background:rgba(57,68,60,.16)}
.dt-mc-trkline::after{content:"";position:absolute;left:0;top:0;height:100%;width:var(--fill-w,0);border-radius:3px;
  background:linear-gradient(90deg,var(--brown),var(--tan));box-shadow:0 0 8px -1px rgba(127,87,66,.35);transition:width .6s var(--ease)}
.dt-mc-dot{position:relative;z-index:2;background:none;border:0;cursor:pointer;padding:0 clamp(18px,2.4vw,42px);
  display:flex;flex-direction:column;align-items:center;gap:13px}
.dt-mc-dot::before{content:"";width:11px;height:11px;border-radius:50%;background:#fff;border:1.5px solid rgba(57,68,60,.30);
  box-shadow:0 1px 3px rgba(57,68,60,.14);transition:transform .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)}
.dt-mc-dot:hover::before{border-color:var(--brown);transform:scale(1.14)}
.dt-mc-dot.active::before{background:var(--brown);border-color:var(--brown);transform:scale(1.3);
  box-shadow:0 0 0 5px rgba(127,87,66,.14),0 5px 13px -2px rgba(127,87,66,.55)}
/* inactive track labels: .74/.88 alphas (was .45/.72) — WCAG AA 4.5:1 on white (7/22) */
.dt-mc-trklab{font-family:var(--font-display);font-size:clamp(11px,.8vw,13px);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(57,68,60,.74);transition:color .35s var(--ease),font-weight .35s}
.dt-mc-dot:hover .dt-mc-trklab{color:rgba(57,68,60,.88)}
.dt-mc-dot.active .dt-mc-trklab{color:var(--forest);font-weight:700}
.dt-mc-dot:last-child:not(.active) .dt-mc-trklab{color:rgba(127,87,66,.62)}
.dt-mc-trkyear{font-family:var(--font-mono);font-size:clamp(9.5px,.62vw,11px);font-weight:600;letter-spacing:.08em;color:rgba(57,68,60,.74);margin-top:4px;transition:color .35s var(--ease)}
.dt-mc-dot.active .dt-mc-trkyear{color:var(--brown)}
/* (the "Plan your build" closer button + popover were removed 2026-07-21 per Brian) */
@media (max-width:760px){
  .dt-mc-stage{height:44vh;min-height:300px}
  .dt-mc-item{width:64vw;margin-left:-32vw}
  .dt-mc-controls{gap:12px}
  .dt-mc-dot{padding:0 14px}
}
@media (prefers-reduced-motion:reduce){ .dt-mc-item{transition:none} }

/* 2026-07-10: footer tagline as a full-width line (Emily) */
.dt-footer-tagwide{flex:1 1 100%;max-width:none;font-family:var(--font-display);font-weight:500;
  font-size:clamp(17px,1.35vw,24px);color:var(--cream);opacity:.92;margin:0 0 34px}
.dt-footer{padding-top:clamp(44px,4.5vw,72px)}

/* 2026-07-22 (Brian): the ROI grid no longer dissolves to cream; it fades to
   the space section's black so the forest band flows straight into the dark
   roadmap section (no white seam between them). */
.dt-roi{position:relative}
.dt-roi .dt-roi-fadeout{content:"";position:absolute;left:0;right:0;bottom:0;height:24vh;
  background:linear-gradient(180deg,rgba(7,11,9,0),var(--space-bg));pointer-events:none;z-index:3}

/* footer compliance badge row (2026-07-15 round: tagline sentence removed,
   HIPAA mark added; ISO slot pending a named certification) */
.dt-compliance{display:flex;align-items:center;gap:18px;margin-bottom:14px}
.dt-compliance-badge{display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:11.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:8px 14px}
.dt-compliance-badge svg{width:16px;height:16px;flex:none;color:var(--tan)}

/* mobile menu: dropdown parents are section labels, not links */
.dt-mobile .dt-mob-head{display:block;font-size:13px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg3);padding:16px 0 6px;border-bottom:1px solid var(--hairline-soft)}
.dt-navlink--parent{cursor:default}

/* ---- anchored headings clear the sticky nav ------------------------------
   Susan 7/26: the FAQ chips (and the ROI dropdown's "How Billing Works")
   scrolled the category heading to the literal top of the window, which put
   it BEHIND the 72px nav — you saw a stack of untitled accordions and the
   next category's title, and assumed you were in the wrong place. */
main [id]{scroll-margin-top:calc(var(--navH,72px) + 26px)}