/* Page-specific composition; shared navigation, buttons and footer use style.css. */
.web-design-page{--sage:var(--soft)}
.wd-hero{display:grid;grid-template-columns:1.2fr 1fr;gap:70px;align-items:center;padding-block:80px 100px}
.wd-hero h1{font-size:clamp(2.4rem,4.6vw,4.1rem);line-height:1.07;max-width:13ch}
.wd-hero-copy>p:not(.eyebrow){margin-top:28px;max-width:48ch}
.wd-hero .button{margin-top:34px}
.image-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;border:1px solid var(--line);background:var(--sage);color:var(--ink);padding:24px;text-align:center;font-size:.875rem}
.placeholder-ratio{font-size:.75rem;letter-spacing:.14em;opacity:.7}
.wd-hero-image{aspect-ratio:4/5;width:100%}
.wd-responsive-image{aspect-ratio:4/3;margin-top:38px;background:var(--background)}
.wd-split{display:grid;grid-template-columns:1fr 1.25fr;gap:90px;align-items:start}
.wd-split h2{max-width:17ch}.wd-prose p+p{margin-top:24px}
.wd-sage{background:var(--sage)}
.wd-types{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:50px;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.wd-type{padding:34px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background-color .25s}
.wd-type:hover{background:rgb(246 244 232 / 32%)}
.wd-type>span{font-size:.8125rem}.wd-type h3{margin-top:30px;font-size:1.3rem}.wd-type p{margin-top:18px;font-size:1rem}
.wd-features{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
.wd-features li{padding:20px 0;border-top:1px solid var(--line);font-size:1rem}
.wd-dark{background:var(--ink);color:var(--background)}
.wd-process-heading{display:flex;justify-content:space-between;align-items:end;gap:40px}.wd-process-heading>p{max-width:35ch}
.wd-timeline{list-style:none;padding:0;margin:65px 0 0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.wd-timeline li{position:relative;padding:24px 20px 0 0;border-top:1px solid rgb(246 244 232 / 40%)}
.wd-timeline li::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.wd-step{font-size:2.8rem;line-height:1;letter-spacing:-.06em;color:var(--accent)}
.wd-timeline h3{font-size:1.2rem;margin-top:27px}.wd-timeline p{font-size:1rem;margin-top:16px;line-height:1.6}
.wd-technologies{list-style:none;padding:0;margin:45px 0 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--line)}
.wd-technologies li{padding:24px 12px 24px 0;font-size:1.15rem;letter-spacing:-.03em;border-bottom:1px solid var(--line)}
.wd-principles article{padding-block:24px}.wd-principles article:first-child{padding-top:0}.wd-principles p{font-size:1rem}
.wd-faq details{border-top:1px solid var(--line)}.wd-faq details:last-child{border-bottom:1px solid var(--line)}
.wd-faq summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;list-style:none;cursor:pointer;font-weight:500;line-height:1.5;transition:color .2s}
.wd-faq summary::-webkit-details-marker{display:none}.wd-faq summary::after{content:"+";font-size:1.5rem;flex-shrink:0;font-weight:400}.wd-faq details[open]>summary::after{content:"−"}.wd-faq summary:hover{color:var(--hover)}.wd-faq summary:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.wd-faq details>div{padding:0 32px 24px 0}.wd-faq details[open]>div{animation:quote-in .3s ease}
.wd-enquiry .contact-grid{grid-template-columns:1fr 1.2fr}
.wd-form input,.wd-form textarea,.wd-form select{color:var(--background);border-bottom-color:rgb(246 244 232 / 50%)}
.wd-form input::placeholder{color:var(--background);opacity:.7}.wd-form select option{background:var(--background);color:var(--ink)}
.wd-form .button{background:var(--soft);border-color:var(--soft);color:var(--ink)}.wd-form .button:hover{color:var(--hover)}
.wd-form :focus-visible{outline-color:var(--soft)}
.wd-form [aria-invalid=true]{border-bottom:2px solid var(--accent)}
.field-error{font-size:.8125rem;color:var(--soft);margin-top:7px}.field-error:empty{display:none}
.web-design-page a[aria-current=page]{color:var(--hover)}.web-design-page .site-footer a[aria-current=page]{color:var(--accent)}
@media(max-width:1000px){.wd-hero{gap:40px;padding-block:60px}.wd-split{gap:45px}.wd-types{grid-template-columns:repeat(2,minmax(0,1fr))}.wd-timeline{display:block;margin-left:7px}.wd-timeline li{border-top:0;border-left:1px solid rgb(246 244 232 / 40%);padding:0 0 36px 34px}.wd-timeline li::before{top:0;left:-5px}.wd-timeline li:last-child{padding-bottom:0}.wd-timeline h3{margin-top:15px}.wd-timeline p{max-width:55ch}.wd-technologies{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.wd-hero,.wd-split,.wd-enquiry .contact-grid{grid-template-columns:1fr;gap:38px}.wd-hero h1{max-width:16ch;font-size:clamp(2.2rem,8vw,3rem)}.wd-hero{padding-block:48px 64px}.wd-hero-image{aspect-ratio:4/3}.wd-process-heading{display:block}.wd-process-heading>p{margin-top:24px}.wd-split h2{max-width:22ch}.wd-type{padding:26px}.wd-types{margin-top:34px}.wd-features{gap:0 20px}.wd-technologies li{font-size:1rem}.wd-principles article:first-child{padding-top:0;border-top:0}}
@media(max-width:520px){.wd-types{grid-template-columns:1fr}.wd-features{grid-template-columns:1fr}.wd-technologies{grid-template-columns:repeat(2,minmax(0,1fr))}}
