/* ==========================================================================
   website-design.css - Website Design service page only
   (linked from services/website-design.html; loads after style.css + services.css)
   Calm direction: neutral glass + white/gray by default, color in one place per
   section, cyan only on live data, brand gradient for key emphasis.
   ========================================================================== */

:root {
  --wd-ink: #F5F6F8;
  --wd-dim: #868C97;
  --wd-label: rgba(235,238,245,.56);
  --wd-hair: rgba(255,255,255,.09);
  --wd-hair-strong: rgba(255,255,255,.16);
  --wd-glass: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.014));
  --wd-shadow: 0 24px 60px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.055);
  --wd-ease: cubic-bezier(.16,1,.3,1);
}

/* ==========================================================================
   1. HERO - the service-hero photo, scrim and copy column, with a device
      mockup set into the scene on the right. The section also carries
      .svc-hero, so the background, scrim, glow and copy styles are shared.
      The copy wrapper is display:contents so its elements become grid items:
      breadcrumb, badge and H1 span the full width, and the devices sit beside
      the sub, CTAs and proof.
   ========================================================================== */
.wdh-b-grid {
  --wdh-copy: 690px;                                                      /* lower copy block (proof row is the widest) */
  --wdh-bleed: clamp(0px, calc((100vw - 1120px) / 2 - 56px), 240px);      /* let the devices run past the container edge */
  display: grid;
  grid-template-columns: minmax(0, var(--wdh-copy)) minmax(0, 1fr);
  grid-template-rows: repeat(7, auto) 1fr;
  column-gap: 48px;
}
.wdh-b-copy { display: contents; }
.wdh-b-copy > * { grid-column: 1 / -1; min-width: 0; }
.wdh-b-copy > .svc-breadcrumb { grid-row: 1; }
.wdh-b-copy > .svc-hero-badge { grid-row: 2; justify-self: start; }
.wdh-b-copy > h1 { grid-row: 3; }
.wdh-b-copy > .svc-hero-sub { grid-row: 4; grid-column: 1; }
.wdh-b-copy > .svc-hero-ctas { grid-row: 5; grid-column: 1; }
.wdh-b-copy > .svc-hero-proof { grid-row: 6; grid-column: 1; }
.wdh-b-copy > .svc-hero-where { grid-row: 7; grid-column: 1; }
.wdh-b-visual {
  grid-column: 2; grid-row: 4 / 9; align-self: start; min-width: 0;
  position: relative; margin: -84px calc(-1 * var(--wdh-bleed)) 0 0; /* rise beside the H1 second line, which is short */
}
/* Settle the devices into the photo: a soft pool of shade behind them, and the
   warm lamp light from the right catching the edges */
.wdh-b-visual::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: -14%; right: -10%; top: -12%; bottom: 4%;
  background:
    radial-gradient(48% 42% at 88% 26%, rgba(255,136,72,.10), transparent 70%),
    radial-gradient(56% 52% at 46% 46%, rgba(8,8,11,.62), rgba(8,8,11,0) 72%);
}
.wdh-b .wd-devices-stage {
  -webkit-box-reflect: below 3px linear-gradient(transparent 80%, rgba(255,255,255,.13));
}
.wdh-b .wd-devices-stage::after { /* contact shadow on the desk */
  left: -2%; right: -1%; bottom: 3.2%; height: 46px;
  background: radial-gradient(closest-side, rgba(0,0,0,.82), rgba(0,0,0,.35) 60%, transparent);
  filter: blur(8px);
}
.wdh-b .wd-laptop-lid {
  box-shadow: 0 40px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.08), inset -1px 0 0 rgba(255,168,110,.22);
}
.wdh-b .wd-laptop-screen::after { /* glass: a long diagonal reflection, a little stronger than the default sheen */
  background:
    linear-gradient(118deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.025) 34%, rgba(255,255,255,0) 35%),
    linear-gradient(118deg, rgba(255,255,255,0) 62%, rgba(255,214,186,.05) 63%, rgba(255,255,255,0) 82%);
}
.wdh-b .wd-phone {
  box-shadow: 0 30px 60px rgba(0,0,0,.65), 0 0 0 1px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,255,255,.1), inset -1px 0 0 rgba(255,168,110,.22);
}
.wdh-b .wd-phone-screen::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(125deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,0) 40%);
}
.wdh-b .wd-devices-cap { margin-top: 30px; }
.wdh-b .wd-cap-eyebrow { gap: 8px; letter-spacing: .06em; }

