/* Web Design service page — aligned with Home's scale, surface and interaction system. */
body:has([data-editable="hero-title"]) main > section:not(#client-logos) .section-container,
body:has([data-editable="hero-title"]) main > section > div.max-w-\[1240px\] {
    width: min(100% - 96px, 1500px) !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
}

body:has([data-editable="hero-title"]) main > section:first-child {
    padding: 142px 0 68px !important;
}

body:has([data-editable="hero-title"]) main > section:first-child::before {
    position: absolute;
    z-index: -1;
    top: -30%;
    left: 50%;
    width: min(62vw, 920px);
    height: min(62vw, 920px);
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(254,247,175,.72), rgba(254,247,175,.13) 42%, transparent 70%);
    filter: blur(16px);
    content: "";
    pointer-events: none;
}

body:has([data-editable="hero-title"]) main > section:first-child > div > div {
    max-width: 1120px !important;
    gap: 30px !important;
}

body:has([data-editable="hero-title"]) [data-editable="hero-title"] {
    font-size: clamp(3.35rem, 5.8vw, 5.5rem) !important;
    font-weight: 440 !important;
    line-height: .98 !important;
    letter-spacing: -.068em !important;
}

body:has([data-editable="hero-title"]) [data-editable="hero-title"] b {
    font-weight: 620 !important;
}

body:has([data-editable="hero-title"]) [data-editable="hero-desc"] {
    max-width: 690px !important;
    margin-inline: auto;
    color: rgba(17,17,17,.64) !important;
    font-size: 1.18rem !important;
    line-height: 1.48 !important;
    letter-spacing: -.028em !important;
}

body:has([data-editable="hero-title"]) main > section:first-child .text-\[18px\] {
    max-width: 730px !important;
    color: rgba(17,17,17,.56) !important;
    font-size: 1rem !important;
    line-height: 1.65 !important;
}

body:has([data-editable="hero-title"]) main > section:nth-child(3) {
    padding: 78px 0 !important;
}

body:has([data-editable="hero-title"]) main > section:nth-child(3) h2,
body:has([data-editable="hero-title"]) main > section:nth-child(4) h2,
body:has([data-editable="hero-title"]) main > section:nth-child(8) h2,
body:has([data-editable="hero-title"]) main > section:nth-child(9) h2 {
    font-size: clamp(2.55rem, 4vw, 4.2rem) !important;
    font-weight: 460 !important;
    line-height: 1.01 !important;
    letter-spacing: -.06em !important;
}

body:has([data-editable="hero-title"]) main > section:nth-child(3) > div {
    gap: clamp(42px, 7vw, 120px) !important;
}

body:has([data-editable="hero-title"]) main > section:nth-child(3) > div > div:last-child > div {
    padding: clamp(28px, 4vw, 48px) !important;
    border-color: rgba(17,17,17,.075) !important;
    border-radius: 29px !important;
    background: rgba(255,255,255,.78) !important;
    box-shadow: 0 22px 52px rgba(37,30,19,.08) !important;
}

body:has([data-editable="hero-title"]) main > section:nth-child(3) li {
    padding: 15px 0;
    border-bottom: 1px solid rgba(17,17,17,.06);
}

body:has([data-editable="hero-title"]) main > section:nth-child(3) li:last-child { border-bottom: 0; }

body:has([data-editable="hero-title"]) main > section:nth-child(4) {
    padding: 66px 0 86px !important;
}

body:has([data-editable="hero-title"]) .process-section-wrapper {
    padding: 10px !important;
    border: 1px solid rgba(17,17,17,.075);
    border-radius: 32px !important;
    background: rgba(255,255,255,.42) !important;
    box-shadow: 0 20px 52px rgba(37,30,19,.06);
}

body:has([data-editable="hero-title"]) .process-card {
    border-color: rgba(17,17,17,.07) !important;
    border-radius: 23px !important;
    background: rgba(255,255,255,.72) !important;
}

body:has([data-editable="hero-title"]) .process-card.active {
    background: #fff !important;
    box-shadow: 0 18px 40px rgba(37,30,19,.10) !important;
}

body:has([data-editable="hero-title"]) main > section:nth-child(5) {
    padding: 88px 0 !important;
    border: 0 !important;
    background: transparent !important;
}

body:has([data-editable="hero-title"]) main > section:nth-child(5) > div {
    gap: 88px !important;
}

body:has([data-editable="hero-title"]) main > section:nth-child(5) img {
    border-radius: 27px !important;
    transition: transform .55s cubic-bezier(.2,.8,.2,1);
}

body:has([data-editable="hero-title"]) main > section:nth-child(5) .group:hover img { transform: scale(1.025); }

