/* ==========================================================================
   Be Amazing Events — Home
   assets/css/style.css
   --------------------------------------------------------------------------
   1.  Tokens
   2.  Reset & base
   3.  Typography primitives
   4.  Buttons / links
   5.  Header + navigation
   6.  Hero
   7.  Who we are
   8.  Signature services
   9.  The B.A.E. Experience
   10. Resources band
   11. Why clients choose us
   12. Industries we serve
   13. Trusted by marquee
   14. Closing CTA
   15. Footer
   16. Motion / reveal utilities
   17. Responsive
   ========================================================================== */


/* 0. FONTS ===============================================================
   Self-hosted so the site renders identically offline and on first paint.
   Playfair Display is the variable cut; Poppins ships as static weights.
   ======================================================================== */

@font-face {
    font-family: "Playfair Display";
    src: url("../fonts/PlayfairDisplay-Variable.woff2") format("woff2-variations"), url("../fonts/PlayfairDisplay-Variable.woff2") format("woff2");
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Playfair Display";
    src: url("../fonts/PlayfairDisplay-Italic-Variable.woff2") format("woff2-variations"), url("../fonts/PlayfairDisplay-Italic-Variable.woff2") format("woff2");
    font-weight: 400 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins-ExtraLight.woff2") format("woff2");
    font-weight: 200;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}


/* 1. TOKENS ============================================================== */

:root {
    /* palette sampled directly from the approved mockup */
    --ink: #050505;
    --charcoal: #111111;
    --forest: #1E2517;
    --forest-deep: #171D12;
    --ivory: #F5F2ED;
    --ivory-lift: #FBFAF7;
    --paper: #FFFFFF;
    --gold: #C79B4A;
    --gold-bright: #D7A749;
    --gold-light: #E9D7A8;
    --gold-deep: #A8792C;
    --body: #4A463F;
    --body-soft: #6E6A62;
    --body-invert: rgba(255, 255, 255, .74);
    --line: rgba(30, 37, 23, .12);
    --line-invert: rgba(215, 167, 73, .26);
    /* metallic fill used on every primary button, matched to the mockup */
    --gold-fill: linear-gradient(103deg, #A9772A 0%, #C79B4A 16%, #EBD9AA 44%, #D6AC5E 58%, #B5842F 80%, #A9772A 100%);
    /* type */
    --serif: "Playfair Display", "Times New Roman", serif;
    --sans: "Poppins", "Helvetica Neue", Arial, sans-serif;
    /* layout — 1440px design container */
    --container: 1440px;
    --gutter: 50px;
    --section-gap: 80px;
    /* ≥125px of clear space between sections */
    --band-pad: 96px;
    --radius: 2px;
    --ease: cubic-bezier(.22, .61, .36, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
}


/* 2. RESET & BASE ======================================================== */

*,
*::before,
*::after {
    box-sizing: border-box
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--ivory);
    color: var(--body);
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.78;
    letter-spacing: .005em;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.nav-open {
    overflow: hidden
}

img {
    max-width: 100%;
    display: block;
    border-style: none
}

a {
    color: inherit;
    text-decoration: none
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none
}

figure {
    margin: 0
}


/* Sprite icons arrive with no presentation attributes of their own, so the
   stroke-only treatment is set once here rather than per component. */

svg {
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round
}

:focus-visible {
    outline: 2px solid var(--gold-bright);
    outline-offset: 3px
}

::selection {
    background: var(--gold);
    color: #0b0b0b
}

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.container--wide {
    max-width: var(--container);
    padding-inline: 40px
}

.section {
    padding-block: calc(var(--section-gap) / 2)
}

.section--ivory {
    background: var(--ivory)
}

.section--lift {
    background: var(--ivory-lift)
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden
}


/* scroll progress */

.progress {
    position: fixed;
    inset: 0 auto auto 0;
    z-index: 200;
    height: 2px;
    width: 0;
    background: var(--gold-fill);
    transition: width .12s linear;
}


/* 3. TYPOGRAPHY ========================================================== */

.eyebrow {
    margin: 0 0 18px;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .19em;
    text-transform: uppercase;
    color: var(--gold-bright);
}

.eyebrow--center {
    text-align: center
}

.h1 {
    margin: 0;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(2.6rem, 5.1vw, 4.65rem);
    line-height: 1.09;
    letter-spacing: -.012em;
    color: #fff;
}

.h2 {
    margin: 0;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(2rem, 2.95vw, 2.85rem);
    line-height: 1.16;
    letter-spacing: -.01em;
    color: var(--charcoal);
}

.h2--invert {
    color: #fff
}

.h2 sup {
    font-size: .36em;
    vertical-align: super;
    letter-spacing: .02em;
    margin-left: .06em
}

.h3 {
    margin: 0;
    font-family: var(--serif);
    font-weight: 600;
    font-size: 1.06rem;
    line-height: 1.36;
    letter-spacing: .002em;
    color: var(--charcoal);
}

.gold {
    color: var(--gold-bright)
}

.lede {
    margin: 0;
    max-width: 52ch;
    font-size: .975rem;
    line-height: 1.95;
    color: var(--body);
}

.lede--invert {
    color: var(--body-invert)
}


/* short gold rule used under centred headings, per mockup */

.rule {
    width: 56px;
    height: 2px;
    margin: 22px 0 0;
    background: var(--gold);
    border: 0;
}

.rule--center {
    margin-inline: auto
}


/* 4. BUTTONS ============================================================= */

.btn {
    --btn-h: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--btn-h);
    padding-inline: 34px;
    position: relative;
    overflow: hidden;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    white-space: nowrap;
    border-radius: var(--radius);
    transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}

.btn span {
    position: relative;
    z-index: 2
}


/* the sheen that sweeps across gold buttons on hover */

.btn-gold {
    background: var(--gold-fill);
    color: #14100A;
    box-shadow: 0 8px 26px -14px rgba(168, 121, 44, .85)
}

.btn-gold::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .6) 48%, transparent 66%);
    transform: translateX(-120%);
}

.btn-gold:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px -14px rgba(168, 121, 44, .95)
}

.btn-gold:hover::after {
    animation: sheen .85s var(--ease-out) forwards
}

@keyframes sheen {
    to {
        transform: translateX(120%)
    }
}

.btn-ghost {
    border: 1px solid rgba(255, 255, 255, .55);
    color: #fff
}

.btn-ghost:hover {
    border-color: var(--gold-bright);
    color: var(--gold-bright);
    transform: translateY(-3px)
}

.btn-outline {
    border: 1px solid var(--charcoal);
    color: var(--charcoal)
}

.btn-outline:hover {
    background: var(--charcoal);
    color: var(--ivory);
    transform: translateY(-3px)
}

.btn-sm {
    --btn-h: 44px;
    padding-inline: 22px;
    font-size: 14px;
    letter-spacing: .13em
}


/* inline "learn more" link with a travelling arrow */

.more {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--charcoal);
}

.more svg {
    width: 15px;
    height: 15px;
    transition: transform .4s var(--ease-out)
}

.more:hover {
    color: var(--gold-deep)
}

.more:hover svg {
    transform: translateX(6px)
}

.btn-row {
    display: flex;
    gap: 16px;
    margin-top: 38px
}


/* 5. HEADER ============================================================== */

.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 140;
    /* above the mobile drawer */
    transition: background-color .45s var(--ease), backdrop-filter .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
    border-bottom: 1px solid transparent;
}

.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(0, 0, 0, .62), transparent);
    opacity: 1;
    transition: opacity .4s var(--ease);
}


/* glass state once the page is scrolled */

.site-header.is-stuck {
    background: rgba(9, 9, 9, .62);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    border-bottom-color: rgba(215, 167, 73, .2);
    box-shadow: 0 18px 40px -32px rgba(0, 0, 0, .9);
}

.site-header.is-stuck::before {
    opacity: 0
}

.site-header.is-hidden {
    transform: translateY(-100%)
}

.site-header {
    transition-property: background-color, backdrop-filter, box-shadow, border-color, transform;
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 26px;
    height: 82px;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 36px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 13px;
    flex: none
}

.brand img {
    width: 46px;
    height: 46px;
    object-fit: contain;
    transition: transform .7s var(--ease-out)
}

.brand:hover img {
    transform: rotate(-14deg) scale(1.06)
}

.brand-word {
    display: flex;
    flex-direction: column;
    line-height: 1
}

.brand-word b {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 16px;
    letter-spacing: .17em;
    color: #fff;
    text-transform: uppercase;
}

.brand-word i {
    font-style: normal;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 11.5px;
    letter-spacing: .44em;
    color: rgba(255, 255, 255, .82);
    text-transform: uppercase;
    margin-top: 5px;
    text-indent: .44em;
}

.nav {
    margin-left: auto
}

.nav-list {
    display: flex;
    align-items: center;
    gap: 21px
}

.nav-list>li {
    position: relative
}

.has-menu>.nav-link {
    cursor: pointer
}

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 0;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .9);
    transition: color .3s var(--ease);
}

.nav-link .chev {
    width: 12px;
    height: 12px;
    transition: transform .35s var(--ease)
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1.5px;
    width: 0;
    background: var(--gold-bright);
    transition: width .38s var(--ease-out);
}

.nav-link:hover,
.nav-link.is-active {
    color: var(--gold-bright)
}

.nav-link:hover::after,
.nav-link.is-active::after {
    width: 100%
}


/* dropdowns — frosted.
   The panel sits 20px below the trigger, and that gap used to be dead space:
   the pointer left the <li> before it reached the menu, so the menu closed on
   the way to it. ::before bridges the gap as part of the panel itself, which
   keeps :hover alive across it. */

.submenu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -22px;
    height: 22px;
}

.submenu {
    position: absolute;
    top: calc(100% + 20px);
    left: 50%;
    width: 290px;
    padding: 14px;
    transform: translate(-50%, 10px);
    background: rgba(12, 14, 10, .78);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid rgba(215, 167, 73, .24);
    border-radius: 3px;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .32s var(--ease), transform .32s var(--ease-out), visibility .32s;
}

.has-menu:hover .submenu,
.has-menu:focus-within .submenu,
.submenu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.has-menu:hover .chev {
    transform: rotate(180deg)
}

.submenu a {
    display: block;
    padding: 9px 12px;
    border-radius: 2px;
    font-size: 12.5px;
    font-weight: 300;
    color: rgba(255, 255, 255, .82);
    transition: background-color .25s var(--ease), color .25s var(--ease), padding-left .25s var(--ease);
}

.submenu a:hover {
    background: rgba(215, 167, 73, .14);
    color: var(--gold-bright);
    padding-left: 18px
}

.burger {
    display: none;
    width: 44px;
    height: 44px;
    flex: none;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 2px;
}

.burger i {
    display: block;
    width: 18px;
    height: 1.4px;
    background: #fff;
    position: relative;
    transition: background-color .2s
}

.burger i::before,
.burger i::after {
    content: "";
    position: absolute;
    left: 0;
    width: 18px;
    height: 1.4px;
    background: #fff;
    transition: transform .4s var(--ease-out);
}

.burger i::before {
    top: -6px
}

.burger i::after {
    top: 6px
}


/* while the drawer is open the header is just a frame for the close button */

body.nav-open .site-header {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    border-bottom-color: transparent
}

body.nav-open .site-header::before {
    opacity: 0
}

body.nav-open .burger i {
    background: transparent
}

body.nav-open .burger i::before {
    transform: translateY(6px) rotate(45deg)
}

body.nav-open .burger i::after {
    transform: translateY(-6px) rotate(-45deg)
}


/* 6. HERO ================================================================ */

.hero {
    position: relative;
    min-height: min(100vh, 940px);
    display: flex;
    align-items: center;
    background: var(--ink);
    overflow: hidden;
    isolation: isolate;
}

.hero__media {
    position: absolute;
    inset: 0;
    z-index: 0
}

.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 52% 42%;
    transform: scale(1.12);
    animation: kenburns 26s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes kenburns {
    from {
        transform: scale(1.12) translate3d(0, 0, 0)
    }
    to {
        transform: scale(1.24) translate3d(-2.2%, -1.6%, 0)
    }
}


/* left-to-right darkening so the copy stays legible over a full-bleed photo */

.hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(97deg, #000 4%, rgba(3, 3, 3, .94) 26%, rgba(4, 4, 4, .72) 44%, rgba(5, 5, 5, .34) 68%, rgba(6, 6, 6, .5) 100%), radial-gradient(120% 78% at 12% 46%, rgba(0, 0, 0, .72), transparent 62%), linear-gradient(0deg, rgba(0, 0, 0, .66), transparent 42%);
}

.hero__grain {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: .016;
    background-image: url("../img/gatsby-tile.png");
    background-size: 340px;
    mix-blend-mode: screen;
}

.hero__particles {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none
}

.hero .container {
    position: relative;
    z-index: 4
}

.hero__inner {
    /* max-width: 640px; */
    padding-block: 150px 120px
}

.hero .h1 {
    margin-bottom: 26px
}

.hero .lede {
    max-width: 46ch;
    color: rgba(255, 255, 255, .78);
    font-size: .95rem
}


/* glass scroll cue */

.scrollcue {
    position: absolute;
    left: var(--gutter);
    bottom: 44px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 11px 20px 11px 16px;
    background: rgba(255, 255, 255, .07);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    font-size: 9.8px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .8);
    transition: border-color .35s var(--ease), color .35s var(--ease);
}

.scrollcue:hover {
    border-color: var(--gold-bright);
    color: var(--gold-bright)
}

.scrollcue span.dot {
    width: 22px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 12px;
    position: relative;
    flex: none;
}

.scrollcue span.dot::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 7px;
    width: 3px;
    height: 6px;
    border-radius: 2px;
    background: var(--gold-bright);
    transform: translateX(-50%);
    animation: cue 1.9s var(--ease) infinite;
}

@keyframes cue {
    0% {
        opacity: 0;
        transform: translate(-50%, 0)
    }
    30% {
        opacity: 1
    }
    100% {
        opacity: 0;
        transform: translate(-50%, 13px)
    }
}


/* 7. WHO WE ARE ========================================================== */

.who {
    display: grid;
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    gap: 78px;
    align-items: center
}

.who__copy .h2 {
    margin-bottom: 0
}

.who__copy .rule {
    margin-bottom: 30px
}

.who__copy .lede {
    max-width: 44ch
}

.collage {
    display: grid;
    grid-template-columns: 1.06fr 1fr;
    grid-template-rows: .92fr 1fr 1.12fr;
    gap: 16px;
    height: 494px;
}

.collage figure {
    margin: 0;
    overflow: hidden;
    position: relative;
    background: #0b0b0b
}

.collage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
    transition: transform 1.2s var(--ease-out), filter 1.2s var(--ease-out);
}

.collage figure:hover img {
    transform: scale(1.09)
}


/* thin gold frame that draws itself in on hover */

.collage figure::after {
    content: "";
    position: absolute;
    inset: 9px;
    border: 1px solid rgba(233, 215, 168, .75);
    opacity: 0;
    transform: scale(1.05);
    transition: opacity .5s var(--ease), transform .6s var(--ease-out);
    pointer-events: none;
}

.collage figure:hover::after {
    opacity: 1;
    transform: scale(1)
}

.collage .c1 {
    grid-column: 1;
    grid-row: 1 / span 2
}

.collage .c2 {
    grid-column: 2;
    grid-row: 1
}

.collage .c3 {
    grid-column: 1;
    grid-row: 3
}

.collage .c4 {
    grid-column: 2;
    grid-row: 2 / span 2
}


/* 8. SIGNATURE SERVICES ================================================== */

.services {
    background: var(--ivory)
}

.services__head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 66px
}

.services__head .lede {
    margin: 22px auto 0;
    max-width: 56ch;
    text-align: center
}

.svc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr)
}

.svc-grid--three {
    grid-template-columns: repeat(3, 1fr);
    max-width: 75%;
    margin: 44px auto 0
}

.svc {
    position: relative;
    padding: 52px 30px 40px;
    text-align: center;
    background: var(--ivory-lift);
    border: 1px solid var(--line);
    margin-left: -1px;
    margin-top: -1px;
    transition: transform .55s var(--ease-out), box-shadow .55s var(--ease-out), background-color .45s var(--ease), border-color .45s var(--ease);
    transform-style: preserve-3d;
}

.svc:hover {
    z-index: 3;
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-color: rgba(199, 155, 74, .55);
    box-shadow: 0 34px 60px -34px rgba(30, 37, 23, .4);
}

.svc__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--forest);
    transition: background .5s var(--ease), transform .6s var(--ease-out), box-shadow .5s var(--ease);
}

.svc__icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--gold-bright);
    transition: stroke .4s var(--ease)
}

.svc:hover .svc__icon {
    transform: translateY(-5px) rotate(-6deg);
    background: var(--gold-fill);
    box-shadow: 0 14px 26px -14px rgba(168, 121, 44, .9);
}

.svc:hover .svc__icon svg {
    stroke: #14100A
}

.svc .h3 {
    margin-bottom: 14px;
    min-height: 2.7em;
    display: flex;
    align-items: center;
    justify-content: center
}

.svc p {
    margin: 0 0 24px;
    font-size: .815rem;
    line-height: 1.82;
    color: var(--body-soft)
}

.svc .more {
    font-size: 10px
}


/* 9. THE B.A.E. EXPERIENCE =============================================== */

.experience {
    position: relative;
    background: var(--ink);
    color: #fff;
    padding-block: var(--band-pad);
    overflow: hidden;
}

.experience::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../img/gatsby-tile.png");
    background-size: 300px;
    opacity: .07;
}

.experience::after {
    content: "";
    position: absolute;
    inset: auto -10% -60% 40%;
    height: 70%;
    background: radial-gradient(closest-side, rgba(199, 155, 74, .16), transparent 72%);
    pointer-events: none;
}

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

.experience__head {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 74px
}

.experience__head .lede {
    margin: 22px auto 0;
    text-align: center;
    max-width: 54ch
}

.steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 34px
}


/* the connecting hairline is only drawn because these steps are a real sequence */

.steps::before {
    content: "";
    position: absolute;
    top: 33px;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(215, 167, 73, .42) 12%, rgba(215, 167, 73, .42) 88%, transparent);
}

.step {
    position: relative;
    text-align: center
}

.step__num {
    position: relative;
    z-index: 2;
    width: 66px;
    height: 66px;
    margin: 0 auto 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .05);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(215, 167, 73, .4);
    font-family: var(--serif);
    font-size: 1.15rem;
    color: var(--gold-bright);
    transition: background .5s var(--ease), transform .6s var(--ease-out), border-color .5s var(--ease);
}

.step:hover .step__num {
    transform: translateY(-6px);
    background: rgba(215, 167, 73, .16);
    border-color: var(--gold-bright)
}

.step h3 {
    margin: 0 0 12px;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 1.22rem;
    color: #fff;
}

.step p {
    margin: 0;
    font-size: .83rem;
    line-height: 1.85;
    color: rgba(255, 255, 255, .62);
    max-width: 30ch;
    margin-inline: auto
}


/* 10. RESOURCES BAND ===================================================== */

.resources {
    position: relative;
    background: var(--forest);
    padding-block: var(--band-pad);
    overflow: hidden;
}

.resources::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../img/gatsby-tile.png");
    background-size: 280px;
    opacity: .10;
}

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

.res-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin-top: 48px
}


/* legacy */

.res {
    position: relative;
    padding: 0 26px;
    text-align: center
}

.res+.res::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(215, 167, 73, .34), transparent);
}

.res__icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(215, 167, 73, .55);
    transition: transform .6s var(--ease-out), background .5s var(--ease), border-color .5s var(--ease);
}

.res__icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--gold-bright)
}

.res:hover .res__icon {
    transform: translateY(-6px) scale(1.06);
    background: rgba(215, 167, 73, .12);
    border-color: var(--gold-bright);
}

.res h3 {
    margin: 0 0 10px;
    font-family: var(--sans);
    font-size: .86rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--gold-bright);
}

.res p {
    margin: 0;
    font-size: .79rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, .6)
}


/* 11. WHY CLIENTS CHOOSE US ============================================== */

.why {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: 78px;
    align-items: center
}

.why .h2 {
    text-transform: none
}

.why__list {
    margin-top: 34px;
    display: grid;
    gap: 2px
}

.why__list li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 13px 0;
    font-size: .885rem;
    color: var(--body);
    border-bottom: 1px solid rgba(30, 37, 23, .08);
}

.why__list li:last-child {
    border-bottom: 0
}

.why__list svg {
    width: 24px;
    height: 24px;
    flex: none;
    margin-top: 2px;
    stroke: var(--gold);
    transition: transform .5s var(--ease-out);
}

.why__list li:hover svg {
    transform: scale(1.16) rotate(-8deg)
}

.why-collage {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 16px;
    height: 440px;
}

.why-collage figure {
    margin: 0;
    overflow: hidden;
    position: relative
}

.why-collage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--ease-out)
}

.why-collage figure:hover img {
    transform: scale(1.08)
}

.why-collage .w1 {
    grid-row: 1 / span 2
}


/* 12. INDUSTRIES ========================================================= */

.industries {
    position: relative;
    padding-block: var(--band-pad);
    background: var(--ink);
    color: #fff;
    overflow: hidden;
}

.industries__bg {
    position: absolute;
    inset: 0;
    z-index: 0
}

.industries__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .34
}

