/* ==========================================================================
   Group Ritu — Luxe layer
   A refinement layer loaded after style.css / responsive.css.
   Introduces a champagne-gold accent, motion, and the redesigned
   Our Group / Our Firsts components — without touching the vendor CSS.
   ========================================================================== */

:root{
    --gr-navy: #0e2f7e;
    --gr-navy-deep: #081b4d;
    --gr-gold: #b6913c;
    --gr-gold-light: #d9c187;
    --gr-ink: #12141c;
    --gr-muted: #6b6f7b;
    --gr-hairline: rgba(14, 47, 126, 0.12);
    --gr-paper: #fbfaf7;
}

html{
    scroll-behavior: smooth;
}

/* Device safety net: guards every page against horizontal scroll/overflow
   on phones and tablets, and keeps any image without explicit sizing from
   ever exceeding its container. */
html, body{
    max-width: 100%;
    overflow-x: hidden;
}
img{
    max-width: 100%;
    height: auto;
}

::selection{
    background: var(--gr-gold);
    color: #fff;
}

/* Slim gold scrollbar (webkit) — subtle premium touch */
::-webkit-scrollbar{
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track{
    background: #f2f1ee;
}
::-webkit-scrollbar-thumb{
    background: linear-gradient(180deg, var(--gr-gold-light), var(--gr-gold));
    border-radius: 8px;
    border: 2px solid #f2f1ee;
}

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

/* ---------- Section title accent ----------
   NOTE: span.back-text is positioned absolute + translateY(-114%) by the
   vendor stylesheet (a decorative oversized outline heading), so it does
   not reserve real flow height. Anchoring the accent rule to a normal,
   in-flow ::after on the .section-tittle container itself (rather than to
   the absolutely-positioned span) guarantees real, predictable clearance
   between the accent and whatever text follows. */
.section-tittle{
    position: relative;
}
.section-tittle::after{
    content: "";
    display: block;
    width: 64px;
    height: 3px;
    margin: 58px auto 0;
    background: linear-gradient(90deg, var(--gr-gold), var(--gr-gold-light));
    border-radius: 3px;
}

/* A real, visible H1 for the two award pages, which previously had no
   page heading at all (just a banner image) — search engines and screen
   readers both need actual text here, not just an image's alt attribute. */
.gr-page-title{
    margin: 0 0 26px;
    font-family: DidotLTPro-Roman, Baskerville, Times, serif;
    font-size: 34px;
    font-weight: 600;
    letter-spacing: .5px;
    color: var(--gr-navy);
}
@media (max-width: 575px){
    .gr-page-title{ font-size: 24px; }
}

/* ---------- Header polish ----------
   Every nav link carries an inline style="color:#000" in the markup —
   inline styles beat any external rule regardless of specificity, so the
   :hover colour change needs !important or it silently never fires. */
.main-menu nav ul#navigation > li{
    position: relative;
}
.main-menu nav ul#navigation > li > a{
    position: relative;
    z-index: 1;
    transition: color .25s ease;
}
.main-menu nav ul#navigation > li > a::after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: 18px;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--gr-gold), var(--gr-gold-light));
    transition: width .3s cubic-bezier(.4,0,.2,1), left .3s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
}
.main-menu nav ul#navigation > li > a:hover{
    color: var(--gr-navy) !important;
}
.main-menu nav ul#navigation > li > a:hover::after{
    left: 0;
    width: 100%;
}
.header-right-btn .btn{
    transition: box-shadow .3s ease, transform .3s ease;
}
.header-right-btn .btn:hover{
    box-shadow: 0 6px 18px rgba(182,145,60,.35);
    transform: translateY(-1px);
}

