.services-page { background: var(--white); }

.services-hero { position: relative; min-height: 850px; display: grid; align-items: center; overflow: hidden; color: var(--white); background: var(--navy-deep); isolation: isolate; }
.services-hero-media { position: absolute; z-index: -1; inset: 0 0 0 38%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%); mask-image: linear-gradient(90deg, transparent 0, #000 30%); }
.services-hero-media::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, rgba(3,19,38,.08), rgba(3,19,38,.28)); }
.services-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 64% center; }
.services-hero-grid { padding-top: 108px; }
.services-hero-grid > div { max-width: 910px; }
.services-label { margin: 0 0 23px; color: var(--mint); font-size: .76rem; font-weight: 800; letter-spacing: .17em; line-height: 1.5; text-transform: uppercase; }
.services-hero h1 { margin: 0; font-family: var(--serif); font-size: clamp(4.2rem, 6.7vw, 7.5rem); font-weight: 400; line-height: .88; letter-spacing: -.07em; text-wrap: balance; }
.services-hero h1 span { color: var(--mint); }
.services-lead { max-width: 720px; margin: 38px 0 0; color: rgba(255,255,255,.8); font-size: clamp(1.08rem, 1.5vw, 1.35rem); line-height: 1.65; }
.services-hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 36px; }

.services-introduction { padding: 100px 0; background: var(--ice); }
.services-intro-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(50px, 8vw, 120px); }
.services-intro-grid h2 { margin: 0; font-family: var(--serif); font-size: clamp(2.7rem, 4.3vw, 4.8rem); font-weight: 400; line-height: .98; letter-spacing: -.055em; }
.services-intro-grid p { margin: 0; color: var(--muted); font-size: 1.08rem; line-height: 1.82; }
.services-intro-grid p + p { margin-top: 21px; }