.industries__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 5, 5, .92), rgba(5, 5, 5, .72) 40%, rgba(5, 5, 5, .94));
}

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

.industries__head {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 60px
}

.industries__head .lede {
    margin: 22px auto 0;
    text-align: center
}

.ind-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px
}

.ind {
    padding: 32px 26px 30px;
    background: rgba(255, 255, 255, .055);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 3px;
    transition: transform .55s var(--ease-out), background .45s var(--ease), border-color .45s var(--ease), box-shadow .55s var(--ease-out);
}

.ind:hover {
    transform: translateY(-9px);
    background: rgba(215, 167, 73, .1);
    border-color: rgba(215, 167, 73, .5);
    box-shadow: 0 34px 54px -30px rgba(0, 0, 0, .9);
}

.ind__icon {
    width: 26px;
    height: 26px;
    stroke: var(--gold-bright);
    margin-bottom: 18px
}

.ind h3 {
    margin: 0 0 16px;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 1.05rem;
    line-height: 1.35;
    color: #fff;
}

.ind ul {
    display: grid;
    gap: 7px
}

.ind li {
    font-size: .775rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .58);
    padding-left: 14px;
    position: relative;
}

.ind li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .66em;
    width: 5px;
    height: 1px;
    background: var(--gold);
}


/* 13. TRUSTED BY MARQUEE ================================================= */

.trusted {
    background: var(--ivory-lift);
    padding-block: 56px;
    border-block: 1px solid var(--line)
}

.marquee {
    position: relative;
    margin-top: 34px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%
}

.marquee__track {
    display: flex;
    width: max-content;
    animation: slide 46s linear infinite
}

.marquee:hover .marquee__track {
    animation-play-state: paused
}

@keyframes slide {
    to {
        transform: translateX(-50%)
    }
}

.marquee__item {
    flex: none;
    padding-inline: 44px;
    font-family: var(--serif);
    font-size: 1.16rem;
    font-weight: 500;
    letter-spacing: .08em;
    color: rgba(17, 17, 17, .42);
    white-space: nowrap;
    transition: color .35s var(--ease);
}

.marquee__item:hover {
    color: var(--gold-deep)
}


/* 14. CLOSING CTA ======================================================== */

.cta {
    position: relative;
    background: var(--forest-deep);
    color: #fff;
    overflow: hidden
}

.cta__media {
    position: absolute;
    inset: 0 0 0 46%;
    z-index: 0
}

.cta__media img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.cta__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--forest-deep) 0%, rgba(23, 29, 18, .94) 24%, rgba(23, 29, 18, .62) 62%, rgba(23, 29, 18, .48) 100%), linear-gradient(0deg, rgba(11, 14, 9, .55), rgba(11, 14, 9, .18));
}

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

.cta__inner {
    max-width: 560px;
    padding-block: 110px
}

.cta .lede {
    margin-top: 24px;
    max-width: 44ch
}


/* 15. FOOTER ============================================================= */

.footer {
    background: var(--charcoal);
    color: rgba(255, 255, 255, .62);
    padding-block: 72px 0
}

.footer__top {
    display: grid;
    grid-template-columns: 1.35fr 1fr 1.25fr 1fr 1.15fr;
    gap: 44px
}

.footer__brand .brand {
    margin-bottom: 26px
}

.footer__brand .brand img {
    width: 62px;
    height: 62px
}

.footer__tag {
    margin: 0 0 24px;
    font-size: .83rem;
    line-height: 2
}

.footer__tag b {
    display: block;
    font-weight: 600;
    color: #fff
}

.footer__tag span {
    display: block;
    color: rgba(255, 255, 255, .45)
}

.socials {
    display: flex;
    flex-wrap: wrap;
    gap: 12px
}


/* compact variant — used inside the contact hero's "Follow us" block */

.socials--sm {
    gap: 8px;
    margin-top: 8px
}

.socials--sm a {
    width: 32px;
    height: 32px
}

.socials--sm svg {
    width: 14px;
    height: 14px
}

.socials a {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(215, 167, 73, .3);
    transition: transform .5s var(--ease-out), background .4s var(--ease), border-color .4s var(--ease);
}

.socials svg {
    width: 16px;
    height: 16px;
    stroke: var(--gold-bright);
    transition: stroke .35s var(--ease)
}

.socials a:hover {
    transform: translateY(-4px);
    background: var(--gold-fill);
    border-color: transparent
}

.socials a:hover svg {
    stroke: #14100A
}

.fcol {
    position: relative;
    padding-left: 34px
}

.fcol::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(215, 167, 73, .24), transparent);
}

.fcol h4 {
    margin: 0 0 20px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold-bright);
}

.fcol li+li {
    margin-top: 11px
}

.fcol a {
    font-size: .84rem;
    color: rgba(255, 255, 255, .62);
    transition: color .3s var(--ease), padding-left .3s var(--ease);
    display: inline-block;
}

.fcol a:hover {
    color: var(--gold-bright);
    padding-left: 6px
}

.fcontact li {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    font-size: .84rem
}

.fcontact svg {
    width: 18px;
    height: 18px;
    stroke: var(--gold-bright);
    flex: none
}

.footer__bar {
    margin-top: 58px;
    padding-block: 26px;
    border-top: 1px solid rgba(255, 255, 255, .09);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    font-size: .78rem;
    color: rgba(255, 255, 255, .42);
}

.footer__bar nav {
    display: flex;
    gap: 16px;
    align-items: center
}

.footer__bar a:hover {
    color: var(--gold-bright)
}


/* back to top */

.totop {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 110;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(17, 17, 17, .6);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(215, 167, 73, .4);
    opacity: 0;
    transform: translateY(14px) scale(.9);
    pointer-events: none;
    transition: opacity .45s var(--ease), transform .45s var(--ease-out), background .35s var(--ease);
}

.totop svg {
    width: 18px;
    height: 18px;
    stroke: var(--gold-bright)
}

.totop.is-on {
    opacity: 1;
    transform: none;
    pointer-events: auto
}

.totop:hover {
    background: var(--gold-fill)
}

.totop:hover svg {
    stroke: #14100A
}


/* 16. MOTION / REVEAL ==================================================== */

[data-reveal] {
    opacity: 0;
    will-change: transform, opacity
}

[data-reveal="rise"] {
    transform: translateY(46px)
}

[data-reveal="left"] {
    transform: translateX(-52px)
}

[data-reveal="right"] {
    transform: translateX(52px)
}

[data-reveal="zoom"] {
    transform: scale(.94)
}


/* Headline reveal: a slow rise with the tracking settling back in.
   Deliberately NOT clip-path — Chromium folds clip-path into the
   IntersectionObserver rect, so a fully clipped element reports a zero-height
   box and the observer never fires. */

[data-reveal="wipe"] {
    transform: translateY(30px);
    letter-spacing: .045em
}

.is-in[data-reveal] {
    opacity: 1;
    transform: none;
    transition: opacity .95s var(--ease-out), transform 1.05s var(--ease-out), letter-spacing 1.15s var(--ease-out);
    transition-delay: var(--d, 0ms);
}

.is-in[data-reveal="wipe"] {
    letter-spacing: -.01em
}


/* hero entrance choreography — one orchestrated moment on load */

.hero [data-hero] {
    opacity: 0;
    transform: translateY(30px)
}

.hero.is-ready [data-hero] {
    opacity: 1;
    transform: none;
    transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out);
    transition-delay: var(--d, 0ms);
}


/* pointer-follow gold glow, dark sections only */

.glowcursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
    width: 520px;
    height: 520px;
    margin: -260px 0 0 -260px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(215, 167, 73, .14), transparent 70%);
    opacity: 0;
    transition: opacity .5s var(--ease);
    mix-blend-mode: screen;
}

.glowcursor.is-on {
    opacity: 1
}


/* 17. RESPONSIVE ========================================================= */

@media (max-width:1280px) {
     :root {
        --gutter: 64px;
        --section-gap: 140px;
        --band-pad: 84px
    }
    .header-inner {
        padding-inline: 28px;
        gap: 18px
    }
    .nav-list {
        gap: 15px
    }
    .nav-link {
        font-size: 9.8px;
        letter-spacing: .08em
    }
    .footer__top {
        grid-template-columns: 1.3fr 1fr 1.2fr 1fr;
        row-gap: 48px
    }
    .footer__brand {
        grid-column: 1 / -1
    }
    .fcol:nth-of-type(1) {
        padding-left: 0
    }
    .fcol:nth-of-type(1)::before {
        display: none
    }
}

@media (max-width:1080px) {
     :root {
        --gutter: 48px
    }
    .nav {
        display: none
    }
    .header-inner .btn {
        display: none
    }
    .burger {
        display: inline-flex
    }
    .who,
    .why {
        grid-template-columns: 1fr;
        gap: 52px
    }
    .collage,
    .why-collage {
        height: 430px
    }
    .svc-grid {
        grid-template-columns: repeat(2, 1fr)
    }
    .svc-grid--three {
        grid-template-columns: repeat(2, 1fr);
        max-width: 100%;
        margin-top: 0
    }
    .res-grid {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 44px
    }
    .res:nth-child(3n+1)::before {
        display: none
    }
    .ind-grid {
        grid-template-columns: repeat(3, 1fr)
    }
    .steps {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 52px
    }
    .steps::before {
        display: none
    }
    .cta__media {
        inset: 0 0 0 40%
    }
    .cta__inner {
        max-width: 100%;
        padding-block: 88px
    }
}


/* mobile drawer */

.drawer {
    position: fixed;
    inset: 0;
    z-index: 130;
    background: rgba(7, 8, 6, .94);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    padding: 104px 32px 40px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-14px);
    transition: opacity .4s var(--ease), transform .5s var(--ease-out), visibility .4s;
}

body.nav-open .drawer {
    opacity: 1;
    visibility: visible;
    transform: none
}

.drawer a {
    display: block;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    font-family: var(--serif);
    font-size: 1.32rem;
    color: #fff;
}

.drawer a:hover {
    color: var(--gold-bright)
}

.drawer .sub a {
    font-family: var(--sans);
    font-size: .86rem;
    padding-left: 18px;
    color: rgba(255, 255, 255, .6)
}

.drawer .btn {
    margin-top: 30px;
    width: 100%;
    text-align: center;
}

@media (max-width:820px) {
     :root {
        --gutter: 28px;
        --section-gap: 130px;
        --band-pad: 72px
    }
    .header-inner {
        height: 70px
    }
    .brand img {
        width: 40px;
        height: 40px
    }
    .brand-word b {
        font-size: 14px
    }
    .brand-word i {
        font-size: 10px;
        letter-spacing: .36em
    }
    .hero {
        min-height: auto
    }
    .hero__inner {
        padding-block: 132px 118px;
        max-width: 100%
    }
    .hero__media img {
        object-position: 64% 50%
    }
    .hero__scrim {
        background: linear-gradient(180deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .78) 46%, rgba(0, 0, 0, .9) 100%), linear-gradient(97deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .35))
    }
    .scrollcue {
        display: none
    }
    .collage {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 150px 110px 150px;
        height: auto
    }
    .why-collage {
        height: auto;
        grid-template-rows: 210px 210px
    }
    .svc-grid,
    .svc-grid--three {
        grid-template-columns: 1fr
    }
    .res-grid {
        grid-template-columns: 1fr;
        row-gap: 40px
    }
    .res+.res::before {
        display: none
    }
    .res {
        padding: 0
    }
    .ind-grid {
        grid-template-columns: 1fr
    }
    .steps {
        grid-template-columns: 1fr
    }
    .btn {
        width: 100%;
        --btn-h: 52px
    }
    .btn-row {
        gap: 12px;
        flex-wrap: wrap;
    }
    .footer__top {
        grid-template-columns: 1fr;
        gap: 36px
    }
    .fcol {
        padding-left: 0
    }
    .fcol::before {
        display: none
    }
    .footer__bar {
        flex-direction: column;
        align-items: flex-start
    }
    .marquee__item {
        font-size: 1rem;
        padding-inline: 28px
    }
    .totop {
        right: 16px;
        bottom: 16px
    }
}


/* 18. REDUCED MOTION ===================================================== */

@media (prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    [data-reveal],
    .hero [data-hero] {
        opacity: 1 !important;
        transform: none !important
    }
    [data-reveal="wipe"] {
        letter-spacing: -.01em
    }
    .hero__media img {
        animation: none;
        transform: scale(1.04)
    }
    .glowcursor,
    .hero__particles {
        display: none
    }
}


/* ==========================================================================
   19. ABOUT PAGE
   Shares every token, button, header and footer above. Only the section
   layouts unique to /about live here.
   ========================================================================== */

@font-face {
    font-family: "Great Vibes";
    src: url("../fonts/GreatVibes-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* --- gold line-art florals used as page ornaments ---------------------- */

.ornament {
    position: absolute;
    pointer-events: none;
    user-select: none;
    opacity: .5;
    z-index: 0;
}

.ornament img {
    width: 100%;
    height: auto
}

.ornament--story {
    right: 0;
    bottom: 0%;
    width: 350px;
    opacity: .5
}

.ornament--founder {
    right: 0;
    bottom: 0%;
    width: 300px;
    opacity: .5
}


/* --- inner hero (shorter than the home hero, same full-bleed treatment) - */

.hero--inner {
    min-height: min(74vh, 620px)
}

.hero--inner .hero__inner {
    padding-block: 150px 96px
}

.hero--inner .h1 {
    font-size: clamp(2.3rem, 4vw, 3.65rem)
}

.hero--inner .lede {
    max-width: 44ch;
    margin-bottom: 6px
}


/* --- our story --------------------------------------------------------- */

.story {
    position: relative;
    overflow: hidden
}

.story__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 78px;
    align-items: center;
    position: relative;
    z-index: 2;
}

.story-collage {
    display: grid;
    grid-template-columns: 1fr 1.12fr;
    grid-template-rows: 1fr .82fr;
    gap: 14px;
    height: 470px;
}

.story-collage figure {
    margin: 0;
    overflow: hidden;
    position: relative;
    background: #0b0b0b
}

.story-collage img {
    width: auto;
    height: auto;
    object-fit: cover;
    transition: transform 1.2s var(--ease-out);
}

.story-collage figure:hover img {
    transform: scale(1.07)
}

.story-collage .s3 {
    grid-column: 1 / span 2
}

.story__copy .rule {
    margin-bottom: 28px
}

.story__copy p {
    margin: 0 0 18px;
    font-size: .9rem;
    line-height: 1.95;
    max-width: 52ch
}

.story__copy p:last-of-type {
    margin-bottom: 34px
}


/* sage-green secondary button, per the mockup's "Meet our team" */

.btn-sage {
    background: #4F5B3F;
    color: #fff
}

.btn-sage:hover {
    background: #3E4831;
    transform: translateY(-3px);
    box-shadow: 0 16px 32px -18px rgba(30, 37, 23, .9)
}


/* --- our values (black band) ------------------------------------------- */

.values {
    position: relative;
    background: var(--ink);
    color: #fff;
    padding-block: var(--band-pad);
    overflow: hidden;
}

.values::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../img/gatsby-tile.png");
    background-size: 320px;
    opacity: .05;
}

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

.values__head {
    text-align: center;
    margin-bottom: 60px
}


/* the small diamond flourish under "What Drives Us" */

.flourish {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
}

.flourish i {
    display: block;
    width: 46px;
    height: 1px;
    background: rgba(215, 167, 73, .55)
}

.flourish span {
    width: 9px;
    height: 9px;
    border: 1px solid var(--gold-bright);
    transform: rotate(45deg);
}

.values__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr)
}

.value {
    position: relative;
    padding: 0 26px;
    text-align: center
}

.value+.value::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(215, 167, 73, .3), transparent);
}

.value svg {
    width: 44px;
    height: 44px;
    margin: 0 auto 20px;
    stroke: var(--gold-bright);
    transition: transform .6s var(--ease-out)
}

.value:hover svg {
    transform: translateY(-6px) scale(1.06)
}

.value h3 {
    margin: 0 0 12px;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 1.24rem;
    color: #fff;
}

.value p {
    margin: 0;
    font-size: .79rem;
    line-height: 1.82;
    color: rgba(255, 255, 255, .6)
}


/* --- our difference ----------------------------------------------------- */

.difference {
    display: grid;
    grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
    gap: 78px;
    align-items: center
}

.difference__copy .rule {
    margin-bottom: 26px
}

.difference__copy>p {
    margin: 0 0 26px;
    font-size: .9rem;
    line-height: 1.9;
    max-width: 46ch
}

.check-list {
    display: grid;
    gap: 14px
}

.check-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: .86rem;
    color: var(--body)
}

.check-list svg {
    width: 21px;
    height: 21px;
    flex: none;
    margin-top: 3px;
    stroke: #4F5B3F
}

.difference__media {
    overflow: hidden
}

.difference__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.4s var(--ease-out)
}

.difference__media:hover img {
    transform: scale(1.05)
}


/* --- stats bar ---------------------------------------------------------- */

.stats {
    background: #4F5B3F;
    padding-block: 38px
}

.stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr)
}

.stat {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 6px 20px;
}

.stat+.stat::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: rgba(255, 255, 255, .24);
}

.stat svg {
    width: 42px;
    height: 42px;
    flex: none;
    stroke: var(--gold-light)
}

.stat b {
    display: block;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 2.05rem;
    line-height: 1.05;
    color: #fff;
}

.stat span {
    display: block;
    margin-top: 4px;
    font-size: .79rem;
    color: rgba(255, 255, 255, .78);
}


/* --- founder note ------------------------------------------------------- */

.founder {
    position: relative;
    overflow: hidden
}

.founder__grid {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: 70px;
    align-items: center;
    position: relative;
    z-index: 2;
}

.founder__photo {
    overflow: hidden;
    background: #0b0b0b
}

.founder__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.4s var(--ease-out)
}

.founder__photo:hover img {
    transform: scale(1.04)
}

.founder__copy .rule {
    margin-bottom: 26px
}

.founder__copy p {
    margin: 0 0 30px;
    font-size: .88rem;
    line-height: 1.95;
    max-width: 52ch
}

.founder__copy .signature {
    font-family: "Great Vibes", "Playfair Display", cursive;
    font-size: 2.9rem;
    line-height: 1.1;
    color: #4F5B3F;
    margin: 0 0 10px;
    max-width: none;
}

.founder__copy .founder__name {
    margin: 0;
    font-size: .98rem;
    font-weight: 600;
    color: var(--charcoal);
}

.founder__copy .founder__role {
    margin: 4px 0 0;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--body-soft);
}


/* --- full-bleed CTA banner (home + about share this) -------------------- */

.cta--banner {
    background: var(--ink);
    text-align: center
}

.cta--banner .cta__media {
    inset: 0
}

.cta--banner .cta__media img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.cta--banner .cta__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(5, 5, 5, .86), rgba(5, 5, 5, .6) 38%, rgba(5, 5, 5, .6) 62%, rgba(5, 5, 5, .86)), linear-gradient(0deg, rgba(5, 5, 5, .72), rgba(5, 5, 5, .3));
}

.cta--banner .cta__inner {
    max-width: 820px;
    margin-inline: auto;
    padding-block: 92px
}

.cta--banner .lede {
    margin: 18px auto 0;
    max-width: 60ch
}

.cta--banner .btn-row {
    justify-content: center
}

@media (max-width:1080px) {
    .story__grid,
    .difference,
    .founder__grid {
        grid-template-columns: 1fr;
        gap: 52px
    }
    .values__grid {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 48px
    }
    .value:nth-child(3n+1)::before {
        display: none
    }
    .stats__grid {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 26px
    }
    .stat:nth-child(odd)::before {
        display: none
    }
    .ornament {
        display: none
    }
    .story-collage {
        height: 420px
    }
}

@media (max-width:820px) {
    .hero--inner {
        min-height: auto
    }
    .hero--inner .hero__inner {
        padding-block: 126px 92px
    }
    .values__grid {
        grid-template-columns: 1fr;
        row-gap: 44px
    }
    .value+.value::before {
        display: none
    }
    .value {
        padding: 0
    }
    .stats__grid {
        grid-template-columns: 1fr;
        row-gap: 22px
    }
    .stat::before {
        display: none
    }
    .stat {
        justify-content: flex-start
    }
    .story-collage {
        height: auto;
        grid-template-rows: 180px 150px
    }
    .cta--banner .cta__inner {
        padding-block: 76px
    }
    .founder__copy .signature {
        font-size: 2.3rem
    }
}


/* ==========================================================================
   20. TESTIMONIALS PAGE
   ========================================================================== */


/* --- Google rating badge above the review grid ------------------------- */

.grating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 26px auto 0;
    padding: 12px 22px;
    width: max-content;
    max-width: 100%;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 3px;
}


/* the Google mark is a filled glyph, not a stroked one — override the
   global stroke-only default */

.grating__g,
.tcard__src svg {
    fill: currentColor;
    stroke: none
}

.grating__g {
    width: 22px;
    height: 22px;
    flex: none;
    color: var(--charcoal)
}

.grating b {
    font-family: var(--serif);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--charcoal)
}

.grating .stars {
    gap: 2px
}

.grating span {
    font-size: .8rem;
    color: var(--body-soft)
}

.grating a {
    color: var(--gold-deep);
    text-decoration: underline;
    text-underline-offset: 3px
}

.grating a:hover {
    color: var(--charcoal)
}

.stars {
    display: inline-flex;
    align-items: center;
    gap: 3px
}

