/* ==========================================================================
   Golden Sea Security - premium design layer
   --------------------------------------------------------------------------
   Loaded AFTER Content/css/style.css (ftco / Colorlib theme).
   Purpose: raise the visual standard of the existing pages without touching
   any business content, markup contracts or theme classes.
   All rules are additive and namespaced with the "gs-" prefix, except the
   "body.gs-premium" refinements which intentionally polish the shared shell
   (navbar, sections, footer) across every page.
   ========================================================================== */

:root {
    --gs-primary: #31de79;
    --gs-primary-dark: #1fb264;
    --gs-lime: #9ff669;
    --gs-ink: #1b2027;
    --gs-ink-soft: #2b323b;
    --gs-body: #5b6570;
    --gs-line: rgba(27, 32, 39, .10);
    --gs-line-strong: rgba(27, 32, 39, .18);
    --gs-surface: #f5f8f6;
    --gs-radius-xl: 26px;
    --gs-radius-lg: 20px;
    --gs-radius-md: 14px;
    --gs-radius-sm: 9px;
    --gs-shadow-xs: 0 3px 10px rgba(27, 32, 39, .05);
    --gs-shadow-sm: 0 10px 28px rgba(27, 32, 39, .07);
    --gs-shadow-md: 0 22px 55px rgba(27, 32, 39, .11);
    --gs-shadow-lg: 0 34px 80px rgba(27, 32, 39, .18);
    --gs-gradient: linear-gradient(135deg, var(--gs-lime) 0%, var(--gs-primary) 100%);
    --gs-gradient-dark: linear-gradient(145deg, #171c22 0%, #232b34 55%, #14301f 100%);
    --gs-ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   1. Shared shell refinements (apply site wide through _Layout.cshtml)
   -------------------------------------------------------------------------- */

body.gs-premium {
    font-family: "Nunito Sans", "Helvetica Neue", Arial, sans-serif;
    color: var(--gs-body);
    font-size: 16px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body.gs-premium h1,
body.gs-premium h2,
body.gs-premium h3,
body.gs-premium h4,
body.gs-premium h5,
body.gs-premium h6 {
    color: var(--gs-ink);
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.25;
}

body.gs-premium p {
    color: var(--gs-body);
}

body.gs-premium a {
    transition: color .25s var(--gs-ease), background-color .25s var(--gs-ease), border-color .25s var(--gs-ease), transform .25s var(--gs-ease), box-shadow .25s var(--gs-ease);
}

body.gs-premium .heading-section h2 {
    letter-spacing: -.01em;
}

body.gs-premium .heading-section .subheading {
    font-weight: 700;
    letter-spacing: 3px;
    font-size: 13px;
}

/* Buttons: keep the theme gradient, add weight, radius and lift */
body.gs-premium .btn {
    border-radius: 50px;
    font-weight: 700;
    letter-spacing: .4px;
    padding: .85rem 1.9rem;
    border-width: 1px;
    box-shadow: var(--gs-shadow-xs);
}

body.gs-premium .btn:hover,
body.gs-premium .btn:focus {
    transform: translateY(-2px);
    box-shadow: var(--gs-shadow-sm);
}

body.gs-premium .btn.btn-primary {
    border: 1px solid var(--gs-primary) !important;
}

body.gs-premium .gs-btn-lg {
    padding: 1rem 2.6rem !important;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Button that sits on dark / photographic backgrounds */
body.gs-premium .btn.gs-btn-ghost {
    background: rgba(255, 255, 255, .10) !important;
    border: 1px solid rgba(255, 255, 255, .65) !important;
    color: #fff !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

body.gs-premium .btn.gs-btn-ghost:hover,
body.gs-premium .btn.gs-btn-ghost:focus {
    background: #fff !important;
    color: var(--gs-ink) !important;
    border-color: #fff !important;
}

/* Navbar: crisper type, glass surface once the page is scrolled */
body.gs-premium .ftco-navbar-light .navbar-nav .nav-item .nav-link {
    font-weight: 600;
    letter-spacing: .4px;
}

body.gs-premium .ftco-navbar-light.scrolled {
    box-shadow: 0 12px 34px rgba(27, 32, 39, .10);
    background: rgba(255, 255, 255, .96) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

body.gs-premium .ftco_navbar .navbar-brand img {
    filter: drop-shadow(0 4px 12px rgba(27, 32, 39, .12));
}

/* Footer: deeper surface, tidy rhythm */
body.gs-premium .ftco-footer {
    background: var(--gs-gradient-dark);
    padding-top: 5.5rem;
}

body.gs-premium .ftco-footer .ftco-heading-2 {
    color: #fff;
    font-size: 15px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

body.gs-premium .ftco-footer p,
body.gs-premium .ftco-footer .block-23 ul li .text,
body.gs-premium .ftco-footer .block-23 ul li a {
    color: rgba(255, 255, 255, .72);
}

body.gs-premium .ftco-footer .list-unstyled li a {
    color: rgba(255, 255, 255, .72);
    transition: color .25s var(--gs-ease), padding-left .25s var(--gs-ease);
}

body.gs-premium .ftco-footer .list-unstyled li a:hover {
    color: #fff;
    padding-left: 4px;
}

body.gs-premium .ftco-footer .ftco-footer-social li a {
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .06);
    transition: background .25s var(--gs-ease), border-color .25s var(--gs-ease), transform .25s var(--gs-ease);
}

body.gs-premium .ftco-footer .ftco-footer-social li a:hover {
    background: var(--gs-gradient);
    border-color: transparent;
    transform: translateY(-3px);
}

body.gs-premium .ftco-footer .ftco-footer-social li a span {
    color: #fff;
}

/* --------------------------------------------------------------------------
   2. Section + heading system used by the rebuilt home page
   -------------------------------------------------------------------------- */

.gs-section {
    position: relative;
    padding: 6rem 0;
}

.gs-section--tight {
    padding: 4rem 0;
}

.gs-section--surface {
    background: var(--gs-surface);
}

.gs-section--dark {
    background: var(--gs-gradient-dark);
    color: rgba(255, 255, 255, .78);
}

.gs-section--dark h2,
.gs-section--dark h3,
.gs-section--dark h4,
.gs-section--dark .gs-title {
    color: #fff;
}

.gs-section--dark p {
    color: rgba(255, 255, 255, .78);
}

.gs-head {
    margin-bottom: 3.25rem;
}

.gs-head--center {
    text-align: center;
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}

.gs-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gs-primary-dark);
    background: rgba(49, 222, 121, .10);
    border: 1px solid rgba(49, 222, 121, .28);
    border-radius: 50px;
    padding: .45rem 1.05rem;
    margin-bottom: 1.1rem;
}

.gs-section--dark .gs-eyebrow {
    color: #bff9d5;
    background: rgba(49, 222, 121, .14);
    border-color: rgba(49, 222, 121, .34);
}

.gs-title {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 1rem;
}

.gs-title--lg {
    font-size: 3.1rem;
}

.gs-head--center .gs-rule {
    margin-left: auto;
    margin-right: auto;
}

.gs-rule {
    display: block;
    width: 74px;
    height: 4px;
    border-radius: 50px;
    background: var(--gs-gradient);
    margin: 1.15rem 0 1.35rem;
}

.gs-lead {
    font-size: 1.05rem;
    color: var(--gs-body);
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   3. Hero (home page slider) - full bleed banner over the three photo slides

   The theme lays the hero out as a two column brochure: a text half standing
   on the page background and a photo half (theme class .one-third) pinned to
   the right and pushed behind the page with z-index -1. The rules below
   re-cut that very same markup - no element is added or removed - into an
   edge to edge banner:

     .one-third            becomes the full bleed background layer
     .one-third .overlay   becomes the legibility scrim painted over it
     .one-forth / .text    become the copy block, on the page column

   Geometry contract (desktop, 1440px viewport):
     * background layer ... x 0 -> 1440, the whole width of the slide
     * copy column ........ the same 1140px column every other section uses,
                            so the headline starts on the page grid
     * slide indicator .... bottom left, aligned to that same column
   The home page opts into body.gs-solidnav (section 13b) because the theme's
   transparent navbar carries dark type, which a dark hero would swallow.
   -------------------------------------------------------------------------- */

#home-section.hero {
    position: relative;
    overflow: hidden;
    background: #0d1116;
    /* Width of the page column the copy and the slide indicator use. */
    --gs-hero-column: 100%;
    --gs-hero-gutter: 15px;
    /* Presence of the banner photography. 1 keeps the photo panel at full
       strength; a lower value lets the page's near black backdrop show
       through, so busy or very bright imagery settles down behind the copy.
       Every slide inherits this one dial. */
    --gs-hero-photo-opacity: .8;
}

@media (min-width: 576px) {
    #home-section.hero { --gs-hero-column: 540px; }
}

@media (min-width: 768px) {
    #home-section.hero { --gs-hero-column: 720px; }
}

@media (min-width: 992px) {
    #home-section.hero { --gs-hero-column: 960px; }
}

@media (min-width: 1200px) {
    #home-section.hero { --gs-hero-column: 1140px; }
}

#home-section .owl-carousel.home-slider,
#home-section .owl-carousel.home-slider .slider-item {
    min-height: 560px;
    max-height: 940px;
}

#home-section .owl-carousel.home-slider .slider-item {
    overflow: hidden;
}

/* Background layer: the theme's right hand photo panel, re-cut to full bleed.
   The dark tint is mixed into the photo itself with multiply, so a bright
   daylight photo settles into the same cinematic register as the rest, and
   --gs-hero-photo-opacity (defined on #home-section.hero) decides how strongly
   that photo panel shows through at all. The scrim painted over the photo is a
   child of this layer, so it fades with it: on the copy side the scrim is
   already close to opaque, so legibility behind the type does not move. */
#home-section .owl-carousel.home-slider .slider-item .slider-text {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: auto !important;
}

#home-section .owl-carousel.home-slider .slider-item .slider-text .one-third {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 0;
    background-color: #a2a8ae;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    /* --gs-hero-photo-opacity: the banner photo's own presence. */
    opacity: var(--gs-hero-photo-opacity, 1);
    -webkit-transform: scale(1.06);
    transform: scale(1.06);
    -webkit-animation: gs-hero-drift 30s var(--gs-ease) infinite alternate;
    animation: gs-hero-drift 30s var(--gs-ease) infinite alternate;
    will-change: transform;
}

