/* Five compositions, one shared visual identity. */
.service-photo-frame{overflow:hidden;position:relative}
.service-photo-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.web-design-page{--sage:var(--soft)}
.web-design-page main{overflow:clip}
.web-design-page .image-placeholder{background:var(--soft)}
.service-contact{background:var(--soft)}
.service-contact-inner{display:flex;align-items:center;justify-content:space-between;gap:60px}
.service-contact h2{max-width:20ch}
.service-contact .section-intro{max-width:54ch}
.service-contact .button{flex-shrink:0}
.service-tools .wd-technologies{gap:0 20px}

/* Web Design: editorial split, open numbered capabilities, linear process. */
.layout-web-design .wd-hero-image{background:var(--accent);margin-top:50px}
.layout-web-design .service-capabilities{background:var(--background)}
.layout-web-design .wd-types{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;border:0}
.layout-web-design .wd-type{border:0;border-top:1px solid var(--line);padding:32px 0}
.layout-web-design .wd-type>span{font-size:2rem;letter-spacing:-.05em;color:var(--hover)}
.layout-web-design .wd-type h3{margin-top:18px}
.layout-web-design .service-values{background:var(--soft)}
.layout-web-design .service-contact{background:var(--accent)}

/* E-commerce: wide storefront composition and a compact journey. */
.layout-ecommerce .wd-hero{display:block;padding-bottom:70px}
.layout-ecommerce .wd-hero-copy{display:grid;grid-template-columns:1.3fr 1fr;gap:0 70px;align-items:start}
.layout-ecommerce .wd-hero-copy .eyebrow{grid-column:1/-1}
.layout-ecommerce .wd-hero h1{grid-row:2/4;max-width:16ch}
.layout-ecommerce .wd-hero-copy>p:not(.eyebrow){margin:0}
.layout-ecommerce .wd-hero .button{justify-self:start;margin-top:24px}
.layout-ecommerce .wd-hero-image{aspect-ratio:16/7;margin-top:44px;background:var(--soft)}
.layout-ecommerce .service-capabilities{background:var(--accent)}
.layout-ecommerce .wd-type{background:rgb(246 244 232 / 30%)}
.layout-ecommerce .service-process{background:var(--background);color:var(--ink)}
.layout-ecommerce .wd-timeline{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 30px}
.layout-ecommerce .wd-timeline li{border-color:var(--line)}
.layout-ecommerce .wd-step{color:var(--hover)}
.layout-ecommerce .service-values{background:var(--soft)}

/* SEO: restrained report-like structure with lists and a vertical roadmap. */
.layout-seo .wd-hero{grid-template-columns:1.5fr .8fr;gap:90px}
.layout-seo .wd-hero h1{max-width:17ch}
.layout-seo .wd-hero-image{aspect-ratio:1;background:var(--background);border:1px solid var(--ink)}
.layout-seo .service-intro{border-top:1px solid var(--line)}
.layout-seo .service-capabilities{background:var(--background)}
.layout-seo .service-capabilities>.container{display:grid;grid-template-columns:1fr 1.5fr;gap:80px}
.layout-seo .wd-types{display:block;margin:0;border:0}
.layout-seo .wd-type{display:grid;grid-template-columns:40px 1fr;gap:12px 20px;padding:25px 0;border:0;border-top:1px solid var(--line)}
.layout-seo .wd-type h3{margin:0}.layout-seo .wd-type p{grid-column:2;margin:0}
.layout-seo .service-foundations{padding:60px 36px;background:var(--soft)}
.layout-seo .service-process{background:var(--background);color:var(--ink)}
.layout-seo .service-process>.container{display:grid;grid-template-columns:1fr 1.2fr;gap:80px}
.layout-seo .wd-process-heading{display:block}.layout-seo .wd-process-heading>p{margin-top:24px}
.layout-seo .wd-timeline{display:block;margin:0 0 0 5px}
.layout-seo .wd-timeline li{border-top:0;border-left:1px solid var(--line);padding:0 0 32px 32px}
.layout-seo .wd-timeline li::before{left:-5px;top:0;background:var(--hover)}
.layout-seo .wd-timeline h3{margin-top:12px}.layout-seo .wd-step{font-size:2rem;color:var(--hover)}
.layout-seo .service-values{background:var(--soft)}
.layout-seo .service-contact{background:var(--ink);color:var(--background)}
.layout-seo .service-contact .button{background:var(--soft);color:var(--ink);border-color:var(--soft)}