.stars svg {
    width: 15px;
    height: 15px;
    fill: var(--gold-bright);
    stroke: none
}


/* --- review grid -------------------------------------------------------- */

.reviews {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 52px;
}

.tcard {
    display: flex;
    flex-direction: column;
    padding: 32px 28px 30px;
    background: var(--ivory-lift);
    border: 1px solid rgba(199, 155, 74, .34);
    border-radius: 2px;
    transition: transform .55s var(--ease-out), box-shadow .55s var(--ease-out), border-color .45s var(--ease);
}

.tcard:hover {
    transform: translateY(-7px);
    border-color: var(--gold);
    box-shadow: 0 32px 54px -34px rgba(30, 37, 23, .42);
}

.tcard__mark {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 3.6rem;
    line-height: .62;
    color: var(--gold);
    margin-bottom: 20px;
}

.tcard__body {
    margin: 0 0 auto;
    font-size: .85rem;
    line-height: 1.85;
    color: var(--body);
}

.tcard hr {
    width: 40px;
    height: 2px;
    margin: 26px 0 18px;
    background: var(--gold);
    border: 0
}

.tcard__name {
    margin: 0;
    font-size: .86rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--charcoal);
    text-transform: uppercase;
}

.tcard__role {
    margin: 5px 0 0;
    font-size: .73rem;
    line-height: 1.55;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--body-soft);
}

.tcard .stars {
    margin-top: 16px
}

.tcard__src {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    font-size: .7rem;
    letter-spacing: .04em;
    color: var(--body-soft);
}

.tcard__src svg {
    width: 14px;
    height: 14px;
    color: var(--body-soft)
}


/* --- client wordmark row ------------------------------------------------ */

.clients {
    margin-top: 74px;
    text-align: center
}

.clients__row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-top: 34px;
    align-items: center;
}

.client {
    position: relative;
    padding: 10px 14px
}

.client+.client::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(30, 37, 23, .16), transparent);
}

.client b {
    display: block;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 1.02rem;
    letter-spacing: .06em;
    color: rgba(17, 17, 17, .72);
    line-height: 1.1;
}

.client span {
    display: block;
    margin-top: 5px;
    font-size: .6rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: rgba(17, 17, 17, .44);
}

.dots {
    display: flex;
    justify-content: center;
    gap: 9px;
    margin-top: 26px
}

.dots button {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(30, 37, 23, .2);
    transition: background .3s var(--ease), transform .3s var(--ease-out);
}

.dots button[aria-current="true"] {
    background: var(--gold);
    transform: scale(1.15)
}


/* --- more than events / relationships ----------------------------------- */

.relations {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
    align-items: center
}

.rel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
}

.rel-grid figure {
    overflow: hidden;
    aspect-ratio: 1.32;
    background: #0b0b0b
}

.rel-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--ease-out)
}

.rel-grid figure:hover img {
    transform: scale(1.08)
}

.relations__copy .rule {
    margin-bottom: 26px
}

.relations__copy>p {
    margin: 0 0 30px;
    font-size: .88rem;
    line-height: 1.9;
    max-width: 48ch
}


/* the rotating featured quote */

.feature {
    position: relative;
    display: flex;
    gap: 18px;
    padding: 26px 28px;
    background: var(--ivory-lift);
    border: 1px solid rgba(199, 155, 74, .34);
    border-radius: 2px;
    min-height: 172px;
}

.feature__mark {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 2.9rem;
    line-height: .7;
    color: var(--gold);
    flex: none;
}

.feature__slide {
    transition: opacity .45s var(--ease)
}

.feature__slide.is-out {
    opacity: 0
}

.feature p {
    margin: 0 0 14px;
    font-size: .85rem;
    line-height: 1.82;
    color: var(--body)
}

.feature__who {
    margin: 0;
    font-size: .8rem;
    font-weight: 600;
    color: var(--charcoal);
}

.feature__org {
    margin: 3px 0 0;
    font-size: .7rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--body-soft);
}

.arrows {
    display: flex;
    gap: 12px;
    margin-top: 22px
}

.arrows button {
    width: 46px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(199, 155, 74, .55);
    border-radius: 2px;
    transition: background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease-out);
}

.arrows svg {
    width: 17px;
    height: 17px;
    stroke: var(--gold-deep)
}

.arrows button:hover {
    background: var(--gold-fill);
    border-color: transparent;
    transform: translateY(-2px)
}

.arrows button:hover svg {
    stroke: #14100A
}


/* --- split CTA banner (heading left, action right) ---------------------- */

.cta--split {
    background: var(--ink);
    text-align: left
}

.cta--split .cta__media {
    inset: 0
}

.cta--split .cta__media img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.cta--split .cta__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(5, 5, 5, .94) 0%, rgba(5, 5, 5, .86) 48%, rgba(5, 5, 5, .52) 100%), linear-gradient(0deg, rgba(5, 5, 5, .6), rgba(5, 5, 5, .2));
}

.cta--split .cta__inner {
    max-width: 100%;
    padding-block: 78px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
    gap: 56px;
    align-items: center;
}

.cta--split .h2 {
    font-size: clamp(1.9rem, 2.9vw, 2.75rem)
}

.cta--split .rule {
    margin-top: 20px
}

.cta--split .lede {
    margin: 0 0 26px
}

.cta--split .btn-row {
    margin-top: 0
}

@media (max-width:1080px) {
    .reviews {
        grid-template-columns: repeat(2, 1fr)
    }
    .clients__row {
        grid-template-columns: repeat(4, 1fr);
        row-gap: 26px
    }
    .client:nth-child(4n+1)::before {
        display: none
    }
    .relations {
        grid-template-columns: 1fr;
        gap: 48px
    }
    .cta--split .cta__inner {
        grid-template-columns: 1fr;
        gap: 30px
    }
}

@media (max-width:820px) {
    .reviews {
        grid-template-columns: 1fr
    }
    .clients__row {
        grid-template-columns: repeat(2, 1fr)
    }
    .client:nth-child(odd)::before {
        display: none
    }
    .rel-grid {
        gap: 10px
    }
    .grating {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 10px
    }
    .cta--split .cta__inner {
        padding-block: 64px
    }
}


/* ==========================================================================
   21. OUR SIGNATURE SERVICES PAGE
   ========================================================================== */


/* --- centred statement under the hero ----------------------------------- */

.statement {
    text-align: center;
    max-width: 860px;
    margin-inline: auto
}

.statement .h2 {
    font-size: clamp(1.5rem, 2.2vw, 2.05rem);
    line-height: 1.42;
    font-weight: 400;
    color: var(--charcoal);
}


/* --- the numbered service list ------------------------------------------ */

.svclist {
    margin-top: 58px;
    border-top: 1px solid var(--line)
}

.svcrow {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr) minmax(0, 470px);
    gap: 0 26px;
    align-items: center;
    border-bottom: 1px solid var(--line);
    background: var(--ivory-lift);
    transition: background .45s var(--ease);
}

.svcrow:hover {
    background: var(--paper)
}

.svcrow__num {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 2.3rem;
    line-height: 1;
    color: var(--gold);
    text-align: center;
    transition: color .45s var(--ease), transform .55s var(--ease-out);
}

.svcrow:hover .svcrow__num {
    color: var(--gold-deep);
    transform: translateY(-3px)
}

.svcrow__copy {
    padding: 30px 24px 30px 0
}

.svcrow__copy h3 {
    margin: 0 0 10px;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 1.28rem;
    line-height: 1.24;
    color: var(--charcoal);
}

.svcrow__copy p {
    margin: 0 0 16px;
    font-size: 18px;
    line-height: 1.8;
    color: var(--body-soft);
    max-width: 44ch;
}


/* The image is taken out of flow so its intrinsic aspect ratio can't drive
   the row height — otherwise a portrait photo makes one row twice as tall as
   its neighbours. Row height comes from the copy column plus this min-height. */

.svcrow__media {
    position: relative;
    overflow: hidden;
    align-self: stretch;
    background: #0b0b0b;
    min-height: 158px;
}

.svcrow__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.2s var(--ease-out);
}

.svcrow:hover .svcrow__media img {
    transform: scale(1.06)
}


/* --- what we bring (black band) ----------------------------------------- */

.bring {
    position: relative;
    background: var(--ink);
    color: #fff;
    padding-block: var(--band-pad);
    overflow: hidden;
}

.bring::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../img/gatsby-tile.png");
    background-size: 320px;
    opacity: .05;
}

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

.bring__head {
    text-align: center;
    margin-bottom: 56px
}

.bring__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr)
}

.bring__item {
    position: relative;
    padding: 0 24px;
    text-align: center
}

.bring__item+.bring__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(215, 167, 73, .3), transparent);
}

.bring__item svg {
    width: 36px;
    height: 36px;
    margin: 0 auto 16px;
    stroke: var(--gold-bright);
    transition: transform .6s var(--ease-out);
}

.bring__item:hover svg {
    transform: translateY(-5px) scale(1.06)
}

.bring__item h3 {
    margin: 0 0 10px;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: #fff;
}

.bring__item p {
    margin: 0;
    font-size: .77rem;
    line-height: 1.78;
    color: rgba(255, 255, 255, .6)
}

@media (max-width:1080px) {
    .svcrow {
        grid-template-columns: 78px minmax(0, 1fr) minmax(0, 320px)
    }
    .svcrow__num {
        font-size: 1.9rem
    }
    .bring__grid {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 44px
    }
    .bring__item:nth-child(3n+1)::before {
        display: none
    }
}

@media (max-width:820px) {
    .svcrow {
        grid-template-columns: 56px minmax(0, 1fr);
        gap: 0 14px
    }
    .svcrow__num {
        font-size: 1.6rem;
        padding-top: 26px;
        align-self: start
    }
    .svcrow__copy {
        padding: 24px 0 20px
    }
    .svcrow__media {
        grid-column: 1 / -1;
        aspect-ratio: 16/9;
        min-height: 0;
        position: relative
    }
    .bring__grid {
        grid-template-columns: 1fr;
        row-gap: 40px
    }
    .bring__item {
        padding: 0
    }
    .bring__item+.bring__item::before {
        display: none
    }
    .statement .h2 {
        font-size: 1.25rem;
        line-height: 1.5
    }
}


/* ==========================================================================
   22. SINGLE SERVICE PAGE  (one template, seven pages)
   ========================================================================== */


/* eyebrow with the short trailing rule used on the service heroes */

.eyebrow--dash {
    display: flex;
    align-items: center;
    gap: 14px
}

.eyebrow--dash::after {
    content: "";
    flex: none;
    width: 34px;
    height: 1px;
    background: var(--gold)
}

.eyebrow--center.eyebrow--dash {
    justify-content: center
}


/* --- intro: copy left, three-image collage right ------------------------ */

.sintro {
    display: grid;
    grid-template-columns: minmax(0, 410px) minmax(0, 1fr);
    gap: 70px;
    align-items: center
}

.sintro__copy .rule {
    margin-bottom: 26px
}

.sintro__copy p {
    margin: 0 0 18px;
    font-size: .86rem;
    line-height: 1.92;
    max-width: 46ch
}

.scollage {
    display: grid;
    grid-template-columns: 1.24fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 14px;
    height: 404px
}

.scollage figure {
    overflow: hidden;
    background: #0b0b0b
}

.scollage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--ease-out)
}

.scollage figure:hover img {
    transform: scale(1.07)
}

.scollage .p1 {
    grid-row: 1 / span 2
}


/* --- what we create (dark band, six columns) ---------------------------- */

.create {
    position: relative;
    background: var(--ink);
    color: #fff;
    padding-block: var(--band-pad);
    overflow: hidden
}

.create::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../img/gatsby-tile.png");
    background-size: 320px;
    opacity: .05
}

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

.create__head {
    text-align: center;
    margin-bottom: 52px
}

.create__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr)
}

.create__item {
    position: relative;
    padding: 0 18px;
    text-align: center
}

.create__item+.create__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(215, 167, 73, .3), transparent)
}

.create__item svg {
    width: 34px;
    height: 34px;
    margin: 0 auto 15px;
    stroke: var(--gold-bright);
    transition: transform .6s var(--ease-out)
}

.create__item:hover svg {
    transform: translateY(-5px)
}

.create__item h3 {
    margin: 0 0 10px;
    font-family: var(--sans);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.4;
    color: #fff
}

.create__item p {
    margin: 0;
    font-size: .74rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, .58)
}


/* --- fully managed: full-bleed image left, checklist right -------------- */


/* stretch, not center — otherwise the photo floats in a band of ivory instead
   of running the full height of the section */

.managed {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    background: var(--ivory);
}

.managed__media {
    position: relative;
    min-height: 480px;
    overflow: hidden;
    background: #0b0b0b
}

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

.managed__copy {
    padding: 72px 0 72px 72px;
    max-width: 660px;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.managed__copy .rule {
    margin-bottom: 24px
}

.managed__copy>p {
    margin: 0 0 26px;
    font-size: .86rem;
    line-height: 1.9;
    max-width: 46ch
}

.managed__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 30px;
    margin-bottom: 32px
}

.managed__list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 18px;
    color: var(--body)
}

.managed__list svg {
    width: 19px;
    height: 19px;
    flex: none;
    margin-top: 2px;
    stroke: var(--gold)
}


/* --- featured experience (dark) ----------------------------------------- */

.featured {
    position: relative;
    background: var(--ink);
    color: #fff;
    padding-block: var(--band-pad);
    overflow: hidden
}

.featured::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../img/gatsby-tile.png");
    background-size: 320px;
    opacity: .05
}

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

.featured__grid {
    display: grid;
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    gap: 56px;
    align-items: center
}

.featured__copy .rule {
    margin-bottom: 24px
}

.featured__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    margin-bottom: 22px
}

.fmeta {
    display: flex;
    align-items: flex-start;
    gap: 10px
}

.fmeta svg {
    width: 19px;
    height: 19px;
    flex: none;
    margin-top: 2px;
    stroke: var(--gold-bright)
}

.fmeta b {
    display: block;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff
}

.fmeta span {
    display: block;
    margin-top: 3px;
    font-size: .72rem;
    color: rgba(255, 255, 255, .58)
}

.featured__copy>p {
    margin: 0 0 28px;
    font-size: .84rem;
    line-height: 1.88;
    color: rgba(255, 255, 255, .68);
    max-width: 44ch
}

.fgallery {
    display: grid;
    grid-template-columns: 1.62fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 12px;
    height: 330px
}

.fgallery figure {
    overflow: hidden;
    background: #111
}

.fgallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--ease-out)
}

.fgallery figure:hover img {
    transform: scale(1.07)
}

.fgallery .g1 {
    grid-row: 1 / span 2
}


/* --- the B.A.E. Experience strip ---------------------------------------- */

.baestrip {
    background: var(--ivory-lift);
    padding-block: 64px;
    border-top: 1px solid var(--line)
}

.baestrip__head {
    text-align: center;
    margin-bottom: 38px
}

.baestrip__row {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0
}

.bstep {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex: 0 1 260px
}

.bstep__num {
    width: 52px;
    height: 52px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--gold-fill);
    color: #14100A;
    font-family: var(--serif);
    font-size: .95rem;
    font-weight: 600;
}

.bstep h3 {
    margin: 2px 0 7px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--charcoal)
}

.bstep p {
    margin: 0;
    font-size: .77rem;
    line-height: 1.72;
    color: var(--body-soft)
}

.bsep {
    flex: none;
    align-self: center;
    width: 34px;
    display: grid;
    place-items: center
}

.bsep svg {
    width: 18px;
    height: 18px;
    stroke: var(--gold)
}

@media (max-width:1180px) {
    .managed__copy {
        padding: 64px var(--gutter) 64px 48px
    }
}

@media (max-width:1080px) {
    .sintro {
        grid-template-columns: 1fr;
        gap: 44px
    }
    .create__grid {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 42px
    }
    .create__item:nth-child(3n+1)::before {
        display: none
    }
    .managed {
        grid-template-columns: 1fr
    }
    .managed__media {
        min-height: 320px
    }
    .managed__copy {
        padding: 56px var(--gutter);
        max-width: 100%
    }
    .featured__grid {
        grid-template-columns: 1fr;
        gap: 40px
    }
    .baestrip__row {
        flex-wrap: wrap;
        gap: 28px 0;
        justify-content: flex-start
    }
    .bstep {
        flex: 0 1 46%
    }
    .bsep {
        display: none
    }
}

@media (max-width:820px) {
    .scollage {
        height: auto;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 150px 150px
    }
    .create__grid {
        grid-template-columns: 1fr;
        row-gap: 38px
    }
    .create__item {
        padding: 0
    }
    .create__item+.create__item::before {
        display: none
    }
    .managed__list {
        grid-template-columns: 1fr
    }
    .fgallery {
        height: auto;
        grid-template-rows: 150px 150px
    }
    .bstep {
        flex: 0 1 100%
    }
}


/* ==========================================================================
   23. GALLERY & VIDEO PAGES
   ========================================================================== */


/* --- filter bar shared by both pages ------------------------------------ */

.filterbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding-block: 26px;
    border-bottom: 1px solid rgba(215, 167, 73, .18);
}

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 26px
}

.filters button {
    position: relative;
    padding: 6px 0;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #000;
    transition: color .3s var(--ease);
}

.filters button::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1.5px;
    width: 0;
    background: var(--gold-bright);
    transition: width .38s var(--ease-out);
}

.filters button[aria-pressed="true"],
.filters button:hover {
    color: var(--gold-bright)
}

.filters button[aria-pressed="true"]::after {
    width: 100%
}

.sortby {
    position: relative;
    flex: none
}

.sortby select {
    appearance: none;
    -webkit-appearance: none;
    padding: 11px 40px 11px 18px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(215, 167, 73, .3);
    border-radius: 2px;
    font-family: var(--sans);
    font-size: 10.4px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .82);
    cursor: pointer;
}

.sortby select:hover {
    border-color: var(--gold-bright)
}

.sortby svg {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 13px;
    height: 13px;
    stroke: var(--gold-bright);
    pointer-events: none;
}

.sortby option {
    background: #121212;
    color: #fff
}


/* --- dark page shell ---------------------------------------------------- */

.darkpage {
    position: relative;
    background: var(--ink);
    color: #fff;
    padding-block: var(--band-pad);
    overflow: hidden;
}

.darkpage::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../img/gatsby-tile.png");
    background-size: 320px;
    opacity: .04;
}

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

.emptynote {
    margin: 48px 0 0;
    text-align: center;
    font-size: .85rem;
    color: rgba(255, 255, 255, .5);
}


/* --- photo gallery grid ------------------------------------------------- */

.ggrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 34px
}

@media (max-width:900px) {
    .ggrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px
    }
}

@media (max-width:560px) {
    .ggrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px
    }
}


/* portrait shots keep their shape instead of being cropped to 3:2 */

.gtile--tall {
    aspect-ratio: 4/5
}


/* hidden by the Load More batching, not by the category filter */

.gtile[hidden] {
    display: none !important
}

.gmore {
    margin-top: 42px;
    text-align: center
}

.gmore[hidden] {
    display: none
}

.gcount {
    margin: 18px 0 0;
    font-size: .7rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5)
}

.gtile {
    position: relative;
    display: block;
    overflow: hidden;
    background: #111;
    aspect-ratio: 3/2;
    border: 0;
    padding: 0;
    cursor: zoom-in;
}

.gtile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.1s var(--ease-out), filter .5s var(--ease);
}

.gtile:hover img {
    transform: scale(1.07)
}

.gtile__cap {
    position: absolute;
    inset: auto 0 0 0;
    padding: 30px 18px 16px;
    background: linear-gradient(0deg, rgba(5, 5, 5, .88), transparent);
    text-align: left;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .4s var(--ease), transform .45s var(--ease-out);
}

.gtile:hover .gtile__cap,
.gtile:focus-visible .gtile__cap {
    opacity: 1;
    transform: none
}


/* single gold caption, bottom-left — the white title line was removed */

.gtile__cap span {
    display: block;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--gold-bright)
}


/* --- video grid --------------------------------------------------------- */

.vgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px 22px;
    margin-top: 34px
}

.vcard {
    display: flex;
    flex-direction: column
}

.vcard__thumb {
    position: relative;
    display: block;
    overflow: hidden;
    background: #111;
    aspect-ratio: 16/9;
    border: 0;
    padding: 0;
    width: 100%;
    cursor: pointer;
}

.vcard__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.1s var(--ease-out), opacity .4s var(--ease)
}

.vcard:hover .vcard__thumb img {
    transform: scale(1.06);
    opacity: .82
}

.vplay {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(5, 5, 5, .42);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1.5px solid var(--gold-bright);
    transition: transform .45s var(--ease-out), background .35s var(--ease);
}

.vplay svg {
    width: 19px;
    height: 19px;
    fill: var(--gold-bright);
    stroke: none;
    margin-left: 3px
}

.vcard:hover .vplay {
    transform: translate(-50%, -50%) scale(1.12);
    background: rgba(199, 155, 74, .3)
}

.vdur {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 3px 8px;
    border-radius: 2px;
    background: rgba(5, 5, 5, .78);
    font-size: .68rem;
    font-weight: 500;
    color: #fff;
    letter-spacing: .02em;
}

.vcard h3 {
    margin: 15px 0 4px;
    font-size: .88rem;
    font-weight: 600;
    color: #fff
}

.vcard p {
    margin: 0;
    font-size: .74rem;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .55)
}