@keyframes gs-hero-drift {
    from { -webkit-transform: scale(1.06) translate3d(0, 0, 0); transform: scale(1.06) translate3d(0, 0, 0); }
    to { -webkit-transform: scale(1.16) translate3d(-1.6%, -1.2%, 0); transform: scale(1.16) translate3d(-1.6%, -1.2%, 0); }
}

@media (prefers-reduced-motion: reduce) {
    #home-section .owl-carousel.home-slider .slider-item .slider-text .one-third {
        -webkit-animation: none;
        animation: none;
    }
}

/* Legibility scrim: heaviest on the copy side, opening up to the right, with a
   soft lime glow low on the left and a bottom fade behind the slide dots. */
#home-section .owl-carousel.home-slider .slider-item .one-third .overlay {
    opacity: 1;
    background:
        radial-gradient(95% 70% at 4% 96%, rgba(49, 222, 121, .14) 0%, rgba(49, 222, 121, 0) 60%),
        linear-gradient(90deg, rgba(8, 11, 15, .95) 0%, rgba(8, 11, 15, .88) 34%, rgba(8, 11, 15, .56) 64%, rgba(8, 11, 15, .26) 100%),
        linear-gradient(180deg, rgba(8, 11, 15, .50) 0%, rgba(8, 11, 15, 0) 26%, rgba(8, 11, 15, .08) 58%, rgba(8, 11, 15, .74) 100%);
}

/* Vignette on the outer slide overlay: below the copy, above the photo. */
#home-section .owl-carousel.home-slider .slider-item > .overlay {
    opacity: 1;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(125% 115% at 50% 45%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .5) 100%);
}

#home-section .owl-carousel.home-slider .slider-item .slider-text .one-forth {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0;
    z-index: 3;
}

/* The copy block: the theme centres it in a 1200px box at a 50% max width.
   Here it becomes the full page column, vertically centred by the flex
   container the markup already carries (d-flex align-items-center). */
#home-section .owl-carousel.home-slider .slider-item .slider-text .one-forth .text {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    -webkit-transform: none;
    transform: none;
    max-width: var(--gs-hero-column);
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--gs-hero-gutter);
    text-align: left;
    z-index: 3;
}

/* Call to action: the markup carries the bootstrap helpers px-5 py-3 mt-3,
   so the paddings have to be forced. */
#home-section .owl-carousel.home-slider .slider-item .slider-text .text > p {
    margin: 2rem 0 0;
}

#home-section .owl-carousel.home-slider .slider-item .slider-text .text .btn.btn-primary {
    /* mt-3 from the markup would add to the paragraph spacing above. */
    margin-top: .75rem !important;
    border-radius: 50px;
    padding: 1.05rem 2.7rem !important;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    -webkit-box-shadow: 0 20px 45px rgba(49, 222, 121, .30);
    box-shadow: 0 20px 45px rgba(49, 222, 121, .30);
}

/* The copy sits on the darkened photo, so the theme's #000 type has to be
   repainted: the theme colours h1 and .subheading #000 from 992px up. */
#home-section .owl-carousel.home-slider .slider-item .slider-text h1 {
    color: #fff;
    font-size: clamp(2.35rem, 1.35rem + 2.7vw, 4.05rem);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -.022em;
    margin-bottom: 1.15rem !important;
    text-shadow: 0 22px 55px rgba(0, 0, 0, .55);
}

#home-section .owl-carousel.home-slider .slider-item .slider-text h1 span {
    display: inline-block;
    background: var(--gs-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

#home-section .owl-carousel.home-slider .slider-item .slider-text .gs-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50px;
    padding: .5rem 1.15rem;
    margin-bottom: 1.4rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

#home-section .owl-carousel.home-slider .slider-item .slider-text .gs-hero-badge em {
    font-style: normal;
    color: var(--gs-lime);
}

#home-section .gs-hero-list {
    list-style: none;
    padding: 0;
    margin: 1.55rem 0 .35rem;
    /* The markup shows this list from lg up (d-none d-lg-block d-xl-block);
       repeated here because the flex row below has to out-rank that utility. */
    display: none !important;
    flex-wrap: wrap;
    gap: .55rem;
    max-width: 640px;
}

@media (min-width: 992px) {
    #home-section .gs-hero-list {
        display: flex !important;
    }
}

#home-section .gs-hero-list li {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: rgba(255, 255, 255, .95);
    font-size: 14px;
    font-weight: 600;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .20);
    border-radius: 50px;
    padding: .5rem 1.1rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

#home-section .gs-hero-list li:before {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gs-gradient);
    box-shadow: 0 0 0 3px rgba(49, 222, 121, .22);
}

.gs-section--dark .gs-lead {
    color: rgba(255, 255, 255, .74);
}

/* Contact details: the published phone / WhatsApp / mail strings, re-cut as a
   row of glass chips. The markup's <br> separators are dropped because the
   flex row does the wrapping now. */
#home-section .owl-carousel.home-slider .slider-item .slider-text .gs-hero-contact {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: 1.9rem;
    /* The markup separates every icon from its own link with &nbsp;. Dropping
       the container's font size collapses that stray text run, so each icon
       sits tight against its pill and the pairs carry the spacing instead
       (see the icon margin below). */
    font-size: 0;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
}

/* Everything that carries text gets its real size back. */
#home-section .owl-carousel.home-slider .slider-item .slider-text .gs-hero-contact a,
#home-section .owl-carousel.home-slider .slider-item .slider-text .gs-hero-contact .gs-hero-mail,
#home-section .owl-carousel.home-slider .slider-item .slider-text .gs-hero-contact span[class^="icon-"] {
    font-size: 14px;
}

/* Space between one icon+link pair and the next. */
#home-section .owl-carousel.home-slider .slider-item .slider-text .gs-hero-contact > span[class^="icon-"]:not(:first-child) {
    margin-left: 1rem;
}

#home-section .owl-carousel.home-slider .slider-item .slider-text .gs-hero-contact br {
    display: none;
}

#home-section .owl-carousel.home-slider .slider-item .slider-text .gs-hero-contact a,
#home-section .owl-carousel.home-slider .slider-item .slider-text .gs-hero-contact .gs-hero-mail {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: rgba(255, 255, 255, .94);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .2px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50px;
    padding: .5rem 1.05rem;
    margin: 0;
    /* A chip is a unit: it wraps to the next row rather than breaking in two. */
    white-space: nowrap;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    -webkit-transition: background .25s var(--gs-ease), border-color .25s var(--gs-ease), color .25s var(--gs-ease);
    transition: background .25s var(--gs-ease), border-color .25s var(--gs-ease), color .25s var(--gs-ease);
}

/* The mail chip wraps its own link, so the inner anchor must not paint a
   second chip inside the first. */
#home-section .owl-carousel.home-slider .slider-item .slider-text .gs-hero-contact .gs-hero-mail a {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
    gap: 0;
    color: inherit;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* !important, and only from lg up: the markup carries the bootstrap utilities
   d-none d-lg-block d-xl-block on the mail chip, so below 992px the chip has
   to stay hidden and above it has to become a flex item of the chip row. */
@media (min-width: 992px) {
    #home-section .owl-carousel.home-slider .slider-item .slider-text .gs-hero-contact .gs-hero-mail {
        display: inline-flex !important;
    }
}

/* Hover state, direct children only: the mail chip's own link must not grow a
   second lime pill inside the chip. */
#home-section .owl-carousel.home-slider .slider-item .slider-text .gs-hero-contact > a:hover,
#home-section .owl-carousel.home-slider .slider-item .slider-text .gs-hero-contact > a:focus {
    color: #fff;
    background: rgba(49, 222, 121, .16);
    border-color: rgba(157, 246, 105, .45);
}

