/* ==========================================================================
   GSC-TEMPC — NEWS PAGE STYLES  (v2 — editorial redesign)
   assets/css/news_page.css
   --------------------------------------------------------------------------
   Layout of this file
     1. Shared tokens, body, scroll-reveal base           (unchanged behavior)
     2. #section-news  — the redesigned news body         (NEW, scoped)
     3. Lightbox + back-to-top                            (palette refresh only)
     4. Hero (.hero#hp-main-content) + former inline hero polish from news.php
     5. Closing CTA (.gsc-cta)                            (unchanged)

   #section-news is the wrapper added around the search bar and the 3-column
   grid in news.php. It is a size container (container-name: news), and the
   centre column is a second one (container-name: feed), so breakpoints follow
   the width the content really has, not the screen width.

   House style comes from about-us.css: green/white ground, Fraunces headings,
   Poppins body, restrained champagne gold, pill CTAs with a gold hairline.
   ========================================================================== */

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

:root {
    --np-primary: #30AA28;
    --np-primary-dark: #2a9622;
    --np-primary-light: #30AA28;
    --np-bg: #FFFFFF;
    --np-card: #FFFFFF;
    --np-text: #1A2E1F;
    --np-muted: #6B7C6F;
    --np-border: #E5EBE5;
    --np-urgent: #D32F2F;
    --np-urgent-bg: #FFF5F5;
    --np-featured: #F57F17;
    --np-featured-bg: #FFF8E1;
    --np-shadow: 0 4px 24px rgba(48, 170, 40, 0.05);
    --np-shadow-hover: 0 12px 32px rgba(48, 170, 40, 0.12);
    --np-radius: 16px;
    --np-transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);

    /* Hero typography/brand tokens (matched to services_modern.css) */
    --np-font-display: 'Fraunces', 'Poppins', 'Segoe UI', serif;
    --np-font-head: 'Poppins', 'Segoe UI', sans-serif;

    /* Hero scrim tokens */
    --np-hero-dark-1: rgba(5, 25, 19, 0.72);
    --np-hero-dark-2: rgba(5, 25, 19, 0.54);
    --np-hero-dark-3: rgba(6, 22, 16, 0.30);
    --np-hero-dark-4: rgba(7, 22, 15, 0.12);
    --np-hero-dark-5: rgba(7, 22, 15, 0);
    --np-hero-tint: rgba(48, 170, 40, 0.08);

    /* Legacy --gp-* tokens. Kept because news.php still references
       var(--gp-urgent) inline and the lightbox uses --gp-text. The redesigned
       body uses its own --ns-* tokens declared on #section-news. */
    --gp-forest: #30AA28;
    --gp-forest-dark: #2a9622;
    --gp-forest-mid: #30AA28;
    --gp-ivory: #FFFFFF;
    --gp-card: #FFFFFF;
    --gp-gold: #B8924B;
    --gp-gold-soft: rgba(184, 146, 75, 0.35);
    --gp-text: #23281F;
    --gp-muted: #6E7266;
    --gp-border: #E3EBE2;
    --gp-border-card: #E3EBE2;
    --gp-urgent: #8C2F26;
    --gp-urgent-bg: #FBF1EE;
    --gp-radius-sm: 8px;
    --gp-radius-md: 12px;
    --gp-shadow-card: 0 2px 4px rgba(48, 170, 40, 0.05), 0 12px 32px rgba(48, 170, 40, 0.10);
    --gp-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --gp-serif: 'Fraunces', 'Playfair Display', Georgia, serif;
    --gp-sans: 'Poppins', 'Inter', 'Segoe UI', sans-serif;
}

/* White page background on every section except the hero (board request). */
body { background: var(--gp-ivory) !important; color: var(--gp-text); font-family: var(--gp-sans); }

/* --- Animations --- */
@keyframes npFadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
}
@keyframes npHeroIn {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Scroll-reveal hook: the inline script adds .np-visible via IntersectionObserver. */
.np-animate {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s var(--gp-ease), transform 0.6s var(--gp-ease);
}
.np-animate.np-visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .np-animate,
    .np-animate.np-visible { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   2. #section-news — REDESIGNED NEWS BODY
   --------------------------------------------------------------------------
   Concept: a member bulletin. A quiet filter bar, then a publication-style
   page: the lead announcement with its picture, a dated ledger of every
   announcement, and two reference rails (latest updates on the left, urgent
   alerts and featured stories on the right).

   Palette (from about-us.css):
     --ns-brand   #30AA28  logo green        --ns-forest  #1F5A2D  headings
     --ns-leaf    #B9DDB5  light green       --ns-ink     #173E29  deepest green
     --ns-action  #27883A  buttons, links    --ns-gold    #D6B56D  champagne
     --ns-gold-ink #8A6A22 darker champagne used ONLY where gold is text
                           (4.5:1+ on white); #D6B56D itself is never text.

   Alignment guides
     - Shell edge: every panel, title, rule and row starts on the same left edge.
     - Gold rule device: one 56px champagne stub, always flush-left under a
       title (panel rules) or at the start of a hairline (archive rule).
     - Rows share one grid, so date / picture / headline / action columns line
       up from the first row to the last.
   ========================================================================== */

#section-news {
    --ns-brand: #30AA28;
    --ns-leaf: #B9DDB5;
    --ns-leaf-soft: #E5F1E3;
    --ns-sage: #F3F8F2;
    --ns-action: #27883A;
    --ns-action-deep: #1B6A2E;
    --ns-forest: #1F5A2D;
    --ns-ink: #173E29;
    --ns-gold: #D6B56D;
    --ns-gold-light: #F6E3AE;
    --ns-gold-ink: #8A6A22;
    --ns-white: #FFFFFF;
    --ns-warm: #FBFCF9;
    --ns-text: #3E4C42;
    --ns-muted: #53625A;
    --ns-urgent: #8C2F26;
    --ns-urgent-bg: #FBF1EE;
    --ns-line: rgba(23, 62, 41, .12);
    --ns-edge: rgba(48, 170, 40, .18);
    --ns-ease: cubic-bezier(.16, 1, .3, 1);
    --ns-serif: var(--hp-display-font, 'Fraunces', Georgia, 'Times New Roman', serif);
    --ns-rail-top: 96px;

    container: news / inline-size;
    position: relative;
    isolation: isolate;
    overflow: clip;   /* clip, not hidden: hidden would break the sticky rails */
    padding: 56px 0 96px;
    color: var(--ns-text);
    font-family: var(--gp-sans);
    /* Same ground as About Us, Home Services, Leadership and Future Plans */
    background: linear-gradient(180deg, #FFFFFF 0%, #F3F8F2 30%, #E9F4E6 64%, #FFFFFF 100%);
}

#section-news *,
#section-news *::before,
#section-news *::after {
    box-sizing: border-box;
}

/* Soft green light, identical values to the About Us wash */
#section-news::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 52% 34% at 18% 26%, rgba(185, 221, 181, .5), transparent 72%),
        radial-gradient(ellipse 44% 30% at 94% 8%, rgba(185, 221, 181, .3), transparent 70%);
}

