/*
  webdesignloop.com (Build 44) | Web Design Agency | Marion IN / USD
  Theme: Pure White #FFFFFF + Electric Cobalt Blue #2563EB (FIRST BLUE in 44 builds!)
  Nav: FLOATING PILL NAV (bar-to-pill on scroll - NEVER done in 44 builds!)
  Hero: BENTO GRID HOMEPAGE (full-viewport bento as first section - unique!)
  Work: 2-COL EQUAL CASE STUDY CARDS (vs masonry/scroll in 41-43)
  Services: 3x2 GRID with 6 services (MOST services in series!)
  Process: CONNECTED LEFT-BORDER STEPS (vs horizontal/timeline in 41-43)
  Testimonials: 2x2 QUOTE CARD GRID (vs carousel/2x3/marquee in 41-43)
  Pricing: 2+1 LAYOUT with monthly retainer (LOOP retainer = FIRST recurring pricing!)
  FAQ: LARGE NUMBERED single column (vs 2-col/single-col/staggered in 41-43)
  CTA: CENTERED TEXT ONLY, no image (vs split/full-dark/band in 41-43)
  Footer: 5-COL MINIMAL on white (FIRST 5-col in 44 builds!)
  Fonts: Bricolage Grotesque (display) + Figtree (body) - BOTH first use in 44 builds!
  CSS prefix: wdl-
*/
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,400;12..96,500;12..96,700;12..96,800&family=Figtree:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  --wdl-white:   #FFFFFF;
  --wdl-bg:      #F7F9FF;
  --wdl-surface: #EEF2FF;
  --wdl-card:    #E8EDFF;
  --wdl-blue:    #2563EB;
  --wdl-blue2:   #1D4ED8;
  --wdl-blue3:   #1E40AF;
  --wdl-bluet:   rgba(37,99,235,.08);
  --wdl-bluet2:  rgba(37,99,235,.16);
  --wdl-dark:    #18181B;
  --wdl-ink:     #09090B;
  --wdl-mid:     #71717A;
  --wdl-muted:   #A1A1AA;
  --wdl-border:  rgba(37,99,235,.12);
  --wdl-border2: #E4E4E7;
  --wdl-nav-h:   64px;
  --wdl-max:     1080px;
  --wdl-r:       4px;
  --wdl-r2:      8px;
  --wdl-r3:      16px;
  --wdl-fh:      'Bricolage Grotesque', system-ui, sans-serif;
  --wdl-fb:      'Figtree', system-ui, sans-serif;
  --wdl-ease:    all 0.22s cubic-bezier(.4,0,.2,1);
  --wdl-sh:      0 2px 16px rgba(37,99,235,.12);
  --wdl-sh2:     0 8px 40px rgba(37,99,235,.18);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--wdl-white); color:var(--wdl-dark); font-family:var(--wdl-fb); font-size:1rem; line-height:1.7; overflow-x:hidden; }
img,svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
input,textarea,select { font-family:inherit; }
address { font-style:normal; }

h1 { font-family:var(--wdl-fh); font-size:clamp(2.8rem,5.5vw,6.4rem); font-weight:800; line-height:.95; letter-spacing:-.025em; }
h2 { font-family:var(--wdl-fh); font-size:clamp(2rem,3.5vw,3.6rem); font-weight:700; line-height:1; letter-spacing:-.02em; }
h3 { font-family:var(--wdl-fh); font-size:1.1rem; font-weight:700; letter-spacing:-.01em; }
p  { font-size:.92rem; line-height:1.82; color:var(--wdl-mid); }

/* ============================================================
   FLOATING PILL NAV (FIRST in 44 builds!)
   ============================================================ */