#home-section .owl-carousel.home-slider .slider-item .slider-text .gs-hero-contact span[class^="icon-"] {
    color: var(--gs-lime);
    margin-right: 0;
}

/* Slide indicator: minimal bars instead of the theme rings, lined up with the
   copy column. It sits above the trust band, which the theme pulls up over the
   bottom of the hero by 70px (40px below lg) - that overlap is why the theme
   hides the dots from lg up in the first place. */
#home-section .owl-carousel .owl-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 96px;
    z-index: 4;
    max-width: var(--gs-hero-column);
    margin: 0 auto;
    padding: 0 var(--gs-hero-gutter);
    text-align: left;
}

@media (min-width: 992px) {
    #home-section .owl-carousel.home-slider .owl-dots {
        display: block;
    }
}

@media (max-width: 991.98px) {
    #home-section .owl-carousel.home-slider .owl-dots {
        bottom: 56px;
    }
}

#home-section .owl-carousel .owl-dots .owl-dot {
    width: 30px;
    height: 4px;
    border-radius: 50px;
    background: rgba(255, 255, 255, .42);
    margin: 0 5px;
}

#home-section .owl-carousel .owl-dots .owl-dot:after {
    display: none;
}

#home-section .owl-carousel .owl-dots .owl-dot.active {
    width: 52px;
    background: var(--gs-gradient);
}

/* --------------------------------------------------------------------------
   4. Trust / assurance band and experience counter
   -------------------------------------------------------------------------- */

.gs-trust {
    position: relative;
    z-index: 5;
    margin-top: -70px;
}

.gs-trust__shell {
    background: #fff;
    border: 1px solid var(--gs-line);
    border-radius: var(--gs-radius-xl);
    box-shadow: var(--gs-shadow-md);
    padding: 2.4rem 2.2rem;
}

.gs-trust__row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.gs-trust__aside {
    flex: 0 0 100%;
    border-bottom: 1px solid var(--gs-line);
    padding-bottom: 1.8rem;
    margin-bottom: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
    text-align: center;
    flex-wrap: wrap;
}

.gs-trust__aside img {
    height: 68px;
    width: auto;
}

.gs-counter {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.gs-counter .number {
    font-size: 3.4rem;
    font-weight: 800;
    line-height: 1;
    background: var(--gs-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gs-counter .gs-counter__label {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gs-ink);
}

.gs-assurance {
    height: 100%;
    display: flex;
    gap: .95rem;
    align-items: flex-start;
    padding: .35rem .75rem;
}

.gs-assurance__icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gs-gradient);
    color: #fff;
    font-size: 17px;
    box-shadow: 0 10px 22px rgba(49, 222, 121, .28);
}

.gs-assurance__icon span {
    color: #fff;
}

.gs-assurance p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--gs-body);
}

/* --------------------------------------------------------------------------
   5. Service cards grid (mirrors the 9 services already published)
   -------------------------------------------------------------------------- */

.gs-services__grid {
    display: flex;
    flex-wrap: wrap;
    margin-left: -.9rem;
    margin-right: -.9rem;
}

.gs-services__grid > [class*="col-"] {
    padding-left: .9rem;
    padding-right: .9rem;
    margin-bottom: 1.8rem;
}

.gs-service-card {
    position: relative;
    height: 100%;
    background: #fff;
    border: 1px solid var(--gs-line);
    border-radius: var(--gs-radius-lg);
    padding: 2rem 1.7rem 1.8rem;
    overflow: hidden;
    box-shadow: var(--gs-shadow-xs);
    transition: transform .4s var(--gs-ease), box-shadow .4s var(--gs-ease), border-color .4s var(--gs-ease);
}

.gs-service-card:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gs-gradient);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .45s var(--gs-ease);
}

.gs-service-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--gs-shadow-md);
    border-color: rgba(49, 222, 121, .35);
}

.gs-service-card:hover:before {
    transform: scaleX(1);
}

.gs-service-card__icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: rgba(49, 222, 121, .12);
    color: var(--gs-primary-dark);
    margin-bottom: 1.3rem;
    transition: background .4s var(--gs-ease), color .4s var(--gs-ease);
}

.gs-service-card__icon span {
    color: inherit;
}

.gs-service-card:hover .gs-service-card__icon {
    background: var(--gs-gradient);
    color: #fff;
}

.gs-service-card:hover .gs-service-card__icon span {
    color: #fff;
}

.gs-service-card h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: .7rem;
    line-height: 1.35;
}

.gs-service-card h3 a {
    color: var(--gs-ink);
}

.gs-service-card h3 a:hover {
    color: var(--gs-primary-dark);
}

.gs-service-card p {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--gs-body);
    margin-bottom: 1.35rem;
}

.gs-service-card__more {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--gs-primary-dark);
}

.gs-service-card__more:hover {
    color: var(--gs-ink);
}

/* --------------------------------------------------------------------------
   6. Split intro ("Who we are?") + vision / mission panels
   -------------------------------------------------------------------------- */

.gs-split {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.gs-split__media {
    position: relative;
    border-radius: var(--gs-radius-xl);
    overflow: hidden;
    box-shadow: var(--gs-shadow-md);
    min-height: 420px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.gs-split__media:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(17, 21, 26, 0) 40%, rgba(17, 21, 26, .55) 100%);
}

.gs-split__badge {
    position: absolute;
    left: 1.5rem;
    bottom: 1.5rem;
    z-index: 2;
    background: rgba(255, 255, 255, .96);
    border-radius: var(--gs-radius-md);
    padding: 1rem 1.35rem;
    box-shadow: var(--gs-shadow-sm);
    display: inline-flex;
    align-items: center;
    gap: 1rem;
}

.gs-split__badge img {
    height: 46px;
    width: auto;
}

.gs-split__badge strong {
    display: block;
    font-size: 20px;
    font-weight: 800;
    color: var(--gs-ink);
    line-height: 1.1;
}

.gs-split__badge span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gs-body);
}

.gs-split h2 {
    font-size: 1.9rem;
    font-weight: 800;
    margin-bottom: 1rem;
}

.gs-split p {
    font-size: 15.5px;
    line-height: 1.85;
}

.gs-panel {
    height: 100%;
    background: #fff;
    border: 1px solid var(--gs-line);
    border-radius: var(--gs-radius-lg);
    padding: 2.1rem 1.9rem;
    box-shadow: var(--gs-shadow-xs);
    transition: transform .4s var(--gs-ease), box-shadow .4s var(--gs-ease);
}

.gs-panel:hover {
    transform: translateY(-6px);
    box-shadow: var(--gs-shadow-md);
}

.gs-panel__icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gs-gradient);
    color: #fff;
    font-size: 21px;
    margin-bottom: 1.15rem;
    box-shadow: 0 12px 26px rgba(49, 222, 121, .26);
}

.gs-panel__icon span {
    color: #fff;
}

.gs-section--dark .gs-panel {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .12);
    box-shadow: none;
}

.gs-section--dark .gs-panel:hover {
    background: rgba(255, 255, 255, .08);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}

.gs-section--dark .gs-panel h3 {
    color: #fff;
    font-size: 19px;
    margin-bottom: .8rem;
}

.gs-section--dark .gs-panel p {
    color: rgba(255, 255, 255, .76);
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   7. Gallery preview strip
   -------------------------------------------------------------------------- */

.gs-gallery {
    display: flex;
    flex-wrap: wrap;
    margin-left: -.65rem;
    margin-right: -.65rem;
}

.gs-gallery__item {
    padding: .65rem;
}

.gs-gallery__frame {
    position: relative;
    display: block;
    height: 230px;
    border-radius: var(--gs-radius-md);
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    box-shadow: var(--gs-shadow-xs);
}

.gs-gallery__frame:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(17, 21, 26, 0) 45%, rgba(17, 21, 26, .62) 100%);
    opacity: 0;
    transition: opacity .4s var(--gs-ease);
}

.gs-gallery__frame:hover:after {
    opacity: 1;
}

.gs-gallery__frame i {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    opacity: 0;
    transform: scale(.85);
    transition: opacity .4s var(--gs-ease), transform .4s var(--gs-ease);
}

.gs-gallery__frame:hover i {
    opacity: 1;
    transform: scale(1);
}

/* --------------------------------------------------------------------------
   8. Call to action band (reuses the published contact details)
   -------------------------------------------------------------------------- */

.gs-cta {
    position: relative;
    overflow: hidden;
    background: var(--gs-gradient-dark);
    border-radius: var(--gs-radius-xl);
    padding: 3.2rem 2.6rem;
    box-shadow: var(--gs-shadow-lg);
}

.gs-cta:before {
    content: "";
    position: absolute;
    width: 380px;
    height: 380px;
    right: -120px;
    top: -140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(49, 222, 121, .34) 0%, rgba(49, 222, 121, 0) 70%);
}

.gs-cta:after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    left: -90px;
    bottom: -110px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(159, 246, 105, .22) 0%, rgba(159, 246, 105, 0) 70%);
}

.gs-cta__inner {
    position: relative;
    z-index: 2;
}