#section-news > * {
    position: relative;
    z-index: 1;
}

#section-news .np-shell {
    width: min(100% - 40px, 1360px);
    margin-inline: auto;
}

/* Keyboard focus: one consistent ring for every interactive element */
#section-news a:focus-visible,
#section-news button:focus-visible,
#section-news input:focus-visible,
#section-news select:focus-visible {
    outline: 3px solid var(--ns-action);
    outline-offset: 3px;
}

/* ----------------------------------------------------------------------
   FILTER BAR
   ---------------------------------------------------------------------- */
#section-news .np-search-section {
    padding: 0;
}

#section-news .np-search-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: end;
    padding: 22px 20px;
    background: rgba(255, 255, 255, .94);
    border: 1px solid var(--ns-edge);
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(23, 62, 41, .05), 0 18px 40px rgba(23, 62, 41, .08);
}

#section-news .np-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

#section-news .np-field label {
    color: var(--ns-action-deep);
    font-size: .86rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .02em;
}

#section-news .np-input-wrap {
    position: relative;
}

#section-news .np-input-wrap i {
    position: absolute;
    top: 50%;
    left: 18px;
    transform: translateY(-50%);
    color: var(--ns-muted);
    font-size: .92rem;
    pointer-events: none;
}

#section-news .np-field input[type="text"],
#section-news .np-field select {
    width: 100%;
    height: 54px;
    border: 1px solid rgba(23, 62, 41, .2);
    border-radius: 14px;
    background-color: var(--ns-warm);
    color: var(--ns-ink);
    font-family: var(--gp-sans);
    font-size: 1rem;
    line-height: 1.2;
    transition: border-color .25s ease, background-color .25s ease;
}

#section-news .np-field input[type="text"] {
    padding: 0 18px 0 46px;
}

#section-news .np-field input[type="text"]::placeholder {
    color: #6A786F;
    opacity: 1;
}

#section-news .np-field select {
    padding: 0 44px 0 18px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%2353625A' stroke-width='1.8' fill='none' fill-rule='evenodd'/></svg>");
    background-repeat: no-repeat;
    background-position: right 18px center;
}

#section-news .np-field input[type="text"]:hover,
#section-news .np-field select:hover {
    border-color: rgba(39, 136, 58, .55);
}

#section-news .np-field input[type="text"]:focus,
#section-news .np-field select:focus {
    border-color: var(--ns-action);
    background-color: #fff;
}

#section-news .np-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    padding: 0 28px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--gp-sans);
    font-size: .96rem;
    font-weight: 700;
    line-height: 1.1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .35s var(--ns-ease), box-shadow .35s ease, background .3s ease, border-color .25s ease, color .25s ease;
}

#section-news .np-btn-primary {
    border-color: rgba(214, 181, 109, .75);
    background: linear-gradient(180deg, var(--ns-action) 0%, var(--ns-action-deep) 100%);
    color: #fff;
    box-shadow: 0 12px 24px rgba(31, 90, 45, .24), inset 0 1px 0 rgba(255, 255, 255, .16);
}

#section-news .np-btn-primary:hover {
    transform: translateY(-2px);
    background: linear-gradient(180deg, var(--ns-action-deep) 0%, var(--ns-ink) 100%);
    box-shadow: 0 16px 30px rgba(31, 90, 45, .32), inset 0 1px 0 rgba(255, 255, 255, .16);
}

#section-news .np-btn-primary:active {
    transform: translateY(0);
}

#section-news .np-btn-ghost {
    border-color: rgba(23, 62, 41, .22);
    background: #fff;
    color: var(--ns-forest);
}

#section-news .np-btn-ghost:hover {
    border-color: var(--ns-action);
    background: var(--ns-sage);
    color: var(--ns-action-deep);
}

@container news (max-width: 519px) {
    #section-news .np-btn { width: 100%; }
}

@container news (min-width: 520px) {
    #section-news .np-search-card {
        grid-template-columns: minmax(0, 1fr) auto auto;
        padding: 24px 26px;
    }
    #section-news .np-field-search { grid-column: 1 / -1; }
    #section-news .np-field-type { max-width: 320px; }
}

@container news (min-width: 820px) {
    #section-news .np-search-card {
        grid-template-columns: minmax(0, 1fr) 230px auto auto;
        gap: 18px;
    }
    #section-news .np-field-search { grid-column: auto; }
    #section-news .np-field-type { max-width: none; }
}

/* ----------------------------------------------------------------------
   PAGE GRID
   Narrow:  one column, urgent alerts first, then the feed, then the rails.
   760px+:  feed on the left, a right rail; latest updates sit under the feed.
   1100px+: latest updates | feed | right rail, with sticky rails.
   ---------------------------------------------------------------------- */
#section-news .np-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    align-items: start;
    margin: 44px 0 0;
    scroll-margin-top: 96px;
}

#section-news .np-sidebar {
    min-width: 0;
}

#section-news .np-main-feed {
    order: 2;
    min-width: 0;
    container: feed / inline-size;
}

#section-news .np-sidebar-left {
    order: 3;
}

/* On narrow screens the right rail dissolves so its urgent panel can be
   ordered ahead of the feed while featured stories stay last. */
#section-news .np-sidebar-right {
    display: contents;
}

#section-news .np-sidebar-right > .np-urgent-panel {
    order: 1;
}

#section-news .np-sidebar-right > :not(.np-urgent-panel) {
    order: 4;
}

@container news (min-width: 760px) {
    #section-news .np-shell { width: min(100% - 64px, 1360px); }

    #section-news .np-grid {
        grid-template-columns: minmax(0, 1fr) 304px;
        grid-template-areas:
            "main right"
            "left right";
        column-gap: 44px;
        row-gap: 48px;
        margin-top: 52px;
    }

    #section-news .np-main-feed,
    #section-news .np-sidebar-left,
    #section-news .np-sidebar-right { order: 0; }

    #section-news .np-main-feed { grid-area: main; }
    #section-news .np-sidebar-left { grid-area: left; }

    #section-news .np-sidebar-right {
        display: block;
        grid-area: right;
        position: sticky;
        top: var(--ns-rail-top);
        max-height: calc(100vh - var(--ns-rail-top) - 20px);
        overflow-y: auto;
        padding: 6px;
        margin: -6px;
        scrollbar-width: thin;
        scrollbar-color: var(--ns-leaf) transparent;
    }

    #section-news .np-sidebar-right > * { order: 0; }
    #section-news .np-sidebar-right > .np-animate + .np-animate { margin-top: 24px; }
}

