/* ==========================================================================
   GSCTEMPC SERVICES — MODERN REDESIGN (v2: photography-driven cards)
   assets/css/services_modern.css

   Additive stylesheet, loaded AFTER services_style.css and the page's inline
   <style> block. Nothing here changes PHP/markup IDs/JS hooks — only
   appearance. This revision adds the image-first card system, a branded
   fallback for services without a photo, a small in-modal gallery, and a
   Featured Services strip, on top of the existing v1 redesign.

   v3: hero simplified back to a plain company.jpg-backed banner (eyebrow +
   heading + subtitle only) — the stats row and "Member-Owned" badge were
   removed per request; see .gs-hero-inner--simple below.

   v4: hero + CTA band now use the same green-transparency treatment as the
   homepage hero/CTA (diagonal rgba(15,77,48) gradient + soft radial glows)
   instead of the old, much darker forest gradient. Also: (1) the modal
   "Category • Most Availed" line now sits on its own pill/chip so it stays
   legible over any photo, with a stronger scrim behind the whole modal
   header, and (2) the modal close button is hardened against ever rendering
   its label vertically/stacked (explicit row direction + nowrap + horizontal
   writing-mode, including on hover/focus).

   v5: hero rebuilt as an asymmetric, left-aligned composition — directional
   dark-to-transparent gradient over company.jpg (replacing the old flat
   green-tint filter), one small eyebrow pill instead of a stats row/badge
   stack, and two real CTAs. Taller section so it reads as a proper page
   opener rather than a banner strip. CTA band and everything below is
   unchanged. See .gs-hero-inner--split below (the old .gs-hero-inner--simple
   variant and its supporting rules were removed as unused).

   v6: mobile hero logo sized up across all mobile breakpoints (900px / 640px
   / 380px) per request — was reading too small/timid against the photo on
   phones. Desktop clamp() sizing untouched.

   v7 — "10/10 art direction" pass (hero only, everything else untouched):
     - Photo is now treated as a layered architectural composition: dark
       neutral gradient → subtle green atmospheric tint → soft vignette →
       content → tiny glass/accent lines, instead of one flat scrim.
     - Logo moved out of the content stack into a small translucent seal
       (top-left), so it reads as a mark, not a second headline.
     - New "EST. 1991 · 35+ YEARS OF SERVICE" micro-detail beneath the copy.
     - Headline restructured to three intentional lines with a single
       restrained italic emphasis on the last word, larger but still
       bounded (~35–45% of hero attention, not a wall of type).
     - Near-invisible ledger-line texture (3–7% opacity) reinstated as a
       background plane for quiet "this is detailed" texture.
     - One flagship micro-interaction: a magnetic primary CTA (subtly
       follows the cursor within a small radius) — see the small inline
       script appended near the existing modal/apply script block.
     - Proper bottom transition: dark photo fades through transparency into
       the off-white body background instead of ending abruptly, plus a
       "SCROLL" wordmark under the chevron.
     - Hero height tightened to the 720–820px (desktop) / 680–780px
       (mobile) range called for in the brief.

   v8 — "remove darkness + balance the right side" refinement (hero only):
     - Overlay lightened ~25% across the board; building/signage now read
       clearly through the scrim instead of disappearing into it.
     - Green tint kept as a small accent, not a filter (~5–8% of the frame).
     - Video background (gsctempc.mp4) with automatic company.jpg fallback,
       layered under the same lightened overlay system.
     - Nav logo clipping fix (vertical centering + guaranteed padding).

   v9 — "video IS the right side, no right-side UI" (per explicit design
   direction: the previous right-side glass panel with EST. 1991 / 35+ Years
   / Member-Owned copy is REMOVED). The hero reverts to a single left-aligned
   content column; the video (or its company.jpg fallback) is left fully
   uncovered on the right so its own natural movement, architecture and
   light provide the visual interest instead of a floating card. Overlay
   lightened further on the right two-thirds so the footage reads clearly.
   No stats, no badges, no glassmorphism panel — typography + photography/
   video + spacing only, per brief.

   v10 — REVERT TO CENTERED HERO (approved design direction). The v5–v9
   left-aligned experiment is undone; the hero returns to the original
   centered composition (logo + eyebrow stacked above a centered headline,
   description, "Est. 1991" detail line, and CTAs, all on one axis) while
   KEEPING everything else v8/v9 introduced on top of that composition:
   the gsctempc.mp4 video background with company.jpg fallback, the subtle
   glass/transparency treatment on the eyebrow pill and ghost CTA, and a
   lightened, readability-only overlay. The directional left-to-right scrim
   and ledger-line mask from v5–v9 (which existed specifically to clear
   space for a left-aligned column) are replaced with a symmetric,
   center-weighted treatment so the video reads clearly on both sides of
   the now-centered content. No new sections, cards, or right-side panels
   were introduced — only the hero's internal alignment changed back.
   Markup in services.php is UNCHANGED; this is a CSS-only revert.
   ========================================================================== */

:root {
    /* ---- Brand palette (green + white only) ------------------------------ */
    --gs-forest-950:  #0c2a1d;
    --gs-forest-800:  #123f2a;
    --gs-forest-700:  #16492f;
    --gs-green-600:   #1c6b41;
    --gs-green-500:   #237d4d;
    --gs-green-400:   #3a9c66;
    --gs-mist-50:     #f5f8f4;
    --gs-mist-100:    #eef3ec;
    --gs-paper:       #ffffff;
    --gs-gold-500:    #2f8f5b;
    --gs-gold-100:    #e6f4ec;
    --gs-ink-900:     #121a15;
    --gs-ink-700:     #33403a;
    --gs-ink-500:     #4c5952;
    --gs-line:        #e2e8e1;
    --gs-line-soft:   #edf1ec;

    /* ---- Homepage-matched CTA/hero gradient tokens ------------------------ */
    --gs-hero-grad-1: rgba(15, 77, 48, 0.92);
    --gs-hero-grad-2: rgba(27, 122, 77, 0.92);
    --gs-hero-glow-1: rgba(255, 255, 255, 0.10);
    --gs-hero-glow-2: rgba(244, 183, 64, 0.12);

    /* ---- Hero photo-treatment tokens (v10: centered composition — the
       scrim is now symmetric/center-weighted around the content column
       instead of the v5–v9 left-to-right reveal, since the video/photo
       needs to stay legible on BOTH sides of centered text) -------------- */
    --gs-hero-dark-1:   rgba(5, 25, 19, 0.62);
    --gs-hero-dark-2:   rgba(5, 25, 19, 0.42);
    --gs-hero-dark-3:   rgba(6, 22, 16, 0.20);
    --gs-hero-dark-4:   rgba(7, 22, 15, 0.06);
    --gs-hero-dark-5:   rgba(7, 22, 15, 0.00);
    --gs-hero-tint:     rgba(58, 156, 102, 0.08);

    /* ---- Type ------------------------------------------------------------ */
    --gs-font-display: 'Fraunces', 'Poppins', 'Segoe UI', serif;
    --gs-font-head:    'Poppins', 'Segoe UI', sans-serif;
    --gs-font-body:    'Inter', 'Segoe UI', sans-serif;

    /* ---- Rhythm ------------------------------------------------------------ */
    --gs-radius-lg: 20px;
    --gs-radius-md: 14px;
    --gs-radius-sm: 10px;
    --gs-shadow-sm: 0 1px 2px rgba(12, 42, 29, 0.06);
    --gs-shadow-md: 0 12px 32px -16px rgba(12, 42, 29, 0.28);
    --gs-shadow-lg: 0 28px 60px -24px rgba(12, 42, 29, 0.38);
    --gs-shadow-card: 0 1px 2px rgba(12, 42, 29, 0.05), 0 1px 1px rgba(12, 42, 29, 0.04);
    --gs-shadow-card-hover: 0 22px 40px -20px rgba(28, 107, 65, 0.35), 0 4px 10px -4px rgba(12, 42, 29, 0.1);
    --gs-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --gs-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --gs-container: 1180px;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ==========================================================================
   0. RESET / BASE OVERRIDES SCOPED TO THIS PAGE
   ========================================================================== */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
    background: var(--gs-mist-50) !important;
    font-family: var(--gs-font-body);
    font-size: 17px;
    line-height: 1.6;
    color: var(--gs-ink-900);
    overflow-x: hidden;
}

.category-section, .services-hero, .cta-section-services, .gs-nav-strip {
    font-family: var(--gs-font-body);
}

.gs-hero-inner, .gs-nav-strip-inner, .category-section, .services-grid, .cta-section-services {
    max-width: 100%;
    box-sizing: border-box;
}

/* ==========================================================================
   1. HERO — centered composition (v10) with video background + glass
      readability treatment (retained from v8/v9)
   ========================================================================== */
.services-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-height: clamp(720px, 80vh, 820px);
    display: flex;
    align-items: center;
    padding: 0 !important;
    background: #0c1f16 url('company.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
}

/* Optional cinematic video layer. Sits behind everything else in the hero;
   if the browser can't autoplay it (or it 404s), it simply never becomes
   visible and the section's own background-image (company.jpg, above)
   shows through untouched — no broken element, no blank background. */
.gs-hero-video {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .gs-hero-video { display: none; } }

/* Plane 1 (background): the photograph/video itself — kept fully intact,
   no filters applied to it directly, so the building/signage stay
   recognisable.

   Plane 2: layered scrim — v10 symmetric, center-weighted version. Since
   the content column is centered again, the readability darkening is
   concentrated behind the content (center of the frame, both horizontally
   and toward the lower-middle where the copy/CTAs sit) and fades OUT
   toward all four edges, so the video/photo stays clearly visible on both
   the left and right sides rather than only on one side as in v5–v9. */
.services-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        /* soft vignette, corners only */
        radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(4, 12, 9, 0.16) 100%),
        /* small green atmospheric accent, quiet, upper area only */
        radial-gradient(circle at 50% 6%, var(--gs-hero-tint), transparent 46%),
        /* center-weighted readability scrim behind the centered content
           column — strongest directly behind the text, fading evenly to
           both left and right so the footage reads clearly at the edges */
        radial-gradient(ellipse 62% 78% at 50% 46%,
            var(--gs-hero-dark-1) 0%,
            var(--gs-hero-dark-2) 38%,
            var(--gs-hero-dark-3) 62%,
            var(--gs-hero-dark-4) 82%,
            var(--gs-hero-dark-5) 100%),
        /* gentle top/bottom containment so the crop never feels arbitrary */
        linear-gradient(180deg, rgba(5, 13, 9, 0.20) 0%, transparent 16%, transparent 76%, rgba(5, 13, 9, 0.22) 100%);
}
.services-hero::after { content: none; }

/* Plane 2b: near-invisible ledger-line texture — the page's signature
   detail, dialed down to 3–7% so it reads subconsciously rather than as
   an obvious grid. v10: mask is now centered under the content column
   (was left-weighted for the v5–v9 asymmetric layout) so the lines are
   most visible behind the text and fade symmetrically toward both edges. */
.gs-hero-grid-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.05;
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 55px,
        rgba(255, 255, 255, 0.9) 55px,
        rgba(255, 255, 255, 0.9) 56px
    );
    -webkit-mask-image: radial-gradient(ellipse 55% 90% at 50% 50%, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 55%, transparent 92%);
    mask-image: radial-gradient(ellipse 55% 90% at 50% 50%, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 55%, transparent 92%);
}
.gs-hero-grid-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 223px,
        rgba(58, 156, 102, 0.5) 223px,
        rgba(58, 156, 102, 0.5) 224px
    );
}
@media (max-width: 640px) { .gs-hero-grid-overlay { opacity: 0.04; } }

/* Brand cluster — logo centered directly above the eyebrow pill, like a
   letterhead. Sized to its own content (not the full column width), so
   the two stay aligned to each other regardless of which is wider, while
   the headline/paragraph/buttons below stay on the same centered axis. */
.gs-hero-brand {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 26px;
}
.gs-hero-logo-wrap {
    display: block;
    width: clamp(110px, 12vw, 160px);
    margin: 0;
    opacity: 0;
    animation: gsHeroIn 0.7s var(--gs-ease) forwards 0s;
}
.gs-hero-logo {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45));
}
.gs-hero-brand .gs-eyebrow-pill {
    opacity: 0;
    animation: gsHeroIn 0.7s var(--gs-ease) forwards 0.15s;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.16);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 8px 16px;
    border-radius: 999px;
}
@media (max-width: 900px) {
    .gs-hero-brand { gap: 14px; margin-bottom: 22px; }
    .gs-hero-logo-wrap { width: 128px; }
}
@media (max-width: 640px) {
    .gs-hero-brand { gap: 13px; margin-bottom: 20px; }
    .gs-hero-logo-wrap { width: 108px; }
}
@media (max-width: 380px) {
    .gs-hero-brand { gap: 12px; margin-bottom: 18px; }
    .gs-hero-logo-wrap { width: 94px; }
}

/* v10: centered content column again — one axis, everything centered
   (logo/eyebrow, headline, description, Est. 1991 line, CTAs), matching
   the approved centered design. The column keeps its own max-width and is
   centered within the full-width hero via margin auto, so the video is
   visible in equal measure on both sides rather than only on one. */
.gs-hero-inner--split {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--gs-container);
    margin: 0 auto;
    padding: 108px 28px 80px;
    text-align: center;
}

.gs-hero-content {
    max-width: 700px;
    margin: 0 auto;
}

/* Staggered entrance — each line settles in just after the last so the
   hero reads top-to-bottom instead of arriving all at once. */
@keyframes gsHeroIn {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Eyebrow row variant (kept for backward compatibility with earlier
   markup revisions; unused by the current centered markup, which relies
   on .gs-hero-brand + .gs-eyebrow-pill instead — left in place in case
   it's referenced elsewhere). */
.gs-hero-eyebrow-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 22px;
    opacity: 0;
    animation: gsHeroIn 0.7s var(--gs-ease) forwards 0.1s;
}
.gs-eyebrow-line { width: 30px; height: 1px; background: rgba(255, 255, 255, 0.4); flex-shrink: 0; }
.gs-eyebrow-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--gs-font-head);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
}
.gs-eyebrow-dot { color: var(--gs-green-400); font-size: 0.8em; }

.services-hero h1 {
    font-family: var(--gs-font-display) !important;
    font-weight: 600 !important;
    font-size: clamp(2.4rem, 5.2vw, 4.1rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.01em;
    color: #ffffff !important;
    text-shadow: 0 2px 28px rgba(0,0,0,0.28);
    margin: 0 auto 22px !important;
    max-width: 18ch;
    text-align: center;
    word-break: break-word;
    overflow-wrap: anywhere;
    opacity: 0;
    animation: gsHeroIn 0.75s var(--gs-ease) forwards 0.26s;
}
.services-hero h1 em {
    font-style: italic;
    color: var(--gs-mist-100);
    position: relative;
}
/* Soft underline stroke beneath the emphasised phrase — a small, quiet
   flourish rather than a hard rule. */
.services-hero h1 em::after {
    content: '';
    position: absolute;
    left: 1px;
    right: 2%;
    bottom: 0.08em;
    height: 0.08em;
    background: rgba(58, 156, 102, 0.55);
    border-radius: 2px;
    z-index: -1;
}

.services-hero p {
    color: rgba(255,255,255,0.86) !important;
    font-size: 1.1rem !important;
    line-height: 1.65;
    max-width: min(44ch, 560px);
    margin: 0 auto 24px !important;
    text-align: center;
    opacity: 0;
    animation: gsHeroIn 0.75s var(--gs-ease) forwards 0.42s;
}

/* "EST. 1991" institutional micro-detail — quiet editorial line, not a
   pill/badge, sitting naturally between the description and the CTAs. */
.gs-hero-est {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 auto 34px;
    opacity: 0;
    animation: gsHeroIn 0.75s var(--gs-ease) forwards 0.54s;
}
.gs-hero-est-line { width: 18px; height: 1px; background: rgba(58, 156, 102, 0.7); flex-shrink: 0; }
.gs-hero-est span:last-child {
    font-family: var(--gs-font-head);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
}

.gs-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    opacity: 0;
    animation: gsHeroIn 0.75s var(--gs-ease) forwards 0.68s;
}

.gs-hero-btn {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--gs-font-head);
    font-weight: 600; font-size: 0.98rem;
    padding: 15px 28px;
    border-radius: 999px;
    text-decoration: none;
    min-height: 50px;
    transition: transform 0.2s var(--gs-ease-spring), box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    will-change: transform;
}
.gs-hero-btn--primary {
    background: var(--gs-green-500);
    color: #fff;
    box-shadow: 0 14px 28px -12px rgba(35, 125, 77, 0.65);
    position: relative;
}
.gs-hero-btn--primary:hover { background: var(--gs-green-600); box-shadow: 0 18px 32px -12px rgba(35, 125, 77, 0.75); }
.gs-hero-btn--ghost {
    background: rgba(255,255,255,0.05);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.28);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.gs-hero-btn--ghost:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.45); transform: translateY(-2px); }
.gs-hero-btn:active { transform: translateY(0) scale(0.98); }
.gs-hero-btn--primary i { transition: transform 0.2s var(--gs-ease-spring); }
.gs-hero-btn--primary:hover i { transform: translateX(3px); }
/* Magnetic CTA (v7 flagship interaction) drives this button's transform via
   inline style from JS; keep the transition above smooth for both hover
   and the mouse-follow so it never feels like two competing animations. */
@media (prefers-reduced-motion: reduce) {
    .gs-hero-btn--primary { transform: none !important; }
}

/* Bottom transition: fades the photographic hero out through transparency
   into the off-white body background instead of a hard cut. */
.gs-hero-bottom-fade {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 140px;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(245, 248, 244, 0) 0%, rgba(245, 248, 244, 0.55) 60%, var(--gs-mist-50) 100%);
}
@media (max-width: 640px) { .gs-hero-bottom-fade { height: 100px; } }

/* Scroll cue — a thin fading line + chevron + small wordmark, nudging
   toward the category nav strip just below. Fades in last. Already
   centered via left:50% regardless of the content column's alignment, so
   this needed no change for the v10 revert. */
.gs-hero-scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 30px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    opacity: 0;
    transform: translateX(-50%);
    animation:
        gsHeroIn 0.7s var(--gs-ease) forwards 1.0s,
        gsScrollNudge 2.4s ease-in-out infinite 1.8s;
    transition: color 0.2s ease;
}
.gs-hero-scroll-cue:hover { color: rgba(255, 255, 255, 0.95); }
.gs-hero-scroll-cue-line {
    width: 1px;
    height: 30px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.02), rgba(255,255,255,0.65));
}
.gs-hero-scroll-label {
    font-family: var(--gs-font-head);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
@keyframes gsScrollNudge {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, 6px); }
}
@media (max-width: 640px) { .gs-hero-scroll-cue { display: none; } }

@media (max-width: 900px) {
    .gs-hero-inner--split { padding: 92px 22px 60px; }
    .gs-hero-content { max-width: 100%; }
}
@media (max-width: 640px) {
    .services-hero { min-height: clamp(680px, 88vh, 780px); background-position: center center !important; }
    .gs-hero-inner--split { padding: 84px 20px 48px; }
    .services-hero h1 { font-size: clamp(2rem, 8vw, 2.6rem) !important; max-width: 100%; }
    .services-hero p { font-size: 1rem !important; margin-bottom: 20px !important; }
    .gs-hero-est { margin-bottom: 26px; }
    .gs-hero-actions { flex-direction: column; align-items: center; }
    .gs-hero-btn { width: 100%; justify-content: center; }
}
@media (max-width: 480px) { .gs-hero-inner--split { padding: 76px 18px 42px; } }
@media (max-width: 640px) { .services-hero { background-attachment: scroll !important; } }

/* ==========================================================================
   2. CATEGORY NAVIGATION STRIP
   ========================================================================== */
.gs-nav-strip { position: relative; z-index: 3; background: var(--gs-paper); border-bottom: 1px solid var(--gs-line); }
.gs-nav-strip-inner {
    max-width: var(--gs-container);
    margin: 0 auto;
    padding: 0 28px;
    display: flex; gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
}
.gs-nav-strip-inner::-webkit-scrollbar { display: none; }

.gs-nav-link {
    position: relative; flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 20px 8px; margin-right: 34px;
    font-family: var(--gs-font-head);
    font-size: 1rem; font-weight: 600; color: var(--gs-ink-700);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
    scroll-snap-align: start;
    min-height: 48px;
}
.gs-nav-link i { font-size: 1.05em; }
.gs-nav-link::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
    background: var(--gs-green-500);
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.25s var(--gs-ease);
}
.gs-nav-link:hover { color: var(--gs-green-600); }
.gs-nav-link:hover::after { transform: scaleX(1); }
.gs-nav-link.is-active { color: var(--gs-forest-800); border-bottom-color: transparent; }
.gs-nav-link.is-active::after { transform: scaleX(1); background: var(--gs-forest-800); }
.gs-nav-link .gs-nav-count {
    font-size: 0.82rem; font-weight: 700; color: var(--gs-green-600);
    background: var(--gs-mist-100); border-radius: 999px; padding: 2px 10px;
}
@media (max-width: 640px) { .gs-nav-strip-inner { padding: 0 20px; } .gs-nav-link { padding: 14px 4px; margin-right: 22px; } }

/* ==========================================================================
   2b. NAVIGATION LOGO — clipping fix
   The header/nav markup itself lives in includes/header.php (not shown
   here), but the fix is purely visual and scoped by class, so it applies
   wherever that markup renders. Guarantees the logo is never clipped by a
   too-short nav bar and stays vertically centred.
   ========================================================================== */
.navbar, .site-navbar, header.main-header {
    min-height: 76px;
    display: flex;
    align-items: center;
}
.navbar .logo, .navbar img.logo, .site-navbar .logo-img, header.main-header .logo img {
    max-height: 52px;
    width: auto;
    height: auto;
    display: block;
    object-fit: contain;
    padding: 6px 0;
}
@media (max-width: 640px) {
    .navbar, .site-navbar, header.main-header { min-height: 64px; }
    .navbar .logo, .navbar img.logo, .site-navbar .logo-img, header.main-header .logo img { max-height: 42px; }
}

/* ==========================================================================
   3. SECTION HEADERS
   ========================================================================== */
.category-section { background: var(--gs-mist-50) !important; padding: 72px 28px !important; max-width: var(--gs-container); margin: 0 auto; }
@media (max-width: 640px) { .category-section { padding: 44px 18px !important; } }
@media (max-width: 380px) { .category-section { padding: 36px 14px !important; } }

.category-header { max-width: 640px; margin: 0 auto 40px; text-align: left; }
@media (max-width: 640px) { .category-header { margin: 0 auto 26px; } }

.category-badge {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--gs-font-head);
    font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--gs-green-600) !important;
    background: var(--gs-mist-100) !important;
    border: 1px solid var(--gs-line);
    padding: 7px 16px; border-radius: 999px; margin-bottom: 16px;
}

.category-title {
    font-family: var(--gs-font-display) !important;
    font-weight: 600 !important;
    font-size: clamp(1.5rem, 2.8vw, 2.2rem) !important;
    color: var(--gs-forest-800) !important;
    text-shadow: none !important;
    display: flex !important; align-items: center; gap: 12px;
    margin: 0 0 10px !important;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.category-title i { font-size: 0.75em; color: var(--gs-green-500); }

.category-subtitle { color: var(--gs-ink-700) !important; font-size: 1.05rem !important; line-height: 1.6; max-width: 52ch; }
@media (max-width: 480px) { .category-subtitle { font-size: 0.98rem !important; } }

/* ==========================================================================
   4. SERVICE CARDS — photography-first
   ========================================================================== */
.services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
@media (max-width: 640px) { .services-grid { grid-template-columns: 1fr; gap: 16px; } }

.service-card-modern {
    position: relative;
    background: var(--gs-paper);
    border: 1px solid var(--gs-line);
    border-radius: var(--gs-radius-md);
    box-shadow: var(--gs-shadow-card);
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s var(--gs-ease), box-shadow 0.3s var(--gs-ease), border-color 0.3s var(--gs-ease);
}
.service-card-modern:hover { transform: translateY(-5px); box-shadow: var(--gs-shadow-card-hover); border-color: var(--gs-green-400); }

.gs-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--gs-ease), transform 0.6s var(--gs-ease); }
.gs-reveal.gs-revealed { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .gs-reveal { opacity: 1; transform: none; transition: none; } }