.gs-cta .gs-title {
    color: #fff;
    margin-bottom: .75rem;
}

.gs-cta p {
    color: rgba(255, 255, 255, .78);
    font-size: 15.5px;
    margin-bottom: 0;
}

.gs-cta__list {
    list-style: none;
    padding: 0;
    margin: 1.7rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.gs-cta__list li {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: #fff;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50px;
    padding: .6rem 1.2rem;
    font-size: 14px;
    font-weight: 600;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.gs-cta__list li span[class^="icon-"] {
    color: var(--gs-lime);
}

.gs-cta__list a {
    color: #fff;
}

.gs-cta__list a:hover {
    color: var(--gs-lime);
}

/* --------------------------------------------------------------------------
   9. Floating contact actions (existing phone / WhatsApp numbers)
   -------------------------------------------------------------------------- */

.gs-fab {
    position: fixed;
    right: 18px;
    bottom: 22px;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.gs-fab a {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    box-shadow: var(--gs-shadow-md);
}

.gs-fab a span {
    color: #fff;
}

.gs-fab a:after {
    content: attr(data-gs-label);
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--gs-ink);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
    padding: .4rem .7rem;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s var(--gs-ease);
}

.gs-fab a:hover:after,
.gs-fab a:focus:after {
    opacity: 1;
}

.gs-fab__call {
    background: var(--gs-gradient);
}

.gs-fab__wa {
    background: #25d366;
    animation: gs-fab-pulse 2.6s infinite;
}

@keyframes gs-fab-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, .55);
    }

    70% {
        box-shadow: 0 0 0 16px rgba(37, 211, 102, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* --------------------------------------------------------------------------
   10. Clients carousel polish (shared partial, shown on every page)
   -------------------------------------------------------------------------- */

body.gs-premium .ftco-project .project .img {
    border-radius: var(--gs-radius-md);
    overflow: hidden;
    background: #fff;
    box-shadow: var(--gs-shadow-sm);
    transition: transform .4s var(--gs-ease), box-shadow .4s var(--gs-ease);
}

body.gs-premium .ftco-project .project .img:hover {
    transform: translateY(-6px);
    box-shadow: var(--gs-shadow-md);
}

body.gs-premium .ftco-project .project {
    margin-bottom: 24px;
    overflow: visible;
}

body.gs-premium .ftco-project .project img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 190px;
    object-fit: contain;
    padding: 1.1rem;
    background: #fff;
    border-radius: var(--gs-radius-md);
}

body.gs-premium .ftco-project .project:hover img,
body.gs-premium .ftco-project .project:focus img {
    transform: scale(1.04);
}

/* The shared carousel prints placeholder captions ("Work Name") on hover -
   suppressed visually so only the real client logos are shown. */
body.gs-premium .ftco-project .project .text {
    display: none;
}

/* --------------------------------------------------------------------------
   11. Responsive tuning
   -------------------------------------------------------------------------- */

@media (max-width: 1199.98px) {
    .gs-title {
        font-size: 2.3rem;
    }

    .gs-title--lg {
        font-size: 2.7rem;
    }

    #home-section .owl-carousel.home-slider .slider-item .slider-text h1 {
        font-size: 3rem;
    }
}

@media (max-width: 991.98px) {
    .gs-section {
        padding: 4.5rem 0;
    }

    .gs-section--tight {
        padding: 3rem 0;
    }

    .gs-head {
        margin-bottom: 2.4rem;
    }

    .gs-title,
    .gs-title--lg {
        font-size: 2.1rem;
    }

    #home-section .owl-carousel.home-slider .slider-item .slider-text h1 {
        font-size: 2.4rem;
    }

    .gs-trust {
        margin-top: -40px;
    }

    .gs-trust__shell {
        padding: 2rem 1.5rem;
    }

    .gs-split__media {
        min-height: 340px;
        margin-bottom: 2.2rem;
    }

    .gs-cta {
        padding: 2.5rem 1.8rem;
    }

    .gs-counter .number {
        font-size: 2.7rem;
    }
}

@media (max-width: 767.98px) {
    .gs-section {
        padding: 3.6rem 0;
    }

    .gs-eyebrow {
        letter-spacing: 2px;
        font-size: 11px;
    }

    .gs-title,
    .gs-title--lg {
        font-size: 1.75rem;
    }

    #home-section .owl-carousel.home-slider .slider-item .slider-text h1 {
        font-size: 1.95rem;
    }

    /* Contact chips (section 3) wrap on their own now; just tighten them. */
    #home-section .owl-carousel.home-slider .slider-item .slider-text .gs-hero-contact {
        gap: .5rem;
    }

    #home-section .owl-carousel.home-slider .slider-item .slider-text .gs-hero-contact a,
    #home-section .owl-carousel.home-slider .slider-item .slider-text .gs-hero-contact .gs-hero-mail {
        padding: .45rem .9rem;
        font-size: 13px;
    }

    .gs-trust {
        margin-top: 0;
        padding: 0 12px;
    }

    .gs-trust__shell {
        border-radius: var(--gs-radius-lg);
    }

    .gs-assurance {
        padding: .35rem 0;
    }

    .gs-gallery__frame {
        height: 180px;
    }

    .gs-cta__list li {
        width: 100%;
        justify-content: flex-start;
    }

    .gs-fab {
        right: 12px;
        bottom: 14px;
    }

    .gs-fab a {
        width: 50px;
        height: 50px;
        font-size: 19px;
    }

    .gs-fab a:after {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   12. Accessibility helpers
   -------------------------------------------------------------------------- */

body.gs-premium a:focus-visible,
body.gs-premium button:focus-visible,
body.gs-premium input:focus-visible,
body.gs-premium textarea:focus-visible,
body.gs-premium select:focus-visible {
    outline: 3px solid rgba(49, 222, 121, .65);
    outline-offset: 2px;
}

.gs-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    body.gs-premium * {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    .gs-fab__wa {
        animation: none;
    }
}

/* --------------------------------------------------------------------------
   13. Shared photo page header + Services page (sticky service index,
       service details)

   The .gs-pagehead band below began life on the Services page and is now the
   shared header of every menu page (Services, About, Contact, Gallery,
   Clients, Request Quote, Enrollment Form): eyebrow, page title, rule and one
   lead line of copy already published on that page. Pages simply drop the
   section in and set ViewBag.BodyClass = "gs-solidnav" (section 13b).
   -------------------------------------------------------------------------- */

.gs-pagehead {
    position: relative;
    padding: 10rem 0 5rem;
    background-color: #171c22;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.gs-pagehead:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, rgba(15, 19, 24, .95) 0%, rgba(15, 19, 24, .84) 45%, rgba(20, 48, 31, .78) 100%);
}

.gs-pagehead .container {
    position: relative;
    z-index: 2;
}

.gs-pagehead__inner {
    max-width: 940px;
}

.gs-pagehead h1.gs-title {
    color: #fff;
    margin-bottom: .4rem;
}

.gs-pagehead .gs-eyebrow {
    color: #bff9d5;
    background: rgba(49, 222, 121, .14);
    border-color: rgba(49, 222, 121, .34);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Lead paragraph inside a banner: the light surface variant of .gs-lead,
   which is otherwise tuned for the light page background. */
.gs-pagehead .gs-lead {
    color: rgba(255, 255, 255, .88);
    max-width: 780px;
}

/* Quick jump chips: the published service names as real anchors */
.gs-jump {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: .35rem;
}

.gs-jump a {
    display: inline-flex;
    align-items: center;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .3px;
    color: rgba(255, 255, 255, .9);
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50px;
    padding: .45rem 1.05rem;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.gs-jump a:hover,
.gs-jump a:focus {
    color: #fff;
    background: var(--gs-gradient);
    border-color: transparent;
    transform: translateY(-2px);
}

/* Sticky service index (replaces the old bootstrap nav-pills column) */
.gs-servnav {
    position: sticky;
    top: 100px;
    background: #fff;
    border: 1px solid var(--gs-line);
    border-radius: var(--gs-radius-lg);
    padding: 1.5rem 1.2rem;
    box-shadow: var(--gs-shadow-sm);
    margin-bottom: 2.5rem;
}

.gs-servnav__title {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gs-primary-dark);
    padding: .1rem .6rem 1rem;
}

.gs-servnav__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gs-servnav__list li + li {
    border-top: 1px solid var(--gs-line);
}

.gs-servnav__list a {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .7rem .6rem;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--gs-ink-soft);
    border-radius: var(--gs-radius-sm);
}

.gs-servnav__list a span {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 800;
    color: var(--gs-primary-dark);
}

.gs-servnav__list a:hover,
.gs-servnav__list a:focus {
    background: rgba(49, 222, 121, .10);
    color: var(--gs-primary-dark);
}
/* Anchored service detail cards (the ids v-pills-1 ... v-pills-9 are kept from
   the published markup so the deep links used on the home page still land here) */
.gs-service-detail {
    display: flex;
    gap: 1.5rem;
    background: #fff;
    border: 1px solid var(--gs-line);
    border-radius: var(--gs-radius-lg);
    padding: 2rem 1.9rem;
    box-shadow: var(--gs-shadow-xs);
    scroll-margin-top: 130px;
    transition: transform .4s var(--gs-ease), box-shadow .4s var(--gs-ease), border-color .4s var(--gs-ease);
}

.gs-service-detail + .gs-service-detail {
    margin-top: 1.4rem;
}

.gs-service-detail:hover {
    transform: translateY(-4px);
    box-shadow: var(--gs-shadow-md);
    border-color: rgba(49, 222, 121, .35);
}

.gs-service-detail:target {
    border-color: rgba(49, 222, 121, .6);
    box-shadow: 0 0 0 4px rgba(49, 222, 121, .16), var(--gs-shadow-sm);
}

.gs-service-detail__icon {
    flex: 0 0 auto;
    width: 60px;
    height: 60px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: rgba(49, 222, 121, .12);
    color: var(--gs-primary-dark);
    transition: background .4s var(--gs-ease), color .4s var(--gs-ease);
}

.gs-service-detail__icon span {
    color: inherit;
}

.gs-service-detail:hover .gs-service-detail__icon,
.gs-service-detail:target .gs-service-detail__icon {
    background: var(--gs-gradient);
    color: #fff;
}

.gs-service-detail__body {
    min-width: 0;
}

.gs-service-detail h2 {
    font-size: 1.35rem;
    font-weight: 800;
    margin-bottom: .65rem;
}

.gs-service-detail p {
    font-size: 15.5px;
    line-height: 1.85;
    margin-bottom: 1.15rem;
}

.gs-service-detail__more {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--gs-primary-dark);
}

