/* ==========================================================================
   DIGROW WORLD — Redesign theme
   Dark editorial system. Near-black canvas, white type, controlled #EA5C1F.
   Scoped under .dw-dark so legacy pages keep their own light styling.
   ========================================================================== */

:root {
  --dw-bg: #08080a;
  --dw-bg-2: #0c0c10;
  --dw-surface: #101014;
  --dw-surface-2: #16161c;
  --dw-line: rgba(255, 255, 255, 0.09);
  --dw-line-2: rgba(255, 255, 255, 0.16);
  --dw-text: #f4f4f6;
  --dw-muted: #8b8b98;
  --dw-dim: #5c5c68;
  --dw-accent: #ea5c1f;
  --dw-accent-hi: #ff7d45;
  --dw-accent-soft: rgba(234, 92, 31, 0.14);
  --dw-accent-glow: rgba(234, 92, 31, 0.32);

  --dw-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --dw-display: "Space Grotesk", var(--dw-font);

  --dw-gutter: clamp(1.25rem, 4vw, 3rem);
  --dw-max: 1440px;
  --dw-nav-h: 76px;

  --dw-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dw-ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- Reset / base (scoped) ---------- */
.dw-dark {
  background: var(--dw-bg);
  color: var(--dw-text);
  font-family: var(--dw-font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
.dw-dark *,
.dw-dark *::before,
.dw-dark *::after { box-sizing: border-box; }
.dw-dark h1, .dw-dark h2, .dw-dark h3, .dw-dark h4, .dw-dark h5, .dw-dark h6 {
  font-family: var(--dw-display);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: var(--dw-text);
  margin: 0;
}
.dw-dark p { color: var(--dw-muted); margin: 0; }
.dw-dark a { color: inherit; text-decoration: none; }
.dw-dark img { max-width: 100%; display: block; }
.dw-dark ul { list-style: none; padding: 0; margin: 0; }
.dw-dark ::selection { background: var(--dw-accent); color: #fff; }

.dw-shell {
  width: 100%;
  max-width: var(--dw-max);
  margin-inline: auto;
  padding-inline: var(--dw-gutter);
}
.dw-sec { position: relative; padding-block: clamp(5rem, 11vw, 9.5rem); }
.dw-sec--tight { padding-block: clamp(3.5rem, 7vw, 6rem); }

/* ---------- Section ambience: grid + glow ---------- */
.dw-grid-bg::before {
  content: "";
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--dw-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--dw-line) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: 0.35;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 78%);
  pointer-events: none;
}
.dw-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}

/* ---------- Typography helpers ---------- */
.dw-eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--dw-font);
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--dw-muted);
}
.dw-eyebrow::before {
  content: ""; width: 26px; height: 1px;
  background: var(--dw-accent);
}
.dw-eyebrow.is-accent { color: var(--dw-accent); }

.dw-h2 {
  font-size: clamp(2.1rem, 5.2vw, 4.25rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
}
.dw-h2 em { font-style: normal; color: var(--dw-accent); }
.dw-h3 { font-size: clamp(1.5rem, 2.6vw, 2.15rem); letter-spacing: -0.035em; }
.dw-lead {
  font-size: clamp(0.98rem, 1.25vw, 1.1rem);
  color: var(--dw-muted);
  max-width: 56ch;
  line-height: 1.72;
}
.dw-num {
  font-family: var(--dw-display);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: -0.04em;
}
.dw-mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dw-dim);
}

/* Reveal targets start hidden only when JS is active */
.dw-js [data-dw-reveal] { opacity: 0; }

/* ---------- Buttons ---------- */
.dw-btn {
  --bg: var(--dw-accent);
  position: relative;
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.95rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--bg);
  color: #fff;
  font-family: var(--dw-font);
  font-size: 0.78rem; font-weight: 650;
  letter-spacing: 0.13em; text-transform: uppercase;
  cursor: pointer; overflow: hidden;
  transition: transform 0.4s var(--dw-ease), box-shadow 0.4s var(--dw-ease),
    background-color 0.4s var(--dw-ease), color 0.4s var(--dw-ease),
    border-color 0.4s var(--dw-ease);
  will-change: transform;
}
.dw-btn::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.28), transparent 80%);
  transform: translateX(-120%);
  transition: transform 0.7s var(--dw-ease);
}
.dw-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 34px -10px var(--dw-accent-glow); }
.dw-btn:hover::after { transform: translateX(120%); }
.dw-btn:active { transform: translateY(0); }
.dw-btn:focus-visible { outline: 2px solid var(--dw-accent-hi); outline-offset: 3px; }

.dw-btn--ghost {
  background: transparent;
  border-color: var(--dw-line-2);
  color: var(--dw-text);
}
.dw-btn--ghost:hover { border-color: var(--dw-accent); color: #fff; box-shadow: none; background: var(--dw-accent-soft); }
.dw-btn--sm { padding: 0.7rem 1.2rem; font-size: 0.7rem; }

/* Animated arrow inside buttons/links */
.dw-arrow { display: inline-block; transition: transform 0.4s var(--dw-ease); }
a:hover .dw-arrow, button:hover .dw-arrow { transform: translateX(4px); }

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
.dw-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  height: var(--dw-nav-h);
  display: flex; align-items: center;
  border-bottom: 1px solid transparent;
  transition: background-color 0.45s var(--dw-ease), backdrop-filter 0.45s var(--dw-ease),
    border-color 0.45s var(--dw-ease), height 0.45s var(--dw-ease);
}
/* Legacy (light) pages: always solid, because transparent+white text would be unreadable */
.dw-nav { background: rgba(10, 10, 12, 0.92); border-bottom-color: var(--dw-line); }
.dw-dark .dw-nav { background: transparent; border-bottom-color: transparent; }
.dw-dark .dw-nav.is-stuck {
  background: rgba(8, 8, 10, 0.72);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom-color: var(--dw-line);
  height: 66px;
}

.dw-nav__inner {
  width: 100%; max-width: var(--dw-max); margin-inline: auto;
  padding-inline: var(--dw-gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.dw-brand {
  display: inline-flex; align-items: center; gap: 0.6rem; flex-shrink: 0;
  /* Full-height tap target without changing the mark's optical size. */
  padding-block: 0.55rem;
}
.dw-brand img { height: 26px; width: auto; }
.dw-brand__txt {
  font-family: var(--dw-display);
  font-size: 0.94rem; font-weight: 700; letter-spacing: 0.02em;
  color: var(--dw-text);
}
.dw-brand__txt span { color: var(--dw-accent); }

.dw-nav__links { display: flex; align-items: center; gap: clamp(0.4rem, 1.6vw, 1.5rem); }
.dw-nav__link {
  position: relative;
  font-size: 0.82rem; font-weight: 500; letter-spacing: 0.02em;
  color: rgba(244, 244, 246, 0.72);
  /* Full-height tap target (>=44px) without changing the visual text rhythm. */
  display: inline-flex; align-items: center;
  padding: 0.85rem 0;
  transition: color 0.3s var(--dw-ease);
}
.dw-nav__link::after {
  content: "";
  position: absolute; left: 0;
  /* Sit just under the text, not at the bottom of the taller tap box. */
  bottom: 0.5rem;
  width: 100%; height: 1px;
  background: var(--dw-accent);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.45s var(--dw-ease);
}
.dw-nav__link:hover { color: var(--dw-text); }
.dw-nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
.dw-nav__link.is-active { color: var(--dw-text); }
.dw-nav__link.is-active::after { transform: scaleX(1); }
.dw-nav__cta { flex-shrink: 0; }

/* Hamburger */
.dw-burger {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--dw-line-2); border-radius: 50%;
  background: transparent; cursor: pointer;
  position: relative; flex-shrink: 0;
}
.dw-burger span {
  position: absolute; left: 50%; top: 50%;
  width: 17px; height: 1.5px; margin-left: -8.5px;
  background: var(--dw-text); border-radius: 2px;
  transition: transform 0.4s var(--dw-ease), opacity 0.25s linear;
}
.dw-burger span:nth-child(1) { transform: translateY(-5px); }
.dw-burger span:nth-child(2) { transform: translateY(0); }
.dw-burger span:nth-child(3) { transform: translateY(5px); }
.dw-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(0) rotate(45deg); }
.dw-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.dw-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(0) rotate(-45deg); }

/* ---------- Mobile overlay menu ---------- */
.dw-menu {
  position: fixed; inset: 0; z-index: 890;
  background: var(--dw-bg);
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--dw-nav-h) + 2rem) var(--dw-gutter) 2.5rem;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.75s var(--dw-ease);
  visibility: hidden;
  overflow-y: auto;
}
.dw-menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; }
.dw-menu::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 45% at 78% 12%, var(--dw-accent-soft), transparent 70%);
  pointer-events: none;
}
.dw-menu__list { position: relative; display: flex; flex-direction: column; }
.dw-menu__list li { overflow: hidden; border-bottom: 1px solid var(--dw-line); }
.dw-menu__link {
  display: flex; align-items: baseline; gap: 0.9rem;
  padding: 0.85rem 0;
  font-family: var(--dw-display);
  font-size: clamp(1.9rem, 9vw, 3rem);
  font-weight: 600; letter-spacing: -0.04em;
  color: var(--dw-text);
  transform: translateY(105%);
  transition: transform 0.7s var(--dw-ease), color 0.3s var(--dw-ease);
}
.dw-menu.is-open .dw-menu__link { transform: translateY(0); }
.dw-menu__link span {
  font-size: 0.66rem; letter-spacing: 0.16em;
  color: var(--dw-accent); font-family: var(--dw-font);
}
.dw-menu__link:hover, .dw-menu__link:focus-visible { color: var(--dw-accent); }
.dw-menu__foot {
  position: relative;
  margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1.25rem;
  opacity: 0; transition: opacity 0.5s var(--dw-ease) 0.25s;
}
.dw-menu.is-open .dw-menu__foot { opacity: 1; }
/* Mobile-menu contact + social links are plain <a> elements, so they need
   explicit vertical padding to clear a 44px touch target. */
.dw-menu__contact { font-size: 0.9rem; color: var(--dw-muted); }
.dw-menu__contact a { color: var(--dw-text); display: inline-block; padding-block: 0.4rem; }
.dw-menu__social { display: flex; gap: 0.6rem; font-size: 0.8rem; }
.dw-menu__social a {
  color: var(--dw-muted); transition: color 0.3s;
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 0.5rem;
  border: 1px solid var(--dw-line-2); border-radius: 10px;
}
.dw-menu__social a:hover { color: var(--dw-accent); }

body.dw-menu-open { overflow: hidden; }

/* Legacy Includes/style.css declares:
     html, body { height: 100%; }
     body { display:flex; flex-direction:column; min-height:100vh; margin-top:80px; }
   That flex column at a fixed height shrank the new fixed-position footer's flex
   item down to its padding (803px -> 97px), and the 80px body margin only ever
   existed to clear the old in-flow navbar. Both are obsolete now: every page
   loading this stylesheet uses the new fixed header. Reset them here, unscoped
   so all redesigned-header pages are fixed. Only layout properties are touched
   here - background and color are never set, so the legacy light pages look
   exactly as before. */