.wdl-nav {
  position:fixed; top:0; left:0; right:0;
  height:var(--wdl-nav-h); z-index:900;
  transition:all .28s cubic-bezier(.4,0,.2,1);
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--wdl-border2);
}
.wdl-nav-inner {
  max-width:var(--wdl-max); margin:0 auto; padding:0 2rem;
  display:flex; align-items:center; justify-content:space-between; height:100%;
}
/* Floating pill state - applied via JS on scroll */
.wdl-nav.wdl-floating {
  top:.8rem; left:50%; right:auto;
  transform:translateX(-50%);
  width:min(var(--wdl-max),calc(100vw - 2rem));
  border-radius:100px;
  height:52px;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--wdl-border);
  box-shadow:var(--wdl-sh2);
}
.wdl-nav.wdl-floating .wdl-nav-inner { padding:0 1.2rem; }
.wdl-nav-logo { font-family:var(--wdl-fh); font-size:1rem; font-weight:800; color:var(--wdl-dark); letter-spacing:-.02em; white-space:nowrap; }
.wdl-nav-logo span { color:var(--wdl-blue); }
.wdl-nav-links { display:flex; align-items:center; gap:.1rem; }
.wdl-nl { font-family:var(--wdl-fb); font-size:.9rem; font-weight:600; color:var(--wdl-mid); padding:.38rem .72rem; border-radius:100px; transition:var(--wdl-ease); white-space:nowrap; }
.wdl-nl:hover,.wdl-nl.wdl-on { color:var(--wdl-dark); background:var(--wdl-surface); }
.wdl-nav-cta { font-family:var(--wdl-fb); font-size:.9rem; font-weight:700; color:white; background:var(--wdl-blue); padding:.42rem 1.2rem; border-radius:100px; transition:background .14s; white-space:nowrap; }
.wdl-nav-cta:hover { background:var(--wdl-blue2); }
.wdl-nav-svc { position:relative; }
.wdl-nav-svc-trigger { font-family:var(--wdl-fb); font-size:.9rem; font-weight:600; color:var(--wdl-mid); padding:.38rem .72rem; border-radius:100px; transition:var(--wdl-ease); cursor:pointer; display:flex; align-items:center; gap:.2rem; }
.wdl-nav-svc-trigger:hover { color:var(--wdl-dark); background:var(--wdl-surface); }
.wdl-svc-drop { position:absolute; top:calc(100% + .5rem); left:50%; transform:translateX(-50%); background:white; border:1px solid var(--wdl-border); border-radius:var(--wdl-r3); padding:.7rem; box-shadow:var(--wdl-sh); opacity:0; pointer-events:none; transition:opacity .18s,transform .2s; width:240px; }
.wdl-nav-svc.wdl-drop-open .wdl-svc-drop { opacity:1; pointer-events:auto; }
.wdl-svc-drop-lk { display:block; font-size:.82rem; color:var(--wdl-mid); padding:.36rem .7rem; border-radius:var(--wdl-r2); transition:var(--wdl-ease); }
.wdl-svc-drop-lk:hover { color:var(--wdl-blue); background:var(--wdl-surface); }
.wdl-nav-right { display:flex; align-items:center; gap:.5rem; }
/* Mobile hamburger */
.wdl-ham { display:none; width:36px; height:36px; flex-direction:column; align-items:center; justify-content:center; gap:5px; border-radius:100px; border:1.5px solid var(--wdl-border2); cursor:pointer; }
.wdl-ham span { width:15px; height:1.5px; background:var(--wdl-dark); border-radius:2px; display:block; transition:var(--wdl-ease); }
/* Mobile overlay + drawer */
.wdl-mob-ov { position:fixed; inset:0; background:rgba(0,0,0,.3); z-index:910; opacity:0; pointer-events:none; transition:opacity .22s; }
.wdl-mob-ov.wdl-ov-on { opacity:1; pointer-events:auto; }
.wdl-mob-draw { position:fixed; top:0; left:0; bottom:0; width:280px; background:white; z-index:920; transform:translateX(-100%); transition:transform .28s cubic-bezier(.4,0,.2,1); padding:1.4rem; overflow-y:auto; box-shadow:4px 0 24px rgba(0,0,0,.1); }
.wdl-mob-draw.wdl-draw-on { transform:none; }
.wdl-draw-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.6rem; padding-bottom:.9rem; border-bottom:1px solid var(--wdl-border2); }
.wdl-draw-lk { display:flex; align-items:center; justify-content:space-between; padding:.64rem 0; border-bottom:1px solid var(--wdl-border2); font-family:var(--wdl-fh); font-size:.9rem; font-weight:600; color:var(--wdl-mid); transition:color .14s; }
.wdl-draw-lk:hover { color:var(--wdl-blue); }
.wdl-draw-svc-h { font-size:.42rem; font-weight:700; text-transform:uppercase; letter-spacing:.28em; color:var(--wdl-muted); margin:1rem 0 .4rem; }

/* ============================================================
   BENTO GRID HOMEPAGE HERO (FIRST in 44 builds!)
   ============================================================ */
.wdl-bento { padding:calc(var(--wdl-nav-h) + 2rem) 0 5rem; }
.wdl-bento-shell { max-width:var(--wdl-max); margin:0 auto; padding:0 2rem; }
.wdl-bento-grid {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  grid-template-rows:auto auto;
  gap:1rem;
}
/* Main hero cell - left, tall */
.wdl-bento-main {
  grid-column:1; grid-row:1 / 3;
  background:var(--wdl-bg); border:1.5px solid var(--wdl-border);
  border-radius:var(--wdl-r3); padding:3.5rem 2.8rem;
  display:flex; flex-direction:column; justify-content:space-between;
  min-height:480px;
}
.wdl-bento-eyebrow { font-family:var(--wdl-fb); font-size:.52rem; font-weight:700; text-transform:uppercase; letter-spacing:.28em; color:var(--wdl-blue); background:var(--wdl-bluet); border:1px solid var(--wdl-border); padding:.2rem .82rem; border-radius:100px; display:inline-block; margin-bottom:1.4rem; }
.wdl-bento-main h1 { color:var(--wdl-dark); margin-bottom:.8rem; }
.wdl-bento-main h1 em { color:var(--wdl-blue); font-style:normal; }
.wdl-bento-sub { max-width:42ch; color:var(--wdl-mid); font-size:.95rem; margin-bottom:2rem; }
.wdl-bento-acts { display:flex; gap:.6rem; flex-wrap:wrap; }
.wdl-bento-stats { display:flex; gap:2.5rem; margin-top:3rem; padding-top:2rem; border-top:1px solid var(--wdl-border2); }
.wdl-bs-n { font-family:var(--wdl-fh); font-size:2.2rem; font-weight:800; color:var(--wdl-blue); line-height:1; letter-spacing:-.02em; }
.wdl-bs-l { font-size:.52rem; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:var(--wdl-muted); margin-top:.1rem; }
/* Image cell - top right */
.wdl-bento-visual {
  grid-column:2; grid-row:1;
  border-radius:var(--wdl-r3); overflow:hidden; position:relative;
  background:var(--wdl-surface); border:1.5px solid var(--wdl-border);
  min-height:280px;
}
.wdl-bento-visual img { width:100%; height:100%; object-fit:cover; }
/* Blue "loop" accent */
.wdl-bento-visual::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(37,99,235,.12) 0%,transparent 60%); }
/* Client + CTA cell - bottom right */
.wdl-bento-info {
  grid-column:2; grid-row:2;
  background:var(--wdl-dark); border-radius:var(--wdl-r3);
  padding:1.8rem; display:flex; flex-direction:column; justify-content:space-between;
}
.wdl-bento-clients-lbl { font-size:.44rem; font-weight:700; text-transform:uppercase; letter-spacing:.22em; color:rgba(255,255,255,.25); margin-bottom:.7rem; }
.wdl-bento-client-names { display:flex; flex-wrap:wrap; gap:.3rem; }
.wdl-bento-cl { font-family:var(--wdl-fb); font-size:.72rem; font-weight:600; color:rgba(255,255,255,.35); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); padding:.18rem .58rem; border-radius:100px; }
.wdl-bento-badge { margin-top:1rem; display:flex; align-items:center; gap:.5rem; }
.wdl-bento-badge-n { font-family:var(--wdl-fh); font-size:2rem; font-weight:800; color:white; line-height:1; }
.wdl-bento-badge-l { font-size:.6rem; color:rgba(255,255,255,.3); max-width:14ch; line-height:1.4; }

