/* ==========================================================================
   THE BIRDMAN TOURS
   Design system. Loaded after Bootstrap, which it deliberately overrides.

   Colour discipline
   -----------------
   #0b3b2c is the brand and carries the page. Everything green below is a
   tint or shade of that one hue, so nothing ever competes with it. Gold is
   an accent in the strict sense: eyebrow labels over green, hairline rules,
   the active nav mark, a price figure. It is never a large field.

   Surface discipline
   ------------------
   No outlined cards. Blocks are separated by whitespace, a photograph, or a
   single hairline rule -- not by a box with a border and a drop shadow.
   ========================================================================== */

:root {
    /* Brand hue - all derived from #0b3b2c */
    --green:        #0b3b2c;
    --green-950:    #051a13;
    --green-900:    #07271d;
    --green-800:    #0b3b2c;
    --green-700:    #10513c;
    --green-600:    #16674c;
    --green-400:    #2f9a74;
    --green-200:    #a3d4c1;
    --green-100:    #d3e9df;
    --green-50:     #eef5f1;

    /* Accent - small marks only */
    --gold:         #c9922f;
    --gold-on-dark: #e0b268;
    --gold-deep:    #8a6115;

    /* Warm neutrals */
    --sand:         #f4f1ea;
    --sand-deep:    #ece7db;
    --paper:        #ffffff;
    --ink:          #16201b;
    --muted:        #5f6d65;
    --muted-light:  #8b9891;
    --hairline:     #e2ddd2;
    --field-border: #c6c0b0;   /* deliberately visible on the sand ground */
    --field-bg:     #ffffff;
    --hairline-dark: rgba(255, 255, 255, .16);

    --shell:        min(1240px, 100% - 3rem);
    --nav-h:        84px;

    --ease:         cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }

body {
    margin: 0;
    background: var(--sand);
    color: var(--ink);
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--green-700); text-decoration: none; transition: color .25s var(--ease); }
a:hover { color: var(--green); }

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

/* --------------------------------------------------------------------------
   Type
   Weight contrast does the work, not decoration. Display sizes run light so
   large headings read as editorial rather than shouty.
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5 {
    font-family: inherit;
    color: var(--green);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -.022em;
    margin: 0 0 .6em;
}

.display-xl { font-size: clamp(2.6rem, 6.4vw, 5.1rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.02; }
.display-lg { font-size: clamp(2.1rem, 4.4vw, 3.5rem); font-weight: 500; letter-spacing: -.03em;  line-height: 1.08; }
.display-md { font-size: clamp(1.6rem, 2.7vw, 2.3rem); font-weight: 600; letter-spacing: -.024em; }
.display-sm { font-size: clamp(1.2rem, 1.7vw, 1.45rem); font-weight: 600; letter-spacing: -.015em; }

/* Emphasised word inside a display heading. */
.display-xl em, .display-lg em {
    font-style: italic;
    font-weight: 300;
    color: var(--gold-on-dark);
}
.on-light .display-xl em, .on-light .display-lg em,
.display-lg.ink em { color: var(--gold-deep); }

.lead {
    font-size: clamp(1.02rem, 1.35vw, 1.17rem);
    font-weight: 300;
    line-height: 1.72;
    color: var(--muted);
    max-width: 62ch;
}

.prose p { margin: 0 0 1.15em; color: var(--muted); font-weight: 300; }
.prose p strong { color: var(--ink); font-weight: 600; }
.prose > :last-child { margin-bottom: 0; }

/* The small uppercase label that opens a section. */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    font-size: .688rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin-bottom: 1.1rem;
}
.eyebrow::before {
    content: '';
    width: 26px;
    height: 1px;
    background: var(--gold);
    flex: none;
}
.on-dark .eyebrow, .eyebrow.on-dark { color: var(--gold-on-dark); }
.on-dark .eyebrow::before { background: var(--gold-on-dark); }
.eyebrow.no-rule::before { display: none; }

