/* =====================================================================
   Gorilla Marketing Experts — Web Design & Development service page
   Rebuilt to match Figma. Selectors prefixed `.wd-`. Loaded AFTER style.css.
   ===================================================================== */

/* page content width = 1300px (banner + all sections, centered with side padding) */
.container{ max-width: calc(1300px + 2 * var(--pad-x)); }

/* ---------- HERO (devices mockup as background) ---------- */
.wd-hero{
  position:relative; color:var(--ivory); overflow:hidden;
  background-color:#000;
  background-image:
    linear-gradient(90deg, #000 30%, rgba(0,0,0,.55) 48%, rgba(0,0,0,0) 66%),
    url('../assets/images/schedule-consultation-1/rectangle-240647831.png');
  background-repeat:no-repeat, no-repeat;
  background-position:center, right bottom;
  background-size:cover, auto 100%;
}
.wd-hero-inner{ position:relative; z-index:1; padding-block:76px 88px; min-height:520px; }
.wd-hero-copy{ max-width:600px; position:relative; z-index:2; }
.wd-hero .eyebrow{ margin-bottom:22px; }
.wd-hero-title{
  font-family:var(--font-display); font-weight:400; font-size:54px; line-height:1.06;
  letter-spacing:-1px; text-transform:capitalize;
  background:linear-gradient(180deg,var(--ivory) 45%,var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.wd-hero-title .rev{ position:relative; color:var(--gold); -webkit-text-fill-color:var(--gold); font-weight:700; white-space:nowrap; }
.wd-hero-title .rev::after{ content:""; position:absolute; left:0; right:-4px; bottom:-10px; height:14px;
  background:url('../assets/images/home/hero-underline-scribble.svg') no-repeat center/contain; }
.wd-hero-desc{ color:var(--ivory); font-weight:500; font-size:16px; margin-top:22px; max-width:520px; line-height:1.6; }
.wd-hero .hero-actions{ margin-top:32px; }
.wd-hero .hero-proof{ margin-top:34px; }
.wd-hero .avatars img{ object-fit:cover; }
/* proof cluster from the home page (avatar strip + stars-with-caption + gorilla badge) */
.wd-hero .proof-stars{ height:44px; width:auto; }

/* ---------- WHY WEB DESIGN — 4 feature cards ---------- */
.wd-feats{ background:var(--ivory); padding:56px 0; }
.wd-feats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.wd-feat{ background:transparent; border:1px solid var(--ink); border-radius:22px; padding:32px 28px; text-align:center; }
/* icon SVGs carry their own gold disc + glow, so the wrapper stays transparent */
.wd-feat-ico{ margin:0 auto 8px; display:grid; place-items:center; }
.wd-feat-ico img{ width:104px; height:104px; display:block; }
.wd-feat-title{ font-family:var(--font-display); font-weight:700; font-size:22px; line-height:1.22; color:var(--gold); margin-bottom:12px; }
.wd-feat-desc{ color:var(--ink); font-size:14px; line-height:1.55; }

/* ---------- EVERYTHING YOU NEED (image + accordion) ---------- */
.wd-included{ background:#fffad9; padding:56px 0 64px; }
.wd-included-head{ text-align:center; margin-bottom:40px; }
.wd-included-head .section-title{ color:var(--ink); margin-top:16px; }
.wd-included-grid{ display:grid; grid-template-columns:520px 1fr; gap:48px; align-items:stretch; }
.wd-included-media{ border-radius:20px; overflow:hidden; min-height:100%; }
.wd-included-media img{ width:100%; height:100%; min-height:520px; object-fit:cover; display:block; }

.wd-acc{ display:flex; flex-direction:column; }
.wd-acc-item{ border-bottom:1px solid rgba(0,0,0,.09); }
.wd-acc-item.is-open{ background:#fff; border:1px solid #ece4cf; border-radius:16px; box-shadow:0 12px 30px rgba(0,0,0,.05); margin-bottom:8px; }
.wd-acc-bar{ display:flex; align-items:center; gap:16px; padding:20px 8px; width:100%; background:none; border:0; text-align:left; cursor:pointer; font:inherit; color:inherit; }
.wd-acc-item.is-open .wd-acc-bar{ padding:24px 26px; }
.wd-acc-num{ font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--gold); min-width:24px; }
.wd-acc-item:not(.is-open) .wd-acc-num{ color:#b3a884; }
.wd-acc-title{ font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--ink); flex:1; }
.wd-acc-item:not(.is-open) .wd-acc-title{ font-size:16px; }
.wd-acc-arrow{ width:40px; height:40px; border-radius:50%; background:var(--gold); color:var(--ink); display:grid; place-items:center; flex:none; font-size:14px; margin-left:auto; }
.wd-acc-chev{ color:#b3a884; font-size:13px; margin-left:auto; }
.wd-acc-item.is-open .wd-acc-chev{ display:none; }
.wd-acc-item:not(.is-open) .wd-acc-arrow{ display:none; }
.wd-acc-body{ max-height:0; overflow:hidden; transition:max-height .3s ease;
  color:#6b6b6b; font-size:14px; line-height:1.6; margin:0; padding:0 26px; }
.wd-acc-item.is-open .wd-acc-body{ max-height:220px; padding:0 26px 24px; }

/* ---------- BEFORE / AFTER "Websites That Make a Difference" ---------- */
.wd-ba{ background:var(--ivory); padding:24px 0 88px; }
.wd-ba-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px; }
.wd-ba-card{ border:1px solid #eee6d0; border-radius:var(--r-card); padding:28px; display:flex; flex-direction:column; }
.wd-ba-card.is-before{ background:var(--card-dark); border-color:var(--bd-gold); color:var(--ivory); }
.wd-ba-card.is-after{ background:linear-gradient(115deg, #171208 0%, #6d5312 46%, #E8AC1F 100%); border-color:var(--gold); }
.wd-ba-badge{ align-self:flex-start; display:inline-flex; align-items:center; gap:8px; height:28px; padding:0 14px; border-radius:40px;
  font-family:var(--font-display); font-weight:700; font-size:11px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:20px; }
.wd-ba-badge::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--gold); }
.wd-ba-badge.before{ background:rgba(255,255,255,.06); color:var(--gold); border:1px solid var(--bd-gold); }
.wd-ba-badge.after{ background:var(--ink); color:var(--gold); }
.wd-ba-body{ display:grid; grid-template-columns:1.15fr 0.95fr; gap:24px; align-items:center; }
.wd-ba-text{ min-width:0; }
.wd-ba-h{ font-family:var(--font-display); font-weight:700; font-size:22px; line-height:1.3; color:var(--ink); }
.wd-ba-card.is-before .wd-ba-h{ color:var(--ivory); }
.wd-ba-sub{ display:block; font-size:22px; font-weight:700; margin-top:0; color:inherit; }
.wd-ba-list{ display:flex; flex-direction:column; gap:13px; margin-top:22px; }
.wd-ba-list li{ display:flex; align-items:center; gap:11px; font-size:15px; font-weight:600; color:var(--ink); }
.wd-ba-card.is-before .wd-ba-list li{ color:var(--gold); }
.wd-ba-list .mk{ flex:none; font-size:15px; font-weight:900; line-height:1; }
.wd-ba-card.is-before .wd-ba-list .mk{ color:var(--gold); }
.wd-ba-card.is-after .wd-ba-h{ color:#fff; }
.wd-ba-card.is-after .wd-ba-list li{ color:#fff; }
.wd-ba-card.is-after .wd-ba-list .mk{ color:var(--gold); }
.wd-ba-media{ border-radius:12px; overflow:hidden; aspect-ratio:3/4; background:#f4efe2; }
.wd-ba-media img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
.wd-ba-card.is-before .wd-ba-media img{ object-position:left top; }
@media (max-width:520px){ .wd-ba-body{ grid-template-columns:1fr; } }

/* ---------- FAQ  "Got Questions?"  (promo card + accordion) ---------- */
.wd-faq{ background:var(--ivory); padding:24px 0 72px; }
.wd-faq-head{ text-align:center; margin-bottom:44px; }
.wd-faq-title{ font-family:var(--font-display); font-weight:700; font-size:44px; line-height:1.05;
  letter-spacing:-1px; text-transform:capitalize; color:var(--ink); }
.wd-faq-grid{ display:grid; grid-template-columns:400px minmax(0,1fr); gap:48px; align-items:start; }
.wd-faq-card{ background:var(--ink); color:var(--ivory); border-radius:var(--r-card); border:1px solid var(--bd-gold); padding:36px 32px; }
.wd-faq-card-title{ font-family:var(--font-display); font-weight:700; font-size:26px; line-height:1.15; color:var(--ivory); }
.wd-faq-card-text{ color:var(--muted-dark); font-size:15px; line-height:1.6; margin-top:14px; }
.wd-faq-card .btn{ width:100%; margin-top:26px; }
.wd-faq-list{ display:flex; flex-direction:column; gap:16px; margin-top:28px; }
.wd-faq-list li{ display:flex; align-items:center; gap:12px; color:var(--ivory); font-size:15px; font-weight:500; }
.wd-faq-list i{ color:var(--gold); font-size:15px; width:18px; text-align:center; }
.wd-faq-acc{ display:flex; flex-direction:column; }
.wd-faq-q{ background:transparent; border:0; border-bottom:1px solid rgba(0,0,0,.1); border-radius:0; }
.wd-faq-q summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:22px 2px; font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--ink); }
.wd-faq-q summary::-webkit-details-marker{ display:none; }
.wd-faq-q summary::after{ content:"\2b"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:14px; color:var(--muted-2); transition:.2s; }
.wd-faq-q[open] summary::after{ content:"\f068"; color:var(--gold); }
.wd-faq-a{ color:#5f5f5f; font-size:15px; line-height:1.65; padding:0 2px 22px; margin:0; max-width:520px; }

/* ---------- SCOPED SHARED SPACING + process icons ---------- */
.process{ padding:60px 0; }
.feature-quote{ padding:52px 0; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:1200px){
  .wd-hero-title{ font-size:46px; }
  .wd-feats-grid{ grid-template-columns:repeat(2,1fr); }
  .wd-included-grid{ grid-template-columns:1fr; gap:36px; }
  .wd-included-media{ max-width:560px; }
  .wd-faq-title{ font-size:38px; }
  .wd-faq-grid{ grid-template-columns:340px minmax(0,1fr); gap:32px; }
}
@media (max-width:1024px){
  .wd-faq-grid{ grid-template-columns:1fr; }
  .wd-ba-grid{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .wd-hero{ background-image:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.9) 62%),
                   url('../assets/images/schedule-consultation-1/rectangle-240647831.png');
    background-position:center top; background-size:cover; }
  .wd-hero-inner{ padding-block:56px 64px; min-height:0; }
  .wd-hero-title{ font-size:34px; }
  .wd-feats-grid{ grid-template-columns:1fr; max-width:420px; margin:0 auto; }
  .wd-included,.wd-faq{ padding:48px 0; }
  .wd-faq-title{ font-size:30px; }
  .wd-acc-body{ padding-left:0; }
}