/* ---------- Hero polish ---------- */
.hero__caption{
    position: relative;
}
.slider-area .hero__caption{
    padding-top: 260px;
}
@media (max-width: 767px){
    .slider-area .hero__caption{ padding-top: 70px; }
}
.hero-kicker{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 13px;
    font-weight: 600;
    font-family: DidotLTPro-Roman, Baskerville, Times, serif;
    color: var(--gr-gold-light);
    margin-bottom: 18px;
}
.hero-kicker::before{
    content: "";
    width: 34px;
    height: 1px;
    background: var(--gr-gold-light);
    display: inline-block;
}
.hero__caption h1{
    position: relative;
}
.hero__caption h1::after{
    content: "";
    display: block;
    margin-top: 22px;
    width: 90px;
    height: 3px;
    background: linear-gradient(90deg, var(--gr-gold), transparent);
    border-radius: 3px;
}
/* The vendor's own .stock-text h2 is position:absolute (it's built for a
   colour-cycling headline effect that cross-fades between several stacked
   h2s) — but this page only ever has ONE h2 in there, so the stacking
   this position:absolute exists for never happens. Left as-is, it means
   .stock-text collapses to ~0px of real flow height, so anything placed
   after it (this cue) renders right where the H1 ends, overlapping the
   visually-floating headline on top of it. A hand-picked min-height per
   breakpoint (the previous approach here) just traded that bug for an
   oversized gap instead, because it couldn't adapt when actual rendered
   text size varied. Putting the single h2 back in normal flow fixes it
   properly at any screen size, with no guessing. */
.hero__caption .stock-text h2{
    position: relative !important;
    top: auto !important;
    left: auto !important;
}

/* In normal flow, right under the hero copy — a hero this tall (900px)
   would otherwise hide an absolutely-bottom-pinned cue below the fold on
   most laptop screens, defeating its whole purpose. */
.scroll-cue{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 8px;
    margin-top: 20px;
    color: #fff;
    opacity: .85;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 3px;
    text-decoration: none;
    transition: opacity .25s ease, gap .25s ease;
}
.scroll-cue:hover{
    opacity: 1;
    gap: 12px;
    color: #fff;
}
.scroll-cue .chevron{
    margin: 0;
}
.scroll-cue span.chevron{
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--gr-gold-light);
    border-bottom: 2px solid var(--gr-gold-light);
    transform: rotate(45deg);
    animation: gr-bounce 1.6s ease-in-out infinite;
}
@keyframes gr-bounce{
    0%, 100% { transform: rotate(45deg) translate(0,0); opacity: .5; }
    50% { transform: rotate(45deg) translate(6px,6px); opacity: 1; }
}

/* Slow cinematic "ken burns" drift on full hero backgrounds only (not the
   smaller inner-page banners) — background-size/position only, so the
   caption text and overlay never move or scale with it. */
.slider-height.hero-overly{
    animation: gr-kenburns 26s ease-in-out infinite alternate;
    background-position: center;
}
@keyframes gr-kenburns{
    0%   { background-size: 104%; }
    100% { background-size: 116%; }
}
@media (max-width: 767px){
    .slider-height.hero-overly{ animation: none; background-size: cover; }
}

/* Champagne bubbles — a small, quiet flourish drifting up through the
   homepage hero. Purely decorative (aria-hidden), never intercepts clicks. */
.gr-bubbles{
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}
.gr-bubbles span{
    position: absolute;
    bottom: -30px;
    display: block;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,1), rgba(217,193,135,.35) 70%, transparent 100%);
    box-shadow: 0 0 6px rgba(255,255,255,.35);
    opacity: 0;
    animation-name: gr-rise;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
@keyframes gr-rise{
    0%   { transform: translateY(0) scale(.7); opacity: 0; }
    8%   { opacity: .85; }
    85%  { opacity: .35; }
    100% { transform: translateY(-640px) scale(1); opacity: 0; }
}
/* Smaller stage for the inner-page banners (590px vs the 900px homepage
   hero) — same motif, shorter rise so it still completes within view. */
.slider-height2 .gr-bubbles span{
    animation-duration: 7s;
}
@keyframes gr-rise-short{
    0%   { transform: translateY(0) scale(.7); opacity: 0; }
    10%  { opacity: .8; }
    85%  { opacity: .3; }
    100% { transform: translateY(-420px) scale(1); opacity: 0; }
}
.slider-height2 .gr-bubbles span{
    animation-name: gr-rise-short;
}
@media (max-width: 767px){
    .gr-bubbles{ display: none; }
}