/* --- lightbox (photos + video) ------------------------------------------ */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    background: rgba(4, 4, 4, .92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.lightbox.is-open {
    display: flex
}

.lightbox__inner {
    position: relative;
    width: min(1080px, 100%);
    max-height: 100%
}

.lightbox img {
    width: 100%;
    height: auto;
    max-height: 78vh;
    object-fit: contain;
    display: block;
    margin-inline: auto
}

.lightbox .frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: #000
}

.lightbox iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0
}

.lightbox__cap {
    margin-top: 16px;
    text-align: center;
    font-size: 18px;
    color: rgba(255, 255, 255, .72)
}

.lightbox__cap span {
    display: block;
    margin-top: 4px;
    font-size: .68rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--gold-bright)
}

.lb-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(215, 167, 73, .4);
    transition: background .3s var(--ease)
}

.lb-btn:hover {
    background: rgba(199, 155, 74, .28)
}

.lb-btn svg {
    width: 18px;
    height: 18px;
    stroke: var(--gold-bright)
}

.lb-prev {
    left: -64px
}

.lb-next {
    right: -64px
}

.lb-close {
    position: absolute;
    top: -52px;
    right: 0;
    transform: none
}


/* --- pull quote band on the video page ---------------------------------- */

.quoteband {
    position: relative;
    background: var(--charcoal);
    color: #fff;
    overflow: hidden
}

.quoteband__media {
    position: absolute;
    inset: 0
}

.quoteband__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .3
}

.quoteband__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10, 10, 10, .94), rgba(10, 10, 10, .7))
}

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

.quoteband__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 44px;
    align-items: center;
    padding-block: 56px;
}

.quoteband__q {
    display: flex;
    gap: 18px
}

.quoteband__q .mark {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 2.8rem;
    line-height: .7;
    color: var(--gold);
    flex: none
}

.quoteband__q p {
    margin: 0 0 12px;
    font-size: .95rem;
    line-height: 1.8;
    color: #fff;
    max-width: 52ch
}

.quoteband__q cite {
    font-style: normal;
    font-size: .72rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--gold-bright)
}

@media (max-width:1180px) {
    .lb-prev {
        left: 6px
    }
    .lb-next {
        right: 6px
    }
}

@media (max-width:1080px) {
    .ggrid,
    .vgrid {
        grid-template-columns: repeat(2, 1fr)
    }
    .quoteband__inner {
        grid-template-columns: 1fr;
        gap: 26px
    }
}

@media (max-width:820px) {
    .ggrid,
    .vgrid {
        grid-template-columns: 1fr
    }
    .filterbar {
        gap: 16px
    }
    .filters {
        gap: 16px
    }
    .sortby select {
        width: 100%
    }
    .sortby {
        width: 100%
    }
    .gtile__cap {
        opacity: 1;
        transform: none
    }
}


/* ==========================================================================
   24. FAQ PAGE
   ========================================================================== */

.faq {
    display: grid;
    grid-template-columns: minmax(0, 236px) minmax(0, 1fr);
    gap: 44px;
    margin-top: 56px
}


/* category rail */

.faqnav {
    position: relative;
    padding-right: 44px
}

.faqnav::after {
    content: "";
    position: absolute;
    right: 0;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(199, 155, 74, .4), transparent);
}

.faqnav button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 17px 20px;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--body-soft);
    border-radius: 2px;
    transition: background .35s var(--ease), color .35s var(--ease), padding-left .35s var(--ease);
}

.faqnav button:hover {
    color: var(--charcoal);
    padding-left: 26px
}

.faqnav button[aria-selected="true"] {
    background: var(--ink);
    color: var(--gold-bright)
}


/* accordion */


/* `display:grid` on the class beats the browser's own [hidden]{display:none},
   so every category panel rendered at once. Restore it explicitly. */

.faqlist {
    display: grid;
    gap: 0;
    align-content: start
}

.faqlist[hidden] {
    display: none
}

.faqitem {
    border: 1px solid var(--line);
    border-bottom: 0;
    background: var(--ivory-lift);
    transition: background .35s var(--ease);
}

.faqitem:last-child {
    border-bottom: 1px solid var(--line)
}

.faqitem.is-open {
    background: var(--paper)
}

.faqq {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    text-align: left;
    padding: 21px 26px;
    font-family: var(--sans);
    font-size: .9rem;
    font-weight: 500;
    color: var(--charcoal);
    transition: color .3s var(--ease);
}

.faqq:hover {
    color: var(--gold-deep)
}

.faqq .sign {
    position: relative;
    flex: none;
    width: 16px;
    height: 16px;
}

.faqq .sign::before,
.faqq .sign::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: var(--charcoal);
    transform: translate(-50%, -50%);
    transition: transform .4s var(--ease-out), background .3s var(--ease);
}

.faqq .sign::before {
    width: 15px;
    height: 1.5px
}

.faqq .sign::after {
    width: 1.5px;
    height: 15px
}

.faqitem.is-open .faqq .sign::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0
}

.faqitem.is-open .faqq .sign::before {
    background: var(--gold-deep)
}

.faqa {
    overflow: hidden;
    height: 0;
    transition: height .42s var(--ease-out);
}

.faqa>div {
    padding: 0 26px 24px;
    font-size: .84rem;
    line-height: 1.9;
    color: var(--body);
    max-width: 68ch
}


/* still have questions band */

.stillq {
    position: relative;
    background: var(--ink);
    color: #fff;
    overflow: hidden
}

.stillq__media {
    position: absolute;
    inset: 0 0 0 42%
}

.stillq__media img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.stillq__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--ink) 0%, rgba(5, 5, 5, .93) 26%, rgba(5, 5, 5, .45) 72%, rgba(5, 5, 5, .3) 100%);
}

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

.stillq__inner {
    max-width: 520px;
    padding-block: 86px
}

.stillq .rule {
    margin-bottom: 26px
}

.stillq p {
    margin: 0 0 30px;
    font-size: .88rem;
    line-height: 1.9;
    color: rgba(255, 255, 255, .7);
    max-width: 42ch
}

@media (max-width:1080px) {
    .faq {
        grid-template-columns: 1fr;
        gap: 30px
    }
    .faqnav {
        padding-right: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 8px
    }
    .faqnav::after {
        display: none
    }
    .faqnav button {
        width: auto;
        padding: 12px 18px;
        margin: 0;
        border: 1px solid var(--line)
    }
    .stillq__media {
        inset: 0 0 0 30%
    }
}

@media (max-width:820px) {
    .faqq {
        padding: 18px;
        font-size: .85rem
    }
    .faqa>div {
        padding: 0 18px 20px
    }
    .stillq__media {
        inset: 0
    }
    .stillq__media::after {
        background: linear-gradient(90deg, rgba(5, 5, 5, .94), rgba(5, 5, 5, .82))
    }
    .stillq__inner {
        padding-block: 70px
    }
}


/* ==========================================================================
   25. CONTACT PAGE
   ========================================================================== */


/* quick-contact pills sitting in the hero */

.herocontact {
    display: flex;
    flex-wrap: wrap;
    gap: 38px;
    margin-top: 34px
}

.hcitem {
    display: flex;
    align-items: center;
    gap: 14px
}

.hcitem--follow {
    align-items: flex-start
}

.hcitem--follow .hcitem__ic {
    margin-top: 2px
}

.hcitem__ic {
    width: 46px;
    height: 46px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(215, 167, 73, .55);
    transition: background .4s var(--ease), transform .5s var(--ease-out);
}

.hcitem__ic svg {
    width: 19px;
    height: 19px;
    stroke: var(--gold-bright)
}

.hcitem:hover .hcitem__ic {
    background: rgba(215, 167, 73, .14);
    transform: translateY(-3px)
}

.hcitem b {
    display: block;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold-bright)
}

.hcitem a {
    /* display: block; */
    margin-top: 4px;
    font-size: .86rem;
    color: rgba(255, 255, 255, .86)
}

.hcitem a:hover {
    color: var(--gold-bright)
}


/* two-tone split: ivory form, black info panel */

.csplit {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr)
}

.cform {
    background: var(--ivory);
    padding: 76px var(--gutter) 76px var(--gutter)
}

.cform__inner {
    max-width: 560px;
    margin-left: auto
}

.cform .rule {
    margin-bottom: 22px
}

.cform>.cform__inner>p {
    margin: 0 0 30px;
    font-size: .85rem;
    line-height: 1.85;
    color: var(--body-soft);
    max-width: 44ch
}

.frow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px
}

.field {
    position: relative
}

.field label {
    position: absolute;
    left: 15px;
    top: 13px;
    pointer-events: none;
    font-size: .78rem;
    color: var(--body-soft);
    transition: transform .28s var(--ease-out), font-size .28s var(--ease-out), color .28s var(--ease);
    background: transparent;
    padding: 0 4px;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 22px 15px 10px;
    font-family: var(--sans);
    font-size: .84rem;
    color: var(--charcoal);
    background: var(--ivory-lift);
    border: 1px solid rgba(30, 37, 23, .18);
    border-radius: 2px;
    transition: border-color .3s var(--ease), background .3s var(--ease);
}

.field textarea {
    min-height: 132px;
    resize: vertical;
    line-height: 1.7
}

.field select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 40px
}

.field .caret {
    position: absolute;
    right: 15px;
    top: 26px;
    width: 13px;
    height: 13px;
    stroke: var(--body-soft);
    pointer-events: none
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--gold);
    background: var(--paper);
}


/* The label lifts once the field has focus or content.
   Selects are the exception: a <select> always renders its current option, so
   a label sharing that space collides with "Select an option". Their label is
   raised permanently and the option text sits below it. */

.field input:focus+label,
.field textarea:focus+label,
.field input:not(:placeholder-shown)+label,
.field textarea:not(:placeholder-shown)+label,
.field select+label {
    transform: translateY(-9px);
    font-size: .63rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--gold-deep);
}

.field select {
    padding-top: 26px;
    padding-bottom: 9px
}

.field select+label {
    color: var(--body-soft)
}

.field select:focus+label,
.field select.has-value+label {
    color: var(--gold-deep)
}


/* same for date/time, which also always show a value */

.field input[type="date"]+label,
.field input[type="time"]+label {
    transform: translateY(-9px);
    font-size: .63rem;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.field input[type="date"],
.field input[type="time"] {
    padding-top: 26px;
    padding-bottom: 9px
}

.field .caret {
    top: auto;
    bottom: 15px
}

.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea {
    border-color: #B4442F
}

.field__err {
    display: none;
    margin: 6px 0 0;
    font-size: .7rem;
    color: #B4442F
}

.field.is-invalid .field__err {
    display: block
}

.cform .btn {
    width: 100%;
    background: var(--charcoal);
    color: #fff;
    margin-top: 8px
}

.cform .btn:hover {
    background: var(--ink);
    transform: translateY(-2px)
}

.formnote {
    margin: 16px 0 0;
    font-size: .72rem;
    color: var(--body-soft)
}

.formnote a {
    color: var(--gold-deep);
    text-decoration: underline;
    text-underline-offset: 2px
}

.formok {
    display: none;
    margin-top: 18px;
    padding: 15px 18px;
    border-radius: 2px;
    background: rgba(79, 91, 63, .12);
    border: 1px solid rgba(79, 91, 63, .4);
    font-size: .8rem;
    color: #3E4831;
}

.formok.is-on {
    display: block
}


/* info panel */

.cinfo {
    background: var(--ink);
    color: #fff;
    padding: 76px var(--gutter)
}

.cinfo__inner {
    max-width: 440px
}

.cinfo .rule {
    margin-bottom: 34px
}

.cblock {
    display: flex;
    gap: 18px;
    padding-block: 24px;
    border-bottom: 1px solid rgba(215, 167, 73, .2)
}

.cblock:last-of-type {
    border-bottom: 0
}

.cblock__ic {
    width: 46px;
    height: 46px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(215, 167, 73, .5);
}

.cblock__ic svg {
    width: 19px;
    height: 19px;
    stroke: var(--gold-bright)
}

.cblock h3 {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold-bright)
}

.cblock p,
.cblock a {
    margin: 0;
    font-size: .85rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, .78)
}

.cblock a:hover {
    color: var(--gold-bright)
}

.cinfo h4 {
    margin: 34px 0 16px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold-bright)
}


/* why work with us band */

.whyband {
    position: relative;
    background: var(--charcoal);
    color: #fff;
    padding-block: var(--band-pad);
    overflow: hidden
}

.whyband::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../img/gatsby-tile.png");
    background-size: 320px;
    opacity: .05
}

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

.whyband__head {
    text-align: center;
    margin-bottom: 54px
}

.whyband__head .h2 {
    font-size: clamp(1.45rem, 2.15vw, 1.95rem)
}

.whyband__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr)
}

.whyitem {
    position: relative;
    padding: 0 24px;
    text-align: center
}

.whyitem+.whyitem::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(215, 167, 73, .3), transparent)
}

.whyitem svg {
    width: 36px;
    height: 36px;
    margin: 0 auto 16px;
    stroke: var(--gold-bright);
    transition: transform .6s var(--ease-out)
}

.whyitem:hover svg {
    transform: translateY(-5px)
}

.whyitem h3 {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 600;
    color: #fff
}

.whyitem p {
    margin: 0;
    font-size: 16px;
    line-height: 1.78;
    color: rgba(255, 255, 255, .6)
}

@media (max-width:1080px) {
    .csplit {
        grid-template-columns: 1fr
    }
    .cform__inner {
        margin-left: 0;
        max-width: 100%
    }
    .whyband__grid {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 42px
    }
    .whyitem:nth-child(3n+1)::before {
        display: none
    }
}

@media (max-width:820px) {
    .frow {
        grid-template-columns: 1fr
    }
    .cform,
    .cinfo {
        padding: 60px var(--gutter)
    }
    .herocontact {
        gap: 22px;
        flex-direction: column
    }
    .whyband__grid {
        grid-template-columns: 1fr;
        row-gap: 38px
    }
    .whyitem {
        padding: 0
    }
    .whyitem+.whyitem::before {
        display: none
    }
}


/* ==========================================================================
   26. BOOK NOW PAGE
   ========================================================================== */


/* three assurances sitting under the hero copy */

.assure {
    display: flex;
    flex-wrap: wrap;
    gap: 38px;
    margin-top: 36px
}

.assure__it {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    max-width: 230px
}

.assure__it svg {
    width: 34px;
    height: 34px;
    flex: none;
    stroke: var(--gold-bright)
}

.assure__it b {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    color: var(--gold-bright)
}

.assure__it span {
    display: block;
    margin-top: 5px;
    font-size: 16px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .68)
}

.bookwrap {
    position: relative;
    background: var(--ink);
    color: #fff;
    padding-block: var(--band-pad);
    overflow: hidden;
}

.bookwrap::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../img/gatsby-tile.png");
    background-size: 320px;
    opacity: .04
}

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

.bookgrid {
    display: grid;
    grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
    gap: 26px;
    align-items: start
}

.panel {
    background: rgba(255, 255, 255, .028);
    border: 1px solid rgba(215, 167, 73, .26);
    border-radius: 3px;
    padding: 42px;
}

.panel>h2 {
    margin: 0 0 10px;
    font-size: .94rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold-bright);
}

.panel .rule {
    margin: 0 0 30px
}

.fgroup {
    margin: 0 0 16px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--gold-bright);
}

.fgroup+.frow,
.fgroup+.field {
    margin-top: 0
}

.fgroup:not(:first-of-type) {
    margin-top: 30px
}


/* dark variants of the shared form field */

.panel .field input,
.panel .field select,
.panel .field textarea {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .16);
    color: #fff;
}

.panel .field label {
    color: rgba(255, 255, 255, .55)
}

.panel .field select+label {
    color: rgba(255, 255, 255, .55)
}

.panel .field select:focus+label,
.panel .field select.has-value+label {
    color: var(--gold-bright)
}

.panel .field input:focus,
.panel .field select:focus,
.panel .field textarea:focus {
    background: rgba(255, 255, 255, .07);
    border-color: var(--gold);
}

.panel .field input:focus+label,
.panel .field textarea:focus+label,
.panel .field select:focus+label,
.panel .field input:not(:placeholder-shown)+label,
.panel .field textarea:not(:placeholder-shown)+label,
.panel .field select.has-value+label {
    color: var(--gold-bright)
}

.panel .field .caret {
    stroke: rgba(255, 255, 255, .5)
}

.panel .field option {
    background: #121212;
    color: #fff
}

.panel .field input[type="date"],
.panel .field input[type="time"] {
    color-scheme: dark
}

.panel .field.is-invalid input,
.panel .field.is-invalid select,
.panel .field.is-invalid textarea {
    border-color: #D4785F
}

.panel .field__err {
    color: #D4785F
}


/* checkbox grid */

.checkgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 8px
}

.chk {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 2px;
    font-size: 18px;
    color: rgba(255, 255, 255, .8);
    transition: border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}

.chk:hover {
    border-color: rgba(215, 167, 73, .55);
    color: #fff
}

.chk input {
    appearance: none;
    -webkit-appearance: none;
    width: 17px;
    height: 17px;
    flex: none;
    margin: 0;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 2px;
    position: relative;
    transition: background .25s var(--ease), border-color .25s var(--ease);
}

.chk input:checked {
    background: var(--gold-fill);
    border-color: transparent
}

.chk input:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1.5px;
    width: 5px;
    height: 9px;
    border: solid #14100A;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.chk:has(input:checked) {
    border-color: var(--gold);
    background: rgba(215, 167, 73, .1);
    color: #fff
}

.hint {
    margin: 0 0 14px;
    font-size: .75rem;
    color: rgba(255, 255, 255, .5)
}

.panel .btn {
    width: 100%;
    margin-top: 10px
}

.panel .formnote {
    color: rgba(255, 255, 255, .5)
}

.panel .formnote a {
    color: var(--gold-bright)
}

.panel .formok {
    background: rgba(215, 167, 73, .12);
    border-color: rgba(215, 167, 73, .45);
    color: var(--gold-light)
}


/* what happens next */

.steps-v {
    position: relative;
    margin-top: 6px
}

.stepv {
    display: flex;
    gap: 20px;
    padding-bottom: 30px;
    position: relative
}

.stepv:last-child {
    padding-bottom: 0
}

.stepv::before {
    content: "";
    position: absolute;
    left: 23px;
    top: 52px;
    bottom: 8px;
    width: 1px;
    background: linear-gradient(180deg, rgba(215, 167, 73, .42), rgba(215, 167, 73, .08));
}

.stepv:last-child::before {
    display: none
}

.stepv__ic {
    width: 47px;
    height: 47px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(215, 167, 73, .5);
    background: var(--ink);
    position: relative;
    z-index: 2;
    transition: background .4s var(--ease), transform .5s var(--ease-out);
}

.stepv__ic svg {
    width: 19px;
    height: 19px;
    stroke: var(--gold-bright)
}

.stepv:hover .stepv__ic {
    background: rgba(215, 167, 73, .14);
    transform: translateY(-3px)
}

.stepv b {
    display: block;
    font-size: 9.8px;
    font-weight: 600;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--gold-bright)
}

.stepv h3 {
    margin: 6px 0 7px;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 1.06rem;
    color: #fff
}

.stepv p {
    margin: 0;
    font-size: .78rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, .6)
}


/* prefer to talk card */

.talkcard {
    position: relative;
    margin-top: 26px;
    padding: 34px;
    overflow: hidden;
    border: 1px solid rgba(215, 167, 73, .3);
    border-radius: 3px;
}

.talkcard__bg {
    position: absolute;
    inset: 0;
    z-index: 0
}

.talkcard__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .38
}

.talkcard__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    /* background: linear-gradient(180deg, rgba(6, 6, 6, .9), rgba(6, 6, 6, .82)) */
}

.talkcard>* {
    position: relative;
    z-index: 2
}

.talkcard h3 {
    margin: 0 0 8px;
    font-size: .86rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--gold-bright)
}

.talkcard>p {
    margin: 0 0 22px;
    font-size: .8rem;
    color: rgba(255, 255, 255, .72)
}

.talkline {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px
}

.talkline svg {
    width: 18px;
    height: 18px;
    flex: none;
    stroke: var(--gold-bright)
}

.talkline a {
    font-size: .86rem;
    color: rgba(255, 255, 255, .88)
}

.talkline a:hover {
    color: var(--gold-bright)
}

.talkcard .btn {
    width: 100%;
    margin-top: 12px
}

@media (max-width:1080px) {
    .bookgrid {
        grid-template-columns: 1fr
    }
    .panel {
        padding: 34px
    }
}

@media (max-width:820px) {
    .checkgrid {
        grid-template-columns: 1fr
    }
    .assure {
        flex-direction: column;
        gap: 20px
    }
    .assure__it {
        max-width: 100%
    }
    .panel {
        padding: 26px
    }
}


/* ==========================================================================
   27. RESOURCES PAGE
   ========================================================================== */


/* featured article card sitting over the hero/section seam */

.featart {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    gap: 0;
    align-items: stretch;
    border: 1px solid rgba(215, 167, 73, .34);
    border-radius: 3px;
    overflow: hidden;
    background: rgba(255, 255, 255, .03);
}

.featart__media {
    position: relative;
    min-height: 290px;
    background: #111
}

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

