/* ======================================================================
   GSC-TEMPC — OUR VALUES / WHAT WE STAND FOR (#section-values)
   File:   assets/css/values_modern.css
   Scope:  every selector starts with #section-values; no other section,
           the header, the sidebar or the footer is affected.

   Concept: a TRIPTYCH. Three pillars stand side by side, divided by
   fine leaf-green hairlines. Each pillar is a natural photograph on a
   pale-green offset plate, a round forest "seal" numeral (the About Us
   heritage seal, scaled down), then the value's name and description.
   The middle pillar is dropped 48px on wide sections: one deliberate
   asymmetry, the only one. The header is centred with a mathematically
   centred gold-and-leaf divider; the background stays white with a
   whisper of green so the photographs carry the section.

   Container-query driven (the section is a size container), so the
   ~320px fixed sidebar is accounted for. Markup, class names and
   .reveal hooks are unchanged.
   ====================================================================== */

#section-values.gsctempc-values {
    --vl-brand: #30AA28;
    --vl-leaf: #B9DDB5;
    --vl-leaf-soft: #E5F1E3;
    --vl-sage: #F3F8F2;
    --vl-action: #27883A;
    --vl-action-deep: #1B6A2E;
    --vl-forest: #1F5A2D;
    --vl-ink: #173E29;
    --vl-gold: #D6B56D;
    --vl-gold-light: #F6E3AE;
    --vl-white: #FFFFFF;
    --vl-text: #3E4C42;
    --vl-muted: #53625A;
    --vl-ease: cubic-bezier(.16, 1, .3, 1);
    --vl-serif: var(--hp-display-font, 'Fraunces', Georgia, 'Times New Roman', serif);

    container: values / inline-size;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: 100%;
    margin: 0;
    padding: 72px 14px 88px;
    scroll-margin-top: 80px;
    color: var(--vl-forest);
    background: linear-gradient(180deg, #FFFFFF 0%, #F3F8F2 26%, #EDF5EB 64%, #FFFFFF 100%);
}

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

/* Same green light as the Gallery section */
#section-values.gsctempc-values::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 50% 38% at 8% 30%, rgba(185, 221, 181, .45), transparent 72%),
        radial-gradient(ellipse 46% 36% at 96% 70%, rgba(185, 221, 181, .32), transparent 72%);
}

#section-values.gsctempc-values::after {
    content: none;
}

#section-values .gsctempc-values__botanical {
    position: absolute;
    z-index: -1;
    bottom: 0;
    width: clamp(110px, 24vw, 260px);
    width: clamp(110px, 15cqi, 260px);
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    opacity: .14;
    filter: grayscale(1) sepia(.55) saturate(3) hue-rotate(85deg) brightness(.7);
    mix-blend-mode: multiply;
    -webkit-mask-image: linear-gradient(to top, #000 0%, #000 40%, transparent 88%);
    mask-image: linear-gradient(to top, #000 0%, #000 40%, transparent 88%);
}

#section-values .gsctempc-values__botanical--left {
    left: 0;
    background-image: url('../images/botanical-corner-right.png');
    background-position: bottom left;
    transform: scaleX(-1);
}

#section-values .gsctempc-values__botanical--right {
    right: 0;
    background-image: url('../images/botanical-corner-right.png');
    background-position: bottom right;
}

#section-values .gsctempc-values__inner {
    position: relative;
    width: min(1240px, 100%);
    margin: 0 auto;
}

/* ----------------------------------------------------------------------
   HEADER — centred. Eyebrow lines and divider are symmetric about the
   section's centre line.
   ---------------------------------------------------------------------- */
#section-values .gsctempc-values__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 780px;
    margin: 0 auto 48px;
    text-align: center;
}

#section-values .gsctempc-values__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 20px;
    color: var(--vl-action-deep);
    font-family: inherit;
    font-size: .82rem;
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .22em;
}

#section-values .gsctempc-values__eyebrow-line,
#section-values .gsctempc-values__eyebrow::after {
    content: '';
    display: block;
    flex: 0 0 auto;
    width: 44px;
    height: 2px;
}

#section-values .gsctempc-values__eyebrow-line {
    background: linear-gradient(90deg, var(--vl-leaf) 0 40%, var(--vl-gold) 40% 100%);
}

