/* ======================================================================
   GSC-TEMPC — VISIT US / FIND OUR OFFICE (.gsctempc-location)
   ----------------------------------------------------------------------
   Refresh of the existing layout: same composition (photo left, branches
   + map right), now aligned with the approved About Us house style.

   What changed:
   - Background: same white > green > white gradient as Services and News, the
     so sections blend with no visible cut.
   - Text colors: the logo green (#30AA28) was being used for headings and
     body text (about 2.9:1 on white). Headings now use forest green,
     body text uses #3E4C42 / #53625A, labels use action green.
     #30AA28 is kept for icons and decoration only.
   - Gold is no longer used as text on white (branch numbers).
   - Type: tiny labels (.55-.66rem) raised; body lines raised to .95rem+;
     font-family follows the site (Poppins) like About Us.
   - CTA now matches the About Us pill button with the gold arrow disc.
   - Breakpoints follow the SECTION's width (container queries), because
     the fixed sidebar takes ~320px on desktop.

   Every selector is scoped to .gsctempc-location.
   ====================================================================== */

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

    container: gsc-location / inline-size;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 72px 16px 84px;
    color: var(--gl-text);
    /* Same gradient as Services and News: starts and ends in pure white, so
       the section blends into its neighbours with no visible seam. */
    background: linear-gradient(180deg, #FFFFFF 0%, #F3F8F2 20%, #E9F3E7 62%, #FFFFFF 100%);
}

.gsctempc-location *,
.gsctempc-location *::before,
.gsctempc-location *::after {
    box-sizing: border-box;
}

/* ----------------------------------------------------------------------
   BACKGROUND — soft green light, no shapes: the photo and map are the
   focus, so the field stays quiet.
   ---------------------------------------------------------------------- */
.gsctempc-location__wash {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 50% 40% at 8% 30%, rgba(185, 221, 181, .45), transparent 72%),
        radial-gradient(ellipse 44% 36% at 94% 78%, rgba(185, 221, 181, .35), transparent 70%);
}

/* Botanical corners — same treatment as About Us (path matches your current file:
   ../images/ relative to the CSS file) */
.gsctempc-location__botanical {
    position: absolute;
    z-index: 0;
    bottom: 0;
    width: clamp(110px, 24vw, 280px);
    width: clamp(110px, 16cqi, 280px);
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    opacity: .16;
    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 42%, transparent 90%);
    mask-image: linear-gradient(to top, #000 0%, #000 42%, transparent 90%);
}

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

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

/* ----------------------------------------------------------------------
   LAYOUT SHELL
   ---------------------------------------------------------------------- */
.gsctempc-location__inner {
    position: relative;
    z-index: 1;
    width: min(1320px, 100%);
    margin: 0 auto;
}

/* ----------------------------------------------------------------------
   HEADER
   ---------------------------------------------------------------------- */
.gsctempc-location__header {
    max-width: 760px;
    margin: 0 auto 44px;
    text-align: center;
}

.gsctempc-location__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    color: var(--gl-action-deep);
    font-family: inherit;
    font-size: .74rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.gsctempc-location__eyebrow-line {
    flex: 0 0 auto;
    width: 34px;
    height: 2px;
    background: var(--gl-gold);
}

/* !important kept: global heading/paragraph colors would otherwise win */
.gsctempc-location__title {
    margin: 0;
    color: var(--gl-forest) !important;
    font-family: var(--gl-serif);
    font-size: clamp(2.25rem, 11vw, 3.2rem);
    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);
}

.gsctempc-location__intro {
    max-width: 40em;
    margin: 20px auto 0;
    color: var(--gl-muted) !important;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.75;
}

/* ----------------------------------------------------------------------
   COMPOSITION — stacked by default, two columns when the section is wide
   ---------------------------------------------------------------------- */
.gsctempc-location__composition {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 56px;
}

/* ----------------------------------------------------------------------
   PHOTO
   ---------------------------------------------------------------------- */
.gsctempc-location__visual {
    min-width: 0;
    width: min(100%, 720px);
    margin: 0 auto;
    padding: 8px 12px 24px 8px;
}