.featart__copy {
    padding: 46px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.featart__copy h2 {
    margin: 0 0 16px;
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(1.4rem, 2.05vw, 1.85rem);
    line-height: 1.24;
    color: #fff;
}

.featart__copy p {
    margin: 0 0 26px;
    font-size: .85rem;
    line-height: 1.85;
    color: rgba(255, 255, 255, .68);
    max-width: 52ch
}

.featart .btn {
    align-self: flex-start
}


/* article grid */

.artgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 34px
}

.artcard {
    display: flex;
    flex-direction: column;
    background: var(--ivory-lift);
    border: 1px solid var(--line);
    border-radius: 2px;
    overflow: hidden;
    transition: transform .55s var(--ease-out), box-shadow .55s var(--ease-out), border-color .45s var(--ease);
}

.artcard:hover {
    transform: translateY(-7px);
    border-color: rgba(199, 155, 74, .55);
    box-shadow: 0 32px 54px -34px rgba(30, 37, 23, .42)
}

.artcard__media {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: #111
}

.artcard__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s var(--ease-out)
}

.artcard:hover .artcard__media img {
    transform: scale(1.07)
}

.artcard__body {
    padding: 24px 24px 26px;
    display: flex;
    flex-direction: column;
    flex: 1
}

.artcard__cat {
    margin: 0 0 10px;
    font-size: 9.8px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold-deep);
}

.artcard h3 {
    margin: 0 0 12px;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 1.06rem;
    line-height: 1.34;
    color: var(--charcoal);
}

.artcard p {
    margin: 0 0 20px;
    font-size: .79rem;
    line-height: 1.78;
    color: var(--body-soft);
    flex: 1
}


/* free resource band (sage) */

.freeres {
    position: relative;
    background: #4F5B3F;
    color: #fff;
    overflow: hidden
}

.freeres::after {
    content: "";
    position: absolute;
    right: -60px;
    top: -20px;
    width: 280px;
    height: 120%;
    background: url("../img/floral-ornament-a.png") right center/contain no-repeat;
    opacity: .16;
    pointer-events: none;
}

.freeres__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: 52px;
    align-items: center;
    padding-block: 56px;
}


/* the guide cover is drawn, not photographed — there is no artwork for it yet */

.guide {
    position: relative;
    aspect-ratio: 3/4;
    max-width: 230px;
    margin-inline: auto;
    display: grid;
    place-items: center;
    padding: 30px 22px;
    text-align: center;
    background: linear-gradient(155deg, #3E4831, #2C3324);
    border: 1px solid rgba(233, 215, 168, .45);
    border-radius: 2px 5px 5px 2px;
    box-shadow: 14px 18px 40px -18px rgba(0, 0, 0, .75);
}

.guide::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 11px;
    background: linear-gradient(90deg, rgba(0, 0, 0, .45), transparent)
}

.guide span {
    font-family: var(--serif);
    font-size: 1.02rem;
    line-height: 1.45;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--gold-light);
}

.guide em {
    display: block;
    margin-top: 16px;
    width: 38px;
    height: 1px;
    background: rgba(233, 215, 168, .6);
    margin-inline: auto;
}

.freeres h2 {
    margin: 0 0 14px;
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(1.4rem, 2.1vw, 1.9rem);
    color: #fff
}

.freeres>.container>.freeres__inner p {
    margin: 0 0 24px;
    font-size: .85rem;
    line-height: 1.85;
    color: rgba(255, 255, 255, .78);
    max-width: 56ch
}

.guidelist {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px 30px;
    margin-bottom: 28px
}

.guidelist li {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 18px;
    color: rgba(255, 255, 255, .88)
}

.guidelist svg {
    width: 18px;
    height: 18px;
    flex: none;
    stroke: var(--gold-light)
}


/* expert advice strip */

.advice {
    position: relative;
    background: var(--ink);
    color: #fff;
    padding-block: var(--band-pad);
    overflow: hidden
}

.advice::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../img/gatsby-tile.png");
    background-size: 320px;
    opacity: .04
}

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

.advice__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 38px
}

.advitem {
    position: relative;
    display: flex;
    gap: 16px;
    padding: 0 32px
}

.advitem:first-child {
    padding-left: 0
}

.advitem+.advitem::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(215, 167, 73, .32), transparent)
}

.advitem svg {
    width: 34px;
    height: 34px;
    flex: none;
    stroke: var(--gold-bright)
}

.advitem h3 {
    margin: 0 0 8px;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 1.02rem;
    color: var(--gold-bright)
}

.advitem p {
    margin: 0;
    font-size: .78rem;
    line-height: 1.76;
    color: rgba(255, 255, 255, .62)
}


/* real experiences slider */

.realexp {
    display: grid;
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    gap: 56px;
    align-items: center
}

.realexp__copy .rule {
    margin-bottom: 24px
}

.metarows {
    margin: 0 0 26px
}

.metarow {
    display: grid;
    grid-template-columns: 78px 1fr;
    gap: 14px;
    padding: 7px 0;
    font-size: .8rem
}

.metarow dt {
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;
    font-size: .68rem;
    color: var(--gold-deep);
    padding-top: 2px
}

.metarow dd {
    margin: 0;
    color: var(--body)
}

.expslider {
    position: relative
}

.expslider__frame {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: #111
}

.expslider__frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .6s var(--ease);
}

.expslider__frame img.is-on {
    opacity: 1
}

.expslider button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .5);
    transition: background .3s var(--ease), transform .35s var(--ease-out);
}

.expslider button:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.06)
}

.expslider svg {
    width: 17px;
    height: 17px;
    stroke: var(--charcoal)
}

.exp-prev {
    left: -22px
}

.exp-next {
    right: -22px
}


/* newsletter */

.newsletter {
    background: var(--ivory-lift);
    border-block: 1px solid var(--line);
    padding-block: 44px
}

.newsletter__inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, auto);
    gap: 28px;
    align-items: center
}

.newsletter__ic {
    width: 58px;
    height: 58px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(199, 155, 74, .5);
}

.newsletter__ic svg {
    width: 22px;
    height: 22px;
    stroke: var(--gold-deep)
}

.newsletter h2 {
    margin: 0 0 6px;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 1.28rem;
    color: var(--charcoal)
}

.newsletter p {
    margin: 0;
    font-size: .79rem;
    line-height: 1.7;
    color: var(--body-soft);
    max-width: 48ch
}

.nlform {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.nlform input {
    width: 180px;
    padding: 14px 16px;
    font-family: var(--sans);
    font-size: 18px;
    background: var(--paper);
    border: 1px solid rgba(30, 37, 23, .2);
    border-radius: 2px;
    color: var(--charcoal);
}

.nlform input:focus {
    outline: none;
    border-color: var(--gold)
}

.nlform .btn {
    --btn-h: 48px
}

.nlnote {
    margin: 12px 0 0;
    font-size: .72rem;
    color: var(--body-soft)
}

@media (max-width:1080px) {
    .featart {
        grid-template-columns: 1fr
    }
    .featart__copy {
        padding: 34px
    }
    .artgrid {
        grid-template-columns: repeat(2, 1fr)
    }
    .freeres__inner {
        grid-template-columns: 1fr;
        gap: 34px
    }
    .advice__grid {
        grid-template-columns: 1fr;
        row-gap: 30px
    }
    .advitem {
        padding: 0
    }
    .advitem+.advitem::before {
        display: none
    }
    .realexp {
        grid-template-columns: 1fr;
        gap: 34px
    }
    .exp-prev {
        left: 8px
    }
    .exp-next {
        right: 8px
    }
    .newsletter__inner {
        grid-template-columns: 1fr;
        gap: 20px
    }
}

@media (max-width:820px) {
    .artgrid {
        grid-template-columns: 1fr
    }
    .guidelist {
        grid-template-columns: 1fr
    }
    .nlform input {
        width: 100%
    }
    .nlform {
        width: 100%
    }
    .nlform .btn {
        width: 100%
    }
}


/* ==========================================================================
   28. INDUSTRIES WE SERVE PAGE
   ========================================================================== */


/* dark variant of the stats bar from the About page */

.stats--dark {
    background: var(--ink);
    position: relative;
    overflow: hidden
}

.stats--dark::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../img/gatsby-tile.png");
    background-size: 320px;
    opacity: .05
}

.stats--dark .container {
    position: relative;
    z-index: 2
}

.stats--dark .stat+.stat::before {
    background: rgba(215, 167, 73, .28)
}

.stats--dark .stat svg {
    stroke: var(--gold-bright)
}

.sector__head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 54px
}

.sector__head .lede {
    margin: 24px auto 0;
    text-align: center
}

.indgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px
}

.indcard {
    display: flex;
    flex-direction: column;
    background: var(--ivory-lift);
    border: 1px solid var(--line);
    border-radius: 2px;
    transition: transform .55s var(--ease-out), box-shadow .55s var(--ease-out), border-color .45s var(--ease);
}

.indcard:hover {
    transform: translateY(-8px);
    border-color: rgba(199, 155, 74, .55);
    box-shadow: 0 34px 56px -34px rgba(30, 37, 23, .42)
}

.indcard__media {
    position: relative;
    aspect-ratio: 16/9;
    /* overflow: hidden; */
    background: #111
}

.indcard__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s var(--ease-out);
    -webkit-transition: transform 1.1s var(--ease-out);
    -moz-transition: transform 1.1s var(--ease-out);
    -ms-transition: transform 1.1s var(--ease-out);
    -o-transition: transform 1.1s var(--ease-out);
}

.indcard:hover .indcard__media img {
    transform: scale(1.07)
}


/* the icon badge straddles the image edge, as in the mockup */

.indcard__badge {
    position: absolute;
    left: 22px;
    bottom: -21px;
    z-index: 2;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--ink);
    border: 1px solid rgba(215, 167, 73, .5);
    transition: background .45s var(--ease), transform .55s var(--ease-out);
}

.indcard__badge svg {
    width: 19px;
    height: 19px;
    stroke: var(--gold-bright);
    transition: stroke .4s var(--ease)
}

.indcard:hover .indcard__badge {
    background: var(--gold-fill);
    transform: translateY(-3px)
}

.indcard:hover .indcard__badge svg {
    stroke: #14100A
}

.indcard__body {
    padding: 38px 24px 26px;
    display: flex;
    flex-direction: column;
    flex: 1
}

.indcard__body h3 {
    margin: 0 0 12px;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 1.18rem;
    line-height: 1.26;
    color: var(--charcoal);
}

.indcard__body p {
    margin: 0 0 20px;
    font-size: .79rem;
    line-height: 1.78;
    color: var(--body-soft);
    flex: 1
}

.indcard .more {
    color: var(--gold-deep);
    font-size: 9.8px
}

.indcard .more:hover {
    color: var(--charcoal)
}


/* why partner band */

.partner {
    position: relative;
    background: var(--ink);
    color: #fff;
    padding-block: var(--band-pad);
    overflow: hidden
}

.partner::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../img/gatsby-tile.png");
    background-size: 320px;
    opacity: .045
}

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

.partner__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin-top: 44px
}

.partneritem {
    position: relative;
    padding: 0 24px;
    text-align: center
}

.partneritem+.partneritem::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(215, 167, 73, .3), transparent)
}

.partneritem svg {
    width: 34px;
    height: 34px;
    margin: 0 auto 15px;
    stroke: var(--gold-bright);
    transition: transform .6s var(--ease-out)
}

.partneritem:hover svg {
    transform: translateY(-5px)
}

.partneritem h3 {
    margin: 0 0 10px;
    font-size: .8rem;
    font-weight: 600;
    color: #fff
}

.partneritem p {
    margin: 0;
    font-size: 16px;
    line-height: 1.76;
    color: rgba(255, 255, 255, .6)
}

@media (max-width:1080px) {
    .indgrid {
        grid-template-columns: repeat(2, 1fr)
    }
    .partner__grid {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 40px
    }
    .partneritem:nth-child(3n+1)::before {
        display: none
    }
}

@media (max-width:820px) {
    .indgrid {
        grid-template-columns: 1fr
    }
    .partner__grid {
        grid-template-columns: 1fr;
        row-gap: 36px
    }
    .partneritem {
        padding: 0
    }
    .partneritem+.partneritem::before {
        display: none
    }
}


/* ==========================================================================
   29. THE B.A.E. EXPERIENCE PAGE
   ========================================================================== */


/* the wordmark hero: initials set large, script tagline beneath */

.baemark {
    margin: 0;
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(3.4rem, 7.4vw, 6.4rem);
    line-height: .94;
    letter-spacing: .02em;
    color: var(--gold-bright);
}

.baescript {
    margin: 10px 0 0;
    font-family: "Great Vibes", "Playfair Display", cursive;
    font-size: clamp(1.7rem, 3.1vw, 2.6rem);
    line-height: 1.2;
    color: #fff;
}

.hero--bae .rule {
    margin-top: 26px
}

.hero--bae .lede {
    margin-top: 26px;
    max-width: 34ch
}


/* solid dark button used for "Meet our team" */

.btn-dark {
    background: var(--charcoal);
    color: #fff
}

.btn-dark:hover {
    background: var(--ink);
    transform: translateY(-3px);
    box-shadow: 0 16px 32px -18px rgba(0, 0, 0, .6)
}


/* story collage — right column dropped for the offset in the mockup */

.baecollage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    align-items: start
}

.baecollage figure {
    overflow: hidden;
    background: #111
}

.baecollage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.15s var(--ease-out)
}

.baecollage figure:hover img {
    transform: scale(1.07)
}

.baecollage .b1 {
    aspect-ratio: 1.28
}

.baecollage .b2 {
    aspect-ratio: 1.5
}

.baecollage .b3 {
    aspect-ratio: 1.32
}

.baecollage .b4 {
    aspect-ratio: 1.16
}

.baecollage__col {
    display: grid;
    gap: 15px
}

.baecollage__col--drop {
    margin-top: 34px
}


/* proven process */

.process {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-top: 56px
}

.pstep {
    position: relative;
    padding: 0 22px
}

.pstep__media {
    position: relative;
    aspect-ratio: 1.24;
    overflow: hidden;
    background: #111
}

.pstep__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s var(--ease-out)
}

.pstep:hover .pstep__media img {
    transform: scale(1.07)
}

.pstep__num {
    /* positioned against .pstep, not .pstep__media — the media box clips its
     overflow, which sliced the top half of the badge off */
    position: absolute;
    left: 50%;
    top: -19px;
    z-index: 3;
    transform: translateX(-50%);
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--ink);
    border: 1px solid rgba(215, 167, 73, .55);
    font-family: var(--serif);
    font-size: .9rem;
    color: var(--gold-bright);
    transition: background .45s var(--ease), color .45s var(--ease), transform .5s var(--ease-out);
}

.pstep:hover .pstep__num {
    background: var(--gold-fill);
    color: #14100A;
    transform: translateX(-50%) translateY(-3px)
}

.pstep h3 {
    margin: 26px 0 10px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--charcoal);
}

.pstep p {
    margin: 0;
    font-size: .79rem;
    line-height: 1.8;
    color: var(--body-soft)
}


/* the connector arrow sits in the gutter between steps */

.pstep+.pstep::before {
    content: "";
    position: absolute;
    left: -9px;
    top: 74px;
    width: 18px;
    height: 18px;
    background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C79B4A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
}


/* by the numbers, over a photograph */

.numbers {
    position: relative;
    background: var(--ink);
    color: #fff;
    overflow: hidden
}

.numbers__media {
    position: absolute;
    inset: 0
}

.numbers__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .34
}

.numbers__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(5, 5, 5, .95), rgba(5, 5, 5, .72) 55%, rgba(5, 5, 5, .86))
}

.numbers .container {
    position: relative;
    z-index: 2;
    padding-block: 52px
}

.numbers .stats__grid {
    margin-top: 26px
}

.numbers .stat {
    justify-content: flex-start;
    gap: 18px;
    /* padding-left: 0 */
}

.numbers .stat+.stat::before {
    background: rgba(215, 167, 73, .3)
}

.numbers .stat svg {
    stroke: var(--gold-bright);
    width: 38px;
    height: 38px
}

.numbers .stat b {
    font-size: 2.15rem
}


/* closing CTA with the oversized gold word */

.bigcta .h2 {
    font-size: clamp(2rem, 4.2vw, 3.5rem);
    letter-spacing: .02em;
    text-transform: uppercase
}

@media (max-width:1080px) {
    .process {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 44px
    }
    .pstep:nth-child(3)::before {
        display: none
    }
    .baecollage__col--drop {
        margin-top: 0
    }
}

@media (max-width:820px) {
    .process {
        grid-template-columns: 1fr;
        row-gap: 38px
    }
    .pstep {
        padding: 0
    }
    .pstep+.pstep::before {
        display: none
    }
    .baecollage {
        grid-template-columns: 1fr
    }
    .numbers .stat {
        padding-left: 0
    }
}


/* ==========================================================================
   30. HOME — REVISED SECTIONS
   ========================================================================== */


/* --- Who we are: arched collage with the seal ---------------------------- */

.whoarch {
    display: grid;
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    gap: 78px;
    align-items: center
}

.whoarch__copy .rule {
    margin-bottom: 28px
}

.whoarch__copy p {
    margin: 0 0 18px;
    font-size: .86rem;
    line-height: 1.92;
    max-width: 44ch;
    color: var(--body)
}

.whoarch__copy p:last-of-type {
    margin-bottom: 32px
}

.archset {
    position: relative;
    padding: 26px 0 30px
}

.archset__grid {
    display: grid;
    grid-template-columns: 1.02fr 1.18fr;
    grid-template-rows: auto auto;
    gap: 16px;
    align-items: end;
}

.archset figure {
    overflow: hidden;
    background: #111;
    position: relative
}

.archset img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.2s var(--ease-out)
}

.archset figure:hover img {
    transform: scale(1.06)
}


/* the small arch, top left */

.archset .a1 {
    grid-column: 1;
    grid-row: 1;
    aspect-ratio: 1.14;
    border-radius: 150px 150px 6px 6px;
    margin-bottom: 6px;
}


/* the tall rounded panel on the right spans both rows */

.archset .a2 {
    grid-column: 2;
    grid-row: 1 / span 2;
    aspect-ratio: .78;
    border-radius: 170px 170px 6px 6px;
}


/* the wide plate bottom left */

.archset .a3 {
    grid-column: 1;
    grid-row: 2;
    aspect-ratio: 1.5;
    border-radius: 6px
}


/* hairline arc + dotted field, the quiet decoration from the reference */

.archset::before {
    content: "";
    position: absolute;
    left: 12%;
    top: 0;
    width: 62%;
    aspect-ratio: 1;
    border: 1px solid rgba(199, 155, 74, .4);
    border-radius: 50% 50% 0 0;
    border-bottom: 0;
    pointer-events: none;
}

.archset::after {
    content: "";
    position: absolute;
    right: -14px;
    top: 8%;
    width: 104px;
    height: 120px;
    background-image: radial-gradient(rgba(199, 155, 74, .5) 1.2px, transparent 1.2px);
    background-size: 13px 13px;
    pointer-events: none;
}


/* the seal sitting over the collage seam */

.seal {
    position: absolute;
    left: 56%;
    bottom: 34px;
    z-index: 3;
    transform: translateX(-50%);
    width: 132px;
    height: 132px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 16px;
    background: radial-gradient(circle at 50% 35%, #26301C, #141A0F);
    border: 1px solid rgba(215, 167, 73, .6);
    box-shadow: 0 22px 46px -20px rgba(0, 0, 0, .75);
}

.seal span {
    font-size: 8.4px;
    font-weight: 600;
    letter-spacing: .15em;
    line-height: 1.85;
    text-transform: uppercase;
    color: var(--gold-bright);
}

.seal svg {
    width: 22px;
    height: 22px;
    margin: 7px auto 0;
    stroke: var(--gold-bright)
}


/* --- Signature services on dark ----------------------------------------- */

.svcdark {
    position: relative;
    background: #0B0E09;
    color: #fff;
    padding-block: var(--section-gap);
    overflow: hidden;
}

.svcdark::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../img/gatsby-tile.png");
    background-size: 340px;
    opacity: .05;
}


/* soft foliage-like wash in the top corners, no artwork needed */

.svcdark::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(58% 46% at 96% 2%, rgba(79, 91, 63, .55), transparent 70%), radial-gradient(42% 34% at 2% 8%, rgba(79, 91, 63, .3), transparent 72%);
}

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

.svcdark__head {
    max-width: 640px;
    margin-bottom: 52px
}

.svcdark__head .h2 {
    color: #fff
}

.svcdark__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px
}

.svcdark__grid--three {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 18px
}

.dcard {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 30px 26px 26px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 3px;
    overflow: hidden;
    transition: transform .55s var(--ease-out), border-color .45s var(--ease), background .45s var(--ease), box-shadow .55s var(--ease-out);
}

.dcard::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(215, 167, 73, .16), transparent 46%);
    opacity: 0;
    transition: opacity .5s var(--ease);
}

.dcard:hover {
    transform: translateY(-8px);
    border-color: rgba(215, 167, 73, .55);
    background: rgba(255, 255, 255, .05);
    box-shadow: 0 34px 56px -32px rgba(0, 0, 0, .9);
}

.dcard:hover::before {
    opacity: 1
}

.dcard>* {
    position: relative;
    z-index: 2
}

.dcard__ic {
    width: 32px;
    height: 32px;
    stroke: var(--gold-bright);
    margin-bottom: 22px;
    transition: transform .55s var(--ease-out)
}

.dcard:hover .dcard__ic {
    transform: translateY(-3px) scale(1.06)
}