#section-values .gsctempc-values__eyebrow::after {
    background: linear-gradient(90deg, var(--vl-gold) 0 60%, var(--vl-leaf) 60% 100%);
}

#section-values .gsctempc-values__title {
    margin: 0;
    color: var(--vl-forest);
    font-family: var(--vl-serif);
    font-size: clamp(2.4rem, 10vw, 3.3rem);
    font-size: clamp(2.4rem, 11cqi, 3.3rem);
    line-height: 1.04;
    font-weight: 600;
    letter-spacing: -.035em;
    text-wrap: balance;
    overflow-wrap: break-word;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}

#section-values .gsctempc-values__title span,
#section-values .gsctempc-values__title em {
    display: block;
}

#section-values .gsctempc-values__title em {
    color: var(--vl-forest);
    font-style: italic;
    font-weight: 500;
}

/* The one gold divider: block-level, auto margins = exact centre */
#section-values .gsctempc-values__title::after {
    content: '';
    display: block;
    width: 72px;
    height: 3px;
    margin: 26px auto 0;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--vl-gold) 0 58%, var(--vl-leaf) 58% 100%);
}

#section-values .gsctempc-values__intro {
    max-width: 34em;
    margin: 24px 0 0;
    color: var(--vl-text);
    font-family: inherit;
    font-size: 1.05rem;
    line-height: 1.8;
    font-weight: 400;
}

/* ----------------------------------------------------------------------
   TRIPTYCH — default (narrow section): pillars stacked, hairline between
   ---------------------------------------------------------------------- */
#section-values .gsctempc-values__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
}

#section-values .gsctempc-values__pillar {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    min-width: 0;
    padding: 0 0 44px;
}

#section-values .gsctempc-values__pillar + .gsctempc-values__pillar {
    padding-top: 44px;
    border-top: 1px solid var(--vl-leaf);
}

#section-values .gsctempc-values__pillar:last-child {
    padding-bottom: 0;
}

/* Stagger the existing reveal, no !important needed (ID specificity) */
#section-values .gsctempc-values__pillar--01.reveal { transition-delay: .05s; }
#section-values .gsctempc-values__pillar--02.reveal { transition-delay: .12s; }
#section-values .gsctempc-values__pillar--03.reveal { transition-delay: .19s; }

/* ----------------------------------------------------------------------
   PHOTOGRAPH — natural rectangle on a pale-green offset plate
   ---------------------------------------------------------------------- */
#section-values .gsctempc-values__media {
    position: relative;
    min-width: 0;
    margin: 0 12px 12px 0; /* room for the plate, so nothing overflows */
}

#section-values .gsctempc-values__frame {
    position: absolute;
    z-index: 0;
    top: 12px;
    left: 12px;
    right: -12px;
    bottom: -12px;
    border-radius: 4px;
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .45) 0 2px, transparent 2px 10px),
        linear-gradient(170deg, rgba(185, 221, 181, .85), rgba(185, 221, 181, .4));
    pointer-events: none;
    transition: transform .5s var(--vl-ease);
}

#section-values .gsctempc-values__photo-shell {
    position: relative;
    z-index: 1;
    aspect-ratio: 5 / 4;
    overflow: hidden;
    border: 1px solid rgba(48, 170, 40, .18);
    border-radius: 4px;
    background: var(--vl-leaf-soft);
    box-shadow: 0 20px 40px rgba(23, 62, 41, .14), 0 4px 12px rgba(48, 170, 40, .08);
}

#section-values .gsctempc-values__photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transition: transform .9s var(--vl-ease), filter .6s ease;
}

/* Round forest seal numeral: gold ring, About Us heritage-seal language */
#section-values .gsctempc-values__badge {
    position: absolute;
    z-index: 2;
    top: 14px;
    left: 14px;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1.5px solid var(--vl-gold);
    border-radius: 50%;
    background: linear-gradient(155deg, var(--vl-action) 0%, var(--vl-action-deep) 100%);
    box-shadow: inset 0 0 0 3px var(--vl-action-deep), 0 0 0 4px var(--vl-white), 0 10px 22px rgba(23, 62, 41, .3);
    color: var(--vl-gold-light);
    font-family: var(--vl-serif);
    font-size: 1.15rem;
    line-height: 1;
    font-weight: 600;
    letter-spacing: .02em;
}