/* Device stack (self-contained: .wd-devices can be reused anywhere) */
.wd-devices { position: relative; margin: 0; }
.wd-devices-stage { position: relative; padding: 0 7% 7% 0; isolation: isolate; }
.wd-devices-stage::after { /* floor shadow */
  content: ''; position: absolute; left: 4%; right: 2%; bottom: 2%; height: 34px; z-index: -1;
  background: radial-gradient(closest-side, rgba(0,0,0,.75), transparent); filter: blur(6px);
}
.wd-laptop { position: relative; }
.wd-laptop-lid {
  position: relative; padding: 2.1% 2.1% 2.6%;
  border-radius: 18px 18px 8px 8px;
  background: linear-gradient(180deg, #1a1c21, #0d0e11);
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: 0 40px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08);
}
.wd-laptop-lid::before { /* camera */
  content: ''; position: absolute; top: .9%; left: 50%; width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%; background: #23262c; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.wd-laptop-screen {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; background: #050506;
}
.wd-laptop-screen::after { /* glass sheen */
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(115deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 38%);
}
.wd-laptop-base {
  position: relative; height: 14px; margin: 0 -7.5%;
  border-radius: 2px 2px 16px 16px / 2px 2px 12px 12px;
  background: linear-gradient(180deg, #3a3d44 0%, #23252a 40%, #121316 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 18px 30px rgba(0,0,0,.5);
}
.wd-laptop-base::before { /* opening lip */
  content: ''; position: absolute; top: 0; left: 50%; width: 15%; height: 5px; transform: translateX(-50%);
  border-radius: 0 0 8px 8px; background: #17181c;
}
.wd-phone {
  position: absolute; right: 0; bottom: 0; width: 22%;
  padding: 1.6%; border-radius: 15% / 7%;
  background: linear-gradient(160deg, #23252b, #0c0d10);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 30px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.1);
}
.wd-phone-screen {
  position: relative; aspect-ratio: 400 / 866; overflow: hidden; border-radius: 12% / 5.6%; background: #050506;
}
.wd-phone-screen::before { content: none; } /* no dynamic island, per Micah */
.wd-slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center;
  opacity: 0; transform: scale(1.035);
  transition: opacity .9s ease, transform 5.2s var(--wd-ease);
}
.wd-slide.is-on { opacity: 1; transform: scale(1); }
.wd-phone .wd-slide { transition-delay: .14s, .14s; }

.wd-devices-cap {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  margin-top: 26px; padding-right: 7%;
}
.wd-cap-text { min-width: 0; }
.wd-cap-eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-accent); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--wd-label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wd-cap-live {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; letter-spacing: .12em; color: var(--electric-blue);
}
.wd-cap-live::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--electric-blue);
  box-shadow: 0 0 8px rgba(0,212,255,.8); animation: wd-blink 1.8s ease-in-out infinite;
}
@keyframes wd-blink { 0%,100%{opacity:1} 50%{opacity:.35} }
.wd-cap-name {
  font-family: var(--font-head); font-size: 20px; font-weight: 700; color: var(--wd-ink); letter-spacing: -.01em; margin-top: 6px;
  transition: opacity .35s ease;
}
.wd-cap-text.is-swapping .wd-cap-name, .wd-cap-text.is-swapping .wd-cap-eb { opacity: 0; }
.wd-cap-eb { transition: opacity .35s ease; overflow: hidden; text-overflow: ellipsis; }
.wd-cap-view {
  flex: none; display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 9px 16px; border-radius: 999px;
  font-family: var(--font-accent); font-size: 12.5px; font-weight: 500; letter-spacing: .02em; color: var(--wd-ink);
  background: rgba(255,255,255,.04); border: 1px solid var(--wd-hair-strong);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: background .2s ease, border-color .2s ease;
}
.wd-cap-view:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.28); }
.wd-cap-view:focus-visible, .wd-dot:focus-visible { outline: 2px solid rgba(255,255,255,.8); outline-offset: 3px; }
.wd-dots { display: flex; gap: 6px; margin-top: 16px; padding-right: 7%; }
.wd-dot {
  position: relative; flex: 1; height: 14px; padding: 0; border: 0; background: none; cursor: pointer;
}
.wd-dot::before, .wd-dot::after {
  content: ''; position: absolute; left: 0; right: 0; top: 6px; height: 2px; border-radius: 2px;
}
.wd-dot::before { background: rgba(255,255,255,.12); }
.wd-dot::after { background: rgba(255,255,255,.85); transform: scaleX(0); transform-origin: left center; }
.wd-dot.is-done::after { transform: scaleX(1); background: rgba(255,255,255,.32); }
.wd-dot.is-on::after { transform: scaleX(1); }
.wd-devices.is-playing .wd-dot.is-on::after { animation: wd-dot-fill var(--wd-dur, 4200ms) linear both; }
@keyframes wd-dot-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 1180px) {
  .wdh-b-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .wdh-b-copy > * { grid-column: 1; }
  .wdh-b-visual { grid-column: 1; grid-row: 8; margin: 56px 0 0; max-width: 620px; }
}
@media (max-width: 600px) {
  .wdh-b-visual { margin-top: 44px; max-width: 340px; }
  .wd-devices-stage { padding-right: 9%; }
  .wdh-b .wd-devices-stage { padding-left: 5.5%; } /* room for the laptop base overhang */
  .wdh-b .wd-cap-eb { display: none; }
  .wd-phone { width: 27%; }
  .wd-devices-cap, .wd-dots { padding-right: 0; }
  .wdh-b .wd-devices-cap { margin-top: 22px; }
  .wd-cap-name { font-size: 17px; }
  .wd-cap-view { padding: 8px 13px; }
  .wd-laptop-lid { border-radius: 12px 12px 6px 6px; }
  .wd-laptop-base { height: 9px; }
  /* Phones: no camera details on the devices, so nothing small and dark reads
     as a stray mark when the mockup passes under the fixed nav */
  .wd-phone-screen::before, .wd-laptop-lid::before { display: none; }
}