/* ============================================================
   SERVICE TICKER (marquee of service names)
   ============================================================ */
.wdl-ticker { background:var(--wdl-blue); overflow:hidden; padding:.55rem 0; }
.wdl-ticker-inner { display:flex; width:max-content; animation:wdlTick 36s linear infinite; gap:0; }
.wdl-ticker:hover .wdl-ticker-inner { animation-play-state:paused; }
@keyframes wdlTick { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.wdl-tick-item { font-family:var(--wdl-fh); font-size:.78rem; font-weight:700; letter-spacing:.08em; color:rgba(255,255,255,.7); padding:0 2.2rem; border-right:1px solid rgba(255,255,255,.15); white-space:nowrap; }
.wdl-tick-sep { color:rgba(255,255,255,.3); font-size:.5rem; }

/* ============================================================
   CASE STUDY 2-COL EQUAL CARDS
   ============================================================ */
.wdl-cases-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:2.5rem; }
.wdl-case-card { border-radius:var(--wdl-r3); overflow:hidden; border:1.5px solid var(--wdl-border2); transition:var(--wdl-ease); }
.wdl-case-card:hover { border-color:var(--wdl-blue); box-shadow:var(--wdl-sh); transform:translateY(-3px); }
.wdl-cc-img { height:220px; position:relative; overflow:hidden; }
.wdl-cc-img img { width:100%; height:100%; object-fit:cover; opacity:.22; transition:opacity .3s; }
.wdl-case-card:hover .wdl-cc-img img { opacity:.32; }
.wdl-cc-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(9,9,11,.9) 0%,transparent 55%); }
.wdl-cc-tags { position:absolute; top:.8rem; left:.8rem; display:flex; gap:.3rem; flex-wrap:wrap; }
.wdl-cc-tag { font-family:var(--wdl-fb); font-size:.42rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.6); background:rgba(37,99,235,.3); border:1px solid rgba(37,99,235,.25); padding:.06rem .4rem; border-radius:var(--wdl-r); }
.wdl-cc-body { padding:1.4rem; }
.wdl-cc-year { font-size:.56rem; color:var(--wdl-muted); margin-bottom:.1rem; }
.wdl-cc-nm { font-family:var(--wdl-fh); font-size:1.1rem; font-weight:700; color:var(--wdl-dark); margin-bottom:.1rem; }
.wdl-cc-scope { font-size:.68rem; color:var(--wdl-mid); margin-bottom:.5rem; }
.wdl-cc-result { font-size:.76rem; color:var(--wdl-blue); line-height:1.55; }

/* ============================================================
   6-SERVICE 3x2 GRID
   ============================================================ */
.wdl-svc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; margin-top:2rem; }
.wdl-svc-card { border:1.5px solid var(--wdl-border2); border-radius:var(--wdl-r3); padding:1.6rem; transition:var(--wdl-ease); position:relative; overflow:hidden; }
.wdl-svc-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--wdl-blue); transform:scaleX(0); transform-origin:left; transition:transform .22s; }
.wdl-svc-card:hover { border-color:var(--wdl-blue); box-shadow:var(--wdl-sh); }
.wdl-svc-card:hover::before { transform:scaleX(1); }
.wdl-sc-num { font-family:var(--wdl-fh); font-size:2.8rem; font-weight:800; color:var(--wdl-card); letter-spacing:-.03em; line-height:1; margin-bottom:.4rem; }
.wdl-sc-nm { font-family:var(--wdl-fh); font-size:.94rem; font-weight:700; color:var(--wdl-dark); margin-bottom:.2rem; }
.wdl-sc-tag { font-size:.6rem; font-weight:700; color:var(--wdl-blue); margin-bottom:.5rem; }
.wdl-sc-p { font-size:.78rem; line-height:1.7; margin-bottom:.9rem; }
.wdl-sc-lk { display:flex; align-items:center; gap:.28rem; font-size:.78rem; font-weight:700; color:var(--wdl-mid); transition:color .14s; }
.wdl-svc-card:hover .wdl-sc-lk { color:var(--wdl-blue); }

/* ============================================================
   CONNECTED LEFT-BORDER PROCESS STEPS
   ============================================================ */
.wdl-proc-list { max-width:680px; margin:2.5rem auto 0; }
.wdl-proc-item { display:flex; gap:2rem; padding-bottom:2.5rem; position:relative; }
.wdl-proc-item::before { content:''; position:absolute; left:19px; top:40px; bottom:0; width:1px; background:var(--wdl-border2); }
.wdl-proc-item:last-child::before { display:none; }
.wdl-proc-dot { width:40px; height:40px; border-radius:50%; background:white; border:2px solid var(--wdl-blue); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:var(--wdl-ease); }
.wdl-proc-item:hover .wdl-proc-dot { background:var(--wdl-blue); }
.wdl-proc-num { font-family:var(--wdl-fh); font-size:.7rem; font-weight:800; color:var(--wdl-blue); transition:color .14s; }
.wdl-proc-item:hover .wdl-proc-num { color:white; }
.wdl-proc-bd { flex:1; padding-top:.6rem; }
.wdl-proc-h { font-family:var(--wdl-fh); font-size:.96rem; font-weight:700; color:var(--wdl-dark); margin-bottom:.25rem; }
.wdl-proc-p { font-size:.82rem; line-height:1.78; }