@media (hover: hover) and (pointer: fine) {
    #section-values .gsctempc-values__pillar:hover .gsctempc-values__photo {
        transform: scale(1.03);
        filter: saturate(1.05);
    }
    #section-values .gsctempc-values__pillar:hover .gsctempc-values__frame {
        transform: translate(5px, 5px);
    }
}

/* ----------------------------------------------------------------------
   COPY
   ---------------------------------------------------------------------- */
#section-values .gsctempc-values__copy {
    min-width: 0;
    margin-top: 28px;
}

#section-values .gsctempc-values__name {
    margin: 0 0 12px;
    color: var(--vl-forest);
    font-family: var(--vl-serif);
    font-size: 1.6rem;
    line-height: 1.12;
    font-weight: 600;
    letter-spacing: -.025em;
    text-wrap: balance;
}

#section-values .gsctempc-values__description {
    max-width: 34em;
    margin: 0;
    color: var(--vl-text);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.75;
    font-weight: 400;
}

/* ----------------------------------------------------------------------
   CTA — About Us pill, centred under the triptych
   ---------------------------------------------------------------------- */
#section-values .gsctempc-values__action {
    display: flex;
    justify-content: center;
    margin-top: 56px;
}

#section-values .gsctempc-values__cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    min-height: 56px;
    padding: 12px 14px 12px 26px;
    overflow: hidden;
    border: 1px solid rgba(214, 181, 109, .75);
    border-radius: 999px;
    background: linear-gradient(180deg, var(--vl-action) 0%, var(--vl-action-deep) 100%);
    color: #fff;
    font-family: inherit;
    font-size: .88rem;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 14px 28px rgba(31, 90, 45, .28), inset 0 1px 0 rgba(255, 255, 255, .16);
    transition: transform .4s var(--vl-ease), box-shadow .4s ease, background .3s ease;
}

#section-values .gsctempc-values__cta > * {
    position: relative;
}

#section-values .gsctempc-values__cta::before {
    content: '';
    position: absolute;
    top: -40%;
    left: -70%;
    width: 46%;
    height: 180%;
    transform: skewX(-18deg);
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent);
    transition: left .7s var(--vl-ease);
    pointer-events: none;
}

#section-values .gsctempc-values__cta i {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--vl-gold-light);
    color: var(--vl-ink);
    font-size: .8rem;
    letter-spacing: 0;
    transition: transform .4s var(--vl-ease);
}

#section-values .gsctempc-values__cta:hover {
    transform: translateY(-2px);
    background: linear-gradient(180deg, var(--vl-action-deep) 0%, var(--vl-ink) 100%);
    box-shadow: 0 18px 32px rgba(31, 90, 45, .36), inset 0 1px 0 rgba(255, 255, 255, .16);
}

#section-values .gsctempc-values__cta:hover::before { left: 130%; }
#section-values .gsctempc-values__cta:hover i { transform: translateX(3px); }

#section-values .gsctempc-values__cta:focus-visible {
    outline: 3px solid var(--vl-forest);
    outline-offset: 3px;
}

#section-values .gsctempc-values__cta:active {
    transform: translateY(0);
    box-shadow: 0 6px 14px rgba(31, 90, 45, .26);
}

/* ----------------------------------------------------------------------
   RESPONSIVE — section-width driven
   ---------------------------------------------------------------------- */
@media (min-width: 600px) {
    #section-values.gsctempc-values { padding: 88px 24px 104px; }
}

@media (min-width: 1100px) {
    #section-values.gsctempc-values { padding: 104px 32px 120px; }
}

/* Section 600px+: each pillar becomes a photo | text row */
@container values (min-width: 600px) {
    #section-values .gsctempc-values__header { margin-bottom: 64px; }
    #section-values .gsctempc-values__title { font-size: clamp(2.8rem, 7vw, 3.9rem); font-size: clamp(2.8rem, 7.4cqi, 3.9rem); }
    #section-values .gsctempc-values__title span,
    #section-values .gsctempc-values__title em { display: inline; }
    #section-values .gsctempc-values__title em::before { content: ' '; }
    #section-values .gsctempc-values__pillar {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        column-gap: 48px;
        align-items: center;
        padding-bottom: 52px;
    }
    #section-values .gsctempc-values__pillar + .gsctempc-values__pillar { padding-top: 52px; }
    #section-values .gsctempc-values__copy { margin-top: 0; }
    #section-values .gsctempc-values__badge { width: 56px; height: 56px; font-size: 1.25rem; }
    #section-values .gsctempc-values__action { margin-top: 64px; }
}