/* ==========================================================================
   2. WHAT YOU GET - 8 conversion criteria (folded in from the old audit list)
   ========================================================================== */
.wd-criteria { margin: clamp(48px, 5vw, 64px) auto 0; max-width: 1040px; text-align: center; }
.wd-criteria-lead {
  font-family: var(--font-accent); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--wd-label); margin: 0 0 18px;
}
.wd-criteria-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.wd-criteria-list li {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 15px 9px 11px; border-radius: 999px;
  font-size: 14px; color: var(--light-gray);
  background: rgba(255,255,255,.03); border: 1px solid var(--wd-hair);
}
.wd-criteria-list svg { flex: none; width: 16px; height: 16px; fill: none; stroke: #E6E8EC; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
@media (max-width: 600px) {
  .wd-criteria-list { gap: 8px; }
  .wd-criteria-list li { font-size: 13px; padding: 7px 12px 7px 9px; }
}

/* ==========================================================================
   3. BUILD SEQUENCE - our own site, Structure, Design, Content, Live, driven by
      page scroll. #wdbTrack is the tall scroll range; .wdb-pin sticks inside it
      while JS maps progress to the stages, then the live page scrolls in the
      frame. .is-scrub is set by JS (off for reduced motion: no pin, static).
   ========================================================================== */
/* clip, never hidden: an overflow:hidden ancestor would break the sticky pin */
.svc-demo.wdb-sec { overflow: clip; }
.wdb-sec.is-scrub { padding-bottom: clamp(44px, 4.5vw, 72px); }
.wdb-sec .section-header { margin-bottom: 0; }
.wdb-track { --wdb-dist: 320vh; position: relative; margin-top: 40px; }
/* the scroll distance the pin holds for */
.wdb-sec.is-scrub .wdb-track::after { content: ''; display: block; height: var(--wdb-dist); }
/* The pin is only as tall as its content (JS writes --wdb-h), and sticks centred
   in the viewport below the fixed nav (72px, its scrolled height), so nothing
   but the content is held on screen and the release leads straight on */
.wdb-sec.is-scrub .wdb-pin {
  position: sticky;
  top: max(72px, calc((100vh - var(--wdb-h, 780px)) / 2 + 36px));
  top: max(72px, calc((100svh - var(--wdb-h, 780px)) / 2 + 36px));
}
/* 972px frame; on shorter screens it narrows so steps, frame and caption all fit */
.wdb { --wdb-reserve: 278px; width: 100%; max-width: 972px; margin: 0 auto; }
.wdb-sec.is-scrub .wdb { max-width: min(972px, calc((100vh - var(--wdb-reserve)) * 1.6)); max-width: min(972px, calc((100svh - var(--wdb-reserve)) * 1.6)); }
.wdb-steps {
  list-style: none; margin: 0 auto 18px; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
}
.wdb-step {
  position: relative; width: 100%; display: flex; align-items: baseline; gap: 10px;
  padding: 16px 2px 4px; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-accent); color: var(--dark-gray);
  transition: color .3s ease;
}
.wdb-step::before, .wdb-step::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 2px;
}
.wdb-step::before { background: rgba(255,255,255,.1); }
/* the bar fill follows scroll progress through that stage (--f, 0 to 1) */
.wdb-step::after { background: var(--gradient); transform: scaleX(var(--f, 0)); transform-origin: left center; }
.wdb-step.is-done { color: var(--medium-gray); }
.wdb-step.is-done::after { opacity: .45; }
.wdb-step.is-on { color: var(--wd-ink); }
.wdb-step-n { font-size: 12px; font-weight: 600; letter-spacing: .08em; font-variant-numeric: tabular-nums; opacity: .8; }
.wdb-step-l { font-size: 15px; font-weight: 500; letter-spacing: .01em; }
.wdb-step:hover { color: var(--light-gray); }
.wdb-step.is-on:hover { color: var(--wd-ink); }
.wdb-step:focus-visible { outline: 2px solid rgba(255,255,255,.8); outline-offset: 4px; border-radius: 4px; }