/* Faint film-grain wash over the whole site — flat colour fields read as
   cheap on screen; a whisper of texture is what makes print/editorial
   luxury brands feel tactile even in a browser. */
body::after{
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: .025;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- Focus / service / newsroom cards ----------
   Hover uses a shadow-only lift (no translateY) so no gap is ever revealed
   behind the card. The gold reveal bar sits flush against the image's own
   bottom edge, INSIDE the overflow:hidden box — any spacing to whatever
   follows (margin-bottom) belongs on the outer wrapper, never on this box,
   otherwise it reads as a stray white gap trapped under the gold line. */
.single-service-cap{
    transition: box-shadow .4s ease;
    border-radius: 6px;
}
.single-service-cap:hover{
    box-shadow: 0 20px 40px -18px rgba(14,47,126,.25);
}
/* The founder portraits are a fixed-size (250x350) box centred inside a
   much wider, unconstrained wrapper — casting the hover shadow on that
   wrapper drew a wide, landscape-shaped shadow behind a narrow portrait
   photo. Cancel it on the wrapper and cast it on the actual photo box. */
.single-service-cap:has(.gr-fill-box):hover{
    box-shadow: none;
}
.single-service-cap:hover .gr-fill-box{
    box-shadow: 0 20px 40px -18px rgba(14,47,126,.25);
}
.single-service-cap .service-img{
    overflow: hidden;
    position: relative;
    margin-bottom: 0 !important;
}
.single-service-cap .service-img img{
    transition: transform .6s ease;
    display: block;
}
.single-service-cap:hover .service-img img{
    transform: scale(1.06);
}
.single-service-cap .service-img::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gr-gold), var(--gr-gold-light));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s ease;
}
.single-service-cap:hover .service-img::after{
    transform: scaleX(1);
}
.single-service-cap .service-cap h4 a{
    position: relative;
    display: inline-block;
}
/* Spacer that replaces the old margin-bottom which used to live INSIDE the
   gold-bordered box — now it lives on the outer card so the gold line has
   nothing trailing beneath it. */
.gr-card-spacer{
    margin-bottom: 25px;
}
/* Opt-in fill treatment for image boxes with a genuine fixed height (the
   About page founder portraits) so the photo reaches every edge of its
   box — otherwise the gold bar at the box's bottom can sit below where the
   (non-filling) photo actually ends, reading as a gap. Deliberately NOT
   applied globally: forcing height:100% on boxes with no defined height
   (bg4.jpg, champagne.html) fights their intended sizing and shrinks them. */
.gr-fill-box{
    position: relative !important;
    overflow: hidden !important;
}
.gr-fill-box img{
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
}

/* Our Focus — force the three cards to equal height regardless of copy
   length, so Champagne / Wine / Tableware always match. */