@container news (min-width: 1100px) {
    #section-news .np-grid {
        grid-template-columns: 264px minmax(0, 1fr) 304px;
        grid-template-areas: "left main right";
        column-gap: clamp(32px, 3.4cqi, 56px);
    }

    #section-news .np-sidebar-left {
        position: sticky;
        top: var(--ns-rail-top);
        max-height: calc(100vh - var(--ns-rail-top) - 20px);
        overflow-y: auto;
        padding: 6px;
        margin: -6px;
        scrollbar-width: thin;
        scrollbar-color: var(--ns-leaf) transparent;
    }
}

/* ----------------------------------------------------------------------
   PANELS (the two rails) — shared title, gold stub and surface
   ---------------------------------------------------------------------- */
#section-news .np-sidebar > .np-animate {
    padding: 26px 24px 28px;
    background: #fff;
    border: 1px solid var(--ns-edge);
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(23, 62, 41, .04), 0 14px 32px rgba(23, 62, 41, .06);
}

#section-news .np-panel-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    font-family: var(--ns-serif);
    font-size: 1.28rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.015em;
    text-transform: none;
    color: var(--ns-forest);
}

#section-news .np-panel-title i {
    flex: 0 0 auto;
    color: var(--ns-action);
    font-size: .9rem;
}

/* Gold stub: 56px, flush-left, directly under the title */
#section-news .np-panel-rule {
    display: block;
    width: 56px;
    height: 3px;
    margin: 0 0 22px;
    border: 0;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--ns-gold) 0 58%, var(--ns-leaf) 58% 100%);
}

#section-news .np-empty-side {
    margin: 0;
    padding: 8px 0 0;
    color: var(--ns-muted);
    font-size: .95rem;
    line-height: 1.6;
}

/* ----------------------------------------------------------------------
   LEFT RAIL — latest updates
   ---------------------------------------------------------------------- */
#section-news .np-latest-list {
    display: flex;
    flex-direction: column;
}

#section-news .np-latest-item {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 10px;
    padding: 16px 0;
    border-bottom: 1px solid var(--ns-line);
    color: inherit;
    text-decoration: none;
}

#section-news .np-latest-item:first-child { padding-top: 0; }
#section-news .np-latest-item:last-child { padding-bottom: 0; border-bottom: 0; }

#section-news .np-latest-num {
    padding-top: 3px;
    color: var(--ns-gold-ink);
    font-family: var(--ns-serif);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    font-variant-numeric: lining-nums tabular-nums;
}

#section-news .np-latest-info { min-width: 0; }

#section-news .np-latest-date {
    display: block;
    margin: 0 0 4px;
    color: var(--ns-muted);
    font-size: .8rem;
    font-weight: 500;
    line-height: 1.3;
}

#section-news .np-latest-info h4 {
    margin: 0 0 4px;
    color: var(--ns-ink);
    font-size: .98rem;
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: anywhere;
    transition: color .25s ease;
}

#section-news .np-latest-time {
    color: var(--ns-muted);
    font-size: .82rem;
}

#section-news .np-latest-item:hover h4 { color: var(--ns-action-deep); }

#section-news .np-view-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    margin-top: 14px;
    color: var(--ns-action-deep);
    font-size: .92rem;
    font-weight: 700;
    text-decoration: none;
    transition: gap .3s var(--ns-ease), color .25s ease;
}

#section-news .np-view-all:hover { gap: 12px; color: var(--ns-forest); }

/* ----------------------------------------------------------------------
   RIGHT RAIL — urgent alerts, featured stories
   ---------------------------------------------------------------------- */
#section-news .np-urgent-item {
    display: block;
    margin: 0 0 12px;
    padding: 16px 18px;
    border: 1px solid rgba(140, 47, 38, .16);
    border-left: 4px solid var(--ns-urgent);
    border-radius: 12px;
    background: var(--ns-urgent-bg);
    color: inherit;
    text-decoration: none;
    transition: background-color .25s ease;
}

#section-news .np-urgent-item:last-child { margin-bottom: 0; }
#section-news .np-urgent-item:hover { background: #F7E6E1; }

#section-news .np-urgent-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 6px;
    color: var(--ns-urgent);
    font-size: .8rem;
    font-weight: 700;
    line-height: 1;
}

#section-news .np-urgent-badge::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ns-urgent);
}

#section-news .np-urgent-item h4 {
    margin: 0;
    color: var(--ns-ink);
    font-size: .98rem;
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

#section-news .np-featured-story {
    display: block;
    padding: 20px 0;
    border-bottom: 1px solid var(--ns-line);
    color: inherit;
    text-decoration: none;
}

#section-news .np-featured-story:first-of-type { padding-top: 0; }
#section-news .np-featured-story:last-child { padding-bottom: 0; border-bottom: 0; }

/* The 01/02 counter is decorative: featured stories are not a sequence */
#section-news .np-featured-story-num { display: none; }

#section-news .np-featured-img {
    width: 100%;
    margin: 0 0 14px;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border: 1px solid rgba(23, 62, 41, .1);
    border-radius: 12px;
    background: var(--ns-leaf-soft);
}

#section-news .np-featured-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#section-news .np-featured-story h4 {
    margin: 0 0 8px;
    color: var(--ns-ink);
    font-family: var(--ns-serif);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.01em;
    overflow-wrap: anywhere;
    transition: color .25s ease;
}

#section-news .np-featured-story:hover h4 { color: var(--ns-action-deep); }

#section-news .np-featured-story-date {
    display: block;
    margin: 0 0 8px;
    color: var(--ns-muted);
    font-size: .84rem;
    font-weight: 500;
}

#section-news .np-story-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ns-action-deep);
    font-size: .9rem;
    font-weight: 700;
    transition: gap .3s var(--ns-ease);
}

#section-news .np-featured-story:hover .np-story-link { gap: 12px; }

/* ----------------------------------------------------------------------
   CENTRE — featured announcement
   ---------------------------------------------------------------------- */
#section-news .np-featured-main {
    margin: 0 0 64px;
}

/* Picture: edge-to-edge inside a rounded hairline frame. No mat, no side
   gaps. The frame takes the picture's own proportions (no fixed aspect
   ratio, no max-height), so the image fills the full column width, which
   also makes it larger than before, and nothing is cropped or letterboxed. */
#section-news .np-featured-media {
    margin: 0 0 28px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--ns-edge);
    border-radius: 22px;
    background: transparent;
    box-shadow: 0 28px 56px rgba(23, 62, 41, .14), 0 6px 16px rgba(48, 170, 40, .08);
}

#section-news .np-featured-media img {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: auto;
    object-fit: cover;
    border-radius: 0;
    background: none;
}

#section-news .np-featured-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin: 0 0 14px;
    color: var(--ns-muted);
    font-size: .9rem;
    font-weight: 500;
    line-height: 1.3;
}

#section-news .np-featured-meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#section-news .np-featured-meta i { color: var(--ns-gold-ink); }

#section-news .np-featured-meta > span:last-child {
    color: var(--ns-action-deep);
    font-weight: 700;
}

