:root {
    --service-bg: #f7fafa;
    --service-surface: #ffffff;
    --service-mist: #e7eff1;
    --service-line: rgba(21, 64, 80, .13);
}

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

/* Interior pages open with the dark compact hero, so the unscrolled navbar
   stays transparent with light links — matching the landing page. */

.service-catalog {
    position: relative;
    padding: 5rem clamp(25px, 6vw, 120px) 7.5rem;
    overflow: hidden;
    background: var(--service-bg);
}

.service-catalog::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: .46;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(21,64,80,.14) 1px, transparent 1.4px);
    background-size: 54px 54px;
    mask-image: linear-gradient(90deg, black, transparent 18%, transparent 82%, black);
}

.service-catalog .container { position: relative; z-index: 1; max-width: 1400px; }

.service-showcase {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.1rem;
}

.service-intro {
    grid-column: 1 / 13;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
    grid-template-rows: auto 1fr;
    column-gap: clamp(4rem, 10vw, 10rem);
    min-height: 0;
    padding: 2.25rem 0 4.75rem;
}

.service-intro .eyebrow { grid-column: 1; justify-content: flex-start; margin-bottom: 1.7rem; color: var(--teal-mid); }
.service-intro h1 {
    grid-column: 1;
    grid-row: 2;
    max-width: 650px;
    color: var(--ink);
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    font-size: clamp(3.4rem, 5.7vw, 6.8rem);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: .91;
    text-wrap: balance;
}
.service-summary-card {
    position: relative;
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 330px;
    padding: clamp(2rem, 3.5vw, 3.2rem);
    overflow: hidden;
    background: rgba(255,255,255,.88);
    border: 1px solid var(--service-line);
    border-radius: 28px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.service-summary-card::after {
    content: '';
    position: absolute;
    top: -82px;
    right: -62px;
    width: 210px;
    aspect-ratio: 1;
    border: 1px solid rgba(21,64,80,.08);
    border-radius: 50%;
    box-shadow: 0 0 0 35px rgba(21,64,80,.025), 0 0 0 70px rgba(21,64,80,.018);
}
.summary-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: auto; color: var(--teal); background: var(--service-bg); border: 1px solid var(--service-line); border-radius: 15px; font-size: 1.45rem; }
.summary-kicker { margin-bottom: .75rem; color: var(--teal-mid); font-family: var(--mono); font-size: .65rem; letter-spacing: .11em; text-transform: uppercase; }
.service-summary-card > p:not(.summary-kicker) { position: relative; z-index: 1; max-width: 520px; color: var(--muted); font-size: 1.04rem; line-height: 1.75; }
.service-intro-link { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .65rem; width: fit-content; margin-top: 2.2rem; padding-bottom: .35rem; color: var(--teal); border-bottom: 1px solid rgba(21,64,80,.3); font-size: .88rem; font-weight: 700; text-decoration: none; }
.service-intro-link i { color: var(--gold); transition: transform .25s ease; }
.service-intro-link:hover i { transform: translate(3px, 3px); }

.service-module {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 510px;
    padding: 2rem;
    overflow: hidden;
    background: rgba(255,255,255,.82);
    color: var(--ink);
    border: 1px solid var(--service-line);
    border-radius: 26px;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
    transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .3s ease, background .3s ease;
}

a.service-module:hover { transform: translateY(-5px); background: var(--service-surface); border-color: rgba(21,64,80,.27); }
.module-web { grid-column: 1 / 5; }
.module-automation { grid-column: 5 / 9; }
.module-security { grid-column: 9 / 13; }
.module-custom { grid-column: 1 / 5; }
.module-managed { grid-column: 5 / 9; }
.module-design { grid-column: 9 / 13; }

