/* Web design service page: extends the existing service-page layout. */
.web-design-page .web-design-hero__note { color:#d6e2ef; font-size:14px; margin-top:24px; }
.web-design-page .web-design-visual { min-width:0; margin:0; }
.web-design-page .web-design-browser { border:1px solid #6a849e; border-radius:12px; overflow:hidden; box-shadow:0 18px 40px #00152c55; background:#fff; }
.web-design-page .web-design-browser__bar { display:flex; align-items:center; gap:6px; padding:12px; background:#e9eef4; }
.web-design-page .web-design-browser__bar > span { width:7px; height:7px; border-radius:50%; background:#8092a5; }
.web-design-page .web-design-browser__bar > i { flex:1; min-width:0; padding:4px 8px; margin-left:8px; border-radius:4px; background:#fff; color:#50657c; font-size:11px; font-style:normal; text-align:center; }
.web-design-page .web-design-example { color:#0b1f3f; }
.web-design-page .web-design-example__nav { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; padding:20px; color:#50657c; font-size:11px; }
.web-design-page .web-design-example__brand { color:#0b1f3f; font-family:var(--font-head); font-weight:800; font-size:16px; }
.web-design-page .web-design-example__hero { display:flex; flex-direction:column; align-items:flex-start; gap:18px; padding:28px 24px 32px; background:linear-gradient(125deg,#f3f7fc,#e4effb); }
.web-design-page .web-design-example__eyebrow { color:#005da8; font-size:11px; }
.web-design-page .web-design-example__hero strong { color:#0b1f3f; font-family:var(--font-head); font-size:clamp(26px,2.9vw,40px); line-height:1.1; font-weight:800; letter-spacing:-.02em; }
.web-design-page .web-design-example__button { display:flex; align-items:center; gap:24px; background:#ff8a2f; color:#0b1f3f; border-radius:5px; padding:10px 14px; font-size:12px; font-weight:700; }
.web-design-page .web-design-example__services { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:18px; }
.web-design-page .web-design-example__services span { padding:13px 4px; border-top:2px solid #ff8a2f; text-align:center; font-size:11px; }
.web-design-page .web-design-visual__caption { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 16px; padding-top:20px; color:#fff; font-size:12px; }
.web-design-page .web-design-visual__caption span::before { content:"✓"; color:#ff8a2f; margin-right:6px; }
.web-design-page .web-design-visual figcaption { margin-top:14px; color:#d6e2ef; font-size:12px; text-align:center; }
.web-design-page .web-design-offers { grid-template-columns:repeat(2,minmax(0,1fr)); }
.web-design-page .web-design-offer-label { margin:0 0 12px; color:#005da8; font-size:12px; font-weight:700; }
.web-design-page .web-design-scope-note { margin-top:24px; color:#50657c; max-width:900px; font-size:15px; }
.web-design-page .web-design-foundations { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; margin-top:36px; }
.web-design-page .web-design-foundations article { min-width:0; }
.web-design-page .web-design-foundation-number { display:block; color:#005da8; font-family:var(--font-head); font-size:13px; font-weight:800; margin-bottom:12px; }
.web-design-page .web-design-foundations h3 { font-size:19px; }
.web-design-page .web-design-foundations p { color:#50657c; margin-top:10px; font-size:15px; }
.web-design-page .web-design-planning-note { color:#d6e2ef; font-size:15px; margin-top:18px; }
.web-design-page .contact-band__inner > div:first-child { flex:1 1 500px; max-width:780px; }
.web-design-page .contact-band__actions .btn { white-space:normal; text-align:center; }
@media(max-width:1080px) {
  .web-design-page .web-design-visual { width:100%; max-width:600px; }
  .web-design-page .web-design-foundations { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:640px) {
  .web-design-page .web-design-offers,.web-design-page .web-design-foundations { grid-template-columns:minmax(0,1fr); }
  .web-design-page .web-design-example__nav { padding:14px; }
  .web-design-page .web-design-example__hero { padding:24px 18px; }
  .web-design-page .web-design-example__services { padding:12px; gap:6px; }
  .web-design-page .web-design-visual__caption { gap:8px 12px; }
}
.hth-website-embedded .web-design-offers,.hth-website-embedded .web-design-foundations { grid-template-columns:minmax(0,1fr); }
@media(max-width:300px) {
  .hth-website-embedded .web-design-example__services { grid-template-columns:minmax(0,1fr); }
}

/* Portfolio gallery: screenshots remain static inside the desktop previews. */
.web-design-page .web-design-portfolio { background:#0b2036; color:#fff; }
.web-design-page .web-design-portfolio h2,.web-design-page .web-design-portfolio h3 { color:#fff; }
.web-design-page .web-design-portfolio .detail-eyebrow { color:#ff9b50; }
.web-design-page .web-design-portfolio .detail-lead { color:#d6e2ef; }
.web-design-page .web-design-projects { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:36px; align-items:start; }
.web-design-page .web-design-project { min-width:0; background:#112c45; border:1px solid #476078; border-radius:10px; overflow:hidden; }
.web-design-page .web-design-project__preview { margin:0; background:#e9eef4; }
.web-design-page .web-design-project__browser { display:flex; align-items:center; gap:12px; padding:12px; color:#50657c; font-size:11px; }
.web-design-page .web-design-project__browser > span:first-child { flex:none; font-size:8px; letter-spacing:2px; }
.web-design-page .web-design-project__browser > span:last-child { flex:1; min-width:0; text-align:center; background:#fff; padding:4px 8px; border-radius:3px; }
.web-design-page .web-design-project__preview img { display:block; width:100%; height:auto; }
.web-design-page .web-design-project__body { padding:24px; }
.web-design-page .web-design-project__body > p { color:#d6e2ef; font-size:15px; margin-top:12px; }
.web-design-page .web-design-project__body .web-design-project__label { color:#b8cee2; font-size:11px; text-transform:uppercase; letter-spacing:.06em; margin:0 0 12px; }
.web-design-page .web-design-project details { margin-top:18px; border-top:1px solid #476078; }
.web-design-page .web-design-project summary { padding:16px 0 4px; min-height:44px; cursor:pointer; color:#fff; font-size:14px; font-weight:700; text-decoration:underline; text-decoration-color:#ff9b50; text-underline-offset:6px; }
.web-design-page .web-design-project__details { padding-top:16px; }
.web-design-page .web-design-project__details p { color:#d6e2ef; font-size:14px; margin-bottom:14px; }
.web-design-page .web-design-project__details a { display:inline-flex; flex-wrap:wrap; gap:12px; align-items:center; min-height:44px; color:#ffb67e; text-decoration:underline; text-underline-offset:4px; }
.web-design-page .web-design-project__details .web-design-project__status { color:#b8cee2; font-size:12px; }
.web-design-page .web-design-portfolio__contact { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px; border-top:1px solid #476078; padding-top:28px; margin-top:36px; }
.web-design-page .web-design-portfolio__contact p { color:#d6e2ef; margin:0; }
.web-design-page .web-design-portfolio__contact .btn { white-space:normal; text-align:center; }
@media(max-width:1000px) { .web-design-page .web-design-projects { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:640px) { .web-design-page .web-design-projects { grid-template-columns:minmax(0,1fr); } .web-design-page .web-design-project__body { padding:20px; } }
.hth-website-embedded .web-design-projects { grid-template-columns:minmax(0,1fr); }
.hth-website-embedded .web-design-project__body { padding:16px; }