/* ============================================================
   EightySix Digital — /what-i-do/ (Services hub)
   Bespoke layout. Tokens from styles.css; pl-stu band from plumbers.css;
   currency switcher wired by digital-marketing.js.
   ============================================================ */

.wid-h1{font-family:var(--display);font-weight:700;line-height:1.02;letter-spacing:-.025em;font-size:clamp(2.6rem,6.4vw,5rem)}
.wid-h2{font-family:var(--display);font-weight:600;line-height:1.04;letter-spacing:-.02em;font-size:clamp(2rem,4.4vw,3.4rem)}
.wid-kicker{display:inline-block;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;color:var(--volt);margin-bottom:14px}
.wid-kicker.kicker-dark{color:var(--volt-deep)}

/* ---------- HERO (dark) ---------- */
.wid-hero{position:relative;background:var(--ink);color:#fff;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding:120px 0 80px}
.wid-hero-glow{position:absolute;top:-10%;left:50%;transform:translateX(-50%);width:min(900px,90%);height:560px;background:radial-gradient(50% 50% at 50% 50%,rgba(228,106,44,.28),transparent 70%);filter:blur(10px);pointer-events:none}
.wid-hero-inner{position:relative;max-width:920px}
.wid-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.92rem;color:#cfcfd6;margin-bottom:24px}
.wid-lead{font-size:clamp(1.1rem,1.9vw,1.4rem);line-height:1.55;color:#c9c9d2;max-width:60ch;margin:22px 0 32px}
.wid-hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:40px}
.wid-hero-chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.wid-hero-chips li{font-family:var(--display);font-weight:500;font-size:.92rem;color:#e7e7ec;background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:999px;padding:8px 16px}

/* ---------- SERVICES INDEX (light) ---------- */
.wid-services{background:var(--paper);color:var(--ink);padding:clamp(80px,11vw,140px) 0}
.wid-sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:30px}
.wid-sec-note{font-size:1.02rem;line-height:1.5;color:#4a4942;max-width:42ch}

/* currency switcher (light) */
.plans-currency{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:34px}
.plans-cur-label{font-size:.9rem;color:var(--muted-paper);font-weight:500}
.currency{display:flex;gap:8px;flex-wrap:wrap}
.cur-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1.5px solid var(--line-dark);border-radius:11px;padding:8px 13px;font-family:var(--body);font-weight:600;font-size:.9rem;color:var(--ink);cursor:pointer;transition:transform .18s var(--ease),border-color .18s,background .18s,color .18s}
.cur-btn span{font-size:1rem;line-height:1}
.cur-btn:hover{border-color:#cfccc4;transform:translateY(-1px)}
.cur-btn.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}

.wid-list{display:flex;flex-direction:column;gap:16px}
.wid-service{display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:26px;text-decoration:none;color:var(--ink);background:#fff;border:1px solid var(--line-dark);border-radius:var(--r);padding:clamp(24px,3vw,34px);transition:transform .22s var(--ease),border-color .22s,box-shadow .22s}
.wid-service:hover{transform:translateY(-4px);border-color:var(--volt);box-shadow:0 30px 60px -38px rgba(10,10,11,.35)}
.wid-num{font-family:var(--display);font-weight:700;font-size:clamp(1.6rem,3vw,2.3rem);line-height:1;color:#d8d4cb;transition:color .22s}
.wid-service:hover .wid-num{color:var(--volt)}
.wid-service-head{display:flex;justify-content:space-between;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:10px}
.wid-service-head h3{font-family:var(--display);font-weight:600;font-size:clamp(1.4rem,2.4vw,1.85rem);letter-spacing:-.01em}
.wid-h3-sub{display:block;font-family:var(--body);font-weight:500;font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-paper);margin-top:3px}
.wid-price{font-family:var(--display);font-weight:700;font-size:1.5rem;color:var(--ink);white-space:nowrap;display:inline-flex;align-items:baseline;gap:5px}
.wid-from{font-family:var(--body);font-weight:500;font-size:.8rem;color:var(--muted-paper);text-transform:uppercase;letter-spacing:.04em}
.wid-per{font-family:var(--body);font-weight:500;font-size:.85rem;color:var(--muted-paper)}
.wid-price-tag{font-size:.95rem;font-weight:600;color:var(--volt-deep);background:rgba(228,106,44,.1);border-radius:999px;padding:5px 14px}
.wid-service-desc{font-size:1.02rem;line-height:1.55;color:#4a4942;max-width:62ch;margin-bottom:16px}
.wid-incl{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.wid-incl li{position:relative;font-size:.88rem;color:#3a3934;background:var(--paper);border:1px solid var(--line-dark);border-radius:8px;padding:5px 11px 5px 26px}
.wid-incl li::before{content:"";position:absolute;left:10px;top:50%;width:9px;height:9px;margin-top:-4px;border:solid var(--volt);border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-1px);box-sizing:border-box;width:5px;height:9px}
.wid-go{align-self:center;font-size:1.4rem;color:#c3bfb5;transition:color .22s,transform .22s}
.wid-service:hover .wid-go{color:var(--volt);transform:translateX(4px)}

.wid-tailored{margin-top:36px;background:linear-gradient(180deg,rgba(228,106,44,.08),rgba(228,106,44,.03));border:1px solid rgba(228,106,44,.22);border-radius:var(--r);padding:clamp(26px,3.2vw,38px);text-align:center}
.wid-tailored p{font-size:clamp(1.05rem,1.6vw,1.25rem);line-height:1.55;color:#3a3934;max-width:60ch;margin:0 auto 22px}
.wid-tailored-cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.wid-tailored .btn-ghost{color:var(--ink);border-color:var(--line-dark)}
.wid-tailored .btn-ghost:hover{color:var(--volt);border-color:var(--volt)}

/* ---------- WHO I WORK WITH (light) ---------- */
.wid-who{background:#fff;color:var(--ink);padding:clamp(80px,11vw,130px) 0}
.wid-who-inner{max-width:880px}
.wid-who-lead{font-size:clamp(1.05rem,1.6vw,1.22rem);line-height:1.6;color:#4a4942;margin:16px 0 36px;max-width:64ch}
.wid-trades{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.wid-trade{display:flex;flex-direction:column;gap:6px;text-decoration:none;background:var(--paper);border:1px solid var(--line-dark);border-radius:var(--r);padding:24px 26px;transition:transform .22s var(--ease),border-color .22s,box-shadow .22s}
.wid-trade:hover{transform:translateY(-4px);border-color:var(--volt);box-shadow:0 26px 50px -34px rgba(10,10,11,.3)}
.wid-trade strong{font-family:var(--display);font-weight:600;font-size:1.3rem;color:var(--ink)}
.wid-trade span{font-size:.92rem;color:#4a4942}

/* ---------- PROCESS (dark) ---------- */
.wid-process{background:var(--ink);color:#fff;padding:clamp(80px,11vw,130px) 0}
.wid-process .wid-sec-head{margin-bottom:44px}
.wid-steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:none}
.wid-steps li{position:relative;padding-top:18px;border-top:2px solid var(--line)}
.wid-step-n{font-family:var(--display);font-weight:700;font-size:1.1rem;color:var(--volt);display:block;margin-bottom:14px}
.wid-steps h3{font-family:var(--display);font-weight:600;font-size:1.3rem;margin-bottom:8px}
.wid-steps p{color:#b6b6bf;font-size:.98rem;line-height:1.55}

/* ---------- TESTIMONIAL (orange band) ---------- */
.wid-quote{background:linear-gradient(135deg,var(--volt),#c2530f);color:#fff;padding:clamp(70px,10vw,120px) 0}
.wid-quote-inner{max-width:880px;text-align:center;position:relative}
.wid-quote-mark{font-family:var(--display);font-weight:700;font-size:6rem;line-height:.6;color:rgba(255,255,255,.45);margin-bottom:10px}
.wid-quote blockquote{font-family:var(--display);font-weight:600;font-size:clamp(1.4rem,2.8vw,2.1rem);line-height:1.3;letter-spacing:-.01em;color:#fff}
.wid-quote-by{margin-top:24px;font-size:1rem;color:#fff;display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap}
.wid-quote-by .stars{color:#fff;letter-spacing:2px}
.wid-quote-by strong{font-weight:700}

/* ---------- FAQ (light) ---------- */
.wid-faq{background:var(--paper);color:var(--ink);padding:clamp(80px,11vw,130px) 0}
.wid-faq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:54px;align-items:start}
.wid-faq-head .wid-kicker{color:var(--volt-deep)}
.wid-faq-head .wid-sec-note{margin-top:16px}
.wid-faq-head .wid-sec-note a{color:var(--volt-deep);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.wid-faq-list{display:flex;flex-direction:column;gap:12px}
.wid-faq-item{background:#fff;border:1px solid var(--line-dark);border-radius:14px;overflow:hidden}
.wid-faq-item summary{list-style:none;cursor:pointer;padding:20px 24px;font-family:var(--display);font-weight:600;font-size:1.08rem;display:flex;justify-content:space-between;align-items:center;gap:16px}
.wid-faq-item summary::-webkit-details-marker{display:none}
.wid-faq-item summary::after{content:"+";font-family:var(--display);font-weight:600;font-size:1.5rem;color:var(--volt);line-height:1;transition:transform .25s var(--ease)}
.wid-faq-item[open] summary::after{transform:rotate(45deg)}
.wid-faq-body{padding:0 24px 22px}
.wid-faq-body p{color:#4a4942;font-size:1rem;line-height:1.6}
.wid-faq-body a{color:var(--volt-deep);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---------- CTA (dark) ---------- */
.wid-cta{position:relative;background:var(--ink);color:#fff;padding:clamp(90px,12vw,150px) 0;overflow:hidden;text-align:center}
.wid-cta-glow{position:absolute;bottom:-40%;left:50%;transform:translateX(-50%);width:min(900px,90%);height:600px;background:radial-gradient(50% 50% at 50% 50%,rgba(228,106,44,.26),transparent 70%);pointer-events:none}
.wid-cta-inner{position:relative;max-width:760px}
.wid-cta h2{font-family:var(--display);font-weight:700;line-height:1.05;letter-spacing:-.02em;font-size:clamp(2.1rem,4.6vw,3.6rem)}
.wid-cta p{color:#c9c9d2;font-size:clamp(1.05rem,1.6vw,1.2rem);line-height:1.6;margin:18px auto 32px;max-width:54ch}
.wid-hero-cta{display:flex;flex-wrap:wrap;gap:14px}
.wid-cta .wid-hero-cta{justify-content:center}

/* ---------- RESPONSIVE ---------- */
@media(max-width:980px){
  .wid-trades{grid-template-columns:1fr;gap:14px}
  .wid-steps{grid-template-columns:repeat(2,1fr);gap:30px 22px}
  .wid-faq-grid{grid-template-columns:1fr;gap:30px}
}
@media(max-width:680px){
  .wid-service{grid-template-columns:auto 1fr;gap:16px 18px}
  .wid-go{display:none}
  .wid-service-head{gap:6px 14px}
}
@media(max-width:560px){
  .wid-steps{grid-template-columns:1fr;gap:26px}
  .wid-hero{min-height:auto;padding:120px 0 70px}
}