/* Brand Strategy: centred manifesto, rose imagery and spacious paired ideas. */
.layout-brand-strategy .wd-hero{display:block;text-align:center}
.layout-brand-strategy .wd-hero h1{max-width:19ch;margin:auto;font-size:clamp(2.4rem,5.2vw,4.6rem)}
.layout-brand-strategy .wd-hero-copy>p:not(.eyebrow){margin:28px auto 0;max-width:60ch}
.layout-brand-strategy .wd-hero-image{aspect-ratio:16/7;margin-top:50px;background:var(--accent)}
.layout-brand-strategy .service-intro{display:block;text-align:center;max-width:850px}
.layout-brand-strategy .service-intro h2{max-width:none}.layout-brand-strategy .wd-prose{margin:30px auto 0;max-width:62ch}
.layout-brand-strategy .service-capabilities{background:var(--soft)}
.layout-brand-strategy .wd-types{grid-template-columns:repeat(2,minmax(0,1fr));border:0;gap:42px 60px}
.layout-brand-strategy .wd-type{padding:0 0 26px;border:0;border-bottom:1px solid var(--line)}
.layout-brand-strategy .wd-type h3{font-size:1.65rem;margin-top:18px}
.layout-brand-strategy .service-tools{text-align:center}.layout-brand-strategy .service-tools .section-heading{margin:auto}
.layout-brand-strategy .wd-technologies{grid-template-columns:repeat(3,minmax(0,1fr))}
.layout-brand-strategy .service-values{background:var(--background)}
.layout-brand-strategy .service-values .wd-responsive-image{background:var(--accent)}
.layout-brand-strategy .service-contact{background:var(--accent)}
.layout-brand-strategy .service-contact-inner{display:block;text-align:center}.layout-brand-strategy .service-contact h2,.layout-brand-strategy .service-contact .section-intro{margin-inline:auto}
.layout-brand-strategy .service-contact .button{margin-top:30px}

/* Performance Marketing: reverse split, dark capabilities and a testing cycle. */
.layout-performance-marketing .wd-hero{grid-template-columns:1fr 1.1fr}
.layout-performance-marketing .wd-hero-image{grid-column:1;grid-row:1;background:var(--accent)}
.layout-performance-marketing .wd-hero-copy{grid-column:2;grid-row:1}
.layout-performance-marketing .service-capabilities{background:var(--ink);color:var(--background)}
.layout-performance-marketing .wd-types,.layout-performance-marketing .wd-type{border-color:rgb(246 244 232 / 30%)}
.layout-performance-marketing .wd-type:hover{background:rgb(246 244 232 / 5%)}
.layout-performance-marketing .wd-type>span{color:var(--accent)}
.layout-performance-marketing .service-process{background:var(--soft);color:var(--ink)}
.layout-performance-marketing .wd-timeline{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 50px}
.layout-performance-marketing .wd-timeline li{display:grid;grid-template-columns:65px 1fr;gap:10px 18px;border-color:var(--line)}
.layout-performance-marketing .wd-timeline h3{margin:0;align-self:center}.layout-performance-marketing .wd-timeline p{grid-column:2;margin:0}
.layout-performance-marketing .wd-step{color:var(--hover)}
.layout-performance-marketing .service-tools .wd-technologies{grid-template-columns:repeat(3,minmax(0,1fr))}
.layout-performance-marketing .service-values{background:var(--background)}
.layout-performance-marketing .service-contact{background:var(--soft)}

@media(max-width:1000px){
 .layout-seo .wd-hero{gap:35px}
 .layout-seo .service-capabilities>.container,.layout-seo .service-process>.container{gap:40px}
 .layout-ecommerce .wd-timeline,.layout-performance-marketing .wd-timeline{display:grid}
 .layout-ecommerce .wd-timeline li,.layout-performance-marketing .wd-timeline li{border-left:0;border-top:1px solid var(--line);padding:24px 0 0}
 .layout-ecommerce .wd-timeline li::before,.layout-performance-marketing .wd-timeline li::before{left:0;top:-5px}
}
@media(max-width:760px){
 .web-design-page .wd-hero,.layout-ecommerce .wd-hero-copy,.layout-seo .service-capabilities>.container,.layout-seo .service-process>.container{display:grid;grid-template-columns:1fr;gap:30px}
 .layout-ecommerce .wd-hero-copy>*{grid-column:auto;grid-row:auto}
 .layout-ecommerce .wd-hero .button{margin-top:0}
 .layout-performance-marketing .wd-hero-copy,.layout-performance-marketing .wd-hero-image{grid-column:auto;grid-row:auto}
 .layout-web-design .wd-hero-image{margin-top:0}
 .web-design-page .wd-hero-image{aspect-ratio:4/3;margin-top:0}
 .layout-ecommerce .wd-hero-image,.layout-brand-strategy .wd-hero-image{aspect-ratio:16/7}
 .layout-seo .wd-hero-image{aspect-ratio:1;max-width:360px;justify-self:center}
 .web-design-page .wd-types{grid-template-columns:1fr;gap:0}
 .layout-brand-strategy .wd-type{margin-bottom:28px}
 .layout-seo .service-foundations{padding:40px 24px}
 .layout-ecommerce .wd-timeline,.layout-performance-marketing .wd-timeline{grid-template-columns:1fr;gap:30px}
 .layout-brand-strategy .wd-technologies,.layout-performance-marketing .service-tools .wd-technologies{grid-template-columns:repeat(2,minmax(0,1fr))}
 .service-contact-inner{flex-direction:column;align-items:flex-start;gap:28px}
 .layout-brand-strategy .service-contact-inner{text-align:left}.layout-brand-strategy .service-contact h2,.layout-brand-strategy .service-contact .section-intro{margin-inline:0}
}