.wdb-browser {
  position: relative; border-radius: 16px; overflow: hidden;
  background: #0f1115; border: 1px solid var(--wd-hair-strong);
  box-shadow: 0 40px 100px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
}
.wdb-chrome {
  display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 14px;
  background: #1b1d22; border-bottom: 1px solid rgba(255,255,255,.07);
}
.wdb-chrome .pf-dots { flex: none; }
.wdb-addr {
  display: flex; align-items: center; gap: 7px; margin: 0 auto; min-width: 0; max-width: 60%;
  padding: 4px 14px; border-radius: 999px; background: rgba(255,255,255,.06);
  font-family: var(--font-accent); font-size: 12px; color: var(--light-gray); white-space: nowrap;
}
.wdb-addr span { overflow: hidden; text-overflow: ellipsis; }
.wdb-addr svg { flex: none; opacity: .65; }
.wdb-status {
  flex: none; display: inline-flex; align-items: center; gap: 7px; min-width: 92px; justify-content: flex-end;
  font-family: var(--font-accent); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--wd-label);
}
.wdb-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.4); transition: background .3s ease, box-shadow .3s ease; }
.wdb[data-stage="3"] .wdb-status { color: var(--electric-blue); }
.wdb[data-stage="3"] .wdb-status::before { background: var(--electric-blue); box-shadow: 0 0 8px rgba(0,212,255,.8); animation: wd-blink 1.8s ease-in-out infinite; }

.wdb-view { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0B0B0D; }
/* Stage layers stack in order; JS sets each one's opacity (a scroll-scrubbed
   crossfade with a slight settle in scale) and the live page's scroll offset */