.muted { color: var(--muted); }
.text-green { color: var(--green) !important; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.shell { width: var(--shell); margin-inline: auto; }
.shell-narrow { width: min(880px, 100% - 3rem); margin-inline: auto; }

.section { padding: clamp(4rem, 9vw, 7.5rem) 0; }
.section-tight { padding: clamp(2.75rem, 5vw, 4.25rem) 0; }

.on-dark { background: var(--green); color: rgba(255, 255, 255, .82); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #fff; }
.on-dark .lead, .on-dark .prose p { color: rgba(255, 255, 255, .74); }
.on-dark a { color: #fff; }

.on-wash { background: var(--green-50); }
.on-paper { background: var(--paper); }

/* Section heading + supporting copy, with an optional right-hand action. */
.section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem 3rem;
    margin-bottom: clamp(2.25rem, 4vw, 3.5rem);
}
.section-head > div { flex: 1 1 30rem; }

.rule { height: 1px; background: var(--hairline); border: 0; margin: 0; }
.on-dark .rule { background: var(--hairline-dark); }

/* --------------------------------------------------------------------------
   Buttons
   Solid green is the default action. Gold never fills a large button.
   -------------------------------------------------------------------------- */

.btn {
    --btn-bg: var(--green);
    --btn-fg: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    padding: .92rem 1.9rem;
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: 0;
    border-radius: 0;
    font-family: inherit;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.btn:hover { background: var(--green-700); color: #fff; transform: translateY(-2px); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.btn i, .btn svg { font-size: .95em; }

.btn-gold { --btn-bg: var(--gold); --btn-fg: var(--green-950); }
.btn-gold:hover { background: var(--gold-on-dark); color: var(--green-950); }

.btn-outline {
    --btn-bg: transparent;
    --btn-fg: var(--green);
    box-shadow: inset 0 0 0 1px var(--green);
}
.btn-outline:hover { background: var(--green); color: #fff; }

.btn-ghost {
    --btn-bg: transparent;
    --btn-fg: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
}
.btn-ghost:hover { background: #fff; color: var(--green); }

.btn-block { width: 100%; }
.btn-lg { padding: 1.08rem 2.4rem; font-size: .86rem; }

/* Text link that reveals a rule on hover. */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--green);
    padding-bottom: .35rem;
    background-image: linear-gradient(var(--gold), var(--gold));
    background-size: 0 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size .38s var(--ease);
}
.link-arrow:hover { background-size: 100% 1px; color: var(--green); }
.link-arrow i { transition: transform .38s var(--ease); }
.link-arrow:hover i { transform: translateX(5px); }
.on-dark .link-arrow { color: #fff; }

/* --------------------------------------------------------------------------
   Navigation
   Transparent over the hero, solid once the page scrolls.
   -------------------------------------------------------------------------- */

.site-nav {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1040;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    background: transparent;
    transition: background .4s var(--ease), height .4s var(--ease), box-shadow .4s var(--ease);
}
.site-nav::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(5, 26, 19, .62), transparent);
    opacity: 1;
    transition: opacity .4s var(--ease);
    pointer-events: none;
}
.site-nav.is-solid,
.site-nav.is-open { background: var(--green); height: 72px; }
.site-nav.is-solid::after, .site-nav.is-open::after { opacity: 0; }
.site-nav.is-solid { box-shadow: 0 1px 0 rgba(255, 255, 255, .1); }

/* Pages with no hero start solid so the nav is never invisible. */
.site-nav.no-hero { position: sticky; background: var(--green); }
.site-nav.no-hero::after { opacity: 0; }

.nav-inner {
    width: var(--shell);
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: 2rem;
    position: relative;
    z-index: 1;
}

.brand { display: flex; align-items: baseline; gap: .55rem; margin-right: auto; }
.brand-mark {
    font-size: 1.12rem;
    font-weight: 600;
    letter-spacing: -.02em;
    color: #fff;
    line-height: 1;
}
.brand-mark span { color: var(--gold-on-dark); }
.brand-sub {
    display: none;
    font-size: .58rem;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}


.nav-links {
    display: flex;
    align-items: center;
    gap: 1.45rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav-links a {
    position: relative;
    display: block;
    padding: .35rem 0;
    font-size: .795rem;
    font-weight: 500;
    letter-spacing: .045em;
    color: rgba(255, 255, 255, .8);
    white-space: nowrap;
}
.nav-links a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background: var(--gold-on-dark);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .38s var(--ease);
}
.nav-links a:hover { color: #fff; }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-links a.active { color: #fff; }
.nav-links a.active::after { transform: scaleX(1); }

.nav-cta { display: none; }
@media (min-width: 1200px) { .nav-cta { display: inline-flex; } }

.nav-toggle {
    display: grid;
    place-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    background: none;
    border: 0;
    cursor: pointer;
}
.nav-toggle span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: #fff;
    transition: transform .35s var(--ease), opacity .25s var(--ease);
}
.site-nav.is-open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.site-nav.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-nav.is-open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Nine items need more room, so the drawer takes over sooner. */
@media (max-width: 1199.98px) {
    .nav-links {
        position: fixed;
        inset: 72px 0 auto;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 1rem 0 2rem;
        background: var(--green);
        max-height: 0;
        overflow: hidden;
        transition: max-height .45s var(--ease);
    }
    .site-nav.is-open .nav-links { max-height: calc(100vh - 72px); overflow-y: auto; }
    .nav-links li { width: var(--shell); margin-inline: auto; }
    .nav-links a {
        padding: .95rem 0;
        font-size: .95rem;
        border-bottom: 1px solid rgba(255, 255, 255, .09);
    }
    .nav-links a::after { display: none; }
    .nav-links a.active { color: var(--gold-on-dark); }
}
@media (min-width: 1200px) { .nav-toggle { display: none; } }

/* --------------------------------------------------------------------------
   Hero carousel
   Slow Ken Burns drift, dark wash from the bottom so type always holds.
   -------------------------------------------------------------------------- */

.hero {
    position: relative;
    min-height: clamp(560px, 88vh, 900px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--green-950);
}
.hero-compact { min-height: clamp(400px, 56vh, 560px); }

.hero-slides { position: absolute; inset: 0; }
.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.5s var(--ease);
}
.hero-slide.is-active { opacity: 1; }
.hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.06);
}
.hero-slide.is-active img {
    animation: kenburns 11s var(--ease) forwards;
}
@keyframes kenburns {
    from { transform: scale(1.04) translate3d(0, 0, 0); }
    to   { transform: scale(1.15) translate3d(-1.2%, -1.4%, 0); }
}