.dcard__n {
    display: block;
    margin-bottom: 8px;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .18em;
    color: rgba(215, 167, 73, .7);
}

.dcard h3 {
    margin: 0 0 12px;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 1.1rem;
    line-height: 1.28;
    color: #fff;
}

.dcard p {
    margin: 0 0 22px;
    font-size: .78rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, .62);
    flex: 1
}

.dcard .more {
    color: var(--gold-bright);
    font-size: 9.8px
}

.dcard .more:hover {
    color: #fff
}


/* --- Why clients choose us: reason switcher ----------------------------- */

.reasons {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    gap: 64px;
    align-items: start
}

.reasons__head {
    margin-bottom: 34px
}

.reasonlist {
    display: grid
}

.reason {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 22px;
    align-items: baseline;
    width: 100%;
    text-align: left;
    padding: 22px 0;
    border-top: 1px solid rgba(30, 37, 23, .12);
    cursor: pointer;
}

.reason:last-child {
    border-bottom: 1px solid rgba(30, 37, 23, .12)
}

.reason__n {
    font-family: var(--serif);
    font-size: .9rem;
    line-height: 1;
    color: var(--body-soft);
    transition: color .4s var(--ease);
}

.reason__t {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.05rem, 1.62vw, 1.44rem);
    line-height: 1.32;
    color: var(--body-soft);
    transition: color .4s var(--ease), transform .5s var(--ease-out);
}


/* the gold rail that fills across the active row */

.reason::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 2px;
    width: 0;
    background: var(--gold-fill);
    transition: width .55s var(--ease-out);
}

.reason[aria-selected="true"]::after {
    width: 100%
}

.reason[aria-selected="true"] .reason__n {
    color: var(--gold-deep)
}

.reason[aria-selected="true"] .reason__t {
    color: var(--charcoal);
    transform: translateX(5px)
}

.reason:hover .reason__t {
    color: var(--charcoal)
}

.reasons__stage {
    position: relative;
    aspect-ratio: .86;
    overflow: hidden;
    background: #111;
    border-radius: 3px
}

.reasons__stage img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity .7s var(--ease), transform 1.2s var(--ease-out);
}

.reasons__stage img.is-on {
    opacity: 1;
    transform: scale(1)
}

.reasons__stage::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(0deg, rgba(5, 5, 5, .5), transparent 42%);
}

.reasons__cap {
    position: absolute;
    left: 26px;
    right: 26px;
    bottom: 22px;
    z-index: 2;
    font-size: .78rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #fff;
}

.reasons__count {
    position: absolute;
    right: 22px;
    top: 20px;
    z-index: 2;
    font-family: var(--serif);
    font-size: 2.3rem;
    line-height: 1;
    color: rgba(255, 255, 255, .55);
}

@media (max-width:1080px) {
    .whoarch {
        grid-template-columns: 1fr;
        gap: 48px
    }
    .svcdark__grid {
        grid-template-columns: repeat(2, 1fr)
    }
    .svcdark__grid--three {
        grid-template-columns: repeat(2, 1fr)
    }
    .reasons {
        grid-template-columns: 1fr;
        gap: 40px
    }
    .reasons__stage {
        aspect-ratio: 1.5
    }
}

@media (max-width:820px) {
    .archset__grid {
        grid-template-columns: 1fr;
        gap: 14px
    }
    .archset .a1,
    .archset .a2,
    .archset .a3 {
        grid-column: 1;
        aspect-ratio: 1.3
    }
    .archset .a2 {
        grid-row: auto;
        border-radius: 150px 150px 6px 6px
    }
    .archset::before,
    .archset::after {
        display: none
    }
    .seal {
        left: auto;
        right: 14px;
        bottom: auto;
        top: -14px;
        transform: none;
        width: 104px;
        height: 104px;
        padding: 12px
    }
    .seal span {
        font-size: 7.2px
    }
    .svcdark__grid,
    .svcdark__grid--three {
        grid-template-columns: 1fr
    }
    .reason {
        gap: 14px;
        padding: 18px 0
    }
}


/* ==========================================================================
   31. HOME — RESOURCES BAND (rebuilt)
   ========================================================================== */

.resources {
    padding-block: var(--section-gap)
}

.resources__head {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 62px
}

.resources__head .h2 {
    font-size: clamp(1.5rem, 2.3vw, 2.05rem)
}


/* two slow drifting washes behind the pattern */

.aurora {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    width: 52vw;
    aspect-ratio: 1;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .5;
    background: radial-gradient(circle, rgba(199, 155, 74, .34), transparent 66%);
    left: -8%;
    top: -22%;
    animation: drift 26s ease-in-out infinite alternate;
}

.aurora--b {
    left: auto;
    right: -12%;
    top: auto;
    bottom: -28%;
    background: radial-gradient(circle, rgba(79, 91, 63, .6), transparent 68%);
    animation-duration: 34s;
    animation-direction: alternate-reverse;
}

@keyframes drift {
    from {
        transform: translate3d(0, 0, 0) scale(1)
    }
    to {
        transform: translate3d(9%, 7%, 0) scale(1.18)
    }
}

.rgrid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px
}

.rtile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 38px 22px 30px;
    border: 1px solid rgba(215, 167, 73, .16);
    border-radius: 4px;
    background: rgba(255, 255, 255, .02);
    overflow: hidden;
    transition: transform .55s var(--ease-out), border-color .45s var(--ease), background .45s var(--ease), box-shadow .55s var(--ease-out);
}


/* gold sweep that crosses the tile on hover */

.rtile::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 34%, rgba(233, 215, 168, .16) 50%, transparent 66%);
    transform: translateX(-120%);
}

.rtile:hover,
.rtile:focus-visible {
    transform: translateY(-10px);
    border-color: rgba(215, 167, 73, .6);
    background: rgba(255, 255, 255, .05);
    box-shadow: 0 34px 58px -30px rgba(0, 0, 0, .85);
}

.rtile:hover::after {
    animation: sweep .9s var(--ease-out) forwards
}

@keyframes sweep {
    to {
        transform: translateX(120%)
    }
}


/* the ring draws itself when the tile reveals */

.rtile__ring {
    position: relative;
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    margin-bottom: 22px
}

.rtile__ring>svg:first-child {
    position: absolute;
    inset: 0;
    width: 72px;
    height: 72px;
    transform: rotate(-90deg)
}

.rtile__ring circle {
    fill: none;
    stroke: rgba(215, 167, 73, .55);
    stroke-width: 1;
    stroke-dasharray: 252;
    stroke-dashoffset: 252;
}

.rtile.is-in .rtile__ring circle {
    animation: draw 1.15s var(--ease-out) forwards;
    animation-delay: calc(var(--d, 0ms) + 120ms);
}

@keyframes draw {
    to {
        stroke-dashoffset: 0
    }
}

.rtile:hover .rtile__ring circle {
    stroke: var(--gold-bright);
    stroke-width: 1.4
}

.rtile__ic {
    width: 26px;
    height: 26px;
    stroke: var(--gold-bright);
    transition: transform .6s var(--ease-out);
}

.rtile:hover .rtile__ic {
    transform: rotate(-8deg) scale(1.14)
}

.rtile h3 {
    margin: 0 0 10px;
    font-family: var(--sans);
    font-size: .87rem;
    font-weight: 600;
    color: var(--gold-bright);
    transition: color .35s var(--ease);
}

.rtile p {
    margin: 0;
    font-size: .78rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, .6)
}

.rtile__go {
    margin-top: 18px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(215, 167, 73, .4);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .4s var(--ease), transform .45s var(--ease-out), background .35s var(--ease);
}

.rtile__go svg {
    width: 14px;
    height: 14px;
    stroke: var(--gold-bright)
}

.rtile:hover .rtile__go,
.rtile:focus-visible .rtile__go {
    opacity: 1;
    transform: none;
    background: rgba(215, 167, 73, .16);
}

@media (max-width:1080px) {
    .rgrid {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media (max-width:820px) {
    .rgrid {
        grid-template-columns: 1fr
    }
    .aurora {
        filter: blur(60px)
    }
}

@media (prefers-reduced-motion:reduce) {
    .aurora {
        animation: none
    }
    .rtile__ring circle {
        stroke-dashoffset: 0;
        animation: none
    }
    .rtile::after {
        display: none
    }
}


/* ==========================================================================
   32. HOME — FOUR REDESIGNED SECTIONS
   Each gets one distinct motion idea rather than the same fade everywhere:
     hero      line-by-line clip reveal
     trusted   opposing marquees
     journey   scroll-linked progress rail
     cta       parallax plate + shimmering wordmark
   ========================================================================== */


/* --- 1. HERO ------------------------------------------------------------ */

.hero--home .hero__inner {
    max-width: none;
    padding: 170px 0
}

.hero--home .h1 {
    max-width: 15ch
}


/* each line sits in its own clipping box and slides up from beneath it */

.kline {
    display: block;
    overflow: hidden
}

.kline>span {
    display: block;
    transform: translateY(110%) rotate(2.5deg);
    transform-origin: left bottom;
}

.hero.is-ready .kline>span {
    transform: none;
    transition: transform 1.15s cubic-bezier(.2, .8, .25, 1);
    transition-delay: calc(var(--k, 0) * 130ms + 260ms);
}

.herolead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 540px);
    gap: 56px;
    align-items: end;
    margin-top: 38px;
}

.hero--home .lede {
    max-width: 44ch;
    margin: 0
}


/* glass credential bar pinned to the foot of the hero */

.herobar {
    position: relative;
    z-index: 4;
    margin-top: 64px;
    display: grid;
    grid-template-columns: repeat(3, 1fr) auto;
    gap: 0;
    background: rgba(255, 255, 255, .06);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, .14);
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
    overflow: hidden;
}

.herobar__it {
    position: relative;
    padding: 24px 30px
}

.herobar__it+.herobar__it::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18px;
    bottom: 18px;
    width: 1px;
    background: rgba(255, 255, 255, .14);
}

.herobar__it b {
    display: block;
    font-family: var(--serif);
    font-size: 1.5rem;
    line-height: 1;
    color: #fff;
}

.herobar__it span {
    display: block;
    margin-top: 6px;
    font-size: .72rem;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .62);
}


/* .herobar__it span is (0,1,1) and was overriding .stars (0,1,0) to
   display:block, stacking the five stars vertically. Scope it up. */

.herobar__it .stars {
    display: inline-flex;
    margin: 0 0 6px;
    text-transform: none;
    letter-spacing: normal
}

.herobar__cta {
    display: grid;
    place-items: center;
    padding: 0
}

.herobar__cta .btn {
    height: 100%;
    border-radius: 0;
    padding-inline: 38px
}


/* --- 2. TRUSTED BY — opposing marquees ---------------------------------- */

.trusted--dual {
    background: var(--ivory);
    padding-block: 62px
}

.trusted--dual .marquee+.marquee {
    margin-top: 14px
}

.marquee__track--rev {
    animation-direction: reverse
}

.trusted--dual .marquee__item {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    font-size: 1.08rem;
    color: rgba(17, 17, 17, .34);
}

.trusted--dual .marquee__item::after {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(199, 155, 74, .55);
}

.trusted--dual .marquee__item:hover {
    color: var(--gold-deep)
}

.trusted--dual .marquee:hover .marquee__track {
    animation-play-state: paused
}


/* --- 3. JOURNEY — scroll-linked rail ------------------------------------ */

.journey {
    position: relative;
    background: var(--ink);
    color: #fff;
    padding-block: var(--section-gap);
    overflow: hidden;
}

.journey::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../img/gatsby-tile.png");
    background-size: 340px;
    opacity: .05;
}

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

.journey__head {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 66px
}

.jwrap {
    position: relative
}


/* the rail runs behind the steps and fills as the section scrolls past */

.jrail {
    position: absolute;
    left: 0;
    right: 0;
    top: 33px;
    height: 2px;
    background: rgba(255, 255, 255, .1);
}

.jrail__fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--p, 0) * 100%);
    background: var(--gold-fill);
    transition: width .18s linear;
}

.jsteps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
    position: relative;
    z-index: 2
}

.jstep {
    text-align: center;
    padding: 0 12px
}

.jstep__dot {
    width: 66px;
    height: 66px;
    margin: 0 auto 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--ink);
    border: 1px solid rgba(215, 167, 73, .4);
    font-family: var(--serif);
    font-size: 1rem;
    color: var(--gold-bright);
    transition: background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease), transform .55s var(--ease-out);
}


/* the dot lights up once the rail has swept past it */

.jstep.is-lit .jstep__dot {
    background: var(--gold-fill);
    color: #14100A;
    border-color: transparent;
    transform: translateY(-4px);
}

.jstep h3 {
    margin: 0 0 10px;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 1.22rem;
    color: #fff
}

.jstep p {
    margin: 0;
    font-size: .8rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, .6);
    max-width: 28ch;
    margin-inline: auto
}


/* --- 4. CTA — parallax plate + shimmering wordmark ---------------------- */

.cta--kinetic {
    position: relative;
    background: var(--ink);
    overflow: hidden
}

.cta--kinetic .cta__media {
    inset: -12% 0
}

.cta--kinetic .cta__media img {
    width: 100%;
    height: 124%;
    object-fit: cover;
    transform: translate3d(0, var(--par, 0px), 0);
    will-change: transform;
}

.cta--kinetic .cta__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(4, 4, 4, .9), rgba(4, 4, 4, .55) 45%, rgba(4, 4, 4, .85));
}

.cta--kinetic .cta__inner {
    max-width: 960px;
    margin-inline: auto;
    padding-block: 110px;
    text-align: center;
    display: block;
}

.ctaword {
    margin: 14px 0 0;
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(2.4rem, 6.2vw, 5rem);
    line-height: 1;
    letter-spacing: .01em;
    text-transform: uppercase;
    background: linear-gradient(100deg, #A9772A 0%, #C79B4A 22%, #F3E6BD 42%, #C79B4A 62%, #A9772A 88%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: shimmer 7s linear infinite;
}

@keyframes shimmer {
    to {
        background-position: 220% 0
    }
}

.cta--kinetic .lede {
    margin: 26px auto 0;
    max-width: 52ch;
    text-align: center
}

.cta--kinetic .btn-row {
    justify-content: center;
    margin-top: 36px
}

@media (max-width:1080px) {
    .herolead {
        grid-template-columns: 1fr;
        gap: 26px
    }
    .herobar {
        grid-template-columns: repeat(3, 1fr)
    }
    .herobar__cta {
        grid-column: 1 / -1;
        padding: 0
    }
    .herobar__cta .btn {
        width: 100%;
        height: 56px
    }
    .jsteps {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 48px
    }
    .jrail {
        display: none
    }
}

@media (max-width:820px) {
    .hero--home .hero__inner {
        padding: 132px 0
    }
    .herobar {
        grid-template-columns: 1fr
    }
    .herobar__it+.herobar__it::before {
        left: 22px;
        right: 22px;
        top: 0;
        bottom: auto;
        width: auto;
        height: 1px
    }
    .jsteps {
        grid-template-columns: 1fr
    }
    .cta--kinetic .cta__inner {
        padding-block: 78px
    }
}

@media (prefers-reduced-motion:reduce) {
    .kline>span {
        transform: none
    }
    .ctaword {
        animation: none
    }
    .cta--kinetic .cta__media img {
        transform: none
    }
    .jrail__fill {
        width: 100%
    }
}


/* ==========================================================================
   33. LARGER LOGO + TALLER HEADER
   ========================================================================== */

.header-inner {
    height: 118px;
    justify-content: space-between;
}

.brand img {
    width: 100px;
    height: 100px
}

.nav-link {
    font-size: 12px;
    letter-spacing: .1em
}

.header-inner .btn-sm {
    --btn-h: 50px;
    font-size: 12px
}

.hero--home .hero__inner {
    padding: 206px 0
}

.hero--inner .hero__inner {
    padding-block: 196px 108px
}

.site-header.is-stuck .header-inner {
    height: 96px
}

.site-header.is-stuck .brand img {
    width: 76px;
    height: 76px
}

.header-inner,
.brand img {
    transition: height .4s var(--ease), width .4s var(--ease)
}

@media (max-width:1280px) {
    .brand img {
        width: 78px;
        height: 78px
    }
    .header-inner {
        height: 104px
    }
    .nav-link {
        font-size: 11px
    }
}

@media (max-width:1080px) {
    .brand img {
        width: 68px;
        height: 68px
    }
    .header-inner {
        height: 94px
    }
    .hero--home .hero__inner {
        padding: 168px 0
    }
    .hero--inner .hero__inner {
        padding-block: 164px 92px
    }
}

@media (max-width:820px) {
    .brand img {
        width: 58px;
        height: 58px
    }
    .header-inner {
        height: 80px
    }
    .site-header.is-stuck .brand img {
        width: 52px;
        height: 52px
    }
    .site-header.is-stuck .header-inner {
        height: 74px
    }
}


/* ==========================================================================
   34. SIGNATURE SERVICES — editorial restructure
   Type is set in px here at the client's request. Note this stops the block
   scaling with the reader's browser font-size setting; the rest of the
   stylesheet still uses rem.
   ========================================================================== */

.svcdark {
    padding-block: 150px
}

.svcdark .container {
    padding-inline: 150px
}


/* wider side margins */

.svcdark__lead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
    gap: 60px;
    align-items: end;
    margin-bottom: 70px;
}

.svcdark__lead .eyebrow {
    font-size: 14px;
    letter-spacing: .2em;
    margin-bottom: 22px
}

.svcdark__lead .h2 {
    font-size: 56px;
    line-height: 1.08
}

.svcdark__lead p {
    margin: 0;
    font-size: 16px;
    line-height: 1.9;
    color: rgba(255, 255, 255, .62)
}


/* staggered editorial grid: 12 columns, cards of differing span and offset */

.svcedit {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px
}

.ecard {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 252px;
    padding: 30px 30px 28px;
    overflow: hidden;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 4px;
    transition: transform .6s var(--ease-out), border-color .45s var(--ease), background .45s var(--ease), box-shadow .6s var(--ease-out);
}

.ecard:nth-child(1) {
    grid-column: span 5
}

.ecard:nth-child(2) {
    grid-column: span 4
}

.ecard:nth-child(3) {
    grid-column: span 3
}

.ecard:nth-child(4) {
    grid-column: span 3;
    margin-top: -46px
}

.ecard:nth-child(5) {
    grid-column: span 5;
    margin-top: -46px
}

.ecard:nth-child(6) {
    grid-column: span 4;
    margin-top: -46px
}

.ecard:nth-child(7) {
    grid-column: span 12;
    min-height: 220px;
    flex-direction: row;
    align-items: flex-end;
    gap: 56px
}

.ecard:nth-child(7) .ecard__body {
    flex: 1
}


/* the oversized ghost number behind each card */

.ecard__ghost {
    position: absolute;
    right: -10px;
    top: -34px;
    z-index: 0;
    font-family: var(--serif);
    font-size: 140px;
    line-height: 1;
    font-weight: 500;
    color: rgba(255, 255, 255, .035);
    transition: color .55s var(--ease), transform .7s var(--ease-out);
    pointer-events: none;
}

.ecard:hover .ecard__ghost {
    color: rgba(215, 167, 73, .11);
    transform: translateY(6px)
}

.ecard>* {
    position: relative;
    z-index: 2
}

.ecard__ic {
    width: 38px;
    height: 38px;
    stroke: var(--gold-bright);
    margin-bottom: auto;
    transition: transform .6s var(--ease-out)
}

.ecard:hover .ecard__ic {
    transform: translateY(-4px) rotate(-6deg)
}

.ecard h3 {
    margin: 26px 0 12px;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 26px;
    line-height: 1.2;
    color: #fff;
}

.ecard p {
    margin: 0 0 22px;
    font-size: 16px;
    line-height: 1.8;
    color: rgba(255, 255, 255, .6)
}

.ecard .more {
    font-size: 12px;
    letter-spacing: .16em;
    color: var(--gold-bright)
}

.ecard .more svg {
    width: 18px;
    height: 18px
}

.ecard:hover {
    transform: translateY(-10px);
    border-color: rgba(215, 167, 73, .55);
    background: rgba(255, 255, 255, .055);
    box-shadow: 0 40px 64px -34px rgba(0, 0, 0, .9);
}


/* a gold hairline that draws along the top edge on hover */

.ecard::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 2px;
    width: 0;
    z-index: 3;
    background: var(--gold-fill);
    transition: width .6s var(--ease-out);
}

.ecard:hover::before {
    width: 100%
}


/* ==========================================================================
   35. RESOURCES BAND — staggered rail
   ========================================================================== */

.resources {
    padding-block: 150px
}

.resources .container {
    padding-inline: 150px
}

.resources__head {
    max-width: 760px;
    margin: 0 auto 78px
}

.resources__head .eyebrow {
    font-size: 14px;
    letter-spacing: .2em
}

.resources__head .h2 {
    font-size: 48px;
    line-height: 1.14
}

.rrail {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px
}


/* the hairline the tiles hang from */

.rrail::before {
    content: "";
    position: absolute;
    left: 6%;
    right: 6%;
    top: 96px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(215, 167, 73, .4) 12%, rgba(215, 167, 73, .4) 88%, transparent);
}

.rtile {
    position: relative;
    z-index: 2;
    padding: 34px 24px 26px;
    background: rgba(10, 13, 9, .86);
}

.rrail .rtile {
    justify-content: flex-start
}


/* alternate tiles drop below the rail */