.gs-service-detail__more:hover {
    color: var(--gs-ink);
}

/* Highlights strip (the four short service summaries published on the page) */
.gs-highlight {
    height: 100%;
    background: #fff;
    border: 1px solid var(--gs-line);
    border-radius: var(--gs-radius-lg);
    padding: 1.9rem 1.6rem;
    box-shadow: var(--gs-shadow-xs);
    transition: transform .4s var(--gs-ease), box-shadow .4s var(--gs-ease), border-color .4s var(--gs-ease);
}

.gs-highlight:hover {
    transform: translateY(-6px);
    box-shadow: var(--gs-shadow-md);
    border-color: rgba(49, 222, 121, .35);
}

.gs-highlight__icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    background: rgba(49, 222, 121, .12);
    color: var(--gs-primary-dark);
    margin-bottom: 1rem;
}

.gs-highlight__icon span {
    color: inherit;
}

.gs-highlight h3 {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: .5rem;
}

.gs-highlight p {
    font-size: 14.5px;
    line-height: 1.75;
    margin-bottom: 0;
}

@media (max-width: 991.98px) {
    .gs-pagehead {
        padding: 8rem 0 3.5rem;
    }

    .gs-servnav {
        position: static;
        top: auto;
        padding: 1.15rem 1rem;
        margin-bottom: 2rem;
    }

    .gs-servnav__title {
        padding-bottom: .8rem;
    }

    .gs-servnav__list {
        display: flex;
        flex-wrap: wrap;
        gap: .45rem;
    }

    .gs-servnav__list li + li {
        border-top: 0;
    }

    .gs-servnav__list a {
        gap: 0;
        padding: .48rem .95rem;
        font-size: 13px;
        background: var(--gs-surface);
        border: 1px solid var(--gs-line);
        border-radius: 50px;
    }

    .gs-servnav__list a span {
        display: none;
    }

    .gs-service-detail {
        flex-direction: column;
        gap: 1.05rem;
        padding: 1.6rem 1.4rem;
        scroll-margin-top: 100px;
    }
}

@media (max-width: 767.98px) {
    .gs-pagehead {
        padding: 7rem 0 3rem;
    }

    .gs-jump a {
        font-size: 12px;
        padding: .4rem .85rem;
    }

    .gs-service-detail h2 {
        font-size: 1.2rem;
    }

    .gs-service-detail p {
        font-size: 15px;
    }
}

/* --------------------------------------------------------------------------
   13b. Solid navbar surface (body.gs-solidnav)

   The shared theme navbar is a transparent bar carrying dark type, made to
   sit over a light hero, so on a page whose header zone is dark - the
   Services photo banner, the testimony band, the home hero overlay - that
   menu and the dark logo vanish into the background. Pages set
   ViewBag.BodyClass = "gs-solidnav" to open the bar on the same frosted
   light surface it already uses once the page is scrolled, which is also how
   the theme itself paints the navbar below the lg breakpoint. Any other page
   that should present the same header bar opts in the very same way.

   This section started out as "gs-darkhead" for the Services banner; it was
   renamed because pages with a light header zone use it as well.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
    body.gs-solidnav .ftco-navbar-light:not(.scrolled) {
        background: rgba(255, 255, 255, .95) !important;
        -webkit-box-shadow: 0 12px 34px rgba(27, 32, 39, .10);
        box-shadow: 0 12px 34px rgba(27, 32, 39, .10);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }

    /* The navbar overlays the banner: it must never be painted over. */
    body.gs-solidnav .ftco-navbar-light {
        z-index: 1030;
    }
}

/* --------------------------------------------------------------------------
   14. Navbar layout: one row of links, lined up with the page grid

   The theme pads every top level link by 20px on both sides and pins the
   navbar container to a fixed 1110px. The eight links this site ships need
   more room than the bar can hand out, so "Enrollment Form" wrapped onto a
   second row at every desktop width - which also doubled the height of the
   bar and left the remaining links floating in the middle of it.

   These rules, from the width at which the theme swaps the hamburger for the
   horizontal menu upwards,
     - pin the bar to the very same column as the page content instead of
       only from the xl breakpoint up (below xl Bootstrap capped the bar at
       960px while the page column is 930px, so the logo sat 15px outside
       the content grid on both sides),
     - trim the link padding and type size just enough for the eight links to
       share a single row with room to spare, and
     - forbid wrapping, so no future label can push the menu onto a second
       line again.
   The collapsed (hamburger) bar below 992px keeps the theme's own behaviour.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
    body.gs-premium .ftco-navbar-light > .container {
        width: 100%;
        max-width: 960px;
        padding-left: 15px;
        padding-right: 15px;
    }

    body.gs-premium .ftco-navbar-light .navbar-nav {
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    body.gs-premium .ftco-navbar-light .navbar-nav > .nav-item > .nav-link {
        white-space: nowrap;
        font-size: 14px;
        letter-spacing: .2px;
        padding-left: 9px;
        padding-right: 9px;
    }
}

@media (min-width: 1200px) {
    body.gs-premium .ftco-navbar-light > .container {
        max-width: 1140px;
    }

    body.gs-premium .ftco-navbar-light .navbar-nav > .nav-item > .nav-link {
        font-size: 15px;
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Breathing room between the last link and the ISO badge. */
    body.gs-premium .ftco-navbar-light .navbar-nav {
        margin-right: 20px;
    }
}

/* --------------------------------------------------------------------------
   Geometry contract for section 14 - measured in headless Chrome against the
   real markup at exact viewport widths (an <iframe> of the requested width,
   because the headless viewport will not go below 526px). Bar height 98px
   from 992px up:

     width    menu     headroom   wraps?
     -------  -------  --------   ------
      992     631px      86px       no
     1024     631px      86px       no
     1174     631px      86px       no
     1199     632px      85px       no
     1200     713px      89px       no    + 75px badge, 20px gap to the menu
     1440     713px      89px       no    + 75px badge, 20px gap to the menu

   headroom = container content width - logo (213px) - menu width, and from
   1200px up also - badge 75px - 20px gap. Every value stays positive, so the
   eight links cannot wrap anywhere from 992px upwards. The corollary: at
   1200px the row is already exactly as wide as the 1140px container, so adding
   a link or a longer label means re-measuring before shipping.

   Below 992px nothing here applies - that bar is the theme's own, hamburger
   pinned to the container's right edge. The ISO badge the theme shows under
   768px (.d-block.d-md-none) has a 0px gap to the container edge (15px inside
   a 480px viewport); from 1200px up the large badge (.d-none.d-xl-block) sits
   the same way. Neither needs padding - that flush edge is the theme's design,
   and it lines up with the page grid. The 768px-1199px band shows no badge at
   all: the theme hides the small one from 768px up and only shows the large
   one from 1200px up.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   15. Contact detail cards (the ways to reach the company, one per card)

   This page carried its details in four theme boxes - a bright gradient
   square per column. Two of the six published details (Mobile, WhatsApp)
   shared one box, the duplicate mobile line inside it repeated the same
   number, and the remaining boxes showed a centred value with no way to act
   on it. The grid below gives every published detail its own card with an
   icon chip, a micro-label and a value that is a real tel: / wa.me / mailto:
   link, so a visitor can call or write straight from the card.

   Same construction as .gs-service-card (section 5) - flex grid, gradient
   bar along the top edge, icon chip that fills with the gradient on hover -
   so the two grids read as one family.
   -------------------------------------------------------------------------- */

.gs-contact__grid {
    display: flex;
    flex-wrap: wrap;
    margin-left: -.9rem;
    margin-right: -.9rem;
}