.service-card-modern:focus-visible { outline: 3px solid var(--gs-green-500); outline-offset: 2px; }
@media (hover: none) {
    .service-card-modern:active { transform: scale(0.99); box-shadow: var(--gs-shadow-sm); }
}

/* ---- Card image: the dominant visual element -------------------------- */
.service-card-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--gs-mist-100);
    flex-shrink: 0;
}
.service-card-image img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s var(--gs-ease);
}
.service-card-modern:hover .service-card-image img { transform: scale(1.045); }

/* Branded fallback for services without a photo yet — intentional, not broken */
.gs-cover-fallback {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--gs-forest-800) 0%, var(--gs-green-600) 100%);
    color: rgba(255, 255, 255, 0.9);
    font-size: 2.4rem;
}
.gs-cover-fallback::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 14px);
}

/* Subtle scrim so a white star badge always stays legible over any photo */
.service-card-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(9,26,18,0.22) 0%, rgba(9,26,18,0) 32%);
    pointer-events: none;
}

.featured-badge {
    position: absolute;
    top: 14px; right: 14px;
    z-index: 2;
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(18, 63, 42, 0.92);
    color: #fff;
    font-family: var(--gs-font-head);
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 999px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.featured-badge i { color: #ffffff; font-size: 0.85em; }

.service-card-content { padding: 20px 22px 20px; display: flex; flex-direction: column; flex: 1; gap: 4px; }
@media (max-width: 480px) { .service-card-content { padding: 18px 18px 16px; } }

.service-card-eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--gs-font-head);
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--gs-green-600);
    margin-bottom: 2px;
}
.service-card-eyebrow i { font-size: 0.85em; color: var(--gs-green-500); }

.service-name {
    font-family: var(--gs-font-head) !important;
    font-weight: 600 !important;
    font-size: 1.15rem !important;
    color: var(--gs-ink-900) !important;
    margin: 0 0 4px !important;
    line-height: 1.3;
}

.service-description {
    color: var(--gs-ink-700) !important;
    font-size: 0.98rem !important;
    line-height: 1.6 !important;
    margin: 0 0 16px !important;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.view-details-btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--gs-font-head);
    font-weight: 700; font-size: 0.92rem;
    color: var(--gs-green-600);
    padding-top: 14px;
    border-top: 1px solid var(--gs-line-soft);
    min-height: 24px;
    transition: gap 0.2s ease, color 0.2s ease;
}
.service-card-modern:hover .view-details-btn { gap: 12px; color: var(--gs-forest-800); }
.view-details-btn i { font-size: 0.8em; transition: transform 0.2s ease; }
.service-card-modern:hover .view-details-btn i { transform: translateX(2px); }

@media (prefers-reduced-motion: reduce) {
    .service-card-modern, .service-card-image img, .view-details-btn, .view-details-btn i { transition: none !important; }
    .service-card-modern:hover { transform: none !important; }
    .service-card-modern:hover .service-card-image img { transform: none !important; }
}

/* ==========================================================================
   4b. FEATURED SERVICES STRIP — shown above the category grids
   ========================================================================== */
.gs-featured-section { background: var(--gs-paper) !important; padding: 56px 28px 8px !important; max-width: var(--gs-container); margin: 0 auto; }
@media (max-width: 640px) { .gs-featured-section { padding: 40px 18px 4px !important; } }

.gs-featured-header { margin-bottom: 28px; }
.gs-featured-header h2 {
    font-family: var(--gs-font-display) !important;
    font-weight: 600 !important;
    font-size: clamp(1.4rem, 2.6vw, 2rem) !important;
    color: var(--gs-forest-800) !important;
    margin: 0 0 6px !important;
}
.gs-featured-header p { color: var(--gs-ink-700); font-size: 1rem; margin: 0; }

.gs-featured-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; margin-bottom: 44px; }
.gs-featured-grid .service-card-modern .service-card-image { aspect-ratio: 16 / 9; }
@media (max-width: 640px) { .gs-featured-grid { grid-template-columns: 1fr; margin-bottom: 30px; } }

/* ==========================================================================
   5. CTA BAND
   ========================================================================== */
.cta-section-services {
    position: relative; overflow: hidden;
    isolation: isolate;
    /* v4: same green-transparency recipe as the homepage CTA band. */
    background:
        linear-gradient(135deg, var(--gs-hero-grad-1) 0%, var(--gs-hero-grad-2) 100%),
        radial-gradient(circle at 15% 20%, var(--gs-hero-glow-1), transparent 45%),
        radial-gradient(circle at 85% 80%, var(--gs-hero-glow-2), transparent 50%),
        url('company.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    padding: 80px 28px !important;
}
.cta-section-services::before {
    content: '';
    position: absolute; inset: 0;
    background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 63px, rgba(255,255,255,0.05) 63px, rgba(255,255,255,0.05) 64px);
    pointer-events: none;
    z-index: 0;
}
.cta-section-services::after {
    content: '';
    position: absolute; top: -120px; right: -80px;
    width: 340px; height: 340px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.14);
    pointer-events: none;
}
.cta-section-services > div { position: relative; z-index: 1; }

.gs-cta-inner {
    max-width: var(--gs-container); margin: 0 auto;
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 48px; align-items: center; text-align: left !important;
}
@media (max-width: 860px) { .gs-cta-inner { grid-template-columns: 1fr; text-align: center !important; gap: 28px; } }

.gs-cta-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--gs-font-head);
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--gs-mist-100); margin-bottom: 14px;
}
.gs-cta-eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--gs-green-400); }
@media (max-width: 860px) { .gs-cta-eyebrow { justify-content: center; } }

.cta-section-services h2 {
    font-family: var(--gs-font-display) !important;
    font-weight: 600 !important;
    font-size: clamp(1.5rem, 3.2vw, 2.3rem) !important;
    line-height: 1.15 !important;
    margin-bottom: 12px !important;
}
.cta-section-services p { font-size: 1rem !important; color: rgba(255,255,255,0.82) !important; margin-bottom: 0 !important; max-width: 46ch; }
@media (max-width: 860px) { .cta-section-services p { margin: 0 auto !important; } }
@media (max-width: 480px) { .cta-section-services p { font-size: 0.92rem !important; } }

.cta-section-services .btn-primary {
    font-family: var(--gs-font-head) !important;
    font-weight: 600 !important;
    border-radius: 999px !important;
    box-shadow: var(--gs-shadow-lg);
    transition: transform 0.25s var(--gs-ease), box-shadow 0.25s var(--gs-ease);
    min-height: 48px;
}
.cta-section-services .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.45); }

@media (max-width: 768px) { .services-hero, .cta-section-services { background-attachment: scroll !important; } .cta-section-services { padding: 52px 20px !important; } }
@media (max-width: 480px) {
    .cta-section-services { padding: 42px 18px !important; }
    .cta-section-services .btn-primary { width: 100%; padding: 14px 24px !important; font-size: 1rem !important; box-sizing: border-box; }
}

/* ==========================================================================
   6. MODAL — image header + content, gallery for multi-image services
   ========================================================================== */
.modal-content { border-radius: 22px !important; max-width: 880px !important; }

.modal-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 21 / 8;
    max-height: 260px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--gs-mist-100);
}
.modal-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.modal-cover .gs-cover-fallback { font-size: 3rem; }
/* v4: stronger scrim behind the cover photo so the title/meta pill stays
   legible even over light, busy photos (was too faint before). */
.modal-cover::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(9,26,18,0.10) 0%, rgba(9,26,18,0.78) 100%);
}
@media (max-width: 640px) { .modal-cover { aspect-ratio: 16 / 9; max-height: 200px; } }

.modal-header {
    position: relative;
    background: transparent !important;
    padding: 20px 28px !important;
    border-bottom: none !important;
    display: flex; align-items: center; gap: 16px;
}
.modal-cover + .modal-header {
    margin-top: -74px;
    position: relative;
    z-index: 2;
    /* v4: darker gradient so white text/pill always has enough contrast,
       regardless of how light or busy the underlying photo is. */
    background: linear-gradient(180deg, rgba(9,26,18,0.05) 0%, rgba(9,26,18,0.62) 100%) !important;
}
.modal-header.loan-header, .modal-header.other-header { background: transparent !important; }
.modal-header > * { position: relative; z-index: 1; }

.modal-icon-wrapper {
    width: 50px; height: 50px;
    border-radius: var(--gs-radius-sm);
    background: rgba(255, 255, 255, 0.16) !important;
    color: #fff !important;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; flex-shrink: 0;
    backdrop-filter: blur(4px);
}
.modal-title-group { flex: 1; min-width: 0; }
.modal-title {
    color: #fff !important;
    font-family: var(--gs-font-head) !important;
    font-weight: 600 !important;
    font-size: 1.38rem !important;
    margin: 0 0 6px !important;
    text-shadow: 0 2px 10px rgba(9, 26, 18, 0.6);
}

/* v4: "Category • Most Availed" is now its own legible chip — a solid dark
   scrim + border + blur behind the text — instead of plain white text that
   could wash out over a light photo (see the "Fidelity Loan" reference). */
.modal-header span[style] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #ffffff !important;
    font-size: 0.86rem !important;
    font-weight: 600 !important;
    text-shadow: none !important;
    background: rgba(9, 26, 18, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    padding: 5px 12px !important;
    border-radius: 999px !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.modal-header span[style] i { color: #ffd27a; }

.modal-close {
    background: rgba(9, 26, 18, 0.4) !important;
    color: #fff !important;
    width: auto; height: 44px; min-width: 44px; padding: 0 16px;
    border-radius: 999px;
    display: flex !important;
    flex-direction: row !important;
    align-items: center; justify-content: center; gap: 8px;
    font-family: var(--gs-font-head); font-size: 0.92rem; font-weight: 600;
    white-space: nowrap;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed;
    transition: background 0.15s ease;
    flex-shrink: 0;
    backdrop-filter: blur(4px);
}
.modal-close .modal-close-label { white-space: nowrap; writing-mode: horizontal-tb !important; }
/* v4: explicitly pin row layout + horizontal writing-mode on hover/focus too
   so the "X Close" label can never render stacked/vertical. */
.modal-close:hover,
.modal-close:focus,
.modal-close:focus-visible,
.modal-close:active {
    background: rgba(9, 26, 18, 0.6) !important;
    display: flex !important;
    flex-direction: row !important;
    writing-mode: horizontal-tb !important;
    transform: none !important;
}
@media (max-width: 480px) {
    .modal-close .modal-close-label { display: none; }
    .modal-close { width: 42px; height: 42px; min-width: 42px; padding: 0; border-radius: 50%; }
}

.modal-body { padding: 28px !important; background: var(--gs-paper); font-size: 1.02rem; }

/* Small gallery of extra photos, shown only when a service has more than one active image */
.gs-modal-gallery { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin: -8px 0 22px; }
.gs-modal-gallery button {
    all: unset;
    flex-shrink: 0;
    width: 68px; height: 52px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
}
.gs-modal-gallery button.is-active { border-color: var(--gs-green-500); }
.gs-modal-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }

.modal-section { margin-bottom: 26px; }
.modal-section:last-child { margin-bottom: 0; }
.modal-section-title {
    font-family: var(--gs-font-head) !important;
    font-weight: 600 !important;
    font-size: 1.08rem !important;
    color: var(--gs-forest-800) !important;
    display: flex; align-items: center; gap: 9px;
    margin: 0 0 12px !important;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--gs-line-soft);
}
.modal-section-title i { color: var(--gs-green-500); font-size: 0.9em; }
.modal-text { color: var(--gs-ink-700) !important; font-size: 1.02rem !important; line-height: 1.7 !important; }

.requirements-grid-modal { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
@media (max-width: 560px) { .requirements-grid-modal { grid-template-columns: 1fr; } }
.req-box { background: var(--gs-mist-50); border: 1px solid var(--gs-line); border-radius: var(--gs-radius-md); padding: 18px; }
.req-box.retirees { border-left: 3px solid var(--gs-green-400); }
.req-box.regular { border-left: 3px solid var(--gs-green-500); }
.req-box h5 { font-family: var(--gs-font-head); font-weight: 600; font-size: 0.98rem; color: var(--gs-ink-900); display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.req-box.retirees h5 i { color: var(--gs-green-400); }
.req-box.regular h5 i { color: var(--gs-green-500); }
.req-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.req-list li { position: relative; padding-left: 26px; font-size: 0.96rem; color: var(--gs-ink-700); line-height: 1.55; }
.req-list li::before {
    content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.7rem;
    color: var(--gs-green-600); position: absolute; left: 0; top: 3px;
    width: 17px; height: 17px; background: var(--gs-mist-100); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}

@media (max-width: 640px) {
    .modal-header { padding: 16px 18px !important; }
    .modal-body { padding: 20px 18px !important; }
    .modal-icon-wrapper { width: 42px; height: 42px; font-size: 1.1rem; }
    .modal-title { font-size: 1.05rem !important; }
}
@media (max-width: 380px) {
    .modal-header { padding: 14px 14px !important; gap: 12px; }
    .modal-body { padding: 16px 14px !important; }
}

/* ==========================================================================
   7. APPLY EXPERIENCE — retint the existing --apply- tokens
   ========================================================================== */
:root {
    --apply-forest:      var(--gs-forest-800);
    --apply-green:       var(--gs-green-600);
    --apply-green-dark:  var(--gs-forest-800);
    --apply-green-soft:  var(--gs-mist-100);
    --apply-green-line:  #cfe3d4;
    --apply-gold:        var(--gs-gold-500);
    --apply-gold-soft:   var(--gs-gold-100);
    --apply-cream:       var(--gs-mist-50);
    --apply-ink:         var(--gs-ink-900);
    --apply-ink-soft:    var(--gs-ink-500);
    --apply-line:        var(--gs-line);
}
.modal-cta { background: var(--gs-mist-50) !important; border: 1px solid var(--gs-line) !important; border-radius: var(--gs-radius-lg) !important; }
.modal-cta h4 { font-family: var(--gs-font-head) !important; }
.apply-section { border-radius: var(--gs-radius-md) !important; }
.apply-login-gate { background: var(--gs-gold-100) !important; border-color: #cfe3d4 !important; border-radius: var(--gs-radius-md) !important; }
.term-option-card { border-radius: var(--gs-radius-md) !important; }
.apply-file-drop { border-radius: var(--gs-radius-md) !important; }
/* v11 — fix invisible text in the logged-out "Ready to apply?" state.
   .modal-cta / .apply-login-gate got light backgrounds above, but their
   heading, notice text, and the "Log In to Apply" link were never given
   matching dark text — they were still inheriting white, which disappears
   on a near-white background. Also gives the login link its own visible
   pill treatment, since as an <a> tag it wasn't picking up the same
   button chrome the real .btn-apply-now <button> gets elsewhere. */
.modal-cta h4 {
    color: var(--gs-forest-800) !important;
}

.apply-login-gate {
    color: var(--gs-ink-700) !important;
}
.apply-login-gate p {
    color: var(--gs-ink-700) !important;
    margin: 0 !important;
}
.apply-login-gate i {
    color: var(--gs-gold-500) !important;
}

a.btn-apply-now {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--gs-green-600) 0%, var(--gs-forest-800) 100%) !important;
    color: #fff !important;
    padding: 0 22px !important;
    border-radius: 999px !important;
    font-family: var(--gs-font-head);
    font-weight: 600;
    font-size: 0.95rem;
    box-shadow: var(--gs-shadow-md);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
a.btn-apply-now:hover {
    transform: translateY(-2px);
    box-shadow: var(--gs-shadow-lg);
}
a.btn-apply-now i {
    color: #fff !important;
}
/* ==========================================================================
   8. NOTICE / ALERT DIALOG RETINT
   ========================================================================== */
.notice-dialog { border-radius: var(--gs-radius-lg) !important; }
.notice-icon { background: var(--gs-gold-100) !important; color: var(--gs-gold-500) !important; }
.notice-dialog h3 { font-family: var(--gs-font-head) !important; color: var(--gs-forest-800) !important; }
.notice-btn-primary { background: linear-gradient(135deg, var(--gs-green-600) 0%, var(--gs-forest-800) 100%) !important; }
@media (max-width: 480px) { .notice-dialog { padding: 24px 20px 20px; max-width: calc(100% - 8px); } }
/* v12 — visual hierarchy for the logged-out "Ready to apply?" actions.
   Login/Become a Member/Contact Us were three equal-weight pills
   competing for attention. This makes Log In the one clear primary
   (full-width, solid), Become a Member a lighter secondary (outline),
   and Contact Us a plain muted link -- scoped to only the actions that
   follow .apply-login-gate, so the logged-in Apply Now flow is
   untouched. */
.apply-login-gate {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    text-align: left !important;
}
.apply-login-gate i {
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 1.1rem;
}
.apply-login-gate p { flex: 1; }

.apply-login-gate + .apply-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

/* Primary: Log In to Apply -- full width, solid, the one obvious action */
.apply-login-gate + .apply-actions a.btn-apply-now {
    flex: 1 1 100%;
    justify-content: center;
    min-height: 54px;
    font-size: 1rem;
}

/* Secondary: Become a Member -- outline, shares a row with Contact Us */
.apply-login-gate + .apply-actions .modal-cta-btn:first-of-type {
    flex: 1 1 auto;
    justify-content: center;
    background: #fff !important;
    color: var(--gs-green-600) !important;
    border: 1.5px solid var(--gs-green-500) !important;
    box-shadow: none !important;
    font-weight: 600;
}
.apply-login-gate + .apply-actions .modal-cta-btn:first-of-type:hover {
    background: var(--gs-mist-100) !important;
}

/* Tertiary: Contact Us -- plain muted link, no button chrome */
.apply-login-gate + .apply-actions .modal-cta-btn:last-of-type {
    flex: 0 0 auto;
    background: transparent !important;
    color: var(--gs-ink-500) !important;
    border: none !important;
    box-shadow: none !important;
    font-weight: 500;
    min-height: auto;
    padding: 4px 10px !important;
    text-decoration: none;
    align-self: center;
    margin-left: auto;
}
.apply-login-gate + .apply-actions .modal-cta-btn:last-of-type:hover {
    color: var(--gs-green-600) !important;
    text-decoration: underline;
}

@media (max-width: 480px) {
    .apply-login-gate + .apply-actions .modal-cta-btn:last-of-type {
        margin-left: 0;
        align-self: flex-start;
    }
}
/* ==========================================================================
   9. FOCUS / A11Y BASELINE
   ========================================================================== */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--gs-green-500); outline-offset: 2px;
}

/* ==========================================================================
   10. MOBILE-FRIENDLY & AGE-INCLUSIVE HARDENING
   ========================================================================== */
.modal-body { -webkit-overflow-scrolling: touch; }

.gs-nav-link, .service-card-modern, .featured-badge, .btn-apply-now, .apply-submit-btn,
.modal-cta-btn, .notice-btn-primary, .notice-btn-secondary, .edit-term-btn, .modal-close,
.term-option-card, a.btn-primary {
    min-height: 48px;
}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
.service-card-modern:focus-visible {
    outline: 3px solid var(--gs-green-500); outline-offset: 3px;
}

.req-list li { padding-left: 26px; }

.category-title, .services-hero h1, .cta-section-services h2 { word-break: break-word; overflow-wrap: anywhere; }

@media (max-width: 768px) {
    .apply-field input, .apply-field select, .apply-field textarea { font-size: 16px; }
}

@media (max-width: 390px) {
    .gs-eyebrow-pill { font-size: 0.64rem; letter-spacing: 0.1em; }
    .service-name { font-size: 1.06rem !important; }
    .service-description { font-size: 0.92rem !important; }
}

@media (max-height: 480px) and (orientation: landscape) {
    .services-hero { min-height: auto; padding: 28px 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
/* ==========================================================================
   11. v13 — REFINEMENT PASS: quieter, more considered, more "boutique"
   Two things: (1) fixes the Contact Us link drifting to the far edge of
   the row (the margin-left:auto from v12 was meant for a two-item row,
   but reads as abandoned once Become a Member is its natural width) —
   it now sits directly beside Become a Member with a hairline divider,
   the way a receipt or letterhead would pair two related lines. (2) a
   broader elegance pass: layered/diffused shadows instead of flat ones,
   tighter and more consistent letter-spacing on all-caps labels, hairline
   dividers in place of some borders, slightly slower/quieter easing, and
   a touch of serif italic on section eyebrows for editorial polish.
   Still strictly the existing green/white palette — no new hues.
   ========================================================================== */

/* ---- 11a. Contact Us: fix the drift, pair it with Become a Member ---- */
.apply-login-gate + .apply-actions .modal-cta-btn:last-of-type {
    margin-left: 0 !important;
    align-self: center;
    position: relative;
    padding-left: 18px !important;
}
.apply-login-gate + .apply-actions .modal-cta-btn:last-of-type::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 16px;
    background: var(--gs-line);
}
@media (max-width: 480px) {
    .apply-login-gate + .apply-actions .modal-cta-btn:last-of-type {
        padding-left: 0 !important;
    }
    .apply-login-gate + .apply-actions .modal-cta-btn:last-of-type::before {
        display: none;
    }
}

/* ---- 11b. Layered, diffused shadows in place of flat single-layer ones.
   A premium shadow is rarely one blur value — it's a tight contact shadow
   plus a soft ambient one. Redefining the tokens updates every component
   that already references them (cards, buttons, modal, notice dialog). */
:root {
    --gs-shadow-sm: 0 1px 2px rgba(12, 42, 29, 0.05), 0 1px 1px rgba(12, 42, 29, 0.04);
    --gs-shadow-md: 0 2px 6px rgba(12, 42, 29, 0.06), 0 16px 32px -18px rgba(12, 42, 29, 0.30);
    --gs-shadow-lg: 0 4px 10px rgba(12, 42, 29, 0.08), 0 32px 64px -28px rgba(12, 42, 29, 0.40);
    --gs-shadow-card: 0 1px 2px rgba(12, 42, 29, 0.04), 0 10px 24px -16px rgba(12, 42, 29, 0.14);
    --gs-shadow-card-hover: 0 2px 4px rgba(12, 42, 29, 0.06), 0 28px 48px -22px rgba(28, 107, 65, 0.32);
    --gs-ease: cubic-bezier(0.19, 1, 0.22, 1);
}

/* ---- 11c. Editorial eyebrow treatment: serif italic + wider tracking,
   used anywhere a small uppercase label sits above a heading. Reads more
   like a letterpress detail than a UI chip. */
.category-badge,
.gs-cta-eyebrow,
.gs-eyebrow-pill,
.hp-hero-est span:last-child,
.gs-hero-est span:last-child {
    letter-spacing: 0.16em !important;
}
.gs-featured-header p {
    font-family: var(--gs-font-display);
    font-style: italic;
    font-weight: 500;
    color: var(--gs-green-600);
    opacity: 0.85;
}

/* ---- 11d. Cards: hairline gold-less green rule appears under the title
   on hover, in place of the whole border flashing green — quieter, more
   controlled. Radius slightly softened for a less "app-like" corner. */
.service-card-modern {
    border-radius: 16px;
}
.service-card-modern:hover {
    border-color: var(--gs-line);
    box-shadow: var(--gs-shadow-card-hover);
}
.service-name {
    position: relative;
    padding-bottom: 2px;
}
.service-name::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    height: 1px;
    width: 28px;
    background: var(--gs-green-400);
    opacity: 0;
    transform: scaleX(0.6);
    transform-origin: left;
    transition: opacity 0.35s var(--gs-ease), transform 0.35s var(--gs-ease);
}
.service-card-modern:hover .service-name::after {
    opacity: 1;
    transform: scaleX(1);
}