.hero-wash {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, rgba(5, 26, 19, .93) 0%, rgba(5, 26, 19, .55) 38%, rgba(5, 26, 19, .18) 68%, rgba(5, 26, 19, .42) 100%),
        linear-gradient(to right, rgba(5, 26, 19, .58), transparent 62%);
}

.hero-body {
    position: relative;
    width: var(--shell);
    margin-inline: auto;
    padding-bottom: clamp(3.5rem, 7vw, 6rem);
    padding-top: calc(var(--nav-h) + 2rem);
    color: #fff;
}
.hero-body .display-xl, .hero-body .display-lg { color: #fff; max-width: 17ch; }
.hero-body .lead { color: rgba(255, 255, 255, .8); max-width: 52ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.1rem; }

/* Slide caption - names the bird, bottom right. */
.hero-caption {
    position: absolute;
    right: 0;
    bottom: clamp(3.5rem, 7vw, 6rem);
    text-align: right;
    font-size: .7rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
    display: none;
}
@media (min-width: 992px) { .hero-caption { display: block; } }

/* Progress ticks rather than dots in a pill. */
.hero-ticks {
    position: absolute;
    left: 0;
    bottom: clamp(1.6rem, 3vw, 2.4rem);
    display: flex;
    gap: .5rem;
    z-index: 2;
}
.hero-tick {
    width: 44px;
    height: 2px;
    padding: 0;
    border: 0;
    background: rgba(255, 255, 255, .28);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.hero-tick::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gold-on-dark);
    transform: scaleX(0);
    transform-origin: left;
}
.hero-tick.is-active::after { animation: tick 7s linear forwards; }
@keyframes tick { to { transform: scaleX(1); } }

/* Scrolled-page hero for interior pages. */
.page-hero {
    position: relative;
    padding: calc(var(--nav-h) + clamp(3.5rem, 7vw, 6rem)) 0 clamp(3rem, 6vw, 5rem);
    background: var(--green);
    color: #fff;
    overflow: hidden;
}
.page-hero-img {
    position: absolute;
    inset: 0;
    opacity: .3;
}
.page-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.page-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--green-950), rgba(11, 59, 44, .55));
}
.page-hero > .shell { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; max-width: 20ch; }
.page-hero .lead { color: rgba(255, 255, 255, .76); }

.crumbs {
    font-size: .7rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    margin-bottom: 1.4rem;
}
.crumbs a { color: rgba(255, 255, 255, .55); }
.crumbs a:hover { color: var(--gold-on-dark); }
.crumbs span { margin: 0 .55rem; opacity: .5; }

/* --------------------------------------------------------------------------
   Safari cards
   No border, no shadow. The photograph is the boundary.
   -------------------------------------------------------------------------- */

.grid { display: grid; gap: clamp(1.75rem, 3vw, 2.75rem); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }

/* Fixed tracks, not auto-fit.
   With auto-fit a lone post stretches across the whole row and looks like a
   mistake; these keep a single card at one third width where three would go. */
.grid-fixed-3 { grid-template-columns: 1fr; }
@media (min-width: 620px)  { .grid-fixed-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px)  { .grid-fixed-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tour { display: flex; flex-direction: column; }
.tour-media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--green-900);
}
.tour-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s var(--ease);
}
.tour:hover .tour-media img { transform: scale(1.06); }

.tour-days {
    position: absolute;
    left: 0;
    bottom: 0;
    background: var(--green);
    color: #fff;
    padding: .5rem 1.05rem;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
}
.tour-body { padding-top: 1.35rem; }
.tour-country {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold-deep);
}
.tour h3 {
    margin: .55rem 0 .6rem;
    font-size: 1.3rem;
    letter-spacing: -.02em;
}
.tour h3 a { color: var(--green); }
.tour:hover h3 a { color: var(--green-600); }
.tour p {
    color: var(--muted);
    font-weight: 300;
    font-size: .93rem;
    margin: 0 0 1.15rem;
}
.tour-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--hairline);
}
.price { display: flex; align-items: baseline; gap: .38rem; }
.price-from {
    font-size: .66rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted-light);
}
.price-figure {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--gold-deep);
    letter-spacing: -.02em;
}

/* --------------------------------------------------------------------------
   Destination blocks - alternating full-bleed image and copy
   -------------------------------------------------------------------------- */

.dest {
    display: grid;
    gap: 0;
    align-items: stretch;
    grid-template-columns: 1fr;
}
@media (min-width: 900px) {
    .dest { grid-template-columns: 1.05fr .95fr; }
    .dest.is-flipped .dest-media { order: 2; }
}
.dest + .dest { margin-top: clamp(2.5rem, 5vw, 4.5rem); }