.gs-contact__grid > [class*="col-"] {
    padding-left: .9rem;
    padding-right: .9rem;
    margin-bottom: 1.8rem;
}

.gs-contact-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: #fff;
    border: 1px solid var(--gs-line);
    border-radius: var(--gs-radius-lg);
    padding: 2rem 1.7rem 1.8rem;
    overflow: hidden;
    box-shadow: var(--gs-shadow-xs);
    scroll-margin-top: 130px;
    transition: transform .4s var(--gs-ease), box-shadow .4s var(--gs-ease), border-color .4s var(--gs-ease);
}

.gs-contact-card:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gs-gradient);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .45s var(--gs-ease);
}

.gs-contact-card:hover,
.gs-contact-card:target {
    transform: translateY(-8px);
    box-shadow: var(--gs-shadow-md);
    border-color: rgba(49, 222, 121, .35);
}

.gs-contact-card:hover:before,
.gs-contact-card:target:before {
    transform: scaleX(1);
}

.gs-contact-card__icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: rgba(49, 222, 121, .12);
    color: var(--gs-primary-dark);
    margin-bottom: 1.3rem;
    transition: background .4s var(--gs-ease), color .4s var(--gs-ease);
}

.gs-contact-card__icon span {
    color: inherit;
}

.gs-contact-card:hover .gs-contact-card__icon,
.gs-contact-card:target .gs-contact-card__icon {
    background: var(--gs-gradient);
    color: #fff;
}

/* The card's own heading, kept as micro-type so the value - the part a
   visitor actually needs - leads the eye. */
.gs-contact-card__label {
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--gs-primary-dark);
    margin-bottom: .55rem;
}

.gs-contact-card__value {
    font-size: 15px;
    line-height: 1.75;
    font-weight: 600;
    color: var(--gs-ink-soft);
    margin-bottom: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.gs-contact-card__value a {
    color: var(--gs-ink);
    border-bottom: 1px solid var(--gs-line-strong);
}

.gs-contact-card__value a:hover,
.gs-contact-card__value a:focus {
    color: var(--gs-primary-dark);
    border-bottom-color: var(--gs-primary);
}

@media (max-width: 767.98px) {
    .gs-contact-card {
        padding: 1.6rem 1.4rem 1.5rem;
        scroll-margin-top: 100px;
    }

    .gs-contact-card__icon {
        width: 52px;
        height: 52px;
        font-size: 20px;
        margin-bottom: 1.05rem;
    }

    .gs-contact-card__value {
        font-size: 14.5px;
    }
}

/* --------------------------------------------------------------------------
   16. Clients page grid + gallery page frames

   The Clients page prints the published client list - 33 logo files and 38
   name-only clients the day this block was written - where the theme put fixed
   200x200 .logotext boxes: one flexible tile per client, so a long company name
   wraps instead of being clipped by a fixed height, and a logo is contained,
   never cropped or recoloured (same rule as the shared carousel, section 10).
   Same construction as .gs-contact-card (section 15) - white tile, hairline
   border, hover lift - so the light card grids read as one family.

   The .gs-gallery__frame rules give that component a lazy <img> variant: the
   home strip keeps its 8 inline background frames, while the 39-photo gallery
   page swaps the background for an <img loading="lazy"> so a photo is only
   fetched when its row approaches the viewport (the album is 6.8 MB, so eager
   loading would cost that on every visit). The frame keeps the fixed 230px box,
   so nothing shifts while the images arrive.
   -------------------------------------------------------------------------- */

.gs-gallery__frame {
    background-color: var(--gs-surface);
}

.gs-gallery__frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gs-clients__grid {
    display: flex;
    flex-wrap: wrap;
    margin-left: -.75rem;
    margin-right: -.75rem;
}

.gs-clients__grid > [class*="col-"] {
    padding-left: .75rem;
    padding-right: .75rem;
    margin-bottom: 1.5rem;
}

.gs-client-card {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 150px;
    background: #fff;
    border: 1px solid var(--gs-line);
    border-radius: var(--gs-radius-md);
    padding: 1.25rem 1rem;
    text-align: center;
    box-shadow: var(--gs-shadow-xs);
    transition: transform .4s var(--gs-ease), box-shadow .4s var(--gs-ease), border-color .4s var(--gs-ease);
}

.gs-client-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--gs-shadow-md);
    border-color: rgba(49, 222, 121, .35);
}

/* Logos are copy assets: contained at their own ratio, never stretched. */
.gs-client-card img {
    max-width: 100%;
    max-height: 92px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* The client with no logo file: the published name is the tile, set in the
   layer's uppercase micro-type instead of the theme's Calibri 16pt. */
.gs-client-card__name {
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: 1.4px;
    line-height: 1.6;
    text-transform: uppercase;
    color: var(--gs-ink-soft);
}

@media (max-width: 767.98px) {
    .gs-clients__grid > [class*="col-"] {
        margin-bottom: 1rem;
    }

    .gs-client-card {
        min-height: 118px;
        padding: 1rem .75rem;
    }

    .gs-client-card img {
        max-height: 70px;
    }

    .gs-client-card__name {
        font-size: 12px;
        letter-spacing: 1px;
    }
}


/* --------------------------------------------------------------------------
   17. Admin section - shell, tables, forms and badges
   --------------------------------------------------------------------------
   The admin screens do not use the public shell: _AdminLayout.cshtml loads this
   file only (plus the icon font), so everything the admin pages need lives
   here. All class names are namespaced "gs-admin". Nothing in this block
   affects a public page.
   -------------------------------------------------------------------------- */

body.gs-admin {
    margin: 0;
    background: var(--gs-surface);
    color: var(--gs-ink);
    font-family: "Nunito Sans", "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

.gs-admin__bar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--gs-gradient-dark);
    color: #fff;
    box-shadow: 0 12px 30px rgba(15, 20, 25, .18);
}

.gs-admin__bar-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 14px 22px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.gs-admin__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    text-decoration: none;
}

.gs-admin__mark {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--gs-gradient);
    color: #14301f;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: .92rem;
    letter-spacing: .04em;
    flex: 0 0 auto;
}

.gs-admin__brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.gs-admin__brand-name {
    font-weight: 800;
    font-size: 1.02rem;
}

.gs-admin__brand-role {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: rgba(255, 255, 255, .6);
}

.gs-admin__meta {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.gs-admin__who {
    text-align: right;
    font-size: .78rem;
    line-height: 1.3;
    color: rgba(255, 255, 255, .72);
}

.gs-admin__who strong {
    display: block;
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
}

.gs-admin__signout {
    margin: 0;
}

.gs-admin__nav {
    background: #fff;
    border-bottom: 1px solid var(--gs-line);
    box-shadow: var(--gs-shadow-xs);
}

.gs-admin__nav-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 22px;
    display: flex;
    gap: 2px;
    overflow-x: auto;
}

.gs-admin__link {
    padding: 15px 14px;
    font-size: .92rem;
    font-weight: 600;
    color: var(--gs-body);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    transition: color .2s var(--gs-ease), border-color .2s var(--gs-ease);
}

.gs-admin__link:hover {
    color: var(--gs-primary-dark);
}

.gs-admin__link.is-active {
    color: var(--gs-ink);
    border-bottom-color: var(--gs-primary);
}

.gs-admin__main {
    max-width: 1180px;
    margin: 0 auto;
    padding: 30px 22px 60px;
}

.gs-admin__title {
    margin: 0 0 6px;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--gs-ink);
}

.gs-admin__sub {
    margin: 0 0 22px;
    color: var(--gs-body);
    font-size: .94rem;
    max-width: 76ch;
}

.gs-admin__row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.gs-admin__spacer {
    margin-left: auto;
}

/* -------------------------------- buttons -------------------------------- */

.gs-admin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid var(--gs-line-strong);
    background: #fff;
    color: var(--gs-ink);
    font: inherit;
    font-size: .89rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform .18s var(--gs-ease), box-shadow .18s var(--gs-ease),
                background .18s var(--gs-ease), color .18s var(--gs-ease);
}

.gs-admin-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--gs-shadow-xs);
}

.gs-admin-btn--primary {
    background: var(--gs-gradient);
    color: #14301f;
    border-color: transparent;
    box-shadow: 0 10px 22px rgba(49, 222, 121, .26);
}

.gs-admin-btn--on-dark {
    background: rgba(255, 255, 255, .10);
    color: #fff;
    border-color: rgba(255, 255, 255, .26);
}

.gs-admin-btn--on-dark:hover {
    background: rgba(255, 255, 255, .2);
}

.gs-admin-btn--danger {
    color: #b3261e;
    border-color: rgba(179, 38, 30, .34);
    background: #fff;
}

.gs-admin-btn--danger:hover {
    background: rgba(179, 38, 30, .06);
}

.gs-admin-btn--sm {
    padding: 7px 13px;
    font-size: .81rem;
}

.gs-admin-btn[disabled] {
    opacity: .5;
    pointer-events: none;
}

/* ----------------------------- cards and tiles ---------------------------- */