html, body { height: auto; }
body {
  display: block;
  min-height: 100vh;
  margin-top: 0;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.dw-hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding-top: calc(var(--dw-nav-h) + 2rem);
  padding-bottom: 4rem;
  /* `clip`, not `hidden`: the decorative background and noise layers are
     inset -50% and must not create page scroll, but the box must not become a
     scroll container either. The hero has no height cap beyond min-height, so
     copy can never be cut off here — it is allowed to grow past the viewport. */
  overflow: clip;
}
.dw-hero__bg {
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(58% 48% at 76% 34%, rgba(234, 92, 31, 0.2), transparent 62%),
    radial-gradient(46% 40% at 10% 78%, rgba(120, 90, 255, 0.1), transparent 65%),
    linear-gradient(180deg, #0a0a0d 0%, var(--dw-bg) 58%, #060608 100%);
}
.dw-hero__noise {
  position: absolute; inset: -50%; z-index: 1;
  pointer-events: none; opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.dw-hero__inner {
  position: relative; z-index: 3;
  display: grid;
  /* The copy column is pinned to exactly the width the copy already occupies
     (40rem), so the description and the stat row keep the line breaks they have
     today — narrowing it even 8px re-wraps the stats and makes the hero ~100px
     taller. Below ~1360px that cap stops binding, so the percentage takes over
     and keeps handing the slack to the visual column on smaller desktops.

     The 50% floor tracks the widest H1 line: "businesses." measures ~5.35em at
     8.2vw, i.e. ~44% of the viewport, so 50% leaves headroom and the H1 can
     never be clipped by a narrower column. Above the cap the H1 font-size has
     also stopped growing (capped at 7.1rem from 1385px), so the same slack
     holds all the way to ultrawide.

     The gap is deliberately tight: the ball is centred inside a stage that is
     inset from the column edges, so the VISUAL gap between the copy and the
     ball is still ~145px at 1440 — the column gap only sets how much of the
     row the stage gets to claim. */
  grid-template-columns: minmax(0, min(40rem, 50%)) minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  width: 100%;
}
.dw-hero__copy { max-width: 40rem; }
.dw-hero__eyebrow { margin-bottom: 1.5rem; }
.dw-hero__eyebrow .dw-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--dw-accent);
  box-shadow: 0 0 0 0 var(--dw-accent-glow);
  animation: dw-pulse 2.4s var(--dw-ease-io) infinite;
}
@keyframes dw-pulse {
  0% { box-shadow: 0 0 0 0 var(--dw-accent-glow); }
  70% { box-shadow: 0 0 0 10px rgba(234, 92, 31, 0); }
  100% { box-shadow: 0 0 0 0 rgba(234, 92, 31, 0); }
}

.dw-hero__title {
  font-size: clamp(2.9rem, 8.2vw, 7.1rem);
  line-height: 0.9;
  letter-spacing: -0.055em;
  font-weight: 600;
  margin-bottom: 1.5rem;
}
.dw-hero__title em { font-style: normal; color: var(--dw-accent); }
.dw-hero__line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.dw-hero__line > span { display: block; }
.dw-hero__sub { margin-bottom: 2.1rem; }
.dw-hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-bottom: clamp(2rem, 4vw, 2.75rem); }

/* ---------------------------------------------------------------------------
   HERO VERTICAL RHYTHM

   The resets above — `.dw-dark p { margin: 0 }` and `.dw-dark h1..h6
   { margin: 0 }` — are specificity (0,1,1) and silently BEAT `.dw-hero__sub`
   and `.dw-hero__title`, which are only (0,1,0). So the hero's intended
   spacing was never applied at all: the measured gap between the description
   and the CTA row was 5px instead of the intended 33.6px, which is what made
   the hero read as cramped. Same for the eyebrow above the H1.

   Re-declared here scoped to `.dw-dark` so they actually win. Only the
   margins are touched — the font-size rules in the media queries below are
   left alone, so nothing else changes.

   Each gap is a clamp() tied to the viewport rather than one fixed value, so
   the rhythm holds from 320px to ultrawide without a magic number that is
   wrong at one end. They ascend deliberately:
       eyebrow -> title -> lead -> CTAs -> stats
   so the description sits in its own breathing space before the buttons,
   and the stat block stays anchored to the bottom of the copy.
   --------------------------------------------------------------------------- */
.dw-dark .dw-hero__eyebrow { margin-bottom: clamp(1rem, 2.2vw, 1.5rem); }
.dw-dark .dw-hero__title   { margin-bottom: clamp(1.1rem, 2.4vw, 1.6rem); }
.dw-dark .dw-hero__sub     { margin-bottom: clamp(1.75rem, 4.2vw, 2.5rem); }

.dw-hero__meta {
  display: flex; flex-wrap: wrap; gap: clamp(1.25rem, 3vw, 2.75rem);
  padding-top: 1.75rem; border-top: 1px solid var(--dw-line);
}
.dw-hero__metaItem { display: flex; flex-direction: column; gap: 0.15rem; }
.dw-hero__metaNum {
  font-family: var(--dw-display); font-size: 1.5rem; font-weight: 600;
  letter-spacing: -0.04em; color: var(--dw-text);
  font-variant-numeric: tabular-nums;
}
.dw-hero__metaNum sup { font-size: 0.85em; color: var(--dw-accent); }
.dw-hero__metaLbl { font-size: 0.7rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--dw-dim); }

/* 3D stage */
/* Desktop stage.
   The ball's on-screen size is bounded by the room the six service chips need at
   the left/right extreme of the orbit, so a wider stage is the only way the
   sphere can grow. Three changes feed that width and none of them touch the
   hero copy: the grid now hands the visual column the slack the capped copy
   column used to waste, the column gap is tighter, and the stage borrows the
   right-hand page gutter (no left bleed, so the copy keeps its own alignment).
   The aspect ratio is relaxed to 1.08/1 so the stage keeps roughly the height
   it already had — the hero does not grow taller, the ball just gets more
   horizontal room to occupy. */
.dw-hero__stage {
  position: relative;
  /* +3rem puts the right edge of the stage exactly on the right page edge at
     the 1440px shell cap. */
  width: calc(100% + 3rem);
  margin-left: 0;
  aspect-ratio: 1.08 / 1;
}
/* Ultrawide: the shell is capped at 1440px, so above ~1560px the hero has empty
   page margin on the right. The ball borrows part of it, capped at 5.5rem so it
   stays a hero focal point and not a wall. */
@media (min-width: 1560px) {
  .dw-hero__stage {
    width: calc(100% + 3rem + min((100vw - 1560px) * 0.4, 5.5rem));
  }
}
.dw-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dw-hero__stageFallback {
  position: absolute; inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(255, 125, 69, 0.5), transparent 46%),
    conic-gradient(from 0deg, rgba(234, 92, 31, 0.5), transparent 42%, rgba(120, 90, 255, 0.35), transparent 70%, rgba(234, 92, 31, 0.5));
  filter: blur(6px);
  animation: dw-spin 26s linear infinite;
  opacity: 0;
  transition: opacity 0.8s var(--dw-ease);
}
.dw-hero__stage.is-fallback .dw-hero__stageFallback { opacity: 1; }
@keyframes dw-spin { to { transform: rotate(360deg); } }

/* ---- service orbit labels
   Chips are plain DOM positioned by scene3d.js with a translate + scale only.
   No rotation is ever applied, so the service names stay upright and legible
   while they travel around the sphere. Sized to sit clear of the sphere and of
   the hero copy, and small enough to never reach the stage edge. */
.dw-orbit {
  position: absolute;
  inset: 0;
  z-index: 3;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
.dw-orbit__item {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform, opacity;
  /* CSS-only default: a static hexagon ring. This is what shows if the 3D
     scene never initialises (no WebGL, blocked/404 Three.js, no JS at all), so
     the six service names are never lost. scene3d.js overwrites transform and
     opacity every frame once it takes over. */
  opacity: 1;
  transform: translate(-50%, -50%);
}
/* left/top percentages resolve against the stage (.dw-orbit is inset:0), unlike
   transform percentages which resolve against the chip's own box. */
.dw-orbit__item:nth-child(1) { left: 50%; top: 8%; }
.dw-orbit__item:nth-child(2) { left: 87%; top: 28%; }
.dw-orbit__item:nth-child(3) { left: 83%; top: 72%; }
.dw-orbit__item:nth-child(4) { left: 50%; top: 92%; }
.dw-orbit__item:nth-child(5) { left: 17%; top: 72%; }
.dw-orbit__item:nth-child(6) { left: 13%; top: 28%; }
/* Once scene3d.js drives the chips, the JS transform is the only positioning
   signal, so the hexagon's left/top must be zeroed or the two compound into a
   stage-width offset. Global scope on purpose: an earlier copy sat inside the
   max-width:1024px block and silently left every desktop width double-offset. */
.dw-hero__stage.is-orbited .dw-orbit__item { left: 0; top: 0; }
.dw-orbit__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
  padding: 0.32rem 0.5rem;
  border: 1px solid rgba(234, 92, 31, 0.30);
  border-radius: 10px;
  background: rgba(14, 14, 18, 0.72);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.34);
  color: #e9e9f0;
  /* Trimmed from 0.66rem. The widest name ("Maintenance & Security") is the
     single number that caps how big the ball can be — it is parked at the ring's
     horizontal extreme, so half its width comes straight out of the sphere's
     radius. A smaller chip buys sphere AND removes label clutter; the label
     stays comfortably readable. */
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.25;
  white-space: nowrap;
  text-decoration: none;
  pointer-events: auto;
  transition: border-color 0.3s var(--dw-ease), color 0.3s var(--dw-ease);
}
.dw-orbit__chip i { color: var(--dw-accent); font-size: 0.57rem; }
.dw-orbit__chip:hover,
.dw-orbit__chip:focus-visible {
  border-color: rgba(234, 92, 31, 0.75);
  color: #fff;
}
/* The CSS hexagon ring above is the no-JS / no-WebGL default, so no extra
   fallback class is required. */

.dw-hero__scroll {
  position: absolute; left: 50%; bottom: 1.75rem; z-index: 4;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--dw-dim);
}
.dw-hero__scrollBar {
  width: 1px; height: 46px;
  background: linear-gradient(var(--dw-accent), transparent);
  position: relative; overflow: hidden;
}
.dw-hero__scrollBar::after {
  content: ""; position: absolute; inset: 0;
  background: var(--dw-text);
  animation: dw-scroll 2s var(--dw-ease-io) infinite;
}
@keyframes dw-scroll {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.dw-marquee {
  position: relative;
  border-block: 1px solid var(--dw-line);
  padding-block: 1.15rem;
  overflow: hidden;
  background: var(--dw-bg-2);
}
.dw-marquee__track { display: flex; width: max-content; animation: dw-marquee 38s linear infinite; }
.dw-marquee:hover .dw-marquee__track { animation-play-state: paused; }
.dw-marquee__group { display: flex; align-items: center; gap: clamp(2rem, 5vw, 4rem); padding-right: clamp(2rem, 5vw, 4rem); }
.dw-marquee__item {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--dw-display);
  font-size: 0.9rem; font-weight: 500; letter-spacing: 0.01em;
  color: var(--dw-dim); white-space: nowrap;
  transition: color 0.3s;
}
.dw-marquee__item:hover { color: var(--dw-text); }
.dw-marquee__item::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--dw-accent); }
@keyframes dw-marquee { to { transform: translateX(-50%); } }