.rrail .rtile:nth-child(even) {
    margin-top: 66px
}

.rtile__num {
    position: absolute;
    left: 22px;
    top: 18px;
    font-family: var(--serif);
    font-size: 14px;
    letter-spacing: .1em;
    color: rgba(215, 167, 73, .55);
}

.rtile h3 {
    font-size: 18px
}

.rtile p {
    font-size: 14px;
    line-height: 1.8
}

.rtile__ring {
    width: 84px;
    height: 84px
}

.rtile__ring>svg:first-child {
    width: 84px;
    height: 84px
}

.rtile__ic {
    width: 30px;
    height: 30px
}

@media (max-width:1280px) {
    .svcdark .container,
    .resources .container {
        padding-inline: 88px
    }
    .svcdark__lead .h2 {
        font-size: 46px
    }
    .resources__head .h2 {
        font-size: 40px
    }
    .ecard__ghost {
        font-size: 130px
    }
}

@media (max-width:1080px) {
    .svcdark .container,
    .resources .container {
        padding-inline: var(--gutter)
    }
    .svcdark__lead {
        grid-template-columns: 1fr;
        gap: 26px
    }
    .svcdark__lead .h2 {
        font-size: 38px
    }
    .ecard:nth-child(n) {
        grid-column: span 6;
        margin-top: 0
    }
    .ecard:nth-child(7) {
        grid-column: span 12;
        flex-direction: column;
        align-items: flex-start;
        gap: 0
    }
    .rrail {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px
    }
    .rrail::before {
        display: none
    }
    .rrail .rtile:nth-child(even) {
        margin-top: 0
    }
    .resources__head .h2 {
        font-size: 34px
    }
}

@media (max-width:820px) {
    .svcdark,
    .resources {
        padding-block: 110px
    }
    .ecard:nth-child(n) {
        grid-column: span 12;
        min-height: 0
    }
    .ecard h3 {
        font-size: 22px
    }
    .svcdark__lead .h2 {
        font-size: 30px
    }
    .resources__head .h2 {
        font-size: 28px
    }
    .rrail {
        grid-template-columns: 1fr
    }
    .ecard__ghost {
        font-size: 100px
    }
}


/* ==========================================================================
   36. SIGNATURE SERVICES + RESOURCES — light, glass, gradient
   Replaces the dark treatments. Type stays in px per the client's request.
   ========================================================================== */

.lightsec {
    position: relative;
    overflow: hidden;
    padding-block: 150px;
    background: radial-gradient(120% 78% at 88% 6%, rgba(199, 155, 74, .13), transparent 58%), radial-gradient(96% 64% at 4% 96%, rgba(79, 91, 63, .12), transparent 62%), linear-gradient(168deg, #FBFAF7 0%, #F5F2ED 46%, #EFEBE2 100%);
}

.lightsec .container {
    position: relative;
    z-index: 3;
    padding-inline: 150px
}


/* the gold line-art florals, held to the edges */

.leaf {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    user-select: none;
    opacity: .4
}

.leaf img {
    width: 100%;
    height: auto;
    display: block
}

.leaf--r {
    right: -70px;
    top: 4%;
    width: 300px
}

.leaf--l {
    left: -96px;
    bottom: -4%;
    width: 340px;
    transform: scaleX(-1)
}


/* a hairline grid, very faint, to give the flat ground some structure */

.lightsec::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .5;
    background-image: linear-gradient(rgba(30, 37, 23, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(30, 37, 23, .045) 1px, transparent 1px);
    background-size: 88px 88px;
    -webkit-mask-image: radial-gradient(120% 84% at 50% 40%, #000, transparent 78%);
    mask-image: radial-gradient(120% 84% at 50% 40%, #000, transparent 78%);
}

.lightsec__lead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
    gap: 64px;
    align-items: end;
    margin-bottom: 64px;
}

.lightsec__lead .eyebrow {
    font-size: 14px;
    letter-spacing: .2em;
    margin-bottom: 20px
}

.lightsec__lead .h2 {
    font-size: 52px;
    line-height: 1.12;
    color: var(--charcoal)
}

.lightsec__lead p {
    margin: 0;
    font-size: 16px;
    line-height: 1.9;
    color: var(--body-soft)
}

.lightsec__lead--center {
    grid-template-columns: 1fr;
    text-align: center;
    max-width: 760px;
    margin-inline: auto
}

.lightsec__lead--center p {
    margin-inline: auto;
    max-width: 52ch
}


/* --- the glass card ----------------------------------------------------- */

.gcard {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 34px 30px 30px;
    overflow: hidden;
    border-radius: 6px;
    background: linear-gradient(150deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .52));
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, .85);
    box-shadow: 0 18px 44px -26px rgba(30, 37, 23, .3), inset 0 1px 0 rgba(255, 255, 255, .9);
    transition: transform .55s var(--ease-out), box-shadow .55s var(--ease-out), border-color .45s var(--ease);
}


/* gold rim that fades in on hover */

.gcard::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 6px;
    pointer-events: none;
    padding: 1px;
    background: linear-gradient(140deg, rgba(199, 155, 74, .85), rgba(199, 155, 74, 0) 46%, rgba(199, 155, 74, .55));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .5s var(--ease);
}

.gcard:hover {
    transform: translateY(-10px);
    box-shadow: 0 40px 68px -32px rgba(30, 37, 23, .34), inset 0 1px 0 rgba(255, 255, 255, .95);
}

.gcard:hover::before {
    opacity: 1
}

.gcard__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 26px
}

.gcard__ic {
    width: 56px;
    height: 56px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(199, 155, 74, .2), rgba(199, 155, 74, .05));
    border: 1px solid rgba(199, 155, 74, .4);
    transition: background .5s var(--ease), transform .6s var(--ease-out);
}

.gcard__ic svg {
    width: 24px;
    height: 24px;
    stroke: var(--gold-deep);
    transition: stroke .4s var(--ease)
}

.gcard:hover .gcard__ic {
    background: var(--gold-fill);
    transform: translateY(-3px) rotate(-6deg)
}

.gcard:hover .gcard__ic svg {
    stroke: #14100A
}

.gcard__n {
    font-family: var(--serif);
    font-size: 18px;
    letter-spacing: .08em;
    color: rgba(30, 37, 23, .26);
}

.gcard h3 {
    margin: 0 0 12px;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 24px;
    line-height: 1.24;
    color: var(--charcoal);
}

.gcard p {
    margin: 0 0 24px;
    font-size: 16px;
    line-height: 1.8;
    color: var(--body-soft);
    flex: 1
}

.gcard .more {
    font-size: 12px;
    letter-spacing: .16em;
    color: var(--gold-deep)
}

.gcard .more svg {
    width: 18px;
    height: 18px
}

.gcard:hover .more {
    color: var(--charcoal)
}

.gcards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px
}

.gcards--three {
    grid-template-columns: repeat(4, 1fr);
    margin-top: 20px
}


/* --- resources: glass tiles on the same light ground -------------------- */

.rescards {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px
}

.rescard {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 22px 32px;
    overflow: hidden;
    border-radius: 6px;
    background: linear-gradient(160deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .5));
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, .85);
    box-shadow: 0 18px 40px -26px rgba(30, 37, 23, .28);
    transition: transform .55s var(--ease-out), box-shadow .55s var(--ease-out);
}

.rescard::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: var(--gold-fill);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .6s var(--ease-out);
}

.rescard:hover {
    transform: translateY(-10px);
    box-shadow: 0 40px 64px -30px rgba(30, 37, 23, .32)
}

.rescard:hover::after {
    transform: scaleX(1)
}

.rescard__ring {
    position: relative;
    width: 82px;
    height: 82px;
    display: grid;
    place-items: center;
    margin-bottom: 22px
}

.rescard__ring>svg:first-child {
    position: absolute;
    inset: 0;
    width: 82px;
    height: 82px;
    transform: rotate(-90deg)
}

.rescard__ring circle {
    fill: none;
    stroke: rgba(199, 155, 74, .5);
    stroke-width: 1;
    stroke-dasharray: 245;
    stroke-dashoffset: 245;
}

.rescard.is-in .rescard__ring circle {
    animation: draw 1.15s var(--ease-out) forwards;
    animation-delay: calc(var(--d, 0ms) + 120ms);
}

.rescard:hover .rescard__ring circle {
    stroke: var(--gold);
    stroke-width: 1.5
}

.rescard__ic {
    width: 28px;
    height: 28px;
    stroke: var(--gold-deep);
    transition: transform .6s var(--ease-out)
}

.rescard:hover .rescard__ic {
    transform: rotate(-8deg) scale(1.12)
}

.rescard h3 {
    margin: 0 0 10px;
    font-family: var(--sans);
    font-size: 18px;
    font-weight: 600;
    color: var(--charcoal)
}

.rescard p {
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    color: var(--body-soft)
}

@media (max-width:1280px) {
    .lightsec .container {
        padding-inline: 88px
    }
    .lightsec__lead .h2 {
        font-size: 44px
    }
    .rescards {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px
    }
}

@media (max-width:1080px) {
    .lightsec .container {
        padding-inline: var(--gutter)
    }
    .lightsec__lead {
        grid-template-columns: 1fr;
        gap: 24px
    }
    .lightsec__lead .h2 {
        font-size: 36px
    }
    .gcards,
    .gcards--three {
        grid-template-columns: repeat(2, 1fr)
    }
    .leaf {
        display: none
    }
}

@media (max-width:820px) {
    .lightsec {
        padding-block: 104px
    }
    .lightsec__lead .h2 {
        font-size: 29px
    }
    .gcards,
    .gcards--three {
        grid-template-columns: 1fr
    }
    .rescards {
        grid-template-columns: 1fr
    }
    .gcard h3 {
        font-size: 21px
    }
}

@media (prefers-reduced-motion:reduce) {
    .rescard__ring circle {
        stroke-dashoffset: 0;
        animation: none
    }
}


/* ==========================================================================
   37. NAV FIT — the 100px logo left the menu short of room and the labels
   were wrapping onto two lines. Keep them on one line and buy back width.
   ========================================================================== */

.nav-link {
    white-space: nowrap
}

.brand-word {
    white-space: nowrap
}

@media (max-width:1560px) {
    .header-inner {
        gap: 18px;
        padding-inline: 28px
    }
    .nav-list {
        gap: 15px
    }
    .nav-link {
        font-size: 11px;
        letter-spacing: .07em
    }
    .header-inner .btn-sm {
        padding-inline: 18px;
        font-size: 11px
    }
}

@media (max-width:1360px) {
    .nav-list {
        gap: 12px
    }
    .nav-link {
        font-size: 10.2px;
        letter-spacing: .05em
    }
    .brand img {
        width: 84px;
        height: 84px
    }
    .header-inner {
        height: 106px
    }
}

.pvbar {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 14px 28px;
    background: #000;
    border-bottom: 1px solid rgba(215, 167, 73, .25);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 600;
    color: #fff
}

.pvbar b {
    color: #D7A749
}

.pvbar a {
    color: rgba(255, 255, 255, .68);
    text-decoration: none;
    border-bottom: 1px solid rgba(215, 167, 73, .4);
    padding-bottom: 2px
}

.pvbar a:hover {
    color: #D7A749
}

.pvbar span {
    margin-left: auto;
    font-weight: 400;
    letter-spacing: .03em;
    text-transform: none;
    color: rgba(255, 255, 255, .45)
}


/* ============================================================================
   EXPLORE OUR RESOURCES — expanding panels
   One panel is open at a time. Pointer, keyboard and touch all drive it.
   ============================================================================ */

.lux {
    --gold: #C79B4A;
    --gold-br: #D7A749;
    --gold-lt: #EBD9AA;
    --gold-dk: #A9772A;
    --ease: cubic-bezier(.16, 1, .3, 1);
    position: relative;
    overflow: hidden;
    padding: 150px 0 160px;
    color: #fff;
    background: #050605;
}


/* two slow-drifting washes so the black is never flat */

.lux__glow {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    filter: blur(110px);
    pointer-events: none;
}

.lux__glow--a {
    width: 46vw;
    aspect-ratio: 1;
    left: -10%;
    top: -18%;
    opacity: .55;
    background: radial-gradient(circle, rgba(199, 155, 74, .42), transparent 66%);
    animation: lux-drift 30s ease-in-out infinite alternate;
}

.lux__glow--b {
    width: 52vw;
    aspect-ratio: 1;
    right: -14%;
    bottom: -26%;
    opacity: .5;
    background: radial-gradient(circle, rgba(79, 91, 63, .7), transparent 68%);
    animation: lux-drift 38s ease-in-out infinite alternate-reverse;
}

@keyframes lux-drift {
    from {
        transform: none
    }
    to {
        transform: translate3d(8%, 6%, 0) scale(1.2)
    }
}

.lux__inner {
    position: relative;
    z-index: 2;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 100px
}


/* ------------------------------------------------------------- display type */

.lux__head {
    margin-bottom: 76px;
    max-width: 1000px
}

.lux__eyebrow {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 30px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--gold-br);
}

.lux__eyebrow i {
    display: block;
    width: 56px;
    height: 1px;
    background: var(--gold);
    flex: none
}

.lux__display {
    margin: 0 0 34px;
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 400;
    font-size: clamp(38px, 5.6vw, 80px);
    line-height: 1.02;
    letter-spacing: -.015em;
}

.lux__l {
    display: block;
    overflow: hidden
}

.lux__l>span {
    display: block;
    transform: translateY(112%)
}

.lux.is-in .lux__l>span {
    transform: none;
    transition: transform 1.2s cubic-bezier(.2, .85, .25, 1);
}

.lux.is-in .lux__l:nth-child(2)>span {
    transition-delay: 140ms
}

.lux__display em {
    font-style: italic;
    background: linear-gradient(100deg, var(--gold-dk), var(--gold) 34%, var(--gold-lt) 56%, var(--gold));
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: lux-shine 8s linear infinite;
}

@keyframes lux-shine {
    to {
        background-position: 220% 0
    }
}

.lux__link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(215, 167, 73, .45);
    transition: color .3s var(--ease), border-color .3s var(--ease);
}

.lux__link svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .45s var(--ease)
}

.lux__link:hover {
    color: var(--gold-br);
    border-color: var(--gold)
}

.lux__link:hover svg {
    transform: translateX(7px)
}


/* ----------------------------------------------------------------- panels */

.lux__panels {
    display: flex;
    gap: 12px;
    height: 470px
}

.lux__panel {
    flex: 1 1 0;
    min-width: 0;
    transition: flex-grow .85s var(--ease);
}

.lux__panel.is-open {
    flex-grow: 4.2
}

.lux__panel>button {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 6px;
    background: #0B0D0A;
    font: inherit;
    color: inherit;
    transition: border-color .5s var(--ease);
}

.lux__panel.is-open>button {
    border-color: rgba(215, 167, 73, .55)
}


/* ---- event photography behind each panel ------------------------------- */

.lux__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    border-radius: 6px
}

.lux__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* collapsed panels sit back so the open one carries the eye */
    filter: grayscale(.55) brightness(.34) contrast(1.05);
    transform: scale(1.1);
    transition: filter .8s var(--ease), transform 1.3s var(--ease);
}

.lux__panel.is-open .lux__media img {
    filter: grayscale(0) brightness(.62) contrast(1.02);
    transform: scale(1);
}


/* scrim: keeps the copy legible whatever the photograph is doing */

.lux__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(4, 5, 4, .94) 0%, rgba(4, 5, 4, .62) 38%, rgba(4, 5, 4, .28) 68%, rgba(4, 5, 4, .5) 100%), linear-gradient(100deg, rgba(4, 5, 4, .5), transparent 62%);
}

.lux__panel.is-open .lux__media::after {
    background: linear-gradient(0deg, rgba(4, 5, 4, .93) 0%, rgba(4, 5, 4, .55) 44%, rgba(4, 5, 4, .14) 76%, rgba(4, 5, 4, .34) 100%), linear-gradient(100deg, rgba(4, 5, 4, .46), transparent 58%);
}

.lux__panel>button:focus-visible {
    outline: 2px solid var(--gold-br);
    outline-offset: 3px
}


/* collapsed rail: number at the top, title running vertically */

.lux__rail {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 0 34px;
    gap: 26px;
    transition: opacity .45s var(--ease);
}

.lux__rail b {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 400;
    font-size: 20px;
    color: var(--gold-br);
}

.lux__vert {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .62);
    white-space: nowrap;
}

.lux__panel.is-open .lux__rail {
    opacity: 0;
    pointer-events: none
}


/* expanded face */

.lux__face {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 44px 42px 40px;
    gap: 0;
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
    transition: opacity .5s var(--ease), transform .6s var(--ease);
}

.lux__panel.is-open .lux__face {
    opacity: 1;
    transform: none;
    transition-delay: .16s;
}

.lux__ic {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    margin-bottom: auto;
    background: linear-gradient(103deg, var(--gold-dk), var(--gold) 20%, var(--gold-lt) 50%, #B5842F 84%);
}

.lux__ic svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: #14100A;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round
}

.lux__h3 {
    display: block;
    margin: 26px 0 14px;
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 1.15;
    color: #fff;
    white-space: nowrap;
}

.lux__p {
    display: block;
    margin: 0 0 26px;
    font-size: 16px;
    line-height: 1.8;
    color: rgba(255, 255, 255, .66);
    max-width: 38ch;
}

.lux__go {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold-br);
}

.lux__go svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .45s var(--ease)
}

.lux__panel>button:hover .lux__go svg {
    transform: translateX(7px)
}


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

@media (max-width:1280px) {
    .lux__inner {
        padding: 0 64px
    }
    .lux__panels {
        height: 430px
    }
    .lux__h3 {
        font-size: 25px
    }
    .lux__face {
        padding: 34px 30px 32px
    }
}

@media (max-width:1080px) {
    .lux {
        padding: 110px 0 120px
    }
    .lux__inner {
        padding: 0 48px
    }
    .lux__panels {
        height: auto;
        flex-direction: column;
        gap: 12px
    }
    .lux__panel,
    .lux__panel.is-open {
        flex: none
    }
    .lux__panel>button {
        height: auto;
        min-height: 0
    }
    .lux__media {
        position: static;
        height: 190px;
        border-radius: 6px 6px 0 0
    }
    .lux__media::after {
        border-radius: 6px 6px 0 0
    }
    .lux__rail {
        position: static;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 18px;
        padding: 22px 26px;
        opacity: 1 !important;
        pointer-events: auto;
    }
    .lux__vert {
        writing-mode: horizontal-tb;
        font-size: 12px
    }
    .lux__face {
        position: static;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        padding: 0 26px 30px;
    }
    .lux__ic {
        width: 50px;
        height: 50px;
        margin: 0 0 18px
    }
    .lux__h3 {
        white-space: normal;
        font-size: 23px;
        margin-top: 0
    }
    .lux__panel:not(.is-open) .lux__face {
        display: none
    }
}

@media (max-width:820px) {
    .lux__inner {
        padding: 0 24px
    }
    .lux__display {
        font-size: clamp(28px, 8vw, 40px)
    }
    .lux__p {
        font-size: 15px
    }
}

@media (prefers-reduced-motion:reduce) {
    .lux__glow,
    .lux__display em {
        animation: none
    }
    .lux__media img {
        transition: none;
        transform: none
    }
    .lux__l>span {
        transform: none
    }
    .lux__panel,
    .lux__face,
    .lux__rail,
    .lux__panel>button {
        transition: none
    }
}


/* ============================================================================
   INDUSTRIES WE SERVE — interactive index + client ribbon
   ============================================================================ */