.gr-focus-card{
    display: flex;
    flex-direction: column;
    height: 100%;
}
.gr-focus-card .service-cap{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.gr-focus-card .service-cap p{
    flex: 1 1 auto;
}
.gr-focus-card .service-cap h4{
    font-family: DidotLTPro-Roman, Baskerville, Times, serif;
    font-size: 28px;
    letter-spacing: .5px;
}
.gr-focus-card .service-cap h4 a:hover{
    color: var(--gr-gold) !important;
}

/* ---------- Our Group — classic cards, refined ----------
   Keeps the original image + description card (with its character) but
   gives every logo a fixed-height, centred stage so wildly different
   source-logo proportions and whitespace no longer read as random sizes. */
.gr-logo-box{
    height: 172px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #fff;
    overflow: hidden;
}
/* Several logos are wrapped in a plain <a> (to make them clickable) — an
   inline element that won't reliably centre its own image just by being a
   flex child, so it's made a flex box in its own right too. */
.gr-logo-box a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.project-area .project-caption .single-project .gr-logo-box img{
    width: auto;
    max-width: 82%;
    height: auto;
    max-height: 76px;
    object-fit: contain;
    border-radius: 0;
    transition: transform .35s ease;
}
.single-project:hover .gr-logo-box img{
    transform: scale(1.04);
}
.gr-rep-divider{
    text-align: center;
    margin: 10px 0 30px;
    position: relative;
}
.gr-rep-divider span{
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 13px;
    font-weight: 600;
    color: var(--gr-gold);
    padding: 0 20px;
    position: relative;
    background: #fff;
}
.gr-rep-divider::before{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: var(--gr-hairline);
    z-index: 0;
}
.gr-rep-divider span{ z-index: 1; }

/* Bernardaud's source file is a tight, edge-to-edge wordmark; Arthur
   Price's crest sits inside a canvas with a lot of built-in whitespace —
   equal max-heights make Arthur Price look far smaller on screen even
   though the box is identical, so it needs a taller cap to read the same
   visual size. */
.project-area .project-caption .single-project .gr-logo-box img.gr-logo-bernardaud{
    max-height: 72px;
}
.project-area .project-caption .single-project .gr-logo-box img.gr-logo-arthurprice{
    max-height: 158px;
}
@media (max-width: 575px){
    .project-area .project-caption .single-project .gr-logo-box img.gr-logo-bernardaud{ max-height: 52px; }
    .project-area .project-caption .single-project .gr-logo-box img.gr-logo-arthurprice{ max-height: 112px; }
}

/* ---------- Our Firsts — a real timeline, both sides of the line ----------
   The span itself is the hero: a "1997 —— 2023" stat strip up top makes
   the three-decade sweep obvious before a single card is scrolled. Below
   it, a proper zigzag timeline — cards alternating above and below an
   animated, flowing spine, each pinned to it by a pulsing gold node —
   scrolls horizontally. Cards keep the condensed Teko gradient numeral
   with a light-sweep on hover. Scroll affordance stays three-layered:
   visible arrow buttons, a permanent edge-fade, and a one-time auto-peek
   nudge (see the inline script) the moment it scrolls into view. */
.gr-timeline-wrap{
    position: relative;
    padding: 0 54px;
}
.gr-timeline-arrow{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--gr-hairline);
    background: #fff;
    color: var(--gr-navy);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    box-shadow: 0 12px 28px -14px rgba(14,47,126,.35);
    transition: transform .3s ease, box-shadow .3s ease, background .3s ease, color .3s ease, opacity .3s ease;
    animation: gr-arrow-pulse 2.2s ease-in-out infinite;
}
.gr-timeline-arrow--prev{ left: 0; }
.gr-timeline-arrow--next{ right: 0; }
.gr-timeline-arrow:hover{
    background: linear-gradient(135deg, var(--gr-gold), var(--gr-gold-light));
    color: #fff;
    box-shadow: 0 16px 34px -14px rgba(182,145,60,.55);
    transform: translateY(-50%) scale(1.08);
}
.gr-timeline-wrap.is-start .gr-timeline-arrow--prev,
.gr-timeline-wrap.is-end .gr-timeline-arrow--next{
    opacity: 0;
    pointer-events: none;
    animation: none;
}
@keyframes gr-arrow-pulse{
    0%, 100% { box-shadow: 0 12px 28px -14px rgba(14,47,126,.35); }
    50% { box-shadow: 0 12px 28px -14px rgba(182,145,60,.65); }
}
.gr-timeline-scroll{
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    padding: 10px 4px 10px;
    border-radius: 16px;
    background-color: var(--gr-paper);
    background-repeat: no-repeat;
    background-size: 90px 100%, 90px 100%, 30px 100%, 30px 100%;
    background-position: 0 0, 100% 0, 0 0, 100% 0;
    background-image:
        linear-gradient(to right, var(--gr-paper), rgba(251,250,247,0)),
        linear-gradient(to left, var(--gr-paper), rgba(251,250,247,0)),
        linear-gradient(to right, rgba(14,47,126,.16), rgba(14,47,126,0)),
        linear-gradient(to left, rgba(14,47,126,.16), rgba(14,47,126,0));
    background-attachment: local, local, scroll, scroll;
}
.gr-timeline{
    position: relative;
    display: flex;
    align-items: center;
    width: max-content;
    min-width: 100%;
    height: 400px;
    padding: 0 60px;
    box-sizing: border-box;
}
.gr-timeline::before{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 3px;
    transform: translateY(-50%);
    background-image: repeating-linear-gradient(
        90deg,
        var(--gr-hairline) 0, var(--gr-hairline) 30px,
        var(--gr-gold-light) 30px, var(--gr-gold) 45px, var(--gr-gold-light) 60px,
        var(--gr-hairline) 60px, var(--gr-hairline) 100px
    );
    background-size: 200px 100%;
    animation: gr-flow 5s linear infinite;
}
@keyframes gr-flow{
    from{ background-position: 0 0; }
    to{ background-position: -200px 0; }
}
.gr-first-slide{
    position: relative;
    flex: 0 0 128px;
    height: 0;
    scroll-snap-align: center;
}
.gr-first-node{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--gr-gold);
    border: 3px solid #fff;
    transform: translate(-50%, -50%);
    z-index: 3;
    animation: gr-node-pulse 2.6s ease-in-out infinite;
}
@keyframes gr-node-pulse{
    0%, 100% { box-shadow: 0 0 0 3px var(--gr-hairline), 0 0 0 0 rgba(182,145,60,.55); }
    50% { box-shadow: 0 0 0 3px var(--gr-hairline), 0 0 0 9px rgba(182,145,60,0); }
}
.gr-first-slide::after{
    content: "";
    position: absolute;
    left: 50%;
    width: 1px;
    height: 20px;
    background: var(--gr-hairline);
    transform: translateX(-50%);
}
.gr-up::after{ bottom: 0; }
.gr-down::after{ top: 0; }
.gr-first-card{
    position: absolute;
    left: 50%;
    width: 224px;
    height: 150px;
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 12px;
    padding: 14px 18px;
    box-sizing: border-box;
    box-shadow: 0 10px 26px -16px rgba(14,47,126,.32);
    transform: translateX(-50%);
    overflow: hidden;
    text-align: left;
    transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
}
.gr-up .gr-first-card{ bottom: 20px; }
.gr-down .gr-first-card{ top: 20px; }
.gr-first-card::after{
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255,255,255,.65), transparent);
    transform: skewX(-18deg);
    transition: left .75s ease;
    pointer-events: none;
}
.gr-up .gr-first-card:hover{ transform: translateX(-50%) translateY(-8px) scale(1.045); }
.gr-down .gr-first-card:hover{ transform: translateX(-50%) translateY(8px) scale(1.045); }
.gr-first-card:hover{
    box-shadow: 0 26px 42px -18px rgba(14,47,126,.42);
    z-index: 4;
}
.gr-first-card:hover::after{
    left: 130%;
}
.gr-first-year{
    flex: 0 0 auto;
    display: block;
    font-family: 'Teko', sans-serif;
    font-weight: 600;
    font-size: 42px;
    line-height: 1;
    letter-spacing: .5px;
    background-image: linear-gradient(135deg, var(--gr-navy), var(--gr-gold) 130%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: background-image .4s ease;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)){
    .gr-first-year{ color: var(--gr-navy); -webkit-text-fill-color: initial; }
}
.gr-first-card:hover .gr-first-year{
    background-image: linear-gradient(135deg, var(--gr-gold), var(--gr-gold-light), var(--gr-gold));
}
.gr-first-divider{
    flex: 0 0 2px;
    align-self: stretch;
    margin: 0 14px;
    background: linear-gradient(180deg, var(--gr-gold), var(--gr-gold-light));
    transition: background .4s ease;
}
.gr-first-text{
    flex: 1 1 auto;
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--gr-ink);
}