/* Consistent full-width section bands and vertical rhythm on every service page. */
.web-design-page{--section-space:80px;--section-gutter:48px}
.web-design-page main>section{
 --section-surface:var(--background);
 --section-text:var(--ink);
}
.web-design-page main>section.service-intro{--section-surface:var(--soft)}
.web-design-page:not(.layout-brand-strategy) main>section.wd-hero{--section-surface:var(--accent)}
.web-design-page.layout-ecommerce main>section.wd-hero{--section-surface:var(--soft)}
.web-design-page main>section.service-capabilities{--section-surface:var(--background)}
.web-design-page main>section.service-foundations{--section-surface:var(--accent)}
.web-design-page main>section.service-process{--section-surface:var(--ink);--section-text:var(--background)}
.web-design-page main>section.service-tools{--section-surface:var(--background)}
.web-design-page main>section.service-values{--section-surface:var(--soft)}
.web-design-page main>section.service-questions{--section-surface:var(--background)}
.web-design-page main>section.service-contact{--section-surface:var(--rose)}
/* Palette variations preserve each page's individual direction. */
.layout-ecommerce main>section.service-intro{--section-surface:var(--background)}
.layout-ecommerce main>section.service-capabilities{--section-surface:var(--accent)}
.layout-ecommerce main>section.service-foundations{--section-surface:var(--background)}
.layout-ecommerce main>section.service-process{--section-surface:var(--soft);--section-text:var(--ink)}
.layout-seo main>section.service-process{--section-surface:var(--background);--section-text:var(--ink)}
.layout-seo main>section.service-tools{--section-surface:var(--soft)}
.layout-seo main>section.service-values{--section-surface:var(--background)}
.layout-seo main>section.service-questions{--section-surface:var(--soft)}
.layout-seo main>section.service-contact{--section-surface:var(--ink);--section-text:var(--background)}
.layout-brand-strategy main>section.service-intro{--section-surface:var(--accent)}
.layout-brand-strategy main>section.service-foundations{--section-surface:var(--soft)}
.layout-performance-marketing main>section.service-capabilities{--section-surface:var(--ink);--section-text:var(--background)}
.layout-performance-marketing main>section.service-foundations{--section-surface:var(--background)}
.layout-performance-marketing main>section.service-process{--section-surface:var(--accent);--section-text:var(--ink)}
.layout-seo main>section.wd-hero{--section-surface:var(--mist)}
.web-design-page.layout-performance-marketing main>section.wd-hero{--section-surface:var(--rose)}
.web-design-page main>section.section,.web-design-page main>section.wd-hero{
 padding-block:var(--section-space);
 margin-block:0;
 background:var(--section-surface);
 color:var(--section-text);
}
/* Keep the section itself full width; constrain only its content with padding. */
.web-design-page main>section.container{
 width:100%;
 max-width:none;
 margin-inline:0;
 padding-inline:max(var(--section-gutter),calc((100% - var(--width))/2));
}
.layout-brand-strategy main>section.service-intro{
 padding-inline:max(var(--section-gutter),calc((100% - 850px)/2));
}
.web-design-page .site-footer{padding-top:var(--section-space)}
.layout-web-design .wd-hero-image{margin-top:0}
.layout-seo main>section.service-intro{border-top:0}
.layout-ecommerce .service-process .wd-timeline li{border-color:var(--line)}
.layout-ecommerce .service-process .wd-timeline li::before{background:var(--hover)}
@media(max-width:1000px){.web-design-page{--section-space:60px;--section-gutter:28px}}
@media(max-width:760px){.web-design-page{--section-space:44px;--section-gutter:20px}}