.wdb-layer { position: absolute; inset: 0; opacity: 0; }
.wdb-layer[data-k="0"] { opacity: 1; }
.wdb-sec.is-scrub .wdb-layer, .wdb-sec.is-scrub .wdb-layer img { will-change: opacity, transform; }
.wdb-layer img { display: block; width: 100%; height: auto; }
.wdb-view::after { /* glass: a faint top sheen so the frame reads as a screen */
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 22%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

.wdb-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px 28px; flex-wrap: wrap;
  margin-top: 18px;
}
.wdb-caption { min-width: 0; flex: 1 1 360px; }
.wdb-cap-t { font-family: var(--font-head); font-size: 18px; font-weight: 700; color: var(--wd-ink); letter-spacing: -.01em; }
.wdb-cap-d { font-size: 15px; color: var(--medium-gray); margin-top: 4px; line-height: 1.55; }
.wdb-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wdb-btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  height: 40px; padding: 0 18px; border-radius: 999px;
  font-family: var(--font-accent); font-size: 13px; font-weight: 500; letter-spacing: .02em; color: var(--wd-ink);
  background: rgba(255,255,255,.04); border: 1px solid var(--wd-hair-strong);
  transition: background .2s ease, border-color .2s ease;
}
.wdb-btn:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.28); }
.wdb-btn:focus-visible { outline: 2px solid rgba(255,255,255,.8); outline-offset: 3px; }
.wdb-btn svg { width: 15px; height: 15px; }

@media (max-width: 768px) {
  .wdb-track { --wdb-dist: 240vh; }
}
@media (max-width: 600px) {
  .wdb-track { margin-top: 28px; }
  .wdb-steps { gap: 6px; margin-bottom: 14px; }
  .wdb-step { flex-direction: column; gap: 2px; padding-top: 12px; }
  .wdb-step-n { font-size: 10.5px; }
  .wdb-step-l { font-size: 13px; }
  .wdb-browser { border-radius: 12px; }
  .wdb-chrome { height: 34px; padding: 0 10px; gap: 8px; }
  .wdb-chrome .pf-dots i { width: 7px; height: 7px; }
  .wdb-addr { font-size: 10.5px; padding: 3px 10px; max-width: 54%; }
  .wdb-status { min-width: 0; font-size: 9.5px; letter-spacing: .1em; }
  .wdb-foot { margin-top: 16px; }
  .wdb-cap-t { font-size: 17px; }
  .wdb-cap-d { font-size: 14px; }
}

/* ==========================================================================
   5. AI VISIBILITY PROOF BAND
   ========================================================================== */