#section-news .np-featured-meta .np-meta-dot {
    width: 5px;
    height: 5px;
    padding: 0;
    border-radius: 50%;
    background: var(--ns-gold);
}

#section-news .np-featured-main > h2:not(.np-panel-title) {
    margin: 0 0 18px;
    color: var(--ns-forest);
    font-family: var(--ns-serif);
    font-size: clamp(1.85rem, 5cqi, 2.7rem);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -.028em;
    text-wrap: balance;
    overflow-wrap: break-word;
}

#section-news .np-featured-main > p {
    max-width: 60ch;
    margin: 0 0 28px;
    color: var(--ns-text);
    font-size: 1.06rem;
    line-height: 1.8;
}

#section-news .np-btn-featured {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 56px;
    padding: 12px 14px 12px 26px;
    border: 1px solid rgba(214, 181, 109, .75);
    border-radius: 999px;
    background: linear-gradient(180deg, var(--ns-action) 0%, var(--ns-action-deep) 100%);
    color: #fff;
    font-family: var(--gp-sans);
    font-size: .98rem;
    font-weight: 700;
    line-height: 1.1;
    text-decoration: none;
    box-shadow: 0 14px 28px rgba(31, 90, 45, .26), inset 0 1px 0 rgba(255, 255, 255, .16);
    transition: transform .4s var(--ns-ease), box-shadow .4s ease, background .3s ease;
}

/* Arrow sits in its own gold disc, as in the About Us CTA */
#section-news .np-btn-featured i {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ns-gold-light);
    color: var(--ns-ink);
    font-size: .8rem;
    transition: transform .4s var(--ns-ease);
}

#section-news .np-btn-featured:not([class*="link-"]):hover {
    transform: translateY(-2px);
    background: linear-gradient(180deg, var(--ns-action-deep) 0%, var(--ns-ink) 100%);
    box-shadow: 0 18px 32px rgba(31, 90, 45, .34), inset 0 1px 0 rgba(255, 255, 255, .16);
}

#section-news .np-btn-featured:not([class*="link-"]):hover i { transform: translateX(3px); }

/* Secondary "view on <platform>" button under the main CTA */
#section-news .np-btn-featured + div { margin-top: 14px; }

#section-news .np-btn-featured[class*="link-"] {
    justify-content: center;
    gap: 10px;
    padding: 0 24px;
    border-color: transparent;
    box-shadow: 0 10px 22px rgba(23, 62, 41, .18);
}

#section-news .np-btn-featured[class*="link-"] i {
    width: auto;
    height: auto;
    background: none;
    color: #fff;
    font-size: 1.05rem;
}

#section-news .np-btn-featured[class*="link-"]:hover {
    transform: translateY(-2px);
    filter: brightness(.92);
}

/* ----------------------------------------------------------------------
   CENTRE — all announcements (dated ledger)
   ---------------------------------------------------------------------- */
#section-news #npAllAnnouncements { scroll-margin-top: 96px; }

#section-news .np-archive-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 14px;
}

#section-news .np-archive-head h2 {
    margin: 0;
    color: var(--ns-forest);
    font-family: var(--ns-serif);
    font-size: clamp(1.5rem, 3.6cqi, 1.95rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.02em;
}

#section-news .np-archive-count {
    color: var(--ns-muted);
    font-size: .92rem;
    font-weight: 500;
    white-space: nowrap;
}

/* Hairline that opens with a 56px gold stub: same device as the panel rules */
#section-news .np-archive-rule {
    display: block;
    height: 2px;
    margin: 0 0 6px;
    border: 0;
    background: linear-gradient(90deg, var(--ns-gold) 0 56px, var(--ns-line) 56px 100%);
}

/* Row: stacked on very narrow feeds, three tiers as the feed widens */
#section-news .np-archive-item {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "thumb thumb"
        "body body"
        "date actions";
    gap: 14px 18px;
    align-items: center;
    padding: 22px 0;
    border-bottom: 1px solid var(--ns-line);
}

#section-news .np-archive-item:last-child { border-bottom: 0; }

#section-news .np-archive-date {
    grid-area: date;
    color: var(--ns-forest);
    font-family: var(--ns-serif);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    font-variant-numeric: lining-nums;
}

#section-news .np-archive-thumb {
    grid-area: thumb;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid rgba(23, 62, 41, .1);
    border-radius: 12px;
    background: var(--ns-leaf-soft);
    cursor: pointer;
}

#section-news .np-archive-thumb img,
#section-news .np-archive-thumb video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#section-news .np-archive-thumb .play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 34, 18, .28);
    color: #fff;
}

#section-news .np-archive-thumb .play-overlay i {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding-left: 2px;
    border: 1.5px solid rgba(255, 255, 255, .92);
    border-radius: 50%;
    background: rgba(27, 106, 46, .94);
    font-size: .75rem;
}

#section-news .np-archive-body {
    grid-area: body;
    min-width: 0;
}

#section-news .np-archive-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 0 0 8px;
}

#section-news .np-archive-body h3 {
    margin: 0;
    color: var(--ns-ink);
    font-family: var(--ns-serif);
    font-size: 1.16rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.01em;
    overflow-wrap: anywhere;
}

#section-news .np-archive-body p {
    display: -webkit-box;
    max-width: 62ch;
    margin: 0;
    overflow: hidden;
    color: var(--ns-muted);
    font-size: .95rem;
    line-height: 1.65;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

#section-news .np-archive-actions {
    grid-area: actions;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}

#section-news .np-read-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    color: var(--ns-action-deep);
    font-size: .92rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: gap .3s var(--ns-ease), color .25s ease;
}

#section-news .np-read-more:hover { gap: 12px; color: var(--ns-forest); }

#section-news .np-archive-item:hover .np-archive-body h3 { color: var(--ns-action-deep); }

#section-news .np-archive-link-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: #fff;
    font-size: .95rem;
    text-decoration: none;
    transition: transform .3s var(--ns-ease), filter .25s ease;
}

#section-news .np-archive-link-chip:hover { transform: translateY(-2px); filter: brightness(.92); }

/* Type badges: tinted pills, text colors checked at 4.5:1 or better */
#section-news .np-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .03em;
    white-space: nowrap;
}

#section-news .np-type-urgent {
    border-color: rgba(140, 47, 38, .2);
    background: var(--ns-urgent-bg);
    color: var(--ns-urgent);
}

#section-news .np-type-featured {
    border-color: rgba(214, 181, 109, .55);
    background: rgba(246, 227, 174, .45);
    color: #6B5117;
}

#section-news .np-type-regular {
    border-color: rgba(48, 170, 40, .22);
    background: var(--ns-leaf-soft);
    color: var(--ns-action-deep);
}