/* Section 900px+: three-column triptych, hairline dividers, middle dropped */
@container values (min-width: 900px) {
    #section-values .gsctempc-values__header { margin-bottom: 76px; }
    #section-values .gsctempc-values__title { font-size: clamp(3.2rem, 5vw, 4.4rem); font-size: clamp(3.2rem, 4.6cqi, 4.4rem); }
    #section-values .gsctempc-values__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #section-values .gsctempc-values__pillar {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding: 0 clamp(20px, 3.2cqi, 44px);
    }
    #section-values .gsctempc-values__pillar:first-child { padding-left: 0; }
    #section-values .gsctempc-values__pillar:last-child { padding-right: 0; }
    #section-values .gsctempc-values__pillar + .gsctempc-values__pillar {
        padding-top: 0;
        border-top: 0;
        border-left: 1px solid var(--vl-leaf);
    }
    #section-values .gsctempc-values__pillar--02 .gsctempc-values__media { margin-top: 48px; }
    #section-values .gsctempc-values__copy { margin-top: 32px; }
    #section-values .gsctempc-values__name { font-size: clamp(1.5rem, 2.2cqi, 1.9rem); }
    #section-values .gsctempc-values__action { margin-top: 80px; }
}

/* Very narrow sections (320px phones) */
@container values (max-width: 360px) {
    #section-values .gsctempc-values__eyebrow { gap: 10px; letter-spacing: .16em; }
    #section-values .gsctempc-values__eyebrow-line,
    #section-values .gsctempc-values__eyebrow::after { width: 28px; }
    #section-values .gsctempc-values__badge { top: 10px; left: 10px; width: 46px; height: 46px; font-size: 1.05rem; }
}

@container values (max-width: 599px) {
    #section-values .gsctempc-values__botanical { display: none; }
    #section-values .gsctempc-values__cta { width: 100%; }
}

/* Fallback for browsers without container queries */
@supports not (container-type: inline-size) {
    @media (min-width: 700px) and (max-width: 1099px) {
        #section-values .gsctempc-values__pillar { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 40px; align-items: center; }
        #section-values .gsctempc-values__copy { margin-top: 0; }
    }
    @media (min-width: 1100px) {
        #section-values .gsctempc-values__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        #section-values .gsctempc-values__pillar { display: flex; flex-direction: column; padding: 0 36px; }
        #section-values .gsctempc-values__pillar:first-child { padding-left: 0; }
        #section-values .gsctempc-values__pillar:last-child { padding-right: 0; }
        #section-values .gsctempc-values__pillar + .gsctempc-values__pillar { padding-top: 0; border-top: 0; border-left: 1px solid var(--vl-leaf); }
        #section-values .gsctempc-values__pillar--02 .gsctempc-values__media { margin-top: 48px; }
    }
}

/* ----------------------------------------------------------------------
   REDUCED MOTION / FORCED COLORS
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    #section-values .gsctempc-values__photo,
    #section-values .gsctempc-values__frame,
    #section-values .gsctempc-values__cta,
    #section-values .gsctempc-values__cta::before,
    #section-values .gsctempc-values__cta i {
        transition: none;
    }
    #section-values .gsctempc-values__pillar:hover .gsctempc-values__photo,
    #section-values .gsctempc-values__pillar:hover .gsctempc-values__frame,
    #section-values .gsctempc-values__cta:hover,
    #section-values .gsctempc-values__cta:hover i {
        transform: none;
    }
    #section-values .gsctempc-values__pillar.reveal { transition-delay: 0s; }
}

@media (forced-colors: active) {
    #section-values .gsctempc-values__badge,
    #section-values .gsctempc-values__photo-shell { border: 1px solid CanvasText; }
    #section-values .gsctempc-values__cta { border: 2px solid ButtonText; }
}

/* Existing scroll-reveal hook, preserved */
#section-values.gsctempc-values.reveal.is-active { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }