:root{--wd-navy:#041b39;--wd-deep:#021329;--wd-blue:#0967b6;--wd-cyan:#1fc2e8;--wd-red:#e6394e;--wd-ink:#12253d;--wd-muted:#596e83;--wd-line:#dbe5ee;--wd-soft:#f3f7fb;--wd-max:1300px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:95px}body{margin:0;font-family:Inter,"Segoe UI",Arial,sans-serif;color:var(--wd-ink);background:#fff;line-height:1.65}a{color:inherit}.wd-page{overflow:clip}.wd-wrap{width:min(calc(100% - 64px),var(--wd-max));margin:auto}.wd-hero{min-height:650px;display:flex;align-items:center;color:#fff;background-color:var(--wd-deep);background-image:linear-gradient(90deg,rgba(2,16,36,.97) 0%,rgba(2,19,41,.92) 35%,rgba(2,24,49,.63) 62%,rgba(2,24,49,.13) 100%),url('/img/services/web-design/hero.jpg');background-size:cover;background-position:center;background-repeat:no-repeat;position:relative}.wd-hero:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:5px;background:linear-gradient(90deg,var(--wd-red) 0 15%,var(--wd-cyan) 15% 100%)}.wd-hero-grid{width:100%;min-height:650px;display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:48px;align-items:center;padding:65px 0}.wd-crumb{font-size:.83rem;color:#c1d5e8;margin-bottom:27px}.wd-crumb a{color:#fff;text-decoration:none}.wd-kicker{font-size:.77rem;font-weight:850;letter-spacing:.16em;text-transform:uppercase;color:#7bdeff}.wd-hero h1{font-size:clamp(2.6rem,4.4vw,4.6rem);line-height:1.07;letter-spacing:-.048em;margin:14px 0 21px;max-width:790px}.wd-hero h1 span{color:#42d4ff}.wd-hero-lead{font-size:1.08rem;line-height:1.85;color:#e3edf7;max-width:690px;margin:0}.wd-actions{display:flex;gap:13px;flex-wrap:wrap;margin-top:29px}.wd-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:49px;padding:12px 23px;border-radius:7px;text-decoration:none;font-size:.89rem;font-weight:800;border:1px solid transparent;transition:background .2s,transform .2s}.wd-btn:hover{transform:translateY(-2px)}.wd-btn-blue{background:#0878d0;color:#fff}.wd-btn-blue:hover{background:#0695eb}.wd-btn-white{background:#fff;color:var(--wd-navy)}.wd-btn-outline{border-color:#b4c9da;background:rgba(0,0,0,.12);color:#fff}.wd-btn-outline:hover{background:rgba(255,255,255,.14)}

.wd-directory{border-radius:11px;padding:24px;background:rgba(2,21,45,.20);border:1px solid rgba(165,212,241,.27);border-left:2px solid var(--wd-red);backdrop-filter:blur(9px)}

.wd-directory strong{display:block;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:#77d9f8;margin-bottom:11px}.wd-directory a{display:block;padding:8px 0;text-decoration:none;color:#e4f1fb;border-bottom:1px solid rgba(255,255,255,.12);font-size:.81rem;font-weight:650;line-height:1.45}.wd-directory a:last-child{border:0}.wd-directory a:hover{color:#61d9ff}
.wd-nav{position:sticky;top:0;z-index:25;background:#fff;border-bottom:1px solid var(--wd-line);box-shadow:0 4px 16px rgba(2,20,40,.04)}.wd-nav-inner{display:flex;gap:25px;overflow-x:auto;white-space:nowrap;scrollbar-width:thin}.wd-nav a{padding:17px 0 14px;display:inline-block;font-size:.8rem;font-weight:750;text-decoration:none;color:#536b82;border-bottom:3px solid transparent}.wd-nav a:hover{color:var(--wd-blue);border-bottom-color:var(--wd-red)}.wd-section{padding:88px 0}.wd-soft{background:var(--wd-soft)}.wd-dark{background:var(--wd-navy);color:#fff}.wd-eyebrow{display:flex;align-items:center;gap:11px;color:var(--wd-blue);font-size:.77rem;font-weight:850;letter-spacing:.15em;text-transform:uppercase;margin:0 0 16px}.wd-eyebrow:before{content:"";width:26px;height:3px;background:var(--wd-red)}.wd-dark .wd-eyebrow{color:#7ad9fb}.wd-title{font-size:clamp(2rem,3.4vw,3.55rem);line-height:1.13;letter-spacing:-.042em;margin:0 0 20px;max-width:940px}.wd-lead{color:var(--wd-muted);font-size:1.055rem;line-height:1.87;max-width:980px;margin:0}.wd-dark .wd-lead{color:#c7d9e8}.wd-two{display:grid;grid-template-columns:1.04fr .96fr;gap:65px;align-items:center}.wd-design-photo{position:relative;margin:0;min-height:440px;border-radius:18px;overflow:hidden;box-shadow:0 25px 65px rgba(1,24,55,.16);background:#06254b}.wd-design-photo picture,.wd-design-photo img{display:block;width:100%;height:100%;min-height:440px;object-fit:cover}.wd-design-photo:after{content:"";position:absolute;inset:auto 0 0;height:95px;background:linear-gradient(transparent,rgba(2,17,40,.78));pointer-events:none}.wd-design-photo figcaption{position:absolute;bottom:22px;left:24px;right:24px;color:#fff;z-index:1;font-weight:750;font-size:.94rem}.wd-design-photo:before{content:"";position:absolute;top:0;left:0;width:95px;height:6px;background:var(--wd-red);z-index:2}.wd-text p:not(.wd-eyebrow){color:var(--wd-muted);line-height:1.85;margin:0 0 17px}.wd-highlight{border-left:3px solid var(--wd-cyan);background:#f1f8fc;padding:18px 21px;border-radius:0 9px 9px 0;color:#214b6c;font-weight:650;margin-top:22px}.wd-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:40px}.wd-card{background:#fff;border:1px solid var(--wd-line);border-radius:13px;padding:28px;box-shadow:0 8px 25px rgba(4,28,57,.035);position:relative}.wd-card:before{content:"";position:absolute;left:0;top:0;width:56px;height:4px;background:var(--wd-blue);border-radius:13px 0 0 0}.wd-card:nth-child(3n+2):before{background:var(--wd-cyan)}.wd-card:nth-child(3n):before{background:var(--wd-red)}.wd-card h3{font-size:1.12rem;line-height:1.35;margin:0 0 12px}.wd-card p{font-size:.92rem;color:var(--wd-muted);line-height:1.75;margin:0}.wd-number{display:block;color:var(--wd-blue);font-size:.78rem;font-weight:850;letter-spacing:.1em;margin-bottom:15px}.wd-foundations{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-top:37px}.wd-foundation{background:#fff;border:1px solid var(--wd-line);border-radius:10px;padding:22px 23px}.wd-foundation h3{margin:0 0 8px;font-size:1rem}.wd-foundation p{font-size:.87rem;color:var(--wd-muted);margin:0;line-height:1.7}.wd-feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:19px;margin-top:38px}.wd-feature{border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.055);border-radius:12px;padding:24px}.wd-feature strong{font-size:1.06rem}.wd-feature p{color:#c9d8e8;font-size:.92rem;margin:9px 0 0;line-height:1.8}.wd-bridge{margin-top:40px;padding:32px;border:1px solid var(--wd-line);border-radius:17px;background:#fff;box-shadow:0 12px 36px rgba(4,30,60,.045)}.wd-bridge h3{font-size:1.35rem;margin:0 0 9px}.wd-bridge>p{color:var(--wd-muted);margin:0 0 25px}.wd-flow{display:grid;grid-template-columns:1fr 125px 1fr;gap:16px;align-items:center}.wd-flow-box{background:#eff7fd;border:1px solid #c9e1f3;border-radius:11px;padding:24px;text-align:center;min-height:165px}.wd-flow-box:last-child{background:#f0f3fa;border-color:#d8e0ef}.wd-flow-box b{display:block;color:var(--wd-navy);font-size:1.1rem;margin-bottom:10px}.wd-flow-box p{color:#526b81;font-size:.89rem;line-height:1.7;margin:0}.wd-flow-arrow{text-align:center;color:var(--wd-blue);font-weight:850;font-size:1.4rem}.wd-flow-arrow span{display:block;color:var(--wd-muted);font-size:.72rem;line-height:1.4;margin-top:8px;font-weight:650}.wd-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px;margin-top:37px}.wd-point{border-top:3px solid var(--wd-cyan);padding:22px;background:#fff;border-radius:0 0 10px 10px;box-shadow:0 7px 22px rgba(0,20,50,.045)}.wd-point:nth-child(2){border-color:var(--wd-red)}.wd-point h3{font-size:1.04rem;margin:0 0 10px}.wd-point p{font-size:.9rem;line-height:1.8;color:var(--wd-muted);margin:0}.wd-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 27px;list-style:none;padding:0;margin:30px 0 0}.wd-checks li{position:relative;padding:12px 0 12px 27px;border-bottom:1px solid var(--wd-line);font-size:.95rem}.wd-checks li:before{content:"✓";position:absolute;left:0;color:var(--wd-blue);font-weight:900}.wd-small-note{font-size:.85rem;color:var(--wd-muted);margin-top:23px}.wd-faq{max-width:1000px;margin-top:35px}.wd-faq details{background:#fff;border:1px solid var(--wd-line);border-radius:10px;margin-bottom:11px;overflow:hidden}.wd-faq summary{cursor:pointer;padding:20px 23px;font-weight:750;list-style:none;display:flex;justify-content:space-between;gap:15px}.wd-faq summary::-webkit-details-marker{display:none}.wd-faq summary:after{content:"+";color:var(--wd-blue);font-size:1.3rem;line-height:1}.wd-faq details[open] summary:after{content:"−"}.wd-faq details p{border-top:1px solid var(--wd-line);margin:0;padding:16px 23px 22px;color:var(--wd-muted);font-size:.94rem;line-height:1.85}.wd-cta{padding:76px 0;background:linear-gradient(115deg,#02152d,#08437f 72%,#096ab8);color:#fff}.wd-cta-inner{display:flex;justify-content:space-between;align-items:center;gap:40px}.wd-cta h2{font-size:clamp(2rem,3.2vw,3.3rem);letter-spacing:-.04em;line-height:1.14;margin:0 0 16px}.wd-cta p{color:#d2e5f4;max-width:730px;margin:0;line-height:1.8}.wd-cta .wd-actions{margin:0;flex-shrink:0}
@media(max-width:1100px){.wd-hero-grid{grid-template-columns:minmax(0,1fr) 260px;gap:25px}.wd-two{gap:35px}.wd-cards,.wd-foundations{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:800px){.wd-wrap{width:min(calc(100% - 36px),var(--wd-max))}.wd-hero{min-height:unset;background-image:linear-gradient(0deg,rgba(2,16,36,.98) 0%,rgba(2,19,41,.90) 47%,rgba(2,19,41,.3) 100%),url('/img/services/web-design/hero-mobile.jpg');background-position:center,center top}.wd-hero-grid{grid-template-columns:1fr;min-height:unset;padding:100px 0 43px}.wd-directory{max-width:none}.wd-directory nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}.wd-section{padding:64px 0}.wd-two{grid-template-columns:1fr}.wd-design-photo,.wd-design-photo picture,.wd-design-photo img{min-height:380px}.wd-feature-grid,.wd-points{grid-template-columns:1fr 1fr}.wd-cta-inner{flex-direction:column;align-items:flex-start}.wd-flow{grid-template-columns:1fr}.wd-flow-arrow{transform:none}}@media(max-width:540px){.wd-hero h1{font-size:clamp(2.25rem,9vw,3.1rem)}.wd-hero-lead{font-size:.98rem}.wd-directory nav{grid-template-columns:1fr}.wd-cards,.wd-foundations,.wd-feature-grid,.wd-points,.wd-checks{grid-template-columns:1fr}.wd-actions{width:100%}.wd-actions .wd-btn{flex:1 1 100%}.wd-card{padding:24px}.wd-bridge{padding:22px}.wd-cta .wd-actions{width:100%}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.wd-btn{transition:none}}

/* =========================================================
   HERO — MATCHES /about-us.php STRUCTURE AND APPEARANCE
   Full-width image, 430px minimum desktop, mobile portrait,
   two-column copy + right-hand On This Page directory.
========================================================= */
:root{--wd-navy:#02172f;--wd-blue:#075eae;--wd-cyan:#24b7f2;--wd-red:#e31b2f;--wd-max:1320px}
.wd-hero{position:relative;isolation:isolate;display:flex;align-items:center;min-height:430px;color:#fff;background-color:#02172f;background-image:linear-gradient(90deg,rgba(2,18,43,.97) 0%,rgba(2,23,47,.90) 31%,rgba(2,31,70,.54) 55%,rgba(2,31,70,.12) 100%),url('/img/services/web-design/hero.jpg');background-position:center,center;background-size:cover;background-repeat:no-repeat}
.wd-hero-grid{position:relative;z-index:1;width:min(calc(100% - 64px),1320px);min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 295px;gap:42px;align-items:center;padding:55px 0 65px}
.wd-hero-copy{min-width:0}
.wd-crumb{margin-bottom:23px;color:#bed5e8;font-size:.8rem}
.wd-kicker{display:inline-flex;align-items:center;gap:11px;margin:0 0 17px;color:#8ddfff;font-size:.77rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.wd-kicker:before{content:"";width:27px;height:3px;background:var(--wd-red)}
.wd-hero h1{max-width:760px;margin:0;font-size:clamp(2.3rem,3.5vw,3.8rem);font-weight:900;line-height:1.06;letter-spacing:-.052em;text-transform:uppercase}
.wd-hero h1 span{display:block;color:#36c5ff}
.wd-hero-lead{max-width:680px;margin:20px 0 0;color:#e3eef8;font-size:1.03rem;line-height:1.7}
.wd-hero .wd-actions{margin-top:26px}
.wd-directory{padding:24px 26px;border:none;border-left:1px solid var(--wd-red);border-radius:12px;background:rgba(2,23,47,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.wd-directory strong{display:block;margin:0 0 22px;color:#8ddfff;font-size:.78rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase}
.wd-directory a{display:flex;align-items:center;gap:13px;min-height:43px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.16);color:#fff;font-size:.88rem;font-weight:700;line-height:1.45;text-decoration:none;transition:color .2s ease,padding-left .2s ease}
.wd-directory a:before{content:"";width:13px;height:3px;flex:0 0 13px;border-radius:2px;background:var(--wd-red)}
.wd-directory a:last-child{border-bottom:0}
.wd-directory a:hover,.wd-directory a:focus-visible{color:#8ddfff;padding-left:5px}
.wd-directory a:focus-visible{outline:2px solid #8ddfff;outline-offset:3px}
.wd-hero:after{position:absolute;bottom:0;left:0;right:0;width:auto;height:5px;content:"";background:linear-gradient(90deg,var(--wd-red) 0 18%,var(--wd-cyan) 18%)}
.wd-section[id],.wd-cta[id]{scroll-margin-top:100px}
/* Development image — editorial split below the page midpoint */
.wd-development{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:65px;align-items:center;margin-top:48px;padding-top:45px;border-top:1px solid var(--wd-line)}
.wd-development__image{position:relative;margin:0;min-width:0}
.wd-development__image picture,.wd-development__image img{display:block;width:100%}
.wd-development__image img{height:auto;max-height:520px;object-fit:cover;border-radius:17px;box-shadow:0 22px 55px rgba(2,23,47,.14)}
.wd-development__image:after{content:"";position:absolute;top:-11px;right:22px;width:84px;height:5px;background:var(--wd-red);border-radius:5px}
.wd-development__copy h3{margin:0 0 18px;color:var(--wd-navy);font-size:clamp(1.5rem,2.5vw,2.4rem);line-height:1.2;letter-spacing:-.03em}
.wd-development__copy p{color:var(--wd-muted);line-height:1.85;margin:0 0 17px}
.wd-development__copy ul{padding-left:22px;color:var(--wd-muted);line-height:1.9}
.wd-development__copy li::marker{color:var(--wd-blue)}
@media(max-width:900px){.wd-hero-grid{grid-template-columns:1fr;gap:25px}.wd-directory{width:100%;padding:24px}.wd-directory nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}.wd-development{gap:30px}}
@media(max-width:750px){.wd-hero{min-height:unset;align-items:flex-end;background-image:linear-gradient(0deg,rgba(2,18,43,.98) 0%,rgba(2,31,70,.88) 30%,rgba(2,31,70,.30) 74%,rgba(2,31,70,.12) 100%),url('/img/services/web-design/hero-mobile.jpg');background-position:center,center top}.wd-hero-grid{width:min(calc(100% - 36px),1320px);min-height:0;padding:90px 0 36px}.wd-hero h1{font-size:clamp(2.1rem,7vw,3.2rem)}.wd-hero-lead{font-size:.96rem}.wd-development{grid-template-columns:1fr}.wd-development__image{order:1}.wd-development__copy{order:0}}
@media(max-width:440px){.wd-directory nav{grid-template-columns:1fr}.wd-hero h1{font-size:clamp(2.1rem,7vw,3.2rem)}}