.gsctempc-location__photo-frame {
    position: relative;
    margin: 0;
    padding: 8px;
    background: var(--gl-white);
    border: 1px solid rgba(48, 170, 40, .2);
    border-radius: 6px 24px 6px 6px;
    box-shadow:
        0 28px 56px rgba(23, 62, 41, .16),
        0 6px 18px rgba(48, 170, 40, .10);
}

/* Champagne offset outline, hanging up-left of the frame */
.gsctempc-location__photo-offset {
    position: absolute;
    z-index: -1;
    inset: -9px 0 0 -9px;
    border: 1px solid rgba(214, 181, 109, .85);
    border-radius: 5px 22px 5px 5px;
    pointer-events: none;
}

.gsctempc-location__photo-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1.04 / 1;
    border-radius: 4px 18px 4px 4px;
    background: var(--gl-leaf-soft);
}

.gsctempc-location__photo-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 32%, rgba(7, 34, 23, .14) 100%);
}

.gsctempc-location__photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .95s var(--gl-ease), filter .95s ease;
}

.gsctempc-location__photo-frame:hover .gsctempc-location__photo {
    transform: scale(1.025);
    filter: saturate(1.04) contrast(1.01);
}

.gsctempc-location__photo-caption {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 4px 2px;
    color: var(--gl-muted);
    font-family: inherit;
    font-size: .74rem;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.gsctempc-location__photo-caption span:first-child {
    color: var(--gl-action-deep);
    font-weight: 700;
}

.gsctempc-location__photo-caption span:last-child {
    color: var(--gl-muted);
    font-weight: 600;
    text-align: left;
}

/* ----------------------------------------------------------------------
   CONTENT COLUMN
   ---------------------------------------------------------------------- */
.gsctempc-location__content {
    min-width: 0;
    width: min(100%, 720px);
    margin: 0 auto;
    padding: 4px 0 0;
}

.gsctempc-location__location-kicker,
.gsctempc-location__branch-label,
.gsctempc-location__map-label,
.gsctempc-location__footer-note {
    font-family: inherit;
    text-transform: uppercase;
    font-weight: 800;
}

.gsctempc-location__location-kicker {
    display: block;
    margin-bottom: 10px;
    color: var(--gl-action-deep);
    font-size: .74rem;
    line-height: 1.3;
    letter-spacing: .18em;
}

.gsctempc-location__location-heading h3 {
    max-width: 18em;
    margin: 0;
    color: var(--gl-forest);
    font-family: var(--gl-serif);
    font-size: clamp(1.65rem, 8vw, 2.2rem);
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: -.025em;
    text-wrap: balance;
}

/* Gold rule — left edge sits exactly on the content edge */
.gsctempc-location__rule {
    display: block;
    width: 72px;
    height: 3px;
    margin: 20px 0 24px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--gl-gold) 0 58%, var(--gl-leaf) 58% 100%);
}

/* ----------------------------------------------------------------------
   BRANCHES
   ---------------------------------------------------------------------- */
.gsctempc-location__branches {
    display: flex;
    flex-direction: column;
}

.gsctempc-location__branch {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 12px;
    padding: 20px 0;
    border-top: 1px solid var(--gl-rule);
}

.gsctempc-location__branch:last-child {
    border-bottom: 1px solid var(--gl-rule);
}

/* Gold text on white fails contrast, so the numeral uses action green */
.gsctempc-location__branch-number {
    padding-top: 3px;
    color: var(--gl-action);
    font-family: var(--gl-serif);
    font-size: 1.1rem;
    line-height: 1;
    font-weight: 600;
}

.gsctempc-location__branch-copy {
    min-width: 0;
}

.gsctempc-location__branch-label {
    display: block;
    margin-bottom: 6px;
    color: var(--gl-muted);
    font-size: .72rem;
    line-height: 1.3;
    letter-spacing: .14em;
}

.gsctempc-location__branch-copy h4 {
    margin: 0 0 10px;
    color: var(--gl-forest);
    font-family: var(--gl-serif);
    font-size: 1.3rem;
    line-height: 1.18;
    font-weight: 600;
    letter-spacing: -.01em;
}