/* ==========================================================================
   SECTION HEAD
   ========================================================================== */
.dw-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.dw-head__t { display: flex; flex-direction: column; gap: 1.1rem; }
.dw-head--center { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.dw-head--center .dw-lead { margin-inline: auto; }

/* ==========================================================================
   SERVICES — editorial index rows
   ========================================================================== */
/* The row's hover wash deliberately bleeds 1.5rem past the content edge into
   the shell gutter. `clip` (not `hidden`) contains that bleed without turning
   the list into a scroll container, and without a fallback it would push the
   document 24px wider than the viewport on phones. */
.dw-svc { border-top: 1px solid var(--dw-line); overflow-x: clip; }
.dw-svc__row {
  position: relative;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1.15fr) minmax(0, 1.5fr) 3rem;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  padding: clamp(1.6rem, 3vw, 2.4rem) 0;
  border-bottom: 1px solid var(--dw-line);
  isolation: isolate;
  transition: padding-left 0.5s var(--dw-ease);
}
/* hover wash */
.dw-svc__row::before {
  content: "";
  position: absolute; inset: 0 -1.5rem; z-index: -1;
  background: linear-gradient(90deg, var(--dw-accent-soft), transparent 62%);
  opacity: 0; transition: opacity 0.5s var(--dw-ease);
}
.dw-svc__row:hover::before { opacity: 1; }
.dw-svc__row:hover { padding-left: 1.1rem; }
.dw-svc__idx {
  font-family: var(--dw-display);
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em;
  color: var(--dw-dim); font-variant-numeric: tabular-nums;
  transition: color 0.4s var(--dw-ease);
}
.dw-svc__row:hover .dw-svc__idx { color: var(--dw-accent); }
.dw-svc__name {
  font-size: clamp(1.35rem, 3.2vw, 2.35rem);
  letter-spacing: -0.04em; line-height: 1.02;
  transition: transform 0.5s var(--dw-ease), color 0.4s var(--dw-ease);
}
.dw-svc__row:hover .dw-svc__name { transform: translateX(8px); }
.dw-svc__name span { color: var(--dw-accent); }
.dw-svc__desc { font-size: 0.94rem; line-height: 1.68; color: var(--dw-muted); }
.dw-svc__go {
  justify-self: end;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--dw-line-2);
  display: grid; place-items: center;
  color: var(--dw-text);
  transition: background-color 0.45s var(--dw-ease), border-color 0.45s var(--dw-ease),
    transform 0.45s var(--dw-ease), color 0.45s var(--dw-ease);
}
.dw-svc__row:hover .dw-svc__go {
  background: var(--dw-accent); border-color: var(--dw-accent);
  color: #fff; transform: rotate(-45deg);
}

/* Callout strip */
.dw-callouts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--dw-line);
  border: 1px solid var(--dw-line); border-radius: 14px; overflow: hidden;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.dw-callout {
  background: var(--dw-bg-2);
  padding: clamp(1.4rem, 2.5vw, 2.1rem);
  display: flex; flex-direction: column; gap: 0.7rem;
  transition: background-color 0.45s var(--dw-ease);
}
.dw-callout:hover { background: var(--dw-surface-2); }
.dw-callout i { color: var(--dw-accent); font-size: 1.05rem; }
.dw-callout h3 { font-size: 1.02rem; letter-spacing: -0.02em; }
.dw-callout p { font-size: 0.87rem; line-height: 1.6; }

/* ==========================================================================
   DIGROW SPACES
   ========================================================================== */
.dw-spaces { background: var(--dw-bg-2); border-block: 1px solid var(--dw-line); overflow: hidden; }
.dw-spaces__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2.5rem, 6vw, 5rem); align-items: center;
}
.dw-spaces__badge {
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.5rem 1rem 0.5rem 0.55rem;
  border: 1px solid var(--dw-line-2); border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dw-muted);
}
.dw-spaces__badge img { height: 22px; width: auto; }
.dw-spaces__badge b { color: var(--dw-text); font-weight: 650; }
.dw-spaces__title {
  font-size: clamp(2rem, 4.6vw, 3.7rem);
  line-height: 0.98; letter-spacing: -0.045em;
  margin: 1.4rem 0 1.2rem;
}
.dw-spaces__title em { font-style: normal; color: var(--dw-accent); }
.dw-spaces__list { margin-top: 2rem; display: flex; flex-direction: column; }
.dw-spaces__list li {
  display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: 0.9rem;
  padding: 0.95rem 0; border-top: 1px solid var(--dw-line);
  align-items: start;
}
.dw-spaces__list li:last-child { border-bottom: 1px solid var(--dw-line); }
.dw-spaces__list i { color: var(--dw-accent); margin-top: 0.28rem; font-size: 0.85rem; }
.dw-spaces__list h4 { font-size: 0.98rem; letter-spacing: -0.015em; margin-bottom: 0.2rem; }
.dw-spaces__list p { font-size: 0.86rem; line-height: 1.6; }

/* Device mockup */
.dw-device { position: relative; display: grid; place-items: center; min-height: clamp(340px, 46vw, 560px); }
.dw-device__glow {
  position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--dw-accent-glow), transparent 66%);
  filter: blur(52px);
}
.dw-device__phone {
  position: relative; z-index: 2;
  width: clamp(180px, 24vw, 250px);
  aspect-ratio: 9 / 18.5;
  border-radius: 34px;
  border: 1px solid var(--dw-line-2);
  background: linear-gradient(165deg, #16161c, #0a0a0d 62%);
  padding: 9px;
  box-shadow: 0 44px 90px -34px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: rotate(-7deg);
}
.dw-device__screen {
  width: 100%; height: 100%;
  border-radius: 26px; overflow: hidden;
  background: linear-gradient(180deg, #101016, #08080b);
  padding: 16px 12px;
  display: flex; flex-direction: column; gap: 9px;
}
.dw-device__notch {
  width: 42%; height: 5px; border-radius: 3px;
  background: rgba(255, 255, 255, 0.14);
  margin: 0 auto 6px; flex-shrink: 0;
}
.dw-device__bar { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); }
.dw-device__bar--w60 { width: 60%; } .dw-device__bar--w40 { width: 40%; }
.dw-device__hero { height: 84px; border-radius: 12px; background: linear-gradient(135deg, rgba(234, 92, 31, 0.55), rgba(120, 90, 255, 0.28)); }
.dw-device__card { height: 46px; border-radius: 10px; border: 1px solid var(--dw-line); background: rgba(255, 255, 255, 0.035); }
.dw-device__cardAccent { border-color: rgba(234, 92, 31, 0.42); background: var(--dw-accent-soft); }

.dw-device__float {
  position: absolute; z-index: 3;
  border: 1px solid var(--dw-line-2);
  background: rgba(14, 14, 18, 0.86);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-radius: 12px; padding: 0.8rem 0.95rem;
  display: flex; align-items: center; gap: 0.65rem;
  box-shadow: 0 22px 48px -20px rgba(0, 0, 0, 0.9);
}
.dw-device__float i { color: var(--dw-accent); font-size: 0.9rem; }
.dw-device__float b { display: block; font-size: 0.8rem; font-weight: 600; color: var(--dw-text); letter-spacing: -0.01em; }
.dw-device__float small { display: block; font-size: 0.66rem; color: var(--dw-dim); letter-spacing: 0.02em; }
.dw-device__float--a { top: 8%; right: -4%; }
.dw-device__float--b { bottom: 16%; left: -7%; }
.dw-device__float--c { bottom: 2%; right: 4%; }

/* ==========================================================================
   PORTFOLIO
   ========================================================================== */
.dw-work__list { display: flex; flex-direction: column; gap: clamp(1.5rem, 3vw, 2.5rem); }
.dw-work {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.dw-work:nth-child(even) .dw-work__media { order: 2; }
.dw-work__media {
  position: relative;
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--dw-line);
  background: var(--dw-surface);
  aspect-ratio: 16 / 11;
}
.dw-work__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--dw-ease), filter 0.6s var(--dw-ease);
  filter: saturate(0.85) contrast(1.03);
}
.dw-work:hover .dw-work__media img { transform: scale(1.055); filter: saturate(1) contrast(1.06); }
.dw-work__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(8, 8, 10, 0.72));
  pointer-events: none;
}
.dw-work__tag {
  position: absolute; top: 1rem; left: 1rem; z-index: 2;
  padding: 0.35rem 0.8rem; border-radius: 999px;
  background: rgba(8, 8, 10, 0.72); border: 1px solid var(--dw-line-2);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dw-text);
}
.dw-work__idx {
  position: absolute; right: 1rem; bottom: 0.6rem; z-index: 2;
  font-family: var(--dw-display); font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 600; letter-spacing: -0.06em; line-height: 1;
  color: rgba(255, 255, 255, 0.09);
}
.dw-work__body { display: flex; flex-direction: column; gap: 1.05rem; align-items: flex-start; }
.dw-work__title {
  font-size: clamp(1.5rem, 3vw, 2.35rem);
  letter-spacing: -0.04em; line-height: 1.03;
}
.dw-work__meta { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.dw-work__chip {
  padding: 0.3rem 0.7rem; border-radius: 999px;
  border: 1px solid var(--dw-line); background: rgba(255, 255, 255, 0.025);
  font-size: 0.68rem; letter-spacing: 0.04em; color: var(--dw-muted);
}
.dw-work__desc { font-size: 0.95rem; line-height: 1.7; }
.dw-work__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.4rem; }

.dw-work__reveal { clip-path: inset(0 0 100% 0); }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.dw-about__grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem); align-items: center;
}
.dw-about__media { position: relative; }
.dw-about__frame {
  position: relative; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--dw-line);
  aspect-ratio: 4 / 3.4;
  background: var(--dw-surface);
}
.dw-about__frame img { width: 100%; height: 100%; object-fit: cover; }
.dw-about__badge {
  position: absolute; right: -1rem; bottom: -1.5rem;
  background: var(--dw-accent); color: #fff;
  border-radius: 14px; padding: 1.1rem 1.4rem;
  box-shadow: 0 24px 54px -20px var(--dw-accent-glow);
}
.dw-about__badge b {
  display: block; font-family: var(--dw-display);
  font-size: 1.9rem; font-weight: 600; letter-spacing: -0.04em; line-height: 1;
}
.dw-about__badge span { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.9; }

.dw-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--dw-line);
  border: 1px solid var(--dw-line); border-radius: 14px; overflow: hidden;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.dw-stat { background: var(--dw-bg-2); padding: clamp(1.3rem, 2.4vw, 1.9rem); text-align: center; }