.wd-aiv { position: relative; padding: clamp(56px, 6vw, 88px) 0; background: var(--jet-black); }
.wd-aiv-band {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .95fr) minmax(0, 1.05fr);
  border-radius: 20px; max-width: 1140px; margin: 0 auto;
  background:
    radial-gradient(60% 120% at 0% 0%, rgba(178,77,255,.07), transparent 70%),
    linear-gradient(180deg, rgba(20,24,36,.9), rgba(11,13,20,.94));
  box-shadow: 0 30px 70px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.05);
}
.wd-aiv-band::before { /* gradient hairline: the one place of color here */
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(120deg, rgba(255,106,61,.7), rgba(178,77,255,.5) 38%, rgba(160,176,220,.12) 70%, rgba(160,176,220,.2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
.wd-aiv-head { padding: 34px 34px 32px; }
.wd-aiv-eyebrow { display: block; font-family: var(--font-accent); font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--wd-label); margin-bottom: 14px; }
.wd-aiv-title {
  font-family: var(--font-head); font-size: clamp(24px, 2.3vw, 31px); font-weight: 700; line-height: 1.15;
  letter-spacing: -.02em; color: var(--wd-ink); margin: 0; text-wrap: balance;
}
.wd-aiv-title span { color: var(--wd-dim); }
.wd-aiv-named { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.wd-aiv-k { font-family: var(--font-accent); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--dark-gray); margin-top: 22px; }
.wd-aiv-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 9px; border-radius: 8px;
  font-family: var(--font-accent); font-size: 13px; font-weight: 500; color: var(--wd-ink);
  background: rgba(255,255,255,.04); border: 1px solid var(--wd-hair-strong);
}
.wd-aiv-chip svg.wd-logo { width: 14px; height: 14px; flex: none; color: #F2F4F7; display: block; }
.wd-aiv-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-family: var(--font-accent); font-size: 14px; font-weight: 500; color: var(--wd-ink); border-bottom: 1px solid rgba(255,255,255,.2); padding-bottom: 3px; transition: border-color .2s ease, color .2s ease; }
.wd-aiv-link:hover { border-bottom-color: rgba(255,255,255,.6); }
.wd-aiv-link svg { width: 15px; height: 15px; transition: transform .2s ease; }
.wd-aiv-link:hover svg { transform: translateX(2px); }
.wd-aiv-item { position: relative; padding: 34px 30px 32px; display: flex; flex-direction: column; }
.wd-aiv-item::before {
  content: ''; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(160,176,220,.24), transparent);
}
.wd-aiv-who { font-family: var(--font-accent); font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--wd-label); }
.wd-aiv-num {
  font-family: var(--font-accent); font-size: clamp(28px, 2.5vw, 36px); font-weight: 600; line-height: 1.08; white-space: nowrap;
  letter-spacing: -.02em; color: var(--wd-ink); margin-top: 14px; font-variant-numeric: tabular-nums;
}
.wd-aiv-lbl { font-family: var(--font-accent); font-size: 13px; font-weight: 500; color: var(--light-gray); margin-top: 6px; letter-spacing: .01em; }
.wd-aiv-sub { font-size: 13px; color: var(--medium-gray); margin-top: 3px; white-space: nowrap; }
.wd-aiv-line { font-size: 14px; line-height: 1.6; color: var(--medium-gray); margin-top: auto; padding-top: 16px; text-wrap: balance; max-width: 38ch; }
@media (max-width: 960px) {
  .wd-aiv-band { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .wd-aiv-head { grid-column: 1 / -1; padding-bottom: 8px; }
  .wd-aiv-item:nth-child(2)::before { display: none; }
}
@media (max-width: 600px) {
  .wd-aiv-band { grid-template-columns: minmax(0, 1fr); }
  .wd-aiv-head { padding: 28px 22px 6px; }
  .wd-aiv-item { padding: 24px 22px 26px; }
  .wd-aiv-item::before { display: block !important; left: 22px; right: 22px; top: 0; bottom: auto; width: auto; height: 1px;
    background: linear-gradient(90deg, rgba(160,176,220,.2), rgba(160,176,220,.05)); }
}

/* ==========================================================================
   6. HOW IT WORKS - two-week timeline under the steps
   ========================================================================== */
.wd-tl { max-width: 1140px; margin: clamp(36px, 4vw, 52px) auto 0; padding: 0 calc(100% / 6 - 16px); }
.wd-tl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.wd-tl-end { font-family: var(--font-accent); font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--wd-label); }
.wd-tl-total { font-family: var(--font-accent); font-size: 13px; font-weight: 500; color: var(--wd-ink); letter-spacing: .02em; }
.wd-tl-bar {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; height: 40px; border-radius: 12px; overflow: hidden;
  background: rgba(255,255,255,.03); border: 1px solid var(--wd-hair);
}
.wd-tl-fill {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(90deg, rgba(255,106,61,.22), rgba(0,212,255,.16) 50%, rgba(178,77,255,.24));
  transform: scaleX(0); transform-origin: left center; transition: transform 1.8s cubic-bezier(.65,0,.35,1);
}
.wd-tl.is-in .wd-tl-fill { transform: scaleX(1); }
.wd-tl-seg {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-accent); font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--wd-ink);
}
.wd-tl-seg + .wd-tl-seg { border-left: 1px solid rgba(255,255,255,.14); }
.wd-tl-notes { display: grid; grid-template-columns: 1fr 1fr 1fr; margin-top: 12px; font-size: 13px; color: var(--medium-gray); }
.wd-tl-notes span:nth-child(2) { text-align: center; }
.wd-tl-notes span:nth-child(3) { text-align: right; }
@media (max-width: 768px) {
  .wd-tl { padding: 0; max-width: 560px; }
  .wd-tl-notes { grid-template-columns: 1fr; gap: 4px; }
  .wd-tl-notes span { text-align: left !important; }
  .wd-tl-notes span::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.4); margin: 0 9px 2px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wd-tl-fill { transition: none; transform: scaleX(1); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .wd-slide, .wd-phone .wd-slide { transition: none; transform: none; }
  .wd-cap-live::before, .wdb[data-stage="3"] .wdb-status::before { animation: none; }
  .wd-devices.is-playing .wd-dot.is-on::after { animation: none; }
}

/* ==========================================================================
   Build, Live stage: the real home page hero, its video scrubbed by page scroll,
   with the hero copy laid over it as live text, then the rest of the page.
   Sized in container units against the 1440px-wide capture.
   ========================================================================== */
