:root { --service-tint: #f5f0ed; }

.service-template { overflow: hidden; }
.service-shell { width: min(1180px, calc(100% - 60px)); margin: 0 auto; }
.service-kicker { margin: 0 0 15px; color: var(--brand-red); font-size: 11px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }

.service-template-hero { padding: 94px 0 90px; background: var(--service-tint); }
.service-template-hero-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(360px, 1.05fr); gap: clamp(42px, 7vw, 108px); align-items: center; }
.service-template-hero h1 { max-width: 650px; margin: 0; color: var(--ink); font-size: clamp(42px, 4.3vw, 60px); font-weight: 500; line-height: 1.06; letter-spacing: -.05em; }
.service-template-hero p:not(.service-kicker) { max-width: 550px; margin: 24px 0 0; color: var(--muted); font-size: 18px; line-height: 1.55; }
.service-template-hero .button { margin-top: 31px; }
.service-template-hero .button { min-height: 54px; padding: 0 25px; border: 2px solid var(--ink); box-shadow: 3px 3px 0 rgba(32,32,36,.25); color: #fff; font-size: 15px; font-weight: 800; }
.service-template-visual { height: 430px; margin: 0; overflow: hidden; border-radius: 20px; background: #e7e2de; }
.service-template-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 67% center; }

.service-block { padding: 108px 0; }
.service-block.is-tint { background: #f1eeea; }
.service-heading { max-width: 740px; margin: 0 auto; text-align: center; }
.service-heading h2, .service-split-copy h2 { margin: 0; color: var(--ink); font-size: clamp(38px, 4.35vw, 58px); font-weight: 500; line-height: 1.08; letter-spacing: -.04em; }
.service-heading-process h2 { letter-spacing: -.015em; }
.service-heading > p:last-child { max-width: 640px; margin: 20px auto 0; color: var(--muted); font-size: 17px; line-height: 1.58; }

.service-benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 52px; }
.service-benefit-card { min-height: 248px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px 26px; border: 1px solid rgba(32,32,36,.13); border-radius: 16px; background: #fff; text-align: center; }
.service-benefit-icon { display: grid; width: 48px; height: 48px; place-items: center; margin-bottom: 23px; border-radius: 50%; background: var(--service-tint); color: var(--ink); }
.service-benefit-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.service-benefit-card h3 { margin: 0; color: var(--ink); font-size: 21px; font-weight: 600; letter-spacing: -.025em; }
.service-benefit-card p { max-width: 285px; margin: 12px 0 0; color: var(--muted); font-size: 15px; line-height: 1.5; }

.service-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 52px; }
.service-step { min-height: 252px; padding: 29px 25px; border: 1px solid rgba(32,32,36,.14); border-radius: 16px; background: rgba(255,255,255,.7); }
.service-step { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.service-step-number { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; font-size: 11px; font-weight: 800; }
.service-step h3 { margin: 33px 0 11px; color: var(--ink); font-size: 21px; font-weight: 600; line-height: 1.16; letter-spacing: -.025em; }
.service-step p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.52; }

.service-split { display: grid; grid-template-columns: minmax(320px, .93fr) minmax(0, 1.07fr); gap: clamp(48px, 8vw, 118px); align-items: center; }
.service-split-image { height: 400px; margin: 0; overflow: hidden; border-radius: 18px; background: #e7e2de; }
.service-split-image img { width: 100%; height: 100%; object-fit: cover; object-position: 67% center; }
.service-split-copy > p { max-width: 570px; margin: 22px 0 0; color: var(--muted); font-size: 17px; line-height: 1.58; }
.service-inclusion-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 24px; margin: 31px 0 0; padding: 0; list-style: none; }
.service-inclusion-list li { position: relative; padding-left: 23px; color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.45; }
.service-inclusion-list li::before { position: absolute; left: 2px; top: 5px; width: 10px; height: 6px; border-bottom: 2px solid var(--brand-red); border-left: 2px solid var(--brand-red); content: ""; transform: rotate(-45deg); }

.service-fit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 48px; }
.service-fit-card { min-height: 176px; padding: 27px; border: 1px solid rgba(32,32,36,.14); border-radius: 16px; background: #fff; }
.service-fit-card h3 { margin: 0 0 9px; color: var(--ink); font-size: 20px; font-weight: 600; letter-spacing: -.025em; }
.service-fit-card p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.service-industry-grid .service-fit-card { display: flex; min-height: 220px; flex-direction: column; align-items: center; justify-content: center; padding: 27px 23px; text-align: center; }
.service-fit-icon { display: grid; width: 46px; height: 46px; place-items: center; margin-bottom: 20px; border-radius: 50%; background: #fff; color: var(--ink); }
.service-fit-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.65; }
.service-industry-grid .service-fit-card p { max-width: 265px; }

@media (min-width: 980px) { .service-heading-wide { max-width: none; } .service-heading-wide h2 { white-space: nowrap; } .service-heading-wide > p:last-child { max-width: 860px; } .service-heading-process > p:last-child { max-width: none; white-space: nowrap; } }

.service-faq { max-width: 850px; margin: 48px auto 0; border-top: 1px solid var(--line); }
.service-faq details { border-bottom: 1px solid var(--line); }
.service-faq summary { padding: 21px 0; color: var(--ink); font-size: 17px; font-weight: 600; list-style: none; cursor: pointer; }
.service-faq summary::-webkit-details-marker { display: none; }
.service-faq summary::after { float: right; content: "+"; }
.service-faq details[open] summary::after { content: "−"; }
.service-faq p { margin: 0 0 21px; color: var(--muted); font-size: 16px; line-height: 1.58; }

@media (max-width: 900px) { .service-template-hero-grid, .service-split { grid-template-columns: 1fr; gap: 36px; } .service-benefit-grid, .service-fit-grid { grid-template-columns: 1fr; } .service-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .service-shell { width: min(100% - 42px, 1180px); } .service-template-hero { padding: 70px 0 74px; } .service-template-hero h1 { font-size: 46px; } .service-template-visual { height: 330px; } .service-block { padding: 76px 0; } .service-steps { grid-template-columns: 1fr; margin-top: 39px; } .service-benefit-grid { margin-top: 39px; } .service-split-image { height: 320px; } .service-inclusion-list { grid-template-columns: 1fr; } .service-fit-grid { margin-top: 38px; } }

/* Service concepts stay fully visible, including on narrow screens. */
.service-template-visual, .service-split-image { height: auto; aspect-ratio: 1000 / 760; }
.service-template-visual img, .service-split-image img { display: block; height: auto; object-fit: contain; object-position: center; }