.services-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(55px, 7vw, 105px); padding-block: 120px 140px; align-items: start; }
.services-toc { position: sticky; top: 105px; min-width: 0; padding: 26px 24px; color: var(--white); background: var(--navy); border-top: 4px solid var(--coral); }
.services-toc > strong { display: block; margin-bottom: 18px; color: var(--mint); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; }
.services-toc nav { display: grid; }
.services-toc a { padding: 8px 0; color: rgba(255,255,255,.7); border-bottom: 1px solid rgba(255,255,255,.1); font-size: .86rem; line-height: 1.35; transition: color .2s, padding-left .2s; }
.services-toc a:hover, .services-toc a:focus-visible { padding-left: 5px; color: var(--mint); }
.services-content { min-width: 0; }
.service-category + .service-category { margin-top: 125px; }
.category-heading { display: grid; grid-template-columns: 95px minmax(0, 1fr); gap: 30px; align-items: start; padding-bottom: 38px; border-bottom: 2px solid var(--navy); }
.category-heading > span { color: var(--coral); font-family: var(--serif); font-size: clamp(3.8rem, 6vw, 6.6rem); line-height: .82; }
.category-heading p { margin: 0 0 10px; color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.category-heading h2 { max-width: 900px; margin: 0; color: var(--navy); font-family: var(--serif); font-size: clamp(3rem, 4.8vw, 5.5rem); font-weight: 400; line-height: .92; letter-spacing: -.06em; text-wrap: balance; }
.service-detail { min-width: 0; padding: 64px 0 68px; border-bottom: 1px solid #ced7df; scroll-margin-top: 105px; }
.service-detail h3 { max-width: 850px; margin: 0 0 26px; color: var(--navy); font-family: var(--serif); font-size: clamp(2.15rem, 3.2vw, 3.7rem); font-weight: 400; line-height: 1.03; letter-spacing: -.045em; }
.service-detail p { max-width: 900px; margin: 0; color: #46566a; font-size: 1.04rem; line-height: 1.86; }
.service-detail p + p { margin-top: 18px; }
.service-detail ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; padding: 1px; margin: 32px 0 0; list-style: none; background: #c9d4dc; }
.service-detail li { position: relative; min-width: 0; padding: 18px 20px 18px 46px; color: var(--navy); background: var(--ice); font-size: .92rem; line-height: 1.45; }
.service-detail li::before { position: absolute; top: 24px; left: 20px; width: 12px; height: 2px; content: ""; background: var(--coral); }

.local-seo-section { padding: 115px 0; color: var(--white); background: var(--navy-deep); }
.local-seo-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(60px, 9vw, 130px); }
.local-seo-grid h2 { max-width: 720px; margin: 0; font-family: var(--serif); font-size: clamp(3.2rem, 5vw, 5.8rem); font-weight: 400; line-height: .92; letter-spacing: -.06em; }
.local-seo-grid p { margin: 0; color: rgba(255,255,255,.72); font-size: 1.06rem; line-height: 1.82; }
.local-seo-grid p + p { margin-top: 20px; }

.services-faq { padding: 120px 0 140px; background: var(--white); }
.faq-heading { display: grid; grid-template-columns: .34fr 1fr; gap: 50px; align-items: start; margin-bottom: 60px; }
.faq-heading h2 { max-width: 900px; margin: 0; color: var(--navy); font-family: var(--serif); font-size: clamp(3.2rem, 5vw, 5.8rem); font-weight: 400; line-height: .92; letter-spacing: -.06em; }
.faq-list { border-top: 1px solid #bdc9d3; }
.faq-list details { border-bottom: 1px solid #bdc9d3; }
.faq-list summary { position: relative; padding: 27px 60px 27px 0; color: var(--navy); font-size: clamp(1.05rem, 1.5vw, 1.25rem); font-weight: 750; line-height: 1.4; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { position: absolute; top: 23px; right: 5px; content: "+"; color: var(--coral); font-family: var(--serif); font-size: 2rem; font-weight: 400; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { max-width: 900px; padding: 0 70px 28px 0; margin: 0; color: var(--muted); line-height: 1.75; }

.services-cta { padding: 100px 0; color: var(--white); background: var(--coral); }
.services-cta .services-label { color: var(--navy); }
.services-cta-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(55px, 8vw, 120px); align-items: center; }
.services-cta h2 { max-width: 820px; margin: 0; font-family: var(--serif); font-size: clamp(3.2rem, 5vw, 5.8rem); font-weight: 400; line-height: .91; letter-spacing: -.06em; }
.services-cta p { max-width: 620px; margin: 0 0 28px; font-size: 1.08rem; line-height: 1.75; }
.services-cta .button-mint { min-width: 235px; }

@media (max-width: 1100px) {
  .services-layout { grid-template-columns: 210px minmax(0, 1fr); gap: 50px; }
  .services-toc { padding-inline: 18px; }
  .category-heading { grid-template-columns: 75px minmax(0, 1fr); gap: 22px; }
}

@media (max-width: 920px) {
  .services-hero { min-height: 900px; align-items: end; padding-bottom: 70px; }
  .services-hero-media { inset: 82px 0 auto; height: 49%; -webkit-mask-image: linear-gradient(180deg, #000 0, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 60%, transparent 100%); opacity: .72; }
  .services-hero-grid { padding-top: 420px; }
  .services-intro-grid, .local-seo-grid, .faq-heading, .services-cta-grid { grid-template-columns: 1fr; gap: 35px; }
  .services-layout { display: block; padding-top: 90px; }
  .services-toc { position: relative; top: auto; margin-bottom: 85px; }
  .services-toc nav { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .service-category + .service-category { margin-top: 95px; }
  .services-cta-grid > div:last-child { max-width: 720px; }
}

@media (max-width: 620px) {
  .services-hero { min-height: 850px; padding-bottom: 58px; }
  .services-hero-media { height: 43%; }
  .services-hero-grid { padding-top: 350px; }
  .services-label { margin-bottom: 16px; font-size: .65rem; letter-spacing: .13em; }
  .services-hero h1 { font-size: clamp(2.85rem, 14.7vw, 4.15rem); line-height: .91; letter-spacing: -.055em; overflow-wrap: anywhere; }
  .services-lead { margin-top: 25px; font-size: .98rem; line-height: 1.58; }
  .services-hero-actions { display: grid; width: 100%; margin-top: 27px; }
  .services-introduction { padding: 75px 0; }
  .services-intro-grid h2 { font-size: clamp(2.45rem, 12vw, 3.35rem); overflow-wrap: anywhere; }
  .services-intro-grid p { font-size: .98rem; line-height: 1.72; }
  .services-layout { padding-block: 72px 95px; }
  .services-toc { margin-bottom: 70px; padding: 23px 18px; }
  .services-toc nav { grid-template-columns: 1fr; }
  .category-heading { grid-template-columns: 45px minmax(0, 1fr); gap: 12px; padding-bottom: 28px; }
  .category-heading > span { font-size: 2.6rem; }
  .category-heading p { font-size: .62rem; }
  .category-heading h2 { font-size: clamp(2.35rem, 12vw, 3.15rem); line-height: .95; overflow-wrap: anywhere; }
  .service-detail { padding-block: 47px 52px; scroll-margin-top: 82px; }
  .service-detail h3 { margin-bottom: 22px; font-size: clamp(2rem, 10.5vw, 2.7rem); overflow-wrap: anywhere; }
  .service-detail p { font-size: .96rem; line-height: 1.76; }
  .service-detail ul { grid-template-columns: 1fr; margin-top: 27px; }
  .service-detail li { padding: 15px 14px 15px 40px; font-size: .88rem; }
  .service-detail li::before { top: 21px; left: 16px; }
  .local-seo-section, .services-faq, .services-cta { padding-block: 78px; }
  .local-seo-grid h2, .faq-heading h2, .services-cta h2 { font-size: clamp(2.55rem, 12.5vw, 3.55rem); overflow-wrap: anywhere; }
  .local-seo-grid p, .services-cta p { font-size: .96rem; line-height: 1.72; }
  .faq-heading { margin-bottom: 42px; }
  .faq-list summary { padding: 22px 44px 22px 0; font-size: 1rem; }
  .faq-list summary::after { top: 18px; right: 2px; }
  .faq-list details p { padding: 0 0 23px; font-size: .94rem; }
}