/* Platform colours (chips and the secondary featured button) */
#section-news .link-facebook  { background: linear-gradient(135deg, #1877F2, #0d5fcb); }
#section-news .link-youtube   { background: linear-gradient(135deg, #E60000, #b80000); }
#section-news .link-instagram { background: linear-gradient(135deg, #F58529, #DD2A7B, #8134AF, #515BD4); }
#section-news .link-x         { background: linear-gradient(135deg, #000000, #333333); }
#section-news .link-tiktok    { background: linear-gradient(135deg, #010101, #2b2b2b); }
#section-news .link-messenger { background: linear-gradient(135deg, #0095E8, #006AFF); }
#section-news .link-generic   { background: linear-gradient(135deg, var(--ns-action), var(--ns-action-deep)); }

/* Empty result */
#section-news .np-archive-empty {
    padding: 64px 24px;
    border: 1px dashed rgba(39, 136, 58, .4);
    border-radius: 20px;
    background: rgba(255, 255, 255, .72);
    text-align: center;
}

#section-news .np-archive-empty i {
    display: block;
    margin: 0 0 16px;
    color: var(--ns-leaf);
    font-size: 2.4rem;
}

#section-news .np-archive-empty h3 {
    margin: 0 0 8px;
    color: var(--ns-forest);
    font-family: var(--ns-serif);
    font-size: 1.3rem;
    font-weight: 600;
}

#section-news .np-archive-empty p {
    margin: 0;
    color: var(--ns-muted);
    font-size: 1rem;
}

/* Feed-width breakpoints (the centre column is the query container) */
@container feed (min-width: 460px) {
    #section-news .np-archive-item {
        grid-template-columns: 112px minmax(0, 1fr);
        grid-template-areas:
            "thumb body"
            "date actions";
        column-gap: 20px;
        align-items: start;
    }
    #section-news .np-archive-thumb { aspect-ratio: 4 / 3; }
    #section-news .np-archive-date { align-self: center; }
    #section-news .np-archive-actions { align-self: center; }
}

@container feed (min-width: 700px) {
    #section-news .np-archive-item {
        grid-template-columns: 76px 128px minmax(0, 1fr) auto;
        grid-template-areas: "date thumb body actions";
        column-gap: 22px;
        align-items: center;
        padding: 24px 0;
    }
    #section-news .np-archive-date { align-self: start; padding-top: 2px; }
    #section-news .np-archive-actions {
        flex-direction: column;
        align-items: flex-end;
        gap: 8px;
        align-self: center;
    }
    #section-news .np-archive-item::before {
        content: '';
        position: absolute;
        inset: 6px -16px;
        z-index: -1;
        border: 1px solid rgba(48, 170, 40, .14);
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 12px 30px rgba(23, 62, 41, .08);
        opacity: 0;
        transition: opacity .3s ease;
        pointer-events: none;
    }
}

@media (hover: hover) {
    @container feed (min-width: 700px) {
        #section-news .np-archive-item:hover::before,
        #section-news .np-archive-item:focus-within::before { opacity: 1; }
    }
}

/* ----------------------------------------------------------------------
   FALLBACK: browsers without container queries get the same breakpoints
   from the viewport. Narrower but still correct and readable.
   ---------------------------------------------------------------------- */
@supports not (container-type: inline-size) {
    @media (min-width: 560px) {
        #section-news .np-search-card { grid-template-columns: minmax(0, 1fr) auto auto; }
        #section-news .np-field-search { grid-column: 1 / -1; }
        #section-news .np-field-type { max-width: 320px; }
        #section-news .np-btn { width: auto; }
        #section-news .np-archive-item {
            grid-template-columns: 112px minmax(0, 1fr);
            grid-template-areas: "thumb body" "date actions";
            align-items: start;
        }
        #section-news .np-archive-thumb { aspect-ratio: 4 / 3; }
    }
    @media (min-width: 1100px) {
        #section-news .np-grid {
            grid-template-columns: 264px minmax(0, 1fr) 304px;
            grid-template-areas: "left main right";
            column-gap: 44px;
        }
        #section-news .np-main-feed,
        #section-news .np-sidebar-left,
        #section-news .np-sidebar-right { order: 0; }
        #section-news .np-main-feed { grid-area: main; }
        #section-news .np-sidebar-left { grid-area: left; }
        #section-news .np-sidebar-right { display: block; grid-area: right; }
        #section-news .np-sidebar-right > .np-animate + .np-animate { margin-top: 24px; }
        #section-news .np-archive-item {
            grid-template-columns: 76px 128px minmax(0, 1fr) auto;
            grid-template-areas: "date thumb body actions";
            align-items: center;
        }
    }
}

/* ----------------------------------------------------------------------
   MOTION + HIGH CONTRAST
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    #section-news .np-btn,
    #section-news .np-btn-featured,
    #section-news .np-btn-featured i,
    #section-news .np-view-all,
    #section-news .np-read-more,
    #section-news .np-story-link,
    #section-news .np-archive-link-chip,
    #section-news .np-archive-item::before {
        transition: none;
    }
    #section-news .np-btn:hover,
    #section-news .np-btn-featured:hover,
    #section-news .np-btn-featured:hover i,
    #section-news .np-archive-link-chip:hover {
        transform: none;
    }
}

@media (forced-colors: active) {
    #section-news .np-search-card,
    #section-news .np-sidebar > .np-animate,
    #section-news .np-featured-media,
    #section-news .np-urgent-item,
    #section-news .np-type-badge {
        border: 1px solid CanvasText;
    }
    #section-news .np-btn,
    #section-news .np-btn-featured {
        border: 2px solid ButtonText;
    }
}

/* ==========================================================================
   3. LIGHTBOX + BACK TO TOP
   These sit outside #section-news in the markup (after the CTA), so they keep
   their own selectors. Behavior is unchanged; only the palette follows
   About Us (action green, champagne ring) and the controls reach 44px.
   ========================================================================== */