/* ---- 11e. Buttons: a whisper of inner highlight (like brushed metal /
   lacquer) instead of a flat fill, plus tighter, more considered
   letter-spacing on the label text. */
.gs-hero-btn--primary,
.hero-buttons .btn-primary,
a.btn-apply-now,
.notice-btn-primary,
.apply-submit-btn,
.cta-section-services .btn-primary,
.gsc-cta .btn-primary {
    position: relative;
    letter-spacing: 0.02em;
    box-shadow: var(--gs-shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.gs-hero-btn--primary:hover,
a.btn-apply-now:hover,
.apply-submit-btn:hover {
    box-shadow: var(--gs-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* Secondary/outline buttons: hairline instead of a heavier 1.5px border,
   slightly deeper text color at rest so it doesn't compete with primary. */
.apply-login-gate + .apply-actions .modal-cta-btn:first-of-type {
    border-width: 1px !important;
    color: var(--gs-forest-800) !important;
}

/* ---- 11f. Section transitions: a fine hairline (not a hard border)
   between the hero/CTA and the body, echoing the ledger-line motif used
   elsewhere on the page at a much quieter opacity. */
.gs-nav-strip {
    box-shadow: 0 1px 0 rgba(18, 63, 42, 0.04);
}

/* ---- 11g. Modal: slightly more generous section rhythm and a quieter
   divider under section titles (hairline instead of solid line-soft). */
.modal-section-title {
    border-bottom: 1px solid rgba(18, 63, 42, 0.08) !important;
    letter-spacing: 0.01em;
}
.modal-body {
    line-height: 1.75;
}

/* ---- 11h. Notice dialog: same layered shadow treatment, softer icon
   ring instead of a flat filled circle. */
.notice-icon {
    box-shadow: inset 0 0 0 1px rgba(47, 143, 91, 0.18);
}

/* ---- 11i. Quieter, slightly slower motion throughout — premium reads as
   unhurried. Only affects duration, not the properties already animated. */
.service-card-modern,
.gs-hero-btn,
a.btn-apply-now,
.apply-submit-btn,
.modal-cta-btn {
    transition-duration: 0.4s;
}
/* ==========================================================================
   12. v14 — CREAM EDITORIAL PALETTE (matches the Board of Directors section)
   Swaps the flat mist-green/white backgrounds for the same warm ivory/cream
   base and muted gold accent used in #section-leadership, plus the faint
   paper-grain texture that gives that section its "letterpress" feel.
   Because most components already reference --gs-mist-50/--gs-mist-100/
   --gs-paper via var(), redefining the tokens here updates cards, the nav
   strip, the modal, apply forms, and the notice dialog without touching
   their individual rules. The hero and CTA band keep their own photo-driven
   backgrounds (untouched) since they're image compositions, not flat panels.
   ========================================================================== */

:root {
    /* ---- Warm ivory/cream base, replacing the cool mist tones ---- */
    --gs-mist-50:   #faf8f1;   /* was #f5f8f4 -- now matches --gsc-board-ivory */
    --gs-mist-100:  #f3eee2;   /* was #eef3ec -- now matches --gsc-board-cream */
    --gs-paper:     #fffdf8;   /* was pure #ffffff -- warm off-white for cards */
    --gs-line:      #e6ddc9;   /* was cool #e2e8e1 -- warm hairline to match */
    --gs-line-soft: #f0e9da;   /* was cool #edf1ec */

    /* ---- The muted gold accent from the leadership section, added
       alongside (not replacing) the green brand colors -- used for
       dividers, hover rules, and small editorial details only. */
    --gs-accent-gold: #d8a33a;
    --gs-accent-gold-soft: rgba(216, 163, 58, 0.14);
}

/* ---- Faint paper-grain texture, same recipe as the leadership section's
   ::before, applied to the light body sections so the cream doesn't read
   as flat color the way the old mist-50 did. ---- */
.category-section,
.gs-featured-section,
.gs-nav-strip {
    position: relative;
    isolation: isolate;
}
.category-section::before,
.gs-featured-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.6;
    background:
        linear-gradient(90deg, rgba(255,255,255,.55), transparent 25%, transparent 75%, rgba(255,255,255,.35)),
        repeating-linear-gradient(0deg, transparent 0 86px, rgba(18,61,45,.02) 87px, transparent 88px);
}

/* ---- Nav strip: warm ivory instead of stark white, hairline to match ---- */
.gs-nav-strip {
    background: var(--gs-mist-50) !important;
    border-bottom: 1px solid var(--gs-line);
}

/* ---- Category badge + featured header: swap the cool mist chip for the
   same warm gold-bordered pill used on the leadership eyebrow. ---- */
.category-badge {
    background: rgba(246, 250, 241, 0.85) !important;
    border: 1px solid rgba(216, 163, 58, 0.28) !important;
}

.gs-featured-header h2 {
    position: relative;
}
.gs-featured-header::after {
    content: '';
    display: block;
    width: 41px;
    height: 3px;
    margin-top: 14px;
    background: var(--gs-accent-gold);
}

/* ---- Service cards: warm ivory card face, gold hairline replacing the
   green one on hover (kept consistent with the leadership card treatment
   rather than the earlier all-green accent system). ---- */
.service-card-modern {
    background: var(--gs-paper);
    border-color: var(--gs-line);
}
.service-card-modern:hover {
    border-color: rgba(216, 163, 58, 0.4) !important;
}
.service-name::after {
    background: var(--gs-accent-gold) !important;
}

/* ---- Featured badge: gold instead of solid forest, matching the
   leadership section's gold-as-highlight role. ---- */
.featured-badge {
    background: rgba(18, 61, 45, 0.88) !important;
}
.featured-badge i {
    color: var(--gs-accent-gold) !important;
}

/* ---- Modal + apply experience: warm ivory body, gold section rule
   instead of green, matching the leadership card's gold underline motif. ---- */
.modal-body {
    background: var(--gs-paper);
}
.modal-section-title {
    border-bottom-color: rgba(216, 163, 58, 0.22) !important;
}
.modal-section-title i {
    color: var(--gs-accent-gold) !important;
}
.req-box.regular {
    border-left-color: var(--gs-accent-gold) !important;
}

.modal-cta,
.apply-file-drop,
.term-option-card,
.apply-section {
    background: var(--gs-mist-50) !important;
    border-color: var(--gs-line) !important;
}

/* ---- Notice dialog: warm card face + gold icon ring, matching the
   leadership section's ivory/gold identity instead of cool white/green. ---- */
.notice-dialog {
    background: var(--gs-paper) !important;
}
.notice-icon {
    background: var(--gs-accent-gold-soft) !important;
    color: var(--gs-accent-gold) !important;
}

/* ---- Requirements boxes: warm background instead of cool mist ---- */
.req-box {
    background: var(--gs-mist-50);
    border-color: var(--gs-line);
}

/* ---- Gallery thumbnails + close button focus ring: swap to gold to
   match the leadership section's gold "is-active" ring on its roster. ---- */
.gs-modal-gallery button.is-active {
    border-color: var(--gs-accent-gold) !important;
}


/* ==========================================================================
   FINAL REFERENCE RECREATION — GSC-TEMPC SERVICES
   Appended intentionally so the existing services_style.css and historical
   redesign rules remain functional, while this layer owns the final visual
   system shown in the supplied reference.
   ========================================================================== */

:root {
    --gsc-ref-forest: #123d2d;
    --gsc-ref-forest-deep: #0d3024;
    --gsc-ref-green: #2b7a50;
    --gsc-ref-ivory: #fbf9f3;
    --gsc-ref-cream: #f3eee4;
    --gsc-ref-paper: #fffdf8;
    --gsc-ref-ink: #173a2c;
    --gsc-ref-muted: #6c746e;
    --gsc-ref-gold: #cfa24a;
    --gsc-ref-gold-soft: rgba(207,162,74,.18);
    --gsc-ref-line: rgba(18,61,45,.13);
    --gsc-ref-line-soft: rgba(18,61,45,.08);
    --gsc-ref-radius: 9px;
    --gsc-ref-ease: cubic-bezier(.22,1,.36,1);
    --gsc-ref-width: 1440px;
}

html { background: var(--gsc-ref-ivory); }
body {
    background: var(--gsc-ref-ivory) !important;
    color: var(--gsc-ref-ink);
    font-family: 'Inter', 'Segoe UI', sans-serif;
    overflow-x: hidden;
}
body.gsc-modal-open { overflow: hidden !important; }

/* Hide the former hero system: the supplied reference starts immediately
   beneath the site header with the browse index + Services introduction. */
.gsc-services-page { display:block; min-height:100vh; background:
    radial-gradient(circle at 12% 18%, rgba(207,162,74,.035), transparent 26%),
    linear-gradient(180deg, #fffefa 0%, var(--gsc-ref-ivory) 52%, #faf7ef 100%);
}
.gsc-services-layout {
    width: min(calc(100% - 52px), var(--gsc-ref-width));
    margin: 0 auto;
    padding: 26px 0 86px;
    display: grid;
    grid-template-columns: 324px minmax(0,1fr);
    gap: 40px;
    align-items: start;
}
.gsc-services-main { min-width:0; }

/* Sidebar */
.gsc-services-sidebar {
    position: sticky;
    top: 88px;
    z-index: 20;
    min-width:0;
    padding: 25px 15px 18px;
    background: rgba(255,253,248,.88);
    border:1px solid rgba(18,61,45,.10);
    border-radius: 11px;
    box-shadow: 0 12px 36px rgba(18,61,45,.045);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.gsc-services-sidebar__top { padding: 0 0 8px; }
.gsc-services-sidebar__heading {
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 0 17px;
    color:var(--gsc-ref-ink);
    font-family:'Poppins',sans-serif;
    font-size:.68rem;
    line-height:1;
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
}
.gsc-services-sidebar__rule {
    width:28px;
    height:1px;
    background:var(--gsc-ref-gold);
    flex:0 0 auto;
}
.gsc-services-sidebar__search,
.gsc-directory-search {
    position:relative;
    display:flex;
    align-items:center;
    min-height:44px;
    border:1px solid rgba(18,61,45,.12);
    background:#f8f5ee;
    border-radius:22px;
    transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.gsc-services-sidebar__search:focus-within,
.gsc-directory-search:focus-within {
    border-color:rgba(43,122,80,.46);
    background:#fffdf8;
    box-shadow:0 0 0 3px rgba(43,122,80,.07);
}
.gsc-services-sidebar__search > i,
.gsc-directory-search > i {
    margin-left:14px;
    color:#8b918c;
    font-size:.76rem;
}
.gsc-services-sidebar__search input,
.gsc-directory-search input {
    width:100%;
    min-width:0;
    border:0;
    outline:0;
    background:transparent;
    color:var(--gsc-ref-ink);
    padding:11px 36px 11px 10px;
    font:500 .75rem/1.2 'Inter',sans-serif;
}
.gsc-services-sidebar__search input::placeholder,
.gsc-directory-search input::placeholder { color:#929791; }
.gsc-services-sidebar__search-clear,
.gsc-directory-search button {
    position:absolute;
    right:5px;
    width:34px;
    height:34px;
    border:0;
    background:transparent;
    color:#7e8780;
    display:grid;
    place-items:center;
    cursor:pointer;
    border-radius:50%;
    opacity:.65;
}
.gsc-services-sidebar__search-clear:hover,
.gsc-directory-search button:hover { color:var(--gsc-ref-forest); background:#eee9df; opacity:1; }

.gsc-services-sidebar__tabs {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
    margin-top:13px;
}
.gsc-services-sidebar__tab {
    min-height:38px;
    border:1px solid rgba(18,61,45,.10);
    border-radius:7px;
    background:#fffdf8;
    color:#5c665f;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:7px;
    padding:0 12px;
    font:600 .66rem 'Inter',sans-serif;
    cursor:pointer;
    transition:all .25s var(--gsc-ref-ease);
}
.gsc-services-sidebar__tab b {
    min-width:18px;
    height:18px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#eee8da;
    color:#866d36;
    font-size:.58rem;
}
.gsc-services-sidebar__tab.is-active {
    background:var(--gsc-ref-forest);
    color:#fffdf7;
    border-color:var(--gsc-ref-forest);
    box-shadow:0 8px 18px rgba(18,61,45,.13);
}
.gsc-services-sidebar__tab.is-active b { background:rgba(255,255,255,.13); color:#ead9aa; }

.gsc-services-sidebar__lists { margin-top:10px; }
.gsc-services-sidebar__list {
    list-style:none;
    margin:0;
    padding:0;
}
.gsc-services-sidebar__list.is-hidden { display:none; }
.gsc-services-sidebar__item {
    border-bottom:1px solid var(--gsc-ref-line-soft);
}
.gsc-services-sidebar__item.is-search-hidden { display:none; }
.gsc-services-sidebar__link {
    position:relative;
    width:100%;
    min-height:58px;
    display:grid;
    grid-template-columns:28px 34px minmax(0,1fr) auto 18px;
    align-items:center;
    gap:7px;
    padding:7px 4px;
    border:0;
    background:transparent;
    color:var(--gsc-ref-ink);
    text-align:left;
    cursor:pointer;
}
.gsc-services-sidebar__link::after {
    content:'';
    position:absolute;
    left:0;
    right:0;
    bottom:-1px;
    height:1px;
    background:var(--gsc-ref-gold);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .3s var(--gsc-ref-ease);
}
.gsc-services-sidebar__link:hover::after,
.gsc-services-sidebar__link:focus-visible::after { transform:scaleX(1); }
.gsc-services-sidebar__number {
    color:#bd8f36;
    font:600 .61rem 'Poppins',sans-serif;
    letter-spacing:.04em;
}
.gsc-services-sidebar__icon {
    width:31px;
    height:31px;
    display:grid;
    place-items:center;
    background:#f4f1e9;
    border-radius:7px;
    color:var(--gsc-ref-forest);
    font-size:.72rem;
    transition:transform .25s var(--gsc-ref-ease), background .25s ease;
}
.gsc-services-sidebar__link:hover .gsc-services-sidebar__icon {
    transform:translateY(-1px);
    background:#ece7db;
}
.gsc-services-sidebar__name {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font:500 .89rem/1.2 'Fraunces',Georgia,serif;
}
.gsc-services-sidebar__badge {
    padding:3px 7px;
    border:1px solid rgba(207,162,74,.42);
    border-radius:10px;
    color:#b07e20;
    font:700 .5rem 'Poppins',sans-serif;
    letter-spacing:.04em;
    text-transform:uppercase;
    white-space:nowrap;
}
.gsc-services-sidebar__arrow {
    color:#3b7b61;
    font-size:.65rem;
    transition:transform .25s var(--gsc-ref-ease);
}
.gsc-services-sidebar__link:hover .gsc-services-sidebar__arrow { transform:translateX(3px); }
.gsc-services-sidebar__empty {
    margin:17px 8px 8px;
    color:var(--gsc-ref-muted);
    text-align:center;
    font-size:.73rem;
}
.gsc-services-sidebar__mark {
    margin:19px 3px 0;
    padding:18px 14px 8px;
    border-top:1px solid var(--gsc-ref-line);
}
.gsc-services-sidebar__mark span {
    display:block;
    color:var(--gsc-ref-forest);
    font:700 .58rem 'Poppins',sans-serif;
    letter-spacing:.19em;
}
.gsc-services-sidebar__mark i {
    display:block;
    width:29px;
    height:1px;
    margin:9px 0 8px;
    background:var(--gsc-ref-gold);
}
.gsc-services-sidebar__mark small {
    color:#7b827d;
    font-size:.62rem;
    line-height:1.5;
}
.gsc-services-mobile-filter { display:none; }

/* Intro */
.gsc-services-intro {
    padding:5px 0 0;
    margin-bottom:34px;
}
.gsc-services-intro__eyebrow {
    display:flex;
    align-items:center;
    gap:9px;
    margin-bottom:11px;
    color:#65766d;
    font:700 .57rem 'Poppins',sans-serif;
    letter-spacing:.19em;
    text-transform:uppercase;
}
.gsc-services-intro__eyebrow i {
    width:3px;
    height:3px;
    border-radius:50%;
    background:var(--gsc-ref-gold);
}
.gsc-services-intro__row {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:30px;
}
.gsc-services-intro h1 {
    margin:0;
    color:var(--gsc-ref-forest);
    font:500 clamp(3.5rem,5.6vw,5.4rem)/.95 'Fraunces',Georgia,serif;
    letter-spacing:-.045em;
}
.gsc-services-intro__underline {
    display:block;
    width:58px;
    height:2px;
    margin-top:17px;
    background:var(--gsc-ref-gold);
}
.gsc-services-intro__institution {
    width:235px;
    margin-top:8px;
    padding:2px 0 2px 14px;
    border-left:2px solid rgba(207,162,74,.72);
}
.gsc-services-intro__institution strong {
    display:block;
    margin-bottom:8px;
    color:#5c7a6b;
    font:700 .63rem 'Poppins',sans-serif;
    letter-spacing:.19em;
}
.gsc-services-intro__institution span {
    display:block;
    color:#727872;
    font:400 .7rem/1.65 'Inter',sans-serif;
}

/* Shared section */
.gsc-services-section { margin-top:0; }
.gsc-section-heading {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:15px;
}
.gsc-section-heading--split { margin-bottom:17px; }
.gsc-section-kicker {
    margin:0;
    color:var(--gsc-ref-ink);
    font:700 .74rem/1.25 'Poppins',sans-serif;
    letter-spacing:.16em;
    text-transform:uppercase;
}
.gsc-section-kicker i {
    margin-right:8px;
    color:var(--gsc-ref-gold);
    font-size:.83em;
}
.gsc-section-subtitle {
    margin:5px 0 0;
    color:#727a74;
    font:italic 400 .69rem/1.5 'Inter',sans-serif;
}
.gsc-section-action {
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:7px 0;
    color:var(--gsc-ref-forest);
    font:700 .63rem 'Inter',sans-serif;
    text-decoration:none;
    white-space:nowrap;
}
.gsc-section-action i { color:var(--gsc-ref-gold); transition:transform .25s var(--gsc-ref-ease); }
.gsc-section-action:hover i { transform:translateX(4px); }

/* Featured */
.gsc-services-featured { margin-bottom:34px; }
.gsc-featured-controls { display:flex; gap:9px; }
.gsc-featured-control {
    width:31px;
    height:31px;
    border:1px solid rgba(207,162,74,.27);
    border-radius:50%;
    background:#fbf8f0;
    color:#b88931;
    display:grid;
    place-items:center;
    cursor:pointer;
    transition:all .25s ease;
}
.gsc-featured-control:hover {
    background:var(--gsc-ref-forest);
    border-color:var(--gsc-ref-forest);
    color:#fff;
}
.gsc-featured-track {
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:calc((100% - 32px)/3);
    gap:16px;
    overflow-x:auto;
    padding:2px 1px 8px;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
}
.gsc-featured-track::-webkit-scrollbar { display:none; }
.gsc-featured-card {
    min-width:0;
    overflow:hidden;
    border:1px solid rgba(18,61,45,.12);
    border-radius:var(--gsc-ref-radius);
    background:var(--gsc-ref-paper);
    cursor:pointer;
    scroll-snap-align:start;
    box-shadow:0 2px 6px rgba(18,61,45,.025);
    transition:transform .35s var(--gsc-ref-ease), box-shadow .35s ease, border-color .35s ease;
}
.gsc-featured-card:hover,
.gsc-featured-card:focus-visible {
    transform:translateY(-4px);
    border-color:rgba(18,61,45,.20);
    box-shadow:0 17px 34px rgba(18,61,45,.09);
}
.gsc-featured-card__image {
    position:relative;
    aspect-ratio: 1.95 / 1;
    overflow:hidden;
    background:#e9e5db;
}
.gsc-featured-card__image img,
.gsc-featured-card__image picture img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .65s var(--gsc-ref-ease);
}
.gsc-featured-card:hover .gsc-featured-card__image img { transform:scale(1.035); }
.gsc-service-badge {
    position:absolute;
    right:12px;
    top:12px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:7px 10px;
    border-radius:15px;
    background:rgba(13,48,36,.93);
    color:#f9f5e8;
    font:700 .53rem 'Poppins',sans-serif;
    letter-spacing:.05em;
    text-transform:uppercase;
    box-shadow:0 5px 14px rgba(13,48,36,.18);
}
.gsc-service-badge i { color:#dfb456; font-size:.58rem; }
.gsc-featured-card__body { padding:13px 15px 15px; }
.gsc-featured-card__meta {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:4px;
}
.gsc-featured-card__meta span {
    color:#5c786b;
    font:700 .53rem 'Poppins',sans-serif;
    letter-spacing:.12em;
    text-transform:uppercase;
}
.gsc-featured-card__meta span i { margin-right:5px; font-size:.6rem; }
.gsc-featured-card__meta b {
    color:#c18d2f;
    font:500 1.18rem/1 'Fraunces',Georgia,serif;
}
.gsc-featured-card h3,
.gsc-loan-card h3,
.gsc-other-item h3 {
    color:var(--gsc-ref-ink);
    font-family:'Fraunces',Georgia,serif;
    font-weight:500;
}
.gsc-featured-card h3 {
    margin:1px 0 5px;
    font-size:1.25rem;
    line-height:1.05;
    letter-spacing:-.02em;
}
.gsc-featured-card p {
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    min-height:36px;
    margin:0 0 10px;
    color:#6f7671;
    font:400 .68rem/1.5 'Inter',sans-serif;
}
.gsc-card-link {
    display:inline-flex;
    align-items:center;
    gap:9px;
    color:var(--gsc-ref-forest);
    font:700 .61rem 'Poppins',sans-serif;
}
.gsc-card-link i {
    color:#3e7861;
    transition:transform .25s var(--gsc-ref-ease);
}
.gsc-featured-card:hover .gsc-card-link i,
.gsc-loan-card:hover .gsc-card-link i { transform:translateX(4px); }

/* Loan grid */
.gsc-loans { margin-bottom:38px; }
.gsc-loan-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:15px;
}
.gsc-loan-card {
    min-width:0;
    overflow:hidden;
    border:1px solid rgba(18,61,45,.11);
    border-radius:var(--gsc-ref-radius);
    background:rgba(255,253,248,.94);
    cursor:pointer;
    box-shadow:0 1px 4px rgba(18,61,45,.025);
    transition:transform .35s var(--gsc-ref-ease), box-shadow .35s ease, border-color .35s ease;
}
.gsc-loan-card:hover,
.gsc-loan-card:focus-visible {
    transform:translateY(-3px);
    border-color:rgba(18,61,45,.19);
    box-shadow:0 14px 28px rgba(18,61,45,.075);
}
.gsc-loan-card__image {
    position:relative;
    aspect-ratio:1.75/1;
    overflow:hidden;
    background:#e9e5db;
}
.gsc-loan-card__image img,
.gsc-loan-card__image picture img {
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .6s var(--gsc-ref-ease);
}
.gsc-loan-card:hover .gsc-loan-card__image img { transform:scale(1.035); }
.gsc-loan-card__number {
    position:absolute;
    left:0;
    top:0;
    z-index:2;
    min-width:39px;
    height:33px;
    display:grid;
    place-items:center;
    padding:0 8px;
    background:#d19e34;
    color:#fffaf0;
    font:600 .66rem 'Poppins',sans-serif;
}
.gsc-loan-card__body { padding:12px 13px 14px; }
.gsc-loan-card h3 {
    margin:0 0 5px;
    font-size:1.04rem;
    line-height:1.08;
}
.gsc-loan-card p {
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
    min-height:43px;
    margin:0 0 12px;
    color:#737a75;
    font:400 .62rem/1.48 'Inter',sans-serif;
}
.gsc-loan-card .gsc-card-link { font-size:.57rem; }

/* Other services editorial list */
.gsc-other { margin-bottom:40px; }
.gsc-other-list {
    border-top:1px solid var(--gsc-ref-line);
}
.gsc-other-item {
    display:grid;
    grid-template-columns:34px 39px minmax(0,1fr) 25px;
    align-items:center;
    gap:11px;
    padding:14px 4px;
    border-bottom:1px solid var(--gsc-ref-line-soft);
    cursor:pointer;
    transition:padding .3s var(--gsc-ref-ease), background .25s ease;
}
.gsc-other-item:hover,
.gsc-other-item:focus-visible {
    padding-left:10px;
    padding-right:10px;
    background:rgba(243,238,228,.52);
}
.gsc-other-item__number {
    color:#bf8f37;
    font:600 .6rem 'Poppins',sans-serif;
}
.gsc-other-item__icon {
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border:1px solid rgba(18,61,45,.09);
    border-radius:50%;
    background:#faf7ef;
    color:var(--gsc-ref-forest);
    font-size:.71rem;
}
.gsc-other-item__copy h3 {
    margin:0 0 3px;
    font-size:1.03rem;
    line-height:1.05;
}
.gsc-other-item__copy p {
    margin:0;
    color:#737a75;
    font:400 .65rem/1.45 'Inter',sans-serif;
}
.gsc-other-item__arrow {
    color:#4c7b65;
    font-size:.68rem;
    transition:transform .25s var(--gsc-ref-ease);
}
.gsc-other-item:hover .gsc-other-item__arrow { transform:translateX(3px); }

/* Directory */
.gsc-services-directory-section { margin-top:8px; }
.gsc-directory-panel {
    position:relative;
    overflow:hidden;
    padding:27px 27px 18px;
    border:1px solid rgba(18,61,45,.11);
    border-radius:10px;
    background:#f6f1e7;
}
.gsc-directory-panel::after {
    content:'';
    position:absolute;
    right:-90px;
    top:-100px;
    width:240px;
    height:240px;
    border:1px solid rgba(207,162,74,.12);
    border-radius:50%;
    pointer-events:none;
}
.gsc-directory-panel__intro h2 {
    margin:7px 0 20px;
    color:var(--gsc-ref-forest);
    font:500 clamp(1.85rem,3vw,2.55rem)/1 'Fraunces',Georgia,serif;
    letter-spacing:-.035em;
}
.gsc-directory-panel__tools {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-bottom:17px;
}
.gsc-directory-search {
    width:min(100%,360px);
}
.gsc-directory-filters {
    display:flex;
    flex-wrap:wrap;
    gap:5px;
}
.gsc-directory-filters button {
    min-height:35px;
    border:1px solid rgba(18,61,45,.11);
    border-radius:5px;
    background:rgba(255,253,248,.74);
    color:#5e6962;
    padding:0 11px;
    font:600 .6rem 'Poppins',sans-serif;
    cursor:pointer;
    transition:all .22s ease;
}
.gsc-directory-filters button:hover { border-color:rgba(18,61,45,.25); color:var(--gsc-ref-forest); }
.gsc-directory-filters button.is-active {
    background:var(--gsc-ref-forest);
    border-color:var(--gsc-ref-forest);
    color:#fff;
}
.gsc-directory-meta {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding:0 1px 9px;
    border-bottom:1px solid var(--gsc-ref-line);
    color:#7a817c;
    font:500 .61rem 'Inter',sans-serif;
}
.gsc-directory-sort strong { color:var(--gsc-ref-ink); font-weight:700; }
.gsc-directory-list { display:block; }
.gsc-directory-row {
    width:100%;
    min-height:53px;
    display:grid;
    grid-template-columns:34px 34px minmax(0,1fr) 105px auto 20px;
    align-items:center;
    gap:9px;
    padding:7px 1px;
    border:0;
    border-bottom:1px solid var(--gsc-ref-line-soft);
    background:transparent;
    color:var(--gsc-ref-ink);
    text-align:left;
    cursor:pointer;
    transition:background .22s ease, padding .25s var(--gsc-ref-ease);
}
.gsc-directory-row:hover,
.gsc-directory-row:focus-visible {
    padding-left:7px;
    background:rgba(255,253,248,.7);
}
.gsc-directory-row.is-directory-hidden { display:none; }
.gsc-directory-row__number {
    color:#b98730;
    font:600 .58rem 'Poppins',sans-serif;
}
.gsc-directory-row__icon {
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    border-radius:6px;
    background:#eee9de;
    color:var(--gsc-ref-forest);
    font-size:.68rem;
}
.gsc-directory-row__name {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font:500 .9rem 'Fraunces',Georgia,serif;
}
.gsc-directory-row__category {
    color:#6f7872;
    font:600 .53rem 'Poppins',sans-serif;
    letter-spacing:.06em;
    text-transform:uppercase;
}
.gsc-directory-row__popular {
    padding:3px 7px;
    border:1px solid rgba(207,162,74,.38);
    border-radius:10px;
    color:#ad7b20;
    font:700 .48rem 'Poppins',sans-serif;
    text-transform:uppercase;
}
.gsc-directory-row__arrow { color:#4a7d66; font-size:.62rem; transition:transform .25s var(--gsc-ref-ease); }
.gsc-directory-row:hover .gsc-directory-row__arrow { transform:translateX(3px); }
.gsc-directory-empty {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    min-height:150px;
    color:#6e766f;
    text-align:center;
}
.gsc-directory-empty strong {
    color:var(--gsc-ref-ink);
    font:500 1.1rem 'Fraunces',Georgia,serif;
}
.gsc-directory-empty span { font:.65rem/1.4 'Inter',sans-serif; }
.is-hidden { display:none !important; }
.gsc-services-empty {
    padding:30px;
    border:1px dashed rgba(18,61,45,.14);
    color:#727a74;
    text-align:center;
    font-size:.75rem;
}

/* Existing CTA retained but brought into the same restrained system. */
.gsc-cta {
    margin-top:42px;
    border-radius:10px;
    padding:78px 34px 88px !important;
}
.gsc-cta__eyebrow { color:#d9b35a !important; }
.gsc-cta__title { font-size:clamp(2rem,4vw,3rem) !important; }
.gsc-cta__text { max-width:600px; font-size:.86rem !important; }

/* Modal — keep all PHP/application functionality but make the profile editorial
   and ensure the full form can be reached inside the viewport. */
.modal-overlay {
    position:fixed !important;
    inset:0 !important;
    z-index:9999 !important;
    display:none !important;
    align-items:center !important;
    justify-content:center !important;
    padding:20px !important;
    background:rgba(9,31,22,.68) !important;
    overflow:hidden !important;
}
.modal-overlay.active { display:flex !important; }
.modal-content {
    width:min(100%, 940px) !important;
    max-width:940px !important;
    max-height:92vh !important;
    height:auto !important;
    overflow:hidden !important;
    display:flex !important;
    flex-direction:column !important;
    border:1px solid rgba(207,162,74,.23) !important;
    border-radius:11px !important;
    background:#fbf8f0 !important;
    box-shadow:0 28px 70px rgba(4,22,15,.32) !important;
}
.modal-cover {
    position:relative !important;
    flex:0 0 auto !important;
    height:230px !important;
    overflow:hidden !important;
    background:#e8e4da !important;
}
.modal-cover img,
.modal-cover picture img {
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    display:block !important;
}
.modal-header {
    position:relative !important;
    flex:0 0 auto !important;
    display:flex !important;
    align-items:center !important;
    gap:14px !important;
    padding:16px 62px 16px 20px !important;
    background:var(--gsc-ref-forest) !important;
    color:#fff !important;
}
.modal-icon-wrapper {
    width:40px !important;
    height:40px !important;
    flex:0 0 40px !important;
    display:grid !important;
    place-items:center !important;
    border:1px solid rgba(207,162,74,.34) !important;
    border-radius:7px !important;
    background:rgba(255,255,255,.07) !important;
    color:#e1bc67 !important;
}
.modal-title-group { min-width:0 !important; }
.modal-title {
    margin:0 0 3px !important;
    color:#fff !important;
    font:500 clamp(1.4rem,2.5vw,2rem)/1.05 'Fraunces',Georgia,serif !important;
}
.modal-title-group > span {
    color:rgba(255,255,255,.68) !important;
    font:.55rem/1.3 'Poppins',sans-serif !important;
    letter-spacing:.1em !important;
    text-transform:uppercase !important;
}
.modal-close {
    position:absolute !important;
    top:12px !important;
    right:12px !important;
    width:38px !important;
    height:38px !important;
    display:inline-flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    gap:6px !important;
    padding:0 !important;
    border:1px solid rgba(255,255,255,.18) !important;
    border-radius:50% !important;
    background:rgba(255,255,255,.07) !important;
    color:#fff !important;
    cursor:pointer !important;
    white-space:nowrap !important;
    writing-mode:horizontal-tb !important;
}
.modal-close .modal-close-label { display:none !important; }
.modal-body {
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding:22px 24px 26px !important;
    background:#fbf8f0 !important;
    overscroll-behavior:contain;
}
.modal-body::-webkit-scrollbar { width:7px; }
.modal-body::-webkit-scrollbar-thumb { background:rgba(18,61,45,.20); border-radius:8px; }
.gs-modal-gallery {
    display:flex !important;
    gap:7px !important;
    overflow-x:auto !important;
    margin:0 0 20px !important;
    padding:1px 0 3px !important;
}
.gs-modal-gallery button {
    width:66px !important;
    height:48px !important;
    flex:0 0 66px !important;
    padding:0 !important;
    overflow:hidden !important;
    border:1px solid rgba(18,61,45,.12) !important;
    border-radius:5px !important;
    background:#eee9de !important;
}
.gs-modal-gallery button.is-active { border-color:var(--gsc-ref-gold) !important; }
.gs-modal-gallery img { width:100% !important; height:100% !important; object-fit:cover !important; }
.modal-section {
    margin:0 0 22px !important;
    padding:0 0 20px !important;
    border-bottom:1px solid var(--gsc-ref-line-soft) !important;
}
.modal-section-title {
    margin:0 0 9px !important;
    color:var(--gsc-ref-ink) !important;
    font:700 .66rem/1.3 'Poppins',sans-serif !important;
    letter-spacing:.14em !important;
    text-transform:uppercase !important;
}
.modal-section-title i { color:var(--gsc-ref-gold) !important; margin-right:6px !important; }
.modal-text {
    color:#6d746f !important;
    font:.78rem/1.7 'Inter',sans-serif !important;
}
.requirements-grid-modal { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important; }
.req-box {
    border:1px solid var(--gsc-ref-line-soft) !important;
    border-radius:7px !important;
    background:#fffdf8 !important;
    padding:13px !important;
}
.req-box h5 {
    margin:0 0 8px !important;
    color:var(--gsc-ref-forest) !important;
    font:600 .68rem 'Poppins',sans-serif !important;
}
.req-list {
    margin:0 !important;
    padding-left:17px !important;
    color:#6f7771 !important;
    font:.67rem/1.65 'Inter',sans-serif !important;
}
.modal-cta {
    margin-top:4px !important;
    padding:18px !important;
    border:1px solid rgba(207,162,74,.23) !important;
    background:#f2ecde !important;
    border-radius:7px !important;
}
.modal-cta h4 {
    margin:0 0 5px !important;
    color:var(--gsc-ref-ink) !important;
    font:500 1.18rem 'Fraunces',Georgia,serif !important;
}
.modal-cta > p {
    margin:0 0 13px !important;
    color:#737a74 !important;
    font:.68rem/1.5 'Inter',sans-serif !important;
}
.btn-apply-now,
.modal-cta-btn {
    min-height:43px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    padding:0 16px !important;
    border-radius:4px !important;
    font:700 .62rem 'Poppins',sans-serif !important;
    text-decoration:none !important;
    cursor:pointer !important;
}
.btn-apply-now {
    background:var(--gsc-ref-forest) !important;
    color:#fff !important;
    border:1px solid var(--gsc-ref-forest) !important;
}
.modal-cta-btn {
    background:#fffdf8 !important;
    color:var(--gsc-ref-forest) !important;
    border:1px solid rgba(18,61,45,.15) !important;
}
.apply-actions { display:flex; flex-wrap:wrap; gap:9px; }
.term-selection-wrap,
.apply-form-wrap { margin-top:15px; }
.apply-form-wrap { max-height:none !important; overflow:visible !important; }
.apply-section {
    border:1px solid var(--gsc-ref-line-soft) !important;
    border-radius:7px !important;
    background:#fffdf8 !important;
    padding:15px !important;
}
.apply-section-head { display:flex !important; gap:10px !important; align-items:flex-start !important; }
.apply-section-num {
    flex:0 0 27px !important;
    width:27px !important;
    height:27px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:50% !important;
    background:#eee8db !important;
    color:var(--gsc-ref-forest) !important;
    font:700 .6rem 'Poppins',sans-serif !important;
}
.apply-section-title {
    margin:0 !important;
    color:var(--gsc-ref-ink) !important;
    font:700 .67rem 'Poppins',sans-serif !important;
}
.apply-section-hint {
    margin:3px 0 0 !important;
    color:#7a817c !important;
    font:.61rem/1.5 'Inter',sans-serif !important;
}
.apply-two-col { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px !important; }
.apply-field { margin-top:12px !important; }
.apply-field label { display:block !important; margin-bottom:5px !important; color:#526159 !important; font:600 .61rem 'Poppins',sans-serif !important; }
.apply-field input,
.apply-field textarea,
.apply-field select {
    width:100% !important;
    min-height:41px !important;
    border:1px solid rgba(18,61,45,.13) !important;
    border-radius:4px !important;
    background:#fbf8f0 !important;
    color:var(--gsc-ref-ink) !important;
    padding:9px 10px !important;
    font:.68rem 'Inter',sans-serif !important;
}
.apply-field textarea { min-height:86px !important; resize:vertical !important; }
.apply-field .hint { color:#7a817c !important; font:.57rem/1.45 'Inter',sans-serif !important; }
.apply-file-drop {
    border:1px dashed rgba(18,61,45,.23) !important;
    border-radius:6px !important;
    background:#faf7ef !important;
    padding:20px !important;
}
.apply-submit-row { margin-top:15px !important; }
.apply-submit-btn {
    min-height:44px !important;
    padding:0 18px !important;
    border-radius:4px !important;
    background:var(--gsc-ref-forest) !important;
    color:#fff !important;
    font:700 .64rem 'Poppins',sans-serif !important;
}
.selected-term-summary { margin-bottom:12px !important; }
.notice-overlay { z-index:10050 !important; }
.notice-dialog {
    border:1px solid rgba(207,162,74,.25) !important;
    border-radius:10px !important;
    background:#fbf8f0 !important;
}
.notice-close { border-radius:50% !important; }
.notice-btn-primary { background:var(--gsc-ref-forest) !important; border-radius:4px !important; }
.notice-btn-secondary { border-radius:4px !important; }

/* Focus */
.gsc-services-sidebar button:focus-visible,
.gsc-services-main button:focus-visible,
.gsc-services-main a:focus-visible,
.gsc-featured-card:focus-visible,
.gsc-loan-card:focus-visible,
.gsc-other-item:focus-visible {
    outline:2px solid rgba(207,162,74,.9);
    outline-offset:3px;
}
.gsc-services-sidebar__link:focus-visible { background:#f5f0e6; }

/* Responsive */
@media (max-width: 1320px) {
    .gsc-services-layout {
        grid-template-columns:295px minmax(0,1fr);
        gap:30px;
    }
    .gsc-loan-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width: 1100px) {
    .gsc-services-layout {
        width:min(calc(100% - 38px), 1000px);
        grid-template-columns:270px minmax(0,1fr);
        gap:24px;
    }
    .gsc-featured-track { grid-auto-columns:calc((100% - 16px)/2); }
    .gsc-directory-row { grid-template-columns:31px 31px minmax(0,1fr) 90px auto 18px; }
}
@media (max-width: 980px) {
    .gsc-services-layout {
        width:min(calc(100% - 32px), 760px);
        display:block;
        padding-top:16px;
    }
    .gsc-services-mobile-filter {
        position:sticky;
        top:72px;
        z-index:50;
        width:100%;
        min-height:46px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding:0 15px;
        margin:0 0 14px;
        border:1px solid rgba(18,61,45,.12);
        border-radius:6px;
        background:#fffdf8;
        color:var(--gsc-ref-forest);
        box-shadow:0 6px 18px rgba(18,61,45,.06);
        font:700 .65rem 'Poppins',sans-serif;
        letter-spacing:.05em;
        text-transform:uppercase;
        cursor:pointer;
    }
    .gsc-services-mobile-filter i:last-child { color:var(--gsc-ref-gold); }
    .gsc-services-sidebar {
        position:fixed;
        top:0;
        left:0;
        bottom:0;
        width:min(355px,92vw);
        max-height:none;
        overflow-y:auto;
        transform:translateX(-105%);
        transition:transform .38s var(--gsc-ref-ease);
        border-radius:0 11px 11px 0;
        padding:23px 15px 22px;
        box-shadow:20px 0 50px rgba(8,29,20,.16);
        background:#fffdf8;
    }
    .gsc-services-sidebar.is-mobile-open { transform:translateX(0); }
    .gsc-services-intro { padding-top:8px; }
}
@media (max-width: 760px) {
    .gsc-services-layout { width:min(calc(100% - 28px), 650px); }
    .gsc-services-intro__row { display:block; }
    .gsc-services-intro__institution { margin-top:19px; width:auto; max-width:280px; }
    .gsc-featured-track { grid-auto-columns:84%; gap:12px; }
    .gsc-loan-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
    .gsc-directory-panel { padding:22px 18px 15px; }
    .gsc-directory-panel__tools { display:block; }
    .gsc-directory-search { width:100%; margin-bottom:10px; }
    .gsc-directory-filters { display:grid; grid-template-columns:repeat(3,1fr); }
    .gsc-directory-filters button { padding:0 5px; }
    .gsc-directory-row {
        grid-template-columns:29px 31px minmax(0,1fr) 18px;
        gap:8px;
    }
    .gsc-directory-row__category,
    .gsc-directory-row__popular { display:none; }
    .gsc-directory-meta { font-size:.58rem; }
    .requirements-grid-modal { grid-template-columns:1fr !important; }
}
@media (max-width: 560px) {
    .gsc-services-layout { width:calc(100% - 24px); padding-bottom:55px; }
    .gsc-services-intro h1 { font-size:clamp(3.2rem,17vw,4.2rem); }
    .gsc-services-intro { margin-bottom:27px; }
    .gsc-section-heading--split { align-items:flex-start; }
    .gsc-section-action { display:none; }
    .gsc-loan-grid { grid-template-columns:1fr; }
    .gsc-loan-card__image { aspect-ratio:1.72/1; }
    .gsc-other-item {
        grid-template-columns:27px 35px minmax(0,1fr) 18px;
        gap:8px;
        padding:13px 2px;
    }
    .gsc-other-item__number { font-size:.53rem; }
    .gsc-other-item__copy h3 { font-size:.95rem; }
    .gsc-other-item__copy p { font-size:.59rem; }
    .gsc-directory-panel__intro h2 { font-size:2rem; }
    .gsc-directory-filters { grid-template-columns:1fr; }
    .gsc-directory-filters button { width:100%; }
    .gsc-directory-row__name { font-size:.78rem; }
    .modal-overlay { padding:9px !important; }
    .modal-content { max-height:94vh !important; border-radius:8px !important; }
    .modal-cover { height:165px !important; }
    .modal-header { padding:13px 53px 13px 13px !important; }
    .modal-icon-wrapper { width:34px !important; height:34px !important; flex-basis:34px !important; }
    .modal-body { padding:17px 14px 20px !important; }
    .modal-title { font-size:1.35rem !important; }
    .apply-two-col { grid-template-columns:1fr !important; }
    .modal-cta { padding:14px !important; }
    .apply-actions { align-items:stretch; }
    .btn-apply-now, .modal-cta-btn { flex:1 1 100%; }
}
@media (max-width: 390px) {
    .gsc-services-layout { width:calc(100% - 20px); }
    .gsc-services-sidebar { width:92vw; }
    .gsc-services-intro h1 { font-size:3.15rem; }
    .gsc-featured-track { grid-auto-columns:91%; }
}
@media (prefers-reduced-motion: reduce) {
    .gsc-featured-card,
    .gsc-loan-card,
    .gsc-other-item,
    .gsc-services-sidebar__icon,
    .gsc-card-link i,
    .gsc-directory-row__arrow { transition:none !important; }
    .gsc-featured-track { scroll-behavior:auto !important; }
}

/* ==========================================================================
   Disable the obsolete full-page hero rules from earlier revisions. They are
   harmless when the old markup is absent, but this also protects against
   header/helper markup reintroducing the classes later.
   ========================================================================== */
.gsc-services-page ~ .services-hero,
body > .services-hero,
#hp-main-content.services-hero { display:none !important; }

/* ==========================================================================
   GSC-TEMPC SERVICES — REFERENCE MATCH PASS
   PRESENTATION ONLY.
   Existing PHP, modal/apply logic, Hero and closing CTA are intentionally
   left alone. This layer reshapes only the Services browsing presentation.
   ========================================================================== */

:root {
    --gsc-ref-ivory:#faf8f1;
    --gsc-ref-paper:#fffdf8;
    --gsc-ref-cream:#f3eee2;
    --gsc-ref-forest:#123d2d;
    --gsc-ref-green:#2b7a50;
    --gsc-ref-gold:#d8a33a;
    --gsc-ref-ink:#173a2c;
    --gsc-ref-line:rgba(18,61,45,.13);
}

/* --------------------------------------------------------------------------
   BROWSE SERVICES SIDEBAR
   -------------------------------------------------------------------------- */
.gsc-svc-directory{
    float:left!important;
    position:sticky!important;
    top:88px!important;
    z-index:20;
    width:324px!important;
    max-width:324px!important;
    margin:10px 0 44px 26px!important;
    padding:24px 14px 22px!important;
    box-sizing:border-box!important;
    background:rgba(255,253,248,.82)!important;
    border:1px solid rgba(18,61,45,.10)!important;
    border-radius:12px!important;
    box-shadow:0 10px 30px rgba(18,61,45,.045)!important;
}
.gsc-svc-directory__header{
    display:flex!important;
    align-items:center!important;
    gap:12px!important;
    padding:0 0 18px!important;
}
.gsc-svc-directory__header-line{
    width:28px!important;
    height:2px!important;
    background:var(--gsc-ref-gold)!important;
    flex:0 0 auto!important;
}
.gsc-svc-directory__header-text{
    color:var(--gsc-ref-ink)!important;
    font:700 .70rem/1 'Poppins',sans-serif!important;
    letter-spacing:.19em!important;
    text-transform:uppercase!important;
}
.gsc-svc-directory__search{
    height:44px!important;
    border:1px solid rgba(18,61,45,.13)!important;
    border-radius:22px!important;
    background:var(--gsc-ref-cream)!important;
    box-shadow:none!important;
}
.gsc-svc-directory__search input{
    color:var(--gsc-ref-ink)!important;
    font:500 .78rem/1 'Inter',sans-serif!important;
}
.gsc-svc-directory__search input::placeholder{color:#8b928d!important}
.gsc-svc-directory__search>i{color:#8a928c!important}
.gsc-svc-directory__search-clear{color:#a0a69f!important}
.gsc-svc-directory__tabs{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:6px!important;
    margin:14px 0 17px!important;
}
.gsc-svc-directory__tab{
    min-height:38px!important;
    padding:0 9px!important;
    border:1px solid rgba(18,61,45,.10)!important;
    border-radius:7px!important;
    background:transparent!important;
    color:var(--gsc-ref-ink)!important;
    font:700 .67rem/1 'Poppins',sans-serif!important;
}
.gsc-svc-directory__tab.is-active,
.gsc-svc-directory__tab[aria-selected=true]{
    background:var(--gsc-ref-forest)!important;
    border-color:var(--gsc-ref-forest)!important;
    color:#fffdf8!important;
}
.gsc-svc-directory__tab-count{
    min-width:20px!important;
    height:20px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:50%!important;
    background:rgba(216,163,58,.18)!important;
    color:var(--gsc-ref-gold)!important;
    font-size:.62rem!important;
}
.gsc-svc-directory__list-wrap{border-top:0!important}
.gsc-svc-directory__list{
    margin:0!important;
    padding:0!important;
    counter-reset:gscSvcItem!important;
}
.gsc-svc-directory__item{border-bottom:1px solid rgba(18,61,45,.10)!important}
.gsc-svc-directory__item:last-child{border-bottom:0!important}
.gsc-svc-directory__link{
    position:relative!important;
    display:grid!important;
    grid-template-columns:28px 34px minmax(0,1fr) auto 18px!important;
    align-items:center!important;
    column-gap:7px!important;
    width:100%!important;
    min-height:47px!important;
    padding:5px 1px!important;
    border:0!important;
    background:transparent!important;
    color:var(--gsc-ref-ink)!important;
    text-align:left!important;
}
.gsc-svc-directory__link::before{
    content:counter(gscSvcItem,decimal-leading-zero)!important;
    counter-increment:gscSvcItem!important;
    color:var(--gsc-ref-gold)!important;
    font:600 .60rem/1 'Poppins',sans-serif!important;
}
.gsc-svc-directory__icon{
    width:32px!important;
    height:32px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:8px!important;
    background:rgba(243,238,226,.78)!important;
    color:var(--gsc-ref-forest)!important;
    font-size:.76rem!important;
}
.gsc-svc-directory__name{
    min-width:0!important;
    color:var(--gsc-ref-ink)!important;
    font:500 .84rem/1.25 'Fraunces','Playfair Display',Georgia,serif!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
}
.gsc-svc-directory__badge{
    padding:4px 7px!important;
    border:1px solid rgba(216,163,58,.38)!important;
    border-radius:10px!important;
    background:transparent!important;
    color:#bd8520!important;
    font:700 .49rem/1 'Poppins',sans-serif!important;
    letter-spacing:.04em!important;
    text-transform:uppercase!important;
}
.gsc-svc-directory__arrow{
    color:var(--gsc-ref-green)!important;
    font-size:.68rem!important;
    transition:transform .25s ease!important;
}
.gsc-svc-directory__link:hover .gsc-svc-directory__arrow{
    transform:translateX(3px)!important;
}

/* The sidebar tabs replace the older horizontal strip visually. */
.gs-nav-strip{display:none!important}

/* --------------------------------------------------------------------------
   MAIN SERVICES COLUMN
   -------------------------------------------------------------------------- */
.gs-featured-section,
.category-section{
    width:calc(100% - 376px)!important;
    max-width:none!important;
    margin-left:350px!important;
    margin-right:26px!important;
    box-sizing:border-box!important;
    background:var(--gsc-ref-ivory)!important;
}

/* --------------------------------------------------------------------------
   FEATURED SERVICES
   -------------------------------------------------------------------------- */
.gs-featured-section{padding:28px 0 12px!important}
.gs-featured-header{margin:0 0 18px!important}
.gs-featured-header h2{
    margin:0!important;
    color:var(--gsc-ref-ink)!important;
    font-family:'Fraunces','Playfair Display',Georgia,serif!important;
    font-size:clamp(1.55rem,2.1vw,2.05rem)!important;
    line-height:1.05!important;
    letter-spacing:.01em!important;
    text-transform:none!important;
}
.gs-featured-header h2 i{
    color:var(--gsc-ref-gold)!important;
    font-size:.65em!important;
    margin-right:8px!important;
}
.gs-featured-header p{display:none!important}
.gs-featured-header::after{
    width:41px!important;
    height:2px!important;
    margin-top:14px!important;
    background:var(--gsc-ref-gold)!important;
}
.gs-featured-grid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:18px!important;
    margin:0!important;
}
.service-card-modern{
    background:var(--gsc-ref-paper)!important;
    border:1px solid rgba(18,61,45,.13)!important;
    border-radius:9px!important;
    box-shadow:0 1px 2px rgba(18,61,45,.03)!important;
    transform:none!important;
}
.service-card-modern:hover{
    border-color:rgba(216,163,58,.34)!important;
    box-shadow:0 12px 26px rgba(18,61,45,.08)!important;
    transform:translateY(-2px)!important;
}
.service-card-image{
    aspect-ratio:16/8.9!important;
    background:var(--gsc-ref-cream)!important;
}
.service-card-modern:hover .service-card-image img{transform:scale(1.025)!important}
.featured-badge{
    top:11px!important;
    right:11px!important;
    min-height:30px!important;
    padding:0 11px!important;
    border-radius:15px!important;
    background:rgba(18,61,45,.94)!important;
    color:#fffdf8!important;
    font-size:.55rem!important;
    letter-spacing:.05em!important;
}
.featured-badge i{color:var(--gsc-ref-gold)!important}
.service-card-content{
    padding:13px 15px 14px!important;
    gap:2px!important;
}
.service-card-eyebrow{
    margin-bottom:1px!important;
    color:#527665!important;
    font-size:.55rem!important;
    letter-spacing:.12em!important;
}
.service-card-eyebrow i{color:var(--gsc-ref-green)!important}
.service-name{
    color:var(--gsc-ref-ink)!important;
    font-family:'Fraunces','Playfair Display',Georgia,serif!important;
    font-size:1.06rem!important;
    font-weight:500!important;
    line-height:1.15!important;
    letter-spacing:-.01em!important;
    margin:1px 0 4px!important;
}
.service-name::after{display:none!important}
.service-description{
    color:#68716b!important;
    font-size:.73rem!important;
    line-height:1.48!important;
    margin:0 0 8px!important;
    -webkit-line-clamp:2!important;
}
.view-details-btn{
    padding-top:8px!important;
    border-top:0!important;
    min-height:20px!important;
    color:var(--gsc-ref-forest)!important;
    font-size:.63rem!important;
    font-weight:700!important;
}
.view-details-btn i{color:var(--gsc-ref-green)!important}

.gs-featured-grid{counter-reset:featuredSvc!important}
.gs-featured-grid .service-card-modern{counter-increment:featuredSvc!important}
.gs-featured-grid .service-card-content{position:relative!important}
.gs-featured-grid .service-card-content::after{
    content:counter(featuredSvc,decimal-leading-zero)!important;
    position:absolute!important;
    right:15px!important;
    top:15px!important;
    color:var(--gsc-ref-gold)!important;
    font:500 1.12rem/1 'Fraunces',Georgia,serif!important;
}

/* --------------------------------------------------------------------------
   LOAN SERVICES
   -------------------------------------------------------------------------- */
#loan-services-section{padding:22px 0 44px!important}
#loan-services-section .category-header{
    max-width:none!important;
    margin:0 0 18px!important;
    display:grid!important;
    grid-template-columns:1fr auto!important;
    grid-template-areas:'title link' 'sub link'!important;
    align-items:end!important;
    row-gap:3px!important;
}
#loan-services-section .category-badge{display:none!important}
#loan-services-section .category-title{
    grid-area:title!important;
    margin:0!important;
    color:var(--gsc-ref-ink)!important;
    font-family:'Fraunces','Playfair Display',Georgia,serif!important;
    font-size:clamp(1.28rem,1.8vw,1.7rem)!important;
    line-height:1.1!important;
    letter-spacing:.03em!important;
}
#loan-services-section .category-title i{
    color:var(--gsc-ref-forest)!important;
    font-size:.72em!important;
}
#loan-services-section .category-subtitle{
    grid-area:sub!important;
    margin:0!important;
    color:#7a817b!important;
    font-family:'Fraunces','Playfair Display',Georgia,serif!important;
    font-style:italic!important;
    font-size:.72rem!important;
    line-height:1.35!important;
}
#loan-services-section .category-header::after{
    content:'View all loan services  →'!important;
    grid-area:link!important;
    align-self:center!important;
    color:var(--gsc-ref-ink)!important;
    font:600 .62rem/1 'Poppins',sans-serif!important;
    white-space:nowrap!important;
}
#loan-services-section .services-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:18px!important;
}
#loan-services-section .service-card-image{aspect-ratio:16/8.3!important}
#loan-services-section .service-card-content{padding:12px 13px 13px!important}
#loan-services-section .service-name{font-size:.94rem!important}
#loan-services-section .service-description{font-size:.64rem!important;line-height:1.45!important}
#loan-services-section .view-details-btn{font-size:.58rem!important}
#loan-services-section .services-grid{counter-reset:loanSvc!important}
#loan-services-section .services-grid .service-card-modern{
    counter-increment:loanSvc!important;
    position:relative!important;
}
#loan-services-section .services-grid .service-card-modern::before{
    content:counter(loanSvc,decimal-leading-zero)!important;
    position:absolute!important;
    top:0!important;
    left:0!important;
    z-index:4!important;
    width:39px!important;
    height:30px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    background:var(--gsc-ref-gold)!important;
    color:#fffdf8!important;
    font:700 .60rem/1 'Poppins',sans-serif!important;
}

/* --------------------------------------------------------------------------
   OTHER SERVICES
   -------------------------------------------------------------------------- */
#other-services-section{padding:34px 0 54px!important}
#other-services-section .category-badge{display:none!important}
#other-services-section .category-header{max-width:none!important;margin:0 0 20px!important}
#other-services-section .category-title{
    color:var(--gsc-ref-ink)!important;
    font-family:'Fraunces','Playfair Display',Georgia,serif!important;
}
#other-services-section .services-grid{grid-template-columns:1fr!important;gap:0!important}
#other-services-section .service-card-modern{
    display:grid!important;
    grid-template-columns:42px minmax(0,1fr)!important;
    column-gap:14px!important;
    align-items:start!important;
    padding:15px 0!important;
    border:0!important;
    border-top:1px solid var(--gsc-ref-line)!important;
    border-radius:0!important;
    box-shadow:none!important;
    background:transparent!important;
}
#other-services-section .service-card-modern:last-child{border-bottom:1px solid var(--gsc-ref-line)!important}
#other-services-section .service-card-image{
    grid-column:1!important;
    grid-row:1!important;
    width:42px!important;
    height:42px!important;
    aspect-ratio:1!important;
    border-radius:50%!important;
}
#other-services-section .service-card-image img{display:none!important}
#other-services-section .service-card-content{
    grid-column:2!important;
    grid-row:1!important;
    padding:0!important;
}
#other-services-section .service-card-eyebrow{font-size:.52rem!important}
#other-services-section .service-name{font-size:1rem!important;margin-top:2px!important}
#other-services-section .service-description{font-size:.70rem!important;max-width:620px!important}
#other-services-section .view-details-btn,
#other-services-section .featured-badge{display:none!important}

/* Keep the existing closing CTA full width and unaffected. */
.gsc-cta{clear:both!important}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width:1180px) and (min-width:769px){
    .gsc-svc-directory{
        width:270px!important;
        max-width:270px!important;
        margin-left:18px!important;
    }
    .gs-featured-section,.category-section{
        width:calc(100% - 310px)!important;
        margin-left:294px!important;
        margin-right:18px!important;
    }
    .gs-featured-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
    #loan-services-section .services-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media (max-width:768px){
    .gsc-svc-directory{
        float:none!important;
        position:relative!important;
        top:auto!important;
        width:calc(100% - 32px)!important;
        max-width:none!important;
        margin:16px!important;
        padding:18px 14px!important;
    }
    .gsc-svc-directory__list-wrap{max-height:330px;overflow-y:auto}
    .gs-featured-section,.category-section{
        width:calc(100% - 32px)!important;
        margin-left:16px!important;
        margin-right:16px!important;
    }
    .gs-featured-section{padding-top:20px!important}
    .gs-featured-grid{grid-template-columns:1fr!important;gap:14px!important}
    #loan-services-section .category-header{display:block!important}
    #loan-services-section .category-title{margin-bottom:5px!important}
    #loan-services-section .category-header::after{
        display:block!important;
        margin-top:10px!important;
    }
    #loan-services-section .services-grid{
        grid-template-columns:1fr!important;
        gap:14px!important;
    }
    #loan-services-section .service-card-image{aspect-ratio:16/9!important}
    #loan-services-section .service-name{font-size:1rem!important}
    #loan-services-section .service-description{font-size:.72rem!important}
}
@media (max-width:480px){
    .gsc-svc-directory{width:calc(100% - 20px)!important;margin:10px!important}
    .gs-featured-section,.category-section{
        width:calc(100% - 20px)!important;
        margin-left:10px!important;
        margin-right:10px!important;
    }
    .gsc-svc-directory__link{
        grid-template-columns:24px 32px minmax(0,1fr) auto 16px!important;
    }
    .gsc-svc-directory__badge{display:none!important}
}
@media (prefers-reduced-motion:reduce){
    .service-card-modern,.service-card-image img,.gsc-svc-directory__arrow{
        transition:none!important;
    }
}