.dw-stat b {
  display: block; font-family: var(--dw-display);
  font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 600;
  letter-spacing: -0.045em; line-height: 1; color: var(--dw-text);
  font-variant-numeric: tabular-nums;
}
.dw-stat span {
  display: block; margin-top: 0.5rem;
  font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dw-dim);
}

/* ---------------------------------------------------------------------------
   FOUNDER — single premium 3D presentation.

   The markup on about.php is one .dw-founder card, which replaced a previous
   multi-person team grid (its CSS and data array have both been removed).
   Visual language is taken from the Digrow World
   product pages, bulk-link-opener.php and bulk-link-generator.php, so this
   reads as part of the same ecosystem rather than a Bootstrap profile card:

     dark surface   #212431        (their --dark token)
     brand orange   #EA5C1F        (their --orange token)
     card radius    18px           (generator's radius; opener uses 14px)
     rest shadow    0 15px 45px rgba(33,36,49,.08)   (generator)
     hover shadow   0 10px 30px rgba(33,36,49,.10)   (opener)
     orange glow    0 10px 25px rgba(234,92,31,.25)  (their primary button)
     focus ring     0 0 0 3px rgba(234,92,31,.12)    (their input focus)
     accent rule    4px solid #EA5C1F                (their info callouts)
     easing         .3s ease                        (their card transition)

   Everything below is progressive enhancement: the card, the name and the
   tagline are plain static markup. The 3D layers are aria-hidden decoration
   and are positioned BEHIND the content, so no decorative element can ever
   cover the founder's name at any viewport.
   --------------------------------------------------------------------------- */
.dw-founder-sec { position: relative; }

.dw-founder {
  position: relative;
  margin-top: clamp(2rem, 4vw, 3rem);
  /* isolate keeps the 3D transforms from creating a stacking context that
     lets a decorative layer escape over the text below it */
  isolation: isolate;
}

.dw-founder__card {
  position: relative;
  z-index: 2;                 /* above every decorative layer */
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  align-items: center;
  gap: clamp(1.5rem, 3.5vw, 3.25rem);
  padding: clamp(1.5rem, 3vw, 2.75rem);
  border: 1px solid var(--dw-line);
  border-radius: 18px;
  background:
    linear-gradient(155deg, rgba(234, 92, 31, 0.07), transparent 42%),
    var(--dw-bg-2);
  box-shadow: 0 15px 45px rgba(33, 36, 49, 0.08);
  transform-style: preserve-3d;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.dw-founder__card:hover {
  border-color: rgba(234, 92, 31, 0.42);
  box-shadow: 0 10px 30px rgba(33, 36, 49, 0.10), 0 0 0 1px rgba(234, 92, 31, 0.10);
}

/* ---- portrait: rounded square with an orange ring, matching their card geometry */
.dw-founder__portrait {
  position: relative;
  border-radius: 18px;
  padding: 6px;
  background: linear-gradient(150deg, rgba(234, 92, 31, 0.85), rgba(234, 92, 31, 0.08) 55%, transparent);
  box-shadow: 0 10px 25px rgba(234, 92, 31, 0.18);
}
.dw-founder__portraitInner {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #212431;
  aspect-ratio: 1 / 1;
}
.dw-founder__portraitInner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(0.35) contrast(1.04);
  transition: filter 0.6s var(--dw-ease), transform 0.9s var(--dw-ease);
}
.dw-founder__card:hover .dw-founder__portraitInner img { filter: grayscale(0); transform: scale(1.05); }

/* ---- body */
.dw-founder__label {
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dw-accent);
  font-weight: 600;
}
.dw-founder__name {
  font-family: var(--dw-display);
  font-size: clamp(1.9rem, 4.6vw, 3.1rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.02;
  color: var(--dw-text);
  margin: 0.4rem 0 0;
  /* a long name must never push the card wide on a 320px screen */
  overflow-wrap: anywhere;
}
.dw-founder__role {
  font-size: 0.95rem;
  color: var(--dw-muted);
  margin-top: 0.5rem;
}
.dw-founder__tagline {
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  line-height: 1.6;
  color: var(--dw-text);
  margin-top: 1.1rem;
  padding-left: 1rem;
  /* their info-callout accent rule */
  border-left: 4px solid var(--dw-accent);
  border-radius: 6px;
}

.dw-founder__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 0.9rem clamp(1rem, 2vw, 1.75rem);
  margin: 1.5rem 0 0;
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--dw-line);
}
.dw-founder__facts dt {
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dw-dim);
}
.dw-founder__facts dd {
  margin: 0.3rem 0 0;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--dw-text);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.dw-founder__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.6rem;
}
.dw-founder__actions .dw-btn { box-shadow: 0 10px 25px rgba(234, 92, 31, 0.22); }
.dw-founder__actions .dw-btn--ghost { box-shadow: none; }

/* ---- decorative 3D layers: all behind the card, none interactive.

   These must never widen the document. Two rules follow from that:
     - the glow does NOT bleed horizontally (`inset: ... 0 auto 0`). A -6%
       horizontal inset scaled with the viewport and pushed scrollWidth past
       the viewport by 12-42px on every width from 768px up.
     - the shapes overhang only VERTICALLY (above/below the card), never to
       the left or right, because the card is nearly as wide as the shell and
       there is no gutter left to peek into.
   Vertical overhang is safe: the page scrolls vertically by design. */
.dw-founder__glow {
  position: absolute;
  inset: -12% 0 auto 0;
  height: 78%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 62% at 26% 34%, rgba(234, 92, 31, 0.20), transparent 68%),
    radial-gradient(48% 56% at 78% 70%, rgba(120, 90, 255, 0.13), transparent 70%);
  filter: blur(38px);
}
.dw-founder__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(72% 68% at 50% 46%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(72% 68% at 50% 46%, #000 30%, transparent 78%);
}
.dw-founder__shape {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  display: block;
  border: 1px solid rgba(234, 92, 31, 0.30);
  border-radius: 14px;
  background: linear-gradient(150deg, rgba(234, 92, 31, 0.16), transparent 65%);
  will-change: transform;
}
/* vertical overhang only — see the note above */
.dw-founder__shape--a { width: 92px; height: 92px; top: -30px;   right: 12%; transform: rotate(14deg); }
.dw-founder__shape--b { width: 54px; height: 54px; bottom: -22px; left: 14%;  transform: rotate(-11deg); border-radius: 50%; }
.dw-founder__shape--c { width: 34px; height: 34px; top: 46%;      right: 5%;  transform: rotate(22deg); border-radius: 8px; }


/* ==========================================================================
   WHY  (feature bento)
   ========================================================================== */
.dw-why { border-top: 1px solid var(--dw-line); }
.dw-why__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.75rem, 1.6vw, 1.1rem); }
.dw-why__card {
  position: relative; overflow: hidden;
  border: 1px solid var(--dw-line); border-radius: 14px;
  background: var(--dw-bg-2);
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  display: flex; flex-direction: column; gap: 0.85rem;
  min-height: 220px;
  transition: border-color 0.5s var(--dw-ease), background-color 0.5s var(--dw-ease), transform 0.5s var(--dw-ease);
}
.dw-why__card::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 70% at 50% 0%, var(--dw-accent-soft), transparent 68%);
  opacity: 0; transition: opacity 0.55s var(--dw-ease);
}
.dw-why__card:hover { border-color: rgba(234, 92, 31, 0.4); transform: translateY(-4px); }
.dw-why__card:hover::before { opacity: 1; }
.dw-why__icon {
  position: relative;
  width: 42px; height: 42px; border-radius: 11px;
  display: grid; place-items: center;
  border: 1px solid var(--dw-line-2);
  color: var(--dw-accent); font-size: 1rem;
  transition: background-color 0.5s var(--dw-ease), border-color 0.5s var(--dw-ease), color 0.5s var(--dw-ease);
}
.dw-why__card:hover .dw-why__icon { background: var(--dw-accent); border-color: var(--dw-accent); color: #fff; }
.dw-why__card h3 { position: relative; font-size: 1.16rem; letter-spacing: -0.025em; }
.dw-why__card p { position: relative; font-size: 0.88rem; line-height: 1.65; }

/* ==========================================================================
   PROCESS — pinned scroll timeline
   ========================================================================== */
.dw-process { background: var(--dw-bg-2); border-block: 1px solid var(--dw-line); }
.dw-process__pin { position: relative; }
.dw-process__head { text-align: center; max-width: 46rem; margin: 0 auto clamp(2.5rem, 5vw, 4rem); }
.dw-process__head .dw-eyebrow { justify-content: center; }
.dw-process__head .dw-eyebrow::after { content: ""; width: 26px; height: 1px; background: var(--dw-accent); }
.dw-process__steps { display: flex; flex-direction: column; }
.dw-step {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: start;
  padding: clamp(1.1rem, 2.2vw, 1.7rem) 0;
  border-top: 1px solid var(--dw-line);
  position: relative;
}
.dw-step:last-child { border-bottom: 1px solid var(--dw-line); }
.dw-step__idx {
  font-family: var(--dw-display); font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  font-weight: 600; letter-spacing: -0.05em; line-height: 1;
  color: var(--dw-dim);
  transition: color 0.5s var(--dw-ease);
  font-variant-numeric: tabular-nums;
}
.dw-step.is-on .dw-step__idx { color: var(--dw-accent); }
.dw-step__title { font-size: clamp(1.15rem, 2.3vw, 1.65rem); letter-spacing: -0.03em; }
.dw-step__text { font-size: 0.92rem; line-height: 1.68; }
.dw-process__bar {
  position: absolute; left: 0; top: 0; width: 100%; height: 2px;
  background: var(--dw-line); overflow: hidden;
}
.dw-process__barFill { height: 100%; width: 0%; background: var(--dw-accent); box-shadow: 0 0 14px var(--dw-accent-glow); }

/* ==========================================================================
   TECHNOLOGY
   ========================================================================== */
.dw-tech__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: clamp(0.6rem, 1.4vw, 0.9rem);
}
.dw-tech {
  display: flex; flex-direction: column; gap: 0.6rem;
  border: 1px solid var(--dw-line); border-radius: 12px;
  background: var(--dw-bg-2);
  padding: 1.15rem 1.25rem;
  transition: border-color 0.45s var(--dw-ease), background-color 0.45s var(--dw-ease), transform 0.45s var(--dw-ease);
}
.dw-tech:hover { border-color: rgba(234, 92, 31, 0.42); background: var(--dw-surface-2); transform: translateY(-4px); }
.dw-tech__name { font-family: var(--dw-display); font-size: 0.98rem; font-weight: 600; letter-spacing: -0.015em; }
.dw-tech__use { font-size: 0.75rem; color: var(--dw-dim); line-height: 1.5; }
.dw-tech__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dw-accent); opacity: 0.5; transition: opacity 0.4s; }
.dw-tech:hover .dw-tech__dot { opacity: 1; box-shadow: 0 0 10px var(--dw-accent-glow); }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.dw-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.75rem, 1.8vw, 1.25rem); }
.dw-quote {
  border: 1px solid var(--dw-line); border-radius: 14px;
  background: var(--dw-bg-2);
  padding: clamp(1.5rem, 2.6vw, 2rem);
  display: flex; flex-direction: column; gap: 1.1rem;
  transition: border-color 0.5s var(--dw-ease), transform 0.5s var(--dw-ease);
}
.dw-quote:hover { border-color: var(--dw-line-2); transform: translateY(-5px); }
.dw-quote__stars { color: var(--dw-accent); font-size: 0.82rem; letter-spacing: 0.18em; }
.dw-quote__text { font-size: 1rem; line-height: 1.68; color: var(--dw-text); flex: 1; }
.dw-quote__by { display: flex; align-items: center; gap: 0.8rem; padding-top: 1rem; border-top: 1px solid var(--dw-line); }
.dw-quote__avatar {
  width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  border: 1px solid var(--dw-line-2); filter: grayscale(1);
}
.dw-quote__by b { display: block; font-size: 0.88rem; font-weight: 600; letter-spacing: -0.01em; }
.dw-quote__by span { display: block; font-size: 0.74rem; color: var(--dw-dim); }