.lightbox-overlay {
    display: none; position: fixed; inset: 0; background: rgba(10, 22, 15, 0.94); z-index: 9999;
    align-items: center; justify-content: center; flex-direction: column;
}
.lightbox-media { display: flex; align-items: center; justify-content: center; max-width: 100%; max-height: 80vh; width: 100%; }
.lightbox-media img, .lightbox-media video { max-width: 95vw; max-height: 80vh; object-fit: contain; border-radius: 8px; }
.lightbox-close {
    position: absolute; top: 20px; right: 30px; background: #fff; border: none; width: 44px; height: 44px;
    border-radius: 50%; font-size: 1.2rem; cursor: pointer; color: #173E29; z-index: 10001;
}
.lightbox-nav {
    position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.94); border: none;
    width: 46px; height: 46px; border-radius: 50%; font-size: 1.1rem; cursor: pointer; color: #173E29; z-index: 10001;
}
.lightbox-prev { left: 20px; } .lightbox-next { right: 20px; }
.lightbox-footer { margin-top: 18px; display: flex; align-items: center; gap: 20px; color: #fff; }
.lightbox-download-btn {
    min-height: 44px; padding: 0 22px; border: 1px solid rgba(214, 181, 109, .75); border-radius: 999px;
    background: linear-gradient(180deg, #27883A 0%, #1B6A2E 100%); color: #fff;
    text-decoration: none; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; font-size: 0.92rem;
}
.lightbox-close:focus-visible,
.lightbox-nav:focus-visible,
.lightbox-download-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

#backToTop {
    position: fixed; bottom: 30px; right: 30px; width: 48px; height: 48px;
    background: linear-gradient(180deg, #27883A 0%, #1B6A2E 100%); color: #fff;
    border: 1px solid rgba(214, 181, 109, .75); border-radius: 50%;
    cursor: pointer; box-shadow: 0 10px 26px rgba(31, 90, 45, 0.3);
    display: none; align-items: center; justify-content: center; font-size: 1.15rem; z-index: 999;
    transition: transform .35s cubic-bezier(.16, 1, .3, 1), background .3s ease;
}
#backToTop:hover { transform: translateY(-3px); background: linear-gradient(180deg, #1B6A2E 0%, #173E29 100%); }
#backToTop:focus-visible { outline: 3px solid #1F5A2D; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { #backToTop { transition: none; } #backToTop:hover { transform: none; } }

/* ============================================================================
   4. GSC-TEMPC MASTER HERO SYNC — NEWS PAGE (unchanged)
   Visually and structurally identical to index.php's / about.php's
   `.hero#hp-main-content` hero. Scoped to `.hero#hp-main-content`.
   ============================================================================ */
body:has(#hp-main-content) { background: #fff; }

.hero#hp-main-content {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-height: max(760px, 100svh);
    height: max(760px, 100svh);
    padding: 148px 30px 90px !important;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    color: #fff;
    background-color: #071d12;
    background-image: url('../../company.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.hero#hp-main-content .hp-hero-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    opacity: 0;
    transform: scale(1.025);
    transition: opacity .7s ease, transform 12s cubic-bezier(.22,1,.36,1);
    filter: saturate(.78) contrast(1.02) brightness(.82);
    pointer-events: none;
}
.hero#hp-main-content .hp-hero-video.is-visible { opacity: 1; transform: scale(1.045); }
@media (prefers-reduced-motion: reduce) { .hero#hp-main-content .hp-hero-video { display: none; } }

.hero#hp-main-content::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 70% 100% at 70% 46%, rgba(10,42,24,.06) 0%, rgba(4,19,11,.20) 60%, rgba(2,13,8,.56) 100%),
        linear-gradient(90deg, rgba(3,20,11,.72) 0%, rgba(4,24,13,.42) 38%, rgba(3,18,10,.12) 72%, rgba(3,15,9,.28) 100%),
        linear-gradient(180deg, rgba(3,17,10,.58) 0%, rgba(3,17,10,.03) 22%, rgba(3,17,10,.04) 62%, rgba(2,14,8,.78) 100%);
}

.hero#hp-main-content .hp-ledger-lines {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .12;
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.12) 70%, transparent);
    mask-image: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.12) 70%, transparent);
    background-image: linear-gradient(to bottom, rgba(239,247,237,.16) 1px, transparent 1px);
    background-size: 100% 92px;
}

.hero#hp-main-content .hero-particles { position: absolute; inset: 0; z-index: 1; opacity: .16; pointer-events: none; }
.hero#hp-main-content .hero-particles .particle {
    position: absolute; width: 2px; height: 2px; border-radius: 50%;
    background: rgba(255,255,255,.5); animation: npParticleFloat 8s ease-in-out infinite;
}
.hero#hp-main-content .hero-particles .particle:nth-child(1) { left: 18%; top: 24%; animation-delay: -1.5s; }
.hero#hp-main-content .hero-particles .particle:nth-child(2) { left: 42%; top: 62%; animation-delay: -4s; }
.hero#hp-main-content .hero-particles .particle:nth-child(3) { left: 66%; top: 34%; animation-delay: -2.5s; }
.hero#hp-main-content .hero-particles .particle:nth-child(4) { left: 78%; top: 70%; animation-delay: -6s; }
.hero#hp-main-content .hero-particles .particle:nth-child(5) { left: 30%; top: 80%; animation-delay: -3.2s; }
@keyframes npParticleFloat { 0%, 100% { transform: translate3d(0,0,0); opacity: .15; } 50% { transform: translate3d(0,-18px,0); opacity: .5; } }

.hero#hp-main-content .hero-grid {
    position: relative;
    z-index: 2;
    max-width: 1500px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
}

.hero#hp-main-content .hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1180px;
    margin: 0;
    text-align: left;
    padding-top: clamp(38px, 7vh, 82px);
}

.hero#hp-main-content .hero-content::before {
    content: "GENERAL SANTOS CITY TEACHERS \A & EMPLOYEES MULTI-PURPOSE COOPERATIVE";
    white-space: pre;
    display: block;
    max-width: 760px;
    margin: 0 0 30px;
    color: rgba(245,249,241,.90);
    font-family: 'Poppins', sans-serif;
    font-size: clamp(.63rem, .72vw, .78rem);
    line-height: 1.9;
    font-weight: 500;
    letter-spacing: .30em;
    text-transform: uppercase;
    text-shadow: 0 2px 14px rgba(0,0,0,.35);
    animation: gscLuxuryReveal .95s cubic-bezier(.22,1,.36,1) both;
}
.hero#hp-main-content .hero-content::after {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 72px;
    height: 1px;
    background: rgba(230,197,106,.82);
    transform-origin: left center;
    animation: gscLuxuryRule .9s cubic-bezier(.22,1,.36,1) .08s both;
}

.hero#hp-main-content h1 {
    max-width: none;
    margin: 0;
    line-height: .82;
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(5.2rem, 11.8vw, 12.5rem);
    font-weight: 500;
    letter-spacing: -.045em;
    text-align: left;
    animation: gscLuxuryReveal 1.15s cubic-bezier(.22,1,.36,1) .18s both;
}
.hero#hp-main-content h1 em {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-style: normal;
    font-weight: 500;
    letter-spacing: -.055em;
    display: inline-block;
    background: linear-gradient(105deg, #f8fbf1 0%, #e7f5df 34%, #fffef6 58%, #d9eed6 82%, #f7faef 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: 0 10px 40px rgba(0,0,0,.12);
    animation: gscTitleSheen 8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .hero#hp-main-content h1 em { animation: none; background-position: 0 0; } }

.hero#hp-main-content .hero-content > p {
    max-width: 760px;
    margin: 42px 0 0;
    color: rgba(249,251,245,.93);
    font-family: 'Bodoni Moda', Georgia, serif;
    font-size: clamp(1.12rem, 1.65vw, 1.55rem);
    line-height: 1.62;
    font-weight: 400;
    letter-spacing: .005em;
    text-align: left;
    text-shadow: 0 3px 18px rgba(0,0,0,.32);
    animation: gscLuxuryReveal 1s cubic-bezier(.22,1,.36,1) .48s both;
}