.wdb-live { position: relative; will-change: transform; }
.wdb-hero { position: relative; aspect-ratio: 1440 / 908; overflow: hidden; background: #0B0B0D; container-type: inline-size; }
.wdb-hero-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wdb-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(11,11,13,.55) 0%, rgba(11,11,13,.15) 55%, transparent 80%), linear-gradient(180deg, transparent 70%, #0B0B0D 100%); }
.wdb-hero-nav { position: absolute; z-index: 2; left: 9.7cqw; right: 9.7cqw; top: 1.6cqw; height: 3.4cqw; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; font-family: var(--font-body); }
.wdb-hero-logo { display: flex; align-items: center; gap: .7cqw; }
.wdb-hero-logo img { height: 2.3cqw; width: auto; }
.wdb-hero-logo b { font-family: var(--font-head); font-weight: 800; font-size: 1.25cqw; letter-spacing: .02em; color: #fff; }
.wdb-hero-logo i { font-style: normal; background: var(--gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.wdb-hero-links { display: flex; gap: 2.2cqw; font-size: .95cqw; color: #D1D5D8; }
.wdb-hero-links span { display: inline-flex; align-items: center; gap: .4cqw; }
.wdb-hero-links svg { width: .7cqw; height: .7cqw; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wdb-hero-book { justify-self: end; }
.wdb-hero-book { font-family: var(--font-head); font-weight: 700; font-size: .85cqw; letter-spacing: .06em; color: #fff; background: var(--gradient); padding: .75cqw 1.3cqw; border-radius: .5cqw; }
.wdb-hero-copy { position: absolute; z-index: 2; left: 9.7cqw; top: 9.4cqw; right: 9.7cqw; }
.wdb-hero-h { font-family: var(--font-head); font-weight: 800; font-size: 6.1cqw; line-height: 1.02; letter-spacing: -.02em; color: #fff; }
.wdb-hero-h .g { background: var(--gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.wdb-hero-sub { font-family: var(--font-body); font-size: 1.3cqw; line-height: 1.6; color: #9CA3AF; max-width: 36cqw; margin: 2.4cqw 0 2.6cqw; }
.wdb-hero-ctas { display: flex; gap: 1.1cqw; }
.wdb-hero-ctas span { display: inline-flex; align-items: center; gap: .6cqw; font-family: var(--font-head); font-weight: 700; font-size: .95cqw; letter-spacing: .05em; padding: 1.15cqw 2cqw; border-radius: .7cqw; white-space: nowrap; }
.wdb-hero-ctas svg { width: 1cqw; height: 1cqw; }
.wdb-hero-b1 { color: #fff; background: var(--gradient); box-shadow: 0 0 2.5cqw rgba(255,106,61,.35); }
.wdb-hero-b2 { color: #00D4FF; border: 1px solid rgba(0,212,255,.6); }
.wdb-rest { overflow: hidden; }
.wdb-rest img { display: block; width: 100%; height: auto; margin-top: -63.06%; } /* skip the captured hero: 908 of 1440 */

/* Build section caption: stage title left, description beside it (no Explore button; this is the live site) */
.wdb-caption { display: flex; align-items: baseline; gap: 10px 28px; flex: 1 1 auto; }
.wdb-cap-t { flex: none; min-width: 7.5em; }
.wdb-cap-d { margin-top: 0; }
@media (max-width: 640px) { .wdb-caption { flex-direction: column; gap: 4px; } }

/* Portfolio group headings centered */
#pfClientTitle, #pfClientSub, #pfConceptTitle, #pfConceptSub { text-align: center; }
#pfClientSub, #pfConceptSub { max-width: 640px; margin-left: auto !important; margin-right: auto !important; }
#demo.wdb-sec .section-sub { max-width: none; }

/* Client review (Jacob Mizell) */
.wd-review { position: relative; isolation: isolate; overflow: clip; padding: clamp(64px, 7vw, 100px) 0; border-top: 1px solid rgba(255,255,255,.05); }
.wd-review > .container { position: relative; z-index: 1; }
.wd-review-wrap { max-width: 760px; margin: clamp(28px, 3vw, 40px) auto 0; display: grid; gap: 16px; justify-items: center; }
.wd-review-wrap .rv-card { width: 100%; }
.wd-review-wrap .rv-text p { font-size: 16.5px; }