.page-hero,
.service-detail__hero {
    position: relative;
    overflow: hidden;
    padding: clamp(74px, 9vw, 136px) 0;
    border-bottom: 1px solid var(--line);
    background:
        radial-gradient(circle at 86% 18%, rgba(7, 87, 255, 0.09), transparent 30rem),
        var(--surface);
}

.page-hero::after,
.service-detail__hero::after {
    content: "";
    position: absolute;
    top: -6rem;
    right: -5rem;
    width: 34rem;
    height: 34rem;
    border: 1px solid rgba(7, 87, 255, 0.09);
    border-radius: 50%;
    pointer-events: none;
}

.page-hero__grid,
.service-detail__hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(480px, 1.05fr) minmax(400px, 0.95fr);
    gap: clamp(64px, 11vw, 170px);
    align-items: end;
}

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 46px;
    color: var(--muted);
    font-size: 0.76rem;
}

.breadcrumbs a {
    color: var(--blue);
    text-decoration: none;
}

.page-hero h1,
.service-detail__hero h1 {
    max-width: 900px;
    margin-bottom: 0;
    font-size: clamp(3rem, 5.8vw, 6.1rem);
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.page-hero__copy {
    padding-bottom: 8px;
}

.page-hero__copy p,
.service-detail__lead {
    color: var(--muted-dark);
    font-size: clamp(1rem, 1.35vw, 1.2rem);
    line-height: 1.75;
}

.page-hero__copy p:last-child {
    margin-bottom: 0;
}

.services-directory {
    background: white;
}

.services-directory__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}

.directory-card {
    min-height: 500px;
    padding: clamp(32px, 4vw, 56px);
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    transition: background 170ms ease, transform 170ms ease;
}

.directory-card__icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
}