.hero#hp-main-content .hp-hero-est {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 13px;
    margin: 26px 0 0;
    animation: gscLuxuryReveal 1s cubic-bezier(.22,1,.36,1) .58s both;
}
.hero#hp-main-content .hp-hero-est-line { width: 42px; height: 1px; background: rgba(230,197,106,.78); flex-shrink: 0; }
.hero#hp-main-content .hp-hero-est span:last-child {
    color: rgba(232,218,166,.94);
    font-size: .72rem;
    letter-spacing: .22em;
    font-weight: 600;
    text-transform: uppercase;
}

.hero#hp-main-content .hero-buttons {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 34px;
    margin-top: 34px;
    animation: gscLuxuryReveal 1s cubic-bezier(.22,1,.36,1) .68s both;
}
.hero#hp-main-content .hero-buttons .btn-primary {
    min-height: 68px;
    padding: 0 34px;
    border-radius: 5px;
    background: #ffffff;
    color: #30AA28;
    border: 1px solid rgba(255,255,255,.55);
    box-shadow: 0 16px 40px rgba(0,0,0,.22), 0 0 0 1px rgba(255,255,255,.10) inset;
    font-size: .86rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, background .35s ease;
}
.hero#hp-main-content .hero-buttons .btn-primary:hover { transform: translateY(-4px); background: #fffef5; box-shadow: 0 22px 46px rgba(0,0,0,.28); }
.hero#hp-main-content .hero-buttons .btn-primary i { color: #30AA28; margin-right: 8px; }
.hero#hp-main-content .hero-buttons .btn-outline {
    width: auto;
    min-height: auto;
    padding: 8px 0 6px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: rgba(239,226,179,.96);
    box-shadow: none;
    font-size: .9rem;
    font-weight: 500;
    letter-spacing: .04em;
    text-decoration: none;
    position: relative;
}
.hero#hp-main-content .hero-buttons .btn-outline::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: rgba(230,197,106,.78);
    transform: scaleX(.45);
    transform-origin: left;
    transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.hero#hp-main-content .hero-buttons .btn-outline:hover { color: #fff8df; background: transparent; transform: translateY(-2px); }
.hero#hp-main-content .hero-buttons .btn-outline:hover::after { transform: scaleX(1); }
.hero#hp-main-content .hero-buttons .btn-outline i { color: rgba(230,197,106,.92); margin-right: 7px; }

.hero#hp-main-content .hp-trust-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 22px;
    margin-top: 30px;
    opacity: .82;
    animation: gscLuxuryReveal 1s cubic-bezier(.22,1,.36,1) .78s both;
}
.hero#hp-main-content .hp-trust-chip {
    padding: 0; border: 0; background: transparent; border-radius: 0;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    color: rgba(244,247,238,.72);
    font-size: .67rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.hero#hp-main-content .hp-trust-chip i { color: rgba(230,197,106,.88); margin-right: 7px; }

.hero#hp-main-content .hp-hero-bottom-fade {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 180px; z-index: 3; pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(7,29,18,.08) 38%, #fff 100%);
}

.hero#hp-main-content .hp-hero-scroll-cue {
    position: absolute;
    left: auto; right: 8%; bottom: 30px; z-index: 3;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    color: rgba(246,249,241,.74);
    text-decoration: none;
    animation: gscScrollReveal .9s cubic-bezier(.22,1,.36,1) 1.25s both, gscScrollNudge 2.6s ease-in-out 2s infinite;
    transition: color .2s ease;
}
.hero#hp-main-content .hp-hero-scroll-cue:hover { color: rgba(255,255,255,.95); }
.hero#hp-main-content .hp-hero-scroll-cue-line { width: 1px; height: 46px; background: linear-gradient(to bottom, rgba(230,197,106,0), rgba(230,197,106,.88)); }
.hero#hp-main-content .hp-hero-scroll-label { font-family: 'Poppins', sans-serif; font-size: .58rem; letter-spacing: .30em; text-transform: uppercase; font-weight: 600; }

@keyframes gscLuxuryReveal { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes gscLuxuryRule { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }
@keyframes gscTitleSheen { 0%, 22% { background-position: 180% 0; } 48%, 62% { background-position: 0% 0; } 100% { background-position: -180% 0; } }
@keyframes gscScrollReveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes gscScrollNudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

@media (max-width: 1100px) {
    .hero#hp-main-content { padding-left: 24px !important; padding-right: 24px !important; }
    .hero#hp-main-content h1 { font-size: clamp(4.8rem, 12vw, 9rem); }
    .hero#hp-main-content .hero-content > p { max-width: 680px; }
}
@media (max-width: 768px) {
    .hero#hp-main-content { min-height: 100svh; height: auto; padding: 128px 20px 110px !important; align-items: center; }
    .hero#hp-main-content .hero-grid { max-width: 100%; }
    .hero#hp-main-content .hero-content { max-width: 100%; padding-top: 18px; }
    .hero#hp-main-content .hero-content::before { margin-bottom: 24px; font-size: .58rem; letter-spacing: .20em; line-height: 1.8; }
    .hero#hp-main-content h1 { font-size: clamp(4rem, 18vw, 7rem); line-height: .86; letter-spacing: -.06em; }
    .hero#hp-main-content .hero-content > p { margin-top: 30px; font-size: 1.02rem; line-height: 1.62; }
    .hero#hp-main-content .hp-hero-est { margin-top: 22px; gap: 9px; }
    .hero#hp-main-content .hp-hero-est-line { width: 26px; }
    .hero#hp-main-content .hp-hero-est span:last-child { font-size: .62rem; letter-spacing: .13em; }
    .hero#hp-main-content .hero-buttons { gap: 18px; flex-wrap: wrap; margin-top: 28px; }
    .hero#hp-main-content .hero-buttons .btn-primary { min-height: 60px; padding: 0 23px; font-size: .76rem; }
    .hero#hp-main-content .hero-buttons .btn-outline { font-size: .82rem; }
    .hero#hp-main-content .hp-trust-row { gap: 12px 18px; margin-top: 26px; }
    .hero#hp-main-content .hp-trust-chip { font-size: .58rem; }
    .hero#hp-main-content .hp-hero-scroll-cue { right: 22px; bottom: 26px; }
}
@media (max-width: 520px) {
    .hero#hp-main-content { padding-left: 18px !important; padding-right: 18px !important; }
    .hero#hp-main-content .hero-content::before { max-width: 320px; font-size: .54rem; letter-spacing: .16em; }
    .hero#hp-main-content h1 { font-size: clamp(3.25rem, 19.5vw, 5.7rem); }
    .hero#hp-main-content .hero-content > p { max-width: 340px; font-size: .98rem; }
    .hero#hp-main-content .hero-buttons { align-items: flex-start; flex-direction: column; }
    .hero#hp-main-content .hp-trust-row { display: none; }
    .hero#hp-main-content .hp-hero-scroll-cue { display: flex; }
}
@media (orientation: landscape) and (max-height: 560px) {
    .hero#hp-main-content { min-height: 720px; height: auto; padding-top: 116px !important; }
    .hero#hp-main-content h1 { font-size: clamp(3.8rem, 12vw, 7rem); }
    .hero#hp-main-content .hero-content > p { margin-top: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    .hero#hp-main-content .hero-content::before,
    .hero#hp-main-content .hero-content::after,
    .hero#hp-main-content h1,
    .hero#hp-main-content h1 em,
    .hero#hp-main-content .hero-content > p,
    .hero#hp-main-content .hp-hero-est,
    .hero#hp-main-content .hero-buttons,
    .hero#hp-main-content .hp-trust-row,
    .hero#hp-main-content .hp-hero-scroll-cue {
        animation: none !important;
    }
}