.gs-admin-card {
    background: #fff;
    border: 1px solid var(--gs-line);
    border-radius: var(--gs-radius-lg);
    box-shadow: var(--gs-shadow-xs);
    overflow: hidden;
}

.gs-admin-card + .gs-admin-card {
    margin-top: 22px;
}

.gs-admin-card__head {
    padding: 16px 22px;
    border-bottom: 1px solid var(--gs-line);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.gs-admin-card__title {
    margin: 0;
    font-size: 1.04rem;
    font-weight: 800;
    color: var(--gs-ink);
}

.gs-admin-card__body {
    padding: 22px;
}

.gs-admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 20px;
}

.gs-admin-tile {
    background: #fff;
    border: 1px solid var(--gs-line);
    border-radius: var(--gs-radius-lg);
    box-shadow: var(--gs-shadow-xs);
    padding: 22px;
    display: flex;
    flex-direction: column;
}

.gs-admin-tile__title {
    margin: 0 0 6px;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--gs-ink);
}

.gs-admin-tile__text {
    margin: 0 0 16px;
    font-size: .91rem;
    color: var(--gs-body);
}

.gs-admin-tile__stats {
    display: flex;
    gap: 26px;
    margin-bottom: 16px;
}

.gs-admin-stat__value {
    display: block;
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1;
    color: var(--gs-ink);
}

.gs-admin-stat__label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .13em;
    color: var(--gs-body);
}

.gs-admin-tile__foot {
    margin-top: auto;
}

.gs-admin-note {
    margin: 0 0 16px;
    padding: 10px 14px;
    border-radius: var(--gs-radius-sm);
    background: rgba(255, 178, 44, .14);
    border: 1px solid rgba(255, 178, 44, .38);
    color: #7d4c00;
    font-size: .84rem;
    font-weight: 600;
}

/* -------------------------------- messages -------------------------------- */

.gs-admin-flash {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    margin-bottom: 20px;
    border: 1px solid;
    border-radius: var(--gs-radius-md);
    font-size: .91rem;
}

.gs-admin-flash--ok {
    background: rgba(49, 222, 121, .1);
    border-color: rgba(49, 222, 121, .45);
    color: #14663c;
}

.gs-admin-flash--error {
    background: rgba(179, 38, 30, .07);
    border-color: rgba(179, 38, 30, .32);
    color: #8c1d18;
}

.gs-admin-flash__icon {
    line-height: 1.4;
}

.gs-admin-validation {
    padding: 14px 18px 14px 18px;
    margin-bottom: 20px;
    border: 1px solid rgba(179, 38, 30, .32);
    background: rgba(179, 38, 30, .06);
    border-radius: var(--gs-radius-md);
    color: #8c1d18;
    font-size: .89rem;
}

.gs-admin-validation ul {
    margin: 6px 0 0;
    padding-left: 20px;
}

/* the framework renders an empty box when everything is valid - hide it */
.validation-summary-valid,
.gs-admin-validation.validation-summary-valid {
    display: none;
}

/* --------------------------------- tables --------------------------------- */

.gs-admin-table__wrap {
    overflow-x: auto;
}

.gs-admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .91rem;
}

.gs-admin-table th {
    text-align: left;
    padding: 12px 16px;
    background: var(--gs-surface);
    color: var(--gs-ink);
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .13em;
    border-bottom: 1px solid var(--gs-line);
    white-space: nowrap;
}

.gs-admin-table td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--gs-line);
    vertical-align: middle;
    color: var(--gs-body);
}

.gs-admin-table tbody tr:hover {
    background: rgba(49, 222, 121, .05);
}

.gs-admin-table tbody tr:last-child td {
    border-bottom: 0;
}

.gs-admin-table__strong {
    color: var(--gs-ink);
    font-weight: 700;
}

.gs-admin-table__num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.gs-admin-table__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.gs-admin-table__actions form {
    margin: 0;
}

.gs-admin-thumb {
    width: 96px;
    height: 62px;
    object-fit: cover;
    border: 1px solid var(--gs-line);
    border-radius: 10px;
    background: var(--gs-surface);
    display: block;
}

.gs-admin-thumb--wide {
    width: 132px;
}

.gs-admin-empty {
    padding: 34px 22px;
    text-align: center;
    color: var(--gs-body);
    font-size: .92rem;
}

.gs-admin-empty strong {
    display: block;
    margin-bottom: 6px;
    color: var(--gs-ink);
    font-size: 1.04rem;
}

/* --------------------------------- forms ---------------------------------- */

.gs-admin-form {
    display: grid;
    gap: 18px;
    max-width: 660px;
}

.gs-admin-form--wide {
    max-width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}

.gs-admin-form--wide .gs-admin-field--full,
.gs-admin-form--wide .gs-admin-form__actions {
    grid-column: 1 / -1;
}

.gs-admin-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.gs-admin-field__label {
    font-size: .81rem;
    font-weight: 700;
    color: var(--gs-ink);
}

.gs-admin-input,
.gs-admin-select,
.gs-admin-textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--gs-line-strong);
    border-radius: var(--gs-radius-sm);
    background: #fff;
    font: inherit;
    font-size: .92rem;
    color: var(--gs-ink);
    box-sizing: border-box;
}

.gs-admin-textarea {
    min-height: 112px;
    resize: vertical;
}

.gs-admin-input:focus,
.gs-admin-select:focus,
.gs-admin-textarea:focus {
    outline: 0;
    border-color: var(--gs-primary);
    box-shadow: 0 0 0 3px rgba(49, 222, 121, .18);
}

.gs-admin-input[readonly] {
    background: var(--gs-surface);
    color: var(--gs-body);
}

.gs-admin-hint {
    font-size: .77rem;
    color: var(--gs-body);
}

.gs-admin-error {
    font-size: .79rem;
    font-weight: 600;
    color: #b3261e;
}

.gs-admin-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .9rem;
    color: var(--gs-ink);
    grid-column: 1 / -1;
}

.gs-admin-check input {
    margin: 4px 0 0;
    width: 17px;
    height: 17px;
    accent-color: var(--gs-primary-dark);
}

.gs-admin-check span {
    display: block;
    font-size: .78rem;
    color: var(--gs-body);
}

.gs-admin-form__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* --------------------------------- badges --------------------------------- */

.gs-admin-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border: 1px solid;
    border-radius: 999px;
    font-size: .71rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.gs-admin-pill--on {
    color: #14663c;
    background: rgba(49, 222, 121, .14);
    border-color: rgba(49, 222, 121, .42);
}

.gs-admin-pill--off {
    color: #555f6a;
    background: rgba(91, 101, 112, .1);
    border-color: rgba(91, 101, 112, .28);
}

.gs-admin-pill--warn {
    color: #7d4c00;
    background: rgba(255, 178, 44, .16);
    border-color: rgba(255, 178, 44, .42);
}

.gs-admin-pill--role {
    color: #14301f;
    background: rgba(49, 222, 121, .16);
    border-color: rgba(49, 222, 121, .4);
}

.gs-admin-pill--muted {
    color: #555f6a;
    background: #f2f5f3;
    border-color: var(--gs-line);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.gs-admin-search {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.gs-admin-search .gs-admin-input {
    max-width: 300px;
}

/* --------------------------------- sign in -------------------------------- */

.gs-admin-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: var(--gs-gradient-dark);
    box-sizing: border-box;
}

.gs-admin-login__card {
    width: 100%;
    max-width: 440px;
    padding: 34px 32px;
    background: #fff;
    border-radius: var(--gs-radius-xl);
    box-shadow: var(--gs-shadow-lg);
    box-sizing: border-box;
}

.gs-admin-login__mark {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--gs-gradient);
    color: #14301f;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.15rem;
    letter-spacing: .04em;
}

.gs-admin-login__title {
    margin: 18px 0 4px;
    font-size: 1.42rem;
    font-weight: 800;
    color: var(--gs-ink);
}

.gs-admin-login__lead {
    margin: 0 0 22px;
    font-size: .91rem;
    color: var(--gs-body);
}

.gs-admin-login__card .gs-admin-form {
    max-width: 100%;
}

.gs-admin-login__alt {
    margin: 22px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--gs-line);
    font-size: .83rem;
    color: var(--gs-body);
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.gs-admin-login__alt a {
    color: var(--gs-primary-dark);
    font-weight: 700;
    text-decoration: none;
}

/* ------------------------------- responsive ------------------------------- */

@media (max-width: 860px) {
    .gs-admin__bar-inner {
        padding: 12px 16px;
    }

    .gs-admin__meta {
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
    }

    .gs-admin__who {
        text-align: left;
    }

    .gs-admin__nav-inner {
        padding: 0 12px;
    }

    .gs-admin__main {
        padding: 22px 16px 48px;
    }
}

@media (max-width: 620px) {
    .gs-admin-table th,
    .gs-admin-table td {
        padding: 10px 12px;
    }

    .gs-admin-thumb {
        width: 72px;
        height: 48px;
    }

    .gs-admin-login__card {
        padding: 26px 22px;
    }

    .gs-admin__title {
        font-size: 1.32rem;
    }
}

