/* ==================================================================
   Services hub (page-services.php) + single service (single-service.php)
   Relies on shared .page-banner / .breadcrumb / .cta-link from
   style-page-shared.css and .container / .section-head / .eyebrow /
   .accent-word / .reveal* from style.css.
   ================================================================== */

/* ---------- Services hub: intro + grid ---------- */
.service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
}

@media (max-width: 1024px) {
    .service-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .service-grid { grid-template-columns: 1fr; }
}

.service-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: #fff;
    border: 1px solid rgba(10, 104, 238, 0.1);
    border-radius: 16px;
    padding: 1.8rem 1.7rem;
    text-decoration: none;
    box-shadow: 0 10px 26px -18px rgba(0, 32, 80, 0.25);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.service-card:hover {
    transform: translateY(-4px);
    background: var(--blue-dark);
    border-color: var(--blue-dark);
    box-shadow: 0 20px 38px -18px rgba(0, 48, 117, 0.45);
}

.service-card-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--blue-soft);
    margin-bottom: 1.1rem;
    transition: background 0.25s ease;
}

.service-card-icon svg { width: 24px; height: 24px; stroke: var(--blue-dark); transition: stroke 0.25s ease; }
.service-card:hover .service-card-icon { background: #fff; }
.service-card:hover .service-card-icon svg { stroke: var(--blue-dark); }

.service-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--blue-dark);
    margin: 0 0 0.6rem;
    line-height: 1.35;
    transition: color 0.25s ease;
}

.service-card p {
    font-size: 0.88rem;
    color: var(--ink-muted);
    margin: 0 0 1.1rem;
    line-height: 1.55;
    transition: color 0.25s ease;
}

.service-card:hover h3 { color: #fff; }
.service-card:hover p { color: rgba(255, 255, 255, 0.75); }

.service-card-link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--blue);
    transition: color 0.25s ease;
}

.service-card-link svg { width: 16px; height: 16px; stroke: currentColor; transition: transform 0.25s ease; }
.service-card:hover .service-card-link { color: var(--blue-mid); }
.service-card:hover .service-card-link svg { transform: translateX(3px); }

/* ---------- Single service: overview ---------- */
.service-overview-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(1.6rem, 4vw, 3rem);
    align-items: start;
}

@media (max-width: 700px) {
    .service-overview-grid { grid-template-columns: 1fr; }
}

.service-icon-badge {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    border-radius: 22px;
    background: var(--blue-soft);
    flex: none;
    animation: serviceIconFloat 4s ease-in-out infinite;
}

.service-icon-badge svg { width: 40px; height: 40px; stroke: var(--blue-dark); }

@keyframes serviceIconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.service-lead {
    font-size: clamp(1.1rem, 1.8vw, 1.3rem);
    font-weight: 600;
    color: var(--blue-dark);
    line-height: 1.5;
    margin: 0 0 1.2rem;
}

.service-content p {
    margin: 0 0 1.1rem;
    line-height: 1.7;
}

.service-content p:last-child { margin-bottom: 0; }

.service-content ul,
.service-content ol {
    margin: 0 0 1.1rem 1.2rem;
    color: var(--ink-muted);
    line-height: 1.7;
}

/* ---------- Checkmark icon shared by grouped sub-service card lists ---------- */
.service-feature-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--blue-soft);
    margin-top: 0.1rem;
}

.service-feature-icon svg { width: 14px; height: 14px; stroke: var(--blue-dark); }

/* ---------- Single service: grouped sub-service cards ----------
   Cards stack full-width, one per row. Row width no longer depends on how
   many cards happen to share a row (that orphaned short rows with a lone
   narrow card and a wall of empty space) — instead each card's own
   checklist flows into as many columns as its content and the available
   width support, so short lists (3 items) and long lists (10 items) both
   read cleanly without any manual "is this card long?" branching. */
.service-subgroup-stack {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

.service-subgroup-card {
    background: #fff;
    border: 1px solid rgba(10, 104, 238, 0.1);
    border-radius: 16px;
    padding: 1.6rem 1.8rem 1.8rem;
    box-shadow: 0 10px 26px -18px rgba(0, 32, 80, 0.2);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.service-subgroup-card:hover {
    transform: translateY(-3px);
    border-color: rgba(10, 104, 238, 0.28);
    box-shadow: 0 18px 34px -18px rgba(0, 32, 80, 0.32);
}

.service-subgroup-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--blue-dark);
    margin: 0 0 1.1rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid rgba(10, 104, 238, 0.12);
}

.service-subgroup-list li .service-feature-icon {
    transition: transform 0.2s ease, background 0.2s ease;
}