/* ============================================================
   2x2 TESTIMONIAL QUOTE CARDS
   ============================================================ */
.wdl-testi-quad { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:2.5rem; }
.wdl-tq { background:white; border:1.5px solid var(--wdl-border2); border-radius:var(--wdl-r3); padding:1.8rem; transition:var(--wdl-ease); }
.wdl-tq:hover { border-color:var(--wdl-blue); box-shadow:var(--wdl-sh); }
.wdl-tq-bar { width:28px; height:3px; background:var(--wdl-blue); border-radius:2px; margin-bottom:.9rem; }
.wdl-tq-q { font-family:var(--wdl-fh); font-size:.92rem; font-weight:400; color:var(--wdl-dark); line-height:1.65; font-style:italic; margin-bottom:.9rem; }
.wdl-tq-who { font-family:var(--wdl-fb); font-size:.76rem; font-weight:700; color:var(--wdl-dark); }
.wdl-tq-co { font-size:.62rem; color:var(--wdl-blue); margin-top:.08rem; }

/* ============================================================
   PRICING 2+1 LAYOUT with LOOP RETAINER
   ============================================================ */
.wdl-price-main { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:2rem; }
.wdl-price-card { border:1.5px solid var(--wdl-border2); border-radius:var(--wdl-r3); padding:2rem; }
.wdl-price-card.wdl-pfeat { border-color:var(--wdl-blue); background:var(--wdl-bluet); position:relative; }
.wdl-feat-badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%); font-family:var(--wdl-fb); font-size:.44rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; background:var(--wdl-blue); color:white; padding:.2rem .7rem; border-radius:100px; white-space:nowrap; }
.wdl-price-nm { font-family:var(--wdl-fh); font-size:1.3rem; font-weight:700; color:var(--wdl-dark); margin-bottom:.1rem; }
.wdl-price-scope { font-size:.6rem; color:var(--wdl-mid); margin-bottom:.5rem; }
.wdl-price-amt { font-family:var(--wdl-fh); font-size:3.2rem; font-weight:800; color:var(--wdl-blue); line-height:1; letter-spacing:-.03em; }
.wdl-price-per { font-size:.5rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--wdl-muted); margin-bottom:.2rem; }
.wdl-price-wks { font-size:.7rem; font-style:italic; color:var(--wdl-mid); margin-bottom:.4rem; }
.wdl-price-tag2 { font-size:.76rem; color:var(--wdl-mid); border-top:1px solid var(--wdl-border2); padding-top:.6rem; margin-top:.4rem; }
.wdl-price-inc { display:flex; flex-direction:column; gap:.22rem; margin:1rem 0 1.4rem; }
.wdl-price-row { display:flex; align-items:flex-start; gap:.3rem; font-size:.76rem; color:var(--wdl-mid); }
.wdl-price-row svg { color:var(--wdl-blue); flex-shrink:0; margin-top:.04rem; }
/* LOOP RETAINER row below main 2 */
.wdl-price-loop { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1rem; align-items:start; }
.wdl-price-loop-card { border:1.5px dashed var(--wdl-blue); border-radius:var(--wdl-r3); padding:1.6rem; background:var(--wdl-bg); }
.wdl-price-loop-badge { display:inline-flex; align-items:center; gap:.3rem; font-family:var(--wdl-fb); font-size:.48rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:var(--wdl-blue); background:var(--wdl-surface); border:1px solid var(--wdl-border); padding:.2rem .6rem; border-radius:100px; margin-bottom:.5rem; }
.wdl-price-ent-card { border:1.5px solid var(--wdl-border2); border-radius:var(--wdl-r3); padding:1.6rem; }

/* ============================================================
   LARGE NUMBERED FAQ
   ============================================================ */
.wdl-faq-stack { max-width:700px; margin:2.5rem auto 0; }
.wdl-faq-row { border-bottom:1px solid var(--wdl-border2); padding:.5rem 0; }
.wdl-faq-hd { display:flex; align-items:flex-start; gap:1.4rem; cursor:pointer; padding:.9rem 0; }
.wdl-faq-n { font-family:var(--wdl-fh); font-size:2rem; font-weight:800; color:var(--wdl-card); line-height:1; flex-shrink:0; transition:color .16s; min-width:2ch; }
.wdl-faq-row.wdl-faq-open .wdl-faq-n { color:var(--wdl-blue); }
.wdl-faq-qtxt { font-family:var(--wdl-fh); font-size:.9rem; font-weight:600; color:var(--wdl-mid); transition:color .16s; flex:1; line-height:1.4; padding-top:.2rem; }
.wdl-faq-row.wdl-faq-open .wdl-faq-qtxt { color:var(--wdl-dark); }
.wdl-faq-ico { width:22px; height:22px; flex-shrink:0; margin-top:.1rem; color:var(--wdl-muted); transition:var(--wdl-ease); }
.wdl-faq-row.wdl-faq-open .wdl-faq-ico { color:var(--wdl-blue); transform:rotate(45deg); }
.wdl-faq-ans { max-height:0; overflow:hidden; transition:max-height .3s ease; }
.wdl-faq-row.wdl-faq-open .wdl-faq-ans { max-height:200px; }
.wdl-faq-atxt { font-size:.86rem; color:var(--wdl-mid); padding:.1rem 0 1.2rem 3.4rem; line-height:1.8; }

/* ============================================================
   SERVICE PAGE
   ============================================================ */