.lxi {
    --sage: #4F5B3F;
    --gold: #C79B4A;
    --gold-br: #D7A749;
    --gold-lt: #EBD9AA;
    --gold-dk: #A9772A;
    --ease: cubic-bezier(.16, 1, .3, 1);
    position: relative;
    overflow: hidden;
    padding: 150px 0 0;
    color: #000;
    background: radial-gradient(120% 78% at 88% 6%, rgba(199, 155, 74, .13), transparent 58%), radial-gradient(96% 64% at 4% 96%, rgba(79, 91, 63, .12), transparent 62%), linear-gradient(168deg, #FBFAF7 0%, #F5F2ED 46%, #EFEBE2 100%);
}

.lxi__glow {
    position: absolute;
    z-index: 0;
    right: -16%;
    top: -14%;
    width: 58vw;
    aspect-ratio: 1;
    border-radius: 50%;
    filter: blur(120px);
    opacity: .42;
    background: radial-gradient(circle, rgba(235, 217, 170, .34), transparent 66%);
    animation: lxi-drift 34s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes lxi-drift {
    from {
        transform: none
    }
    to {
        transform: translate3d(-7%, 8%, 0) scale(1.18)
    }
}

.lxi__inner {
    position: relative;
    z-index: 2;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 100px
}

.lxi__head {
    margin-bottom: 66px;
    max-width: 820px
}

.lxi__eyebrow {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 28px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: #000;
    ;
}

.lxi__eyebrow i {
    display: block;
    width: 56px;
    height: 1px;
    background: #000;
    ;
    flex: none
}

.lxi__display {
    margin: 0 0 22px;
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 400;
    font-size: clamp(38px, 5.4vw, 76px);
    line-height: 1.03;
    letter-spacing: -.015em;
}

.lxi__display em {
    font-style: italic;
    background: linear-gradient(100deg, #D8C48D, #A9772A 32%, #FFF6DE 56%, #C79B4A);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: lxi-shine 8s linear infinite;
}

@keyframes lxi-shine {
    to {
        background-position: 220% 0
    }
}

.lxi__sub {
    margin: 0;
    font-size: 16px;
    line-height: 1.8;
    color: #000;
}


/* ------------------------------------------------------------------ index */

.lxi__index {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid;
}

.lxi__row {
    position: relative;
    border-bottom: 1px solid;
}


/* gold rule that sweeps across the active row */

.lxi__row::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 1px;
    width: 0;
    background: linear-gradient(90deg, var(--gold), #A9772A, #FFF6DE);
    transition: width .7s var(--ease);
}

.lxi__row.is-open::after {
    width: 100%
}

.lxi__row>button {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 32px;
    width: 100%;
    padding: 30px 0;
    margin: 0;
    border: 0;
    background: none;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
}

.lxi__row>button:focus-visible {
    outline: 2px solid var(--gold-br);
    outline-offset: 4px
}

.lxi__n {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 16px;
    transition: color .4s var(--ease);
}

.lxi__name {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 400;
    font-size: clamp(22px, 2.5vw, 36px);
    line-height: 1.15;
    transition: color .45s var(--ease), transform .55s var(--ease);
}

.lxi__count {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .16em;
    transition: color .4s var(--ease);
}

.lxi__chev {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid #000;
    transition: background .45s var(--ease), border-color .45s var(--ease), transform .55s var(--ease);
}

.lxi__chev svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: #000;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke .4s var(--ease);
}

.lxi__row.is-open .lxi__n {
    color: #000;
}

.lxi__row.is-open .lxi__name {
    color: #000;
    transform: translateX(8px)
}

.lxi__row.is-open .lxi__count {
    color: #000;
}

.lxi__row.is-open .lxi__chev {
    border-color: transparent;
    transform: rotate(45deg);
    background: #000;
}

.lxi__row.is-open .lxi__chev svg {
    stroke: #fff;
}


/* drawer: 0fr -> 1fr so it animates without a hard-coded height */

.lxi__drawer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .6s var(--ease)
}

.lxi__drawer>div {
    overflow: hidden
}

.lxi__row.is-open .lxi__drawer {
    grid-template-rows: 1fr
}

.lxi__chips {
    list-style: none;
    margin: 0;
    padding: 0 0 34px 68px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.lxi__chips li {
    padding: 9px 18px;
    border-radius: 999px;
    font-size: 14px;
    color: #000;
    background: rgba(255, 255, 255, .1);
    border: 1px solid;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .45s var(--ease), transform .5s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}

.lxi__row.is-open .lxi__chips li {
    opacity: 1;
    transform: none;
    transition-delay: calc(var(--ci, 0) * 55ms + 120ms);
}

.lxi__chips li:hover {
    color: #2C3324;
    background: #FFF6DE;
    border-color: transparent;
}

.lxi__note {
    margin: 0;
    padding: 0 0 34px 68px;
    max-width: 56ch;
    font-size: 16px;
    line-height: 1.8;
}


/* ----------------------------------------------------------------- ribbon */

.lxi__ribbon {
    position: relative;
    z-index: 2;
    margin-top: 96px;
    padding: 26px 0;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, .22);
    border-bottom: 1px solid rgba(255, 255, 255, .22);
    background: rgba(0, 0, 0, .14);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.lxi__track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: lxi-run 52s linear infinite
}

.lxi__ribbon:hover .lxi__track {
    animation-play-state: paused
}

@keyframes lxi-run {
    to {
        transform: translateX(-50%)
    }
}

.lxi__track span {
    flex: none;
    padding: 0 28px;
    white-space: nowrap;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 20px;
    color: #000;
    transition: color .3s var(--ease);
}

.lxi__track span:hover {
    color: #FFF6DE
}

.lxi__track i {
    flex: none;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #000;
}


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

@media (max-width:1280px) {
    .lxi__inner {
        padding: 0 64px
    }
}

@media (max-width:1080px) {
    .lxi {
        padding: 110px 0 0
    }
    .lxi__inner {
        padding: 0 48px
    }
    .lxi__row>button {
        gap: 20px;
        padding: 24px 0
    }
    .lxi__chips,
    .lxi__note {
        padding-left: 48px
    }
}

@media (max-width:820px) {
    .lxi__inner {
        padding: 0 24px
    }
    .lxi__display {
        font-size: clamp(28px, 8vw, 40px)
    }
    .lxi__row>button {
        grid-template-columns: auto 1fr auto;
        gap: 14px
    }
    .lxi__count {
        display: none
    }
    .lxi__chev {
        width: 36px;
        height: 36px
    }
    .lxi__chips,
    .lxi__note {
        padding-left: 0;
        padding-bottom: 28px
    }
    .lxi__track span {
        font-size: 17px;
        padding: 0 18px
    }
}

@media (prefers-reduced-motion:reduce) {
    .lxi__glow,
    .lxi__display em,
    .lxi__track {
        animation: none
    }
    .lxi__drawer,
    .lxi__chips li,
    .lxi__name,
    .lxi__chev {
        transition: none
    }
}


/* ============================================================================
   MOBILE / TOUCH — no hover states on the resources panels
   On touch, :hover latches after a tap and stays stuck until you tap
   elsewhere, so the panel keeps a hover look it should not have. Neutralise
   every hover rule here; the .is-open state (driven by tap) still animates.
   Two queries, deliberately:
     (hover: none)      real touch devices at any width
     (max-width:1080px) the stacked layout, incl. a resized desktop window
   ============================================================================ */

@media (hover: none),
(max-width: 1080px) {
    /* arrow no longer slides on hover */
    .lux__panel>button:hover .lux__go svg {
        transform: none
    }
    /* photograph does not change on hover — only when the panel opens */
    .lux__panel:not(.is-open)>button:hover .lux__media img {
        filter: grayscale(.55) brightness(.34) contrast(1.05);
        transform: scale(1.1);
    }
    /* border stays put until the panel is actually open */
    .lux__panel:not(.is-open)>button:hover {
        border-color: rgba(255, 255, 255, .12)
    }
    /* header link: no colour shift or arrow slide on tap */
    .lux__link:hover {
        color: #fff;
        border-color: rgba(215, 167, 73, .45)
    }
    .lux__link:hover svg {
        transform: none
    }
    /* keep the tap target obvious instead: a brief press state */
    .lux__panel>button:active {
        border-color: rgba(215, 167, 73, .55)
    }
    .lux__link:active {
        color: var(--gold-br)
    }
}

@media(max-width:768px) {
    .lux__media::after,
    .lux__panel.is-open .lux__media::after {
        background: unset;
    }
}


/* On touch the stacked photo does not need the scale-up either. */

@media (hover: none) {
    .lux__media img {
        transform: none
    }
    .lux__panel.is-open .lux__media img {
        transform: none
    }
}


/* ============================== MEET THE TEAM ==============================
   Card grid on the About page. Add or remove .tmember articles freely — the
   grid reflows on its own, so the client can run 2, 3, 4, 6 people with no
   CSS changes.
   ========================================================================== */

.team {
    position: relative;
    overflow: hidden
}

.team__head {
    max-width: 62ch;
    margin: 0 auto 56px;
    text-align: center
}

.team__head .rule {
    margin: 22px auto 24px
}

.team__head p {
    margin: 0;
    font-size: .88rem;
    line-height: 1.95;
    color: var(--body)
}

.team__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 44px 34px;
    position: relative;
    z-index: 2
}

.tmember {
    text-align: center
}

.tmember__photo {
    position: relative;
    margin: 0 0 22px;
    overflow: hidden;
    background: var(--ivory-lift);
    aspect-ratio: 4 / 5;
    border: 1px solid var(--line)
}

.tmember__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.2s var(--ease-out)
}

.tmember:hover .tmember__photo img {
    transform: scale(1.05)
}

.tmember__photo::after {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(215, 167, 73, .38);
    pointer-events: none;
    opacity: 0;
    transition: opacity .5s var(--ease)
}

.tmember:hover .tmember__photo::after {
    opacity: 1
}

.tmember__name {
    margin: 0 0 6px;
    font-family: var(--serif);
    font-size: 1.12rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--charcoal)
}

.tmember__role {
    margin: 0 0 14px;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold-deep)
}

.tmember__bio {
    margin: 0;
    font-size: .82rem;
    line-height: 1.85;
    color: var(--body-soft);
    max-width: 34ch;
    margin-inline: auto
}

@media (max-width:860px) {
    .team__grid {
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
        gap: 36px 22px
    }
    .team__head {
        margin-bottom: 40px
    }
}

@media (max-width:520px) {
    .team__grid {
        grid-template-columns: repeat(2, 1fr)
    }
    .tmember__bio {
        display: none
    }
}


/* honeypot — off-screen rather than display:none, which some bots detect */

.hp {
    position: absolute !important;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden
}


/* error state for the shared form status line */

.formok.is-error {
    color: #B3261E
}

.formok.is-error a {
    color: inherit;
    text-decoration: underline
}


/* --------------------------------------------------------------------------
   Filter bar with ten categories
   The original bar was built for five filters on one line. With the client's
   full category list it needs to wrap deliberately rather than accidentally:
   the filters take the full row and the sort control sits beneath them,
   right-aligned, instead of being pushed out of alignment mid-wrap.
   -------------------------------------------------------------------------- */

.darkpage .filterbar {
    flex-direction: column;
    align-items: stretch;
    gap: 18px
}

.darkpage .filters {
    gap: 14px 26px;
    row-gap: 14px
}

.darkpage .sortby {
    align-self: flex-end
}

@media (min-width:1180px) {
    .darkpage .filterbar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between
    }
    .darkpage .filters {
        flex: 1 1 auto;
        max-width: calc(100% - 230px)
    }
    .darkpage .sortby {
        align-self: center;
        flex: 0 0 auto
    }
}

@media (max-width:700px) {
    .darkpage .filters {
        gap: 12px 18px
    }
    .darkpage .filters button {
        font-size: 12px;
        letter-spacing: .1em
    }
}


/* Filter labels inherited color:#000 from the light-page styling, which is
   effectively invisible on the dark portfolio background. Only the active
   item was legible. Give the dark page its own readable colour. */

.darkpage .filters button {
    color: rgba(255, 255, 255, .72)
}

.darkpage .filters button:hover,
.darkpage .filters button:focus-visible,
.darkpage .filters button[aria-pressed="true"] {
    color: var(--gold-bright)
}


/* --------------------------------------------------------------------------
   Portfolio on small screens
   The base stylesheet drops .ggrid to a single column below 820px, which was
   fine for a twelve-tile gallery but makes 102 photos an endless scroll.
   Two columns keeps it scannable. The filter row also becomes a horizontal
   swipe strip so ten categories don't consume five stacked rows above the
   fold. Appended last so it wins over the earlier breakpoints.
   -------------------------------------------------------------------------- */

@media (max-width:820px) {
    .darkpage .ggrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px
    }
}

@media (max-width:700px) {
    .darkpage .filterbar {
        gap: 14px
    }
    /* swipeable strip: full-bleed so the last chip isn't clipped by the gutter */
    .darkpage .filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        margin-inline: calc(var(--gutter) * -1);
        padding-inline: var(--gutter);
        gap: 20px
    }
    .darkpage .filters::-webkit-scrollbar {
        display: none
    }
    .darkpage .filters button {
        flex: 0 0 auto;
        scroll-snap-align: start;
        white-space: nowrap
    }
    .darkpage .sortby {
        align-self: stretch
    }
    /* captions can't rely on hover on touch devices */
    .darkpage .gtile__cap {
        opacity: 1;
        transform: none;
        padding: 26px 12px 11px
    }
    .darkpage .gtile__cap b {
        font-size: .74rem
    }
    .darkpage .gtile__cap span {
        font-size: .58rem
    }
}

@media (max-width:560px) {
    /* At two columns the tile is ~170px wide; a wrapped title plus a category
       line covers most of the photo. Keep the title, drop the redundant
       category (the active filter already says it). */
    .darkpage .gtile__cap {
        padding: 22px 10px 9px
    }
    .darkpage .gtile__cap span {
        display: none
    }
    .darkpage .gtile__cap b {
        font-size: .68rem;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden
    }
}

.talkcard__bg {
    padding-bottom: 10px;
}

.lux__face {
    display: none;
}


/* ==========================================================================
   30. MOBILE OPTIMISATION PASS
   Appended last so these rules win over the earlier breakpoints.
   ========================================================================== */


/* --- gallery captions ----------------------------------------------------
   The white <b> title line was removed from every tile, leaving the gold
   category text as the only caption. Two earlier mobile rules were written
   around the old two-line markup — one sized <b>, the other hid <span>
   outright below 560px, which would now leave the caption completely blank.
   These re-point that styling at the line that actually exists. */

@media (max-width:700px) {
    .darkpage .gtile__cap {
        padding: 24px 12px 11px
    }
    .darkpage .gtile__cap span {
        font-size: .62rem;
        letter-spacing: .1em
    }
}

@media (max-width:560px) {
    .darkpage .gtile__cap {
        padding: 20px 10px 9px
    }
    .darkpage .gtile__cap span {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: .56rem;
        letter-spacing: .07em;
        line-height: 1.4
    }
}


/* --- portfolio filter navigation -----------------------------------------
   Ten categories previously became a horizontal swipe strip on phones. With
   no visible affordance that it scrolls, the trailing filters simply read as
   cut off at the screen edge. Wrapping pills show every category at once, so
   nothing is hidden and nothing needs discovering. */

@media (max-width:700px) {
    .darkpage .filters {
        flex-wrap: wrap;
        overflow-x: visible;
        scroll-snap-type: none;
        margin-inline: 0;
        padding-inline: 0;
        gap: 8px
    }
    .darkpage .filters button {
        flex: 0 0 auto;
        padding: 9px 14px;
        border: 1px solid rgba(215, 167, 73, .32);
        border-radius: 999px;
        font-size: 11px;
        letter-spacing: .08em;
        line-height: 1;
        white-space: nowrap
    }
    /* the underline indicator is replaced by the filled pill */
    .darkpage .filters button::after {
        display: none
    }
    .darkpage .filters button[aria-pressed="true"] {
        background: var(--gold-fill);
        border-color: transparent;
        color: #14100A
    }
    .darkpage .sortby {
        align-self: stretch;
        width: 100%
    }
    .darkpage .sortby select {
        width: 100%;
        padding-block: 13px
    }
}


/* --- mobile drawer -------------------------------------------------------
   inset:0 measures the layout viewport, so on iOS the browser chrome sat over
   the last few links and the consultation button. 100dvh plus the safe-area
   inset keeps the full menu reachable. */

.drawer {
    height: 100dvh;
    padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}


/* --- contact hero --------------------------------------------------------
   The "Follow us" block carries a row of icons rather than a single line of
   text, so the three items need room to stack cleanly on narrow screens. */

@media (max-width:820px) {
    .herocontact {
        gap: 24px 32px
    }
}

@media (max-width:560px) {
    .herocontact {
        flex-direction: column;
        gap: 20px
    }
    .hcitem {
        align-items: flex-start
    }
    .hcitem__ic {
        width: 42px;
        height: 42px
    }
}


/* --- touch targets -------------------------------------------------------
   38px circles sit under the 44px minimum once there are six of them. */

@media (max-width:820px) {
    .socials a {
        width: 44px;
        height: 44px
    }
    .socials--sm a {
        width: 38px;
        height: 38px
    }
    .footer__brand .socials {
        gap: 10px
    }
}


/* --- drawer submenus ------------------------------------------------------
   main.js folds each .sub into its parent link and adds a chevron button.
   The parent link keeps its own tap target so it still navigates; only the
   chevron toggles. Collapsed height is driven by an inline max-height. */

.drawer__group {
    display: block
}

.drawer__row {
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.drawer__row>a {
    flex: 1 1 auto;
    min-width: 0;
    border-bottom: 0
}

.drawer__toggle {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    background: none;
    border: 0;
    border-radius: 50%;
    color: var(--gold-bright);
    cursor: pointer;
    transition: background .3s var(--ease);
}

.drawer__toggle svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .34s var(--ease-out);
}

.drawer__toggle:hover {
    background: rgba(215, 167, 73, .12)
}

.drawer__group.is-open .drawer__toggle svg {
    transform: rotate(180deg)
}

.drawer__sub {
    max-height: 0;
    overflow: hidden;
    transition: max-height .38s var(--ease-out);
}

.drawer__sub a:last-child {
    border-bottom: 0
}

.drawer__group.is-open>.drawer__sub {
    border-bottom: 1px solid rgba(255, 255, 255, .08)
}

@media (prefers-reduced-motion: reduce) {
    .drawer__sub,
    .drawer__toggle svg {
        transition: none
    }
}


/* --- drawer CTA -----------------------------------------------------------
   `.drawer a` sets a 1.32rem serif for the nav links, and that was cascading
   onto the consultation button too, pushing its label ~46px past the button
   edge where `overflow:hidden` clipped it. Restore the normal button scale. */

.drawer .btn {
    font-family: var(--sans);
    font-size: 11.5px;
    letter-spacing: .15em;
    padding-inline: 20px;
    border-bottom: 0;
}

@media (max-width:360px) {
    .drawer .btn {
        font-size: 10.5px;
        letter-spacing: .1em;
        padding-inline: 14px
    }
}


/* --- small phones (<=400px) -----------------------------------------------
   `.btn` is nowrap with 34px side padding, so "Schedule a Consultation"
   held a 303px minimum. Inside the 264px column on the service pages that
   pushed the whole grid track — and the document — 39px past the viewport.
   Tightening the button below 400px removes the overflow at 320px. */

@media (max-width:400px) {
    .btn {
        padding-inline: 20px;
        font-size: 10.6px;
        letter-spacing: .09em;
    }
    .btn-row {
        flex-wrap: wrap
    }
}


/* belt and braces: never let a wide child stretch these grid tracks */

@media (max-width:820px) {
    .managed {
        grid-template-columns: minmax(0, 1fr)
    }
    .managed__list {
        grid-template-columns: minmax(0, 1fr)
    }
}

/* --- lightbox caption -----------------------------------------------------
   The white title line was removed from the popup so only the gold category
   label remains, matching the gallery tiles. Drop the span's offset (it used
   to sit under the title) and collapse the caption when there's nothing in
   it, so video slides don't leave a gap under the frame. */

.lightbox__cap span {
    margin-top: 0
}

.lightbox__cap:empty {
    display: none;
    margin-top: 0
}


/* --- founder photos -------------------------------------------------------
   The About Me section now carries two portraits instead of one. They sit
   side by side in the same 420px column the single photo used, with the
   second dropped slightly to echo the collage elsewhere on the site. */

.founder__photos {
    position: relative;
    padding-bottom: 96px;
}

.founder__photos .founder__photo {
    aspect-ratio: 3 / 4
}

/* lead portrait carries the column; the second overlaps it bottom-right with
   an ivory keyline so it reads as a stacked pair rather than two thumbnails */
.founder__photos .founder__photo--main {
    width: 74%
}

.founder__photos .founder__photo--drop {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 54%;
    border: 7px solid var(--ivory);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .16);
}

@media (max-width:820px) {
    .founder__photos {
        padding-bottom: 72px
    }
    .founder__photos .founder__photo--drop {
        border-width: 6px
    }
}

@media (max-width:420px) {
    .founder__photos .founder__photo--main {
        width: 78%
    }
    .founder__photos .founder__photo--drop {
        width: 50%
    }
}


/* --- homepage google reviews ---------------------------------------------
   Sits between the hero and the "who we are" section so the social proof
   lands in the first screenful of scroll. The card grid reuses .reviews /
   .tcard from the testimonials page, so live reviews drop straight in. */

.greviews__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
    margin-bottom: 44px;
}

.greviews__score {
    display: grid;
    gap: 6px;
    justify-items: flex-end;
    text-align: right;
    padding: 18px 26px;
    border: 1px solid rgba(215, 167, 73, .45);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .55);
    transition: border-color .35s var(--ease), transform .45s var(--ease-out);
}

.greviews__score:hover {
    border-color: var(--gold);
    transform: translateY(-2px);
}

.greviews__score > b {
    font-family: var(--serif);
    font-size: 40px;
    line-height: 1;
    color: var(--ink);
}

.greviews__score .stars svg {
    width: 15px;
    height: 15px;
    fill: var(--gold-bright);
    stroke: none;
}

.greviews__count {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}

.greviews__count svg {
    width: 14px;
    height: 14px;
}

@media (max-width:760px) {
    .greviews__head {
        align-items: flex-start;
        margin-bottom: 32px;
    }
    .greviews__score {
        justify-items: flex-start;
        text-align: left;
        padding: 14px 18px;
    }
    .greviews__score > b {
        font-size: 32px
    }
}


/* --- live reviews slider (Trustindex) -------------------------------------
   The third-party widget ships its own markup and styling. These rules only
   give it room and nudge its typography towards the site's, without trying
   to restyle its internals — an update on their side would break that. */

.reviews-live {
    margin-bottom: 8px;
}

.reviews-live:empty,
.reviews-live.is-empty {
    display: none;
    margin: 0;
}

.reviews-live .ti-widget {
    font-family: var(--sans) !important;
}

/* the fallback cards sit underneath and are hidden once the widget renders */
#googleReviews[hidden] {
    display: none !important;
}

@media (max-width:760px) {
    .reviews-live {
        margin-bottom: 4px
    }
}