/* ==========================================================================
   CONTACT — form contract preserved
   ========================================================================== */
.dw-contact__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.dw-contact__info { display: flex; flex-direction: column; gap: 1.4rem; }
.dw-contact__row { display: flex; gap: 1rem; align-items: flex-start; }
.dw-contact__ico {
  width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
  border: 1px solid var(--dw-line-2); display: grid; place-items: center;
  color: var(--dw-accent); font-size: 0.9rem;
  background: rgba(255, 255, 255, 0.02);
}
.dw-contact__row b { display: block; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dw-dim); margin-bottom: 0.25rem; }
/* Primary contact actions - give them a real 44px touch target. */
.dw-contact__row a, .dw-contact__row p {
  font-size: 0.96rem; color: var(--dw-text); line-height: 1.5;
  display: inline-flex; align-items: center; min-height: 44px;
}
.dw-contact__row a:hover { color: var(--dw-accent); }

/* Honeypot: keep the field in the DOM and submittable so spam bots fill it,
   but take it off-screen for humans. Not display:none, which some filters skip. */
.dw-hp {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.dw-form {
  border: 1px solid var(--dw-line); border-radius: 16px;
  background: var(--dw-bg-2);
  padding: clamp(1.5rem, 3.4vw, 2.5rem);
}
.dw-field { position: relative; margin-bottom: 1.6rem; }
.dw-field__label {
  display: block; margin-bottom: 0.55rem;
  font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dw-dim);
}
/* Focus ring drawn with border + accent glow, not a shadow-heavy "glass" box */
.dw-form .form-control {
  width: 100%;
  background: transparent;
  border: 1px solid var(--dw-line-2);
  border-radius: 10px;
  color: var(--dw-text);
  font-family: var(--dw-font);
  font-size: 0.95rem;
  padding: 0.9rem 1rem;
  transition: border-color 0.35s var(--dw-ease), background-color 0.35s var(--dw-ease);
  box-shadow: none;
}
.dw-form .form-control::placeholder { color: var(--dw-dim); }
.dw-form .form-control:focus {
  background: rgba(255, 255, 255, 0.022);
  border-color: var(--dw-accent);
  box-shadow: 0 0 0 3px rgba(234, 92, 31, 0.14);
  color: var(--dw-text);
  outline: none;
}
.dw-form textarea.form-control { resize: vertical; min-height: 120px; }
.dw-form .g-recaptcha { margin-top: 0.4rem; }
.dw-form__foot { margin-top: 1.6rem; display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.dw-footer {
  position: relative; overflow: hidden;
  background: #06060a;
  border-top: 1px solid var(--dw-line);
  padding-top: clamp(3.5rem, 8vw, 6rem);
}
.dw-footer__cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--dw-line);
}
.dw-footer__ctaTitle {
  font-size: clamp(2rem, 5.4vw, 4.2rem);
  line-height: 0.96; letter-spacing: -0.045em;
}
.dw-footer__ctaTitle em { font-style: normal; color: var(--dw-accent); }
.dw-footer__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}
.dw-footer__brand p { font-size: 0.88rem; line-height: 1.7; max-width: 34ch; margin-top: 1rem; }
.dw-footer__social { display: flex; gap: 0.6rem; margin-top: 1.4rem; }
.dw-footer__social a {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--dw-line-2);
  display: grid; place-items: center;
  color: var(--dw-muted); font-size: 0.85rem;
  transition: background-color 0.4s var(--dw-ease), border-color 0.4s var(--dw-ease), color 0.4s var(--dw-ease), transform 0.4s var(--dw-ease);
}
.dw-footer__social a:hover { background: var(--dw-accent); border-color: var(--dw-accent); color: #fff; transform: translateY(-3px); }
.dw-footer__h { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dw-dim); margin-bottom: 1.1rem; }
/* gap trimmed to keep the same visual rhythm after the links gain vertical
   padding for a >=24px touch target (WCAG 2.5.8) */
.dw-footer__links { display: flex; flex-direction: column; gap: 0.15rem; }
.dw-footer__links a {
  font-size: 0.88rem; color: var(--dw-muted);
  transition: color 0.3s, transform 0.35s var(--dw-ease);
  display: inline-block;
  padding-block: 0.42rem;
}
.dw-footer__links a:hover { color: var(--dw-accent); transform: translateX(4px); }
.dw-footer__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: 1.5rem;
  border-top: 1px solid var(--dw-line);
  font-size: 0.78rem; color: var(--dw-dim);
}
.dw-footer__bar a { display: inline-block; padding-block: 0.45rem; }
.dw-footer__bar a:hover { color: var(--dw-accent); }

/* ==========================================================================
   CUSTOM CURSOR
   ========================================================================== */
.dw-cursor { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; display: none; }
.dw-cursor__dot {
  position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px;
  border-radius: 50%; background: var(--dw-accent);
}
.dw-cursor__ring {
  position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 50%; border: 1px solid rgba(234, 92, 31, 0.55);
  display: grid; place-items: center;
  font-size: 0.5rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--dw-accent);
  transition: width 0.4s var(--dw-ease), height 0.4s var(--dw-ease),
    margin 0.4s var(--dw-ease), background-color 0.4s var(--dw-ease),
    border-color 0.4s var(--dw-ease), opacity 0.3s;
}
.dw-cursor__ring span { opacity: 0; transition: opacity 0.25s; }
@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
  .dw-cursor.is-on { display: block; }
  .dw-cursor.is-hover .dw-cursor__ring { width: 58px; height: 58px; margin: -29px 0 0 -29px; background: rgba(234, 92, 31, 0.12); }
  .dw-cursor.is-hover .dw-cursor__ring span { opacity: 1; }
  .dw-dark a, .dw-dark button, .dw-dark [role="button"] { cursor: none; }
}

/* ==========================================================================
   SCROLL PROGRESS
   ========================================================================== */
.dw-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--dw-accent), var(--dw-accent-hi));
  z-index: 950; pointer-events: none;
}

/* ==========================================================================
   REVEAL UTILITIES
   ========================================================================== */
.dw-line-mask {
  display: block;
  overflow: hidden;
  padding-top: 0.16em;
  padding-bottom: 0.2em;
  margin-top: -0.16em;
  margin-bottom: -0.2em;
}
.dw-line-mask > span { display: block; }
[data-dw-reveal] { will-change: transform, opacity; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1199px) {
  .dw-head { grid-template-columns: 1fr; align-items: start; }
  .dw-about__grid { gap: 3rem; }
}

@media (max-width: 1024px) {
  :root { --dw-nav-h: 68px; }
  .dw-nav__links, .dw-nav__cta { display: none; }
  .dw-burger { display: block; }

  /* ---------------------------------------------------------------------
     Hero, single column. The 3D stage is ordered FIRST so the visual leads
     and the copy follows; `order` is used instead of reordering the DOM so
     the H1 stays the first thing a screen reader and a crawler reach, and so
     the desktop source order is untouched.

     `min-height: auto` + `align-items: start` are the two things that let the
     hero grow with its content. `min-height: 100svh` on a short landscape
     phone (e.g. 812x375) combined with `align-items: center` is what pushes
     copy above the top edge, and `overflow: hidden` then eats it.
     --------------------------------------------------------------------- */
  .dw-hero {
    min-height: auto;
    align-items: start;
    overflow: clip;
    padding-top: calc(var(--dw-nav-h) + 1.5rem);
    padding-bottom: 4.5rem;
  }
  .dw-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.75rem, 6vw, 2.5rem);
  }
  .dw-hero__stage {
    order: 1;
    /* `justify-self: center` rather than a negative margin: the stage is up to
       1rem wider than its grid column, and centring it that way bleeds evenly
       into BOTH page gutters (so the ball grows on a phone too) without
       shifting the whole thing off-centre when the 560px cap binds. */
    justify-self: center;
    margin-inline: 0;
    width: min(calc(100% + 1rem), 560px);
    aspect-ratio: 1 / 0.92;
  }
  /* Short landscape phones (812x375, 667x320): the hero is already several
     screens tall there, so growing the stage only pushes the service labels
     further below the fold. Hold the previous 500px cap instead. */
  @media (max-height: 560px) and (orientation: landscape) {
    .dw-hero__stage { width: min(100%, 500px); }
  }
  /* Service chips: smaller and tighter on phones so six orbiting labels stay
     inside the stage, clear of each other and of the hero copy below it. */
.dw-orbit__chip {

    padding: 0.25rem 0.4rem;
    gap: 0.28rem;
    font-size: 0.53rem;
    border-radius: 8px;
  }
  .dw-orbit__chip i { font-size: 0.5rem; }
  /* 320px: the widest name ("Maintenance & Security") still overhangs a ~280px
     stage by a few px, because the ring is pinned at the sphere edge. One more
     step down clears it. Must live AFTER the max-width:1024px block or that
     block wins on order at equal specificity. */
  @media (max-width: 359px) {
    .dw-orbit__chip { font-size: 0.48rem; padding: 0.22rem 0.34rem; gap: 0.24rem; }
    .dw-orbit__chip i { font-size: 0.45rem; }
  }
  /* Tighter fallback hexagon — at 320px a wide ring would push the chips off
     the stage edges. The vertical gaps are what keep them from colliding. */
  .dw-orbit__item:nth-child(1) { left: 50%; top: 7%; }
  .dw-orbit__item:nth-child(2) { left: 79%; top: 29%; }
  .dw-orbit__item:nth-child(3) { left: 75%; top: 71%; }
  .dw-orbit__item:nth-child(4) { left: 50%; top: 93%; }
  .dw-orbit__item:nth-child(5) { left: 25%; top: 71%; }
  .dw-orbit__item:nth-child(6) { left: 21%; top: 29%; }
  .dw-hero__copy { max-width: 100%; order: 2; }
  /* No fixed height anywhere, so nothing can be cut off. */
  .dw-hero__copy > * { max-width: 100%; }
  .dw-hero__scroll { display: none; }
  .dw-spaces__grid { grid-template-columns: 1fr; }
  .dw-device { min-height: 400px; order: -1; }
  .dw-work, .dw-work:nth-child(even) .dw-work__media { grid-template-columns: 1fr; order: 0; }
  .dw-work__media { order: -1; }
  .dw-about__grid { grid-template-columns: 1fr; }
  .dw-why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dw-contact__grid { grid-template-columns: minmax(0, 1fr); }
  .dw-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dw-svc__row { grid-template-columns: 3.25rem minmax(0, 1fr) 2.75rem; }
  .dw-svc__desc { grid-column: 2 / -1; }
}