.dest-media { position: relative; min-height: 340px; overflow: hidden; }
.dest-media img { width: 100%; height: 100%; object-fit: cover; }
.dest-index {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--green);
    color: var(--gold-on-dark);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .18em;
    padding: .55rem 1.1rem;
}
.dest-body {
    background: var(--paper);
    padding: clamp(2rem, 4vw, 3.4rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.dest.is-dark .dest-body { background: var(--green); }
.dest.is-dark .dest-body h3 { color: #fff; }
.dest.is-dark .dest-body p, .dest.is-dark .dest-body li { color: rgba(255, 255, 255, .74); }
.dest.is-dark .eyebrow { color: var(--gold-on-dark); }
.dest.is-dark .eyebrow::before { background: var(--gold-on-dark); }
.dest.is-dark .species li { border-color: rgba(255, 255, 255, .16); }
.dest.is-dark .stat-value { color: #fff; }

.species { list-style: none; margin: 1.4rem 0 0; padding: 0; }
.species li {
    display: flex;
    align-items: baseline;
    gap: .8rem;
    padding: .62rem 0;
    border-top: 1px solid var(--hairline);
    font-size: .92rem;
    font-weight: 300;
    color: var(--muted);
}
.species li:last-child { border-bottom: 1px solid var(--hairline); }
.dest.is-dark .species li:last-child { border-bottom-color: rgba(255, 255, 255, .16); }
.species li b { font-weight: 600; color: inherit; }
.species-mark {
    flex: none;
    width: 5px;
    height: 5px;
    background: var(--gold);
    transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   Stats - large figures, hairline separators, no boxes
   -------------------------------------------------------------------------- */

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    gap: 0;
    border-top: 1px solid var(--hairline);
}
.on-dark .stats { border-color: var(--hairline-dark); }
.stat { padding: clamp(1.6rem, 3vw, 2.4rem) 1.5rem clamp(1.6rem, 3vw, 2.4rem) 0; }
.stat + .stat { border-left: 1px solid var(--hairline); padding-left: clamp(1.5rem, 3vw, 2.4rem); }
.on-dark .stat + .stat { border-color: var(--hairline-dark); }
.stat-value {
    font-size: clamp(2.1rem, 3.6vw, 3rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.035em;
    color: var(--green);
}
.on-dark .stat-value { color: #fff; }
.stat-value sup { font-size: .42em; font-weight: 600; top: -1.05em; margin-left: .1em; color: var(--gold); }
.stat-label {
    margin-top: .7rem;
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--muted-light);
}
.on-dark .stat-label { color: rgba(255, 255, 255, .55); }

/* --------------------------------------------------------------------------
   Itinerary - day by day
   -------------------------------------------------------------------------- */

.itinerary { border-top: 1px solid var(--hairline); }
.day { border-bottom: 1px solid var(--hairline); }
.day-head {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: clamp(1rem, 3vw, 2.5rem);
    padding: 1.6rem 0;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    color: var(--green);
}
.day-num {
    flex: none;
    width: 4.4rem;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold-deep);
    padding-top: .3rem;
}
.day-title {
    flex: 1;
    font-size: clamp(1.02rem, 1.5vw, 1.16rem);
    font-weight: 600;
    letter-spacing: -.015em;
    margin: 0;
    color: var(--green);
}
.day-place {
    display: block;
    margin-top: .3rem;
    font-size: .82rem;
    font-weight: 300;
    letter-spacing: 0;
    text-transform: none;
    color: var(--muted-light);
}
.day-toggle {
    flex: none;
    width: 26px;
    height: 26px;
    position: relative;
    margin-top: .25rem;
}
.day-toggle::before, .day-toggle::after {
    content: '';
    position: absolute;
    inset: 50% 0 auto;
    height: 1px;
    background: var(--green);
    transition: transform .35s var(--ease);
}
.day-toggle::after { transform: rotate(90deg); }
.day.is-open .day-toggle::after { transform: rotate(0); }

.day-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .42s var(--ease);
}
.day.is-open .day-panel { grid-template-rows: 1fr; }
.day-panel > div { overflow: hidden; }
.day-content {
    padding: 0 0 1.8rem clamp(0rem, 3vw + 4.4rem, 6.9rem);
    max-width: 68ch;
}
.day-content p { margin: 0 0 .9rem; color: var(--muted); font-weight: 300; }
.day-birds {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: 1rem;
}
.bird-tag {
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--green-700);
    background: var(--green-50);
    padding: .34rem .75rem;
}

/* --------------------------------------------------------------------------
   Team
   -------------------------------------------------------------------------- */

.person-photo {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--green-900);
    position: relative;
}
.person-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
    filter: saturate(.92);
    transition: transform 1s var(--ease), filter .5s var(--ease);
}
.person:hover .person-photo img { transform: scale(1.045); filter: saturate(1); }