.wdl-svc-layout { max-width:var(--wdl-max); margin:0 auto; padding:5rem 2rem; display:grid; grid-template-columns:1fr 220px; gap:5rem; align-items:start; }
.wdl-svc-bdy h2 { font-family:var(--wdl-fh); font-size:1.4rem; font-weight:700; color:var(--wdl-blue); margin:2.5rem 0 .5rem; }
.wdl-svc-bdy p { margin-bottom:.88rem; }
.wdl-svc-inc-list { display:flex; flex-direction:column; gap:.38rem; margin-bottom:1.4rem; }
.wdl-svc-inc-row { display:flex; align-items:flex-start; gap:.45rem; font-size:.86rem; color:var(--wdl-dark); }
.wdl-svc-inc-row svg { color:var(--wdl-blue); flex-shrink:0; margin-top:.1rem; }
.wdl-svc-del { background:var(--wdl-surface); border-left:3px solid var(--wdl-blue); padding:.72rem .9rem; border-radius:0 var(--wdl-r) var(--wdl-r) 0; margin-bottom:1.2rem; }
.wdl-svc-del p { margin:0; font-size:.82rem; color:var(--wdl-mid); }
/* Aside - light card (NOT dark - so we use muted/dim for links) */
.wdl-aside-box { background:var(--wdl-bg); border:1.5px solid var(--wdl-border); border-radius:var(--wdl-r3); overflow:hidden; position:sticky; top:calc(var(--wdl-nav-h) + 1.5rem); }
.wdl-aside-img img { width:100%; height:80px; object-fit:cover; opacity:.4; display:block; }
.wdl-aside-bd { padding:1.2rem; }
.wdl-aside-from { font-size:.44rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:var(--wdl-muted); margin-bottom:.2rem; }
.wdl-aside-price { font-family:var(--wdl-fh); font-size:.88rem; font-weight:700; color:var(--wdl-blue); margin-bottom:.8rem; }
/* Other service links - on light bg aside = use dark muted */
.wdl-other-h { font-size:.42rem; font-weight:700; text-transform:uppercase; letter-spacing:.22em; color:var(--wdl-muted); margin:1.4rem 0 .5rem; }
.wdl-other-lk { display:flex; align-items:center; gap:.38rem; font-size:.8rem; color:var(--wdl-mid); padding:.34rem 0; border-bottom:1px solid var(--wdl-border2); transition:color .14s; }
.wdl-other-lk:hover { color:var(--wdl-blue); }

/* ============================================================
   BUILDER
   ============================================================ */
.wdl-build-wrap { max-width:var(--wdl-max); margin:0 auto; padding:4rem 2rem 8rem; display:grid; grid-template-columns:1fr 255px; gap:4rem; align-items:start; }
.wdl-bld-sec { margin-bottom:2.2rem; }
.wdl-bld-lbl { display:block; font-family:var(--wdl-fb); font-size:.44rem; font-weight:700; text-transform:uppercase; letter-spacing:.24em; color:var(--wdl-blue); margin-bottom:.9rem; }
.wdl-pick { background:white; border:1.5px solid var(--wdl-border2); border-radius:var(--wdl-r2); padding:.78rem 1rem; display:flex; align-items:center; gap:.65rem; cursor:pointer; user-select:none; transition:var(--wdl-ease); margin-bottom:.4rem; }
.wdl-pick:hover { border-color:var(--wdl-blue); }
.wdl-pick.wdl-picked { border-color:var(--wdl-blue); background:var(--wdl-bluet); }
.wdl-pick-box { width:16px; height:16px; border:1.5px solid var(--wdl-border2); border-radius:var(--wdl-r); flex-shrink:0; transition:var(--wdl-ease); }
.wdl-pick.wdl-picked .wdl-pick-box { background:var(--wdl-blue); border-color:var(--wdl-blue); }
.wdl-pick-nm { font-size:.84rem; color:var(--wdl-mid); flex:1; }
.wdl-pick.wdl-picked .wdl-pick-nm { color:var(--wdl-dark); font-weight:700; }
.wdl-pick-pr { font-size:.7rem; font-weight:700; color:var(--wdl-blue); white-space:nowrap; }
.wdl-adn-wrap { display:flex; flex-wrap:wrap; gap:.4rem; }
.wdl-adn-chip { background:white; border:1.5px solid var(--wdl-border2); border-radius:100px; padding:.44rem .88rem; cursor:pointer; user-select:none; transition:var(--wdl-ease); }
.wdl-adn-chip:hover { border-color:var(--wdl-blue); }
.wdl-adn-chip.wdl-chip-on { border-color:var(--wdl-blue); background:var(--wdl-surface); }
.wdl-chip-nm { font-size:.8rem; font-weight:600; color:var(--wdl-mid); }
.wdl-adn-chip.wdl-chip-on .wdl-chip-nm { color:var(--wdl-dark); }
.wdl-chip-pr { font-size:.58rem; color:var(--wdl-muted); }
.wdl-adn-chip.wdl-chip-on .wdl-chip-pr { color:var(--wdl-blue); }
.wdl-hrs-box { background:white; border:1.5px solid var(--wdl-border2); border-radius:var(--wdl-r2); padding:.9rem 1rem; }
.wdl-hrs-hd { display:flex; justify-content:space-between; align-items:center; margin-bottom:.5rem; }
.wdl-hrs-lbl { font-size:.82rem; color:var(--wdl-mid); }
.wdl-hrs-val { font-family:var(--wdl-fh); font-size:1.8rem; font-weight:800; color:var(--wdl-blue); line-height:1; }
.wdl-hrs-slider { -webkit-appearance:none; width:100%; height:3px; background:var(--wdl-border2); border-radius:2px; cursor:pointer; }
.wdl-hrs-slider::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--wdl-blue); cursor:pointer; }
.wdl-hrs-note { font-size:.64rem; color:var(--wdl-muted); margin-top:.4rem; }
.wdl-receipt { background:var(--wdl-dark); border-radius:var(--wdl-r3); overflow:hidden; position:sticky; top:calc(var(--wdl-nav-h) + 1.5rem); }
.wdl-receipt-top { background:rgba(255,255,255,.04); padding:.82rem 1.1rem; border-bottom:1px solid rgba(255,255,255,.06); }
.wdl-receipt-lbl { font-family:var(--wdl-fh); font-size:.72rem; font-weight:700; color:rgba(255,255,255,.22); }
.wdl-receipt-lines { padding:.8rem 1.1rem; min-height:56px; }
.wdl-receipt-empty { font-size:.74rem; color:rgba(255,255,255,.2); font-style:italic; }
.wdl-receipt-ln { display:flex; justify-content:space-between; gap:.5rem; font-size:.74rem; margin-bottom:.35rem; }
.wdl-receipt-lnm { color:rgba(255,255,255,.3); }
.wdl-receipt-lpr { font-weight:700; color:rgba(255,255,255,.65); }
.wdl-receipt-foot { border-top:1px solid rgba(255,255,255,.06); padding:.82rem 1.1rem; }
.wdl-receipt-tot { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:.82rem; }
.wdl-receipt-totl { font-size:.44rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:rgba(255,255,255,.18); }
.wdl-receipt-totv { font-family:var(--wdl-fh); font-size:2.6rem; font-weight:800; color:var(--wdl-blue); line-height:1; letter-spacing:-.03em; }
.wdl-receipt-go { display:block; width:100%; background:var(--wdl-blue); color:white; font-family:var(--wdl-fb); font-size:.88rem; font-weight:700; padding:.76rem; border-radius:100px; border:none; cursor:pointer; transition:background .14s; }
.wdl-receipt-go:hover:not(:disabled) { background:var(--wdl-blue2); }
.wdl-receipt-go:disabled { opacity:.22; cursor:not-allowed; }