/* Inside each card, the year lands first — then the divider draws, then
   the story fades in behind it — rather than everything appearing at
   once. Triggered by .gr-in-view (added via IntersectionObserver in the
   inline script below the moment the timeline scrolls into view) rather
   than WOW.js's own "animated" class — that class is timing-sensitive in
   ways that made it an unreliable hook for a second, nested animation. */
.gr-first-year,
.gr-first-divider,
.gr-first-text{
    opacity: 0;
}
.gr-timeline.gr-in-view .gr-first-year{
    animation: gr-year-in .5s cubic-bezier(.2,.8,.2,1) forwards;
}
.gr-timeline.gr-in-view .gr-first-divider{
    animation: gr-divider-in .35s ease-out .22s forwards;
}
.gr-timeline.gr-in-view .gr-first-text{
    animation: gr-text-in .5s ease-out .34s forwards;
}
@keyframes gr-year-in{
    from{ opacity: 0; transform: translateX(-10px) scale(.85); }
    to{ opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes gr-divider-in{
    from{ opacity: 0; transform: scaleY(0); }
    to{ opacity: 1; transform: scaleY(1); }
}
@keyframes gr-text-in{
    from{ opacity: 0; transform: translateX(8px); }
    to{ opacity: 1; transform: translateX(0); }
}

@media (max-width: 767px){
    .gr-timeline-wrap{ padding: 0 8px; }
    .gr-timeline-arrow{ display: none; }
    .gr-timeline{ height: 300px; padding: 0 45px; }
    .gr-first-slide{ flex-basis: 112px; }
    .gr-first-card{ width: 190px; height: 135px; padding: 12px 14px; }
    .gr-up .gr-first-card{ bottom: 16px; }
    .gr-down .gr-first-card{ top: 16px; }
    .gr-first-year{ font-size: 32px; }
    .gr-first-divider{ margin: 0 10px; }
    .gr-first-text{ font-size: 11px; }
}

/* ---------- "Who we are" photo — match the text column's height ----------
   The row is forced to align-items:flex-end (via the vendor/Bootstrap
   "align-items-end" utility already on the container), so the photo just
   sits at its own natural size pinned to the bottom — never stretching to
   match the copy beside it. Overriding to stretch, then having the photo
   fill that stretched box, makes it span exactly from the first line of
   text to the last, as requested. */
.gr-who-we-are.align-items-end{
    align-items: stretch !important;
}
.gr-who-we-are .right-content{
    display: flex;
}
.gr-who-we-are .right-content .right-img{
    width: 100%;
}
.gr-who-we-are .right-content .right-img .service-img{
    height: 100% !important;
    margin-bottom: 0 !important;
}
.gr-who-we-are .right-content .right-img .service-img img{
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
}
@media (max-width: 991px){
    .gr-who-we-are.align-items-end{ align-items: center !important; }
    .gr-who-we-are .right-content .right-img .service-img{ height: auto !important; }
    .gr-who-we-are .right-content .right-img .service-img img{ height: auto !important; }
}

/* ---------- Founders — editorial pull-quote mark ---------- */
.team-caption p{
    position: relative;
}
.team-caption p::before{
    content: "\201C";
    font-family: DidotLTPro-Roman, Baskerville, Times, serif;
    font-size: 64px;
    line-height: 0;
    color: var(--gr-gold-light);
    display: inline-block;
    vertical-align: -22px;
    margin-right: 4px;
}
.team-caption h3{
    font-family: DidotLTPro-Roman, Baskerville, Times, serif;
    letter-spacing: .5px;
}

/* ---------- Footer polish ---------- */
.footer-info-line{
    font-size: 13px !important;
    color: var(--gr-muted);
    letter-spacing: .3px;
}
.footer-main{
    position: relative;
}
.footer-main::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gr-navy), var(--gr-gold), var(--gr-navy));
}

/* ---------- Misc ---------- */
.btn.red-btn2{
    transition: transform .3s ease, box-shadow .3s ease;
}
.btn.red-btn2:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -8px rgba(0,0,0,.35);
}

/* ---------- Device / small-screen polish ---------- */
@media (max-width: 575px){
    .hero-kicker{ font-size: 11px; letter-spacing: 3px; }
    .scroll-cue{ margin-top: 30px; }
    .gr-timeline-card{ padding: 14px 16px; }
    .gr-logo-box{ height: 130px; }
    .project-area .project-caption .single-project .gr-logo-box img{ max-height: 64px; }
}
@media (max-width: 991px){
    .gr-focus-card{ height: auto; margin-bottom: 10px; }
}