/* Monogram stands in until a photograph exists. */
.person-monogram {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    background: var(--green-800);
    color: var(--gold-on-dark);
    font-size: clamp(2.6rem, 5vw, 3.6rem);
    font-weight: 300;
    letter-spacing: .05em;
}
.person-monogram::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 2px;
    background: var(--gold);
}
.person-name { margin: 1.15rem 0 .25rem; font-size: 1.08rem; font-weight: 600; }
.person-role {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold-deep);
}
.person-bio { margin: .85rem 0 0; font-size: .9rem; font-weight: 300; color: var(--muted); }

/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 2px;
}
.gallery figure { position: relative; margin: 0; aspect-ratio: 1; overflow: hidden; }
.gallery.is-varied figure:nth-child(4n + 1) { grid-row: span 2; aspect-ratio: 1 / 2.008; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.gallery figure:hover img { transform: scale(1.07); }
.gallery figcaption {
    position: absolute;
    inset: auto 0 0;
    padding: 2.6rem 1.1rem .9rem;
    background: linear-gradient(to top, rgba(5, 26, 19, .88), transparent);
    color: #fff;
    font-size: .74rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.gallery figure:hover figcaption { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Forms
   Underlined fields rather than outlined boxes.
   -------------------------------------------------------------------------- */

.field { margin-bottom: 1.5rem; }
.field label,
.field-label {
    display: block;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .55rem;
}
.field label .req { color: var(--gold-deep); }

.field input[type=text], .field input[type=email], .field input[type=tel],
.field input[type=date], .field input[type=number], .field input[type=url],
.field input[type=password], .field select, .field textarea {
    width: 100%;
    padding: .82rem 1rem;
    background: var(--field-bg);
    border: 1px solid var(--field-border);
    border-radius: 3px;
    font-family: inherit;
    font-size: .97rem;
    font-weight: 400;
    color: var(--ink);
    transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
    appearance: none;
}
.field textarea { min-height: 8.5rem; resize: vertical; line-height: 1.65; }

.field select {
    background-image: linear-gradient(45deg, transparent 50%, var(--green) 50%),
                      linear-gradient(135deg, var(--green) 50%, transparent 50%);
    background-position: calc(100% - 19px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 2.6rem;
    cursor: pointer;
}

/* Focus is a green border plus a soft ring - visible without shouting. */
.field :is(input, select, textarea):focus {
    outline: 0;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(11, 59, 44, .12);
}
.field :is(input, select, textarea):hover:not(:focus) { border-color: #a9a291; }
.field :is(input, select, textarea)::placeholder { color: var(--muted-light); font-weight: 300; }
.field :is(input, select, textarea).is-invalid,
.field :is(input, select, textarea):user-invalid {
    border-color: #b4432f;
    box-shadow: 0 0 0 3px rgba(180, 67, 47, .1);
}

/* Fields sitting on the dark green band. */
.on-dark .field input, .on-dark .field select, .on-dark .field textarea {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .28);
    color: #fff;
}
.on-dark .field :is(input, select, textarea):focus {
    border-color: var(--gold-on-dark);
    background: rgba(255, 255, 255, .1);
    box-shadow: 0 0 0 3px rgba(224, 178, 104, .18);
}
.on-dark .field :is(input, select, textarea):hover:not(:focus) { border-color: rgba(255, 255, 255, .45); }
.on-dark .field :is(input, textarea)::placeholder { color: rgba(255, 255, 255, .45); }
.on-dark .field label, .on-dark .field .field-label { color: rgba(255, 255, 255, .62); }
.on-dark .field-hint { color: rgba(255, 255, 255, .45); }
.on-dark .field select {
    background-image: linear-gradient(45deg, transparent 50%, #fff 50%),
                      linear-gradient(135deg, #fff 50%, transparent 50%);
}
.on-dark .field select option { color: var(--ink); }

.field-hint { margin-top: .45rem; font-size: .8rem; font-weight: 300; color: var(--muted-light); }

/* Required marker. The asterisk alone is easy to miss, so optional fields
   are labelled instead -- the guest can see at a glance what is compulsory. */
.field label .req {
    color: #b4432f;
    font-weight: 700;
    margin-left: .15rem;
}
.field label .opt {
    margin-left: .4rem;
    font-size: .92em;
    font-weight: 400;
    letter-spacing: .08em;
    color: var(--muted-light);
    text-transform: none;
}
.on-dark .field label .req { color: #f0a08c; }

.required-note {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.75rem;
    font-size: .78rem;
    font-weight: 400;
    color: var(--muted);
}
.required-note b { color: #b4432f; font-weight: 700; }
.on-dark .required-note { color: rgba(255, 255, 255, .6); }
.on-dark .required-note b { color: #f0a08c; }

/* Inline validation */
.field-error {
    display: none;
    align-items: flex-start;
    gap: .45rem;
    margin-top: .5rem;
    font-size: .82rem;
    font-weight: 400;
    line-height: 1.45;
    color: #b4432f;
}
.field-error.is-shown { display: flex; }
.field-error::before {
    content: '06a';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: .88em;
    line-height: 1.6;
    flex: none;
}
.on-dark .field-error { color: #f0a08c; }

.field.has-error :is(input, select, textarea) {
    border-color: #b4432f;
    background: #fdf7f6;
}
.field.has-error :is(input, select, textarea):focus {
    border-color: #b4432f;
    box-shadow: 0 0 0 3px rgba(180, 67, 47, .14);
}
.field.has-error label { color: #b4432f; }
.on-dark .field.has-error :is(input, select, textarea) {
    border-color: #f0a08c;
    background: rgba(240, 160, 140, .08);
}
.on-dark .field.has-error label { color: #f0a08c; }

/* Summary shown at the top of a form when submit is blocked. */
.error-summary {
    display: none;
    padding: 1rem 1.25rem;
    margin-bottom: 1.75rem;
    background: #faeeeb;
    border-left: 3px solid #b4432f;
    color: #8d3324;
    font-size: .9rem;
}
.error-summary.is-shown { display: block; }
.error-summary strong { display: block; margin-bottom: .35rem; font-weight: 600; }
.error-summary ul { margin: 0; padding-left: 1.1rem; }
.error-summary li { margin-top: .2rem; }
.error-summary a { color: #8d3324; text-decoration: underline; }
.on-dark .error-summary { background: rgba(240, 160, 140, .12); border-left-color: #f0a08c; color: #ffd9cf; }
.on-dark .error-summary a { color: #ffd9cf; }

.field-row { display: grid; gap: 0 1.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

/* File input, restyled to match the underlined fields. */
.field input[type=file] {
    width: 100%;
    padding: .7rem 0;
    font-size: .9rem;
    font-weight: 300;
    color: var(--muted);
    border-bottom: 1px solid var(--hairline);
}
.field input[type=file]::file-selector-button {
    margin-right: 1rem;
    padding: .5rem 1.1rem;
    background: var(--green-50);
    color: var(--green);
    border: 0;
    font-family: inherit;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
}

/* Radio and checkbox groups as selectable chips. */
.choice-group { display: flex; flex-wrap: wrap; gap: .6rem; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice span {
    display: block;
    padding: .62rem 1.15rem;
    font-size: .84rem;
    font-weight: 500;
    color: var(--muted);
    border: 1px solid var(--field-border);
    border-radius: 3px;
    background: var(--field-bg);
    cursor: pointer;
    transition: box-shadow .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.choice input:checked + span { background: var(--green); border-color: var(--green); color: #fff; }
.choice span:hover { border-color: #a9a291; }
.on-dark .choice span { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.28); color: rgba(255,255,255,.8); }
.on-dark .choice input:checked + span { background: var(--gold); border-color: var(--gold); color: var(--green-950); }
.choice input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Star rating. */
.stars { display: inline-flex; flex-direction: row-reverse; gap: .3rem; }
.stars input { position: absolute; opacity: 0; width: 0; }
.stars label {
    font-size: 1.6rem;
    line-height: 1;
    color: var(--hairline);
    cursor: pointer;
    margin: 0;
    transition: color .2s var(--ease);
}
.stars input:checked ~ label,
.stars label:hover, .stars label:hover ~ label { color: var(--gold); }

.form-status {
    display: none;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    font-size: .92rem;
    font-weight: 400;
    border-left: 2px solid var(--green);
    background: var(--green-50);
    color: var(--green);
}
.form-status.is-shown { display: block; }
.form-status.is-error { border-left-color: #b4432f; background: #faeeeb; color: #8d3324; }

.spinner {
    width: 14px;
    height: 14px;
    border: 1.5px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .7s linear infinite;
    display: none;
}
.is-busy .spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   Deposit panel
   -------------------------------------------------------------------------- */

.deposit { background: var(--green-50); padding: clamp(1.6rem, 3vw, 2.4rem); }
.deposit.on-dark { background: var(--green-900); }
.deposit-account + .deposit-account { border-top: 1px solid var(--hairline); margin-top: 1rem; padding-top: 1rem; }
.deposit.on-dark .deposit-account + .deposit-account { border-color: var(--hairline-dark); }
.deposit-network {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
}
.deposit.on-dark .deposit-network { color: rgba(255, 255, 255, .55); }
.deposit-number {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: 1.18rem;
    font-weight: 600;
    color: var(--green);
    letter-spacing: -.01em;
    margin-top: .15rem;
}
.deposit.on-dark .deposit-number { color: #fff; }
.copy-btn {
    background: none;
    border: 0;
    padding: .2rem .4rem;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold-deep);
    cursor: pointer;
}
.copy-btn:hover { color: var(--green); }
.deposit.on-dark .copy-btn { color: var(--gold-on-dark); }

.placeholder-note {
    margin-top: 1rem;
    padding: .75rem 1rem;
    background: rgba(201, 146, 47, .1);
    border-left: 2px solid var(--gold);
    font-size: .82rem;
    font-weight: 400;
    color: var(--gold-deep);
}

/* --------------------------------------------------------------------------
   Empty state - used by the blog until posts exist
   -------------------------------------------------------------------------- */

.empty {
    text-align: center;
    padding: clamp(3.5rem, 8vw, 6.5rem) 1.5rem;
    max-width: 46rem;
    margin-inline: auto;
}
.empty-mark {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.75rem;
    display: grid;
    place-content: center;
    background: var(--green-50);
    color: var(--green);
    font-size: 1.5rem;
}
.empty h2 { margin-bottom: .75rem; }
.empty p { color: var(--muted); font-weight: 300; margin-bottom: 2rem; }

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */

.quote { max-width: 34rem; }
.quote blockquote {
    margin: 0 0 1.5rem;
    font-size: clamp(1.08rem, 1.7vw, 1.32rem);
    font-weight: 300;
    line-height: 1.6;
    letter-spacing: -.012em;
    color: var(--ink);
}
.on-dark .quote blockquote { color: #fff; }
.quote blockquote::before { content: '\201C'; color: var(--gold); margin-right: .1em; }
.quote blockquote::after { content: '\201D'; color: var(--gold); }
.quote cite {
    font-style: normal;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted-light);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer { background: var(--green-950); color: rgba(255, 255, 255, .62); }

.footer-hook {
    padding: clamp(3rem, 6vw, 5rem) 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.footer-hook p {
    margin: 0;
    max-width: 24ch;
    font-size: clamp(1.5rem, 3.4vw, 2.5rem);
    font-weight: 300;
    line-height: 1.24;
    letter-spacing: -.028em;
    color: #fff;
}
.footer-hook em { font-style: italic; color: var(--gold-on-dark); }

.footer-main {
    display: grid;
    gap: clamp(2.25rem, 4vw, 3.5rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    padding: clamp(2.75rem, 5vw, 4rem) 0;
}
.footer-main > div:first-child { grid-column: span 1; }
@media (min-width: 900px) { .footer-main { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; } }

.footer-title {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold-on-dark);
    margin-bottom: 1.15rem;
}
.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list li { margin-bottom: .6rem; }
.footer-list a, .footer-main p {
    color: rgba(255, 255, 255, .62);
    font-size: .9rem;
    font-weight: 300;
}
.footer-list a:hover { color: #fff; }

/* The footer is dark but is not tagged .on-dark, so links that default to
   green -- the "Contact us" arrow link -- were rendering near-invisible. */
.site-footer .link-arrow {
    color: #fff;
    background-image: linear-gradient(var(--gold-on-dark), var(--gold-on-dark));
    background-size: 100% 1px;
}
.site-footer .link-arrow:hover { color: var(--gold-on-dark); }
.site-footer .link-arrow i { color: var(--gold-on-dark); }
.site-footer a { color: rgba(255, 255, 255, .62); }
.site-footer a:hover { color: #fff; }

.socials { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.socials a {
    width: 38px;
    height: 38px;
    display: grid;
    place-content: center;
    color: rgba(255, 255, 255, .7);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
    transition: background .3s var(--ease), color .3s var(--ease);
}
.socials a:hover { background: var(--gold); color: var(--green-950); box-shadow: none; }

.footer-base {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 2rem;
    justify-content: space-between;
    padding: 1.5rem 0 2rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: .78rem;
    font-weight: 300;
    color: rgba(255, 255, 255, .42);
}

/* Floating WhatsApp. */
.wa-float {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1030;
    width: 52px;
    height: 52px;
    display: grid;
    place-content: center;
    background: var(--green);
    color: #fff;
    font-size: 1.35rem;
    box-shadow: 0 8px 26px rgba(5, 26, 19, .3);
    transition: transform .3s var(--ease), background .3s var(--ease);
}
.wa-float:hover { background: var(--green-700); color: #fff; transform: translateY(-3px); }

/* --------------------------------------------------------------------------
   Reveal on scroll
   -------------------------------------------------------------------------- */

.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal-2 { transition-delay: .1s; }
.reveal-3 { transition-delay: .2s; }
.reveal-4 { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .reveal { opacity: 1; transform: none; }
    .hero-slide.is-active img { animation: none; transform: scale(1.04); }
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.stack > * + * { margin-top: var(--stack, 1rem); }
.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;
}
.skip-link {
    position: absolute; top: -100%; left: 1rem; z-index: 2000;
    background: var(--green); color: #fff; padding: .75rem 1.25rem; font-size: .85rem;
}
.skip-link:focus { top: 1rem; color: #fff; }

/* --------------------------------------------------------------------------
   Journal post
   -------------------------------------------------------------------------- */

.post-cover { margin: 0 0 clamp(2rem, 4vw, 3rem); }
.post-cover img { width: 100%; height: auto; }
.post-cover figcaption {
    margin-top: .8rem;
    font-size: .74rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--muted-light);
}

.post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1.4rem;
    padding-bottom: 1.4rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--hairline);
    font-size: .78rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted-light);
}

/* Post body: a comfortable measure and real paragraph rhythm. */
.post-body { font-size: 1.06rem; line-height: 1.78; }
.post-body p { margin: 0 0 1.35em; color: var(--ink); font-weight: 300; }
.post-body h3, .post-body h4 { margin: 2.1em 0 .6em; color: var(--green); }
.post-body h3 { font-size: 1.28rem; }
.post-body h4 { font-size: 1.08rem; }
.post-body ul, .post-body ol { margin: 0 0 1.35em; padding-left: 1.3em; color: var(--ink); font-weight: 300; }
.post-body li { margin-bottom: .45em; }
.post-body img { margin: 2rem 0; }
.post-body blockquote {
    margin: 2rem 0;
    padding: .3rem 0 .3rem 1.6rem;
    border-left: 2px solid var(--gold);
    font-size: 1.16rem;
    font-weight: 300;
    font-style: italic;
    color: var(--green);
}
.post-body a { text-decoration: underline; text-underline-offset: 3px; }
.post-body > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Virtual Library
   -------------------------------------------------------------------------- */

.player {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--green-950);
    overflow: hidden;
}
.player iframe, .player video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player-empty {
    display: grid;
    place-content: center;
    gap: 1rem;
    text-align: center;
    padding: 2rem;
    color: rgba(255, 255, 255, .75);
}
.player-empty p { margin: 0; }

/* Blocks the two spots on a YouTube embed that still link out to youtube.com
   (title bar top-left, logo bottom-right) even with modestbranding set.
   Pointer-events stay off everywhere else so play/pause/seek still work. */
.youtube-shield { position: absolute; z-index: 2; pointer-events: auto; }
.youtube-shield-top { top: 0; left: 0; right: 0; height: 12%; }
.youtube-shield-logo { right: 0; bottom: 0; width: 15%; height: 12%; }

/* Covers the iframe once the video ends, before YouTube's own "watch more"
   suggestion grid can render underneath and be clicked. Shown/hidden by
   main.js via the IFrame Player API's onStateChange event. */
.yt-end-cover {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-content: center;
    background-color: rgba(4, 20, 15, .82);
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
}
.yt-end-cover[hidden] { display: none; }

/* A library card. Locked ones carry a padlock and a price. */
.vid { display: flex; flex-direction: column; }
.vid-media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--green-900);
}
.vid-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.vid:hover .vid-media img { transform: scale(1.05); }

/* Play affordance, drawn rather than imported. */
.vid-play {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    background: linear-gradient(to top, rgba(5, 26, 19, .55), rgba(5, 26, 19, .08));
    transition: background .3s var(--ease);
}
.vid:hover .vid-play { background: linear-gradient(to top, rgba(5, 26, 19, .68), rgba(5, 26, 19, .2)); }
.vid-play i {
    width: 54px;
    height: 54px;
    display: grid;
    place-content: center;
    background: rgba(255, 255, 255, .93);
    color: var(--green);
    border-radius: 50%;
    font-size: 1.05rem;
    padding-left: 4px;
    transition: transform .3s var(--ease), background .3s var(--ease);
}
.vid:hover .vid-play i { transform: scale(1.08); background: #fff; }
.vid.is-locked .vid-play i { padding-left: 0; background: var(--gold); color: var(--green-950); }

.vid-tag {
    position: absolute;
    top: 0;
    left: 0;
    padding: .42rem 1rem;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    background: var(--green);
    color: #fff;
}
.vid-tag.is-free { background: var(--green); }
.vid-tag.is-paid { background: var(--gold); color: var(--green-950); }

.vid-length {
    position: absolute;
    right: .6rem;
    bottom: .6rem;
    padding: .18rem .5rem;
    background: rgba(5, 26, 19, .82);
    color: #fff;
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
}

.vid-body { padding-top: 1.15rem; }
.vid-cat {
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--gold-deep);
}
.vid h3 { margin: .5rem 0 .5rem; font-size: 1.1rem; letter-spacing: -.018em; }
.vid h3 a { color: var(--green); }
.vid:hover h3 a { color: var(--green-600); }
.vid p { margin: 0 0 1rem; font-size: .9rem; font-weight: 300; color: var(--muted); }
.vid-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-top: .9rem;
    border-top: 1px solid var(--hairline);
}

/* The locked state on a watch page: blurred still behind a paywall panel. */
.locked {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--green-950);
    display: grid;
    place-items: center;
    text-align: center;
}
.locked-still {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(14px) saturate(.7) brightness(.45);
    transform: scale(1.12);
}
.locked-inner { position: relative; padding: clamp(1.5rem, 4vw, 3rem); color: #fff; max-width: 34rem; }
.locked-inner i { font-size: 1.6rem; color: var(--gold-on-dark); }
.locked-inner h2 { color: #fff; margin: 1rem 0 .5rem; }
.locked-inner p { color: rgba(255, 255, 255, .78); font-weight: 300; margin: 0 0 1.4rem; }
.locked-price {
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    font-weight: 500;
    letter-spacing: -.03em;
    color: var(--gold-on-dark);
    line-height: 1;
    margin-bottom: 1.2rem;
}

/* Payment is not wired up yet, so the button says so and does nothing. */
.btn-soon {
    position: relative;
    cursor: not-allowed;
    opacity: .92;
}
.btn-soon::after {
    content: 'Coming soon';
    position: absolute;
    top: -.6rem;
    right: -.6rem;
    padding: .12rem .45rem;
    background: var(--gold);
    color: var(--green-950);
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    border-radius: 2px;
}
.btn-soon:hover { transform: none; }