.service-subgroup-list li:hover .service-feature-icon {
    transform: scale(1.12);
    background: var(--blue);
}

.service-subgroup-list li:hover .service-feature-icon svg { stroke: #fff; }

.service-subgroup-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.7rem 1.8rem;
}

.service-subgroup-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: 0.92rem;
    color: var(--ink);
    line-height: 1.5;
}

/* ---------- Single service: flat offering cards (no grouping) ---------- */
.service-offering-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

@media (max-width: 1024px) {
    .service-offering-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .service-offering-grid { grid-template-columns: 1fr; }
}

.service-offering-card {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    background: #fff;
    border: 1px solid rgba(10, 104, 238, 0.1);
    border-radius: 12px;
    padding: 1.1rem 1.2rem;
    box-shadow: 0 8px 20px -16px rgba(0, 32, 80, 0.22);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.service-offering-card:hover {
    transform: translateY(-3px);
    background: var(--blue-dark);
    border-color: var(--blue-dark);
    color: #fff;
    box-shadow: 0 16px 32px -16px rgba(0, 48, 117, 0.42);
}

.service-offering-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--blue-soft);
    margin-top: 0.1rem;
    transition: background 0.25s ease;
}

.service-offering-icon svg { width: 16px; height: 16px; stroke: var(--blue-dark); transition: stroke 0.25s ease; }
.service-offering-card:hover .service-offering-icon { background: #fff; }
.service-offering-card:hover .service-offering-icon svg { stroke: var(--blue-dark); }

.service-offering-card-body h4 {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--blue-dark);
    line-height: 1.35;
    margin: 0 0 0.35rem;
    transition: color 0.25s ease;
}

.service-offering-card-body p {
    font-size: 0.85rem;
    color: var(--ink-muted);
    line-height: 1.5;
    margin: 0;
    transition: color 0.25s ease;
}

.service-offering-card:hover .service-offering-card-body h4 { color: #fff; }
.service-offering-card:hover .service-offering-card-body p { color: rgba(255, 255, 255, 0.8); }

/* ---------- Single service: back-to-hub link ---------- */
.service-back-link {
    margin-top: 2rem;
}

.service-back-link a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--blue);
    text-decoration: none;
}

.service-back-link a:hover { color: var(--blue-mid); }
.service-back-link svg { width: 16px; height: 16px; stroke: currentColor; }

/* ---------- Closing CTA band (Services hub + single service): light,
   dotted backdrop, heading + a solid pill button/link. Shared markup
   pattern (.service-inquiry-band) keeps both pages visually identical. ---------- */
.service-inquiry-band {
    position: relative;
    overflow: hidden;
    background: var(--bg-soft);
    padding: clamp(3.4rem, 7vw, 5.2rem) 0;
}

.service-cta-dots {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: radial-gradient(circle, rgba(10, 104, 238, 0.16) 1.6px, transparent 1.6px);
    background-size: 18px 18px;
    -webkit-mask-image: radial-gradient(ellipse 65% 100% at center, #000 45%, transparent 85%);
    mask-image: radial-gradient(ellipse 65% 100% at center, #000 45%, transparent 85%);
}

.service-inquiry-band .section-head {
    position: relative;
    z-index: 1;
}

.service-inquiry-band .section-head h2 { font-size: clamp(1.6rem, 2.8vw, 2.15rem); }

.service-cta-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.6rem;
    animation: serviceCtaPulseRing 2.6s ease-out infinite;
}

.service-cta-trigger:hover,
.service-cta-trigger:focus-visible {
    animation-play-state: paused;
}

@keyframes serviceCtaPulseRing {
    0% { box-shadow: 0 12px 28px -14px rgba(26, 115, 232, 0.65), 0 0 0 0 rgba(26, 115, 232, 0.45); }
    70% { box-shadow: 0 12px 28px -14px rgba(26, 115, 232, 0.65), 0 0 0 14px rgba(26, 115, 232, 0); }
    100% { box-shadow: 0 12px 28px -14px rgba(26, 115, 232, 0.65), 0 0 0 0 rgba(26, 115, 232, 0); }
}

.service-cta-trigger svg {
    width: 18px;
    height: 18px;
    stroke: #fff;
    animation: serviceCtaIconBreathe 2.6s ease-in-out infinite;
}

@keyframes serviceCtaIconBreathe {
    0%, 80%, 100% { transform: scale(1); }
    40% { transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
    .service-icon-badge,
    .service-cta-trigger,
    .service-cta-trigger svg {
        animation: none;
    }
}

/* ---------- Single service: "Get in Touch" inquiry form ---------- */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* The card no longer carries its own box styling — it now sits inside
   .service-modal-dialog, which provides the white background, shadow, and
   padding. Kept as a plain wrapper so the form markup didn't need reshaping. */
.service-inquiry-card #serviceModalTitle {
    font-size: 1.35rem;
    margin: 0 0 0.4rem;
}

.service-modal-sub {
    color: var(--ink-muted);
    font-size: 0.94rem;
    margin: 0 0 1.4rem;
}

.service-inquiry-form { display: grid; gap: 1.1rem; }
.service-inquiry-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* Honeypot: positioned off-screen (not display:none) so most bots that skip
   hidden fields still fill it in, while real visitors never see or tab to it. */
.service-inquiry-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.service-inquiry-form label:not(.sr-only) { display: block; font-size: 0.82rem; font-weight: 600; color: var(--ink); margin-bottom: 0.4rem; }

.service-inquiry-form input,
.service-inquiry-form select,
.service-inquiry-form textarea {
    width: 100%;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--ink);
    background: #fff;
    border: 1.5px solid rgba(10, 104, 238, 0.18);
    border-radius: 10px;
    padding: 0.6rem 0.95rem;
    transition: border-color 0.15s ease, background 0.15s ease;
    box-sizing: border-box;
}