.directory-card > p {
    margin: 34px 0 12px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.directory-card h2 {
    margin-bottom: 18px;
    font-size: clamp(1.8rem, 3vw, 2.7rem);
}

.directory-card > div {
    max-width: 590px;
    margin-bottom: 32px;
    color: var(--muted);
    line-height: 1.7;
}

.directory-card__description p {
    margin-bottom: 12px;
}

.directory-card__description p:last-child {
    margin-bottom: 0;
    color: var(--muted-dark);
}

.directory-card strong {
    color: var(--blue);
    font-size: 0.83rem;
}

.directory-card:hover {
    background: var(--surface);
}

.service-detail__hero-grid {
    align-items: center;
}

.service-detail__hero h1 {
    margin-bottom: 28px;
    font-size: clamp(3rem, 5.3vw, 5.6rem);
}

.service-detail__lead {
    max-width: 800px;
    margin-bottom: 34px;
}

.service-value {
    padding-top: 0;
    background: white;
}

.service-value__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.service-value__grid article {
    min-height: 245px;
    padding: clamp(28px, 3.5vw, 44px);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.service-value__grid article > span {
    display: grid;
    width: 34px;
    height: 34px;
    margin-bottom: 38px;
    place-items: center;
    border-radius: 50%;
    background: var(--blue);
    color: white;
    font-size: 0.82rem;
    font-weight: 800;
}

.service-value__grid h3 {
    margin-bottom: 11px;
    font-size: 1.2rem;
}

.service-value__grid p {
    margin-bottom: 0;
    color: var(--muted);
    line-height: 1.7;
}

.service-outcomes {
    padding: clamp(30px, 4vw, 48px);
    border: 1px solid rgba(7, 87, 255, 0.15);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: var(--shadow-sm);
}

.service-outcomes > p {
    color: var(--blue);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.service-outcomes ul,
.scope-panel ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.service-outcomes li,
.scope-panel li {
    position: relative;
    padding: 15px 0 15px 27px;
    border-bottom: 1px solid var(--line);
    color: var(--ink-soft);
}

.service-outcomes li:last-child,
.scope-panel li:last-child {
    border-bottom: 0;
}

.service-outcomes li::before,
.scope-panel li::before {
    content: "";
    position: absolute;
    top: 24px;
    left: 2px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--blue);
}

.service-overview__grid {
    display: grid;
    grid-template-columns: minmax(380px, 0.8fr) minmax(540px, 1.2fr);
    gap: clamp(70px, 11vw, 170px);
}

.service-overview h2 {
    max-width: 650px;
}

.prose {
    max-width: 760px;
}

.prose p {
    color: var(--muted-dark);
    font-size: 1.05rem;
    line-height: 1.85;
}

.service-scope {
    padding-top: 0;
}

.service-scope__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.scope-panel {
    padding: clamp(36px, 5vw, 64px);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.scope-panel--blue {
    background: var(--surface-blue);
}

.scope-panel h2 {
    max-width: 560px;
    margin-bottom: 30px;
    font-size: clamp(1.9rem, 3vw, 2.8rem);
}

.scope-panel li {
    line-height: 1.65;
}

.service-approach {
    border-block: 1px solid var(--line);
    background: var(--surface);
}

.process-list--service li::before {
    box-shadow: 0 0 0 6px var(--surface);
}

.service-faq {
    background: white;
}

.related-services {
    padding-top: 0;
}

.related-services__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.related-services__grid a {
    min-height: 260px;
    padding: 36px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: white;
    text-decoration: none;
    transition: background 160ms ease, transform 160ms ease;
}

.related-services__grid a:hover {
    background: var(--surface);
    transform: translateY(-3px);
}

.related-services__grid span,
.related-services__grid strong {
    color: var(--blue);
    font-size: 0.76rem;
    font-weight: 800;
}

.related-services__icon {
    width: 56px;
    height: 56px;
}

.related-services__grid h3 {
    margin: 28px 0 12px;
    font-size: 1.5rem;
}

.related-services__grid p {
    color: var(--muted);
    line-height: 1.65;
}


/* Hover depth and accent rotation for services pages */

.directory-card {
    transition: background var(--duration-base) var(--ease-out),
        transform var(--duration-base) var(--ease-out),
        border-color var(--duration-base) var(--ease-out);
}

.directory-card:hover {
    transform: translateY(-4px);
    border-color: rgba(7, 87, 255, 0.22);
}

.directory-card:hover .icon-box {
    transform: translateY(-3px) scale(1.05);
    box-shadow: var(--shadow-sm), 0 0 0 5px rgba(7, 87, 255, 0.08);
}

.related-services__grid a:hover .icon-box,
.related-services__grid a:hover .related-services__icon {
    transform: translateY(-3px) scale(1.05);
    box-shadow: var(--shadow-sm), 0 0 0 5px rgba(7, 87, 255, 0.08);
}

.service-value__grid article,
.scope-panel {
    transition: transform var(--duration-base) var(--ease-out),
        border-color var(--duration-base) var(--ease-out),
        box-shadow var(--duration-base) var(--ease-out);
}

.service-value__grid article:hover {
    transform: translateY(-3px);
    border-color: rgba(7, 87, 255, 0.25);
    box-shadow: var(--shadow-sm);
}

.scope-panel:hover {
    box-shadow: var(--shadow-sm);
}

.service-capabilities li {
    transition: background var(--duration-base) var(--ease-out);
}

.service-capabilities li:hover {
    background: var(--surface);
}

.service-selector__questions a {
    transition: transform var(--duration-fast) var(--ease-out), padding-left var(--duration-fast) var(--ease-out);
}

.service-selector__questions a:hover {
    padding-left: 8px;
}

.service-selector__questions a:hover strong {
    transform: translateX(2px);
}

.service-selector__questions strong {
    display: inline-block;
    transition: transform var(--duration-fast) var(--ease-out);
}

/* Accent rotation for icon boxes (stroke is not inherited via currentColor here) */

.services-directory__grid .directory-card:nth-child(3n+2) .icon-box,
.related-services__grid a:nth-child(3n+2) .icon-box {
    border-color: rgba(8, 205, 209, 0.4);
    background: rgba(8, 205, 209, 0.1);
}

.services-directory__grid .directory-card:nth-child(3n+2) .icon-box svg,
.related-services__grid a:nth-child(3n+2) .icon-box svg {
    stroke: var(--cyan);
}

.services-directory__grid .directory-card:nth-child(3n+3) .icon-box,
.related-services__grid a:nth-child(3n+3) .icon-box {
    border-color: rgba(7, 21, 61, 0.16);
    background: rgba(7, 21, 61, 0.045);
}

.services-directory__grid .directory-card:nth-child(3n+3) .icon-box svg,
.related-services__grid a:nth-child(3n+3) .icon-box svg {
    stroke: var(--ink-soft);
}

/* Density pass */

.prose p {
    line-height: 1.7;
}

.services-directory__grid--expanded .directory-card {
    min-height: 460px;
}

.service-capabilities li {
    min-height: 175px;
}

.service-capabilities li:hover .item-icon {
    transform: translateY(-3px) scale(1.05);
    box-shadow: var(--shadow-sm), 0 0 0 5px rgba(7, 87, 255, 0.08);
}

.service-capabilities li:nth-child(3n+2) .item-icon {
    border-color: rgba(8, 205, 209, 0.4);
    background: rgba(8, 205, 209, 0.1);
    color: var(--cyan);
}

.service-capabilities li:nth-child(3n+3) .item-icon {
    border-color: rgba(7, 21, 61, 0.16);
    background: rgba(7, 21, 61, 0.045);
    color: var(--ink-soft);
}