@media (max-width: 767px) {
  .dw-hero__title { font-size: clamp(2.6rem, 11.5vw, 3.6rem); }
  .dw-hero__meta { gap: 1.25rem 1.75rem; }
  .dw-callouts { grid-template-columns: 1fr; }
  .dw-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Founder: stack to one column and shrink the portrait, but keep the
     premium treatment — ring, glow and radius all stay. */
  .dw-founder__card { grid-template-columns: minmax(0, 1fr); }
  .dw-founder__portrait { max-width: 260px; }
  /* Decorative shapes that overhang the card would sit outside the viewport
     on a narrow screen, so pull them in rather than letting them clip. */
  .dw-founder__shape--a { right: 8%;  top: -22px; width: 64px; height: 64px; }
  .dw-founder__shape--b { left: 8%;  bottom: -16px; width: 40px; height: 40px; }
  .dw-founder__shape--c { right: 4%; width: 26px; height: 26px; }
  .dw-founder__glow { inset: -8% 0 auto 0; height: 62%; }
  .dw-quotes { grid-template-columns: 1fr; }
  .dw-why__grid { grid-template-columns: 1fr; }
  .dw-why__card { min-height: 0; }
  .dw-footer__cols { grid-template-columns: 1fr; }
  .dw-footer__cta { flex-direction: column; align-items: flex-start; }
  .dw-step { grid-template-columns: 3.5rem minmax(0, 1fr); }
  .dw-step__text { grid-column: 2; }
  .dw-svc__row { grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem; gap: 0.85rem; }
  .dw-svc__go { width: 44px; height: 44px; }
  .dw-about__badge { right: 0.75rem; bottom: -1rem; padding: 0.85rem 1.1rem; }
  .dw-about__badge b { font-size: 1.5rem; }
  .dw-device__float--a { right: 0; }
  .dw-device__float--b { left: 0; }
  .dw-marquee__track { animation-duration: 26s; }
}

@media (max-width: 430px) {
  .dw-hero__actions { flex-direction: column; align-items: stretch; }
  .dw-hero__actions .dw-btn { justify-content: center; width: 100%; }
  .dw-brand__txt { font-size: 0.86rem; }
  .dw-tech__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dw-device { min-height: 330px; }
  .dw-form { padding: 1.25rem; }
  /* reCAPTCHA renders at a fixed 304px and cannot reflow. Below ~380px it no
     longer fits the form's content box and would otherwise widen the whole
     contact grid, so scale it to fit. 0.78 x 304 = 237px, which clears a
     320px viewport (320 - 2x20 gutter - 2x20 form padding = 240px). */
  .dw-form .g-recaptcha { transform: scale(0.78); transform-origin: left top; margin-bottom: -2.4rem; }
}

@media (max-width: 380px) {
  .dw-hero__title { font-size: 2.4rem; }
  .dw-menu__link { font-size: 1.75rem; }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .dw-dark *,
  .dw-dark *::before,
  .dw-dark *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .dw-js [data-dw-reveal] { opacity: 1 !important; }
  .dw-work__reveal { clip-path: none !important; }
  /* Founder 3D: neutralise any transform the pointer/scroll parallax applied
     so a reduced-motion visitor gets a flat, static, fully legible card. */
  .dw-founder__card,
  .dw-founder__shape,
  .dw-founder__glow,
  .dw-founder__grid { transform: none !important; }
  .dw-founder__glow { opacity: 0.9 !important; animation: none !important; }
  .dw-hero__stageFallback { animation: none; }
  .dw-marquee__track { animation: none; }
  .dw-cursor { display: none !important; }
  .dw-dark a, .dw-dark button { cursor: auto; }
}

/* Bootstrap coexistence: neutralise Bootstrap's default white surfaces inside the dark scope */
.dw-dark .modal-content { background: var(--dw-surface); color: var(--dw-text); border: 1px solid var(--dw-line); }
.dw-dark .modal-content .modal-header,
.dw-dark .modal-content .modal-body { border-color: var(--dw-line); }
.dw-dark .modal-content .btn-close { filter: invert(1) grayscale(1); }
.dw-dark .btn-close { filter: invert(1) grayscale(1); }
.dw-dark .swiper-pagination-bullet-active { background: var(--dw-accent); }
.dw-dark .g-recaptcha { color-scheme: light; }

/* ==========================================================================
   MULTI-PAGE ADDITIONS
   Everything below supports the separate /index /about /services /portfolio
   /careers /contact documents. Class names are dw-* prefixed so the legacy
   light pages loaded alongside theme.css are unaffected.
   ========================================================================== */

/* ---------- Skip link ---------- */
.dw-skip {
  position: absolute; top: -100px; left: 1rem; z-index: 1200;
  padding: 0.75rem 1.15rem; border-radius: 0 0 10px 10px;
  background: var(--dw-accent); color: #fff;
  font-size: 0.78rem; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase;
  transition: top 0.25s var(--dw-ease);
}
.dw-skip:focus { top: 0; color: #fff; }

/* ---------- Page transition overlay ----------
   Decorative only. pointer-events:none so it can never swallow a click, and
   motion.js always removes .is-on (plus a hard failsafe timer). */
.dw-transition {
  position: fixed; inset: 0; z-index: 1100;
  pointer-events: none;
  display: grid; place-items: center;
  background: linear-gradient(160deg, #0a0a0d 0%, #14100c 55%, #1a0e07 100%);
  opacity: 0; visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.42s var(--dw-ease-io), opacity 0.28s linear, visibility 0s linear 0.42s;
}
.dw-transition::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px;
  transform: scaleX(0); transform-origin: left center;
  background: linear-gradient(90deg, var(--dw-accent), transparent);
  transition: transform 0.5s var(--dw-ease);
}
.dw-transition__mark { opacity: 0; transform: scale(0.85); transition: opacity 0.3s, transform 0.4s var(--dw-ease); }
.dw-transition__mark img { width: 40px; height: 40px; }
.dw-transition.is-on {
  opacity: 1; visibility: visible;
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.42s var(--dw-ease-io), opacity 0.2s linear, visibility 0s;
}
.dw-transition.is-on::before { transform: scaleX(1); }
.dw-transition.is-on .dw-transition__mark { opacity: 1; transform: scale(1); transition-delay: 0.16s; }

/* ---------- Breadcrumbs ---------- */
.dw-crumbs { margin-bottom: 1.35rem; }
.dw-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.dw-crumbs li { display: inline-flex; align-items: center; gap: 0.5rem; }
.dw-crumbs a, .dw-crumbs span[aria-current] {
  font-family: var(--dw-mono); font-size: 0.66rem;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.dw-crumbs a { color: var(--dw-muted); transition: color 0.3s; }
.dw-crumbs a:hover { color: var(--dw-accent); }
.dw-crumbs span[aria-current] { color: var(--dw-text); }
.dw-crumbs__sep { color: var(--dw-dim); font-size: 0.7rem; }

/* ---------- Inner page hero ---------- */
.dw-phero {
  position: relative;
  padding-top: calc(var(--dw-nav-h) + clamp(3rem, 7vw, 6rem));
  padding-bottom: clamp(3rem, 7vw, 5.5rem);
  overflow: hidden;
  isolation: isolate;
}
.dw-phero__bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(52% 62% at var(--dw-phero-gx, 76%) 22%, rgba(234, 92, 31, 0.17), transparent 66%),
    linear-gradient(180deg, #0a0a0d 0%, var(--dw-bg) 72%, #060608 100%);
}
.dw-phero__grid {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 78%);
  opacity: 0.75;
}
.dw-phero__noise {
  position: absolute; inset: -20%; z-index: 1; pointer-events: none; opacity: 0.14;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.dw-phero__inner {
  position: relative; z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.dw-phero--wide .dw-phero__inner { grid-template-columns: minmax(0, 1fr); }
.dw-phero__copy { display: flex; flex-direction: column; gap: 1.35rem; max-width: 44rem; }
.dw-phero__title {
  font-size: clamp(2.5rem, 6.2vw, 4.6rem);
  line-height: 0.99; letter-spacing: -0.045em;
  text-wrap: balance;
}
.dw-phero__title em { font-style: normal; color: var(--dw-accent); }
.dw-phero__lead { font-size: clamp(1rem, 1.35vw, 1.12rem); max-width: 40rem; }
.dw-phero__acts { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 0.5rem; }
.dw-phero__slot { position: relative; }

/* thin fact strip under the lead */
.dw-factstrip {
  display: flex; flex-wrap: wrap; gap: 1.75rem 2.5rem;
  margin: 0.75rem 0 0; padding-top: 1.5rem;
  border-top: 1px solid var(--dw-line);
}
.dw-factstrip__item { display: flex; flex-direction: column; gap: 0.28rem; }
.dw-factstrip dt {
  font-family: var(--dw-mono); font-size: 0.62rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--dw-dim);
}
.dw-factstrip dd { margin: 0; font-size: 0.92rem; font-weight: 500; color: var(--dw-text); line-height: 1.45; }

/* ---------- Long-form prose ---------- */
.dw-prose { max-width: 46rem; }
.dw-prose > * + * { margin-top: 1.1rem; }
.dw-prose h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); letter-spacing: -0.03em; margin-top: 2.25rem; }
.dw-prose h4 { font-size: 1.05rem; letter-spacing: -0.02em; margin-top: 1.75rem; }
.dw-prose p { font-size: 0.98rem; line-height: 1.78; }
.dw-prose strong { color: var(--dw-text); font-weight: 600; }
.dw-prose ul { display: flex; flex-direction: column; gap: 0.7rem; }
.dw-prose ul li {
  position: relative; padding-left: 1.5rem;
  font-size: 0.95rem; line-height: 1.7; color: var(--dw-muted);
}
.dw-prose ul li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--dw-accent);
}

/* ---------- Chips / tags ---------- */
.dw-tags { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.dw-tag {
  display: inline-flex; align-items: center;
  padding: 0.34rem 0.7rem; border-radius: 999px;
  border: 1px solid var(--dw-line-2);
  font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--dw-muted); background: rgba(255, 255, 255, 0.02);
  white-space: nowrap;
}
.dw-tag--accent { border-color: rgba(234, 92, 31, 0.5); color: var(--dw-accent-hi); background: var(--dw-accent-soft); }

/* ---------- Two-column split with sticky aside ---------- */
.dw-split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.dw-split__aside { position: sticky; top: calc(var(--dw-nav-h) + 1.5rem); display: flex; flex-direction: column; gap: 1.25rem; }
.dw-asideCard {
  border: 1px solid var(--dw-line); border-radius: 16px;
  background: var(--dw-bg-2); padding: 1.5rem;
  display: flex; flex-direction: column; gap: 0.9rem;
}
.dw-asideCard h3 { font-size: 0.95rem; letter-spacing: 0.02em; }
.dw-asideCard p { font-size: 0.88rem; line-height: 1.65; }
.dw-asideCard a { color: var(--dw-accent); font-size: 0.88rem; font-weight: 500; }
.dw-asideCard a:hover { text-decoration: underline; }