.gsctempc-location__branch-line {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 7px 0 0;
    color: var(--gl-text) !important;
    font-family: inherit;
    font-size: .95rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.gsctempc-location__branch-line i {
    flex: 0 0 18px;
    width: 18px;
    margin-top: 4px;
    color: var(--gl-brand);
    font-size: .85rem;
    text-align: center;
}

.gsctempc-location__branch-line a {
    color: var(--gl-action-deep);
    text-decoration: underline;
    text-decoration-color: rgba(214, 181, 109, .9);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.gsctempc-location__branch-line a:hover {
    color: var(--gl-ink);
}

.gsctempc-location__branch-line a:focus-visible {
    outline: 3px solid var(--gl-action);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ----------------------------------------------------------------------
   MAP
   ---------------------------------------------------------------------- */
.gsctempc-location__map-label {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 28px 0 12px;
    color: var(--gl-action-deep);
    font-size: .74rem;
    line-height: 1.3;
    letter-spacing: .16em;
}

.gsctempc-location__map-label-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(31, 90, 45, .3), transparent);
}

.gsctempc-location__map {
    position: relative;
    overflow: hidden;
    min-height: 300px;
    border: 1px solid rgba(48, 170, 40, .2);
    border-radius: 5px 18px 5px 5px;
    background: var(--gl-white);
    box-shadow: 0 16px 36px rgba(23, 62, 41, .13);
}

/* Fine champagne keyline over the map edge (non-interactive) */
.gsctempc-location__map::before {
    content: '';
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    border: 1px solid rgba(214, 181, 109, .35);
    border-radius: inherit;
}

/* !important kept: embed code usually carries inline width/height attributes */
.gsctempc-location__map iframe {
    display: block;
    width: 100% !important;
    height: 100% !important;
    min-height: 300px !important;
    border: 0 !important;
}

.gsctempc-location__map-placeholder {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    color: var(--gl-muted);
    text-align: center;
    background: linear-gradient(180deg, var(--gl-white), var(--gl-sage));
}

.gsctempc-location__map-placeholder i {
    color: var(--gl-brand);
    font-size: 1.8rem;
}

.gsctempc-location__map-placeholder p {
    max-width: 24em;
    margin: 0;
    font-size: .95rem;
    line-height: 1.65;
}

/* ----------------------------------------------------------------------
   FOOTER + CTA
   ---------------------------------------------------------------------- */
.gsctempc-location__footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding-top: 22px;
}

.gsctempc-location__footer-note {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--gl-muted);
    font-size: .72rem;
    line-height: 1.4;
    letter-spacing: .1em;
}

.gsctempc-location__footer-rule {
    flex: 0 0 auto;
    width: 30px;
    height: 2px;
    background: var(--gl-gold);
}

/* Same pill CTA as About Us */
.gsctempc-location__cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    min-height: 54px;
    padding: 11px 12px 11px 24px;
    overflow: hidden;
    border: 1px solid rgba(214, 181, 109, .75);
    border-radius: 999px;
    background: linear-gradient(180deg, var(--gl-action) 0%, var(--gl-action-deep) 100%);
    color: #fff;
    font-family: inherit;
    font-size: .95rem;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: .02em;
    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(--gl-ease), box-shadow .4s ease, background .3s ease;
}

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

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

.gsctempc-location__cta:hover i {
    transform: translateX(3px);
}

.gsctempc-location__cta:focus-visible {
    outline: 3px solid var(--gl-forest);
    outline-offset: 3px;
}

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

/* ----------------------------------------------------------------------
   RESPONSIVE
   Section padding must use media queries (a container cannot query its
   own size); everything inside follows the section's width.
   ---------------------------------------------------------------------- */
@media (min-width: 600px) {
    .gsctempc-location { padding: 96px 28px 104px; }
}

/* Very narrow sections */
@container gsc-location (max-width: 360px) {
    .gsctempc-location__botanical { display: none; }
    .gsctempc-location__eyebrow { letter-spacing: .16em; }
    .gsctempc-location__branch { grid-template-columns: 26px minmax(0, 1fr); gap: 9px; }
    .gsctempc-location__branch-line { font-size: .9rem; }
    .gsctempc-location__cta { padding-left: 20px; font-size: .9rem; }
}