/* ============================================================
   CHECKOUT
   ============================================================ */
.wdl-co-wrap { max-width:860px; margin:0 auto; padding:5rem 2rem; display:grid; grid-template-columns:1fr 220px; gap:4rem; align-items:start; }
.wdl-fg { margin-bottom:.6rem; }
.wdl-fl { display:block; font-family:var(--wdl-fb); font-size:.44rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--wdl-muted); margin-bottom:.28rem; }
.wdl-fi { width:100%; background:white; border:1.5px solid var(--wdl-border2); border-radius:var(--wdl-r2); padding:.64rem .9rem; color:var(--wdl-dark); font-size:.9rem; transition:border-color .15s; }
.wdl-fi:focus { outline:none; border-color:var(--wdl-blue); box-shadow:0 0 0 3px var(--wdl-bluet2); }
.wdl-fi::placeholder { color:var(--wdl-muted); }
.wdl-agree { display:flex; align-items:flex-start; gap:.5rem; font-size:.78rem; color:var(--wdl-mid); margin:.88rem 0; line-height:1.6; }
.wdl-agree input { margin-top:.12rem; accent-color:var(--wdl-blue); }
.wdl-agree a { color:var(--wdl-blue); }
.wdl-co-sum { background:var(--wdl-bg); border:1.5px solid var(--wdl-border); border-radius:var(--wdl-r3); overflow:hidden; position:sticky; top:calc(var(--wdl-nav-h) + 1.5rem); }
.wdl-co-sum-hd { background:var(--wdl-surface); padding:.7rem 1rem; border-bottom:1px solid var(--wdl-border); }
.wdl-co-sum-hl { font-family:var(--wdl-fh); font-size:.72rem; font-weight:700; color:var(--wdl-mid); }
.wdl-co-sum-bd { padding:.84rem 1rem; }
.wdl-co-ln { display:flex; justify-content:space-between; gap:1rem; font-size:.74rem; margin-bottom:.35rem; }
.wdl-co-lnm { color:var(--wdl-mid); }
.wdl-co-lpr { font-weight:700; color:var(--wdl-dark); }
.wdl-co-div { border:none; border-top:1px solid var(--wdl-border2); margin:.5rem 0; }
.wdl-co-tot { display:flex; justify-content:space-between; align-items:flex-end; }
.wdl-co-totl { font-size:.44rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--wdl-muted); }
.wdl-co-totv { font-family:var(--wdl-fh); font-size:2.2rem; font-weight:800; color:var(--wdl-blue); line-height:1; }

/* ============================================================
   PAGE CAP
   ============================================================ */
.wdl-pagecap { padding:calc(var(--wdl-nav-h) + 4.5rem) 2rem 4rem; text-align:center; background:var(--wdl-bg); border-bottom:1.5px solid var(--wdl-border2); position:relative; overflow:hidden; }
.wdl-pagecap::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:linear-gradient(to right,transparent,var(--wdl-blue),transparent); }
.wdl-pagecap-label { font-family:var(--wdl-fb); font-size:.48rem; font-weight:700; text-transform:uppercase; letter-spacing:.28em; color:var(--wdl-blue); background:var(--wdl-surface); border:1px solid var(--wdl-border); padding:.2rem .82rem; border-radius:100px; display:inline-block; margin-bottom:.8rem; }
.wdl-pagecap h1 { color:var(--wdl-dark); max-width:18ch; margin:0 auto; }
.wdl-pagecap-sub { color:var(--wdl-mid); max-width:52ch; margin:.6rem auto 0; font-size:.95rem; }

/* ============================================================
   LEGAL PAGES
   ============================================================ */
