/* CM LegalTech — three primary service landing pages */
body.pillar-page {
    --pillar-accent: #3f954e;
    --pillar-accent-soft: #e9f3ea;
    --pillar-image: url('images/service-banner-panama.webp');
    --pillar-code: '01';
    background: #f8faf6 !important;
}
body.pillar-corporate {
    --pillar-accent: #347d48;
    --pillar-accent-soft: #e7f1e8;
    --pillar-image: url('images/about-team-panama.webp');
    --pillar-code: '01';
}
body.pillar-digital {
    --pillar-accent: #26796f;
    --pillar-accent-soft: #e4f1ee;
    --pillar-image: url('images/carousel-privacy-panama.webp');
    --pillar-code: '02';
}
body.pillar-accounting {
    --pillar-accent: #477d55;
    --pillar-accent-soft: #eaf2e9;
    --pillar-image: url('images/carousel-accounting-panama.webp');
    --pillar-code: '03';
}

.pillar-page .hero {
    min-height: 720px;
    padding-bottom: 104px !important;
}
.pillar-page .hero::after {
    inset: 0 0 0 43%;
    background: var(--pillar-image) center / cover no-repeat;
}
.pillar-page .hero::before {
    background:
        linear-gradient(90deg,#f8faf6 0%,#f8faf6 43%,rgba(248,250,246,.94) 53%,rgba(248,250,246,.08) 79%),
        linear-gradient(0deg,rgba(248,250,246,.55),transparent 45%) !important;
}
.pillar-page .hero .wrap::after {
    content: var(--pillar-code);
    position: absolute;
    left: 0;
    bottom: -62px;
    color: rgba(23,63,61,.08);
    font: 700 6.5rem/.8 var(--font-display);
    letter-spacing: -.08em;
}
.pillar-page .hero h1 { max-width: 740px; }
.pillar-page .hero .cta { background: var(--pillar-accent) !important; }

.pillar-subnav {
    position: sticky;
    top: 114px;
    z-index: 850;
    margin-top: -52px;
    padding: 0 5%;
}
.pillar-subnav .wrap {
    max-width: 1100px !important;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    overflow: hidden;
    background: rgba(255,255,255,.96);
    border: 1px solid #d9e6dc;
    border-radius: 18px;
    box-shadow: 0 20px 52px rgba(29,55,39,.12);
    backdrop-filter: blur(18px);
}
.pillar-subnav a {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .75rem 1rem;
    border-right: 1px solid #e0e9e2;
    color: #44564b;
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
}
.pillar-subnav a:last-child { border-right: 0; }
.pillar-subnav a:hover,.pillar-subnav a:focus-visible { color: var(--pillar-accent); background: var(--pillar-accent-soft); }
.pillar-subnav i { color: var(--pillar-accent); font-size: 1.08rem; }

.pillar-page main { background: #f8faf6; }
.pillar-page main section { padding: 88px 6% !important; scroll-margin-top: 190px; }
.pillar-page main section:nth-child(even) { background: #edf4ed !important; }
.pillar-page main .wrap { max-width: 1160px !important; }

.pillar-overview .wrap {
    display: grid;
    grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr);
    grid-template-areas: 'title intro' 'cards cards';
    gap: 1.25rem 5rem;
}
.pillar-overview h2 { grid-area: title; font-size: clamp(2.5rem,4vw,4rem) !important; }
.pillar-overview > .wrap > p {
    grid-area: intro;
    align-self: end;
    margin: 0 0 1.3rem;
    padding-left: 2rem;
    border-left: 1px solid #c9d8cc;
    font-size: 1.05rem;
}
.pillar-overview .grid {
    grid-area: cards;
    display: grid !important;
    grid-template-columns: repeat(12,minmax(0,1fr)) !important;
    gap: 12px !important;
    margin-top: 1.2rem;
}
.pillar-overview .card {
    grid-column: span 3;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.6rem !important;
    border: 1px solid #dce7df !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: none !important;
}
.pillar-overview .card:first-child {
    grid-column: span 6;
    background:
        radial-gradient(circle at 90% 10%,rgba(255,255,255,.14),transparent 35%),
        #173f3d !important;
}
.pillar-overview .card:nth-child(2) { grid-column: span 6; background: var(--pillar-accent-soft) !important; }
.pillar-overview .card:first-child h3 { color: #fff !important; font-family: var(--font-display) !important; font-size: 1.55rem !important; }
.pillar-overview .card:first-child p { color: rgba(255,255,255,.7) !important; max-width: 510px; }
.pillar-overview .card-index {
    display: block;
    margin-bottom: auto;
    color: var(--pillar-accent);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .12em;
}
.pillar-overview .card:first-child .card-index { color: #add8b5; }
.pillar-overview .card h3::before { display: none; }
.pillar-overview .card h3 { font-size: 1.1rem !important; line-height: 1.25; }
.pillar-overview .card p { margin: 0; line-height: 1.55; }

.pillar-process .wrap {
    display: grid;
    grid-template-columns: minmax(280px,.8fr) minmax(0,1.2fr);
    gap: 5rem;
    align-items: start;
}
.pillar-process h2 { font-size: clamp(2.45rem,3.8vw,3.8rem) !important; }
.pillar-process > .wrap > p { margin-top: 1.25rem; font-size: 1.03rem; }
.pillar-process ol {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 0;
    counter-reset: steps;
}
.pillar-process ol li {
    min-height: 112px;
    padding: 1.55rem 1rem 1.55rem 5rem !important;
    border: 0;
    border-top: 1px solid #cbd9ce;
    border-radius: 0;
    background: transparent;
    font-size: 1rem;
}
.pillar-process ol li:last-child { border-bottom: 1px solid #cbd9ce; }
.pillar-process ol li::before {
    left: .65rem;
    top: 1.5rem;
    color: var(--pillar-accent);
    font: 700 1.55rem/1 var(--font-display);
}

.pillar-related {
    overflow: hidden;
    background:
        linear-gradient(90deg,rgba(20,60,59,.98),rgba(20,60,59,.9)),
        var(--pillar-image) center / cover no-repeat !important;
}
.pillar-related .wrap {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 4rem;
    align-items: center;
}
.pillar-related h2 { color: #fff !important; font-size: clamp(2.35rem,3.5vw,3.6rem) !important; }
.pillar-related > .wrap > p,
.pillar-related .wrap > div > p { color: rgba(255,255,255,.76) !important; }
.pillar-related .links {
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}
.pillar-related .links strong { display: block; margin-bottom: .8rem; color: #aed4b4 !important; font-size: .74rem; letter-spacing: .13em; text-transform: uppercase; }
.pillar-related .links a {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    min-height: 49px;
    margin: 0 !important;
    padding: .7rem 2.2rem .7rem 0;
    border-bottom: 1px solid rgba(255,255,255,.17);
    color: #fff !important;
    font-weight: 600;
    text-decoration: none !important;
}
.pillar-related .links a::after { content: '↗'; position: absolute; right: .15rem; color: #aed4b4; }
.pillar-related .links a:hover { padding-left: .35rem; }

.pillar-contact { background: #fff !important; }
.pillar-contact .wrap {
    max-width: 980px !important;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem 4rem;
    align-items: center;
    padding: 2.6rem 3rem;
    border: 1px solid #d7e4da;
    border-radius: 24px;
    background: linear-gradient(125deg,#f4f8f3,#e8f2e9);
    box-shadow: 0 22px 60px rgba(29,55,39,.08);
}
.pillar-contact h2 { margin: 0 !important; font-size: clamp(2rem,3vw,3rem) !important; }
.pillar-contact p { grid-column: 1; margin: -.8rem 0 0; }
.pillar-contact .cta { grid-column: 2; grid-row: 1 / span 2; margin: 0; white-space: nowrap; background: var(--pillar-accent) !important; }

.pillar-page footer { margin-top: 0; }

@media (max-width: 900px) {
    .pillar-page .hero::after { left: 28%; opacity: .36; }
    .pillar-subnav { top: 104px; padding: 0 3%; }
    .pillar-overview .wrap,.pillar-process .wrap,.pillar-related .wrap { grid-template-columns: 1fr; grid-template-areas: none; gap: 1.5rem; }
    .pillar-overview h2,.pillar-overview > .wrap > p,.pillar-overview .grid { grid-area: auto; }
    .pillar-overview > .wrap > p { padding: 0; border: 0; }
    .pillar-overview .card,.pillar-overview .card:first-child,.pillar-overview .card:nth-child(2) { grid-column: span 6; }
    .pillar-contact .wrap { grid-template-columns: 1fr; }
    .pillar-contact p,.pillar-contact .cta { grid-column: 1; grid-row: auto; }
    .pillar-contact .cta { justify-self: start; }
}

@media (max-width: 620px) {
    .pillar-page .hero { min-height: 650px; padding-bottom: 80px !important; }
    .pillar-page .hero::after { inset: 0; opacity: .25; }
    .pillar-page .hero::before { background: rgba(248,250,246,.88) !important; }
    .pillar-page .hero .wrap::after { bottom: -40px; font-size: 4.5rem; }
    .pillar-subnav { position: relative; top: auto; margin-top: -28px; }
    .pillar-subnav .wrap { grid-template-columns: 1fr 1fr; border-radius: 14px; }
    .pillar-subnav a { min-height: 52px; border-bottom: 1px solid #e0e9e2; font-size: .72rem; }
    .pillar-subnav a:nth-child(2n) { border-right: 0; }
    .pillar-page main section { padding: 62px 5% !important; scroll-margin-top: 112px; }
    .pillar-overview .grid { grid-template-columns: 1fr !important; }
    .pillar-overview .card,.pillar-overview .card:first-child,.pillar-overview .card:nth-child(2) { grid-column: 1; min-height: 190px; }
    .pillar-process ol li { min-height: 100px; padding-left: 4.4rem !important; }
    .pillar-related .wrap { gap: 2.3rem; }
    .pillar-contact .wrap { padding: 2rem 1.4rem; }
    .pillar-contact .cta { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .pillar-related .links a { transition: none !important; }
}