.module-copy { position: relative; z-index: 2; }
.module-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 1.4rem; color: var(--teal); background: var(--service-bg); border: 1px solid var(--service-line); border-radius: 15px; font-size: 1.45rem; transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease; }
.service-module:focus-visible .module-icon { color: #fff; background: var(--gold); border-color: var(--gold); }
@media (hover: hover) and (pointer: fine) {
    .service-module:hover .module-icon { color: #fff; background: var(--gold); border-color: var(--gold); }
}
.module-kicker { margin-bottom: .55rem; color: var(--teal-mid); font-family: var(--mono); font-size: .61rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.service-module :is(h2, h3) { min-height: 2.16em; max-width: 420px; color: var(--ink); font-size: clamp(1.45rem, 2vw, 2.15rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.08; }
.service-module p:not(.module-kicker) { max-width: 480px; margin-top: .8rem; color: var(--muted); font-size: .88rem; line-height: 1.6; }
.module-points { display: grid; gap: .58rem; margin: 1.15rem 0 .15rem; padding: 0; list-style: none; }
.module-points li { position: relative; padding-left: 1.35rem; color: #516974; font-size: .77rem; line-height: 1.45; text-wrap: pretty; }
.module-points li::before { content: '\2713'; position: absolute; top: .02rem; left: 0; color: var(--gold); font-size: .78rem; font-weight: 800; }
.module-link { display: inline-flex; align-items: center; gap: .55rem; width: fit-content; margin-top: auto; color: var(--teal); font-size: .75rem; font-weight: 700; }
.module-link i { color: var(--gold); transition: transform .25s ease; }
a:hover > .module-link i { transform: translate(3px, -3px); }

.module-web { flex-direction: column; align-items: stretch; }
.module-web .module-copy { display: block; flex: 0 0 auto; padding: 0; }

/* Generated service artwork */
.service-visual {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 1.5rem 0 1.2rem;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(21,64,80,.13);
    border-radius: 15px;
}

.service-visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .45s cubic-bezier(.16,1,.3,1);
}

.service-module:hover .service-visual img { transform: scale(1.015); }

.module-web .service-visual-web {
    align-self: auto;
    flex: 0 0 auto;
    min-width: 0;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 1.5rem 0 1.2rem;
}

.module-design .service-visual-design { margin: 1.5rem 0 1.2rem; }

.service-contact { padding: 0 clamp(25px, 6vw, 120px) 7rem; background: var(--service-bg); }
.service-contact-inner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: 4rem; align-items: end; padding: clamp(2.5rem, 5vw, 5rem); background: var(--teal); border-radius: 30px; }
.service-contact .eyebrow { justify-content: flex-start; }
.service-contact h2 { max-width: 720px; margin: 1rem 0; color: white; font-size: clamp(2.5rem, 5vw, 5.5rem); letter-spacing: -.04em; line-height: .95; }
.service-contact p:not(.eyebrow) { max-width: 650px; color: rgba(255,255,255,.63); line-height: 1.7; }
.service-contact-actions { display: flex; align-items: flex-end; flex-direction: column; gap: 1.2rem; }
.services-page .btn-gold { color: var(--ink); background: var(--gold); border-radius: 999px; }
.service-phone { color: rgba(255,255,255,.72); font-family: var(--mono); font-size: .75rem; text-decoration: none; }

@media (max-width: 1300px) {
    .services-page .nav-container,
    .service-catalog,
    .service-contact,
    .services-page .footer { padding-left: 60px; padding-right: 60px; }
    .service-intro h1 { font-size: clamp(3.5rem, 5.4vw, 5.6rem); }
}

@media (max-width: 1150px) {
    .services-page .nav-container,
    .service-catalog,
    .service-contact,
    .services-page .footer { padding-left: 25px; padding-right: 25px; }
    .service-intro { grid-column: 1 / 13; display: flex; flex-direction: column; min-height: auto; padding: 1rem 0 3rem; }
    .service-intro h1 { max-width: 850px; }
    .service-summary-card { width: 100%; min-height: 280px; margin-top: 2.5rem; }
    .module-web { grid-column: 1 / 7; }
    .module-automation { grid-column: 7 / 13; }
    .module-security { grid-column: 1 / 7; }
    .module-custom { grid-column: 7 / 13; }
    .module-managed { grid-column: 1 / 7; }
    .module-design { grid-column: 7 / 13; }
}

@media (max-width: 760px) {
    .service-catalog { padding-top: 8.5rem; padding-bottom: 5rem; }
    .service-showcase { grid-template-columns: 1fr; gap: .85rem; }
    .service-intro,
    .module-automation,
    .module-security,
    .module-web,
    .module-managed,
    .module-design,
    .module-custom { grid-column: 1; }
    .service-intro h1 { font-size: clamp(3rem, 14vw, 4.7rem); }
    .service-module { min-height: 0; padding: 1.5rem; border-radius: 22px; }
    .service-module :is(h2, h3) { min-height: 0; }
    .module-points { margin-top: 1rem; }
    .module-points li { font-size: .8rem; }
    .module-web { flex-direction: column; padding: 1.5rem; }
    .module-web .module-copy { flex-basis: auto; padding: 0; }
    .module-web .service-visual-web { width: 100%; min-height: 0; aspect-ratio: 16 / 9; margin: 1.5rem 0 1.2rem; }
    .module-design .service-visual-design { min-height: 0; }
    .service-contact-inner { grid-template-columns: 1fr; gap: 2.5rem; }
    .service-contact-actions { align-items: flex-start; }
}

@media (max-width: 480px) {
    .services-page .navbar { padding-left: 20px; padding-right: 20px; }
    .service-catalog,
    .service-contact,
    .services-page .footer { padding-left: 20px; padding-right: 20px; }
    .service-catalog { padding-top: 7.5rem; }
    .service-intro { padding-bottom: 2.2rem; }
    .service-intro h1 { font-size: clamp(2.8rem, 15vw, 4rem); }
    .service-summary-card { min-height: 260px; padding: 1.5rem; border-radius: 22px; }
    .service-summary-card > p:not(.summary-kicker) { font-size: .96rem; }
    .service-module :is(h2, h3) { font-size: 1.7rem; }
    .module-web .service-visual-web { min-height: 0; }
    .service-contact { padding-bottom: 4.5rem; }
    .service-contact-inner { padding: 2rem 1.5rem; border-radius: 24px; }
    .service-contact-actions .btn { width: 100%; }
}

/* ── Coming-soon service detail pages ─────────────────────────────── */
.coming-soon {
    position: relative;
    display: grid;
    place-items: center;
    padding: 6rem clamp(25px, 6vw, 120px) 7rem;
    overflow: hidden;
    background: var(--service-bg);
    text-align: center;
}
.coming-soon::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: .45;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(21,64,80,.14) 1px, transparent 1.4px);
    background-size: 54px 54px;
    mask-image: radial-gradient(circle at 50% 42%, black, transparent 70%);
    -webkit-mask-image: radial-gradient(circle at 50% 42%, black, transparent 70%);
}
.coming-inner { position: relative; z-index: 1; max-width: 700px; margin: 0 auto; }
.coming-icon {
    display: grid;
    place-items: center;
    width: 78px;
    height: 78px;
    margin: 0 auto 2rem;
    color: var(--teal);
    background: #fff;
    border: 1px solid var(--service-line);
    border-radius: 22px;
    font-size: 2.1rem;
    box-shadow: 0 18px 40px rgba(21,64,80,.1);
}
.coming-kicker {
    color: var(--teal-mid);
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.coming-soon :is(h1, h2) {
    margin: 1.15rem 0 1.5rem;
    color: var(--ink);
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    font-size: clamp(2.1rem, 4.2vw, 3.4rem);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1.03;
    text-wrap: balance;
}
.coming-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1.15rem;
    color: var(--ink-deep);
    background: var(--gold);
    border-radius: 999px;
    font-family: var(--mono);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.coming-badge i { font-size: .95rem; }
.coming-desc {
    max-width: 560px;
    margin: 1.9rem auto 0;
    color: var(--muted);
    font-size: 1.04rem;
    line-height: 1.75;
}
.coming-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.1rem 1.5rem;
    margin-top: 2.6rem;
}
.coming-back {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--teal);
    font-size: .88rem;
    font-weight: 700;
    text-decoration: none;
    padding-bottom: .3rem;
    border-bottom: 1px solid rgba(21,64,80,.28);
    transition: color .2s ease, border-color .2s ease;
}
.coming-back:hover { color: var(--gold); border-color: var(--gold); }
.coming-back i { transition: transform .2s ease; }
.coming-back:hover i { transform: translateX(-3px); }

@media (max-width: 760px) {
    .coming-soon { min-height: 0; padding: 9rem 25px 5.5rem; }
    .coming-icon { width: 66px; height: 66px; font-size: 1.8rem; border-radius: 18px; }
    .coming-actions { flex-direction: column; gap: 1.2rem; }
    .coming-actions .btn { width: 100%; }
}