.wdl-legal { max-width:800px; margin:0 auto; padding:5rem 2rem 8rem; }
.wdl-legal h2 { font-family:var(--wdl-fh); font-size:1.5rem; font-weight:700; color:var(--wdl-blue); margin:2.8rem 0 .5rem; }
.wdl-legal h3 { font-family:var(--wdl-fh); font-size:.92rem; font-weight:700; color:var(--wdl-dark); margin:1.4rem 0 .3rem; }
.wdl-legal p { margin-bottom:.88rem; font-size:.9rem; }
.wdl-legal ul { padding-left:1.2rem; margin:.4rem 0 .88rem; }
.wdl-legal li { font-size:.9rem; list-style:disc; color:var(--wdl-mid); line-height:1.72; margin-bottom:.26rem; }
.wdl-legal a { color:var(--wdl-blue); }
.wdl-legal table { width:100%; border-collapse:collapse; font-size:.84rem; margin:.88rem 0 1.2rem; }
.wdl-legal th { background:var(--wdl-surface); color:var(--wdl-dark); padding:.5rem .9rem; text-align:left; font-family:var(--wdl-fh); font-size:.56rem; text-transform:uppercase; letter-spacing:.06em; border:1px solid var(--wdl-border2); }
.wdl-legal td { padding:.5rem .9rem; border:1px solid var(--wdl-border2); color:var(--wdl-mid); }
.wdl-legal address { background:var(--wdl-surface); border-left:3px solid var(--wdl-blue); padding:.88rem 1.1rem; font-size:.86rem; color:var(--wdl-mid); line-height:1.86; margin:.88rem 0; border-radius:0 var(--wdl-r) var(--wdl-r) 0; }
.wdl-legal-eff { display:inline-block; font-size:.68rem; color:var(--wdl-muted); background:var(--wdl-bg); border:1px solid var(--wdl-border2); padding:.24rem .7rem; border-radius:100px; margin-bottom:1.5rem; }
.wdl-result { min-height:74vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:6rem 2rem; }

/* ============================================================
   BUTTONS
   ============================================================ */
.wdl-btn-blue { display:inline-flex; align-items:center; gap:.4rem; font-family:var(--wdl-fb); font-size:.9rem; font-weight:700; color:white; background:var(--wdl-blue); padding:.7rem 2rem; border-radius:100px; transition:background .14s; border:none; cursor:pointer; white-space:nowrap; }
.wdl-btn-blue:hover { background:var(--wdl-blue2); }
.wdl-btn-dark { display:inline-flex; align-items:center; gap:.4rem; font-family:var(--wdl-fb); font-size:.9rem; font-weight:700; color:white; background:var(--wdl-dark); padding:.7rem 2rem; border-radius:100px; transition:background .14s; border:none; cursor:pointer; white-space:nowrap; }
.wdl-btn-dark:hover { background:var(--wdl-ink); }
.wdl-btn-outline { display:inline-flex; align-items:center; gap:.4rem; font-family:var(--wdl-fb); font-size:.9rem; font-weight:700; color:var(--wdl-dark); background:transparent; padding:.68rem 1.9rem; border-radius:100px; border:1.5px solid var(--wdl-border2); transition:var(--wdl-ease); white-space:nowrap; }
.wdl-btn-outline:hover { border-color:var(--wdl-blue); color:var(--wdl-blue); }
.wdl-btn-outline-sm { display:inline-flex; align-items:center; gap:.35rem; font-family:var(--wdl-fb); font-size:.82rem; font-weight:700; color:var(--wdl-mid); background:transparent; padding:.5rem 1.2rem; border-radius:100px; border:1.5px solid var(--wdl-border2); transition:var(--wdl-ease); white-space:nowrap; }
.wdl-btn-outline-sm:hover { border-color:var(--wdl-blue); color:var(--wdl-blue); }
/* Buttons for dark aside card context */
.wdl-btn-blue-sm { display:inline-flex; align-items:center; gap:.35rem; font-family:var(--wdl-fb); font-size:.82rem; font-weight:700; color:white; background:var(--wdl-blue); padding:.5rem 1rem; border-radius:100px; transition:background .14s; border:none; cursor:pointer; white-space:nowrap; }
.wdl-btn-blue-sm:hover { background:var(--wdl-blue2); }

/* ============================================================
   UTILITIES
   ============================================================ */
.wdl-shell { max-width:var(--wdl-max); margin:0 auto; padding:0 2rem; }
.wdl-slab { padding:8rem 0; }
.wdl-eyebrow { font-family:var(--wdl-fb); font-size:.48rem; font-weight:700; text-transform:uppercase; letter-spacing:.28em; color:var(--wdl-blue); display:inline-block; }
.wdl-rise { opacity:0; transform:translateY(14px); transition:opacity .48s ease,transform .48s ease; }
.wdl-rise.wdl-vis { opacity:1; transform:none; }
.wdl-center { text-align:center; }

/* ============================================================
   COOKIE + CHAT
   ============================================================ */