/* ----------------------------------------------------------------------------
   NEWS HERO POLISH — moved here from the inline <style> block in news.php so
   the whole page styling lives in one file. Kept AFTER every hero rule above,
   exactly as the inline block used to come after the stylesheet, so the
   cascade result is identical.
   Dropped: `@media (min-width: 769px) { .hero#hp-main-content { padding-bottom:
   140px } }`. It never took effect, because the base rule's `padding: ...
   !important` always won. Removing it changes nothing on screen.
   ---------------------------------------------------------------------------- */

/* Stronger left scrim: text stays readable on every video frame */
.hero#hp-main-content::before {
    background:
        radial-gradient(ellipse 70% 100% at 70% 46%, rgba(10,42,24,.04) 0%, rgba(4,19,11,.18) 60%, rgba(2,13,8,.50) 100%),
        linear-gradient(90deg, rgba(3,20,11,.86) 0%, rgba(4,24,13,.62) 40%, rgba(3,18,10,.16) 74%, rgba(3,15,9,.26) 100%),
        linear-gradient(180deg, rgba(3,17,10,.58) 0%, rgba(3,17,10,.03) 22%, rgba(3,17,10,.06) 58%, rgba(2,14,8,.80) 100%);
}

/* Top rule: logo green into gold */
.hero#hp-main-content .hero-content::after {
    height: 2px;
    width: 84px;
    background: linear-gradient(90deg, #30AA28, #e6c56a);
}

/* Headline: less cramped tracking, softer depth */
.hero#hp-main-content h1 {
    letter-spacing: -.035em;
}
.hero#hp-main-content h1 em {
    letter-spacing: -.04em;
    filter: drop-shadow(0 16px 36px rgba(0,0,0,.38));
    text-shadow: none;
}

/* Subtitle: properly loaded Bodoni, narrower line length */
.hero#hp-main-content .hero-content > p {
    font-family: 'Bodoni Moda', Georgia, serif;
    font-size: clamp(1.05rem, 1.45vw, 1.35rem);
    line-height: 1.7;
    max-width: 600px;
    margin-top: 36px;
}

/* Secondary link: white text, green arrow, gold underline kept */
.hero#hp-main-content .hero-buttons .btn-outline {
    color: rgba(255,255,255,.92);
}
.hero#hp-main-content .hero-buttons .btn-outline i {
    color: #6fcf63;
}

/* Primary button turns logo green on hover */
.hero#hp-main-content .hero-buttons .btn-primary:hover {
    background: #30AA28;
    color: #fff;
    border-color: #30AA28;
}
.hero#hp-main-content .hero-buttons .btn-primary:hover i {
    color: #fff;
}

/* Trust row: hairline divider, more breathing room */
.hero#hp-main-content .hp-trust-row {
    max-width: 640px;
    margin-top: 36px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.14);
    opacity: .9;
}

/* ==========================================================================
   5. GLOBAL CINEMATIC CTA (unchanged) — same component used on index.php /
   about.php / services.php ("Ready to Secure Your Future?"). Wrapped in
   .np-animate so the page's own IntersectionObserver reveals it.
   ========================================================================== */
@keyframes hpFadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }

.gsc-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 130px 20px 150px;
    background-color: #30AA28;
}
.gsc-cta.np-animate { transform: none; }
.gsc-cta.np-animate.np-visible { transform: none; }
.gsc-cta__media {
    position: absolute; inset: 0; z-index: 0;
    background-image: url('../../company.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.02);
}
.gsc-cta__scrim {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        linear-gradient(100deg, rgba(42,150,34,.94) 0%, rgba(48,170,40,.88) 40%, rgba(48,170,40,.58) 66%, rgba(48,170,40,.32) 100%),
        linear-gradient(180deg, rgba(5,15,9,.15) 0%, transparent 30%, transparent 62%, rgba(5,15,9,.55) 100%);
}
.gsc-cta__ledger {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background-image: repeating-linear-gradient(to bottom, rgba(255,255,255,0.07) 0, rgba(255,255,255,0.07) 1px, transparent 1px, transparent 46px);
    opacity: 0.35;
    -webkit-mask-image: linear-gradient(90deg, black, black 55%, transparent 92%);
    mask-image: linear-gradient(90deg, black, black 55%, transparent 92%);
}
.gsc-cta__inner {
    position: relative; z-index: 2;
    max-width: 1300px; margin: 0 auto;
    text-align: left;
}
.gsc-cta__eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 0.78rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase;
    color: #FFC94A;
    margin-bottom: 20px;
    animation: hpFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.gsc-cta__eyebrow i { color: #FFC94A; font-size: 0.75rem; }
.gsc-cta__title {
    font-family: 'Fraunces', Georgia, serif;
    color: #fff;
    font-weight: 700;
    font-size: clamp(2.1rem, 4vw, 3.4rem);
    line-height: 1.14;
    max-width: 720px;
    margin: 0 0 22px;
    text-shadow: 0 4px 30px rgba(0,0,0,0.35);
    animation: hpFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}
.gsc-cta__text {
    color: rgba(255,255,255,0.84);
    font-size: 1.08rem;
    line-height: 1.75;
    max-width: 560px;
    margin: 0 0 38px;
    animation: hpFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}
.gsc-cta__buttons {
    display: flex; flex-wrap: wrap; gap: 18px;
    animation: hpFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}
.gsc-cta .btn-primary { box-shadow: 0 14px 28px -12px rgba(48, 170, 40, 0.65); }
.gsc-cta__fade {
    position: absolute; left: 0; right: 0; bottom: 0; height: 140px; z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(13,36,19,0) 0%, rgba(19,47,25,0.92) 62%, #14351b 100%);
}
@media (max-width: 900px) {
    .gsc-cta { padding: 96px 20px 130px; }
    .gsc-cta__title { max-width: 100%; }
}
@media (max-width: 480px) {
    .gsc-cta { padding: 80px 18px 120px; }
    .gsc-cta__buttons { flex-direction: column; align-items: stretch; }
    .gsc-cta__buttons a { justify-content: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
    .gsc-cta__eyebrow, .gsc-cta__title, .gsc-cta__text, .gsc-cta__buttons { animation: none !important; }
}