.service-inquiry-form input::placeholder,
.service-inquiry-form textarea::placeholder { color: var(--ink-faint); }
.service-inquiry-form select option[value=""] { color: var(--ink-faint); }

/* Custom chevron (not the browser's native one) so we control exactly how
   much room it needs — the native arrow's position varies by browser and
   was overlapping the option text at this field width. */
.service-inquiry-form select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2.4rem;
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: visible;
    text-overflow: ellipsis;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6B85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 16px;
}

.service-inquiry-form input:focus,
.service-inquiry-form select:focus,
.service-inquiry-form textarea:focus {
    outline: none;
    border-color: var(--blue);
}

.service-inquiry-form textarea { resize: vertical; min-height: 90px; }

.service-inquiry-form .field-error { display: none; font-size: 0.78rem; color: #D64545; margin-top: 0.35rem; }
.service-inquiry-form .field.has-error input,
.service-inquiry-form .field.has-error select,
.service-inquiry-form .field.has-error textarea { border-color: #D64545; background: rgba(214, 69, 69, 0.06); }
.service-inquiry-form .field.has-error .field-error { display: block; }

.service-inquiry-submit {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    border-radius: 999px;
    padding: 0.85rem 1.7rem;
    background: var(--blue-dark);
    border: none;
    cursor: pointer;
}

.service-inquiry-submit:hover { background: var(--blue-deep); }
.service-inquiry-submit:disabled { opacity: 0.7; cursor: not-allowed; }

.service-inquiry-submit.is-loading .service-inquiry-submit-label::after {
    content: "…";
}

.service-inquiry-status {
    display: none;
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: 10px;
    padding: 0.8rem 1rem;
    margin: 0;
}

.service-inquiry-status.is-visible { display: block; }
.service-inquiry-status.is-success { background: var(--blue-soft); border: 1.5px solid var(--blue); color: var(--ink); }
.service-inquiry-status.is-error { background: rgba(214, 69, 69, 0.08); border: 1.5px solid #D64545; color: #a83232; }

@media (max-width: 560px) {
    .service-inquiry-row { grid-template-columns: 1fr; }
}

/* ---------- Inquiry popup modal ---------- */
.service-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.2rem;
}

.service-modal.is-open { display: flex; }

.service-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 16, 48, 0.55);
    backdrop-filter: blur(2px);
    animation: serviceModalOverlayIn 0.2s ease both;
}

@keyframes serviceModalOverlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.service-modal-dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 640px;
    max-height: calc(100vh - 2.4rem);
    overflow-y: auto;
    background: #fff;
    border-radius: 20px;
    padding: clamp(1.8rem, 4vw, 2.4rem);
    box-shadow: 0 30px 60px -20px rgba(0, 8, 30, 0.5);
    animation: serviceModalDialogIn 0.25s ease both;
}

@keyframes serviceModalDialogIn {
    from { opacity: 0; transform: translateY(18px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.service-modal-close {
    position: absolute;
    z-index: 2;
    top: 1rem;
    right: 1rem;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    line-height: 1;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 50%;
    border: 1.5px solid rgba(10, 104, 238, 0.18);
    background: #fff;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.service-modal-close svg { width: 16px; height: 16px; stroke: var(--blue-dark); pointer-events: none; }
.service-modal-close:hover,
.service-modal-close:focus { background: var(--blue-soft); border-color: var(--blue); transform: scale(1.06); }

body.has-open-modal { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .service-modal-overlay,
    .service-modal-dialog {
        animation: none;
    }
}