/* ---------- Detailed service blocks (services page) ---------- */
.dw-svcblock {
  border: 1px solid var(--dw-line); border-radius: 18px;
  background: var(--dw-bg-2);
  overflow: hidden;
  transition: border-color 0.5s var(--dw-ease), background-color 0.5s var(--dw-ease);
}
.dw-svcblock + .dw-svcblock { margin-top: 1.25rem; }
.dw-svcblock:hover { border-color: var(--dw-line-2); background: var(--dw-surface); }
.dw-svcblock__head {
  display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) 2.75rem;
  align-items: center; gap: clamp(1rem, 2.5vw, 2rem);
  width: 100%; text-align: left;
  padding: clamp(1.4rem, 3vw, 2.1rem) clamp(1.25rem, 3vw, 2.25rem);
  background: transparent; border: 0; cursor: pointer;
  font-family: inherit; color: inherit;
  transition: background-color 0.4s var(--dw-ease);
}
.dw-svcblock__head:hover { background: rgba(255, 255, 255, 0.02); }
.dw-svcblock__idx {
  font-family: var(--dw-mono); font-size: 0.72rem; color: var(--dw-accent);
  letter-spacing: 0.1em;
}
.dw-svcblock__title { display: flex; flex-direction: column; gap: 0.35rem; }
.dw-svcblock__title h3 { font-size: clamp(1.3rem, 2.6vw, 1.85rem); letter-spacing: -0.035em; }
.dw-svcblock__title p { font-size: 0.9rem; line-height: 1.6; }
/* The toggle button is wrapped in an <h3> so each service is a real heading in
   the document outline while the button stays the only interactive control. */
.dw-svcblock__headwrap { margin: 0; font: inherit; }
.dw-svcblock__name {
  display: flex; align-items: center; gap: 0.7rem;
  font-size: clamp(1.3rem, 2.6vw, 1.85rem); font-weight: 550; letter-spacing: -0.035em;
}
.dw-svcblock__name i { color: var(--dw-accent); font-size: 0.62em; }
.dw-svcblock__head:focus-visible { outline: 2px solid var(--dw-accent); outline-offset: -3px; }
.dw-svcblock__toggle {
  justify-self: end;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--dw-line-2); display: grid; place-items: center;
  color: var(--dw-text); font-size: 0.8rem;
  transition: transform 0.5s var(--dw-ease), background-color 0.4s, border-color 0.4s, color 0.4s;
}
.dw-svcblock.is-open .dw-svcblock__toggle {
  transform: rotate(45deg); background: var(--dw-accent); border-color: var(--dw-accent); color: #fff;
}
.dw-svcblock__panel { display: none; }
.dw-svcblock.is-open .dw-svcblock__panel { display: block; }
.dw-svcblock__inner {
  padding: 0 clamp(1.25rem, 3vw, 2.25rem) clamp(1.6rem, 3vw, 2.25rem);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  border-top: 1px solid var(--dw-line);
  padding-top: clamp(1.5rem, 3vw, 2rem);
}
.dw-svcblock__col h4 {
  font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dw-accent); margin-bottom: 0.75rem;
}
.dw-svcblock__col p { font-size: 0.93rem; line-height: 1.72; }
.dw-svcblock__col p + p { margin-top: 0.85rem; }
.dw-svcblock__col ul { display: flex; flex-direction: column; gap: 0.6rem; }
.dw-svcblock__col ul li { position: relative; padding-left: 1.35rem; font-size: 0.9rem; line-height: 1.6; color: var(--dw-muted); }
.dw-svcblock__col ul li::before {
  content: "\f058"; position: absolute; left: 0; top: 0.1em;
  font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--dw-accent); font-size: 0.72rem;
}
.dw-svcblock__stack { margin-top: 1.1rem; }

/* ---------- FAQ ---------- */
.dw-faq { border-top: 1px solid var(--dw-line); }
.dw-faq__item { border-bottom: 1px solid var(--dw-line); }
.dw-faq__item[open] { background: rgba(255, 255, 255, 0.015); }
.dw-faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.4rem 0; list-style: none; cursor: pointer;
  font-family: var(--dw-display); font-size: clamp(1rem, 1.9vw, 1.18rem);
  font-weight: 550; letter-spacing: -0.02em; color: var(--dw-text);
  transition: color 0.3s;
}
.dw-faq__q::-webkit-details-marker { display: none; }
.dw-faq__q:hover { color: var(--dw-accent-hi); }
.dw-faq__q::after {
  content: "\2b"; flex-shrink: 0;
  font-family: var(--dw-font); font-size: 1.3rem; font-weight: 400; line-height: 1;
  color: var(--dw-accent); transition: transform 0.4s var(--dw-ease);
}
.dw-faq__item[open] .dw-faq__q::after { transform: rotate(45deg); }
.dw-faq__a { padding-bottom: 1.5rem; max-width: 46rem; }
.dw-faq__a p { font-size: 0.93rem; line-height: 1.75; }

/* ---------- Portfolio ---------- */
/* Visually hidden but reachable by assistive tech (filter result count). */
.dw-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}
.dw-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.dw-filter__btn {
  padding: 0.62rem 1.1rem; border-radius: 999px;
  border: 1px solid var(--dw-line-2); background: transparent;
  color: var(--dw-muted); cursor: pointer;
  font-family: var(--dw-mono); font-size: 0.66rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: color 0.3s, border-color 0.3s, background-color 0.3s;
  min-height: 44px; display: inline-flex; align-items: center; gap: 0.5rem;
}
.dw-filter__btn:hover { color: var(--dw-text); border-color: var(--dw-accent); }
.dw-filter__btn.is-active { background: var(--dw-accent); border-color: var(--dw-accent); color: #fff; }
.dw-filter__btn:focus-visible { outline: 2px solid var(--dw-accent-hi); outline-offset: 3px; }
.dw-filter__n {
  font-size: 0.9em; line-height: 1; opacity: 0.55;
  font-variant-numeric: tabular-nums;
}
.dw-filter__btn.is-active .dw-filter__n { opacity: 0.85; }

/* The grid is content-sized: rows are implicit and there is no height, max-height
   or overflow, so every project in the table gets a cell and nothing can be cut
   off. minmax(0, 1fr) + min-width:0 stop a long unbroken title from forcing a
   track wider than the viewport. */
.dw-pgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: stretch;
}
.dw-pcard {
  display: flex; flex-direction: column;
  border: 1px solid var(--dw-line); border-radius: 18px;
  background: var(--dw-bg-2); overflow: hidden;
  min-width: 0;
  transition: border-color 0.5s var(--dw-ease), transform 0.5s var(--dw-ease);
}
.dw-pcard:hover { border-color: var(--dw-line-2); transform: translateY(-4px); }
.dw-pcard.is-hidden { display: none; }
.dw-pcard__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--dw-surface); }
.dw-pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--dw-ease); }
.dw-pcard:hover .dw-pcard__media img { transform: scale(1.05); }
.dw-pcard__tag {
  position: absolute; top: 0.9rem; left: 0.9rem;
  padding: 0.3rem 0.7rem; border-radius: 999px;
  background: rgba(8, 8, 10, 0.78); backdrop-filter: blur(8px);
  font-family: var(--dw-mono); font-size: 0.6rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--dw-accent-hi);
}
.dw-pcard__body { padding: clamp(1.25rem, 2.4vw, 1.75rem); display: flex; flex-direction: column; gap: 0.85rem; flex: 1; }
.dw-pcard__title { font-size: clamp(1.15rem, 2.1vw, 1.45rem); letter-spacing: -0.03em; overflow-wrap: anywhere; }
.dw-pcard__title a { transition: color 0.3s; }
.dw-pcard:hover .dw-pcard__title a { color: var(--dw-accent-hi); }
.dw-pcard__desc { font-size: 0.9rem; line-height: 1.68; overflow-wrap: anywhere; }
.dw-pcard__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 0.35rem; }
.dw-pcard__link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--dw-accent); min-height: 44px;
}
.dw-pcard__link .dw-arrow { transition: transform 0.4s var(--dw-ease); }
.dw-pcard__link:hover .dw-arrow { transform: translateX(4px); }

.dw-empty {
  border: 1px dashed var(--dw-line-2); border-radius: 16px;
  padding: clamp(2rem, 4vw, 3rem); text-align: center;
}

/* ---------- Project detail ---------- */
.dw-proj { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.dw-proj__media { border: 1px solid var(--dw-line); border-radius: 18px; overflow: hidden; background: var(--dw-surface); }
.dw-proj__media img { width: 100%; height: auto; }
.dw-proj__facts { display: flex; flex-direction: column; border-top: 1px solid var(--dw-line); }
.dw-proj__fact { padding: 0.95rem 0; border-bottom: 1px solid var(--dw-line); }
.dw-proj__fact dt { font-family: var(--dw-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dw-dim); margin-bottom: 0.3rem; }
.dw-proj__fact dd { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--dw-text); }
.dw-proj__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 2rem; border-top: 1px solid var(--dw-line); }
.dw-proj__nav a { display: flex; flex-direction: column; gap: 0.4rem; min-height: 44px; justify-content: center; }
.dw-proj__nav span { font-family: var(--dw-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dw-dim); }
.dw-proj__nav b { font-family: var(--dw-display); font-size: 1rem; font-weight: 550; letter-spacing: -0.02em; transition: color 0.3s; }
.dw-proj__nav a:hover b { color: var(--dw-accent); }
.dw-proj__nav .is-next { text-align: right; }

/* ---------- Careers ---------- */
.dw-jobs { display: flex; flex-direction: column; gap: 1rem; }
.dw-job {
  border: 1px solid var(--dw-line); border-radius: 16px;
  background: var(--dw-bg-2); padding: clamp(1.35rem, 2.6vw, 2rem);
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.25rem 2rem; align-items: center;
  transition: border-color 0.45s var(--dw-ease), background-color 0.45s var(--dw-ease);
}
.dw-job:hover { border-color: var(--dw-line-2); background: var(--dw-surface); }
.dw-job__main { display: flex; flex-direction: column; gap: 0.7rem; }
.dw-job__title { font-size: clamp(1.15rem, 2.2vw, 1.5rem); letter-spacing: -0.03em; }
.dw-job__meta { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dw-job__desc { font-size: 0.92rem; line-height: 1.7; }
.dw-job__skills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.15rem; }
.dw-job__act { display: flex; flex-direction: column; gap: 0.5rem; align-items: stretch; }
.dw-perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--dw-line); border: 1px solid var(--dw-line); border-radius: 16px; overflow: hidden; }
.dw-perk { background: var(--dw-bg-2); padding: clamp(1.35rem, 2.5vw, 2rem); display: flex; flex-direction: column; gap: 0.7rem; }
.dw-perk i { color: var(--dw-accent); font-size: 1.05rem; }
.dw-perk h3 { font-size: 1.02rem; letter-spacing: -0.02em; }
.dw-perk p { font-size: 0.88rem; line-height: 1.62; }