/* --------------------------------------------------------------------------
   18. Requested quotes - the request itself, read only
   --------------------------------------------------------------------------
   The list is built from the tables and badges of block 17. The screen that
   opens one request adds two things: a label/value list, and the message the
   visitor typed, which keeps the line breaks it was typed with. Nothing in this
   block affects a public page.
   -------------------------------------------------------------------------- */

.gs-admin-dl {
    display: grid;
    grid-template-columns: minmax(110px, max-content) 1fr;
    gap: 10px 22px;
    margin: 0;
    font-size: .93rem;
}

.gs-admin-dl dt {
    padding-top: 3px;
    color: var(--gs-body);
    font-size: .71rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.gs-admin-dl dd {
    margin: 0;
    color: var(--gs-ink);
    overflow-wrap: anywhere;
}

.gs-admin-dl dd a {
    color: var(--gs-primary-dark);
    font-weight: 700;
    text-decoration: none;
}

.gs-admin-msg {
    margin: 0;
    padding: 16px 18px;
    border: 1px solid var(--gs-line);
    border-left: 3px solid var(--gs-primary);
    border-radius: var(--gs-radius-md);
    background: var(--gs-surface);
    color: var(--gs-ink);
    font-size: .95rem;
    line-height: 1.65;
    /* the visitor typed this, so the line breaks are part of it */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* The status select sits in a table row: as wide as its longest option, never
   as wide as the cell it is in. */
.gs-admin-table__actions .gs-admin-select {
    width: auto;
    max-width: 180px;
    padding: 7px 10px;
    font-size: .81rem;
}

@media (max-width: 620px) {
    .gs-admin-dl {
        grid-template-columns: 1fr;
        gap: 2px 0;
    }

    .gs-admin-dl dd {
        margin-bottom: 12px;
    }
}



/* --------------------------------------------------------------------------
   19. Enrollment Form - the form a candidate fills in
   --------------------------------------------------------------------------
   Views/Home/EnrollmentForm.cshtml. The sheet, the sections inside it and the
   two column grid are new; the fields themselves stay the theme's .form-control
   (the same one the Contact and Request Quote pages use), squared off to the
   premium radii and the premium focus ring, so the three forms read alike.

   .gs-form__grid is a CSS grid rather than a Bootstrap row: the fields inside a
   section have to share a baseline, and --wide lets an address or a remark span
   the two columns without a second wrapper class per field.
   -------------------------------------------------------------------------- */
.gs-form {
    background: #fff;
    border: 1px solid var(--gs-line);
    border-radius: var(--gs-radius-xl);
    box-shadow: var(--gs-shadow-sm);
    padding: 34px 34px 30px;
}

.gs-form__note {
    margin: 0 0 22px;
    font-size: .9rem;
    color: var(--gs-body);
}

.gs-form__required {
    color: #d64545;
    font-weight: 800;
}

/* A section of the sheet. Fieldsets carry a default border and padding in every
   browser, so both are cleared before the fieldset is used as a plain block. */
.gs-form__sheet {
    border: 0;
    padding: 0;
    margin: 0 0 26px;
    min-width: 0;
}

.gs-form__legend {
    width: 100%;
    padding: 0 0 10px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--gs-line);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gs-ink);
}

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

.gs-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.gs-form__field--wide {
    grid-column: 1 / -1;
}

/* The Add button lines up with the fields beside it rather than with their labels,
   and keeps its own width instead of filling the cell. */
.gs-form__field--action {
    justify-content: flex-end;
    align-items: flex-start;
}

.gs-form__label {
    margin: 0;
    font-size: .86rem;
    font-weight: 700;
    color: var(--gs-ink);
}

.gs-form__hint {
    font-size: .8rem;
    line-height: 1.55;
    color: var(--gs-body);
}

/* The photograph the candidate attaches. The frame has the shape of a passport
   photograph whatever file was chosen, and only shows it once this site has stored
   it: the --ready class is set by the page's own script after the upload answered,
   so a file the site refused never looks attached. */
.gs-form__photo {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px 22px;
}

.gs-form__photo-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 108px;
    height: 132px;
    overflow: hidden;
    padding: 8px;
    border: 1px dashed var(--gs-line-strong);
    border-radius: var(--gs-radius-sm);
    background: #fbfdfc;
    text-align: center;
}

.gs-form__photo-frame img {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gs-form__photo-note {
    font-size: .72rem;
    line-height: 1.5;
    color: var(--gs-body);
}

.gs-form__photo--ready .gs-form__photo-frame {
    padding: 0;
    border-style: solid;
    border-color: var(--gs-primary);
}

.gs-form__photo--ready .gs-form__photo-frame img {
    display: block;
}

.gs-form__photo--ready .gs-form__photo-note {
    display: none;
}

.gs-form__photo-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 260px;
    min-width: 0;
}

.gs-form__photo-actions input[type="file"] {
    font-size: .88rem;
    color: var(--gs-ink);
}

/* Removing the photograph is only offered once there is one to remove. */
.gs-form__photo-remove {
    display: none;
    align-self: flex-start;
}

.gs-form__photo--ready .gs-form__photo-remove {
    display: inline-block;
}

.gs-form .form-control {
    min-height: 48px;
    height: auto;
    padding: 11px 14px;
    border: 1px solid var(--gs-line-strong);
    border-radius: var(--gs-radius-sm);
    background: #fbfdfc;
    font-size: .95rem;
    color: var(--gs-ink);
    box-shadow: none;
}

.gs-form .form-control:focus {
    border-color: var(--gs-primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(49, 222, 121, .18);
}

.gs-form .form-control::placeholder {
    color: #9aa5af;
}


/* The people a candidate names: the theme's table, with the air of the sheet. */
.gs-form__rows {
    margin: 4px 0 0;
    font-size: .92rem;
}

.gs-form__rows thead th {
    border-top: 0;
    border-bottom: 1px solid var(--gs-line-strong);
    padding: 10px 12px;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gs-body);
}

.gs-form__rows tbody td {
    padding: 12px;
    border-top: 1px solid var(--gs-line);
    vertical-align: middle;
    color: var(--gs-ink);
}

.gs-form__rows-empty td {
    color: var(--gs-body);
    font-style: italic;
}

.gs-form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: 6px;
}

/* The answer of the service layer, or what is wrong with the form. Empty until
   something is said, so the sheet does not carry a blank band. */
.gs-form__message {
    display: none;
    margin: 18px 0 0;
    border-radius: var(--gs-radius-md);
    font-size: .92rem;
    line-height: 1.6;
}

.gs-form__message--ok,
.gs-form__message--error {
    display: block;
    padding: 14px 18px;
}

.gs-form__message--ok {
    border: 1px solid rgba(49, 222, 121, .45);
    background: rgba(49, 222, 121, .12);
    color: #14673b;
}

.gs-form__message--error {
    border: 1px solid rgba(214, 69, 69, .35);
    background: rgba(214, 69, 69, .08);
    color: #a52b2b;
}

/* "Get Enrollment Form" - the lookup page this site already had, kept as a
   second card under the form. */
.gs-form__aside {
    background: #fff;
    border: 1px solid var(--gs-line);
    border-radius: var(--gs-radius-lg);
    box-shadow: var(--gs-shadow-xs);
    padding: 30px 32px;
}

.gs-form__aside .gs-title {
    margin-bottom: 10px;
}

.gs-form__aside p {
    color: var(--gs-body);
}

@media (max-width: 992px) {
    .gs-form {
        padding: 24px 20px 20px;
    }

    .gs-form__grid {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   20. Enrollment forms in the admin section - the photograph, and the PDF
   --------------------------------------------------------------------------
   Views/AdminEnrollments/Details.cshtml. The photograph a candidate attached is a
   file below /images on the public site, so the panel that shows it is the shape of
   a passport photograph: the office can see at once whether what came in is usable.
   A form that arrived without one keeps the same panel, dashed and empty, because
   that is something the office has to chase rather than something to hide.

   The button that downloads the form as a PDF sits in the action row the admin
   forms already use (block 17); the --spaced variant of it is what gives the row
   the air it needs where it sits between the page's words and the first card.
   -------------------------------------------------------------------------- */

.gs-admin-form__actions--spaced {
    margin: 0 0 18px;
}

.gs-admin-photo {
    float: right;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 132px;
    height: 162px;
    margin: 0 0 16px 20px;
    overflow: hidden;
    border: 1px solid var(--gs-line);
    border-radius: var(--gs-radius-md);
    background: var(--gs-surface);
}

.gs-admin-photo a {
    display: block;
    width: 100%;
    height: 100%;
}

.gs-admin-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gs-admin-photo--missing {
    padding: 18px 14px;
    border-style: dashed;
    border-color: var(--gs-line-strong);
    color: var(--gs-body);
    font-size: .76rem;
    line-height: 1.55;
    text-align: center;
}

@media (max-width: 620px) {
    /* Nothing to wrap around on a phone: the panel sits above the fields. */
    .gs-admin-photo {
        float: none;
        margin: 0 0 16px;
    }
}