/* Tablet-width section */
@container gsc-location (min-width: 600px) {
    .gsctempc-location__header { margin-bottom: 56px; }
    .gsctempc-location__eyebrow-line { width: 48px; }
    .gsctempc-location__title { font-size: clamp(2.8rem, 8cqi, 4.1rem); }
    .gsctempc-location__intro { font-size: 1.05rem; }
    .gsctempc-location__composition { gap: 68px; }
    .gsctempc-location__visual { padding: 10px 18px 28px 10px; }
    .gsctempc-location__photo-frame { padding: 10px; border-radius: 7px 28px 7px 7px; }
    .gsctempc-location__photo-offset { inset: -11px 0 0 -11px; border-radius: 6px 26px 6px 6px; }
    .gsctempc-location__photo-wrap { border-radius: 4px 21px 4px 4px; }
    .gsctempc-location__photo-caption { flex-direction: row; align-items: center; justify-content: space-between; gap: 15px; }
    .gsctempc-location__photo-caption span:last-child { text-align: right; }
    .gsctempc-location__location-heading h3 { font-size: clamp(1.9rem, 5cqi, 2.4rem); }
    .gsctempc-location__branch { grid-template-columns: 42px minmax(0, 1fr); gap: 16px; }
    .gsctempc-location__branch-number { font-size: 1.2rem; }
    .gsctempc-location__branch-copy h4 { font-size: 1.4rem; }
    .gsctempc-location__map,
    .gsctempc-location__map-placeholder { min-height: 340px; }
    .gsctempc-location__map iframe { min-height: 340px !important; }
    .gsctempc-location__footer { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
    .gsctempc-location__cta { width: auto; min-width: 250px; }
}

/* Desktop-width section: photo left, branches + map right */
@container gsc-location (min-width: 900px) {
    .gsctempc-location__composition {
        grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
        gap: clamp(48px, 6cqi, 92px);
    }
    .gsctempc-location__visual { width: 100%; margin: 0; }
    .gsctempc-location__content { width: 100%; margin: 0; padding-top: 6px; }
    .gsctempc-location__title { font-size: clamp(2.7rem, 4.6cqi, 4.5rem); }
    .gsctempc-location__location-heading h3 { font-size: clamp(1.75rem, 2.8cqi, 2.5rem); }
    .gsctempc-location__map,
    .gsctempc-location__map-placeholder { min-height: 360px; }
    .gsctempc-location__map iframe { min-height: 360px !important; }
}

/* Fallback for browsers without container queries */
@supports not (container-type: inline-size) {
    @media (min-width: 600px) {
        .gsctempc-location__photo-caption { flex-direction: row; align-items: center; justify-content: space-between; }
        .gsctempc-location__footer { flex-direction: row; align-items: center; justify-content: space-between; }
        .gsctempc-location__cta { width: auto; min-width: 250px; }
        .gsctempc-location__title { font-size: clamp(2.8rem, 6vw, 4rem); }
    }
    @media (min-width: 1200px) {
        .gsctempc-location__composition {
            grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
            gap: 72px;
        }
        .gsctempc-location__visual,
        .gsctempc-location__content { width: 100%; margin: 0; }
    }
}

/* ----------------------------------------------------------------------
   TOUCH, MOTION, CONTRAST
   ---------------------------------------------------------------------- */
@media (hover: none) {
    .gsctempc-location__photo-frame:hover .gsctempc-location__photo {
        transform: none;
        filter: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gsctempc-location__photo,
    .gsctempc-location__cta,
    .gsctempc-location__cta i {
        transition: none !important;
    }
    .gsctempc-location__photo-frame:hover .gsctempc-location__photo,
    .gsctempc-location__cta:hover,
    .gsctempc-location__cta:hover i {
        transform: none;
    }
}

@media (forced-colors: active) {
    .gsctempc-location__cta {
        border: 2px solid ButtonText;
    }
    .gsctempc-location__rule,
    .gsctempc-location__footer-rule,
    .gsctempc-location__eyebrow-line {
        background: CanvasText;
    }
}