/* ==========================================================================
   FINAL REFERENCE-MATCH V2
   - Give the left Browse Services panel breathing room from the main column.
   - Keep the desktop composition large and editorial instead of edge-to-edge.
   - Restore Other Services to the same photography-first card language as
     Loan Services. Existing PHP/image rendering remains untouched.
   ========================================================================== */

/* --------------------------------------------------------------------------
   DESKTOP COMPOSITION — SIDEBAR + MAIN CONTENT
   -------------------------------------------------------------------------- */
@media (min-width:1181px){
    .gsc-svc-directory{
        float:left!important;
        width:324px!important;
        max-width:324px!important;
        margin-left:26px!important;
        margin-right:0!important;
    }

    .gs-featured-section,
    .category-section{
        width:min(1100px, calc(100% - 416px))!important;
        max-width:1100px!important;
        margin-left:390px!important;
        margin-right:0!important;
        box-sizing:border-box!important;
    }

    .gs-featured-section{
        padding-top:28px!important;
    }
}

/* --------------------------------------------------------------------------
   MID DESKTOP / TABLET — preserve a real gap instead of touching columns
   -------------------------------------------------------------------------- */
@media (max-width:1180px) and (min-width:769px){
    .gsc-svc-directory{
        width:270px!important;
        max-width:270px!important;
        margin-left:18px!important;
        margin-right:0!important;
    }

    .gs-featured-section,
    .category-section{
        width:calc(100% - 328px)!important;
        max-width:none!important;
        margin-left:312px!important;
        margin-right:16px!important;
    }

    .gs-featured-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
    }

    #loan-services-section .services-grid,
    #other-services-section .services-grid{
        grid-template-columns:repeat(3,minmax(0,1fr))!important;
    }
}

/* --------------------------------------------------------------------------
   OTHER SERVICES — SAME CARD LANGUAGE AS LOAN SERVICES
   -------------------------------------------------------------------------- */
#other-services-section{
    padding:22px 0 54px!important;
}

#other-services-section .category-badge{
    display:none!important;
}

#other-services-section .category-header{
    max-width:none!important;
    margin:0 0 18px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-areas:
        'title'
        'sub'!important;
    align-items:end!important;
    row-gap:4px!important;
}

#other-services-section .category-title{
    grid-area:title!important;
    margin:0!important;
    color:var(--gsc-ref-ink)!important;
    font-family:'Fraunces','Playfair Display',Georgia,serif!important;
    font-size:clamp(1.28rem,1.8vw,1.7rem)!important;
    line-height:1.1!important;
    letter-spacing:.03em!important;
}

#other-services-section .category-title i{
    color:var(--gsc-ref-forest)!important;
    font-size:.72em!important;
}

#other-services-section .category-subtitle{
    grid-area:sub!important;
    margin:0!important;
    color:#7a817b!important;
    font-family:'Fraunces','Playfair Display',Georgia,serif!important;
    font-style:italic!important;
    font-size:.72rem!important;
    line-height:1.35!important;
}

#other-services-section .services-grid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:18px!important;
}

#other-services-section .service-card-modern{
    display:flex!important;
    flex-direction:column!important;
    padding:0!important;
    background:var(--gsc-ref-paper)!important;
    border:1px solid rgba(18,61,45,.13)!important;
    border-radius:9px!important;
    box-shadow:0 1px 2px rgba(18,61,45,.03)!important;
    overflow:hidden!important;
}

#other-services-section .service-card-modern:hover{
    border-color:rgba(216,163,58,.34)!important;
    box-shadow:0 12px 26px rgba(18,61,45,.08)!important;
    transform:translateY(-2px)!important;
}

/* Real service photo/fallback — never hide it. */
#other-services-section .service-card-image{
    display:block!important;
    position:relative!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:16/8.3!important;
    border-radius:0!important;
    overflow:hidden!important;
    background:var(--gsc-ref-cream)!important;
    grid-column:auto!important;
    grid-row:auto!important;
}

#other-services-section .service-card-image img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
}

#other-services-section .service-card-content{
    display:flex!important;
    flex-direction:column!important;
    grid-column:auto!important;
    grid-row:auto!important;
    padding:12px 13px 13px!important;
    gap:2px!important;
}

#other-services-section .service-card-eyebrow{
    margin-bottom:1px!important;
    color:#527665!important;
    font-size:.55rem!important;
    letter-spacing:.12em!important;
}

#other-services-section .service-card-eyebrow i{
    color:var(--gsc-ref-green)!important;
}

#other-services-section .service-name{
    color:var(--gsc-ref-ink)!important;
    font-family:'Fraunces','Playfair Display',Georgia,serif!important;
    font-size:.94rem!important;
    font-weight:500!important;
    line-height:1.15!important;
    letter-spacing:-.01em!important;
    margin:1px 0 4px!important;
}

#other-services-section .service-description{
    color:#68716b!important;
    font-size:.64rem!important;
    line-height:1.45!important;
    margin:0 0 8px!important;
    -webkit-line-clamp:2!important;
}

#other-services-section .view-details-btn{
    display:inline-flex!important;
    align-items:center!important;
    gap:8px!important;
    padding-top:8px!important;
    border-top:0!important;
    min-height:20px!important;
    color:var(--gsc-ref-forest)!important;
    font-size:.58rem!important;
    font-weight:700!important;
}

#other-services-section .view-details-btn i{
    color:var(--gsc-ref-green)!important;
}

#other-services-section .featured-badge{
    top:11px!important;
    right:11px!important;
    min-height:30px!important;
    padding:0 11px!important;
    border-radius:15px!important;
    background:rgba(18,61,45,.94)!important;
    color:#fffdf8!important;
    font-size:.55rem!important;
    letter-spacing:.05em!important;
}

#other-services-section .featured-badge i{
    color:var(--gsc-ref-gold)!important;
}

/* Editorial number, matching the Loan Services cards. */
#other-services-section .services-grid{
    counter-reset:otherSvc!important;
}

#other-services-section .services-grid .service-card-modern{
    counter-increment:otherSvc!important;
    position:relative!important;
}

#other-services-section .services-grid .service-card-modern::before{
    content:counter(otherSvc,decimal-leading-zero)!important;
    position:absolute!important;
    top:0!important;
    left:0!important;
    z-index:4!important;
    width:39px!important;
    height:30px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    background:var(--gsc-ref-gold)!important;
    color:#fffdf8!important;
    font:700 .60rem/1 'Poppins',sans-serif!important;
}

/* --------------------------------------------------------------------------
   MOBILE — one-column photography cards, no overflow
   -------------------------------------------------------------------------- */
@media (max-width:768px){
    .gsc-svc-directory{
        float:none!important;
        width:calc(100% - 32px)!important;
        max-width:none!important;
        margin:16px!important;
    }

    .gs-featured-section,
    .category-section{
        width:calc(100% - 32px)!important;
        max-width:none!important;
        margin-left:16px!important;
        margin-right:16px!important;
    }

    #other-services-section .category-header{
        display:block!important;
    }

    #other-services-section .category-title{
        margin-bottom:5px!important;
    }

    #other-services-section .services-grid{
        grid-template-columns:1fr!important;
        gap:14px!important;
    }

    #other-services-section .service-card-image{
        aspect-ratio:16/9!important;
    }

    #other-services-section .service-name{
        font-size:1rem!important;
    }

    #other-services-section .service-description{
        font-size:.72rem!important;
    }
}

@media (max-width:480px){
    .gsc-svc-directory{
        width:calc(100% - 20px)!important;
        margin:10px!important;
    }

    .gs-featured-section,
    .category-section{
        width:calc(100% - 20px)!important;
        margin-left:10px!important;
        margin-right:10px!important;
    }
}

/* Respect reduced motion. */
@media (prefers-reduced-motion:reduce){
    #other-services-section .service-card-modern,
    #other-services-section .service-card-image img{
        transition:none!important;
    }

    #other-services-section .service-card-modern:hover{
        transform:none!important;
    }
}


/* FINAL V3: full-width service content + mobile Browse Services open */
@media (min-width:1181px){
  .gsc-svc-directory{width:324px!important;max-width:324px!important;margin-left:26px!important;margin-right:0!important;}
  .gs-featured-section,.category-section{width:calc(100% - 390px)!important;max-width:none!important;margin-left:390px!important;margin-right:0!important;box-sizing:border-box!important;}
}
@media (max-width:1180px) and (min-width:769px){
  .gsc-svc-directory{width:270px!important;max-width:270px!important;margin-left:18px!important;margin-right:0!important;}
  .gs-featured-section,.category-section{width:calc(100% - 312px)!important;max-width:none!important;margin-left:312px!important;margin-right:0!important;box-sizing:border-box!important;}
}
@media (max-width:768px){
  .gsc-svc-directory{display:block!important;position:relative!important;float:none!important;top:auto!important;left:auto!important;right:auto!important;transform:none!important;visibility:visible!important;opacity:1!important;width:calc(100% - 32px)!important;max-width:none!important;margin:16px!important;max-height:none!important;overflow:visible!important;}
  .gsc-svc-directory__list-wrap{display:block!important;max-height:none!important;overflow:visible!important;}
  .gsc-svc-directory__list{display:block!important;}
  .gsc-svc-directory.is-mobile-open{display:block!important;visibility:visible!important;opacity:1!important;}
  .gs-featured-section,.category-section{width:calc(100% - 32px)!important;max-width:none!important;margin-left:16px!important;margin-right:16px!important;box-sizing:border-box!important;}
}
@media (max-width:480px){
  .gsc-svc-directory{width:calc(100% - 20px)!important;margin:10px!important;}
  .gs-featured-section,.category-section{width:calc(100% - 20px)!important;margin-left:10px!important;margin-right:10px!important;}
}


/* FINAL V4 — subtle right breathing room */
@media (min-width:1181px){
  .gs-featured-section,
  .category-section{
    width:calc(100% - 414px)!important;
    margin-right:24px!important;
  }
}

@media (max-width:1180px) and (min-width:769px){
  .gs-featured-section,
  .category-section{
    width:calc(100% - 336px)!important;
    margin-right:24px!important;
  }
}
/* ==========================================================================
   FIX PASS — APPLY FORM LEGIBILITY
   Several inner form elements (honeypot, term cards, member badge, file
   drop zone, feedback text) were never updated when the modal moved from
   a dark theme to the light cream theme, leaving white-on-cream text that
   is invisible. This pass forces readable colors and properly hides the
   honeypot field again.
   ========================================================================== */

/* 1) Hide the honeypot field for real users (it should never be visible —
   it's only there to catch spam bots). Screen readers still see it via
   aria-hidden handling in the markup. */
.apply-honeypot {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* 2) Term selection cards — make the whole card visible and legible */
.term-options {
    display: grid !important;
    gap: 10px !important;
    margin-top: 14px !important;
}
.term-option-card {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    border: 1px solid rgba(18,61,45,.16) !important;
    border-radius: 8px !important;
    background: #fffdf8 !important;
    cursor: pointer !important;
    transition: border-color .2s ease, background .2s ease;
}
.term-option-card:hover {
    border-color: rgba(216,163,58,.5) !important;
    background: #faf5e8 !important;
}
.term-option-card input[type="radio"] {
    accent-color: var(--gsc-ref-forest, #123d2d);
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
}
.term-option-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}
.term-option-content strong {
    color: var(--gsc-ref-ink, #173a2c) !important;
    font: 600 .85rem 'Inter', sans-serif !important;
}
.term-option-content small {
    color: #6f766f !important;
    font: 400 .72rem/1.4 'Inter', sans-serif !important;
}
.term-check {
    color: var(--gsc-ref-gold, #d8a33a) !important;
    opacity: 0;
}
.term-option-card input[type="radio"]:checked ~ .term-check,
.term-option-card:has(input:checked) .term-check {
    opacity: 1;
}
.term-option-card:has(input:checked) {
    border-color: var(--gsc-ref-forest, #123d2d) !important;
    background: #f2ece0 !important;
}

/* 3) "Applying as a registered member" badge */
.apply-member-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 6px 0 14px !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    background: rgba(43,122,80,.10) !important;
    color: var(--gsc-ref-forest, #123d2d) !important;
    font: 600 .72rem 'Inter', sans-serif !important;
}
.apply-member-badge i { color: var(--gsc-ref-green, #2b7a50) !important; }

/* 4) File drop zone text */
.apply-file-drop {
    color: #6f766f !important;
}
.apply-file-drop i { color: var(--gsc-ref-forest, #123d2d) !important; font-size: 1.3rem !important; }
.apply-file-drop .drop-label {
    display: block !important;
    color: var(--gsc-ref-ink, #173a2c) !important;
    font: 600 .78rem 'Inter', sans-serif !important;
    margin-top: 6px !important;
}
.apply-file-drop .drop-sub {
    display: block !important;
    color: #8a908a !important;
    font: 400 .66rem 'Inter', sans-serif !important;
    margin-top: 3px !important;
}
.file-name {
    color: var(--gsc-ref-forest, #123d2d) !important;
    font: 600 .72rem 'Inter', sans-serif !important;
}
.file-name .file-clear { color: #b23a3a !important; cursor: pointer; }

/* 5) Selected-term summary + edit link */
.selected-term-summary {
    color: var(--gsc-ref-ink, #173a2c) !important;
    background: rgba(216,163,58,.10) !important;
    border: 1px solid rgba(216,163,58,.3) !important;
    border-radius: 6px !important;
    padding: 10px 12px !important;
    margin-bottom: 14px !important;
}
.selected-term-summary i { color: var(--gsc-ref-gold, #d8a33a) !important; }
.edit-term-btn {
    color: var(--gsc-ref-forest, #123d2d) !important;
    font-weight: 600 !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
}

/* 6) Feedback + required-field note */
.apply-required-note {
    color: #8a908a !important;
    font: 400 .68rem 'Inter', sans-serif !important;
    margin-top: 8px !important;
}
.apply-feedback {
    display: none;
    margin-top: 12px !important;
    padding: 10px 12px !important;
    border-radius: 6px !important;
    font: 500 .78rem 'Inter', sans-serif !important;
}
.apply-feedback.show { display: block; }
.apply-feedback.success { background: rgba(43,122,80,.10) !important; color: #1c5c3f !important; }
.apply-feedback.error   { background: rgba(178,58,58,.10) !important; color: #8a2e2e !important; }

/* 7) Benefit-loan checkboxes (same white-on-light issue, if used) */
.benefit-option {
    color: var(--gsc-ref-ink, #173a2c) !important;
}
.benefit-option-content strong { color: var(--gsc-ref-ink, #173a2c) !important; }
.benefit-option-content small  { color: #6f766f !important; }
/* ==========================================================================
   FIX PASS 2 — MAKE REQUIRED-FIELD MARKERS VISIBLE
   .req-star spans exist throughout the apply form (labels, section titles)
   but had no explicit color, so they were blending into the surrounding
   text. This makes them a clear, consistent red asterisk everywhere they
   appear, plus a small "required" legend so it reads unambiguously.
   ========================================================================== */

.req-star {
    color: #c0392b !important;
    font-weight: 700 !important;
    margin-left: 3px !important;
    font-size: 1em !important;
}

/* Give it a little breathing room right after label text */
.apply-field label,
.apply-section-title,
.modal-section-title {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 0 !important;
}

/* The small note at the bottom of the form ("* Required fields") */
.apply-required-note .req-star {
    margin-left: 0 !important;
    margin-right: 4px !important;
}

/* Make required inputs/textareas/selects show a subtle red-tinted left
   border ONLY when marked invalid on submit (keeps the form calm until
   someone actually skips something) — this already exists via
   .field-invalid in your JS, just making sure it's visibly red */
.field-invalid {
    border-color: #c0392b !important;
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12) !important;
}
.apply-file-drop.field-invalid {
    border-color: #c0392b !important;
    background: rgba(192, 57, 43, 0.04) !important;
}
.apply-file-drop.field-invalid i,
.apply-file-drop.field-invalid .drop-label {
    color: #c0392b !important;
}

/* ==========================================================================
   GSC-TEMPC SERVICE MODAL — FINAL REFERENCE MATCH / MODAL ONLY
   Scoped exclusively to .gsc-service-modal so the Services page outside the
   popup remains unchanged.
   ========================================================================== */

.gsc-service-modal {
    padding: 24px !important;
    background: rgba(8, 28, 20, .70) !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.gsc-service-modal .gsc-service-modal__content {
    width: min(1180px, calc(100vw - 48px)) !important;
    max-width: 1180px !important;
    height: min(880px, calc(100vh - 48px)) !important;
    max-height: calc(100vh - 48px) !important;
    min-height: 620px !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    flex-direction: initial !important;
    overflow: hidden !important;
    border: 1px solid rgba(207, 162, 74, .26) !important;
    border-radius: 14px !important;
    background: #fbf8f0 !important;
    box-shadow: 0 34px 90px rgba(3, 19, 13, .38) !important;
}

/* LEFT: photographic service dossier */
.gsc-service-modal__left {
    min-width: 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #fbf8f0 !important;
    border-right: 1px solid rgba(18, 61, 45, .11) !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(18,61,45,.20) transparent;
}

.gsc-service-modal__left::-webkit-scrollbar,
.gsc-service-modal__info::-webkit-scrollbar,
.gsc-service-modal__application::-webkit-scrollbar {
    width: 6px;
}

.gsc-service-modal__left::-webkit-scrollbar-thumb,
.gsc-service-modal__info::-webkit-scrollbar-thumb,
.gsc-service-modal__application::-webkit-scrollbar-thumb {
    background: rgba(18,61,45,.18);
    border-radius: 20px;
}

.gsc-service-modal__cover {
    width: calc(100% - 44px) !important;
    height: 330px !important;
    min-height: 330px !important;
    margin: 22px 22px 0 !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #e8e4da !important;
    border: 1px solid rgba(207,162,74,.45) !important;
    border-radius: 8px !important;
    box-shadow: inset 0 0 0 5px rgba(255,255,255,.40);
}

/* Full photograph: preserve aspect ratio and remove the old banner crop. */
.gsc-service-modal__cover img,
.gsc-service-modal__cover picture,
.gsc-service-modal__cover picture img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

.gsc-service-modal__cover img,
.gsc-service-modal__cover picture img {
    object-fit: contain !important;
    object-position: center !important;
}

/* The rendered cover fallback remains centered and unobtrusive. */
.gsc-service-modal__cover::after {
    display: none !important;
}

.gsc-service-modal__left .gs-modal-gallery {
    margin: 14px 22px 0 !important;
    padding: 0 0 3px !important;
    gap: 9px !important;
    align-items: center !important;
}

.gsc-service-modal__left .gs-modal-gallery button {
    width: 78px !important;
    height: 58px !important;
    flex: 0 0 78px !important;
    border: 1px solid rgba(18,61,45,.13) !important;
    border-radius: 6px !important;
    background: #ece8df !important;
    box-shadow: none !important;
}

.gsc-service-modal__left .gs-modal-gallery button.is-active {
    border: 2px solid #cfa24a !important;
    box-shadow: 0 0 0 2px rgba(207,162,74,.10) !important;
}

.gsc-service-modal__left .gs-modal-gallery img {
    object-fit: cover !important;
}

.gsc-service-modal__left-content {
    padding: 25px 28px 30px !important;
}

.gsc-service-modal__eyebrow {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 7px !important;
    color: #174f3a !important;
    font: 700 .70rem/1.2 'Poppins', sans-serif !important;
    letter-spacing: .15em !important;
    text-transform: uppercase !important;
}

.gsc-service-modal__featured {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px 9px !important;
    border: 1px solid rgba(207,162,74,.34) !important;
    border-radius: 4px !important;
    background: #f4eee1 !important;
    color: #6b5420 !important;
    font-size: .62rem !important;
    letter-spacing: .09em !important;
}

.gsc-service-modal__title {
    margin: 10px 0 0 !important;
    max-width: 100% !important;
    color: #123d2d !important;
    font: 600 clamp(2.05rem, 3.1vw, 3.35rem)/.98 'Fraunces', 'Playfair Display', Georgia, serif !important;
    letter-spacing: -.035em !important;
}

.gsc-service-modal__rule {
    width: 54px !important;
    height: 2px !important;
    margin: 18px 0 20px !important;
    background: #cfa24a !important;
}

.gsc-service-modal__about {
    margin: 0 !important;
    padding: 0 !important;
}

.gsc-service-modal__section-label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
    color: #123d2d !important;
    font: 700 .72rem/1.2 'Poppins', sans-serif !important;
    letter-spacing: .15em !important;
    text-transform: uppercase !important;
}

.gsc-service-modal__section-label i {
    color: #1b6949 !important;
    font-size: .95rem !important;
}

.gsc-service-modal__about p {
    margin: 0 !important;
    color: #53645c !important;
    font: 400 .93rem/1.75 'Inter', sans-serif !important;
}

.gsc-service-modal__service-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 16px !important;
    margin-top: 24px !important;
    padding-top: 15px !important;
    border-top: 1px solid rgba(18,61,45,.10) !important;
    color: #6c7771 !important;
    font: 600 .67rem/1.4 'Poppins', sans-serif !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
}

.gsc-service-modal__service-meta span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
}

.gsc-service-modal__service-meta i {
    color: #c49b46 !important;
}

/* RIGHT: information + large application workspace */
.gsc-service-modal__right {
    min-width: 0 !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: auto minmax(210px, .88fr) minmax(360px, 1.45fr) !important;
    background: #fffdf8 !important;
}

.gsc-service-modal__topbar {
    min-width: 0 !important;
    min-height: 86px !important;
    padding: 20px 28px 17px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    position: relative !important;
    background: #fffdf8 !important;
    color: #123d2d !important;
    border-bottom: 1px solid rgba(18,61,45,.12) !important;
}

.gsc-service-modal__stepper {
    width: calc(100% - 34px) !important;
    display: grid !important;
    grid-template-columns: auto minmax(22px,1fr) auto minmax(22px,1fr) auto minmax(22px,1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
}

.gsc-service-modal__step {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #7b857f !important;
    white-space: nowrap !important;
}

.gsc-service-modal__step span {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid #cbd2cc !important;
    border-radius: 50% !important;
    background: #fffdf8 !important;
    color: #66716b !important;
    font: 700 .62rem/1 'Poppins', sans-serif !important;
}

.gsc-service-modal__step b {
    overflow: hidden !important;
    color: inherit !important;
    font: 700 .60rem/1.2 'Poppins', sans-serif !important;
    letter-spacing: .055em !important;
    text-transform: uppercase !important;
}

.gsc-service-modal__step.is-active {
    color: #123d2d !important;
}

.gsc-service-modal__step.is-active span {
    border-color: #123d2d !important;
    background: #123d2d !important;
    color: #fff !important;
    box-shadow: 0 0 0 3px rgba(207,162,74,.13) !important;
}

.gsc-service-modal__step-line {
    height: 1px !important;
    background: #d9ddd8 !important;
}

.gsc-service-modal__close {
    top: 16px !important;
    right: 18px !important;
    width: 40px !important;
    height: 40px !important;
    border: 1px solid rgba(18,61,45,.16) !important;
    background: #fffdf8 !important;
    color: #123d2d !important;
    box-shadow: 0 4px 14px rgba(18,61,45,.07) !important;
    z-index: 5 !important;
}

.gsc-service-modal__close:hover {
    border-color: rgba(207,162,74,.65) !important;
    background: #f7f1e5 !important;
    color: #123d2d !important;
}

/* INFORMATION ZONE */
.gsc-service-modal__info {
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    padding: 22px 28px 20px !important;
    background: #fffdf8 !important;
}

.gsc-service-modal__info-inner {
    max-width: 760px !important;
    margin: 0 auto !important;
}

.gsc-service-modal__info .modal-section {
    margin: 0 0 20px !important;
    padding: 0 0 18px !important;
    border-bottom: 1px solid rgba(18,61,45,.11) !important;
}

.gsc-service-modal__info .modal-section:last-child {
    margin-bottom: 0 !important;
}

.gsc-service-modal__info .modal-section-title {
    margin: 0 0 12px !important;
    padding: 0 !important;
    border: 0 !important;
    color: #123d2d !important;
    font: 700 .72rem/1.25 'Poppins', sans-serif !important;
    letter-spacing: .15em !important;
    text-transform: uppercase !important;
}

.gsc-service-modal__info .modal-section-title i {
    color: #1b6949 !important;
    font-size: .9rem !important;
}

.gsc-service-modal__info .modal-text {
    color: #52635b !important;
    font: 400 .88rem/1.65 'Inter', sans-serif !important;
}

/* Requirements become compact editorial columns instead of giant cards. */
.gsc-service-modal__info .requirements-grid-modal {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.gsc-service-modal__info .req-box {
    min-width: 0 !important;
    padding: 14px 15px !important;
    border: 1px solid rgba(18,61,45,.10) !important;
    border-radius: 6px !important;
    background: #f8f7f1 !important;
}

.gsc-service-modal__info .req-box.retirees,
.gsc-service-modal__info .req-box.regular {
    border-left-width: 2px !important;
}

.gsc-service-modal__info .req-box h5 {
    margin: 0 0 10px !important;
    color: #173f30 !important;
    font: 700 .68rem/1.35 'Poppins', sans-serif !important;
    letter-spacing: .03em !important;
}

.gsc-service-modal__info .req-list {
    gap: 7px !important;
}

.gsc-service-modal__info .req-list li {
    padding-left: 22px !important;
    color: #58675f !important;
    font: 400 .78rem/1.45 'Inter', sans-serif !important;
}

.gsc-service-modal__info .req-list li::before {
    top: 2px !important;
    width: 15px !important;
    height: 15px !important;
    background: #eaf1eb !important;
    color: #1a6848 !important;
}

/* APPLICATION ZONE — deliberately large */
.gsc-service-modal__application {
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    border-top: 1px solid rgba(18,61,45,.13) !important;
    background: #f6f5ef !important;
    padding: 0 !important;
}

.gsc-service-modal__application > .modal-cta {
    min-height: 100% !important;
    margin: 0 !important;
    padding: 24px 28px 30px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #123d2d !important;
}

.gsc-service-modal__application > .modal-cta h4 {
    margin: 0 !important;
    color: #123d2d !important;
    font: 600 clamp(1.25rem, 1.8vw, 1.55rem)/1.1 'Fraunces', 'Playfair Display', Georgia, serif !important;
    letter-spacing: -.01em !important;
}

.gsc-service-modal__application > .modal-cta > p {
    margin: 7px 0 17px !important;
    color: #64716b !important;
    font: 400 .82rem/1.55 'Inter', sans-serif !important;
}

/* Strong application action buttons */
.gsc-service-modal__application .apply-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin: 0 0 16px !important;
}

.gsc-service-modal__application .btn-apply-now,
.gsc-service-modal__application .modal-cta-btn {
    min-height: 50px !important;
    width: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border-radius: 5px !important;
    padding: 0 18px !important;
    font: 700 .70rem/1 'Poppins', sans-serif !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
}

.gsc-service-modal__application .btn-apply-now {
    background: #0f5a3d !important;
    border: 1px solid #0f5a3d !important;
    color: #fff !important;
    box-shadow: 0 7px 18px rgba(15,90,61,.16) !important;
}

.gsc-service-modal__application .btn-apply-now:hover {
    background: #123d2d !important;
    border-color: #123d2d !important;
    transform: translateY(-1px) !important;
}

.gsc-service-modal__application .modal-cta-btn {
    background: #fffdf8 !important;
    border: 1px solid rgba(18,61,45,.32) !important;
    color: #123d2d !important;
    box-shadow: none !important;
}

.gsc-service-modal__application .modal-cta-btn:hover {
    border-color: #cfa24a !important;
    background: #faf6eb !important;
}

/* Term selection and form become first-class workspace content. */
.gsc-service-modal__application .term-selection-wrap,
.gsc-service-modal__application .apply-form-wrap {
    width: 100% !important;
    max-width: none !important;
    margin: 14px 0 0 !important;
}

.gsc-service-modal__application .term-selection-wrap.is-open,
.gsc-service-modal__application .apply-form-wrap.is-open {
    display: block !important;
}

.gsc-service-modal__application .apply-section {
    margin: 0 0 14px !important;
    padding: 20px !important;
    border: 1px solid rgba(18,61,45,.13) !important;
    border-radius: 7px !important;
    background: #fffdf8 !important;
    box-shadow: 0 5px 18px rgba(18,61,45,.035) !important;
}

.gsc-service-modal__application .apply-section-head {
    gap: 12px !important;
    margin-bottom: 14px !important;
}

.gsc-service-modal__application .apply-section-num {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
    border: 1px solid rgba(207,162,74,.65) !important;
    background: #f5f0e4 !important;
    color: #123d2d !important;
    font: 700 .67rem/1 'Poppins', sans-serif !important;
}

.gsc-service-modal__application .apply-section-title {
    color: #173f30 !important;
    font: 700 .78rem/1.25 'Poppins', sans-serif !important;
    letter-spacing: .04em !important;
}

.gsc-service-modal__application .apply-section-hint {
    margin-top: 4px !important;
    color: #718078 !important;
    font: 400 .72rem/1.5 'Inter', sans-serif !important;
}

.gsc-service-modal__application .apply-field {
    margin-top: 16px !important;
}

.gsc-service-modal__application .apply-field label {
    margin-bottom: 7px !important;
    color: #40554c !important;
    font: 700 .68rem/1.3 'Poppins', sans-serif !important;
    letter-spacing: .02em !important;
}

.gsc-service-modal__application .apply-field input,
.gsc-service-modal__application .apply-field select,
.gsc-service-modal__application .apply-field textarea {
    min-height: 50px !important;
    border: 1px solid rgba(18,61,45,.17) !important;
    border-radius: 5px !important;
    background: #fffefa !important;
    color: #173f30 !important;
    padding: 12px 13px !important;
    font: 400 .82rem/1.4 'Inter', sans-serif !important;
}

.gsc-service-modal__application .apply-field textarea {
    min-height: 110px !important;
}

.gsc-service-modal__application .apply-field input:focus,
.gsc-service-modal__application .apply-field select:focus,
.gsc-service-modal__application .apply-field textarea:focus {
    border-color: rgba(15,90,61,.52) !important;
    box-shadow: 0 0 0 3px rgba(15,90,61,.08) !important;
    outline: none !important;
}

.gsc-service-modal__application .apply-two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.gsc-service-modal__application .term-option-card {
    min-height: 62px !important;
    padding: 13px 14px !important;
    border: 1px solid rgba(18,61,45,.14) !important;
    border-radius: 6px !important;
    background: #fffdf8 !important;
}

.gsc-service-modal__application .term-option-card:hover {
    border-color: rgba(207,162,74,.62) !important;
    background: #faf7ee !important;
}

.gsc-service-modal__application .term-option-card:has(input:checked) {
    border-color: #0f5a3d !important;
    box-shadow: inset 0 0 0 1px #0f5a3d !important;
    background: #f0f6f1 !important;
}

.gsc-service-modal__application .term-option-content strong {
    color: #173f30 !important;
    font: 700 .76rem/1.3 'Poppins', sans-serif !important;
}

.gsc-service-modal__application .term-option-content small {
    color: #728078 !important;
    font: 400 .69rem/1.45 'Inter', sans-serif !important;
}

.gsc-service-modal__application .apply-file-drop {
    min-height: 120px !important;
    padding: 22px !important;
    border: 1px dashed rgba(18,61,45,.25) !important;
    border-radius: 6px !important;
    background: #faf8f1 !important;
}

.gsc-service-modal__application .apply-submit-row {
    margin-top: 20px !important;
}

.gsc-service-modal__application .apply-submit-btn {
    width: 100% !important;
    min-height: 56px !important;
    border: 1px solid #0f5a3d !important;
    border-radius: 5px !important;
    background: #0f5a3d !important;
    color: #fff !important;
    font: 700 .74rem/1 'Poppins', sans-serif !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
}

.gsc-service-modal__application .apply-submit-btn:hover {
    background: #123d2d !important;
    border-color: #123d2d !important;
}

.gsc-service-modal__application .apply-required-note {
    margin-top: 8px !important;
    color: #7a857f !important;
    font-size: .67rem !important;
}

.gsc-service-modal__application .selected-term-summary {
    padding: 11px 13px !important;
    border: 1px solid rgba(18,61,45,.11) !important;
    border-radius: 5px !important;
    background: #f2f6f2 !important;
}

/* Login state */
.gsc-service-modal__application .apply-login-gate {
    margin: 14px 0 0 !important;
    padding: 16px !important;
    border: 1px solid rgba(18,61,45,.12) !important;
    border-radius: 6px !important;
    background: #f5f0e4 !important;
}

/* Keep logged-out action layout readable inside the enlarged workspace. */
.gsc-service-modal__application .apply-login-gate + .apply-actions {
    grid-template-columns: 1fr 1fr !important;
}

/* Make the application area visually separate without another giant card. */
.gsc-service-modal__application .apply-form-wrap::before {
    content: 'Application Form';
    display: block !important;
    margin: 4px 0 15px !important;
    color: #123d2d !important;
    font: 600 1.18rem/1.1 'Fraunces', 'Playfair Display', Georgia, serif !important;
}

/* The form itself should not inherit old compact desktop constraints. */
.gsc-service-modal__application .apply-form {
    width: 100% !important;
    max-width: none !important;
}

/* ==========================================================================
   RESPONSIVE — intentional mobile composition
   ========================================================================== */

@media (max-width: 1100px) and (min-width: 701px) {
    .gsc-service-modal .gsc-service-modal__content {
        width: min(1040px, calc(100vw - 32px)) !important;
        height: min(820px, calc(100vh - 32px)) !important;
        max-height: calc(100vh - 32px) !important;
        grid-template-columns: minmax(0, .90fr) minmax(0, 1.10fr) !important;
    }

    .gsc-service-modal__cover {
        height: 285px !important;
        min-height: 285px !important;
    }

    .gsc-service-modal__left-content {
        padding: 22px 24px 28px !important;
    }

    .gsc-service-modal__topbar,
    .gsc-service-modal__info {
        padding-left: 22px !important;
        padding-right: 22px !important;
    }

    .gsc-service-modal__application > .modal-cta {
        padding-left: 22px !important;
        padding-right: 22px !important;
    }
}

@media (max-width: 700px) {
    .gsc-service-modal {
        padding: 8px !important;
        align-items: stretch !important;
    }

    .gsc-service-modal .gsc-service-modal__content {
        width: 100% !important;
        max-width: none !important;
        height: calc(100vh - 16px) !important;
        max-height: calc(100vh - 16px) !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        border-radius: 10px !important;
    }

    .gsc-service-modal__left {
        flex: 0 0 43% !important;
        max-height: 43% !important;
        border-right: 0 !important;
        border-bottom: 1px solid rgba(18,61,45,.12) !important;
    }

    .gsc-service-modal__right {
        flex: 1 1 57% !important;
        min-height: 0 !important;
        display: grid !important;
        grid-template-rows: auto minmax(150px, .72fr) minmax(300px, 1.5fr) !important;
    }

    .gsc-service-modal__cover {
        width: calc(100% - 24px) !important;
        height: 220px !important;
        min-height: 220px !important;
        margin: 12px 12px 0 !important;
    }

    .gsc-service-modal__left .gs-modal-gallery {
        margin: 9px 12px 0 !important;
    }

    .gsc-service-modal__left .gs-modal-gallery button {
        width: 66px !important;
        height: 49px !important;
        flex-basis: 66px !important;
    }

    .gsc-service-modal__left-content {
        padding: 16px 16px 22px !important;
    }

    .gsc-service-modal__title {
        font-size: clamp(1.65rem, 8vw, 2.25rem) !important;
    }

    .gsc-service-modal__service-meta {
        margin-top: 17px !important;
    }

    .gsc-service-modal__topbar {
        min-height: 66px !important;
        padding: 12px 14px 11px !important;
    }

    .gsc-service-modal__stepper {
        width: calc(100% - 30px) !important;
        gap: 5px !important;
    }

    .gsc-service-modal__step {
        justify-content: center !important;
        gap: 0 !important;
    }

    .gsc-service-modal__step span {
        width: 25px !important;
        height: 25px !important;
        flex-basis: 25px !important;
        font-size: .57rem !important;
    }

    .gsc-service-modal__step b {
        display: none !important;
    }

    .gsc-service-modal__step-line {
        min-width: 12px !important;
    }

    .gsc-service-modal__close {
        top: 10px !important;
        right: 10px !important;
        width: 34px !important;
        height: 34px !important;
    }

    .gsc-service-modal__info {
        padding: 16px 14px 14px !important;
    }

    .gsc-service-modal__info .requirements-grid-modal {
        grid-template-columns: 1fr !important;
    }

    .gsc-service-modal__application > .modal-cta {
        padding: 18px 14px 24px !important;
    }

    .gsc-service-modal__application .apply-actions,
    .gsc-service-modal__application .apply-login-gate + .apply-actions {
        grid-template-columns: 1fr !important;
    }

    .gsc-service-modal__application .apply-two-col {
        grid-template-columns: 1fr !important;
    }

    .gsc-service-modal__application .apply-section {
        padding: 16px !important;
    }
}

@media (max-width: 430px) {
    .gsc-service-modal__left {
        flex-basis: 40% !important;
        max-height: 40% !important;
    }

    .gsc-service-modal__right {
        flex-basis: 60% !important;
        grid-template-rows: auto minmax(145px, .68fr) minmax(320px, 1.55fr) !important;
    }

    .gsc-service-modal__cover {
        height: 180px !important;
        min-height: 180px !important;
    }

    .gsc-service-modal__left .gs-modal-gallery button {
        width: 58px !important;
        height: 44px !important;
        flex-basis: 58px !important;
    }

    .gsc-service-modal__left-content {
        padding: 13px 14px 18px !important;
    }

    .gsc-service-modal__eyebrow {
        font-size: .60rem !important;
    }

    .gsc-service-modal__featured {
        font-size: .55rem !important;
        padding: 4px 7px !important;
    }

    .gsc-service-modal__title {
        margin-top: 8px !important;
        font-size: 1.58rem !important;
    }

    .gsc-service-modal__about p {
        font-size: .82rem !important;
        line-height: 1.6 !important;
    }

    .gsc-service-modal__info {
        padding: 13px 12px !important;
    }

    .gsc-service-modal__info .modal-text {
        font-size: .79rem !important;
    }

    .gsc-service-modal__application > .modal-cta {
        padding: 15px 12px 20px !important;
    }

    .gsc-service-modal__application > .modal-cta h4 {
        font-size: 1.18rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gsc-service-modal *,
    .gsc-service-modal *::before,
    .gsc-service-modal *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================================================
   GSCTEMPC SERVICE MODAL — FINAL PHOTO-FILL FIX
   ---------------------------------------------------------------------------
   CSS ONLY. Modal scope only.

   The service cover must show the ENTIRE source photograph while eliminating
   the empty left/right gutters created by placing portrait artwork inside a
   fixed landscape-height container. The image frame now follows the natural
   aspect ratio of the actual image instead of forcing a fixed 330px crop box.
   ============================================================================ */

.gsc-service-modal .gsc-service-modal__cover {
    width: calc(100% - 44px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    display: block !important;
    overflow: hidden !important;
    margin: 22px 22px 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 1px solid rgba(207,162,74,.45) !important;
    border-radius: 8px !important;
    box-shadow: inset 0 0 0 5px rgba(255,255,255,.40) !important;
    line-height: 0 !important;
}

.gsc-service-modal .gsc-service-modal__cover picture {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}

.gsc-service-modal .gsc-service-modal__cover img,
.gsc-service-modal .gsc-service-modal__cover picture img,
.gsc-service-modal .gsc-service-modal__cover > a,
.gsc-service-modal .gsc-service-modal__cover > a img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 6px !important;
    line-height: 0 !important;
}

/* If the renderer supplies a fallback rather than an image, keep its frame
   naturally sized without introducing artificial horizontal gutters. */
.gsc-service-modal .gsc-service-modal__cover .gs-cover-fallback {
    width: 100% !important;
    min-height: 280px !important;
    height: 280px !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 6px !important;
}

/* The photographic frame itself is now the image frame, so no second overlay
   should create a visual band or dark strip across the photograph. */
.gsc-service-modal .gsc-service-modal__cover::before,
.gsc-service-modal .gsc-service-modal__cover::after {
    pointer-events: none !important;
}

@media (max-width: 1100px) and (min-width: 701px) {
    .gsc-service-modal .gsc-service-modal__cover {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .gsc-service-modal .gsc-service-modal__cover img,
    .gsc-service-modal .gsc-service-modal__cover picture img {
        height: auto !important;
        max-height: none !important;
    }
}

@media (max-width: 700px) {
    .gsc-service-modal .gsc-service-modal__cover {
        width: calc(100% - 28px) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 14px 14px 0 !important;
    }

    .gsc-service-modal .gsc-service-modal__cover img,
    .gsc-service-modal .gsc-service-modal__cover picture,
    .gsc-service-modal .gsc-service-modal__cover picture img,
    .gsc-service-modal .gsc-service-modal__cover > a,
    .gsc-service-modal .gsc-service-modal__cover > a img {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
    }

    .gsc-service-modal .gsc-service-modal__cover .gs-cover-fallback {
        min-height: 220px !important;
        height: 220px !important;
    }
}

@media (max-width: 430px) {
    .gsc-service-modal .gsc-service-modal__cover {
        width: calc(100% - 24px) !important;
        margin: 12px 12px 0 !important;
    }
}

/* ============================================================================
   FINAL BENEFIT LOAN OPTIONS FIX
   ---------------------------------------------------------------------------
   Restore the original LEFT / RIGHT option presentation inside the service
   application modal. The HTML and JavaScript already provide two separate
   option groups and handle the one-side-only selection behavior. These rules
   only restore the visual two-column layout and improve readability.
   ============================================================================ */

.gsc-service-modal .benefit-loan-section .benefit-loan-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 18px !important;
    width: 100% !important;
    align-items: start !important;
    margin: 20px 0 0 !important;
}

.gsc-service-modal .benefit-loan-section .benefit-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 16px 16px 14px !important;
    background: #fffdf8 !important;
    border: 1px solid rgba(23,58,44,.14) !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
}

.gsc-service-modal .benefit-loan-section .benefit-box-header {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    width: 100% !important;
    margin: 0 0 13px !important;
    padding: 0 0 11px !important;
    border-bottom: 1px solid rgba(207,162,74,.34) !important;
    color: #173a2c !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    text-align: left !important;
}

.gsc-service-modal .benefit-loan-section .benefit-box-header i {
    flex: 0 0 auto !important;
    color: #176044 !important;
    font-size: 15px !important;
}

.gsc-service-modal .benefit-loan-section .benefit-option {
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 10px !important;
    width: 100% !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 10px 9px !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid rgba(23,58,44,.08) !important;
    border-radius: 7px !important;
    cursor: pointer !important;
    text-align: left !important;
    color: #173a2c !important;
    transition: background .18s ease, border-color .18s ease, opacity .18s ease !important;
}

.gsc-service-modal .benefit-loan-section .benefit-option:last-child {
    border-bottom: 0 !important;
}

.gsc-service-modal .benefit-loan-section .benefit-option:hover {
    background: rgba(23,96,68,.055) !important;
}

.gsc-service-modal .benefit-loan-section .benefit-option:has(.benefit-checkbox:checked) {
    background: rgba(23,96,68,.075) !important;
    box-shadow: inset 3px 0 0 #176044 !important;
}

.gsc-service-modal .benefit-loan-section .benefit-checkbox {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    margin: 0 !important;
    border: 1.5px solid rgba(23,58,44,.42) !important;
    border-radius: 4px !important;
    background: #fff !important;
    cursor: pointer !important;
    position: relative !important;
    box-sizing: border-box !important;
}

.gsc-service-modal .benefit-loan-section .benefit-checkbox:checked {
    background: #176044 !important;
    border-color: #176044 !important;
}

.gsc-service-modal .benefit-loan-section .benefit-checkbox:checked::after {
    content: "✓" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -54%) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

.gsc-service-modal .benefit-loan-section .benefit-checkbox:focus-visible {
    outline: 3px solid rgba(207,162,74,.38) !important;
    outline-offset: 2px !important;
}

.gsc-service-modal .benefit-loan-section .benefit-option-content {
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

.gsc-service-modal .benefit-loan-section .benefit-option-content strong {
    display: inline !important;
    margin: 0 !important;
    color: #173a2c !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
}

.gsc-service-modal .benefit-loan-section .benefit-option-content small {
    display: inline !important;
    margin: 0 !important;
    color: #6f766f !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
}

/* Keep the application section readable without allowing the benefit
   selector to consume unnecessary vertical space. */
.gsc-service-modal .benefit-loan-section .apply-section-head {
    margin-bottom: 0 !important;
}

@media (max-width: 760px) {
    .gsc-service-modal .benefit-loan-section .benefit-loan-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .gsc-service-modal .benefit-loan-section .benefit-box {
        padding: 14px 13px 12px !important;
    }
}

@media (max-width: 480px) {
    .gsc-service-modal .benefit-loan-section .benefit-loan-grid {
        margin-top: 15px !important;
    }

    .gsc-service-modal .benefit-loan-section .benefit-option {
        min-height: 50px !important;
        padding: 9px 7px !important;
    }

    .gsc-service-modal .benefit-loan-section .benefit-option-content strong {
        font-size: 13.5px !important;
    }

    .gsc-service-modal .benefit-loan-section .benefit-option-content small {
        font-size: 12px !important;
    }
}

/* ============================================================================
   GSCTEMPC SERVICE MODAL — MOBILE APPLICATION UX FINAL PASS
   ---------------------------------------------------------------------------
   MOBILE ONLY. Desktop/tablet styling above remains untouched.

   Goal:
   - Give the application workspace substantially more vertical space.
   - Make the form feel like a guided, easy-to-follow application rather than
     a compressed desktop form.
   - Keep the existing 01 → 04 service step indicator.
   - Preserve all existing PHP/JS hooks and application behavior.
   - Increase touch targets, field height, readable type and section spacing.
   - Keep Benefit Loan LEFT/RIGHT logic intact; on phones the two groups stack
     because two narrow columns are harder to use on a small touchscreen.
   ============================================================================ */

@media (max-width: 700px) {
    /* Give the actual application workspace the majority of the modal. */
    .gsc-service-modal .gsc-service-modal__content {
        height: calc(100dvh - 12px) !important;
        max-height: calc(100dvh - 12px) !important;
        border-radius: 12px !important;
    }

    .gsc-service-modal__left {
        flex: 0 0 32% !important;
        max-height: 32% !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain !important;
    }

    .gsc-service-modal__right {
        flex: 1 1 68% !important;
        min-height: 0 !important;
        grid-template-rows: auto minmax(112px, .42fr) minmax(0, 1.58fr) !important;
    }

    /* Keep the service image visible, but don't let the introductory area
       consume the majority of a phone screen. */
    .gsc-service-modal .gsc-service-modal__cover {
        margin: 10px 10px 0 !important;
        width: calc(100% - 20px) !important;
    }

    .gsc-service-modal__left .gs-modal-gallery {
        margin: 7px 10px 0 !important;
        gap: 7px !important;
    }

    .gsc-service-modal__left .gs-modal-gallery button {
        width: 54px !important;
        height: 42px !important;
        flex-basis: 54px !important;
    }

    .gsc-service-modal__left-content {
        padding: 12px 13px 16px !important;
    }

    .gsc-service-modal__title {
        font-size: clamp(1.45rem, 7.5vw, 2rem) !important;
        line-height: 1 !important;
    }

    .gsc-service-modal__rule {
        margin: 12px 0 14px !important;
    }

    .gsc-service-modal__about p {
        font-size: .84rem !important;
        line-height: 1.58 !important;
    }

    .gsc-service-modal__service-meta {
        margin-top: 15px !important;
        padding-top: 11px !important;
        gap: 6px 12px !important;
        font-size: .60rem !important;
    }

    /* Compact but highly readable stepper. */
    .gsc-service-modal__topbar {
        min-height: 58px !important;
        padding: 9px 12px 8px !important;
    }

    .gsc-service-modal__stepper {
        width: calc(100% - 34px) !important;
        gap: 4px !important;
    }

    .gsc-service-modal__step span {
        width: 29px !important;
        height: 29px !important;
        flex-basis: 29px !important;
        font-size: .58rem !important;
    }

    .gsc-service-modal__step-line {
        min-width: 8px !important;
    }

    .gsc-service-modal__close {
        top: 8px !important;
        right: 8px !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
    }

    /* Requirements remain available above the form, but use less vertical
       space so Application gets priority. */
    .gsc-service-modal__info {
        padding: 13px 12px 12px !important;
        scrollbar-width: thin;
    }

    .gsc-service-modal__info .modal-section {
        margin-bottom: 12px !important;
        padding-bottom: 12px !important;
    }

    .gsc-service-modal__info .modal-section-title {
        margin-bottom: 8px !important;
        font-size: .68rem !important;
        letter-spacing: .12em !important;
    }

    .gsc-service-modal__info .modal-text {
        font-size: .82rem !important;
        line-height: 1.52 !important;
    }

    .gsc-service-modal__info .requirements-grid-modal {
        grid-template-columns: 1fr !important;
        gap: 7px !important;
    }

    .gsc-service-modal__info .req-box {
        padding: 10px 11px !important;
        border-radius: 6px !important;
    }

    .gsc-service-modal__info .req-box h5 {
        margin-bottom: 7px !important;
        font-size: .66rem !important;
    }

    .gsc-service-modal__info .req-list {
        gap: 5px !important;
    }

    .gsc-service-modal__info .req-list li {
        padding-left: 20px !important;
        font-size: .76rem !important;
        line-height: 1.42 !important;
    }

    /* APPLICATION — make this the dominant mobile workspace. */
    .gsc-service-modal__application {
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        scrollbar-width: thin;
    }

    .gsc-service-modal__application > .modal-cta {
        padding: 14px 10px 28px !important;
    }

    .gsc-service-modal__application > .modal-cta h4 {
        font-size: 1.28rem !important;
        line-height: 1.15 !important;
    }

    .gsc-service-modal__application > .modal-cta > p {
        max-width: 34rem !important;
        margin: 6px auto 12px !important;
        font-size: .78rem !important;
        line-height: 1.48 !important;
        text-align: center !important;
    }

    /* Primary actions are deliberately large on touch screens. */
    .gsc-service-modal__application .apply-actions,
    .gsc-service-modal__application .apply-login-gate + .apply-actions {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }

    .gsc-service-modal__application .btn-apply-now,
    .gsc-service-modal__application .modal-cta-btn {
        min-height: 54px !important;
        padding: 0 18px !important;
        border-radius: 6px !important;
        font-size: .72rem !important;
    }

    /* Application Form heading becomes a clear visual starting point. */
    .gsc-service-modal__application .apply-form-wrap::before {
        margin: 10px 2px 13px !important;
        font-size: 1.34rem !important;
        line-height: 1.15 !important;
        text-align: left !important;
    }

    /* Every application block reads like an individual step. */
    .gsc-service-modal__application .apply-section {
        margin: 0 0 12px !important;
        padding: 18px 14px !important;
        border-radius: 8px !important;
        border-color: rgba(18,61,45,.15) !important;
        box-shadow: 0 3px 12px rgba(18,61,45,.035) !important;
    }

    .gsc-service-modal__application .apply-section-head {
        display: flex !important;
        align-items: flex-start !important;
        gap: 11px !important;
        margin-bottom: 15px !important;
    }

    .gsc-service-modal__application .apply-section-num {
        width: 36px !important;
        height: 36px !important;
        flex: 0 0 36px !important;
        font-size: .68rem !important;
    }

    .gsc-service-modal__application .apply-section-title {
        font-size: .80rem !important;
        line-height: 1.35 !important;
    }

    .gsc-service-modal__application .apply-section-hint {
        margin-top: 5px !important;
        font-size: .73rem !important;
        line-height: 1.48 !important;
    }

    /* Large, comfortable fields. */
    .gsc-service-modal__application .apply-field {
        margin-top: 18px !important;
    }

    .gsc-service-modal__application .apply-field label {
        display: block !important;
        margin-bottom: 8px !important;
        font-size: .73rem !important;
        line-height: 1.35 !important;
    }

    .gsc-service-modal__application .apply-field input,
    .gsc-service-modal__application .apply-field select,
    .gsc-service-modal__application .apply-field textarea {
        width: 100% !important;
        min-height: 56px !important;
        padding: 14px 14px !important;
        border-radius: 6px !important;
        font-size: 1rem !important;
        line-height: 1.45 !important;
        box-sizing: border-box !important;
    }

    .gsc-service-modal__application .apply-field textarea {
        min-height: 135px !important;
        resize: vertical !important;
    }

    .gsc-service-modal__application .apply-field input:focus,
    .gsc-service-modal__application .apply-field select:focus,
    .gsc-service-modal__application .apply-field textarea:focus {
        box-shadow: 0 0 0 3px rgba(15,90,61,.10) !important;
    }

    /* Two-column desktop fields become full-width mobile fields. */
    .gsc-service-modal__application .apply-two-col {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    /* Term cards become large tap targets. */
    .gsc-service-modal__application .term-options {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 9px !important;
    }

    .gsc-service-modal__application .term-option-card {
        min-height: 68px !important;
        padding: 14px !important;
        border-radius: 7px !important;
    }

    .gsc-service-modal__application .term-option-content strong {
        font-size: .84rem !important;
    }

    .gsc-service-modal__application .term-option-content small {
        font-size: .74rem !important;
        line-height: 1.45 !important;
    }

    /* Benefit Loan: preserve LEFT/RIGHT grouping, but make each option a
       large, obvious touch row. The existing JS still enforces one-side-only. */
    .gsc-service-modal .benefit-loan-section .benefit-loan-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin-top: 13px !important;
    }

    .gsc-service-modal .benefit-loan-section .benefit-box {
        padding: 14px 12px !important;
        border-radius: 8px !important;
    }

    .gsc-service-modal .benefit-loan-section .benefit-box-header {
        min-height: 38px !important;
        margin-bottom: 7px !important;
        padding-bottom: 9px !important;
        font-size: .80rem !important;
    }

    .gsc-service-modal .benefit-loan-section .benefit-option {
        grid-template-columns: 30px minmax(0, 1fr) !important;
        column-gap: 10px !important;
        min-height: 64px !important;
        padding: 11px 9px !important;
        border-radius: 7px !important;
    }

    .gsc-service-modal .benefit-loan-section .benefit-checkbox {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        border-radius: 5px !important;
    }

    .gsc-service-modal .benefit-loan-section .benefit-checkbox:checked::after {
        font-size: 15px !important;
    }

    .gsc-service-modal .benefit-loan-section .benefit-option-content {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 2px !important;
    }

    .gsc-service-modal .benefit-loan-section .benefit-option-content strong {
        font-size: .88rem !important;
        line-height: 1.35 !important;
    }

    .gsc-service-modal .benefit-loan-section .benefit-option-content small {
        font-size: .76rem !important;
        line-height: 1.4 !important;
    }

    /* Supporting documents: make the upload target unmistakably tappable. */
    .gsc-service-modal__application .apply-file-drop {
        min-height: 150px !important;
        padding: 24px 16px !important;
        border-radius: 7px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }

    .gsc-service-modal__application .apply-file-drop i {
        font-size: 1.65rem !important;
        margin-bottom: 8px !important;
    }

    .gsc-service-modal__application .apply-file-drop .drop-label {
        font-size: .86rem !important;
        line-height: 1.4 !important;
    }

    .gsc-service-modal__application .apply-file-drop .drop-sub {
        max-width: 28rem !important;
        margin-top: 5px !important;
        font-size: .72rem !important;
        line-height: 1.45 !important;
    }

    /* Final submit action gets enough height to be comfortable with a thumb. */
    .gsc-service-modal__application .apply-submit-row {
        margin-top: 14px !important;
        padding: 0 2px !important;
    }

    .gsc-service-modal__application .apply-submit-btn {
        min-height: 60px !important;
        border-radius: 6px !important;
        font-size: .76rem !important;
    }

    .gsc-service-modal__application .apply-required-note {
        margin-top: 9px !important;
        font-size: .70rem !important;
        line-height: 1.4 !important;
    }

    .gsc-service-modal__application .selected-term-summary {
        padding: 13px 14px !important;
        font-size: .80rem !important;
    }
}

@media (max-width: 430px) {
    .gsc-service-modal__left {
        flex-basis: 30% !important;
        max-height: 30% !important;
    }

    .gsc-service-modal__right {
        flex-basis: 70% !important;
        grid-template-rows: auto minmax(100px, .38fr) minmax(0, 1.62fr) !important;
    }

    .gsc-service-modal .gsc-service-modal__cover {
        margin: 8px 8px 0 !important;
        width: calc(100% - 16px) !important;
    }

    .gsc-service-modal__left-content {
        padding: 10px 11px 14px !important;
    }

    .gsc-service-modal__title {
        font-size: 1.42rem !important;
    }

    .gsc-service-modal__about p {
        font-size: .80rem !important;
    }

    .gsc-service-modal__topbar {
        min-height: 55px !important;
        padding: 8px 10px 7px !important;
    }

    .gsc-service-modal__stepper {
        width: calc(100% - 31px) !important;
        gap: 3px !important;
    }

    .gsc-service-modal__step span {
        width: 27px !important;
        height: 27px !important;
        flex-basis: 27px !important;
        font-size: .55rem !important;
    }

    .gsc-service-modal__info {
        padding: 11px 10px 10px !important;
    }

    .gsc-service-modal__application > .modal-cta {
        padding: 12px 8px 24px !important;
    }

    .gsc-service-modal__application .apply-section {
        padding: 16px 12px !important;
    }

    .gsc-service-modal__application .apply-field input,
    .gsc-service-modal__application .apply-field select,
    .gsc-service-modal__application .apply-field textarea {
        font-size: .98rem !important;
    }
}
/* ==========================================================================
   LOGO-GREEN RECOLOR OVERRIDE  (#30AA28 on pure white)
   PASTE AT THE VERY BOTTOM of services_modern.css, after everything else.
   Gold accents, orange, greys and photo scrims are intentionally untouched.
   ========================================================================== */

/* ---- 1. Tokens: most of the file reads these, so this does the heavy lifting ---- */
:root {
    --gs-forest-950: #30AA28;
    --gs-forest-800: #30AA28;
    --gs-forest-700: #30AA28;
    --gs-green-600:  #2a9622;
    --gs-green-500:  #30AA28;
    --gs-green-400:  #30AA28;
    --gs-mist-50:    #ffffff;
    --gs-mist-100:   #eaf7e9;
    --gs-paper:      #ffffff;
    --gs-line:       #e3ebe2;
    --gs-line-soft:  #eef3ed;
    --gs-gold-500:   #30AA28;
    --gs-gold-100:   #eaf7e9;

    --gs-hero-grad-1: rgba(48, 170, 40, 0.92);
    --gs-hero-grad-2: rgba(42, 150, 34, 0.92);
    --gs-hero-tint:   rgba(48, 170, 40, 0.08);

    --gs-shadow-sm: 0 1px 2px rgba(48,170,40,.06), 0 1px 1px rgba(48,170,40,.04);
    --gs-shadow-md: 0 2px 6px rgba(48,170,40,.07), 0 16px 32px -18px rgba(48,170,40,.30);
    --gs-shadow-lg: 0 4px 10px rgba(48,170,40,.09), 0 32px 64px -28px rgba(48,170,40,.38);
    --gs-shadow-card: 0 1px 2px rgba(48,170,40,.05), 0 10px 24px -16px rgba(48,170,40,.16);
    --gs-shadow-card-hover: 0 2px 4px rgba(48,170,40,.07), 0 28px 48px -22px rgba(48,170,40,.30);

    --gsc-ref-forest:      #30AA28;
    --gsc-ref-forest-deep: #2a9622;
    --gsc-ref-green:       #30AA28;
    --gsc-ref-ivory:       #ffffff;
    --gsc-ref-cream:       #ffffff;
    --gsc-ref-paper:       #ffffff;
    --gsc-ref-ink:         #30AA28;
    --gsc-ref-line:        rgba(48,170,40,.16);
    --gsc-ref-line-soft:   rgba(48,170,40,.09);
}

/* ---- 2. Page + section backgrounds: pure white, no grain/glows ---- */
html, body { background: #ffffff !important; }
.gsc-services-page { background: #ffffff !important; }
.gs-featured-section,
.category-section { background: #ffffff !important; }
.category-section::before,
.gs-featured-section::before { display: none !important; }

/* ---- 3. Browse Services sidebar (both versions) ---- */
.gsc-services-sidebar,
.gsc-svc-directory {
    background: #ffffff !important;
    border-color: rgba(48,170,40,.18) !important;
    box-shadow: 0 10px 30px rgba(48,170,40,.07) !important;
}
.gsc-services-sidebar__search,
.gsc-directory-search,
.gsc-svc-directory__search {
    background: #ffffff !important;
    border-color: rgba(48,170,40,.25) !important;
}
.gsc-services-sidebar__search:focus-within,
.gsc-directory-search:focus-within {
    border-color: #30AA28 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(48,170,40,.10) !important;
}
.gsc-services-sidebar__tab,
.gsc-svc-directory__tab {
    background: #ffffff !important;
    border-color: rgba(48,170,40,.22) !important;
}
.gsc-services-sidebar__tab b { background: rgba(48,170,40,.10) !important; }
.gsc-services-sidebar__tab.is-active,
.gsc-svc-directory__tab.is-active,
.gsc-svc-directory__tab[aria-selected=true] {
    background: #30AA28 !important;
    border-color: #30AA28 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(48,170,40,.22) !important;
}
.gsc-services-sidebar__tab.is-active b { background: rgba(255,255,255,.2) !important; color: #ffffff !important; }
.gsc-services-sidebar__icon,
.gsc-svc-directory__icon,
.gsc-directory-row__icon,
.gsc-other-item__icon {
    background: rgba(48,170,40,.08) !important;
    color: #30AA28 !important;
}
.gsc-services-sidebar__link:hover .gsc-services-sidebar__icon { background: rgba(48,170,40,.15) !important; }
.gsc-services-sidebar__link:focus-visible { background: rgba(48,170,40,.06) !important; }
.gsc-services-sidebar__arrow,
.gsc-svc-directory__arrow,
.gsc-directory-row__arrow,
.gsc-other-item__arrow,
.gsc-card-link i { color: #30AA28 !important; }
.gsc-services-mobile-filter { background: #ffffff !important; border-color: rgba(48,170,40,.22) !important; }

/* ---- 4. Featured / loan / other cards ---- */
.gsc-featured-card,
.gsc-loan-card,
.service-card-modern {
    background: #ffffff !important;
    border-color: rgba(48,170,40,.18) !important;
}
.gsc-featured-card:hover,
.gsc-featured-card:focus-visible,
.gsc-loan-card:hover,
.gsc-loan-card:focus-visible { box-shadow: 0 14px 30px rgba(48,170,40,.12) !important; }
.gsc-featured-card__image,
.gsc-loan-card__image,
.service-card-image { background: #f1f5f0 !important; }
.gsc-service-badge,
.featured-badge {
    background: rgba(48,170,40,.95) !important;
    color: #ffffff !important;
    box-shadow: 0 5px 14px rgba(48,170,40,.25) !important;
}
.gsc-featured-card__meta span,
.service-card-eyebrow,
#other-services-section .service-card-eyebrow { color: #30AA28 !important; }
.gsc-other-item:hover,
.gsc-other-item:focus-visible,
.gsc-directory-row:hover,
.gsc-directory-row:focus-visible { background: rgba(48,170,40,.05) !important; }
.gsc-featured-control { background: #ffffff !important; }
.gsc-featured-control:hover { background: #30AA28 !important; border-color: #30AA28 !important; color: #ffffff !important; }

/* ---- 5. Directory panel ---- */
.gsc-directory-panel {
    background: #ffffff !important;
    border-color: rgba(48,170,40,.18) !important;
}
.gsc-directory-filters button { background: #ffffff !important; border-color: rgba(48,170,40,.22) !important; }
.gsc-directory-filters button.is-active { background: #30AA28 !important; border-color: #30AA28 !important; color: #ffffff !important; }

/* ---- 6. Service modal shell ---- */
.modal-content,
.gsc-service-modal .gsc-service-modal__content,
.gsc-service-modal__left,
.gsc-service-modal__right,
.gsc-service-modal__topbar,
.gsc-service-modal__info,
.gsc-service-modal__application,
.modal-body,
.notice-dialog { background: #ffffff !important; }
.gsc-service-modal__left { border-right-color: rgba(48,170,40,.16) !important; }
.gsc-service-modal__topbar { border-bottom-color: rgba(48,170,40,.16) !important; color: #30AA28 !important; }
.gsc-service-modal__application { border-top-color: rgba(48,170,40,.16) !important; }
.gsc-service-modal__left::-webkit-scrollbar-thumb,
.gsc-service-modal__info::-webkit-scrollbar-thumb,
.gsc-service-modal__application::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb { background: rgba(48,170,40,.30) !important; }

/* Left column text */
.gsc-service-modal__eyebrow,
.gsc-service-modal__title,
.gsc-service-modal__section-label,
.gsc-service-modal__section-label i { color: #30AA28 !important; }
.gsc-service-modal__featured { background: #ffffff !important; }
.gsc-service-modal__service-meta { border-top-color: rgba(48,170,40,.16) !important; }

/* Stepper */
.gsc-service-modal__step.is-active { color: #30AA28 !important; }
.gsc-service-modal__step span { background: #ffffff !important; }
.gsc-service-modal__step.is-active span {
    background: #30AA28 !important;
    border-color: #30AA28 !important;
    color: #ffffff !important;
}
.gsc-service-modal__close { background: #ffffff !important; color: #30AA28 !important; border-color: rgba(48,170,40,.25) !important; }
.gsc-service-modal__close:hover { background: #eaf7e9 !important; color: #30AA28 !important; }

/* Info zone */
.gsc-service-modal__info .modal-section { border-bottom-color: rgba(48,170,40,.16) !important; }
.gsc-service-modal__info .modal-section-title,
.gsc-service-modal__info .modal-section-title i,
.gsc-service-modal__info .req-box h5 { color: #30AA28 !important; }
.gsc-service-modal__info .req-box {
    background: #ffffff !important;
    border-color: rgba(48,170,40,.18) !important;
}
.gsc-service-modal__info .req-list li::before {
    background: rgba(48,170,40,.12) !important;
    color: #30AA28 !important;
}

/* ---- 7. Application workspace ---- */
.gsc-service-modal__application > .modal-cta,
.modal-cta,
.gsc-service-modal__application > .modal-cta h4,
.modal-cta h4 { color: #30AA28 !important; }
.modal-cta { background: #ffffff !important; }

.btn-apply-now,
a.btn-apply-now,
.gsc-service-modal__application .btn-apply-now,
.gsc-service-modal__application a.btn-apply-now,
.apply-submit-btn,
.gsc-service-modal__application .apply-submit-btn,
.notice-btn-primary {
    background: #30AA28 !important;
    border-color: #30AA28 !important;
    color: #ffffff !important;
    box-shadow: 0 7px 18px rgba(48,170,40,.25) !important;
}
.btn-apply-now:hover,
a.btn-apply-now:hover,
.gsc-service-modal__application .btn-apply-now:hover,
.apply-submit-btn:hover,
.gsc-service-modal__application .apply-submit-btn:hover,
.notice-btn-primary:hover {
    background: #2a9622 !important;
    border-color: #2a9622 !important;
}
.modal-cta-btn,
.gsc-service-modal__application .modal-cta-btn {
    background: #ffffff !important;
    border-color: rgba(48,170,40,.5) !important;
    color: #30AA28 !important;
}
.modal-cta-btn:hover,
.gsc-service-modal__application .modal-cta-btn:hover {
    background: #eaf7e9 !important;
    border-color: #30AA28 !important;
}
.apply-login-gate + .apply-actions .modal-cta-btn:first-of-type { color: #30AA28 !important; border-color: #30AA28 !important; }

.apply-section,
.gsc-service-modal__application .apply-section {
    background: #ffffff !important;
    border-color: rgba(48,170,40,.18) !important;
}
.gsc-service-modal__application .apply-section-num {
    background: #ffffff !important;
    color: #30AA28 !important;
}
.apply-section-title,
.gsc-service-modal__application .apply-section-title,
.gsc-service-modal__application .apply-form-wrap::before { color: #30AA28 !important; }

.apply-field input,
.apply-field select,
.apply-field textarea,
.gsc-service-modal__application .apply-field input,
.gsc-service-modal__application .apply-field select,
.gsc-service-modal__application .apply-field textarea {
    background: #ffffff !important;
    border-color: rgba(48,170,40,.30) !important;
    color: #1f2a24 !important;
}
.gsc-service-modal__application .apply-field input:focus,
.gsc-service-modal__application .apply-field select:focus,
.gsc-service-modal__application .apply-field textarea:focus {
    border-color: #30AA28 !important;
    box-shadow: 0 0 0 3px rgba(48,170,40,.12) !important;
}

.term-option-card,
.gsc-service-modal__application .term-option-card {
    background: #ffffff !important;
    border-color: rgba(48,170,40,.25) !important;
}
.term-option-card:hover,
.gsc-service-modal__application .term-option-card:hover { background: #f0faef !important; }
.term-option-card:has(input:checked),
.gsc-service-modal__application .term-option-card:has(input:checked) {
    background: #f0faef !important;
    border-color: #30AA28 !important;
    box-shadow: inset 0 0 0 1px #30AA28 !important;
}
.term-option-content strong,
.gsc-service-modal__application .term-option-content strong { color: #30AA28 !important; }
.term-option-card input[type="radio"] { accent-color: #30AA28 !important; }

.apply-file-drop,
.gsc-service-modal__application .apply-file-drop {
    background: #ffffff !important;
    border-color: rgba(48,170,40,.40) !important;
}
.apply-file-drop i,
.apply-file-drop .drop-label,
.file-name,
.edit-term-btn { color: #30AA28 !important; }

.selected-term-summary,
.gsc-service-modal__application .selected-term-summary {
    background: #f0faef !important;
    border-color: rgba(48,170,40,.25) !important;
    color: #30AA28 !important;
}
.apply-login-gate,
.gsc-service-modal__application .apply-login-gate {
    background: #ffffff !important;
    border-color: rgba(48,170,40,.25) !important;
}
.apply-member-badge { background: rgba(48,170,40,.10) !important; color: #30AA28 !important; }
.apply-member-badge i { color: #30AA28 !important; }
.apply-feedback.success { background: rgba(48,170,40,.10) !important; color: #1f7a1a !important; }

/* ---- 8. Benefit Loan options ---- */
.gsc-service-modal .benefit-loan-section .benefit-box {
    background: #ffffff !important;
    border-color: rgba(48,170,40,.22) !important;
}
.gsc-service-modal .benefit-loan-section .benefit-box-header,
.gsc-service-modal .benefit-loan-section .benefit-box-header i,
.gsc-service-modal .benefit-loan-section .benefit-option,
.gsc-service-modal .benefit-loan-section .benefit-option-content strong,
.benefit-option-content strong { color: #30AA28 !important; }
.gsc-service-modal .benefit-loan-section .benefit-option { border-bottom-color: rgba(48,170,40,.10) !important; }
.gsc-service-modal .benefit-loan-section .benefit-option:hover { background: rgba(48,170,40,.07) !important; }
.gsc-service-modal .benefit-loan-section .benefit-option:has(.benefit-checkbox:checked) {
    background: rgba(48,170,40,.09) !important;
    box-shadow: inset 3px 0 0 #30AA28 !important;
}
.gsc-service-modal .benefit-loan-section .benefit-checkbox { border-color: rgba(48,170,40,.55) !important; }
.gsc-service-modal .benefit-loan-section .benefit-checkbox:checked {
    background: #30AA28 !important;
    border-color: #30AA28 !important;
}
.gsc-service-modal .benefit-loan-section .benefit-checkbox:focus-visible { outline-color: rgba(48,170,40,.40) !important; }

/* ---- 9. Notice dialog ---- */
.notice-dialog { border-color: rgba(48,170,40,.25) !important; }
.notice-dialog h3 { color: #30AA28 !important; }

/* ==========================================================================
   FINAL ABOUT-US PALETTE MATCH — SERVICE PAGE BACKGROUNDS + TEXT COLORS ONLY
   Uses the About Us white-to-light-green background and forest/leaf greens.
   Layout, spacing, photography, interactions, and functionality remain intact.
   ========================================================================== */

:root {
    /* About Us green palette */
    --gs-about-brand: #30AA28;
    --gs-about-action: #27883A;
    --gs-about-action-deep: #1B6A2E;
    --gs-about-forest: #1F5A2D;
    --gs-about-ink: #173E29;
    --gs-about-text: #3E4C42;
    --gs-about-muted: #53625A;
    --gs-about-leaf: #B9DDB5;
    --gs-about-leaf-soft: #E5F1E3;
    --gs-about-sage: #F3F8F2;
    --gs-about-gold: #D6B56D;
    --gs-about-gold-light: #F6E3AE;

    /* Keep existing selectors functional while moving their green tokens
       to the same deeper, more refined palette used by About Us. */
    --gs-forest-950: #173E29;
    --gs-forest-800: #1F5A2D;
    --gs-forest-700: #1F5A2D;
    --gs-green-600: #27883A;
    --gs-green-500: #30AA28;
    --gs-green-400: #6DBA66;
    --gs-mist-50: #F3F8F2;
    --gs-mist-100: #E5F1E3;
    --gs-paper: #FFFFFF;
    --gs-gold-500: #D6B56D;
    --gs-gold-100: #F6E3AE;
    --gs-ink-900: #173E29;
    --gs-ink-700: #3E4C42;
    --gs-ink-500: #53625A;
    --gs-line: #E0EADF;
    --gs-line-soft: #EAF1E8;

    --gsc-ref-forest: #1F5A2D;
    --gsc-ref-forest-deep: #173E29;
    --gsc-ref-green: #27883A;
    --gsc-ref-ivory: #FFFFFF;
    --gsc-ref-cream: #F3F8F2;
    --gsc-ref-paper: #FFFFFF;
    --gsc-ref-ink: #173E29;
    --gsc-ref-line: rgba(31, 90, 45, .16);
    --gsc-ref-line-soft: rgba(31, 90, 45, .09);
}

/* The About Us section's exact white → sage → light-leaf → white gradient,
   with its two subtle green atmospheric glows, now carries the service page. */
html,
body {
    background:
        radial-gradient(ellipse 52% 40% at 20% 34%, rgba(185, 221, 181, .5), transparent 72%),
        radial-gradient(ellipse 44% 36% at 94% 12%, rgba(185, 221, 181, .3), transparent 70%),
        linear-gradient(180deg, #FFFFFF 0%, #F3F8F2 30%, #E9F4E6 64%, #FFFFFF 100%) !important;
    color: #3E4C42;
}

.gsc-services-page {
    background:
        radial-gradient(ellipse 52% 40% at 20% 34%, rgba(185, 221, 181, .5), transparent 72%),
        radial-gradient(ellipse 44% 36% at 94% 12%, rgba(185, 221, 181, .3), transparent 70%),
        linear-gradient(180deg, #FFFFFF 0%, #F3F8F2 30%, #E9F4E6 64%, #FFFFFF 100%) !important;
    color: #3E4C42;
}

/* Keep the main page sections transparent so the shared gradient reads as
   one continuous background instead of separate stacked color blocks. */
.gs-featured-section,
.category-section,
.gs-nav-strip {
    background: transparent !important;
}

/* The old logo-green override disabled the paper-grain/glow planes. Re-enable
   the existing low-contrast texture without changing any layout or sizing. */
.category-section::before,
.gs-featured-section::before {
    display: block !important;
    opacity: .42 !important;
    background:
        radial-gradient(ellipse 54% 44% at 12% 24%, rgba(185, 221, 181, .22), transparent 72%),
        repeating-linear-gradient(0deg, transparent 0 86px, rgba(31, 90, 45, .018) 87px, transparent 88px) !important;
}

/* Headings and supporting copy use the same forest/leaf-green hierarchy as
   About Us. Hero and CTA white-on-photography text are intentionally exempt. */
.category-title,
.gs-featured-header h2,
.modal-section-title,
.gsc-service-modal__title,
.gsc-service-modal__section-label,
.gsc-service-modal__section-label i,
.gsc-service-modal__topbar,
.gsc-service-modal__eyebrow,
.gsc-service-modal__info .modal-section-title,
.gsc-service-modal__info .modal-section-title i,
.gsc-service-modal__info .req-box h5 {
    color: #1F5A2D !important;
}

.category-title i,
.category-badge,
.service-card-eyebrow,
.service-card-eyebrow i,
.view-details-btn,
.gs-nav-link:hover,
.gs-nav-link.is-active,
.gs-nav-link .gs-nav-count,
.modal-section-title i,
.req-list li::before,
.gsc-services-sidebar__icon,
.gsc-svc-directory__icon,
.gsc-directory-row__icon,
.gsc-other-item__icon,
.gsc-services-sidebar__arrow,
.gsc-svc-directory__arrow,
.gsc-directory-row__arrow,
.gsc-other-item__arrow,
.gsc-card-link i,
.gsc-featured-card__meta span,
#other-services-section .service-card-eyebrow,
.gsc-service-modal__step.is-active,
.gsc-service-modal__close,
.gsc-service-modal__eyebrow,
.gsc-service-modal__section-label i,
.apply-section-title,
.gsc-service-modal__application .apply-section-title,
.gsc-service-modal__application .apply-form-wrap::before,
.apply-file-drop i,
.apply-file-drop .drop-label,
.file-name,
.edit-term-btn,
.term-option-content strong,
.gsc-service-modal__application .term-option-content strong,
.gsc-service-modal .benefit-loan-section .benefit-box-header,
.gsc-service-modal .benefit-loan-section .benefit-box-header i,
.gsc-service-modal .benefit-loan-section .benefit-option-content strong,
.benefit-option-content strong {
    color: #27883A !important;
}

.service-name,
.gsc-featured-card__title,
.gsc-loan-card__title,
.gsc-directory-row__title,
.gsc-other-item__title,
.modal-section-title,
.req-box h5,
.apply-section-title {
    color: #173E29 !important;
}

.category-subtitle,
.gs-featured-header p,
.service-description,
.modal-text,
.req-list li,
.gsc-services-page .gsc-featured-card__description,
.gsc-services-page .gsc-loan-card__description,
.gsc-services-page .gsc-directory-row__description,
.gsc-services-page .gsc-other-item__description {
    color: #3E4C42 !important;
}

/* Match the About Us leaf-green hover and selected-state treatment while
   retaining the original components, dimensions, and interaction states. */
.gs-nav-link::after,
.gs-nav-link.is-active::after,
.gs-modal-gallery button.is-active,
.req-box.regular,
.req-box.retirees {
    border-color: #27883A;
}

.gs-nav-link::after,
.gs-nav-link.is-active::after {
    background: #27883A;
}

.service-card-modern:hover {
    border-color: rgba(39, 136, 58, .42) !important;
}

.view-details-btn {
    border-top-color: #EAF1E8;
}

.service-name::after,
.gs-featured-header::after {
    background: #D6B56D !important;
}

.gsc-services-sidebar,
.gsc-svc-directory,
.gsc-directory-panel,
.gsc-featured-card,
.gsc-loan-card,
.service-card-modern,
.modal-content,
.gsc-service-modal .gsc-service-modal__content,
.gsc-service-modal__left,
.gsc-service-modal__right,
.gsc-service-modal__topbar,
.gsc-service-modal__info,
.gsc-service-modal__application,
.modal-body,
.notice-dialog {
    border-color: rgba(31, 90, 45, .16) !important;
}

/* Preserve white text over the photographic hero, CTA band, and photo-based
   modal cover; these are intentionally not recolored to green. */
.services-hero h1,
.services-hero h1 em,
.services-hero p,
.services-hero .gs-eyebrow-pill,
.services-hero .gs-hero-est span:last-child,
.services-hero .gs-hero-btn--ghost,
.services-hero .gs-hero-scroll-cue,
.cta-section-services h2,
.cta-section-services p,
.cta-section-services .gs-cta-eyebrow,
.featured-badge,
.gsc-service-modal__close,
.modal-cover .modal-title,
.modal-cover .modal-header span[style] {
    color: #FFFFFF;
}