.wdl-ck-bar { position:fixed; bottom:0; left:0; right:0; background:var(--wdl-dark); border-top:2px solid var(--wdl-blue); z-index:9999; padding:.9rem 2rem; display:none; gap:1rem; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.wdl-ck-bar p { font-size:.78rem; color:rgba(255,255,255,.4); margin:0; }
.wdl-ck-bar a { color:var(--wdl-blue); }
.wdl-ck-btns { display:flex; gap:.4rem; flex-shrink:0; }
.wdl-ck-yes { background:var(--wdl-blue); color:white; font-family:var(--wdl-fb); font-size:.76rem; font-weight:700; padding:.38rem .92rem; border:none; border-radius:100px; cursor:pointer; }
.wdl-ck-no  { background:transparent; color:rgba(255,255,255,.3); font-family:var(--wdl-fb); font-size:.76rem; padding:.38rem .92rem; border:1px solid rgba(255,255,255,.12); border-radius:100px; cursor:pointer; }
.wdl-chat-fab { position:fixed; bottom:4.5rem; right:1.5rem; z-index:9990; width:52px; height:52px; background:var(--wdl-blue); border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 20px rgba(37,99,235,.4); cursor:pointer; border:none; transition:var(--wdl-ease); }
.wdl-chat-fab:hover { background:var(--wdl-blue2); transform:scale(1.06); }
.wdl-chatpop { position:fixed; bottom:7.5rem; right:1.5rem; z-index:9989; width:272px; background:white; border:1px solid var(--wdl-border); border-radius:var(--wdl-r3); box-shadow:var(--wdl-sh2); opacity:0; pointer-events:none; transform:translateY(8px) scale(.97); transition:opacity .2s,transform .22s; overflow:hidden; }
.wdl-chatpop.wdl-cp-on { opacity:1; pointer-events:auto; transform:none; }
.wdl-chatpop-hd { background:var(--wdl-blue); padding:.9rem 1rem; display:flex; align-items:center; justify-content:space-between; }
.wdl-chatpop-nm { font-family:var(--wdl-fh); font-size:.88rem; font-weight:700; color:white; }
.wdl-chatpop-sub { font-size:.52rem; color:rgba(255,255,255,.55); }
.wdl-chatpop-x { color:rgba(255,255,255,.6); }
.wdl-chatpop-bd { padding:.88rem; }
.wdl-chat-done { display:none; text-align:center; padding:.7rem; font-size:.82rem; color:var(--wdl-blue); font-weight:700; }
.wdl-chat-inp { width:100%; background:var(--wdl-bg); border:1px solid var(--wdl-border2); border-radius:var(--wdl-r2); padding:.44rem .76rem; font-size:.8rem; color:var(--wdl-dark); margin-bottom:.36rem; resize:none; }
.wdl-chat-send { width:100%; background:var(--wdl-blue); color:white; font-family:var(--wdl-fb); font-size:.78rem; font-weight:700; padding:.48rem; border-radius:100px; border:none; cursor:pointer; }

/* ============================================================
   5-COLUMN FOOTER (FIRST in 44 builds!)
   ============================================================ */
.wdl-foot { background:var(--wdl-bg); border-top:1.5px solid var(--wdl-border2); }
.wdl-foot-top { max-width:var(--wdl-max); margin:0 auto; padding:4.5rem 2rem 2.5rem; display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1fr; gap:2rem; }
.wdl-foot-logo { font-family:var(--wdl-fh); font-size:1rem; font-weight:800; color:var(--wdl-dark); letter-spacing:-.02em; }
.wdl-foot-logo span { color:var(--wdl-blue); }
.wdl-foot-tagline { font-size:.76rem; color:var(--wdl-muted); margin-top:.2rem; max-width:22ch; line-height:1.72; margin-bottom:.9rem; }
.wdl-foot-soc { display:flex; gap:.4rem; }
.wdl-foot-soc a { width:30px; height:30px; border:1px solid var(--wdl-border2); border-radius:100px; display:flex; align-items:center; justify-content:center; color:var(--wdl-muted); transition:var(--wdl-ease); }
.wdl-foot-soc a:hover { border-color:var(--wdl-blue); color:var(--wdl-blue); }
.wdl-foot-col-h { font-family:var(--wdl-fb); font-size:.4rem; font-weight:700; text-transform:uppercase; letter-spacing:.28em; color:var(--wdl-muted); margin-bottom:.9rem; }
.wdl-foot-links { display:flex; flex-direction:column; gap:.46rem; }
.wdl-foot-links a { font-size:.8rem; color:var(--wdl-mid); transition:color .14s; }
.wdl-foot-links a:hover { color:var(--wdl-blue); }
.wdl-foot-ct a { display:flex; align-items:flex-start; gap:.38rem; font-size:.78rem; color:var(--wdl-mid); transition:color .14s; margin-bottom:.5rem; }
.wdl-foot-ct a:hover { color:var(--wdl-blue); }
.wdl-foot-ct svg { color:var(--wdl-muted); flex-shrink:0; margin-top:.04rem; }
.wdl-foot-btm { border-top:1px solid var(--wdl-border2); max-width:var(--wdl-max); margin:0 auto; padding:1.2rem 2rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.wdl-foot-copy { font-size:.6rem; color:var(--wdl-muted); }
.wdl-foot-leg { display:flex; gap:1.1rem; flex-wrap:wrap; }
.wdl-foot-leg a { font-size:.6rem; color:var(--wdl-muted); transition:color .14s; }
.wdl-foot-leg a:hover { color:var(--wdl-blue); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px) {
  .wdl-nav.wdl-floating { width:calc(100vw - 2rem); }
  .wdl-nav-links,.wdl-nav-cta,.wdl-nav-svc { display:none; }
  .wdl-ham { display:flex; }
  .wdl-bento-grid { grid-template-columns:1fr; }
  .wdl-bento-main { min-height:auto; }
  .wdl-bento-visual { height:260px; min-height:auto; }
  .wdl-cases-grid { grid-template-columns:1fr; }
  .wdl-svc-grid { grid-template-columns:1fr 1fr; }
  .wdl-testi-quad { grid-template-columns:1fr; }
  .wdl-price-main { grid-template-columns:1fr; }
  .wdl-price-loop { grid-template-columns:1fr; }
  .wdl-build-wrap,.wdl-co-wrap,.wdl-svc-layout { grid-template-columns:1fr; gap:2.5rem; }
  .wdl-foot-top { grid-template-columns:1fr 1fr; gap:2rem; }
  .wdl-shell,.wdl-build-wrap,.wdl-co-wrap { padding-left:1.4rem; padding-right:1.4rem; }
  .wdl-svc-layout { padding:4rem 1.4rem; }
  .wdl-bento { padding:calc(var(--wdl-nav-h) + 1.5rem) 0 3rem; }
}
@media (max-width:640px) {
  .wdl-svc-grid { grid-template-columns:1fr; }
  .wdl-foot-top { grid-template-columns:1fr; }
  .wdl-bento-stats { gap:1.5rem; flex-wrap:wrap; }
}