/* ---------- Steps as a readable timeline (About page) ---------- */
.dw-timeline { display: flex; flex-direction: column; }
.dw-tstep {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding: clamp(1.6rem, 3.2vw, 2.4rem) 0;
  border-top: 1px solid var(--dw-line);
}
.dw-tstep:last-child { border-bottom: 1px solid var(--dw-line); }
.dw-tstep__idx { font-family: var(--dw-display); font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 600; letter-spacing: -0.05em; color: var(--dw-line-2); line-height: 1; }
.dw-tstep h3 { font-size: clamp(1.15rem, 2.3vw, 1.5rem); letter-spacing: -0.03em; margin-bottom: 0.6rem; }
.dw-tstep p { font-size: 0.94rem; line-height: 1.72; max-width: 52rem; }

/* ---------- Values grid (About page) ---------- */
.dw-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--dw-line); border: 1px solid var(--dw-line); border-radius: 16px; overflow: hidden; }
.dw-value { background: var(--dw-bg-2); padding: clamp(1.4rem, 2.6vw, 2.1rem); display: flex; flex-direction: column; gap: 0.7rem; transition: background-color 0.4s; }
.dw-value:hover { background: var(--dw-surface-2); }
.dw-value i { color: var(--dw-accent); }
.dw-value h3 { font-size: 1.02rem; letter-spacing: -0.02em; }
.dw-value p { font-size: 0.88rem; line-height: 1.62; }

/* ---------- Local SEO block ---------- */
.dw-local { background: var(--dw-bg-2); border-block: 1px solid var(--dw-line); }
.dw-local__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.dw-local__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.dw-local__card {
  border: 1px solid var(--dw-line); border-radius: 14px; padding: 1.35rem;
  background: var(--dw-bg); display: flex; flex-direction: column; gap: 0.55rem;
  transition: border-color 0.4s var(--dw-ease), transform 0.4s var(--dw-ease);
}
.dw-local__card:hover { border-color: var(--dw-accent); transform: translateY(-3px); }
.dw-local__card h3 { font-size: 0.98rem; letter-spacing: -0.02em; }
.dw-local__card p { font-size: 0.86rem; line-height: 1.62; }
.dw-local__card i { color: var(--dw-accent); font-size: 0.9rem; }

/* ---------- Closing CTA ---------- */
.dw-cta__panel {
  position: relative; overflow: hidden;
  border: 1px solid var(--dw-line-2); border-radius: 22px;
  background: var(--dw-bg-2);
  padding: clamp(2.25rem, 6vw, 4.5rem);
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1.75rem, 4vw, 3.5rem); flex-wrap: wrap;
}
.dw-cta__glow { position: absolute; inset: -40% -10% auto auto; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(234, 92, 31, 0.22), transparent 68%); pointer-events: none; }
.dw-cta__copy { position: relative; display: flex; flex-direction: column; gap: 1.1rem; max-width: 38rem; }
.dw-cta__acts { position: relative; display: flex; flex-wrap: wrap; gap: 0.85rem; }
.dw-footer__ctaActions { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* ---------- 404 ---------- */
.dw-404 { display: grid; place-items: center; min-height: 74svh; text-align: center; padding-block: 4rem; }
.dw-404__code { font-family: var(--dw-display); font-size: clamp(5rem, 22vw, 13rem); font-weight: 700; letter-spacing: -0.06em; line-height: 0.85; color: transparent; -webkit-text-stroke: 1px var(--dw-line-2); }
.dw-404__title { font-size: clamp(1.6rem, 4.5vw, 2.75rem); margin-top: 1.5rem; letter-spacing: -0.04em; }
.dw-404__links { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-top: 2.25rem; }
.dw-404__links a {
  padding: 0.7rem 1.15rem; border-radius: 999px; border: 1px solid var(--dw-line-2);
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  display: inline-flex; align-items: center; min-height: 44px;
  transition: border-color 0.3s, color 0.3s;
}
.dw-404__links a:hover { border-color: var(--dw-accent); color: var(--dw-accent); }

/* ==========================================================================
   RESPONSIVE — multi-page components
   ========================================================================== */
@media (max-width: 1024px) {
  .dw-phero__inner { grid-template-columns: 1fr; }
  .dw-phero__slot { max-width: 520px; }
  .dw-split, .dw-proj, .dw-local__grid { grid-template-columns: 1fr; }
  .dw-split__aside { position: static; }
  .dw-svcblock__inner { grid-template-columns: 1fr; }
  .dw-values, .dw-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .dw-pgrid { grid-template-columns: minmax(0, 1fr); }
  .dw-factstrip { gap: 1.25rem 1.75rem; }
  .dw-svcblock__head { grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem; gap: 0.85rem; }
  .dw-local__cards { grid-template-columns: 1fr; }
  .dw-tstep { grid-template-columns: 3.5rem minmax(0, 1fr); }
  .dw-job { grid-template-columns: 1fr; }
  .dw-job__act { align-items: stretch; }
  .dw-job__act .dw-btn { justify-content: center; }
  .dw-cta__panel { flex-direction: column; align-items: flex-start; }
  .dw-proj__nav { grid-template-columns: 1fr; }
  .dw-proj__nav .is-next { text-align: left; }
}

@media (max-width: 430px) {
  .dw-values, .dw-perks { grid-template-columns: 1fr; }
  .dw-phero__acts { flex-direction: column; align-items: stretch; }
  .dw-phero__acts .dw-btn { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .dw-transition { display: none; }
  .dw-phero__grid { display: none; }
}

/* ==========================================================================
   TOOLS DIRECTORY — /tools
   --------------------------------------------------------------------------
   Card grid for the public tool directory. The cards are driven entirely by
   the PHP registry in Includes/redesign/tools.php: adding a tool adds a card
   with no new markup here, so the grid is written to be self-managing
   (auto-fit, and a hard 3-column cap on desktop so a two-tool directory does
   not stretch into an empty banner).

   Depth is layered rather than faked: the grid is a perspective container and
   each card is a real 3D plane that motion.js tilts toward the pointer via
   [data-dw-tilt]. The lift/glow on hover is plain CSS, so the page still
   reads correctly with JavaScript or pointer input unavailable.
   ========================================================================== */
.dw-tools {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
  /* Real 3D space for the card tilt, not a flat parallax fake. */
  perspective: 1400px;
  perspective-origin: 50% 40%;
}

/* Three columns on desktop regardless of how many tools exist, so the
   directory keeps its intended shape at 1, 2 or 6 entries. */
@media (min-width: 1100px) {
  .dw-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.dw-tool { display: flex; min-width: 0; }

.dw-tool__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  border: 1px solid var(--dw-line);
  border-radius: 18px;
  background:
    linear-gradient(158deg, var(--dw-surface-2) 0%, var(--dw-surface) 62%, var(--dw-bg-2) 100%);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
  overflow: hidden;
  isolation: isolate;
  transform-style: preserve-3d;
  transition:
    border-color 0.5s var(--dw-ease),
    box-shadow 0.5s var(--dw-ease);
}

/* Accent bloom that follows the card on hover. */
.dw-tool__glow {
  position: absolute;
  inset: -40% -20% auto -20%;
  height: 70%;
  background: radial-gradient(60% 100% at 50% 0%, var(--dw-accent-glow) 0%, transparent 72%);
  opacity: 0;
  transition: opacity 0.55s var(--dw-ease);
  pointer-events: none;
  z-index: -1;
}

/* Hairline along the top edge — the detail that keeps the card from reading
   as a flat Bootstrap panel. */
.dw-tool__edge {
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--dw-line-2) 22%, var(--dw-line-2) 78%, transparent);
  opacity: 0.85;
  pointer-events: none;
}

.dw-tool__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.15rem;
}

.dw-tool__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 13px;
  border: 1px solid var(--dw-line-2);
  background: var(--dw-bg-2);
  color: var(--dw-accent);
  font-size: 1.1rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: transform 0.5s var(--dw-ease), color 0.4s var(--dw-ease),
    border-color 0.4s var(--dw-ease);
}

.dw-tool__idx {
  font-family: var(--dw-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--dw-dim);
}

.dw-tool__name {
  margin: 0;
  font-family: var(--dw-display);
  font-size: clamp(1.15rem, 1.7vw, 1.35rem);
  letter-spacing: -0.03em;
  line-height: 1.2;
}

/* Whole-card click target via the heading link, so the card, the name and the
   button are all one link — no nested interactive elements, no double tap
   target. */
.dw-tool__link {
  color: var(--dw-text);
  text-decoration: none;
  transition: color 0.4s var(--dw-ease);
}
.dw-tool__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.dw-tool__link:hover { color: var(--dw-accent-hi); }

.dw-tool__tagline {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 550;
  color: var(--dw-text);
}

.dw-tool__desc {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--dw-muted);
}

.dw-tool__points {
  list-style: none;
  margin: 0.15rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.dw-tool__points li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--dw-dim);
}
.dw-tool__points i { color: var(--dw-accent); font-size: 0.7rem; flex: 0 0 auto; }

.dw-tool__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px solid var(--dw-line);
}

.dw-tool__cat {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dw-dim);
}

/* The stretched heading link sits above the card, so the CTA needs to win the
   stacking order to stay independently clickable and focusable. */
.dw-tool__cta { position: relative; z-index: 2; }

.dw-tool:hover .dw-tool__card,
.dw-tool:focus-within .dw-tool__card {
  border-color: rgba(234, 92, 31, 0.42);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.44), 0 0 0 1px rgba(234, 92, 31, 0.1);
}
.dw-tool:hover .dw-tool__glow,
.dw-tool:focus-within .dw-tool__glow { opacity: 1; }
.dw-tool:hover .dw-tool__icon,
.dw-tool:focus-within .dw-tool__icon {
  transform: translateY(-3px) scale(1.04);
  border-color: rgba(234, 92, 31, 0.5);
}

/* Keyboard focus must be obvious on both interactive elements. */
.dw-tool__link:focus-visible,
.dw-tool__cta:focus-visible {
  outline: 2px solid var(--dw-accent);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .dw-tool__card { transition: none; }
  .dw-tool:hover .dw-tool__icon,
  .dw-tool:focus-within .dw-tool__icon { transform: none; }
  .dw-tool:hover .dw-tool__glow,
  .dw-tool:focus-within .dw-tool__glow { opacity: 0.55; }
}

/* "All tools" breadcrumb shown on the individual tool pages, so every tool
   links back to the /tools directory. */
.dw-toolback {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
  font-family: var(--dw-font);
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dw-muted);
  text-decoration: none;
  transition: color 0.35s var(--dw-ease), gap 0.35s var(--dw-ease);
}
.dw-toolback i { font-size: 0.66rem; color: var(--dw-accent); transition: transform 0.35s var(--dw-ease); }
.dw-toolback:hover { color: var(--dw-text); gap: 0.7rem; }
.dw-toolback:hover i { transform: translateX(-3px); }
.dw-toolback:focus-visible { outline: 2px solid var(--dw-accent); outline-offset: 3px; border-radius: 5px; }