body:has([data-editable="hero-title"]) main > section:nth-child(6) {
    padding: 82px 0 !important;
    background: transparent !important;
}

body:has([data-editable="hero-title"]) #why-us > div {
    width: min(100% - 96px, 1500px) !important;
    max-width: none !important;
    margin-inline: auto;
    padding: clamp(34px, 5vw, 72px) !important;
    border-radius: 34px;
}

body:has([data-editable="hero-title"]) #work,
body:has([data-editable="hero-title"]) #deliverables,
body:has([data-editable="hero-title"]) #testimonials,
body:has([data-editable="hero-title"]) #faq {
    padding-block: 76px !important;
}

body:has([data-editable="hero-title"]) #deliverables > div,
body:has([data-editable="hero-title"]) #faq > div,
body:has([data-editable="hero-title"]) #work > div,
body:has([data-editable="hero-title"]) #testimonials > div {
    width: min(100% - 96px, 1500px) !important;
    max-width: none !important;
    padding-inline: 0 !important;
}

body:has([data-editable="hero-title"]) #deliverables .grid > div {
    border-radius: 21px !important;
    transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}

body:has([data-editable="hero-title"]) #deliverables .grid > div:hover {
    transform: translateY(-4px);
    box-shadow: 0 17px 34px rgba(37,30,19,.10);
}

body:has([data-editable="hero-title"]) #faq > div > div > div:last-child {
    padding: 9px !important;
    border: 1px solid rgba(17,17,17,.075);
    border-radius: 27px !important;
    background: rgba(255,255,255,.42) !important;
}

body:has([data-editable="hero-title"]) #faq .faq-item {
    border-radius: 19px !important;
    background: rgba(255,255,255,.78) !important;
}

@media (max-width: 1179px) {
    body:has([data-editable="hero-title"]) main > section:not(#client-logos) .section-container,
    body:has([data-editable="hero-title"]) main > section > div.max-w-\[1240px\],
    body:has([data-editable="hero-title"]) #why-us > div,
    body:has([data-editable="hero-title"]) #deliverables > div,
    body:has([data-editable="hero-title"]) #faq > div,
    body:has([data-editable="hero-title"]) #work > div,
    body:has([data-editable="hero-title"]) #testimonials > div { width: min(100% - 56px, 1500px) !important; }
}

@media (max-width: 767px) {
    body:has([data-editable="hero-title"]) main > section:first-child { padding: 108px 0 48px !important; }
    body:has([data-editable="hero-title"]) main > section:not(#client-logos) .section-container,
    body:has([data-editable="hero-title"]) main > section > div.max-w-\[1240px\],
    body:has([data-editable="hero-title"]) #why-us > div,
    body:has([data-editable="hero-title"]) #deliverables > div,
    body:has([data-editable="hero-title"]) #faq > div,
    body:has([data-editable="hero-title"]) #work > div,
    body:has([data-editable="hero-title"]) #testimonials > div { width: min(100% - 36px, 1500px) !important; }
    body:has([data-editable="hero-title"]) [data-editable="hero-title"] { font-size: clamp(2.75rem, 12.5vw, 4.3rem) !important; }
    body:has([data-editable="hero-title"]) [data-editable="hero-desc"] { font-size: 1rem !important; }
    body:has([data-editable="hero-title"]) main > section:nth-child(3),
    body:has([data-editable="hero-title"]) main > section:nth-child(4),
    body:has([data-editable="hero-title"]) main > section:nth-child(5),
    body:has([data-editable="hero-title"]) #work,
    body:has([data-editable="hero-title"]) #deliverables,
    body:has([data-editable="hero-title"]) #testimonials,
    body:has([data-editable="hero-title"]) #faq { padding-block: 52px !important; }
    body:has([data-editable="hero-title"]) main > section:nth-child(3) h2,
    body:has([data-editable="hero-title"]) main > section:nth-child(4) h2,
    body:has([data-editable="hero-title"]) main > section:nth-child(8) h2,
    body:has([data-editable="hero-title"]) main > section:nth-child(9) h2 { font-size: 2.35rem !important; }
    body:has([data-editable="hero-title"]) .process-section-wrapper { padding: 7px !important; border-radius: 23px !important; }
    body:has([data-editable="hero-title"]) .process-card { min-height: auto !important; padding: 23px !important; border-radius: 17px !important; }
    body:has([data-editable="hero-title"]) main > section:nth-child(5) > div { gap: 54px !important; }
    body:has([data-editable="hero-title"]) #why-us > div { padding: 34px 22px !important; border-radius: 27px; }
    body:has([data-editable="hero-title"]) #faq > div > div > div:last-child { border-radius: 21px !important; }
    body:has([data-editable="hero-title"]) #faq .faq-item { padding: 22px !important; border-radius: 16px !important; }
}