/* ==========================================================================
   Services — aligned to site palette/spacing/heading accents
   ========================================================================== */

/* Brand tokens (shared) */
:root{
    --c-primary:#000080;        /* Deep Navy   */
    --c-secondary:#808080;      /* Gray        */
    --c-accent:#FF5733;         /* Orange      */
    --c-white:#FFFFFF;

    --c-ink:#0b1120;
    --c-muted:#6b7280;

    --c-border:rgba(0,0,128,.12);
    --c-border-strong:rgba(0,0,128,.18);
    --c-soft-primary:rgba(0,0,128,.06);

    --shadow-sm:0 6px 20px rgba(14,21,51,.10);
    --shadow-md:0 10px 30px rgba(14,21,51,.16);

    --site-max:1200px;
    --site-gutter:clamp(12px,3vw,24px);

    --card-radius:18px;
    --gap:clamp(16px,2.6vw,28px);

    /* section paddings */
    --pad-section:clamp(28px,5vw,56px);
    --services-hero-pad-top:clamp(28px,5vw,56px);
    --services-hero-pad-bottom:clamp(10px,2vw,14px);

    /* typographic helpers */
    --h-size:clamp(1.6rem,3.2vw,2.2rem);
}

/* Base helpers */
*{box-sizing:border-box}
img{max-width:100%;height:auto;display:block}
.section-pad{padding:var(--pad-section) 0}
.container{width:100%;max-width:var(--site-max);margin-inline:auto;padding-inline:var(--site-gutter)}
.text-center{text-align:center}

/* ==========================================================================
   Heading block — accent underline like Home
   ========================================================================== */
.section-head{margin:0 0 clamp(10px,2.4vw,10px)}
.section-title{
    margin:0 0 .35rem;
    font-weight:900; line-height:1.08; font-size:var(--h-size);
    color:var(--c-primary); position:relative;
    white-space:normal!important; overflow-wrap:anywhere; word-break:break-word;
    hyphens:auto;
}
.section-title-inner{display:block;width:100%;text-align:center}
.section-title::after{
    content:""; display:block; width:clamp(44px,6vw,72px); height:3px;
    margin:clamp(6px,1vw,10px) auto 0; background:var(--c-accent); border-radius:2px;
}
.kicker{color:var(--c-muted);font-weight:800;letter-spacing:.08em;margin:.1rem 0 .35rem}
.section-intro{
    max-width:70ch; margin:.35rem auto 0; color:var(--c-ink); line-height:1.7;
    text-align:justify; text-justify:inter-word; text-align-last:center;
}

/* ==========================================================================
   HERO — tighten bottom so cards sit closer
   ========================================================================== */
.services-hero{padding-top:var(--services-hero-pad-top);padding-bottom:var(--services-hero-pad-bottom)}

/* ==========================================================================
   CARDS GRID
   ========================================================================== */
.cards-row{
    display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap);
    margin-top:6px; margin-bottom:0;
}
@media (max-width:992px){ .cards-row{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .cards-row{grid-template-columns:1fr} }
@media (max-width:576px){
    .section-head{margin-bottom:8px}
    .cards-row{gap:clamp(12px,2.4vw,18px)}
}

/* ==========================================================================
   SERVICE CARD
   ========================================================================== */
.service-card{
    background:var(--c-white);
    border:1px solid var(--c-border);
    border-radius:var(--card-radius);
    box-shadow:var(--shadow-sm);
    transition:transform .25s, box-shadow .25s, border-color .2s;
    height:100%;
    display:flex;
    overflow:hidden;
}
.service-card:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow-md);
    border-color:var(--c-border-strong);
}

.card-inner{
    flex:1; display:flex; flex-direction:column; align-items:center; text-align:center;
    padding:clamp(16px,2.4vw,22px);
}

/* Icon chip */
.card-icon{
    width:88px; height:88px; border-radius:50%;
    display:grid; place-items:center;
    background:var(--c-soft-primary); border:1px solid var(--c-border);
    color:var(--c-accent); margin-bottom:12px;
}
.card-icon svg{width:46px;height:46px;stroke:currentColor;fill:none}

/* Title & copy */
.card-title{
    margin:6px 0 8px; font-weight:800; color:var(--c-primary);
    letter-spacing:.02em; font-size:clamp(1.05rem,2.1vw,1.25rem);
}
.card-body{color:var(--c-ink);opacity:.95;line-height:1.7;font-size:.96rem;max-width:42ch}
.card-body p{margin:0;text-align:justify;text-justify:inter-word;text-align-last:center}

/* A11y polish */
.service-card [aria-hidden="true"]{pointer-events:none}

/* Responsive icon scale */
@media (max-width:992px){
    .card-icon{width:76px;height:76px}
    .card-icon svg{width:36px;height:36px}
    .card-inner{padding:18px}
}
@media (max-width:576px){
    .card-icon{width:64px;height:64px}
    .card-icon svg{width:30px;height:30px}
    .section-head{margin-bottom:12px}
}

/* Motion preference */
@media (prefers-reduced-motion:reduce){
    .service-card,.card-icon,.card-title{transition:none!important}
}
/* ==========================================================================
   CARDS GRID — 2 cards per row (desktop/tablet), 1 per row on phones
   ========================================================================== */
.services-page .cards-row{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:var(--gap);
    margin-top:6px;
    margin-bottom:0;
}

@media (max-width:640px){
    .services-page .cards-row{ grid-template-columns:1fr; }
}